import * as React from "react"; import { type ActionProps } from "../../common/props"; import { type PopoverProps } from "../popover/popover"; import { type MenuProps } from "./menu"; /** * Note that the HTML attributes supported by this component are spread to the nested `` element, while the * `ref` is attached to the root `
  • ` element. This is an unfortunate quirk in the API which we keep around * for backwards-compatibility. */ export interface MenuItemProps extends ActionProps, React.AnchorHTMLAttributes, React.RefAttributes { /** Item text, required for usability. */ text: React.ReactNode; /** * Whether this item should appear _active_, often useful to * indicate keyboard focus. Note that this is distinct from _selected_ * appearance, which has its own prop. */ active?: boolean; /** * Children of this component will be rendered in a _submenu_ * that appears in a popover when hovering or clicking on this item. * * Use `text` prop for the content of the menu item itself. */ children?: React.ReactNode; /** * Whether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`, * and mouse event handlers (in particular click, down, enter, leave). */ disabled?: boolean; /** * Right-aligned label text content, useful for displaying hotkeys. * * This prop actually supports JSX elements, but TypeScript will throw an error because * `HTMLAttributes` only allows strings. Use `labelElement` to supply a JSX element in TypeScript. */ label?: string; /** * A space-delimited list of class names to pass along to the right-aligned label wrapper element. */ labelClassName?: string; /** * Right-aligned label content, useful for displaying hotkeys. */ labelElement?: React.ReactNode; /** * Changes the ARIA `role` property structure of this MenuItem to accomodate for various * different `role`s of the parent Menu `ul` element. * * If `menuitem`, role structure becomes: * * `
  • ` * * which is proper role structure for a `