@iress-oss/ids-mcp-server 0.0.1-dev.4 → 0.0.1

package/{generated/docs → docs/ids}/components-form-recipes-docs.md

@@ -510,6 +510,8 @@ Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
+/\* eslint-disable @typescript-eslint/no-misused-promises \*/
+
 interface Client {
   name: string | undefined;
   salary: number | undefined;
@@ -636,7 +638,7 @@ export const FormGroups \= () \=> {
     defaultValues: defaultValues,
     mode: 'onBlur',
   });
-  const { control, getValues } \= form;
+  const { control, handleSubmit, getValues } \= form;
   const { fields, append, update, remove } \= useFieldArray({
     name: 'dependants',
     control,
@@ -647,8 +649,7 @@ export const FormGroups \= () \=> {
       <IressText element\="h1"\>Form groups</IressText\>
       <IressText element\="p"\>
         This is one form with child sections (not nested forms). Play around to        add/edit/delete child form sections:      </IressText\>
-      <IressHookForm<FormValues>        gutter="md"        form={form}
-        onSubmit={onSubmit}
+      <IressHookForm<FormValues>        id="mainForm"        gutter="md"        form={form}
         errorSummaryHeading="Please correct the following errors found for the form:"      >        <IressStack gutter\="md"\>
           <ClientSection control\={control} />
           {fields.map((field, index) \=> (
@@ -671,7 +672,12 @@ export const FormGroups \= () \=> {
             Add Dependant          </IressButton\>
         </IressStack\>
         <IressDivider />
-        <IressButton type\="submit" mode\="primary"\>
+        <IressButton
+          type\="submit"
+          mode\="primary"
+          form\="mainForm"
+          onClick\={handleSubmit(onSubmit)}
+        \>
           Submit All        </IressButton\>
       </IressHookForm\>
     </IressStack\>
@@ -680,207 +686,10 @@ export const FormGroups \= () \=> {
 
 Copy
 
-[](#hidden-inputs)Hidden inputs
--------------------------------
-
-You can use hidden inputs to store data that you do not want to display to the user, but still need to include in the form submission. This is useful for storing metadata or other information that is not editable by the user.
-
-Warning
--------
-
-This is not a recommended practice, as it can lead to security issues if sensitive data is stored in hidden inputs. It is better to use a variable to store your data, and include it in the form submission using the `onSubmit` handler.
-
-Visible Input
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-export const HiddenInputsForm \= () \=> {
-  const form \= IressForm.useForm();
-  const { register } \= form;
-  // This is a hidden input field that the user cannot see or interact with.
-  // This is the recommended way to handle hidden inputs in Iress forms.
-  const hiddenInputStoredInVariable \= 'hiddenValue';
-  return (
-    <IressHookForm
-      form\={form}
-      onSubmit\={(data) \=> {
-        console.log('Form submitted with data:', {
-          ...data,
-          hiddenInputStoredInVariable,
-        });
-      }}
-    \>
-      <IressStack gutter\="md"\>
-        <IressFormField
-          label\="Visible Input"
-          name\="visibleInput"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        />
-        {/\* Hidden field - NOT RECOMMENDED \*/}
-        <input
-          type\="hidden"
-          {...register('hiddenField')} // Manually register the hidden field with react-hook-form
-          value\="hiddenValue"
-        />
-        <IressButton type\="submit"\>Submit</IressButton\>
-      </IressStack\>
-    </IressHookForm\>
-  );
-};
-
-Copy
-
-[](#validation-depend-on-other-fields)Validation depend on other fields
------------------------------------------------------------------------
-
-This example shows how to validate one field based on another field's value.
-
-The budget amount input validates against the selected budget range using the custom `validateBudgetInput` rules.
-
-Validation depend on other fields
-=================================
-
-This form demonstrates how to validate a field based on the value of another field. The budget amount field is validated against the selected budget range.
-
-\*Required Monthly investment budget
-
-Select your budget rangeLess than $499Between $500 to $999More than $1000
-
-\*Required Enter your budget amount ($)
-
-AUD
-
-Submit
-
-* * *
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-interface FormData {
-  primaryField: string;
-  dependentField: string;
-}
-const budgetOptions \= \[
-  { value: 'less-than-499', label: 'Less than $499' },
-  { value: 'between-500-999', label: 'Between $500 to $999' },
-  { value: 'more-than-1000', label: 'More than $1000' },
-\];
-const validateBudgetInput \= (
-  value: string,
-  selectedBudget: string,
-): string | true \=> {
-  if (!selectedBudget) return 'Select budget range first';
-  const numericValue \= parseFloat(value);
-  if (isNaN(numericValue)) return 'Enter a valid number';
-  switch (selectedBudget) {
-    case 'less-than-499':
-      return numericValue < 499 || 'Must be less than $499';
-    case 'between-500-999':
-      return (
-        (numericValue \>= 500 && numericValue <= 999) ||
-        'Must be between $500-$999'
-      );
-    case 'more-than-1000':
-      return numericValue \> 1000 || 'Must be more than $1000';
-    default:
-      return true;
-  }
-};
-export const ValidationDependOnOtherFields \= () \=> {
-  const \[submitted, setSubmitted\] \= useState<FormData | undefined\>(undefined);
-  const form \= IressForm.useForm<FormData\>({
-    defaultValues: {
-      primaryField: '',
-      dependentField: '',
-    },
-  });
-  const onSubmit \= (data: FormData) \=> {
-    console.log(data);
-    setSubmitted(data);
-  };
-  const onError \= (errors: Record<string, unknown\>) \=> {
-    console.log('Form validation errors:', errors);
-  };
-  return (
-    <\>
-      <IressText element\="h1"\>Validation depend on other fields</IressText\>
-      <IressText element\="p"\>
-        This form demonstrates how to validate a field based on the value of        another field. The budget amount field is validated against the selected        budget range.      </IressText\>
-      <IressHookForm form\={form} onSubmit\={onSubmit} onError\={onError}\>
-        <IressStack gutter\="md"\>
-          <IressRow\>
-            <IressCol\>
-              <IressFormField
-                name\="primaryField"
-                label\="Monthly investment budget"
-                rules\={{
-                  required: 'Budget range is required',
-                }}
-                render\={(field) \=> (
-                  <IressSelect
-                    {...field}
-                    placeholder\="Select your budget range"
-                  \>
-                    {budgetOptions.map((option) \=> (
-                      <option key\={option.value} value\={option.value}\>
-                        {option.label}
-                      </option\>
-                    ))}
-                  </IressSelect\>
-                )}
-              />
-            </IressCol\>
-          </IressRow\>
-          <IressRow\>
-            <IressCol\>
-              <IressFormField
-                name\="dependentField"
-                label\="Enter your budget amount ($)"
-                rules\={{
-                  required: 'Budget amount is required',
-                  validate: (value: string, formValues: FormData) \=>
-                    validateBudgetInput(value, formValues.primaryField),
-                }}
-                render\={(field) \=> (
-                  <IressInputCurrency {...field} type\="number" />
-                )}
-              />
-            </IressCol\>
-          </IressRow\>
-          <IressButton type\="submit"\>Submit</IressButton\>
-        </IressStack\>
-      </IressHookForm\>
-      <IressDivider />
-      {submitted && (
-        <IressStack gutter\="md"\>
-          <IressText variant\="bold"\>Submitted Values:</IressText\>
-          <IressText\>
-            Budget Range:{' '}
-            {budgetOptions.find(
-              (option) \=> option.value \=== submitted.primaryField,
-            )?.label ?? submitted.primaryField}
-          </IressText\>
-          <IressText\>Budget Amount: ${submitted.dependentField}</IressText\>
-        </IressStack\>
-      )}
-    </\>
-  );
-};
-
-Copy
-
 On this page
 
 *   [With readonly data](#with-readonly-data)
 *   [Switching between readonly and edit modes](#switching-between-readonly-and-edit-modes)
 *   [Alternative form validation](#alternative-form-validation)
 *   [Nested forms](#nested-forms)
-*   [Form Groups](#form-groups)
-*   [Hidden inputs](#hidden-inputs)
-*   [Validation depend on other fields](#validation-depend-on-other-fields)
+*   [Form Groups](#form-groups)

package/{generated/docs → docs/ids}/components-hide-docs.md

@@ -33,14 +33,34 @@ The `hiddenOn` prop accepts a `ResponsiveSizing<boolean>` object, which is an ob
 It determines which screen sizes the component's children will be hidden on. It's set up as an object containing the following IDS breakpoints:
 
 Hide breakpoints
-| Breakpoint | Screen Widths |
-| --- | --- |
-| `xs` | Above 0px (inclusive) |
-| `sm` | Above 576px (inclusive) |
-| `md` | Above 768px (inclusive) |
-| `lg` | Above 1024px (inclusive) |
-| `xl` | Above 1200px (inclusive) |
-| `xxl` | Above 1500px (inclusive) |
+
+Breakpoint
+
+Screen Widths
+
+`xs`
+
+Above 0px (inclusive)
+
+`sm`
+
+Above 576px (inclusive)
+
+`md`
+
+Above 768px (inclusive)
+
+`lg`
+
+Above 1024px (inclusive)
+
+`xl`
+
+Above 1200px (inclusive)
+
+`xxl`
+
+Above 1500px (inclusive)
 
 [](#behaviour)Behaviour
 -----------------------
@@ -241,14 +261,48 @@ To make it easier for developers to hide content, we've exposed the classes we u
 This means you can use them without having to use the Hide component. Unlike the Hide component, the utility classes only apply to a single breakpoint:
 
 Hide breakpoints
-| Totally Hidden | Visually Hidden | Screen Widths |
-| --- | --- | --- |
-| `iress-hidden--xs` | `iress-sr-only--xs` | 0 - 575px |
-| `iress-hidden--sm` | `iress-sr-only--sm` | 576px - 767px |
-| `iress-hidden--md` | `iress-sr-only--md` | 768px - 1023px |
-| `iress-hidden--lg` | `iress-sr-only--lg` | 1024px - 1199px |
-| `iress-hidden--xl` | `iress-sr-only--xl` | 1200px - 1499px |
-| `iress-hidden--xxl` | `iress-sr-only--xxl` | 1500px and above |
+
+Totally Hidden
+
+Visually Hidden
+
+Screen Widths
+
+`iress-hidden--xs`
+
+`iress-sr-only--xs`
+
+0 - 575px
+
+`iress-hidden--sm`
+
+`iress-sr-only--sm`
+
+576px - 767px
+
+`iress-hidden--md`
+
+`iress-sr-only--md`
+
+768px - 1023px
+
+`iress-hidden--lg`
+
+`iress-sr-only--lg`
+
+1024px - 1199px
+
+`iress-hidden--xl`
+
+`iress-sr-only--xl`
+
+1200px - 1499px
+
+`iress-hidden--xxl`
+
+`iress-sr-only--xxl`
+
+1500px and above
 
 If you use `iress-hidden` or `iress-sr-only` without the breakpoint suffix, it will apply to all screen sizes.
 

package/{generated/docs → docs/ids}/components-icon-docs.md

@@ -467,13 +467,13 @@ Hide code
     \>
       Default width    </IressText\>
     <IressIcon
-      className\="ids-styles--alt-background-v5150"
+      className\="ids-styles--alt-background-v5130"
       name\="space-shuttle"
       size\="3x"
     />
     <br />
     <IressIcon
-      className\="ids-styles--alt-background-v5150"
+      className\="ids-styles--alt-background-v5130"
       name\="wine-glass-alt"
       size\="3x"
     />
@@ -485,14 +485,14 @@ Hide code
     \>
       Fixed width    </IressText\>
     <IressIcon
-      className\="ids-styles--alt-background-v5150"
+      className\="ids-styles--alt-background-v5130"
       fixedWidth
       name\="space-shuttle"
       size\="3x"
     />
     <br />
     <IressIcon
-      className\="ids-styles--alt-background-v5150"
+      className\="ids-styles--alt-background-v5130"
       fixedWidth
       name\="wine-glass-alt"
       size\="3x"

package/{generated/docs → docs/ids}/components-input-recipes-docs.md

@@ -12,7 +12,7 @@ Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-import { IressInput } from '@iress-oss/ids-components';
+import { IressInput } from '@iress/ids-components';
 export const InputPercentage \= () \=> (
   <IressInput<number | string\>
     defaultValue\="0.5"
@@ -61,7 +61,7 @@ import {
   IressModal,
   IressStack,
   IressTable,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 import { useState } from 'react';
 import { Controller, UseFormRegisterReturn, useForm } from 'react-hook-form';
 const registerInnerElement \= (register: UseFormRegisterReturn) \=> {

package/{generated/docs → docs/ids}/components-inputcurrency-recipes-docs.md

@@ -7,12 +7,46 @@
 It is not recommended to use the `readOnly` prop for `IressInputCurrency` inside tables, as it was designed for forms. This example shows how to use currency in the table, by using the `format` prop of when defining a column inside `IressTable`. Additionally, when all rows have the same currency, it is recommended to add the currency code on the column `label` and remove the `currencyCode` on all rows.
 
 My investments
-| Investment Name | Investment Date | Total % | Investment Amount (AUD) |
-| --- | --- | --- | --- |
-| US Stocks | 23/09/2019 | 24.8% | 23,898.00 |
-| US Bonds | 05/02/2019 | 26.2% | 26,382.46 |
-| AU Stocks | 05/02/2019 | 26.2% | 9,342.16 |
-| UK Stocks | 28/06/2020 | 49% | 49,751.40 |
+
+Investment Name
+
+Investment Date
+
+Total %
+
+Investment Amount (AUD)
+
+US Stocks
+
+23/09/2019
+
+24.8%
+
+23,898.00
+
+US Bonds
+
+05/02/2019
+
+26.2%
+
+26,382.46
+
+AU Stocks
+
+05/02/2019
+
+26.2%
+
+9,342.16
+
+UK Stocks
+
+28/06/2020
+
+49%
+
+49,751.40
 
 Hide code
 

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

@@ -64,7 +64,7 @@ Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-import { IressButton, IressModal, IressModalProps } from '@iress-oss/ids-components';
+import { IressButton, IressModal, IressModalProps } from '@iress/ids-components';
 import { useState } from 'react';
 export const ModalUsingState \= () \=> {
   const \[show, setShow\] \= useState(false);
@@ -104,7 +104,7 @@ import {
   IressModalProps,
   IressModalProvider,
   useModal,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 const MODAL\_ID \= 'storybook-modal';
 export const App \= (modalProps: IressModalProps) \=> (
   <IressModalProvider\>
@@ -525,7 +525,117 @@ Mode
 
 DiffOldNew
 
-<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>
+\-
+
+import { render, waitFor, screen } from '@testing-library/react';
+
++
+
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+
+\-
+
+import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';
+
++
+
+import { userEvent } from '@testing-library/user-event';
+
+\-
+
+test('opening and closing a modal', async () => {
+
+\-
+
+  await componentLoad(\[
+
++
+
+  const trigger = screen.getByRole('button', { name: /open modal/i });
+
+\-
+
+    'modal-trigger',
+
+\-
+
+    'modal',
+
++
+
+  // activate modal
+
+\-
+
+  \]);
+
++
+
+  await userEvent.click(trigger);
+
++
+
+  const modal = await screen.findByRole('dialog');
+
+\-
+
+  const trigger = screen.getByTestId('modal-trigger');
+
+\-
+
+  const modal = screen.getByTestId('modal');
+
++
+
+  // In version 5, you can only interact with the modal once it has been loaded here.
+
+\-
+
+  // 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');
+
++
+
+  const closeButton = screen.getByRole('button', { name: /close/i });
+
+\-
+
+  idsFireEvent.click(closeButton);
+
++
+
+  await userEvent.click(closeButton);
+
+\-
+
+  await waitFor(() => expect(modal).not.toBeVisible());
+
++
+
+  await waitForElementToBeRemoved(modal);
+
+});
 
 ### [](#speed-up-tests)Speed up tests
 

package/docs/ids/components-popover-docs.md

@@ -0,0 +1,4 @@
+<!-- Error extracting markdown: page.goto: Timeout 30000ms exceeded.
+Call log:
+  - navigating to "http://localhost:6006/iframe.html?viewMode=docs&id=components-popover--docs", waiting until "networkidle"
+ -->