support filtering when there are sections in gridlist

Author: LFDanLu

packages/@react-aria/collections/src/BaseCollection.ts

@@ -91,7 +91,11 @@ export class FilterLessNode<T> extends CollectionNode<T> {
   }
 }
 
-export class LoaderNode extends FilterLessNode<any> {
+export class HeaderNode extends FilterLessNode<unknown> {
+  static readonly type = 'header';
+}
+
+export class LoaderNode extends FilterLessNode<unknown> {
   static readonly type = 'loader';
 }
 

packages/@react-aria/collections/src/index.ts

@@ -13,7 +13,7 @@
 export {CollectionBuilder, Collection, createLeafComponent, createBranchComponent} from './CollectionBuilder';
 export {createHideableComponent, useIsHidden} from './Hidden';
 export {useCachedChildren} from './useCachedChildren';
-export {BaseCollection, CollectionNode, ItemNode, SectionNode, FilterLessNode, LoaderNode} from './BaseCollection';
+export {BaseCollection, CollectionNode, ItemNode, SectionNode, FilterLessNode, LoaderNode, HeaderNode} from './BaseCollection';
 
 export type {CollectionBuilderProps, CollectionProps} from './CollectionBuilder';
 export type {CachedChildrenOptions} from './useCachedChildren';

packages/react-aria-components/src/GridList.tsx

@@ -12,7 +12,7 @@
 import {AriaGridListProps, DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useGridList, useGridListItem, useGridListSection, useGridListSelectionCheckbox, useHover, useLocale, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
-import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent, ItemNode, LoaderNode} from '@react-aria/collections';
+import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent, HeaderNode, ItemNode, LoaderNode, SectionNode} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, SectionProps} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
@@ -580,7 +580,7 @@ export interface GridListSectionProps<T> extends SectionProps<T> {}
 /**
  * A GridListSection represents a section within a GridList.
  */
-export const GridListSection = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: GridListSectionProps<T>, ref: ForwardedRef<HTMLElement>, item: Node<T>) => {
+export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, <T extends object>(props: GridListSectionProps<T>, ref: ForwardedRef<HTMLElement>, item: Node<T>) => {
   let state = useContext(ListStateContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let headingRef = useRef(null);
@@ -617,7 +617,7 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent('section', <T
 
 const GridListHeaderContext = createContext<HTMLAttributes<HTMLElement> | null>(null);
 
-export const GridListHeader = /*#__PURE__*/ createLeafComponent('header', function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, HeaderContext);
   let rowHeaderProps = useContext(GridListHeaderContext);
 

packages/react-aria-components/src/Header.tsx

@@ -11,15 +11,11 @@
  */
 
 import {ContextValue, useContextProps} from './utils';
-import {createLeafComponent, FilterLessNode} from '@react-aria/collections';
+import {createLeafComponent, HeaderNode} from '@react-aria/collections';
 import React, {createContext, ForwardedRef, HTMLAttributes} from 'react';
 
 export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
-class HeaderNode extends FilterLessNode<unknown> {
-  static readonly type = 'header';
-}
-
 export const Header = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, HeaderContext);
   return (

packages/react-aria-components/stories/Autocomplete.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Autocomplete, Button, Cell, Collection, Column, DialogTrigger, GridList, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, OverlayArrow, Popover, Row, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Table, TableBody, TableHeader, TableLayout, TagGroup, TagList, Text, TextArea, TextField, Tooltip, TooltipTrigger, Virtualizer} from 'react-aria-components';
+import {Autocomplete, Button, Cell, Collection, Column, DialogTrigger, GridList, GridListHeader, GridListSection, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, OverlayArrow, Popover, Row, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Table, TableBody, TableHeader, TableLayout, TagGroup, TagList, Text, TextArea, TextField, Tooltip, TooltipTrigger, Virtualizer} from 'react-aria-components';
 import {LoadingSpinner, MyListBoxItem, MyMenuItem} from './utils';
 import {Meta, StoryObj} from '@storybook/react';
 import {MyCheckbox} from './Table.stories';
@@ -973,15 +973,24 @@ export const AutocompleteWithGridList = () => {
           className={styles.menu}
           style={{height: 200, width: 200}}
           aria-label="test gridlist">
-          <MyGridListItem textValue="Foo">Foo <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Bar">Bar <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Baz">Baz <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Charizard">Charizard<Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Blastoise">Blastoise <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Pikachu">Pikachu <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Venusaur">Venusaur<Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="text value check">textValue is "text value check" <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem textValue="Blah">Blah <Button>Actions</Button></MyGridListItem>
+          <GridListSection>
+            <GridListHeader>Section 1</GridListHeader>
+            <MyGridListItem textValue="Foo">Foo <Button>Actions</Button></MyGridListItem>
+            <MyGridListItem textValue="Bar">Bar <Button>Actions</Button></MyGridListItem>
+            <MyGridListItem textValue="Baz">Baz <Button>Actions</Button></MyGridListItem>
+          </GridListSection>
+          <GridListSection>
+            <GridListHeader>Section 2</GridListHeader>
+            <MyGridListItem textValue="Charizard">Charizard<Button>Actions</Button></MyGridListItem>
+            <MyGridListItem textValue="Blastoise">Blastoise <Button>Actions</Button></MyGridListItem>
+            <MyGridListItem textValue="Pikachu">Pikachu <Button>Actions</Button></MyGridListItem>
+            <MyGridListItem textValue="Venusaur">Venusaur<Button>Actions</Button></MyGridListItem>
+          </GridListSection>
+          <GridListSection>
+            <GridListHeader>Section 3</GridListHeader>
+            <MyGridListItem textValue="text value check">textValue is "text value check" <Button>Actions</Button></MyGridListItem>
+            <MyGridListItem textValue="Blah">Blah <Button>Actions</Button></MyGridListItem>
+          </GridListSection>
         </GridList>
       </div>
     </AutocompleteWrapper>