@sproutsocial/seeds-react-menu 0.5.0 → 0.6.0

package/src/hooks/useItemFiltering.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import type { TypeMenuContext } from "../MenuContext";
+import type { TypeInternalItemProps } from "../types";
+import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
+
+export type TypeGetIsItemVisibleFn = (
+  item: TypeMenuContext["items"][number],
+  inputValue: string
+) => boolean;
+
+/**
+ * @description A function to get the default getIsItemVisible function
+ *
+ * @param itemToString - A function to convert an item to a string
+ *
+ * @returns The default getIsItemVisible function
+ */
+export const getDefaultGetIsItemVisible =
+  (
+    itemToString: TypeMenuContext["itemToString"] = defaultItemToString
+  ): TypeGetIsItemVisibleFn =>
+  (item, inputValue) =>
+    itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
+
+export type TypeGetShouldFilterFn = (arg: { inputValue?: string }) => boolean;
+
+export const defaultGetShouldFilter: TypeGetShouldFilterFn = ({ inputValue }) =>
+  Boolean(inputValue);
+
+export interface TypeItemFilteringProps {
+  allMenuItems: TypeInternalItemProps[];
+  itemToString?: TypeMenuContext["itemToString"];
+  getIsItemVisible?: TypeGetIsItemVisibleFn;
+  getShouldFilter?: TypeGetShouldFilterFn;
+  setHiddenItemsMap?: TypeMenuContext["setHiddenItemsMap"];
+}
+
+export const useItemFiltering = ({
+  allMenuItems,
+  itemToString,
+  getIsItemVisible = getDefaultGetIsItemVisible(itemToString),
+  getShouldFilter = defaultGetShouldFilter,
+  setHiddenItemsMap: setHiddenItemsMapProp,
+}: TypeItemFilteringProps) => {
+  const [hiddenItemsMap, setHiddenItemsMap] = React.useState<
+    Required<TypeMenuContext>["hiddenItemsMap"]
+  >({});
+  const updateFilteredItems = React.useCallback(
+    ({ inputValue }) => {
+      const newHiddenItems = getShouldFilter({ inputValue })
+        ? allMenuItems.reduce((map, item) => {
+            const isItemVisible = getIsItemVisible(item, inputValue);
+            return isItemVisible ? map : { ...map, [item.id]: true };
+          }, {} as typeof hiddenItemsMap)
+        : {};
+      setHiddenItemsMap(newHiddenItems);
+      setHiddenItemsMapProp?.(newHiddenItems);
+    },
+    [allMenuItems, getIsItemVisible, getShouldFilter]
+  );
+
+  return {
+    getIsItemVisible,
+    updateFilteredItems,
+  };
+};

package/src/hooks/useMenuChildren.tsx

@@ -1,29 +1,40 @@
 import React, { type ReactNode, useMemo } from "react";
 import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
+import type {
+  TypeSubmenuItemProps,
+  TypeSubmenuValidMenuComponentProps,
+} from "../SubmenuItem";
 import type { TypeMenuContext } from "../MenuContext";
-import type { TypeMenuGroupProps } from "../MenuGroup/index";
-import type { TypeNotEmptyChildren } from "../types";
-import { MenuContent, type TypeMenuContentProps } from "../MenuContent/index";
+import type { TypeMenuGroupProps, TypeMenuGroupBaseProps } from "../MenuGroup";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type {
+  TypeNotEmptyChildren,
+  TypeChildrenOrItems,
+  TypeInternalItemProps,
+} from "../types";
+import { MenuContent, type TypeMenuContentProps } from "../MenuContent";
 
-export interface TypeUseMenuChildrenProps {
-  children?: ReactNode;
-  items?: TypeMenuItemProps[];
-  MenuItemComponent?: React.ComponentType<TypeMenuItemProps>;
+export interface TypeMapMenuItemsProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> {
+  menuItems: I[];
+  MenuItemComponent?: React.ComponentType<I>;
 }
-export interface TypeMapMenuItemsProps {
-  items: TypeMenuItemProps[];
-  MenuItemComponent: React.ComponentType<TypeMenuItemProps>;
-}
-export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
-export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
-export type TypeMenuContentElement = React.ReactElement<TypeMenuContentProps>;
+export type TypeItemElement<I extends TypeMenuItemProps = TypeMenuItemProps> =
+  React.ReactElement<
+    | TypeMenuItemProps
+    | TypeSubmenuItemProps<I, TypeSubmenuValidMenuComponentProps<I>>
+  >;
+export type TypeMenuGroupElement<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = React.ReactElement<TypeMenuGroupProps<I>>;
+export type TypeMenuContentElement<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = React.ReactElement<TypeMenuContentProps<I>>;
 
 export interface TypeMenuChildren {
   type: "item" | "group" | "content";
-  element:
-    | React.ReactElement<TypeMenuGroupProps>
-    | React.ReactElement<TypeMenuItemProps>
-    | React.ReactElement<TypeMenuContentProps>;
+  element: TypeItemElement | TypeMenuGroupElement | TypeMenuContentElement;
 }
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
@@ -58,153 +69,211 @@ const getComponentName = (element: ReactNode): string | undefined => {
   }
 };
 
-const getAllMenuItems = (children: ReactNode) => {
-  const orderedElements: TypeMenuChildren[] = [];
+const addMenuItem = ({
+  itemProps,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  itemProps: Omit<TypeInternalItemProps, "index">;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  const item = {
+    ...itemProps,
+    index: allMenuItems.length,
+  };
+  allMenuItems.push(item);
+  menuItemsMap[`${item.id}`] = item;
+};
+
+const addItemsFromGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  groupElement: menuGroup,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  groupElement: TypeMenuGroupElement<I>;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  const menuItems = menuGroup.props.menuItems;
+  if (menuItems) {
+    menuItems.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.id,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem,
+          menuGroupProps: menuGroup.props,
+        },
+        allMenuItems,
+        menuItemsMap,
+      });
+    });
+  } else if (menuGroup.props.children) {
+    let children = menuGroup.props.children as TypeItemElement[];
+    // If there is only one child, it will be an object. Make it an array.
+    if (!Array.isArray(children)) {
+      children = [children];
+    }
+    children.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.props.id,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props,
+          menuGroupProps: menuGroup.props,
+        },
+        allMenuItems,
+        menuItemsMap,
+      });
+    });
+  }
+};
+
+const addItemsFromContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  contentElement: menuContent,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  contentElement: TypeMenuContentElement<I>;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
+  /**
+   * No need to add items inside of MenuContent if it does not have menuItems
+   * since we already traversed the children and menuContentProps are not needed.
+   */
+  if (!("menuItems" in menuContent.props)) return;
+  // Add items from menuItems prop if it isn't empty
+  if (menuContent.props.menuItems) {
+    menuContent.props.menuItems.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.id,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem,
+        },
+        allMenuItems,
+        menuItemsMap,
+      });
+    });
+  }
+};
+
+const setMenuItemsFromChildren = ({
+  children,
+  allMenuItems,
+  menuItemsMap,
+}: {
+  children: ReactNode;
+  allMenuItems: TypeMenuContext["items"];
+  menuItemsMap: TypeMenuContext["itemsMap"];
+}) => {
   walkAllChildren(children, (element) => {
     switch (getComponentName(element)) {
       case "MenuItem":
-        orderedElements.push({
-          type: "item",
-          element: element as TypeItemElement,
+      case "SubmenuItem":
+      case "NestedMenuItem":
+        // Cast element to the TypeItemElement since we know it's one of the three.
+        // This is needed for the addMenuItem function.
+        const menuItem = element as TypeItemElement;
+        // Items in groups would have already been added to the map.
+        if (menuItemsMap[`${menuItem.props.id}`]) return;
+        addMenuItem({
+          itemProps: {
+            id: menuItem.props.id,
+            disabled: menuItem.props.disabled,
+            menuItemProps: menuItem.props,
+          },
+          allMenuItems,
+          menuItemsMap,
         });
         break;
       case "MenuGroup":
-        orderedElements.push({
-          type: "group",
-          element: element as TypeMenuGroupElement,
+        addItemsFromGroup({
+          // Cast element to the TypeMenuGroupElement since we know it's a group and is needed for addItemsFromGroup.
+          groupElement: element as TypeMenuGroupElement,
+          allMenuItems,
+          menuItemsMap,
         });
         break;
       case "MenuContent":
-        orderedElements.push({
-          type: "content",
-          element: element as TypeMenuContentElement,
+      case "NestedMenuContent":
+        addItemsFromContent({
+          // Cast element to the TypeMenuContentElement since we know it's a content and is needed for addItemsFromContent.
+          contentElement: element as TypeMenuContentElement,
+          allMenuItems,
+          menuItemsMap,
         });
         break;
       default:
         break;
     }
   });
-  return { orderedElements };
 };
 
-// Returns a fragment containing a `MenuItemComponent` for each item in `items`.
-export const mapMenuItems = ({
-  items,
-  MenuItemComponent,
-}: TypeMapMenuItemsProps) => {
+// Returns a fragment containing a `MenuItemComponent` for each item in `menuItems`.
+export const mapMenuItems = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  menuItems,
+  MenuItemComponent = MenuItem,
+}: TypeMapMenuItemsProps<I>) => {
   return (
     <>
-      {items.map((menuItem) => (
-        <MenuItemComponent key={menuItem.id} {...menuItem} />
+      {menuItems.map((menuItemProps) => (
+        <MenuItemComponent key={menuItemProps.id} {...menuItemProps} />
       ))}
     </>
   );
 };
 
-export const useMenuChildren = ({
+type TypeUseMenuChildrenProps<I extends TypeMenuItemProps = TypeMenuItemProps> =
+  {
+    children?: TypeMenuRootProps["children"];
+    menuItems?: I[];
+    MenuItemComponent?: React.ComponentType<I>;
+  };
+
+export const getChildrenFromMenuItems = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  menuItems,
+  MenuItemComponent,
+}: {
+  menuItems: I[];
+  MenuItemComponent?: React.ComponentType<I>;
+}) => (
+  <MenuContent menuItems={menuItems} MenuItemComponent={MenuItemComponent} />
+);
+
+export const useMenuChildren = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
   children: childrenProp,
-  items,
-  MenuItemComponent = MenuItem,
-}: TypeUseMenuChildrenProps) => {
+  menuItems,
+  MenuItemComponent,
+}: TypeUseMenuChildrenProps<I>) => {
   const { allMenuItems, menuItemsMap, children } = useMemo(() => {
     let children: TypeNotEmptyChildren = <></>;
-    let index = 0;
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
     const allMenuItems: TypeMenuContext["items"] = [];
 
-    // If an items prop was passed to the Menu, we can bypass the children traversal.
-    if (items && items.length) {
-      items.forEach((menuItem) => {
-        const item = {
-          id: menuItem.id,
-          index: index++,
-          disabled: menuItem.disabled,
-          menuItemProps: menuItem,
-        };
-        allMenuItems.push(item);
-        menuItemsMap[`${item.id}`] = item;
+    // If an menuItems prop was passed to the Menu, we can bypass the children traversal.
+    if (menuItems && menuItems.length) {
+      menuItems.forEach((menuItem) => {
+        addMenuItem({ itemProps: menuItem, allMenuItems, menuItemsMap });
       });
-      children = (
-        <MenuContent>{mapMenuItems({ items, MenuItemComponent })}</MenuContent>
-      );
+      children = getChildrenFromMenuItems({ menuItems, MenuItemComponent });
     } else if (childrenProp) {
       children = childrenProp as TypeNotEmptyChildren;
-      const { orderedElements } = getAllMenuItems(childrenProp);
-
-      orderedElements.forEach(({ type, element }) => {
-        /*       If MenuContent has items, we need to add them to the menuItemsMap.
-         We do not need to worry about checking its children prop because
-         we are already traversing the children, and we do not need to add any
-         menuContentProps to add to the item object*/
-        if (type === "content") {
-          const menuContent = element as TypeMenuContentElement;
-          const items = menuContent.props.items;
-          if (items) {
-            items.forEach((menuItem) => {
-              const item = {
-                id: menuItem.id,
-                index: index++,
-                children: menuItem.children,
-                disabled: menuItem.disabled,
-                menuItemProps: menuItem,
-              };
-              allMenuItems.push(item);
-              menuItemsMap[`${item.id}`] = item;
-            });
-          }
-        } else if (type === "group") {
-          const menuGroup = element as TypeMenuGroupElement;
-          const items = menuGroup.props.items;
-          if (items) {
-            items.forEach((menuItem) => {
-              const item = {
-                id: menuItem.id,
-                index: index++,
-                children: menuItem.children,
-                disabled: menuItem.disabled,
-                menuItemProps: menuItem,
-                menuGroupProps: element.props as TypeMenuGroupProps,
-              };
-              allMenuItems.push(item);
-              menuItemsMap[`${item.id}`] = item;
-            });
-          } else if (menuGroup.props.children) {
-            let children = menuGroup.props.children as TypeItemElement[];
-            // If there is only one child, it will be an object. Make it an array.
-            if (!Array.isArray(children)) {
-              children = [children];
-            }
-            children.forEach((menuItem) => {
-              const item = {
-                id: menuItem.props.id,
-                index: index++,
-                children: menuItem.props.children,
-                disabled: menuItem.props.disabled,
-                menuItemProps: menuItem.props,
-                menuGroupProps: element.props as TypeMenuGroupProps,
-              };
-              allMenuItems.push(item);
-              menuItemsMap[`${item.id}`] = item;
-            });
-          }
-        } else {
-          // Items in groups would have already been added to the map.
-          if (menuItemsMap[`${element.props.id}`]) return;
-          const menuItem = element as TypeItemElement;
-          const item = {
-            id: menuItem.props.id,
-            index: index++,
-            disabled: menuItem.props.disabled,
-            menuItemProps: menuItem.props,
-          };
-          allMenuItems.push(item);
-          menuItemsMap[`${item.id}`] = item;
-        }
+      setMenuItemsFromChildren({
+        children: childrenProp,
+        allMenuItems,
+        menuItemsMap,
       });
     }
 
     return { allMenuItems, menuItemsMap, children };
-  }, [childrenProp, items, MenuItemComponent]);
+  }, [childrenProp, menuItems, MenuItemComponent]);
 
   return { allMenuItems, menuItemsMap, children };
 };

package/src/index.ts

@@ -7,15 +7,21 @@ export * from "./MenuGroup";
 export * from "./MenuRoot";
 export * from "./MenuLabel";
 export * from "./MenuToggleButton";
+export * from "./MenuSearchInput";
+export * from "./MenuTokenInput";
+export * from "./MenuSearchTokenInput";
+export * from "./SubmenuItem";
 
 // Menus
 export * from "./ActionMenu";
 export * from "./SingleSelectMenu";
 export * from "./MultiSelectMenu";
 export * from "./Autocomplete";
+export * from "./NestedMenu";
 
 // Utilities
 export * from "./MenuContext";
+export * from "./NestedMenu/NestedMenuContext";
 export * from "./hooks/useMenuChildren";
 export * from "./reducers/useSelectStateReducer";
 export * from "./types";

package/src/menuTestingUtils.tsx

@@ -1,15 +1,19 @@
 import React from "react";
 import {
-  MenuContext,
+  MenuContentContext,
   MenuRoot,
+  checkIfItemSelected,
+  getSelectedItemIds,
+  useMenu,
   type TypeMenuContextProps,
   type TypeMenuContext,
   type TypeMenuRootProps,
 } from "./index";
 
-export const testDefaultContext = (
-  context: Partial<TypeMenuContextProps> = {}
-): TypeMenuContext => ({
+export const testDefaultContext = ({
+  getToggleButtonProps,
+  ...context
+}: Partial<TypeMenuContextProps> = {}): TypeMenuContext => ({
   items: [],
   itemsMap: context.items
     ? context.items.reduce((map, item) => {
@@ -17,10 +21,16 @@ export const testDefaultContext = (
         return map;
       }, {} as TypeMenuContext["itemsMap"])
     : {},
-  // TODO: Make type on MenuContext more agnostic for other use cases
+  // TODO: Make type on MenuContentContext more agnostic for other use cases
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error - mocked function does not match real type
   getItemProps: (props) => ({ role: "option", ...props }),
+  // @ts-expect-error - mocked function does not match real type
+  getToggleButtonProps: ({ ref, refKey, ...props } = {}) => ({
+    ...getToggleButtonProps?.({ ref, refKey, ...props }),
+    ...(ref ? { [refKey]: ref } : {}),
+    ...props,
+  }),
   isListbox: true,
   ...context,
 });
@@ -53,12 +63,12 @@ export const TestWithMenuRoot = ({
 
 /**
  * TestWithMockedMenu
- * Given a children and context, render the children with the raw MenuContext with a mocked value.
+ * Given a children and context, render the children with the raw MenuContentContext with a mocked value.
  * Used for unit testing components without the real MenuProvider or MenuRoot.
  *
- * @param children - react children to be loaded inside of the MenuContext.Provider
+ * @param children - react children to be loaded inside of the MenuContentContext.Provider
  * @param context - mocked context props to override the testDefaultContext
- * @returns - rendered component with mocked MenuContext
+ * @returns - rendered component with mocked MenuContentContext
  */
 export const TestWithMockedMenu = ({
   children,
@@ -67,9 +77,10 @@ export const TestWithMockedMenu = ({
   children: React.ReactNode;
   context: Partial<TypeMenuContextProps>;
 }) => {
+  const menuContext = useMenu(testDefaultContext(context));
   return (
-    <MenuContext.Provider value={testDefaultContext(context)}>
+    <MenuContentContext.Provider value={menuContext}>
       {children}
-    </MenuContext.Provider>
+    </MenuContentContext.Provider>
   );
 };

package/src/reducers/nestedMenuStateReducer.tsx

@@ -0,0 +1,23 @@
+import { useCombobox, useSelect } from "downshift";
+
+export const nestedMenuStateReducer = (_state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  const hasChildMenu = !!changes?.selectedItem?.menuItemProps?.childMenuId;
+  if (!hasChildMenu) {
+    return changes;
+  }
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+    case useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        highlightedIndex: 0,
+      };
+    default:
+      return changes;
+  }
+};

package/src/reducers/useComboboxStateReducer.tsx

@@ -1,11 +1,13 @@
 import { useCombobox } from "downshift";
 import type { UseComboboxProps } from "downshift";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeInternalItemProps } from "../types";
+import { reduceReducers } from "../utils/reduceReducers";
 
 export const useComboboxStateReducer: Required<
-  UseComboboxProps<TypeDefaultItemProps>
+  UseComboboxProps<TypeInternalItemProps>
 >["stateReducer"] = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
+
   switch (type) {
     /** If downshift is blurred by tabbing within the menu, stay open */
     case useCombobox.stateChangeTypes.InputBlur:
@@ -21,9 +23,25 @@ export const useComboboxStateReducer: Required<
   }
 };
 
-export const defaultUseComboboxProps: Partial<
-  UseComboboxProps<TypeDefaultItemProps>
-> = {
-  // disabling while item.hidden so that hidden items are ignored by downshift
-  isItemDisabled: (item) => Boolean(item.disabled || item.hidden),
-};
+export const useComboboxStateReducerForMulti: Required<
+  UseComboboxProps<TypeInternalItemProps>
+>["stateReducer"] = reduceReducers(
+  useComboboxStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+
+    switch (type) {
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.ItemClick:
+      case useCombobox.stateChangeTypes.InputBlur:
+        return {
+          ...changes,
+          ...(changes.selectedItem && {
+            inputValue: "",
+          }),
+        };
+      default:
+        return changes;
+    }
+  }
+);

package/src/reducers/useSelectStateReducer.tsx

@@ -1,9 +1,10 @@
 import { useSelect } from "downshift";
 import type { UseSelectProps } from "downshift";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeInternalItemProps } from "../types";
+import { reduceReducers } from "../utils/reduceReducers";
 
 export const useSelectStateReducer: Required<
-  UseSelectProps<TypeDefaultItemProps>
+  UseSelectProps<TypeInternalItemProps>
 >["stateReducer"] = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
   switch (type) {
@@ -21,7 +22,24 @@ export const useSelectStateReducer: Required<
   }
 };
 
-export const defaultUseSelectProps = {
-  stateReducer: useSelectStateReducer,
-  isItemDisabled: (item) => !!item.disabled,
-};
+export const useSelectStateReducerForMulti: Required<
+  UseSelectProps<TypeInternalItemProps>
+>["stateReducer"] = reduceReducers(
+  useSelectStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+      case useSelect.stateChangeTypes.ItemClick:
+        return {
+          ...changes,
+          isOpen: true, // keep the menu open after selection.
+          // TODO: Confirm that keeping highlightedIndex the same is the desired UX
+          // highlightedIndex: 0, // with the first option highlighted.
+          highlightedIndex: state.highlightedIndex, // keep highlightedIndex the same instead of returning to 0
+        };
+    }
+    return changes;
+  }
+);

package/src/storybookUtilities/menu-storybook-components.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Icon } from "@sproutsocial/seeds-react-icon";
-import { useMenuContext, MenuToggleButton } from "../index";
+import { useMenuToggleContext, MenuToggleButton } from "../index";
 
 export interface TypeStyledChevronProps {
   $isOpen?: boolean;
@@ -19,15 +19,17 @@ const StyledChevron = styled.div<TypeStyledChevronProps>`
 
 interface StorybookMenuToggleButtonProps {
   buttonText?: string;
+  buttonProps?: Partial<React.ComponentProps<typeof MenuToggleButton>>;
 }
 
 export const StorybookMenuToggleButton = ({
   buttonText,
+  buttonProps,
 }: StorybookMenuToggleButtonProps) => {
-  const { isOpen } = useMenuContext();
+  const { isOpen } = useMenuToggleContext();
 
   return (
-    <MenuToggleButton appearance="secondary">
+    <MenuToggleButton appearance="secondary" {...buttonProps}>
       <Box display="flex" justifyContent="space-between">
         {buttonText ? buttonText : <span>Select book</span>}
         <StyledChevron $isOpen={isOpen}>