{"meta":"","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Menu\">Menu <a class=\"header-anchor scroll-count-item\" href=\"#Menu\" data-scroll-id=\"Menu\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Submenu and menu item</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>openKeys</td>\n<td>Keys of open submenu currently&#xFF08;controlled&#xFF09;</td>\n<td>string | string[]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultOpenKeys</td>\n<td>Keys of open submenu in default&#xFF08;uncontrolled&#xFF09;</td>\n<td>string | string[]</td>\n<td>[]</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultOpenAll</td>\n<td>Open all submenus default, only when mode is set to &apos;inline&apos; and openMode is set to &apos;multiple&apos;, priority is higher than defaultOpenKeys</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>Callback function triggered when open or close the submenu<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>keys</em>: Keys of open submenu<br><em>extra</em>: Info of the operating submenu</td>\n<td>(keys: string[], extra: { key: string; open: boolean }) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>Open mode of submenu</td>\n<td>Mode</td>\n<td>&apos;inline&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Open trigger type of submenu</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>openMode</td>\n<td>Expand mode of the inline submenu, expand a submenu or multiple submenus at the same time, it only works when mode is inline</td>\n<td>&apos;single&apos; | &apos;multiple&apos;</td>\n<td>&apos;multiple&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>inlineIndent</td>\n<td>Indent of inline submenu</td>\n<td>number</td>\n<td>20</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAutoWidth</td>\n<td>Whether the width of the pop up submenu is equal to the parent menu item.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Alignment of the pop up submenu</td>\n<td>&apos;follow&apos; | &apos;outside&apos;</td>\n<td>&apos;follow&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Properties of Popup</td>\n<td>PopupProps | ((popupItemProps: PopupItemProps) =&gt; PopupProps)</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>ClassName of the pop up submenu</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Style of the pop up submenu</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>selectedKeys</td>\n<td>Keys of selected menu item currently&#xFF08;controlled&#xFF09;</td>\n<td>string | string[]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultSelectedKeys</td>\n<td>Keys of selected menu item in default&#xFF08;uncontrolled&#xFF09;</td>\n<td>string | string[]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onSelect</td>\n<td>Callback function triggered when select or unselect menu item<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>selectedKeys</em>: Keys of selected menu items<br><em>item</em>: Current operation menu item<br><em>extra</em>: Extra params</td>\n<td>(selectedKeys: string[], item: SelectableItem, extra: SelectExtra) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>selectMode</td>\n<td>Select mode, single or multiple, no value by default, not selectable</td>\n<td>&apos;single&apos; | &apos;multiple&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>shallowSelect</td>\n<td>Whether you can only select the first level menu item (you cannot select the menu item in the submenu)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>hasSelectedIcon</td>\n<td>Whether to show the selected icon, if it is set to false, it needs to match the background color when the configuration platform setting is selected to distinguish between</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>isSelectIconRight</td>\n<td>Whether to set the selected icon on right side of menu, this only works when hasSelectedIcon is true</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Direction of the menu&apos;s first level</td>\n<td>&apos;ver&apos; | &apos;hoz&apos;</td>\n<td>&apos;ver&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>hozAlign</td>\n<td>Alignment of items and footer in the horizontal menu bar, only works when direction is set to &apos;hoz&apos; and the header exists</td>\n<td>&apos;left&apos; | &apos;right&apos;</td>\n<td>&apos;left&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>header</td>\n<td>The header content of menu</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footer</td>\n<td>The footer content of menu</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footerWrapperClassName</td>\n<td>ClassName of the footer wrapper dom</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>autoFocus</td>\n<td>Whether to get focus automatically</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>focusedKey</td>\n<td>Key of the currently focused submenu or menu item</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>focusable</td>\n<td>Is focusable</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>onItemFocus</td>\n<td>Callback when some menu item focused<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: Key of the menu item<br><em>item</em>: Instance of menu item<br><em>event</em>: The event object</td>\n<td>(<br> key: string,<br> item: MenuItem,<br> event: React.MouseEvent | React.KeyboardEvent<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onItemClick</td>\n<td>Callback when menu item be clicked<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: Key of clicked menu item<br><em>item</em>: Clicked menu item instance<br><em>event</em>: Event object</td>\n<td>(<br> key: string,<br> item: MenuItem,<br> event: React.MouseEvent | React.KeyboardEvent<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onItemKeyDown</td>\n<td>Callback when menu item focused and keyboard down<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: Key of the menu item<br><em>item</em>: Menu item instance<br><em>event</em>: Event object</td>\n<td>(<br> key: string | null | undefined,<br> item: MenuItem,<br> event: React.KeyboardEvent<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>embeddable</td>\n<td>Integrate with the background or not(which means no background/border/box</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>icons</td>\n<td>Custom inner icons</td>\n<td>{<br> select?: React.ReactNode;<br> }</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hozInLine</td>\n<td>Force display in one row, over items will collapse in SubMenu</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderMore</td>\n<td>Custom render more items&#xFF08;Only for hozInLine = true&#xFF09;<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>items</em>: The collapsed menu items<br><strong>return</strong>:<br>More render content</td>\n<td>(<br> items?: React.ReactElement[]<br> ) =&gt; React.ReactElement&lt;{ className?: string; style?: React.CSSProperties }&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>inlineArrowDirection</td>\n<td>Arrow direction of sub menu</td>\n<td>&apos;down&apos; | &apos;right&apos;</td>\n<td>&apos;down&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>labelToggleChecked</td>\n<td>Can label trigger checked change</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>expandAnimation</td>\n<td>Enable animation when menu is expanding</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>itemClassName</td>\n<td>ClassName of menu items</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>flatenContent</td>\n<td>Flaten item doms inside the menu container</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Menu Sub Menu\">Menu.SubMenu <a class=\"header-anchor scroll-count-item\" href=\"#Menu Sub Menu\" data-scroll-id=\"Menu Sub Menu\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Label of submenu</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>selectable</td>\n<td>Whether is selectable, it only works when set selectMode of Menu</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>Open mode of submenu, it will override the property with the same name on Menu</td>\n<td>Mode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Menu item or submenu</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>level</td>\n<td>-</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>noIcon</td>\n<td>No icon</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>subMenuContentClassName</td>\n<td>ClassName of the content node</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Menu Popup Item\">Menu.PopupItem <a class=\"header-anchor scroll-count-item\" href=\"#Menu Popup Item\" data-scroll-id=\"Menu Popup Item\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Label of the popup item</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Popup content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasSubMenu</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Open trigger type of popup content</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>align</td>\n<td>Alignment of the pop up submenu</td>\n<td>&apos;follow&apos; | &apos;outside&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>selectable</td>\n<td>Whether is selectable, it only works when set selectMode of Menu</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>Whether the width of the pop up submenu is equal to the parent menu item.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Menu Checkbox Item\">Menu.CheckboxItem <a class=\"header-anchor scroll-count-item\" href=\"#Menu Checkbox Item\" data-scroll-id=\"Menu Checkbox Item\">#</a></h3>\n<p>This subcomponent selection is not controlled by defaultSelectedKeys/selectedKeys. Please control the selected yourself.</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>checked</td>\n<td>Whether is checked</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>indeterminate</td>\n<td>Whether is indeterminate</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether is disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback function triggered when check or uncheck menu item<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is checked<br><em>event</em>: Event object</td>\n<td>(<br> checked: boolean,<br> event: React.MouseEvent | React.KeyboardEvent | React.ChangeEvent<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>helper</td>\n<td>Help text</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of menu check item</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Menu Radio Item\">Menu.RadioItem <a class=\"header-anchor scroll-count-item\" href=\"#Menu Radio Item\" data-scroll-id=\"Menu Radio Item\">#</a></h3>\n<p>This subcomponent selection is not controlled by defaultSelectedKeys/selectedKeys. Please control the selected yourself.</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>checked</td>\n<td>Whether is checked</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether is disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback function triggered when check or uncheck menu item<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is checked<br><em>event</em>: Event object</td>\n<td>(checked: boolean, event: React.MouseEvent | React.KeyboardEvent) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>helper</td>\n<td>Help text</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of menu radio item</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Menu Group\">Menu.Group <a class=\"header-anchor scroll-count-item\" href=\"#Menu Group\" data-scroll-id=\"Menu Group\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Label of group</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Menu items</td>\n<td>React.ReactChild | React.ReactChild[]</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Menu Divider\">Menu.Divider <a class=\"header-anchor scroll-count-item\" href=\"#Menu Divider\" data-scroll-id=\"Menu Divider\">#</a></h3>\n<p>Split line</p>\n<h3 id=\"Select Extra\">SelectExtra <a class=\"header-anchor scroll-count-item\" href=\"#Select Extra\" data-scroll-id=\"Select Extra\">#</a></h3>\n<p>The extra info when trigger select</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>Key of menu item</td>\n<td>string</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>select</td>\n<td>Is selected</td>\n<td>boolean</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>label</td>\n<td>The label of menu item</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>keyPath</td>\n<td>Full key paths of the operating menu item</td>\n<td>string[]</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>labelPath</td>\n<td>Full label paths of the operating menu item</td>\n<td>React.ReactNode[]</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Mode\">Mode <a class=\"header-anchor scroll-count-item\" href=\"#Mode\" data-scroll-id=\"Mode\">#</a></h3>\n<p>Open mode of submenu</p>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">Mode</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;inline&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;popup&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<!-- api-extra-start -->\n<h3 id=\"Menu Create Props\">Menu.create(props) <a class=\"header-anchor scroll-count-item\" href=\"#Menu Create Props\" data-scroll-id=\"Menu Create Props\">#</a></h3>\n<p>Create a context menu.</p>\n<ul>\n<li>the props argument can be passed to all supported props of Menu</li>\n<li>the props argument adds support for overlayProps to customize the overlay</li>\n</ul>\n<!-- api-extra-end -->\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Up Arrow</td>\n<td style=\"text-align:left\">navigate to previous item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Down Arrow</td>\n<td style=\"text-align:left\">navigate to next item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">open the submenu, navigate to the first item of the submenu; horizontal menu bar first level, navigate to the right one</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">close the submenu, navigate to the parent menu; horizontal menu bar first level, navigation to the left one</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">open submenu and navigate to the first item of the submenu</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Esc</td>\n<td style=\"text-align:left\">close submenu and navigate to the parent menu item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Space</td>\n<td style=\"text-align:left\">toggle selected or checked</td>\n</tr>\n</tbody>\n</table>\n"}