@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

package/generated/docs/components_components-menu-menuitem-docs.md

@@ -0,0 +1,633 @@
+Menu Item
+=========
+
+Overview
+--------
+
+Menu items are headings, buttons and dividers used inside an \`IressMenu\`
+
+[](./iframe.html?id=components-menu-menuitem--unselected)
+
+Menu item
+
+```
+
+<IressMenuItem\>
+  Menu item
+</IressMenuItem\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu item |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Selected
+
+The `IressMenuItem` can be set to selected using the `selected` prop.
+
+**Note:** If you are using `IressMenu` with a `role` of `listbox`, you should use the `defaultSelected` or `selected` prop on the `IressMenu` to set the selected state of its `<IressMenuItem />` children, as the `selected` prop will be ignored.
+
+[](./iframe.html?id=components-menu-menuitem--selected)
+
+Menu item
+
+```
+
+<IressMenuItem selected\>
+  Menu item
+</IressMenuItem\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu item |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+### Value
+
+A menu item can have a unique value set to it, used to determine its selected state in a `IressMenu` component with a `role` of `listbox`. The value is not visible to end users.
+
+[](./iframe.html?id=components-menu-menuitem--value)
+
+Menu item with value
+
+```
+
+<IressMenu role\="listbox"\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu item with value |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| value | 
+
+number
+
+
+
+ | \- |  |
+
+### `canToggle`
+
+When `canToggle` is set to true, the menu item can be toggled between selected and unselected states. This only works in a `IressMenu` component with a `role` of `listbox`.
+
+[](./iframe.html?id=components-menu-menuitem--can-toggle)
+
+Menu item with value
+
+```
+
+<IressMenu role\="listbox"\>
+  <IressMenuItem
+    canToggle
+    value\={9}
+  \>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| canToggle | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| children | 
+
+string
+
+
+
+ | \- | Menu item with value |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| value | 
+
+number
+
+
+
+ | \- |  |
+
+### Prepend and append
+
+You can prepend and append content to a menu item using the `prepend` and `append` props.
+
+[](./iframe.html?id=components-menu-menuitem--prepend-and-append)
+
+Menu itemNew
+
+```
+
+<IressMenuItem
+  append\={<IressBadge mode\="success"\>New</IressBadge\>}
+  prepend\={<IressIcon name\="home" />}
+\>
+  Menu item
+</IressMenuItem\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+RAW
+
+append :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ children, mode = "background-default", pill, className, host, ...restProps }) => { const classMap = { \[styles.badge\]: true, \[styles.base\]: true, \[styles\[mode\]\]: true, \[styles.pill\]: pill }; const badge = /\* @\_\_PURE\_\_ \*/ jsxDEV("span", { className: classNames(classMap, className), ...restProps, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Badge/Badge.tsx", lineNumber: 26, columnNumber: 3 }, this); return host ? /\* @\_\_PURE\_\_ \*/ jsxDEV( "div", { className: styles.host, "data-testid": propagateTestid(restProps\["data-testid"\], "host"), children: \[ host, badge \] }, void 0, true, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Badge/Badge.tsx", lineNumber: 32, columnNumber: 3 }, this ) : badge; }
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| children | 
+
+string
+
+
+
+ | \- | Menu item |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+RAW
+
+prepend :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type :
+    
+    {...} 9 keys
+    
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+
+### Multi-select menus
+
+Inside a `IressMenu` with a `role` of `listbox` and the `multiSelect` prop set to true, the menu item will display with a checkbox.
+
+[](./iframe.html?id=components-menu-menuitem--multi-select)
+
+Menu item with valueMenu item with value
+
+```
+
+<IressMenu
+  multiSelect
+  role\="listbox"
+\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+  <IressMenuItem value\={9}\>
+    Menu item with value  </IressMenuItem\>
+</IressMenu\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu item with value |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| value | 
+
+number
+
+
+
+ | \- |  |
+
+### Divider
+
+When `divider` is set to true, the menu item will render with a bottom border.
+
+[](./iframe.html?id=components-menu-menuitem--divider)
+
+Menu item with divider
+
+```
+
+<IressMenuItem divider\>
+  Menu item with divider
+</IressMenuItem\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu item with divider |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+
+However, it is recommended to use the `IressMenuDivider` component instead.
+
+[](./iframe.html?id=components-menu-menuitem-divider--divider)
+
+* * *
+
+```
+
+<IressMenuDivider />
+
+```
+
+#### Props
+
+### Heading
+
+You can use the `IressMenuHeading` to render a heading within a menu. By default it renders as a `h2`, but you can change it by setting the `level` prop.
+
+[](./iframe.html?id=components-menu-menuitem-heading--heading)
+
+Menu heading
+------------
+
+```
+
+<IressMenuHeading\>
+  Menu heading
+</IressMenuHeading\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu heading |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| level | 
+
+Renders the heading level (h2 - h6).
+
+union
+
+
+
+ | 
+
+'h2'
+
+ | Set object |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+
+### Text
+
+You can use the `IressMenuText` to render text within a menu. This adds styling so the appropriate padding is applied.
+
+[](./iframe.html?id=components-menu-menuitem-text--text)
+
+Menu text
+
+```
+
+<IressMenuText\>
+  Menu text
+</IressMenuText\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Section after menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+string
+
+
+
+ | \- | Menu text |
+| divider | 
+
+Adds a divider after any content. If you would like to add content before the menu item, use a `<hr />` instead.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| prepend | 
+
+Section before menu item content.
+
+ReactReactNode
+
+
+
+ | \- | Set object |