@sanity/ui 2.6.3 → 2.6.4-canary.1

package/src/core/primitives/tooltip/constants.ts

@@ -8,16 +8,16 @@ export const DEFAULT_TOOLTIP_DISTANCE = 4
 export const DEFAULT_TOOLTIP_PADDING = 4
 
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
+  'top': ['top-end', 'top-start', 'bottom', 'left', 'right'],
   'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
   'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
-  bottom: ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
+  'bottom': ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
   'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
   'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
-  left: ['left-end', 'left-start', 'right', 'top', 'bottom'],
+  'left': ['left-end', 'left-start', 'right', 'top', 'bottom'],
   'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
   'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
-  right: ['right-end', 'right-start', 'left', 'top', 'bottom'],
+  'right': ['right-end', 'right-start', 'left', 'top', 'bottom'],
   'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
   'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
 }

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

@@ -20,12 +20,13 @@ import {
   useRef,
   useState,
   useId,
-  useSyncExternalStore,
   useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
+import {useEffectEvent} from 'use-effect-event'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {useMounted} from '../../hooks/useMounted'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import type {Placement} from '../../types'
@@ -134,23 +135,21 @@ 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,
-  )
+  const mounted = useMounted()
   // 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,
+      portalElement?.offsetWidth || mounted
+        ? 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,
     ]
 
     return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
-  }, [boundaryElement, documentBodyOffsetWidth, portalElement?.offsetWidth])
+  }, [boundaryElement, mounted, portalElement])
 
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
@@ -285,32 +284,6 @@ 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])
-
   // Close when `disabled` changes to `true`
   useEffect(() => {
     if (disabled && showTooltip) handleIsOpenChange(false)
@@ -340,6 +313,10 @@ export const Tooltip = forwardRef(function Tooltip(
       window.removeEventListener('keydown', handleWindowKeyDown)
     }
   }, [handleIsOpenChange, showTooltip])
+
+  // Handle closing the tooltip when the mouse leaves the referenceElement
+  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
       arrowRef.current = arrowEl
@@ -454,4 +431,42 @@ 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 handleWindowMouseMove = useEffectEvent((event: MouseEvent) => {
+    if (!referenceElement) return
+
+    const isHoveringReference =
+      referenceElement === event.target ||
+      (event.target instanceof Node && referenceElement.contains(event.target))
+
+    if (!isHoveringReference) {
+      handleIsOpenChange(false)
+    }
+  })
+
+  // 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
+
+    window.addEventListener('mousemove', handleWindowMouseMove)
+
+    return () => window.removeEventListener('mousemove', handleWindowMouseMove)
+  }, [handleWindowMouseMove, 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/core/utils/portal/portalProvider.tsx

@@ -1,5 +1,6 @@
-import {useMemo, useSyncExternalStore} from 'react'
+import {useMemo} from 'react'
 import {useUnique} from '../../hooks/_internal'
+import {useMounted} from '../../hooks/useMounted'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -25,22 +26,16 @@ export interface PortalProviderProps {
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => document.body,
-    () => null,
-  )
+  const mounted = useMounted()
 
   const value: PortalContextValue = useMemo(() => {
     return {
       version: 0.0,
       boundaryElement: boundaryElement || null,
-      element: element || fallbackElement,
+      element: element || mounted ? document.body : null,
       elements,
     }
-  }, [boundaryElement, element, elements, fallbackElement])
+  }, [boundaryElement, element, elements, mounted])
 
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }
-
-const emptySubscribe = () => () => {}

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%'],
       },