@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -1,479 +1,467 @@
-"use strict";
-
-exports.__esModule = true;
-exports.FormAutocompleteMultiselect = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _FormSelectContent = require("./FormSelectContent");
-var _FormSelectArrow = require("./FormSelectArrow");
-var _Label = require("../Form/Label");
-var _FormSelectSearch = require("./FormSelectSearch");
-var _FormSelectLoading = require("./FormSelectLoading");
-var _Input = require("../Form/Input.styles");
-var _Form = require("../Form");
-var _ = require("../");
-var _md = require("react-icons/md");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var baseBorderTextColors = _extends({}, _Input.baseControlBorderStyle, {
-  backgroundColor: _Input.inputBaseBackground,
-  color: _Input.inputBaseText,
-  borderRadius: 1
-});
-var defaultStyles = _extends({
-  width: '100%'
-}, baseBorderTextColors, {
-  py: 0,
-  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__input--show-all-values': {
-      paddingRight: '40px'
-    },
-    '&::placeholder': {
-      color: 'input.text.placeholder',
-      opacity: 1
-    }
-  },
-  '& .autocomplete__menu': _extends({}, baseBorderTextColors),
-  '& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
-    fontSize: 'inherit'
-  },
-  '& .autocomplete__wrapper': {
-    width: '100%'
-  },
-  '& .autocomplete__option': {
-    borderColor: _Input.baseControlBorderStyle.borderColor
-  },
-  '& .autocomplete__option--odd': {
-    bg: 'backgroundSecondary'
-  },
-  '& .autocomplete__option:hover, & .autocomplete__option--focused': {
-    bg: 'midnight',
-    borderColor: 'midnight'
-  },
-  '& .autocomplete__input--show-all-values': {
-    paddingRight: 0
-  },
-  '& .autocomplete__hint': {
-    border: 'none',
-    paddingLeft: 3,
-    minHeight: '27px',
-    lineHeight: '27px'
-  }
-});
-var inlineStyles = {
-  borderWidth: 0
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import Autocomplete from 'accessible-autocomplete/react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { FormSelectContent } from './FormSelectContent';
+import { FormSelectArrow } from './FormSelectArrow';
+import { Label } from '../Form/Label';
+import { FormSelectSearch } from './FormSelectSearch';
+import { FormSelectLoading } from './FormSelectLoading';
+import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { Validation } from '../Form';
+import { Button, Flex } from '../';
+import { MdClose } from 'react-icons/md';
+
+const baseBorderTextColors = {
+	...baseControlBorderStyle,
+	backgroundColor: inputBaseBackground,
+	color: inputBaseText,
+	borderRadius: 1,
+};
+
+const defaultStyles = {
+	width: '100%',
+	...baseBorderTextColors,
+
+	py: 0,
+	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__input--show-all-values': { paddingRight: '40px' },
+		'&::placeholder': {
+			color: 'input.text.placeholder',
+			opacity: 1,
+		},
+	},
+	'& .autocomplete__menu': {
+		...baseBorderTextColors,
+	},
+	'& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
+		fontSize: 'inherit',
+	},
+	'& .autocomplete__wrapper': {
+		width: '100%',
+	},
+	'& .autocomplete__option': {
+		borderColor: baseControlBorderStyle.borderColor,
+	},
+	'& .autocomplete__option--odd': {
+		bg: 'backgroundSecondary',
+	},
+	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
+		bg: 'midnight',
+		borderColor: 'midnight',
+	},
+	'& .autocomplete__input--show-all-values': {
+		paddingRight: 0,
+	},
+	'& .autocomplete__hint': {
+		border: 'none',
+		paddingLeft: 3,
+		minHeight: '27px',
+		lineHeight: '27px',
+	},
 };
-var searchIconStyles = {
-  '& .autocomplete__input.autocomplete__input': {
-    paddingLeft: 4
-  }
+
+const inlineStyles = {
+	borderWidth: 0,
 };
-var DefaultArrow = function DefaultArrow(config) {
-  return (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {
-    classNames: config.className
-  });
+
+const searchIconStyles = {
+	'& .autocomplete__input.autocomplete__input': {
+		paddingLeft: 4,
+	},
 };
-var AddSelectionStatus = function AddSelectionStatus(_ref) {
-  var status = _ref.status;
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      border: '0',
-      clip: 'rect(0 0 0 0)',
-      height: '1px',
-      marginBottom: '-1px',
-      marginRight: '-1px',
-      overflow: 'hidden',
-      padding: '0',
-      position: 'absolute',
-      whiteSpace: 'nowrap',
-      width: '1px'
-    },
-    id: "vip-autocompletemultiselect-status",
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "assertive",
-    children: status
-  });
+
+const DefaultArrow = config => <FormSelectArrow classNames={ config.className } />;
+
+const AddSelectionStatus = ( { status } ) => {
+	return (
+		<div
+			sx={ {
+				border: '0',
+				clip: 'rect(0 0 0 0)',
+				height: '1px',
+				marginBottom: '-1px',
+				marginRight: '-1px',
+				overflow: 'hidden',
+				padding: '0',
+				position: 'absolute',
+				whiteSpace: 'nowrap',
+				width: '1px',
+			} }
+			id="vip-autocompletemultiselect-status"
+			role="status"
+			aria-atomic="true"
+			aria-live="assertive"
+		>
+			{ status }
+		</div>
+	);
 };
+
 AddSelectionStatus.propTypes = {
-  status: _propTypes["default"].string.isRequired
+	status: PropTypes.string.isRequired,
 };
-var SelectedOptions = function SelectedOptions(_ref2) {
-  var index = _ref2.index,
-    option = _ref2.option,
-    unselectValue = _ref2.unselectValue;
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      mr: 1,
-      maxWidth: '100%'
-    },
-    children: (0, _jsxRuntime.jsxs)(_.Button, {
-      variant: "tertiary",
-      onClick: function onClick(e) {
-        e.preventDefault();
-        unselectValue(option, index);
-      },
-      sx: {
-        mt: 1,
-        fontSize: 1,
-        maxWidth: '100%'
-      },
-      children: [(0, _jsxRuntime.jsx)("div", {
-        sx: {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
-        },
-        children: option
-      }), (0, _jsxRuntime.jsx)(_md.MdClose, {
-        sx: {
-          ml: 2
-        }
-      })]
-    })
-  }, index);
+
+const SelectedOptions = ( { index, option, unselectValue } ) => {
+	return (
+		<div key={ index } sx={ { mr: 1, maxWidth: '100%' } }>
+			<Button
+				variant="tertiary"
+				onClick={ e => {
+					e.preventDefault();
+					unselectValue( option, index );
+				} }
+				sx={ {
+					mt: 1,
+					fontSize: 1,
+					maxWidth: '100%',
+				} }
+			>
+				<div
+					sx={ {
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+						whiteSpace: 'nowrap',
+					} }
+				>
+					{ option }
+				</div>
+				<MdClose sx={ { ml: 2 } } />
+			</Button>
+		</div>
+	);
 };
+
 SelectedOptions.propTypes = {
-  index: _propTypes["default"].number.isRequired,
-  option: _propTypes["default"].string.isRequired,
-  unselectValue: _propTypes["default"].func.isRequired
+	index: PropTypes.number.isRequired,
+	option: PropTypes.string.isRequired,
+	unselectValue: PropTypes.func.isRequired,
 };
-var FormAutocompleteMultiselect = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardRef) {
-  var _ref3$autoFilter = _ref3.autoFilter,
-    autoFilter = _ref3$autoFilter === void 0 ? true : _ref3$autoFilter,
-    className = _ref3.className,
-    _ref3$debounce = _ref3.debounce,
-    debounce = _ref3$debounce === void 0 ? 0 : _ref3$debounce,
-    _ref3$displayMenu = _ref3.displayMenu,
-    displayMenu = _ref3$displayMenu === void 0 ? 'overlay' : _ref3$displayMenu,
-    _ref3$dropdownArrow = _ref3.dropdownArrow,
-    dropdownArrow = _ref3$dropdownArrow === void 0 ? DefaultArrow : _ref3$dropdownArrow,
-    errorMessage = _ref3.errorMessage,
-    _ref3$forLabel = _ref3.forLabel,
-    forLabel = _ref3$forLabel === void 0 ? 'vip-autocompletemultiselect' : _ref3$forLabel,
-    getOptionLabel = _ref3.getOptionLabel,
-    getOptionValue = _ref3.getOptionValue,
-    hasError = _ref3.hasError,
-    isInline = _ref3.isInline,
-    label = _ref3.label,
-    loading = _ref3.loading,
-    _ref3$minLength = _ref3.minLength,
-    minLength = _ref3$minLength === void 0 ? 0 : _ref3$minLength,
-    _ref3$noOptionsMessag = _ref3.noOptionsMessage,
-    noOptionsMessage = _ref3$noOptionsMessag === void 0 ? function () {
-      return 'No results found. Type to search.';
-    } : _ref3$noOptionsMessag,
-    _ref3$onChange = _ref3.onChange,
-    onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange,
-    onInputChange = _ref3.onInputChange,
-    _ref3$options = _ref3.options,
-    options = _ref3$options === void 0 ? [] : _ref3$options,
-    required = _ref3.required,
-    searchIcon = _ref3.searchIcon,
-    _ref3$showAllValues = _ref3.showAllValues,
-    showAllValues = _ref3$showAllValues === void 0 ? false : _ref3$showAllValues,
-    source = _ref3.source,
-    value = _ref3.value,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded);
-  var OPTION_ACTION = {
-    ADD: 'add',
-    REMOVE: 'remove',
-    NONE: 'none'
-  };
-  var _useState = (0, _react.useState)(false),
-    isDirty = _useState[0],
-    setIsDirty = _useState[1];
-  var _useState2 = (0, _react.useState)([]),
-    selectedOptions = _useState2[0],
-    setSelectedOptions = _useState2[1];
-  var _useState3 = (0, _react.useState)(''),
-    addStatus = _useState3[0],
-    setAddStatus = _useState3[1];
-  var _useState4 = (0, _react.useState)({
-      action: OPTION_ACTION.NONE,
-      option: null,
-      index: -1
-    }),
-    currentOption = _useState4[0],
-    setCurrentOption = _useState4[1];
-  var debounceTimeout;
-  forwardRef = forwardRef || /*#__PURE__*/_react["default"].createRef();
-
-  /**
-   * Reset the underlying component state to show the selected value
-   */
-  var resetInputState = (0, _react.useCallback)(function () {
-    var _forwardRef;
-    if ((_forwardRef = forwardRef) != null && _forwardRef.current) {
-      // resets the input field to the selected value or the empty string
-      forwardRef.current.setState(_extends({}, forwardRef.current.state, {
-        query: '' // selected value should not be null or the component will crash
-      }));
-    }
-  }, [forwardRef]);
-  var SelectLabel = function SelectLabel() {
-    return (0, _jsxRuntime.jsx)(_Label.Label, {
-      required: required,
-      htmlFor: forLabel,
-      children: label
-    });
-  };
-  var inlineLabel = !!(isInline && label);
-  var optionLabel = (0, _react.useCallback)(function (option) {
-    return getOptionLabel ? getOptionLabel(option) : option.label;
-  }, [getOptionLabel]);
-  var getOptionByLabel = (0, _react.useCallback)(function (inputValue) {
-    return getAllOptions.find(function (option) {
-      return "" + optionLabel(option) === "" + inputValue;
-    });
-  }, [getAllOptions, optionLabel]);
-  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 onValueChange = (0, _react.useCallback)(function (inputValue) {
-    if (inputValue && !selectedOptions.includes(inputValue)) {
-      setCurrentOption({
-        action: OPTION_ACTION.ADD,
-        option: inputValue
-      });
-      setSelectedOptions([].concat(selectedOptions, [inputValue]));
-    }
-  }, [getOptionByLabel, setSelectedOptions, selectedOptions, setCurrentOption]);
-  var unselectValue = (0, _react.useCallback)(function (inputValue, index) {
-    if (inputValue) {
-      setSelectedOptions(selectedOptions.filter(function (option) {
-        return ((option == null ? void 0 : option.label) || option) !== inputValue;
-      }));
-      setCurrentOption({
-        action: OPTION_ACTION.REMOVE,
-        option: inputValue,
-        index: index
-      });
-    }
-  }, [getOptionByLabel, setSelectedOptions, selectedOptions, setCurrentOption]);
-  var handleTypeChange = (0, _react.useCallback)(function (query) {
-    return options.filter(function (option) {
-      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
-    });
-  }, [options]);
-  var handleInputChange = (0, _react.useCallback)(function (query) {
-    if (!debounce) {
-      return onInputChange(query);
-    }
-    clearTimeout(debounceTimeout);
-    if (!query.length || query.length >= minLength) {
-      debounceTimeout = setTimeout(function () {
-        onInputChange(query);
-      }, debounce);
-    }
-  }, [onInputChange, debounce, minLength]);
-  var suggest = (0, _react.useCallback)(function (query, populateResults) {
-    var _data;
-    var data = options;
-    if (isDirty && onInputChange) {
-      handleInputChange(query);
-    }
-    if (isDirty && autoFilter) {
-      data = handleTypeChange(query);
-    }
-    var optionForDisplay = (_data = data) == null ? void 0 : _data.map(function (option) {
-      return optionLabel(option);
-    });
-    populateResults(optionForDisplay.filter(function (option) {
-      return !selectedOptions.includes(option);
-    }));
-  }, [autoFilter, isDirty, onInputChange, options, selectedOptions]);
-  (0, _react.useEffect)(function () {
-    global.document.querySelector('.autocomplete__input').removeAttribute('aria-activedescendant');
-  }, []);
-  (0, _react.useEffect)(function () {
-    global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
-  }, [label]);
-  (0, _react.useEffect)(function () {
-    var input = global.document.querySelector("#" + forLabel);
-    if (!input || required === undefined) {
-      return;
-    }
-    input.setAttribute('aria-required', required);
-  }, [required]);
-  (0, _react.useEffect)(function () {
-    global.document.querySelector("#" + forLabel).addEventListener('keydown', function () {
-      setIsDirty(true);
-    });
-  }, [setIsDirty]);
-
-  // For accessibility, we need to add the error message to the aria-describedby attribute
-  (0, _react.useEffect)(function () {
-    var input = global.document.querySelector("#" + forLabel);
-    input == null ? void 0 : input.setAttribute('aria-describedby', "describe-" + forLabel + "-validation " + input.getAttribute('aria-describedby'));
-  }, []);
-
-  // Update selectedOption and reset the input state on select input change
-
-  (0, _react.useEffect)(function () {
-    onChange(selectedOptions, selectedOptions.map(function (option) {
-      return (option == null ? void 0 : option.label) || option;
-    }));
-    resetInputState();
-  }, [selectedOptions]);
-
-  // Update the select status for screen readers
-  (0, _react.useEffect)(function () {
-    if (currentOption.action === OPTION_ACTION.ADD) {
-      setAddStatus(currentOption.option + " added to the list.");
-      setCurrentOption({
-        action: OPTION_ACTION.NONE,
-        option: null
-      });
-    } else if (currentOption.index === selectedOptions.length && selectedOptions.length > 0) {
-      // Move focus to the first selected item, if the last element is removed and there are other elements in the list
-      global.document.querySelector('.vip-button-component').focus();
-    } else if (selectedOptions.length === 0) {
-      // Move focus to the input field if the last element is removed and there are no other elements in the list
-      global.document.querySelector('.autocomplete__input').focus();
-    }
-  }, [currentOption]);
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
-    children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
-      sx: _extends({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles),
-      children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
-        isInline: inlineLabel,
-        label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
-        children: [searchIcon && (0, _jsxRuntime.jsx)(_FormSelectSearch.FormSelectSearch, {}), (0, _jsxRuntime.jsx)(_react2["default"], _extends({
-          id: forLabel,
-          "aria-busy": loading,
-          showAllValues: showAllValues,
-          ref: forwardRef,
-          source: source || suggest,
-          defaultValue: value,
-          displayMenu: displayMenu,
-          onConfirm: onValueChange,
-          tNoResults: noOptionsMessage,
-          required: required,
-          dropdownArrow: showAllValues ? dropdownArrow : function () {
-            return '';
-          },
-          confirmOnBlur: false
-        }, props)), addStatus && (0, _jsxRuntime.jsx)(AddSelectionStatus, {
-          status: addStatus
-        }), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {
-          sx: {
-            right: showAllValues ? 40 : 10
-          }
-        })]
-      })
-    }), (0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        mt: 2,
-        justifyContent: 'space-between'
-      },
-      children: [hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
-        isValid: false,
-        describedId: forLabel,
-        children: errorMessage
-      }), (0, _jsxRuntime.jsxs)("div", {
-        sx: {
-          fontSize: 1
-        },
-        children: [selectedOptions.length, " item", selectedOptions.length > 1 ? 's' : '', " selected"]
-      })]
-    }), (0, _jsxRuntime.jsx)("div", {
-      sx: {
-        display: 'inline-flex',
-        flexWrap: 'wrap',
-        maxWidth: '100%'
-      },
-      children: selectedOptions && selectedOptions.map(function (option, idx) {
-        return (0, _jsxRuntime.jsx)(SelectedOptions, {
-          index: idx,
-          option: option,
-          unselectValue: unselectValue
-        }, idx);
-      })
-    })]
-  });
-});
-exports.FormAutocompleteMultiselect = FormAutocompleteMultiselect;
+
+const FormAutocompleteMultiselect = React.forwardRef(
+	(
+		{
+			autoFilter = true,
+			className,
+			debounce = 0,
+			displayMenu = 'overlay',
+			dropdownArrow = DefaultArrow,
+			errorMessage,
+			forLabel = 'vip-autocompletemultiselect',
+			getOptionLabel,
+			getOptionValue,
+			hasError,
+			isInline,
+			label,
+			loading,
+			minLength = 0,
+			noOptionsMessage = () => 'No results found. Type to search.',
+			onChange = () => {},
+			onInputChange,
+			options = [],
+			required,
+			searchIcon,
+			showAllValues = false,
+			source,
+			value,
+			...props
+		},
+		forwardRef
+	) => {
+		const OPTION_ACTION = {
+			ADD: 'add',
+			REMOVE: 'remove',
+			NONE: 'none',
+		};
+		const [ isDirty, setIsDirty ] = useState( false );
+		const [ selectedOptions, setSelectedOptions ] = useState( [] );
+		const [ addStatus, setAddStatus ] = useState( '' );
+		const [ currentOption, setCurrentOption ] = useState( {
+			action: OPTION_ACTION.NONE,
+			option: null,
+			index: -1,
+		} );
+		let debounceTimeout;
+		forwardRef = forwardRef || React.createRef();
+
+		/**
+		 * Reset the underlying component state to show the selected value
+		 */
+		const resetInputState = useCallback( () => {
+			if ( forwardRef?.current ) {
+				// resets the input field to the selected value or the empty string
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: '', // selected value should not be null or the component will crash
+				} );
+			}
+		}, [ forwardRef ] );
+
+		const SelectLabel = () => (
+			<Label required={ required } htmlFor={ forLabel }>
+				{ label }
+			</Label>
+		);
+
+		const inlineLabel = !! ( isInline && label );
+
+		const optionLabel = useCallback(
+			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
+			[ getOptionLabel ]
+		);
+
+		const getOptionByLabel = useCallback(
+			inputValue =>
+				getAllOptions.find( option => `${ optionLabel( option ) }` === `${ inputValue }` ),
+			[ getAllOptions, optionLabel ]
+		);
+
+		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 onValueChange = useCallback(
+			inputValue => {
+				if ( inputValue && ! selectedOptions.includes( inputValue ) ) {
+					setCurrentOption( { action: OPTION_ACTION.ADD, option: inputValue } );
+					setSelectedOptions( [ ...selectedOptions, inputValue ] );
+				}
+			},
+			[ getOptionByLabel, setSelectedOptions, selectedOptions, setCurrentOption ]
+		);
+
+		const unselectValue = useCallback(
+			( inputValue, index ) => {
+				if ( inputValue ) {
+					setSelectedOptions(
+						selectedOptions.filter( option => ( option?.label || option ) !== inputValue )
+					);
+					setCurrentOption( {
+						action: OPTION_ACTION.REMOVE,
+						option: inputValue,
+						index,
+					} );
+				}
+			},
+			[ getOptionByLabel, setSelectedOptions, selectedOptions, setCurrentOption ]
+		);
+
+		const handleTypeChange = useCallback(
+			query =>
+				options.filter(
+					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
+				),
+			[ options ]
+		);
+
+		const handleInputChange = useCallback(
+			query => {
+				if ( ! debounce ) {
+					return onInputChange( query );
+				}
+				clearTimeout( debounceTimeout );
+				if ( ! query.length || query.length >= minLength ) {
+					debounceTimeout = setTimeout( () => {
+						onInputChange( query );
+					}, debounce );
+				}
+			},
+			[ onInputChange, debounce, minLength ]
+		);
+
+		const suggest = useCallback(
+			( query, populateResults ) => {
+				let data = options;
+				if ( isDirty && onInputChange ) {
+					handleInputChange( query );
+				}
+				if ( isDirty && autoFilter ) {
+					data = handleTypeChange( query );
+				}
+				const optionForDisplay = data?.map( option => optionLabel( option ) );
+				populateResults(
+					optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
+				);
+			},
+			[ autoFilter, isDirty, onInputChange, options, selectedOptions ]
+		);
+
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__input' )
+				.removeAttribute( 'aria-activedescendant' );
+		}, [] );
+
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__menu' )
+				.setAttribute( 'aria-label', `${ label } list` );
+		}, [ label ] );
+
+		useEffect( () => {
+			const input = global.document.querySelector( `#${ forLabel }` );
+			if ( ! input || required === undefined ) {
+				return;
+			}
+			input.setAttribute( 'aria-required', required );
+		}, [ required ] );
+
+		useEffect( () => {
+			global.document.querySelector( `#${ forLabel }` ).addEventListener( 'keydown', () => {
+				setIsDirty( true );
+			} );
+		}, [ setIsDirty ] );
+
+		// For accessibility, we need to add the error message to the aria-describedby attribute
+		useEffect( () => {
+			const input = global.document.querySelector( `#${ forLabel }` );
+			input?.setAttribute(
+				'aria-describedby',
+				`describe-${ forLabel }-validation ${ input.getAttribute( 'aria-describedby' ) }`
+			);
+		}, [] );
+
+		// Update selectedOption and reset the input state on select input change
+
+		useEffect( () => {
+			onChange(
+				selectedOptions,
+				selectedOptions.map( option => option?.label || option )
+			);
+			resetInputState();
+		}, [ selectedOptions ] );
+
+		// Update the select status for screen readers
+		useEffect( () => {
+			if ( currentOption.action === OPTION_ACTION.ADD ) {
+				setAddStatus( `${ currentOption.option } added to the list.` );
+				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
+			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
+				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
+				global.document.querySelector( '.vip-button-component' ).focus();
+			} else if ( selectedOptions.length === 0 ) {
+				// Move focus to the input field if the last element is removed and there are no other elements in the list
+				global.document.querySelector( '.autocomplete__input' ).focus();
+			}
+		}, [ currentOption ] );
+
+		return (
+			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
+				{ label && ! isInline && <SelectLabel /> }
+				<div
+					sx={ {
+						...defaultStyles,
+						...( isInline && inlineStyles ),
+						...( searchIcon && searchIconStyles ),
+					} }
+				>
+					<FormSelectContent
+						isInline={ inlineLabel }
+						label={ inlineLabel ? <SelectLabel /> : null }
+					>
+						{ searchIcon && <FormSelectSearch /> }
+						<Autocomplete
+							id={ forLabel }
+							aria-busy={ loading }
+							showAllValues={ showAllValues }
+							ref={ forwardRef }
+							source={ source || suggest }
+							defaultValue={ value }
+							displayMenu={ displayMenu }
+							onConfirm={ onValueChange }
+							tNoResults={ noOptionsMessage }
+							required={ required }
+							dropdownArrow={ showAllValues ? dropdownArrow : () => '' }
+							confirmOnBlur={ false }
+							{ ...props }
+						/>
+						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
+						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 40 : 10 } } /> }
+					</FormSelectContent>
+				</div>
+				<Flex sx={ { mt: 2, justifyContent: 'space-between' } }>
+					{ hasError && errorMessage && (
+						<Validation isValid={ false } describedId={ forLabel }>
+							{ errorMessage }
+						</Validation>
+					) }
+					<div sx={ { fontSize: 1 } }>
+						{ selectedOptions.length } item{ selectedOptions.length > 1 ? 's' : '' } selected
+					</div>
+				</Flex>
+				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
+					{ selectedOptions &&
+						selectedOptions.map( ( option, idx ) => (
+							<SelectedOptions
+								key={ idx }
+								index={ idx }
+								option={ option }
+								unselectValue={ unselectValue }
+							/>
+						) ) }
+				</div>
+			</div>
+		);
+	}
+);
+
 FormAutocompleteMultiselect.propTypes = {
-  autoFilter: _propTypes["default"].bool,
-  className: _propTypes["default"].any,
-  debounce: _propTypes["default"].number,
-  displayMenu: _propTypes["default"].string,
-  errorMessage: _propTypes["default"].string,
-  forLabel: _propTypes["default"].string,
-  getOptionLabel: _propTypes["default"].func,
-  getOptionValue: _propTypes["default"].func,
-  hasError: _propTypes["default"].bool,
-  isInline: _propTypes["default"].bool,
-  label: _propTypes["default"].string,
-  loading: _propTypes["default"].bool,
-  minLength: _propTypes["default"].number,
-  noOptionsMessage: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onInputChange: _propTypes["default"].func,
-  options: _propTypes["default"].array,
-  required: _propTypes["default"].bool,
-  searchIcon: _propTypes["default"].bool,
-  showAllValues: _propTypes["default"].bool,
-  source: _propTypes["default"].func,
-  value: _propTypes["default"].string,
-  dropdownArrow: _propTypes["default"].node
+	autoFilter: PropTypes.bool,
+	className: PropTypes.any,
+	debounce: PropTypes.number,
+	displayMenu: PropTypes.string,
+	errorMessage: PropTypes.string,
+	forLabel: PropTypes.string,
+	getOptionLabel: PropTypes.func,
+	getOptionValue: PropTypes.func,
+	hasError: PropTypes.bool,
+	isInline: PropTypes.bool,
+	label: PropTypes.string,
+	loading: PropTypes.bool,
+	minLength: PropTypes.number,
+	noOptionsMessage: PropTypes.func,
+	onChange: PropTypes.func,
+	onInputChange: PropTypes.func,
+	options: PropTypes.array,
+	required: PropTypes.bool,
+	searchIcon: PropTypes.bool,
+	showAllValues: PropTypes.bool,
+	source: PropTypes.func,
+	value: PropTypes.string,
+	dropdownArrow: PropTypes.node,
 };
-FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';
+
+FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';
+
+export { FormAutocompleteMultiselect };