@automattic/vip-design-system 0.24.0 → 0.25.0

package/build/system/NewForm/FormAutocomplete.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormAutocomplete = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Label = require("../Form/Label");
+
+var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
+
+var _FormAutocomplete = _interopRequireDefault(require("./FormAutocomplete.css"));
+
+exports.css = _FormAutocomplete["default"];
+
+var _FormSelectContent = require("./FormSelectContent");
+
+var _FormSelectArrow = require("./FormSelectArrow");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultStyles = {
+  width: '100%',
+  py: 0,
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'border',
+  borderRadius: 1,
+  backgroundColor: 'background',
+  color: 'text',
+  minHeight: '36px',
+  lineHeight: '36px',
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:focus-within': function focusWithin(theme) {
+    return theme.outline;
+  },
+  '&.autocomplete__input--focused': function autocomplete__inputFocused(theme) {
+    return theme.outline;
+  },
+  '& .autocomplete__input': {
+    width: '100%',
+    paddingLeft: 3,
+    py: 0,
+    borderWidth: 0,
+    color: 'text',
+    minHeight: '36px',
+    lineHeight: '36px',
+    '&:focus': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&:focus-visible': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&:focus-within': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&.autocomplete__input--focused': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    }
+  },
+  '& .autocomplete__menu': {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'border',
+    borderRadius: 1,
+    backgroundColor: 'background',
+    color: 'text'
+  },
+  '& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
+    fontSize: 'inherit'
+  },
+  '& .autocomplete__wrapper': {
+    width: '100%',
+    paddingRight: '40px'
+  },
+  '& .autocomplete__input--show-all-values': {
+    paddingRight: 0
+  }
+};
+var inlineStyles = {
+  borderWidth: 0
+};
+
+var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var isInline = _ref.isInline,
+      forLabel = _ref.forLabel,
+      options = _ref.options,
+      label = _ref.label,
+      getOptionValue = _ref.getOptionValue,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      _ref$showAllValues = _ref.showAllValues,
+      showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
+      _ref$displayMenu = _ref.displayMenu,
+      displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id;
+
+  var SelectLabel = function SelectLabel() {
+    return (0, _jsxRuntime.jsx)(_Label.Label, {
+      htmlFor: forLabel || id,
+      children: label
+    });
+  };
+
+  var inlineLabel = !!(isInline && label);
+  var optionValue = (0, _react.useCallback)(function (option) {
+    return getOptionValue ? getOptionValue(option) : option.value;
+  }, [getOptionValue]);
+  var getAllOptions = (0, _react.useMemo)(function () {
+    return [].concat(options.filter(function (option) {
+      return !option.options;
+    }), options.filter(function (option) {
+      return option.options;
+    }).map(function (option) {
+      return option.options;
+    })).reduce(function (a, b) {
+      return a.concat(b);
+    }, []);
+  }, [options]);
+  var getOptionByValue = (0, _react.useCallback)(function (inputValue) {
+    return getAllOptions.find(function (option) {
+      return "" + optionValue(option) === "" + inputValue;
+    });
+  }, [getAllOptions, optionValue]);
+  var onValueChange = (0, _react.useCallback)(function (inputValue) {
+    if (onChange) {
+      onChange(getOptionByValue(inputValue));
+    }
+  }, [onChange, getOptionByValue]);
+  var suggest = (0, _react.useCallback)(function (query, populateResults) {
+    var data = options.filter(function (option) {
+      return option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0;
+    });
+    populateResults(data.map(function (option) {
+      return option.label;
+    }));
+  }, [options]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
+  }, []);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
+  }, [label]);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles),
+      children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
+        isInline: inlineLabel,
+        label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
+        children: [(0, _jsxRuntime.jsx)(_react2["default"], {
+          id: id,
+          showAllValues: showAllValues,
+          ref: forwardRef,
+          source: suggest,
+          defaultValue: value,
+          displayMenu: displayMenu,
+          onConfirm: onValueChange
+        }), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+      })
+    })]
+  });
+});
+
+exports.FormAutocomplete = FormAutocomplete;
+FormAutocomplete.propTypes = {
+  id: _propTypes["default"].string,
+  showAllValues: _propTypes["default"].bool,
+  isInline: _propTypes["default"].bool,
+  forLabel: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  displayMenu: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  options: _propTypes["default"].array,
+  getOptionValue: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
+};
+FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Inline = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("react");
+
+var Form = _interopRequireWildcard(require("."));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["label", "width", "onChange"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Form/Autocomplete',
+  argTypes: {
+    placeholder: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var defaultOptions = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}]; // eslint-disable-next-line react/prop-types
+
+var DefaultComponent = function DefaultComponent(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Label' : _ref$label,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 250 : _ref$width,
+      onChange = _ref.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(Form.Root, {
+      children: (0, _jsxRuntime.jsx)("div", {
+        sx: {
+          width: width
+        },
+        children: (0, _jsxRuntime.jsx)(Form.Autocomplete, (0, _extends2["default"])({
+          id: "form-autocomplete",
+          label: label,
+          onChange: onChange
+        }, rest))
+      })
+    })
+  });
+};
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(defaultOptions),
+      options = _useState[0],
+      setOptions = _useState[1];
+
+  var onChange = (0, _react.useCallback)(function (value) {
+    setOptions(defaultOptions.filter(function (option) {
+      return !value || option.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+    }));
+  });
+  var args = {
+    label: 'Label',
+    options: options
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      onChange: onChange
+    }, args))
+  });
+};
+
+exports.Default = Default;
+
+var Inline = function Inline() {
+  var _useState2 = (0, _react.useState)(defaultOptions),
+      options = _useState2[0],
+      setOptions = _useState2[1];
+
+  var onChange = (0, _react.useCallback)(function (value) {
+    setOptions(defaultOptions.filter(function (option) {
+      return !value || option.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+    }));
+  });
+  var args = {
+    label: 'Label',
+    options: options
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      isInline: true,
+      onChange: onChange
+    }, args))
+  });
+};
+
+exports.Inline = Inline;

package/build/system/NewForm/FormAutocomplete.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _FormAutocomplete = require("./FormAutocomplete");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var options = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}];
+var defaultProps = {
+  label: 'This is a label',
+  options: options
+};
+describe('<FormAutocomplete />', function () {
+  it('renders the FormAutocomplete component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, defaultProps))), container = _render.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewForm/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Select = exports.Root = void 0;
+exports["default"] = exports.Select = exports.Root = exports.Autocomplete = void 0;
 
 var _FormSelect = require("./FormSelect");
 
+var _FormAutocomplete = require("./FormAutocomplete");
+
 var _Form = require("./Form");
 
 /**
@@ -12,6 +14,8 @@ var _Form = require("./Form");
  */
 var Select = _FormSelect.FormSelect;
 exports.Select = Select;
+var Autocomplete = _FormAutocomplete.FormAutocomplete;
+exports.Autocomplete = Autocomplete;
 var Root = _Form.Form;
 exports.Root = Root;
 var _default = Root;

package/build/system/ResourceList/ResourceList.js

@@ -53,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       listStyleType: 'none',
       margin: 0,
       px: 0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.24.0",
+	"version": "0.25.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -29,6 +29,7 @@
 		"@radix-ui/react-tooltip": "^1.0.0",
 		"@radix-ui/react-visually-hidden": "^1.0.0",
 		"@storybook/addon-storysource": "^6.5.10",
+		"accessible-autocomplete": "^2.0.4",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",
@@ -71,6 +72,9 @@
 		],
 		"transform": {
 			"\\.[jt]sx?$": "babel-jest"
+		},
+		"moduleNameMapper": {
+			"\\.(css|less)$": "<rootDir>/test/fileMock.js"
 		}
 	},
 	"devDependencies": {

package/src/system/NewForm/FormAutocomplete.css

@@ -0,0 +1,166 @@
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid #0b0c0c;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #b1b4b6;
+  position: absolute;
+}
+
+.autocomplete__input--default {
+  padding: 5px;
+}
+.autocomplete__input--focused {
+  outline: 3px solid #fd0;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #0B0C0C;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #b1b4b6;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #1d70b8;
+  border-color: #1d70b8;
+  color: white;
+  outline: none;
+}
+
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .autocomplete__menu {
+    border-color: FieldText;
+  }
+
+  .autocomplete__option {
+    background-color: Field;
+    color: FieldText;
+  }
+
+  .autocomplete__option--focused,
+  .autocomplete__option:hover {
+    forced-color-adjust: none; /* prevent backplate from obscuring text */
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+
+    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+    color: SelectedItemText;
+    outline-color: SelectedItemText;
+  }
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 5px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}

package/src/system/NewForm/FormAutocomplete.js

@@ -0,0 +1,182 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '../Form/Label';
+import Autocomplete from 'accessible-autocomplete/react';
+
+/**
+ * Internal dependencies
+ */
+import css from './FormAutocomplete.css';
+import { FormSelectContent } from './FormSelectContent';
+import { FormSelectArrow } from './FormSelectArrow';
+
+const defaultStyles = {
+	width: '100%',
+	py: 0,
+	borderWidth: '1px',
+	borderStyle: 'solid',
+	borderColor: 'border',
+	borderRadius: 1,
+	backgroundColor: 'background',
+	color: 'text',
+	minHeight: '36px',
+	lineHeight: '36px',
+	'&:focus': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
+	'&:focus-within': theme => theme.outline,
+	'&.autocomplete__input--focused': theme => theme.outline,
+	'& .autocomplete__input': {
+		width: '100%',
+		paddingLeft: 3,
+		py: 0,
+		borderWidth: 0,
+		color: 'text',
+		minHeight: '36px',
+		lineHeight: '36px',
+		'&:focus': { outlineWidth: 0, boxShadow: 'none' },
+		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
+		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
+		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
+	},
+	'& .autocomplete__menu': {
+		borderWidth: '1px',
+		borderStyle: 'solid',
+		borderColor: 'border',
+		borderRadius: 1,
+		backgroundColor: 'background',
+		color: 'text',
+	},
+	'& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
+		fontSize: 'inherit',
+	},
+	'& .autocomplete__wrapper': {
+		width: '100%',
+		paddingRight: '40px',
+	},
+	'& .autocomplete__input--show-all-values': {
+		paddingRight: 0,
+	},
+};
+
+const inlineStyles = {
+	borderWidth: 0,
+};
+
+const FormAutocomplete = React.forwardRef(
+	(
+		{
+			isInline,
+			forLabel,
+			options,
+			label,
+			getOptionValue,
+			onChange,
+			value,
+			showAllValues = true,
+			displayMenu = 'overlay',
+			id = 'vip-autocomplete',
+		},
+		forwardRef
+	) => {
+		const SelectLabel = () => <Label htmlFor={ forLabel || id }>{ label }</Label>;
+
+		const inlineLabel = !! ( isInline && label );
+
+		const optionValue = useCallback(
+			option => ( getOptionValue ? getOptionValue( option ) : option.value ),
+			[ getOptionValue ]
+		);
+
+		const getAllOptions = useMemo(
+			() =>
+				[
+					...options.filter( option => ! option.options ),
+					...options.filter( option => option.options ).map( option => option.options ),
+				].reduce( ( a, b ) => a.concat( b ), [] ),
+			[ options ]
+		);
+
+		const getOptionByValue = useCallback(
+			inputValue =>
+				getAllOptions.find( option => `${ optionValue( option ) }` === `${ inputValue }` ),
+			[ getAllOptions, optionValue ]
+		);
+
+		const onValueChange = useCallback(
+			inputValue => {
+				if ( onChange ) {
+					onChange( getOptionByValue( inputValue ) );
+				}
+			},
+			[ onChange, getOptionByValue ]
+		);
+
+		const suggest = useCallback(
+			( query, populateResults ) => {
+				const data = options.filter(
+					option => option.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0
+				);
+				populateResults( data.map( option => option.label ) );
+			},
+			[ options ]
+		);
+
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__input' )
+				.setAttribute( 'aria-activedescendant', '' );
+		}, [] );
+
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__menu' )
+				.setAttribute( 'aria-label', `${ label } list` );
+		}, [ label ] );
+
+		return (
+			<>
+				{ label && ! isInline && <SelectLabel /> }
+
+				<div sx={ { ...defaultStyles, ...( isInline && inlineStyles ) } }>
+					<FormSelectContent
+						isInline={ inlineLabel }
+						label={ inlineLabel ? <SelectLabel /> : null }
+					>
+						<Autocomplete
+							id={ id }
+							showAllValues={ showAllValues }
+							ref={ forwardRef }
+							source={ suggest }
+							defaultValue={ value }
+							displayMenu={ displayMenu }
+							onConfirm={ onValueChange }
+						/>
+						<FormSelectArrow />
+					</FormSelectContent>
+				</div>
+			</>
+		);
+	}
+);
+
+FormAutocomplete.propTypes = {
+	id: PropTypes.string,
+	showAllValues: PropTypes.bool,
+	isInline: PropTypes.bool,
+	forLabel: PropTypes.string,
+	value: PropTypes.string,
+	displayMenu: PropTypes.string,
+	label: PropTypes.string,
+	options: PropTypes.array,
+	getOptionValue: PropTypes.func,
+	onChange: PropTypes.func,
+};
+
+FormAutocomplete.displayName = 'FormAutocomplete';
+
+export { FormAutocomplete, css };

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -0,0 +1,89 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { useCallback, useState } from 'react';
+import * as Form from '.';
+
+export default {
+	title: 'Form/Autocomplete',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const defaultOptions = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+// eslint-disable-next-line react/prop-types
+const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
+	<>
+		<Form.Root>
+			<div sx={ { width } }>
+				<Form.Autocomplete
+					id="form-autocomplete"
+					label={ label }
+					onChange={ onChange }
+					{ ...rest }
+				/>
+			</div>
+		</Form.Root>
+	</>
+);
+
+export const Default = () => {
+	const [ options, setOptions ] = useState( defaultOptions );
+
+	const onChange = useCallback( value => {
+		setOptions(
+			defaultOptions.filter(
+				option => ! value || option.label.toLowerCase().indexOf( value.toLowerCase() ) >= 0
+			)
+		);
+	} );
+
+	const args = {
+		label: 'Label',
+		options,
+	};
+
+	return (
+		<>
+			<DefaultComponent onChange={ onChange } { ...args } />
+		</>
+	);
+};
+
+export const Inline = () => {
+	const [ options, setOptions ] = useState( defaultOptions );
+
+	const onChange = useCallback( value => {
+		setOptions(
+			defaultOptions.filter(
+				option => ! value || option.label.toLowerCase().indexOf( value.toLowerCase() ) >= 0
+			)
+		);
+	} );
+
+	const args = {
+		label: 'Label',
+		options,
+	};
+
+	return (
+		<>
+			<DefaultComponent isInline={ true } onChange={ onChange } { ...args } />
+		</>
+	);
+};

package/src/system/NewForm/FormAutocomplete.test.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { FormAutocomplete } from './FormAutocomplete';
+
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+const defaultProps = {
+	label: 'This is a label',
+	options,
+};
+
+describe( '<FormAutocomplete />', () => {
+	it( 'renders the FormAutocomplete component', async () => {
+		const { container } = render( <FormAutocomplete id="my_desert_list" { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/NewForm/FormSelect.stories.jsx

@@ -70,7 +70,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } )
 export const Default = DefaultComponent.bind( {} );
 Default.args = {
 	placeholder: '- Select -',
-	options: options,
+	options,
 };
 
 export const WithGroup = DefaultComponent.bind( {} );

package/src/system/NewForm/index.js

@@ -3,11 +3,13 @@
  */
 
 import { FormSelect } from './FormSelect';
+import { FormAutocomplete } from './FormAutocomplete';
 import { Form } from './Form';
 
 const Select = FormSelect;
+const Autocomplete = FormAutocomplete;
 const Root = Form;
 
-export { Root, Select };
+export { Root, Select, Autocomplete };
 
 export default Root;

package/test/fileMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/build/system/Form/MultiSelect.js

@@ -1,38 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.MultiSelect = void 0;
-
-var _reactSelect = _interopRequireDefault(require("react-select"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var vipGold = '#c29c69'; // hardcoding for now
-
-var vipGrey2 = '#d7dee2';
-var customStyles = {
-  control: function control(styles) {
-    return _extends({}, styles, {
-      border: "1px solid " + vipGrey2,
-      boxShadow: 'none',
-      '&:hover': {
-        border: "1px solid " + vipGold
-      },
-      '&:focus': {
-        border: "1px solid " + vipGold
-      }
-    });
-  }
-};
-
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
-};
-
-exports.MultiSelect = MultiSelect;

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.UsageChart = void 0;
-
-var _framerMotion = require("framer-motion");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-var UsageChart = function UsageChart(_ref) {
-  var total = _ref.total,
-      max = _ref.max,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
-  var width = total / max * 100 + '%';
-  var formattedTotal = total;
-
-  if (total > 1000000) {
-    formattedTotal = (total / 1000000).toFixed(2) + "M";
-  } else if (total > 1000) {
-    formattedTotal = (total / 1000).toFixed(2) + "K";
-  }
-
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      height: variant === 'primary' ? 32 : 8,
-      overflow: 'hidden',
-      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
-    },
-    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
-      initial: {
-        width: 0
-      },
-      animate: {
-        width: width
-      },
-      transition: {
-        duration: 0.7
-      },
-      sx: {
-        height: '100%',
-        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
-      }
-    })
-  });
-};
-
-exports.UsageChart = UsageChart;
-UsageChart.propTypes = {
-  total: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  variant: _propTypes["default"].string
-};

package/build/system/UsageChart/index.js

@@ -1,7 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _UsageChart = require("./UsageChart");
-
-exports.UsageChart = _UsageChart.UsageChart;