@sproutsocial/seeds-react-menu 0.5.0 → 0.6.0

package/src/NestedMenu/__tests__/NestedMenu.typetest.tsx

@@ -0,0 +1,134 @@
+import {
+  NestedMenu,
+  ActionMenu,
+  MenuToggleButton,
+  NestedMenuItem,
+  MenuItem,
+  NestedMenuContent,
+  type TypeNestedMenuItemProps,
+} from "../../index";
+
+export const NestedMenuTypeTest = () => (
+  <>
+    {/* Valid NestedMenu with all props */}
+    <NestedMenu
+      initialMenuId={"root"}
+      menuToggleElement={<button>Open</button>}
+      onBackButtonClick={(menuId) => console.log(menuId)}
+      // The menus can use different menu components and props
+      menus={{
+        root: {
+          MenuComponent: ActionMenu,
+          menuProps: {
+            // menuItems prop is supported
+            menuItems: [
+              { id: "item1", children: "Item 1", childMenuId: "child" },
+              { id: "item2", children: "Item 2" },
+            ],
+            MenuItemComponent: NestedMenuItem,
+          },
+        },
+        child: {
+          MenuComponent: ActionMenu,
+          menuProps: {
+            // children prop is supported
+            children: (
+              <NestedMenuContent>
+                <NestedMenuItem children="Child Item 1" id="child-1" />
+              </NestedMenuContent>
+            ),
+          },
+        },
+      }}
+    />
+
+    {/*Required/optional props*/}
+    <NestedMenu
+      // onBackButtonClick is not required
+      onBackButtonClick={undefined}
+      // @ts-expect-error initialMenuId is required
+      initialMenuId={undefined}
+      // @ts-expect-error menuToggleElement is required
+      menuToggleElement={undefined}
+      // @ts-expect-error menus is required
+      menus={undefined}
+    />
+
+    {/*Invalid props*/}
+    <NestedMenu
+      // @ts-expect-error initialMenuId must be a string
+      initialMenuId={3}
+      // @ts-expect-error menuToggleElement must be a React element, not a component
+      menuToggleElement={MenuToggleButton}
+      // @ts-expect-error menus must be an object, not an array
+      menus={[
+        {
+          MenuComponent: ActionMenu,
+          menuProps: {
+            menuItems: [
+              { id: "item1", children: "Item 1", childMenuId: "child" },
+              { id: "item2", children: "Item 2" },
+            ] as TypeNestedMenuItemProps[],
+          },
+        },
+      ]}
+    />
+
+    {/*menuToggleElement is not allowed on menuProps*/}
+    <NestedMenu
+      initialMenuId={"1"}
+      menuToggleElement={<span />}
+      menus={{
+        "1": {
+          MenuComponent: ActionMenu,
+          menuProps: {
+            menuItems: [
+              { id: "item1", children: "Item 1", childMenuId: "2" },
+              { id: "item2", children: "Item 2" },
+            ] as TypeNestedMenuItemProps[],
+            // @ts-expect-error menuToggleElement is not allowed here
+            menuToggleElement: <span />,
+          },
+        },
+      }}
+    />
+
+    {/*menuProps cannot have unexpected values*/}
+    <NestedMenu
+      initialMenuId={"1"}
+      menuToggleElement={<span />}
+      menus={{
+        "1": {
+          MenuComponent: ActionMenu,
+          menuProps: {
+            menuItems: [
+              { id: "item1", children: "Item 1", childMenuId: "2" },
+              { id: "item2", children: "Item 2" },
+            ] as TypeNestedMenuItemProps[],
+            // @ts-expect-error unexpected properties are not allowed
+            random: "asdf",
+          },
+        },
+      }}
+    />
+
+    {/*menuProps cannot combine menuItems and children*/}
+    <NestedMenu
+      initialMenuId={"1"}
+      menuToggleElement={<span />}
+      menus={{
+        "1": {
+          MenuComponent: ActionMenu,
+          // @ts-expect-error menuItems and children cannot be used together
+          menuProps: {
+            menuItems: [
+              { id: "item1", children: "Item 1", childMenuId: "2" },
+              { id: "item2", children: "Item 2" },
+            ] as TypeNestedMenuItemProps[],
+            children: "asdf",
+          },
+        },
+      }}
+    />
+  </>
+);

package/src/NestedMenu/index.ts

@@ -0,0 +1,5 @@
+export * from "./NestedMenu";
+export * from "./NestedMenuItem";
+export * from "./NestedMenuHeader";
+export * from "./NestedMenuTypes";
+export * from "./NestedMenuContent";

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -0,0 +1,227 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+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 { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
+import {
+  SingleSelectMenu,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuHeader,
+  MenuSearchInput,
+  type InputType,
+  type TypeInternalItemProps,
+  type TypeSingleSelectMenuBaseProps,
+  type TypeSingleSelectMenuProps,
+} from "../index";
+
+type CustomSingleSelectArgs = TypeSingleSelectMenuProps & {
+  inputType: InputType;
+};
+
+const meta: Meta<CustomSingleSelectArgs> = {
+  title: "Under Development/SingleSelectMenu",
+  component: SingleSelectMenu,
+  parameters: {
+    controls: {
+      expanded: true,
+    },
+  },
+  argTypes: {
+    inputType: {
+      options: ["radio", "checkbox", "icon", "switch", undefined],
+      control: { type: "select" },
+      description: "The type of input to use for the menu items",
+      table: {
+        category: "Menu Item Selectable",
+        defaultValue: { summary: "undefined" },
+      },
+    },
+  },
+  args: {
+    inputType: "radio",
+  },
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<CustomSingleSelectArgs>;
+
+export const SingleSelectMenuExample: Story = {
+  name: "Simple Single Select Menu",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+type permissionsObj = {
+  id: string;
+  index: number;
+  label: string;
+  iconName: TypeIconName;
+};
+
+const permissionsOptions: permissionsObj[] = [
+  { id: "no-access", index: 0, label: "No access", iconName: "circle-minus" },
+  { id: "read-only", index: 1, label: "Read only", iconName: "circle-half" },
+  {
+    id: "need-approval",
+    index: 2,
+    label: "Needs Approval",
+    iconName: "circle-half",
+  },
+  {
+    id: "can-reply",
+    index: 3,
+    label: "Can Reply",
+    iconName: "circle-half",
+  },
+  {
+    id: "full-publishing",
+    index: 4,
+    label: "Full Publishing",
+    iconName: "circle-fill",
+  },
+];
+
+export const SingleSelectMenuWithItemsAsProps: Story = {
+  name: "With Items as Props",
+  render: ({ inputType, ...args }) => {
+    const items = TEST_BOOKS.map((book) => ({
+      id: book.id,
+      children: book.title,
+      inputType,
+    }));
+    return (
+      <SingleSelectMenu
+        {...args}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        menuItems={items}
+      />
+    );
+  },
+};
+
+export const SingleSelectWithIcons: Story = {
+  name: "Single Select with icons",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) =>
+          item ? permissionsOptions[item.index].label : ""
+        }
+        menuToggleElement={
+          <StorybookMenuToggleButton buttonText="Select permissions" />
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="permissions">
+            {permissionsOptions.map(({ id, label, iconName }) => (
+              <MenuItem
+                key={id}
+                id={id}
+                display="flex"
+                alignContent="top"
+                inputType={inputType}
+              >
+                <Icon name={iconName} mr={300} />
+                {label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const SingleSelectControlled: Story = {
+  name: "Controlled State",
+  render: ({ inputType, ...args }) => {
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [selectedItem, setSelectedItem] =
+      React.useState<TypeInternalItemProps | null>(null);
+    return (
+      <SingleSelectMenu
+        isOpen={isOpen}
+        onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+        selectedItem={selectedItem}
+        onSelectedItemChange={({ selectedItem: newSelectedItem }) => {
+          setSelectedItem(newSelectedItem);
+        }}
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const SingleSelectMenuWithSearch: Story = {
+  name: "Single Select Menu with Search",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        onStateChange={(changes) => action("onStateChange")(changes)}
+        {...(args as object)}
+      >
+        <MenuHeader title="Select Book">
+          <MenuSearchInput
+            id="single-select-search"
+            name="search"
+            type="search"
+            aria-label="Search Books"
+          />
+        </MenuHeader>
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id} inputType={inputType}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { useSelect, type UseSelectState } from "downshift";
+import { useSelect } from "downshift";
+import type { TypeMenuItemProps } from "../MenuItem";
 import { useMenuChildren } from "../hooks/useMenuChildren";
-import {
-  defaultUseSelectProps,
-  useSelectStateReducer,
-} from "../reducers/useSelectStateReducer";
-import { itemToString } from "../utils/itemToString";
-import { MenuRoot } from "../MenuRoot";
-import type { TypeDefaultItemProps } from "../types";
+import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
+import { itemToString } from "../utils/downshiftDefaults";
+import { reduceReducers } from "../utils/reduceReducers";
+import { MenuRoot, type TypeMenuRootProps } from "../MenuRoot";
 import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
-import { MenuItem } from "../MenuItem/index";
 
 /**
  * @link https://seeds.sproutsocial.com/components/singleselect-menu/
@@ -20,37 +17,36 @@ import { MenuItem } from "../MenuItem/index";
  * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/ActionMenu | ActionMenu}
  */
 
-export const SingleSelectMenu = ({
+export const SingleSelectMenu = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
   children: childrenProp,
   stateReducer: externalStateReducer,
-  items,
-  MenuItemComponent = MenuItem,
+  menuItems,
+  MenuItemComponent,
   ...useSelectProps
-}: TypeSingleSelectMenuProps) => {
-  /** Get a list of items from the children */
+}: TypeSingleSelectMenuProps<I>) => {
+  /** Get a list of menuItems from the children */
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
     children: childrenProp,
-    items,
+    menuItems,
     MenuItemComponent,
   });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false,
+  });
 
   /**
    * Destructure Downshift props and call the core useSelect with items and state handler
    */
   const { isOpen, ...useSelectReturnProps } = useSelect({
-    ...defaultUseSelectProps,
+    ...defaultDownshiftProps.select,
     items: allMenuItems,
     itemToString,
-    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,
   });
 
@@ -64,6 +60,7 @@ export const SingleSelectMenu = ({
         isOpen,
         ...useSelectProps,
         ...useSelectReturnProps,
+        ...restDefaults,
       }}
     >
       {children}

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

@@ -1,10 +1,12 @@
-import type { TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeMenuRootOwnProps, TypeMenuRootProps } from "../MenuRoot";
 import type { TypeDownshiftSelectProps } from "../MenuContext";
+import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 
-interface TypeSingleSelectMenuBaseProps
+export interface TypeSingleSelectMenuBaseProps
   extends TypeMenuRootOwnProps,
-    Omit<TypeDownshiftSelectProps, "items"> {}
+    TypeDownshiftSelectProps {}
 
-export type TypeSingleSelectMenuProps = TypeSingleSelectMenuBaseProps &
-  TypeChildrenOrItems;
+export type TypeSingleSelectMenuProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeSingleSelectMenuBaseProps & TypeChildrenOrItems<I>;

package/src/SingleSelectMenu/__tests__/SingleSelectMenu.typetest.tsx

@@ -20,15 +20,15 @@ export const SingleSelectMenuTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </SingleSelectMenu>
-    {/* Valid SingleSelectMenu allows items to be passed using the items prop */}
+    {/* Valid SingleSelectMenu allows menuItems to be passed using the menuItems prop */}
     <SingleSelectMenu
       menuToggleElement={<>test</>}
-      items={[{ children: "Item Name", id: "item-1" }]}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
     />
-    {/* Valid SingleSelectMenu allows items prop to be rendered using a MenuItemComponent prop */}
+    {/* Valid SingleSelectMenu allows menuItems prop to be rendered using a MenuItemComponent prop */}
     <SingleSelectMenu
       menuToggleElement={<>test</>}
-      items={[{ children: "Item Name", id: "item-1" }]}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
       MenuItemComponent={MenuItem}
     />
     {/* Valid SingleSelectMenu accepts Downshift props and functions for useSelect */}
@@ -61,8 +61,8 @@ export const SingleSelectMenuTypeTest = () => (
     >
       Children
     </SingleSelectMenu>
-    {/* @ts-expect-error - when both children and items provided */}
-    <SingleSelectMenu menuToggleElement={<>test</>} items={[]}>
+    {/* @ts-expect-error - when both children and menuItems provided */}
+    <SingleSelectMenu menuToggleElement={<>test</>} menuItems={[]}>
       Children
     </SingleSelectMenu>
     <SingleSelectMenu

package/src/SubmenuItem/SubmenuItem.feature

@@ -0,0 +1,82 @@
+Scenario: SubmenuItem is expandable via click
+  Given a SubmenuItem is not disabled
+  When the SubmenuItem is clicked
+  Then the submenu should be displayed
+
+Scenario Outline: SubmenuItem can be expanded via keyboard
+  Given a SubmenuItem is focused
+  And the SubmenuItem is not disabled
+  When the SubmenuItem is triggered via <interaction>
+  Then the submenu should be displayed
+
+  Examples:
+    | interaction            |
+    | pressing the Enter key |
+    | pressing the Space key |
+    | pressing the Right Arrow key |
+
+Scenario Outline: SubmenuItem is disabled
+  Given a SubmenuItem is disabled
+  When the SubmenuItem is triggered via <interaction>
+  Then no events should fire
+  And the submenu should not be displayed
+
+  Examples:
+    | interaction                         |
+    | clicking                            |
+    | focusing and pressing the Enter key |
+    | focusing and pressing the Space key |
+    | focusing and pressing the Right Arrow key |
+
+Scenario: SubmenuItem displays an arrow indicator
+  Given a SubmenuItem is rendered
+  Then it should display an arrow icon indicating a submenu
+
+Scenario: SubmenuItem can be collapsed via keyboard
+  Given a SubmenuItem is expanded
+  And the submenu is displayed
+  When the Left Arrow key is pressed
+  Then the submenu should be hidden
+
+  Rule: API
+    Background:
+      Given an engineer is developing using the component
+
+  Scenario Outline: SubmenuItem accepts children
+  When <child component(s)> provided
+  Then the SubmenuItem should render the <component(s)>
+
+  Examples: child components
+    | child component(s)       | component(s)    |
+    | a Link is                | Link            |
+    | a Text is                | Text            |
+    | an Icon is               | Icon            |
+    | a Text then an Icon are  | Text and Icon   |
+    | an Icon and Text are     | Icon and Text   |
+
+Scenario Outline: A SubmenuItem accepts system props
+  When a system prop from the category <systemPropCategory> is passed a value
+  Then the SubmenuItem will have <systemPropName> styling
+
+  Examples: System Props
+    | systemPropCategory   | systemPropName |
+    | color                | bg             |
+    | border               | borderColor    |
+    | layout               | display        |
+    | position             | zIndex         |
+    | flexbox              | flex           |
+    | grid                 | gridGap        |
+    | space                | p              |
+
+Scenario Outline: SubmenuItem validates prop types
+  When any <propName> is passed to the SubmenuItem
+  Then the SubmenuItem should check that each <propName> is of the expected <propType>
+
+  Examples: Prop Types
+    | propName  | propType                   |
+    | children  | ReactNode                  |
+    | disabled  | boolean                    |
+    | elevation | low, medium, or high       |
+    | href      | string                     |
+    | onClick   | React.MouseEventHandler    |
+    | role      | string                     |