@entur/dropdown 4.0.10 → 5.0.0-beta.0

package/dist/dropdown.esm.js

@@ -1,13 +1,15 @@
 import { mergeRefs, debounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
 import React, { useState, useRef } from 'react';
-import Downshift, { useSelect, useCombobox } from 'downshift';
+import Downshift, { useSelect, useCombobox, useMultipleSelection } from 'downshift';
 import classNames from 'classnames';
-import { BaseFormControl, VariantProvider, FeedbackText } from '@entur/form';
+import { BaseFormControl, VariantProvider, FeedbackText, Checkbox } from '@entur/form';
 import { CheckIcon, DownArrowIcon, CloseSmallIcon, CloseIcon } from '@entur/icons';
 import { VisuallyHidden } from '@entur/a11y';
 import { LoadingDots } from '@entur/loader';
 import { space } from '@entur/tokens';
 import { IconButton } from '@entur/button';
+import { TagChip } from '@entur/chip';
+import { Tooltip } from '@entur/tooltip';
 
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
@@ -370,7 +372,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$a = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
+var _excluded$d = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
 var DownshiftContext = /*#__PURE__*/React.createContext(null);
 var DownshiftProvider = function DownshiftProvider(_ref) {
   var children = _ref.children,
@@ -388,7 +390,7 @@ var DownshiftProvider = function DownshiftProvider(_ref) {
     style = _ref.style,
     _ref$searchable = _ref.searchable,
     searchable = _ref$searchable === void 0 ? false : _ref$searchable,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
     if (changes.type === Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem) {
       return;
@@ -448,10 +450,10 @@ var useDownshift = function useDownshift() {
   return context;
 };
 
-var _excluded$9 = ["items"];
+var _excluded$c = ["items"];
 var DropdownList$1 = function DropdownList(_ref) {
   var items = _ref.items,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var _useDownshift = useDownshift(),
     highlightedIndex = _useDownshift.highlightedIndex,
     isOpen = _useDownshift.isOpen,
@@ -499,17 +501,17 @@ var DropdownToggleButton$1 = function DropdownToggleButton() {
   }), React.createElement(DownArrowIcon, null));
 };
 
-var _excluded$8 = ["className", "children"];
+var _excluded$b = ["className", "children"];
 var DropdownLoadingDots = function DropdownLoadingDots(_ref) {
   var className = _ref.className,
     children = _ref.children,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return React.createElement("div", _extends({
     className: classNames('eds-inline-spinner', className)
   }, rest), React.createElement(LoadingDots, null), React.createElement(VisuallyHidden, null, children));
 };
 
-var _excluded$7 = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
+var _excluded$a = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
 var BaseDropdown = function BaseDropdown(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -525,14 +527,14 @@ var BaseDropdown = function BaseDropdown(_ref) {
     _ref$isFilled = _ref.isFilled,
     isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
     disableLabelAnimation = _ref.disableLabelAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useDownshift = useDownshift(),
     getLabelProps = _useDownshift.getLabelProps;
   return React.createElement("div", {
     className: "eds-dropdown-wrapper",
     style: style
   }, React.createElement(BaseFormControl, _extends({
-    append: React.createElement(Appendix$2, {
+    append: React.createElement(Appendix$1, {
       clearable: clearable,
       loading: loading,
       loadingText: loadingText,
@@ -568,7 +570,7 @@ var ClearButton$1 = function ClearButton(_ref2) {
     className: "eds-dropdown__divider"
   }));
 };
-var Appendix$2 = function Appendix(_ref3) {
+var Appendix$1 = function Appendix(_ref3) {
   var clearable = _ref3.clearable,
     loading = _ref3.loading,
     loadingText = _ref3.loadingText,
@@ -582,7 +584,7 @@ var Appendix$2 = function Appendix(_ref3) {
   return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownToggleButton$1, null)) : React.createElement(DropdownToggleButton$1, null);
 };
 
-var _excluded$6 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
+var _excluded$9 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
 var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     _ref$placeholder = _ref.placeholder,
@@ -599,7 +601,7 @@ var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     loadingText = _ref.loadingText,
     className = _ref.className,
     clearable = _ref.clearable,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var _useDownshift = useDownshift(),
     getToggleButtonProps = _useDownshift.getToggleButtonProps,
     selectedItem = _useDownshift.selectedItem,
@@ -660,7 +662,7 @@ var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), selectedItem ? selectedItem.label : placeholder));
 });
 
-var _excluded$5 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
+var _excluded$8 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
 function LowerCaseFilterTest(item, input) {
   if (!input) {
     return true;
@@ -692,7 +694,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label = _ref.label,
     disableLabelAnimation = _ref.disableLabelAnimation,
     placeholder = _ref.placeholder,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var _useDownshift = useDownshift(),
     getInputProps = _useDownshift.getInputProps,
     inputValue = _useDownshift.inputValue,
@@ -881,7 +883,7 @@ debounceTimeout) {
     if (isItemsFunction) {
       fetchItems('');
     }
-  }, [isItemsFunction, fetchItems]);
+  }, [isItemsFunction]); // eslint-disable-line react-hooks/exhaustive-deps
   return {
     items: normalizedItems,
     loading: isItemsFunction ? loading : false,
@@ -889,7 +891,7 @@ debounceTimeout) {
   };
 };
 
-var _excluded$4 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
+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) {
   var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
     debounceTimeout = _ref.debounceTimeout,
@@ -917,7 +919,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     listStyle = _ref.listStyle,
     itemFilter = _ref.itemFilter,
     disableLabelAnimation = _ref.disableLabelAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var _useResolvedItems = useResolvedItems(items, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
@@ -964,7 +966,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, searchAbleProps))));
 });
 
-var _excluded$3 = ["className", "disabled", "readOnly", "items", "loadingText", "prepend", "style", "label", "variant", "feedback", "disableLabelAnimation"];
+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,
@@ -979,7 +981,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
     variant = _ref.variant,
     feedback = _ref.feedback,
     disableLabelAnimation = _ref.disableLabelAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var _useResolvedItems = useResolvedItems(items),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading;
@@ -1022,7 +1024,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
   })));
 };
 
-var _excluded$2 = ["items", "itemsSelectedLabel", "label", "feedback", "variant", "disabled", "readOnly", "onChange", "className", "clearable", "loading", "loadingText", "openOnFocus", "style", "listStyle", "initialSelectedItems", "debounceTimeout"];
+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);
@@ -1049,36 +1051,36 @@ actionAndChanges) {
   }
 }
 var MultiSelect = function MultiSelect(_ref) {
-  var input = _ref.items,
+  var className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    debounceTimeout = _ref.debounceTimeout,
+    disabled = _ref.disabled,
+    feedback = _ref.feedback,
+    _ref$initialSelectedI = _ref.initialSelectedItems,
+    initialSelectedItems = _ref$initialSelectedI === void 0 ? [] : _ref$initialSelectedI,
+    input = _ref.items,
     _ref$itemsSelectedLab = _ref.itemsSelectedLabel,
     itemsSelectedLabel = _ref$itemsSelectedLab === void 0 ? function (items) {
       return SelectedItemsLabel(items);
     } : _ref$itemsSelectedLab,
     label = _ref.label,
-    feedback = _ref.feedback,
-    variant = _ref.variant,
-    disabled = _ref.disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {
-      return undefined;
-    } : _ref$onChange,
-    className = _ref.className,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    listStyle = _ref.listStyle,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$loadingText = _ref.loadingText,
     loadingText = _ref$loadingText === void 0 ? '' : _ref$loadingText,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
     _ref$openOnFocus = _ref.openOnFocus,
     openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     style = _ref.style,
-    listStyle = _ref.listStyle,
-    _ref$initialSelectedI = _ref.initialSelectedItems,
-    initialSelectedItems = _ref$initialSelectedI === void 0 ? [] : _ref$initialSelectedI,
-    debounceTimeout = _ref.debounceTimeout,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    variant = _ref.variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useResolvedItems = useResolvedItems(input, debounceTimeout),
     items = _useResolvedItems.items;
   var _useState = useState(initialSelectedItems),
@@ -1144,7 +1146,7 @@ var MultiSelect = function MultiSelect(_ref) {
     isFilled: selectedItems.length > 0 || isOpen,
     disabled: disabled,
     readOnly: readOnly,
-    append: React.createElement(Appendix$1, {
+    append: React.createElement(Appendix, {
       hasSelected: clearable && selectedItems.length > 0,
       loading: loading,
       loadingText: loadingText,
@@ -1213,7 +1215,7 @@ var ClearButton = function ClearButton(_ref3) {
     className: "eds-dropdown__divider"
   }));
 };
-var Appendix$1 = function Appendix(_ref4) {
+var Appendix = function Appendix(_ref4) {
   var loading = _ref4.loading,
     loadingText = _ref4.loadingText,
     readOnly = _ref4.readOnly,
@@ -1263,46 +1265,91 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
-var _excluded$1 = ["selectedItem", "isOpen", "getMenuProps", "getItemProps", "filteredItems", "highlightedIndex", "listStyle"];
+var _excluded$4 = ["selectedItems", "listItems", "inputValue", "isOpen", "getMenuProps", "getItemProps", "highlightedIndex", "showSelectAllInList", "loading", "selectAllCheckboxState", "selectAllItem", "listStyle", "noMatchesText", "loadingText", "selectedItemAriaLabel"];
 var DropdownList = function DropdownList(_ref) {
-  var selectedItem = _ref.selectedItem,
+  var selectedItems = _ref.selectedItems,
+    listItems = _ref.listItems,
     isOpen = _ref.isOpen,
     getMenuProps = _ref.getMenuProps,
     getItemProps = _ref.getItemProps,
-    filteredItems = _ref.filteredItems,
     highlightedIndex = _ref.highlightedIndex,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    selectAllCheckboxState = _ref.selectAllCheckboxState,
+    selectAllItem = _ref.selectAllItem,
     listStyle = _ref.listStyle,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React.createElement("ul", _extends({
-    className: classNames('eds-searchable-dropdown__list', {
-      'eds-searchable-dropdown__list--open': isOpen
-    })
-  }, getMenuProps(), {
+    _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);
+  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) {
+    return selectedItems.some(function (selectedItem) {
+      return selectedItem.value === item.value;
+    });
+  };
+  var selectAllListItemContent = function selectAllListItemContent() {
+    return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
+      checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
+      "aria-hidden": "true",
+      onChange: function onChange() {
+        return;
+      }
+    }), React.createElement("span", {
+      className: "eds-dropdown__list__item-text"
+    }, selectAllItem == null ? void 0 : selectAllItem.label));
+  };
+  var listItemContent = function listItemContent(item) {
+    return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
+      style: !isMultiselect ? {
+        display: 'none'
+      } : {},
+      checked: itemIsSelected(item),
+      "aria-hidden": "true",
+      onChange: function onChange() {
+        return;
+      }
+    }), 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) {
+      return React.createElement(Icon, {
+        key: index,
+        inline: true,
+        className: "eds-dropdown__list__item-icon"
+      });
+    })));
+  };
+  return React.createElement("ul", _extends({}, getMenuProps(), {
+    className: classNames('eds-dropdown__list', {
+      'eds-dropdown__list--open': isOpen
+    }),
     style: _extends({}, rest.style, listStyle)
-  }), isOpen ? filteredItems.map(function (item, index) {
-    return (
-      // eslint-disable-next-line react/jsx-key
-      React.createElement("li", _extends({
-        className: classNames('eds-searchable-dropdown__list__item', {
-          'eds-searchable-dropdown__list__item--highlighted': highlightedIndex === index,
-          'eds-searchable-dropdown__list__item--selected': (selectedItem == null ? void 0 : selectedItem.value) === item.value
-        })
-      }, getItemProps({
-        key: "" + index + item.value,
-        item: item,
-        index: index
-      })), React.createElement("span", null, item.label), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
-        return React.createElement(Icon, {
-          key: index,
-          inline: true,
-          className: "eds-searchable-dropdown__list__item-icon"
-        });
-      })), (selectedItem == null ? void 0 : selectedItem.value) === item.value && React.createElement(CheckIcon, null))
-    );
-  }) : null);
+  }), isOpen && 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);
+    return React.createElement("li", _extends({
+      key: item.value,
+      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)
+      })
+    }, getItemProps({
+      key: "" + index + item.value,
+      item: item,
+      index: index
+    })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
+  }), isOpen && isNoMatches && React.createElement("li", {
+    className: "eds-dropdown__list__item"
+  }, noMatchesText), isOpen && loading && React.createElement("li", {
+    className: "eds-dropdown__list__item"
+  }, loadingText));
 };
 
-var _excluded = ["items", "selectedItem", "onChange", "label", "placeholder", "clearable", "openOnFocus", "readonly", "feedback", "variant", "className", "listStyle"];
 function lowerCaseFilterTest(item, input) {
   if (!input) {
     return true;
@@ -1311,69 +1358,279 @@ function lowerCaseFilterTest(item, input) {
   var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
   return inputRegex.test(item.label);
 }
+var itemToString = function itemToString(item) {
+  return item ? item.label : '';
+};
+var useMultiselectUtils = function useMultiselectUtils(_ref) {
+  var listItems = _ref.listItems,
+    selectedItems = _ref.selectedItems,
+    selectAllValue = _ref.selectAllValue;
+  var hasSelectedItems = selectedItems.length > 0;
+  var listItemsWithoutSelectAll = listItems.filter(function (item) {
+    return item.value !== selectAllValue;
+  });
+  var allListItemsAreSelected = listItemsWithoutSelectAll.filter(function (item) {
+    return !selectedItems.includes(item);
+  }).length === 0;
+  var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (item) {
+    return selectedItems.includes(item);
+  });
+  var addClickedItemToSelectedItems = function addClickedItemToSelectedItems(clickedItem, onChange) {
+    return onChange([].concat(selectedItems, [clickedItem]));
+  };
+  var clickedItemIsInSelectedItems = function clickedItemIsInSelectedItems(clickedItem) {
+    return selectedItems.some(function (selectedItem) {
+      return selectedItem.value === clickedItem.value;
+    });
+  };
+  var clickedItemIsSelectAll = function clickedItemIsSelectAll(clickedItem) {
+    return clickedItem.value === selectAllValue;
+  };
+  var removeClickedItemFromSelectedItems = function removeClickedItemFromSelectedItems(clickedItem, onChange) {
+    return onChange(selectedItems.filter(function (selectedItem) {
+      return selectedItem.value !== clickedItem.value;
+    }));
+  };
+  var selectAllCheckboxState = function selectAllCheckboxState() {
+    if (allListItemsAreSelected) return true;
+    if (someListItemsAreSelected) return 'indeterminate';
+    return false;
+  };
+  var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
+    onChange([].concat(selectedItems, listItemsWithoutSelectAll.filter(function (item) {
+      return !selectedItems.includes(item);
+    })));
+  };
+  var unselectAllListItems = function unselectAllListItems(onChange) {
+    onChange(selectedItems.filter(function (item) {
+      return !listItemsWithoutSelectAll.includes(item);
+    }));
+  };
+  return {
+    addClickedItemToSelectedItems: addClickedItemToSelectedItems,
+    allListItemsAreSelected: allListItemsAreSelected,
+    clickedItemIsInSelectedItems: clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll: clickedItemIsSelectAll,
+    hasSelectedItems: hasSelectedItems,
+    listItemsWithoutSelectAll: listItemsWithoutSelectAll,
+    removeClickedItemFromSelectedItems: removeClickedItemFromSelectedItems,
+    selectAllCheckboxState: selectAllCheckboxState,
+    selectAllUnselectedItemsInListItems: selectAllUnselectedItemsInListItems,
+    someListItemsAreSelected: someListItemsAreSelected,
+    unselectAllListItems: unselectAllListItems
+  };
+};
+
+var _excluded$3 = ["tabIndex"];
+var SelectedElementsTag = function SelectedElementsTag(_ref) {
+  var getSelectedItemProps = _ref.getSelectedItemProps,
+    removeSelectedItem = _ref.removeSelectedItem,
+    selectedItem = _ref.selectedItem,
+    index = _ref.index,
+    ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected;
+  var _getSelectedItemProps = getSelectedItemProps({
+      selectedItem: selectedItem,
+      index: index
+    }),
+    selectedItemProps = _objectWithoutPropertiesLoose(_getSelectedItemProps, _excluded$3);
+  return React.createElement(TagChip, _extends({
+    className: classNames('eds-dropdown__selected-element-tag')
+  }, 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(_ref2) {
+  var clearable = _ref2.clearable,
+    readOnly = _ref2.readOnly,
+    getToggleButtonProps = _ref2.getToggleButtonProps,
+    selectedItems = _ref2.selectedItems,
+    _ref2$loading = _ref2.loading,
+    loading = _ref2$loading === void 0 ? false : _ref2$loading,
+    _ref2$loadingText = _ref2.loadingText,
+    loadingText = _ref2$loadingText === void 0 ? 'Laster resultater …' : _ref2$loadingText,
+    ariaLabelClearItems = _ref2.ariaLabelClearItems,
+    clearSelectedItemsLabel = _ref2.clearSelectedItemsLabel,
+    isOpen = _ref2.isOpen,
+    onClear = _ref2.onClear,
+    _ref2$focusable = _ref2.focusable,
+    focusable = _ref2$focusable === void 0 ? false : _ref2$focusable;
+  if (loading) {
+    return React.createElement(DropdownLoadingDots, null, loadingText);
+  }
+  if (readOnly) {
+    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: focusable,
+    clearSelectedItemsLabel: clearSelectedItemsLabel,
+    ariaLabelClearItems: ariaLabelClearItems
+  }), React.createElement("div", {
+    className: "eds-dropdown-appendix__divider"
+  })), React.createElement(ToggleButton, {
+    getToggleButtonProps: getToggleButtonProps,
+    isOpen: isOpen,
+    focusable: focusable
+  }));
+};
+var ClearableButton = function ClearableButton(_ref3) {
+  var onClear = _ref3.onClear,
+    _ref3$clearSelectedIt = _ref3.clearSelectedItemsLabel,
+    clearSelectedItemsLabel = _ref3$clearSelectedIt === void 0 ? 'Fjern valgte' : _ref3$clearSelectedIt,
+    _ref3$ariaLabelClearI = _ref3.ariaLabelClearItems,
+    ariaLabelClearItems = _ref3$ariaLabelClearI === void 0 ? 'Fjern valgte' : _ref3$ariaLabelClearI,
+    _ref3$focusable = _ref3.focusable,
+    focusable = _ref3$focusable === void 0 ? false : _ref3$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": ariaLabelClearItems
+  }, React.createElement(CloseSmallIcon, {
+    "aria-hidden": "true"
+  })));
+};
+var ToggleButton = function ToggleButton(_ref4) {
+  var getToggleButtonProps = _ref4.getToggleButtonProps,
+    isOpen = _ref4.isOpen,
+    _ref4$closeAriaLabel = _ref4.closeAriaLabel,
+    closeAriaLabel = _ref4$closeAriaLabel === void 0 ? 'Lukk liste med valg' : _ref4$closeAriaLabel,
+    _ref4$openAriaLabel = _ref4.openAriaLabel,
+    openAriaLabel = _ref4$openAriaLabel === void 0 ? 'Åpne liste med valg' : _ref4$openAriaLabel,
+    _ref4$focusable = _ref4.focusable,
+    focusable = _ref4$focusable === void 0 ? false : _ref4$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"
+  }));
+};
+
+var _excluded$2 = ["className", "clearable", "debounceTimeout", "disableLabelAnimation", "feedback", "itemFilter", "items", "label", "listStyle", "onChange", "openOnFocus", "placeholder", "readonly", "selectedItem", "selectOnBlur", "variant"];
 // TODO Husk å @deprecate searchable-prop-en til Dropdown når denne komponenten skal ha official release
 // TODO Husk å generelt legge inn støtte for typeof value === string
 var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
   var _selectedItem$label;
-  var items = _ref.items,
-    value = _ref.selectedItem,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    placeholder = _ref.placeholder,
+  var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    debounceTimeout = _ref.debounceTimeout,
+    _ref$disableLabelAnim = _ref.disableLabelAnimation,
+    disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
+    feedback = _ref.feedback,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? lowerCaseFilterTest : _ref$itemFilter,
+    initialItems = _ref.items,
+    label = _ref.label,
+    listStyle = _ref.listStyle,
+    onChange = _ref.onChange,
     _ref$openOnFocus = _ref.openOnFocus,
     openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+    placeholder = _ref.placeholder,
     _ref$readonly = _ref.readonly,
     readonly = _ref$readonly === void 0 ? false : _ref$readonly,
-    feedback = _ref.feedback,
+    value = _ref.selectedItem,
+    _ref$selectOnBlur = _ref.selectOnBlur,
+    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
-    className = _ref.className,
-    listStyle = _ref.listStyle,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _React$useState = React.useState(items),
-    filteredItems = _React$useState[0],
-    setFilteredItems = _React$useState[1];
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useState = useState(false),
     hideSelectedItem = _useState[0],
     setHideSelectedItem = _useState[1];
   var inputRef = useRef(null);
-  var stateReducer = React.useCallback(function (_, actionAndChanges) {
-    var type = actionAndChanges.type,
-      changes = actionAndChanges.changes;
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
+    normalizedItems = _useResolvedItems.items,
+    loading = _useResolvedItems.loading,
+    fetchItems = _useResolvedItems.fetchItems;
+  var _React$useState = React.useState(normalizedItems),
+    listItems = _React$useState[0],
+    setListItems = _React$useState[1];
+  var filterListItems = function filterListItems(_ref2) {
+    var inputValue = _ref2.inputValue;
+    return setListItems(normalizedItems.filter(function (item) {
+      return itemFilter(item, inputValue);
+    }));
+  };
+  React.useEffect(function () {
+    filterListItems({
+      inputValue: inputValue
+    });
+  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  var stateReducer = React.useCallback(function (_, _ref3) {
+    var type = _ref3.type,
+      changes = _ref3.changes;
     switch (type) {
       case useCombobox.stateChangeTypes.ItemClick:
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.InputBlur:
       case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-        return _extends({}, changes, changes.selectedItem && {
-          inputValue: ''
-        });
+        {
+          filterListItems({
+            inputValue: ''
+          });
+          return _extends({}, changes, {
+            inputValue: '' // reset input value to show placeholder on focus
+          });
+        }
+
+      case useCombobox.stateChangeTypes.InputChange:
+        {
+          var _changes$inputValue;
+          var leadingWhitespaceTest = /^\s+/g;
+          if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) setInputValue(changes.inputValue.replace(leadingWhitespaceTest, ''));else {
+            var _changes$inputValue2, _changes$inputValue3;
+            fetchItems((_changes$inputValue2 = changes.inputValue) != null ? _changes$inputValue2 : '');
+            filterListItems({
+              inputValue: (_changes$inputValue3 = changes.inputValue) != null ? _changes$inputValue3 : ''
+            });
+          }
+          return changes;
+        }
       default:
         return changes;
     }
-  }, []);
+  }, [fetchItems, filterListItems]);
   var _useCombobox = useCombobox(_extends({
-      onInputValueChange: function onInputValueChange(_ref2) {
-        var inputValue = _ref2.inputValue;
-        setFilteredItems(items.filter(function (item) {
-          return lowerCaseFilterTest(item, inputValue);
-        }));
-      },
-      items: filteredItems,
-      itemToString: function itemToString(item) {
-        if (item) return item.value;
-        return '';
-      },
-      stateReducer: stateReducer,
+      items: listItems,
       selectedItem: value,
-      onSelectedItemChange: function onSelectedItemChange(_ref3) {
-        var newSelectedItem = _ref3.selectedItem;
-        return onChange(newSelectedItem != null ? newSelectedItem : null);
+      itemToString: itemToString,
+      stateReducer: stateReducer,
+      onStateChange: function onStateChange(_ref4) {
+        var type = _ref4.type,
+          clickedItem = _ref4.selectedItem;
+        switch (type) {
+          // @ts-expect-error This falltrough is wanted
+          case useCombobox.stateChangeTypes.InputBlur:
+            if (!selectOnBlur) break;
+          case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
+          case useCombobox.stateChangeTypes.ItemClick:
+            onChange(clickedItem != null ? clickedItem : null);
+        }
       }
     }, rest)),
     isOpen = _useCombobox.isOpen,
+    openMenu = _useCombobox.openMenu,
     getToggleButtonProps = _useCombobox.getToggleButtonProps,
     getLabelProps = _useCombobox.getLabelProps,
     getMenuProps = _useCombobox.getMenuProps,
@@ -1382,39 +1639,46 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     highlightedIndex = _useCombobox.highlightedIndex,
     getItemProps = _useCombobox.getItemProps,
     selectedItem = _useCombobox.selectedItem,
-    openMenu = _useCombobox.openMenu,
-    inputValue = _useCombobox.inputValue;
+    inputValue = _useCombobox.inputValue,
+    setInputValue = _useCombobox.setInputValue;
   return React.createElement("div", {
-    className: "eds-searchable-dropdown__wrapper"
+    className: "eds-dropdown__wrapper"
   }, React.createElement(BaseFormControl, _extends({
-    append: React.createElement(Appendix, {
-      selectedItem: selectedItem,
+    append: React.createElement(FieldAppend, {
+      selectedItems: [selectedItem],
       isOpen: isOpen,
       clearable: clearable,
       loading: false,
       loadingText: '',
       readOnly: readonly,
-      onChange: onChange,
+      onClear: function onClear() {
+        var _inputRef$current;
+        onChange(null);
+        setInputValue('');
+        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+        if (typeof initialItems === 'function') fetchItems(inputValue != null ? inputValue : '');
+      },
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: classNames('eds-searchable-dropdown', className),
+    disableLabelAnimation: disableLabelAnimation,
+    className: classNames('eds-dropdown', className),
     label: label,
-    isFilled: selectedItem ? true : false,
+    isFilled: selectedItem || inputValue !== '',
     feedback: feedback,
     variant: variant,
     readOnly: readonly,
     labelProps: getLabelProps()
   }, getComboboxProps(), rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
-    className: "eds-searchable-dropdown__selected-item__wrapper"
+    className: "eds-dropdown__selected-item__wrapper"
   }, React.createElement("span", {
-    className: "eds-searchable-dropdown__selected-item",
+    className: "eds-dropdown__selected-item",
     onClick: function onClick() {
-      var _inputRef$current;
-      return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      var _inputRef$current2;
+      return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
   }, selectedItem.label)), React.createElement("input", _extends({
     placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
-    className: "eds-searchable-dropdown__input eds-form-control"
+    className: "eds-dropdown__input eds-form-control"
   }, getInputProps({
     onFocus: function onFocus() {
       if (!isOpen && openOnFocus) openMenu();
@@ -1425,54 +1689,340 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     },
     ref: inputRef
   })))), React.createElement(DropdownList, {
-    selectedItem: selectedItem,
+    selectedItems: selectedItem !== null ? [selectedItem] : [],
     isOpen: isOpen,
-    filteredItems: filteredItems,
+    listItems: listItems,
     highlightedIndex: highlightedIndex,
     listStyle: listStyle,
     getMenuProps: getMenuProps,
-    getItemProps: getItemProps
+    getItemProps: getItemProps,
+    loading: loading
   }));
 };
-var Appendix = function Appendix(_ref4) {
-  var clearable = _ref4.clearable,
-    readOnly = _ref4.readOnly,
-    getToggleButtonProps = _ref4.getToggleButtonProps,
-    selectedItem = _ref4.selectedItem,
-    isOpen = _ref4.isOpen,
-    onChange = _ref4.onChange;
-  // TODO implement loading / async
-  // if (loading) {
-  //   return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;
-  // }
-  if (readOnly) {
-    return null;
-  }
-  return React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center'
+
+var _excluded$1 = ["ariaLabelRemoveSelected", "className", "clearable", "debounceTimeout", "feedback", "hideSelectAll", "items", "label", "listStyle", "onChange", "openOnFocus", "placeholder", "readonly", "selectAllLabel", "selectedItems", "selectOnBlur", "style", "variant"];
+var MultiSelectBeta = function MultiSelectBeta(_ref) {
+  var _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
+    ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
+    className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    feedback = _ref.feedback,
+    _ref$hideSelectAll = _ref.hideSelectAll,
+    hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
+    initialItems = _ref.items,
+    label = _ref.label,
+    listStyle = _ref.listStyle,
+    onChange = _ref.onChange,
+    _ref$openOnFocus = _ref.openOnFocus,
+    openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+    placeholder = _ref.placeholder,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    _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);
+  var _React$useState = React.useState(0),
+    lastHighlightedIndex = _React$useState[0],
+    setLastHighlightedIndex = _React$useState[1];
+  var inputRef = useRef(null);
+  var _useResolvedItems = useResolvedItems(initialItems),
+    normalizedItems = _useResolvedItems.items,
+    loading = _useResolvedItems.loading,
+    fetchItems = _useResolvedItems.fetchItems;
+  var selectAll = {
+    value: useRandomId('select-all'),
+    label: selectAllLabel
+  };
+  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);
+    })));
+  };
+  React.useEffect(function () {
+    filterListItems({
+      inputValue: inputValue
+    });
+  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
+  var _useMultiselectUtils = useMultiselectUtils({
+      listItems: listItems,
+      selectAllValue: selectAll.value,
+      selectedItems: selectedItems
+    }),
+    addClickedItemToSelectedItems = _useMultiselectUtils.addClickedItemToSelectedItems,
+    allListItemsAreSelected = _useMultiselectUtils.allListItemsAreSelected,
+    clickedItemIsInSelectedItems = _useMultiselectUtils.clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll = _useMultiselectUtils.clickedItemIsSelectAll,
+    hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
+    removeClickedItemFromSelectedItems = _useMultiselectUtils.removeClickedItemFromSelectedItems,
+    selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState,
+    selectAllUnselectedItemsInListItems = _useMultiselectUtils.selectAllUnselectedItemsInListItems,
+    unselectAllListItems = _useMultiselectUtils.unselectAllListItems;
+  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 stateReducer = React.useCallback(function (_, _ref3) {
+    var _inputRef$current$val, _inputRef$current, _inputRef$current$val2, _inputRef$current2, _changes$inputValue, _changes$inputValue2, _changes$inputValue3;
+    var changes = _ref3.changes,
+      type = _ref3.type;
+    if (changes != null && changes.highlightedIndex && (changes == null ? void 0 : changes.highlightedIndex) >= 0) setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
+    switch (type) {
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.ItemClick:
+        return _extends({}, changes, {
+          isOpen: true,
+          inputValue: (_inputRef$current$val = inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : '' // don't reset input value on select
+        });
+
+      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+        return _extends({}, changes, {
+          inputValue: (_inputRef$current$val2 = inputRef == null ? void 0 : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : '' // don't reset input value on select
+        });
+
+      case useCombobox.stateChangeTypes.InputChange:
+        if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(/^\s+/g)) {
+          var _changes$inputValue$r;
+          // remove leading whitespace if it exists
+          return _extends({}, changes, {
+            inputValue: (_changes$inputValue$r = changes.inputValue.replace(/^\s+/g, '')) != null ? _changes$inputValue$r : ''
+          });
+        }
+        if (typeof initialItems === 'function') fetchItems((_changes$inputValue2 = changes.inputValue) != null ? _changes$inputValue2 : ''); // fetch items only if user provides a function as items
+        filterListItems({
+          inputValue: (_changes$inputValue3 = changes.inputValue) != null ? _changes$inputValue3 : ''
+        });
+        return changes;
+      case useCombobox.stateChangeTypes.InputBlur:
+        return _extends({}, changes, {
+          inputValue: ''
+        });
+      default:
+        return changes;
     }
-  }, clearable && selectedItem && React.createElement(React.Fragment, null, React.createElement(IconButton, {
-    className: "eds-searchable-dropdown-appendix__clear-button",
-    type: "button",
-    tabIndex: -1,
-    onClick: function onClick() {
-      return onChange(null);
+  }, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
+  var _useCombobox = useCombobox(_extends({
+      defaultHighlightedIndex: lastHighlightedIndex,
+      items: listItems,
+      itemToString: itemToString,
+      selectedItem: null,
+      stateReducer: stateReducer,
+      onStateChange: function onStateChange(_ref4) {
+        var type = _ref4.type,
+          clickedItem = _ref4.selectedItem;
+        // clickedItem means item chosen either via mouse or keyboard
+        if (!clickedItem) return;
+        switch (type) {
+          // @ts-expect-error This falltrough is wanted
+          case useCombobox.stateChangeTypes.InputBlur:
+            if (!selectOnBlur) break;
+          case useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
+          case useCombobox.stateChangeTypes.ItemClick:
+            if (clickedItemIsSelectAll(clickedItem)) {
+              if (allListItemsAreSelected) {
+                return unselectAllListItems(onChange);
+              }
+              return selectAllUnselectedItemsInListItems(onChange);
+            }
+            if (clickedItemIsInSelectedItems(clickedItem)) {
+              return removeClickedItemFromSelectedItems(clickedItem, onChange);
+            }
+            addClickedItemToSelectedItems(clickedItem, onChange);
+        }
+      }
+    }, rest)),
+    getComboboxProps = _useCombobox.getComboboxProps,
+    getInputProps = _useCombobox.getInputProps,
+    getItemProps = _useCombobox.getItemProps,
+    getLabelProps = _useCombobox.getLabelProps,
+    getMenuProps = _useCombobox.getMenuProps,
+    getToggleButtonProps = _useCombobox.getToggleButtonProps,
+    highlightedIndex = _useCombobox.highlightedIndex,
+    inputValue = _useCombobox.inputValue,
+    isOpen = _useCombobox.isOpen,
+    openMenu = _useCombobox.openMenu,
+    setInputValue = _useCombobox.setInputValue;
+  // 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"
+  }, React.createElement(BaseFormControl, _extends({
+    append: React.createElement(FieldAppend, {
+      selectedItems: selectedItems,
+      isOpen: isOpen,
+      clearable: clearable,
+      loading: loading,
+      loadingText: '',
+      readOnly: readonly,
+      onClear: function onClear() {
+        var _inputRef$current3;
+        onChange([]);
+        setInputValue('');
+        (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
+        if (typeof initialItems === 'function') fetchItems(inputValue != null ? inputValue : '');
+      },
+      getToggleButtonProps: getToggleButtonProps
+    }),
+    className: classNames('eds-dropdown', className),
+    label: label,
+    isFilled: hasSelectedItems || inputValue !== '',
+    feedback: feedback,
+    variant: variant,
+    readOnly: readonly,
+    style: style,
+    labelProps: _extends({
+      'aria-label': label + ", multiselect, " + selectedItems.length + " valgte elementer"
+    }, getLabelProps())
+  }, comboboxProps, rest), React.createElement("div", {
+    className: classNames('eds-dropdown__selected-items-and-input', {
+      'eds-dropdown__selected-items-and-input--filled': hasSelectedItems
+    }),
+    onClick: function onClick(e) {
+      var _inputRef$current4;
+      if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
     }
-  }, React.createElement(CloseSmallIcon, null)), React.createElement("div", {
-    className: "eds-searchable-dropdown-appendix__divider"
-  })), React.createElement(IconButton, _extends({}, getToggleButtonProps({
-    className: classNames('eds-searchable-dropdown-appendix__toggle-button', {
-      'eds-searchable-dropdown-appendix__toggle-button--open': isOpen
-    })
-  }), {
-    tabIndex: -1,
-    type: "button"
-  }), React.createElement(DownArrowIcon, null)));
+  }, selectedItems.map(function (selectedItem, index) {
+    return React.createElement(SelectedElementsTag, {
+      index: index,
+      key: selectedItem.value,
+      getSelectedItemProps: getSelectedItemProps,
+      selectedItem: selectedItem,
+      removeSelectedItem: removeSelectedItem,
+      ariaLabelRemoveSelected: ariaLabelRemoveSelected
+    });
+  }), React.createElement("input", _extends({
+    placeholder: placeholder,
+    className: "eds-dropdown__input eds-form-control",
+    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
+  }, getInputProps(getDropdownProps({
+    preventKeyAction: isOpen,
+    onFocus: function onFocus() {
+      if (!isOpen && openOnFocus) openMenu();
+    },
+    ref: inputRef,
+    value: inputValue != null ? inputValue : ''
+  })))))), React.createElement(DropdownList, {
+    listItems: listItems,
+    selectedItems: selectedItems,
+    inputValue: inputValue,
+    isOpen: isOpen,
+    highlightedIndex: highlightedIndex,
+    getMenuProps: getMenuProps,
+    getItemProps: getItemProps,
+    selectAllItem: selectAll,
+    selectAllCheckboxState: selectAllCheckboxState,
+    listStyle: listStyle,
+    loading: loading
+  }));
+};
+
+var _excluded = ["className", "clearable", "debounceTimeout", "feedback", "items", "label", "listStyle", "onChange", "openOnFocus", "placeholder", "readonly", "selectedItem", "selectOnBlur", "selectOnTab", "variant"];
+var DropdownBeta = function DropdownBeta(_ref) {
+  var _selectedItem$label;
+  var className = _ref.className,
+    debounceTimeout = _ref.debounceTimeout,
+    feedback = _ref.feedback,
+    initialItems = _ref.items,
+    label = _ref.label,
+    listStyle = _ref.listStyle,
+    onChange = _ref.onChange,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    selectedItem = _ref.selectedItem,
+    _ref$selectOnBlur = _ref.selectOnBlur,
+    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
+    normalizedItems = _useResolvedItems.items,
+    loading = _useResolvedItems.loading;
+  var _useSelect = useSelect({
+      items: normalizedItems,
+      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:
+            if (!selectOnBlur) break;
+          case useSelect.stateChangeTypes.MenuKeyDownEnter: // eslint-disable-line no-fallthrough
+          case useSelect.stateChangeTypes.ItemClick:
+            onChange == null ? void 0 : onChange(clickedItem !== undefined ? clickedItem : null);
+        }
+      },
+      itemToString: itemToString
+    }),
+    isOpen = _useSelect.isOpen,
+    getToggleButtonProps = _useSelect.getToggleButtonProps,
+    getLabelProps = _useSelect.getLabelProps,
+    getMenuProps = _useSelect.getMenuProps,
+    highlightedIndex = _useSelect.highlightedIndex,
+    getItemProps = _useSelect.getItemProps;
+  return React.createElement("div", {
+    className: "eds-dropdown__wrapper"
+  }, React.createElement(BaseFormControl, _extends({
+    append: React.createElement(FieldAppend, {
+      selectedItems: [selectedItem],
+      isOpen: isOpen,
+      clearable: true,
+      loading: loading,
+      loadingText: '',
+      readOnly: readonly,
+      onClear: function onClear() {
+        onChange == null ? void 0 : onChange(null);
+      },
+      getToggleButtonProps: getToggleButtonProps,
+      clearSelectedItemsLabel: "Fjern valgt",
+      ariaLabelClearItems: (selectedItem == null ? void 0 : selectedItem.label) + " valgt, trykk for \xE5 fjerne valget",
+      focusable: true
+    }),
+    className: classNames('eds-dropdown', className, {
+      'eds-dropdown--not-filled': selectedItem === null
+    }),
+    label: label,
+    labelId: getLabelProps().id,
+    labelProps: getLabelProps(),
+    disableLabelAnimation: true,
+    isFilled: selectedItem !== null,
+    feedback: feedback,
+    variant: variant,
+    readOnly: readonly
+  }, rest), React.createElement("div", _extends({
+    className: "eds-dropdown__selected-item-button"
+  }, getToggleButtonProps()), (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : '')), React.createElement(DropdownList, {
+    selectedItems: selectedItem !== null ? [selectedItem] : [],
+    isOpen: isOpen,
+    listItems: normalizedItems,
+    highlightedIndex: highlightedIndex,
+    listStyle: listStyle,
+    getMenuProps: getMenuProps,
+    getItemProps: getItemProps,
+    loading: loading
+  }));
 };
 
 warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
 
-export { Dropdown, MultiSelect, NativeDropdown, SearchableDropdownBeta };
+export { Dropdown, DropdownBeta, MultiSelect, MultiSelectBeta, NativeDropdown, SearchableDropdownBeta };
 //# sourceMappingURL=dropdown.esm.js.map