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;
+ }
+}