@equinor/eds-core-react 2.1.0 → 2.2.0-beta.0

package/dist/eds-core-react.cjs

@@ -9,8 +9,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var react$1 = require('@floating-ui/react');
 var edsIcons = require('@equinor/eds-icons');
-var downshift = require('downshift');
 var reactVirtual = require('@tanstack/react-virtual');
+var downshift = require('downshift');
 var reactAria = require('react-aria');
 var calendar = require('@react-stately/calendar');
 var date = require('@internationalized/date');
@@ -3042,7 +3042,7 @@ const LeftAdornments = styled__default.default(Adornments).withConfig({
 })(({
   $token
 }) => styled.css(["left:0;padding-left:", ";"], $token.entities.adornment.spacings.left));
-const RightAdornments = styled__default.default(Adornments).withConfig({
+const RightAdornments$1 = styled__default.default(Adornments).withConfig({
   displayName: "Input__RightAdornments",
   componentId: "sc-1ykv024-4"
 })(({
@@ -3124,7 +3124,7 @@ const Input$4 = /*#__PURE__*/react.forwardRef(function Input({
         $paddingLeft: token.spacings.left,
         $paddingRight: token.spacings.right,
         ...inputProps
-      }), rightAdornments ? /*#__PURE__*/jsxRuntime.jsx(RightAdornments, {
+      }), rightAdornments ? /*#__PURE__*/jsxRuntime.jsx(RightAdornments$1, {
         ..._rightAdornmentProps,
         children: rightAdornments
       }) : null]
@@ -4853,17 +4853,19 @@ const Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog({
       onClose && onClose();
     }
   };
-  edsUtils.useGlobalKeyPress('Escape', e => {
+  const handleKeyDown = e => {
+    if (e.key !== 'Escape') return;
     e.preventDefault();
     if (isDismissable && onClose && open) {
-      onClose && onClose();
+      onClose();
     }
-  });
+  };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(StyledNativeDialog, {
       ref: combinedDialogRef,
       onMouseDown: handleDismiss,
+      onKeyDown: handleKeyDown,
       children: open && /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
         ...props,
         ref: ref,
@@ -9508,146 +9510,130 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch({
 });
 Switch.displayName = 'Switch';
 
-const {
-  typography,
-  colors,
-  shape: {
-    corners: {
-      borderRadius
-    }
-  },
-  spacings: {
-    comfortable: {
-      small: spacingSmall,
-      medium_small: spacingMediumSmall,
-      medium: spacingMedium,
-      large: spacingLarge,
-      x_large,
-      xxx_large
-    }
-  },
-  elevation: {
-    temporary_nav: boxShadow
+const AutocompleteContext = /*#__PURE__*/react.createContext(null);
+const useAutocompleteContext = () => {
+  const context = react.use(AutocompleteContext);
+  if (!context) {
+    throw new Error('Autocomplete compound components must be used within an Autocomplete component');
   }
-} = edsTokens.tokens;
-const selectTokens = {
-  background: colors.ui.background__default.rgba,
-  boxShadow,
-  spacings: {
-    top: '0',
-    right: spacingLarge,
-    bottom: '0',
-    left: spacingLarge
-  },
-  typography: {
-    ...typography.navigation.menu_title,
-    color: colors.text.static_icons__default.rgba
-  },
-  border: {
-    type: 'border',
-    radius: borderRadius
-  },
-  states: {
-    hover: {
-      background: colors.ui.background__medium.rgba
-    },
-    active: {
-      background: colors.interactive.primary__selected_highlight.rgba
-    },
-    disabled: {
-      typography: {
-        color: colors.interactive.disabled__text.rgba
-      }
-    }
-  },
-  variants: {
-    error: {
-      typography: {
-        color: colors.interactive.danger__text.rgba
-      }
-    },
-    warning: {
-      typography: {
-        color: colors.interactive.warning__text.rgba
-      }
-    },
-    success: {
-      typography: {
-        color: colors.interactive.success__text.rgba
-      }
-    }
-  },
-  entities: {
-    button: {
-      height: '24px',
-      width: '24px',
-      spacings: {
-        left: spacingSmall,
-        right: spacingSmall,
-        top: '6px'
-      }
-    },
-    label: {
-      minHeight: xxx_large,
-      spacings: {
-        left: '0',
-        right: '0',
-        top: spacingMedium,
-        bottom: spacingMedium
-      }
+  return context;
+};
+
+const RightAdornments = () => {
+  const {
+    readOnly,
+    selectedItems,
+    inputValue,
+    loading,
+    disabled,
+    getToggleButtonProps,
+    hideClearButton,
+    isOpen,
+    clear
+  } = useAutocompleteContext();
+  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
+      size: 16
+    }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
+      variant: "ghost_icon",
+      disabled: disabled || readOnly,
+      "aria-label": 'clear options',
+      title: "clear",
+      onClick: clear,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: edsIcons.close,
+        size: 16
+      })
+    }), !readOnly && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
+      variant: "ghost_icon",
+      ...getToggleButtonProps({
+        disabled: disabled || readOnly
+      }),
+      "aria-label": 'toggle options',
+      title: "open",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
+      })
+    })]
+  });
+};
+
+const UnstyledInput = styled__default.default.input.withConfig({
+  displayName: "MultipleInput__UnstyledInput",
+  componentId: "sc-1evc1aa-0"
+})(["flex:1;min-width:6rem;font-size:1rem;border:none;padding:0;background:inherit;&:focus-visible{outline:none;}"]);
+const ChipContainer = styled__default.default.div.withConfig({
+  displayName: "MultipleInput__ChipContainer",
+  componentId: "sc-1evc1aa-1"
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+const MultipleInput = () => {
+  const {
+    selectedItems,
+    selectionDisplay,
+    getLabel,
+    removeSelectedItem,
+    readOnly,
+    inputProps,
+    placeholderText,
+    variant,
+    hideClearButton,
+    restHtmlProps,
+    consolidatedEvents,
+    inputRef
+  } = useAutocompleteContext();
+  const chipRefs = react.useRef(new Map());
+  const handleChipRemove = (item, index, isKeyboardEvent) => {
+    if (isKeyboardEvent && selectedItems.length > 1) {
+      const isLastChip = index === selectedItems.length - 1;
+      const nextItem = selectedItems[isLastChip ? index - 1 : index + 1];
+      chipRefs.current.get(getLabel(nextItem))?.focus();
+    } else if (!isKeyboardEvent) {
+      inputRef.current?.focus();
+    }
+    removeSelectedItem(item);
+  };
+  const handleChipDelete = (item, index) => e => {
+    const isKeyboard = 'key' in e && e.key === 'Enter';
+    handleChipRemove(item, index, isKeyboard);
+  };
+  const handleChipClick = (item, index) => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleChipRemove(item, index, false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
+    as: 'div',
+    variant: variant,
+    rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
+    rightAdornments: /*#__PURE__*/jsxRuntime.jsx(RightAdornments, {}),
+    readOnly: readOnly,
+    style: {
+      height: 'auto',
+      minHeight: '36px'
     },
-    noOptions: {
-      typography: {
-        color: colors.text.static_icons__tertiary.rgba
-      }
-    }
-  },
-  modes: {
-    compact: {
-      spacings: {
-        left: spacingSmall,
-        right: spacingSmall,
-        top: '0',
-        bottom: '0'
-      },
-      entities: {
-        button: {
-          spacings: {
-            left: spacingSmall,
-            right: spacingSmall,
-            top: '0'
-          }
+    children: /*#__PURE__*/jsxRuntime.jsxs(ChipContainer, {
+      children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Chip, {
+        ref: el => {
+          if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
-        label: {
-          minHeight: x_large,
-          spacings: {
-            left: '0',
-            right: '0',
-            top: spacingSmall,
-            bottom: spacingSmall
-          }
-        }
-      }
-    }
-  }
+        style: {
+          outline: '1px solid var(--eds-color-accent-12)'
+        },
+        onDelete: handleChipDelete(item, index),
+        onClick: handleChipClick(item, index),
+        disabled: readOnly,
+        children: getLabel(item)
+      }, getLabel(item))), /*#__PURE__*/jsxRuntime.jsx(UnstyledInput, {
+        ...restHtmlProps,
+        ...inputProps,
+        ...consolidatedEvents,
+        placeholder: placeholderText,
+        readOnly: readOnly
+      })]
+    })
+  });
 };
-const multiSelect = mergeDeepRight(selectTokens, {
-  spacings: {
-    top: '0',
-    bottom: '0',
-    left: spacingMediumSmall,
-    right: spacingLarge
-  },
-  modes: {
-    compact: {
-      spacings: {
-        top: '0',
-        //xx_small,
-        bottom: '0'
-      }
-    }
-  }
-});
 
 const StyledListItem = styled__default.default.li.withConfig({
   displayName: "Option__StyledListItem",
@@ -9670,36 +9656,56 @@ const AutocompleteOptionLabel = styled__default.default.span.withConfig({
 }) => {
   return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], edsUtils.spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
 });
-function AutocompleteOptionInner(props, ref) {
+function Option({
+  indeterminate,
+  index,
+  item,
+  virtualItem
+}) {
   const {
-    value,
-    optionComponent,
     multiple,
-    isSelected,
-    indeterminate,
-    isDisabled,
+    availableItems,
+    highlightedIndex,
     multiline,
-    highlighted,
-    onClick,
-    'aria-selected': ariaSelected,
-    ...other
-  } = props;
+    optionDisabled,
+    selectedItemsLabels,
+    getLabel,
+    getItemProps,
+    optionComponent: _optionComponent,
+    rowVirtualizer
+  } = useAutocompleteContext();
+  const isDisabled = optionDisabled(item);
+  const label = getLabel(item);
+  const isSelected = selectedItemsLabels.includes(label);
+  const optionComponent = _optionComponent?.(item, isSelected);
+  const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
+  const itemProps = getItemProps({
+    ...(multiline && {
+      ref: rowVirtualizer.measureElement
+    }),
+    item,
+    index,
+    style: {
+      transform: `translateY(${virtualItem.start}px)`,
+      ...(!multiline && {
+        height: `${virtualItem.size}px`
+      })
+    }
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
-    ref: ref,
     $isdisabled: isDisabled ? 'true' : 'false',
     $highlighted: highlighted,
     "aria-hidden": isDisabled,
     $active: !multiple && isSelected ? 'true' : 'false',
-    onClick: e => {
-      !isDisabled && onClick(e);
-    },
-    "aria-selected": multiple ? isSelected : ariaSelected,
-    ...other,
+    "aria-setsize": availableItems.length,
+    "data-index": index,
+    "aria-posinset": index + 1,
+    ...itemProps,
     children: [multiple && /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
       disabled: isDisabled,
       checked: isSelected,
       indeterminate: indeterminate,
-      value: value,
+      value: label,
       onChange: () => {
         return null;
       }
@@ -9707,11 +9713,10 @@ function AutocompleteOptionInner(props, ref) {
       children: optionComponent
     }) : /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
-      children: value
+      children: label
     })]
   });
 }
-const AutocompleteOption = /*#__PURE__*/react.forwardRef(AutocompleteOptionInner);
 
 const StyledAddItemIcon = styled__default.default(Icon$1).withConfig({
   displayName: "AddNewOption__StyledAddItemIcon",
@@ -9725,25 +9730,43 @@ const StyledPlaceholder = styled__default.default.span.withConfig({
   displayName: "AddNewOption__StyledPlaceholder",
   componentId: "sc-8xtrxx-1"
 })(["color:", ";"], input$1.entities.placeholder.typography.color);
-function AddNewOptionInner(props, ref) {
+function AddNewOption({
+  index,
+  item
+}) {
   const {
-    value,
-    multiline,
+    availableItems,
     multiple,
-    highlighted,
-    onClick,
-    ...other
-  } = props;
+    typedInputValue,
+    highlightedIndex,
+    multiline,
+    rowVirtualizer,
+    getItemProps
+  } = useAutocompleteContext();
+  const value = typedInputValue.trim();
+  const isDisabled = !typedInputValue.trim();
+  const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
+  const itemProps = getItemProps({
+    ...(multiline && {
+      ref: rowVirtualizer.measureElement
+    }),
+    item,
+    index: index
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
-    ref: ref,
     $highlighted: highlighted,
-    onClick: e => {
-      onClick(e);
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 99
     },
-    ...other,
+    ...itemProps,
     "aria-label": `Add new option: ${value}`,
+    "data-index": 0,
+    "data-testid": 'add-item',
     "aria-live": "polite",
     "aria-selected": false,
+    "aria-setsize": availableItems.length,
     children: [/*#__PURE__*/jsxRuntime.jsx(StyledAddItemIcon, {
       multiple: multiple,
       data: edsIcons.add_box
@@ -9755,57 +9778,68 @@ function AddNewOptionInner(props, ref) {
     })]
   });
 }
-const AddNewOption = /*#__PURE__*/react.forwardRef(AddNewOptionInner);
-
-const Container$2 = styled__default.default.div.withConfig({
-  displayName: "Autocomplete__Container",
-  componentId: "sc-yvif0e-0"
-})(["position:relative;"]);
-const AllSymbol = Symbol('Select all');
-const AddSymbol = Symbol('Add new');
-
-// MARK: styled components
-const StyledList = styled__default.default(List$1).withConfig({
-  displayName: "Autocomplete__StyledList",
-  componentId: "sc-yvif0e-1"
-})(({
-  theme
-}) => styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border)));
-const StyledPopover = styled__default.default('div').withConfig({
-  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
-}).withConfig({
-  displayName: "Autocomplete__StyledPopover",
-  componentId: "sc-yvif0e-2"
-})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
-const HelperText = styled__default.default(TextfieldHelperText).withConfig({
-  displayName: "Autocomplete__HelperText",
-  componentId: "sc-yvif0e-3"
-})(["margin-top:8px;margin-left:8px;"]);
-const AutocompleteNoOptions = styled__default.default(AutocompleteOption).withConfig({
-  displayName: "Autocomplete__AutocompleteNoOptions",
-  componentId: "sc-yvif0e-4"
-})(({
-  theme
-}) => styled.css(["color:", ";"], theme.entities.noOptions.typography.color));
-const StyledButton$1 = styled__default.default(Button$1).withConfig({
-  displayName: "Autocomplete__StyledButton",
-  componentId: "sc-yvif0e-5"
-})(({
-  theme: {
-    entities: {
-      button
-    }
-  }
-}) => styled.css(["height:", ";width:", ";"], button.height, button.height));
-// MARK: outside functions
-// Typescript can struggle with parsing generic arrow functions in a .tsx file (see https://github.com/microsoft/TypeScript/issues/15713)
-// Workaround is to add a trailing , after T, which tricks the compiler, but also have to ignore prettier rule.
-// prettier-ignore
 
-const findIndex = ({
-  calc,
+function SelectAllOption({
+  item,
   index,
-  optionDisabled,
+  ref
+}) {
+  const {
+    availableItems,
+    allSelectedState,
+    highlightedIndex,
+    optionDisabled,
+    multiline,
+    getItemProps,
+    rowVirtualizer
+  } = useAutocompleteContext();
+  const value = 'Select all';
+  const isSelected = allSelectedState === 'ALL';
+  const isDisabled = optionDisabled(item);
+  const indeterminate = allSelectedState === 'SOME';
+  const highlighted = highlightedIndex === index && !isDisabled ? 'true' : 'false';
+  const itemProps = getItemProps({
+    ...(multiline && {
+      ref: rowVirtualizer.measureElement
+    }),
+    item,
+    index: index
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
+    ref: ref,
+    $isdisabled: isDisabled ? 'true' : 'false',
+    $highlighted: highlighted,
+    "aria-hidden": isDisabled,
+    $active: "false",
+    "aria-selected": isSelected,
+    "data-index": 0,
+    "data-testid": 'select-all',
+    "aria-setsize": availableItems.length,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 99
+    },
+    ...itemProps,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+      disabled: isDisabled,
+      checked: isSelected,
+      indeterminate: indeterminate,
+      value: value,
+      onChange: () => {
+        return null;
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
+      $multiline: multiline,
+      children: value
+    })]
+  });
+}
+
+const findIndex = ({
+  calc,
+  index,
+  optionDisabled,
   availableItems
 }) => {
   const nextItem = availableItems[index];
@@ -9820,17 +9854,6 @@ const findIndex = ({
   }
   return index;
 };
-const isEvent = (val, key) => /^on[A-Z](.*)/.test(key) && typeof val === 'function';
-function mergeEventsFromRight(props1, props2) {
-  const events1 = pickBy(isEvent, props1);
-  const events2 = pickBy(isEvent, props2);
-  return mergeWith((event1, event2) => {
-    return (...args) => {
-      event1(...args);
-      event2(...args);
-    };
-  }, events1, events2);
-}
 const findNextIndex = ({
   index,
   optionDisabled,
@@ -9877,8 +9900,19 @@ const findPrevIndex = ({
   }
   return prevIndex;
 };
+const isEvent = (val, key) => /^on[A-Z](.*)/.test(key) && typeof val === 'function';
+function mergeEventsFromRight(props1, props2) {
+  const events1 = pickBy(isEvent, props1);
+  const events2 = pickBy(isEvent, props2);
+  return mergeWith((event1, event2) => {
+    return (...args) => {
+      event1(...args);
+      event2(...args);
+    };
+  }, events1, events2);
+}
 
-/*When a user clicks the StyledList scrollbar, the input looses focus which breaks downshift
+/*When a user clicks the StyledList scrollbar, the input loses focus which breaks downshift
  * keyboard navigation in the list. This code returns focus to the input on mouseUp
  */
 const handleListFocus = e => {
@@ -9890,49 +9924,335 @@ const handleListFocus = e => {
     once: true
   });
 };
-const defaultOptionDisabled = () => false;
-// MARK: types
 
-// MARK: component
-function AutocompleteInner(props, ref) {
-  const [controlledHighlightedIndex, setControlledHighlightedIndex] = react.useState(0);
-  const [lastScrollOffset, setLastScrollOffset] = react.useState(0);
+function EmptyOption() {
   const {
-    options = [],
-    totalOptions,
-    label,
-    meta,
-    className,
-    style,
-    disabled = false,
-    readOnly = false,
-    loading = false,
-    hideClearButton = false,
-    onOptionsChange,
-    onAddNewOption,
-    onInputChange,
-    selectedOptions: _selectedOptions,
+    noOptionsText
+  } = useAutocompleteContext();
+  return /*#__PURE__*/jsxRuntime.jsx(StyledListItem, {
+    $isdisabled: "true",
+    $highlighted: "false",
+    "aria-hidden": true,
+    $active: "false",
+    children: /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
+      $multiline: false,
+      children: noOptionsText
+    })
+  });
+}
+
+const OptionList = ({
+  refs,
+  strategy,
+  x,
+  y,
+  update
+}) => {
+  const {
+    getFloatingProps
+  } = react$1.useInteractions([]);
+  const {
+    isOpen,
+    getMenuProps,
     multiple,
-    itemToKey: _itemToKey,
-    itemCompare: _itemCompare,
-    allowSelectAll,
-    initialSelectedOptions: _initialSelectedOptions = [],
-    optionDisabled = defaultOptionDisabled,
-    optionsFilter,
-    autoWidth,
-    placeholder,
-    optionLabel,
-    clearSearchOnChange = true,
-    multiline = false,
-    dropdownHeight = 300,
-    optionComponent,
-    helperText,
-    helperIcon,
-    noOptionsText = 'No options',
+    scrollContainer,
+    dropdownHeight,
+    availableItems,
+    noOptionsText,
+    rowVirtualizer,
+    onAddNewOption
+  } = useAutocompleteContext();
+  react.useEffect(() => {
+    if (refs.reference.current && refs.floating.current && isOpen) {
+      return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, isOpen]);
+
+  // MARK: popover toggle
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [isOpen, refs.floating]);
+  const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
+  const floatingProps = getFloatingProps({
+    ref: refs.setFloating,
+    onFocus: handleListFocus,
+    style: {
+      position: strategy,
+      top: y || 0,
+      left: x || 0
+    }
+  });
+  const menuProps = getMenuProps({
+    'aria-multiselectable': multiple ? 'true' : null,
+    ref: scrollContainer,
+    style: {
+      maxHeight: `${dropdownHeight}px`
+    }
+  }, {
+    suppressRefError: true
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPopover, {
+    popover: "manual",
+    ...floatingProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, {
+      ...menuProps,
+      children: [showNoOptions && /*#__PURE__*/jsxRuntime.jsx(AutocompleteNoOptions, {}), isOpen && /*#__PURE__*/jsxRuntime.jsx("li", {
+        role: "presentation",
+        style: {
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          margin: '0',
+          gridArea: '1 / -1'
+        }
+      }, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(virtualItem => {
+        const index = virtualItem.index;
+        const item = availableItems[index];
+        if (item === AllSymbol) {
+          return /*#__PURE__*/jsxRuntime.jsx(SelectAllOption, {
+            item: item,
+            index: index
+          }, "select-all");
+        }
+        if (item === AddSymbol && onAddNewOption) {
+          return /*#__PURE__*/jsxRuntime.jsx(AddNewOption, {
+            item: item,
+            index: index
+          }, "add-item");
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(Option, {
+          item: item,
+          virtualItem: virtualItem,
+          index: index
+        }, virtualItem.key);
+      })]
+    })
+  });
+};
+const StyledPopover = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "OptionList__StyledPopover",
+  componentId: "sc-t6tp7k-0"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
+const StyledList = styled__default.default(List$1).withConfig({
+  displayName: "OptionList__StyledList",
+  componentId: "sc-t6tp7k-1"
+})(({
+  theme
+}) => styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border)));
+const AutocompleteNoOptions = styled__default.default(EmptyOption).withConfig({
+  displayName: "OptionList__AutocompleteNoOptions",
+  componentId: "sc-t6tp7k-2"
+})(({
+  theme
+}) => styled.css(["color:", ";"], theme.entities.noOptions.typography.color));
+
+const SingleInput = () => {
+  const {
+    consolidatedEvents,
+    inputProps,
     variant,
-    onClear,
-    ...other
-  } = props;
+    hideClearButton,
+    restHtmlProps,
+    placeholder,
+    readOnly
+  } = useAutocompleteContext();
+  return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
+    variant: variant,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
+    rightAdornments: /*#__PURE__*/jsxRuntime.jsx(RightAdornments, {}),
+    ...restHtmlProps,
+    ...consolidatedEvents,
+    ...inputProps
+  });
+};
+
+const {
+  typography,
+  colors,
+  shape: {
+    corners: {
+      borderRadius
+    }
+  },
+  spacings: {
+    comfortable: {
+      small: spacingSmall,
+      medium_small: spacingMediumSmall,
+      medium: spacingMedium,
+      large: spacingLarge,
+      x_large,
+      xxx_large
+    }
+  },
+  elevation: {
+    temporary_nav: boxShadow
+  }
+} = edsTokens.tokens;
+const selectTokens = {
+  background: colors.ui.background__default.rgba,
+  boxShadow,
+  spacings: {
+    top: '0',
+    right: spacingLarge,
+    bottom: '0',
+    left: spacingLarge
+  },
+  typography: {
+    ...typography.navigation.menu_title,
+    color: colors.text.static_icons__default.rgba
+  },
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  states: {
+    hover: {
+      background: colors.ui.background__medium.rgba
+    },
+    active: {
+      background: colors.interactive.primary__selected_highlight.rgba
+    },
+    disabled: {
+      typography: {
+        color: colors.interactive.disabled__text.rgba
+      }
+    }
+  },
+  variants: {
+    error: {
+      typography: {
+        color: colors.interactive.danger__text.rgba
+      }
+    },
+    warning: {
+      typography: {
+        color: colors.interactive.warning__text.rgba
+      }
+    },
+    success: {
+      typography: {
+        color: colors.interactive.success__text.rgba
+      }
+    }
+  },
+  entities: {
+    button: {
+      height: '24px',
+      width: '24px',
+      spacings: {
+        left: spacingSmall,
+        right: spacingSmall,
+        top: '6px'
+      }
+    },
+    label: {
+      minHeight: xxx_large,
+      spacings: {
+        left: '0',
+        right: '0',
+        top: spacingMedium,
+        bottom: spacingMedium
+      }
+    },
+    noOptions: {
+      typography: {
+        color: colors.text.static_icons__tertiary.rgba
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        left: spacingSmall,
+        right: spacingSmall,
+        top: '0',
+        bottom: '0'
+      },
+      entities: {
+        button: {
+          spacings: {
+            left: spacingSmall,
+            right: spacingSmall,
+            top: '0'
+          }
+        },
+        label: {
+          minHeight: x_large,
+          spacings: {
+            left: '0',
+            right: '0',
+            top: spacingSmall,
+            bottom: spacingSmall
+          }
+        }
+      }
+    }
+  }
+};
+const multiSelect = mergeDeepRight(selectTokens, {
+  spacings: {
+    top: '0',
+    bottom: '0',
+    left: spacingMediumSmall,
+    right: spacingLarge
+  },
+  modes: {
+    compact: {
+      spacings: {
+        top: '0',
+        //xx_small,
+        bottom: '0'
+      }
+    }
+  }
+});
+
+const useAutocomplete = ({
+  options = [],
+  totalOptions,
+  label,
+  meta,
+  className,
+  style,
+  disabled = false,
+  readOnly = false,
+  loading = false,
+  hideClearButton = false,
+  onOptionsChange,
+  onAddNewOption,
+  onInputChange,
+  selectedOptions: _selectedOptions,
+  selectionDisplay = 'summary',
+  multiple,
+  itemToKey: _itemToKey,
+  itemCompare: _itemCompare,
+  allowSelectAll,
+  initialSelectedOptions: _initialSelectedOptions = [],
+  optionDisabled = defaultOptionDisabled,
+  optionsFilter,
+  autoWidth,
+  placeholder,
+  optionLabel,
+  clearSearchOnChange = true,
+  multiline = false,
+  dropdownHeight = 300,
+  optionComponent,
+  helperText,
+  helperIcon,
+  noOptionsText = 'No options',
+  variant,
+  onClear,
+  ref,
+  ...other
+}) => {
+  const [lastScrollOffset, setLastScrollOffset] = react.useState(0);
+  const [controlledHighlightedIndex, setControlledHighlightedIndex] = react.useState(0);
   const itemCompare = react.useMemo(() => {
     if (_itemCompare && _itemToKey) {
       console.error('Error: Specifying both itemCompare and itemToKey. itemCompare is deprecated, while itemToKey should be used instead of it. Please only use one.');
@@ -10022,7 +10342,6 @@ function AutocompleteInner(props, ref) {
     selectedItems,
     setSelectedItems
   } = downshift.useMultipleSelection(multipleSelectionProps);
-
   // MARK: select all logic
   const enabledItems = react.useMemo(() => {
     const disabledItemsSet = new Set(inputOptions.filter(optionDisabled));
@@ -10330,6 +10649,7 @@ function AutocompleteInner(props, ref) {
     const showPlaceholder = placeholderText && selectedItems.length === 0;
     const optionCount = totalOptions || inputOptions.length;
     placeholderText = showPlaceholder ? placeholderText : `${selectedItems.length}/${optionCount} selected`;
+    if (selectionDisplay === 'chips') placeholderText = placeholder;
     comboBoxProps = {
       ...comboBoxProps,
       selectedItem: null,
@@ -10412,26 +10732,131 @@ function AutocompleteInner(props, ref) {
       }
     };
   }
+  const _comboBoxProps = downshift.useCombobox(comboBoxProps);
+  const clear = () => {
+    if (onClear) onClear();
+    _comboBoxProps.reset();
+    //dont clear items if they are selected and disabled
+    setSelectedItems([...selectedDisabledItemsSet]);
+    setTypedInputValue('');
+    inputRef.current?.focus();
+  };
+  const inputProps = _comboBoxProps.getInputProps(getDropdownProps({
+    preventKeyAction: multiple ? _comboBoxProps.isOpen : undefined,
+    disabled,
+    ref: inputRef
+  }));
+  const consolidatedEvents = mergeEventsFromRight(other, inputProps);
+  const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
+  return {
+    ..._comboBoxProps,
+    getDropdownProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    setSelectedItems,
+    clear,
+    availableItems,
+    getLabel,
+    scrollContainer,
+    rowVirtualizer,
+    allSelectedState,
+    toggleAllSelected,
+    typedInputValue,
+    inputRef,
+    token,
+    tokens,
+    placeholderText,
+    readOnly,
+    inputProps,
+    consolidatedEvents,
+    multiple,
+    disabled,
+    optionDisabled,
+    onAddNewOption,
+    options,
+    totalOptions,
+    label,
+    meta,
+    className,
+    style,
+    loading,
+    hideClearButton,
+    onOptionsChange,
+    onInputChange,
+    selectedOptions,
+    selectionDisplay,
+    itemToKey,
+    itemCompare,
+    allowSelectAll,
+    initialSelectedOptions,
+    optionsFilter,
+    autoWidth,
+    placeholder,
+    optionLabel,
+    clearSearchOnChange,
+    multiline,
+    dropdownHeight,
+    optionComponent,
+    helperText,
+    helperIcon,
+    noOptionsText,
+    variant,
+    onClear,
+    selectedItemsLabels,
+    restHtmlProps: other
+  };
+};
+
+const Container$2 = styled__default.default.div.withConfig({
+  displayName: "Autocomplete__Container",
+  componentId: "sc-yvif0e-0"
+})(["position:relative;"]);
+const AllSymbol = Symbol('Select all');
+const AddSymbol = Symbol('Add new');
+const HelperText = styled__default.default(TextfieldHelperText).withConfig({
+  displayName: "Autocomplete__HelperText",
+  componentId: "sc-yvif0e-1"
+})(["margin-top:8px;margin-left:8px;"]);
+const StyledButton$1 = styled__default.default(Button$1).withConfig({
+  displayName: "Autocomplete__StyledButton",
+  componentId: "sc-yvif0e-2"
+})(({
+  theme: {
+    entities: {
+      button
+    }
+  }
+}) => styled.css(["height:", ";width:", ";"], button.height, button.height));
+const defaultOptionDisabled = () => false;
+// MARK: types
+
+// MARK: component
+function Autocomplete({
+  ...props
+}) {
+  const autocompleteProps = useAutocomplete({
+    ...props,
+    ref: props.ref
+  });
   const {
-    isOpen,
-    getToggleButtonProps,
     getLabelProps,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    inputValue,
-    reset: resetCombobox
-  } = downshift.useCombobox(comboBoxProps);
+    token,
+    tokens,
+    autoWidth,
+    className,
+    style,
+    label,
+    meta,
+    multiple,
+    disabled,
+    variant,
+    helperIcon,
+    helperText
+  } = autocompleteProps;
 
   // MARK: floating-ui setup
-  const {
-    x,
-    y,
-    refs,
-    update,
-    strategy
-  } = react$1.useFloating({
+  const floatingProps = react$1.useFloating({
     placement: 'bottom-start',
     middleware: [react$1.offset(4), react$1.flip({
       boundary: typeof document === 'undefined' ? undefined : document?.body
@@ -10448,220 +10873,36 @@ function AutocompleteInner(props, ref) {
       padding: 10
     })]
   });
-  const {
-    getFloatingProps
-  } = react$1.useInteractions([]);
-  react.useEffect(() => {
-    if (refs.reference.current && refs.floating.current && isOpen) {
-      return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
-    }
-  }, [refs.reference, refs.floating, update, isOpen]);
-
-  // MARK: popover toggle
-  edsUtils.useIsomorphicLayoutEffect(() => {
-    if (isOpen) {
-      refs.floating.current?.showPopover();
-    } else {
-      refs.floating.current?.hidePopover();
-    }
-  }, [isOpen, refs.floating]);
-  const clear = () => {
-    if (onClear) onClear();
-    resetCombobox();
-    //dont clear items if they are selected and disabled
-    setSelectedItems([...selectedDisabledItemsSet]);
-    setTypedInputValue('');
-    inputRef.current?.focus();
-  };
-  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
-  const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
-  const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
-
-  // MARK: optionsList
-  const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledPopover, {
-    popover: "manual",
-    ...getFloatingProps({
-      ref: refs.setFloating,
-      onFocus: handleListFocus,
-      style: {
-        position: strategy,
-        top: y || 0,
-        left: x || 0
-      }
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, {
-      ...getMenuProps({
-        'aria-multiselectable': multiple ? 'true' : null,
-        ref: scrollContainer,
-        style: {
-          maxHeight: `${dropdownHeight}px`
-        }
-      }, {
-        suppressRefError: true
-      }),
-      children: [showNoOptions && /*#__PURE__*/jsxRuntime.jsx(AutocompleteNoOptions, {
-        value: noOptionsText,
-        multiple: false,
-        multiline: false,
-        highlighted: 'false',
-        isSelected: false,
-        isDisabled: true
-      }), isOpen && /*#__PURE__*/jsxRuntime.jsx("li", {
-        role: "presentation",
-        style: {
-          height: `${rowVirtualizer.getTotalSize()}px`,
-          margin: '0',
-          gridArea: '1 / -1'
-        }
-      }, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(virtualItem => {
-        const index = virtualItem.index;
-        const item = availableItems[index];
-        const label = getLabel(item);
-        const isDisabled = optionDisabled(item);
-        const isSelected = selectedItemsLabels.includes(label);
-        if (item === AllSymbol) {
-          return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
-            "data-index": 0,
-            "data-testid": 'select-all',
-            value: 'Select all',
-            "aria-setsize": availableItems.length,
-            multiple: true,
-            isSelected: allSelectedState === 'ALL',
-            indeterminate: allSelectedState === 'SOME',
-            highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
-            isDisabled: false,
-            multiline: multiline,
-            onClick: toggleAllSelected,
-            style: {
-              position: 'sticky',
-              top: 0,
-              zIndex: 99
-            },
-            ...getItemProps({
-              ...(multiline && {
-                ref: rowVirtualizer.measureElement
-              }),
-              item,
-              index: index
-            })
-          }, 'select-all');
-        }
-        if (item === AddSymbol && onAddNewOption) {
-          const isDisabled = !typedInputValue.trim();
-          return /*#__PURE__*/jsxRuntime.jsx(AddNewOption, {
-            "data-index": 0,
-            "data-testid": 'add-item',
-            "aria-setsize": availableItems.length,
-            multiple: multiple,
-            highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
-            multiline: multiline,
-            style: {
-              position: 'sticky',
-              top: 0,
-              zIndex: 99
-            },
-            ...getItemProps({
-              ...(multiline && {
-                ref: rowVirtualizer.measureElement
-              }),
-              item,
-              index: index
-            }),
-            value: typedInputValue.trim()
-          }, 'add-item');
-        }
-        return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
-          "data-index": index,
-          "aria-setsize": availableItems.length,
-          "aria-posinset": index + 1,
-          value: label,
-          multiple: multiple,
-          highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
-          isSelected: isSelected,
-          isDisabled: isDisabled,
-          multiline: multiline,
-          optionComponent: optionComponent?.(item, isSelected),
-          ...getItemProps({
-            ...(multiline && {
-              ref: rowVirtualizer.measureElement
-            }),
-            item,
-            index,
-            style: {
-              transform: `translateY(${virtualItem.start}px)`,
-              ...(!multiline && {
-                height: `${virtualItem.size}px`
-              })
-            }
-          })
-        }, virtualItem.key);
-      })]
-    })
-  });
-  const inputProps = getInputProps(getDropdownProps({
-    preventKeyAction: multiple ? isOpen : undefined,
-    disabled,
-    ref: inputRef
-  }));
-  const consolidatedEvents = mergeEventsFromRight(other, inputProps);
 
   // MARK: input
-  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
-      className: className,
-      style: style,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, {
-        ...getLabelProps(),
-        label: label,
-        meta: meta,
-        disabled: disabled
-      }), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
-        ref: refs.setReference,
-        children: /*#__PURE__*/jsxRuntime.jsx(Input$4, {
-          ...inputProps,
-          variant: variant,
-          placeholder: placeholderText,
-          readOnly: readOnly,
-          rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
-          rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
-              size: 16
-            }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
-              variant: "ghost_icon",
-              disabled: disabled || readOnly,
-              "aria-label": 'clear options',
-              title: "clear",
-              onClick: clear,
-              children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
-                data: edsIcons.close,
-                size: 16
-              })
-            }), !readOnly && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
-              variant: "ghost_icon",
-              ...getToggleButtonProps({
-                disabled: disabled || readOnly
-              }),
-              "aria-label": 'toggle options',
-              title: "open",
-              children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
-                data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
-              })
-            })]
-          }),
-          ...other,
-          ...consolidatedEvents
-        })
-      }), helperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, {
-        color: variant ? tokens.variants[variant].typography.color : undefined,
-        text: helperText,
-        icon: helperIcon
-      }), optionsList]
+  return /*#__PURE__*/jsxRuntime.jsx(AutocompleteContext.Provider, {
+    value: {
+      ...autocompleteProps
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+      theme: token,
+      children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
+        className: className,
+        style: style,
+        children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, {
+          ...getLabelProps(),
+          label: label,
+          meta: meta,
+          disabled: disabled
+        }), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+          ref: floatingProps.refs.setReference,
+          children: multiple ? /*#__PURE__*/jsxRuntime.jsx(MultipleInput, {}) : /*#__PURE__*/jsxRuntime.jsx(SingleInput, {})
+        }), helperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, {
+          color: variant ? tokens.variants[variant].typography.color : undefined,
+          text: helperText,
+          icon: helperIcon
+        }), /*#__PURE__*/jsxRuntime.jsx(OptionList, {
+          ...floatingProps
+        })]
+      })
     })
   });
 }
-// MARK: exported component
-const Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
 
 const {
   colors: {
@@ -12156,12 +12397,22 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
         if (!isIconTarget && (event.code === 'Space' || event.code === 'Enter')) {
           setIsOpen(true);
         }
+        if (event.key === 'Escape' && isOpen) {
+          event.stopPropagation();
+          event.preventDefault();
+          setIsOpen(false);
+        }
       },
       ...props,
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
       open: isOpen ?? false,
       onClose: () => setIsOpen(false),
+      onKeyDown: e => {
+        if (e.key !== 'Escape') return;
+        e.stopPropagation();
+        e.preventDefault();
+      },
       anchorEl: anchorEl,
       placement: 'bottom-start',
       children: calendar
@@ -12837,6 +13088,8 @@ exports.AccordionHeaderActions = AccordionHeaderActions;
 exports.AccordionHeaderTitle = AccordionHeaderTitle;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
+exports.AddSymbol = AddSymbol;
+exports.AllSymbol = AllSymbol;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Banner = Banner;
@@ -12903,6 +13156,7 @@ exports.Slider = Slider;
 exports.Snackbar = Snackbar;
 exports.SnackbarAction = SnackbarAction;
 exports.StarProgress = StarProgress;
+exports.StyledButton = StyledButton$1;
 exports.Switch = Switch;
 exports.Tab = Tab;
 exports.TabList = TabList;
@@ -12928,6 +13182,7 @@ exports.TopbarCustomContent = CustomContent;
 exports.TopbarHeader = Header$2;
 exports.Typography = Typography;
 exports.TypographyNext = TypographyNext;
+exports.defaultOptionDisabled = defaultOptionDisabled;
 exports.useEds = useEds;
 exports.useInputField = useInputField;
 exports.useSideBar = useSideBar;