VariantManagement: use portal into body

Author: MarcusNotheis

packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap

@@ -15,42 +15,6 @@ exports[`VariantManagement Render without crashing - disabled 1`] = `
     disabled="true"
     icon="navigation-down-arrow"
   />
-  <ui5-responsive-popover
-    header-text="Variants"
-    horizontal-align="Center"
-    placement-type="Bottom"
-    vertical-align="Center"
-  >
-    <ui5-button
-      class="VariantManagement-footer-0"
-      design="Emphasized"
-      slot="footer"
-    >
-      Cancel
-    </ui5-button>
-    <ui5-list
-      mode="SingleSelect"
-      separators="All"
-    >
-      <ui5-li
-        data-key="1"
-        info-state="None"
-        selected="true"
-        style="width: 300px;"
-        type="Active"
-      >
-        Variant 1
-      </ui5-li>
-      <ui5-li
-        data-key="2"
-        info-state="None"
-        style="width: 300px;"
-        type="Active"
-      >
-        Variant 2
-      </ui5-li>
-    </ui5-list>
-  </ui5-responsive-popover>
 </div>
 `;
 
@@ -68,42 +32,6 @@ exports[`VariantManagement Render without crashing 1`] = `
     design="Transparent"
     icon="navigation-down-arrow"
   />
-  <ui5-responsive-popover
-    header-text="Variants"
-    horizontal-align="Center"
-    placement-type="Bottom"
-    vertical-align="Center"
-  >
-    <ui5-button
-      class="VariantManagement-footer-0"
-      design="Emphasized"
-      slot="footer"
-    >
-      Cancel
-    </ui5-button>
-    <ui5-list
-      mode="SingleSelect"
-      separators="All"
-    >
-      <ui5-li
-        data-key="1"
-        info-state="None"
-        selected="true"
-        style="width: 300px;"
-        type="Active"
-      >
-        Variant 1
-      </ui5-li>
-      <ui5-li
-        data-key="2"
-        info-state="None"
-        style="width: 300px;"
-        type="Active"
-      >
-        Variant 2
-      </ui5-li>
-    </ui5-list>
-  </ui5-responsive-popover>
 </div>
 `;
 

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

@@ -17,6 +17,7 @@ import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef';
 import { stopPropagation } from '../../internal/stopPropagation';
@@ -166,27 +167,30 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef(
           icon="navigation-down-arrow"
           disabled={disabled}
         />
-        <ResponsivePopover
-          ref={popoverRef}
-          headerText={popupTitle}
-          placementType={placement}
-          footer={footerButtons}
-          onAfterClose={stopPropagation}
-        >
-          <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
-            {variantItems.map((item) => (
-              <StandardListItem
-                style={{ width: '300px' }}
-                data-key={item.key}
-                type={ListItemTypes.Active}
-                key={item.key}
-                selected={selectedKey === item.key}
-              >
-                {item.label}
-              </StandardListItem>
-            ))}
-          </List>
-        </ResponsivePopover>
+        {createPortal(
+          <ResponsivePopover
+            ref={popoverRef}
+            headerText={popupTitle}
+            placementType={placement}
+            footer={footerButtons}
+            onAfterClose={stopPropagation}
+          >
+            <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}>
+              {variantItems.map((item) => (
+                <StandardListItem
+                  style={{ width: '300px' }}
+                  data-key={item.key}
+                  type={ListItemTypes.Active}
+                  key={item.key}
+                  selected={selectedKey === item.key}
+                >
+                  {item.label}
+                </StandardListItem>
+              ))}
+            </List>
+          </ResponsivePopover>,
+          document.body
+        )}
       </div>
     );
   }