[Tooltip, PreviewCard] Use FloatingPortalLite (#1278)

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 (
     <PreviewCardPortalContext.Provider value={keepMounted}>
-      <FloatingPortal root={container}>{children}</FloatingPortal>
+      <FloatingPortalLite root={container}>{children}</FloatingPortalLite>
     </PreviewCardPortalContext.Provider>
   );
 }

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 (
     <TooltipPortalContext.Provider value={keepMounted}>
-      <FloatingPortal root={container}>{children}</FloatingPortal>
+      <FloatingPortalLite root={container}>{children}</FloatingPortalLite>
     </TooltipPortalContext.Provider>
   );
 }

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