feat: add portalContainer prop for elements rendered via createPortal (#2275)

Author: Lukas742

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

@@ -28,7 +28,9 @@ import styles from './ActionSheet.jss';
 
 export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, 'children'> {
   /**
-   * Defines the actions of the <code>ActionSheet</code>. <br><b>Note:</b> Although this slot accepts all HTML Elements, it is strongly recommended that you only use `Buttons` in order to preserve the intended design.
+   * Defines the actions of the `ActionSheet`.
+   *
+   * __Note:__ Although this slot accepts all HTML Elements, it is strongly recommended that you only use `Buttons` in order to preserve the intended design.
    */
   children?: ReactElement<ButtonPropTypes> | ReactElement<ButtonPropTypes>[];
   /**
@@ -48,6 +50,12 @@ export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, '
       ariaLabel?: string;
     };
   };
+  /**
+   * Defines where modals are rendered into via `React.createPortal`.
+   *
+   * Defaults to: `document.body`
+   */
+  portalContainer?: Element;
 }
 
 const useStyles = createUseStyles(styles, { name: 'ActionSheet' });
@@ -94,27 +102,28 @@ if (isPhone()) {
  */
 const ActionSheet = forwardRef((props: ActionSheetPropTypes, ref: RefObject<Ui5ResponsivePopoverDomRef>) => {
   const {
+    a11yConfig,
+    allowTargetOverlap,
+    alwaysShowHeader,
     children,
-    style,
-    slot,
     className,
-    allowTargetOverlap,
+    footer,
+    header,
     headerText,
+    hideArrow,
     horizontalAlign,
     initialFocus,
     modal,
-    hideArrow,
     placementType,
+    portalContainer,
+    showCancelButton,
+    slot,
+    style,
     verticalAlign,
-    footer,
-    header,
     onAfterClose,
     onAfterOpen,
     onBeforeClose,
-    onBeforeOpen,
-    showCancelButton,
-    alwaysShowHeader,
-    a11yConfig
+    onBeforeOpen
   } = props;
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const classes = useStyles();
@@ -231,13 +240,14 @@ const ActionSheet = forwardRef((props: ActionSheetPropTypes, ref: RefObject<Ui5R
         )}
       </div>
     </ResponsivePopover>,
-    document.body
+    portalContainer
   );
 });
 
 ActionSheet.defaultProps = {
   showCancelButton: true,
-  alwaysShowHeader: true
+  alwaysShowHeader: true,
+  portalContainer: document.body
 };
 
 ActionSheet.displayName = 'ActionSheet';

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

@@ -38,6 +38,7 @@ interface ColumnHeaderContainerProps {
   resizeInfo: Record<string, unknown>;
   reactWindowRef: MutableRefObject<any>;
   isRtl: boolean;
+  portalContainer: Element;
 }
 
 const useStyles = createUseStyles(styles, { name: 'Resizer' });
@@ -59,7 +60,8 @@ export const ColumnHeaderContainer = forwardRef((props: ColumnHeaderContainerPro
     overscanCountHorizontal,
     resizeInfo,
     reactWindowRef,
-    isRtl
+    isRtl,
+    portalContainer
   } = props;
   const columnVirtualizer = useVirtual({
     size: visibleColumnsWidth.length,
@@ -132,6 +134,7 @@ export const ColumnHeaderContainer = forwardRef((props: ColumnHeaderContainerPro
               isDraggable={column.canReorder && !resizeInfo.isResizingColumn}
               virtualColumn={virtualColumn}
               isRtl={isRtl}
+              portalContainer={portalContainer}
             >
               {column.render('Header')}
             </ColumnHeader>

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -33,6 +33,7 @@ export interface ColumnHeaderModalProperties {
   open: boolean;
   setPopoverOpen: (open: boolean) => void;
   targetRef: RefObject<any>;
+  portalContainer: Element;
 }
 
 const styles = {
@@ -49,7 +50,7 @@ const styles = {
 const useStyles = createUseStyles(styles, { name: 'ColumnHeaderModal' });
 
 export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
-  const { column, onSort, onGroupBy, open, setPopoverOpen, targetRef } = props;
+  const { column, onSort, onGroupBy, open, setPopoverOpen, targetRef, portalContainer } = props;
   const classes = useStyles();
   const showFilter = column.canFilter;
   const showGroup = column.canGroupBy;
@@ -197,7 +198,7 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
         )}
       </List>
     </Popover>,
-    document.body
+    portalContainer
   );
 };
 ColumnHeaderModal.displayName = 'ColumnHeaderModal';

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -13,9 +13,6 @@ import React, {
   MouseEventHandler,
   KeyboardEventHandler,
   ReactNode,
-  ReactNodeArray,
-  useCallback,
-  useMemo,
   useRef,
   useState
 } from 'react';
@@ -38,7 +35,8 @@ export interface ColumnHeaderProps {
   headerTooltip: string;
   virtualColumn: VirtualItem;
   isRtl: boolean;
-  children: ReactNode | ReactNodeArray;
+  children: ReactNode | ReactNode[];
+  portalContainer: Element;
 
   //getHeaderProps()
   id: string;
@@ -113,7 +111,8 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     columnIndex,
     visibleColumnIndex,
     onClick,
-    onKeyDown
+    onKeyDown,
+    portalContainer
   } = props;
 
   const isFiltered = column.filterValue && column.filterValue.length > 0;
@@ -238,6 +237,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
             targetRef={targetRef}
             open={popoverOpen}
             setPopoverOpen={setPopoverOpen}
+            portalContainer={portalContainer}
           />
         )}
       </div>

packages/main/src/components/AnalyticalTable/VerticalResizer.tsx

@@ -44,6 +44,7 @@ interface VerticalResizerProps {
   internalRowHeight: number;
   hasPopInColumns: boolean;
   popInRowHeight: number;
+  portalContainer: Element;
 }
 
 const isTouchEvent = (e, touchEvent) => {
@@ -54,7 +55,15 @@ const isTouchEvent = (e, touchEvent) => {
 };
 
 export const VerticalResizer = (props: VerticalResizerProps) => {
-  const { analyticalTableRef, dispatch, extensionsHeight, internalRowHeight, hasPopInColumns, popInRowHeight } = props;
+  const {
+    analyticalTableRef,
+    dispatch,
+    extensionsHeight,
+    internalRowHeight,
+    hasPopInColumns,
+    popInRowHeight,
+    portalContainer
+  } = props;
   const classes = useStyles();
   const startY = useRef(null);
   const verticalResizerRef = useRef(null);
@@ -162,7 +171,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
             className={classes.resizer}
             style={{ top: resizerPosition.top, left: resizerPosition.left, width: resizerPosition.width }}
           />,
-          document.body
+          portalContainer
         )}
     </div>
   );

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

@@ -246,6 +246,12 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * Defines whether a subcomponent should be rendered as expandable container or directly at the bottom of the row.
    */
   alwaysShowSubComponent?: boolean;
+  /**
+   * Defines where modals and other elements which should be mounted outside of the DOM hierarchy are rendered into via `React.createPortal`.
+   *
+   * Defaults to: `document.body`
+   */
+  portalContainer?: Element;
 
   // events
   /**
@@ -321,52 +327,53 @@ const useStyles = createUseStyles(styles, { name: 'AnalyticalTable' });
  */
 const AnalyticalTable = forwardRef((props: AnalyticalTablePropTypes, ref: Ref<HTMLDivElement>) => {
   const {
-    columns,
+    alternateRowColor,
+    alwaysShowSubComponent,
     className,
-    style,
-    tooltip,
+    columnOrder,
+    columns,
+    extension,
+    filterable,
+    globalFilterValue,
+    groupBy,
+    groupable,
     header,
+    highlightField,
+    infiniteScroll,
+    infiniteScrollThreshold,
+    isTreeTable,
     loading,
-    groupBy,
-    selectionMode,
-    selectionBehavior,
-    onRowSelected,
-    onRowClick,
-    onSort,
-    reactTableOptions,
-    tableHooks,
-    subRowsKey,
-    onGroup,
-    rowHeight,
-    selectedRowIds,
-    LoadingComponent,
-    onRowExpandChange,
-    noDataText,
-    NoDataComponent,
-    visibleRows,
-    visibleRowCountMode,
+    markNavigatedRow,
     minRows,
-    isTreeTable,
-    alternateRowColor,
+    noDataText,
     overscanCount,
     overscanCountHorizontal,
+    portalContainer,
+    reactTableOptions,
+    renderRowSubComponent,
+    rowHeight,
     scaleWidthMode,
-    withRowHighlight,
-    highlightField,
-    withNavigationHighlight,
-    markNavigatedRow,
-    groupable,
+    selectedRowIds,
+    selectionBehavior,
+    selectionMode,
     sortable,
-    filterable,
-    infiniteScroll,
-    infiniteScrollThreshold,
+    style,
+    subRowsKey,
+    tableHooks,
+    tableInstance,
+    tooltip,
+    visibleRowCountMode,
+    visibleRows,
+    withNavigationHighlight,
+    withRowHighlight,
+    onGroup,
     onLoadMore,
-    extension,
-    columnOrder,
-    renderRowSubComponent,
-    alwaysShowSubComponent,
-    globalFilterValue,
-    tableInstance
+    onRowClick,
+    onRowExpandChange,
+    onRowSelected,
+    onSort,
+    LoadingComponent,
+    NoDataComponent
   } = props;
 
   const classes = useStyles();
@@ -750,6 +757,7 @@ const AnalyticalTable = forwardRef((props: AnalyticalTablePropTypes, ref: Ref<HT
                   onDragEnd={handleOnDragEnd}
                   dragOver={dragOver}
                   isRtl={isRtl}
+                  portalContainer={portalContainer}
                 />
               )
             );
@@ -830,6 +838,7 @@ const AnalyticalTable = forwardRef((props: AnalyticalTablePropTypes, ref: Ref<HT
           dispatch={dispatch}
           extensionsHeight={extensionsHeight}
           internalRowHeight={internalRowHeight}
+          portalContainer={portalContainer}
         />
       )}
     </div>
@@ -867,7 +876,8 @@ AnalyticalTable.defaultProps = {
   alternateRowColor: false,
   overscanCountHorizontal: 5,
   visibleRowCountMode: TableVisibleRowCountMode.Fixed,
-  alwaysShowSubComponent: false
+  alwaysShowSubComponent: false,
+  portalContainer: document.body
 };
 
 export { AnalyticalTable };

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -55,7 +55,8 @@ export const FilterDialog = (props) => {
     onGo,
     handleSelectionChange,
     handleDialogSearch,
-    handleDialogCancel
+    handleDialogCancel,
+    portalContainer
   } = props;
   const classes = useStyles();
   const [searchString, setSearchString] = useState('');
@@ -281,6 +282,6 @@ export const FilterDialog = (props) => {
         {renderGroups()}
       </div>
     </Dialog>,
-    document.body
+    portalContainer
   );
 };