@sanity/ui 3.3.2 → 3.3.3

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

@@ -1,28 +0,0 @@
-import {useContext} from 'react'
-
-import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
-
-/**
- * @public
- */
-export function useLayer(): LayerContextValue {
-  const value = useContext(LayerContext)
-
-  if (!value) {
-    throw new Error('useLayer(): missing context value')
-  }
-
-  try {
-    return getLayerContext(value)
-  } catch (err) {
-    if (err instanceof Error) {
-      // oxlint-disable-next-line preserve-caught-error
-      throw new Error(`useLayer(): ${err.message}`)
-    } else {
-      // oxlint-disable-next-line preserve-caught-error, restrict-template-expressions
-      throw new Error(`useLayer(): ${err}`)
-    }
-  }
-}

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

@@ -1,4 +0,0 @@
-export * from './portal'
-export * from './portalProvider'
-export * from './types'
-export * from './usePortal'

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

@@ -1,108 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
-import {usePortal} from './usePortal'
-
-describe('utils/portal', () => {
-  describe('usePortal', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootPortal = usePortal()
-
-        log(rootPortal)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: PortalContextValue = {
-          version: 0.0,
-          boundaryElement: null,
-          element: null,
-        }
-
-        return (
-          // oxlint-disable-next-line jsx-no-constructed-context-values
-          <PortalContext.Provider value={value}>
-            <Debug />
-          </PortalContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].boundaryElement).toBe(null)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          // oxlint-disable-next-line no-unsafe-type-assertion
-          <PortalContext.Provider value={value as any}>
-            <Debug />
-          </PortalContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('usePortal(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } 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
-          <PortalContext.Provider value={value as any}>
-            <Debug />
-          </PortalContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'usePortal(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/core/utils/portal/portal.ts

@@ -1,32 +0,0 @@
-import {createPortal} from 'react-dom'
-
-import {usePortal} from './usePortal'
-
-/**
- * @public
- */
-export interface PortalProps {
-  children: React.ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/**
- * @public
- */
-export function Portal(props: PortalProps): React.ReactPortal | null {
-  const {children, __unstable_name: name} = props
-  const portal = usePortal()
-  const portalElement =
-    (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default
-
-  if (!portalElement) {
-    return null
-  }
-
-  return createPortal(children, portalElement)
-}
-
-Portal.displayName = 'Portal'

package/src/core/utils/portal/portalContext.ts

@@ -1,31 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {globalScope} from '../../lib/globalScope'
-import {PortalContextValue} from './types'
-
-const key = '@sanity/ui/context/portal'
-const elementKey = Symbol.for(`${key}/element`)
-
-globalScope[elementKey] = null
-
-export const defaultContextValue: PortalContextValue = {
-  version: 0.0,
-  boundaryElement: null,
-  get element() {
-    if (typeof document === 'undefined') {
-      return null
-    }
-
-    if (globalScope[elementKey]) {
-      return globalScope[elementKey]
-    }
-
-    globalScope[elementKey] = document.createElement('div')
-    globalScope[elementKey].setAttribute('data-portal', '')
-
-    document.body.appendChild(globalScope[elementKey])
-
-    return globalScope[elementKey]
-  },
-}
-
-export const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

package/src/core/utils/portal/portalProvider.tsx

@@ -1,48 +0,0 @@
-import {useMemo, useSyncExternalStore} from 'react'
-
-import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
-
-/**
- * @public
- */
-export interface PortalProviderProps {
-  /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
-   */
-  boundaryElement?: HTMLElement | null
-  children: React.ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/**
- * @public
- */
-export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
-  // oxlint-disable-next-line no-deprecated
-  const {boundaryElement, children, element, __unstable_elements: elements} = props
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => document.body,
-    () => null,
-  )
-
-  const value: PortalContextValue = useMemo(() => {
-    return {
-      version: 0.0,
-      boundaryElement: boundaryElement || null,
-      element: element || fallbackElement,
-      elements,
-    }
-  }, [boundaryElement, element, elements, fallbackElement])
-
-  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
-}
-
-PortalProvider.displayName = 'PortalProvider'
-
-const emptySubscribe = () => () => {}

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

@@ -1,9 +0,0 @@
-/**
- * @public
- */
-export interface PortalContextValue {
-  version: 0.0
-  boundaryElement: HTMLElement | null
-  element: HTMLElement | null
-  elements?: Record<string, HTMLElement | null | undefined>
-}

package/src/core/utils/portal/usePortal.ts

@@ -1,25 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
-
-/**
- * @public
- */
-export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
-
-  if (!value) {
-    throw new Error('usePortal(): missing context value')
-  }
-
-  // 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(value) || value.version !== 0.0) {
-    throw new Error('usePortal(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/core/utils/spanWithTextOverflow.tsx

@@ -1,10 +0,0 @@
-import {styled} from 'styled-components'
-
-/** @internal */
-export const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`

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

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

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,36 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-/**
- * @public
- */
-export interface SrOnlyProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  children?: React.ReactNode
-}
-
-const StyledSrOnly = styled.div`
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  overflow: hidden;
-  overflow: clip;
-`
-
-/**
- * @public
- */
-export const SrOnly = forwardRef(function SrOnly(
-  props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {as, children} = props
-
-  return (
-    <StyledSrOnly aria-hidden as={as} data-ui="SrOnly" ref={ref}>
-      {children}
-    </StyledSrOnly>
-  )
-})
-SrOnly.displayName = 'ForwardRef(SrOnly)'

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

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

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,201 +0,0 @@
-import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {StackOwnProps} from '../../primitives'
-import {useTheme_v2} from '../../theme'
-
-/**
- * @beta
- */
-export interface VirtualListChangeOpts {
-  fromIndex: number
-  gap: number
-  itemHeight: number
-  scrollHeight: number
-  scrollTop: number
-  toIndex: number
-}
-
-/**
- * @beta
- */
-export interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  gap?: number
-  getItemKey?: (item: Item, itemIndex: number) => string
-  items?: Item[]
-  onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => React.ReactNode
-}
-
-const StyledVirtualList = styled.div`
-  position: relative;
-`
-
-const ItemWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-`
-
-/**
- * @beta
- */
-export const VirtualList = forwardRef(function VirtualList(
-  props: VirtualListProps &
-    StackOwnProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.JSX.Element {
-  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme_v2()
-  const ref = useRef<HTMLDivElement | null>(null)
-  const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const [scrollTop, setScrollTop] = useState(0)
-  const [scrollHeight, setScrollHeight] = useState(0)
-  const [itemHeight, setItemHeight] = useState(-1)
-
-  // Sync ref to parent
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  useEffect(() => {
-    if (!wrapperRef.current) return
-
-    const firstElement = wrapperRef.current.firstChild
-
-    if (firstElement instanceof HTMLElement) {
-      setItemHeight(firstElement.offsetHeight)
-    }
-  }, [renderItem])
-
-  useEffect((): (() => void) | undefined => {
-    if (!ref.current) return
-
-    const scrollEl = findScrollable(ref.current.parentNode)
-
-    if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement)) return
-
-      const handleScroll = () => {
-        setScrollTop(scrollEl.scrollTop)
-      }
-
-      scrollEl.addEventListener('scroll', handleScroll, {passive: true})
-
-      const ro = new _ResizeObserver((entries) => {
-        setScrollHeight(entries[0].contentRect.height)
-      })
-
-      ro.observe(scrollEl)
-
-      handleScroll()
-
-      // oxlint-disable-next-line consistent-return
-      return () => {
-        scrollEl.removeEventListener('scroll', handleScroll)
-
-        ro.unobserve(scrollEl)
-        ro.disconnect()
-      }
-    }
-
-    const handleScroll = () => {
-      setScrollTop(window.scrollY)
-    }
-
-    const handleResize = () => {
-      setScrollHeight(window.innerHeight)
-    }
-
-    window.addEventListener('scroll', handleScroll, {passive: true})
-    window.addEventListener('resize', handleResize)
-
-    setScrollHeight(window.innerHeight)
-
-    handleScroll()
-
-    // oxlint-disable-next-line consistent-return
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  const len = items.length
-  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
-  const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
-  const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
-
-  useEffect(() => {
-    if (!onChange) return
-    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
-
-  const children = useChildren({
-    fromIndex,
-    gap,
-    itemHeight,
-    space,
-    toIndex,
-    getItemKey,
-    items,
-    renderItem,
-  })
-
-  return (
-    <StyledVirtualList as={as} data-ui="VirtualList" {...restProps} ref={ref}>
-      <div ref={wrapperRef} style={{height}}>
-        {children}
-      </div>
-    </StyledVirtualList>
-  )
-})
-VirtualList.displayName = 'ForwardRef(VirtualList)'
-
-function useChildren({
-  fromIndex,
-  gap,
-  getItemKey,
-  itemHeight,
-  items,
-  renderItem,
-  space,
-  toIndex,
-}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
-  Required<Pick<VirtualListProps, 'items'>> & {
-    fromIndex: number
-    gap: number
-    itemHeight: number
-    space: number[]
-    toIndex: number
-  }) {
-  if (!renderItem || items.length === 0) return null
-
-  if (itemHeight === -1) {
-    return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
-  }
-
-  return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-    const itemIndex = fromIndex + _itemIndex
-    const node = renderItem(item)
-    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-    return (
-      <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
-        {node}
-      </ItemWrapper>
-    )
-  })
-}
-
-function findScrollable(parentNode: ParentNode | null) {
-  let _scrollEl = parentNode
-
-  while (_scrollEl && !_isScrollable(_scrollEl)) {
-    _scrollEl = _scrollEl.parentNode
-  }
-
-  return _scrollEl
-}

package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts

@@ -1,86 +0,0 @@
-import {
-  ThemeColorBase,
-  ThemeColorMuted,
-  ThemeColorSelectable,
-  ThemeColorSelectableStates,
-  ThemeColorSolid,
-} from '../../../../system'
-import {ThemeColorBuilderOpts} from '../factory'
-
-export function createSelectableTones(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  // oxlint-disable-next-line no-deprecated
-  base: ThemeColorBase,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-  solid: ThemeColorSolid,
-  // oxlint-disable-next-line no-deprecated
-  muted: ThemeColorMuted,
-  // oxlint-disable-next-line no-deprecated
-): ThemeColorSelectable {
-  return {
-    default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
-    primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
-    positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
-    caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
-    critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),
-  }
-}
-
-function _createSelectableStates(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  // oxlint-disable-next-line no-deprecated
-  base: ThemeColorBase,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-  solid: ThemeColorSolid,
-  // oxlint-disable-next-line no-deprecated
-  muted: ThemeColorMuted,
-  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
-  // oxlint-disable-next-line no-deprecated
-): ThemeColorSelectableStates {
-  return {
-    enabled: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: 'enabled',
-      tone,
-    }),
-    hovered: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: 'hovered',
-      tone,
-    }),
-    pressed: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: 'pressed',
-      tone,
-    }),
-    selected: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: 'selected',
-      tone,
-    }),
-    disabled: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: 'disabled',
-      tone,
-    }),
-  }
-}

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -1,58 +0,0 @@
-import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../system'
-import {ThemeColorBuilderOpts} from '../factory'
-
-export function createSolidTones(
-  // oxlint-disable-next-line no-deprecated
-  opts: ThemeColorBuilderOpts,
-  // oxlint-disable-next-line no-deprecated
-  base: ThemeColorBase,
-  dark: boolean,
-  // oxlint-disable-next-line no-deprecated
-  name: ThemeColorName,
-  // oxlint-disable-next-line no-deprecated
-): ThemeColorSolid {
-  return {
-    default: {
-      enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),
-      disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),
-      hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),
-      pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),
-      selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),
-    },
-    transparent: {
-      enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),
-      disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),
-      hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),
-      pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),
-      selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),
-    },
-    primary: {
-      enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),
-      disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),
-      hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),
-      pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),
-      selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),
-    },
-    positive: {
-      enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),
-      disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),
-      hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),
-      pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),
-      selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),
-    },
-    caution: {
-      enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),
-      disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),
-      hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),
-      pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),
-      selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),
-    },
-    critical: {
-      enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),
-      disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),
-      hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),
-      pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),
-      selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),
-    },
-  }
-}