@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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

@@ -0,0 +1,26 @@
+import {Box, Container, Toast} from '@sanity/ui'
+import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
+
+import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
+
+export default function ToastStory(): React.JSX.Element {
+  const closable = useBoolean('Closable', false)
+  const title = useString('Title', 'Toast title')
+  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
+  const description = useText('Description')
+  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/core/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.Provider value={value}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      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.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      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.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useToast(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/core/components/toast/toast.tsx

@@ -0,0 +1,189 @@
+import {CloseIcon} from '@sanity/icons'
+import {type RadiusStyleProps, toast} from '@sanity/ui/css'
+import {motion, type Variant, type Variants} from 'framer-motion'
+import {type ReactNode} from 'react'
+
+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'
+import type {ComponentType, Props} from '../../types'
+
+/** @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', 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}
+      custom={visualDuration}
+      data-has-duration={hasDuration ? '' : undefined}
+      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 gap={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>
+    </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/core/components/toast/toastContext.ts

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

package/src/core/components/toast/toastLayer.tsx

@@ -0,0 +1,54 @@
+import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
+
+import {Grid} from '../../primitives/grid/grid'
+import {useLayer} from '../../primitives/layer/useLayer'
+import type {ComponentType, Props} from '../../types'
+
+/** @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={toastLayer()}
+      data-ui="ToastProvider"
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      gap={gap}
+      gridTemplateColumns={1}
+      style={{zIndex}}
+    >
+      {children}
+    </Grid>
+  )
+}

package/src/core/components/toast/toastProvider.tsx

@@ -0,0 +1,112 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+import {AnimatePresence} from 'framer-motion'
+import {startTransition, useMemo, 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 value: ToastContextValue = useMemo(() => {
+    const push = (params: ToastParams) => {
+      const id = params.id ?? generateToastId()
+      const duration = params.duration ?? 5000
+
+      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.
+           */
+          const dismiss = () => {
+            startTransition(() => {
+              if (timeoutId) {
+                clearTimeout(timeoutId)
+              }
+
+              setState((currentState) => currentState.filter((toast) => toast.id !== id))
+            })
+          }
+
+          const timeoutId = setTimeout(dismiss, duration)
+
+          /**
+           * 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.Provider value={value}>
+      {children}
+      {mounted && (
+        <LayerProvider zOffset={zOffset}>
+          <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
+            <AnimatePresence initial={false} mode="popLayout">
+              {state.map(({dismiss, id, params}) => (
+                <Toast
+                  key={id}
+                  closable={params.closable}
+                  description={params.description}
+                  onClose={dismiss}
+                  status={params.status}
+                  title={params.title}
+                  duration={params.duration}
+                />
+              ))}
+            </AnimatePresence>
+          </ToastLayer>
+        </LayerProvider>
+      )}
+    </ToastContext.Provider>
+  )
+}

package/src/core/components/toast/types.ts

@@ -0,0 +1,24 @@
+import type {ReactNode} from 'react'
+
+/** @public */
+export interface ToastParams {
+  closable?: boolean
+  description?: ReactNode
+  duration?: number
+  id?: string
+  onClose?: () => void
+  title?: ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+}
+
+/** @public */
+export interface ToastContextValue {
+  version: 0.0
+  /**
+   * Creates or updates a toast notification.
+   * If a toast with the same ID already exists, it will be updated.
+   * If an ID is not provided, a random one will be generated.
+   * The returned ID can be used to programatically update a toast.
+   */
+  push: (params: ToastParams) => string
+}

package/src/core/components/toast/useToast.ts

@@ -0,0 +1,23 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {ToastContext} from './toastContext'
+import type {ToastContextValue} from './types'
+
+/** @public */
+export function useToast(): ToastContextValue {
+  const value = useContext(ToastContext)
+
+  if (!value) {
+    throw new Error('useToast(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('useToast(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -0,0 +1,19 @@
+import type {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
+import {findByTestId, fireEvent} from '@testing-library/dom'
+
+function test<ElementType = unknown>(
+  title: string,
+  run: PerfTestRunFn<ElementType>,
+): PerfTestProps<ElementType> {
+  return {name: title, run}
+}
+
+export const perfTests: PerfTestProps<HTMLDivElement>[] = [
+  test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
+    const apples = await findByTestId(target, 'apples')
+    const oranges = await findByTestId(target, 'oranges')
+
+    fireEvent.click(apples)
+    fireEvent.click(oranges)
+  }),
+]

package/src/core/components/tree/__workshop__/basic.tsx

@@ -0,0 +1,105 @@
+import {LinkIcon} from '@sanity/icons'
+import {Box, Tree, TreeItem} from '@sanity/ui'
+import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {useCallback, useState} from 'react'
+
+import {perfTests} from './basic.perf'
+
+export default function BasicStory(): React.JSX.Element {
+  const {ref, Wrapper} = usePerfTest(perfTests[0])
+
+  const [id, setId] = useState('')
+
+  const handleClick = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+
+    const testid = event.currentTarget.getAttribute('data-testid')
+
+    if (testid) setId(testid)
+  }, [])
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Wrapper>
+        <Tree gap={1} ref={ref}>
+          <TreeItem onClick={handleClick} expanded text="Fruit">
+            <TreeItem
+              data-testid="oranges"
+              onClick={handleClick}
+              selected={id === 'oranges'}
+              text="Oranges"
+            />
+            <TreeItem
+              data-testid="pineapples"
+              onClick={handleClick}
+              text="Pineapples"
+              selected={id === 'pineapples'}
+            />
+            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
+              <TreeItem
+                data-testid="apples/macintosh"
+                onClick={handleClick}
+                href="/apples/macintosh"
+                icon={LinkIcon}
+                text="Macintosh"
+              />
+              <TreeItem
+                data-testid="apples/granny-smith"
+                onClick={handleClick}
+                text="Granny Smith"
+              />
+              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Bananas" />
+            <TreeItem onClick={handleClick} text="Pears">
+              <TreeItem onClick={handleClick} text="Anjou" />
+              <TreeItem onClick={handleClick} text="Bartlett" />
+              <TreeItem onClick={handleClick} text="Bosc" />
+              <TreeItem onClick={handleClick} text="Concorde" />
+              <TreeItem onClick={handleClick} text="Seckel" />
+              <TreeItem onClick={handleClick} text="Starkrimson" />
+            </TreeItem>
+          </TreeItem>
+          <TreeItem onClick={handleClick} text="Vegetables">
+            <TreeItem onClick={handleClick} text="Podded vegetables">
+              <TreeItem onClick={handleClick} text="Lentil" />
+              <TreeItem onClick={handleClick} text="Pea" />
+              <TreeItem onClick={handleClick} text="Peanut" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Bulb and stem vegetables">
+              <TreeItem onClick={handleClick} text="Asparagus" />
+              <TreeItem onClick={handleClick} text="Celery" />
+              <TreeItem onClick={handleClick} text="Leek" />
+              <TreeItem onClick={handleClick} text="Onion" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Root and tuberous vegetables">
+              <TreeItem onClick={handleClick} text="Carrot" />
+              <TreeItem onClick={handleClick} text="Ginger" />
+              <TreeItem onClick={handleClick} text="Parsnip" />
+              <TreeItem onClick={handleClick} text="Potato" />
+            </TreeItem>
+          </TreeItem>
+          <TreeItem onClick={handleClick} text="Grains">
+            <TreeItem onClick={handleClick} text="Cereal grains">
+              <TreeItem onClick={handleClick} text="Barley" />
+              <TreeItem onClick={handleClick} text="Oats" />
+              <TreeItem onClick={handleClick} text="Rice" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Pseudocereal grains">
+              <TreeItem onClick={handleClick} text="Amaranth" />
+              <TreeItem onClick={handleClick} text="Buckwheat" />
+              <TreeItem onClick={handleClick} text="Chia" />
+              <TreeItem onClick={handleClick} text="Quinoa" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Oilseeds">
+              <TreeItem onClick={handleClick} text="India mustard" />
+              <TreeItem onClick={handleClick} text="Safflower" />
+              <TreeItem onClick={handleClick} text="Flax seed" />
+              <TreeItem onClick={handleClick} text="Poppy seed" />
+            </TreeItem>
+          </TreeItem>
+        </Tree>
+      </Wrapper>
+    </Box>
+  )
+}

package/src/core/components/tree/__workshop__/index.ts

@@ -0,0 +1,23 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'components/tree',
+  title: 'Tree',
+  stories: [
+    {
+      name: 'basic',
+      title: 'Basic',
+      component: lazy(() => import('./basic')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
+    {
+      name: 'tab',
+      title: 'Tab',
+      component: lazy(() => import('./tabFromElement')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
+  ],
+}
+
+export default scope