@sanity/ui 2.6.7-canary.0 → 2.6.8-canary.0

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,16 +1,62 @@
-import {useMatchMedia} from './useMatchMedia'
+import {useSyncExternalStore} from 'react'
+
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**
- * 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
+ * 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
+}
+
+/**
+ * Returns true if motion should be reduced
  * @public
  */
-export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, 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, useRef, useState} from 'react'
+import {useCallback, 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 buttonElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
   const content = (
     <Text>
@@ -39,11 +39,9 @@ export default function AlignedStory() {
   )
 
   const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
 
-  useClickOutside(
-    () => setOpen(false),
-    () => [buttonElementRef.current, popoverElementRef.current],
-  )
+  useClickOutside(handleClose, [buttonElement, popoverElement])
 
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
@@ -58,14 +56,14 @@ export default function AlignedStory() {
             padding={3}
             portal={portal}
             placement={placement}
-            ref={popoverElementRef}
+            ref={setPopoverElement}
             width={width}
           >
             <Button
               icon={EllipsisVerticalIcon}
               mode="bleed"
               onClick={handleToggleOpen}
-              ref={buttonElementRef}
+              ref={setButtonElement}
               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 {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 const PORTAL_OPTIONS = {
@@ -30,15 +30,13 @@ 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={__unstable_elements}>
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+      }}
+    >
       <Flex align="center" height="fill" justify="center">
         <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
           <Card

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

@@ -36,7 +36,6 @@ 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,7 +91,6 @@ 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,21 +1,19 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {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={__unstable_elements}>
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+        portal2: portal2Element,
+        portal3: portal3Element,
+      }}
+    >
       <Container width={1}>
         <Card height="fill" padding={4}>
           <Stack space={2}>

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

@@ -1,5 +1,5 @@
-import {useMemo} from 'react'
-import {useMounted} from '../../hooks/useMounted'
+import {useMemo, useSyncExternalStore} from 'react'
+import {useUnique} from '../../hooks/_internal'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -23,18 +23,24 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elements} = props
-  const mounted = useMounted()
+  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
+  const elements = useUnique(elementsProp)
+  const fallbackElement = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body,
+    () => null,
+  )
 
-  // @TODO split out into separate contexts
   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/core/hooks/useMatchMedia.ts

@@ -1,46 +0,0 @@
-import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
-
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean {
-  const {subscribe, getSnapshot} = useMemo(() => {
-    /**
-     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
-     * we don't want to eagerly instantiate it to ensure it's only created when actually used
-     */
-    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-    const 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(mediaQueryString)
-      }
-
-      return MEDIA_QUERY_CACHE
-    }
-
-    return {
-      subscribe: (onStoreChange: () => void): (() => void) => {
-        const matchMedia = getMatchMedia()
-
-        matchMedia.addEventListener('change', onStoreChange)
-
-        return () => matchMedia.removeEventListener('change', onStoreChange)
-      },
-      getSnapshot: () => getMatchMedia().matches,
-    }
-  }, [mediaQueryString])
-
-  useDebugValue(mediaQueryString)
-
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
-}