@sanity/ui 2.14.2 → 2.14.4-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.14.2",
+  "version": "2.14.4-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -61,32 +61,6 @@
     "_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"
@@ -120,7 +94,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.6.0",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.4.3",
+    "framer-motion": "^12.4.7",
     "react-compiler-runtime": "19.0.0-beta-e1e972c-20250221",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -135,21 +109,21 @@
     "@sanity/pkg-utils": "^6.13.4",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.29",
-    "@storybook/addon-a11y": "^8.5.8",
-    "@storybook/addon-docs": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-links": "^8.5.8",
-    "@storybook/addon-mdx-gfm": "^8.5.8",
-    "@storybook/addon-storysource": "^8.5.8",
-    "@storybook/addon-themes": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/manager-api": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
-    "@storybook/test": "^8.5.8",
-    "@storybook/theming": "^8.5.8",
+    "@sanity/ui-workshop": "^2.0.30",
+    "@storybook/addon-a11y": "^8.6.2",
+    "@storybook/addon-docs": "^8.6.2",
+    "@storybook/addon-essentials": "^8.6.2",
+    "@storybook/addon-interactions": "^8.6.2",
+    "@storybook/addon-links": "^8.6.2",
+    "@storybook/addon-mdx-gfm": "^8.6.2",
+    "@storybook/addon-storysource": "^8.6.2",
+    "@storybook/addon-themes": "^8.6.2",
+    "@storybook/blocks": "^8.6.2",
+    "@storybook/manager-api": "^8.6.2",
+    "@storybook/react": "^8.6.2",
+    "@storybook/react-vite": "^8.6.2",
+    "@storybook/test": "^8.6.2",
+    "@storybook/theming": "^8.6.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -171,7 +145,7 @@
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -195,7 +169,7 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.10",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.2",
     "styled-components": "^6.1.15",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.7.3",
@@ -208,25 +182,37 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.5",
   "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,64 +1,68 @@
-import {styled, keyframes, css} from 'styled-components'
+import {styled} from 'styled-components'
 import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
-import {Flex} from '../../primitives'
-import {ThemeProps} from '../../styles'
+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}
 
 export const TextBox = styled(Flex)`
   overflow-x: auto;
 `
 
-const loadingAnimation = keyframes`
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
+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 LOADING_BAR_HEIGHT = 2
-
-export function rootStyles(
-  props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
-): ReturnType<typeof css> {
-  const {color} = getTheme_v2(props.theme)
-
-  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;
-    }
+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;
+`
 
-    & > * {
-      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-      will-change: opacity;
-    }
-  `
+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)
+
+    return color.button.default[props.tone].enabled.bg
+  }};
+`

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

@@ -1,10 +1,16 @@
 import {CloseIcon} from '@sanity/icons'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
+import {motion, type Variants} from 'framer-motion'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-import {ThemeProps} from '../../styles'
-import type {ButtonTone} from '../../types'
-import {rootStyles, TextBox} from './styles'
+
+import {
+  LoadingBar,
+  LoadingBarProgress,
+  BUTTON_TONE,
+  STATUS_CARD_TONE,
+  TextBox,
+  StyledToast,
+} from './styles'
 
 /**
  * @public
@@ -12,27 +18,14 @@ import {rootStyles, TextBox} from './styles'
 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',
@@ -40,10 +33,6 @@ 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.
  *
@@ -52,25 +41,62 @@ const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneK
  * @public
  */
 export function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
 ): React.JSX.Element {
-  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
+  const {
+    closable,
+    description,
+    duration,
+    onClose,
+    radius = 3,
+    title,
+    status,
+    updatedAt,
+    ...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 (
-    <StyledToast
+    <MotionToast
       data-ui="Toast"
       role={role}
       {...restProps}
-      marginTop={3}
+      data-has-duration={hasDuration ? '' : undefined}
+      custom={visualDuration satisfies number}
       radius={radius}
       shadow={2}
       tone={cardTone}
-      $duration={duration}
+      forwardedAs="li"
+      layout="position"
+      variants={container}
+      initial={['hidden', 'initial'] satisfies ContainerVariants[]}
+      animate={['visible', 'slideIn'] satisfies ContainerVariants[]}
+      exit={['hidden', 'slideOut'] satisfies ContainerVariants[]}
+      transition={transition}
     >
-      <Flex align="flex-start">
+      <MotionFlex align="flex-start" variants={content} transition={transition}>
         <TextBox flex={1} padding={3}>
           <Stack space={3}>
             {title && (
@@ -79,9 +105,9 @@ export function Toast(
               </Text>
             )}
             {description && (
-              <Text muted size={1}>
+              <MotionText muted size={1} variants={content} transition={transition}>
                 {description}
-              </Text>
+              </MotionText>
             )}
           </Stack>
         </TextBox>
@@ -99,9 +125,76 @@ export function Toast(
             />
           </Box>
         )}
-      </Flex>
-    </StyledToast>
+      </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>
   )
 }
 
 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/toastLayer.tsx

@@ -0,0 +1,50 @@
+import {styled} from 'styled-components'
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../utils'
+
+/**
+ * @public
+ */
+export interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
+}
+
+/**
+ * @internal
+ */
+export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
+  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+  const {zIndex} = useLayer()
+
+  return (
+    <StyledLayer
+      forwardedAs="ul"
+      data-ui="ToastProvider"
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      gap={gap}
+      columns={1}
+      style={{zIndex}}
+    >
+      {children}
+    </StyledLayer>
+  )
+}
+
+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%;
+`