@entur/dropdown 6.0.1 → 6.0.3-RC.0

package/dist/components/DropdownList.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
+import { UseComboboxPropGetters, UseSelectPropGetters } from 'downshift';
 import { NormalizedDropdownItemType } from '../types';
 import './DropdownList.scss';
 type DropdownListProps<ValueType> = {
     ariaLabelChosenSingular?: string;
     ariaLabelSelectedItem?: string;
-    getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType<ValueType>>) => any;
-    getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
+    getMenuProps: UseComboboxPropGetters<ValueType>['getMenuProps'] | UseSelectPropGetters<ValueType>['getMenuProps'];
+    getItemProps: UseComboboxPropGetters<ValueType>['getItemProps'] | UseSelectPropGetters<ValueType>['getItemProps'];
     highlightedIndex: number;
     isOpen: boolean;
     listItems: NormalizedDropdownItemType<ValueType | string>[];

package/dist/dropdown.cjs.development.js

@@ -1335,9 +1335,11 @@ var DropdownList = function DropdownList(_ref) {
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
     React.createElement("ul", _extends({}, getMenuProps({
-      'aria-multiselectable': isMultiselect,
-      ref: utils.mergeRefs(getMenuProps().ref, listRef)
+      'aria-multiselectable': isMultiselect
+    }, {
+      suppressRefError: true
     }), {
+      ref: utils.mergeRefs(listRef, getMenuProps().ref),
       className: "eds-dropdown__list",
       style: _extends({
         display: isOpen ? 'inline-block' : 'none'
@@ -1346,14 +1348,13 @@ var DropdownList = function DropdownList(_ref) {
       var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
       if (itemIsSelectAll && listItems.length <= 2) return null;
       return React.createElement("li", _extends({
-        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value),
         className: classNames('eds-dropdown__list__item', {
           'eds-dropdown__list__item--select-all': itemIsSelectAll,
           '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)
       }, getItemProps({
-        key: (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value),
         // @ts-expect-error Since getItemProps expects the same item type
         // here as items, it throws error when selectAllItem is a string.
         // This does, however, not cause any functional issues.
@@ -1403,7 +1404,8 @@ var SelectedItemTag = function SelectedItemTag(_ref) {
     key: selectedItem.value,
     "aria-live": "polite"
   }), React.createElement("span", {
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    className: "eds-dropdown__selected-item-tag__text"
   }, selectedItem.label));
 };
 var FieldAppend$1 = function FieldAppend(_ref3) {
@@ -1517,6 +1519,9 @@ input) {
 var itemToString = function itemToString(item) {
   return item ? item.label : '';
 };
+var itemToKey = function itemToKey(item) {
+  return (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value);
+};
 var isFunctionWithQueryArgument = function isFunctionWithQueryArgument(object) {
   return typeof object === 'function' && object.length > 0;
 };
@@ -1556,17 +1561,14 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
   };
   var handleListItemClicked = function handleListItemClicked(_ref2) {
     var clickedItem = _ref2.clickedItem,
-      onChange = _ref2.onChange,
-      setLastRemovedItem = _ref2.setLastRemovedItem;
+      onChange = _ref2.onChange;
     if (clickedItemIsSelectAll(clickedItem)) {
       if (allListItemsAreSelected) {
-        setLastRemovedItem(selectAll);
         return unselectAllListItems(onChange);
       }
       return selectAllUnselectedItemsInListItems(onChange);
     }
     if (clickedItemIsInSelectedItems(clickedItem)) {
-      setLastRemovedItem(clickedItem);
       return removeClickedItemFromSelectedItems(clickedItem, onChange);
     }
     addClickedItemToSelectedItems(clickedItem, onChange);
@@ -1607,40 +1609,23 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     unselectAllListItems: unselectAllListItems
   };
 };
+/* end multiselect utils */
+/* start a11y utils */
+// called when the state changes:
+// selectedItem, highlightedIndex, inputValue or isOpen.
 function getA11yStatusMessage(options) {
   var isOpen = options.isOpen,
-    resultCount = options.resultCount,
-    previousResultCount = options.previousResultCount,
     _options$selectAllIte = options.selectAllItemIncluded,
     selectAllItemIncluded = _options$selectAllIte === void 0 ? false : _options$selectAllIte,
-    _options$ariaLabelNoR = options.ariaLabelNoResults,
-    ariaLabelNoResults = _options$ariaLabelNoR === void 0 ? 'Ingen resultater' : _options$ariaLabelNoR;
+    resultCount = options.resultCount;
   if (!isOpen) {
     return '';
   }
   var resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
   if (resultCountWithoutSelectAll === 0) {
-    return ariaLabelNoResults;
+    return 'Ingen resultater';
   }
-  if (resultCount !== previousResultCount) {
-    return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med enter.";
-  }
-  return '';
-}
-function getA11ySelectionMessage(options) {
-  var selectedItem = options.selectedItem,
-    itemToStringLocal = options.itemToString,
-    selectAllItem = options.selectAllItem;
-  if ((selectedItem == null ? void 0 : selectedItem.value) === (selectAllItem == null ? void 0 : selectAllItem.value)) return 'Alle elementer i listen valgt.';
-  return selectedItem ? itemToStringLocal(selectedItem) + " er valgt." : '';
-}
-function getA11yRemovalMessage(options) {
-  var itemToString = options.itemToString,
-    selectAllItem = options.selectAllItem,
-    removedItem = options.removedItem;
-  if (removedItem === undefined) return '';
-  if (removedItem.value === (selectAllItem == null ? void 0 : selectAllItem.value)) return 'Alle elementer i listen fjernet fra valgte.';
-  return itemToString(removedItem) + " fjernet fra valgte.";
+  return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.";
 }
 /* end a11y utils */
 
@@ -1805,11 +1790,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
         }
       },
       // Accessibility
-      getA11yStatusMessage: getA11yStatusMessage,
-      // The following A11y-helper does not work due to a bug (https://github.com/downshift-js/downshift/issues/1227)
-      // but is left here for when it is fixed
-      getA11ySelectionMessage: function getA11ySelectionMessage$1(options) {
-        return getA11ySelectionMessage(options);
+      getA11yStatusMessage: function getA11yStatusMessage$1(options) {
+        return getA11yStatusMessage(_extends({}, options, {
+          resultCount: listItems.length
+        }));
       }
     }, rest)),
     isOpen = _useCombobox.isOpen,
@@ -1909,6 +1893,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   }))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
+    getItemProps: getItemProps,
+    getMenuProps: getMenuProps,
+    highlightedIndex: highlightedIndex,
     isOpen: isOpen,
     listItems: listItems,
     listStyle: _extends({}, floatingStyles, listStyle),
@@ -1916,9 +1903,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
-    getItemProps: getItemProps,
-    getMenuProps: getMenuProps,
-    highlightedIndex: highlightedIndex,
     selectedItems: selectedItem !== null ? [selectedItem] : []
   }));
 };
@@ -1982,14 +1966,12 @@ var MultiSelect = function MultiSelect(_ref) {
   var _React$useState = React.useState(0),
     lastHighlightedIndex = _React$useState[0],
     setLastHighlightedIndex = _React$useState[1];
-  var _React$useState2 = React.useState(undefined),
-    lastRemovedItem = _React$useState2[0],
-    setLastRemovedItem = _React$useState2[1];
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     //@ts-expect-error this is done to aid developers debug wrong prop usage
     if (rest.selectedItem !== undefined) console.warn("Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?");
-  }, []);
+    //@ts-expect-error selectedItem should not actually exist in rest
+  }, [rest.selectedItem]);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
@@ -2040,7 +2022,9 @@ var MultiSelect = function MultiSelect(_ref) {
     selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState;
   var _useMultipleSelection = Downshift.useMultipleSelection({
       selectedItems: selectedItems,
+      // @ts-expect-error prop missing from library types
       itemToString: itemToString,
+      itemToKey: itemToKey,
       onStateChange: function onStateChange(_ref4) {
         var newSelectedItems = _ref4.selectedItems,
           type = _ref4.type;
@@ -2054,13 +2038,6 @@ var MultiSelect = function MultiSelect(_ref) {
               break;
             }
         }
-      },
-      // Accessibility
-      getA11yRemovalMessage: function getA11yRemovalMessage$1(options) {
-        return getA11yRemovalMessage(_extends({}, options, {
-          selectAllItem: selectAll,
-          removedItem: lastRemovedItem
-        }));
       }
     }),
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
@@ -2108,8 +2085,7 @@ var MultiSelect = function MultiSelect(_ref) {
               if (isOpen && changes.highlightedIndex !== undefined) {
                 handleListItemClicked({
                   clickedItem: listItems[changes.highlightedIndex],
-                  onChange: onChange,
-                  setLastRemovedItem: setLastRemovedItem
+                  onChange: onChange
                 });
               }
             }
@@ -2159,8 +2135,7 @@ var MultiSelect = function MultiSelect(_ref) {
             {
               handleListItemClicked({
                 clickedItem: clickedItem,
-                onChange: onChange,
-                setLastRemovedItem: setLastRemovedItem
+                onChange: onChange
               });
             }
         }
@@ -2168,14 +2143,8 @@ var MultiSelect = function MultiSelect(_ref) {
       // Accessibility
       getA11yStatusMessage: function getA11yStatusMessage$1(options) {
         return getA11yStatusMessage(_extends({}, options, {
-          selectAllItemIncluded: !hideSelectAll
-        }));
-      },
-      // The following A11y-helper does not work due to a bug (https://github.com/downshift-js/downshift/issues/1227)
-      // but is left here for when it is fixed
-      getA11ySelectionMessage: function getA11ySelectionMessage$1(options) {
-        return getA11ySelectionMessage(_extends({}, options, {
-          selectAllItem: selectAll
+          selectAllItemIncluded: !hideSelectAll,
+          resultCount: listItems.length
         }));
       }
     }, rest)),
@@ -2266,8 +2235,7 @@ var MultiSelect = function MultiSelect(_ref) {
         var _inputRef$current6;
         handleListItemClicked({
           clickedItem: selectedItem,
-          onChange: onChange,
-          setLastRemovedItem: setLastRemovedItem
+          onChange: onChange
         });
         inputRef == null ? void 0 : (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.focus();
       },
@@ -2292,17 +2260,16 @@ var MultiSelect = function MultiSelect(_ref) {
         if (highlitedItem) {
           handleListItemClicked({
             clickedItem: highlitedItem,
-            onChange: onChange,
-            setLastRemovedItem: setLastRemovedItem
+            onChange: onChange
           });
         }
       }
     }
   }, getDropdownProps({
     preventKeyAction: isOpen,
-    ref: inputRef,
-    value: inputValue != null ? inputValue : EMPTY_INPUT
-  })))))), React.createElement(DropdownList, {
+    value: inputValue != null ? inputValue : EMPTY_INPUT,
+    ref: inputRef
+  }))))), "; ;"), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
@@ -2385,6 +2352,7 @@ var Dropdown = function Dropdown(_ref) {
       itemToString: itemToString
     }),
     isOpen = _useSelect.isOpen,
+    openMenu = _useSelect.openMenu,
     getItemProps = _useSelect.getItemProps,
     getLabelProps = _useSelect.getLabelProps,
     getMenuProps = _useSelect.getMenuProps,
@@ -2431,6 +2399,9 @@ var Dropdown = function Dropdown(_ref) {
     labelId: getLabelProps().id,
     labelProps: getLabelProps(),
     labelTooltip: labelTooltip,
+    onClick: function onClick(e) {
+      if (e.target === e.currentTarget) openMenu();
+    },
     prepend: prepend,
     readOnly: readOnly,
     ref: refs.setReference,