@sproutsocial/seeds-react-menu 1.6.0 → 1.6.1

package/package.json

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

package/src/ActionMenu/ActionMenu.stories.tsx

@@ -65,11 +65,22 @@ const handleOnClick = (e: React.MouseEvent<HTMLElement>, itemName: string) => {
   action(`${itemName}`)(e);
 };
 
-export const ActionMenuSimple: Story = {
+type ActionMenuSimpleStoryArgs = ActionMenuStoryArgs & {
+  "Show Conditional Item"?: boolean;
+};
+
+export const ActionMenuSimple: StoryObj<ActionMenuSimpleStoryArgs> = {
   name: "Simple Action Menu",
   args: {
     "Trigger Text": "ActionMenu",
     "Trigger Appearance": "secondary",
+    "Show Conditional Item": false,
+  },
+  argTypes: {
+    "Show Conditional Item": {
+      control: { type: "boolean" },
+      description: "Toggle to show/hide the conditional menu item",
+    },
   },
   render: (args) => {
     return (
@@ -106,6 +117,14 @@ export const ActionMenuSimple: Story = {
             >
               This Opens a Link
             </MenuItem>
+            {args["Show Conditional Item"] && (
+              <MenuItem
+                onClick={(e) => handleOnClick(e, "Conditional Menu Item")}
+                id="conditional"
+              >
+                Conditional Menu Item
+              </MenuItem>
+            )}
           </MenuGroup>
         </MenuContent>
       </ActionMenu>

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

@@ -8,6 +8,7 @@ import {
 import {
   SingleSelectMenu,
   MultiSelectMenu,
+  ActionMenu,
   MenuContent,
   MenuGroup,
   MenuToggleButton,
@@ -284,4 +285,36 @@ describe("MenuGroup", () => {
       xit("ignores the customMenuItem prop", () => {});
     });
   });
+
+  it("supports conditionally rendered items when false", () => {
+    // Spy on console.error to catch and verify console errors
+    const consoleErrorSpy = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    render(
+      <ActionMenu
+        defaultIsOpen
+        menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+      >
+        <MenuContent>
+          <MenuGroup id="group">
+            <MenuItem id="item-1">Item 1</MenuItem>
+            {false && (
+              <MenuItem id="conditional" onClick={() => {}}>
+                Conditional Menu Item
+              </MenuItem>
+            )}
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuGroup>
+        </MenuContent>
+      </ActionMenu>
+    );
+
+    // Verify no console errors occurred during render
+    expect(consoleErrorSpy).not.toHaveBeenCalled();
+
+    // Restore console.error
+    consoleErrorSpy.mockRestore();
+  });
 });

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

@@ -10,6 +10,11 @@ export const MenuGroupTypeTest = () => (
       <MenuItem id="1">Test 1</MenuItem>
       <MenuItem id="2">Test 2</MenuItem>
     </MenuGroup>
+    {/* MenuGroup allows children with conditional MenuItems */}
+    <MenuGroup id="group">
+      <MenuItem id="1">Test 1</MenuItem>
+      {false && <MenuItem id="2">Test 2</MenuItem>}
+    </MenuGroup>
     {/* MenuGroup allows menuItems prop */}
     <MenuGroup id="group" menuItems={[{ id: "1", children: "1" }]} />
     {/* MenuGroup allows menuItems prop with MenuItemComponent */}

package/src/hooks/useMenuChildren.tsx

@@ -5,7 +5,7 @@ import type {
   TypeSubmenuValidMenuComponentProps,
 } from "../SubmenuItem";
 import type { TypeMenuContext } from "../MenuContext";
-import type { TypeMenuGroupProps, TypeMenuGroupBaseProps } from "../MenuGroup";
+import type { TypeMenuGroupProps } from "../MenuGroup";
 import type { TypeMenuRootProps } from "../MenuRoot";
 import type {
   TypeNotEmptyChildren,
@@ -46,12 +46,13 @@ const walkAllChildren = (
     if (element === null || element === undefined) return;
     callback(element, parents);
     const newParents = [...parents, element];
-    const children = (element as any).props?.children;
-    React.Children.toArray(children).forEach((child) => {
-      walk(child, newParents);
-    });
+    if (React.isValidElement(element) && element.props?.children) {
+      React.Children.toArray(element.props.children).forEach((child) => {
+        walk(child, newParents);
+      });
+    }
   };
-  const parents = [];
+  const parents: ReactNode[] = [];
   React.Children.toArray(children).forEach((child) => {
     walk(child, parents);
   });
@@ -114,22 +115,22 @@ const addItemsFromGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
       });
     });
   } else if (menuGroup.props.children) {
-    let children = menuGroup.props.children as TypeItemElement[];
-    // If there is only one child, it will be an object. Make it an array.
-    if (!Array.isArray(children)) {
-      children = [children];
-    }
+    // Convert children to array to handle both arrays and iterables
+    const children = React.Children.toArray(menuGroup.props.children);
     children.forEach((menuItem) => {
-      addMenuItem({
-        itemProps: {
-          id: menuItem.props.id,
-          disabled: menuItem.props.disabled,
-          menuItemProps: menuItem.props,
-          menuGroupProps: menuGroup.props,
-        },
-        allMenuItems,
-        menuItemsMap,
-      });
+      // Only process React elements that have props
+      if (React.isValidElement(menuItem)) {
+        addMenuItem({
+          itemProps: {
+            id: menuItem.props.id,
+            disabled: menuItem.props.disabled,
+            menuItemProps: menuItem.props,
+            menuGroupProps: menuGroup.props,
+          },
+          allMenuItems,
+          menuItemsMap,
+        });
+      }
     });
   }
 };
@@ -269,7 +270,7 @@ export const useMenuChildren = <
       });
       children = getChildrenFromMenuItems({ menuItems, MenuItemComponent });
     } else if (childrenProp) {
-      children = childrenProp as TypeNotEmptyChildren;
+      children = childrenProp;
       setMenuItemsFromChildren({
         children: childrenProp,
         allMenuItems,

package/src/types.ts

@@ -46,10 +46,8 @@ export type TypeChildrenOrItems<
       }
   );
 
-export type TypeNotEmptyChildren =
-  | React.ReactChild
-  | React.ReactFragment
-  | React.ReactPortal;
+// Type that excludes null and undefined from React.ReactNode
+export type TypeNotEmptyChildren = Exclude<React.ReactNode, null | undefined>;
 
 type TypeInputEventListeners =
   | "onKeyDown"