@entur/dropdown 5.0.0-RC.0 → 5.0.0-RC.2

package/dist/dropdown.esm.js

@@ -1440,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",
@@ -1775,7 +1776,8 @@ var SearchableDropdown = function SearchableDropdown(_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,
@@ -1791,7 +1793,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       onClear: handleOnClear,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
@@ -1801,7 +1803,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
     className: "eds-dropdown__selected-item__wrapper",
@@ -1840,7 +1841,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "itemFilter", "items", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxTags", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
+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,
@@ -1865,8 +1866,8 @@ var MultiSelect = function MultiSelect(_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;
@@ -1911,7 +1912,7 @@ var MultiSelect = function MultiSelect(_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,
@@ -1950,6 +1951,20 @@ var MultiSelect = function MultiSelect(_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, {
@@ -1960,9 +1975,9 @@ var MultiSelect = function MultiSelect(_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);
     }
@@ -2032,9 +2047,9 @@ var MultiSelect = function MultiSelect(_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) {
@@ -2086,7 +2101,8 @@ var MultiSelect = function MultiSelect(_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,
@@ -2102,7 +2118,7 @@ var MultiSelect = function MultiSelect(_ref) {
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: classNames('eds-dropdown', className),
+    className: "eds-dropdown",
     disabled: disabled,
     feedback: feedback,
     isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
@@ -2110,7 +2126,6 @@ var MultiSelect = function MultiSelect(_ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), React.createElement("div", {
     className: classNames('eds-dropdown__selected-items-and-input', {
@@ -2120,7 +2135,7 @@ var MultiSelect = function MultiSelect(_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();
@@ -2242,7 +2257,8 @@ var Dropdown = function Dropdown(_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,
@@ -2261,7 +2277,7 @@ var Dropdown = function Dropdown(_ref) {
       disabled: readOnly || disabled,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', className, {
+    className: classNames('eds-dropdown', {
       'eds-dropdown--not-filled': !isFilled
     }),
     disabled: disabled,
@@ -2273,7 +2289,6 @@ var Dropdown = function Dropdown(_ref) {
     labelProps: getLabelProps(),
     prepend: prepend,
     readOnly: readOnly,
-    style: style,
     variant: variant
   }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item-button"