@tamagui/core 1.129.4 → 1.129.5-1751184593158

package/dist/native.js

@@ -2091,7 +2091,7 @@ var require_useMedia_native = __commonJS({
       };
     }
     function useMedia2(cc, debug) {
-      var componentState = cc ? States.get(cc) : null, internalRef = (0, import_react3.useRef)();
+      var componentState = cc ? States.get(cc) : null, internalRef = (0, import_react3.useRef)(null);
       internalRef.current || (internalRef.current = {
         keys: /* @__PURE__ */ new Set()
       });
@@ -5580,7 +5580,7 @@ var require_getSplitStyles_native = __commonJS({
       conf = conf || (0, import_config.getConfig)();
       var animationDriver = (componentContext == null ? void 0 : componentContext.animationDriver) || conf.animations;
       import_constants2.isWeb && styleProps.isAnimated && animationDriver.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
+      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass && !styleProps.isAnimated, rulesToInsert = void 0, classNames = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
       process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
       var styleState = {
         classNames,
@@ -5687,7 +5687,7 @@ var require_getSplitStyles_native = __commonJS({
         var style2 = styleState.style;
         if (0) {
           var _staticConfig_defaultProps, fontFamily, fontFamilyClassName, groupClassName, componentNameFinal, componentClassName, classList, finalClassName;
-          if (!(styleProps.isAnimated && !animationDriver.supportsCSSVars && isReactNative) && isReactNative) {
+          if (!styleProps.isAnimated && isReactNative) {
             var cnStyles, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1;
             try {
               for (var _iterator1, _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) var name;
@@ -5769,7 +5769,6 @@ var require_getSplitStyles_native = __commonJS({
       return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
     }, useInsertEffectCompat = import_constants2.isWeb ? import_react3.default.useInsertionEffect || import_constants2.useIsomorphicLayoutEffect : function() {
     }, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j, k) {
-      conf = conf || (0, import_config.getConfig)();
       var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k);
       return res;
     };
@@ -5957,9 +5956,9 @@ var require_setElementProps_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/createShallowSetState.native.js
-var require_createShallowSetState_native = __commonJS({
-  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/useCreateShallowSetState.native.js
+var require_useCreateShallowSetState_native = __commonJS({
+  "../web/dist/cjs/helpers/useCreateShallowSetState.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, {
@@ -5993,43 +5992,31 @@ var require_createShallowSetState_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, createShallowSetState_exports = {};
-    __export2(createShallowSetState_exports, {
-      createShallowSetState: function() {
-        return createShallowSetState;
-      },
+    }, useCreateShallowSetState_exports = {};
+    __export2(useCreateShallowSetState_exports, {
       isEqualShallow: function() {
         return isEqualShallow2;
       },
       mergeIfNotShallowEqual: function() {
         return mergeIfNotShallowEqual;
+      },
+      useCreateShallowSetState: function() {
+        return useCreateShallowSetState;
       }
     });
-    module2.exports = __toCommonJS2(createShallowSetState_exports);
-    var import_react3 = require("react"), callImmediate = function(cb) {
-      return cb();
-    };
-    function createShallowSetState(setter, onlyAllow, transition, debugIn) {
+    module2.exports = __toCommonJS2(useCreateShallowSetState_exports);
+    var import_react3 = require("react");
+    function useCreateShallowSetState(setter, debugIn) {
       return (0, import_react3.useCallback)(function(next) {
-        var wrap = transition ? import_react3.startTransition : callImmediate;
-        wrap(function() {
-          setter(function(prev) {
-            return mergeIfNotShallowEqual(prev, next, onlyAllow, debugIn);
-          });
+        setter(function(prev) {
+          return mergeIfNotShallowEqual(prev, next, debugIn);
         });
       }, [
         setter,
-        onlyAllow ? onlyAllow.join("") : "",
-        transition,
         debugIn
       ]);
     }
-    function mergeIfNotShallowEqual(prev, next, onlyAllow, debug) {
-      if (onlyAllow) {
-        var allowed = {};
-        for (var key in next) onlyAllow.includes(key) && (allowed[key] = next[key]);
-        next = allowed;
-      }
+    function mergeIfNotShallowEqual(prev, next, debug) {
       if (!prev || !next || isEqualShallow2(prev, next)) return prev || next;
       if (process.env.NODE_ENV === "development" && debug && (console.info("setStateShallow CHANGE", {
         prev,
@@ -6090,7 +6077,7 @@ var require_subscribeToContextGroup_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(subscribeToContextGroup_exports);
-    var import_useMedia = require_useMedia_native(), import_createShallowSetState = require_createShallowSetState_native(), subscribeToContextGroup = function(param) {
+    var import_useMedia = require_useMedia_native(), import_useCreateShallowSetState = require_useCreateShallowSetState_native(), subscribeToContextGroup = function(param) {
       var { setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
       if (pseudoGroups || mediaGroups) {
         var _componentContext_groups_subscribe, _componentContext_groups;
@@ -6101,7 +6088,7 @@ var require_subscribeToContextGroup_native = __commonJS({
           };
           if (pseudo && pseudoGroups != null && pseudoGroups.has(String(name))) Object.assign(current.pseudo, pseudo), persist();
           else if (layout && mediaGroups) {
-            var mediaState2 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
+            var mediaState2 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_useCreateShallowSetState.mergeIfNotShallowEqual)(current.media || {}, mediaState2);
             next !== current.media && (Object.assign(current.media, next), persist());
           }
           function persist() {
@@ -7050,10 +7037,15 @@ var require_index_native6 = __commonJS({
       },
       useDidFinishSSR: function() {
         return useDidFinishSSR;
+      },
+      useIsClientOnly: function() {
+        return useIsClientOnly;
       }
     });
     module2.exports = __toCommonJS2(index_exports2);
-    var React3 = __toESM2(require("react")), import_ClientOnly = require_ClientOnly_native(), import_ClientOnly2 = require_ClientOnly_native();
+    var React3 = __toESM2(require("react")), import_ClientOnly = require_ClientOnly_native(), import_ClientOnly2 = require_ClientOnly_native(), useIsClientOnly = function() {
+      return React3.useContext(import_ClientOnly.ClientOnlyContext);
+    };
     function useDidFinishSSR(value) {
       var clientOnly = React3.useContext(import_ClientOnly.ClientOnlyContext);
       return value ?? !0;
@@ -7108,10 +7100,12 @@ var require_useComponentState_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useComponentState_exports);
-    var import_constants2 = require_index_native2(), import_use_did_finish_ssr = require_index_native6(), import_react3 = require("react"), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), useComponentState = function(props, param, staticConfig, config) {
-      var { animationDriver } = param, _animationDriver_usePresence, isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), [startedUnhydrated] = (0, import_react3.useState)(import_constants2.IS_REACT_19 ? !isHydrated : !1), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react3.useRef)(void 0);
+    var import_constants2 = require_index_native2(), import_use_did_finish_ssr = require_index_native6(), import_react3 = require("react"), import_defaultComponentState = require_defaultComponentState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), import_useCreateShallowSetState = require_useCreateShallowSetState_native(), useComponentState = function(props, param, staticConfig, config) {
+      var { animationDriver } = param, _animationDriver_usePresence, isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), needsHydration = !(0, import_use_did_finish_ssr.useIsClientOnly)(), [startedUnhydrated] = (0, import_react3.useState)(import_constants2.IS_REACT_19 ? !isHydrated : !1), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react3.useRef)(void 0);
       stateRef.current || (stateRef.current = {});
-      var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
+      var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current;
+      !needsHydration && hasAnimationProp && (curStateRef.hasAnimated = !0);
+      var willBeAnimatedClient = function() {
         var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
         return !!(next || curStateRef.hasAnimated);
       }(), willBeAnimated = !import_constants2.isServer && willBeAnimatedClient;
@@ -7131,16 +7125,12 @@ var require_useComponentState_native = __commonJS({
         ...states[0],
         [props.forceStyle]: !0
       } : states[0], setState = states[1], isAnimated = willBeAnimated;
-      import_constants2.isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), state.disabled = disabled, setState({
-        ...state
+      import_constants2.isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), state.disabled = disabled, setState(function(_) {
+        return {
+          ...state
+        };
       }));
-      var groupName = props.group, setStateShallow = (0, import_createShallowSetState.createShallowSetState)(
-        setState,
-        void 0,
-        // note: allows all state updates even when disabled for the enterStyle animation to work
-        !1,
-        props.debug
-      );
+      var groupName = props.group, setStateShallow = (0, import_useCreateShallowSetState.useCreateShallowSetState)(setState, props.debug);
       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;
@@ -7148,7 +7138,7 @@ var require_useComponentState_native = __commonJS({
         var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
         state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
       }
-      var noClass = !import_constants2.isWeb || !!props.forceStyle;
+      var noClass = !import_constants2.isWeb || !!props.forceStyle || isAnimated && (animationDriver == null ? void 0 : animationDriver.needsWebStyles);
       if (import_constants2.isWeb && (!import_constants2.isServer || isHydrated)) {
         var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
         (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
@@ -7177,6 +7167,26 @@ var require_useComponentState_native = __commonJS({
           }
         };
       }
+      if (!curStateRef.stateEmitter && hasAnimationProp) {
+        var listeners1 = /* @__PURE__ */ new Set();
+        curStateRef.stateEmitter = {
+          listeners: listeners1,
+          emit(state2) {
+            listeners1.forEach(function(l) {
+              return l(state2);
+            });
+          },
+          subscribe(cb) {
+            return listeners1.add(cb), setStateShallow({
+              hasDynGroupChildren: !0
+            }), function() {
+              listeners1.delete(cb), listeners1.size === 0 && setStateShallow({
+                hasDynGroupChildren: !1
+              });
+            };
+          }
+        };
+      }
       return {
         startedUnhydrated,
         curStateRef,
@@ -7540,10 +7550,14 @@ var require_createComponent_native = __commonJS({
         }, [
           componentName2
         ]);
-        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, setStateShallow, noClass, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config);
+        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config), { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState, setStateShallow = componentState.setStateShallow;
         process.env.NODE_ENV === "development" && time2 && time2`use-state`;
         var hasTextAncestor = !!(import_constants2.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants2.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
-        animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
+        animationDriver && isAnimated && // this should really be behind another prop as it's not really related to
+        // "needsWebStyles" basically with motion we just animate a plain div, but
+        // we still have animated.View/Text for Sheet which wants to control
+        // things declaratively
+        !animationDriver.needsWebStyles && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
         var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
         process.env.NODE_ENV === "development" && time2 && time2`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
         var themeStateProps = {
@@ -7597,10 +7611,30 @@ var require_createComponent_native = __commonJS({
           isExiting,
           isAnimated,
           willBeAnimated,
-          styledContextProps
+          styledContextProps,
+          noMergeStyle: isAnimated && (animationDriver == null ? void 0 : animationDriver.needsWebStyles)
         }, themeName = (themeState == null ? void 0 : themeState.name) || "";
         process.env.NODE_ENV === "development" && time2 && time2`split-styles-prepare`;
         var splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
+        if (hasAnimationProp && animationDriver != null && animationDriver.avoidReRenders) {
+          var styleListener = stateRef.current.useStyleListener, ogSetStateShallow = setStateShallow;
+          setStateShallow = function(next) {
+            var avoidReRenderKeys = /* @__PURE__ */ new Set([
+              "hover",
+              "press",
+              "pressIn"
+            ]), canAvoidReRender = Object.keys(next).every(function(key3) {
+              return avoidReRenderKeys.has(key3);
+            });
+            if (canAvoidReRender) {
+              var updatedState = {
+                ...state,
+                ...next
+              }, nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
+              styleListener(nextStyles.style);
+            } else ogSetStateShallow(next);
+          };
+        }
         if (process.env.NODE_ENV === "development" && time2 && time2`split-styles`, props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
           var _splitStyles;
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
@@ -7639,10 +7673,15 @@ var require_createComponent_native = __commonJS({
           (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
         );
         if (shouldUseAnimation) {
-          var animations = useAnimations({
+          var useStyleEmitter = animationDriver != null && animationDriver.avoidReRenders ? function(listener) {
+            stateRef.current.useStyleListener = listener;
+          } : void 0, animations = useAnimations({
             props: propsWithAnimation,
             // if hydrating, send empty style
             style: splitStylesStyle || {},
+            // @ts-ignore
+            styleState: splitStyles,
+            useStyleEmitter,
             presence,
             componentState: state,
             styleProps,
@@ -10697,7 +10736,7 @@ var require_index_native8 = __commonJS({
     __reExport2(index_exports2, require_withStableStyle_native(), module2.exports);
     __reExport2(index_exports2, require_createMediaStyle_native(), module2.exports);
     __reExport2(index_exports2, require_getShorthandValue_native(), module2.exports);
-    __reExport2(index_exports2, require_createShallowSetState_native(), module2.exports);
+    __reExport2(index_exports2, require_useCreateShallowSetState_native(), module2.exports);
     __reExport2(index_exports2, require_createStyledContext_native(), module2.exports);
     __reExport2(index_exports2, require_expandStyles_native(), module2.exports);
     __reExport2(index_exports2, require_getExpandedShorthands_native(), module2.exports);