@sanity/ui 0.37.2 → 0.37.3

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

@@ -1,70 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  Text,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function SkeletonDelayStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Text muted>Delayed by 2000ms</Text>
-        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
-          <Flex align="center">
-            <Skeleton
-              style={{width: 90, height: 90}}
-              radius={2}
-              animated={animated}
-              marginRight={3}
-              delay={1000}
-            />
-            <Stack space={2} flex={1}>
-              <HeadingSkeleton
-                size={4}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <TextSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <LabelSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <CodeSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-            </Stack>
-          </Flex>
-        </Card>
-      </Container>
-    </Box>
-  )
-}

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

@@ -1,7 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('components/skeleton', 'Skeleton', [
-  {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-  {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
-])

package/src/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 React from 'react'
-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/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.tsx

@@ -1,48 +0,0 @@
-import React, {forwardRef, useEffect, useState} from 'react'
-import styled from 'styled-components'
-import {Box} from '../../primitives'
-import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {skeletonStyle} from './styles'
-
-const Root = 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 <Root {...restProps} $animated={animated} $radius={radius} $visible={visible} ref={ref} />
-})

package/src/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/components/skeleton/textSkeleton.tsx

@@ -1,114 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useResponsiveProp} from '../../hooks'
-import {responsive} from '../../styles'
-import {Theme, ThemeFontKey} from '../../theme'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(
-  ({$size, $style, theme}: {$size: number[]; $style: ThemeFontKey; theme: Theme}) => {
-    const {media} = theme.sanity
-    const font = theme.sanity.fonts[$style]
-
-    const styles = responsive(media, $size, (sizeIndex) => {
-      const fontSize = font.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 = useResponsiveProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
-})
-
-/**
- * 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 = useResponsiveProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
-})
-
-/**
- * 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 = useResponsiveProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
-})
-
-/**
- * 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 = useResponsiveProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
-})

package/src/components/tab/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/components/tab/__workshop__/example.tsx

@@ -1,74 +0,0 @@
-import {OkHandIcon, RocketIcon, SunIcon} from '@sanity/icons'
-import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import React, {useState} from 'react'
-
-export default function ExampleStory() {
-  const [tab, setTab] = useState('foo')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <TabList space={[1, 2, 3]}>
-        <Tab
-          aria-controls="example-panel-foo"
-          icon={SunIcon}
-          id="example-tab-foo"
-          label="Foo"
-          onClick={() => setTab('foo')}
-          selected={tab === 'foo'}
-        />
-        <Tab
-          aria-controls="example-panel-bar"
-          icon={RocketIcon}
-          id="example-tab-bar"
-          label="Bar"
-          onClick={() => setTab('bar')}
-          selected={tab === 'bar'}
-        />
-        <Tab
-          aria-controls="example-panel-baz"
-          icon={OkHandIcon}
-          id="example-tab-baz"
-          label="Baz"
-          onClick={() => setTab('baz')}
-          selected={tab === 'baz'}
-        />
-      </TabList>
-      <TabPanel
-        aria-labelledby="example-panel-foo"
-        hidden={tab !== 'foo'}
-        id="example-panel-foo"
-        marginTop={[3, 4, 5]}
-      >
-        <Card border padding={3}>
-          <Text>
-            This is the <strong>Foo</strong> panel
-          </Text>
-        </Card>
-      </TabPanel>
-      <TabPanel
-        aria-labelledby="example-panel-bar"
-        hidden={tab !== 'bar'}
-        id="example-panel-bar"
-        marginTop={[3, 4, 5]}
-      >
-        <Card border padding={3}>
-          <Text>
-            This is the <strong>Bar</strong> panel
-          </Text>
-        </Card>
-      </TabPanel>
-      <TabPanel
-        aria-labelledby="example-panel-baz"
-        hidden={tab !== 'baz'}
-        id="example-panel-baz"
-        marginTop={[3, 4, 5]}
-      >
-        <Card border padding={3}>
-          <Text>
-            This is the <strong>Baz</strong> panel
-          </Text>
-        </Card>
-      </TabPanel>
-    </Box>
-  )
-}

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

@@ -1,6 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('components/tab', 'Tab', [
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])

package/src/components/tab/index.ts

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

package/src/components/tab/tab.tsx

@@ -1,94 +0,0 @@
-import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
-import {useForwardedRef} from '../../hooks'
-import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
-
-/**
- * @public
- */
-export interface TabProps {
-  /**
-   * The `id` of the correlating `TabPanel` component.
-   */
-  'aria-controls': string
-  id: string
-  icon?: React.ComponentType | React.ReactNode
-  focused?: boolean
-  fontSize?: number | number[]
-  label?: React.ReactNode
-  padding?: number | number[]
-  selected?: boolean
-  tone?: ButtonTone
-}
-
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: TabProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'type'>,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>
-) {
-  const {
-    icon,
-    id,
-    focused,
-    fontSize,
-    label,
-    onClick,
-    onFocus,
-    padding = 2,
-    selected,
-    ...restProps
-  } = props
-  const elementRef = useRef<HTMLButtonElement | null>(null)
-  const focusedRef = useRef(false)
-
-  const handleBlur = useCallback(() => {
-    focusedRef.current = false
-  }, [])
-
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = true
-      if (onFocus) onFocus(event)
-    },
-    [onFocus]
-  )
-
-  const ref = useForwardedRef(forwardedRef)
-
-  useEffect(() => {
-    if (focused && !focusedRef.current) {
-      if (elementRef.current) elementRef.current.focus()
-      focusedRef.current = true
-    }
-  }, [focused])
-
-  const setRef = (el: HTMLButtonElement | null) => {
-    elementRef.current = el
-    ref.current = el
-  }
-
-  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={setRef}
-      role="tab"
-      selected={selected}
-      tabIndex={selected ? 0 : -1}
-      text={label}
-      type="button"
-    />
-  )
-})

package/src/components/tab/tabList.tsx

@@ -1,59 +0,0 @@
-import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
-import {Inline, InlineProps} from '../../primitives'
-
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement | null | undefined | false>
-}
-
-function _isReactElement(node: unknown): node is React.ReactElement {
-  return Boolean(node)
-}
-
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref
-) {
-  const {children: childrenProp, ...restProps} = props
-  const [focusedIndex, setFocusedIndex] = useState(-1)
-
-  const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp])
-
-  const tabs = children.map((child, childIndex) =>
-    cloneElement(child, {
-      focused: focusedIndex === childIndex,
-      key: childIndex,
-      onFocus: () => handleTabFocus(childIndex),
-    })
-  )
-
-  const numTabs = tabs.length
-
-  const handleTabFocus = useCallback((tabIdx: number) => {
-    setFocusedIndex(tabIdx)
-  }, [])
-
-  const handleKeyDown = useCallback(
-    (event: React.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>
-  )
-})

package/src/components/tab/tabPanel.tsx

@@ -1,37 +0,0 @@
-import React, {forwardRef} from 'react'
-import {Box, BoxProps} from '../../primitives'
-
-/**
- * @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: TabPanelProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
-  ref: React.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>
-  )
-})

package/src/components/toast/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}