@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

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

@@ -1,116 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable padding-line-between-statements, react/display-name */
-
-import {render, screen} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {useRef} from 'react'
-
-import {useClickOutsideEvent} from './useClickOutsideEvent'
-
-describe('useClickOutsideEvent', () => {
-  /**
-   * This suite demonstrates the new hook `useClickOutsideEvent` that replaces `useClickOutside`
-   */
-
-  it('calls the handler when clicking outside of the array of elements', async () => {
-    const user = userEvent.setup()
-    const handler = jest.fn()
-
-    const TestComponent = () => {
-      const buttonRef = useRef<HTMLButtonElement | null>(null)
-      const popoverRef = useRef<HTMLDivElement | null>(null)
-
-      useClickOutsideEvent(handler, () => [buttonRef.current, popoverRef.current])
-
-      return (
-        <>
-          <button data-testid="button" ref={buttonRef} />
-          <div data-testid="popover" ref={popoverRef} />
-          <div data-testid="outside" />
-        </>
-      )
-    }
-
-    render(<TestComponent />)
-
-    await user.click(screen.getByTestId('button'))
-    await user.click(screen.getByTestId('popover'))
-    expect(handler).not.toHaveBeenCalled()
-
-    await user.click(screen.getByTestId('outside'))
-    expect(handler).toHaveBeenCalledTimes(1)
-  })
-
-  it('the elements array flattens nested arrays one level deep', async () => {
-    const user = userEvent.setup()
-    const handler = jest.fn()
-
-    const TestComponent = () => {
-      const buttonRef = useRef<HTMLButtonElement | null>(null)
-      const popoverRef = useRef<HTMLDivElement | null>(null)
-
-      useClickOutsideEvent(handler, () => [
-        null,
-        [null, buttonRef.current],
-        [popoverRef.current, null],
-        null,
-      ])
-
-      return (
-        <>
-          <button data-testid="button" ref={buttonRef} />
-          <div data-testid="popover" ref={popoverRef} />
-          <div data-testid="outside" />
-        </>
-      )
-    }
-
-    render(<TestComponent />)
-
-    await user.click(screen.getByTestId('button'))
-    await user.click(screen.getByTestId('popover'))
-    expect(handler).not.toHaveBeenCalled()
-
-    await user.click(screen.getByTestId('outside'))
-    expect(handler).toHaveBeenCalledTimes(1)
-  })
-
-  it('it can set a boundary to scope outside click events', async () => {
-    const user = userEvent.setup()
-    const handler = jest.fn()
-
-    const TestComponent = () => {
-      const buttonRef = useRef<HTMLButtonElement | null>(null)
-      const popoverRef = useRef<HTMLDivElement | null>(null)
-      const boundaryRef = useRef<HTMLDivElement | null>(null)
-
-      useClickOutsideEvent(
-        handler,
-        () => [buttonRef.current, popoverRef.current],
-        () => boundaryRef.current,
-      )
-
-      return (
-        <>
-          <div ref={boundaryRef}>
-            <button data-testid="button" ref={buttonRef} />
-            <div data-testid="popover" ref={popoverRef} />
-            <div data-testid="inside" />
-          </div>
-          <div data-testid="outside" />
-        </>
-      )
-    }
-
-    render(<TestComponent />)
-
-    await user.click(screen.getByTestId('button'))
-    await user.click(screen.getByTestId('popover'))
-    // Since it's outside the boundary it should be ignored
-    await user.click(screen.getByTestId('outside'))
-    expect(handler).not.toHaveBeenCalled()
-
-    await user.click(screen.getByTestId('inside'))
-    expect(handler).toHaveBeenCalledTimes(1)
-  })
-})

package/src/core/hooks/useClickOutsideEvent.ts

@@ -1,72 +0,0 @@
-import {useDebugValue, useEffect} from 'react'
-import {useEffectEvent} from 'use-effect-event'
-import {EMPTY_ARRAY} from '../constants'
-
-/**
- * @public
- */
-export type ClickOutsideEventListener = (event: MouseEvent) => void
-
-/**
- * @public
- */
-export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
-
-/**
- * @public
- */
-export function useClickOutsideEvent(
-  listener: ClickOutsideEventListener | false | undefined,
-  elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,
-  boundaryElement?: () => HTMLElement | null,
-): void {
-  /**
-   * The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to
-   * juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.
-   */
-  const onEvent = useEffectEvent((evt: MouseEvent) => {
-    if (!listener) {
-      return
-    }
-
-    const target = evt.target
-
-    if (!(target instanceof Node)) {
-      return
-    }
-
-    const resolvedBoundaryElement = boundaryElement?.()
-
-    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
-      return
-    }
-
-    const elements = elementsArg().flat()
-
-    for (const el of elements) {
-      if (!el) continue
-
-      if (target === el || el.contains(target)) {
-        return
-      }
-    }
-
-    listener(evt)
-  })
-
-  const hasListener = Boolean(listener)
-
-  useEffect(() => {
-    if (!hasListener) return undefined
-
-    const handleEvent = (evt: MouseEvent) => onEvent(evt)
-
-    document.addEventListener('mousedown', handleEvent)
-
-    return () => {
-      document.removeEventListener('mousedown', handleEvent)
-    }
-  }, [hasListener, onEvent])
-
-  useDebugValue(listener ? 'MouseDown On' : 'MouseDown Off')
-}

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

@@ -1,67 +0,0 @@
-/** @jest-environment jsdom */
-
-import {renderHook, act} from '@testing-library/react'
-import {useDelayedState} from './useDelayedState'
-
-describe('useDelayedState', () => {
-  it('should update state immediately if delay is not provided', () => {
-    const {result} = renderHook(() => useDelayedState(false))
-    const [, setState] = result.current
-
-    act(() => {
-      setState(true)
-    })
-    expect(result.current[0]).toBe(true)
-  })
-
-  it('should update state after delay if delay is provided', async () => {
-    jest.useFakeTimers()
-    const {result} = renderHook(() => useDelayedState(false))
-    const [, setState] = result.current
-
-    act(() => {
-      setState(true, 1000)
-    })
-    expect(result.current[0]).toBe(false)
-    act(() => {
-      jest.advanceTimersByTime(500)
-    })
-    expect(result.current[0]).toBe(false)
-
-    act(() => {
-      jest.advanceTimersByTime(500)
-    })
-
-    expect(result.current[0]).toBe(true)
-  })
-
-  it('should update state with callback function', () => {
-    const {result} = renderHook(() => useDelayedState(false))
-    const [, setState] = result.current
-
-    act(() => {
-      setState((prev: boolean) => !prev)
-    })
-
-    expect(result.current[0]).toBe(true)
-  })
-
-  it('should cancel update if the set state was called with a new state', () => {
-    const {result} = renderHook(() => useDelayedState(false))
-    const [, setState] = result.current
-
-    act(() => {
-      setState(true, 1000)
-    })
-    expect(result.current[0]).toBe(false)
-
-    jest.advanceTimersByTime(500)
-
-    act(() => {
-      setState(false)
-    })
-    jest.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,29 +0,0 @@
-import {useRef} from 'react'
-import {useState, useCallback, SetStateAction} from 'react'
-
-/**
- * @beta
- */
-export function useDelayedState<S>(
-  initialState: S | (() => S),
-): [S, (nextState: SetStateAction<S>, delay?: number) => void] {
-  const [state, setState] = useState(initialState)
-  const delayedAction = useRef<NodeJS.Timeout | undefined>()
-
-  const onStateChange = useCallback((nextState: SetStateAction<S>, delay?: number) => {
-    const action = () => {
-      setState(nextState)
-    }
-
-    // A new state change has been initiated, cancel the previous one.
-    if (delayedAction.current) {
-      clearTimeout(delayedAction.current)
-      delayedAction.current = undefined
-    }
-
-    if (!delay) return action()
-    delayedAction.current = setTimeout(action, delay)
-  }, [])
-
-  return [state, onStateChange]
-}

package/src/core/hooks/useElementRect/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

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

@@ -1,31 +0,0 @@
-import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-import {Grid} from '../../../primitives'
-
-export default function ExampleStory() {
-  const [element, setElement] = useState<HTMLElement | null>(null)
-  const rect = useElementRect(element)
-  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
-
-  return (
-    <Box padding={[3, 4, 5]}>
-      <Container width={1}>
-        <Stack space={4}>
-          <Grid columns={[1, 2, 3]}>
-            <Card ref={setElement} tone="transparent">
-              <Text>rect</Text>
-            </Card>
-          </Grid>
-
-          <div style={{height: 11}}>
-            <Card scheme="dark" style={{position: 'absolute', ...size}} />
-          </div>
-
-          <Code language="json" size={1}>
-            {JSON.stringify(size)}
-          </Code>
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

package/src/core/hooks/useElementSize.ts

@@ -1,18 +0,0 @@
-import {useEffect, useState} from 'react'
-import {ElementSize, _elementSizeObserver} from '../observers/elementSizeObserver'
-
-/**
- * Subscribe to the size of a DOM element.
- * @beta
- */
-export function useElementSize(element: HTMLElement | null): ElementSize | null {
-  const [size, setSize] = useState<ElementSize | null>(null)
-
-  useEffect(() => {
-    if (!element) return undefined
-
-    return _elementSizeObserver.subscribe(element, setSize)
-  }, [element])
-
-  return size
-}

package/src/core/hooks/useForwardedRef.ts

@@ -1,19 +0,0 @@
-import {useImperativeHandle, useRef} from 'react'
-
-/**
- * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
- */
-export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
-  const innerRef = useRef<T | null>(null)
-
-  useImperativeHandle(ref, () => innerRef.current!)
-
-  return innerRef
-}

package/src/core/hooks/useGlobalKeyDown.ts

@@ -1,12 +0,0 @@
-import {useEffect} from 'react'
-
-/**
- * @beta
- */
-export function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {
-  return useEffect(() => {
-    addEventListener('keydown', onKeyDown)
-
-    return () => removeEventListener('keydown', onKeyDown)
-  }, [onKeyDown])
-}

package/src/core/hooks/useMatchMedia.ts

@@ -1,46 +0,0 @@
-import {useDebugValue, useMemo, 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://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-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)
-}

package/src/core/hooks/useMediaIndex/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

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

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

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

@@ -1,101 +0,0 @@
-import {useMemo, useSyncExternalStore} from 'react'
-import {useTheme_v2} from '../../theme'
-
-/**
- * @internal
- */
-export interface _MediaStore {
-  subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
-}
-
-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.
- * @beta
- */
-export function useMediaIndex(): number {
-  const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
-
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
-}

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

@@ -1,57 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * 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/core/hooks/usePrefersDark.test.tsx

@@ -1,18 +0,0 @@
-/** @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/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://react.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)
-}