@entur/dropdown 5.4.11 → 5.5.0

package/dist/components/DropdownList.d.ts

@@ -13,6 +13,7 @@ type DropdownListProps<ValueType> = {
     listStyle: {
         [key: string]: any;
     } | undefined;
+    listRef?: React.Ref<HTMLUListElement>;
     loading?: boolean;
     loadingText?: string;
     noMatchesText?: string;
@@ -21,5 +22,5 @@ type DropdownListProps<ValueType> = {
     selectedItems: NormalizedDropdownItemType<ValueType>[];
     [key: string]: any;
 };
-export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
+export declare const DropdownList: <ValueType extends unknown>({ ariaLabelChosenSingular, ariaLabelSelectedItem, getItemProps, getMenuProps, inputValue, isOpen, highlightedIndex, listItems, listStyle, listRef, loading, loadingText, noMatchesText, selectAllCheckboxState, selectAllItem, selectedItems, showSelectAllInList, ...rest }: DropdownListProps<ValueType>) => React.JSX.Element;
 export {};

package/dist/dropdown.cjs.development.js

@@ -11,6 +11,7 @@ var icons = require('@entur/icons');
 var a11y = require('@entur/a11y');
 var loader = require('@entur/loader');
 var tokens = require('@entur/tokens');
+var reactDom = require('@floating-ui/react-dom');
 var button = require('@entur/button');
 var chip = require('@entur/chip');
 var tooltip = require('@entur/tooltip');
@@ -1238,7 +1239,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,
@@ -1251,6 +1252,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,
@@ -1333,7 +1335,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: utils.mergeRefs(getMenuProps().ref, listRef)
     }), {
       className: "eds-dropdown__list",
       style: _extends({
@@ -1687,17 +1690,17 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   var _useState = React.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 = React.useState(0),
+    lastHighlightedIndex = _useState2[0],
+    setLastHighlightedIndex = _useState2[1];
   var inputRef = React.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 = React.useState(normalizedItems),
+    listItems = _useState3[0],
+    setListItems = _useState3[1];
   var filterListItems = function filterListItems(_ref2) {
     var inputValue = _ref2.inputValue;
     return setListItems(normalizedItems.filter(function (item) {
@@ -1712,12 +1715,22 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       inputValue: inputValue != null ? inputValue : EMPTY_INPUT
     });
   };
+  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
   React.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;
+  React.useEffect(function () {
+    // sync internal state on initial render
+    if (selectedItem !== null && !inputHasFocus) {
+      setShowSelectedItem(true);
+      updateListItems({
+        inputValue: EMPTY_INPUT
+      });
+      setInputValue(EMPTY_INPUT);
+    }
+  }, []);
   var stateReducer = React.useCallback(function (_, _ref4) {
     var type = _ref4.type,
       changes = _ref4.changes;
@@ -1811,6 +1824,16 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     selectedItem = _useCombobox.selectedItem,
     inputValue = _useCombobox.inputValue,
     setInputValue = _useCombobox.setInputValue;
+  var _useFloating = reactDom.useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return reactDom.autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current;
     onChange(null);
@@ -1842,6 +1865,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     },
     prepend: prepend,
     readOnly: readOnly,
+    ref: refs.setReference,
     variant: variant
   }, rest, {
     append: React.createElement(FieldAppend$1, {
@@ -1890,7 +1914,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,
@@ -2095,6 +2120,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;
         }
@@ -2162,6 +2192,16 @@ var MultiSelect = function MultiSelect(_ref) {
     isOpen = _useCombobox.isOpen,
     openMenu = _useCombobox.openMenu,
     setInputValue = _useCombobox.setInputValue;
+  var _useFloating = reactDom.useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return reactDom.autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
   var handleOnClear = function handleOnClear() {
     var _inputRef$current3;
     onChange([]);
@@ -2204,6 +2244,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', {
@@ -2275,7 +2316,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,
@@ -2353,6 +2395,16 @@ var Dropdown = function Dropdown(_ref) {
     getMenuProps = _useSelect.getMenuProps,
     getToggleButtonProps = _useSelect.getToggleButtonProps,
     highlightedIndex = _useSelect.highlightedIndex;
+  var _useFloating = reactDom.useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return reactDom.autoUpdate(ref, _float, update);
+      },
+      placement: 'bottom-start',
+      open: isOpen,
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
   return React.createElement("div", {
     className: classNames('eds-dropdown__wrapper', className, {
       'eds-dropdown__wrapper--has-tooltip': labelTooltip !== undefined
@@ -2391,6 +2443,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"
@@ -2418,7 +2471,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] : []