@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

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/badge.ts

@@ -1,12 +0,0 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated No longer used
- */
-export type BadgeMode = 'default' | 'outline'
-
-/**
- * @public
- */
-export type BadgeTone = ThemeColorStateToneKey

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/card.ts

@@ -1,6 +0,0 @@
-import {ThemeColorCardToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/ui/types/dialog.ts

@@ -1,4 +0,0 @@
-/**
- * @public
- */
-export type DialogPosition = 'absolute' | 'fixed'

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/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/popover.ts

@@ -1,4 +0,0 @@
-/**
- * @beta
- */
-export type PopoverMargins = [number, number, number, number]

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/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/arrow/index.ts

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

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

@@ -1,100 +0,0 @@
-/** @jest-environment jsdom */
-
-import {render} from '../../../../test'
-import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
-import {useBoundaryElement} from './useBoundaryElement'
-
-describe('utils/boundaryElement', () => {
-  describe('useBoundaryElement', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: BoundaryElementContextValue = {
-          version: 0.0,
-          element: null,
-        }
-
-        return (
-          <BoundaryElementContext.Provider value={value}>
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should provide default value when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <BoundaryElementContext.Provider value={value as any}>
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useBoundaryElement()
-        } 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 (
-          <BoundaryElementContext.Provider value={value as any}>
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useBoundaryElement(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/ui/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/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/boundaryElement/index.ts

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

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

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

package/src/ui/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/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/conditionalWrapper/index.ts

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

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

@@ -1,30 +0,0 @@
-import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const TestCard = styled(Card)`
-  --card-fg-color: orange;
-
-  [data-eq-min~='0'] > & {
-    --card-fg-color: green;
-  }
-
-  [data-eq-min~='1'] > & {
-    --card-fg-color: blue;
-  }
-`
-
-export default function CustomMediaQuery() {
-  return (
-    <Box padding={[3, 4, 5]}>
-      <Box marginBottom={[3, 4, 5]}>
-        <Text>Resize this frame to see the text color change:</Text>
-      </Box>
-
-      <ElementQuery media={[100, 200, 300]}>
-        <TestCard padding={2} shadow={1}>
-          <Text>This card sits inside an element query.</Text>
-        </TestCard>
-      </ElementQuery>
-    </Box>
-  )
-}

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/elementQuery/index.ts

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