@sanity/ui 3.3.2 → 3.3.4

package/src/core/theme/themeProvider.tsx

@@ -1,62 +0,0 @@
-import {
-  getScopedTheme,
-  type RootTheme,
-  type Theme,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-} from '@sanity/ui/theme'
-import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from 'styled-components'
-
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export interface ThemeProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  theme?: RootTheme
-  tone?: ThemeColorCardToneKey
-}
-
-/**
- * @public
- */
-export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
-  const parentTheme = useContext(ThemeContext)
-  const {children} = props
-  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
-  const rootTheme = props.theme ?? (parentTheme?.theme || null)
-  const tone = props.tone ?? (parentTheme?.tone || 'default')
-
-  const themeContext: ThemeContextValue | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return {
-      version: 0.0,
-      theme: rootTheme,
-      scheme,
-      tone,
-    }
-  }, [rootTheme, scheme, tone])
-
-  const theme: Theme | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return getScopedTheme(rootTheme, scheme, tone)
-  }, [scheme, rootTheme, tone])
-
-  if (!theme) {
-    return <pre>ThemeProvider: no "theme" property provided</pre>
-  }
-
-  return (
-    <ThemeContext.Provider value={themeContext}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-    </ThemeContext.Provider>
-  )
-}
-
-ThemeProvider.displayName = 'ThemeProvider'

package/src/core/theme/types.ts

@@ -1,12 +0,0 @@
-import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorCardToneKey
-}

package/src/core/theme/useRootTheme.ts

@@ -1,18 +0,0 @@
-import {useContext} from 'react'
-
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export function useRootTheme(): ThemeContextValue {
-  const value = useContext(ThemeContext)
-
-  if (!value) {
-    throw new Error('useRootTheme(): missing context value')
-  }
-
-  // oxlint-disable-next-line no-unnecessary-type-assertion, no-unsafe-type-assertion
-  return value as unknown as ThemeContextValue
-}

package/src/core/theme/useTheme.ts

@@ -1,18 +0,0 @@
-import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from 'styled-components'
-
-/**
- * @public
- */
-export function useTheme(): Theme {
-  // oxlint-disable-next-line no-unnecessary-type-assertion
-  return useStyledTheme() as Theme
-}
-
-/**
- * @public
- */
-export function useTheme_v2(): Theme_v2 {
-  // oxlint-disable-next-line no-unnecessary-type-assertion
-  return getTheme_v2(useStyledTheme() as Theme)
-}

package/src/core/types/avatar.ts

@@ -1,14 +0,0 @@
-/**
- * @public
- */
-export type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/**
- * @public
- */
-export type AvatarSize = 0 | 1 | 2 | 3
-
-/**
- * @public
- */
-export type AvatarStatus = 'online' | 'editing' | 'inactive'

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

@@ -1,19 +0,0 @@
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
-
-/**
- * @public
- */
-export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
-
-/**
- * @public
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/core/types/button.ts

@@ -1,21 +0,0 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type ButtonMode = ThemeColorButtonModeKey
-
-/**
- * @public
- */
-export type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- */
-export type ButtonTone = ThemeColorStateToneKey
-
-/**
- * @public
- */
-export type ButtonWidth = 'fill'

package/src/core/types/card.ts

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

package/src/core/types/component.ts

@@ -1,32 +0,0 @@
-/**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
- *
- * @public
- */
-export type Assign<T extends object, U extends object> = Omit<T, keyof U> & U
-
-/** @public */
-export type EmptyProps = object
-
-/** @public */
-export type TagType = keyof React.JSX.IntrinsicElements
-
-/** @public */
-export type ComponentType<P = any> =
-  | React.FunctionComponent<P>
-  | React.ComponentClass<P>
-  | React.ExoticComponent<P>
-
-/** @public */
-export type ElementType<P = any> = TagType | ComponentType<P>
-
-/**
- * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
- * (defaulting to the component's own element), with the component's own props assigned on top.
- *
- * @public
- */
-export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
-  P & {as?: E}
->

package/src/core/types/dialog.ts

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

package/src/core/types/flex.ts

@@ -1,30 +0,0 @@
-/**
- * @public
- */
-export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-
-/**
- * @public
- */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
-
-/**
- * @public
- */
-export type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-
-/**
- * @public
- */
-export type FlexValue = number | 'none' | 'auto' | 'initial'
-
-/**
- * @public
- */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'

package/src/core/types/grid.ts

@@ -1,14 +0,0 @@
-/**
- * @public
- */
-export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
-
-/**
- * @public
- */
-export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
-
-/**
- * @public
- */
-export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'

package/src/core/types/gridItem.ts

@@ -1,29 +0,0 @@
-/**
- * @public
- */
-export type GridItemColumn = 'auto' | 'full' | number
-
-/**
- * @public
- */
-export type GridItemColumnStart = 'auto' | number
-
-/**
- * @public
- */
-export type GridItemColumnEnd = 'auto' | number
-
-/**
- * @public
- */
-export type GridItemRow = 'auto' | 'full' | number
-
-/**
- * @public
- */
-export type GridItemRowStart = 'auto' | number
-
-/**
- * @public
- */
-export type GridItemRowEnd = 'auto' | number

package/src/core/types/index.ts

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

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

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

package/src/core/types/radius.ts

@@ -1,4 +0,0 @@
-/**
- * @public
- */
-export type Radius = number | 'full'

package/src/core/types/selectable.ts

@@ -1,6 +0,0 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export type SelectableTone = ThemeColorStateToneKey

package/src/core/types/text.ts

@@ -1,4 +0,0 @@
-/**
- * @public
- */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'

package/src/core/utils/arrow/arrow.tsx

@@ -1,124 +0,0 @@
-import {ForwardedRef, forwardRef, HTMLProps} from 'react'
-import {css, styled} from 'styled-components'
-
-import {useTheme_v2} from '../../theme'
-import {compileCommands, getRoundedCommands, Point} from './cmds'
-
-const StyledArrow = styled.div<{$w: number}>(
-  ({$w: w}) => css`
-    position: absolute;
-    width: ${w}px;
-    height: ${w}px;
-
-    :empty + & {
-      display: none;
-    }
-
-    & > svg {
-      display: block;
-      line-height: 0;
-      transform-origin: ${w / 2}px ${w / 2}px;
-    }
-
-    [data-placement^='top'] > & {
-      bottom: -${w}px;
-
-      & > svg {
-        transform: rotate(0);
-      }
-    }
-
-    [data-placement^='right'] > & {
-      left: -${w}px;
-
-      & > svg {
-        transform: rotate(90deg);
-      }
-    }
-
-    [data-placement^='left'] > & {
-      right: -${w}px;
-
-      & > svg {
-        transform: rotate(-90deg);
-      }
-    }
-
-    [data-placement^='bottom'] > & {
-      top: -${w}px;
-
-      & > svg {
-        transform: rotate(180deg);
-      }
-    }
-  `,
-)
-
-const StrokePath = styled.path`
-  stroke: var(--card-shadow-outline-color);
-`
-
-const ShapePath = styled.path`
-  fill: var(--card-bg-color);
-`
-
-/** @internal */
-export const Arrow = forwardRef(function Arrow(
-  props: {width: number; height: number; radius?: number} & Omit<
-    HTMLProps<HTMLDivElement>,
-    'width' | 'height'
-  >,
-  ref: ForwardedRef<HTMLDivElement>,
-): React.JSX.Element {
-  const {width: w, height: h, radius = 0, ...restProps} = props
-  const {card} = useTheme_v2()
-  const strokeWidth = card.shadow.outline
-
-  const center = w / 2
-
-  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)
-  const path = compileCommands(cmds)
-
-  // oxlint-disable-next-line no-unnecessary-template-expression
-  const strokePath = `${path}`
-  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
-
-  return (
-    <StyledArrow {...restProps} $w={w} ref={ref}>
-      <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>
-        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
-        <ShapePath d={fillPath} />
-      </svg>
-    </StyledArrow>
-  )
-})
-Arrow.displayName = 'ForwardRef(Arrow)'

package/src/core/utils/arrow/cmds.ts

@@ -1,91 +0,0 @@
-export interface PointCmd {
-  type: 'point'
-  x: number
-  y: number
-  radius?: number
-}
-
-export interface CurveCmd {
-  type: 'curve'
-  startControl: Point
-  endControl: Point
-  curveEnd: Point
-}
-
-export type Cmd = PointCmd | CurveCmd
-
-export interface Point {
-  x: number
-  y: number
-  radius?: number
-}
-
-function moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {
-  const width = targetPoint.x - movingPoint.x
-  const height = targetPoint.y - movingPoint.y
-
-  const distance = Math.sqrt(width * width + height * height)
-
-  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))
-}
-
-function moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {
-  return {
-    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,
-  }
-}
-
-export function getRoundedCommands(points: Point[]): Cmd[] {
-  const len = points.length
-
-  const cmds: Cmd[] = []
-
-  for (let i = 0; i < len; i += 1) {
-    const point = points[i]
-    const prevPoint = points[i - 1]
-    const nextPoint = points[i + 1]
-
-    if (prevPoint && point.radius) {
-      const curveStart = moveTowardsLength(point, prevPoint, point.radius)
-      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)
-      const startControl = moveTowardsFractional(curveStart, point, 0.5)
-      const endControl = moveTowardsFractional(point, curveEnd, 0.5)
-
-      cmds.push({
-        type: 'point',
-        ...curveStart,
-      })
-
-      cmds.push({
-        type: 'curve',
-        curveEnd,
-        startControl,
-        endControl,
-      })
-    } else {
-      cmds.push({
-        type: 'point',
-        ...point,
-      })
-    }
-  }
-
-  return cmds
-}
-
-export function compileCommands(cmds: Cmd[]): string {
-  return cmds
-    .map((n, idx) => {
-      if (n.type === 'point') {
-        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`
-      }
-
-      if (n.type === 'curve') {
-        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`
-      }
-
-      return ``
-    })
-    .join(' ')
-}

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

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

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

@@ -1,105 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {describe, expect, it, vi} from 'vitest'
-
-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 = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: BoundaryElementContextValue = {
-          version: 0.0,
-          element: null,
-        }
-
-        return (
-          // oxlint-disable-next-line jsx-no-constructed-context-values
-          <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 = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          // oxlint-disable-next-line no-unsafe-type-assertion
-          <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 = vi.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 (
-          // oxlint-disable-next-line jsx-no-constructed-context-values, no-unsafe-type-assertion
-          <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',
-      )
-    })
-  })
-})