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

package/generated/docs/components_components-panel-docs.md

@@ -10,7 +10,7 @@ A panel is used to group related content.
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel\>
   His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
@@ -43,7 +43,7 @@ ReactNode
 
 
 
- | \- | Choose option...nonetextparagraphsstory |
+ | \- | childrenChoose option...nonetextparagraphsstory |
 | noBorderRadius | 
 
 Setting to true will ignore the border radius set in the theme and set it to zero.
@@ -127,7 +127,7 @@ transparent
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressPanel background\="default"\>
@@ -174,7 +174,7 @@ ReactNode
 
 
 
- | \- | Choose option...nonetextparagraphsstory |
+ | \- | childrenChoose option...nonetextparagraphsstory |
 | noBorderRadius | 
 
 Setting to true will ignore the border radius set in the theme and set it to zero.
@@ -255,7 +255,7 @@ lg
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressPanel padding\="none"\>
@@ -302,7 +302,7 @@ ReactNode
 
 
 
- | \- | Choose option...nonetextparagraphsstory |
+ | \- | childrenChoose option...nonetextparagraphsstory |
 | noBorderRadius | 
 
 Setting to true will ignore the border radius set in the theme and set it to zero.
@@ -372,7 +372,7 @@ padding={{
   "lg": "lg"
 }}
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   noGutter
@@ -385,7 +385,7 @@ padding={{
 \>
   <p\>
     Current breakpoint:{' '}
-    <kn />
+    <Ln />
     .  </p\>
   <p\>
     <pre\>
@@ -454,7 +454,7 @@ union
 
  | 
 
-RAW
+Edit JSON
 
 padding :
 
@@ -544,7 +544,7 @@ padding={{
   }
 }}
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack
   ref\={undefined}
@@ -589,7 +589,7 @@ padding={{
       Responsive variable padding    </h2\>
     <p\>
       Current breakpoint:{' '}
-      <kn />
+      <Ln />
       .    </p\>
     <p\>
       <pre\>
@@ -659,7 +659,7 @@ union
 
  | 
 
-RAW
+Edit JSON
 
 padding :
 
@@ -687,7 +687,7 @@ object
 
  | \- | 
 
-RAW
+Edit JSON
 
 responsivePadding :
 
@@ -771,7 +771,7 @@ justify
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gutter\="md"\>
   <IressPanel textAlign\="center"\>
@@ -826,7 +826,7 @@ ReactNode
 
 
 
- | \- | Choose option...nonetextparagraphsstory |
+ | \- | childrenChoose option...nonetextparagraphsstory |
 | noBorderRadius | 
 
 Setting to true will ignore the border radius set in the theme and set it to zero.
@@ -889,7 +889,7 @@ Panel can be set to fill its available container height by setting the `stretch`
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack
   style\={{
@@ -926,7 +926,7 @@ ReactNode
 
 
 
- | \- | Choose option...nonetextparagraphsstory |
+ | \- | childrenChoose option...nonetextparagraphsstory |
 | noBorderRadius | 
 
 Setting to true will ignore the border radius set in the theme and set it to zero.
@@ -989,7 +989,7 @@ Panels can inherit the theme's border radius which may result in an undesirable
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel noBorderRadius\>
   His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
@@ -1021,7 +1021,7 @@ ReactNode
 
 
 
- | \- | Choose option...nonetextparagraphsstory |
+ | \- | childrenChoose option...nonetextparagraphsstory |
 | noBorderRadius | 
 
 Setting to true will ignore the border radius set in the theme and set it to zero.

package/generated/docs/components_components-placeholder-docs.md

@@ -10,7 +10,7 @@ A placeholder is a UI element that allows you to reserve space for content that
 
 Placeholder
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPlaceholder
   height\="300"

package/generated/docs/components_components-popover-docs.md

@@ -12,7 +12,7 @@ Toggle popover
 
 A little more information about this area.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
   <IressPanel className\="iress-u-text"\>
@@ -53,7 +53,7 @@ ReactReactNode
 
 
 
- | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+ | \- | childrenChoose option...nonehellobasicdetailsparagraphmenu |
 | container | 
 
 The container element to render the popover into. By default, the popover will render where its parent is rendered.
@@ -89,7 +89,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -177,7 +177,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -196,7 +196,7 @@ Toggle popover
 
 A little more information about this area.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
   <IressPanel className\="iress-u-text"\>
@@ -236,7 +236,7 @@ ReactReactNode
 
 
 
- | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+ | \- | childrenChoose option...nonehellobasicdetailsparagraphmenu |
 | container | 
 
 The container element to render the popover into. By default, the popover will render where its parent is rendered.
@@ -272,7 +272,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -360,7 +360,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -374,14 +374,14 @@ Show popover using state
 
 A little more information about this area.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
   IressPanel,
   IressPopover,
   type IressPopoverProps,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 export const PopoverUsingState \= () \=> {
   const \[show, setShow\] \= useState(false);
@@ -470,7 +470,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -558,7 +558,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -630,7 +630,7 @@ bottom-end
 
 Hello!
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{
@@ -786,7 +786,7 @@ ReactReactNode
 
 
 
- | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+ | \- | childrenChoose option...nonehellobasicdetailsparagraphmenu |
 | container | 
 
 The container element to render the popover into. By default, the popover will render where its parent is rendered.
@@ -822,7 +822,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -910,7 +910,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -926,7 +926,7 @@ This is where the `--iress-width` CSS token come in, it will allow you to set th
 
 Toggle popover
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPopover
   activator\={<IressButton\>Toggle popover</IressButton\>}
@@ -1003,7 +1003,7 @@ ReactReactNode
 
 
 
- | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+ | \- | childrenChoose option...nonehellobasicdetailsparagraphmenu |
 | container | 
 
 The container element to render the popover into. By default, the popover will render where its parent is rendered.
@@ -1043,7 +1043,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -1131,7 +1131,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | \- |
 
@@ -1147,7 +1147,7 @@ Normal popover
 
 Fixed height popover
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInline gutter\="md"\>
   <IressPopover
@@ -1217,7 +1217,7 @@ ReactReactNode
 
 
 
- | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+ | \- | childrenChoose option...nonehellobasicdetailsparagraphmenu |
 | container | 
 
 The container element to render the popover into. By default, the popover will render where its parent is rendered.
@@ -1257,7 +1257,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -1345,7 +1345,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -1363,8 +1363,10 @@ Toggle
 
 This content will be rendered in the parent container
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import { useState } from 'react';
+import { IressButton, IressPanel, IressPopover } from '@/main';
 export const PopoverParentContainer \= () \=> {
   const \[parentContainer, setParentContainer\] \= useState<HTMLDivElement | null\>(
     null,
@@ -1415,7 +1417,7 @@ ReactReactNode
 
 
 
- | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+ | \- | childrenChoose option...nonehellobasicdetailsparagraphmenu |
 | container | 
 
 The container element to render the popover into. By default, the popover will render where its parent is rendered.
@@ -1451,7 +1453,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -1539,7 +1541,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -1561,7 +1563,7 @@ Input popovers work slightly different to normal popovers, where the focus insid
 
 [](./iframe.html?id=components-popover-inputpopover--activator)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputPopover
   activator\={<ForwardedInput />}
@@ -1609,7 +1611,7 @@ string
 
 
 
- | \- | Choose option...nonebasicmenu |
+ | \- | childrenChoose option...nonebasicmenu |
 | container | 
 
 object

package/generated/docs/components_components-popover-recipes-docs.md

@@ -56,130 +56,39 @@ role=nav
     *   the `esc` key is pressed
     *   the popover panel loses focus
 
-```
-
-<IressContainer className\="iress-u-stack iress--gutter--md"\>
-  <IressRow
-    gutter\="lg"
-    verticalAlign\="middle"
-  \>
-    <IressCol span\="2"\>
-      <IressPopover
-        activator\={<IressButton fluid\>role=menu</IressButton\>}
-        container\={document.body}
-        type\="menu"
-      \>
-        <IressMenu
-          defaultSelected\={3}
-          role\="menu"
-        \>
-          <IressMenuItem value\={0}\>
-            New task          </IressMenuItem\>
-          <IressMenuItem value\={1}\>
-            Send prospect welcome pack          </IressMenuItem\>
-          <IressMenuItem value\={2}\>
-            Book in Discovery meeting          </IressMenuItem\>
-          <IressMenuItem value\={3}\>
-            Prospect proceeding          </IressMenuItem\>
-        </IressMenu\>
-      </IressPopover\>
-    </IressCol\>
-    <IressCol\>
-      <MenuInPopoverRoleDescription role\="menu" />
-    </IressCol\>
-  </IressRow\>
-  <IressRow
-    gutter\="lg"
-    verticalAlign\="middle"
-  \>
-    <IressCol span\="2"\>
-      <IressPopover
-        activator\={<IressButton fluid\>role=list</IressButton\>}
-        container\={document.body}
-      \>
-        <IressMenu
-          defaultSelected\={3}
-          role\="list"
-        \>
-          <IressMenuItem value\={0}\>
-            New task          </IressMenuItem\>
-          <IressMenuItem value\={1}\>
-            Send prospect welcome pack          </IressMenuItem\>
-          <IressMenuItem value\={2}\>
-            Book in Discovery meeting          </IressMenuItem\>
-          <IressMenuItem value\={3}\>
-            Prospect proceeding          </IressMenuItem\>
-        </IressMenu\>
-      </IressPopover\>
-    </IressCol\>
-    <IressCol\>
-      <MenuInPopoverRoleDescription role\="list" />
-    </IressCol\>
-  </IressRow\>
-  <IressRow
-    gutter\="lg"
-    verticalAlign\="middle"
-  \>
-    <IressCol span\="2"\>
-      <IressPopover
-        activator\={<IressButton fluid\>role=listbox</IressButton\>}
-        container\={document.body}
-        type\="listbox"
-      \>
-        <IressMenu
-          defaultSelected\={3}
-          role\="listbox"
-        \>
-          <IressMenuItem value\={0}\>
-            New task          </IressMenuItem\>
-          <IressMenuItem value\={1}\>
-            Send prospect welcome pack          </IressMenuItem\>
-          <IressMenuItem value\={2}\>
-            Book in Discovery meeting          </IressMenuItem\>
-          <IressMenuItem value\={3}\>
-            Prospect proceeding          </IressMenuItem\>
-        </IressMenu\>
-      </IressPopover\>
-    </IressCol\>
-    <IressCol\>
-      <MenuInPopoverRoleDescription role\="listbox"\>
-        <IressToggle
-          className\="iress-mb--md"
-          onChange\={() \=> {}}
-        \>
-          Multi-select        </IressToggle\>
-      </MenuInPopoverRoleDescription\>
-    </IressCol\>
-  </IressRow\>
-  <IressRow
-    gutter\="lg"
-    verticalAlign\="middle"
-  \>
-    <IressCol span\="2"\>
-      <IressPopover
-        activator\={<IressButton fluid\>role=nav</IressButton\>}
-        container\={document.body}
-      \>
-        <IressMenu
-          defaultSelected\={3}
-          role\="nav"
-        \>
-          <IressMenuItem value\={0}\>
-            New task          </IressMenuItem\>
-          <IressMenuItem value\={1}\>
-            Send prospect welcome pack          </IressMenuItem\>
-          <IressMenuItem value\={2}\>
-            Book in Discovery meeting          </IressMenuItem\>
-          <IressMenuItem value\={3}\>
-            Prospect proceeding          </IressMenuItem\>
-        </IressMenu\>
-      </IressPopover\>
-    </IressCol\>
-    <IressCol\>
-      <MenuInPopoverRoleDescription role\="nav" />
-    </IressCol\>
-  </IressRow\>
-</IressContainer\>
+Hide codedrawOpen in CodeSandbox
+
+{
+  args: {
+    menuChildren: 'selectable'
+  },
+  argTypes: {
+    ...disableArgTypes(\['activator', 'children', 'role', 'type'\])
+  },
+  render: ({
+    menuChildren,
+    ...args
+  }) \=> {
+    const \[multiSelect, setMultiSelect\] \= useState(false);
+    return <IressContainer className\="iress-u-stack iress--gutter--md"\>
+        {MENU\_ROLES.map(role \=> <IressRow gutter\={IressRow.Gutter.Lg} key\={role} verticalAlign\={IressRow.VerticalAlign.Middle}\>
+            <IressCol span\={IressCol.Span.Two}\>
+              <IressPopover {...args} activator\={<IressButton fluid\>role={role}</IressButton\>} container\={document.body} type\={role \=== 'listbox' || role \=== 'menu' ? role : undefined}\>
+                <IressMenu role\={role} defaultSelected\={3} multiSelect\={multiSelect && role \=== 'listbox'}\>
+                  {menuChildren}
+                </IressMenu\>
+              </IressPopover\>
+            </IressCol\>
+            <IressCol\>
+              <MenuInPopoverRoleDescription role\={role}\>
+                {role \=== 'listbox' && <IressToggle className\="iress-mb--md" checked\={multiSelect} onChange\={() \=> setMultiSelect(!multiSelect)}\>
+                    Multi-select                  </IressToggle\>}
+              </MenuInPopoverRoleDescription\>
+            </IressCol\>
+          </IressRow\>)}
+      </IressContainer\>;
+  }
+}
 
 ```
 
@@ -250,7 +159,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -290,7 +199,7 @@ string
 
 
 
- | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+ | \- | menuChildrenChoose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
 | onActivated | 
 
 Is called when popover is activated.
@@ -350,7 +259,7 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |
 
@@ -373,8 +282,15 @@ The `usePopoverItem` hook returns an object with the following properties:
 
 Toggle
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import { useState } from 'react';
+import {
+  ButtonCssClass,
+  IressButton,
+  IressPopover,
+  usePopoverItem,
+} from '@/main';
 const CountButton \= () \=> {
   const \[count, setCount\] \= useState(0);
   const { isActiveInPopover, ...popoverItemProps } \= usePopoverItem('Count', {
@@ -477,7 +393,7 @@ When set to `true`, popover toggling can only be done through the toggle method
 
 boolean
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use a controlled `show` prop instead.</td></tr></tbody></table>
 
  | \- | Set boolean |
 | displayMode | 
@@ -515,7 +431,7 @@ boolean
 
 \-
 
- | \- | Choose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
+ | \- | menuChildrenChoose option...nonebasiccomplexnavigationheadingsdividersslotsextraInformationselectable |
 | onActivated | 
 
 Is called when popover is activated.
@@ -570,6 +486,6 @@ Sets the width of the popover
 
 string
 
-<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: use the `--iress-max-width` design token instead.</td></tr></tbody></table>
 
  | \- | Set string |