@sanity/ui 2.6.7 → 2.6.8

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

@@ -20,10 +20,11 @@ import {
   useRef,
   useState,
   useId,
-  useSyncExternalStore,
   useImperativeHandle,
+  useLayoutEffect,
 } from 'react'
 import {styled} from 'styled-components'
+import {useEffectEvent} from 'use-effect-event'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -85,9 +86,8 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)<{$maxWidth: number}>`
+const Root = styled(Layer)`
   pointer-events: none;
-  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -127,6 +127,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
+  const [tooltipMaxWidth, setTooltipMaxWidth] = useState(0)
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
@@ -134,24 +135,6 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
-  const documentBodyOffsetWidth = useSyncExternalStore(
-    emptySubscribe,
-    () => document.body.offsetWidth,
-    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
-    () => 800,
-  )
-  // Get the maximum tooltip width (sans tooltip padding)
-  // Tooltip width should never exceed the width of either any supplied boundary or portal element.
-  // If both portal and boundary elements are provided, use the smaller width of the two.
-  const tooltipWidth = useMemo(() => {
-    const availableWidths = [
-      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      portalElement?.offsetWidth || documentBodyOffsetWidth,
-    ]
-
-    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
-  }, [boundaryElement, documentBodyOffsetWidth, portalElement?.offsetWidth])
-
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
 
@@ -285,31 +268,8 @@ export const Tooltip = forwardRef(function Tooltip(
     [childProp?.props, handleIsOpenChange],
   )
 
-  // Detect whether the mouse is moving outside of the reference element. This is sometimes
-  // 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
-
-    function handleWindowMouseMove(event: MouseEvent) {
-      if (!referenceElement) return
-
-      const isHoveringReference =
-        referenceElement === event.target ||
-        (event.target instanceof Node && referenceElement.contains(event.target))
-
-      if (!isHoveringReference) {
-        handleIsOpenChange(false)
-        window.removeEventListener('mousemove', handleWindowMouseMove)
-      }
-    }
-
-    window.addEventListener('mousemove', handleWindowMouseMove)
-
-    return () => {
-      window.removeEventListener('mousemove', handleWindowMouseMove)
-    }
-  }, [showTooltip, referenceElement, handleIsOpenChange])
+  // Handle closing the tooltip when the mouse leaves the referenceElement
+  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
 
   // Close when `disabled` changes to `true`
   useEffect(() => {
@@ -340,6 +300,20 @@ export const Tooltip = forwardRef(function Tooltip(
       window.removeEventListener('keydown', handleWindowKeyDown)
     }
   }, [handleIsOpenChange, showTooltip])
+
+  // // Set the max width of the tooltip based on boundaries and portals
+  useLayoutEffect(() => {
+    // Get the maximum tooltip width (sans tooltip padding)
+    // Tooltip width should never exceed the width of either any supplied boundary or portal element.
+    // If both portal and boundary elements are provided, use the smaller width of the two.
+    const availableWidths = [
+      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
+      portalElement?.offsetWidth || document.body.offsetWidth,
+    ]
+
+    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2)
+  }, [boundaryElement, portalElement])
+
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
       arrowRef.current = arrowEl
@@ -402,9 +376,11 @@ export const Tooltip = forwardRef(function Tooltip(
       data-ui="Tooltip"
       {...restProps}
       ref={setFloating}
-      style={floatingStyles}
+      style={{
+        ...floatingStyles,
+        maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : undefined,
+      }}
       zOffset={zOffset}
-      $maxWidth={tooltipWidth}
     >
       <TooltipCard
         {...restProps}
@@ -454,4 +430,47 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 })
 
-const emptySubscribe = () => () => {}
+/**
+ * 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
+ */
+function useCloseOnMouseLeave({
+  handleIsOpenChange,
+  referenceElement,
+  showTooltip,
+}: {
+  handleIsOpenChange: (open: boolean, immediate?: boolean) => void
+  referenceElement: HTMLElement | null
+  showTooltip: 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)
+  // 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
+
+    const isHoveringReference =
+      referenceElement === target || (target instanceof Node && referenceElement.contains(target))
+
+    if (!isHoveringReference) {
+      handleIsOpenChange(false)
+      // Allow removing the event listener eagerly, to avoid race conditions
+      teardown()
+    }
+  })
+
+  // Detect whether the mouse is moving outside of the reference element. This is sometimes
+  // 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
+
+    const handleMouseMove = (event: MouseEvent) => {
+      onMouseMove(event.target, () => window.removeEventListener('mousemove', handleMouseMove))
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [onMouseMove, showTooltip])
+}

package/src/core/styles/font/responsiveFont.ts

@@ -21,11 +21,11 @@ export function responsiveFont(
   const defaultSize = sizes[2]
 
   const base: CSSObject = {
-    position: 'relative',
-    fontFamily: family,
+    'position': 'relative',
+    'fontFamily': family,
     fontWeight,
-    padding: '1px 0',
-    margin: 0,
+    'padding': '1px 0',
+    'margin': 0,
 
     '&:before': {
       content: '""',
@@ -75,10 +75,10 @@ export function fontSize(size: ThemeFontSize): CSSObject {
   const customIconOffset = (capHeight - customIconSize) / 2
 
   return {
-    fontSize: rem(fontSize),
-    lineHeight: `calc(${lineHeight} / ${fontSize})`,
-    letterSpacing: rem(letterSpacing),
-    transform: `translateY(${rem(descenderHeight)})`,
+    'fontSize': rem(fontSize),
+    'lineHeight': `calc(${lineHeight} / ${fontSize})`,
+    'letterSpacing': rem(letterSpacing),
+    'transform': `translateY(${rem(descenderHeight)})`,
 
     '&:before': {
       marginTop: `calc(${rem(0 - negHeight)} - 1px)`,

package/src/core/theme/__workshop__/debug/story.tsx

@@ -191,7 +191,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-gray-fg-color)',
-              backgroundColor: 'var(--card-avatar-gray-bg-color)',
+              'backgroundColor': 'var(--card-avatar-gray-bg-color)',
             } as any
           }
         >
@@ -206,7 +206,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-red-fg-color)',
-              backgroundColor: 'var(--card-avatar-red-bg-color)',
+              'backgroundColor': 'var(--card-avatar-red-bg-color)',
             } as any
           }
         >
@@ -221,7 +221,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-orange-fg-color)',
-              backgroundColor: 'var(--card-avatar-orange-bg-color)',
+              'backgroundColor': 'var(--card-avatar-orange-bg-color)',
             } as any
           }
         >
@@ -236,7 +236,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-yellow-fg-color)',
-              backgroundColor: 'var(--card-avatar-yellow-bg-color)',
+              'backgroundColor': 'var(--card-avatar-yellow-bg-color)',
             } as any
           }
         >
@@ -251,7 +251,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-green-fg-color)',
-              backgroundColor: 'var(--card-avatar-green-bg-color)',
+              'backgroundColor': 'var(--card-avatar-green-bg-color)',
             } as any
           }
         >
@@ -266,7 +266,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-cyan-fg-color)',
-              backgroundColor: 'var(--card-avatar-cyan-bg-color)',
+              'backgroundColor': 'var(--card-avatar-cyan-bg-color)',
             } as any
           }
         >
@@ -281,7 +281,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-blue-fg-color)',
-              backgroundColor: 'var(--card-avatar-blue-bg-color)',
+              'backgroundColor': 'var(--card-avatar-blue-bg-color)',
             } as any
           }
         >
@@ -296,7 +296,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-purple-fg-color)',
-              backgroundColor: 'var(--card-avatar-purple-bg-color)',
+              'backgroundColor': 'var(--card-avatar-purple-bg-color)',
             } as any
           }
         >
@@ -311,7 +311,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-magenta-fg-color)',
-              backgroundColor: 'var(--card-avatar-magenta-bg-color)',
+              'backgroundColor': 'var(--card-avatar-magenta-bg-color)',
             } as any
           }
         >
@@ -395,7 +395,7 @@ function getStateVars(state: ThemeColorState_v2) {
     '--card-skeleton-from-color': state.skeleton.from,
     '--card-skeleton-to-color': state.skeleton.to,
 
-    backgroundColor: 'var(--card-bg-color)',
-    color: 'var(--card-fg-color)',
+    'backgroundColor': 'var(--card-bg-color)',
+    'color': 'var(--card-fg-color)',
   } as CSSProperties
 }

package/src/theme/build/buildColorTheme.test.ts

@@ -9,23 +9,23 @@ test('buildColorTheme: base', () => {
           bg: ['50', '900'],
           fg: ['800', '200'],
         },
-        transparent: {
+        'transparent': {
           bg: ['50', 'black'],
         },
-        default: {
+        'default': {
           bg: ['white', '950'],
           fg: ['black', '200'],
         },
-        primary: {
+        'primary': {
           _hue: 'purple',
         },
-        positive: {
+        'positive': {
           _hue: 'cyan',
         },
-        caution: {
+        'caution': {
           _hue: 'yellow',
         },
-        critical: {
+        'critical': {
           _hue: 'red',
         },
       },
@@ -100,23 +100,23 @@ test('buildColorTheme: button', () => {
         bg: ['50', '900'],
         fg: ['800', '200'],
       },
-      transparent: {
+      'transparent': {
         bg: ['50', 'black'],
       },
-      default: {
+      'default': {
         bg: ['white', '950'],
         fg: ['black', '200'],
       },
-      primary: {
+      'primary': {
         _hue: 'purple',
       },
-      positive: {
+      'positive': {
         _hue: 'cyan',
       },
-      caution: {
+      'caution': {
         _hue: 'yellow',
       },
-      critical: {
+      'critical': {
         _hue: 'red',
       },
     },
@@ -127,7 +127,7 @@ test('buildColorTheme: button', () => {
             bg: ['500', '400'],
             fg: ['white', 'black'],
           },
-          hovered: {
+          'hovered': {
             bg: ['600', '300'],
           },
         },

package/src/theme/config/tokens/color/types.ts

@@ -21,15 +21,15 @@ export interface ThemeColorAvatarHueTokens {
 /** @public */
 export interface ThemeColorAvatarTokens {
   '*'?: ThemeColorAvatarHueTokens
-  gray?: ThemeColorAvatarHueTokens
-  blue?: ThemeColorAvatarHueTokens
-  purple?: ThemeColorAvatarHueTokens
-  magenta?: ThemeColorAvatarHueTokens
-  red?: ThemeColorAvatarHueTokens
-  orange?: ThemeColorAvatarHueTokens
-  yellow?: ThemeColorAvatarHueTokens
-  green?: ThemeColorAvatarHueTokens
-  cyan?: ThemeColorAvatarHueTokens
+  'gray'?: ThemeColorAvatarHueTokens
+  'blue'?: ThemeColorAvatarHueTokens
+  'purple'?: ThemeColorAvatarHueTokens
+  'magenta'?: ThemeColorAvatarHueTokens
+  'red'?: ThemeColorAvatarHueTokens
+  'orange'?: ThemeColorAvatarHueTokens
+  'yellow'?: ThemeColorAvatarHueTokens
+  'green'?: ThemeColorAvatarHueTokens
+  'cyan'?: ThemeColorAvatarHueTokens
 }
 
 /** @public */
@@ -66,11 +66,11 @@ export interface ThemeColorBadgeToneTokens {
 /** @public */
 export interface ThemeColorBadgeTokens {
   '*'?: ThemeColorBadgeToneTokens
-  default?: ThemeColorBadgeToneTokens
-  primary?: ThemeColorBadgeToneTokens
-  positive?: ThemeColorBadgeToneTokens
-  caution?: ThemeColorBadgeToneTokens
-  critical?: ThemeColorBadgeToneTokens
+  'default'?: ThemeColorBadgeToneTokens
+  'primary'?: ThemeColorBadgeToneTokens
+  'positive'?: ThemeColorBadgeToneTokens
+  'caution'?: ThemeColorBadgeToneTokens
+  'critical'?: ThemeColorBadgeToneTokens
 }
 
 /** @public */

package/src/theme/defaults/colorTokens.ts

@@ -22,11 +22,11 @@ export const defaultColorTokens: ThemeColorTokens = {
           icon: ['500', '500'],
           dot: ['500', '500'],
         },
-        positive: {
+        'positive': {
           bg: ['200 50%', '900'],
           fg: ['600', '500'],
         },
-        caution: {
+        'caution': {
           bg: ['200 50%', '900'],
           fg: ['600', '500'],
         },
@@ -63,26 +63,26 @@ export const defaultColorTokens: ThemeColorTokens = {
         to: ['100 50%', '900 50%'],
       },
     },
-    transparent: {
+    'transparent': {
       bg: ['50', 'black'],
     },
-    default: {
+    'default': {
       bg: ['white', '950'],
       fg: ['800', '200'],
       muted: {
         fg: ['600', '400'],
       },
     },
-    primary: {_hue: 'blue'},
-    positive: {
+    'primary': {_hue: 'blue'},
+    'positive': {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
     },
-    caution: {
+    'caution': {
       _hue: 'yellow',
       shadow: {outline: ['600/0.3', '500/0.4']},
     },
-    critical: {_hue: 'red'},
+    'critical': {_hue: 'red'},
   },
   button: {
     default: {
@@ -132,17 +132,17 @@ export const defaultColorTokens: ThemeColorTokens = {
             to: ['900 50%', '100 50%'],
           },
         },
-        hovered: {
+        'hovered': {
           bg: ['700', '300'],
           border: ['700/0', '300/0'],
         },
-        pressed: {
+        'pressed': {
           bg: ['700', '300'],
         },
-        selected: {
+        'selected': {
           bg: ['700', '300'],
         },
-        disabled: {
+        'disabled': {
           _hue: 'gray',
           accent: {
             fg: ['100 70%', '900 70%'],
@@ -182,7 +182,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
       },
-      default: {
+      'default': {
         '*': {
           avatar: {
             '*': {
@@ -197,13 +197,13 @@ export const defaultColorTokens: ThemeColorTokens = {
             fg: ['400', '600'],
           },
         },
-        hovered: {
+        'hovered': {
           bg: ['900', '100'],
         },
-        pressed: {
+        'pressed': {
           bg: ['black', 'white'],
         },
-        selected: {
+        'selected': {
           bg: ['black', 'white'],
         },
       },
@@ -255,19 +255,19 @@ export const defaultColorTokens: ThemeColorTokens = {
             to: ['100 50%', '900 50%'],
           },
         },
-        hovered: {
+        'hovered': {
           bg: ['100', '900'],
           fg: ['700', '300'],
         },
-        pressed: {
+        'pressed': {
           bg: ['100', '900'],
           fg: ['800', '200'],
         },
-        selected: {
+        'selected': {
           bg: ['100', '900'],
           fg: ['800', '200'],
         },
-        disabled: {
+        'disabled': {
           _hue: 'gray',
           accent: {
             fg: ['200', '800'],
@@ -308,12 +308,12 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
       },
-      positive: {
+      'positive': {
         '*': {
           border: ['600 20%', '800'],
         },
       },
-      caution: {
+      'caution': {
         '*': {
           border: ['600 20%', '800'],
         },
@@ -366,21 +366,21 @@ export const defaultColorTokens: ThemeColorTokens = {
             to: ['100 50%', '900 50%'],
           },
         },
-        hovered: {
+        'hovered': {
           bg: ['50', '950'],
           icon: ['700 70%', '400 70%'],
         },
-        pressed: {
+        'pressed': {
           bg: ['100', '900'],
           fg: ['800', '200'],
           icon: ['800 70%', '200 70%'],
         },
-        selected: {
+        'selected': {
           bg: ['100', '900'],
           fg: ['800', '200'],
           icon: ['800 60%', '200 60%'],
         },
-        disabled: {
+        'disabled': {
           _hue: 'gray',
           accent: {
             fg: ['200', '800'],
@@ -434,21 +434,21 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         placeholder: ['400', '600'],
       },
-      hovered: {
+      'hovered': {
         border: ['300', '700'],
       },
-      readOnly: {
+      'readOnly': {
         bg: ['50', '950'],
         border: ['200', '800'],
         fg: ['800', '200'],
       },
-      disabled: {
+      'disabled': {
         fg: ['400', '600'],
         border: ['100', '900'],
         placeholder: ['200', '800 50%'],
       },
     },
-    invalid: {
+    'invalid': {
       '*': {
         _hue: 'red',
         bg: ['100', '950'],
@@ -502,13 +502,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           to: ['100 50%', '900 50%'],
         },
       },
-      hovered: {
+      'hovered': {
         bg: ['50', '950'],
       },
-      pressed: {
+      'pressed': {
         bg: ['100', '900'],
       },
-      selected: {
+      'selected': {
         _blend: ['screen', 'multiply'],
         accent: {
           fg: ['purple/300', 'purple/700'],
@@ -553,7 +553,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           to: ['900 50%', '100 50%'],
         },
       },
-      disabled: {
+      'disabled': {
         _hue: 'gray',
         accent: {
           fg: ['200', '800'],
@@ -595,12 +595,12 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
       },
     },
-    default: {
+    'default': {
       selected: {
         _hue: 'blue',
       },
     },
-    critical: {
+    'critical': {
       disabled: {
         bg: ['50 50%', '950 50%'],
       },