@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -8,11 +8,17 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
-import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {type RadiusStyleProps, type ShadowStyleProps, tooltip} from '@sanity/ui/css'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
-  forwardRef,
+  type FocusEvent,
+  type HTMLAttributes,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
   useCallback,
   useEffect,
   useId,
@@ -22,101 +28,112 @@ import {
   useRef,
   useState,
 } from 'react'
-import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {Z_OFFSETS} from '../../constants'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
-import {useTheme_v2} from '../../theme'
-import type {Placement} from '../../types'
-import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {ComponentType, Delay, Placement, Props} from '../../types'
+import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
-import type {Delay} from '../types'
+import {Portal} from '../../utils/portal/portal'
+import {usePortal} from '../../utils/portal/usePortal'
+import {CardProvider} from '../card/cardProvider'
+import {useCard} from '../card/useCard'
+import type {LayerOwnProps} from '../layer/layer'
 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'> {
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
-  arrow?: boolean
-  boundaryElement?: HTMLElement | null
-  children?: React.JSX.Element
-  content?: React.ReactNode
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  padding?: number | number[]
-  placement?: Placement
-  /** Whether or not to render the tooltip in a portal element. */
-  portal?: boolean | string
-  radius?: number | number[]
-  scheme?: ThemeColorSchemeKey
-  shadow?: number | number[]
-  /**
-   * 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
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-}
-
-const StyledTooltip = styled(Layer)`
-  pointer-events: none;
-`
+import {TooltipLayer} from './tooltipLayer'
+
+/** @public */
+export const DEFAULT_TOOLTIP_ELEMENT = 'div'
+
+/** @public */
+export type TooltipOwnProps = LayerOwnProps &
+  RadiusStyleProps &
+  ShadowStyleProps & {
+    /**
+     * 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?: ColorScheme
+    tone?: CardTone
+  }
+
+/** @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: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
+  props: TooltipProps<E>,
+): React.JSX.Element {
   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 = 2,
+    radius = 3,
+    ref: forwardedRef,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
-    delay,
-    ...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)
@@ -173,6 +190,7 @@ export const Tooltip = forwardRef(function Tooltip(
     placement: placementProp,
     whileElementsMounted: autoUpdate,
     elements: {reference: referenceElement},
+    transform: false,
   })
 
   const arrowX = middlewareData.arrow?.x
@@ -230,42 +248,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,46 +381,46 @@ export const Tooltip = forwardRef(function Tooltip(
 
   if (disabled) return child
 
-  const tooltip = (
-    <StyledTooltip
+  const node = (
+    <TooltipLayer
       data-ui="Tooltip"
-      {...restProps}
+      {...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}
-      >
-        {content}
-      </TooltipCard>
-    </StyledTooltip>
+      {content}
+    </TooltipLayer>
   )
 
   const children =
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        {tooltip}
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
+          {node}
+        </CardProvider>
       </Portal>
     ) : (
-      tooltip
+      node
     ))
 
   return (
@@ -414,12 +432,11 @@ 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.
- * @see https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks
+ * @see https://19.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks
  */
 function useCloseOnMouseLeave({
   handleIsOpenChange,
@@ -433,7 +450,7 @@ function useCloseOnMouseLeave({
   isInsideGroup: boolean
 }) {
   // Since we don't want the `mouseevent` events to be attached and removed if the `referenceElement` is changed
-  // we use a "effect event" (https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
+  // we use a "effect event" (https://19.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
   // in order to always see the latest `referenceElement` value inside the event handler itself.
   const onMouseMove = useEffectEvent((target: EventTarget | null, teardown: () => void) => {
     if (!referenceElement) return

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

@@ -1,11 +1,13 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../../lib/createGlobalScopedContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta
  */
-export const TooltipDelayGroupContext =
+export const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null> =
   createGlobalScopedContext<TooltipDelayGroupContextValue | null>(
-    '@sanity/ui/context/tooltipDelayGroup',
+    '@sanity/ui/v3/tooltipDelayGroup',
     null,
   )

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

@@ -1,15 +1,15 @@
-import {useMemo} from 'react'
+import {type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
-import {Delay} from '../../types'
+import type {Delay} from '../../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @public
  * */
 export interface TooltipDelayGroupProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -53,5 +53,3 @@ export function TooltipDelayGroupProvider(
     <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
   )
 }
-
-TooltipDelayGroupProvider.displayName = 'TooltipDelayGroupProvider'

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta

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

@@ -0,0 +1,106 @@
+import {motion, type MotionStyle} from 'framer-motion'
+import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import type {Placement} from '../../types'
+import {Arrow} from '../arrow/arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {
+  DEFAULT_TOOLTIP_ARROW_HEIGHT,
+  DEFAULT_TOOLTIP_ARROW_RADIUS,
+  DEFAULT_TOOLTIP_ARROW_WIDTH,
+} from './constants'
+
+/* @internal */
+export const DEFAULT_TOOLTIP_LAYER_ELEMENT = 'div'
+
+/* @internal */
+export interface TooltipLayerOwnProps extends LayerOwnProps {
+  animate?: boolean
+  arrow: boolean
+  arrowRef: ForwardedRef<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  placement?: Placement
+}
+
+/** @internal */
+export type TooltipLayerProps = TooltipLayerOwnProps & LayerProps<'div'>
+
+/** @internal */
+export function TooltipLayer(props: TooltipLayerProps): React.JSX.Element {
+  const {
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    tone = 'inherit',
+    ...rest
+  } = props
+
+  const rootStyle: MotionStyle = useMemo(
+    () => ({
+      originX,
+      originY,
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, style],
+  )
+
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined,
+    }),
+    [arrowX, arrowY],
+  )
+
+  return (
+    // @ts-expect-error - TODO: fix this
+    <Layer
+      data-ui="Tooltip__layer"
+      {...rest}
+      as={motion.div}
+      data-animate={animate ? '' : undefined}
+      data-placement={placement}
+      padding={padding}
+      radius={radius}
+      scheme={scheme}
+      shadow={shadow}
+      style={rootStyle}
+      variants={POPOVER_MOTION_PROPS.card}
+      transition={POPOVER_MOTION_PROPS.transition}
+      initial={animate ? ['hidden', 'initial'] : undefined}
+      animate={animate ? ['visible', 'scaleIn'] : undefined}
+      exit={animate ? ['hidden', 'scaleOut'] : undefined}
+      tone={tone}
+    >
+      {children}
+
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+          height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+          radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+        />
+      )}
+    </Layer>
+  )
+}

package/src/core/types.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
+
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
+
+/** @public */
+export type EmptyProps = {}
+
+/** @public */
+export type TagType = keyof JSX.IntrinsicElements
+
+/** @public */
+export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+
+/** @public */
+export type ElementType<P> = TagType | ComponentType<P>
+
+/** @public */
+export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  P & {as?: E}
+>
+
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+
+/** @public */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>

package/src/core/utils/boundaryElement/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'utils/boundaryElement',
   title: 'BoundaryElement',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./plain')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/utils/boundaryElement/__workshop__/plain.tsx

@@ -1,7 +1,7 @@
 import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
 import {useState} from 'react'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (

package/src/core/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,14 +1,15 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
 
-import {render} from '../../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'
 
 describe('utils/boundaryElement', () => {
   describe('useBoundaryElement', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -38,7 +39,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should provide default value when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -49,10 +50,11 @@ describe('utils/boundaryElement', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <BoundaryElementContext.Provider value={value as any}>
+          <BoundaryElementContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </BoundaryElementContext.Provider>
         )
@@ -65,7 +67,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -79,12 +81,12 @@ describe('utils/boundaryElement', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <BoundaryElementContext.Provider value={value as any}>
+          <BoundaryElementContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </BoundaryElementContext.Provider>
         )

package/src/core/utils/boundaryElement/boundaryElementContext.ts

@@ -1,7 +1,10 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
-export const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(
-  '@sanity/ui/context/boundaryElement',
-  null,
-)
+export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
+  createGlobalScopedContext<BoundaryElementContextValue | null>(
+    '@sanity/ui/v3/boundaryElement',
+    null,
+  )