@sanity/ui 2.6.4-canary.0 → 2.6.4-canary.2

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

@@ -10,13 +10,13 @@ import {
   Tooltip,
 } from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 const PORTAL_OPTIONS = {
   '(true)': true,
   '(false)': false,
-  portal1: 'portal1',
+  'portal1': 'portal1',
 }
 
 export default function CustomPortalStory() {
@@ -30,13 +30,15 @@ export default function CustomPortalStory() {
 
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+    }),
+    [portal1Element],
+  )
 
   return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-      }}
-    >
+    <PortalProvider __unstable_elements={__unstable_elements}>
       <Flex align="center" height="fill" justify="center">
         <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
           <Card

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

@@ -24,6 +24,7 @@ import {
   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 {origin} from '../../middleware/origin'
@@ -288,33 +289,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.)
-  // @TODO is this necessary?
-  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)
@@ -344,6 +318,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
@@ -456,3 +434,43 @@ 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 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/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -36,6 +36,7 @@ export function TooltipDelayGroupProvider(
   const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
   const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
 
+  // @TODO split out into separate contexts
   const value: TooltipDelayGroupContextValue = useMemo(
     () => ({
       isGroupActive: isGroupActive,

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/layer/layerProvider.tsx

@@ -91,6 +91,7 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   // Register this layer on mount
   useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
 
+  // @TODO split out into separate contexts
   const value: LayerContextValue = useMemo(
     () => ({
       version: 0.0,

package/src/core/utils/portal/__workshop__/named.tsx

@@ -1,19 +1,21 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 
 export default function NamedStory() {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
   const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+      portal2: portal2Element,
+      portal3: portal3Element,
+    }),
+    [portal1Element, portal2Element, portal3Element],
+  )
 
   return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-        portal2: portal2Element,
-        portal3: portal3Element,
-      }}
-    >
+    <PortalProvider __unstable_elements={__unstable_elements}>
       <Container width={1}>
         <Card height="fill" padding={4}>
           <Stack space={2}>

package/src/core/utils/portal/portalProvider.tsx

@@ -1,5 +1,5 @@
-import {useMemo, useSyncExternalStore} from 'react'
-import {useUnique} from '../../hooks/_internal'
+import {useMemo} from 'react'
+import {useMounted} from '../../hooks/useMounted'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -23,25 +23,18 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
-  // @TODO check up sebmarkbage tweet on useSyncExternalStore that detects if it was hydrated instead of skipping getServerSnapshot
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => document.body,
-    () => null,
-  )
+  const {boundaryElement, children, element, __unstable_elements: elements} = props
+  const mounted = useMounted()
 
+  // @TODO split out into separate contexts
   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 */