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

package/dist/beta/MultiSelect.d.ts

@@ -41,6 +41,14 @@ export type MultiSelectBetaProps = {
      * @default "Velg alle"
      */
     selectAllLabel?: string;
+    /** Teksten som vises for «Velg alle»-elementet i listen
+     * @default "Alle valgt"
+     */
+    allItemsSelectedLabel?: string;
+    /** Skjermleser-tekst som for å fjerne alle valg
+     * @default "Fjern valgte"
+     */
+    removeAllItemsAriaLabel?: string;
     /** Ekstra klassenavn */
     className?: string;
     /** Tekst for skjemleser på knapper for å fjerne valgt element
@@ -55,13 +63,15 @@ export type MultiSelectBetaProps = {
      * @default 250
      */
     debounceTimeout?: number;
+    maxTags?: number;
     /** Om en knapp for å fjerne alle valg skal vises
      * @default false
      */
     clearable?: boolean;
+    clearInputOnSelect?: boolean;
     selectOnBlur?: boolean;
     readonly?: boolean;
     loading?: boolean;
     style?: React.CSSProperties;
 };
-export declare const MultiSelectBeta: ({ ariaLabelRemoveSelected, className, clearable, debounceTimeout, feedback, hideSelectAll, items: initialItems, label, listStyle, onChange, openOnFocus, placeholder, readonly, selectAllLabel, selectedItems, selectOnBlur, style, variant, ...rest }: MultiSelectBetaProps) => JSX.Element;
+export declare const MultiSelectBeta: ({ allItemsSelectedLabel, ariaLabelRemoveSelected, className, clearable, clearInputOnSelect, debounceTimeout, feedback, hideSelectAll, items: initialItems, label, listStyle, maxTags, onChange, openOnFocus, placeholder, readonly, removeAllItemsAriaLabel, selectAllLabel, selectedItems, selectOnBlur, style, variant, ...rest }: MultiSelectBetaProps) => JSX.Element;

package/dist/beta/components/FieldComponents.d.ts

@@ -2,11 +2,11 @@ import { UseComboboxGetToggleButtonPropsOptions, UseMultipleSelectionGetSelected
 import { NormalizedDropdownItemType } from '../../useNormalizedItems';
 import React from 'react';
 import './FieldComponents.scss';
-export declare const SelectedElementsTag: ({ getSelectedItemProps, removeSelectedItem, selectedItem, index, ariaLabelRemoveSelected, }: {
-    getSelectedItemProps: (options: UseMultipleSelectionGetSelectedItemPropsOptions<NormalizedDropdownItemType>) => any;
+export declare const SelectedItemTag: ({ getSelectedItemProps, removeSelectedItem, selectedItem, index, ariaLabelRemoveSelected, }: {
+    getSelectedItemProps?: ((options: UseMultipleSelectionGetSelectedItemPropsOptions<NormalizedDropdownItemType>) => any) | undefined;
     removeSelectedItem: (item: NormalizedDropdownItemType) => void;
     selectedItem: NormalizedDropdownItemType;
-    index: number;
+    index?: number | undefined;
     ariaLabelRemoveSelected: string;
 }) => JSX.Element;
 export declare const FieldAppend: React.FC<{

package/dist/dropdown.cjs.development.js

@@ -1304,13 +1304,14 @@ 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",
       onChange: function onChange() {
         return;
       }
     }), React__default["default"].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) {
@@ -1318,18 +1319,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__default["default"].createElement("span", {
-      className: "eds-dropdown__list__item-text"
+      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) {
       return React__default["default"].createElement(Icon, {
         key: index,
         inline: true,
-        className: "eds-dropdown__list__item-icon"
+        className: "eds-dropdown__list__item__icon"
       });
     })));
   };
@@ -1432,17 +1434,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__default["default"].createElement(chip.TagChip, _extends({
     className: classNames__default["default"]('eds-dropdown__selected-element-tag')
   }, selectedItemProps, {
@@ -1456,21 +1459,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__default["default"].createElement(DropdownLoadingDots, null, loadingText);
   }
@@ -1492,14 +1495,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__default["default"].createElement(tooltip.Tooltip, {
     "aria-hidden": "true",
     placement: "right",
@@ -1514,15 +1517,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__default["default"].createElement(button.IconButton, _extends({}, getToggleButtonProps({
     className: classNames__default["default"]('eds-dropdown-appendix__toggle-button', {
       'eds-dropdown-appendix__toggle-button--open': isOpen
@@ -1710,25 +1713,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,
@@ -1746,10 +1757,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: utils.useRandomId('select-all'),
     label: selectAllLabel
   };
+  var summarySelectedItems = React__default["default"].useMemo(function () {
+    return {
+      value: '',
+      label: isAllNonAsyncItemsSelected ? allItemsSelectedLabel : selectedItems.length + ' valgte'
+    };
+  }, [isAllNonAsyncItemsSelected, selectedItems, normalizedItems, allItemsSelectedLabel]);
   var _useState = React.useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
     listItems = _useState[0],
     setListItems = _useState[1];
@@ -1759,6 +1777,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__default["default"].useEffect(function () {
     filterListItems({
       inputValue: inputValue
@@ -1790,23 +1814,24 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
     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, _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 Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
       case Downshift.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 Downshift.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 Downshift.useCombobox.stateChangeTypes.InputChange:
         if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(/^\s+/g)) {
           var _changes$inputValue$r;
@@ -1815,10 +1840,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 Downshift.useCombobox.stateChangeTypes.InputBlur:
         return _extends({}, changes, {
@@ -1869,6 +1891,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(),
@@ -1880,16 +1909,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__default["default"]('eds-dropdown', className),
@@ -1910,8 +1934,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__default["default"].createElement(SelectedElementsTag, {
+  }, selectedItems.length < maxTags ? selectedItems.map(function (selectedItem, index) {
+    return React__default["default"].createElement(SelectedItemTag, {
       index: index,
       key: selectedItem.value,
       getSelectedItemProps: getSelectedItemProps,
@@ -1919,6 +1943,10 @@ var MultiSelectBeta = function MultiSelectBeta(_ref) {
       removeSelectedItem: removeSelectedItem,
       ariaLabelRemoveSelected: ariaLabelRemoveSelected
     });
+  }) : React__default["default"].createElement(SelectedItemTag, {
+    selectedItem: summarySelectedItems,
+    removeSelectedItem: handleOnClear,
+    ariaLabelRemoveSelected: removeAllItemsAriaLabel
   }), React__default["default"].createElement("input", _extends({
     placeholder: placeholder,
     className: "eds-dropdown__input eds-form-control",