TreeView: Implement typeahead

[colebemis]

Summary

Implements typeahead search of items in a TreeView:

👉 Try it out

https://user-images.githubusercontent.com/4608155/191384491-744194d8-423c-4767-95cf-2a6a6f6c4abd.mp4

Per @jsholes's suggestion, users can type multiple typeahead characters within a given timeout (300ms).

Test cases

Typeahead
    ✓ moves aria-activedescendant to the next item that matches the typed character (288 ms)
    ✓ does nothing if no items match the typed character (198 ms)
    ✓ supports multiple typed characters (268 ms)
    ✓ prioritizes items following the current aria-activedescendant (188 ms)
    ✓ wraps around to the beginning if no items match after the current aria-activedescendant (236 ms)

What should reviewers focus on?

• Check that the typeahead behavior in the storybook stories works as expected
• Check that the typeahead behaviors works well with screen readers
• Review the typeahead implementation
• Provide any feedback or missing functionality that you've noticed

Merge checklist

• [x] Added/updated tests
• [ ] ~~Added/updated documentation~~
• [x] Tested in Chrome
• [ ] Tested in Firefox
• [ ] Tested in Safari
• [ ] Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: a0b090cc7503cddb9beb653de9c98ee6ba0ef84a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

size-limit report 📦

Path	Size
dist/browser.esm.js	77.1 KB (0%)
dist/browser.umd.js	77.71 KB (0%)

[colebemis]

Will useTypeahead still work if child nodes are loaded asynchronously when their parent directory is opened?

Yeah, this implementation should work correctly with asynchronously loaded items. I will verify when I implement the async functionality 👍

Any idea how we could handle typeahead functionality if tree nodes are virtualized? It would be nice if I could still jump to a matching node even if it hasn't been loaded into the DOM yet.

Hmm. I haven't considered virtualization yet, but I imagine it will add a fair amount of complexity to the overall implementation. Is virtualization support in-scope for TreeView v1?

[mperrotti]

@colebemis - we haven't discussed whether virtualization is in scope for v1.

I think we can move forward without virtualization support for v1. When/if it comes up we'll collaborate with product engineers to support virtualization.

Sound good?