@entur/dropdown 5.0.0-beta.4 → 5.0.1

package/dist/dropdown.esm.js

@@ -451,7 +451,7 @@ var useDownshift = function useDownshift() {
 };
 
 var _excluded$c = ["items"];
-var DropdownList$1 = function DropdownList(_ref) {
+var DropdownListDeprecated = function DropdownListDeprecated(_ref) {
   var items = _ref.items,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var _useDownshift = useDownshift(),
@@ -487,7 +487,7 @@ var DropdownList$1 = function DropdownList(_ref) {
   }) : null);
 };
 
-var DropdownToggleButton$1 = function DropdownToggleButton() {
+var DropdownDeprecatedToggleButton = function DropdownDeprecatedToggleButton() {
   var _useDownshift = useDownshift(),
     getToggleButtonProps = _useDownshift.getToggleButtonProps,
     isOpen = _useDownshift.isOpen;
@@ -502,7 +502,7 @@ var DropdownToggleButton$1 = function DropdownToggleButton() {
 };
 
 var _excluded$b = ["className", "children"];
-var DropdownLoadingDots = function DropdownLoadingDots(_ref) {
+var DropdownDeprecatedLoadingDots = function DropdownDeprecatedLoadingDots(_ref) {
   var className = _ref.className,
     children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
@@ -512,7 +512,7 @@ var DropdownLoadingDots = function DropdownLoadingDots(_ref) {
 };
 
 var _excluded$a = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
-var BaseDropdown = function BaseDropdown(_ref) {
+var BaseDropdownDeprecated = function BaseDropdownDeprecated(_ref) {
   var children = _ref.children,
     className = _ref.className,
     items = _ref.items,
@@ -545,7 +545,7 @@ var BaseDropdown = function BaseDropdown(_ref) {
     isFilled: isFilled,
     labelProps: getLabelProps(),
     disableLabelAnimation: disableLabelAnimation
-  }, rest), children), React.createElement(DropdownList$1, _extends({
+  }, rest), children), React.createElement(DropdownListDeprecated, _extends({
     items: items,
     style: _extends({
       position: 'absolute',
@@ -576,16 +576,16 @@ var Appendix$1 = function Appendix(_ref3) {
     loadingText = _ref3.loadingText,
     readOnly = _ref3.readOnly;
   if (loading) {
-    return React.createElement(DropdownLoadingDots, null, loadingText);
+    return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
   }
   if (readOnly) {
     return null;
   }
-  return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownToggleButton$1, null)) : React.createElement(DropdownToggleButton$1, null);
+  return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownDeprecatedToggleButton, null)) : React.createElement(DropdownDeprecatedToggleButton, null);
 };
 
 var _excluded$9 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
-var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var RegularDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
@@ -610,7 +610,7 @@ var RegularDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isOpen = _useDownshift.isOpen,
     highlightedIndex = _useDownshift.highlightedIndex,
     setHighlightedIndex = _useDownshift.setHighlightedIndex;
-  return React.createElement(BaseDropdown, _extends({
+  return React.createElement(BaseDropdownDeprecated, _extends({
     disabled: disabled,
     listStyle: listStyle,
     items: items,
@@ -671,7 +671,17 @@ function LowerCaseFilterTest(item, input) {
   var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
   return inputRegex.test(item.label);
 }
-var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+/**
+ * @deprecated
+ * New SearchableDropdown available
+ *
+ * migration guide to new dropdown:
+ * - change import from 'DropdownDeprecated' to 'Dropdown'
+ * - change from 'value' to 'selectedItem'
+ *  + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
+ * - 'onChange' must update value of 'selectedItem'
+ */
+var SearchableDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     className = _ref.className,
@@ -712,7 +722,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return itemFilter(item, inputValue);
     });
   }, [inputValue, items, itemFilter]);
-  return React.createElement(BaseDropdown, {
+  return React.createElement(BaseDropdownDeprecated, {
     items: filteredItems,
     disabled: disabled,
     readOnly: readOnly,
@@ -754,7 +764,7 @@ var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
-var DropdownInputGroup = function DropdownInputGroup(_ref) {
+var DropdownInputGroupDeprecated = function DropdownInputGroupDeprecated(_ref) {
   var children = _ref.children,
     feedback = _ref.feedback,
     variant = _ref.variant,
@@ -892,7 +902,18 @@ debounceTimeout) {
 };
 
 var _excluded$7 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
-var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+/**
+ * @deprecated
+ * New Dropdown available
+ *
+ * migration guide to new dropdown:
+ * - change import from 'DropdownDeprecated' to 'Dropdown'
+ *  + if 'searchable', switch to 'SearchableDropdown'
+ * - change from 'value' to 'selectedItem'
+ *  + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
+ * - 'onChange' must update value of 'selectedItem'
+ */
+var DropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
     debounceTimeout = _ref.debounceTimeout,
     disabled = _ref.disabled,
@@ -927,7 +948,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedItem = value === undefined ? undefined : normalizedItems.find(function (item) {
     return value === item.value;
   }) || null;
-  var RenderedDropdown = searchable ? SearchableDropdown : RegularDropdown;
+  var RenderedDropdown = searchable ? SearchableDropdownDeprecated : RegularDropdownDeprecated;
   var searchAbleProps = searchable ? {
     itemFilter: itemFilter,
     name: rest.name,
@@ -945,7 +966,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     style: style,
     searchable: searchable
-  }, rest), React.createElement(DropdownInputGroup, {
+  }, rest), React.createElement(DropdownInputGroupDeprecated, {
     feedback: feedback,
     variant: variant
   }, React.createElement(RenderedDropdown, _extends({
@@ -967,9 +988,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 
 var _excluded$6 = ["className", "clearable", "debounceTimeout", "disabled", "feedback", "initialSelectedItems", "items", "itemsSelectedLabel", "label", "listStyle", "loading", "loadingText", "onChange", "openOnFocus", "readOnly", "style", "variant"];
-var MultiSelectContext = /*#__PURE__*/React.createContext(null);
-var useMultiSelectContext = function useMultiSelectContext() {
-  var context = React.useContext(MultiSelectContext);
+var MultiSelectOldContext = /*#__PURE__*/React.createContext(null);
+var useMultiSelectOldContext = function useMultiSelectOldContext() {
+  var context = React.useContext(MultiSelectOldContext);
   if (!context) {
     throw new Error('You need to wrap your component in a DownshiftProvider');
   }
@@ -992,7 +1013,17 @@ actionAndChanges) {
       return changes;
   }
 }
-var MultiSelect = function MultiSelect(_ref) {
+/**
+ * @deprecated
+ * New MultiSelect available
+ *
+ * migration guide to new dropdown:
+ * - change import from 'MultiSelectDeprecated' to 'MultiSelect'
+ * - add state containing selected items to 'selectedItems' prop
+ *  + type of 'selectedItems' is 'NormalizedDropdownType[]' and does not include 'string'
+ * - 'onChange' must update value of 'selectedItem'
+ */
+var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
@@ -1068,7 +1099,7 @@ var MultiSelect = function MultiSelect(_ref) {
     openMenu = _useSelect.openMenu;
   var buttonText = selectedItems.length ? itemsSelectedLabel(selectedItems) : '';
   var multiSelectId = useRandomId('eds-multiselect');
-  return React.createElement(MultiSelectContext.Provider, {
+  return React.createElement(MultiSelectOldContext.Provider, {
     value: {
       isOpen: isOpen,
       reset: reset,
@@ -1144,8 +1175,8 @@ var MultiSelect = function MultiSelect(_ref) {
 };
 var ClearButton = function ClearButton(_ref3) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
-  var _useMultiSelectContex = useMultiSelectContext(),
-    reset = _useMultiSelectContex.reset;
+  var _useMultiSelectOldCon = useMultiSelectOldContext(),
+    reset = _useMultiSelectOldCon.reset;
   return React.createElement(React.Fragment, null, React.createElement("button", _extends({
     className: "eds-dropdown__clear-button",
     type: "button",
@@ -1163,7 +1194,7 @@ var Appendix = function Appendix(_ref4) {
     readOnly = _ref4.readOnly,
     hasSelected = _ref4.hasSelected;
   if (loading) {
-    return React.createElement(DropdownLoadingDots, null, loadingText);
+    return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
   }
   if (readOnly) {
     return null;
@@ -1171,11 +1202,11 @@ var Appendix = function Appendix(_ref4) {
   return hasSelected ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
 };
 var DropdownToggleButton = function DropdownToggleButton() {
-  var _useMultiSelectContex2 = useMultiSelectContext(),
-    getToggleButtonProps = _useMultiSelectContex2.getToggleButtonProps,
-    isOpen = _useMultiSelectContex2.isOpen,
-    openMenu = _useMultiSelectContex2.openMenu,
-    openOnFocus = _useMultiSelectContex2.openOnFocus;
+  var _useMultiSelectOldCon2 = useMultiSelectOldContext(),
+    getToggleButtonProps = _useMultiSelectOldCon2.getToggleButtonProps,
+    isOpen = _useMultiSelectOldCon2.isOpen,
+    openMenu = _useMultiSelectOldCon2.openMenu,
+    openOnFocus = _useMultiSelectOldCon2.openOnFocus;
   return React.createElement("button", _extends({}, getToggleButtonProps({
     className: classNames('eds-dropdown__toggle-button', {
       'eds-dropdown__toggle-button--open': isOpen
@@ -1207,9 +1238,11 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
-var _excluded$5 = ["ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
 var DropdownList = function DropdownList(_ref) {
-  var _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
+  var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
+    ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
+    _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
     ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
     getItemProps = _ref.getItemProps,
     getMenuProps = _ref.getMenuProps,
@@ -1231,7 +1264,7 @@ var DropdownList = function DropdownList(_ref) {
   var isNoMatches = !loading && (listItems.length === 0 || listItems.length === 1 && listItems[0].value === (selectAllItem == null ? void 0 : selectAllItem.value));
   var isItemSelected = function isItemSelected(item) {
     return selectedItems.some(function (selectedItem) {
-      return selectedItem.value === item.value;
+      return selectedItem.value === item.value && selectedItem.label === item.label;
     });
   };
   var ariaLabelSelectAll = function ariaLabelSelectAll() {
@@ -1242,7 +1275,7 @@ var DropdownList = function DropdownList(_ref) {
         }
       case true:
         {
-          return (selectAllItem == null ? void 0 : selectAllItem.label) + ", valgt";
+          return (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular;
         }
       default:
         {
@@ -1289,28 +1322,30 @@ var DropdownList = function DropdownList(_ref) {
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
     React.createElement("ul", _extends({}, getMenuProps(), {
-      className: classNames('eds-dropdown__list', {
-        'eds-dropdown__list--open': isOpen
-      }),
-      style: _extends({}, rest.style, listStyle)
+      className: "eds-dropdown__list",
+      style: _extends({
+        display: isOpen ? 'inline-block' : 'none'
+      }, rest.style, listStyle)
     }), listItems.length > 0 && listItems.map(function (item, index) {
       var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
-      if (itemIsSelectAll && listItems.length <= 2) return React.createElement(React.Fragment, null);
+      if (itemIsSelectAll && listItems.length <= 2) return null;
       return React.createElement("li", _extends({
-        key: item.value,
+        key: item.label,
         className: classNames('eds-dropdown__list__item', {
           'eds-dropdown__list__item--select-all': itemIsSelectAll,
           'eds-dropdown__list__item--highlighted': highlightedIndex === index,
           'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
         })
       }, getItemProps({
-        key: "" + index + item.value,
+        key: item.label,
         item: item,
         index: index
       })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
     }), isNoMatches && React.createElement("li", {
+      key: "dropdown-list-no-match",
       className: "eds-dropdown__list__item"
     }, noMatchesText), loading && React.createElement("li", {
+      key: "dropdown-list-loading",
       className: "eds-dropdown__list__item"
     }, loadingText))
   );
@@ -1405,8 +1440,9 @@ var ClearableButton = function ClearableButton(_ref4) {
     focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
   return React.createElement(Tooltip, {
     "aria-hidden": "true",
-    placement: "right",
-    content: labelClearSelectedItems
+    placement: "top",
+    content: labelClearSelectedItems,
+    className: "eds-dropdown-appendix__clear-button__tooltip"
   }, React.createElement(IconButton, {
     className: "eds-dropdown-appendix__clear-button",
     type: "button",
@@ -1431,10 +1467,11 @@ var ToggleButton = function ToggleButton(_ref5) {
   return React.createElement(IconButton, _extends({}, getToggleButtonProps({
     className: classNames('eds-dropdown-appendix__toggle-button', {
       'eds-dropdown-appendix__toggle-button--open': isOpen
-    })
+    }),
+    'aria-labelledby': undefined
   }), {
     "aria-hidden": ariaHidden,
-    "aria-label": isOpen ? ariaLabelCloseList : ariaLabelOpenList,
+    "aria-label": ariaHidden ? undefined : isOpen ? ariaLabelCloseList : ariaLabelOpenList,
     tabIndex: focusable ? 0 : -1,
     type: "button"
   }), React.createElement(DownArrowIcon, {
@@ -1582,7 +1619,7 @@ var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
 /* end a11y utils */
 
 var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "itemFilter", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
-var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
+var SearchableDropdown = function SearchableDropdown(_ref) {
   var _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
     ariaLabelOpenList = _ref.ariaLabelOpenList,
@@ -1739,7 +1776,8 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     });
   };
   return React.createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames('eds-dropdown__wrapper', className),
+    style: style
   }, React.createElement(BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
@@ -1755,7 +1793,7 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
       onClear: handleOnClear,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
@@ -1765,7 +1803,6 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
     className: "eds-dropdown__selected-item__wrapper",
@@ -1804,18 +1841,21 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "items", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxTags", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected"];
-var MultiSelectBeta = function MultiSelectBeta(_ref) {
+var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "itemFilter", "items", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     _ref$clearInputOnSele = _ref.clearInputOnSelect,
     clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
+    debounceTimeout = _ref.debounceTimeout,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     feedback = _ref.feedback,
     _ref$hideSelectAll = _ref.hideSelectAll,
     hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
+    _ref$itemFilter = _ref.itemFilter,
+    itemFilter = _ref$itemFilter === void 0 ? lowerCaseFilterTest : _ref$itemFilter,
     initialItems = _ref.items,
     label = _ref.label,
     _ref$labelAllItemsSel = _ref.labelAllItemsSelected,
@@ -1826,8 +1866,8 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
-    _ref$maxTags = _ref.maxTags,
-    maxTags = _ref$maxTags === void 0 ? 10 : _ref$maxTags,
+    _ref$maxChips = _ref.maxChips,
+    maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {
       return undefined;
@@ -1851,6 +1891,8 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     ariaLabelOpenList = _ref.ariaLabelOpenList,
     _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
     ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
+    _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
+    ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _React$useState = React.useState(0),
     lastHighlightedIndex = _React$useState[0],
@@ -1859,7 +1901,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     lastRemovedItem = _React$useState2[0],
     setLastRemovedItem = _React$useState2[1];
   var inputRef = useRef(null);
-  var _useResolvedItems = useResolvedItems(initialItems),
+  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
     fetchItems = _useResolvedItems.fetchItems;
@@ -1870,20 +1912,20 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     label: labelSelectAll
   };
   // special 'item' used as a replacement selected item tag for when
-  // there are more selected element than maxTags
+  // there are more selected element than maxChips
   var summarySelectedItems = React.useMemo(function () {
     return {
       value: EMPTY_INPUT,
       label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + ' ' + ariaLabelChosenPlural
     };
-  }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected]);
+  }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected, ariaLabelChosenPlural]);
   var _useState = useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
     listItems = _useState[0],
     setListItems = _useState[1];
   var filterListItems = function filterListItems(_ref2) {
     var inputValue = _ref2.inputValue;
     return setListItems([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems.filter(function (item) {
-      return lowerCaseFilterTest(item, inputValue);
+      return itemFilter(item, inputValue);
     })));
   };
   var updateListItems = function updateListItems(_ref3) {
@@ -1909,6 +1951,20 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
   var _useMultipleSelection = useMultipleSelection({
       selectedItems: selectedItems,
       itemToString: itemToString,
+      onStateChange: function onStateChange(_ref4) {
+        var newSelectedItems = _ref4.selectedItems,
+          type = _ref4.type;
+        switch (type) {
+          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+          case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+            {
+              if (newSelectedItems !== undefined) onChange(newSelectedItems);
+              break;
+            }
+        }
+      },
       // Accessibility
       getA11yRemovalMessage: function getA11yRemovalMessage$1(options) {
         return getA11yRemovalMessage(_extends({}, options, {
@@ -1919,9 +1975,9 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     }),
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
     getDropdownProps = _useMultipleSelection.getDropdownProps;
-  var stateReducer = React.useCallback(function (_, _ref4) {
-    var changes = _ref4.changes,
-      type = _ref4.type;
+  var stateReducer = React.useCallback(function (_, _ref5) {
+    var changes = _ref5.changes,
+      type = _ref5.type;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
       setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
     }
@@ -1991,9 +2047,9 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       itemToString: itemToString,
       selectedItem: null,
       stateReducer: stateReducer,
-      onStateChange: function onStateChange(_ref5) {
-        var type = _ref5.type,
-          clickedItem = _ref5.selectedItem;
+      onStateChange: function onStateChange(_ref6) {
+        var type = _ref6.type,
+          clickedItem = _ref6.selectedItem;
         // clickedItem means item chosen either via mouse or keyboard
         if (!clickedItem) return;
         switch (type) {
@@ -2045,7 +2101,8 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     });
   };
   return React.createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames('eds-dropdown__wrapper', className),
+    style: style
   }, React.createElement(BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
@@ -2061,7 +2118,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: classNames('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     feedback: feedback,
     isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
@@ -2069,7 +2126,6 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), React.createElement("div", {
     className: classNames('eds-dropdown__selected-items-and-input', {
@@ -2079,7 +2135,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       var _inputRef$current4;
       if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
     }
-  }, selectedItems.length < maxTags ? React.createElement(React.Fragment, null, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
+  }, selectedItems.length < maxChips ? React.createElement(React.Fragment, null, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
     onClick: function onClick() {
       var _inputRef$current5;
       return (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.focus();
@@ -2123,6 +2179,8 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
   })))))), React.createElement(DropdownList, {
+    ariaLabelChosenSingular: ariaLabelChosenSingular,
+    ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
     getMenuProps: getMenuProps,
     highlightedIndex: highlightedIndex,
@@ -2139,11 +2197,13 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
 };
 
 var _excluded$1 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
-var DropdownBeta = function DropdownBeta(_ref) {
+var Dropdown = function Dropdown(_ref) {
   var _ref3, _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
     ariaLabelOpenList = _ref.ariaLabelOpenList,
     className = _ref.className,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     disableLabelAnimation = _ref.disableLabelAnimation,
@@ -2179,11 +2239,13 @@ var DropdownBeta = function DropdownBeta(_ref) {
           clickedItem = _ref2.selectedItem;
         switch (type) {
           // @ts-expect-error This falltrough is wanted
-          case useSelect.stateChangeTypes.InputBlur:
+          case useSelect.stateChangeTypes.ToggleButtonBlur:
             if (!selectOnBlur) break;
           case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter: // eslint-disable-line no-fallthrough
           case useSelect.stateChangeTypes.ItemClick:
-            onChange == null ? void 0 : onChange(clickedItem !== undefined ? clickedItem : null);
+            {
+              onChange == null ? void 0 : onChange(clickedItem !== undefined ? clickedItem : null);
+            }
         }
       },
       itemToString: itemToString
@@ -2195,13 +2257,14 @@ var DropdownBeta = function DropdownBeta(_ref) {
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
   return React.createElement("div", {
-    className: "eds-dropdown__wrapper"
+    className: classNames('eds-dropdown__wrapper', className),
+    style: style
   }, React.createElement(BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaHiddenToggleButton: true,
       ariaLabelCloseList: ariaLabelCloseList,
       ariaLabelOpenList: ariaLabelOpenList,
-      clearable: true,
+      clearable: clearable,
       labelClearSelectedItems: labelClearSelectedItem,
       focusable: false,
       getToggleButtonProps: getToggleButtonProps,
@@ -2214,7 +2277,7 @@ var DropdownBeta = function DropdownBeta(_ref) {
       disabled: readOnly || disabled,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', className, {
+    className: classNames('eds-dropdown', {
       'eds-dropdown--not-filled': !isFilled
     }),
     disabled: disabled,
@@ -2226,11 +2289,12 @@ var DropdownBeta = function DropdownBeta(_ref) {
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
-  }, rest), React.createElement("button", _extends({
+  }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item-button"
-  }, getToggleButtonProps()), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
+  }, getToggleButtonProps({
+    id: undefined
+  })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
     className: classNames('eds-dropdown__selected-item-button__placeholder', {
       'eds-dropdown__selected-item-button__placeholder--readonly': readOnly
     })
@@ -2333,5 +2397,5 @@ var FieldAppend = function FieldAppend(_ref3) {
 
 warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
 
-export { Dropdown, DropdownBeta, MultiSelect, MultiSelectBeta, NativeDropdown, SearchableDropdownBeta };
+export { Dropdown, DropdownDeprecated, MultiSelect, MultiSelectDeprecated, NativeDropdown, SearchableDropdown };
 //# sourceMappingURL=dropdown.esm.js.map