@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/components/dialog/styles.ts

@@ -1,77 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {_responsive, ThemeProps} from '../../styles'
-import {DialogPosition} from '../../types'
-
-/**
- * @internal
- */
-export interface ResponsiveDialogPositionStyleProps {
-  $position: DialogPosition[]
-}
-
-export function dialogStyle({theme}: ThemeProps): CSSObject {
-  const {color} = getTheme_v2(theme)
-
-  return {
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
-    'background': color.backdrop,
-  }
-}
-
-export function responsiveDialogPositionStyle(
-  props: ResponsiveDialogPositionStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
-}
-
-/**
- * @internal
- */
-export interface AnimationDialogStyleProps {
-  $animate: boolean
-}
-
-export function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {
-  if (!props.$animate) return css``
-
-  return css`
-    @keyframes zoomIn {
-      from {
-        opacity: 0;
-        transform: scale(0.95);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    animation: fadeIn 200ms ease-out;
-    // Animates the dialog card.
-    & > [data-ui='DialogCard'] {
-      animation: zoomIn 200ms ease-out;
-    }
-  `
-}

package/src/core/components/hotkeys/index.ts

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

package/src/core/components/index.ts

@@ -1,9 +0,0 @@
-export * from './autocomplete'
-export * from './breadcrumbs'
-export * from './dialog'
-export * from './hotkeys'
-export * from './menu'
-export * from './skeleton'
-export * from './tab'
-export * from './toast'
-export * from './tree'

package/src/core/components/menu/index.ts

@@ -1,5 +0,0 @@
-export * from './menu'
-export * from './menuButton'
-export * from './menuDivider'
-export * from './menuGroup'
-export * from './menuItem'

package/src/core/components/menu/menuDivider.ts

@@ -1,12 +0,0 @@
-import {styled} from 'styled-components'
-
-/**
- * @public
- */
-export const MenuDivider = styled.hr`
-  height: 1px;
-  border: 0;
-  background: var(--card-hairline-soft-color);
-  margin: 0;
-`
-MenuDivider.displayName = 'MenuDivider'

package/src/core/components/skeleton/index.ts

@@ -1,2 +0,0 @@
-export * from './skeleton'
-export * from './textSkeleton'

package/src/core/components/skeleton/skeleton.tsx

@@ -1,57 +0,0 @@
-import {forwardRef, useEffect, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {skeletonStyle} from './styles'
-
-const StyledSkeleton = styled(Box)<
-  {$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
->(responsiveRadiusStyle, skeletonStyle)
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const Skeleton = forwardRef(function Skeleton(
-  props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {animated = false, delay, radius, ...restProps} = props
-  const [visible, setVisible] = useState<boolean>(delay ? false : true)
-
-  useEffect(() => {
-    if (!delay) {
-      return setVisible(true)
-    }
-
-    const timeout = setTimeout(() => {
-      setVisible(true)
-    }, delay)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [delay])
-
-  return (
-    <StyledSkeleton
-      {...restProps}
-      $animated={animated}
-      $radius={useArrayProp(radius)}
-      $visible={visible}
-      ref={ref}
-    />
-  )
-})
-Skeleton.displayName = 'ForwardRef(Skeleton)'

package/src/core/components/skeleton/styles.ts

@@ -1,50 +0,0 @@
-import {css, keyframes} from 'styled-components'
-
-const keyframe = keyframes`
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-`
-
-const animation = css`
-  background-image: linear-gradient(
-    to right,
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-to),
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-from)
-  );
-  background-position: 100%;
-  background-size: 200% 100%;
-  background-attachment: fixed;
-  animation-name: ${keyframe};
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-  animation-duration: 2000ms;
-`
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
-  opacity: ${({$visible}) => ($visible ? 1 : 0)};
-  transition: opacity 200ms ease-in;
-
-  @media screen and (prefers-reduced-motion: no-preference) {
-    ${({$animated}) =>
-      $animated
-        ? animation
-        : css`
-            background-color: var(--card-skeleton-color-from);
-          `}
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    background-color: var(--card-skeleton-color-from);
-  }
-`

package/src/core/components/skeleton/textSkeleton.tsx

@@ -1,123 +0,0 @@
-import {getTheme_v2, ThemeFontKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useArrayProp} from '../../hooks'
-import {_responsive, ThemeProps} from '../../styles'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
-  props: {
-    $size: number[]
-    $style: ThemeFontKey
-  } & ThemeProps,
-) => {
-  const {$size, $style} = props
-  const {font, media} = getTheme_v2(props.theme)
-  const fontStyle = font[$style]
-
-  const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = fontStyle.sizes[sizeIndex]
-    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-    return {height: capHeight}
-  })
-
-  return styles
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: TextSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
-})
-TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: LabelSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
-})
-LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: HeadingSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
-})
-HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: CodeSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
-})
-CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

package/src/core/components/tab/index.ts

@@ -1,3 +0,0 @@
-export * from './tab'
-export * from './tabList'
-export * from './tabPanel'

package/src/core/components/toast/index.ts

@@ -1,4 +0,0 @@
-export * from './toast'
-export * from './toastProvider'
-export * from './types'
-export * from './useToast'

package/src/core/components/toast/styles.ts

@@ -1,77 +0,0 @@
-import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
-
-import {Card, Flex} from '../../primitives'
-import type {ButtonTone} from '../../types'
-
-const LOADING_BAR_HEIGHT = 2
-
-export const STATUS_CARD_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
-
-export const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
-
-export const TextBox = styled(Flex)`
-  overflow-x: auto;
-`
-
-export const StyledToast = styled(Card)`
-  pointer-events: all;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  overflow: clip;
-
-  &[data-has-duration] {
-    padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);
-  }
-`
-
-export const LoadingBar = styled.div`
-  display: flex;
-  position: absolute;
-  bottom: 0px;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  pointer-events: none;
-  z-index: -1;
-  overflow: hidden;
-  overflow: clip;
-  background: transparent;
-  align-items: flex-end;
-  will-change: opacity;
-`
-
-export const LoadingBarMask = styled(Card)`
-  position: absolute;
-  top: 0;
-  left: -${LOADING_BAR_HEIGHT}px;
-  right: -${LOADING_BAR_HEIGHT}px;
-  bottom: ${LOADING_BAR_HEIGHT}px;
-  z-index: 1;
-`
-
-type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
-  tone: ThemeColorStateToneKey
-}
-export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`
-  display: block;
-  height: 100%;
-  width: 100%;
-  transform-origin: 0% 50%;
-  background-color: ${(props) => {
-    const {color} = getTheme_v2(props.theme)
-
-    return color.button.default[props.tone].enabled.bg
-  }};
-`

package/src/core/components/tree/index.ts

@@ -1,4 +0,0 @@
-export * from './tree'
-export * from './treeItem'
-export * from './types'
-export * from './useTree'

package/src/core/components/tree/style.ts

@@ -1,105 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {rem, ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-
-export function treeItemRootStyle(): ReturnType<typeof css> {
-  return css`
-    &[role='none'] > [role='treeitem'] {
-      outline: none;
-      cursor: default;
-      border-radius: 3px;
-
-      background-color: var(--card-bg-color);
-      color: var(--treeitem-fg-color);
-
-      &:focus {
-        position: relative;
-      }
-    }
-
-    &[role='treeitem'] {
-      outline: none;
-
-      & > div {
-        cursor: default;
-        border-radius: 3px;
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
-      }
-
-      &:focus > div {
-        position: relative;
-      }
-    }
-  `
-}
-
-export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
-  const $tone = 'default'
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    &[role='none'] {
-      & > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        & > [role='treeitem']:focus {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-
-    &[role='treeitem'] {
-      & > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        &:focus > [data-ui='TreeItem__box'] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-  `
-}
-
-export interface TreeItemBoxStyleProps {
-  $level: number
-}
-
-export function treeItemBoxStyle(
-  props: TreeItemBoxStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$level} = props
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    padding-left: ${rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}

package/src/core/global.ts

@@ -1,6 +0,0 @@
-declare global {
-  // eslint-disable-next-line no-var
-  var __DEV__: boolean
-}
-
-export {}

package/src/core/helpers/index.ts

@@ -1,4 +0,0 @@
-export * from './animation'
-export * from './element'
-export * from './focus'
-export * from './scroll'

package/src/core/hooks/index.ts

@@ -1,12 +0,0 @@
-export * from './useArrayProp'
-export * from './useClickOutside'
-export * from './useClickOutsideEvent'
-export * from './useCustomValidity'
-export * from './useElementRect'
-export * from './useElementSize'
-export * from './useForwardedRef'
-export * from './useGlobalKeyDown'
-export * from './useMatchMedia'
-export * from './useMediaIndex'
-export * from './usePrefersDark'
-export * from './usePrefersReducedMotion'

package/src/core/hooks/useArrayProp.ts

@@ -1,31 +0,0 @@
-import {useState} from 'react'
-
-import {_getArrayProp} from '../styles'
-
-/** @beta */
-export type ArrayPropPrimitive = string | number | boolean | undefined | null
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal?: T[],
-): T[] {
-  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
-    _getArrayProp(val, defaultVal),
-    JSON.stringify(val ?? defaultVal),
-  ])
-
-  const hash = JSON.stringify(val ?? defaultVal)
-
-  if (hash !== cachedHash) {
-    // If the cached hash has changed, update the cache right away.
-    // Calling setState during render is fine in this case, and preferred over a useEffect loop
-    // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getArrayProp(val, defaultVal), hash])
-  }
-
-  return cachedVal
-}