@sanity/ui 3.0.0-static.33 → 3.0.0-static.34

package/src/core/hooks/useClickOutside.ts

@@ -1,113 +0,0 @@
-import {useEffect, useRef, useState} from 'react'
-
-import {EMPTY_ARRAY} from '../constants'
-
-/** @public */
-export type ClickOutsideListener = (event: MouseEvent) => void
-
-/** @public */
-export type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
-
-function _getElements(
-  element: HTMLElement | null,
-  elementsArg: ClickOutsideElements,
-): HTMLElement[] {
-  const ret = [element]
-
-  for (const el of elementsArg) {
-    if (Array.isArray(el)) {
-      ret.push(...el)
-    } else {
-      ret.push(el)
-    }
-  }
-
-  return ret.filter(Boolean) as HTMLElement[]
-}
-
-/**
- * @public
- * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
- * ```tsx
- * const [button, setButtonElement] = useState(null)
- * useClickOutside((event) => {}, [button])
- * return <button ref={setButtonElement} />
- * ```
- * do:
- * ```tsx
- * const buttonRef = useRef()
- * useClickOutsideEvent((event) => {}, () => [buttonRef.current])
- * return <button ref={buttonRef} />
- * ```
- */
-export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: ClickOutsideElements = EMPTY_ARRAY,
-  boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void {
-  const [element, setElement] = useState<HTMLElement | null>(null)
-  const [elements, setElements] = useState(() => _getElements(element, elementsArg))
-  const elementsRef = useRef(elements)
-
-  useEffect(() => {
-    const prevElements = elementsRef.current
-    const nextElements = _getElements(element, elementsArg)
-
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements)
-      elementsRef.current = nextElements
-
-      return
-    }
-
-    for (const el of prevElements) {
-      if (!nextElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
-
-        return
-      }
-    }
-
-    for (const el of nextElements) {
-      if (!prevElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
-
-        return
-      }
-    }
-  }, [element, elementsArg])
-
-  useEffect(() => {
-    if (!listener) return undefined
-
-    const handleWindowMouseDown = (evt: MouseEvent) => {
-      const target = evt.target
-
-      if (!(target instanceof Node)) {
-        return
-      }
-
-      if (boundaryElement && !boundaryElement.contains(target)) {
-        return
-      }
-
-      for (const el of elements) {
-        if (target === el || el.contains(target)) {
-          return
-        }
-      }
-
-      listener(evt)
-    }
-
-    window.addEventListener('mousedown', handleWindowMouseDown)
-
-    return () => {
-      window.removeEventListener('mousedown', handleWindowMouseDown)
-    }
-  }, [boundaryElement, listener, elements])
-
-  return setElement
-}

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

@@ -1,30 +0,0 @@
-import {Box, Card, Code, Container, Grid, Stack, Text, useElementRect} from '@sanity/ui'
-import {useState} from 'react'
-
-export default function ExampleStory() {
-  const [element, setElement] = useState<HTMLElement | null>(null)
-  const rect = useElementRect(element)
-  const size = {width: rect?.width || 0, height: rect?.height || 0}
-
-  return (
-    <Box padding={[3, 4, 5]}>
-      <Container width={1}>
-        <Stack gap={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/useElementRect/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'hooks/useElementRect',
-  title: 'useElementRect',
-  stories: [
-    {
-      name: 'example',
-      title: 'Example',
-      component: lazy(() => import('./example')),
-    },
-  ],
-})

package/src/core/hooks/useElementRect/useElementRect.ts

@@ -1,13 +0,0 @@
-import {useElementSize} from '../useElementSize'
-
-/**
- * Subscribe to the rect of a DOM element.
- * @beta
- *
- * @deprecated Use `useElementSize` instead
- */
-export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {
-  const elementSize = useElementSize(element)
-
-  return elementSize?._contentRect || null
-}

package/src/core/hooks/useForwardedRef.ts

@@ -1,19 +0,0 @@
-import {type ForwardedRef, type MutableRefObject, 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: ForwardedRef<T>): MutableRefObject<T | null> {
-  const innerRef = useRef<T | null>(null)
-
-  useImperativeHandle(ref, () => innerRef.current!)
-
-  return innerRef
-}

package/src/core/hooks/useIsomorphicEffect.ts

@@ -1,7 +0,0 @@
-import {useEffect, useLayoutEffect} from 'react'
-
-/**
- * @beta
- * @deprecated use `useLayoutEffect` instead, or `useEffect` if possible
- */
-export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/core/primitives/badge/types.ts

@@ -1,18 +0,0 @@
-import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Will be removed in next major version.
- */
-export type BadgeMode = 'default' | 'outline'
-
-/** @public */
-export type BadgeTone = ThemeColorStateToneKey
-
-/**
- * @internal
- * @deprecated Will be removed in next major version.
- */
-export interface BadgeStyleProps {
-  $tone: BadgeTone
-}

package/src/core/primitives/box/types.ts

@@ -1,22 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated use `Display` from `@sanity/ui/css` instead.
-   */
-  type Display as BoxDisplay,
-  /**
-   * @public
-   * @deprecated use `BoxHeight` from `@sanity/ui/css` instead.
-   */
-  type BoxHeight,
-  /**
-   * @public
-   * @deprecated use `Overflow` from `@sanity/ui/css` instead.
-   */
-  type BoxOverflow,
-  /**
-   * @public
-   * @deprecated use `BoxSizing` from `@sanity/ui/css` instead.
-   */
-  type BoxSizing,
-} from '@sanity/ui/css'

package/src/core/primitives/flex/types.ts

@@ -1,27 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated
-   */
-  type AlignItems as FlexAlign,
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexDirection,
-  /**
-   * @public
-   * @deprecated
-   */
-  type JustifyContent as FlexJustify,
-  /**
-   * @public
-   * @deprecated
-   */
-  type Flex as FlexValue,
-  /**
-   * @public
-   * @deprecated
-   */
-  type FlexWrap,
-} from '@sanity/ui/css'

package/src/core/primitives/grid/types.ts

@@ -1,17 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated Use `GridAutoColumns` from `@sanity/ui/css` instead.
-   */
-  type GridAutoCols,
-  /**
-   * @public
-   * @deprecated Use `GridAutoFlow` from `@sanity/ui/css` instead.
-   */
-  type GridAutoFlow,
-  /**
-   * @public
-   * @deprecated Use `GridAutoRows` from `@sanity/ui/css` instead.
-   */
-  type GridAutoRows,
-} from '@sanity/ui/css'

package/src/core/primitives/selectable/types.ts

@@ -1,7 +0,0 @@
-import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @internal
- * @deprecated Use `ThemeColorStateToneKey` instead
- */
-export type SelectableTone = ThemeColorStateToneKey

package/src/core/primitives/types.ts

@@ -1,153 +0,0 @@
-import type {
-  AlignItems,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  Flex,
-  FlexDirection,
-  FlexWrap,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  GridItemColumn,
-  GridItemColumnEnd,
-  GridItemColumnStart,
-  GridItemRow,
-  GridItemRowEnd,
-  GridItemRowStart,
-  JustifyContent,
-} from '@sanity/ui/css'
-import type {Radius} from '@sanity/ui/theme'
-
-import type {BoxDisplay} from './box/types'
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveBorderProps {
-  border?: boolean | boolean[]
-  borderTop?: boolean | boolean[]
-  borderRight?: boolean | boolean[]
-  borderBottom?: boolean | boolean[]
-  borderLeft?: boolean | boolean[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveBoxProps {
-  display?: BoxDisplay | BoxDisplay[]
-  height?: BoxHeight | BoxHeight[]
-  overflow?: BoxOverflow | BoxOverflow[]
-  sizing?: BoxSizing | BoxSizing[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveFlexProps {
-  align?: AlignItems | AlignItems[]
-  direction?: FlexDirection | FlexDirection[]
-  justify?: JustifyContent | JustifyContent[]
-  wrap?: FlexWrap | FlexWrap[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveFlexItemProps {
-  /** Sets the flex CSS attribute. The property is responsive. */
-  flex?: Flex | Flex[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveGridProps {
-  autoRows?: GridAutoRows | GridAutoRows[]
-  autoCols?: GridAutoCols | GridAutoCols[]
-  autoFlow?: GridAutoFlow | GridAutoFlow[]
-  columns?: number | number[]
-  rows?: number | number[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveGridItemProps {
-  column?: GridItemColumn | GridItemColumn[]
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  row?: GridItemRow | GridItemRow[]
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveMarginProps {
-  /** Applies margins to all sides. The property is responsive. */
-  margin?: number | number[]
-  /** Applies margins to the left and right sides. The property is responsive. */
-  marginX?: number | number[]
-  /** Applies margins to the top and bottom sides. The property is responsive. */
-  marginY?: number | number[]
-  marginTop?: number | number[]
-  marginRight?: number | number[]
-  marginBottom?: number | number[]
-  marginLeft?: number | number[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsivePaddingProps {
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  paddingTop?: number | number[]
-  paddingRight?: number | number[]
-  paddingBottom?: number | number[]
-  paddingLeft?: number | number[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveRadiusProps {
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveShadowProps {
-  shadow?: number | number[]
-}
-
-/**
- * @public
- * @deprecated No longer used.
- */
-export interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
-}
-
-/** @public */
-export type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>

package/src/core/types/gridItem.ts

@@ -1,32 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemColumn,
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemColumnEnd,
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemColumnStart,
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemRow,
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemRowEnd,
-  /**
-   * @public
-   * @deprecated
-   */
-  type GridItemRowStart,
-} from '@sanity/ui/css'

package/src/core/types/placement.ts

@@ -1,18 +0,0 @@
-/**
- * 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'

package/src/core/types/radius.ts

@@ -1,7 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated Use `Radius` from `@sanity/ui/theme` instead.
-   */
-  type Radius,
-} from '@sanity/ui/theme'

package/src/core/types/textAlign.ts

@@ -1,7 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated Use `TextAlign` from `@sanity/ui/css` instead
-   */
-  type TextAlign,
-} from '@sanity/ui/css'

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/theme/getScopedTheme.ts

@@ -1,88 +0,0 @@
-import type {RootTheme, Theme} from './types'
-import type {ThemeColor} from './v0'
-import type {RootTheme_v2, ThemeColorCardToneKey, ThemeColorSchemeKey} from './v2'
-import {defaultThemeConfig} from './v2/defaults/config'
-import {is_v2} from './versioning/is_v2'
-import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
-import {v0_v2} from './versioning/v0_v2'
-import {v2_v0} from './versioning/v2_v0'
-
-// cache[scheme][tone][rootTheme] = theme
-const cache = new Map<
-  ThemeColorSchemeKey,
-  Map<ThemeColorCardToneKey, WeakMap<RootTheme | RootTheme_v2, Theme>>
->()
-
-/** @internal */
-export function getScopedTheme(
-  themeProp: RootTheme | RootTheme_v2,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorCardToneKey,
-): Theme {
-  const cachedTheme = _getCachedTheme(themeProp, scheme, tone)
-
-  if (cachedTheme) return cachedTheme
-
-  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp
-  const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
-
-  const colorScheme_v0 = v0.color[scheme] || v0.color.light
-  const color_v0 = (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
-  const layer_v0 = v0.layer || defaultThemeConfig.layer
-
-  const colorScheme_v2 = v2.color[scheme] || v2.color.light
-  const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default
-  const color_v2_9 = themeColor_v0_v2_9(color_v2)
-  const layer_v2 = v2.layer || defaultThemeConfig.layer
-
-  const theme: Theme = {
-    sanity: {
-      ...v0,
-      color: color_v0,
-      layer: layer_v0,
-      v2: {
-        ...v2,
-        _resolved: true,
-        color: color_v2_9,
-        layer: layer_v2,
-      },
-    },
-  }
-
-  _setCachedTheme(themeProp, scheme, tone, theme)
-
-  return theme
-}
-
-function _getCachedTheme(
-  rootTheme: RootTheme | RootTheme_v2,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorCardToneKey,
-) {
-  const schemeCache = cache.get(scheme)
-
-  if (!schemeCache) return undefined
-
-  const toneCache = schemeCache.get(tone)
-
-  if (!toneCache) return undefined
-
-  return toneCache.get(rootTheme)
-}
-
-function _setCachedTheme(
-  rootTheme: RootTheme | RootTheme_v2,
-  scheme: ThemeColorSchemeKey,
-  tone: ThemeColorCardToneKey,
-  theme: Theme,
-) {
-  if (!cache.has(scheme)) cache.set(scheme, new Map())
-
-  const schemeCache = cache.get(scheme)!
-
-  if (!schemeCache.has(tone)) schemeCache.set(tone, new WeakMap())
-
-  const toneCache = schemeCache.get(tone)!
-
-  toneCache.set(rootTheme, theme)
-}

package/src/theme/v0/avatar.ts

@@ -1,10 +0,0 @@
-/**
- * @public
- * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
- */
-export interface ThemeAvatar {
-  sizes: {
-    distance: number
-    size: number
-  }[]
-}

package/src/theme/v0/color/_generic.ts

@@ -1,35 +0,0 @@
-import type {ThemeColorBlendModeKey} from '../../v2/color/_system'
-
-/**
- * @public
- * @deprecated Use `ThemeColorState_v2` instead.
- */
-export interface ThemeColorGenericState {
-  /** @internal */
-  _blend?: ThemeColorBlendModeKey
-  bg: string
-  /**
-   * @beta
-   */
-  bg2?: string
-  border: string
-  fg: string
-  icon: string
-  muted: {
-    fg: string
-  }
-  accent: {
-    fg: string
-  }
-  link: {
-    fg: string
-  }
-  code: {
-    bg: string
-    fg: string
-  }
-  skeleton?: {
-    from: string
-    to: string
-  }
-}

package/src/theme/v0/color/_system.ts

@@ -1,17 +0,0 @@
-/**
- * @public
- * @deprecated Use `ThemeColorCardToneKey` instead.
- */
-export type ThemeColorName =
-  | 'transparent'
-  | 'default'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
-
-/**
- * @public
- * @deprecated Use `ThemeColorCardToneKey` instead.
- */
-export type ThemeColorToneKey = ThemeColorName