@sanity/ui 2.13.3 → 2.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.13.3",
+  "version": "2.13.5",
   "keywords": [
     "sanity",
     "ui",
@@ -120,7 +120,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.6.0",
     "csstype": "^3.1.3",
-    "framer-motion": "12.4.2",
+    "framer-motion": "^12.4.3",
     "react-compiler-runtime": "19.0.0-beta-21e868a-20250216",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -135,21 +135,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.27",
-    "@storybook/addon-a11y": "^8.5.5",
-    "@storybook/addon-docs": "^8.5.5",
-    "@storybook/addon-essentials": "^8.5.5",
-    "@storybook/addon-interactions": "^8.5.5",
-    "@storybook/addon-links": "^8.5.5",
-    "@storybook/addon-mdx-gfm": "^8.5.5",
-    "@storybook/addon-storysource": "^8.5.5",
-    "@storybook/addon-themes": "^8.5.5",
-    "@storybook/blocks": "^8.5.5",
-    "@storybook/manager-api": "^8.5.5",
-    "@storybook/react": "^8.5.5",
-    "@storybook/react-vite": "^8.5.5",
-    "@storybook/test": "^8.5.5",
-    "@storybook/theming": "^8.5.5",
+    "@sanity/ui-workshop": "^2.0.29",
+    "@storybook/addon-a11y": "^8.5.6",
+    "@storybook/addon-docs": "^8.5.6",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/addon-mdx-gfm": "^8.5.6",
+    "@storybook/addon-storysource": "^8.5.6",
+    "@storybook/addon-themes": "^8.5.6",
+    "@storybook/blocks": "^8.5.6",
+    "@storybook/manager-api": "^8.5.6",
+    "@storybook/react": "^8.5.6",
+    "@storybook/react-vite": "^8.5.6",
+    "@storybook/test": "^8.5.6",
+    "@storybook/theming": "^8.5.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -157,8 +157,8 @@
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -195,7 +195,7 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.10",
-    "storybook": "^8.5.5",
+    "storybook": "^8.5.6",
     "styled-components": "^6.1.15",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.7.3",

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

@@ -51,6 +51,9 @@ export function rootStyles(
       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;
     }
 
     & > * {

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

@@ -57,26 +57,31 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   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]: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
         y: 32,
         scale: 0.25,
         willChange: 'transform',
       },
       animate: {
-        opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
+        opacity: 2,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
         y: 0,
         scale: 1,
       },
-      // @ts-expect-error fix later
       exit: {
-        opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
         scale: 0.5,
-        transition: {duration: prefersReducedMotion ? 0 : 0.2},
       },
+      transition: {duration: prefersReducedMotion ? 0 : 0.2},
     }),
     [prefersReducedMotion],
   )

package/src/core/constants.ts

@@ -25,24 +25,33 @@ export const POPOVER_MOTION_PROPS: {
   exit: Variant
   transition: Transition
 } = {
+  /**
+   * 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.5,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+    // the nagative opacity here, as well as the double opacity further down, are to make the content appear after the backgdrop, and when exiting the content should disappear first.
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
     scale: 0.97,
     willChange: 'transform',
   },
   animate: {
-    opacity: [null, 1, 1],
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, null, 1],
+    opacity: 2,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 1,
     scale: 1,
   },
   exit: {
-    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
-    opacity: [null, null, 0],
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, 0, 0],
+    opacity: 0,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
     scale: 0.97,
   },
-  transition: {duration: 0.4, type: 'spring'},
+  transition: {
+    duration: 0.4,
+    type: 'spring',
+  },
 }
 
 /**