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

package/generated/docs/{components-modal-docs.md → components_components-modal-docs.md}

@@ -1,5 +1,5 @@
-[](#modal)Modal
-===============
+Modal
+=====
 
 Overview
 --------
@@ -21,15 +21,19 @@ Read more
 *   Conveying brief messages about background processes or status changes. Instead use IressAlert or IressToast.
 *   The modal content can be incorporated into the page without complicating the page's intent
 
-Show modal
+[](./iframe.html?id=components-modal--default)
 
-Hide code
+Show modal
 
-\[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 Story \= () \=> {
   const { showModal } \= useModal();
 const MODAL\_ID \= 'storybook-modal';
+return (
+  const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
 return (
   <\>
   <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
@@ -48,23 +52,210 @@ export const App \= () \=> (
         <Story />
       </IressModalProvider\>
 );
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Modal content"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Footer slot"
+
+ |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
 
-Copy
 
-[](#controlling-the-modal)Controlling the modal
------------------------------------------------
+ | \- | storybook-modal |
+| noCloseButton | 
 
-### [](#using-the-show-property)Using the `show` property
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Controlling the modal
+---------------------
+
+### Using the `show` property
 
 You can use state to control the modal by setting the `show` property to `true` or `false`. To sync your state with the modal, you can use the `onShowChange` prop, which is normally passed the set function from `useState`.
 
-Show modal using state
+[](./iframe.html?id=components-modal--show-with-state)
 
-Hide code
+Show modal using state
 
-\[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; }
+```
 
-import { IressButton, IressModal, IressModalProps } from '@iress-oss/ids-components';
+import { IressButton, IressModal, type IressModalProps } from '@iress-oss/ids-components';
 import { useState } from 'react';
 export const ModalUsingState \= () \=> {
   const \[show, setShow\] \= useState(false);
@@ -84,24 +275,198 @@ export const ModalUsingState \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This modal was opened via state"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
 
-### [](#using-the-iressmodalprovider)Using the `IressModalProvider`
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | \- |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | Set string |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Using the `IressModalProvider`
 
 You can use the `IressModalProvider` to open and close modals from anywhere in your application, as long as the modal has a unique `id`. In this case you would use the `useModal` hook to open and close the modal.
 
 To use, wrap your `<App/>` or the component that you want to use the `useModal` hook with `<IressModalProvider />`.
 
-Show modal using provider
+[](./iframe.html?id=components-modal-provider--provider)
 
-Hide code
+Show modal using provider
 
-\[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; }
+```
 
 import {
   IressButton,
   IressModal,
-  IressModalProps,
+  type IressModalProps,
   IressModalProvider,
   useModal,
 } from '@iress-oss/ids-components';
@@ -133,32 +498,57 @@ const ModalWithTrigger \= ({
   );
 };
 
-Copy
+```
+
+#### Props
+
+These are some settings you can use to customise the provider, such as setting where the modals are rendered in the DOM.
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+\-
+
+ | \- | \- |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
 
-[](#behaviour)Behaviour
------------------------
+
+
+ | \- | \- |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+Behaviour
+---------
 
 *   No other interaction on the main page can be accessed while a modal is active. A backdrop covers the content beneath so that the content beneath cannot be interacted with.
 *   Clicking on the the backdrop closes the modal and returns the focus to the triggering element.
 *   When the modal is active the body is set to overflow: hidden to stop any scrolling of the underlying page. Scrolling should then only be possible on the modal wrapper.
 *   By default there are 3 ways to dismiss the modal; click X in the header; press ESC on a keyboard; click anywhere on the backdrop. It is also recommended that consumers add a Cancel or Close button to the modal's footer slot if required.
 
-[](#examples)Examples
----------------------
+Examples
+--------
 
-### [](#footer-slot)Footer slot
+### Footer slot
 
 Content to appear underneath the main content. Usually used for extra controls like buttons etc.
 
-Footer slot modal
+[](./iframe.html?id=components-modal--footer-slot)
 
-Hide code
+Footer slot modal
 
-\[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 Story \= () \=> {
   const { showModal } \= useModal();
 const MODAL\_ID \= 'storybook-modal';
+return (
+  const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
 return (
   <\>
   <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
@@ -172,55 +562,241 @@ return (
 );
 };
   
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+);
+};
+  
 export const App \= () \=> (
   <IressModalProvider\>
         <Story />
       </IressModalProvider\>
 );
 
-Copy
+```
 
-### [](#fixed-footer)Fixed footer
+#### Props
 
-The `fixedFooter` prop can be used to set the footer to be fixed to the bottom of the modal. This is often useful when there is a lot of content in the main area that you would like to scroll underneath the footer content.
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
 
-**Note:** Also works without footer content.
+ReactNode
 
-Using with popovers and tooltips
---------------------------------
 
-The fixed footer variant of IressModal prevents content from overflowing the modal. This can cause layout issues when using with components that use popovers (for example IressCombobox), especially when these components sit at the end of the modal's content. If you encounter these issues, try using a modal without a fixed footer. Normal modals allow content to overflow, which should fix the issue.
 
-Fixed footer modal
+ | \- | 
 
-Hide code
+"Normal modal content"
 
-\[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; }
+ |
+| closeText | 
 
-const Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <\>
-  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
-    Fixed footer modal  </IressButton\>
-  <IressModal
-    fixedFooter
-    footer\={<IressButton\>Button in footer</IressButton\>}
-    id\="storybook-modal"
-  \>
-    <React.Fragment key\=".0"\>
-      <IressText element\="h2"\>
-        Next Saturday night, we're sending you back to the future      </IressText\>
-      <IressText\>
-        <p\>
-          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
-        <p\>
-          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
-        <p\>
-          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
-        <h3\>
-          I just don't think I can take that kind of rejection        </h3\>
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | \- |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | storybook-modal |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Fixed footer
+
+The `fixedFooter` prop can be used to set the footer to be fixed to the bottom of the modal. This is often useful when there is a lot of content in the main area that you would like to scroll underneath the footer content.
+
+**Note:** Also works without footer content.
+
+Using with popovers and tooltips
+--------------------------------
+
+The fixed footer variant of IressModal prevents content from overflowing the modal. This can cause layout issues when using with components that use popovers (for example IressCombobox), especially when these components sit at the end of the modal's content. If you encounter these issues, try using a modal without a fixed footer. Normal modals allow content to overflow, which should fix the issue.
+
+[](./iframe.html?id=components-modal--fixed-footer)
+
+Fixed footer modal
+
+```
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <\>
+  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
+    Fixed footer modal  </IressButton\>
+  <IressModal
+    fixedFooter
+    footer\={<IressButton\>Button in footer</IressButton\>}
+    id\="storybook-modal"
+  \>
+    <React.Fragment key\=".0"\>
+      <IressText element\="h2"\>
+        Next Saturday night, we're sending you back to the future      </IressText\>
+      <IressText\>
+        <p\>
+          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
+        <p\>
+          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
+        <p\>
+          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
+        <h3\>
+          I just don't think I can take that kind of rejection        </h3\>
         <p\>
           I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
         <p\>
@@ -247,18 +823,196 @@ export const App \= () \=> (
         <Story />
       </IressModalProvider\>
 );
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | \- |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
 
-Copy
+union
 
-### [](#size)Size
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | storybook-modal |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Size
 
 The `size` prop can be set to `sm`, `md`, `lg` or `fullpage`. It defaults to `md`.
 
-smmdlgfullpage
+[](./iframe.html?id=components-modal--size)
 
-Hide code
+smmdlgfullpage
 
-\[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 ModalWithTrigger \= () \=> {
   const { showModal } \= useModal();
@@ -280,126 +1034,455 @@ export const ModalSizes \= () \=> (
   </IressModalProvider\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Size modal footer"
+
+ |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | \- |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | \- |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Responsive size
+
+The `size` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+If you set a responsive `size`, the modal becomes full width on screens smaller than the value you specified. For example, if you want to create a large modal on medium screens and above:
+
+<IressModal size\={{ md: IressModal.Size.Lg }}\>
+
+```
+
+The modal will be full width on extra-small and small screens, and large width on medium, large and extra-large screens. This is the same as setting:
+
+<IressModal size\={{ xs: IressModal.Size.Fullpage, md: IressModal.Size.Lg }}\>
+
+```
+
+You can override this behaviour by specifying a value for `xs` in your size object:
+
+<IressModal size\={{ xs: IressModal.Size.Sm, md: IressModal.Size.Lg }}\>
+
+```
+
+[](./iframe.html?id=components-modal--responsive-size)
+
+Responsive modal
+
+```
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <\>
+  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
+    Responsive modal  </IressButton\>
+  <IressModal
+    footer\=""
+    id\="storybook-modal"
+    size\={{
+      lg: 'md',
+      md: 'sm',
+      xl: 'lg'
+    }}
+  \>
+    <kn />
+  </IressModal\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | storybook-modal |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
 
-### [](#responsive-size)Responsive size
+ | 
 
-The `size` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+'md'
 
-If you set a responsive `size`, the modal becomes full width on screens smaller than the value you specified. For example, if you want to create a large modal on medium screens and above:
+ | 
 
-\[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;
-}
+RAW
 
-<IressModal size\={{ md: IressModal.Size.Lg }}\>
+size :
 
-Copy
+{
 
-The modal will be full width on extra-small and small screens, and large width on medium, large and extra-large screens. This is the same as setting:
+*   md : "sm"
+*   lg : "md"
+*   xl : "lg"
 
-\[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;
 }
 
-<IressModal size\={{ xs: IressModal.Size.Fullpage, md: IressModal.Size.Lg }}\>
 
-Copy
 
-You can override this behaviour by specifying a value for `xs` in your size object:
 
-\[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;
-}
 
-<IressModal size\={{ xs: IressModal.Size.Sm, md: IressModal.Size.Lg }}\>
 
-Copy
 
-Responsive modal
+ |
+| static | 
 
-Hide code
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
 
-\[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 Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <\>
-  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
-    Responsive modal  </IressButton\>
-  <IressModal
-    footer\=""
-    id\="storybook-modal"
-    size\={{
-      lg: 'md',
-      md: 'sm',
-      xl: 'lg'
-    }}
-  \>
-    <CurrentBreakpoint />
-  </IressModal\>
-</\>
-);
-};
-  
-export const App \= () \=> (
-  <IressModalProvider\>
-        <Story />
-      </IressModalProvider\>
-);
 
-Copy
+ | \- | Set boolean |
 
-### [](#padding)Padding
+### Padding
 
 The `padding` prop can be set to either `none`, `sm`, `md` or `lg`. It defaults to `md`.
 
-none paddingsm paddingmd paddinglg padding
+[](./iframe.html?id=components-modal--padding)
 
-Hide code
+none paddingsm paddingmd paddinglg padding
 
-\[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 ModalWithTrigger \= () \=> {
   const { showModal } \= useModal();
@@ -422,23 +1505,201 @@ export const ModalPaddings \= () \=> (
   </IressModalProvider\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
+
+
+
+ | \- | 
+
+""
+
+ |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | \- |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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'
+
+ | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
 
-### [](#disable-closing)Disable closing
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Disable closing
 
 For instances where you require the user's full attention and you want to ensure they continue the current task before closing the modal, you can disable the backdrop and escape key using `disableBackdropClick` and/or hide the close button using `noCloseButton`.
 
 **Note:** As these options remove the default handling of the closing the modal, please ensure you provide a clear way for the user to close the modal.
 
-Disable backdrop clickNo close button (please provide one, if you decide to hide the close button)Both (If you hide the close button, ensure you provide another way to close the modal)
+[](./iframe.html?id=components-modal--disable-closing)
 
-Hide code
+Disable backdrop clickNo close button (please provide one, if you decide to hide the close button)Both (If you hide the close button, ensure you provide another way to close the modal)
 
-\[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 Story \= () \=> {
   const { showModal } \= useModal();
 const MODAL\_ID \= 'storybook-modal';
+return (
+  const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
 return (
   <IressStack gutter\="md"\>
   <IressButton
@@ -479,75 +1740,229 @@ return (
 );
 };
   
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+);
+};
+  
 export const App \= () \=> (
   <IressModalProvider\>
         <Story />
       </IressModalProvider\>
 );
 
-Copy
+```
 
-[](#migrating-to-version-5)Migrating to version 5
--------------------------------------------------
+#### Props
 
-### [](#adding-the-provider)Adding the provider
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Modal content"
+
+ |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | Set string |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | Set object |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| disableBackdropClick | 
+
+When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
+
+boolean
+
+
+
+ | \- | \- |
+| fixedFooter | 
+
+When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| footer | 
+
+Panel to place modal controls.
+
+ReactNode
 
-For your components to work as previously, you will need to set up the `IressModalProvider` at the root of your application. This will allow you to use the `useModal` hook to open and close modals from anywhere in your application using the ID of the modal.
 
-\[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;
-}
+
+ | \- | 
+
+"Footer slot"
+
+ |
+| heading | 
+
+Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
+
+union
+
+
+
+ | \- | Set object |
+| id | 
+
+Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
+
+string
+
+
+
+ | \- | \- |
+| noCloseButton | 
+
+When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
+
+boolean
+
+
+
+ | \- | \- |
+| onEntered | 
+
+Emitted when the modal has opened.
+
+() => void
+
+ | \- | \- |
+| onExited | 
+
+Emitted when the modal has closed.
+
+() => void
+
+ | \- | \- |
+| onShowChange | 
+
+Emitted when the modal has opened or closed internally. Use for controlled modals.
+
+(show: boolean) => void
+
+ | \- | \- |
+| onStatus | 
+
+Emitted when the modal 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 |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+Accepts a `string` or `{ xs: sm }` (for responsive sizing) of `ModalSizes` options.
+
+union
+
+
+
+ | 
+
+'md'
+
+ | Set object |
+| static | 
+
+When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Migrating to version 5
+----------------------
+
+### Adding the provider
+
+For your components to work as previously, you will need to set up the `IressModalProvider` at the root of your application. This will allow you to use the `useModal` hook to open and close modals from anywhere in your application using the ID of the modal.
 
 const App \= () \=> <IressModalProvider\>Rest of app here</IressModalProvider\>;
 
-Copy
+```
 
-### [](#testing)Testing
+### Testing
 
 In version 5, modals 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.
 
-Mode
+Diff
 
-DiffOldNew
+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 modal', 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 modal/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">    'modal-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">    'modal',</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 modal</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 modal = await screen.findByRole('dialog');</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('modal-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 modal = screen.getByTestId('modal');</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 modal 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 modal 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 modal</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(modal).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 modal</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('modal__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(modal).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(modal);</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)Speed up tests
+### Speed up tests
 
 You can speed up tests by wrapping your tests in a provider that overrides the theme tokens for animations.
 
-\[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 themeOverrides: Record<string, string\> \= {
   '--iress-backdrop-transition-duration': '0s',
 };
@@ -562,26 +1977,4 @@ export const TestAppProvider \= ({ children }: PropsWithChildren) \=> {
   );
 };
 
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Use a modal when](#use-a-modal-when)
-*   [Avoid using a modal when](#avoid-using-a-modal-when)
-*   [Props](#props)
-*   [Controlling the modal](#controlling-the-modal)
-    *   [Using the show property](#using-the-show-property)
-    *   [Using the IressModalProvider](#using-the-iressmodalprovider)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Footer slot](#footer-slot)
-    *   [Fixed footer](#fixed-footer)
-    *   [Size](#size)
-    *   [Responsive size](#responsive-size)
-    *   [Padding](#padding)
-    *   [Disable closing](#disable-closing)
-*   [Migrating to version 5](#migrating-to-version-5)
-    *   [Adding the provider](#adding-the-provider)
-    *   [Testing](#testing)
-    *   [Speed up tests](#speed-up-tests)
+```