@tamagui/core 1.124.9 → 1.124.11

package/dist/native.js

@@ -6050,24 +6050,29 @@ var require_createShallowSetState_native = __commonJS({
     var import_react3 = require("react"), callImmediate = function(cb) {
       return cb();
     };
-    function createShallowSetState(setter, isDisabled, transition, debug, callback) {
+    function createShallowSetState(setter, onlyAllow, transition, debug, callback) {
       return (0, import_react3.useCallback)(function(next) {
         var wrap = transition ? import_react3.startTransition : callImmediate;
         wrap(function() {
           setter(function(prev) {
-            var out = mergeIfNotShallowEqual(prev, next, isDisabled, debug);
+            var out = mergeIfNotShallowEqual(prev, next, onlyAllow, debug);
             return callback == null || callback(out), out;
           });
         });
       }, [
         setter,
-        isDisabled,
+        onlyAllow ? onlyAllow.join("") : "",
         transition,
         debug
       ]);
     }
-    function mergeIfNotShallowEqual(prev, next, isDisabled, debug) {
-      if (isDisabled || !prev || !next || isEqualShallow(prev, next)) return prev || next;
+    function mergeIfNotShallowEqual(prev, next, onlyAllow, debug) {
+      if (onlyAllow) {
+        var allowed = {};
+        for (var key in next) onlyAllow.includes(key) && (allowed[key] = next[key]);
+        next = allowed;
+      }
+      if (!prev || !next || isEqualShallow(prev, next)) return prev || next;
       if (process.env.NODE_ENV === "development" && debug && (console.info("setStateShallow CHANGE", {
         prev,
         next
@@ -6217,16 +6222,34 @@ var require_useThemeState_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useThemeState_exports);
-    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_config = require_config_native(), ThemeStateContext = (0, import_react3.createContext)(""), keysToId = /* @__PURE__ */ new WeakMap(), allListeners = /* @__PURE__ */ new Map(), listenersByParent = {}, hasRenderedOnce = /* @__PURE__ */ new WeakMap(), pendingUpdate = /* @__PURE__ */ new Map(), states = /* @__PURE__ */ new Map(), shouldForce = !1, forceUpdateThemes2 = function() {
+    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_config = require_config_native(), ThemeStateContext = (0, import_react3.createContext)(""), keysToId = /* @__PURE__ */ new WeakMap(), allListeners = /* @__PURE__ */ new Map(), listenersByParent = {}, hasRenderedOnce = /* @__PURE__ */ new WeakMap(), pendingUpdate = /* @__PURE__ */ new Map(), states = /* @__PURE__ */ new Map(), localStates = /* @__PURE__ */ new Map();
+    process.env.NODE_ENV === "development" && (globalThis.getTamaguiThemes = function() {
+      function buildTree(id) {
+        var node = states.get(id);
+        if (!node) return null;
+        var children = Array.from(states.values()).filter(function(child) {
+          return (child == null ? void 0 : child.parentId) === id;
+        }).map(function(child) {
+          return buildTree(child.id);
+        }).filter(Boolean);
+        return {
+          ...node,
+          children
+        };
+      }
+      rootThemeState && console.info(buildTree(rootThemeState.id));
+    });
+    var shouldForce = !1, forceUpdateThemes2 = function() {
       cacheVersion++, shouldForce = !0, allListeners.forEach(function(cb) {
         return cb();
       });
     }, getThemeState = function(id) {
       return states.get(id);
-    }, cache2 = /* @__PURE__ */ new Map(), cacheVersion = 0, themes = null, rootThemeState = null, getRootThemeState = function() {
+    }, cacheVersion = 0, themes = null, rootThemeState = null, getRootThemeState = function() {
       return rootThemeState;
     }, useThemeState = function(props) {
       var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, keys = arguments.length > 2 ? arguments[2] : void 0, { disable } = props, parentId = (0, import_react3.useContext)(ThemeStateContext);
+      if (!parentId && !isRoot) throw new Error("No parent?");
       if (disable) return states.get(parentId) || {
         id: "",
         name: "light",
@@ -6238,16 +6261,24 @@ var require_useThemeState_native = __commonJS({
         return (_listenersByParent = listenersByParent)[_parentId = parentId] || (_listenersByParent[_parentId] = /* @__PURE__ */ new Set()), listenersByParent[parentId].add(id), allListeners.set(id, function() {
           pendingUpdate.set(id, shouldForce ? "force" : !0), cb();
         }), function() {
-          allListeners.delete(id), listenersByParent[parentId].delete(id);
+          allListeners.delete(id), listenersByParent[parentId].delete(id), localStates.delete(id), states.delete(id), pendingUpdate.delete(id);
         };
       }, [
         id,
         parentId
       ]), propsKey = getPropsKey(props), getSnapshot = function() {
-        var _keys_current, _props_needsUpdate, last = states.get(id), needsUpdate = props.name === "light" || props.name === "dark" ? !0 : hasRenderedOnce.get(keys) ? !(keys == null || (_keys_current = keys.current) === null || _keys_current === void 0) && _keys_current.size ? !0 : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props) : !0, parentState = states.get(parentId), cacheKey = `${cacheVersion}${id}${propsKey}${(parentState == null ? void 0 : parentState.name) || ""}${isRoot}`;
-        if (!needsUpdate && cache2.has(cacheKey)) return cache2.get(cacheKey);
-        var next = getSnapshotFrom(last, props, propsKey, isRoot, id, parentId, needsUpdate, pendingUpdate.get(id));
-        return last !== next && (pendingUpdate.delete(id), states.set(id, next), cache2.set(id, next), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.warn(` \xB7 useTheme(${id}) UPDATE from`, last, "to", next)), next;
+        var _keys_current, _props_needsUpdate, local = localStates.get(id), needsUpdate = isRoot || props.name === "light" || props.name === "dark" || props.name === null ? !0 : hasRenderedOnce.get(keys) ? !(keys == null || (_keys_current = keys.current) === null || _keys_current === void 0) && _keys_current.size ? !0 : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props) : !0, [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, pendingUpdate.get(id));
+        return pendingUpdate.delete(id), (!local || rerender) && (local = {
+          ...next
+        }, localStates.set(id, local)), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed(` ${id} \u{1FA84} ${rerender}`, local.name, ">", next.name), console.info({
+          props,
+          propsKey,
+          isRoot,
+          parentId,
+          local,
+          next,
+          needsUpdate
+        }), console.groupEnd()), Object.assign(local, next), local.id = id, states.set(id, next), local;
       };
       process.env.NODE_ENV === "development" && globalThis.time && globalThis.time`theme-prep-uses`;
       var state = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
@@ -6266,31 +6297,39 @@ var require_useThemeState_native = __commonJS({
       }, [
         keys,
         propsKey
-      ]), state.id === id ? {
-        ...state,
-        isNew: !0
-      } : state;
-    }, getSnapshotFrom = function(lastState, props, propsKey) {
+      ]), state;
+    }, getNextState = function(lastState, props, propsKey) {
       var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, id = arguments.length > 4 ? arguments[4] : void 0, parentId = arguments.length > 5 ? arguments[5] : void 0, needsUpdate = arguments.length > 6 ? arguments[6] : void 0, pendingUpdate2 = arguments.length > 7 ? arguments[7] : void 0, { debug } = props, parentState = states.get(parentId);
       themes || (themes = (0, import_config.getConfig)().themes);
-      var name = !propsKey && pendingUpdate2 !== "force" ? null : getNewThemeName(parentState == null ? void 0 : parentState.name, props, pendingUpdate2 === "force" ? !0 : !!needsUpdate), isSameAsParent = !!(!name && propsKey);
+      var name = !propsKey && (!lastState || !(lastState != null && lastState.isNew)) ? null : getNewThemeName(parentState == null ? void 0 : parentState.name, props, pendingUpdate2 === "force" ? !0 : !!needsUpdate), isSameAsParent = parentState && (!name || name === parentState.name), shouldRerender = !!(needsUpdate && (pendingUpdate2 || (lastState == null ? void 0 : lastState.name) !== (parentState == null ? void 0 : parentState.name)));
       if (process.env.NODE_ENV === "development" && debug && debug !== "profile") {
-        var message = ` \xB7 useTheme(${id}) snapshot ${name}, parent ${parentState == null ? void 0 : parentState.id} needsUpdate ${needsUpdate}`;
+        var message = ` \xB7 useTheme(${id}) => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
         console.info(message);
       }
-      if (parentState && isSameAsParent) return parentState;
+      if (isSameAsParent) return [
+        shouldRerender,
+        {
+          ...parentState,
+          isNew: !1
+        }
+      ];
       if (!name) {
         var next = lastState ?? parentState;
         if (!next) throw new Error("No theme and no parent?");
-        if (needsUpdate && pendingUpdate2) {
+        if (shouldRerender) {
           var updated = {
             ...parentState || lastState
           };
-          return updated;
+          return [
+            !0,
+            updated
+          ];
         }
-        return next;
+        return [
+          !1,
+          next
+        ];
       }
-      if (pendingUpdate2 !== "force" && lastState && lastState.name === name) return lastState;
       var scheme = getScheme(name), _parentState_inverses, parentInverses = (_parentState_inverses = parentState == null ? void 0 : parentState.inverses) !== null && _parentState_inverses !== void 0 ? _parentState_inverses : 0, isInverse = parentState && scheme !== parentState.scheme, inverses = parentInverses + (isInverse ? 1 : 0), nextState = {
         id,
         name,
@@ -6299,16 +6338,26 @@ var require_useThemeState_native = __commonJS({
         parentId,
         parentName: parentState == null ? void 0 : parentState.name,
         inverses,
-        isInverse
+        isInverse,
+        isNew: !0
       };
-      isRoot && (rootThemeState = nextState);
+      if (isRoot && (rootThemeState = nextState), pendingUpdate2 !== "force" && lastState && lastState.name === name) return [
+        !1,
+        nextState
+      ];
       var shouldAvoidRerender = pendingUpdate2 !== "force" && lastState && !needsUpdate && nextState.name === lastState.name;
       return process.env.NODE_ENV === "development" && debug && debug !== "profile" && (console.groupCollapsed(` \xB7 useTheme(${id}) \u23ED\uFE0F ${name} shouldAvoidRerender: ${shouldAvoidRerender}`), console.info({
         lastState,
         needsUpdate,
         nextState,
         pendingUpdate: pendingUpdate2
-      }), console.groupEnd()), shouldAvoidRerender ? (Object.assign(lastState, nextState), lastState) : nextState;
+      }), console.groupEnd()), shouldAvoidRerender ? [
+        !1,
+        nextState
+      ] : [
+        !0,
+        nextState
+      ];
     };
     function scheduleUpdate(id) {
       for (var queue = [
@@ -6745,7 +6794,11 @@ var require_Theme_native = __commonJS({
     Theme.avoidForwardRef = !0;
     function getThemedChildren(themeState, children, props) {
       var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, stateRef = arguments.length > 4 ? arguments[4] : void 0, { shallow, forceClassName } = props, state = stateRef.current, hasEverThemed = state.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
-      if (!shouldRenderChildrenWithTheme) return children;
+      if (process.env.NODE_ENV === "development" && props.debug && (children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+        themeState,
+        themeProps: props,
+        children
+      })), !shouldRenderChildrenWithTheme) return children;
       children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_useThemeState.ThemeStateContext.Provider, {
         value: themeState.id,
         children
@@ -6763,20 +6816,19 @@ var require_Theme_native = __commonJS({
           })) : child;
         });
       }
-      if (process.env.NODE_ENV === "development" && props.debug && (console.warn(" getThemedChildren", {
+      if (process.env.NODE_ENV === "development" && props.debug && console.warn(" getThemedChildren", {
         requiresExtraWrapper,
         forceClassName,
         themeState,
         state,
         ...getThemeClassNameAndStyle(themeState, props, isRoot)
-      }), children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-        themeState,
-        themeProps: props,
-        children
-      })), forceClassName === !1) return children;
+      }), forceClassName === !1) return children;
       if (import_constants2.isWeb) {
         var { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot);
         if (children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          ...process.env.NODE_ENV === "development" && {
+            "data-theme-id": themeState.id
+          },
           className: `${className} _dsp_contents is_Theme`,
           style,
           children
@@ -7031,7 +7083,9 @@ var require_useComponentState_native = __commonJS({
           groupContextState[groupName] = next;
         };
       }
-      var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, !1, props.debug, setStateWrapper);
+      var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled ? [
+        "disabled"
+      ] : void 0, !1, props.debug, setStateWrapper);
       if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
         process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
         var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
@@ -9759,7 +9813,7 @@ var require_useProps_native = __commonJS({
         resolveValues: "auto",
         ...opts
       }, null, componentContext), { mediaGroups, pseudoGroups } = splitStyles;
-      return import_react3.default.useEffect(function() {
+      return import_react3.default.useLayoutEffect(function() {
         if (!disabled) {
           if (state.unmounted) {
             setStateShallow({