@entur/dropdown 5.2.1-beta.0 → 5.3.0

package/dist/dropdown.esm.js

@@ -496,7 +496,7 @@ var DropdownDeprecatedToggleButton = function DropdownDeprecatedToggleButton() {
       'eds-dropdown__toggle-button--open': isOpen
     })
   }), {
-    tabIndex: "-1",
+    tabIndex: -1,
     type: "button"
   }), React.createElement(DownArrowIcon, null));
 };
@@ -1109,7 +1109,7 @@ var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
   }, React.createElement(BaseFormControl, {
     label: label,
     labelId: multiSelectId,
-    labelProps: getLabelProps(),
+    labelProps: getLabelProps,
     feedback: feedback,
     variant: variant,
     isFilled: selectedItems.length > 0 || isOpen,
@@ -1264,19 +1264,28 @@ var DropdownList = function DropdownList(_ref) {
       return (selectedItem == null ? void 0 : selectedItem.value) === (item == null ? void 0 : item.value) && (selectedItem == null ? void 0 : selectedItem.label) === (item == null ? void 0 : item.label);
     });
   };
-  var ariaLabelSelectAll = function ariaLabelSelectAll() {
+  var ariaValuesSelectAll = function ariaValuesSelectAll() {
     switch (selectAllCheckboxState == null ? void 0 : selectAllCheckboxState()) {
       case 'indeterminate':
         {
-          return (selectAllItem == null ? void 0 : selectAllItem.label) + ", delvis valgt";
+          return {
+            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", delvis valgt",
+            selected: false
+          };
         }
       case true:
         {
-          return (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular;
+          return {
+            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular,
+            selected: true
+          };
         }
       default:
         {
-          return "" + (selectAllItem == null ? void 0 : selectAllItem.label);
+          return {
+            label: "" + (selectAllItem == null ? void 0 : selectAllItem.label),
+            selected: false
+          };
         }
     }
   };
@@ -1291,7 +1300,7 @@ var DropdownList = function DropdownList(_ref) {
       tabIndex: -1
     }), React.createElement("span", {
       className: "eds-dropdown__list__item__text",
-      "aria-label": ariaLabelSelectAll()
+      "aria-label": ariaValuesSelectAll().label
     }, selectAllItem == null ? void 0 : selectAllItem.label));
   };
   var listItemContent = function listItemContent(item) {
@@ -1319,7 +1328,9 @@ var DropdownList = function DropdownList(_ref) {
   };
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
-    React.createElement("ul", _extends({}, getMenuProps(), {
+    React.createElement("ul", _extends({}, getMenuProps({
+      'aria-multiselectable': isMultiselect
+    }), {
       className: "eds-dropdown__list",
       style: _extends({
         display: isOpen ? 'inline-block' : 'none'
@@ -1340,7 +1351,8 @@ var DropdownList = function DropdownList(_ref) {
         // here as items, it throws error when selectAllItem is a string.
         // This does, however, not cause any functional issues.
         item: item,
-        index: index
+        index: index,
+        'aria-selected': itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
       })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
     }), isNoMatches && React.createElement("li", {
       key: "dropdown-list-no-match",
@@ -1622,17 +1634,6 @@ function getA11yRemovalMessage(options) {
   if (removedItem.value === (selectAllItem == null ? void 0 : selectAllItem.value)) return 'Alle elementer i listen fjernet fra valgte.';
   return itemToString(removedItem) + " fjernet fra valgte.";
 }
-/**A VoiceOver click is always preformed in the center of the clicked element.
-   This functions expolits that to check if the performed click likely is
-   made by VoiceOver. */
-var isVoiceOverClick = function isVoiceOverClick(clickEvent) {
-  var targetElementRect = clickEvent.currentTarget.getBoundingClientRect();
-  var targetElementMiddleX = Math.floor(targetElementRect.x + targetElementRect.width / 2);
-  var targetElementMiddleY = Math.floor(targetElementRect.y + targetElementRect.height / 2);
-  var clickPositionX = clickEvent.clientX;
-  var clickPositionY = clickEvent.clientY;
-  return Math.abs(targetElementMiddleX - clickPositionX) <= 1 && Math.abs(targetElementMiddleY - clickPositionY) <= 1;
-};
 /* end a11y utils */
 
 var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "listStyle", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
@@ -1855,7 +1856,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     "aria-hidden": "true",
     onClick: function onClick() {
       var _inputRef$current3;
-      return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
+      (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.focus();
+      openMenu();
     }
   }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
     className: classNames('eds-dropdown__input eds-form-control', {
@@ -1864,9 +1866,6 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     disabled: readOnly || disabled,
     placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder
   }, getInputProps({
-    onClick: function onClick(e) {
-      if (!isOpen && isVoiceOverClick(e)) openMenu();
-    },
     onBlur: function onBlur() {
       if (selectedItem !== null) setShowSelectedItem(true);
     },
@@ -1874,13 +1873,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       setShowSelectedItem(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && isOpen && e.key === 'Tab') {
-        var highlitedItem = listItems[highlightedIndex];
-        if (highlitedItem) {
-          // we don't want to clear selection with tab
-          onChange == null ? void 0 : onChange(highlitedItem);
-        }
-      }
+      if (selectOnTab && isOpen && e.key === 'Tab') onChange == null ? void 0 : onChange(listItems[highlightedIndex]);
     },
     ref: inputRef
   })))), React.createElement(DropdownList, {
@@ -2257,9 +2250,6 @@ var MultiSelect = function MultiSelect(_ref) {
       }
     }
   }, getDropdownProps({
-    onClick: function onClick(e) {
-      if (!isOpen && isVoiceOverClick(e)) openMenu();
-    },
     preventKeyAction: isOpen,
     ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
@@ -2319,6 +2309,7 @@ var Dropdown = function Dropdown(_ref) {
   var _useResolvedItems = useResolvedItems(initialItems),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading;
+  var toggleButtonRef = useRef(null);
   var isFilled = selectedItem !== null || placeholder !== undefined;
   var _useSelect = useSelect({
       items: normalizedItems,
@@ -2332,6 +2323,7 @@ var Dropdown = function Dropdown(_ref) {
           case useSelect.stateChangeTypes.ToggleButtonBlur:
             if (!selectOnBlur) break;
           case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter: // eslint-disable-line no-fallthrough
+          case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
           case useSelect.stateChangeTypes.ItemClick:
             {
               if (newSelectedItem === undefined) return;
@@ -2363,7 +2355,9 @@ var Dropdown = function Dropdown(_ref) {
       loading: loading,
       loadingText: loadingText,
       onClear: function onClear() {
+        var _toggleButtonRef$curr;
         onChange == null ? void 0 : onChange(null);
+        (_toggleButtonRef$curr = toggleButtonRef.current) == null ? void 0 : _toggleButtonRef$curr.focus();
       },
       disabled: readOnly || disabled,
       selectedItems: [selectedItem]
@@ -2393,7 +2387,8 @@ var Dropdown = function Dropdown(_ref) {
           onChange == null ? void 0 : onChange(highlitedItem);
         }
       }
-    }
+    },
+    ref: toggleButtonRef
   })), (_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