@tamagui/core 1.100.0 → 1.100.2

package/dist/native.js

@@ -2974,6 +2974,70 @@ 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"), didHydrateOnce = !1;
+    function useDidHydrateOnceRoot() {
+      (0, import_react3.useEffect)(function() {
+        var tm = setInterval(function() {
+          Date.now() - last > 32 && (didHydrateOnce = !0, clearInterval(tm));
+        }, 16);
+        return function() {
+          clearInterval(tm);
+        };
+      }, []);
+    }
+    var last = Date.now();
+    function useDidHydrateOnce() {
+      return didHydrateOnce || (last = Date.now()), didHydrateOnce;
+    }
+  }
+});
+
 // ../web/dist/cjs/hooks/useMedia.native.js
 var require_useMedia_native = __commonJS({
   "../web/dist/cjs/hooks/useMedia.native.js"(exports2, module2) {
@@ -3060,7 +3124,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];
@@ -3219,9 +3283,21 @@ var require_useMedia_native = __commonJS({
         return listeners.delete(subscriber);
       };
     }
+    function useLayoutExternalStore(subscriber, getSnapshot, getServerSnapshot) {
+      var hasHydrated = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), _useState = _sliced_to_array((0, import_react3.useState)(hasHydrated ? mediaState2 : getServerSnapshot), 2), state = _useState[0], setState = _useState[1];
+      return (0, import_constants.useIsomorphicLayoutEffect)(function() {
+        var update = function() {
+          setState(function(prev) {
+            var next = getSnapshot();
+            return next !== prev ? next : prev;
+          });
+        };
+        return update(), subscriber(update);
+      }, []), 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 = (0, import_react3.useSyncExternalStore)(subscribe, function() {
-        if (!internal.current) return initialState;
+      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 mediaState2;
         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) {
@@ -8743,7 +8819,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];
@@ -9071,7 +9147,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)));
@@ -9341,7 +9424,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"
               });
@@ -12362,7 +12445,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,
@@ -12418,7 +12501,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() {
@@ -12428,7 +12511,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,