@entur/dropdown 5.4.11 → 5.5.0

package/dist/dropdown.esm.js

@@ -1,5 +1,5 @@
 import { mergeRefs, useDebounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import Downshift, { useSelect, useCombobox, useMultipleSelection } from 'downshift';
 import classNames from 'classnames';
 import { BaseFormControl, VariantProvider, FeedbackText, Checkbox } from '@entur/form';
@@ -7,6 +7,7 @@ import { CheckIcon, DownArrowIcon, CloseSmallIcon, CloseIcon } from '@entur/icon
 import { VisuallyHidden } from '@entur/a11y';
 import { LoadingDots } from '@entur/loader';
 import { space } from '@entur/tokens';
+import { useFloating, autoUpdate, offset, flip } from '@floating-ui/react-dom';
 import { IconButton } from '@entur/button';
 import { TagChip } from '@entur/chip';
 import { Tooltip } from '@entur/tooltip';
@@ -1234,7 +1235,7 @@ function SelectedItemsLabel(items) {
   }).toString() : items.length + " elementer valgt";
 }
 
-var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
+var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "listStyle", "listRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
 var DropdownList = function DropdownList(_ref) {
   var _listItems$;
   var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
@@ -1247,6 +1248,7 @@ var DropdownList = function DropdownList(_ref) {
     highlightedIndex = _ref.highlightedIndex,
     listItems = _ref.listItems,
     listStyle = _ref.listStyle,
+    listRef = _ref.listRef,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$loadingText = _ref.loadingText,
@@ -1329,7 +1331,8 @@ 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
+      'aria-multiselectable': isMultiselect,
+      ref: mergeRefs(getMenuProps().ref, listRef)
     }), {
       className: "eds-dropdown__list",
       style: _extends({
@@ -1683,17 +1686,17 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   var _useState = useState(value !== null),
     showSelectedItem = _useState[0],
     setShowSelectedItem = _useState[1];
-  var _React$useState = React.useState(0),
-    lastHighlightedIndex = _React$useState[0],
-    setLastHighlightedIndex = _React$useState[1];
+  var _useState2 = useState(0),
+    lastHighlightedIndex = _useState2[0],
+    setLastHighlightedIndex = _useState2[1];
   var inputRef = useRef(null);
   var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
     normalizedItems = _useResolvedItems.items,
     loading = _useResolvedItems.loading,
     fetchItems = _useResolvedItems.fetchItems;
-  var _React$useState2 = React.useState(normalizedItems),
-    listItems = _React$useState2[0],
-    setListItems = _React$useState2[1];
+  var _useState3 = useState(normalizedItems),
+    listItems = _useState3[0],
+    setListItems = _useState3[1];
   var filterListItems = function filterListItems(_ref2) {
     var inputValue = _ref2.inputValue;
     return setListItems(normalizedItems.filter(function (item) {
@@ -1708,13 +1711,23 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       inputValue: inputValue != null ? inputValue : EMPTY_INPUT
     });
   };
-  React.useEffect(function () {
+  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
+  useEffect(function () {
     filterListItems({
       inputValue: inputValue
     });
   }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
-  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
-  var stateReducer = React.useCallback(function (_, _ref4) {
+  useEffect(function () {
+    // sync internal state on initial render
+    if (selectedItem !== null && !inputHasFocus) {
+      setShowSelectedItem(true);
+      updateListItems({
+        inputValue: EMPTY_INPUT
+      });
+      setInputValue(EMPTY_INPUT);
+    }
+  }, []);
+  var stateReducer = useCallback(function (_, _ref4) {
     var type = _ref4.type,
       changes = _ref4.changes;
     if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
@@ -1807,6 +1820,16 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     selectedItem = _useCombobox.selectedItem,
     inputValue = _useCombobox.inputValue,
     setInputValue = _useCombobox.setInputValue;
+  var _useFloating = useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [offset(space.extraSmall2), flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
     onChange(null);
@@ -1838,6 +1861,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     },
     prepend: prepend,
     readOnly: readOnly,
+    ref: refs.setReference,
     variant: variant
   }, rest, {
     append: React.createElement(FieldAppend$1, {
@@ -1886,7 +1910,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     isOpen: isOpen,
     listItems: listItems,
-    listStyle: listStyle,
+    listStyle: _extends({}, floatingStyles, listStyle),
+    listRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
@@ -2091,6 +2116,11 @@ var MultiSelect = function MultiSelect(_ref) {
             updateListItems({
               inputValue: changes.inputValue
             });
+            // set highlighted item to first item after search
+            setLastHighlightedIndex(hideSelectAll ? 0 : 1);
+            return _extends({}, changes, {
+              highlightedIndex: hideSelectAll ? 0 : 1
+            });
           }
           return changes;
         }
@@ -2158,6 +2188,16 @@ var MultiSelect = function MultiSelect(_ref) {
     isOpen = _useCombobox.isOpen,
     openMenu = _useCombobox.openMenu,
     setInputValue = _useCombobox.setInputValue;
+  var _useFloating = useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [offset(space.extraSmall2), flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current3;
     onChange([]);
@@ -2200,6 +2240,7 @@ var MultiSelect = function MultiSelect(_ref) {
       if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus();
     },
     readOnly: readOnly,
+    ref: refs.setReference,
     variant: variant
   }, rest), React.createElement("div", {
     className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
@@ -2271,7 +2312,8 @@ var MultiSelect = function MultiSelect(_ref) {
     inputValue: inputValue,
     isOpen: isOpen,
     listItems: listItems,
-    listStyle: listStyle,
+    listStyle: _extends({}, floatingStyles, listStyle),
+    listRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
@@ -2349,6 +2391,16 @@ var Dropdown = function Dropdown(_ref) {
     getMenuProps = _useSelect.getMenuProps,
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
+  var _useFloating = useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [offset(space.extraSmall2), flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
   return React.createElement("div", {
     className: classNames('eds-dropdown__wrapper', className, {
       'eds-dropdown__wrapper--has-tooltip': labelTooltip !== undefined
@@ -2387,6 +2439,7 @@ var Dropdown = function Dropdown(_ref) {
     labelTooltip: labelTooltip,
     prepend: prepend,
     readOnly: readOnly,
+    ref: refs.setReference,
     variant: variant
   }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item"
@@ -2414,7 +2467,8 @@ var Dropdown = function Dropdown(_ref) {
     highlightedIndex: highlightedIndex,
     isOpen: isOpen,
     listItems: normalizedItems,
-    listStyle: listStyle,
+    listStyle: _extends({}, floatingStyles, listStyle),
+    listRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     selectedItems: selectedItem !== null ? [selectedItem] : []