@sproutsocial/seeds-react-menu 0.2.0 → 0.2.2

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

@@ -27,7 +27,7 @@ describe("MultiSelectMenu", () => {
     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
         menuToggleElement={
@@ -70,7 +70,7 @@ 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
         menuToggleElement={
@@ -113,20 +113,22 @@ 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
         menuToggleElement={
@@ -167,27 +169,29 @@ 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
         menuToggleElement={
@@ -213,137 +217,139 @@ describe("MultiSelectMenu", () => {
       </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
-          menuToggleElement={
-            <MenuToggleButton aria-label="testable menu" role="button">
-              Testable Menu
-            </MenuToggleButton>
-          }
-        >
-          <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>
-      );
-
-      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
-          menuToggleElement={
-            <MenuToggleButton aria-label="testable menu" role="button">
-              Testable Menu
-            </MenuToggleButton>
-          }
-          defaultSelectedItems={[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(() => {
-        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/hooks/useItemsFromChildren.tsx

@@ -1,10 +1,14 @@
 import React, { type ReactNode, useMemo } from "react";
-import type { TypeItemElements } from "../types";
+import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeMenuContext } from "../MenuContext";
 
 export interface TypeUseItemsFromChildrenProps {
   children: ReactNode;
 }
+export interface TypeItemElements {
+  element: React.ReactElement<TypeMenuItemProps>;
+  parents: readonly React.ReactNode[];
+}
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
 const walkAllChildren = (
@@ -59,13 +63,12 @@ export const useItemsFromChildren = ({
     const allMenuItemElements = getAllMenuItems(children);
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
     const allMenuItems: TypeMenuContext["items"] = allMenuItemElements.map(
-      ({ element, parents }, index) => {
+      ({ element }, index) => {
         const item = {
           id: element.props.id,
           disabled: element.props.disabled,
           index,
-          element,
-          parents,
+          menuItemProps: element.props,
         };
         menuItemsMap[`${item.id}`] = item;
         return item;

package/src/index.ts

@@ -17,3 +17,4 @@ export * from "./MultiSelectMenu";
 export * from "./MenuContext";
 export * from "./hooks/useItemsFromChildren";
 export * from "./reducers/useSelectStateReducer";
+export * from "./types";

package/src/types.ts

@@ -1,13 +1,10 @@
 import type { TypeMenuItemProps } from "./MenuItem";
 
-export interface TypeItemElements {
-  element: React.ReactElement<TypeMenuItemProps>;
-  parents: readonly React.ReactNode[];
-}
-export interface TypeDefaultItemProps extends Partial<TypeItemElements> {
+export interface TypeDefaultItemProps {
   id: string;
   index: number;
   disabled?: boolean;
+  menuItemProps?: TypeMenuItemProps;
 }
 
 export type TypeNotEmptyChildren =