@sproutsocial/seeds-react-menu 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/ActionMenu/ActionMenu.tsx

@@ -49,7 +49,7 @@ const handleStateChange = (
   if (!selectedItem) return;
 
   // if selectedItem is disabled, do nothing
-  if (selectedItem.element?.props?.disabled) {
+  if (selectedItem.disabled) {
     return;
   }
 
@@ -58,7 +58,7 @@ const handleStateChange = (
     changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
 
   // selectedItem props
-  const selectedItemProps = selectedItem.element?.props;
+  const selectedItemProps = selectedItem.menuItemProps;
 
   if (selectedItemProps?.onClick) {
     // Create a synthetic event to pass into the onClick

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`
@@ -21,7 +23,6 @@ export const MenuItemContainer = styled.li`
   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]};
@@ -47,6 +48,7 @@ export const StyledMenuItem = styled.div<{ $highlighted: boolean }>`
   padding: ${({ theme }) => theme.space[300]};
   outline: 0;
   ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}

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

@@ -45,6 +45,7 @@ export const MenuRoot = ({
   return (
     <MenuProvider {...contextProps}>
       <Popout
+        menuPopout
         isOpen={!!isOpen}
         setIsOpen={setIsOpen}
         content={

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

@@ -3,6 +3,7 @@ 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";
@@ -13,6 +14,7 @@ import {
   MenuContext,
   MenuFooter,
   MenuHeader,
+  MenuGroup,
   type TypeMenuContextProps,
 } from "../../index";
 
@@ -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,107 @@ 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 />}
+        // @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 +219,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 +230,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>`