tamagui 1.100.1 → 1.100.3

package/dist/native.js

@@ -3056,6 +3056,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_react4 = 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) {
@@ -3142,7 +3198,7 @@ var require_useMedia_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants4 = require_index_native6(), import_react4 = require("react"), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native();
+    var import_constants4 = require_index_native6(), import_react4 = 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_array2(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];
@@ -3280,7 +3336,7 @@ var require_useMedia_native = __commonJS({
         }), update();
       };
       if (!(import_constants4.isWeb && import_constants4.isServer) && setupVersion !== mediaVersion) {
-        setupVersion = mediaVersion, unlisten();
+        setupVersion = mediaVersion, process.env.NODE_ENV === "development" && unlisten();
         for (var key in mediaQueryConfig3) _loop(key);
       }
     }
@@ -3292,45 +3348,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);
+      return States.set(ref, _object_spread9({}, States.get(ref), props));
     }
-    function subscribe(subscriber) {
-      return listeners.add(subscriber), function() {
-        return listeners.delete(subscriber);
-      };
-    }
-    function useLayoutExternalStore(subscriber, getSnapshot, getServerSnapshot) {
-      var _useState = _sliced_to_array((0, import_react4.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_array2(keys || []).concat(_to_consumable_array2(touched || [])) : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
+        return mediaState3[key] === prev[key];
+      }));
+      return hasntUpdated ? prev : mediaState3;
+    }
+    function useMedia3(uidIn, componentContext) {
+      var uid = uidIn ?? (0, import_react4.useRef)(), hasHydrated = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), isHydrated = !import_constants4.isWeb || (0, import_useDisableSSR.getDisableSSR)(componentContext) || hasHydrated, initialState = isHydrated ? mediaState3 : initState, componentState = States.get(uid);
+      componentState || (componentState = {
+        prev: initialState
+      }, States.set(uid, componentState)), componentState.touched = void 0;
+      var _useState = _sliced_to_array((0, import_react4.useState)(initialState), 2), state = _useState[0], setState = _useState[1];
       return (0, import_constants4.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 useMedia3(uid, componentContext) {
-      var internal = (0, import_react4.useRef)(), disableSSR = (0, import_useDisableSSR.getDisableSSR)(componentContext), initialState = (disableSSR || !import_constants4.isWeb ? mediaState3 : 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_array2(touched) : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
-          return mediaState3[key] === prev[key];
-        }));
-        return hasntUpdated ? prev : (internal.current.prev = mediaState3, mediaState3);
-      }, 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);
         }
@@ -8836,7 +8888,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native10(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_react4 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = 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_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native10(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_react4 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = 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_array2(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];
@@ -9164,7 +9216,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_constants4.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_constants4.isWeb && !didHydrateOnce ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter
+      ) : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
       disabled != null && (initialState.disabled = disabled);
       var states = (0, import_react4.useState)(initialState), state = props.forceStyle ? _object_spread_props8(_object_spread9({}, states[0]), _define_property9({}, props.forceStyle, !0)) : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
       import_constants4.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_spread9({}, state)));
@@ -9434,7 +9493,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         };
         (0, import_react4.useEffect)(function() {
           if (!disabled) {
-            if (state.unmounted === !0) {
+            if (state.unmounted === !0 && hasEnterStyle) {
               setStateShallow({
                 unmounted: "should-enter"
               });
@@ -12455,7 +12514,7 @@ var require_TamaguiProvider_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(TamaguiProvider_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), React2 = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native();
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), React2 = __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_property9(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -12511,7 +12570,7 @@ var require_TamaguiProvider_native = __commonJS({
         "disableInjectCSS",
         "config"
       ]);
-      (0, import_useMedia.setupMediaListeners)(), import_constants4.isClient && React2.useInsertionEffect(function() {
+      (0, import_useMedia.setupMediaListeners)(), import_constants4.isClient && ((0, import_useDidHydrateOnce.useDidHydrateOnceRoot)(), React2.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() {
@@ -12521,7 +12580,7 @@ var require_TamaguiProvider_native = __commonJS({
       }, [
         config,
         disableInjectCSS
-      ]);
+      ]));
       var _themePropsProvider_defaultTheme;
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, {
         animationDriver: config == null ? void 0 : config.animations,
@@ -28964,24 +29023,7 @@ var require_floating_ui_react_native = __commonJS({
         }
       }), n.default = e, Object.freeze(n);
     }
-    var React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React2), arrow2 = function(options) {
-      var isRef = function(value) {
-        return {}.hasOwnProperty.call(value, "current");
-      }, element = options.element, padding = options.padding;
-      return {
-        name: "arrow",
-        options,
-        fn: function(args) {
-          return element && isRef(element) ? element.current != null ? core.arrow({
-            element: element.current,
-            padding
-          }).fn(args) : {} : element ? core.arrow({
-            element,
-            padding
-          }).fn(args) : {};
-        }
-      };
-    }, ORIGIN$1 = {
+    var React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React2), ORIGIN$1 = {
       x: 0,
       y: 0
     };
@@ -29217,61 +29259,103 @@ var require_floating_ui_react_native = __commonJS({
         update
       ]);
     }
-    Object.defineProperty(exports2, "autoPlacement", {
-      enumerable: !0,
-      get: function() {
-        return core.autoPlacement;
-      }
-    });
+    var arrow$1 = function(options) {
+      var isRef = function(value) {
+        return {}.hasOwnProperty.call(value, "current");
+      };
+      return {
+        name: "arrow",
+        options,
+        fn: function(state) {
+          var _ref = typeof options == "function" ? options(state) : options, element = _ref.element, padding = _ref.padding;
+          return element && isRef(element) ? element.current != null ? core.arrow({
+            element: element.current,
+            padding
+          }).fn(state) : {} : element ? core.arrow({
+            element,
+            padding
+          }).fn(state) : {};
+        }
+      };
+    }, offset3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.offset(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, shift3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.shift(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, limitShift3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.limitShift(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, flip3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.flip(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, size3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.size(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, autoPlacement3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.autoPlacement(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, hide3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.hide(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, inline3 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, core.inline(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    }, arrow2 = function(options, deps) {
+      return _object_spread_props8(_object_spread9({}, arrow$1(options)), {
+        options: [
+          options,
+          deps
+        ]
+      });
+    };
     Object.defineProperty(exports2, "detectOverflow", {
       enumerable: !0,
       get: function() {
         return core.detectOverflow;
       }
     });
-    Object.defineProperty(exports2, "flip", {
-      enumerable: !0,
-      get: function() {
-        return core.flip;
-      }
-    });
-    Object.defineProperty(exports2, "hide", {
-      enumerable: !0,
-      get: function() {
-        return core.hide;
-      }
-    });
-    Object.defineProperty(exports2, "inline", {
-      enumerable: !0,
-      get: function() {
-        return core.inline;
-      }
-    });
-    Object.defineProperty(exports2, "limitShift", {
-      enumerable: !0,
-      get: function() {
-        return core.limitShift;
-      }
-    });
-    Object.defineProperty(exports2, "offset", {
-      enumerable: !0,
-      get: function() {
-        return core.offset;
-      }
-    });
-    Object.defineProperty(exports2, "shift", {
-      enumerable: !0,
-      get: function() {
-        return core.shift;
-      }
-    });
-    Object.defineProperty(exports2, "size", {
-      enumerable: !0,
-      get: function() {
-        return core.size;
-      }
-    });
     exports2.arrow = arrow2;
+    exports2.autoPlacement = autoPlacement3;
+    exports2.flip = flip3;
+    exports2.hide = hide3;
+    exports2.inline = inline3;
+    exports2.limitShift = limitShift3;
+    exports2.offset = offset3;
+    exports2.shift = shift3;
+    exports2.size = size3;
     exports2.useFloating = useFloating2;
   }
 });