@sproutsocial/seeds-react-menu 1.3.0 → 1.3.2

package/package.json

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

package/src/MenuContent/MenuContent.tsx

@@ -45,6 +45,7 @@ const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
     isListbox,
     hasVisibleItems,
     autoCloseOnEmpty,
+    isInitialized,
   } = useMenuContentContext();
   const toggleButtonProps = getToggleButtonProps?.();
 
@@ -53,7 +54,7 @@ const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
       ? childrenProp
       : mapMenuItems({ menuItems, MenuItemComponent });
 
-  if (!hasVisibleItems && !autoCloseOnEmpty) {
+  if (isInitialized && !hasVisibleItems && !autoCloseOnEmpty) {
     return emptyStateElement ?? <DefaultMenuEmptyState />;
   }
 

package/src/MenuContext.tsx

@@ -122,6 +122,7 @@ export interface TypeMenuContext extends TypeMenuContextProps {
     props: Pick<TypeTokenInputProps, "inputProps"> &
       Parameters<Required<TypeMenuContextProps>["getInputProps"]>[0]
   ) => Omit<TypeDownshiftMergedInputProps<TypeTokenInputProps>, "onClick">;
+  isInitialized?: boolean;
 }
 
 export interface TypeMenuProviderProps {
@@ -152,6 +153,7 @@ export const defaultMenuContext: TypeMenuContext = {
   isItemSelected: () => false,
   getInputComponentProps: () => ({}),
   hasVisibleItems: false,
+  isInitialized: false,
 };
 
 export const getSelectedItemIds = <
@@ -253,8 +255,6 @@ export const useMenu = ({
   );
 
   const hasVisibleItems = useMemo(() => {
-    // if (!items || items.length === 0) return false;
-    // if (!rest.hiddenItemsMap) return true;
     return (hiddenItemsCount ?? 0) < items.length;
   }, [items, hiddenItemsCount]);
 
@@ -272,6 +272,7 @@ export const useMenu = ({
     contentRef,
     hasVisibleItems,
     autoCloseOnEmpty,
+    isInitialized: true,
     ...menuProps,
   };
 };

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/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),