feat: introduce new Autocomplete component

packages/autocomplete/package.json

@@ -19,7 +19,9 @@
     "start": "../../utils/scripts/start.sh"
   },
   "dependencies": {
+    "@zendeskgarden/react-menus": "^4.3.1",
     "@zendeskgarden/react-selection": "^4.6.2",
+    "@zendeskgarden/react-textfields": "^3.7.0",
     "@zendeskgarden/react-tooltips": "^5.0.2",
     "@zendeskgarden/react-utilities": "^0.2.5",
     "classnames": "^2.2.5",

packages/autocomplete/src/containers/AutocompleteContainer.example.md

@@ -9,12 +9,3 @@ The examples below show two common layouts using assorted Garden packages:
 - [@zendeskgarden/react-textfields](/react-components/textfields/)
 - [@zendeskgarden/react-menus](/react-components/menus/)
 - [@zendeskgarden/react-tags](/react-components/tags/)
-
-### WARNING
-
-This package comes _"with some assembly required"_.
-
-Due to the wide variety of customizations and the assumed complexity of creating an autocomplete,
-this package contains **no visual elements**.
-
-See the examples below for suggested layouts and interactions:

packages/autocomplete/src/containers/AutocompleteContainer.js

@@ -404,6 +404,7 @@ class AutocompleteContainer extends ControlledComponent {
     id = this.getItemId(key),
     role = 'option',
     onClick,
+    onMouseMove,
     index,
     ...other
   } = {}) => {
@@ -426,6 +427,16 @@ class AutocompleteContainer extends ControlledComponent {
       onClick: composeEventHandlers(onClick, () => {
         this.selectItem(key);
       }),
+      /**
+       * onMouseMove is used as it is only triggered by actual mouse movement
+       */
+      onMouseMove: composeEventHandlers(onMouseMove, () => {
+        if (key !== focusedKey) {
+          this.setControlledState({
+            focusedKey: key
+          });
+        }
+      }),
       ...other
     };
   };

packages/autocomplete/src/elements/Autocomplete.example.md

@@ -0,0 +1,80 @@
+### Basic Example
+
+```jsx
+initialState = {
+  selectedValue: 'option-1'
+};
+
+<Autocomplete
+  label="Basic Autocomplete"
+  selectedValue={state.selectedValue}
+  onChange={selectedValue => setState({ selectedValue })}
+  options={[
+    {
+      value: 'option-1',
+      label: 'Option 1'
+    },
+    {
+      value: 'option-2',
+      label: 'Option 2'
+    },
+    {
+      value: 'option-3',
+      label: 'Option 3'
+    }
+  ]}
+/>;
+```
+
+### Advanced Example
+
+```jsx
+const phonetics = [
+  'Alfa',
+  'Bravo',
+  'Charlie',
+  'Delta',
+  'Echo',
+  'Foxtrot',
+  'Golf',
+  'Hotel',
+  'India',
+  'Juliett',
+  'Kilo',
+  'Lima',
+  'Mike',
+  'November',
+  'Oscar',
+  'Papa',
+  'Quebec',
+  'Romeo',
+  'Sierra',
+  'Tango',
+  'Uniform',
+  'Victor',
+  'Whiskey',
+  'X-ray',
+  'Yankee',
+  'Zulu'
+];
+const options = [];
+
+for (let x = 0; x < phonetics.length; x++) {
+  options.push({
+    value: `value-${phonetics[x]}`,
+    label: phonetics[x]
+  });
+}
+
+initialState = {
+  selectedValue: options[0].value
+};
+
+<Autocomplete
+  label="Example Autocomplete"
+  maxHeight="300px"
+  selectedValue={state.selectedValue}
+  onChange={selectedValue => setState({ selectedValue })}
+  options={options}
+/>;
+```