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

package/dist/cjs/createAnimations.native.js

@@ -4,63 +4,156 @@ 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);
+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);
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/,
-  EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
+var EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
+var EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
 function extractDuration(animation) {
   var msMatch = animation.match(EXTRACT_MS_REGEX);
-  if (msMatch) return Number.parseInt(msMatch[1], 10);
+  if (msMatch) {
+    return Number.parseInt(msMatch[1], 10);
+  }
   var 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;
 }
-var MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/,
-  S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
+var MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
+var S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
 function applyDurationOverride(animation, durationMs) {
   var msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`);
-  if (msReplaced !== animation) return msReplaced;
+  if (msReplaced !== animation) {
+    return msReplaced;
+  }
   var sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`);
-  return sReplaced !== animation ? sReplaced : `${durationMs}ms ${animation}`;
+  if (sReplaced !== animation) {
+    return sReplaced;
+  }
+  return `${durationMs}ms ${animation}`;
+}
+var TRANSFORM_KEYS = ["x", "y", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"];
+function buildTransformString(style) {
+  if (!style) return "";
+  var parts = [];
+  if (style.x !== void 0 || style.y !== void 0) {
+    var _style_x;
+    var x = (_style_x = style.x) !== null && _style_x !== void 0 ? _style_x : 0;
+    var _style_y;
+    var y = (_style_y = style.y) !== null && _style_y !== void 0 ? _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) {
+    var val = style.rotate;
+    var 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;
+  var transformStr = buildTransformString(style);
+  if (transformStr) {
+    node.style.transform = transformStr;
+  }
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = Object.entries(style)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var [key, value] = _step.value;
+      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);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
 }
 function createAnimations(animations) {
   var reactionListeners = /* @__PURE__ */new WeakMap();
@@ -68,30 +161,45 @@ function createAnimations(animations) {
     animations,
     usePresence: import_use_presence.usePresence,
     ResetPresence: import_use_presence.ResetPresence,
-    supportsCSS: !0,
     inputStyle: "css",
     outputStyle: "css",
-    classNameAnimation: !0,
     useAnimatedNumber(initial) {
-      var [val, setVal] = import_react.default.useState(initial),
-        [onFinish, setOnFinish] = (0, import_react.useState)();
-      return (0, import_constants.useIsomorphicLayoutEffect)(function () {
-        onFinish && (onFinish?.(), setOnFinish(void 0));
-      }, [onFinish]), {
+      var [val, setVal] = import_react.default.useState(initial);
+      var 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 {
+              var duration = config.type === "timing" ? config.duration : 300;
+              finishTimerRef.current = setTimeout(onFinish, duration);
+            }
+          }
           var listeners = reactionListeners.get(setVal);
-          listeners && listeners.forEach(function (listener) {
-            return listener(next);
-          });
+          if (listeners) {
+            listeners.forEach(function (listener) {
+              return listener(next);
+            });
+          }
         },
-        stop() {}
+        stop() {
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
+        }
       };
     },
     useAnimatedNumberReaction(param, onValue) {
@@ -99,80 +207,312 @@ function createAnimations(animations) {
         value
       } = param;
       import_react.default.useEffect(function () {
-        var instance = value.getInstance(),
-          queue = reactionListeners.get(instance);
+        var instance = value.getInstance();
+        var queue = reactionListeners.get(instance);
         if (!queue) {
           var next = /* @__PURE__ */new Set();
-          reactionListeners.set(instance, next), queue = next;
+          reactionListeners.set(instance, next);
+          queue = next;
         }
-        return queue.add(onValue), function () {
-          queue?.delete(onValue);
+        queue.add(onValue);
+        return function () {
+          queue === null || queue === void 0 ? void 0 : queue.delete(onValue);
         };
       }, []);
     },
     useAnimatedNumberStyle(val, getStyle) {
       return getStyle(val.getValue());
     },
+    useAnimatedNumbersStyle(vals, getStyle) {
+      return getStyle(...vals.map(function (v) {
+        return v.getValue();
+      }));
+    },
+    // @ts-ignore - styleState is added by createComponent
     useAnimations: function (param) {
       var {
-          props,
-          presence,
-          style,
-          componentState,
-          stateRef
-        } = param,
-        _normalized_config,
-        isEntering = !!componentState.unmounted,
-        isExiting = presence?.[0] === !1,
-        sendExitComplete = presence?.[1],
-        wasEnteringRef = import_react.default.useRef(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+        props,
+        presence,
+        style,
+        componentState,
+        stateRef,
+        styleState
+      } = param;
+      var _normalized_config;
+      var isHydrating = componentState.unmounted === true;
+      var isEntering = !!componentState.unmounted;
+      var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
+      var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
+      var wasEnteringRef = import_react.default.useRef(isEntering);
+      var justFinishedEntering = wasEnteringRef.current && !isEntering;
       import_react.default.useEffect(function () {
         wasEnteringRef.current = isEntering;
       });
-      var normalized = (0, import_animation_helpers.normalizeTransition)(props.transition),
-        animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default",
-        effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState),
-        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,
-        keys;
-      if (props.animateOnly ? keys = props.animateOnly : hasPerPropertyConfigs && !hasDefault ? keys = animatedProperties : hasPerPropertyConfigs && hasDefault ? keys = ["all", ...animatedProperties] : keys = ["all"], (0, import_constants.useIsomorphicLayoutEffect)(function () {
+      var exitCycleIdRef = import_react.default.useRef(0);
+      var exitCompletedRef = import_react.default.useRef(false);
+      var wasExitingRef = import_react.default.useRef(false);
+      var exitInterruptedRef = import_react.default.useRef(false);
+      var justStartedExiting = isExiting && !wasExitingRef.current;
+      var justStoppedExiting = !isExiting && wasExitingRef.current;
+      if (justStartedExiting) {
+        exitCycleIdRef.current++;
+        exitCompletedRef.current = false;
+      }
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++;
+        exitInterruptedRef.current = true;
+      }
+      import_react.default.useEffect(function () {
+        wasExitingRef.current = isExiting;
+      });
+      var _styleState_effectiveTransition;
+      var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
+      var normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
+      var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+      var effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+      var defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
+      var animatedProperties = (0, import_animation_helpers.getAnimatedProperties)(normalized);
+      var hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
+      var hasPerPropertyConfigs = animatedProperties.length > 0;
+      var keys;
+      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)(function () {
+        var _normalized_config2;
         var host = stateRef.current.host;
-        if (!(!sendExitComplete || !isExiting || !host)) {
-          var node = host,
-            animationDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200,
-            _normalized_delay,
-            delay = (_normalized_delay = normalized.delay) !== null && _normalized_delay !== void 0 ? _normalized_delay : 0,
-            fallbackTimeout = animationDuration + delay,
-            timeoutId = setTimeout(function () {
-              sendExitComplete?.();
-            }, fallbackTimeout),
-            onFinishAnimation = function () {
-              clearTimeout(timeoutId), sendExitComplete?.();
-            };
-          return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onFinishAnimation), function () {
-            clearTimeout(timeoutId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onFinishAnimation);
-          };
+        if (!sendExitComplete || !isExiting || !host) return;
+        var node = host;
+        var cycleId = exitCycleIdRef.current;
+        var completeExit = function () {
+          if (cycleId !== exitCycleIdRef.current) return;
+          if (exitCompletedRef.current) return;
+          exitCompletedRef.current = true;
+          sendExitComplete();
+        };
+        if (keys.length === 0) {
+          completeExit();
+          return;
         }
-      }, [sendExitComplete, isExiting]), !(0, import_animation_helpers.hasAnimation)(normalized)) return null;
-      Array.isArray(style.transform) && (style.transform = (0, import_web.transformsToString)(style.transform));
-      var delayStr = normalized.delay ? ` ${normalized.delay}ms` : "",
-        durationOverride = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
-      return style.transition = keys.map(function (key) {
-        var propAnimation = normalized.properties[key],
-          animationValue = null;
-        return typeof propAnimation == "string" ? animationValue = animations[propAnimation] : propAnimation && (typeof propAnimation > "u" ? "undefined" : _type_of(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
-      }), {
+        var rafId;
+        var wasInterrupted = exitInterruptedRef.current;
+        var ignoreCancelEvents = wasInterrupted;
+        var enterStyle = props.enterStyle;
+        var exitStyle = props.exitStyle;
+        var delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "";
+        var durationOverride2 = (_normalized_config2 = normalized.config) === null || _normalized_config2 === void 0 ? void 0 : _normalized_config2.duration;
+        var exitTransitionString = keys.map(function (key2) {
+          var propAnimation = normalized.properties[key2];
+          var animationValue2 = null;
+          if (typeof propAnimation === "string") {
+            animationValue2 = animations[propAnimation];
+          } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object" && propAnimation.type) {
+            animationValue2 = animations[propAnimation.type];
+          } else if (defaultAnimation) {
+            animationValue2 = defaultAnimation;
+          }
+          if (animationValue2 && durationOverride2) {
+            animationValue2 = applyDurationOverride(animationValue2, durationOverride2);
+          }
+          return animationValue2 ? `${key2} ${animationValue2}${delayStr2}` : null;
+        }).filter(Boolean).join(", ");
+        if (wasInterrupted) {
+          exitInterruptedRef.current = false;
+          node.style.transition = "none";
+          if (exitStyle) {
+            var resetStyle = {};
+            var _iteratorNormalCompletion = true,
+              _didIteratorError = false,
+              _iteratorError = void 0;
+            try {
+              for (var _iterator = Object.keys(exitStyle)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                var key = _step.value;
+                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 === null || enterStyle === void 0 ? void 0 : enterStyle[key]) !== void 0) {
+                  resetStyle[key] = enterStyle[key];
+                }
+              }
+            } catch (err) {
+              _didIteratorError = true;
+              _iteratorError = err;
+            } finally {
+              try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                  _iterator.return();
+                }
+              } finally {
+                if (_didIteratorError) {
+                  throw _iteratorError;
+                }
+              }
+            }
+            applyStylesToNode(node, resetStyle);
+          } else {
+            node.style.opacity = "1";
+            node.style.transform = "none";
+          }
+          void node.offsetHeight;
+        } else if (exitStyle) {
+          ignoreCancelEvents = true;
+          node.style.transition = "none";
+          var resetStyle1 = {};
+          var _iteratorNormalCompletion1 = true,
+            _didIteratorError1 = false,
+            _iteratorError1 = void 0;
+          try {
+            for (var _iterator1 = Object.keys(exitStyle)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+              var key1 = _step1.value;
+              if (key1 === "opacity") {
+                resetStyle1[key1] = 1;
+              } else if (TRANSFORM_KEYS.includes(key1)) {
+                resetStyle1[key1] = key1 === "scale" || key1 === "scaleX" || key1 === "scaleY" ? 1 : 0;
+              } else if ((enterStyle === null || enterStyle === void 0 ? void 0 : enterStyle[key1]) !== void 0) {
+                resetStyle1[key1] = enterStyle[key1];
+              }
+            }
+          } catch (err) {
+            _didIteratorError1 = true;
+            _iteratorError1 = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                _iterator1.return();
+              }
+            } finally {
+              if (_didIteratorError1) {
+                throw _iteratorError1;
+              }
+            }
+          }
+          applyStylesToNode(node, resetStyle1);
+          void node.offsetHeight;
+          rafId = requestAnimationFrame(function () {
+            if (cycleId !== exitCycleIdRef.current) return;
+            node.style.transition = exitTransitionString;
+            void node.offsetHeight;
+            applyStylesToNode(node, exitStyle);
+            ignoreCancelEvents = false;
+          });
+        }
+        var maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200;
+        var animationConfigs = (0, import_animation_helpers.getAnimationConfigsForKeys)(normalized, animations, keys, defaultAnimation);
+        var _iteratorNormalCompletion2 = true,
+          _didIteratorError2 = false,
+          _iteratorError2 = void 0;
+        try {
+          for (var _iterator2 = animationConfigs.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var animationValue = _step2.value;
+            if (animationValue) {
+              var duration = extractDuration(animationValue);
+              if (duration > maxDuration) {
+                maxDuration = duration;
+              }
+            }
+          }
+        } catch (err) {
+          _didIteratorError2 = true;
+          _iteratorError2 = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+              _iterator2.return();
+            }
+          } finally {
+            if (_didIteratorError2) {
+              throw _iteratorError2;
+            }
+          }
+        }
+        var _normalized_delay;
+        var delay = (_normalized_delay = normalized.delay) !== null && _normalized_delay !== void 0 ? _normalized_delay : 0;
+        var fallbackTimeout = maxDuration + delay;
+        var timeoutId = setTimeout(function () {
+          completeExit();
+        }, fallbackTimeout);
+        var transitioningProps = new Set(keys);
+        var completedCount = 0;
+        var onFinishAnimation = function (event) {
+          if (event.target !== node) return;
+          var eventProp = event.propertyName;
+          if (transitioningProps.has(eventProp) || eventProp === "all") {
+            completedCount++;
+            if (completedCount >= transitioningProps.size) {
+              clearTimeout(timeoutId);
+              completeExit();
+            }
+          }
+        };
+        var onCancelAnimation = function () {
+          if (ignoreCancelEvents) return;
+          clearTimeout(timeoutId);
+          completeExit();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onCancelAnimation);
+        if (wasInterrupted) {
+          rafId = requestAnimationFrame(function () {
+            if (cycleId !== exitCycleIdRef.current) return;
+            node.style.transition = exitTransitionString;
+            void node.offsetHeight;
+            applyStylesToNode(node, exitStyle);
+            ignoreCancelEvents = false;
+          });
+        }
+        return function () {
+          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);
+      }
+      var delayStr = normalized.delay ? ` ${normalized.delay}ms` : "";
+      var durationOverride = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
+      style.transition = keys.map(function (key) {
+        var propAnimation = normalized.properties[key];
+        var animationValue = null;
+        if (typeof propAnimation === "string") {
+          animationValue = animations[propAnimation];
+        } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(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" : ""
       };