@tamagui/core 1.0.1-beta.136 → 1.0.1-beta.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/dist/cjs/addTheme.js +74 -0
  2. package/dist/cjs/addTheme.js.map +7 -0
  3. package/dist/cjs/contexts/TextAncestorContext.js +44 -0
  4. package/dist/cjs/contexts/TextAncestorContext.js.map +7 -0
  5. package/dist/cjs/contexts/ThemeContext.js +30 -0
  6. package/dist/cjs/contexts/ThemeContext.js.map +7 -0
  7. package/dist/cjs/createComponent.js +10 -17
  8. package/dist/cjs/createComponent.js.map +2 -2
  9. package/dist/cjs/createTamagui.js +18 -118
  10. package/dist/cjs/createTamagui.js.map +2 -2
  11. package/dist/cjs/createTheme.js +2 -5
  12. package/dist/cjs/createTheme.js.map +2 -2
  13. package/dist/cjs/ensureThemeVariable.js +152 -0
  14. package/dist/cjs/ensureThemeVariable.js.map +7 -0
  15. package/dist/cjs/helpers/ThemeManager.js +209 -0
  16. package/dist/cjs/helpers/ThemeManager.js.map +7 -0
  17. package/dist/cjs/helpers/assignNativePropsToWeb.js +1 -0
  18. package/dist/cjs/helpers/assignNativePropsToWeb.js.map +2 -2
  19. package/dist/cjs/helpers/createPropMapper.js +2 -3
  20. package/dist/cjs/helpers/createPropMapper.js.map +2 -2
  21. package/dist/cjs/helpers/createTamaguiProvider.js +3 -1
  22. package/dist/cjs/helpers/createTamaguiProvider.js.map +2 -2
  23. package/dist/cjs/helpers/ensureThemeVariable.js +152 -0
  24. package/dist/cjs/helpers/ensureThemeVariable.js.map +7 -0
  25. package/dist/cjs/helpers/getSplitStyles.js +11 -2
  26. package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
  27. package/dist/cjs/helpers/getThemeCSSRules.js +98 -0
  28. package/dist/cjs/helpers/getThemeCSSRules.js.map +7 -0
  29. package/dist/cjs/helpers/getThemeCSSRules.native.js +31 -0
  30. package/dist/cjs/helpers/getThemeCSSRules.native.js.map +7 -0
  31. package/dist/cjs/helpers/getVariantExtras.js +6 -6
  32. package/dist/cjs/helpers/getVariantExtras.js.map +2 -2
  33. package/dist/cjs/helpers/insertStyleRule.js +6 -1
  34. package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
  35. package/dist/cjs/helpers/mergeProps.js +18 -14
  36. package/dist/cjs/helpers/mergeProps.js.map +2 -2
  37. package/dist/cjs/helpers/themes.js +79 -0
  38. package/dist/cjs/helpers/themes.js.map +7 -0
  39. package/dist/cjs/hooks/useId.js +2 -32
  40. package/dist/cjs/hooks/useId.js.map +2 -2
  41. package/dist/cjs/hooks/useMedia.js +75 -92
  42. package/dist/cjs/hooks/useMedia.js.map +2 -2
  43. package/dist/cjs/hooks/useSafeRef.js +60 -0
  44. package/dist/cjs/hooks/useSafeRef.js.map +7 -0
  45. package/dist/cjs/hooks/useTheme.js +20 -11
  46. package/dist/cjs/hooks/useTheme.js.map +2 -2
  47. package/dist/cjs/index.js +23 -4
  48. package/dist/cjs/index.js.map +2 -2
  49. package/dist/cjs/loadTheme.js +64 -0
  50. package/dist/cjs/loadTheme.js.map +7 -0
  51. package/dist/cjs/types.js.map +1 -1
  52. package/dist/cjs/updateTheme.js +44 -0
  53. package/dist/cjs/updateTheme.js.map +7 -0
  54. package/dist/cjs/vendor/Pressability.js +32 -0
  55. package/dist/cjs/vendor/Pressability.js.map +7 -0
  56. package/dist/cjs/vendor/Pressability.native.js +32 -0
  57. package/dist/cjs/vendor/Pressability.native.js.map +7 -0
  58. package/dist/cjs/views/Slot.js +2 -2
  59. package/dist/cjs/views/Slot.js.map +2 -2
  60. package/dist/cjs/views/Theme.js +1 -1
  61. package/dist/cjs/views/Theme.js.map +2 -2
  62. package/dist/cjs/views/ThemeProvider.js +1 -1
  63. package/dist/cjs/views/ThemeProvider.js.map +1 -1
  64. package/dist/cjs/views/ThemeReset.js +1 -1
  65. package/dist/cjs/views/ThemeReset.js.map +1 -1
  66. package/dist/esm/addTheme.js +50 -0
  67. package/dist/esm/addTheme.js.map +7 -0
  68. package/dist/esm/contexts/TextAncestorContext.js +15 -0
  69. package/dist/esm/contexts/TextAncestorContext.js.map +7 -0
  70. package/dist/esm/contexts/ThemeContext.js +6 -0
  71. package/dist/esm/contexts/ThemeContext.js.map +7 -0
  72. package/dist/esm/createComponent.js +10 -17
  73. package/dist/esm/createComponent.js.map +2 -2
  74. package/dist/esm/createTamagui.js +17 -117
  75. package/dist/esm/createTamagui.js.map +2 -2
  76. package/dist/esm/createTheme.js +1 -3
  77. package/dist/esm/createTheme.js.map +2 -2
  78. package/dist/esm/ensureThemeVariable.js +125 -0
  79. package/dist/esm/ensureThemeVariable.js.map +7 -0
  80. package/dist/esm/helpers/ThemeManager.js +183 -0
  81. package/dist/esm/helpers/ThemeManager.js.map +7 -0
  82. package/dist/esm/helpers/assignNativePropsToWeb.js +1 -0
  83. package/dist/esm/helpers/assignNativePropsToWeb.js.map +2 -2
  84. package/dist/esm/helpers/createPropMapper.js +2 -3
  85. package/dist/esm/helpers/createPropMapper.js.map +2 -2
  86. package/dist/esm/helpers/createTamaguiProvider.js +3 -1
  87. package/dist/esm/helpers/createTamaguiProvider.js.map +2 -2
  88. package/dist/esm/helpers/ensureThemeVariable.js +125 -0
  89. package/dist/esm/helpers/ensureThemeVariable.js.map +7 -0
  90. package/dist/esm/helpers/getSplitStyles.js +11 -2
  91. package/dist/esm/helpers/getSplitStyles.js.map +2 -2
  92. package/dist/esm/helpers/getThemeCSSRules.js +74 -0
  93. package/dist/esm/helpers/getThemeCSSRules.js.map +7 -0
  94. package/dist/esm/helpers/getThemeCSSRules.native.js +7 -0
  95. package/dist/esm/helpers/getThemeCSSRules.native.js.map +7 -0
  96. package/dist/esm/helpers/getVariantExtras.js +6 -6
  97. package/dist/esm/helpers/getVariantExtras.js.map +2 -2
  98. package/dist/esm/helpers/insertStyleRule.js +6 -1
  99. package/dist/esm/helpers/insertStyleRule.js.map +2 -2
  100. package/dist/esm/helpers/mergeProps.js +18 -14
  101. package/dist/esm/helpers/mergeProps.js.map +2 -2
  102. package/dist/esm/helpers/themes.js +54 -0
  103. package/dist/esm/helpers/themes.js.map +7 -0
  104. package/dist/esm/hooks/useId.js +1 -28
  105. package/dist/esm/hooks/useId.js.map +2 -2
  106. package/dist/esm/hooks/useMedia.js +74 -92
  107. package/dist/esm/hooks/useMedia.js.map +2 -2
  108. package/dist/esm/hooks/useSafeRef.js +36 -0
  109. package/dist/esm/hooks/useSafeRef.js.map +7 -0
  110. package/dist/esm/hooks/useTheme.js +23 -11
  111. package/dist/esm/hooks/useTheme.js.map +2 -2
  112. package/dist/esm/index.js +23 -3
  113. package/dist/esm/index.js.map +2 -2
  114. package/dist/esm/loadTheme.js +40 -0
  115. package/dist/esm/loadTheme.js.map +7 -0
  116. package/dist/esm/updateTheme.js +20 -0
  117. package/dist/esm/updateTheme.js.map +7 -0
  118. package/dist/esm/vendor/Pressability.js +7 -0
  119. package/dist/esm/vendor/Pressability.js.map +7 -0
  120. package/dist/esm/vendor/Pressability.native.js +7 -0
  121. package/dist/esm/vendor/Pressability.native.js.map +7 -0
  122. package/dist/esm/views/Slot.js +2 -2
  123. package/dist/esm/views/Slot.js.map +2 -2
  124. package/dist/esm/views/Theme.js +1 -1
  125. package/dist/esm/views/Theme.js.map +1 -1
  126. package/dist/esm/views/ThemeProvider.js +1 -1
  127. package/dist/esm/views/ThemeProvider.js.map +1 -1
  128. package/dist/esm/views/ThemeReset.js +1 -1
  129. package/dist/esm/views/ThemeReset.js.map +1 -1
  130. package/package.json +8 -8
  131. package/types/addTheme.d.ts +11 -0
  132. package/types/{views → contexts}/TextAncestorContext.d.ts +0 -0
  133. package/types/{ThemeContext.d.ts → contexts/ThemeContext.d.ts} +1 -1
  134. package/types/createTheme.d.ts +0 -1
  135. package/types/{ThemeManager.d.ts → helpers/ThemeManager.d.ts} +5 -5
  136. package/types/helpers/getSplitStyles.d.ts +1 -0
  137. package/types/helpers/getThemeCSSRules.d.ts +8 -0
  138. package/types/helpers/getThemeCSSRules.native.d.ts +2 -0
  139. package/types/helpers/mergeProps.d.ts +3 -1
  140. package/types/helpers/themes.d.ts +4 -0
  141. package/types/hooks/useId.d.ts +1 -8
  142. package/types/hooks/useMedia.d.ts +2 -1
  143. package/types/hooks/useSafeRef.d.ts +4 -0
  144. package/types/hooks/useTheme.d.ts +2 -1
  145. package/types/index.d.ts +5 -2
  146. package/types/types.d.ts +2 -2
  147. package/types/updateTheme.d.ts +9 -0
  148. package/types/{Pressability.d.ts → vendor/Pressability.d.ts} +0 -0
  149. package/types/{Pressability.native.d.ts → vendor/Pressability.native.d.ts} +0 -0
  150. package/types/views/Theme.d.ts +1 -1
  151. package/types/defaultComponentState.d.ts +0 -1
  152. package/types/helpers/nativeGestureHandler.native.d.ts +0 -2
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/helpers/themes.ts"],
4
+ "sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\nexport function proxyThemeToParents(\n themeName: string,\n theme: any,\n themes: CreateTamaguiProps['themes']\n) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n const hasParents = parents.length\n\n // proxy fallback values to parent theme values\n return new Proxy(theme, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (!hasParents || Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2C;AAC3C,+BAAkC;AAK3B,6BAA6B,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,CAAC,sCAAW,GAAG,GAAG;AACpB,UAAM,OAAO,0CAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,OAAO,0CAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,6BACL,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,aAAa,QAAQ;AAG3B,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,4CAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,cAAc,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC3C,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AAC5C,cAAM,SAAS,OAAO,QAAQ;AAC9B,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AACA,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
6
+ "names": []
7
+ }
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,41 +15,13 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
21
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
19
  var useId_exports = {};
23
20
  __export(useId_exports, {
24
- useId: () => useId
21
+ useId: () => import_react.useId
25
22
  });
26
23
  module.exports = __toCommonJS(useId_exports);
27
- var React = __toESM(require("react"));
28
- var import_platform = require("../constants/platform");
29
- let serverHandoffComplete = false;
30
- let id = 0;
31
- function genId() {
32
- return ++id;
33
- }
34
- function useId(providedId) {
35
- if (import_platform.isWeb) {
36
- if (typeof React.useId === "function") {
37
- let id3 = React.useId();
38
- return providedId != null ? providedId : id3;
39
- }
40
- }
41
- let initialId = providedId ?? (serverHandoffComplete ? genId() : null);
42
- let [id2, setId] = React.useState(initialId);
43
- (0, import_platform.useIsomorphicLayoutEffect)(() => {
44
- if (id2 === null) {
45
- setId(genId());
46
- }
47
- }, []);
48
- React.useEffect(() => {
49
- if (serverHandoffComplete === false) {
50
- serverHandoffComplete = true;
51
- }
52
- }, []);
53
- return providedId ?? id2 ?? void 0;
54
- }
24
+ var import_react = require("react");
55
25
  // Annotate the CommonJS export names for ESM import in node:
56
26
  0 && (module.exports = {
57
27
  useId
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useId.tsx"],
4
- "sourcesContent": ["/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n * 1. Accessibility APIs rely heavily on element IDs\n * 2. Requiring developers to put IDs on every element in Reach UI is both\n * cumbersome and error-prone\n * 3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\n\nimport * as React from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\n\nlet serverHandoffComplete = false\nlet id = 0\nfunction genId() {\n return ++id\n}\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\nfunction useId(idFromProps: string): string\nfunction useId(idFromProps: number): number\nfunction useId(idFromProps: string | number): string | number\nfunction useId(idFromProps: string | undefined | null): string | undefined\nfunction useId(idFromProps: number | undefined | null): number | undefined\nfunction useId(idFromProps: string | number | undefined | null): string | number | undefined\nfunction useId(): string | undefined\n\nfunction useId(providedId?: number | string | undefined | null) {\n // TODO: Remove error flag when updating internal deps to React 18. None of\n // our tricks will play well with concurrent rendering anyway.\n\n // native doesn't support until next react-native version, need to remove eventually\n if (isWeb) {\n if (typeof React.useId === 'function') {\n let id = React.useId()\n return providedId != null ? providedId : id\n }\n }\n\n // If this instance isn't part of the initial render, we don't have to do the\n // double render/patch-up dance. We can just generate the ID and return it.\n let initialId = providedId ?? (serverHandoffComplete ? genId() : null)\n let [id, setId] = React.useState(initialId)\n\n useIsomorphicLayoutEffect(() => {\n if (id === null) {\n // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n // rendering flicker, though it'll make the first render slower (unlikely\n // to matter, but you're welcome to measure your app and let us know if\n // it's a problem).\n setId(genId())\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n React.useEffect(() => {\n if (serverHandoffComplete === false) {\n // Flag all future uses of `useId` to skip the update dance. This is in\n // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n // accidentally bail out of the patch-up dance prematurely.\n serverHandoffComplete = true\n }\n }, [])\n\n return providedId ?? id ?? undefined\n}\n\nexport { useId }\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDA,YAAuB;AAEvB,sBAAiD;AAEjD,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAuBA,eAAe,YAAiD;AAK9D,MAAI,uBAAO;AACT,QAAI,OAAO,MAAM,UAAU,YAAY;AACrC,UAAI,MAAK,MAAM,MAAM;AACrB,aAAO,cAAc,OAAO,aAAa;AAAA,IAC3C;AAAA,EACF;AAIA,MAAI,YAAY,cAAe,yBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,iDAA0B,MAAM;AAC9B,QAAI,QAAO,MAAM;AAKf,YAAM,MAAM,CAAC;AAAA,IACf;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,QAAI,0BAA0B,OAAO;AAInC,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,cAAc,OAAM;AAC7B;",
4
+ "sourcesContent": ["export { useId } from 'react'\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;",
6
6
  "names": []
7
7
  }
@@ -25,19 +25,20 @@ __export(useMedia_exports, {
25
25
  mediaQueryConfig: () => mediaQueryConfig,
26
26
  mediaState: () => mediaState,
27
27
  removeMediaQueryListener: () => removeMediaQueryListener,
28
- useMedia: () => useMedia
28
+ useMedia: () => useMedia,
29
+ useMediaQueryListeners: () => useMediaQueryListeners
29
30
  });
30
31
  module.exports = __toCommonJS(useMedia_exports);
31
- var import_use_force_update = require("@tamagui/use-force-update");
32
32
  var import_react = require("react");
33
33
  var import_platform = require("../constants/platform");
34
34
  var import_matchMedia = require("../helpers/matchMedia");
35
- var import_useConstant = require("./useConstant");
35
+ var import_useSafeRef = require("./useSafeRef");
36
36
  const mediaState = {};
37
37
  const mediaQueryListeners = {};
38
38
  function addMediaQueryListener(key, cb) {
39
39
  mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
40
40
  mediaQueryListeners[key].add(cb);
41
+ return () => removeMediaQueryListener(key, cb);
41
42
  }
42
43
  function removeMediaQueryListener(key, cb) {
43
44
  var _a;
@@ -48,114 +49,95 @@ const getMedia = () => {
48
49
  return mediaState;
49
50
  };
50
51
  const dispose = /* @__PURE__ */ new Set();
52
+ let initialMediaState;
51
53
  const configureMedia = ({
52
54
  queries,
53
- defaultActive = ["sm", "xs"]
55
+ defaultActive = {}
54
56
  } = {}) => {
55
57
  if (!queries)
56
58
  return;
57
- if (mediaQueryConfig) {
58
- if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
59
- return;
59
+ if (initialMediaState) {
60
+ if (process.env.NODE_ENV === "development") {
61
+ if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
62
+ return;
63
+ }
60
64
  }
61
- dispose.forEach((cb) => cb());
62
- dispose.clear();
65
+ setupMediaListeners();
63
66
  }
64
67
  Object.assign(mediaQueryConfig, queries);
65
68
  for (const key in queries) {
66
- const str = mediaObjectToString(queries[key]);
67
- const propKey = `$${key}`;
68
- try {
69
- let update2 = function() {
70
- const next = !!getMatch().matches;
71
- if (next === mediaState[propKey])
72
- return;
73
- mediaState[propKey] = next;
74
- const listeners = mediaQueryListeners[propKey];
75
- if (listeners == null ? void 0 : listeners.size) {
76
- for (const cb of [...listeners]) {
77
- cb();
78
- }
69
+ mediaState[key] = defaultActive[key] || false;
70
+ }
71
+ initialMediaState = { ...mediaState };
72
+ };
73
+ function unlisten() {
74
+ dispose.forEach((cb) => cb());
75
+ dispose.clear();
76
+ }
77
+ function setupMediaListeners() {
78
+ unlisten();
79
+ for (const key in mediaQueryConfig) {
80
+ let update2 = function() {
81
+ const next = !!getMatch().matches;
82
+ if (next === mediaState[key])
83
+ return;
84
+ mediaState[key] = next;
85
+ const listeners = mediaQueryListeners[key];
86
+ if (listeners == null ? void 0 : listeners.size) {
87
+ for (const cb of [...listeners]) {
88
+ cb();
79
89
  }
80
- };
81
- var update = update2;
82
- const getMatch = () => (0, import_matchMedia.matchMedia)(str);
83
- const match = getMatch();
84
- if (!match || typeof match.addListener !== "function") {
85
- throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
86
90
  }
87
- mediaState[propKey] = !!match.matches;
88
- match.addListener(update2);
89
- dispose.add(() => match.removeListener(update2));
90
- update2();
91
- } catch (err) {
92
- console.error("Error running media query", str, err.message, err.stack);
93
- const isDefaultActive = (defaultActive == null ? void 0 : defaultActive.includes(key)) ?? true;
94
- mediaState[propKey] = isDefaultActive;
91
+ };
92
+ var update = update2;
93
+ const str = mediaObjectToString(mediaQueryConfig[key]);
94
+ const getMatch = () => (0, import_matchMedia.matchMedia)(str);
95
+ const match = getMatch();
96
+ if (!match) {
97
+ throw new Error("\u26A0\uFE0F No match");
95
98
  }
99
+ match.addListener(update2);
100
+ dispose.add(() => match.removeListener(update2));
101
+ update2();
96
102
  }
97
- };
103
+ }
104
+ function useMediaQueryListeners() {
105
+ (0, import_platform.useIsomorphicLayoutEffect)(() => {
106
+ setupMediaListeners();
107
+ return unlisten;
108
+ }, []);
109
+ }
98
110
  function useMedia() {
99
- const forceUpdate = (0, import_use_force_update.useForceUpdate)();
100
- const state = (0, import_react.useRef)();
101
- if (!state.current) {
102
- state.current = {
103
- selections: {},
104
- nextSelections: {},
105
- isUnmounted: false,
106
- isRendering: true
107
- };
111
+ const [state, setState] = (0, import_react.useState)(initialMediaState);
112
+ const keys = (0, import_useSafeRef.useSafeRef)({});
113
+ function updateState() {
114
+ setState((prev) => {
115
+ for (const key in keys.current) {
116
+ if (prev[key] !== mediaState[key]) {
117
+ return { ...mediaState };
118
+ }
119
+ }
120
+ return prev;
121
+ });
108
122
  }
109
- state.current.isRendering = true;
110
123
  (0, import_platform.useIsomorphicLayoutEffect)(() => {
111
- const st = state.current;
112
- st.isRendering = false;
113
- for (const key in st.selections) {
114
- if (!(key in st.nextSelections)) {
115
- removeMediaQueryListener(key, forceUpdate);
116
- }
117
- }
118
- for (const key in st.nextSelections) {
119
- if (!(key in st.selections)) {
120
- addMediaQueryListener(key, forceUpdate);
121
- }
124
+ const listeners = [];
125
+ for (const key in keys.current) {
126
+ listeners.push(addMediaQueryListener(key, updateState));
122
127
  }
123
- });
124
- (0, import_react.useEffect)(() => {
128
+ updateState();
125
129
  return () => {
126
- const st = state.current;
127
- st.isUnmounted = true;
128
- const allKeys = {
129
- ...st.selections,
130
- ...st.nextSelections
131
- };
132
- for (const key in allKeys) {
133
- removeMediaQueryListener(key, forceUpdate);
134
- }
130
+ listeners.forEach((cb) => cb());
135
131
  };
136
- }, []);
137
- return (0, import_useConstant.useConstant)(() => {
138
- const st = state.current;
139
- return new Proxy(mediaState, {
140
- get(target, key) {
141
- if (key[0] !== "$") {
142
- key = `$${key}`;
143
- }
144
- if (!(key in mediaState)) {
145
- return Reflect.get(target, key);
146
- }
147
- if (!st.isUnmounted) {
148
- if (st.isRendering) {
149
- st.nextSelections[key] = true;
150
- }
151
- }
152
- if (key in mediaState) {
153
- return mediaState[key];
154
- }
155
- return Reflect.get(mediaState, key);
156
- }
157
- });
158
132
  });
133
+ return (0, import_react.useMemo)(() => new Proxy(state, {
134
+ get(_, key) {
135
+ if (!keys.current[key]) {
136
+ keys.current = { ...keys.current, [key]: true };
137
+ }
138
+ return Reflect.get(state, key);
139
+ }
140
+ }), [state, keys]);
159
141
  }
160
142
  function camelToHyphen(str) {
161
143
  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
@@ -184,6 +166,7 @@ function mediaObjectToString(query) {
184
166
  mediaQueryConfig,
185
167
  mediaState,
186
168
  removeMediaQueryListener,
187
- useMedia
169
+ useMedia,
170
+ useMediaQueryListeners
188
171
  });
189
172
  //# sourceMappingURL=useMedia.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useMedia.tsx"],
4
- "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useEffect, useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: any) {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: any) {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = ({\n queries,\n defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n if (!queries) return\n // support hot reload\n if (mediaQueryConfig) {\n if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {\n // hmr avoid update\n return\n }\n dispose.forEach((cb) => cb())\n dispose.clear()\n }\n\n Object.assign(mediaQueryConfig, queries)\n\n // setup\n for (const key in queries) {\n const str = mediaObjectToString(queries[key])\n const propKey = `$${key}`\n try {\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match || typeof match.addListener !== 'function') {\n // caught below\n throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n }\n mediaState[propKey] = !!match.matches\n // note this deprecated api works with polyfills we use now\n match.addListener(update)\n dispose.add(() => match.removeListener(update))\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[propKey]) return\n mediaState[propKey] = next\n const listeners = mediaQueryListeners[propKey]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n\n update()\n } catch (err: any) {\n console.error('Error running media query', str, err.message, err.stack)\n const isDefaultActive = defaultActive?.includes(key as any) ?? true\n mediaState[propKey] = isDefaultActive\n }\n }\n}\n\ntype UseMediaState = {\n selections: { [key: string]: boolean }\n nextSelections: { [key: string]: boolean }\n isRendering: boolean\n isUnmounted: boolean\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const forceUpdate = useForceUpdate()\n const state = useRef() as React.MutableRefObject<UseMediaState>\n if (!state.current) {\n state.current = {\n selections: {},\n nextSelections: {},\n isUnmounted: false,\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n // delete old\n for (const key in st.selections) {\n if (!(key in st.nextSelections)) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n // add new\n for (const key in st.nextSelections) {\n if (!(key in st.selections)) {\n addMediaQueryListener(key, forceUpdate)\n }\n }\n })\n\n // unmount\n useEffect(() => {\n return () => {\n const st = state.current\n st.isUnmounted = true\n const allKeys = {\n ...st.selections,\n ...st.nextSelections,\n }\n for (const key in allKeys) {\n removeMediaQueryListener(key, forceUpdate)\n }\n }\n }, [])\n\n return useConstant(() => {\n const st = state.current\n return new Proxy(mediaState, {\n get(target, key: string) {\n if (key[0] !== '$') {\n key = `$${key}`\n }\n if (!(key in mediaState)) {\n return Reflect.get(target, key)\n }\n if (!st.isUnmounted) {\n if (st.isRendering) {\n st.nextSelections[key] = true\n }\n }\n if (key in mediaState) {\n return mediaState[key]\n }\n return Reflect.get(mediaState, key)\n },\n })\n })\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useMemo, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n ConfigureMediaQueryOptions,\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: any) {\n mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n mediaQueryListeners[key].add(cb)\n return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: any) {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\nconst dispose = new Set<Function>()\n\n// for SSR capture it at time of startup\nlet initialMediaState: MediaQueryState | null\n\nexport const configureMedia = ({\n queries,\n defaultActive = {},\n}: ConfigureMediaQueryOptions = {}) => {\n if (!queries) return\n\n // support hot reload\n if (initialMediaState) {\n if (process.env.NODE_ENV === 'development') {\n if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {\n // hmr avoid update\n return\n }\n }\n setupMediaListeners()\n }\n\n Object.assign(mediaQueryConfig, queries)\n // start in the initial state\n for (const key in queries) {\n mediaState[key] = defaultActive[key] || false\n }\n initialMediaState = { ...mediaState }\n}\n\nfunction unlisten() {\n dispose.forEach((cb) => cb())\n dispose.clear()\n}\n\nfunction setupMediaListeners() {\n // hmr, undo existing before re-binding\n unlisten()\n\n for (const key in mediaQueryConfig) {\n const str = mediaObjectToString(mediaQueryConfig[key])\n const getMatch = () => matchMedia(str)\n const match = getMatch()\n if (!match) {\n throw new Error('\u26A0\uFE0F No match')\n }\n // react native needs these deprecated apis for now\n match.addListener(update)\n dispose.add(() => match.removeListener(update))\n update()\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n for (const cb of [...listeners]) {\n cb()\n }\n }\n }\n }\n}\n\nexport function useMediaQueryListeners() {\n useIsomorphicLayoutEffect(() => {\n setupMediaListeners()\n return unlisten\n }, [])\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const [state, setState] = useState(initialMediaState!)\n const keys = useSafeRef({} as Record<string, boolean>)\n\n function updateState() {\n setState((prev) => {\n for (const key in keys.current) {\n if (prev[key] !== mediaState[key]) {\n return { ...mediaState }\n }\n }\n return prev\n })\n }\n\n useIsomorphicLayoutEffect(() => {\n const listeners: Function[] = []\n for (const key in keys.current) {\n listeners.push(addMediaQueryListener(key, updateState))\n }\n updateState()\n return () => {\n listeners.forEach((cb) => cb())\n }\n })\n\n return useMemo(\n () =>\n new Proxy(state, {\n get(_, key: string) {\n if (!keys.current[key]) {\n keys.current = { ...keys.current, [key]: true }\n }\n return Reflect.get(state, key)\n },\n }),\n [state, keys]\n )\n}\n\nfunction camelToHyphen(str: string) {\n return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n if (typeof query === 'string') {\n return query\n }\n return Object.entries(query)\n .map(([feature, value]) => {\n feature = camelToHyphen(feature)\n if (typeof value === 'string') {\n return `(${feature}: ${value})`\n }\n if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n value = `${value}px`\n }\n return `(${feature}: ${value})`\n })\n .join(' and ')\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var useSafeRef_exports = {};
20
+ __export(useSafeRef_exports, {
21
+ useSafeRef: () => useSafeRef
22
+ });
23
+ module.exports = __toCommonJS(useSafeRef_exports);
24
+ var import_react = require("react");
25
+ var import_platform = require("../constants/platform");
26
+ const useSafeRef = (initialValue) => {
27
+ const rawRef = (0, import_react.useRef)();
28
+ const raw = rawRef.current ?? (rawRef.current = {
29
+ isRendering: true,
30
+ comittedValue: initialValue,
31
+ currentValue: initialValue,
32
+ ref: {
33
+ get current() {
34
+ if (raw.isRendering) {
35
+ return raw.currentValue;
36
+ } else {
37
+ return raw.comittedValue;
38
+ }
39
+ },
40
+ set current(v) {
41
+ if (!raw.isRendering) {
42
+ raw.comittedValue = v;
43
+ }
44
+ raw.currentValue = v;
45
+ }
46
+ }
47
+ });
48
+ raw.isRendering = true;
49
+ Promise.resolve().then(() => raw.isRendering = false);
50
+ raw.currentValue = raw.comittedValue;
51
+ (0, import_platform.useIsomorphicLayoutEffect)(() => {
52
+ raw.comittedValue = raw.currentValue;
53
+ });
54
+ return raw.ref;
55
+ };
56
+ // Annotate the CommonJS export names for ESM import in node:
57
+ 0 && (module.exports = {
58
+ useSafeRef
59
+ });
60
+ //# sourceMappingURL=useSafeRef.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/hooks/useSafeRef.ts"],
4
+ "sourcesContent": ["import { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\n\n// dai-shi \uD83D\uDE4F\n// https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325\n\ntype Raw<T> = {\n isRendering: boolean\n comittedValue: T\n currentValue: T\n ref: { current: T }\n}\n\nexport const useSafeRef = <T>(initialValue: T) => {\n const rawRef = useRef<Raw<T>>()\n\n const raw: Raw<T> =\n rawRef.current ??\n (rawRef.current = {\n isRendering: true,\n comittedValue: initialValue,\n currentValue: initialValue,\n ref: {\n get current() {\n if (raw.isRendering) {\n return raw.currentValue\n } else {\n return raw.comittedValue\n }\n },\n set current(v) {\n if (!raw.isRendering) {\n raw.comittedValue = v\n }\n raw.currentValue = v\n },\n },\n })\n\n raw.isRendering = true\n Promise.resolve().then(() => (raw.isRendering = false))\n raw.currentValue = raw.comittedValue\n\n useIsomorphicLayoutEffect(() => {\n raw.comittedValue = raw.currentValue\n })\n\n return raw.ref\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEvB,sBAA0C;AAYnC,MAAM,aAAa,CAAI,iBAAoB;AAChD,QAAM,SAAS,yBAAe;AAE9B,QAAM,MACJ,OAAO,WACN,QAAO,UAAU;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,cAAc;AAAA,IACd,KAAK;AAAA,MACH,IAAI,UAAU;AACZ,YAAI,IAAI,aAAa;AACnB,iBAAO,IAAI;AAAA,QACb,OAAO;AACL,iBAAO,IAAI;AAAA,QACb;AAAA,MACF;AAAA,MACA,IAAI,QAAQ,GAAG;AACb,YAAI,CAAC,IAAI,aAAa;AACpB,cAAI,gBAAgB;AAAA,QACtB;AACA,YAAI,eAAe;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEF,MAAI,cAAc;AAClB,UAAQ,QAAQ,EAAE,KAAK,MAAO,IAAI,cAAc,KAAM;AACtD,MAAI,eAAe,IAAI;AAEvB,iDAA0B,MAAM;AAC9B,QAAI,gBAAgB,IAAI;AAAA,EAC1B,CAAC;AAED,SAAO,IAAI;AACb;",
6
+ "names": []
7
+ }
@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
19
  var useTheme_exports = {};
20
20
  __export(useTheme_exports, {
21
+ activeThemeManagers: () => activeThemeManagers,
21
22
  getThemeManager: () => getThemeManager,
22
23
  useChangeThemeEffect: () => useChangeThemeEffect,
23
24
  useDefaultThemeName: () => useDefaultThemeName,
@@ -29,9 +30,9 @@ var import_use_force_update = require("@tamagui/use-force-update");
29
30
  var import_react = require("react");
30
31
  var import_conf = require("../conf");
31
32
  var import_platform = require("../constants/platform");
33
+ var import_ThemeContext = require("../contexts/ThemeContext");
32
34
  var import_areEqualSets = require("../helpers/areEqualSets");
33
- var import_ThemeContext = require("../ThemeContext");
34
- var import_ThemeManager = require("../ThemeManager");
35
+ var import_ThemeManager = require("../helpers/ThemeManager");
35
36
  var import_getThemeUnwrapped = require("./getThemeUnwrapped");
36
37
  var import_useConstant = require("./useConstant");
37
38
  const useTheme = (themeName, componentName, props, forceUpdate) => {
@@ -58,13 +59,14 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
58
59
  themeManager == null ? void 0 : themeManager.track(st.uuid, st.keys);
59
60
  }
60
61
  });
61
- return (0, import_react.useMemo)(() => {
62
- if (!theme) {
63
- if (process.env.NODE_ENV === "development") {
64
- console.warn("No theme", { themeName, theme, componentName, className });
65
- }
66
- return themes[(0, import_conf.getConfig)().defaultTheme || "light"];
62
+ const debugProp = props && props["debug"];
63
+ if (!theme) {
64
+ if (process.env.NODE_ENV === "development") {
65
+ console.warn("No theme with name", themeName);
67
66
  }
67
+ return themes[(0, import_conf.getConfig)().defaultTheme || "light"];
68
+ }
69
+ return (0, import_react.useMemo)(() => {
68
70
  return new Proxy(theme, {
69
71
  has(_, key) {
70
72
  if (typeof key === "string") {
@@ -99,14 +101,14 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
99
101
  }
100
102
  if (state.current.isRendering && !state.current.keys.has(key)) {
101
103
  state.current.keys.add(key);
102
- if (process.env.NODE_ENV === "development" && (props == null ? void 0 : props["debug"]) === "verbose") {
104
+ if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
103
105
  console.log(" \u{1F538} tracking theme", key);
104
106
  }
105
107
  }
106
108
  return themeManager.getValue(key);
107
109
  }
108
110
  });
109
- }, [name, theme, className]);
111
+ }, [name, theme, componentName, className, debugProp]);
110
112
  };
111
113
  const GetThemeManager = Symbol();
112
114
  const getThemeManager = (theme) => {
@@ -133,6 +135,7 @@ const useDefaultThemeName = () => {
133
135
  var _a;
134
136
  return (_a = (0, import_react.useContext)(import_ThemeContext.ThemeContext)) == null ? void 0 : _a.defaultTheme;
135
137
  };
138
+ const activeThemeManagers = /* @__PURE__ */ new Set();
136
139
  const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
137
140
  const debug = props && props["debug"];
138
141
  const parentManager = (0, import_react.useContext)(import_ThemeManager.ThemeManagerContext) || import_ThemeManager.emptyManager;
@@ -150,10 +153,11 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
150
153
  (0, import_react.useLayoutEffect)(() => {
151
154
  if (!themeManager)
152
155
  return;
156
+ activeThemeManagers.add(themeManager);
153
157
  if (next == null ? void 0 : next.name) {
154
158
  themeManager.update(next);
155
159
  }
156
- return parentManager.onChangeTheme(() => {
160
+ const disposeParentOnChange = parentManager.onChangeTheme(() => {
157
161
  const next2 = parentManager.getNextTheme(getThemeProps, debug);
158
162
  if (!next2)
159
163
  return;
@@ -161,6 +165,10 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
161
165
  forceUpdate();
162
166
  }
163
167
  });
168
+ return () => {
169
+ activeThemeManagers.delete(themeManager);
170
+ disposeParentOnChange();
171
+ };
164
172
  }, [themes, name, componentName, debug, next == null ? void 0 : next.name]);
165
173
  }
166
174
  return {
@@ -175,6 +183,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
175
183
  };
176
184
  // Annotate the CommonJS export names for ESM import in node:
177
185
  0 && (module.exports = {
186
+ activeThemeManagers,
178
187
  getThemeManager,
179
188
  useChangeThemeEffect,
180
189
  useDefaultThemeName,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useTheme.tsx"],
4
- "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n console.log(' \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n }\n }\n\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n return useMemo(() => {\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('No theme', { themeName, theme, componentName, className })\n }\n return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n }\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') {\n key = key.slice(1)\n }\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (key === GetThemeManager) {\n return themeManager\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n return Reflect.get(_, key)\n }\n if (!themeManager) {\n console.error('No themeManager')\n return\n }\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n if (state.current.isRendering && !state.current.keys.has(key)) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development' && props?.['debug'] === 'verbose') {\n console.log(' \uD83D\uDD38 tracking theme', key)\n }\n }\n return themeManager.getValue(key)\n },\n })\n }, [name, theme, className])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n if (!theme) return\n return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent?.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!parent) return\n return parent.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [parent])\n\n return name\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdateProp?: any\n) => {\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const { themes } = useContext(ThemeContext)!\n const reset = props?.reset || false\n const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n const next = parentManager.getNextTheme(getThemeProps, debug)\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forceUpdate = forceUpdateProp || useForceUpdate()\n const themeManager = useConstant<ThemeManager | null>(() => {\n if (!next) return null\n return new ThemeManager(next.name, next.theme, parentManager, reset)\n })\n\n if (!isWeb || typeof document !== 'undefined') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n if (!themeManager) return\n if (next?.name) {\n themeManager.update(next)\n }\n return parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme(getThemeProps, debug)\n if (!next) return\n if (themeManager.update(next)) {\n forceUpdate()\n }\n })\n }, [themes, name, componentName, debug, next?.name])\n }\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n themes,\n themeManager,\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n GetNextThemeProps,\n ThemeManager,\n ThemeManagerContext,\n emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n className?: string\n disableThemeClass?: boolean\n name: Exclude<ThemeName, number> | null\n componentName?: string\n children?: any\n reset?: boolean\n debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n uuid: Object\n keys: Set<string>\n isRendering: boolean\n}\n\nexport const useTheme = (\n themeName?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdate?: any\n): ThemeObject => {\n const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n }\n }\n\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\n useIsomorphicLayoutEffect(() => {\n const st = state.current\n st.isRendering = false\n const cur = themeManager?.keys.get(st.uuid)\n if (!cur || !areEqualSets(st.keys, cur)) {\n themeManager?.track(st.uuid, st.keys)\n }\n })\n\n const debugProp = props && props['debug']\n\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('No theme with name', themeName)\n }\n return themes[getConfig().defaultTheme || 'light']\n }\n\n return useMemo(() => {\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') {\n key = key.slice(1)\n }\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (key === GetThemeUnwrapped) {\n return theme\n }\n if (key === GetThemeManager) {\n return themeManager\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n return Reflect.get(_, key)\n }\n if (!themeManager) {\n console.error('No themeManager')\n return\n }\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n if (state.current.isRendering && !state.current.keys.has(key)) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n console.log(' \uD83D\uDD38 tracking theme', key)\n }\n }\n return themeManager.getValue(key)\n },\n })\n }, [name, theme, componentName, className, debugProp])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n if (!theme) return\n return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n const parent = useContext(ThemeManagerContext)\n const [name, setName] = useState(parent?.name || '')\n\n useIsomorphicLayoutEffect(() => {\n if (!parent) return\n return parent.onChangeTheme((next, manager) => {\n const name = opts?.parent ? manager.parentName || next : next\n if (!name) return\n setName(name)\n })\n }, [parent])\n\n return name\n}\n\nexport const useDefaultThemeName = () => {\n return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: ThemeProps,\n forceUpdateProp?: any\n) => {\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const { themes } = useContext(ThemeContext)!\n const reset = props?.reset || false\n const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n const next = parentManager.getNextTheme(getThemeProps, debug)\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forceUpdate = forceUpdateProp || useForceUpdate()\n\n const themeManager = useConstant<ThemeManager | null>(() => {\n if (!next) return null\n return new ThemeManager(next.name, next.theme, parentManager, reset)\n })\n\n // if not SSR\n if (!isWeb || typeof document !== 'undefined') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n if (!themeManager) return\n\n activeThemeManagers.add(themeManager)\n\n if (next?.name) {\n themeManager.update(next)\n }\n\n const disposeParentOnChange = parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme(getThemeProps, debug)\n if (!next) return\n if (themeManager.update(next)) {\n forceUpdate()\n }\n })\n\n return () => {\n activeThemeManagers.delete(themeManager)\n disposeParentOnChange()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [themes, name, componentName, debug, next?.name])\n }\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n themes,\n themeManager,\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }