@sproutsocial/seeds-react-menu 0.1.0 → 0.2.1

package/src/MenuRoot/__tests__/MenuRoot.typetest.tsx

@@ -4,20 +4,20 @@ import { MenuRoot, MenuContent, MenuHeader, MenuFooter } from "../../index";
 export const MenuRootTypeTest = () => (
   <>
     {/* Valid MenuRoot with minimal required props */}
-    <MenuRoot triggerElement={<>test</>}>Test</MenuRoot>
+    <MenuRoot menuToggleElement={<>test</>}>Test</MenuRoot>
     {/* Valid MenuRoot allows MenuContent by itself as a child */}
-    <MenuRoot triggerElement={<>test</>}>
+    <MenuRoot menuToggleElement={<>test</>}>
       <MenuContent>Test</MenuContent>
     </MenuRoot>
     {/* Valid MenuRoot allows multiple children without fragment */}
-    <MenuRoot triggerElement={<>test</>}>
+    <MenuRoot menuToggleElement={<>test</>}>
       <MenuHeader>Test</MenuHeader>
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </MenuRoot>
     {/* Valid MenuRoot accepts Downshift props and functions for useSelect */}
     <MenuRoot
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       onSelectedItemChange={() => {}}
       selectItem={() => {}}
       selectedItem={null}
@@ -30,7 +30,7 @@ export const MenuRootTypeTest = () => (
     </MenuRoot>
     {/* Valid MenuRoot accepts Downshift props and functions for useMultipleSelection */}
     <MenuRoot
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       onSelectedItemsChange={() => {}}
       selectedItems={[]}
       multiSelectStateReducer={(c) => c}
@@ -40,19 +40,19 @@ export const MenuRootTypeTest = () => (
       Test
     </MenuRoot>
 
-    {/* @ts-expect-error - triggerElement is a required prop */}
+    {/* @ts-expect-error - menuToggleElement is a required prop */}
     <MenuRoot>Test</MenuRoot>
     <MenuRoot
-      /* @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
     </MenuRoot>
     {/* @ts-expect-error - when no children provided */}
-    <MenuRoot triggerElement="test" />
+    <MenuRoot menuToggleElement="test" />
 
     <MenuRoot
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */
       isOpen="false"
       /* @ts-expect-error - onSelectedItemChange can't be a string */

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

@@ -34,6 +34,14 @@ const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
   return changes;
 };
 
+/**
+ * @link https://seeds.sproutsocial.com/components/multiselect-menu/
+ *
+ * @description A MultiSelectMenu allows multiple {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
+ */
+
 export const MultiSelectMenu = ({
   children,
   stateReducer: externalStateReducer,
@@ -74,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,
@@ -91,7 +100,6 @@ export const MultiSelectMenu = ({
         case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
-        case useSelect.stateChangeTypes.ToggleButtonBlur:
           if (!newSelectedItem) break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
             removeSelectedItem(newSelectedItem);

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx

@@ -1,17 +1,16 @@
+/* eslint-disable testing-library/prefer-find-by */
+/* eslint-disable testing-library/no-wait-for-multiple-assertions */
 /* eslint-disable testing-library/no-unnecessary-act */
 import {
   MultiSelectMenu,
   MenuContent,
   MenuToggleButton,
-  MenuItemSelectable,
+  MenuItem,
   MenuGroup,
 } from "../../index";
 import {
   render,
   screen,
-  fireEvent,
-  act,
-  cleanup,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
 
@@ -23,14 +22,10 @@ const menuItems = [
 ];
 
 describe("MultiSelectMenu", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("should render the menuItemSelectables when provided as children", async () => {
+  it("should render the MenuItems when provided as children", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -39,9 +34,9 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable key={item.id} id={item.id} label={item.label}>
+              <MenuItem key={item.id} id={item.id} label={item.label}>
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -70,10 +65,10 @@ describe("MultiSelectMenu", () => {
     });
   });
 
-  xit("should allow for multiple items to be selected", async () => {
+  it("should allow for multiple items to be selected", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -82,14 +77,14 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 data-testid={item.id}
                 label={item.label}
               >
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -113,23 +108,25 @@ describe("MultiSelectMenu", () => {
 
     await waitFor(() => {
       // Check that the first item is selected
-      expect(item1).toHaveAttribute("aria-checked", "true");
+      expect(item1).toHaveAttribute("aria-selected", "true");
     });
 
     // Select second item
-    // TODO: can this be done in the same act as the first item?
     await user.click(item2);
 
     await waitFor(() => {
       // Check that the second item is selected
-      expect(item2).toHaveAttribute("aria-checked", "true");
+      expect(item2).toHaveAttribute("aria-selected", "true");
     });
+
+    // check that first item is still selected
+    expect(item1).toHaveAttribute("aria-selected", "true");
   });
 
-  xit("Should maintain selected state when closed and reopened", async () => {
+  it("Should maintain selected state when closed and reopened", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -138,14 +135,14 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 data-testid={item.id}
                 label={item.label}
               >
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -167,30 +164,32 @@ describe("MultiSelectMenu", () => {
     await user.click(item1);
 
     await waitFor(() => {
-      expect(item1).toHaveAttribute("aria-checked", "true");
+      expect(item1).toHaveAttribute("aria-selected", "true");
     });
 
     // Close Menu (MultiSelect does not close automatically)
     await user.click(toggleButton);
 
     // Make sure the menu is closed
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    );
 
     // Open menu again
     await user.click(toggleButton);
 
-    await waitFor(() => {
-      // Make sure the menu is open
-      expect(screen.getByRole("listbox")).toBeInTheDocument();
-      // Make sure the item is still selected
-      expect(item1).toHaveAttribute("aria-checked", "true");
-    });
+    // Make sure the menu is open
+    await waitFor(() =>
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    );
+    // Make sure the item is still selected
+    expect(item1).toHaveAttribute("aria-selected", "true");
   });
 
-  xit("should be able to navigate using the keyboard", async () => {
+  it("should be able to navigate using the keyboard", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -199,151 +198,153 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 data-testid={item.id}
                 label={item.label}
               >
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
       </MultiSelectMenu>
     );
 
-    const toggleButton = screen.getByRole("button", { name: "testable menu" });
+    // Open Menu
+    await user.keyboard("{Tab}{Enter}");
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
 
-    // Open Menu;
-    fireEvent.focus(toggleButton);
-    await user.keyboard("{Enter}");
+    // Check that the first item is highlighted
     await user.keyboard("{ArrowDown}");
-
-    await waitFor(() => {
-      // Check that the first item is highlighted
-      const item1 = screen.getByRole("option", { name: "Item 1" });
-      expect(item1).toHaveFocus();
-    });
+    expect(screen.getByRole("listbox")).toHaveAttribute(
+      "aria-activedescendant",
+      screen.getByRole("option", { name: "Item 1" }).getAttribute("id")
+    );
 
     // Select the first item
     await user.keyboard("{Enter}");
-    await user.keyboard("{ArrowDown}");
+
     // select the second item
+    await user.keyboard("{ArrowDown}");
     await user.keyboard(" ");
 
+    // Check that the second item is highlighted and selected
+    const item2 = screen.getByRole("option", { name: "Item 2" });
+    await waitFor(() => expect(item2).toHaveAttribute("aria-selected", "true"));
+    expect(screen.getByRole("listbox")).toHaveAttribute(
+      "aria-activedescendant",
+      item2.getAttribute("id")
+    );
+
+    // Check that the first item is still selected
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+    expect(item1).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("Should work with a initially selected items", async () => {
+    const { user } = render(
+      <MultiSelectMenu
+        menuToggleElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+        selectedItems={[menuItems[1], menuItems[2]]}
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItem
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    const toggleButton = screen.getByRole("button", {
+      name: "testable menu",
+    });
+
+    // Open Menu
+    await user.click(toggleButton);
+
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+    const item2 = screen.getByRole("option", { name: "Item 2" });
+    const item3 = screen.getByRole("option", { name: "Item 3" });
+
     await waitFor(() => {
-      // Check that the second item is focused and selected
-      const item2 = screen.getByRole("option", { name: "Item 2" });
-      expect(item2).toHaveFocus();
-      expect(item2).toBeChecked();
-
-      // Check that the first item is still selected
-      const item1 = screen.getByRole("menuitem", { name: "Item 1" });
-      expect(item1).toBeChecked();
+      expect(item1).not.toHaveStyle("pointer-events: none");
     });
 
-    xit("should stay open after menu item selection", async () => {
-      const { user } = render(
-        <MultiSelectMenu
-          triggerElement={
-            <MenuToggleButton aria-label="testable menu" role="button">
-              Testable Menu
-            </MenuToggleButton>
-          }
-        >
-          <MenuContent>
-            <MenuGroup>
-              {menuItems.map((item) => (
-                <MenuItemSelectable
-                  key={item.id}
-                  id={item.id}
-                  data-testid={item.id}
-                  label={item.label}
-                >
-                  {item.label}
-                </MenuItemSelectable>
-              ))}
-            </MenuGroup>
-          </MenuContent>
-        </MultiSelectMenu>
-      );
-
-      const menuContentContainer = screen.queryByRole("listbox");
-
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-
-      const toggleButton = screen.getByRole("button", {
-        name: "testable menu",
-      });
-
-      // Open Menu
-      await user.click(toggleButton);
-
-      const item1 = screen.getByRole("option", { name: "Item 1" });
-
-      await waitFor(() => {
-        expect(item1).not.toHaveStyle("pointer-events: none");
-      });
-
-      // Select Item 1
-      await user.click(item1);
-
-      await waitFor(() => {
-        expect(menuContentContainer).toBeInTheDocument();
-      });
+    // Check that the first item is not selected
+    expect(item1).not.toHaveAttribute("aria-selected", "true");
+    // Check that the second item is selected
+    expect(item2).toHaveAttribute("aria-selected", "true");
+    // Check that the third item is selected
+    expect(item3).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("should stay open after menu item selection", async () => {
+    const mockSelectedItemsChange = jest.fn();
+    const { user } = render(
+      <MultiSelectMenu
+        menuToggleElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+        onSelectedItemsChange={mockSelectedItemsChange}
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItem
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    const toggleButton = screen.getByRole("button", {
+      name: "testable menu",
     });
 
-    xit("Should work with a initially selected items", async () => {
-      const { user } = render(
-        <MultiSelectMenu
-          triggerElement={
-            <MenuToggleButton aria-label="testable menu" role="button">
-              Testable Menu
-            </MenuToggleButton>
-          }
-          defaultSelectedItems={[menuItems[1], menuItems[2]]}
-        >
-          <MenuContent>
-            <MenuGroup>
-              {menuItems.map((item) => (
-                <MenuItemSelectable
-                  key={item.id}
-                  id={item.id}
-                  data-testid={item.id}
-                  label={item.label}
-                >
-                  {item.label}
-                </MenuItemSelectable>
-              ))}
-            </MenuGroup>
-          </MenuContent>
-        </MultiSelectMenu>
-      );
-
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-
-      const toggleButton = screen.getByRole("button", {
-        name: "testable menu",
-      });
-
-      // Open Menu
-      await user.click(toggleButton);
-
-      const item1 = screen.getByRole("option", { name: "Item 1" });
-      const item2 = screen.getByRole("option", { name: "Item 2" });
-      const item3 = screen.getByRole("option", { name: "Item 3" });
-
-      await waitFor(() => {
-        expect(item1).not.toHaveStyle("pointer-events: none");
-      });
-
-      act(() => {
-        // Check that the second item is selected
-        expect(item2).toHaveAttribute("aria-checked", "true");
-        // Check that the third item is selected
-        expect(item3).toHaveAttribute("aria-checked", "true");
-      });
+    // Open Menu
+    await user.click(toggleButton);
+
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+
+    await waitFor(() => {
+      expect(item1).not.toHaveStyle("pointer-events: none");
     });
+
+    // Select Item 1
+    await user.click(item1);
+
+    // Check that the menu is still open
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
+
+    // Check that callback called
+    expect(mockSelectedItemsChange).toHaveBeenCalledTimes(1);
   });
 });

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.typetest.tsx

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

package/src/SingleSelectMenu/SingleSelectMenu.feature

@@ -10,6 +10,17 @@ Feature: Single Select Menu
         When an item is selected
         Then a selectedItem is set
 
+			Scenario: SingleSelectMenu remains open when interacting with the footer
+        Given the menu has a footer
+        And the footer contains an interactive element
+        When an interactive element in the footer is clicked
+        Then the menu will remain open
+
+			Scenario: SingleSelectMenu closes when a selection is made
+        Given the menu is using the built in behavior
+        When a menu item is selected
+        Then the menu will close
+
   Rule: API
     Background:
       Given an engineer is implementing a SingleSelectMenu

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -10,6 +10,15 @@ import { MenuRoot } from "../MenuRoot";
 import type { TypeDefaultItemProps } from "../types";
 import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
 
+/**
+ * @link https://seeds.sproutsocial.com/components/singleselect-menu/
+ *
+ * @description A SingleSelectMenu allows a single selection of a {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItem} from a list or groups or lists.
+ *
+ * **To trigger actions from a menu:**
+ * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/ActionMenu | ActionMenu}
+ */
+
 export const SingleSelectMenu = ({
   children,
   stateReducer: externalStateReducer,
@@ -27,6 +36,7 @@ export const SingleSelectMenu = ({
     itemToString,
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      // eslint-disable-next-line react-hooks/rules-of-hooks, prefer-const
       newState = useSelectStateReducer(state, actionAndChanges);
       return externalStateReducer
         ? externalStateReducer(state, {