@tamagui/animations-motion 3.0.0-beta.924.1 → 3.0.1

package/dist/cjs/createAnimations.cjs

@@ -95,8 +95,8 @@ function createAnimations(animations) {
 			if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
 				isHydratingGlobal = true;
 			}
-			const { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps } = animationProps;
-			const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+			const { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps, styleState } = animationProps;
+			const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
 			const isComponentHydrating = componentState.unmounted === true;
 			const isMounting = componentState.unmounted === "should-enter";
 			const isEntering = !!componentState.unmounted;
@@ -144,7 +144,7 @@ function createAnimations(animations) {
 				refs.current.wasEntering = isEntering;
 			});
 			const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-			const disableAnimation = isComponentHydrating || isMounting || !animationKey;
+			const disableAnimation = isComponentHydrating || isMounting || !effectiveTransition;
 			const [scope] = useAnimateSSRSafe();
 			refs.current.isExiting = isExiting;
 			refs.current.sendExitComplete = sendExitComplete;
@@ -167,7 +167,7 @@ function createAnimations(animations) {
 					emit("end", "exit", false);
 				}
 			}, [justStoppedExiting]);
-			const { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+			const { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState, effectiveTransition);
 			const [firstRenderStyle] = (0, import_react2.useState)(style);
 			if (refs.current.isFirstRender) {
 				refs.current.lastDontAnimate = firstRenderStyle;
@@ -192,7 +192,7 @@ function createAnimations(animations) {
 				if (isCurrentlyExiting && refs.current.frozenExitTarget) {
 					doAnimate2 = refs.current.frozenExitTarget;
 				}
-				const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
+				const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition ?? null, { animations }), "exit")) : passedOptions;
 				try {
 					const node = stateRef.current.host;
 					if (refs.current.isFirstRender) {
@@ -301,7 +301,7 @@ function createAnimations(animations) {
 										} catch {}
 									}
 									const opts = animationOptions2;
-									const positionTransition = opts.transform ?? opts.default ?? animationOptions2;
+									const positionTransition = opts.x ?? opts.transform ?? opts.default ?? animationOptions2;
 									const cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
 									const cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
 									entry.stop = () => {
@@ -427,8 +427,8 @@ function createAnimations(animations) {
 					}
 				}
 			};
-			useStyleEmitter?.((nextStyle, effectiveTransition) => {
-				const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
+			useStyleEmitter?.((nextStyle, emittedTransition) => {
+				const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, emittedTransition ?? effectiveTransition);
 				flushAnimation(animationProps2);
 			});
 			(0, import_web.useIsomorphicLayoutEffect)(() => {
@@ -571,13 +571,13 @@ function createAnimations(animations) {
 		if (disable) {
 			return { dontAnimate: style };
 		}
-		const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
+		const resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(transitionOverride ?? props.transition ?? null, { animations }), animationState);
+		const animationOptions = getAnimationOptions(resolved);
 		let dontAnimate;
 		let doAnimate;
-		const animateOnly = props.animateOnly;
 		for (const key in style) {
 			const value = style[key];
-			if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+			if (disableAnimationProps.has(key) || !(0, import_animation_helpers.getTransitionForKey)(resolved, key)) {
 				dontAnimate ||= {};
 				dontAnimate[key] = value;
 			} else {
@@ -591,79 +591,48 @@ function createAnimations(animations) {
 			animationOptions
 		};
 	}
-	function getAnimationOptions(transitionProp, animationState = "default") {
-		const normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
-		let effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-		if (!effectiveKey && animationState === "default") {
-			effectiveKey = normalized.enter || normalized.exit || null;
-		}
-		const globalConfigOverride = normalized.config ? { ...normalized.config } : void 0;
-		if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
-			return {};
-		}
-		const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
-		const delay = normalized.delay;
+	function getAnimationOptions(resolved) {
+		if (!(0, import_animation_helpers.hasTransition)(resolved)) return {};
 		const result = {};
-		if (defaultConfig) {
-			Object.assign(result, defaultConfig);
-		}
-		if (globalConfigOverride) {
-			Object.assign(result, globalConfigOverride);
-			if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
-				result.type = "tween";
-			}
+		if (resolved.all) {
+			const base = entryToMotion(resolved.all);
+			Object.assign(result, base);
+			result.default = { ...base };
 		}
-		if (delay) {
-			result.delay = delay;
-		}
-		if (defaultConfig || globalConfigOverride || delay) {
-			result.default = {
-				...defaultConfig,
-				...globalConfigOverride,
-				...delay ? { delay } : null
-			};
-		}
-		for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
-			if (typeof animationNameOrConfig === "string") {
-				result[propName] = withInferredType(animations[animationNameOrConfig]);
-			} else if (animationNameOrConfig && typeof animationNameOrConfig === "object") {
-				const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
-				result[propName] = {
-					...baseConfig,
-					...animationNameOrConfig
-				};
-			}
-		}
-		convertMsToS(result);
-		convertMsToS(result.default);
-		for (const key in result) {
-			if (key !== "default" && typeof result[key] === "object") {
-				convertMsToS(result[key]);
+		for (const entry of resolved.entries) {
+			if (entry.property === "all") continue;
+			const config = entryToMotion(entry);
+			for (const key of (0, import_animation_helpers.styleKeysForProperty)(entry.property)) {
+				result[key] = { ...config };
 			}
 		}
 		return result;
 	}
 }
-function withInferredType(config) {
-	if (!config) {
-		return { type: "spring" };
+function entryToMotion(entry) {
+	const delay = entry.delayMs ? { delay: entry.delayMs / 1e3 } : null;
+	if (entry.timing.kind === "spring") {
+		return {
+			type: "spring",
+			stiffness: entry.timing.stiffness,
+			damping: entry.timing.damping,
+			mass: entry.timing.mass,
+			...delay
+		};
 	}
-	const isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+	const bezier = (0, import_animation_helpers.easingToBezier)(entry.timing.easing);
 	return {
-		type: isTimingBased ? "tween" : "spring",
-		...config
+		type: "tween",
+		duration: entry.timing.durationMs / 1e3,
+		...bezier ? { ease: [
+			bezier[0],
+			bezier[1],
+			bezier[2],
+			bezier[3]
+		] } : null,
+		...delay
 	};
 }
-function convertMsToS(config) {
-	if (!config) return;
-	if (typeof config.delay === "number") config.delay = config.delay / 1e3;
-	if (typeof config.duration === "number") {
-		const isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-		if (isTimingBased) {
-			config.duration = config.duration / 1e3;
-		}
-	}
-}
 function removeRemovedStyles(prev, next, node, dontClearIfIn) {
 	for (const key in prev) {
 		if (!(key in next)) {

package/dist/cjs/createAnimations.native.cjs

@@ -39,17 +39,6 @@ var import_web = require("@tamagui/web");
 var import_internal_runtime = require("@tamagui/web/internal-runtime");
 var import_react = require("motion/react");
 var import_react2 = __toESM(require("react"), 1);
-function _instanceof(left, right) {
-	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-		return !!right[Symbol.hasInstance](left);
-	} else {
-		return left instanceof right;
-	}
-}
-function _type_of(obj) {
-	"@swc/helpers - typeof";
-	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
 var isServer = typeof window === "undefined";
 function useAnimateSSRSafe() {
 	if (isServer) {
@@ -58,7 +47,7 @@ function useAnimateSSRSafe() {
 	return (0, import_react.useAnimate)();
 }
 var asStyleRecord = function(style) {
-	return style && (typeof style === "undefined" ? "undefined" : _type_of(style)) === "object" && !Array.isArray(style) ? style : {};
+	return style && typeof style === "object" && !Array.isArray(style) ? style : {};
 };
 function assignInlineStyles(node, styles) {
 	for (var key in styles) {
@@ -116,8 +105,9 @@ function createAnimations(animations) {
 			if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
 				isHydratingGlobal = true;
 			}
-			var { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps } = animationProps;
-			var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+			var { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps, styleState } = animationProps;
+			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 isComponentHydrating = componentState.unmounted === true;
 			var isMounting = componentState.unmounted === "should-enter";
 			var isEntering = !!componentState.unmounted;
@@ -166,7 +156,7 @@ function createAnimations(animations) {
 				refs.current.wasEntering = isEntering;
 			});
 			var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-			var disableAnimation = isComponentHydrating || isMounting || !animationKey;
+			var disableAnimation = isComponentHydrating || isMounting || !effectiveTransition;
 			var [scope] = useAnimateSSRSafe();
 			refs.current.isExiting = isExiting;
 			refs.current.sendExitComplete = sendExitComplete;
@@ -189,7 +179,7 @@ function createAnimations(animations) {
 					emit("end", "exit", false);
 				}
 			}, [justStoppedExiting]);
-			var { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+			var { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState, effectiveTransition);
 			var [firstRenderStyle] = (0, import_react2.useState)(style);
 			if (refs.current.isFirstRender) {
 				refs.current.lastDontAnimate = firstRenderStyle;
@@ -215,8 +205,7 @@ function createAnimations(animations) {
 				if (isCurrentlyExiting && refs.current.frozenExitTarget) {
 					doAnimate2 = refs.current.frozenExitTarget;
 				}
-				var _props_transition;
-				var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
+				var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition !== null && effectiveTransition !== void 0 ? effectiveTransition : null, { animations }), "exit")) : passedOptions;
 				try {
 					var node = stateRef.current.host;
 					if (refs.current.isFirstRender) {
@@ -245,7 +234,7 @@ function createAnimations(animations) {
 							console.groupEnd();
 						}
 					}
-					if (!_instanceof(node, HTMLElement)) {
+					if (!(node instanceof HTMLElement)) {
 						return;
 					}
 					var prevDont = refs.current.lastDontAnimate;
@@ -346,8 +335,8 @@ function createAnimations(animations) {
 										}
 									}
 									var opts = animationOptions2;
-									var _opts_transform, _ref;
-									var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
+									var _opts_x, _ref, _ref1;
+									var positionTransition = (_ref1 = (_ref = (_opts_x = opts.x) !== null && _opts_x !== void 0 ? _opts_x : opts.transform) !== null && _ref !== void 0 ? _ref : opts.default) !== null && _ref1 !== void 0 ? _ref1 : animationOptions2;
 									var cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
 									var cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
 									entry.stop = function() {
@@ -507,8 +496,8 @@ function createAnimations(animations) {
 					}
 				}
 			};
-			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, effectiveTransition) {
-				var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
+			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, emittedTransition) {
+				var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition);
 				flushAnimation(_$animationProps);
 			});
 			(0, import_web.useIsomorphicLayoutEffect)(function() {
@@ -535,7 +524,7 @@ function createAnimations(animations) {
 				refs.current.wasNoClass = !!styleProps.noClass;
 				if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
 					var node = stateRef.current.host;
-					if (_instanceof(node, HTMLElement)) {
+					if (node instanceof HTMLElement) {
 						if (dontAnimate) assignInlineStyles(node, dontAnimate);
 						if (doAnimate) assignInlineStyles(node, doAnimate);
 						var entry = PopperPositionAnims.get(node);
@@ -666,13 +655,13 @@ function createAnimations(animations) {
 			return { dontAnimate: style };
 		}
 		var _ref;
-		var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
+		var resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, { animations }), animationState);
+		var animationOptions = getAnimationOptions(resolved);
 		var dontAnimate;
 		var doAnimate;
-		var animateOnly = props.animateOnly;
 		for (var key in style) {
 			var value = style[key];
-			if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+			if (disableAnimationProps.has(key) || !(0, import_animation_helpers.getTransitionForKey)(resolved, key)) {
 				dontAnimate || (dontAnimate = {});
 				dontAnimate[key] = value;
 			} else {
@@ -686,51 +675,39 @@ function createAnimations(animations) {
 			animationOptions
 		};
 	}
-	function getAnimationOptions(transitionProp) {
-		var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
-		var normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
-		var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-		if (!effectiveKey && animationState === "default") {
-			effectiveKey = normalized.enter || normalized.exit || null;
-		}
-		var globalConfigOverride = normalized.config ? { ...normalized.config } : void 0;
-		if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
-			return {};
-		}
-		var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
-		var delay = normalized.delay;
+	function getAnimationOptions(resolved) {
+		if (!(0, import_animation_helpers.hasTransition)(resolved)) return {};
 		var result = {};
-		if (defaultConfig) {
-			Object.assign(result, defaultConfig);
-		}
-		if (globalConfigOverride) {
-			Object.assign(result, globalConfigOverride);
-			if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
-				result.type = "tween";
-			}
-		}
-		if (delay) {
-			result.delay = delay;
-		}
-		if (defaultConfig || globalConfigOverride || delay) {
-			result.default = {
-				...defaultConfig,
-				...globalConfigOverride,
-				...delay ? { delay } : null
-			};
+		if (resolved.all) {
+			var base = entryToMotion(resolved.all);
+			Object.assign(result, base);
+			result.default = { ...base };
 		}
 		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 		try {
-			for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-				var [propName, animationNameOrConfig] = _step.value;
-				if (typeof animationNameOrConfig === "string") {
-					result[propName] = withInferredType(animations[animationNameOrConfig]);
-				} else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
-					var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
-					result[propName] = {
-						...baseConfig,
-						...animationNameOrConfig
-					};
+			for (var _iterator = resolved.entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var entry = _step.value;
+				if (entry.property === "all") continue;
+				var config = entryToMotion(entry);
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = (0, import_animation_helpers.styleKeysForProperty)(entry.property)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var key = _step1.value;
+						result[key] = { ...config };
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+							_iterator1.return();
+						}
+					} finally {
+						if (_didIteratorError1) {
+							throw _iteratorError1;
+						}
+					}
 				}
 			}
 		} catch (err) {
@@ -747,36 +724,33 @@ function createAnimations(animations) {
 				}
 			}
 		}
-		convertMsToS(result);
-		convertMsToS(result.default);
-		for (var key in result) {
-			if (key !== "default" && _type_of(result[key]) === "object") {
-				convertMsToS(result[key]);
-			}
-		}
 		return result;
 	}
 }
-function withInferredType(config) {
-	if (!config) {
-		return { type: "spring" };
+function entryToMotion(entry) {
+	var delay = entry.delayMs ? { delay: entry.delayMs / 1e3 } : null;
+	if (entry.timing.kind === "spring") {
+		return {
+			type: "spring",
+			stiffness: entry.timing.stiffness,
+			damping: entry.timing.damping,
+			mass: entry.timing.mass,
+			...delay
+		};
 	}
-	var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+	var bezier = (0, import_animation_helpers.easingToBezier)(entry.timing.easing);
 	return {
-		type: isTimingBased ? "tween" : "spring",
-		...config
+		type: "tween",
+		duration: entry.timing.durationMs / 1e3,
+		...bezier ? { ease: [
+			bezier[0],
+			bezier[1],
+			bezier[2],
+			bezier[3]
+		] } : null,
+		...delay
 	};
 }
-function convertMsToS(config) {
-	if (!config) return;
-	if (typeof config.delay === "number") config.delay = config.delay / 1e3;
-	if (typeof config.duration === "number") {
-		var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-		if (isTimingBased) {
-			config.duration = config.duration / 1e3;
-		}
-	}
-}
 function removeRemovedStyles(prev, next, node, dontClearIfIn) {
 	for (var key in prev) {
 		if (!(key in next)) {
@@ -1002,7 +976,7 @@ function createMotionView(defaultTag) {
 		(0, import_web.useIsomorphicLayoutEffect)(function() {
 			if (!animatedStyle) return;
 			var node = hostRef.current;
-			if (_instanceof(node, HTMLElement) && seededNode.current !== node) {
+			if (node instanceof HTMLElement && seededNode.current !== node) {
 				var currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(function(value) {
 					return value.get();
 				})) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
@@ -1029,7 +1003,7 @@ function createMotionView(defaultTag) {
 				};
 			};
 			var animateNodeTo = function(nextStyle, transition, motionValue3) {
-				if (!_instanceof(node, HTMLElement) || hostRef.current !== node) return;
+				if (!(node instanceof HTMLElement) || hostRef.current !== node) return;
 				var webStyle2 = resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(nextStyle);
 				if (!webStyle2) return;
 				settlePendingMotionOnFinish(motionValue3, animate(node, webStyle2, transition));