fix: Fix for async modal roots

Author: just-boris

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

@@ -13,7 +13,9 @@ const getModalRoot: ModalProps['getModalRoot'] = async () => {
 };
 
 const removeModalRoot: ModalProps['removeModalRoot'] = root => {
-  document.body.removeChild(root);
+  if (root) {
+    document.body.removeChild(root);
+  }
 };
 
 export default function () {

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

@@ -8088,10 +8088,10 @@ 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": "(rootElement: HTMLElement) => void",
+        "name": "(container: HTMLElement) => void",
         "parameters": [
           {
-            "name": "rootElement",
+            "name": "container",
             "type": "HTMLElement",
           },
         ],
@@ -8100,7 +8100,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((rootElement: HTMLElement) => void)",
+      "type": "((container: HTMLElement) => void)",
     },
     {
       "description": "List of Ace themes available for selection in preferences dialog. Make sure you include at least one light and at
@@ -8691,10 +8691,10 @@ 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": "(rootElement: HTMLElement) => void",
+        "name": "(container: HTMLElement) => void",
         "parameters": [
           {
-            "name": "rootElement",
+            "name": "container",
             "type": "HTMLElement",
           },
         ],
@@ -8703,7 +8703,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((rootElement: HTMLElement) => void)",
+      "type": "((container: HTMLElement) => void)",
     },
     {
       "description": "Configures the sticky columns preference that can be set for both left and right columns.
@@ -16796,10 +16796,10 @@ 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": "(rootElement: HTMLElement) => void",
+        "name": "(container: HTMLElement) => void",
         "parameters": [
           {
-            "name": "rootElement",
+            "name": "container",
             "type": "HTMLElement",
           },
         ],
@@ -16808,7 +16808,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((rootElement: HTMLElement) => void)",
+      "type": "((container: HTMLElement) => void)",
     },
     {
       "defaultValue": "'medium'",
@@ -20990,10 +20990,10 @@ 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": "(rootElement: HTMLElement) => void",
+        "name": "(container: HTMLElement) => void",
         "parameters": [
           {
-            "name": "rootElement",
+            "name": "container",
             "type": "HTMLElement",
           },
         ],
@@ -21002,7 +21002,7 @@ of the most recent getModalRoot call as an argument.",
       },
       "name": "removeModalRoot",
       "optional": true,
-      "type": "((rootElement: HTMLElement) => void)",
+      "type": "((container: HTMLElement) => void)",
     },
     {
       "description": "The current selected resource. Resource has the following properties:

src/modal/interfaces.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { PortalProps } from '@cloudscape-design/component-toolkit/internal';
+
 import { FlowType } from '../internal/analytics/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
@@ -11,14 +13,14 @@ export interface BaseModalProps {
    * 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.
    */
-  getModalRoot?: () => Promise<HTMLElement>;
+  getModalRoot?: PortalProps['getContainer'];
 
   /**
    * Use this property when `getModalRoot` is used to clean up the modal root
    * element after a user closes the dialog. The function receives the return value
    * of the most recent getModalRoot call as an argument.
    */
-  removeModalRoot?: (rootElement: HTMLElement) => void;
+  removeModalRoot?: PortalProps['removeContainer'];
 }
 
 export interface ModalProps extends BaseComponentProps, BaseModalProps {