@sproutsocial/seeds-react-menu 0.1.0 → 0.2.1

package/src/SingleSelectMenu/__tests__/SingleSelectMenu.test.tsx

@@ -4,14 +4,13 @@ import {
   render,
   screen,
   waitFor,
-  act,
 } from "@sproutsocial/seeds-react-testing-library";
 import {
   SingleSelectMenu,
   MenuToggleButton,
   MenuContent,
   MenuGroup,
-  MenuItemSelectable,
+  MenuItem,
   MenuFooter,
 } from "../../index";
 import { Switch } from "@sproutsocial/seeds-react-switch";
@@ -30,16 +29,16 @@ describe("User Behavior", () => {
     const { user } = render(
       <SingleSelectMenu
         onSelectedItemChange={checkOnChange}
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton role="button">Click me</MenuToggleButton>
         }
       >
         <MenuContent>
           <MenuGroup title="Menu Title">
             {menuItems.map(({ id, label }) => (
-              <MenuItemSelectable key={id} id={id}>
+              <MenuItem key={id} id={id}>
                 {label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -96,16 +95,16 @@ describe("User Behavior", () => {
 
     const { user } = render(
       <SingleSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton role="button">Click me</MenuToggleButton>
         }
       >
         <MenuContent>
           <MenuGroup title="Menu Title">
             {menuItems.map(({ id, label }) => (
-              <MenuItemSelectable key={id} id={id}>
+              <MenuItem key={id} id={id}>
                 {label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -129,20 +128,18 @@ describe("User Behavior", () => {
     // Check that the menu is still open
     expect(screen.getByRole("listbox")).toBeVisible();
   });
-});
 
-describe("API", () => {
-  it("should close automatically on selection", async () => {
+  it("closes automatically on selection", async () => {
     const { user } = render(
       <SingleSelectMenu
-        triggerElement={<MenuToggleButton>Click me</MenuToggleButton>}
+        menuToggleElement={<MenuToggleButton>Click me</MenuToggleButton>}
       >
         <MenuContent>
           <MenuGroup title="Menu Title">
             {menuItems.map(({ id, label }) => (
-              <MenuItemSelectable key={id} id={id}>
+              <MenuItem key={id} id={id}>
                 {label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>

package/src/SingleSelectMenu/__tests__/SingleSelectMenu.typetest.tsx

@@ -8,20 +8,20 @@ import {
 export const SingleSelectMenuTypeTest = () => (
   <>
     {/* Valid SingleSelectMenu with minimal required props */}
-    <SingleSelectMenu triggerElement={<>test</>}>Test</SingleSelectMenu>
+    <SingleSelectMenu menuToggleElement={<>test</>}>Test</SingleSelectMenu>
     {/* Valid SingleSelectMenu allows MenuContent by itself as a child */}
-    <SingleSelectMenu triggerElement={<>test</>}>
+    <SingleSelectMenu menuToggleElement={<>test</>}>
       <MenuContent>Test</MenuContent>
     </SingleSelectMenu>
     {/* Valid SingleSelectMenu allows multiple children without fragment */}
-    <SingleSelectMenu triggerElement={<>test</>}>
+    <SingleSelectMenu menuToggleElement={<>test</>}>
       <MenuHeader>Test</MenuHeader>
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </SingleSelectMenu>
     {/* Valid SingleSelectMenu accepts Downshift props and functions for useSelect */}
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       onSelectedItemChange={() => {}}
       selectedItem={null}
       stateReducer={(c) => c}
@@ -32,19 +32,19 @@ export const SingleSelectMenuTypeTest = () => (
       Test
     </SingleSelectMenu>
 
-    {/* @ts-expect-error - triggerElement is a required prop */}
+    {/* @ts-expect-error - menuToggleElement is a required prop */}
     <SingleSelectMenu>Test</SingleSelectMenu>
     <SingleSelectMenu
-      /* @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
     </SingleSelectMenu>
     {/* @ts-expect-error - when no children provided */}
-    <SingleSelectMenu triggerElement="test" />
+    <SingleSelectMenu menuToggleElement="test" />
 
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */
       isOpen="false"
       /* @ts-expect-error - onSelectedItemChange can't be a string */
@@ -57,35 +57,35 @@ export const SingleSelectMenuTypeTest = () => (
       Test
     </SingleSelectMenu>
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - onMultiSelectStateChange can't be used on SingleSelectMenu */
       onMultiSelectStateChange={() => {}}
     >
       Test
     </SingleSelectMenu>
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - selectedItems can't be used on SingleSelectMenu */
       selectedItems={[]}
     >
       Test
     </SingleSelectMenu>
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - multiSelectStateReducer can't be used on SingleSelectMenu */
       multiSelectStateReducer={(c) => c}
     >
       Test
     </SingleSelectMenu>
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - onMultiSelectStateChange can't be used on SingleSelectMenu */
       onMultiSelectStateChange={() => {}}
     >
       Test
     </SingleSelectMenu>
     <SingleSelectMenu
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - getA11yMultiStatusMessage can't be used on SingleSelectMenu */
       getA11yMultiStatusMessage={() => ""}
     >

package/src/__tests__/Menu.test.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable testing-library/no-unnecessary-act */
+import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import {
   render,
   screen,
   waitFor,
-  act,
 } from "@sproutsocial/seeds-react-testing-library";
 import {
   ActionMenu,
@@ -23,7 +23,7 @@ describe("Menu", () => {
     it("should render the trigger button", () => {
       render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -40,7 +40,7 @@ describe("Menu", () => {
     it("should default to open if initialIsOpen is true", () => {
       render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -61,7 +61,7 @@ describe("Menu", () => {
     it("should open when trigger button is clicked", async () => {
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -86,7 +86,7 @@ describe("Menu", () => {
     it("should open when trigger button is focused and enter key pressed", async () => {
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -112,7 +112,7 @@ describe("Menu", () => {
     it("should open when trigger button is focused and space key pressed", async () => {
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -138,7 +138,7 @@ describe("Menu", () => {
     it("should close when trigger button is clicked while open", async () => {
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -167,7 +167,7 @@ describe("Menu", () => {
       const mockOnIsOpenChange = jest.fn();
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -199,7 +199,7 @@ describe("Menu", () => {
       const { user } = render(
         <div>
           <Component
-            triggerElement={
+            menuToggleElement={
               <MenuToggleButton role="button" aria-label="Open Menu">
                 Open
               </MenuToggleButton>
@@ -230,7 +230,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -252,7 +252,11 @@ describe("Menu", () => {
       const menuItem = await screen.findByText("Item 1");
 
       // Use click to activate menu item
-      await user.click(menuItem);
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(menuItem);
 
       // Check that onSelectedItemChange is called
       await waitFor(() => expect(mockOnSelectedItemChange).toHaveBeenCalled());
@@ -262,7 +266,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -294,7 +298,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -326,7 +330,7 @@ describe("Menu", () => {
       const mockOnIsOpenChange = jest.fn();
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -358,7 +362,7 @@ describe("Menu", () => {
       const mockOnHighlightedIndexChange = jest.fn();
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>
@@ -392,7 +396,7 @@ describe("Menu", () => {
       const mockStateReducer = jest.fn((state, { changes }) => changes);
       const { user } = render(
         <Component
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton role="button" aria-label="Open Menu">
               Open
             </MenuToggleButton>

package/src/hooks/useItemsFromChildren.tsx

@@ -16,6 +16,7 @@ const walkAllChildren = (
     // console.log("element", element);
     callback(element, parents);
     const newParents = [...parents, element];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const children = (element as any).props?.children;
     React.Children.toArray(children).forEach((child) => {
       walk(child, newParents);
@@ -42,10 +43,7 @@ const getAllMenuItems = (children: ReactNode) => {
   const allMenuItems: TypeItemElements[] = [];
   // console.log("children", children);
   walkAllChildren(children, (element, parents) => {
-    if (
-      checkIfIsElement(element, "MenuItem") ||
-      checkIfIsElement(element, "MenuItemSelectable")
-    ) {
+    if (checkIfIsElement(element, "MenuItem")) {
       allMenuItems.push({
         element: element as TypeItemElements["element"],
         parents,

package/src/index.ts

@@ -1,6 +1,5 @@
 // Primitives
 export * from "./MenuItem";
-export * from "./MenuItemSelectable";
 export * from "./MenuHeader";
 export * from "./MenuContent";
 export * from "./MenuFooter";

package/src/menuTestingUtils.tsx

@@ -35,14 +35,17 @@ export const testDefaultContext = (
  */
 export const TestWithMenuRoot = ({
   children,
-  triggerElement,
+  menuToggleElement,
   ...props
 }: {
   children: TypeMenuRootProps["children"];
-  triggerElement: TypeMenuRootProps["triggerElement"];
-} & Partial<Omit<TypeMenuRootProps, "children" | "triggerElement">>) => {
+  menuToggleElement: TypeMenuRootProps["menuToggleElement"];
+} & Partial<Omit<TypeMenuRootProps, "children" | "menuToggleElement">>) => {
   return (
-    <MenuRoot triggerElement={triggerElement} {...testDefaultContext(props)}>
+    <MenuRoot
+      menuToggleElement={menuToggleElement}
+      {...testDefaultContext(props)}
+    >
       {children}
     </MenuRoot>
   );

package/tsconfig.json

@@ -8,5 +8,5 @@
     "verbatimModuleSyntax": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "coverage"]
 }

package/src/MenuItemSelectable/MenuItemSelectable.feature

@@ -1,99 +0,0 @@
-Feature: MenuItemSelectable
-
-  A selectable item designed to be included within a Menu component, providing different input types
-
-  Rule: User Behavior
-
-    Background:
-      Given an end user is interacting with the component
-
-    Scenario Outline: MenuItemSelectable can be checked
-      Given the MenuItemSelectable is in the unchecked state
-      And the MenuItemSelectable is focused
-      And the MenuItemSelectable is not disabled
-      When the MenuItemSelectable is triggered via <interaction>
-      Then the MenuItemSelectable should be checked
-
-      Examples: Interactions
-        | interaction            |
-        | clicking with mouse    |
-        | pressing the Enter key |
-        | pressing the Space key |
-
-    Scenario Outline: MenuItemSelectable can be unchecked
-      Given the MenuItemSelectable is in the checked state
-      And the MenuItemSelectable is focused
-      And the MenuItemSelectable is not disabled
-      When the MenuItemSelectable is triggered via <interaction>
-      Then the MenuItemSelectable should be unchecked
-
-      Examples: Interactions
-        | interaction            |
-        | clicking with mouse    |
-        | pressing the Enter key |
-        | pressing the Space key |
-
-    Scenario Outline: MenuItemSelectable is disabled
-      Given the MenuItemSelectable is disabled
-      And the MenuItemSelectable is focused
-      When the MenuItemSelectable is triggered via <interaction>
-      Then no events should fire
-
-      Examples: Interactions
-        | interaction            |
-        | clicking with mouse    |
-        | pressing the Enter key |
-        | pressing the Space key |
-
-  Rule: API
-    Background:
-      Given an engineer is developing using the component
-
-    Scenario: MenuItemSelectable accepts children
-      When <child component(s)> are provided
-      Then the MenuItemSelectable should render the <component(s)>
-
-      Examples: child components
-        | child component(s)   | component(s)  |
-        | a Link is            | Link          |
-        | a Text is            | Text          |
-        | a Icon is            | Icon          |
-        | a Text then Icon are | Text and Icon |
-        | a Icon and Text are  | Icon and Text |
-
-    Scenario Outline: MenuItemSelectable supports different input types
-      When an <inputTypeProp> is passed to the MenuItemSelectable component
-      Then the MenuItemSelectable renders with the appropriate <component> type
-
-      Examples: Input Types
-        | inputTypeProp | component |
-        | checkbox      | Checkbox  |
-        | radio         | Radio     |
-        | switch        | Switch    |
-
-    Scenario: MenuItemSelectable defaults to an icon input type
-      When the MenuItemSelectable is implemented without an inputType prop specified
-      Then the MenuItemSelectable defaults to an icon input type
-
-    Scenario: MenuItemSelectable checked state can be enabled via a prop
-      When the selected prop is set to true
-      Then the MenuItemSelectable should appear in the checked state
-
-    Scenario Outline: MenuItemSelectable validates prop types
-      When any <propName> is passed to the MenuItemSelectable
-      Then the MenuItemSelectable should check that each <propName> is of the expected <propType>
-
-      Examples: Prop Types
-        | propName  | propType                   |
-        | children  | ReactNode                  |
-        | disabled  | boolean                    |
-        | elevation | low, medium, or high       |
-        | href      | string                     |
-        | onClick   | React.MouseEventHandler    |
-        | role      | string                     |
-        | selected  | boolean                    |
-        | inputType | checkbox, radio, or switch |
-
-    Scenario: MenuItemSelectable extends MenuItem
-      When MenuItemSelectable features are used
-      Then the MenuItemSelectable responds as a MenuItem would

package/src/MenuItemSelectable/MenuItemSelectableTypes.ts

@@ -1,15 +0,0 @@
-import type { TypeMenuItemProps } from "../MenuItem";
-
-export const INPUT_TYPES = {
-  CHECKBOX: "checkbox",
-  RADIO: "radio",
-  SWITCH: "switch",
-  ICON: "icon",
-} as const;
-export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
-
-export interface TypeMenuItemSelectableProps extends TypeMenuItemProps {
-  active?: boolean;
-  inputType?: InputType;
-  inputLabel?: string;
-}