@entur/dropdown 5.0.0-beta.2 → 5.0.0-beta.3

package/dist/dropdown.cjs.development.js

@@ -1304,27 +1304,29 @@ var DropdownList = function DropdownList(_ref) {
   };
   var selectAllListItemContent = function selectAllListItemContent() {
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(form.Checkbox, {
-      className: "eds-dropdown__list__item__checkbox",
-      checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
       "aria-hidden": "true",
+      checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
+      className: "eds-dropdown__list__item__checkbox",
       onChange: function onChange() {
         return;
-      }
+      },
+      tabIndex: -1
     }), React__default["default"].createElement("span", {
       className: "eds-dropdown__list__item__text"
     }, selectAllItem == null ? void 0 : selectAllItem.label));
   };
   var listItemContent = function listItemContent(item) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(form.Checkbox, {
-      style: !isMultiselect ? {
-        display: 'none'
-      } : {},
-      className: "eds-dropdown__list__item__checkbox",
-      checked: itemIsSelected(item),
       "aria-hidden": "true",
+      checked: itemIsSelected(item),
+      className: "eds-dropdown__list__item__checkbox",
       onChange: function onChange() {
         return;
-      }
+      },
+      style: !isMultiselect ? {
+        display: 'none'
+      } : {},
+      tabIndex: -1
     }), React__default["default"].createElement("span", {
       className: "eds-dropdown__list__item__text"
     }, item.label, React__default["default"].createElement(a11y.VisuallyHidden, null, selectedItemAriaLabel)), item.icons && React__default["default"].createElement("span", null, item.icons.map(function (Icon, index) {
@@ -1335,33 +1337,37 @@ var DropdownList = function DropdownList(_ref) {
       });
     })));
   };
-  return React__default["default"].createElement("ul", _extends({}, getMenuProps(), {
-    className: classNames__default["default"]('eds-dropdown__list', {
-      'eds-dropdown__list--open': isOpen
-    }),
-    style: _extends({}, rest.style, listStyle)
-  }), 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__default["default"].createElement(React__default["default"].Fragment, null);
-    return React__default["default"].createElement("li", _extends({
-      key: item.value,
-      className: classNames__default["default"]('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__default["default"].createElement("li", {
-    className: "eds-dropdown__list__item"
-  }, noMatchesText), isOpen && loading && React__default["default"].createElement("li", {
-    className: "eds-dropdown__list__item"
-  }, loadingText));
+  return (
+    // use popover from @entur/tooltip when the package uses floating-ui
+    React__default["default"].createElement("ul", _extends({}, getMenuProps(), {
+      className: classNames__default["default"]('eds-dropdown__list', {
+        'eds-dropdown__list--open': isOpen
+      }),
+      style: _extends({}, rest.style, listStyle)
+    }), 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__default["default"].createElement(React__default["default"].Fragment, null);
+      return React__default["default"].createElement("li", _extends({
+        key: item.value,
+        className: classNames__default["default"]('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__default["default"].createElement("li", {
+      className: "eds-dropdown__list__item"
+    }, noMatchesText), isOpen && loading && React__default["default"].createElement("li", {
+      className: "eds-dropdown__list__item"
+    }, loadingText))
+  );
 };
 
+var EMPTY_INPUT = '';
 function lowerCaseFilterTest(item, input) {
   if (!input) {
     return true;
@@ -1398,6 +1404,20 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var clickedItemIsSelectAll = function clickedItemIsSelectAll(clickedItem) {
     return clickedItem.value === selectAllValue;
   };
+  var handleListItemClicked = function handleListItemClicked(_ref2) {
+    var clickedItem = _ref2.clickedItem,
+      onChange = _ref2.onChange;
+    if (clickedItemIsSelectAll(clickedItem)) {
+      if (allListItemsAreSelected) {
+        return unselectAllListItems(onChange);
+      }
+      return selectAllUnselectedItemsInListItems(onChange);
+    }
+    if (clickedItemIsInSelectedItems(clickedItem)) {
+      return removeClickedItemFromSelectedItems(clickedItem, onChange);
+    }
+    addClickedItemToSelectedItems(clickedItem, onChange);
+  };
   var removeClickedItemFromSelectedItems = function removeClickedItemFromSelectedItems(clickedItem, onChange) {
     return onChange(selectedItems.filter(function (selectedItem) {
       return selectedItem.value !== clickedItem.value;
@@ -1423,6 +1443,7 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     allListItemsAreSelected: allListItemsAreSelected,
     clickedItemIsInSelectedItems: clickedItemIsInSelectedItems,
     clickedItemIsSelectAll: clickedItemIsSelectAll,
+    handleListItemClicked: handleListItemClicked,
     hasSelectedItems: hasSelectedItems,
     listItemsWithoutSelectAll: listItemsWithoutSelectAll,
     removeClickedItemFromSelectedItems: removeClickedItemFromSelectedItems,
@@ -1436,18 +1457,23 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
 var _excluded$3 = ["tabIndex"];
 var SelectedItemTag = function SelectedItemTag(_ref) {
   var _getSelectedItemProps;
-  var getSelectedItemProps = _ref.getSelectedItemProps,
-    removeSelectedItem = _ref.removeSelectedItem,
-    selectedItem = _ref.selectedItem,
+  var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
+    disabled = _ref.disabled,
+    getSelectedItemProps = _ref.getSelectedItemProps,
     index = _ref.index,
-    ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected;
+    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__default["default"].createElement(chip.TagChip, _extends({
-    className: classNames__default["default"]('eds-dropdown__selected-element-tag')
+    className: classNames__default["default"]('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();
@@ -1460,47 +1486,48 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
   }, selectedItem.label));
 };
 var FieldAppend = function FieldAppend(_ref3) {
-  var clearable = _ref3.clearable,
-    readOnly = _ref3.readOnly,
+  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,
-    selectedItems = _ref3.selectedItems,
+    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,
-    ariaLabelClearItems = _ref3.ariaLabelClearItems,
-    clearSelectedItemsLabel = _ref3.clearSelectedItemsLabel,
-    isOpen = _ref3.isOpen,
     onClear = _ref3.onClear,
-    _ref3$focusable = _ref3.focusable,
-    focusable = _ref3$focusable === void 0 ? false : _ref3$focusable;
+    selectedItems = _ref3.selectedItems;
   if (loading) {
     return React__default["default"].createElement(DropdownLoadingDots, null, loadingText);
   }
-  if (readOnly) {
+  if (disabled) {
     return null;
   }
-  return React__default["default"].createElement("div", {
-    className: "eds-dropdown-appendix"
-  }, clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ClearableButton, {
-    onClear: onClear,
-    focusable: focusable,
-    clearSelectedItemsLabel: clearSelectedItemsLabel,
-    ariaLabelClearItems: ariaLabelClearItems
-  }), React__default["default"].createElement("div", {
-    className: "eds-dropdown-appendix__divider"
-  })), React__default["default"].createElement(ToggleButton, {
-    getToggleButtonProps: getToggleButtonProps,
-    isOpen: isOpen,
-    focusable: focusable
-  }));
+  return (
+    // to have a natural tab order, these elements are ordered opposite of how they are displayed
+    React__default["default"].createElement("div", {
+      className: "eds-dropdown-appendix"
+    }, React__default["default"].createElement(ToggleButton, {
+      getToggleButtonProps: getToggleButtonProps,
+      isOpen: isOpen,
+      focusable: focusable
+    }), clearable && (selectedItems == null ? void 0 : selectedItems.length) > 0 && selectedItems[0] !== null && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
+      className: "eds-dropdown-appendix__divider"
+    }), React__default["default"].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$ariaLabelClearI = _ref4.ariaLabelClearItems,
-    ariaLabelClearItems = _ref4$ariaLabelClearI === void 0 ? 'Fjern valgte' : _ref4$ariaLabelClearI,
     _ref4$focusable = _ref4.focusable,
     focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
   return React__default["default"].createElement(tooltip.Tooltip, {
@@ -1512,7 +1539,7 @@ var ClearableButton = function ClearableButton(_ref4) {
     type: "button",
     tabIndex: focusable ? 0 : 1,
     onClick: onClear,
-    "aria-label": ariaLabelClearItems
+    "aria-label": clearSelectedItemsLabel
   }, React__default["default"].createElement(icons.CloseSmallIcon, {
     "aria-hidden": "true"
   })));
@@ -1532,22 +1559,22 @@ var ToggleButton = function ToggleButton(_ref5) {
     })
   }), {
     "aria-label": isOpen ? closeAriaLabel : openAriaLabel,
-    tabIndex: focusable ? 0 : 1,
+    tabIndex: focusable ? 0 : -1,
     type: "button"
   }), React__default["default"].createElement(icons.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 _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 _selectedItem$label;
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
     debounceTimeout = _ref.debounceTimeout,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$disableLabelAnim = _ref.disableLabelAnimation,
     disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
     feedback = _ref.feedback,
@@ -1556,43 +1583,59 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     initialItems = _ref.items,
     label = _ref.label,
     listStyle = _ref.listStyle,
+    loadingText = _ref.loadingText,
     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,
+    prepend = _ref.prepend,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     value = _ref.selectedItem,
     _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$2);
   var _useState = React.useState(false),
     hideSelectedItem = _useState[0],
     setHideSelectedItem = _useState[1];
+  var _React$useState = React__default["default"].useState(0),
+    lastHighlightedIndex = _React$useState[0],
+    setLastHighlightedIndex = _React$useState[1];
   var inputRef = React.useRef(null);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
     fetchItems = _useResolvedItems.fetchItems;
-  var _React$useState = React__default["default"].useState(normalizedItems),
-    listItems = _React$useState[0],
-    setListItems = _React$useState[1];
+  var _React$useState2 = React__default["default"].useState(normalizedItems),
+    listItems = _React$useState2[0],
+    setListItems = _React$useState2[1];
   var filterListItems = function filterListItems(_ref2) {
     var inputValue = _ref2.inputValue;
     return setListItems(normalizedItems.filter(function (item) {
       return itemFilter(item, inputValue);
     }));
   };
+  var updateListItems = function updateListItems(_ref3) {
+    var inputValue = _ref3.inputValue;
+    if (typeof initialItems === 'function') fetchItems(inputValue != null ? inputValue : EMPTY_INPUT); // fetch items only if user provides a function as items
+    filterListItems({
+      inputValue: inputValue != null ? inputValue : EMPTY_INPUT
+    });
+  };
   React__default["default"].useEffect(function () {
     filterListItems({
       inputValue: inputValue
     });
   }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
-  var stateReducer = React__default["default"].useCallback(function (_, _ref3) {
-    var type = _ref3.type,
-      changes = _ref3.changes;
+  var stateReducer = React__default["default"].useCallback(function (_, _ref4) {
+    var type = _ref4.type,
+      changes = _ref4.changes;
+    if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
+      setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
+    }
     switch (type) {
       case Downshift.useCombobox.stateChangeTypes.ItemClick:
       case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
@@ -1600,10 +1643,10 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       case Downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
         {
           filterListItems({
-            inputValue: ''
+            inputValue: EMPTY_INPUT
           });
           return _extends({}, changes, {
-            inputValue: '' // reset input value to show placeholder on focus
+            inputValue: EMPTY_INPUT // reset input value to show placeholder on focus
           });
         }
 
@@ -1611,11 +1654,18 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
         {
           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 : ''
+          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]);
+              }
+            }
+          } else {
+            updateListItems({
+              inputValue: changes.inputValue
             });
           }
           return changes;
@@ -1625,13 +1675,14 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     }
   }, [fetchItems, filterListItems]);
   var _useCombobox = Downshift.useCombobox(_extends({
+      defaultHighlightedIndex: lastHighlightedIndex,
       items: listItems,
-      selectedItem: value,
       itemToString: itemToString,
+      selectedItem: value,
       stateReducer: stateReducer,
-      onStateChange: function onStateChange(_ref4) {
-        var type = _ref4.type,
-          clickedItem = _ref4.selectedItem;
+      onStateChange: function onStateChange(_ref5) {
+        var type = _ref5.type,
+          clickedItem = _ref5.selectedItem;
         switch (type) {
           // @ts-expect-error This falltrough is wanted
           case Downshift.useCombobox.stateChangeTypes.InputBlur:
@@ -1654,33 +1705,41 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     selectedItem = _useCombobox.selectedItem,
     inputValue = _useCombobox.inputValue,
     setInputValue = _useCombobox.setInputValue;
+  var handleOnClear = function handleOnClear() {
+    var _inputRef$current;
+    onChange(null);
+    setInputValue(EMPTY_INPUT);
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+    updateListItems({
+      inputValue: inputValue
+    });
+  };
   return React__default["default"].createElement("div", {
     className: "eds-dropdown__wrapper"
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
     append: React__default["default"].createElement(FieldAppend, {
-      selectedItems: [selectedItem],
-      isOpen: isOpen,
       clearable: clearable,
-      loading: false,
-      loadingText: '',
-      readOnly: readonly,
-      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
+      clearSelectedItemsLabel: "Fjern valgt",
+      disabled: readOnly || disabled,
+      focusable: false,
+      getToggleButtonProps: getToggleButtonProps,
+      isOpen: isOpen,
+      loading: loading,
+      loadingText: loadingText,
+      onClear: handleOnClear,
+      selectedItems: [selectedItem]
     }),
-    disableLabelAnimation: disableLabelAnimation,
     className: classNames__default["default"]('eds-dropdown', className),
-    label: label,
-    isFilled: selectedItem || inputValue !== '',
+    disabled: disabled,
+    disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
-    variant: variant,
-    readOnly: readonly,
-    labelProps: getLabelProps()
+    isFilled: selectedItem || inputValue !== EMPTY_INPUT,
+    label: label,
+    labelProps: getLabelProps(),
+    prepend: prepend,
+    readOnly: readOnly,
+    style: style,
+    variant: variant
   }, getComboboxProps(), rest), !hideSelectedItem && selectedItem && !inputValue && React__default["default"].createElement("span", {
     className: "eds-dropdown__selected-item__wrapper"
   }, React__default["default"].createElement("span", {
@@ -1690,30 +1749,32 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       return (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
   }, selectedItem.label)), React__default["default"].createElement("input", _extends({
-    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
-    className: "eds-dropdown__input eds-form-control"
+    className: "eds-dropdown__input eds-form-control",
+    disabled: readOnly || disabled,
+    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder
   }, getInputProps({
+    onBlur: function onBlur() {
+      setHideSelectedItem(false);
+    },
     onFocus: function onFocus() {
       if (!isOpen && openOnFocus) openMenu();
       setHideSelectedItem(true);
     },
-    onBlur: function onBlur() {
-      setHideSelectedItem(false);
-    },
     ref: inputRef
   })))), React__default["default"].createElement(DropdownList, {
-    selectedItems: selectedItem !== null ? [selectedItem] : [],
     isOpen: isOpen,
     listItems: listItems,
-    highlightedIndex: highlightedIndex,
     listStyle: listStyle,
-    getMenuProps: getMenuProps,
+    loading: loading,
+    loadingText: loadingText,
     getItemProps: getItemProps,
-    loading: loading
+    getMenuProps: getMenuProps,
+    highlightedIndex: highlightedIndex,
+    selectedItems: selectedItem !== null ? [selectedItem] : []
   }));
 };
 
-var _excluded$1 = ["allItemsSelectedLabel", "ariaLabelRemoveSelected", "className", "clearable", "clearInputOnSelect", "debounceTimeout", "feedback", "hideSelectAll", "items", "label", "listStyle", "maxTags", "onChange", "openOnFocus", "placeholder", "readonly", "removeAllItemsAriaLabel", "selectAllLabel", "selectedItems", "selectOnBlur", "style", "variant"];
+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,
@@ -1724,22 +1785,25 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
     _ref$clearInputOnSele = _ref.clearInputOnSelect,
     clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
+    _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,
     initialItems = _ref.items,
     label = _ref.label,
     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,
     placeholder = _ref.placeholder,
-    _ref$readonly = _ref.readonly,
-    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
-    _ref$removeAllItemsAr = _ref.removeAllItemsAriaLabel,
-    removeAllItemsAriaLabel = _ref$removeAllItemsAr === void 0 ? 'Fjern valgte' : _ref$removeAllItemsAr,
+    _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,
@@ -1764,10 +1828,10 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
   };
   var summarySelectedItems = React__default["default"].useMemo(function () {
     return {
-      value: '',
+      value: EMPTY_INPUT,
       label: isAllNonAsyncItemsSelected ? allItemsSelectedLabel : selectedItems.length + ' valgte'
     };
-  }, [isAllNonAsyncItemsSelected, selectedItems, normalizedItems, allItemsSelectedLabel]);
+  }, [isAllNonAsyncItemsSelected, selectedItems, allItemsSelectedLabel]);
   var _useState = React.useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
     listItems = _useState[0],
     setListItems = _useState[1];
@@ -1777,10 +1841,11 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       return lowerCaseFilterTest(item, inputValue);
     })));
   };
-  var updateListItems = function updateListItems(inputValue) {
-    if (typeof initialItems === 'function') fetchItems(inputValue != null ? inputValue : ''); // fetch items only if user provides a function as items
+  var updateListItems = function updateListItems(_ref3) {
+    var inputValue = _ref3.inputValue;
+    if (typeof initialItems === 'function') fetchItems(inputValue != null ? inputValue : EMPTY_INPUT); // fetch items only if user provides a function as items
     filterListItems({
-      inputValue: inputValue != null ? inputValue : ''
+      inputValue: inputValue != null ? inputValue : EMPTY_INPUT
     });
   };
   React__default["default"].useEffect(function () {
@@ -1788,20 +1853,6 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       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 = Downshift.useMultipleSelection({
       selectedItems: selectedItems,
       itemToString: itemToString,
@@ -1813,39 +1864,71 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
     getDropdownProps = _useMultipleSelection.getDropdownProps,
     removeSelectedItem = _useMultipleSelection.removeSelectedItem;
-  var stateReducer = React__default["default"].useCallback(function (_, _ref3) {
-    var _inputRef$current$val, _inputRef$current, _inputRef$current$val2, _inputRef$current2, _changes$inputValue;
-    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);
+  var _useMultiselectUtils = useMultiselectUtils({
+      listItems: listItems,
+      selectAllValue: selectAll.value,
+      selectedItems: selectedItems
+    }),
+    hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
+    handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
+    selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState;
+  var stateReducer = React__default["default"].useCallback(function (_, _ref4) {
+    var changes = _ref4.changes,
+      type = _ref4.type;
+    if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
+      setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
+    }
     switch (type) {
       case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
       case Downshift.useCombobox.stateChangeTypes.ItemClick:
-        if (clearInputOnSelect) {
-          updateListItems('');
+        {
+          var _inputRef$current$val, _inputRef$current;
+          if (clearInputOnSelect) {
+            updateListItems({
+              inputValue: EMPTY_INPUT
+            });
+          }
+          return _extends({}, changes, {
+            isOpen: true,
+            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
+          });
         }
-        return _extends({}, changes, {
-          isOpen: true,
-          inputValue: clearInputOnSelect ? '' : (_inputRef$current$val = inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : ''
-        });
       case Downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-        return _extends({}, changes, {
-          inputValue: clearInputOnSelect ? '' : (_inputRef$current$val2 = inputRef == null ? void 0 : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : ''
-        });
-      case Downshift.useCombobox.stateChangeTypes.InputChange:
-        if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(/^\s+/g)) {
-          var _changes$inputValue$r;
-          // remove leading whitespace if it exists
+        {
+          var _inputRef$current$val2, _inputRef$current2;
           return _extends({}, changes, {
-            inputValue: (_changes$inputValue$r = changes.inputValue.replace(/^\s+/g, '')) != null ? _changes$inputValue$r : ''
+            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
           });
         }
-        updateListItems(changes.inputValue);
-        return changes;
+      case Downshift.useCombobox.stateChangeTypes.InputChange:
+        {
+          var _changes$inputValue;
+          var leadingWhitespaceTest = /^\s+/g;
+          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) {
+                handleListItemClicked({
+                  clickedItem: listItems[changes.highlightedIndex],
+                  onChange: onChange
+                });
+              }
+            }
+          } else {
+            updateListItems({
+              inputValue: changes.inputValue
+            });
+          }
+          return changes;
+        }
       case Downshift.useCombobox.stateChangeTypes.InputBlur:
-        return _extends({}, changes, {
-          inputValue: ''
-        });
+        {
+          return _extends({}, changes, {
+            inputValue: EMPTY_INPUT
+          });
+        }
       default:
         return changes;
     }
@@ -1856,9 +1939,9 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       itemToString: itemToString,
       selectedItem: null,
       stateReducer: stateReducer,
-      onStateChange: function onStateChange(_ref4) {
-        var type = _ref4.type,
-          clickedItem = _ref4.selectedItem;
+      onStateChange: function onStateChange(_ref5) {
+        var type = _ref5.type,
+          clickedItem = _ref5.selectedItem;
         // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
         switch (type) {
@@ -1867,16 +1950,10 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
             if (!selectOnBlur) break;
           case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
           case Downshift.useCombobox.stateChangeTypes.ItemClick:
-            if (clickedItemIsSelectAll(clickedItem)) {
-              if (allListItemsAreSelected) {
-                return unselectAllListItems(onChange);
-              }
-              return selectAllUnselectedItemsInListItems(onChange);
-            }
-            if (clickedItemIsInSelectedItems(clickedItem)) {
-              return removeClickedItemFromSelectedItems(clickedItem, onChange);
-            }
-            addClickedItemToSelectedItems(clickedItem, onChange);
+            handleListItemClicked({
+              clickedItem: clickedItem,
+              onChange: onChange
+            });
         }
       }
     }, rest)),
@@ -1894,9 +1971,11 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
   var handleOnClear = function handleOnClear() {
     var _inputRef$current3;
     onChange([]);
-    setInputValue('');
+    setInputValue(EMPTY_INPUT);
     (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
-    updateListItems(inputValue);
+    updateListItems({
+      inputValue: inputValue
+    });
   };
   // role=combobox leads to strange VoiceOver behavior and is therefor omitted
   // const { role: _, ...comboboxProps } = getComboboxProps();
@@ -1909,23 +1988,25 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       selectedItems: selectedItems,
       isOpen: isOpen,
       clearable: clearable,
-      clearSelectedItemsLabel: removeAllItemsAriaLabel,
+      clearSelectedItemsLabel: clearAllItemsAriaLabel,
+      focusable: false,
       loading: loading,
-      loadingText: '',
-      readOnly: readonly,
+      loadingText: loadingText,
+      disabled: readOnly || disabled,
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
     className: classNames__default["default"]('eds-dropdown', className),
-    label: label,
-    isFilled: hasSelectedItems || inputValue !== '',
+    disabled: disabled,
     feedback: feedback,
-    variant: variant,
-    readOnly: readonly,
-    style: style,
+    isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
+    label: label,
     labelProps: _extends({
       'aria-label': label + ", multiselect, " + selectedItems.length + " valgte elementer"
-    }, getLabelProps())
+    }, getLabelProps()),
+    readOnly: readOnly,
+    style: style,
+    variant: variant
   }, comboboxProps, rest), React__default["default"].createElement("div", {
     className: classNames__default["default"]('eds-dropdown__selected-items-and-input', {
       'eds-dropdown__selected-items-and-input--filled': hasSelectedItems
@@ -1936,20 +2017,25 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     }
   }, selectedItems.length < maxTags ? selectedItems.map(function (selectedItem, index) {
     return React__default["default"].createElement(SelectedItemTag, {
+      ariaLabelRemoveSelected: ariaLabelRemoveSelected,
+      disabled: disabled,
+      getSelectedItemProps: getSelectedItemProps,
       index: index,
       key: selectedItem.value,
-      getSelectedItemProps: getSelectedItemProps,
-      selectedItem: selectedItem,
+      readOnly: readOnly,
       removeSelectedItem: removeSelectedItem,
-      ariaLabelRemoveSelected: ariaLabelRemoveSelected
+      selectedItem: selectedItem
     });
   }) : React__default["default"].createElement(SelectedItemTag, {
-    selectedItem: summarySelectedItems,
+    ariaLabelRemoveSelected: clearAllItemsAriaLabel,
+    disabled: disabled,
+    readOnly: readOnly,
     removeSelectedItem: handleOnClear,
-    ariaLabelRemoveSelected: removeAllItemsAriaLabel
+    selectedItem: summarySelectedItems
   }), React__default["default"].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
   }, getInputProps(getDropdownProps({
     preventKeyAction: isOpen,
@@ -1957,43 +2043,53 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       if (!isOpen && openOnFocus) openMenu();
     },
     ref: inputRef,
-    value: inputValue != null ? inputValue : ''
+    value: inputValue != null ? inputValue : EMPTY_INPUT
   })))))), React__default["default"].createElement(DropdownList, {
-    listItems: listItems,
-    selectedItems: selectedItems,
+    getItemProps: getItemProps,
+    getMenuProps: getMenuProps,
+    highlightedIndex: highlightedIndex,
     inputValue: inputValue,
     isOpen: isOpen,
-    highlightedIndex: highlightedIndex,
-    getMenuProps: getMenuProps,
-    getItemProps: getItemProps,
-    selectAllItem: selectAll,
-    selectAllCheckboxState: selectAllCheckboxState,
+    listItems: listItems,
     listStyle: listStyle,
-    loading: loading
+    loading: loading,
+    loadingText: loadingText,
+    selectAllCheckboxState: selectAllCheckboxState,
+    selectAllItem: selectAll,
+    selectedItems: selectedItems
   }));
 };
 
-var _excluded = ["className", "clearable", "debounceTimeout", "feedback", "items", "label", "listStyle", "onChange", "openOnFocus", "placeholder", "readonly", "selectedItem", "selectOnBlur", "selectOnTab", "variant"];
+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 _selectedItem$label;
+  var _ref3, _selectedItem$label;
   var className = _ref.className,
-    debounceTimeout = _ref.debounceTimeout,
+    _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,
     listStyle = _ref.listStyle,
+    loadingText = _ref.loadingText,
     onChange = _ref.onChange,
-    _ref$readonly = _ref.readonly,
-    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    placeholder = _ref.placeholder,
+    prepend = _ref.prepend,
+    _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,
+    style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
+  // TODO Husk å @deprecate searchable-prop-en til Dropdown når denne komponenten skal ha official release
+  var _useResolvedItems = useResolvedItems(initialItems),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading;
+  var isFilled = selectedItem !== null || placeholder !== undefined;
   var _useSelect = Downshift.useSelect({
       items: normalizedItems,
       selectedItem: selectedItem,
@@ -2012,51 +2108,59 @@ var DropdownBeta = function DropdownBeta(_ref) {
       itemToString: itemToString
     }),
     isOpen = _useSelect.isOpen,
-    getToggleButtonProps = _useSelect.getToggleButtonProps,
+    getItemProps = _useSelect.getItemProps,
     getLabelProps = _useSelect.getLabelProps,
     getMenuProps = _useSelect.getMenuProps,
-    highlightedIndex = _useSelect.highlightedIndex,
-    getItemProps = _useSelect.getItemProps;
+    getToggleButtonProps = _useSelect.getToggleButtonProps,
+    highlightedIndex = _useSelect.highlightedIndex;
   return React__default["default"].createElement("div", {
     className: "eds-dropdown__wrapper"
   }, React__default["default"].createElement(form.BaseFormControl, _extends({
     append: React__default["default"].createElement(FieldAppend, {
-      selectedItems: [selectedItem],
-      isOpen: isOpen,
       clearable: true,
+      clearSelectedItemsLabel: "Fjern valgt",
+      focusable: true,
+      getToggleButtonProps: getToggleButtonProps,
+      isOpen: isOpen,
       loading: loading,
-      loadingText: '',
-      readOnly: readonly,
+      loadingText: loadingText,
       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
+      disabled: readOnly || disabled,
+      selectedItems: [selectedItem]
     }),
     className: classNames__default["default"]('eds-dropdown', className, {
-      'eds-dropdown--not-filled': selectedItem === null
+      'eds-dropdown--not-filled': !isFilled
     }),
+    disabled: disabled,
+    disableLabelAnimation: disableLabelAnimation,
+    feedback: feedback,
+    isFilled: isFilled,
     label: label,
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
-    disableLabelAnimation: true,
-    isFilled: selectedItem !== null,
-    feedback: feedback,
-    variant: variant,
-    readOnly: readonly
+    labelTooltip: labelTooltip,
+    prepend: prepend,
+    readOnly: readOnly,
+    style: style,
+    variant: variant
   }, rest), React__default["default"].createElement("div", _extends({
     className: "eds-dropdown__selected-item-button"
-  }, getToggleButtonProps()), (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : '')), React__default["default"].createElement(DropdownList, {
-    selectedItems: selectedItem !== null ? [selectedItem] : [],
+  }, getToggleButtonProps()), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React__default["default"].createElement("span", {
+    className: classNames__default["default"]('eds-dropdown__selected-item-button__placeholder', {
+      'eds-dropdown__selected-item-button__placeholder--readonly': readOnly
+    })
+  }, placeholder)) != null ? _ref3 : '')), React__default["default"].createElement(DropdownList, {
+    getItemProps: getItemProps,
+    getMenuProps: getMenuProps,
+    highlightedIndex: highlightedIndex,
     isOpen: isOpen,
     listItems: normalizedItems,
-    highlightedIndex: highlightedIndex,
     listStyle: listStyle,
-    getMenuProps: getMenuProps,
-    getItemProps: getItemProps,
-    loading: loading
+    loading: loading,
+    loadingText: loadingText,
+    selectedItems: selectedItem !== null ? [selectedItem] : []
   }));
 };