@hanzogui/animations-css 3.0.6 → 4.4.0

package/dist/esm/createAnimations.native.js

@@ -6,61 +6,111 @@ import React from "react";
 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,
-      x = (_style_x = style.x) !== null && _style_x !== void 0 ? _style_x : 0,
-      _style_y,
-      y = (_style_y = style.y) !== null && _style_y !== void 0 ? _style_y : 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})`), style.scaleX !== void 0 && parts.push(`scaleX(${style.scaleX})`), style.scaleY !== void 0 && parts.push(`scaleY(${style.scaleY})`), style.rotate !== void 0) {
-    var val = style.rotate,
-      unit = typeof val == "string" && val.includes("deg") ? "" : "deg";
+  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})`);
   }
-  return style.rotateX !== void 0 && parts.push(`rotateX(${style.rotateX}deg)`), style.rotateY !== void 0 && parts.push(`rotateY(${style.rotateY}deg)`), style.rotateZ !== void 0 && parts.push(`rotateZ(${style.rotateZ}deg)`), style.skewX !== void 0 && parts.push(`skewX(${style.skewX}deg)`), style.skewY !== void 0 && parts.push(`skewY(${style.skewY}deg)`), parts.join(" ");
+  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) {
-    var transformStr = buildTransformString(style);
-    transformStr && (node.style.transform = transformStr);
-    var _iteratorNormalCompletion = !0,
-      _didIteratorError = !1,
-      _iteratorError = void 0;
+  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 {
-      for (var _iterator = Object.entries(style)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-        var [key, value] = _step.value;
-        TRANSFORM_KEYS.includes(key) || value !== void 0 && (key === "opacity" ? node.style.opacity = String(value) : key === "backgroundColor" ? node.style.backgroundColor = String(value) : key === "color" ? node.style.color = String(value) : node.style[key] = typeof value == "number" ? `${value}px` : String(value));
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
       }
-    } catch (err) {
-      _didIteratorError = !0, _iteratorError = err;
     } finally {
-      try {
-        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-      } finally {
-        if (_didIteratorError) throw _iteratorError;
+      if (_didIteratorError) {
+        throw _iteratorError;
       }
     }
   }
@@ -74,8 +124,8 @@ function createAnimations(animations) {
     inputStyle: "css",
     outputStyle: "css",
     useAnimatedNumber(initial) {
-      var [val, setVal] = React.useState(initial),
-        finishTimerRef = React.useRef(null);
+      var [val, setVal] = React.useState(initial);
+      var finishTimerRef = React.useRef(null);
       return {
         getInstance() {
           return setVal;
@@ -84,17 +134,31 @@ function createAnimations(animations) {
           return val;
         },
         setValue(next, config, onFinish) {
-          if (setVal(next), finishTimerRef.current && (clearTimeout(finishTimerRef.current), finishTimerRef.current = null), 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);
+          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() {
-          finishTimerRef.current && (clearTimeout(finishTimerRef.current), finishTimerRef.current = null);
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
         }
       };
     },
@@ -103,193 +167,312 @@ function createAnimations(animations) {
         value
       } = param;
       React.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,
-          styleState
-        } = param,
-        _normalized_config,
-        isHydrating = componentState.unmounted === !0,
-        isEntering = !!componentState.unmounted,
-        isExiting = presence?.[0] === !1,
-        sendExitComplete = presence?.[1],
-        wasEnteringRef = React.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 = React.useRef(isEntering);
+      var justFinishedEntering = wasEnteringRef.current && !isEntering;
       React.useEffect(function () {
         wasEnteringRef.current = isEntering;
       });
-      var exitCycleIdRef = React.useRef(0),
-        exitCompletedRef = React.useRef(!1),
-        wasExitingRef = React.useRef(!1),
-        exitInterruptedRef = React.useRef(!1),
-        justStartedExiting = isExiting && !wasExitingRef.current,
-        justStoppedExiting = !isExiting && wasExitingRef.current;
-      justStartedExiting && (exitCycleIdRef.current++, exitCompletedRef.current = !1), justStoppedExiting && (exitCycleIdRef.current++, exitInterruptedRef.current = !0), React.useEffect(function () {
+      var exitCycleIdRef = React.useRef(0);
+      var exitCompletedRef = React.useRef(false);
+      var wasExitingRef = React.useRef(false);
+      var exitInterruptedRef = React.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;
+      }
+      React.useEffect(function () {
         wasExitingRef.current = isExiting;
       });
-      var _styleState_effectiveTransition,
-        effectiveTransition = (_styleState_effectiveTransition = styleState?.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition,
-        normalized = normalizeTransition(effectiveTransition),
-        animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default",
-        effectiveAnimationKey = getEffectiveAnimation(normalized, animationState),
-        defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null,
-        animatedProperties = 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"], useIsomorphicLayoutEffect(function () {
-        var _normalized_config2,
-          host = stateRef.current.host;
-        if (!(!sendExitComplete || !isExiting || !host)) {
-          var node = host,
-            cycleId = exitCycleIdRef.current,
-            completeExit = function () {
-              cycleId === exitCycleIdRef.current && (exitCompletedRef.current || (exitCompletedRef.current = !0, sendExitComplete()));
-            };
-          if (keys.length === 0) {
-            completeExit();
-            return;
+      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 = normalizeTransition(effectiveTransition);
+      var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+      var effectiveAnimationKey = getEffectiveAnimation(normalized, animationState);
+      var defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
+      var animatedProperties = 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"];
+      }
+      useIsomorphicLayoutEffect(function () {
+        var _normalized_config2;
+        var host = stateRef.current.host;
+        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;
+        }
+        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;
           }
-          var rafId,
-            wasInterrupted = exitInterruptedRef.current,
-            ignoreCancelEvents = wasInterrupted,
-            enterStyle = props.enterStyle,
-            exitStyle = props.exitStyle,
-            delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "",
-            durationOverride2 = (_normalized_config2 = normalized.config) === null || _normalized_config2 === void 0 ? void 0 : _normalized_config2.duration,
-            exitTransitionString = keys.map(function (key2) {
-              var propAnimation = normalized.properties[key2],
-                animationValue2 = null;
-              return typeof propAnimation == "string" ? animationValue2 = animations[propAnimation] : propAnimation && (typeof propAnimation > "u" ? "undefined" : _type_of(propAnimation)) === "object" && propAnimation.type ? animationValue2 = animations[propAnimation.type] : defaultAnimation && (animationValue2 = defaultAnimation), animationValue2 && durationOverride2 && (animationValue2 = applyDurationOverride(animationValue2, durationOverride2)), animationValue2 ? `${key2} ${animationValue2}${delayStr2}` : null;
-            }).filter(Boolean).join(", ");
-          if (wasInterrupted) {
-            if (exitInterruptedRef.current = !1, node.style.transition = "none", exitStyle) {
-              var resetStyle = {},
-                _iteratorNormalCompletion = !0,
-                _didIteratorError = !1,
-                _iteratorError = void 0;
-              try {
-                for (var _iterator = Object.keys(exitStyle)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-                  var key = _step.value;
-                  key === "opacity" ? resetStyle[key] = 1 : TRANSFORM_KEYS.includes(key) ? resetStyle[key] = key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0 : enterStyle?.[key] !== void 0 && (resetStyle[key] = enterStyle[key]);
-                }
-              } catch (err) {
-                _didIteratorError = !0, _iteratorError = err;
-              } finally {
-                try {
-                  !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-                } finally {
-                  if (_didIteratorError) throw _iteratorError;
-                }
-              }
-              applyStylesToNode(node, resetStyle);
-            } else node.style.opacity = "1", node.style.transform = "none";
-            node.offsetHeight;
-          } else if (exitStyle) {
-            ignoreCancelEvents = !0, node.style.transition = "none";
-            var resetStyle1 = {},
-              _iteratorNormalCompletion1 = !0,
-              _didIteratorError1 = !1,
-              _iteratorError1 = void 0;
+          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 _iterator1 = Object.keys(exitStyle)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
-                var key1 = _step1.value;
-                key1 === "opacity" ? resetStyle1[key1] = 1 : TRANSFORM_KEYS.includes(key1) ? resetStyle1[key1] = key1 === "scale" || key1 === "scaleX" || key1 === "scaleY" ? 1 : 0 : enterStyle?.[key1] !== void 0 && (resetStyle1[key1] = enterStyle[key1]);
+              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) {
-              _didIteratorError1 = !0, _iteratorError1 = err;
+              _didIteratorError = true;
+              _iteratorError = err;
             } finally {
               try {
-                !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                  _iterator.return();
+                }
               } finally {
-                if (_didIteratorError1) throw _iteratorError1;
+                if (_didIteratorError) {
+                  throw _iteratorError;
+                }
               }
             }
-            applyStylesToNode(node, resetStyle1), node.offsetHeight, rafId = requestAnimationFrame(function () {
-              cycleId === exitCycleIdRef.current && (node.style.transition = exitTransitionString, node.offsetHeight, applyStylesToNode(node, exitStyle), ignoreCancelEvents = !1);
-            });
+            applyStylesToNode(node, resetStyle);
+          } else {
+            node.style.opacity = "1";
+            node.style.transform = "none";
           }
-          var maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200,
-            animationConfigs = getAnimationConfigsForKeys(normalized, animations, keys, defaultAnimation),
-            _iteratorNormalCompletion2 = !0,
-            _didIteratorError2 = !1,
-            _iteratorError2 = void 0;
+          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 _iterator2 = animationConfigs.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
-              var animationValue = _step2.value;
-              if (animationValue) {
-                var duration = extractDuration(animationValue);
-                duration > maxDuration && (maxDuration = duration);
+            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) {
-            _didIteratorError2 = !0, _iteratorError2 = err;
+            _didIteratorError1 = true;
+            _iteratorError1 = err;
           } finally {
             try {
-              !_iteratorNormalCompletion2 && _iterator2.return != null && _iterator2.return();
+              if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                _iterator1.return();
+              }
             } finally {
-              if (_didIteratorError2) throw _iteratorError2;
+              if (_didIteratorError1) {
+                throw _iteratorError1;
+              }
             }
           }
-          var _normalized_delay,
-            delay = (_normalized_delay = normalized.delay) !== null && _normalized_delay !== void 0 ? _normalized_delay : 0,
-            fallbackTimeout = maxDuration + delay,
-            timeoutId = setTimeout(function () {
-              completeExit();
-            }, fallbackTimeout),
-            transitioningProps = new Set(keys),
-            completedCount = 0,
-            onFinishAnimation = function (event) {
-              if (event.target === node) {
-                var eventProp = event.propertyName;
-                (transitioningProps.has(eventProp) || eventProp === "all") && (completedCount++, completedCount >= transitioningProps.size && (clearTimeout(timeoutId), completeExit()));
+          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 = 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;
               }
-            },
-            onCancelAnimation = function () {
-              ignoreCancelEvents || (clearTimeout(timeoutId), completeExit());
-            };
-          return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onCancelAnimation), wasInterrupted && (rafId = requestAnimationFrame(function () {
-            cycleId === exitCycleIdRef.current && (node.style.transition = exitTransitionString, node.offsetHeight, applyStylesToNode(node, exitStyle), ignoreCancelEvents = !1);
-          })), function () {
-            clearTimeout(timeoutId), rafId !== void 0 && cancelAnimationFrame(rafId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onCancelAnimation), node.style.transition = "";
-          };
+            }
+          }
+        } catch (err) {
+          _didIteratorError2 = true;
+          _iteratorError2 = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+              _iterator2.return();
+            }
+          } finally {
+            if (_didIteratorError2) {
+              throw _iteratorError2;
+            }
+          }
         }
-      }, [sendExitComplete, isExiting, stateRef, keys, normalized, defaultAnimation, props.enterStyle, props.exitStyle]), isHydrating || !hasNormalizedAnimation(normalized)) return null;
-      Array.isArray(style.transform) && (style.transform = 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 _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 (!hasNormalizedAnimation(normalized)) {
+        return null;
+      }
+      if (Array.isArray(style.transform)) {
+        style.transform = 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" : ""
       };