@sanity/ui 3.0.2 → 4.0.0-static.2

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,17 +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')
-  }
-
-  return value as unknown as ThemeContextValue
-}

package/src/core/theme/useTheme.ts

@@ -1,16 +0,0 @@
-import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from 'styled-components'
-
-/**
- * @public
- */
-export function useTheme(): Theme {
-  return useStyledTheme() as Theme
-}
-
-/**
- * @public
- */
-export function useTheme_v2(): Theme_v2 {
-  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/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,14 +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 './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,123 +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)
-
-  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/index.ts

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

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

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

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

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

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

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

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

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

package/src/core/utils/index.ts

@@ -1,9 +0,0 @@
-export * from './arrow'
-export * from './boundaryElement'
-export * from './conditionalWrapper'
-export * from './elementQuery'
-export * from './errorBoundary'
-export * from './layer'
-export * from './portal'
-export * from './srOnly'
-export * from './virtualList'

package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx

@@ -1,13 +0,0 @@
-import {Card, Layer} from '@sanity/ui'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function ResponsiveZOffsetStory() {
-  return (
-    <Layer id="responsive-layer" zOffset={[1, 2, 3, 4, 5, 6, 7]}>
-      <Card padding={[1, 2, 3, 4, 5, 6, 7]} shadow={1}>
-        <LayerDebugInfo />
-      </Card>
-    </Layer>
-  )
-}

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

@@ -1,4 +0,0 @@
-export * from './layer'
-export * from './layerProvider'
-export * from './types'
-export * from './useLayer'

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

@@ -1,7 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {LayerContextValue} from './types'
-
-export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(
-  '@sanity/ui/context/layer',
-  null,
-)

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.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/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'