Rename filterFn in useAutocomplete to filter (#7863)

Author: LFDanLu

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

@@ -56,7 +56,7 @@ export interface AutocompleteAria {
   /** Ref to attach to the wrapped collection. */
   collectionRef: RefObject<HTMLElement | null>,
   /** A filter function that returns if the provided collection node should be filtered out of the collection. */
-  filterFn?: (nodeTextValue: string) => boolean
+  filter?: (nodeTextValue: string) => boolean
 }
 
 /**
@@ -97,7 +97,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
     if (e.isTrusted || !target || queuedActiveDescendant.current === target.id) {
       return;
     }
-    
+
     clearTimeout(timeout.current);
     if (target !== collectionRef.current) {
       if (delayNextActiveDescendant.current) {
@@ -252,7 +252,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
         new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
       ) || false;
     }
-    
+
     if (shouldPerformDefaultAction) {
       switch (e.key) {
         case 'ArrowLeft':
@@ -359,6 +359,6 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
       disallowTypeAhead: true
     }),
     collectionRef: mergedCollectionRef,
-    filterFn: filter != null ? filterFn : undefined
+    filter: filter != null ? filterFn : undefined
   };
 }

packages/@react-stately/list/src/useListState.ts

@@ -73,8 +73,8 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
 /**
  * Filters a collection using the provided filter function and returns a new ListState.
  */
-export function UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filterFn: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
-  let collection = useMemo(() => filterFn ? state.collection.UNSTABLE_filter!(filterFn) : state.collection, [state.collection, filterFn]);
+export function UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filter: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
+  let collection = useMemo(() => filter ? state.collection.UNSTABLE_filter!(filter) : state.collection, [state.collection, filter]);
   let selectionManager = state.selectionManager.withCollection(collection);
   useFocusedKeyReset(collection, selectionManager);
   return {

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

@@ -22,7 +22,7 @@ import {TextFieldContext} from './TextField';
 export interface AutocompleteProps extends AriaAutocompleteProps, SlotProps {}
 
 interface InternalAutocompleteContextValue {
-  filterFn?: (nodeTextValue: string) => boolean,
+  filter?: (nodeTextValue: string) => boolean,
   collectionProps: CollectionOptions,
   collectionRef: RefObject<HTMLElement | null>
 }
@@ -47,7 +47,7 @@ export function Autocomplete(props: AutocompleteProps) {
     textFieldProps,
     collectionProps,
     collectionRef: mergedCollectionRef,
-    filterFn
+    filter: filterFn
   } = useAutocomplete({
     ...removeDataAttributes(props),
     filter,
@@ -64,7 +64,7 @@ export function Autocomplete(props: AutocompleteProps) {
         [TextFieldContext, textFieldProps],
         [InputContext, {ref: inputRef}],
         [UNSTABLE_InternalAutocompleteContext, {
-          filterFn,
+          filter: filterFn,
           collectionProps,
           collectionRef: mergedCollectionRef
         }]

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

@@ -118,12 +118,12 @@ interface ListBoxInnerProps<T> {
 }
 
 function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}: ListBoxInnerProps<T>) {
-  let {filterFn, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
   props = useMemo(() => collectionProps ? ({...props, ...collectionProps}) : props, [props, collectionProps]);
   let {dragAndDropHooks, layout = 'stack', orientation = 'vertical'} = props;
   // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
   listBoxRef = useObjectRef(useMemo(() => mergeRefs(listBoxRef, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, listBoxRef]));
-  let state = UNSTABLE_useFilteredListState(inputState, filterFn);
+  let state = UNSTABLE_useFilteredListState(inputState, filter);
   let {collection, selectionManager} = state;
   let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;

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

@@ -183,10 +183,10 @@ interface MenuInnerProps<T> {
 }
 
 function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInnerProps<T>) {
-  let {filterFn, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
   // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
   ref = useObjectRef(useMemo(() => mergeRefs(ref, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, ref]));
-  let filteredCollection = useMemo(() => filterFn ? collection.UNSTABLE_filter(filterFn) : collection, [collection, filterFn]);
+  let filteredCollection = useMemo(() => filter ? collection.UNSTABLE_filter(filter) : collection, [collection, filter]);
   let state = useTreeState({
     ...props,
     collection: filteredCollection as ICollection<Node<object>>,