@sproutsocial/seeds-react-menu 0.1.0

package/src/MenuContent/styles.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+
+export const StyledMenuContent = styled.ul`
+  margin: 0;
+  padding: ${({ theme }) => theme.space[300]} 0;
+  &:focus {
+    ${focusRing}
+  }
+`;

package/src/MenuContext.tsx

@@ -0,0 +1,116 @@
+import React, {
+  createContext,
+  useMemo,
+  useContext,
+  type RefObject,
+} from "react";
+import type {
+  UseSelectReturnValue,
+  UseSelectProps,
+  UseMultipleSelectionReturnValue,
+  UseMultipleSelectionProps,
+} from "downshift";
+import type { TypeDefaultItemProps, TypeNotEmptyChildren } from "./types";
+
+export interface TypeDownshiftMultiSelectProps
+  extends Partial<UseSelectProps<TypeDefaultItemProps>>,
+    Partial<
+      Omit<
+        UseMultipleSelectionProps<TypeDefaultItemProps>,
+        "stateReducer" | "onStateChange" | "getA11yStatusMessage"
+      >
+    > {
+  // Multi Select Props with conflicting useSelect prop names
+  getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeDefaultItemProps>["getA11yStatusMessage"];
+  onMultiSelectStateChange?: UseMultipleSelectionProps<TypeDefaultItemProps>["onStateChange"];
+  multiSelectStateReducer?: UseMultipleSelectionProps<TypeDefaultItemProps>["stateReducer"];
+}
+
+export interface TypeMenuContextProps
+  extends Partial<UseSelectReturnValue<TypeDefaultItemProps>>,
+    Partial<UseMultipleSelectionReturnValue<TypeDefaultItemProps>>,
+    TypeDownshiftMultiSelectProps {
+  items: TypeDefaultItemProps[];
+  isListbox?: boolean;
+}
+
+export interface TypeMenuContext extends TypeMenuContextProps {
+  itemsMap: { [key: string]: TypeDefaultItemProps };
+}
+
+export interface TypeMenuProviderProps extends Partial<TypeMenuContextProps> {
+  children: TypeNotEmptyChildren;
+}
+
+/**
+ * Object for Initializing the Menu Context
+ */
+const defaultMenuContext: TypeMenuContext = {
+  items: [],
+  itemsMap: {},
+};
+
+/**
+ * Hook for initializing Menu context
+ */
+export const useMenu = ({
+  items = [],
+  isListbox = false,
+  isOpen = false,
+  ...rest
+}: Partial<TypeMenuContextProps> = {}): TypeMenuContext => {
+  const menuProps = useMemo(() => ({ ...rest }), [rest]);
+
+  const itemsMap = useMemo(
+    () =>
+      items.reduce((map, item) => {
+        map[`${item.id}`] = item;
+        return map;
+      }, {} as TypeMenuContext["itemsMap"]),
+    [items]
+  );
+
+  return {
+    isOpen,
+    isListbox,
+    items,
+    itemsMap,
+    ...menuProps,
+  };
+};
+
+/**
+ * MenuContext factory, sets the type and the initial object
+ */
+export const MenuContext = createContext<TypeMenuContext>(defaultMenuContext);
+
+/**
+ * Provider Component sets the context values into the provider
+ */
+export const MenuProvider = ({
+  children,
+  ...overrides
+}: TypeMenuProviderProps) => {
+  const filterContext = useMenu(overrides);
+
+  return (
+    <MenuContext.Provider value={{ ...filterContext }}>
+      {children}
+    </MenuContext.Provider>
+  );
+};
+
+/**
+ * Utility hook for consuming MenuContext
+ */
+export const useMenuContext = (): TypeMenuContext => {
+  const menuContextValue = useContext(MenuContext);
+
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuContext must be used within a <MenuContext.Provider />"
+    );
+  }
+
+  return menuContextValue;
+};

package/src/MenuFooter/MenuFooter.feature

@@ -0,0 +1,30 @@
+Feature: Menu Footer
+
+  The bottom area of a Menu.
+
+  Rule: API
+    Background:
+      Given an engineer is implementing a MenuFooter
+
+      Scenario Outline: MenuFooter contains children
+        When <child component(s)> provided
+        Then the MenuFooter should render the <component(s)>
+
+        Examples: child components
+          | child component(s)       | component(s)     |
+          | a Link is                | Link            |
+          | a Switch is              | Switch          |
+          | a Button is              | Button          |
+          | a Link and a Button are  | Link and Button |
+
+      Scenario: MenuFooter extends Box
+        When Box features are used
+        Then the MenuFooter responds as a Box would
+
+      Scenario Outline: MenuFooter checks its types
+        When <propName> is passed a value
+        Then MenuFooter expects it to be of type <propType>
+
+        Examples: Prop Types
+          | propName    | propType   |
+          | children    | ReactNode  |

package/src/MenuFooter/MenuFooter.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import type { TypeMenuFooterProps } from "./MenuFooterTypes";
+import { StyledMenuFooterBox } from "./styles";
+
+export const MenuFooter = ({ children, ...rest }: TypeMenuFooterProps) => {
+  return <StyledMenuFooterBox {...rest}>{children}</StyledMenuFooterBox>;
+};

package/src/MenuFooter/MenuFooterTypes.ts

@@ -0,0 +1 @@
+export type { TypeBoxProps as TypeMenuFooterProps } from "@sproutsocial/seeds-react-box";

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

@@ -0,0 +1,76 @@
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { MenuFooter, MenuRoot } from "../../index";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+
+describe("MenuFooter API", () => {
+  const contextTests = [
+    {
+      child: "Button",
+      TestComponent: <Button role="button">Find me!</Button>,
+    },
+    {
+      child: "Switcher",
+      TestComponent: (
+        <Switch
+          role="button"
+          checked={false}
+          onClick={() => {}}
+          aria-label="Find me!"
+        />
+      ),
+    },
+    {
+      child: "Link",
+      TestComponent: <button role="button">Find me!</button>,
+    },
+  ];
+
+  it.each(contextTests)(
+    "$child contains children",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ({ child, TestComponent }) => {
+      render(
+        <MenuFooter>
+          Hello world!
+          {TestComponent}
+        </MenuFooter>
+      );
+
+      const testBtn = screen.getByRole("button");
+
+      const parentComponent = screen.getByText("Hello world!");
+      expect(parentComponent).toContainElement(testBtn);
+    }
+  );
+
+  it.each(contextTests)(
+    "$child contains children when in MenuRoot",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ({ child, TestComponent }) => {
+      render(
+        <MenuRoot
+          isOpen
+          triggerElement={<Button onClick={jest.fn()}>Open</Button>}
+        >
+          <MenuFooter>
+            Hello world!
+            {TestComponent}
+          </MenuFooter>
+        </MenuRoot>
+      );
+
+      const testBtn = screen.getByRole("button", { name: "Find me!" });
+
+      const parentComponent = screen.getByText("Hello world!");
+      expect(parentComponent).toContainElement(testBtn);
+    }
+  );
+
+  it("extends Box", () => {
+    render(<MenuFooter bg="#ff0000">Hello world!</MenuFooter>);
+
+    const menuFooter = screen.getByText("Hello world!");
+    expect(menuFooter).toHaveStyle("background: #ff0000");
+  });
+});

package/src/MenuFooter/__tests__/MenuFooter.typetest.tsx

@@ -0,0 +1,20 @@
+import { MenuFooter } from "../MenuFooter";
+
+export const MenuFooterTypeTest = () => (
+  <>
+    <MenuFooter>Test...</MenuFooter>
+    {/* @ts-expect-error - test that invalid flexDirection is rejected */}
+    <MenuFooter flexDirection="invalid" />
+    {/* @ts-expect-error - test that invalid type is rejected */}
+    <MenuFooter type="invalid" />
+    <MenuFooter gap={100}>Test...</MenuFooter>
+    <MenuFooter gap={1} rowGap={400} columnGap={999} />;
+    <MenuFooter gap="string" rowGap="string" columnGap="string" />;
+    <MenuFooter
+      gap={[1, "string"]}
+      rowGap={[1, "string"]}
+      columnGap={[1, "string"]}
+    />
+    ;
+  </>
+);

package/src/MenuFooter/index.ts

@@ -0,0 +1,2 @@
+export * from "./MenuFooter";
+export * from "./MenuFooterTypes";

package/src/MenuFooter/styles.tsx

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

package/src/MenuGroup/MenuGroup.feature

@@ -0,0 +1,114 @@
+Feature: Menu Group
+
+  The component responsible for grouping items for a Menu.
+
+  Rule: User Behavior
+    Background:
+      Given an end user is using the component
+
+    Scenario: MenuGroup is accessible to screen readers when menu opened
+      Given a screen reader is being used
+      When a menu is opened
+      And the first group receives focus
+      Then the first group is announced by the screen reader
+
+    Scenario: MenuGroup is accessible to screen readers when there are 2 groups
+      Given a screen reader is being used
+      When a navigating between two groups
+      Then the new group is announced by the screen reader
+
+    Scenario Outline: MenuGroup uses select type
+      When the MenuGroup has <group type>
+      And MenuContext is set to <menu type>
+      Then <selection behavior>
+
+      Examples:
+        | group type | menu type | selection behavior                                  |
+        | single     | single    | the menu uses the default behavior                  |
+        | multiple   | multiple  | the menu uses the default behavior                  |
+        | single     | multiple  | the group behaves like a single select              |
+        | multiple   | single    | the group throws an error and uses default behavior |
+        | default    | single    | the menu uses the default behavior                  |
+        | default    | multiple  | the menu uses the default behavior                  |
+
+  Rule: API
+    Background:
+      Given an engineer is implementing the component
+
+      Scenario: MenuGroup has a title
+        When the "title" prop is set
+        Then the title is visible at the top of the group
+
+      Scenario: MenuGroup has no title
+        When the "title" prop is not set
+        Then no title is visible at the top of the group
+
+      Scenario: MenuGroup has no items provided
+        When no children are provided to MenuGroup
+        And no items prop is provided
+        Then the MenuGroup will show a warning in the console
+        And will not render the empty group
+
+      Scenario: MenuGroup can take items as children
+        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
+        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 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
+        And a valid component is provided to the customMenuItem prop 
+        Then the MenuGroup will render the items using the customMenuItem component
+
+      Scenario: MenuGroup ignores the menuItemType without items prop
+        When a MenuGroup has menuItemType set
+        And is not provided with a valid items prop
+        Then the menuItemType will be ignored
+      
+      Scenario Outline: MenuGroup can set the type for all MenuItems
+        When menuItemType is set to <menu item type>
+        And MenuGroup is provided with a valid items prop
+        Then each MenuItem rendered by the MenuGroup with use this type
+
+        Examples: Prop Types
+          | menu item type      |
+          | undefined (default) |
+          | checkbox            |
+          | radio               |
+          | switch              |
+
+      Scenario Outline: MenuGroup has custom content
+        When <custom content> is present at the <location>
+        Then <displayed content> will render
+
+        Examples:
+          | custom content | location       | displayed content                       |
+          | a red Banner   | top            | a red Banner at the top of the group    |
+          | hint text      | bottom         | hint text at the bottom of the group    |
+          | text           | top and bottom | text at the top and bottom of the group |
+          | no content     | top            | no content at the top of the group      |
+          | no content     | bottom         | no content at the bottom of the group   |
+
+      Scenario Outline: MenuRoot checks its types
+        When <propName> is passed a value
+        Then MenuRoot expects it to be of type <propType>
+
+        Examples: Prop Types
+          | propName       | propType                  |
+          | children       | ReactNode                 |
+          | title          | string                    |
+          | items          | TypeItem[]                |
+          | menuItemType   | TypeMenuItemProps['type'] |
+          | customMenuItem | tyepof MenuItem           |

package/src/MenuGroup/MenuGroup.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { TypeMenuGroupProps } from "./MenuGroupTypes";
+import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
+
+export const MenuGroup = ({
+  titleAs = "h3",
+  children,
+  title,
+  color,
+  ...rest
+}: TypeMenuGroupProps) => {
+  // Generate a unique ID for the title
+  const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
+
+  return (
+    <StyledMenuGroup
+      role="group"
+      aria-labelledby={title ? titleId : undefined}
+      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      color={color}
+      {...rest}
+    >
+      {title && (
+        <StyledTitle as={titleAs} id={titleId}>
+          {title}
+        </StyledTitle>
+      )}
+      <StyledMenuGroupUl>{children}</StyledMenuGroupUl>
+    </StyledMenuGroup>
+  );
+};

package/src/MenuGroup/MenuGroupTypes.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type {
+  TypeBorderSystemProps,
+  TypeColorSystemProps,
+  TypeFlexboxSystemProps,
+  TypeGridSystemProps,
+  TypeLayoutSystemProps,
+  TypePositionSystemProps,
+  TypeSpaceSystemProps,
+  TypeTypographySystemProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeMenuGroupStyledProps
+  extends TypeBorderSystemProps,
+    TypeColorSystemProps,
+    TypeFlexboxSystemProps,
+    TypeGridSystemProps,
+    TypeLayoutSystemProps,
+    TypePositionSystemProps,
+    TypeSpaceSystemProps,
+    TypeTypographySystemProps {}
+
+export interface TypeMenuGroupProps
+  extends TypeMenuGroupStyledProps,
+    Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
+  title?: string;
+  children: ReactNode;
+  titleAs?: string | React.ComponentType<any>;
+}

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import {
+  SingleSelectMenu,
+  MenuContent,
+  MenuGroup,
+  MenuToggleButton,
+  MenuItem,
+} from "../../index";
+
+const menuItems = [
+  { id: "item-1", label: "Item 1" },
+  { id: "item-2", label: "Item 2" },
+  { id: "item-3", label: "Item 3" },
+];
+
+describe("MenuGroup", () => {
+  xdescribe("User Behavior", () => {
+    xit("The first group should be accessible to screen readers", () => {});
+    xit("User is able to navigate between groups", () => {});
+  });
+  describe("API", () => {
+    it("renders a group with a title", () => {
+      const menuTitle = "menu-title-test";
+      render(
+        <SingleSelectMenu
+          defaultIsOpen
+          triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup title={menuTitle}>
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </SingleSelectMenu>
+      );
+
+      // Find associated label for the group. (Menu Group uses aria-labelledby to point to heading element)
+      const menuGroup = screen.getByRole("group", { name: menuTitle });
+      expect(menuGroup).toBeInTheDocument();
+    });
+
+    it("when no title is provided, it should not render a title", () => {
+      render(
+        <SingleSelectMenu
+          defaultIsOpen
+          triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup>
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </SingleSelectMenu>
+      );
+
+      // Find a heading element within the MenuGroup component
+      const menuTitle = screen.queryByRole("heading");
+      expect(menuTitle).not.toBeInTheDocument();
+    });
+
+    it("Renders children correctly", () => {
+      render(
+        <SingleSelectMenu
+          defaultIsOpen
+          triggerElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup>
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </SingleSelectMenu>
+      );
+
+      expect(
+        screen.getByRole("option", { name: menuItems[0].label })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("option", { name: menuItems[1].label })
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/MenuGroup/__tests__/MenuGroup.typetest.tsx

@@ -0,0 +1,45 @@
+import { MenuGroup, MenuItem } from "../../index";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+export const MenuGroupTypeTest = () => (
+  <>
+    {/* MenuGroup allows children */}
+    <MenuGroup>Test</MenuGroup>
+    {/* MenuGroup allows children with MenuItems */}
+    <MenuGroup>
+      <MenuItem id="1">Test 1</MenuItem>
+      <MenuItem id="2">Test 2</MenuItem>
+    </MenuGroup>
+    {/* MenuGroup allows title as a string */}
+    <MenuGroup title="title">Test</MenuGroup>
+    {/* MenuGroup allows titleAs as a string */}
+    <MenuGroup title="title" titleAs="h3">
+      Test
+    </MenuGroup>
+    {/* MenuGroup allows titleAs as a component */}
+    <MenuGroup title="title" titleAs={Text}>
+      Test
+    </MenuGroup>
+    {/* MenuGroup accepts ul props */}
+    <MenuGroup aria-label="test label">Test</MenuGroup>
+    {/* MenuGroup accepts style props */}
+    <MenuGroup border="1px solid black" bg="white" width="150px">
+      Test
+    </MenuGroup>
+
+    {/* @ts-expect-error - MenuGroup requires children */}
+    <MenuGroup />
+    {/* @ts-expect-error - MenuGroup title is invalid as number */}
+    <MenuGroup title={123}>Test</MenuGroup>
+    {/* @ts-expect-error - MenuGroup title is invalid as boolean */}
+    <MenuGroup title={false}>Test</MenuGroup>
+    {/* @ts-expect-error - MenuGroup titleAs is invalid as number */}
+    <MenuGroup title="title" titleAs={123}>
+      Test
+    </MenuGroup>
+    {/* @ts-expect-error - MenuGroup titleAs is invalid as boolean */}
+    <MenuGroup title="title" titleAs={false}>
+      Test
+    </MenuGroup>
+  </>
+);

package/src/MenuGroup/index.tsx

@@ -0,0 +1,8 @@
+// MenuGroup component code
+export * from "./MenuGroup";
+
+// MenuGroup types
+export * from "./MenuGroupTypes";
+
+// MenuGroup styles
+export * from "./styles";

package/src/MenuGroup/styles.tsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+import {
+  border,
+  layout,
+  position,
+  flexbox,
+  grid,
+  color,
+  space,
+} from "styled-system";
+import type { TypeMenuGroupProps } from "./MenuGroupTypes";
+
+export const StyledMenuGroup = styled.li<TypeMenuGroupProps>`
+  &:not(:last-child) {
+    border-bottom: 1px solid
+      ${({ theme }) => theme.colors.container.border.base};
+  }
+  list-style: none;
+  margin: 0;
+  ${border}
+  ${position}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+
+export const StyledTitle = styled(Text.SmallSubHeadline)`
+  margin: ${({ theme }) => theme.space[200]} 0px
+    ${({ theme }) => theme.space[300]} ${({ theme }) => theme.space[300]};
+`;
+export const StyledMenuGroupUl = styled.ul`
+  margin: 0;
+  padding: ${({ theme }) => theme.space[300]};
+`;