Add support for nested filtering in useListData

[gijsroge]

Closes 4930

✅ Pull Request Checklist:

• [x] Included link to corresponding React Spectrum GitHub Issue.
• [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• [ ] Filled out test instructions.
• [ ] Updated documentation (if it already exists for this component).
• [ ] Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

There is no example of the normal filter feature for useListData, if you want I can add a ListBox example in Spectrum's Storybook.

Alternatively you can test it using jest: yarn jest -t "useListData should support filtering nested items"

🧢 Your Project:

[snowystinger]

GET_BUILD

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[gijsroge]

@devongovett to address your valid concerns about having assumptions about the users data structure, i've added a filterKey option instead.

Example in storybook https://github.com/adobe/react-spectrum/blob/5ffd5e1dc3e45bf8137adc89dc4fac3640056367/packages/%40react-spectrum/listbox/stories/ListBox.stories.tsx#L1054-L1078

cc @snowystinger @reidbarber

[snowystinger]

GET_BUILD

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }

@react-stately/data

ListOptions

 ListOptions<T> {
   filter?: (T, string) => boolean
+  filterKey?: string
   getKey?: (T) => Key
   initialFilterText?: string
   initialItems?: Array<T>
   initialSelectedKeys?: 'all' | Iterable<Key>
 

it changed:

• useListData

---