@tamagui/web 1.129.12 → 1.129.13

package/dist/cjs/contexts/ComponentContext.cjs

@@ -29,10 +29,5 @@ const ComponentContext = (0, import_createStyledContext.createStyledContext)({
   inText: !1,
   language: null,
   animationDriver: null,
-  setParentFocusState: null,
-  groups: {
-    emit: null,
-    subscribe: null,
-    state: {}
-  }
+  setParentFocusState: null
 });

package/dist/cjs/contexts/ComponentContext.js

@@ -23,11 +23,6 @@ const ComponentContext = (0, import_createStyledContext.createStyledContext)({
   inText: !1,
   language: null,
   animationDriver: null,
-  setParentFocusState: null,
-  groups: {
-    emit: null,
-    subscribe: null,
-    state: {}
-  }
+  setParentFocusState: null
 });
 //# sourceMappingURL=ComponentContext.js.map

package/dist/cjs/contexts/ComponentContext.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/contexts/ComponentContext.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAoC;AAG7B,MAAM,uBAAmB,gDAAuC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO,CAAC;AAAA,EACV;AACF,CAAC;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAoC;AAG7B,MAAM,uBAAmB,gDAAuC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,qBAAqB;AACvB,CAAC;",
   "names": []
 }

package/dist/cjs/contexts/ComponentContext.native.js

@@ -23,12 +23,7 @@ var import_createStyledContext = require("../helpers/createStyledContext"), Comp
   inText: !1,
   language: null,
   animationDriver: null,
-  setParentFocusState: null,
-  groups: {
-    emit: null,
-    subscribe: null,
-    state: {}
-  }
+  setParentFocusState: null
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/contexts/ComponentContext.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/contexts/ComponentContext.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;;;;;iCAAoC,2CAGvBA,uBAAmBC,gDAAuC;EACrEC,YAAYC;EACZC,QAAQ;EACRC,UAAU;EACVC,iBAAiB;EACjBC,qBAAqB;EACrBC,QAAQ;IACNC,MAAM;IACNC,WAAW;IACXC,OAAO,CAAC;EACV;AACF,CAAA;",
-  "names": ["ComponentContext", "createStyledContext", "disableSSR", "undefined", "inText", "language", "animationDriver", "setParentFocusState", "groups", "emit", "subscribe", "state"]
+  "mappings": ";;;;;;;;;;;;;;;AAAA;;;;;iCAAoC,2CAGvBA,uBAAmBC,gDAAuC;EACrEC,YAAYC;EACZC,QAAQ;EACRC,UAAU;EACVC,iBAAiB;EACjBC,qBAAqB;AACvB,CAAA;",
+  "names": ["ComponentContext", "createStyledContext", "disableSSR", "undefined", "inText", "language", "animationDriver", "setParentFocusState"]
 }

package/dist/cjs/contexts/GroupContext.cjs

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var GroupContext_exports = {};
+__export(GroupContext_exports, {
+  GroupContext: () => GroupContext
+});
+module.exports = __toCommonJS(GroupContext_exports);
+var import_react = require("react");
+const GroupContext = (0, import_react.createContext)(null);

package/dist/cjs/contexts/GroupContext.js

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var GroupContext_exports = {};
+__export(GroupContext_exports, {
+  GroupContext: () => GroupContext
+});
+module.exports = __toCommonJS(GroupContext_exports);
+var import_react = require("react");
+const GroupContext = (0, import_react.createContext)(null);
+//# sourceMappingURL=GroupContext.js.map

package/dist/cjs/contexts/GroupContext.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/contexts/GroupContext.tsx"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAGvB,MAAM,mBAAe,4BAAuC,IAAI;",
+  "names": []
+}

package/dist/cjs/contexts/GroupContext.native.js

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var GroupContext_exports = {};
+__export(GroupContext_exports, {
+  GroupContext: () => GroupContext
+});
+module.exports = __toCommonJS(GroupContext_exports);
+var import_react = require("react"), GroupContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GroupContext
+});
+//# sourceMappingURL=GroupContext.js.map

package/dist/cjs/contexts/GroupContext.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/contexts/GroupContext.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;;;;;mBAA8B,kBAGjBA,eAAeC,gDAAuC,IAAA;",
+  "names": ["GroupContext", "createContext"]
+}

package/dist/cjs/createComponent.cjs

@@ -41,11 +41,13 @@ module.exports = __toCommonJS(createComponent_exports);
 var import_compose_refs = require("@tamagui/compose-refs"),
   import_constants = require("@tamagui/constants"),
   import_helpers = require("@tamagui/helpers"),
+  import_is_equal_shallow = require("@tamagui/is-equal-shallow"),
   import_react = __toESM(require("react")),
   import_config = require("./config.cjs"),
   import_constants2 = require("./constants/constants.cjs"),
   import_isDevTools = require("./constants/isDevTools.cjs"),
   import_ComponentContext = require("./contexts/ComponentContext.cjs"),
+  import_GroupContext = require("./contexts/GroupContext.cjs"),
   import_createVariable = require("./createVariable.cjs"),
   import_defaultComponentState = require("./defaultComponentState.cjs"),
   import_getShorthandValue = require("./helpers/getShorthandValue.cjs"),
@@ -64,7 +66,8 @@ var import_compose_refs = require("@tamagui/compose-refs"),
   import_Theme = require("./views/Theme.cjs"),
   import_jsx_runtime = require("react/jsx-runtime");
 let time, debugKeyListeners, startVisualizer;
-const componentSetStates = /* @__PURE__ */new Set();
+const componentSetStates = /* @__PURE__ */new Set(),
+  avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "group", "focus", "focusWithin", "media", "group"]);
 if (typeof window < "u") {
   const cancelTouches = () => {
     componentSetStates.forEach(setState => setState(prev => prev.press || prev.pressIn ? {
@@ -75,11 +78,11 @@ if (typeof window < "u") {
   };
   addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = () => {
     const devVisualizerConfig = import_config.devConfig?.visualizer;
-    if (devVisualizerConfig) {
+    if (devVisualizerConfig && !globalThis.__tamaguiDevVisualizer) {
       let show = function (val) {
         clearTimeout(tm), isShowing = val, debugKeyListeners?.forEach(l => l(val));
       };
-      debugKeyListeners = /* @__PURE__ */new Set();
+      globalThis.__tamaguiDevVisualizer = !0, debugKeyListeners = /* @__PURE__ */new Set();
       let tm,
         isShowing = !1;
       const options = {
@@ -109,12 +112,12 @@ let BaseText, BaseView;
 const lastInteractionWasKeyboard = {
   value: !1
 };
-import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", () => {
-  lastInteractionWasKeyboard.value = !0;
+import_constants.isWeb && typeof document < "u" && (document.addEventListener("keydown", () => {
+  lastInteractionWasKeyboard.value || (lastInteractionWasKeyboard.value = !0);
 }), document.addEventListener("mousedown", () => {
-  lastInteractionWasKeyboard.value = !1;
+  lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
 }), document.addEventListener("mousemove", () => {
-  lastInteractionWasKeyboard.value = !1;
+  lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
 }));
 function createComponent(staticConfig) {
   const {
@@ -145,7 +148,6 @@ function createComponent(staticConfig) {
   const component = import_react.default.forwardRef((propsIn, forwardedRef) => {
     const internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
     process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
-    const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
     let styledContextProps, overriddenContextProps, contextValue;
     const {
       context,
@@ -175,7 +177,7 @@ function createComponent(staticConfig) {
     process.env.NODE_ENV === "development" && import_constants.isClient && import_react.default.useEffect(() => {
       let overlay = null;
       const debugVisualizerHandler = (show = !1) => {
-        const node = curStateRef.host;
+        const node = stateRef.current.host;
         if (node) if (show) {
           overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted";
           const dataAt = node.getAttribute("data-at") || "",
@@ -188,11 +190,12 @@ function createComponent(staticConfig) {
         debugKeyListeners?.delete(debugVisualizerHandler);
       };
     }, [componentName2]);
-    const animationDriver = componentContext.animationDriver,
+    const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext),
+      groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext),
+      animationDriver = componentContext.animationDriver,
       useAnimations = animationDriver?.useAnimations,
-      componentState = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config),
+      componentState = (0, import_useComponentState.useComponentState)(props, animationDriver, staticConfig, config),
       {
-        curStateRef,
         disabled,
         groupName,
         hasAnimationProp,
@@ -210,9 +213,46 @@ function createComponent(staticConfig) {
         willBeAnimated,
         willBeAnimatedClient,
         startedUnhydrated
-      } = componentState;
+      } = componentState,
+      allGroupContexts = (0, import_react.useMemo)(() => {
+        if (!groupName) return groupContextParent;
+        stateRef.current.group?.listeners.clear();
+        const listeners = /* @__PURE__ */new Set();
+        return stateRef.current.group = {
+          listeners,
+          emit(state2) {
+            listeners.forEach(l => l(state2));
+          },
+          subscribe(cb) {
+            return listeners.add(cb), listeners.size === 1 && setStateShallow({
+              hasDynGroupChildren: !0
+            }), () => {
+              listeners.delete(cb), listeners.size === 0 && setStateShallow({
+                hasDynGroupChildren: !1
+              });
+            };
+          }
+        }, {
+          ...groupContextParent,
+          [groupName]: {
+            state: {
+              pseudo: import_defaultComponentState.defaultComponentStateMounted
+            },
+            subscribe: listener => {
+              const dispose = stateRef.current.group?.subscribe(listener);
+              return () => {
+                dispose?.();
+              };
+            }
+          }
+        };
+      }, [stateRef, groupName, groupContextParent]);
     let setStateShallow = componentState.setStateShallow;
-    process.env.NODE_ENV === "development" && time && time`use-state`;
+    const pendingState = stateRef.current.nextComponentState;
+    pendingState && (stateRef.current.nextComponentState = void 0, componentState.setState(prev => ({
+      ...prev,
+      ...pendingState
+    }))), process.env.NODE_ENV === "development" && time && time`use-state`;
     const hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText),
       isTaggable = !Component || typeof Component == "string",
       tagProp = props.tag,
@@ -225,14 +265,14 @@ function createComponent(staticConfig) {
     // things declaratively
     !animationDriver.needsWebStyles && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
     const disableTheme = props["data-disable-theme"] || isHOC;
-    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
+    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
     const themeStateProps = {
       componentName: componentName2,
       disable: disableTheme,
-      shallow: curStateRef.themeShallow,
+      shallow: stateRef.current.themeShallow,
       debug: debugProp
     };
-    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
       const name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`,
         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 === !1 ? "(EXIT)" : ""),
         dataIs = propsIn["data-is"] || "",
@@ -253,7 +293,8 @@ function createComponent(staticConfig) {
           themeStateProps
         }), (0, import_log.log)({
           contextProps: styledContextProps,
-          overriddenContextProps
+          overriddenContextProps,
+          componentContext
         }), (0, import_log.log)({
           presence,
           isAnimated,
@@ -284,24 +325,51 @@ function createComponent(staticConfig) {
       },
       themeName = themeState?.name || "";
     process.env.NODE_ENV === "development" && time && time`split-styles-prepare`;
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
-    if (hasAnimationProp && animationDriver?.avoidReRenders) {
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp),
+      groupContext = groupName && allGroupContexts?.[groupName] || null;
+    if (groupContext) {
+      const groupState = groupContext?.state;
+      groupState && groupState.layout === void 0 && (splitStyles.style?.width || splitStyles.style?.height) && (groupState.layout = {
+        width: fromPx(splitStyles.style.width),
+        height: fromPx(splitStyles.style.height)
+      });
+    }
+    if ((hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
       const styleListener = stateRef.current.useStyleListener,
         ogSetStateShallow = setStateShallow;
-      setStateShallow = next => {
-        const avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn"]);
-        if (Object.keys(next).every(key => avoidReRenderKeys.has(key)) && styleListener) {
+      stateRef.current.setStateShallow = nextOrGetNext => {
+        const prev = stateRef.current.nextComponentState || state,
+          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));
+        if (canAvoidReRender) {
           const updatedState = {
-            ...state,
+            ...prev,
             ...next
           };
-          stateRef.current.nextComponentState = updatedState;
-          const nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
+          stateRef.current.nextComponentState = updatedState, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed("[\u26A1\uFE0F] avoid setState", next, {
+            updatedState,
+            props
+          }), console.info(stateRef.current.host), console.groupEnd());
+          const {
+            group,
+            hasDynGroupChildren,
+            unmounted,
+            animation,
+            ...childrenGroupState
+          } = updatedState;
+          if (groupContext && notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState), !hasAnimationProp || !styleListener) return;
+          const nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp);
           styleListener(nextStyles.style);
-        } else ogSetStateShallow(next);
+        } else process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && console.info("[\u{1F40C}] re-render", {
+          canAvoidReRender,
+          next
+        }), ogSetStateShallow(next);
+      }, setStateShallow = state2 => {
+        stateRef.current.setStateShallow?.(state2);
       };
     }
-    process.env.NODE_ENV === "development" && time && time`split-styles`, props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured && (splitStyles.style ||= {}, splitStyles.style.opacity = 0), curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    process.env.NODE_ENV === "development" && time && time`split-styles`, props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style ||= {}, splitStyles.style.opacity = 0), splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess);
     const hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0,
       shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles.hasMedia === !0,
       mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
@@ -369,14 +437,14 @@ function createComponent(staticConfig) {
     }
     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 the $group- prop.
 
-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}`), process.env.NODE_ENV === "development" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, e => {
+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}`), process.env.NODE_ENV === "development" && time && time`destructure`, groupContext && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, e => {
       const layout = e.nativeEvent.layout;
-      stateRef.current.group.layout = layout, stateRef.current.group.emit(groupName, {
+      groupContext.state.layout = layout, stateRef.current.group?.emit({
         layout
       }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(prev => ({
         ...prev
       })), stateRef.current.hasMeasured = !0;
-    })), viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = (0, import_compose_refs.composeRefs)(x => stateRef.current.host = x, forwardedRef, import_setElementProps.setElementProps, animatedRef)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react.default.Children.toArray(props.children).forEach(item => {
+    })), viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonTamaguiProps, stateRef, stateRef.current.willHydrate) || nonTamaguiProps, stateRef.current.composedRef || (stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(x => stateRef.current.host = x, forwardedRef, import_setElementProps.setElementProps, animatedRef)), viewProps.ref = stateRef.current.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react.default.Children.toArray(props.children).forEach(item => {
       typeof item == "string" && item !== `
 ` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
     }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
@@ -421,31 +489,23 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         });
         return;
       }
-      const dispose = !disabled && (pseudoGroups || mediaGroups) ? (0, import_subscribeToContextGroup.subscribeToContextGroup)({
-        componentContext,
+      return () => {
+        componentSetStates.delete(setState);
+      };
+    }, [state.unmounted, disabled]), (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+        groupContext: allGroupContexts,
         setStateShallow,
-        state,
         mediaGroups,
         pseudoGroups
-      }) : null;
-      return () => {
-        dispose?.(), componentSetStates.delete(setState);
-      };
-    }, [state.unmounted, disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]), (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (!groupName) return;
-      curStateRef.group.emit(groupName, {
-        pseudo: state,
-        layout: curStateRef.group?.layout
       });
-      const groupContextState = componentContext?.groups;
-      if (groupContextState) {
-        const next = {
-          ...groupContextState[groupName],
-          ...state
-        };
-        groupContextState[groupName] = next;
-      }
-    }, [groupName, state]);
+    }, [allGroupContexts, disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]), hasAnimationProp && animationDriver?.avoidReRenders && (0, import_react.useEffect)(() => {
+      stateRef.current.nextComponentState = void 0;
+    });
+    const groupEmitter = stateRef.current.group;
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state);
+    }, [groupContext, groupEmitter, state]);
     const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle,
       runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle,
       runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle,
@@ -480,7 +540,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         },
         onMouseLeave: e => {
           const next = {};
-          needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+          needsHoverState && (next.hover = !1), needsPressState && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
         }
       }),
       onPressIn: attachPress ? e => {
@@ -494,24 +554,16 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       } : void 0,
       ...(attachFocus && {
         onFocus: e => {
-          componentContext.setParentFocusState && componentContext.setParentFocusState({
-            focusWithin: !0
-          }), pseudos?.focusVisibleStyle ? setTimeout(() => {
-            setStateShallow({
-              focus: !0,
-              focusVisible: !!lastInteractionWasKeyboard.value
-            });
-          }, 0) : setStateShallow({
-            focus: !0,
-            focusVisible: !1
-          }), onFocus?.(e);
+          const next = {};
+          componentContext.setParentFocusState && (next.focusWithin = !0), pseudos?.focusVisibleStyle && lastInteractionWasKeyboard.value ? next.focusVisible = !0 : next.focus = !0, setStateShallow(next), onFocus?.(e);
         },
         onBlur: e => {
           componentContext.setParentFocusState && componentContext.setParentFocusState({
             focusWithin: !1
           }), setStateShallow({
             focus: !1,
-            focusVisible: !1
+            focusVisible: !1,
+            focusWithin: !1
           }), onBlur?.(e);
         }
       })
@@ -551,35 +603,15 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     let useChildrenResult;
     import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(elementType, content, viewProps)), process.env.NODE_ENV === "development" && time && time`use-children`, useChildrenResult ? content = useChildrenResult : content = import_react.default.createElement(elementType, viewProps, content);
     const ResetPresence = config?.animations?.ResetPresence;
-    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResetPresence, {
+    if (ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResetPresence, {
       children: content
-    })), process.env.NODE_ENV === "development" && time && time`create-element`;
-    const groupState = curStateRef.group,
-      subGroupContext = import_react.default.useMemo(() => {
-        if (!(!groupState || !groupName)) return groupState.listeners.clear(), {
-          ...componentContext.groups,
-          // change reference so as we mutate it doesn't affect siblings etc
-          state: {
-            ...componentContext.groups.state,
-            [groupName]: {
-              pseudo: import_defaultComponentState.defaultComponentStateMounted,
-              // capture just initial width and height if they exist
-              // will have top, left, width, height (not x, y)
-              layout: {
-                width: fromPx(splitStyles.style?.width),
-                height: fromPx(splitStyles.style?.height)
-              }
-            }
-          },
-          emit: groupState.emit,
-          subscribe: groupState.subscribe
-        };
-      }, [groupName]);
-    if (("group" in props || propsIn.focusWithinStyle) && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+    })), process.env.NODE_ENV === "development" && time && time`create-element`, "focusWithinStyle" in propsIn && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
       ...componentContext,
-      groups: subGroupContext,
       setParentFocusState: setStateShallow,
       children: content
+    })), "group" in props && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
+      value: allGroupContexts,
+      children: content
     })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time`themed-children`, isReactNative && !asChild && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
       className: "_dsp_contents",
       ...(isHydrated && events && getWebEvents(events)),
@@ -610,6 +642,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("children", content), typeof window < "u" && (0, import_log.log)({
             propsIn,
             props,
+            attachPress,
             animationStyles,
             classNames,
             content,
@@ -647,6 +680,14 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       delete globalThis.willPrint, time.print(), time = null;
     }, 50))), content;
   });
+  function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
+    if (!groupContext || !groupEmitter) return;
+    const nextState = {
+      ...groupContext.state,
+      pseudo
+    };
+    groupEmitter.emit(nextState), groupContext.state = nextState;
+  }
   staticConfig.componentName && (component.displayName = staticConfig.componentName);
   let res = component;
   (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = import_react.default.memo(res)), res.staticConfig = staticConfig;