@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/core/constants.ts

@@ -77,3 +77,9 @@ export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | '
   bottom: 'top',
   left: 'right',
 }
+
+export const Z_OFFSETS = {
+  dialog: 600,
+  popover: 400,
+  tooltip: 200,
+}

package/src/core/helpers/props.ts

@@ -1,4 +1,8 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+
 import {EMPTY_ARRAY} from '../constants'
+import {isArray} from '../lib/isArray'
+import {isRecord} from '../lib/isRecord'
 
 /**
  * @internal
@@ -8,3 +12,17 @@ export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[
 
   return Array.isArray(val) ? val : [val]
 }
+
+/**
+ * @internal
+ */
+export function _getResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>> {
+  if (val === undefined) {
+    return (defaultVal || EMPTY_ARRAY) as Partial<Record<Breakpoint, T>>
+  }
+
+  return (isArray(val) || isRecord(val) ? val : [val]) as Partial<Record<Breakpoint, T>>
+}

package/src/core/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './useMatchMedia'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './usePrefersReducedMotion'
+export * from './useResponsiveProp'

package/src/core/hooks/useArrayProp.ts

@@ -2,14 +2,11 @@ import {useState} from 'react'
 
 import {_getArrayProp} from '../helpers'
 
-/** @beta */
-// export type ArrayPropPrimitive = string | number | boolean | undefined | null
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
+ * @deprecated Use `useResponsiveProp` instead.
  */
-// export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
 export function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
   const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
     _getArrayProp(val, defaultVal),

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

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {MutableRefObject, useEffect, useRef, useState} from 'react'
+import {type MutableRefObject, useEffect, useRef, useState} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutside} from './useClickOutside'
 
@@ -16,7 +15,7 @@ describe('useClickOutside', () => {
    */
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
@@ -45,7 +44,7 @@ describe('useClickOutside', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
@@ -74,7 +73,7 @@ describe('useClickOutside', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
@@ -114,7 +113,7 @@ describe('useClickOutside', () => {
      * Thus it makes sense to unit test it to ensure it works as expected and we don't accidentally break backwards compatibility.
      */
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = (props: {open?: true}) => {
       const {open = false} = props
@@ -155,7 +154,7 @@ describe('useClickOutside', () => {
      * Since we don't want people to use the `setElement` pattern, test that userland can handle dynamically changing elements arrays
      */
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = (props: {open?: true}) => {
       const {open = false} = props
@@ -199,7 +198,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -229,7 +228,7 @@ describe('useClickOutside', () => {
      * If a mixture of refs and state is used it can appear like it's working correctly,
      * but this is a side-effect, not an indication it's safe.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
@@ -254,7 +253,7 @@ describe('useClickOutside', () => {
     /**
      * Unrelated state updates can create the same false impression of safety.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -306,7 +305,7 @@ describe('useClickOutside', () => {
 
       return elements
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -337,7 +336,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -368,7 +367,7 @@ describe('useClickOutside', () => {
      * If a mixture of refs and state is used it can appear like it's working correctly,
      * but this is a side-effect, not an indication it's safe.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
@@ -398,7 +397,7 @@ describe('useClickOutside', () => {
     /**
      * Unrelated state updates can create the same false impression of safety.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -451,7 +450,7 @@ describe('useClickOutside', () => {
 
       return element
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)

package/src/core/hooks/useClickOutside.ts

@@ -2,14 +2,10 @@ import {useEffect, useRef, useState} from 'react'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
 function _getElements(

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

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {useRef} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutsideEvent} from './useClickOutsideEvent'
 
@@ -13,7 +12,7 @@ describe('useClickOutsideEvent', () => {
 
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -42,7 +41,7 @@ describe('useClickOutsideEvent', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -76,7 +75,7 @@ describe('useClickOutsideEvent', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)

package/src/core/hooks/useClickOutsideEvent.ts

@@ -3,19 +3,13 @@ import {useEffectEvent} from 'use-effect-event'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export function useClickOutsideEvent(
   listener: ClickOutsideEventListener | false | undefined,
   elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,

package/src/core/hooks/useDelayed.test.ts

@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
 import {act, renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useDelayedState} from './useDelayedState'
 
@@ -16,7 +15,7 @@ describe('useDelayedState', () => {
   })
 
   it('should update state after delay if delay is provided', async () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
     const {result} = renderHook(() => useDelayedState(false))
     const [, setState] = result.current
 
@@ -25,12 +24,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
     expect(result.current[0]).toBe(false)
 
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
 
     expect(result.current[0]).toBe(true)
@@ -56,12 +55,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
 
-    jest.advanceTimersByTime(500)
+    vi.advanceTimersByTime(500)
 
     act(() => {
       setState(false)
     })
-    jest.advanceTimersByTime(600)
+    vi.advanceTimersByTime(600)
     // Even after 1.1 seconds, the state should continue being false, because it was cancelled by a next setState call
     expect(result.current[0]).toBe(false)
   })

package/src/core/hooks/useDelayedState.ts

@@ -1,4 +1,4 @@
-import {SetStateAction, useCallback, useRef, useState} from 'react'
+import {type SetStateAction, useCallback, useRef, useState} from 'react'
 
 /**
  * @beta

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -11,7 +11,7 @@ export default function ExampleStory() {
   return (
     <Box padding={[3, 4, 5]}>
       <Container width={1}>
-        <Stack space={4}>
+        <Stack gap={4}>
           <Grid columns={[1, 2, 3]}>
             <Card ref={setElement} tone="transparent">
               <Text>rect</Text>

package/src/core/hooks/useElementSize.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
 
-import {_elementSizeObserver, ElementSize} from '../observers/elementSizeObserver'
+import {_elementSizeObserver, type ElementSize} from '../observers/elementSizeObserver'
 
 /**
  * Subscribe to the size of a DOM element.

package/src/core/hooks/useForwardedRef.ts

@@ -1,4 +1,4 @@
-import {ForwardedRef, MutableRefObject, useImperativeHandle, useRef} from 'react'
+import {type ForwardedRef, type MutableRefObject, useImperativeHandle, useRef} from 'react'
 
 /**
  * @beta

package/src/core/hooks/useMatchMedia.ts

@@ -1,4 +1,4 @@
-import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
+import {useCallback, useDebugValue, useSyncExternalStore} from 'react'
 
 /**
  * Efficiently subscribes to `window.matchMedia` queries
@@ -11,36 +11,18 @@ 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)
+  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/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -5,7 +5,7 @@ export default function TestStory() {
 
   return (
     <Card padding={[3, 4, 5]}>
-      <Stack space={2}>
+      <Stack gap={2}>
         <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>

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

@@ -1,13 +1,10 @@
 /** @jest-environment node */
 
-import {buildTheme} from '@sanity/ui/theme'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
-import {ThemeProvider} from '../../_compat'
 import {useMediaIndex} from './useMediaIndex'
 
-const theme = buildTheme()
-
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -16,21 +13,9 @@ function Log() {
 
 describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
-    expect(
-      renderToStaticMarkup(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toBe('mediaIndex: 0')
+    expect(renderToStaticMarkup(<Log />)).toBe('mediaIndex: 0')
   })
   it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(
-      renderToString(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
   })
 })

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

@@ -1,13 +1,14 @@
+import {type Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
 import {useMemo, useSyncExternalStore} from 'react'
 
-import {useTheme_v2} from '../../_compat'
+const media = Object.values(BREAKPOINTS)
 
 /**
  * @internal
  */
 export interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 type MediaQueryMinWidth = `(min-width: ${number}px)`
@@ -17,17 +18,17 @@ type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQ
 
 function _getMediaQuery(media: number[], index: number): MediaQuery {
   if (index === 0) {
-    return `screen and (max-width: ${media[index] - 1}px)`
+    return `screen and (max-width: ${media[index + 1] - 1}px)`
   }
 
-  if (index === media.length) {
-    return `screen and (min-width: ${media[index - 1]}px)`
+  if (index === media.length - 1) {
+    return `screen and (min-width: ${media[index]}px)`
   }
 
-  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+  return `screen and (min-width: ${media[index]}px) and (max-width: ${media[index + 1] - 1}px)`
 }
 
-function _createMediaStore(media: number[]): _MediaStore {
+function _createMediaStore(): _MediaStore {
   const mediaLen = media.length
   let sizes: {mq: MediaQueryList; index: number}[]
 
@@ -50,7 +51,7 @@ function _createMediaStore(media: number[]): _MediaStore {
 
   const getSnapshot = () => {
     for (const {index, mq} of getSizes()) {
-      if (mq.matches) return index
+      if (mq.matches) return index as Breakpoint
     }
 
     return 0
@@ -86,7 +87,7 @@ function _createMediaStore(media: number[]): _MediaStore {
  *
  * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
  */
-function getServerSnapshot() {
+function getServerSnapshot(): Breakpoint {
   return 0
 }
 
@@ -94,9 +95,8 @@ function getServerSnapshot() {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useMediaIndex(): number {
-  const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
+export function useMediaIndex(): Breakpoint {
+  const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

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

@@ -1,10 +1,10 @@
-/** @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 {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 
@@ -20,8 +20,8 @@ describe('usePrefersDark SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +31,7 @@ describe('usePrefersDark SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

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

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 

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

@@ -1,10 +1,10 @@
-/** @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 {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 
@@ -20,8 +20,8 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +31,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

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

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 

package/src/core/hooks/useResponsiveProp.ts

@@ -0,0 +1,28 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+import {useState} from 'react'
+
+import {_getResponsiveProp} from '../helpers'
+
+/**
+ * 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

@@ -4,6 +4,5 @@ export * from './helpers'
 export * from './hooks'
 export * from './observers'
 export * from './primitives'
-export * from './StyleTags'
 export * from './types'
 export * from './utils'

package/src/core/lib/isArray.ts

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

package/src/core/middleware/origin.ts

@@ -1,4 +1,4 @@
-import {Middleware} from '@floating-ui/react-dom'
+import type {Middleware} from '@floating-ui/react-dom'
 
 /**
  * Custom floating-ui middleware which calculates transform-origin X + Y offsets