Add support for nested filtering in useListData

packages/@react-spectrum/listbox/stories/ListBox.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, Text} from '@adobe/react-spectrum';
+import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, Text, useFilter} from '@adobe/react-spectrum';
 import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
@@ -26,7 +26,7 @@ import {Label} from '@react-spectrum/label';
 import Paste from '@spectrum-icons/workflow/Paste';
 import React, {useRef, useState} from 'react';
 import {TranslateListBox} from './../chromatic/ListBoxLanguages.chromatic';
-import {useAsyncList, useTreeData} from '@react-stately/data';
+import {useAsyncList, useListData, useTreeData} from '@react-stately/data';
 
 let iconMap = {
   AlignCenter,
@@ -1043,3 +1043,36 @@ export const WithAvatars = {
     </StoryDecorator>
   )]
 };
+
+
+export const FilterableListBox = {
+  render: () => <SearchableListBox />,
+  decorators: null,
+  name: 'filterable listbox'
+};
+
+function SearchableListBox() {
+
+  const {contains} = useFilter({sensitivity: 'base'});
+
+  const list = useListData({
+    initialItems: withSection,
+    filterKey: 'children',
+    filter: (item, text) => {
+      return contains(item.name, text);
+    }
+  });
+
+  return (
+    <>
+      <input type="text" onChange={(e) => list.setFilterText(e.target.value)} />
+      <ListBox width="150px" items={list.items} aria-labelledby="labelSearchableListBox">
+        {(item) => (
+          <Section key={item.name} items={item.children} title={item.name}>
+            {(item) => <Item key={item.name}>{item.name}</Item>}
+          </Section>
+        )}
+      </ListBox >
+    </>
+  );
+}

packages/@react-stately/data/src/useListData.ts

@@ -23,7 +23,9 @@ export interface ListOptions<T> {
   /** A function that returns a unique key for an item object. */
   getKey?: (item: T) => Key,
   /** A function that returns whether a item matches the current filter text. */
-  filter?: (item: T, filterText: string) => boolean
+  filter?: (item: T, filterText: string) => boolean,
+  /** The key of the item that contains the nested items it should filter. */
+  filterKey?: string
 }
 
 export interface ListData<T> {
@@ -142,6 +144,7 @@ export function useListData<T>(options: ListOptions<T>): ListData<T> {
     initialSelectedKeys,
     getKey = (item: any) => item.id || item.key,
     filter,
+    filterKey,
     initialFilterText = ''
   } = options;
 
@@ -152,9 +155,28 @@ export function useListData<T>(options: ListOptions<T>): ListData<T> {
     filterText: initialFilterText
   });
 
+  const filterItems = (items: T[], filterText: string, key: string): T[] => {
+    return items.reduce((acc: T[], item: any) => {
+      if (item[key]) {
+        if (filter(item, filterText)) {
+          acc.push(item);
+        } else {
+          const children = filterItems(item[key], filterText, key);
+          if (children.length > 0) {
+            acc.push({...item, children});
+          }
+        }
+      } else if (filter(item, filterText)) {
+        acc.push(item);
+      }
+      return acc;
+    }, []);
+  };
+
   let filteredItems = useMemo(
-    () => filter ? state.items.filter(item => filter(item, state.filterText)) : state.items,
-    [state.items, state.filterText, filter]);
+    () => (filter ? filterItems(state.items, state.filterText, filterKey) : state.items),
+    [state.items, state.filterText, filter]
+  );
 
   return {
     ...state,

packages/@react-stately/data/test/useListData.test.js

@@ -34,6 +34,24 @@ const many = [
   {name: 'Eleven'}
 ];
 
+const grouped = [
+  {
+    name: 'One',
+    children: [
+      {name: 'Child 1'},
+      {name: 'Child 2'}
+    ]
+  },
+  {name: 'Two', children: [{name: 'Child 0'}]},
+  {
+    name: 'Three',
+    children: [
+      {name: 'Child 1'}
+    ]
+  }
+];
+
+
 let getKey = (item) => item.name;
 let filter = (item, text) => item.name.includes(text);
 
@@ -801,4 +819,13 @@ describe('useListData', function () {
     expect(result.current.items).toHaveLength(1);
     expect(result.current.items[0]).toEqual({name: 'David'});
   });
+
+  it('should support filtering items across sections', function () {
+    let {result} = renderHook(() => useListData({initialItems: grouped, getKey, filter, initialFilterText: 'Child 1', filterKey: 'children'}));
+
+    expect(result.current.items).toEqual([
+      {name: 'One', children: [{name: 'Child 1'}]},
+      {name: 'Three', children: [{name: 'Child 1'}]}
+    ]);
+  });
 });