@tamagui/core 1.100.1 → 1.100.3

package/dist/native.js

@@ -2974,6 +2974,62 @@ var require_useDisableSSR_native = __commonJS({
   }
 });
 
+// ../web/dist/cjs/hooks/useDidHydrateOnce.native.js
+var require_useDidHydrateOnce_native = __commonJS({
+  "../web/dist/cjs/hooks/useDidHydrateOnce.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
+      }
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, useDidHydrateOnce_exports = {};
+    __export2(useDidHydrateOnce_exports, {
+      useDidHydrateOnce: function() {
+        return useDidHydrateOnce;
+      },
+      useDidHydrateOnceRoot: function() {
+        return useDidHydrateOnceRoot;
+      }
+    });
+    module2.exports = __toCommonJS2(useDidHydrateOnce_exports);
+    var import_react3 = require("react");
+    function useDidHydrateOnceRoot() {
+    }
+    var last = Date.now();
+    function useDidHydrateOnce() {
+      return !0;
+    }
+  }
+});
+
 // ../web/dist/cjs/hooks/useMedia.native.js
 var require_useMedia_native = __commonJS({
   "../web/dist/cjs/hooks/useMedia.native.js"(exports2, module2) {
@@ -3060,7 +3116,7 @@ var require_useMedia_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants = require_index_native3(), import_react3 = require("react"), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native();
+    var import_constants = require_index_native3(), import_react3 = require("react"), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_native();
     function _array_like_to_array(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -3198,7 +3254,7 @@ var require_useMedia_native = __commonJS({
         }), update();
       };
       if (!(import_constants.isWeb && import_constants.isServer) && setupVersion !== mediaVersion) {
-        setupVersion = mediaVersion, unlisten();
+        setupVersion = mediaVersion, process.env.NODE_ENV === "development" && unlisten();
         for (var key in mediaQueryConfig2) _loop(key);
       }
     }
@@ -3210,45 +3266,41 @@ var require_useMedia_native = __commonJS({
         });
       }));
     }
-    var shouldUpdate = /* @__PURE__ */ new WeakMap();
+    var States = /* @__PURE__ */ new WeakMap();
     function setMediaShouldUpdate(ref, props) {
-      return shouldUpdate.set(ref, props);
-    }
-    function subscribe(subscriber) {
-      return listeners.add(subscriber), function() {
-        return listeners.delete(subscriber);
-      };
+      return States.set(ref, _object_spread2({}, States.get(ref), props));
     }
-    function useLayoutExternalStore(subscriber, getSnapshot, getServerSnapshot) {
-      var _useState = _sliced_to_array((0, import_react3.useState)(getServerSnapshot), 2), state = _useState[0], setState = _useState[1];
+    function getSnapshot(param) {
+      var touched = param.touched, prev = param.prev, enabled = param.enabled, keys = param.keys, isDisabled = enabled === !1;
+      if (isDisabled) return prev;
+      var testKeys = keys || touched ? _to_consumable_array(keys || []).concat(_to_consumable_array(touched || [])) : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
+        return mediaState2[key] === prev[key];
+      }));
+      return hasntUpdated ? prev : mediaState2;
+    }
+    function useMedia2(uidIn, componentContext) {
+      var uid = uidIn ?? (0, import_react3.useRef)(), hasHydrated = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), isHydrated = !import_constants.isWeb || (0, import_useDisableSSR.getDisableSSR)(componentContext) || hasHydrated, initialState = isHydrated ? mediaState2 : initState, componentState = States.get(uid);
+      componentState || (componentState = {
+        prev: initialState
+      }, States.set(uid, componentState)), componentState.touched = void 0;
+      var _useState = _sliced_to_array((0, import_react3.useState)(initialState), 2), state = _useState[0], setState = _useState[1];
       return (0, import_constants.useIsomorphicLayoutEffect)(function() {
-        return subscriber(function() {
+        var update = function() {
           setState(function(prev) {
-            var next = getSnapshot();
-            return next !== prev ? next : prev;
+            var componentState2 = States.get(uid), next = getSnapshot(componentState2);
+            return next !== prev ? (componentState2.prev = next, next) : prev;
           });
-        });
-      }, []), state;
-    }
-    function useMedia2(uid, componentContext) {
-      var internal = (0, import_react3.useRef)(), disableSSR = (0, import_useDisableSSR.getDisableSSR)(componentContext), initialState = (disableSSR || !import_constants.isWeb ? mediaState2 : initState) || {}, state = useLayoutExternalStore(subscribe, function() {
-        if (!internal.current) return initialState;
-        var _internal_current = internal.current, touched = _internal_current.touched, prev = _internal_current.prev, componentState = uid ? shouldUpdate.get(uid) : void 0;
-        if (componentState && componentState.enabled === !1) return prev;
-        var _componentState_keys, testKeys = (_componentState_keys = componentState == null ? void 0 : componentState.keys) !== null && _componentState_keys !== void 0 ? _componentState_keys : (!componentState || componentState.enabled) && touched ? _to_consumable_array(touched) : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
-          return mediaState2[key] === prev[key];
-        }));
-        return hasntUpdated ? prev : (internal.current.prev = mediaState2, mediaState2);
-      }, function() {
-        return initialState;
-      });
-      return new Proxy(state, {
+        };
+        return Promise.resolve().then(update), listeners.add(update), function() {
+          listeners.delete(update);
+        };
+      }, [
+        uid
+      ]), new Proxy(state, {
         get: function(_, key) {
           if (typeof key == "string") {
-            var _internal, _internal_current;
-            (_internal = internal).current || (_internal.current = {
-              prev: initialState
-            }), (_internal_current = internal.current).touched || (_internal_current.touched = /* @__PURE__ */ new Set()), internal.current.touched.add(key);
+            var _componentState;
+            (_componentState = componentState).touched || (_componentState.touched = /* @__PURE__ */ new Set()), componentState.touched.add(key);
           }
           return Reflect.get(state, key);
         }
@@ -8754,7 +8806,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native();
+    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_native();
     function _array_like_to_array(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -9082,7 +9134,14 @@ var require_createComponent_native = __commonJS({
       willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
       var presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationDriver == null ? void 0 : animationDriver.isReactNative);
       process.env.NODE_ENV === "development" && time && time(_templateObject());
-      var hasEnterState = hasEnterStyle || isEntering, initialState = hasEnterState || hasRNAnimation ? import_constants.isWeb ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
+      var hasEnterState = hasEnterStyle || isEntering, didHydrateOnce = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), initialState = hasEnterState || !didHydrateOnce && hasRNAnimation ? (
+        // on the very first render we switch all spring animation drivers to css rendering
+        // this is because we need to use css variables, which they don't support to do proper SSR
+        // without flickers of the wrong colors.
+        // but once we do that initial hydration and we are in client side rendering mode,
+        // we can avoid the extra re-render on mount
+        import_constants.isWeb && !didHydrateOnce ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter
+      ) : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
       disabled != null && (initialState.disabled = disabled);
       var states = (0, import_react3.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread2({}, states[0]), _define_property2({}, props.forceStyle, !0)) : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
       import_constants.isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), setState(_object_spread2({}, state)));
@@ -9352,7 +9411,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         };
         (0, import_react3.useEffect)(function() {
           if (!disabled) {
-            if (state.unmounted === !0) {
+            if (state.unmounted === !0 && hasEnterStyle) {
               setStateShallow({
                 unmounted: "should-enter"
               });
@@ -12373,7 +12432,7 @@ var require_TamaguiProvider_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(TamaguiProvider_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_constants = require_index_native3(), React = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native();
+    var import_jsx_runtime = require("react/jsx-runtime"), import_constants = require_index_native3(), React = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_native();
     function _define_property2(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -12429,7 +12488,7 @@ var require_TamaguiProvider_native = __commonJS({
         "disableInjectCSS",
         "config"
       ]);
-      (0, import_useMedia.setupMediaListeners)(), import_constants.isClient && React.useInsertionEffect(function() {
+      (0, import_useMedia.setupMediaListeners)(), import_constants.isClient && ((0, import_useDidHydrateOnce.useDidHydrateOnceRoot)(), React.useInsertionEffect(function() {
         if (config && (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS)) {
           var style = document.createElement("style");
           return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), function() {
@@ -12439,7 +12498,7 @@ var require_TamaguiProvider_native = __commonJS({
       }, [
         config,
         disableInjectCSS
-      ]);
+      ]));
       var _themePropsProvider_defaultTheme;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
         animationDriver: config == null ? void 0 : config.animations,