@sproutsocial/seeds-react-menu 1.2.2 → 1.3.0

package/package.json

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

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -74,18 +74,20 @@ export const MultiAutocomplete = <
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
 
-  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } =
-    useDownshiftDefaults({
-      isCombobox: true,
-      isMulti: true,
-      // handles the prop name mapping for multi select
-      multiSelectProps: {
-        getA11yMultiStatusMessage,
-        onMultiSelectStateChange,
-        multiSelectStateReducer,
-        ...useComboboxProps,
-      },
-    });
+  const downshiftDefaults = useDownshiftDefaults({
+    isCombobox: true,
+    isMulti: true,
+    // handles the prop name mapping for multi select
+    multiSelectProps: {
+      getA11yMultiStatusMessage,
+      onMultiSelectStateChange,
+      multiSelectStateReducer,
+      ...useComboboxProps,
+    },
+  });
+
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } =
+    downshiftDefaults;
 
   // used to handle filtering of items
   const { updateFilteredItems } = useItemFiltering({
@@ -118,9 +120,8 @@ export const MultiAutocomplete = <
   /**
    * Destructure Downshift props and call the core useCombobox with items and state handler
    */
-  const { isOpen, ...useComboboxReturnProps } = useCombobox<
-    (typeof allMenuItems)[number]
-  >({
+
+  const useComboboxReturnProps = useCombobox<(typeof allMenuItems)[number]>({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString,
@@ -160,28 +161,38 @@ export const MultiAutocomplete = <
     ...useComboboxProps,
   });
 
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  const { popoutProps: userPopoutProps } = useComboboxProps;
+
+  React.useEffect(() => {
+    if (!inputValue) return;
+    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
+
   return (
     <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
         itemToString,
-        isOpen,
         initialSelectedItems,
         onStateChange,
         onSelectedItemsChange,
         getA11yMultiStatusMessage,
         onMultiSelectStateChange,
         multiSelectStateReducer,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
         ...useMultipleSelectionReturnProps,
-        ...restDefaults,
+        ...downshiftDefaults,
       }}
       popoutProps={{
         focusOnContent: false,
+        ...userPopoutProps,
       }}
+      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useCombobox } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
@@ -27,8 +28,12 @@ export const SingleAutocomplete = <
     menuItems,
     MenuItemComponent,
   });
-  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } =
-    useDownshiftDefaults({ isCombobox: true });
+
+  const downshiftDefaults = useDownshiftDefaults({ isCombobox: true });
+
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } =
+    downshiftDefaults;
+
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString,
@@ -39,7 +44,7 @@ export const SingleAutocomplete = <
   /**
    * Destructure Downshift props and call the core useCombobox with items and state handler
    */
-  const { isOpen, ...useComboboxReturnProps } = useCombobox({
+  const useComboboxReturnProps = useCombobox({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString,
@@ -51,21 +56,24 @@ export const SingleAutocomplete = <
     ...useComboboxProps,
   });
 
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  const { popoutProps: userPopoutProps } = useComboboxProps;
+
   return (
     <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
         itemToString,
-        isOpen,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults,
+        ...downshiftDefaults,
       }}
       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);
@@ -150,18 +149,19 @@ export const MenuRoot = ({
     }
   }, [width, toggleElementRef.current?.offsetWidth]);
 
-  useEffect(() => {
-    if (!inputValue) return;
-    if (items && hiddenItemsCount >= items.length && isOpen) {
-      closeMenu?.();
-    }
-  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
-
   const menuContext = useMenu(contextProps);
 
   // 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