@sproutsocial/seeds-react-menu 0.5.0 → 1.0.0

package/src/MenuContext.tsx

@@ -1,9 +1,4 @@
-import React, {
-  createContext,
-  useMemo,
-  useContext,
-  type RefObject,
-} from "react";
+import React, { createContext, useMemo, useContext } from "react";
 import type {
   UseComboboxReturnValue,
   UseComboboxProps,
@@ -12,35 +7,40 @@ import type {
   UseMultipleSelectionReturnValue,
   UseMultipleSelectionProps,
 } from "downshift";
-import type { TypeDefaultItemProps, TypeNotEmptyChildren } from "./types";
+import type { TypeTokenInputProps } from "@sproutsocial/seeds-react-token-input";
+import type {
+  TypeInternalItemProps,
+  TypeNotEmptyChildren,
+  TypeDownshiftMergedInputProps,
+} from "./types";
 
 export interface TypeDownshiftComboboxProps
-  extends Partial<UseComboboxProps<TypeDefaultItemProps>> {}
+  extends Partial<UseComboboxProps<TypeInternalItemProps>> {}
 
 export interface TypeDownshiftSelectProps
-  extends Partial<UseSelectProps<TypeDefaultItemProps>> {}
+  extends Partial<UseSelectProps<TypeInternalItemProps>> {}
 
 export interface TypeDownshiftMultiSelectProps
   extends Partial<
     Omit<
-      UseMultipleSelectionProps<TypeDefaultItemProps>,
+      UseMultipleSelectionProps<TypeInternalItemProps>,
       "stateReducer" | "onStateChange" | "getA11yStatusMessage"
     >
   > {
   // Multi Select Props with conflicting useSelect prop names
-  getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeDefaultItemProps>["getA11yStatusMessage"];
-  onMultiSelectStateChange?: UseMultipleSelectionProps<TypeDefaultItemProps>["onStateChange"];
-  multiSelectStateReducer?: UseMultipleSelectionProps<TypeDefaultItemProps>["stateReducer"];
+  getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeInternalItemProps>["getA11yStatusMessage"];
+  onMultiSelectStateChange?: UseMultipleSelectionProps<TypeInternalItemProps>["onStateChange"];
+  multiSelectStateReducer?: UseMultipleSelectionProps<TypeInternalItemProps>["stateReducer"];
 }
 
 export interface TypeDownshiftComboboxReturnValue
-  extends Partial<UseComboboxReturnValue<TypeDefaultItemProps>> {}
+  extends Partial<UseComboboxReturnValue<TypeInternalItemProps>> {}
 
 export interface TypeDownshiftSelectReturnValue
-  extends Partial<UseSelectReturnValue<TypeDefaultItemProps>> {}
+  extends Partial<UseSelectReturnValue<TypeInternalItemProps>> {}
 
 export interface TypeDownshiftMultiSelectReturnValue
-  extends Partial<UseMultipleSelectionReturnValue<TypeDefaultItemProps>> {}
+  extends Partial<UseMultipleSelectionReturnValue<TypeInternalItemProps>> {}
 
 type TypeDonwshiftSharedReturnValue =
   | "getLabelProps"
@@ -52,7 +52,21 @@ type TypeDonwshiftSharedProps =
   | "onSelectedItemChange"
   | "onStateChange"
   | "stateReducer";
-export interface TypeMenuContextProps
+
+export interface TypeMenuContextBaseProps {
+  itemsMap?: { [key: string]: TypeInternalItemProps };
+  isListbox?: boolean;
+  hiddenItemsMap?: Record<string, boolean>;
+  hiddenItemsCount?: number;
+  setHiddenItemsMap?: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  >;
+  subMenuId?: string;
+  setSubMenuId?: (id: string) => void;
+  contentRef?: React.RefObject<HTMLUListElement>;
+}
+
+interface TypeAllDownshiftProps
   extends Omit<
       TypeDownshiftComboboxReturnValue,
       TypeDonwshiftSharedReturnValue
@@ -62,9 +76,6 @@ export interface TypeMenuContextProps
     Omit<TypeDownshiftSelectProps, TypeDonwshiftSharedProps>,
     TypeDownshiftMultiSelectReturnValue,
     TypeDownshiftMultiSelectProps {
-  items: TypeDefaultItemProps[];
-  itemsMap?: { [key: string]: TypeDefaultItemProps };
-  isListbox?: boolean;
   onHighlightedIndexChange?:
     | TypeDownshiftComboboxProps["onHighlightedIndexChange"]
     | TypeDownshiftSelectProps["onHighlightedIndexChange"];
@@ -90,24 +101,72 @@ export interface TypeMenuContextProps
     | TypeDownshiftComboboxReturnValue["getMenuProps"]
     | TypeDownshiftSelectReturnValue["getMenuProps"];
 }
+export interface TypeMenuContextProps
+  extends TypeAllDownshiftProps,
+    TypeMenuContextBaseProps {
+  items: TypeInternalItemProps[];
+  itemsMap?: { [key: string]: TypeInternalItemProps };
+  selectedItemIds?: { [key: string]: boolean };
+  isListbox?: boolean;
+}
 
 export interface TypeMenuContext extends TypeMenuContextProps {
-  itemsMap: { [key: string]: TypeDefaultItemProps };
+  itemsMap: { [key: string]: TypeInternalItemProps };
+  isItemSelected: (id: string) => boolean;
+  getInputComponentProps: (
+    props: Pick<TypeTokenInputProps, "inputProps"> &
+      Parameters<Required<TypeMenuContextProps>["getInputProps"]>[0]
+  ) => Omit<TypeDownshiftMergedInputProps<TypeTokenInputProps>, "onClick">;
 }
 
 export interface TypeMenuProviderProps {
   children: TypeNotEmptyChildren;
-  menuProps: Partial<TypeMenuContextProps>;
+  menuContext: TypeMenuContext;
+}
+
+export interface TypeMenuToggleContext extends TypeMenuContext {
+  ref?: (arg0: React.ElementRef<any> | HTMLElement) => void;
+  toggle?: () => void;
+  show?: () => void;
+  hide?: () => void;
+  ariaProps?: Record<string, any>;
+}
+
+export interface TypeMenuToggleProviderProps extends TypeMenuProviderProps {
+  menuContext: TypeMenuToggleContext;
 }
 
 /**
  * Object for Initializing the Menu Context
  */
-const defaultMenuContext: TypeMenuContext = {
+export const defaultMenuContext: TypeMenuContext = {
   items: [],
   itemsMap: {},
+  isItemSelected: () => false,
+  getInputComponentProps: () => ({}),
 };
 
+export const getSelectedItemIds = <
+  T extends TypeMenuContextProps["selectedItems"] | undefined,
+  R = T extends undefined ? undefined : Record<string, boolean>
+>(
+  selectedItems?: T
+): R =>
+  selectedItems?.reduce(
+    (selected, item) => ({ ...selected, [item.id]: true }),
+    {} as Record<string, boolean>
+  ) as R;
+
+export const checkIfItemSelected = ({
+  id,
+  selectedItem,
+  selectedItemIds,
+}: {
+  id: string;
+  selectedItem?: TypeInternalItemProps | null;
+  selectedItemIds?: TypeMenuContextProps["selectedItemIds"];
+}) => (selectedItemIds ? !!selectedItemIds[id] : selectedItem?.id === id);
+
 /**
  * Hook for initializing Menu context
  */
@@ -116,10 +175,15 @@ export const useMenu = ({
   isListbox = false,
   isOpen = false,
   itemsMap: itemsMapFromProps,
+  selectedItemIds: selectedItemIdsFromProps,
+  selectedItem,
+  selectedItems,
+  getInputProps,
+  contentRef: contentRefFromProps,
   ...rest
 }: Partial<TypeMenuContextProps> = {}): TypeMenuContext => {
+  const contentRef = contentRefFromProps || React.createRef<HTMLUListElement>();
   const menuProps = useMemo(() => ({ ...rest }), [rest]);
-
   const itemsMap = useMemo(
     () =>
       itemsMapFromProps ||
@@ -132,45 +196,136 @@ export const useMenu = ({
     [items, itemsMapFromProps]
   );
 
+  const selectedItemIds = useMemo(
+    () => selectedItemIdsFromProps || getSelectedItemIds(selectedItems),
+    [selectedItems, selectedItemIdsFromProps]
+  );
+
+  const isItemSelected = React.useCallback(
+    (id: string) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
+    [selectedItem?.id, selectedItemIds]
+  );
+
+  const getInputComponentProps = React.useCallback<
+    TypeMenuContext["getInputComponentProps"]
+  >(
+    ({ inputProps, ...props }) => {
+      if (!getInputProps) return {};
+      const {
+        ["aria-activedescendant"]: activedescendant,
+        ["aria-autocomplete"]: autocomplete,
+        ["aria-controls"]: controls,
+        ["aria-expanded"]: expanded,
+        ["aria-labelledby"]: labelledby,
+        role,
+        autoComplete,
+        onClick,
+        value,
+        ...restProps
+      } = getInputProps(props);
+      return {
+        ...restProps,
+        inputProps: {
+          ["aria-activedescendant"]: activedescendant,
+          ["aria-autocomplete"]: autocomplete,
+          ["aria-controls"]: controls,
+          ["aria-expanded"]: expanded,
+          ["aria-labelledby"]: labelledby,
+          role,
+          autoComplete,
+          onClick,
+          value,
+          ...inputProps,
+        },
+      };
+    },
+    [getInputProps]
+  );
+
   return {
     isOpen,
     isListbox,
     items,
     itemsMap,
+    selectedItem,
+    selectedItems,
+    selectedItemIds,
+    isItemSelected,
+    getInputProps,
+    getInputComponentProps,
+    contentRef,
     ...menuProps,
   };
 };
 
 /**
- * MenuContext factory, sets the type and the initial object
+ * MenuToggleContext factory, sets the type and the initial object
+ * @description Context for the Menu Toggle
  */
-export const MenuContext = createContext<TypeMenuContext>(defaultMenuContext);
+export const MenuToggleContext =
+  createContext<TypeMenuToggleContext>(defaultMenuContext);
 
 /**
- * Provider Component sets the context values into the provider
+ * MenuToggleProvider Component sets the context values into the provider
+ * @description Context Provider for the Menu Toggle
  */
-export const MenuProvider = ({
+export const MenuToggleProvider = ({
   children,
-  menuProps,
-}: TypeMenuProviderProps) => {
-  const filterContext = useMenu(menuProps);
+  menuContext,
+}: TypeMenuToggleProviderProps) => {
+  return (
+    <MenuToggleContext.Provider value={{ ...menuContext }}>
+      {children}
+    </MenuToggleContext.Provider>
+  );
+};
+
+/**
+ * Utility hook for consuming MenuToggleContext
+ */
+export const useMenuToggleContext = () => {
+  const menuContextValue = useContext(MenuToggleContext);
 
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuToggleContext must be used within a <MenuToggleContext.Provider />"
+    );
+  }
+
+  return menuContextValue;
+};
+
+/**
+ * MenuContentContext factory, sets the type and the initial object
+ * @description Context for the Menu Content
+ */
+export const MenuContentContext =
+  createContext<TypeMenuContext>(defaultMenuContext);
+
+/**
+ * MenuContentProvider Component sets the context values into the provider
+ * @description Context Provider for the Menu Content
+ */
+export const MenuContentProvider = ({
+  children,
+  menuContext,
+}: TypeMenuProviderProps) => {
   return (
-    <MenuContext.Provider value={{ ...filterContext }}>
+    <MenuContentContext.Provider value={{ ...menuContext }}>
       {children}
-    </MenuContext.Provider>
+    </MenuContentContext.Provider>
   );
 };
 
 /**
- * Utility hook for consuming MenuContext
+ * Utility hook for consuming MenuContentContext
  */
-export const useMenuContext = (): TypeMenuContext => {
-  const menuContextValue = useContext(MenuContext);
+export const useMenuContentContext = () => {
+  const menuContextValue = useContext(MenuContentContext);
 
   if (menuContextValue === null) {
     throw new Error(
-      "useMenuContext must be used within a <MenuContext.Provider />"
+      "useMenuContentContext must be used within a <MenuContentContext.Provider />"
     );
   }
 

package/src/MenuFooter/MenuFooter.stories.tsx

@@ -0,0 +1,202 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Label } from "@sproutsocial/seeds-react-label";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
+import {
+  MenuContent,
+  MenuGroup,
+  SingleSelectMenu,
+  MenuFooter,
+  MenuItem,
+  type TypeMenuFooterProps,
+} from "../index";
+
+interface MenuFooterStoryArgs extends TypeMenuFooterProps {
+  "Trigger Text"?: string;
+  componentOne?: string;
+  componentTwo?: string;
+  componentThree?: string;
+}
+type Story = StoryObj<MenuFooterStoryArgs>;
+
+const optionsArr = ["Button Example", "Link Example", "Text Example", "none"];
+
+const meta: Meta<MenuFooterStoryArgs> = {
+  title: "Under Development/Primitives/MenuFooter",
+  component: MenuFooter,
+  parameters: {
+    controls: { expanded: true, sort: "requiredFirst" },
+  },
+  argTypes: {
+    "Trigger Text": {
+      table: {
+        category: "Button",
+      },
+      description: "Change text of trigger Button",
+      control: "text",
+    },
+    componentOne: {
+      table: {
+        category: "MenuFooter",
+      },
+      description: "Example Child Component",
+      options: optionsArr,
+      control: { type: "select" },
+    },
+    componentTwo: {
+      table: {
+        category: "MenuFooter",
+      },
+      description: "Example Child Component",
+      options: optionsArr,
+      control: { type: "select" },
+    },
+    componentThree: {
+      table: {
+        category: "MenuFooter",
+      },
+      description: "Example Child Component",
+      options: optionsArr,
+      control: { type: "select" },
+    },
+  },
+  args: {
+    "Trigger Text": "Select a Book",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    componentOne: optionsArr[0],
+    componentTwo: optionsArr[3],
+    componentThree: optionsArr[2],
+  },
+};
+
+export default meta;
+
+const handleOnClick = (e: React.MouseEvent, itemName: string) => {
+  action(`${itemName}`)(e);
+};
+
+const StoryFooterExamples = ({ type }) => {
+  switch (type) {
+    case optionsArr[0]:
+      return (
+        <Button
+          appearance="primary"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Save
+        </Button>
+      );
+    case optionsArr[1]:
+      return (
+        <Link mt="space.100" href="#">
+          Help
+        </Link>
+      );
+    case optionsArr[2]:
+      return <Text.SmallByline>Books will update on save.</Text.SmallByline>;
+    default:
+    case optionsArr[3]:
+      return null;
+  }
+};
+
+export const MenuFooterSandbox: Story = {
+  name: "Sandbox",
+  render: function MenuWithFooter(args) {
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={<StorybookMenuToggleButton />}
+        >
+          <MenuContent>
+            <MenuGroup id="books">
+              {TEST_BOOKS.map((book) => (
+                <MenuItem
+                  key={book.id}
+                  onClick={(e) => handleOnClick(e, book.title)}
+                  id={book.id}
+                >
+                  {book.title}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+          <MenuFooter
+            alignItems={args.alignItems}
+            justifyContent={args.justifyContent}
+            display={args.display}
+            flexDirection={args.flexDirection}
+          >
+            <StoryFooterExamples type={args.componentThree} />
+            <StoryFooterExamples type={args.componentOne} />
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};
+
+export const FooterwithActions: Story = {
+  name: "Footer Children",
+  parameters: {
+    controls: { exclude: ["componentOne", "componentTwo", "componentThree"] },
+  },
+  render: function FooterWithActions(args) {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={<StorybookMenuToggleButton />}
+        >
+          <MenuContent>
+            <MenuGroup id="books">
+              {TEST_BOOKS.map((book) => (
+                <MenuItem
+                  key={book.id}
+                  onClick={(e) => handleOnClick(e, book.title)}
+                  id={book.id}
+                >
+                  {book.title}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+          <MenuFooter display={args.display} flexDirection="column">
+            <Box display="flex" justifyContent="space-between">
+              <Box display="flex" justifyContent="flex-start">
+                <Switch
+                  onClick={(event) => {
+                    event?.preventDefault;
+                    setChecked((d) => !d);
+                  }}
+                  checked={checked}
+                  id="switch"
+                />
+                <Label htmlFor="switch" ml="10px">
+                  Enable cliff notes
+                </Label>
+              </Box>
+              <Button appearance="primary">Save</Button>
+            </Box>
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};

package/src/MenuFooter/__tests__/MenuFooter.test.tsx

@@ -1,8 +1,13 @@
-import { render, screen } from "@sproutsocial/seeds-react-testing-library";
-import { MenuFooter, MenuRoot } from "../../index";
+import {
+  render,
+  screen,
+  actRender,
+} from "@sproutsocial/seeds-react-testing-library";
 import { Button } from "@sproutsocial/seeds-react-button";
 // import { Link } from "@sproutsocial/seeds-react-link";
 import { Switch } from "@sproutsocial/seeds-react-switch";
+import { MenuFooter, MenuToggleButton } from "../../index";
+import { TestWithMenuRoot } from "../../menuTestingUtils";
 
 describe("MenuFooter API", () => {
   const contextTests = [
@@ -63,8 +68,8 @@ describe("MenuFooter API", () => {
 
   it.each(contextTests)(
     "$children rendered when $children provided",
-    ({ TestComponent, test }) => {
-      render(
+    async ({ TestComponent, test }) => {
+      await actRender(
         <MenuFooter>
           Hello world!
           {TestComponent}
@@ -77,25 +82,25 @@ describe("MenuFooter API", () => {
 
   it.each(contextTests)(
     "$children rendered when $children provided in MenuRoot",
-    ({ TestComponent, test }) => {
-      render(
-        <MenuRoot
+    async ({ TestComponent, test }) => {
+      await actRender(
+        <TestWithMenuRoot
           isOpen
-          menuToggleElement={<Button onClick={jest.fn()}>Open</Button>}
+          menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
         >
           <MenuFooter>
             Hello world!
             {TestComponent}
           </MenuFooter>
-        </MenuRoot>
+        </TestWithMenuRoot>
       );
 
       test();
     }
   );
 
-  it("extends Box", () => {
-    render(<MenuFooter bg="#ff0000">Hello world!</MenuFooter>);
+  it("extends Box", async () => {
+    await actRender(<MenuFooter bg="#ff0000">Hello world!</MenuFooter>);
 
     const menuFooter = screen.getByText("Hello world!");
     expect(menuFooter).toHaveStyle("background: #ff0000");

package/src/MenuFooter/styles.tsx

@@ -2,6 +2,6 @@ import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 
 export const StyledMenuFooterBox = styled(Box)`
-  padding: ${(p) => p.theme.space[400]};
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;

package/src/MenuGroup/MenuGroup.feature

@@ -32,9 +32,9 @@ Feature: Menu Group
         When the "title" prop is not set
         Then no title is visible at the top of the group
 
-      Scenario: MenuGroup has no items provided
+      Scenario: MenuGroup has no menuItems provided
         When no children are provided to MenuGroup
-        And no items prop is provided
+        And no menuItems prop is provided
         Then the MenuGroup will show a warning in the console
         And will not render the empty group
 
@@ -42,24 +42,24 @@ Feature: Menu Group
         When MenuItem components are passed as children to a MenuGroup
         Then the MenuGroup will render them inside of the group
 
-      Scenario: MenuGroup items prop might be empty
-        Given a list of items is empty
-        When that list of items is provided to the items prop on a MenuGroup
+      Scenario: MenuGroup menuItems prop might be empty
+        Given a list of menuItems is empty
+        When that list of menuItems is provided to the menuItems prop on a MenuGroup
         Then the MenuGroup will show a warning in the console
         And will not render the empty group
 
-      Scenario: MenuGroup can take items via a prop
-        Given a list of items is not empty
-        And the items are a valid object shape
-        When that list of items is provided to the items prop on a MenuGroup
-        Then the MenuGroup will render the items using the MenuItem component
+      Scenario: MenuGroup can take menuItems via a prop
+        Given a list of menuItems is not empty
+        And the menuItems are a valid object shape
+        When that list of menuItems is provided to the menuItems prop on a MenuGroup
+        Then the MenuGroup will render the menuItems using the MenuItem component
 
-      Scenario: MenuGroup can use the items prop with a custom MenuItem
-        Given a list of items is not empty
-        And the items are a valid object shape
-        When that list of items is provided to the items prop on a MenuGroup
+      Scenario: MenuGroup can use the menuItems prop with a custom MenuItem
+        Given a list of menuItems is not empty
+        And the menuItems are a valid object shape
+        When that list of menuItems is provided to the menuItems prop on a MenuGroup
         And a valid component is provided to the customMenuItem prop
-        Then the MenuGroup will render the items using the customMenuItem component
+        Then the MenuGroup will render the menuItems using the customMenuItem component
 
       Scenario Outline: MenuGroup has custom content
         When <custom content> is present at the <location>
@@ -79,6 +79,6 @@ Feature: Menu Group
           | propName          | propType                                         |
           | children          | ReactNode                                        |
           | title             | string                                           |
-          | items             | TypeMenuItemProps[]                              |
+          | menuItems         | TypeMenuItemProps[]                              |
           | isSingleSelect    | boolean                                          |
           | MenuItemComponent | React.ComponentType<TypeMenuItemProps>           |