@sanity/ui 4.0.0-static.9 → 4.0.0

package/src/core/utils/portal/portal.tsx

@@ -1,36 +0,0 @@
-import type {ReactNode, ReactPortal} from 'react'
-import {createPortal} from 'react-dom'
-
-import {CardProvider} from '../../primitives/card/cardProvider'
-import {useCard} from '../../primitives/card/useCard'
-import {usePortal} from './usePortal'
-
-/** @public */
-export interface PortalProps {
-  children: ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/** @public */
-export function Portal(props: PortalProps): ReactPortal | null {
-  const {children, __unstable_name: name} = props
-  const card = useCard()
-  const portal = usePortal()
-  const portalElement =
-    (name ? portal.elements && portal.elements[name] : portal.element) ||
-    portal.elements?.['default']
-
-  if (!portalElement) {
-    return null
-  }
-
-  return createPortal(
-    <CardProvider tone="transparent" scheme={card.scheme}>
-      {children}
-    </CardProvider>,
-    portalElement,
-  )
-}

package/src/core/utils/portal/portalContext.ts

@@ -1,37 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {globalScope} from '../../lib/globalScope'
-import type {PortalContextValue} from './types'
-
-const key = '@sanity/ui/v3/portal'
-const elementKey = Symbol.for(`${key}/element`)
-
-// Use the global scope as a map of symbols to elements
-const elementMap = globalScope as Record<symbol, HTMLDivElement | null>
-
-elementMap[elementKey] = null
-
-export const defaultContextValue: PortalContextValue = {
-  version: 0.0,
-  boundaryElement: null,
-  get element() {
-    if (typeof document === 'undefined') {
-      return null
-    }
-
-    if (elementMap[elementKey]) {
-      return elementMap[elementKey]
-    }
-
-    elementMap[elementKey] = document.createElement('div')
-    elementMap[elementKey].setAttribute('data-portal', '')
-
-    document.body.appendChild(elementMap[elementKey])
-
-    return elementMap[elementKey]
-  },
-}
-
-export const PortalContext: Context<PortalContextValue> =
-  createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

package/src/core/utils/portal/portalProvider.tsx

@@ -1,70 +0,0 @@
-import {type ReactNode, useContext, useMemo, useRef, useSyncExternalStore} from 'react'
-
-import {PortalContext} from './portalContext'
-import type {PortalContextValue} from './types'
-
-/** @public */
-export interface PortalProviderProps {
-  children: ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/** @public */
-export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
-  const {children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
-  const parentPortal = useContext(PortalContext)
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => elements?.['default'] ?? (parentPortal.element || document.body),
-    () => null,
-  )
-
-  const value: PortalContextValue = useMemo(() => {
-    return {
-      version: 0.0,
-      boundaryElement: null,
-      element: element || fallbackElement,
-      elements,
-    }
-  }, [element, elements, fallbackElement])
-
-  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
-}
-
-const emptySubscribe = () => () => {}
-
-/**
- * This is a React hook to make sure that a record identity is the same on every render. Uses strict
- * equality comparison (eg by identity), and only goes one level deep.
- */
-function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}
-
-function _isEqual(objA: Comparable, objB: Comparable): boolean {
-  if (!objA || !objB) {
-    return objA === objB
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  return keysA.every((key) => objA[key] === objB[key])
-}
-
-type Comparable = Record<string | number | symbol, unknown> | undefined | null

package/src/core/utils/portal/types.ts

@@ -1,7 +0,0 @@
-/** @public */
-export interface PortalContextValue {
-  version: 0.0
-  boundaryElement: HTMLElement | null
-  element: HTMLElement | null
-  elements?: Record<string, HTMLElement | null | undefined>
-}

package/src/core/utils/portal/usePortal.ts

@@ -1,23 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
-import type {PortalContextValue} from './types'
-
-/** @public */
-export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
-
-  if (!value) {
-    throw new Error('usePortal(): missing context value')
-  }
-
-  // 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 (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('usePortal(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/css/_assign.ts

@@ -1,3 +0,0 @@
-export function _assign<T extends object, U extends object>(target: T, source: U): T & U {
-  return Object.assign(target, source)
-}

package/src/css/_composeClassNames.ts

@@ -1,12 +0,0 @@
-import {_getClassNames} from './_getClassNames'
-
-/** @internal */
-export function _composeClassNames(
-  ...classNames: Array<string | false | undefined>
-): string | undefined {
-  return unique(_getClassNames(...classNames)).join(' ') || undefined
-}
-
-function unique<T>(array: T[]): T[] {
-  return Array.from(new Set(array))
-}

package/src/css/_fromEntries.ts

@@ -1,3 +0,0 @@
-export function _fromEntries<K extends string | number | symbol, T>(entries: [K, T][]) {
-  return Object.fromEntries(entries) as Record<K, T>
-}

package/src/css/_getClassNames.ts

@@ -1,9 +0,0 @@
-/** @internal */
-export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
-  return classNames
-    .map((n) => typeof n === 'string' && n.trim())
-    .filter(Boolean)
-    .join(' ')
-    .split(' ')
-    .filter(Boolean)
-}

package/src/css/_responsiveClassName.ts

@@ -1,45 +0,0 @@
-// import {MEDIA} from './constants'
-import {BREAKPOINTS} from './constants'
-import type {ResponsiveProp, ResponsiveRuleOptions} from './types'
-
-export function _responsiveClassName<T extends string | number>(
-  rules: ResponsiveRuleOptions<T>,
-  _value: ResponsiveProp<T | boolean> | T | undefined,
-  options?: {
-    valueWhenTrue: T
-  },
-): string | undefined {
-  let value = _value
-
-  if (value === undefined) {
-    return undefined
-  }
-
-  if (typeof value === 'boolean') {
-    if (value && options?.valueWhenTrue) {
-      value = options.valueWhenTrue
-    } else {
-      return undefined
-    }
-  }
-
-  if (typeof value === 'string' || typeof value === 'number') {
-    return rules[value]?.[0]
-  }
-
-  const classNames: string[] = []
-
-  for (const _index of Object.keys(BREAKPOINTS)) {
-    const index = Number(_index) as keyof typeof BREAKPOINTS
-
-    const valueAtIndex = value[index]
-
-    if (valueAtIndex !== undefined && valueAtIndex !== null && typeof valueAtIndex !== 'boolean') {
-      const rule = rules[valueAtIndex]
-
-      classNames.push(rule[index])
-    }
-  }
-
-  return classNames.join(' ') || undefined
-}

package/src/css/_responsiveStyle.css.ts

@@ -1,34 +0,0 @@
-import {style, type StyleRule} from '@vanilla-extract/css'
-
-import {BREAKPOINTS} from './constants'
-import type {ResponsiveRules} from './types'
-
-export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRules {
-  const rules: Partial<ResponsiveRules> = {}
-
-  for (const _index of Object.keys(BREAKPOINTS)) {
-    const index = Number(_index) as keyof typeof BREAKPOINTS
-
-    const bp = BREAKPOINTS[index]
-
-    if (bp === 0) {
-      rules[index] = style({
-        '@layer': {
-          [layer]: rule,
-        },
-      })
-    } else {
-      rules[index] = style({
-        '@layer': {
-          [layer]: {
-            '@media': {
-              [`screen and (min-width: ${bp}px)`]: rule,
-            },
-          },
-        },
-      })
-    }
-  }
-
-  return rules as ResponsiveRules
-}

package/src/css/_style.css.ts

@@ -1,9 +0,0 @@
-import {style, type StyleRule} from '@vanilla-extract/css'
-
-export function _style(layer: string, rule: StyleRule): string {
-  return style({
-    '@layer': {
-      [layer]: rule,
-    },
-  })
-}

package/src/css/components/breadcrumbs/breadcrumbs.css.ts

@@ -1,6 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const root: string = _style(layers.components, {
-  lineHeight: 0,
-})

package/src/css/components/breadcrumbs/breadcrumbs.ts

@@ -1,7 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root} from './breadcrumbs.css'
-
-/** @public */
-export function breadcrumbs(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}

package/src/css/components/dialog/dialog.css.ts

@@ -1,98 +0,0 @@
-import {keyframes} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-const zoomIn = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'scale(0.95)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'scale(1)',
-  },
-})
-
-const fadeIn = keyframes({
-  from: {
-    opacity: 0,
-  },
-  to: {
-    opacity: 1,
-  },
-})
-
-export const root: string = _style(layers.components, {
-  alignItems: 'center',
-  justifyContent: 'center',
-  outline: 'none',
-
-  background: vars.color.backdrop,
-
-  selectors: {
-    '&[data-animate]': {
-      animation: `${fadeIn} 200ms ease-out`,
-    },
-  },
-})
-
-export const card: string = _style(layers.components, {
-  width: '100%',
-  maxHeight: '100%',
-  overflow: ['hidden', 'clip'],
-
-  selectors: {
-    '[data-animate] > &': {
-      animation: `${zoomIn} 200ms ease-out`,
-    },
-  },
-})
-
-export const container: string = _style(layers.components, {
-  width: '100%',
-  height: '100%',
-})
-
-export const scroller: string = _style(layers.components, {
-  width: '100%',
-  height: '100%',
-  // overflow: 'auto',
-  outline: 'none',
-})
-
-export const scrollerShadowTop: string = _style(layers.components, {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 4,
-  background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
-  boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
-  pointerEvents: 'none',
-})
-
-export const scrollerShadowBottom: string = _style(layers.components, {
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  height: 4,
-  background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
-  boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
-  pointerEvents: 'none',
-})
-
-export const header: string = _style(layers.components, {
-  zIndex: 2,
-})
-
-export const content: string = _style(layers.components, {
-  zIndex: 1,
-  outline: 'none',
-})
-
-export const footer: string = _style(layers.components, {
-  zIndex: 3,
-})

package/src/css/components/dialog/dialog.ts

@@ -1,58 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {inset} from '../../props/inset/inset'
-import {
-  card,
-  container,
-  content,
-  footer,
-  header,
-  root,
-  scroller,
-  scrollerShadowBottom,
-  scrollerShadowTop,
-} from './dialog.css'
-
-/** @public */
-export function dialog(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root, inset({inset: 0}))
-}
-
-/** @public */
-export function dialogCard(): string | undefined {
-  return card
-}
-
-/** @public */
-export function dialogContainer(): string | undefined {
-  return container
-}
-
-/** @public */
-export function dialogHeader(): string | undefined {
-  return header
-}
-
-/** @public */
-export function dialogContent(): string | undefined {
-  return content
-}
-
-/** @public */
-export function dialogScroller(): string | undefined {
-  return scroller
-}
-
-/** @public */
-export function dialogScrollerShadowTop(): string | undefined {
-  return scrollerShadowTop
-}
-
-/** @public */
-export function dialogScrollerShadowBottom(): string | undefined {
-  return scrollerShadowBottom
-}
-
-/** @public */
-export function dialogFooter(): string | undefined {
-  return footer
-}

package/src/css/components/menu/menu.css.ts

@@ -1,14 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.components, {
-  outline: 'none',
-})
-
-export const divider: string = _style(layers.components, {
-  height: vars.card.border.width,
-  border: 0,
-  backgroundColor: vars.color.border,
-  margin: 0,
-})

package/src/css/components/menu/menu.ts

@@ -1,12 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {divider, root} from './menu.css'
-
-/** @public */
-export function menu(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}
-
-/** @public */
-export function menuDivider(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, divider)
-}

package/src/css/components/skeleton/skeleton.css.ts

@@ -1,128 +0,0 @@
-import {
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  type FontCodeSize,
-  type FontHeadingSize,
-  type FontLabelSize,
-  type FontTextSize,
-} from '@sanity/ui/theme'
-import {keyframes} from '@vanilla-extract/css'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import {vars} from '../../vars.css'
-
-const pulse = keyframes({
-  '0%': {
-    backgroundPosition: '100%',
-  },
-  '100%': {
-    backgroundPosition: '-100%',
-  },
-})
-
-export const root: string = _style(layers.components, {
-  'backgroundColor': vars.color.skeleton.from,
-  'backgroundPosition': '100%',
-  'backgroundSize': '200% 100%',
-  'backgroundAttachment': 'fixed',
-  'opacity': 0,
-  'transition': 'opacity 200ms ease-in',
-
-  'selectors': {
-    '&[data-animated]': {
-      backgroundImage: [
-        `linear-gradient(to right,`,
-        `${vars.color.skeleton.from},`,
-        `${vars.color.skeleton.to},`,
-        `${vars.color.skeleton.from},`,
-        `${vars.color.skeleton.from},`,
-        `${vars.color.skeleton.from}`,
-        `)`,
-      ].join(''),
-      animationName: pulse,
-      animationTimingFunction: 'ease-in-out',
-      animationIterationCount: 'infinite',
-      animationDuration: '2000ms',
-    },
-
-    '&[data-visible]': {
-      opacity: 1,
-    },
-  },
-
-  '@media': {
-    'screen and (prefers-reduced-motion: no-preference)': {
-      backgroundColor: vars.color.skeleton.from,
-    },
-  },
-})
-
-export const font: string = _style(layers.components, {
-  height: `calc(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`,
-})
-
-export const codeScale: ResponsiveRuleOptions<FontCodeSize> = {
-  ..._fromEntries(
-    FONT_CODE_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.code.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.code.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.code.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const headingScale: ResponsiveRuleOptions<FontHeadingSize> = {
-  ..._fromEntries(
-    FONT_HEADING_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.heading.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.heading.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.heading.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const labelScale: ResponsiveRuleOptions<FontLabelSize> = {
-  ..._fromEntries(
-    FONT_LABEL_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.label.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.label.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.label.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const textScale: ResponsiveRuleOptions<FontTextSize> = {
-  ..._fromEntries(
-    FONT_TEXT_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.components, {
-        vars: {
-          [vars.font.skeleton.lineHeight]: vars.font.text.scale[s].lineHeight,
-          [vars.font.skeleton.ascenderHeight]: vars.font.text.scale[s].ascenderHeight,
-          [vars.font.skeleton.descenderHeight]: vars.font.text.scale[s].descenderHeight,
-        },
-      }),
-    ]),
-  ),
-}

package/src/css/components/skeleton/skeleton.ts

@@ -1,38 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {flex} from '../../props/flex/flex'
-import {margin} from '../../props/margin/margin'
-import {radius} from '../../props/radius/radius'
-import {codeScale, font, headingScale, labelScale, root, textScale} from './skeleton.css'
-import type {
-  CodeSkeletonStyleProps,
-  HeadingSkeletonStyleProps,
-  LabelSkeletonStyleProps,
-  SkeletonStyleProps,
-  TextSkeletonStyleProps,
-} from './types'
-
-/** @beta */
-export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, flex(props), radius(props), margin(props))
-}
-
-/** @beta */
-export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(codeScale, props.size))
-}
-
-/** @beta */
-export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(headingScale, props.size))
-}
-
-/** @beta */
-export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(labelScale, props.size))
-}
-
-/** @beta */
-export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, font, _responsiveClassName(textScale, props.size))
-}