@deepnoid/ui 0.1.92 → 0.1.93

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.
Files changed (82) hide show
  1. package/.turbo/turbo-build.log +158 -158
  2. package/dist/{chunk-D6OJWEZM.mjs → chunk-4HCQMYHI.mjs} +1 -1
  3. package/dist/{chunk-RE2WH26E.mjs → chunk-AJUOSLYC.mjs} +1 -1
  4. package/dist/{chunk-Q3JMHIW5.mjs → chunk-APKDCFD4.mjs} +1 -1
  5. package/dist/{chunk-LMHSWLH2.mjs → chunk-CTEQVIV4.mjs} +4 -4
  6. package/dist/{chunk-FB6LBMGN.mjs → chunk-FCKMEDUD.mjs} +3 -3
  7. package/dist/{chunk-ZFKQOPMK.mjs → chunk-LYAPVC26.mjs} +62 -61
  8. package/dist/{chunk-5IKVOP4M.mjs → chunk-V57ADP5P.mjs} +1 -1
  9. package/dist/{chunk-D3HZG3CH.mjs → chunk-XK4JSX7G.mjs} +1 -1
  10. package/dist/components/accordion/index.mjs +3 -3
  11. package/dist/components/backdrop/backdrop.mjs +2 -2
  12. package/dist/components/backdrop/index.mjs +2 -2
  13. package/dist/components/breadcrumb/breadcrumb.mjs +4 -4
  14. package/dist/components/breadcrumb/index.mjs +4 -4
  15. package/dist/components/button/button.mjs +1 -1
  16. package/dist/components/button/icon-button.mjs +1 -1
  17. package/dist/components/button/index.mjs +3 -3
  18. package/dist/components/button/text-button.mjs +2 -2
  19. package/dist/components/checkbox/checkbox.mjs +2 -2
  20. package/dist/components/checkbox/index.mjs +2 -2
  21. package/dist/components/chip/chip.mjs +1 -1
  22. package/dist/components/chip/index.mjs +1 -1
  23. package/dist/components/dateTimePicker/calendar.mjs +1 -1
  24. package/dist/components/dateTimePicker/dateTimePicker.mjs +4 -4
  25. package/dist/components/dateTimePicker/index.mjs +4 -4
  26. package/dist/components/dateTimePicker/timePicker.mjs +3 -3
  27. package/dist/components/drawer/drawer.mjs +2 -2
  28. package/dist/components/drawer/index.mjs +2 -2
  29. package/dist/components/fileUpload/fileUpload.mjs +5 -5
  30. package/dist/components/fileUpload/index.mjs +5 -5
  31. package/dist/components/input/index.mjs +3 -3
  32. package/dist/components/input/input.mjs +3 -3
  33. package/dist/components/list/index.mjs +4 -4
  34. package/dist/components/list/listItem.mjs +2 -2
  35. package/dist/components/modal/index.mjs +5 -5
  36. package/dist/components/modal/modal.mjs +5 -5
  37. package/dist/components/pagination/index.mjs +4 -4
  38. package/dist/components/pagination/pagination.mjs +4 -4
  39. package/dist/components/progress/index.mjs +2 -2
  40. package/dist/components/progress/progress.mjs +2 -2
  41. package/dist/components/radio/index.mjs +2 -2
  42. package/dist/components/radio/radio.mjs +2 -2
  43. package/dist/components/select/index.mjs +3 -3
  44. package/dist/components/select/select.mjs +3 -3
  45. package/dist/components/table/definition-table.mjs +2 -2
  46. package/dist/components/table/index.js +57 -56
  47. package/dist/components/table/index.mjs +7 -7
  48. package/dist/components/table/table-body.d.mts +2 -1
  49. package/dist/components/table/table-body.d.ts +2 -1
  50. package/dist/components/table/table-body.js +57 -56
  51. package/dist/components/table/table-body.mjs +6 -6
  52. package/dist/components/table/table-head.d.mts +2 -2
  53. package/dist/components/table/table-head.d.ts +2 -2
  54. package/dist/components/table/table-head.js +57 -56
  55. package/dist/components/table/table-head.mjs +6 -6
  56. package/dist/components/table/table.d.mts +16 -0
  57. package/dist/components/table/table.d.ts +16 -0
  58. package/dist/components/table/table.js +57 -56
  59. package/dist/components/table/table.mjs +6 -6
  60. package/dist/components/textarea/index.mjs +2 -2
  61. package/dist/components/textarea/textarea.mjs +2 -2
  62. package/dist/components/toast/index.mjs +4 -4
  63. package/dist/components/toast/toast.mjs +3 -3
  64. package/dist/components/toast/use-toast.mjs +4 -4
  65. package/dist/components/tree/index.mjs +2 -2
  66. package/dist/components/tree/tree.mjs +2 -2
  67. package/dist/index.js +57 -56
  68. package/dist/index.mjs +38 -38
  69. package/package.json +1 -1
  70. package/dist/{chunk-5FFTHFBX.mjs → chunk-2KS64V6J.mjs} +3 -3
  71. package/dist/{chunk-XZ5DXOJQ.mjs → chunk-36SVU53P.mjs} +3 -3
  72. package/dist/{chunk-6Q2BXHJL.mjs → chunk-4EIGHKUO.mjs} +3 -3
  73. package/dist/{chunk-GH4EPD35.mjs → chunk-BJMVYWOZ.mjs} +3 -3
  74. package/dist/{chunk-MPZKOT6P.mjs → chunk-CZKOYVZM.mjs} +3 -3
  75. package/dist/{chunk-MVL7HJSH.mjs → chunk-I4NXNQWS.mjs} +3 -3
  76. package/dist/{chunk-JBSV7GCL.mjs → chunk-JF7JH3YN.mjs} +3 -3
  77. package/dist/{chunk-4BJPJ54Q.mjs → chunk-JI3IYCXH.mjs} +3 -3
  78. package/dist/{chunk-3M6VYLOU.mjs → chunk-KY3W7MBV.mjs} +3 -3
  79. package/dist/{chunk-Y5QV7T6D.mjs → chunk-MUNZ6PTR.mjs} +3 -3
  80. package/dist/{chunk-S7Y7XUBL.mjs → chunk-NO6RDCY7.mjs} +3 -3
  81. package/dist/{chunk-AF4I7ZQS.mjs → chunk-NUELPELQ.mjs} +3 -3
  82. package/dist/{chunk-I3ORSDFO.mjs → chunk-O54WOM66.mjs} +3 -3
@@ -696,15 +696,11 @@ var TableHead = ({
696
696
  color,
697
697
  size,
698
698
  rowCheckbox = false,
699
- isCheckedAll,
699
+ hasCheckedRows,
700
700
  isLoading = false,
701
701
  classNames,
702
702
  onCheckAll
703
703
  }) => {
704
- const handleClickCheckAll = (e) => {
705
- e.preventDefault();
706
- onCheckAll(!isCheckedAll);
707
- };
708
704
  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
709
705
  "th",
710
706
  {
@@ -730,11 +726,11 @@ var TableHead = ({
730
726
  const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
731
727
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
732
728
  rowCheckbox && renderTh(
733
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
729
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
734
730
  checkbox_default,
735
731
  {
736
732
  size,
737
- checked: isCheckedAll,
733
+ checked: hasCheckedRows,
738
734
  onChange: (e) => onCheckAll(e.target.checked)
739
735
  }
740
736
  ) }),
@@ -6090,7 +6086,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6090
6086
  color,
6091
6087
  size,
6092
6088
  skeletonRow,
6093
- onCheckedRowsChange
6089
+ onCheckedRowsChange,
6090
+ onRowClick
6094
6091
  } = { ...props, ...variantProps };
6095
6092
  const { page = 1, perPage = 15 } = pagination || {};
6096
6093
  const showPagination = pagination && totalData > 0 && !isLoading;
@@ -6134,8 +6131,18 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6134
6131
  return updated;
6135
6132
  });
6136
6133
  };
6134
+ const handleRowClick = (row, index, event) => {
6135
+ const target = event.target;
6136
+ if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
6137
+ return;
6138
+ }
6139
+ onRowClick == null ? void 0 : onRowClick(row, index, event);
6140
+ };
6137
6141
  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
6138
- const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
6142
+ const slots = (0, import_react5.useMemo)(
6143
+ () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
6144
+ [variantProps, onRowClick]
6145
+ );
6139
6146
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
6140
6147
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
6141
6148
  "table",
@@ -6154,7 +6161,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6154
6161
  size,
6155
6162
  color,
6156
6163
  rowCheckbox,
6157
- isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6164
+ hasCheckedRows: checkedRows.size > 0,
6158
6165
  onCheckAll: handleAllRowCheck,
6159
6166
  isLoading,
6160
6167
  classNames,
@@ -6172,8 +6179,9 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6172
6179
  rowCheckbox,
6173
6180
  checkedRows,
6174
6181
  onCheckRow: handleRowCheck,
6175
- emptyContent,
6182
+ onRowClick: handleRowClick,
6176
6183
  isLoading,
6184
+ emptyContent,
6177
6185
  skeletonRow,
6178
6186
  className: clsx(
6179
6187
  "transition-all duration-150 ease-out",
@@ -6282,6 +6290,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
6282
6290
  height: {
6283
6291
  narrow: {},
6284
6292
  wide: {}
6293
+ },
6294
+ rowClickable: {
6295
+ true: {
6296
+ tr: ["cursor-pointer"]
6297
+ }
6285
6298
  }
6286
6299
  },
6287
6300
  compoundVariants: [
@@ -6442,6 +6455,7 @@ var TableBody = ({
6442
6455
  rowCheckbox = false,
6443
6456
  checkedRows,
6444
6457
  onCheckRow,
6458
+ onRowClick,
6445
6459
  isLoading = false,
6446
6460
  emptyContent,
6447
6461
  skeletonRow,
@@ -6450,66 +6464,53 @@ var TableBody = ({
6450
6464
  }) => {
6451
6465
  const renderTdSkeleton = (key, column) => {
6452
6466
  const isCheckbox = key.includes("checkbox");
6453
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6454
- "td",
6455
- {
6456
- className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
6457
- style: isCheckbox ? {
6458
- width: "40px",
6459
- minWidth: "40px",
6460
- maxWidth: "40px",
6461
- flexShrink: 0,
6462
- flexGrow: 0,
6463
- boxSizing: "border-box"
6464
- } : column ? getCellStyle(column) : void 0,
6465
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
6466
- },
6467
- key
6468
- );
6467
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
6469
6468
  };
6470
6469
  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6471
6470
  "td",
6472
6471
  {
6473
6472
  className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
6474
- style: {
6475
- width: "40px",
6476
- minWidth: "40px",
6477
- maxWidth: "40px",
6478
- flexShrink: 0,
6479
- flexGrow: 0,
6480
- boxSizing: "border-box"
6481
- },
6482
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
6483
- }
6473
+ style: { width: "40px", minWidth: "40px", textAlign: "center" },
6474
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
6475
+ },
6476
+ `checkbox-${rowId}`
6484
6477
  );
6485
6478
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
6486
6479
  columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
6487
6480
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
6488
6481
  ] }, `skeleton-${rowIndex}`);
6489
6482
  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
6490
- const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
6491
- columns.map((column, colIdx) => {
6492
- var _a;
6493
- const value = row[column.field];
6494
- const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
6495
- const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
6496
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6497
- "td",
6498
- {
6499
- className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
6500
- style: getCellStyle(column),
6501
- children: content
6502
- },
6503
- `${rowIndex}-${colIdx}`
6504
- );
6505
- }),
6506
- rowCheckbox && renderCheckboxCell(row.id)
6507
- ] }, rowIndex);
6483
+ const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
6484
+ "tr",
6485
+ {
6486
+ className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
6487
+ onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
6488
+ children: [
6489
+ columns.map((column, colIdx) => {
6490
+ var _a;
6491
+ const value = row[column.field];
6492
+ const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
6493
+ const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
6494
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6495
+ "td",
6496
+ {
6497
+ className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
6498
+ style: getCellStyle(column),
6499
+ children: content
6500
+ },
6501
+ `${row.id}-${column.field}-${colIdx}`
6502
+ );
6503
+ }),
6504
+ rowCheckbox && renderCheckboxCell(row.id)
6505
+ ]
6506
+ },
6507
+ row.id
6508
+ );
6508
6509
  const renderRows = () => {
6509
6510
  if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
6510
6511
  if (!rows.length && emptyContent) return renderEmptyRow();
6511
6512
  return rows.map((row, index) => renderDataRow(row, index));
6512
6513
  };
6513
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
6514
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
6514
6515
  };
6515
6516
  var table_body_default = TableBody;
@@ -1,24 +1,24 @@
1
1
  "use client";
2
2
  import {
3
3
  table_body_default
4
- } from "../../chunk-ZFKQOPMK.mjs";
4
+ } from "../../chunk-LYAPVC26.mjs";
5
5
  import "../../chunk-MZ76AA76.mjs";
6
6
  import "../../chunk-6PN3DGOE.mjs";
7
7
  import "../../chunk-DQRAFUDA.mjs";
8
8
  import "../../chunk-M37VBNB3.mjs";
9
9
  import "../../chunk-7B7LRG5J.mjs";
10
- import "../../chunk-LMHSWLH2.mjs";
10
+ import "../../chunk-CTEQVIV4.mjs";
11
11
  import "../../chunk-F3HENRVM.mjs";
12
12
  import "../../chunk-2GCSFWHD.mjs";
13
- import "../../chunk-MVL7HJSH.mjs";
13
+ import "../../chunk-I4NXNQWS.mjs";
14
14
  import "../../chunk-QZ3LVYJW.mjs";
15
- import "../../chunk-XZ5DXOJQ.mjs";
15
+ import "../../chunk-36SVU53P.mjs";
16
16
  import "../../chunk-ZYIIXWVY.mjs";
17
17
  import "../../chunk-JP4TEWP7.mjs";
18
- import "../../chunk-E3G5QXSH.mjs";
18
+ import "../../chunk-27Y6K5NK.mjs";
19
19
  import "../../chunk-RRONV7YA.mjs";
20
+ import "../../chunk-E3G5QXSH.mjs";
20
21
  import "../../chunk-CDXBML6O.mjs";
21
- import "../../chunk-27Y6K5NK.mjs";
22
22
  import "../../chunk-AC6TWLRT.mjs";
23
23
  export {
24
24
  table_body_default as default
@@ -10,11 +10,11 @@ type TableHeadProps = {
10
10
  color?: "primary" | "secondary" | "neutral";
11
11
  size?: Size;
12
12
  rowCheckbox?: boolean;
13
- isCheckedAll: boolean;
13
+ hasCheckedRows: boolean;
14
14
  isLoading?: boolean;
15
15
  classNames?: SlotsToClasses<TableSlots>;
16
16
  onCheckAll: (isChecked: boolean) => void;
17
17
  };
18
- declare const TableHead: ({ slots, columns, color, size, rowCheckbox, isCheckedAll, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
18
+ declare const TableHead: ({ slots, columns, color, size, rowCheckbox, hasCheckedRows, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
19
19
 
20
20
  export { TableHead as default };
@@ -10,11 +10,11 @@ type TableHeadProps = {
10
10
  color?: "primary" | "secondary" | "neutral";
11
11
  size?: Size;
12
12
  rowCheckbox?: boolean;
13
- isCheckedAll: boolean;
13
+ hasCheckedRows: boolean;
14
14
  isLoading?: boolean;
15
15
  classNames?: SlotsToClasses<TableSlots>;
16
16
  onCheckAll: (isChecked: boolean) => void;
17
17
  };
18
- declare const TableHead: ({ slots, columns, color, size, rowCheckbox, isCheckedAll, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
18
+ declare const TableHead: ({ slots, columns, color, size, rowCheckbox, hasCheckedRows, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
19
19
 
20
20
  export { TableHead as default };
@@ -699,6 +699,7 @@ var TableBody = ({
699
699
  rowCheckbox = false,
700
700
  checkedRows,
701
701
  onCheckRow,
702
+ onRowClick,
702
703
  isLoading = false,
703
704
  emptyContent,
704
705
  skeletonRow,
@@ -707,67 +708,54 @@ var TableBody = ({
707
708
  }) => {
708
709
  const renderTdSkeleton = (key, column) => {
709
710
  const isCheckbox = key.includes("checkbox");
710
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
711
- "td",
712
- {
713
- className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
714
- style: isCheckbox ? {
715
- width: "40px",
716
- minWidth: "40px",
717
- maxWidth: "40px",
718
- flexShrink: 0,
719
- flexGrow: 0,
720
- boxSizing: "border-box"
721
- } : column ? getCellStyle(column) : void 0,
722
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
723
- },
724
- key
725
- );
711
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
726
712
  };
727
713
  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
728
714
  "td",
729
715
  {
730
716
  className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
731
- style: {
732
- width: "40px",
733
- minWidth: "40px",
734
- maxWidth: "40px",
735
- flexShrink: 0,
736
- flexGrow: 0,
737
- boxSizing: "border-box"
738
- },
739
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
740
- }
717
+ style: { width: "40px", minWidth: "40px", textAlign: "center" },
718
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
719
+ },
720
+ `checkbox-${rowId}`
741
721
  );
742
722
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
743
723
  columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
744
724
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
745
725
  ] }, `skeleton-${rowIndex}`);
746
726
  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
747
- const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
748
- columns.map((column, colIdx) => {
749
- var _a;
750
- const value = row[column.field];
751
- const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
752
- const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
753
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
754
- "td",
755
- {
756
- className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
757
- style: getCellStyle(column),
758
- children: content
759
- },
760
- `${rowIndex}-${colIdx}`
761
- );
762
- }),
763
- rowCheckbox && renderCheckboxCell(row.id)
764
- ] }, rowIndex);
727
+ const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
728
+ "tr",
729
+ {
730
+ className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
731
+ onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
732
+ children: [
733
+ columns.map((column, colIdx) => {
734
+ var _a;
735
+ const value = row[column.field];
736
+ const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
737
+ const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
738
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
739
+ "td",
740
+ {
741
+ className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
742
+ style: getCellStyle(column),
743
+ children: content
744
+ },
745
+ `${row.id}-${column.field}-${colIdx}`
746
+ );
747
+ }),
748
+ rowCheckbox && renderCheckboxCell(row.id)
749
+ ]
750
+ },
751
+ row.id
752
+ );
765
753
  const renderRows = () => {
766
754
  if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
767
755
  if (!rows.length && emptyContent) return renderEmptyRow();
768
756
  return rows.map((row, index) => renderDataRow(row, index));
769
757
  };
770
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
758
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
771
759
  };
772
760
  var table_body_default = TableBody;
773
761
 
@@ -6114,7 +6102,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6114
6102
  color,
6115
6103
  size,
6116
6104
  skeletonRow,
6117
- onCheckedRowsChange
6105
+ onCheckedRowsChange,
6106
+ onRowClick
6118
6107
  } = { ...props, ...variantProps };
6119
6108
  const { page = 1, perPage = 15 } = pagination || {};
6120
6109
  const showPagination = pagination && totalData > 0 && !isLoading;
@@ -6158,8 +6147,18 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6158
6147
  return updated;
6159
6148
  });
6160
6149
  };
6150
+ const handleRowClick = (row, index, event) => {
6151
+ const target = event.target;
6152
+ if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
6153
+ return;
6154
+ }
6155
+ onRowClick == null ? void 0 : onRowClick(row, index, event);
6156
+ };
6161
6157
  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
6162
- const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
6158
+ const slots = (0, import_react5.useMemo)(
6159
+ () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
6160
+ [variantProps, onRowClick]
6161
+ );
6163
6162
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
6164
6163
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
6165
6164
  "table",
@@ -6178,7 +6177,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6178
6177
  size,
6179
6178
  color,
6180
6179
  rowCheckbox,
6181
- isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6180
+ hasCheckedRows: checkedRows.size > 0,
6182
6181
  onCheckAll: handleAllRowCheck,
6183
6182
  isLoading,
6184
6183
  classNames,
@@ -6196,8 +6195,9 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6196
6195
  rowCheckbox,
6197
6196
  checkedRows,
6198
6197
  onCheckRow: handleRowCheck,
6199
- emptyContent,
6198
+ onRowClick: handleRowClick,
6200
6199
  isLoading,
6200
+ emptyContent,
6201
6201
  skeletonRow,
6202
6202
  className: clsx(
6203
6203
  "transition-all duration-150 ease-out",
@@ -6306,6 +6306,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
6306
6306
  height: {
6307
6307
  narrow: {},
6308
6308
  wide: {}
6309
+ },
6310
+ rowClickable: {
6311
+ true: {
6312
+ tr: ["cursor-pointer"]
6313
+ }
6309
6314
  }
6310
6315
  },
6311
6316
  compoundVariants: [
@@ -6463,15 +6468,11 @@ var TableHead = ({
6463
6468
  color,
6464
6469
  size,
6465
6470
  rowCheckbox = false,
6466
- isCheckedAll,
6471
+ hasCheckedRows,
6467
6472
  isLoading = false,
6468
6473
  classNames,
6469
6474
  onCheckAll
6470
6475
  }) => {
6471
- const handleClickCheckAll = (e) => {
6472
- e.preventDefault();
6473
- onCheckAll(!isCheckedAll);
6474
- };
6475
6476
  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6476
6477
  "th",
6477
6478
  {
@@ -6497,11 +6498,11 @@ var TableHead = ({
6497
6498
  const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
6498
6499
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
6499
6500
  rowCheckbox && renderTh(
6500
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6501
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6501
6502
  checkbox_default,
6502
6503
  {
6503
6504
  size,
6504
- checked: isCheckedAll,
6505
+ checked: hasCheckedRows,
6505
6506
  onChange: (e) => onCheckAll(e.target.checked)
6506
6507
  }
6507
6508
  ) }),
@@ -1,24 +1,24 @@
1
1
  "use client";
2
2
  import {
3
3
  table_head_default
4
- } from "../../chunk-ZFKQOPMK.mjs";
4
+ } from "../../chunk-LYAPVC26.mjs";
5
5
  import "../../chunk-MZ76AA76.mjs";
6
6
  import "../../chunk-6PN3DGOE.mjs";
7
7
  import "../../chunk-DQRAFUDA.mjs";
8
8
  import "../../chunk-M37VBNB3.mjs";
9
9
  import "../../chunk-7B7LRG5J.mjs";
10
- import "../../chunk-LMHSWLH2.mjs";
10
+ import "../../chunk-CTEQVIV4.mjs";
11
11
  import "../../chunk-F3HENRVM.mjs";
12
12
  import "../../chunk-2GCSFWHD.mjs";
13
- import "../../chunk-MVL7HJSH.mjs";
13
+ import "../../chunk-I4NXNQWS.mjs";
14
14
  import "../../chunk-QZ3LVYJW.mjs";
15
- import "../../chunk-XZ5DXOJQ.mjs";
15
+ import "../../chunk-36SVU53P.mjs";
16
16
  import "../../chunk-ZYIIXWVY.mjs";
17
17
  import "../../chunk-JP4TEWP7.mjs";
18
- import "../../chunk-E3G5QXSH.mjs";
18
+ import "../../chunk-27Y6K5NK.mjs";
19
19
  import "../../chunk-RRONV7YA.mjs";
20
+ import "../../chunk-E3G5QXSH.mjs";
20
21
  import "../../chunk-CDXBML6O.mjs";
21
- import "../../chunk-27Y6K5NK.mjs";
22
22
  import "../../chunk-AC6TWLRT.mjs";
23
23
  export {
24
24
  table_head_default as default
@@ -21,6 +21,7 @@ interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "c
21
21
  isLoading?: boolean;
22
22
  skeletonRow?: number;
23
23
  onCheckedRowsChange?: (rows: TableRow[]) => void;
24
+ onRowClick?: (row: TableRow, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
24
25
  classNames?: SlotsToClasses<TableSlots>;
25
26
  }
26
27
  interface TableRef {
@@ -73,6 +74,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
73
74
  narrow: {};
74
75
  wide: {};
75
76
  };
77
+ rowClickable: {
78
+ true: {
79
+ tr: string[];
80
+ };
81
+ };
76
82
  }, {
77
83
  base: string[];
78
84
  table: string[];
@@ -126,6 +132,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
126
132
  narrow: {};
127
133
  wide: {};
128
134
  };
135
+ rowClickable: {
136
+ true: {
137
+ tr: string[];
138
+ };
139
+ };
129
140
  }, {
130
141
  base: string[];
131
142
  table: string[];
@@ -179,6 +190,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
179
190
  narrow: {};
180
191
  wide: {};
181
192
  };
193
+ rowClickable: {
194
+ true: {
195
+ tr: string[];
196
+ };
197
+ };
182
198
  }, {
183
199
  base: string[];
184
200
  table: string[];
@@ -21,6 +21,7 @@ interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "c
21
21
  isLoading?: boolean;
22
22
  skeletonRow?: number;
23
23
  onCheckedRowsChange?: (rows: TableRow[]) => void;
24
+ onRowClick?: (row: TableRow, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
24
25
  classNames?: SlotsToClasses<TableSlots>;
25
26
  }
26
27
  interface TableRef {
@@ -73,6 +74,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
73
74
  narrow: {};
74
75
  wide: {};
75
76
  };
77
+ rowClickable: {
78
+ true: {
79
+ tr: string[];
80
+ };
81
+ };
76
82
  }, {
77
83
  base: string[];
78
84
  table: string[];
@@ -126,6 +132,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
126
132
  narrow: {};
127
133
  wide: {};
128
134
  };
135
+ rowClickable: {
136
+ true: {
137
+ tr: string[];
138
+ };
139
+ };
129
140
  }, {
130
141
  base: string[];
131
142
  table: string[];
@@ -179,6 +190,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
179
190
  narrow: {};
180
191
  wide: {};
181
192
  };
193
+ rowClickable: {
194
+ true: {
195
+ tr: string[];
196
+ };
197
+ };
182
198
  }, {
183
199
  base: string[];
184
200
  table: string[];