@sproutsocial/seeds-react-menu 0.1.0

package/jest.config.js

@@ -0,0 +1,12 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/**
+ * @type {import('jest').Config}
+ */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-menu",
+  setupFilesAfterEnv: ["@sproutsocial/seeds-testing/setupAfterEnv"],
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sproutsocial/seeds-react-menu",
+  "version": "0.1.0",
+  "description": "Seeds React Menu",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-checkbox": "*",
+    "@sproutsocial/seeds-react-popout": "*",
+    "@sproutsocial/seeds-react-radio": "*",
+    "@sproutsocial/seeds-react-switch": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-theme": "*",
+    "downshift": "9.0.4"
+  },
+  "devDependencies": {
+    "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.2.2",
+    "tsup": "^8.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/ActionMenu/ActionMenu.feature

@@ -0,0 +1,20 @@
+Feature: Action Menu
+
+  A simple Menu for triggering a single action from a list of actions.
+
+  Rule: API
+    Background:
+      Given an engineer is implementing a ActionMenu
+
+      Scenario: ActionMenu extends Menu
+        When Menu features are used in ActionMenu
+        Then the ActionMenu responds as a Menu would
+
+      Scenario: ActionMenu accepts a list of MenuItems
+        When an array of MenuItems is passed to the ActionMenu as children
+        Then the ActionMenu should render the MenuItems
+      
+      Scenario: ActionMenu automatically closes after an item is clicked
+        When a MenuItem is clicked
+        And the corresponding onClick executes
+        Then the ActionMenu should no longer render

package/src/ActionMenu/ActionMenu.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import {
+  useSelect,
+  type UseSelectProps,
+  type UseSelectState,
+  type UseSelectSelectedItemChange,
+} from "downshift";
+import type { TypeDefaultItemProps } from "../types";
+import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import {
+  defaultUseSelectProps,
+  useSelectStateReducer,
+} from "../reducers/useSelectStateReducer";
+import {
+  MenuRoot,
+  type TypeMenuRootProps,
+  type TypeMenuRootOwnProps,
+} from "../MenuRoot";
+import { itemToString } from "../utils/itemToString";
+
+type TypeInvalidMenuProps =
+  | "initialSelectedItem"
+  | "defaultSelectedItem"
+  | "selectedItem";
+export interface TypeActionMenuProps
+  extends TypeMenuRootOwnProps,
+    Partial<Omit<UseSelectProps<TypeDefaultItemProps>, TypeInvalidMenuProps>> {
+  children: TypeMenuRootProps["children"];
+}
+
+export const ActionMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  ...useSelectProps
+}: TypeActionMenuProps) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+
+  // Manually fire the onClick handler when Enter or Space is pressed
+  const handleStateChange = (
+    changes: UseSelectSelectedItemChange<TypeDefaultItemProps>
+  ) => {
+    const { selectedItem } = changes;
+
+    // if selectedItem is disabled do nothing
+    if (selectedItem.element?.props?.disabled) {
+      return;
+    }
+
+    // Listen for Enter or Space key
+    if (
+      changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter ||
+      changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton
+    ) {
+      // Determine if Enter key was pressed
+      const isEnterKeyDown =
+        changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
+
+      // selectedItem props
+      const selectedItemProps = selectedItem.element?.props;
+
+      // Create a synthetic event to pass into the onClick
+      const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
+        key: isEnterKeyDown ? "Enter" : " ",
+        code: isEnterKeyDown ? "Enter" : "Space",
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+
+      // Manually call the onClick handler with a simulated event
+      // Cast it to React.MouseEvent to match onClick expectations
+      selectedItemProps?.onClick?.(
+        syntheticKeyboardEvent as unknown as React.MouseEvent<HTMLElement>
+      );
+    }
+  };
+
+  const { isOpen, ...useSelectReturnProps } = useSelect({
+    ...defaultUseSelectProps,
+    items: allMenuItems,
+    itemToString,
+    onSelectedItemChange: handleStateChange,
+    stateReducer: (state, actionAndChanges) => {
+      let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      newState = useSelectStateReducer(state, actionAndChanges);
+      return externalStateReducer
+        ? externalStateReducer(state, {
+            ...actionAndChanges,
+            changes: newState,
+          })
+        : newState;
+    },
+    ...useSelectProps,
+  });
+
+  return (
+    <MenuRoot
+      {...{
+        isListbox: false,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        ...useSelectProps,
+        ...useSelectReturnProps,
+      }}
+    >
+      {children}
+    </MenuRoot>
+  );
+};
+
+export default ActionMenu;

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

@@ -0,0 +1,99 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@sproutsocial/seeds-react-testing-library";
+import { ActionMenu } from "../ActionMenu";
+import { MenuContent, MenuItem, MenuToggleButton } from "../../index";
+
+describe("ActionMenu", () => {
+  it.skip("extends Menu", () => {
+    // run shared tests for all menus
+  });
+
+  it("should render the MenuItems when provided as children", async () => {
+    render(
+      <ActionMenu
+        triggerElement={<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();
+  });
+
+  it("should close after a MenuItem is clicked", async () => {
+    const item1MockClick = jest.fn();
+    render(
+      <ActionMenu
+        triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+      >
+        <MenuContent>
+          <MenuItem id="test-item-1" onClick={item1MockClick}>
+            Item 1
+          </MenuItem>
+          <MenuItem id="test-item-2">Item 2</MenuItem>
+        </MenuContent>
+      </ActionMenu>
+    );
+
+    const toggleBtn = screen.getByRole("button", { name: "Test Menu" });
+    fireEvent.click(toggleBtn);
+
+    await waitFor(() => expect(screen.getByRole("menu")).toBeVisible());
+
+    const item1 = screen.getByRole("menuitem", { name: "Item 1" });
+    expect(item1).toBeVisible();
+    fireEvent.click(item1);
+
+    await waitFor(() => {
+      expect(item1MockClick).toHaveBeenCalled();
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+
+  // TODO: Should be fixed after onClick bug fixed on menu items
+  it.skip("should close after a MenuItem is accessed by the keyboard", async () => {
+    const item1MockClick = jest.fn();
+    const { user } = render(
+      <ActionMenu
+        triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+      >
+        <MenuContent>
+          <MenuItem id="test-item-1" onClick={item1MockClick}>
+            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());
+
+    await user.keyboard("{arrowdown}{enter}");
+
+    await waitFor(() => {
+      expect(item1MockClick).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/ActionMenu/__tests__/ActionMenu.typetest.tsx

@@ -0,0 +1,73 @@
+import { ActionMenu, MenuContent, MenuHeader, MenuFooter } from "../../index";
+
+export const ActionMenuTypeTest = () => (
+  <>
+    {/* Valid ActionMenu with minimal required props */}
+    <ActionMenu triggerElement={<>test</>}>Test</ActionMenu>
+    {/* Valid ActionMenu allows MenuContent by itself as a child */}
+    <ActionMenu triggerElement={<>test</>}>
+      <MenuContent>Test</MenuContent>
+    </ActionMenu>
+    {/* Valid ActionMenu allows multiple children without fragment */}
+    <ActionMenu triggerElement={<>test</>}>
+      <MenuHeader>Test</MenuHeader>
+      <MenuContent>Test</MenuContent>
+      <MenuFooter>Test</MenuFooter>
+    </ActionMenu>
+    {/* Valid ActionMenu accepts Downshift props and functions for useSelect other than selectedItem */}
+    <ActionMenu
+      triggerElement={<>test</>}
+      onSelectedItemChange={() => {}}
+      stateReducer={(c) => c}
+      isOpen
+    >
+      Test
+    </ActionMenu>
+    {/* Valid ActionMenu accepts Downshift props and functions for useMultipleSelection */}
+    <ActionMenu triggerElement={<>test</>}>Test</ActionMenu>
+
+    {/* @ts-expect-error - triggerElement is a required prop */}
+    <ActionMenu>Test</ActionMenu>
+    <ActionMenu
+      /* @ts-expect-error - triggerElement must be a valid react element */
+      triggerElement="test"
+    >
+      Test
+    </ActionMenu>
+    {/* @ts-expect-error - when no children provided */}
+    <ActionMenu triggerElement="test" />
+
+    <ActionMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - isOpen can't be a string */
+      isOpen="false"
+      /* @ts-expect-error - onSelectedItemChange can't be a string */
+      onSelectedItemChange="test"
+      /* @ts-expect-error - stateReducer must have a return value */
+      stateReducer={() => {}}
+    >
+      Test
+    </ActionMenu>
+    <ActionMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - selectedItem is never allowed for ActionMenu */
+      selectedItem={null}
+    >
+      Test
+    </ActionMenu>
+    <ActionMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - initialSelectedItem is never allowed for ActionMenu */
+      initialSelectedItem={null}
+    >
+      Test
+    </ActionMenu>
+    <ActionMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - defaultSelectedItem is never allowed for ActionMenu */
+      defaultSelectedItem={null}
+    >
+      Test
+    </ActionMenu>
+  </>
+);

package/src/ActionMenu/index.ts

@@ -0,0 +1 @@
+export * from "./ActionMenu";

package/src/ComboBox/ComboBox.feature

@@ -0,0 +1,96 @@
+Feature: ComboBox
+
+    A component that allows users to search, select, and manage items with autocomplete functionality.
+
+    Rule: User behavior
+
+        Background:
+            Given an end user is using the component
+
+        Scenario: User can autocomplete text inputs
+            Given the ComboBox Input is focused
+            When text is typed into the input
+            Then a list of matching items is displayed
+            And an item can be selected from the list
+
+        Scenario: User can add a new value
+            Given the Combobox Input has a value
+            When new values are allowed
+            And the value has no match
+            Then a new value can be created
+
+        Scenario: User gets a warning on error
+            Given the Combobox Input has a value
+            When the value is invalid
+            Then a warning message appears
+
+        Scenario: User can select an item from the list
+            Given the ComboBox Input has text
+            When an item is selected
+            Then the item is marked as selected
+            And the input reflects the selected item
+
+        Scenario: Screen reader announces combobox
+            Given a screen reader is being used
+            When the Combobox input is focused
+            Then the screen reader announces it as a "combobox"
+
+        Scenario: Component handles input change
+            When the input value changes
+            Then the onChange callback fires
+
+        Scenario Outline: Custom open/close behavior
+            Given the ComboBox is rendered with custom behavior
+            When the `<action>` is performed
+            Then the `<handler>` is executed
+
+            Examples: Custom Behavior
+                | action        | handler  |
+                | item selected | onSelect |
+                | input focused | onFocus  |
+                | input blurred | onBlur   |
+
+        Scenario Outline: Autocomplete suggestions are displayed
+            Given the ComboBox is rendered with items
+            When <text> is typed into the input
+            Then matching <suggestion> items are displayed
+
+            Examples: Autocomplete Suggestions
+                | text       | suggestion             |
+                | ---------- | ---------------------- |
+                | app        | apple, application     |
+                | ban        | banana, band           |
+
+    Rule: API
+        Background:
+            Given an engineer is developing using the component
+
+        Scenario: ComboBox extends Menu
+            When Menu features are used in ComboBox
+            Then the ComboBox responds as a Menu would
+
+        Scenario: ComboBox accepts selected item
+            When a selected item is passed to the ComboBox
+            Then the input reflects the selected item
+
+        Scenario: ComboBox hasWarning
+            When the input's validation has an error
+            Then 'hasWarning' becomes true
+
+        Scenario Outline: ComboBox checks its types
+            When <propName> is passed a value
+            Then ComboBox expects it to be of type <propType>
+
+            Examples: Prop Types
+                | propName     | propType         |
+                | delimiters   | array of strings |
+                | value        | string           |
+                | hasFocus     | boolean          |
+                | onChange     | function         |
+                | onPaste      | function         |
+                | autoFocus    | boolean          |
+                | isInvalid    | boolean          |
+                | hasWarning   | boolean          |
+                | required     | boolean          |
+                | inputProps   | any              |
+                | autocomplete | string           |

package/src/ComboBox/TokenInput.feature

@@ -0,0 +1,84 @@
+Feature: TokenInput
+
+    A component that allows users to search, select, and manage tokens with autocomplete functionality.
+
+    Rule: User behavior
+
+        Background:
+            Given an end user is using the component
+
+        Scenario: User can add tokens
+            Given the ComboBox accepts new values
+            When text is typed
+            And a delimiter key is pressed
+            Then a new token is created from the input text
+
+        Scenario: User can not add tokens
+            Given the ComboBox does not accept new values
+            When text is typed
+            And a delimiter key is pressed
+            Then no new token is added
+
+        Scenario: User can remove tokens manually
+            Given the ComboBox has tokens
+            When token's remove button is clicked
+            Then the token is removed
+
+        Scenario: User can remove tokens with backspace
+            Given the ComboBox has tokens
+            When backspace is hit
+            Then the token is removed
+
+        Scenario: User can navigate tokens via keyboard
+            Given the ComboBox has tokens
+            And the Combobox Input has focus
+            When the tokens are navigated using arrow keys
+            Then the activeToken callback fires
+
+        Scenario: Component handles token addition
+            When a new token is added
+            Then the onAddToken callback fires
+
+        Scenario: Component handles token removal
+            Given the ComboBox is rendered with tokens
+            When a token is removed
+            Then the onRemoveToken callback fires
+
+        Scenario: Component handles token click
+            When a token is clicked
+            Then the onClickToken callback fires
+
+        Scenario: Component handles input change
+            When the input value changes
+            Then the onChange callback fires
+
+    Rule: API
+        Background:
+            Given an engineer is developing using the component
+
+        Scenario: TokenInput extends Combobox
+            When Combobox features are used in TokenInput
+            Then the TokenInput responds as a Combobox would
+
+        Scenario: ComboBox accepts tokens
+            When a token component is passed to the Combobox
+            And an item is selected
+            Then the token is rendered in the input
+
+        Scenario: ComboBox has a maximum token length
+            When 'tokenMaxLength' is set to <value>
+            Then the token string size is limited to <value>
+
+        Scenario Outline: ComboBox checks its types
+            When <propName> is passed a value
+            Then ComboBox expects it to be of type <propType>
+
+            Examples: Prop Types
+                | activeToken    | string                                                                            |
+                | tokens         | array of { id: string, iconName?: EnumIconNames, value: string, valid?: boolean } |
+                | onChangeTokens | function                                                                          |
+                | onAddToken     | function                                                                          |
+                | onRemoveToken  | function                                                                          |
+                | onClickToken   | function                                                                          |
+                | maxLength      | number                                                                            |
+                | tokenMaxLength | number                                                                            |

package/src/MenuContent/MenuContent.tsx

@@ -0,0 +1,28 @@
+import type { TypeMenuContentProps } from "./MenuContentTypes";
+import { StyledMenuContent } from "./styles";
+import { useMenuContext } from "../MenuContext";
+
+const MenuContent = ({
+  id = "menu_content",
+  children,
+  ...rest
+}: TypeMenuContentProps) => {
+  const { getToggleButtonProps } = useMenuContext();
+
+  return (
+    <StyledMenuContent
+      autoFocus
+      id={id}
+      tabIndex={0}
+      // apply onKeyDown logic for downshift keyboard accessibility support
+      onKeyDown={getToggleButtonProps?.().onKeyDown}
+      // apply active descendent updates to container for proper accessibility
+      aria-activedescendant={getToggleButtonProps?.()["aria-activedescendant"]}
+      {...rest}
+    >
+      {children}
+    </StyledMenuContent>
+  );
+};
+
+export { MenuContent };

package/src/MenuContent/MenuContentTypes.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ReactNode, RefObject } from "react";
+
+export interface TypeMenuContentProps
+  extends React.ButtonHTMLAttributes<HTMLUListElement> {
+  children: ReactNode;
+}

package/src/MenuContent/__tests__/MenuContent.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { MenuFooter, MenuHeader, MenuContent } from "../../index";
+import Button from "@sproutsocial/seeds-react-button";
+
+describe("MenuContent API", () => {
+  it("should render correctly with default props", () => {
+    render(
+      <MenuContent data-testid="menu-content">
+        <div>Test Child</div>
+      </MenuContent>
+    );
+    const menuContent = screen.getByTestId("menu-content");
+    expect(menuContent).toBeInTheDocument();
+    expect(menuContent).toHaveAttribute("tabIndex", "0");
+  });
+});
+
+describe("MenuContent Behavior", () => {
+  it("focus should move properly through menu", async () => {
+    const { user } = render(
+      <div>
+        <MenuHeader>
+          <Button data-testid="menu-header-button" onClick={() => {}}>
+            Button
+          </Button>
+        </MenuHeader>
+        <MenuContent data-testid="menu-content">
+          <div>Test Child</div>
+        </MenuContent>
+        <MenuFooter>
+          <Button data-testid="menu-footer-button" onClick={() => {}}>
+            Button 2
+          </Button>
+        </MenuFooter>
+      </div>
+    );
+
+    const menuHeaderButton = screen.getByTestId("menu-header-button");
+    const menuContent = screen.getByTestId("menu-content");
+    const menuFooterButton = screen.getByTestId("menu-footer-button");
+
+    //Tabs from container into header
+    await user.tab();
+    expect(menuHeaderButton).toHaveFocus();
+
+    //Tabs from header onto content
+    await user.tab();
+    expect(menuContent).toHaveFocus();
+
+    //Tabs back from content to header
+    await user.tab({ shift: true });
+    expect(menuHeaderButton).toHaveFocus();
+
+    //Tabs twice to go from header to footer
+    await user.tab();
+    await user.tab();
+    expect(menuFooterButton).toHaveFocus();
+  });
+});

package/src/MenuContent/__tests__/MenuContent.typetest.tsx

@@ -0,0 +1,18 @@
+import { MenuContent, MenuItem } from "../../index";
+
+export const MenuContentTypeTest = () => (
+  <>
+    {/* MenuContent allows children */}
+    <MenuContent>Test</MenuContent>
+    {/* MenuContent allows children with MenuItems */}
+    <MenuContent>
+      <MenuItem id="1">Test 1</MenuItem>
+      <MenuItem id="2">Test 2</MenuItem>
+    </MenuContent>
+    {/* MenuContent accepts ul props */}
+    <MenuContent aria-label="test label">Test</MenuContent>
+
+    {/* @ts-expect-error - MenuContent requires children */}
+    <MenuContent />
+  </>
+);

package/src/MenuContent/index.tsx

@@ -0,0 +1,2 @@
+export { MenuContent } from "./MenuContent";
+export type { TypeMenuContentProps } from "./MenuContentTypes";