@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/src/core/constants.ts

@@ -1,67 +0,0 @@
-import type {Transition, Variant} from 'framer-motion'
-
-export const EMPTY_ARRAY: never[] = []
-
-export const EMPTY_RECORD: Record<string, never> = {}
-
-const POPOVER_MOTION_DURATION = 0.2
-
-/**
- * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
- */
-export const POPOVER_MOTION_PROPS: {
-  card: {
-    initial: Variant
-    hidden: Variant
-    visible: Variant
-    scaleIn: Variant
-    scaleOut: Variant
-  }
-  children: {
-    hidden: Variant
-    visible: Variant
-  }
-  transition: Transition
-} = {
-  card: {
-    initial: {
-      scale: 0.97,
-      willChange: 'transform',
-    },
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        duration: POPOVER_MOTION_DURATION / 2,
-      },
-    },
-    scaleIn: {
-      scale: 1,
-    },
-    scaleOut: {
-      scale: 0.97,
-    },
-  },
-  children: {
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-    },
-  },
-  transition: {
-    type: 'spring',
-    visualDuration: POPOVER_MOTION_DURATION,
-    bounce: 0.25,
-  },
-}
-
-export const Z_OFFSETS = {
-  dialog: 600,
-  popover: 400,
-  tooltip: 200,
-}

package/src/core/helpers/animation.ts

@@ -1,27 +0,0 @@
-/**
- * @internal
- */
-export function _raf(fn: () => void): () => void {
-  const frameId = requestAnimationFrame(fn)
-
-  return () => {
-    cancelAnimationFrame(frameId)
-  }
-}
-
-/**
- * @internal
- */
-export function _raf2(fn: () => void): () => void {
-  let innerDispose: (() => void) | null = null
-
-  const outerDispose = _raf(() => {
-    innerDispose = _raf(fn)
-  })
-
-  return () => {
-    if (innerDispose) innerDispose()
-
-    outerDispose()
-  }
-}

package/src/core/helpers/element.ts

@@ -1,55 +0,0 @@
-/**
- * @internal
- */
-export function _isEnterToClickElement(element: HTMLElement): boolean {
-  return isHTMLAnchorElement(element) || isHTMLButtonElement(element)
-}
-
-/**
- * @internal
- */
-export function isHTMLElement(node: unknown): node is HTMLElement {
-  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE
-}
-
-/**
- * @internal
- */
-export function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement {
-  return isHTMLElement(element) && element.nodeName === 'A'
-}
-
-/**
- * @internal
- */
-export function isHTMLInputElement(element: unknown): element is HTMLInputElement {
-  return isHTMLElement(element) && element.nodeName === 'INPUT'
-}
-
-/**
- * @internal
- */
-export function isHTMLButtonElement(element: unknown): element is HTMLButtonElement {
-  return isHTMLElement(element) && element.nodeName === 'BUTTON'
-}
-
-/**
- * @internal
- */
-export function isHTMLSelectElement(element: unknown): element is HTMLSelectElement {
-  return isHTMLElement(element) && element.nodeName === 'SELECT'
-}
-
-/**
- * @internal
- */
-export function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {
-  return isHTMLElement(element) && element.nodeName === 'TEXTAREA'
-}
-
-/**
- * @internal
- */
-export function containsOrEqualsElement(element: HTMLElement, node: Node): boolean {
-  return element.contains(node) || element === node
-}

package/src/core/helpers/focus.ts

@@ -1,92 +0,0 @@
-import {
-  isHTMLAnchorElement,
-  isHTMLButtonElement,
-  isHTMLElement,
-  isHTMLInputElement,
-  isHTMLSelectElement,
-  isHTMLTextAreaElement,
-} from './element'
-
-/**
- * @internal
- */
-export function _hasFocus(element: HTMLElement): boolean {
-  return Boolean(document.activeElement) && element.contains(document.activeElement)
-}
-
-/**
- * @internal
- */
-export function isFocusable(element: HTMLElement): boolean {
-  if (
-    element.tabIndex > 0 ||
-    (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)
-  ) {
-    return true
-  }
-
-  if (isHTMLAnchorElement(element)) {
-    return Boolean(element.href) && element.rel !== 'ignore'
-  }
-
-  if (isHTMLInputElement(element)) {
-    return element.type !== 'hidden' && element.type !== 'file' && !element.disabled
-  }
-
-  if (
-    isHTMLButtonElement(element) ||
-    isHTMLSelectElement(element) ||
-    isHTMLTextAreaElement(element)
-  ) {
-    return !element.disabled
-  }
-
-  return false
-}
-
-/**
- * @internal
- */
-export function attemptFocus(element: HTMLElement): boolean {
-  if (!isFocusable(element)) {
-    return false
-  }
-
-  try {
-    element.focus()
-  } catch {
-    // ignore
-  }
-
-  return document.activeElement === element
-}
-
-/**
- * @internal
- */
-export function focusFirstDescendant(element: HTMLElement): boolean {
-  for (let i = 0; i < element.childNodes.length; i++) {
-    const child = element.childNodes[i]
-
-    if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {
-      return true
-    }
-  }
-
-  return false
-}
-
-/**
- * @internal
- */
-export function focusLastDescendant(element: HTMLElement): boolean {
-  for (let i = element.childNodes.length - 1; i >= 0; i--) {
-    const child = element.childNodes[i]
-
-    if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {
-      return true
-    }
-  }
-
-  return false
-}

package/src/core/helpers/props.ts

@@ -1,28 +0,0 @@
-import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-
-import {EMPTY_ARRAY} from '../constants'
-import {isArray} from '../lib/isArray'
-import {isRecord} from '../lib/isRecord'
-
-/**
- * @internal
- */
-export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY
-
-  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/helpers/scroll.ts

@@ -1,15 +0,0 @@
-/**
- * @internal
- */
-export function _isScrollable(el: Node): boolean {
-  if (!(el instanceof Element)) return false
-
-  const style = window.getComputedStyle(el)
-
-  return (
-    style.overflowX.includes('auto') ||
-    style.overflowX.includes('scroll') ||
-    style.overflowY.includes('auto') ||
-    style.overflowY.includes('scroll')
-  )
-}

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

@@ -1,114 +0,0 @@
-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'
-
-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 = vi.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 = vi.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 = vi.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,67 +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])
-
-  useDebugValue(listener ? 'MouseDown On' : 'MouseDown Off')
-}

package/src/core/hooks/useCustomValidity.ts

@@ -1,13 +0,0 @@
-import {useEffect} from 'react'
-
-/**
- * @beta
- */
-export function useCustomValidity(
-  ref: {current: null | {setCustomValidity: (validity: string) => void}},
-  customValidity: string | undefined,
-): void {
-  useEffect(() => {
-    ref.current?.setCustomValidity(customValidity || '')
-  }, [customValidity, ref])
-}

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

@@ -1,67 +0,0 @@
-import {act, renderHook} from '@testing-library/react'
-import {describe, expect, it, vi} from 'vitest'
-
-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 () => {
-    vi.useFakeTimers()
-    const {result} = renderHook(() => useDelayedState(false))
-    const [, setState] = result.current
-
-    act(() => {
-      setState(true, 1000)
-    })
-    expect(result.current[0]).toBe(false)
-    act(() => {
-      vi.advanceTimersByTime(500)
-    })
-    expect(result.current[0]).toBe(false)
-
-    act(() => {
-      vi.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)
-
-    vi.advanceTimersByTime(500)
-
-    act(() => {
-      setState(false)
-    })
-    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,28 +0,0 @@
-import {type SetStateAction, useCallback, useRef, useState} 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>(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/useElementSize.ts

@@ -1,19 +0,0 @@
-import {useEffect, useState} from 'react'
-
-import {_elementSizeObserver, type ElementSize} from '../observers/elementSize'
-
-/**
- * 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/useGlobalKeyDown.ts

@@ -1,17 +0,0 @@
-import {useEffect} from 'react'
-import {useEffectEvent} from 'use-effect-event'
-
-/**
- * @beta
- */
-export function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {
-  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))
-
-  useEffect(() => {
-    const handler = (event: KeyboardEvent) => handleKeyDown(event)
-
-    window.addEventListener('keydown', handler)
-
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-}

package/src/core/hooks/useMatchMedia.ts

@@ -1,28 +0,0 @@
-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/core/hooks/useMediaIndex/__workshop__/Test.tsx

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

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

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