@prom-ui/core 2.5.0-alpha.0 → 3.0.0-alpha.0

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 (360) hide show
  1. package/Avatar/cjs/index.development.js +8 -0
  2. package/Avatar/cjs/index.development.v2.js +8 -0
  3. package/Avatar/cjs/index.production.js +1 -1
  4. package/Avatar/cjs/index.production.v2.js +1 -1
  5. package/Avatar/index.d.ts +13 -5
  6. package/Avatar/package.json +1 -1
  7. package/Backdrop/cjs/index.development.js +5 -3
  8. package/Backdrop/cjs/index.development.v2.js +5 -3
  9. package/Backdrop/cjs/index.production.js +1 -1
  10. package/Backdrop/cjs/index.production.v2.js +1 -1
  11. package/Backdrop/index.d.ts +11 -9
  12. package/Backdrop/package.json +1 -1
  13. package/Badge/cjs/index.development.js +7 -1
  14. package/Badge/cjs/index.development.v2.js +7 -1
  15. package/Badge/cjs/index.production.js +1 -1
  16. package/Badge/cjs/index.production.v2.js +1 -1
  17. package/Badge/index.d.ts +17 -9
  18. package/Badge/package.json +1 -1
  19. package/Body/cjs/index.development.js +22 -0
  20. package/Body/cjs/index.development.v2.js +22 -0
  21. package/Body/index.d.ts +68 -0
  22. package/Body/package.json +1 -1
  23. package/BodyProvider/cjs/index.development.js +103 -151
  24. package/BodyProvider/cjs/index.development.v2.js +103 -151
  25. package/BodyProvider/cjs/index.production.js +1 -1
  26. package/BodyProvider/cjs/index.production.v2.js +1 -1
  27. package/BodyProvider/hooks/useSyncDomColorScheme.d.ts +10 -0
  28. package/BodyProvider/hooks/useSyncStoreProps.d.ts +13 -0
  29. package/BodyProvider/index.d.ts +17 -1
  30. package/BodyProvider/package.json +1 -1
  31. package/BodyProvider/slices/sliceColorScheme.d.ts +16 -0
  32. package/BodyProvider/slices/sliceTTag.d.ts +1 -1
  33. package/BodyProvider/store.d.ts +4 -2
  34. package/BodyScrollLock/cjs/index.development.js +7 -0
  35. package/BodyScrollLock/cjs/index.development.v2.js +7 -0
  36. package/BodyScrollLock/cjs/index.production.js +1 -1
  37. package/BodyScrollLock/cjs/index.production.v2.js +1 -1
  38. package/BodyScrollLock/index.d.ts +8 -0
  39. package/BodyScrollLock/package.json +1 -1
  40. package/Box/cjs/index.development.js +14 -3
  41. package/Box/cjs/index.development.v2.js +14 -3
  42. package/Box/index.d.ts +110 -3
  43. package/Box/package.json +1 -1
  44. package/Button/cjs/index.development.js +16 -0
  45. package/Button/cjs/index.development.v2.js +16 -0
  46. package/Button/cjs/index.production.js +1 -1
  47. package/Button/cjs/index.production.v2.js +1 -1
  48. package/Button/index.d.ts +87 -1
  49. package/Button/package.json +1 -1
  50. package/ButtonPageUp/cjs/index.development.js +8 -0
  51. package/ButtonPageUp/cjs/index.development.v2.js +8 -0
  52. package/ButtonPageUp/cjs/index.production.js +1 -1
  53. package/ButtonPageUp/cjs/index.production.v2.js +1 -1
  54. package/ButtonPageUp/index.d.ts +14 -5
  55. package/ButtonPageUp/package.json +1 -1
  56. package/Checkbox/cjs/index.development.js +6 -0
  57. package/Checkbox/cjs/index.development.v2.js +6 -0
  58. package/Checkbox/cjs/index.production.js +1 -1
  59. package/Checkbox/cjs/index.production.v2.js +1 -1
  60. package/Checkbox/index.d.ts +9 -0
  61. package/Checkbox/package.json +1 -1
  62. package/ColorScheme/cjs/index.development.js +14 -3
  63. package/ColorScheme/cjs/index.development.v2.js +14 -3
  64. package/ColorScheme/cjs/index.production.js +1 -1
  65. package/ColorScheme/cjs/index.production.v2.js +1 -1
  66. package/ColorScheme/index.d.ts +12 -2
  67. package/ColorScheme/package.json +1 -1
  68. package/ContextMenu/cjs/index.development.js +8 -0
  69. package/ContextMenu/cjs/index.development.v2.js +8 -0
  70. package/ContextMenu/cjs/index.production.js +1 -1
  71. package/ContextMenu/cjs/index.production.v2.js +1 -1
  72. package/ContextMenu/index.d.ts +14 -5
  73. package/ContextMenu/package.json +1 -1
  74. package/ErrorCatch/ErrorCatch.d.ts +9 -3
  75. package/ErrorCatch/cjs/index.development.js +6 -1
  76. package/ErrorCatch/cjs/index.development.v2.js +6 -1
  77. package/ErrorCatch/cjs/index.production.js +1 -1
  78. package/ErrorCatch/cjs/index.production.v2.js +1 -1
  79. package/ErrorCatch/package.json +1 -1
  80. package/Flex/cjs/index.development.js +30 -0
  81. package/Flex/cjs/index.development.v2.js +30 -0
  82. package/Flex/index.d.ts +86 -0
  83. package/Flex/package.json +1 -1
  84. package/Grid/cjs/index.development.js +30 -2
  85. package/Grid/cjs/index.development.v2.js +30 -2
  86. package/Grid/cjs/index.production.js +1 -1
  87. package/Grid/cjs/index.production.v2.js +1 -1
  88. package/Grid/cjs/style.development.css +1324 -4959
  89. package/Grid/cjs/style.development.v2.css +1324 -4959
  90. package/Grid/cjs/style.production.css +1 -1
  91. package/Grid/cjs/style.production.v2.css +1 -1
  92. package/Grid/index.d.ts +94 -9
  93. package/Grid/package.json +1 -1
  94. package/Icon/cjs/index.development.js +13 -0
  95. package/Icon/cjs/index.development.v2.js +13 -0
  96. package/Icon/index.d.ts +29 -2
  97. package/Icon/package.json +1 -1
  98. package/Image/cjs/index.development.js +16 -0
  99. package/Image/cjs/index.development.v2.js +16 -0
  100. package/Image/cjs/style.development.css +1 -2
  101. package/Image/cjs/style.development.v2.css +1 -2
  102. package/Image/cjs/style.production.css +1 -1
  103. package/Image/cjs/style.production.v2.css +1 -1
  104. package/Image/index.d.ts +74 -0
  105. package/Image/package.json +1 -1
  106. package/ImageEmoji/cjs/index.development.js +6 -0
  107. package/ImageEmoji/cjs/index.development.v2.js +6 -0
  108. package/ImageEmoji/cjs/index.production.js +1 -1
  109. package/ImageEmoji/cjs/index.production.v2.js +1 -1
  110. package/ImageEmoji/index.d.ts +8 -1
  111. package/ImageEmoji/package.json +1 -1
  112. package/Input/cjs/index.development.js +15 -0
  113. package/Input/cjs/index.development.v2.js +15 -0
  114. package/Input/index.d.ts +35 -0
  115. package/Input/package.json +1 -1
  116. package/InputField/cjs/index.development.js +7 -0
  117. package/InputField/cjs/index.development.v2.js +7 -0
  118. package/InputField/cjs/index.production.js +1 -1
  119. package/InputField/cjs/index.production.v2.js +1 -1
  120. package/InputField/index.d.ts +13 -4
  121. package/InputField/package.json +1 -1
  122. package/KeyPress/cjs/index.development.js +8 -0
  123. package/KeyPress/cjs/index.development.v2.js +8 -0
  124. package/KeyPress/cjs/index.production.js +1 -1
  125. package/KeyPress/cjs/index.production.v2.js +1 -1
  126. package/KeyPress/index.d.ts +11 -4
  127. package/KeyPress/package.json +1 -1
  128. package/Label/cjs/index.development.js +9 -1
  129. package/Label/cjs/index.development.v2.js +9 -1
  130. package/Label/index.d.ts +15 -2
  131. package/Label/package.json +1 -1
  132. package/Line/cjs/index.development.js +11 -0
  133. package/Line/cjs/index.development.v2.js +11 -0
  134. package/Line/index.d.ts +35 -0
  135. package/Line/package.json +1 -1
  136. package/Link/cjs/index.development.js +10 -4
  137. package/Link/cjs/index.development.v2.js +10 -4
  138. package/Link/cjs/style.development.css +1 -2
  139. package/Link/cjs/style.development.v2.css +1 -2
  140. package/Link/cjs/style.production.css +1 -1
  141. package/Link/cjs/style.production.v2.css +1 -1
  142. package/Link/index.d.ts +61 -3
  143. package/Link/package.json +1 -1
  144. package/List/cjs/index.development.js +22 -0
  145. package/List/cjs/index.development.v2.js +22 -0
  146. package/List/index.d.ts +64 -0
  147. package/List/package.json +1 -1
  148. package/Media/cjs/index.development.js +6 -1
  149. package/Media/cjs/index.development.v2.js +6 -1
  150. package/Media/cjs/index.production.js +1 -1
  151. package/Media/cjs/index.production.v2.js +1 -1
  152. package/Media/index.d.ts +8 -3
  153. package/Media/package.json +1 -1
  154. package/Modal/cjs/index.development.js +8 -0
  155. package/Modal/cjs/index.development.v2.js +8 -0
  156. package/Modal/cjs/index.production.js +1 -1
  157. package/Modal/cjs/index.production.v2.js +1 -1
  158. package/Modal/index.d.ts +16 -8
  159. package/Modal/package.json +1 -1
  160. package/OutsideClick/cjs/index.development.js +8 -0
  161. package/OutsideClick/cjs/index.development.v2.js +8 -0
  162. package/OutsideClick/cjs/index.production.js +1 -1
  163. package/OutsideClick/cjs/index.production.v2.js +1 -1
  164. package/OutsideClick/index.d.ts +10 -2
  165. package/OutsideClick/package.json +1 -1
  166. package/Overlay/cjs/index.development.js +7 -2
  167. package/Overlay/cjs/index.development.v2.js +7 -2
  168. package/Overlay/cjs/index.production.js +1 -1
  169. package/Overlay/cjs/index.production.v2.js +1 -1
  170. package/Overlay/index.d.ts +34 -29
  171. package/Overlay/package.json +1 -1
  172. package/PhotoGallery/cjs/index.development.js +22 -3
  173. package/PhotoGallery/cjs/index.development.v2.js +22 -3
  174. package/PhotoGallery/cjs/index.production.js +1 -1
  175. package/PhotoGallery/cjs/index.production.v2.js +1 -1
  176. package/PhotoGallery/cjs/style.development.css +34 -18
  177. package/PhotoGallery/cjs/style.development.v2.css +34 -18
  178. package/PhotoGallery/cjs/style.production.css +1 -1
  179. package/PhotoGallery/cjs/style.production.v2.css +1 -1
  180. package/PhotoGallery/index.d.ts +22 -7
  181. package/PhotoGallery/package.json +1 -1
  182. package/Picture/cjs/index.development.js +22 -0
  183. package/Picture/cjs/index.development.v2.js +22 -0
  184. package/Picture/cjs/style.development.css +1 -2
  185. package/Picture/cjs/style.development.v2.css +1 -2
  186. package/Picture/cjs/style.production.css +1 -1
  187. package/Picture/cjs/style.production.v2.css +1 -1
  188. package/Picture/index.d.ts +62 -0
  189. package/Picture/package.json +1 -1
  190. package/Portal/cjs/index.development.js +10 -0
  191. package/Portal/cjs/index.development.v2.js +10 -0
  192. package/Portal/cjs/index.production.js +1 -1
  193. package/Portal/cjs/index.production.v2.js +1 -1
  194. package/Portal/index.d.ts +12 -3
  195. package/Portal/package.json +1 -1
  196. package/Progress/cjs/index.development.js +5 -1
  197. package/Progress/cjs/index.development.v2.js +5 -1
  198. package/Progress/cjs/index.production.js +1 -1
  199. package/Progress/cjs/index.production.v2.js +1 -1
  200. package/Progress/index.d.ts +9 -1
  201. package/Progress/package.json +1 -1
  202. package/QRCode/cjs/index.development.js +6 -0
  203. package/QRCode/cjs/index.development.v2.js +6 -0
  204. package/QRCode/cjs/index.production.js +1 -1
  205. package/QRCode/cjs/index.production.v2.js +1 -1
  206. package/QRCode/index.d.ts +11 -5
  207. package/QRCode/package.json +1 -1
  208. package/Rating/cjs/index.development.js +8 -0
  209. package/Rating/cjs/index.development.v2.js +8 -0
  210. package/Rating/cjs/index.production.js +1 -1
  211. package/Rating/cjs/index.production.v2.js +1 -1
  212. package/Rating/index.d.ts +12 -4
  213. package/Rating/package.json +1 -1
  214. package/RatingSelect/cjs/index.development.js +7 -0
  215. package/RatingSelect/cjs/index.development.v2.js +7 -0
  216. package/RatingSelect/cjs/index.production.js +1 -1
  217. package/RatingSelect/cjs/index.production.v2.js +1 -1
  218. package/RatingSelect/index.d.ts +13 -6
  219. package/RatingSelect/package.json +1 -1
  220. package/Scroll/cjs/index.development.js +23 -0
  221. package/Scroll/cjs/index.development.v2.js +23 -0
  222. package/Scroll/index.d.ts +67 -7
  223. package/Scroll/package.json +1 -1
  224. package/ScrollControls/ScrollControlsButton.d.ts +2 -0
  225. package/ScrollControls/cjs/index.development.js +19 -3
  226. package/ScrollControls/cjs/index.development.v2.js +19 -3
  227. package/ScrollControls/cjs/index.production.js +1 -1
  228. package/ScrollControls/cjs/index.production.v2.js +1 -1
  229. package/ScrollControls/index.d.ts +21 -4
  230. package/ScrollControls/package.json +1 -1
  231. package/SimpleSlider/cjs/index.development.js +9 -0
  232. package/SimpleSlider/cjs/index.development.v2.js +9 -0
  233. package/SimpleSlider/cjs/index.production.js +1 -1
  234. package/SimpleSlider/cjs/index.production.v2.js +1 -1
  235. package/SimpleSlider/index.d.ts +27 -16
  236. package/SimpleSlider/package.json +1 -1
  237. package/Skeleton/cjs/index.development.js +11 -0
  238. package/Skeleton/cjs/index.development.v2.js +11 -0
  239. package/Skeleton/cjs/index.production.js +1 -1
  240. package/Skeleton/cjs/index.production.v2.js +1 -1
  241. package/Skeleton/index.d.ts +73 -12
  242. package/Skeleton/package.json +1 -1
  243. package/SnackBar/cjs/index.development.js +6 -1
  244. package/SnackBar/cjs/index.development.v2.js +6 -1
  245. package/SnackBar/cjs/index.production.js +1 -1
  246. package/SnackBar/cjs/index.production.v2.js +1 -1
  247. package/SnackBar/index.d.ts +22 -15
  248. package/SnackBar/package.json +1 -1
  249. package/Spinner/cjs/index.development.js +11 -0
  250. package/Spinner/cjs/index.development.v2.js +11 -0
  251. package/Spinner/cjs/index.production.js +1 -1
  252. package/Spinner/cjs/index.production.v2.js +1 -1
  253. package/Spinner/index.d.ts +39 -7
  254. package/Spinner/package.json +1 -1
  255. package/Text/cjs/index.development.js +16 -0
  256. package/Text/cjs/index.development.v2.js +16 -0
  257. package/Text/cjs/style.development.css +4 -8
  258. package/Text/cjs/style.development.v2.css +4 -8
  259. package/Text/cjs/style.production.css +1 -1
  260. package/Text/cjs/style.production.v2.css +1 -1
  261. package/Text/index.d.ts +83 -0
  262. package/Text/package.json +1 -1
  263. package/TextEmoji/cjs/index.development.js +7 -0
  264. package/TextEmoji/cjs/index.development.v2.js +7 -0
  265. package/TextEmoji/cjs/index.production.js +1 -1
  266. package/TextEmoji/cjs/index.production.v2.js +1 -1
  267. package/TextEmoji/index.d.ts +8 -0
  268. package/TextEmoji/package.json +1 -1
  269. package/Tooltip/cjs/index.development.js +8 -0
  270. package/Tooltip/cjs/index.development.v2.js +8 -0
  271. package/Tooltip/cjs/index.production.js +1 -1
  272. package/Tooltip/cjs/index.production.v2.js +1 -1
  273. package/Tooltip/index.d.ts +37 -30
  274. package/Tooltip/package.json +1 -1
  275. package/Tumbler/cjs/index.development.js +6 -0
  276. package/Tumbler/cjs/index.development.v2.js +6 -0
  277. package/Tumbler/cjs/index.production.js +1 -1
  278. package/Tumbler/cjs/index.production.v2.js +1 -1
  279. package/Tumbler/index.d.ts +8 -0
  280. package/Tumbler/package.json +1 -1
  281. package/Viewport/cjs/index.development.js +10 -0
  282. package/Viewport/cjs/index.development.v2.js +10 -0
  283. package/Viewport/cjs/index.production.js +1 -1
  284. package/Viewport/cjs/index.production.v2.js +1 -1
  285. package/Viewport/index.d.ts +15 -4
  286. package/Viewport/package.json +1 -1
  287. package/evokit/cjs/index.production.js +1 -1
  288. package/evokit/cjs/index.production.v2.js +1 -1
  289. package/evokit/package.json +1 -1
  290. package/package.json +3 -16
  291. package/useBrowserLayoutEffect/cjs/index.development.js +1 -1
  292. package/useBrowserLayoutEffect/cjs/index.development.v2.js +1 -1
  293. package/useBrowserLayoutEffect/index.d.ts +1 -1
  294. package/useBrowserLayoutEffect/package.json +1 -1
  295. package/useColorScheme/cjs/index.development.js +61 -0
  296. package/useColorScheme/cjs/index.development.v2.js +61 -0
  297. package/useColorScheme/cjs/index.production.js +1 -0
  298. package/useColorScheme/cjs/index.production.v2.js +1 -0
  299. package/useColorScheme/index.d.ts +31 -0
  300. package/useColorScheme/index.js +7 -0
  301. package/useColorScheme/index.v2.js +7 -0
  302. package/useColorScheme/package.json +9 -0
  303. package/useDebounce/cjs/index.development.js +2 -9
  304. package/useDebounce/cjs/index.development.v2.js +2 -9
  305. package/useDebounce/cjs/index.production.js +1 -1
  306. package/useDebounce/cjs/index.production.v2.js +1 -1
  307. package/useDebounce/index.d.ts +1 -1
  308. package/useDebounce/package.json +1 -1
  309. package/useForwardRef/cjs/index.development.js +1 -1
  310. package/useForwardRef/cjs/index.development.v2.js +1 -1
  311. package/useForwardRef/cjs/index.production.js +1 -1
  312. package/useForwardRef/cjs/index.production.v2.js +1 -1
  313. package/useForwardRef/index.d.ts +1 -1
  314. package/useForwardRef/package.json +1 -1
  315. package/useInView/package.json +1 -1
  316. package/useIsMounted/cjs/index.development.js +1 -1
  317. package/useIsMounted/cjs/index.development.v2.js +1 -1
  318. package/useIsMounted/cjs/index.production.js +1 -1
  319. package/useIsMounted/cjs/index.production.v2.js +1 -1
  320. package/useIsMounted/index.d.ts +1 -1
  321. package/useIsMounted/package.json +1 -1
  322. package/useKeyPress/cjs/index.development.js +1 -9
  323. package/useKeyPress/cjs/index.development.v2.js +1 -9
  324. package/useKeyPress/cjs/index.production.js +1 -1
  325. package/useKeyPress/cjs/index.production.v2.js +1 -1
  326. package/useKeyPress/index.d.ts +1 -1
  327. package/useKeyPress/package.json +1 -1
  328. package/useMedia/cjs/index.development.js +1 -1
  329. package/useMedia/cjs/index.development.v2.js +1 -1
  330. package/useMedia/index.d.ts +3 -3
  331. package/useMedia/package.json +1 -1
  332. package/useOutsideClick/cjs/index.development.js +1 -1
  333. package/useOutsideClick/cjs/index.development.v2.js +1 -1
  334. package/useOutsideClick/index.d.ts +1 -1
  335. package/useOutsideClick/package.json +1 -1
  336. package/usePortal/cjs/index.development.js +9 -21
  337. package/usePortal/cjs/index.development.v2.js +9 -21
  338. package/usePortal/cjs/index.production.js +1 -1
  339. package/usePortal/cjs/index.production.v2.js +1 -1
  340. package/usePortal/index.d.ts +5 -6
  341. package/usePortal/package.json +1 -1
  342. package/useScrollPosition/cjs/index.development.js +1 -1
  343. package/useScrollPosition/cjs/index.development.v2.js +1 -1
  344. package/useScrollPosition/index.d.ts +1 -1
  345. package/useScrollPosition/package.json +1 -1
  346. package/useScrollSync/cjs/index.development.js +210 -0
  347. package/useScrollSync/cjs/index.development.v2.js +210 -0
  348. package/useScrollSync/cjs/index.production.js +1 -0
  349. package/useScrollSync/cjs/index.production.v2.js +1 -0
  350. package/useScrollSync/index.d.ts +31 -0
  351. package/useScrollSync/index.js +7 -0
  352. package/useScrollSync/index.v2.js +7 -0
  353. package/useScrollSync/package.json +12 -0
  354. package/useSnackBar/cjs/index.development.js +1 -1
  355. package/useSnackBar/cjs/index.development.v2.js +1 -1
  356. package/useSnackBar/cjs/index.production.js +1 -1
  357. package/useSnackBar/cjs/index.production.v2.js +1 -1
  358. package/useSnackBar/index.d.ts +1 -1
  359. package/useSnackBar/package.json +1 -1
  360. package/base/colors-dark.css +0 -5
package/usePortal/cjs/index.development.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var react = require('react');
6
6
 
7
7
  /**
8
- * Creates DOM element to be used as React root.
8
+ * Створює DOM-елемент для використання як корінь React-порталу.
9
9
  * @returns {HTMLElement}
10
10
  */
11
11
  function createRootElement(id) {
@@ -15,7 +15,7 @@ function createRootElement(id) {
15
15
  }
16
16
 
17
17
  /**
18
- * Appends element as last child of body.
18
+ * Додає елемент як останній дочірній елемент `<body>`.
19
19
  * @param {HTMLElement} rootElem
20
20
  */
21
21
  function addRootElement(rootElem) {
@@ -31,30 +31,23 @@ function addRootElement(rootElem) {
31
31
  }
32
32
 
33
33
  /**
34
- * Hook to create a React Portal.
35
- * Automatically handles creating and tearing-down the root elements (no SRR
36
- * makes this trivial), so there is no need to ensure the parent target already
37
- * exists.
34
+ * Хук для створення React-порталу.
35
+ * Автоматично створює та видаляє кореневий DOM-елемент — не потрібно заздалегідь
36
+ * забезпечувати наявність батьківського вузла на сторінці.
38
37
  * @example
39
38
  * const target = usePortal(id, [id]);
40
39
  * return createPortal(children, target);
41
- * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
42
- * @returns {HTMLElement} The DOM node to use as the Portal target.
40
+ * @param {String} id Ідентифікатор цільового контейнера, наприклад `'modal'` або `'spotlight'`
41
+ * @returns {HTMLElement} DOM-вузол для використання як ціль порталу.
43
42
  */
44
43
  var usePortal = function usePortal(id) {
45
44
  var rootElemRef = react.useRef(null);
46
45
  react.useEffect(function () {
47
- // Look for existing target dom element to append to
48
46
  var existingParent = document.querySelector("#".concat(id));
49
- // Parent is either a new root or the existing dom element
50
47
  var parentElem = existingParent || createRootElement(id);
51
-
52
- // If there is no existing DOM element, add a new one.
53
48
  if (!existingParent) {
54
49
  addRootElement(parentElem);
55
50
  }
56
-
57
- // Add the detached element to the parent
58
51
  if (rootElemRef.current) {
59
52
  parentElem.appendChild(rootElemRef.current);
60
53
  }
@@ -69,13 +62,8 @@ var usePortal = function usePortal(id) {
69
62
  }, []);
70
63
 
71
64
  /**
72
- * It's important we evaluate this lazily:
73
- * - We need first render to contain the DOM element, so it shouldn't happen
74
- * in useEffect. We would normally put this in the constructor().
75
- * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
76
- * since this will run every single render (that's a lot).
77
- * - We want the ref to consistently point to the same DOM element and only
78
- * ever run once.
65
+ * Ліниве обчислення: DOM-елемент потрібен під час першого рендеру,
66
+ * але не може бути ініціалізований у useEffect.
79
67
  * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
80
68
  */
81
69
  var getRootElem = function getRootElem() {
package/usePortal/cjs/index.development.v2.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var react = require('react');
6
6
 
7
7
  /**
8
- * Creates DOM element to be used as React root.
8
+ * Створює DOM-елемент для використання як корінь React-порталу.
9
9
  * @returns {HTMLElement}
10
10
  */
11
11
  function createRootElement(id) {
@@ -15,7 +15,7 @@ function createRootElement(id) {
15
15
  }
16
16
 
17
17
  /**
18
- * Appends element as last child of body.
18
+ * Додає елемент як останній дочірній елемент `<body>`.
19
19
  * @param {HTMLElement} rootElem
20
20
  */
21
21
  function addRootElement(rootElem) {
@@ -31,30 +31,23 @@ function addRootElement(rootElem) {
31
31
  }
32
32
 
33
33
  /**
34
- * Hook to create a React Portal.
35
- * Automatically handles creating and tearing-down the root elements (no SRR
36
- * makes this trivial), so there is no need to ensure the parent target already
37
- * exists.
34
+ * Хук для створення React-порталу.
35
+ * Автоматично створює та видаляє кореневий DOM-елемент — не потрібно заздалегідь
36
+ * забезпечувати наявність батьківського вузла на сторінці.
38
37
  * @example
39
38
  * const target = usePortal(id, [id]);
40
39
  * return createPortal(children, target);
41
- * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
42
- * @returns {HTMLElement} The DOM node to use as the Portal target.
40
+ * @param {String} id Ідентифікатор цільового контейнера, наприклад `'modal'` або `'spotlight'`
41
+ * @returns {HTMLElement} DOM-вузол для використання як ціль порталу.
43
42
  */
44
43
  var usePortal = function usePortal(id) {
45
44
  var rootElemRef = react.useRef(null);
46
45
  react.useEffect(function () {
47
- // Look for existing target dom element to append to
48
46
  var existingParent = document.querySelector("#".concat(id));
49
- // Parent is either a new root or the existing dom element
50
47
  var parentElem = existingParent || createRootElement(id);
51
-
52
- // If there is no existing DOM element, add a new one.
53
48
  if (!existingParent) {
54
49
  addRootElement(parentElem);
55
50
  }
56
-
57
- // Add the detached element to the parent
58
51
  if (rootElemRef.current) {
59
52
  parentElem.appendChild(rootElemRef.current);
60
53
  }
@@ -69,13 +62,8 @@ var usePortal = function usePortal(id) {
69
62
  }, []);
70
63
 
71
64
  /**
72
- * It's important we evaluate this lazily:
73
- * - We need first render to contain the DOM element, so it shouldn't happen
74
- * in useEffect. We would normally put this in the constructor().
75
- * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
76
- * since this will run every single render (that's a lot).
77
- * - We want the ref to consistently point to the same DOM element and only
78
- * ever run once.
65
+ * Ліниве обчислення: DOM-елемент потрібен під час першого рендеру,
66
+ * але не може бути ініціалізований у useEffect.
79
67
  * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
80
68
  */
81
69
  var getRootElem = function getRootElem() {
package/usePortal/cjs/index.production.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePortal=function(t){var n=e.useRef(null);e.useEffect((function(){var e=document.querySelector("#".concat(t)),r=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t}(t);return e||function(e){try{document.body.lastElementChild?document.body.insertBefore(e,document.body.lastElementChild.nextElementSibling):console.warn("Failed to add root element, document.body is empty")}catch(t){console.warn("Failed to add root element",t)}}(r),n.current&&r.appendChild(n.current),function(){n.current&&n.current.remove(),-1===r.childNodes.length&&r.remove()}}),[]);return n.current||"undefined"==typeof document||(n.current=document.createElement("div")),n.current};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePortal=function(t){var n=e.useRef(null);e.useEffect(function(){var e=document.querySelector("#".concat(t)),r=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t}(t);return e||function(e){try{document.body.lastElementChild?document.body.insertBefore(e,document.body.lastElementChild.nextElementSibling):console.warn("Failed to add root element, document.body is empty")}catch(t){console.warn("Failed to add root element",t)}}(r),n.current&&r.appendChild(n.current),function(){n.current&&n.current.remove(),-1===r.childNodes.length&&r.remove()}},[]);return n.current||"undefined"==typeof document||(n.current=document.createElement("div")),n.current};
package/usePortal/cjs/index.production.v2.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePortal=function(t){var n=e.useRef(null);e.useEffect((function(){var e=document.querySelector("#".concat(t)),r=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t}(t);return e||function(e){try{document.body.lastElementChild?document.body.insertBefore(e,document.body.lastElementChild.nextElementSibling):console.warn("Failed to add root element, document.body is empty")}catch(t){console.warn("Failed to add root element",t)}}(r),n.current&&r.appendChild(n.current),function(){n.current&&n.current.remove(),-1===r.childNodes.length&&r.remove()}}),[]);return n.current||"undefined"==typeof document||(n.current=document.createElement("div")),n.current};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePortal=function(t){var n=e.useRef(null);e.useEffect(function(){var e=document.querySelector("#".concat(t)),r=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t}(t);return e||function(e){try{document.body.lastElementChild?document.body.insertBefore(e,document.body.lastElementChild.nextElementSibling):console.warn("Failed to add root element, document.body is empty")}catch(t){console.warn("Failed to add root element",t)}}(r),n.current&&r.appendChild(n.current),function(){n.current&&n.current.remove(),-1===r.childNodes.length&&r.remove()}},[]);return n.current||"undefined"==typeof document||(n.current=document.createElement("div")),n.current};
package/usePortal/index.d.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  /**
2
- * Hook to create a React Portal.
3
- * Automatically handles creating and tearing-down the root elements (no SRR
4
- * makes this trivial), so there is no need to ensure the parent target already
5
- * exists.
2
+ * Хук для створення React-порталу.
3
+ * Автоматично створює та видаляє кореневий DOM-елемент — не потрібно заздалегідь
4
+ * забезпечувати наявність батьківського вузла на сторінці.
6
5
  * @example
7
6
  * const target = usePortal(id, [id]);
8
7
  * return createPortal(children, target);
9
- * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
10
- * @returns {HTMLElement} The DOM node to use as the Portal target.
8
+ * @param {String} id Ідентифікатор цільового контейнера, наприклад `'modal'` або `'spotlight'`
9
+ * @returns {HTMLElement} DOM-вузол для використання як ціль порталу.
11
10
  */
12
11
  export declare const usePortal: (id: string) => HTMLElement | null;
package/usePortal/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/usePortal",
3
- "version": "2.5.0-alpha.0",
3
+ "version": "3.0.0-alpha.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/useScrollPosition/cjs/index.development.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var useScrollPosition$1 = require('@n8tb1t/use-scroll-position');
6
6
 
7
7
  /**
8
- * Reack hook
8
+ * Хук для відстеження поточної позиції скролу.
9
9
  */
10
10
  var useScrollPosition = useScrollPosition$1.useScrollPosition;
11
11
 
package/useScrollPosition/cjs/index.development.v2.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var useScrollPosition$1 = require('@n8tb1t/use-scroll-position');
6
6
 
7
7
  /**
8
- * Reack hook
8
+ * Хук для відстеження поточної позиції скролу.
9
9
  */
10
10
  var useScrollPosition = useScrollPosition$1.useScrollPosition;
11
11
 
package/useScrollPosition/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useScrollPosition as useScrollPositionPackage } from '@n8tb1t/use-scroll-position';
2
2
  /**
3
- * Reack hook
3
+ * Хук для відстеження поточної позиції скролу.
4
4
  */
5
5
  export declare const useScrollPosition: typeof useScrollPositionPackage;
package/useScrollPosition/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prom-ui/core/useScrollPosition",
3
- "version": "2.5.0-alpha.0",
3
+ "version": "3.0.0-alpha.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
package/useScrollSync/cjs/index.development.js ADDED
@@ -0,0 +1,210 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
6
+ var React = require('react');
7
+
8
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
9
+
10
+ function _interopNamespaceCompat(e) {
11
+ if (e && typeof e === 'object' && 'default' in e) return e;
12
+ var n = Object.create(null);
13
+ if (e) {
14
+ Object.keys(e).forEach(function (k) {
15
+ if (k !== 'default') {
16
+ var d = Object.getOwnPropertyDescriptor(e, k);
17
+ Object.defineProperty(n, k, d.get ? d : {
18
+ enumerable: true,
19
+ get: function () { return e[k]; }
20
+ });
21
+ }
22
+ });
23
+ }
24
+ n.default = e;
25
+ return Object.freeze(n);
26
+ }
27
+
28
+ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultCompat(_toConsumableArray);
29
+ var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
30
+
31
+ /**
32
+ * Опції синхронізації прокрутки.
33
+ */
34
+
35
+ /**
36
+ * Час (мс) бездіяльності, після якого блокування джерела знімається.
37
+ * Має перекривати інерційну прокрутку iOS, події якої прилітають із затримкою.
38
+ */
39
+ var SYNC_SETTLE_DELAY = 150;
40
+
41
+ /**
42
+ * Синхронізує горизонтальну прокрутку між кількома елементами:
43
+ * прокрутка будь-якого з них застосовується до решти.
44
+ *
45
+ * Refs створюються у викликаючому коді — це дозволяє перевикористати їх
46
+ * в інших хуках і навісити на конкретні елементи. Кількість refs має бути
47
+ * сталою між рендерами.
48
+ *
49
+ *
50
+ * @example
51
+ * const ref1 = useRef(null);
52
+ * const ref2 = useRef(null);
53
+ * useScrollSync([ref1, ref2]);
54
+ *
55
+ * <Scroll ref={ref1}>...</Scroll>
56
+ * <Scroll ref={ref2}>...</Scroll>
57
+ */
58
+ var useScrollSync = function useScrollSync(refs) {
59
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
60
+ var _options$proportional = options.proportional,
61
+ proportional = _options$proportional === void 0 ? false : _options$proportional;
62
+ React__namespace.useEffect(function () {
63
+ var elements = refs.map(function (ref) {
64
+ return ref.current;
65
+ }).filter(function (el) {
66
+ return el !== null;
67
+ });
68
+ if (elements.length < 2) return;
69
+
70
+ // Активне джерело синхронізації та таймер зняття блокування живуть
71
+ // у межах цієї підписки — між ре-підписками їх зберігати не потрібно.
72
+ var source = null;
73
+ var releaseTimer = null;
74
+
75
+ // Чи тримає користувач палець на одному з елементів зараз.
76
+ var pointerActive = false;
77
+
78
+ // Кеш прокручуваної ширини (scrollWidth - clientWidth) кожного елемента.
79
+ // Потрібен лише для proportional: читати геометрію на кожну подію scroll —
80
+ // це forced reflow у гарячому шляху. Розміри змінюються при resize/зміні
81
+ // контенту, а не під час прокрутки, тож міряємо раз на старті серії.
82
+ var maxScrollCache = new Map();
83
+ var measure = function measure() {
84
+ elements.forEach(function (el) {
85
+ return maxScrollCache.set(el, el.scrollWidth - el.clientWidth);
86
+ });
87
+ };
88
+ var maxScrollOf = function maxScrollOf(el) {
89
+ var _maxScrollCache$get;
90
+ return (_maxScrollCache$get = maxScrollCache.get(el)) !== null && _maxScrollCache$get !== void 0 ? _maxScrollCache$get : el.scrollWidth - el.clientWidth;
91
+ };
92
+
93
+ // Цільова позиція target, що відповідає прокрутці master.
94
+ var positionFor = function positionFor(target, masterLeft, masterMax) {
95
+ if (!proportional) return masterLeft;
96
+ var ratio = masterMax > 0 ? masterLeft / masterMax : 0;
97
+ // Округлюємо: браузер усе одно округляє scrollLeft при записі, а
98
+ // дробове `next` ламало б дедуп-перевірку `scrollLeft !== next`
99
+ // (ціле з геттера ніколи не дорівнює дробу — писали б щоразу).
100
+ return Math.round(ratio * maxScrollOf(target));
101
+ };
102
+
103
+ // Буфери відкладеного запису: спершу читаємо позиції й рахуємо цілі
104
+ // для всіх елементів, лише потім пишемо. Інакше чергування write→read
105
+ // scrollLeft у циклі форсить reflow на кожній ітерації (layout
106
+ // thrashing) при трьох і більше синхронізованих елементах. Масиви
107
+ // переюзуються між подіями, щоб не алокувати в гарячому шляху.
108
+ var pendingTargets = [];
109
+ var pendingPositions = [];
110
+ var syncFrom = function syncFrom(master) {
111
+ var masterLeft = master.scrollLeft;
112
+ var masterMax = proportional ? maxScrollOf(master) : 0;
113
+ var count = 0;
114
+ for (var i = 0; i < elements.length; i += 1) {
115
+ var target = elements[i];
116
+ if (target === master) continue;
117
+ var next = positionFor(target, masterLeft, masterMax);
118
+ if (target.scrollLeft !== next) {
119
+ pendingTargets[count] = target;
120
+ pendingPositions[count] = next;
121
+ count += 1;
122
+ }
123
+ }
124
+ for (var _i = 0; _i < count; _i += 1) {
125
+ pendingTargets[_i].scrollLeft = pendingPositions[_i];
126
+ }
127
+ };
128
+
129
+ // Притиснути окремий елемент назад до master (гасимо «втечу» по інерції).
130
+ var clampTo = function clampTo(master, target) {
131
+ var masterMax = proportional ? maxScrollOf(master) : 0;
132
+ var next = positionFor(target, master.scrollLeft, masterMax);
133
+ if (target.scrollLeft !== next) target.scrollLeft = next;
134
+ };
135
+ var armRelease = function armRelease() {
136
+ if (releaseTimer) clearTimeout(releaseTimer);
137
+ releaseTimer = setTimeout(function () {
138
+ source = null;
139
+ }, SYNC_SETTLE_DELAY);
140
+ };
141
+ var handleScroll = function handleScroll(event) {
142
+ var el = event.currentTarget;
143
+ var master = source;
144
+
145
+ // Подія не від активного джерела: або наведена нашим записом
146
+ // scrollLeft, або це чужа інерція. Під пальцем — притискаємо назад,
147
+ // інакше ігноруємо.
148
+ if (master && master !== el) {
149
+ if (pointerActive) clampTo(master, el);
150
+ return;
151
+ }
152
+
153
+ // Початок нової серії прокрутки (без активного джерела) — оновлюємо
154
+ // кеш геометрії один раз, далі в гарячому шляху лише арифметика.
155
+ if (!master && proportional) measure();
156
+ source = el;
157
+ syncFrom(el);
158
+
159
+ // Поки палець на елементі — тримаємо блокування без таймера;
160
+ // знімаємо лише після відпускання (і затихання інерції).
161
+ if (pointerActive) {
162
+ if (releaseTimer) clearTimeout(releaseTimer);
163
+ } else {
164
+ armRelease();
165
+ }
166
+ };
167
+ var handlePointerDown = function handlePointerDown(event) {
168
+ var el = event.currentTarget;
169
+ pointerActive = true;
170
+ if (releaseTimer) clearTimeout(releaseTimer);
171
+ if (proportional) measure();
172
+ source = el;
173
+ syncFrom(el);
174
+ };
175
+ var handlePointerUp = function handlePointerUp() {
176
+ if (!pointerActive) return;
177
+ pointerActive = false;
178
+ armRelease();
179
+ };
180
+ elements.forEach(function (el) {
181
+ el.addEventListener('scroll', handleScroll, {
182
+ passive: true
183
+ });
184
+ el.addEventListener('pointerdown', handlePointerDown, {
185
+ passive: true
186
+ });
187
+ });
188
+ window.addEventListener('pointerup', handlePointerUp, {
189
+ passive: true
190
+ });
191
+ window.addEventListener('pointercancel', handlePointerUp, {
192
+ passive: true
193
+ });
194
+ return function () {
195
+ elements.forEach(function (el) {
196
+ el.removeEventListener('scroll', handleScroll);
197
+ el.removeEventListener('pointerdown', handlePointerDown);
198
+ });
199
+ window.removeEventListener('pointerup', handlePointerUp);
200
+ window.removeEventListener('pointercancel', handlePointerUp);
201
+ if (releaseTimer) clearTimeout(releaseTimer);
202
+ };
203
+ // Залежності — поточні елементи refs: ефект перепідписується, коли вони
204
+ // монтуються/демонтуються. Кількість refs стала, тож довжина масиву стабільна.
205
+ }, [proportional].concat(_toConsumableArray__default.default(refs.map(function (ref) {
206
+ return ref.current;
207
+ }))));
208
+ };
209
+
210
+ exports.useScrollSync = useScrollSync;
package/useScrollSync/cjs/index.development.v2.js ADDED
@@ -0,0 +1,210 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
6
+ var React = require('react');
7
+
8
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
9
+
10
+ function _interopNamespaceCompat(e) {
11
+ if (e && typeof e === 'object' && 'default' in e) return e;
12
+ var n = Object.create(null);
13
+ if (e) {
14
+ Object.keys(e).forEach(function (k) {
15
+ if (k !== 'default') {
16
+ var d = Object.getOwnPropertyDescriptor(e, k);
17
+ Object.defineProperty(n, k, d.get ? d : {
18
+ enumerable: true,
19
+ get: function () { return e[k]; }
20
+ });
21
+ }
22
+ });
23
+ }
24
+ n.default = e;
25
+ return Object.freeze(n);
26
+ }
27
+
28
+ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultCompat(_toConsumableArray);
29
+ var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
30
+
31
+ /**
32
+ * Опції синхронізації прокрутки.
33
+ */
34
+
35
+ /**
36
+ * Час (мс) бездіяльності, після якого блокування джерела знімається.
37
+ * Має перекривати інерційну прокрутку iOS, події якої прилітають із затримкою.
38
+ */
39
+ var SYNC_SETTLE_DELAY = 150;
40
+
41
+ /**
42
+ * Синхронізує горизонтальну прокрутку між кількома елементами:
43
+ * прокрутка будь-якого з них застосовується до решти.
44
+ *
45
+ * Refs створюються у викликаючому коді — це дозволяє перевикористати їх
46
+ * в інших хуках і навісити на конкретні елементи. Кількість refs має бути
47
+ * сталою між рендерами.
48
+ *
49
+ *
50
+ * @example
51
+ * const ref1 = useRef(null);
52
+ * const ref2 = useRef(null);
53
+ * useScrollSync([ref1, ref2]);
54
+ *
55
+ * <Scroll ref={ref1}>...</Scroll>
56
+ * <Scroll ref={ref2}>...</Scroll>
57
+ */
58
+ var useScrollSync = function useScrollSync(refs) {
59
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
60
+ var _options$proportional = options.proportional,
61
+ proportional = _options$proportional === void 0 ? false : _options$proportional;
62
+ React__namespace.useEffect(function () {
63
+ var elements = refs.map(function (ref) {
64
+ return ref.current;
65
+ }).filter(function (el) {
66
+ return el !== null;
67
+ });
68
+ if (elements.length < 2) return;
69
+
70
+ // Активне джерело синхронізації та таймер зняття блокування живуть
71
+ // у межах цієї підписки — між ре-підписками їх зберігати не потрібно.
72
+ var source = null;
73
+ var releaseTimer = null;
74
+
75
+ // Чи тримає користувач палець на одному з елементів зараз.
76
+ var pointerActive = false;
77
+
78
+ // Кеш прокручуваної ширини (scrollWidth - clientWidth) кожного елемента.
79
+ // Потрібен лише для proportional: читати геометрію на кожну подію scroll —
80
+ // це forced reflow у гарячому шляху. Розміри змінюються при resize/зміні
81
+ // контенту, а не під час прокрутки, тож міряємо раз на старті серії.
82
+ var maxScrollCache = new Map();
83
+ var measure = function measure() {
84
+ elements.forEach(function (el) {
85
+ return maxScrollCache.set(el, el.scrollWidth - el.clientWidth);
86
+ });
87
+ };
88
+ var maxScrollOf = function maxScrollOf(el) {
89
+ var _maxScrollCache$get;
90
+ return (_maxScrollCache$get = maxScrollCache.get(el)) !== null && _maxScrollCache$get !== void 0 ? _maxScrollCache$get : el.scrollWidth - el.clientWidth;
91
+ };
92
+
93
+ // Цільова позиція target, що відповідає прокрутці master.
94
+ var positionFor = function positionFor(target, masterLeft, masterMax) {
95
+ if (!proportional) return masterLeft;
96
+ var ratio = masterMax > 0 ? masterLeft / masterMax : 0;
97
+ // Округлюємо: браузер усе одно округляє scrollLeft при записі, а
98
+ // дробове `next` ламало б дедуп-перевірку `scrollLeft !== next`
99
+ // (ціле з геттера ніколи не дорівнює дробу — писали б щоразу).
100
+ return Math.round(ratio * maxScrollOf(target));
101
+ };
102
+
103
+ // Буфери відкладеного запису: спершу читаємо позиції й рахуємо цілі
104
+ // для всіх елементів, лише потім пишемо. Інакше чергування write→read
105
+ // scrollLeft у циклі форсить reflow на кожній ітерації (layout
106
+ // thrashing) при трьох і більше синхронізованих елементах. Масиви
107
+ // переюзуються між подіями, щоб не алокувати в гарячому шляху.
108
+ var pendingTargets = [];
109
+ var pendingPositions = [];
110
+ var syncFrom = function syncFrom(master) {
111
+ var masterLeft = master.scrollLeft;
112
+ var masterMax = proportional ? maxScrollOf(master) : 0;
113
+ var count = 0;
114
+ for (var i = 0; i < elements.length; i += 1) {
115
+ var target = elements[i];
116
+ if (target === master) continue;
117
+ var next = positionFor(target, masterLeft, masterMax);
118
+ if (target.scrollLeft !== next) {
119
+ pendingTargets[count] = target;
120
+ pendingPositions[count] = next;
121
+ count += 1;
122
+ }
123
+ }
124
+ for (var _i = 0; _i < count; _i += 1) {
125
+ pendingTargets[_i].scrollLeft = pendingPositions[_i];
126
+ }
127
+ };
128
+
129
+ // Притиснути окремий елемент назад до master (гасимо «втечу» по інерції).
130
+ var clampTo = function clampTo(master, target) {
131
+ var masterMax = proportional ? maxScrollOf(master) : 0;
132
+ var next = positionFor(target, master.scrollLeft, masterMax);
133
+ if (target.scrollLeft !== next) target.scrollLeft = next;
134
+ };
135
+ var armRelease = function armRelease() {
136
+ if (releaseTimer) clearTimeout(releaseTimer);
137
+ releaseTimer = setTimeout(function () {
138
+ source = null;
139
+ }, SYNC_SETTLE_DELAY);
140
+ };
141
+ var handleScroll = function handleScroll(event) {
142
+ var el = event.currentTarget;
143
+ var master = source;
144
+
145
+ // Подія не від активного джерела: або наведена нашим записом
146
+ // scrollLeft, або це чужа інерція. Під пальцем — притискаємо назад,
147
+ // інакше ігноруємо.
148
+ if (master && master !== el) {
149
+ if (pointerActive) clampTo(master, el);
150
+ return;
151
+ }
152
+
153
+ // Початок нової серії прокрутки (без активного джерела) — оновлюємо
154
+ // кеш геометрії один раз, далі в гарячому шляху лише арифметика.
155
+ if (!master && proportional) measure();
156
+ source = el;
157
+ syncFrom(el);
158
+
159
+ // Поки палець на елементі — тримаємо блокування без таймера;
160
+ // знімаємо лише після відпускання (і затихання інерції).
161
+ if (pointerActive) {
162
+ if (releaseTimer) clearTimeout(releaseTimer);
163
+ } else {
164
+ armRelease();
165
+ }
166
+ };
167
+ var handlePointerDown = function handlePointerDown(event) {
168
+ var el = event.currentTarget;
169
+ pointerActive = true;
170
+ if (releaseTimer) clearTimeout(releaseTimer);
171
+ if (proportional) measure();
172
+ source = el;
173
+ syncFrom(el);
174
+ };
175
+ var handlePointerUp = function handlePointerUp() {
176
+ if (!pointerActive) return;
177
+ pointerActive = false;
178
+ armRelease();
179
+ };
180
+ elements.forEach(function (el) {
181
+ el.addEventListener('scroll', handleScroll, {
182
+ passive: true
183
+ });
184
+ el.addEventListener('pointerdown', handlePointerDown, {
185
+ passive: true
186
+ });
187
+ });
188
+ window.addEventListener('pointerup', handlePointerUp, {
189
+ passive: true
190
+ });
191
+ window.addEventListener('pointercancel', handlePointerUp, {
192
+ passive: true
193
+ });
194
+ return function () {
195
+ elements.forEach(function (el) {
196
+ el.removeEventListener('scroll', handleScroll);
197
+ el.removeEventListener('pointerdown', handlePointerDown);
198
+ });
199
+ window.removeEventListener('pointerup', handlePointerUp);
200
+ window.removeEventListener('pointercancel', handlePointerUp);
201
+ if (releaseTimer) clearTimeout(releaseTimer);
202
+ };
203
+ // Залежності — поточні елементи refs: ефект перепідписується, коли вони
204
+ // монтуються/демонтуються. Кількість refs стала, тож довжина масиву стабільна.
205
+ }, [proportional].concat(_toConsumableArray__default.default(refs.map(function (ref) {
206
+ return ref.current;
207
+ }))));
208
+ };
209
+
210
+ exports.useScrollSync = useScrollSync;
package/useScrollSync/cjs/index.production.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/toConsumableArray"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var o=n(e),i=r(t);exports.useScrollSync=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).proportional,n=void 0!==t&&t;i.useEffect(function(){var t=e.map(function(e){return e.current}).filter(function(e){return null!==e});if(!(t.length<2)){var r=null,o=null,i=!1,u=new Map,c=function(){t.forEach(function(e){return u.set(e,e.scrollWidth-e.clientWidth)})},l=function(e){var t;return null!==(t=u.get(e))&&void 0!==t?t:e.scrollWidth-e.clientWidth},a=function(e,t,r){if(!n)return t;var o=r>0?t/r:0;return Math.round(o*l(e))},f=[],s=[],v=function(e){for(var r=e.scrollLeft,o=n?l(e):0,i=0,u=0;u<t.length;u+=1){var c=t[u];if(c!==e){var v=a(c,r,o);c.scrollLeft!==v&&(f[i]=c,s[i]=v,i+=1)}}for(var d=0;d<i;d+=1)f[d].scrollLeft=s[d]},d=function(){o&&clearTimeout(o),o=setTimeout(function(){r=null},150)},p=function(e){var t=e.currentTarget,u=r;u&&u!==t?i&&function(e,t){var r=n?l(e):0,o=a(t,e.scrollLeft,r);t.scrollLeft!==o&&(t.scrollLeft=o)}(u,t):(!u&&n&&c(),r=t,v(t),i?o&&clearTimeout(o):d())},m=function(e){var t=e.currentTarget;i=!0,o&&clearTimeout(o),n&&c(),r=t,v(t)},L=function(){i&&(i=!1,d())};return t.forEach(function(e){e.addEventListener("scroll",p,{passive:!0}),e.addEventListener("pointerdown",m,{passive:!0})}),window.addEventListener("pointerup",L,{passive:!0}),window.addEventListener("pointercancel",L,{passive:!0}),function(){t.forEach(function(e){e.removeEventListener("scroll",p),e.removeEventListener("pointerdown",m)}),window.removeEventListener("pointerup",L),window.removeEventListener("pointercancel",L),o&&clearTimeout(o)}}},[n].concat(o.default(e.map(function(e){return e.current}))))};
package/useScrollSync/cjs/index.production.v2.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/toConsumableArray"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var o=n(e),i=r(t);exports.useScrollSync=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).proportional,n=void 0!==t&&t;i.useEffect(function(){var t=e.map(function(e){return e.current}).filter(function(e){return null!==e});if(!(t.length<2)){var r=null,o=null,i=!1,u=new Map,c=function(){t.forEach(function(e){return u.set(e,e.scrollWidth-e.clientWidth)})},l=function(e){var t;return null!==(t=u.get(e))&&void 0!==t?t:e.scrollWidth-e.clientWidth},a=function(e,t,r){if(!n)return t;var o=r>0?t/r:0;return Math.round(o*l(e))},f=[],s=[],v=function(e){for(var r=e.scrollLeft,o=n?l(e):0,i=0,u=0;u<t.length;u+=1){var c=t[u];if(c!==e){var v=a(c,r,o);c.scrollLeft!==v&&(f[i]=c,s[i]=v,i+=1)}}for(var d=0;d<i;d+=1)f[d].scrollLeft=s[d]},d=function(){o&&clearTimeout(o),o=setTimeout(function(){r=null},150)},p=function(e){var t=e.currentTarget,u=r;u&&u!==t?i&&function(e,t){var r=n?l(e):0,o=a(t,e.scrollLeft,r);t.scrollLeft!==o&&(t.scrollLeft=o)}(u,t):(!u&&n&&c(),r=t,v(t),i?o&&clearTimeout(o):d())},m=function(e){var t=e.currentTarget;i=!0,o&&clearTimeout(o),n&&c(),r=t,v(t)},L=function(){i&&(i=!1,d())};return t.forEach(function(e){e.addEventListener("scroll",p,{passive:!0}),e.addEventListener("pointerdown",m,{passive:!0})}),window.addEventListener("pointerup",L,{passive:!0}),window.addEventListener("pointercancel",L,{passive:!0}),function(){t.forEach(function(e){e.removeEventListener("scroll",p),e.removeEventListener("pointerdown",m)}),window.removeEventListener("pointerup",L),window.removeEventListener("pointercancel",L),o&&clearTimeout(o)}}},[n].concat(o.default(e.map(function(e){return e.current}))))};