@sanity/ui 4.0.0-v4.1 → 4.0.1

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

@@ -1,21 +0,0 @@
-/** @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 />)).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
-  })
-})

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,107 +0,0 @@
-import {type Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
-import {useMemo, useSyncExternalStore} from 'react'
-
-const media = Object.values(BREAKPOINTS)
-
-/**
- * @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(media: number[], index: number): MediaQuery {
-  if (index === 0) {
-    return `screen and (max-width: ${media[index + 1] - 1}px)`
-  }
-
-  if (index === media.length - 1) {
-    return `screen and (min-width: ${media[index]}px)`
-  }
-
-  return `screen and (min-width: ${media[index]}px) and (max-width: ${media[index + 1] - 1}px)`
-}
-
-function _createMediaStore(): _MediaStore {
-  const mediaLen = media.length
-
-  let sizes: {mq: MediaQueryList; index: number}[] | 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) {
-        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 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/core/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/core/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/core/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 />)).toMatchInlineSnapshot(`"dark: <!-- -->false"`)
-  })
-})

package/src/core/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/core/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/core/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 />)).toMatchInlineSnapshot(`"prefers-motion: <!-- -->false"`)
-  })
-})

package/src/core/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/core/hooks/useResponsiveProp.ts

@@ -1,28 +0,0 @@
-import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {useState} from 'react'
-
-import {_getResponsiveProp} from '../helpers/props'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function useResponsiveProp<T>(
-  val: ResponsiveProp<T> | undefined,
-  defaultVal?: Partial<Record<Breakpoint, T>>,
-): Partial<Record<Breakpoint, T>> {
-  const [[cachedVal, cachedHash], setCache] = useState<[Partial<Record<Breakpoint, T>>, string]>(
-    () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)],
-  )
-
-  const hash = JSON.stringify(val ?? defaultVal)
-
-  if (hash !== cachedHash) {
-    // If the cached hash has changed, update the cache right away.
-    // Calling setState during render is fine in this case, and preferred over a useEffect loop
-    // https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getResponsiveProp(val, defaultVal), hash])
-  }
-
-  return cachedVal
-}

package/src/core/index.ts

@@ -1,118 +0,0 @@
-// components
-export * from './components/autocomplete/Autocomplete'
-export * from './components/autocomplete/types'
-export * from './components/breadcrumbs/Breadcrumbs'
-export * from './components/dialog/Dialog'
-export * from './components/dialog/DialogContext'
-export * from './components/dialog/DialogProvider'
-export * from './components/dialog/types'
-export * from './components/dialog/useDialog'
-export * from './components/hotkeys/Hotkeys'
-export * from './components/menu/Menu'
-export * from './components/menu/MenuButton'
-export * from './components/menu/MenuDivider'
-export * from './components/menu/MenuGroup'
-export * from './components/menu/MenuItem'
-export * from './components/tab/Tab'
-export * from './components/tab/TabList'
-export * from './components/tab/TabPanel'
-export * from './components/toast/Toast'
-export * from './components/toast/ToastProvider'
-export * from './components/toast/types'
-export * from './components/toast/useToast'
-export * from './components/tree/Tree'
-export * from './components/tree/TreeItem'
-export * from './components/tree/types'
-export * from './components/tree/useTree'
-export * from './components/virtualList/VirtualList'
-
-// helpers
-export * from './helpers/animation'
-export * from './helpers/element'
-export * from './helpers/focus'
-export * from './helpers/props'
-export * from './helpers/scroll'
-
-// hooks
-export * from './hooks/useClickOutsideEvent'
-export * from './hooks/useCustomValidity'
-export * from './hooks/useElementSize'
-export * from './hooks/useGlobalKeyDown'
-export * from './hooks/useMatchMedia'
-export * from './hooks/useMediaIndex/useMediaIndex'
-export * from './hooks/usePrefersDark'
-export * from './hooks/usePrefersReducedMotion'
-export * from './hooks/useResponsiveProp'
-
-// observers
-export * from './observers/elementSize'
-export * from './observers/resize'
-
-// primitives
-export * from './primitives/arrow/Arrow'
-export * from './primitives/avatar/Avatar'
-export * from './primitives/avatar/AvatarCounter'
-export * from './primitives/avatar/AvatarStack'
-export * from './primitives/avatar/types'
-export * from './primitives/badge/Badge'
-export * from './primitives/box/Box'
-export * from './primitives/button/Button'
-export * from './primitives/button/types'
-export * from './primitives/card/Card'
-export * from './primitives/card/CardProvider'
-export * from './primitives/card/types'
-export * from './primitives/card/useCard'
-export * from './primitives/checkbox/Checkbox'
-export * from './primitives/code/Code'
-export * from './primitives/container/Container'
-export * from './primitives/container/types'
-export * from './primitives/flex/Flex'
-export * from './primitives/grid/Grid'
-export * from './primitives/heading/Heading'
-export * from './primitives/inline/Inline'
-export * from './primitives/kbd/Kbd'
-export * from './primitives/label/Label'
-export * from './primitives/layer/Layer'
-export * from './primitives/layer/LayerProvider'
-export * from './primitives/layer/types'
-export * from './primitives/layer/useLayer'
-export * from './primitives/popover/Popover'
-export * from './primitives/popover/types'
-export * from './primitives/radio/Radio'
-export * from './primitives/select/Select'
-export * from './primitives/selectable/Selectable'
-export * from './primitives/skeleton/CodeSkeleton'
-export * from './primitives/skeleton/HeadingSkeleton'
-export * from './primitives/skeleton/LabelSkeleton'
-export * from './primitives/skeleton/Skeleton'
-export * from './primitives/skeleton/TextSkeleton'
-export * from './primitives/spinner/Spinner'
-export * from './primitives/srOnly/SrOnly'
-export * from './primitives/stack/Stack'
-export * from './primitives/switch/Switch'
-export * from './primitives/text/Text'
-export * from './primitives/textArea/TextArea'
-export * from './primitives/textInput/TextInput'
-export * from './primitives/tooltip/Tooltip'
-export * from './primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupContext'
-export * from './primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupProvider'
-export * from './primitives/tooltip/tooltipDelayGroup/types'
-export * from './primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup'
-
-// utils
-export * from './utils/boundaryElement/BoundaryElementProvider'
-export * from './utils/boundaryElement/types'
-export * from './utils/boundaryElement/useBoundaryElement'
-export * from './utils/elementQuery/ElementQuery'
-export * from './utils/ErrorBoundary'
-export * from './utils/portal/Portal'
-export * from './utils/portal/PortalProvider'
-export * from './utils/portal/types'
-export * from './utils/portal/usePortal'
-
-// root
-export * from './Root'
-export * from './RootProvider'
-
-// types
-export * from './types'

package/src/core/lib/createGlobalScopedContext.ts

@@ -1,37 +0,0 @@
-/**
- * As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
- * it's critical that vital react contexts are shared even when there is a duplicate.
- * If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
- * those libraries enforce single instances.
- * Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
- * read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
- * It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
- */
-
-import {type Context, createContext} from 'react'
-
-import {globalScope} from './globalScope'
-
-export function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(
-  /**
-   * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
-   */
-  key: `@sanity/ui/v3/${string}`,
-  defaultValue: T,
-): Context<ContextType> {
-  const symbol = Symbol.for(key)
-
-  /**
-   * Prevent errors about re-renders on React SSR on Next.js App Router
-   */
-  if (typeof document === 'undefined') {
-    return createContext<ContextType>(defaultValue)
-  }
-
-  // Use the global scope as a map of symbols to contexts
-  const symbolMap = globalScope as Record<symbol, Context<ContextType>>
-
-  symbolMap[symbol] = symbolMap[symbol] || createContext<T>(defaultValue)
-
-  return symbolMap[symbol]
-}

package/src/core/lib/globalScope.ts

@@ -1,19 +0,0 @@
-/**
- * Gets the global scope instance in a given environment.
- *
- * The strategy is to return the most modern, and if not, the most common:
- * - The `globalThis` variable is the modern approach to accessing the global scope
- * - The `window` variable is the global scope in a web browser
- * - The `self` variable is the global scope in workers and others
- * - The `global` variable is the global scope in Node.js
- */
-function getGlobalScope() {
-  if (typeof globalThis !== 'undefined') return globalThis
-  if (typeof window !== 'undefined') return window
-  if (typeof self !== 'undefined') return self
-  if (typeof global !== 'undefined') return global
-
-  throw new Error('@sanity/ui: could not locate global scope')
-}
-
-export const globalScope: typeof globalThis = getGlobalScope()

package/src/core/lib/isArray.ts

@@ -1,3 +0,0 @@
-export function isArray(val: unknown): val is unknown[] {
-  return Array.isArray(val)
-}

package/src/core/lib/isRecord.ts

@@ -1,3 +0,0 @@
-export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
-}

package/src/core/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)
-}