@sproutsocial/seeds-react-menu 0.6.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -17,19 +17,19 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.1",
-    "@sproutsocial/seeds-react-button": "^1.2.0",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.0",
-    "@sproutsocial/seeds-react-icon": "^1.1.1",
-    "@sproutsocial/seeds-react-input": "^1.3.1",
-    "@sproutsocial/seeds-react-label": "^1.0.0",
-    "@sproutsocial/seeds-react-popout": "^2.1.0",
-    "@sproutsocial/seeds-react-radio": "^1.2.0",
-    "@sproutsocial/seeds-react-switch": "^1.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-theme": "^2.2.0",
-    "@sproutsocial/seeds-react-token-input": "^1.0.1",
-    "@sproutsocial/seeds-react-utilities": "^4.1.0",
+    "@sproutsocial/seeds-react-box": "^1.1.2",
+    "@sproutsocial/seeds-react-button": "^1.2.1",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.1",
+    "@sproutsocial/seeds-react-icon": "^1.1.2",
+    "@sproutsocial/seeds-react-input": "^1.4.1",
+    "@sproutsocial/seeds-react-label": "^1.0.1",
+    "@sproutsocial/seeds-react-popout": "^2.1.1",
+    "@sproutsocial/seeds-react-radio": "^1.3.0",
+    "@sproutsocial/seeds-react-switch": "^1.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.0.2",
+    "@sproutsocial/seeds-react-theme": "^2.3.0",
+    "@sproutsocial/seeds-react-token-input": "^1.3.0",
+    "@sproutsocial/seeds-react-utilities": "^4.2.0",
     "downshift": "9.0.4",
     "motion": "^11.11.17"
   },

package/src/ActionMenu/ActionMenu.stories.tsx

@@ -160,6 +160,7 @@ export const ActionMenuWithIcons: Story = {
       "pencil-to-square-outline",
       "envelope-outline",
       "chart-area-outline",
+      "circle-question-outline",
     ],
     "Trigger Appearance": "secondary",
   },
@@ -181,13 +182,9 @@ export const ActionMenuWithIcons: Story = {
               key={0}
               id="Compose"
             >
-              <Box
-                display="flex"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                Compose
+              <Box display="flex" alignItems="center" gap="300">
                 <Icon name={args["icons"][0] as TypeIconName} />
+                Compose
               </Box>
             </MenuItem>
             <MenuItem
@@ -195,13 +192,9 @@ export const ActionMenuWithIcons: Story = {
               key={1}
               id="View Messages"
             >
-              <Box
-                display="flex"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                View Messages
+              <Box display="flex" alignItems="center" gap="300">
                 <Icon name={args["icons"][1] as TypeIconName} />
+                View Messages
               </Box>
             </MenuItem>
             <MenuItem
@@ -209,13 +202,20 @@ export const ActionMenuWithIcons: Story = {
               key={2}
               id="Analyze post"
             >
-              <Box
-                display="flex"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                Analyze Post
+              <Box display="flex" alignItems="center" gap="300">
                 <Icon name={args["icons"][2] as TypeIconName} />
+                Analyze Post
+              </Box>
+            </MenuItem>
+            <MenuItem href="https://sproutsocial.com" target="_blank" id="help">
+              <Box display="flex" alignItems="center" gap="300">
+                <Icon name={args["icons"][3] as TypeIconName} />
+                Visit Help Center
+                <Icon
+                  name="arrow-right-up"
+                  aria-label="open in a new window"
+                  style={{ marginLeft: "auto" }}
+                />
               </Box>
             </MenuItem>
           </MenuGroup>
@@ -225,13 +225,9 @@ export const ActionMenuWithIcons: Story = {
               key={3}
               id="Settings"
             >
-              <Box
-                display="flex"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                Settings
+              <Box display="flex" alignItems="center" gap="300">
                 <Icon name="gear-outline" />
+                Settings
               </Box>
             </MenuItem>
           </MenuGroup>

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -17,7 +17,6 @@ import { getSelectedItemIds } from "../MenuContext";
 import { MenuRoot } from "../MenuRoot";
 
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMultiAutocompleteProps } from "./AutocompleteTypes";
 
 export const MultiAutocomplete = <

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

@@ -174,6 +174,21 @@ describe("Autocomplete Component", () => {
     expect(customFilter).toHaveBeenCalled();
   });
 
+  it("should close the dropdown when no items match the input", async () => {
+    const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
+    const inputElement = screen.getByRole("combobox");
+
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "something not in the list");
+    });
+
+    await waitFor(() => {
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
+  });
+
   describe("in multiSelect mode", () => {
     it("should render multiple selected items", () => {
       render(
@@ -330,5 +345,26 @@ describe("Autocomplete Component", () => {
         })
       ).toBeInTheDocument();
     });
+
+    it("should close the dropdown when no items match the input", async () => {
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          multiSelect
+        />
+      );
+      const inputElement = screen.getByRole("combobox");
+
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "something not in the list");
+      });
+
+      await waitFor(() => {
+        const listbox = screen.queryByRole("listbox");
+        expect(listbox).not.toBeInTheDocument();
+      });
+    });
   });
 });

package/src/MenuContent/MenuContent.tsx

@@ -82,4 +82,6 @@ const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   );
 };
 
+MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
+
 export { MenuContent };

package/src/MenuContext.tsx

@@ -57,6 +57,7 @@ export interface TypeMenuContextBaseProps {
   itemsMap?: { [key: string]: TypeInternalItemProps };
   isListbox?: boolean;
   hiddenItemsMap?: Record<string, boolean>;
+  hiddenItemsCount?: number;
   setHiddenItemsMap?: React.Dispatch<
     React.SetStateAction<Record<string, boolean>>
   >;
@@ -202,7 +203,7 @@ export const useMenu = ({
 
   const isItemSelected = React.useCallback(
     (id: string) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
-    [selectedItem, selectedItemIds]
+    [selectedItem?.id, selectedItemIds]
   );
 
   const getInputComponentProps = React.useCallback<

package/src/MenuFooter/styles.tsx

@@ -2,6 +2,6 @@ import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 
 export const StyledMenuFooterBox = styled(Box)`
-  padding: ${(p) => p.theme.space[400]};
+  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;

package/src/MenuGroup/MenuGroup.tsx

@@ -25,7 +25,7 @@ import { mapMenuItems } from "../hooks/useMenuChildren";
  * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
  */
 
-export const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
+const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   titleAs = "h3",
   children: childrenProp,
   title,
@@ -68,3 +68,7 @@ export const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
     </StyledMenuGroup>
   );
 };
+
+MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
+
+export { MenuGroup };

package/src/MenuGroup/styles.tsx

@@ -29,7 +29,7 @@ export const StyledMenuGroup = styled.li<TypeMenuGroupBaseProps>`
 `;
 
 export const StyledTitle = styled(Text.SmallSubHeadline)`
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
   margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
     0px ${({ theme }) => theme.space[400]};
 `;

package/src/MenuHeader/MenuHeader.tsx

@@ -22,17 +22,20 @@ const MenuHeader = ({
   rightAction,
   ...rest
 }: TypeMenuHeaderProps) => {
+  const showTopRow = title || leftAction || rightAction;
   return (
     <>
       <MenuHeaderContainer $leftAction={!!leftAction} {...rest}>
-        <MenuHeaderFeatures $leftAction={!!leftAction}>
-          {leftAction && leftAction}
-          {title && (
-            <MenuTitleText $leftAction={!!leftAction}>{title}</MenuTitleText>
-          )}
+        {showTopRow && (
+          <MenuHeaderFeatures $leftAction={!!leftAction}>
+            {leftAction && leftAction}
+            {title && (
+              <MenuTitleText $leftAction={!!leftAction}>{title}</MenuTitleText>
+            )}
 
-          {rightAction && <div className="right-action">{rightAction}</div>}
-        </MenuHeaderFeatures>
+            {rightAction && <div className="right-action">{rightAction}</div>}
+          </MenuHeaderFeatures>
+        )}
 
         {children && <MenuChildrenContainer>{children}</MenuChildrenContainer>}
       </MenuHeaderContainer>

package/src/MenuHeader/styles.tsx

@@ -52,6 +52,10 @@ export const MenuTitleText = styled.h3<TypeMenuHeaderContainerProps>`
 export const MenuChildrenContainer = styled.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme }) => theme.space[300]};
+
+  &:first-child {
+    margin-top: 0;
+  }
 `;
 
 export const MenuHeaderFeatures = styled.div<TypeMenuHeaderContainerProps>`

package/src/MenuItem/MenuItem.tsx

@@ -11,7 +11,7 @@ import { useOptionProps } from "./useOptionProps";
 //   radio: "menuitemradio",
 // } as const;
 
-export const MenuItem = ({
+const MenuItem = ({
   id,
   children,
   onClick,
@@ -69,3 +69,7 @@ export const MenuItem = ({
     </MenuItemContainer>
   );
 };
+
+MenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
+
+export { MenuItem };

package/src/MenuItem/styles.tsx

@@ -19,8 +19,10 @@ const highlightedStyles = css`
 `;
 
 const activeStyles = css`
-  background-color: ${({ theme }) => theme.colors.listItem.background.active};
-  color: ${({ theme }) => theme.colors.text.inverse};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.border.base};
+  background-color: ${({ theme }) => theme.colors.menuItem.background.active};
+  color: ${({ theme }) => theme.colors.text.body};
+  text-decoration: none;
 `;
 
 export const MenuItemContainer = styled.li`

package/src/MenuItem/useOptionProps.tsx

@@ -83,11 +83,11 @@ export const useOptionProps = ({
   inputLabelId,
   ...props
 }: TypeMenuItemProps) => {
-  const { selectedItem, selectedItems, isListbox, isItemSelected } =
+  const { selectedItem, selectedItemIds, isListbox, isItemSelected } =
     useMenuContentContext();
   const selected = useMemo(
     () => isItemSelected(id),
-    [selectedItem, selectedItems]
+    [selectedItem?.id, selectedItemIds]
   );
 
   const label = inputLabelId || `menu-item-child-${id}`;

package/src/MenuRoot/MenuRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 
@@ -9,7 +9,6 @@ import {
   type TypeMenuContextProps,
   type TypeMenuProviderProps,
 } from "../MenuContext";
-import type { TypeInternalItemProps } from "../types";
 
 export interface TypeMenuRootOwnProps {
   menuToggleElement: React.ReactElement<any>;
@@ -42,7 +41,14 @@ export const MenuRoot = ({
   width = "300px",
   ...contextProps
 }: TypeMenuRootProps) => {
-  const { isOpen, openMenu, closeMenu } = contextProps;
+  const {
+    isOpen,
+    openMenu,
+    closeMenu,
+    inputValue,
+    hiddenItemsCount = 0,
+    items,
+  } = contextProps;
   const setIsOpen = useCallback(
     (newIsOpen: boolean) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
@@ -50,6 +56,14 @@ export const MenuRoot = ({
     [openMenu, closeMenu]
   );
 
+  useEffect(() => {
+    if (!inputValue) return;
+
+    if (items && hiddenItemsCount >= items.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
+
   const menuContext = useMenu(contextProps);
 
   return (

package/src/MenuSearchInput/MenuSearchInput.tsx

@@ -4,22 +4,34 @@ import {
   useItemFiltering,
   type TypeGetIsItemVisibleFn,
 } from "../hooks/useItemFiltering";
-import { useMenuContentContext } from "../MenuContext";
+import {
+  useMenuContentContext,
+  type TypeDownshiftSelectReturnValue,
+} from "../MenuContext";
 
 export interface TypeMenuSearchInputProps extends TypeInputProps {
   /* A function that can be passed to override the default filtering logic */
   getIsItemVisible?: TypeGetIsItemVisibleFn;
 }
 
+/**
+ * <input
+ *  aria-activedescendant=""
+ *  aria-autocomplete="list"
+ *  aria-controls="downshift-:r1:-menu"
+ *  aria-expanded="true"
+ * />
+ */
+
 /**
  * @link https://seeds.sproutsocial.com/components/menu-header/
  *
  * @description MenuSearchInput is search input that can be added to the MenuHeader to filter the items.
  */
-
 export const MenuSearchInput = ({
   getIsItemVisible,
-  ...inputProps
+  inputProps,
+  ...restInputProps
 }: TypeMenuSearchInputProps) => {
   const {
     items,
@@ -37,16 +49,20 @@ export const MenuSearchInput = ({
 
   React.useEffect(() => {
     // handles when open/close state changes or if input is controlled
-    updateFilteredItems({ inputValue: inputProps.value || "" });
-  }, [isOpen, inputProps.value]);
+    updateFilteredItems({ inputValue: restInputProps.value || "" });
+  }, [isOpen, restInputProps.value]);
+
+  const toggleButtonProps: Partial<
+    ReturnType<Required<TypeDownshiftSelectReturnValue>["getToggleButtonProps"]>
+  > = getToggleButtonProps?.() || {};
 
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       // prevents selecting items with space key when input is focused
       if (e.key === " ") return;
-      getToggleButtonProps?.()["onKeyDown"](e);
+      toggleButtonProps.onKeyDown?.(e);
     },
-    [getToggleButtonProps]
+    [toggleButtonProps.onKeyDown]
   );
 
   return (
@@ -57,7 +73,13 @@ export const MenuSearchInput = ({
       // apply onKeyDown logic for downshift keyboard accessibility support
       onKeyDown={handleKeyDown}
       autoComplete={false}
-      {...inputProps}
+      aria-autocomplete="list"
+      inputProps={{
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
+        ...inputProps,
+      }}
+      {...restInputProps}
     />
   );
 };

package/src/MenuSearchTokenInput/MenuSearchTokenInput.tsx

@@ -3,7 +3,11 @@ import {
   useItemFiltering,
   type TypeGetIsItemVisibleFn,
 } from "../hooks/useItemFiltering";
-import { MenuContentContext, useMenuContentContext } from "../MenuContext";
+import {
+  MenuContentContext,
+  useMenuContentContext,
+  type TypeDownshiftSelectReturnValue,
+} from "../MenuContext";
 import {
   MenuTokenInput,
   type TypeMenuTokenInputProps,
@@ -70,13 +74,17 @@ export const MenuSearchTokenInput = ({
     updateFilteredState(controlledValue);
   }, [isOpen]);
 
+  const toggleButtonProps: Partial<
+    ReturnType<Required<TypeDownshiftSelectReturnValue>["getToggleButtonProps"]>
+  > = getToggleButtonProps?.() || {};
+
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       // prevents selecting items with space key when input is focused
       if (e.key === " ") return;
-      getToggleButtonProps?.()["onKeyDown"](e);
+      toggleButtonProps.onKeyDown?.(e);
     },
-    [getToggleButtonProps]
+    [toggleButtonProps.onKeyDown]
   );
 
   return (
@@ -89,6 +97,8 @@ export const MenuSearchTokenInput = ({
       onKeyDown={handleKeyDown}
       inputProps={{
         value: internalValue,
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
         ...inputProps,
       }}
       MenuContext={MenuContentContext}

package/src/MultiSelectMenu/MultiSelectMenu.stories.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 
 import { Box } from "@sproutsocial/seeds-react-box";
+import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
 import { TEST_BOOKS, EXTRA_BOOKS } from "../__fixtures__/menu-test-data";
@@ -15,6 +16,7 @@ import {
   MenuSearchTokenInput,
   type TypeInternalItemProps,
   type TypeMultiSelectMenuProps,
+  type TypeMultiSelectMenuBaseProps,
 } from "../index";
 
 type TypeMultiSelectMenuStoryProps = TypeMultiSelectMenuProps & {
@@ -135,54 +137,60 @@ export const MultiSelectMenuWithGroupsExample: Story = {
   },
 };
 
+const TestControlledMultiSelectMenu = ({
+  inputType,
+  ...args
+}: TypeMultiSelectMenuBaseProps & {
+  inputType: "checkbox" | "switch";
+}) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = React.useState<
+    TypeInternalItemProps[]
+  >([]);
+  return (
+    <MultiSelectMenu
+      {...args}
+      isOpen={isOpen}
+      onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+      selectedItems={selectedItems}
+      onSelectedItemsChange={({ selectedItems: newSelectedItems }) => {
+        setSelectedItems(newSelectedItems);
+      }}
+      menuToggleElement={<StorybookMenuToggleButton />}
+    >
+      <MenuContent>
+        <MenuGroup title="Classics" id="classics">
+          {TEST_BOOKS.slice(0, 5).map((itemsToRender) => (
+            <MenuItem
+              inputType={inputType}
+              key={itemsToRender.id}
+              id={itemsToRender.id}
+            >
+              {itemsToRender.title}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+        <MenuGroup title="Essentials" id="essentials">
+          {EXTRA_BOOKS.slice(0, 5).map((itemsToRender) => (
+            <MenuItem
+              inputType={inputType}
+              key={itemsToRender.id}
+              id={itemsToRender.id}
+            >
+              {itemsToRender.title}
+            </MenuItem>
+          ))}
+        </MenuGroup>
+      </MenuContent>
+    </MultiSelectMenu>
+  );
+};
 export const MultiSelectMenuControlled: Story = {
   name: "Controlled State",
   args: {
     inputType: "checkbox",
   },
-  render: ({ inputType, ...args }) => {
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-    const [selectedItems, setSelectedItems] = React.useState<
-      TypeInternalItemProps[]
-    >([]);
-    return (
-      <MultiSelectMenu
-        isOpen={isOpen}
-        onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
-        selectedItems={selectedItems}
-        onSelectedItemsChange={({ selectedItems: newSelectedItems }) => {
-          setSelectedItems(newSelectedItems);
-        }}
-        menuToggleElement={<StorybookMenuToggleButton />}
-        {...args}
-      >
-        <MenuContent>
-          <MenuGroup title="Classics" id="classics">
-            {TEST_BOOKS.slice(0, 5).map((itemsToRender) => (
-              <MenuItem
-                inputType={inputType}
-                key={itemsToRender.id}
-                id={itemsToRender.id}
-              >
-                {itemsToRender.title}
-              </MenuItem>
-            ))}
-          </MenuGroup>
-          <MenuGroup title="Essentials" id="essentials">
-            {EXTRA_BOOKS.slice(0, 5).map((itemsToRender) => (
-              <MenuItem
-                inputType={inputType}
-                key={itemsToRender.id}
-                id={itemsToRender.id}
-              >
-                {itemsToRender.title}
-              </MenuItem>
-            ))}
-          </MenuGroup>
-        </MenuContent>
-      </MultiSelectMenu>
-    );
-  },
+  render: (args) => <TestControlledMultiSelectMenu {...args} />,
 };
 
 export const MultiSelectMenuWithSearch: Story = {

package/src/NestedMenu/NestedMenuContent.tsx

@@ -8,7 +8,7 @@ import { useEffect, useRef } from "react";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities/src/index";
 import { NestedMenuItem } from "./NestedMenuItem";
 
-export const NestedMenuContent = <
+const NestedMenuContent = <
   I extends TypeMenuItemProps = TypeNestedMenuItemProps
 >({
   innerRef: innerRefProp = null,
@@ -69,3 +69,7 @@ export const NestedMenuContent = <
     />
   );
 };
+
+NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
+
+export { NestedMenuContent };

package/src/NestedMenu/NestedMenuItem.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@sproutsocial/seeds-react-icon";
 import { Box } from "@sproutsocial/seeds-react-box";
 import type { TypeNestedMenuItemProps } from "./NestedMenuTypes";
 
-export const NestedMenuItem = ({
+const NestedMenuItem = ({
   children,
   childMenuId,
   onClick: onClickProp,
@@ -35,3 +35,7 @@ export const NestedMenuItem = ({
     </MenuItem>
   );
 };
+
+NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
+
+export { NestedMenuItem };