@sproutsocial/seeds-react-menu 1.2.3 → 1.3.0

package/package.json

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

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -162,6 +162,7 @@ export const MultiAutocomplete = <
   });
 
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  const { popoutProps: userPopoutProps } = useComboboxProps;
 
   React.useEffect(() => {
     if (!inputValue) return;
@@ -189,7 +190,9 @@ export const MultiAutocomplete = <
       }}
       popoutProps={{
         focusOnContent: false,
+        ...userPopoutProps,
       }}
+      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -57,13 +57,7 @@ export const SingleAutocomplete = <
   });
 
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
-
-  React.useEffect(() => {
-    if (!inputValue) return;
-    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
-      closeMenu?.();
-    }
-  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
+  const { popoutProps: userPopoutProps } = useComboboxProps;
 
   return (
     <MenuRootComponent
@@ -77,7 +71,9 @@ export const SingleAutocomplete = <
       }}
       popoutProps={{
         focusOnContent: false,
+        ...userPopoutProps,
       }}
+      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

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

@@ -189,6 +189,27 @@ describe("Autocomplete Component", () => {
     });
   });
 
+  it("should apply custom popoutProps.width to the popout container", async () => {
+    const { user } = render(
+      <Autocomplete
+        {...defaultAutocompleteProps}
+        popoutProps={{ width: 300 }}
+      />
+    );
+
+    const inputElement = screen.getByRole("combobox");
+
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "item");
+    });
+
+    const listbox = screen.getByRole("listbox");
+    const popoutContainer = listbox.parentElement;
+
+    expect(popoutContainer).toHaveStyle({ width: "300px" });
+  });
+
   describe("in multiSelect mode", () => {
     it("should render multiple selected items", () => {
       render(

package/src/MenuContent/DefaultMenuEmptyState.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const StyledEmptyState = styled.div`
+  padding: ${({ theme }) => theme.space[350]};
+  text-align: center;
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+`;
+
+const DefaultMenuEmptyState = ({
+  children,
+}: {
+  children?: React.ReactNode;
+}) => {
+  return <StyledEmptyState>{children || "No results found."}</StyledEmptyState>;
+};
+
+export { DefaultMenuEmptyState };

package/src/MenuContent/MenuContent.tsx

@@ -4,6 +4,7 @@ import { useMenuContentContext } from "../MenuContext";
 import { mapMenuItems } from "../hooks/useMenuChildren";
 import { useCallback } from "react";
 import type { TypeMenuItemProps } from "../MenuItem";
+import { DefaultMenuEmptyState } from "./DefaultMenuEmptyState";
 
 /**
  * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menucontent
@@ -35,10 +36,16 @@ const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   MenuItemComponent,
   onKeyDown,
   innerRef = null,
+  emptyStateElement,
   ...rest
 }: TypeMenuContentProps<I>) => {
-  const { getToggleButtonProps, getMenuProps, isListbox } =
-    useMenuContentContext();
+  const {
+    getToggleButtonProps,
+    getMenuProps,
+    isListbox,
+    hasVisibleItems,
+    autoCloseOnEmpty,
+  } = useMenuContentContext();
   const toggleButtonProps = getToggleButtonProps?.();
 
   const children =
@@ -46,6 +53,11 @@ const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
       ? childrenProp
       : mapMenuItems({ menuItems, MenuItemComponent });
 
+  if (!hasVisibleItems && !autoCloseOnEmpty) {
+    return emptyStateElement ?? <DefaultMenuEmptyState />;
+  }
+
+  // Hides the content if there are no children and it shouldn't show the empty state
   if (!children) {
     return null;
   }

package/src/MenuContent/MenuContentTypes.ts

@@ -5,4 +5,6 @@ export type TypeMenuContentProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
 > = Omit<React.ComponentPropsWithoutRef<"ul">, "children"> & {
   innerRef?: React.Ref<HTMLUListElement>;
+  /* Custom component to display when no menu items are visible (e.g. "No results found"). */
+  emptyStateElement?: React.ReactNode;
 } & TypeChildrenOrItems<I>;

package/src/MenuContent/__tests__/MenuContent.test.tsx

@@ -1,14 +1,28 @@
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { MenuFooter, MenuHeader, MenuContent } from "../../index";
 import Button from "@sproutsocial/seeds-react-button";
+import {
+  testMenuToggleElement,
+  TestWithMenuRoot,
+} from "../../menuTestingUtils";
+
+const mockMenuContext = {
+  isOpen: true,
+};
 
 describe("MenuContent API", () => {
   it("should render correctly with default props", () => {
     render(
-      <MenuContent data-testid="menu-content">
-        <div>Test Child</div>
-      </MenuContent>
+      <TestWithMenuRoot
+        menuToggleElement={testMenuToggleElement}
+        {...mockMenuContext}
+      >
+        <MenuContent data-testid="menu-content">
+          <div>Test Child</div>
+        </MenuContent>
+      </TestWithMenuRoot>
     );
+
     const menuContent = screen.getByTestId("menu-content");
     expect(menuContent).toBeInTheDocument();
     expect(menuContent).toHaveAttribute("tabIndex", "0");
@@ -18,21 +32,28 @@ describe("MenuContent API", () => {
 describe("MenuContent Behavior", () => {
   it("focus should move properly through menu", async () => {
     const { user } = render(
-      <div>
-        <MenuHeader>
-          <Button data-testid="menu-header-button" onClick={() => {}}>
-            Button
-          </Button>
-        </MenuHeader>
-        <MenuContent data-testid="menu-content">
-          <div>Test Child</div>
+      <TestWithMenuRoot
+        menuToggleElement={testMenuToggleElement}
+        {...mockMenuContext}
+      >
+        <MenuContent>
+          <div>
+            <MenuHeader>
+              <Button data-testid="menu-header-button" onClick={() => {}}>
+                Button
+              </Button>
+            </MenuHeader>
+            <MenuContent data-testid="menu-content">
+              <div>Test Child</div>
+            </MenuContent>
+            <MenuFooter>
+              <Button data-testid="menu-footer-button" onClick={() => {}}>
+                Button 2
+              </Button>
+            </MenuFooter>
+          </div>
         </MenuContent>
-        <MenuFooter>
-          <Button data-testid="menu-footer-button" onClick={() => {}}>
-            Button 2
-          </Button>
-        </MenuFooter>
-      </div>
+      </TestWithMenuRoot>
     );
 
     const menuHeaderButton = screen.getByTestId("menu-header-button");

package/src/MenuContext.tsx

@@ -111,6 +111,8 @@ export interface TypeMenuContextProps
   itemsMap?: { [key: string]: TypeInternalItemProps };
   selectedItemIds?: { [key: string]: boolean };
   isListbox?: boolean;
+  hasVisibleItems?: boolean;
+  autoCloseOnEmpty?: boolean;
 }
 
 export interface TypeMenuContext extends TypeMenuContextProps {
@@ -149,6 +151,7 @@ export const defaultMenuContext: TypeMenuContext = {
   itemsMap: {},
   isItemSelected: () => false,
   getInputComponentProps: () => ({}),
+  hasVisibleItems: false,
 };
 
 export const getSelectedItemIds = <
@@ -185,6 +188,8 @@ export const useMenu = ({
   selectedItems,
   getInputProps,
   contentRef: contentRefFromProps,
+  autoCloseOnEmpty,
+  hiddenItemsCount,
   ...rest
 }: Partial<TypeMenuContextProps> = {}): TypeMenuContext => {
   const contentRef = contentRefFromProps || React.createRef<HTMLUListElement>();
@@ -247,6 +252,12 @@ export const useMenu = ({
     [getInputProps]
   );
 
+  const hasVisibleItems = useMemo(() => {
+    // if (!items || items.length === 0) return false;
+    // if (!rest.hiddenItemsMap) return true;
+    return (hiddenItemsCount ?? 0) < items.length;
+  }, [items, hiddenItemsCount]);
+
   return {
     isOpen,
     isListbox,
@@ -259,6 +270,8 @@ export const useMenu = ({
     getInputProps,
     getInputComponentProps,
     contentRef,
+    hasVisibleItems,
+    autoCloseOnEmpty,
     ...menuProps,
   };
 };

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

@@ -18,7 +18,11 @@ import {
   MultiSelectMenu,
   INPUT_TYPES,
 } from "../../index";
-import { TestWithMenuRoot, TestWithMockedMenu } from "../../menuTestingUtils";
+import {
+  testMenuToggleElement,
+  TestWithMenuRoot,
+  TestWithMockedMenu,
+} from "../../menuTestingUtils";
 
 const books = [
   {
@@ -35,19 +39,6 @@ const menuItemProps = {
   id: "book-id",
   children: "Book Title",
 };
-const testMenuContext = {
-  isOpen: true,
-  closeMenu: jest.fn(),
-  openMenu: jest.fn(),
-  getMenuProps: jest.fn((props) => props),
-  getToggleButtonProps: jest.fn((props) => ({
-    onKeyDown: jest.fn(),
-    ...props,
-  })),
-  getItemProps: jest.fn((props) => ({ ...props })),
-  isListbox: false,
-};
-const testMenuToggleElement = <MenuToggleButton>Open</MenuToggleButton>;
 
 const INTERACTION_TYPES = {
   click: {
@@ -108,6 +99,12 @@ describe("MenuItem when not isListbox", () => {
     describe("is clickable", () => {
       it("fires onClick event when clicked and not disabled", async () => {
         const handleClick = jest.fn();
+
+        const testMenuContext = {
+          isOpen: true,
+          isListbox: false,
+        };
+
         const { user } = render(
           <TestWithMenuRoot
             menuToggleElement={testMenuToggleElement}

package/src/MenuRoot/MenuRoot.tsx

@@ -129,9 +129,8 @@ export const MenuRoot = ({
     openMenu,
     closeMenu,
     inputValue,
-    hiddenItemsCount = 0,
-    items,
     getMenuProps,
+    autoCloseOnEmpty = false,
   } = contextProps;
 
   const toggleElementRef = React.useRef<HTMLElement>(null);
@@ -155,6 +154,14 @@ export const MenuRoot = ({
   // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
   getMenuProps?.({}, { suppressRefError: true });
 
+  useEffect(() => {
+    if (!inputValue || !autoCloseOnEmpty) return;
+
+    if (!menuContext.hasVisibleItems && isOpen) {
+      closeMenu?.();
+    }
+  }, [menuContext.hasVisibleItems, isOpen, inputValue, autoCloseOnEmpty]);
+
   return (
     <MenuPopout
       placement={placement}

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -230,3 +230,47 @@ export const SingleSelectMenuWithSearch: Story = {
     );
   },
 };
+
+export const SingleSelectMenuWithCustomEmpty: Story = {
+  name: "Single Select  Menu With Custom Empty State",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        onStateChange={(changes) => action("onStateChange")(changes)}
+        {...(args as object)}
+      >
+        <MenuHeader title="Select Book">
+          <MenuSearchInput
+            id="single-select-search"
+            name="search"
+            type="search"
+            aria-label="Search Books"
+          />
+        </MenuHeader>
+        <MenuContent
+          emptyStateElement={
+            <div
+              style={{
+                color: "red",
+                fontStyle: "italic",
+                padding: "12px",
+                fontSize: "14px",
+                textAlign: "center",
+              }}
+            >
+              No results found. Try something else...
+            </div>
+          }
+        >
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id} inputType={inputType}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};

package/src/menuTestingUtils.tsx

@@ -2,14 +2,15 @@ import React from "react";
 import {
   MenuContentContext,
   MenuRoot,
-  checkIfItemSelected,
-  getSelectedItemIds,
   useMenu,
   type TypeMenuContextProps,
   type TypeMenuContext,
   type TypeMenuRootProps,
+  MenuToggleButton,
 } from "./index";
 
+export const testMenuToggleElement = <MenuToggleButton>Open</MenuToggleButton>;
+
 export const testDefaultContext = ({
   getToggleButtonProps,
   ...context
@@ -24,14 +25,18 @@ export const testDefaultContext = ({
   // TODO: Make type on MenuContentContext more agnostic for other use cases
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error - mocked function does not match real type
-  getItemProps: (props) => ({ role: "option", ...props }),
+  getItemProps: jest.fn((props) => ({ role: "option", ...props })),
   // @ts-expect-error - mocked function does not match real type
-  getToggleButtonProps: ({ ref, refKey, ...props } = {}) => ({
+  getToggleButtonProps: jest.fn(({ ref, refKey = "ref", ...props } = {}) => ({
+    onKeyDown: jest.fn(),
     ...getToggleButtonProps?.({ ref, refKey, ...props }),
     ...(ref ? { [refKey]: ref } : {}),
     ...props,
-  }),
+  })),
+  // @ts-expect-error - mocked function does not match real type
+  getMenuProps: jest.fn((props) => props),
   isListbox: true,
+  hasVisibleItems: true,
   ...context,
 });
 
@@ -45,11 +50,11 @@ export const testDefaultContext = ({
  */
 export const TestWithMenuRoot = ({
   children,
-  menuToggleElement,
+  menuToggleElement = testMenuToggleElement,
   ...props
 }: {
   children: TypeMenuRootProps["children"];
-  menuToggleElement: TypeMenuRootProps["menuToggleElement"];
+  menuToggleElement?: TypeMenuRootProps["menuToggleElement"];
 } & Partial<Omit<TypeMenuRootProps, "children" | "menuToggleElement">>) => {
   return (
     <MenuRoot