refactor(AnalyticalTable): remove unnecessary portalContainer prop (#6039)

Additionally, this PR removes all mentions of `createPortal` or
`portalContainer`.

BREAKING CHANGE: `portalContainer` has been removed as it's no longer
needed due to the [Popover
API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).

Author: Lukas742

docs/MigrationGuide.mdx

@@ -477,6 +477,10 @@ function MyComponent() {
 - `alwaysShowSubComponent` has been removed, please use `subComponentsBehavior` with `AnalyticalTableSubComponentsBehavior.Visibe` instead.
 - The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sorting` to `true` yourself.
 
+**Removed Props:**
+
+- `portalContainer` has been removed as it's no longer needed due to the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) used in the `Popover` ui5 web component.
+
 **Renamed Enums:**
 
 Only the names of the following enums have changed, so it's sufficient to replace them with the new name.

docs/knowledge-base/Portals.mdx

@@ -1,9 +1,25 @@
 import { Meta } from '@storybook/addon-docs';
 import { Footer, TableOfContent } from '@sb/components';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+import { MessageStrip } from '@ui5/webcomponents-react';
 
-<Meta title="Working with Portals" />
+<Meta title="Working with Portals (v1)" />
 
-# Working with Portals
+# Working with Portals in v1
+
+<MessageStrip
+  hideCloseButton
+  design={MessageStripDesign.Critical}
+  children={
+    <>
+      Since v2, it's not necessary to use portals anymore, as all popovers and dialogs are now using the{' '}
+      <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">
+        Popover API
+      </ui5-link>
+      .
+    </>
+  }
+/>
 
 This entry explains why portals are used in UI5 Web Components for React components and what you need to consider when using them.
 

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

@@ -13,7 +13,6 @@ interface ColumnHeaderContainerProps {
   onGroupByChanged: (e: CustomEvent<{ column?: Record<string, unknown>; isGrouped?: boolean }>) => void;
   resizeInfo: Record<string, unknown>;
   isRtl: boolean;
-  portalContainer: Element;
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   uniqueId: string;
   showVerticalEndBorder: boolean;
@@ -27,7 +26,6 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     onGroupByChanged,
     resizeInfo,
     isRtl,
-    portalContainer,
     columnVirtualizer,
     uniqueId,
     showVerticalEndBorder
@@ -86,7 +84,6 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
               virtualColumn={virtualColumn}
               columnVirtualizer={columnVirtualizer}
               isRtl={isRtl}
-              portalContainer={portalContainer}
             >
               {column.render('Header')}
             </ColumnHeader>

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

@@ -9,10 +9,8 @@ import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
 import { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import { FlexBoxAlignItems, TextAlign } from '../../../enums/index.js';
 import { CLEAR_SORTING, GROUP, SORT_ASCENDING, SORT_DESCENDING, UNGROUP } from '../../../i18n/i18n-defaults.js';
-import { useCanRenderPortal } from '../../../internal/ssr.js';
 import { stopPropagation } from '../../../internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '../../../internal/utils.js';
 import { Icon } from '../../../webComponents/Icon/index.js';
@@ -31,13 +29,12 @@ export interface ColumnHeaderModalProperties {
   onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void;
   open: boolean;
   setPopoverOpen: (open: boolean) => void;
-  portalContainer: Element;
   isRtl: boolean;
   openerRef: MutableRefObject<HTMLDivElement>;
 }
 
 export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
-  const { column, onSort, onGroupBy, open, setPopoverOpen, portalContainer, isRtl, openerRef } = props;
+  const { column, onSort, onGroupBy, open, setPopoverOpen, isRtl, openerRef } = props;
   useStylesheet(styleData, ColumnHeaderModal.displayName);
   const showFilter = column.canFilter;
   const showGroup = column.canGroupBy;
@@ -150,21 +147,15 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
     }
   };
 
-  const canRenderPortal = useCanRenderPortal();
-
   useEffect(() => {
     if (open && ref.current && openerRef.current) {
       void customElements.whenDefined(getUi5TagWithSuffix('ui5-popover')).then(() => {
         ref.current.opener = openerRef.current;
       });
     }
-  }, [open, canRenderPortal]);
-
-  if (!canRenderPortal) {
-    return null;
-  }
+  }, [open]);
 
-  return createPortal(
+  return (
     <Popover
       open={open}
       hideArrow
@@ -218,8 +209,7 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
           </ListItemStandard>
         )}
       </List>
-    </Popover>,
-    portalContainer ?? document.body
+    </Popover>
   );
 };
 ColumnHeaderModal.displayName = 'ColumnHeaderModal';

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

@@ -37,7 +37,6 @@ export interface ColumnHeaderProps {
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   isRtl: boolean;
   children: ReactNode | ReactNode[];
-  portalContainer: Element;
   columnId?: string;
   showVerticalEndBorder: boolean;
 
@@ -81,7 +80,6 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
     visibleColumnIndex,
     onClick,
     onKeyDown,
-    portalContainer,
     isFiltered,
     title,
     'aria-label': ariaLabel,
@@ -239,7 +237,6 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
             openerRef={columnHeaderRef}
             open={popoverOpen}
             setPopoverOpen={setPopoverOpen}
-            portalContainer={portalContainer}
           />
         )}
       </div>

packages/main/src/components/AnalyticalTable/Recipes.mdx

@@ -237,7 +237,6 @@ Below you can find two examples of typical pain points:
 In general, we recommend mounting modals like Dialogs or Popovers outside the `AnalyticalTable`.
 Still, it's possible to also render them inside a custom cell, but there are some things to consider:
 
-- Use `createPortal` to render the modal outside the `AnalyticalTable` to prevent visual issues.
 - Use conditional rendering to prevent the modal from being rendered for every cell.
 - Call `event.stopPropagation()` in the respective handler of the event if you're facing issues with focus handling (`onFocus`), keyboard navigation (i.a. `onKeyDown`), etc.
 
@@ -254,18 +253,15 @@ const columns = [
       return (
         <>
           <Button onClick={toggle}>Open</Button>
-          {createPortal(
-            <Dialog
-              open={open}
-              initialFocus={uniqueId}
-              onFocus={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              <Input placeholder="Focus me!" id={uniqueId} />
-            </Dialog>,
-            document.body
-          )}
+          <Dialog
+            open={open}
+            initialFocus={uniqueId}
+            onFocus={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <Input placeholder="Focus me!" id={uniqueId} />
+          </Dialog>
         </>
       );
     }

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

@@ -1,9 +1,7 @@
 import { useStylesheet, useI18nBundle } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { DRAG_TO_RESIZE } from '../../i18n/i18n-defaults.js';
-import { useCanRenderPortal } from '../../internal/ssr.js';
 import { classNames, styleData } from './VerticalResizer.module.css.js';
 
 interface VerticalResizerProps {
@@ -13,7 +11,6 @@ interface VerticalResizerProps {
   internalRowHeight: number;
   hasPopInColumns: boolean;
   popInRowHeight: number;
-  portalContainer: Element;
   rowsLength: number;
   visibleRows: number;
   handleOnLoadMore: (e: Event) => void;
@@ -34,7 +31,6 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     internalRowHeight,
     hasPopInColumns,
     popInRowHeight,
-    portalContainer,
     rowsLength,
     visibleRows,
     handleOnLoadMore
@@ -140,11 +136,6 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     isInitial.current = false;
   }, [rowsLength, visibleRows]);
 
-  const canRenderPortal = useCanRenderPortal();
-  if (!canRenderPortal) {
-    return null;
-  }
-
   return (
     <div
       className={classNames.container}
@@ -154,15 +145,12 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
       role="separator"
       title={i18nBundle.getText(DRAG_TO_RESIZE)}
     >
-      {resizerPosition &&
-        isDragging &&
-        createPortal(
-          <div
-            className={classNames.resizer}
-            style={{ top: resizerPosition.top, left: resizerPosition.left, width: resizerPosition.width }}
-          />,
-          portalContainer ?? document.body
-        )}
+      {resizerPosition && isDragging && (
+        <div
+          className={classNames.resizer}
+          style={{ top: resizerPosition.top, left: resizerPosition.left, width: resizerPosition.width }}
+        />
+      )}
     </div>
   );
 };

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

@@ -139,7 +139,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     noDataText,
     overscanCount,
     overscanCountHorizontal = 5,
-    portalContainer,
     retainColumnWidth,
     reactTableOptions,
     renderRowSubComponent,
@@ -768,7 +767,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                       onSort={onSort}
                       onGroupByChanged={onGroupByChanged}
                       isRtl={isRtl}
-                      portalContainer={portalContainer}
                       columnVirtualizer={columnVirtualizer}
                       uniqueId={uniqueId}
                       showVerticalEndBorder={showVerticalEndBorder}
@@ -851,7 +849,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               dispatch={dispatch}
               extensionsHeight={extensionsHeight}
               internalRowHeight={internalRowHeight}
-              portalContainer={portalContainer}
               rowsLength={rows.length}
               visibleRows={internalVisibleRowCount}
               handleOnLoadMore={handleOnLoadMore}

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -615,14 +615,6 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * @since 1.19.0
    */
   subComponentsBehavior?: AnalyticalTableSubComponentsBehavior | keyof typeof AnalyticalTableSubComponentsBehavior;
-  /**
-   * Defines where modals and other elements which should be mounted outside the DOM hierarchy are rendered into via `React.createPortal`.
-   *
-   * You can find out more about this [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-working-with-portals--page).
-   *
-   * Defaults to: `document.body`
-   */
-  portalContainer?: Element;
 
   // events
   /**

packages/main/src/components/MessageBox/MessageBox.mdx

@@ -77,34 +77,6 @@ const MessageBoxComponent = () => {
 };
 ```
 
-## Using MessageBoxes inside other components
-
-`MessageBoxes` are often used within other components, when opened this could sometimes have unwanted side effects.
-In this case, we recommend using [createPortal](https://reactjs.org/docs/portals.html) to mount the `MessageBox` outside of the DOM hierarchy of the parent component.
-
-```JSX
-const MessageBoxComponent = () => {
-  const [open, setOpen] = useState(false);
-  const onButtonClick = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-  return (
-    <>
-      <Button onClick={onButtonClick}>Open Messagebox</Button>
-      {createPortal(
-        <MessageBox open={open} onClose={handleClose}>
-          Content
-        </MessageBox>,
-        document.body
-      )}
-    </>
-  );
-};
-```
-
 # More Examples
 
 <br />

packages/main/src/components/MessageBox/MessageBox.stories.tsx

@@ -1,23 +1,14 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
-import { forwardRef, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useEffect, useState } from 'react';
 import { MessageBoxAction } from '../../enums/MessageBoxAction';
 import { MessageBoxType } from '../../enums/MessageBoxType';
-import type { DialogDomRef } from '../../webComponents';
 import { Button } from '../../webComponents/Button/index';
-import type { MessageBoxPropTypes } from './index.js';
-import { MessageBox as OriginalMessageBox } from './index.js';
-
-// todo remove once portals are supported inline, or popovers are supported w/o having to mount them to the body
-const MessageBox = forwardRef<DialogDomRef, MessageBoxPropTypes>((args, ref) =>
-  createPortal(<OriginalMessageBox {...args} ref={ref} />, document.body)
-);
-MessageBox.displayName = 'MessageBox';
+import { MessageBox } from './index.js';
 
 const meta = {
   title: 'Modals & Popovers / MessageBox',
-  component: OriginalMessageBox,
+  component: MessageBox,
   argTypes: {
     header: {
       control: { disable: true }
@@ -38,7 +29,7 @@ const meta = {
     chromatic: { delay: 1000 }
   },
   tags: ['package:@ui5/webcomponents', 'cem-module:Dialog']
-} satisfies Meta<typeof OriginalMessageBox>;
+} satisfies Meta<typeof MessageBox>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -134,7 +134,6 @@ const getActions = (actions, type): (string | ReactElement<ButtonPropTypes>)[] =
 
 /**
  * The `MessageBox` component provides easier methods to create a `Dialog`, such as standard alerts, confirmation dialogs, or arbitrary message dialogs.
- * For convenience, it also provides an `open` prop, so it is not necessary to attach a `ref` to open the `MessageBox`.
  */
 const MessageBox = forwardRef<DialogDomRef, MessageBoxPropTypes>((props, ref) => {
   const {