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

package/dist/index.js

@@ -33,17 +33,23 @@ const screen = theme.screen;
 const studioTheme = theme.buildTheme();
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity";
 const POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
-    scale: 0.97
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+    scale: 0.97,
+    willChange: "transform"
   },
   animate: {
-    opacity: 1,
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, null, 1],
     scale: 1
   },
   exit: {
-    opacity: 0,
+    // @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]: [null, 0, 0],
     scale: 0.97
   },
   transition: {
@@ -3955,7 +3961,7 @@ var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
   value: __freeze$m(raw || cooked.slice())
 }));
 var _a$m;
-const MotionCard$1 = styled__default.default(framerMotion.motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n"])));
+const MotionCard$1 = styled__default.default(framerMotion.motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -3995,8 +4001,9 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     top: y,
     width,
     zIndex,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, strategy, style, width, x, y, zIndex]);
+  }), [animate, originX, originY, strategy, style, width, x, y, zIndex]);
   const arrowStyle = react.useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -4843,7 +4850,7 @@ var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
   value: __freeze$g(raw || cooked.slice())
 }));
 var _a$g;
-const MotionCard = styled__default.default(framerMotion.motion(Card))(_a$g || (_a$g = __template$g([""])));
+const MotionCard = styled__default.default(framerMotion.motion(Card))(_a$g || (_a$g = __template$g(["\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TooltipCard = react.memo(react.forwardRef(function TooltipCard2(props, ref) {
   const {
     animate,
@@ -4865,8 +4872,9 @@ const TooltipCard = react.memo(react.forwardRef(function TooltipCard2(props, ref
   const rootStyle = react.useMemo(() => ({
     originX,
     originY,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, style]);
+  }), [animate, originX, originY, style]);
   const arrowStyle = react.useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -7109,13 +7117,19 @@ const STATUS_CARD_TONE = {
   success: "positive",
   info: "primary"
 };
+const BUTTON_TONE = {
+  error: "critical",
+  warning: "caution",
+  success: "positive",
+  info: "primary"
+};
 const ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TextBox = styled__default.default(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
@@ -7128,6 +7142,7 @@ function Toast(props) {
     ...restProps
   } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
+  const buttonTone = status ? BUTTON_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
   return /* @__PURE__ */jsxRuntime.jsx(Root$2, {
     "data-ui": "Toast",
@@ -7161,6 +7176,7 @@ function Toast(props) {
           icon: icons.CloseIcon,
           mode: "bleed",
           padding: 2,
+          tone: buttonTone,
           onClick: onClose,
           style: {
             verticalAlign: "top"
@@ -7270,12 +7286,14 @@ function ToastProvider(props) {
               } = _ref12;
               return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
-                  opacity: 1,
+                  opacity: [0, 1, 1],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
                   y: 0,
                   scale: 1
                 },
                 exit: {
-                  opacity: 0,
+                  opacity: [1, 1, 0],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
                   scale: 0.5,
                   transition: {
                     duration: 0.2
@@ -7283,8 +7301,10 @@ function ToastProvider(props) {
                 },
                 initial: {
                   opacity: 0,
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
                   y: 32,
-                  scale: 0.25
+                  scale: 0.25,
+                  willChange: "transform"
                 },
                 layout: "position",
                 transition: {