@sproutsocial/seeds-react-menu 0.3.0 → 0.4.0

package/src/__tests__/Menu.test.tsx

@@ -9,6 +9,8 @@ import {
   ActionMenu,
   MultiSelectMenu,
   SingleSelectMenu,
+  Autocomplete,
+  AutocompleteInput,
   MenuToggleButton,
   MenuContent,
   MenuItem,
@@ -19,19 +21,18 @@ describe("Menu", () => {
     { name: "ActionMenu", Component: ActionMenu },
     { name: "MultiSelectMenu", Component: MultiSelectMenu },
     { name: "SingleSelectMenu", Component: SingleSelectMenu },
-  ])("$name", ({ Component }) => {
+    { name: "Autocomplete", Component: Autocomplete },
+  ])("$name", ({ name, Component }) => {
+    const toggleElement = (
+      <>
+        {name === "Autocomplete" && <AutocompleteInput />}
+        <MenuToggleButton role="button" aria-label="Open Menu">
+          Open
+        </MenuToggleButton>
+      </>
+    );
     it("should render the trigger button", () => {
-      render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
-      );
+      render(<Component menuToggleElement={toggleElement}>Menu</Component>);
       const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
       expect(menuTrigger).toBeInTheDocument();
       expect(screen.queryByText("Menu")).not.toBeInTheDocument();
@@ -39,14 +40,7 @@ describe("Menu", () => {
 
     it("should default to open if initialIsOpen is true", () => {
       render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-          initialIsOpen
-        >
+        <Component menuToggleElement={toggleElement} initialIsOpen>
           Menu
         </Component>
       );
@@ -60,15 +54,7 @@ describe("Menu", () => {
 
     it("should open when trigger button is clicked", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
+        <Component menuToggleElement={toggleElement}>Menu</Component>
       );
 
       // Check that Menu is not open yet
@@ -85,15 +71,7 @@ describe("Menu", () => {
 
     it("should open when trigger button is focused and enter key pressed", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
+        <Component menuToggleElement={toggleElement}>Menu</Component>
       );
 
       // Check that Menu is not open yet
@@ -111,15 +89,7 @@ describe("Menu", () => {
 
     it("should open when trigger button is focused and space key pressed", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
+        <Component menuToggleElement={toggleElement}>Menu</Component>
       );
 
       // Check that Menu is not open yet
@@ -137,14 +107,7 @@ describe("Menu", () => {
 
     it("should close when trigger button is clicked while open", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-          initialIsOpen
-        >
+        <Component menuToggleElement={toggleElement} initialIsOpen>
           Menu
         </Component>
       );
@@ -167,11 +130,7 @@ describe("Menu", () => {
       const mockOnIsOpenChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onIsOpenChange={mockOnIsOpenChange}
           initialIsOpen
         >
@@ -199,11 +158,7 @@ describe("Menu", () => {
       const { user } = render(
         <div>
           <Component
-            menuToggleElement={
-              <MenuToggleButton role="button" aria-label="Open Menu">
-                Open
-              </MenuToggleButton>
-            }
+            menuToggleElement={toggleElement}
             onIsOpenChange={mockOnIsOpenChange}
             initialIsOpen
           >
@@ -230,11 +185,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onSelectedItemChange={mockOnSelectedItemChange}
         >
           <MenuContent>
@@ -266,11 +217,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onSelectedItemChange={mockOnSelectedItemChange}
         >
           <MenuContent>
@@ -295,14 +242,12 @@ describe("Menu", () => {
     });
 
     it("should call onSelectedItemChange when item selected with space", async () => {
+      if (name === "Autocomplete") return;
+
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onSelectedItemChange={mockOnSelectedItemChange}
         >
           <MenuContent>
@@ -330,11 +275,7 @@ describe("Menu", () => {
       const mockOnIsOpenChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onIsOpenChange={mockOnIsOpenChange}
         >
           <MenuContent>
@@ -362,11 +303,7 @@ describe("Menu", () => {
       const mockOnHighlightedIndexChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onHighlightedIndexChange={mockOnHighlightedIndexChange}
         >
           <MenuContent>
@@ -396,11 +333,7 @@ describe("Menu", () => {
       const mockStateReducer = jest.fn((state, { changes }) => changes);
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           stateReducer={mockStateReducer}
         >
           <MenuContent>
@@ -421,7 +354,7 @@ describe("Menu", () => {
       await user.keyboard("{arrowdown}{enter}");
 
       // Check that stateReducer is called
-      await waitFor(() => expect(mockStateReducer).toHaveBeenCalledTimes(4));
+      await waitFor(() => expect(mockStateReducer).toHaveBeenCalled());
     });
   });
 });

package/src/hooks/useItemsFromChildren.tsx

@@ -1,17 +1,20 @@
 import React, { type ReactNode, useMemo } from "react";
-import type { TypeMenuItemProps } from "../MenuItem";
+import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
 import type { TypeMenuContext } from "../MenuContext";
 import type { TypeMenuGroupProps } from "../MenuGroup/index";
+import type { TypeDefaultItemProps } from "../types";
 
 export interface TypeUseItemsFromChildrenProps {
   children: ReactNode;
 }
-export interface TypeItemElement {
-  element: React.ReactElement<TypeMenuItemProps>;
-  parents: readonly React.ReactNode[];
-}
-export interface TypeMenuGroupElement {
-  element: React.ReactElement<TypeMenuGroupProps>;
+export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
+export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
+
+export interface TypeMenuChildren {
+  type: "item" | "group";
+  element:
+    | React.ReactElement<TypeMenuGroupProps>
+    | React.ReactElement<TypeMenuItemProps>;
 }
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
@@ -21,7 +24,6 @@ const walkAllChildren = (
 ) => {
   const walk = (element: ReactNode, parents: readonly ReactNode[]) => {
     if (element === null || element === undefined) return;
-    // console.log("element", element);
     callback(element, parents);
     const newParents = [...parents, element];
     const children = (element as any).props?.children;
@@ -47,40 +49,81 @@ const checkIfIsElement = (element: ReactNode, name: string): boolean => {
 };
 
 const getAllMenuItems = (children: ReactNode) => {
-  const allMenuItems: TypeItemElement[] = [];
-  walkAllChildren(children, (element, parents) => {
+  const orderedElements: TypeMenuChildren[] = [];
+  walkAllChildren(children, (element) => {
     if (checkIfIsElement(element, "MenuItem")) {
-      allMenuItems.push({
-        element: element as TypeItemElement["element"],
-        parents,
+      orderedElements.push({
+        type: "item",
+        element: element as TypeItemElement,
+      });
+    } else if (checkIfIsElement(element, "MenuGroup")) {
+      orderedElements.push({
+        type: "group",
+        element: element as TypeItemElement,
       });
     }
   });
-  return allMenuItems;
+  return { orderedElements };
 };
 
 export const useItemsFromChildren = ({
   children,
 }: TypeUseItemsFromChildrenProps) => {
   const { allMenuItems, menuItemsMap } = useMemo(() => {
-    const allMenuItemElements = getAllMenuItems(children);
+    const { orderedElements } = getAllMenuItems(children);
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
-    const allMenuItems: TypeMenuContext["items"] = allMenuItemElements.map(
-      ({ element, parents }, index) => {
-        const parentMenuGroup = parents.find((parent) =>
-          checkIfIsElement(parent, "MenuGroup")
-        ) as TypeMenuGroupElement["element"];
+    const allMenuItems: TypeDefaultItemProps[] = [];
+    let index = 0;
+
+    orderedElements.forEach(({ type, element }) => {
+      if (type === "group") {
+        const menuGroup = element as TypeMenuGroupElement;
+        const items = menuGroup.props.items;
+        if (items) {
+          items.forEach((menuItem) => {
+            const item = {
+              id: menuItem.id,
+              index: index++,
+              disabled: menuItem.disabled,
+              menuItemProps: menuItem,
+              menuGroupProps: element.props,
+            };
+            allMenuItems.push(item);
+            menuItemsMap[`${item.id}`] = item;
+          });
+        } else if (menuGroup.props.children) {
+          let children = menuGroup.props.children as TypeItemElement[];
+          // If there is only one child, it will be an object. Make it an array.
+          if (!Array.isArray(children)) {
+            children = [children];
+          }
+          children.forEach((menuItem) => {
+            const item = {
+              id: menuItem.props.id,
+              index: index++,
+              disabled: menuItem.props.disabled,
+              menuItemProps: menuItem.props,
+              menuGroupProps: element.props,
+            };
+            allMenuItems.push(item);
+            menuItemsMap[`${item.id}`] = item;
+          });
+        }
+      } else {
+        // Items in groups would have already been added to the map.
+        if (menuItemsMap[`${element.props.id}`]) return;
+        const menuItem = element as TypeItemElement;
         const item = {
-          id: element.props.id,
-          disabled: element.props.disabled,
-          index,
-          menuItemProps: element.props,
-          menuGroupProps: parentMenuGroup ? parentMenuGroup.props : undefined,
+          id: menuItem.props.id,
+          index: index++,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props,
         };
+        allMenuItems.push(item);
         menuItemsMap[`${item.id}`] = item;
-        return item;
       }
-    );
+    });
+
     return { allMenuItems, menuItemsMap };
   }, [children]);
 

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./MenuToggleButton";
 export * from "./ActionMenu";
 export * from "./SingleSelectMenu";
 export * from "./MultiSelectMenu";
+export * from "./Autocomplete";
 
 // Utilities
 export * from "./MenuContext";

package/src/reducers/useComboboxStateReducer.tsx

@@ -8,12 +8,12 @@ export const useComboboxStateReducer: Required<
   const { type, changes } = actionAndChanges;
   switch (type) {
     /** If downshift is blurred by tabbing within the menu, stay open */
-    // case useCombobox.stateChangeTypes.InputBlur:
-    //   return {
-    //     ...changes,
-    //     // keep menu open on blur
-    //     isOpen: true,
-    //   };
+    case useCombobox.stateChangeTypes.InputBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true,
+      };
 
     /** Return standard change payload */
     default:
@@ -21,6 +21,9 @@ export const useComboboxStateReducer: Required<
   }
 };
 
-export const defaultUseComboboxProps = {
-  isItemDisabled: (item) => !!item.disabled,
+export const defaultUseComboboxProps: Partial<
+  UseComboboxProps<TypeDefaultItemProps>
+> = {
+  // disabling while item.hidden so that hidden items are ignored by downshift
+  isItemDisabled: (item) => Boolean(item.disabled || item.hidden),
 };

package/src/storybookUtilities/menu-storybook-components.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { useMenuContext, MenuToggleButton } from "../index";
+
+export interface TypeStyledChevronProps {
+  $isOpen?: boolean;
+}
+
+const StyledChevron = styled.div<TypeStyledChevronProps>`
+  margin-left: ${({ theme }) => theme.space[300]};
+  ${({ $isOpen }) =>
+    $isOpen &&
+    `
+		transform: rotate(-180deg);
+	`}
+  transition: transform 0.15s;
+`;
+
+interface StorybookMenuToggleButtonProps {
+  buttonText?: string;
+}
+
+export const StorybookMenuToggleButton = ({
+  buttonText,
+}: StorybookMenuToggleButtonProps) => {
+  const { isOpen } = useMenuContext();
+
+  return (
+    <MenuToggleButton appearance="secondary">
+      <Box display="flex" justifyContent="space-between">
+        {buttonText ? buttonText : <span>Select book</span>}
+        <StyledChevron $isOpen={isOpen}>
+          <Icon name="chevron-down" />
+        </StyledChevron>
+      </Box>
+    </MenuToggleButton>
+  );
+};

package/src/types.ts

@@ -5,6 +5,7 @@ export interface TypeDefaultItemProps {
   id: string;
   index: number;
   disabled?: boolean;
+  hidden?: boolean;
   menuItemProps?: TypeMenuItemProps;
   menuGroupProps?: TypeMenuGroupProps;
 }