@frontify/fondue-components 19.0.0 → 19.2.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 (99) hide show
  1. package/dist/fondue-components10.js +33 -27
  2. package/dist/fondue-components10.js.map +1 -1
  3. package/dist/fondue-components11.js +2 -2
  4. package/dist/fondue-components12.js +1 -1
  5. package/dist/fondue-components13.js +34 -24
  6. package/dist/fondue-components13.js.map +1 -1
  7. package/dist/fondue-components14.js +1 -1
  8. package/dist/fondue-components15.js +1 -1
  9. package/dist/fondue-components17.js +1 -1
  10. package/dist/fondue-components18.js +1 -1
  11. package/dist/fondue-components19.js +1 -1
  12. package/dist/fondue-components20.js +1 -1
  13. package/dist/fondue-components21.js +2 -2
  14. package/dist/fondue-components22.js +6 -6
  15. package/dist/fondue-components23.js +1 -1
  16. package/dist/fondue-components24.js +1 -1
  17. package/dist/fondue-components25.js +58 -58
  18. package/dist/fondue-components25.js.map +1 -1
  19. package/dist/fondue-components26.js +3 -3
  20. package/dist/fondue-components27.js +1 -1
  21. package/dist/fondue-components28.js +31 -29
  22. package/dist/fondue-components28.js.map +1 -1
  23. package/dist/fondue-components29.js +1 -1
  24. package/dist/fondue-components30.js +1 -1
  25. package/dist/fondue-components37.js +1 -1
  26. package/dist/fondue-components40.js +1 -1
  27. package/dist/fondue-components42.js +1 -1
  28. package/dist/fondue-components49.js +5 -60
  29. package/dist/fondue-components49.js.map +1 -1
  30. package/dist/fondue-components50.js +59 -17
  31. package/dist/fondue-components50.js.map +1 -1
  32. package/dist/fondue-components51.js +18 -19
  33. package/dist/fondue-components51.js.map +1 -1
  34. package/dist/fondue-components52.js +18 -4
  35. package/dist/fondue-components52.js.map +1 -1
  36. package/dist/fondue-components53.js +3 -13
  37. package/dist/fondue-components53.js.map +1 -1
  38. package/dist/fondue-components54.js +13 -3
  39. package/dist/fondue-components54.js.map +1 -1
  40. package/dist/fondue-components55.js +3 -17
  41. package/dist/fondue-components55.js.map +1 -1
  42. package/dist/fondue-components56.js +19 -35
  43. package/dist/fondue-components56.js.map +1 -1
  44. package/dist/fondue-components57.js +35 -5
  45. package/dist/fondue-components57.js.map +1 -1
  46. package/dist/fondue-components58.js +4 -12
  47. package/dist/fondue-components58.js.map +1 -1
  48. package/dist/fondue-components59.js +12 -4
  49. package/dist/fondue-components59.js.map +1 -1
  50. package/dist/fondue-components60.js +4 -24
  51. package/dist/fondue-components60.js.map +1 -1
  52. package/dist/fondue-components61.js +24 -16
  53. package/dist/fondue-components61.js.map +1 -1
  54. package/dist/fondue-components62.js +16 -146
  55. package/dist/fondue-components62.js.map +1 -1
  56. package/dist/fondue-components63.js +151 -19
  57. package/dist/fondue-components63.js.map +1 -1
  58. package/dist/fondue-components64.js +19 -77
  59. package/dist/fondue-components64.js.map +1 -1
  60. package/dist/fondue-components65.js +77 -8
  61. package/dist/fondue-components65.js.map +1 -1
  62. package/dist/fondue-components66.js +8 -35
  63. package/dist/fondue-components66.js.map +1 -1
  64. package/dist/fondue-components67.js +34 -48
  65. package/dist/fondue-components67.js.map +1 -1
  66. package/dist/fondue-components68.js +70 -10
  67. package/dist/fondue-components68.js.map +1 -1
  68. package/dist/fondue-components69.js +8 -10
  69. package/dist/fondue-components69.js.map +1 -1
  70. package/dist/fondue-components70.js +12 -12
  71. package/dist/fondue-components70.js.map +1 -1
  72. package/dist/fondue-components71.js +12 -20
  73. package/dist/fondue-components71.js.map +1 -1
  74. package/dist/fondue-components72.js +21 -15
  75. package/dist/fondue-components72.js.map +1 -1
  76. package/dist/fondue-components73.js +28 -55
  77. package/dist/fondue-components73.js.map +1 -1
  78. package/dist/fondue-components74.js +55 -14
  79. package/dist/fondue-components74.js.map +1 -1
  80. package/dist/fondue-components75.js +14 -25
  81. package/dist/fondue-components75.js.map +1 -1
  82. package/dist/fondue-components76.js +24 -13
  83. package/dist/fondue-components76.js.map +1 -1
  84. package/dist/fondue-components77.js +14 -6
  85. package/dist/fondue-components77.js.map +1 -1
  86. package/dist/fondue-components78.js +6 -6
  87. package/dist/fondue-components79.js +7 -2
  88. package/dist/fondue-components79.js.map +1 -1
  89. package/dist/fondue-components82.js +2 -17
  90. package/dist/fondue-components82.js.map +1 -1
  91. package/dist/fondue-components83.js +16 -39
  92. package/dist/fondue-components83.js.map +1 -1
  93. package/dist/fondue-components84.js +43 -0
  94. package/dist/fondue-components84.js.map +1 -0
  95. package/dist/fondue-components9.js +77 -66
  96. package/dist/fondue-components9.js.map +1 -1
  97. package/dist/index.d.ts +22 -1
  98. package/dist/style.css +1 -1
  99. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components67.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n value: string;\n label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n * <SelectItem value=\"1\">Option 1</SelectItem>\n * <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (\n children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\n const values: { value: string; label: string }[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n values.push(getSelectOptionValue(child.props));\n } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n const optionValues = getRecursiveOptionValues(child.props.children);\n for (const optionValue of optionValues) {\n values.push(optionValue);\n }\n }\n });\n return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n const [filterText, setFilterText] = useState('');\n const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n const inputSlots: ReactNode[] = [];\n const menuSlots: ReactNode[] = [];\n let clearButton: ReactNode;\n\n const hasSlots = Children.toArray(children).some(\n (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n );\n\n if (hasSlots) {\n Children.forEach(children, (child) => {\n if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n if (child.props.name === 'menu') {\n menuSlots.push(child.props.children);\n } else if (child.props.name === 'left' || child.props.name === 'right') {\n inputSlots.push(child);\n } else if (child.props.name === 'clear') {\n if (child.props.children) {\n clearButton = child;\n } else {\n clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n }\n }\n }\n });\n } else {\n menuSlots.push(children);\n }\n\n const itemValues = getRecursiveOptionValues(menuSlots);\n\n return { inputSlots, menuSlots, itemValues, clearButton };\n }, [children]);\n\n const items = useMemo(\n () =>\n itemValues.filter(\n (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n ),\n [itemValues, filterText],\n );\n\n const getItemByValue = useCallback(\n (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n [itemValues],\n );\n\n return {\n items,\n menuSlots,\n filterText,\n inputSlots,\n clearButton,\n setFilterText,\n getItemByValue,\n };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CACpCC,MAC2D;AAC3D,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}
1
+ {"version":3,"file":"fondue-components67.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
@@ -1,14 +1,74 @@
1
- const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
2
- root: t,
3
- thumb: o,
4
- track: s,
5
- range: _
1
+ import { jsx as E } from "react/jsx-runtime";
2
+ import { IconCross as w } from "@frontify/fondue-icons";
3
+ import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as B, useCallback as I, useEffect as x } from "react";
4
+ import { ForwardedRefSelectItem as L } from "./fondue-components64.js";
5
+ import { ForwardedRefSelectSlot as y } from "./fondue-components66.js";
6
+ import { getSelectOptionValue as F } from "./fondue-components84.js";
7
+ const O = (n, s) => {
8
+ const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
9
+ menuComponents: [],
10
+ items: []
11
+ });
12
+ return x(() => {
13
+ i(null), s || f({
14
+ menuComponents: [],
15
+ items: []
16
+ }), s && (r(!0), s(n).then((u) => {
17
+ f({
18
+ menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
19
+ items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
20
+ }), r(!1);
21
+ }).catch((u) => {
22
+ i(u), r(!1);
23
+ }));
24
+ }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
25
+ }, g = (n) => {
26
+ const s = [];
27
+ return v.forEach(n, (e) => {
28
+ if (C(e) && e.type === L)
29
+ s.push(F(e.props));
30
+ else if (C(e) && e.props.children) {
31
+ const r = g(e.props.children);
32
+ for (const m of r)
33
+ s.push(m);
34
+ }
35
+ }), s;
36
+ }, T = (n, s) => {
37
+ const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
38
+ const a = [], p = [];
39
+ let V;
40
+ v.toArray(n).some(
41
+ (t) => C(t) && t.type === y
42
+ ) ? v.forEach(n, (t) => {
43
+ C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? V = t : V = B(t, { children: /* @__PURE__ */ E(w, { size: 16 }) })));
44
+ }) : p.push(n);
45
+ const R = g(p);
46
+ return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: V };
47
+ }, [n]), u = b(
48
+ () => l.filter(
49
+ (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
50
+ ),
51
+ [l, e]
52
+ ), o = I(
53
+ (a) => a ? l.find((p) => p.value === a) : void 0,
54
+ [l]
55
+ ), c = O(e, s);
56
+ return {
57
+ items: [...u, ...c.items],
58
+ menuSlots: [...i, ...c.menuComponents],
59
+ filterText: e,
60
+ inputSlots: m,
61
+ clearButton: f,
62
+ setFilterText: r,
63
+ getItemByValue: o,
64
+ asyncItemStatus: {
65
+ isLoading: c.isLoading,
66
+ error: c.error
67
+ }
68
+ };
6
69
  };
7
70
  export {
8
- r as default,
9
- _ as range,
10
- t as root,
11
- o as thumb,
12
- s as track
71
+ g as getRecursiveOptionValues,
72
+ T as useSelectData
13
73
  };
14
74
  //# sourceMappingURL=fondue-components68.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components68.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"fondue-components68.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useMemo,\n useState,\n type ReactNode,\n useEffect,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n value: string;\n label: string;\n};\n\nexport type AsyncItem = { label: string; value: string; content?: ReactNode };\n\nexport type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;\n\nconst useAsyncItems = (filterText: string, getAsyncItems?: AsyncItemsFetcher) => {\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [asyncResult, setAsyncResult] = useState<{\n menuComponents: ReactNode[];\n items: { value: string; label: string; children?: ReactNode }[];\n }>({\n menuComponents: [],\n items: [],\n });\n\n useEffect(() => {\n setError(null);\n if (!getAsyncItems) {\n setAsyncResult({\n menuComponents: [],\n items: [],\n });\n }\n\n if (getAsyncItems) {\n setIsLoading(true);\n getAsyncItems(filterText)\n .then((items) => {\n setAsyncResult({\n menuComponents: items.map((item) => (\n <ForwardedRefSelectItem key={item.value} label={item.label} value={item.value}>\n {item.content ? item.content : item.label}\n </ForwardedRefSelectItem>\n )),\n items: items.map((item) => ({ value: item.value, label: item.label, children: item.content })),\n });\n setIsLoading(false);\n })\n .catch((error: Error) => {\n setError(error);\n setIsLoading(false);\n });\n }\n }, [filterText, getAsyncItems]);\n\n return { isLoading, error, menuComponents: asyncResult.menuComponents, items: asyncResult.items };\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n * <SelectItem value=\"1\">Option 1</SelectItem>\n * <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (\n children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\n const values: { value: string; label: string }[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n values.push(getSelectOptionValue(child.props));\n } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n const optionValues = getRecursiveOptionValues(child.props.children);\n for (const optionValue of optionValues) {\n values.push(optionValue);\n }\n }\n });\n return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @param {AsyncItemsFetcher} [getAsyncItems] - Optional function to fetch items asynchronously based on filter text.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode, getAsyncItems?: AsyncItemsFetcher) => {\n const [filterText, setFilterText] = useState('');\n const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n const inputSlots: ReactNode[] = [];\n const menuSlots: ReactNode[] = [];\n let clearButton: ReactNode;\n\n const hasSlots = Children.toArray(children).some(\n (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n );\n\n if (hasSlots) {\n Children.forEach(children, (child) => {\n if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n if (child.props.name === 'menu') {\n menuSlots.push(child.props.children);\n } else if (child.props.name === 'left' || child.props.name === 'right') {\n inputSlots.push(child);\n } else if (child.props.name === 'clear') {\n if (child.props.children) {\n clearButton = child;\n } else {\n clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n }\n }\n }\n });\n } else {\n menuSlots.push(children);\n }\n\n const itemValues = getRecursiveOptionValues(menuSlots);\n\n return { inputSlots, menuSlots, itemValues, clearButton };\n }, [children]);\n\n const items = useMemo(\n () =>\n itemValues.filter(\n (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n ),\n [itemValues, filterText],\n );\n\n const getItemByValue = useCallback(\n (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n [itemValues],\n );\n\n const asyncItems = useAsyncItems(filterText, getAsyncItems);\n\n return {\n items: [...items, ...asyncItems.items],\n menuSlots: [...menuSlots, ...asyncItems.menuComponents],\n filterText,\n inputSlots,\n clearButton,\n setFilterText,\n getItemByValue,\n asyncItemStatus: {\n isLoading: asyncItems.isLoading,\n error: asyncItems.error,\n },\n };\n};\n"],"names":["useAsyncItems","filterText","getAsyncItems","isLoading","setIsLoading","useState","error","setError","asyncResult","setAsyncResult","useEffect","items","item","jsx","ForwardedRefSelectItem","getRecursiveOptionValues","children","values","Children","child","isValidElement","getSelectOptionValue","optionValues","optionValue","useSelectData","setFilterText","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}
@@ -1,16 +1,14 @@
1
- const t = "_root_1dkcu_5", _ = "_small_1dkcu_14", o = "_medium_1dkcu_18", m = "_large_1dkcu_22", s = "_thumb_1dkcu_59", u = {
1
+ const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
2
2
  root: t,
3
- small: _,
4
- medium: o,
5
- large: m,
6
- thumb: s
3
+ thumb: o,
4
+ track: s,
5
+ range: _
7
6
  };
8
7
  export {
9
- u as default,
10
- m as large,
11
- o as medium,
8
+ r as default,
9
+ _ as range,
12
10
  t as root,
13
- _ as small,
14
- s as thumb
11
+ o as thumb,
12
+ s as track
15
13
  };
16
14
  //# sourceMappingURL=fondue-components69.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components69.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"fondue-components69.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,16 +1,16 @@
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]);
1
+ const t = "_root_1g6pz_5", _ = "_small_1g6pz_16", o = "_medium_1g6pz_20", m = "_large_1g6pz_24", s = "_thumb_1g6pz_61", l = {
2
+ root: t,
3
+ small: _,
4
+ medium: o,
5
+ large: m,
6
+ thumb: s
12
7
  };
13
8
  export {
14
- s as useTextTruncation
9
+ l as default,
10
+ m as large,
11
+ o as medium,
12
+ t as root,
13
+ _ as small,
14
+ s as thumb
15
15
  };
16
16
  //# sourceMappingURL=fondue-components70.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components70.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":";AAqBa,MAAAA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACR,QAAA,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AAChC,YAAAC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IAAK,CAC7D;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAW;AAAA,EAAA,GAClC,CAACH,CAAG,CAAC;AACZ;"}
1
+ {"version":3,"file":"fondue-components70.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -1,24 +1,16 @@
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
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]);
11
12
  };
12
13
  export {
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
14
+ s as useTextTruncation
23
15
  };
24
16
  //# sourceMappingURL=fondue-components71.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components71.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components71.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":";AAqBa,MAAAA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACR,QAAA,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AAChC,YAAAC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IAAK,CAC7D;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAW;AAAA,EAAA,GAClC,CAACH,CAAG,CAAC;AACZ;"}
@@ -1,18 +1,24 @@
1
- function l(t, r) {
2
- const n = 'tr[tabindex="0"]', e = t.closest("table");
3
- if (!e)
4
- return null;
5
- const o = Array.from(e.querySelectorAll(n)), c = o.indexOf(t) + (r === "ArrowUp" ? -1 : 1);
6
- return c >= 0 && c < o.length ? o[c] : null;
7
- }
8
- function u(t) {
9
- const r = t.target, n = r.closest("tr");
10
- if (!n || r !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
11
- return;
12
- const e = l(n, t.key);
13
- e && (t.preventDefault(), e.focus());
14
- }
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
11
+ };
15
12
  export {
16
- u as handleKeyDown
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
17
23
  };
18
24
  //# sourceMappingURL=fondue-components72.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components72.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent } 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"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;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,eAAe,GACrBE,EAAQ,MAAM;AAEtB;"}
1
+ {"version":3,"file":"fondue-components72.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -1,59 +1,32 @@
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))
1
+ function c(t, e) {
2
+ const n = 'tr[tabindex="0"]', r = t.closest("table");
3
+ if (!r)
4
+ return null;
5
+ const o = Array.from(r.querySelectorAll(n)), l = o.indexOf(t) + (e === "ArrowUp" ? -1 : 1);
6
+ return l >= 0 && l < o.length ? o[l] : null;
7
+ }
8
+ function a(t) {
9
+ const e = t.target, n = e.closest("tr");
10
+ if (!n || e !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
9
11
  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
- };
55
- };
12
+ const r = c(n, t.key);
13
+ r && (t.preventDefault(), r.focus());
14
+ }
15
+ const s = [HTMLButtonElement, HTMLAnchorElement], u = ["button", "link"];
16
+ function f(t) {
17
+ let e = (t == null ? void 0 : t.target) instanceof Element ? t.target : null;
18
+ for (; e && !(e instanceof HTMLTableRowElement); ) {
19
+ if (s.some((r) => e instanceof r))
20
+ return !0;
21
+ const n = e.getAttribute("role");
22
+ if (n && u.includes(n))
23
+ return !0;
24
+ e = e.parentElement;
25
+ }
26
+ return !1;
27
+ }
56
28
  export {
57
- O as useTabTriggers
29
+ a as handleKeyDown,
30
+ f as isEventFromInteractiveElement
58
31
  };
59
32
  //# sourceMappingURL=fondue-components73.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components73.js","sources":["../src/components/Tabs/hooks/useTabTriggers.tsx"],"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-components73.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 isEventFromInteractiveElement(event?: MouseEvent): boolean {\n let node = event?.target instanceof Element ? event.target : null;\n\n while (node && !(node instanceof HTMLTableRowElement)) {\n if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => node instanceof interactiveElement)) {\n return true;\n }\n\n const role = node.getAttribute('role');\n if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n return true;\n }\n\n node = node.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","isEventFromInteractiveElement","node","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;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,eAAe,GACrBE,EAAQ,MAAM;AAEtB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAA8BL,GAA6B;AACvE,MAAIM,KAAON,KAAA,gBAAAA,EAAO,mBAAkB,UAAUA,EAAM,SAAS;AAEtD,SAAAM,KAAQ,EAAEA,aAAgB,wBAAsB;AACnD,QAAIH,EAA0B,KAAK,CAACI,MAAuBD,aAAgBC,CAAkB;AAClF,aAAA;AAGL,UAAAC,IAAOF,EAAK,aAAa,MAAM;AACrC,QAAIE,KAAQJ,EAAuB,SAASI,CAAI;AACrC,aAAA;AAGX,IAAAF,IAAOA,EAAK;AAAA,EAAA;AAGT,SAAA;AACX;"}
@@ -1,18 +1,59 @@
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
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
- 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
57
+ O as useTabTriggers
17
58
  };
18
59
  //# sourceMappingURL=fondue-components74.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components74.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"fondue-components74.js","sources":["../src/components/Tabs/hooks/useTabTriggers.tsx"],"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,29 +1,18 @@
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 = "_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
24
8
  };
25
9
  export {
26
- _ as default,
27
- o as root
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
28
17
  };
29
18
  //# sourceMappingURL=fondue-components75.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components75.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fondue-components75.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,18 +1,29 @@
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 = {
1
+ const o = "_root_1cjgh_2", _ = {
2
2
  root: o,
3
- input: t,
4
- slot: s,
5
- iconSuccess: c,
6
- iconError: n,
7
- loadingStatus: _
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"
8
24
  };
9
25
  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
26
+ _ as default,
27
+ o as root
17
28
  };
18
29
  //# sourceMappingURL=fondue-components76.js.map