{
  "name": "MenuItem",
  "source": "src/components/Menu.tsx",
  "propsType": "MenuItemProps",
  "description": "One row of a Menu. A collection element, like TabItem: it renders nothing\nitself — Menu reads its props and draws the row — so it only means anything\nas a direct child of Menu or MenuSection. Give it a `key`; that key is what\n`onAction` and `selectedKeys` speak in.",
  "import": "import { MenuItem } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One row of a Menu. A collection element: Menu reads its props and draws the row as `menuitem`, `menuitemradio` or `menuitemcheckbox`.",
  "useWhen": [
    "a row in a Menu or a MenuSection — it is not usable anywhere else"
  ],
  "useInstead": [
    {
      "when": "it is a top-level navigation destination",
      "use": "NavItem"
    },
    {
      "when": "it is a standalone action outside a list",
      "use": "Button"
    }
  ],
  "composition": {
    "order": [
      "Menu",
      "MenuItem"
    ],
    "note": "A collection element, like TabItem: it renders nothing itself and never appears in the DOM. `key` identifies it to Menu's `onAction`, `selectedKeys` and `disabledKeys`.",
    "example": "<MenuItem key=\"duplicate\" icon={<Icon as={Copy} />}>Duplicate</MenuItem>\n<MenuItem key=\"move\" title=\"Move to\"><MenuItem key=\"archive\">Archive</MenuItem></MenuItem>"
  },
  "slots": {
    "icon": {
      "accepts": "Icon",
      "note": "leading icon; omit its `label` — the row's text names it"
    },
    "children": {
      "accepts": "text",
      "note": "the row label"
    },
    "title": {
      "accepts": "text",
      "note": "only on a row that opens a submenu: the row's label, while its children are the submenu's MenuItems. Submenus open only inside a MenuTrigger"
    }
  },
  "a11y": {
    "guarantees": [
      "the role, `aria-checked` and `aria-disabled` are supplied by Menu from its selection mode and keys, not by this element",
      "the check glyph occupies its slot whenever the menu has a selection mode, so rows never reflow as the selection moves"
    ],
    "requires": [
      "a stable `key`",
      "text in `children`, or `textValue` when the children are not plain text — typeahead matches against it"
    ]
  },
  "antiPatterns": [
    {
      "dont": "using MenuItem outside a Menu",
      "why": "it renders nothing on its own"
    },
    {
      "dont": "an icon-only MenuItem with no children",
      "why": "the row announces nothing and typeahead cannot reach it"
    },
    {
      "dont": "array indexes as keys in a list that can change",
      "why": "selection and actions are expressed in keys, so the selected row silently becomes a different row"
    }
  ],
  "deprecated": [
    {
      "prop": "disabled",
      "replacement": "isDisabled"
    },
    {
      "prop": "isSelected",
      "note": "Put the item's key in Menu's `selectedKeys` and set its `selectionMode`."
    }
  ],
  "stylesheet": "src/styles/menu.css",
  "tokens": [
    "--border-focus",
    "--border-strong",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-regular",
    "--icon-default",
    "--icon-disabled",
    "--icon-primary",
    "--icon-size-sm",
    "--ion-menu-min-width",
    "--ion-shadow-shadow-lg",
    "--radius-sm",
    "--radius-xl",
    "--spacing-12",
    "--spacing-2",
    "--spacing-4",
    "--spacing-40",
    "--spacing-6",
    "--spacing-8",
    "--surface-default",
    "--surface-hover",
    "--surface-primary-subtle",
    "--text-disabled",
    "--text-primary",
    "--text-secondary",
    "--text-tertiary",
    "--type-body",
    "--type-body-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "title": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Only on a row that opens a submenu: the row's label. Its children are then\nthe submenu's MenuItems rather than its label. Submenus open only inside a\nMenuTrigger — a standalone Menu has nothing to open them from."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Figma's `Show Leading Icon` + `Leading Icon` swap."
    },
    "isDisabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Whether the item is disabled. Listed, skipped by the arrow keys."
    },
    "disabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "tags": {
        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
      }
    },
    "isSelected": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "tags": {
        "deprecated": "Put the item's key in Menu's `selectedKeys`. Accepted for one\nminor version: when no item's key is in `selectedKeys` and Menu is given\nneither `selectedKeys` nor `defaultSelectedKeys`, the items passing this\nbecome the selection."
      }
    },
    "children": {
      "type": "ReactNode",
      "required": true,
      "origin": "aria",
      "description": "Rendered contents of the item or child items."
    },
    "textValue": {
      "type": "string | undefined",
      "required": false,
      "origin": "aria",
      "description": "A string representation of the item's contents, used for features like typeahead."
    },
    "aria-label": {
      "type": "string | undefined",
      "required": false,
      "origin": "aria",
      "description": "An accessibility label for this item."
    },
    "childItems": {
      "type": "Iterable<T> | undefined",
      "required": false,
      "origin": "aria",
      "description": "A list of child item objects. Used for dynamic collections."
    },
    "hasChildItems": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "aria",
      "description": "Whether this item has children, even if not loaded yet."
    },
    "href": {
      "type": "string | undefined",
      "required": false,
      "origin": "aria",
      "description": "A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)."
    },
    "hrefLang": {
      "type": "string | undefined",
      "required": false,
      "origin": "aria",
      "description": "Hints at the human language of the linked URL.\nSee[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang)."
    },
    "target": {
      "type": "HTMLAttributeAnchorTarget | undefined",
      "required": false,
      "origin": "aria",
      "description": "The target window for the link. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)."
    },
    "rel": {
      "type": "string | undefined",
      "required": false,
      "origin": "aria",
      "description": "The relationship between the linked resource and the current page. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)."
    },
    "download": {
      "type": "string | boolean | undefined",
      "required": false,
      "origin": "aria",
      "description": "Causes the browser to download the linked URL. A string may be provided to suggest a file name.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)."
    },
    "ping": {
      "type": "string | undefined",
      "required": false,
      "origin": "aria",
      "description": "A space-separated list of URLs to ping when the link is followed. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping)."
    },
    "referrerPolicy": {
      "type": "HTMLAttributeReferrerPolicy | undefined",
      "required": false,
      "origin": "aria",
      "description": "How much of the referrer to send when following the link. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).",
      "values": [
        "",
        "origin",
        "no-referrer",
        "no-referrer-when-downgrade",
        "origin-when-cross-origin",
        "same-origin",
        "strict-origin",
        "strict-origin-when-cross-origin",
        "unsafe-url"
      ]
    },
    "routerOptions": {
      "type": "undefined",
      "required": false,
      "origin": "aria",
      "description": "Options for the configured client side router."
    }
  },
  "propCounts": {
    "own": 5,
    "aria": 13,
    "dom": 0,
    "other": 0
  }
}