@sproutsocial/seeds-react-menu 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -19,14 +19,15 @@
   "dependencies": {
     "@sproutsocial/seeds-react-box": "*",
     "@sproutsocial/seeds-react-button": "*",
-    "@sproutsocial/seeds-react-icon": "*",
     "@sproutsocial/seeds-react-checkbox": "*",
+    "@sproutsocial/seeds-react-icon": "*",
     "@sproutsocial/seeds-react-popout": "*",
     "@sproutsocial/seeds-react-radio": "*",
     "@sproutsocial/seeds-react-switch": "*",
     "@sproutsocial/seeds-react-system-props": "*",
     "@sproutsocial/seeds-react-theme": "*",
-    "downshift": "9.0.4"
+    "downshift": "9.0.4",
+    "motion": "^11.11.17"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
@@ -37,8 +38,8 @@
     "@types/styled-components": "^5.1.26",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^5.2.2",
-    "tsup": "^8.0.2"
+    "tsup": "^8.0.2",
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/ActionMenu/ActionMenu.feature

@@ -14,7 +14,13 @@ Feature: Action Menu
         When an array of MenuItems is passed to the ActionMenu as children
         Then the ActionMenu should render the MenuItems
       
-      Scenario: ActionMenu automatically closes after an item is clicked
-        When a MenuItem is clicked
+      Scenario: ActionMenu automatically closes after an item is selected
+        When a MenuItem is <selection action>
         And the corresponding onClick executes
-        Then the ActionMenu should no longer render
+        Then the ActionMenu should no longer render
+
+        Examples: child components
+          | selection action       |
+          | clicked                |
+          | activated with space   |
+          | activated with enter   |

package/src/ActionMenu/ActionMenu.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   useSelect,
   type UseSelectProps,
   type UseSelectState,
-  type UseSelectSelectedItemChange,
+  type UseSelectStateChange,
 } from "downshift";
 import type { TypeDefaultItemProps } from "../types";
 import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
@@ -28,58 +28,87 @@ export interface TypeActionMenuProps
   children: TypeMenuRootProps["children"];
 }
 
-export const ActionMenu = ({
-  children,
-  stateReducer: externalStateReducer,
-  ...useSelectProps
-}: TypeActionMenuProps) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+// Manually fire the onClick handler when Enter or Space is pressed
+const handleStateChange = (
+  changes: UseSelectStateChange<TypeDefaultItemProps>,
+  currentSelectedItem: UseSelectState<TypeDefaultItemProps>["selectedItem"]
+) => {
+  // if not Enter or Space key, do nothing
+  if (
+    !(
+      changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter ||
+      changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton
+    )
+  ) {
+    return;
+  }
 
-  // Manually fire the onClick handler when Enter or Space is pressed
-  const handleStateChange = (
-    changes: UseSelectSelectedItemChange<TypeDefaultItemProps>
-  ) => {
-    const { selectedItem } = changes;
+  const selectedItem = changes.selectedItem || currentSelectedItem;
 
-    // if selectedItem is disabled do nothing
-    if (selectedItem.element?.props?.disabled) {
-      return;
-    }
+  // if selectedItem empty, do nothing
+  if (!selectedItem) return;
 
-    // Listen for Enter or Space key
-    if (
-      changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter ||
-      changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton
-    ) {
-      // Determine if Enter key was pressed
-      const isEnterKeyDown =
-        changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
+  // if selectedItem is disabled, do nothing
+  if (selectedItem.element?.props?.disabled) {
+    return;
+  }
 
-      // selectedItem props
-      const selectedItemProps = selectedItem.element?.props;
+  // Determine if Enter key was pressed
+  const isEnterKeyDown =
+    changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
 
-      // Create a synthetic event to pass into the onClick
-      const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
-        key: isEnterKeyDown ? "Enter" : " ",
-        code: isEnterKeyDown ? "Enter" : "Space",
-        bubbles: true,
-        cancelable: true,
-        view: window,
-      });
+  // selectedItem props
+  const selectedItemProps = selectedItem.element?.props;
 
-      // Manually call the onClick handler with a simulated event
-      // Cast it to React.MouseEvent to match onClick expectations
-      selectedItemProps?.onClick?.(
-        syntheticKeyboardEvent as unknown as React.MouseEvent<HTMLElement>
-      );
+  if (selectedItemProps?.onClick) {
+    // Create a synthetic event to pass into the onClick
+    const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
+      key: isEnterKeyDown ? "Enter" : " ",
+      code: isEnterKeyDown ? "Enter" : "Space",
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    });
+
+    // Manually call the onClick handler with a simulated event
+    // Cast it to React.MouseEvent to match onClick expectations
+    selectedItemProps?.onClick?.(
+      syntheticKeyboardEvent as unknown as React.MouseEvent<HTMLElement>
+    );
+  }
+
+  if (selectedItemProps?.href) {
+    if (selectedItemProps.target) {
+      window.open(selectedItemProps.href, selectedItemProps.target);
+    } else {
+      window.location.href = selectedItemProps?.href;
     }
-  };
+  }
+};
+
+/**
+ * @link https://seeds.sproutsocial.com/components/action-menu/
+ *
+ * @description An ActionMenu contains a list of clickable items like buttons or links. ActionMenus do not hold a selection.
+ *
+ * **To select menu items:**
+ * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/SingleSelectMenu | SingleSelectMenu}
+ * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MultiSelectMenu | MultiSelectMenu}
+ */
+export const ActionMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  ...useSelectProps
+}: TypeActionMenuProps) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const [currentSelectedItem, setCurrentSelectedItem] =
+    React.useState<UseSelectState<TypeDefaultItemProps>["selectedItem"]>(null);
 
   const { isOpen, ...useSelectReturnProps } = useSelect({
     ...defaultUseSelectProps,
     items: allMenuItems,
     itemToString,
-    onSelectedItemChange: handleStateChange,
+    onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
       newState = useSelectStateReducer(state, actionAndChanges);
@@ -93,6 +122,10 @@ export const ActionMenu = ({
     ...useSelectProps,
   });
 
+  useEffect(() => {
+    setCurrentSelectedItem(useSelectReturnProps.selectedItem);
+  }, [useSelectReturnProps.selectedItem]);
+
   return (
     <MenuRoot
       {...{

package/src/ActionMenu/__tests__/ActionMenu.test.tsx

@@ -5,18 +5,16 @@ import {
   screen,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
+import { PointerEventsCheckLevel } from "@testing-library/user-event";
+import { type UserEvent } from "@testing-library/user-event";
 import { ActionMenu } from "../ActionMenu";
 import { MenuContent, MenuItem, MenuToggleButton } from "../../index";
 
 describe("ActionMenu", () => {
-  it.skip("extends Menu", () => {
-    // run shared tests for all menus
-  });
-
   it("should render the MenuItems when provided as children", async () => {
     render(
       <ActionMenu
-        triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
       >
         <MenuContent>
           <MenuItem id="test-item-1">Item 1</MenuItem>
@@ -35,11 +33,37 @@ describe("ActionMenu", () => {
     expect(screen.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
   });
 
-  it("should close after a MenuItem is clicked", async () => {
+  test.each([
+    {
+      action: "click",
+      activate: async (user: UserEvent) => {
+        const firstItem = screen.getByRole("menuitem", {
+          name: "Item 1",
+        });
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .click(firstItem);
+      },
+    },
+    {
+      action: "pressed the Enter key",
+      activate: async (user: UserEvent) => {
+        await user.keyboard("{ArrowDown}{Enter}");
+      },
+    },
+    {
+      action: "pressed the Space key",
+      activate: async (user: UserEvent) => {
+        await user.keyboard("{ArrowDown} ");
+      },
+    },
+  ])("should close after a MenuItem is $action", async ({ activate }) => {
     const item1MockClick = jest.fn();
-    render(
+    const { user } = render(
       <ActionMenu
-        triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
       >
         <MenuContent>
           <MenuItem id="test-item-1" onClick={item1MockClick}>
@@ -51,49 +75,19 @@ describe("ActionMenu", () => {
     );
 
     const toggleBtn = screen.getByRole("button", { name: "Test Menu" });
-    fireEvent.click(toggleBtn);
+    await user.click(toggleBtn);
 
     await waitFor(() => expect(screen.getByRole("menu")).toBeVisible());
 
     const item1 = screen.getByRole("menuitem", { name: "Item 1" });
     expect(item1).toBeVisible();
-    fireEvent.click(item1);
-
-    await waitFor(() => {
-      expect(item1MockClick).toHaveBeenCalled();
-      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-    });
-  });
-
-  // TODO: Should be fixed after onClick bug fixed on menu items
-  it.skip("should close after a MenuItem is accessed by the keyboard", async () => {
-    const item1MockClick = jest.fn();
-    const { user } = render(
-      <ActionMenu
-        triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
-      >
-        <MenuContent>
-          <MenuItem id="test-item-1" onClick={item1MockClick}>
-            Item 1
-          </MenuItem>
-          <MenuItem id="test-item-2">Item 2</MenuItem>
-        </MenuContent>
-      </ActionMenu>
-    );
-
-    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-    const toggleBtn = screen.getByRole("button", { name: "Test Menu" });
-    fireEvent.click(toggleBtn);
-
-    await waitFor(() => expect(screen.getByRole("menu")).toBeVisible());
 
-    await user.keyboard("{arrowdown}{enter}");
+    await activate(user);
 
-    await waitFor(() => {
-      expect(item1MockClick).toHaveBeenCalled();
-    });
     await waitFor(() => {
       expect(screen.queryByRole("menu")).not.toBeInTheDocument();
     });
+
+    expect(item1MockClick).toHaveBeenCalled();
   });
 });

package/src/ActionMenu/__tests__/ActionMenu.typetest.tsx

@@ -3,20 +3,20 @@ import { ActionMenu, MenuContent, MenuHeader, MenuFooter } from "../../index";
 export const ActionMenuTypeTest = () => (
   <>
     {/* Valid ActionMenu with minimal required props */}
-    <ActionMenu triggerElement={<>test</>}>Test</ActionMenu>
+    <ActionMenu menuToggleElement={<>test</>}>Test</ActionMenu>
     {/* Valid ActionMenu allows MenuContent by itself as a child */}
-    <ActionMenu triggerElement={<>test</>}>
+    <ActionMenu menuToggleElement={<>test</>}>
       <MenuContent>Test</MenuContent>
     </ActionMenu>
     {/* Valid ActionMenu allows multiple children without fragment */}
-    <ActionMenu triggerElement={<>test</>}>
+    <ActionMenu menuToggleElement={<>test</>}>
       <MenuHeader>Test</MenuHeader>
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </ActionMenu>
     {/* Valid ActionMenu accepts Downshift props and functions for useSelect other than selectedItem */}
     <ActionMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       onSelectedItemChange={() => {}}
       stateReducer={(c) => c}
       isOpen
@@ -24,21 +24,21 @@ export const ActionMenuTypeTest = () => (
       Test
     </ActionMenu>
     {/* Valid ActionMenu accepts Downshift props and functions for useMultipleSelection */}
-    <ActionMenu triggerElement={<>test</>}>Test</ActionMenu>
+    <ActionMenu menuToggleElement={<>test</>}>Test</ActionMenu>
 
-    {/* @ts-expect-error - triggerElement is a required prop */}
+    {/* @ts-expect-error - menuToggleElement is a required prop */}
     <ActionMenu>Test</ActionMenu>
     <ActionMenu
-      /* @ts-expect-error - triggerElement must be a valid react element */
-      triggerElement="test"
+      /* @ts-expect-error - menuToggleElement must be a valid react element */
+      menuToggleElement="test"
     >
       Test
     </ActionMenu>
     {/* @ts-expect-error - when no children provided */}
-    <ActionMenu triggerElement="test" />
+    <ActionMenu menuToggleElement="test" />
 
     <ActionMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */
       isOpen="false"
       /* @ts-expect-error - onSelectedItemChange can't be a string */
@@ -49,21 +49,21 @@ export const ActionMenuTypeTest = () => (
       Test
     </ActionMenu>
     <ActionMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - selectedItem is never allowed for ActionMenu */
       selectedItem={null}
     >
       Test
     </ActionMenu>
     <ActionMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - initialSelectedItem is never allowed for ActionMenu */
       initialSelectedItem={null}
     >
       Test
     </ActionMenu>
     <ActionMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - defaultSelectedItem is never allowed for ActionMenu */
       defaultSelectedItem={null}
     >

package/src/MenuContent/MenuContent.tsx

@@ -2,12 +2,35 @@ import type { TypeMenuContentProps } from "./MenuContentTypes";
 import { StyledMenuContent } from "./styles";
 import { useMenuContext } from "../MenuContext";
 
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-content/
+ *
+ * @description MenuContent is used to contain lists or grouped lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
+ *
+ * @example
+ * <ActionMenu>
+ *   <MenuHeader>Header</MenuHeader>
+ *   <MenuContent>
+ *     <MenuGroup>
+ *       <MenuItem>Item 1</MenuItem>
+ *     </MenuGroup>
+ *     <MenuGroup>
+ *       <MenuItem>Item 2</MenuItem>
+ *     </MenuGroup>
+ *   </MenuContent>
+ *   <MenuFooter>Footer</MenuFooter>
+ * </ActionMenu>
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
+ * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
+ */
+
 const MenuContent = ({
   id = "menu_content",
   children,
   ...rest
 }: TypeMenuContentProps) => {
-  const { getToggleButtonProps } = useMenuContext();
+  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
 
   return (
     <StyledMenuContent
@@ -18,6 +41,13 @@ const MenuContent = ({
       onKeyDown={getToggleButtonProps?.().onKeyDown}
       // apply active descendent updates to container for proper accessibility
       aria-activedescendant={getToggleButtonProps?.()["aria-activedescendant"]}
+      {...getMenuProps?.(
+        {
+          ...(isListbox ? {} : { role: "menu" }),
+        },
+        // Suppress ref error for now
+        { suppressRefError: true }
+      )}
       {...rest}
     >
       {children}

package/src/MenuContent/MenuContentTypes.ts

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

package/src/MenuContent/styles.tsx

@@ -1,10 +1,14 @@
 import styled from "styled-components";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { motion } from "motion/react";
+//import { focusRing } from "@sproutsocial/seeds-react-mixins";
 
-export const StyledMenuContent = styled.ul`
+export const StyledMenuContent = styled(motion.ul)`
   margin: 0;
-  padding: ${({ theme }) => theme.space[300]} 0;
-  &:focus {
-    ${focusRing}
-  }
+  padding: 0;
 `;
+
+// Removing this for now because it's insanely intrusive and distracting to the user... interestingly the out of the box browser focus ring works better only appears when the content is actually focused.
+
+// &:focus {
+// 	${focusRing}
+// }

package/src/MenuFooter/MenuFooter.feature

@@ -11,7 +11,7 @@ Feature: Menu Footer
         Then the MenuFooter should render the <component(s)>
 
         Examples: child components
-          | child component(s)       | component(s)     |
+          | child component(s)       | component(s)    |
           | a Link is                | Link            |
           | a Switch is              | Switch          |
           | a Button is              | Button          |

package/src/MenuFooter/MenuFooter.tsx

@@ -2,6 +2,14 @@ import React from "react";
 import type { TypeMenuFooterProps } from "./MenuFooterTypes";
 import { StyledMenuFooterBox } from "./styles";
 
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-footer/
+ *
+ * @description MenuFooter is a container used to hold footer content within a Menu.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-header/ | MenuHeader}
+ */
+
 export const MenuFooter = ({ children, ...rest }: TypeMenuFooterProps) => {
   return <StyledMenuFooterBox {...rest}>{children}</StyledMenuFooterBox>;
 };

package/src/MenuFooter/__tests__/MenuFooter.test.tsx

@@ -1,35 +1,69 @@
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { MenuFooter, MenuRoot } from "../../index";
 import { Button } from "@sproutsocial/seeds-react-button";
+// import { Link } from "@sproutsocial/seeds-react-link";
 import { Switch } from "@sproutsocial/seeds-react-switch";
 
 describe("MenuFooter API", () => {
   const contextTests = [
     {
-      child: "Button",
-      TestComponent: <Button role="button">Find me!</Button>,
+      children: "Link",
+      // TestComponent: <Link>Find me!</Link>,
+      TestComponent: (
+        <Button as="a" href="https://sproutsocial.com">
+          Find me!
+        </Button>
+      ),
+      test: () => {
+        expect(screen.getByText("Hello world!")).toContainElement(
+          screen.getByRole("link", { name: "Find me!" })
+        );
+      },
     },
     {
-      child: "Switcher",
+      children: "Switch",
       TestComponent: (
-        <Switch
-          role="button"
-          checked={false}
-          onClick={() => {}}
-          aria-label="Find me!"
-        />
+        <Switch checked={false} onClick={() => {}} aria-label="Find me!" />
       ),
+      test: () => {
+        expect(screen.getByText("Hello world!")).toContainElement(
+          screen.getByRole("switch", { name: "Find me!" })
+        );
+      },
+    },
+    {
+      children: "Button",
+      TestComponent: <Button>Find me!</Button>,
+      test: () => {
+        expect(screen.getByText("Hello world!")).toContainElement(
+          screen.getByRole("button", { name: "Find me!" })
+        );
+      },
     },
     {
-      child: "Link",
-      TestComponent: <button role="button">Find me!</button>,
+      children: "Link and Button",
+      TestComponent: (
+        <>
+          <Button>Find me!</Button>
+          <Button as="a" href="https://sproutsocial.com">
+            Find me too!
+          </Button>
+        </>
+      ),
+      test: () => {
+        expect(screen.getByText("Hello world!")).toContainElement(
+          screen.getByRole("button", { name: "Find me!" })
+        );
+        expect(screen.getByText("Hello world!")).toContainElement(
+          screen.getByRole("link", { name: "Find me too!" })
+        );
+      },
     },
   ];
 
   it.each(contextTests)(
-    "$child contains children",
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ({ child, TestComponent }) => {
+    "$children rendered when $children provided",
+    ({ TestComponent, test }) => {
       render(
         <MenuFooter>
           Hello world!
@@ -37,21 +71,17 @@ describe("MenuFooter API", () => {
         </MenuFooter>
       );
 
-      const testBtn = screen.getByRole("button");
-
-      const parentComponent = screen.getByText("Hello world!");
-      expect(parentComponent).toContainElement(testBtn);
+      test();
     }
   );
 
   it.each(contextTests)(
-    "$child contains children when in MenuRoot",
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ({ child, TestComponent }) => {
+    "$children rendered when $children provided in MenuRoot",
+    ({ TestComponent, test }) => {
       render(
         <MenuRoot
           isOpen
-          triggerElement={<Button onClick={jest.fn()}>Open</Button>}
+          menuToggleElement={<Button onClick={jest.fn()}>Open</Button>}
         >
           <MenuFooter>
             Hello world!
@@ -60,10 +90,7 @@ describe("MenuFooter API", () => {
         </MenuRoot>
       );
 
-      const testBtn = screen.getByRole("button", { name: "Find me!" });
-
-      const parentComponent = screen.getByText("Hello world!");
-      expect(parentComponent).toContainElement(testBtn);
+      test();
     }
   );
 

package/src/MenuFooter/styles.tsx

@@ -2,6 +2,6 @@ import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 
 export const StyledMenuFooterBox = styled(Box)`
-  padding: ${(p) => p.theme.space[350]};
+  padding: ${(p) => p.theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;