@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,13 +1,13 @@
 import {Box, Container, Toast} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 
-export default function ToastStory() {
-  const closable = useBoolean('Closable', false, 'Props')
-  const title = useString('Title', 'Toast title', 'Props')
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
-  const description = useText('Description', '', 'Props')
+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 (

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

@@ -1,14 +1,15 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
 
-import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 import {useToast} from './useToast'
 
 describe('components/toast', () => {
   describe('useToast', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootToast = useToast()
@@ -38,7 +39,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -51,10 +52,11 @@ describe('components/toast', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <ToastContext.Provider value={value as any}>
+          <ToastContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </ToastContext.Provider>
         )
@@ -66,7 +68,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -80,12 +82,12 @@ describe('components/toast', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <ToastContext.Provider value={value as any}>
+          <ToastContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </ToastContext.Provider>
         )

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

@@ -1,32 +1,40 @@
 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, Button, Flex, Stack, Text} from '../../primitives'
-import {
-  BUTTON_TONE,
-  LoadingBar,
-  LoadingBarMask,
-  LoadingBarProgress,
-  STATUS_CARD_TONE,
-  StyledToast,
-  TextBox,
-} from './styles'
+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'
 
-/**
- * @public
- */
-export interface ToastProps {
+/** @internal */
+export const DEFAULT_TOAST_ELEMENT = 'li'
+
+/** @internal */
+export type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
-  description?: React.ReactNode
-  onClose: () => void
-  radius?: number | number[]
-  title?: React.ReactNode
+  description?: ReactNode
+  onClose?: () => void
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
-  updatedAt?: 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',
@@ -34,32 +42,32 @@ const ROLES = {
   info: 'alert',
 } as const
 
-// 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 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 after a certain timeout.
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
  *
- * @public
+ * @internal
  */
-export function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      | 'as'
-      | 'height'
-      | 'ref'
-      | 'title'
-      | 'onAnimationStart'
-      | 'onDragStart'
-      | 'onDragEnd'
-      | 'onDrag'
-    >,
+export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
+  props: ToastProps<E>,
 ): React.JSX.Element {
   const {
+    as = DEFAULT_TOAST_ELEMENT,
     closable,
     description,
     duration,
@@ -67,9 +75,9 @@ export function Toast(
     radius = 3,
     title,
     status,
-    updatedAt,
-    ...restProps
-  } = props
+    ...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'
@@ -87,26 +95,28 @@ export function Toast(
   const exit: ContainerVariants[] = ['hidden', 'slideOut']
 
   return (
-    <MotionToast
+    <MotionCard
+      as={as}
+      className={toast()}
       data-ui="Toast"
       role={role}
-      {...restProps}
-      data-has-duration={hasDuration ? '' : undefined}
+      {...rest}
       custom={visualDuration}
+      data-has-duration={hasDuration ? '' : undefined}
       radius={radius}
       shadow={2}
       tone={cardTone}
-      forwardedAs="li"
       layout="position"
       variants={container}
       initial={initial}
       animate={animate}
       exit={exit}
       transition={transition}
+      position="relative"
     >
       <MotionFlex align="flex-start" variants={content} transition={transition}>
-        <TextBox flex={1} padding={3}>
-          <Stack space={3}>
+        <Flex flex={1} overflowX="auto" padding={3}>
+          <Stack gap={3}>
             {title && (
               <Text size={1} weight="medium">
                 {title}
@@ -118,7 +128,7 @@ export function Toast(
               </MotionText>
             )}
           </Stack>
-        </TextBox>
+        </Flex>
 
         {closable && (
           <Box padding={1}>
@@ -134,25 +144,10 @@ export function Toast(
           </Box>
         )}
       </MotionFlex>
-      {hasDuration && (
-        <MotionLoadingBar variants={content} transition={transition}>
-          <LoadingBarMask tone={cardTone} radius={radius} />
-          <MotionLoadingBarProgress
-            key={`progress-${updatedAt}`}
-            tone={cardTone}
-            initial={{scaleX: 0}}
-            animate={{scaleX: 1}}
-            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
-            onAnimationComplete={onClose}
-          />
-        </MotionLoadingBar>
-      )}
-    </MotionToast>
+    </MotionCard>
   )
 }
 
-Toast.displayName = 'Toast'
-
 const container = {
   initial: {y: 32, scale: 0.5, zIndex: 1},
   hidden: {opacity: 0},
@@ -191,8 +186,6 @@ const content = {
   },
 } satisfies Partial<Record<ContainerVariants, Variant>>
 
-const MotionToast = motion.create(StyledToast)
+const MotionCard = motion.create(Card)
 const MotionFlex = motion.create(Flex)
 const MotionText = motion.create(Text)
-const MotionLoadingBar = motion.create(LoadingBar)
-const MotionLoadingBarProgress = motion.create(LoadingBarProgress)

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

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

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

@@ -1,51 +1,54 @@
-import {styled} from 'styled-components'
+import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid} from '../../primitives/grid'
-import {useLayer} from '../../utils'
+import {Grid} from '../../primitives/grid/grid'
+import {useLayer} from '../../primitives/layer/useLayer'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface ToastLayerProps {
-  children: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  gap?: number | number[]
-}
+/** @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(props: ToastLayerProps): React.JSX.Element {
-  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+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 (
-    <StyledLayer
-      forwardedAs="ul"
+    <Grid
+      as={as}
+      className={toastLayer()}
       data-ui="ToastProvider"
       padding={padding}
       paddingX={paddingX}
       paddingY={paddingY}
       gap={gap}
-      columns={1}
+      gridTemplateColumns={1}
       style={{zIndex}}
     >
       {children}
-    </StyledLayer>
+    </Grid>
   )
 }
-
-ToastLayer.displayName = 'ToastLayer'
-
-const StyledLayer = styled(Grid)`
-  box-sizing: border-box;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  list-style: none;
-  pointer-events: none;
-  max-width: 420px;
-  width: 100%;
-`

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

@@ -1,32 +1,28 @@
+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 '../../utils'
+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 {ToastContextValue, ToastParams} from './types'
+import type {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void
   id: string
-  updatedAt: number
   params: ToastParams
 }[]
 
-/**
- * @public
- */
+/** @public */
 export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<number>
 }
 
-/**
- * @public
- */
+/** @public */
 export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
   const [state, setState] = useState<ToastState>([])
@@ -34,8 +30,8 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
-      const id = params.id || generateToastId()
-      const duration = params.duration || 5000
+      const id = params.id ?? generateToastId()
+      const duration = params.duration ?? 5000
 
       startTransition(() => {
         setState((prevState): ToastState => {
@@ -54,10 +50,17 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
            * This function will be passed to the Toast component
            * and called either on close button click or after duration.
            */
-          const dismiss = () =>
-            startTransition(() =>
-              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
-            )
+          const dismiss = () => {
+            startTransition(() => {
+              if (timeoutId) {
+                clearTimeout(timeoutId)
+              }
+
+              setState((currentState) => currentState.filter((toast) => toast.id !== id))
+            })
+          }
+
+          const timeoutId = setTimeout(dismiss, duration)
 
           /**
            * Create updated state by:
@@ -70,7 +73,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
             {
               dismiss,
               id,
-              updatedAt: Date.now(),
               params: {...params, duration},
             },
           ]
@@ -90,7 +92,7 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
         <LayerProvider zOffset={zOffset}>
           <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
             <AnimatePresence initial={false} mode="popLayout">
-              {state.map(({dismiss, id, params, updatedAt}) => (
+              {state.map(({dismiss, id, params}) => (
                 <Toast
                   key={id}
                   closable={params.closable}
@@ -99,7 +101,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
                   status={params.status}
                   title={params.title}
                   duration={params.duration}
-                  updatedAt={updatedAt}
                 />
               ))}
             </AnimatePresence>
@@ -109,5 +110,3 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
     </ToastContext.Provider>
   )
 }
-
-ToastProvider.displayName = 'ToastProvider'

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

@@ -1,19 +1,17 @@
-/**
- * @public
- */
+import type {ReactNode} from 'react'
+
+/** @public */
 export interface ToastParams {
   closable?: boolean
-  description?: React.ReactNode
+  description?: ReactNode
   duration?: number
   id?: string
   onClose?: () => void
-  title?: React.ReactNode
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ToastContextValue {
   version: 0.0
   /**

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

@@ -2,11 +2,9 @@ import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function useToast(): ToastContextValue {
   const value = useContext(ToastContext)
 

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

@@ -1,4 +1,4 @@
-import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
+import type {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
 import {findByTestId, fireEvent} from '@testing-library/dom'
 
 function test<ElementType = unknown>(
@@ -8,7 +8,7 @@ function test<ElementType = unknown>(
   return {name: title, run}
 }
 
-export const perfTests = [
+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')

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

@@ -5,7 +5,7 @@ import {useCallback, useState} from 'react'
 
 import {perfTests} from './basic.perf'
 
-export default function BasicStory() {
+export default function BasicStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(perfTests[0])
 
   const [id, setId] = useState('')
@@ -21,7 +21,7 @@ export default function BasicStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Wrapper>
-        <Tree ref={ref} space={1}>
+        <Tree gap={1} ref={ref}>
           <TreeItem onClick={handleClick} expanded text="Fruit">
             <TreeItem
               data-testid="oranges"

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'components/tree',
   title: 'Tree',
   stories: [
@@ -18,4 +18,6 @@ export default defineScope({
       // options: {perfTests: () => import('./basic.perf')},
     },
   ],
-})
+}
+
+export default scope

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

@@ -5,7 +5,7 @@ import {useCallback, useState} from 'react'
 
 import {perfTests} from './basic.perf'
 
-export default function BasicStory() {
+export default function BasicStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(perfTests[0])
 
   const [id, setId] = useState('')
@@ -38,7 +38,7 @@ export default function BasicStory() {
       </Box>
       <Wrapper>
         <TextInput />
-        <Tree ref={ref} space={1} onFocus={handleFocus}>
+        <Tree gap={1} onFocus={handleFocus} ref={ref}>
           <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
             <TreeItem
               data-testid="oranges"

package/src/core/components/tree/helpers.ts

@@ -1,4 +1,4 @@
-import {TreeState} from './types'
+import type {TreeState} from './types'
 
 export function _findPrevItemElement(
   state: TreeState,