@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/components/menu/useMenuController.ts

@@ -0,0 +1,235 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {_getFocusableElements, _sortElements} from './helpers'
+
+/**
+ * @internal
+ */
+export interface MenuController {
+  activeElement: HTMLElement | null
+  activeIndex: number
+  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  handleItemMouseLeave: () => void
+  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  mount: (element: HTMLElement | null, selected?: boolean) => () => void
+  rootElement: HTMLDivElement | null
+  setRootElement: (el: HTMLDivElement | null) => void
+}
+
+/**
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
+ */
+export function useMenuController(props: {
+  onKeyDown?: React.KeyboardEventHandler
+  originElement?: HTMLElement | null
+  shouldFocus: 'first' | 'last' | null
+}): MenuController {
+  const {onKeyDown, originElement, shouldFocus} = props
+  const elementsRef = useRef<HTMLElement[]>([])
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [activeIndex, _setActiveIndex] = useState(-1)
+  const activeIndexRef = useRef(activeIndex)
+  const activeElement = elementsRef.current[activeIndex] || null
+  const mounted = Boolean(rootElement)
+
+  const setActiveIndex = useCallback((nextActiveIndex: number) => {
+    _setActiveIndex(nextActiveIndex)
+    activeIndexRef.current = nextActiveIndex
+  }, [])
+
+  const mount = useCallback(
+    (element: HTMLElement | null, selected?: boolean): (() => void) => {
+      if (!element) return () => undefined
+
+      if (elementsRef.current.indexOf(element) === -1) {
+        elementsRef.current.push(element)
+        _sortElements(rootElement, elementsRef.current)
+      }
+
+      if (selected) {
+        const selectedIndex = elementsRef.current.indexOf(element)
+
+        setActiveIndex(selectedIndex)
+      }
+
+      return () => {
+        const idx = elementsRef.current.indexOf(element)
+
+        if (idx > -1) {
+          elementsRef.current.splice(idx, 1)
+        }
+      }
+    },
+    [rootElement, setActiveIndex]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      // Move focus to the element that opened the menu before handling the `Tab` press
+      if (event.key === 'Tab') {
+        if (originElement) {
+          originElement.focus()
+        }
+
+        return
+      }
+
+      // Move focus to the first focusable menuitem
+      if (event.key === 'Home') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const el = focusableElements[0]
+
+        if (!el) return
+
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      // Move focus to the last focusable menuitem
+      if (event.key === 'End') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const el = focusableElements[focusableElements.length - 1]
+
+        if (!el) return
+
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const focusableLen = focusableElements.length
+
+        if (focusableLen === 0) return
+
+        const focusedElement = elementsRef.current[activeIndexRef.current]
+
+        let focusedIndex = focusableElements.indexOf(focusedElement)
+
+        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen
+
+        const el = focusableElements[focusedIndex]
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const focusableLen = focusableElements.length
+
+        if (focusableLen === 0) return
+
+        const focusedElement = elementsRef.current[activeIndexRef.current]
+
+        let focusedIndex = focusableElements.indexOf(focusedElement)
+
+        focusedIndex = (focusedIndex + 1) % focusableLen
+
+        const el = focusableElements[focusedIndex]
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    },
+    [onKeyDown, originElement, setActiveIndex]
+  )
+
+  const handleItemMouseEnter = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      const element = event.currentTarget
+      const currentIndex = elementsRef.current.indexOf(element)
+
+      setActiveIndex(currentIndex)
+    },
+    [setActiveIndex]
+  )
+
+  const handleItemMouseLeave = useCallback(() => {
+    rootElement?.focus()
+    setActiveIndex(-1)
+  }, [rootElement, setActiveIndex])
+
+  // Set focus on the currently active element
+  useEffect(() => {
+    if (!mounted) return
+
+    const rafId = window.requestAnimationFrame(() => {
+      const _activeIndex = activeIndexRef.current
+
+      if (_activeIndex === -1) {
+        if (shouldFocus === 'first') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[0]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(currentIndex)
+            activeIndexRef.current = currentIndex
+          }
+        }
+
+        if (shouldFocus === 'last') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[focusableElements.length - 1]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(currentIndex)
+            activeIndexRef.current = currentIndex
+          }
+        }
+
+        return
+      }
+
+      const element = elementsRef.current[_activeIndex] || null
+
+      element?.focus()
+    })
+
+    return () => {
+      window.cancelAnimationFrame(rafId)
+    }
+  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+
+  return {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+    rootElement,
+    setRootElement,
+  }
+}

package/src/components/skeleton/__workshop__/.eslintrc

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

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

@@ -0,0 +1,69 @@
+import {
+  Box,
+  Card,
+  CodeSkeleton,
+  Container,
+  Flex,
+  HeadingSkeleton,
+  LabelSkeleton,
+  Skeleton,
+  Stack,
+  Text,
+  TextSkeleton,
+} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+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,11 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'components/skeleton',
+  title: 'Skeleton',
+  stories: [
+    {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,63 @@
+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/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,57 @@
+import {forwardRef, useEffect, useState} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+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={useArrayProp(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 {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} 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 = useArrayProp(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 = useArrayProp(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 = useArrayProp(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 = useArrayProp(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 {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>
+  )
+}