@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/NewForm/FormAutocomplete.js

@@ -1,386 +1,391 @@
-"use strict";
-
-exports.__esModule = true;
-exports.FormAutocomplete = 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 _FormAutocomplete = _interopRequireDefault(require("./FormAutocomplete.css"));
-exports.css = _FormAutocomplete["default"];
-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 _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "forLabel", "getOptionLabel", "getOptionValue", "errorMessage", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "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%',
-  mb: 2
-}, 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'
-    }
-  },
-  '& .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 './FormAutocomplete.css';
+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';
+
+const baseBorderTextColors = {
+	...baseControlBorderStyle,
+	backgroundColor: inputBaseBackground,
+	color: inputBaseText,
+	borderRadius: 1,
 };
-var searchIconStyles = {
-  '& .autocomplete__input.autocomplete__input': {
-    paddingLeft: 4
-  }
+
+const defaultStyles = {
+	width: '100%',
+	mb: 2,
+	...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' },
+	},
+	'& .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 DefaultArrow = function DefaultArrow(config) {
-  return (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {
-    classNames: config.className
-  });
+
+const inlineStyles = {
+	borderWidth: 0,
+};
+
+const searchIconStyles = {
+	'& .autocomplete__input.autocomplete__input': {
+		paddingLeft: 4,
+	},
 };
-var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var _ref$autoFilter = _ref.autoFilter,
-    autoFilter = _ref$autoFilter === void 0 ? true : _ref$autoFilter,
-    className = _ref.className,
-    _ref$debounce = _ref.debounce,
-    debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
-    _ref$displayMenu = _ref.displayMenu,
-    displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
-    _ref$dropdownArrow = _ref.dropdownArrow,
-    dropdownArrow = _ref$dropdownArrow === void 0 ? DefaultArrow : _ref$dropdownArrow,
-    _ref$forLabel = _ref.forLabel,
-    forLabel = _ref$forLabel === void 0 ? 'vip-autocomplete' : _ref$forLabel,
-    getOptionLabel = _ref.getOptionLabel,
-    getOptionValue = _ref.getOptionValue,
-    errorMessage = _ref.errorMessage,
-    hasError = _ref.hasError,
-    isInline = _ref.isInline,
-    label = _ref.label,
-    loading = _ref.loading,
-    _ref$minLength = _ref.minLength,
-    minLength = _ref$minLength === void 0 ? 0 : _ref$minLength,
-    _ref$noOptionsMessage = _ref.noOptionsMessage,
-    noOptionsMessage = _ref$noOptionsMessage === void 0 ? function () {
-      return 'No results found. Type to search.';
-    } : _ref$noOptionsMessage,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    onInputChange = _ref.onInputChange,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options,
-    required = _ref.required,
-    searchIcon = _ref.searchIcon,
-    _ref$showAllValues = _ref.showAllValues,
-    showAllValues = _ref$showAllValues === void 0 ? false : _ref$showAllValues,
-    _ref$resetOnBlur = _ref.resetOnBlur,
-    resetOnBlur = _ref$resetOnBlur === void 0 ? false : _ref$resetOnBlur,
-    source = _ref.source,
-    value = _ref.value,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    isDirty = _useState[0],
-    setIsDirty = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    sourceDebounceTimeout = _useState2[0],
-    setSourceDebounceTimeout = _useState2[1];
-  var _useState3 = (0, _react.useState)(value || ''),
-    selectedValue = _useState3[0],
-    setSelectedValue = _useState3[1];
-  var _useState4 = (0, _react.useState)(value),
-    inputQuery = _useState4[0],
-    setInputQuery = _useState4[1];
-  var debounceTimeout;
-  if (!forwardRef) {
-    forwardRef = /*#__PURE__*/_react["default"].createRef();
-  }
-  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 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 getOptionByLabel = (0, _react.useCallback)(function (inputValue) {
-    return getAllOptions.find(function (option) {
-      return "" + optionLabel(option) === "" + inputValue;
-    });
-  }, [getAllOptions, optionLabel]);
-  /**
-   * Reset the underlying component state to show the selected value
-   */
-  var resetInputState = (0, _react.useCallback)(function () {
-    var _forwardRef;
-    if (resetOnBlur && (_forwardRef = forwardRef) != null && _forwardRef.current && inputQuery !== selectedValue) {
-      // resets the input field to the selected value or the empty string
-      forwardRef.current.setState(_extends({}, forwardRef.current.state, {
-        query: inputQuery && inputQuery !== '' ? selectedValue != null ? selectedValue : '' : '' // selected value should not be null or the component will crash
-      }));
-    }
-  }, [forwardRef]);
-  // sets the internal state variables and calls the onChange callback
-  var setAutocompleteState = function setAutocompleteState(inputValue) {
-    setInputQuery(inputValue);
-    setSelectedValue(inputValue);
-    onChange(getOptionByLabel(inputValue), inputValue);
-    setIsDirty(false);
-  };
-  // this method gets called when we confirm the selection via click/enter
-  var onValueChange = (0, _react.useCallback)(function (inputValue) {
-    if (inputValue) {
-      setAutocompleteState(inputValue);
-    } else if (resetOnBlur && inputQuery !== selectedValue) {
-      if (inputQuery && inputQuery !== '') {
-        // reset the content to the selected value
-        setAutocompleteState(selectedValue);
-      } else {
-        // reset the content to empty if there's no match
-        setAutocompleteState(null);
-      }
-    }
-  }, [onChange, getOptionByLabel, setAutocompleteState]);
-  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);
-    }
-    populateResults((_data = data) == null ? void 0 : _data.map(function (option) {
-      return optionLabel(option);
-    }));
-  }, [autoFilter, isDirty, onInputChange, options]);
-  // internal function to save the inputQuery
-  var handleSource = function handleSource(query, populateResults) {
-    setInputQuery(query);
-    // user function to fetch the results has the precedence
-    if (source) {
-      if (!debounce) {
-        source(query, populateResults);
-        return;
-      }
-      if (sourceDebounceTimeout) {
-        clearTimeout(sourceDebounceTimeout);
-        setSourceDebounceTimeout(null);
-      }
-      if (!query.length || query.length >= minLength) {
-        setSourceDebounceTimeout(setTimeout(function () {
-          source(query, populateResults);
-          setSourceDebounceTimeout(null);
-        }, debounce));
-      }
-    } else {
-      suggest(query, populateResults);
-    }
-  };
-  (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]);
-  (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 (e) {
-      // pressed escape, we want to reset the status
-      if (e.keyCode === 27 && resetOnBlur) {
-        resetInputState();
-      } else {
-        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'));
-  }, []);
-  (0, _react.useEffect)(function () {
-    global.document.querySelector("#" + forLabel).addEventListener('blur', function () {
-      setInputQuery(global.document.querySelector("#" + forLabel).value);
-      resetInputState();
-    });
-  }, [forwardRef]);
-  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, hasError ? {
-        borderColor: 'input.border.error'
-      } : {}),
-      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: handleSource,
-          defaultValue: value,
-          displayMenu: displayMenu,
-          onConfirm: onValueChange,
-          tNoResults: noOptionsMessage,
-          required: required,
-          dropdownArrow: showAllValues ? dropdownArrow : function () {
-            return '';
-          }
-        }, props)), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {
-          sx: {
-            right: showAllValues ? 40 : 10
-          }
-        })]
-      })
-    }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
-      isValid: false,
-      describedId: forLabel,
-      children: errorMessage
-    })]
-  });
-});
-exports.FormAutocomplete = FormAutocomplete;
+
+const DefaultArrow = config => <FormSelectArrow classNames={ config.className } />;
+
+const FormAutocomplete = React.forwardRef(
+	(
+		{
+			autoFilter = true,
+			className,
+			debounce = 0,
+			displayMenu = 'overlay',
+			dropdownArrow = DefaultArrow,
+			forLabel = 'vip-autocomplete',
+			getOptionLabel,
+			getOptionValue,
+			errorMessage,
+			hasError,
+			isInline,
+			label,
+			loading,
+			minLength = 0,
+			noOptionsMessage = () => 'No results found. Type to search.',
+			onChange = () => {},
+			onInputChange,
+			options = [],
+			required,
+			searchIcon,
+			showAllValues = false,
+			resetOnBlur = false, // resets the input value to the selection if the input is blurred. Returns null if selection is empty
+			source,
+			value,
+			...props
+		},
+		forwardRef
+	) => {
+		const [ isDirty, setIsDirty ] = useState( false );
+		const [ sourceDebounceTimeout, setSourceDebounceTimeout ] = useState( null );
+		const [ selectedValue, setSelectedValue ] = useState( value || '' );
+		const [ inputQuery, setInputQuery ] = useState( value );
+		let debounceTimeout;
+		if ( ! forwardRef ) {
+			forwardRef = React.createRef();
+		}
+
+		const SelectLabel = () => (
+			<Label required={ required } htmlFor={ forLabel }>
+				{ label }
+			</Label>
+		);
+
+		const inlineLabel = !! ( isInline && label );
+
+		const optionLabel = useCallback(
+			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
+			[ getOptionLabel ]
+		);
+
+		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 getOptionByLabel = useCallback(
+			inputValue =>
+				getAllOptions.find( option => `${ optionLabel( option ) }` === `${ inputValue }` ),
+			[ getAllOptions, optionLabel ]
+		);
+		/**
+		 * Reset the underlying component state to show the selected value
+		 */
+		const resetInputState = useCallback( () => {
+			if ( resetOnBlur && forwardRef?.current && inputQuery !== selectedValue ) {
+				// resets the input field to the selected value or the empty string
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: inputQuery && inputQuery !== '' ? selectedValue ?? '' : '', // selected value should not be null or the component will crash
+				} );
+			}
+		}, [ forwardRef ] );
+		// sets the internal state variables and calls the onChange callback
+		const setAutocompleteState = inputValue => {
+			setInputQuery( inputValue );
+			setSelectedValue( inputValue );
+			onChange( getOptionByLabel( inputValue ), inputValue );
+			setIsDirty( false );
+		};
+		// this method gets called when we confirm the selection via click/enter
+		const onValueChange = useCallback(
+			inputValue => {
+				if ( inputValue ) {
+					setAutocompleteState( inputValue );
+				} else if ( resetOnBlur && inputQuery !== selectedValue ) {
+					if ( inputQuery && inputQuery !== '' ) {
+						// reset the content to the selected value
+						setAutocompleteState( selectedValue );
+					} else {
+						// reset the content to empty if there's no match
+						setAutocompleteState( null );
+					}
+				}
+			},
+			[ onChange, getOptionByLabel, setAutocompleteState ]
+		);
+
+		const handleTypeChange = useCallback(
+			query => {
+				return 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 );
+				}
+				populateResults( data?.map( option => optionLabel( option ) ) );
+			},
+			[ autoFilter, isDirty, onInputChange, options ]
+		);
+		// internal function to save the inputQuery
+		const handleSource = ( query, populateResults ) => {
+			setInputQuery( query );
+			// user function to fetch the results has the precedence
+			if ( source ) {
+				if ( ! debounce ) {
+					source( query, populateResults );
+					return;
+				}
+				if ( sourceDebounceTimeout ) {
+					clearTimeout( sourceDebounceTimeout );
+					setSourceDebounceTimeout( null );
+				}
+
+				if ( ! query.length || query.length >= minLength ) {
+					setSourceDebounceTimeout(
+						setTimeout( () => {
+							source( query, populateResults );
+							setSourceDebounceTimeout( null );
+						}, debounce )
+					);
+				}
+			} else {
+				suggest( query, populateResults );
+			}
+		};
+		useEffect( () => {
+			global.document
+				.querySelector( '.autocomplete__input' )
+				.setAttribute( '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', e => {
+				// pressed escape, we want to reset the status
+				if ( e.keyCode === 27 && resetOnBlur ) {
+					resetInputState();
+				} else {
+					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' ) }`
+			);
+		}, [] );
+
+		useEffect( () => {
+			global.document.querySelector( `#${ forLabel }` ).addEventListener( 'blur', () => {
+				setInputQuery( global.document.querySelector( `#${ forLabel }` ).value );
+				resetInputState();
+			} );
+		}, [ forwardRef ] );
+		return (
+			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
+				{ label && ! isInline && <SelectLabel /> }
+
+				<div
+					sx={ {
+						...defaultStyles,
+						...( isInline && inlineStyles ),
+						...( searchIcon && searchIconStyles ),
+						...( hasError ? { borderColor: 'input.border.error' } : {} ),
+					} }
+				>
+					<FormSelectContent
+						isInline={ inlineLabel }
+						label={ inlineLabel ? <SelectLabel /> : null }
+					>
+						{ searchIcon && <FormSelectSearch /> }
+
+						<Autocomplete
+							id={ forLabel }
+							aria-busy={ loading }
+							showAllValues={ showAllValues }
+							ref={ forwardRef }
+							source={ handleSource }
+							defaultValue={ value }
+							displayMenu={ displayMenu }
+							onConfirm={ onValueChange }
+							tNoResults={ noOptionsMessage }
+							required={ required }
+							dropdownArrow={ showAllValues ? dropdownArrow : () => '' }
+							{ ...props }
+						/>
+
+						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 40 : 10 } } /> }
+					</FormSelectContent>
+				</div>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ forLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
+			</div>
+		);
+	}
+);
+
 FormAutocomplete.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,
-  resetOnBlur: _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,
+	resetOnBlur: PropTypes.bool,
+	source: PropTypes.func,
+	value: PropTypes.string,
+	dropdownArrow: PropTypes.node,
 };
-FormAutocomplete.displayName = 'FormAutocomplete';
+
+FormAutocomplete.displayName = 'FormAutocomplete';
+
+export { FormAutocomplete };