@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.
- package/dist/fondue-components10.js +33 -27
- package/dist/fondue-components10.js.map +1 -1
- package/dist/fondue-components11.js +2 -2
- package/dist/fondue-components12.js +1 -1
- package/dist/fondue-components13.js +34 -24
- package/dist/fondue-components13.js.map +1 -1
- package/dist/fondue-components14.js +1 -1
- package/dist/fondue-components15.js +1 -1
- package/dist/fondue-components17.js +1 -1
- package/dist/fondue-components18.js +1 -1
- package/dist/fondue-components19.js +1 -1
- package/dist/fondue-components20.js +1 -1
- package/dist/fondue-components21.js +2 -2
- package/dist/fondue-components22.js +6 -6
- package/dist/fondue-components23.js +1 -1
- package/dist/fondue-components24.js +1 -1
- package/dist/fondue-components25.js +58 -58
- package/dist/fondue-components25.js.map +1 -1
- package/dist/fondue-components26.js +3 -3
- package/dist/fondue-components27.js +1 -1
- package/dist/fondue-components28.js +31 -29
- package/dist/fondue-components28.js.map +1 -1
- package/dist/fondue-components29.js +1 -1
- package/dist/fondue-components30.js +1 -1
- package/dist/fondue-components37.js +1 -1
- package/dist/fondue-components40.js +1 -1
- package/dist/fondue-components42.js +1 -1
- package/dist/fondue-components49.js +5 -60
- package/dist/fondue-components49.js.map +1 -1
- package/dist/fondue-components50.js +59 -17
- package/dist/fondue-components50.js.map +1 -1
- package/dist/fondue-components51.js +18 -19
- package/dist/fondue-components51.js.map +1 -1
- package/dist/fondue-components52.js +18 -4
- package/dist/fondue-components52.js.map +1 -1
- package/dist/fondue-components53.js +3 -13
- package/dist/fondue-components53.js.map +1 -1
- package/dist/fondue-components54.js +13 -3
- package/dist/fondue-components54.js.map +1 -1
- package/dist/fondue-components55.js +3 -17
- package/dist/fondue-components55.js.map +1 -1
- package/dist/fondue-components56.js +19 -35
- package/dist/fondue-components56.js.map +1 -1
- package/dist/fondue-components57.js +35 -5
- package/dist/fondue-components57.js.map +1 -1
- package/dist/fondue-components58.js +4 -12
- package/dist/fondue-components58.js.map +1 -1
- package/dist/fondue-components59.js +12 -4
- package/dist/fondue-components59.js.map +1 -1
- package/dist/fondue-components60.js +4 -24
- package/dist/fondue-components60.js.map +1 -1
- package/dist/fondue-components61.js +24 -16
- package/dist/fondue-components61.js.map +1 -1
- package/dist/fondue-components62.js +16 -146
- package/dist/fondue-components62.js.map +1 -1
- package/dist/fondue-components63.js +151 -19
- package/dist/fondue-components63.js.map +1 -1
- package/dist/fondue-components64.js +19 -77
- package/dist/fondue-components64.js.map +1 -1
- package/dist/fondue-components65.js +77 -8
- package/dist/fondue-components65.js.map +1 -1
- package/dist/fondue-components66.js +8 -35
- package/dist/fondue-components66.js.map +1 -1
- package/dist/fondue-components67.js +34 -48
- package/dist/fondue-components67.js.map +1 -1
- package/dist/fondue-components68.js +70 -10
- package/dist/fondue-components68.js.map +1 -1
- package/dist/fondue-components69.js +8 -10
- package/dist/fondue-components69.js.map +1 -1
- package/dist/fondue-components70.js +12 -12
- package/dist/fondue-components70.js.map +1 -1
- package/dist/fondue-components71.js +12 -20
- package/dist/fondue-components71.js.map +1 -1
- package/dist/fondue-components72.js +21 -15
- package/dist/fondue-components72.js.map +1 -1
- package/dist/fondue-components73.js +28 -55
- package/dist/fondue-components73.js.map +1 -1
- package/dist/fondue-components74.js +55 -14
- package/dist/fondue-components74.js.map +1 -1
- package/dist/fondue-components75.js +14 -25
- package/dist/fondue-components75.js.map +1 -1
- package/dist/fondue-components76.js +24 -13
- package/dist/fondue-components76.js.map +1 -1
- package/dist/fondue-components77.js +14 -6
- package/dist/fondue-components77.js.map +1 -1
- package/dist/fondue-components78.js +6 -6
- package/dist/fondue-components79.js +7 -2
- package/dist/fondue-components79.js.map +1 -1
- package/dist/fondue-components82.js +2 -17
- package/dist/fondue-components82.js.map +1 -1
- package/dist/fondue-components83.js +16 -39
- package/dist/fondue-components83.js.map +1 -1
- package/dist/fondue-components84.js +43 -0
- package/dist/fondue-components84.js.map +1 -0
- package/dist/fondue-components9.js +77 -66
- package/dist/fondue-components9.js.map +1 -1
- package/dist/index.d.ts +22 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components67.js","sources":[
|
|
1
|
+
{"version":3,"file":"fondue-components67.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +1,74 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
|
|
9
|
-
|
|
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 = "
|
|
1
|
+
const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
|
|
2
2
|
root: t,
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
thumb: s
|
|
3
|
+
thumb: o,
|
|
4
|
+
track: s,
|
|
5
|
+
range: _
|
|
7
6
|
};
|
|
8
7
|
export {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
o as medium,
|
|
8
|
+
r as default,
|
|
9
|
+
_ as range,
|
|
12
10
|
t as root,
|
|
13
|
-
|
|
14
|
-
s as
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
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":[
|
|
1
|
+
{"version":3,"file":"fondue-components70.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
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":[
|
|
1
|
+
{"version":3,"file":"fondue-components72.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
|
@@ -1,59 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
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/
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
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":";AAMA,MAAMA,IAAyB,CAACC,GAAwBC,MAC7CD,EAAS,OAAO,CAACE,MAAY;;AAC1B,QAAAC,KAAiBC,IAAAF,EAAQ,QAAR,gBAAAE,EAAa;AACpC,SAAKD,IAIDA,EAAe,aAAaA,EAAe,eACvCF,KAAA,gBAAAA,EAAoB,cAAaA,EAAmB,eACxDE,EAAe,aAAaF,EAAmB,aAAa,IALrD;AAKqD,CAEnE,GAGCI,IAAsB,CAACJ,GAAoCK,MAAmD;AAChH,QAAMC,IAAyBD,EAAmB,SAC5CE,IAAuBP,KAAA,gBAAAA,EAAoB,cAAc;AAE/D,MACI,CAACA,KACD,EAAEO,aAAgC,sBAClC,EAAED,aAAkC;AAEpC;AAGE,QAAAE,KAAoBR,KAAA,gBAAAA,EAAoB,eAAaO,KAAA,gBAAAA,EAAsB,aAC3EE,KACFF,KAAA,gBAAAA,EAAsB,eAAaA,KAAA,gBAAAA,EAAsB,gBAAcP,KAAA,gBAAAA,EAAoB;AAE/F,EAAIQ,KAEIR,EAAmB,cAAcO,EAAqB,cAAcA,EAAqB,aAEzFD,EAAuB,MAAM,OAAO,GAAGC,EAAqB,UAAU,OAEtED,EAAuB,MAAM,OAAO,GAAGN,EAAmB,cAAcO,EAAqB,WAAW,MAE5GD,EAAuB,MAAM,QAAQ,GAAGC,KAAA,gBAAAA,EAAsB,WAAW,QAClEE,KACPH,EAAuB,MAAM,OAAO,GAAGN,EAAmB,cAAcO,EAAqB,WAAW,MACxGD,EAAuB,MAAM,QAAQ,GAAGC,EAAqB,WAAW,SAExED,EAAuB,MAAM,OAAO,GAAGC,EAAqB,UAAU,MACtED,EAAuB,MAAM,QAAQ,GAAGC,EAAqB,WAAW;AAEhF,GAEaG,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AACJ,MAQK;AACK,QAAAC,IAAiBC,EAA8B,IAAI,GACnDR,IAAqBQ,EAA+B,IAAI,GACxD,CAACd,GAAUe,CAAW,IAAIC,EAAuB,CAAA,CAAE,GACnD,CAACC,GAAmBC,CAAoB,IAAIF,EAAuB,CAAA,CAAE;AAG3E,SAAAG,EAAU,MAAM;AACZ,UAAMlB,IAAqBY,EAAe,SACpCL,IAAuBP,KAAA,gBAAAA,EAAoB,cAAc;AAE3D,IAAAO,aAAgC,qBAAqBP,aAA8B,mBACnFI,EAAoBJ,GAAoBK,CAAkB,GACrCE,EAAA,eAAe,EAAE,UAAU,UAAU,OAAO,WAAW,QAAQ,OAAO;AAAA,EAC/F,GACD,CAACI,GAAWN,CAAkB,CAAC,GAElCc,EAAgB,MAAM;;AAClB,UAAMnB,IAAqBY,EAAe,SACpCL,IAAuBP,KAAA,gBAAAA,EAAoB,cAAc;AAE3D,QAAAA,aAA8B,kBAAkBO,aAAgC,mBAAmB;AAEnG,MAAAH,EAAoBJ,GAAoBK,CAAkB;AAGpD,YAAAe,IAAmB,IAAI,iBAAiB,MAAM;AAC3B,QAAAb,EAAA,eAAe,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,OAAO,GAC5FH,EAAoBJ,GAAoBK,CAAkB;AAAA,MAAA,CAC7D;AACD,MAAIL,EAAmB,cACnBoB,EAAiB,QAAQpB,EAAmB,YAAY,EAAE,WAAW,IAAM;AAI/E,YAAMqB,IAAuB,IAAI;AAAA,QAC7B,MAAM;AACmB,UAAAJ,EAAAnB,EAAuBC,GAAUC,CAAkB,CAAC,GACzEI,EAAoBJ,GAAoBK,CAAkB;AAAA,QAC9D;AAAA,QACA;AAAA,UACI,MAAML;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MAEnB;AACA,iBAAWC,KAAWF;AACd,SAAAI,IAAAF,EAAQ,QAAR,QAAAE,EAAa,WACQkB,EAAA,QAAQpB,EAAQ,IAAI,OAAO;AAIxD,aAAO,MAAM;AACT,QAAAoB,EAAqB,WAAW,GAChCD,EAAiB,WAAW;AAAA,MAChC;AAAA,IAAA;AAAA,EAEL,GAAA,CAACrB,GAAUa,GAAgBP,CAAkB,CAAC,GAc1C;AAAA,IACH,gBAAAO;AAAA,IACA,oBAAAP;AAAA,IACA,mBAAAW;AAAA,IACA,UAAAjB;AAAA,IACA,YAjBe,CAACE,MAAwB;AACpC,MAACA,EAAQ,mBACTa,EAAY,CAACQ,MAAS,CAAC,GAAGA,GAAMrB,CAAO,CAAC,GAG5Ca,EAAY,CAACQ,MAAS;AACZ,cAAAC,IAAQD,EAAK,UAAU,CAACE,MAAYA,EAAQ,YAAYvB,EAAQ,eAAe;AACrF,eAAAqB,EAAKC,CAAK,IAAItB,GACP,CAAC,GAAGqB,CAAI;AAAA,MAAA,CAClB;AAAA,IACL;AAAA,EAQA;AACJ;"}
|
|
@@ -1,29 +1,18 @@
|
|
|
1
|
-
const o = "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
27
|
-
o as
|
|
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 = "
|
|
1
|
+
const o = "_root_1cjgh_2", _ = {
|
|
2
2
|
root: o,
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
11
|
-
|
|
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
|