@sanity/ui 3.3.2 → 3.3.4

package/src/core/utils/boundaryElement/boundaryElementContext.ts

@@ -1,7 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {BoundaryElementContextValue} from './types'
-
-export const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(
-  '@sanity/ui/context/boundaryElement',
-  null,
-)

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,24 +0,0 @@
-import {useMemo} from 'react'
-
-import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
-
-/**
- * @public
- */
-export interface BoundaryElementProviderProps {
-  children: React.ReactNode
-  element: HTMLElement | null
-}
-
-/**
- * @public
- */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
-  const {children, element} = props
-  const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
-
-  return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
-}
-
-BoundaryElementProvider.displayName = 'BoundaryElementProvider'

package/src/core/utils/boundaryElement/index.ts

@@ -1,3 +0,0 @@
-export * from './boundaryElementProvider'
-export * from './types'
-export * from './useBoundaryElement'

package/src/core/utils/boundaryElement/types.ts

@@ -1,7 +0,0 @@
-/**
- * @public
- */
-export interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,26 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
-
-const DEFAULT_VALUE: BoundaryElementContextValue = {
-  version: 0.0,
-  element: null,
-}
-
-/**
- * @public
- */
-export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = useContext(BoundaryElementContext)
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (value && (!isRecord(value) || value.version !== 0.0)) {
-    throw new Error('useBoundaryElement(): the context value is not compatible')
-  }
-
-  return value || DEFAULT_VALUE
-}

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,22 +0,0 @@
-/**
- * @internal
- * @deprecated this component will be removed in the next major release
- */
-export function ConditionalWrapper({
-  children,
-  condition,
-  wrapper,
-}: {
-  children: React.ReactNode
-  condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-}): React.ReactNode {
-  if (!condition) {
-    return children
-  }
-
-  return wrapper(children)
-}
-
-// oxlint-disable-next-line no-deprecated
-ConditionalWrapper.displayName = 'ConditionalWrapper'

package/src/core/utils/conditionalWrapper/index.ts

@@ -1 +0,0 @@
-export * from './conditionalWrapper'

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,53 +0,0 @@
-import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
-
-import {useElementSize} from '../../hooks'
-import {useTheme_v2} from '../../theme'
-import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface MediaQueryProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  media?: number[]
-}
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const ElementQuery = forwardRef(function ElementQuery(
-  props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const theme = useTheme_v2()
-  const {children, media: _media, ...restProps} = props
-  const media = _media ?? theme.media
-
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const elementSize = useElementSize(element)
-  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
-
-  const max = useMemo(() => {
-    const eq = findMaxBreakpoints(media, width)
-
-    return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
-  const min = useMemo(() => {
-    const eq = findMinBreakpoints(media, width)
-
-    return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
-    element,
-  ])
-
-  return (
-    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
-      {children}
-    </div>
-  )
-})
-ElementQuery.displayName = 'ForwardRef(ElementQuery)'

package/src/core/utils/elementQuery/helpers.ts

@@ -1,27 +0,0 @@
-export function findMaxBreakpoints(media: number[], width: number): number[] {
-  const ret: number[] = []
-
-  for (let i = 0; i < media.length; i += 1) {
-    const bp = media[i]
-
-    if (bp > width) {
-      ret.push(i)
-    }
-  }
-
-  return ret
-}
-
-export function findMinBreakpoints(media: number[], width: number): number[] {
-  const ret: number[] = []
-
-  for (let i = 0; i < media.length; i += 1) {
-    const bp = media[i]
-
-    if (bp <= width) {
-      ret.push(i)
-    }
-  }
-
-  return ret
-}

package/src/core/utils/elementQuery/index.ts

@@ -1 +0,0 @@
-export * from './elementQuery'

package/src/core/utils/errorBoundary.tsx

@@ -1,48 +0,0 @@
-import {Component, PropsWithChildren} from 'react'
-
-import {Code} from '../primitives/code'
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
-}>
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export interface ErrorBoundaryState {
-  error: Error | null
-}
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {error: null}
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    // Update state so the next render will show the fallback UI.
-    return {error}
-  }
-
-  componentDidCatch(error: Error, info: React.ErrorInfo): void {
-    this.props.onCatch({error, info})
-  }
-
-  render(): React.ReactNode {
-    const {error} = this.state
-
-    if (error) {
-      const message = typeof error?.message === 'string' ? error.message : 'Error'
-
-      return <Code>{message}</Code>
-    }
-
-    return this.props.children
-  }
-}

package/src/core/utils/getElementRef.ts

@@ -1,31 +0,0 @@
-// Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
-// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
-// After React 19 accessing `element.ref` does the opposite.
-// https://github.com/facebook/react/pull/28348
-//
-// Access the ref using the method that doesn't yield a warning.
-export function getElementRef(element: React.ReactElement) {
-  // React <=18 in DEV
-  // oxlint-disable-next-line unbound-method
-  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
-  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    return (element as any).ref
-  }
-
-  // React 19 in DEV
-  // oxlint-disable-next-line unbound-method
-  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
-  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    return (element.props as {ref?: React.Ref<unknown>}).ref
-  }
-
-  // Not DEV
-  // oxlint-disable-next-line no-unsafe-type-assertion
-  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
-}

package/src/core/utils/index.ts

@@ -1,9 +0,0 @@
-export * from './arrow'
-export * from './boundaryElement'
-export * from './conditionalWrapper'
-export * from './elementQuery'
-export * from './errorBoundary'
-export * from './layer'
-export * from './portal'
-export * from './srOnly'
-export * from './virtualList'

package/src/core/utils/layer/getLayerContext.test.ts

@@ -1,32 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-import {getLayerContext} from './getLayerContext'
-import {LayerContextValue} from './types'
-
-describe('getLayerContext', () => {
-  describe('0.0', () => {
-    it('should convert 0.0 to 0.0', () => {
-      const contextValue: LayerContextValue = {
-        version: 0.0,
-        isTopLayer: true,
-        level: 0,
-        registerChild: () => () => {
-          //
-        },
-        size: 0,
-        zIndex: 0,
-      }
-
-      const result = getLayerContext(contextValue)
-
-      expect(result).toEqual({
-        version: 0.0,
-        isTopLayer: true,
-        level: 0,
-        registerChild: expect.any(Function),
-        size: 0,
-        zIndex: 0,
-      })
-    })
-  })
-})

package/src/core/utils/layer/getLayerContext.ts

@@ -1,21 +0,0 @@
-import {isRecord} from '../../lib/isRecord'
-import {LayerContextValue} from './types'
-
-export function getLayerContext(contextValue: LayerContextValue): LayerContextValue {
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(contextValue) || contextValue.version !== 0.0) {
-    throw new Error('the context value is not compatible')
-  }
-
-  if (!contextValue) {
-    throw new Error('components using `useLayer()` should be wrapped in a <LayerProvider>.')
-  }
-
-  if (contextValue.version === 0.0) {
-    return contextValue
-  }
-
-  throw new Error('could not get layer context')
-}

package/src/core/utils/layer/index.ts

@@ -1,4 +0,0 @@
-export * from './layer'
-export * from './layerProvider'
-export * from './types'
-export * from './useLayer'

package/src/core/utils/layer/layer.test.tsx

@@ -1,113 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
-import {useLayer} from './useLayer'
-
-describe('utils/layer', () => {
-  describe('useLayer', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootLayer = useLayer()
-
-        log(rootLayer)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: LayerContextValue = {
-          version: 0.0,
-          isTopLayer: true,
-          level: 0,
-          registerChild: () => () => undefined,
-          size: 0,
-          zIndex: 0,
-        }
-
-        return (
-          // oxlint-disable-next-line jsx-no-constructed-context-values
-          <LayerContext.Provider value={value}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].isTopLayer).toBe(true)
-      expect(typeof log.mock.calls[0][0].registerChild).toBe('function')
-      expect(log.mock.calls[0][0].size).toBe(0)
-      expect(log.mock.calls[0][0].zIndex).toBe(0)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          // oxlint-disable-next-line no-unsafe-type-assertion
-          <LayerContext.Provider value={value as any}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useLayer(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          // oxlint-disable-next-line jsx-no-constructed-context-values, no-unsafe-type-assertion
-          <LayerContext.Provider value={value as any}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useLayer(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/core/utils/layer/layer.tsx

@@ -1,99 +0,0 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
-
-/**
- * @public
- */
-export interface LayerProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
-  onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: number | number[]
-}
-
-interface LayerChildrenProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  onActivate?: LayerProps['onActivate']
-}
-
-const StyledLayer = styled.div({position: 'relative'})
-
-const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  forwardedRef: React.Ref<HTMLDivElement>,
-) {
-  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
-  const {zIndex, isTopLayer} = useLayer()
-  const lastFocusedRef = useRef<HTMLElement | null>(null)
-  const ref = useRef<HTMLDivElement | null>(null)
-  const isTopLayerRef = useRef<boolean>(isTopLayer)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  // When the layer very first mounts, it will be the top layer, but we don't want to fire
-  // the callback in that case. We use a ref to track the previous value of isTopLayer to
-  // determine if the layer has become the top layer since the last render.
-  useEffect(() => {
-    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
-
-    if (becameTopLayer) {
-      onActivate?.({activeElement: lastFocusedRef.current})
-    }
-
-    isTopLayerRef.current = isTopLayer
-  }, [isTopLayer, onActivate])
-
-  const handleFocus = useCallback(
-    // oxlint-disable-next-line no-unnecessary-type-arguments
-    (event: FocusEvent<HTMLDivElement, Element>) => {
-      // Call the user-provided onFocus handler if any
-      onFocus?.(event)
-
-      const rootElement = ref.current
-      const target = document.activeElement
-
-      if (!isTopLayer || !rootElement || !target) return
-
-      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
-        lastFocusedRef.current = target
-      }
-    },
-    [isTopLayer, onFocus],
-  )
-
-  return (
-    <StyledLayer
-      {...restProps}
-      data-ui="Layer"
-      onFocus={handleFocus}
-      ref={ref}
-      style={{...style, zIndex}}
-    >
-      {children}
-    </StyledLayer>
-  )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {children, zOffset = 1, ...restProps} = props
-
-  return (
-    <LayerProvider zOffset={zOffset}>
-      <LayerChildren {...restProps} ref={ref}>
-        {children}
-      </LayerChildren>
-    </LayerProvider>
-  )
-})
-Layer.displayName = 'ForwardRef(Layer)'

package/src/core/utils/layer/layerContext.ts

@@ -1,7 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {LayerContextValue} from './types'
-
-export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(
-  '@sanity/ui/context/layer',
-  null,
-)

package/src/core/utils/layer/layerProvider.tsx

@@ -1,111 +0,0 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-
-import {useMediaIndex} from '../../hooks'
-import {_getArrayProp} from '../../styles'
-import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
-
-/**
- * @public
- */
-export interface LayerProviderProps {
-  children?: React.ReactNode
-  zOffset?: number | number[]
-}
-
-/**
- * @public
- */
-export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
-  const {children, zOffset: zOffsetProp = 0} = props
-
-  // Get parent context values
-  const parentContextValue = useContext(LayerContext)
-  const parent = parentContextValue && getLayerContext(parentContextValue)
-  const parentRegisterChild = parent?.registerChild
-  const parentLevel = parent?.level ?? 0
-
-  // Get level
-  const level = parentLevel + 1
-
-  // Get z-index offset
-  const zOffset = _getArrayProp(zOffsetProp)
-
-  // Get responsive z-index value
-  const maxMediaIndex = zOffset.length - 1
-  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
-  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]
-
-  // A state value that is used to keep track of the number of child layers on each level
-  const [, setChildLayers] = useState<Record<number, number>>({})
-
-  // A state value that is used to keep track of the number of child levels
-  const [size, setSize] = useState(0)
-
-  const isTopLayer = size === 0
-
-  const registerChild = useCallback(
-    (childLevel?: number) => {
-      // Register child layers to the parent layer
-      const parentDispose = parentRegisterChild?.(childLevel)
-
-      if (childLevel !== undefined) {
-        setChildLayers((state) => {
-          const prevLen = state[childLevel] ?? 0
-          const nextState = {...state, [childLevel]: prevLen + 1}
-
-          setSize(Object.keys(nextState).length)
-
-          return nextState
-        })
-      } else {
-        // Legacy behavior: if no child level is provided, increment the size by 1
-        setSize((v) => v + 1)
-      }
-
-      return () => {
-        if (childLevel !== undefined) {
-          setChildLayers((state) => {
-            const nextState = {...state}
-
-            if (nextState[childLevel] === 1) {
-              delete nextState[childLevel]
-
-              setSize(Object.keys(nextState).length)
-            } else {
-              nextState[childLevel] -= 1
-            }
-
-            return nextState
-          })
-        } else {
-          // Legacy behavior: if no child level is provided, decrement the size by 1
-          setSize((v) => v - 1)
-        }
-
-        parentDispose?.()
-      }
-    },
-    [parentRegisterChild, setSize, setChildLayers],
-  )
-
-  // Register this layer on mount
-  useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
-
-  const value: LayerContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      isTopLayer,
-      level,
-      registerChild,
-      size,
-      zIndex,
-    }),
-    [isTopLayer, level, registerChild, size, zIndex],
-  )
-
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
-}
-
-LayerProvider.displayName = 'LayerProvider'

package/src/core/utils/layer/types.ts

@@ -1,9 +0,0 @@
-/** @public */
-export interface LayerContextValue {
-  version: 0.0
-  isTopLayer: boolean
-  level?: number
-  registerChild: (childLevel?: number) => () => void
-  size: number
-  zIndex: number
-}