@sproutsocial/seeds-react-menu 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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/Autocomplete/AutocompleteTypes.ts

@@ -16,6 +16,7 @@ export type TypeBaseAutocompleteProps = TypeHigherOrderComponentProps &
     /** Set multiSelect to true to allow multiple selections.
      *  Default: false*/
     multiSelect?: boolean;
+    autoCloseOnEmpty?: boolean;
   };
 
 export type TypeSingleAutocompleteProps<

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -37,6 +37,7 @@ export const MultiAutocomplete = <
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
+  autoCloseOnEmpty = true,
   ...useComboboxProps
 }: TypeMultiAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -175,6 +176,7 @@ export const MultiAutocomplete = <
     <MenuRootComponent
       {...{
         isListbox: true,
+        autoCloseOnEmpty,
         items: allMenuItems,
         itemToString,
         initialSelectedItems,
@@ -192,7 +194,6 @@ export const MultiAutocomplete = <
         focusOnContent: false,
         ...userPopoutProps,
       }}
-      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -20,6 +20,7 @@ export const SingleAutocomplete = <
   MenuItemComponent,
   itemToString = defaultItemToString,
   getIsItemVisible,
+  autoCloseOnEmpty = true,
   ...useComboboxProps
 }: TypeSingleAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -63,6 +64,7 @@ export const SingleAutocomplete = <
     <MenuRootComponent
       {...{
         isListbox: true,
+        autoCloseOnEmpty,
         items: allMenuItems,
         itemToString,
         ...useComboboxProps,
@@ -73,7 +75,6 @@ export const SingleAutocomplete = <
         focusOnContent: false,
         ...userPopoutProps,
       }}
-      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -174,7 +174,7 @@ describe("Autocomplete Component", () => {
     expect(customFilter).toHaveBeenCalled();
   });
 
-  it("should close the dropdown when no items match the input", async () => {
+  it("should close the dropdown when no items match the input by default", async () => {
     const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
     const inputElement = screen.getByRole("combobox");
 
@@ -184,11 +184,26 @@ describe("Autocomplete Component", () => {
     });
 
     await waitFor(() => {
-      const listbox = screen.queryByRole("listbox");
-      expect(listbox).not.toBeInTheDocument();
+      const emptyState = screen.queryByText("No items found");
+      expect(emptyState).not.toBeInTheDocument();
     });
   });
 
+  it("should not close the dropdown when no items match the input if supplied autoCloseOnEmpty={false}", async () => {
+    const { user } = render(
+      <Autocomplete {...defaultAutocompleteProps} autoCloseOnEmpty={false} />
+    );
+    const inputElement = screen.getByRole("combobox");
+
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "something not in the list");
+    });
+
+    const emptyState = screen.getByText("No items found");
+    expect(emptyState).toBeInTheDocument();
+  });
+
   it("should apply custom popoutProps.width to the popout container", async () => {
     const { user } = render(
       <Autocomplete

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"