@sanity/ui 4.0.0-beta.8 → 4.0.0-next.0

package/src/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,111 +0,0 @@
-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/useMounted.ts

@@ -1,15 +0,0 @@
-import {useSyncExternalStore} 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 {
-  return useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false,
-  )
-}
-
-const subscribe = () => () => {}

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

@@ -1,56 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/** @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

@@ -1,16 +0,0 @@
-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

@@ -1,56 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/** @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

@@ -1,16 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,114 +0,0 @@
-/**
- * @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

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

package/src/primitives/_syntax/Syntax.tsx

@@ -1,26 +0,0 @@
-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 : ''}
-    />
-  )
-}