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

package/dist/esm/createComponent.mjs

@@ -12,19 +12,18 @@ import { defaultComponentStateMounted } from "./defaultComponentState.mjs";
 import { getWebEvents } from "./eventHandling.mjs";
 import { getDefaultProps } from "./helpers/getDefaultProps.mjs";
 import { componentDisplayName } from "./helpers/componentDisplayName.mjs";
-import { resolveAnimationDriver } from "./helpers/resolveAnimationDriver.mjs";
-import { getSplitStyles, useSplitStyles } from "./helpers/getSplitStyles.mjs";
+import { getSplitStyles, prepareStyleStaticConfig } from "./helpers/getSplitStyles.mjs";
 import { log } from "./helpers/log.mjs";
 import { mergeComponentProps } from "./helpers/mergeProps.mjs";
 import { mergeRenderElementProps } from "./helpers/mergeRenderElementProps.mjs";
-import { objectIdentityKey } from "./helpers/objectIdentityKey.mjs";
 import { usePointerEvents } from "./helpers/pointerEvents.mjs";
 import { extractPseudoState } from "./helpers/extractPseudoState.mjs";
 import { subscribeToSafeArea } from "./helpers/resolveSafeAreaVariable.mjs";
 import { setElementProps } from "./helpers/setElementProps.mjs";
-import { subscribeToContextGroup } from "./helpers/subscribeToContextGroup.mjs";
+import { subscribeToContextGroup, useGroupSetRevision } from "./helpers/subscribeToContextGroup.mjs";
 import { getStyleTags } from "./helpers/wrapStyleTags.mjs";
 import { useComponentState } from "./hooks/useComponentState.mjs";
+import { useSplitStyles } from "./hooks/useSplitStyles.mjs";
 import { setMediaShouldUpdate, useMedia } from "./hooks/useMedia.mjs";
 import { useThemeWithState } from "./hooks/useTheme.mjs";
 import { hooks } from "./setupHooks.mjs";
@@ -64,14 +63,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) => {
@@ -171,9 +162,12 @@ if (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.`);
+	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) => {
@@ -196,7 +190,7 @@ function createComponent(staticConfig) {
 				testRenderCount.current += 1;
 			}
 		}
-		const { context, isReactNative } = staticConfig;
+		const { context } = staticConfig;
 		const debugProp = propsIn["debug"];
 		const styledContextValue = context ? React.useContext(context) : void 0;
 		let overriddenContextProps = null;
@@ -220,7 +214,6 @@ function createComponent(staticConfig) {
 		const [nextProps, overrides] = mergeComponentProps(resolvedDefaultProps, styledContextValue, propsIn);
 		props = nextProps;
 		overriddenContextProps = overrides;
-		if (staticConfig.styleFrontend) props = staticConfig.styleFrontend.preprocessProps(props, config);
 		if (process.env.NODE_ENV === "development" && isClient) React.useEffect(() => {
 			let node;
 			let overlay = null;
@@ -270,16 +263,16 @@ function createComponent(staticConfig) {
 		const groupContextParent = React.useContext(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 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 resolveAnimationDriver(componentContext.animationDriver) ?? resolveAnimationDriver(config?.animations) ?? null;
+			return componentContext.animationDriver ?? config?.animations ?? null;
 		})();
 		const useAnimations = animationDriver?.isStub ? void 0 : animationDriver?.useAnimations;
 		const componentState = 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) useIsomorphicLayoutEffect(() => {
@@ -299,49 +292,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 = 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: 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;
@@ -362,7 +312,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;
@@ -380,7 +330,7 @@ function createComponent(staticConfig) {
 						console.groupEnd();
 						console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
 						log("props in:", propsIn);
-						log("final props:", props, Object.keys(props));
+						log("final props:", props);
 						log({
 							state,
 							staticConfig,
@@ -437,12 +387,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 = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+		const splitStyles = 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 = 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: 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) {
@@ -456,7 +460,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 = {
@@ -511,7 +515,11 @@ ${banner}
 				const prev = stateRef.current.nextState || state;
 				const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
 				if (next === prev || 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
@@ -553,6 +561,7 @@ ${banner}
 		if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
 		setMediaShouldUpdate(stateRef.current, shouldListenForMedia, mediaListeningKeys, stateRef.current.optimizeForFirstRender);
 		const { viewProps: viewPropsIn, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups } = splitStyles || {};
+		const groupSetRevision = 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;
@@ -598,11 +607,9 @@ ${banner}
 			if (process.env.NODE_ENV === "development" && time) time`animations`;
 		}
 		if (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 = composeEventHandlers(nonTamaguiProps.onLayout, (e) => {
+		if (!isPassthrough && groupContext && isContainer) nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, (e) => {
 			const layout = e.nativeEvent.layout;
 			groupContext.state.layout = layout;
 			stateRef.current.group?.emit({ layout });
@@ -616,7 +623,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 		viewProps.ref = stateRef.current.composedRef;
 		usePointerEvents(props, viewProps);
 		if (process.env.NODE_ENV === "development") {
-			if (!isReactNative && !isText && isWeb && !isHOC) React.Children.toArray(props.children).forEach((item) => {
+			if (!isText && isWeb && !isHOC) React.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);
 			});
 		}
@@ -680,7 +687,6 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 					setState((previous) => ({ ...previous }));
 				};
 				disposeSafeArea = subscribeToSafeArea(updateSafeArea);
-				updateSafeArea();
 			}
 			if (disabled) return disposeSafeArea;
 			if (!pseudoGroups && !mediaGroups) return disposeSafeArea;
@@ -700,8 +706,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 			allGroupContexts,
 			disabled,
 			splitStyles?.usesSafeArea,
-			pseudoGroups ? objectIdentityKey(pseudoGroups) : 0,
-			mediaGroups ? objectIdentityKey(mediaGroups) : 0
+			groupSetRevision
 		]);
 		const groupEmitter = stateRef.current.group;
 		useIsomorphicLayoutEffect(() => {
@@ -805,16 +810,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
 				}
 			}
 		} : null;
-		if (events && !isReactNative) Object.assign(viewProps, getWebEvents(events));
+		if (events) Object.assign(viewProps, getWebEvents(events));
 		if (process.env.NODE_ENV === "development" && time) time`events`;
 		if (process.env.NODE_ENV === "development" && debugProp === "verbose") 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 = Slot;
@@ -867,7 +869,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__ */ jsx(GroupContext.Provider, {
+		if (groupName || isContainer) content = /* @__PURE__ */ jsx(GroupContext.Provider, {
 			value: allGroupContexts,
 			children: content
 		});
@@ -879,11 +881,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 : getThemedChildren(themeState, content, themeStateProps, false, stateRef);
 		if (process.env.NODE_ENV === "development" && time) time`themed-children`;
-		if (isReactNative && !asChild) content = /* @__PURE__ */ jsx("span", {
-			className: "_dsp_contents",
-			...!isPassthrough && isHydrated && events && getWebEvents(events),
-			children: content
-		});
 		if (overriddenContextProps && contextForOverride) {
 			const Provider = contextForOverride.Provider;
 			for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
@@ -894,7 +891,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__ */ jsxs(Fragment, { children: [content, !isHydrated ? getStyleTags(Object.values(splitStyles.rulesToInsert)) : null] });
+		if (!process.env.TAMAGUI_DID_OUTPUT_CSS && startedUnhydrated && splitStyles) content = /* @__PURE__ */ jsxs(Fragment, { children: [content, !isHydrated ? 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") {