@cuemath/leap 3.2.17-j1 → 3.2.17-mb

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 (241) hide show
  1. package/dist/assets/illustrations/illustrations.js +0 -5
  2. package/dist/assets/illustrations/illustrations.js.map +1 -1
  3. package/dist/assets/lottie/lottie.js +1 -11
  4. package/dist/assets/lottie/lottie.js.map +1 -1
  5. package/dist/features/auth/account-selector/account-selector.js +25 -26
  6. package/dist/features/auth/account-selector/account-selector.js.map +1 -1
  7. package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js +14 -20
  8. package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map +1 -1
  9. package/dist/features/auth/comps/resend-otp/resend-otp.js +47 -54
  10. package/dist/features/auth/comps/resend-otp/resend-otp.js.map +1 -1
  11. package/dist/features/auth/comps/tabs/tab-tem/tab-item.js +17 -29
  12. package/dist/features/auth/comps/tabs/tab-tem/tab-item.js.map +1 -1
  13. package/dist/features/auth/comps/tabs/tabs-styled.js +10 -22
  14. package/dist/features/auth/comps/tabs/tabs-styled.js.map +1 -1
  15. package/dist/features/auth/comps/tabs/tabs.js +5 -5
  16. package/dist/features/auth/comps/tabs/tabs.js.map +1 -1
  17. package/dist/features/auth/comps/user-list/user-item/user-item.js +31 -30
  18. package/dist/features/auth/comps/user-list/user-item/user-item.js.map +1 -1
  19. package/dist/features/auth/comps/user-list/user-list.js +34 -35
  20. package/dist/features/auth/comps/user-list/user-list.js.map +1 -1
  21. package/dist/features/auth/forgot-password/forgot-password-styled.js +15 -14
  22. package/dist/features/auth/forgot-password/forgot-password-styled.js.map +1 -1
  23. package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js +7 -6
  24. package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js.map +1 -1
  25. package/dist/features/auth/login/login-styled.js +9 -8
  26. package/dist/features/auth/login/login-styled.js.map +1 -1
  27. package/dist/features/chapters-v2/utils/node-card-utils.js +7 -7
  28. package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
  29. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js +4 -4
  30. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card-styled.js.map +1 -1
  31. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js +85 -85
  32. package/dist/features/circle-games/game-launcher/comps/tables-card/tables-card.js.map +1 -1
  33. package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js +98 -121
  34. package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map +1 -1
  35. package/dist/features/circle-games/game-launcher/hooks/use-table-infinite-launcher-journey/use-table-infinite-launcher-journey.js +28 -29
  36. package/dist/features/circle-games/game-launcher/hooks/use-table-infinite-launcher-journey/use-table-infinite-launcher-journey.js.map +1 -1
  37. package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +42 -43
  38. package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +1 -1
  39. package/dist/features/circle-games/games/tutorial/tutorial.js +35 -43
  40. package/dist/features/circle-games/games/tutorial/tutorial.js.map +1 -1
  41. package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js +2 -2
  42. package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js.map +1 -1
  43. package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js +1 -1
  44. package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js.map +1 -1
  45. package/dist/features/circle-games/sign-up/comp/username-input/username-input.js +24 -26
  46. package/dist/features/circle-games/sign-up/comp/username-input/username-input.js.map +1 -1
  47. package/dist/features/circle-games/sign-up/constants.js +1 -3
  48. package/dist/features/circle-games/sign-up/constants.js.map +1 -1
  49. package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js +42 -42
  50. package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map +1 -1
  51. package/dist/features/hooks/use-viewport/use-viewport.js +22 -0
  52. package/dist/features/hooks/use-viewport/use-viewport.js.map +1 -0
  53. package/dist/features/journey/comps/coachmark/coachmark.js +27 -29
  54. package/dist/features/journey/comps/coachmark/coachmark.js.map +1 -1
  55. package/dist/features/journey/journey-id/journey-id-student.js +2 -2
  56. package/dist/features/journey/journey-id/journey-id-student.js.map +1 -1
  57. package/dist/features/journey/use-journey/journey-context-provider.js +72 -73
  58. package/dist/features/journey/use-journey/journey-context-provider.js.map +1 -1
  59. package/dist/features/journey/use-journey/journey-styled.js +4 -6
  60. package/dist/features/journey/use-journey/journey-styled.js.map +1 -1
  61. package/dist/features/stickers/sticker-data.js +234 -0
  62. package/dist/features/stickers/sticker-data.js.map +1 -0
  63. package/dist/features/{ui/sticker-grid/sticker-grid-styles.js → stickers/sticker-selector/sticker-selector-styles.js} +4 -3
  64. package/dist/features/stickers/sticker-selector/sticker-selector-styles.js.map +1 -0
  65. package/dist/features/stickers/sticker-selector/sticker-selector.js +25 -0
  66. package/dist/features/stickers/sticker-selector/sticker-selector.js.map +1 -0
  67. package/dist/features/stickers/sticker-selector/sticker.js +57 -0
  68. package/dist/features/stickers/sticker-selector/sticker.js.map +1 -0
  69. package/dist/features/{ui/stickers/stickers-effects.js → stickers/stickers-effects/effects.js} +6 -6
  70. package/dist/features/stickers/stickers-effects/effects.js.map +1 -0
  71. package/dist/features/{ui/stickers/stickers-styled.js → stickers/stickers-effects/stickers-effects-styled.js} +2 -2
  72. package/dist/features/stickers/stickers-effects/stickers-effects-styled.js.map +1 -0
  73. package/dist/features/{ui/stickers/stickers-utils.js → stickers/stickers-effects/stickers-effects-utils.js} +6 -6
  74. package/dist/features/stickers/stickers-effects/stickers-effects-utils.js.map +1 -0
  75. package/dist/features/stickers/stickers-effects/stickers-effects.js +39 -0
  76. package/dist/features/stickers/stickers-effects/stickers-effects.js.map +1 -0
  77. package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js +60 -12
  78. package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js.map +1 -1
  79. package/dist/features/ui/arrow-tooltip/arrow-tooltip.js +77 -72
  80. package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map +1 -1
  81. package/dist/features/ui/error/error.js +27 -65
  82. package/dist/features/ui/error/error.js.map +1 -1
  83. package/dist/features/ui/image/image.js +1 -1
  84. package/dist/features/ui/image/image.js.map +1 -1
  85. package/dist/features/ui/lottie-animation/lottie-animation.js +29 -25
  86. package/dist/features/ui/lottie-animation/lottie-animation.js.map +1 -1
  87. package/dist/features/ui/modals/modal-styled.js +58 -34
  88. package/dist/features/ui/modals/modal-styled.js.map +1 -1
  89. package/dist/features/ui/modals/modal.js +14 -40
  90. package/dist/features/ui/modals/modal.js.map +1 -1
  91. package/dist/features/ui/nudge/nudge-styled.js +7 -14
  92. package/dist/features/ui/nudge/nudge-styled.js.map +1 -1
  93. package/dist/features/ui/nudge/nudge.js +12 -13
  94. package/dist/features/ui/nudge/nudge.js.map +1 -1
  95. package/dist/features/ui/streak-icon/streak-icon-styled.js +13 -13
  96. package/dist/features/ui/streak-icon/streak-icon-styled.js.map +1 -1
  97. package/dist/features/ui/streak-icon/streak-icon.js +15 -17
  98. package/dist/features/ui/streak-icon/streak-icon.js.map +1 -1
  99. package/dist/features/ui/text/text.js +36 -40
  100. package/dist/features/ui/text/text.js.map +1 -1
  101. package/dist/features/ui/theme/button.js +78 -78
  102. package/dist/features/ui/theme/button.js.map +1 -1
  103. package/dist/features/ui/theme/constants.js +2 -4
  104. package/dist/features/ui/theme/constants.js.map +1 -1
  105. package/dist/features/ui/theme/get-device.js +3 -3
  106. package/dist/features/ui/theme/get-device.js.map +1 -1
  107. package/dist/features/worksheet/worksheet/constants.js +13 -12
  108. package/dist/features/worksheet/worksheet/constants.js.map +1 -1
  109. package/dist/features/worksheet/worksheet/worksheet-question/learnosity-question.js +24 -24
  110. package/dist/features/worksheet/worksheet/worksheet-question/learnosity-question.js.map +1 -1
  111. package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js +260 -246
  112. package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js.map +1 -1
  113. package/dist/features/worksheet/worksheet/worksheet-styled.js +28 -37
  114. package/dist/features/worksheet/worksheet/worksheet-styled.js.map +1 -1
  115. package/dist/features/worksheet/worksheet/worksheet.js +164 -166
  116. package/dist/features/worksheet/worksheet/worksheet.js.map +1 -1
  117. package/dist/index.d.ts +55 -184
  118. package/dist/index.js +541 -579
  119. package/dist/index.js.map +1 -1
  120. package/dist/node_modules/query-string/base.js +1 -1
  121. package/dist/node_modules/query-string/node_modules/decode-uri-component/index.js.map +1 -0
  122. package/dist/node_modules/uuid/dist/esm-browser/regex.js +5 -0
  123. package/dist/node_modules/uuid/dist/esm-browser/regex.js.map +1 -0
  124. package/dist/node_modules/uuid/dist/esm-browser/rng.js +2 -3
  125. package/dist/node_modules/uuid/dist/esm-browser/rng.js.map +1 -1
  126. package/dist/node_modules/uuid/dist/esm-browser/stringify.js +10 -6
  127. package/dist/node_modules/uuid/dist/esm-browser/stringify.js.map +1 -1
  128. package/dist/node_modules/uuid/dist/esm-browser/v4.js +9 -12
  129. package/dist/node_modules/uuid/dist/esm-browser/v4.js.map +1 -1
  130. package/dist/node_modules/uuid/dist/esm-browser/validate.js +8 -0
  131. package/dist/node_modules/uuid/dist/esm-browser/validate.js.map +1 -0
  132. package/dist/static/nudge-tap.5cb30093.json +1057 -0
  133. package/package.json +1 -1
  134. package/dist/assets/line-icons/icons/after-noon.js +0 -34
  135. package/dist/assets/line-icons/icons/after-noon.js.map +0 -1
  136. package/dist/assets/line-icons/icons/apple-icon-white.js +0 -42
  137. package/dist/assets/line-icons/icons/apple-icon-white.js.map +0 -1
  138. package/dist/assets/line-icons/icons/cue-board-filled.js +0 -33
  139. package/dist/assets/line-icons/icons/cue-board-filled.js.map +0 -1
  140. package/dist/assets/line-icons/icons/cue-board.js +0 -23
  141. package/dist/assets/line-icons/icons/cue-board.js.map +0 -1
  142. package/dist/assets/line-icons/icons/evening.js +0 -35
  143. package/dist/assets/line-icons/icons/evening.js.map +0 -1
  144. package/dist/assets/line-icons/icons/hint-fill.js +0 -35
  145. package/dist/assets/line-icons/icons/hint-fill.js.map +0 -1
  146. package/dist/assets/line-icons/icons/morning.js +0 -35
  147. package/dist/assets/line-icons/icons/morning.js.map +0 -1
  148. package/dist/assets/line-icons/icons/screen-grab-filled.js +0 -35
  149. package/dist/assets/line-icons/icons/screen-grab-filled.js.map +0 -1
  150. package/dist/assets/line-icons/icons/screen-grab.js +0 -23
  151. package/dist/assets/line-icons/icons/screen-grab.js.map +0 -1
  152. package/dist/assets/line-icons/icons/sticker-filled.js +0 -64
  153. package/dist/assets/line-icons/icons/sticker-filled.js.map +0 -1
  154. package/dist/assets/line-icons/icons/sticker.js +0 -46
  155. package/dist/assets/line-icons/icons/sticker.js.map +0 -1
  156. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js +0 -9
  157. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js.map +0 -1
  158. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js +0 -52
  159. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map +0 -1
  160. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +0 -95
  161. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +0 -1
  162. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js +0 -10
  163. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map +0 -1
  164. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js +0 -17
  165. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map +0 -1
  166. package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js +0 -12
  167. package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js.map +0 -1
  168. package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js +0 -34
  169. package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js.map +0 -1
  170. package/dist/features/auth/comps/otp-input/otp-input-styled.js +0 -22
  171. package/dist/features/auth/comps/otp-input/otp-input-styled.js.map +0 -1
  172. package/dist/features/auth/comps/otp-input/otp-input.js +0 -51
  173. package/dist/features/auth/comps/otp-input/otp-input.js.map +0 -1
  174. package/dist/features/auth/comps/pill-button/pill-button-styled.js +0 -44
  175. package/dist/features/auth/comps/pill-button/pill-button-styled.js.map +0 -1
  176. package/dist/features/auth/comps/pill-button/pill-button.js +0 -75
  177. package/dist/features/auth/comps/pill-button/pill-button.js.map +0 -1
  178. package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js +0 -17
  179. package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js.map +0 -1
  180. package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js +0 -67
  181. package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js.map +0 -1
  182. package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js +0 -19
  183. package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js.map +0 -1
  184. package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js +0 -32
  185. package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js.map +0 -1
  186. package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js +0 -44
  187. package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js.map +0 -1
  188. package/dist/features/auth/pla-signup/signup-header/signup-header.js +0 -54
  189. package/dist/features/auth/pla-signup/signup-header/signup-header.js.map +0 -1
  190. package/dist/features/auth/pla-signup/signup-options/signup-options.js +0 -83
  191. package/dist/features/auth/pla-signup/signup-options/signup-options.js.map +0 -1
  192. package/dist/features/puzzles/app/puzzle-app-styled.js +0 -81
  193. package/dist/features/puzzles/app/puzzle-app-styled.js.map +0 -1
  194. package/dist/features/puzzles/app/puzzle-app-view.js +0 -120
  195. package/dist/features/puzzles/app/puzzle-app-view.js.map +0 -1
  196. package/dist/features/puzzles/app/puzzle-app.js +0 -62
  197. package/dist/features/puzzles/app/puzzle-app.js.map +0 -1
  198. package/dist/features/ui/arrow-tooltip/arrow-tooltip-constants.js +0 -6
  199. package/dist/features/ui/arrow-tooltip/arrow-tooltip-constants.js.map +0 -1
  200. package/dist/features/ui/arrow-tooltip/comps/tooltip-body-styled.js +0 -63
  201. package/dist/features/ui/arrow-tooltip/comps/tooltip-body-styled.js.map +0 -1
  202. package/dist/features/ui/arrow-tooltip/comps/tooltip-body.js +0 -21
  203. package/dist/features/ui/arrow-tooltip/comps/tooltip-body.js.map +0 -1
  204. package/dist/features/ui/drawer/drawer-styled.js +0 -34
  205. package/dist/features/ui/drawer/drawer-styled.js.map +0 -1
  206. package/dist/features/ui/drawer/drawer.js +0 -42
  207. package/dist/features/ui/drawer/drawer.js.map +0 -1
  208. package/dist/features/ui/sticker-grid/sticker-grid-styles.js.map +0 -1
  209. package/dist/features/ui/sticker-grid/sticker-grid.js +0 -24
  210. package/dist/features/ui/sticker-grid/sticker-grid.js.map +0 -1
  211. package/dist/features/ui/sticker-grid/sticker.js +0 -57
  212. package/dist/features/ui/sticker-grid/sticker.js.map +0 -1
  213. package/dist/features/ui/stickers/constants.js +0 -6
  214. package/dist/features/ui/stickers/constants.js.map +0 -1
  215. package/dist/features/ui/stickers/stickers-effects.js.map +0 -1
  216. package/dist/features/ui/stickers/stickers-styled.js.map +0 -1
  217. package/dist/features/ui/stickers/stickers-utils.js.map +0 -1
  218. package/dist/features/ui/stickers/stickers.js +0 -40
  219. package/dist/features/ui/stickers/stickers.js.map +0 -1
  220. package/dist/node_modules/decode-uri-component/index.js.map +0 -1
  221. package/dist/node_modules/uuid/dist/esm-browser/native.js +0 -7
  222. package/dist/node_modules/uuid/dist/esm-browser/native.js.map +0 -1
  223. package/dist/static/animated-avatar.1ad58b1d.json +0 -1
  224. package/dist/static/animated-avatar.69b07505.json +0 -1
  225. package/dist/static/animated-avatar.9c560b46.json +0 -1
  226. package/dist/static/calendar-purple.1a840b41.svg +0 -1
  227. package/dist/static/flying-disk.c7f6ed39.json +0 -1
  228. package/dist/static/graduation-cap.3be3340a.json +0 -1
  229. package/dist/static/handshake.287e7dfb.svg +0 -1
  230. package/dist/static/light-bulb.c6db0b23.json +0 -1
  231. package/dist/static/money.332aacf1.svg +0 -1
  232. package/dist/static/muscle.9bcfb8a7.json +0 -1
  233. package/dist/static/nudge-tap.0591aef4.json +0 -1
  234. package/dist/static/parent-avatar.822c7b9b.svg +0 -1
  235. package/dist/static/pencil.23df9da0.json +0 -1
  236. package/dist/static/plus-sign.de6af957.json +0 -1
  237. package/dist/static/racing-car.2cbf864e.json +0 -1
  238. package/dist/static/rocket.0a3ccab0.json +0 -1
  239. package/dist/static/shovel.abeec04c.json +0 -1
  240. package/dist/static/trustpilot.bd3d79e1.svg +0 -1
  241. /package/dist/node_modules/{decode-uri-component → query-string/node_modules/decode-uri-component}/index.js +0 -0
@@ -0,0 +1,57 @@
1
+ import { jsxs as v, jsx as c } from "react/jsx-runtime";
2
+ import { memo as L, useState as f, useRef as $, useCallback as o, useEffect as g } from "react";
3
+ import k from "../../ui/lottie-animation/lottie-animation.js";
4
+ import { StickerContainer as E, StaticEmoji as M, LottieContainer as R } from "./sticker-selector-styles.js";
5
+ const j = ({
6
+ emoji: l,
7
+ lottieUrl: u,
8
+ size: n = 48,
9
+ onClick: s,
10
+ disabled: e = !1
11
+ }) => {
12
+ const [i, m] = f(!1), [r, a] = f(!1), t = $(null), p = o(() => {
13
+ t.current && (t.current.goToAndStop(0, !0), m(!0), r && t.current.play());
14
+ }, [r]);
15
+ g(() => {
16
+ !t.current || !i || (r ? t.current.play() : t.current.goToAndStop(0, !0));
17
+ }, [r, i]);
18
+ const d = o(() => {
19
+ e || a(!0);
20
+ }, [e]), h = o(() => {
21
+ e || a(!1);
22
+ }, [e]), S = o(() => {
23
+ !e && s && s();
24
+ }, [e, s]);
25
+ return /* @__PURE__ */ v(
26
+ E,
27
+ {
28
+ $size: n,
29
+ $disabled: e,
30
+ onMouseEnter: d,
31
+ onMouseLeave: h,
32
+ onClick: S,
33
+ children: [
34
+ !r && /* @__PURE__ */ c(M, { $size: n, children: l }),
35
+ /* @__PURE__ */ c(R, { $size: n, $visible: i, children: u && r && /* @__PURE__ */ c(
36
+ k,
37
+ {
38
+ ref: t,
39
+ src: u,
40
+ width: "100%",
41
+ height: "100%",
42
+ settings: {
43
+ loop: !0,
44
+ autoplay: !1,
45
+ renderer: "canvas"
46
+ },
47
+ onRender: p
48
+ }
49
+ ) })
50
+ ]
51
+ }
52
+ );
53
+ }, H = L(j);
54
+ export {
55
+ H as default
56
+ };
57
+ //# sourceMappingURL=sticker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sticker.js","sources":["../../../../src/features/stickers/sticker-selector/sticker.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../ui/lottie-animation/types';\nimport type { IStickerProps } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport * as S from './sticker-selector-styles';\n\nconst Sticker: React.FC<IStickerProps> = ({\n emoji,\n lottieUrl,\n size = 48,\n onClick,\n disabled = false,\n}) => {\n const [isLoaded, setIsLoaded] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const lottieRef = useRef<ILottieAnimationRef>(null);\n\n const handleRender = useCallback(() => {\n if (!lottieRef.current) return;\n\n lottieRef.current.goToAndStop(0, true);\n setIsLoaded(true);\n\n if (isHovered) lottieRef.current.play();\n }, [isHovered]);\n\n useEffect(() => {\n if (!lottieRef.current || !isLoaded) return;\n\n if (isHovered) {\n lottieRef.current.play();\n } else {\n lottieRef.current.goToAndStop(0, true);\n }\n }, [isHovered, isLoaded]);\n\n const handleMouseEnter = useCallback(() => {\n if (!disabled) setIsHovered(true);\n }, [disabled]);\n\n const handleMouseLeave = useCallback(() => {\n if (!disabled) setIsHovered(false);\n }, [disabled]);\n\n const handleClick = useCallback(() => {\n if (!disabled && onClick) onClick();\n }, [disabled, onClick]);\n\n return (\n <S.StickerContainer\n $size={size}\n $disabled={disabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onClick={handleClick}\n >\n {!isHovered && <S.StaticEmoji $size={size}>{emoji}</S.StaticEmoji>}\n\n <S.LottieContainer $size={size} $visible={isLoaded}>\n {lottieUrl && isHovered && (\n <LottieAnimation\n ref={lottieRef}\n src={lottieUrl}\n width=\"100%\"\n height=\"100%\"\n settings={{\n loop: true,\n autoplay: false,\n renderer: 'canvas',\n }}\n onRender={handleRender}\n />\n )}\n </S.LottieContainer>\n </S.StickerContainer>\n );\n};\n\nexport default memo(Sticker);\n"],"names":["Sticker","emoji","lottieUrl","size","onClick","disabled","isLoaded","setIsLoaded","useState","isHovered","setIsHovered","lottieRef","useRef","handleRender","useCallback","useEffect","handleMouseEnter","handleMouseLeave","handleClick","jsxs","S.StickerContainer","jsx","S.StaticEmoji","S.LottieContainer","LottieAnimation","Sticker$1","memo"],"mappings":";;;;AAQA,MAAMA,IAAmC,CAAC;AAAA,EACxC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAYC,EAA4B,IAAI,GAE5CC,IAAeC,EAAY,MAAM;AACjC,IAACH,EAAU,YAELA,EAAA,QAAQ,YAAY,GAAG,EAAI,GACrCJ,EAAY,EAAI,GAEZE,KAAqBE,EAAA,QAAQ,KAAK;AAAA,EAAA,GACrC,CAACF,CAAS,CAAC;AAEd,EAAAM,EAAU,MAAM;AACd,IAAI,CAACJ,EAAU,WAAW,CAACL,MAEvBG,IACFE,EAAU,QAAQ,SAERA,EAAA,QAAQ,YAAY,GAAG,EAAI;AAAA,EACvC,GACC,CAACF,GAAWH,CAAQ,CAAC;AAElB,QAAAU,IAAmBF,EAAY,MAAM;AACrC,IAACT,KAAUK,EAAa,EAAI;AAAA,EAAA,GAC/B,CAACL,CAAQ,CAAC,GAEPY,IAAmBH,EAAY,MAAM;AACrC,IAACT,KAAUK,EAAa,EAAK;AAAA,EAAA,GAChC,CAACL,CAAQ,CAAC,GAEPa,IAAcJ,EAAY,MAAM;AAChC,IAAA,CAACT,KAAYD,KAAiBA;EAAA,GACjC,CAACC,GAAUD,CAAO,CAAC;AAGpB,SAAA,gBAAAe;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAOjB;AAAA,MACP,WAAWE;AAAA,MACX,cAAcW;AAAA,MACd,cAAcC;AAAA,MACd,SAASC;AAAA,MAER,UAAA;AAAA,QAAA,CAACT,KAAc,gBAAAY,EAAAC,GAAA,EAAc,OAAOnB,GAAO,UAAMF,GAAA;AAAA,QAElD,gBAAAoB,EAACE,GAAA,EAAkB,OAAOpB,GAAM,UAAUG,GACvC,UAAAJ,KAAaO,KACZ,gBAAAY;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,KAAKT;AAAA,YACL,OAAM;AAAA,YACN,QAAO;AAAA,YACP,UAAU;AAAA,cACR,MAAM;AAAA,cACN,UAAU;AAAA,cACV,UAAU;AAAA,YACZ;AAAA,YACA,UAAUW;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeY,IAAAC,EAAK1B,CAAO;"}
@@ -1,5 +1,5 @@
1
1
  import { keyframes as r, css as t } from "styled-components";
2
- import { randomizeDuration as o } from "./stickers-utils.js";
2
+ import { randomizeDuration as o } from "./stickers-effects-utils.js";
3
3
  const s = r`
4
4
  0% {
5
5
  transform: translateY(0vh);
@@ -45,20 +45,20 @@ const s = r`
45
45
  opacity: 0;
46
46
  }
47
47
  `, i = {
48
- float_up: (a) => t`
48
+ "float-up": (a) => t`
49
49
  animation: ${s} ${o(a)}ms ease-out forwards;
50
50
  `,
51
- fall_down: (a) => t`
51
+ "fall-down": (a) => t`
52
52
  animation: ${n} ${o(a)}ms ease-out forwards;
53
53
  `,
54
- burst_from_edges: (a) => t`
54
+ "burst-from-edges": (a) => t`
55
55
  animation: ${e} ${o(a)}ms linear forwards;
56
56
  `,
57
- pop_expand: (a) => t`
57
+ "pop-expand": (a) => t`
58
58
  animation: ${m} ${a}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;
59
59
  `
60
60
  };
61
61
  export {
62
62
  i as effectAnimations
63
63
  };
64
- //# sourceMappingURL=stickers-effects.js.map
64
+ //# sourceMappingURL=effects.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"effects.js","sources":["../../../../src/features/stickers/stickers-effects/effects.ts"],"sourcesContent":["import type { IStickersProps } from './stickers-effects-types';\n\nimport { keyframes, css } from 'styled-components';\n\nimport { randomizeDuration } from './stickers-effects-utils';\n\nconst floatUp = keyframes`\n 0% {\n transform: translateY(0vh);\n opacity: 1;\n }\n 100% {\n transform: translateY(-100vh);\n opacity: 0;\n }\n`;\n\nconst fallDown = keyframes`\n 0% {\n transform: translateY(0vh);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh);\n opacity: 0;\n }\n`;\n\nconst burstFromEdges = keyframes`\n 0% {\n transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateX(0vw) translateY(0vh) scale(1.25);\n opacity: 0;\n }\n`;\n\nconst popExpand = keyframes`\n 0% {\n transform: translateX(0) translateY(0vh);\n opacity: 1;\n }\n 35% {\n transform: translateX(0) translateY(-50vh) scale(1.25);\n opacity: 1;\n }\n 60% {\n transform: translateX(var(--from-x)) translateY(var(--from-y)) scale(1.25);\n opacity: 0.75;\n }\n 100% {\n transform: translateX(var(--from-x)) translateY(-110vh) scale(1.25);\n opacity: 0;\n }\n`;\n\nexport const effectAnimations: Record<\n IStickersProps['effect'],\n (duration: number) => ReturnType<typeof css>\n> = {\n 'float-up': (duration: number) => css`\n animation: ${floatUp} ${randomizeDuration(duration)}ms ease-out forwards;\n `,\n 'fall-down': (duration: number) => css`\n animation: ${fallDown} ${randomizeDuration(duration)}ms ease-out forwards;\n `,\n 'burst-from-edges': (duration: number) => css`\n animation: ${burstFromEdges} ${randomizeDuration(duration)}ms linear forwards;\n `,\n 'pop-expand': (duration: number) => css`\n animation: ${popExpand} ${duration}ms cubic-bezier(0.5, 0.1, 0.7, 1) forwards;\n `,\n};\n"],"names":["floatUp","keyframes","fallDown","burstFromEdges","popExpand","effectAnimations","duration","css","randomizeDuration"],"mappings":";;AAMA,MAAMA,IAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWVC,IAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWXE,IAAiBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBG,IAAYH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBLI,IAGT;AAAA,EACF,YAAY,CAACC,MAAqBC;AAAA,iBACnBP,CAAO,IAAIQ,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAErD,aAAa,CAACA,MAAqBC;AAAA,iBACpBL,CAAQ,IAAIM,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAEtD,oBAAoB,CAACA,MAAqBC;AAAA,iBAC3BJ,CAAc,IAAIK,EAAkBF,CAAQ,CAAC;AAAA;AAAA,EAE5D,cAAc,CAACA,MAAqBC;AAAA,iBACrBH,CAAS,IAAIE,CAAQ;AAAA;AAEtC;"}
@@ -1,5 +1,5 @@
1
1
  import $, { css as s } from "styled-components";
2
- import { effectAnimations as n } from "./stickers-effects.js";
2
+ import { effectAnimations as n } from "./effects.js";
3
3
  const h = $.div`
4
4
  position: relative;
5
5
  width: 100vw;
@@ -26,4 +26,4 @@ export {
26
26
  h as Container,
27
27
  a as Sticker
28
28
  };
29
- //# sourceMappingURL=stickers-styled.js.map
29
+ //# sourceMappingURL=stickers-effects-styled.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stickers-effects-styled.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects-styled.ts"],"sourcesContent":["import type { IStickersProps } from './stickers-effects-types';\n\nimport styled, { css } from 'styled-components';\n\nimport { effectAnimations } from './effects';\n\nexport const Container = styled.div`\n position: relative;\n width: 100vw;\n height: 100vh;\n background: transparent;\n pointer-events: none;\n`;\n\nexport const Sticker = styled.div<{\n effect: IStickersProps['effect'];\n duration: number;\n fromX?: string;\n fromY?: string;\n x: number;\n y: number;\n size: number;\n}>`\n position: absolute;\n z-index: 10;\n\n left: ${({ x }) => `${x}%`};\n top: ${({ y }) => `${y}%`};\n width: ${({ size }) => `${size}px`};\n height: ${({ size }) => `${size}px`};\n font-size: ${({ size }) => `${size}px`};\n\n ${({ effect, duration, fromX, fromY }) =>\n fromX && fromY\n ? css`\n ${effectAnimations[effect](duration)}\n --from-x: ${fromX};\n --from-y: ${fromY};\n `\n : effectAnimations[effect](duration)}\n`;\n"],"names":["Container","styled","Sticker","x","y","size","effect","duration","fromX","fromY","css","effectAnimations"],"mappings":";;AAMO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBC,IAAUD,EAAO;AAAA;AAAA;AAAA;AAAA,UAYpB,CAAC,EAAE,GAAAE,EAAQ,MAAA,GAAGA,CAAC,GAAG;AAAA,SACnB,CAAC,EAAE,GAAAC,EAAQ,MAAA,GAAGA,CAAC,GAAG;AAAA,WAChB,CAAC,EAAE,MAAAC,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA,YACxB,CAAC,EAAE,MAAAA,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA,eACtB,CAAC,EAAE,MAAAA,EAAW,MAAA,GAAGA,CAAI,IAAI;AAAA;AAAA,IAEpC,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,OAAAC,GAAO,OAAAC,QAC5BD,KAASC,IACLC;AAAA,YACIC,EAAiBL,CAAM,EAAEC,CAAQ,CAAC;AAAA,sBACxBC,CAAK;AAAA,sBACLC,CAAK;AAAA,YAEnBE,EAAiBL,CAAM,EAAEC,CAAQ,CAAC;AAAA;"}
@@ -40,10 +40,10 @@ function x({
40
40
  minSize: r,
41
41
  maxSize: d
42
42
  }) {
43
- const c = 100 / n * 2, M = () => Math.random() * (d - r) + r, h = [], i = ["float_up", "fall_down"].includes(s) ? g(n, c) : [];
43
+ const c = 100 / n * 2, M = () => Math.random() * (d - r) + r, h = [], i = ["float-up", "fall-down"].includes(s) ? g(n, c) : [];
44
44
  for (let o = 0; o < n; o++) {
45
45
  const a = t[o % t.length] ?? "", e = M();
46
- if (s === "float_up")
46
+ if (s === "float-up")
47
47
  h.push({
48
48
  id: o,
49
49
  sticker: a,
@@ -51,7 +51,7 @@ function x({
51
51
  y: 110 + (Math.random() - 0.5) * e,
52
52
  size: e
53
53
  });
54
- else if (s === "fall_down")
54
+ else if (s === "fall-down")
55
55
  h.push({
56
56
  id: o,
57
57
  sticker: a,
@@ -59,10 +59,10 @@ function x({
59
59
  y: -10 + (Math.random() - 0.5) * e,
60
60
  size: e
61
61
  });
62
- else if (s === "burst_from_edges") {
62
+ else if (s === "burst-from-edges") {
63
63
  const { x: l, y: m, fromX: p, fromY: u } = f(o, n);
64
64
  h.push({ id: o, sticker: a, x: l, y: m, fromX: p, fromY: u, size: e });
65
- } else s === "pop_expand" ? h.push({
65
+ } else s === "pop-expand" ? h.push({
66
66
  id: o,
67
67
  sticker: a,
68
68
  x: 50,
@@ -88,4 +88,4 @@ export {
88
88
  x as generateStickerData,
89
89
  v as randomizeDuration
90
90
  };
91
- //# sourceMappingURL=stickers-utils.js.map
91
+ //# sourceMappingURL=stickers-effects-utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stickers-effects-utils.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects-utils.ts"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nconst getBurstPosition = (\n index: number,\n total: number,\n): {\n fromX: string;\n fromY: string;\n x: number;\n y: number;\n} => {\n const countPerSide = Math.ceil(total / 4);\n const sideIndex = Math.floor(index / countPerSide);\n const pos = index % countPerSide;\n\n const sides = ['top', 'right', 'bottom', 'left'] as const;\n const side = sides[sideIndex] ?? 'left';\n\n const basePercent = ((pos + 0.5) / countPerSide) * 100;\n const jitter = (Math.random() - 0.5) * 25;\n const edgePercent = Math.min(Math.max(basePercent + jitter, 0), 100);\n\n const centerX = 45 + Math.random() * 10;\n const centerY = 45 + Math.random() * 10;\n\n let fromX = 0;\n let fromY = 0;\n\n switch (side) {\n case 'top':\n fromX = edgePercent - centerX;\n fromY = -centerY + jitter;\n break;\n case 'right':\n fromX = 100 - centerX + jitter;\n fromY = edgePercent - centerY;\n break;\n case 'bottom':\n fromX = edgePercent - centerX;\n fromY = 100 - centerY + jitter;\n break;\n case 'left':\n fromX = -centerX + jitter;\n fromY = edgePercent - centerY;\n break;\n }\n\n return {\n fromX: `${fromX}vw`,\n fromY: `${fromY}vh`,\n x: centerX,\n y: centerY,\n };\n};\n\nconst getRandomNonOverlappingPositions = (count: number, buffer = 10): number[] => {\n const used: number[] = [];\n let attempts = 0;\n const maxAttempts = count;\n\n while (used.length < count && attempts < maxAttempts) {\n const value = Math.floor(Math.random() * (100 - 2 * buffer) + buffer);\n\n if (used.every(v => Math.abs(v - value) >= buffer)) {\n used.push(value);\n }\n attempts++;\n }\n\n while (used.length < count) {\n used.push(Math.floor(Math.random() * (100 - 2 * buffer) + buffer));\n }\n\n return used;\n};\n\nexport function generateStickerData({\n count,\n effect,\n stickers,\n minSize,\n maxSize,\n}: {\n count: number;\n effect: IStickersProps['effect'];\n stickers: string[];\n minSize: number;\n maxSize: number;\n}): TStickerData[] {\n const buffer = (100 / count) * 2;\n const getSize = () => Math.random() * (maxSize - minSize) + minSize;\n const result: TStickerData[] = [];\n const xPositions = ['float-up', 'fall-down'].includes(effect)\n ? getRandomNonOverlappingPositions(count, buffer)\n : [];\n\n for (let i = 0; i < count; i++) {\n const sticker = stickers[i % stickers.length] ?? '';\n const size = getSize();\n\n if (effect === 'float-up') {\n result.push({\n id: i,\n sticker,\n x: xPositions[i]!,\n y: 110 + (Math.random() - 0.5) * size,\n size,\n });\n } else if (effect === 'fall-down') {\n result.push({\n id: i,\n sticker,\n x: xPositions[i]!,\n y: -10 + (Math.random() - 0.5) * size,\n size,\n });\n } else if (effect === 'burst-from-edges') {\n const { x, y, fromX, fromY } = getBurstPosition(i, count);\n\n result.push({ id: i, sticker, x, y, fromX, fromY, size });\n } else if (effect === 'pop-expand') {\n result.push({\n id: i,\n sticker,\n x: 50,\n y: 100,\n fromX: `${(Math.random() - 0.5) * 27.5}vw`,\n fromY: `${-50 - Math.random() * 27.5}vh`,\n size,\n });\n } else {\n result.push({\n id: i,\n sticker,\n x: Math.random() * 100,\n y: Math.random() * 100,\n size,\n });\n }\n }\n\n return result;\n}\n\nexport const randomizeDuration = (base: number, variancePercent = 0.2): number => {\n const delta = base * variancePercent;\n const min = base - delta;\n const max = base + delta;\n\n return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n"],"names":["getBurstPosition","index","total","countPerSide","sideIndex","pos","side","basePercent","jitter","edgePercent","centerX","centerY","fromX","fromY","getRandomNonOverlappingPositions","count","buffer","used","attempts","maxAttempts","value","v","generateStickerData","effect","stickers","minSize","maxSize","getSize","result","xPositions","i","sticker","size","x","y","randomizeDuration","base","variancePercent","delta","min","max"],"mappings":"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"}
@@ -0,0 +1,39 @@
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { memo as l, useState as x, useEffect as D } from "react";
3
+ import { Container as z, Sticker as E } from "./stickers-effects-styled.js";
4
+ import { generateStickerData as d } from "./stickers-effects-utils.js";
5
+ const h = ({ stickers: i, effect: t, count: o, duration: e }) => {
6
+ const [a, m] = x([]);
7
+ return D(() => {
8
+ const r = d({
9
+ count: o,
10
+ effect: t,
11
+ stickers: i,
12
+ minSize: 32,
13
+ maxSize: 48
14
+ });
15
+ m(r);
16
+ const s = setTimeout(() => m([]), e);
17
+ return () => clearTimeout(s);
18
+ }, [i, t, o, e]), /* @__PURE__ */ c(z, { children: a.map((r) => {
19
+ const { id: s, sticker: n, x: f, y: k, size: S, fromX: p, fromY: u } = r;
20
+ return /* @__PURE__ */ c(
21
+ E,
22
+ {
23
+ effect: t,
24
+ duration: e,
25
+ fromX: p,
26
+ fromY: u,
27
+ x: f,
28
+ y: k,
29
+ size: S,
30
+ children: n
31
+ },
32
+ s
33
+ );
34
+ }) });
35
+ }, C = l(h);
36
+ export {
37
+ C as default
38
+ };
39
+ //# sourceMappingURL=stickers-effects.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { TStickerData, IStickersProps } from './stickers-effects-types';\n\nimport React, { memo, useEffect, useState } from 'react';\n\nimport * as S from './stickers-effects-styled';\nimport { generateStickerData } from './stickers-effects-utils';\n\nconst StickersEffects: React.FC<IStickersProps> = ({ stickers, effect, count, duration }) => {\n const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n useEffect(() => {\n const stickerData = generateStickerData({\n count,\n effect,\n stickers,\n minSize: 32,\n maxSize: 48,\n });\n\n setStickersData(stickerData);\n\n const timeout = setTimeout(() => setStickersData([]), duration);\n\n return () => clearTimeout(timeout);\n }, [stickers, effect, count, duration]);\n\n return (\n <S.Container>\n {stickersData.map((data: TStickerData) => {\n const { id, sticker, x, y, size, fromX, fromY } = data;\n\n return (\n <S.Sticker\n key={id}\n effect={effect}\n duration={duration}\n fromX={fromX}\n fromY={fromY}\n x={x}\n y={y}\n size={size}\n >\n {sticker}\n </S.Sticker>\n );\n })}\n </S.Container>\n );\n};\n\nexport default memo(StickersEffects);\n"],"names":["StickersEffects","stickers","effect","count","duration","stickersData","setStickersData","useState","useEffect","stickerData","generateStickerData","timeout","S.Container","data","id","sticker","x","y","size","fromX","fromY","jsx","S.Sticker","stickersEffects","memo"],"mappings":";;;;AAOA,MAAMA,IAA4C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AAC3F,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA;AAE3F,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAP;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBG,CAAW;AAE3B,UAAME,IAAU,WAAW,MAAML,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaO,CAAO;AAAA,KAChC,CAACV,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,qBAGnCQ,GAAA,EACE,UAAaP,EAAA,IAAI,CAACQ,MAAuB;AAClC,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAP;AAGhD,WAAA,gBAAAQ;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,QAAApB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAe;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYV,CAAA,EACH,CAAA;AAEJ,GAEeS,IAAAC,EAAKxB,CAAe;"}
@@ -1,15 +1,63 @@
1
- import o from "styled-components";
2
- const i = o.div`
3
- position: absolute;
4
- top: 0;
5
- left: 0;
6
- right: 0;
7
- bottom: 0;
8
- width: 100%;
9
- height: 100%;
10
- z-index: ${({ theme: t }) => t.zIndex.JOURNEY_OVERLAY};
11
- `;
1
+ import w from "styled-components";
2
+ import y from "../layout/flex-view.js";
3
+ import { arrowPosition as T, tooltipPosition as k, animateToolTip as m } from "./arrow-tooltip-util.js";
4
+ const P = w(y)(({
5
+ theme: o,
6
+ $arrowColor: r,
7
+ $arrowSize: t,
8
+ $arrowXCoOrdinates: c,
9
+ $arrowYCoOrdinates: d,
10
+ $borderColor: p,
11
+ $isAnimated: x,
12
+ $position: n,
13
+ $renderAs: s,
14
+ $tooltipCoOrdinates: e,
15
+ $tooltipOffset: f,
16
+ $tooltipXCoOrdinates: g,
17
+ $tooltipYCoOrdinates: u,
18
+ $zIndex: C,
19
+ $backgroundColor: O
20
+ }) => {
21
+ const { gutter: l } = o.layout, { REAL_BLACK_15: $ } = o.colors, { tooltipVariants: a } = o.arrowTooltip;
22
+ let { backgroundColorName: i } = a[s];
23
+ const { textColorName: b } = a[s];
24
+ return i = O || i, `
25
+ position: fixed;
26
+ z-index: ${C || 1};
27
+ padding: ${l * 0.25}px ${l * 0.5}px;
28
+ color: ${b};
29
+ box-shadow: 0px 2px 15px 0px ${$};
30
+ background-color: ${o.colors[i]};
31
+ border: 1px solid ${p ? o.colors[p] : "transparent"};
32
+
33
+ &::after {
34
+ content: '';
35
+ position: absolute;
36
+ height: ${t}px;
37
+ width: ${t}px;
38
+ clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
39
+ background-color: ${r ? o.colors[r] : o.colors[i]};
40
+ ${T({
41
+ position: n,
42
+ arrowXCoOrdinates: c,
43
+ arrowYCoOrdinates: d,
44
+ arrowSize: t
45
+ })};
46
+ }
47
+
48
+ ${k({
49
+ position: n,
50
+ arrowSize: t,
51
+ tooltipCoOrdinates: e,
52
+ tooltipOffset: f,
53
+ tooltipXCoOrdinates: g,
54
+ tooltipYCoOrdinates: u
55
+ })};
56
+
57
+ ${m(x)};
58
+ `;
59
+ });
12
60
  export {
13
- i as BackgroundOverlay
61
+ P as TooltipBody
14
62
  };
15
63
  //# sourceMappingURL=arrow-tooltip-styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BackgroundOverlay = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n z-index: ${({ theme }) => theme.zIndex.JOURNEY_OVERLAY};\n`;\n"],"names":["BackgroundOverlay","styled","theme"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQ3B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,eAAe;AAAA;"}
1
+ {"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import type { TArrowTooltipVariants, TColorNames } from '../types';\nimport type { TPositionProps, TTooltipCoOrdinatesProps } from './arrow-tooltip-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport { animateToolTip, arrowPosition, tooltipPosition } from './arrow-tooltip-util';\n\ninterface ITooltipBodyProps {\n $arrowSize: number;\n $arrowColor?: TColorNames;\n $arrowXCoOrdinates?: number;\n $arrowYCoOrdinates?: number;\n $backgroundColor?: TColorNames;\n $borderColor?: TColorNames;\n $position: TPositionProps;\n $renderAs: TArrowTooltipVariants;\n $tooltipCoOrdinates: TTooltipCoOrdinatesProps | null;\n $tooltipOffset?: number;\n $tooltipXCoOrdinates?: number | string;\n $tooltipYCoOrdinates?: number | string;\n $zIndex?: number;\n $isAnimated?: boolean;\n}\n\nconst TooltipBody = styled(FlexView)<ITooltipBodyProps>(({\n theme,\n $arrowColor,\n $arrowSize,\n $arrowXCoOrdinates,\n $arrowYCoOrdinates,\n $borderColor,\n $isAnimated,\n $position,\n $renderAs,\n $tooltipCoOrdinates,\n $tooltipOffset,\n $tooltipXCoOrdinates,\n $tooltipYCoOrdinates,\n $zIndex,\n $backgroundColor,\n}) => {\n const { gutter } = theme.layout;\n const { REAL_BLACK_15 } = theme.colors;\n const { tooltipVariants } = theme.arrowTooltip;\n let { backgroundColorName } = tooltipVariants[$renderAs];\n const { textColorName } = tooltipVariants[$renderAs];\n\n backgroundColorName = $backgroundColor || backgroundColorName;\n\n return `\n position: fixed;\n z-index: ${$zIndex || 1};\n padding: ${gutter * 0.25}px ${gutter * 0.5}px;\n color: ${textColorName};\n box-shadow: 0px 2px 15px 0px ${REAL_BLACK_15};\n background-color: ${theme.colors[backgroundColorName]};\n border: 1px solid ${$borderColor ? theme.colors[$borderColor] : 'transparent'};\n\n &::after {\n content: '';\n position: absolute;\n height: ${$arrowSize}px;\n width: ${$arrowSize}px;\n clip-path: polygon(0% 0%, 100% 100%, 0% 100%);\n background-color: ${\n $arrowColor ? theme.colors[$arrowColor] : theme.colors[backgroundColorName]\n };\n ${arrowPosition({\n position: $position,\n arrowXCoOrdinates: $arrowXCoOrdinates,\n arrowYCoOrdinates: $arrowYCoOrdinates,\n arrowSize: $arrowSize,\n })};\n }\n\n ${tooltipPosition({\n position: $position,\n arrowSize: $arrowSize,\n tooltipCoOrdinates: $tooltipCoOrdinates,\n tooltipOffset: $tooltipOffset,\n tooltipXCoOrdinates: $tooltipXCoOrdinates,\n tooltipYCoOrdinates: $tooltipYCoOrdinates,\n })};\n\n ${animateToolTip($isAnimated)};\n `;\n});\n\nexport { TooltipBody };\n"],"names":["TooltipBody","styled","FlexView","theme","$arrowColor","$arrowSize","$arrowXCoOrdinates","$arrowYCoOrdinates","$borderColor","$isAnimated","$position","$renderAs","$tooltipCoOrdinates","$tooltipOffset","$tooltipXCoOrdinates","$tooltipYCoOrdinates","$zIndex","$backgroundColor","gutter","REAL_BLACK_15","tooltipVariants","backgroundColorName","textColorName","arrowPosition","tooltipPosition","animateToolTip"],"mappings":";;;AAyBA,MAAMA,IAAcC,EAAOC,CAAQ,EAAqB,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAO,IAAIf,EAAM,QACnB,EAAE,eAAAgB,EAAc,IAAIhB,EAAM,QAC1B,EAAE,iBAAAiB,EAAgB,IAAIjB,EAAM;AAClC,MAAI,EAAE,qBAAAkB,EAAA,IAAwBD,EAAgBT,CAAS;AACvD,QAAM,EAAE,eAAAW,EAAA,IAAkBF,EAAgBT,CAAS;AAEnD,SAAAU,IAAsBJ,KAAoBI,GAEnC;AAAA;AAAA,eAEML,KAAW,CAAC;AAAA,eACZE,IAAS,IAAI,MAAMA,IAAS,GAAG;AAAA,aACjCI,CAAa;AAAA,mCACSH,CAAa;AAAA,wBACxBhB,EAAM,OAAOkB,CAAmB,CAAC;AAAA,wBACjCb,IAAeL,EAAM,OAAOK,CAAY,IAAI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKjEH,CAAU;AAAA,eACXA,CAAU;AAAA;AAAA,0BAGjBD,IAAcD,EAAM,OAAOC,CAAW,IAAID,EAAM,OAAOkB,CAAmB,CAC5E;AAAA,QACEE,EAAc;AAAA,IACd,UAAUb;AAAA,IACV,mBAAmBJ;AAAA,IACnB,mBAAmBC;AAAA,IACnB,WAAWF;AAAA,EAAA,CACZ,CAAC;AAAA;AAAA;AAAA,MAGFmB,EAAgB;AAAA,IAChB,UAAUd;AAAA,IACV,WAAWL;AAAA,IACX,oBAAoBO;AAAA,IACpB,eAAeC;AAAA,IACf,qBAAqBC;AAAA,IACrB,qBAAqBC;AAAA,EAAA,CACtB,CAAC;AAAA;AAAA,MAEAU,EAAehB,CAAW,CAAC;AAAA;AAEjC,CAAC;"}
@@ -1,100 +1,105 @@
1
- import { jsxs as D, Fragment as U, jsx as e } from "react/jsx-runtime";
2
- import W from "../../../node_modules/lodash.throttle/index.js";
3
- import { memo as Y, useRef as H, useState as f, useCallback as p, useEffect as m } from "react";
4
- import $ from "../layout/flex-view.js";
5
- import P from "../portal/portal.js";
6
- import { THROTTLE_DURATION as Z, DEFAULT_ARROW_SIZE as q } from "./arrow-tooltip-constants.js";
7
- import { BackgroundOverlay as G } from "./arrow-tooltip-styled.js";
1
+ import { jsxs as U, Fragment as W, jsx as e } from "react/jsx-runtime";
2
+ import Y from "../../../node_modules/lodash.throttle/index.js";
3
+ import { useRef as H, useState as m, useCallback as $, useEffect as C } from "react";
4
+ import { useTheme as P } from "styled-components";
5
+ import w from "../layout/flex-view.js";
6
+ import Z from "../portal/portal.js";
7
+ import q from "../text/text.js";
8
+ import { TooltipBody as G } from "./arrow-tooltip-styled.js";
8
9
  import { computeTooltipNewCoOrdinates as J } from "./arrow-tooltip-util.js";
9
- import K from "./comps/tooltip-body.js";
10
- const Q = ({
11
- isAnimated: C,
10
+ const K = 8, Q = 100, V = ({
11
+ isAnimated: O,
12
12
  alwaysVisible: o = !1,
13
- arrowColor: O,
14
- arrowSize: w = q,
15
- arrowXCoOrdinates: E,
16
- arrowYCoOrdinates: T,
13
+ arrowColor: T,
14
+ arrowSize: E = K,
15
+ arrowXCoOrdinates: g,
16
+ arrowYCoOrdinates: h,
17
17
  backgroundColor: v,
18
18
  borderColor: R,
19
- children: h,
19
+ children: x,
20
20
  hidden: t,
21
21
  position: l,
22
- renderAs: A,
22
+ renderAs: s,
23
23
  textVariant: L,
24
- tooltipItem: g,
25
- tooltipOffset: x,
26
- tooltipXCoOrdinates: z,
27
- tooltipYCoOrdinates: I,
28
- width: b,
29
- widthX: k,
30
- zIndex: B,
31
- parentWidth: F,
32
- isBlocking: M = !1
24
+ tooltipItem: c,
25
+ tooltipOffset: A,
26
+ tooltipXCoOrdinates: b,
27
+ tooltipYCoOrdinates: N,
28
+ width: k,
29
+ widthX: z,
30
+ zIndex: F,
31
+ parentWidth: M
33
32
  }) => {
34
- const u = H(null), [N, d] = f(o), [S, X] = f(
33
+ const { arrowTooltip: S } = P(), { tooltipVariants: a } = S, { backgroundColorName: X } = a[s], d = H(null), [_, f] = m(o), [j, B] = m(
35
34
  null
36
- ), s = p(
35
+ ), u = $(
37
36
  (n, i) => {
38
- X(n), d(i);
37
+ B(n), f(i);
39
38
  },
40
39
  []
41
- ), _ = p(() => {
40
+ ), D = $(() => {
42
41
  if (t || o)
43
42
  return null;
44
- s(null, !1);
45
- }, [o, s, t]), r = W(() => {
46
- var a;
47
- const { current: n } = u;
43
+ u(null, !1);
44
+ }, [o, u, t]), r = Y(() => {
45
+ var p;
46
+ const { current: n } = d;
48
47
  if (t || !n) return null;
49
- const i = (a = n.children[0]) == null ? void 0 : a.getBoundingClientRect(), j = i ? J(l, i) : null;
50
- return s(j, !0), null;
51
- }, Z);
52
- m(() => {
48
+ const i = (p = n.children[0]) == null ? void 0 : p.getBoundingClientRect(), I = i ? J(l, i) : null;
49
+ return u(I, !0), null;
50
+ }, Q);
51
+ return C(() => {
53
52
  if (!(!o || t))
54
53
  return window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
55
54
  window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
56
55
  };
57
- }, [o, t, l, r]), m(() => {
58
- t && d(!1), o && r();
59
- }, [o, t]);
60
- const c = /* @__PURE__ */ e(
61
- K,
62
- {
63
- $arrowSize: w,
64
- $arrowXCoOrdinates: E,
65
- $arrowYCoOrdinates: T,
66
- $position: l,
67
- $renderAs: A,
68
- $tooltipCoOrdinates: S,
69
- $tooltipOffset: x,
70
- $tooltipXCoOrdinates: z,
71
- $tooltipYCoOrdinates: I,
72
- $zIndex: B,
73
- $backgroundColor: v,
74
- $arrowColor: O,
75
- $borderColor: R,
76
- $isAnimated: C,
77
- $width: b,
78
- $widthX: k,
79
- textVariant: L || "body3",
80
- children: g
81
- }
82
- );
83
- return /* @__PURE__ */ D(U, { children: [
56
+ }, [o, t, l, r]), C(() => {
57
+ t && f(!1), o && r();
58
+ }, [o, t]), /* @__PURE__ */ U(W, { children: [
84
59
  /* @__PURE__ */ e(
85
- $,
60
+ w,
86
61
  {
87
- $width: F || "fit-content",
88
- ref: u,
62
+ $width: M || "fit-content",
63
+ ref: d,
89
64
  onMouseEnter: r,
90
- onMouseLeave: _,
91
- children: /* @__PURE__ */ e($, { children: h })
65
+ onMouseLeave: D,
66
+ children: /* @__PURE__ */ e(w, { children: x })
92
67
  }
93
68
  ),
94
- N && /* @__PURE__ */ e(P, { portalId: "tooltip-root", children: M ? /* @__PURE__ */ e(G, { children: c }) : c })
69
+ _ && /* @__PURE__ */ e(Z, { portalId: "tooltip-root", children: /* @__PURE__ */ e(
70
+ G,
71
+ {
72
+ $arrowSize: E,
73
+ $arrowXCoOrdinates: g,
74
+ $arrowYCoOrdinates: h,
75
+ $position: l,
76
+ $renderAs: s,
77
+ $tooltipCoOrdinates: j,
78
+ $tooltipOffset: A,
79
+ $tooltipXCoOrdinates: b,
80
+ $tooltipYCoOrdinates: N,
81
+ $width: k,
82
+ $widthX: z,
83
+ $zIndex: F,
84
+ $background: X,
85
+ $backgroundColor: v,
86
+ $arrowColor: T,
87
+ $borderColor: R,
88
+ $isAnimated: O,
89
+ children: typeof c == "string" ? /* @__PURE__ */ e(
90
+ q,
91
+ {
92
+ $renderAs: L || "body3",
93
+ $color: a[s].textColorName,
94
+ $align: "center",
95
+ children: c
96
+ }
97
+ ) : c
98
+ }
99
+ ) })
95
100
  ] });
96
- }, so = Y(Q);
101
+ }, co = V;
97
102
  export {
98
- so as default
103
+ co as default
99
104
  };
100
105
  //# sourceMappingURL=arrow-tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n IArrowTooltipProps,\n THandleVisibleNCoOrdinatesProps,\n TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport { DEFAULT_ARROW_SIZE, THROTTLE_DURATION } from './arrow-tooltip-constants';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\nimport TooltipBody from './comps/tooltip-body';\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n isAnimated,\n alwaysVisible = false,\n arrowColor,\n arrowSize = DEFAULT_ARROW_SIZE,\n arrowXCoOrdinates,\n arrowYCoOrdinates,\n backgroundColor,\n borderColor,\n children,\n hidden,\n position,\n renderAs,\n textVariant,\n tooltipItem,\n tooltipOffset,\n tooltipXCoOrdinates,\n tooltipYCoOrdinates,\n width,\n widthX,\n zIndex,\n parentWidth,\n isBlocking = false,\n}) => {\n const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n const [visible, setVisible] = useState(alwaysVisible);\n const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n null,\n );\n\n const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n (newCoOrdinates, visibility) => {\n setTooltipCoOrdinates(newCoOrdinates);\n setVisible(visibility);\n },\n [],\n );\n\n const handleVisibility = useCallback(() => {\n if (hidden || alwaysVisible) {\n return null;\n }\n\n handleVisibleNCoOrdinates(null, false);\n\n return;\n }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n const handleOnMouseEnter = throttle(() => {\n const { current } = tooltipWrapperRef;\n\n if (hidden || !current) return null;\n\n const boundingClientRect = current.children[0]?.getBoundingClientRect();\n const newCoOrdinates = boundingClientRect\n ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n : null;\n\n handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n return null;\n }, THROTTLE_DURATION);\n\n useEffect(() => {\n if (!alwaysVisible || hidden) return;\n\n window.addEventListener('scroll', handleOnMouseEnter, true);\n window.addEventListener('resize', handleOnMouseEnter);\n\n return () => {\n window.removeEventListener('scroll', handleOnMouseEnter, true);\n window.removeEventListener('resize', handleOnMouseEnter);\n };\n }, [alwaysVisible, hidden, position, handleOnMouseEnter]);\n\n useEffect(() => {\n if (hidden) {\n setVisible(false);\n }\n\n if (alwaysVisible) {\n handleOnMouseEnter();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [alwaysVisible, hidden]);\n\n const tooltipContent = (\n <TooltipBody\n $arrowSize={arrowSize}\n $arrowXCoOrdinates={arrowXCoOrdinates}\n $arrowYCoOrdinates={arrowYCoOrdinates}\n $position={position}\n $renderAs={renderAs}\n $tooltipCoOrdinates={tooltipCoOrdinates}\n $tooltipOffset={tooltipOffset}\n $tooltipXCoOrdinates={tooltipXCoOrdinates}\n $tooltipYCoOrdinates={tooltipYCoOrdinates}\n $zIndex={zIndex}\n $backgroundColor={backgroundColor}\n $arrowColor={arrowColor}\n $borderColor={borderColor}\n $isAnimated={isAnimated}\n $width={width}\n $widthX={widthX}\n textVariant={textVariant || 'body3'}\n >\n {tooltipItem}\n </TooltipBody>\n );\n\n return (\n <>\n <FlexView\n $width={parentWidth || 'fit-content'}\n ref={tooltipWrapperRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleVisibility}\n >\n <FlexView>{children}</FlexView>\n </FlexView>\n\n {visible && (\n <Portal portalId=\"tooltip-root\">\n {isBlocking ? (\n <Styled.BackgroundOverlay>{tooltipContent}</Styled.BackgroundOverlay>\n ) : (\n tooltipContent\n )}\n </Portal>\n )}\n </>\n );\n};\n\nexport default memo(ArrowTooltip);\n"],"names":["ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","DEFAULT_ARROW_SIZE","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","THROTTLE_DURATION","useEffect","tooltipContent","jsx","TooltipBody","jsxs","Fragment","FlexView","Portal","Styled.BackgroundOverlay","ArrowTooltip$1","memo"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,WAAAC,IAAYC;AAAA,EACZ,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AACf,MAAM;AACE,QAAAC,IAAoBC,EAAuB,IAAI,GAC/C,CAACC,GAASC,CAAU,IAAIC,EAAS1B,CAAa,GAC9C,CAAC2B,GAAoBC,CAAqB,IAAIF;AAAA,IAClD;AAAA,EAAA,GAGIG,IAA6DC;AAAA,IACjE,CAACC,GAAgBC,MAAe;AAC9B,MAAAJ,EAAsBG,CAAc,GACpCN,EAAWO,CAAU;AAAA,IACvB;AAAA,IACA,CAAC;AAAA,EAAA,GAGGC,IAAmBH,EAAY,MAAM;AACzC,QAAIrB,KAAUT;AACL,aAAA;AAGT,IAAA6B,EAA0B,MAAM,EAAK;AAAA,EAGpC,GAAA,CAAC7B,GAAe6B,GAA2BpB,CAAM,CAAC,GAE/CyB,IAAqBC,EAAS,MAAM;;AAClC,UAAA,EAAE,SAAAC,EAAY,IAAAd;AAEhB,QAAAb,KAAU,CAAC2B,EAAgB,QAAA;AAE/B,UAAMC,KAAqBC,IAAAF,EAAQ,SAAS,CAAC,MAAlB,gBAAAE,EAAqB,yBAC1CP,IAAiBM,IACnBE,EAA6B7B,GAAU2B,CAAkB,IACzD;AAEJ,WAAAR,EAA0BE,GAAgB,EAAI,GAEvC;AAAA,KACNS,CAAiB;AAEpB,EAAAC,EAAU,MAAM;AACV,QAAA,GAACzC,KAAiBS;AAEf,oBAAA,iBAAiB,UAAUyB,GAAoB,EAAI,GACnD,OAAA,iBAAiB,UAAUA,CAAkB,GAE7C,MAAM;AACJ,eAAA,oBAAoB,UAAUA,GAAoB,EAAI,GACtD,OAAA,oBAAoB,UAAUA,CAAkB;AAAA,MAAA;AAAA,KAExD,CAAClC,GAAeS,GAAQC,GAAUwB,CAAkB,CAAC,GAExDO,EAAU,MAAM;AACd,IAAIhC,KACFgB,EAAW,EAAK,GAGdzB,KACiBkC;EACrB,GAEC,CAAClC,GAAeS,CAAM,CAAC;AAE1B,QAAMiC,IACJ,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAY1C;AAAA,MACZ,oBAAoBE;AAAA,MACpB,oBAAoBC;AAAA,MACpB,WAAWK;AAAA,MACX,WAAWC;AAAA,MACX,qBAAqBgB;AAAA,MACrB,gBAAgBb;AAAA,MAChB,sBAAsBC;AAAA,MACtB,sBAAsBC;AAAA,MACtB,SAASG;AAAA,MACT,kBAAkBb;AAAA,MAClB,aAAaL;AAAA,MACb,cAAcM;AAAA,MACd,aAAaR;AAAA,MACb,QAAQkB;AAAA,MACR,SAASC;AAAA,MACT,aAAaN,KAAe;AAAA,MAE3B,UAAAC;AAAA,IAAA;AAAA,EAAA;AAIL,SAEI,gBAAAgC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,QAAQ3B,KAAe;AAAA,QACvB,KAAKE;AAAA,QACL,cAAcY;AAAA,QACd,cAAcD;AAAA,QAEd,UAAA,gBAAAU,EAACI,KAAU,UAAAvC,EAAS,CAAA;AAAA,MAAA;AAAA,IACtB;AAAA,IAECgB,KACC,gBAAAmB,EAACK,GAAO,EAAA,UAAS,gBACd,UAAA3B,IACE,gBAAAsB,EAAAM,GAAA,EAA0B,UAAeP,EAAA,CAAA,IAE1CA,EAEJ,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeQ,KAAAC,EAAKrD,CAAY;"}
1
+ {"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n IArrowTooltipProps,\n THandleVisibleNCoOrdinatesProps,\n TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n isAnimated,\n alwaysVisible = false,\n arrowColor,\n arrowSize = DEFAULT_ARROW_SIZE,\n arrowXCoOrdinates,\n arrowYCoOrdinates,\n backgroundColor,\n borderColor,\n children,\n hidden,\n position,\n renderAs,\n textVariant,\n tooltipItem,\n tooltipOffset,\n tooltipXCoOrdinates,\n tooltipYCoOrdinates,\n width,\n widthX,\n zIndex,\n parentWidth,\n}) => {\n const { arrowTooltip } = useTheme();\n const { tooltipVariants } = arrowTooltip;\n const { backgroundColorName } = tooltipVariants[renderAs];\n\n const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n const [visible, setVisible] = useState(alwaysVisible);\n const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n null,\n );\n\n const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n (newCoOrdinates, visibility) => {\n setTooltipCoOrdinates(newCoOrdinates);\n setVisible(visibility);\n },\n [],\n );\n\n const handleVisibility = useCallback(() => {\n if (hidden || alwaysVisible) {\n return null;\n }\n\n handleVisibleNCoOrdinates(null, false);\n\n return;\n }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n const handleOnMouseEnter = throttle(() => {\n const { current } = tooltipWrapperRef;\n\n if (hidden || !current) return null;\n\n const boundingClientRect = current.children[0]?.getBoundingClientRect();\n const newCoOrdinates = boundingClientRect\n ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n : null;\n\n handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n return null;\n }, THROTTLE_DURATION);\n\n useEffect(() => {\n if (!alwaysVisible || hidden) return;\n\n window.addEventListener('scroll', handleOnMouseEnter, true);\n window.addEventListener('resize', handleOnMouseEnter);\n\n return () => {\n window.removeEventListener('scroll', handleOnMouseEnter, true);\n window.removeEventListener('resize', handleOnMouseEnter);\n };\n }, [alwaysVisible, hidden, position, handleOnMouseEnter]);\n\n useEffect(() => {\n if (hidden) {\n setVisible(false);\n }\n\n if (alwaysVisible) {\n handleOnMouseEnter();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [alwaysVisible, hidden]);\n\n return (\n <>\n <FlexView\n $width={parentWidth || 'fit-content'}\n ref={tooltipWrapperRef}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleVisibility}\n >\n <FlexView>{children}</FlexView>\n </FlexView>\n {visible && (\n <Portal portalId=\"tooltip-root\">\n <Styled.TooltipBody\n $arrowSize={arrowSize}\n $arrowXCoOrdinates={arrowXCoOrdinates}\n $arrowYCoOrdinates={arrowYCoOrdinates}\n $position={position}\n $renderAs={renderAs}\n $tooltipCoOrdinates={tooltipCoOrdinates}\n $tooltipOffset={tooltipOffset}\n $tooltipXCoOrdinates={tooltipXCoOrdinates}\n $tooltipYCoOrdinates={tooltipYCoOrdinates}\n $width={width}\n $widthX={widthX}\n $zIndex={zIndex}\n $background={backgroundColorName}\n $backgroundColor={backgroundColor}\n $arrowColor={arrowColor}\n $borderColor={borderColor}\n $isAnimated={isAnimated}\n >\n {typeof tooltipItem === 'string' ? (\n <Text\n $renderAs={textVariant || 'body3'}\n $color={tooltipVariants[renderAs].textColorName}\n $align=\"center\"\n >\n {tooltipItem}\n </Text>\n ) : (\n tooltipItem\n )}\n </Styled.TooltipBody>\n </Portal>\n )}\n </>\n );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}