@tamagui/animations-css 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/createAnimations.mjs

@@ -1,404 +1,357 @@
-import { normalizeTransition, getAnimatedProperties, hasAnimation as hasNormalizedAnimation, getEffectiveAnimation, getAnimationConfigsForKeys } from "@tamagui/animation-helpers";
+import { getAnimatedProperties, getEffectiveAnimation, hasAnimation, normalizeTransition } from "@tamagui/animation-helpers";
 import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import { transformsToString } from "@tamagui/web";
 import React from "react";
-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);
-  }
-  const sMatch = animation.match(EXTRACT_S_REGEX);
-  if (sMatch) {
-    return Math.round(Number.parseFloat(sMatch[1]) * 1e3);
-  }
-  return 300;
+import { useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle, useAnimatedNumbersStyle } from "./animated-number.mjs";
+
+const hasRAF = typeof requestAnimationFrame !== "undefined";
+function waitForAnimations(node) {
+	if (typeof node.getAnimations !== "function") {
+		return Promise.resolve(true);
+	}
+	return new Promise((resolve) => {
+		const check = () => {
+			const animations = node.getAnimations();
+			if (animations.length === 0) {
+				resolve(true);
+				return;
+			}
+			Promise.all(animations.map((a) => a.finished)).then(() => resolve(true)).catch(() => {
+				const remaining = node.getAnimations();
+				if (remaining.some((a) => a.playState === "running" || a.pending)) {
+					check();
+					return;
+				}
+				resolve(false);
+			});
+		};
+		if (hasRAF) {
+			requestAnimationFrame(check);
+		} else {
+			check();
+		}
+	});
 }
-const MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
-const S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
+const DURATION_REGEX = /(\d+(?:\.\d+)?)\s*(?:ms|s(?!tiffness))/;
 function applyDurationOverride(animation, durationMs) {
-  const msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`);
-  if (msReplaced !== animation) {
-    return msReplaced;
-  }
-  const sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`);
-  if (sReplaced !== animation) {
-    return sReplaced;
-  }
-  return `${durationMs}ms ${animation}`;
+	const replaced = animation.replace(DURATION_REGEX, `${durationMs}ms`);
+	return replaced === animation ? `${durationMs}ms ${animation}` : replaced;
 }
-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(" ");
+const CSS_TRANSFORM_PROPERTIES = {
+	transform: [
+		"translate",
+		"scale",
+		"rotate",
+		"transform"
+	],
+	x: ["translate"],
+	y: ["translate"],
+	scale: ["scale"],
+	scaleX: ["scale"],
+	scaleY: ["scale"],
+	rotate: ["rotate"],
+	rotateX: ["transform"],
+	rotateY: ["transform"],
+	rotateZ: ["transform"],
+	skewX: ["transform"],
+	skewY: ["transform"]
+};
+const getCSSProperties = (key) => {
+	return CSS_TRANSFORM_PROPERTIES[key] || [key];
+};
+const hyphenatedPropertyCache = {};
+const emptyProperties = [];
+function hyphenateProperty(property) {
+	if (property.startsWith("--")) return property;
+	return hyphenatedPropertyCache[property] ||= property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
-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 getLifecycleCSSProperties(keys) {
+	if (!keys?.size) return emptyProperties;
+	const properties = /* @__PURE__ */ new Set();
+	for (const key of keys) {
+		for (const property of getCSSProperties(key)) {
+			properties.add(hyphenateProperty(property));
+		}
+	}
+	return [...properties].sort();
+}
+function readComputedProperties(node, properties) {
+	const computed = getComputedStyle(node);
+	const values = {};
+	for (const property of properties) {
+		const value = computed.getPropertyValue(property);
+		if (value) values[property] = value;
+	}
+	return values;
+}
+function applyCSSProperties(node, values) {
+	for (const property in values) {
+		node.style.setProperty(property, values[property]);
+	}
+}
+function clearCSSProperties(node, properties) {
+	for (const property of properties) {
+		node.style.removeProperty(property);
+	}
 }
 function createAnimations(animations) {
-  const reactionListeners = /* @__PURE__ */new WeakMap();
-  return {
-    animations,
-    usePresence,
-    ResetPresence,
-    inputStyle: "css",
-    outputStyle: "css",
-    useAnimatedNumber(initial) {
-      const [val, setVal] = React.useState(initial);
-      const finishTimerRef = React.useRef(null);
-      return {
-        getInstance() {
-          return setVal;
-        },
-        getValue() {
-          return val;
-        },
-        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);
-          if (listeners) {
-            listeners.forEach(listener => listener(next));
-          }
-        },
-        stop() {
-          if (finishTimerRef.current) {
-            clearTimeout(finishTimerRef.current);
-            finishTimerRef.current = null;
-          }
-        }
-      };
-    },
-    useAnimatedNumberReaction({
-      value
-    }, onValue) {
-      React.useEffect(() => {
-        const instance = value.getInstance();
-        let queue = reactionListeners.get(instance);
-        if (!queue) {
-          const next = /* @__PURE__ */new Set();
-          reactionListeners.set(instance, next);
-          queue = next;
-        }
-        queue.add(onValue);
-        return () => {
-          queue?.delete(onValue);
-        };
-      }, []);
-    },
-    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,
-      styleState
-    }) => {
-      const isHydrating = componentState.unmounted === true;
-      const isEntering = !!componentState.unmounted;
-      const isExiting = presence?.[0] === false;
-      const sendExitComplete = presence?.[1];
-      const wasEnteringRef = React.useRef(isEntering);
-      const justFinishedEntering = wasEnteringRef.current && !isEntering;
-      React.useEffect(() => {
-        wasEnteringRef.current = isEntering;
-      });
-      const exitCycleIdRef = React.useRef(0);
-      const exitCompletedRef = React.useRef(false);
-      const wasExitingRef = React.useRef(false);
-      const exitInterruptedRef = React.useRef(false);
-      const sendExitCompleteRef = React.useRef(sendExitComplete);
-      const lastNonExitingStyleRef = React.useRef({});
-      sendExitCompleteRef.current = sendExitComplete;
-      const justStartedExiting = isExiting && !wasExitingRef.current;
-      const justStoppedExiting = !isExiting && wasExitingRef.current;
-      if (justStartedExiting) {
-        exitCycleIdRef.current++;
-        exitCompletedRef.current = false;
-      }
-      if (justStoppedExiting) {
-        exitCycleIdRef.current++;
-        exitInterruptedRef.current = true;
-      }
-      React.useEffect(() => {
-        wasExitingRef.current = isExiting;
-      });
-      useIsomorphicLayoutEffect(() => {
-        const host = stateRef.current.host;
-        if (isExiting || !host) return;
-        const computedStyle = getComputedStyle(host);
-        lastNonExitingStyleRef.current = {
-          opacity: computedStyle.opacity
-        };
-      });
-      const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
-      const normalized = normalizeTransition(effectiveTransition);
-      const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
-      const effectiveAnimationKey = getEffectiveAnimation(normalized, animationState);
-      const defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
-      const animatedProperties = 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;
-      } else if (hasPerPropertyConfigs && !hasDefault) {
-        keys = animatedProperties;
-      } else if (hasPerPropertyConfigs && hasDefault) {
-        keys = ["all", ...animatedProperties];
-      } else {
-        keys = ["all"];
-      }
-      useIsomorphicLayoutEffect(() => {
-        const host = stateRef.current.host;
-        if (!sendExitComplete || !isExiting || !host) return;
-        const node = host;
-        const cycleId = exitCycleIdRef.current;
-        const completeExit = () => {
-          if (cycleId !== exitCycleIdRef.current) return;
-          if (exitCompletedRef.current) return;
-          exitCompletedRef.current = true;
-          sendExitCompleteRef.current?.();
-        };
-        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(", ");
-        const getResetValue = key => {
-          if (key === "opacity") {
-            return style?.opacity ?? props.opacity ?? lastNonExitingStyleRef.current.opacity ?? 1;
-          }
-          if (TRANSFORM_KEYS.includes(key)) {
-            return key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
-          }
-          return enterStyle?.[key];
-        };
-        if (wasInterrupted) {
-          exitInterruptedRef.current = false;
-          node.style.transition = "none";
-          if (exitStyle) {
-            const resetStyle = {};
-            for (const key of Object.keys(exitStyle)) {
-              const resetValue = getResetValue(key);
-              if (resetValue !== void 0) {
-                resetStyle[key] = resetValue;
-              }
-            }
-            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)) {
-            const resetValue = getResetValue(key);
-            if (resetValue !== void 0) {
-              resetStyle[key] = resetValue;
-            }
-          }
-          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 = 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 = "";
-        };
-      }, [isExiting]);
-      if (isHydrating) {
-        return null;
-      }
-      if (!hasNormalizedAnimation(normalized)) {
-        return null;
-      }
-      if (Array.isArray(style.transform)) {
-        style.transform = 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;
-        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" : ""
-      };
-    }
-  };
+	return {
+		animations,
+		usePresence,
+		ResetPresence,
+		inputStyle: "css",
+		outputStyle: "css",
+		useAnimatedNumber,
+		useAnimatedNumberReaction,
+		useAnimatedNumberStyle,
+		useAnimatedNumbersStyle,
+		useAnimations: ({ props, presence, style, componentState, stateRef, styleState, onTransition }) => {
+			const isHydrating = componentState.unmounted === true;
+			const isEntering = !!componentState.unmounted;
+			const isExiting = presence?.[0] === false;
+			const sendExitComplete = presence?.[1];
+			const onTransitionRef = React.useRef(onTransition);
+			onTransitionRef.current = onTransition;
+			const emit = (phase, cause, finished) => {
+				onTransitionRef.current?.(phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			const wasEnteringRef = React.useRef(isEntering);
+			const justFinishedEntering = wasEnteringRef.current && !isEntering;
+			React.useEffect(() => {
+				wasEnteringRef.current = isEntering;
+			});
+			const exitCycleIdRef = React.useRef(0);
+			const exitCompletedRef = React.useRef(false);
+			const wasExitingRef = React.useRef(false);
+			const sendExitCompleteRef = React.useRef(sendExitComplete);
+			const lastMountedStyleRef = React.useRef({});
+			sendExitCompleteRef.current = sendExitComplete;
+			const exitCSSProperties = getLifecycleCSSProperties(styleState?.programLifecycleStyleKeys?.exit);
+			const exitCSSPropertiesSignature = exitCSSProperties.join("\0");
+			const enterCycleIdRef = React.useRef(0);
+			const enterStartedRef = React.useRef(false);
+			const updateCycleIdRef = React.useRef(0);
+			const updateInFlightRef = React.useRef(false);
+			const prevUpdateSigRef = React.useRef(null);
+			const exitStartedRef = React.useRef(false);
+			const justStartedExiting = isExiting && !wasExitingRef.current;
+			const justStoppedExiting = !isExiting && wasExitingRef.current;
+			if (justStartedExiting) {
+				exitCycleIdRef.current++;
+				exitCompletedRef.current = false;
+			}
+			if (justStoppedExiting) {
+				exitCycleIdRef.current++;
+			}
+			React.useEffect(() => {
+				wasExitingRef.current = isExiting;
+			});
+			useIsomorphicLayoutEffect(() => {
+				if (isExiting) return;
+				const host = stateRef.current.host;
+				if (!host || !exitCSSProperties.length) {
+					lastMountedStyleRef.current = {};
+					return;
+				}
+				const node = host;
+				const capture = () => {
+					if (stateRef.current.host !== node || wasExitingRef.current) return;
+					lastMountedStyleRef.current = readComputedProperties(node, exitCSSProperties);
+				};
+				if (justFinishedEntering) {
+					void waitForAnimations(node).then(capture);
+				} else {
+					capture();
+				}
+			}, [
+				isExiting,
+				justFinishedEntering,
+				exitCSSPropertiesSignature
+			]);
+			const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
+			const normalized = normalizeTransition(effectiveTransition);
+			const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+			const effectiveAnimationKey = getEffectiveAnimation(normalized, animationState);
+			const defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
+			const animatedProperties = 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;
+			} else if (hasPerPropertyConfigs && !hasDefault) {
+				keys = animatedProperties;
+			} else if (hasPerPropertyConfigs && hasDefault) {
+				keys = ["all", ...animatedProperties];
+			} else {
+				keys = ["all"];
+			}
+			let transition;
+			const getTransition = () => {
+				if (transition !== void 0) return transition;
+				const delay = normalized.delay ? ` ${normalized.delay}ms` : "";
+				const duration = normalized.config?.duration;
+				transition = keys.flatMap((key) => {
+					const propertyAnimation = normalized.properties[key];
+					let animation = defaultAnimation;
+					if (typeof propertyAnimation === "string") {
+						animation = animations[propertyAnimation];
+					} else if (propertyAnimation?.type) {
+						animation = animations[propertyAnimation.type];
+					}
+					if (animation && duration) {
+						animation = applyDurationOverride(animation, duration);
+					}
+					return animation ? getCSSProperties(key).map((property) => `${property} ${animation}${delay}`) : [];
+				}).join(", ");
+				return transition;
+			};
+			useIsomorphicLayoutEffect(() => {
+				const host = stateRef.current.host;
+				if (!sendExitComplete || !isExiting || !host) return;
+				const node = host;
+				const cycleId = exitCycleIdRef.current;
+				if (!exitStartedRef.current) {
+					exitStartedRef.current = true;
+					emit("start", "exit");
+				}
+				const completeExit = (finished = true) => {
+					if (cycleId !== exitCycleIdRef.current) return;
+					if (exitCompletedRef.current) return;
+					exitCompletedRef.current = true;
+					if (exitStartedRef.current) {
+						exitStartedRef.current = false;
+						emit("end", "exit", finished);
+					}
+					sendExitCompleteRef.current?.();
+				};
+				if (keys.length === 0) {
+					completeExit();
+					return;
+				}
+				let rafId;
+				let disposed = false;
+				const mountedStyle = lastMountedStyleRef.current;
+				const canRestart = exitCSSProperties.length > 0 && Object.keys(mountedStyle).length > 0;
+				let exitTarget;
+				if (canRestart) {
+					node.style.transition = "none";
+					exitTarget = readComputedProperties(node, exitCSSProperties);
+					applyCSSProperties(node, mountedStyle);
+					void node.offsetHeight;
+					rafId = requestAnimationFrame(() => {
+						if (cycleId !== exitCycleIdRef.current) return;
+						node.style.transition = getTransition();
+						void node.offsetHeight;
+						applyCSSProperties(node, exitTarget);
+					});
+				}
+				void waitForAnimations(node).then((finished) => {
+					if (!disposed) completeExit(finished);
+				});
+				return () => {
+					disposed = true;
+					if (rafId !== void 0) cancelAnimationFrame(rafId);
+					clearCSSProperties(node, exitCSSProperties);
+					node.style.transition = "";
+				};
+			}, [isExiting, exitCSSPropertiesSignature]);
+			const styleSignature = onTransition ? (() => {
+				const { transition: _t, ...rest } = style;
+				return `${JSON.stringify(styleState?.classNames ?? null)}|${JSON.stringify(rest)}`;
+			})() : "";
+			useIsomorphicLayoutEffect(() => {
+				const host = stateRef.current.host;
+				if (!onTransitionRef.current || isExiting || !justFinishedEntering || !host) {
+					return;
+				}
+				const node = host;
+				const cycleId = ++enterCycleIdRef.current;
+				enterStartedRef.current = true;
+				emit("start", "enter");
+				void waitForAnimations(node).then((finished) => {
+					if (cycleId !== enterCycleIdRef.current || !enterStartedRef.current) return;
+					enterStartedRef.current = false;
+					emit("end", "enter", finished);
+				});
+			}, [justFinishedEntering, isExiting]);
+			useIsomorphicLayoutEffect(() => {
+				const host = stateRef.current.host;
+				if (!onTransitionRef.current || isEntering || justFinishedEntering || isExiting || !host) {
+					prevUpdateSigRef.current = styleSignature;
+					return;
+				}
+				if (prevUpdateSigRef.current === null) {
+					prevUpdateSigRef.current = styleSignature;
+					return;
+				}
+				if (styleSignature === prevUpdateSigRef.current) return;
+				prevUpdateSigRef.current = styleSignature;
+				const node = host;
+				if (updateInFlightRef.current) {
+					emit("end", "update", false);
+				}
+				updateInFlightRef.current = true;
+				const cycleId = ++updateCycleIdRef.current;
+				emit("start", "update");
+				void waitForAnimations(node).then((finished) => {
+					if (cycleId !== updateCycleIdRef.current) return;
+					updateInFlightRef.current = false;
+					emit("end", "update", finished);
+				});
+			}, [
+				styleSignature,
+				isEntering,
+				justFinishedEntering,
+				isExiting
+			]);
+			useIsomorphicLayoutEffect(() => {
+				if (justStartedExiting && enterStartedRef.current) {
+					enterCycleIdRef.current++;
+					enterStartedRef.current = false;
+					emit("end", "enter", false);
+				}
+				if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
+					exitStartedRef.current = false;
+					emit("end", "exit", false);
+				}
+			}, [justStartedExiting, justStoppedExiting]);
+			if (isHydrating) {
+				return null;
+			}
+			if (!hasAnimation(normalized)) {
+				return null;
+			}
+			if (Array.isArray(style.transform)) {
+				style.transform = transformsToString(style.transform);
+			}
+			style.transition = getTransition();
+			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" : ""
+			};
+		}
+	};
 }
+
 export { createAnimations };
 //# sourceMappingURL=createAnimations.mjs.map