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

package/dist/dropdown.esm.js

@@ -1294,13 +1294,14 @@ var DropdownList = function DropdownList(_ref) {
   };
   var selectAllListItemContent = function selectAllListItemContent() {
     return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
+      className: "eds-dropdown__list__item__checkbox",
       checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
       "aria-hidden": "true",
       onChange: function onChange() {
         return;
       }
     }), React.createElement("span", {
-      className: "eds-dropdown__list__item-text"
+      className: "eds-dropdown__list__item__text"
     }, selectAllItem == null ? void 0 : selectAllItem.label));
   };
   var listItemContent = function listItemContent(item) {
@@ -1308,18 +1309,19 @@ var DropdownList = function DropdownList(_ref) {
       style: !isMultiselect ? {
         display: 'none'
       } : {},
+      className: "eds-dropdown__list__item__checkbox",
       checked: itemIsSelected(item),
       "aria-hidden": "true",
       onChange: function onChange() {
         return;
       }
     }), React.createElement("span", {
-      className: "eds-dropdown__list__item-text"
+      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"
+        className: "eds-dropdown__list__item__icon"
       });
     })));
   };
@@ -1422,17 +1424,18 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
 };
 
 var _excluded$3 = ["tabIndex"];
-var SelectedElementsTag = function SelectedElementsTag(_ref) {
+var SelectedItemTag = function SelectedItemTag(_ref) {
+  var _getSelectedItemProps;
   var getSelectedItemProps = _ref.getSelectedItemProps,
     removeSelectedItem = _ref.removeSelectedItem,
     selectedItem = _ref.selectedItem,
     index = _ref.index,
     ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected;
-  var _getSelectedItemProps = getSelectedItemProps({
+  var _ref2 = (_getSelectedItemProps = getSelectedItemProps == null ? void 0 : getSelectedItemProps({
       selectedItem: selectedItem,
       index: index
-    }),
-    selectedItemProps = _objectWithoutPropertiesLoose(_getSelectedItemProps, _excluded$3);
+    })) != null ? _getSelectedItemProps : {},
+    selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
   return React.createElement(TagChip, _extends({
     className: classNames('eds-dropdown__selected-element-tag')
   }, selectedItemProps, {
@@ -1446,21 +1449,21 @@ var SelectedElementsTag = function SelectedElementsTag(_ref) {
     "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;
+var FieldAppend = function FieldAppend(_ref3) {
+  var clearable = _ref3.clearable,
+    readOnly = _ref3.readOnly,
+    getToggleButtonProps = _ref3.getToggleButtonProps,
+    selectedItems = _ref3.selectedItems,
+    _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;
   if (loading) {
     return React.createElement(DropdownLoadingDots, null, loadingText);
   }
@@ -1482,14 +1485,14 @@ var FieldAppend = function FieldAppend(_ref2) {
     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;
+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.createElement(Tooltip, {
     "aria-hidden": "true",
     placement: "right",
@@ -1504,15 +1507,15 @@ var ClearableButton = function ClearableButton(_ref3) {
     "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;
+var ToggleButton = function ToggleButton(_ref5) {
+  var getToggleButtonProps = _ref5.getToggleButtonProps,
+    isOpen = _ref5.isOpen,
+    _ref5$closeAriaLabel = _ref5.closeAriaLabel,
+    closeAriaLabel = _ref5$closeAriaLabel === void 0 ? 'Lukk liste med valg' : _ref5$closeAriaLabel,
+    _ref5$openAriaLabel = _ref5.openAriaLabel,
+    openAriaLabel = _ref5$openAriaLabel === void 0 ? 'Åpne liste med valg' : _ref5$openAriaLabel,
+    _ref5$focusable = _ref5.focusable,
+    focusable = _ref5$focusable === void 0 ? false : _ref5$focusable;
   return React.createElement(IconButton, _extends({}, getToggleButtonProps({
     className: classNames('eds-dropdown-appendix__toggle-button', {
       'eds-dropdown-appendix__toggle-button--open': isOpen
@@ -1700,25 +1703,33 @@ var SearchableDropdownBeta = function SearchableDropdownBeta(_ref) {
   }));
 };
 
-var _excluded$1 = ["ariaLabelRemoveSelected", "className", "clearable", "debounceTimeout", "feedback", "hideSelectAll", "items", "label", "listStyle", "onChange", "openOnFocus", "placeholder", "readonly", "selectAllLabel", "selectedItems", "selectOnBlur", "style", "variant"];
+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 MultiSelectBeta = function MultiSelectBeta(_ref) {
-  var _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
+  var _ref$allItemsSelected = _ref.allItemsSelectedLabel,
+    allItemsSelectedLabel = _ref$allItemsSelected === void 0 ? 'Alle valgt' : _ref$allItemsSelected,
+    _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
     ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
     className = _ref.className,
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    _ref$clearInputOnSele = _ref.clearInputOnSelect,
+    clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
     feedback = _ref.feedback,
     _ref$hideSelectAll = _ref.hideSelectAll,
     hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
     initialItems = _ref.items,
     label = _ref.label,
     listStyle = _ref.listStyle,
+    _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$selectAllLabel = _ref.selectAllLabel,
     selectAllLabel = _ref$selectAllLabel === void 0 ? 'Velg alle' : _ref$selectAllLabel,
     selectedItems = _ref.selectedItems,
@@ -1736,10 +1747,17 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
     fetchItems = _useResolvedItems.fetchItems;
+  var isAllNonAsyncItemsSelected = typeof initialItems !== 'function' && selectedItems.length === normalizedItems.length;
   var selectAll = {
     value: useRandomId('select-all'),
     label: selectAllLabel
   };
+  var summarySelectedItems = React.useMemo(function () {
+    return {
+      value: '',
+      label: isAllNonAsyncItemsSelected ? allItemsSelectedLabel : selectedItems.length + ' valgte'
+    };
+  }, [isAllNonAsyncItemsSelected, selectedItems, normalizedItems, allItemsSelectedLabel]);
   var _useState = useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
     listItems = _useState[0],
     setListItems = _useState[1];
@@ -1749,6 +1767,12 @@ 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
+    filterListItems({
+      inputValue: inputValue != null ? inputValue : ''
+    });
+  };
   React.useEffect(function () {
     filterListItems({
       inputValue: inputValue
@@ -1780,23 +1804,24 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     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 _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);
     switch (type) {
       case useCombobox.stateChangeTypes.InputKeyDownEnter:
       case useCombobox.stateChangeTypes.ItemClick:
+        if (clearInputOnSelect) {
+          updateListItems('');
+        }
         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
+          inputValue: clearInputOnSelect ? '' : (_inputRef$current$val = inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : ''
         });
-
       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
+          inputValue: clearInputOnSelect ? '' : (_inputRef$current$val2 = inputRef == null ? void 0 : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : ''
         });
-
       case useCombobox.stateChangeTypes.InputChange:
         if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(/^\s+/g)) {
           var _changes$inputValue$r;
@@ -1805,10 +1830,7 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
             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 : ''
-        });
+        updateListItems(changes.inputValue);
         return changes;
       case useCombobox.stateChangeTypes.InputBlur:
         return _extends({}, changes, {
@@ -1859,6 +1881,13 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     isOpen = _useCombobox.isOpen,
     openMenu = _useCombobox.openMenu,
     setInputValue = _useCombobox.setInputValue;
+  var handleOnClear = function handleOnClear() {
+    var _inputRef$current3;
+    onChange([]);
+    setInputValue('');
+    (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
+    updateListItems(inputValue);
+  };
   // role=combobox leads to strange VoiceOver behavior and is therefor omitted
   // const { role: _, ...comboboxProps } = getComboboxProps();
   var _getComboboxProps = getComboboxProps(),
@@ -1870,16 +1899,11 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       selectedItems: selectedItems,
       isOpen: isOpen,
       clearable: clearable,
+      clearSelectedItemsLabel: removeAllItemsAriaLabel,
       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 : '');
-      },
+      onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
     className: classNames('eds-dropdown', className),
@@ -1900,8 +1924,8 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       var _inputRef$current4;
       if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
     }
-  }, selectedItems.map(function (selectedItem, index) {
-    return React.createElement(SelectedElementsTag, {
+  }, selectedItems.length < maxTags ? selectedItems.map(function (selectedItem, index) {
+    return React.createElement(SelectedItemTag, {
       index: index,
       key: selectedItem.value,
       getSelectedItemProps: getSelectedItemProps,
@@ -1909,6 +1933,10 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       removeSelectedItem: removeSelectedItem,
       ariaLabelRemoveSelected: ariaLabelRemoveSelected
     });
+  }) : React.createElement(SelectedItemTag, {
+    selectedItem: summarySelectedItems,
+    removeSelectedItem: handleOnClear,
+    ariaLabelRemoveSelected: removeAllItemsAriaLabel
   }), React.createElement("input", _extends({
     placeholder: placeholder,
     className: "eds-dropdown__input eds-form-control",