@sproutsocial/seeds-react-menu 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/MenuContent/MenuContentTypes.ts

@@ -1,9 +1,30 @@
+import type {
+  TypeBorderSystemProps,
+  TypeColorSystemProps,
+  TypeFlexboxSystemProps,
+  TypeGridSystemProps,
+  TypeLayoutSystemProps,
+  TypePositionSystemProps,
+  TypeSpaceSystemProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 
+export interface TypeMenuContentContainerProps
+  extends Omit<React.ComponentPropsWithoutRef<"ul">, "children" | "color">,
+    TypeStyledComponentsCommonProps,
+    TypeBorderSystemProps,
+    TypeColorSystemProps,
+    TypeFlexboxSystemProps,
+    TypeGridSystemProps,
+    TypeLayoutSystemProps,
+    TypeSpaceSystemProps,
+    TypePositionSystemProps {}
+
 export type TypeMenuContentProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> = Omit<React.ComponentPropsWithoutRef<"ul">, "children"> & {
+> = TypeMenuContentContainerProps & {
   innerRef?: React.Ref<HTMLUListElement>;
   /* Custom component to display when no menu items are visible (e.g. "No results found"). */
   emptyStateElement?: React.ReactNode;

package/src/MenuContent/styles.tsx

@@ -1,11 +1,30 @@
 import styled from "styled-components";
+import {
+  border,
+  color,
+  flexbox,
+  grid,
+  layout,
+  position,
+  space,
+} from "styled-system";
+import type { TypeMenuContentProps } from "./MenuContentTypes";
 
-export const StyledMenuContent = styled.ul`
+export const StyledMenuContent = styled.ul<TypeMenuContentProps>`
   margin: 0;
   padding: 0;
+  overflow: auto;
 
   &:focus {
     outline: none;
     box-shadow: none;
   }
+
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+  ${position}
 `;

package/src/MenuRoot/MenuRoot.tsx

@@ -39,9 +39,11 @@ export const CustomPopoutContent = styled(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
+  overflow: hidden;
 `;
 
 const menuAnimationConfig = {
+  layout: true,
   initial: {
     scale: 0,
     opacity: 0,

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

@@ -267,8 +267,11 @@ describe("MenuRoot", () => {
       const contextProps: TypeMenuContextProps = {
         toggleMenu: () => setIsOpen(!isOpen),
         getToggleButtonProps: (props) => ({
-          onClick: () => setIsOpen(!isOpen),
           ...props,
+          onClick: () => {
+            props.onClick?.();
+            setIsOpen(!isOpen);
+          },
         }),
         isOpen,
       };
@@ -300,6 +303,50 @@ describe("MenuRoot", () => {
     expect(screen.getByText(randomText)).toBeInTheDocument();
   });
 
+  it("calls user-supplied onClick when MenuToggleButton is clicked", async () => {
+    const userOnClick = jest.fn();
+
+    const TestCustomMenu = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore - mock contextProps may be imperfect
+      const contextProps: TypeMenuContextProps = {
+        toggleMenu: () => setIsOpen(!isOpen),
+        getToggleButtonProps: (props) => ({
+          ...props,
+          onClick: (e) => {
+            props.onClick?.(e);
+            setIsOpen(!isOpen);
+          },
+        }),
+        isOpen,
+      };
+
+      return (
+        <MenuRoot
+          menuToggleElement={
+            <MenuToggleButton onClick={userOnClick} appearance="secondary">
+              Open Menu
+            </MenuToggleButton>
+          }
+          {...testDefaultContext(contextProps)}
+        >
+          Menu Content
+        </MenuRoot>
+      );
+    };
+
+    await actRender(<TestCustomMenu />);
+
+    const button = screen.getByRole("button", { name: /open menu/i });
+
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    expect(userOnClick).toHaveBeenCalledTimes(1);
+  });
+
   const contextTests: {
     child: string;
     TestComponent: React.FC;

package/src/MenuToggleButton/MenuToggleButton.tsx

@@ -1,5 +1,6 @@
 import { Button, type TypeButtonProps } from "@sproutsocial/seeds-react-button";
 import { useMenuToggleContext } from "../MenuContext";
+import type React from "react";
 
 export interface TypeMenuToggleButtonProps extends TypeButtonProps {}
 
@@ -13,17 +14,35 @@ export interface TypeMenuToggleButtonProps extends TypeButtonProps {}
 export const MenuToggleButton = (props: TypeMenuToggleButtonProps) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } =
     useMenuToggleContext();
+
+  const {
+    onClick: userOnClick,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    ...restProps
+  } = props;
+
+  const defaultDropdownProps = {
+    ref,
+    onClick: userOnClick,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+  };
+
+  const dropdownProps =
+    getDropdownProps?.({
+      ...defaultDropdownProps,
+      preventKeyAction: true,
+    }) ?? defaultDropdownProps;
+
+  const toggleButtonProps = getToggleButtonProps?.({
+    ...dropdownProps,
+    refKey: "innerRef",
+    ...ariaProps,
+    ...(isListbox ? {} : { role: "button", "aria-haspopup": "menu" }),
+  });
+
   return (
-    <Button
-      appearance="secondary"
-      {...getToggleButtonProps?.({
-        // Decide if we want the preventKeyAction stuff. Maybe create a prop to allow for this to be overriden.
-        ...(getDropdownProps?.({ ref, preventKeyAction: true }) || { ref }),
-        refKey: "innerRef",
-        ...ariaProps,
-        ...(isListbox ? {} : { role: "button", "aria-haspopup": "menu" }),
-      })}
-      {...props}
-    />
+    <Button appearance="secondary" {...toggleButtonProps} {...restProps} />
   );
 };

package/src/NestedMenu/NestedMenu.stories.tsx

@@ -13,6 +13,7 @@ import {
   MultiSelectMenu,
   NestedMenu,
   MenuSearchInput,
+  MenuSearchTokenInput,
 } from "../index";
 import { NestedMenuItem } from "./NestedMenuItem";
 import { NestedMenuContent } from "./NestedMenuContent";
@@ -89,11 +90,16 @@ const menus = {
   "books-action": {
     MenuComponent: ActionMenu,
     menuProps: {
-      menuItems: TEST_BOOKS.map((book) => ({
-        id: book.id,
-        children: book.title,
-        childMenuId: "edit-book",
-      })),
+      children: (
+        <NestedMenuContent
+          menuItems={TEST_BOOKS.map((book) => ({
+            id: book.id,
+            children: book.title,
+            childMenuId: "edit-book",
+          }))}
+          // maxHeight="300px"
+        />
+      ),
     },
     menuHeaderProps: {
       title: "Manage Books",
@@ -103,24 +109,36 @@ const menus = {
     MenuComponent: MultiSelectMenu,
     menuProps: {
       itemToString: (item) => item.menuItemProps.children,
-      menuItems: TEST_BOOKS.map((book) => ({
-        id: book.id,
-        children: book.title,
-      })),
+      children: (
+        <NestedMenuContent
+          menuItems={TEST_BOOKS.map((book) => ({
+            id: book.id,
+            children: book.title,
+          }))}
+          // maxHeight="300px"
+        />
+      ),
     },
     menuHeaderProps: {
       title: "Select Books",
-      children: <MenuSearchInput id="nested-search" name="nested-search" />,
+      children: (
+        <MenuSearchTokenInput id="nested-search" name="nested-search" />
+      ),
     },
   },
   "books-select": {
     MenuComponent: SingleSelectMenu,
     menuProps: {
       itemToString: (item) => item.menuItemProps.children,
-      menuItems: TEST_BOOKS.map((book) => ({
-        id: book.id,
-        children: book.title,
-      })),
+      children: (
+        <NestedMenuContent
+          menuItems={TEST_BOOKS.map((book) => ({
+            id: book.id,
+            children: book.title,
+          }))}
+          // maxHeight="300px"
+        />
+      ),
     },
     menuHeaderProps: {
       title: "Select One Book",
@@ -167,6 +185,9 @@ export const NestedMenuMultiLevelStory: Story = {
             menuToggleElement={
               <MenuToggleButton width="200px">Open Menu</MenuToggleButton>
             }
+            popoutProps={{
+              placement: "top",
+            }}
           />
         </Box>
       </MotionConfig>

package/src/NestedMenu/NestedMenu.tsx

@@ -1,5 +1,5 @@
 import { useId, useEffect, useState } from "react";
-import { AnimatePresence, LayoutGroup, motion } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import { useSelect } from "downshift";
 
 import { useDownshiftDefaults } from "../hooks/useDownshiftDefaults";
@@ -31,7 +31,10 @@ export const NestedMenu = <
   onBackButtonClick,
   backArrowLabel,
   menuToggleElement,
-  popoutProps = {},
+  popoutProps: {
+    scheduleUpdateRef: externalPopoutUpdateRef,
+    ...restPopoutProps
+  } = {},
   width = "300px",
   stateReducer: rootExternalStateReducer,
   id: externalNestedMenuId,
@@ -96,6 +99,8 @@ export const NestedMenu = <
     useState<TypeMenuContext>(defaultMenuContext);
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
   const [isAdding, setIsAdding] = useState(false);
+  const [popoutUpdateRef, setPopoutUpdateRef] =
+    useState<() => void | undefined>();
 
   const setSelectedMenuId = (id: string) => {
     setIsAdding(true);
@@ -108,6 +113,7 @@ export const NestedMenu = <
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
+      popoutUpdateRef?.();
     }
   }, [selectedMenuPath.join("-")]);
 
@@ -272,7 +278,11 @@ export const NestedMenu = <
         }
         menuToggleElement={menuToggleElement}
         width={width}
-        {...popoutProps}
+        scheduleUpdateRef={(callback) => {
+          setPopoutUpdateRef(callback);
+          externalPopoutUpdateRef?.(callback);
+        }}
+        {...restPopoutProps}
       />
     </NestedMenuProvider>
   );

package/src/NestedMenu/NestedMenuPopout.tsx

@@ -16,6 +16,7 @@ export const NestedMenuPopout = ({
   content,
   menuToggleElement,
   width,
+  onClose,
   ...popoutProps
 }: Omit<TypeMenuPopoutProps, "children"> & {
   menuToggleElement: TypeMenuRootProps["menuToggleElement"];
@@ -25,9 +26,13 @@ export const NestedMenuPopout = ({
 
   return (
     <MenuPopout
-      {...popoutProps}
+      // TODO: add after prop is added to Popout
+      // lockPlacement
       // Reset the selected menu path after the close animation completes
-      onClose={() => setTimeout(() => resetSelectedMenuPath?.(), 100)}
+      onClose={() => {
+        onClose?.();
+        setTimeout(() => resetSelectedMenuPath?.(), 100);
+      }}
       isOpen={!!rootMenuContextProps.isOpen}
       openMenu={rootMenuContextProps.openMenu}
       closeMenu={rootMenuContextProps.closeMenu}
@@ -37,6 +42,7 @@ export const NestedMenuPopout = ({
           {typeof content === "function" ? content(props) : content}
         </StyledDiv>
       )}
+      {...popoutProps}
     >
       {(toggleProps) => (
         <MenuToggleProvider

package/src/menuTestingUtils.tsx

@@ -29,9 +29,9 @@ export const testDefaultContext = ({
   // @ts-expect-error - mocked function does not match real type
   getToggleButtonProps: jest.fn(({ ref, refKey = "ref", ...props } = {}) => ({
     onKeyDown: jest.fn(),
-    ...getToggleButtonProps?.({ ref, refKey, ...props }),
     ...(ref ? { [refKey]: ref } : {}),
     ...props,
+    ...getToggleButtonProps?.({ ref, refKey, ...props }),
   })),
   // @ts-expect-error - mocked function does not match real type
   getMenuProps: jest.fn((props) => props),