Skip to content

Conversation

@niusia-ua
Copy link

@niusia-ua niusia-ua commented Sep 22, 2025

This PR introduces a new Gridbox component. Closes #2088.

I've tried to implement it following Reka UI's conventions and principles in accordance with WAI-ARIA.
This is an initial implementation to prove the concept and collaborate with maintainers.

The purpose of this component is to build layout grids with selection capabilities rather than tables.

Component anatomy:

<GridboxRoot>
  <GridboxContent>
    <GridboxRow>
      <GridboxCell>
        <GridboxCellIndicator />
      <GridboxCell>
    </GridboxRow>
    
    <!-- Or with virtualization. -->
    <GridboxVirtualizer :options="options" :columns="4">
      <template #row>
        <!-- You can style the gridbox row as you wish. -->
        <GridboxRow />
      <template>
      
      <template #cell>
        <!-- The `cell` slot will be rendered inside the `row` slot. -->
        <GridboxCell>
          <GridboxCellIndicator />
        <GridboxCell>
      <template>
    </GridboxVirtualizer>
  </GridboxContent>
</GridboxRoot>

Currently, it supports the following keyboard interaction:

  • Right Arrow: Moves focus one cell to the right.
    If focus is on the right-most cell in the row, focus moves to the first cell in the following row.
    If focus is on the last cell in the grid, focus does not move.
  • Left Arrow: Moves focus one cell to the left.
    If focus is on the left-most cell in the row, focus moves to the last cell in the previous row.
    If focus is on the first cell in the grid, focus does not move.
  • Down Arrow: Moves focus one cell down.
    If focus is on the last cell in the grid, focus does not move.
  • Up Arrow: Moves focus one cell up.
    If focus is on the first cell in the grid, focus does not move.
  • Home: Moves focus to the first cell in the row that contains focus.
  • End: Moves focus to the last cell in the row that contains focus.
  • Space or Enter: Changes the selection state of the focused option.
  • Control + A: Selects all cells.

Here is the preview of the base story of the Gridbox:

Screen.Recording.2025-09-22.135509.mp4

Todo:

  • Add GridboxCellIndicator.
  • Write tests.
  • Create more stories.
  • Implement virtualization.

@niusia-ua niusia-ua marked this pull request as ready for review September 24, 2025 07:49
@niusia-ua
Copy link
Author

Important note: the current Gridbox implementation isn't aligned with WAI-ARIA internal cell navigation and cell content editing, as the considered use cases are interactive grids with selection capabilities (like 2D listboxes).

@niusia-ua
Copy link
Author

@zernonia sorry pinging you directly. Could you please review this PR?
I will appreciate any feedback. I would really like to hear from you about the Gridbox component.

@zernonia
Copy link
Member

zernonia commented Oct 8, 2025

Thanks for the PR @niusia-ua ! However I think this addition is abit repetitive of what Listbox component could be. I have plan to support grid #1763, so I would lean towards that feature instead of a dedicated grid component

@niusia-ua
Copy link
Author

niusia-ua commented Oct 8, 2025

@zernonia Thank you for your response!

Great. Then, I will look into your ticket and try to update the Listbox component instead.

If you have any thoughts or work done already, please share it so that I can do my best to align with your idea.

@zernonia
Copy link
Member

zernonia commented Oct 8, 2025

Thanks for being open to suggestion and changes @niusia-ua !
I have not much progress thus far, but you may look at the implementation from https://react-spectrum.adobe.com/react-aria/ListBox.html#vertical-grid for some inspiration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Gridbox

2 participants