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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023–2024 Sanity.io
+Copyright (c) 2024–2024 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.esm.js

@@ -20,17 +20,23 @@ const screen = screen$1;
 const studioTheme = 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: {
@@ -3942,7 +3948,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(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(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 = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -3982,8 +3988,9 @@ const PopoverCard = memo(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 = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -4830,7 +4837,7 @@ var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
   value: __freeze$g(raw || cooked.slice())
 }));
 var _a$g;
-const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g([""])));
+const MotionCard = styled(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 = memo(forwardRef(function TooltipCard2(props, ref) {
   const {
     animate,
@@ -4852,8 +4859,9 @@ const TooltipCard = memo(forwardRef(function TooltipCard2(props, ref) {
   const rootStyle = useMemo(() => ({
     originX,
     originY,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, style]);
+  }), [animate, originX, originY, style]);
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -7096,13 +7104,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(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const Root$2 = styled(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(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
@@ -7115,6 +7129,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__ */jsx(Root$2, {
     "data-ui": "Toast",
@@ -7148,6 +7163,7 @@ function Toast(props) {
           icon: CloseIcon,
           mode: "bleed",
           padding: 2,
+          tone: buttonTone,
           onClick: onClose,
           style: {
             verticalAlign: "top"
@@ -7257,12 +7273,14 @@ function ToastProvider(props) {
               } = _ref12;
               return /* @__PURE__ */jsx(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
@@ -7270,8 +7288,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: {