@sanity/ui 2.14.4-canary.2 → 2.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.14.4-canary.2",
+  "version": "2.14.4",
   "keywords": [
     "sanity",
     "ui",
@@ -61,6 +61,32 @@
     "_visual-editing.js",
     "theme.js"
   ],
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "prepare": "husky install",
+    "prepack": "pnpm build",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -92,7 +118,7 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "^3.6.0",
+    "@sanity/icons": "^3.7.0",
     "csstype": "^3.1.3",
     "framer-motion": "^12.4.7",
     "react-compiler-runtime": "19.0.0-beta-e1e972c-20250221",
@@ -182,37 +208,25 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.15.6",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "$@types/react",
+      "@types/react-dom": "$@types/react-dom",
+      "@types/react-is": "$@types/react-is",
+      "conventional-changelog-conventionalcommits": ">= 8.0.0",
+      "react": "$react",
+      "react-dom": "$react-dom",
+      "react-is": "$react-is"
+    }
+  },
   "esm.sh": {
     "bundle": false
-  },
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

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

@@ -1,68 +1,64 @@
-import {styled} from 'styled-components'
+import {styled, keyframes, css} from 'styled-components'
 import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
-import {Card, Flex} from '../../primitives'
-import type {ButtonTone} from '../../types'
-
-const LOADING_BAR_HEIGHT = 2
-
-export const STATUS_CARD_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
-
-export const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+import {Flex} from '../../primitives'
+import {ThemeProps} from '../../styles'
 
 export const TextBox = styled(Flex)`
   overflow-x: auto;
 `
 
-export const StyledToast = styled(Card)`
-  pointer-events: all;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  overflow: clip;
-  will-change: opacity, transform;
-
-  &[data-has-duration] {
-    padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);
+const loadingAnimation = keyframes`
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
   }
 `
 
-export const LoadingBar = styled.div`
-  display: flex;
-  position: absolute;
-  bottom: 0px;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  pointer-events: none;
-  z-index: -1;
-  overflow: hidden;
-  overflow: clip;
-  background: transparent;
-  align-items: flex-end;
-  will-change: opacity;
-`
+const LOADING_BAR_HEIGHT = 2
 
-type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
-  tone: ThemeColorStateToneKey
-}
-export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`
-  display: block;
-  height: 100%;
-  width: 100%;
-  transform-origin: 0% 50%;
-  background-color: ${(props) => {
-    const {color} = getTheme_v2(props.theme)
+export function rootStyles(
+  props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
+): ReturnType<typeof css> {
+  const {color} = getTheme_v2(props.theme)
 
-    return color.button.default[props.tone].enabled.bg
-  }};
-`
+  const loadingBarColor = color.button.default[props.tone].enabled.bg
+
+  if (!props.$duration)
+    return css`
+      pointer-events: all;
+      & > * {
+        opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        will-change: opacity;
+      }
+    `
+
+  return css`
+    pointer-events: all;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    overflow: clip;
+    padding-bottom: ${LOADING_BAR_HEIGHT}px;
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      height: ${LOADING_BAR_HEIGHT}px;
+      background: ${loadingBarColor};
+      animation-name: ${loadingAnimation};
+      animation-duration: ${props.$duration}ms;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+      will-change: width;
+    }
+
+    & > * {
+      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+      will-change: opacity;
+    }
+  `
+}

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

@@ -1,16 +1,10 @@
 import {CloseIcon} from '@sanity/icons'
-import {motion, type Variants} from 'framer-motion'
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {styled} from 'styled-components'
 import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-
-import {
-  LoadingBar,
-  LoadingBarProgress,
-  BUTTON_TONE,
-  STATUS_CARD_TONE,
-  TextBox,
-  StyledToast,
-} from './styles'
+import {ThemeProps} from '../../styles'
+import type {ButtonTone} from '../../types'
+import {rootStyles, TextBox} from './styles'
 
 /**
  * @public
@@ -18,14 +12,27 @@ import {
 export interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
-  onClose: () => void
+  onClose?: () => void
   radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
-  updatedAt?: number
 }
 
+const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} as const
+
+const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ButtonTone}
+
 const ROLES = {
   error: 'alert',
   warning: 'alert',
@@ -33,6 +40,10 @@ const ROLES = {
   info: 'alert',
 } as const
 
+const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
+  rootStyles,
+)
+
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
@@ -41,62 +52,25 @@ const ROLES = {
  * @public
  */
 export function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      | 'as'
-      | 'height'
-      | 'ref'
-      | 'title'
-      | 'onAnimationStart'
-      | 'onDragStart'
-      | 'onDragEnd'
-      | 'onDrag'
-    >,
+  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
 ): React.JSX.Element {
-  const {
-    closable,
-    description,
-    duration,
-    onClose,
-    radius = 3,
-    title,
-    status,
-    updatedAt,
-    ...restProps
-  } = props
+  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
-  const prefersReducedMotion = usePrefersReducedMotion()
-
-  // eslint-disable-next-line prefer-const
-  let visualDuration = prefersReducedMotion ? 0 : 0.26
-  // visualDuration = 5
-  const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
-
-  const hasDuration = duration && isFinite(duration)
-
   return (
-    <MotionToast
+    <StyledToast
       data-ui="Toast"
       role={role}
       {...restProps}
-      data-has-duration={hasDuration ? '' : undefined}
-      custom={visualDuration satisfies number}
+      marginTop={3}
       radius={radius}
       shadow={2}
       tone={cardTone}
-      forwardedAs="li"
-      layout="position"
-      variants={container}
-      initial={['hidden', 'initial'] satisfies ContainerVariants[]}
-      animate={['visible', 'slideIn'] satisfies ContainerVariants[]}
-      exit={['hidden', 'slideOut'] satisfies ContainerVariants[]}
-      transition={transition}
+      $duration={duration}
     >
-      <MotionFlex align="flex-start" variants={content} transition={transition}>
+      <Flex align="flex-start">
         <TextBox flex={1} padding={3}>
           <Stack space={3}>
             {title && (
@@ -105,9 +79,9 @@ export function Toast(
               </Text>
             )}
             {description && (
-              <MotionText muted size={1} variants={content} transition={transition}>
+              <Text muted size={1}>
                 {description}
-              </MotionText>
+              </Text>
             )}
           </Stack>
         </TextBox>
@@ -125,76 +99,9 @@ export function Toast(
             />
           </Box>
         )}
-      </MotionFlex>
-      {hasDuration && (
-        <MotionLoadiongBar variants={content} transition={transition}>
-          <Card
-            tone={cardTone}
-            radius={radius}
-            style={{
-              position: 'absolute',
-              right: -2,
-              left: -2,
-              top: 0,
-              bottom: 2,
-              zIndex: 1,
-            }}
-          />
-          <MotionLoadiongBarProgress
-            key={`${duration}-${updatedAt}`}
-            tone={cardTone}
-            initial={{scaleX: 0}}
-            animate={{scaleX: 1}}
-            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
-            onAnimationComplete={onClose}
-          />
-        </MotionLoadiongBar>
-      )}
-    </MotionToast>
+      </Flex>
+    </StyledToast>
   )
 }
 
 Toast.displayName = 'Toast'
-
-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 = {
-  hidden: {
-    opacity: 0,
-  },
-  visible: {
-    opacity: 1,
-  },
-} satisfies Variants
-
-const MotionToast = motion.create(StyledToast)
-const MotionFlex = motion.create(Flex)
-
-const MotionText = motion.create(Text)
-
-const MotionLoadiongBar = motion.create(LoadingBar)
-const MotionLoadiongBarProgress = motion.create(LoadingBarProgress)

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

@@ -1,102 +1,195 @@
-import {AnimatePresence} from 'framer-motion'
-import {startTransition, useMemo, useState} from 'react'
+import {AnimatePresence, motion, type Variants} from 'framer-motion'
+import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
+import {styled} from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../utils'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box} from '../../primitives'
+import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
 import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void
   id: string
-  updatedAt: number
   params: ToastParams
 }[]
 
 /**
  * @public
  */
-export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+export interface ToastProviderProps {
   children?: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 
+const StyledToastProvider = styled(Layer)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`
+
+const ToastContainer = styled.div`
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  max-width: 420px;
+  width: 100%;
+`
+
 /**
  * @public
  */
 export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
-  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
-  const [state, setState] = useState<ToastState>([])
+  const {children, padding = 4, paddingX, paddingY, zOffset} = props
+  const [state, _setState] = useState<ToastState>([])
+  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
   const mounted = useMounted()
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const variants = useMemo<Variants>(
+    () => ({
+      /**
+       * These variants makes use of special timing, by using a negative opacity as a starting position,
+       * as well as double opacity as the end position.
+       * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
+       * we want the content to disappear faster than the container.
+       */
+      initial: {
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
+        y: 32,
+        scale: 0.25,
+        willChange: 'transform',
+      },
+      animate: {
+        opacity: 2,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
+        y: 0,
+        scale: 1,
+      },
+      exit: {
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
+        scale: 0.5,
+      },
+      transition: {duration: prefersReducedMotion ? 0 : 0.2},
+    }),
+    [prefersReducedMotion],
+  )
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
+      // Wrap setState in startTransition to allow React to give input state updates higher priority
+      const setState: typeof _setState = (state) => startTransition(() => _setState(state))
+
       const id = params.id || generateToastId()
       const duration = params.duration || 5000
 
-      startTransition(() => {
-        setState((prevState): ToastState => {
-          const dismiss = () => {
-            startTransition(() => {
-              setState((prevState): ToastState => {
-                const idx = prevState.findIndex((t) => t.id === id)
+      const dismiss = () => {
+        const timeoutId = toastsRef.current[id]?.timeoutId
 
-                if (idx > -1) {
-                  const toasts = prevState.slice(0)
+        setState((prevState): ToastState => {
+          const idx = prevState.findIndex((t) => t.id === id)
 
-                  toasts.splice(idx, 1)
+          if (idx > -1) {
+            const toasts = prevState.slice(0)
 
-                  return toasts
-                }
+            toasts.splice(idx, 1)
 
-                return prevState
-              })
-            })
+            return toasts
           }
 
           return prevState
-            .filter((t) => t.id !== id)
-            .concat([
-              {
-                dismiss,
-                id,
-                updatedAt: Date.now(),
-                params: {...params, duration},
-              },
-            ])
         })
+
+        if (timeoutId !== undefined) {
+          clearTimeout(timeoutId)
+          delete toastsRef.current[id]
+        }
+      }
+
+      setState((prevState): ToastState => {
+        return prevState
+          .filter((t) => t.id !== id)
+          .concat([
+            {
+              dismiss,
+              id,
+              params: {...params, duration},
+            },
+          ])
       })
 
+      if (toastsRef.current[id]) {
+        clearTimeout(toastsRef.current[id].timeoutId)
+        delete toastsRef.current[id]
+      }
+
+      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
+
       return id
     }
 
     return {version: 0.0, push}
   }, [])
 
+  // clear timeouts on unmount
+  useEffect(
+    () => () => {
+      for (const {timeoutId} of Object.values(toastsRef.current)) {
+        clearTimeout(timeoutId)
+      }
+
+      toastsRef.current = {}
+    },
+    [],
+  )
+
   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, updatedAt}) => (
-                <Toast
-                  key={id}
-                  closable={params.closable}
-                  description={params.description}
-                  onClose={dismiss}
-                  status={params.status}
-                  title={params.title}
-                  duration={params.duration}
-                  updatedAt={updatedAt}
-                />
-              ))}
-            </AnimatePresence>
-          </ToastLayer>
-        </LayerProvider>
+        <StyledToastProvider data-ui="ToastProvider" zOffset={zOffset}>
+          <ToastContainer>
+            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
+              <AnimatePresence initial={false}>
+                {state.map(({dismiss, id, params}) => (
+                  <motion.div
+                    key={id}
+                    layout="position"
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    variants={variants}
+                    transition={
+                      prefersReducedMotion
+                        ? {duration: 0}
+                        : {type: 'spring', damping: 30, stiffness: 400}
+                    }
+                  >
+                    <Toast
+                      closable={params.closable}
+                      description={params.description}
+                      onClose={dismiss}
+                      status={params.status}
+                      title={params.title}
+                      duration={params.duration}
+                    />
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </Box>
+          </ToastContainer>
+        </StyledToastProvider>
       )}
     </ToastContext.Provider>
   )