@deepnoid/ui 0.0.94 → 0.0.96
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/{chunk-6YE26GOI.mjs → chunk-HAKQYVWB.mjs} +52 -23
- package/dist/{chunk-VG4644BG.mjs → chunk-PO3ADNA5.mjs} +6 -6
- package/dist/{chunk-DWROPKZW.mjs → chunk-QDDEQY63.mjs} +18 -10
- package/dist/{chunk-3DRIHQOM.mjs → chunk-ZNEEYSIK.mjs} +1 -1
- package/dist/components/dateTimePicker/dateTimePicker.mjs +3 -3
- package/dist/components/dateTimePicker/index.mjs +3 -3
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.mjs +1 -1
- package/dist/components/input/input.js +1 -1
- package/dist/components/input/input.mjs +1 -1
- package/dist/components/input/input.test.js +1 -1
- package/dist/components/input/input.test.mjs +1 -1
- package/dist/components/select/index.mjs +2 -2
- package/dist/components/select/select.mjs +2 -2
- package/dist/components/select/select.test.mjs +2 -2
- package/dist/components/table/index.js +74 -37
- package/dist/components/table/index.mjs +3 -3
- package/dist/components/table/table-body.d.mts +7 -4
- package/dist/components/table/table-body.d.ts +7 -4
- package/dist/components/table/table-body.js +18 -10
- package/dist/components/table/table-body.mjs +1 -1
- package/dist/components/table/table-head.d.mts +4 -4
- package/dist/components/table/table-head.d.ts +4 -4
- package/dist/components/table/table-head.js +6 -6
- package/dist/components/table/table-head.mjs +1 -1
- package/dist/components/table/table.d.mts +51 -7
- package/dist/components/table/table.d.ts +51 -7
- package/dist/components/table/table.js +74 -37
- package/dist/components/table/table.mjs +3 -3
- package/dist/components/table/table.test.js +74 -37
- package/dist/components/table/table.test.mjs +3 -3
- package/dist/index.js +76 -39
- package/dist/index.mjs +25 -25
- package/package.json +1 -1
- package/dist/{chunk-JN7EGKJL.mjs → chunk-2BCJZILI.mjs} +3 -3
- package/dist/{chunk-ON2OTH5K.mjs → chunk-I5SI4OCM.mjs} +3 -3
|
@@ -13,7 +13,9 @@ interface Props extends Omit<React__default.ComponentPropsWithRef<"table">, "ref
|
|
|
13
13
|
onRowAction?: (e: React__default.MouseEvent, params: TableRow) => void;
|
|
14
14
|
}
|
|
15
15
|
interface TableRef {
|
|
16
|
+
checkedRows: Set<number>;
|
|
16
17
|
selectedRows: Set<number>;
|
|
18
|
+
setCheckedRows: (rows: Set<number>) => void;
|
|
17
19
|
setSelectedRows: (rows: Set<number>) => void;
|
|
18
20
|
}
|
|
19
21
|
declare const Table: React__default.ForwardRefExoticComponent<Props & TableVariantProps & React__default.RefAttributes<TableRef>>;
|
|
@@ -65,7 +67,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
65
67
|
isSelected: {
|
|
66
68
|
true: {};
|
|
67
69
|
};
|
|
68
|
-
|
|
70
|
+
isMultiSelect: {
|
|
71
|
+
true: {};
|
|
72
|
+
};
|
|
73
|
+
isChecked: {
|
|
74
|
+
true: {};
|
|
75
|
+
};
|
|
76
|
+
isCheckedRow: {
|
|
69
77
|
true: {
|
|
70
78
|
tr: string;
|
|
71
79
|
};
|
|
@@ -151,7 +159,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
151
159
|
isSelected: {
|
|
152
160
|
true: {};
|
|
153
161
|
};
|
|
154
|
-
|
|
162
|
+
isMultiSelect: {
|
|
163
|
+
true: {};
|
|
164
|
+
};
|
|
165
|
+
isChecked: {
|
|
166
|
+
true: {};
|
|
167
|
+
};
|
|
168
|
+
isCheckedRow: {
|
|
155
169
|
true: {
|
|
156
170
|
tr: string;
|
|
157
171
|
};
|
|
@@ -224,7 +238,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
224
238
|
isSelected: {
|
|
225
239
|
true: {};
|
|
226
240
|
};
|
|
227
|
-
|
|
241
|
+
isMultiSelect: {
|
|
242
|
+
true: {};
|
|
243
|
+
};
|
|
244
|
+
isChecked: {
|
|
245
|
+
true: {};
|
|
246
|
+
};
|
|
247
|
+
isCheckedRow: {
|
|
228
248
|
true: {
|
|
229
249
|
tr: string;
|
|
230
250
|
};
|
|
@@ -297,7 +317,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
297
317
|
isSelected: {
|
|
298
318
|
true: {};
|
|
299
319
|
};
|
|
300
|
-
|
|
320
|
+
isMultiSelect: {
|
|
321
|
+
true: {};
|
|
322
|
+
};
|
|
323
|
+
isChecked: {
|
|
324
|
+
true: {};
|
|
325
|
+
};
|
|
326
|
+
isCheckedRow: {
|
|
301
327
|
true: {
|
|
302
328
|
tr: string;
|
|
303
329
|
};
|
|
@@ -383,7 +409,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
383
409
|
isSelected: {
|
|
384
410
|
true: {};
|
|
385
411
|
};
|
|
386
|
-
|
|
412
|
+
isMultiSelect: {
|
|
413
|
+
true: {};
|
|
414
|
+
};
|
|
415
|
+
isChecked: {
|
|
416
|
+
true: {};
|
|
417
|
+
};
|
|
418
|
+
isCheckedRow: {
|
|
387
419
|
true: {
|
|
388
420
|
tr: string;
|
|
389
421
|
};
|
|
@@ -469,7 +501,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
469
501
|
isSelected: {
|
|
470
502
|
true: {};
|
|
471
503
|
};
|
|
472
|
-
|
|
504
|
+
isMultiSelect: {
|
|
505
|
+
true: {};
|
|
506
|
+
};
|
|
507
|
+
isChecked: {
|
|
508
|
+
true: {};
|
|
509
|
+
};
|
|
510
|
+
isCheckedRow: {
|
|
473
511
|
true: {
|
|
474
512
|
tr: string;
|
|
475
513
|
};
|
|
@@ -542,7 +580,13 @@ declare const table: tailwind_variants.TVReturnType<{
|
|
|
542
580
|
isSelected: {
|
|
543
581
|
true: {};
|
|
544
582
|
};
|
|
545
|
-
|
|
583
|
+
isMultiSelect: {
|
|
584
|
+
true: {};
|
|
585
|
+
};
|
|
586
|
+
isChecked: {
|
|
587
|
+
true: {};
|
|
588
|
+
};
|
|
589
|
+
isCheckedRow: {
|
|
546
590
|
true: {
|
|
547
591
|
tr: string;
|
|
548
592
|
};
|
|
@@ -318,10 +318,10 @@ var TableHead = ({
|
|
|
318
318
|
size,
|
|
319
319
|
color,
|
|
320
320
|
isExpanded,
|
|
321
|
-
|
|
322
|
-
|
|
321
|
+
isChecked,
|
|
322
|
+
isCheckedAll,
|
|
323
323
|
classNames,
|
|
324
|
-
|
|
324
|
+
onCheckAll
|
|
325
325
|
}) => {
|
|
326
326
|
const getTheadProps = (0, import_react2.useCallback)(
|
|
327
327
|
() => ({
|
|
@@ -341,12 +341,12 @@ var TableHead = ({
|
|
|
341
341
|
}),
|
|
342
342
|
[classNames == null ? void 0 : classNames.th, slots]
|
|
343
343
|
);
|
|
344
|
-
const
|
|
344
|
+
const handleClickCheckAll = (e) => {
|
|
345
345
|
e.preventDefault();
|
|
346
|
-
|
|
346
|
+
onCheckAll(!isCheckedAll);
|
|
347
347
|
};
|
|
348
348
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
|
|
349
|
-
|
|
349
|
+
isChecked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isCheckedAll, classNames: { wrapper: "bg-background" } }) }),
|
|
350
350
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
|
|
351
351
|
columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
|
|
352
352
|
] }) });
|
|
@@ -3937,13 +3937,16 @@ var TableBody = ({
|
|
|
3937
3937
|
columns,
|
|
3938
3938
|
isExpanded,
|
|
3939
3939
|
isSelected,
|
|
3940
|
-
|
|
3940
|
+
isChecked,
|
|
3941
|
+
isCheckedRow,
|
|
3941
3942
|
selectedRows,
|
|
3943
|
+
checkedRows,
|
|
3942
3944
|
emptyContent,
|
|
3943
|
-
|
|
3945
|
+
onCheckedRow,
|
|
3946
|
+
onSelectedRow,
|
|
3944
3947
|
onRowAction
|
|
3945
3948
|
}) => {
|
|
3946
|
-
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (
|
|
3949
|
+
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isChecked ? 1 : 0);
|
|
3947
3950
|
const [expandedRows, setExpandedRows] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
|
|
3948
3951
|
(0, import_react4.useEffect)(() => {
|
|
3949
3952
|
setExpandedRows(/* @__PURE__ */ new Set());
|
|
@@ -3956,11 +3959,14 @@ var TableBody = ({
|
|
|
3956
3959
|
);
|
|
3957
3960
|
const getTrProps = (0, import_react4.useCallback)(
|
|
3958
3961
|
(index) => ({
|
|
3959
|
-
className: clsx(
|
|
3962
|
+
className: clsx(
|
|
3963
|
+
slots.tr({ class: [classNames == null ? void 0 : classNames.tr, (isSelected || isCheckedRow || isExpanded) && "cursor-pointer"] })
|
|
3964
|
+
),
|
|
3960
3965
|
"data-odd": index % 2 !== 0,
|
|
3961
|
-
"data-expanded": expandedRows.has(index)
|
|
3966
|
+
"data-expanded": expandedRows.has(index),
|
|
3967
|
+
"data-selected": selectedRows == null ? void 0 : selectedRows.has(index)
|
|
3962
3968
|
}),
|
|
3963
|
-
[classNames == null ? void 0 : classNames.tr, expandedRows, slots]
|
|
3969
|
+
[classNames == null ? void 0 : classNames.tr, expandedRows, isCheckedRow, isExpanded, isSelected, selectedRows, slots]
|
|
3964
3970
|
);
|
|
3965
3971
|
const getExpandedContentProps = (0, import_react4.useCallback)(
|
|
3966
3972
|
() => ({
|
|
@@ -4007,20 +4013,22 @@ var TableBody = ({
|
|
|
4007
4013
|
});
|
|
4008
4014
|
};
|
|
4009
4015
|
const handleRowClick = (index) => (e) => {
|
|
4016
|
+
var _a;
|
|
4010
4017
|
e.stopPropagation();
|
|
4011
4018
|
e.preventDefault();
|
|
4012
4019
|
if (isExpanded) onChangeExpandedRow(index);
|
|
4013
|
-
if (isSelected
|
|
4020
|
+
if (isSelected) onSelectedRow(index);
|
|
4021
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
4014
4022
|
const row = rows[index];
|
|
4015
|
-
if (row
|
|
4016
|
-
onRowAction == null ? void 0 :
|
|
4023
|
+
if (row) {
|
|
4024
|
+
(_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
|
|
4017
4025
|
}
|
|
4018
4026
|
};
|
|
4019
4027
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { ...getTbodyProps(), children: rows.length > 0 ? rows.map((row, rowIndex) => {
|
|
4020
4028
|
const keys = Object.keys(row);
|
|
4021
4029
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
|
|
4022
4030
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
4023
|
-
|
|
4031
|
+
isChecked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onCheckedRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size, checked: checkedRows.has(rowIndex) }) }),
|
|
4024
4032
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4025
4033
|
Icon_default,
|
|
4026
4034
|
{
|
|
@@ -4043,6 +4051,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
|
4043
4051
|
var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
4044
4052
|
const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
|
|
4045
4053
|
const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
|
|
4054
|
+
const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
4046
4055
|
const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
4047
4056
|
const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
|
|
4048
4057
|
const getBaseProps = (0, import_react6.useCallback)(
|
|
@@ -4059,21 +4068,41 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4059
4068
|
}),
|
|
4060
4069
|
[classNames == null ? void 0 : classNames.table, slots]
|
|
4061
4070
|
);
|
|
4062
|
-
const
|
|
4063
|
-
const
|
|
4064
|
-
|
|
4071
|
+
const handleCheckAll = (isChecked) => {
|
|
4072
|
+
const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
|
|
4073
|
+
setCheckedRows(newCheckedRows);
|
|
4074
|
+
};
|
|
4075
|
+
const handleCheckRow = (index) => {
|
|
4076
|
+
const newCheckedRows = new Set(checkedRows);
|
|
4077
|
+
if (newCheckedRows.has(index)) {
|
|
4078
|
+
newCheckedRows.delete(index);
|
|
4079
|
+
} else {
|
|
4080
|
+
newCheckedRows.add(index);
|
|
4081
|
+
}
|
|
4082
|
+
setCheckedRows(newCheckedRows);
|
|
4065
4083
|
};
|
|
4066
4084
|
const handleSelectRow = (index) => {
|
|
4067
4085
|
const newSelectedRows = new Set(selectedRows);
|
|
4068
|
-
if (
|
|
4069
|
-
newSelectedRows.
|
|
4086
|
+
if (originalProps.isMultiSelect) {
|
|
4087
|
+
if (newSelectedRows.has(index)) {
|
|
4088
|
+
newSelectedRows.delete(index);
|
|
4089
|
+
} else {
|
|
4090
|
+
newSelectedRows.add(index);
|
|
4091
|
+
}
|
|
4070
4092
|
} else {
|
|
4071
|
-
newSelectedRows.
|
|
4093
|
+
if (newSelectedRows.has(index)) {
|
|
4094
|
+
newSelectedRows.delete(index);
|
|
4095
|
+
} else {
|
|
4096
|
+
newSelectedRows.clear();
|
|
4097
|
+
newSelectedRows.add(index);
|
|
4098
|
+
}
|
|
4072
4099
|
}
|
|
4073
4100
|
setSelectedRows(newSelectedRows);
|
|
4074
4101
|
};
|
|
4075
4102
|
(0, import_react6.useImperativeHandle)(ref, () => ({
|
|
4103
|
+
checkedRows,
|
|
4076
4104
|
selectedRows,
|
|
4105
|
+
setCheckedRows,
|
|
4077
4106
|
setSelectedRows
|
|
4078
4107
|
}));
|
|
4079
4108
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
|
|
@@ -4085,10 +4114,10 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4085
4114
|
columns,
|
|
4086
4115
|
size: originalProps.size,
|
|
4087
4116
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
4088
|
-
|
|
4117
|
+
isChecked: originalProps.isChecked,
|
|
4089
4118
|
isExpanded: originalProps.isExpanded,
|
|
4090
|
-
|
|
4091
|
-
|
|
4119
|
+
onCheckAll: handleCheckAll,
|
|
4120
|
+
isCheckedAll: checkedRows.size === rows.length
|
|
4092
4121
|
}
|
|
4093
4122
|
),
|
|
4094
4123
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -4100,13 +4129,16 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4100
4129
|
size: originalProps.size,
|
|
4101
4130
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
4102
4131
|
isSelected: originalProps.isSelected,
|
|
4103
|
-
|
|
4132
|
+
isChecked: originalProps.isChecked,
|
|
4133
|
+
isCheckedRow: originalProps.isCheckedRow,
|
|
4104
4134
|
isExpanded: originalProps.isExpanded,
|
|
4105
4135
|
isLoading,
|
|
4106
4136
|
classNames,
|
|
4107
4137
|
emptyContent,
|
|
4108
4138
|
selectedRows,
|
|
4109
|
-
|
|
4139
|
+
checkedRows,
|
|
4140
|
+
onCheckedRow: handleCheckRow,
|
|
4141
|
+
onSelectedRow: handleSelectRow,
|
|
4110
4142
|
onRowAction
|
|
4111
4143
|
}
|
|
4112
4144
|
)
|
|
@@ -4123,7 +4155,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4123
4155
|
tr: ["group", "outline-none"],
|
|
4124
4156
|
th: [
|
|
4125
4157
|
"text-foreground",
|
|
4126
|
-
"text-center",
|
|
4158
|
+
"!text-center",
|
|
4127
4159
|
"align-middle",
|
|
4128
4160
|
"whitespace-nowrap",
|
|
4129
4161
|
"font-normal",
|
|
@@ -4142,7 +4174,6 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4142
4174
|
"[&>*]:z-1",
|
|
4143
4175
|
"[&>*]:relative",
|
|
4144
4176
|
"transition duration-200",
|
|
4145
|
-
"data-[selected=true]:before:opacity-100",
|
|
4146
4177
|
"group-data-[disabled=true]:text-default-300"
|
|
4147
4178
|
],
|
|
4148
4179
|
tfoot: "",
|
|
@@ -4208,7 +4239,13 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4208
4239
|
isSelected: {
|
|
4209
4240
|
true: {}
|
|
4210
4241
|
},
|
|
4211
|
-
|
|
4242
|
+
isMultiSelect: {
|
|
4243
|
+
true: {}
|
|
4244
|
+
},
|
|
4245
|
+
isChecked: {
|
|
4246
|
+
true: {}
|
|
4247
|
+
},
|
|
4248
|
+
isCheckedRow: {
|
|
4212
4249
|
true: {
|
|
4213
4250
|
tr: "cursor-pointer"
|
|
4214
4251
|
}
|
|
@@ -4240,7 +4277,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4240
4277
|
color: "primary",
|
|
4241
4278
|
variant: "solid",
|
|
4242
4279
|
size: "md",
|
|
4243
|
-
|
|
4280
|
+
isChecked: false,
|
|
4244
4281
|
isExpanded: false,
|
|
4245
4282
|
isCompact: false,
|
|
4246
4283
|
hideHeader: false,
|
|
@@ -4253,7 +4290,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4253
4290
|
color: "primary",
|
|
4254
4291
|
class: {
|
|
4255
4292
|
thead: "[&>tr]:bg-primary-light",
|
|
4256
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
4293
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
4257
4294
|
}
|
|
4258
4295
|
},
|
|
4259
4296
|
{
|
|
@@ -4261,7 +4298,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4261
4298
|
color: "secondary",
|
|
4262
4299
|
class: {
|
|
4263
4300
|
thead: "[&>tr]:bg-secondary-light",
|
|
4264
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
4301
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
4265
4302
|
}
|
|
4266
4303
|
},
|
|
4267
4304
|
{
|
|
@@ -4269,7 +4306,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4269
4306
|
color: "neutral",
|
|
4270
4307
|
class: {
|
|
4271
4308
|
thead: "[&>tr]:bg-trans-light",
|
|
4272
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
4309
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
4273
4310
|
}
|
|
4274
4311
|
},
|
|
4275
4312
|
{
|
|
@@ -4277,7 +4314,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4277
4314
|
color: "primary",
|
|
4278
4315
|
class: {
|
|
4279
4316
|
thead: "border-primary-light",
|
|
4280
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
4317
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
4281
4318
|
}
|
|
4282
4319
|
},
|
|
4283
4320
|
{
|
|
@@ -4285,7 +4322,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4285
4322
|
color: "secondary",
|
|
4286
4323
|
class: {
|
|
4287
4324
|
thead: "border-secondary-light",
|
|
4288
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
4325
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
4289
4326
|
}
|
|
4290
4327
|
},
|
|
4291
4328
|
{
|
|
@@ -4293,7 +4330,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4293
4330
|
color: "neutral",
|
|
4294
4331
|
class: {
|
|
4295
4332
|
thead: "border-trans-light",
|
|
4296
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
4333
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
4297
4334
|
}
|
|
4298
4335
|
},
|
|
4299
4336
|
{
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
table_default
|
|
4
|
-
} from "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
6
|
-
import "../../chunk-
|
|
4
|
+
} from "../../chunk-HAKQYVWB.mjs";
|
|
5
|
+
import "../../chunk-QDDEQY63.mjs";
|
|
6
|
+
import "../../chunk-PO3ADNA5.mjs";
|
|
7
7
|
import "../../chunk-QZ3LVYJW.mjs";
|
|
8
8
|
import "../../chunk-ANYPMQH4.mjs";
|
|
9
9
|
import "../../chunk-27Y6K5NK.mjs";
|
|
@@ -13155,10 +13155,10 @@ var TableHead = ({
|
|
|
13155
13155
|
size,
|
|
13156
13156
|
color,
|
|
13157
13157
|
isExpanded,
|
|
13158
|
-
|
|
13159
|
-
|
|
13158
|
+
isChecked,
|
|
13159
|
+
isCheckedAll,
|
|
13160
13160
|
classNames,
|
|
13161
|
-
|
|
13161
|
+
onCheckAll
|
|
13162
13162
|
}) => {
|
|
13163
13163
|
const getTheadProps = (0, import_react2.useCallback)(
|
|
13164
13164
|
() => ({
|
|
@@ -13178,12 +13178,12 @@ var TableHead = ({
|
|
|
13178
13178
|
}),
|
|
13179
13179
|
[classNames == null ? void 0 : classNames.th, slots]
|
|
13180
13180
|
);
|
|
13181
|
-
const
|
|
13181
|
+
const handleClickCheckAll = (e) => {
|
|
13182
13182
|
e.preventDefault();
|
|
13183
|
-
|
|
13183
|
+
onCheckAll(!isCheckedAll);
|
|
13184
13184
|
};
|
|
13185
13185
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
|
|
13186
|
-
|
|
13186
|
+
isChecked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isCheckedAll, classNames: { wrapper: "bg-background" } }) }),
|
|
13187
13187
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
|
|
13188
13188
|
columns2.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
|
|
13189
13189
|
] }) });
|
|
@@ -16774,13 +16774,16 @@ var TableBody = ({
|
|
|
16774
16774
|
columns: columns2,
|
|
16775
16775
|
isExpanded,
|
|
16776
16776
|
isSelected,
|
|
16777
|
-
|
|
16777
|
+
isChecked,
|
|
16778
|
+
isCheckedRow,
|
|
16778
16779
|
selectedRows,
|
|
16780
|
+
checkedRows,
|
|
16779
16781
|
emptyContent,
|
|
16780
|
-
|
|
16782
|
+
onCheckedRow,
|
|
16783
|
+
onSelectedRow,
|
|
16781
16784
|
onRowAction
|
|
16782
16785
|
}) => {
|
|
16783
|
-
const COL_SPAN_COUNT = columns2.length + (isExpanded ? 1 : 0) + (
|
|
16786
|
+
const COL_SPAN_COUNT = columns2.length + (isExpanded ? 1 : 0) + (isChecked ? 1 : 0);
|
|
16784
16787
|
const [expandedRows, setExpandedRows] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
|
|
16785
16788
|
(0, import_react4.useEffect)(() => {
|
|
16786
16789
|
setExpandedRows(/* @__PURE__ */ new Set());
|
|
@@ -16793,11 +16796,14 @@ var TableBody = ({
|
|
|
16793
16796
|
);
|
|
16794
16797
|
const getTrProps = (0, import_react4.useCallback)(
|
|
16795
16798
|
(index) => ({
|
|
16796
|
-
className: clsx(
|
|
16799
|
+
className: clsx(
|
|
16800
|
+
slots.tr({ class: [classNames == null ? void 0 : classNames.tr, (isSelected || isCheckedRow || isExpanded) && "cursor-pointer"] })
|
|
16801
|
+
),
|
|
16797
16802
|
"data-odd": index % 2 !== 0,
|
|
16798
|
-
"data-expanded": expandedRows.has(index)
|
|
16803
|
+
"data-expanded": expandedRows.has(index),
|
|
16804
|
+
"data-selected": selectedRows == null ? void 0 : selectedRows.has(index)
|
|
16799
16805
|
}),
|
|
16800
|
-
[classNames == null ? void 0 : classNames.tr, expandedRows, slots]
|
|
16806
|
+
[classNames == null ? void 0 : classNames.tr, expandedRows, isCheckedRow, isExpanded, isSelected, selectedRows, slots]
|
|
16801
16807
|
);
|
|
16802
16808
|
const getExpandedContentProps = (0, import_react4.useCallback)(
|
|
16803
16809
|
() => ({
|
|
@@ -16844,20 +16850,22 @@ var TableBody = ({
|
|
|
16844
16850
|
});
|
|
16845
16851
|
};
|
|
16846
16852
|
const handleRowClick = (index) => (e) => {
|
|
16853
|
+
var _a2;
|
|
16847
16854
|
e.stopPropagation();
|
|
16848
16855
|
e.preventDefault();
|
|
16849
16856
|
if (isExpanded) onChangeExpandedRow(index);
|
|
16850
|
-
if (isSelected
|
|
16857
|
+
if (isSelected) onSelectedRow(index);
|
|
16858
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
16851
16859
|
const row = rows2[index];
|
|
16852
|
-
if (row
|
|
16853
|
-
onRowAction == null ? void 0 :
|
|
16860
|
+
if (row) {
|
|
16861
|
+
(_a2 = row.onRowAction) == null ? void 0 : _a2.call(row, e, row);
|
|
16854
16862
|
}
|
|
16855
16863
|
};
|
|
16856
16864
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { ...getTbodyProps(), children: rows2.length > 0 ? rows2.map((row, rowIndex) => {
|
|
16857
16865
|
const keys = Object.keys(row);
|
|
16858
16866
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
|
|
16859
16867
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
16860
|
-
|
|
16868
|
+
isChecked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onCheckedRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size, checked: checkedRows.has(rowIndex) }) }),
|
|
16861
16869
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
16862
16870
|
Icon_default,
|
|
16863
16871
|
{
|
|
@@ -16880,6 +16888,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
|
16880
16888
|
var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
16881
16889
|
const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
|
|
16882
16890
|
const { classNames, rows: rows2, columns: columns2, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
|
|
16891
|
+
const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
16883
16892
|
const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
16884
16893
|
const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
|
|
16885
16894
|
const getBaseProps = (0, import_react6.useCallback)(
|
|
@@ -16896,21 +16905,41 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
16896
16905
|
}),
|
|
16897
16906
|
[classNames == null ? void 0 : classNames.table, slots]
|
|
16898
16907
|
);
|
|
16899
|
-
const
|
|
16900
|
-
const
|
|
16901
|
-
|
|
16908
|
+
const handleCheckAll = (isChecked) => {
|
|
16909
|
+
const newCheckedRows = isChecked ? new Set(rows2.map((_, index) => index)) : /* @__PURE__ */ new Set();
|
|
16910
|
+
setCheckedRows(newCheckedRows);
|
|
16911
|
+
};
|
|
16912
|
+
const handleCheckRow = (index) => {
|
|
16913
|
+
const newCheckedRows = new Set(checkedRows);
|
|
16914
|
+
if (newCheckedRows.has(index)) {
|
|
16915
|
+
newCheckedRows.delete(index);
|
|
16916
|
+
} else {
|
|
16917
|
+
newCheckedRows.add(index);
|
|
16918
|
+
}
|
|
16919
|
+
setCheckedRows(newCheckedRows);
|
|
16902
16920
|
};
|
|
16903
16921
|
const handleSelectRow = (index) => {
|
|
16904
16922
|
const newSelectedRows = new Set(selectedRows);
|
|
16905
|
-
if (
|
|
16906
|
-
newSelectedRows.
|
|
16923
|
+
if (originalProps.isMultiSelect) {
|
|
16924
|
+
if (newSelectedRows.has(index)) {
|
|
16925
|
+
newSelectedRows.delete(index);
|
|
16926
|
+
} else {
|
|
16927
|
+
newSelectedRows.add(index);
|
|
16928
|
+
}
|
|
16907
16929
|
} else {
|
|
16908
|
-
newSelectedRows.
|
|
16930
|
+
if (newSelectedRows.has(index)) {
|
|
16931
|
+
newSelectedRows.delete(index);
|
|
16932
|
+
} else {
|
|
16933
|
+
newSelectedRows.clear();
|
|
16934
|
+
newSelectedRows.add(index);
|
|
16935
|
+
}
|
|
16909
16936
|
}
|
|
16910
16937
|
setSelectedRows(newSelectedRows);
|
|
16911
16938
|
};
|
|
16912
16939
|
(0, import_react6.useImperativeHandle)(ref, () => ({
|
|
16940
|
+
checkedRows,
|
|
16913
16941
|
selectedRows,
|
|
16942
|
+
setCheckedRows,
|
|
16914
16943
|
setSelectedRows
|
|
16915
16944
|
}));
|
|
16916
16945
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
|
|
@@ -16922,10 +16951,10 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
16922
16951
|
columns: columns2,
|
|
16923
16952
|
size: originalProps.size,
|
|
16924
16953
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
16925
|
-
|
|
16954
|
+
isChecked: originalProps.isChecked,
|
|
16926
16955
|
isExpanded: originalProps.isExpanded,
|
|
16927
|
-
|
|
16928
|
-
|
|
16956
|
+
onCheckAll: handleCheckAll,
|
|
16957
|
+
isCheckedAll: checkedRows.size === rows2.length
|
|
16929
16958
|
}
|
|
16930
16959
|
),
|
|
16931
16960
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -16937,13 +16966,16 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
16937
16966
|
size: originalProps.size,
|
|
16938
16967
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
16939
16968
|
isSelected: originalProps.isSelected,
|
|
16940
|
-
|
|
16969
|
+
isChecked: originalProps.isChecked,
|
|
16970
|
+
isCheckedRow: originalProps.isCheckedRow,
|
|
16941
16971
|
isExpanded: originalProps.isExpanded,
|
|
16942
16972
|
isLoading,
|
|
16943
16973
|
classNames,
|
|
16944
16974
|
emptyContent,
|
|
16945
16975
|
selectedRows,
|
|
16946
|
-
|
|
16976
|
+
checkedRows,
|
|
16977
|
+
onCheckedRow: handleCheckRow,
|
|
16978
|
+
onSelectedRow: handleSelectRow,
|
|
16947
16979
|
onRowAction
|
|
16948
16980
|
}
|
|
16949
16981
|
)
|
|
@@ -16960,7 +16992,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
16960
16992
|
tr: ["group", "outline-none"],
|
|
16961
16993
|
th: [
|
|
16962
16994
|
"text-foreground",
|
|
16963
|
-
"text-center",
|
|
16995
|
+
"!text-center",
|
|
16964
16996
|
"align-middle",
|
|
16965
16997
|
"whitespace-nowrap",
|
|
16966
16998
|
"font-normal",
|
|
@@ -16979,7 +17011,6 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
16979
17011
|
"[&>*]:z-1",
|
|
16980
17012
|
"[&>*]:relative",
|
|
16981
17013
|
"transition duration-200",
|
|
16982
|
-
"data-[selected=true]:before:opacity-100",
|
|
16983
17014
|
"group-data-[disabled=true]:text-default-300"
|
|
16984
17015
|
],
|
|
16985
17016
|
tfoot: "",
|
|
@@ -17045,7 +17076,13 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17045
17076
|
isSelected: {
|
|
17046
17077
|
true: {}
|
|
17047
17078
|
},
|
|
17048
|
-
|
|
17079
|
+
isMultiSelect: {
|
|
17080
|
+
true: {}
|
|
17081
|
+
},
|
|
17082
|
+
isChecked: {
|
|
17083
|
+
true: {}
|
|
17084
|
+
},
|
|
17085
|
+
isCheckedRow: {
|
|
17049
17086
|
true: {
|
|
17050
17087
|
tr: "cursor-pointer"
|
|
17051
17088
|
}
|
|
@@ -17077,7 +17114,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17077
17114
|
color: "primary",
|
|
17078
17115
|
variant: "solid",
|
|
17079
17116
|
size: "md",
|
|
17080
|
-
|
|
17117
|
+
isChecked: false,
|
|
17081
17118
|
isExpanded: false,
|
|
17082
17119
|
isCompact: false,
|
|
17083
17120
|
hideHeader: false,
|
|
@@ -17090,7 +17127,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17090
17127
|
color: "primary",
|
|
17091
17128
|
class: {
|
|
17092
17129
|
thead: "[&>tr]:bg-primary-light",
|
|
17093
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
17130
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
17094
17131
|
}
|
|
17095
17132
|
},
|
|
17096
17133
|
{
|
|
@@ -17098,7 +17135,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17098
17135
|
color: "secondary",
|
|
17099
17136
|
class: {
|
|
17100
17137
|
thead: "[&>tr]:bg-secondary-light",
|
|
17101
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
17138
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
17102
17139
|
}
|
|
17103
17140
|
},
|
|
17104
17141
|
{
|
|
@@ -17106,7 +17143,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17106
17143
|
color: "neutral",
|
|
17107
17144
|
class: {
|
|
17108
17145
|
thead: "[&>tr]:bg-trans-light",
|
|
17109
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
17146
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
17110
17147
|
}
|
|
17111
17148
|
},
|
|
17112
17149
|
{
|
|
@@ -17114,7 +17151,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17114
17151
|
color: "primary",
|
|
17115
17152
|
class: {
|
|
17116
17153
|
thead: "border-primary-light",
|
|
17117
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
17154
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
17118
17155
|
}
|
|
17119
17156
|
},
|
|
17120
17157
|
{
|
|
@@ -17122,7 +17159,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17122
17159
|
color: "secondary",
|
|
17123
17160
|
class: {
|
|
17124
17161
|
thead: "border-secondary-light",
|
|
17125
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
17162
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
17126
17163
|
}
|
|
17127
17164
|
},
|
|
17128
17165
|
{
|
|
@@ -17130,7 +17167,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
17130
17167
|
color: "neutral",
|
|
17131
17168
|
class: {
|
|
17132
17169
|
thead: "border-trans-light",
|
|
17133
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
17170
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
17134
17171
|
}
|
|
17135
17172
|
},
|
|
17136
17173
|
{
|