@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/ui/components/skeleton/__workshop__/skeleton.tsx

@@ -1,64 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  Grid,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
-
-export default function SkeletonStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Stack space={4}>
-          {[1, 2, 3].map((item) => (
-            <Card key={item} tone={tone} padding={2} radius={2} border>
-              <Flex align="center">
-                <Grid gap={2} columns={2} marginRight={3}>
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                </Grid>
-                <Stack space={2} flex={1}>
-                  <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <CodeSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                </Stack>
-              </Flex>
-              <Flex marginTop={2}>
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginRight={1}
-                  radius={2}
-                  animated={animated}
-                />
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginLeft={1}
-                  radius={2}
-                  animated={animated}
-                />
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

package/src/ui/components/skeleton/skeleton.tsx

@@ -1,53 +0,0 @@
-import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useState} from 'react'
-
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const Skeleton = forwardRef(function Skeleton(
-  props: Props<SkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {animated = false, className, 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 (
-    <Box
-      data-ui="Skeleton"
-      {...restProps}
-      className={composeClassNames(className, skeleton({radius}))}
-      data-animated={animated ? '' : undefined}
-      data-visible={visible ? '' : undefined}
-      ref={ref}
-    />
-  )
-})
-
-Skeleton.displayName = 'ForwardRef(Skeleton)'

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

@@ -1,132 +0,0 @@
-import {
-  codeSkeleton,
-  composeClassNames,
-  headingSkeleton,
-  labelSkeleton,
-  ResponsiveProp,
-  textSkeleton,
-} from '@sanity/ui/css'
-import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontHeadingSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: Props<TextSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      data-ui="TextSkeleton"
-      {...restProps}
-      className={composeClassNames(className, textSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: Props<LabelSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      data-ui="LabelSkeleton"
-      {...restProps}
-      className={composeClassNames(className, labelSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: Props<HeadingSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      {...restProps}
-      className={composeClassNames(className, headingSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: Props<CodeSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      // root
-      {...restProps}
-      className={composeClassNames(className, codeSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

package/src/ui/components/tab/tab.tsx

@@ -1,105 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {
-  ElementType,
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {Button} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
-
-/**
- * @public
- */
-export interface TabProps {
-  /**
-   * The `id` of the corresponding `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'icon'?: ElementType | ReactNode
-  'focused'?: boolean
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'label'?: ReactNode
-  'padding'?: ResponsiveProp<Space>
-  'selected'?: boolean
-  'tone'?: ButtonTone
-}
-
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: Props<TabProps, 'button'>,
-  forwardedRef: ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    icon,
-    id,
-    focused,
-    fontSize = 1,
-    label,
-    onClick,
-    onFocus,
-    padding = 2,
-    selected,
-    ...restProps
-  } = props
-  const ref = useRef<HTMLButtonElement | null>(null)
-  const focusedRef = useRef(false)
-
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  const handleBlur = useCallback(() => {
-    focusedRef.current = false
-  }, [])
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = true
-      if (onFocus) onFocus(event)
-    },
-    [onFocus],
-  )
-
-  useEffect(() => {
-    if (focused && !focusedRef.current) {
-      if (ref.current) ref.current.focus()
-      focusedRef.current = true
-    }
-  }, [focused])
-
-  return (
-    <Button
-      data-ui="Tab"
-      {...restProps}
-      aria-selected={selected ? 'true' : 'false'}
-      fontSize={fontSize}
-      icon={icon}
-      id={id}
-      mode="bleed"
-      onClick={onClick}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      padding={padding}
-      ref={ref}
-      role="tab"
-      selected={selected}
-      tabIndex={selected ? 0 : -1}
-      text={label}
-      type="button"
-    />
-  )
-})
-
-Tab.displayName = 'ForwardRef(Tab)'

package/src/ui/components/tab/tabList.tsx

@@ -1,74 +0,0 @@
-import {
-  Children,
-  cloneElement,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  ReactElement,
-  useCallback,
-  useState,
-} from 'react'
-
-import {Inline, InlineProps} from '../../primitives'
-import {Props} from '../../types'
-import {TabProps} from './tab'
-
-/**
- * @public
- */
-export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
-
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: TabListChild[]
-}
-
-function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
-  return Boolean(node)
-}
-
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: Props<TabListProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children: childrenProp, ...restProps} = props
-  const [focusedIndex, setFocusedIndex] = useState(-1)
-
-  const children = Children.toArray(childrenProp).filter(_isReactElement)
-
-  const tabs = children.map((child, childIndex) =>
-    cloneElement(child, {
-      focused: focusedIndex === childIndex,
-      key: childIndex,
-      onFocus: () => setFocusedIndex(childIndex),
-    }),
-  )
-
-  const numTabs = tabs.length
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
-      }
-
-      if (event.key === 'ArrowRight') {
-        setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
-      }
-    },
-    [numTabs],
-  )
-
-  return (
-    <Inline data-ui="TabList" {...restProps} onKeyDown={handleKeyDown} ref={ref} role="tablist">
-      {tabs}
-    </Inline>
-  )
-})
-
-TabList.displayName = 'ForwardRef(TabList)'

package/src/ui/components/tab/tabPanel.tsx

@@ -1,40 +0,0 @@
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface TabPanelProps extends BoxProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
-
-/**
- * @public
- */
-export const TabPanel = forwardRef(function TabPanel(
-  props: Props<TabPanelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {flex, ...restProps} = props
-
-  return (
-    <Box
-      data-ui="TabPanel"
-      {...restProps}
-      flex={flex}
-      ref={ref}
-      role="tabpanel"
-      tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
-    >
-      {props.children}
-    </Box>
-  )
-})
-
-TabPanel.displayName = 'ForwardRef(TabPanel)'

package/src/ui/components/toast/__workshop__/toast.tsx

@@ -1,26 +0,0 @@
-import {Box, Container, Toast} from '@sanity/ui'
-import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../../../workshop/constants'
-
-export default function ToastStory() {
-  const closable = useBoolean('Closable', false, 'Props')
-  const title = useString('Title', 'Toast title', 'Props')
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
-  const description = useText('Description', '', 'Props')
-  const handleClose = useAction('onClose')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={0}>
-        <Toast
-          closable={closable}
-          description={description}
-          onClose={handleClose}
-          status={status}
-          title={title}
-        />
-      </Container>
-    </Box>
-  )
-}

package/src/ui/components/toast/toast.tsx

@@ -1,211 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {
-  RadiusStyleProps,
-  toast,
-  toastLoadingBar,
-  toastLoadingBarMask,
-  toastLoadingBarProgress,
-} from '@sanity/ui/css'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {motion, type Variant, type Variants} from 'framer-motion'
-import {ReactElement, ReactNode} from 'react'
-
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
-
-/**
- * @public
- */
-export interface ToastProps extends RadiusStyleProps {
-  closable?: boolean
-  description?: ReactNode
-  onClose?: () => void
-  title?: ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-  updatedAt?: number
-}
-
-const ROLES = {
-  error: 'alert',
-  warning: 'alert',
-  success: 'alert',
-  info: 'alert',
-} as const
-
-const STATUS_CARD_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
-
-const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
-
-// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
-// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
-const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
-
-/**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
- *
- * @public
- */
-export function Toast(
-  props: Omit<
-    Props<ToastProps, 'div'>,
-    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
-  >,
-): ReactElement {
-  const {
-    closable,
-    description,
-    duration,
-    onClose,
-    radius = 3,
-    title,
-    status,
-    updatedAt,
-    ...restProps
-  } = props
-
-  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
-  const buttonTone = status ? BUTTON_TONE[status] : 'default'
-  const role = status ? ROLES[status] : 'status'
-
-  const prefersReducedMotion = usePrefersReducedMotion()
-
-  const visualDuration: number = prefersReducedMotion ? 0 : 0.26
-  const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
-
-  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
-  const initial: ContainerVariants[] = ['hidden', 'initial']
-  const animate: ContainerVariants[] = ['visible', 'slideIn']
-  const exit: ContainerVariants[] = ['hidden', 'slideOut']
-
-  return (
-    <MotionCard
-      as="li"
-      className={toast()}
-      data-ui="Toast"
-      role={role}
-      {...restProps}
-      data-has-duration={hasDuration ? '' : undefined}
-      custom={visualDuration}
-      radius={radius}
-      shadow={2}
-      tone={cardTone}
-      layout="position"
-      variants={container}
-      initial={initial}
-      animate={animate}
-      exit={exit}
-      transition={transition}
-      position="relative"
-    >
-      <MotionFlex align="flex-start" variants={content} transition={transition}>
-        <Flex flex={1} overflowX="auto" padding={3}>
-          <Stack space={3}>
-            {title && (
-              <Text size={1} weight="medium">
-                {title}
-              </Text>
-            )}
-            {description && (
-              <MotionText muted size={1} variants={content} transition={transition}>
-                {description}
-              </MotionText>
-            )}
-          </Stack>
-        </Flex>
-
-        {closable && (
-          <Box padding={1}>
-            <Button
-              as="button"
-              icon={CloseIcon}
-              mode="bleed"
-              padding={2}
-              tone={buttonTone}
-              onClick={onClose}
-              style={{verticalAlign: 'top'}}
-            />
-          </Box>
-        )}
-      </MotionFlex>
-      {hasDuration && (
-        <MotionBox className={toastLoadingBar()} variants={content} transition={transition}>
-          <Card className={toastLoadingBarMask()} tone={cardTone} radius={radius} />
-          <MotionCard
-            // const MotionToast = motion.create(Card) // StyledToast
-            // const MotionFlex = motion.create(Flex)
-            // const MotionText = motion.create(Text)
-            // const MotionLoadingBar = motion.create(Box) // LoadingBar
-            // const MotionLoadingBarProgress = motion.create(Card)
-
-            className={toastLoadingBarProgress()}
-            key={`progress-${updatedAt}`}
-            tone={cardTone}
-            initial={{scaleX: 0}}
-            animate={{scaleX: 1}}
-            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
-            onAnimationComplete={onClose}
-          />
-        </MotionBox>
-      )}
-    </MotionCard>
-  )
-}
-
-Toast.displayName = 'Toast'
-
-const container = {
-  initial: {y: 32, scale: 0.5, zIndex: 1},
-  hidden: {opacity: 0},
-  visible: (visualDuration: number) => {
-    if (!visualDuration) return {opacity: 1}
-
-    return {
-      opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        staggerChildren: visualDuration / 3,
-        duration: visualDuration / 3,
-      },
-    }
-  },
-  slideIn: {
-    y: 0,
-    scale: 1,
-  },
-  slideOut: {
-    zIndex: 0,
-    scale: 0.75,
-  },
-} satisfies Variants
-type ContainerVariants = keyof typeof container
-
-const content = {
-  initial: {
-    willChange: 'transform',
-  },
-  hidden: {
-    opacity: 0,
-  },
-  visible: {
-    opacity: 1,
-  },
-} satisfies Partial<Record<ContainerVariants, Variant>>
-
-const MotionCard = motion.create(Card)
-const MotionFlex = motion.create(Flex)
-const MotionText = motion.create(Text)
-const MotionBox = motion.create(Box)