impact-nova 1.7.34 → 1.7.37
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/components/ui/calendar.d.ts +2 -1
- package/dist/components/ui/calendar.js +463 -409
- package/dist/components/ui/combobox.d.ts +66 -0
- package/dist/components/ui/combobox.js +340 -0
- package/dist/components/ui/data-table/data-table-column-list.js +151 -130
- package/dist/components/ui/select/components/Submenu.js +7 -7
- package/dist/components/ui/sheet.js +1 -1
- package/dist/impact-nova.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +410 -408
- package/package.json +1 -1
|
@@ -1,85 +1,106 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { useDataTable as
|
|
4
|
-
import { NestedList as
|
|
5
|
-
import { SelectionMode as
|
|
6
|
-
import { mergePartialOrderedColumnState as
|
|
7
|
-
import { useImpactNovaI18n as
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsx as U } from "react/jsx-runtime";
|
|
2
|
+
import { useState as j, useRef as R, useCallback as L, useEffect as B } from "react";
|
|
3
|
+
import { useDataTable as ee } from "./data-table-context.js";
|
|
4
|
+
import { NestedList as te } from "../nested-list/nested-list.js";
|
|
5
|
+
import { SelectionMode as ne } from "../types/nested-list.types.js";
|
|
6
|
+
import { mergePartialOrderedColumnState as le } from "./data-table-column-state.js";
|
|
7
|
+
import { useImpactNovaI18n as oe } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
8
|
+
function re(v) {
|
|
9
|
+
const T = [];
|
|
10
|
+
let h = v.getOriginalParent();
|
|
11
|
+
for (; h; ) {
|
|
12
|
+
const M = h.getColGroupDef();
|
|
13
|
+
M?.headerName && M?.children && T.push(h), h = h.getOriginalParent();
|
|
14
|
+
}
|
|
15
|
+
return T.reverse(), T;
|
|
16
|
+
}
|
|
17
|
+
const ce = 300, q = 100, he = ({
|
|
18
|
+
enableApplyDiscard: v = !1,
|
|
19
|
+
showSearch: T = !0,
|
|
20
|
+
showSelectAll: h = !0,
|
|
21
|
+
showCollapse: M = !0
|
|
13
22
|
}) => {
|
|
14
|
-
const { gridApi: e } =
|
|
15
|
-
if (!e ||
|
|
16
|
-
const r = e.getColumnState(), u = e.getColumns() || [], c = new Map(u.map((
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
const { gridApi: e } = ee(), { t: D } = oe(), [Y, F] = j([]), [H, J] = j(!1), k = R(!1), z = R(null), x = R(0), W = R({}), [K, Q] = j(!1), E = L(() => {
|
|
24
|
+
if (!e || k.current) return;
|
|
25
|
+
const r = e.getColumnState(), u = e.getColumns() || [], c = new Map(u.map((l) => [l.getColId(), l])), i = [], s = [], t = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
|
|
26
|
+
f.set(i, "f"), f.set(s, "s");
|
|
27
|
+
let P = 0;
|
|
28
|
+
const G = (l) => {
|
|
29
|
+
let n = f.get(l);
|
|
30
|
+
return n === void 0 && (n = `n${P++}`, f.set(l, n)), n;
|
|
31
|
+
}, N = (l, n) => {
|
|
32
|
+
const o = l.getGroupId(), C = G(n), I = `${o}::${C}`, b = t.get(I);
|
|
33
|
+
if (b && b.list === n && n[n.length - 1] === b.node)
|
|
34
|
+
return b.node;
|
|
35
|
+
const y = S.get(I) || 0;
|
|
36
|
+
S.set(I, y + 1);
|
|
37
|
+
const p = l.getColGroupDef(), w = {
|
|
38
|
+
id: y === 0 ? `${o}__${C}` : `${o}__${C}__${y}`,
|
|
39
|
+
label: p?.headerName || o,
|
|
25
40
|
checked: !0,
|
|
26
41
|
children: [],
|
|
27
42
|
category: "group"
|
|
28
43
|
};
|
|
29
|
-
return
|
|
44
|
+
return n.push(w), t.set(I, { list: n, node: w }), w;
|
|
30
45
|
};
|
|
31
|
-
let
|
|
32
|
-
r.forEach((
|
|
33
|
-
const
|
|
34
|
-
if (!
|
|
35
|
-
let
|
|
36
|
-
if (
|
|
37
|
-
if (
|
|
38
|
-
const
|
|
39
|
-
if (
|
|
40
|
-
|
|
46
|
+
let a = 0, $ = 0, m = 0, d = 0;
|
|
47
|
+
r.forEach((l) => {
|
|
48
|
+
const n = c.get(l.colId);
|
|
49
|
+
if (!n) return;
|
|
50
|
+
let o = e.getDisplayNameForColumn(n, "header");
|
|
51
|
+
if (o === "") return;
|
|
52
|
+
if (o == null) {
|
|
53
|
+
const p = n.getColDef();
|
|
54
|
+
if (p.headerName === "") return;
|
|
55
|
+
o = p.headerName || p.field || l.colId;
|
|
41
56
|
}
|
|
42
|
-
if (!
|
|
57
|
+
if (!o || o.trim() === "")
|
|
43
58
|
return;
|
|
44
|
-
const
|
|
45
|
-
id:
|
|
46
|
-
label:
|
|
47
|
-
checked:
|
|
59
|
+
const C = !l.hide, I = {
|
|
60
|
+
id: l.colId,
|
|
61
|
+
label: o,
|
|
62
|
+
checked: C
|
|
48
63
|
};
|
|
49
|
-
|
|
50
|
-
const
|
|
51
|
-
|
|
64
|
+
l.pinned ? (a++, C && $++) : (m++, C && d++);
|
|
65
|
+
const b = l.pinned ? i : s, y = re(n);
|
|
66
|
+
if (y.length > 0) {
|
|
67
|
+
let p = b, O = null;
|
|
68
|
+
for (const w of y)
|
|
69
|
+
O = N(w, p), p = O.children;
|
|
70
|
+
O.children.push(I);
|
|
71
|
+
} else
|
|
72
|
+
b.push(I);
|
|
52
73
|
});
|
|
53
|
-
const
|
|
54
|
-
let
|
|
55
|
-
for (const
|
|
56
|
-
|
|
57
|
-
return
|
|
74
|
+
const g = (l) => {
|
|
75
|
+
let n = l.length > 0;
|
|
76
|
+
for (const o of l)
|
|
77
|
+
o.children && (o.checked = g(o.children)), o.checked || (n = !1);
|
|
78
|
+
return n;
|
|
58
79
|
};
|
|
59
|
-
|
|
60
|
-
const
|
|
80
|
+
g(i), g(s);
|
|
81
|
+
const _ = [
|
|
61
82
|
{
|
|
62
83
|
id: "root-frozen",
|
|
63
|
-
label:
|
|
64
|
-
checked:
|
|
65
|
-
children:
|
|
84
|
+
label: D("dataTable.frozenColumns"),
|
|
85
|
+
checked: a > 0 && $ === a,
|
|
86
|
+
children: i,
|
|
66
87
|
category: "structure",
|
|
67
88
|
isDragDisabled: !0
|
|
68
89
|
},
|
|
69
90
|
{
|
|
70
91
|
id: "root-scrollable",
|
|
71
|
-
label:
|
|
72
|
-
checked: m > 0 &&
|
|
73
|
-
children:
|
|
92
|
+
label: D("dataTable.scrollableColumns"),
|
|
93
|
+
checked: m > 0 && d === m,
|
|
94
|
+
children: s,
|
|
74
95
|
category: "structure",
|
|
75
96
|
isDragDisabled: !0
|
|
76
97
|
}
|
|
77
98
|
];
|
|
78
|
-
|
|
79
|
-
}, [e,
|
|
80
|
-
|
|
99
|
+
F(_), J(!0);
|
|
100
|
+
}, [e, D]);
|
|
101
|
+
B(() => {
|
|
81
102
|
if (!e) return;
|
|
82
|
-
const r = setTimeout(() =>
|
|
103
|
+
const r = setTimeout(() => E(), 0), u = [
|
|
83
104
|
"columnVisible",
|
|
84
105
|
"columnPinned",
|
|
85
106
|
"columnMoved",
|
|
@@ -94,112 +115,112 @@ const te = 300, M = 100, de = ({
|
|
|
94
115
|
"displayedColumnsChanged"
|
|
95
116
|
];
|
|
96
117
|
let c = null;
|
|
97
|
-
const
|
|
118
|
+
const i = () => {
|
|
98
119
|
c && clearTimeout(c), c = setTimeout(() => {
|
|
99
|
-
c = null,
|
|
120
|
+
if (c = null, k.current) return;
|
|
121
|
+
const s = z.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
|
|
122
|
+
s && (x.current = s.scrollTop), E(), Q((t) => !t);
|
|
100
123
|
}, 150);
|
|
101
124
|
};
|
|
102
|
-
return e.isDestroyed() || u.forEach((
|
|
103
|
-
clearTimeout(r), c && clearTimeout(c), e.isDestroyed() || u.forEach((
|
|
125
|
+
return e.isDestroyed() || u.forEach((s) => e.addEventListener(s, i)), () => {
|
|
126
|
+
clearTimeout(r), c && clearTimeout(c), e.isDestroyed() || u.forEach((s) => e.removeEventListener(s, i));
|
|
104
127
|
};
|
|
105
|
-
}, [e,
|
|
106
|
-
if (
|
|
128
|
+
}, [e, E]), B(() => {
|
|
129
|
+
if (x.current === 0) return;
|
|
107
130
|
const r = requestAnimationFrame(() => {
|
|
108
|
-
const u =
|
|
109
|
-
u && (u.scrollTop =
|
|
131
|
+
const u = z.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
|
|
132
|
+
u && (u.scrollTop = x.current, x.current = 0);
|
|
110
133
|
});
|
|
111
134
|
return () => cancelAnimationFrame(r);
|
|
112
|
-
}, [
|
|
113
|
-
const
|
|
114
|
-
const u = [], c = (
|
|
115
|
-
|
|
116
|
-
if (
|
|
117
|
-
|
|
135
|
+
}, [K]);
|
|
136
|
+
const V = L((r) => {
|
|
137
|
+
const u = [], c = (i, s) => {
|
|
138
|
+
i.forEach((t) => {
|
|
139
|
+
if (t.id === "root-frozen") {
|
|
140
|
+
t.children && c(t.children, "left");
|
|
118
141
|
return;
|
|
119
142
|
}
|
|
120
|
-
if (
|
|
121
|
-
|
|
143
|
+
if (t.id === "root-scrollable") {
|
|
144
|
+
t.children && c(t.children, null);
|
|
122
145
|
return;
|
|
123
146
|
}
|
|
124
|
-
|
|
125
|
-
colId:
|
|
126
|
-
pinned:
|
|
127
|
-
hide: !
|
|
147
|
+
t.category === "group" || t.children && t.children.length > 0 ? t.children && c(t.children, s) : e?.getColumn(t.id) && u.push({
|
|
148
|
+
colId: t.id,
|
|
149
|
+
pinned: s,
|
|
150
|
+
hide: !t.checked
|
|
128
151
|
});
|
|
129
152
|
});
|
|
130
153
|
};
|
|
131
154
|
return c(r, null), u;
|
|
132
|
-
}, [e]),
|
|
155
|
+
}, [e]), A = L((r) => {
|
|
133
156
|
if (!e) return;
|
|
134
|
-
|
|
135
|
-
const u =
|
|
157
|
+
k.current = !0;
|
|
158
|
+
const u = V(r);
|
|
136
159
|
if (u.length === 0) {
|
|
137
160
|
setTimeout(() => {
|
|
138
|
-
|
|
139
|
-
},
|
|
161
|
+
k.current = !1;
|
|
162
|
+
}, q);
|
|
140
163
|
return;
|
|
141
164
|
}
|
|
142
|
-
const c = e.getColumnState(),
|
|
143
|
-
e.applyColumnState({ state:
|
|
144
|
-
const
|
|
145
|
-
|
|
146
|
-
const s = x.current?.querySelector('[data-component="nested-list"] .overflow-y-auto');
|
|
147
|
-
s && (E.current = s.scrollTop), D(), $((I) => !I);
|
|
165
|
+
const c = e.getColumnState(), i = le(c, u), s = new Set(c.filter((a) => a.pinned).map((a) => a.colId)), t = i.filter((a) => a.pinned && !s.has(a.colId)), S = new Set(t.map((a) => a.colId));
|
|
166
|
+
e.applyColumnState({ state: i, applyOrder: !0 });
|
|
167
|
+
const f = () => {
|
|
168
|
+
k.current = !1, E();
|
|
148
169
|
};
|
|
149
|
-
if (
|
|
150
|
-
setTimeout(
|
|
170
|
+
if (S.size === 0) {
|
|
171
|
+
setTimeout(f, q);
|
|
151
172
|
return;
|
|
152
173
|
}
|
|
153
|
-
let
|
|
154
|
-
const
|
|
155
|
-
if (
|
|
156
|
-
const
|
|
157
|
-
if (
|
|
158
|
-
const
|
|
159
|
-
return
|
|
174
|
+
let P = !1, G = null;
|
|
175
|
+
const N = () => {
|
|
176
|
+
if (P || e.isDestroyed()) return;
|
|
177
|
+
const a = e.getColumnState();
|
|
178
|
+
if (t.filter((m) => {
|
|
179
|
+
const d = a.find((g) => g.colId === m.colId);
|
|
180
|
+
return d && !d.pinned;
|
|
160
181
|
}).length > 0) {
|
|
161
|
-
|
|
162
|
-
const
|
|
163
|
-
if (
|
|
164
|
-
const
|
|
165
|
-
(
|
|
182
|
+
P = !0, G && clearTimeout(G), e.removeEventListener("columnPinned", N);
|
|
183
|
+
const m = i.filter((d) => d.pinned && !S.has(d.colId));
|
|
184
|
+
if (m.length > 0) {
|
|
185
|
+
const d = m[0], g = i.map(
|
|
186
|
+
(_) => _.colId === d.colId ? { ..._, pinned: null } : _
|
|
166
187
|
);
|
|
167
|
-
e.applyColumnState({ state:
|
|
188
|
+
e.applyColumnState({ state: g, applyOrder: !0 });
|
|
168
189
|
}
|
|
169
|
-
setTimeout(
|
|
190
|
+
setTimeout(f, q);
|
|
170
191
|
}
|
|
171
192
|
};
|
|
172
|
-
e.addEventListener("columnPinned",
|
|
173
|
-
e.removeEventListener("columnPinned",
|
|
174
|
-
},
|
|
175
|
-
}, [e,
|
|
176
|
-
|
|
177
|
-
}, [
|
|
178
|
-
|
|
179
|
-
}, [
|
|
180
|
-
return
|
|
181
|
-
|
|
193
|
+
e.addEventListener("columnPinned", N), G = setTimeout(() => {
|
|
194
|
+
e.removeEventListener("columnPinned", N), P || f();
|
|
195
|
+
}, ce);
|
|
196
|
+
}, [e, V, E]), X = L((r) => {
|
|
197
|
+
A(r);
|
|
198
|
+
}, [A]), Z = L((r) => {
|
|
199
|
+
v || A(r), F(r);
|
|
200
|
+
}, [v, A]);
|
|
201
|
+
return H ? /* @__PURE__ */ U("div", { ref: z, className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ U(
|
|
202
|
+
te,
|
|
182
203
|
{
|
|
183
|
-
items:
|
|
184
|
-
onChange:
|
|
185
|
-
onSubmit:
|
|
186
|
-
enableApplyDiscard:
|
|
187
|
-
enableSearch:
|
|
188
|
-
enableSelectAll:
|
|
204
|
+
items: Y,
|
|
205
|
+
onChange: Z,
|
|
206
|
+
onSubmit: X,
|
|
207
|
+
enableApplyDiscard: v,
|
|
208
|
+
enableSearch: T,
|
|
209
|
+
enableSelectAll: h,
|
|
189
210
|
enableDragDrop: !0,
|
|
190
211
|
enableCollapse: !0,
|
|
191
|
-
enableGlobalCollapse:
|
|
192
|
-
selectionMode:
|
|
193
|
-
searchPlaceholder:
|
|
212
|
+
enableGlobalCollapse: M,
|
|
213
|
+
selectionMode: ne.CASCADE_DOWN,
|
|
214
|
+
searchPlaceholder: D("dataTable.searchColumnsPlaceholder"),
|
|
194
215
|
className: "h-full",
|
|
195
|
-
initialCollapsedItems:
|
|
216
|
+
initialCollapsedItems: W.current,
|
|
196
217
|
onCollapseChange: (r) => {
|
|
197
|
-
|
|
218
|
+
W.current = r;
|
|
198
219
|
}
|
|
199
220
|
},
|
|
200
|
-
|
|
201
|
-
) }) : /* @__PURE__ */
|
|
221
|
+
K ? "sync-a" : "sync-b"
|
|
222
|
+
) }) : /* @__PURE__ */ U("div", { className: "p-4 text-[13px] text-content-placeholder", children: D("dataTable.loadingColumns") });
|
|
202
223
|
};
|
|
203
224
|
export {
|
|
204
|
-
|
|
225
|
+
he as DataTableColumnList
|
|
205
226
|
};
|
|
@@ -2,16 +2,16 @@ import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
|
2
2
|
import * as l from "@radix-ui/react-popover";
|
|
3
3
|
import { Checkbox as C } from "../../checkbox.js";
|
|
4
4
|
import { ChevronRight as N, Checkmark as w } from "../../../../icons/index.js";
|
|
5
|
-
import { cn as
|
|
5
|
+
import { cn as P } from "../../../../lib/utils.js";
|
|
6
6
|
const j = ({
|
|
7
7
|
parentOption: o,
|
|
8
8
|
isMulti: i,
|
|
9
9
|
isReadOnly: c,
|
|
10
10
|
isSelected: f,
|
|
11
11
|
getIndeterminateState: x,
|
|
12
|
-
getSelectedCount:
|
|
13
|
-
handleSelect:
|
|
14
|
-
id:
|
|
12
|
+
getSelectedCount: v,
|
|
13
|
+
handleSelect: h,
|
|
14
|
+
id: S
|
|
15
15
|
}) => {
|
|
16
16
|
const d = "children" in o && Array.isArray(o.children) ? o.children : null;
|
|
17
17
|
if (!d) return null;
|
|
@@ -32,17 +32,17 @@ const j = ({
|
|
|
32
32
|
className: "select-submenu-container z-50 min-w-[180px] max-h-[300px] overflow-auto rounded-xl bg-canvas-elevated py-1 shadow-elevation-floating",
|
|
33
33
|
"data-component": "select-menu",
|
|
34
34
|
children: d.map((e) => {
|
|
35
|
-
const n = f(e), g = x(e), a = e.isDisabled, m =
|
|
35
|
+
const n = f(e), g = x(e), a = e.isDisabled, m = v(e), s = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, b = String(e.value || "");
|
|
36
36
|
return /* @__PURE__ */ r(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
|
-
className:
|
|
39
|
+
className: P(
|
|
40
40
|
"relative flex h-[35px] cursor-default select-none items-center justify-between gap-1.5 rounded-[8px] px-3",
|
|
41
41
|
a ? "cursor-not-allowed bg-canvas-readonly opacity-50" : c ? "cursor-default" : "cursor-pointer hover:bg-canvas-muted",
|
|
42
42
|
n && !a && !s ? "bg-brand-subtle text-content" : "text-content"
|
|
43
43
|
),
|
|
44
44
|
onClick: (k) => {
|
|
45
|
-
k.stopPropagation(), !a && !c && p &&
|
|
45
|
+
k.stopPropagation(), !a && !c && p && h(e);
|
|
46
46
|
},
|
|
47
47
|
"data-testid": `select-submenu-option-${u}-${b}`,
|
|
48
48
|
"data-state": n ? "checked" : "unchecked",
|
|
@@ -95,7 +95,7 @@ const j = ({
|
|
|
95
95
|
"div",
|
|
96
96
|
{
|
|
97
97
|
className: r(
|
|
98
|
-
"flex px-4 py-4 shrink-0 items-center justify-between bg-
|
|
98
|
+
"flex px-4 py-4 shrink-0 items-center justify-between bg-brand-tint border-b",
|
|
99
99
|
g === "bottom" && "rounded-t-lg",
|
|
100
100
|
t
|
|
101
101
|
),
|