@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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

@@ -0,0 +1,1631 @@
+Popover
+=======
+
+Overview
+--------
+
+A popover is panel that is toggled on/off by an activator button or text input. The panel is positioned relative to its activator element.
+
+[](./iframe.html?id=components-popover--activator)
+
+Toggle popover
+
+A little more information about this area.
+
+```
+
+<IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
+  <IressPanel\>
+    A little more information about this area.  </IressPanel\>
+</IressPopover\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Usage
+-----
+
+### Activator
+
+For the popover to render, the `activator` property is required. It is the element used to trigger the popover, and works best with an `IressButton`.
+
+Anything added as the children of the `IressPopover` component will be displayed in the popover panel.
+
+[](./iframe.html?id=components-popover--activator)
+
+Toggle popover
+
+A little more information about this area.
+
+```
+
+<IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
+  <IressPanel\>
+    A little more information about this area.  </IressPanel\>
+</IressPopover\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### The `show` property
+
+You can use state to control the popover by setting the `show` property to `true` or `false`. To sync your state with the popover, you can use the `onActivated` and `onDeactivated` prop.
+
+[](./iframe.html?id=components-popover--show-with-state)
+
+Show popover using state
+
+A little more information about this area.
+
+```
+
+import {
+  IressButton,
+  IressPanel,
+  IressPopover,
+  type IressPopoverProps,
+} from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const PopoverUsingState \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  return (
+    <IressPopover
+      
+      activator\={
+        <IressButton onClick\={() \=> setShow(!show)}\>
+          Show popover using state        </IressButton\>
+      }
+      show\={show}
+      onActivated\={() \=> setShow(true)}
+      onDeactivated\={() \=> setShow(false)}
+    \>
+      <IressPanel\>A little more information about this area.</IressPanel\>
+    </IressPopover\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | \- |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | \- |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Behaviour
+---------
+
+*   The popover is opened when the activator is pressed
+*   Once activated, the popover will set focus to popover content
+*   When the activator is pressed whilst the popover is open, it will close
+*   When the escape key is pressed while it is open, it will close
+*   When the popover panel loses focus, it will close
+
+Examples
+--------
+
+### Align
+
+The popover panel can be aligned in one of 12 positions relative to the activator element. The default value is `auto`.
+
+The popover panel's position will change dynamically based on the amount of space available in it's container window, so that it doesn't overflow.
+
+[](./iframe.html?id=components-popover--align)
+
+top-start
+
+Hello!
+
+top
+
+Hello!
+
+top-end
+
+Hello!
+
+left-start
+
+Hello!
+
+left
+
+Hello!
+
+left-end
+
+Hello!
+
+right-start
+
+Hello!
+
+right
+
+Hello!
+
+right-end
+
+Hello!
+
+bottom-start
+
+Hello!
+
+bottom
+
+Hello!
+
+bottom-end
+
+Hello!
+
+```
+
+<div
+  style\={{
+    padding: '80px 150px'
+  }}
+\>
+  <IressStack gap\="md"\>
+    <IressInline
+      gap\="sm"
+      horizontalAlign\="center"
+    \>
+      <IressPopover
+        activator\={<IressTooltip align\="bottom-start" tooltipText\="Tooltips and popovers can go together if needed!"\><IressButton\>top-start</IressButton\></IressTooltip\>}
+        align\="top-start"
+      \>
+        <IressPanel\>
+          Hello!        </IressPanel\>
+      </IressPopover\>
+      <IressPopover
+        activator\={<IressButton\>top</IressButton\>}
+        align\="top"
+      \>
+        <IressPanel\>
+          Hello!        </IressPanel\>
+      </IressPopover\>
+      <IressPopover
+        activator\={<IressButton\>top-end</IressButton\>}
+        align\="top-end"
+      \>
+        <IressPanel\>
+          Hello!        </IressPanel\>
+      </IressPopover\>
+    </IressInline\>
+    <IressInline horizontalAlign\="between"\>
+      <IressStack gap\="sm"\>
+        <IressInline horizontalAlign\="left"\>
+          <IressPopover
+            activator\={<IressButton\>left-start</IressButton\>}
+            align\="left-start"
+          \>
+            <IressPanel\>
+              Hello!            </IressPanel\>
+          </IressPopover\>
+        </IressInline\>
+        <IressInline horizontalAlign\="left"\>
+          <IressPopover
+            activator\={<IressButton\>left</IressButton\>}
+            align\="left"
+          \>
+            <IressPanel\>
+              Hello!            </IressPanel\>
+          </IressPopover\>
+        </IressInline\>
+        <IressInline horizontalAlign\="left"\>
+          <IressPopover
+            activator\={<IressButton\>left-end</IressButton\>}
+            align\="left-end"
+          \>
+            <IressPanel\>
+              Hello!            </IressPanel\>
+          </IressPopover\>
+        </IressInline\>
+      </IressStack\>
+      <IressStack gap\="sm"\>
+        <IressInline horizontalAlign\="right"\>
+          <IressPopover
+            activator\={<IressButton\>right-start</IressButton\>}
+            align\="right-start"
+          \>
+            <IressPanel\>
+              Hello!            </IressPanel\>
+          </IressPopover\>
+        </IressInline\>
+        <IressInline horizontalAlign\="right"\>
+          <IressPopover
+            activator\={<IressButton\>right</IressButton\>}
+            align\="right"
+          \>
+            <IressPanel\>
+              Hello!            </IressPanel\>
+          </IressPopover\>
+        </IressInline\>
+        <IressInline horizontalAlign\="right"\>
+          <IressPopover
+            activator\={<IressButton\>right-end</IressButton\>}
+            align\="right-end"
+          \>
+            <IressPanel\>
+              Hello!            </IressPanel\>
+          </IressPopover\>
+        </IressInline\>
+      </IressStack\>
+    </IressInline\>
+    <IressInline
+      gap\="sm"
+      horizontalAlign\="center"
+    \>
+      <IressPopover
+        activator\={<IressButton\>bottom-start</IressButton\>}
+        align\="bottom-start"
+      \>
+        <IressPanel\>
+          Hello!        </IressPanel\>
+      </IressPopover\>
+      <IressPopover
+        activator\={<IressButton\>bottom</IressButton\>}
+        align\="bottom"
+      \>
+        <IressPanel\>
+          Hello!        </IressPanel\>
+      </IressPopover\>
+      <IressPopover
+        activator\={<IressButton\>bottom-end</IressButton\>}
+        align\="bottom-end"
+      \>
+        <IressPanel\>
+          Hello!        </IressPanel\>
+      </IressPopover\>
+    </IressInline\>
+  </IressStack\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | \- |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Width
+
+Occasionally, you may have more information to display than the width set by the theme can comfortably show.
+
+[](./iframe.html?id=components-popover--width)
+
+Toggle popover
+
+```
+
+<IressPopover
+  activator\={<IressButton\>Toggle popover</IressButton\>}
+  container\={document.body}
+  contentStyle\={{
+    style: {
+      maxWidth: '30rem'
+    }
+  }}
+\>
+  <IressPanel\>
+    <IressRow\>
+      <IressCol span\={6}\>
+        <IressText\>
+          Client        </IressText\>
+        <IressText noGutter\>
+          <ul\>
+            <li\>
+              Entity id 582323            </li\>
+            <li\>
+              Fruit Apple            </li\>
+            <li\>
+              Preferred email mamaduke@gmail.com            </li\>
+          </ul\>
+        </IressText\>
+      </IressCol\>
+      <IressCol span\={6}\>
+        <IressText\>
+          Client        </IressText\>
+        <IressText noGutter\>
+          <ul\>
+            <li\>
+              Entity id 8766            </li\>
+            <li\>
+              Fruit Orange            </li\>
+            <li\>
+              Preferred email felicity@yahoo.com            </li\>
+          </ul\>
+        </IressText\>
+      </IressCol\>
+    </IressRow\>
+  </IressPanel\>
+</IressPopover\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | 
+
+{}
+
+ |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | \- |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| width | 
+
+\-
+
+ | \- | \- |
+
+### Overflow
+
+Popovers can contain a wide variety of different content, including components that use popovers themselves (like Combobox). This can cause issues with overflowing content, so by default we allow popovers to grow in height based on their content.
+
+If you need to fix the height of a popover, you can set a maximum height using the `maxHeight` and `overflowY` css on your popover's `contentStyle` prop.
+
+[](./iframe.html?id=components-popover--overflow)
+
+Normal popover
+
+Fixed height popover
+
+```
+
+<IressInline gap\="md"\>
+  <IressPopover
+    activator\={<IressButton\>Normal popover</IressButton\>}
+    align\="bottom-start"
+    container\={document.body}
+  \>
+    <IressPanel\>
+      <IressText noGutter\>
+        <p\>
+          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.        </p\>
+      </IressText\>
+    </IressPanel\>
+  </IressPopover\>
+  <IressPopover
+    activator\={<IressButton\>Fixed height popover</IressButton\>}
+    align\="bottom-start"
+    container\={document.body}
+    contentStyle\={{
+      style: {
+        maxHeight: '200px',
+        overflowY: 'auto'
+      }
+    }}
+  \>
+    <IressPanel\>
+      <IressText noGutter\>
+        <p\>
+          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.        </p\>
+      </IressText\>
+    </IressPanel\>
+  </IressPopover\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | 
+
+"bottom-start"
+
+ |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | 
+
+{}
+
+ |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Container
+
+By default, the popover will be rendered where its parent is rendered. If you need to render the popover in a different container, you can use the `container` prop.
+
+**Note:** If the `container` doesn’t exist when the portal is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available.
+
+This will be the case when you are rendering into its parent container, which is not yet rendered when the popover is mounted. The example below shows how to use state instead of a reference to change where the popover is rendered.
+
+[](./iframe.html?id=components-popover--parent-container)
+
+Toggle
+
+This content will be rendered in the parent container
+
+```
+
+export const PopoverParentContainer \= () \=> {
+  const \[parentContainer, setParentContainer\] \= useState<HTMLDivElement | null\>(
+    null,
+  );
+  return (
+    <div id\="parent" ref\={setParentContainer}\>
+      <IressPopover
+        activator\={<IressButton\>Toggle</IressButton\>}
+        container\={parentContainer}
+      \>
+        <IressPanel\>
+          This content will be rendered in the parent container        </IressPanel\>
+      </IressPopover\>
+    </div\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressButton`.
+
+PopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'auto'
+
+ | Set object |
+| children | 
+
+The content to render within the popover.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonehellobasicdetailsparagraphmenu |
+| container | 
+
+The container element to render the popover into. By default, the popover will render where its parent is rendered.
+
+**Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| contentClassName | 
+
+Class name of the popover content.
+
+string
+
+<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `contentStyle` instead.</td></tr></tbody></table>
+
+ | \- | Set string |
+| contentStyle | 
+
+This allows you to customise the content styling specifically, which is the floating element. It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| displayMode | 
+
+Sets the display mode of popover.
+
+DisplayModes
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| fluid | 
+
+Popovers can be fluid, meaning they will take up the full width of their container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| focusStartIndex | 
+
+Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu. Note: The index must exist in the list of items, otherwise it will not work.
+
+number
+
+
+
+ | \- | Set number |
+| matchActivatorWidth | 
+
+Sets the popover to match the width of the activator. Note: This only works when `displayMode="overlay"`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onActivated | 
+
+Is called when popover is activated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onDeactivated | 
+
+Is called when popover is deactivated.
+
+( e?: Event, reason?: OpenChangeReason, activeIndex?: number | null, ) => void
+
+ | \- | \- |
+| onNavigate | 
+
+Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+
+(activeIndex: number | null) => void
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled popovers.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| type | 
+
+Describes the type of content contained in the popover.
+
+PopoverHookReturn\['type'\]
+
+ | \- | Set object |
+| virtualFocus | 
+
+Whether the focus is virtual (using `aria-activedescendant`). Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items. Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+`IressInputPopover`
+-------------------
+
+If you need a popover that is triggered by input changes, you can use the `IressInputPopover` component. This component has an additional `minLength` prop that allows you to specify the minimum number of characters required before the popover is shown.
+
+### Behaviour
+
+Input popovers work slightly different to normal popovers, where the focus inside the popover is **virtual**. This means that the popover content will act as if it is in focus, but the input will still be the actual focus.
+
+*   The popover is opened when the input has content that meets the `minLength` requirement
+*   The popover is closed when the input no longer meets the `minLength` requirement
+*   Once activated, virtual focus will be set to the popover content if it contains a menu (e.g. items will highlight as if in focus, but the user can still type in the input)
+*   When the `minLength` is 0, it will open on focus
+*   When the escape key is pressed while it is open, it will close
+*   When the input loses focus, it will close
+
+[](./iframe.html?id=components-popover-inputpopover--activator)
+
+```
+
+<IressInputPopover
+  activator\={<IressInput />}
+  container\={document.body}
+\>
+  <IressPanel\>
+    A little more information about this area.  </IressPanel\>
+</IressInputPopover\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+Content for an activator element, usually an `IressInput`.
+
+InputPopoverActivatorProps\['children'\]
+
+ | \- | \- |
+| align | 
+
+ | 
+
+'auto'
+
+ | Set object |
+| autoHighlight | 
+
+If true, the first supported is automatically highlighted.
+
+boolean
+
+
+
+ | 
+
+true
+
+ | Set boolean |
+| children | 
+
+string
+
+
+
+ | \- | Choose option...nonebasicmenu |
+| container | 
+
+object
+
+
+
+ | \- | 
+
+{}
+
+ |
+| displayMode | 
+
+ | 
+
+'overlay'
+
+ | Set object |
+| type | 
+
+Describes the type of content contained in the popover. If `listbox`, it will add the combobox role to the popover activator.
+
+IressPopoverProps\['type'\]
+
+ | 
+
+'listbox'
+
+ | Set object |