@sproutsocial/seeds-react-menu 0.1.0 → 0.2.1

package/src/MenuItem/__tests__/MenuItem.typetest.tsx

@@ -1,41 +1,60 @@
 import { MenuItem } from "../MenuItem";
 
-export const MenuItemTypeTest = () => (
-  <>
-    {/* Valid MenuItem with minimal required props */}
-    <MenuItem id="test">Test</MenuItem>
-    {/* Valid MenuItem allows disabled prop */}
-    <MenuItem id="test" disabled>
-      Test
-    </MenuItem>
-    {/* Valid MenuItem allows disabled prop false */}
-    <MenuItem id="test" disabled={false}>
-      Test
-    </MenuItem>
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function MenuItemTypeTest() {
+  return (
+    <>
+      {/* Valid MenuItem with minimal required props */}
+      <MenuItem id="test">Test</MenuItem>
+      {/* Valid MenuItem allows href */}
+      <MenuItem id="test" href="test.com">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows active prop */}
+      <MenuItem id="test" active>
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows active prop false */}
+      <MenuItem id="test" active={false}>
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be checkbox */}
+      <MenuItem id="test" inputType="checkbox">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be radio */}
+      <MenuItem id="test" inputType="radio">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be switch */}
+      <MenuItem id="test" inputType="switch">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be icon */}
+      <MenuItem id="test" inputType="icon">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputLabelId prop as a string */}
+      <MenuItem id="test" inputLabelId="Test Label">
+        Test
+      </MenuItem>
 
-    {/* @ts-expect-error - no children is invalid */}
-    <MenuItem id="foo" />
-    {/* @ts-expect-error - test empty states are invalid */}
-    <MenuItem />
-    {/* @ts-expect-error - test missing index is invalid */}
-    <MenuItem id="foo" />
-    {/* @ts-expect-error - test missing id is invalid */}
-    <MenuItem />
-    {/* @ts-expect-error - test that types are invalid */}
-    <MenuItem id={0} />
-    {/* @ts-expect-error -test that wrong highlighted type fails */}
-    <MenuItem $highlighted="string">Hello world!</MenuItem>
-    {/* @ts-expect-error -test that wrong role type fails */}
-    <MenuItem role="wrong">Hello world!</MenuItem>
-    {/* @ts-expect-error - missing id is invalid */}
-    <MenuItem>Test</MenuItem>
-    <MenuItem
-      /* @ts-expect-error - id may not be a number */
-      id={0}
-      /* @ts-expect-error - disabled may not be a string */
-      disabled="true"
-    >
-      Test
-    </MenuItem>
-  </>
-);
+      {/* @ts-expect-error - no children is invalid */}
+      <MenuItem id="foo" />
+      {/* @ts-expect-error - missing id is invalid */}
+      <MenuItem>Test</MenuItem>
+      <MenuItem
+        /* @ts-expect-error - id may not be a number */
+        id={0}
+        /* @ts-expect-error - active may not be a string */
+        active="true"
+        /* @ts-expect-error - inputType must be valid */
+        inputType="invalid"
+        /* @ts-expect-error - inputLabelId may not be a number */
+        inputLabelId={0}
+      >
+        Test
+      </MenuItem>
+    </>
+  );
+}

package/src/MenuItem/styles.tsx

@@ -14,20 +14,41 @@ const highlightedStyles = css`
   cursor: pointer;
   border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
   background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
+`;
+
+export const MenuItemContainer = styled.li`
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-left: ${({ theme }) => theme.space[300]};
+  margin-right: ${({ theme }) => theme.space[300]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
+
+  &:first-child {
+    margin-top: ${({ theme }) => theme.space[300]};
+  }
+
+  &:last-child {
+    margin-bottom: ${({ theme }) => theme.space[300]};
+  }
 `;
 
-export const MenuItemContainer = styled.li<{ $highlighted: boolean }>`
+export const StyledMenuItem = styled.div<{ $highlighted: boolean }>`
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
   border-radius: ${({ theme }) => theme.radii[500]};
   background-color: ${({ theme }) => theme.colors.listItem.background.base};
   border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
   color: ${({ theme }) => theme.colors.text.body};
   font-family: ${({ theme }) => theme.fontFamily};
   font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
   padding: ${({ theme }) => theme.space[300]};
-  list-style-type: none;
   outline: 0;
   ${({ theme }) => theme.typography[200]};
-  transition: all ${({ theme }) => theme.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}
@@ -69,3 +90,23 @@ export const MenuItemContainer = styled.li<{ $highlighted: boolean }>`
   ${layout}
   ${space}
 `;
+
+export const MenuItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+
+export const MenuItemAction = styled.div`
+  margin-right: ${({ theme }) => theme.space[300]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+export const MenuItemText = styled.div`
+  word-break: break-word;
+  flex-grow: 1;
+  min-width: 0;
+`;

package/src/{MenuItemSelectable/MenuItemSelectable.tsx → MenuItem/useOptionProps.tsx}

@@ -6,18 +6,9 @@ import { Radio } from "@sproutsocial/seeds-react-radio";
 import { useTheme } from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { MenuContext } from "../MenuContext";
-import { MenuItem } from "../MenuItem";
 
-// import { type TypeMenuItemRoles } from "../constants";
-import {
-  MenuItemSelectableAction,
-  MenuItemSelectableRow,
-  MenuItemSelectableText,
-} from "./styles";
-import type {
-  TypeMenuItemSelectableProps,
-  InputType,
-} from "./MenuItemSelectableTypes";
+import type { TypeMenuItemProps, InputType } from "./MenuItemTypes";
+import { MenuItemAction, MenuItemRow, MenuItemText } from "./styles";
 
 /**
  * SelectionIndicator - handles logic for appropriate rendering of inputs
@@ -47,7 +38,7 @@ export const SelectionIndicator = ({
           onChange={() => {}}
           checked={selected}
           aria-labelledby={labeledBy}
-          id={`MenuItemSelectable-${inputType}-${id}`}
+          id={`MenuItem-${inputType}-${id}`}
         />
       );
     case "switch":
@@ -56,15 +47,15 @@ export const SelectionIndicator = ({
           onClick={inputStub}
           checked={!!selected}
           aria-labelledby={labeledBy}
-          id={`MenuItemSelectable-${inputType}-${id}`}
+          id={`MenuItem-${inputType}-${id}`}
         />
       );
     case "radio":
       return (
         <Radio
           checked={selected}
-          id={`MenuItemSelectable-${inputType}-${id}`}
-          name={`MenuItemSelectable-${inputType}`}
+          id={`MenuItem-${inputType}-${id}`}
+          name={`MenuItem-${inputType}`}
           aria-labelledby={labeledBy}
         />
       );
@@ -80,57 +71,44 @@ export const SelectionIndicator = ({
 };
 
 /**
- * MenuItemSelectable - primitive with controlled input states
+ * useOptionProps - props needed for the option menu items
  */
-export const MenuItemSelectable = ({
+export const useOptionProps = ({
   id,
   children,
   inputType = "icon",
-  inputLabel,
+  inputLabelId,
   ...props
-}: TypeMenuItemSelectableProps) => {
+}: TypeMenuItemProps) => {
   const { selectedItem, selectedItems, isListbox } = useContext(MenuContext);
   const selected = useMemo(
     () =>
       selectedItem?.id === id ||
       !!selectedItems?.find((item) => item?.id === id),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedItem, selectedItems]
   );
 
-  if (isListbox === false) {
-    console.warn(
-      "MenuItemSelectable is invalid when isListbox is false (Menu)"
-    );
-  }
-
-  // const roles: Record<InputType, TypeMenuItemRoles> = {
-  //   checkbox: "menuitemcheckbox",
-  //   switch: "menuitemcheckbox",
-  //   radio: "menuitemradio",
-  //   icon: "option",
-  // };
-
-  const label = inputLabel || `menu-item-child-${id}`;
+  const label = inputLabelId || `menu-item-child-${id}`;
 
-  return (
-    <MenuItem
-      active={selected}
-      id={id}
-      // role={roles["icon"]}
-      aria-selected={selected}
-      {...props}
-    >
-      <MenuItemSelectableRow>
-        <MenuItemSelectableAction>
-          <SelectionIndicator
-            id={id}
-            aria-labelledby={label}
-            inputType={inputType}
-            selected={!!selected}
-          />
-        </MenuItemSelectableAction>
-        <MenuItemSelectableText id={label}>{children}</MenuItemSelectableText>
-      </MenuItemSelectableRow>
-    </MenuItem>
-  );
+  return isListbox
+    ? {
+        active: selected,
+        ["aria-selected"]: selected,
+        children: (
+          <MenuItemRow>
+            <MenuItemAction>
+              <SelectionIndicator
+                id={id}
+                aria-labelledby={label}
+                inputType={inputType}
+                selected={!!selected}
+              />
+            </MenuItemAction>
+            <MenuItemText id={label}>{children}</MenuItemText>
+          </MenuItemRow>
+        ),
+        ...props,
+      }
+    : {};
 };

package/src/MenuRoot/MenuRoot.feature

@@ -11,21 +11,31 @@ Feature: Menu Root
       When the esc key is pressed
       Then the menu closes
 
-    Scenario Outline: MenuRoot focuses the correct element when opened
-      Given a MenuRoot <use case>
-      When the the menu is opened
-      Then <correct element> is in focus
-
-      Examples:
-        | use case                                | the correct element                              |
-        | contains at least one MenuItem          | the first MenuItem                               |
-        | has a custom defaultFocusRef            | the defaultFocusRef element                      |
-        | has no MenuItems and no defaultFocusRef | an error is logged and the first focusable child |
+    Scenario: MenuRoot closes when clicking outside of it
+      Given a menu is open
+      When the user clicks outside of it
+      Then the menu closes
 
   Rule: API
     Background:
       Given an engineer is implementing the component
 
+      Scenario: MenuRoot triggers the Menu to open when isOpen true
+        Given the Menu is closed
+        And MenuContext.isOpen is false
+        When MenuContext.isOpen is changed to true
+        Then the Menu will open
+
+      Scenario: MenuRoot triggers the Menu to close when isOpen false
+        Given the Menu is open
+        And MenuContext.isOpen is true
+        When MenuContext.isOpen is changed to false
+        Then the Menu will close
+
+      Scenario: MenuRoot accepts a custom toggleButtonElement
+        When MenuRoot receives a a custom element for the toggleButtonElement prop
+        Then the Menu will render the custom element
+
       Scenario: MenuRoot is using keyboard instructions
         Given a screen reader is being used
         When a MenuRoot is provided with the keyboardInstructions prop

package/src/MenuRoot/MenuRoot.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback } from "react";
 import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 
 import { MenuProvider, type TypeMenuProviderProps } from "../MenuContext";
 
 export interface TypeMenuRootOwnProps {
-  triggerElement: React.ReactElement<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  menuToggleElement: React.ReactElement<any>;
   popoutProps?: Partial<
     Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">
   >;
@@ -20,14 +21,21 @@ const CustomPopoutContent = styled(Popout.Content)`
   margin-left: 0;
   margin-right: 0;
 `;
+
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-root/
+ *
+ * @description MenuRoot is a utility component used to handle {@link https://github.com/sproutsocial/seeds/blob/dev/seeds-react/seeds-react-menu/src/MenuContext.tsx | MenuContext}. This component should rarely, if ever, be used directly unless building a custom menu type.
+ */
+
 export const MenuRoot = ({
   children,
-  triggerElement,
+  menuToggleElement,
   popoutProps,
   width = "300px",
   ...contextProps
 }: TypeMenuRootProps) => {
-  const { isListbox, isOpen, openMenu, closeMenu, getMenuProps } = contextProps;
+  const { isOpen, openMenu, closeMenu } = contextProps;
   const setIsOpen = useCallback(
     (newIsOpen: boolean) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
@@ -41,19 +49,7 @@ export const MenuRoot = ({
         isOpen={!!isOpen}
         setIsOpen={setIsOpen}
         content={
-          <CustomPopoutContent width={width}>
-            <div
-              {...getMenuProps?.(
-                {
-                  ...(isListbox ? {} : { role: "menu" }),
-                },
-                // Suppress ref error for now
-                { suppressRefError: true }
-              )}
-            >
-              {children}
-            </div>
-          </CustomPopoutContent>
+          <CustomPopoutContent width={width}>{children}</CustomPopoutContent>
         }
         focusLockProps={{
           // correct jerking motion when scrolling while the Popout is open
@@ -63,7 +59,7 @@ export const MenuRoot = ({
         disableWrapperAria
         {...popoutProps}
       >
-        {triggerElement}
+        {menuToggleElement}
       </Popout>
     </MenuProvider>
   );

package/src/MenuRoot/__tests__/MenuRoot.test.tsx

@@ -3,8 +3,8 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
-import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
 import {
   MenuRoot,
@@ -13,9 +13,11 @@ import {
   MenuContext,
   MenuFooter,
   MenuHeader,
+  MenuGroup,
   type TypeMenuContextProps,
 } from "../../index";
 
+// eslint-disable-next-line react/display-name
 jest.mock("@sproutsocial/seeds-react-portal", () => ({ children }) => (
   <div>{children}</div>
 ));
@@ -42,28 +44,62 @@ const TestMenuFooter = () => {
 // };
 
 describe("MenuRoot", () => {
-  // TODO: test this on the Menu components that use downshift?
-  // it("closes when esc is pressed", () => {
-  //   // closes when esc is pressed
-  // });
+  it("closes when esc is pressed", async () => {
+    const mockCloseMenu = jest.fn();
+    const { user } = render(
+      <MenuRoot
+        menuToggleElement={
+          <MenuToggleButton role="button" aria-label="Open Menu">
+            Open
+          </MenuToggleButton>
+        }
+        closeMenu={mockCloseMenu}
+        isOpen
+      >
+        Menu
+      </MenuRoot>
+    );
 
-  // TODO: write these tests when focus logic is implemented
-  // test.each([
-  //   {
-  //     element: "focuses the first MenuItem",
-  //     condition: "contains at least one MenuItem",
-  //   },
-  //   {
-  //     element: "focuses the defaultFocusRef element",
-  //     condition: "has a custom defaultFocusRef",
-  //   },
-  //   {
-  //     element: "an error is logged and focuses the first focusable child",
-  //     condition: "has no MenuItems and no defaultFocusRef",
-  //   },
-  // ])("$element when opened if it $condition", ({}) => {
-  //   // focuses the correct element when opened
-  // });
+    // Check that Menu is open
+    const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+    expect(menuTrigger).toBeInTheDocument();
+    expect(await screen.findByText("Menu")).toBeInTheDocument();
+
+    // Press esc key
+    await user.keyboard("{Esc}");
+
+    // Check that menu closes
+    await waitFor(() => expect(mockCloseMenu).toHaveBeenCalled());
+  });
+
+  it("should close when clicking outside of the menu", async () => {
+    const mockCloseMenu = jest.fn();
+    const { user } = render(
+      <div>
+        <MenuRoot
+          menuToggleElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          closeMenu={mockCloseMenu}
+          isOpen
+        >
+          Menu
+        </MenuRoot>
+        <button>Outside</button>
+      </div>
+    );
+
+    expect(await screen.findByText("Menu")).toBeInTheDocument();
+
+    // Click outside the menu
+    const otherButton = screen.getByRole("button", { name: "Outside" });
+    await user.click(otherButton);
+
+    // Check that menu closes
+    await waitFor(() => expect(mockCloseMenu).toHaveBeenCalled());
+  });
 
   // TODO: write tests for keyboard instructions when feature added
   // it("triggers keyboard instructions", () => {
@@ -74,18 +110,119 @@ describe("MenuRoot", () => {
   //   // has no keyboard instructions by default
   // });
 
-  // TODO: Add MenuGroup when the component is ready
+  it("opens when isOpen changes from false to true", async () => {
+    const TestMenu = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      const toggleMenu = () => setIsOpen(!isOpen);
+
+      return (
+        <MenuRoot
+          menuToggleElement={
+            <MenuToggleButton
+              role="button"
+              aria-label="Open Menu"
+              onClick={toggleMenu}
+            >
+              Open
+            </MenuToggleButton>
+          }
+          isOpen={isOpen}
+        >
+          Menu
+        </MenuRoot>
+      );
+    };
+    const { user } = render(<TestMenu />);
+
+    // Check that Menu is open
+    const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+    expect(menuTrigger).toBeInTheDocument();
+    expect(screen.queryByText("Menu")).not.toBeInTheDocument();
+
+    // Click the menu trigger
+    await user.click(menuTrigger);
+
+    // Check that menu opens
+    expect(await screen.findByText("Menu")).toBeInTheDocument();
+  });
+
+  it("closes when isOpen changes from true to false", async () => {
+    const TestMenu = () => {
+      const [isOpen, setIsOpen] = useState(true);
+      const toggleMenu = () => setIsOpen(!isOpen);
+
+      return (
+        <MenuRoot
+          menuToggleElement={
+            <MenuToggleButton
+              role="button"
+              aria-label="Open Menu"
+              onClick={toggleMenu}
+            >
+              Open
+            </MenuToggleButton>
+          }
+          isOpen={isOpen}
+        >
+          Menu
+        </MenuRoot>
+      );
+    };
+    const { user } = render(<TestMenu />);
+
+    // Check that Menu is open
+    const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+    expect(menuTrigger).toBeInTheDocument();
+    expect(await screen.findByText("Menu")).toBeInTheDocument();
+
+    // Click the menu trigger
+    await user.click(menuTrigger);
+
+    // Check that menu opens
+    await waitFor(() =>
+      expect(screen.queryByText("Menu")).not.toBeInTheDocument()
+    );
+  });
+
+  it("renders a custom toggle when passed to menuToggleElement", async () => {
+    const mockToggleClick = jest.fn();
+    const CustomToggleElement = () => {
+      const { getToggleButtonProps } = useContext(MenuContext);
+      return (
+        <div role="button" {...getToggleButtonProps?.()}>
+          Toggle
+        </div>
+      );
+    };
+    const { user } = render(
+      <MenuRoot
+        menuToggleElement={<CustomToggleElement />}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - mock contextProps may be imperfect
+        getToggleButtonProps={() => ({ onClick: mockToggleClick })}
+      >
+        Menu
+      </MenuRoot>
+    );
+
+    const menuTrigger = screen.getByRole("button", { name: "Toggle" });
+    expect(menuTrigger).toBeInTheDocument();
+    await user.click(menuTrigger);
+
+    expect(mockToggleClick).toHaveBeenCalled();
+  });
+
   it("renders custom children", () => {
     render(
       <MenuRoot
-        triggerElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
+        menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
         isOpen
       >
         <MenuHeader title="Menu Header" />
         <div>Custom Banner</div>
-        <Box>
+        <MenuGroup title="Menu Group">
           <MenuItem id="1">Item 1</MenuItem>
-        </Box>
+        </MenuGroup>
         <MenuFooter>Menu Footer</MenuFooter>
       </MenuRoot>
     );
@@ -94,14 +231,11 @@ describe("MenuRoot", () => {
     expect(screen.getByText("Custom Banner")).toBeInTheDocument();
     expect(screen.getByText("Item 1")).toBeInTheDocument();
     expect(screen.getByText("Menu Footer")).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Menu Group" })
+    ).toBeInTheDocument();
   });
 
-  // TODO: test this using the SingleSelectMenu, MultiSelectMenu, and ComboBox
-  // it("passes downshift props to the MenuContext", () => {
-  //   // passes downshift props to the MenuContext
-  //   // Can be tested by the components that use downshift
-  // });
-
   it("can be implemented without using Downshift", () => {
     const randomText = "Some random text";
     const TestCustomMenu = () => {
@@ -120,7 +254,7 @@ describe("MenuRoot", () => {
 
       return (
         <MenuRoot
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton appearance="secondary">
               Open Menu (<TestComponent />)
             </MenuToggleButton>
@@ -181,7 +315,7 @@ describe("MenuRoot", () => {
     ({ TestComponent, contextProps, testBtnText, testFn }) => {
       render(
         <MenuRoot
-          triggerElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
+          menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
           isOpen
           {...contextProps}
         >