@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/src/NestedMenu/NestedMenuContext.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext } from "react";
+import type { TypeNotEmptyChildren } from "../types";
+
+export interface TypeNestedMenuContext {
+  selectedMenuPath: string[];
+  setSelectedMenuId?: (id: string) => void;
+  setSelectedMenuPath?: (path: string[]) => void;
+  goBack?: () => void;
+}
+
+const defaultNestedMenuContext: TypeNestedMenuContext = {
+  selectedMenuPath: [],
+  setSelectedMenuId: () => {},
+  setSelectedMenuPath: () => {},
+  goBack: () => {},
+};
+
+export interface TypeNestedMenuProviderProps extends TypeNestedMenuContext {
+  children: TypeNotEmptyChildren;
+}
+
+/**
+ * NestedMenuContext factory, sets the type and the initial object
+ */
+export const NestedMenuContext = createContext<TypeNestedMenuContext>(
+  defaultNestedMenuContext
+);
+
+/**
+ * Provider Component sets the context values in the provider
+ */
+export const NestedMenuProvider = ({
+  children,
+  ...nestedMenuProps
+}: TypeNestedMenuProviderProps) => {
+  return (
+    <NestedMenuContext.Provider value={nestedMenuProps}>
+      {children}
+    </NestedMenuContext.Provider>
+  );
+};
+
+/**
+ * Utility hook for consuming NestedMenuContext
+ */
+export const useNestedMenuContext = (): TypeNestedMenuContext => {
+  const nestedMenuContextValue = useContext(NestedMenuContext);
+
+  if (nestedMenuContextValue === null) {
+    throw new Error(
+      "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
+    );
+  }
+
+  return nestedMenuContextValue;
+};

package/src/NestedMenu/NestedMenuHeader.tsx

@@ -0,0 +1,25 @@
+import { MenuHeader } from "../MenuHeader/index";
+import { useNestedMenuContext } from "./NestedMenuContext";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypeNestedMenuHeaderProps } from "./NestedMenuTypes";
+
+export const NestedMenuHeader = ({
+  backArrowLabel,
+  ...props
+}: TypeNestedMenuHeaderProps) => {
+  const { goBack, selectedMenuPath } = useNestedMenuContext();
+  const showBackArrow = selectedMenuPath.length > 1;
+  return (
+    <MenuHeader
+      leftAction={
+        showBackArrow ? (
+          <Button onClick={goBack} ariaLabel={backArrowLabel}>
+            <Icon name="arrow-left" />
+          </Button>
+        ) : undefined
+      }
+      {...props}
+    />
+  );
+};

package/src/NestedMenu/NestedMenuItem.tsx

@@ -0,0 +1,37 @@
+import { MenuItem, MenuItemActionRight } from "../MenuItem/index";
+import { useNestedMenuContext } from "./NestedMenuContext";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Box } from "@sproutsocial/seeds-react-box";
+import type { TypeNestedMenuItemProps } from "./NestedMenuTypes";
+
+export const NestedMenuItem = ({
+  children,
+  childMenuId,
+  onClick: onClickProp,
+  ...rest
+}: TypeNestedMenuItemProps) => {
+  const { setSelectedMenuId } = useNestedMenuContext();
+  // This method of passing onClick is necessary because passing undefined for onClick
+  // behaves differently from not passing anything at all.
+  const onClickProps = childMenuId
+    ? {
+        onClick: (e) => {
+          onClickProp?.(e);
+          setSelectedMenuId?.(childMenuId);
+        },
+      }
+    : {};
+
+  return (
+    <MenuItem {...onClickProps} {...rest}>
+      <Box display="flex" justifyContent="space-between">
+        {children}
+        {childMenuId && (
+          <MenuItemActionRight>
+            <Icon name="arrow-right-outline" />
+          </MenuItemActionRight>
+        )}
+      </Box>
+    </MenuItem>
+  );
+};

package/src/NestedMenu/NestedMenuTypes.ts

@@ -0,0 +1,47 @@
+import type { TypeActionMenuProps } from "../ActionMenu";
+import type { TypeMultiSelectMenuProps } from "../MultiSelectMenu";
+import type { TypeSingleSelectMenuProps } from "../SingleSelectMenu";
+import type { TypeMenuItemProps } from "../MenuItem";
+import type { TypeMenuRootProps } from "../MenuRoot";
+import type { TypeMenuHeaderProps } from "../MenuHeader";
+import type { TypeChildrenOrItems } from "../types";
+
+export interface TypeNestedMenuMapProps<
+  P,
+  I extends TypeMenuItemProps = TypeNestedMenuItemProps
+> {
+  MenuComponent: React.ComponentType<P>;
+  menuProps: Omit<P, "menuToggleElement"> & TypeChildrenOrItems<I>;
+  /** Defaults to NestedMenuHeader if not provided.
+   *  This header can be suppressed by passing null.*/
+  MenuHeaderComponent?: React.ComponentType<TypeMenuHeaderProps> | null;
+  menuHeaderProps?: Partial<TypeMenuHeaderProps>;
+}
+
+export interface TypeNestedMenuHeaderProps extends TypeMenuHeaderProps {
+  /** Localized label for the back arrow in this child menu.
+   *  Overrides the default label passed to NestedMenu. */
+  backArrowLabel?: string;
+}
+
+export interface TypeNestedMenuItemProps extends TypeMenuItemProps {
+  childMenuId?: string;
+}
+
+export interface TypeNestedMenuProps<
+  I extends TypeMenuItemProps = TypeNestedMenuItemProps
+> {
+  initialMenuId: string;
+  menuToggleElement: TypeMenuRootProps["menuToggleElement"];
+  onBackButtonClick?: (menuId: string) => void;
+  /** Sets the default localized label for the back arrow in all child menus.
+   *  This label can be overridden by including backArrowLabel in a menu's menuHeaderProps. */
+  backArrowLabel?: string;
+  /** An object of the menus and child menus to be displayed, keyed by id.*/
+  menus: {
+    [id: string]:
+      | TypeNestedMenuMapProps<TypeActionMenuProps<I>, I>
+      | TypeNestedMenuMapProps<TypeSingleSelectMenuProps<I>, I>
+      | TypeNestedMenuMapProps<TypeMultiSelectMenuProps<I>, I>;
+  };
+}

package/src/NestedMenu/__tests__/NestedMenu.test.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import {
+  NestedMenu,
+  MenuContent,
+  MenuToggleButton,
+  MenuItem,
+  MenuGroup,
+} from "../../index";
+import {
+  render,
+  screen,
+  cleanup,
+  waitFor,
+} from "@sproutsocial/seeds-react-testing-library";
+
+const menuItems = [
+  { id: "test-item-1", index: 0, label: "Item 1" },
+  { id: "test-item-2", index: 1, label: "Item 2" },
+  { id: "test-item-3", index: 2, label: "Item 3" },
+  { id: "test-item-4", index: 3, label: "Item 4" },
+];
+
+describe("NestedMenu", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("runs", () => {
+    expect(true).toBe(true);
+  });
+});

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,13 +1,11 @@
 import React from "react";
-import { useSelect, type UseSelectState } from "downshift";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
-import {
-  defaultUseSelectProps,
-  useSelectStateReducer,
-} from "../reducers/useSelectStateReducer";
-import { itemToString } from "../utils/itemToString";
-import { MenuRoot } from "../MenuRoot";
-import type { TypeDefaultItemProps } from "../types";
+import { useSelect } from "downshift";
+import type { TypeMenuItemProps } from "../MenuItem";
+import { useMenuChildren } from "../hooks/useMenuChildren";
+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";
 
 /**
@@ -19,31 +17,36 @@ import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
  * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/ActionMenu | ActionMenu}
  */
 
-export const SingleSelectMenu = ({
-  children,
+export const SingleSelectMenu = <
+  I extends TypeMenuItemProps = TypeMenuItemProps
+>({
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
   ...useSelectProps
-}: TypeSingleSelectMenuProps) => {
-  /** Get a list of items from the children */
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+}: TypeSingleSelectMenuProps<I>) => {
+  /** Get a list of menuItems from the children */
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    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,
   });
 
@@ -57,6 +60,7 @@ export const SingleSelectMenu = ({
         isOpen,
         ...useSelectProps,
         ...useSelectReturnProps,
+        ...restDefaults,
       }}
     >
       {children}

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

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