@sanity/ui 2.6.6 → 2.6.7

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

@@ -20,11 +20,10 @@ 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'
@@ -86,8 +85,9 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)`
+const Root = styled(Layer)<{$maxWidth: number}>`
   pointer-events: none;
+  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -127,7 +127,6 @@ 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)
 
@@ -135,6 +134,24 @@ 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[] = []
 
@@ -268,8 +285,31 @@ export const Tooltip = forwardRef(function Tooltip(
     [childProp?.props, handleIsOpenChange],
   )
 
-  // Handle closing the tooltip when the mouse leaves the referenceElement
-  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+  // 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(() => {
@@ -300,20 +340,6 @@ 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
@@ -376,11 +402,9 @@ export const Tooltip = forwardRef(function Tooltip(
       data-ui="Tooltip"
       {...restProps}
       ref={setFloating}
-      style={{
-        ...floatingStyles,
-        maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : undefined,
-      }}
+      style={floatingStyles}
       zOffset={zOffset}
+      $maxWidth={tooltipWidth}
     >
       <TooltipCard
         {...restProps}
@@ -430,47 +454,4 @@ export const Tooltip = forwardRef(function 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
- */
-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])
-}
+const emptySubscribe = () => () => {}

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