@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/core/primitives/tooltip/tooltip.test.tsx

@@ -1,23 +1,24 @@
-/** @jest-environment jsdom */
-
 import '../../../../test/mocks/resizeObserver.mock'
 import '../../../../test/mocks/matchMedia.mock'
 
 import {act, fireEvent, screen} from '@testing-library/react'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
-import {Button, Text} from '../../primitives'
-import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
+import {Button} from '../button'
+import {Text} from '../text'
+import {Tooltip} from './tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
 
-// Fake timers using Jest
+// Fake timers
 beforeEach(() => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
 })
 
-// Running all pending timers and switching to real timers using Jest
+// Running all pending timers and switching to real timers
 afterEach(() => {
-  jest.runOnlyPendingTimers()
-  jest.useRealTimers()
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
 })
 
 describe('Tooltip', () => {
@@ -44,7 +45,7 @@ describe('Tooltip', () => {
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
     it('should support delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       const delay = 200
 
       render(
@@ -64,10 +65,10 @@ describe('Tooltip', () => {
 
       fireEvent.mouseEnter(button)
 
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -75,12 +76,12 @@ describe('Tooltip', () => {
       fireEvent.mouseOut(button)
       // Validate tooltip content is still showing.
       screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
       // Validate tooltip content is not rendered anymore
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
     it('should support different open and close delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       const openDelay = 200
       const closeDelay = 150
 
@@ -104,10 +105,10 @@ describe('Tooltip', () => {
 
       fireEvent.mouseEnter(button)
 
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -115,7 +116,7 @@ describe('Tooltip', () => {
       fireEvent.mouseOut(button)
       // Validate tooltip content is still showing.
       screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(closeDelay))
+      act(() => vi.advanceTimersByTime(closeDelay))
       // Validate tooltip content is not rendered anymore
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
@@ -125,7 +126,7 @@ describe('Tooltip', () => {
     it('should support groups with the same delay to open and close.', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       render(
         <TooltipDelayGroupProvider delay={delay}>
           <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
@@ -150,11 +151,11 @@ describe('Tooltip', () => {
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet, we have a delay of 150ms
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
@@ -165,38 +166,38 @@ describe('Tooltip', () => {
       fireEvent.mouseEnter(button2)
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
+      act(() => vi.advanceTimersByTime(delay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
+      act(() => vi.advanceTimersByTime(delay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
+      act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       screen.getByText('Tooltip 2')
     })
     it('should support groups with different open and close delay.', () => {
       const openDelay = 250
       const closeDelay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       render(
         <TooltipDelayGroupProvider
           delay={{
@@ -226,11 +227,11 @@ describe('Tooltip', () => {
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet, we have a delay of2150ms
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
@@ -241,31 +242,31 @@ describe('Tooltip', () => {
       fireEvent.mouseEnter(button2)
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
+      act(() => vi.advanceTimersByTime(closeDelay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
+      act(() => vi.advanceTimersByTime(closeDelay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
+      act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       screen.getByText('Tooltip 2')
     })
   })
@@ -274,7 +275,7 @@ describe('Tooltip', () => {
     it('Standalone tooltip closes immediately with Escape key', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
 
       render(
         <Tooltip
@@ -290,8 +291,8 @@ describe('Tooltip', () => {
 
       // Validate tooltip content is not rendered
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => fireEvent.focus(button))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -305,7 +306,7 @@ describe('Tooltip', () => {
     it('With <TooltipDelayGroupProvider />  closes immediately with Escape key', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
 
       render(
         <TooltipDelayGroupProvider delay={{close: delay}}>
@@ -323,9 +324,9 @@ describe('Tooltip', () => {
 
       // Validate tooltip content is not rendered
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -352,9 +353,9 @@ describe('Tooltip', () => {
 
       // Assertion: tooltip does not exist in the document
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Assertion: the tooltip is not visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
@@ -378,9 +379,9 @@ describe('Tooltip', () => {
 
       // Assertion: tooltip does not exist in the document
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Assertion: the tooltip is not visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
@@ -393,12 +394,12 @@ describe('Tooltip', () => {
   })
 
   describe('Used defined events on <Tooltip /> child should fire correctly', () => {
-    const handleBlur = jest.fn()
-    const handleClick = jest.fn()
-    const handleContextMenu = jest.fn()
-    const handleFocus = jest.fn()
-    const handleMouseEnter = jest.fn()
-    const handleMouseLeave = jest.fn()
+    const handleBlur = vi.fn()
+    const handleClick = vi.fn()
+    const handleContextMenu = vi.fn()
+    const handleFocus = vi.fn()
+    const handleMouseEnter = vi.fn()
+    const handleMouseLeave = vi.fn()
 
     beforeEach(() => {
       render(
@@ -418,35 +419,35 @@ describe('Tooltip', () => {
       )
     })
 
-    afterEach(() => jest.clearAllMocks())
+    afterEach(() => vi.clearAllMocks())
 
     it('should fire the onBlur event', () => {
-      fireEvent.blur(screen.getByTestId('btn'))
+      act(() => fireEvent.blur(screen.getByTestId('btn')))
       expect(handleBlur).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onClick event', () => {
-      fireEvent.click(screen.getByTestId('btn'))
+      act(() => fireEvent.click(screen.getByTestId('btn')))
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onContextMenu event', () => {
-      fireEvent.contextMenu(screen.getByTestId('btn'))
+      act(() => fireEvent.contextMenu(screen.getByTestId('btn')))
       expect(handleContextMenu).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onFocus event', () => {
-      fireEvent.focus(screen.getByTestId('btn'))
+      act(() => fireEvent.focus(screen.getByTestId('btn')))
       expect(handleFocus).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onMouseEnter event', () => {
-      fireEvent.mouseEnter(screen.getByTestId('btn'))
+      act(() => fireEvent.mouseEnter(screen.getByTestId('btn')))
       expect(handleMouseEnter).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onMouseLeave event', () => {
-      fireEvent.mouseLeave(screen.getByTestId('btn'))
+      act(() => fireEvent.mouseLeave(screen.getByTestId('btn')))
       expect(handleMouseLeave).toHaveBeenCalledTimes(1)
     })
   })

package/src/core/primitives/tooltip/tooltip.tsx

@@ -8,15 +8,17 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
-import {composeClassNames, RadiusStyleProps, ShadowStyleProps, tooltip} from '@sanity/ui/css'
+import {type RadiusStyleProps, type ShadowStyleProps, tooltip} from '@sanity/ui/css'
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  ReactNode,
+  type FocusEvent,
+  type HTMLAttributes,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
   useCallback,
   useEffect,
   useId,
@@ -28,94 +30,109 @@ import {
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
-import {useTheme_v2} from '../../_compat'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {Z_OFFSETS} from '../../constants'
+import {usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
-import type {Placement, Props} from '../../types'
-import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {ComponentType, Placement, Props} from '../../types'
+import {type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
+import {CardProvider, useCard} from '../card'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {TooltipCard} from './tooltipCard'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
-
-/**
- * @public
- */
-export interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps, ShadowStyleProps {
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  arrow?: boolean
-  boundaryElement?: HTMLElement | null
-  children?: ReactElement<Props>
-  content?: ReactNode
-  /**
-   * Adds a delay to open or close the tooltip.
-   *
-   * If only a `number` is passed, it will be used for both opening and closing.
-   *
-   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
-   *
-   * @public
-   * @defaultValue 0
-   */
-  delay?: Delay
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  placement?: Placement
-  /** Whether or not to render the tooltip in a portal element. */
-  portal?: boolean | string
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey
-}
+import {TooltipLayer} from './tooltipLayer'
+
+/** @public */
+export const DEFAULT_TOOLTIP_ELEMENT = 'div'
+
+/** @public */
+export type TooltipOwnProps = LayerOwnProps &
+  RadiusStyleProps &
+  ShadowStyleProps & {
+    /** @deprecated Use `fallbackPlacements` instead. */
+    allowedAutoPlacements?: Placement[]
+    /**
+     * Whether the tooltip should animate in and out.
+     *
+     * @beta
+     * @defaultValue false
+     */
+    animate?: boolean
+    arrow?: boolean
+    boundaryElement?: HTMLElement | null
+    children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
+    content?: ReactNode
+    /**
+     * Adds a delay to open or close the tooltip.
+     *
+     * If only a `number` is passed, it will be used for both opening and closing.
+     *
+     * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+     *
+     * @public
+     * @defaultValue 0
+     */
+    delay?: Delay
+    disabled?: boolean
+    fallbackPlacements?: Placement[]
+    placement?: Placement
+    /** Whether or not to render the tooltip in a portal element. */
+    portal?: boolean | string
+    scheme?: ThemeColorSchemeKey
+    tone?: ThemeColorCardToneKey
+  }
+
+/** @public */
+export type TooltipElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
+  TooltipOwnProps,
+  E
+>
 
 /**
  * Tooltips display information when hovering, focusing or tapping.
  *
  * @public
  */
-export const Tooltip = forwardRef(function Tooltip(
-  props: Props<TooltipProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
+  props: TooltipProps<E>,
 ) {
   const boundaryElementContext = useBoundaryElement()
-  const {layer} = useTheme_v2()
+
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
+    as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
     className,
     content,
     delay,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
+    fallbackPlacements = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 3,
+    ref: forwardedRef,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
-    tone,
-    ...restProps
-  } = props
+    zOffset = Z_OFFSETS.tooltip,
+    tone = 'inherit',
+    ...rest
+  } = props as TooltipProps<typeof DEFAULT_TOOLTIP_ELEMENT>
+
+  const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -172,6 +189,7 @@ export const Tooltip = forwardRef(function Tooltip(
     placement: placementProp,
     whileElementsMounted: autoUpdate,
     elements: {reference: referenceElement},
+    transform: false,
   })
 
   const arrowX = middlewareData.arrow?.x
@@ -229,42 +247,42 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   const handleBlur = useCallback(
-    (e: FocusEvent) => {
+    (e: FocusEvent<HTMLElement>) => {
       handleIsOpenChange(false)
       childProp?.props?.onBlur?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleClick = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleFocus = useCallback(
-    (e: FocusEvent) => {
+    (e: FocusEvent<HTMLElement>) => {
       handleIsOpenChange(true)
       childProp?.props?.onFocus?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleMouseEnter = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(true)
       childProp?.props?.onMouseEnter?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleMouseLeave = useCallback(
-    (e: MouseEvent) => {
+    (e: ReactMouseEvent<HTMLElement>) => {
       handleIsOpenChange(false)
       childProp?.props?.onMouseLeave?.(e)
     },
@@ -363,44 +381,45 @@ export const Tooltip = forwardRef(function Tooltip(
   if (disabled) return child
 
   const node = (
-    <Layer
+    <TooltipLayer
       data-ui="Tooltip"
-      // {...restProps}
-      className={composeClassNames(className, tooltip())}
+      {...rest}
+      animate={animate}
+      arrow={arrowProp}
+      arrowRef={setArrow}
+      arrowX={arrowX}
+      arrowY={arrowY}
+      as={as}
+      className={tooltip({className})}
+      originX={originX}
+      originY={originY}
+      padding={padding}
+      placement={placement}
+      radius={radius}
       ref={setFloating}
+      scheme={scheme}
+      shadow={shadow}
       style={{
         ...floatingStyles,
         maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : undefined,
       }}
+      tone={tone}
       zOffset={zOffset}
     >
-      <TooltipCard
-        {...restProps}
-        animate={animate}
-        arrow={arrowProp}
-        arrowRef={setArrow}
-        arrowX={arrowX}
-        arrowY={arrowY}
-        originX={originX}
-        originY={originY}
-        padding={padding}
-        placement={placement}
-        radius={radius}
-        ref={setFloating}
-        scheme={scheme}
-        shadow={shadow}
-        tone={tone}
-      >
-        {content}
-      </TooltipCard>
-    </Layer>
+      {content}
+    </TooltipLayer>
   )
 
   const children =
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        {node}
+        <CardProvider
+          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
+          scheme={scheme ?? 'light'}
+        >
+          {node}
+        </CardProvider>
       </Portal>
     ) : (
       node
@@ -415,9 +434,7 @@ export const Tooltip = forwardRef(function Tooltip(
       {child}
     </>
   )
-})
-
-Tooltip.displayName = 'ForwardRef(Tooltip)'
+}
 
 /**
  * As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../../lib/createGlobalScopedContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta