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

package/dist/cjs/createAnimations.native.cjs

@@ -0,0 +1,472 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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: 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;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(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");
+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);
+var import_animated_number = require("./animated-number.native.js");
+var hasRAF = typeof requestAnimationFrame !== "undefined";
+function waitForAnimations(node) {
+	if (typeof node.getAnimations !== "function") {
+		return Promise.resolve(true);
+	}
+	return new Promise(function(resolve) {
+		var check = function() {
+			var animations = node.getAnimations();
+			if (animations.length === 0) {
+				resolve(true);
+				return;
+			}
+			Promise.all(animations.map(function(a) {
+				return a.finished;
+			})).then(function() {
+				return resolve(true);
+			}).catch(function() {
+				var remaining = node.getAnimations();
+				if (remaining.some(function(a) {
+					return a.playState === "running" || a.pending;
+				})) {
+					check();
+					return;
+				}
+				resolve(false);
+			});
+		};
+		if (hasRAF) {
+			requestAnimationFrame(check);
+		} else {
+			check();
+		}
+	});
+}
+var DURATION_REGEX = /(\d+(?:\.\d+)?)\s*(?:ms|s(?!tiffness))/;
+function applyDurationOverride(animation, durationMs) {
+	var replaced = animation.replace(DURATION_REGEX, `${durationMs}ms`);
+	return replaced === animation ? `${durationMs}ms ${animation}` : replaced;
+}
+var 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"]
+};
+var getCSSProperties = function(key) {
+	return CSS_TRANSFORM_PROPERTIES[key] || [key];
+};
+var hyphenatedPropertyCache = {};
+var emptyProperties = [];
+function hyphenateProperty(property) {
+	var _hyphenatedPropertyCache, _property;
+	if (property.startsWith("--")) return property;
+	return (_hyphenatedPropertyCache = hyphenatedPropertyCache)[_property = property] || (_hyphenatedPropertyCache[_property] = property.replace(/[A-Z]/g, function(letter) {
+		return `-${letter.toLowerCase()}`;
+	}));
+}
+function getLifecycleCSSProperties(keys) {
+	if (!(keys === null || keys === void 0 ? void 0 : keys.size)) return emptyProperties;
+	var properties = /* @__PURE__ */ new Set();
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var key = _step.value;
+			var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+			try {
+				for (var _iterator1 = getCSSProperties(key)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+					var property = _step1.value;
+					properties.add(hyphenateProperty(property));
+				}
+			} catch (err) {
+				_didIteratorError1 = true;
+				_iteratorError1 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+						_iterator1.return();
+					}
+				} finally {
+					if (_didIteratorError1) {
+						throw _iteratorError1;
+					}
+				}
+			}
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	return [...properties].sort();
+}
+function readComputedProperties(node, properties) {
+	var computed = getComputedStyle(node);
+	var values = {};
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var property = _step.value;
+			var value = computed.getPropertyValue(property);
+			if (value) values[property] = value;
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	return values;
+}
+function applyCSSProperties(node, values) {
+	for (var property in values) {
+		node.style.setProperty(property, values[property]);
+	}
+}
+function clearCSSProperties(node, properties) {
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var property = _step.value;
+			node.style.removeProperty(property);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+}
+function createAnimations(animations) {
+	return {
+		animations,
+		usePresence: import_use_presence.usePresence,
+		ResetPresence: import_use_presence.ResetPresence,
+		inputStyle: "css",
+		outputStyle: "css",
+		useAnimatedNumber: import_animated_number.useAnimatedNumber,
+		useAnimatedNumberReaction: import_animated_number.useAnimatedNumberReaction,
+		useAnimatedNumberStyle: import_animated_number.useAnimatedNumberStyle,
+		useAnimatedNumbersStyle: import_animated_number.useAnimatedNumbersStyle,
+		useAnimations: function(param) {
+			var { props, presence, style, componentState, stateRef, styleState, onTransition } = param;
+			var _styleState_programLifecycleStyleKeys;
+			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 onTransitionRef = import_react.default.useRef(onTransition);
+			onTransitionRef.current = onTransition;
+			var emit = function(phase, cause, finished) {
+				var _onTransitionRef_current;
+				(_onTransitionRef_current = onTransitionRef.current) === null || _onTransitionRef_current === void 0 ? void 0 : _onTransitionRef_current.call(onTransitionRef, phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			var wasEnteringRef = import_react.default.useRef(isEntering);
+			var justFinishedEntering = wasEnteringRef.current && !isEntering;
+			import_react.default.useEffect(function() {
+				wasEnteringRef.current = isEntering;
+			});
+			var exitCycleIdRef = import_react.default.useRef(0);
+			var exitCompletedRef = import_react.default.useRef(false);
+			var wasExitingRef = import_react.default.useRef(false);
+			var sendExitCompleteRef = import_react.default.useRef(sendExitComplete);
+			var lastMountedStyleRef = import_react.default.useRef({});
+			sendExitCompleteRef.current = sendExitComplete;
+			var exitCSSProperties = getLifecycleCSSProperties(styleState === null || styleState === void 0 ? void 0 : (_styleState_programLifecycleStyleKeys = styleState.programLifecycleStyleKeys) === null || _styleState_programLifecycleStyleKeys === void 0 ? void 0 : _styleState_programLifecycleStyleKeys.exit);
+			var exitCSSPropertiesSignature = exitCSSProperties.join("\0");
+			var enterCycleIdRef = import_react.default.useRef(0);
+			var enterStartedRef = import_react.default.useRef(false);
+			var updateCycleIdRef = import_react.default.useRef(0);
+			var updateInFlightRef = import_react.default.useRef(false);
+			var prevUpdateSigRef = import_react.default.useRef(null);
+			var exitStartedRef = 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++;
+			}
+			import_react.default.useEffect(function() {
+				wasExitingRef.current = isExiting;
+			});
+			(0, import_constants.useIsomorphicLayoutEffect)(function() {
+				if (isExiting) return;
+				var host = stateRef.current.host;
+				if (!host || !exitCSSProperties.length) {
+					lastMountedStyleRef.current = {};
+					return;
+				}
+				var node = host;
+				var capture = function() {
+					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
+			]);
+			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"];
+			}
+			var transition;
+			var getTransition = function() {
+				var _normalized_config;
+				if (transition !== void 0) return transition;
+				var delay = normalized.delay ? ` ${normalized.delay}ms` : "";
+				var duration = (_normalized_config = normalized.config) === null || _normalized_config === void 0 ? void 0 : _normalized_config.duration;
+				transition = keys.flatMap(function(key) {
+					var propertyAnimation = normalized.properties[key];
+					var animation = defaultAnimation;
+					if (typeof propertyAnimation === "string") {
+						animation = animations[propertyAnimation];
+					} else if (propertyAnimation === null || propertyAnimation === void 0 ? void 0 : propertyAnimation.type) {
+						animation = animations[propertyAnimation.type];
+					}
+					if (animation && duration) {
+						animation = applyDurationOverride(animation, duration);
+					}
+					return animation ? getCSSProperties(key).map(function(property) {
+						return `${property} ${animation}${delay}`;
+					}) : [];
+				}).join(", ");
+				return transition;
+			};
+			(0, import_constants.useIsomorphicLayoutEffect)(function() {
+				var host = stateRef.current.host;
+				if (!sendExitComplete || !isExiting || !host) return;
+				var node = host;
+				var cycleId = exitCycleIdRef.current;
+				if (!exitStartedRef.current) {
+					exitStartedRef.current = true;
+					emit("start", "exit");
+				}
+				var completeExit = function() {
+					var finished = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+					var _sendExitCompleteRef_current;
+					if (cycleId !== exitCycleIdRef.current) return;
+					if (exitCompletedRef.current) return;
+					exitCompletedRef.current = true;
+					if (exitStartedRef.current) {
+						exitStartedRef.current = false;
+						emit("end", "exit", finished);
+					}
+					(_sendExitCompleteRef_current = sendExitCompleteRef.current) === null || _sendExitCompleteRef_current === void 0 ? void 0 : _sendExitCompleteRef_current.call(sendExitCompleteRef);
+				};
+				if (keys.length === 0) {
+					completeExit();
+					return;
+				}
+				var rafId;
+				var disposed = false;
+				var mountedStyle = lastMountedStyleRef.current;
+				var canRestart = exitCSSProperties.length > 0 && Object.keys(mountedStyle).length > 0;
+				var exitTarget;
+				if (canRestart) {
+					node.style.transition = "none";
+					exitTarget = readComputedProperties(node, exitCSSProperties);
+					applyCSSProperties(node, mountedStyle);
+					void node.offsetHeight;
+					rafId = requestAnimationFrame(function() {
+						if (cycleId !== exitCycleIdRef.current) return;
+						node.style.transition = getTransition();
+						void node.offsetHeight;
+						applyCSSProperties(node, exitTarget);
+					});
+				}
+				void waitForAnimations(node).then(function(finished) {
+					if (!disposed) completeExit(finished);
+				});
+				return function() {
+					disposed = true;
+					if (rafId !== void 0) cancelAnimationFrame(rafId);
+					clearCSSProperties(node, exitCSSProperties);
+					node.style.transition = "";
+				};
+			}, [isExiting, exitCSSPropertiesSignature]);
+			var styleSignature = onTransition ? (function() {
+				var { transition: _t, ...rest } = style;
+				var _styleState_classNames;
+				return `${JSON.stringify((_styleState_classNames = styleState === null || styleState === void 0 ? void 0 : styleState.classNames) !== null && _styleState_classNames !== void 0 ? _styleState_classNames : null)}|${JSON.stringify(rest)}`;
+			})() : "";
+			(0, import_constants.useIsomorphicLayoutEffect)(function() {
+				var host = stateRef.current.host;
+				if (!onTransitionRef.current || isExiting || !justFinishedEntering || !host) {
+					return;
+				}
+				var node = host;
+				var cycleId = ++enterCycleIdRef.current;
+				enterStartedRef.current = true;
+				emit("start", "enter");
+				void waitForAnimations(node).then(function(finished) {
+					if (cycleId !== enterCycleIdRef.current || !enterStartedRef.current) return;
+					enterStartedRef.current = false;
+					emit("end", "enter", finished);
+				});
+			}, [justFinishedEntering, isExiting]);
+			(0, import_constants.useIsomorphicLayoutEffect)(function() {
+				var 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;
+				var node = host;
+				if (updateInFlightRef.current) {
+					emit("end", "update", false);
+				}
+				updateInFlightRef.current = true;
+				var cycleId = ++updateCycleIdRef.current;
+				emit("start", "update");
+				void waitForAnimations(node).then(function(finished) {
+					if (cycleId !== updateCycleIdRef.current) return;
+					updateInFlightRef.current = false;
+					emit("end", "update", finished);
+				});
+			}, [
+				styleSignature,
+				isEntering,
+				justFinishedEntering,
+				isExiting
+			]);
+			(0, import_constants.useIsomorphicLayoutEffect)(function() {
+				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 (!(0, import_animation_helpers.hasAnimation)(normalized)) {
+				return null;
+			}
+			if (Array.isArray(style.transform)) {
+				style.transform = (0, import_web.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" : ""
+			};
+		}
+	};
+}