@sanity/ui 2.0.0-beta.13 → 2.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/src/core/__workshop__/fontsPlugin.tsx

@@ -7,7 +7,7 @@ const GlobalStyle = createGlobalStyle`
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
+    src: url('https://studio-static.sanity.io/InterVariable.ttf') format('ttf');
     font-named-instance: 'Regular';
   }
   @font-face {
@@ -15,7 +15,7 @@ const GlobalStyle = createGlobalStyle`
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+    src: url('https://studio-static.sanity.io/InterVariable-Italic.ttf') format('ttf');
     font-named-instance: 'Italic';
   }
 `

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

@@ -1,7 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+import type {ButtonTone} from '../../types'
 
 /**
  * @public
@@ -20,17 +22,28 @@ const STATUS_CARD_TONE: {[key: string]: ThemeColorToneKey} = {
   warning: 'caution',
   success: 'positive',
   info: 'primary',
-}
+} as const
+
+const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'primary',
+} satisfies {[key: string]: ButtonTone}
 
 const ROLES = {
   error: 'alert',
   warning: 'alert',
   success: 'alert',
   info: 'alert',
-}
+} as const
 
 const Root = styled(Card)`
   pointer-events: all;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 const TextBox = styled(Flex)`
@@ -49,6 +62,7 @@ export function Toast(
 ): React.ReactElement {
   const {closable, description, 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'
 
   return (
@@ -84,6 +98,7 @@ export function Toast(
               icon={CloseIcon}
               mode="bleed"
               padding={2}
+              tone={buttonTone}
               onClick={onClose}
               style={{verticalAlign: 'top'}}
             />

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

@@ -1,6 +1,7 @@
 import {AnimatePresence, motion} from 'framer-motion'
 import {useCallback, useEffect, useMemo, useRef, useState, startTransition} from 'react'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
@@ -132,9 +133,25 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
               <AnimatePresence initial={false}>
                 {state.map(({dismiss, id, params}) => (
                   <motion.div
-                    animate={{opacity: 1, y: 0, scale: 1}}
-                    exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
-                    initial={{opacity: 0, y: 32, scale: 0.25}}
+                    animate={{
+                      opacity: [0, 1, 1],
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+                      y: 0,
+                      scale: 1,
+                    }}
+                    exit={{
+                      opacity: [1, 1, 0],
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+                      scale: 0.5,
+                      transition: {duration: 0.2},
+                    }}
+                    initial={{
+                      opacity: 0,
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+                      y: 32,
+                      scale: 0.25,
+                      willChange: 'transform',
+                    }}
                     key={id}
                     layout="position"
                     transition={{type: 'spring', damping: 30, stiffness: 400}}

package/src/core/constants.ts

@@ -10,6 +10,11 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
+/**
+ * @internal
+ */
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
+
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
  * @internal
@@ -20,9 +25,23 @@ export const POPOVER_MOTION_PROPS: {
   exit: Variant
   transition: Transition
 } = {
-  initial: {opacity: 0.5, scale: 0.97},
-  animate: {opacity: 1, scale: 1},
-  exit: {opacity: 0, scale: 0.97},
+  initial: {
+    opacity: 0.5,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+    scale: 0.97,
+    willChange: 'transform',
+  },
+  animate: {
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, null, 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],
+    scale: 0.97,
+  },
   transition: {duration: 0.4, type: 'spring'},
 }
 

package/src/core/primitives/popover/popoverCard.tsx

@@ -3,7 +3,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -22,6 +22,10 @@ const MotionCard = styled(motion(Card))`
   flex-direction: column;
   width: max-content;
   min-width: min-content;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 /**
@@ -99,9 +103,10 @@ export const PopoverCard = memo(
         top: y,
         width,
         zIndex,
+        willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [originX, originY, strategy, style, width, x, y, zIndex],
+      [animate, originX, originY, strategy, style, width, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Radius} from '../../types'
 import {Arrow} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -12,7 +12,12 @@ import {
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = styled(motion(Card))``
+const MotionCard = styled(motion(Card))`
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`
 
 /**
  * @internal
@@ -57,9 +62,10 @@ export const TooltipCard = memo(
       () => ({
         originX,
         originY,
+        willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [originX, originY, style],
+      [animate, originX, originY, style],
     )
 
     const arrowStyle: CSSProperties = useMemo(