PLASMA-6947: extended portal prop in Popover, Tooltip

packages/plasma-new-hope/src/components/_beta/Popover/Popover.tsx

@@ -26,7 +26,7 @@ import { IconClose } from '../../_Icon';
 import { Resizable } from '../../_Resizable';
 import { Slot } from '../../_Slot/Slot';
 
-import { sizeToIconSize, matchPlacements } from './utils';
+import { sizeToIconSize, matchPlacements, getFloatingPortalProps } from './utils';
 import { tokens, classes } from './Popover.tokens';
 import { base, CloseButton, Wrapper } from './Popover.styles';
 import type { PopoverProps } from './Popover.types';
@@ -132,7 +132,7 @@ export const popoverRoot = (Root: RootProps<HTMLDivElement, Omit<PopoverProps, '
                     </Slot>
 
                     {opened && (
-                        <FloatingPortal root={portal}>
+                        <FloatingPortal {...getFloatingPortalProps(portal)}>
                             <FloatingFocusManager context={context}>
                                 <Root
                                     ref={refs.setFloating}

packages/plasma-new-hope/src/components/_beta/Popover/Popover.types.ts

@@ -108,9 +108,13 @@ export type BasicPopoverProps = {
      */
     zIndex?: number;
     /**
-     * Портал для всплывающего контента.
+     * Портал для всплывающего окна.
+     * Принимает id контейнера или ref.
+     * Если контейнер с заданным id не найден на странице,
+     * то он будет автоматически создан перед </body>.
+     * @default Без использования portal всплывающее окно рендерится перед </body>.
      */
-    portal?: React.RefObject<HTMLElement | null>;
+    portal?: string | React.RefObject<HTMLElement | null>;
 
     /**
      * Вид компонента.

packages/plasma-new-hope/src/components/_beta/Popover/utils/getFloatingPortalProps.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+
+type FloatingPortalReturnedProps = {
+    root?: RefObject<HTMLElement | null>;
+    id?: string;
+};
+
+export const getFloatingPortalProps = (
+    portal?: string | RefObject<HTMLElement | null>,
+): FloatingPortalReturnedProps => {
+    if (!portal) {
+        return {};
+    }
+
+    if (typeof portal === 'string') {
+        return { id: portal };
+    }
+
+    return { root: portal };
+};

packages/plasma-new-hope/src/components/_beta/Popover/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './sizeToIconSize';
 export * from './matchPlacements';
+export * from './getFloatingPortalProps';

packages/plasma-new-hope/src/components/_beta/Tooltip/Tooltip.tsx

@@ -20,6 +20,7 @@ import { css } from '@linaria/core';
 
 import { Slot } from '../../_Slot/Slot';
 import { ARROW_HEIGHT, ARROW_PADDING, ARROW_POLYGON, ARROW_WIDTH } from '../Popover/Popover';
+import { getFloatingPortalProps } from '../Popover/utils';
 
 import { tokens, classes } from './Tooltip.tokens';
 import { base, Wrapper, IconWrapper } from './Tooltip.styles';
@@ -97,7 +98,7 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, '
                     </Slot>
 
                     {opened && (
-                        <FloatingPortal root={portal}>
+                        <FloatingPortal {...getFloatingPortalProps(portal)}>
                             <Root
                                 ref={refs.setFloating}
                                 size={size}

packages/plasma-new-hope/src/components/_beta/Tooltip/Tooltip.types.ts

@@ -51,9 +51,13 @@ export type BasicTooltipProps = {
      */
     zIndex?: number;
     /**
-     * Портал для всплывающего контента.
+     * Портал для всплывающего окна.
+     * Принимает id контейнера или ref.
+     * Если контейнер с заданным id не найден на странице,
+     * то он будет автоматически создан перед </body>.
+     * @default Без использования portal всплывающее окно рендерится перед </body>.
      */
-    portal?: React.RefObject<HTMLElement | null>;
+    portal?: string | React.RefObject<HTMLElement | null>;
 
     /**
      * Вид компонента.