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

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

@@ -0,0 +1,2002 @@
+Modal
+=====
+
+Overview
+--------
+
+Modals gather information, complete a subtask, or provide additional information without losing the context of an underlying page.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+Read more
+
+[](#use-a-modal-when)Use a modal when
+-------------------------------------
+
+*   Providing supplemental tasks required by the underlying page
+*   Providing non-essential information related to the underlying page
+*   Content require full attention
+
+[](#avoid-using-a-modal-when)Avoid using a modal when
+-----------------------------------------------------
+
+*   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
+
+[](./iframe.html?id=components-modal--default)
+
+Show 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)}\>
+    Show modal  </IressButton\>
+  <IressModal
+    footer\="Footer slot"
+    id\="storybook-modal"
+  \>
+    Modal content  </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
+
+
+
+ | \- | 
+
+"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
+
+
+
+ | \- | 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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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`.
+
+[](./iframe.html?id=components-modal--show-with-state)
+
+Show modal using state
+
+```
+
+import { IressButton, IressModal, type IressModalProps } from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const ModalUsingState \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  return (
+    <\>
+      <IressButton onClick\={() \=> setShow(true)}\>
+        Show modal using state      </IressButton\>
+      <IressModal
+        {...{
+  children: 'This modal was opened via state',
+}}
+        show\={show}
+        onShowChange\={setShow}
+        footer\={<IressButton onClick\={() \=> setShow(false)}\>Close</IressButton\>}
+      />
+    </\>
+  );
+};
+
+```
+
+#### 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.
+
+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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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 />`.
+
+[](./iframe.html?id=components-modal-provider--provider)
+
+Show modal using provider
+
+```
+
+import {
+  IressButton,
+  IressModal,
+  type IressModalProps,
+  IressModalProvider,
+  useModal,
+} from '@iress-oss/ids-components';
+const MODAL\_ID \= 'storybook-modal';
+export const App \= (modalProps: IressModalProps) \=> (
+  <IressModalProvider\>
+    <ModalWithTrigger {...modalProps} />
+  </IressModalProvider\>
+);
+const ModalWithTrigger \= ({
+  id \= MODAL\_ID,
+  ...modalProps
+}: IressModalProps) \=> {
+  const { showModal } \= useModal();
+  return (
+    <\>
+      <IressButton onClick\={() \=> showModal(id)}\>
+        Show modal using provider      </IressButton\>
+      <IressModal
+        {...modalProps}
+        id\={id}
+        footer\={
+          <IressButton onClick\={() \=> showModal(id, false)}\>Close</IressButton\>
+        }
+      \>
+        {modalProps.children ?? 'Modal content'}
+      </IressModal\>
+    </\>
+  );
+};
+
+```
+
+#### 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
+
+
+
+ | \- | \- |
+| 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
+--------
+
+### Footer slot
+
+Content to appear underneath the main content. Usually used for extra controls like buttons etc.
+
+[](./iframe.html?id=components-modal--footer-slot)
+
+Footer slot 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)}\>
+    Footer slot modal  </IressButton\>
+  <IressModal
+    footer\={<IressButton\>Button in footer</IressButton\>}
+    id\="storybook-modal"
+  \>
+    Normal modal content  </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
+
+
+
+ | \- | 
+
+"Normal 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
+
+
+
+ | \- | \- |
+| 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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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\>
+          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\>
+        <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\>
+        <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\>
+      </IressText\>
+    </React.Fragment\>
+  </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
+
+
+
+ | \- | 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.
+
+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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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` or `lg`. It defaults to `md`.
+
+Below is a guide on when to use which size.
+
+[](./iframe.html?id=components-modal--size)
+
+Small modal
+-----------
+
+Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+
+View small modal example
+
+Medium modal
+------------
+
+Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+
+View medium modal example
+
+Large modal
+-----------
+
+Large modals facilitate sub-flows within a primary flow, allowing users to focus on tasks that will impact the underlying screen once the modal is closed (e.g., adding an item to a table or bulk uploading items). They should be used sparingly and only when there is a direct relationship to the underlying screen, where the action wouldn't warrant a separate dedicated screen.
+
+View large modal example
+
+```
+
+const SmallModal \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  return (
+    <\>
+      <IressCard
+        heading\="Small modal"
+        stretch
+        footer\={
+          <IressButton onClick\={() \=> setShow(true)}\>
+            View small modal example          </IressButton\>
+        }
+      \>
+        <p\>
+          Small modals communicate the outcome of an irreversible action. They          should be concise and straightforward, containing a single action and,          in some cases, a single input field.        </p\>
+      </IressCard\>
+      <IressModal
+        width\="overlay.sm"
+        heading\="Terms of service update"
+        footer\={
+          <IressButton mode\="primary" onClick\={() \=> setShow(false)}\>
+            Accept          </IressButton\>
+        }
+        disableBackdropClick
+        show\={show}
+        onShowChange\={setShow}
+      \>
+        <p\>
+          A change in our <a href\="#"\>terms of service</a\> takes effect on July          1st, 2024. Please read and accept the terms.        </p\>
+        <IressCheckbox\>I accept the terms of service</IressCheckbox\>
+      </IressModal\>
+    </\>
+  );
+};
+const MediumModal \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  return (
+    <\>
+      <IressCard
+        stretch
+        heading\="Medium modal"
+        footer\={
+          <IressButton onClick\={() \=> setShow(true)}\>
+            View medium modal example          </IressButton\>
+        }
+      \>
+        <p\>
+          Medium modals provide optional supporting information to help users          understand the context of a word or screen. They may contain a single          action and, in some cases, a larger input such as a textarea.        </p\>
+      </IressCard\>
+      <IressModal
+        width\="overlay.md"
+        heading\="History of Iress"
+        footer\={<IressButton onClick\={() \=> setShow(false)}\>Close</IressButton\>}
+        fixedFooter
+        show\={show}
+        onShowChange\={setShow}
+      \>
+        <h3\>Founding and Early Years (1993 - 2000)</h3\>
+        <p\>
+          Iress Limited (ASX: IRE) was founded in 1993 in Melbourne, Australia,          as a provider of financial market data and trading software.          Initially, the company focused on delivering technology solutions for          stockbrokers and traders, providing real-time market data, order          management, and trading execution tools.        </p\>
+        <h3\>Expansion and IPO (2001 - 2010)</h3\>
+        <p\>
+          In 2001, Iress went public, listing on the Australian Securities          Exchange (ASX). This move provided the company with capital to expand          its operations and invest in new technologies. During this period,          Iress expanded its services beyond trading platforms to include          financial planning software, portfolio management, and wealth          management solutions. The company also started expanding          internationally, entering markets such as the UK, Canada, New Zealand,          and South Africa, through organic growth and acquisitions.        </p\>
+        <h3\>Global Growth and Acquisitions (2011 - 2020)</h3\>
+        <p\>
+          Between 2011 and 2020, Iress continued its global expansion through          acquisitions and product diversification. Key acquisitions included:        </p\>
+        <ul\>
+          <li\>
+            Avelo (2013): Strengthened its presence in the UK financial services            market.          </li\>
+          <li\>
+            Pulse Software (2014): Added financial advice solutions to its            portfolio.          </li\>
+          <li\>
+            INET BFA (2016): Expanded its reach into South Africa’s financial            market.          </li\>
+          <li\>
+            OneVue (2020): Enhanced its superannuation and investment            administration capabilities.          </li\>
+        </ul\>
+        <p\>
+          During this period, Iress also expanded into mortgage lending          technology and digital financial services, adapting to the increasing          demand for automation and efficiency in financial markets.        </p\>
+        <h3\>Recent Developments (2021 - Present)</h3\>
+        <p\>
+          In 2021, Iress announced a strategic review of its business, focusing          on streamlining operations and improving profitability. The company          also experienced leadership changes, including new CEO appointments to          drive digital transformation.{' '}
+        </p\>
+        <p\>
+          Iress has continued to innovate with cloud-based solutions, artificial          intelligence (AI), and data analytics, catering to financial          institutions, brokers, and wealth management firms globally.        </p\>
+        <IressExpander activator\="Was this helpful?"\>
+          <IressStack gap\="sm"\>
+            <IressInput rows\={2} placeholder\="Enter your feedback" />
+            <IressButton\>Provide feedback</IressButton\>
+          </IressStack\>
+        </IressExpander\>
+      </IressModal\>
+    </\>
+  );
+};
+interface LargeModalActionsProps {
+  isStart: boolean;
+  isFinal: boolean;
+  onBack: () \=> void;
+  onNext: () \=> void;
+  onCancel: () \=> void;
+  onFinish: () \=> void;
+}
+const LargeModalActions \= ({
+  isStart,
+  isFinal,
+  onBack,
+  onNext,
+  onCancel,
+  onFinish,
+}: LargeModalActionsProps) \=> (
+  <IressInline gap\="sm" horizontalAlign\={isFinal ? 'center' : 'left'}\>
+    {isFinal && (
+      <IressButton mode\="primary" onClick\={onFinish}\>
+        Finish      </IressButton\>
+    )}
+    {!isFinal && (
+      <IressButton mode\="primary" onClick\={onNext}\>
+        Next      </IressButton\>
+    )}
+    {!isStart && !isFinal && (
+      <IressButton onClick\={onBack}\>Previous</IressButton\>
+    )}
+    {!isFinal && (
+      <IressInline ml\="auto"\>
+        <IressButton onClick\={onCancel} mode\="tertiary"\>
+          Cancel        </IressButton\>
+      </IressInline\>
+    )}
+  </IressInline\>
+);
+const LargeModal \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  const \[step, setStep\] \= useState(0);
+  return (
+    <\>
+      <IressCard
+        heading\="Large modal"
+        stretch
+        footer\={
+          <IressButton onClick\={() \=> setShow(true)}\>
+            View large modal example          </IressButton\>
+        }
+      \>
+        <p\>
+          Large modals facilitate sub-flows within a primary flow, allowing          users to focus on tasks that will impact the underlying screen once          the modal is closed (e.g., adding an item to a table or bulk uploading          items). They should be used sparingly and only when there is a direct          relationship to the underlying screen, where the action wouldn't          warrant a separate dedicated screen.        </p\>
+      </IressCard\>
+      <IressModal
+        width\="overlay.lg"
+        heading\="Upload from CSV"
+        footer\={
+          <LargeModalActions
+            isStart\={step \=== 0}
+            isFinal\={step \=== 2}
+            onBack\={() \=> setStep(step \- 1)}
+            onNext\={() \=> setStep(step + 1)}
+            onFinish\={() \=> setShow(false)}
+            onCancel\={() \=> setShow(false)}
+          />
+        }
+        disableBackdropClick
+        show\={show}
+        onShowChange\={setShow}
+        fixedFooter
+      \>
+        <IressStack gap\="lg" mb\="md"\>
+          <IressProgress max\={3} value\={step + 1} />
+          {step \=== 0 && (
+            <IressStack gap\="md"\>
+              <IressField label\="Select a file to upload"\>
+                <IressInput type\="file" accept\=".csv" />
+              </IressField\>
+              <IressDivider />
+              <IressField label\="Type of data"\>
+                <IressRichSelect
+                  options\={\[
+                    { label: 'Clients' },
+                    { label: 'Products' },
+                    { label: 'Transactions' },
+                  \]}
+                />
+              </IressField\>
+              <IressCheckbox\>Overwrite existing data</IressCheckbox\>
+            </IressStack\>
+          )}
+          {step \=== 1 && (
+            <IressTable
+              caption\="Preview of data to be uploaded"
+              columns\={\[
+                { key: 'import', label: 'Upload', width: '1%' },
+                { key: 'name', label: 'Name' },
+                { key: 'email', label: 'Email' },
+              \]}
+              rows\={\[
+                {
+                  import: <IressCheckbox defaultChecked />,
+                  name: 'Luke Skywalker',
+                  email: 'luke.skywalker@iress.com',
+                },
+                {
+                  import: <IressCheckbox defaultChecked />,
+                  name: 'Leia Skywalker',
+                  email: 'leia.skywalker@iress.com',
+                },
+                {
+                  import: <IressCheckbox defaultChecked />,
+                  name: 'Han Solo',
+                  email: 'han.solo@iress.com',
+                },
+              \]}
+            />
+          )}
+          {step \=== 2 && (
+            <IressStack gap\="md" horizontalAlign\="center"\>
+              <img
+                src\={modalIsDone}
+                alt\=""
+                style\={{ maxWidth: '200px', height: 'auto' }}
+              />
+              <h3\>3 items have been uploaded</h3\>
+              <IressCheckbox\>Send a copy to yourself</IressCheckbox\>
+            </IressStack\>
+          )}
+        </IressStack\>
+      </IressModal\>
+    </\>
+  );
+};
+export const ModalSizes \= () \=> (
+  <IressRow gutter\="spacing.700" verticalAlign\="stretch"\>
+    <IressCol\>
+      <SmallModal />
+    </IressCol\>
+    <IressCol\>
+      <MediumModal />
+    </IressCol\>
+    <IressCol\>
+      <LargeModal />
+    </IressCol\>
+  </IressRow\>
+);
+
+```
+
+#### 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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| size | 
+
+\-
+
+ | \- | \- |
+| 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"
+    width\={{
+      md: 'overlay.md',
+      xs: 'overlay.sm',
+      xxl: 'overlay.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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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 |
+| width | 
+
+object
+
+
+
+ | \- | 
+
+RAW
+
+width :
+
+{
+
+*   xs : "overlay.sm"
+*   md : "overlay.md"
+*   xxl : "overlay.lg"
+
+}
+
+
+
+
+
+
+
+ |
+
+### 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.
+
+[](./iframe.html?id=components-modal--disable-closing)
+
+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)
+
+```
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <IressStack gap\="md"\>
+  <IressButton
+    fluid
+    onClick\={() \=> showModal("disable-backdrop-click")}
+  \>
+    Disable backdrop click  </IressButton\>
+  <IressModal
+    disableBackdropClick
+    footer\="Footer slot"
+    id\="disable-backdrop-click"
+  \>
+    Modal content  </IressModal\>
+  <IressButton
+    fluid
+    onClick\={() \=> showModal("no-close-button")}
+  \>
+    No close button (please provide one, if you decide to hide the close button)  </IressButton\>
+  <IressModal
+    footer\={<IressButton onClick\={() \=> showModal("no-close-button", false)}\>Close</IressButton\>}
+    id\="no-close-button"
+    noCloseButton
+  \>
+    Modal content  </IressModal\>
+  <IressButton
+    fluid
+    onClick\={() \=> showModal("both")}
+  \>
+    Both (If you hide the close button, ensure you provide another way to close the modal)  </IressButton\>
+  <IressModal
+    disableBackdropClick
+    footer\={<IressButton onClick\={() \=> showModal("both", false)}\>Close</IressButton\>}
+    id\="both"
+    noCloseButton
+  \>
+    Modal content  </IressModal\>
+</IressStack\>
+);
+};
+  
+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
+
+
+
+ | \- | 
+
+"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
+
+
+
+ | \- | 
+
+"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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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\>;
+
+```
+
+### 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.
+
+[](./iframe.html?id=components-modal--v-5-modal-diff)
+
+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 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>
+
+```
+
+{
+  render: () \=> <DiffViewer allowModeChange oldValue\={\`import { render, waitFor, screen } from '@testing-library/react';
+import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';
+  
+test('opening and closing a modal', async () => {
+  await componentLoad(\[    'modal-trigger',    'modal',  \]);
+  const trigger = screen.getByTestId('modal-trigger');  const modal = screen.getByTestId('modal');
+  // In version 4, you can already interact with the modal here as its in the DOM at this stage.
+  // activate modal  idsFireEvent.click(trigger);  await waitFor(() => expect(modal).toBeVisible());
+  // close modal  const closeButton = screen.getByTestId('modal\_\_close-button');  idsFireEvent.click(closeButton);  await waitFor(() => expect(modal).not.toBeVisible());
+});\`} newValue\={\`import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+test('opening and closing a modal', async () => {
+  const trigger = screen.getByRole('button', { name: /open modal/i });
+  // activate modal  await userEvent.click(trigger);  const modal = await screen.findByRole('dialog');
+  // In version 5, you can only interact with the modal once it has been loaded here.
+  // close modal  const closeButton = screen.getByRole('button', { name: /close/i });  await userEvent.click(closeButton);  await waitForElementToBeRemoved(modal);
+});\`} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Text to be displayed inside the modal.
+
+ReactNode
+
+
+
+ | \- | \- |
+| closeText | 
+
+Screenreader text for close button.
+
+string
+
+
+
+ | \- | \- |
+| container | 
+
+The container element to render the modal into. By default, the modal will render at the end of the document body.
+
+FloatingUIContainer
+
+
+
+ | \- | \- |
+| defaultShow | 
+
+When set to `true` the modal will be visible by default. Use for uncontrolled modals.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| 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
+
+
+
+ | \- | \- |
+| 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
+
+
+
+ | \- | \- |
+| 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
+
+ | \- | \- |
+| show | 
+
+When set to `true` the modal will be visible. Use for controlled modals.
+
+boolean
+
+
+
+ | \- | \- |
+| 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
+
+
+
+ | \- | \- |