@entur/dropdown 5.0.0-beta.3 → 5.0.0

package/dist/dropdown.esm.js

@@ -451,7 +451,7 @@ var useDownshift = function useDownshift() {
 };
 
 var _excluded$c = ["items"];
-var DropdownList$1 = function DropdownList(_ref) {
+var DropdownListDeprecated = function DropdownListDeprecated(_ref) {
   var items = _ref.items,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var _useDownshift = useDownshift(),
@@ -487,7 +487,7 @@ var DropdownList$1 = function DropdownList(_ref) {
   }) : null);
 };
 
-var DropdownToggleButton$1 = function DropdownToggleButton() {
+var DropdownDeprecatedToggleButton = function DropdownDeprecatedToggleButton() {
   var _useDownshift = useDownshift(),
     getToggleButtonProps = _useDownshift.getToggleButtonProps,
     isOpen = _useDownshift.isOpen;
@@ -502,7 +502,7 @@ var DropdownToggleButton$1 = function DropdownToggleButton() {
 };
 
 var _excluded$b = ["className", "children"];
-var DropdownLoadingDots = function DropdownLoadingDots(_ref) {
+var DropdownDeprecatedLoadingDots = function DropdownDeprecatedLoadingDots(_ref) {
   var className = _ref.className,
     children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
@@ -512,7 +512,7 @@ var DropdownLoadingDots = function DropdownLoadingDots(_ref) {
 };
 
 var _excluded$a = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
-var BaseDropdown = function BaseDropdown(_ref) {
+var BaseDropdownDeprecated = function BaseDropdownDeprecated(_ref) {
   var children = _ref.children,
     className = _ref.className,
     items = _ref.items,
@@ -545,7 +545,7 @@ var BaseDropdown = function BaseDropdown(_ref) {
     isFilled: isFilled,
     labelProps: getLabelProps(),
     disableLabelAnimation: disableLabelAnimation
-  }, rest), children), React.createElement(DropdownList$1, _extends({
+  }, rest), children), React.createElement(DropdownListDeprecated, _extends({
     items: items,
     style: _extends({
       position: 'absolute',
@@ -576,16 +576,16 @@ var Appendix$1 = function Appendix(_ref3) {
     loadingText = _ref3.loadingText,
     readOnly = _ref3.readOnly;
   if (loading) {
-    return React.createElement(DropdownLoadingDots, null, loadingText);
+    return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
   }
   if (readOnly) {
     return null;
   }
-  return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownToggleButton$1, null)) : React.createElement(DropdownToggleButton$1, null);
+  return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownDeprecatedToggleButton, null)) : React.createElement(DropdownDeprecatedToggleButton, null);
 };
 
 var _excluded$9 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
-var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var RegularDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
@@ -610,7 +610,7 @@ var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isOpen = _useDownshift.isOpen,
     highlightedIndex = _useDownshift.highlightedIndex,
     setHighlightedIndex = _useDownshift.setHighlightedIndex;
-  return React.createElement(BaseDropdown, _extends({
+  return React.createElement(BaseDropdownDeprecated, _extends({
     disabled: disabled,
     listStyle: listStyle,
     items: items,
@@ -671,7 +671,17 @@ function LowerCaseFilterTest(item, input) {
   var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
   return inputRegex.test(item.label);
 }
-var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+/**
+ * @deprecated
+ * New SearchableDropdown available
+ *
+ * migration guide to new dropdown:
+ * - change import from 'DropdownDeprecated' to 'Dropdown'
+ * - change from 'value' to 'selectedItem'
+ *  + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
+ * - 'onChange' must update value of 'selectedItem'
+ */
+var SearchableDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     className = _ref.className,
@@ -712,7 +722,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return itemFilter(item, inputValue);
     });
   }, [inputValue, items, itemFilter]);
-  return React.createElement(BaseDropdown, {
+  return React.createElement(BaseDropdownDeprecated, {
     items: filteredItems,
     disabled: disabled,
     readOnly: readOnly,
@@ -754,7 +764,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var DropdownInputGroup = function DropdownInputGroup(_ref) {
+var DropdownInputGroupDeprecated = function DropdownInputGroupDeprecated(_ref) {
   var children = _ref.children,
     feedback = _ref.feedback,
     variant = _ref.variant,
@@ -892,7 +902,18 @@ debounceTimeout) {
 };
 
 var _excluded$7 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
-var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+/**
+ * @deprecated
+ * New Dropdown available
+ *
+ * migration guide to new dropdown:
+ * - change import from 'DropdownDeprecated' to 'Dropdown'
+ *  + if 'searchable', switch to 'SearchableDropdown'
+ * - change from 'value' to 'selectedItem'
+ *  + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
+ * - 'onChange' must update value of 'selectedItem'
+ */
+var DropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
     debounceTimeout = _ref.debounceTimeout,
     disabled = _ref.disabled,
@@ -927,7 +948,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedItem = value === undefined ? undefined : normalizedItems.find(function (item) {
     return value === item.value;
   }) || null;
-  var RenderedDropdown = searchable ? SearchableDropdown : RegularDropdown;
+  var RenderedDropdown = searchable ? SearchableDropdownDeprecated : RegularDropdownDeprecated;
   var searchAbleProps = searchable ? {
     itemFilter: itemFilter,
     name: rest.name,
@@ -945,7 +966,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     style: style,
     searchable: searchable
-  }, rest), React.createElement(DropdownInputGroup, {
+  }, rest), React.createElement(DropdownInputGroupDeprecated, {
     feedback: feedback,
     variant: variant
   }, React.createElement(RenderedDropdown, _extends({
@@ -966,68 +987,10 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, searchAbleProps))));
 });
 
-var _excluded$6 = ["className", "disabled", "readOnly", "items", "loadingText", "prepend", "style", "label", "variant", "feedback", "disableLabelAnimation"];
-var NativeDropdown = function NativeDropdown(_ref) {
-  var className = _ref.className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    items = _ref.items,
-    loadingText = _ref.loadingText,
-    prepend = _ref.prepend,
-    style = _ref.style,
-    label = _ref.label,
-    variant = _ref.variant,
-    feedback = _ref.feedback,
-    disableLabelAnimation = _ref.disableLabelAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var _useResolvedItems = useResolvedItems(items),
-    normalizedItems = _useResolvedItems.items,
-    loading = _useResolvedItems.loading;
-  var rightSideIcon = React.createElement(DownArrowIcon, {
-    inline: true,
-    "aria-hidden": "true"
-  });
-  if (disabled || readOnly) {
-    rightSideIcon = null;
-  } else if (loading) {
-    rightSideIcon = React.createElement(DropdownLoadingDots, {
-      "aria-hidden": "true"
-    }, loadingText);
-  }
-  var nativeDropdownId = useRandomId('eds-native-dropdown');
-  return React.createElement(BaseFormControl, {
-    disabled: disabled,
-    readOnly: readOnly,
-    prepend: prepend,
-    append: rightSideIcon,
-    className: className,
-    style: style,
-    label: label,
-    labelId: nativeDropdownId,
-    variant: variant,
-    feedback: feedback,
-    disableLabelAnimation: disableLabelAnimation,
-    isFilled: true
-  }, React.createElement("select", _extends({
-    "aria-invalid": variant === 'error',
-    "aria-labelledby": nativeDropdownId,
-    "aria-busy": loading,
-    className: "eds-form-control eds-dropdown",
-    disabled: disabled || readOnly
-  }, rest), normalizedItems.map(function (item) {
-    return React.createElement("option", {
-      key: item.value,
-      value: item.value
-    }, item.label);
-  })));
-};
-
-var _excluded$5 = ["className", "clearable", "debounceTimeout", "disabled", "feedback", "initialSelectedItems", "items", "itemsSelectedLabel", "label", "listStyle", "loading", "loadingText", "onChange", "openOnFocus", "readOnly", "style", "variant"];
-var MultiSelectContext = /*#__PURE__*/React.createContext(null);
-var useMultiSelectContext = function useMultiSelectContext() {
-  var context = React.useContext(MultiSelectContext);
+var _excluded$6 = ["className", "clearable", "debounceTimeout", "disabled", "feedback", "initialSelectedItems", "items", "itemsSelectedLabel", "label", "listStyle", "loading", "loadingText", "onChange", "openOnFocus", "readOnly", "style", "variant"];
+var MultiSelectOldContext = /*#__PURE__*/React.createContext(null);
+var useMultiSelectOldContext = function useMultiSelectOldContext() {
+  var context = React.useContext(MultiSelectOldContext);
   if (!context) {
     throw new Error('You need to wrap your component in a DownshiftProvider');
   }
@@ -1039,8 +1002,8 @@ actionAndChanges) {
   var changes = actionAndChanges.changes,
     type = actionAndChanges.type;
   switch (type) {
-    case useSelect.stateChangeTypes.MenuKeyDownEnter:
-    case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
     case useSelect.stateChangeTypes.ItemClick:
       return _extends({}, changes, {
         isOpen: true,
@@ -1050,7 +1013,17 @@ actionAndChanges) {
       return changes;
   }
 }
-var MultiSelect = function MultiSelect(_ref) {
+/**
+ * @deprecated
+ * New MultiSelect available
+ *
+ * migration guide to new dropdown:
+ * - change import from 'MultiSelectDeprecated' to 'MultiSelect'
+ * - add state containing selected items to 'selectedItems' prop
+ *  + type of 'selectedItems' is 'NormalizedDropdownType[]' and does not include 'string'
+ * - 'onChange' must update value of 'selectedItem'
+ */
+var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
@@ -1080,7 +1053,7 @@ var MultiSelect = function MultiSelect(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     style = _ref.style,
     variant = _ref.variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useResolvedItems = useResolvedItems(input, debounceTimeout),
     items = _useResolvedItems.items;
   var _useState = useState(initialSelectedItems),
@@ -1126,7 +1099,7 @@ var MultiSelect = function MultiSelect(_ref) {
     openMenu = _useSelect.openMenu;
   var buttonText = selectedItems.length ? itemsSelectedLabel(selectedItems) : '';
   var multiSelectId = useRandomId('eds-multiselect');
-  return React.createElement(MultiSelectContext.Provider, {
+  return React.createElement(MultiSelectOldContext.Provider, {
     value: {
       isOpen: isOpen,
       reset: reset,
@@ -1202,8 +1175,8 @@ var MultiSelect = function MultiSelect(_ref) {
 };
 var ClearButton = function ClearButton(_ref3) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
-  var _useMultiSelectContex = useMultiSelectContext(),
-    reset = _useMultiSelectContex.reset;
+  var _useMultiSelectOldCon = useMultiSelectOldContext(),
+    reset = _useMultiSelectOldCon.reset;
   return React.createElement(React.Fragment, null, React.createElement("button", _extends({
     className: "eds-dropdown__clear-button",
     type: "button",
@@ -1221,7 +1194,7 @@ var Appendix = function Appendix(_ref4) {
     readOnly = _ref4.readOnly,
     hasSelected = _ref4.hasSelected;
   if (loading) {
-    return React.createElement(DropdownLoadingDots, null, loadingText);
+    return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
   }
   if (readOnly) {
     return null;
@@ -1229,11 +1202,11 @@ var Appendix = function Appendix(_ref4) {
   return hasSelected ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
 };
 var DropdownToggleButton = function DropdownToggleButton() {
-  var _useMultiSelectContex2 = useMultiSelectContext(),
-    getToggleButtonProps = _useMultiSelectContex2.getToggleButtonProps,
-    isOpen = _useMultiSelectContex2.isOpen,
-    openMenu = _useMultiSelectContex2.openMenu,
-    openOnFocus = _useMultiSelectContex2.openOnFocus;
+  var _useMultiSelectOldCon2 = useMultiSelectOldContext(),
+    getToggleButtonProps = _useMultiSelectOldCon2.getToggleButtonProps,
+    isOpen = _useMultiSelectOldCon2.isOpen,
+    openMenu = _useMultiSelectOldCon2.openMenu,
+    openOnFocus = _useMultiSelectOldCon2.openOnFocus;
   return React.createElement("button", _extends({}, getToggleButtonProps({
     className: classNames('eds-dropdown__toggle-button', {
       'eds-dropdown__toggle-button--open': isOpen
@@ -1265,33 +1238,51 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
-var _excluded$4 = ["selectedItems", "listItems", "inputValue", "isOpen", "getMenuProps", "getItemProps", "highlightedIndex", "showSelectAllInList", "loading", "selectAllCheckboxState", "selectAllItem", "listStyle", "noMatchesText", "loadingText", "selectedItemAriaLabel"];
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
 var DropdownList = function DropdownList(_ref) {
-  var selectedItems = _ref.selectedItems,
-    listItems = _ref.listItems,
-    isOpen = _ref.isOpen,
-    getMenuProps = _ref.getMenuProps,
+  var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
+    ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
+    _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
+    ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
     getItemProps = _ref.getItemProps,
+    getMenuProps = _ref.getMenuProps,
+    isOpen = _ref.isOpen,
     highlightedIndex = _ref.highlightedIndex,
+    listItems = _ref.listItems,
+    listStyle = _ref.listStyle,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
-    selectAllCheckboxState = _ref.selectAllCheckboxState,
-    selectAllItem = _ref.selectAllItem,
-    listStyle = _ref.listStyle,
-    _ref$noMatchesText = _ref.noMatchesText,
-    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen treff for søket' : _ref$noMatchesText,
     _ref$loadingText = _ref.loadingText,
     loadingText = _ref$loadingText === void 0 ? 'Laster inn …' : _ref$loadingText,
-    _ref$selectedItemAria = _ref.selectedItemAriaLabel,
-    selectedItemAriaLabel = _ref$selectedItemAria === void 0 ? ', valgt element' : _ref$selectedItemAria,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    _ref$noMatchesText = _ref.noMatchesText,
+    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen treff for søket' : _ref$noMatchesText,
+    selectAllCheckboxState = _ref.selectAllCheckboxState,
+    selectAllItem = _ref.selectAllItem,
+    selectedItems = _ref.selectedItems,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var isMultiselect = selectAllItem !== undefined;
   var isNoMatches = !loading && (listItems.length === 0 || listItems.length === 1 && listItems[0].value === (selectAllItem == null ? void 0 : selectAllItem.value));
-  var itemIsSelected = function itemIsSelected(item) {
+  var isItemSelected = function isItemSelected(item) {
     return selectedItems.some(function (selectedItem) {
-      return selectedItem.value === item.value;
+      return selectedItem.value === item.value && selectedItem.label === item.label;
     });
   };
+  var ariaLabelSelectAll = function ariaLabelSelectAll() {
+    switch (selectAllCheckboxState == null ? void 0 : selectAllCheckboxState()) {
+      case 'indeterminate':
+        {
+          return (selectAllItem == null ? void 0 : selectAllItem.label) + ", delvis valgt";
+        }
+      case true:
+        {
+          return (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular;
+        }
+      default:
+        {
+          return "" + (selectAllItem == null ? void 0 : selectAllItem.label);
+        }
+    }
+  };
   var selectAllListItemContent = function selectAllListItemContent() {
     return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
       "aria-hidden": "true",
@@ -1302,13 +1293,14 @@ var DropdownList = function DropdownList(_ref) {
       },
       tabIndex: -1
     }), React.createElement("span", {
-      className: "eds-dropdown__list__item__text"
+      className: "eds-dropdown__list__item__text",
+      "aria-label": ariaLabelSelectAll()
     }, selectAllItem == null ? void 0 : selectAllItem.label));
   };
   var listItemContent = function listItemContent(item) {
     return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
       "aria-hidden": "true",
-      checked: itemIsSelected(item),
+      checked: isItemSelected(item),
       className: "eds-dropdown__list__item__checkbox",
       onChange: function onChange() {
         return;
@@ -1319,7 +1311,7 @@ var DropdownList = function DropdownList(_ref) {
       tabIndex: -1
     }), React.createElement("span", {
       className: "eds-dropdown__list__item__text"
-    }, item.label, React.createElement(VisuallyHidden, null, selectedItemAriaLabel)), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
+    }, item.label, React.createElement(VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
       return React.createElement(Icon, {
         key: index,
         inline: true,
@@ -1328,35 +1320,166 @@ var DropdownList = function DropdownList(_ref) {
     })));
   };
   return (
-    // use popover from @entur/tooltip when the package uses floating-ui
+    // use popover from @entur/tooltip when that package upgrades to floating-ui
     React.createElement("ul", _extends({}, getMenuProps(), {
-      className: classNames('eds-dropdown__list', {
-        'eds-dropdown__list--open': isOpen
-      }),
-      style: _extends({}, rest.style, listStyle)
-    }), isOpen && listItems.length > 0 && listItems.map(function (item, index) {
+      className: "eds-dropdown__list",
+      style: _extends({
+        display: isOpen ? 'inline-block' : 'none'
+      }, rest.style, listStyle)
+    }), listItems.length > 0 && listItems.map(function (item, index) {
       var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
-      if (itemIsSelectAll && listItems.length <= 2) return React.createElement(React.Fragment, null);
+      if (itemIsSelectAll && listItems.length <= 2) return null;
       return React.createElement("li", _extends({
-        key: item.value,
+        key: item.label,
         className: classNames('eds-dropdown__list__item', {
           'eds-dropdown__list__item--select-all': itemIsSelectAll,
           'eds-dropdown__list__item--highlighted': highlightedIndex === index,
-          'eds-dropdown__list__item--selected': !isMultiselect && itemIsSelected(item)
+          'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
         })
       }, getItemProps({
-        key: "" + index + item.value,
+        key: item.label,
         item: item,
         index: index
       })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
-    }), isOpen && isNoMatches && React.createElement("li", {
+    }), isNoMatches && React.createElement("li", {
+      key: "dropdown-list-no-match",
       className: "eds-dropdown__list__item"
-    }, noMatchesText), isOpen && loading && React.createElement("li", {
+    }, noMatchesText), loading && React.createElement("li", {
+      key: "dropdown-list-loading",
       className: "eds-dropdown__list__item"
     }, loadingText))
   );
 };
 
+var _excluded$4 = ["tabIndex"];
+var SelectedItemTag = function SelectedItemTag(_ref) {
+  var _getSelectedItemProps;
+  var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
+    _ref$ariaLabelChosen = _ref.ariaLabelChosen,
+    ariaLabelChosen = _ref$ariaLabelChosen === void 0 ? 'valgt' : _ref$ariaLabelChosen,
+    disabled = _ref.disabled,
+    getSelectedItemProps = _ref.getSelectedItemProps,
+    index = _ref.index,
+    readOnly = _ref.readOnly,
+    removeSelectedItem = _ref.removeSelectedItem,
+    selectedItem = _ref.selectedItem;
+  var _ref2 = (_getSelectedItemProps = getSelectedItemProps == null ? void 0 : getSelectedItemProps({
+      selectedItem: selectedItem,
+      index: index
+    })) != null ? _getSelectedItemProps : {},
+    selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
+  return React.createElement(TagChip, _extends({
+    className: classNames('eds-dropdown__selected-item-tag', {
+      'eds-dropdown__selected-item-tag--readonly': readOnly,
+      'eds-dropdown__selected-item-tag--disabled': disabled
+    })
+  }, selectedItemProps, {
+    onClose: function onClose(e) {
+      e.stopPropagation();
+      removeSelectedItem(selectedItem);
+    },
+    closeButtonAriaLabel: selectedItem.label + " " + ariaLabelChosen + ", " + ariaLabelRemoveSelected + " ",
+    key: selectedItem.value,
+    "aria-live": "polite"
+  }), React.createElement("span", {
+    "aria-hidden": "true"
+  }, selectedItem.label));
+};
+var FieldAppend$1 = function FieldAppend(_ref3) {
+  var _ref3$ariaHiddenToggl = _ref3.ariaHiddenToggleButton,
+    ariaHiddenToggleButton = _ref3$ariaHiddenToggl === void 0 ? false : _ref3$ariaHiddenToggl,
+    ariaLabelCloseList = _ref3.ariaLabelCloseList,
+    ariaLabelOpenList = _ref3.ariaLabelOpenList,
+    _ref3$clearable = _ref3.clearable,
+    clearable = _ref3$clearable === void 0 ? false : _ref3$clearable,
+    labelClearSelectedItems = _ref3.labelClearSelectedItems,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    _ref3$focusable = _ref3.focusable,
+    focusable = _ref3$focusable === void 0 ? false : _ref3$focusable,
+    getToggleButtonProps = _ref3.getToggleButtonProps,
+    isOpen = _ref3.isOpen,
+    _ref3$loading = _ref3.loading,
+    loading = _ref3$loading === void 0 ? false : _ref3$loading,
+    _ref3$loadingText = _ref3.loadingText,
+    loadingText = _ref3$loadingText === void 0 ? 'Laster resultater …' : _ref3$loadingText,
+    onClear = _ref3.onClear,
+    selectedItems = _ref3.selectedItems;
+  if (loading) {
+    return React.createElement("div", {
+      className: 'eds-dropdown-appendix__toggle-button--loading-dots'
+    }, React.createElement(LoadingDots, {
+      "aria-label": loadingText
+    }));
+  }
+  if (disabled) {
+    return null;
+  }
+  return React.createElement("div", {
+    className: "eds-dropdown-appendix"
+  }, clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React.createElement(React.Fragment, null, React.createElement(ClearableButton, {
+    onClear: onClear,
+    focusable: true,
+    labelClearSelectedItems: labelClearSelectedItems
+  }), React.createElement("div", {
+    className: "eds-dropdown-appendix__divider"
+  })), React.createElement(ToggleButton, {
+    "aria-hidden": ariaHiddenToggleButton,
+    ariaLabelCloseList: ariaLabelCloseList,
+    ariaLabelOpenList: ariaLabelOpenList,
+    getToggleButtonProps: getToggleButtonProps,
+    isOpen: isOpen,
+    focusable: focusable
+  }));
+};
+var ClearableButton = function ClearableButton(_ref4) {
+  var onClear = _ref4.onClear,
+    _ref4$labelClearSelec = _ref4.labelClearSelectedItems,
+    labelClearSelectedItems = _ref4$labelClearSelec === void 0 ? 'Fjern valgte' : _ref4$labelClearSelec,
+    _ref4$focusable = _ref4.focusable,
+    focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
+  return React.createElement(Tooltip, {
+    "aria-hidden": "true",
+    placement: "top",
+    content: labelClearSelectedItems,
+    className: "eds-dropdown-appendix__clear-button__tooltip"
+  }, React.createElement(IconButton, {
+    className: "eds-dropdown-appendix__clear-button",
+    type: "button",
+    tabIndex: focusable ? 0 : 1,
+    onClick: onClear,
+    "aria-label": labelClearSelectedItems
+  }, React.createElement(CloseSmallIcon, {
+    "aria-hidden": "true"
+  })));
+};
+var ToggleButton = function ToggleButton(_ref5) {
+  var getToggleButtonProps = _ref5.getToggleButtonProps,
+    isOpen = _ref5.isOpen,
+    _ref5$ariaHidden = _ref5['aria-hidden'],
+    ariaHidden = _ref5$ariaHidden === void 0 ? false : _ref5$ariaHidden,
+    _ref5$ariaLabelCloseL = _ref5.ariaLabelCloseList,
+    ariaLabelCloseList = _ref5$ariaLabelCloseL === void 0 ? 'Lukk liste med valg' : _ref5$ariaLabelCloseL,
+    _ref5$ariaLabelOpenLi = _ref5.ariaLabelOpenList,
+    ariaLabelOpenList = _ref5$ariaLabelOpenLi === void 0 ? 'Åpne liste med valg' : _ref5$ariaLabelOpenLi,
+    _ref5$focusable = _ref5.focusable,
+    focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
+  return React.createElement(IconButton, _extends({}, getToggleButtonProps({
+    className: classNames('eds-dropdown-appendix__toggle-button', {
+      'eds-dropdown-appendix__toggle-button--open': isOpen
+    }),
+    'aria-labelledby': undefined
+  }), {
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaHidden ? undefined : isOpen ? ariaLabelCloseList : ariaLabelOpenList,
+    tabIndex: focusable ? 0 : -1,
+    type: "button"
+  }), React.createElement(DownArrowIcon, {
+    "aria-hidden": "true"
+  }));
+};
+
+/* start general utils */
 var EMPTY_INPUT = '';
 function lowerCaseFilterTest(item, input) {
   if (!input) {
@@ -1372,10 +1495,10 @@ var itemToString = function itemToString(item) {
 var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var listItems = _ref.listItems,
     selectedItems = _ref.selectedItems,
-    selectAllValue = _ref.selectAllValue;
+    selectAll = _ref.selectAll;
   var hasSelectedItems = selectedItems.length > 0;
   var listItemsWithoutSelectAll = listItems.filter(function (item) {
-    return item.value !== selectAllValue;
+    return item.value !== selectAll.value;
   });
   var allListItemsAreSelected = listItemsWithoutSelectAll.filter(function (item) {
     return !selectedItems.includes(item);
@@ -1392,18 +1515,21 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     });
   };
   var clickedItemIsSelectAll = function clickedItemIsSelectAll(clickedItem) {
-    return clickedItem.value === selectAllValue;
+    return clickedItem.value === selectAll.value;
   };
   var handleListItemClicked = function handleListItemClicked(_ref2) {
     var clickedItem = _ref2.clickedItem,
-      onChange = _ref2.onChange;
+      onChange = _ref2.onChange,
+      setLastRemovedItem = _ref2.setLastRemovedItem;
     if (clickedItemIsSelectAll(clickedItem)) {
       if (allListItemsAreSelected) {
+        setLastRemovedItem(selectAll);
         return unselectAllListItems(onChange);
       }
       return selectAllUnselectedItemsInListItems(onChange);
     }
     if (clickedItemIsInSelectedItems(clickedItem)) {
+      setLastRemovedItem(clickedItem);
       return removeClickedItemFromSelectedItems(clickedItem, onChange);
     }
     addClickedItemToSelectedItems(clickedItem, onChange);
@@ -1443,125 +1569,63 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     unselectAllListItems: unselectAllListItems
   };
 };
-
-var _excluded$3 = ["tabIndex"];
-var SelectedItemTag = function SelectedItemTag(_ref) {
-  var _getSelectedItemProps;
-  var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
-    disabled = _ref.disabled,
-    getSelectedItemProps = _ref.getSelectedItemProps,
-    index = _ref.index,
-    readOnly = _ref.readOnly,
-    removeSelectedItem = _ref.removeSelectedItem,
-    selectedItem = _ref.selectedItem;
-  var _ref2 = (_getSelectedItemProps = getSelectedItemProps == null ? void 0 : getSelectedItemProps({
-      selectedItem: selectedItem,
-      index: index
-    })) != null ? _getSelectedItemProps : {},
-    selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
-  return React.createElement(TagChip, _extends({
-    className: classNames('eds-dropdown__selected-item-tag', {
-      'eds-dropdown__selected-item-tag--readonly': readOnly,
-      'eds-dropdown__selected-item-tag--disabled': disabled
-    })
-  }, selectedItemProps, {
-    onClose: function onClose(e) {
-      e.stopPropagation();
-      removeSelectedItem(selectedItem);
-    },
-    closeButtonAriaLabel: selectedItem.label + ", " + ariaLabelRemoveSelected + " ",
-    key: selectedItem.value
-  }), React.createElement("span", {
-    "aria-hidden": "true"
-  }, selectedItem.label));
-};
-var FieldAppend = function FieldAppend(_ref3) {
-  var _ref3$clearable = _ref3.clearable,
-    clearable = _ref3$clearable === void 0 ? false : _ref3$clearable,
-    clearSelectedItemsLabel = _ref3.clearSelectedItemsLabel,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-    _ref3$focusable = _ref3.focusable,
-    focusable = _ref3$focusable === void 0 ? false : _ref3$focusable,
-    getToggleButtonProps = _ref3.getToggleButtonProps,
-    isOpen = _ref3.isOpen,
-    _ref3$loading = _ref3.loading,
-    loading = _ref3$loading === void 0 ? false : _ref3$loading,
-    _ref3$loadingText = _ref3.loadingText,
-    loadingText = _ref3$loadingText === void 0 ? 'Laster resultater …' : _ref3$loadingText,
-    onClear = _ref3.onClear,
-    selectedItems = _ref3.selectedItems;
-  if (loading) {
-    return React.createElement(DropdownLoadingDots, null, loadingText);
+function getA11yStatusMessage(options) {
+  var isOpen = options.isOpen,
+    resultCount = options.resultCount,
+    previousResultCount = options.previousResultCount,
+    _options$selectAllIte = options.selectAllItemIncluded,
+    selectAllItemIncluded = _options$selectAllIte === void 0 ? false : _options$selectAllIte,
+    _options$ariaLabelNoR = options.ariaLabelNoResults,
+    ariaLabelNoResults = _options$ariaLabelNoR === void 0 ? 'Ingen resultater' : _options$ariaLabelNoR;
+  if (!isOpen) {
+    return '';
   }
-  if (disabled) {
-    return null;
+  var resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
+  if (resultCountWithoutSelectAll === 0) {
+    return ariaLabelNoResults;
   }
-  return (
-    // to have a natural tab order, these elements are ordered opposite of how they are displayed
-    React.createElement("div", {
-      className: "eds-dropdown-appendix"
-    }, React.createElement(ToggleButton, {
-      getToggleButtonProps: getToggleButtonProps,
-      isOpen: isOpen,
-      focusable: focusable
-    }), clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React.createElement(React.Fragment, null, React.createElement("div", {
-      className: "eds-dropdown-appendix__divider"
-    }), React.createElement(ClearableButton, {
-      onClear: onClear,
-      focusable: true,
-      clearSelectedItemsLabel: clearSelectedItemsLabel
-    })))
-  );
-};
-var ClearableButton = function ClearableButton(_ref4) {
-  var onClear = _ref4.onClear,
-    _ref4$clearSelectedIt = _ref4.clearSelectedItemsLabel,
-    clearSelectedItemsLabel = _ref4$clearSelectedIt === void 0 ? 'Fjern valgte' : _ref4$clearSelectedIt,
-    _ref4$focusable = _ref4.focusable,
-    focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
-  return React.createElement(Tooltip, {
-    "aria-hidden": "true",
-    placement: "right",
-    content: clearSelectedItemsLabel
-  }, React.createElement(IconButton, {
-    className: "eds-dropdown-appendix__clear-button",
-    type: "button",
-    tabIndex: focusable ? 0 : 1,
-    onClick: onClear,
-    "aria-label": clearSelectedItemsLabel
-  }, React.createElement(CloseSmallIcon, {
-    "aria-hidden": "true"
-  })));
-};
-var ToggleButton = function ToggleButton(_ref5) {
-  var getToggleButtonProps = _ref5.getToggleButtonProps,
-    isOpen = _ref5.isOpen,
-    _ref5$closeAriaLabel = _ref5.closeAriaLabel,
-    closeAriaLabel = _ref5$closeAriaLabel === void 0 ? 'Lukk liste med valg' : _ref5$closeAriaLabel,
-    _ref5$openAriaLabel = _ref5.openAriaLabel,
-    openAriaLabel = _ref5$openAriaLabel === void 0 ? 'Åpne liste med valg' : _ref5$openAriaLabel,
-    _ref5$focusable = _ref5.focusable,
-    focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
-  return React.createElement(IconButton, _extends({}, getToggleButtonProps({
-    className: classNames('eds-dropdown-appendix__toggle-button', {
-      'eds-dropdown-appendix__toggle-button--open': isOpen
-    })
-  }), {
-    "aria-label": isOpen ? closeAriaLabel : openAriaLabel,
-    tabIndex: focusable ? 0 : -1,
-    type: "button"
-  }), React.createElement(DownArrowIcon, {
-    "aria-hidden": "true"
-  }));
+  if (resultCount !== previousResultCount) {
+    return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med enter.";
+  }
+  return '';
+}
+function getA11ySelectionMessage(options) {
+  var selectedItem = options.selectedItem,
+    itemToStringLocal = options.itemToString,
+    selectAllItem = options.selectAllItem;
+  if ((selectedItem == null ? void 0 : selectedItem.value) === (selectAllItem == null ? void 0 : selectAllItem.value)) return 'Alle elementer i listen valgt.';
+  return selectedItem ? itemToStringLocal(selectedItem) + " er valgt." : '';
+}
+function getA11yRemovalMessage(options) {
+  var itemToString = options.itemToString,
+    selectAllItem = options.selectAllItem,
+    removedItem = options.removedItem;
+  if (removedItem === undefined) return '';
+  if (removedItem.value === (selectAllItem == null ? void 0 : selectAllItem.value)) return 'Alle elementer i listen fjernet fra valgte.';
+  return itemToString(removedItem) + " fjernet fra valgte.";
+}
+/**A VoiceOver click is always preformed in the center of the clicked element.
+   This functions expolits that to check if the performed click likely is
+   made by VoiceOver. */
+var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
+  var targetElementRect = clickEvent.currentTarget.getBoundingClientRect();
+  var targetElementMiddleX = Math.floor(targetElementRect.x + targetElementRect.width / 2);
+  var targetElementMiddleY = Math.floor(targetElementRect.y + targetElementRect.height / 2);
+  var clickPositionX = clickEvent.clientX;
+  var clickPositionY = clickEvent.clientY;
+  console.log('targetX:', targetElementMiddleX, 'targetY:', targetElementMiddleY, 'clickX:', clickPositionX, 'clickY:', clickPositionY);
+  return Math.abs(targetElementMiddleX - clickPositionX) <= 1 && Math.abs(targetElementMiddleY - clickPositionY) <= 1;
 };
+/* end a11y utils */
 
-var _excluded$2 = ["className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "itemFilter", "items", "label", "listStyle", "loadingText", "onChange", "openOnFocus", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
-var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
+var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "itemFilter", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
+var SearchableDropdown = function SearchableDropdown(_ref) {
   var _selectedItem$label;
-  var className = _ref.className,
+  var ariaLabelCloseList = _ref.ariaLabelCloseList,
+    ariaLabelOpenList = _ref.ariaLabelOpenList,
+    className = _ref.className,
     _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     debounceTimeout = _ref.debounceTimeout,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -1572,11 +1636,11 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     itemFilter = _ref$itemFilter === void 0 ? lowerCaseFilterTest : _ref$itemFilter,
     initialItems = _ref.items,
     label = _ref.label,
+    _ref$labelClearSelect = _ref.labelClearSelectedItem,
+    labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
     onChange = _ref.onChange,
-    _ref$openOnFocus = _ref.openOnFocus,
-    openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
     placeholder = _ref.placeholder,
     prepend = _ref.prepend,
     _ref$readOnly = _ref.readOnly,
@@ -1587,7 +1651,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var _useState = useState(false),
     hideSelectedItem = _useState[0],
     setHideSelectedItem = _useState[1];
@@ -1627,6 +1691,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
     }
     switch (type) {
+      // empty input to show selected item and reset dropdown list on item selection
       case useCombobox.stateChangeTypes.ItemClick:
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.InputBlur:
@@ -1636,21 +1701,21 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
             inputValue: EMPTY_INPUT
           });
           return _extends({}, changes, {
-            inputValue: EMPTY_INPUT // reset input value to show placeholder on focus
+            inputValue: EMPTY_INPUT
           });
         }
-
+      // remove leading whitespace, select element with spacebar on empty input, and filter list based on input
       case useCombobox.stateChangeTypes.InputChange:
         {
           var _changes$inputValue;
           var leadingWhitespaceTest = /^\s+/g;
-          var isSpacePressedOnEmptyInput = changes.inputValue == ' ';
+          var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
           if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
             setInputValue(changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT));
             if (isSpacePressedOnEmptyInput) {
               openMenu();
               if (isOpen && changes.highlightedIndex !== undefined) {
-                onChange(listItems[changes.highlightedIndex]);
+                onChange == null ? void 0 : onChange(listItems[changes.highlightedIndex]);
               }
             }
           } else {
@@ -1679,8 +1744,15 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
             if (!selectOnBlur) break;
           case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
           case useCombobox.stateChangeTypes.ItemClick:
-            onChange(clickedItem != null ? clickedItem : null);
+            onChange == null ? void 0 : onChange(clickedItem != null ? clickedItem : null);
         }
+      },
+      // Accessibility
+      getA11yStatusMessage: getA11yStatusMessage,
+      // The following A11y-helper does not work due to a bug (https://github.com/downshift-js/downshift/issues/1227)
+      // but is left here for when it is fixed
+      getA11ySelectionMessage: function getA11ySelectionMessage$1(options) {
+        return getA11ySelectionMessage(options);
       }
     }, rest)),
     isOpen = _useCombobox.isOpen,
@@ -1689,7 +1761,6 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     getLabelProps = _useCombobox.getLabelProps,
     getMenuProps = _useCombobox.getMenuProps,
     getInputProps = _useCombobox.getInputProps,
-    getComboboxProps = _useCombobox.getComboboxProps,
     highlightedIndex = _useCombobox.highlightedIndex,
     getItemProps = _useCombobox.getItemProps,
     selectedItem = _useCombobox.selectedItem,
@@ -1697,7 +1768,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     setInputValue = _useCombobox.setInputValue;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
-    onChange(null);
+    onChange == null ? void 0 : onChange(null);
     setInputValue(EMPTY_INPUT);
     (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     updateListItems({
@@ -1705,11 +1776,14 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     });
   };
   return React.createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames('eds-dropdown__wrapper', className),
+    style: style
   }, React.createElement(BaseFormControl, _extends({
-    append: React.createElement(FieldAppend, {
+    append: React.createElement(FieldAppend$1, {
+      ariaLabelCloseList: ariaLabelCloseList,
+      ariaLabelOpenList: ariaLabelOpenList,
       clearable: clearable,
-      clearSelectedItemsLabel: "Fjern valgt",
+      labelClearSelectedItems: labelClearSelectedItem,
       disabled: readOnly || disabled,
       focusable: false,
       getToggleButtonProps: getToggleButtonProps,
@@ -1719,19 +1793,20 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       onClear: handleOnClear,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
-    isFilled: selectedItem || inputValue !== EMPTY_INPUT,
+    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
     label: label,
+    labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
-  }, getComboboxProps(), rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
-    className: "eds-dropdown__selected-item__wrapper"
+  }, rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
+    className: "eds-dropdown__selected-item__wrapper",
+    "aria-hidden": "true"
   }, React.createElement("span", {
     className: "eds-dropdown__selected-item",
     onClick: function onClick() {
@@ -1743,11 +1818,13 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     disabled: readOnly || disabled,
     placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder
   }, getInputProps({
+    onClick: function onClick(e) {
+      if (!isOpen && isVoiceOverClick(e)) openMenu();
+    },
     onBlur: function onBlur() {
       setHideSelectedItem(false);
     },
     onFocus: function onFocus() {
-      if (!isOpen && openOnFocus) openMenu();
       setHideSelectedItem(true);
     },
     ref: inputRef
@@ -1764,71 +1841,91 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
   }));
 };
 
-var _excluded$1 = ["allItemsSelectedLabel", "ariaLabelRemoveSelected", "className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "items", "label", "listStyle", "loadingText", "maxTags", "onChange", "openOnFocus", "placeholder", "readOnly", "clearAllItemsAriaLabel", "selectAllLabel", "selectedItems", "selectOnBlur", "style", "variant"];
-var MultiSelectBeta = function MultiSelectBeta(_ref) {
-  var _ref$allItemsSelected = _ref.allItemsSelectedLabel,
-    allItemsSelectedLabel = _ref$allItemsSelected === void 0 ? 'Alle valgt' : _ref$allItemsSelected,
-    _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
-    ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
-    className = _ref.className,
+var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "itemFilter", "items", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+var MultiSelect = function MultiSelect(_ref) {
+  var className = _ref.className,
     _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     _ref$clearInputOnSele = _ref.clearInputOnSelect,
     clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
+    debounceTimeout = _ref.debounceTimeout,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     feedback = _ref.feedback,
     _ref$hideSelectAll = _ref.hideSelectAll,
     hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? lowerCaseFilterTest : _ref$itemFilter,
     initialItems = _ref.items,
     label = _ref.label,
+    _ref$labelAllItemsSel = _ref.labelAllItemsSelected,
+    labelAllItemsSelected = _ref$labelAllItemsSel === void 0 ? 'Alle valgt' : _ref$labelAllItemsSel,
+    _ref$labelClearAllIte = _ref.labelClearAllItems,
+    labelClearAllItems = _ref$labelClearAllIte === void 0 ? 'Fjern valgte' : _ref$labelClearAllIte,
+    _ref$labelSelectAll = _ref.labelSelectAll,
+    labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
-    _ref$maxTags = _ref.maxTags,
-    maxTags = _ref$maxTags === void 0 ? 10 : _ref$maxTags,
-    onChange = _ref.onChange,
-    _ref$openOnFocus = _ref.openOnFocus,
-    openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+    _ref$maxChips = _ref.maxChips,
+    maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
     placeholder = _ref.placeholder,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$clearAllItemsAri = _ref.clearAllItemsAriaLabel,
-    clearAllItemsAriaLabel = _ref$clearAllItemsAri === void 0 ? 'Fjern valgte' : _ref$clearAllItemsAri,
-    _ref$selectAllLabel = _ref.selectAllLabel,
-    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Velg alle' : _ref$selectAllLabel,
     selectedItems = _ref.selectedItems,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
+    ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
+    _ref$ariaLabelChosenP = _ref.ariaLabelChosenPlural,
+    ariaLabelChosenPlural = _ref$ariaLabelChosenP === void 0 ? 'valgte' : _ref$ariaLabelChosenP,
+    ariaLabelCloseList = _ref.ariaLabelCloseList,
+    _ref$ariaLabelJumpToI = _ref.ariaLabelJumpToInput,
+    ariaLabelJumpToInput = _ref$ariaLabelJumpToI === void 0 ? selectedItems.length + " valgte elementer, trykk for \xE5 hoppe til tekstfeltet" : _ref$ariaLabelJumpToI,
+    ariaLabelOpenList = _ref.ariaLabelOpenList,
+    _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
+    ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
+    _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
+    ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _React$useState = React.useState(0),
     lastHighlightedIndex = _React$useState[0],
     setLastHighlightedIndex = _React$useState[1];
+  var _React$useState2 = React.useState(undefined),
+    lastRemovedItem = _React$useState2[0],
+    setLastRemovedItem = _React$useState2[1];
   var inputRef = useRef(null);
-  var _useResolvedItems = useResolvedItems(initialItems),
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
     fetchItems = _useResolvedItems.fetchItems;
   var isAllNonAsyncItemsSelected = typeof initialItems !== 'function' && selectedItems.length === normalizedItems.length;
+  // special 'item' used as Select All entry in the dropdown list
   var selectAll = {
     value: useRandomId('select-all'),
-    label: selectAllLabel
+    label: labelSelectAll
   };
+  // special 'item' used as a replacement selected item tag for when
+  // there are more selected element than maxChips
   var summarySelectedItems = React.useMemo(function () {
     return {
       value: EMPTY_INPUT,
-      label: isAllNonAsyncItemsSelected ? allItemsSelectedLabel : selectedItems.length + ' valgte'
+      label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + ' ' + ariaLabelChosenPlural
     };
-  }, [isAllNonAsyncItemsSelected, selectedItems, allItemsSelectedLabel]);
+  }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected, ariaLabelChosenPlural]);
   var _useState = useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
     listItems = _useState[0],
     setListItems = _useState[1];
   var filterListItems = function filterListItems(_ref2) {
     var inputValue = _ref2.inputValue;
     return setListItems([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems.filter(function (item) {
-      return lowerCaseFilterTest(item, inputValue);
+      return itemFilter(item, inputValue);
     })));
   };
   var updateListItems = function updateListItems(_ref3) {
@@ -1843,32 +1940,49 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       inputValue: inputValue
     });
   }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
-  var _useMultipleSelection = useMultipleSelection({
-      selectedItems: selectedItems,
-      itemToString: itemToString,
-      onSelectedItemsChange: function onSelectedItemsChange(changes) {
-        var _changes$selectedItem;
-        onChange((_changes$selectedItem = changes.selectedItems) != null ? _changes$selectedItem : []);
-      }
-    }),
-    getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
-    getDropdownProps = _useMultipleSelection.getDropdownProps,
-    removeSelectedItem = _useMultipleSelection.removeSelectedItem;
   var _useMultiselectUtils = useMultiselectUtils({
       listItems: listItems,
-      selectAllValue: selectAll.value,
+      selectAll: selectAll,
       selectedItems: selectedItems
     }),
     hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
     handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
     selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState;
-  var stateReducer = React.useCallback(function (_, _ref4) {
-    var changes = _ref4.changes,
-      type = _ref4.type;
+  var _useMultipleSelection = useMultipleSelection({
+      selectedItems: selectedItems,
+      itemToString: itemToString,
+      onStateChange: function onStateChange(_ref4) {
+        var newSelectedItems = _ref4.selectedItems,
+          type = _ref4.type;
+        switch (type) {
+          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+          case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+            {
+              if (newSelectedItems !== undefined) onChange(newSelectedItems);
+              break;
+            }
+        }
+      },
+      // Accessibility
+      getA11yRemovalMessage: function getA11yRemovalMessage$1(options) {
+        return getA11yRemovalMessage(_extends({}, options, {
+          selectAllItem: selectAll,
+          removedItem: lastRemovedItem
+        }));
+      }
+    }),
+    getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
+    getDropdownProps = _useMultipleSelection.getDropdownProps;
+  var stateReducer = React.useCallback(function (_, _ref5) {
+    var changes = _ref5.changes,
+      type = _ref5.type;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
       setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
     }
     switch (type) {
+      // keep menu open and edit input value on item selection
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.ItemClick:
         {
@@ -1883,6 +1997,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
             inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : EMPTY_INPUT
           });
         }
+      // edit input value when selected items is updated outside component
       case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
           var _inputRef$current$val2, _inputRef$current2;
@@ -1890,6 +2005,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
             inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val2 = inputRef == null ? void 0 : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
           });
         }
+      // remove leading whitespace, select item with spacebar if input is empty and filter list items
       case useCombobox.stateChangeTypes.InputChange:
         {
           var _changes$inputValue;
@@ -1899,10 +2015,11 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
             setInputValue(changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT));
             if (isSpacePressedOnEmptyInput) {
               openMenu();
-              if (isOpen && changes.highlightedIndex) {
+              if (isOpen && changes.highlightedIndex !== undefined) {
                 handleListItemClicked({
                   clickedItem: listItems[changes.highlightedIndex],
-                  onChange: onChange
+                  onChange: onChange,
+                  setLastRemovedItem: setLastRemovedItem
                 });
               }
             }
@@ -1913,6 +2030,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
           }
           return changes;
         }
+      // reset input value when leaving input field
       case useCombobox.stateChangeTypes.InputBlur:
         {
           return _extends({}, changes, {
@@ -1929,9 +2047,9 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       itemToString: itemToString,
       selectedItem: null,
       stateReducer: stateReducer,
-      onStateChange: function onStateChange(_ref5) {
-        var type = _ref5.type,
-          clickedItem = _ref5.selectedItem;
+      onStateChange: function onStateChange(_ref6) {
+        var type = _ref6.type,
+          clickedItem = _ref6.selectedItem;
         // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
         switch (type) {
@@ -1940,14 +2058,29 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
             if (!selectOnBlur) break;
           case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
           case useCombobox.stateChangeTypes.ItemClick:
-            handleListItemClicked({
-              clickedItem: clickedItem,
-              onChange: onChange
-            });
+            {
+              handleListItemClicked({
+                clickedItem: clickedItem,
+                onChange: onChange,
+                setLastRemovedItem: setLastRemovedItem
+              });
+            }
         }
+      },
+      // Accessibility
+      getA11yStatusMessage: function getA11yStatusMessage$1(options) {
+        return getA11yStatusMessage(_extends({}, options, {
+          selectAllItemIncluded: !hideSelectAll
+        }));
+      },
+      // The following A11y-helper does not work due to a bug (https://github.com/downshift-js/downshift/issues/1227)
+      // but is left here for when it is fixed
+      getA11ySelectionMessage: function getA11ySelectionMessage$1(options) {
+        return getA11ySelectionMessage(_extends({}, options, {
+          selectAllItem: selectAll
+        }));
       }
     }, rest)),
-    getComboboxProps = _useCombobox.getComboboxProps,
     getInputProps = _useCombobox.getInputProps,
     getItemProps = _useCombobox.getItemProps,
     getLabelProps = _useCombobox.getLabelProps,
@@ -1967,18 +2100,17 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       inputValue: inputValue
     });
   };
-  // role=combobox leads to strange VoiceOver behavior and is therefor omitted
-  // const { role: _, ...comboboxProps } = getComboboxProps();
-  var _getComboboxProps = getComboboxProps(),
-    comboboxProps = _extends({}, (_objectDestructuringEmpty(_getComboboxProps), _getComboboxProps));
   return React.createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames('eds-dropdown__wrapper', className),
+    style: style
   }, React.createElement(BaseFormControl, _extends({
-    append: React.createElement(FieldAppend, {
+    append: React.createElement(FieldAppend$1, {
+      ariaLabelCloseList: ariaLabelCloseList,
+      ariaLabelOpenList: ariaLabelOpenList,
       selectedItems: selectedItems,
       isOpen: isOpen,
       clearable: clearable,
-      clearSelectedItemsLabel: clearAllItemsAriaLabel,
+      labelClearSelectedItems: labelClearAllItems,
       focusable: false,
       loading: loading,
       loadingText: loadingText,
@@ -1986,18 +2118,16 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: classNames('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     feedback: feedback,
     isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
     label: label,
-    labelProps: _extends({
-      'aria-label': label + ", multiselect, " + selectedItems.length + " valgte elementer"
-    }, getLabelProps()),
+    labelId: getLabelProps().id,
+    labelProps: getLabelProps(),
     readOnly: readOnly,
-    style: style,
     variant: variant
-  }, comboboxProps, rest), React.createElement("div", {
+  }, rest), React.createElement("div", {
     className: classNames('eds-dropdown__selected-items-and-input', {
       'eds-dropdown__selected-items-and-input--filled': hasSelectedItems
     }),
@@ -2005,19 +2135,34 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       var _inputRef$current4;
       if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
     }
-  }, selectedItems.length < maxTags ? selectedItems.map(function (selectedItem, index) {
+  }, selectedItems.length < maxChips ? React.createElement(React.Fragment, null, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
+    onClick: function onClick() {
+      var _inputRef$current5;
+      return (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
+    }
+  }, ariaLabelJumpToInput) : React.createElement(React.Fragment, null), selectedItems.map(function (selectedItem, index) {
     return React.createElement(SelectedItemTag, {
+      ariaLabelChosen: ariaLabelChosenSingular,
       ariaLabelRemoveSelected: ariaLabelRemoveSelected,
       disabled: disabled,
       getSelectedItemProps: getSelectedItemProps,
       index: index,
       key: selectedItem.value,
       readOnly: readOnly,
-      removeSelectedItem: removeSelectedItem,
+      removeSelectedItem: function removeSelectedItem() {
+        var _inputRef$current6;
+        handleListItemClicked({
+          clickedItem: selectedItem,
+          onChange: onChange,
+          setLastRemovedItem: setLastRemovedItem
+        });
+        inputRef == null ? void 0 : (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.focus();
+      },
       selectedItem: selectedItem
     });
-  }) : React.createElement(SelectedItemTag, {
-    ariaLabelRemoveSelected: clearAllItemsAriaLabel,
+  })) : React.createElement(SelectedItemTag, {
+    ariaLabelRemoveSelected: labelClearAllItems,
+    ariaLabelChosen: "",
     disabled: disabled,
     readOnly: readOnly,
     removeSelectedItem: handleOnClear,
@@ -2025,16 +2170,17 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
   }), React.createElement("input", _extends({
     placeholder: placeholder,
     className: "eds-dropdown__input eds-form-control",
-    disabled: readOnly || disabled,
-    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
+    disabled: readOnly || disabled
   }, getInputProps(getDropdownProps({
-    preventKeyAction: isOpen,
-    onFocus: function onFocus() {
-      if (!isOpen && openOnFocus) openMenu();
+    onClick: function onClick(e) {
+      if (!isOpen && isVoiceOverClick(e)) openMenu();
     },
+    preventKeyAction: isOpen,
     ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
   })))))), React.createElement(DropdownList, {
+    ariaLabelChosenSingular: ariaLabelChosenSingular,
+    ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
     getMenuProps: getMenuProps,
     highlightedIndex: highlightedIndex,
@@ -2050,17 +2196,22 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
   }));
 };
 
-var _excluded = ["className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelTooltip", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
-var DropdownBeta = function DropdownBeta(_ref) {
+var _excluded$1 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
+var Dropdown = function Dropdown(_ref) {
   var _ref3, _selectedItem$label;
-  var className = _ref.className,
+  var ariaLabelCloseList = _ref.ariaLabelCloseList,
+    ariaLabelOpenList = _ref.ariaLabelOpenList,
+    className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     disableLabelAnimation = _ref.disableLabelAnimation,
     feedback = _ref.feedback,
     initialItems = _ref.items,
     label = _ref.label,
-    labelTooltip = _ref.labelTooltip,
+    _ref$labelClearSelect = _ref.labelClearSelectedItem,
+    labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
     onChange = _ref.onChange,
@@ -2074,25 +2225,27 @@ var DropdownBeta = function DropdownBeta(_ref) {
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // TODO Husk å @deprecate searchable-prop-en til Dropdown når denne komponenten skal ha official release
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useResolvedItems = useResolvedItems(initialItems),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading;
   var isFilled = selectedItem !== null || placeholder !== undefined;
   var _useSelect = useSelect({
       items: normalizedItems,
+      defaultHighlightedIndex: selectedItem ? undefined : 0,
       selectedItem: selectedItem,
       onStateChange: function onStateChange(_ref2) {
         var type = _ref2.type,
           clickedItem = _ref2.selectedItem;
         switch (type) {
           // @ts-expect-error This falltrough is wanted
-          case useSelect.stateChangeTypes.InputBlur:
+          case useSelect.stateChangeTypes.ToggleButtonBlur:
             if (!selectOnBlur) break;
-          case useSelect.stateChangeTypes.MenuKeyDownEnter: // eslint-disable-line no-fallthrough
+          case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter: // eslint-disable-line no-fallthrough
           case useSelect.stateChangeTypes.ItemClick:
-            onChange == null ? void 0 : onChange(clickedItem !== undefined ? clickedItem : null);
+            {
+              onChange == null ? void 0 : onChange(clickedItem !== undefined ? clickedItem : null);
+            }
         }
       },
       itemToString: itemToString
@@ -2104,12 +2257,16 @@ var DropdownBeta = function DropdownBeta(_ref) {
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
   return React.createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames('eds-dropdown__wrapper', className),
+    style: style
   }, React.createElement(BaseFormControl, _extends({
-    append: React.createElement(FieldAppend, {
-      clearable: true,
-      clearSelectedItemsLabel: "Fjern valgt",
-      focusable: true,
+    append: React.createElement(FieldAppend$1, {
+      ariaHiddenToggleButton: true,
+      ariaLabelCloseList: ariaLabelCloseList,
+      ariaLabelOpenList: ariaLabelOpenList,
+      clearable: clearable,
+      labelClearSelectedItems: labelClearSelectedItem,
+      focusable: false,
       getToggleButtonProps: getToggleButtonProps,
       isOpen: isOpen,
       loading: loading,
@@ -2120,7 +2277,7 @@ var DropdownBeta = function DropdownBeta(_ref) {
       disabled: readOnly || disabled,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', className, {
+    className: classNames('eds-dropdown', {
       'eds-dropdown--not-filled': !isFilled
     }),
     disabled: disabled,
@@ -2130,14 +2287,14 @@ var DropdownBeta = function DropdownBeta(_ref) {
     label: label,
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
-    labelTooltip: labelTooltip,
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item-button"
-  }, getToggleButtonProps()), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
+  }, getToggleButtonProps({
+    id: undefined
+  })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
     className: classNames('eds-dropdown__selected-item-button__placeholder', {
       'eds-dropdown__selected-item-button__placeholder--readonly': readOnly
     })
@@ -2154,7 +2311,91 @@ var DropdownBeta = function DropdownBeta(_ref) {
   }));
 };
 
+var _excluded = ["className", "disabled", "disableLabelAnimation", "feedback", "items", "label", "loadingText", "onChange", "prepend", "readOnly", "selectedItem", "style", "value", "variant"];
+var NativeDropdown = function NativeDropdown(_ref) {
+  var _ref2;
+  var className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    feedback = _ref.feedback,
+    items = _ref.items,
+    label = _ref.label,
+    loadingText = _ref.loadingText,
+    _onChange = _ref.onChange,
+    prepend = _ref.prepend,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    selectedItem = _ref.selectedItem,
+    style = _ref.style,
+    value = _ref.value,
+    variant = _ref.variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useResolvedItems = useResolvedItems(items),
+    normalizedItems = _useResolvedItems.items,
+    loading = _useResolvedItems.loading;
+  var nativeDropdownId = useRandomId('eds-dropdown-native');
+  return React.createElement(BaseFormControl, {
+    disabled: disabled,
+    readOnly: readOnly,
+    prepend: prepend,
+    append: React.createElement(FieldAppend, {
+      hidden: disabled || readOnly,
+      loading: loading,
+      loadingText: loadingText
+    }),
+    className: className,
+    style: style,
+    label: label,
+    labelId: nativeDropdownId,
+    variant: variant,
+    feedback: feedback,
+    disableLabelAnimation: disableLabelAnimation,
+    isFilled: true
+  }, React.createElement("select", _extends({
+    "aria-invalid": variant === 'error',
+    "aria-labelledby": nativeDropdownId,
+    "aria-busy": loading,
+    className: "eds-form-control eds-dropdown--native",
+    disabled: disabled || readOnly,
+    onChange: function onChange(event) {
+      var _normalizedItems$find;
+      _onChange == null ? void 0 : _onChange({
+        value: event.target.value,
+        selectedItem: (_normalizedItems$find = normalizedItems.find(function (item) {
+          return item.value === event.target.value;
+        })) != null ? _normalizedItems$find : null,
+        target: event.target
+      });
+    },
+    value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined
+  }, rest), normalizedItems.map(function (item) {
+    return React.createElement("option", {
+      key: item.value,
+      value: item.value
+    }, item.label);
+  })));
+};
+var FieldAppend = function FieldAppend(_ref3) {
+  var loading = _ref3.loading,
+    loadingText = _ref3.loadingText,
+    hidden = _ref3.hidden;
+  if (loading) {
+    return React.createElement("div", {
+      className: "eds-dropdown-native__loading-dots"
+    }, React.createElement(LoadingDots, {
+      "aria-label": loadingText
+    }));
+  }
+  if (hidden) {
+    return React.createElement(React.Fragment, null);
+  }
+  return React.createElement(DownArrowIcon, {
+    inline: true
+  });
+};
+
 warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
 
-export { Dropdown, DropdownBeta, MultiSelect, MultiSelectBeta, NativeDropdown, SearchableDropdownBeta };
+export { Dropdown, DropdownDeprecated, MultiSelect, MultiSelectDeprecated, NativeDropdown, SearchableDropdown };
 //# sourceMappingURL=dropdown.esm.js.map