@sproutsocial/seeds-react-menu 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.2.1",
+  "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,9 +100,7 @@ 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 style={{ flex: 2 }} />
               <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"];
 }
 

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

@@ -18,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
@@ -108,9 +114,7 @@ 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 = ({
@@ -189,17 +193,3 @@ export const MenuRoot = ({
     </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/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. */

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -9,12 +9,13 @@ import { MenuRoot, type TypeMenuRootProps } from "../MenuRoot";
 import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
 
 /**
- * @link https://seeds.sproutsocial.com/components/singleselect-menu/
+ * @link https://seeds.sproutsocial.com/components/single-select-menu/
  *
- * @description A SingleSelectMenu allows a single selection of a {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItem} from a list or groups or lists.
+ * @description A SingleSelectMenu allows a single selection of a {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItem} from a list or groups or lists.
  *
- * **To trigger actions from a menu:**
- * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/ActionMenu | ActionMenu}
+ * @see {@link https://seeds.sproutsocial.com/components/action-menu/ ActionMenu} for triggering actions from a menu
+ * @see {@link https://seeds.sproutsocial.com/components/multi-select-menu/ MultiSelectMenu} for selecting multiple items
+ * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menugroup MenuGroup}'s isSingleSelect prop to create a single select group within a MultiSelectMenu
  */
 
 export const SingleSelectMenu = <

package/src/hooks/useItemFiltering.tsx

@@ -3,8 +3,9 @@ import type { TypeMenuContext } from "../MenuContext";
 import type { TypeInternalItemProps } from "../types";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
 
+/* Receives the internal Downshift version of the item, which is different from TypeMenuItemProps*/
 export type TypeGetIsItemVisibleFn = (
-  item: TypeMenuContext["items"][number],
+  item: TypeInternalItemProps,
   inputValue: string
 ) => boolean;
 

package/src/hooks/useMenuChildren.tsx

@@ -262,7 +262,7 @@ export const useMenuChildren = <
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
     const allMenuItems: TypeMenuContext["items"] = [];
 
-    // If an menuItems prop was passed to the Menu, we can bypass the children traversal.
+    // If a menuItems prop was passed to the Menu, we can bypass the children traversal.
     if (menuItems && menuItems.length) {
       menuItems.forEach((menuItem) => {
         addMenuItem({ itemProps: menuItem, allMenuItems, menuItemsMap });

package/src/types.ts

@@ -3,7 +3,7 @@ import type { TypeMenuItemProps } from "./MenuItem";
 import type { TypeMenuGroupBaseProps } from "./MenuGroup";
 import type { TypeMenuRootOwnProps, TypeMenuRootProps } from "./MenuRoot";
 
-// The items object used internally for Menu functionality
+// The item object used internally for Menu functionality
 export interface TypeInternalItemProps<Item = TypeMenuItemProps> {
   id: string;
   index: number;
@@ -13,25 +13,38 @@ export interface TypeInternalItemProps<Item = TypeMenuItemProps> {
 }
 
 export interface TypeHigherOrderComponentProps extends TypeMenuRootOwnProps {
+  /** Overrides the default MenuRoot component. Only necessary for specialized use cases.*/
   MenuRootComponent?: React.ComponentType<TypeMenuRootProps>;
 }
 
+// Partial type, for react-docgen. Refined to the two valid configurations below.
+type TypeBaseChildrenOrItems<I extends TypeMenuItemProps = TypeMenuItemProps> =
+  {
+    /** Allows menu items to be passed in as children. Cannot be used with the menuItems prop.*/
+    children?: TypeNotEmptyChildren;
+    /** Allows menu items to be passed in as objects. Cannot be used with the children prop.
+     *  The type of each menu item, I, must be or extend TypeMenuItemProps. */
+    menuItems?: I[];
+    /** Allows a custom MenuItem component to be used when rendering using the menuItems prop.
+     *  MenuItemComponent's prop type must match the type of the menuItems, I. */
+    MenuItemComponent?: React.ComponentType<I>;
+  };
+
 export type TypeChildrenOrItems<
   I extends TypeMenuItemProps = TypeMenuItemProps
-> =
-  | {
-      /** Allows menu items to be passed in as children. Cannot be used with the items prop.*/
-      children: TypeMenuRootProps["children"];
-      menuItems?: never;
-      MenuItemComponent?: never;
-    }
-  | {
-      children?: never;
-      /** Allows menu items to be passed in as objects. Cannot be used with the children prop.*/
-      menuItems: I[];
-      /** Allows a custom MenuItem component to be used when rendering using the items prop.*/
-      MenuItemComponent?: React.ComponentType<I>;
-    };
+> = TypeBaseChildrenOrItems<I> &
+  (
+    | {
+        children: TypeNotEmptyChildren;
+        menuItems?: never;
+        MenuItemComponent?: never;
+      }
+    | {
+        children?: never;
+        menuItems: I[];
+        MenuItemComponent?: React.ComponentType<I>;
+      }
+  );
 
 export type TypeNotEmptyChildren =
   | React.ReactChild