@tamagui/core 1.0.1-beta.192 → 1.0.1-beta.194

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 (232) hide show
  1. package/dist/cjs/Tamagui.js +4 -2
  2. package/dist/cjs/Tamagui.js.map +2 -2
  3. package/dist/cjs/config.js +1 -2
  4. package/dist/cjs/config.js.map +2 -2
  5. package/dist/cjs/constants/constants.js +13 -8
  6. package/dist/cjs/constants/constants.js.map +2 -2
  7. package/dist/cjs/contexts/TextAncestorContext.js +3 -16
  8. package/dist/cjs/contexts/TextAncestorContext.js.map +3 -3
  9. package/dist/cjs/createComponent.js +196 -284
  10. package/dist/cjs/createComponent.js.map +2 -2
  11. package/dist/cjs/createTamagui.js +15 -16
  12. package/dist/cjs/createTamagui.js.map +3 -3
  13. package/dist/cjs/createVariable.js +1 -2
  14. package/dist/cjs/createVariable.js.map +2 -2
  15. package/dist/cjs/helpers/ThemeManager.js +7 -14
  16. package/dist/cjs/helpers/ThemeManager.js.map +2 -2
  17. package/dist/cjs/helpers/{createShallowUpdate.js → cache.js} +20 -21
  18. package/dist/cjs/helpers/cache.js.map +7 -0
  19. package/dist/cjs/helpers/createMediaStyle.js +14 -8
  20. package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
  21. package/dist/cjs/helpers/extendStaticConfig.js +0 -1
  22. package/dist/cjs/helpers/extendStaticConfig.js.map +2 -2
  23. package/dist/cjs/helpers/getSplitStyles.js +214 -94
  24. package/dist/cjs/helpers/getSplitStyles.js.map +3 -3
  25. package/dist/cjs/helpers/getStylesAtomic.js +16 -36
  26. package/dist/cjs/helpers/getStylesAtomic.js.map +3 -3
  27. package/dist/cjs/helpers/getVariantExtras.js +2 -1
  28. package/dist/cjs/helpers/getVariantExtras.js.map +2 -2
  29. package/dist/cjs/helpers/insertStyleRule.js +14 -6
  30. package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
  31. package/dist/cjs/helpers/matchMedia.js.map +2 -2
  32. package/dist/cjs/helpers/mergeTransform.js.map +1 -1
  33. package/dist/cjs/helpers/normalizeValueWithProperty.js +32 -2
  34. package/dist/cjs/helpers/normalizeValueWithProperty.js.map +2 -2
  35. package/dist/cjs/helpers/proxyThemeVariables.js +2 -7
  36. package/dist/cjs/helpers/proxyThemeVariables.js.map +2 -2
  37. package/dist/cjs/helpers/useShallowSetState.js.map +2 -2
  38. package/dist/cjs/hooks/getThemeUnwrapped.js +1 -3
  39. package/dist/cjs/hooks/getThemeUnwrapped.js.map +2 -2
  40. package/dist/cjs/hooks/useElementLayout.js +92 -0
  41. package/dist/cjs/hooks/useElementLayout.js.map +7 -0
  42. package/dist/cjs/hooks/useIsTouchDevice.js +2 -10
  43. package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
  44. package/dist/cjs/hooks/useMedia.js +79 -85
  45. package/dist/cjs/hooks/useMedia.js.map +2 -2
  46. package/dist/cjs/hooks/useMedia.test.js +2 -0
  47. package/dist/cjs/{helpers/validate.js.map → hooks/useMedia.test.js.map} +0 -0
  48. package/dist/cjs/hooks/usePressablePressResponder.js +370 -0
  49. package/dist/cjs/hooks/usePressablePressResponder.js.map +7 -0
  50. package/dist/cjs/hooks/useSafeRef.js +13 -15
  51. package/dist/cjs/hooks/useSafeRef.js.map +2 -2
  52. package/dist/cjs/hooks/useTheme.js +5 -5
  53. package/dist/cjs/hooks/useTheme.js.map +2 -2
  54. package/dist/cjs/index.js +1 -17
  55. package/dist/cjs/index.js.map +2 -2
  56. package/dist/cjs/static.js +0 -20
  57. package/dist/cjs/static.js.map +2 -2
  58. package/dist/cjs/styled.js +4 -22
  59. package/dist/cjs/styled.js.map +2 -2
  60. package/dist/cjs/types.js.map +1 -1
  61. package/dist/cjs/{hooks/useIsSSR.js → views/AbsoluteFill.js} +18 -23
  62. package/dist/cjs/views/AbsoluteFill.js.map +7 -0
  63. package/dist/cjs/views/AbsoluteFill.native.js +45 -0
  64. package/dist/cjs/views/AbsoluteFill.native.js.map +7 -0
  65. package/dist/cjs/views/FontLanguage.native.js.map +2 -2
  66. package/dist/cjs/views/Stack.js.map +1 -1
  67. package/dist/cjs/views/TamaguiProvider.js +3 -2
  68. package/dist/cjs/views/TamaguiProvider.js.map +2 -2
  69. package/dist/cjs/views/Text.js.map +1 -1
  70. package/dist/cjs/views/ThemeReset.js +10 -10
  71. package/dist/cjs/views/ThemeReset.js.map +2 -2
  72. package/dist/esm/Tamagui.js +4 -2
  73. package/dist/esm/Tamagui.js.map +2 -2
  74. package/dist/esm/config.js +1 -2
  75. package/dist/esm/config.js.map +2 -2
  76. package/dist/esm/constants/constants.js +11 -7
  77. package/dist/esm/constants/constants.js.map +2 -2
  78. package/dist/esm/contexts/TextAncestorContext.js +2 -13
  79. package/dist/esm/contexts/TextAncestorContext.js.map +2 -2
  80. package/dist/esm/createComponent.js +195 -286
  81. package/dist/esm/createComponent.js.map +2 -2
  82. package/dist/esm/createTamagui.js +15 -16
  83. package/dist/esm/createTamagui.js.map +3 -3
  84. package/dist/esm/createVariable.js +1 -2
  85. package/dist/esm/createVariable.js.map +2 -2
  86. package/dist/esm/helpers/ThemeManager.js +7 -14
  87. package/dist/esm/helpers/ThemeManager.js.map +2 -2
  88. package/dist/esm/helpers/cache.js +18 -0
  89. package/dist/esm/helpers/cache.js.map +7 -0
  90. package/dist/esm/helpers/createMediaStyle.js +14 -8
  91. package/dist/esm/helpers/createMediaStyle.js.map +2 -2
  92. package/dist/esm/helpers/extendStaticConfig.js +0 -1
  93. package/dist/esm/helpers/extendStaticConfig.js.map +2 -2
  94. package/dist/esm/helpers/getSplitStyles.js +223 -95
  95. package/dist/esm/helpers/getSplitStyles.js.map +3 -3
  96. package/dist/esm/helpers/getStylesAtomic.js +13 -26
  97. package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
  98. package/dist/esm/helpers/getVariantExtras.js +2 -1
  99. package/dist/esm/helpers/getVariantExtras.js.map +2 -2
  100. package/dist/esm/helpers/insertStyleRule.js +14 -6
  101. package/dist/esm/helpers/insertStyleRule.js.map +2 -2
  102. package/dist/esm/helpers/matchMedia.js.map +2 -2
  103. package/dist/esm/helpers/mergeTransform.js.map +1 -1
  104. package/dist/esm/helpers/normalizeValueWithProperty.js +30 -1
  105. package/dist/esm/helpers/normalizeValueWithProperty.js.map +2 -2
  106. package/dist/esm/helpers/proxyThemeVariables.js +2 -7
  107. package/dist/esm/helpers/proxyThemeVariables.js.map +2 -2
  108. package/dist/esm/helpers/useShallowSetState.js.map +2 -2
  109. package/dist/esm/hooks/getThemeUnwrapped.js +1 -3
  110. package/dist/esm/hooks/getThemeUnwrapped.js.map +2 -2
  111. package/dist/esm/hooks/useElementLayout.js +66 -0
  112. package/dist/esm/hooks/useElementLayout.js.map +7 -0
  113. package/dist/esm/hooks/useIsTouchDevice.js +3 -11
  114. package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
  115. package/dist/esm/hooks/useMedia.js +76 -84
  116. package/dist/esm/hooks/useMedia.js.map +2 -2
  117. package/dist/esm/hooks/useMedia.test.js +1 -0
  118. package/dist/esm/{helpers/validate.js.map → hooks/useMedia.test.js.map} +0 -0
  119. package/dist/esm/hooks/usePressablePressResponder.js +346 -0
  120. package/dist/esm/hooks/usePressablePressResponder.js.map +7 -0
  121. package/dist/esm/hooks/useSafeRef.js +13 -15
  122. package/dist/esm/hooks/useSafeRef.js.map +2 -2
  123. package/dist/esm/hooks/useTheme.js +5 -5
  124. package/dist/esm/hooks/useTheme.js.map +2 -2
  125. package/dist/esm/index.js +1 -14
  126. package/dist/esm/index.js.map +2 -2
  127. package/dist/esm/static.js +0 -14
  128. package/dist/esm/static.js.map +2 -2
  129. package/dist/esm/styled.js +4 -22
  130. package/dist/esm/styled.js.map +2 -2
  131. package/dist/esm/views/AbsoluteFill.js +17 -0
  132. package/dist/esm/views/AbsoluteFill.js.map +7 -0
  133. package/dist/esm/views/AbsoluteFill.native.js +21 -0
  134. package/dist/esm/views/AbsoluteFill.native.js.map +7 -0
  135. package/dist/esm/views/FontLanguage.native.js.map +2 -2
  136. package/dist/esm/views/Stack.js.map +1 -1
  137. package/dist/esm/views/TamaguiProvider.js +5 -4
  138. package/dist/esm/views/TamaguiProvider.js.map +2 -2
  139. package/dist/esm/views/Text.js.map +1 -1
  140. package/dist/esm/views/ThemeReset.js +10 -10
  141. package/dist/esm/views/ThemeReset.js.map +2 -2
  142. package/package.json +14 -14
  143. package/src/Tamagui.ts +7 -3
  144. package/src/config.ts +2 -3
  145. package/src/constants/constants.ts +10 -6
  146. package/src/contexts/TextAncestorContext.tsx +1 -8
  147. package/src/createComponent.tsx +250 -412
  148. package/src/createTamagui.ts +16 -19
  149. package/src/createVariable.ts +1 -3
  150. package/src/helpers/ThemeManager.tsx +7 -15
  151. package/src/helpers/cache.ts +18 -0
  152. package/src/helpers/createMediaStyle.ts +16 -9
  153. package/src/helpers/createProxy.ts +16 -0
  154. package/src/helpers/extendStaticConfig.ts +0 -1
  155. package/src/helpers/getSplitStyles.tsx +259 -152
  156. package/src/helpers/getStylesAtomic.ts +14 -34
  157. package/src/helpers/getVariantExtras.tsx +2 -1
  158. package/src/helpers/insertStyleRule.tsx +16 -8
  159. package/src/helpers/matchMedia.ts +1 -0
  160. package/src/helpers/mergeTransform.ts +1 -1
  161. package/src/helpers/normalizeValueWithProperty.ts +30 -0
  162. package/src/helpers/proxyThemeVariables.tsx +3 -8
  163. package/src/helpers/useShallowSetState.tsx +0 -1
  164. package/src/hooks/getThemeUnwrapped.tsx +1 -2
  165. package/src/hooks/useElementLayout.tsx +90 -0
  166. package/src/hooks/useIsTouchDevice.tsx +3 -17
  167. package/src/hooks/useMedia.tsx +82 -88
  168. package/src/hooks/useSafeRef.ts +17 -18
  169. package/src/hooks/useTheme.tsx +6 -5
  170. package/src/index.ts +1 -11
  171. package/src/static.ts +0 -10
  172. package/src/styled.tsx +15 -33
  173. package/src/types.tsx +58 -55
  174. package/src/views/FontLanguage.native.tsx +1 -0
  175. package/src/views/Stack.tsx +1 -1
  176. package/src/views/TamaguiProvider.tsx +5 -5
  177. package/src/views/Text.tsx +1 -1
  178. package/src/views/ThemeReset.tsx +11 -11
  179. package/types/Tamagui.d.ts +6 -4
  180. package/types/constants/constants.d.ts +14 -3
  181. package/types/contexts/TextAncestorContext.d.ts +1 -3
  182. package/types/createComponent.d.ts +0 -15
  183. package/types/helpers/ThemeManager.d.ts +2 -3
  184. package/types/helpers/cache.d.ts +12 -0
  185. package/types/helpers/calc.d.ts +0 -16
  186. package/types/helpers/createMediaStyle.d.ts +1 -1
  187. package/types/helpers/createProxy.d.ts +2 -0
  188. package/types/helpers/getSplitStyles.d.ts +6 -10
  189. package/types/helpers/getStylesAtomic.d.ts +1 -5
  190. package/types/helpers/insertStyleRule.d.ts +2 -2
  191. package/types/helpers/mergeTransform.d.ts +1 -1
  192. package/types/helpers/normalizeValueWithProperty.d.ts +1 -0
  193. package/types/hooks/useElementLayout.d.ts +27 -0
  194. package/types/hooks/useMedia.d.ts +3 -1
  195. package/types/hooks/useMedia.test.d.ts +1 -0
  196. package/types/hooks/usePressablePressResponder.d.ts +84 -0
  197. package/types/index.d.ts +1 -11
  198. package/types/static.d.ts +0 -1
  199. package/types/types.d.ts +42 -44
  200. package/types/views/AbsoluteFill.d.ts +5 -0
  201. package/types/views/AbsoluteFill.native.d.ts +3 -0
  202. package/types/views/Stack.d.ts +1 -1
  203. package/types/views/Text.d.ts +1 -1
  204. package/dist/cjs/constants/platform.js +0 -74
  205. package/dist/cjs/constants/platform.js.map +0 -7
  206. package/dist/cjs/constants/platform.native.js +0 -62
  207. package/dist/cjs/constants/platform.native.js.map +0 -7
  208. package/dist/cjs/helpers/createShallowUpdate.js.map +0 -7
  209. package/dist/cjs/helpers/validate.js +0 -2
  210. package/dist/cjs/hooks/useDidFinishSSR.js +0 -60
  211. package/dist/cjs/hooks/useDidFinishSSR.js.map +0 -7
  212. package/dist/cjs/hooks/useIsSSR.js.map +0 -7
  213. package/dist/esm/constants/platform.js +0 -39
  214. package/dist/esm/constants/platform.js.map +0 -7
  215. package/dist/esm/constants/platform.native.js +0 -28
  216. package/dist/esm/constants/platform.native.js.map +0 -7
  217. package/dist/esm/helpers/createShallowUpdate.js +0 -20
  218. package/dist/esm/helpers/createShallowUpdate.js.map +0 -7
  219. package/dist/esm/helpers/validate.js +0 -1
  220. package/dist/esm/hooks/useDidFinishSSR.js +0 -35
  221. package/dist/esm/hooks/useDidFinishSSR.js.map +0 -7
  222. package/dist/esm/hooks/useIsSSR.js +0 -22
  223. package/dist/esm/hooks/useIsSSR.js.map +0 -7
  224. package/src/helpers/assignNativePropsToWeb.tsx +0 -178
  225. package/src/helpers/calc.ts +0 -68
  226. package/src/helpers/getFont.tsx +0 -43
  227. package/src/helpers/getStackSize.ts +0 -22
  228. package/src/helpers/startTransition.ts +0 -4
  229. package/src/hooks/useConstant.tsx +0 -19
  230. package/src/hooks/useIsMounted.ts +0 -16
  231. package/src/hooks/usePressable.tsx +0 -9
  232. package/src/hooks/useUnmountEffect.ts +0 -5
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/getThemeUnwrapped.tsx"],
4
- "sourcesContent": ["export const getThemeUnwrapped = (theme: any) => {\n if (!theme) return null\n const first = theme[GetThemeUnwrapped]\n if (first) return first[GetThemeUnwrapped] || first\n return theme\n}\n\nexport const GetThemeUnwrapped = Symbol()\n"],
5
- "mappings": "AAAO,MAAM,oBAAoB,CAAC,UAAe;AAC/C,MAAI,CAAC;AAAO,WAAO;AACnB,QAAM,QAAQ,MAAM;AACpB,MAAI;AAAO,WAAO,MAAM,sBAAsB;AAC9C,SAAO;AACT;AAEO,MAAM,oBAAoB,OAAO;",
4
+ "sourcesContent": ["export const getThemeUnwrapped = (theme: any) => {\n if (!theme) return null\n const first = theme[GetThemeUnwrapped]\n return first?.[GetThemeUnwrapped] || first || theme\n}\n\nexport const GetThemeUnwrapped = Symbol()\n"],
5
+ "mappings": "AAAO,MAAM,oBAAoB,CAAC,UAAe;AAC/C,MAAI,CAAC;AAAO,WAAO;AACnB,QAAM,QAAQ,MAAM;AACpB,UAAO,+BAAQ,uBAAsB,SAAS;AAChD;AAEO,MAAM,oBAAoB,OAAO;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,66 @@
1
+ import { useIsomorphicLayoutEffect } from "@tamagui/constants";
2
+ import { getBoundingClientRect } from "@tamagui/react-native-use-responder-events";
3
+ import { useEvent } from "@tamagui/use-event";
4
+ const LayoutHandlers = /* @__PURE__ */ new WeakMap();
5
+ let resizeObserver = null;
6
+ if (typeof window !== "undefined" && "ResizeObserver" in window) {
7
+ resizeObserver = new ResizeObserver((entries) => {
8
+ for (const { target } of entries) {
9
+ const onLayout = LayoutHandlers.get(target);
10
+ if (typeof onLayout !== "function")
11
+ return;
12
+ measureLayout(target, null, (x, y, width, height, left, top) => {
13
+ onLayout({
14
+ nativeEvent: {
15
+ layout: { x, y, width, height, left, top },
16
+ target
17
+ },
18
+ timeStamp: Date.now()
19
+ });
20
+ });
21
+ }
22
+ });
23
+ }
24
+ const getRect = (node) => {
25
+ const rect = getBoundingClientRect(node);
26
+ if (!rect)
27
+ return;
28
+ const { x, y, top, left } = rect;
29
+ return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left };
30
+ };
31
+ const measureLayout = (node, relativeTo, callback) => {
32
+ const relativeNode = relativeTo || (node == null ? void 0 : node.parentNode);
33
+ if (relativeNode instanceof HTMLElement) {
34
+ setTimeout(() => {
35
+ const relativeRect = getBoundingClientRect(relativeNode);
36
+ const { height, left, top, width } = getRect(node);
37
+ const x = left - relativeRect.left;
38
+ const y = top - relativeRect.top;
39
+ callback(x, y, width, height, left, top);
40
+ }, 0);
41
+ }
42
+ };
43
+ const idFn = () => {
44
+ };
45
+ function useElementLayout(ref, onLayout) {
46
+ const hasLayoutEvent = !!onLayout;
47
+ const onLayoutEvent = useEvent(onLayout || idFn);
48
+ useIsomorphicLayoutEffect(() => {
49
+ if (!resizeObserver || !hasLayoutEvent)
50
+ return;
51
+ const node = ref.current;
52
+ if (!node)
53
+ return;
54
+ LayoutHandlers.set(node, onLayoutEvent);
55
+ resizeObserver.observe(node);
56
+ return () => {
57
+ resizeObserver == null ? void 0 : resizeObserver.unobserve(node);
58
+ };
59
+ }, [ref, hasLayoutEvent]);
60
+ }
61
+ export {
62
+ getRect,
63
+ measureLayout,
64
+ useElementLayout
65
+ };
66
+ //# sourceMappingURL=useElementLayout.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/hooks/useElementLayout.tsx"],
4
+ "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { getBoundingClientRect } from '@tamagui/react-native-use-responder-events'\nimport { useEvent } from '@tamagui/use-event'\nimport { RefObject } from 'react'\n\nconst LayoutHandlers = new WeakMap<Element, Function>()\n\nexport type LayoutValue = {\n x: number\n y: number\n width: number\n height: number\n left: number\n top: number\n}\n\nexport type LayoutEvent = {\n nativeEvent: {\n layout: LayoutValue\n target: any\n }\n timeStamp: number\n}\n\nlet resizeObserver: ResizeObserver | null = null\n\nif (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n resizeObserver = new ResizeObserver((entries) => {\n for (const { target } of entries) {\n const onLayout = LayoutHandlers.get(target)\n if (typeof onLayout !== 'function') return\n measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {\n onLayout({\n nativeEvent: {\n layout: { x, y, width, height, left, top },\n target,\n },\n timeStamp: Date.now(),\n })\n })\n }\n })\n}\n\nexport const getRect = (node: HTMLElement) => {\n const rect = getBoundingClientRect(node)\n if (!rect) return\n const { x, y, top, left } = rect\n return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left }\n}\n\nexport const measureLayout = (\n node: HTMLElement,\n relativeTo: HTMLElement | null,\n callback: Function\n) => {\n const relativeNode = relativeTo || node?.parentNode\n if (relativeNode instanceof HTMLElement) {\n setTimeout(() => {\n const relativeRect = getBoundingClientRect(relativeNode)!\n const { height, left, top, width } = getRect(node)!\n const x = left - relativeRect.left\n const y = top - relativeRect.top\n callback(x, y, width, height, left, top)\n }, 0)\n }\n}\n\nconst idFn = () => {}\n\nexport function useElementLayout(\n ref: RefObject<Element>,\n onLayout?: ((e: LayoutEvent) => void) | null\n) {\n const hasLayoutEvent = !!onLayout\n const onLayoutEvent = useEvent(onLayout || idFn)\n\n // Observing is done in a separate effect to avoid this effect running\n // when 'onLayout' changes.\n useIsomorphicLayoutEffect(() => {\n if (!resizeObserver || !hasLayoutEvent) return\n const node = ref.current\n if (!node) return\n LayoutHandlers.set(node, onLayoutEvent)\n resizeObserver.observe(node)\n return () => {\n resizeObserver?.unobserve(node)\n }\n }, [ref, hasLayoutEvent])\n}\n"],
5
+ "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AAGzB,MAAM,iBAAiB,oBAAI,QAA2B;AAmBtD,IAAI,iBAAwC;AAE5C,IAAI,OAAO,WAAW,eAAe,oBAAoB,QAAQ;AAC/D,mBAAiB,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,EAAE,OAAO,KAAK,SAAS;AAChC,YAAM,WAAW,eAAe,IAAI,MAAM;AAC1C,UAAI,OAAO,aAAa;AAAY;AACpC,oBAAc,QAAuB,MAAM,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,QAAQ;AAC7E,iBAAS;AAAA,UACP,aAAa;AAAA,YACX,QAAQ,EAAE,GAAG,GAAG,OAAO,QAAQ,MAAM,IAAI;AAAA,YACzC;AAAA,UACF;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,QACtB,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAEO,MAAM,UAAU,CAAC,SAAsB;AAC5C,QAAM,OAAO,sBAAsB,IAAI;AACvC,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,GAAG,GAAG,KAAK,KAAK,IAAI;AAC5B,SAAO,EAAE,GAAG,GAAG,OAAO,KAAK,aAAa,QAAQ,KAAK,cAAc,KAAK,KAAK;AAC/E;AAEO,MAAM,gBAAgB,CAC3B,MACA,YACA,aACG;AACH,QAAM,eAAe,eAAc,6BAAM;AACzC,MAAI,wBAAwB,aAAa;AACvC,eAAW,MAAM;AACf,YAAM,eAAe,sBAAsB,YAAY;AACvD,YAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAI;AACjD,YAAM,IAAI,OAAO,aAAa;AAC9B,YAAM,IAAI,MAAM,aAAa;AAC7B,eAAS,GAAG,GAAG,OAAO,QAAQ,MAAM,GAAG;AAAA,IACzC,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;AAEb,SAAS,iBACd,KACA,UACA;AACA,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,gBAAgB,SAAS,YAAY,IAAI;AAI/C,4BAA0B,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC;AAAgB;AACxC,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AACX,mBAAe,IAAI,MAAM,aAAa;AACtC,mBAAe,QAAQ,IAAI;AAC3B,WAAO,MAAM;AACX,uDAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAC1B;",
6
+ "names": []
7
+ }
@@ -1,15 +1,7 @@
1
- import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
2
- import { useState } from "react";
1
+ import { isTouchable, isWeb } from "@tamagui/constants";
2
+ import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
3
3
  const useIsTouchDevice = () => {
4
- const [touchOnly, setTouchOnly] = useState(false);
5
- if (isWeb && !isServer) {
6
- useIsomorphicLayoutEffect(() => {
7
- if (isTouchable) {
8
- setTouchOnly(true);
9
- }
10
- }, []);
11
- }
12
- return touchOnly;
4
+ return !isWeb ? true : useDidFinishSSR() ? isTouchable : false;
13
5
  };
14
6
  export {
15
7
  useIsTouchDevice
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
4
- "sourcesContent": ["import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useState } from 'react'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n const [touchOnly, setTouchOnly] = useState(false)\n\n if (isWeb && !isServer) {\n // only ever false on web SSR (env), so run effect conditionally\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useIsomorphicLayoutEffect(() => {\n if (isTouchable) {\n setTouchOnly(true)\n }\n }, [])\n }\n\n return touchOnly\n}\n"],
5
- "mappings": "AAAA,SAAS,UAAU,aAAa,OAAO,iCAAiC;AACxE,SAAS,gBAAgB;AAIlB,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,SAAS,CAAC,UAAU;AAGtB,8BAA0B,MAAM;AAC9B,UAAI,aAAa;AACf,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["import { isTouchable, isWeb } from '@tamagui/constants'\nimport { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'\n\nexport const useIsTouchDevice = () => {\n return !isWeb ? true : useDidFinishSSR() ? isTouchable : false\n}\n"],
5
+ "mappings": "AAAA,SAAS,aAAa,aAAa;AACnC,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,MAAM;AACpC,SAAO,CAAC,QAAQ,OAAO,gBAAgB,IAAI,cAAc;AAC3D;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,10 @@
1
1
  import { useIsomorphicLayoutEffect } from "@tamagui/constants";
2
- import { startTransition, useEffect, useMemo, useState } from "react";
2
+ import { useEffect, useMemo, useState } from "react";
3
3
  import { getConfig } from "../config";
4
+ import { createProxy } from "../helpers/createProxy";
4
5
  import { matchMedia } from "../helpers/matchMedia";
5
6
  import { useSafeRef } from "./useSafeRef";
6
- const mediaState = process.env.NODE_ENV === "development" ? new Proxy(
7
+ const mediaState = process.env.NODE_ENV === "development" ? createProxy(
7
8
  {},
8
9
  {
9
10
  get(target, key) {
@@ -14,31 +15,30 @@ const mediaState = process.env.NODE_ENV === "development" ? new Proxy(
14
15
  }
15
16
  }
16
17
  ) : {};
17
- const mediaQueryListeners = {};
18
+ const listeners = {};
18
19
  function addMediaQueryListener(key, cb) {
19
20
  if (process.env.NODE_ENV === "development" && key[0] === "$") {
20
21
  console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`);
21
22
  }
22
- mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
23
- mediaQueryListeners[key].add(cb);
23
+ listeners[key] = listeners[key] || /* @__PURE__ */ new Set();
24
+ listeners[key].add(cb);
24
25
  return () => removeMediaQueryListener(key, cb);
25
26
  }
26
27
  function removeMediaQueryListener(key, cb) {
27
28
  var _a;
28
- (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
29
+ (_a = listeners[key]) == null ? void 0 : _a.delete(cb);
29
30
  }
30
31
  const mediaQueryConfig = {};
31
32
  const getMedia = () => {
32
33
  return mediaState;
33
34
  };
34
- let currentMediaState;
35
- let initialMediaState;
35
+ let curState;
36
+ let initState;
36
37
  const getInitialMediaState = () => {
37
- if (getConfig().disableSSR) {
38
- return currentMediaState || {};
39
- }
40
- return initialMediaState || {};
38
+ return (getConfig().disableSSR ? curState : initState) || {};
41
39
  };
40
+ let mediaKeysOrdered;
41
+ const getMediaKeyImportance = (key) => mediaKeysOrdered.indexOf(key[0] === "$" ? key.slice(1) : key) + 2;
42
42
  const dispose = /* @__PURE__ */ new Set();
43
43
  const configureMedia = (config) => {
44
44
  const { media, mediaQueryDefaultActive } = config;
@@ -48,8 +48,9 @@ const configureMedia = (config) => {
48
48
  mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
49
49
  }
50
50
  Object.assign(mediaQueryConfig, media);
51
- currentMediaState = { ...mediaState };
52
- initialMediaState = currentMediaState;
51
+ curState = { ...mediaState };
52
+ initState = curState;
53
+ mediaKeysOrdered = Object.keys(media);
53
54
  if (config.disableSSR) {
54
55
  setupMediaListeners();
55
56
  }
@@ -66,119 +67,108 @@ function setupMediaListeners() {
66
67
  }
67
68
  configuredKey = nextKey;
68
69
  unlisten();
69
- startTransition(() => {
70
- for (const key in mediaQueryConfig) {
71
- let update2 = function() {
72
- const next = !!getMatch().matches;
73
- if (next === mediaState[key])
74
- return;
75
- mediaState[key] = next;
76
- currentMediaState = { ...mediaState };
77
- const listeners = mediaQueryListeners[key];
78
- if (listeners == null ? void 0 : listeners.size) {
79
- listeners.forEach((cb) => cb(next));
80
- }
81
- };
82
- var update = update2;
83
- const str = mediaObjectToString(mediaQueryConfig[key]);
84
- const getMatch = () => matchMedia(str);
85
- const match = getMatch();
86
- if (!match) {
87
- throw new Error("\u26A0\uFE0F No match");
70
+ for (const key in mediaQueryConfig) {
71
+ let update2 = function() {
72
+ const next = !!getMatch().matches;
73
+ if (next === mediaState[key])
74
+ return;
75
+ mediaState[key] = next;
76
+ curState = { ...mediaState };
77
+ const cur = listeners[key];
78
+ if (cur == null ? void 0 : cur.size) {
79
+ cur.forEach((cb) => cb(next));
88
80
  }
89
- match.addListener(update2);
90
- dispose.add(() => match.removeListener(update2));
91
- update2();
81
+ };
82
+ var update = update2;
83
+ const str = mediaObjectToString(mediaQueryConfig[key]);
84
+ const getMatch = () => matchMedia(str);
85
+ const match = getMatch();
86
+ if (!match) {
87
+ throw new Error("\u26A0\uFE0F No match");
92
88
  }
93
- });
89
+ match.addListener(update2);
90
+ dispose.add(() => match.removeListener(update2));
91
+ update2();
92
+ }
94
93
  }
95
- function useMediaQueryListeners(config) {
96
- if (config.disableSSR) {
94
+ function useMediaListeners(config) {
95
+ if (config.disableSSR)
97
96
  return;
98
- }
99
97
  useEffect(() => {
100
98
  setupMediaListeners();
101
99
  return unlisten;
102
100
  }, []);
103
101
  }
104
102
  function useMedia() {
105
- const [state, setState] = useState(initialMediaState || {});
106
103
  const keys = useSafeRef({});
104
+ const [state, setState] = useState(() => getMediaState(initState || {}, keys));
107
105
  function updateState() {
108
106
  setState((prev) => {
109
107
  for (const key in keys.current) {
110
108
  if (prev[key] !== mediaState[key]) {
111
- return { ...mediaState };
109
+ return getMediaState({ ...mediaState }, keys);
112
110
  }
113
111
  }
114
112
  return prev;
115
113
  });
116
114
  }
117
115
  useIsomorphicLayoutEffect(() => {
118
- const disposes = Object.keys(keys.current).map(
116
+ updateState();
117
+ const disposers = Object.keys(keys.current).map(
119
118
  (key) => addMediaQueryListener(key, updateState)
120
119
  );
121
- updateState();
122
120
  return () => {
123
- disposes.forEach((cb) => cb());
121
+ disposers.forEach((cb) => cb());
124
122
  };
125
- });
126
- return useMemo(
127
- () => new Proxy(state, {
128
- get(_, key) {
129
- if (process.env.NODE_ENV === "development") {
130
- if (!currentMediaState) {
131
- throw new Error(
132
- `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
133
- );
134
- }
135
- }
136
- if (!keys.current[key]) {
137
- keys.current[key] = true;
138
- }
139
- return Reflect.get(state, key);
123
+ }, [keys.current]);
124
+ return state;
125
+ }
126
+ function getMediaState(state, keys) {
127
+ return new Proxy(state, {
128
+ get(_, key) {
129
+ if (!keys.current[key]) {
130
+ keys.current[key] = true;
140
131
  }
141
- }),
142
- [state, keys]
143
- );
132
+ return Reflect.get(state, key);
133
+ }
134
+ });
144
135
  }
145
136
  function useMediaPropsActive(props) {
146
137
  const media = useMedia();
147
138
  return useMemo(() => {
148
- const evaluated = {};
149
- const lastSetImportanceForKey = {};
139
+ const next = {};
140
+ const importancesUsed = {};
150
141
  const propNames = Object.keys(props);
151
- const mediaKeysOrdered = Object.keys(getMedia());
152
- function update(k, v, importance = 0) {
153
- if (lastSetImportanceForKey[k] > importance) {
154
- return;
155
- }
156
- lastSetImportanceForKey[k] = importance;
157
- evaluated[k] = v;
158
- }
159
142
  for (let i = propNames.length - 1; i >= 0; i--) {
160
143
  const key = propNames[i];
161
144
  const val = props[key];
162
145
  if (key[0] === "$") {
163
- const shortKey = key.slice(1);
164
- if (!media[shortKey]) {
146
+ if (!media[key.slice(1)]) {
165
147
  continue;
166
148
  }
167
149
  if (val && typeof val === "object") {
168
- const subPropNames = Object.keys(val);
169
- const mediaImportance = mediaKeysOrdered.indexOf(shortKey);
170
- for (let j = subPropNames.length; j--; j >= 0) {
171
- const skey = subPropNames[j];
172
- update(skey, val[skey], mediaImportance);
150
+ const subKeys = Object.keys(val);
151
+ for (let j = subKeys.length; j--; j >= 0) {
152
+ const subKey = subKeys[j];
153
+ mergeMediaByImportance(next, subKey, val[subKey], importancesUsed);
173
154
  }
174
155
  }
175
156
  } else {
176
- update(key, val);
157
+ mergeMediaByImportance(next, key, val, importancesUsed);
177
158
  }
178
159
  }
179
- return evaluated;
160
+ return next;
180
161
  }, [media, props]);
181
162
  }
163
+ function mergeMediaByImportance(onto, key, value, importancesUsed) {
164
+ const importance = getMediaKeyImportance(key);
165
+ if (importancesUsed[key] > importance) {
166
+ return false;
167
+ }
168
+ importancesUsed[key] = importance;
169
+ onto[key] = value;
170
+ return true;
171
+ }
182
172
  function camelToHyphen(str) {
183
173
  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
184
174
  }
@@ -202,12 +192,14 @@ export {
202
192
  configureMedia,
203
193
  getInitialMediaState,
204
194
  getMedia,
195
+ getMediaKeyImportance,
205
196
  mediaObjectToString,
206
197
  mediaQueryConfig,
207
198
  mediaState,
199
+ mergeMediaByImportance,
208
200
  removeMediaQueryListener,
209
201
  useMedia,
210
- useMediaPropsActive,
211
- useMediaQueryListeners
202
+ useMediaListeners,
203
+ useMediaPropsActive
212
204
  };
213
205
  //# sourceMappingURL=useMedia.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useMedia.tsx"],
4
- "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { startTransition, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n // development time safeguard\n process.env.NODE_ENV === 'development'\n ? new Proxy(\n {},\n {\n get(target, key) {\n if (typeof key === 'string' && key[0] === '$') {\n throw new Error(`Access of mediaState should never include $`)\n }\n return Reflect.get(target, key)\n },\n }\n )\n : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n // eslint-disable-next-line no-console\n console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n }\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: MediaListener) {\n mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\n// for SSR capture it at time of startup\nlet currentMediaState: MediaQueryState | null\nlet initialMediaState: MediaQueryState | null\n\nexport const getInitialMediaState = () => {\n if (getConfig().disableSSR) {\n return currentMediaState || {}\n }\n return initialMediaState || {}\n}\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n const { media, mediaQueryDefaultActive } = config\n if (!media) return\n for (const key in media) {\n mediaState[key] = mediaQueryDefaultActive?.[key] || false\n }\n Object.assign(mediaQueryConfig, media)\n currentMediaState = { ...mediaState }\n initialMediaState = currentMediaState\n if (config.disableSSR) {\n setupMediaListeners()\n }\n}\n\nfunction unlisten() {\n dispose.forEach((cb) => cb())\n dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n // avoid setting up more than once per config\n const nextKey = JSON.stringify(mediaQueryConfig)\n if (nextKey === configuredKey) {\n return\n }\n configuredKey = nextKey\n\n // hmr, undo existing before re-binding\n unlisten()\n\n // theoretically this should make media reactions smoother but potentially delayed?\n // but i believe consistent, so that's a nicer default (we'll see)\n startTransition(() => {\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\n update()\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n currentMediaState = { ...mediaState }\n const listeners = mediaQueryListeners[key]\n if (listeners?.size) {\n listeners.forEach((cb) => cb(next))\n }\n }\n }\n })\n}\n\nexport function useMediaQueryListeners(config: TamaguiInternalConfig) {\n if (config.disableSSR) {\n return\n }\n useEffect(() => {\n setupMediaListeners()\n return unlisten\n }, [])\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const [state, setState] = useState<MediaQueryState>(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 disposes: Function[] = Object.keys(keys.current).map((key) =>\n addMediaQueryListener(key, updateState)\n )\n updateState()\n return () => {\n disposes.forEach((cb) => cb())\n }\n })\n\n return useMemo(\n () =>\n new Proxy(state, {\n get(_, key: string) {\n if (process.env.NODE_ENV === 'development') {\n if (!currentMediaState) {\n throw new Error(\n `To use useMedia() you must pass in media configuration to createTamagui, none was found.`\n )\n }\n }\n if (!keys.current[key]) {\n keys.current[key] = true\n }\n return Reflect.get(state, key)\n },\n }),\n [state, keys]\n )\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n props: A\n): {\n // remove all media\n [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n const media = useMedia()\n\n return useMemo(() => {\n const evaluated = {} as A\n const lastSetImportanceForKey = {}\n const propNames = Object.keys(props)\n const mediaKeysOrdered = Object.keys(getMedia())\n\n function update(k: string, v: any, importance = 0) {\n if (lastSetImportanceForKey[k] > importance) {\n return\n }\n lastSetImportanceForKey[k] = importance\n evaluated[k] = v\n }\n\n for (let i = propNames.length - 1; i >= 0; i--) {\n const key = propNames[i]\n const val = props[key]\n if (key[0] === '$') {\n const shortKey = key.slice(1)\n if (!media[shortKey]) {\n continue\n }\n if (val && typeof val === 'object') {\n const subPropNames = Object.keys(val)\n const mediaImportance = mediaKeysOrdered.indexOf(shortKey)\n for (let j = subPropNames.length; j--; j >= 0) {\n const skey = subPropNames[j]\n update(skey, val[skey], mediaImportance)\n }\n }\n } else {\n update(key, val)\n }\n }\n\n return evaluated\n }, [media, props])\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 { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n MediaQueries,\n MediaQueryKey,\n MediaQueryObject,\n MediaQueryState,\n TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n // development time safeguard\n process.env.NODE_ENV === 'development'\n ? createProxy(\n {},\n {\n get(target, key) {\n if (typeof key === 'string' && key[0] === '$') {\n throw new Error(`Access of mediaState should never include $`)\n }\n return Reflect.get(target, key)\n },\n }\n )\n : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n // eslint-disable-next-line no-console\n console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n }\n listeners[key] = listeners[key] || new Set()\n listeners[key].add(cb)\n return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n return mediaState\n}\n\n// for SSR capture it at time of startup\nlet curState: MediaQueryState\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n return (getConfig().disableSSR ? curState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n const { media, mediaQueryDefaultActive } = config\n if (!media) return\n for (const key in media) {\n mediaState[key] = mediaQueryDefaultActive?.[key] || false\n }\n Object.assign(mediaQueryConfig, media)\n curState = { ...mediaState }\n initState = curState\n mediaKeysOrdered = Object.keys(media)\n if (config.disableSSR) {\n setupMediaListeners()\n }\n}\n\nfunction unlisten() {\n dispose.forEach((cb) => cb())\n dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n // avoid setting up more than once per config\n const nextKey = JSON.stringify(mediaQueryConfig)\n if (nextKey === configuredKey) {\n return\n }\n configuredKey = nextKey\n\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\n update()\n\n function update() {\n const next = !!getMatch().matches\n if (next === mediaState[key]) return\n mediaState[key] = next\n curState = { ...mediaState }\n const cur = listeners[key]\n if (cur?.size) {\n cur.forEach((cb) => cb(next))\n }\n }\n }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n if (config.disableSSR) return\n useEffect(() => {\n setupMediaListeners()\n return unlisten\n }, [])\n}\n\nexport function useMedia(): {\n [key in MediaQueryKey]: boolean\n} {\n const keys = useSafeRef({} as Record<string, boolean>)\n const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))\n\n function updateState() {\n setState((prev) => {\n for (const key in keys.current) {\n if (prev[key] !== mediaState[key]) {\n return getMediaState({ ...mediaState }, keys)\n }\n }\n return prev\n })\n }\n\n useIsomorphicLayoutEffect(() => {\n updateState()\n const disposers = Object.keys(keys.current).map((key) =>\n addMediaQueryListener(key, updateState)\n )\n return () => {\n disposers.forEach((cb) => cb())\n }\n }, [keys.current])\n\n return state\n}\n\nfunction getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {\n return new Proxy(state, {\n get(_, key: string) {\n if (!keys.current[key]) {\n keys.current[key] = true\n }\n return Reflect.get(state, key)\n },\n })\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n props: A\n): {\n // remove all media\n [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n const media = useMedia()\n\n return useMemo(() => {\n const next = {} as A\n const importancesUsed = {}\n const propNames = Object.keys(props)\n\n for (let i = propNames.length - 1; i >= 0; i--) {\n const key = propNames[i]\n const val = props[key]\n if (key[0] === '$') {\n if (!media[key.slice(1)]) {\n continue\n }\n if (val && typeof val === 'object') {\n const subKeys = Object.keys(val)\n for (let j = subKeys.length; j--; j >= 0) {\n const subKey = subKeys[j]\n mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n }\n }\n } else {\n mergeMediaByImportance(next, key, val, importancesUsed)\n }\n }\n\n return next\n }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n onto: Record<string, any>,\n key: string,\n value: any,\n importancesUsed: Record<string, number>\n) {\n const importance = getMediaKeyImportance(key)\n if (importancesUsed[key] > importance) {\n return false\n }\n importancesUsed[key] = importance\n onto[key] = value\n return true\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": ["update"]
7
7
  }
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=useMedia.test.js.map