@sproutsocial/seeds-react-menu 1.2.0 → 1.2.2

package/package.json

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

package/src/ActionMenu/ActionMenu.tsx

@@ -78,8 +78,8 @@ const handleStateChange = (
  * @description An ActionMenu contains a list of clickable items like buttons or links. ActionMenus do not hold a selection.
  *
  * **To select menu items:**
- * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/SingleSelectMenu | SingleSelectMenu}
- * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MultiSelectMenu | MultiSelectMenu}
+ * @see {@link https://seeds.sproutsocial.com/components/single-select-menu SingleSelectMenu}
+ * @see {@link https://seeds.sproutsocial.com/components/multi-select-menu MultiSelectMenu}
  */
 export const ActionMenu = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   children: childrenProp,

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -52,9 +52,7 @@ export const AutocompleteTextInputExample: Story = {
         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
         menuToggleElement={
           <>
-            <MenuLabel htmlFor="my-combobox" mb={300}>
-              Choose a book
-            </MenuLabel>
+            <MenuLabel mb={300}>Choose a book</MenuLabel>
             <AutocompleteInput />
           </>
         }
@@ -80,9 +78,7 @@ export const AutocompleteWithItemsAsProps: Story = {
         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
         menuToggleElement={
           <>
-            <MenuLabel htmlFor="my-combobox" mb={300}>
-              Choose a book
-            </MenuLabel>
+            <MenuLabel mb={300}>Choose a book</MenuLabel>
             <AutocompleteInput />
           </>
         }
@@ -104,11 +100,9 @@ export const AutocompleteTextWithButtonExample: Story = {
         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
         menuToggleElement={
           <>
-            <MenuLabel htmlFor="my-combobox" mb={300}>
-              Choose a book
-            </MenuLabel>
+            <MenuLabel mb={300}>Choose a book</MenuLabel>
             <Box display="flex" alignItems="center" gap={200}>
-              <AutocompleteInput />
+              <AutocompleteInput style={{ flex: 2 }} />
               <MenuToggleButton>
                 <Icon name="chevron-down" aria-label="Open Menu" />
               </MenuToggleButton>
@@ -137,9 +131,7 @@ export const AutocompleteTokenInputExample: Story = {
         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
         menuToggleElement={
           <>
-            <MenuLabel htmlFor="my-combobox" mb={300}>
-              Choose a book
-            </MenuLabel>
+            <MenuLabel mb={300}>Choose a book</MenuLabel>
             <AutocompleteTokenInput />
             <MenuToggleButton mt={200} width="100%" p="0">
               <Icon name="chevron-down" aria-label="Open Menu" />
@@ -170,9 +162,7 @@ export const AutocompleteSelectExample: Story = {
         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
         menuToggleElement={
           <>
-            <MenuLabel htmlFor="my-combobox" mb={300}>
-              Choose a book
-            </MenuLabel>
+            <MenuLabel mb={300}>Choose a book</MenuLabel>
             <AutocompleteSelect />
           </>
         }
@@ -247,9 +237,7 @@ const TestControlledMultiAutocomplete = (args: CustomAutocompleteArgs) => {
       itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
       menuToggleElement={
         <>
-          <MenuLabel htmlFor="my-combobox" mb={300}>
-            Choose a book
-          </MenuLabel>
+          <MenuLabel mb={300}>Choose a book</MenuLabel>
           <AutocompleteTokenInput />
           <MenuToggleButton mt={200} width="100%" p="0">
             <Icon name="chevron-down" aria-label="Open Menu" />

package/src/Autocomplete/Autocomplete.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeAutocompleteProps } from "./AutocompleteTypes";
 import { SingleAutocomplete } from "./SingleAutocomplete";
 import { MultiAutocomplete } from "./MultiAutocomplete";
@@ -9,11 +8,11 @@ import { MultiAutocomplete } from "./MultiAutocomplete";
 /**
  * @link https://seeds.sproutsocial.com/components/autocomplete/
  *
- * @description A Autocomplete allows selecting a {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists to populate an input.
+ * @description A Autocomplete allows selecting {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItems} from a list or groups of lists to populate an input.
  *
  */
 export const Autocomplete = <I extends TypeMenuItemProps = TypeMenuItemProps>({
-  multiSelect,
+  multiSelect = false,
   ...rest
 }: TypeAutocompleteProps<I>) => {
   if (multiSelect) {

package/src/Autocomplete/AutocompleteTypes.ts

@@ -1,34 +1,38 @@
-import type { TypeMenuRootOwnProps } from "../MenuRoot";
 import type {
   TypeDownshiftComboboxProps,
   TypeDownshiftMultiSelectProps,
 } from "../MenuContext";
 import type { TypeGetIsItemVisibleFn } from "../hooks/useItemFiltering";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type {
   TypeChildrenOrItems,
   TypeHigherOrderComponentProps,
 } from "../types";
 
-export type TypeSingleAutocompleteProps<
-  I extends TypeMenuItemProps = TypeMenuItemProps
-> = TypeHigherOrderComponentProps &
-  TypeChildrenOrItems<I> &
+export type TypeBaseAutocompleteProps = TypeHigherOrderComponentProps &
   TypeDownshiftComboboxProps & {
+    /** A function that can be passed to override the default filtering logic */
     getIsItemVisible?: TypeGetIsItemVisibleFn;
+    /** Set multiSelect to true to allow multiple selections.
+     *  Default: false*/
+    multiSelect?: boolean;
   };
 
+export type TypeSingleAutocompleteProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = TypeBaseAutocompleteProps & {
+  multiSelect?: false;
+} & TypeChildrenOrItems<I>;
+
 export type TypeMultiAutocompleteProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> = TypeSingleAutocompleteProps<I> &
+> = TypeBaseAutocompleteProps &
   TypeDownshiftMultiSelectProps & {
-    /* Determine whether or not the combobox should display selected items in the dropdown */
+    multiSelect?: true;
+    /** Determines whether a multiselect autocomplete will display selected items in the dropdown */
     showSelectedItemsInDropdown?: boolean;
-  };
+  } & TypeChildrenOrItems<I>;
 
 export type TypeAutocompleteProps<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> =
-  | (TypeSingleAutocompleteProps<I> & { multiSelect?: false })
-  | (TypeMultiAutocompleteProps<I> & { multiSelect: true });
+> = TypeSingleAutocompleteProps<I> | TypeMultiAutocompleteProps<I>;

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect } from "react";
 import { useCombobox } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
@@ -8,7 +7,7 @@ import { useItemFiltering } from "../hooks/useItemFiltering";
 import { MenuRoot } from "../MenuRoot";
 
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeAutocompleteProps } from "./AutocompleteTypes";
+import type { TypeSingleAutocompleteProps } from "./AutocompleteTypes";
 
 export const SingleAutocomplete = <
   I extends TypeMenuItemProps = TypeMenuItemProps
@@ -21,7 +20,7 @@ export const SingleAutocomplete = <
   itemToString = defaultItemToString,
   getIsItemVisible,
   ...useComboboxProps
-}: TypeAutocompleteProps<I>) => {
+}: TypeSingleAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
   const { allMenuItems, children } = useMenuChildren({
     children: childrenProp,

package/src/MenuContent/MenuContent.tsx

@@ -6,9 +6,9 @@ import { useCallback } from "react";
 import type { TypeMenuItemProps } from "../MenuItem";
 
 /**
- * @link https://seeds.sproutsocial.com/components/menu-content/
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menucontent
  *
- * @description MenuContent is used to contain lists or grouped lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
+ * @description MenuContent is used to contain lists or grouped lists of {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItems}.
  *
  * @example
  * <ActionMenu>
@@ -24,8 +24,8 @@ import type { TypeMenuItemProps } from "../MenuItem";
  *   <MenuFooter>Footer</MenuFooter>
  * </ActionMenu>
  *
- * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
- * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItem}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menugroup MenuGroup}
  */
 
 const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({

package/src/MenuContext.tsx

@@ -28,8 +28,11 @@ export interface TypeDownshiftMultiSelectProps
     >
   > {
   // Multi Select Props with conflicting useSelect prop names
+  /** Optional override to the built-in getA11yStatusMessage function for multiple selection*/
   getA11yMultiStatusMessage?: UseMultipleSelectionProps<TypeInternalItemProps>["getA11yStatusMessage"];
+  /** Optional override to the built-in onStateChange function for multiple selection*/
   onMultiSelectStateChange?: UseMultipleSelectionProps<TypeInternalItemProps>["onStateChange"];
+  /** Optional override to the built-in stateReducer function for multiple selection*/
   multiSelectStateReducer?: UseMultipleSelectionProps<TypeInternalItemProps>["stateReducer"];
 }
 
@@ -125,7 +128,9 @@ export interface TypeMenuProviderProps {
 }
 
 export interface TypeMenuToggleContext extends TypeMenuContext {
-  ref?: (arg0: React.ElementRef<any> | HTMLElement) => void;
+  ref?:
+    | React.RefObject<any>
+    | ((arg0: React.ElementRef<any> | HTMLElement) => void);
   toggle?: () => void;
   show?: () => void;
   hide?: () => void;

package/src/MenuFooter/MenuFooter.tsx

@@ -3,11 +3,11 @@ import type { TypeMenuFooterProps } from "./MenuFooterTypes";
 import { StyledMenuFooterBox } from "./styles";
 
 /**
- * @link https://seeds.sproutsocial.com/components/menu-footer/
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menufooter
  *
  * @description MenuFooter is a container used to hold footer content within a Menu.
  *
- * @see {@link https://seeds.sproutsocial.com/components/menu-header/ | MenuHeader}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuheader MenuHeader}
  */
 
 export const MenuFooter = ({ children, ...rest }: TypeMenuFooterProps) => {

package/src/MenuGroup/MenuGroup.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import type { TypeMenuItemProps } from "../MenuItem";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuGroupProps } from "./MenuGroupTypes";
 import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
 import { mapMenuItems } from "../hooks/useMenuChildren";
 
 /**
- * @link https://seeds.sproutsocial.com/components/menu-group/
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menugroup
  *
- * @description MenuGroup is used to group lists of {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems}.
+ * @description MenuGroup is used to group lists of {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItems}.
  *
  * @example
  * <ActionMenu>
@@ -22,7 +21,8 @@ import { mapMenuItems } from "../hooks/useMenuChildren";
  *   </MenuContent>
  * </ActionMenu>
  *
- * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItem}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menucontent MenuContent}
  */
 
 const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({

package/src/MenuHeader/MenuHeader.tsx

@@ -8,11 +8,13 @@ import {
 import type { TypeMenuHeaderProps } from "./MenuHeaderTypes";
 
 /**
- * @link https://seeds.sproutsocial.com/components/menu-header/
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuheader
  *
  * @description MenuHeader is a container used to hold header content within a Menu.
  *
- * @see {@link https://seeds.sproutsocial.com/components/menu-footer/ | MenuFooter}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menufooter MenuFooter}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchinput MenuSearchInput}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchtokeninput MenuSearchTokenInput}
  */
 
 const MenuHeader = ({

package/src/MenuLabel.tsx

@@ -2,10 +2,40 @@ import React from "react";
 import { Label, type TypeLabelProps } from "@sproutsocial/seeds-react-label";
 import { useMenuToggleContext } from "./MenuContext";
 
-export const MenuLabel = ({ children, ...rest }: Partial<TypeLabelProps>) => {
+export interface TypeMenuLabelProps extends Omit<TypeLabelProps, "htmlFor"> {
+  // The children and required types are redundant, but they power the MenuLabel PropTable.
+  children: React.ReactNode;
+  /** Whether making a selection in the associated menu is required. */
+  required?: boolean;
+  /** ID of the associated form element. This prop is never valid to pass into MenuLabel
+   *  because MenuLabel passes its own htmlFor prop to the underlying Label component.*/
+  htmlFor?: never;
+}
+
+/**
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menulabel
+ *
+ * @description MenuLabel extends Label to create an accessible label for a Menu's toggle element.
+ * A MenuLabel will automatically be associated with the corresponding menuToggleElement,
+ * so an `htmlFor` prop is not necessary or allowed.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menutogglebutton MenuToggleButton}
+ * @see {@link https://seeds.sproutsocial.com/components/label/ Label}
+ */
+export const MenuLabel = ({
+  children,
+  required = false,
+  ...rest
+}: TypeMenuLabelProps) => {
   const { getLabelProps } = useMenuToggleContext();
   return (
-    <Label htmlFor="fallback_menu_label" {...getLabelProps?.()} {...rest}>
+    // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
+    <Label
+      htmlFor="fallback_menu_label"
+      required={required}
+      {...getLabelProps?.()}
+      {...rest}
+    >
       {children}
     </Label>
   );

package/src/MenuRoot/MenuRoot.tsx

@@ -1,6 +1,12 @@
-import React, { useCallback, useEffect } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  type RefObject,
+} from "react";
 import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 import {
   MenuContentProvider,
@@ -12,10 +18,16 @@ import {
 import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
 
 export interface TypeMenuRootOwnProps {
+  /** The element that is or contains an element that will toggle the menu when clicked.
+   *  May contain labels, buttons, inputs or other content as needed. */
   menuToggleElement: React.ReactElement<any>;
+  /** Props to pass through to the underlying Popout.
+   *  Any Popout prop is valid except those explicitly omitted. */
   popoutProps?: Partial<
     Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">
   >;
+  /** The width of the Popout content.
+   *  Defaults to 200px or the width of the toggle element, whichever is greater.*/
   width?: TypePopoutProps["width"];
 }
 export interface TypeMenuRootProps
@@ -102,16 +114,14 @@ export const MenuPopout = ({
 };
 
 /**
- * @link https://seeds.sproutsocial.com/components/menu-root/
- *
- * @description MenuRoot is a utility component used to handle {@link https://github.com/sproutsocial/seeds/blob/dev/seeds-react/seeds-react-menu/src/MenuContext.tsx | MenuContext}. This component should rarely, if ever, be used directly unless building a custom menu type.
+ * @description MenuRoot is a utility component used to handle React Context for our Menus. This component should rarely, if ever, be used directly unless building a custom menu type.
  */
 
 export const MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width = "300px",
+  width,
   ...contextProps
 }: TypeMenuRootProps) => {
   const {
@@ -121,17 +131,27 @@ export const MenuRoot = ({
     inputValue,
     hiddenItemsCount = 0,
     items,
+    getMenuProps,
   } = contextProps;
-  const setIsOpen = useCallback(
-    (newIsOpen: boolean) => {
-      newIsOpen ? openMenu?.() : closeMenu?.();
-    },
-    [openMenu, closeMenu]
-  );
+
+  const toggleElementRef = React.useRef<HTMLElement>(null);
+  const [finalWidth, setFinalWidth] = React.useState<typeof width>();
+
+  const min_width = 200;
+
+  useLayoutEffect(() => {
+    if (width) {
+      setFinalWidth(width);
+    } else if (toggleElementRef.current?.offsetWidth) {
+      const toggleWidth = toggleElementRef.current.offsetWidth;
+      setFinalWidth(Math.max(toggleWidth, min_width));
+    } else {
+      setFinalWidth(min_width);
+    }
+  }, [width, toggleElementRef.current?.offsetWidth]);
 
   useEffect(() => {
     if (!inputValue) return;
-
     if (items && hiddenItemsCount >= items.length && isOpen) {
       closeMenu?.();
     }
@@ -139,6 +159,9 @@ export const MenuRoot = ({
 
   const menuContext = useMenu(contextProps);
 
+  // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
+  getMenuProps?.({}, { suppressRefError: true });
+
   return (
     <MenuPopout
       placement={placement}
@@ -150,27 +173,23 @@ export const MenuRoot = ({
           {children}
         </MenuContentProvider>
       }
+      width={finalWidth}
       {...popoutProps}
     >
       {(toggleProps) => (
-        <MenuToggleProvider menuContext={{ ...menuContext, ...toggleProps }}>
+        <MenuToggleProvider
+          menuContext={{
+            ...menuContext,
+            ...toggleProps,
+            ref: mergeRefs<HTMLElement>(
+              toggleProps.ref,
+              toggleElementRef
+            ) as RefObject<HTMLElement>,
+          }}
+        >
           {menuToggleElement}
         </MenuToggleProvider>
       )}
     </MenuPopout>
   );
 };
-
-export const MenuRootNoPopout = ({
-  children,
-  menuToggleElement,
-  ...contextProps
-}: TypeMenuRootProps) => {
-  const menuContext = useMenu(contextProps);
-
-  return (
-    <MenuContentProvider menuContext={menuContext}>
-      {children}
-    </MenuContentProvider>
-  );
-};

package/src/MenuSearchInput/MenuSearchInput.tsx

@@ -10,23 +10,17 @@ import {
 } from "../MenuContext";
 
 export interface TypeMenuSearchInputProps extends TypeInputProps {
-  /* A function that can be passed to override the default filtering logic */
+  /** 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/
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchinput
  *
  * @description MenuSearchInput is search input that can be added to the MenuHeader to filter the items.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuheader MenuHeader}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchtokeninput MenuSearchTokenInput}
  */
 export const MenuSearchInput = ({
   getIsItemVisible,

package/src/MenuSearchTokenInput/MenuSearchTokenInput.tsx

@@ -14,14 +14,17 @@ import {
 } from "../MenuTokenInput";
 
 export interface TypeMenuSearchTokenInputProps extends TypeMenuTokenInputProps {
-  /* A function that can be passed to override the default filtering logic */
+  /** A function that can be passed to override the default filtering logic */
   getIsItemVisible?: TypeGetIsItemVisibleFn;
 }
 
 /**
- * @link https://seeds.sproutsocial.com/components/menu-search-token-input/
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchtokeninput
  *
- * @description MenuSearchTokenInput is search token input that can be added to the MenuHeader to filter the items.
+ * @description MenuSearchTokenInput is a token input that can be added to the MenuHeader to filter the items.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuheader MenuHeader}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchinput MenuSearchInput}
  */
 export const MenuSearchTokenInput = ({
   getIsItemVisible,

package/src/MenuToggleButton/MenuToggleButton.tsx

@@ -1,15 +1,16 @@
-import React, { type ReactNode } from "react";
 import { Button, type TypeButtonProps } from "@sproutsocial/seeds-react-button";
 import { useMenuToggleContext } from "../MenuContext";
 
-export interface TypeMenuToggleButtonProps extends Partial<TypeButtonProps> {
-  children: ReactNode;
-}
+export interface TypeMenuToggleButtonProps extends TypeButtonProps {}
 
-export const MenuToggleButton = ({
-  children,
-  ...rest
-}: TypeMenuToggleButtonProps) => {
+/**
+ * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menutogglebutton
+ * @param props - MenuToggleButton accepts all the same props as Button.
+ * @description MenuToggleButton extends the Button component to create a toggle for a menu.
+ * @see {@link https://seeds.sproutsocial.com/components/button/ Button}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menulabel MenuLabel}
+ */
+export const MenuToggleButton = (props: TypeMenuToggleButtonProps) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } =
     useMenuToggleContext();
   return (
@@ -22,9 +23,7 @@ export const MenuToggleButton = ({
         ...ariaProps,
         ...(isListbox ? {} : { role: "button", "aria-haspopup": "menu" }),
       })}
-      {...rest}
-    >
-      {children}
-    </Button>
+      {...props}
+    />
   );
 };

package/src/MenuTokenInput.tsx

@@ -26,13 +26,19 @@ const StyledTokenInputWrapper = styled.div`
 `;
 
 export interface TypeMenuTokenInputProps extends TypeTokenInputProps {
-  /* A function that can be passed to override the default token props */
-  getTokenProps?: (
-    itemId: TypeInternalItemProps["id"]
-  ) => Partial<TypeTokenSpec>;
+  /** A function that can be passed to override the default token props */
+  getTokenProps?: (itemId: string) => Partial<TypeTokenSpec>;
+  /** Specify the menu context to use. MenuToggleContext is the default.
+   *  This prop is only needed for specialized use cases. */
   MenuContext?: typeof MenuToggleContext | typeof MenuContentContext;
 }
 
+/**
+ * @description MenuTokenInput is the basis of the MenuSearchTokenInput and AutocompleteTokenInput components
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchinput MenuSearchInput}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menusearchtokeninput MenuSearchTokenInput}
+ */
 export const MenuTokenInput = ({
   inputProps = {},
   getTokenProps,

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -10,11 +10,12 @@ import type { TypeMultiSelectMenuProps } from "./MultiSelectMenuTypes";
 import type { TypeInternalItemProps } from "../types";
 
 /**
- * @link https://seeds.sproutsocial.com/components/multiselect-menu/
+ * @link https://seeds.sproutsocial.com/components/multi-select-menu/
  *
- * @description A MultiSelectMenu allows multiple {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists.
+ * @description A MultiSelectMenu allows multiple {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItems} to be selected from a list or groups of lists.
  *
- * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
+ * @see {@link https://seeds.sproutsocial.com/components/single-select-menu/ SingleSelectMenu}
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menugroup MenuGroup}
  */
 
 export const MultiSelectMenu = <

package/src/NestedMenu/NestedMenu.feature

@@ -30,7 +30,7 @@ Feature: NestedMenu
 
     Scenario: User can select a child menu without closing the menu
         Given the NestedMenu is open
-        When an menu item that triggers a child menu is clicked
+        When a menu item that triggers a child menu is clicked
         Then the menu will stay open
         And the menu will not use its default open/close behavior
 
@@ -75,7 +75,7 @@ Feature: NestedMenu
 
     Scenario: A Menu stays open when a menu item with a childMenuId is clicked
       Given the NestedMenu is open
-      When an menu item that triggers a child menu is clicked
+      When a menu item that triggers a child menu is clicked
       Then the menu will stay open
       And the menu will not use its default open/close behavior
 

package/src/NestedMenu/NestedMenu.tsx

@@ -85,6 +85,9 @@ export const NestedMenu = <
     onIsOpenChange: onNestedIsOpenChange,
   };
 
+  // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
+  rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
+
   /**
    * Handling the state of the NestedMenu content
    */

package/src/NestedMenu/NestedMenuTypes.ts

@@ -27,13 +27,16 @@ export interface TypeNestedMenuHeaderProps extends TypeMenuHeaderProps {
 }
 
 export interface TypeNestedMenuItemProps extends TypeMenuItemProps {
+  /** The id of the menu to be displayed when this item is selected. */
   childMenuId?: string;
 }
 
 export interface TypeNestedMenuProps<
   I extends TypeMenuItemProps = TypeNestedMenuItemProps
 > extends Omit<TypeActionMenuBaseProps, "MenuRootComponent"> {
+  /** The id of the menu to display when the NestedMenu is opened. */
   initialMenuId: string;
+  /** An optional callback to fire when the back button is clicked.*/
   onBackButtonClick?: (menuId: string) => void;
   /** Sets the default localized label for the back arrow in all child menus.
    *  This label can be overridden by including backArrowLabel in a menu's menuHeaderProps. */