@entur/dropdown 7.1.5 → 7.2.0-beta.0

package/dist/dropdown.cjs.development.js

@@ -429,6 +429,9 @@ var DropdownList = function DropdownList(_ref) {
       "aria-label": ariaValuesSelectAll().label
     }, selectAllItem == null ? void 0 : selectAllItem.label));
   };
+  var isReactComponent = function isReactComponent(icon) {
+    return typeof icon === 'function' || typeof icon === 'object' && icon !== null && '$$typeof' in icon && typeof icon.$$typeof === 'symbol';
+  };
   var listItemContent = function listItemContent(item) {
     return React.createElement(React.Fragment, null, isMultiselect && React.createElement(form.Checkbox, {
       "aria-hidden": "true",
@@ -438,14 +441,15 @@ var DropdownList = function DropdownList(_ref) {
       readOnly: true
     }), React.createElement("span", {
       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) {
-      var _Icon$displayName;
+    }, item.label, React.createElement(a11y.VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map(function (Icon, index) {
+      var _ref2, _Icon$displayName;
+      var key = ((_ref2 = (_Icon$displayName = Icon.displayName) != null ? _Icon$displayName : Icon.name) != null ? _ref2 : Icon.name) + "-" + index;
       return React.createElement(Icon, {
-        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value) + ((_Icon$displayName = Icon == null ? void 0 : Icon.displayName) != null ? _Icon$displayName : Icon == null ? void 0 : Icon.name),
+        key: key,
         inline: true,
         className: "eds-dropdown__list__item__icon"
       });
-    })));
+    }) : null);
   };
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
@@ -473,7 +477,11 @@ var DropdownList = function DropdownList(_ref) {
         }, noMatchesText);
       }
       return listItems.map(function (item, index) {
-        var _item$icons$map, _item$icons;
+        var _item$itemKey, _item$label, _item$value, _item$icons;
+        var key = (_item$itemKey = item.itemKey) != null ? _item$itemKey : ((_item$label = item.label) != null ? _item$label : '') + "-" + ((_item$value = item.value) != null ? _item$value : '') + "-" + ((_item$icons = item.icons) != null ? _item$icons : []).map(function (icon) {
+          var _ref3, _icon$displayName;
+          return (_ref3 = (_icon$displayName = icon == null ? void 0 : icon.displayName) != null ? _icon$displayName : icon == null ? void 0 : icon.name) != null ? _ref3 : 'unknown';
+        }).join('-');
         var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
         if (itemIsSelectAll && listItems.length <= 2) return null;
         return React.createElement("li", _extends({
@@ -482,10 +490,7 @@ var DropdownList = function DropdownList(_ref) {
             'eds-dropdown__list__item--highlighted': highlightedIndex === index,
             'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
           }),
-          key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value) + ((_item$icons$map = item == null || (_item$icons = item.icons) == null ? void 0 : _item$icons.map(function (icon) {
-            var _icon$displayName;
-            return (_icon$displayName = icon.displayName) != null ? _icon$displayName : icon.name;
-          })) != null ? _item$icons$map : '').toString()
+          key: key
         }, getItemProps({
           // @ts-expect-error Since getItemProps expects the same item type
           // here as items, it throws error when selectAllItem is a string.
@@ -596,10 +601,19 @@ var ClearableButton = function ClearableButton(_ref4) {
     className: "eds-dropdown__appendix__clear-button",
     type: "button",
     tabIndex: focusable ? 0 : -1,
+    // These events bubble up to the Dropdown container and trigger openMenu.
+    // To avoid this, stopPropagation and preventDefault are added.
     onClick: function onClick(e) {
       e.stopPropagation();
       onClear();
     },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClear();
+      }
+    },
     "aria-label": labelClearSelectedItems
   }, React.createElement(icons.CloseSmallIcon, {
     "aria-hidden": "true"
@@ -1622,9 +1636,22 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       items: normalizedItems,
       defaultHighlightedIndex: selectedItem ? undefined : 0,
       selectedItem: selectedItem,
-      onStateChange: function onStateChange(_ref2) {
-        var type = _ref2.type,
-          newSelectedItem = _ref2.selectedItem;
+      stateReducer: function stateReducer(_, _ref2) {
+        var changes = _ref2.changes,
+          type = _ref2.type;
+        var toggleButtonIsFocused = typeof document !== 'undefined' && document.activeElement === refs.reference.current;
+        switch (type) {
+          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
+          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
+            if (!toggleButtonIsFocused) return _extends({}, changes, {
+              isOpen: false
+            });
+        }
+        return changes;
+      },
+      onStateChange: function onStateChange(_ref3) {
+        var type = _ref3.type,
+          newSelectedItem = _ref3.selectedItem;
         switch (type) {
           case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
             if (!selectOnBlur) return;
@@ -1640,7 +1667,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     getLabelProps = _useSelect.getLabelProps,
     getMenuProps = _useSelect.getMenuProps,
     getToggleButtonProps = _useSelect.getToggleButtonProps,
-    highlightedIndex = _useSelect.highlightedIndex;
+    highlightedIndex = _useSelect.highlightedIndex,
+    reset = _useSelect.reset;
   // calculations for floating-UI popover position
   var _useFloating = reactDom.useFloating({
       open: isOpen,
@@ -1648,10 +1676,10 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
         padding: tokens.space.extraSmall
       }), reactDom.size({
-        apply: function apply(_ref3) {
-          var rects = _ref3.rects,
-            elements = _ref3.elements,
-            availableHeight = _ref3.availableHeight;
+        apply: function apply(_ref4) {
+          var rects = _ref4.rects,
+            elements = _ref4.elements,
+            availableHeight = _ref4.availableHeight;
           Object.assign(elements.floating.style, {
             width: rects.reference.width + "px",
             // Floating will flip when smaller than 10*16 px
@@ -1675,6 +1703,11 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return reactDom.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [isOpen, refs.reference, refs.floating, update]);
+  var handleOnClear = function handleOnClear() {
+    var _refs$reference$curre;
+    reset();
+    (_refs$reference$curre = refs.reference.current) == null || _refs$reference$curre.focus();
+  };
   return React.createElement(form.BaseFormControl, _extends({
     className: classNames('eds-dropdown', className, {
       'eds-dropdown--has-tooltip': labelTooltip !== undefined
@@ -1738,9 +1771,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-busy": !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true',
     "aria-expanded": isOpen,
     clearable: clearable,
-    onClear: function onClear() {
-      return onChange == null ? void 0 : onChange(null);
-    },
+    onClear: handleOnClear,
     disabled: disabled || readOnly,
     focusable: false,
     labelClearSelected: labelClearSelectedItem,