@entur/dropdown 5.4.11 → 6.0.0-beta.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);
@@ -1821,13 +1844,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(form.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(form.BaseFormControl, _extends({
-    className: classNames('eds-dropdown', 'eds-dropdown--searchable'),
     disabled: disabled,
     disableLabelAnimation: disableLabelAnimation,
     feedback: feedback,
@@ -1842,23 +1876,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
     }),
@@ -1885,12 +1906,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,
@@ -2095,6 +2117,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 +2189,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([]);
@@ -2171,12 +2208,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(form.BaseFormControl, _extends({
+  return React.createElement(form.BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaLabelCloseList: ariaLabelCloseList,
       ariaLabelOpenList: ariaLabelOpenList,
@@ -2191,7 +2223,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,
@@ -2204,6 +2238,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', {
@@ -2266,7 +2302,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,
@@ -2275,7 +2311,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,12 +2390,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 = 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()]
     }),
-    style: style
-  }, React.createElement(form.BaseFormControl, _extends({
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles;
+  return React.createElement(form.BaseFormControl, _extends({
     append: React.createElement(FieldAppend$1, {
       ariaHiddenToggleButton: true,
       ariaLabelCloseList: ariaLabelCloseList,
@@ -2378,8 +2420,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,
@@ -2391,6 +2433,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"
@@ -2410,7 +2454,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,
@@ -2418,7 +2462,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] : []