@sanity/ui 3.0.0-static.9 → 3.0.0

package/src/ui/primitives/types.ts

@@ -1,166 +0,0 @@
-import {
-  type FlexAlign,
-  type FlexDirection,
-  type FlexJustify,
-  type FlexValue,
-  type FlexWrap,
-  GridItemColumn,
-  GridItemColumnEnd,
-  GridItemColumnStart,
-  GridItemRow,
-  GridItemRowEnd,
-  GridItemRowStart,
-} from '@sanity/ui/css'
-
-import {
-  type BoxDisplay,
-  type BoxHeight,
-  type BoxOverflow,
-  type BoxSizing,
-  type GridAutoCols,
-  type GridAutoFlow,
-  type GridAutoRows,
-  // type GridItemColumn,
-  // type GridItemColumnEnd,
-  // type GridItemColumnStart,
-  // type GridItemRow,
-  // type GridItemRowEnd,
-  // type GridItemRowStart,
-  type Radius,
-} from '../types'
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveBorderProps {
-  border?: boolean | boolean[]
-  borderTop?: boolean | boolean[]
-  borderRight?: boolean | boolean[]
-  borderBottom?: boolean | boolean[]
-  borderLeft?: boolean | boolean[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveBoxProps {
-  display?: BoxDisplay | BoxDisplay[]
-  height?: BoxHeight | BoxHeight[]
-  overflow?: BoxOverflow | BoxOverflow[]
-  sizing?: BoxSizing | BoxSizing[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveFlexProps {
-  align?: FlexAlign | FlexAlign[]
-  direction?: FlexDirection | FlexDirection[]
-  justify?: FlexJustify | FlexJustify[]
-  wrap?: FlexWrap | FlexWrap[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveFlexItemProps {
-  /** Sets the flex CSS attribute. The property is responsive. */
-  flex?: FlexValue | FlexValue[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveGridProps {
-  autoRows?: GridAutoRows | GridAutoRows[]
-  autoCols?: GridAutoCols | GridAutoCols[]
-  autoFlow?: GridAutoFlow | GridAutoFlow[]
-  columns?: number | number[]
-  // gap?: number | number[]
-  // gapX?: number | number[]
-  // gapY?: number | number[]
-  rows?: number | number[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveGridItemProps {
-  column?: GridItemColumn | GridItemColumn[]
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  row?: GridItemRow | GridItemRow[]
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
-
-/**
- * @public
- * @deprecated
- */
-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
- */
-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
- */
-export interface ResponsiveRadiusProps {
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveShadowProps {
-  shadow?: number | number[]
-}
-
-/**
- * @public
- * @deprecated
- */
-export interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
-}
-
-/**
- * @public
- */
-export type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>

package/src/ui/types/avatar.ts

@@ -1,19 +0,0 @@
-export {
-  /** @deprecated Use `AvatarSize` from `@sanity/ui/theme' instead. */
-  type AvatarSize,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/**
- * @public
- */
-// export type AvatarSize = 0 | 1 | 2 | 3
-
-/**
- * @public
- */
-export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/ui/types/box.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/ui/types/button.ts

@@ -1,24 +0,0 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `ThemeColorButtonModeKey` instead
- */
-export type ButtonMode = ThemeColorButtonModeKey
-
-/**
- * @public
- */
-export type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
- */
-export type ButtonTone = ThemeColorStateToneKey
-
-/**
- * @public
- * @deprecated Use `Width` from `@sanity/ui/css` instead.
- */
-export type ButtonWidth = 'fill'

package/src/ui/types/flex.ts

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

package/src/ui/types/grid.ts

@@ -1,17 +0,0 @@
-export {
-  /**
-   * @public
-   * @deprecated Use `GridAutoCols` 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/ui/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/ui/types/index.ts

@@ -1,15 +0,0 @@
-export * from './avatar'
-export * from './badge'
-export * from './box'
-export * from './button'
-export * from './card'
-export * from './dialog'
-export * from './flex'
-export * from './grid'
-export * from './gridItem'
-export * from './placement'
-export * from './popover'
-export * from './props'
-export * from './radius'
-export * from './selectable'
-export * from './text'

package/src/ui/types/props.ts

@@ -1,18 +0,0 @@
-import type {ComponentProps, ElementType} from 'react'
-
-export interface PolymorphicProps {
-  as?: ElementType
-}
-
-/** @public */
-export type ElementProps<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
-
-/** @public */
-export type Assign<T, U> = Omit<T, keyof U> & U
-
-/** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
-  ElementProps<E> & PolymorphicProps,
-  P
->

package/src/ui/types/radius.ts

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

package/src/ui/types/selectable.ts

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

package/src/ui/types/text.ts

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

package/src/ui/utils/arrow/arrow.tsx

@@ -1,59 +0,0 @@
-import {_arrow, _arrowShape, _arrowStroke} from '@sanity/ui/css'
-import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
-
-import {useTheme_v2} from '../../_compat'
-import {Props} from '../../types'
-import {compileCommands, getRoundedCommands, Point} from './cmds'
-
-/** @internal */
-export const Arrow = forwardRef(function Arrow(
-  props: Props<{width: number; height: number; radius?: number}, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-): ReactElement {
-  const {width: w, height: h, radius = 0, style, ...restProps} = props
-  const {card} = useTheme_v2()
-  const strokeWidth = card.shadow.outline
-
-  const center = w / 2
-
-  const path = useMemo(() => {
-    const points: Point[] = [
-      {x: 0, y: 0},
-      {x: radius, y: 0, radius},
-      {x: center, y: h - 1, radius},
-      {x: w - radius, y: 0, radius},
-      {x: w, y: 0},
-    ]
-
-    const cmds = getRoundedCommands(points)
-
-    return compileCommands(cmds)
-  }, [center, h, radius, w])
-
-  const strokePath = `${path}`
-  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
-
-  return (
-    <div
-      {...restProps}
-      className={_arrow()}
-      ref={ref}
-      style={{...style, '--arrow-size': `${w}px`} as CSSProperties}
-    >
-      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
-        <mask id="stroke-mask">
-          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
-        </mask>
-        <path
-          className={_arrowStroke()}
-          d={strokePath}
-          mask="url(#stroke-mask)"
-          strokeWidth={strokeWidth * 2}
-        />
-        <path className={_arrowShape()} d={fillPath} />
-      </svg>
-    </div>
-  )
-})
-
-Arrow.displayName = 'ForwardRef(Arrow)'

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

@@ -1,24 +0,0 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
-
-import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
-
-/**
- * @public
- */
-export interface BoundaryElementProviderProps {
-  children: ReactNode
-  element: HTMLElement | null
-}
-
-/**
- * @public
- */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement {
-  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/ui/utils/conditionalWrapper/conditionalWrapper.tsx

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

package/src/ui/utils/elementQuery/elementQuery.tsx

@@ -1,53 +0,0 @@
-import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
-
-import {useTheme_v2} from '../../_compat'
-import {useElementSize} from '../../hooks'
-import {Props} from '../../types'
-import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface MediaQueryProps {
-  media?: number[]
-}
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const ElementQuery = forwardRef(function ElementQuery(
-  props: Props<MediaQueryProps, 'div'>,
-  forwardedRef: 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/ui/utils/errorBoundary.tsx

@@ -1,48 +0,0 @@
-import {Component, ErrorInfo, PropsWithChildren, ReactNode} from 'react'
-
-import {Code} from '../primitives/code'
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: 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: ErrorInfo): void {
-    this.props.onCatch({error, info})
-  }
-
-  render(): 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/ui/utils/layer/layer.tsx

@@ -1,112 +0,0 @@
-import {
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
-import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
-
-/**
- * @public
- */
-export interface LayerProps extends BoxProps {
-  /** 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 extends BoxProps {
-  onActivate?: LayerProps['onActivate']
-}
-
-const LayerChildren = forwardRef(function LayerChildren(
-  props: Props<LayerChildrenProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    children,
-    onActivate,
-    onFocus,
-    position = 'relative',
-    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(
-    (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 (
-    <Box
-      data-ui="Layer"
-      {...restProps}
-      onFocus={handleFocus}
-      position={position}
-      ref={ref}
-      style={{...style, zIndex}}
-    >
-      {children}
-    </Box>
-  )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: Props<LayerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children, zOffset = 1, ...restProps} = props
-
-  return (
-    <LayerProvider zOffset={zOffset}>
-      <LayerChildren {...restProps} ref={ref}>
-        {children}
-      </LayerChildren>
-    </LayerProvider>
-  )
-})
-
-Layer.displayName = 'ForwardRef(Layer)'