Virtualized GridLayout with Sections

[BrianHung]

Trying to port an emoji picker over to react-aria. The emoji picker has a grid layout with section titles; there is an additional requirement that the list be virtualized.

Would the following work to achieve that layout?

  let listLayout = React.useMemo(() =>
    new ListLayout<unknown>({
      estimatedRowHeight: 32,
      loaderHeight: 40,
    })
  , []);

  let gridLayout = React.useMemo(() =>
    new GridLayout<unknown>({
      minItemSize: new Size(32, 32),
      minSpace: new Size(8, 8),
    })
  , []);

    <Virtualizer layout={gridLayout}>
      <ListBox
        aria-label="Pick an emoji"
        items={list.items}
        isLoading={list.isLoading}
        onLoadMore={list.loadMore}
        style={{height: 400, width: 300, overflow: 'hidden auto' }}
        layout="grid"
      >
      {section => (
        <Section id={section.name} style={{ width: "100%", height: "100%" }}>
          <Header>{section.name}</Header>
          <Collection items={section.children}>
          {
            (item) => (
              <ListBoxItem id={item.unicode} textValue={item.name} style={{ width: '100%', height: '100%' }}>
                <Emoji emoji={item} style={{ width: '32px', height: '32px'}}/>
              </ListBoxItem>
            )
          }
          </Collection>
        </Section>
      )}
    </ListBox>
  </Virtualizer>

It doesn't look like GridLayout supports headers.

react-spectrum/packages/@react-stately/layout/src/ListLayout.ts

Lines 253 to 264 in cfd890e

	protected buildNode(node: Node<T>, x: number, y: number): LayoutNode {
	switch (node.type) {
	case 'section':
	return this.buildSection(node, x, y);
	case 'item':
	return this.buildItem(node, x, y);
	case 'header':
	return this.buildSectionHeader(node, x, y);
	case 'loader':
	return this.buildLoader(node, x, y);
	}
	}

Would a list layout for each section, and then a grid layout for section children work as a workaround?

[BrianHung]

Devon replied on Twitter

Not yet, but it could be done with a custom layout. You could start by copying the code for GridLayout and modifying it. Sorry it's a bit early so there aren't any docs yet.