(WIP) Autocomplete with menu

packages/@react-aria/autocomplete/intl/ar-AE.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "مقترحات"
+}

packages/@react-aria/autocomplete/intl/bg-BG.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Предложения"
+}

packages/@react-aria/autocomplete/intl/cs-CZ.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Návrhy"
+}

packages/@react-aria/autocomplete/intl/da-DK.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Forslag"
+}

packages/@react-aria/autocomplete/intl/de-DE.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Empfehlungen"
+}

packages/@react-aria/autocomplete/intl/el-GR.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Προτάσεις"
+}

packages/@react-aria/autocomplete/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Suggestions"
+}

packages/@react-aria/autocomplete/intl/es-ES.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Sugerencias"
+}

packages/@react-aria/autocomplete/intl/et-EE.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Soovitused"
+}

packages/@react-aria/autocomplete/intl/fi-FI.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Ehdotukset"
+}

packages/@react-aria/autocomplete/intl/fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Suggestions"
+}

packages/@react-aria/autocomplete/intl/he-IL.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "הצעות"
+}

packages/@react-aria/autocomplete/intl/hr-HR.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Prijedlozi"
+}

packages/@react-aria/autocomplete/intl/hu-HU.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Javaslatok"
+}

packages/@react-aria/autocomplete/intl/it-IT.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Suggerimenti"
+}

packages/@react-aria/autocomplete/intl/ja-JP.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "候補"
+}

packages/@react-aria/autocomplete/intl/ko-KR.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "제안"
+}

packages/@react-aria/autocomplete/intl/lt-LT.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Pasiūlymai"
+}

packages/@react-aria/autocomplete/intl/lv-LV.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Ieteikumi"
+}

packages/@react-aria/autocomplete/intl/nb-NO.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Forslag"
+}

packages/@react-aria/autocomplete/intl/nl-NL.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Suggesties"
+}

packages/@react-aria/autocomplete/intl/pl-PL.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Sugestie"
+}

packages/@react-aria/autocomplete/intl/pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Sugestões"
+}

packages/@react-aria/autocomplete/intl/pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Sugestões"
+}

packages/@react-aria/autocomplete/intl/ro-RO.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Sugestii"
+}

packages/@react-aria/autocomplete/intl/ru-RU.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Предложения"
+}

packages/@react-aria/autocomplete/intl/sk-SK.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Návrhy"
+}

packages/@react-aria/autocomplete/intl/sl-SI.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Predlogi"
+}

packages/@react-aria/autocomplete/intl/sr-SP.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Predlozi"
+}

packages/@react-aria/autocomplete/intl/sv-SE.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Förslag"
+}

packages/@react-aria/autocomplete/intl/tr-TR.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Öneriler"
+}

packages/@react-aria/autocomplete/intl/uk-UA.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "Пропозиції"
+}

packages/@react-aria/autocomplete/intl/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "建议"
+}

packages/@react-aria/autocomplete/intl/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "menuLabel": "建議"
+}

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

@@ -23,9 +23,13 @@
   },
   "dependencies": {
     "@react-aria/combobox": "^3.10.5",
+    "@react-aria/focus": "^3.18.3",
+    "@react-aria/i18n": "^3.12.3",
     "@react-aria/listbox": "^3.13.5",
     "@react-aria/searchfield": "^3.7.10",
+    "@react-aria/textfield": "^3.14.9",
     "@react-aria/utils": "^3.25.3",
+    "@react-stately/autocomplete": "3.0.0-alpha.1",
     "@react-stately/combobox": "^3.10.0",
     "@react-types/autocomplete": "3.0.0-alpha.26",
     "@react-types/button": "^3.10.0",

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

@@ -10,5 +10,8 @@
  * governing permissions and limitations under the License.
  */
 export {useSearchAutocomplete} from './useSearchAutocomplete';
+export {useAutocomplete} from './useAutocomplete';
+
 export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete';
 export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
+export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria} from './useAutocomplete';

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

@@ -0,0 +1,146 @@
+/*
+ * Copyright 2024 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 {AriaLabelingProps, BaseEvent, DOMAttributes, DOMProps, InputDOMProps, RefObject} from '@react-types/shared';
+import type {AriaMenuOptions} from '@react-aria/menu';
+import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
+import {chain, mergeProps, useId, useLabels} from '@react-aria/utils';
+import {InputHTMLAttributes, KeyboardEvent, ReactNode, useRef} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useTextField} from '@react-aria/textfield';
+
+export interface AriaAutocompleteProps extends AutocompleteProps, DOMProps, InputDOMProps, AriaLabelingProps {
+  children: ReactNode
+}
+
+// TODO: all of this is menu specific but will need to eventually be agnostic to what collection element is inside
+// Update all instances of "menu" then
+export interface AriaAutocompleteOptions extends Omit<AriaAutocompleteProps, 'children'> {
+  /** The ref for the input element. */
+  inputRef: RefObject<HTMLInputElement | null>
+}
+export interface AutocompleteAria<T> {
+  /** Props for the label element. */
+  labelProps: DOMAttributes,
+  /** Props for the autocomplete input element. */
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the menu, to be passed to [useMenu](useMenu.html). */
+  menuProps: AriaMenuOptions<T>,
+  /** Props for the autocomplete description element, if any. */
+  descriptionProps: DOMAttributes,
+  // TODO: fairly non-standard thing to return from a hook, discuss how best to share this with hook only users
+  // This is for the user to register a callback that upon recieving a keyboard event key returns the expected virtually focused node id
+  /** Register function that expects a callback function that returns the newlly virtually focused menu option when provided with the keyboard action that occurs in the input field. */
+  register: (callback: (e: KeyboardEvent) => string | null) => void
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a autocomplete component.
+ * A autocomplete combines a text input with a menu, allowing users to filter a list of options to items matching a query.
+ * @param props - Props for the autocomplete.
+ * @param state - State for the autocomplete, as returned by `useAutocompleteState`.
+ */
+export function useAutocomplete<T>(props: AriaAutocompleteOptions, state: AutocompleteState): AutocompleteAria<T> {
+  let {
+    inputRef,
+    isReadOnly
+  } = props;
+
+  let menuId = useId();
+
+  // TODO: may need to move this into Autocomplete? Kinda odd to return this from the hook? Maybe the callback should be considered
+  // external to the hook, and the onus is on the user to pass in a onKeydown to this hook that updates state.focusedNodeId in response to a key
+  // stroke
+  let callbackRef = useRef<(e: KeyboardEvent) => string>(null);
+  let register = (callback) => {
+    callbackRef.current = callback;
+  };
+
+  // For textfield specific keydown operations
+  let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
+
+    // TODO: how best to trigger the focused element's action? Currently having the registered callback handle dispatching a
+    // keyboard event
+    switch (e.key) {
+      case 'Escape':
+        if (state.inputValue !== '' && !isReadOnly) {
+          state.setInputValue('');
+        } else {
+          e.continuePropagation();
+        }
+
+        break;
+      case 'Home':
+      case 'End':
+      case 'ArrowUp':
+      case 'ArrowDown':
+        // Prevent these keys from moving the text cursor in the input
+        e.preventDefault();
+        break;
+    }
+
+    if (callbackRef.current) {
+      let focusedNodeId = callbackRef.current(e);
+      state.setFocusedNodeId(focusedNodeId);
+    }
+  };
+
+  let {labelProps, inputProps, descriptionProps} = useTextField({
+    ...props as any,
+    onChange: state.setInputValue,
+    onKeyDown: chain(onKeyDown, props.onKeyDown),
+    value: state.inputValue,
+    autoComplete: 'off'
+  }, inputRef);
+
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/autocomplete');
+  let menuProps = useLabels({
+    id: menuId,
+    'aria-label': stringFormatter.format('menuLabel'),
+    'aria-labelledby': props['aria-labelledby'] || labelProps.id
+  });
+
+  return {
+    labelProps,
+    inputProps: mergeProps(inputProps, {
+      'aria-haspopup': 'listbox',
+      'aria-controls': menuId,
+      // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
+      'aria-autocomplete': 'list',
+      'aria-activedescendant': state.focusedNodeId ?? undefined,
+      // TODO: note that the searchbox role causes newly typed letters to interrupt the announcement of the number of available options in Safari.
+      // I tested on iPad/Android/etc and the combobox role doesn't seem to do that but it will announce that there is a listbox which isn't true
+      // and it will say press Control Option Space to display a list of options which is also incorrect. To be fair though, our combobox doesn't open with
+      // that combination of buttons
+      role: 'searchbox',
+      // This disable's iOS's autocorrect suggestions, since the autocomplete provides its own suggestions.
+      autoCorrect: 'off',
+      // This disable's the macOS Safari spell check auto corrections.
+      spellCheck: 'false'
+    }),
+    menuProps: mergeProps(menuProps, {
+      shouldUseVirtualFocus: true,
+      onHoverStart: (e) => {
+        // TODO: another thing to think about, what is the best way to past this to menu/wrapped collection component so that hovering on
+        // a item also updates the focusedNode. Perhaps we should just pass down setFocusedNodeId instead
+        state.setFocusedNodeId(e.target.id);
+      }
+    }),
+    descriptionProps,
+    register
+  };
+}