SearchAutocomplete

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

@@ -18,10 +18,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/combobox": "^3.0.1",
     "@react-aria/i18n": "^3.3.2",
     "@react-aria/interactions": "^3.6.0",
+    "@react-aria/listbox": "^3.3.1",
     "@react-aria/textfield": "^3.4.0",
     "@react-aria/utils": "^3.9.0",
+    "@react-stately/combobox": "^3.0.1",
     "@react-stately/searchfield": "^3.1.3",
     "@react-types/button": "^3.4.1",
     "@react-types/searchfield": "^3.1.2",

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

@@ -11,3 +11,4 @@
  */
 
 export * from './useSearchField';
+export * from './useSearchAutocomplete';

packages/@react-aria/searchfield/src/useSearchAutocomplete.ts

@@ -0,0 +1,97 @@
+/*
+ * 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 {AriaButtonProps} from '@react-types/button';
+import {AriaListBoxOptions} from '@react-aria/listbox';
+import {ComboBoxState} from '@react-stately/combobox';
+import {HTMLAttributes, InputHTMLAttributes, RefObject} from 'react';
+import {KeyboardDelegate} from '@react-types/shared';
+import {mergeProps} from '@react-aria/utils';
+import {SearchAutocompleteProps} from '@react-types/searchfield';
+import {useComboBox} from '@react-aria/combobox';
+import {useSearchField} from './useSearchField';
+
+interface AriaSearchAutocompleteProps<T> extends SearchAutocompleteProps<T> {
+  /** The ref for the input element. */
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
+  /** The ref for the list box popover. */
+  popoverRef: RefObject<HTMLDivElement>,
+  /** The ref for the list box. */
+  listBoxRef: RefObject<HTMLElement>,
+  /** An optional keyboard delegate implementation, to override the default. */
+  keyboardDelegate?: KeyboardDelegate
+}
+
+interface SearchAutocompleteAria<T> {
+  /** Props for the label element. */
+  labelProps: HTMLAttributes<HTMLElement>,
+  /** Props for the search input element. */
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the list box, to be passed to [useListBox](useListBox.html). */
+  listBoxProps: AriaListBoxOptions<T>,
+  /** Props for the search input's clear button. */
+  clearButtonProps: AriaButtonProps
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a search autocomplete component.
+ * A search autocomplete combines a combobox with a searchfield, allowing users to filter a list of options to items matching a query.
+ * @param props - Props for the search autocomplete.
+ * @param state - State for the search autocomplete, as returned by `useSearchAutocomplete`.
+ */
+export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteProps<T>, state: ComboBoxState<T>): SearchAutocompleteAria<T> {
+  let {
+    popoverRef,
+    inputRef,
+    listBoxRef,
+    keyboardDelegate,
+    onSubmit = () => {}
+  } = props;
+
+  let {inputProps, clearButtonProps} = useSearchField({
+    ...props,
+    value: state.inputValue,
+    onChange: state.setInputValue,
+    autoComplete: 'off',
+    onClear: () => state.setInputValue(''),
+    onSubmit: (value) => {
+      // Prevent submission from search field if menu item was selected
+      if (state.selectionManager.focusedKey === null) {
+        onSubmit(value, null);
+      }
+    } 
+  }, {
+    value: state.inputValue,
+    setValue: state.setInputValue
+  }, inputRef);
+
+
+  let {listBoxProps, labelProps, inputProps: comboBoxInputProps} = useComboBox(
+    {
+      ...props,
+      keyboardDelegate,
+      popoverRef,
+      listBoxRef,
+      inputRef,
+      onFocus: undefined,
+      onBlur: undefined
+    },
+    state
+  );
+
+  return {
+    labelProps,
+    inputProps: mergeProps(inputProps, comboBoxInputProps),
+    listBoxProps,
+    clearButtonProps
+  };
+}

packages/@react-spectrum/searchfield/chromatic/SearchAutocomplete.chromatic.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 {generatePowerset} from '@react-spectrum/story-utils';
+import {Grid, repeat} from '@react-spectrum/layout';
+import {Item, SearchAutocomplete} from '../';
+import {Meta, Story} from '@storybook/react';
+import React from 'react';
+import {SpectrumSearchAutocompleteProps} from '@react-types/searchfield';
+
+// Skipping focus styles because don't have a way of applying it via classnames
+// No controlled open state also means no menu
+let states = [
+  {isQuiet: true},
+  {isReadOnly: true},
+  {isDisabled: true},
+  {validationState: ['valid', 'invalid']},
+  {isRequired: true},
+  {necessityIndicator: 'label'}
+];
+
+let combinations = generatePowerset(states);
+
+function shortName(key, value) {
+  let returnVal = '';
+  switch (key) {
+    case 'isQuiet':
+      returnVal = 'quiet';
+      break;
+    case 'isReadOnly':
+      returnVal = 'ro';
+      break;
+    case 'isDisabled':
+      returnVal = 'disable';
+      break;
+    case 'validationState':
+      returnVal = `vs ${value}`;
+      break;
+    case 'isRequired':
+      returnVal = 'req';
+      break;
+    case 'necessityIndicator':
+      returnVal = 'necInd=label';
+      break;
+  }
+  return returnVal;
+}
+
+const meta: Meta<SpectrumSearchAutocompleteProps<object>> = {
+  title: 'SearchAutocomplete',
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light', 'dark', 'lightest', 'darkest'], locales: ['en-US'], scales: ['medium', 'large']}
+  }
+};
+
+export default meta;
+
+let items = [
+  {name: 'Aardvark', id: '1'},
+  {name: 'Kangaroo', id: '2'},
+  {name: 'Snake', id: '3'}
+];
+
+const Template: Story<SpectrumSearchAutocompleteProps<object>> = (args) => (
+  <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
+    {combinations.map(c => {
+      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+
+      return (
+        <SearchAutocomplete key={key} {...args} {...c} label={args['aria-label'] ? undefined : key} defaultItems={items}>
+          {(item: any) => <Item>{item.name}</Item>}
+        </SearchAutocomplete>
+      );
+    })}
+  </Grid>
+);
+
+// Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
+const TemplateSideLabel: Story<SpectrumSearchAutocompleteProps<object>> = (args) => (
+  <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={800}>
+    {combinations.filter(combo => !(combo.isReadOnly || combo.isDisabled)).map(c => {
+      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+
+      return (
+        <SearchAutocomplete key={key} {...args} {...c} label={key} defaultItems={items}>
+          {(item: any) => <Item>{item.name}</Item>}
+        </SearchAutocomplete>
+      );
+    })}
+  </Grid>
+);
+
+export const PropDefaults = Template.bind({});
+PropDefaults.storyName = 'default';
+PropDefaults.args = {};
+
+export const PropInputValue = Template.bind({});
+PropInputValue.storyName = 'inputValue: Blah';
+PropInputValue.args = {inputValue: 'Blah'};
+
+export const PropAriaLabelled = Template.bind({});
+PropAriaLabelled.storyName = 'aria-label';
+PropAriaLabelled.args = {'aria-label': 'Label'};
+
+export const PropLabelEnd = Template.bind({});
+PropLabelEnd.storyName = 'label end';
+PropLabelEnd.args = {...PropDefaults.args, labelAlign: 'end'};
+
+export const PropLabelSide = TemplateSideLabel.bind({});
+PropLabelSide.storyName = 'label side';
+PropLabelSide.args = {...PropDefaults.args, labelPosition: 'side'};
+
+export const PropCustomWidth = Template.bind({});
+PropCustomWidth.storyName = 'custom width';
+PropCustomWidth.args = {...PropDefaults.args, width: 'size-1600'};

packages/@react-spectrum/searchfield/chromatic/SearchAutocompleteRTL.chromatic.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 {Meta} from '@storybook/react';
+
+// Original SearchAutocomplete chromatic story was too large to be processed
+const meta: Meta = {
+  title: 'SearchAutocompleteRTL',
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light', 'dark', 'lightest', 'darkest'], locales: ['ar-AE'], scales: ['medium', 'large']}
+  }
+};
+
+export default meta;
+
+export {PropDefaults, PropInputValue, PropAriaLabelled, PropLabelEnd, PropLabelSide, PropCustomWidth} from './SearchAutocomplete.chromatic';