@tamagui/web 3.0.0-beta.755.1 → 3.0.0-beta.804.1

package/dist/cjs/createComponent.cjs

@@ -45,7 +45,6 @@ var import_defaultComponentState = require("./defaultComponentState.cjs");
 var import_eventHandling = require("./eventHandling.cjs");
 var import_getDefaultProps = require("./helpers/getDefaultProps.cjs");
 var import_componentDisplayName = require("./helpers/componentDisplayName.cjs");
-var import_resolveAnimationDriver = require("./helpers/resolveAnimationDriver.cjs");
 var import_getSplitStyles = require("./helpers/getSplitStyles.cjs");
 require("./helpers/nativeStyleEngine.cjs");
 require("./hooks/getThemeProxied.cjs");
@@ -53,7 +52,6 @@ var import_log = require("./helpers/log.cjs");
 var import_mergeProps = require("./helpers/mergeProps.cjs");
 var import_mergeRenderElementProps = require("./helpers/mergeRenderElementProps.cjs");
 require("./helpers/mediaState.cjs");
-var import_objectIdentityKey = require("./helpers/objectIdentityKey.cjs");
 var import_pointerEvents = require("./helpers/pointerEvents.cjs");
 var import_extractPseudoState = require("./helpers/extractPseudoState.cjs");
 var import_resolveSafeAreaVariable = require("./helpers/resolveSafeAreaVariable.cjs");
@@ -61,6 +59,7 @@ var import_setElementProps = require("./helpers/setElementProps.cjs");
 var import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup.cjs");
 var import_wrapStyleTags = require("./helpers/wrapStyleTags.cjs");
 var import_useComponentState = require("./hooks/useComponentState.cjs");
+var import_useSplitStyles = require("./hooks/useSplitStyles.cjs");
 var import_useMedia = require("./hooks/useMedia.cjs");
 var import_useTheme = require("./hooks/useTheme.cjs");
 var import_setupHooks = require("./setupHooks.cjs");
@@ -90,14 +89,6 @@ const groupPseudoKeys = [
 	"focusVisible",
 	"focusWithin"
 ];
-function getStyledContextKeys(staticConfig, styledContextValue) {
-	const propKeys = staticConfig.contextProps || staticConfig.context?.propKeys;
-	if (!propKeys) return styledContextValue;
-	const out = {};
-	for (const key of propKeys) out[key] = true;
-	if (styledContextValue) Object.assign(out, styledContextValue);
-	return out;
-}
 if (typeof window !== "undefined") {
 	const cancelPresses = () => {
 		componentSetStates.forEach((setState) => setState((prev) => {
@@ -197,9 +188,12 @@ if (import_constants.isWeb && typeof document !== "undefined") {
 }
 function createComponent(staticConfig) {
 	if (process.env.TAMAGUI_RUNTIME === "zero") throw new Error(`[tamagui zero-runtime] createComponent ran in a zero-runtime graph. No Tamagui component renderer ships in this mode, so a component reference survived compilation. Fix the site or move the owning module to a declared full-runtime island.`);
+	(0, import_getSplitStyles.prepareStyleStaticConfig)(staticConfig);
 	let config = null;
 	let resolvedDefaultProps;
 	let didResolveDefaultProps = false;
+	const styledContextPropKeys = staticConfig.contextProps || staticConfig.context?.propKeys;
+	const styledContextKeys = styledContextPropKeys ? new Set(styledContextPropKeys) : void 0;
 	const { Component, isText, isHOC } = staticConfig;
 	let res;
 	const component = (propsInWithRef) => {
@@ -222,7 +216,7 @@ function createComponent(staticConfig) {
 				testRenderCount.current += 1;
 			}
 		}
-		const { context, isReactNative } = staticConfig;
+		const { context } = staticConfig;
 		const debugProp = propsIn["debug"];
 		const styledContextValue = context ? import_react.default.useContext(context) : void 0;
 		let overriddenContextProps = null;
@@ -246,7 +240,6 @@ function createComponent(staticConfig) {
 		const [nextProps, overrides] = (0, import_mergeProps.mergeComponentProps)(resolvedDefaultProps, styledContextValue, propsIn);
 		props = nextProps;
 		overriddenContextProps = overrides;
-		if (staticConfig.styleFrontend) props = staticConfig.styleFrontend.preprocessProps(props, config);
 		if (process.env.NODE_ENV === "development" && import_constants.isClient) import_react.default.useEffect(() => {
 			let node;
 			let overlay = null;
@@ -296,16 +289,16 @@ function createComponent(staticConfig) {
 		const groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext);
 		const animationDriver = (() => {
 			if (props.animatedBy && config) {
-				let selectedDriver;
-				if (config.animationDrivers) selectedDriver = config.animationDrivers[props.animatedBy] ?? config.animations;
-				else selectedDriver = props.animatedBy === "default" ? config.animations : null;
-				return (0, import_resolveAnimationDriver.resolveAnimationDriver)(selectedDriver);
+				if (config.animationDrivers) return props.animatedBy in config.animationDrivers ? config.animationDrivers[props.animatedBy] : config.animations;
+				return props.animatedBy === "default" ? config.animations : null;
 			}
-			return (0, import_resolveAnimationDriver.resolveAnimationDriver)(componentContext.animationDriver) ?? (0, import_resolveAnimationDriver.resolveAnimationDriver)(config?.animations) ?? null;
+			return componentContext.animationDriver ?? config?.animations ?? null;
 		})();
 		const useAnimations = animationDriver?.isStub ? void 0 : animationDriver?.useAnimations;
 		const componentState = (0, import_useComponentState.useComponentState)(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config);
-		const { disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, inputStyle, outputStyle, willBeAnimated, willBeAnimatedClient, platformPseudo, startedUnhydrated } = componentState;
+		const { disabled, hasAnimationProp, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, inputStyle, outputStyle, startedUnhydrated } = componentState;
+		let { groupName } = componentState;
+		let { hasEnterStyle, isAnimated, willBeAnimated, willBeAnimatedClient, platformPseudo } = componentState;
 		props = componentState.props;
 		stateRef.current.avoidReRenders ??= !!animationDriver?.avoidReRenders;
 		if (stateRef.current.avoidReRenders) (0, import_constants.useIsomorphicLayoutEffect)(() => {
@@ -325,49 +318,6 @@ function createComponent(staticConfig) {
 				stateRef.current.setStateShallow?.({ hover: hovered });
 			});
 		}, [platformPseudo, props.disabled]);
-		const containerName = props.containerName;
-		const isContainer = !!(props.container || containerName || props.containerType && props.containerType !== "normal");
-		const allGroupContexts = (0, import_react.useMemo)(() => {
-			if (!groupName && !isContainer || props.passThrough) return groupContextParent;
-			const listeners = /* @__PURE__ */ new Set();
-			stateRef.current.group?.listeners?.clear();
-			stateRef.current.group = {
-				listeners,
-				emit(state2) {
-					listeners.forEach((l) => l(state2));
-				},
-				subscribe(cb) {
-					listeners.add(cb);
-					if (listeners.size === 1) setStateShallow({ hasDynGroupChildren: true });
-					return () => {
-						listeners.delete(cb);
-						if (listeners.size === 0) setStateShallow({ hasDynGroupChildren: false });
-					};
-				}
-			};
-			const entry = {
-				state: { pseudo: import_defaultComponentState.defaultComponentStateMounted },
-				subscribe: (listener) => {
-					const dispose = stateRef.current.group?.subscribe(listener);
-					return () => {
-						dispose?.();
-					};
-				}
-			};
-			const next = { ...groupContextParent };
-			if (groupName) next[groupName] = entry;
-			if (isContainer) {
-				next["@"] = entry;
-				if (containerName) next[`@${containerName}`] = entry;
-			}
-			return next;
-		}, [
-			stateRef,
-			groupName,
-			containerName,
-			isContainer,
-			groupContextParent
-		]);
 		let setStateShallow = componentState.setStateShallow;
 		if (process.env.NODE_ENV === "development" && time) time`use-state`;
 		const renderProp = props.render;
@@ -389,7 +339,7 @@ function createComponent(staticConfig) {
 		if (process.env.NODE_ENV === "development") {
 			if (debugProp && debugProp !== "profile") {
 				const name = `${displayName || Component?.displayName || Component?.name || "[Unnamed Component]"}`;
-				const type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + (presenceState?.isPresent === false ? "(EXIT)" : "");
+				const type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + (presenceState?.isPresent === false ? "(EXIT)" : "");
 				const dataIs = propsIn["data-is"] || "";
 				const banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
 				const ch = propsIn.children;
@@ -407,7 +357,7 @@ function createComponent(staticConfig) {
 						console.groupEnd();
 						console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
 						(0, import_log.log)("props in:", propsIn);
-						(0, import_log.log)("final props:", props, Object.keys(props));
+						(0, import_log.log)("final props:", props);
 						(0, import_log.log)({
 							state,
 							staticConfig,
@@ -464,12 +414,66 @@ ${banner}
 			isExiting,
 			isAnimated,
 			willBeAnimated,
+			canPlatformPseudo: componentState.platformPseudo,
 			displayName,
-			styledContext: getStyledContextKeys(staticConfig, styledContextValue)
+			styledContext: styledContextValue,
+			styledContextKeys
 		};
 		const themeName = themeState?.name || "";
 		if (process.env.NODE_ENV === "development" && time) time`split-styles-prepare`;
-		const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+		const splitStyles = (0, import_useSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, groupContextParent, elementType, startedUnhydrated, debugProp, animationDriver);
+		const finalizedComponentState = componentState.finalizeStyleFlags(!!splitStyles?.hasEnterStyle, !!splitStyles?.platformPseudo);
+		hasEnterStyle = finalizedComponentState.hasEnterStyle;
+		isAnimated = finalizedComponentState.isAnimated;
+		willBeAnimated = finalizedComponentState.willBeAnimated;
+		willBeAnimatedClient = finalizedComponentState.willBeAnimatedClient;
+		platformPseudo = finalizedComponentState.platformPseudo;
+		groupName = splitStyles?.frontendGroup ?? groupName;
+		const containerProp = splitStyles?.frontendContainer ?? props.container;
+		const containerName = props.containerName || (typeof containerProp === "string" ? containerProp : void 0);
+		const containerType = splitStyles?.frontendContainerType || props.containerType || (containerProp ? "inline-size" : void 0);
+		const isContainer = !!containerType && containerType !== "normal";
+		const allGroupContexts = (0, import_react.useMemo)(() => {
+			if (!groupName && !isContainer || props.passThrough) return groupContextParent;
+			const listeners = /* @__PURE__ */ new Set();
+			stateRef.current.group?.listeners?.clear();
+			stateRef.current.group = {
+				listeners,
+				emit(state2) {
+					listeners.forEach((l) => l(state2));
+				},
+				subscribe(cb) {
+					listeners.add(cb);
+					if (listeners.size === 1) setStateShallow({ hasDynGroupChildren: true });
+					return () => {
+						listeners.delete(cb);
+						if (listeners.size === 0) setStateShallow({ hasDynGroupChildren: false });
+					};
+				}
+			};
+			const entry = {
+				state: { pseudo: import_defaultComponentState.defaultComponentStateMounted },
+				subscribe: (listener) => {
+					const dispose = stateRef.current.group?.subscribe(listener);
+					return () => {
+						dispose?.();
+					};
+				}
+			};
+			const next = { ...groupContextParent };
+			if (groupName) next[groupName] = entry;
+			if (isContainer) {
+				next["@"] = entry;
+				if (containerName) next[`@${containerName}`] = entry;
+			}
+			return next;
+		}, [
+			stateRef,
+			groupName,
+			containerName,
+			isContainer,
+			groupContextParent
+		]);
 		const isPassthrough = !splitStyles;
 		let contextForOverride = staticConfig.context;
 		if (splitStyles?.overriddenContextProps) {
@@ -483,7 +487,7 @@ ${banner}
 			}
 		}
 		const groupContext = groupName || isContainer ? allGroupContexts?.[groupName ?? "@"] || null : null;
-		if (!isPassthrough && groupContext && props.containerType !== "normal") {
+		if (!isPassthrough && groupContext && isContainer) {
 			const groupState = groupContext?.state;
 			if (groupState && groupState.layout === void 0) {
 				if (splitStyles.style?.width || splitStyles.style?.height) groupState.layout = {
@@ -538,7 +542,11 @@ ${banner}
 				const prev = stateRef.current.nextState || state;
 				const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
 				if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
-				const canAvoidReRender = Object.keys(next).every((key) => avoidReRenderKeys.has(key));
+				let canAvoidReRender = true;
+				for (const key in next) if (!avoidReRenderKeys.has(key)) {
+					canAvoidReRender = false;
+					break;
+				}
 				const updatedState = {
 					...prev,
 					...next
@@ -580,6 +588,7 @@ ${banner}
 		if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
 		(0, import_useMedia.setMediaShouldUpdate)(stateRef.current, shouldListenForMedia, mediaListeningKeys, stateRef.current.optimizeForFirstRender);
 		const { viewProps: viewPropsIn, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups } = splitStyles || {};
+		const groupSetRevision = (0, import_subscribeToContextGroup.useGroupSetRevision)(pseudoGroups, mediaGroups);
 		const propsWithAnimation = props;
 		const { asChild, children, themeShallow, spaceDirection: _spaceDirection, onPress, onLongPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onMouseUp, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onTransition, separator, passThrough, forceStyle: _forceStyle, onClick, theme: _themeProp, ...nonTamaguiProps } = viewPropsIn || {};
 		let viewProps = nonTamaguiProps;
@@ -625,11 +634,9 @@ ${banner}
 			if (process.env.NODE_ENV === "development" && time) time`animations`;
 		}
 		if (import_constants.isWeb && isExiting) viewProps.className = `t_exiting ${viewProps.className || ""}`;
-		if (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group) console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use a group clause.
-
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`);
+		if (process.env.NODE_ENV === "development" && props.untilMeasured && !isContainer) console.warn(`You set untilMeasured without establishing a container. Set it on the parent with container or container="name", not on the child using a container clause.`);
 		if (process.env.NODE_ENV === "development" && time) time`destructure`;
-		if (!isPassthrough && groupContext && props.containerType !== "normal") nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, (e) => {
+		if (!isPassthrough && groupContext && isContainer) nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, (e) => {
 			const layout = e.nativeEvent.layout;
 			groupContext.state.layout = layout;
 			stateRef.current.group?.emit({ layout });
@@ -643,7 +650,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 		viewProps.ref = stateRef.current.composedRef;
 		(0, import_pointerEvents.usePointerEvents)(props, viewProps);
 		if (process.env.NODE_ENV === "development") {
-			if (!isReactNative && !isText && import_constants.isWeb && !isHOC) import_react.default.Children.toArray(props.children).forEach((item) => {
+			if (!isText && import_constants.isWeb && !isHOC) import_react.default.Children.toArray(props.children).forEach((item) => {
 				if (typeof item === "string" && item !== "\n") console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${displayName || propsIn.tag || "View"}>.`, props);
 			});
 		}
@@ -707,7 +714,6 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 					setState((previous) => ({ ...previous }));
 				};
 				disposeSafeArea = (0, import_resolveSafeAreaVariable.subscribeToSafeArea)(updateSafeArea);
-				updateSafeArea();
 			}
 			if (disabled) return disposeSafeArea;
 			if (!pseudoGroups && !mediaGroups) return disposeSafeArea;
@@ -727,8 +733,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 			allGroupContexts,
 			disabled,
 			splitStyles?.usesSafeArea,
-			pseudoGroups ? (0, import_objectIdentityKey.objectIdentityKey)(pseudoGroups) : 0,
-			mediaGroups ? (0, import_objectIdentityKey.objectIdentityKey)(mediaGroups) : 0
+			groupSetRevision
 		]);
 		const groupEmitter = stateRef.current.group;
 		(0, import_constants.useIsomorphicLayoutEffect)(() => {
@@ -832,16 +837,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 				}
 			}
 		} : null;
-		if (events && !isReactNative) Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
+		if (events) Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
 		if (process.env.NODE_ENV === "development" && time) time`events`;
 		if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`events`, {
 			events,
 			attachHover,
 			attachPress
 		});
-		const propsWithHref = props;
-		const propsInWithHref = propsIn;
-		[displayName, props.testID ?? propsIn.testID ?? props.accessibilityLabel ?? propsIn.accessibilityLabel ?? (typeof propsWithHref.href === "string" ? propsWithHref.href : null) ?? (typeof propsInWithHref.href === "string" ? propsInWithHref.href : null)].filter(Boolean).join(":");
 		if (process.env.NODE_ENV === "development" && time) time`hooks`;
 		if (asChild && !isHOC) {
 			elementType = import_Slot.Slot;
@@ -895,7 +897,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 			setParentFocusState: setStateShallow,
 			children: content
 		});
-		if ("group" in props || isContainer) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
+		if (groupName || isContainer) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
 			value: allGroupContexts,
 			children: content
 		});
@@ -907,11 +909,6 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 		if (process.env.NODE_ENV === "development" && time) time`group-context`;
 		content = disableTheme || !splitStyles ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, false, stateRef);
 		if (process.env.NODE_ENV === "development" && time) time`themed-children`;
-		if (isReactNative && !asChild) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: "_dsp_contents",
-			...!isPassthrough && isHydrated && events && (0, import_eventHandling.getWebEvents)(events),
-			children: content
-		});
 		if (overriddenContextProps && contextForOverride) {
 			const Provider = contextForOverride.Provider;
 			for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
@@ -922,7 +919,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 			});
 		}
 		if (process.env.NODE_ENV === "development" && time) time`context-override`;
-		if (startedUnhydrated && splitStyles) content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [content, !isHydrated ? (0, import_wrapStyleTags.getStyleTags)(Object.values(splitStyles.rulesToInsert)) : null] });
+		if (!process.env.TAMAGUI_DID_OUTPUT_CSS && startedUnhydrated && splitStyles) content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [content, !isHydrated ? (0, import_wrapStyleTags.getStyleTags)(Object.values(splitStyles.rulesToInsert)) : null] });
 		if (process.env.NODE_ENV === "development" && time) time`style-tags`;
 		if (process.env.NODE_ENV === "development") {
 			if (debugProp && debugProp !== "profile") {