@sproutsocial/seeds-react-menu 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -14,7 +14,9 @@
     "clean:modules": "rm -rf node_modules",
     "typecheck": "tsc --noEmit",
     "test": "jest",
-    "test:watch": "jest --watch --coverage=false"
+    "test:watch": "jest --watch --coverage=false",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
   },
   "dependencies": {
     "@sproutsocial/seeds-react-box": "*",
@@ -30,7 +32,7 @@
     "motion": "^11.11.17"
   },
   "devDependencies": {
-    "@sproutsocial/eslint-config-seeds": "*",
+    "eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",
     "@types/react": "^18.0.0",

package/src/ActionMenu/ActionMenu.tsx

@@ -111,6 +111,7 @@ export const ActionMenu = ({
     onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      // eslint-disable-next-line prefer-const, react-hooks/rules-of-hooks
       newState = useSelectStateReducer(state, actionAndChanges);
       return externalStateReducer
         ? externalStateReducer(state, {

package/src/MenuContent/MenuContentTypes.ts

@@ -1,6 +1,5 @@
-import React from "react";
 import { type HTMLMotionProps } from "motion/react";
-import type { ReactNode, RefObject } from "react";
+import type { ReactNode } from "react";
 
 export interface TypeMenuContentProps extends HTMLMotionProps<"ul"> {
   children: ReactNode;

package/src/MenuContext.tsx

@@ -1,9 +1,4 @@
-import React, {
-  createContext,
-  useMemo,
-  useContext,
-  type RefObject,
-} from "react";
+import React, { createContext, useMemo, useContext } from "react";
 import type {
   UseSelectReturnValue,
   UseSelectProps,

package/src/MenuGroup/MenuGroupTypes.ts

@@ -25,5 +25,6 @@ export interface TypeMenuGroupProps
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
   title?: string;
   children: ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   titleAs?: string | React.ComponentType<any>;
 }

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -44,6 +44,7 @@ describe("MenuGroup", () => {
       const menuGroup = screen.getByRole("group", { name: menuTitle });
       expect(menuGroup).toBeInTheDocument();
       expect(
+        // eslint-disable-next-line testing-library/prefer-presence-queries
         screen.queryByRole("heading", { name: menuTitle })
       ).toBeInTheDocument();
     });

package/src/MenuHeader/__tests__/MenuHeader.typetest.tsx

@@ -6,6 +6,7 @@ export const MenuHeaderTypeTest = () => (
       title="Menu Header"
       leftAction={<div>left action</div>}
       rightAction={<div>right action</div>}
+      // eslint-disable-next-line react/no-children-prop
       children={<div>children</div>}
     />
     {/* left and right action accept strings */}

package/src/MenuItem/MenuItem.tsx

@@ -17,9 +17,12 @@ export const MenuItem = ({
   children,
   onClick,
   onKeyDown,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ref,
   href,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color,
   ...props
 }: TypeMenuItemProps) => {
@@ -50,6 +53,7 @@ export const MenuItem = ({
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
         href={href}
+        // eslint-disable-next-line react/no-children-prop
         children={children}
         {...optionProps}
         {...props}

package/src/MenuItem/styles.tsx

@@ -14,6 +14,8 @@ 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`

package/src/MenuItem/useOptionProps.tsx

@@ -85,6 +85,7 @@ export const useOptionProps = ({
     () =>
       selectedItem?.id === id ||
       !!selectedItems?.find((item) => item?.id === id),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedItem, selectedItems]
   );
 

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,10 +1,11 @@
-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 {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   menuToggleElement: React.ReactElement<any>;
   popoutProps?: Partial<
     Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">

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,7 +110,108 @@ 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
@@ -83,9 +220,9 @@ describe("MenuRoot", () => {
       >
         <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 = () => {

package/src/MultiSelectMenu/MultiSelectMenu.feature

@@ -40,25 +40,14 @@ Feature: MultiSelectMenu
             Then the component renders the existing values
 
         Scenario: Component handles new selection state
-            When the MultiSelectMenu is not passed
+            When the MultiSelectMenu is not passed a `selectedItems` prop
             And a new selection is created
-            Then the 'onSelectedItemsChangee' callback is fired
+            Then the 'onSelectedItemsChange' callback is fired
 
         Scenario: Menu does not close on selection
             When an item is selected
             Then the 'onSelectedItemsChange' callback fires without closing the menu
 
-        Scenario Outline: Actions can be triggered from the MultiSelectMenu
-            When actionable elements are provided to the MultiSelectMenu
-            And an `<action>` is clicked
-            Then the corresponding `onClick` should be executed
-
-            Examples: Action Types
-                | action           |
-                | ---------------- |
-                | select button    |
-                | deselect button  |
-
         Scenario Outline: MultiSelectMenu checks its types
             When `<propName>` is passed a value
             Then MultiSelectMenu expects it to be of type `<propType>`

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -82,6 +82,7 @@ export const MultiSelectMenu = ({
     defaultHighlightedIndex: 0,
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       newState = useSelectStateReducer(state, actionAndChanges);
       newState = selectReducerForMultiSelect(state, {
         ...actionAndChanges,