add autocomplete gridlist filtering

Author: LFDanLu

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

@@ -17,12 +17,13 @@ import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, I
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
-import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
+import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {TextContext} from './Text';
+import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
 
 export interface GridListRenderProps {
   /**
@@ -103,21 +104,25 @@ interface GridListInnerProps<T extends object> {
 }
 
 function GridListInner<T extends object>({props, collection, gridListRef: ref}: GridListInnerProps<T>) {
+  // TODO: for now, don't grab collection ref and collectionProps from the autocomplete, rely on the user tabbing to the gridlist
+  // figure out if we want to support virtual focus for grids when wrapped in an autocomplete
+  let {filter} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
   let {dragAndDropHooks, keyboardNavigationBehavior = 'arrow', layout = 'stack'} = props;
   let {CollectionRoot, isVirtualized, layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate} = useContext(CollectionRendererContext);
-  let state = useListState({
+  let gridlistState = useListState({
     ...props,
     collection,
     children: undefined,
     layoutDelegate
   });
 
+  let filteredState = UNSTABLE_useFilteredListState(gridlistState, filter);
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
-  let {disabledBehavior, disabledKeys} = state.selectionManager;
+  let {disabledBehavior, disabledKeys} = filteredState.selectionManager;
   let {direction} = useLocale();
   let keyboardDelegate = useMemo(() => (
     new ListKeyboardDelegate({
-      collection,
+      collection: filteredState.collection,
       collator,
       ref,
       disabledKeys,
@@ -126,7 +131,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
       layout,
       direction
     })
-  ), [collection, ref, layout, disabledKeys, disabledBehavior, layoutDelegate, collator, direction]);
+  ), [filteredState.collection, ref, layout, disabledKeys, disabledBehavior, layoutDelegate, collator, direction]);
 
   let {gridProps} = useGridList({
     ...props,
@@ -135,9 +140,9 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior,
     isVirtualized,
     shouldSelectOnPressUp: props.shouldSelectOnPressUp
-  }, state, ref);
+  }, filteredState, ref);
 
-  let selectionManager = state.selectionManager;
+  let selectionManager = filteredState.selectionManager;
   let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
   let dragHooksProvided = useRef(isListDraggable);
@@ -163,7 +168,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
   if (isListDraggable && dragAndDropHooks) {
     dragState = dragAndDropHooks.useDraggableCollectionState!({
-      collection,
+      collection: filteredState.collection,
       selectionManager,
       preview: dragAndDropHooks.renderDragPreview ? preview : undefined
     });
@@ -177,12 +182,12 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
   if (isListDroppable && dragAndDropHooks) {
     dropState = dragAndDropHooks.useDroppableCollectionState!({
-      collection,
+      collection: filteredState.collection,
       selectionManager
     });
 
     let keyboardDelegate = new ListKeyboardDelegate({
-      collection,
+      collection: filteredState.collection,
       disabledKeys: selectionManager.disabledKeys,
       disabledBehavior: selectionManager.disabledBehavior,
       ref
@@ -197,14 +202,14 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   }
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  let isEmpty = state.collection.size === 0;
+  let isEmpty = filteredState.collection.size === 0;
   let renderValues = {
     isDropTarget: isRootDropTarget,
     isEmpty,
     isFocused,
     isFocusVisible,
     layout,
-    state
+    state: filteredState
   };
   let renderProps = useRenderProps({
     className: props.className,
@@ -243,13 +248,13 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
         data-layout={layout}>
         <Provider
           values={[
-            [ListStateContext, state],
+            [ListStateContext, filteredState],
             [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [DropIndicatorContext, {render: GridListDropIndicatorWrapper}]
           ]}>
           {isListDroppable && <RootDropIndicator />}
           <CollectionRoot
-            collection={collection}
+            collection={filteredState.collection}
             scrollRef={ref}
             persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
             renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
@@ -279,13 +284,20 @@ export interface GridListItemProps<T = object> extends RenderProps<GridListItemR
   onAction?: () => void
 }
 
-// TODO: add filter funct to this
+// TODO: reuse?
 class GridListNode extends CollectionNode<any> {
   static readonly type = 'item';
   constructor(key: Key) {
     super(GridListNode.type, key);
   }
 
+  filter(_, __, filterFn: (textValue: string) => boolean): CollectionNode<any> | null {
+    if (filterFn(this.textValue)) {
+      return this.clone();
+    }
+
+    return null;
+  }
 }
 
 /**

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

@@ -957,17 +957,17 @@ export const AutocompleteWithGridList = () => {
         </TextField>
         <GridList
           className={styles.menu}
-          style={{height: 200}}
+          style={{height: 200, width: 200}}
           aria-label="test gridlist">
-          <MyGridListItem>1,1 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>1,2 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>1,3 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>2,1 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>2,2 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>2,3 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>3,1 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>3,2 <Button>Actions</Button></MyGridListItem>
-          <MyGridListItem>3,3 <Button>Actions</Button></MyGridListItem>
+          <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>
         </GridList>
       </div>
     </AutocompleteWrapper>