@entur/dropdown 7.3.9-beta.0 → 8.0.0-beta.0

package/dist/dropdown.esm.js

@@ -14,7 +14,7 @@ import { LoadingDots } from "@entur/loader";
 import { Tooltip } from "@entur/tooltip";
 const DropdownList = ({
   ariaLabelChosenSingular = "valgt",
-  ariaLabelSelectedItem = ", valgt element, trykk for å fjerne",
+  ariaLabelSelectedItem = ", valgt element",
   getItemProps,
   isOpen,
   highlightedIndex,
@@ -185,6 +185,7 @@ const SelectedItemTag = ({
   removeSelectedItem,
   selectedItem
 }) => {
+  if (!selectedItem) return null;
   const { tabIndex: _, ...selectedItemProps } = getSelectedItemProps?.({
     selectedItem,
     index
@@ -401,6 +402,10 @@ const itemToString = (item) => item ? item.label : "";
 const itemToKey = (item) => item?.label + item?.value;
 const isFunctionWithQueryArgument = (object) => typeof object === "function" && object.length > 0;
 const clamp = (val, min = 1, max = 10) => Math.min(Math.max(val, min), max);
+const resetInputState = (changes) => ({
+  ...changes,
+  inputValue: EMPTY_INPUT
+});
 const useMultiselectUtils = ({
   listItems,
   selectedItems,
@@ -516,7 +521,6 @@ const SearchableDropdown = React.forwardRef(
     prepend,
     readOnly = false,
     selectedItem: value,
-    selectOnBlur = false,
     selectOnTab = false,
     style,
     variant = "info",
@@ -543,77 +547,56 @@ const SearchableDropdown = React.forwardRef(
       if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
       filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
     };
-    const resetInputState = ({
-      changes
-    }) => {
-      return {
-        ...changes,
-        inputValue: EMPTY_INPUT
-      };
-    };
     const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
     useEffect(() => {
       filterListItems({ inputValue });
     }, [normalizedItems]);
-    useEffect(() => {
-      if (selectedItem !== null && !inputHasFocus) {
-        setShowSelectedItem(true);
-        updateListItems({ inputValue: EMPTY_INPUT });
-        setInputValue(EMPTY_INPUT);
-      }
-    }, []);
     const stateReducer = useCallback(
       (state, {
         type,
         changes
       }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
-        }
         switch (type) {
           // empty input to show selected item and reset dropdown list on item selection
           case useCombobox.stateChangeTypes.ItemClick:
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
-            return resetInputState({ changes });
+            return resetInputState(changes);
           case useCombobox.stateChangeTypes.InputBlur:
             return resetInputState({
-              changes: { ...changes, selectedItem: value }
+              ...changes,
+              selectedItem: state.selectedItem
             });
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-            return resetInputState({ changes });
+            return { ...changes, inputValue: state.inputValue };
           // remove leading whitespace, select element with spacebar on empty input
           case useCombobox.stateChangeTypes.InputChange: {
-            const leadingWhitespaceTest = /^\s+/g;
             const isSpacePressedOnEmptyInput = changes.inputValue === " ";
-            if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
-            if (changes.inputValue?.match(leadingWhitespaceTest)) {
-              const sanitizedInputValue = changes.inputValue.replace(
-                leadingWhitespaceTest,
-                EMPTY_INPUT
-              );
-              if (isSpacePressedOnEmptyInput) {
-                if (!state.isOpen)
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    isOpen: true
-                  };
-                if (changes.highlightedIndex !== void 0) {
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    selectedItem: listItems[changes.highlightedIndex]
-                  };
-                }
-              }
-            }
-            return { ...changes, highlightedIndex: 0 };
+            if (!isSpacePressedOnEmptyInput)
+              return { ...changes, highlightedIndex: 0 };
+            const sanitizedInputValue = (changes.inputValue ?? "").replace(
+              /^\s+/,
+              EMPTY_INPUT
+            );
+            if (!state.isOpen)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              };
+            const i = changes.highlightedIndex ?? -1;
+            if (i >= 0 && i < listItems.length)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                selectedItem: listItems[i]
+              };
+            return { ...changes, inputValue: sanitizedInputValue };
           }
           default:
             return changes;
         }
       },
-      [fetchItems, filterListItems, inputHasFocus, resetInputState]
+      [listItems, EMPTY_INPUT]
     );
     const {
       isOpen,
@@ -640,9 +623,23 @@ const SearchableDropdown = React.forwardRef(
       onSelectedItemChange({ selectedItem: newSelectedItem }) {
         onChange(newSelectedItem);
       },
+      onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2 }) => {
+        if (highlightedIndex2 >= 0) setLastHighlightedIndex(highlightedIndex2);
+      },
       // Accessibility
       getA11yStatusMessage: (options) => getA11yStatusMessage({ ...options, resultCount: listItems.length })
     });
+    useEffect(() => {
+      if (value !== null && !inputHasFocus) {
+        setShowSelectedItem(true);
+        updateListItems({ inputValue: EMPTY_INPUT });
+        setInputValue(EMPTY_INPUT);
+      }
+    }, [value]);
+    const handleOnClear = () => {
+      inputRef.current?.focus();
+      reset();
+    };
     const { refs, floatingStyles, update } = useFloating({
       open: isOpen,
       placement: "bottom-start",
@@ -669,10 +666,39 @@ const SearchableDropdown = React.forwardRef(
         );
       }
     }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      inputRef.current?.focus();
-      reset();
-    };
+    const labelProps = getLabelProps();
+    const toggleButtonProps = getToggleButtonProps({
+      "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
+    });
+    const menuProps = getMenuProps({
+      refKey: "innerRef",
+      ref: refs.setFloating,
+      style: listStyle
+    });
+    const inputProps = getInputProps({
+      onKeyDown(e) {
+        if (isOpen && e.key === "Tab") {
+          const highlitedItem = listItems[highlightedIndex];
+          if (selectOnTab && highlitedItem) {
+            selectItem(highlitedItem);
+            setShowSelectedItem(true);
+          }
+        }
+      },
+      onBlur(e) {
+        if (selectedItem !== null) setShowSelectedItem(true);
+        onBlur?.(e);
+      },
+      onFocus(e) {
+        if (!readOnly) setShowSelectedItem(false);
+        onFocus?.(e);
+      },
+      disabled,
+      readOnly,
+      placeholder: selectedItem?.label ?? placeholder,
+      tabIndex: disabled || readOnly ? -1 : void 0,
+      ref: mergeRefs(inputRef, ref)
+    });
     return /* @__PURE__ */ jsxs(
       BaseFormControl,
       {
@@ -687,15 +713,14 @@ const SearchableDropdown = React.forwardRef(
         feedback,
         isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
         label,
-        labelId: getLabelProps().id,
-        labelProps: getLabelProps(),
+        labelId: labelProps.id,
+        labelProps,
         labelTooltip,
         onClick: (e) => {
-          if (e.target === e.currentTarget) getInputProps()?.onClick?.(e);
+          if (e.target === e.currentTarget) inputProps?.onClick?.(e);
           onClick?.(e);
         },
         onKeyDown,
-        onFocus,
         prepend,
         readOnly,
         ref: refs.setReference,
@@ -717,11 +742,7 @@ const SearchableDropdown = React.forwardRef(
             noMatchesText,
             selectedItems: selectedItem !== null ? [selectedItem] : [],
             readOnly,
-            ...getMenuProps({
-              refKey: "innerRef",
-              ref: refs.setFloating,
-              style: listStyle
-            })
+            ...menuProps
           }
         ),
         ...rest,
@@ -736,7 +757,7 @@ const SearchableDropdown = React.forwardRef(
               onClick: (event) => {
                 if (!disabled && !readOnly) {
                   inputRef.current?.focus();
-                  getInputProps()?.onClick?.(event);
+                  inputProps?.onClick?.(event);
                 }
               },
               tabIndex: readOnly ? 0 : -1,
@@ -749,39 +770,13 @@ const SearchableDropdown = React.forwardRef(
               className: classNames("eds-dropdown__input eds-form-control", {
                 "eds-dropdown__input--hidden": showSelectedItem
               }),
-              ...getInputProps({
-                onKeyDown(e) {
-                  if (isOpen && e.key === "Tab") {
-                    const highlitedItem = listItems[highlightedIndex];
-                    if ((selectOnTab || selectOnBlur) && highlitedItem) {
-                      selectItem(highlitedItem);
-                      setShowSelectedItem(true);
-                    }
-                  }
-                },
-                onBlur(e) {
-                  if (selectedItem !== null) setShowSelectedItem(true);
-                  onBlur?.(e);
-                },
-                onFocus() {
-                  if (!readOnly) {
-                    setShowSelectedItem(false);
-                  }
-                },
-                disabled,
-                readOnly,
-                placeholder: selectedItem?.label ?? placeholder,
-                tabIndex: disabled || readOnly ? -1 : void 0,
-                ref: mergeRefs(inputRef, ref)
-              })
+              ...inputProps
             }
           ),
           /* @__PURE__ */ jsx(
             DropdownFieldAppendix,
             {
-              ...getToggleButtonProps({
-                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
-              }),
+              ...toggleButtonProps,
               ariaLabelCloseList,
               ariaLabelOpenList,
               clearable,
@@ -826,7 +821,6 @@ const MultiSelect = React.forwardRef(
     placeholder,
     readOnly = false,
     selectedItems = [],
-    selectOnBlur = false,
     selectOnTab = false,
     style,
     variant = "information",
@@ -857,10 +851,14 @@ const MultiSelect = React.forwardRef(
       fetchItems
     } = useResolvedItems(initialItems, debounceTimeout);
     const isAllNonAsyncItemsSelected = typeof initialItems !== "function" && selectedItems.length === normalizedItems.length;
-    const selectAll = {
-      value: useRandomId("select-all"),
-      label: labelSelectAll
-    };
+    const selectAllUniqueId = useRandomId("select-all");
+    const selectAll = React.useMemo(
+      () => ({
+        value: selectAllUniqueId,
+        label: labelSelectAll
+      }),
+      [labelSelectAll]
+    );
     const summarySelectedItems = React.useMemo(
       () => ({
         value: EMPTY_INPUT,
@@ -923,69 +921,57 @@ const MultiSelect = React.forwardRef(
     });
     const stateReducer = React.useCallback(
       (state, {
-        changes,
-        type
+        type,
+        changes
       }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
-        }
         switch (type) {
-          // reset input value when leaving input field
-          case useCombobox.stateChangeTypes.InputBlur:
-            return {
-              ...changes,
-              inputValue: EMPTY_INPUT
-            };
           // keep menu open and edit input value on item selection
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick: {
             return {
               ...changes,
               isOpen: true,
-              inputValue: clearInputOnSelect ? EMPTY_INPUT : inputRef?.current?.value ?? EMPTY_INPUT
+              inputValue: clearInputOnSelect ? EMPTY_INPUT : state.inputValue
             };
           }
+          // reset input value when leaving input field
+          case useCombobox.stateChangeTypes.InputBlur: {
+            const { selectedItem: _, ...otherChanges } = changes;
+            return resetInputState(otherChanges);
+          }
           // edit input value when selected items is updated outside component
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem: {
-            return {
-              ...changes,
-              inputValue: inputRef?.current?.value ?? EMPTY_INPUT
-            };
+            return { ...changes, inputValue: state.inputValue };
           }
           // remove leading whitespace, select item with spacebar if input is empty and filter list items
           case useCombobox.stateChangeTypes.InputChange: {
-            const leadingWhitespaceTest = /^\s+/g;
             const isSpacePressedOnEmptyInput = changes.inputValue === " ";
             if (!isSpacePressedOnEmptyInput)
-              setLastHighlightedIndex(hideSelectAll ? 0 : 1);
-            if (changes.inputValue?.match(leadingWhitespaceTest)) {
-              const sanitizedInputValue = changes.inputValue.replace(
-                leadingWhitespaceTest,
-                EMPTY_INPUT
-              );
-              if (isSpacePressedOnEmptyInput) {
-                if (!state.isOpen)
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    isOpen: true
-                  };
-                if (changes.highlightedIndex !== void 0) {
-                  return {
-                    ...changes,
-                    inputValue: sanitizedInputValue,
-                    selectedItem: listItems[changes.highlightedIndex]
-                  };
-                }
-              }
-            }
-            return { ...changes, highlightedIndex: hideSelectAll ? 0 : 1 };
+              return { ...changes, highlightedIndex: hideSelectAll ? 0 : 1 };
+            const sanitizedInputValue = (changes.inputValue ?? "").replace(
+              /^\s+/,
+              EMPTY_INPUT
+            );
+            if (!state.isOpen)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                isOpen: true
+              };
+            const i = changes.highlightedIndex ?? -1;
+            if (i >= 0 && i < listItems.length)
+              return {
+                ...changes,
+                inputValue: sanitizedInputValue,
+                selectedItem: listItems[i]
+              };
+            return { ...changes, inputValue: sanitizedInputValue };
           }
           default:
             return changes;
         }
       },
-      [hideSelectAll, normalizedItems, initialItems]
+      [hideSelectAll, listItems, clearInputOnSelect]
     );
     const {
       getInputProps,
@@ -995,8 +981,7 @@ const MultiSelect = React.forwardRef(
       getToggleButtonProps,
       highlightedIndex,
       inputValue,
-      isOpen,
-      setInputValue
+      isOpen
     } = useCombobox({
       defaultHighlightedIndex: lastHighlightedIndex,
       // after selection, highlight previously selected item.
@@ -1014,6 +999,9 @@ const MultiSelect = React.forwardRef(
           onChange: setSelectedItems
         });
       },
+      onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2 }) => {
+        if (highlightedIndex2 >= 0) setLastHighlightedIndex(highlightedIndex2);
+      },
       // Accessibility
       getA11yStatusMessage: (options) => getA11yStatusMessage({
         ...options,
@@ -1052,6 +1040,42 @@ const MultiSelect = React.forwardRef(
       inputRef.current?.focus();
       reset();
     };
+    const dropdownProps = getDropdownProps({
+      preventKeyAction: isOpen,
+      value: inputValue ?? EMPTY_INPUT,
+      ref: mergeRefs(inputRef, ref)
+    });
+    const inputProps = getInputProps({
+      onKeyDown: (e) => {
+        if (selectOnTab && isOpen && e.key === "Tab") {
+          const highlitedItem = listItems[highlightedIndex];
+          if (!highlitedItem) return;
+          const shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
+          if (shouldSkipTabSelection) return;
+          handleListItemClicked({
+            clickedItem: highlitedItem,
+            onChange: setSelectedItems
+          });
+        }
+      },
+      onBlur,
+      onFocus,
+      ...dropdownProps,
+      className: "eds-dropdown__input eds-form-control",
+      disabled: readOnly || disabled,
+      placeholder,
+      tabIndex: disabled || readOnly ? -1 : void 0
+    });
+    const labelProps = getLabelProps();
+    const menuProps = getMenuProps({
+      "aria-multiselectable": true,
+      refKey: "innerRef",
+      ref: refs.setFloating,
+      style: listStyle
+    });
+    const toggleButtonProps = getToggleButtonProps({
+      "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
+    });
     return /* @__PURE__ */ jsxs(
       BaseFormControl,
       {
@@ -1066,15 +1090,14 @@ const MultiSelect = React.forwardRef(
         feedback,
         isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
         label,
-        labelId: getLabelProps().id,
-        labelProps: getLabelProps(),
+        labelId: labelProps.id,
+        labelProps,
         labelTooltip,
         onClick: (e) => {
-          if (e.target === e.currentTarget) getInputProps()?.onClick?.(e);
+          if (e.target === e.currentTarget) inputProps?.onClick?.(e);
           onClick?.(e);
         },
         onKeyDown,
-        onFocus,
         readOnly,
         ref: refs.setReference,
         style,
@@ -1096,12 +1119,7 @@ const MultiSelect = React.forwardRef(
             selectAllItem: selectAll,
             selectedItems,
             readOnly,
-            ...getMenuProps({
-              "aria-multiselectable": true,
-              refKey: "innerRef",
-              ref: refs.setFloating,
-              style: listStyle
-            })
+            ...menuProps
           }
         ),
         ...rest,
@@ -1116,7 +1134,7 @@ const MultiSelect = React.forwardRef(
                 }
               ),
               children: [
-                selectedItems.length > 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { onClick: inputRef.current?.focus, children: ariaLabelJumpToInput }) : null,
+                selectedItems.length > 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { onClick: () => inputRef.current?.focus(), children: ariaLabelJumpToInput }) : null,
                 selectedItems.length <= maxChips ? selectedItems.map((selectedItem, index) => /* @__PURE__ */ jsx(
                   SelectedItemTag,
                   {
@@ -1144,47 +1162,14 @@ const MultiSelect = React.forwardRef(
                     selectedItem: summarySelectedItems
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ...getInputProps({
-                      onKeyDown: (e) => {
-                        if (selectOnTab && isOpen && e.key === "Tab") {
-                          const highlitedItem = listItems[highlightedIndex];
-                          if (!highlitedItem) return;
-                          const shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
-                          if (shouldSkipTabSelection) return;
-                          handleListItemClicked({
-                            clickedItem: highlitedItem,
-                            onChange: setSelectedItems
-                          });
-                        }
-                      },
-                      onBlur: (e) => {
-                        setInputValue("");
-                        onBlur?.(e);
-                      },
-                      ...getDropdownProps({
-                        preventKeyAction: isOpen,
-                        value: inputValue ?? EMPTY_INPUT,
-                        ref: mergeRefs(inputRef, ref)
-                      }),
-                      className: "eds-dropdown__input eds-form-control",
-                      disabled: readOnly || disabled,
-                      placeholder,
-                      tabIndex: disabled || readOnly ? -1 : void 0
-                    })
-                  }
-                )
+                /* @__PURE__ */ jsx("input", { ...inputProps })
               ]
             }
           ),
           /* @__PURE__ */ jsx(
             DropdownFieldAppendix,
             {
-              ...getToggleButtonProps({
-                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
-              }),
+              ...toggleButtonProps,
               ariaLabelCloseList,
               ariaLabelOpenList,
               clearable,
@@ -1227,7 +1212,6 @@ const Dropdown = React.forwardRef(
     prepend,
     readOnly = false,
     selectedItem,
-    selectOnBlur = false,
     selectOnTab = false,
     style,
     variant = "information",
@@ -1248,22 +1232,20 @@ const Dropdown = React.forwardRef(
       items: normalizedItems,
       defaultHighlightedIndex: selectedItem ? void 0 : 0,
       selectedItem,
-      stateReducer(_, { changes, type }) {
+      stateReducer(state, { changes, type }) {
         const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
         switch (type) {
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
             if (!toggleButtonIsFocused) return { ...changes, isOpen: false };
+            break;
+          case useSelect.stateChangeTypes.ToggleButtonBlur:
+            return { ...changes, selectedItem: state.selectedItem };
         }
         return changes;
       },
-      onStateChange({ type, selectedItem: newSelectedItem }) {
-        switch (type) {
-          case useSelect.stateChangeTypes.ToggleButtonBlur:
-            if (!selectOnBlur) return;
-        }
-        if (newSelectedItem === void 0) return;
-        onChange?.(newSelectedItem ?? null);
+      onSelectedItemChange({ selectedItem: newSelectedItem }) {
+        onChange?.(newSelectedItem);
       },
       itemToString
     });
@@ -1294,9 +1276,35 @@ const Dropdown = React.forwardRef(
       }
     }, [isOpen, refs.reference, refs.floating, update]);
     const handleOnClear = () => {
-      reset();
       refs.reference.current?.focus();
+      reset();
     };
+    const labelProps = getLabelProps({
+      isFilled
+    });
+    const toggleButtonProps = getToggleButtonProps({
+      ref: mergeRefs(ref, refs.setReference),
+      "aria-disabled": disabled,
+      "aria-label": disabled ? "Disabled dropdown" : "",
+      disabled,
+      readOnly,
+      label,
+      labelId: labelProps?.id,
+      tabIndex: disabled || readOnly ? -1 : 0,
+      onKeyDown(e) {
+        if (isOpen && e.key === "Tab") {
+          const highlitedItem = normalizedItems[highlightedIndex];
+          if (selectOnTab && highlitedItem && highlitedItem !== selectedItem) {
+            selectItem(highlitedItem);
+          }
+        }
+      }
+    });
+    const menuProps = getMenuProps({
+      refKey: "innerRef",
+      ref: refs.setFloating,
+      style: listStyle
+    });
     return /* @__PURE__ */ jsxs(
       BaseFormControl,
       {
@@ -1305,31 +1313,12 @@ const Dropdown = React.forwardRef(
         }),
         disableLabelAnimation,
         feedback,
-        isFilled,
-        labelProps: getLabelProps(),
+        labelProps,
         labelTooltip,
         prepend,
         style,
         variant,
-        ...getToggleButtonProps({
-          ref: mergeRefs(ref, refs.setReference),
-          "aria-disabled": disabled,
-          "aria-label": disabled ? "Disabled dropdown" : "",
-          disabled,
-          readOnly,
-          label,
-          labelId: getLabelProps()?.id,
-          children: void 0,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          onKeyDown(e) {
-            if (isOpen && e.key === "Tab") {
-              const highlitedItem = normalizedItems[highlightedIndex];
-              if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-                selectItem(highlitedItem);
-              }
-            }
-          }
-        }),
+        ...toggleButtonProps,
         after: /* @__PURE__ */ jsx(
           DropdownList,
           {
@@ -1345,11 +1334,7 @@ const Dropdown = React.forwardRef(
             noMatchesText,
             selectedItems: selectedItem !== null ? [selectedItem] : [],
             readOnly,
-            ...getMenuProps({
-              refKey: "innerRef",
-              ref: refs.setFloating,
-              style: listStyle
-            })
+            ...menuProps
           }
         ),
         ...rest,