diff --git a/packages/react/src/preview-card/portal/PreviewCardPortal.tsx b/packages/react/src/preview-card/portal/PreviewCardPortal.tsx index b9b92c7103..cd17087eef 100644 --- a/packages/react/src/preview-card/portal/PreviewCardPortal.tsx +++ b/packages/react/src/preview-card/portal/PreviewCardPortal.tsx @@ -1,10 +1,10 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { FloatingPortal } from '@floating-ui/react'; import { usePreviewCardRootContext } from '../root/PreviewCardContext'; import { HTMLElementType, refType } from '../../utils/proptypes'; import { PreviewCardPortalContext } from './PreviewCardPortalContext'; +import { FloatingPortalLite } from '../../utils/FloatingPortalLite'; /** * A portal element that moves the popup to a different part of the DOM. @@ -24,7 +24,7 @@ function PreviewCardPortal(props: PreviewCardPortal.Props) { return ( - {children} + {children} ); } diff --git a/packages/react/src/tooltip/portal/TooltipPortal.tsx b/packages/react/src/tooltip/portal/TooltipPortal.tsx index 02014be2f2..f72a402162 100644 --- a/packages/react/src/tooltip/portal/TooltipPortal.tsx +++ b/packages/react/src/tooltip/portal/TooltipPortal.tsx @@ -1,10 +1,10 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { FloatingPortal } from '@floating-ui/react'; import { useTooltipRootContext } from '../root/TooltipRootContext'; import { HTMLElementType, refType } from '../../utils/proptypes'; import { TooltipPortalContext } from './TooltipPortalContext'; +import { FloatingPortalLite } from '../../utils/FloatingPortalLite'; /** * A portal element that moves the popup to a different part of the DOM. @@ -24,7 +24,7 @@ function TooltipPortal(props: TooltipPortal.Props) { return ( - {children} + {children} ); } diff --git a/packages/react/src/utils/FloatingPortalLite.tsx b/packages/react/src/utils/FloatingPortalLite.tsx new file mode 100644 index 0000000000..3568c28be1 --- /dev/null +++ b/packages/react/src/utils/FloatingPortalLite.tsx @@ -0,0 +1,20 @@ +'use client'; +import { useFloatingPortalNode } from '@floating-ui/react'; +import * as ReactDOM from 'react-dom'; + +/** + * `FloatingPortal` includes tabbable logic handling for focus management. + * For components that don't need tabbable logic, use `FloatingPortalLite`. + * @ignore - internal component. + */ +export function FloatingPortalLite(props: FloatingPortalLite.Props) { + const node = useFloatingPortalNode({ root: props.root }); + return node && ReactDOM.createPortal(props.children, node); +} + +namespace FloatingPortalLite { + export interface Props { + children?: React.ReactNode; + root?: HTMLElement | null | React.RefObject; + } +}