@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/hooks/useMatchMedia.ts

@@ -0,0 +1,28 @@
+import {useCallback, useDebugValue, 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://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * @public
+ */
+export function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean {
+  useDebugValue(mediaQueryString)
+
+  return useSyncExternalStore(
+    useCallback(
+      (onStoreChange) => {
+        const media = window.matchMedia(mediaQueryString)
+        media.addEventListener('change', onStoreChange)
+        return () => media.removeEventListener('change', onStoreChange)
+      },
+      [mediaQueryString],
+    ),
+    () => window.matchMedia(mediaQueryString).matches,
+    getServerSnapshot,
+  )
+}

package/src/hooks/useMediaIndex/__workshop__/Test.tsx

@@ -0,0 +1,14 @@
+import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
+
+export default function TestStory(): React.JSX.Element {
+  const mediaIndex = useMediaIndex()
+
+  return (
+    <Card padding={5}>
+      <Stack gap={3}>
+        <Text weight="medium">The current media index is {mediaIndex}.</Text>
+        <Text muted>Try resizing the browser.</Text>
+      </Stack>
+    </Card>
+  )
+}

package/src/hooks/useMediaIndex/__workshop__/index.ts

@@ -0,0 +1,16 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'hooks/use-media-index',
+  title: 'useMediaIndex',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: lazy(() => import('./Test')),
+    },
+  ],
+}
+
+export default scope

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

@@ -0,0 +1,21 @@
+/** @jest-environment node */
+
+import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
+
+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(<Log />)).toBe('mediaIndex: 0')
+  })
+  it(`SSR to markup for hydration doesn't throw`, () => {
+    expect(renderToString(<Log />)).toBe('mediaIndex: <!-- -->0')
+  })
+})

package/src/hooks/useMediaIndex/useMediaIndex.ts

@@ -0,0 +1,111 @@
+import {type Breakpoint, BREAKPOINTS} from '@sanity/ui-css'
+import {useMemo, useSyncExternalStore} from 'react'
+
+/**
+ * @internal
+ */
+export interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => Breakpoint
+}
+
+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(index: number): MediaQuery {
+  if (index === 0) {
+    return `screen and (max-width: ${BREAKPOINTS[index + 1] - 1}px)`
+  }
+
+  if (index === BREAKPOINTS.length - 1) {
+    return `screen and (min-width: ${BREAKPOINTS[index]}px)`
+  }
+
+  return `screen and (min-width: ${BREAKPOINTS[index]}px) and (max-width: ${BREAKPOINTS[index + 1] - 1}px)`
+}
+
+function _createMediaStore(): _MediaStore {
+  const mediaLen = BREAKPOINTS.length
+
+  let sizes:
+    | {
+        index: number
+        mq: MediaQueryList
+      }[]
+    | undefined = undefined
+
+  // 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 (typeof window === 'undefined') {
+      return sizes
+    }
+
+    if (!sizes) {
+      sizes = []
+
+      for (let index = mediaLen; index > -1; index -= 1) {
+        sizes.push({
+          index,
+          mq: window.matchMedia(_getMediaQuery(index)),
+        })
+      }
+    }
+
+    return sizes
+  }
+
+  const getSnapshot = () => {
+    for (const {index, mq} of getSizes() ?? []) {
+      if (mq.matches) return index as Breakpoint
+    }
+
+    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(): Breakpoint {
+  return 0
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useMediaIndex(): Breakpoint {
+  const store = useMemo(() => _createMediaStore(), [])
+
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
+}

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

@@ -0,0 +1,56 @@
+/**
+ * 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 {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
+
+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: vi.fn(),
+        removeEventListener: vi.fn(),
+        matches: true,
+      }) as unknown as MediaQueryList
+  })
+
+  afterAll(() => {
+    window.matchMedia = originalMatchMedia
+  })
+
+  it(`hydrates without any warnings`, async () => {
+    const spy = vi.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,20 @@
+/** @jest-environment node */
+import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
+
+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 />)).toBe('dark: <!-- -->false')
+  })
+})

package/src/hooks/usePrefersDark.ts

@@ -0,0 +1,16 @@
+import {useMatchMedia} from './useMatchMedia'
+
+/**
+ * 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://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
+ *
+ * @public
+ */
+export function usePrefersDark(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
+}

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

@@ -0,0 +1,56 @@
+/**
+ * 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 {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
+
+import {usePrefersReducedMotion} from './usePrefersReducedMotion'
+
+function Log() {
+  const reduceMotion = usePrefersReducedMotion()
+
+  return <>prefers-motion: {JSON.stringify(reduceMotion)}</>
+}
+
+const originalMatchMedia = window.matchMedia
+
+describe('usePrefersReducedMotion SSR hydration', () => {
+  beforeAll(() => {
+    window.matchMedia = () =>
+      ({
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        matches: true,
+      }) as unknown as MediaQueryList
+  })
+
+  afterAll(() => {
+    window.matchMedia = originalMatchMedia
+  })
+
+  it(`hydrates without any warnings`, async () => {
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
+
+    const node = document.createElement('div')
+
+    document.body.appendChild(node)
+
+    node.innerHTML = `prefers-motion: <!-- -->false`
+
+    hydrateRoot(node, <Log />)
+
+    // It's false initially
+    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->false'))
+
+    // After hydration it should switch to true
+    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->true'))
+
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled()
+
+    spy.mockReset()
+    spy.mockRestore()
+  })
+})

package/src/hooks/usePrefersReducedMotion.test.tsx

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

package/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,16 @@
+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://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(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
+}

package/src/hooks/useResponsiveProp.ts

@@ -0,0 +1,14 @@
+import type {ResponsiveProp, ResponsivePropArray} from '@sanity/ui-css'
+
+import {_getResponsiveProp} from '../core/helpers/props'
+
+/**
+ * @internal
+ * @deprecated use `_getResponsiveProp` directly instead
+ */
+export function useResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: ResponsivePropArray<T>,
+): ResponsivePropArray<T> {
+  return _getResponsiveProp(val, defaultVal)
+}

package/src/hooks/useUnique.ts

@@ -0,0 +1,54 @@
+import {useMemo, useRef} from 'react'
+
+/**
+ * Shallow equality check for objects and arrays
+ * @internal
+ */
+function shallowEqual<T>(a: T, b: T): boolean {
+  if (a === b) return true
+  if (typeof a !== 'object' || typeof b !== 'object') return false
+  if (a === null || b === null) return false
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    return a.every((item, index) => item === b[index])
+  }
+
+  const keysA = Object.keys(a as object)
+  const keysB = Object.keys(b as object)
+
+  if (keysA.length !== keysB.length) return false
+
+  return keysA.every(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(b, key) &&
+      (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key],
+  )
+}
+
+/**
+ * Hook that returns a stable reference when the value is shallowly equal
+ * Prevents unnecessary re-renders and re-registrations
+ *
+ * @deprecated prefer `useMemo` in the wrapping component instead
+ *
+ * @internal
+ * @param value - The value to stabilize
+ * @returns Stable reference to the value
+ */
+export function useUnique<T>(value: T): T {
+  const ref = useRef<T>(value)
+
+  // Use useMemo to compute the stable value
+  // Intentionally accessing and updating ref for memoization
+  return useMemo(() => {
+    // eslint-disable-next-line react-hooks/refs
+    if (shallowEqual(ref.current, value)) {
+      // eslint-disable-next-line react-hooks/refs
+      return ref.current
+    }
+    // eslint-disable-next-line react-hooks/refs
+    ref.current = value
+    return value
+  }, [value])
+}

package/src/middleware/origin.ts

@@ -0,0 +1,47 @@
+import type {Middleware} from '@floating-ui/react-dom'
+
+/**
+ * Custom floating-ui middleware which calculates transform-origin X + Y offsets
+ * based on the current floating rect's dimensions and shift offset.
+ *
+ * Scaling popovers with these transform-origin offsets will give the effect of
+ * popvers slightly 'growing' from the origin/reference element.
+ *
+ * This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.
+ */
+export const origin: Middleware = {
+  name: '@sanity/ui/origin',
+  fn({middlewareData, placement, rects}) {
+    const [side] = placement.split('-')
+
+    const floatingWidth = rects.floating.width
+    const floatingHeight = rects.floating.height
+
+    const shiftX = middlewareData.shift?.x || 0
+    const shiftY = middlewareData.shift?.y || 0
+
+    if (floatingWidth <= 0 || floatingHeight <= 0) {
+      return {}
+    }
+
+    const isVerticalPlacement = ['bottom', 'top'].includes(side)
+
+    const {originX, originY}: {originX: number; originY: number} = isVerticalPlacement
+      ? {
+          originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+          originY: side === 'bottom' ? 0 : 1,
+        }
+      : {
+          originX: side === 'left' ? 1 : 0,
+          originY: clamp(0.5 - shiftY / floatingHeight, 0, 1),
+        }
+
+    return {
+      data: {originX, originY},
+    }
+  },
+}
+
+function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max)
+}

package/src/observers/elementSize.ts

@@ -0,0 +1,114 @@
+/**
+ * @beta
+ */
+export interface ElementRectValue {
+  width: number
+  height: number
+}
+
+/**
+ * @beta
+ */
+export interface ElementSize {
+  content: ElementRectValue
+  border: ElementRectValue
+
+  /** @deprecated INTERNAL ONLY */
+  _contentRect: DOMRectReadOnly
+}
+
+/**
+ * @internal
+ */
+export type _ElementSizeSubscriber = (elementRect: ElementSize) => void
+
+/**
+ * @internal
+ */
+export interface _ElementSizeObserver {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+}
+
+/**
+ * @internal
+ */
+export interface _ElementSizeListener {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+}
+
+// Initialize element size observer
+// NOTE: this should NOT have size effects
+/**
+ * @internal
+ */
+export const _elementSizeObserver: _ElementSizeObserver = _createElementSizeObserver()
+
+function _createElementRectValueListener(): _ElementSizeListener {
+  return {
+    subscribe(element, subscriber) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        subscriber({
+          _contentRect: entry.contentRect,
+          border: {
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize,
+          },
+          content: {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          },
+        })
+      })
+
+      resizeObserver.observe(element)
+
+      return () => {
+        resizeObserver.unobserve(element)
+        resizeObserver.disconnect()
+      }
+    },
+  }
+}
+
+function _createElementSizeObserver(): _ElementSizeObserver {
+  const disposeCache = new WeakMap<HTMLElement, () => void>()
+  const subscribersCache = new WeakMap<HTMLElement, _ElementSizeSubscriber[]>()
+
+  return {
+    subscribe(element, subscriber) {
+      const subscribers = subscribersCache.get(element) || []
+
+      let dispose = disposeCache.get(element)
+
+      if (!subscribersCache.has(element)) {
+        subscribersCache.set(element, subscribers)
+
+        const listener = _createElementRectValueListener()
+
+        // listen
+        dispose = listener.subscribe(element, (elementRect) => {
+          for (const sub of subscribers) {
+            sub(elementRect)
+          }
+        })
+      }
+
+      subscribers.push(subscriber)
+
+      return () => {
+        // dispose
+
+        const idx = subscribers.indexOf(subscriber)
+
+        if (idx > -1) {
+          subscribers.splice(idx, 1)
+        }
+
+        if (subscribers.length === 0) {
+          // unlisten
+          if (dispose) dispose()
+        }
+      }
+    },
+  }
+}

package/src/primitives/_syntax/LazySyntax.tsx

@@ -0,0 +1,4 @@
+import {lazy} from 'react'
+
+/** @internal */
+export const LazySyntax = lazy(() => import('./Syntax'))

package/src/primitives/_syntax/Syntax.tsx

@@ -0,0 +1,26 @@
+import {_syntax} from '@sanity/ui-css'
+import {hasLanguage, Refractor} from 'react-refractor'
+
+export interface SyntaxProps {
+  language?: string
+  value: React.ReactNode
+}
+
+export default function Syntax(props: SyntaxProps): React.JSX.Element {
+  const {language: languageProp, value} = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+  const registered = language ? hasLanguage(language) : false
+
+  if (!language || !registered) {
+    return <code>{value}</code>
+  }
+
+  return (
+    <Refractor
+      className={_syntax()}
+      inline
+      language={language}
+      value={typeof value === 'string' ? value : ''}
+    />
+  )
+}