@caspeco/casper-ui-library 8.4.0 → 8.4.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAiB/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CAkD3F,CAAC;AAiSF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}
|
|
@@ -1,236 +1,222 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Tr as
|
|
3
|
-
import { flexRender as
|
|
4
|
-
import { memo as
|
|
5
|
-
import { closestCenter as
|
|
6
|
-
import { SortableKeyboardPlugin as
|
|
7
|
-
import { useSortable as
|
|
8
|
-
import { useTableContext as
|
|
9
|
-
import { TableHeaderDropdown as
|
|
10
|
-
import { translations as
|
|
11
|
-
import { Flex as
|
|
12
|
-
import { Box as
|
|
13
|
-
import { Divider as
|
|
14
|
-
import { Menu as
|
|
15
|
-
import { MenuButton as
|
|
16
|
-
import { Icons as
|
|
17
|
-
import { MenuList as
|
|
18
|
-
import { Checkbox as
|
|
19
|
-
import { MenuItem as
|
|
20
|
-
import { IconButton as
|
|
21
|
-
import { Button as
|
|
22
|
-
import { ThemeColorVariable as
|
|
23
|
-
const
|
|
24
|
-
headerGroup:
|
|
25
|
-
hideTableHeaderDropdown:
|
|
26
|
-
portalContainerRef:
|
|
1
|
+
import { jsx as e, Fragment as b, jsxs as C } from "react/jsx-runtime";
|
|
2
|
+
import { Tr as T, Th as I, useMediaQuery as M, Portal as D } from "@chakra-ui/react";
|
|
3
|
+
import { flexRender as A } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
|
|
4
|
+
import { memo as H, useRef as P, useCallback as k, forwardRef as V, useMemo as z } from "react";
|
|
5
|
+
import { closestCenter as N } from "../../node_modules/@dnd-kit/collision/dist/index.js";
|
|
6
|
+
import { SortableKeyboardPlugin as L } from "../../node_modules/@dnd-kit/dom/sortable.js";
|
|
7
|
+
import { useSortable as O } from "../../node_modules/@dnd-kit/react/sortable.js";
|
|
8
|
+
import { useTableContext as f } from "./table-context.js";
|
|
9
|
+
import { TableHeaderDropdown as F } from "./table-header-dropdown.js";
|
|
10
|
+
import { translations as B } from "./translations.js";
|
|
11
|
+
import { Flex as w } from "../flex/flex.js";
|
|
12
|
+
import { Box as p } from "../box/box.js";
|
|
13
|
+
import { Divider as $ } from "../divider/divider.js";
|
|
14
|
+
import { Menu as j } from "../menu/menu.js";
|
|
15
|
+
import { MenuButton as W } from "../menu/menu-button.js";
|
|
16
|
+
import { Icons as v } from "../icon/types.js";
|
|
17
|
+
import { MenuList as E } from "../menu/menu-list.js";
|
|
18
|
+
import { Checkbox as K } from "../checkbox/checkbox.js";
|
|
19
|
+
import { MenuItem as Q } from "../menu/menu-item.js";
|
|
20
|
+
import { IconButton as X } from "../icon-button/icon-button.js";
|
|
21
|
+
import { Button as q } from "../button/button.js";
|
|
22
|
+
import { ThemeColorVariable as m, ThemeSpaceVariable as h, ThemeFontSizeVariable as G, ThemeFontVariable as J } from "../../theme/theme-types.js";
|
|
23
|
+
const U = ({
|
|
24
|
+
headerGroup: o,
|
|
25
|
+
hideTableHeaderDropdown: n,
|
|
26
|
+
portalContainerRef: a
|
|
27
27
|
}) => {
|
|
28
|
-
const
|
|
29
|
-
return /* @__PURE__ */
|
|
30
|
-
|
|
28
|
+
const r = f(), s = !!r.getRowActions, c = (r.selectedRowIds?.length ?? 0) > 0 && (r.selectionActions?.length ?? 0) > 0;
|
|
29
|
+
return /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(T, { children: c ? /* @__PURE__ */ e(
|
|
30
|
+
I,
|
|
31
31
|
{
|
|
32
|
-
colSpan:
|
|
32
|
+
colSpan: o.headers.length,
|
|
33
33
|
sx: {
|
|
34
34
|
cursor: "default",
|
|
35
35
|
"& div:hover": {
|
|
36
36
|
backgroundColor: "transparent !important"
|
|
37
37
|
},
|
|
38
38
|
"div span": {
|
|
39
|
-
color:
|
|
39
|
+
color: m.OnBackground
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
zIndex: 1,
|
|
43
43
|
style: {
|
|
44
|
-
borderBottom: `1px solid ${
|
|
45
|
-
paddingLeft:
|
|
44
|
+
borderBottom: `1px solid ${m.OnBackgroundBorder}`,
|
|
45
|
+
paddingLeft: s ? "24px" : void 0
|
|
46
46
|
},
|
|
47
|
-
children: /* @__PURE__ */
|
|
47
|
+
children: /* @__PURE__ */ e(y, { showSelectAll: !0, children: /* @__PURE__ */ e(ee, {}) })
|
|
48
48
|
}
|
|
49
|
-
) : /* @__PURE__ */
|
|
50
|
-
|
|
49
|
+
) : /* @__PURE__ */ e(b, { children: o.headers.map((l, t) => /* @__PURE__ */ e(
|
|
50
|
+
Y,
|
|
51
51
|
{
|
|
52
|
-
header:
|
|
53
|
-
hideTableHeaderDropdown:
|
|
54
|
-
applyActionMenuPadding:
|
|
55
|
-
portalContainerRef:
|
|
56
|
-
isFirstColumn: !
|
|
57
|
-
enableColumnReorder:
|
|
52
|
+
header: l,
|
|
53
|
+
hideTableHeaderDropdown: n,
|
|
54
|
+
applyActionMenuPadding: s,
|
|
55
|
+
portalContainerRef: a,
|
|
56
|
+
isFirstColumn: !l.isPlaceholder && t === 0,
|
|
57
|
+
enableColumnReorder: r.enableColumnReorder
|
|
58
58
|
},
|
|
59
|
-
|
|
60
|
-
)) }) },
|
|
61
|
-
},
|
|
62
|
-
header:
|
|
63
|
-
hideTableHeaderDropdown:
|
|
64
|
-
applyActionMenuPadding:
|
|
65
|
-
portalContainerRef:
|
|
66
|
-
isFirstColumn:
|
|
59
|
+
l.id
|
|
60
|
+
)) }) }, o.id) });
|
|
61
|
+
}, Y = ({
|
|
62
|
+
header: o,
|
|
63
|
+
hideTableHeaderDropdown: n,
|
|
64
|
+
applyActionMenuPadding: a,
|
|
65
|
+
portalContainerRef: r,
|
|
66
|
+
isFirstColumn: s = !1,
|
|
67
67
|
enableColumnReorder: c = !1
|
|
68
68
|
}) => {
|
|
69
|
-
const
|
|
70
|
-
const
|
|
69
|
+
const l = P(null), t = f(), { column: i } = o, g = k((u) => {
|
|
70
|
+
const S = u.getIsPinned(), x = u.getSize();
|
|
71
71
|
return {
|
|
72
|
-
position:
|
|
73
|
-
left:
|
|
74
|
-
backgroundColor:
|
|
75
|
-
zIndex:
|
|
76
|
-
width:
|
|
77
|
-
maxWidth:
|
|
72
|
+
position: S ? "sticky" : "relative",
|
|
73
|
+
left: S ? `${u.getStart("left")}px` : void 0,
|
|
74
|
+
backgroundColor: S ? m.Background : void 0,
|
|
75
|
+
zIndex: S ? 1 : 0,
|
|
76
|
+
width: x,
|
|
77
|
+
maxWidth: x
|
|
78
78
|
};
|
|
79
|
-
}, [])
|
|
80
|
-
|
|
81
|
-
const d = r.current;
|
|
82
|
-
if (!d) return;
|
|
83
|
-
const h = l.id, p = (f) => {
|
|
84
|
-
f > 0 && e.table.getState().columnSizing[h] !== f && e.table.setColumnSizing((w) => ({ ...w, [h]: f }));
|
|
85
|
-
}, v = new ResizeObserver((f) => {
|
|
86
|
-
const w = f[0];
|
|
87
|
-
if (!w) return;
|
|
88
|
-
const D = w.borderBoxSize?.[0]?.inlineSize ?? d.getBoundingClientRect().width;
|
|
89
|
-
p(D);
|
|
90
|
-
});
|
|
91
|
-
return v.observe(d), p(d.getBoundingClientRect().width), () => v.disconnect();
|
|
92
|
-
}, []);
|
|
93
|
-
const m = /* @__PURE__ */ t(z, { showSelectAll: e.canSelectRows && a, children: /* @__PURE__ */ t(I, { children: o ? /* @__PURE__ */ t(b, { paddingLeft: S.Small, children: V(n.column.columnDef.header, n.getContext()) }) : /* @__PURE__ */ t(
|
|
94
|
-
K,
|
|
79
|
+
}, []), d = /* @__PURE__ */ e(y, { showSelectAll: t.canSelectRows && s, children: /* @__PURE__ */ e(b, { children: n ? /* @__PURE__ */ e(p, { paddingLeft: h.Small, children: A(o.column.columnDef.header, o.getContext()) }) : /* @__PURE__ */ e(
|
|
80
|
+
F,
|
|
95
81
|
{
|
|
96
|
-
header:
|
|
97
|
-
breakingContentState:
|
|
98
|
-
columnVisibility:
|
|
99
|
-
headerGroup:
|
|
100
|
-
localeString:
|
|
101
|
-
setBreakingContentState:
|
|
102
|
-
setSorting:
|
|
103
|
-
sorting:
|
|
104
|
-
onBreakingContentChange:
|
|
105
|
-
portalContainerRef:
|
|
82
|
+
header: o,
|
|
83
|
+
breakingContentState: t.breakingContentState,
|
|
84
|
+
columnVisibility: t.columnVisibility,
|
|
85
|
+
headerGroup: t.table.getHeaderGroups(),
|
|
86
|
+
localeString: t.localeString,
|
|
87
|
+
setBreakingContentState: t.setBreakingContentState,
|
|
88
|
+
setSorting: t.setSorting,
|
|
89
|
+
sorting: t.sorting,
|
|
90
|
+
onBreakingContentChange: t.onBreakingContentChange,
|
|
91
|
+
portalContainerRef: r
|
|
106
92
|
}
|
|
107
93
|
) }) });
|
|
108
|
-
return c ? /* @__PURE__ */
|
|
109
|
-
|
|
94
|
+
return c ? /* @__PURE__ */ e(
|
|
95
|
+
Z,
|
|
110
96
|
{
|
|
111
|
-
ref:
|
|
112
|
-
columnId:
|
|
113
|
-
columnIndex:
|
|
114
|
-
disableColumnReorder:
|
|
115
|
-
isNumeric:
|
|
116
|
-
zIndex:
|
|
97
|
+
ref: l,
|
|
98
|
+
columnId: i.id,
|
|
99
|
+
columnIndex: i.getIndex(),
|
|
100
|
+
disableColumnReorder: i.columnDef.meta?.disableColumnReorder,
|
|
101
|
+
isNumeric: i.columnDef.meta?.isNumeric,
|
|
102
|
+
zIndex: i.getIsPinned() ? 2 : 1,
|
|
117
103
|
style: {
|
|
118
|
-
...g(
|
|
119
|
-
borderBottom: `1px solid ${
|
|
120
|
-
paddingLeft:
|
|
104
|
+
...g(i),
|
|
105
|
+
borderBottom: `1px solid ${m.OnBackgroundBorder}`,
|
|
106
|
+
paddingLeft: s && a ? "24px" : void 0
|
|
121
107
|
},
|
|
122
|
-
children:
|
|
108
|
+
children: d
|
|
123
109
|
}
|
|
124
|
-
) : /* @__PURE__ */
|
|
125
|
-
|
|
110
|
+
) : /* @__PURE__ */ e(
|
|
111
|
+
I,
|
|
126
112
|
{
|
|
127
|
-
ref:
|
|
113
|
+
ref: l,
|
|
128
114
|
className: "tableHeaderCell",
|
|
129
|
-
isNumeric:
|
|
130
|
-
zIndex:
|
|
115
|
+
isNumeric: i.columnDef.meta?.isNumeric,
|
|
116
|
+
zIndex: i.getIsPinned() ? 2 : 1,
|
|
131
117
|
style: {
|
|
132
|
-
...g(
|
|
133
|
-
borderBottom: `1px solid ${
|
|
134
|
-
paddingLeft:
|
|
118
|
+
...g(i),
|
|
119
|
+
borderBottom: `1px solid ${m.OnBackgroundBorder}`,
|
|
120
|
+
paddingLeft: s && a ? "24px" : void 0
|
|
135
121
|
},
|
|
136
|
-
children:
|
|
122
|
+
children: d
|
|
137
123
|
}
|
|
138
124
|
);
|
|
139
|
-
},
|
|
140
|
-
const { ref:
|
|
141
|
-
id:
|
|
142
|
-
index:
|
|
143
|
-
disabled:
|
|
144
|
-
collisionDetector:
|
|
145
|
-
plugins: [
|
|
125
|
+
}, Z = V(({ columnId: o, columnIndex: n, isNumeric: a, disableColumnReorder: r, zIndex: s, style: c, children: l }, t) => {
|
|
126
|
+
const { ref: i, isDragging: g, isDropTarget: d } = O({
|
|
127
|
+
id: o,
|
|
128
|
+
index: n,
|
|
129
|
+
disabled: r,
|
|
130
|
+
collisionDetector: N,
|
|
131
|
+
plugins: [L]
|
|
146
132
|
});
|
|
147
|
-
return /* @__PURE__ */
|
|
148
|
-
|
|
133
|
+
return /* @__PURE__ */ e(
|
|
134
|
+
I,
|
|
149
135
|
{
|
|
150
|
-
ref: (
|
|
151
|
-
|
|
136
|
+
ref: (u) => {
|
|
137
|
+
i(u), typeof t == "function" ? t(u) : t && (t.current = u);
|
|
152
138
|
},
|
|
153
139
|
className: "tableHeaderCell",
|
|
154
|
-
isNumeric:
|
|
155
|
-
zIndex:
|
|
140
|
+
isNumeric: a,
|
|
141
|
+
zIndex: s,
|
|
156
142
|
style: {
|
|
157
143
|
...c,
|
|
158
144
|
cursor: g ? "grabbing" : "pointer",
|
|
159
145
|
opacity: g ? 0.5 : 1,
|
|
160
|
-
backgroundColor:
|
|
146
|
+
backgroundColor: d ? m.Background : void 0
|
|
161
147
|
},
|
|
162
|
-
children:
|
|
148
|
+
children: l
|
|
163
149
|
}
|
|
164
150
|
);
|
|
165
|
-
}),
|
|
166
|
-
/* @__PURE__ */
|
|
167
|
-
|
|
168
|
-
] }) : /* @__PURE__ */
|
|
169
|
-
const
|
|
170
|
-
(
|
|
171
|
-
const c =
|
|
172
|
-
c ?
|
|
151
|
+
}), y = ({ showSelectAll: o, children: n }) => o ? /* @__PURE__ */ C(w, { w: "100%", align: "center", children: [
|
|
152
|
+
/* @__PURE__ */ e(p, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(_, {}) }),
|
|
153
|
+
n
|
|
154
|
+
] }) : /* @__PURE__ */ e(b, { children: n }), _ = () => {
|
|
155
|
+
const o = f(), n = k(
|
|
156
|
+
(s) => {
|
|
157
|
+
const c = s.target.checked, l = o.getSelectableRowIds();
|
|
158
|
+
c ? o.setSelectedRowIds((t) => [.../* @__PURE__ */ new Set([...t, ...l])]) : o.setSelectedRowIds((t) => t.filter((i) => !l.includes(i)));
|
|
173
159
|
},
|
|
174
|
-
[
|
|
175
|
-
), { allIsSelected:
|
|
176
|
-
const c =
|
|
160
|
+
[o]
|
|
161
|
+
), { allIsSelected: a, shouldShowIndeterminateState: r } = z(() => {
|
|
162
|
+
const c = o.table.getRowModel().flatRows, l = new Set(o.selectedRowIds), t = o.getSelectableRowIds(), i = t.length > 0 && t.every((d) => l.has(d)), g = c.some((d) => l.has(d.id));
|
|
177
163
|
return {
|
|
178
|
-
allIsSelected:
|
|
179
|
-
shouldShowIndeterminateState: g && !
|
|
164
|
+
allIsSelected: i,
|
|
165
|
+
shouldShowIndeterminateState: g && !i
|
|
180
166
|
};
|
|
181
|
-
}, [
|
|
182
|
-
return /* @__PURE__ */
|
|
183
|
-
|
|
167
|
+
}, [o]);
|
|
168
|
+
return /* @__PURE__ */ e(
|
|
169
|
+
K,
|
|
184
170
|
{
|
|
185
|
-
isChecked:
|
|
186
|
-
isIndeterminate:
|
|
187
|
-
onChange:
|
|
171
|
+
isChecked: a,
|
|
172
|
+
isIndeterminate: r,
|
|
173
|
+
onChange: n
|
|
188
174
|
}
|
|
189
175
|
);
|
|
190
|
-
},
|
|
191
|
-
const { localeString:
|
|
192
|
-
return /* @__PURE__ */
|
|
193
|
-
|
|
176
|
+
}, ee = () => {
|
|
177
|
+
const { localeString: o, selectedRowIds: n = [], selectionActions: a = [] } = f(), r = B[o], [s] = M("(min-width: 48em)"), c = a.length > 3 || !s, l = n.length === 1 ? r.selectedSingular.replace("{count}", "1") : r.selected.replace("{count}", n.length.toString());
|
|
178
|
+
return /* @__PURE__ */ C(
|
|
179
|
+
w,
|
|
194
180
|
{
|
|
195
|
-
gap:
|
|
181
|
+
gap: h.Medium,
|
|
196
182
|
align: "center",
|
|
197
183
|
alignContent: "center",
|
|
198
|
-
marginBottom:
|
|
184
|
+
marginBottom: h.XSmall,
|
|
199
185
|
children: [
|
|
200
|
-
/* @__PURE__ */
|
|
201
|
-
|
|
186
|
+
/* @__PURE__ */ e(
|
|
187
|
+
p,
|
|
202
188
|
{
|
|
203
|
-
pl:
|
|
204
|
-
color:
|
|
205
|
-
fontFamily:
|
|
206
|
-
fontSize:
|
|
189
|
+
pl: h.Small,
|
|
190
|
+
color: m.OnBackground,
|
|
191
|
+
fontFamily: J.Body,
|
|
192
|
+
fontSize: G.Medium,
|
|
207
193
|
whiteSpace: "nowrap",
|
|
208
194
|
style: { fontVariantNumeric: "normal" },
|
|
209
|
-
children:
|
|
195
|
+
children: l
|
|
210
196
|
}
|
|
211
197
|
),
|
|
212
|
-
/* @__PURE__ */
|
|
213
|
-
/* @__PURE__ */
|
|
214
|
-
/* @__PURE__ */
|
|
215
|
-
/* @__PURE__ */
|
|
216
|
-
] }) :
|
|
198
|
+
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e($, { orientation: "vertical", height: "20px" }) }),
|
|
199
|
+
/* @__PURE__ */ e(w, { gap: h.Small, align: "center", children: c ? /* @__PURE__ */ C(j, { children: [
|
|
200
|
+
/* @__PURE__ */ e(W, { variant: "ghost", rightIcon: v.TreeViewCollapse, children: r.action }),
|
|
201
|
+
/* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(E, { children: a.map((t) => /* @__PURE__ */ e(R, { isMenuItem: !0, action: t }, t.name)) }) })
|
|
202
|
+
] }) : a.map((t) => /* @__PURE__ */ e(R, { isMenuItem: !1, action: t }, t.name)) })
|
|
217
203
|
]
|
|
218
204
|
}
|
|
219
205
|
);
|
|
220
|
-
},
|
|
221
|
-
const { selectedRowIds:
|
|
222
|
-
|
|
223
|
-
}, [
|
|
224
|
-
return
|
|
225
|
-
|
|
206
|
+
}, R = ({ isMenuItem: o, action: n }) => {
|
|
207
|
+
const { selectedRowIds: a, localeString: r } = f(), s = B[r], c = k(() => {
|
|
208
|
+
n.onClick(a || []);
|
|
209
|
+
}, [n, a]);
|
|
210
|
+
return o ? /* @__PURE__ */ e(Q, { onClick: c, children: n.variant === "delete" ? /* @__PURE__ */ e(p, { as: "span", color: m.Error, children: n.name }) : n.name }) : n.variant === "delete" ? /* @__PURE__ */ e(
|
|
211
|
+
X,
|
|
226
212
|
{
|
|
227
213
|
onClick: c,
|
|
228
|
-
icon:
|
|
229
|
-
"aria-label":
|
|
214
|
+
icon: v.Delete,
|
|
215
|
+
"aria-label": s.deleteSelectedRows,
|
|
230
216
|
variant: "ghost"
|
|
231
217
|
}
|
|
232
|
-
) : /* @__PURE__ */
|
|
233
|
-
},
|
|
218
|
+
) : /* @__PURE__ */ e(q, { onClick: c, variant: "ghost", children: n.name });
|
|
219
|
+
}, xe = H(U);
|
|
234
220
|
export {
|
|
235
|
-
|
|
221
|
+
xe as TableHeaderRow
|
|
236
222
|
};
|