@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

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

@@ -1,211 +0,0 @@
-[](#recipes)Recipes
-===================
-
-[](#with-iressmenu)With `IressMenu`
------------------------------------
-
-When an `IressMenu` is used inside `IressPopover`, it adds some additional functionality to the popover, including:
-
-*   `IressPopover` will automatically close the popover when a menu item is clicked.
-*   `IressMenu` will automatically focus the first menu item when the popover is opened.
-
-role=listbox
-
-Multi-select
-
-### Listbox menu behaviour
-
-*   Once activated, focus is set to the first menu item
-*   Menu items can be navigated using arrow keys
-*   Popover will close when:
-    *   the `esc` key is pressed
-    *   the `tab` key is pressed (focus moves to the next focusable element in the DOM)
-    *   a menu item is clicked (except when a listbox menu is in `multiSelect` mode)
-    *   When user presses the `up` key when the first item is focused
-
-role=menu
-
-### Application menu behaviour
-
-*   Once activated, focus is set to the first menu item
-*   Menu items can be navigated using the `up` and `down` arrow keys
-*   Popover will close when:
-    *   the `esc` key is pressed
-    *   the `tab` key is pressed (focus moves to the focusable element in the DOM)
-    *   a menu item is clicked
-
-role=list
-
-### Navigation/list menu behaviour
-
-*   Once activated, focus is set to the popover panel
-*   Menu items can be navigated using the `tab` key
-*   Popover will close when:
-    *   the `esc` key is pressed
-    *   the popover panel loses focus
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack
-  gap\="md"
-  maxWidth\="container.lg"
-  mx\="auto"
-  px\="lg"
-\>
-  <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
-          mb\="md"
-          onChange\={() \=> {}}
-        \>
-          Multi-select        </IressToggle\>
-      </MenuInPopoverRoleDescription\>
-    </IressCol\>
-  </IressRow\>
-  <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\>
-</IressStack\>
-
-Copy
-
-[](#focusable-children)Focusable children
------------------------------------------
-
-If you are using the `listbox` or `menu` type popovers, you will notice that focusable children (with the exception of `IressMenuItem`) are not automatically focusable with the arrow keys. To make them focusable, you will need to embed the focusable children using the `usePopoverItem` hook.
-
-The `usePopoverItem` hook will automatically handle the focus management for you. It has two optional arguments:
-
-*   The first argument is the typeahead label of the item you are registering. This will allow it to have a keyboard shortcut to focus the item.
-*   The second argument is a virtual node, which is used in `virtualFocus` enabled popovers and `IressInputPopover`, to mimic the `onKeyDown` and `onBlur` events of the original element when the item is virtually focused using `aria-activedescendant`. If not provided, nothing will happen when the element is virtually focused.
-
-The `usePopoverItem` hook returns an object with the following properties:
-
-*   `isActiveInPopover`: A boolean that indicates if the item is currently focused in the popover. This can be used to style the item differently when it is focused.
-*   `...popoverItemProps`: The rest of the props that you should spread on the focusable element to make it focusable.
-
-Toggle
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const CountButton \= () \=> {
-  const \[count, setCount\] \= useState(0);
-  const { isActiveInPopover, ...popoverItemProps } \= usePopoverItem('Count', {
-    onKeyDown: (e) \=> {
-      if (e.key \=== '+') {
-        setCount(count + 1);
-      }
-    },
-  });
-  return (
-    <IressButton
-      {...popoverItemProps}
-      active\={isActiveInPopover}
-      mode\="tertiary"
-      fluid
-    \>
-      Increase count using the + key: {count}
-    </IressButton\>
-  );
-};
-export const UsePopoverExample \= () \=> (
-  <IressPopover
-    activator\={<IressButton\>Toggle</IressButton\>}
-    container\={document.body}
-    type\="listbox"
-    virtualFocus
-  \>
-    <CountButton />
-    <CountButton />
-  </IressPopover\>
-);
-
-Copy
-
-On this page
-
-*   [With IressMenu](#with-iressmenu)
-*   [Focusable children](#focusable-children)