@sproutsocial/seeds-react-menu 0.5.0 → 0.6.0

package/src/MenuHeader/__tests__/MenuHeader.test.tsx

@@ -1,8 +1,14 @@
-import { render, screen } from "@sproutsocial/seeds-react-testing-library";
-import { MenuHeader } from "../MenuHeader";
-import { MenuRoot } from "../../MenuRoot";
+import {
+  render,
+  screen,
+  actRender,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
 import Button from "@sproutsocial/seeds-react-button";
 import Text from "@sproutsocial/seeds-react-text";
+import { MenuHeader } from "../MenuHeader";
+import { MenuToggleButton } from "../../index";
+import { TestWithMenuRoot } from "../../menuTestingUtils";
 
 describe("MenuHeader API", () => {
   it("renders a title when title prop is passed a string", () => {
@@ -49,17 +55,17 @@ describe("MenuHeader API", () => {
 
   it.each(contextTests)(
     "$children rendered when $children provided in MenuRoot",
-    ({ TestComponent, test }) => {
-      render(
-        <MenuRoot
+    async ({ TestComponent, test }) => {
+      await actRender(
+        <TestWithMenuRoot
           isOpen
-          menuToggleElement={<Button onClick={jest.fn()}>Open</Button>}
+          menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
         >
           <MenuHeader>
             Hello world!
             {TestComponent}
           </MenuHeader>
-        </MenuRoot>
+        </TestWithMenuRoot>
       );
 
       test();
@@ -69,7 +75,7 @@ describe("MenuHeader API", () => {
   it("supports clickable actions", async () => {
     const handleTestClick = jest.fn();
 
-    const { user } = render(
+    const { user } = await actRender(
       <MenuHeader
         leftAction={<Button onClick={handleTestClick}>Left Action</Button>}
         rightAction={<Button onClick={handleTestClick}>Right Action</Button>}
@@ -81,17 +87,21 @@ describe("MenuHeader API", () => {
     const leftAction = screen.getByText("Left Action");
     const rightAction = screen.getByText("Right Action");
 
-    await user.click(leftAction);
+    await act(async () => {
+      await user.click(leftAction);
+    });
 
     expect(handleTestClick).toHaveBeenCalledTimes(1);
 
-    await user.click(rightAction);
+    await act(async () => {
+      await user.click(rightAction);
+    });
 
     expect(handleTestClick).toHaveBeenCalledTimes(2);
   });
 
-  it("can render actions on the left or right of the title", () => {
-    render(
+  it("can render actions on the left or right of the title", async () => {
+    await actRender(
       <MenuHeader
         leftAction={<Button onClick={() => {}}>Left Action</Button>}
         rightAction={<Button onClick={() => {}}>Right Action</Button>}

package/src/MenuHeader/styles.tsx

@@ -38,16 +38,15 @@ export const MenuTitleText = styled.h3<TypeMenuHeaderContainerProps>`
   color: ${({ theme }) => theme.colors.text.headline};
   font-weight: ${({ theme }) => theme.fontWeights.bold};
   margin: 0px;
-  flex-grow: 2;
-  justify-self: start;
+  flex-grow: 1;
 
   ${({ theme }) => theme.typography[200]}
 
   ${({ $leftAction, theme }) =>
     $leftAction &&
     `
-			padding-left: ${theme.space[350]};
-	`}
+      padding-left: ${theme.space[350]};
+    `}
 `;
 
 export const MenuChildrenContainer = styled.div`
@@ -57,18 +56,23 @@ export const MenuChildrenContainer = styled.div`
 
 export const MenuHeaderFeatures = styled.div<TypeMenuHeaderContainerProps>`
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 
-  > a {
-    white-space: nowrap;
-  }
-
-  &:first-child {
-    flex-grow: 1;
-    justify-self: start;
+  .right-action {
+    margin-left: auto; /* Pushes the right action to the right */
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0; /* Prevents it from shrinking */
+    max-width: 40%; /* Prevents it from taking too much space */
+    text-align: right;
   }
 
-  &:last-child {
-    flex-grow: 1;
-    justify-self: end;
+  > a,
+  > button {
+    display: flex;
+    align-items: center;
+    word-break: break-word;
   }
 `;

package/src/MenuItem/MenuItem.stories.tsx

@@ -0,0 +1,507 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Badge } from "@sproutsocial/seeds-react-badge";
+import { Tooltip } from "@sproutsocial/seeds-react-tooltip";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
+import {
+  MenuItem,
+  MenuLabel,
+  MenuToggleButton,
+  MenuHeader,
+  MenuContent,
+  ActionMenu,
+  SingleSelectMenu,
+  MultiSelectMenu,
+  MenuContentContext,
+  MenuGroup,
+  useMenu,
+  type TypeMenuItemProps,
+} from "../index";
+
+interface MenuItemStoryArgs extends TypeMenuItemProps {
+  "Include Switch Children"?: boolean;
+  text?: string;
+}
+
+type Story = StoryObj<MenuItemStoryArgs>;
+
+const meta: Meta<MenuItemStoryArgs> = {
+  title: "Under Development/Primitives/MenuItem",
+  component: MenuItem,
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+  argTypes: {
+    disabled: {
+      table: {
+        category: "MenuItem",
+      },
+      description: "disabled state",
+      control: { type: "boolean" },
+    },
+    "Include Switch Children": {
+      table: {
+        category: "MenuItem",
+      },
+      description: "Example Switch Child",
+      control: { type: "boolean" },
+    },
+    alignItems: {
+      table: {
+        category: "MenuItem",
+      },
+      description: "systemProps",
+      control: { type: "text" },
+    },
+    justifyContent: {
+      table: {
+        category: "MenuItem",
+      },
+      description: "systemProps",
+      control: { type: "text" },
+    },
+    display: {
+      table: {
+        category: "MenuItem",
+      },
+      description: "systemProps",
+      control: { type: "text" },
+    },
+    inputType: {
+      table: {
+        category: "MenuItem",
+      },
+      options: ["checkbox", "switch", "radio", undefined],
+      control: { type: "select" },
+    },
+    href: {
+      table: {
+        category: "MenuItem",
+      },
+      description: "href (makes an anchor tag)",
+      control: { type: "text" },
+    },
+  },
+  args: {
+    disabled: false,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "start",
+    "Include Switch Children": false,
+    inputType: undefined,
+    href: undefined,
+  },
+};
+
+export default meta;
+
+/**
+ * This custom onClick handler is used to log the event and the item name to the Action pane inside the Storybook UI.
+ */
+const handleOnClick = (e: React.MouseEvent<HTMLElement>, itemName: string) => {
+  action(itemName)(e);
+};
+
+/**
+ * Similar to how we stub events in SelectableMenuItem, the best way to implement the Switch in MenuItem is to stop the event from bubbling
+ * and allowing Downshift to handle it.
+ */
+const switchInputStub = (e: React.SyntheticEvent) => {
+  e.stopPropagation();
+};
+
+/**
+ * Story: Story for experimenting with different states of disabled and "switched" behavior with an action menu
+ */
+export const MenuWithItems: Story = {
+  render: function MenuWithItems(args) {
+    const [checked, setChecked] = useState({
+      compose: false,
+      view: false,
+      analyze: false,
+    });
+
+    const handleOnClick = (
+      e: React.MouseEvent<HTMLElement>,
+      itemName: keyof typeof checked
+    ) => {
+      action(itemName)(e);
+      setChecked((prev) => ({
+        ...prev,
+        [itemName]: !prev[itemName],
+      }));
+    };
+
+    return (
+      <ActionMenu
+        menuToggleElement={
+          <>
+            <VisuallyHidden>
+              <MenuLabel>Take an Action: </MenuLabel>
+            </VisuallyHidden>
+            <MenuToggleButton ml={10} appearance="secondary">
+              Launch Menu
+            </MenuToggleButton>
+          </>
+        }
+      >
+        <MenuHeader title="Sprout Menu" />
+        <MenuContent>
+          <MenuGroup id="group-1">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "compose")}
+              key={0}
+              id="compose"
+              disabled={args.disabled}
+              display={args.display}
+              alignItems={args.alignItems}
+              justifyContent={args.justifyContent}
+            >
+              {args["Include Switch Children"] && (
+                <Switch
+                  onClick={switchInputStub}
+                  checked={checked["compose"]}
+                />
+              )}
+              Compose Post
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "view")}
+              key={1}
+              id="view"
+              disabled={args.disabled}
+              display={args.display}
+              alignItems={args.alignItems}
+              justifyContent={args.justifyContent}
+            >
+              {args["Include Switch Children"] && (
+                <Switch onClick={switchInputStub} checked={checked["view"]} />
+              )}
+              View Messages
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "analyze")}
+              key={2}
+              id="analyze"
+              disabled={args.disabled}
+              display={args.display}
+              alignItems={args.alignItems}
+              justifyContent={args.justifyContent}
+            >
+              {args["Include Switch Children"] && (
+                <Switch
+                  onClick={switchInputStub}
+                  checked={checked["analyze"]}
+                />
+              )}
+              Analyze Post
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};
+
+/**
+ * Story: Story for experimenting with different visual children
+ */
+export const MenuWithIcons: Story = {
+  parameters: {
+    controls: { exclude: ["Include Switch Children"] },
+  },
+  args: {
+    justifyContent: "space-between",
+  },
+  render: function MenuWithIcons(args) {
+    return (
+      <ActionMenu
+        menuToggleElement={
+          <>
+            <VisuallyHidden>
+              <MenuLabel>Take an Action: </MenuLabel>
+            </VisuallyHidden>
+            <MenuToggleButton ml={10} appearance="secondary">
+              Launch Menu
+            </MenuToggleButton>
+          </>
+        }
+      >
+        <MenuHeader title="Sprout Menu" />
+        <MenuContent>
+          <MenuGroup id="group-1">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "settings")}
+              key={0}
+              id="settings"
+              disabled={args.disabled}
+              display={args.display}
+              alignItems={args.alignItems}
+              justifyContent={args.justifyContent}
+            >
+              <span>
+                <Icon name="gear" mr={350} />
+                Settings
+              </span>
+              <Badge
+                type="secondary"
+                badgeColor="red"
+                iconName="circle-exclamation"
+              >
+                Needs Attention
+              </Badge>
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "messages")}
+              key={1}
+              id="messages"
+              disabled={args.disabled}
+              display={args.display}
+              alignItems={args.alignItems}
+              justifyContent={args.justifyContent}
+            >
+              <span>
+                <Icon name="envelope" mr={350} />
+                Messages
+              </span>
+              <Tooltip content="1 Message">
+                <Icon name="triangle-exclamation" />
+              </Tooltip>
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "analytics")}
+              key={2}
+              id="analytics"
+              disabled={args.disabled}
+              display={args.display}
+              alignItems={args.alignItems}
+              justifyContent={args.justifyContent}
+            >
+              <span>
+                <Icon name="chart-arrow-up" mr={350} />
+                Analytics
+              </span>
+              <Icon name="link" />
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};
+
+export const MenuItemsInListbox: Story = {
+  name: "Menu Items in Listbox",
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+  render: function MenuItemsInListbox(args) {
+    return (
+      <SingleSelectMenu
+        defaultIsOpen
+        initialIsOpen={false}
+        menuToggleElement={<StorybookMenuToggleButton />}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map((book) => {
+              return (
+                <MenuItem
+                  {...args}
+                  key={book.id}
+                  id={book.id}
+                  inputType={args.inputType}
+                  disabled={args.disabled}
+                  display={args.display}
+                  alignItems={args.alignItems}
+                  justifyContent={args.justifyContent}
+                >
+                  {book.title}
+                </MenuItem>
+              );
+            })}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const MenuItemsWithInputTypes: Story = {
+  name: "Menu Items With Input Types",
+  decorators: [
+    (Story) => (
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        flexDirection="row"
+        width="100vw"
+        gap={300}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
+  render: function MenuItemsWithInputTypes() {
+    return (
+      <>
+        <Box width="280px" mr={300}>
+          <SingleSelectMenu
+            isOpen
+            menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+            popoutProps={{ placement: "bottom-start" }}
+          >
+            <MenuContent>
+              <MenuGroup id="books">
+                {TEST_BOOKS.map((book) => {
+                  return (
+                    <MenuItem key={book.id} id={book.id}>
+                      {book.title}
+                    </MenuItem>
+                  );
+                })}
+              </MenuGroup>
+            </MenuContent>
+          </SingleSelectMenu>
+        </Box>
+        <Box width="280px" mr={300}>
+          <MultiSelectMenu
+            isOpen
+            menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+            popoutProps={{ placement: "bottom-start" }}
+          >
+            <MenuContent>
+              <MenuGroup id="books">
+                {TEST_BOOKS.map((book) => {
+                  return (
+                    <MenuItem key={book.id} id={book.id} inputType="checkbox">
+                      {book.title}
+                    </MenuItem>
+                  );
+                })}
+              </MenuGroup>
+            </MenuContent>
+          </MultiSelectMenu>
+        </Box>
+        <Box width="280px" mr={300}>
+          <SingleSelectMenu
+            isOpen
+            menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+            popoutProps={{ placement: "bottom-start" }}
+          >
+            <MenuContent>
+              <MenuGroup id="books">
+                {TEST_BOOKS.map((book) => {
+                  return (
+                    <MenuItem
+                      key={book.id}
+                      id={book.id}
+                      inputType="radio"
+                      inputLabelId={"test-label-" + book.id}
+                    >
+                      <label id={"test-label-" + book.id}></label>
+                      {book.title}
+                    </MenuItem>
+                  );
+                })}
+              </MenuGroup>
+            </MenuContent>
+          </SingleSelectMenu>
+        </Box>
+        <Box width="280px" mr={300}>
+          <MultiSelectMenu
+            isOpen
+            menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+            popoutProps={{ placement: "bottom-start" }}
+          >
+            <MenuContent>
+              <MenuGroup id="books">
+                {TEST_BOOKS.map((book) => {
+                  return (
+                    <MenuItem key={book.id} id={book.id} inputType="switch">
+                      {book.title}
+                    </MenuItem>
+                  );
+                })}
+              </MenuGroup>
+            </MenuContent>
+          </MultiSelectMenu>
+        </Box>
+      </>
+    );
+  },
+};
+
+/**
+ * Story: Story for experimenting with different states of disabled and "switched" behavior with an action menu
+ */
+export const MenuItemOnly: Story = {
+  args: {
+    text: "Click Me",
+  },
+  parameters: {
+    controls: { exclude: ["Include Switch Children"] },
+  },
+  render: function MenuItemOnly(args) {
+    const handleOnClick = (e: React.MouseEvent<HTMLElement>, itemName) => {
+      action(itemName)(e);
+    };
+
+    return (
+      <MenuItem
+        {...args}
+        onClick={(e) => handleOnClick(e, "compose")}
+        key={0}
+        id="compose"
+      >
+        {args.text}
+      </MenuItem>
+    );
+  },
+};
+
+/**
+ * Story: Story for experimenting with the selectable menu item
+ */
+export const ListboxMenuItemOnly: Story = {
+  name: "Selectable Menu Item Only",
+  render: function MenuItemSelectableOnly(args) {
+    const item = {
+      id: "any",
+      children: "Select Me!",
+      index: 0,
+    };
+    const menuContext = useMenu({
+      items: [item],
+      itemsMap: { item },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error - mocked function does not match real type
+      getItemProps: (props) => ({ role: "option", ...props }),
+      isListbox: true,
+      // ...context,
+    });
+    return (
+      <MenuContentContext.Provider value={menuContext}>
+        <MenuItem {...args} key="any" id="any">
+          Select Me!
+        </MenuItem>
+      </MenuContentContext.Provider>
+    );
+  },
+};

package/src/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
-import { useMenuContext } from "../MenuContext";
-import type { TypeDefaultItemProps } from "../types";
+import { useMenuContentContext } from "../MenuContext";
+import type { TypeInternalItemProps } from "../types";
 import type { TypeMenuItemProps } from "./MenuItemTypes";
 import { MenuItemContainer, StyledMenuItem } from "./styles";
 import { useOptionProps } from "./useOptionProps";
@@ -17,42 +17,52 @@ export const MenuItem = ({
   onClick,
   onKeyDown,
   disabled = false,
-  ref,
+  active,
+  innerRef,
   href,
   color,
   ...props
 }: TypeMenuItemProps) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } =
-    useMenuContext();
+  const {
+    getItemProps,
+    itemsMap,
+    highlightedIndex,
+    isListbox,
+    hiddenItemsMap = {},
+  } = useMenuContentContext();
   const { ...optionProps } = useOptionProps({
     id,
     children,
     ...props,
   });
-  const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
+  const item = (itemsMap[id] || { index: 0, id }) as TypeInternalItemProps;
 
   const highlighted = highlightedIndex === item?.index;
 
-  return item.hidden ? (
+  return hiddenItemsMap[item.id] ? (
     <></>
   ) : (
     <MenuItemContainer role="none">
       <StyledMenuItem
         id={id}
         $highlighted={highlighted}
+        $active={active}
         {...getItemProps?.({
           ...(isListbox ? {} : { role: "menuitem" }),
           item,
           index: item.index,
-          // This prop no longer supported in downshift
+          // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
           // disabled,
           onClick,
           onKeyDown,
+          ref: innerRef,
         })}
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
         href={href}
         children={children}
+        // Keyboard nav uses the arrow keys, not tab.
+        tabIndex={-1}
         {...optionProps}
         {...props}
       />