@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
|
@@ -320,10 +320,10 @@ var TableHead = ({
|
|
|
320
320
|
size,
|
|
321
321
|
color,
|
|
322
322
|
isExpanded,
|
|
323
|
-
|
|
324
|
-
|
|
323
|
+
isChecked,
|
|
324
|
+
isCheckedAll,
|
|
325
325
|
classNames,
|
|
326
|
-
|
|
326
|
+
onCheckAll
|
|
327
327
|
}) => {
|
|
328
328
|
const getTheadProps = (0, import_react2.useCallback)(
|
|
329
329
|
() => ({
|
|
@@ -343,12 +343,12 @@ var TableHead = ({
|
|
|
343
343
|
}),
|
|
344
344
|
[classNames == null ? void 0 : classNames.th, slots]
|
|
345
345
|
);
|
|
346
|
-
const
|
|
346
|
+
const handleClickCheckAll = (e) => {
|
|
347
347
|
e.preventDefault();
|
|
348
|
-
|
|
348
|
+
onCheckAll(!isCheckedAll);
|
|
349
349
|
};
|
|
350
350
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
|
|
351
|
-
|
|
351
|
+
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" } }) }),
|
|
352
352
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
|
|
353
353
|
columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
|
|
354
354
|
] }) });
|
|
@@ -3939,13 +3939,16 @@ var TableBody = ({
|
|
|
3939
3939
|
columns,
|
|
3940
3940
|
isExpanded,
|
|
3941
3941
|
isSelected,
|
|
3942
|
-
|
|
3942
|
+
isChecked,
|
|
3943
|
+
isCheckedRow,
|
|
3943
3944
|
selectedRows,
|
|
3945
|
+
checkedRows,
|
|
3944
3946
|
emptyContent,
|
|
3945
|
-
|
|
3947
|
+
onCheckedRow,
|
|
3948
|
+
onSelectedRow,
|
|
3946
3949
|
onRowAction
|
|
3947
3950
|
}) => {
|
|
3948
|
-
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (
|
|
3951
|
+
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isChecked ? 1 : 0);
|
|
3949
3952
|
const [expandedRows, setExpandedRows] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
|
|
3950
3953
|
(0, import_react4.useEffect)(() => {
|
|
3951
3954
|
setExpandedRows(/* @__PURE__ */ new Set());
|
|
@@ -3958,11 +3961,14 @@ var TableBody = ({
|
|
|
3958
3961
|
);
|
|
3959
3962
|
const getTrProps = (0, import_react4.useCallback)(
|
|
3960
3963
|
(index) => ({
|
|
3961
|
-
className: clsx(
|
|
3964
|
+
className: clsx(
|
|
3965
|
+
slots.tr({ class: [classNames == null ? void 0 : classNames.tr, (isSelected || isCheckedRow || isExpanded) && "cursor-pointer"] })
|
|
3966
|
+
),
|
|
3962
3967
|
"data-odd": index % 2 !== 0,
|
|
3963
|
-
"data-expanded": expandedRows.has(index)
|
|
3968
|
+
"data-expanded": expandedRows.has(index),
|
|
3969
|
+
"data-selected": selectedRows == null ? void 0 : selectedRows.has(index)
|
|
3964
3970
|
}),
|
|
3965
|
-
[classNames == null ? void 0 : classNames.tr, expandedRows, slots]
|
|
3971
|
+
[classNames == null ? void 0 : classNames.tr, expandedRows, isCheckedRow, isExpanded, isSelected, selectedRows, slots]
|
|
3966
3972
|
);
|
|
3967
3973
|
const getExpandedContentProps = (0, import_react4.useCallback)(
|
|
3968
3974
|
() => ({
|
|
@@ -4009,20 +4015,22 @@ var TableBody = ({
|
|
|
4009
4015
|
});
|
|
4010
4016
|
};
|
|
4011
4017
|
const handleRowClick = (index) => (e) => {
|
|
4018
|
+
var _a;
|
|
4012
4019
|
e.stopPropagation();
|
|
4013
4020
|
e.preventDefault();
|
|
4014
4021
|
if (isExpanded) onChangeExpandedRow(index);
|
|
4015
|
-
if (isSelected
|
|
4022
|
+
if (isSelected) onSelectedRow(index);
|
|
4023
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
4016
4024
|
const row = rows[index];
|
|
4017
|
-
if (row
|
|
4018
|
-
onRowAction == null ? void 0 :
|
|
4025
|
+
if (row) {
|
|
4026
|
+
(_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
|
|
4019
4027
|
}
|
|
4020
4028
|
};
|
|
4021
4029
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { ...getTbodyProps(), children: rows.length > 0 ? rows.map((row, rowIndex) => {
|
|
4022
4030
|
const keys = Object.keys(row);
|
|
4023
4031
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
|
|
4024
4032
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
4025
|
-
|
|
4033
|
+
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) }) }),
|
|
4026
4034
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4027
4035
|
Icon_default,
|
|
4028
4036
|
{
|
|
@@ -4045,6 +4053,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
|
4045
4053
|
var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
4046
4054
|
const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
|
|
4047
4055
|
const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
|
|
4056
|
+
const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
4048
4057
|
const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
4049
4058
|
const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
|
|
4050
4059
|
const getBaseProps = (0, import_react6.useCallback)(
|
|
@@ -4061,21 +4070,41 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4061
4070
|
}),
|
|
4062
4071
|
[classNames == null ? void 0 : classNames.table, slots]
|
|
4063
4072
|
);
|
|
4064
|
-
const
|
|
4065
|
-
const
|
|
4066
|
-
|
|
4073
|
+
const handleCheckAll = (isChecked) => {
|
|
4074
|
+
const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
|
|
4075
|
+
setCheckedRows(newCheckedRows);
|
|
4076
|
+
};
|
|
4077
|
+
const handleCheckRow = (index) => {
|
|
4078
|
+
const newCheckedRows = new Set(checkedRows);
|
|
4079
|
+
if (newCheckedRows.has(index)) {
|
|
4080
|
+
newCheckedRows.delete(index);
|
|
4081
|
+
} else {
|
|
4082
|
+
newCheckedRows.add(index);
|
|
4083
|
+
}
|
|
4084
|
+
setCheckedRows(newCheckedRows);
|
|
4067
4085
|
};
|
|
4068
4086
|
const handleSelectRow = (index) => {
|
|
4069
4087
|
const newSelectedRows = new Set(selectedRows);
|
|
4070
|
-
if (
|
|
4071
|
-
newSelectedRows.
|
|
4088
|
+
if (originalProps.isMultiSelect) {
|
|
4089
|
+
if (newSelectedRows.has(index)) {
|
|
4090
|
+
newSelectedRows.delete(index);
|
|
4091
|
+
} else {
|
|
4092
|
+
newSelectedRows.add(index);
|
|
4093
|
+
}
|
|
4072
4094
|
} else {
|
|
4073
|
-
newSelectedRows.
|
|
4095
|
+
if (newSelectedRows.has(index)) {
|
|
4096
|
+
newSelectedRows.delete(index);
|
|
4097
|
+
} else {
|
|
4098
|
+
newSelectedRows.clear();
|
|
4099
|
+
newSelectedRows.add(index);
|
|
4100
|
+
}
|
|
4074
4101
|
}
|
|
4075
4102
|
setSelectedRows(newSelectedRows);
|
|
4076
4103
|
};
|
|
4077
4104
|
(0, import_react6.useImperativeHandle)(ref, () => ({
|
|
4105
|
+
checkedRows,
|
|
4078
4106
|
selectedRows,
|
|
4107
|
+
setCheckedRows,
|
|
4079
4108
|
setSelectedRows
|
|
4080
4109
|
}));
|
|
4081
4110
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
|
|
@@ -4087,10 +4116,10 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4087
4116
|
columns,
|
|
4088
4117
|
size: originalProps.size,
|
|
4089
4118
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
4090
|
-
|
|
4119
|
+
isChecked: originalProps.isChecked,
|
|
4091
4120
|
isExpanded: originalProps.isExpanded,
|
|
4092
|
-
|
|
4093
|
-
|
|
4121
|
+
onCheckAll: handleCheckAll,
|
|
4122
|
+
isCheckedAll: checkedRows.size === rows.length
|
|
4094
4123
|
}
|
|
4095
4124
|
),
|
|
4096
4125
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -4102,13 +4131,16 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4102
4131
|
size: originalProps.size,
|
|
4103
4132
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
4104
4133
|
isSelected: originalProps.isSelected,
|
|
4105
|
-
|
|
4134
|
+
isChecked: originalProps.isChecked,
|
|
4135
|
+
isCheckedRow: originalProps.isCheckedRow,
|
|
4106
4136
|
isExpanded: originalProps.isExpanded,
|
|
4107
4137
|
isLoading,
|
|
4108
4138
|
classNames,
|
|
4109
4139
|
emptyContent,
|
|
4110
4140
|
selectedRows,
|
|
4111
|
-
|
|
4141
|
+
checkedRows,
|
|
4142
|
+
onCheckedRow: handleCheckRow,
|
|
4143
|
+
onSelectedRow: handleSelectRow,
|
|
4112
4144
|
onRowAction
|
|
4113
4145
|
}
|
|
4114
4146
|
)
|
|
@@ -4125,7 +4157,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4125
4157
|
tr: ["group", "outline-none"],
|
|
4126
4158
|
th: [
|
|
4127
4159
|
"text-foreground",
|
|
4128
|
-
"text-center",
|
|
4160
|
+
"!text-center",
|
|
4129
4161
|
"align-middle",
|
|
4130
4162
|
"whitespace-nowrap",
|
|
4131
4163
|
"font-normal",
|
|
@@ -4144,7 +4176,6 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4144
4176
|
"[&>*]:z-1",
|
|
4145
4177
|
"[&>*]:relative",
|
|
4146
4178
|
"transition duration-200",
|
|
4147
|
-
"data-[selected=true]:before:opacity-100",
|
|
4148
4179
|
"group-data-[disabled=true]:text-default-300"
|
|
4149
4180
|
],
|
|
4150
4181
|
tfoot: "",
|
|
@@ -4210,7 +4241,13 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4210
4241
|
isSelected: {
|
|
4211
4242
|
true: {}
|
|
4212
4243
|
},
|
|
4213
|
-
|
|
4244
|
+
isMultiSelect: {
|
|
4245
|
+
true: {}
|
|
4246
|
+
},
|
|
4247
|
+
isChecked: {
|
|
4248
|
+
true: {}
|
|
4249
|
+
},
|
|
4250
|
+
isCheckedRow: {
|
|
4214
4251
|
true: {
|
|
4215
4252
|
tr: "cursor-pointer"
|
|
4216
4253
|
}
|
|
@@ -4242,7 +4279,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4242
4279
|
color: "primary",
|
|
4243
4280
|
variant: "solid",
|
|
4244
4281
|
size: "md",
|
|
4245
|
-
|
|
4282
|
+
isChecked: false,
|
|
4246
4283
|
isExpanded: false,
|
|
4247
4284
|
isCompact: false,
|
|
4248
4285
|
hideHeader: false,
|
|
@@ -4255,7 +4292,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4255
4292
|
color: "primary",
|
|
4256
4293
|
class: {
|
|
4257
4294
|
thead: "[&>tr]:bg-primary-light",
|
|
4258
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
4295
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
4259
4296
|
}
|
|
4260
4297
|
},
|
|
4261
4298
|
{
|
|
@@ -4263,7 +4300,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4263
4300
|
color: "secondary",
|
|
4264
4301
|
class: {
|
|
4265
4302
|
thead: "[&>tr]:bg-secondary-light",
|
|
4266
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
4303
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
4267
4304
|
}
|
|
4268
4305
|
},
|
|
4269
4306
|
{
|
|
@@ -4271,7 +4308,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4271
4308
|
color: "neutral",
|
|
4272
4309
|
class: {
|
|
4273
4310
|
thead: "[&>tr]:bg-trans-light",
|
|
4274
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
4311
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
4275
4312
|
}
|
|
4276
4313
|
},
|
|
4277
4314
|
{
|
|
@@ -4279,7 +4316,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4279
4316
|
color: "primary",
|
|
4280
4317
|
class: {
|
|
4281
4318
|
thead: "border-primary-light",
|
|
4282
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
4319
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
4283
4320
|
}
|
|
4284
4321
|
},
|
|
4285
4322
|
{
|
|
@@ -4287,7 +4324,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4287
4324
|
color: "secondary",
|
|
4288
4325
|
class: {
|
|
4289
4326
|
thead: "border-secondary-light",
|
|
4290
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
4327
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
4291
4328
|
}
|
|
4292
4329
|
},
|
|
4293
4330
|
{
|
|
@@ -4295,7 +4332,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4295
4332
|
color: "neutral",
|
|
4296
4333
|
class: {
|
|
4297
4334
|
thead: "border-trans-light",
|
|
4298
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
4335
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
4299
4336
|
}
|
|
4300
4337
|
},
|
|
4301
4338
|
{
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import "../../chunk-2UUH2MBF.mjs";
|
|
3
3
|
import {
|
|
4
4
|
table_default
|
|
5
|
-
} from "../../chunk-
|
|
6
|
-
import "../../chunk-
|
|
7
|
-
import "../../chunk-
|
|
5
|
+
} from "../../chunk-HAKQYVWB.mjs";
|
|
6
|
+
import "../../chunk-QDDEQY63.mjs";
|
|
7
|
+
import "../../chunk-PO3ADNA5.mjs";
|
|
8
8
|
import "../../chunk-QZ3LVYJW.mjs";
|
|
9
9
|
import "../../chunk-ANYPMQH4.mjs";
|
|
10
10
|
import "../../chunk-27Y6K5NK.mjs";
|
|
@@ -15,12 +15,15 @@ type TableBodyProps = {
|
|
|
15
15
|
isLoading?: boolean;
|
|
16
16
|
isExpanded?: boolean;
|
|
17
17
|
isSelected?: boolean;
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
isChecked?: boolean;
|
|
19
|
+
isCheckedRow?: boolean;
|
|
20
|
+
selectedRows?: Set<number>;
|
|
21
|
+
checkedRows: Set<number>;
|
|
20
22
|
emptyContent?: ReactNode;
|
|
21
|
-
|
|
23
|
+
onCheckedRow: (index: number) => void;
|
|
24
|
+
onSelectedRow: (index: number) => void;
|
|
22
25
|
onRowAction?: (e: React__default.MouseEvent, params: TableRow) => void;
|
|
23
26
|
};
|
|
24
|
-
declare const TableBody: ({ classNames, size, color, slots, rows, columns, isExpanded, isSelected,
|
|
27
|
+
declare const TableBody: ({ classNames, size, color, slots, rows, columns, isExpanded, isSelected, isChecked, isCheckedRow, selectedRows, checkedRows, emptyContent, onCheckedRow, onSelectedRow, onRowAction, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
25
28
|
|
|
26
29
|
export { TableBody as default };
|
|
@@ -15,12 +15,15 @@ type TableBodyProps = {
|
|
|
15
15
|
isLoading?: boolean;
|
|
16
16
|
isExpanded?: boolean;
|
|
17
17
|
isSelected?: boolean;
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
isChecked?: boolean;
|
|
19
|
+
isCheckedRow?: boolean;
|
|
20
|
+
selectedRows?: Set<number>;
|
|
21
|
+
checkedRows: Set<number>;
|
|
20
22
|
emptyContent?: ReactNode;
|
|
21
|
-
|
|
23
|
+
onCheckedRow: (index: number) => void;
|
|
24
|
+
onSelectedRow: (index: number) => void;
|
|
22
25
|
onRowAction?: (e: React__default.MouseEvent, params: TableRow) => void;
|
|
23
26
|
};
|
|
24
|
-
declare const TableBody: ({ classNames, size, color, slots, rows, columns, isExpanded, isSelected,
|
|
27
|
+
declare const TableBody: ({ classNames, size, color, slots, rows, columns, isExpanded, isSelected, isChecked, isCheckedRow, selectedRows, checkedRows, emptyContent, onCheckedRow, onSelectedRow, onRowAction, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
25
28
|
|
|
26
29
|
export { TableBody as default };
|
|
@@ -3887,13 +3887,16 @@ var TableBody = ({
|
|
|
3887
3887
|
columns,
|
|
3888
3888
|
isExpanded,
|
|
3889
3889
|
isSelected,
|
|
3890
|
-
|
|
3890
|
+
isChecked,
|
|
3891
|
+
isCheckedRow,
|
|
3891
3892
|
selectedRows,
|
|
3893
|
+
checkedRows,
|
|
3892
3894
|
emptyContent,
|
|
3893
|
-
|
|
3895
|
+
onCheckedRow,
|
|
3896
|
+
onSelectedRow,
|
|
3894
3897
|
onRowAction
|
|
3895
3898
|
}) => {
|
|
3896
|
-
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (
|
|
3899
|
+
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isChecked ? 1 : 0);
|
|
3897
3900
|
const [expandedRows, setExpandedRows] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
|
|
3898
3901
|
(0, import_react2.useEffect)(() => {
|
|
3899
3902
|
setExpandedRows(/* @__PURE__ */ new Set());
|
|
@@ -3906,11 +3909,14 @@ var TableBody = ({
|
|
|
3906
3909
|
);
|
|
3907
3910
|
const getTrProps = (0, import_react2.useCallback)(
|
|
3908
3911
|
(index) => ({
|
|
3909
|
-
className: clsx(
|
|
3912
|
+
className: clsx(
|
|
3913
|
+
slots.tr({ class: [classNames == null ? void 0 : classNames.tr, (isSelected || isCheckedRow || isExpanded) && "cursor-pointer"] })
|
|
3914
|
+
),
|
|
3910
3915
|
"data-odd": index % 2 !== 0,
|
|
3911
|
-
"data-expanded": expandedRows.has(index)
|
|
3916
|
+
"data-expanded": expandedRows.has(index),
|
|
3917
|
+
"data-selected": selectedRows == null ? void 0 : selectedRows.has(index)
|
|
3912
3918
|
}),
|
|
3913
|
-
[classNames == null ? void 0 : classNames.tr, expandedRows, slots]
|
|
3919
|
+
[classNames == null ? void 0 : classNames.tr, expandedRows, isCheckedRow, isExpanded, isSelected, selectedRows, slots]
|
|
3914
3920
|
);
|
|
3915
3921
|
const getExpandedContentProps = (0, import_react2.useCallback)(
|
|
3916
3922
|
() => ({
|
|
@@ -3957,20 +3963,22 @@ var TableBody = ({
|
|
|
3957
3963
|
});
|
|
3958
3964
|
};
|
|
3959
3965
|
const handleRowClick = (index) => (e) => {
|
|
3966
|
+
var _a;
|
|
3960
3967
|
e.stopPropagation();
|
|
3961
3968
|
e.preventDefault();
|
|
3962
3969
|
if (isExpanded) onChangeExpandedRow(index);
|
|
3963
|
-
if (isSelected
|
|
3970
|
+
if (isSelected) onSelectedRow(index);
|
|
3971
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
3964
3972
|
const row = rows[index];
|
|
3965
|
-
if (row
|
|
3966
|
-
onRowAction == null ? void 0 :
|
|
3973
|
+
if (row) {
|
|
3974
|
+
(_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
|
|
3967
3975
|
}
|
|
3968
3976
|
};
|
|
3969
3977
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { ...getTbodyProps(), children: rows.length > 0 ? rows.map((row, rowIndex) => {
|
|
3970
3978
|
const keys = Object.keys(row);
|
|
3971
3979
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react2.default.Fragment, { children: [
|
|
3972
3980
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
3973
|
-
|
|
3981
|
+
isChecked && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onCheckedRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { color, size, checked: checkedRows.has(rowIndex) }) }),
|
|
3974
3982
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3975
3983
|
Icon_default,
|
|
3976
3984
|
{
|
|
@@ -11,11 +11,11 @@ type TableHeadProps = {
|
|
|
11
11
|
size?: "md" | "sm" | "lg";
|
|
12
12
|
color?: "primary" | "secondary";
|
|
13
13
|
isExpanded?: boolean;
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
isChecked?: boolean;
|
|
15
|
+
isCheckedAll: boolean;
|
|
16
16
|
classNames?: SlotsToClasses<TableSlots>;
|
|
17
|
-
|
|
17
|
+
onCheckAll: (isChecked: boolean) => void;
|
|
18
18
|
};
|
|
19
|
-
declare const TableHead: ({ columns, slots, size, color, isExpanded,
|
|
19
|
+
declare const TableHead: ({ columns, slots, size, color, isExpanded, isChecked, isCheckedAll, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
|
|
20
20
|
|
|
21
21
|
export { TableHead as default };
|
|
@@ -11,11 +11,11 @@ type TableHeadProps = {
|
|
|
11
11
|
size?: "md" | "sm" | "lg";
|
|
12
12
|
color?: "primary" | "secondary";
|
|
13
13
|
isExpanded?: boolean;
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
isChecked?: boolean;
|
|
15
|
+
isCheckedAll: boolean;
|
|
16
16
|
classNames?: SlotsToClasses<TableSlots>;
|
|
17
|
-
|
|
17
|
+
onCheckAll: (isChecked: boolean) => void;
|
|
18
18
|
};
|
|
19
|
-
declare const TableHead: ({ columns, slots, size, color, isExpanded,
|
|
19
|
+
declare const TableHead: ({ columns, slots, size, color, isExpanded, isChecked, isCheckedAll, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
|
|
20
20
|
|
|
21
21
|
export { TableHead as default };
|
|
@@ -305,10 +305,10 @@ var TableHead = ({
|
|
|
305
305
|
size,
|
|
306
306
|
color,
|
|
307
307
|
isExpanded,
|
|
308
|
-
|
|
309
|
-
|
|
308
|
+
isChecked,
|
|
309
|
+
isCheckedAll,
|
|
310
310
|
classNames,
|
|
311
|
-
|
|
311
|
+
onCheckAll
|
|
312
312
|
}) => {
|
|
313
313
|
const getTheadProps = (0, import_react2.useCallback)(
|
|
314
314
|
() => ({
|
|
@@ -328,12 +328,12 @@ var TableHead = ({
|
|
|
328
328
|
}),
|
|
329
329
|
[classNames == null ? void 0 : classNames.th, slots]
|
|
330
330
|
);
|
|
331
|
-
const
|
|
331
|
+
const handleClickCheckAll = (e) => {
|
|
332
332
|
e.preventDefault();
|
|
333
|
-
|
|
333
|
+
onCheckAll(!isCheckedAll);
|
|
334
334
|
};
|
|
335
335
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
|
|
336
|
-
|
|
336
|
+
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" } }) }),
|
|
337
337
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
|
|
338
338
|
columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
|
|
339
339
|
] }) });
|
|
@@ -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
|
};
|