@sanity/ui 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -49,7 +49,7 @@
     "@sanity/color": "^2.2.0",
     "@sanity/icons": "^2.2.0",
     "csstype": "^3.1.1",
-    "framer-motion": "^7.10.3",
+    "framer-motion": "^8.1.1",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {

package/src/components/toast/toastProvider.tsx

@@ -1,19 +1,18 @@
 import {AnimatePresence, motion} from 'framer-motion'
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState, startTransition} from 'react'
 import styled from 'styled-components'
+import {useMounted} from '../../hooks/useMounted'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastContextValue, ToastParams} from './types'
 
-interface ToastState {
-  toasts: {
-    dismiss: () => void
-    id: string
-    params: ToastParams
-  }[]
-}
+type ToastState = {
+  dismiss: () => void
+  id: string
+  params: ToastParams
+}[]
 
 /**
  * @public
@@ -51,25 +50,29 @@ let toastId = 0
  */
 export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
-  const [state, setState] = useState<ToastState>({toasts: []})
+  const [state, _setState] = useState<ToastState>([])
+
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
 
   const push = useCallback((params: ToastParams) => {
+    // Wrap setState in startTransition to allow React to give input state updates higher priority
+    const setState: typeof _setState = (state) => startTransition(() => _setState(state))
+
     const id = params.id || String(toastId++)
     const duration = params.duration || 5000
 
     const dismiss = () => {
       const timeoutId = toastsRef.current[id]?.timeoutId
 
-      setState((prevState) => {
-        const idx = prevState.toasts.findIndex((t) => t.id === id)
+      setState((prevState): ToastState => {
+        const idx = prevState.findIndex((t) => t.id === id)
 
         if (idx > -1) {
-          const toasts = prevState.toasts.slice(0)
+          const toasts = prevState.slice(0)
 
           toasts.splice(idx, 1)
 
-          return {...prevState, toasts}
+          return toasts
         }
 
         return prevState
@@ -81,19 +84,16 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       }
     }
 
-    setState((prevState) => {
-      return {
-        ...prevState,
-        toasts: prevState.toasts
-          .filter((t) => t.id !== id)
-          .concat([
-            {
-              dismiss,
-              id,
-              params: {...params, duration},
-            },
-          ]),
-      }
+    setState((prevState): ToastState => {
+      return prevState
+        .filter((t) => t.id !== id)
+        .concat([
+          {
+            dismiss,
+            id,
+            params: {...params, duration},
+          },
+        ])
     })
 
     if (toastsRef.current[id]) {
@@ -119,37 +119,40 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   )
 
   const value: ToastContextValue = useMemo(() => ({version: 0.0, push}), [push])
+  const mounted = useMounted()
 
   return (
     <ToastContext.Provider value={value}>
       {children}
 
-      <Root data-ui="ToastProvider" zOffset={zOffset}>
-        <ToastContainer>
-          <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
-            <AnimatePresence initial={false}>
-              {state.toasts.map(({dismiss, id, params}) => (
-                <motion.div
-                  animate={{opacity: 1, y: 0, scale: 1}}
-                  exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
-                  initial={{opacity: 0, y: 32, scale: 0.25}}
-                  key={id}
-                  layout="position"
-                  transition={{type: 'spring', damping: 30, stiffness: 400}}
-                >
-                  <Toast
-                    closable={params.closable}
-                    description={params.description}
-                    onClose={dismiss}
-                    status={params.status}
-                    title={params.title}
-                  />
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </Box>
-        </ToastContainer>
-      </Root>
+      {mounted && (
+        <Root data-ui="ToastProvider" zOffset={zOffset}>
+          <ToastContainer>
+            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
+              <AnimatePresence initial={false}>
+                {state.map(({dismiss, id, params}) => (
+                  <motion.div
+                    animate={{opacity: 1, y: 0, scale: 1}}
+                    exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
+                    initial={{opacity: 0, y: 32, scale: 0.25}}
+                    key={id}
+                    layout="position"
+                    transition={{type: 'spring', damping: 30, stiffness: 400}}
+                  >
+                    <Toast
+                      closable={params.closable}
+                      description={params.description}
+                      onClose={dismiss}
+                      status={params.status}
+                      title={params.title}
+                    />
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </Box>
+          </ToastContainer>
+        </Root>
+      )}
     </ToastContext.Provider>
   )
 }

package/src/hooks/useArrayProp.ts

@@ -12,7 +12,8 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[]
 ): T[] {
-  const __perf_hash__ = JSON.stringify(val ?? defaultVal)
+  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
 
   return useMemo(
     () => _getArrayProp(val, defaultVal),

package/src/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -0,0 +1,31 @@
+/** @jest-environment node */
+import {renderToString, renderToStaticMarkup} from 'react-dom/server'
+import {studioTheme, ThemeProvider} from '../../theme'
+import {useMediaIndex} from './useMediaIndex'
+
+function Log() {
+  const mediaIndex = useMediaIndex()
+
+  return <>mediaIndex: {JSON.stringify(mediaIndex)}</>
+}
+
+describe('useMediaIndex', () => {
+  it(`SSR to static markup returns 0`, () => {
+    expect(
+      renderToStaticMarkup(
+        <ThemeProvider theme={studioTheme}>
+          <Log />
+        </ThemeProvider>
+      )
+    ).toBe('mediaIndex: 0')
+  })
+  it(`SSR to markup for hydration doesn't throw`, () => {
+    expect(
+      renderToString(
+        <ThemeProvider theme={studioTheme}>
+          <Log />
+        </ThemeProvider>
+      )
+    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+  })
+})

package/src/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,6 +1,95 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useSyncExternalStore} from 'react'
 import {useTheme} from '../../theme'
-import {_getMediaManager} from './lib/media'
+
+/**
+ * @internal
+ */
+export interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => number
+}
+
+const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()
+
+type MediaQueryMinWidth = `(min-width: ${number}px)`
+type MediaQueryMaxWidth = `(max-width: ${number}px)`
+type MediaQueryMinMaxWidth = `${MediaQueryMinWidth} and ${MediaQueryMaxWidth}`
+type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQueryMinMaxWidth}`
+
+function _getMediaQuery(media: number[], index: number): MediaQuery {
+  if (index === 0) {
+    return `screen and (max-width: ${media[index] - 1}px)`
+  }
+
+  if (index === media.length) {
+    return `screen and (min-width: ${media[index - 1]}px)`
+  }
+
+  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+}
+
+function _createMediaStore(media: number[]): _MediaStore {
+  const mediaLen = media.length
+  let sizes: {mq: MediaQueryList; index: number}[]
+
+  // The _createMediaStore function is called in both server and client environments.
+  // However since subscribe and getSnapshot are only called on the client we lazy init what we need for them
+  // so that we don't need to run checks for wether it's safe to call `window.matchMedia`
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = []
+
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index)
+
+        sizes.push({index, mq: window.matchMedia(mediaQuery)})
+      }
+    }
+
+    return sizes
+  }
+
+  const getSnapshot = () => {
+    for (const {index, mq} of getSizes()) {
+      if (mq.matches) return index
+    }
+
+    return 0
+  }
+
+  const subscribe = (onStoreChange: () => void) => {
+    const disposeFns: (() => void)[] = []
+
+    for (const {mq} of getSizes()) {
+      const handleChange = () => {
+        if (mq.matches) onStoreChange()
+      }
+
+      mq.addEventListener('change', handleChange)
+
+      disposeFns.push(() => mq.removeEventListener('change', handleChange))
+    }
+
+    return () => {
+      for (const disposeFn of disposeFns) {
+        disposeFn()
+      }
+    }
+  }
+
+  return {getSnapshot, subscribe}
+}
+
+/**
+ * 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
+ *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return 0
+}
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -9,10 +98,13 @@ import {_getMediaManager} from './lib/media'
 export function useMediaIndex(): number {
   const theme = useTheme()
   const {media} = theme.sanity
-  const manager = useMemo(() => _getMediaManager(media), [media])
-  const [index, setIndex] = useState(manager.getCurrentIndex)
 
-  useEffect(() => manager.subscribe(setIndex), [manager])
+  let store = MEDIA_STORE_CACHE.get(media)
+
+  if (!store) {
+    store = _createMediaStore(media)
+    MEDIA_STORE_CACHE.set(media, store)
+  }
 
-  return index
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/hooks/useMounted.ts

@@ -0,0 +1,14 @@
+import {useEffect, useReducer} from 'react'
+
+/**
+ * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.
+ * @public
+ */
+export function useMounted(): boolean {
+  // Use useReducer instead of useState as it's more low-level and creates the least amount of functions for the garbage collector to clean up
+  const [mounted, mount] = useReducer(() => true, false)
+
+  useEffect(mount, [mount])
+
+  return mounted
+}

package/src/hooks/usePrefersDark.hydration.test.tsx

@@ -0,0 +1,56 @@
+/** @jest-environment jsdom */
+/**
+ * As this hook is used for top-level theming it's likely to be called while server-rendering
+ * and that's why it's worth it to have a testing suite for hydration
+ */
+import {waitFor} from '@testing-library/dom'
+import {hydrateRoot} from 'react-dom/client'
+
+import {usePrefersDark} from './usePrefersDark'
+
+function Log() {
+  const dark = usePrefersDark()
+
+  return <>dark: {JSON.stringify(dark)}</>
+}
+
+const originalMatchMedia = window.matchMedia
+
+describe('usePrefersDark SSR hydration', () => {
+  beforeAll(() => {
+    window.matchMedia = () =>
+      ({
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        matches: true,
+      } as any)
+  })
+
+  afterAll(() => {
+    window.matchMedia = originalMatchMedia
+  })
+
+  it(`hydrates without any warnings`, async () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation()
+
+    const node = document.createElement('div')
+
+    document.body.appendChild(node)
+
+    node.innerHTML = `dark: <!-- -->false`
+
+    hydrateRoot(node, <Log />)
+
+    // It's false initially
+    await waitFor(() => expect(node.innerHTML).toBe('dark: <!-- -->false'))
+
+    // After hydration it should switch to true
+    await waitFor(() => expect(node.innerHTML).toBe('dark: <!-- -->true'))
+
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled()
+
+    spy.mockReset()
+    spy.mockRestore()
+  })
+})

package/src/hooks/usePrefersDark.test.tsx

@@ -0,0 +1,18 @@
+/** @jest-environment node */
+import {renderToString, renderToStaticMarkup} from 'react-dom/server'
+import {usePrefersDark} from './usePrefersDark'
+
+function Log() {
+  const dark = usePrefersDark()
+
+  return <>dark: {JSON.stringify(dark)}</>
+}
+
+describe('usePrefersDark', () => {
+  it(`SSR to static markup returns false`, () => {
+    expect(renderToStaticMarkup(<Log />)).toBe('dark: false')
+  })
+  it(`SSR to markup for hydration doesn't throw`, () => {
+    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"dark: <!-- -->false"`)
+  })
+})

package/src/hooks/usePrefersDark.ts

@@ -1,28 +1,61 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useSyncExternalStore} from 'react'
+
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**
- * @public
+ * Lazy init the matchMedia instance
  */
-export function usePrefersDark(): boolean {
-  const mq = useMemo(() => {
-    if (typeof window === 'undefined') return undefined
-
-    return window.matchMedia('(prefers-color-scheme: dark)')
-  }, [])
-
-  const [dark, setDark] = useState(mq?.matches || false)
+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
+}
 
-  useEffect(() => {
-    if (!mq) return undefined
+/**
+ * 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()
 
-    setDark(mq.matches)
+  matchMedia.addEventListener('change', onStoreChange)
 
-    const handleChange = () => setDark(mq.matches)
+  return () => matchMedia.removeEventListener('change', onStoreChange)
+}
 
-    mq.addEventListener('change', handleChange)
+/**
+ * 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
+}
 
-    return () => mq.removeEventListener('change', handleChange)
-  }, [mq])
+/**
+ * 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
+ *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return false
+}
 
-  return dark
+/**
+ * @public
+ */
+export function usePrefersDark(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

package/src/observers/resizeObserver.ts

@@ -4,6 +4,6 @@ import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'
  * @internal
  */
 export const _ResizeObserver: typeof ResizeObserver =
-  typeof window !== 'undefined' && window.ResizeObserver
+  typeof document !== 'undefined' && window.ResizeObserver
     ? window.ResizeObserver
     : ResizeObserverPolyfill

package/src/utils/portal/portalContext.ts

@@ -11,7 +11,7 @@ export const defaultContextValue: PortalContextValue = {
   version: 0.0,
   boundaryElement: null,
   get element() {
-    if (typeof window === 'undefined') {
+    if (typeof document === 'undefined') {
       return null
     }
 

package/src/utils/portal/portalProvider.tsx

@@ -19,7 +19,7 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-const __BROWSER__ = typeof window !== 'undefined'
+const __BROWSER__ = typeof document !== 'undefined'
 
 /**
  * @public

package/src/hooks/useMediaIndex/lib/media.ts

@@ -1,88 +0,0 @@
-/**
- * @internal
- */
-export interface _MediaManager {
-  getCurrentIndex: () => number
-  subscribe: (subscriber: (index: number) => void) => () => void
-}
-
-const MEDIA_MANAGER_CACHE = new WeakMap<number[], _MediaManager>()
-
-function _getMediaQuery(media: number[], index: number) {
-  if (index === 0) {
-    return `screen and (max-width: ${media[index] - 1}px)`
-  }
-
-  if (index === media.length) {
-    return `screen and (min-width: ${media[index - 1]}px)`
-  }
-
-  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
-}
-
-function _createMediaManager(media: number[]): _MediaManager {
-  const mediaLen = media.length
-  const sizes: {mq: MediaQueryList; index: number}[] = []
-
-  if (typeof window !== 'undefined') {
-    for (let index = mediaLen; index > -1; index -= 1) {
-      const mediaQuery = _getMediaQuery(media, index)
-
-      sizes.push({index, mq: window.matchMedia(mediaQuery)})
-    }
-  }
-
-  const getCurrentIndex = () => {
-    for (const {index, mq} of sizes) {
-      if (mq.matches) return index
-    }
-
-    return 0
-  }
-
-  const subscribe = (subscriber: (index: number) => void) => {
-    const disposeFns: (() => void)[] = []
-
-    for (const {index, mq} of sizes) {
-      const handleChange = () => {
-        if (mq.matches) subscriber(index)
-      }
-
-      if (mq.addEventListener) {
-        mq.addEventListener('change', handleChange)
-      } else {
-        mq.addListener(handleChange)
-      }
-
-      disposeFns.push(() => {
-        if (mq.removeEventListener) {
-          mq.removeEventListener('change', handleChange)
-        } else {
-          mq.removeListener(handleChange)
-        }
-      })
-    }
-
-    return () => {
-      for (const disposeFn of disposeFns) {
-        disposeFn()
-      }
-    }
-  }
-
-  return {getCurrentIndex, subscribe}
-}
-
-/**
- * @internal
- */
-export function _getMediaManager(media: number[]): _MediaManager {
-  let manager = MEDIA_MANAGER_CACHE.get(media)
-
-  if (!manager) {
-    manager = _createMediaManager(media)
-    MEDIA_MANAGER_CACHE.set(media, manager)
-  }
-
-  return manager
-}