@frontify/fondue-components 29.1.0 → 30.0.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 (317) hide show
  1. package/dist/fondue-components.js +72 -70
  2. package/dist/fondue-components.js.map +1 -1
  3. package/dist/fondue-components10.js +181 -33
  4. package/dist/fondue-components10.js.map +1 -1
  5. package/dist/fondue-components100.js +8 -23
  6. package/dist/fondue-components100.js.map +1 -1
  7. package/dist/fondue-components101.js +11 -34
  8. package/dist/fondue-components101.js.map +1 -1
  9. package/dist/fondue-components102.js +10 -10
  10. package/dist/fondue-components103.js +6 -67
  11. package/dist/fondue-components103.js.map +1 -1
  12. package/dist/fondue-components104.js +12 -14
  13. package/dist/fondue-components104.js.map +1 -1
  14. package/dist/fondue-components105.js +22 -25
  15. package/dist/fondue-components105.js.map +1 -1
  16. package/dist/fondue-components106.js +34 -19
  17. package/dist/fondue-components106.js.map +1 -1
  18. package/dist/fondue-components107.js +10 -24
  19. package/dist/fondue-components107.js.map +1 -1
  20. package/dist/fondue-components108.js +67 -8
  21. package/dist/fondue-components108.js.map +1 -1
  22. package/dist/fondue-components109.js +14 -30
  23. package/dist/fondue-components109.js.map +1 -1
  24. package/dist/fondue-components11.js +35 -185
  25. package/dist/fondue-components11.js.map +1 -1
  26. package/dist/fondue-components110.js +23 -4
  27. package/dist/fondue-components110.js.map +1 -1
  28. package/dist/fondue-components111.js +18 -4
  29. package/dist/fondue-components111.js.map +1 -1
  30. package/dist/fondue-components112.js +24 -4
  31. package/dist/fondue-components112.js.map +1 -1
  32. package/dist/fondue-components113.js +9 -14
  33. package/dist/fondue-components113.js.map +1 -1
  34. package/dist/fondue-components114.js +32 -16
  35. package/dist/fondue-components114.js.map +1 -1
  36. package/dist/fondue-components115.js +7 -111
  37. package/dist/fondue-components115.js.map +1 -1
  38. package/dist/fondue-components116.js +4 -12
  39. package/dist/fondue-components116.js.map +1 -1
  40. package/dist/fondue-components117.js +5 -17
  41. package/dist/fondue-components117.js.map +1 -1
  42. package/dist/fondue-components118.js +214 -10
  43. package/dist/fondue-components118.js.map +1 -1
  44. package/dist/fondue-components119.js +18 -16
  45. package/dist/fondue-components119.js.map +1 -1
  46. package/dist/fondue-components12.js +185 -7
  47. package/dist/fondue-components12.js.map +1 -1
  48. package/dist/fondue-components120.js +15 -125
  49. package/dist/fondue-components120.js.map +1 -1
  50. package/dist/fondue-components121.js +151 -11
  51. package/dist/fondue-components121.js.map +1 -1
  52. package/dist/fondue-components122.js +45 -36
  53. package/dist/fondue-components122.js.map +1 -1
  54. package/dist/fondue-components123.js +16 -216
  55. package/dist/fondue-components123.js.map +1 -1
  56. package/dist/fondue-components124.js +14 -19
  57. package/dist/fondue-components124.js.map +1 -1
  58. package/dist/fondue-components125.js +16 -16
  59. package/dist/fondue-components125.js.map +1 -1
  60. package/dist/fondue-components126.js +107 -147
  61. package/dist/fondue-components126.js.map +1 -1
  62. package/dist/fondue-components127.js +12 -44
  63. package/dist/fondue-components127.js.map +1 -1
  64. package/dist/fondue-components128.js +17 -42
  65. package/dist/fondue-components128.js.map +1 -1
  66. package/dist/fondue-components129.js +16 -0
  67. package/dist/fondue-components129.js.map +1 -0
  68. package/dist/fondue-components13.js +8 -63
  69. package/dist/fondue-components13.js.map +1 -1
  70. package/dist/fondue-components130.js +127 -41
  71. package/dist/fondue-components130.js.map +1 -1
  72. package/dist/fondue-components131.js +11 -170
  73. package/dist/fondue-components131.js.map +1 -1
  74. package/dist/fondue-components132.js +34 -58
  75. package/dist/fondue-components132.js.map +1 -1
  76. package/dist/fondue-components133.js +33 -9
  77. package/dist/fondue-components133.js.map +1 -1
  78. package/dist/fondue-components134.js +6 -256
  79. package/dist/fondue-components134.js.map +1 -1
  80. package/dist/fondue-components137.js +4 -4
  81. package/dist/fondue-components138.js +1 -1
  82. package/dist/fondue-components139.js +1 -1
  83. package/dist/fondue-components14.js +61 -35
  84. package/dist/fondue-components14.js.map +1 -1
  85. package/dist/fondue-components140.js +2 -2
  86. package/dist/fondue-components141.js +3 -3
  87. package/dist/fondue-components142.js +2 -2
  88. package/dist/fondue-components143.js +168 -17
  89. package/dist/fondue-components143.js.map +1 -1
  90. package/dist/fondue-components144.js +60 -70
  91. package/dist/fondue-components144.js.map +1 -1
  92. package/dist/fondue-components145.js +7 -1350
  93. package/dist/fondue-components145.js.map +1 -1
  94. package/dist/fondue-components146.js +217 -902
  95. package/dist/fondue-components146.js.map +1 -1
  96. package/dist/fondue-components147.js +17 -196
  97. package/dist/fondue-components147.js.map +1 -1
  98. package/dist/fondue-components149.js +41 -39
  99. package/dist/fondue-components149.js.map +1 -1
  100. package/dist/fondue-components15.js +36 -121
  101. package/dist/fondue-components15.js.map +1 -1
  102. package/dist/fondue-components150.js +40 -67
  103. package/dist/fondue-components150.js.map +1 -1
  104. package/dist/fondue-components151.js +20 -30
  105. package/dist/fondue-components151.js.map +1 -1
  106. package/dist/fondue-components152.js +40 -9
  107. package/dist/fondue-components152.js.map +1 -1
  108. package/dist/fondue-components153.js +67 -150
  109. package/dist/fondue-components153.js.map +1 -1
  110. package/dist/fondue-components154.js +1351 -107
  111. package/dist/fondue-components154.js.map +1 -1
  112. package/dist/fondue-components155.js +943 -18
  113. package/dist/fondue-components155.js.map +1 -1
  114. package/dist/fondue-components156.js +197 -15
  115. package/dist/fondue-components156.js.map +1 -1
  116. package/dist/fondue-components157.js +68 -29
  117. package/dist/fondue-components157.js.map +1 -1
  118. package/dist/fondue-components158.js +31 -13
  119. package/dist/fondue-components158.js.map +1 -1
  120. package/dist/fondue-components159.js +9 -7
  121. package/dist/fondue-components159.js.map +1 -1
  122. package/dist/fondue-components16.js +121 -36
  123. package/dist/fondue-components16.js.map +1 -1
  124. package/dist/fondue-components160.js +156 -0
  125. package/dist/fondue-components160.js.map +1 -0
  126. package/dist/fondue-components161.js +111 -0
  127. package/dist/fondue-components161.js.map +1 -0
  128. package/dist/fondue-components162.js +19 -0
  129. package/dist/fondue-components162.js.map +1 -0
  130. package/dist/fondue-components163.js +32 -0
  131. package/dist/fondue-components163.js.map +1 -0
  132. package/dist/fondue-components164.js +16 -0
  133. package/dist/fondue-components164.js.map +1 -0
  134. package/dist/fondue-components165.js +19 -0
  135. package/dist/fondue-components165.js.map +1 -0
  136. package/dist/fondue-components166.js +10 -0
  137. package/dist/fondue-components166.js.map +1 -0
  138. package/dist/fondue-components17.js +30 -39
  139. package/dist/fondue-components17.js.map +1 -1
  140. package/dist/fondue-components18.js +44 -41
  141. package/dist/fondue-components18.js.map +1 -1
  142. package/dist/fondue-components19.js +42 -57
  143. package/dist/fondue-components19.js.map +1 -1
  144. package/dist/fondue-components20.js +55 -41
  145. package/dist/fondue-components20.js.map +1 -1
  146. package/dist/fondue-components21.js +39 -16
  147. package/dist/fondue-components21.js.map +1 -1
  148. package/dist/fondue-components22.js +17 -43
  149. package/dist/fondue-components22.js.map +1 -1
  150. package/dist/fondue-components23.js +46 -68
  151. package/dist/fondue-components23.js.map +1 -1
  152. package/dist/fondue-components24.js +67 -71
  153. package/dist/fondue-components24.js.map +1 -1
  154. package/dist/fondue-components25.js +72 -16
  155. package/dist/fondue-components25.js.map +1 -1
  156. package/dist/fondue-components26.js +18 -77
  157. package/dist/fondue-components26.js.map +1 -1
  158. package/dist/fondue-components27.js +75 -34
  159. package/dist/fondue-components27.js.map +1 -1
  160. package/dist/fondue-components28.js +34 -53
  161. package/dist/fondue-components28.js.map +1 -1
  162. package/dist/fondue-components29.js +55 -23
  163. package/dist/fondue-components29.js.map +1 -1
  164. package/dist/fondue-components3.js +1 -1
  165. package/dist/fondue-components30.js +23 -55
  166. package/dist/fondue-components30.js.map +1 -1
  167. package/dist/fondue-components31.js +52 -97
  168. package/dist/fondue-components31.js.map +1 -1
  169. package/dist/fondue-components32.js +98 -31
  170. package/dist/fondue-components32.js.map +1 -1
  171. package/dist/fondue-components33.js +31 -194
  172. package/dist/fondue-components33.js.map +1 -1
  173. package/dist/fondue-components34.js +184 -134
  174. package/dist/fondue-components34.js.map +1 -1
  175. package/dist/fondue-components35.js +143 -130
  176. package/dist/fondue-components35.js.map +1 -1
  177. package/dist/fondue-components36.js +131 -30
  178. package/dist/fondue-components36.js.map +1 -1
  179. package/dist/fondue-components37.js +29 -79
  180. package/dist/fondue-components37.js.map +1 -1
  181. package/dist/fondue-components38.js +68 -110
  182. package/dist/fondue-components38.js.map +1 -1
  183. package/dist/fondue-components39.js +121 -34
  184. package/dist/fondue-components39.js.map +1 -1
  185. package/dist/fondue-components4.js +21 -19
  186. package/dist/fondue-components4.js.map +1 -1
  187. package/dist/fondue-components40.js +36 -56
  188. package/dist/fondue-components40.js.map +1 -1
  189. package/dist/fondue-components41.js +56 -20
  190. package/dist/fondue-components41.js.map +1 -1
  191. package/dist/fondue-components42.js +20 -25
  192. package/dist/fondue-components42.js.map +1 -1
  193. package/dist/fondue-components43.js +25 -7
  194. package/dist/fondue-components43.js.map +1 -1
  195. package/dist/fondue-components44.js +7 -8
  196. package/dist/fondue-components44.js.map +1 -1
  197. package/dist/fondue-components45.js +9 -41
  198. package/dist/fondue-components45.js.map +1 -1
  199. package/dist/fondue-components46.js +41 -5
  200. package/dist/fondue-components46.js.map +1 -1
  201. package/dist/fondue-components47.js +1 -1
  202. package/dist/fondue-components48.js +3 -11
  203. package/dist/fondue-components48.js.map +1 -1
  204. package/dist/fondue-components49.js +25 -29
  205. package/dist/fondue-components49.js.map +1 -1
  206. package/dist/fondue-components5.js +2 -2
  207. package/dist/fondue-components50.js +33 -54
  208. package/dist/fondue-components50.js.map +1 -1
  209. package/dist/fondue-components51.js +20 -130
  210. package/dist/fondue-components51.js.map +1 -1
  211. package/dist/fondue-components52.js +85 -20
  212. package/dist/fondue-components52.js.map +1 -1
  213. package/dist/fondue-components53.js +13 -53
  214. package/dist/fondue-components53.js.map +1 -1
  215. package/dist/fondue-components54.js +32 -8
  216. package/dist/fondue-components54.js.map +1 -1
  217. package/dist/fondue-components55.js +54 -13
  218. package/dist/fondue-components55.js.map +1 -1
  219. package/dist/fondue-components56.js +130 -16
  220. package/dist/fondue-components56.js.map +1 -1
  221. package/dist/fondue-components57.js +20 -4
  222. package/dist/fondue-components57.js.map +1 -1
  223. package/dist/fondue-components58.js +52 -17
  224. package/dist/fondue-components58.js.map +1 -1
  225. package/dist/fondue-components59.js +7 -18
  226. package/dist/fondue-components59.js.map +1 -1
  227. package/dist/fondue-components6.js +1 -1
  228. package/dist/fondue-components60.js +13 -44
  229. package/dist/fondue-components60.js.map +1 -1
  230. package/dist/fondue-components61.js +16 -24
  231. package/dist/fondue-components61.js.map +1 -1
  232. package/dist/fondue-components62.js +4 -22
  233. package/dist/fondue-components62.js.map +1 -1
  234. package/dist/fondue-components63.js +18 -7
  235. package/dist/fondue-components63.js.map +1 -1
  236. package/dist/fondue-components64.js +18 -4
  237. package/dist/fondue-components64.js.map +1 -1
  238. package/dist/fondue-components65.js +43 -12
  239. package/dist/fondue-components65.js.map +1 -1
  240. package/dist/fondue-components66.js +24 -4
  241. package/dist/fondue-components66.js.map +1 -1
  242. package/dist/fondue-components67.js +22 -17
  243. package/dist/fondue-components67.js.map +1 -1
  244. package/dist/fondue-components68.js +4 -8
  245. package/dist/fondue-components68.js.map +1 -1
  246. package/dist/fondue-components69.js +4 -36
  247. package/dist/fondue-components69.js.map +1 -1
  248. package/dist/fondue-components7.js +32 -65
  249. package/dist/fondue-components7.js.map +1 -1
  250. package/dist/fondue-components70.js +12 -6
  251. package/dist/fondue-components70.js.map +1 -1
  252. package/dist/fondue-components71.js +1 -1
  253. package/dist/fondue-components72.js +17 -12
  254. package/dist/fondue-components72.js.map +1 -1
  255. package/dist/fondue-components73.js +10 -51
  256. package/dist/fondue-components73.js.map +1 -1
  257. package/dist/fondue-components74.js +37 -44
  258. package/dist/fondue-components74.js.map +1 -1
  259. package/dist/fondue-components75.js +7 -6
  260. package/dist/fondue-components75.js.map +1 -1
  261. package/dist/fondue-components76.js +5 -6
  262. package/dist/fondue-components76.js.map +1 -1
  263. package/dist/fondue-components77.js +13 -13
  264. package/dist/fondue-components77.js.map +1 -1
  265. package/dist/fondue-components78.js +51 -27
  266. package/dist/fondue-components78.js.map +1 -1
  267. package/dist/fondue-components79.js +42 -11
  268. package/dist/fondue-components79.js.map +1 -1
  269. package/dist/fondue-components8.js +65 -51
  270. package/dist/fondue-components8.js.map +1 -1
  271. package/dist/fondue-components80.js +6 -5
  272. package/dist/fondue-components80.js.map +1 -1
  273. package/dist/fondue-components81.js +6 -13
  274. package/dist/fondue-components81.js.map +1 -1
  275. package/dist/fondue-components82.js +13 -48
  276. package/dist/fondue-components82.js.map +1 -1
  277. package/dist/fondue-components83.js +27 -22
  278. package/dist/fondue-components83.js.map +1 -1
  279. package/dist/fondue-components84.js +13 -629
  280. package/dist/fondue-components84.js.map +1 -1
  281. package/dist/fondue-components85.js +4 -8
  282. package/dist/fondue-components85.js.map +1 -1
  283. package/dist/fondue-components86.js +12 -12
  284. package/dist/fondue-components86.js.map +1 -1
  285. package/dist/fondue-components87.js +47 -4
  286. package/dist/fondue-components87.js.map +1 -1
  287. package/dist/fondue-components88.js +22 -24
  288. package/dist/fondue-components88.js.map +1 -1
  289. package/dist/fondue-components89.js +628 -16
  290. package/dist/fondue-components89.js.map +1 -1
  291. package/dist/fondue-components9.js +46 -173
  292. package/dist/fondue-components9.js.map +1 -1
  293. package/dist/fondue-components90.js +9 -20
  294. package/dist/fondue-components90.js.map +1 -1
  295. package/dist/fondue-components91.js +13 -20
  296. package/dist/fondue-components91.js.map +1 -1
  297. package/dist/fondue-components92.js +5 -20
  298. package/dist/fondue-components92.js.map +1 -1
  299. package/dist/fondue-components93.js +24 -19
  300. package/dist/fondue-components93.js.map +1 -1
  301. package/dist/fondue-components94.js +17 -19
  302. package/dist/fondue-components94.js.map +1 -1
  303. package/dist/fondue-components95.js +20 -8
  304. package/dist/fondue-components95.js.map +1 -1
  305. package/dist/fondue-components96.js +20 -11
  306. package/dist/fondue-components96.js.map +1 -1
  307. package/dist/fondue-components97.js +20 -11
  308. package/dist/fondue-components97.js.map +1 -1
  309. package/dist/fondue-components98.js +20 -7
  310. package/dist/fondue-components98.js.map +1 -1
  311. package/dist/fondue-components99.js +19 -13
  312. package/dist/fondue-components99.js.map +1 -1
  313. package/dist/index.d.ts +187 -15
  314. package/dist/style.css +1 -1
  315. package/package.json +9 -5
  316. package/dist/fondue-components148.js +0 -24
  317. package/dist/fondue-components148.js.map +0 -1
@@ -1,71 +1,10 @@
1
- import { useRef as W, useState as p, useEffect as w, useLayoutEffect as I } from "react";
2
- const T = (e, s) => e.filter((f) => {
3
- var c;
4
- const t = (c = f.ref) == null ? void 0 : c.current;
5
- return t ? t.offsetLeft + t.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || t.offsetLeft - s.scrollLeft < 0 : !1;
6
- }), a = (e, s) => {
7
- const f = s.current, t = e == null ? void 0 : e.querySelector('[data-state="active"]');
8
- if (!e || !(t instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
9
- return;
10
- const u = getComputedStyle(e).direction === "rtl", r = (e == null ? void 0 : e.scrollLeft) > (t == null ? void 0 : t.offsetLeft), l = (t == null ? void 0 : t.offsetLeft) + (t == null ? void 0 : t.offsetWidth) > (e == null ? void 0 : e.offsetWidth), o = (n) => u ? e.offsetWidth - n - t.offsetWidth : n;
11
- if (r) {
12
- if (e.offsetWidth > t.offsetWidth + t.offsetLeft)
13
- f.style.insetInlineStart = `${o(t.offsetLeft)}px`;
14
- else {
15
- const i = e.offsetWidth - t.offsetWidth;
16
- f.style.insetInlineStart = `${o(i)}px`;
17
- }
18
- f.style.width = `${t == null ? void 0 : t.offsetWidth}px`;
19
- } else if (l) {
20
- const n = e.clientWidth - t.offsetWidth;
21
- f.style.insetInlineStart = `${o(n)}px`, f.style.width = `${t.offsetWidth}px`;
22
- } else
23
- f.style.insetInlineStart = `${o(t.offsetLeft)}px`, f.style.width = `${t.offsetWidth}px`;
24
- }, b = ({
25
- activeTab: e
26
- }) => {
27
- const s = W(null), f = W(null), [t, c] = p([]), [u, r] = p([]);
28
- return w(() => {
29
- const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
30
- n instanceof HTMLButtonElement && o instanceof HTMLDivElement && (a(o, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
31
- }, [e, f]), I(() => {
32
- var i;
33
- const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
34
- if (o instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
35
- a(o, f);
36
- const d = new MutationObserver(() => {
37
- n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(o, f);
38
- });
39
- o.parentNode && d.observe(o.parentNode, { childList: !0 });
40
- const h = new IntersectionObserver(
41
- () => {
42
- r(T(t, o)), a(o, f);
43
- },
44
- {
45
- root: o,
46
- threshold: 1
47
- }
48
- );
49
- for (const v of t)
50
- (i = v.ref) != null && i.current && h.observe(v.ref.current);
51
- return () => {
52
- h.disconnect(), d.disconnect();
53
- };
54
- }
55
- }, [t, s, f]), {
56
- triggerListRef: s,
57
- activeIndicatorRef: f,
58
- triggersOutOfView: u,
59
- triggers: t,
60
- addTrigger: (o) => {
61
- o.previousElement || c((n) => [...n, o]), c((n) => {
62
- const i = n.findIndex((d) => d.element === o.previousElement);
63
- return n[i] = o, [...n];
64
- });
65
- }
66
- };
1
+ const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
2
+ root: t,
3
+ thumb: o
67
4
  };
68
5
  export {
69
- b as useTabTriggers
6
+ s as default,
7
+ t as root,
8
+ o as thumb
70
9
  };
71
10
  //# sourceMappingURL=fondue-components103.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components103.js","sources":["../src/components/Tabs/hooks/useTabTriggers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { type TabTrigger } from '../types';\n\nconst getOverflowingTriggers = (triggers: TabTrigger[], triggerListElement: HTMLDivElement) => {\n return triggers.filter((trigger) => {\n const triggerElement = trigger.ref?.current;\n if (!triggerElement) {\n return false;\n }\n return (\n triggerElement.offsetLeft + triggerElement.offsetWidth >\n triggerListElement?.scrollLeft + triggerListElement.offsetWidth ||\n triggerElement.offsetLeft - triggerListElement.scrollLeft < 0\n );\n });\n};\n\nconst moveActiveIndicator = (triggerListElement: HTMLDivElement, activeIndicatorRef: RefObject<HTMLSpanElement>) => {\n const activeIndicatorElement = activeIndicatorRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (\n !triggerListElement ||\n !(activeTriggerElement instanceof HTMLButtonElement) ||\n !(activeIndicatorElement instanceof HTMLSpanElement)\n ) {\n return;\n }\n\n // Get the computed direction to handle RTL correctly\n const direction = getComputedStyle(triggerListElement).direction;\n const isRTL = direction === 'rtl';\n\n const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n const isOverflowingRight =\n activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n // Helper function to calculate position based on direction\n const getInlineStartPosition = (position: number) => {\n if (isRTL) {\n // In RTL, insetInlineStart maps to 'right', so we need to calculate from the right edge\n return triggerListElement.offsetWidth - position - activeTriggerElement.offsetWidth;\n }\n return position;\n };\n\n if (isOverflowingLeft) {\n const willFitAllItemsToTheLeft =\n triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n if (willFitAllItemsToTheLeft) {\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n } else {\n const position = triggerListElement.offsetWidth - activeTriggerElement.offsetWidth;\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n }\n activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n } else if (isOverflowingRight) {\n const position = triggerListElement.clientWidth - activeTriggerElement.offsetWidth;\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n } else {\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n }\n};\n\nexport const useTabTriggers = ({\n activeTab,\n}: {\n activeTab?: string;\n}): {\n triggerListRef: RefObject<HTMLDivElement>;\n activeIndicatorRef: RefObject<HTMLSpanElement>;\n triggers: TabTrigger[];\n triggersOutOfView: TabTrigger[];\n addTrigger: (trigger: TabTrigger) => void;\n} => {\n const triggerListRef = useRef<HTMLDivElement | null>(null);\n const activeIndicatorRef = useRef<HTMLSpanElement | null>(null);\n const [triggers, setTriggers] = useState<TabTrigger[]>([]);\n const [triggersOutOfView, setTriggersOutOfView] = useState<TabTrigger[]>([]);\n\n // move the active indicator and scroll to the correct position when the tab changes\n useEffect(() => {\n const triggerListElement = triggerListRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (activeTriggerElement instanceof HTMLButtonElement && triggerListElement instanceof HTMLDivElement) {\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n activeTriggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });\n }\n }, [activeTab, activeIndicatorRef]);\n\n useLayoutEffect(() => {\n const triggerListElement = triggerListRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (triggerListElement instanceof HTMLDivElement && activeTriggerElement instanceof HTMLButtonElement) {\n // move the active indicator to the initial active tab\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n\n // observe addition of the dropdown trigger which reduces the available width\n const mutationObserver = new MutationObserver(() => {\n activeTriggerElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'end' });\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n });\n if (triggerListElement.parentNode) {\n mutationObserver.observe(triggerListElement.parentNode, { childList: true });\n }\n\n // calculate the overflowing elements when item starts overflowing the parent\n const intersectionObserver = new IntersectionObserver(\n () => {\n setTriggersOutOfView(getOverflowingTriggers(triggers, triggerListElement));\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n },\n {\n root: triggerListElement,\n threshold: 1,\n },\n );\n for (const trigger of triggers) {\n if (trigger.ref?.current) {\n intersectionObserver.observe(trigger.ref.current);\n }\n }\n\n return () => {\n intersectionObserver.disconnect();\n mutationObserver.disconnect();\n };\n }\n }, [triggers, triggerListRef, activeIndicatorRef]);\n\n const addTrigger = (trigger: TabTrigger) => {\n if (!trigger.previousElement) {\n setTriggers((prev) => [...prev, trigger]);\n }\n\n setTriggers((prev) => {\n const index = prev.findIndex((element) => element.element === trigger.previousElement);\n prev[index] = trigger;\n return [...prev];\n });\n };\n\n return {\n triggerListRef,\n activeIndicatorRef,\n triggersOutOfView,\n triggers,\n addTrigger,\n };\n};\n"],"names":["getOverflowingTriggers","triggers","triggerListElement","trigger","triggerElement","_a","moveActiveIndicator","activeIndicatorRef","activeIndicatorElement","activeTriggerElement","isRTL","isOverflowingLeft","isOverflowingRight","getInlineStartPosition","position","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}
1
+ {"version":3,"file":"fondue-components103.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,18 +1,16 @@
1
- const t = "_root_ujssn_5", r = "_triggerListWrapper_ujssn_17", s = "_trigger_ujssn_17", n = "_activeIndicator_ujssn_65", e = "_triggerList_ujssn_17", i = "_content_ujssn_159", o = {
2
- root: t,
3
- triggerListWrapper: r,
4
- trigger: s,
5
- activeIndicator: n,
6
- triggerList: e,
7
- content: i
1
+ import { useEffect as c } from "react";
2
+ const s = (t) => {
3
+ c(() => {
4
+ if (!t.current)
5
+ return;
6
+ const e = t.current, n = new ResizeObserver(() => {
7
+ const r = e.scrollWidth > e.clientWidth;
8
+ e.title = r && e.textContent || "";
9
+ });
10
+ return n.observe(e), () => n.disconnect();
11
+ }, [t]);
8
12
  };
9
13
  export {
10
- n as activeIndicator,
11
- i as content,
12
- o as default,
13
- t as root,
14
- s as trigger,
15
- e as triggerList,
16
- r as triggerListWrapper
14
+ s as useTextTruncation
17
15
  };
18
16
  //# sourceMappingURL=fondue-components104.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components104.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"fondue-components104.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const textRef = useRef<HTMLDivElement>(null);\n * useTextTruncation(textRef);\n *\n * return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const element = ref.current;\n const observer = new ResizeObserver(() => {\n const isTruncated = element.scrollWidth > element.clientWidth;\n element.title = isTruncated ? element.textContent || '' : '';\n });\n\n observer.observe(element);\n return () => observer.disconnect();\n }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBO,MAAMA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACZ,QAAI,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AACtC,YAAMC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IACzD,CAAC;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACH,CAAG,CAAC;AACZ;"}
@@ -1,29 +1,26 @@
1
- const o = "_root_wvtd0_2", _ = {
2
- root: o,
3
- "weight-default": "_weight-default_wvtd0_7",
4
- "weight-strong": "_weight-strong_wvtd0_11",
5
- "weight-x-strong": "_weight-x-strong_wvtd0_15",
6
- "size-x-small": "_size-x-small_wvtd0_19",
7
- "size-small": "_size-small_wvtd0_24",
8
- "size-medium": "_size-medium_wvtd0_29",
9
- "size-large": "_size-large_wvtd0_34",
10
- "color-default": "_color-default_wvtd0_39",
11
- "color-weak": "_color-weak_wvtd0_43",
12
- "color-x-weak": "_color-x-weak_wvtd0_47",
13
- "color-disabled": "_color-disabled_wvtd0_51",
14
- "color-negative": "_color-negative_wvtd0_55",
15
- "color-positive": "_color-positive_wvtd0_59",
16
- "color-warning": "_color-warning_wvtd0_63",
17
- "color-interactive": "_color-interactive_wvtd0_67",
18
- "color-box-neutral": "_color-box-neutral_wvtd0_71",
19
- "color-box-selected": "_color-box-selected_wvtd0_75",
20
- "color-box-disabled": "_color-box-disabled_wvtd0_79",
21
- "color-box-positive": "_color-box-positive_wvtd0_83",
22
- "color-box-negative": "_color-box-negative_wvtd0_87",
23
- "color-box-warning": "_color-box-warning_wvtd0_91"
1
+ const t = "_table_1v3sd_4", o = "_headerCell_1v3sd_18", e = "_rowCell_1v3sd_19", _ = "_row_1v3sd_19", s = "_caption_1v3sd_76", n = "_header_1v3sd_18", d = "_cellContent_1v3sd_124", l = "_sortIndicator_1v3sd_152", c = "_body_1v3sd_162", r = "_buttonText_1v3sd_235", a = {
2
+ table: t,
3
+ headerCell: o,
4
+ rowCell: e,
5
+ row: _,
6
+ caption: s,
7
+ header: n,
8
+ cellContent: d,
9
+ sortIndicator: l,
10
+ body: c,
11
+ buttonText: r
24
12
  };
25
13
  export {
26
- _ as default,
27
- o as root
14
+ c as body,
15
+ r as buttonText,
16
+ s as caption,
17
+ d as cellContent,
18
+ a as default,
19
+ n as header,
20
+ o as headerCell,
21
+ _ as row,
22
+ e as rowCell,
23
+ l as sortIndicator,
24
+ t as table
28
25
  };
29
26
  //# sourceMappingURL=fondue-components105.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components105.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components105.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -1,22 +1,37 @@
1
- const o = "_root_10bzk_5", t = "_slot_10bzk_67", c = "_input_10bzk_67", n = "_placeholder_10bzk_72", s = "_iconSuccess_10bzk_154", _ = "_iconError_10bzk_162", r = "_loadingStatus_10bzk_175", p = "_inputWrapper_10bzk_195", e = {
2
- root: o,
3
- slot: t,
4
- input: c,
5
- placeholder: n,
6
- iconSuccess: s,
7
- iconError: _,
8
- loadingStatus: r,
9
- inputWrapper: p
10
- };
1
+ function s(e, n) {
2
+ const r = 'tr[tabindex="0"]', t = e.closest("table");
3
+ if (!t)
4
+ return null;
5
+ const o = Array.from(t.querySelectorAll(r)), l = o.indexOf(e) + (n === "ArrowUp" ? -1 : 1);
6
+ return l >= 0 && l < o.length ? o[l] : null;
7
+ }
8
+ function a(e) {
9
+ const n = e.target, r = n.closest("tr");
10
+ if (!r || n !== r || !["ArrowUp", "ArrowDown"].includes(e.key))
11
+ return;
12
+ const t = s(r, e.key);
13
+ t && (e.preventDefault(), t.focus());
14
+ }
15
+ const u = [HTMLButtonElement, HTMLAnchorElement], i = ["button", "link"];
16
+ function f(e) {
17
+ if (!e)
18
+ return !1;
19
+ const { target: n, currentTarget: r } = e;
20
+ let t = n instanceof Element ? n : null;
21
+ if (!r.contains(t))
22
+ return !0;
23
+ for (; t && !(t instanceof HTMLTableRowElement); ) {
24
+ if (u.some((c) => t instanceof c))
25
+ return !0;
26
+ const o = t.getAttribute("role");
27
+ if (o && i.includes(o))
28
+ return !0;
29
+ t = t.parentElement;
30
+ }
31
+ return !1;
32
+ }
11
33
  export {
12
- e as default,
13
- _ as iconError,
14
- s as iconSuccess,
15
- c as input,
16
- p as inputWrapper,
17
- r as loadingStatus,
18
- n as placeholder,
19
- o as root,
20
- t as slot
34
+ a as handleKeyDown,
35
+ f as shouldIgnoreRowClick
21
36
  };
22
37
  //# sourceMappingURL=fondue-components106.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components106.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components106.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent, type MouseEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n const selector = 'tr[tabindex=\"0\"]';\n const table = currentRow.closest('table');\n if (!table) {\n return null;\n }\n\n const rows = Array.from(table.querySelectorAll(selector));\n const currentIndex = rows.indexOf(currentRow);\n const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n const target = event.target as HTMLElement;\n const currentRow = target.closest('tr');\n\n if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n return;\n }\n\n const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n if (nextRow) {\n event.preventDefault();\n nextRow.focus();\n }\n}\n\nconst INTERACTIVE_ELEMENTS_LIST = [HTMLButtonElement, HTMLAnchorElement];\nconst INTERACTIVE_ROLES_LIST = ['button', 'link'];\n\nexport function shouldIgnoreRowClick(event?: MouseEvent): boolean {\n if (!event) {\n return false;\n }\n\n const { target, currentTarget } = event;\n\n let element = target instanceof Element ? target : null;\n\n if (!currentTarget.contains(element)) {\n return true;\n }\n\n while (element && !(element instanceof HTMLTableRowElement)) {\n if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => element instanceof interactiveElement)) {\n return true;\n }\n\n const role = element.getAttribute('role');\n if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n return true;\n }\n\n element = element.parentElement;\n }\n\n return false;\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow","INTERACTIVE_ELEMENTS_LIST","INTERACTIVE_ROLES_LIST","shouldIgnoreRowClick","currentTarget","element","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACD,WAAO;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAA,GACNE,EAAQ,MAAA;AAEhB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAAqBL,GAA6B;AAC9D,MAAI,CAACA;AACD,WAAO;AAGX,QAAM,EAAE,QAAAC,GAAQ,eAAAK,EAAA,IAAkBN;AAElC,MAAIO,IAAUN,aAAkB,UAAUA,IAAS;AAEnD,MAAI,CAACK,EAAc,SAASC,CAAO;AAC/B,WAAO;AAGX,SAAOA,KAAW,EAAEA,aAAmB,wBAAsB;AACzD,QAAIJ,EAA0B,KAAK,CAACK,MAAuBD,aAAmBC,CAAkB;AAC5F,aAAO;AAGX,UAAMC,IAAOF,EAAQ,aAAa,MAAM;AACxC,QAAIE,KAAQL,EAAuB,SAASK,CAAI;AAC5C,aAAO;AAGX,IAAAF,IAAUA,EAAQ;AAAA,EACtB;AAEA,SAAO;AACX;"}
@@ -1,28 +1,14 @@
1
- const t = "_root_3dhca_5", o = "_textareaWrapper_3dhca_62", s = "_textarea_3dhca_62", a = "_slot_3dhca_120", _ = "_decorator_3dhca_145", c = "_tools_3dhca_158", r = "_toolsButton_3dhca_190", e = "_success_3dhca_222", n = "_error_3dhca_226", d = "_loadingStatus_3dhca_230", l = "_spin_3dhca_1", h = {
2
- root: t,
3
- textareaWrapper: o,
4
- textarea: s,
5
- slot: a,
6
- decorator: _,
7
- tools: c,
8
- toolsButton: r,
9
- success: e,
10
- error: n,
11
- loadingStatus: d,
12
- spin: l
1
+ const n = "_root_bn9za_3", t = "_mainContent_bn9za_15", o = "_actionButton_bn9za_28", a = "_secondaryContent_bn9za_123", e = {
2
+ root: n,
3
+ mainContent: t,
4
+ actionButton: o,
5
+ secondaryContent: a
13
6
  };
14
7
  export {
15
- _ as decorator,
16
- h as default,
17
- n as error,
18
- d as loadingStatus,
19
- t as root,
20
- a as slot,
21
- l as spin,
22
- e as success,
23
- s as textarea,
24
- o as textareaWrapper,
25
- c as tools,
26
- r as toolsButton
8
+ o as actionButton,
9
+ e as default,
10
+ t as mainContent,
11
+ n as root,
12
+ a as secondaryContent
27
13
  };
28
14
  //# sourceMappingURL=fondue-components107.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components107.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components107.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,12 +1,71 @@
1
- const s = "_base_vux45_1", t = "_dark_vux45_249", _ = "_light_vux45_331", a = {
2
- base: s,
3
- dark: t,
4
- light: _
1
+ import { useRef as W, useState as p, useEffect as w, useLayoutEffect as I } from "react";
2
+ const T = (e, s) => e.filter((f) => {
3
+ var c;
4
+ const t = (c = f.ref) == null ? void 0 : c.current;
5
+ return t ? t.offsetLeft + t.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || t.offsetLeft - s.scrollLeft < 0 : !1;
6
+ }), a = (e, s) => {
7
+ const f = s.current, t = e == null ? void 0 : e.querySelector('[data-state="active"]');
8
+ if (!e || !(t instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
9
+ return;
10
+ const u = getComputedStyle(e).direction === "rtl", r = (e == null ? void 0 : e.scrollLeft) > (t == null ? void 0 : t.offsetLeft), l = (t == null ? void 0 : t.offsetLeft) + (t == null ? void 0 : t.offsetWidth) > (e == null ? void 0 : e.offsetWidth), o = (n) => u ? e.offsetWidth - n - t.offsetWidth : n;
11
+ if (r) {
12
+ if (e.offsetWidth > t.offsetWidth + t.offsetLeft)
13
+ f.style.insetInlineStart = `${o(t.offsetLeft)}px`;
14
+ else {
15
+ const i = e.offsetWidth - t.offsetWidth;
16
+ f.style.insetInlineStart = `${o(i)}px`;
17
+ }
18
+ f.style.width = `${t == null ? void 0 : t.offsetWidth}px`;
19
+ } else if (l) {
20
+ const n = e.clientWidth - t.offsetWidth;
21
+ f.style.insetInlineStart = `${o(n)}px`, f.style.width = `${t.offsetWidth}px`;
22
+ } else
23
+ f.style.insetInlineStart = `${o(t.offsetLeft)}px`, f.style.width = `${t.offsetWidth}px`;
24
+ }, b = ({
25
+ activeTab: e
26
+ }) => {
27
+ const s = W(null), f = W(null), [t, c] = p([]), [u, r] = p([]);
28
+ return w(() => {
29
+ const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
30
+ n instanceof HTMLButtonElement && o instanceof HTMLDivElement && (a(o, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
31
+ }, [e, f]), I(() => {
32
+ var i;
33
+ const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
34
+ if (o instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
35
+ a(o, f);
36
+ const d = new MutationObserver(() => {
37
+ n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(o, f);
38
+ });
39
+ o.parentNode && d.observe(o.parentNode, { childList: !0 });
40
+ const h = new IntersectionObserver(
41
+ () => {
42
+ r(T(t, o)), a(o, f);
43
+ },
44
+ {
45
+ root: o,
46
+ threshold: 1
47
+ }
48
+ );
49
+ for (const v of t)
50
+ (i = v.ref) != null && i.current && h.observe(v.ref.current);
51
+ return () => {
52
+ h.disconnect(), d.disconnect();
53
+ };
54
+ }
55
+ }, [t, s, f]), {
56
+ triggerListRef: s,
57
+ activeIndicatorRef: f,
58
+ triggersOutOfView: u,
59
+ triggers: t,
60
+ addTrigger: (o) => {
61
+ o.previousElement || c((n) => [...n, o]), c((n) => {
62
+ const i = n.findIndex((d) => d.element === o.previousElement);
63
+ return n[i] = o, [...n];
64
+ });
65
+ }
66
+ };
5
67
  };
6
68
  export {
7
- s as base,
8
- t as dark,
9
- a as default,
10
- _ as light
69
+ b as useTabTriggers
11
70
  };
12
71
  //# sourceMappingURL=fondue-components108.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components108.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
1
+ {"version":3,"file":"fondue-components108.js","sources":["../src/components/Tabs/hooks/useTabTriggers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { type TabTrigger } from '../types';\n\nconst getOverflowingTriggers = (triggers: TabTrigger[], triggerListElement: HTMLDivElement) => {\n return triggers.filter((trigger) => {\n const triggerElement = trigger.ref?.current;\n if (!triggerElement) {\n return false;\n }\n return (\n triggerElement.offsetLeft + triggerElement.offsetWidth >\n triggerListElement?.scrollLeft + triggerListElement.offsetWidth ||\n triggerElement.offsetLeft - triggerListElement.scrollLeft < 0\n );\n });\n};\n\nconst moveActiveIndicator = (triggerListElement: HTMLDivElement, activeIndicatorRef: RefObject<HTMLSpanElement>) => {\n const activeIndicatorElement = activeIndicatorRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (\n !triggerListElement ||\n !(activeTriggerElement instanceof HTMLButtonElement) ||\n !(activeIndicatorElement instanceof HTMLSpanElement)\n ) {\n return;\n }\n\n // Get the computed direction to handle RTL correctly\n const direction = getComputedStyle(triggerListElement).direction;\n const isRTL = direction === 'rtl';\n\n const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n const isOverflowingRight =\n activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n // Helper function to calculate position based on direction\n const getInlineStartPosition = (position: number) => {\n if (isRTL) {\n // In RTL, insetInlineStart maps to 'right', so we need to calculate from the right edge\n return triggerListElement.offsetWidth - position - activeTriggerElement.offsetWidth;\n }\n return position;\n };\n\n if (isOverflowingLeft) {\n const willFitAllItemsToTheLeft =\n triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n if (willFitAllItemsToTheLeft) {\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n } else {\n const position = triggerListElement.offsetWidth - activeTriggerElement.offsetWidth;\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n }\n activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n } else if (isOverflowingRight) {\n const position = triggerListElement.clientWidth - activeTriggerElement.offsetWidth;\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n } else {\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n }\n};\n\nexport const useTabTriggers = ({\n activeTab,\n}: {\n activeTab?: string;\n}): {\n triggerListRef: RefObject<HTMLDivElement>;\n activeIndicatorRef: RefObject<HTMLSpanElement>;\n triggers: TabTrigger[];\n triggersOutOfView: TabTrigger[];\n addTrigger: (trigger: TabTrigger) => void;\n} => {\n const triggerListRef = useRef<HTMLDivElement | null>(null);\n const activeIndicatorRef = useRef<HTMLSpanElement | null>(null);\n const [triggers, setTriggers] = useState<TabTrigger[]>([]);\n const [triggersOutOfView, setTriggersOutOfView] = useState<TabTrigger[]>([]);\n\n // move the active indicator and scroll to the correct position when the tab changes\n useEffect(() => {\n const triggerListElement = triggerListRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (activeTriggerElement instanceof HTMLButtonElement && triggerListElement instanceof HTMLDivElement) {\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n activeTriggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });\n }\n }, [activeTab, activeIndicatorRef]);\n\n useLayoutEffect(() => {\n const triggerListElement = triggerListRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (triggerListElement instanceof HTMLDivElement && activeTriggerElement instanceof HTMLButtonElement) {\n // move the active indicator to the initial active tab\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n\n // observe addition of the dropdown trigger which reduces the available width\n const mutationObserver = new MutationObserver(() => {\n activeTriggerElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'end' });\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n });\n if (triggerListElement.parentNode) {\n mutationObserver.observe(triggerListElement.parentNode, { childList: true });\n }\n\n // calculate the overflowing elements when item starts overflowing the parent\n const intersectionObserver = new IntersectionObserver(\n () => {\n setTriggersOutOfView(getOverflowingTriggers(triggers, triggerListElement));\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n },\n {\n root: triggerListElement,\n threshold: 1,\n },\n );\n for (const trigger of triggers) {\n if (trigger.ref?.current) {\n intersectionObserver.observe(trigger.ref.current);\n }\n }\n\n return () => {\n intersectionObserver.disconnect();\n mutationObserver.disconnect();\n };\n }\n }, [triggers, triggerListRef, activeIndicatorRef]);\n\n const addTrigger = (trigger: TabTrigger) => {\n if (!trigger.previousElement) {\n setTriggers((prev) => [...prev, trigger]);\n }\n\n setTriggers((prev) => {\n const index = prev.findIndex((element) => element.element === trigger.previousElement);\n prev[index] = trigger;\n return [...prev];\n });\n };\n\n return {\n triggerListRef,\n activeIndicatorRef,\n triggersOutOfView,\n triggers,\n addTrigger,\n };\n};\n"],"names":["getOverflowingTriggers","triggers","triggerListElement","trigger","triggerElement","_a","moveActiveIndicator","activeIndicatorRef","activeIndicatorElement","activeTriggerElement","isRTL","isOverflowingLeft","isOverflowingRight","getInlineStartPosition","position","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}
@@ -1,34 +1,18 @@
1
- import { enUS as e } from "./fondue-components143.js";
2
- const l = {
3
- ColorPicker_selectColor: "Select Color",
4
- ColorPicker_selectFormat: "Select a color format",
5
- ColorPicker_hexValue: "Hex color value",
6
- ColorPicker_redChannel: "Red Color Channel",
7
- ColorPicker_greenChannel: "Green Color Channel",
8
- ColorPicker_blueChannel: "Blue Color Channel",
9
- ColorPicker_opacity: "Color Opacity",
10
- DatePicker_selectDate: "Select Date",
11
- Dialog_close: "Close",
12
- Flyout_close: "Close",
13
- Select_clear: "clear input",
14
- Select_toggleMenu: "toggle menu",
15
- Select_error: "Error",
16
- Select_selectedCount: "${count} selected: ${items}",
17
- Select_singleItemSelected: "1 item selected",
18
- Select_multipleItemsSelected: "${count} items selected",
19
- Select_additionalItemsSelected: "${count} additional items selected",
20
- Switch_defaultLabel: "Switch",
21
- Table_sortByDescending: "Sort by ${column} descending",
22
- Table_sortByAscending: "Sort by ${column} ascending",
23
- Table_sortDescending: "Sort descending",
24
- Table_sortAscending: "Sort ascending",
25
- Badge_dismiss: "Dismiss ${label}",
26
- Notice_dismiss: "Dismiss notice"
27
- }, t = {
28
- translationStrings: l,
29
- dateLocale: e
1
+ const t = "_root_ujssn_5", r = "_triggerListWrapper_ujssn_17", s = "_trigger_ujssn_17", n = "_activeIndicator_ujssn_65", e = "_triggerList_ujssn_17", i = "_content_ujssn_159", o = {
2
+ root: t,
3
+ triggerListWrapper: r,
4
+ trigger: s,
5
+ activeIndicator: n,
6
+ triggerList: e,
7
+ content: i
30
8
  };
31
9
  export {
32
- t as enUS
10
+ n as activeIndicator,
11
+ i as content,
12
+ o as default,
13
+ t as root,
14
+ s as trigger,
15
+ e as triggerList,
16
+ r as triggerListWrapper
33
17
  };
34
18
  //# sourceMappingURL=fondue-components109.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components109.js","sources":["../src/locales/en-US.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { enUS as dateLocale } from 'date-fns/locale';\n\nconst translations = {\n ColorPicker_selectColor: 'Select Color',\n ColorPicker_selectFormat: 'Select a color format',\n ColorPicker_hexValue: 'Hex color value',\n ColorPicker_redChannel: 'Red Color Channel',\n ColorPicker_greenChannel: 'Green Color Channel',\n ColorPicker_blueChannel: 'Blue Color Channel',\n ColorPicker_opacity: 'Color Opacity',\n DatePicker_selectDate: 'Select Date',\n Dialog_close: 'Close',\n Flyout_close: 'Close',\n Select_clear: 'clear input',\n Select_toggleMenu: 'toggle menu',\n Select_error: 'Error',\n Select_selectedCount: '${count} selected: ${items}',\n Select_singleItemSelected: '1 item selected',\n Select_multipleItemsSelected: '${count} items selected',\n Select_additionalItemsSelected: '${count} additional items selected',\n Switch_defaultLabel: 'Switch',\n Table_sortByDescending: 'Sort by ${column} descending',\n Table_sortByAscending: 'Sort by ${column} ascending',\n Table_sortDescending: 'Sort descending',\n Table_sortAscending: 'Sort ascending',\n Badge_dismiss: 'Dismiss ${label}',\n Notice_dismiss: 'Dismiss notice',\n};\n\nexport const enUS = {\n translationStrings: translations,\n dateLocale,\n};\n"],"names":["translations","enUS","dateLocale"],"mappings":";AAIA,MAAMA,IAAe;AAAA,EACjB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,8BAA8B;AAAA,EAC9B,gCAAgC;AAAA,EAChC,qBAAqB;AAAA,EACrB,wBAAwB;AAAA,EACxB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,gBAAgB;AACpB,GAEaC,IAAO;AAAA,EAChB,oBAAoBD;AAAA,EAAA,YACpBE;AACJ;"}
1
+ {"version":3,"file":"fondue-components109.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}