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

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,51 +0,0 @@
-import {BREAKPOINT_KEYS, type ResponsiveProp, type ResponsivePropArray} from '@sanity/ui-css'
-
-import {EMPTY_ARRAY} from '../constants'
-import {isArray} from '../lib/isArray'
-import {isRecord} from '../lib/isRecord'
-
-// WeakMap for object/array values (automatic GC when objects are no longer referenced)
-const objectCache = new WeakMap<object, ResponsivePropArray<unknown>>()
-
-// Map for primitive values (bounded growth - only primitives like numbers/strings)
-const primitiveCache = new Map<unknown, ResponsivePropArray<unknown>>()
-
-/**
- * @internal
- */
-export function _getResponsiveProp<T>(
-  val: ResponsiveProp<T> | undefined,
-  defaultVal?: ResponsivePropArray<T>,
-): ResponsivePropArray<T> {
-  // Fast path: undefined
-  if (val === undefined) {
-    return defaultVal || (EMPTY_ARRAY as unknown as ResponsivePropArray<T>)
-  }
-
-  // Fast path: already an array or object - use WeakMap for identity-based caching
-  if (isArray(val)) {
-    let v = val
-
-    // convert to array
-    if (isRecord(val)) {
-      v = BREAKPOINT_KEYS.map((key) => val[key]) as ResponsivePropArray<T>
-    }
-
-    const cached = objectCache.get(v)
-    if (cached) return cached as ResponsivePropArray<T>
-
-    const ret = v as ResponsivePropArray<T>
-    objectCache.set(v, ret)
-    return ret
-  }
-
-  // Primitive value - wrap in array and cache by value
-  const cached = primitiveCache.get(val)
-  if (cached) return cached as ResponsivePropArray<T>
-
-  const ret = [val] as ResponsivePropArray<T>
-
-  primitiveCache.set(val, ret)
-
-  return ret
-}

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/lib/createGlobalScopedContext.ts

@@ -1,39 +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 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/v4/${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') {
-    const context = createContext<ContextType>(defaultValue)
-    context.displayName = key
-    return context
-  }
-
-  // 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/types.ts

@@ -1,57 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
- *
- * @public
- */
-export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
-
-/** @public */
-export type EmptyProps = {}
-
-/** @public */
-export type TagType = keyof React.JSX.IntrinsicElements
-
-/** @public */
-export type ComponentType<P = any> =
-  | React.FunctionComponent<P>
-  | React.ComponentClass<P>
-  | React.ExoticComponent<P>
-
-/** @public */
-export type ElementType<P> = TagType | ComponentType<P>
-
-/** @public */
-export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
-  P & {as?: E}
->
-
-/**
- * Placement of floating UI elements.
- *
- * @public
- */
-export type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-
-/** @public */
-export type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>

package/src/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 ref={buttonRef} data-testid="button" />
-          <div ref={popoverRef} data-testid="popover" />
-          <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 ref={buttonRef} data-testid="button" />
-          <div ref={popoverRef} data-testid="popover" />
-          <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 ref={buttonRef} data-testid="button" />
-            <div ref={popoverRef} data-testid="popover" />
-            <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/hooks/useClickOutsideEvent.ts

@@ -1,66 +0,0 @@
-import {useDebugValue, useEffect, useEffectEvent} from 'react'
-
-import {EMPTY_ARRAY} from '../core/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/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/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/hooks/useGlobalKeyDown.ts

@@ -1,23 +0,0 @@
-import {useEffect, useEffectEvent} from 'react'
-
-/**
- * Adds global keydown event listener to the window.
- *
- * @param onKeyDown - The function to call when a keydown event is triggered.
- * @param options - The options to pass to the addEventListener function (example, capture: true)
- * @beta
- */
-export function useGlobalKeyDown(
-  onKeyDown: (event: KeyboardEvent) => void,
-  options?: AddEventListenerOptions,
-): void {
-  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))
-
-  useEffect(() => {
-    const handler = (event: KeyboardEvent) => handleKeyDown(event)
-
-    window.addEventListener('keydown', handler, options)
-
-    return () => window.removeEventListener('keydown', handler, options)
-  }, [options])
-}

package/src/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/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={5}>
-      <Stack gap={3}>
-        <Text weight="medium">The current media index is {mediaIndex}.</Text>
-        <Text muted>Try resizing the browser.</Text>
-      </Stack>
-    </Card>
-  )
-}

package/src/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

package/src/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 />)).toBe('mediaIndex: <!-- -->0')
-  })
-})