@sproutsocial/seeds-react-menu 0.5.0 → 1.0.0

package/src/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
-import { useMenuContext } from "../MenuContext";
-import type { TypeDefaultItemProps } from "../types";
+import { useMenuContentContext } from "../MenuContext";
+import type { TypeInternalItemProps } from "../types";
 import type { TypeMenuItemProps } from "./MenuItemTypes";
 import { MenuItemContainer, StyledMenuItem } from "./styles";
 import { useOptionProps } from "./useOptionProps";
@@ -11,51 +11,65 @@ import { useOptionProps } from "./useOptionProps";
 //   radio: "menuitemradio",
 // } as const;
 
-export const MenuItem = ({
+const MenuItem = ({
   id,
   children,
   onClick,
   onKeyDown,
   disabled = false,
-  ref,
+  active,
+  innerRef,
   href,
   color,
   ...props
 }: TypeMenuItemProps) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } =
-    useMenuContext();
+  const {
+    getItemProps,
+    itemsMap,
+    highlightedIndex,
+    isListbox,
+    hiddenItemsMap = {},
+  } = useMenuContentContext();
   const { ...optionProps } = useOptionProps({
     id,
     children,
     ...props,
   });
-  const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
+  const item = (itemsMap[id] || { index: 0, id }) as TypeInternalItemProps;
 
   const highlighted = highlightedIndex === item?.index;
 
-  return item.hidden ? (
+  return hiddenItemsMap[item.id] ? (
     <></>
   ) : (
     <MenuItemContainer role="none">
       <StyledMenuItem
         id={id}
         $highlighted={highlighted}
+        $active={active}
         {...getItemProps?.({
           ...(isListbox ? {} : { role: "menuitem" }),
           item,
           index: item.index,
-          // This prop no longer supported in downshift
+          // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
           // disabled,
           onClick,
           onKeyDown,
+          ref: innerRef,
         })}
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
         href={href}
         children={children}
+        // Keyboard nav uses the arrow keys, not tab.
+        tabIndex={-1}
         {...optionProps}
         {...props}
       />
     </MenuItemContainer>
   );
 };
+
+MenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
+
+export { MenuItem };

package/src/MenuItem/MenuItemTypes.ts

@@ -1,6 +1,6 @@
 import type { GetItemPropsOptions } from "downshift";
 import type { TypeMenuItemRoles } from "../constants";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeInternalItemProps } from "../types";
 import type {
   TypeBorderSystemProps,
   TypeColorSystemProps,
@@ -33,13 +33,18 @@ export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
 export interface TypeMenuItemProps
   extends TypeMenuItemStyledProps,
     Omit<
-      GetItemPropsOptions<TypeDefaultItemProps>,
-      "as" | "item" | keyof TypeMenuItemStyledProps | keyof TypeDefaultItemProps
+      GetItemPropsOptions<TypeInternalItemProps>,
+      | "as"
+      | "item"
+      | "ref"
+      | keyof TypeMenuItemStyledProps
+      | keyof TypeInternalItemProps
     >,
-    Omit<TypeDefaultItemProps, "index"> {
+    Omit<TypeInternalItemProps, "index"> {
   children: React.ReactNode;
   disabled?: boolean;
   role?: TypeMenuItemRoles;
+  innerRef?: React.Ref<any>;
   $highlighted?: boolean;
 
   // props for options

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -88,19 +88,19 @@ const INTERACTION_TYPES = {
   enter: {
     action: "pressing the Enter key",
     activate: async (user: UserEvent) => {
-      await user.keyboard("{arrowdown}{enter}");
+      await act(() => user.keyboard("{arrowdown}{enter}"));
     },
     deactivate: async (user: UserEvent) => {
-      await user.keyboard("{enter}");
+      await act(() => user.keyboard("{enter}"));
     },
   },
   space: {
     action: "pressing the Space key",
     activate: async (user: UserEvent) => {
-      await user.keyboard("{arrowdown} ");
+      await act(() => user.keyboard("{arrowdown} "));
     },
     deactivate: async (user: UserEvent) => {
-      await user.keyboard(" ");
+      await act(() => user.keyboard(" "));
     },
   },
 };
@@ -158,7 +158,7 @@ describe("MenuItem when not isListbox", () => {
         await user.tab();
         expect(targetElem).toHaveFocus();
 
-        await user.keyboard("{enter}");
+        await act(() => user.keyboard("{enter}"));
 
         await waitFor(() =>
           expect(handleStateChange).toHaveBeenCalledWith({
@@ -194,7 +194,7 @@ describe("MenuItem when not isListbox", () => {
         await user.tab();
         expect(targetElem).toHaveFocus();
 
-        await user.keyboard(" ");
+        await act(() => user.keyboard(" "));
 
         await waitFor(() =>
           expect(handleStateChange).toHaveBeenCalledWith({

package/src/MenuItem/styles.tsx

@@ -18,6 +18,13 @@ const highlightedStyles = css`
   text-decoration: none;
 `;
 
+const activeStyles = css`
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.menuItem.background.active};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
+`;
+
 export const MenuItemContainer = styled.li`
   box-sizing: border-box;
   list-style-type: none;
@@ -33,7 +40,10 @@ export const MenuItemContainer = styled.li`
   }
 `;
 
-export const StyledMenuItem = styled.div<{ $highlighted: boolean }>`
+export const StyledMenuItem = styled.button<{
+  $highlighted: boolean;
+  $active?: boolean;
+}>`
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -72,10 +82,12 @@ export const StyledMenuItem = styled.div<{ $highlighted: boolean }>`
     ${focusRing}
   }
 
+  /* Active */
+  ${({ $active }) => $active && activeStyles}
+
   /* Pressed state*/
   &:active {
-    background-color: ${({ theme }) => theme.colors.listItem.background.active};
-    color: ${({ theme }) => theme.colors.text.inverse};
+    ${activeStyles}
   }
 
   &[aria-disabled="true"] {
@@ -96,15 +108,21 @@ export const MenuItemRow = styled.div`
   align-items: center;
   pointer-events: none;
 `;
-
 export const MenuItemAction = styled.div`
-  margin-right: ${({ theme }) => theme.space[300]};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 `;
 
+export const MenuItemActionLeft = styled(MenuItemAction)`
+  margin-right: ${({ theme }) => theme.space[300]};
+`;
+
+export const MenuItemActionRight = styled(MenuItemAction)`
+  margin-left: ${({ theme }) => theme.space[300]};
+`;
+
 export const MenuItemText = styled.div`
   word-break: break-word;
   flex-grow: 1;

package/src/MenuItem/useOptionProps.tsx

@@ -5,10 +5,10 @@ import { Switch } from "@sproutsocial/seeds-react-switch";
 import { Radio } from "@sproutsocial/seeds-react-radio";
 import { useTheme } from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
-import { MenuContext } from "../MenuContext";
+import { useMenuContentContext } from "../MenuContext";
 
 import type { TypeMenuItemProps, InputType } from "./MenuItemTypes";
-import { MenuItemAction, MenuItemRow, MenuItemText } from "./styles";
+import { MenuItemActionLeft, MenuItemRow, MenuItemText } from "./styles";
 
 /**
  * SelectionIndicator - handles logic for appropriate rendering of inputs
@@ -35,6 +35,7 @@ export const SelectionIndicator = ({
     case "checkbox":
       return (
         <Checkbox
+          tabIndex={-1}
           onChange={() => {}}
           checked={selected}
           aria-labelledby={labeledBy}
@@ -44,6 +45,7 @@ export const SelectionIndicator = ({
     case "switch":
       return (
         <Switch
+          tabIndex={-1}
           onClick={inputStub}
           checked={!!selected}
           aria-labelledby={labeledBy}
@@ -53,6 +55,7 @@ export const SelectionIndicator = ({
     case "radio":
       return (
         <Radio
+          tabIndex={-1}
           checked={selected}
           id={`MenuItem-${inputType}-${id}`}
           name={`MenuItem-${inputType}`}
@@ -80,12 +83,11 @@ export const useOptionProps = ({
   inputLabelId,
   ...props
 }: TypeMenuItemProps) => {
-  const { selectedItem, selectedItems, isListbox } = useContext(MenuContext);
+  const { selectedItem, selectedItemIds, isListbox, isItemSelected } =
+    useMenuContentContext();
   const selected = useMemo(
-    () =>
-      selectedItem?.id === id ||
-      !!selectedItems?.find((item) => item?.id === id),
-    [selectedItem, selectedItems]
+    () => isItemSelected(id),
+    [selectedItem?.id, selectedItemIds]
   );
 
   const label = inputLabelId || `menu-item-child-${id}`;
@@ -96,14 +98,14 @@ export const useOptionProps = ({
         ["aria-selected"]: selected,
         children: (
           <MenuItemRow>
-            <MenuItemAction>
+            <MenuItemActionLeft>
               <SelectionIndicator
                 id={id}
                 aria-labelledby={label}
                 inputType={inputType}
                 selected={!!selected}
               />
-            </MenuItemAction>
+            </MenuItemActionLeft>
             <MenuItemText id={label}>{children}</MenuItemText>
           </MenuItemRow>
         ),

package/src/MenuLabel.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Label, type TypeLabelProps } from "@sproutsocial/seeds-react-label";
-import { useMenuContext } from "./MenuContext";
+import { useMenuToggleContext } from "./MenuContext";
 
 export const MenuLabel = ({ children, ...rest }: Partial<TypeLabelProps>) => {
-  const { getLabelProps } = useMenuContext();
+  const { getLabelProps } = useMenuToggleContext();
   return (
     <Label htmlFor="fallback_menu_label" {...getLabelProps?.()} {...rest}>
       {children}

package/src/MenuRoot/MenuRoot.tsx

@@ -1,8 +1,14 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect } from "react";
 import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 
-import { MenuProvider, type TypeMenuProviderProps } from "../MenuContext";
+import {
+  MenuToggleProvider,
+  MenuContentProvider,
+  useMenu,
+  type TypeMenuContextProps,
+  type TypeMenuProviderProps,
+} from "../MenuContext";
 
 export interface TypeMenuRootOwnProps {
   menuToggleElement: React.ReactElement<any>;
@@ -12,7 +18,7 @@ export interface TypeMenuRootOwnProps {
   width?: TypePopoutProps["width"];
 }
 export interface TypeMenuRootProps
-  extends Partial<TypeMenuProviderProps["menuProps"]>,
+  extends Partial<TypeMenuContextProps>,
     Pick<TypeMenuProviderProps, "children">,
     TypeMenuRootOwnProps {}
 
@@ -31,11 +37,18 @@ const CustomPopoutContent = styled(Popout.Content)`
 export const MenuRoot = ({
   children,
   menuToggleElement,
-  popoutProps: { focusLockProps, ...popoutProps } = {},
+  popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
   width = "300px",
   ...contextProps
 }: TypeMenuRootProps) => {
-  const { isOpen, openMenu, closeMenu } = contextProps;
+  const {
+    isOpen,
+    openMenu,
+    closeMenu,
+    inputValue,
+    hiddenItemsCount = 0,
+    items,
+  } = contextProps;
   const setIsOpen = useCallback(
     (newIsOpen: boolean) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
@@ -43,26 +56,41 @@ export const MenuRoot = ({
     [openMenu, closeMenu]
   );
 
+  useEffect(() => {
+    if (!inputValue) return;
+
+    if (items && hiddenItemsCount >= items.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
+
+  const menuContext = useMenu(contextProps);
+
   return (
-    <MenuProvider menuProps={contextProps}>
-      <Popout
-        menuPopout
-        isOpen={!!isOpen}
-        setIsOpen={setIsOpen}
-        content={
+    <Popout
+      menuPopout
+      placement={placement}
+      isOpen={!!isOpen}
+      setIsOpen={setIsOpen}
+      content={
+        <MenuContentProvider menuContext={menuContext}>
           <CustomPopoutContent width={width}>{children}</CustomPopoutContent>
-        }
-        focusLockProps={{
-          // correct jerking motion when scrolling while the Popout is open
-          // returnFocus: false,
-          crossFrame: false,
-          ...focusLockProps,
-        }}
-        disableWrapperAria
-        {...popoutProps}
-      >
-        {menuToggleElement}
-      </Popout>
-    </MenuProvider>
+        </MenuContentProvider>
+      }
+      focusLockProps={{
+        // correct jerking motion when scrolling while the Popout is open
+        // returnFocus: false,
+        crossFrame: false,
+        ...focusLockProps,
+      }}
+      disableWrapperAria
+      {...popoutProps}
+    >
+      {(toggleProps) => (
+        <MenuToggleProvider menuContext={{ ...menuContext, ...toggleProps }}>
+          {menuToggleElement}
+        </MenuToggleProvider>
+      )}
+    </Popout>
   );
 };

package/src/MenuRoot/__tests__/MenuRoot.test.tsx

@@ -4,34 +4,37 @@ import {
   render,
   screen,
   waitFor,
+  actRender,
+  act,
 } from "@sproutsocial/seeds-react-testing-library";
-import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
 import {
   MenuRoot,
   MenuToggleButton,
   MenuItem,
-  MenuContext,
+  MenuContentContext,
+  MenuToggleContext,
   MenuFooter,
   MenuHeader,
   MenuGroup,
   type TypeMenuContextProps,
 } from "../../index";
+import { testDefaultContext } from "../../menuTestingUtils";
 
 jest.mock("@sproutsocial/seeds-react-portal", () => ({ children }) => (
   <div>{children}</div>
 ));
 
 const TestComponent = () => {
-  const { isOpen } = useContext(MenuContext);
+  const { isOpen } = useContext(MenuToggleContext);
   return <div>{isOpen ? "Is open" : "Is closed"}</div>;
 };
 const TestToggleButton = () => {
-  const { getToggleButtonProps } = useContext(MenuContext);
+  const { getToggleButtonProps } = useContext(MenuToggleContext);
   return <Button {...getToggleButtonProps?.()}>Toggle</Button>;
 };
 const TestMenuFooter = () => {
-  const { closeMenu } = useContext(MenuContext);
+  const { closeMenu } = useContext(MenuContentContext);
   return (
     <MenuFooter>
       <Button onClick={() => closeMenu?.()}>Close</Button>
@@ -39,14 +42,14 @@ const TestMenuFooter = () => {
   );
 };
 // const TestClearLink = () => {
-//   const { reset } = useContext(MenuContext);
+//   const { reset } = useContext(MenuContentContext);
 //   return <Link onClick={() => reset?.()}>Reset</Link>;
 // };
 
 describe("MenuRoot", () => {
   it("closes when esc is pressed", async () => {
     const mockCloseMenu = jest.fn();
-    const { user } = render(
+    const { user } = await actRender(
       <MenuRoot
         menuToggleElement={
           <MenuToggleButton role="button" aria-label="Open Menu">
@@ -55,6 +58,7 @@ describe("MenuRoot", () => {
         }
         closeMenu={mockCloseMenu}
         isOpen
+        {...testDefaultContext()}
       >
         Menu
       </MenuRoot>
@@ -66,7 +70,9 @@ describe("MenuRoot", () => {
     expect(await screen.findByText("Menu")).toBeInTheDocument();
 
     // Press esc key
-    await user.keyboard("{Esc}");
+    await act(async () => {
+      await user.keyboard("{Esc}");
+    });
 
     // Check that menu closes
     await waitFor(() => expect(mockCloseMenu).toHaveBeenCalled());
@@ -74,7 +80,7 @@ describe("MenuRoot", () => {
 
   it("should close when clicking outside of the menu", async () => {
     const mockCloseMenu = jest.fn();
-    const { user } = render(
+    const { user } = await actRender(
       <div>
         <MenuRoot
           menuToggleElement={
@@ -84,6 +90,7 @@ describe("MenuRoot", () => {
           }
           closeMenu={mockCloseMenu}
           isOpen
+          {...testDefaultContext()}
         >
           Menu
         </MenuRoot>
@@ -95,7 +102,9 @@ describe("MenuRoot", () => {
 
     // Click outside the menu
     const otherButton = screen.getByRole("button", { name: "Outside" });
-    await user.click(otherButton);
+    await act(async () => {
+      await user.click(otherButton);
+    });
 
     // Check that menu closes
     await waitFor(() => expect(mockCloseMenu).toHaveBeenCalled());
@@ -127,20 +136,23 @@ describe("MenuRoot", () => {
             </MenuToggleButton>
           }
           isOpen={isOpen}
+          {...testDefaultContext()}
         >
           Menu
         </MenuRoot>
       );
     };
-    const { user } = render(<TestMenu />);
+    const { user } = await actRender(<TestMenu />);
 
-    // Check that Menu is open
+    // Check that Menu is closed initially
     const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
     expect(menuTrigger).toBeInTheDocument();
     expect(screen.queryByText("Menu")).not.toBeInTheDocument();
 
     // Click the menu trigger
-    await user.click(menuTrigger);
+    await act(async () => {
+      await user.click(menuTrigger);
+    });
 
     // Check that menu opens
     expect(await screen.findByText("Menu")).toBeInTheDocument();
@@ -163,12 +175,13 @@ describe("MenuRoot", () => {
             </MenuToggleButton>
           }
           isOpen={isOpen}
+          {...testDefaultContext()}
         >
           Menu
         </MenuRoot>
       );
     };
-    const { user } = render(<TestMenu />);
+    const { user } = await actRender(<TestMenu />);
 
     // Check that Menu is open
     const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
@@ -176,7 +189,9 @@ describe("MenuRoot", () => {
     expect(await screen.findByText("Menu")).toBeInTheDocument();
 
     // Click the menu trigger
-    await user.click(menuTrigger);
+    await act(async () => {
+      await user.click(menuTrigger);
+    });
 
     // Check that menu opens
     await waitFor(() =>
@@ -187,18 +202,23 @@ describe("MenuRoot", () => {
   it("renders a custom toggle when passed to menuToggleElement", async () => {
     const mockToggleClick = jest.fn();
     const CustomToggleElement = () => {
-      const { getToggleButtonProps } = useContext(MenuContext);
+      const { getToggleButtonProps } = useContext(MenuToggleContext);
       return (
         <div role="button" {...getToggleButtonProps?.()}>
           Toggle
         </div>
       );
     };
-    const { user } = render(
+    const { user } = await actRender(
       <MenuRoot
         menuToggleElement={<CustomToggleElement />}
-        // @ts-ignore - mock contextProps may be imperfect
-        getToggleButtonProps={() => ({ onClick: mockToggleClick })}
+        {...testDefaultContext({
+          // @ts-ignore - mock contextProps may be imperfect
+          getToggleButtonProps: (props) => ({
+            onClick: mockToggleClick,
+            ...props,
+          }),
+        })}
       >
         Menu
       </MenuRoot>
@@ -206,16 +226,19 @@ describe("MenuRoot", () => {
 
     const menuTrigger = screen.getByRole("button", { name: "Toggle" });
     expect(menuTrigger).toBeInTheDocument();
-    await user.click(menuTrigger);
+    await act(async () => {
+      await user.click(menuTrigger);
+    });
 
     expect(mockToggleClick).toHaveBeenCalled();
   });
 
-  it("renders custom children", () => {
-    render(
+  it("renders custom children", async () => {
+    await actRender(
       <MenuRoot
         menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
         isOpen
+        {...testDefaultContext()}
       >
         <MenuHeader title="Menu Header" />
         <div>Custom Banner</div>
@@ -235,19 +258,18 @@ describe("MenuRoot", () => {
     ).toBeInTheDocument();
   });
 
-  it("can be implemented without using Downshift", () => {
+  it("can be implemented without using Downshift", async () => {
     const randomText = "Some random text";
     const TestCustomMenu = () => {
       const [isOpen, setIsOpen] = useState(false);
-      const getToggleButtonProps = (props) => ({
-        onClick: () => setIsOpen(!isOpen),
-        ...props,
-      });
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore - mock contextProps may be imperfect
       const contextProps: TypeMenuContextProps = {
         toggleMenu: () => setIsOpen(!isOpen),
-        getToggleButtonProps,
+        getToggleButtonProps: (props) => ({
+          onClick: () => setIsOpen(!isOpen),
+          ...props,
+        }),
         isOpen,
       };
 
@@ -258,17 +280,22 @@ describe("MenuRoot", () => {
               Open Menu (<TestComponent />)
             </MenuToggleButton>
           }
-          {...contextProps}
+          {...testDefaultContext(contextProps)}
         >
           {randomText}
         </MenuRoot>
       );
     };
-    render(<TestCustomMenu />);
+
+    await actRender(<TestCustomMenu />);
 
     expect(screen.getByText("Is closed")).toBeInTheDocument();
     expect(screen.queryByText(randomText)).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button"));
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+
     expect(screen.getByText("Is open")).toBeInTheDocument();
     expect(screen.getByText(randomText)).toBeInTheDocument();
   });
@@ -316,7 +343,7 @@ describe("MenuRoot", () => {
         <MenuRoot
           menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
           isOpen
-          {...contextProps}
+          {...testDefaultContext(contextProps)}
         >
           <TestComponent />
         </MenuRoot>