@tamagui/animations-css 2.0.0-rc.9 → 2.0.0

package/dist/cjs/createAnimations.cjs

@@ -2,58 +2,130 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var createAnimations_exports = {};
 __export(createAnimations_exports, {
   createAnimations: () => createAnimations
 });
 module.exports = __toCommonJS(createAnimations_exports);
-var import_animation_helpers = require("@tamagui/animation-helpers"),
-  import_constants = require("@tamagui/constants"),
-  import_use_presence = require("@tamagui/use-presence"),
-  import_web = require("@tamagui/web"),
-  import_react = __toESM(require("react"), 1);
-const EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/,
-  EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
+var import_animation_helpers = require("@tamagui/animation-helpers");
+var import_constants = require("@tamagui/constants");
+var import_use_presence = require("@tamagui/use-presence");
+var import_web = require("@tamagui/web");
+var import_react = __toESM(require("react"), 1);
+const EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
+const EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
 function extractDuration(animation) {
   const msMatch = animation.match(EXTRACT_MS_REGEX);
-  if (msMatch) return Number.parseInt(msMatch[1], 10);
+  if (msMatch) {
+    return Number.parseInt(msMatch[1], 10);
+  }
   const sMatch = animation.match(EXTRACT_S_REGEX);
-  return sMatch ? Math.round(Number.parseFloat(sMatch[1]) * 1e3) : 300;
+  if (sMatch) {
+    return Math.round(Number.parseFloat(sMatch[1]) * 1e3);
+  }
+  return 300;
 }
-const MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/,
-  S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
+const MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
+const S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
 function applyDurationOverride(animation, durationMs) {
   const msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`);
-  if (msReplaced !== animation) return msReplaced;
+  if (msReplaced !== animation) {
+    return msReplaced;
+  }
   const sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`);
-  return sReplaced !== animation ? sReplaced : `${durationMs}ms ${animation}`;
+  if (sReplaced !== animation) {
+    return sReplaced;
+  }
+  return `${durationMs}ms ${animation}`;
+}
+const TRANSFORM_KEYS = ["x", "y", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"];
+function buildTransformString(style) {
+  if (!style) return "";
+  const parts = [];
+  if (style.x !== void 0 || style.y !== void 0) {
+    const x = style.x ?? 0;
+    const y = style.y ?? 0;
+    parts.push(`translate(${x}px, ${y}px)`);
+  }
+  if (style.scale !== void 0) {
+    parts.push(`scale(${style.scale})`);
+  }
+  if (style.scaleX !== void 0) {
+    parts.push(`scaleX(${style.scaleX})`);
+  }
+  if (style.scaleY !== void 0) {
+    parts.push(`scaleY(${style.scaleY})`);
+  }
+  if (style.rotate !== void 0) {
+    const val = style.rotate;
+    const unit = typeof val === "string" && val.includes("deg") ? "" : "deg";
+    parts.push(`rotate(${val}${unit})`);
+  }
+  if (style.rotateX !== void 0) {
+    parts.push(`rotateX(${style.rotateX}deg)`);
+  }
+  if (style.rotateY !== void 0) {
+    parts.push(`rotateY(${style.rotateY}deg)`);
+  }
+  if (style.rotateZ !== void 0) {
+    parts.push(`rotateZ(${style.rotateZ}deg)`);
+  }
+  if (style.skewX !== void 0) {
+    parts.push(`skewX(${style.skewX}deg)`);
+  }
+  if (style.skewY !== void 0) {
+    parts.push(`skewY(${style.skewY}deg)`);
+  }
+  return parts.join(" ");
+}
+function applyStylesToNode(node, style) {
+  if (!style) return;
+  const transformStr = buildTransformString(style);
+  if (transformStr) {
+    node.style.transform = transformStr;
+  }
+  for (const [key, value] of Object.entries(style)) {
+    if (TRANSFORM_KEYS.includes(key)) continue;
+    if (value === void 0) continue;
+    if (key === "opacity") {
+      node.style.opacity = String(value);
+    } else if (key === "backgroundColor") {
+      node.style.backgroundColor = String(value);
+    } else if (key === "color") {
+      node.style.color = String(value);
+    } else {
+      node.style[key] = typeof value === "number" ? `${value}px` : String(value);
+    }
+  }
 }
 function createAnimations(animations) {
   const reactionListeners = /* @__PURE__ */new WeakMap();
@@ -61,28 +133,43 @@ function createAnimations(animations) {
     animations,
     usePresence: import_use_presence.usePresence,
     ResetPresence: import_use_presence.ResetPresence,
-    supportsCSS: !0,
     inputStyle: "css",
     outputStyle: "css",
-    classNameAnimation: !0,
     useAnimatedNumber(initial) {
-      const [val, setVal] = import_react.default.useState(initial),
-        [onFinish, setOnFinish] = (0, import_react.useState)();
-      return (0, import_constants.useIsomorphicLayoutEffect)(() => {
-        onFinish && (onFinish?.(), setOnFinish(void 0));
-      }, [onFinish]), {
+      const [val, setVal] = import_react.default.useState(initial);
+      const finishTimerRef = import_react.default.useRef(null);
+      return {
         getInstance() {
           return setVal;
         },
         getValue() {
           return val;
         },
-        setValue(next, config, onFinish2) {
-          setVal(next), setOnFinish(onFinish2);
+        setValue(next, config, onFinish) {
+          setVal(next);
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
+          if (onFinish) {
+            if (!config || config.type === "direct" || config.type === "timing" && config.duration === 0) {
+              onFinish();
+            } else {
+              const duration = config.type === "timing" ? config.duration : 300;
+              finishTimerRef.current = setTimeout(onFinish, duration);
+            }
+          }
           const listeners = reactionListeners.get(setVal);
-          listeners && listeners.forEach(listener => listener(next));
+          if (listeners) {
+            listeners.forEach(listener => listener(next));
+          }
         },
-        stop() {}
+        stop() {
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
+        }
       };
     },
     useAnimatedNumberReaction({
@@ -93,9 +180,11 @@ function createAnimations(animations) {
         let queue = reactionListeners.get(instance);
         if (!queue) {
           const next = /* @__PURE__ */new Set();
-          reactionListeners.set(instance, next), queue = next;
+          reactionListeners.set(instance, next);
+          queue = next;
         }
-        return queue.add(onValue), () => {
+        queue.add(onValue);
+        return () => {
           queue?.delete(onValue);
         };
       }, []);
@@ -103,61 +192,232 @@ function createAnimations(animations) {
     useAnimatedNumberStyle(val, getStyle) {
       return getStyle(val.getValue());
     },
+    useAnimatedNumbersStyle(vals, getStyle) {
+      return getStyle(...vals.map(v => v.getValue()));
+    },
+    // @ts-ignore - styleState is added by createComponent
     useAnimations: ({
       props,
       presence,
       style,
       componentState,
-      stateRef
+      stateRef,
+      styleState
     }) => {
-      const isEntering = !!componentState.unmounted,
-        isExiting = presence?.[0] === !1,
-        sendExitComplete = presence?.[1],
-        wasEnteringRef = import_react.default.useRef(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+      const isHydrating = componentState.unmounted === true;
+      const isEntering = !!componentState.unmounted;
+      const isExiting = presence?.[0] === false;
+      const sendExitComplete = presence?.[1];
+      const wasEnteringRef = import_react.default.useRef(isEntering);
+      const justFinishedEntering = wasEnteringRef.current && !isEntering;
       import_react.default.useEffect(() => {
         wasEnteringRef.current = isEntering;
       });
-      const normalized = (0, import_animation_helpers.normalizeTransition)(props.transition),
-        effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default"),
-        defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null,
-        animatedProperties = (0, import_animation_helpers.getAnimatedProperties)(normalized),
-        hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null,
-        hasPerPropertyConfigs = animatedProperties.length > 0;
+      const exitCycleIdRef = import_react.default.useRef(0);
+      const exitCompletedRef = import_react.default.useRef(false);
+      const wasExitingRef = import_react.default.useRef(false);
+      const exitInterruptedRef = import_react.default.useRef(false);
+      const justStartedExiting = isExiting && !wasExitingRef.current;
+      const justStoppedExiting = !isExiting && wasExitingRef.current;
+      if (justStartedExiting) {
+        exitCycleIdRef.current++;
+        exitCompletedRef.current = false;
+      }
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++;
+        exitInterruptedRef.current = true;
+      }
+      import_react.default.useEffect(() => {
+        wasExitingRef.current = isExiting;
+      });
+      const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
+      const normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
+      const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+      const effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+      const defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
+      const animatedProperties = (0, import_animation_helpers.getAnimatedProperties)(normalized);
+      const hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
+      const hasPerPropertyConfigs = animatedProperties.length > 0;
       let keys;
-      if (props.animateOnly ? keys = props.animateOnly : hasPerPropertyConfigs && !hasDefault ? keys = animatedProperties : hasPerPropertyConfigs && hasDefault ? keys = ["all", ...animatedProperties] : keys = ["all"], (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (props.animateOnly) {
+        keys = props.animateOnly;
+      } else if (hasPerPropertyConfigs && !hasDefault) {
+        keys = animatedProperties;
+      } else if (hasPerPropertyConfigs && hasDefault) {
+        keys = ["all", ...animatedProperties];
+      } else {
+        keys = ["all"];
+      }
+      (0, import_constants.useIsomorphicLayoutEffect)(() => {
         const host = stateRef.current.host;
         if (!sendExitComplete || !isExiting || !host) return;
-        const node = host,
-          animationDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200,
-          delay = normalized.delay ?? 0,
-          fallbackTimeout = animationDuration + delay,
-          timeoutId = setTimeout(() => {
-            sendExitComplete?.();
-          }, fallbackTimeout),
-          onFinishAnimation = () => {
-            clearTimeout(timeoutId), sendExitComplete?.();
-          };
-        return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), () => {
-          clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
+        const node = host;
+        const cycleId = exitCycleIdRef.current;
+        const completeExit = () => {
+          if (cycleId !== exitCycleIdRef.current) return;
+          if (exitCompletedRef.current) return;
+          exitCompletedRef.current = true;
+          sendExitComplete();
         };
-      }, [sendExitComplete, isExiting]), !(0, import_animation_helpers.hasAnimation)(normalized)) return null;
-      Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform));
-      const delayStr = normalized.delay ? ` ${normalized.delay}ms` : "",
-        durationOverride = normalized.config?.duration;
-      return style.transition = keys.map(key => {
+        if (keys.length === 0) {
+          completeExit();
+          return;
+        }
+        let rafId;
+        const wasInterrupted = exitInterruptedRef.current;
+        let ignoreCancelEvents = wasInterrupted;
+        const enterStyle = props.enterStyle;
+        const exitStyle = props.exitStyle;
+        const delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "";
+        const durationOverride2 = normalized.config?.duration;
+        const exitTransitionString = keys.map(key => {
+          const propAnimation = normalized.properties[key];
+          let animationValue = null;
+          if (typeof propAnimation === "string") {
+            animationValue = animations[propAnimation];
+          } else if (propAnimation && typeof propAnimation === "object" && propAnimation.type) {
+            animationValue = animations[propAnimation.type];
+          } else if (defaultAnimation) {
+            animationValue = defaultAnimation;
+          }
+          if (animationValue && durationOverride2) {
+            animationValue = applyDurationOverride(animationValue, durationOverride2);
+          }
+          return animationValue ? `${key} ${animationValue}${delayStr2}` : null;
+        }).filter(Boolean).join(", ");
+        if (wasInterrupted) {
+          exitInterruptedRef.current = false;
+          node.style.transition = "none";
+          if (exitStyle) {
+            const resetStyle = {};
+            for (const key of Object.keys(exitStyle)) {
+              if (key === "opacity") {
+                resetStyle[key] = 1;
+              } else if (TRANSFORM_KEYS.includes(key)) {
+                resetStyle[key] = key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+              } else if (enterStyle?.[key] !== void 0) {
+                resetStyle[key] = enterStyle[key];
+              }
+            }
+            applyStylesToNode(node, resetStyle);
+          } else {
+            node.style.opacity = "1";
+            node.style.transform = "none";
+          }
+          void node.offsetHeight;
+        } else if (exitStyle) {
+          ignoreCancelEvents = true;
+          node.style.transition = "none";
+          const resetStyle = {};
+          for (const key of Object.keys(exitStyle)) {
+            if (key === "opacity") {
+              resetStyle[key] = 1;
+            } else if (TRANSFORM_KEYS.includes(key)) {
+              resetStyle[key] = key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+            } else if (enterStyle?.[key] !== void 0) {
+              resetStyle[key] = enterStyle[key];
+            }
+          }
+          applyStylesToNode(node, resetStyle);
+          void node.offsetHeight;
+          rafId = requestAnimationFrame(() => {
+            if (cycleId !== exitCycleIdRef.current) return;
+            node.style.transition = exitTransitionString;
+            void node.offsetHeight;
+            applyStylesToNode(node, exitStyle);
+            ignoreCancelEvents = false;
+          });
+        }
+        let maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200;
+        const animationConfigs = (0, import_animation_helpers.getAnimationConfigsForKeys)(normalized, animations, keys, defaultAnimation);
+        for (const animationValue of animationConfigs.values()) {
+          if (animationValue) {
+            const duration = extractDuration(animationValue);
+            if (duration > maxDuration) {
+              maxDuration = duration;
+            }
+          }
+        }
+        const delay = normalized.delay ?? 0;
+        const fallbackTimeout = maxDuration + delay;
+        const timeoutId = setTimeout(() => {
+          completeExit();
+        }, fallbackTimeout);
+        const transitioningProps = new Set(keys);
+        let completedCount = 0;
+        const onFinishAnimation = event => {
+          if (event.target !== node) return;
+          const eventProp = event.propertyName;
+          if (transitioningProps.has(eventProp) || eventProp === "all") {
+            completedCount++;
+            if (completedCount >= transitioningProps.size) {
+              clearTimeout(timeoutId);
+              completeExit();
+            }
+          }
+        };
+        const onCancelAnimation = () => {
+          if (ignoreCancelEvents) return;
+          clearTimeout(timeoutId);
+          completeExit();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onCancelAnimation);
+        if (wasInterrupted) {
+          rafId = requestAnimationFrame(() => {
+            if (cycleId !== exitCycleIdRef.current) return;
+            node.style.transition = exitTransitionString;
+            void node.offsetHeight;
+            applyStylesToNode(node, exitStyle);
+            ignoreCancelEvents = false;
+          });
+        }
+        return () => {
+          clearTimeout(timeoutId);
+          if (rafId !== void 0) cancelAnimationFrame(rafId);
+          node.removeEventListener("transitionend", onFinishAnimation);
+          node.removeEventListener("transitioncancel", onCancelAnimation);
+          node.style.transition = "";
+        };
+      }, [sendExitComplete, isExiting, stateRef, keys, normalized, defaultAnimation, props.enterStyle, props.exitStyle]);
+      if (isHydrating) {
+        return null;
+      }
+      if (!(0, import_animation_helpers.hasAnimation)(normalized)) {
+        return null;
+      }
+      if (Array.isArray(style.transform)) {
+        style.transform = (0, import_web.transformsToString)(style.transform);
+      }
+      const delayStr = normalized.delay ? ` ${normalized.delay}ms` : "";
+      const durationOverride = normalized.config?.duration;
+      style.transition = keys.map(key => {
         const propAnimation = normalized.properties[key];
         let animationValue = null;
-        return typeof propAnimation == "string" ? animationValue = animations[propAnimation] : propAnimation && typeof propAnimation == "object" && propAnimation.type ? animationValue = animations[propAnimation.type] : defaultAnimation && (animationValue = defaultAnimation), animationValue && durationOverride && (animationValue = applyDurationOverride(animationValue, durationOverride)), animationValue ? `${key} ${animationValue}${delayStr}` : null;
-      }).filter(Boolean).join(", "), process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info("CSS animation", {
-        props,
-        animations,
-        normalized,
-        defaultAnimation,
-        style,
-        isEntering,
-        isExiting
-      }), {
+        if (typeof propAnimation === "string") {
+          animationValue = animations[propAnimation];
+        } else if (propAnimation && typeof propAnimation === "object" && propAnimation.type) {
+          animationValue = animations[propAnimation.type];
+        } else if (defaultAnimation) {
+          animationValue = defaultAnimation;
+        }
+        if (animationValue && durationOverride) {
+          animationValue = applyDurationOverride(animationValue, durationOverride);
+        }
+        return animationValue ? `${key} ${animationValue}${delayStr}` : null;
+      }).filter(Boolean).join(", ");
+      if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+        console.info("CSS animation", {
+          props,
+          animations,
+          normalized,
+          defaultAnimation,
+          style,
+          isEntering,
+          isExiting
+        });
+      }
+      return {
         style,
         className: isEntering ? "t_unmounted" : ""
       };