@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -28,10 +28,13 @@
     "@sproutsocial/seeds-react-switch": "^1.2.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
     "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-token-input": "^1.0.1",
+    "@sproutsocial/seeds-react-utilities": "^4.1.0",
     "downshift": "9.0.4",
     "motion": "^11.11.17"
   },
   "devDependencies": {
+    "@sproutsocial/seeds-react-tooltip": "^1.0.1",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/ActionMenu/ActionMenu.stories.tsx

@@ -0,0 +1,426 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon, type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+import { Label } from "@sproutsocial/seeds-react-label";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import {
+  ActionMenu,
+  MenuContent,
+  MenuFooter,
+  MenuGroup,
+  MenuHeader,
+  MenuItem,
+  MenuSearchInput,
+  type TypeActionMenuProps,
+} from "../index";
+
+const StyledList = styled.ul`
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  width: 240px;
+
+  li {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 4px 0px 4px 0px;
+    justify-content: left;
+  }
+`;
+type ActionMenuStoryArgs = TypeActionMenuProps & {
+  "Trigger Text"?: string;
+  "Trigger Appearance"?: "primary" | "secondary";
+  icons: Array<string>;
+};
+type Story = StoryObj<ActionMenuStoryArgs>;
+
+const meta: Meta<ActionMenuStoryArgs> = {
+  title: "Under Development/ActionMenu",
+  component: ActionMenu,
+  argTypes: {
+    "Trigger Appearance": {
+      options: ["primary", "secondary"],
+      control: { type: "select" },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+const handleOnClick = (e: React.MouseEvent<HTMLElement>, itemName: string) => {
+  action(`${itemName}`)(e);
+};
+
+export const ActionMenuSimple: Story = {
+  name: "Simple Action Menu",
+  args: {
+    "Trigger Text": "ActionMenu",
+    "Trigger Appearance": "secondary",
+  },
+  render: (args) => {
+    return (
+      <ActionMenu
+        {...args}
+        menuToggleElement={
+          <StorybookMenuToggleButton
+            buttonText={args["Trigger Text"]}
+            buttonProps={{ appearance: args["Trigger Appearance"] }}
+          />
+        }
+      >
+        <MenuContent>
+          <MenuGroup id="actions">
+            <MenuItem onClick={(e) => handleOnClick(e, "Compose")} id="Compose">
+              Compose
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "View Messages")}
+              id="View Messages"
+            >
+              View Messages
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Analyze post")}
+              id="Analyze post"
+            >
+              Analyze post
+            </MenuItem>
+            <MenuItem
+              href="https://sproutsocial.com"
+              target="_blank"
+              id="settings"
+            >
+              This Opens a Link
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};
+
+const itemsAsProp = [
+  {
+    id: "compose",
+    onClick: (e) => handleOnClick(e, "Compose"),
+    children: "Compose",
+  },
+  {
+    id: "view-messages",
+    onClick: (e) => handleOnClick(e, "View Messages"),
+    children: "View Messages",
+  },
+  {
+    id: "analyze-post",
+    onClick: (e) => handleOnClick(e, "Analyze post"),
+    children: "Analyze post",
+  },
+];
+export const ActionMenuWithItemsAsProps: Story = {
+  name: "With Items as Props",
+  args: {
+    "Trigger Text": "ActionMenu",
+    "Trigger Appearance": "secondary",
+  },
+  render: (args) => {
+    return (
+      <ActionMenu
+        {...args}
+        menuToggleElement={
+          <StorybookMenuToggleButton
+            buttonText={args["Trigger Text"]}
+            buttonProps={{ appearance: args["Trigger Appearance"] }}
+          />
+        }
+        menuItems={itemsAsProp}
+      />
+    );
+  },
+};
+
+export const ActionMenuWithIcons: Story = {
+  name: "Using Icons",
+  args: {
+    "Trigger Text": "ActionMenu",
+    icons: [
+      "pencil-to-square-outline",
+      "envelope-outline",
+      "chart-area-outline",
+    ],
+    "Trigger Appearance": "secondary",
+  },
+  render: (args) => {
+    return (
+      <ActionMenu
+        {...args}
+        menuToggleElement={
+          <StorybookMenuToggleButton
+            buttonText={args["Trigger Text"]}
+            buttonProps={{ appearance: args["Trigger Appearance"] }}
+          />
+        }
+      >
+        <MenuContent>
+          <MenuGroup id="actions">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Compose")}
+              key={0}
+              id="Compose"
+            >
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                Compose
+                <Icon name={args["icons"][0] as TypeIconName} />
+              </Box>
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "View Messages")}
+              key={1}
+              id="View Messages"
+            >
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                View Messages
+                <Icon name={args["icons"][1] as TypeIconName} />
+              </Box>
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Analyze post")}
+              key={2}
+              id="Analyze post"
+            >
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                Analyze Post
+                <Icon name={args["icons"][2] as TypeIconName} />
+              </Box>
+            </MenuItem>
+          </MenuGroup>
+          <MenuGroup id="settings">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Settings")}
+              key={3}
+              id="Settings"
+            >
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                Settings
+                <Icon name="gear-outline" />
+              </Box>
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};
+
+export const ActionMenuWithHeaderFooter: Story = {
+  name: "With Header & Footer",
+  args: {
+    "Trigger Text": "ActionMenu",
+    "Trigger Appearance": "secondary",
+  },
+  render: (args) => {
+    const [highContrast, setHighContrast] = React.useState(false);
+    const [darkMode, setDarkMode] = React.useState(false);
+    return (
+      <ActionMenu
+        {...args}
+        menuToggleElement={
+          <StorybookMenuToggleButton
+            buttonText={args["Trigger Text"]}
+            buttonProps={{ appearance: args["Trigger Appearance"] }}
+          />
+        }
+      >
+        <MenuHeader title="Select one of the following" />
+        <MenuContent>
+          <MenuGroup id="actions">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Compose")}
+              key={0}
+              id="Compose"
+            >
+              Compose
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "View Messages")}
+              key={1}
+              id="View Messages"
+            >
+              View Messages
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Analyze post")}
+              key={2}
+              id="Analyze post"
+            >
+              Analyze post
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+        <MenuFooter>
+          <StyledList>
+            <li>
+              <Label htmlFor="menuSwitch1">High contrast</Label>
+              <Switch
+                mr={300}
+                id="menuSwitch1"
+                checked={highContrast}
+                onClick={() => setHighContrast(!highContrast)}
+              />
+            </li>
+            <li>
+              <Label htmlFor="menuSwitch2">Dark mode</Label>
+              <Switch
+                mr={300}
+                id="menuSwitch2"
+                checked={darkMode}
+                onClick={() => setDarkMode(!darkMode)}
+              />
+            </li>
+            <li>
+              <Link href="#" fontSize={200}>
+                Manage settings
+              </Link>
+            </li>
+          </StyledList>
+        </MenuFooter>
+      </ActionMenu>
+    );
+  },
+};
+
+export const ActionMenuControlled: Story = {
+  name: "Controlled State",
+  args: {
+    "Trigger Text": "ActionMenu",
+    "Trigger Appearance": "secondary",
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    return (
+      <ActionMenu
+        {...args}
+        isOpen={isOpen}
+        onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+        menuToggleElement={
+          <StorybookMenuToggleButton
+            buttonText={args["Trigger Text"]}
+            buttonProps={{ appearance: args["Trigger Appearance"] }}
+          />
+        }
+      >
+        <MenuContent>
+          <MenuGroup id="actions">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Compose")}
+              key={0}
+              id="Compose"
+            >
+              Compose
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "View Messages")}
+              key={1}
+              id="View Messages"
+            >
+              View Messages
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Analyze post")}
+              key={2}
+              id="Analyze post"
+            >
+              Analyze post
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};
+
+export const ActionMenuWithSearch: Story = {
+  name: "Action Menu with Search",
+  args: {
+    "Trigger Text": "ActionMenu",
+    "Trigger Appearance": "secondary",
+  },
+  render: (args) => {
+    return (
+      <ActionMenu
+        itemToString={(item) => `${item?.menuItemProps?.children || ""}`}
+        menuToggleElement={
+          <StorybookMenuToggleButton
+            buttonText={args["Trigger Text"]}
+            buttonProps={{ appearance: args["Trigger Appearance"] }}
+          />
+        }
+        onStateChange={(changes) => action("onStateChange")(changes)}
+        {...(args as object)}
+      >
+        <MenuHeader>
+          <MenuSearchInput
+            id="single-select-search"
+            name="search"
+            type="search"
+            aria-label="Search Menu"
+          />
+        </MenuHeader>
+        <MenuContent>
+          <MenuGroup id="actions">
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Compose")}
+              key={0}
+              id="Compose"
+            >
+              Compose
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "View Messages")}
+              key={1}
+              id="View Messages"
+            >
+              View Messages
+            </MenuItem>
+            <MenuItem
+              onClick={(e) => handleOnClick(e, "Analyze post")}
+              key={2}
+              id="Analyze post"
+            >
+              Analyze post
+            </MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+  },
+};

package/src/ActionMenu/ActionMenu.tsx

@@ -4,20 +4,20 @@ import {
   type UseSelectState,
   type UseSelectStateChange,
 } from "downshift";
-import type { TypeDefaultItemProps } from "../types";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
-import {
-  defaultUseSelectProps,
-  useSelectStateReducer,
-} from "../reducers/useSelectStateReducer";
-import { MenuRoot } from "../MenuRoot";
-import { itemToString } from "../utils/itemToString";
+import type { TypeInternalItemProps } from "../types";
+import { useMenuChildren } from "../hooks/useMenuChildren";
+import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
+import { reduceReducers } from "../utils/reduceReducers";
+import { itemToString } from "../utils/downshiftDefaults";
+import { MenuRoot, type TypeMenuRootProps } from "../MenuRoot";
+import type { TypeMenuItemProps } from "../MenuItem";
+
 import type { TypeActionMenuProps } from "./ActionMenuTypes";
 
 // Manually fire the onClick handler when Enter or Space is pressed
 const handleStateChange = (
-  changes: UseSelectStateChange<TypeDefaultItemProps>,
-  currentSelectedItem: UseSelectState<TypeDefaultItemProps>["selectedItem"]
+  changes: UseSelectStateChange<TypeInternalItemProps>,
+  currentSelectedItem: UseSelectState<TypeInternalItemProps>["selectedItem"]
 ) => {
   // if not Enter or Space key, do nothing
   if (
@@ -81,30 +81,33 @@ const handleStateChange = (
  * @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,
+export const ActionMenu = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent,
   stateReducer: externalStateReducer,
   ...useSelectProps
-}: TypeActionMenuProps) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+}: TypeActionMenuProps<I>) => {
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent,
+  });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false,
+  });
   const [currentSelectedItem, setCurrentSelectedItem] =
-    React.useState<UseSelectState<TypeDefaultItemProps>["selectedItem"]>(null);
+    React.useState<UseSelectState<TypeInternalItemProps>["selectedItem"]>(null);
 
   const { isOpen, ...useSelectReturnProps } = useSelect({
-    ...defaultUseSelectProps,
+    ...defaultDownshiftProps.select,
     items: allMenuItems,
     itemToString,
     onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
-    stateReducer: (state, actionAndChanges) => {
-      let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
-      newState = useSelectStateReducer(state, actionAndChanges);
-      return externalStateReducer
-        ? externalStateReducer(state, {
-            ...actionAndChanges,
-            changes: newState,
-          })
-        : newState;
-    },
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
     ...useSelectProps,
   });
 
@@ -122,6 +125,7 @@ export const ActionMenu = ({
         isOpen,
         ...useSelectProps,
         ...useSelectReturnProps,
+        ...restDefaults,
       }}
     >
       {children}

package/src/ActionMenu/ActionMenuTypes.ts

@@ -1,12 +1,17 @@
-import { type TypeMenuRootProps, type TypeMenuRootOwnProps } from "../MenuRoot";
+import { type TypeMenuRootOwnProps } from "../MenuRoot";
 import type { TypeDownshiftSelectProps } from "../MenuContext";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeChildrenOrItems } from "../types";
 
 type TypeInvalidMenuProps =
-  | "initialSelectedItem"
-  | "defaultSelectedItem"
-  | "selectedItem";
-export interface TypeActionMenuProps
+  // There is no selection state on action menus.
+  "initialSelectedItem" | "defaultSelectedItem" | "selectedItem";
+
+export interface TypeActionMenuBaseProps
   extends TypeMenuRootOwnProps,
-    Omit<TypeDownshiftSelectProps, TypeInvalidMenuProps> {
-  children: TypeMenuRootProps["children"];
-}
+    Omit<TypeDownshiftSelectProps, TypeInvalidMenuProps> {}
+
+export type TypeActionMenuProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeActionMenuBaseProps & TypeChildrenOrItems<I>;

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

@@ -4,6 +4,7 @@ import {
   render,
   screen,
   waitFor,
+  act,
 } from "@sproutsocial/seeds-react-testing-library";
 import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import { type UserEvent } from "@testing-library/user-event";
@@ -11,28 +12,6 @@ import { ActionMenu } from "../ActionMenu";
 import { MenuContent, MenuItem, MenuToggleButton } from "../../index";
 
 describe("ActionMenu", () => {
-  it("should render the MenuItems when provided as children", async () => {
-    render(
-      <ActionMenu
-        menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
-      >
-        <MenuContent>
-          <MenuItem id="test-item-1">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());
-    expect(screen.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-    expect(screen.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
-  });
-
   test.each([
     {
       action: "click",
@@ -40,23 +19,29 @@ describe("ActionMenu", () => {
         const firstItem = screen.getByRole("menuitem", {
           name: "Item 1",
         });
-        await user
-          .setup({
-            pointerEventsCheck: PointerEventsCheckLevel.Never,
-          })
-          .click(firstItem);
+        await act(async () => {
+          await user
+            .setup({
+              pointerEventsCheck: PointerEventsCheckLevel.Never,
+            })
+            .click(firstItem);
+        });
       },
     },
     {
       action: "pressed the Enter key",
       activate: async (user: UserEvent) => {
-        await user.keyboard("{ArrowDown}{Enter}");
+        await act(async () => {
+          await user.keyboard("{ArrowDown}{Enter}");
+        });
       },
     },
     {
       action: "pressed the Space key",
       activate: async (user: UserEvent) => {
-        await user.keyboard("{ArrowDown} ");
+        await act(async () => {
+          await user.keyboard("{ArrowDown} ");
+        });
       },
     },
   ])("should close after a MenuItem is $action", async ({ activate }) => {
@@ -75,7 +60,9 @@ describe("ActionMenu", () => {
     );
 
     const toggleBtn = screen.getByRole("button", { name: "Test Menu" });
-    await user.click(toggleBtn);
+    await act(async () => {
+      await user.click(toggleBtn);
+    });
 
     await waitFor(() => expect(screen.getByRole("menu")).toBeVisible());