chore: Follow up for the modal root fixes (#4016)

Author: just-boris

pages/modal/async-modal-root.page.tsx

@@ -4,11 +4,13 @@ import React, { useState } from 'react';
 
 import { Button, Modal, ModalProps } from '~components';
 
-const getModalRoot: ModalProps['getModalRoot'] = async () => {
+const getModalRoot: ModalProps['getModalRoot'] = async ({ abortSignal }) => {
   await new Promise(resolve => setTimeout(resolve, 1000));
   const element = document.createElement('div');
   element.setAttribute('id', 'async-modal-root');
-  document.body.appendChild(element);
+  if (!abortSignal.aborted) {
+    document.body.appendChild(element);
+  }
   return element;
 };
 

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -7649,14 +7649,19 @@ is provided by its parent form field component.",
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "description": "An object containing all the necessary localized strings required by the component.
@@ -8091,19 +8096,19 @@ You can use any theme provided by Ace.",
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
         "type": "function",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "description": "List of Ace themes available for selection in preferences dialog. Make sure you include at least one light and at
@@ -8547,14 +8552,19 @@ the custom content is displayed at the bottom of the left column within the moda
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
@@ -8694,19 +8704,19 @@ It contains the following:
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
         "type": "function",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "description": "Configures the sticky columns preference that can be set for both left and right columns.
@@ -16774,14 +16784,19 @@ The event detail contains the \`reason\`, which can be any of the following:
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
@@ -16805,19 +16820,19 @@ render to an element under \`document.body\`.",
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
         "type": "function",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "defaultValue": "'medium'",
@@ -20444,14 +20459,19 @@ The return type of the function should be a promise that resolves to a list of v
       "description": "Use this property to specify a different dynamic modal root for the dialog.
 The function will be called when a user clicks on the trigger button.",
       "inlineType": {
-        "name": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "name": "(options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>",
+        "parameters": [
+          {
+            "name": "options",
+            "type": "{ abortSignal: AbortSignal; }",
+          },
+        ],
         "returnType": "Promise<HTMLElement>",
         "type": "function",
       },
       "name": "getModalRoot",
       "optional": true,
-      "type": "(() => Promise<HTMLElement>)",
+      "type": "((options: { abortSignal: AbortSignal; }) => Promise<HTMLElement>)",
     },
     {
       "description": "An object containing all the necessary localized strings required by the component.",
@@ -21010,19 +21030,19 @@ and 'Size'.",
 element after a user closes the dialog. The function receives the return value
 of the most recent getModalRoot call as an argument.",
       "inlineType": {
-        "name": "(container: HTMLElement) => void",
+        "name": "(container: HTMLElement | null) => void",
         "parameters": [
           {
             "name": "container",
-            "type": "HTMLElement",
+            "type": "HTMLElement | null",
           },
         ],
         "returnType": "void",
         "type": "function",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((container: HTMLElement) => void)",
+      "type": "((container: HTMLElement | null) => void)",
     },
     {
       "description": "The current selected resource. Resource has the following properties:

src/modal/__integ__/modal.test.ts

@@ -98,7 +98,7 @@ test(
   })
 );
 
-(process.env.REACT_VERSION !== '18' ? test : test.skip)(
+test(
   'renders modal in async root',
   useBrowser(async browser => {
     const page = new BasePageObject(browser);