@tamagui/animations-motion 2.0.0-rc.3 → 2.0.0-rc.30

package/dist/cjs/createAnimations.cjs

@@ -31,7 +31,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   }), mod);
 var createAnimations_exports = {};
 __export(createAnimations_exports, {
-  createAnimations: () => createAnimations
+  createAnimations: () => createAnimations,
+  disableAnimationProps: () => disableAnimationProps
 });
 module.exports = __toCommonJS(createAnimations_exports);
 var import_animation_helpers = require("@tamagui/animation-helpers"),
@@ -40,36 +41,20 @@ var import_animation_helpers = require("@tamagui/animation-helpers"),
   import_react = require("motion/react"),
   import_react2 = __toESM(require("react"), 1),
   import_jsx_runtime = require("react/jsx-runtime");
-const MotionValueStrategy = /* @__PURE__ */new WeakMap(),
-  nonPositionTransformRe = /scale|rotate|skew|matrix|perspective/;
-function createAnimations(animationsProp) {
-  const animations = {};
-  for (const key in animationsProp) {
-    const config = animationsProp[key],
-      isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-    animations[key] = {
-      type: isTimingBased ? "tween" : "spring",
-      ...config,
-      // Convert duration/delay from ms to seconds for motion library
-      ...(config.duration ? {
-        duration: config.duration / 1e3
-      } : null),
-      ...(config.delay ? {
-        delay: config.delay / 1e3
-      } : null)
-    };
-  }
+const isServer = typeof window > "u";
+function useAnimateSSRSafe() {
+  return isServer ? [(0, import_react2.useRef)(null), () => {}] : (0, import_react.useAnimate)();
+}
+const MotionValueStrategy = /* @__PURE__ */new WeakMap();
+function createAnimations(animations) {
   let isHydratingGlobal;
   const hydratingComponents = /* @__PURE__ */new Set();
   return {
-    // this is only used by Sheet basically for now to pass result of useAnimatedStyle to
     View: MotionView,
     Text: MotionText,
     isReactNative: !1,
-    supportsCSS: !0,
     inputStyle: "css",
     outputStyle: "inline",
-    needsWebStyles: !0,
     avoidReRenders: !0,
     animations,
     usePresence: import_use_presence.usePresence,
@@ -93,46 +78,62 @@ function createAnimations(animationsProp) {
         isEntering = !!componentState.unmounted,
         isExiting = presence?.[0] === !1,
         sendExitComplete = presence?.[1],
-        wasEnteringRef = (0, import_react2.useRef)(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+        refs = (0, import_react2.useRef)(null);
+      refs.current || (refs.current = {
+        isFirstRender: !0,
+        lastDoAnimate: null,
+        lastDontAnimate: null,
+        controls: null,
+        lastAnimateAt: 0,
+        disposed: !1,
+        wasExiting: !1,
+        isExiting: !1,
+        sendExitComplete: void 0,
+        animationState: "default",
+        frozenExitTarget: null,
+        exitCompleteScheduled: !1,
+        wasEntering: !1
+      });
+      const justFinishedEntering = refs.current.wasEntering && !isEntering;
       (0, import_react2.useEffect)(() => {
-        wasEnteringRef.current = isEntering;
+        refs.current.wasEntering = isEntering;
       });
       const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default",
         disableAnimation = isComponentHydrating || isMounting || !animationKey,
-        isFirstRender = (0, import_react2.useRef)(!0),
-        [scope, animate] = (0, import_react.useAnimate)(),
-        lastDoAnimate = (0, import_react2.useRef)(null),
-        controls = (0, import_react2.useRef)(null),
-        styleKey = JSON.stringify(style),
-        shouldDebug =
-        // process.env.NODE_ENV === 'development' &&
-        props.debug && props.debug !== "profile",
-        {
+        [scope, animate] = useAnimateSSRSafe();
+      refs.current.isExiting = isExiting, refs.current.sendExitComplete = sendExitComplete, refs.current.animationState = animationState;
+      const justStartedExiting = isExiting && !refs.current.wasExiting,
+        justStoppedExiting = !isExiting && refs.current.wasExiting;
+      (justStartedExiting || justStoppedExiting) && (refs.current.frozenExitTarget = null, refs.current.exitCompleteScheduled = !1), (0, import_react2.useEffect)(() => {
+        refs.current.wasExiting = isExiting;
+      });
+      const {
           dontAnimate = {},
           doAnimate,
           animationOptions
-        } = (0, import_react2.useMemo)(() => getMotionAnimatedProps(props, style, disableAnimation, animationState), [isExiting, animationKey, styleKey, animationState, disableAnimation]),
-        id = (0, import_react2.useId)(),
-        debugId = process.env.NODE_ENV === "development" ? id : "",
-        lastAnimateAt = (0, import_react2.useRef)(0),
-        disposed = (0, import_react2.useRef)(!1),
-        [firstRenderStyle] = (0, import_react2.useState)(style),
-        lastDontAnimate = (0, import_react2.useRef)(firstRenderStyle),
-        [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
+        } = getMotionAnimatedProps(props, style, disableAnimation, animationState),
+        [firstRenderStyle] = (0, import_react2.useState)(style);
+      refs.current.isFirstRender && (refs.current.lastDontAnimate = firstRenderStyle);
+      const [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
       (0, import_react2.useLayoutEffect)(() => (isHydratingGlobal && hydratingComponents.add(() => {
         setIsHydrating(!1);
       }), () => {
-        disposed.current = !0;
+        refs.current.disposed = !0;
       }), []);
       const flushAnimation = ({
-        doAnimate: doAnimate2 = {},
-        animationOptions: animationOptions2 = {},
+        doAnimate: doAnimateRaw = {},
+        animationOptions: passedOptions = {},
         dontAnimate: dontAnimate2
       }) => {
+        let startedControls = null;
+        const isCurrentlyExiting = refs.current.isExiting,
+          currentSendExitComplete = refs.current.sendExitComplete;
+        let doAnimate2 = doAnimateRaw;
+        isCurrentlyExiting && refs.current.frozenExitTarget && (doAnimate2 = refs.current.frozenExitTarget);
+        const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
         try {
           const node = stateRef.current.host;
-          if (isFirstRender.current && (lastDontAnimate.current = null, lastDoAnimate.current = null), shouldDebug && (console.groupCollapsed(`[motion] ${debugId} \u{1F30A} animate (${JSON.stringify(getDiff(lastDoAnimate.current, doAnimate2), null, 2)})`), console.info({
+          if (refs.current.isFirstRender && (refs.current.lastDontAnimate = null, refs.current.lastDoAnimate = null), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`), console.info({
             props,
             componentState,
             doAnimate: doAnimate2,
@@ -140,105 +141,82 @@ function createAnimations(animationsProp) {
             animationOptions: animationOptions2,
             animationProps,
             lastDoAnimate: {
-              ...lastDoAnimate.current
+              ...refs.current.lastDoAnimate
             },
             lastDontAnimate: {
-              ...lastDontAnimate.current
+              ...refs.current.lastDontAnimate
             },
             isExiting,
             style,
             node
           }), console.groupCollapsed("trace >"), console.trace(), console.groupEnd(), console.groupEnd()), !(node instanceof HTMLElement)) return;
-          const prevDont = lastDontAnimate.current;
+          const prevDont = refs.current.lastDontAnimate;
           if (dontAnimate2) if (prevDont) {
             removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
             const changed = getDiff(prevDont, dontAnimate2);
             changed && Object.assign(node.style, changed);
           } else Object.assign(node.style, dontAnimate2);
           if (doAnimate2) {
-            if (prevDont) {
-              const movedToAnimate = {};
-              for (const key in prevDont) key in doAnimate2 && (node.style[key] = prevDont[key], movedToAnimate[key] = prevDont[key], lastDoAnimate.current && (lastDoAnimate.current[key] = prevDont[key]));
-              Object.keys(movedToAnimate).length > 0 && animate(scope.current, {
-                ...movedToAnimate
-              }, {
-                duration: 0
-              });
-            }
-            const lastAnimated = lastDoAnimate.current;
+            if (prevDont) for (const key in prevDont) key in doAnimate2 && (node.style[key] = prevDont[key], refs.current.lastDoAnimate && (refs.current.lastDoAnimate[key] = prevDont[key]));
+            const lastAnimated = refs.current.lastDoAnimate;
             lastAnimated && removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
-            const diff = getDiff(lastDoAnimate.current, doAnimate2);
+            const diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
             if (diff) {
-              const isRunning = controls.current?.state === "running",
-                targetTransform = typeof diff.transform == "string" ? diff.transform : null,
-                isPositionOnlyTransform = targetTransform && targetTransform.includes("translate") && !nonPositionTransformRe.test(targetTransform),
-                isPopperElement = node.hasAttribute("data-popper-animate-position"),
-                isEnteringPresenceChild = presence && justFinishedEntering;
-              if (isRunning && controls.current && isPositionOnlyTransform && (isPopperElement || isEnteringPresenceChild)) {
-                const currentTransform = getComputedStyle(node).transform;
-                if (currentTransform && currentTransform !== "none") {
-                  const matrixMatch = currentTransform.match(/matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/);
-                  if (matrixMatch) {
-                    controls.current.stop(), node.style.transform = currentTransform;
-                    const currentX = Number.parseFloat(matrixMatch[1]),
-                      currentY = Number.parseFloat(matrixMatch[2]),
-                      keyframeDiff = {
-                        ...diff,
-                        transform: [`translateX(${currentX}px) translateY(${currentY}px)`, targetTransform]
-                      };
-                    controls.current = animate(scope.current, keyframeDiff, animationOptions2), lastAnimateAt.current = Date.now(), lastDontAnimate.current = dontAnimate2 ? {
-                      ...dontAnimate2
-                    } : {}, lastDoAnimate.current = doAnimate2 ? {
-                      ...doAnimate2
-                    } : {};
-                    return;
+              isCurrentlyExiting && !refs.current.frozenExitTarget && (refs.current.frozenExitTarget = {
+                ...doAnimate2
+              });
+              const isPopperPosition = node.hasAttribute("data-popper-animate-position");
+              let midFlightValues = null;
+              if (refs.current.controls) {
+                try {
+                  const computed = getComputedStyle(node);
+                  midFlightValues = {};
+                  for (const key in diff) {
+                    const val = computed[key];
+                    val !== void 0 && val !== "" && (midFlightValues[key] = val);
                   }
+                } catch {}
+                if (isCurrentlyExiting && refs.current.controls.stop(), midFlightValues) for (const key in midFlightValues) node.style[key] = midFlightValues[key];
+                if (isPopperPosition) {
+                  const anims = node.getAnimations();
+                  for (const anim of anims) anim.cancel();
                 }
               }
-              const fixedDiff = fixTransparentColors({
-                ...diff
-              }, lastDoAnimate.current);
-              controls.current = animate(scope.current, fixedDiff, animationOptions2), lastAnimateAt.current = Date.now();
+              const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
+              midFlightValues?.transform && fixedDiff.transform && (fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform]), startedControls = animate(scope.current, fixedDiff, animationOptions2), refs.current.controls = startedControls, refs.current.lastAnimateAt = Date.now();
             }
           }
-          lastDontAnimate.current = dontAnimate2 ? {
+          refs.current.lastDontAnimate = dontAnimate2 ? {
             ...dontAnimate2
-          } : {}, lastDoAnimate.current = doAnimate2 ? {
+          } : {}, refs.current.lastDoAnimate = doAnimate2 ? {
             ...doAnimate2
           } : {};
         } finally {
-          isExiting && (controls.current ? controls.current.finished.then(() => {
-            sendExitComplete?.();
-          }) : sendExitComplete?.());
+          isCurrentlyExiting && currentSendExitComplete && (startedControls ? (refs.current.exitCompleteScheduled = !0, startedControls.finished.then(() => {
+            refs.current.isExiting && currentSendExitComplete();
+          }).catch(() => {
+            refs.current.isExiting && currentSendExitComplete();
+          })) : refs.current.exitCompleteScheduled || currentSendExitComplete());
         }
       };
-      return useStyleEmitter?.(nextStyle => {
-        const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, animationState);
+      return useStyleEmitter?.((nextStyle, effectiveTransition) => {
+        const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
         flushAnimation(animationProps2);
       }), (0, import_web.useIsomorphicLayoutEffect)(() => {
-        if (isFirstRender.current) {
-          if (isFirstRender.current = !1, isHydrating) {
-            const node = stateRef.current.host;
-            node instanceof HTMLElement && (dontAnimate && (Object.assign(node.style, dontAnimate), animate(scope.current, {
-              ...dontAnimate
-            }, {
-              duration: 0
-            })), doAnimate && Object.keys(doAnimate).length > 0 ? (lastDoAnimate.current = {
-              ...doAnimate
-            }, animate(scope.current, {
+        if (refs.current.isFirstRender) {
+          if (refs.current.isFirstRender = !1, isHydrating) {
+            doAnimate && Object.keys(doAnimate).length > 0 ? refs.current.lastDoAnimate = {
               ...doAnimate
-            }, {
-              duration: 0
-            })) : lastDoAnimate.current = dontAnimate ? {
+            } : refs.current.lastDoAnimate = dontAnimate ? {
               ...dontAnimate
-            } : {}), lastDontAnimate.current = dontAnimate ? {
+            } : {}, refs.current.lastDontAnimate = dontAnimate ? {
               ...dontAnimate
-            } : {}, lastAnimateAt.current = Date.now();
+            } : {}, refs.current.lastAnimateAt = Date.now();
             return;
           }
-          lastDontAnimate.current = dontAnimate ? {
+          refs.current.lastDontAnimate = dontAnimate ? {
             ...dontAnimate
-          } : {}, lastDoAnimate.current = doAnimate ? {
+          } : {}, refs.current.lastDoAnimate = doAnimate ? {
             ...doAnimate
           } : {};
           return;
@@ -248,18 +226,16 @@ function createAnimations(animationsProp) {
           dontAnimate,
           animationOptions
         });
-      }, [styleKey, isExiting, disableAnimation]), shouldDebug && (console.groupCollapsed("[motion] \u{1F30A} render"), console.info({
+      }, [style, isExiting, disableAnimation]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed("[motion] render"), console.info({
         style,
         doAnimate,
         dontAnimate,
-        styleKey,
         scope,
         animationOptions,
         isExiting,
-        isFirstRender: isFirstRender.current,
+        isFirstRender: refs.current.isFirstRender,
         animationProps
       }), console.groupEnd()), {
-        // we never change this, after first render on
         style: firstRenderStyle,
         ref: scope,
         render: "div"
@@ -308,11 +284,11 @@ function createAnimations(animationsProp) {
       }), []);
     }
   };
-  function getMotionAnimatedProps(props, style, disable, animationState = "default") {
+  function getMotionAnimatedProps(props, style, disable, animationState = "default", transitionOverride) {
     if (disable) return {
       dontAnimate: style
     };
-    const animationOptions = transitionPropToAnimationConfig(props.transition, animationState);
+    const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
     let dontAnimate, doAnimate;
     const animateOnly = props.animateOnly;
     for (const key in style) {
@@ -325,34 +301,54 @@ function createAnimations(animationsProp) {
       animationOptions
     };
   }
-  function transitionPropToAnimationConfig(transitionProp, animationState = "default") {
-    const normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp),
-      effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-    if (!effectiveKey && Object.keys(normalized.properties).length === 0) return {};
-    const defaultConfig = effectiveKey ? animations[effectiveKey] : null,
-      delay = typeof normalized.delay == "number" ? normalized.delay / 1e3 : void 0,
+  function getAnimationOptions(transitionProp, animationState = "default") {
+    const normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
+    let effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+    !effectiveKey && animationState === "default" && (effectiveKey = normalized.enter || normalized.exit || null);
+    const globalConfigOverride = normalized.config ? {
+      ...normalized.config
+    } : void 0;
+    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) return {};
+    const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null,
+      delay = normalized.delay,
       result = {};
-    defaultConfig && (result.default = delay ? {
+    defaultConfig && Object.assign(result, defaultConfig), globalConfigOverride && (Object.assign(result, globalConfigOverride), result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0 && (result.type = "tween")), delay && (result.delay = delay), (defaultConfig || globalConfigOverride || delay) && (result.default = {
       ...defaultConfig,
-      delay
-    } : defaultConfig);
-    for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) if (typeof animationNameOrConfig == "string") result[propName] = animations[animationNameOrConfig];else if (animationNameOrConfig && typeof animationNameOrConfig == "object") {
-      const baseConfig = animationNameOrConfig.type ? animations[animationNameOrConfig.type] : defaultConfig;
+      ...globalConfigOverride,
+      ...(delay ? {
+        delay
+      } : null)
+    });
+    for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) if (typeof animationNameOrConfig == "string") result[propName] = withInferredType(animations[animationNameOrConfig]);else if (animationNameOrConfig && typeof animationNameOrConfig == "object") {
+      const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
       result[propName] = {
         ...baseConfig,
         ...animationNameOrConfig
       };
     }
+    convertMsToS(result), convertMsToS(result.default);
+    for (const key in result) key !== "default" && typeof result[key] == "object" && convertMsToS(result[key]);
     return result;
   }
 }
+function withInferredType(config) {
+  return config ? {
+    type: config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0 ? "tween" : "spring",
+    ...config
+  } : {
+    type: "spring"
+  };
+}
+function convertMsToS(config) {
+  config && (typeof config.delay == "number" && (config.delay = config.delay / 1e3), typeof config.duration == "number" && (config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0) && (config.duration = config.duration / 1e3));
+}
 function removeRemovedStyles(prev, next, node, dontClearIfIn) {
   for (const key in prev) if (!(key in next)) {
     if (dontClearIfIn && key in dontClearIfIn) continue;
     node.style[key] = "";
   }
 }
-const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "aspectRatio", "backdropFilter", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "fontFamily", "justifyContent", "marginBottom", "marginLeft", "marginRight", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "transformOrigin", "userSelect", "WebkitBackdropFilter", "zIndex"]),
+const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]),
   MotionView = createMotionView("div"),
   MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
@@ -365,7 +361,7 @@ function createMotionView(defaultTag) {
           style,
           ...propsRest
         } = propsIn,
-        [scope, animate] = (0, import_react.useAnimate)(),
+        [scope, animate] = useAnimateSSRSafe(),
         hostRef = (0, import_react2.useRef)(null),
         composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope),
         stateRef = (0, import_react2.useRef)(null);
@@ -376,14 +372,18 @@ function createMotionView(defaultTag) {
       });
       const [_, state] = (0, import_web.useThemeWithState)({}),
         styles = Array.isArray(style) ? style : [style],
-        [animatedStyle, nonAnimatedStyles] = [styles.find(x => x.getStyle), styles.filter(x => !x.getStyle)];
+        [animatedStyle, nonAnimatedStyles] = (() => {
+          let animatedStyle2;
+          const nonAnimatedStyles2 = [];
+          for (const style2 of styles) style2.getStyle ? animatedStyle2 = style2 : nonAnimatedStyles2.push(style2);
+          return [animatedStyle2, nonAnimatedStyles2];
+        })();
       function getProps(props2) {
         const out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state?.theme, state?.name, {
           unmounted: !1
         }, {
           isAnimated: !1,
           noClass: !0,
-          // noMergeStyle: true,
           resolveValues: "auto"
         });
         return out ? (out.viewProps.style && ((0, import_web.fixStyles)(out.viewProps.style), (0, import_web.styleToCSS)(out.viewProps.style)), out.viewProps) : {};
@@ -421,7 +421,7 @@ function createMotionView(defaultTag) {
         ref: composedRefs
       });
     });
-  return Component.acceptTagProp = !0, Component;
+  return Component.acceptRenderProp = !0, Component;
 }
 function getDiff(previous, next) {
   if (!previous) return next;
@@ -429,14 +429,17 @@ function getDiff(previous, next) {
   for (const key in next) next[key] !== previous[key] && (diff ||= {}, diff[key] = next[key]);
   return diff;
 }
-function fixTransparentColors(diff, previous) {
+function fixTransparentColors(diff, previous, next) {
   let result = diff;
   for (const key in diff) if (diff[key] === "transparent") {
-    const prev = previous?.[key];
     let fixed = "rgba(0, 0, 0, 0)";
-    if (typeof prev == "string") {
-      const rgbaMatch = prev.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
-      rgbaMatch && (fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`);
+    const candidates = [previous?.[key], next?.[key]];
+    for (const candidate of candidates) if (typeof candidate == "string" && candidate !== "transparent") {
+      const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+      if (rgbaMatch) {
+        fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+        break;
+      }
     }
     result === diff && (result = {
       ...diff