@frontify/fondue-components 23.0.0-rc.1 → 23.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fondue-components.js +46 -50
- package/dist/fondue-components.js.map +1 -1
- package/dist/fondue-components10.js +27 -24
- package/dist/fondue-components10.js.map +1 -1
- package/dist/fondue-components11.js +86 -104
- package/dist/fondue-components11.js.map +1 -1
- package/dist/fondue-components12.js +2 -2
- package/dist/fondue-components13.js +82 -79
- package/dist/fondue-components13.js.map +1 -1
- package/dist/fondue-components14.js +2 -2
- package/dist/fondue-components15.js +2 -2
- package/dist/fondue-components16.js +2 -2
- package/dist/fondue-components17.js +36 -56
- package/dist/fondue-components17.js.map +1 -1
- package/dist/fondue-components18.js +16 -34
- package/dist/fondue-components18.js.map +1 -1
- package/dist/fondue-components19.js +73 -18
- package/dist/fondue-components19.js.map +1 -1
- package/dist/fondue-components20.js +36 -18
- package/dist/fondue-components20.js.map +1 -1
- package/dist/fondue-components21.js +50 -71
- package/dist/fondue-components21.js.map +1 -1
- package/dist/fondue-components22.js +138 -36
- package/dist/fondue-components22.js.map +1 -1
- package/dist/fondue-components23.js +50 -50
- package/dist/fondue-components23.js.map +1 -1
- package/dist/fondue-components24.js +33 -138
- package/dist/fondue-components24.js.map +1 -1
- package/dist/fondue-components25.js +193 -52
- package/dist/fondue-components25.js.map +1 -1
- package/dist/fondue-components26.js +137 -29
- package/dist/fondue-components26.js.map +1 -1
- package/dist/fondue-components27.js +127 -170
- package/dist/fondue-components27.js.map +1 -1
- package/dist/fondue-components28.js +30 -134
- package/dist/fondue-components28.js.map +1 -1
- package/dist/fondue-components29.js +63 -130
- package/dist/fondue-components29.js.map +1 -1
- package/dist/fondue-components3.js +1 -1
- package/dist/fondue-components30.js +101 -31
- package/dist/fondue-components30.js.map +1 -1
- package/dist/fondue-components31.js +29 -63
- package/dist/fondue-components31.js.map +1 -1
- package/dist/fondue-components32.js +52 -98
- package/dist/fondue-components32.js.map +1 -1
- package/dist/fondue-components33.js +20 -12
- package/dist/fondue-components33.js.map +1 -1
- package/dist/fondue-components34.js +23 -56
- package/dist/fondue-components34.js.map +1 -1
- package/dist/fondue-components35.js +7 -20
- package/dist/fondue-components35.js.map +1 -1
- package/dist/fondue-components36.js +6 -7
- package/dist/fondue-components36.js.map +1 -1
- package/dist/fondue-components37.js +32 -7
- package/dist/fondue-components37.js.map +1 -1
- package/dist/fondue-components38.js +5 -32
- package/dist/fondue-components38.js.map +1 -1
- package/dist/fondue-components39.js +12 -5
- package/dist/fondue-components39.js.map +1 -1
- package/dist/fondue-components4.js +35 -31
- package/dist/fondue-components4.js.map +1 -1
- package/dist/fondue-components40.js +153 -18
- package/dist/fondue-components40.js.map +1 -1
- package/dist/fondue-components41.js +22 -59
- package/dist/fondue-components41.js.map +1 -1
- package/dist/fondue-components42.js +19 -19
- package/dist/fondue-components42.js.map +1 -1
- package/dist/fondue-components43.js +15 -112
- package/dist/fondue-components43.js.map +1 -1
- package/dist/fondue-components44.js +30 -19
- package/dist/fondue-components44.js.map +1 -1
- package/dist/fondue-components45.js +54 -32
- package/dist/fondue-components45.js.map +1 -1
- package/dist/fondue-components46.js +125 -47
- package/dist/fondue-components46.js.map +1 -1
- package/dist/fondue-components47.js +20 -129
- package/dist/fondue-components47.js.map +1 -1
- package/dist/fondue-components48.js +53 -21
- package/dist/fondue-components48.js.map +1 -1
- package/dist/fondue-components49.js +8 -53
- package/dist/fondue-components49.js.map +1 -1
- package/dist/fondue-components5.js +2 -2
- package/dist/fondue-components50.js +13 -8
- package/dist/fondue-components50.js.map +1 -1
- package/dist/fondue-components51.js +15 -13
- package/dist/fondue-components51.js.map +1 -1
- package/dist/fondue-components52.js +4 -14
- package/dist/fondue-components52.js.map +1 -1
- package/dist/fondue-components53.js +60 -5
- package/dist/fondue-components53.js.map +1 -1
- package/dist/fondue-components54.js +17 -58
- package/dist/fondue-components54.js.map +1 -1
- package/dist/fondue-components55.js +19 -18
- package/dist/fondue-components55.js.map +1 -1
- package/dist/fondue-components56.js +4 -18
- package/dist/fondue-components56.js.map +1 -1
- package/dist/fondue-components57.js +13 -3
- package/dist/fondue-components57.js.map +1 -1
- package/dist/fondue-components58.js +3 -11
- package/dist/fondue-components58.js.map +1 -1
- package/dist/fondue-components59.js +17 -3
- package/dist/fondue-components59.js.map +1 -1
- package/dist/fondue-components6.js +4 -4
- package/dist/fondue-components60.js +10 -17
- package/dist/fondue-components60.js.map +1 -1
- package/dist/fondue-components61.js +35 -11
- package/dist/fondue-components61.js.map +1 -1
- package/dist/fondue-components62.js +4 -36
- package/dist/fondue-components62.js.map +1 -1
- package/dist/fondue-components63.js +13 -35
- package/dist/fondue-components63.js.map +1 -1
- package/dist/fondue-components64.js +1 -1
- package/dist/fondue-components65.js +24 -12
- package/dist/fondue-components65.js.map +1 -1
- package/dist/fondue-components66.js +16 -4
- package/dist/fondue-components66.js.map +1 -1
- package/dist/fondue-components67.js +150 -23
- package/dist/fondue-components67.js.map +1 -1
- package/dist/fondue-components68.js +19 -17
- package/dist/fondue-components68.js.map +1 -1
- package/dist/fondue-components69.js +75 -148
- package/dist/fondue-components69.js.map +1 -1
- package/dist/fondue-components7.js +2 -2
- package/dist/fondue-components70.js +8 -19
- package/dist/fondue-components70.js.map +1 -1
- package/dist/fondue-components71.js +36 -77
- package/dist/fondue-components71.js.map +1 -1
- package/dist/fondue-components72.js +71 -8
- package/dist/fondue-components72.js.map +1 -1
- package/dist/fondue-components73.js +10 -36
- package/dist/fondue-components73.js.map +1 -1
- package/dist/fondue-components74.js +12 -70
- package/dist/fondue-components74.js.map +1 -1
- package/dist/fondue-components75.js +12 -10
- package/dist/fondue-components75.js.map +1 -1
- package/dist/fondue-components76.js +22 -12
- package/dist/fondue-components76.js.map +1 -1
- package/dist/fondue-components77.js +34 -13
- package/dist/fondue-components77.js.map +1 -1
- package/dist/fondue-components78.js +10 -22
- package/dist/fondue-components78.js.map +1 -1
- package/dist/fondue-components79.js +67 -33
- package/dist/fondue-components79.js.map +1 -1
- package/dist/fondue-components8.js +5 -5
- package/dist/fondue-components80.js +11 -7
- package/dist/fondue-components80.js.map +1 -1
- package/dist/fondue-components81.js +25 -67
- package/dist/fondue-components81.js.map +1 -1
- package/dist/fondue-components82.js +18 -14
- package/dist/fondue-components82.js.map +1 -1
- package/dist/fondue-components83.js +21 -23
- package/dist/fondue-components83.js.map +1 -1
- package/dist/fondue-components84.js +6 -18
- package/dist/fondue-components84.js.map +1 -1
- package/dist/fondue-components85.js +19 -22
- package/dist/fondue-components85.js.map +1 -1
- package/dist/fondue-components86.js +6 -8
- package/dist/fondue-components86.js.map +1 -1
- package/dist/fondue-components87.js +3 -5
- package/dist/fondue-components87.js.map +1 -1
- package/dist/fondue-components88.js +5 -2
- package/dist/fondue-components88.js.map +1 -1
- package/dist/fondue-components89.js +15 -3
- package/dist/fondue-components89.js.map +1 -1
- package/dist/fondue-components9.js +92 -88
- package/dist/fondue-components9.js.map +1 -1
- package/dist/fondue-components90.js +2 -5
- package/dist/fondue-components90.js.map +1 -1
- package/dist/fondue-components91.js +39 -16
- package/dist/fondue-components91.js.map +1 -1
- package/dist/fondue-components92.js +20 -39
- package/dist/fondue-components92.js.map +1 -1
- package/dist/index.d.ts +58 -118
- package/dist/style.css +1 -1
- package/package.json +10 -7
- package/dist/fondue-components93.js +0 -9
- package/dist/fondue-components93.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components72.js","sources":["../src/components/Select/
|
|
1
|
+
{"version":3,"file":"fondue-components72.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n Children,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\n\nimport { SelectClear } from './SelectClear';\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: <SelectClear /> });\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","SelectClear","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}
|
|
@@ -1,40 +1,14 @@
|
|
|
1
|
-
const
|
|
2
|
-
root:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
clear: t,
|
|
7
|
-
clearIcon: n,
|
|
8
|
-
icons: u,
|
|
9
|
-
caret: h,
|
|
10
|
-
iconSuccess: s,
|
|
11
|
-
iconError: r,
|
|
12
|
-
menu: p,
|
|
13
|
-
portal: a,
|
|
14
|
-
item: l,
|
|
15
|
-
checkmarkIcon: i,
|
|
16
|
-
itemValue: m,
|
|
17
|
-
group: g,
|
|
18
|
-
groupHeading: d
|
|
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: _
|
|
19
6
|
};
|
|
20
7
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
t as
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
g as group,
|
|
27
|
-
d as groupHeading,
|
|
28
|
-
r as iconError,
|
|
29
|
-
s as iconSuccess,
|
|
30
|
-
u as icons,
|
|
31
|
-
_ as input,
|
|
32
|
-
l as item,
|
|
33
|
-
m as itemValue,
|
|
34
|
-
p as menu,
|
|
35
|
-
a as portal,
|
|
36
|
-
c as root,
|
|
37
|
-
o as selectedValue,
|
|
38
|
-
e as slot
|
|
8
|
+
r as default,
|
|
9
|
+
_ as range,
|
|
10
|
+
t as root,
|
|
11
|
+
o as thumb,
|
|
12
|
+
s as track
|
|
39
13
|
};
|
|
40
14
|
//# sourceMappingURL=fondue-components73.js.map
|
|
@@ -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,74 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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(I(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
|
-
}, q = (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 = w(t, { children: /* @__PURE__ */ E(F, {}) })));
|
|
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 = B(
|
|
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
|
-
};
|
|
1
|
+
const s = "_root_6is9j_5", t = "_small_6is9j_16", _ = "_medium_6is9j_20", o = "_large_6is9j_24", m = "_thumb_6is9j_61", l = {
|
|
2
|
+
root: s,
|
|
3
|
+
small: t,
|
|
4
|
+
medium: _,
|
|
5
|
+
large: o,
|
|
6
|
+
thumb: m
|
|
69
7
|
};
|
|
70
8
|
export {
|
|
71
|
-
|
|
72
|
-
|
|
9
|
+
l as default,
|
|
10
|
+
o as large,
|
|
11
|
+
_ as medium,
|
|
12
|
+
s as root,
|
|
13
|
+
t as small,
|
|
14
|
+
m as thumb
|
|
73
15
|
};
|
|
74
16
|
//# sourceMappingURL=fondue-components74.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components74.js","sources":[
|
|
1
|
+
{"version":3,"file":"fondue-components74.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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]);
|
|
6
12
|
};
|
|
7
13
|
export {
|
|
8
|
-
|
|
9
|
-
s as range,
|
|
10
|
-
t as root,
|
|
11
|
-
a as thumb,
|
|
12
|
-
o as track
|
|
14
|
+
s as useTextTruncation
|
|
13
15
|
};
|
|
14
16
|
//# 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":["../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,16 +1,26 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
const t = "_table_ynid2_4", n = "_headerCell_ynid2_18", o = "_rowCell_ynid2_19", e = "_row_ynid2_19", _ = "_caption_ynid2_76", d = "_header_ynid2_18", l = "_cellContent_ynid2_117", c = "_sortIndicator_ynid2_151", r = "_body_ynid2_155", a = "_buttonText_ynid2_228", s = {
|
|
2
|
+
table: t,
|
|
3
|
+
headerCell: n,
|
|
4
|
+
rowCell: o,
|
|
5
|
+
row: e,
|
|
6
|
+
caption: _,
|
|
7
|
+
header: d,
|
|
8
|
+
cellContent: l,
|
|
9
|
+
sortIndicator: c,
|
|
10
|
+
body: r,
|
|
11
|
+
buttonText: a
|
|
7
12
|
};
|
|
8
13
|
export {
|
|
9
|
-
|
|
10
|
-
a as
|
|
11
|
-
_ as
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
r as body,
|
|
15
|
+
a as buttonText,
|
|
16
|
+
_ as caption,
|
|
17
|
+
l as cellContent,
|
|
18
|
+
s as default,
|
|
19
|
+
d as header,
|
|
20
|
+
n as headerCell,
|
|
21
|
+
e as row,
|
|
22
|
+
o as rowCell,
|
|
23
|
+
c as sortIndicator,
|
|
24
|
+
t as table
|
|
15
25
|
};
|
|
16
26
|
//# 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -1,16 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
+
}
|
|
13
33
|
export {
|
|
14
|
-
|
|
34
|
+
a as handleKeyDown,
|
|
35
|
+
f as shouldIgnoreRowClick
|
|
15
36
|
};
|
|
16
37
|
//# sourceMappingURL=fondue-components77.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components77.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"fondue-components77.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,26 +1,14 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
caption: n,
|
|
7
|
-
header: l,
|
|
8
|
-
cellContent: c,
|
|
9
|
-
sortIndicator: r,
|
|
10
|
-
body: a,
|
|
11
|
-
buttonText: s
|
|
1
|
+
const n = "_root_1nybm_3", t = "_mainContent_1nybm_15", o = "_actionButton_1nybm_28", e = "_secondaryContent_1nybm_123", _ = {
|
|
2
|
+
root: n,
|
|
3
|
+
mainContent: t,
|
|
4
|
+
actionButton: o,
|
|
5
|
+
secondaryContent: e
|
|
12
6
|
};
|
|
13
7
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
l as header,
|
|
20
|
-
t as headerCell,
|
|
21
|
-
_ as row,
|
|
22
|
-
e as rowCell,
|
|
23
|
-
r as sortIndicator,
|
|
24
|
-
o as table
|
|
8
|
+
o as actionButton,
|
|
9
|
+
_ as default,
|
|
10
|
+
t as mainContent,
|
|
11
|
+
n as root,
|
|
12
|
+
e as secondaryContent
|
|
25
13
|
};
|
|
26
14
|
//# 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,37 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const n = e.target, r = n.closest("tr");
|
|
10
|
-
if (!r || n !== r || !["ArrowUp", "ArrowDown"].includes(e.key))
|
|
1
|
+
import { useRef as W, useState as p, useEffect as w, useLayoutEffect as I } from "react";
|
|
2
|
+
const T = (e, s) => e.filter((f) => {
|
|
3
|
+
var c;
|
|
4
|
+
const t = (c = f.ref) == null ? void 0 : c.current;
|
|
5
|
+
return t ? t.offsetLeft + t.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || t.offsetLeft - s.scrollLeft < 0 : !1;
|
|
6
|
+
}), a = (e, s) => {
|
|
7
|
+
const f = s.current, t = e == null ? void 0 : e.querySelector('[data-state="active"]');
|
|
8
|
+
if (!e || !(t instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
|
|
11
9
|
return;
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
if (
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
10
|
+
const u = getComputedStyle(e).direction === "rtl", r = (e == null ? void 0 : e.scrollLeft) > (t == null ? void 0 : t.offsetLeft), l = (t == null ? void 0 : t.offsetLeft) + (t == null ? void 0 : t.offsetWidth) > (e == null ? void 0 : e.offsetWidth), o = (n) => u ? e.offsetWidth - n - t.offsetWidth : n;
|
|
11
|
+
if (r) {
|
|
12
|
+
if (e.offsetWidth > t.offsetWidth + t.offsetLeft)
|
|
13
|
+
f.style.insetInlineStart = `${o(t.offsetLeft)}px`;
|
|
14
|
+
else {
|
|
15
|
+
const i = e.offsetWidth - t.offsetWidth;
|
|
16
|
+
f.style.insetInlineStart = `${o(i)}px`;
|
|
17
|
+
}
|
|
18
|
+
f.style.width = `${t == null ? void 0 : t.offsetWidth}px`;
|
|
19
|
+
} else if (l) {
|
|
20
|
+
const n = e.clientWidth - t.offsetWidth;
|
|
21
|
+
f.style.insetInlineStart = `${o(n)}px`, f.style.width = `${t.offsetWidth}px`;
|
|
22
|
+
} else
|
|
23
|
+
f.style.insetInlineStart = `${o(t.offsetLeft)}px`, f.style.width = `${t.offsetWidth}px`;
|
|
24
|
+
}, b = ({
|
|
25
|
+
activeTab: e
|
|
26
|
+
}) => {
|
|
27
|
+
const s = W(null), f = W(null), [t, c] = p([]), [u, r] = p([]);
|
|
28
|
+
return w(() => {
|
|
29
|
+
const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
|
|
30
|
+
n instanceof HTMLButtonElement && o instanceof HTMLDivElement && (a(o, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
|
|
31
|
+
}, [e, f]), I(() => {
|
|
32
|
+
var i;
|
|
33
|
+
const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
|
|
34
|
+
if (o instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
|
|
35
|
+
a(o, f);
|
|
36
|
+
const d = new MutationObserver(() => {
|
|
37
|
+
n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(o, f);
|
|
38
|
+
});
|
|
39
|
+
o.parentNode && d.observe(o.parentNode, { childList: !0 });
|
|
40
|
+
const h = new IntersectionObserver(
|
|
41
|
+
() => {
|
|
42
|
+
r(T(t, o)), a(o, f);
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
root: o,
|
|
46
|
+
threshold: 1
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
for (const v of t)
|
|
50
|
+
(i = v.ref) != null && i.current && h.observe(v.ref.current);
|
|
51
|
+
return () => {
|
|
52
|
+
h.disconnect(), d.disconnect();
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
}, [t, s, f]), {
|
|
56
|
+
triggerListRef: s,
|
|
57
|
+
activeIndicatorRef: f,
|
|
58
|
+
triggersOutOfView: u,
|
|
59
|
+
triggers: t,
|
|
60
|
+
addTrigger: (o) => {
|
|
61
|
+
o.previousElement || c((n) => [...n, o]), c((n) => {
|
|
62
|
+
const i = n.findIndex((d) => d.element === o.previousElement);
|
|
63
|
+
return n[i] = o, [...n];
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
};
|
|
33
68
|
export {
|
|
34
|
-
|
|
35
|
-
f as shouldIgnoreRowClick
|
|
69
|
+
b as useTabTriggers
|
|
36
70
|
};
|
|
37
71
|
//# sourceMappingURL=fondue-components79.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components79.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-components79.js","sources":["../src/components/Tabs/hooks/useTabTriggers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { type TabTrigger } from '../types';\n\nconst getOverflowingTriggers = (triggers: TabTrigger[], triggerListElement: HTMLDivElement) => {\n return triggers.filter((trigger) => {\n const triggerElement = trigger.ref?.current;\n if (!triggerElement) {\n return false;\n }\n return (\n triggerElement.offsetLeft + triggerElement.offsetWidth >\n triggerListElement?.scrollLeft + triggerListElement.offsetWidth ||\n triggerElement.offsetLeft - triggerListElement.scrollLeft < 0\n );\n });\n};\n\nconst moveActiveIndicator = (triggerListElement: HTMLDivElement, activeIndicatorRef: RefObject<HTMLSpanElement>) => {\n const activeIndicatorElement = activeIndicatorRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (\n !triggerListElement ||\n !(activeTriggerElement instanceof HTMLButtonElement) ||\n !(activeIndicatorElement instanceof HTMLSpanElement)\n ) {\n return;\n }\n\n // Get the computed direction to handle RTL correctly\n const direction = getComputedStyle(triggerListElement).direction;\n const isRTL = direction === 'rtl';\n\n const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n const isOverflowingRight =\n activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n // Helper function to calculate position based on direction\n const getInlineStartPosition = (position: number) => {\n if (isRTL) {\n // In RTL, insetInlineStart maps to 'right', so we need to calculate from the right edge\n return triggerListElement.offsetWidth - position - activeTriggerElement.offsetWidth;\n }\n return position;\n };\n\n if (isOverflowingLeft) {\n const willFitAllItemsToTheLeft =\n triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n if (willFitAllItemsToTheLeft) {\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n } else {\n const position = triggerListElement.offsetWidth - activeTriggerElement.offsetWidth;\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n }\n activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n } else if (isOverflowingRight) {\n const position = triggerListElement.clientWidth - activeTriggerElement.offsetWidth;\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n } else {\n activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n }\n};\n\nexport const useTabTriggers = ({\n activeTab,\n}: {\n activeTab?: string;\n}): {\n triggerListRef: RefObject<HTMLDivElement>;\n activeIndicatorRef: RefObject<HTMLSpanElement>;\n triggers: TabTrigger[];\n triggersOutOfView: TabTrigger[];\n addTrigger: (trigger: TabTrigger) => void;\n} => {\n const triggerListRef = useRef<HTMLDivElement | null>(null);\n const activeIndicatorRef = useRef<HTMLSpanElement | null>(null);\n const [triggers, setTriggers] = useState<TabTrigger[]>([]);\n const [triggersOutOfView, setTriggersOutOfView] = useState<TabTrigger[]>([]);\n\n // move the active indicator and scroll to the correct position when the tab changes\n useEffect(() => {\n const triggerListElement = triggerListRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (activeTriggerElement instanceof HTMLButtonElement && triggerListElement instanceof HTMLDivElement) {\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n activeTriggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });\n }\n }, [activeTab, activeIndicatorRef]);\n\n useLayoutEffect(() => {\n const triggerListElement = triggerListRef.current;\n const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n if (triggerListElement instanceof HTMLDivElement && activeTriggerElement instanceof HTMLButtonElement) {\n // move the active indicator to the initial active tab\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n\n // observe addition of the dropdown trigger which reduces the available width\n const mutationObserver = new MutationObserver(() => {\n activeTriggerElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'end' });\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n });\n if (triggerListElement.parentNode) {\n mutationObserver.observe(triggerListElement.parentNode, { childList: true });\n }\n\n // calculate the overflowing elements when item starts overflowing the parent\n const intersectionObserver = new IntersectionObserver(\n () => {\n setTriggersOutOfView(getOverflowingTriggers(triggers, triggerListElement));\n moveActiveIndicator(triggerListElement, activeIndicatorRef);\n },\n {\n root: triggerListElement,\n threshold: 1,\n },\n );\n for (const trigger of triggers) {\n if (trigger.ref?.current) {\n intersectionObserver.observe(trigger.ref.current);\n }\n }\n\n return () => {\n intersectionObserver.disconnect();\n mutationObserver.disconnect();\n };\n }\n }, [triggers, triggerListRef, activeIndicatorRef]);\n\n const addTrigger = (trigger: TabTrigger) => {\n if (!trigger.previousElement) {\n setTriggers((prev) => [...prev, trigger]);\n }\n\n setTriggers((prev) => {\n const index = prev.findIndex((element) => element.element === trigger.previousElement);\n prev[index] = trigger;\n return [...prev];\n });\n };\n\n return {\n triggerListRef,\n activeIndicatorRef,\n triggersOutOfView,\n triggers,\n addTrigger,\n };\n};\n"],"names":["getOverflowingTriggers","triggers","triggerListElement","trigger","triggerElement","_a","moveActiveIndicator","activeIndicatorRef","activeIndicatorElement","activeTriggerElement","isRTL","isOverflowingLeft","isOverflowingRight","getInlineStartPosition","position","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}
|
|
@@ -1,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-
|
|
5
|
-
import { ForwardedRefColorPickerInput as h } from "./fondue-
|
|
6
|
-
import { ForwardedRefColorValueInput as G } from "./fondue-
|
|
7
|
-
import V from "./fondue-
|
|
8
|
-
import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-
|
|
4
|
+
import { ForwardedRefColorGradientInput as w } from "./fondue-components44.js";
|
|
5
|
+
import { ForwardedRefColorPickerInput as h } from "./fondue-components45.js";
|
|
6
|
+
import { ForwardedRefColorValueInput as G } from "./fondue-components46.js";
|
|
7
|
+
import V from "./fondue-components47.js";
|
|
8
|
+
import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components48.js";
|
|
9
9
|
const p = ({
|
|
10
10
|
children: t,
|
|
11
11
|
currentColor: r = A,
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const t = "_root_1gr64_5", r = "_triggerListWrapper_1gr64_13", g = "_trigger_1gr64_13", e = "_activeIndicator_1gr64_61", i = "_triggerList_1gr64_13", o = "_content_1gr64_149", _ = {
|
|
2
2
|
root: t,
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
triggerListWrapper: r,
|
|
4
|
+
trigger: g,
|
|
5
|
+
activeIndicator: e,
|
|
6
|
+
triggerList: i,
|
|
7
|
+
content: o
|
|
6
8
|
};
|
|
7
9
|
export {
|
|
8
|
-
|
|
10
|
+
e as activeIndicator,
|
|
11
|
+
o as content,
|
|
9
12
|
_ as default,
|
|
10
|
-
n as mainContent,
|
|
11
13
|
t as root,
|
|
12
|
-
|
|
14
|
+
g as trigger,
|
|
15
|
+
i as triggerList,
|
|
16
|
+
r as triggerListWrapper
|
|
13
17
|
};
|
|
14
18
|
//# 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":";;;;;;;;"}
|