GridList: Add support for Sections, Headers & Separators

[selrond]

Provide a general summary of the feature here

From what I understand, GridList is a more interaction-focused alternative to ListBox. They also both refer to each other in their documentation pages.
Therefore, I believe it makes sense for them to have similar features, like Sections, Separators & Section Headers.

🤔 Expected Behavior?

Same (similar) as in ListBox – being able to group the items into Sections, which can contain Header & can be separated by Separators

😯 Current Behavior

GridList doesn’t support Sections, Headers or Separators

💁 Possible Solution

No response

🔦 Context

One use case I have is that I want to support having checkboxes as an affordance for multi-select inside the ListBox, but it’s not supported / allowed. I could use GridList, but then I’d lose Sectioning, Headers & Separators from ListBox

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[selrond]

Is this something that would be a good first issue if it makes sense? If so, I'd like to give it a shot

[LFDanLu]

We are definitely looking to eventually support this in GridList, I had opened Supporting sections in ListView quite some time back but we dropped it due to wanting to use the new Collections implementation that RAC brought with it which at the time didn't exist yet. Definitely feel free to peruse that PR if you'd like, just keep in mind that there is definitely stuff that will need to be rewritten to work with the new Collections implementation which may or may not be trivial.

I'd be happy for you to take a look at it, just keep in mind that we are following the grid pattern here versus Listbox which follows the listbox pattern. Also I'd advise not diving too deep with a first pass for this functionality, the team will want to first see a RFC or POC so we can discuss API/other considerations first and foremost

[selrond]

@LFDanLu In the meantime — is there an easy way to have checkbox be a part of each ListBox Item, so checking it toggles its item selection?

I've tried consuming the ListBoxContext inside ListBox Item and triggering context.onAction inside Checkbox onChange handler, but it didn't work

[LFDanLu]

For ListBox, interactive content like the Checkbox isn't actually allowed by the ARIA spec as mentioned here via the "children presentational: true" characteristic and here.

[selrond]

Yep I’ve noticed that, but I need to monkeypatch it somehow for the time being

[LFDanLu]

could you do something like https://react-spectrum.adobe.com/react-aria/ListBox.html#contexts where you make your ListBox's selection controlled and then call your onSelectionChange with the appropriate option key in the Checkbox's onChange? The Checkbox would need to source it's parent option's key somehow though...

[selrond]

Exactly, this is the main challenge. It's not even exposed in ListBox Item's renderProps 😕

[LFDanLu]

I don't believe there is a good way to source that at the moment unfortunately. You may have to drop to a hooks level implementation since we don't support an interactive Checkbox in the option and thus don't have the appropriate even handlers being passed down via context automatically. Is there a reason that you are using a ListBox instead of a Gridlist here?
Or could it just visually look like a checkbox but not actually be one?

[selrond]

@LFDanLu the reason is the same as the reason for this issue — I need to have sections, headers and separators, but GridList doesn't support those ATM

[oisinlavery]

@selrond — I had the same requirements recently (checkboxes to toggle selection, sections, headers, virtualized, etc.)

When I came to a dead end with ListBox I simply swapped in GridList and everything just worked. I am using a LisBox as the sction container.

I guess it's a little risky as it is undocumented but hopefully this shows that bringing Sections and Headers to GridList shouldn't be too much work.

    <Virtualizer
      layout={ListLayout}
      layoutOptions={{
        headingHeight: 20,
        rowHeight: 44,
        gap: 16,
        padding: 24,
      }}
    >
      <GridList
        items={props.list}
        selectedKeys={props.selectedKeys}
        selectionMode="multiple"
        onSelectionChange={(keys) => {
          props.onSelectionChange(Array.from(keys) as string[]);
        }}
        style={{
          flex: 1,
          overflow: 'auto',
        }}
      >
        {(section) => (
          <ListBoxSection>
            <Header>
              <RHDSLabel style={{ paddingBlock: 0 }}>{section.title}</RHDSLabel>
            </Header>

            <Collection items={section.items}>
              {(item) => (
                <GridListItem
                  id={item.id}
                  style={{
                    display: 'flex',
                    // width: '100%',
                    gap: 12,
                    marginInline: -8,
                    paddingInline: 8,
                    borderRadius: 4,
                  }}
                  className={(props) =>
                    focusOutline({
                      isFocusVisible: props.isFocusVisible,
                      className: `cursor-pointer`,
                    })
                  }
                >
                  {({ isSelected }) => (
                    <>
                      <RHDSCheckbox
                        slot="selection"
                        size={16}
                        className={`mt-1 ${isSelected ? 'text-primary' : ''}`}
                      />

                      <div style={{ overflow: 'hidden' }}>
                        <div
                          style={{
                            marginBottom: 2,
                            fontSize: 16,
                          }}
                          className={`${isSelected ? 'text-primary' : ''}`}
                        >
                          {item.title}
                        </div>
                        <div
                          style={{
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            color: 'var(--outline)',
                            fontSize: 12,
                          }}
                        >
                          {item.subtitle}
                        </div>
                      </div>
                    </>
                  )}
                </GridListItem>
              )}
            </Collection>
          </ListBoxSection>
        )}
      </GridList>
    </Virtualizer>

[alanhajo-ui]

+1, would be great to add this to Tree as well.