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

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

@@ -0,0 +1,2262 @@
+Slideout
+========
+
+Overview
+--------
+
+Slideouts are used to show additional information or to allow users to perform secondary tasks without leaving their normal workflow.
+
+Read more
+
+[](#use-a-slideout-when)Use a slideout when:
+--------------------------------------------
+
+*   Providing supplemental tasks that require the underlying page to still be visible
+*   Providing non-essential information related to the underlying page
+
+[](./iframe.html?id=components-slideout--default)
+
+Show slideout
+
+```
+
+const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  <\>
+  <IressButton onClick\={() \=> showSlideout(SLIDEOUT\_ID)}\>
+    Show slideout  </IressButton\>
+  <IressSlideout
+    footer\="Footer slot"
+    id\="storybook-slideout"
+  \>
+    Slideout content  </IressSlideout\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Slideout content"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Footer slot"
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | storybook-slideout |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+Controlling the slideout
+------------------------
+
+### Using the `show` property
+
+You can use state to control the slideout by setting the `show` property to `true` or `false`. To sync your state with the slideout, you can use the `onShowChange` prop, which is normally passed the set function from `useState`.
+
+[](./iframe.html?id=components-slideout--show-with-state)
+
+Show slideout using state
+
+```
+
+import { IressButton, IressSlideout, type IressSlideoutProps } from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const SlideoutUsingState \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  return (
+    <\>
+      <IressButton onClick\={() \=> setShow(true)}\>
+        Show slideout using state      </IressButton\>
+      <IressSlideout
+        {...{
+  children: 'This slideout was opened via state',
+}}
+        show\={show}
+        onShowChange\={setShow}
+        footer\={<IressButton onClick\={() \=> setShow(false)}\>Close</IressButton\>}
+      />
+    </\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This slideout was opened via state"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | \- |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | Set string |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+### Using the `IressSlideoutProvider`
+
+You can use the `IressSlideoutProvider` to open and close slideout from anywhere in your application, as long as the slideout has a unique `id`. In this case you would use the `useSlideout` hook to open and close the slideout.
+
+To use, wrap your `<App/>` or the component that you want to use the `useSlideout` hook with `<IressSlideoutProvider />`.
+
+[](./iframe.html?id=components-slideout-provider--provider)
+
+Show slideout using provider
+
+```
+
+const SLIDEOUT\_ID \= 'storybook-slideout';
+export const App \= (slideoutProps: IressSlideoutProps) \=> (
+  <IressSlideoutProvider\>
+    <SlideoutWithTrigger {...slideoutProps} />
+  </IressSlideoutProvider\>
+);
+const SlideoutWithTrigger \= ({
+  id \= SLIDEOUT\_ID,
+  ...slideoutProps
+}: IressSlideoutProps) \=> {
+  const { showSlideout } \= useSlideout();
+  return (
+    <\>
+      <IressButton onClick\={() \=> showSlideout(id)}\>
+        Show slideout using provider      </IressButton\>
+      <IressSlideout
+        {...slideoutProps}
+        id\={id}
+        footer\={
+          <IressButton onClick\={() \=> showSlideout(id, false)}\>
+            Close slideout          </IressButton\>
+        }
+      \>
+        {slideoutProps.children ?? 'Slideout content'}
+      </IressSlideout\>
+    </\>
+  );
+};
+
+```
+
+#### Props
+
+These are some settings you can use to customise the provider, such as setting where the slideouts are rendered in the DOM.
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+\-
+
+ | \- | \- |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| injectPushStyles | 
+
+If you are rendering a slideout inside a micro-frontend, using `push` mode and `eleToPush` is targetting an element in the parent app, you will need to set this to `true` to ensure the styles are injected into the parent app. This will ensure the slideout is positioned correctly and the element is pushed correctly.
+
+union
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+Examples
+--------
+
+### Modes
+
+Slideouts can be used in two modes - `overlay` and `push`. In `overlay` mode the slideout sits on top of the content, useful if space is at a premium. In `push` mode the slideout will push the page container to make it smaller; this means you can see all of the page content when the page is available. Overlay is the default.
+
+[](./iframe.html?id=components-slideout--modes)
+
+Overlay slideoutPush slideout
+
+```
+
+const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  <IressInline gutter\="md"\>
+  <IressButton onClick\={() \=> showSlideout("overlay")}\>
+    Overlay slideout  </IressButton\>
+  <IressSlideout
+    footer\=""
+    id\="overlay"
+    mode\="overlay"
+  \>
+    <h2\>
+      Overlay    </h2\>
+    For most situations{' '}
+    <code\>
+      overlay    </code\>
+    {' '}will be what you need, which is why this is the default behaviour. You do not need to specify the mode if you want your slideout to sit on top of the page.
+  </IressSlideout\>
+  <IressButton onClick\={() \=> showSlideout("push")}\>
+    Push slideout  </IressButton\>
+  <IressSlideout
+    eleToPush\="#storybook-docs"
+    footer\=""
+    id\="push"
+    mode\="push"
+  \>
+    <IressText\>
+      <h2\>
+        Push      </h2\>
+      <p\>
+        If you have a data-heavy screen where you need all of the data to be visible when the slideout is open, use{' '}
+        <code\>
+          push        </code\>
+        . To allow push to work you will need to supply the ID of the element that needs to be pushed via the{' '}
+        <code\>
+          eleToPush        </code\>
+        {' '}prop. If the ID is not supplied, or the element cannot be found, the slideout will revert to{' '}
+        <code\>
+          overlay        </code\>
+        {' '}behaviour.
+      </p\>
+      <p\>
+        {\`Be aware though that push will only work on larger screens (>1200px); on smaller screens the slideout will overlay the content.\`}
+      </p\>
+    </IressText\>
+  </IressSlideout\>
+</IressInline\>
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | \- |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | \- |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+### Position
+
+Slideouts can appear from the left or the right of the screen. The default is right, but you can use the `position` prop to set it to slide in from the left.
+
+[](./iframe.html?id=components-slideout--position)
+
+rightleft
+
+```
+
+const Slideouts \= () \=> {
+  const { showSlideout } \= useSlideout();
+  return (
+    <IressInline gutter\="md"\>
+      {SLIDEOUT\_POSITIONS.map((position) \=> (
+        <\>
+          <IressButton onClick\={() \=> showSlideout(position)}\>
+            {position}
+          </IressButton\>
+          <IressSlideout id\={position} position\={position}\>
+            Slideout opened on the {position}
+          </IressSlideout\>
+        </\>
+      ))}
+    </IressInline\>
+  );
+};
+export const SlideoutPositions \= () \=> (
+  <IressSlideoutProvider\>
+    <Slideouts />
+  </IressSlideoutProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Footer slot"
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | storybook-slideout |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+### Backdrop
+
+Slideouts can be used with or without a backdrop. Using a backdrop places more emphasis on the slideout, but prevents users from accessing content on the rest of the page. If your users need to interact with page content (for example to copy information), don't use a backdrop.
+
+The slideout backdrop works in the same way as the modal backdrop; clicking on the backdrop will close the slideout.
+
+[](./iframe.html?id=components-slideout--backdrop)
+
+Show slideout with backdrop
+
+```
+
+const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  <\>
+  <IressButton onClick\={() \=> showSlideout(SLIDEOUT\_ID)}\>
+    Show slideout with backdrop  </IressButton\>
+  <IressSlideout
+    backdrop
+    footer\="Footer slot"
+    id\="storybook-slideout"
+  \>
+    Slideout content  </IressSlideout\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Slideout content"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Footer slot"
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | storybook-slideout |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+### Size
+
+The width of your slideout can be set using the `size` prop. By default it is `sm`, but it can be made larger by setting `size` to `md` or `lg`.
+
+[](./iframe.html?id=components-slideout--size)
+
+smmdlg
+
+```
+
+const Slideouts \= () \=> {
+  const { showSlideout } \= useSlideout();
+  return (
+    <IressInline gutter\="md"\>
+      {SLIDEOUT\_SIZES.map((size) \=> (
+        <\>
+          <IressButton onClick\={() \=> showSlideout(size)}\>{size}</IressButton\>
+          <IressSlideout id\={size} size\={size}\>
+            {size} slideout          </IressSlideout\>
+        </\>
+      ))}
+    </IressInline\>
+  );
+};
+export const SlideoutSizes \= () \=> (
+  <IressSlideoutProvider\>
+    <Slideouts />
+  </IressSlideoutProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Size slideout footer"
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | \- |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | \- |
+
+### Padding
+
+Slideout padding follows the panel padding convention. It can be set to either `none`, `sm`, `md` or `lg`, and defaults to `md` if not set.
+
+[](./iframe.html?id=components-slideout--padding)
+
+nonesmmdlg
+
+```
+
+const Slideouts \= () \=> {
+  const { showSlideout } \= useSlideout();
+  return (
+    <IressInline gutter\="md"\>
+      {PADDING\_SIZES.map((padding) \=> (
+        <\>
+          <IressButton onClick\={() \=> showSlideout(padding)}\>
+            {padding}
+          </IressButton\>
+          <IressSlideout id\={padding} padding\={padding}\>
+            Slideout opened with {padding} padding          </IressSlideout\>
+        </\>
+      ))}
+    </IressInline\>
+  );
+};
+export const SlideoutPaddings \= () \=> (
+  <IressSlideoutProvider\>
+    <Slideouts />
+  </IressSlideoutProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | \- |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | \- |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+### Footer
+
+The `footer` prop is used to set content that should appear underneath the main content. Usually used for extra controls like buttons etc.
+
+[](./iframe.html?id=components-slideout--footer)
+
+Show slideout with footer
+
+```
+
+const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  const Story \= () \=> {
+  const { showSlideout } \= useSlideout();
+const SLIDEOUT\_ID \= 'storybook-slideout';
+return (
+  <\>
+  <IressButton onClick\={() \=> showSlideout(SLIDEOUT\_ID)}\>
+    Show slideout with footer  </IressButton\>
+  <IressSlideout
+    footer\={<IressButton\>Footer button</IressButton\>}
+    id\="storybook-slideout"
+  \>
+    Slideout content  </IressSlideout\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+);
+};
+  
+export const App \= () \=> (
+  <IressSlideoutProvider\>
+        <Story />
+      </IressSlideoutProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Slideout content"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | Set object |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | \- |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | storybook-slideout |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | Set object |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | Set object |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+### Absolute position slideouts
+
+By default, slideout is set to `position: fixed` which means it will appear from the edge of the browser window. By setting the `--iress-position` css variable to `absolute` the slideout can appear from the edge of its closest relative positioned container. You will also need to set the `container` prop to the a reference of the relatively positioned container, so it can appear in the correct place in the DOM.
+
+If you're using an absolutely positioned slideout you may also want to change the vertical and horizontal positioning. By default this will be the top left or top right of the container, but you can use `--iress-offset-top` and `--iress-initial-offset` to adjust that if you need to.
+
+[](./iframe.html?id=components-slideout--absolute-position)
+
+Show slideout
+
+### Absolute slideout
+
+Almost before was mighty present had him time. But scorching counsel if mine dote men have or, one yet from pangs and for and despair there. If below nor but the name these deemed oh..
+
+```
+
+import {
+  IressStack,
+  IressButton,
+  IressText,
+  IressSlideout,
+  type IressSlideoutProps,
+} from '@iress-oss/ids-components';
+import { useRef, useState } from 'react';
+export const AbsolutePositionSlideout \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  const containerRef \= useRef<HTMLDivElement | null\>(null);
+  return (
+    <IressStack gutter\="md"\>
+      <IressButton onClick\={() \=> setShow(true)}\>Show slideout</IressButton\>
+      <div
+        ref\={containerRef}
+        style\={{
+          height: '300px',
+          border:
+            '1px solid var(--iress-g-border-color, var(--iress-default-border-color))',
+          padding: '1rem',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      \>
+        <IressText id\="contents"\>
+          <h3\>Absolute slideout</h3\>
+          <p\>
+            Almost before was mighty present had him time. But scorching counsel            if mine dote men have or, one yet from pangs and for and despair            there. If below nor but the name these deemed oh..          </p\>
+        </IressText\>
+        <IressSlideout
+          {...{
+  children: 'Slideout content',
+  footer: 'Footer slot',
+  id: 'storybook-slideout',
+  eleToPush: '#contents',
+  position: 'left',
+  mode: 'push',
+}}
+          container\={containerRef}
+          show\={show}
+          onShowChange\={setShow}
+          style\={
+            {
+              '--iress-position': 'absolute',
+            } as never
+          }
+        />
+      </div\>
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backdrop | 
+When set to `true` a backdrop will be displayed to cover the contents of the page. The slideout will then become the only element that can be interacted with.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Content to be displayed within the slideout.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Slideout content"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | 
+
+'Close'
+
+ | Set string |
+| container | 
+
+The container element to render the slideout into. By default, the slideout will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the slideout will be visible. Use for uncontrolled slideouts.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| eleToPush | 
+
+The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference. Will be ignored if `mode` is not set to `push` or if element does not exist.
+
+union
+
+
+
+ | \- | 
+
+"#contents"
+
+ |
+| footer | 
+
+Panel to place slideout controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Footer slot"
+
+ |
+| heading | 
+
+Sets the heading for the slideout. If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+
+string
+
+
+
+ | \- | storybook-slideout |
+| mode | 
+
+Sets how the Slideout interacts with the content of the page. `overlay` overlays the page content, obscuring the content below. `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+
+union
+
+
+
+ | 
+
+'overlay'
+
+ | 
+
+"push"
+
+ |
+| onEntered | 
+
+Emitted when the slideout has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the slideout has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the slideout has opened or closed internally. Use for controlled slideouts.
+
+(show: boolean, reason?: OpenChangeReason) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+
+(status: 'unmounted' | 'initial' | 'open' | 'close') => void
+
+ | \- | \- |
+| padding | 
+
+Sets the padding of the wrapping panel component.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| position | 
+
+Position of the slideout relative to the page. `left` or `right`.
+
+union
+
+
+
+ | 
+
+'right'
+
+ | 
+
+"left"
+
+ |
+| show | 
+
+When set to `true` the slideout will be visible. Use for controlled slideouts.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+
+union
+
+
+
+ | 
+
+'sm'
+
+ | Set object |
+
+Migrating to version 5
+----------------------
+
+### Adding the provider
+
+For your components to work as previously, you will need to set up the `IressSlideoutProvider` at the root of your application. This will allow you to use the `useSlideout` hook to open and close slideouts from anywhere in your application using the ID of the slideout.
+
+const App \= () \=> (
+  <IressSlideoutProvider\>Rest of app here</IressSlideoutProvider\>
+);
+
+```
+
+### Testing
+
+In version 5, slideouts are rendered conditionally, meaning they will not be available in the DOM until they are shown. This means that you will need to update your tests to account for this, as you cannot interact with its contents until it is shown, unlike in version 4.
+
+See below for an example in version 4 and version 5.
+
+Diff
+
+Old
+
+New
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { render, waitFor, screen } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { userEvent } from '@testing-library/user-event';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">test('opening and closing a slideout', async () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await componentLoad([</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByRole('button', { name: /open slideout/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'slideout-trigger',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'slideout',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // activate slideout</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  ]);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const slideout = await screen.findByRole('complementary'); // this assumes the slideout has the role="complementary"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByTestId('slideout-trigger');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const slideout = screen.getByTestId('slideout');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // In version 5, you can only interact with the slideout once it has been loaded here.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // In version 4, you can already interact with the slideout here as its in the DOM at this stage.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // activate slideout</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(slideout).toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  // close slideout</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByTestId('slideout__close-button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByRole('button', { name: /close/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(slideout).not.toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await waitForElementToBeRemoved(slideout);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">});</pre></td></tr></tbody></table>
+
+### Speed up tests
+
+You can speed up tests by wrapping your tests in a provider that overrides the theme tokens for animations.
+
+const themeOverrides: Record<string, string\> \= {
+  '--iress-slideout-animation-duration': '0s',
+};
+export const TestAppProvider \= ({ children }: PropsWithChildren) \=> {
+  const containerRef \= useRef<HTMLDivElement\>(null);
+  return (
+    <IressModalProvider container\={containerRef}\>
+      <div style\={themeOverrides} ref\={containerRef}\>
+        {children}
+      </div\>
+    </IressModalProvider\>
+  );
+};
+
+```