refactor to accept a node rather than a string in the filter function

Author: LFDanLu

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, BaseEvent, DOMProps, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, BaseEvent, DOMProps, Node, RefObject} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
 import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isCtrlKeyPressed, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
@@ -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. */
-  filter?: (nodeTextValue: string) => boolean
+  filter?: (node: Node<unknown>) => boolean
 }
 
 /**
@@ -316,9 +316,9 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
     'aria-label': stringFormatter.format('collectionLabel')
   });
 
-  let filterFn = useCallback((nodeTextValue: string) => {
+  let filterFn = useCallback((node: Node<unknown>) => {
     if (filter) {
-      return filter(nodeTextValue, state.inputValue);
+      return filter(node.textValue, state.inputValue);
     }
 
     return true;

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

@@ -69,7 +69,7 @@ export class CollectionNode<T> implements Node<T> {
     return node;
   }
 
-  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (textValue: string) => boolean): CollectionNode<T> | null {
+  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (node: Node<T>) => boolean): CollectionNode<T> | null {
     let [firstKey, lastKey] = filterChildren(collection, newCollection, this.firstChildKey, filterFn);
     let newNode: Mutable<CollectionNode<T>> = this.clone();
     newNode.firstChildKey = firstKey;
@@ -97,8 +97,8 @@ export class ItemNode<T> extends CollectionNode<T> {
 
   // TODO: resolve this
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  filter(_, __, filterFn: (textValue: string) => boolean): ItemNode<T> | null {
-    if (filterFn(this.textValue)) {
+  filter(_, __, filterFn: (node: Node<T>) => boolean): ItemNode<T> | null {
+    if (filterFn(this)) {
       return this.clone();
     }
 
@@ -113,7 +113,7 @@ export class SectionNode<T> extends CollectionNode<T> {
     super(SectionNode.type, key);
   }
 
-  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (textValue: string) => boolean): SectionNode<T> | null {
+  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (node: Node<T>) => boolean): SectionNode<T> | null {
     let filteredSection = super.filter(collection, newCollection, filterFn);
     if (filteredSection) {
       if (filteredSection.lastChildKey !== null) {
@@ -283,7 +283,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     this.frozen = !isSSR;
   }
 
-  filter(filterFn: (textValue: string) => boolean, newCollection?: BaseCollection<T>): BaseCollection<T> {
+  filter(filterFn: (node: Node<T>) => boolean, newCollection?: BaseCollection<T>): BaseCollection<T> {
     if (newCollection == null) {
       newCollection = new BaseCollection<T>();
     }
@@ -295,7 +295,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   }
 }
 
-function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCollection<T>, firstChildKey: Key | null, filterFn: (textValue: string) => boolean): [Key | null, Key | null] {
+function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCollection<T>, firstChildKey: Key | null, filterFn: (node: Node<T>) => boolean): [Key | null, Key | null] {
   // loop over the siblings for firstChildKey
   // create new nodes based on calling node.filter for each child
   // if it returns null then don't include it, otherwise update its prev/next keys

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

@@ -73,7 +73,7 @@ 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> {
+export function UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filterFn: ((node: Node<T>) => boolean) | null | undefined): ListState<T> {
   let collection = useMemo(() => filterFn ? state.collection.filter!(filterFn) : state.collection, [state.collection, filterFn]);
   let selectionManager = state.selectionManager.withCollection(collection);
   useFocusedKeyReset(collection, selectionManager);

packages/@react-stately/table/src/useTableState.ts

@@ -111,7 +111,7 @@ export function useTableState<T extends object>(props: TableStateProps<T>): Tabl
 /**
  * Filters a collection using the provided filter function and returns a new TableState.
  */
-export function UNSTABLE_useFilteredTableState<T extends object>(state: TableState<T>, filterFn: ((nodeValue: string) => boolean) | null | undefined): TableState<T> {
+export function UNSTABLE_useFilteredTableState<T extends object>(state: TableState<T>, filterFn: ((node: Node<T>) => boolean) | null | undefined): TableState<T> {
   let collection = useMemo(() => filterFn ? state.collection.filter!(filterFn) : state.collection, [state.collection, filterFn]) as ITableCollection<T>;
   let selectionManager = state.selectionManager.withCollection(collection);
   // TODO: handle focus key reset? That logic is in useGridState

packages/@react-types/shared/src/collections.d.ts

@@ -183,7 +183,7 @@ export interface Collection<T> extends Iterable<T> {
   getTextValue?(key: Key): string,
 
   /** Filters the collection using the given function. */
-  filter?(filterFn: (nodeValue: string) => boolean): Collection<T>
+  filter?(filterFn: (node: T) => boolean): Collection<T>
 }
 
 export interface Node<T> {

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

@@ -14,6 +14,7 @@ import {AriaAutocompleteProps, CollectionOptions, useAutocomplete} from '@react-
 import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomplete';
 import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
+import {Node} from '@react-types/shared';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
 import React, {createContext, JSX, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
@@ -22,7 +23,7 @@ import {TextFieldContext} from './TextField';
 export interface AutocompleteProps extends AriaAutocompleteProps, SlotProps {}
 
 interface InternalAutocompleteContextValue {
-  filter?: (nodeTextValue: string) => boolean,
+  filter?: (node: Node<unknown>) => boolean,
   collectionProps: CollectionOptions,
   collectionRef: RefObject<HTMLElement | null>
 }

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

@@ -114,9 +114,9 @@ class SubmenuTriggerNode<T> extends CollectionNode<T> {
     super(SubmenuTriggerNode.type, key);
   }
 
-  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (textValue: string) => boolean): CollectionNode<T> | null {
+  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (node: Node<T>) => boolean): CollectionNode<T> | null {
     let triggerNode = collection.getItem(this.firstChildKey!);
-    if (triggerNode && filterFn(triggerNode.textValue)) {
+    if (triggerNode && filterFn(triggerNode)) {
       // TODO: perhaps should call super.filter for correctness, but basically add the menu item child of the submenutrigger
       // to the keymap so it renders
       newCollection.addNode(triggerNode as CollectionNode<T>);

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

@@ -1063,10 +1063,10 @@ class TableRowNode<T> extends CollectionNode<T> {
     super(TableRowNode.type, key);
   }
 
-  filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>, filterFn: (textValue: string) => boolean): TableRowNode<T> | null {
+  filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (node: Node<T>) => boolean): TableRowNode<T> | null {
     let cells = collection.getChildren(this.key);
     for (let cell of cells) {
-      if (filterFn(cell.textValue)) {
+      if (filterFn(cell)) {
         return this.clone();
       }
     }