tamagui 1.84.0 → 1.84.2

package/dist/native.js

@@ -3928,10 +3928,10 @@ var require_ThemeManagerContext_native = __commonJS({
       return to;
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManagerContext_exports = {};
     __export2(ThemeManagerContext_exports, {
-      ThemeManagerContext: () => ThemeManagerContext
+      ThemeManagerIDContext: () => ThemeManagerIDContext
     });
     module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react2 = require("react"), ThemeManagerContext = (0, import_react2.createContext)(null);
+    var import_react2 = require("react"), ThemeManagerIDContext = (0, import_react2.createContext)(1);
   }
 });
 
@@ -3960,7 +3960,7 @@ var require_ThemeManager_native = __commonJS({
     }
     var uid = 0, ThemeManager = class {
       constructor(props = {}, parentManager) {
-        if (this.props = props, this.id = uid++, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, parentManager === "root") {
+        if (this.props = props, this.id = 0, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, uid = (uid + 1) % Number.MAX_VALUE, this.id = uid, parentManager === "root") {
           this.updateStateFromProps(props, !1);
           return;
         }
@@ -4103,6 +4103,7 @@ var require_useTheme_native = __commonJS({
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useTheme_exports = {};
     __export2(useTheme_exports, {
       activeThemeManagers: () => activeThemeManagers,
+      getThemeManager: () => getThemeManager,
       getThemeProxied: () => getThemeProxied,
       useChangeThemeEffect: () => useChangeThemeEffect,
       useTheme: () => useTheme4,
@@ -4133,13 +4134,13 @@ var require_useTheme_native = __commonJS({
           }), next;
         }
       ), { themeManager, state } = changedThemeState;
-      state != null && state.theme || process.env.NODE_ENV === "development" && process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(
+      process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(
         `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
           props
         )}).
 
 If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
-      );
+      ));
       let themeProxied = (0, import_react2.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
       return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
     };
@@ -4217,8 +4218,13 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       }
       return !1;
     }
-    var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-      let { disable } = props, parentManager = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerContext);
+    var activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PURE__ */ new WeakMap(), _idToUID = {}, getId = (id) => _idToUID[id], getThemeManager = (id) => _uidToManager.get(getId(id)), registerThemeManager = (t) => {
+      if (!_idToUID[t.id]) {
+        let id = _idToUID[t.id] = {};
+        _uidToManager.set(id, t);
+      }
+    }, useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
+      let { disable } = props, parentManagerId = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerIDContext), parentManager = getThemeManager(parentManagerId);
       if (!isRoot && !parentManager || disable)
         return {
           isNewTheme: !1,
@@ -4244,7 +4250,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
           }));
           return;
         }
-        isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(themeManager)) && setThemeState(createState);
+        (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
         let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
           forced && setThemeState((prev) => createState(prev, !0));
         }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
@@ -4255,7 +4261,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
           themeManager.id
         );
         return () => {
-          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), activeThemeManagers.delete(themeManager);
+          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), isNewTheme && activeThemeManagers.delete(themeManager);
         };
       }, [
         themeManager,
@@ -4303,14 +4309,16 @@ If this is intended and you are using Tamagui without any themes, you can disabl
           } else
             themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
         }
-        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
+        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
+        isNewTheme2 && registerThemeManager(themeManager2);
+        let mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
         state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
         let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed != null ? !1 : null, response = {
           themeManager: themeManager2,
           isNewTheme: isNewTheme2,
           mounted: mounted2,
           inversed: inversed2
-        }, shouldReturnPrev = !force && prev && // isEqualShallow uses the second arg as the keys so this should compare without state first...
+        }, shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
         (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
         (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
         if (prev && shouldReturnPrev)
@@ -4406,7 +4414,7 @@ var require_Theme_native = __commonJS({
     function getThemedChildren(themeState, children, props, isRoot = !1) {
       let { themeManager, isNewTheme } = themeState;
       if (!themeManager)
-        throw "\u274C";
+        throw new Error(process.env.NODE_ENV === "development" ? "\u274C No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes." : "\u274C");
       let { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
       if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
         return children;
@@ -4416,7 +4424,7 @@ var require_Theme_native = __commonJS({
         void 0,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Theme2, { name: themeManager.state.parentName, children: child.props.children })
       ) : child));
-      let elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next });
+      let elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerIDContext.Provider, { value: themeManager.id, children: next });
       return forceClassName === !1 ? elementsWithContext : import_constants4.isWeb ? wrapThemeElements({
         children: elementsWithContext,
         themeState,
@@ -4949,7 +4957,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
         let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
         asChild === "except-style" || asChild === "except-style-web" || (viewProps.style = style);
-        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants4.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants4.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
         process.env.NODE_ENV === "development" && time && time`events-setup`;
         let events = shouldAttach && !isDisabled && !props.asChild ? {
           onPressOut: attachPress ? (e) => {
@@ -6100,9 +6108,9 @@ var require_useThemeName_native = __commonJS({
       useThemeName: () => useThemeName2
     });
     module2.exports = __toCommonJS2(useThemeName_exports);
-    var import_constants4 = require_index_native(), import_react2 = require("react"), import_ThemeManagerContext = require_ThemeManagerContext_native();
+    var import_constants4 = require_index_native(), import_react2 = require("react"), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native();
     function useThemeName2(opts) {
-      let manager = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerContext), [name, setName] = (0, import_react2.useState)((manager == null ? void 0 : manager.state.name) || "");
+      let manager = (0, import_useTheme.getThemeManager)((0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerIDContext)), [name, setName] = (0, import_react2.useState)((manager == null ? void 0 : manager.state.name) || "");
       return (0, import_constants4.useIsomorphicLayoutEffect)(() => {
         if (manager)
           return setName(manager.state.name), manager.onChangeTheme((next, manager2) => {
@@ -11191,7 +11199,7 @@ var require_Dialog_native = __commonJS({
       }
     ), TITLE_NAME = "DialogTitle", DialogTitleFrame = (0, import_core13.styled)(import_text2.H2, {
       name: TITLE_NAME
-    }), DialogTitle = React2.forwardRef(
+    }), DialogTitle = DialogTitleFrame.styleable(
       (props, forwardedRef) => {
         let { __scopeDialog, ...titleProps } = props, context = useDialogContext(TITLE_NAME, __scopeDialog);
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
@@ -11200,17 +11208,19 @@ var require_Dialog_native = __commonJS({
     DialogTitle.displayName = TITLE_NAME;
     var DialogDescriptionFrame = (0, import_core13.styled)(import_text2.Paragraph, {
       name: "DialogDescription"
-    }), DESCRIPTION_NAME = "DialogDescription", DialogDescription = React2.forwardRef((props, forwardedRef) => {
-      let { __scopeDialog, ...descriptionProps } = props, context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        DialogDescriptionFrame,
-        {
-          id: context.descriptionId,
-          ...descriptionProps,
-          ref: forwardedRef
-        }
-      );
-    });
+    }), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(
+      (props, forwardedRef) => {
+        let { __scopeDialog, ...descriptionProps } = props, context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          DialogDescriptionFrame,
+          {
+            id: context.descriptionId,
+            ...descriptionProps,
+            ref: forwardedRef
+          }
+        );
+      }
+    );
     DialogDescription.displayName = DESCRIPTION_NAME;
     var CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core13.styled)(import_core13.View, {
       name: CLOSE_NAME,