@deepnoid/ui 0.0.95 → 0.0.97
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-JWFWFBQM.mjs → chunk-PNFR2J4Q.mjs} +62 -27
- package/dist/{chunk-VG4644BG.mjs → chunk-PO3ADNA5.mjs} +6 -6
- package/dist/{chunk-PR277HT5.mjs → chunk-QDDEQY63.mjs} +15 -8
- package/dist/components/accordion/accordion.test.mjs +3 -3
- package/dist/components/button/button-group.test.mjs +3 -3
- package/dist/components/button/button.test.mjs +3 -3
- package/dist/components/checkbox/checkbox.test.mjs +3 -3
- package/dist/components/input/input.test.mjs +1 -1
- package/dist/components/modal/modal.test.mjs +1 -1
- package/dist/components/select/select.test.mjs +3 -3
- package/dist/components/table/index.js +80 -38
- 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 +15 -8
- 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 +80 -38
- package/dist/components/table/table.mjs +3 -3
- package/dist/components/table/table.test.js +80 -38
- package/dist/components/table/table.test.mjs +3 -3
- package/dist/components/tabs/tabs.test.mjs +3 -3
- package/dist/components/textarea/textarea.test.mjs +1 -1
- package/dist/components/tooltip/tooltip.test.mjs +3 -3
- package/dist/index.js +80 -38
- package/dist/index.mjs +32 -32
- package/package.json +1 -1
|
@@ -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
|
() => ({
|
|
@@ -4013,7 +4019,8 @@ var TableBody = ({
|
|
|
4013
4019
|
e.stopPropagation();
|
|
4014
4020
|
e.preventDefault();
|
|
4015
4021
|
if (isExpanded) onChangeExpandedRow(index);
|
|
4016
|
-
if (isSelected
|
|
4022
|
+
if (isSelected) onSelectedRow(index);
|
|
4023
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
4017
4024
|
const row = rows[index];
|
|
4018
4025
|
if (row) {
|
|
4019
4026
|
(_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
|
|
@@ -4023,7 +4030,7 @@ var TableBody = ({
|
|
|
4023
4030
|
const keys = Object.keys(row);
|
|
4024
4031
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
|
|
4025
4032
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
4026
|
-
|
|
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) }) }),
|
|
4027
4034
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
4028
4035
|
Icon_default,
|
|
4029
4036
|
{
|
|
@@ -4046,7 +4053,14 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
|
4046
4053
|
var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
4047
4054
|
const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
|
|
4048
4055
|
const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
|
|
4056
|
+
const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
4049
4057
|
const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
|
|
4058
|
+
(0, import_react6.useEffect)(() => {
|
|
4059
|
+
setCheckedRows(/* @__PURE__ */ new Set());
|
|
4060
|
+
}, [rows]);
|
|
4061
|
+
(0, import_react6.useEffect)(() => {
|
|
4062
|
+
setSelectedRows(/* @__PURE__ */ new Set());
|
|
4063
|
+
}, [rows]);
|
|
4050
4064
|
const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
|
|
4051
4065
|
const getBaseProps = (0, import_react6.useCallback)(
|
|
4052
4066
|
(props2) => ({
|
|
@@ -4062,21 +4076,41 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4062
4076
|
}),
|
|
4063
4077
|
[classNames == null ? void 0 : classNames.table, slots]
|
|
4064
4078
|
);
|
|
4065
|
-
const
|
|
4066
|
-
const
|
|
4067
|
-
|
|
4079
|
+
const handleCheckAll = (isChecked) => {
|
|
4080
|
+
const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
|
|
4081
|
+
setCheckedRows(newCheckedRows);
|
|
4082
|
+
};
|
|
4083
|
+
const handleCheckRow = (index) => {
|
|
4084
|
+
const newCheckedRows = new Set(checkedRows);
|
|
4085
|
+
if (newCheckedRows.has(index)) {
|
|
4086
|
+
newCheckedRows.delete(index);
|
|
4087
|
+
} else {
|
|
4088
|
+
newCheckedRows.add(index);
|
|
4089
|
+
}
|
|
4090
|
+
setCheckedRows(newCheckedRows);
|
|
4068
4091
|
};
|
|
4069
4092
|
const handleSelectRow = (index) => {
|
|
4070
4093
|
const newSelectedRows = new Set(selectedRows);
|
|
4071
|
-
if (
|
|
4072
|
-
newSelectedRows.
|
|
4094
|
+
if (originalProps.isMultiSelect) {
|
|
4095
|
+
if (newSelectedRows.has(index)) {
|
|
4096
|
+
newSelectedRows.delete(index);
|
|
4097
|
+
} else {
|
|
4098
|
+
newSelectedRows.add(index);
|
|
4099
|
+
}
|
|
4073
4100
|
} else {
|
|
4074
|
-
newSelectedRows.
|
|
4101
|
+
if (newSelectedRows.has(index)) {
|
|
4102
|
+
newSelectedRows.delete(index);
|
|
4103
|
+
} else {
|
|
4104
|
+
newSelectedRows.clear();
|
|
4105
|
+
newSelectedRows.add(index);
|
|
4106
|
+
}
|
|
4075
4107
|
}
|
|
4076
4108
|
setSelectedRows(newSelectedRows);
|
|
4077
4109
|
};
|
|
4078
4110
|
(0, import_react6.useImperativeHandle)(ref, () => ({
|
|
4111
|
+
checkedRows,
|
|
4079
4112
|
selectedRows,
|
|
4113
|
+
setCheckedRows,
|
|
4080
4114
|
setSelectedRows
|
|
4081
4115
|
}));
|
|
4082
4116
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
|
|
@@ -4088,10 +4122,10 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4088
4122
|
columns,
|
|
4089
4123
|
size: originalProps.size,
|
|
4090
4124
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
4091
|
-
|
|
4125
|
+
isChecked: originalProps.isChecked,
|
|
4092
4126
|
isExpanded: originalProps.isExpanded,
|
|
4093
|
-
|
|
4094
|
-
|
|
4127
|
+
onCheckAll: handleCheckAll,
|
|
4128
|
+
isCheckedAll: checkedRows.size === rows.length
|
|
4095
4129
|
}
|
|
4096
4130
|
),
|
|
4097
4131
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -4103,13 +4137,16 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
4103
4137
|
size: originalProps.size,
|
|
4104
4138
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
4105
4139
|
isSelected: originalProps.isSelected,
|
|
4106
|
-
|
|
4140
|
+
isChecked: originalProps.isChecked,
|
|
4141
|
+
isCheckedRow: originalProps.isCheckedRow,
|
|
4107
4142
|
isExpanded: originalProps.isExpanded,
|
|
4108
4143
|
isLoading,
|
|
4109
4144
|
classNames,
|
|
4110
4145
|
emptyContent,
|
|
4111
4146
|
selectedRows,
|
|
4112
|
-
|
|
4147
|
+
checkedRows,
|
|
4148
|
+
onCheckedRow: handleCheckRow,
|
|
4149
|
+
onSelectedRow: handleSelectRow,
|
|
4113
4150
|
onRowAction
|
|
4114
4151
|
}
|
|
4115
4152
|
)
|
|
@@ -4120,13 +4157,13 @@ var table_default = Table;
|
|
|
4120
4157
|
var table = (0, import_tailwind_variants3.tv)({
|
|
4121
4158
|
slots: {
|
|
4122
4159
|
base: "flex flex-col relative gap-4",
|
|
4123
|
-
table: "
|
|
4160
|
+
table: "w-full h-auto",
|
|
4124
4161
|
thead: "[&>tr]:first:rounded-lg",
|
|
4125
|
-
tbody: "",
|
|
4126
|
-
tr: ["group", "outline-none"],
|
|
4162
|
+
tbody: "w-full",
|
|
4163
|
+
tr: ["group", "outline-none", "w-full"],
|
|
4127
4164
|
th: [
|
|
4128
4165
|
"text-foreground",
|
|
4129
|
-
"text-center",
|
|
4166
|
+
"!text-center",
|
|
4130
4167
|
"align-middle",
|
|
4131
4168
|
"whitespace-nowrap",
|
|
4132
4169
|
"font-normal",
|
|
@@ -4145,7 +4182,6 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4145
4182
|
"[&>*]:z-1",
|
|
4146
4183
|
"[&>*]:relative",
|
|
4147
4184
|
"transition duration-200",
|
|
4148
|
-
"data-[selected=true]:before:opacity-100",
|
|
4149
4185
|
"group-data-[disabled=true]:text-default-300"
|
|
4150
4186
|
],
|
|
4151
4187
|
tfoot: "",
|
|
@@ -4211,7 +4247,13 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4211
4247
|
isSelected: {
|
|
4212
4248
|
true: {}
|
|
4213
4249
|
},
|
|
4214
|
-
|
|
4250
|
+
isMultiSelect: {
|
|
4251
|
+
true: {}
|
|
4252
|
+
},
|
|
4253
|
+
isChecked: {
|
|
4254
|
+
true: {}
|
|
4255
|
+
},
|
|
4256
|
+
isCheckedRow: {
|
|
4215
4257
|
true: {
|
|
4216
4258
|
tr: "cursor-pointer"
|
|
4217
4259
|
}
|
|
@@ -4243,7 +4285,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4243
4285
|
color: "primary",
|
|
4244
4286
|
variant: "solid",
|
|
4245
4287
|
size: "md",
|
|
4246
|
-
|
|
4288
|
+
isChecked: false,
|
|
4247
4289
|
isExpanded: false,
|
|
4248
4290
|
isCompact: false,
|
|
4249
4291
|
hideHeader: false,
|
|
@@ -4256,7 +4298,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4256
4298
|
color: "primary",
|
|
4257
4299
|
class: {
|
|
4258
4300
|
thead: "[&>tr]:bg-primary-light",
|
|
4259
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
4301
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
4260
4302
|
}
|
|
4261
4303
|
},
|
|
4262
4304
|
{
|
|
@@ -4264,7 +4306,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4264
4306
|
color: "secondary",
|
|
4265
4307
|
class: {
|
|
4266
4308
|
thead: "[&>tr]:bg-secondary-light",
|
|
4267
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
4309
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
4268
4310
|
}
|
|
4269
4311
|
},
|
|
4270
4312
|
{
|
|
@@ -4272,7 +4314,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4272
4314
|
color: "neutral",
|
|
4273
4315
|
class: {
|
|
4274
4316
|
thead: "[&>tr]:bg-trans-light",
|
|
4275
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
4317
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
4276
4318
|
}
|
|
4277
4319
|
},
|
|
4278
4320
|
{
|
|
@@ -4280,7 +4322,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4280
4322
|
color: "primary",
|
|
4281
4323
|
class: {
|
|
4282
4324
|
thead: "border-primary-light",
|
|
4283
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
4325
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
4284
4326
|
}
|
|
4285
4327
|
},
|
|
4286
4328
|
{
|
|
@@ -4288,7 +4330,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4288
4330
|
color: "secondary",
|
|
4289
4331
|
class: {
|
|
4290
4332
|
thead: "border-secondary-light",
|
|
4291
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
4333
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
4292
4334
|
}
|
|
4293
4335
|
},
|
|
4294
4336
|
{
|
|
@@ -4296,7 +4338,7 @@ var table = (0, import_tailwind_variants3.tv)({
|
|
|
4296
4338
|
color: "neutral",
|
|
4297
4339
|
class: {
|
|
4298
4340
|
thead: "border-trans-light",
|
|
4299
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
4341
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
4300
4342
|
}
|
|
4301
4343
|
},
|
|
4302
4344
|
{
|
|
@@ -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-PNFR2J4Q.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
|
() => ({
|
|
@@ -3961,7 +3967,8 @@ var TableBody = ({
|
|
|
3961
3967
|
e.stopPropagation();
|
|
3962
3968
|
e.preventDefault();
|
|
3963
3969
|
if (isExpanded) onChangeExpandedRow(index);
|
|
3964
|
-
if (isSelected
|
|
3970
|
+
if (isSelected) onSelectedRow(index);
|
|
3971
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
3965
3972
|
const row = rows[index];
|
|
3966
3973
|
if (row) {
|
|
3967
3974
|
(_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
|
|
@@ -3971,7 +3978,7 @@ var TableBody = ({
|
|
|
3971
3978
|
const keys = Object.keys(row);
|
|
3972
3979
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react2.default.Fragment, { children: [
|
|
3973
3980
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
3974
|
-
|
|
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) }) }),
|
|
3975
3982
|
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
3976
3983
|
Icon_default,
|
|
3977
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
|
};
|