feat: (React Aria) Implement filtering on a per CollectionNode basis

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -29,12 +29,12 @@ export interface CollectionOptions extends DOMProps, AriaLabelingProps {
 }
 
 // TODO; For now go with Node here, but maybe pare it down to just the essentials? Value, key, and maybe type?
-export interface AriaAutocompleteProps extends AutocompleteProps {
+export interface AriaAutocompleteProps<T> extends AutocompleteProps {
   /**
    * An optional filter function used to determine if a option should be included in the autocomplete list.
    * Include this if the items you are providing to your wrapped collection aren't filtered by default.
    */
-  filter?: (textValue: string, inputValue: string, node: Node<unknown>) => boolean,
+  filter?: (textValue: string, inputValue: string, node: Node<T>) => boolean,
 
   /**
    * Whether or not to focus the first item in the collection after a filter is performed.
@@ -43,7 +43,7 @@ export interface AriaAutocompleteProps extends AutocompleteProps {
   disableAutoFocusFirst?: boolean
 }
 
-export interface AriaAutocompleteOptions extends Omit<AriaAutocompleteProps, 'children'> {
+export interface AriaAutocompleteOptions<T> extends Omit<AriaAutocompleteProps<T>, 'children'> {
   /** The ref for the wrapped collection element. */
   inputRef: RefObject<HTMLInputElement | null>,
   /** The ref for the wrapped collection element. */
@@ -67,7 +67,7 @@ export interface AutocompleteAria<T> {
  * @param props - Props for the autocomplete.
  * @param state - State for the autocomplete, as returned by `useAutocompleteState`.
  */
-export function useAutocomplete<T>(props: AriaAutocompleteOptions, state: AutocompleteState): AutocompleteAria<T> {
+export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: AutocompleteState): AutocompleteAria<T> {
   let {
     inputRef,
     collectionRef,
@@ -318,7 +318,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions, state: Autoco
     'aria-label': stringFormatter.format('collectionLabel')
   });
 
-  let filterFn = useCallback((nodeTextValue: string, node: Node<unknown>) => {
+  let filterFn = useCallback((nodeTextValue: string, node: Node<T>) => {
     if (filter) {
       return filter(nodeTextValue, state.inputValue, node);
     }

packages/dev/s2-docs/src/SearchMenu.tsx

@@ -125,7 +125,7 @@ const getCurrentLibrary = (currentPage: Page) => {
 
 export default function SearchMenu(props: SearchMenuProps) {
   let {pages, currentPage, toggleShowSearchMenu, closeSearchMenu, isSearchOpen} = props;
-  
+
   const currentLibrary = getCurrentLibrary(currentPage);
   let [selectedLibrary, setSelectedLibrary] = useState<'react-spectrum' | 'react-aria' | 'internationalized'>(currentLibrary);
   let [searchValue, setSearchValue] = useState('');
@@ -140,14 +140,14 @@ export default function SearchMenu(props: SearchMenuProps) {
       },
       {
         id: 'react-aria',
-        label: 'React Aria', 
+        label: 'React Aria',
         description: 'Style-free components and hooks for building accessible UIs',
         icon: <ReactAriaLogo />
       },
       {
         id: 'internationalized',
         label: 'Internationalized',
-        description: 'Framework-agnostic internationalization utilities', 
+        description: 'Framework-agnostic internationalization utilities',
         icon: <InternationalizedLogo />
       }
     ];
@@ -158,7 +158,7 @@ export default function SearchMenu(props: SearchMenuProps) {
       const currentTab = allTabs.splice(currentTabIndex, 1)[0];
       allTabs.unshift(currentTab);
     }
-    
+
     return allTabs;
   };
 
@@ -184,13 +184,13 @@ export default function SearchMenu(props: SearchMenuProps) {
         } else if (page.url.includes('react-internationalized')) {
           library = 'internationalized';
         }
-        
+
         return library === selectedLibrary;
       })
       .map(page => {
         const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
         const title = page.tableOfContents?.[0]?.title || name;
-        
+
         return {
           id: name,
           name: title,
@@ -257,7 +257,7 @@ export default function SearchMenu(props: SearchMenuProps) {
 
   let {contains} = useFilter({sensitivity: 'base'});
 
-  let filter: AutocompleteProps['filter'] = (textValue, inputValue) => {
+  let filter: AutocompleteProps<any>['filter'] = (textValue, inputValue) => {
     return textValue != null && contains(textValue, inputValue);
   };
 
@@ -294,7 +294,7 @@ export default function SearchMenu(props: SearchMenuProps) {
 
   return (
     <div
-      className={style({ 
+      className={style({
         display: 'grid',
         gridTemplateColumns: 'auto 1fr',
         alignItems: 'center',

packages/dev/s2-docs/src/SearchResultsMenu.tsx

@@ -30,7 +30,7 @@ interface SearchResultsMenuProps {
   searchRef: React.RefObject<TextFieldRef<HTMLInputElement> | null>,
   showCards: boolean,
   renderCardList: () => React.ReactNode,
-  filter?: AutocompleteProps['filter'],
+  filter?: AutocompleteProps<any>['filter'],
   noResultsText?: (value: string) => string,
   closeSearchMenu: () => void,
   isPrimary?: boolean
@@ -48,7 +48,7 @@ function CloseButton({closeSearchMenu}: {closeSearchMenu: () => void}) {
           <Close />
         </ActionButton>
       </Provider>
-    </div> 
+    </div>
   );
 }
 

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

@@ -20,24 +20,24 @@ import React, {createContext, JSX, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
 import {TextFieldContext} from './TextField';
 
-export interface AutocompleteProps extends AriaAutocompleteProps, SlotProps {}
+export interface AutocompleteProps<T> extends AriaAutocompleteProps<T>, SlotProps {}
 
-interface InternalAutocompleteContextValue {
-  filter?: (nodeTextValue: string, node: Node<unknown>) => boolean,
+interface InternalAutocompleteContextValue<T> {
+  filter?: (nodeTextValue: string, node: Node<T>) => boolean,
   collectionProps: CollectionOptions,
   collectionRef: RefObject<HTMLElement | null>
 }
 
-export const AutocompleteContext = createContext<SlottedContextValue<Partial<AutocompleteProps>>>(null);
+export const AutocompleteContext = createContext<SlottedContextValue<Partial<AutocompleteProps<any>>>>(null);
 export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
 // This context is to pass the register and filter down to whatever collection component is wrapped by the Autocomplete
 // TODO: export from RAC, but rename to something more appropriate
-export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutocompleteContextValue | null>(null);
+export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutocompleteContextValue<any> | null>(null);
 
 /**
  * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
  */
-export function Autocomplete(props: AutocompleteProps): JSX.Element {
+export function Autocomplete<T>(props: AutocompleteProps<T>): JSX.Element {
   let ctx = useSlottedContext(AutocompleteContext, props.slot);
   props = mergeProps(ctx, props);
   let {filter, disableAutoFocusFirst} = props;
@@ -65,7 +65,7 @@ export function Autocomplete(props: AutocompleteProps): JSX.Element {
         [TextFieldContext, textFieldProps],
         [InputContext, {ref: inputRef}],
         [UNSTABLE_InternalAutocompleteContext, {
-          filter: filterFn,
+          filter: filterFn as (nodeTextValue: string, node: Node<T>) => boolean,
           collectionProps,
           collectionRef: mergedCollectionRef
         }]