@entur/dropdown 5.0.9-beta.0 → 5.0.11

package/dist/Dropdown.d.ts

@@ -19,6 +19,12 @@ export type DropdownProps = {
      */
     clearable?: boolean;
     /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
     selectOnBlur?: boolean;
     /** Deaktiver dropdown-en */
     disabled?: boolean;
@@ -59,4 +65,4 @@ export type DropdownProps = {
      */
     ariaLabelOpenList?: string;
 };
-export declare const Dropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, style, variant, ...rest }: DropdownProps) => React.JSX.Element;
+export declare const Dropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, disabled, disableLabelAnimation, feedback, items: initialItems, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem, selectOnBlur, selectOnTab, style, variant, ...rest }: DropdownProps) => React.JSX.Element;

package/dist/MultiSelect.d.ts

@@ -59,6 +59,12 @@ export type MultiSelectProps = {
      */
     clearInputOnSelect?: boolean;
     /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
     selectOnBlur?: boolean;
     style?: React.CSSProperties;
     /** Styling som sendes ned til MultiSelect-lista */
@@ -108,4 +114,4 @@ export type MultiSelectProps = {
      */
     ariaLabelSelectedItem?: string;
 };
-export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => React.JSX.Element;
+export declare const MultiSelect: ({ className, clearable, clearInputOnSelect, debounceTimeout, disabled, feedback, hideSelectAll, items: initialItems, itemFilter, label, labelAllItemsSelected, labelClearAllItems, labelSelectAll, listStyle, loadingText, maxChips, noMatchesText, onChange, placeholder, readOnly, selectedItems, selectOnBlur, selectOnTab, style, variant, ariaLabelChosenSingular, ariaLabelChosenPlural, ariaLabelCloseList, ariaLabelJumpToInput, ariaLabelOpenList, ariaLabelRemoveSelected, ariaLabelSelectedItem, ...rest }: MultiSelectProps) => React.JSX.Element;

package/dist/SearchableDropdown.d.ts

@@ -33,6 +33,12 @@ export type SearchableDropdownProps = {
     /** Deaktiver dropdown-en */
     disabled?: boolean;
     /** Lar brukeren velge ved å "tab-e" seg ut av komponenten */
+    selectOnTab?: boolean;
+    /**
+     * @deprecated
+     * Bruk selectOnTab i stedet
+     *
+     * Lar brukeren velge ved å "tab-e" seg ut av komponenten */
     selectOnBlur?: boolean;
     /** Gjør dropdown-en til å kun kunne leses
      * @default false
@@ -67,4 +73,4 @@ export type SearchableDropdownProps = {
      */
     ariaLabelOpenList?: string;
 };
-export declare const SearchableDropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, items: initialItems, itemFilter, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, style, variant, ...rest }: SearchableDropdownProps) => React.JSX.Element;
+export declare const SearchableDropdown: ({ ariaLabelCloseList, ariaLabelOpenList, className, clearable, debounceTimeout, disabled, disableLabelAnimation, feedback, items: initialItems, itemFilter, label, labelClearSelectedItem, listStyle, loadingText, onChange, placeholder, prepend, readOnly, selectedItem: value, selectOnBlur, selectOnTab, style, variant, ...rest }: SearchableDropdownProps) => React.JSX.Element;

package/dist/dropdown.cjs.development.js

@@ -1317,7 +1317,7 @@ var DropdownList = function DropdownList(_ref) {
       className: "eds-dropdown__list__item__text"
     }, item.label, React.createElement(a11y.VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), item.icons && React.createElement("span", null, item.icons.map(function (Icon) {
       return React.createElement(Icon, {
-        key: Icon.displayName,
+        key: item.label + item.value + Icon.displayName,
         inline: true,
         className: "eds-dropdown__list__item__icon"
       });
@@ -1642,7 +1642,7 @@ var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
 };
 /* end a11y utils */
 
-var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "style", "variant"];
+var _excluded$3 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var SearchableDropdown = function SearchableDropdown(_ref) {
   var _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
@@ -1664,7 +1664,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
     listStyle = _ref.listStyle,
     loadingText = _ref.loadingText,
-    onChange = _ref.onChange,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return undefined;
+    } : _ref$onChange,
     placeholder = _ref.placeholder,
     prepend = _ref.prepend,
     _ref$readOnly = _ref.readOnly,
@@ -1672,6 +1675,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     value = _ref.selectedItem,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -1740,7 +1745,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             if (isSpacePressedOnEmptyInput) {
               openMenu();
               if (isOpen && changes.highlightedIndex !== undefined) {
-                onChange == null ? void 0 : onChange(listItems[changes.highlightedIndex]);
+                onChange(listItems[changes.highlightedIndex]);
               }
             }
           } else {
@@ -1769,7 +1774,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
             if (!selectOnBlur) break;
           case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
           case Downshift.useCombobox.stateChangeTypes.ItemClick:
-            onChange == null ? void 0 : onChange(clickedItem != null ? clickedItem : null);
+            onChange(clickedItem != null ? clickedItem : null);
         }
       },
       // Accessibility
@@ -1793,7 +1798,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     setInputValue = _useCombobox.setInputValue;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
-    onChange == null ? void 0 : onChange(null);
+    onChange(null);
     setInputValue(EMPTY_INPUT);
     (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     updateListItems({
@@ -1850,6 +1855,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     onFocus: function onFocus() {
       setHideSelectedItem(true);
     },
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') onChange(listItems[highlightedIndex]);
+    },
     ref: inputRef
   })))), React.createElement(DropdownList, {
     isOpen: isOpen,
@@ -1864,7 +1872,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   }));
 };
 
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "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", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "listStyle", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
 var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
     _ref$clearable = _ref.clearable,
@@ -1902,6 +1910,8 @@ var MultiSelect = function MultiSelect(_ref) {
     selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -2203,14 +2213,22 @@ var MultiSelect = function MultiSelect(_ref) {
     placeholder: placeholder,
     className: "eds-dropdown__input eds-form-control",
     disabled: readOnly || disabled
-  }, getInputProps(getDropdownProps({
+  }, getInputProps(_extends({
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') handleListItemClicked({
+        clickedItem: listItems[highlightedIndex],
+        onChange: onChange,
+        setLastRemovedItem: setLastRemovedItem
+      });
+    }
+  }, getDropdownProps({
     onClick: function onClick(e) {
       if (!isOpen && isVoiceOverClick(e)) openMenu();
     },
     preventKeyAction: isOpen,
     ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
-  })))))), React.createElement(DropdownList, {
+  }))))))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
@@ -2228,7 +2246,7 @@ var MultiSelect = function MultiSelect(_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 _excluded$1 = ["ariaLabelCloseList", "ariaLabelOpenList", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "listStyle", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
 var Dropdown = function Dropdown(_ref) {
   var _ref3, _selectedItem$label;
   var ariaLabelCloseList = _ref.ariaLabelCloseList,
@@ -2254,6 +2272,8 @@ var Dropdown = function Dropdown(_ref) {
     selectedItem = _ref.selectedItem,
     _ref$selectOnBlur = _ref.selectOnBlur,
     selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+    _ref$selectOnTab = _ref.selectOnTab,
+    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -2325,7 +2345,10 @@ var Dropdown = function Dropdown(_ref) {
   }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item"
   }, getToggleButtonProps({
-    id: undefined
+    id: undefined,
+    onKeyDown: function onKeyDown(e) {
+      if (selectOnTab && e.key === 'Tab') onChange == null ? void 0 : onChange(normalizedItems[highlightedIndex]);
+    }
   })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("span", {
     className: classNames('eds-dropdown__selected-item__placeholder', {
       'eds-dropdown__selected-item__placeholder--readonly': readOnly