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

Author: Lukas742

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

@@ -29,7 +29,9 @@ import { Button } from '@ui5/webcomponents-react/lib/Button';
 
 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>[];
   /**
@@ -49,6 +51,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' });
@@ -116,7 +124,8 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef(
       onBeforeOpen,
       showCancelButton,
       alwaysShowHeader,
-      a11yConfig
+      a11yConfig,
+      portalContainer
     } = props;
     const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
     const classes = useStyles();
@@ -235,14 +244,15 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef(
           )}
         </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 TableProps 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
   /**
@@ -366,7 +372,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     renderRowSubComponent,
     alwaysShowSubComponent,
     globalFilterValue,
-    tableInstance
+    tableInstance,
+    portalContainer
   } = props;
 
   const classes = useStyles();
@@ -749,6 +756,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
                   onDragEnd={handleOnDragEnd}
                   dragOver={dragOver}
                   isRtl={isRtl}
+                  portalContainer={portalContainer}
                 />
               )
             );
@@ -829,6 +837,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
           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('');
@@ -284,6 +285,6 @@ export const FilterDialog = (props) => {
         {renderGroups()}
       </div>
     </Dialog>,
-    document.body
+    portalContainer
   );
 };

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

@@ -119,6 +119,12 @@ export interface FilterBarPropTypes extends CommonProps {
    * __Note:__ For TypeScript the types of `ref` are bound to the default tag name, if you change it you are responsible to set the respective types yourself.
    */
   as?: keyof HTMLElementTagNameMap;
+  /**
+   * Defines where modals are rendered into via `React.createPortal`.
+   *
+   * Defaults to: `document.body`
+   */
+  portalContainer?: Element;
   /**
    * The event is fired when the `FilterBar` is collapsed/expanded.
    */
@@ -194,6 +200,7 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
     search,
     variants,
     as,
+    portalContainer,
 
     onToggleFilters,
     onFiltersDialogOpen,
@@ -463,6 +470,7 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
           showGoButton={showGo}
           handleDialogSearch={onFiltersDialogSearch}
           handleDialogCancel={onFiltersDialogCancel}
+          portalContainer={portalContainer}
         >
           {safeChildren()}
         </FilterDialog>
@@ -545,7 +553,8 @@ FilterBar.defaultProps = {
   onFiltersDialogSelectionChange: null,
   onFiltersDialogSearch: null,
   onGo: null,
-  onRestore: null
+  onRestore: null,
+  portalContainer: document.body
 };
 
 FilterBar.displayName = 'FilterBar';

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

@@ -95,6 +95,12 @@ export interface ObjectPagePropTypes extends CommonProps {
    * Defines the ID of the currently `ObjectPageSubSection` section.
    */
   selectedSubSectionId?: string;
+  /**
+   * Defines where modals are rendered into via `React.createPortal`.
+   *
+   * Defaults to: `document.body`
+   */
+  portalContainer?: Element;
   /**
    * Fired when the selected section changes.
    */
@@ -170,7 +176,8 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
     showTitleInHeaderContent,
     headerContent,
     headerContentPinnable,
-    a11yConfig
+    a11yConfig,
+    portalContainer
   } = props;
 
   const classes = useStyles();
@@ -821,7 +828,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
                 ))}
             </List>
           </Popover>,
-          document.body
+          portalContainer
         )}
       </div>
       <div data-component-name="ObjectPageContent" className={responsivePaddingClass}>
@@ -843,7 +850,8 @@ ObjectPage.defaultProps = {
   image: null,
   mode: ObjectPageMode.Default,
   imageShapeCircle: false,
-  showHideHeaderButton: false
+  showHideHeaderButton: false,
+  portalContainer: document.body
 };
 
 export { ObjectPage };

packages/main/src/components/Toolbar/OverflowPopover.tsx

@@ -12,10 +12,11 @@ interface OverflowPopoverProps {
   lastVisibleIndex: number;
   contentClass: string;
   children: ReactNode;
+  portalContainer: Element;
 }
 
 export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopoverProps) => {
-  const { lastVisibleIndex, contentClass, children } = props;
+  const { lastVisibleIndex, contentClass, children, portalContainer } = props;
   const popoverRef = useRef<Ui5PopoverDomRef>();
   const [pressed, setPressed] = useState(false);
 
@@ -82,7 +83,7 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
         <Popover placementType={PlacementType.Bottom} ref={popoverRef} onAfterClose={handleClose}>
           <div className={contentClass}>{renderChildren()}</div>
         </Popover>,
-        document.body
+        portalContainer
       )}
     </>
   );