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

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

@@ -1,36 +1,40 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   arrow,
   autoUpdate,
   flip,
+  type Middleware,
   offset,
+  type RootBoundary,
   shift,
   useFloating,
-  type Middleware,
-  type RootBoundary,
 } from '@floating-ui/react-dom'
-import {composeClassNames, RadiusStyleProps, tooltip} from '@sanity/ui/css'
-import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {composeClassNames, RadiusStyleProps, 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,
   useCallback,
   useEffect,
-  useMemo,
-  useRef,
-  useState,
   useId,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
+
+import {useTheme_v2} from '../../_compat'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
-import {useTheme_v2} from '../../theme'
-import type {Placement} from '../../types'
+import type {Placement, Props} from '../../types'
 import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import {getElementRef} from '../../utils/getElementRef'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -43,22 +47,20 @@ import {useTooltipDelayGroup} from './tooltipDelayGroup'
 /**
  * @public
  */
-export interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps {
+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?: React.ReactElement
-  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[]
+  children?: ReactElement<Props>
+  content?: ReactNode
   /**
    * Adds a delay to open or close the tooltip.
    *
@@ -70,13 +72,13 @@ export interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps {
    * @defaultValue 0
    */
   delay?: Delay
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
+  portal?: boolean | string
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorCardToneKey
 }
 
 /**
@@ -85,9 +87,8 @@ export interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps {
  * @public
  */
 export const Tooltip = forwardRef(function Tooltip(
-  props: TooltipProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width' | 'wrap'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  props: Props<TooltipProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
   const {layer} = useTheme_v2()
@@ -98,17 +99,18 @@ export const Tooltip = forwardRef(function Tooltip(
     children: childProp,
     className,
     content,
+    delay,
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
-    radius = 2,
+    radius = 3,
     scheme,
     shadow = 2,
     zOffset = layer.tooltip.zOffset,
-    delay,
+    tone,
     ...restProps
   } = props
   const prefersReducedMotion = usePrefersReducedMotion()
@@ -169,6 +171,7 @@ export const Tooltip = forwardRef(function Tooltip(
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
+    elements: {reference: referenceElement},
   })
 
   const arrowX = middlewareData.arrow?.x
@@ -180,6 +183,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
   const delayGroupContext = useTooltipDelayGroup()
+  const {setIsGroupActive, setOpenTooltipId} = delayGroupContext || {}
   const showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId
 
   const isInsideGroup = delayGroupContext !== null
@@ -196,15 +200,15 @@ export const Tooltip = forwardRef(function Tooltip(
         if (open) {
           const groupedOpenDelay = immediate ? 0 : openDelay
 
-          delayGroupContext.setIsGroupActive(open, groupedOpenDelay)
-          delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay)
+          setIsGroupActive?.(open, groupedOpenDelay)
+          setOpenTooltipId?.(tooltipId, groupedOpenDelay)
         } else {
           const minimumGroupDeactivateDelay = 200 // We should provide some delay to allow the user to reach the next tooltip.
           const groupDeactivateDelay =
             closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay
 
-          delayGroupContext.setIsGroupActive(open, groupDeactivateDelay)
-          delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay)
+          setIsGroupActive?.(open, groupDeactivateDelay)
+          setOpenTooltipId?.(null, immediate ? 0 : closeDelay)
         }
       } else {
         const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay
@@ -213,7 +217,15 @@ export const Tooltip = forwardRef(function Tooltip(
         setIsOpen(open, standaloneDelay)
       }
     },
-    [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen],
+    [
+      isInsideGroup,
+      openDelay,
+      setIsGroupActive,
+      setOpenTooltipId,
+      tooltipId,
+      closeDelay,
+      setIsOpen,
+    ],
   )
 
   const handleBlur = useCallback(
@@ -260,7 +272,7 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   // Handle closing the tooltip when the mouse leaves the referenceElement
-  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip, isInsideGroup})
 
   // Close when `disabled` changes to `true`
   useEffect(() => {
@@ -272,9 +284,6 @@ export const Tooltip = forwardRef(function Tooltip(
     if (!content && showTooltip) handleIsOpenChange(false)
   }, [content, handleIsOpenChange, showTooltip])
 
-  // Update reference
-  useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])
-
   useEffect(() => {
     // If the user clicks on escape key, close the tooltip.
     if (!showTooltip) return
@@ -321,11 +330,6 @@ export const Tooltip = forwardRef(function Tooltip(
     [refs],
   )
 
-  const childRef = useRef<HTMLElement | null>(null)
-
-  // Merge refs so that any ref we are overriding is called as well
-  useImperativeHandle((childProp as any)?.ref, () => childRef.current)
-
   const child = useMemo(() => {
     if (!childProp) return null
 
@@ -336,7 +340,7 @@ export const Tooltip = forwardRef(function Tooltip(
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
-      ref: childRef,
+      ref: setReferenceElement,
     })
   }, [
     childProp,
@@ -350,13 +354,9 @@ export const Tooltip = forwardRef(function Tooltip(
 
   // If there's a child then we need to set the reference element to the cloned child ref
   // and if child changes we make sure to update or remove the reference element.
-  useEffect(() => {
-    if (!child) return undefined
-
-    setReferenceElement(childRef.current)
-
-    return () => setReferenceElement(null)
-  }, [child])
+  useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [
+    referenceElement,
+  ])
 
   if (!child) return <></>
 
@@ -365,7 +365,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const node = (
     <Layer
       data-ui="Tooltip"
-      {...restProps}
+      // {...restProps}
       className={composeClassNames(className, tooltip())}
       ref={setFloating}
       style={{
@@ -389,6 +389,7 @@ export const Tooltip = forwardRef(function Tooltip(
         ref={setFloating}
         scheme={scheme}
         shadow={shadow}
+        tone={tone}
       >
         {content}
       </TooltipCard>
@@ -420,19 +421,21 @@ 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,
   referenceElement,
   showTooltip,
+  isInsideGroup,
 }: {
   handleIsOpenChange: (open: boolean, immediate?: boolean) => void
   referenceElement: HTMLElement | null
   showTooltip: boolean
+  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
@@ -451,7 +454,7 @@ function useCloseOnMouseLeave({
   // necessary, because the tooltip might not always close as it should (e.g. when clicking
   // the reference element triggers a CPU-heavy operation.)
   useEffect(() => {
-    if (!showTooltip) return
+    if (!showTooltip || isInsideGroup) return
 
     const handleMouseMove = (event: MouseEvent) => {
       onMouseMove(event.target, () => window.removeEventListener('mousemove', handleMouseMove))
@@ -460,5 +463,5 @@ function useCloseOnMouseLeave({
     window.addEventListener('mousemove', handleMouseMove)
 
     return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [onMouseMove, showTooltip])
+  }, [isInsideGroup, showTooltip])
 }

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

@@ -1,42 +1,41 @@
-import {RadiusStyleProps, tooltipCard} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {tooltipCard} from '@sanity/ui/css'
 import {motion} from 'framer-motion'
-import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {
-  // POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
-  POPOVER_MOTION_PROPS,
-} from '../../constants'
-import {Placement} from '../../types'
+import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import {Placement, Props} from '../../types'
 import {Arrow} from '../../utils'
-import {Card} from '../card'
+import {Card, CardProps} from '../card'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = motion(Card) as typeof Card
+const MotionCard = motion.create(Card)
+
+/* @internal */
+export interface TooltipCardProps extends CardProps {
+  animate?: boolean
+  arrow: boolean
+  arrowRef: ForwardedRef<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  placement?: Placement
+}
 
 /**
  * @internal
  */
 export const TooltipCard = memo(
   forwardRef(function TooltipCard(
-    props: {
-      animate?: boolean
-      arrow: boolean
-      arrowRef: React.Ref<HTMLDivElement>
-      arrowX?: number
-      arrowY?: number
-      originX?: number
-      originY?: number
-      padding?: number | number[]
-      placement?: Placement
-      scheme?: ThemeColorSchemeKey
-      shadow?: number | number[]
-    } & RadiusStyleProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
-    ref: React.ForwardedRef<HTMLDivElement>,
+    props: Omit<
+      Props<TooltipCardProps, 'div'>,
+      'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
+    >,
+    ref: ForwardedRef<HTMLDivElement>,
   ) {
     const {
       animate,
@@ -53,6 +52,7 @@ export const TooltipCard = memo(
       scheme,
       shadow,
       style,
+      tone,
       ...restProps
     } = props
 
@@ -89,7 +89,12 @@ export const TooltipCard = memo(
         scheme={scheme}
         shadow={shadow}
         style={rootStyle}
-        {...(animate ? POPOVER_MOTION_PROPS : {})}
+        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}
 

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

@@ -1,4 +1,4 @@
-export * from './useTooltipDelayGroup'
 export * from './tooltipDelayGroupContext'
 export * from './tooltipDelayGroupProvider'
 export * from './types'
+export * from './useTooltipDelayGroup'

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

@@ -1,4 +1,5 @@
-import {useMemo} from 'react'
+import {ReactElement, ReactNode, useMemo} from 'react'
+
 import {useDelayedState} from '../../../hooks/useDelayedState'
 import {Delay} from '../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
@@ -8,7 +9,7 @@ import {TooltipDelayGroupContextValue} from './types'
  * @public
  * */
 export interface TooltipDelayGroupProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -26,9 +27,7 @@ export interface TooltipDelayGroupProviderProps {
  * Provides context for a group of tooltip elements that should share a delay
  * which temporarily becomes 1 ms after the first floating element of the group opens.
  */
-export function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.ReactElement {
+export function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): ReactElement {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
@@ -38,7 +37,6 @@ export function TooltipDelayGroupProvider(
 
   const value: TooltipDelayGroupContextValue = useMemo(
     () => ({
-      isGroupActive: isGroupActive,
       setIsGroupActive: setIsGroupActive,
       openTooltipId: openTooltipId,
       setOpenTooltipId: setOpenTooltipId,

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

@@ -2,7 +2,6 @@
  * @beta
  */
 export interface TooltipDelayGroupContextValue {
-  isGroupActive: boolean
   setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
   setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
   openDelay: number

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

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
 import {TooltipDelayGroupContextValue} from './types'
 

package/src/core/primitives/types.ts

@@ -1,15 +1,15 @@
 import {
+  type FlexAlign,
+  type FlexDirection,
+  type FlexJustify,
+  type FlexValue,
+  type FlexWrap,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
-  type FlexAlign,
-  type FlexDirection,
-  type FlexJustify,
-  type FlexValue,
-  type FlexWrap,
 } from '@sanity/ui/css'
 
 import {

package/src/core/types/box.ts

@@ -4,19 +4,16 @@ export {
    * @deprecated use `Display` from `@sanity/ui/css` instead.
    */
   type Display as BoxDisplay,
-
   /**
    * @public
    * @deprecated use `BoxHeight` from `@sanity/ui/css` instead.
    */
   type BoxHeight,
-
   /**
    * @public
    * @deprecated use `Overflow` from `@sanity/ui/css` instead.
    */
   type BoxOverflow,
-
   /**
    * @public
    * @deprecated use `BoxSizing` from `@sanity/ui/css` instead.

package/src/core/types/button.ts

@@ -2,6 +2,7 @@ import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public
+ * @deprecated Use `ThemeColorButtonModeKey` instead
  */
 export type ButtonMode = ThemeColorButtonModeKey
 
@@ -12,6 +13,7 @@ export type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
  * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export type ButtonTone = ThemeColorStateToneKey
 

package/src/core/types/flex.ts

@@ -4,25 +4,21 @@ export {
    * @deprecated
    */
   type FlexAlign,
-
   /**
    * @public
    * @deprecated
    */
   type FlexDirection,
-
   /**
    * @public
    * @deprecated
    */
   type FlexJustify,
-
   /**
    * @public
    * @deprecated
    */
   type FlexValue,
-
   /**
    * @public
    * @deprecated

package/src/core/types/grid.ts

@@ -1,19 +1,17 @@
 export {
-  /**
-   * @public
-   * @deprecated Use `GridAutoRows` from `@sanity/ui/css` instead.
-   */
-  type GridAutoRows,
-
   /**
    * @public
    * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
    */
   type GridAutoCols,
-
   /**
    * @public
    * @deprecated Use `GridAutoFlow` from `@sanity/ui/css` instead.
    */
   type GridAutoFlow,
+  /**
+   * @public
+   * @deprecated Use `GridAutoRows` from `@sanity/ui/css` instead.
+   */
+  type GridAutoRows,
 } from '@sanity/ui/css'

package/src/core/types/gridItem.ts

@@ -4,34 +4,29 @@ export {
    * @deprecated
    */
   type GridItemColumn,
-
   /**
    * @public
    * @deprecated
    */
-  type GridItemColumnStart,
-
+  type GridItemColumnEnd,
   /**
    * @public
    * @deprecated
    */
-  type GridItemColumnEnd,
-
+  type GridItemColumnStart,
   /**
    * @public
    * @deprecated
    */
   type GridItemRow,
-
   /**
    * @public
    * @deprecated
    */
-  type GridItemRowStart,
-
+  type GridItemRowEnd,
   /**
    * @public
    * @deprecated
    */
-  type GridItemRowEnd,
+  type GridItemRowStart,
 } from '@sanity/ui/css'

package/src/core/types/index.ts

@@ -9,6 +9,7 @@ export * from './grid'
 export * from './gridItem'
 export * from './placement'
 export * from './popover'
+export * from './props'
 export * from './radius'
 export * from './selectable'
 export * from './text'

package/src/core/types/props.ts

@@ -0,0 +1,18 @@
+import type {ComponentProps, ElementType} from 'react'
+
+export interface PolymorphicProps {
+  as?: ElementType
+}
+
+/** @public */
+export type ElementProps<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+
+/** @public */
+export type Assign<T, U> = Omit<T, keyof U> & U
+
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
+  ElementProps<E> & PolymorphicProps,
+  P
+>

package/src/core/types/selectable.ts

@@ -2,5 +2,6 @@ import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export type SelectableTone = ThemeColorStateToneKey