urfu-ui-kit-react 2.1.7-next.1 → 2.1.7-next.3
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/README.md +2 -2
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +232 -194
- package/dist/components/Calendar/Calendar.types.d.ts +21 -0
- package/dist/components/Calendar/Calendar.types.d.ts.map +1 -1
- package/dist/components/Calendar/CalendarSelect.js +38 -38
- package/dist/components/Calendar/MaskedDateInput.d.ts +2 -0
- package/dist/components/Calendar/MaskedDateInput.d.ts.map +1 -1
- package/dist/components/Calendar/MaskedDateInput.js +120 -113
- package/dist/components/ColumnSettings/ColumnSettings.d.ts.map +1 -1
- package/dist/components/ColumnSettings/ColumnSettings.js +22 -21
- package/dist/components/ConfirmModal/ConfirmModal.d.ts +0 -1
- package/dist/components/ConfirmModal/ConfirmModal.d.ts.map +1 -1
- package/dist/components/ConfirmModal/ConfirmModal.js +11 -12
- package/dist/components/Drawer/Drawer.d.ts.map +1 -1
- package/dist/components/Drawer/Drawer.js +23 -22
- package/dist/components/ErrorScreen/ErrorScreen.js +117 -115
- package/dist/components/ErrorScreen/ErrorScreenIllustration.js +28 -28
- package/dist/components/InputExpandTextarea/InputExpandTextarea.js +1 -1
- package/dist/components/InputTime/InputTime.js +12 -12
- package/dist/components/Menu/Menu.js +11 -11
- package/dist/components/Modal/Modal.js +33 -33
- package/dist/components/Pagination/Pagination.js +22 -22
- package/dist/components/Preloader/Preloader.d.ts.map +1 -1
- package/dist/components/Preloader/Preloader.js +13 -13
- package/dist/components/Search/Search.d.ts.map +1 -1
- package/dist/components/Search/Search.js +28 -23
- package/dist/components/Select/Select.d.ts +2 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +21 -19
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +8 -8
- package/dist/components/Table/Filter/FilterStringBox.js +8 -8
- package/dist/components/Table/Filter/SelectFilter.d.ts.map +1 -1
- package/dist/components/Table/Filter/SelectFilter.js +24 -22
- package/dist/components/Table/Filter/useFilterOptionsPreload.js +2 -2
- package/dist/components/Table/Table.types.d.ts +1 -1
- package/dist/components/Table/Table.types.d.ts.map +1 -1
- package/dist/components/Table/TableHead.js +6 -6
- package/dist/components/Table/TableMobileCard.d.ts.map +1 -1
- package/dist/components/Table/TableMobileCard.js +27 -26
- package/dist/components/Table/TableMobileView.js +46 -46
- package/dist/components/Table/TableRow.js +1 -1
- package/dist/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.js +25 -24
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +37 -36
- package/dist/dev/index.js +16 -16
- package/dist/dev/types/vanilla/src/dev/panelStyles.d.ts +1 -1
- package/dist/hooks/useAutoId.js +3 -3
- package/dist/index.d.ts +4 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/shared/kitCopy.js +1 -1
- package/dist/shared/kitRegistry.d.ts +2 -2
- package/dist/shared/optionStateColors.d.ts +2 -2
- package/dist/shared/optionStateColors.js +4 -4
- package/dist/style-no-fonts.css +1 -1
- package/dist/style.css +1 -1
- package/dist/style.layer.css +2 -2
- package/dist/style.shell.css +3 -3
- package/dist/urfu-ui-kit-react.js +12 -12
- package/dist/utils/describeError.d.ts +27 -0
- package/dist/utils/describeError.d.ts.map +1 -1
- package/dist/vanilla/core/dateMask.js +1 -1
- package/dist/vanilla/core/describeError.js +42 -37
- package/package.json +1 -1
|
@@ -1,41 +1,42 @@
|
|
|
1
1
|
import { jsx as a, Fragment as D, jsxs as c } from "react/jsx-runtime";
|
|
2
|
-
import { useState as $,
|
|
2
|
+
import { useState as $, useRef as R, useEffect as I, useLayoutEffect as E } from "react";
|
|
3
3
|
import { Icon$u as M } from "../Icon/Icon.js";
|
|
4
|
-
import {
|
|
5
|
-
|
|
4
|
+
import { useAutoId$u as O } from "../../hooks/useAutoId.js";
|
|
5
|
+
import { animateHeight$u as A } from "../../vanilla/core/collapseMotion.js";
|
|
6
|
+
const W = ({
|
|
6
7
|
label: h,
|
|
7
8
|
children: s,
|
|
8
|
-
lines:
|
|
9
|
+
lines: n = 1,
|
|
9
10
|
valueColor: u,
|
|
10
11
|
labelColor: m,
|
|
11
12
|
gridSpan: d,
|
|
12
13
|
gridRowSpan: f
|
|
13
14
|
}) => {
|
|
14
|
-
const [r, w] = $(!1), [N, y] = $(!1), b = R(null), g =
|
|
15
|
+
const [r, w] = $(!1), [N, y] = $(!1), b = R(null), g = O(void 0, "u-table-card-value"), _ = R(null);
|
|
15
16
|
return E(() => {
|
|
16
17
|
const l = b.current, i = _.current;
|
|
17
18
|
if (_.current = null, !l || i == null) return;
|
|
18
|
-
const
|
|
19
|
-
l.classList.toggle("u-table-mobile-card__value--clamped", !r), l.style.webkitLineClamp = r ? "" : String(
|
|
19
|
+
const t = () => {
|
|
20
|
+
l.classList.toggle("u-table-mobile-card__value--clamped", !r), l.style.webkitLineClamp = r ? "" : String(n);
|
|
20
21
|
};
|
|
21
22
|
l.classList.remove("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = "";
|
|
22
23
|
let o = l.getBoundingClientRect().height;
|
|
23
|
-
r || (l.classList.add("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = String(
|
|
24
|
-
const p =
|
|
24
|
+
r || (l.classList.add("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = String(n), o = l.getBoundingClientRect().height, l.classList.remove("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = "");
|
|
25
|
+
const p = A(l, i, o, t);
|
|
25
26
|
return () => {
|
|
26
|
-
p(),
|
|
27
|
+
p(), t();
|
|
27
28
|
};
|
|
28
|
-
}, [r, s,
|
|
29
|
+
}, [r, s, n]), I(() => {
|
|
29
30
|
const l = b.current;
|
|
30
31
|
if (!l) return;
|
|
31
32
|
const i = () => {
|
|
32
|
-
const o = Number.parseFloat(getComputedStyle(l).lineHeight), p = Number.isFinite(o) ? o *
|
|
33
|
+
const o = Number.parseFloat(getComputedStyle(l).lineHeight), p = Number.isFinite(o) ? o * n : l.clientHeight;
|
|
33
34
|
y(l.scrollHeight > p + 1);
|
|
34
35
|
};
|
|
35
36
|
if (i(), typeof ResizeObserver > "u") return;
|
|
36
|
-
const
|
|
37
|
-
return
|
|
38
|
-
}, [s,
|
|
37
|
+
const t = new ResizeObserver(i);
|
|
38
|
+
return t.observe(l), () => t.disconnect();
|
|
39
|
+
}, [s, n, r]), /* @__PURE__ */ c("div", { className: `u-table-mobile-card__row u-table-mobile-card__row--collapsible${d === "full" ? " u-table-mobile-card__row--span-full" : d === 2 ? " u-table-mobile-card__row--span2" : d === "narrow" ? " u-table-mobile-card__row--span-narrow" : ""}${f === 2 ? " u-table-mobile-card__row--rowspan2" : ""}`, children: [
|
|
39
40
|
h != null && /* @__PURE__ */ a("span", { className: "u-table-mobile-card__label", style: m ? { color: m } : void 0, children: h }),
|
|
40
41
|
/* @__PURE__ */ a(
|
|
41
42
|
"span",
|
|
@@ -43,7 +44,7 @@ const q = ({
|
|
|
43
44
|
ref: b,
|
|
44
45
|
id: g,
|
|
45
46
|
className: "u-table-mobile-card__value" + (r ? "" : " u-table-mobile-card__value--clamped"),
|
|
46
|
-
style: { ...r ? {} : { WebkitLineClamp:
|
|
47
|
+
style: { ...r ? {} : { WebkitLineClamp: n }, ...u ? { color: u } : {} },
|
|
47
48
|
children: s
|
|
48
49
|
}
|
|
49
50
|
),
|
|
@@ -62,10 +63,10 @@ const q = ({
|
|
|
62
63
|
}
|
|
63
64
|
)
|
|
64
65
|
] });
|
|
65
|
-
},
|
|
66
|
+
}, Q = ({
|
|
66
67
|
title: h,
|
|
67
68
|
titleLabel: s,
|
|
68
|
-
titleHideLabel:
|
|
69
|
+
titleHideLabel: n,
|
|
69
70
|
titleColor: u,
|
|
70
71
|
titleLabelColor: m,
|
|
71
72
|
subtitle: d,
|
|
@@ -79,15 +80,15 @@ const q = ({
|
|
|
79
80
|
density: _ = "default",
|
|
80
81
|
divider: l,
|
|
81
82
|
showLabels: i = !0,
|
|
82
|
-
columns:
|
|
83
|
+
columns: t = 1
|
|
83
84
|
}) => {
|
|
84
|
-
const [o, p] = $(!1), S =
|
|
85
|
-
|
|
85
|
+
const [o, p] = $(!1), S = O(void 0, "u-table-card-details"), C = R(null);
|
|
86
|
+
I(() => {
|
|
86
87
|
C.current && (C.current.inert = !o);
|
|
87
88
|
}, [o]);
|
|
88
|
-
const L = w.filter((e) => e.value != null && e.value !== ""), k = N.filter((e) => e.value != null && e.value !== ""), x = y.filter((e) => e.value != null && e.value !== ""), F = x.length > 0, z = k.length > 0, B =
|
|
89
|
+
const L = w.filter((e) => e.value != null && e.value !== ""), k = N.filter((e) => e.value != null && e.value !== ""), x = y.filter((e) => e.value != null && e.value !== ""), F = x.length > 0, z = k.length > 0, B = t === 3 ? " u-table-mobile-card__fields--cols3" : t === 2 ? " u-table-mobile-card__fields--cols2" : "", j = /* @__PURE__ */ a(D, { children: /* @__PURE__ */ c("div", { className: "u-table-mobile-card__head-main", children: [
|
|
89
90
|
/* @__PURE__ */ c("span", { className: "u-table-mobile-card__primary", children: [
|
|
90
|
-
i && !
|
|
91
|
+
i && !n && s != null && s !== "" && /* @__PURE__ */ a(
|
|
91
92
|
"span",
|
|
92
93
|
{
|
|
93
94
|
className: "u-table-mobile-card__title-label",
|
|
@@ -141,7 +142,7 @@ const q = ({
|
|
|
141
142
|
)
|
|
142
143
|
) })
|
|
143
144
|
] }) }), H = (e, v) => e.expandLines ? /* @__PURE__ */ a(
|
|
144
|
-
|
|
145
|
+
W,
|
|
145
146
|
{
|
|
146
147
|
label: i && !e.hideLabel ? e.label : null,
|
|
147
148
|
lines: e.expandLines,
|
|
@@ -173,7 +174,7 @@ const q = ({
|
|
|
173
174
|
return /* @__PURE__ */ c(
|
|
174
175
|
"div",
|
|
175
176
|
{
|
|
176
|
-
className: `u-table-mobile-card u-table-mobile-card--list${b ? " u-table-mobile-card--flat" : ""}${l ? " u-table-mobile-card--divider" : ""}${
|
|
177
|
+
className: `u-table-mobile-card u-table-mobile-card--list${b ? " u-table-mobile-card--flat" : ""}${l ? " u-table-mobile-card--divider" : ""}${t === 3 ? " u-table-mobile-card--cols3" : ""}${g ? " u-table-mobile-card--inset" : ""}${_ === "compact" ? " u-table-mobile-card--compact" : ""}`,
|
|
177
178
|
children: [
|
|
178
179
|
/* @__PURE__ */ c("div", { className: "u-table-mobile-card__head", children: [
|
|
179
180
|
j,
|
|
@@ -209,4 +210,4 @@ const q = ({
|
|
|
209
210
|
}
|
|
210
211
|
);
|
|
211
212
|
};
|
|
212
|
-
export {
|
|
213
|
+
export { Q as MobileCard$u, W as MobileCollapsibleField$u };
|
|
@@ -6,7 +6,7 @@ import { Select$u as fe } from "../Select/Select.js";
|
|
|
6
6
|
import { Preloader$u as he } from "../Preloader/Preloader.js";
|
|
7
7
|
import { Tooltip$u as ve } from "../Tooltip/Tooltip.js";
|
|
8
8
|
import { MobileCard$u as _e, MobileCollapsibleField$u as ge } from "./TableMobileCard.js";
|
|
9
|
-
const
|
|
9
|
+
const Re = ({
|
|
10
10
|
filteredColumns: m,
|
|
11
11
|
pagedData: P,
|
|
12
12
|
filteredDataLength: D,
|
|
@@ -28,9 +28,9 @@ const ye = ({
|
|
|
28
28
|
mobileFilterOptions: f,
|
|
29
29
|
renderMobileFilter: T,
|
|
30
30
|
onMobileFiltersReset: ae,
|
|
31
|
-
mobileFilterSortLabel:
|
|
31
|
+
mobileFilterSortLabel: oe,
|
|
32
32
|
renderMobileCard: W,
|
|
33
|
-
mobileCardCollapsible:
|
|
33
|
+
mobileCardCollapsible: ie,
|
|
34
34
|
mobileCardLabels: j = !0,
|
|
35
35
|
mobileMaxVisible: h,
|
|
36
36
|
mobileCardColumns: v = 1,
|
|
@@ -40,33 +40,33 @@ const ye = ({
|
|
|
40
40
|
mobileCardInset: q,
|
|
41
41
|
mobileCardDensity: J = "default"
|
|
42
42
|
}) => {
|
|
43
|
-
const K = `${q ? " u-table-mobile-card--inset" : ""}${J === "compact" ? " u-table-mobile-card--compact" : ""}`,
|
|
44
|
-
const l =
|
|
43
|
+
const K = `${q ? " u-table-mobile-card--inset" : ""}${J === "compact" ? " u-table-mobile-card--compact" : ""}`, y = X(null), [Q, re] = Y({ atStart: !0, atEnd: !0 }), E = () => {
|
|
44
|
+
const l = y.current;
|
|
45
45
|
if (!l) return;
|
|
46
|
-
const
|
|
46
|
+
const o = l.scrollWidth > l.clientWidth + 1;
|
|
47
47
|
re({
|
|
48
|
-
atStart: !
|
|
49
|
-
atEnd: !
|
|
48
|
+
atStart: !o || l.scrollLeft <= 1,
|
|
49
|
+
atEnd: !o || l.scrollLeft + l.clientWidth >= l.scrollWidth - 1
|
|
50
50
|
});
|
|
51
51
|
};
|
|
52
52
|
Z(() => {
|
|
53
53
|
if (!H || p !== "segments") return;
|
|
54
|
-
const l =
|
|
54
|
+
const l = y.current;
|
|
55
55
|
if (!l || typeof ResizeObserver > "u") return;
|
|
56
|
-
|
|
57
|
-
const
|
|
58
|
-
return
|
|
56
|
+
E();
|
|
57
|
+
const o = new ResizeObserver(E);
|
|
58
|
+
return o.observe(l), () => o.disconnect();
|
|
59
59
|
}, [H, p, I]);
|
|
60
|
-
const
|
|
60
|
+
const R = X(null), [_, $] = Y(!1);
|
|
61
61
|
Z(() => {
|
|
62
62
|
if (!_) return;
|
|
63
|
-
const l = (
|
|
64
|
-
|
|
63
|
+
const l = (o) => {
|
|
64
|
+
R.current && !R.current.contains(o.target) && $(!1);
|
|
65
65
|
};
|
|
66
66
|
return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
|
|
67
67
|
}, [_]);
|
|
68
|
-
const b = (l,
|
|
69
|
-
(l) => l !==
|
|
68
|
+
const b = (l, o, r) => l.renderMobile ? l.renderMobile(o, r) : l.render ? l.render(o, r) : o[l.field], i = m.find((l) => l.mobilePrimary) ?? m[0], g = m.filter(
|
|
69
|
+
(l) => l !== i && l.mobileHidden !== !0
|
|
70
70
|
), d = g.find((l) => l.mobileSubtitle), U = g.filter((l) => l.mobileActions), k = g.filter((l) => l !== d && !l.mobileActions), te = k.filter((l) => l.mobileInline), ne = k.filter(
|
|
71
71
|
(l) => l.mobileSecondary && !l.mobileInline
|
|
72
72
|
), G = k.filter(
|
|
@@ -84,13 +84,13 @@ const ye = ({
|
|
|
84
84
|
options: f,
|
|
85
85
|
renderFilter: T,
|
|
86
86
|
onReset: ae,
|
|
87
|
-
sortLabel:
|
|
87
|
+
sortLabel: oe
|
|
88
88
|
}
|
|
89
89
|
) });
|
|
90
90
|
const l = m.filter((e) => e.sortOn);
|
|
91
91
|
if (!(le ?? l.length > 0) || l.length === 0) return null;
|
|
92
92
|
const r = l.find((e) => e.field === u);
|
|
93
|
-
return p === "menu" ? /* @__PURE__ */ n("div", { className: "u-table-mobile-sortmenu", ref:
|
|
93
|
+
return p === "menu" ? /* @__PURE__ */ n("div", { className: "u-table-mobile-sortmenu", ref: R, children: [
|
|
94
94
|
/* @__PURE__ */ n(
|
|
95
95
|
"button",
|
|
96
96
|
{
|
|
@@ -100,7 +100,7 @@ const ye = ({
|
|
|
100
100
|
"aria-expanded": _,
|
|
101
101
|
"aria-haspopup": "listbox",
|
|
102
102
|
children: [
|
|
103
|
-
/* @__PURE__ */ a(w, { name: "sorting", size: "16px", color: "#1E4391" }),
|
|
103
|
+
/* @__PURE__ */ a(w, { name: "sorting", size: "16px", color: "var(--u-color-primary, #1E4391)" }),
|
|
104
104
|
/* @__PURE__ */ a("span", { className: "u-table-mobile-sortmenu__label", children: r ? r.mobileLabel ?? r.title ?? r.field : c })
|
|
105
105
|
]
|
|
106
106
|
}
|
|
@@ -123,7 +123,7 @@ const ye = ({
|
|
|
123
123
|
{
|
|
124
124
|
name: L === "desc" ? "down-arrow" : "up-arrow",
|
|
125
125
|
size: "12px",
|
|
126
|
-
color: "#1E4391"
|
|
126
|
+
color: "var(--u-color-primary, #1E4391)"
|
|
127
127
|
}
|
|
128
128
|
)
|
|
129
129
|
]
|
|
@@ -134,8 +134,8 @@ const ye = ({
|
|
|
134
134
|
] }) : p === "segments" ? /* @__PURE__ */ a(
|
|
135
135
|
"div",
|
|
136
136
|
{
|
|
137
|
-
ref:
|
|
138
|
-
onScroll:
|
|
137
|
+
ref: y,
|
|
138
|
+
onScroll: E,
|
|
139
139
|
className: `u-table-mobile-sortseg${Q.atStart ? "" : " u-table-mobile-sortseg--clip-start"}${Q.atEnd ? "" : " u-table-mobile-sortseg--clip-end"}`,
|
|
140
140
|
role: "group",
|
|
141
141
|
"aria-label": c,
|
|
@@ -162,7 +162,7 @@ const ye = ({
|
|
|
162
162
|
{
|
|
163
163
|
name: L === "desc" ? "down-arrow" : "up-arrow",
|
|
164
164
|
size: "10px",
|
|
165
|
-
color: "#1E4391",
|
|
165
|
+
color: "var(--u-color-primary, #1E4391)",
|
|
166
166
|
className: "u-table-mobile-sortseg__arrow"
|
|
167
167
|
}
|
|
168
168
|
)
|
|
@@ -201,17 +201,17 @@ const ye = ({
|
|
|
201
201
|
{
|
|
202
202
|
name: L === "desc" ? "down-arrow" : "up-arrow",
|
|
203
203
|
size: "20px",
|
|
204
|
-
color: "#1E4391"
|
|
204
|
+
color: "var(--u-color-primary, #1E4391)"
|
|
205
205
|
}
|
|
206
206
|
)
|
|
207
207
|
}
|
|
208
208
|
)
|
|
209
209
|
] })
|
|
210
210
|
] });
|
|
211
|
-
}, me = (l,
|
|
212
|
-
if (W) return W(l,
|
|
211
|
+
}, me = (l, o) => {
|
|
212
|
+
if (W) return W(l, o);
|
|
213
213
|
const r = v === 3 ? " u-table-mobile-card__fields--cols3" : v === 2 ? " u-table-mobile-card__fields--cols2" : "";
|
|
214
|
-
return
|
|
214
|
+
return ie ? /* @__PURE__ */ a(
|
|
215
215
|
_e,
|
|
216
216
|
{
|
|
217
217
|
flat: x,
|
|
@@ -220,17 +220,17 @@ const ye = ({
|
|
|
220
220
|
divider: S,
|
|
221
221
|
showLabels: j,
|
|
222
222
|
columns: v,
|
|
223
|
-
title:
|
|
224
|
-
titleLabel:
|
|
225
|
-
titleHideLabel: !!(
|
|
226
|
-
titleColor:
|
|
227
|
-
titleLabelColor:
|
|
228
|
-
subtitle: d ? b(d, l,
|
|
223
|
+
title: i ? b(i, l, o) : null,
|
|
224
|
+
titleLabel: i ? i.mobileLabel ?? i.title : null,
|
|
225
|
+
titleHideLabel: !!(i != null && i.mobileHideLabel),
|
|
226
|
+
titleColor: i == null ? void 0 : i.mobileValueColor,
|
|
227
|
+
titleLabelColor: i == null ? void 0 : i.mobileLabelColor,
|
|
228
|
+
subtitle: d ? b(d, l, o) : null,
|
|
229
229
|
subtitleColor: d == null ? void 0 : d.mobileValueColor,
|
|
230
|
-
actions: U.length ? U.map((e) => /* @__PURE__ */ a("span", { children: b(e, l,
|
|
230
|
+
actions: U.length ? U.map((e) => /* @__PURE__ */ a("span", { children: b(e, l, o) }, e.field)) : void 0,
|
|
231
231
|
inline: te.map((e) => ({
|
|
232
232
|
label: e.mobileLabel ?? e.title,
|
|
233
|
-
value: b(e, l,
|
|
233
|
+
value: b(e, l, o),
|
|
234
234
|
hideLabel: !!e.mobileHideLabel,
|
|
235
235
|
valueColor: e.mobileValueColor,
|
|
236
236
|
labelColor: e.mobileLabelColor,
|
|
@@ -240,7 +240,7 @@ const ye = ({
|
|
|
240
240
|
})),
|
|
241
241
|
body: se.map((e) => ({
|
|
242
242
|
label: e.mobileLabel ?? e.title,
|
|
243
|
-
value: b(e, l,
|
|
243
|
+
value: b(e, l, o),
|
|
244
244
|
hideLabel: !!e.mobileHideLabel,
|
|
245
245
|
valueColor: e.mobileValueColor,
|
|
246
246
|
labelColor: e.mobileLabelColor,
|
|
@@ -250,7 +250,7 @@ const ye = ({
|
|
|
250
250
|
})),
|
|
251
251
|
details: be.map((e) => ({
|
|
252
252
|
label: e.mobileLabel ?? e.title,
|
|
253
|
-
value: b(e, l,
|
|
253
|
+
value: b(e, l, o),
|
|
254
254
|
hideLabel: !!e.mobileHideLabel,
|
|
255
255
|
valueColor: e.mobileValueColor,
|
|
256
256
|
labelColor: e.mobileLabelColor,
|
|
@@ -259,15 +259,15 @@ const ye = ({
|
|
|
259
259
|
gridRowSpan: e.mobileGridRowSpan
|
|
260
260
|
}))
|
|
261
261
|
},
|
|
262
|
-
l.id ??
|
|
262
|
+
l.id ?? o
|
|
263
263
|
) : /* @__PURE__ */ n(
|
|
264
264
|
"div",
|
|
265
265
|
{
|
|
266
266
|
className: `u-table-mobile-card${x ? " u-table-mobile-card--flat" : ""}${S ? " u-table-mobile-card--divider" : ""}${v === 3 ? " u-table-mobile-card--cols3" : ""}${K}`,
|
|
267
267
|
children: [
|
|
268
|
-
|
|
268
|
+
i && /* @__PURE__ */ a("div", { className: "u-table-mobile-card__title", style: i.mobileValueColor ? { color: i.mobileValueColor } : void 0, children: b(i, l, o) }),
|
|
269
269
|
/* @__PURE__ */ a("div", { className: "u-table-mobile-card__fields" + r, children: g.map((e, t) => {
|
|
270
|
-
const s = b(e, l,
|
|
270
|
+
const s = b(e, l, o);
|
|
271
271
|
if (s == null || s === "" || s === !1 || Array.isArray(s) && s.length === 0) return null;
|
|
272
272
|
const V = j && !e.mobileHideLabel ? e.mobileLabel ?? e.title : null, ue = e.mobileGridSpan === "full" ? " u-table-mobile-card__row--span-full" : e.mobileGridSpan === 2 ? " u-table-mobile-card__row--span2" : e.mobileGridSpan === "narrow" ? " u-table-mobile-card__row--span-narrow" : "";
|
|
273
273
|
return e.mobileCollapsible || e.mobileExpandLines ? /* @__PURE__ */ a(
|
|
@@ -292,25 +292,25 @@ const ye = ({
|
|
|
292
292
|
}) })
|
|
293
293
|
]
|
|
294
294
|
},
|
|
295
|
-
l.id ??
|
|
295
|
+
l.id ?? o
|
|
296
296
|
);
|
|
297
297
|
};
|
|
298
298
|
return /* @__PURE__ */ n(ce, { children: [
|
|
299
299
|
de(),
|
|
300
|
-
z && !A ? /* @__PURE__ */ a("div", { className: "u-table-mobile-list", "aria-hidden": "true", children: Array.from({ length: I || F }, (l,
|
|
300
|
+
z && !A ? /* @__PURE__ */ a("div", { className: "u-table-mobile-list", "aria-hidden": "true", children: Array.from({ length: I || F }, (l, o) => /* @__PURE__ */ n("div", { className: `u-table-mobile-card u-table-mobile-card--skeleton${x ? " u-table-mobile-card--flat" : ""}${S ? " u-table-mobile-card--divider" : ""}${K}`, children: [
|
|
301
301
|
/* @__PURE__ */ a("div", { className: "skeleton-cell u-table-mobile-card__skeleton-title" }),
|
|
302
302
|
/* @__PURE__ */ n("div", { className: "u-table-mobile-card__skeleton-fields", children: [
|
|
303
303
|
/* @__PURE__ */ a("div", { className: "skeleton-cell" }),
|
|
304
304
|
/* @__PURE__ */ a("div", { className: "skeleton-cell" })
|
|
305
305
|
] })
|
|
306
|
-
] },
|
|
306
|
+
] }, o)) }) : z || A ? /* @__PURE__ */ a("div", { className: "u-table-mobile-loading", children: /* @__PURE__ */ a(he, { variant: "large-primary", className: "" }) }) : D === 0 ? M ? /* @__PURE__ */ a("div", { className: "u-table-mobile-empty", children: M }) : null : /* @__PURE__ */ a(
|
|
307
307
|
"div",
|
|
308
308
|
{
|
|
309
309
|
className: "u-table-mobile-list",
|
|
310
310
|
style: O != null ? { gap: O } : void 0,
|
|
311
|
-
children: P.map((l,
|
|
311
|
+
children: P.map((l, o) => me(l, o))
|
|
312
312
|
}
|
|
313
313
|
)
|
|
314
314
|
] });
|
|
315
315
|
};
|
|
316
|
-
export {
|
|
316
|
+
export { Re as TableMobileView$u };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,aAAa,CAAC;AACrB,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAC3D,OAAO,aAAa,CAAC;AACrB,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,cAAc,CAAC;AA2BvE,eAAO,MAAM,IAAI,GAAI,wHAWlB,cAAc,4CA6LhB,CAAC"}
|
|
@@ -3,32 +3,33 @@ import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
|
3
3
|
/* empty css */
|
|
4
4
|
/* empty css */
|
|
5
5
|
/* empty css */
|
|
6
|
-
import { useState as x, useRef as p,
|
|
6
|
+
import { useState as x, useRef as p, useEffect as D, Fragment as ee } from "react";
|
|
7
7
|
import { Icon$u as b } from "../Icon/Icon.js";
|
|
8
|
-
import { Tooltip$u as
|
|
9
|
-
import { useDismiss$u as
|
|
10
|
-
import { useMountTransition$u as
|
|
11
|
-
import { getPopupTransitionStyle$u as
|
|
12
|
-
import { useTabsOverflow$u as
|
|
13
|
-
import { useTabsIndicator$u as
|
|
14
|
-
import { useTabsScroll$u as
|
|
8
|
+
import { Tooltip$u as oe } from "../Tooltip/Tooltip.js";
|
|
9
|
+
import { useDismiss$u as te } from "../../hooks/useDismiss.js";
|
|
10
|
+
import { useMountTransition$u as re } from "../../hooks/useMountTransition.js";
|
|
11
|
+
import { getPopupTransitionStyle$u as ne, POPUP_TRANSITION_MS$u as se } from "../../shared/popupTransition.js";
|
|
12
|
+
import { useTabsOverflow$u as ie } from "./useTabsOverflow.js";
|
|
13
|
+
import { useTabsIndicator$u as le } from "./useTabsIndicator.js";
|
|
14
|
+
import { useTabsScroll$u as ae } from "./useTabsScroll.js";
|
|
15
|
+
import { useAutoId$u as ce } from "../../hooks/useAutoId.js";
|
|
15
16
|
import { isPlainLeftClick$u as ue } from "../../vanilla/core/linkClick.js";
|
|
16
|
-
const me = [],
|
|
17
|
+
const me = [], Se = ({
|
|
17
18
|
onClick: h,
|
|
18
19
|
tabsData: n = me,
|
|
19
20
|
activeTab: m,
|
|
20
|
-
className:
|
|
21
|
+
className: w = "",
|
|
21
22
|
variant: g = "line",
|
|
22
23
|
fullWidth: y = !1,
|
|
23
24
|
tooltipOn: U = !1,
|
|
24
25
|
tooltipDisabled: _ = !1,
|
|
25
|
-
LinkComponent:
|
|
26
|
+
LinkComponent: $,
|
|
26
27
|
ariaLabel: B
|
|
27
28
|
}) => {
|
|
28
|
-
const { containerRef: K, measureRef: j, moreMeasureRef: q, visible: z, overflow: u, paddingOf: F, promote: L } =
|
|
29
|
-
d && (
|
|
30
|
-
const f = g === "segment", T = n.some((e) => e.url),
|
|
31
|
-
|
|
29
|
+
const { containerRef: K, measureRef: j, moreMeasureRef: q, visible: z, overflow: u, paddingOf: F, promote: L } = ie(n, m, y, g !== "segment"), [d, c] = x(!1), R = p(null), N = p(null), k = p(null), A = ce(void 0, "u-tabs-menu"), { shouldRender: H, status: J, isAnimated: Y } = re({ isOpen: d, duration: se }), O = p(u);
|
|
30
|
+
d && (O.current = u);
|
|
31
|
+
const f = g === "segment", T = n.some((e) => e.url), v = f ? "u-tab-segment" : "u-tab-line", G = f ? "u-tab-segment-active" : "u-tab-active", { trackRef: I, indicatorRef: Q } = le(m, `${g}|${y}|${JSON.stringify(n.map((e) => e.id))}`);
|
|
32
|
+
ae(I, !f, m), te({ refs: [R], enabled: d, onDismiss: () => c(!1) }), D(() => {
|
|
32
33
|
u.length || c(!1);
|
|
33
34
|
}, [u.length]);
|
|
34
35
|
const S = (e) => {
|
|
@@ -63,10 +64,10 @@ const me = [], Ie = ({
|
|
|
63
64
|
const l = (W) => {
|
|
64
65
|
ue(W) && S(e);
|
|
65
66
|
};
|
|
66
|
-
return
|
|
67
|
+
return $ ? /* @__PURE__ */ r($, { to: i.url, ...o, onClick: l, children: t }) : /* @__PURE__ */ r("a", { href: i.url, ...o, onClick: l, children: t });
|
|
67
68
|
}, E = (e, o = !1) => {
|
|
68
69
|
const t = n[e], s = !!(t.icon && t.iconOnly), i = t.icon ? s ? " u-tab-icon-only" : ` u-tab-with-icon${t.iconPosition === "right" ? " u-tab-icon-right" : ""}` : "", l = C(e, {
|
|
69
|
-
className: `${
|
|
70
|
+
className: `${v}${i}${t.id === m ? ` ${G}` : ""}${t.disabled ? " u-tab--disabled" : ""}`,
|
|
70
71
|
"data-label": s ? void 0 : t.title,
|
|
71
72
|
"aria-label": s ? t.title : void 0,
|
|
72
73
|
"data-measure-tab": o ? "" : void 0,
|
|
@@ -78,13 +79,13 @@ const me = [], Ie = ({
|
|
|
78
79
|
"aria-current": !o && t.id === m ? "page" : void 0,
|
|
79
80
|
"aria-disabled": !o && t.disabled ? "true" : void 0
|
|
80
81
|
}, Z(t), o);
|
|
81
|
-
return /* @__PURE__ */ r("div", { className: "u-tabs-item", children: U && !_ && !o ? /* @__PURE__ */ r(
|
|
82
|
+
return /* @__PURE__ */ r("div", { className: "u-tabs-item", children: U && !_ && !o ? /* @__PURE__ */ r(oe, { tooltipText: t.title, portalOn: !0, className: "u-tabs-tooltip", children: l }) : l }, e);
|
|
82
83
|
};
|
|
83
84
|
return /* @__PURE__ */ a(
|
|
84
85
|
T ? "nav" : "div",
|
|
85
86
|
{
|
|
86
87
|
ref: K,
|
|
87
|
-
className: `u-tabs ${f ? "u-tabs-segment" : "u-tabs-line"}${y ? " u-tabs-full-width" : ""}${
|
|
88
|
+
className: `u-tabs ${f ? "u-tabs-segment" : "u-tabs-line"}${y ? " u-tabs-full-width" : ""}${w ? ` ${w}` : ""}`,
|
|
88
89
|
"aria-label": T ? B : void 0,
|
|
89
90
|
children: [
|
|
90
91
|
/* @__PURE__ */ a("div", { className: "u-tabs-track", ref: I, children: [
|
|
@@ -106,10 +107,10 @@ const me = [], Ie = ({
|
|
|
106
107
|
{
|
|
107
108
|
type: "button",
|
|
108
109
|
ref: N,
|
|
109
|
-
className: `${
|
|
110
|
+
className: `${v} u-tabs-more-trigger`,
|
|
110
111
|
"aria-expanded": d,
|
|
111
112
|
"aria-haspopup": "menu",
|
|
112
|
-
"aria-controls":
|
|
113
|
+
"aria-controls": A,
|
|
113
114
|
onClick: () => c((e) => !e),
|
|
114
115
|
onKeyDown: (e) => {
|
|
115
116
|
(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), c(!0), requestAnimationFrame(() => V(e.key === "ArrowUp" ? -1 : 0)));
|
|
@@ -120,7 +121,7 @@ const me = [], Ie = ({
|
|
|
120
121
|
]
|
|
121
122
|
}
|
|
122
123
|
),
|
|
123
|
-
H && /* @__PURE__ */ r("div", { className: "u-tabs-more-menu", role: "menu", id:
|
|
124
|
+
H && /* @__PURE__ */ r("div", { className: "u-tabs-more-menu", role: "menu", id: A, ref: k, style: ne(J, Y), children: O.current.filter((e) => n[e]).map((e) => /* @__PURE__ */ r(ee, { children: C(e, {
|
|
124
125
|
role: "menuitem",
|
|
125
126
|
"aria-disabled": n[e].disabled ? "true" : void 0,
|
|
126
127
|
tabIndex: n[e].disabled ? -1 : void 0
|
|
@@ -134,7 +135,7 @@ const me = [], Ie = ({
|
|
|
134
135
|
] }),
|
|
135
136
|
/* @__PURE__ */ a("div", { ref: j, className: "u-tabs-measure", "aria-hidden": "true", children: [
|
|
136
137
|
n.map((e, o) => E(o, !0)),
|
|
137
|
-
f && /* @__PURE__ */ a("button", { ref: q, type: "button", tabIndex: -1, className: `${
|
|
138
|
+
f && /* @__PURE__ */ a("button", { ref: q, type: "button", tabIndex: -1, className: `${v} u-tabs-more-trigger u-tabs-more-measure`, children: [
|
|
138
139
|
/* @__PURE__ */ r("span", { children: "Ещё" }),
|
|
139
140
|
/* @__PURE__ */ r(b, { name: "down", size: 14 })
|
|
140
141
|
] })
|
|
@@ -143,4 +144,4 @@ const me = [], Ie = ({
|
|
|
143
144
|
}
|
|
144
145
|
);
|
|
145
146
|
};
|
|
146
|
-
export {
|
|
147
|
+
export { Se as Tabs$u };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,sDAAsD,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,sDAAsD,CAAC;AAC9D,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA4OpD,eAAO,MAAM,OAAO,GAAI,wHAYrB,iBAAiB,4CAgRnB,CAAC"}
|