@contember/react-utils 1.3.0-alpha.9 → 2.0.0-alpha.2

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 (276) hide show
  1. package/dist/development/context/createContext.cjs +10 -0
  2. package/dist/development/context/createContext.cjs.map +1 -0
  3. package/dist/development/context/createContext.js +10 -0
  4. package/dist/development/context/createContext.js.map +1 -0
  5. package/dist/development/context/{createNonNullableContextFactory.cjs → createRequiredContext.cjs} +6 -5
  6. package/dist/development/context/createRequiredContext.cjs.map +1 -0
  7. package/dist/development/context/{createNonNullableContextFactory.js → createRequiredContext.js} +6 -5
  8. package/dist/development/context/createRequiredContext.js.map +1 -0
  9. package/dist/development/hooks/useAutoHeightTextArea.cjs +1 -1
  10. package/dist/development/hooks/useAutoHeightTextArea.cjs.map +1 -1
  11. package/dist/development/hooks/useAutoHeightTextArea.js +1 -1
  12. package/dist/development/hooks/useAutoHeightTextArea.js.map +1 -1
  13. package/dist/development/hooks/useStoredState.cjs +89 -12
  14. package/dist/development/hooks/useStoredState.cjs.map +1 -1
  15. package/dist/development/hooks/useStoredState.js +91 -14
  16. package/dist/development/hooks/useStoredState.js.map +1 -1
  17. package/dist/development/index.cjs +11 -41
  18. package/dist/development/index.cjs.map +1 -1
  19. package/dist/development/index.js +12 -42
  20. package/dist/development/index.js.map +1 -1
  21. package/dist/production/context/createContext.cjs +10 -0
  22. package/dist/production/context/createContext.cjs.map +1 -0
  23. package/dist/production/context/createContext.js +10 -0
  24. package/dist/production/context/createContext.js.map +1 -0
  25. package/dist/production/context/{createNonNullableContextFactory.cjs → createRequiredContext.cjs} +6 -5
  26. package/dist/production/context/createRequiredContext.cjs.map +1 -0
  27. package/dist/production/context/{createNonNullableContextFactory.js → createRequiredContext.js} +6 -5
  28. package/dist/production/context/createRequiredContext.js.map +1 -0
  29. package/dist/production/hooks/useAutoHeightTextArea.cjs +1 -1
  30. package/dist/production/hooks/useAutoHeightTextArea.cjs.map +1 -1
  31. package/dist/production/hooks/useAutoHeightTextArea.js +1 -1
  32. package/dist/production/hooks/useAutoHeightTextArea.js.map +1 -1
  33. package/dist/production/hooks/useStoredState.cjs +89 -12
  34. package/dist/production/hooks/useStoredState.cjs.map +1 -1
  35. package/dist/production/hooks/useStoredState.js +91 -14
  36. package/dist/production/hooks/useStoredState.js.map +1 -1
  37. package/dist/production/index.cjs +11 -41
  38. package/dist/production/index.cjs.map +1 -1
  39. package/dist/production/index.js +12 -42
  40. package/dist/production/index.js.map +1 -1
  41. package/dist/types/context/createContext.d.ts +3 -0
  42. package/dist/types/context/createContext.d.ts.map +1 -0
  43. package/dist/types/context/createRequiredContext.d.ts +3 -0
  44. package/dist/types/context/createRequiredContext.d.ts.map +1 -0
  45. package/dist/types/context/index.d.ts +2 -2
  46. package/dist/types/context/index.d.ts.map +1 -1
  47. package/dist/types/hooks/index.d.ts +0 -10
  48. package/dist/types/hooks/index.d.ts.map +1 -1
  49. package/dist/types/hooks/useArrayMapMemo.d.ts.map +1 -1
  50. package/dist/types/hooks/useConstantLengthInvariant.d.ts.map +1 -1
  51. package/dist/types/hooks/useConstantValueInvariant.d.ts.map +1 -1
  52. package/dist/types/hooks/useDebounce.d.ts.map +1 -1
  53. package/dist/types/hooks/useObjectMemo.d.ts.map +1 -1
  54. package/dist/types/hooks/usePreviousValue.d.ts.map +1 -1
  55. package/dist/types/hooks/useStoredState.d.ts +14 -1
  56. package/dist/types/hooks/useStoredState.d.ts.map +1 -1
  57. package/dist/types/index.d.ts +0 -1
  58. package/dist/types/index.d.ts.map +1 -1
  59. package/dist/types/referentiallyStable/identityFunction.d.ts.map +1 -1
  60. package/dist/types/referentiallyStable/useReferentiallyStableCallback.d.ts.map +1 -1
  61. package/dist/types/tsconfig.tsbuildinfo +1 -1
  62. package/package.json +3 -3
  63. package/src/context/createContext.ts +9 -0
  64. package/src/context/{createNonNullableContextFactory.ts → createRequiredContext.ts} +6 -4
  65. package/src/context/index.ts +2 -2
  66. package/src/hooks/index.ts +0 -10
  67. package/src/hooks/useAutoHeightTextArea.ts +1 -1
  68. package/src/hooks/useStoredState.ts +103 -14
  69. package/src/index.ts +0 -1
  70. package/dist/development/context/createNonNullableContextFactory.cjs.map +0 -1
  71. package/dist/development/context/createNonNullableContextFactory.js.map +0 -1
  72. package/dist/development/context/createOptionalContextFactory.cjs +0 -13
  73. package/dist/development/context/createOptionalContextFactory.cjs.map +0 -1
  74. package/dist/development/context/createOptionalContextFactory.js +0 -13
  75. package/dist/development/context/createOptionalContextFactory.js.map +0 -1
  76. package/dist/development/hooks/useAddClassNameDuringResize.cjs +0 -32
  77. package/dist/development/hooks/useAddClassNameDuringResize.cjs.map +0 -1
  78. package/dist/development/hooks/useAddClassNameDuringResize.js +0 -32
  79. package/dist/development/hooks/useAddClassNameDuringResize.js.map +0 -1
  80. package/dist/development/hooks/useCloseOnClickOutside.cjs +0 -25
  81. package/dist/development/hooks/useCloseOnClickOutside.cjs.map +0 -1
  82. package/dist/development/hooks/useCloseOnClickOutside.js +0 -25
  83. package/dist/development/hooks/useCloseOnClickOutside.js.map +0 -1
  84. package/dist/development/hooks/useCloseOnEscape.cjs +0 -20
  85. package/dist/development/hooks/useCloseOnEscape.cjs.map +0 -1
  86. package/dist/development/hooks/useCloseOnEscape.js +0 -20
  87. package/dist/development/hooks/useCloseOnEscape.js.map +0 -1
  88. package/dist/development/hooks/useContainerWidth.cjs +0 -14
  89. package/dist/development/hooks/useContainerWidth.cjs.map +0 -1
  90. package/dist/development/hooks/useContainerWidth.js +0 -14
  91. package/dist/development/hooks/useContainerWidth.js.map +0 -1
  92. package/dist/development/hooks/useElementSize.cjs +0 -37
  93. package/dist/development/hooks/useElementSize.cjs.map +0 -1
  94. package/dist/development/hooks/useElementSize.js +0 -37
  95. package/dist/development/hooks/useElementSize.js.map +0 -1
  96. package/dist/development/hooks/useElementTopOffset.cjs +0 -29
  97. package/dist/development/hooks/useElementTopOffset.cjs.map +0 -1
  98. package/dist/development/hooks/useElementTopOffset.js +0 -29
  99. package/dist/development/hooks/useElementTopOffset.js.map +0 -1
  100. package/dist/development/hooks/useEventHandler.cjs +0 -19
  101. package/dist/development/hooks/useEventHandler.cjs.map +0 -1
  102. package/dist/development/hooks/useEventHandler.js +0 -19
  103. package/dist/development/hooks/useEventHandler.js.map +0 -1
  104. package/dist/development/hooks/useOnElementMutation.cjs +0 -35
  105. package/dist/development/hooks/useOnElementMutation.cjs.map +0 -1
  106. package/dist/development/hooks/useOnElementMutation.js +0 -35
  107. package/dist/development/hooks/useOnElementMutation.js.map +0 -1
  108. package/dist/development/hooks/useOnScrollWithin.cjs +0 -52
  109. package/dist/development/hooks/useOnScrollWithin.cjs.map +0 -1
  110. package/dist/development/hooks/useOnScrollWithin.js +0 -52
  111. package/dist/development/hooks/useOnScrollWithin.js.map +0 -1
  112. package/dist/development/hooks/useScrollOffsets.cjs +0 -67
  113. package/dist/development/hooks/useScrollOffsets.cjs.map +0 -1
  114. package/dist/development/hooks/useScrollOffsets.js +0 -67
  115. package/dist/development/hooks/useScrollOffsets.js.map +0 -1
  116. package/dist/development/theming/ColorSchemeProvider.cjs +0 -16
  117. package/dist/development/theming/ColorSchemeProvider.cjs.map +0 -1
  118. package/dist/development/theming/ColorSchemeProvider.js +0 -16
  119. package/dist/development/theming/ColorSchemeProvider.js.map +0 -1
  120. package/dist/development/theming/GlobalClassNamePrefixContext.cjs +0 -6
  121. package/dist/development/theming/GlobalClassNamePrefixContext.cjs.map +0 -1
  122. package/dist/development/theming/GlobalClassNamePrefixContext.js +0 -6
  123. package/dist/development/theming/GlobalClassNamePrefixContext.js.map +0 -1
  124. package/dist/development/theming/contexts.cjs +0 -12
  125. package/dist/development/theming/contexts.cjs.map +0 -1
  126. package/dist/development/theming/contexts.js +0 -12
  127. package/dist/development/theming/contexts.js.map +0 -1
  128. package/dist/development/theming/useClassName.cjs +0 -17
  129. package/dist/development/theming/useClassName.cjs.map +0 -1
  130. package/dist/development/theming/useClassName.js +0 -17
  131. package/dist/development/theming/useClassName.js.map +0 -1
  132. package/dist/development/theming/useClassNameFactory.cjs +0 -22
  133. package/dist/development/theming/useClassNameFactory.cjs.map +0 -1
  134. package/dist/development/theming/useClassNameFactory.js +0 -22
  135. package/dist/development/theming/useClassNameFactory.js.map +0 -1
  136. package/dist/development/theming/useThemedClassName.cjs +0 -17
  137. package/dist/development/theming/useThemedClassName.cjs.map +0 -1
  138. package/dist/development/theming/useThemedClassName.js +0 -17
  139. package/dist/development/theming/useThemedClassName.js.map +0 -1
  140. package/dist/development/theming/useThemedClassNameFactory.cjs +0 -29
  141. package/dist/development/theming/useThemedClassNameFactory.cjs.map +0 -1
  142. package/dist/development/theming/useThemedClassNameFactory.js +0 -29
  143. package/dist/development/theming/useThemedClassNameFactory.js.map +0 -1
  144. package/dist/production/context/createNonNullableContextFactory.cjs.map +0 -1
  145. package/dist/production/context/createNonNullableContextFactory.js.map +0 -1
  146. package/dist/production/context/createOptionalContextFactory.cjs +0 -13
  147. package/dist/production/context/createOptionalContextFactory.cjs.map +0 -1
  148. package/dist/production/context/createOptionalContextFactory.js +0 -13
  149. package/dist/production/context/createOptionalContextFactory.js.map +0 -1
  150. package/dist/production/hooks/useAddClassNameDuringResize.cjs +0 -32
  151. package/dist/production/hooks/useAddClassNameDuringResize.cjs.map +0 -1
  152. package/dist/production/hooks/useAddClassNameDuringResize.js +0 -32
  153. package/dist/production/hooks/useAddClassNameDuringResize.js.map +0 -1
  154. package/dist/production/hooks/useCloseOnClickOutside.cjs +0 -25
  155. package/dist/production/hooks/useCloseOnClickOutside.cjs.map +0 -1
  156. package/dist/production/hooks/useCloseOnClickOutside.js +0 -25
  157. package/dist/production/hooks/useCloseOnClickOutside.js.map +0 -1
  158. package/dist/production/hooks/useCloseOnEscape.cjs +0 -20
  159. package/dist/production/hooks/useCloseOnEscape.cjs.map +0 -1
  160. package/dist/production/hooks/useCloseOnEscape.js +0 -20
  161. package/dist/production/hooks/useCloseOnEscape.js.map +0 -1
  162. package/dist/production/hooks/useContainerWidth.cjs +0 -14
  163. package/dist/production/hooks/useContainerWidth.cjs.map +0 -1
  164. package/dist/production/hooks/useContainerWidth.js +0 -14
  165. package/dist/production/hooks/useContainerWidth.js.map +0 -1
  166. package/dist/production/hooks/useElementSize.cjs +0 -37
  167. package/dist/production/hooks/useElementSize.cjs.map +0 -1
  168. package/dist/production/hooks/useElementSize.js +0 -37
  169. package/dist/production/hooks/useElementSize.js.map +0 -1
  170. package/dist/production/hooks/useElementTopOffset.cjs +0 -29
  171. package/dist/production/hooks/useElementTopOffset.cjs.map +0 -1
  172. package/dist/production/hooks/useElementTopOffset.js +0 -29
  173. package/dist/production/hooks/useElementTopOffset.js.map +0 -1
  174. package/dist/production/hooks/useEventHandler.cjs +0 -19
  175. package/dist/production/hooks/useEventHandler.cjs.map +0 -1
  176. package/dist/production/hooks/useEventHandler.js +0 -19
  177. package/dist/production/hooks/useEventHandler.js.map +0 -1
  178. package/dist/production/hooks/useOnElementMutation.cjs +0 -35
  179. package/dist/production/hooks/useOnElementMutation.cjs.map +0 -1
  180. package/dist/production/hooks/useOnElementMutation.js +0 -35
  181. package/dist/production/hooks/useOnElementMutation.js.map +0 -1
  182. package/dist/production/hooks/useOnScrollWithin.cjs +0 -52
  183. package/dist/production/hooks/useOnScrollWithin.cjs.map +0 -1
  184. package/dist/production/hooks/useOnScrollWithin.js +0 -52
  185. package/dist/production/hooks/useOnScrollWithin.js.map +0 -1
  186. package/dist/production/hooks/useScrollOffsets.cjs +0 -67
  187. package/dist/production/hooks/useScrollOffsets.cjs.map +0 -1
  188. package/dist/production/hooks/useScrollOffsets.js +0 -67
  189. package/dist/production/hooks/useScrollOffsets.js.map +0 -1
  190. package/dist/production/theming/ColorSchemeProvider.cjs +0 -12
  191. package/dist/production/theming/ColorSchemeProvider.cjs.map +0 -1
  192. package/dist/production/theming/ColorSchemeProvider.js +0 -12
  193. package/dist/production/theming/ColorSchemeProvider.js.map +0 -1
  194. package/dist/production/theming/GlobalClassNamePrefixContext.cjs +0 -6
  195. package/dist/production/theming/GlobalClassNamePrefixContext.cjs.map +0 -1
  196. package/dist/production/theming/GlobalClassNamePrefixContext.js +0 -6
  197. package/dist/production/theming/GlobalClassNamePrefixContext.js.map +0 -1
  198. package/dist/production/theming/contexts.cjs +0 -12
  199. package/dist/production/theming/contexts.cjs.map +0 -1
  200. package/dist/production/theming/contexts.js +0 -12
  201. package/dist/production/theming/contexts.js.map +0 -1
  202. package/dist/production/theming/useClassName.cjs +0 -17
  203. package/dist/production/theming/useClassName.cjs.map +0 -1
  204. package/dist/production/theming/useClassName.js +0 -17
  205. package/dist/production/theming/useClassName.js.map +0 -1
  206. package/dist/production/theming/useClassNameFactory.cjs +0 -22
  207. package/dist/production/theming/useClassNameFactory.cjs.map +0 -1
  208. package/dist/production/theming/useClassNameFactory.js +0 -22
  209. package/dist/production/theming/useClassNameFactory.js.map +0 -1
  210. package/dist/production/theming/useThemedClassName.cjs +0 -17
  211. package/dist/production/theming/useThemedClassName.cjs.map +0 -1
  212. package/dist/production/theming/useThemedClassName.js +0 -17
  213. package/dist/production/theming/useThemedClassName.js.map +0 -1
  214. package/dist/production/theming/useThemedClassNameFactory.cjs +0 -29
  215. package/dist/production/theming/useThemedClassNameFactory.cjs.map +0 -1
  216. package/dist/production/theming/useThemedClassNameFactory.js +0 -29
  217. package/dist/production/theming/useThemedClassNameFactory.js.map +0 -1
  218. package/dist/types/context/createNonNullableContextFactory.d.ts +0 -3
  219. package/dist/types/context/createNonNullableContextFactory.d.ts.map +0 -1
  220. package/dist/types/context/createOptionalContextFactory.d.ts +0 -3
  221. package/dist/types/context/createOptionalContextFactory.d.ts.map +0 -1
  222. package/dist/types/hooks/useAddClassNameDuringResize.d.ts +0 -13
  223. package/dist/types/hooks/useAddClassNameDuringResize.d.ts.map +0 -1
  224. package/dist/types/hooks/useCloseOnClickOutside.d.ts +0 -7
  225. package/dist/types/hooks/useCloseOnClickOutside.d.ts.map +0 -1
  226. package/dist/types/hooks/useCloseOnEscape.d.ts +0 -5
  227. package/dist/types/hooks/useCloseOnEscape.d.ts.map +0 -1
  228. package/dist/types/hooks/useContainerWidth.d.ts +0 -4
  229. package/dist/types/hooks/useContainerWidth.d.ts.map +0 -1
  230. package/dist/types/hooks/useElementSize.d.ts +0 -16
  231. package/dist/types/hooks/useElementSize.d.ts.map +0 -1
  232. package/dist/types/hooks/useElementTopOffset.d.ts +0 -3
  233. package/dist/types/hooks/useElementTopOffset.d.ts.map +0 -1
  234. package/dist/types/hooks/useEventHandler.d.ts +0 -10
  235. package/dist/types/hooks/useEventHandler.d.ts.map +0 -1
  236. package/dist/types/hooks/useOnElementMutation.d.ts +0 -3
  237. package/dist/types/hooks/useOnElementMutation.d.ts.map +0 -1
  238. package/dist/types/hooks/useOnScrollWithin.d.ts +0 -10
  239. package/dist/types/hooks/useOnScrollWithin.d.ts.map +0 -1
  240. package/dist/types/hooks/useScrollOffsets.d.ts +0 -14
  241. package/dist/types/hooks/useScrollOffsets.d.ts.map +0 -1
  242. package/dist/types/theming/ColorSchemeProvider.d.ts +0 -6
  243. package/dist/types/theming/ColorSchemeProvider.d.ts.map +0 -1
  244. package/dist/types/theming/GlobalClassNamePrefixContext.d.ts +0 -2
  245. package/dist/types/theming/GlobalClassNamePrefixContext.d.ts.map +0 -1
  246. package/dist/types/theming/contexts.d.ts +0 -12
  247. package/dist/types/theming/contexts.d.ts.map +0 -1
  248. package/dist/types/theming/index.d.ts +0 -8
  249. package/dist/types/theming/index.d.ts.map +0 -1
  250. package/dist/types/theming/useClassName.d.ts +0 -11
  251. package/dist/types/theming/useClassName.d.ts.map +0 -1
  252. package/dist/types/theming/useClassNameFactory.d.ts +0 -17
  253. package/dist/types/theming/useClassNameFactory.d.ts.map +0 -1
  254. package/dist/types/theming/useThemedClassName.d.ts +0 -39
  255. package/dist/types/theming/useThemedClassName.d.ts.map +0 -1
  256. package/dist/types/theming/useThemedClassNameFactory.d.ts +0 -3
  257. package/dist/types/theming/useThemedClassNameFactory.d.ts.map +0 -1
  258. package/src/context/createOptionalContextFactory.ts +0 -13
  259. package/src/hooks/useAddClassNameDuringResize.ts +0 -56
  260. package/src/hooks/useCloseOnClickOutside.ts +0 -27
  261. package/src/hooks/useCloseOnEscape.ts +0 -18
  262. package/src/hooks/useContainerWidth.ts +0 -13
  263. package/src/hooks/useElementSize.ts +0 -56
  264. package/src/hooks/useElementTopOffset.ts +0 -35
  265. package/src/hooks/useEventHandler.ts +0 -24
  266. package/src/hooks/useOnElementMutation.ts +0 -42
  267. package/src/hooks/useOnScrollWithin.ts +0 -68
  268. package/src/hooks/useScrollOffsets.ts +0 -87
  269. package/src/theming/ColorSchemeProvider.tsx +0 -16
  270. package/src/theming/GlobalClassNamePrefixContext.ts +0 -3
  271. package/src/theming/contexts.ts +0 -18
  272. package/src/theming/index.ts +0 -7
  273. package/src/theming/useClassName.ts +0 -28
  274. package/src/theming/useClassNameFactory.ts +0 -50
  275. package/src/theming/useThemedClassName.ts +0 -54
  276. package/src/theming/useThemedClassNameFactory.ts +0 -44
@@ -1,25 +0,0 @@
1
- import { useEffect } from "react";
2
- const useCloseOnClickOutside = ({ isOpen, close, contents, outside }) => {
3
- useEffect(() => {
4
- if (isOpen) {
5
- const closeOnClickOutside = (event) => {
6
- const target = event.target;
7
- if (target instanceof Node && (!document.body.contains(target) || target === document.body || contents.some((it) => it && it.contains(target)))) {
8
- return;
9
- }
10
- if (contents.every((it) => it === null)) {
11
- return;
12
- }
13
- close();
14
- };
15
- (outside ?? window).addEventListener("click", closeOnClickOutside);
16
- return () => {
17
- (outside ?? window).removeEventListener("click", closeOnClickOutside);
18
- };
19
- }
20
- }, [close, isOpen, contents, outside]);
21
- };
22
- export {
23
- useCloseOnClickOutside
24
- };
25
- //# sourceMappingURL=useCloseOnClickOutside.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCloseOnClickOutside.js","sources":["../../../src/hooks/useCloseOnClickOutside.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnClickOutside = ({ isOpen, close, contents, outside }: { isOpen: boolean, close: () => void, contents: (Node | null)[], outside?: HTMLElement | null }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnClickOutside = (event: Event) => {\n\t\t\t\tconst target = event.target\n\t\t\t\tif (\n\t\t\t\t\ttarget instanceof Node &&\n\t\t\t\t\t(!document.body.contains(target) ||\n\t\t\t\t\t\ttarget === document.body ||\n\t\t\t\t\t\tcontents.some(it => it && it.contains(target)))\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (contents.every(it => it === null)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tclose()\n\t\t\t}\n\t\t\t(outside ?? window).addEventListener('click', closeOnClickOutside)\n\t\t\treturn () => {\n\t\t\t\t(outside ?? window).removeEventListener('click', closeOnClickOutside)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen, contents, outside])\n}\n"],"names":[],"mappings":";AAEO,MAAM,yBAAyB,CAAC,EAAE,QAAQ,OAAO,UAAU,cAA+G;AAChL,YAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,sBAAsB,CAAC,UAAiB;AAC7C,cAAM,SAAS,MAAM;AACrB,YACC,kBAAkB,SACjB,CAAC,SAAS,KAAK,SAAS,MAAM,KAC9B,WAAW,SAAS,QACpB,SAAS,KAAK,CAAM,OAAA,MAAM,GAAG,SAAS,MAAM,CAAC,IAC7C;AACD;AAAA,QACD;AACA,YAAI,SAAS,MAAM,CAAM,OAAA,OAAO,IAAI,GAAG;AACtC;AAAA,QACD;AACM;MAAA;AAEP,OAAC,WAAW,QAAQ,iBAAiB,SAAS,mBAAmB;AACjE,aAAO,MAAM;AACZ,SAAC,WAAW,QAAQ,oBAAoB,SAAS,mBAAmB;AAAA,MAAA;AAAA,IAEtE;AAAA,KACE,CAAC,OAAO,QAAQ,UAAU,OAAO,CAAC;AACtC;"}
@@ -1,20 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const useCloseOnEscape = ({ isOpen, close }) => {
5
- react.useEffect(() => {
6
- if (isOpen) {
7
- const closeOnEscapeKey = (event) => {
8
- if (event.key === "Escape") {
9
- close();
10
- }
11
- };
12
- window.addEventListener("keydown", closeOnEscapeKey);
13
- return () => {
14
- window.removeEventListener("keydown", closeOnEscapeKey);
15
- };
16
- }
17
- }, [close, isOpen]);
18
- };
19
- exports.useCloseOnEscape = useCloseOnEscape;
20
- //# sourceMappingURL=useCloseOnEscape.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCloseOnEscape.cjs","sources":["../../../src/hooks/useCloseOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnEscape = ({ isOpen, close }: { isOpen: boolean, close: () => void }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnEscapeKey = (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === 'Escape') {\n\t\t\t\t\tclose()\n\t\t\t\t}\n\t\t\t}\n\t\t\twindow.addEventListener('keydown', closeOnEscapeKey)\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener('keydown', closeOnEscapeKey)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen])\n}\n"],"names":["useEffect"],"mappings":";;;AAEO,MAAM,mBAAmB,CAAC,EAAE,QAAQ,YAAoD;AAC9FA,QAAAA,UAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,mBAAmB,CAAC,UAAyB;AAC9C,YAAA,MAAM,QAAQ,UAAU;AACrB;QACP;AAAA,MAAA;AAEM,aAAA,iBAAiB,WAAW,gBAAgB;AAEnD,aAAO,MAAM;AACL,eAAA,oBAAoB,WAAW,gBAAgB;AAAA,MAAA;AAAA,IAExD;AAAA,EAAA,GACE,CAAC,OAAO,MAAM,CAAC;AACnB;;"}
@@ -1,20 +0,0 @@
1
- import { useEffect } from "react";
2
- const useCloseOnEscape = ({ isOpen, close }) => {
3
- useEffect(() => {
4
- if (isOpen) {
5
- const closeOnEscapeKey = (event) => {
6
- if (event.key === "Escape") {
7
- close();
8
- }
9
- };
10
- window.addEventListener("keydown", closeOnEscapeKey);
11
- return () => {
12
- window.removeEventListener("keydown", closeOnEscapeKey);
13
- };
14
- }
15
- }, [close, isOpen]);
16
- };
17
- export {
18
- useCloseOnEscape
19
- };
20
- //# sourceMappingURL=useCloseOnEscape.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCloseOnEscape.js","sources":["../../../src/hooks/useCloseOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useCloseOnEscape = ({ isOpen, close }: { isOpen: boolean, close: () => void }) => {\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tconst closeOnEscapeKey = (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === 'Escape') {\n\t\t\t\t\tclose()\n\t\t\t\t}\n\t\t\t}\n\t\t\twindow.addEventListener('keydown', closeOnEscapeKey)\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener('keydown', closeOnEscapeKey)\n\t\t\t}\n\t\t}\n\t}, [close, isOpen])\n}\n"],"names":[],"mappings":";AAEO,MAAM,mBAAmB,CAAC,EAAE,QAAQ,YAAoD;AAC9F,YAAU,MAAM;AACf,QAAI,QAAQ;AACL,YAAA,mBAAmB,CAAC,UAAyB;AAC9C,YAAA,MAAM,QAAQ,UAAU;AACrB;QACP;AAAA,MAAA;AAEM,aAAA,iBAAiB,WAAW,gBAAgB;AAEnD,aAAO,MAAM;AACL,eAAA,oBAAoB,WAAW,gBAAgB;AAAA,MAAA;AAAA,IAExD;AAAA,EAAA,GACE,CAAC,OAAO,MAAM,CAAC;AACnB;"}
@@ -1,14 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const useWindowSize = require("./useWindowSize.cjs");
5
- const ContainerWidthContext = react.createContext(void 0);
6
- ContainerWidthContext.displayName = "ContainerWidthContext";
7
- function useContainerWidth() {
8
- const maybeContainerWidth = react.useContext(ContainerWidthContext);
9
- const { width: windowWidth } = useWindowSize.useWindowSize();
10
- return maybeContainerWidth ?? windowWidth;
11
- }
12
- exports.ContainerWidthContext = ContainerWidthContext;
13
- exports.useContainerWidth = useContainerWidth;
14
- //# sourceMappingURL=useContainerWidth.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useContainerWidth.cjs","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":["createContext","useContext","useWindowSize"],"mappings":";;;;AAIa,MAAA,wBAAwBA,MAAAA,cAA4D,MAAS;AAC1G,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsBC,iBAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAIC,cAAc,cAAA;AAE7C,SAAO,uBAAuB;AAC/B;;;"}
@@ -1,14 +0,0 @@
1
- import { createContext, useContext } from "react";
2
- import { useWindowSize } from "./useWindowSize.js";
3
- const ContainerWidthContext = createContext(void 0);
4
- ContainerWidthContext.displayName = "ContainerWidthContext";
5
- function useContainerWidth() {
6
- const maybeContainerWidth = useContext(ContainerWidthContext);
7
- const { width: windowWidth } = useWindowSize();
8
- return maybeContainerWidth ?? windowWidth;
9
- }
10
- export {
11
- ContainerWidthContext,
12
- useContainerWidth
13
- };
14
- //# sourceMappingURL=useContainerWidth.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useContainerWidth.js","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,cAA4D,MAAS;AAC1G,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsB,WAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc;AAE7C,SAAO,uBAAuB;AAC/B;"}
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const utilities = require("@contember/utilities");
4
- const react = require("react");
5
- const unwrapRefValue = require("./unwrapRefValue.cjs");
6
- const useOnElementResize = require("./useOnElementResize.cjs");
7
- const Context = require("../debug-context/Context.cjs");
8
- const useReferentiallyStableCallback = require("../referentiallyStable/useReferentiallyStableCallback.cjs");
9
- function useElementSize(refOrElement, options = {}, timeout = 300) {
10
- const { logged } = Context.useScopedConsoleRef("useElementSize").current;
11
- const { box = "border-box" } = options;
12
- const getSizeFromResizeObserverEntry = react.useMemo(() => utilities.getSizeFromResizeObserverEntryFactory(box), [box]);
13
- const [width, setWidth] = react.useState();
14
- const [height, setHeight] = react.useState();
15
- logged("dimensions", { width, height });
16
- const maybeSetNewDimensions = useReferentiallyStableCallback.useReferentiallyStableCallback((dimensions) => {
17
- if (width !== dimensions.width) {
18
- setWidth(dimensions.width);
19
- }
20
- if (height !== dimensions.height) {
21
- setHeight(dimensions.height);
22
- }
23
- });
24
- useOnElementResize.useOnElementResize(refOrElement, (entry) => {
25
- const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
26
- maybeSetNewDimensions(dimensions);
27
- }, { box }, timeout);
28
- react.useLayoutEffect(() => {
29
- const element = unwrapRefValue.unwrapRefValue(refOrElement);
30
- if (element) {
31
- utilities.getElementDimensionsCallback(element, (dimensions) => maybeSetNewDimensions(dimensions));
32
- }
33
- });
34
- return { height, width };
35
- }
36
- exports.useElementSize = useElementSize;
37
- //# sourceMappingURL=useElementSize.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useElementSize.cjs","sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport type ElementSize = {\n\theight: number\n\twidth: number\n}\n\n/**\n * Measure HTMLElement\n *\n * @param refOrElement - HTMLElement passed directly or indirectly as RefObject\n * @returns Size vector consisting of width and height properties\n */\nexport function useElementSize(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): { height: number | undefined, width: number | undefined } {\n\tconst { logged } = useScopedConsoleRef('useElementSize').current\n\n\tconst { box = 'border-box' } = options\n\tconst getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])\n\n\tconst [width, setWidth] = useState<number | undefined>()\n\tconst [height, setHeight] = useState<number | undefined>()\n\n\tlogged('dimensions', { width, height })\n\n\tconst maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {\n\t\tif (width !== dimensions.width) {\n\t\t\tsetWidth(dimensions.width)\n\t\t}\n\t\tif (height !== dimensions.height) {\n\t\t\tsetHeight(dimensions.height)\n\t\t}\n\t})\n\n\tuseOnElementResize(refOrElement, entry => {\n\t\tconst dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))\n\t\tmaybeSetNewDimensions(dimensions)\n\t}, { box }, timeout)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\t\tif (element) {\n\t\t\tgetElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))\n\t\t}\n\t})\n\n\treturn { height, width }\n}\n"],"names":["useScopedConsoleRef","useMemo","getSizeFromResizeObserverEntryFactory","useState","useReferentiallyStableCallback","useOnElementResize","useLayoutEffect","unwrapRefValue","getElementDimensionsCallback"],"mappings":";;;;;;;;AAkBO,SAAS,eACf,cACA,UAAiC,CAAA,GACjC,UAAkB,KAC0C;AAC5D,QAAM,EAAE,OAAW,IAAAA,QAAA,oBAAoB,gBAAgB,EAAE;AAEnD,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,iCAAiCC,MAAAA,QAAQ,MAAMC,UAAAA,sCAAsC,GAAG,GAAG,CAAC,GAAG,CAAC;AAEtG,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAA6B,SAAA;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAA6B,SAAA;AAEzD,SAAO,cAAc,EAAE,OAAO,OAAQ,CAAA;AAEhC,QAAA,wBAAwBC,8DAA+B,CAAC,eAA4B;AACrF,QAAA,UAAU,WAAW,OAAO;AAC/B,eAAS,WAAW,KAAK;AAAA,IAC1B;AACI,QAAA,WAAW,WAAW,QAAQ;AACjC,gBAAU,WAAW,MAAM;AAAA,IAC5B;AAAA,EAAA,CACA;AAEDC,wCAAmB,cAAc,CAAS,UAAA;AACzC,UAAM,aAAa,OAAO,0CAA0C,+BAA+B,KAAK,CAAC;AACzG,0BAAsB,UAAU;AAAA,EAAA,GAC9B,EAAE,OAAO,OAAO;AAEnBC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAC3C,QAAI,SAAS;AACZC,gBAAA,6BAA6B,SAAS,CAAA,eAAc,sBAAsB,UAAU,CAAC;AAAA,IACtF;AAAA,EAAA,CACA;AAEM,SAAA,EAAE,QAAQ;AAClB;;"}
@@ -1,37 +0,0 @@
1
- import { getSizeFromResizeObserverEntryFactory, getElementDimensionsCallback } from "@contember/utilities";
2
- import { useMemo, useState, useLayoutEffect } from "react";
3
- import { unwrapRefValue } from "./unwrapRefValue.js";
4
- import { useOnElementResize } from "./useOnElementResize.js";
5
- import { useScopedConsoleRef } from "../debug-context/Context.js";
6
- import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
7
- function useElementSize(refOrElement, options = {}, timeout = 300) {
8
- const { logged } = useScopedConsoleRef("useElementSize").current;
9
- const { box = "border-box" } = options;
10
- const getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box]);
11
- const [width, setWidth] = useState();
12
- const [height, setHeight] = useState();
13
- logged("dimensions", { width, height });
14
- const maybeSetNewDimensions = useReferentiallyStableCallback((dimensions) => {
15
- if (width !== dimensions.width) {
16
- setWidth(dimensions.width);
17
- }
18
- if (height !== dimensions.height) {
19
- setHeight(dimensions.height);
20
- }
21
- });
22
- useOnElementResize(refOrElement, (entry) => {
23
- const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
24
- maybeSetNewDimensions(dimensions);
25
- }, { box }, timeout);
26
- useLayoutEffect(() => {
27
- const element = unwrapRefValue(refOrElement);
28
- if (element) {
29
- getElementDimensionsCallback(element, (dimensions) => maybeSetNewDimensions(dimensions));
30
- }
31
- });
32
- return { height, width };
33
- }
34
- export {
35
- useElementSize
36
- };
37
- //# sourceMappingURL=useElementSize.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useElementSize.js","sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport type ElementSize = {\n\theight: number\n\twidth: number\n}\n\n/**\n * Measure HTMLElement\n *\n * @param refOrElement - HTMLElement passed directly or indirectly as RefObject\n * @returns Size vector consisting of width and height properties\n */\nexport function useElementSize(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): { height: number | undefined, width: number | undefined } {\n\tconst { logged } = useScopedConsoleRef('useElementSize').current\n\n\tconst { box = 'border-box' } = options\n\tconst getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])\n\n\tconst [width, setWidth] = useState<number | undefined>()\n\tconst [height, setHeight] = useState<number | undefined>()\n\n\tlogged('dimensions', { width, height })\n\n\tconst maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {\n\t\tif (width !== dimensions.width) {\n\t\t\tsetWidth(dimensions.width)\n\t\t}\n\t\tif (height !== dimensions.height) {\n\t\t\tsetHeight(dimensions.height)\n\t\t}\n\t})\n\n\tuseOnElementResize(refOrElement, entry => {\n\t\tconst dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))\n\t\tmaybeSetNewDimensions(dimensions)\n\t}, { box }, timeout)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\t\tif (element) {\n\t\t\tgetElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))\n\t\t}\n\t})\n\n\treturn { height, width }\n}\n"],"names":[],"mappings":";;;;;;AAkBO,SAAS,eACf,cACA,UAAiC,CAAA,GACjC,UAAkB,KAC0C;AAC5D,QAAM,EAAE,OAAW,IAAA,oBAAoB,gBAAgB,EAAE;AAEnD,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,iCAAiC,QAAQ,MAAM,sCAAsC,GAAG,GAAG,CAAC,GAAG,CAAC;AAEtG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B;AAEzD,SAAO,cAAc,EAAE,OAAO,OAAQ,CAAA;AAEhC,QAAA,wBAAwB,+BAA+B,CAAC,eAA4B;AACrF,QAAA,UAAU,WAAW,OAAO;AAC/B,eAAS,WAAW,KAAK;AAAA,IAC1B;AACI,QAAA,WAAW,WAAW,QAAQ;AACjC,gBAAU,WAAW,MAAM;AAAA,IAC5B;AAAA,EAAA,CACA;AAED,qBAAmB,cAAc,CAAS,UAAA;AACzC,UAAM,aAAa,OAAO,0CAA0C,+BAA+B,KAAK,CAAC;AACzG,0BAAsB,UAAU;AAAA,EAAA,GAC9B,EAAE,OAAO,OAAO;AAEnB,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAC3C,QAAI,SAAS;AACZ,mCAA6B,SAAS,CAAA,eAAc,sBAAsB,UAAU,CAAC;AAAA,IACtF;AAAA,EAAA,CACA;AAEM,SAAA,EAAE,QAAQ;AAClB;"}
@@ -1,29 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- function useElementTopOffset(ref) {
5
- const [offsetTop, setOffsetTop] = react.useState(void 0);
6
- react.useLayoutEffect(() => {
7
- if (!ref?.current) {
8
- return;
9
- }
10
- const element = ref.current;
11
- function updateTopOffsetCallback() {
12
- setOffsetTop(element.offsetTop);
13
- }
14
- function updateTopOffsetHandler() {
15
- requestAnimationFrame(updateTopOffsetCallback);
16
- }
17
- updateTopOffsetHandler();
18
- const observer = new ResizeObserver(() => {
19
- requestAnimationFrame(updateTopOffsetCallback);
20
- });
21
- observer.observe(element);
22
- return () => {
23
- observer.unobserve(element);
24
- };
25
- }, [ref]);
26
- return offsetTop;
27
- }
28
- exports.useElementTopOffset = useElementTopOffset;
29
- //# sourceMappingURL=useElementTopOffset.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useElementTopOffset.cjs","sources":["../../../src/hooks/useElementTopOffset.ts"],"sourcesContent":["import { RefObject, useLayoutEffect, useState } from 'react'\n\nexport function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {\n\tconst [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)\n\n\tuseLayoutEffect(() => {\n\t\tif (!ref?.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst element = ref.current\n\n\t\tfunction updateTopOffsetCallback() {\n\t\t\tsetOffsetTop(element.offsetTop)\n\t\t}\n\n\t\tfunction updateTopOffsetHandler() {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t}\n\n\t\tupdateTopOffsetHandler()\n\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t})\n\n\t\tobserver.observe(element)\n\n\t\treturn () => {\n\t\t\tobserver.unobserve(element)\n\t\t}\n\t}, [ref])\n\n\treturn offsetTop\n}\n"],"names":["useState","useLayoutEffect"],"mappings":";;;AAEO,SAAS,oBAAoB,KAAkD;AACrF,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAA6B,MAAS;AAExEC,QAAAA,gBAAgB,MAAM;AACjB,QAAA,CAAC,KAAK,SAAS;AAClB;AAAA,IACD;AAEA,UAAM,UAAU,IAAI;AAEpB,aAAS,0BAA0B;AAClC,mBAAa,QAAQ,SAAS;AAAA,IAC/B;AAEA,aAAS,yBAAyB;AACjC,4BAAsB,uBAAuB;AAAA,IAC9C;AAEuB;AAEjB,UAAA,WAAW,IAAI,eAAe,MAAM;AACzC,4BAAsB,uBAAuB;AAAA,IAAA,CAC7C;AAED,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM;AACZ,eAAS,UAAU,OAAO;AAAA,IAAA;AAAA,EAC3B,GACE,CAAC,GAAG,CAAC;AAED,SAAA;AACR;;"}
@@ -1,29 +0,0 @@
1
- import { useState, useLayoutEffect } from "react";
2
- function useElementTopOffset(ref) {
3
- const [offsetTop, setOffsetTop] = useState(void 0);
4
- useLayoutEffect(() => {
5
- if (!ref?.current) {
6
- return;
7
- }
8
- const element = ref.current;
9
- function updateTopOffsetCallback() {
10
- setOffsetTop(element.offsetTop);
11
- }
12
- function updateTopOffsetHandler() {
13
- requestAnimationFrame(updateTopOffsetCallback);
14
- }
15
- updateTopOffsetHandler();
16
- const observer = new ResizeObserver(() => {
17
- requestAnimationFrame(updateTopOffsetCallback);
18
- });
19
- observer.observe(element);
20
- return () => {
21
- observer.unobserve(element);
22
- };
23
- }, [ref]);
24
- return offsetTop;
25
- }
26
- export {
27
- useElementTopOffset
28
- };
29
- //# sourceMappingURL=useElementTopOffset.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useElementTopOffset.js","sources":["../../../src/hooks/useElementTopOffset.ts"],"sourcesContent":["import { RefObject, useLayoutEffect, useState } from 'react'\n\nexport function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {\n\tconst [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)\n\n\tuseLayoutEffect(() => {\n\t\tif (!ref?.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst element = ref.current\n\n\t\tfunction updateTopOffsetCallback() {\n\t\t\tsetOffsetTop(element.offsetTop)\n\t\t}\n\n\t\tfunction updateTopOffsetHandler() {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t}\n\n\t\tupdateTopOffsetHandler()\n\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t})\n\n\t\tobserver.observe(element)\n\n\t\treturn () => {\n\t\t\tobserver.unobserve(element)\n\t\t}\n\t}, [ref])\n\n\treturn offsetTop\n}\n"],"names":[],"mappings":";AAEO,SAAS,oBAAoB,KAAkD;AACrF,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,kBAAgB,MAAM;AACjB,QAAA,CAAC,KAAK,SAAS;AAClB;AAAA,IACD;AAEA,UAAM,UAAU,IAAI;AAEpB,aAAS,0BAA0B;AAClC,mBAAa,QAAQ,SAAS;AAAA,IAC/B;AAEA,aAAS,yBAAyB;AACjC,4BAAsB,uBAAuB;AAAA,IAC9C;AAEuB;AAEjB,UAAA,WAAW,IAAI,eAAe,MAAM;AACzC,4BAAsB,uBAAuB;AAAA,IAAA,CAC7C;AAED,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM;AACZ,eAAS,UAAU,OAAO;AAAA,IAAA;AAAA,EAC3B,GACE,CAAC,GAAG,CAAC;AAED,SAAA;AACR;"}
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- function useEventHandler(type, callback) {
5
- const callbackRef = react.useRef(callback);
6
- callbackRef.current = callback;
7
- const stableHandler = react.useRef(function(event) {
8
- return callbackRef.current(event);
9
- }).current;
10
- react.useEffect(() => {
11
- return () => {
12
- callbackRef.current = () => {
13
- };
14
- };
15
- }, []);
16
- return stableHandler;
17
- }
18
- exports.useEventHandler = useEventHandler;
19
- //# sourceMappingURL=useEventHandler.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useEventHandler.cjs","sources":["../../../src/hooks/useEventHandler.ts"],"sourcesContent":["import { EventHandler, SyntheticEvent, useEffect, useRef } from 'react'\n\n/**\n * Similar to useEvent with inferred type for the event parameter according to event type\n *\n * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...\n * @param callback - EventHandler\n * @returns Stable reference callback\n */\nexport function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E> {\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\n\tconst stableHandler = useRef(function (event: any) {\n\t\treturn callbackRef.current(event)\n\t}).current\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tcallbackRef.current = () => { }\n\t\t}\n\t}, [])\n\n\treturn stableHandler\n}\n"],"names":["useRef","useEffect"],"mappings":";;;AASgB,SAAA,gBAA+C,MAAiB,UAA4C;AACrH,QAAA,cAAcA,aAAO,QAAQ;AAAG,cAAY,UAAU;AAEtD,QAAA,gBAAgBA,aAAO,SAAU,OAAY;AAC3C,WAAA,YAAY,QAAQ,KAAK;AAAA,EAChC,CAAA,EAAE;AAEHC,QAAAA,UAAU,MAAM;AACf,WAAO,MAAM;AACZ,kBAAY,UAAU,MAAM;AAAA,MAAA;AAAA,IAAE;AAAA,EAEhC,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;;"}
@@ -1,19 +0,0 @@
1
- import { useRef, useEffect } from "react";
2
- function useEventHandler(type, callback) {
3
- const callbackRef = useRef(callback);
4
- callbackRef.current = callback;
5
- const stableHandler = useRef(function(event) {
6
- return callbackRef.current(event);
7
- }).current;
8
- useEffect(() => {
9
- return () => {
10
- callbackRef.current = () => {
11
- };
12
- };
13
- }, []);
14
- return stableHandler;
15
- }
16
- export {
17
- useEventHandler
18
- };
19
- //# sourceMappingURL=useEventHandler.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useEventHandler.js","sources":["../../../src/hooks/useEventHandler.ts"],"sourcesContent":["import { EventHandler, SyntheticEvent, useEffect, useRef } from 'react'\n\n/**\n * Similar to useEvent with inferred type for the event parameter according to event type\n *\n * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...\n * @param callback - EventHandler\n * @returns Stable reference callback\n */\nexport function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E> {\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\n\tconst stableHandler = useRef(function (event: any) {\n\t\treturn callbackRef.current(event)\n\t}).current\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tcallbackRef.current = () => { }\n\t\t}\n\t}, [])\n\n\treturn stableHandler\n}\n"],"names":[],"mappings":";AASgB,SAAA,gBAA+C,MAAiB,UAA4C;AACrH,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AAEtD,QAAA,gBAAgB,OAAO,SAAU,OAAY;AAC3C,WAAA,YAAY,QAAQ,KAAK;AAAA,EAChC,CAAA,EAAE;AAEH,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,kBAAY,UAAU,MAAM;AAAA,MAAA;AAAA,IAAE;AAAA,EAEhC,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;"}
@@ -1,35 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const deepEqual = require("fast-deep-equal/es6/index.js");
4
- const react = require("react");
5
- const unwrapRefValue = require("./unwrapRefValue.cjs");
6
- const Context = require("../debug-context/Context.cjs");
7
- function useOnElementMutation(refOrElement, callback, options = { attributes: true, childList: true, subtree: true }) {
8
- const scopedConsoleRef = Context.useScopedConsoleRef("useOnElementMutation");
9
- const callbackRef = react.useRef(callback);
10
- callbackRef.current = callback;
11
- const optionsRef = react.useRef(options);
12
- optionsRef.current = options;
13
- const [optionsState, setOptionsState] = react.useState(options);
14
- react.useEffect(() => {
15
- if (!deepEqual(optionsRef.current, options)) {
16
- setOptionsState(options);
17
- }
18
- }, [options]);
19
- react.useLayoutEffect(() => {
20
- const element = unwrapRefValue.unwrapRefValue(refOrElement);
21
- if (element) {
22
- let handler = function(mutations, observer2) {
23
- scopedConsoleRef.current.logged("element.mutations", mutations);
24
- callbackRef.current(mutations, observer2);
25
- };
26
- const observer = new MutationObserver(handler);
27
- observer.observe(element, optionsState);
28
- return () => {
29
- observer.disconnect();
30
- };
31
- }
32
- }, [optionsState, refOrElement, scopedConsoleRef]);
33
- }
34
- exports.useOnElementMutation = useOnElementMutation;
35
- //# sourceMappingURL=useOnElementMutation.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useOnElementMutation.cjs","sources":["../../../src/hooks/useOnElementMutation.ts"],"sourcesContent":["import deepEqual from 'fast-deep-equal/es6/index.js'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementMutation(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tcallback: MutationCallback,\n\toptions: MutationObserverInit = { attributes: true, childList: true, subtree: true },\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options\n\n\tconst [optionsState, setOptionsState] = useState<MutationObserverInit>(options)\n\n\tuseEffect(() => {\n\t\tif (!deepEqual(optionsRef.current, options)) {\n\t\t\tsetOptionsState(options)\n\t\t}\n\t}, [options])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tfunction handler(mutations: MutationRecord[], observer: MutationObserver) {\n\t\t\t\tscopedConsoleRef.current.logged('element.mutations', mutations)\n\t\t\t\tcallbackRef.current(mutations, observer)\n\t\t\t}\n\n\t\t\tconst observer = new MutationObserver(handler)\n\n\t\t\tobserver.observe(element, optionsState)\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t}\n\t}, [optionsState, refOrElement, scopedConsoleRef])\n}\n"],"names":["useScopedConsoleRef","useRef","useState","useEffect","useLayoutEffect","unwrapRefValue","observer"],"mappings":";;;;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmBA,4BAAoB,sBAAsB;AAE7D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAaA,aAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAIC,eAA+B,OAAO;AAE9EC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BC,WAA4B;AACxD,yBAAA,QAAQ,OAAO,qBAAqB,SAAS;AAClD,oBAAA,QAAQ,WAAWA,SAAQ;AAAA,MAAA;AAGlC,YAAA,WAAW,IAAI,iBAAiB,OAAO;AAEpC,eAAA,QAAQ,SAAS,YAAY;AAEtC,aAAO,MAAM;AACZ,iBAAS,WAAW;AAAA,MAAA;AAAA,IAEtB;AAAA,EACE,GAAA,CAAC,cAAc,cAAc,gBAAgB,CAAC;AAClD;;"}
@@ -1,35 +0,0 @@
1
- import deepEqual from "fast-deep-equal/es6/index.js";
2
- import { useRef, useState, useEffect, useLayoutEffect } from "react";
3
- import { unwrapRefValue } from "./unwrapRefValue.js";
4
- import { useScopedConsoleRef } from "../debug-context/Context.js";
5
- function useOnElementMutation(refOrElement, callback, options = { attributes: true, childList: true, subtree: true }) {
6
- const scopedConsoleRef = useScopedConsoleRef("useOnElementMutation");
7
- const callbackRef = useRef(callback);
8
- callbackRef.current = callback;
9
- const optionsRef = useRef(options);
10
- optionsRef.current = options;
11
- const [optionsState, setOptionsState] = useState(options);
12
- useEffect(() => {
13
- if (!deepEqual(optionsRef.current, options)) {
14
- setOptionsState(options);
15
- }
16
- }, [options]);
17
- useLayoutEffect(() => {
18
- const element = unwrapRefValue(refOrElement);
19
- if (element) {
20
- let handler = function(mutations, observer2) {
21
- scopedConsoleRef.current.logged("element.mutations", mutations);
22
- callbackRef.current(mutations, observer2);
23
- };
24
- const observer = new MutationObserver(handler);
25
- observer.observe(element, optionsState);
26
- return () => {
27
- observer.disconnect();
28
- };
29
- }
30
- }, [optionsState, refOrElement, scopedConsoleRef]);
31
- }
32
- export {
33
- useOnElementMutation
34
- };
35
- //# sourceMappingURL=useOnElementMutation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useOnElementMutation.js","sources":["../../../src/hooks/useOnElementMutation.ts"],"sourcesContent":["import deepEqual from 'fast-deep-equal/es6/index.js'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementMutation(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tcallback: MutationCallback,\n\toptions: MutationObserverInit = { attributes: true, childList: true, subtree: true },\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options\n\n\tconst [optionsState, setOptionsState] = useState<MutationObserverInit>(options)\n\n\tuseEffect(() => {\n\t\tif (!deepEqual(optionsRef.current, options)) {\n\t\t\tsetOptionsState(options)\n\t\t}\n\t}, [options])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tfunction handler(mutations: MutationRecord[], observer: MutationObserver) {\n\t\t\t\tscopedConsoleRef.current.logged('element.mutations', mutations)\n\t\t\t\tcallbackRef.current(mutations, observer)\n\t\t\t}\n\n\t\t\tconst observer = new MutationObserver(handler)\n\n\t\t\tobserver.observe(element, optionsState)\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t}\n\t}, [optionsState, refOrElement, scopedConsoleRef])\n}\n"],"names":["observer"],"mappings":";;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmB,oBAAoB,sBAAsB;AAE7D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAa,OAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA+B,OAAO;AAE9E,YAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZ,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BA,WAA4B;AACxD,yBAAA,QAAQ,OAAO,qBAAqB,SAAS;AAClD,oBAAA,QAAQ,WAAWA,SAAQ;AAAA,MAAA;AAGlC,YAAA,WAAW,IAAI,iBAAiB,OAAO;AAEpC,eAAA,QAAQ,SAAS,YAAY;AAEtC,aAAO,MAAM;AACZ,iBAAS,WAAW;AAAA,MAAA;AAAA,IAEtB;AAAA,EACE,GAAA,CAAC,cAAc,cAAc,gBAAgB,CAAC;AAClD;"}
@@ -1,52 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const unwrapRefValue = require("./unwrapRefValue.cjs");
5
- const Context = require("../debug-context/Context.cjs");
6
- function useOnScrollWithin(refOrElement, callback, interval = 1e3 / 60) {
7
- const scopedConsoleRef = Context.useScopedConsoleRef("useOnScrollWithin");
8
- const callbackRef = react.useRef(callback);
9
- callbackRef.current = callback;
10
- const lastTimeStamp = react.useRef(0);
11
- react.useLayoutEffect(() => {
12
- const element = unwrapRefValue.unwrapRefValue(refOrElement);
13
- let timeoutID = void 0;
14
- if (element) {
15
- let debouncedHandler = function(event) {
16
- clearTimeout(timeoutID);
17
- const delta = event.timeStamp - lastTimeStamp.current;
18
- scopedConsoleRef.current.logged("event:element.scroll:delta", delta);
19
- if (delta > interval) {
20
- scopedConsoleRef.current.warned("event:element.scroll:immediately", event);
21
- callbackRef.current(event);
22
- lastTimeStamp.current = event.timeStamp;
23
- } else {
24
- timeoutID = setTimeout(() => {
25
- scopedConsoleRef.current.warned("event:element.scroll:debounced", event);
26
- lastTimeStamp.current = event.timeStamp;
27
- callbackRef.current(event);
28
- }, interval);
29
- }
30
- };
31
- if (element instanceof HTMLElement) {
32
- if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
33
- window.addEventListener("scroll", debouncedHandler, { capture: true, passive: true });
34
- window.addEventListener("resize", debouncedHandler);
35
- return () => {
36
- window.removeEventListener("scroll", debouncedHandler);
37
- window.removeEventListener("resize", debouncedHandler);
38
- };
39
- } else {
40
- element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
41
- return () => {
42
- element.removeEventListener("scroll", debouncedHandler);
43
- };
44
- }
45
- } else {
46
- throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
47
- }
48
- }
49
- }, [interval, refOrElement, scopedConsoleRef]);
50
- }
51
- exports.useOnScrollWithin = useOnScrollWithin;
52
- //# sourceMappingURL=useOnScrollWithin.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useOnScrollWithin.cjs","sources":["../../../src/hooks/useOnScrollWithin.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Invokes callback on scroll event within the scroll container\n *\n * @param refOrElement - Scroll container\n * @param callback - Callback that is invoked on scroll event\n * @param interval - Specifies how often should scroll event invoke callback\n */\nexport function useOnScrollWithin(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (event: Event) => void,\n\tinterval: number = 1000 / 60,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tif (element) {\n\t\t\tfunction debouncedHandler(event: Event) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\t\tscopedConsoleRef.current.logged('event:element.scroll:delta', delta)\n\n\t\t\t\tif (delta > interval) {\n\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:immediately', event)\n\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t} else {\n\t\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:debounced', event)\n\t\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\t}, interval)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\tif (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {\n\t\t\t\t\twindow.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })\n\t\t\t\t\twindow.addEventListener('resize', debouncedHandler)\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\twindow.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\telement.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\telement.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t\t}\n\t\t}\n\t}, [interval, refOrElement, scopedConsoleRef])\n}\n"],"names":["useScopedConsoleRef","useRef","useLayoutEffect","unwrapRefValue"],"mappings":";;;;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmBA,4BAAoB,mBAAmB;AAE1D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgBA,aAAe,CAAC;AAEtCC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAE3C,QAAI,YAAgC;AAEpC,QAAI,SAAS;AACH,UAAA,mBAAT,SAA0B,OAAc;AACvC,qBAAa,SAAS;AAEhB,cAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,yBAAA,QAAQ,OAAO,8BAA8B,KAAK;AAEnE,YAAI,QAAQ,UAAU;AACJ,2BAAA,QAAQ,OAAO,oCAAoC,KAAK;AACzE,sBAAY,QAAQ,KAAK;AACzB,wBAAc,UAAU,MAAM;AAAA,QAAA,OACxB;AACN,sBAAY,WAAW,MAAM;AACX,6BAAA,QAAQ,OAAO,kCAAkC,KAAK;AACvE,0BAAc,UAAU,MAAM;AAC9B,wBAAY,QAAQ,KAAK;AAAA,aACvB,QAAQ;AAAA,QACZ;AAAA,MAAA;AAGD,UAAI,mBAAmB,aAAa;AAC/B,YAAA,mBAAmB,mBAAmB,mBAAmB,iBAAiB;AACtE,iBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAC7E,iBAAA,iBAAiB,UAAU,gBAAgB;AAElD,iBAAO,MAAM;AACL,mBAAA,oBAAoB,UAAU,gBAAgB;AAC9C,mBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QACtD,OACM;AACE,kBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAErF,iBAAO,MAAM;AACJ,oBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QAExD;AAAA,MAAA,OACM;AACA,cAAA,IAAI,MAAM,mEAAmE;AAAA,MACpF;AAAA,IACD;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,gBAAgB,CAAC;AAC9C;;"}
@@ -1,52 +0,0 @@
1
- import { useRef, useLayoutEffect } from "react";
2
- import { unwrapRefValue } from "./unwrapRefValue.js";
3
- import { useScopedConsoleRef } from "../debug-context/Context.js";
4
- function useOnScrollWithin(refOrElement, callback, interval = 1e3 / 60) {
5
- const scopedConsoleRef = useScopedConsoleRef("useOnScrollWithin");
6
- const callbackRef = useRef(callback);
7
- callbackRef.current = callback;
8
- const lastTimeStamp = useRef(0);
9
- useLayoutEffect(() => {
10
- const element = unwrapRefValue(refOrElement);
11
- let timeoutID = void 0;
12
- if (element) {
13
- let debouncedHandler = function(event) {
14
- clearTimeout(timeoutID);
15
- const delta = event.timeStamp - lastTimeStamp.current;
16
- scopedConsoleRef.current.logged("event:element.scroll:delta", delta);
17
- if (delta > interval) {
18
- scopedConsoleRef.current.warned("event:element.scroll:immediately", event);
19
- callbackRef.current(event);
20
- lastTimeStamp.current = event.timeStamp;
21
- } else {
22
- timeoutID = setTimeout(() => {
23
- scopedConsoleRef.current.warned("event:element.scroll:debounced", event);
24
- lastTimeStamp.current = event.timeStamp;
25
- callbackRef.current(event);
26
- }, interval);
27
- }
28
- };
29
- if (element instanceof HTMLElement) {
30
- if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
31
- window.addEventListener("scroll", debouncedHandler, { capture: true, passive: true });
32
- window.addEventListener("resize", debouncedHandler);
33
- return () => {
34
- window.removeEventListener("scroll", debouncedHandler);
35
- window.removeEventListener("resize", debouncedHandler);
36
- };
37
- } else {
38
- element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
39
- return () => {
40
- element.removeEventListener("scroll", debouncedHandler);
41
- };
42
- }
43
- } else {
44
- throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
45
- }
46
- }
47
- }, [interval, refOrElement, scopedConsoleRef]);
48
- }
49
- export {
50
- useOnScrollWithin
51
- };
52
- //# sourceMappingURL=useOnScrollWithin.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useOnScrollWithin.js","sources":["../../../src/hooks/useOnScrollWithin.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Invokes callback on scroll event within the scroll container\n *\n * @param refOrElement - Scroll container\n * @param callback - Callback that is invoked on scroll event\n * @param interval - Specifies how often should scroll event invoke callback\n */\nexport function useOnScrollWithin(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (event: Event) => void,\n\tinterval: number = 1000 / 60,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tif (element) {\n\t\t\tfunction debouncedHandler(event: Event) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\t\tscopedConsoleRef.current.logged('event:element.scroll:delta', delta)\n\n\t\t\t\tif (delta > interval) {\n\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:immediately', event)\n\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t} else {\n\t\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:debounced', event)\n\t\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\t}, interval)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\tif (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {\n\t\t\t\t\twindow.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })\n\t\t\t\t\twindow.addEventListener('resize', debouncedHandler)\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\twindow.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\telement.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\telement.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t\t}\n\t\t}\n\t}, [interval, refOrElement, scopedConsoleRef])\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmB,oBAAoB,mBAAmB;AAE1D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgB,OAAe,CAAC;AAEtC,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,YAAgC;AAEpC,QAAI,SAAS;AACH,UAAA,mBAAT,SAA0B,OAAc;AACvC,qBAAa,SAAS;AAEhB,cAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,yBAAA,QAAQ,OAAO,8BAA8B,KAAK;AAEnE,YAAI,QAAQ,UAAU;AACJ,2BAAA,QAAQ,OAAO,oCAAoC,KAAK;AACzE,sBAAY,QAAQ,KAAK;AACzB,wBAAc,UAAU,MAAM;AAAA,QAAA,OACxB;AACN,sBAAY,WAAW,MAAM;AACX,6BAAA,QAAQ,OAAO,kCAAkC,KAAK;AACvE,0BAAc,UAAU,MAAM;AAC9B,wBAAY,QAAQ,KAAK;AAAA,aACvB,QAAQ;AAAA,QACZ;AAAA,MAAA;AAGD,UAAI,mBAAmB,aAAa;AAC/B,YAAA,mBAAmB,mBAAmB,mBAAmB,iBAAiB;AACtE,iBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAC7E,iBAAA,iBAAiB,UAAU,gBAAgB;AAElD,iBAAO,MAAM;AACL,mBAAA,oBAAoB,UAAU,gBAAgB;AAC9C,mBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QACtD,OACM;AACE,kBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAErF,iBAAO,MAAM;AACJ,oBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QAExD;AAAA,MAAA,OACM;AACA,cAAA,IAAI,MAAM,mEAAmE;AAAA,MACpF;AAAA,IACD;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,gBAAgB,CAAC;AAC9C;"}
@@ -1,67 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const utilities = require("@contember/utilities");
4
- const react = require("react");
5
- const unwrapRefValue = require("./unwrapRefValue.cjs");
6
- const useOnScrollWithin = require("./useOnScrollWithin.cjs");
7
- const useOnWindowResize = require("./useOnWindowResize.cjs");
8
- const Context = require("../debug-context/Context.cjs");
9
- const useReferentiallyStableCallback = require("../referentiallyStable/useReferentiallyStableCallback.cjs");
10
- function useScrollOffsets(refOrElement, interval = 1e3 / 60) {
11
- const { logged } = Context.useScopedConsoleRef("useScrollOffsets").current;
12
- const [top, setTop] = react.useState(0);
13
- const [bottom, setBottom] = react.useState(0);
14
- const [left, setLeft] = react.useState(0);
15
- const [right, setRight] = react.useState(0);
16
- const updateScrollOffsetsState = useReferentiallyStableCallback.useReferentiallyStableCallback((offsets) => {
17
- logged("Update the offsets:", {
18
- previous: { bottom, left, right, top },
19
- next: offsets
20
- });
21
- if (offsets.bottom !== bottom)
22
- setBottom(offsets.bottom);
23
- if (offsets.left !== left)
24
- setLeft(offsets.left);
25
- if (offsets.right !== right)
26
- setRight(offsets.right);
27
- if (offsets.top !== top)
28
- setTop(offsets.top);
29
- });
30
- const handler = useReferentiallyStableCallback.useReferentiallyStableCallback(() => {
31
- const maybeScrollContent = unwrapRefValue.unwrapRefValue(refOrElement) ?? document;
32
- if (maybeScrollContent) {
33
- getElementScrollOffsets(maybeScrollContent).then(updateScrollOffsetsState);
34
- }
35
- });
36
- useOnScrollWithin.useOnScrollWithin(refOrElement, handler, interval);
37
- useOnWindowResize.useOnWindowResize(handler);
38
- react.useLayoutEffect(handler, [handler]);
39
- return react.useMemo(() => ({ bottom, left, right, top }), [bottom, left, right, top]);
40
- }
41
- function isIntrinsicScrollElement(element) {
42
- return element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement || element instanceof DocumentType || element instanceof Document || element instanceof HTMLDocument;
43
- }
44
- function getIntrinsicScrollContainer(element) {
45
- const html = document.body.parentElement;
46
- utilities.assert("HTML element exists", html, (value) => value instanceof HTMLElement);
47
- if (isIntrinsicScrollElement(element)) {
48
- return html;
49
- } else {
50
- return element;
51
- }
52
- }
53
- async function getElementScrollOffsets(element) {
54
- const isIntrinsicScrolling = isIntrinsicScrollElement(element);
55
- const scrollContainer = getIntrinsicScrollContainer(element);
56
- const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer;
57
- const { height: scrollContainerHeight, width: scrollContainerWidth } = await utilities.getElementDimensions(scrollContainer);
58
- const height = isIntrinsicScrolling ? window.innerHeight : scrollContainerHeight;
59
- const width = isIntrinsicScrolling ? window.innerWidth : scrollContainerWidth;
60
- const left = Math.round(scrollLeft);
61
- const top = Math.round(scrollTop);
62
- const right = Math.round(scrollWidth - width - left);
63
- const bottom = Math.round(scrollHeight - height - top);
64
- return { bottom, left, right, top };
65
- }
66
- exports.useScrollOffsets = useScrollOffsets;
67
- //# sourceMappingURL=useScrollOffsets.cjs.map