@sproutsocial/seeds-react-menu 1.0.1 → 1.1.1

package/src/NestedMenu/__tests__/NestedMenu.test.tsx

@@ -1,31 +1,222 @@
-/* eslint-disable testing-library/no-unnecessary-act */
-import {
-  NestedMenu,
-  MenuContent,
-  MenuToggleButton,
-  MenuItem,
-  MenuGroup,
-} from "../../index";
+import React from "react";
 import {
   render,
   screen,
-  cleanup,
+  act,
   waitFor,
+  PointerEventsCheckLevel,
 } from "@sproutsocial/seeds-react-testing-library";
+import {
+  NestedMenu,
+  MenuToggleButton,
+  ActionMenu,
+  SingleSelectMenu,
+  MultiSelectMenu,
+} from "../../index";
+
+const menus = {
+  root: {
+    MenuComponent: ActionMenu,
+    menuProps: {
+      menuItems: [
+        { id: "child1", children: "Go to Child Menu 1", childMenuId: "child1" },
+        { id: "child2", children: "Go to Child Menu 2", childMenuId: "child2" },
+        { id: "child3", children: "No Child Menu" },
+      ],
+    },
+    MenuHeaderComponent: null,
+  },
+  child1: {
+    MenuComponent: SingleSelectMenu,
+    menuProps: {
+      menuItems: [
+        { id: "item1", children: "Child Item 1.1" },
+        { id: "item2", children: "Child Item 1.2" },
+      ],
+    },
+    menuHeaderProps: {
+      title: "Child Menu 1",
+    },
+  },
+  child2: {
+    MenuComponent: MultiSelectMenu,
+    menuProps: {
+      menuItems: [
+        { id: "item1", children: "Child Item 2.1" },
+        { id: "item2", children: "Child Item 2.2" },
+      ],
+    },
+    menuHeaderProps: {
+      title: "Child Menu 2",
+    },
+  },
+};
 
-const menuItems = [
-  { id: "test-item-1", index: 0, label: "Item 1" },
-  { id: "test-item-2", index: 1, label: "Item 2" },
-  { id: "test-item-3", index: 2, label: "Item 3" },
-  { id: "test-item-4", index: 3, label: "Item 4" },
-];
+const testProps = {
+  initialMenuId: "root",
+  backArrowLabel: "Back",
+  menus,
+  menuToggleElement: <MenuToggleButton>Open Menu</MenuToggleButton>,
+};
+
+const openNestedMenu = async (props = {}) => {
+  const utils = render(<NestedMenu {...testProps} {...props} />);
+  const toggleButton = screen.getByRole("button", { name: "Open Menu" });
+  await act(async () => {
+    await utils.user.click(toggleButton);
+  });
+  return utils;
+};
 
 describe("NestedMenu", () => {
-  afterEach(() => {
-    cleanup();
+  it("opens the initial menu when the menu button is clicked", async () => {
+    await openNestedMenu();
+
+    expect(await screen.findByText("Go to Child Menu 1")).toBeInTheDocument();
+    expect(await screen.findByText("Go to Child Menu 2")).toBeInTheDocument();
+  });
+
+  it("opens a child menu when an item with a childMenuId is clicked", async () => {
+    const { user } = await openNestedMenu();
+
+    const child1Item = screen.getByText("Go to Child Menu 1");
+    await act(async () => {
+      await user.click(child1Item);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Go to Child Menu 1")).not.toBeInTheDocument()
+    );
+
+    expect(await screen.findByText("Child Item 1.1")).toBeInTheDocument();
+    expect(await screen.findByText("Child Item 1.2")).toBeInTheDocument();
+    expect(await screen.findByText("Child Menu 1")).toBeInTheDocument();
   });
 
-  it("runs", () => {
-    expect(true).toBe(true);
+  it("returns to the previous menu when the back button is clicked", async () => {
+    const { user } = await openNestedMenu();
+
+    const child1Item = screen.getByText("Go to Child Menu 1");
+    await act(async () => {
+      await user.click(child1Item);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Go to Child Menu 1")).not.toBeInTheDocument()
+    );
+
+    const backButton = screen.getByRole("button", { name: "Back" });
+    await act(async () => {
+      await user.click(backButton);
+    });
+
+    expect(await screen.findByText("Go to Child Menu 1")).toBeInTheDocument();
+    expect(screen.getByText("Go to Child Menu 2")).toBeInTheDocument();
+  });
+
+  it("closes the menu when a menu item without a childMenuId is clicked in an ActionMenu", async () => {
+    const { user } = await openNestedMenu();
+
+    const item = screen.getByText("No Child Menu");
+    await act(async () => {
+      await user.click(item);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("No Child Menu")).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Child Menu 1")).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Child Menu 2")).not.toBeInTheDocument()
+    );
+  });
+
+  it("closes the menu when a menu item without a childMenuId is clicked in a SingleSelectMenu", async () => {
+    const { user } = await openNestedMenu();
+
+    const child1Item = screen.getByText("Go to Child Menu 1");
+    await act(async () => {
+      await user.click(child1Item);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Go to Child Menu 1")).not.toBeInTheDocument()
+    );
+
+    const child1Item1 = screen.getByText("Child Item 1.1");
+    await act(async () => {
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(child1Item1);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("No Child Menu")).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Child Menu 1")).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Child Menu 2")).not.toBeInTheDocument()
+    );
+  });
+
+  it("does not close the menu when a menu item without a childMenuId is clicked in a MultiSelectMenu", async () => {
+    const { user } = await openNestedMenu();
+
+    const child2Item = screen.getByText("Go to Child Menu 2");
+    await act(async () => {
+      await user.click(child2Item);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Go to Child Menu 2")).not.toBeInTheDocument()
+    );
+
+    const child2Item1 = screen.getByText("Child Item 2.1");
+    await act(async () => {
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(child2Item1);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Child Menu 2")).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Child Item 2.1")).toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Child Item 2.2")).toBeInTheDocument()
+    );
+  });
+
+  it("calls onBackButtonClick when the back button is clicked", async () => {
+    const mockOnBackButtonClick = jest.fn();
+    const { user } = await openNestedMenu({
+      onBackButtonClick: mockOnBackButtonClick,
+    });
+
+    const child1Item = screen.getByText("Go to Child Menu 1");
+    await act(async () => {
+      await user.click(child1Item);
+    });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Go to Child Menu 1")).not.toBeInTheDocument()
+    );
+
+    const backButton = screen.getByRole("button", { name: "Back" });
+    await act(async () => {
+      await user.click(backButton);
+    });
+
+    expect(mockOnBackButtonClick).toHaveBeenCalled();
   });
 });

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -16,7 +16,6 @@ import {
   MenuSearchInput,
   type InputType,
   type TypeInternalItemProps,
-  type TypeSingleSelectMenuBaseProps,
   type TypeSingleSelectMenuProps,
 } from "../index";
 

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -24,6 +24,7 @@ export const SingleSelectMenu = <
   stateReducer: externalStateReducer,
   menuItems,
   MenuItemComponent,
+  MenuRootComponent = MenuRoot,
   ...useSelectProps
 }: TypeSingleSelectMenuProps<I>) => {
   /** Get a list of menuItems from the children */
@@ -51,7 +52,7 @@ export const SingleSelectMenu = <
   });
 
   return (
-    <MenuRoot
+    <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
@@ -64,6 +65,6 @@ export const SingleSelectMenu = <
       }}
     >
       {children}
-    </MenuRoot>
+    </MenuRootComponent>
   );
 };

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

@@ -1,10 +1,12 @@
-import type { TypeMenuRootOwnProps, TypeMenuRootProps } from "../MenuRoot";
 import type { TypeDownshiftSelectProps } from "../MenuContext";
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeChildrenOrItems } from "../types";
+import type {
+  TypeChildrenOrItems,
+  TypeHigherOrderComponentProps,
+} from "../types";
 
 export interface TypeSingleSelectMenuBaseProps
-  extends TypeMenuRootOwnProps,
+  extends TypeHigherOrderComponentProps,
     TypeDownshiftSelectProps {}
 
 export type TypeSingleSelectMenuProps<

package/src/__tests__/Menu.test.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable testing-library/no-unnecessary-act */
-import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import {
   render,
   screen,
   waitFor,
+  PointerEventsCheckLevel,
 } from "@sproutsocial/seeds-react-testing-library";
 import {
   ActionMenu,

package/src/index.ts

@@ -11,6 +11,7 @@ export * from "./MenuSearchInput";
 export * from "./MenuTokenInput";
 export * from "./MenuSearchTokenInput";
 export * from "./SubmenuItem";
+export * from "./ListboxToggleButton";
 
 // Menus
 export * from "./ActionMenu";

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

@@ -1,41 +1,21 @@
 import styled from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import { useMenuToggleContext, MenuToggleButton } from "../index";
-
-export interface TypeStyledChevronProps {
-  $isOpen?: boolean;
-}
-
-const StyledChevron = styled.div<TypeStyledChevronProps>`
-  margin-left: ${({ theme }) => theme.space[300]};
-  ${({ $isOpen }) =>
-    $isOpen &&
-    `
-		transform: rotate(-180deg);
-	`}
-  transition: transform 0.15s;
-`;
+import {
+  useMenuToggleContext,
+  MenuToggleButton,
+  ListboxToggleButton,
+} from "../index";
 
 interface StorybookMenuToggleButtonProps {
   buttonText?: string;
   buttonProps?: Partial<React.ComponentProps<typeof MenuToggleButton>>;
+  useListboxButton?: boolean;
 }
 
 export const StorybookMenuToggleButton = ({
   buttonText,
   buttonProps,
-}: StorybookMenuToggleButtonProps) => {
-  const { isOpen } = useMenuToggleContext();
-
-  return (
-    <MenuToggleButton appearance="secondary" {...buttonProps}>
-      <Box display="flex" justifyContent="space-between">
-        {buttonText ? buttonText : <span>Select book</span>}
-        <StyledChevron $isOpen={isOpen}>
-          <Icon name="chevron-down" />
-        </StyledChevron>
-      </Box>
-    </MenuToggleButton>
-  );
-};
+}: StorybookMenuToggleButtonProps) => (
+  <ListboxToggleButton {...buttonProps}>
+    {buttonText ? buttonText : <span>Select book</span>}
+  </ListboxToggleButton>
+);

package/src/types.ts

@@ -1,7 +1,7 @@
 import type { UseComboboxGetInputPropsOptions } from "downshift";
 import type { TypeMenuItemProps } from "./MenuItem";
 import type { TypeMenuGroupBaseProps } from "./MenuGroup";
-import type { TypeMenuRootProps } from "./MenuRoot";
+import type { TypeMenuRootOwnProps, TypeMenuRootProps } from "./MenuRoot";
 
 // The items object used internally for Menu functionality
 export interface TypeInternalItemProps<Item = TypeMenuItemProps> {
@@ -12,6 +12,10 @@ export interface TypeInternalItemProps<Item = TypeMenuItemProps> {
   menuGroupProps?: TypeMenuGroupBaseProps;
 }
 
+export interface TypeHigherOrderComponentProps extends TypeMenuRootOwnProps {
+  MenuRootComponent?: React.ComponentType<TypeMenuRootProps>;
+}
+
 export type TypeChildrenOrItems<
   I extends TypeMenuItemProps = TypeMenuItemProps
 > =