Support type to select in ListBox, Menu, and SideNav

.storybook-v3/config.js

@@ -16,7 +16,8 @@ configureActions({
 
 addParameters({
   options: {
-    storySort: (a, b) => a[1].kind.localeCompare(b[1].kind)
+    storySort: (a, b) => a[1].kind.localeCompare(b[1].kind),
+    enableShortcuts: false
   }
 });
 

packages/@react-aria/i18n/src/index.ts

@@ -14,3 +14,4 @@ export * from './context';
 export * from './useMessageFormatter';
 export * from './useDateFormatter';
 export * from './useNumberFormatter';
+export * from './useCollator';

packages/@react-aria/i18n/src/useCollator.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useLocale} from './context';
+
+let cache = new Map<string, Intl.Collator>();
+export function useCollator(options?: Intl.CollatorOptions) {
+  let {locale} = useLocale();
+
+  let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  let formatter = new Intl.Collator(locale, options);
+  cache.set(cacheKey, formatter);
+  return formatter;
+}

packages/@react-aria/i18n/src/useNumberFormatter.ts

@@ -11,13 +11,16 @@
  */
 
 import {useLocale} from './context';
-import {useMemo} from 'react';
 
+let formatterCache = new Map<string, Intl.NumberFormat>();
 export function useNumberFormatter(options?: Intl.NumberFormatOptions) {
   let {locale} = useLocale();
-  let numberFormatter = useMemo(
-    () => new Intl.NumberFormat(locale, options),
-    [locale, options]
-  );
+  let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
+  if (formatterCache.has(cacheKey)) {
+    return formatterCache.get(cacheKey);
+  }
+
+  let numberFormatter = new Intl.NumberFormat(locale, options);
+  formatterCache.set(cacheKey, numberFormatter);
   return numberFormatter;
 }

packages/@react-aria/selection/package.json

@@ -18,7 +18,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/i18n": "3.0.0-rc.1",
     "@react-aria/interactions": "^3.0.0-alpha.2",
+    "@react-aria/utils": "3.0.0-rc.1",
     "@react-stately/collections": "^3.0.0-alpha.2",
     "@react-stately/selection": "^3.0.0-alpha.2",
     "@react-types/shared": "^3.0.0-rc.1"

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -17,10 +17,12 @@ import {KeyboardDelegate} from '@react-types/shared';
 export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: Collection<Node<T>>;
   private ref: RefObject<HTMLElement>;
+  private collator: Intl.Collator;
 
-  constructor(collection: Collection<Node<T>>, ref: RefObject<HTMLElement>) {
+  constructor(collection: Collection<Node<T>>, ref: RefObject<HTMLElement>, collator?: Intl.Collator) {
     this.collection = collection;
     this.ref = ref;
+    this.collator = collator;
   }
 
   getKeyBelow(key: Key) {
@@ -108,4 +110,24 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
     return key;
   }
+
+  getKeyForSearch(search: string, fromKey?: Key) {
+    if (!this.collator) {
+      return null;
+    }
+
+    let collection = this.collection;
+    let key = fromKey ? this.getKeyBelow(fromKey) : this.getFirstKey();
+    while (key) {
+      let item = collection.getItem(key);
+      let substring = item.textValue.slice(0, search.length);
+      if (item.textValue && this.collator.compare(substring, search) === 0) {
+        return key;
+      }
+
+      key = this.getKeyBelow(key);
+    }
+
+    return null;
+  }
 }

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -12,7 +12,9 @@
 
 import {FocusEvent, HTMLAttributes, KeyboardEvent, useEffect} from 'react';
 import {KeyboardDelegate} from '@react-types/shared';
+import {mergeProps} from '@react-aria/utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
+import {useTypeSelect} from './useTypeSelect';
 
 type FocusStrategy = 'first' | 'last';
 
@@ -208,11 +210,16 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  let {typeSelectProps} = useTypeSelect({
+    keyboardDelegate: delegate,
+    selectionManager: manager
+  });
+
   return {
-    collectionProps: {
+    collectionProps: mergeProps(typeSelectProps, {
       onKeyDown,
       onFocus,
       onBlur
-    }
+    })
   };
 }

packages/@react-aria/selection/src/useSelectableList.ts

@@ -16,6 +16,7 @@ import {HTMLAttributes, RefObject, useEffect, useMemo} from 'react';
 import {KeyboardDelegate} from '@react-types/shared';
 import {ListKeyboardDelegate} from './ListKeyboardDelegate';
 import {MultipleSelectionManager} from '@react-stately/selection';
+import {useCollator} from '@react-aria/i18n';
 import {useSelectableCollection} from './useSelectableCollection';
 
 interface SelectableListOptions {
@@ -47,7 +48,8 @@ export function useSelectableList(props: SelectableListOptions): SelectableListA
 
   // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
   // When virtualized, the layout object will be passed in as a prop and override this.
-  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(collection, ref), [keyboardDelegate, collection, ref]);
+  let collator = useCollator({usage: 'search', sensitivity: 'base'});
+  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(collection, ref, collator), [keyboardDelegate, collection, ref, collator]);
 
   // If not virtualized, scroll the focused element into view when the focusedKey changes.
   // When virtualized, CollectionView handles this internally.

packages/@react-aria/selection/src/useTypeSelect.ts

@@ -0,0 +1,47 @@
+import {HTMLAttributes, KeyboardEvent, useRef} from 'react';
+import {KeyboardDelegate} from '@react-types/shared';
+import {MultipleSelectionManager} from '@react-stately/selection';
+
+interface TypeSelectOptions {
+  keyboardDelegate: KeyboardDelegate,
+  selectionManager: MultipleSelectionManager
+}
+
+interface TypeSelectAria {
+  typeSelectProps: HTMLAttributes<HTMLElement>
+}
+
+export function useTypeSelect(options: TypeSelectOptions): TypeSelectAria {
+  let {keyboardDelegate, selectionManager} = options;
+  let state = useRef({
+    search: '',
+    timeout: null
+  }).current;
+
+  let onKeyPress = (e: KeyboardEvent) => {
+    let character = String.fromCharCode(e.charCode);
+    state.search += character;
+
+    // Use the delegate to find a key to focus.
+    // Prioritize items after the currently focused item, falling back to searching the whole list.
+    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+    if (!key) {
+      key = keyboardDelegate.getKeyForSearch(state.search);
+    }
+
+    if (key) {
+      selectionManager.setFocusedKey(key);
+    }
+
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(() => {
+      state.search = '';
+    }, 500);
+  };
+
+  return {
+    typeSelectProps: {
+      onKeyPress: keyboardDelegate.getKeyForSearch ? onKeyPress : null
+    }
+  };
+}

packages/@react-spectrum/listbox/package.json

@@ -26,6 +26,7 @@
     "@babel/runtime": "^7.6.2",
     "@react-aria/collections": "^3.0.0-alpha.1",
     "@react-aria/focus": "^3.0.0-rc.1",
+    "@react-aria/i18n": "3.0.0-rc.1",
     "@react-aria/listbox": "^3.0.0-alpha.1",
     "@react-aria/separator": "^3.0.0-rc.1",
     "@react-aria/utils": "^3.0.0-alpha.1",

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

@@ -19,18 +19,21 @@ import React, {ReactElement, useMemo} from 'react';
 import {ReusableView} from '@react-stately/collections';
 import {SpectrumMenuProps} from '@react-types/menu';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
+import {useCollator} from '@react-aria/i18n';
 import {useListBox} from '@react-aria/listbox';
 import {useListState} from '@react-stately/list';
 import {useProvider} from '@react-spectrum/provider';
 
 export function ListBox<T>(props: SpectrumMenuProps<T>) {
   let {scale} = useProvider();
+  let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let layout = useMemo(() => 
     new ListLayout({
       estimatedRowHeight: scale === 'large' ? 48 : 35,
-      estimatedHeadingHeight: scale === 'large' ? 37 : 30
+      estimatedHeadingHeight: scale === 'large' ? 37 : 30,
+      collator
     })
-  , [scale]);
+  , [collator, scale]);
 
   let completeProps = {
     ...props,

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

@@ -431,30 +431,30 @@ storiesOf('ListBox', module)
       <Popover isOpen hideArrow>
         <ListBox aria-labelledby="label" onSelectionChange={action('onSelectionChange')}>
           <Section title="Section 1">
-            <Item>
+            <Item textValue="Copy">
               <Copy size="S" />
               <Text>Copy</Text>
             </Item>
-            <Item>
+            <Item textValue="Cut">
               <Cut size="S" />
               <Text>Cut</Text>
             </Item>
-            <Item>
+            <Item textValue="Paste">
               <Paste size="S" />
               <Text>Paste</Text>
             </Item>
           </Section>
           <Section title="Section 2">
-            <Item>
+            <Item textValue="Puppy">
               <AlignLeft size="S" />
               <Text>Puppy</Text>
               <Text slot="description">Puppy description super long as well geez</Text>
             </Item>
-            <Item>
+            <Item textValue="Doggo with really really really long long long text">
               <AlignCenter size="S" />
               <Text>Doggo with really really really long long long text</Text>
             </Item>
-            <Item>
+            <Item textValue="Floof">
               <AlignRight size="S" />
               <Text>Floof</Text>
             </Item>
@@ -484,7 +484,7 @@ storiesOf('ListBox', module)
 let customOption = (item) => {
   let Icon = iconMap[item.icon];
   return (
-    <Item>
+    <Item textValue={item.name}>
       {item.icon && <Icon size="S" />}
       <Text>{item.name}</Text>
     </Item>