@sanity/ui 2.6.5 → 2.6.7-canary.0

package/src/core/hooks/usePrefersDark.ts

@@ -1,61 +1,16 @@
-import {useSyncExternalStore} from 'react'
-
-let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-/**
- * Lazy init the matchMedia instance
- */
-function getMatchMedia(): MediaQueryList {
-  if (!MEDIA_QUERY_CACHE) {
-    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-    // the `window` global is available and we're in a browser environment
-    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-color-scheme: dark)')
-  }
-
-  return MEDIA_QUERY_CACHE
-}
-
-/**
- * As the query is the same for all instances of this hook, we can cache the matchMedia instance
- * and have cheap `change` event listeners, while getSnapshot always reads from the same
- * matchMedia instance and we don't get any tearing.
- * Tearing in this context means the bad edge case in React concurrent render mdoe
- * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
- * during the same render.
- * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
- * what React.memo boundaries there might be between the layers..
- */
-function subscribe(onStoreChange: () => void): () => void {
-  const matchMedia = getMatchMedia()
-
-  matchMedia.addEventListener('change', onStoreChange)
-
-  return () => matchMedia.removeEventListener('change', onStoreChange)
-}
-
-/**
- * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
- * It's important that this function does not create new objects or arrays when called:
- * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
- */
-function getSnapshot() {
-  return getMatchMedia().matches
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
- * Only called during server-side rendering, and hydration if using hydrateRoot
- * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
- * and we assume `(prefers-color-scheme: light)` since it's the most common scheme
+ * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
  *
- * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
- */
-function getServerSnapshot() {
-  return false
-}
-
-/**
  * @public
  */
-export function usePrefersDark(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersDark(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
 }

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,62 +1,16 @@
-import {useSyncExternalStore} from 'react'
-
-let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-/**
- * Lazy init the matchMedia instance
- */
-function getMatchMedia(): MediaQueryList {
-  if (!MEDIA_QUERY_CACHE) {
-    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-    // the `window` global is available and we're in a browser environment
-    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-reduced-motion: reduce)')
-  }
-
-  return MEDIA_QUERY_CACHE
-}
-
-/**
- * As the query is the same for all instances of this hook, we can cache the matchMedia instance
- * and have cheap `change` event listeners, while getSnapshot always reads from the same
- * matchMedia instance and we don't get any tearing.
- * Tearing in this context means the bad edge case in React concurrent render mdoe
- * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
- * during the same render.
- * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
- * what React.memo boundaries there might be between the layers..
- */
-function subscribe(onStoreChange: () => void): () => void {
-  const matchMedia = getMatchMedia()
-
-  matchMedia.addEventListener('change', onStoreChange)
-
-  return () => matchMedia.removeEventListener('change', onStoreChange)
-}
-
-/**
- * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
- * It's important that this function does not create new objects or arrays when called:
- * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
- */
-function getSnapshot() {
-  return getMatchMedia().matches
-}
-
-/**
- * Only called during server-side rendering, and hydration if using hydrateRoot
- * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
- * and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme
- *
- * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
- */
-function getServerSnapshot() {
-  return false
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
  * Returns true if motion should be reduced
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
+ * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ *
  * @public
  */
-export function usePrefersReducedMotion(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
 }

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -1,7 +1,7 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
@@ -20,8 +20,8 @@ export default function AlignedStory() {
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
+  const popoverElementRef = useRef<HTMLDivElement | null>(null)
 
   const content = (
     <Text>
@@ -39,9 +39,11 @@ export default function AlignedStory() {
   )
 
   const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
-  const handleClose = useCallback(() => setOpen(false), [])
 
-  useClickOutside(handleClose, [buttonElement, popoverElement])
+  useClickOutside(
+    () => setOpen(false),
+    () => [buttonElementRef.current, popoverElementRef.current],
+  )
 
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
@@ -56,14 +58,14 @@ export default function AlignedStory() {
             padding={3}
             portal={portal}
             placement={placement}
-            ref={setPopoverElement}
+            ref={popoverElementRef}
             width={width}
           >
             <Button
               icon={EllipsisVerticalIcon}
               mode="bleed"
               onClick={handleToggleOpen}
-              ref={setButtonElement}
+              ref={buttonElementRef}
               selected={open}
             />
           </Popover>

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

@@ -10,7 +10,7 @@ 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 = {
@@ -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/tooltip.tsx

@@ -268,6 +268,9 @@ export const Tooltip = forwardRef(function Tooltip(
     [childProp?.props, handleIsOpenChange],
   )
 
+  // Handle closing the tooltip when the mouse leaves the referenceElement
+  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+
   // Close when `disabled` changes to `true`
   useEffect(() => {
     if (disabled && showTooltip) handleIsOpenChange(false)
@@ -298,9 +301,6 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [handleIsOpenChange, showTooltip])
 
-  // Handle closing the tooltip when the mouse leaves the referenceElement
-  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
-
   // // Set the max width of the tooltip based on boundaries and portals
   useLayoutEffect(() => {
     // Get the maximum tooltip width (sans tooltip padding)
@@ -446,7 +446,7 @@ function useCloseOnMouseLeave({
   // 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) => {
+  const onMouseMove = useEffectEvent((target: EventTarget | null, teardown: () => void) => {
     if (!referenceElement) return
 
     const isHoveringReference =
@@ -454,6 +454,8 @@ function useCloseOnMouseLeave({
 
     if (!isHoveringReference) {
       handleIsOpenChange(false)
+      // Allow removing the event listener eagerly, to avoid race conditions
+      teardown()
     }
   })
 
@@ -464,7 +466,7 @@ function useCloseOnMouseLeave({
     if (!showTooltip) return
 
     const handleMouseMove = (event: MouseEvent) => {
-      onMouseMove(event.target)
+      onMouseMove(event.target, () => window.removeEventListener('mousemove', handleMouseMove))
     }
 
     window.addEventListener('mousemove', handleMouseMove)

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/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,4 @@
 import {useMemo} from 'react'
-import {useUnique} from '../../hooks/_internal'
 import {useMounted} from '../../hooks/useMounted'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -24,10 +23,10 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
+  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,

package/src/core/hooks/_internal/index.ts

@@ -1 +0,0 @@
-export * from './useUnique'

package/src/core/hooks/_internal/useUnique.ts

@@ -1,34 +0,0 @@
-import {useRef} from 'react'
-
-/**
- * This is a React hook to make sure that a record identity is the same on every render. Uses strict
- * equality comparison (eg by identity), and only goes one level deep.
- *
- * @internal
- */
-type Comparable = Record<string | number | symbol, unknown> | undefined | null
-
-export function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}
-
-function _isEqual(objA: Comparable, objB: Comparable): boolean {
-  if (!objA || !objB) {
-    return objA === objB
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  return keysA.every((key) => objA[key] === objB[key])
-}