1 | import * as React from "react";
|
2 | import { AbstractPureComponent2 } from "../../common";
|
3 | import { ActionProps, IElementRefProps, LinkProps } from "../../common/props";
|
4 | import { IPopoverProps } from "../popover/popover";
|
5 | import { MenuProps } from "./menu";
|
6 | /** @deprecated use MenuItemProps */
|
7 | export declare type IMenuItemProps = MenuItemProps;
|
8 | export interface MenuItemProps extends ActionProps, LinkProps, IElementRefProps<HTMLLIElement> {
|
9 | /** Item text, required for usability. */
|
10 | text: React.ReactNode;
|
11 | /**
|
12 | * Whether this item should render with an active appearance. Used to indicate keyboard focus.
|
13 | */
|
14 | active?: boolean;
|
15 | /**
|
16 | * Children of this component will be rendered in a __submenu__ that appears when hovering or
|
17 | * clicking on this menu item.
|
18 | *
|
19 | * Use `text` prop for the content of the menu item itself.
|
20 | */
|
21 | children?: React.ReactNode;
|
22 | /**
|
23 | * Whether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`,
|
24 | * and mouse event handlers (in particular click, down, enter, leave).
|
25 | */
|
26 | disabled?: boolean;
|
27 | /**
|
28 | * Right-aligned label text content, useful for displaying hotkeys.
|
29 | *
|
30 | * This prop actually supports JSX elements, but TypeScript will throw an error because
|
31 | * `HTMLAttributes` only allows strings. Use `labelElement` to supply a JSX element in TypeScript.
|
32 | */
|
33 | label?: string;
|
34 | /**
|
35 | * A space-delimited list of class names to pass along to the right-aligned label wrapper element.
|
36 | */
|
37 | labelClassName?: string;
|
38 | /**
|
39 | * Right-aligned label content, useful for displaying hotkeys.
|
40 | */
|
41 | labelElement?: React.ReactNode;
|
42 | /**
|
43 | * Changes the ARIA `role` property structure of this MenuItem to accomodate for various
|
44 | * different `role`s of the parent Menu `ul` element.
|
45 | *
|
46 | * If `menuitem`, role structure becomes:
|
47 | *
|
48 | * `<li role="none"`
|
49 | * `<a role="menuitem"`
|
50 | *
|
51 | * which is proper role structure for a `<ul role="menu"` parent (this is the default `role` of a `Menu`).
|
52 | *
|
53 | * If `listoption`, role structure becomes:
|
54 | *
|
55 | * `<li role="option"`
|
56 | * `<a role=undefined`
|
57 | *
|
58 | * which is proper role structure for a `<ul role="listbox"` parent, or a `<select>` parent.
|
59 | *
|
60 | * If `listitem`, role structure becomes:
|
61 | *
|
62 | * `<li role=undefined`
|
63 | * `<a role=undefined`
|
64 | *
|
65 | * which can be used if this item is within a basic `<ul/>` (or `role="list"`) parent.
|
66 | *
|
67 | * If `none`, role structure becomes:
|
68 | *
|
69 | * `<li role="none"`
|
70 | * `<a role=undefined`
|
71 | *
|
72 | * which can be used if wrapping this item in a custom `<li>` parent.
|
73 | *
|
74 | * @default "menuitem"
|
75 | */
|
76 | roleStructure?: "menuitem" | "listoption" | "listitem" | "none";
|
77 | /**
|
78 | * Whether the text should be allowed to wrap to multiple lines.
|
79 | * If `false`, text will be truncated with an ellipsis when it reaches `max-width`.
|
80 | *
|
81 | * @default false
|
82 | */
|
83 | multiline?: boolean;
|
84 | /**
|
85 | * Props to spread to `Popover`. Note that `content` and `minimal` cannot be
|
86 | * changed and `usePortal` defaults to `false` so all submenus will live in
|
87 | * the same container.
|
88 | */
|
89 | popoverProps?: Partial<IPopoverProps>;
|
90 | /**
|
91 | * Whether this item is selected. This will set the `aria-selected` attribute.
|
92 | */
|
93 | selected?: boolean;
|
94 | /**
|
95 | * Whether an enabled item without a submenu should automatically close its parent popover when clicked.
|
96 | *
|
97 | * @default true
|
98 | */
|
99 | shouldDismissPopover?: boolean;
|
100 | /**
|
101 | * Props to spread to the child `Menu` component if this item has a submenu.
|
102 | */
|
103 | submenuProps?: Partial<MenuProps>;
|
104 | /**
|
105 | * Name of the HTML tag that wraps the MenuItem.
|
106 | *
|
107 | * @default "a"
|
108 | */
|
109 | tagName?: keyof JSX.IntrinsicElements;
|
110 | /**
|
111 | * A space-delimited list of class names to pass along to the text wrapper element.
|
112 | */
|
113 | textClassName?: string;
|
114 | /**
|
115 | * HTML title to be passed to the <Text> component
|
116 | */
|
117 | htmlTitle?: string;
|
118 | }
|
119 | /**
|
120 | * Menu item component.
|
121 | *
|
122 | * @see https://blueprintjs.com/docs/#core/components/menu.menu-item
|
123 | */
|
124 | export declare class MenuItem extends AbstractPureComponent2<MenuItemProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> {
|
125 | static defaultProps: MenuItemProps;
|
126 | static displayName: string;
|
127 | render(): JSX.Element;
|
128 | private maybeRenderLabel;
|
129 | private maybeRenderPopover;
|
130 | }
|