@sproutsocial/seeds-react-menu 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "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/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,24 +161,31 @@ export const MultiAutocomplete = <
     ...useComboboxProps,
   });
 
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+
+  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,

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useCombobox } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
@@ -8,7 +8,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,15 +21,19 @@ export const SingleAutocomplete = <
   itemToString = defaultItemToString,
   getIsItemVisible,
   ...useComboboxProps
-}: TypeAutocompleteProps<I>) => {
+}: TypeSingleAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
   const { allMenuItems, children } = useMenuChildren({
     children: childrenProp,
     menuItems,
     MenuItemComponent,
   });
-  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } =
-    useDownshiftDefaults({ isCombobox: true });
+
+  const downshiftDefaults = useDownshiftDefaults({ isCombobox: true });
+
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } =
+    downshiftDefaults;
+
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString,
@@ -40,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,
@@ -52,17 +56,24 @@ export const SingleAutocomplete = <
     ...useComboboxProps,
   });
 
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+
+  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,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults,
+        ...downshiftDefaults,
       }}
       popoutProps={{
         focusOnContent: false,

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 = ({
@@ -146,13 +150,6 @@ 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."
@@ -189,17 +186,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 = <