@entur/dropdown 5.4.11 → 6.0.0-beta.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);
@@ -1817,13 +1840,24 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     });
     setShowSelectedItem(false);
   };
-  return React.createElement("div", {
-    className: classNames('eds-dropdown__wrapper', className, {
-      'eds-dropdown__wrapper--has-tooltip': labelTooltip !== undefined
+  return React.createElement(BaseFormControl, _extends({
+    append: React.createElement(FieldAppend$1, {
+      ariaLabelCloseList: ariaLabelCloseList,
+      ariaLabelOpenList: ariaLabelOpenList,
+      clearable: clearable,
+      labelClearSelectedItems: labelClearSelectedItem,
+      disabled: readOnly || disabled,
+      focusable: false,
+      getToggleButtonProps: getToggleButtonProps,
+      isOpen: isOpen,
+      loading: loading,
+      loadingText: loadingText,
+      onClear: handleOnClear,
+      selectedItems: [selectedItem]
+    }),
+    className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
+      'eds-dropdown--has-tooltip': labelTooltip !== undefined
     }),
-    style: style
-  }, React.createElement(BaseFormControl, _extends({
-    className: classNames('eds-dropdown', 'eds-dropdown--searchable'),
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
@@ -1838,23 +1872,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     },
     prepend: prepend,
     readOnly: readOnly,
+    ref: refs.setReference,
+    style: style,
     variant: variant
-  }, rest, {
-    append: React.createElement(FieldAppend$1, {
-      ariaLabelCloseList: ariaLabelCloseList,
-      ariaLabelOpenList: ariaLabelOpenList,
-      clearable: clearable,
-      labelClearSelectedItems: labelClearSelectedItem,
-      disabled: readOnly || disabled,
-      focusable: false,
-      getToggleButtonProps: getToggleButtonProps,
-      isOpen: isOpen,
-      loading: loading,
-      loadingText: loadingText,
-      onClear: handleOnClear,
-      selectedItems: [selectedItem]
-    })
-  }), React.createElement("span", {
+  }, rest), React.createElement("span", {
     className: classNames('eds-dropdown--searchable__selected-item', {
       'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
     }),
@@ -1881,12 +1902,13 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       if (selectOnTab && isOpen && e.key === 'Tab') onChange == null ? void 0 : onChange(listItems[highlightedIndex]);
     },
     ref: inputRef
-  })))), React.createElement(DropdownList, {
+  }))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     isOpen: isOpen,
     listItems: listItems,
-    listStyle: listStyle,
+    listStyle: _extends({}, floatingStyles, listStyle),
+    listRef: refs.setFloating,
     loading: loading,
     loadingText: loadingText,
     noMatchesText: noMatchesText,
@@ -2091,6 +2113,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 +2185,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([]);
@@ -2167,12 +2204,7 @@ var MultiSelect = function MultiSelect(_ref) {
       inputValue: inputValue
     });
   };
-  return React.createElement("div", {
-    className: classNames('eds-dropdown__wrapper', className, {
-      'eds-dropdown__wrapper--has-tooltip': labelTooltip !== undefined
-    }),
-    style: style
-  }, React.createElement(BaseFormControl, _extends({
+  return React.createElement(BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
       ariaLabelOpenList: ariaLabelOpenList,
@@ -2187,7 +2219,9 @@ var MultiSelect = function MultiSelect(_ref) {
       onClear: handleOnClear,
       getToggleButtonProps: getToggleButtonProps
     }),
-    className: classNames('eds-dropdown', 'eds-dropdown--multiselect'),
+    className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
+      'eds-dropdown--has-tooltip': labelTooltip !== undefined
+    }),
     disabled: disabled,
     feedback: feedback,
     isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
@@ -2200,6 +2234,8 @@ 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,
+    style: style,
     variant: variant
   }, rest), React.createElement("div", {
     className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
@@ -2262,7 +2298,7 @@ var MultiSelect = function MultiSelect(_ref) {
     preventKeyAction: isOpen,
     ref: inputRef,
     value: inputValue != null ? inputValue : EMPTY_INPUT
-  }))))))), React.createElement(DropdownList, {
+  })))))), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
@@ -2271,7 +2307,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,12 +2386,17 @@ var Dropdown = function Dropdown(_ref) {
     getMenuProps = _useSelect.getMenuProps,
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
-  return React.createElement("div", {
-    className: classNames('eds-dropdown__wrapper', className, {
-      'eds-dropdown__wrapper--has-tooltip': labelTooltip !== undefined
+  var _useFloating = useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [offset(space.extraSmall2), flip()]
     }),
-    style: style
-  }, React.createElement(BaseFormControl, _extends({
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
+  return React.createElement(BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaHiddenToggleButton: true,
       ariaLabelCloseList: ariaLabelCloseList,
@@ -2374,8 +2416,8 @@ var Dropdown = function Dropdown(_ref) {
       disabled: readOnly || disabled,
       selectedItems: [selectedItem]
     }),
-    className: classNames('eds-dropdown', {
-      'eds-dropdown--not-filled': !isFilled
+    className: classNames('eds-dropdown', className, {
+      'eds-dropdown--has-tooltip': labelTooltip !== undefined
     }),
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
@@ -2387,6 +2429,8 @@ var Dropdown = function Dropdown(_ref) {
     labelTooltip: labelTooltip,
     prepend: prepend,
     readOnly: readOnly,
+    ref: refs.setReference,
+    style: style,
     variant: variant
   }, rest), React.createElement("div", _extends({
     className: "eds-dropdown__selected-item"
@@ -2406,7 +2450,7 @@ var Dropdown = function Dropdown(_ref) {
     className: classNames('eds-dropdown__selected-item__placeholder', {
       'eds-dropdown__selected-item__placeholder--readonly': readOnly
     })
-  }, placeholder)) != null ? _ref3 : '')), React.createElement(DropdownList, {
+  }, placeholder)) != null ? _ref3 : ''), React.createElement(DropdownList, {
     ariaLabelChosenSingular: ariaLabelChosenSingular,
     ariaLabelSelectedItem: ariaLabelSelectedItem,
     getItemProps: getItemProps,
@@ -2414,7 +2458,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] : []