refactor(Modals): avoid unnecessary use of createPortal (SAP#6242)

BREAKING CHANGE: modals are now rendered as children of the `Modals`
component instead of being rendered into `document.body`

Author: MarcusNotheis

docs/MigrationGuide.mdx

@@ -46,7 +46,7 @@ npx @ui5/webcomponents-react-cli@next codemod --transform v2 \
 
 ## General changes
 
-## Minimal React Version
+### Minimal React Version
 
 The minimum required `react` and `react-dom` version is now `18.0.0`.
 
@@ -1066,6 +1066,9 @@ All Modal helper hooks have been removed. They can be replaced with the regular
 
 The regular methods are now general purpose, so they can be used both inside the React content (components) as well as outside of the React context (redux, redux-saga, etc.).
 
+In order to provide a place for the `Modals` helper to mount the popovers, you have to render the new `Modals` component in your application tree.
+In addition, the modals are now rendered as children of the `<Modals>` component instead of `document.body` by default.
+
 ### ObjectPage
 
 The newly introduced `DynamicPage` web component comes with its own `DynamicPageHeader` and `DynamicPageTitle` components, which are unfortunately incompatible with our `ObjectPage` implementation.

packages/main/src/components/Modals/index.tsx

@@ -236,11 +236,15 @@ export function Modals() {
     <>
       {modals.map((modal) => {
         if (modal?.Component) {
-          return createPortal(
-            // @ts-expect-error: ref is supported by all supported modals
-            <modal.Component {...modal.props} ref={modal.ref} key={modal.id} data-id={modal.id} />,
-            modal.container ?? document.body
-          );
+          if (modal.container) {
+            return createPortal(
+              // @ts-expect-error: ref is supported by all supported modals
+              <modal.Component {...modal.props} ref={modal.ref} key={modal.id} data-id={modal.id} />,
+              modal.container
+            );
+          }
+          // @ts-expect-error: ref is supported by all supported modals
+          return <modal.Component {...modal.props} ref={modal.ref} key={modal.id} data-id={modal.id} />;
         }
       })}
     </>