@sanity/ui 2.14.4-canary.2 → 2.14.4-canary.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.14.4-canary.2",
+  "version": "2.14.4-canary.3",
   "keywords": [
     "sanity",
     "ui",

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

@@ -29,7 +29,6 @@ export const StyledToast = styled(Card)`
   position: relative;
   overflow: hidden;
   overflow: clip;
-  will-change: opacity, transform;
 
   &[data-has-duration] {
     padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);

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

@@ -33,6 +33,10 @@ 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
+
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
@@ -71,12 +75,10 @@ export function Toast(
 
   const prefersReducedMotion = usePrefersReducedMotion()
 
-  // eslint-disable-next-line prefer-const
-  let visualDuration = prefersReducedMotion ? 0 : 0.26
-  // visualDuration = 5
+  const visualDuration = prefersReducedMotion ? 0 : 0.26
   const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
 
-  const hasDuration = duration && isFinite(duration)
+  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
 
   return (
     <MotionToast
@@ -141,7 +143,7 @@ export function Toast(
             }}
           />
           <MotionLoadiongBarProgress
-            key={`${duration}-${updatedAt}`}
+            key={`progress-${updatedAt}`}
             tone={cardTone}
             initial={{scaleX: 0}}
             animate={{scaleX: 1}}
@@ -183,6 +185,9 @@ const container = {
 type ContainerVariants = keyof typeof container
 
 const content = {
+  initial: {
+    willChange: 'transform',
+  },
   hidden: {
     opacity: 0,
   },

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

@@ -56,6 +56,11 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
             })
           }
 
+          // BC legacy support
+          if (duration === 0.01) {
+            return prevState.filter((t) => t.id !== id)
+          }
+
           return prevState
             .filter((t) => t.id !== id)
             .concat([