@entur/dropdown 6.0.3-beta.1 → 6.0.3-beta.3

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: listRef
+      'aria-multiselectable': isMultiselect
+    }, {
+      suppressRefError: true
     }), {
+      ref: listRef,
       className: "eds-dropdown__list",
       style: _extends({
         display: isOpen ? 'inline-block' : 'none'
@@ -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;
 };
@@ -1557,7 +1562,7 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var handleListItemClicked = function handleListItemClicked(_ref2) {
     var clickedItem = _ref2.clickedItem,
       onChange = _ref2.onChange,
-      setLastRemovedItem = _ref2.setLastRemovedItem;
+      setLastRemovedItem = _ref2.setLastClickedItem;
     if (clickedItemIsSelectAll(clickedItem)) {
       if (allListItemsAreSelected) {
         setLastRemovedItem(selectAll);
@@ -1607,40 +1612,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;
-  }
-  if (resultCount !== previousResultCount) {
-    return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med enter.";
+    return 'Ingen resultater';
   }
-  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 +1793,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,
@@ -1904,11 +1891,17 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       if (selectOnTab && isOpen && e.key === 'Tab') onChange == null ? void 0 : onChange(listItems[highlightedIndex]);
-    },
+    }
+  }, {
+    suppressRefError: true
+  }), {
     ref: inputRef
-  }))), React.createElement(DropdownList, {
+  })), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
+    getItemProps: getItemProps,
+    getMenuProps: getMenuProps,
+    highlightedIndex: highlightedIndex,
     isOpen: isOpen,
     listItems: listItems,
     listStyle: _extends({}, floatingStyles, listStyle),
@@ -1916,9 +1909,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
-    getItemProps: getItemProps,
-    getMenuProps: getMenuProps,
-    highlightedIndex: highlightedIndex,
     selectedItems: selectedItem !== null ? [selectedItem] : []
   }));
 };
@@ -1983,8 +1973,7 @@ var MultiSelect = function MultiSelect(_ref) {
     lastHighlightedIndex = _React$useState[0],
     setLastHighlightedIndex = _React$useState[1];
   var _React$useState2 = React.useState(undefined),
-    lastRemovedItem = _React$useState2[0],
-    setLastRemovedItem = _React$useState2[1];
+    setLastClickedItem = _React$useState2[1];
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     //@ts-expect-error this is done to aid developers debug wrong prop usage
@@ -2040,7 +2029,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 +2045,6 @@ var MultiSelect = function MultiSelect(_ref) {
               break;
             }
         }
-      },
-      // Accessibility
-      getA11yRemovalMessage: function getA11yRemovalMessage$1(options) {
-        return getA11yRemovalMessage(_extends({}, options, {
-          selectAllItem: selectAll,
-          removedItem: lastRemovedItem
-        }));
       }
     }),
     getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
@@ -2109,7 +2093,7 @@ var MultiSelect = function MultiSelect(_ref) {
                 handleListItemClicked({
                   clickedItem: listItems[changes.highlightedIndex],
                   onChange: onChange,
-                  setLastRemovedItem: setLastRemovedItem
+                  setLastClickedItem: setLastClickedItem
                 });
               }
             }
@@ -2160,7 +2144,7 @@ var MultiSelect = function MultiSelect(_ref) {
               handleListItemClicked({
                 clickedItem: clickedItem,
                 onChange: onChange,
-                setLastRemovedItem: setLastRemovedItem
+                setLastClickedItem: setLastClickedItem
               });
             }
         }
@@ -2168,14 +2152,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)),
@@ -2267,7 +2245,7 @@ var MultiSelect = function MultiSelect(_ref) {
         handleListItemClicked({
           clickedItem: selectedItem,
           onChange: onChange,
-          setLastRemovedItem: setLastRemovedItem
+          setLastClickedItem: setLastClickedItem
         });
         inputRef == null ? void 0 : (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.focus();
       },
@@ -2293,16 +2271,19 @@ var MultiSelect = function MultiSelect(_ref) {
           handleListItemClicked({
             clickedItem: highlitedItem,
             onChange: onChange,
-            setLastRemovedItem: setLastRemovedItem
+            setLastClickedItem: setLastClickedItem
           });
         }
       }
     }
   }, getDropdownProps({
     preventKeyAction: isOpen,
-    ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
-  })))))), React.createElement(DropdownList, {
+  })), {
+    suppressRefError: true
+  }), {
+    ref: inputRef
+  }))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
@@ -2385,6 +2366,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 +2413,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,
@@ -2448,9 +2433,12 @@ var Dropdown = function Dropdown(_ref) {
           onChange == null ? void 0 : onChange(highlitedItem);
         }
       }
-    },
+    }
+  }, {
+    suppressRefError: true
+  }), {
     ref: toggleButtonRef
-  })), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
+  }), (_ref3 = (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
     className: classNames('eds-dropdown__selected-item__placeholder', {
       'eds-dropdown__selected-item__placeholder--readonly': readOnly
     })