@sanity/ui 0.36.13 → 0.36.16

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,64 @@
+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

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

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,114 @@
+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

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

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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,6 @@
+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

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

package/src/components/tab/tab.tsx

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,37 @@
+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

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