@hanzogui/animations-css 3.0.5 → 4.3.1

package/dist/cjs/createAnimations.cjs

@@ -2,80 +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("@hanzogui/animation-helpers"),
-  import_constants = require("@hanzogui/constants"),
-  import_use_presence = require("@hanzogui/use-presence"),
-  import_web = require("@hanzogui/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("@hanzogui/animation-helpers");
+var import_constants = require("@hanzogui/constants");
+var import_use_presence = require("@hanzogui/use-presence");
+var import_web = require("@hanzogui/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,
-      y = style.y ?? 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})`), style.scaleX !== void 0 && parts.push(`scaleX(${style.scaleX})`), style.scaleY !== void 0 && parts.push(`scaleY(${style.scaleY})`), style.rotate !== void 0) {
-    const 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) {
+    const val = style.rotate;
+    const 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) return;
   const transformStr = buildTransformString(style);
-  transformStr && (node.style.transform = transformStr);
-  for (const [key, value] of Object.entries(style)) 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 (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();
@@ -86,8 +136,8 @@ function createAnimations(animations) {
     inputStyle: "css",
     outputStyle: "css",
     useAnimatedNumber(initial) {
-      const [val, setVal] = import_react.default.useState(initial),
-        finishTimerRef = import_react.default.useRef(null);
+      const [val, setVal] = import_react.default.useState(initial);
+      const finishTimerRef = import_react.default.useRef(null);
       return {
         getInstance() {
           return setVal;
@@ -96,15 +146,29 @@ 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 {
-            const 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 {
+              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() {
-          finishTimerRef.current && (clearTimeout(finishTimerRef.current), finishTimerRef.current = null);
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
         }
       };
     },
@@ -116,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);
         };
       }, []);
@@ -126,6 +192,9 @@ 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,
@@ -135,40 +204,61 @@ function createAnimations(animations) {
       stateRef,
       styleState
     }) => {
-      const isHydrating = componentState.unmounted === !0,
-        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 exitCycleIdRef = import_react.default.useRef(0),
-        exitCompletedRef = import_react.default.useRef(!1),
-        wasExitingRef = import_react.default.useRef(!1),
-        exitInterruptedRef = import_react.default.useRef(!1),
-        justStartedExiting = isExiting && !wasExitingRef.current,
-        justStoppedExiting = !isExiting && wasExitingRef.current;
-      justStartedExiting && (exitCycleIdRef.current++, exitCompletedRef.current = !1), justStoppedExiting && (exitCycleIdRef.current++, exitInterruptedRef.current = !0), import_react.default.useEffect(() => {
+      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,
-        normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition),
-        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 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,
-          cycleId = exitCycleIdRef.current,
-          completeExit = () => {
-            cycleId === exitCycleIdRef.current && (exitCompletedRef.current || (exitCompletedRef.current = !0, sendExitComplete()));
-          };
+        const node = host;
+        const cycleId = exitCycleIdRef.current;
+        const completeExit = () => {
+          if (cycleId !== exitCycleIdRef.current) return;
+          if (exitCompletedRef.current) return;
+          exitCompletedRef.current = true;
+          sendExitComplete();
+        };
         if (keys.length === 0) {
           completeExit();
           return;
@@ -176,73 +266,158 @@ function createAnimations(animations) {
         let rafId;
         const wasInterrupted = exitInterruptedRef.current;
         let ignoreCancelEvents = wasInterrupted;
-        const enterStyle = props.enterStyle,
-          exitStyle = props.exitStyle,
-          delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "",
-          durationOverride2 = normalized.config?.duration,
-          exitTransitionString = 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 && durationOverride2 && (animationValue = applyDurationOverride(animationValue, durationOverride2)), animationValue ? `${key} ${animationValue}${delayStr2}` : null;
-          }).filter(Boolean).join(", ");
+        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) {
-          if (exitInterruptedRef.current = !1, node.style.transition = "none", exitStyle) {
+          exitInterruptedRef.current = false;
+          node.style.transition = "none";
+          if (exitStyle) {
             const resetStyle = {};
-            for (const key of Object.keys(exitStyle)) 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]);
+            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";
-          node.offsetHeight;
+          } else {
+            node.style.opacity = "1";
+            node.style.transform = "none";
+          }
+          void node.offsetHeight;
         } else if (exitStyle) {
-          ignoreCancelEvents = !0, node.style.transition = "none";
+          ignoreCancelEvents = true;
+          node.style.transition = "none";
           const resetStyle = {};
-          for (const key of Object.keys(exitStyle)) 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]);
-          applyStylesToNode(node, resetStyle), node.offsetHeight, rafId = requestAnimationFrame(() => {
-            cycleId === exitCycleIdRef.current && (node.style.transition = exitTransitionString, node.offsetHeight, applyStylesToNode(node, exitStyle), ignoreCancelEvents = !1);
+          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);
-          duration > maxDuration && (maxDuration = duration);
+        for (const animationValue of animationConfigs.values()) {
+          if (animationValue) {
+            const duration = extractDuration(animationValue);
+            if (duration > maxDuration) {
+              maxDuration = duration;
+            }
+          }
         }
-        const delay = normalized.delay ?? 0,
-          fallbackTimeout = maxDuration + delay,
-          timeoutId = setTimeout(() => {
-            completeExit();
-          }, fallbackTimeout),
-          transitioningProps = new Set(keys);
+        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;
-            (transitioningProps.has(eventProp) || eventProp === "all") && (completedCount++, completedCount >= transitioningProps.size && (clearTimeout(timeoutId), completeExit()));
-          },
-          onCancelAnimation = () => {
-            ignoreCancelEvents || (clearTimeout(timeoutId), completeExit());
-          };
-        return node.addEventListener("transitionend", onFinishAnimation), node.addEventListener("transitioncancel", onCancelAnimation), wasInterrupted && (rafId = requestAnimationFrame(() => {
-          cycleId === exitCycleIdRef.current && (node.style.transition = exitTransitionString, node.offsetHeight, applyStylesToNode(node, exitStyle), ignoreCancelEvents = !1);
-        })), () => {
-          clearTimeout(timeoutId), rafId !== void 0 && cancelAnimationFrame(rafId), node.removeEventListener("transitionend", onFinishAnimation), node.removeEventListener("transitioncancel", onCancelAnimation), node.style.transition = "";
+          if (event.target !== node) return;
+          const eventProp = event.propertyName;
+          if (transitioningProps.has(eventProp) || eventProp === "all") {
+            completedCount++;
+            if (completedCount >= transitioningProps.size) {
+              clearTimeout(timeoutId);
+              completeExit();
+            }
+          }
         };
-      }, [sendExitComplete, isExiting, stateRef, keys, normalized, defaultAnimation, props.enterStyle, props.exitStyle]), isHydrating || !(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 => {
+        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" : ""
       };