@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,135 @@
+import {Box, Button, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import {useState} from 'react'
+
+import {CardWrapper} from '../../../../workshop'
+
+export default function ExampleStory(): React.JSX.Element {
+  const [tab, setTab] = useState('foo')
+
+  const autoActivate = useBoolean('Auto activate')
+  const useLongTitle = useBoolean('Use long title', false)
+
+  const longTitle =
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+
+  const hasFocusableChildren = useBoolean('Has focusable children', false)
+
+  return (
+    <CardWrapper pattern="halftone" tone="transparent">
+      <Card
+        display="flex"
+        flexDirection="column"
+        overflow="hidden"
+        radius={5}
+        shadow={2}
+        style={{minHeight: 300}}
+      >
+        <TabList autoActivate={autoActivate} flex="none" padding={3} shadow={1}>
+          <Tab
+            aria-controls="example-panel-foo"
+            id="example-tab-foo"
+            label="Foo"
+            selected={tab === 'foo'}
+            onActivate={() => setTab('foo')}
+          />
+          <Tab
+            aria-controls="example-panel-bar"
+            id="example-tab-bar"
+            label="Bar"
+            selected={tab === 'bar'}
+            onActivate={() => setTab('bar')}
+          />
+          <Tab
+            aria-controls="example-panel-baz"
+            id="example-tab-baz"
+            label={useLongTitle ? longTitle : 'Baz'}
+            selected={tab === 'baz'}
+            onActivate={() => setTab('baz')}
+          />
+        </TabList>
+
+        <TabPanel
+          aria-labelledby="example-panel-foo"
+          display="flex"
+          flex={1}
+          flexDirection="column"
+          gap={4}
+          hidden={tab !== 'foo'}
+          id="example-panel-foo"
+          padding={4}
+          style={{
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            // @ts-expect-error - `cornerShape` is not yet fully supported in CSS
+            cornerShape: 'inherit',
+          }}
+        >
+          <Text size={1}>
+            The <strong>Foo</strong> tab panel
+          </Text>
+
+          {hasFocusableChildren && (
+            <Box>
+              <Button mode="ghost" text="Focusable child" />
+            </Box>
+          )}
+        </TabPanel>
+
+        <TabPanel
+          aria-labelledby="example-panel-bar"
+          display="flex"
+          flex={1}
+          flexDirection="column"
+          gap={4}
+          hidden={tab !== 'bar'}
+          id="example-panel-bar"
+          padding={4}
+          style={{
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            // @ts-expect-error - `cornerShape` is not yet fully supported in CSS
+            cornerShape: 'inherit',
+          }}
+        >
+          <Text size={1}>
+            The <strong>Bar</strong> tab panel
+          </Text>
+
+          {hasFocusableChildren && (
+            <Box>
+              <Button mode="ghost" text="Focusable child" />
+            </Box>
+          )}
+        </TabPanel>
+
+        <TabPanel
+          aria-labelledby="example-panel-baz"
+          display="flex"
+          flex={1}
+          flexDirection="column"
+          gap={4}
+          hidden={tab !== 'baz'}
+          id="example-panel-baz"
+          padding={4}
+          style={{
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            // @ts-expect-error - `cornerShape` is not yet fully supported in CSS
+            cornerShape: 'inherit',
+          }}
+        >
+          <Text size={1}>
+            The <strong>Baz</strong> tab panel
+          </Text>
+
+          {hasFocusableChildren && (
+            <Box>
+              <Button mode="ghost" text="Focusable child" />
+            </Box>
+          )}
+        </TabPanel>
+      </Card>
+    </CardWrapper>
+  )
+}

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

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

package/src/components/tab/types.ts

@@ -0,0 +1,11 @@
+/**
+ * @beta
+ */
+export interface TabContextListValue {
+  version: 0.0
+  focusedId: string | undefined
+  activeId: string | undefined
+  focusTab: (id: string | undefined) => void
+  activateTab: (id: string) => void
+  registerTab: (id: string, element: HTMLElement, selected: boolean | undefined) => () => void
+}

package/src/components/toast/Toast.test.tsx

@@ -0,0 +1,103 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
+
+import {ToastContext} from './ToastContext'
+import type {ToastContextValue} from './types'
+import {useToast} from './useToast'
+
+describe('components/toast', () => {
+  describe('useToast', () => {
+    it('should get context value', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootToast = useToast()
+
+        log(rootToast)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ToastContextValue = {
+          version: 0.0,
+          push: () => '',
+        }
+
+        return (
+          <ToastContext value={value}>
+            <Debug />
+          </ToastContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(typeof log.mock.calls[0][0].push).toBe('function')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          useToast()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        return (
+          <ToastContext
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </ToastContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useToast(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          useToast()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+
+        return (
+          <ToastContext
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </ToastContext>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useToast(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/components/toast/Toast.tsx

@@ -0,0 +1,191 @@
+import {CloseIcon} from '@sanity/icons'
+import {type RadiusStyleProps, toast} from '@sanity/ui-css'
+import {motion, type Variant, type Variants} from 'motion/react'
+import {type ReactNode} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
+
+/** @internal */
+export const DEFAULT_TOAST_ELEMENT = 'li'
+
+/** @internal */
+export type ToastOwnProps = RadiusStyleProps & {
+  closable?: boolean
+  description?: ReactNode
+  onClose?: () => void
+  title?: ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
+}
+
+/** @internal */
+export type ToastElementType = 'li' | ComponentType
+
+/** @internal */
+export type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>
+
+// 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
+
+const ROLES = {
+  error: 'alert',
+  warning: 'alert',
+  success: 'alert',
+  info: 'alert',
+} as const
+
+const STATUS_CARD_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} as const
+
+const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} as const
+
+/**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
+ *
+ * @internal
+ */
+export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
+  props: ToastProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TOAST_ELEMENT,
+    closable,
+    description,
+    duration,
+    onClose,
+    radius = 3,
+    title,
+    status,
+    ...rest
+  } = props as ToastProps<typeof DEFAULT_TOAST_ELEMENT>
+
+  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' as const, 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={as}
+      className={toast()}
+      data-ui="Toast"
+      role={role}
+      {...rest}
+      animate={animate}
+      custom={visualDuration}
+      data-has-duration={hasDuration ? '' : undefined}
+      exit={exit}
+      initial={initial}
+      layout="position"
+      position="relative"
+      radius={radius}
+      shadow={2}
+      tone={cardTone}
+      transition={transition}
+      variants={container}
+    >
+      <MotionFlex align="flex-start" transition={transition} variants={content}>
+        <Flex flex={1} overflowX="auto" padding={3}>
+          <Stack gap={3}>
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
+            {description && (
+              <MotionText muted size={1} transition={transition} variants={content}>
+                {description}
+              </MotionText>
+            )}
+          </Stack>
+        </Flex>
+
+        {closable && (
+          <Box padding={1}>
+            <Button
+              as="button"
+              icon={CloseIcon}
+              mode="bleed"
+              padding={2}
+              style={{verticalAlign: 'top'}}
+              tone={buttonTone}
+              onClick={onClose}
+            />
+          </Box>
+        )}
+      </MotionFlex>
+    </MotionCard>
+  )
+}
+
+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)

package/src/components/toast/ToastContext.ts

@@ -0,0 +1,7 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import type {ToastContextValue} from './types'
+
+export const ToastContext: Context<ToastContextValue | null> =
+  createGlobalScopedContext<ToastContextValue | null>('@sanity/ui/v4/toast', null)

package/src/components/toast/ToastLayer.tsx

@@ -0,0 +1,54 @@
+import {type GapStyleProps, type PaddingStyleProps, toast_layer} from '@sanity/ui-css'
+
+import type {ComponentType, Props} from '../../core/types'
+import {Grid} from '../../primitives/grid/Grid'
+import {useLayer} from '../../primitives/layer/useLayer'
+
+/** @internal */
+export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'
+
+/** @internal */
+export type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
+
+/** @internal */
+export type ToastLayerElementType = 'ul' | ComponentType
+
+/** @internal */
+export type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
+  ToastLayerOwnProps,
+  E
+>
+
+/**
+ * @internal
+ */
+export function ToastLayer<E extends ToastLayerElementType = typeof DEFAULT_TOAST_LAYER_ELEMENT>(
+  props: ToastLayerProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TOAST_LAYER_ELEMENT,
+    children,
+    padding = 4,
+    paddingX,
+    paddingY,
+    gap = 3,
+  } = props as ToastLayerProps<typeof DEFAULT_TOAST_LAYER_ELEMENT>
+
+  const {zIndex} = useLayer()
+
+  return (
+    <Grid
+      as={as}
+      className={toast_layer()}
+      data-ui="ToastProvider"
+      gap={gap}
+      gridTemplateColumns={1}
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      style={{zIndex}}
+    >
+      {children}
+    </Grid>
+  )
+}

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,127 @@
+import type {ResponsiveProp} from '@sanity/ui-css'
+import {AnimatePresence} from 'motion/react'
+import {startTransition, useMemo, useRef, useState} from 'react'
+
+import {useMounted} from '../../hooks/useMounted'
+import {LayerProvider} from '../../primitives/layer/LayerProvider'
+import {Toast} from './Toast'
+import {ToastContext} from './ToastContext'
+import {ToastLayer, type ToastLayerProps} from './ToastLayer'
+import {generateToastId} from './toastState'
+import type {ToastContextValue, ToastParams} from './types'
+
+type ToastState = {
+  dismiss: () => void
+  id: string
+  params: ToastParams
+}[]
+
+/** @public */
+export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+  children?: React.ReactNode
+  zOffset?: ResponsiveProp<number>
+}
+
+/** @public */
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
+  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
+  const [state, setState] = useState<ToastState>([])
+  const mounted = useMounted()
+
+  const timeoutIdsRef = useRef<Record<string, NodeJS.Timeout | undefined>>({})
+
+  const value: ToastContextValue = useMemo(() => {
+    const push = (params: ToastParams) => {
+      const id = params.id ?? generateToastId()
+      const duration = params.duration ?? 5000
+
+      // If the `id` is reused, clear the previous timeout
+      const existingTimeoutId = timeoutIdsRef.current[id]
+      if (existingTimeoutId) {
+        clearTimeout(existingTimeoutId)
+        timeoutIdsRef.current[id] = undefined
+      }
+
+      startTransition(() => {
+        setState((prevState): ToastState => {
+          /**
+           * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.
+           * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.
+           * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.
+           * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.
+           */
+          if (duration === 0.01) {
+            return prevState.filter((toast) => toast.id !== id)
+          }
+
+          /**
+           * Creates a function to dismiss this specific toast.
+           * This function will be passed to the Toast component
+           * and called either on close button click or after duration.
+           */
+          function dismiss() {
+            startTransition(() => {
+              if (timeoutId) {
+                clearTimeout(timeoutId)
+              }
+
+              setState((currentState) => currentState.filter((toast) => toast.id !== id))
+
+              // Clear the timeout id from the ref to prevent memory leaks
+              timeoutIdsRef.current[id] = undefined
+            })
+          }
+
+          const timeoutId = duration === Infinity ? undefined : setTimeout(dismiss, duration)
+
+          // Set the timeout id in the ref
+          timeoutIdsRef.current[id] = timeoutId
+
+          /**
+           * Create updated state by:
+           * 1. Removing any existing toast with the same ID (prevents duplicates)
+           * 2. Adding the new toast with its dismiss handler
+           * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.
+           */
+          return [
+            ...prevState.filter((toast) => toast.id !== id),
+            {
+              dismiss,
+              id,
+              params: {...params, duration},
+            },
+          ]
+        })
+      })
+
+      return id
+    }
+
+    return {version: 0.0, push}
+  }, [])
+
+  return (
+    <ToastContext value={value}>
+      {children}
+      {mounted && (
+        <LayerProvider zOffset={zOffset}>
+          <ToastLayer gap={gap} padding={padding} paddingX={paddingX} paddingY={paddingY}>
+            <AnimatePresence initial={false} mode="popLayout">
+              {state.map(({dismiss, id, params}) => (
+                <Toast
+                  key={id}
+                  closable={params.closable}
+                  description={params.description}
+                  duration={params.duration}
+                  status={params.status}
+                  title={params.title}
+                  onClose={dismiss}
+                />
+              ))}
+            </AnimatePresence>
+          </ToastLayer>
+        </LayerProvider>
+      )}
+    </ToastContext>
+  )
+}