@frontify/fondue-components 19.5.0 → 19.6.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 (157) hide show
  1. package/dist/fondue-components.js +20 -18
  2. package/dist/fondue-components.js.map +1 -1
  3. package/dist/fondue-components10.js +3 -3
  4. package/dist/fondue-components11.js +3 -3
  5. package/dist/fondue-components12.js +2 -2
  6. package/dist/fondue-components13.js +3 -3
  7. package/dist/fondue-components14.js +2 -2
  8. package/dist/fondue-components15.js +2 -2
  9. package/dist/fondue-components16.js +19 -29
  10. package/dist/fondue-components16.js.map +1 -1
  11. package/dist/fondue-components17.js +1 -1
  12. package/dist/fondue-components18.js +1 -1
  13. package/dist/fondue-components19.js +1 -1
  14. package/dist/fondue-components20.js +2 -2
  15. package/dist/fondue-components21.js +2 -2
  16. package/dist/fondue-components22.js +6 -6
  17. package/dist/fondue-components23.js +1 -1
  18. package/dist/fondue-components24.js +2 -2
  19. package/dist/fondue-components25.js +4 -4
  20. package/dist/fondue-components26.js +135 -127
  21. package/dist/fondue-components26.js.map +1 -1
  22. package/dist/fondue-components27.js +127 -31
  23. package/dist/fondue-components27.js.map +1 -1
  24. package/dist/fondue-components28.js +33 -59
  25. package/dist/fondue-components28.js.map +1 -1
  26. package/dist/fondue-components29.js +58 -101
  27. package/dist/fondue-components29.js.map +1 -1
  28. package/dist/fondue-components3.js +1 -1
  29. package/dist/fondue-components30.js +101 -12
  30. package/dist/fondue-components30.js.map +1 -1
  31. package/dist/fondue-components31.js +12 -55
  32. package/dist/fondue-components31.js.map +1 -1
  33. package/dist/fondue-components32.js +55 -20
  34. package/dist/fondue-components32.js.map +1 -1
  35. package/dist/fondue-components33.js +20 -7
  36. package/dist/fondue-components33.js.map +1 -1
  37. package/dist/fondue-components34.js +7 -6
  38. package/dist/fondue-components34.js.map +1 -1
  39. package/dist/fondue-components35.js +7 -32
  40. package/dist/fondue-components35.js.map +1 -1
  41. package/dist/fondue-components36.js +32 -5
  42. package/dist/fondue-components36.js.map +1 -1
  43. package/dist/fondue-components37.js +5 -12
  44. package/dist/fondue-components37.js.map +1 -1
  45. package/dist/fondue-components38.js +10 -153
  46. package/dist/fondue-components38.js.map +1 -1
  47. package/dist/fondue-components39.js +59 -22
  48. package/dist/fondue-components39.js.map +1 -1
  49. package/dist/fondue-components4.js +29 -38
  50. package/dist/fondue-components4.js.map +1 -1
  51. package/dist/fondue-components40.js +17 -17
  52. package/dist/fondue-components40.js.map +1 -1
  53. package/dist/fondue-components41.js +112 -15
  54. package/dist/fondue-components41.js.map +1 -1
  55. package/dist/fondue-components42.js +19 -30
  56. package/dist/fondue-components42.js.map +1 -1
  57. package/dist/fondue-components43.js +32 -62
  58. package/dist/fondue-components43.js.map +1 -1
  59. package/dist/fondue-components44.js +53 -121
  60. package/dist/fondue-components44.js.map +1 -1
  61. package/dist/fondue-components45.js +129 -20
  62. package/dist/fondue-components45.js.map +1 -1
  63. package/dist/fondue-components46.js +21 -45
  64. package/dist/fondue-components46.js.map +1 -1
  65. package/dist/fondue-components47.js +53 -8
  66. package/dist/fondue-components47.js.map +1 -1
  67. package/dist/fondue-components48.js +8 -13
  68. package/dist/fondue-components48.js.map +1 -1
  69. package/dist/fondue-components49.js +13 -15
  70. package/dist/fondue-components49.js.map +1 -1
  71. package/dist/fondue-components5.js +2 -2
  72. package/dist/fondue-components50.js +14 -4
  73. package/dist/fondue-components50.js.map +1 -1
  74. package/dist/fondue-components51.js +5 -60
  75. package/dist/fondue-components51.js.map +1 -1
  76. package/dist/fondue-components52.js +59 -17
  77. package/dist/fondue-components52.js.map +1 -1
  78. package/dist/fondue-components53.js +18 -19
  79. package/dist/fondue-components53.js.map +1 -1
  80. package/dist/fondue-components54.js +18 -4
  81. package/dist/fondue-components54.js.map +1 -1
  82. package/dist/fondue-components55.js +3 -13
  83. package/dist/fondue-components55.js.map +1 -1
  84. package/dist/fondue-components56.js +13 -3
  85. package/dist/fondue-components56.js.map +1 -1
  86. package/dist/fondue-components57.js +3 -17
  87. package/dist/fondue-components57.js.map +1 -1
  88. package/dist/fondue-components58.js +19 -35
  89. package/dist/fondue-components58.js.map +1 -1
  90. package/dist/fondue-components59.js +8 -4
  91. package/dist/fondue-components59.js.map +1 -1
  92. package/dist/fondue-components6.js +4 -4
  93. package/dist/fondue-components60.js +35 -13
  94. package/dist/fondue-components60.js.map +1 -1
  95. package/dist/fondue-components61.js +1 -1
  96. package/dist/fondue-components62.js +12 -24
  97. package/dist/fondue-components62.js.map +1 -1
  98. package/dist/fondue-components63.js +4 -16
  99. package/dist/fondue-components63.js.map +1 -1
  100. package/dist/fondue-components64.js +23 -149
  101. package/dist/fondue-components64.js.map +1 -1
  102. package/dist/fondue-components65.js +17 -19
  103. package/dist/fondue-components65.js.map +1 -1
  104. package/dist/fondue-components66.js +148 -75
  105. package/dist/fondue-components66.js.map +1 -1
  106. package/dist/fondue-components67.js +19 -8
  107. package/dist/fondue-components67.js.map +1 -1
  108. package/dist/fondue-components68.js +77 -34
  109. package/dist/fondue-components68.js.map +1 -1
  110. package/dist/fondue-components69.js +8 -71
  111. package/dist/fondue-components69.js.map +1 -1
  112. package/dist/fondue-components7.js +2 -2
  113. package/dist/fondue-components70.js +34 -10
  114. package/dist/fondue-components70.js.map +1 -1
  115. package/dist/fondue-components71.js +70 -12
  116. package/dist/fondue-components71.js.map +1 -1
  117. package/dist/fondue-components72.js +10 -12
  118. package/dist/fondue-components72.js.map +1 -1
  119. package/dist/fondue-components73.js +12 -20
  120. package/dist/fondue-components73.js.map +1 -1
  121. package/dist/fondue-components74.js +13 -34
  122. package/dist/fondue-components74.js.map +1 -1
  123. package/dist/fondue-components75.js +20 -55
  124. package/dist/fondue-components75.js.map +1 -1
  125. package/dist/fondue-components76.js +34 -15
  126. package/dist/fondue-components76.js.map +1 -1
  127. package/dist/fondue-components77.js +9 -24
  128. package/dist/fondue-components77.js.map +1 -1
  129. package/dist/fondue-components78.js +55 -14
  130. package/dist/fondue-components78.js.map +1 -1
  131. package/dist/fondue-components79.js +14 -22
  132. package/dist/fondue-components79.js.map +1 -1
  133. package/dist/fondue-components8.js +5 -5
  134. package/dist/fondue-components80.js +25 -6
  135. package/dist/fondue-components80.js.map +1 -1
  136. package/dist/fondue-components81.js +13 -5
  137. package/dist/fondue-components81.js.map +1 -1
  138. package/dist/fondue-components82.js +23 -2
  139. package/dist/fondue-components82.js.map +1 -1
  140. package/dist/fondue-components83.js +5 -15
  141. package/dist/fondue-components83.js.map +1 -1
  142. package/dist/fondue-components84.js +4 -2
  143. package/dist/fondue-components84.js.map +1 -1
  144. package/dist/fondue-components85.js +4 -4
  145. package/dist/fondue-components85.js.map +1 -1
  146. package/dist/fondue-components86.js +4 -39
  147. package/dist/fondue-components86.js.map +1 -1
  148. package/dist/fondue-components87.js +5 -0
  149. package/dist/fondue-components87.js.map +1 -0
  150. package/dist/fondue-components88.js +20 -0
  151. package/dist/fondue-components88.js.map +1 -0
  152. package/dist/fondue-components89.js +43 -0
  153. package/dist/fondue-components89.js.map +1 -0
  154. package/dist/fondue-components9.js +4 -4
  155. package/dist/index.d.ts +74 -8
  156. package/dist/style.css +1 -1
  157. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components73.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components73.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -1,37 +1,16 @@
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
- }
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]);
12
+ };
33
13
  export {
34
- a as handleKeyDown,
35
- f as shouldIgnoreRowClick
14
+ s as useTextTruncation
36
15
  };
37
16
  //# sourceMappingURL=fondue-components74.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components74.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
+ {"version":3,"file":"fondue-components74.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,59 +1,24 @@
1
- import { useRef as v, useState as w, useEffect as W, useLayoutEffect as p } from "react";
2
- const T = (e, s) => e.filter((f) => {
3
- var c;
4
- const o = (c = f.ref) == null ? void 0 : c.current;
5
- return o ? o.offsetLeft + o.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || o.offsetLeft - s.scrollLeft < 0 : !1;
6
- }), u = (e, s) => {
7
- const f = s.current, o = e == null ? void 0 : e.querySelector('[data-state="active"]');
8
- if (!e || !(o instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
9
- return;
10
- const c = (e == null ? void 0 : e.scrollLeft) > (o == null ? void 0 : o.offsetLeft), l = (o == null ? void 0 : o.offsetLeft) + (o == null ? void 0 : o.offsetWidth) > (e == null ? void 0 : e.offsetWidth);
11
- c ? (e.offsetWidth > o.offsetWidth + o.offsetLeft ? f.style.left = `${o.offsetLeft}px` : f.style.left = `${e.offsetWidth - o.offsetWidth}px`, f.style.width = `${o == null ? void 0 : o.offsetWidth}px`) : l ? (f.style.left = `${e.clientWidth - o.offsetWidth}px`, f.style.width = `${o.offsetWidth}px`) : (f.style.left = `${o.offsetLeft}px`, f.style.width = `${o.offsetWidth}px`);
12
- }, O = ({
13
- activeTab: e
14
- }) => {
15
- const s = v(null), f = v(null), [o, c] = w([]), [l, i] = w([]);
16
- return W(() => {
17
- const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
18
- n instanceof HTMLButtonElement && t instanceof HTMLDivElement && (u(t, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
19
- }, [e, f]), p(() => {
20
- var d;
21
- const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
22
- if (t instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
23
- u(t, f);
24
- const a = new MutationObserver(() => {
25
- n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), u(t, f);
26
- });
27
- t.parentNode && a.observe(t.parentNode, { childList: !0 });
28
- const r = new IntersectionObserver(
29
- () => {
30
- i(T(o, t)), u(t, f);
31
- },
32
- {
33
- root: t,
34
- threshold: 1
35
- }
36
- );
37
- for (const h of o)
38
- (d = h.ref) != null && d.current && r.observe(h.ref.current);
39
- return () => {
40
- r.disconnect(), a.disconnect();
41
- };
42
- }
43
- }, [o, s, f]), {
44
- triggerListRef: s,
45
- activeIndicatorRef: f,
46
- triggersOutOfView: l,
47
- triggers: o,
48
- addTrigger: (t) => {
49
- t.previousElement || c((n) => [...n, t]), c((n) => {
50
- const d = n.findIndex((a) => a.element === t.previousElement);
51
- return n[d] = t, [...n];
52
- });
53
- }
54
- };
1
+ const t = "_table_1outv_4", o = "_headerCell_1outv_18", e = "_rowCell_1outv_19", _ = "_caption_1outv_46", n = "_cellContent_1outv_71", l = "_sortIndicator_1outv_96", c = "_body_1outv_100", r = "_row_1outv_19", s = "_buttonText_1outv_164", a = {
2
+ table: t,
3
+ headerCell: o,
4
+ rowCell: e,
5
+ caption: _,
6
+ cellContent: n,
7
+ sortIndicator: l,
8
+ body: c,
9
+ row: r,
10
+ buttonText: s
55
11
  };
56
12
  export {
57
- O as useTabTriggers
13
+ c as body,
14
+ s as buttonText,
15
+ _ as caption,
16
+ n as cellContent,
17
+ a as default,
18
+ o as headerCell,
19
+ r as row,
20
+ e as rowCell,
21
+ l as sortIndicator,
22
+ t as table
58
23
  };
59
24
  //# sourceMappingURL=fondue-components75.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components75.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 const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n const isOverflowingRight =\n activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n if (isOverflowingLeft) {\n const willFitAllItemsToTheLeft =\n triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n if (willFitAllItemsToTheLeft) {\n activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n } else {\n activeIndicatorElement.style.left = `${triggerListElement.offsetWidth - activeTriggerElement.offsetWidth}px`;\n }\n activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n } else if (isOverflowingRight) {\n activeIndicatorElement.style.left = `${triggerListElement.clientWidth - activeTriggerElement.offsetWidth}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n } else {\n activeIndicatorElement.style.left = `${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","isOverflowingLeft","isOverflowingRight","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-components75.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -1,18 +1,37 @@
1
- const t = "_triggerListWrapper_chl5v_5", r = "_trigger_chl5v_5", c = "_activeIndicator_chl5v_53", e = "_triggerList_chl5v_5", i = "_root_chl5v_143", o = "_content_chl5v_166", g = {
2
- triggerListWrapper: t,
3
- trigger: r,
4
- activeIndicator: c,
5
- triggerList: e,
6
- root: i,
7
- content: o
8
- };
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
+ }
9
33
  export {
10
- c as activeIndicator,
11
- o as content,
12
- g as default,
13
- i as root,
14
- r as trigger,
15
- e as triggerList,
16
- t as triggerListWrapper
34
+ a as handleKeyDown,
35
+ f as shouldIgnoreRowClick
17
36
  };
18
37
  //# sourceMappingURL=fondue-components76.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components76.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"fondue-components76.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,29 +1,14 @@
1
- const o = "_root_1cjgh_2", _ = {
2
- root: o,
3
- "weight-default": "_weight-default_1cjgh_7",
4
- "weight-strong": "_weight-strong_1cjgh_11",
5
- "weight-x-strong": "_weight-x-strong_1cjgh_15",
6
- "size-x-small": "_size-x-small_1cjgh_19",
7
- "size-small": "_size-small_1cjgh_24",
8
- "size-medium": "_size-medium_1cjgh_29",
9
- "size-large": "_size-large_1cjgh_34",
10
- "color-default": "_color-default_1cjgh_39",
11
- "color-weak": "_color-weak_1cjgh_43",
12
- "color-x-weak": "_color-x-weak_1cjgh_47",
13
- "color-disabled": "_color-disabled_1cjgh_51",
14
- "color-negative": "_color-negative_1cjgh_55",
15
- "color-positive": "_color-positive_1cjgh_59",
16
- "color-warning": "_color-warning_1cjgh_63",
17
- "color-interactive": "_color-interactive_1cjgh_67",
18
- "color-box-neutral": "_color-box-neutral_1cjgh_71",
19
- "color-box-selected": "_color-box-selected_1cjgh_75",
20
- "color-box-disabled": "_color-box-disabled_1cjgh_79",
21
- "color-box-positive": "_color-box-positive_1cjgh_83",
22
- "color-box-negative": "_color-box-negative_1cjgh_87",
23
- "color-box-warning": "_color-box-warning_1cjgh_91"
1
+ const t = "_root_15gz7_3", n = "_mainContent_15gz7_16", o = "_actionButton_15gz7_29", e = "_secondaryContent_15gz7_116", _ = {
2
+ root: t,
3
+ mainContent: n,
4
+ actionButton: o,
5
+ secondaryContent: e
24
6
  };
25
7
  export {
8
+ o as actionButton,
26
9
  _ as default,
27
- o as root
10
+ n as mainContent,
11
+ t as root,
12
+ e as secondaryContent
28
13
  };
29
14
  //# sourceMappingURL=fondue-components77.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,18 +1,59 @@
1
- const o = "_root_kjbh5_5", t = "_input_kjbh5_59", s = "_slot_kjbh5_82", c = "_iconSuccess_kjbh5_132", n = "_iconError_kjbh5_141", _ = "_loadingStatus_kjbh5_155", r = {
2
- root: o,
3
- input: t,
4
- slot: s,
5
- iconSuccess: c,
6
- iconError: n,
7
- loadingStatus: _
1
+ import { useRef as v, useState as w, useEffect as W, useLayoutEffect as p } from "react";
2
+ const T = (e, s) => e.filter((f) => {
3
+ var c;
4
+ const o = (c = f.ref) == null ? void 0 : c.current;
5
+ return o ? o.offsetLeft + o.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || o.offsetLeft - s.scrollLeft < 0 : !1;
6
+ }), u = (e, s) => {
7
+ const f = s.current, o = e == null ? void 0 : e.querySelector('[data-state="active"]');
8
+ if (!e || !(o instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
9
+ return;
10
+ const c = (e == null ? void 0 : e.scrollLeft) > (o == null ? void 0 : o.offsetLeft), l = (o == null ? void 0 : o.offsetLeft) + (o == null ? void 0 : o.offsetWidth) > (e == null ? void 0 : e.offsetWidth);
11
+ c ? (e.offsetWidth > o.offsetWidth + o.offsetLeft ? f.style.left = `${o.offsetLeft}px` : f.style.left = `${e.offsetWidth - o.offsetWidth}px`, f.style.width = `${o == null ? void 0 : o.offsetWidth}px`) : l ? (f.style.left = `${e.clientWidth - o.offsetWidth}px`, f.style.width = `${o.offsetWidth}px`) : (f.style.left = `${o.offsetLeft}px`, f.style.width = `${o.offsetWidth}px`);
12
+ }, O = ({
13
+ activeTab: e
14
+ }) => {
15
+ const s = v(null), f = v(null), [o, c] = w([]), [l, i] = w([]);
16
+ return W(() => {
17
+ const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
18
+ n instanceof HTMLButtonElement && t instanceof HTMLDivElement && (u(t, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
19
+ }, [e, f]), p(() => {
20
+ var d;
21
+ const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
22
+ if (t instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
23
+ u(t, f);
24
+ const a = new MutationObserver(() => {
25
+ n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), u(t, f);
26
+ });
27
+ t.parentNode && a.observe(t.parentNode, { childList: !0 });
28
+ const r = new IntersectionObserver(
29
+ () => {
30
+ i(T(o, t)), u(t, f);
31
+ },
32
+ {
33
+ root: t,
34
+ threshold: 1
35
+ }
36
+ );
37
+ for (const h of o)
38
+ (d = h.ref) != null && d.current && r.observe(h.ref.current);
39
+ return () => {
40
+ r.disconnect(), a.disconnect();
41
+ };
42
+ }
43
+ }, [o, s, f]), {
44
+ triggerListRef: s,
45
+ activeIndicatorRef: f,
46
+ triggersOutOfView: l,
47
+ triggers: o,
48
+ addTrigger: (t) => {
49
+ t.previousElement || c((n) => [...n, t]), c((n) => {
50
+ const d = n.findIndex((a) => a.element === t.previousElement);
51
+ return n[d] = t, [...n];
52
+ });
53
+ }
54
+ };
8
55
  };
9
56
  export {
10
- r as default,
11
- n as iconError,
12
- c as iconSuccess,
13
- t as input,
14
- _ as loadingStatus,
15
- o as root,
16
- s as slot
57
+ O as useTabTriggers
17
58
  };
18
59
  //# sourceMappingURL=fondue-components78.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components78.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"fondue-components78.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 const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n const isOverflowingRight =\n activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n if (isOverflowingLeft) {\n const willFitAllItemsToTheLeft =\n triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n if (willFitAllItemsToTheLeft) {\n activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n } else {\n activeIndicatorElement.style.left = `${triggerListElement.offsetWidth - activeTriggerElement.offsetWidth}px`;\n }\n activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n } else if (isOverflowingRight) {\n activeIndicatorElement.style.left = `${triggerListElement.clientWidth - activeTriggerElement.offsetWidth}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n } else {\n activeIndicatorElement.style.left = `${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","isOverflowingLeft","isOverflowingRight","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}
@@ -1,26 +1,18 @@
1
- const o = "_root_18lbr_5", t = "_textarea_18lbr_73", s = "_slot_18lbr_123", r = "_decorator_18lbr_137", _ = "_tools_18lbr_150", l = "_toolsButton_18lbr_162", c = "_success_18lbr_194", n = "_error_18lbr_198", e = "_loadingStatus_18lbr_202", a = "_spin_18lbr_1", b = {
2
- root: o,
3
- textarea: t,
4
- slot: s,
5
- decorator: r,
6
- tools: _,
7
- toolsButton: l,
8
- success: c,
9
- error: n,
10
- loadingStatus: e,
11
- spin: a
1
+ const t = "_triggerListWrapper_chl5v_5", r = "_trigger_chl5v_5", c = "_activeIndicator_chl5v_53", e = "_triggerList_chl5v_5", i = "_root_chl5v_143", o = "_content_chl5v_166", g = {
2
+ triggerListWrapper: t,
3
+ trigger: r,
4
+ activeIndicator: c,
5
+ triggerList: e,
6
+ root: i,
7
+ content: o
12
8
  };
13
9
  export {
14
- r as decorator,
15
- b as default,
16
- n as error,
17
- e as loadingStatus,
18
- o as root,
19
- s as slot,
20
- a as spin,
21
- c as success,
22
- t as textarea,
23
- _ as tools,
24
- l as toolsButton
10
+ c as activeIndicator,
11
+ o as content,
12
+ g as default,
13
+ i as root,
14
+ r as trigger,
15
+ e as triggerList,
16
+ t as triggerListWrapper
25
17
  };
26
18
  //# sourceMappingURL=fondue-components79.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components79.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components79.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,11 +1,11 @@
1
1
  import { jsx as a } from "react/jsx-runtime";
2
2
  import { Slot as P } from "@radix-ui/react-slot";
3
3
  import { forwardRef as F, useState as y, useMemo as N, Children as I } from "react";
4
- import { ForwardedRefColorGradientInput as w } from "./fondue-components42.js";
5
- import { ForwardedRefColorPickerInput as h } from "./fondue-components43.js";
6
- import { ForwardedRefColorValueInput as G } from "./fondue-components44.js";
7
- import V from "./fondue-components45.js";
8
- import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components46.js";
4
+ import { ForwardedRefColorGradientInput as w } from "./fondue-components43.js";
5
+ import { ForwardedRefColorPickerInput as h } from "./fondue-components44.js";
6
+ import { ForwardedRefColorValueInput as G } from "./fondue-components45.js";
7
+ import V from "./fondue-components46.js";
8
+ import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components47.js";
9
9
  const p = ({
10
10
  children: t,
11
11
  currentColor: r = A,
@@ -1,10 +1,29 @@
1
- const t = "_dark_1mr83_1", r = "_light_1mr83_250", s = {
2
- dark: t,
3
- light: r
1
+ const o = "_root_1cjgh_2", _ = {
2
+ root: o,
3
+ "weight-default": "_weight-default_1cjgh_7",
4
+ "weight-strong": "_weight-strong_1cjgh_11",
5
+ "weight-x-strong": "_weight-x-strong_1cjgh_15",
6
+ "size-x-small": "_size-x-small_1cjgh_19",
7
+ "size-small": "_size-small_1cjgh_24",
8
+ "size-medium": "_size-medium_1cjgh_29",
9
+ "size-large": "_size-large_1cjgh_34",
10
+ "color-default": "_color-default_1cjgh_39",
11
+ "color-weak": "_color-weak_1cjgh_43",
12
+ "color-x-weak": "_color-x-weak_1cjgh_47",
13
+ "color-disabled": "_color-disabled_1cjgh_51",
14
+ "color-negative": "_color-negative_1cjgh_55",
15
+ "color-positive": "_color-positive_1cjgh_59",
16
+ "color-warning": "_color-warning_1cjgh_63",
17
+ "color-interactive": "_color-interactive_1cjgh_67",
18
+ "color-box-neutral": "_color-box-neutral_1cjgh_71",
19
+ "color-box-selected": "_color-box-selected_1cjgh_75",
20
+ "color-box-disabled": "_color-box-disabled_1cjgh_79",
21
+ "color-box-positive": "_color-box-positive_1cjgh_83",
22
+ "color-box-negative": "_color-box-negative_1cjgh_87",
23
+ "color-box-warning": "_color-box-warning_1cjgh_91"
4
24
  };
5
25
  export {
6
- t as dark,
7
- s as default,
8
- r as light
26
+ _ as default,
27
+ o as root
9
28
  };
10
29
  //# sourceMappingURL=fondue-components80.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components80.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
1
+ {"version":3,"file":"fondue-components80.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,10 +1,18 @@
1
- const o = "_root_13m98_4", r = "_arrow_13m98_25", t = {
1
+ const o = "_root_kjbh5_5", t = "_input_kjbh5_59", s = "_slot_kjbh5_82", c = "_iconSuccess_kjbh5_132", n = "_iconError_kjbh5_141", _ = "_loadingStatus_kjbh5_155", r = {
2
2
  root: o,
3
- arrow: r
3
+ input: t,
4
+ slot: s,
5
+ iconSuccess: c,
6
+ iconError: n,
7
+ loadingStatus: _
4
8
  };
5
9
  export {
6
- r as arrow,
7
- t as default,
8
- o as root
10
+ r as default,
11
+ n as iconError,
12
+ c as iconSuccess,
13
+ t as input,
14
+ _ as loadingStatus,
15
+ o as root,
16
+ s as slot
9
17
  };
10
18
  //# sourceMappingURL=fondue-components81.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components81.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
1
+ {"version":3,"file":"fondue-components81.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,5 +1,26 @@
1
- const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
1
+ const o = "_root_18lbr_5", t = "_textarea_18lbr_73", s = "_slot_18lbr_123", r = "_decorator_18lbr_137", _ = "_tools_18lbr_150", l = "_toolsButton_18lbr_162", c = "_success_18lbr_194", n = "_error_18lbr_198", e = "_loadingStatus_18lbr_202", a = "_spin_18lbr_1", b = {
2
+ root: o,
3
+ textarea: t,
4
+ slot: s,
5
+ decorator: r,
6
+ tools: _,
7
+ toolsButton: l,
8
+ success: c,
9
+ error: n,
10
+ loadingStatus: e,
11
+ spin: a
12
+ };
2
13
  export {
3
- t as FOCUS_OUTLINE
14
+ r as decorator,
15
+ b as default,
16
+ n as error,
17
+ e as loadingStatus,
18
+ o as root,
19
+ s as slot,
20
+ a as spin,
21
+ c as success,
22
+ t as textarea,
23
+ _ as tools,
24
+ l as toolsButton
4
25
  };
5
26
  //# sourceMappingURL=fondue-components82.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components82.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n 'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
1
+ {"version":3,"file":"fondue-components82.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -1,20 +1,10 @@
1
- const o = "_root_1761r_5", t = "_colorName_1761r_55", c = "_button_1761r_63", r = "_colorIndicator_1761r_76", _ = "_actions_1761r_95", a = "_clear_1761r_105", n = "_caret_1761r_118", s = {
2
- root: o,
3
- colorName: t,
4
- button: c,
5
- colorIndicator: r,
6
- actions: _,
7
- clear: a,
8
- caret: n
1
+ const t = "_dark_1mr83_1", r = "_light_1mr83_250", s = {
2
+ dark: t,
3
+ light: r
9
4
  };
10
5
  export {
11
- _ as actions,
12
- c as button,
13
- n as caret,
14
- a as clear,
15
- r as colorIndicator,
16
- t as colorName,
6
+ t as dark,
17
7
  s as default,
18
- o as root
8
+ r as light
19
9
  };
20
10
  //# sourceMappingURL=fondue-components83.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components83.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components83.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,7 +1,9 @@
1
- const o = "_root_lwb4s_1", t = {
2
- root: o
1
+ const o = "_root_13m98_4", r = "_arrow_13m98_25", t = {
2
+ root: o,
3
+ arrow: r
3
4
  };
4
5
  export {
6
+ r as arrow,
5
7
  t as default,
6
8
  o as root
7
9
  };
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components84.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
1
+ {"version":3,"file":"fondue-components84.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,8 +1,8 @@
1
- const r = (e) => {
2
- if (e)
3
- return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
1
+ const o = "_root_lwb4s_1", t = {
2
+ root: o
4
3
  };
5
4
  export {
6
- r as colorToCss
5
+ t as default,
6
+ o as root
7
7
  };
8
8
  //# sourceMappingURL=fondue-components85.js.map