@equinor/eds-core-react 0.23.0 → 0.24.0-dev.20221006

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -1,3 +1,7 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
@@ -14,200 +18,209 @@ import { Input } from '../Input/Input.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 
-const Container = styled.div.withConfig({
+var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
+var Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
-const StyledInput = styled(Input).withConfig({
+var StyledInput = styled(Input).withConfig({
   displayName: "Autocomplete__StyledInput",
   componentId: "sc-yvif0e-1"
-})(_ref => {
-  let {
-    theme: {
-      entities: {
-        button
-      }
-    }
-  } = _ref;
+})(function (_ref) {
+  var button = _ref.theme.entities.button;
   return css(["padding-right:calc( ", " + ", " + (", " * 2) );"], button.spacings.left, button.spacings.right, button.height);
 });
-const StyledList = styled(List).withConfig({
+var StyledList = styled(List).withConfig({
   displayName: "Autocomplete__StyledList",
   componentId: "sc-yvif0e-2"
-})(_ref2 => {
-  let {
-    theme
-  } = _ref2;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
-const StyledButton = styled(Button).withConfig({
+var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
   componentId: "sc-yvif0e-3"
-})(_ref3 => {
-  let {
-    theme: {
-      entities: {
-        button
-      }
-    }
-  } = _ref3;
+})(function (_ref3) {
+  var button = _ref3.theme.entities.button;
   return css(["position:absolute;height:", ";width:", ";right:", ";top:", ";"], button.height, button.height, button.spacings.right, button.spacings.top);
 });
 
-const findIndex = _ref4 => {
-  let {
-    calc,
-    index,
-    optionDisabled,
-    availableItems
-  } = _ref4;
-  const nextItem = availableItems[index];
+var findIndex = function findIndex(_ref4) {
+  var calc = _ref4.calc,
+      index = _ref4.index,
+      optionDisabled = _ref4.optionDisabled,
+      availableItems = _ref4.availableItems;
+  var nextItem = availableItems[index];
 
   if (optionDisabled(nextItem)) {
-    const nextIndex = calc(index);
+    var nextIndex = calc(index);
     return findIndex({
-      calc,
+      calc: calc,
       index: nextIndex,
-      availableItems,
-      optionDisabled
+      availableItems: availableItems,
+      optionDisabled: optionDisabled
     });
   }
 
   return index;
 };
 
-const findNextIndex = _ref5 => {
-  let {
-    index,
-    optionDisabled,
-    availableItems
-  } = _ref5;
-  const options = {
-    index,
-    optionDisabled,
-    availableItems,
-    calc: num => num + 1
+var findNextIndex = function findNextIndex(_ref5) {
+  var index = _ref5.index,
+      optionDisabled = _ref5.optionDisabled,
+      availableItems = _ref5.availableItems;
+  var options = {
+    index: index,
+    optionDisabled: optionDisabled,
+    availableItems: availableItems,
+    calc: function calc(num) {
+      return num + 1;
+    }
   };
-  const nextIndex = findIndex(options);
+  var nextIndex = findIndex(options);
 
   if (nextIndex > availableItems.length - 1) {
     // jump to start of list
-    return findIndex({ ...options,
+    return findIndex(_objectSpread(_objectSpread({}, options), {}, {
       index: 0
-    });
+    }));
   }
 
   return nextIndex;
 };
 
-const findPrevIndex = _ref6 => {
-  let {
-    index,
-    optionDisabled,
-    availableItems
-  } = _ref6;
-  const options = {
-    index,
-    optionDisabled,
-    availableItems,
-    calc: num => num - 1
+var findPrevIndex = function findPrevIndex(_ref6) {
+  var index = _ref6.index,
+      optionDisabled = _ref6.optionDisabled,
+      availableItems = _ref6.availableItems;
+  var options = {
+    index: index,
+    optionDisabled: optionDisabled,
+    availableItems: availableItems,
+    calc: function calc(num) {
+      return num - 1;
+    }
   };
-  const prevIndex = findIndex(options);
+  var prevIndex = findIndex(options);
 
   if (prevIndex < 0) {
     // jump to end of list
-    return findIndex({ ...options,
+    return findIndex(_objectSpread(_objectSpread({}, options), {}, {
       index: availableItems.length - 1
-    });
+    }));
   }
 
   return prevIndex;
 };
 
 function AutocompleteInner(props, ref) {
-  const {
-    options = [],
-    label,
-    meta,
-    className,
-    style,
-    disabled = false,
-    readOnly = false,
-    hideClearButton = false,
-    onOptionsChange,
-    selectedOptions,
-    multiple,
-    initialSelectedOptions = [],
-    disablePortal,
-    optionDisabled = () => false,
-    optionsFilter,
-    autoWidth,
-    placeholder,
-    optionLabel,
-    ...other
-  } = props;
-  const anchorRef = useRef(null);
-  const isControlled = Boolean(selectedOptions);
-  const [inputOptions, setInputOptions] = useState(options);
-  useEffect(() => {
-    const availableHash = JSON.stringify(inputOptions);
-    const optionsHash = JSON.stringify(options);
+  var _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      label = props.label,
+      meta = props.meta,
+      className = props.className,
+      style = props.style,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+      _props$hideClearButto = props.hideClearButton,
+      hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
+      onOptionsChange = props.onOptionsChange,
+      selectedOptions = props.selectedOptions,
+      multiple = props.multiple,
+      _props$initialSelecte = props.initialSelectedOptions,
+      initialSelectedOptions = _props$initialSelecte === void 0 ? [] : _props$initialSelecte,
+      disablePortal = props.disablePortal,
+      _props$optionDisabled = props.optionDisabled,
+      optionDisabled = _props$optionDisabled === void 0 ? function () {
+    return false;
+  } : _props$optionDisabled,
+      optionsFilter = props.optionsFilter,
+      autoWidth = props.autoWidth,
+      placeholder = props.placeholder,
+      optionLabel = props.optionLabel,
+      _props$clearSearchOnC = props.clearSearchOnChange,
+      clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var anchorRef = useRef(null);
+  var isControlled = Boolean(selectedOptions);
+
+  var _useState = useState(options),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputOptions = _useState2[0],
+      setInputOptions = _useState2[1];
+
+  var _useState3 = useState(inputOptions),
+      _useState4 = _slicedToArray(_useState3, 2),
+      availableItems = _useState4[0],
+      setAvailableItems = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      typedInputValue = _useState6[0],
+      setTypedInputValue = _useState6[1];
+
+  useEffect(function () {
+    var availableHash = JSON.stringify(inputOptions);
+    var optionsHash = JSON.stringify(options);
 
     if (availableHash !== optionsHash) {
       setInputOptions(options);
     }
   }, [options, inputOptions]);
-  useEffect(() => {
+  useEffect(function () {
     setAvailableItems(inputOptions);
   }, [inputOptions]);
-  const [availableItems, setAvailableItems] = useState(inputOptions);
-  const disabledItems = useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+  var disabledItems = useMemo(function () {
+    return options.filter(optionDisabled);
+  }, [options, optionDisabled]);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, multiple ? multiSelect : selectTokens);
-  let placeholderText = placeholder;
-  let multipleSelectionProps = {
+  var placeholderText = placeholder;
+  var multipleSelectionProps = {
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
 
   if (multiple) {
-    multipleSelectionProps = { ...multipleSelectionProps,
-      onSelectedItemsChange: changes => {
+    multipleSelectionProps = _objectSpread(_objectSpread({}, multipleSelectionProps), {}, {
+      onSelectedItemsChange: function onSelectedItemsChange(changes) {
         if (onOptionsChange) {
-          const {
-            selectedItems
-          } = changes;
+          var _selectedItems = changes.selectedItems;
           onOptionsChange({
-            selectedItems
+            selectedItems: _selectedItems
           });
         }
       }
-    };
+    });
 
     if (isControlled) {
-      multipleSelectionProps = { ...multipleSelectionProps,
+      multipleSelectionProps = _objectSpread(_objectSpread({}, multipleSelectionProps), {}, {
         selectedItems: selectedOptions
-      };
+      });
     }
   }
 
-  const {
-    getDropdownProps,
-    addSelectedItem,
-    removeSelectedItem,
-    selectedItems,
-    reset: resetSelection,
-    setSelectedItems
-  } = useMultipleSelection(multipleSelectionProps);
-  const getLabel = useCallback(item => {
+  var _useMultipleSelection = useMultipleSelection(multipleSelectionProps),
+      getDropdownProps = _useMultipleSelection.getDropdownProps,
+      addSelectedItem = _useMultipleSelection.addSelectedItem,
+      removeSelectedItem = _useMultipleSelection.removeSelectedItem,
+      selectedItems = _useMultipleSelection.selectedItems,
+      resetSelection = _useMultipleSelection.reset,
+      setSelectedItems = _useMultipleSelection.setSelectedItems;
+
+  var getLabel = useCallback(function (item) {
     if (!item) {
       return '';
     }
 
-    if (typeof item === 'object') {
+    if (_typeof(item) === 'object') {
       if (optionLabel) {
         return optionLabel(item);
       } else {
@@ -225,15 +238,13 @@ function AutocompleteInner(props, ref) {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
-  let comboBoxProps = {
+  var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
     itemToString: getLabel,
-    onInputValueChange: _ref7 => {
-      let {
-        inputValue
-      } = _ref7;
-      setAvailableItems(options.filter(item => {
+    onInputValueChange: function onInputValueChange(_ref7) {
+      var inputValue = _ref7.inputValue;
+      setAvailableItems(options.filter(function (item) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
         }
@@ -241,23 +252,19 @@ function AutocompleteInner(props, ref) {
         return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
-    onIsOpenChange: _ref8 => {
-      let {
-        selectedItem
-      } = _ref8;
+    onIsOpenChange: function onIsOpenChange(_ref8) {
+      var selectedItem = _ref8.selectedItem;
       // Show all options when single select is reopened with a selected item
-      const availableHash = JSON.stringify(availableItems[0]);
-      const selectedsHash = JSON.stringify(selectedItem);
+      var availableHash = JSON.stringify(availableItems[0]);
+      var selectedsHash = JSON.stringify(selectedItem);
 
       if (availableItems.length === 1 && selectedsHash === availableHash) {
         setAvailableItems(options);
       }
     },
-    onStateChange: _ref9 => {
-      let {
-        type,
-        selectedItem
-      } = _ref9;
+    onStateChange: function onStateChange(_ref9) {
+      var type = _ref9.type,
+          selectedItem = _ref9.selectedItem;
 
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
@@ -277,32 +284,30 @@ function AutocompleteInner(props, ref) {
           break;
       }
     },
-    stateReducer: (_, actionAndChanges) => {
-      const {
-        changes,
-        type
-      } = actionAndChanges;
+    stateReducer: function stateReducer(_, actionAndChanges) {
+      var changes = actionAndChanges.changes,
+          type = actionAndChanges.type;
 
       switch (type) {
         case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
         case useCombobox.stateChangeTypes.InputKeyDownHome:
-          return { ...changes,
+          return _objectSpread(_objectSpread({}, changes), {}, {
             highlightedIndex: findNextIndex({
               index: changes.highlightedIndex,
-              availableItems,
-              optionDisabled
+              availableItems: availableItems,
+              optionDisabled: optionDisabled
             })
-          };
+          });
 
         case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
         case useCombobox.stateChangeTypes.InputKeyDownEnd:
-          return { ...changes,
+          return _objectSpread(_objectSpread({}, changes), {}, {
             highlightedIndex: findPrevIndex({
               index: changes.highlightedIndex,
-              availableItems,
-              optionDisabled
+              availableItems: availableItems,
+              optionDisabled: optionDisabled
             })
-          };
+          });
 
         default:
           return changes;
@@ -311,187 +316,185 @@ function AutocompleteInner(props, ref) {
   };
 
   if (!multiple) {
-    comboBoxProps = { ...comboBoxProps,
-      onSelectedItemChange: changes => {
+    comboBoxProps = _objectSpread(_objectSpread({}, comboBoxProps), {}, {
+      onSelectedItemChange: function onSelectedItemChange(changes) {
         if (onOptionsChange) {
-          const {
-            selectedItem
-          } = changes;
+          var selectedItem = changes.selectedItem;
           onOptionsChange({
             selectedItems: selectedItem ? [selectedItem] : []
           });
         }
       }
-    };
+    });
 
     if (isControlled) {
-      comboBoxProps = { ...comboBoxProps,
+      comboBoxProps = _objectSpread(_objectSpread({}, comboBoxProps), {}, {
         selectedItem: selectedOptions[0] || null
-      };
+      });
     }
   }
 
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
-    comboBoxProps = { ...comboBoxProps,
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    comboBoxProps = _objectSpread(_objectSpread({}, comboBoxProps), {}, {
       selectedItem: null,
-      stateReducer: (state, actionAndChanges) => {
-        const {
-          changes,
-          type
-        } = actionAndChanges;
+      stateReducer: function stateReducer(state, actionAndChanges) {
+        var changes = actionAndChanges.changes,
+            type = actionAndChanges.type;
 
         switch (type) {
           case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
           case useCombobox.stateChangeTypes.InputKeyDownHome:
-            return { ...changes,
+            return _objectSpread(_objectSpread({}, changes), {}, {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
-                availableItems,
-                optionDisabled
+                availableItems: availableItems,
+                optionDisabled: optionDisabled
               })
-            };
+            });
 
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
           case useCombobox.stateChangeTypes.InputKeyDownEnd:
-            return { ...changes,
+            return _objectSpread(_objectSpread({}, changes), {}, {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
-                availableItems,
-                optionDisabled
+                availableItems: availableItems,
+                optionDisabled: optionDisabled
               })
-            };
+            });
 
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick:
-            return { ...changes,
+            return _objectSpread(_objectSpread({}, changes), {}, {
               isOpen: true,
               // keep menu open after selection.
               highlightedIndex: state.highlightedIndex,
-              inputValue: '' // don't add the item string as input value at selection.
-
-            };
+              inputValue: !clearSearchOnChange ? typedInputValue : ''
+            });
 
           case useCombobox.stateChangeTypes.InputBlur:
-            return { ...changes,
-              inputValue: '' // don't add the item string as input value at selection.
+            return _objectSpread(_objectSpread({}, changes), {}, {
+              inputValue: ''
+            });
 
-            };
+          case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+            return _objectSpread(_objectSpread({}, changes), {}, {
+              inputValue: !clearSearchOnChange ? typedInputValue : changes.inputValue
+            });
 
           default:
             return changes;
         }
       }
-    };
+    });
   }
 
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    highlightedIndex,
-    getItemProps,
-    openMenu,
-    inputValue,
-    reset: resetCombobox
-  } = useCombobox(comboBoxProps);
-  useEffect(() => {
+  var _useCombobox = useCombobox(comboBoxProps),
+      isOpen = _useCombobox.isOpen,
+      getToggleButtonProps = _useCombobox.getToggleButtonProps,
+      getLabelProps = _useCombobox.getLabelProps,
+      getMenuProps = _useCombobox.getMenuProps,
+      getInputProps = _useCombobox.getInputProps,
+      getComboboxProps = _useCombobox.getComboboxProps,
+      highlightedIndex = _useCombobox.highlightedIndex,
+      getItemProps = _useCombobox.getItemProps,
+      openMenu = _useCombobox.openMenu,
+      inputValue = _useCombobox.inputValue,
+      resetCombobox = _useCombobox.reset;
+
+  useEffect(function () {
     if (isControlled) {
       setSelectedItems(selectedOptions);
     }
   }, [isControlled, selectedOptions, setSelectedItems]);
 
-  const openSelect = () => {
+  var openSelect = function openSelect() {
     if (!isOpen && !(disabled || readOnly)) {
       openMenu();
     }
   };
 
-  const {
-    x,
-    y,
-    refs,
-    update,
-    reference,
-    floating,
-    strategy
-  } = useFloating({
+  var _useFloating = useFloating({
     placement: 'bottom-start',
     middleware: [offset(4), flip(), shift({
       padding: 8
     }), size({
-      apply(_ref10) {
-        let {
-          rects,
-          availableHeight,
-          elements
-        } = _ref10;
-        const anchorWidth = `${rects.reference.width}px`;
+      apply: function apply(_ref10) {
+        var rects = _ref10.rects,
+            availableHeight = _ref10.availableHeight,
+            elements = _ref10.elements;
+        var anchorWidth = "".concat(rects.reference.width, "px");
         Object.assign(elements.floating.style, {
-          width: `${autoWidth ? anchorWidth : 'auto'}`,
-          maxHeight: `${availableHeight}px`
+          width: "".concat(autoWidth ? anchorWidth : 'auto'),
+          maxHeight: "".concat(availableHeight, "px")
         });
       },
-
       padding: 10
     })]
-  });
-  const {
-    getFloatingProps
-  } = useInteractions([]);
-  useLayoutEffect(() => {
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      refs = _useFloating.refs,
+      update = _useFloating.update,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy;
+
+  var _useInteractions = useInteractions([]),
+      getFloatingProps = _useInteractions.getFloatingProps;
+
+  useLayoutEffect(function () {
     reference(anchorRef.current);
   }, [anchorRef, reference]);
-  useLayoutEffect(() => {
+  useLayoutEffect(function () {
     if (refs.reference.current && refs.floating.current && isOpen) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
 
-  const clear = () => {
+  var clear = function clear() {
     resetCombobox();
     resetSelection();
+    setTypedInputValue('');
   };
 
-  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
-  const selectedItemsLabels = useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
-
-  const optionsList = /*#__PURE__*/jsx("div", { ...getFloatingProps({
-      ref: floating,
-      style: {
-        position: strategy,
-        top: y || 0,
-        left: x || 0,
-        zIndex: 1400
-      }
-    }),
-    children: /*#__PURE__*/jsx(StyledList, { ...getMenuProps({
-        'aria-multiselectable': multiple ? 'true' : null
-      }, {
-        suppressRefError: true
-      }),
-      children: !isOpen ? null : availableItems.map((item, index) => {
-        const label = getLabel(item);
-        const isDisabled = optionDisabled(item);
-        const isSelected = selectedItemsLabels.includes(label);
-        return /*#__PURE__*/jsx(AutocompleteOption, {
+  var showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
+  var selectedItemsLabels = useMemo(function () {
+    return selectedItems.map(getLabel);
+  }, [selectedItems, getLabel]);
+
+  var optionsList = /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, getFloatingProps({
+    ref: floating,
+    style: {
+      position: strategy,
+      top: y || 0,
+      left: x || 0,
+      zIndex: 1400
+    }
+  })), {}, {
+    children: /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
+      'aria-multiselectable': multiple ? 'true' : null
+    }, {
+      suppressRefError: true
+    })), {}, {
+      children: !isOpen ? null : availableItems.map(function (item, index) {
+        var label = getLabel(item);
+        var isDisabled = optionDisabled(item);
+        var isSelected = selectedItemsLabels.includes(label);
+        return /*#__PURE__*/jsx(AutocompleteOption, _objectSpread({
           value: label,
           multiple: multiple,
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
-          isDisabled: isDisabled,
-          ...getItemProps({
-            item,
-            index,
-            disabled
-          })
-        }, label);
+          isDisabled: isDisabled
+        }, getItemProps({
+          item: item,
+          index: index,
+          disabled: disabled
+        })), label);
       })
-    })
-  });
+    }))
+  }));
 
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
@@ -499,23 +502,27 @@ function AutocompleteInner(props, ref) {
       className: className,
       style: style,
       ref: ref,
-      children: [/*#__PURE__*/jsx(Label, { ...getLabelProps(),
+      children: [/*#__PURE__*/jsx(Label, _objectSpread(_objectSpread({}, getLabelProps()), {}, {
         label: label,
         meta: meta,
         disabled: disabled
-      }), /*#__PURE__*/jsxs(Container, { ...getComboboxProps(),
-        children: [/*#__PURE__*/jsx(StyledInput, { ...getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          getDropdownProps({
-            preventKeyAction: multiple ? isOpen : undefined,
-            disabled,
-            ref: refs.reference
-          })),
+      })), /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, getComboboxProps()), {}, {
+        children: [/*#__PURE__*/jsx(StyledInput, _objectSpread(_objectSpread({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        getDropdownProps({
+          preventKeyAction: multiple ? isOpen : undefined,
+          disabled: disabled,
+          ref: refs.reference,
+          onChange: function onChange(e) {
+            var _e$currentTarget;
+
+            return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
+          }
+        }))), {}, {
           placeholder: placeholderText,
           readOnly: readOnly,
           onFocus: openSelect,
-          onClick: openSelect,
-          ...other
-        }), showClearButton && /*#__PURE__*/jsx(StyledButton, {
+          onClick: openSelect
+        }, other)), showClearButton && /*#__PURE__*/jsx(StyledButton, {
           variant: "ghost_icon",
           disabled: disabled || readOnly,
           "aria-label": 'clear options',
@@ -528,18 +535,18 @@ function AutocompleteInner(props, ref) {
             data: close,
             size: 16
           })
-        }), /*#__PURE__*/jsx(StyledButton, {
-          variant: "ghost_icon",
-          ...getToggleButtonProps({
-            disabled: disabled || readOnly
-          }),
+        }), /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread({
+          variant: "ghost_icon"
+        }, getToggleButtonProps({
+          disabled: disabled || readOnly
+        })), {}, {
           "aria-label": 'toggle options',
           title: "open",
           children: !readOnly && /*#__PURE__*/jsx(Icon, {
             data: isOpen ? arrow_drop_up : arrow_drop_down
           })
-        })]
-      }), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
+        }))]
+      })), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
       })]
@@ -547,6 +554,6 @@ function AutocompleteInner(props, ref) {
   });
 }
 
-const Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
+var Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
 
 export { Autocomplete };