@deepnoid/ui 0.1.92 → 0.1.94

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 (36) hide show
  1. package/.turbo/turbo-build.log +133 -133
  2. package/dist/{chunk-Q3JMHIW5.mjs → chunk-IY4AY6JJ.mjs} +1 -1
  3. package/dist/{chunk-D6OJWEZM.mjs → chunk-SGOE2HGI.mjs} +1 -1
  4. package/dist/{chunk-ZFKQOPMK.mjs → chunk-UFAY3EIU.mjs} +57 -56
  5. package/dist/{chunk-V5OCV42N.mjs → chunk-Z4YJ274G.mjs} +7 -1
  6. package/dist/components/breadcrumb/breadcrumb.mjs +1 -1
  7. package/dist/components/breadcrumb/index.mjs +1 -1
  8. package/dist/components/button/button.js +7 -1
  9. package/dist/components/button/button.mjs +1 -1
  10. package/dist/components/button/index.js +7 -1
  11. package/dist/components/button/index.mjs +1 -1
  12. package/dist/components/fileUpload/fileUpload.js +7 -1
  13. package/dist/components/fileUpload/fileUpload.mjs +2 -2
  14. package/dist/components/fileUpload/index.js +7 -1
  15. package/dist/components/fileUpload/index.mjs +2 -2
  16. package/dist/components/modal/index.js +7 -1
  17. package/dist/components/modal/index.mjs +2 -2
  18. package/dist/components/modal/modal.js +7 -1
  19. package/dist/components/modal/modal.mjs +2 -2
  20. package/dist/components/table/index.js +57 -56
  21. package/dist/components/table/index.mjs +1 -1
  22. package/dist/components/table/table-body.d.mts +2 -1
  23. package/dist/components/table/table-body.d.ts +2 -1
  24. package/dist/components/table/table-body.js +57 -56
  25. package/dist/components/table/table-body.mjs +1 -1
  26. package/dist/components/table/table-head.d.mts +2 -2
  27. package/dist/components/table/table-head.d.ts +2 -2
  28. package/dist/components/table/table-head.js +57 -56
  29. package/dist/components/table/table-head.mjs +1 -1
  30. package/dist/components/table/table.d.mts +16 -0
  31. package/dist/components/table/table.d.ts +16 -0
  32. package/dist/components/table/table.js +57 -56
  33. package/dist/components/table/table.mjs +1 -1
  34. package/dist/index.js +64 -57
  35. package/dist/index.mjs +15 -15
  36. package/package.json +1 -1
@@ -695,15 +695,11 @@ var TableHead = ({
695
695
  color,
696
696
  size,
697
697
  rowCheckbox = false,
698
- isCheckedAll,
698
+ hasCheckedRows,
699
699
  isLoading = false,
700
700
  classNames,
701
701
  onCheckAll
702
702
  }) => {
703
- const handleClickCheckAll = (e) => {
704
- e.preventDefault();
705
- onCheckAll(!isCheckedAll);
706
- };
707
703
  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
708
704
  "th",
709
705
  {
@@ -729,11 +725,11 @@ var TableHead = ({
729
725
  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: [
730
726
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
731
727
  rowCheckbox && renderTh(
732
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
728
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
733
729
  checkbox_default,
734
730
  {
735
731
  size,
736
- checked: isCheckedAll,
732
+ checked: hasCheckedRows,
737
733
  onChange: (e) => onCheckAll(e.target.checked)
738
734
  }
739
735
  ) }),
@@ -757,6 +753,7 @@ var TableBody = ({
757
753
  rowCheckbox = false,
758
754
  checkedRows,
759
755
  onCheckRow,
756
+ onRowClick,
760
757
  isLoading = false,
761
758
  emptyContent,
762
759
  skeletonRow,
@@ -765,67 +762,54 @@ var TableBody = ({
765
762
  }) => {
766
763
  const renderTdSkeleton = (key, column) => {
767
764
  const isCheckbox = key.includes("checkbox");
768
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
769
- "td",
770
- {
771
- className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
772
- style: isCheckbox ? {
773
- width: "40px",
774
- minWidth: "40px",
775
- maxWidth: "40px",
776
- flexShrink: 0,
777
- flexGrow: 0,
778
- boxSizing: "border-box"
779
- } : column ? getCellStyle(column) : void 0,
780
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
781
- },
782
- key
783
- );
765
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
784
766
  };
785
767
  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
786
768
  "td",
787
769
  {
788
770
  className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
789
- style: {
790
- width: "40px",
791
- minWidth: "40px",
792
- maxWidth: "40px",
793
- flexShrink: 0,
794
- flexGrow: 0,
795
- boxSizing: "border-box"
796
- },
797
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
798
- }
771
+ style: { width: "40px", minWidth: "40px", textAlign: "center" },
772
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
773
+ },
774
+ `checkbox-${rowId}`
799
775
  );
800
776
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
801
777
  columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
802
778
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
803
779
  ] }, `skeleton-${rowIndex}`);
804
780
  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
805
- const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
806
- columns.map((column, colIdx) => {
807
- var _a;
808
- const value = row[column.field];
809
- const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
810
- const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
811
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
812
- "td",
813
- {
814
- className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
815
- style: getCellStyle(column),
816
- children: content
817
- },
818
- `${rowIndex}-${colIdx}`
819
- );
820
- }),
821
- rowCheckbox && renderCheckboxCell(row.id)
822
- ] }, rowIndex);
781
+ const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
782
+ "tr",
783
+ {
784
+ className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
785
+ onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
786
+ children: [
787
+ columns.map((column, colIdx) => {
788
+ var _a;
789
+ const value = row[column.field];
790
+ const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
791
+ const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
792
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
793
+ "td",
794
+ {
795
+ className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
796
+ style: getCellStyle(column),
797
+ children: content
798
+ },
799
+ `${row.id}-${column.field}-${colIdx}`
800
+ );
801
+ }),
802
+ rowCheckbox && renderCheckboxCell(row.id)
803
+ ]
804
+ },
805
+ row.id
806
+ );
823
807
  const renderRows = () => {
824
808
  if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
825
809
  if (!rows.length && emptyContent) return renderEmptyRow();
826
810
  return rows.map((row, index) => renderDataRow(row, index));
827
811
  };
828
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
812
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
829
813
  };
830
814
  var table_body_default = TableBody;
831
815
 
@@ -6172,7 +6156,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6172
6156
  color,
6173
6157
  size,
6174
6158
  skeletonRow,
6175
- onCheckedRowsChange
6159
+ onCheckedRowsChange,
6160
+ onRowClick
6176
6161
  } = { ...props, ...variantProps };
6177
6162
  const { page = 1, perPage = 15 } = pagination || {};
6178
6163
  const showPagination = pagination && totalData > 0 && !isLoading;
@@ -6216,8 +6201,18 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6216
6201
  return updated;
6217
6202
  });
6218
6203
  };
6204
+ const handleRowClick = (row, index, event) => {
6205
+ const target = event.target;
6206
+ if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
6207
+ return;
6208
+ }
6209
+ onRowClick == null ? void 0 : onRowClick(row, index, event);
6210
+ };
6219
6211
  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
6220
- const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
6212
+ const slots = (0, import_react5.useMemo)(
6213
+ () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
6214
+ [variantProps, onRowClick]
6215
+ );
6221
6216
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
6222
6217
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
6223
6218
  "table",
@@ -6236,7 +6231,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6236
6231
  size,
6237
6232
  color,
6238
6233
  rowCheckbox,
6239
- isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6234
+ hasCheckedRows: checkedRows.size > 0,
6240
6235
  onCheckAll: handleAllRowCheck,
6241
6236
  isLoading,
6242
6237
  classNames,
@@ -6254,8 +6249,9 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6254
6249
  rowCheckbox,
6255
6250
  checkedRows,
6256
6251
  onCheckRow: handleRowCheck,
6257
- emptyContent,
6252
+ onRowClick: handleRowClick,
6258
6253
  isLoading,
6254
+ emptyContent,
6259
6255
  skeletonRow,
6260
6256
  className: clsx(
6261
6257
  "transition-all duration-150 ease-out",
@@ -6365,6 +6361,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
6365
6361
  height: {
6366
6362
  narrow: {},
6367
6363
  wide: {}
6364
+ },
6365
+ rowClickable: {
6366
+ true: {
6367
+ tr: ["cursor-pointer"]
6368
+ }
6368
6369
  }
6369
6370
  },
6370
6371
  compoundVariants: [
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  getCellStyle,
4
4
  table_default
5
- } from "../../chunk-ZFKQOPMK.mjs";
5
+ } from "../../chunk-UFAY3EIU.mjs";
6
6
  import "../../chunk-MZ76AA76.mjs";
7
7
  import "../../chunk-6PN3DGOE.mjs";
8
8
  import "../../chunk-DQRAFUDA.mjs";
package/dist/index.js CHANGED
@@ -5946,7 +5946,13 @@ var Button = (0, import_react6.forwardRef)((originalProps, ref) => {
5946
5946
  var _a, _b, _c;
5947
5947
  (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
5948
5948
  (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
5949
- }
5949
+ },
5950
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
5951
+ startContent && renderContent(startContent),
5952
+ childElement.props.children,
5953
+ endContent && renderContent(endContent),
5954
+ !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ripple_default, { ...getRippleProps() })
5955
+ ] }) })
5950
5956
  };
5951
5957
  return (0, import_react6.cloneElement)(childElement, mergedProps);
5952
5958
  }
@@ -8034,15 +8040,11 @@ var TableHead = ({
8034
8040
  color,
8035
8041
  size,
8036
8042
  rowCheckbox = false,
8037
- isCheckedAll,
8043
+ hasCheckedRows,
8038
8044
  isLoading = false,
8039
8045
  classNames,
8040
8046
  onCheckAll
8041
8047
  }) => {
8042
- const handleClickCheckAll = (e) => {
8043
- e.preventDefault();
8044
- onCheckAll(!isCheckedAll);
8045
- };
8046
8048
  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
8047
8049
  "th",
8048
8050
  {
@@ -8068,11 +8070,11 @@ var TableHead = ({
8068
8070
  const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
8069
8071
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
8070
8072
  rowCheckbox && renderTh(
8071
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
8073
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
8072
8074
  checkbox_default,
8073
8075
  {
8074
8076
  size,
8075
- checked: isCheckedAll,
8077
+ checked: hasCheckedRows,
8076
8078
  onChange: (e) => onCheckAll(e.target.checked)
8077
8079
  }
8078
8080
  ) }),
@@ -8096,6 +8098,7 @@ var TableBody = ({
8096
8098
  rowCheckbox = false,
8097
8099
  checkedRows,
8098
8100
  onCheckRow,
8101
+ onRowClick,
8099
8102
  isLoading = false,
8100
8103
  emptyContent,
8101
8104
  skeletonRow,
@@ -8104,67 +8107,54 @@ var TableBody = ({
8104
8107
  }) => {
8105
8108
  const renderTdSkeleton = (key, column) => {
8106
8109
  const isCheckbox = key.includes("checkbox");
8107
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
8108
- "td",
8109
- {
8110
- className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
8111
- style: isCheckbox ? {
8112
- width: "40px",
8113
- minWidth: "40px",
8114
- maxWidth: "40px",
8115
- flexShrink: 0,
8116
- flexGrow: 0,
8117
- boxSizing: "border-box"
8118
- } : column ? getCellStyle(column) : void 0,
8119
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
8120
- },
8121
- key
8122
- );
8110
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
8123
8111
  };
8124
8112
  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
8125
8113
  "td",
8126
8114
  {
8127
8115
  className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
8128
- style: {
8129
- width: "40px",
8130
- minWidth: "40px",
8131
- maxWidth: "40px",
8132
- flexShrink: 0,
8133
- flexGrow: 0,
8134
- boxSizing: "border-box"
8135
- },
8136
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
8137
- }
8116
+ style: { width: "40px", minWidth: "40px", textAlign: "center" },
8117
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
8118
+ },
8119
+ `checkbox-${rowId}`
8138
8120
  );
8139
8121
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
8140
8122
  columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
8141
8123
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
8142
8124
  ] }, `skeleton-${rowIndex}`);
8143
8125
  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
8144
- const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
8145
- columns.map((column, colIdx) => {
8146
- var _a;
8147
- const value = row[column.field];
8148
- const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
8149
- const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
8150
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
8151
- "td",
8152
- {
8153
- className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
8154
- style: getCellStyle(column),
8155
- children: content
8156
- },
8157
- `${rowIndex}-${colIdx}`
8158
- );
8159
- }),
8160
- rowCheckbox && renderCheckboxCell(row.id)
8161
- ] }, rowIndex);
8126
+ const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
8127
+ "tr",
8128
+ {
8129
+ className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
8130
+ onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
8131
+ children: [
8132
+ columns.map((column, colIdx) => {
8133
+ var _a;
8134
+ const value = row[column.field];
8135
+ const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
8136
+ const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
8137
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
8138
+ "td",
8139
+ {
8140
+ className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
8141
+ style: getCellStyle(column),
8142
+ children: content
8143
+ },
8144
+ `${row.id}-${column.field}-${colIdx}`
8145
+ );
8146
+ }),
8147
+ rowCheckbox && renderCheckboxCell(row.id)
8148
+ ]
8149
+ },
8150
+ row.id
8151
+ );
8162
8152
  const renderRows = () => {
8163
8153
  if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
8164
8154
  if (!rows.length && emptyContent) return renderEmptyRow();
8165
8155
  return rows.map((row, index) => renderDataRow(row, index));
8166
8156
  };
8167
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
8157
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
8168
8158
  };
8169
8159
  var table_body_default = TableBody;
8170
8160
 
@@ -8508,7 +8498,8 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
8508
8498
  color,
8509
8499
  size,
8510
8500
  skeletonRow,
8511
- onCheckedRowsChange
8501
+ onCheckedRowsChange,
8502
+ onRowClick
8512
8503
  } = { ...props, ...variantProps };
8513
8504
  const { page = 1, perPage = 15 } = pagination || {};
8514
8505
  const showPagination = pagination && totalData > 0 && !isLoading;
@@ -8552,8 +8543,18 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
8552
8543
  return updated;
8553
8544
  });
8554
8545
  };
8546
+ const handleRowClick = (row, index, event) => {
8547
+ const target = event.target;
8548
+ if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
8549
+ return;
8550
+ }
8551
+ onRowClick == null ? void 0 : onRowClick(row, index, event);
8552
+ };
8555
8553
  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
8556
- const slots = (0, import_react17.useMemo)(() => tableStyle(variantProps), [variantProps]);
8554
+ const slots = (0, import_react17.useMemo)(
8555
+ () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
8556
+ [variantProps, onRowClick]
8557
+ );
8557
8558
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
8558
8559
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
8559
8560
  "table",
@@ -8572,7 +8573,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
8572
8573
  size,
8573
8574
  color,
8574
8575
  rowCheckbox,
8575
- isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
8576
+ hasCheckedRows: checkedRows.size > 0,
8576
8577
  onCheckAll: handleAllRowCheck,
8577
8578
  isLoading,
8578
8579
  classNames,
@@ -8590,8 +8591,9 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
8590
8591
  rowCheckbox,
8591
8592
  checkedRows,
8592
8593
  onCheckRow: handleRowCheck,
8593
- emptyContent,
8594
+ onRowClick: handleRowClick,
8594
8595
  isLoading,
8596
+ emptyContent,
8595
8597
  skeletonRow,
8596
8598
  className: clsx(
8597
8599
  "transition-all duration-150 ease-out",
@@ -8701,6 +8703,11 @@ var tableStyle = (0, import_tailwind_variants18.tv)({
8701
8703
  height: {
8702
8704
  narrow: {},
8703
8705
  wide: {}
8706
+ },
8707
+ rowClickable: {
8708
+ true: {
8709
+ tr: ["cursor-pointer"]
8710
+ }
8704
8711
  }
8705
8712
  },
8706
8713
  compoundVariants: [
package/dist/index.mjs CHANGED
@@ -3,15 +3,10 @@ import "./chunk-MBLZYQCN.mjs";
3
3
  import {
4
4
  tree_default
5
5
  } from "./chunk-Y5QV7T6D.mjs";
6
- import "./chunk-LUWGOKLG.mjs";
7
- import {
8
- ToastProvider,
9
- useToast
10
- } from "./chunk-D3HZG3CH.mjs";
11
- import "./chunk-ZOTHPHXA.mjs";
6
+ import "./chunk-RRAZM5D3.mjs";
12
7
  import {
13
- toast_default
14
- } from "./chunk-4BJPJ54Q.mjs";
8
+ textarea_default
9
+ } from "./chunk-6Q2BXHJL.mjs";
15
10
  import "./chunk-HIE2YRGA.mjs";
16
11
  import {
17
12
  tooltip_default
@@ -21,15 +16,20 @@ import "./chunk-WSIADHVC.mjs";
21
16
  import "./chunk-DX3KXNP6.mjs";
22
17
  import {
23
18
  table_default
24
- } from "./chunk-ZFKQOPMK.mjs";
19
+ } from "./chunk-UFAY3EIU.mjs";
25
20
  import "./chunk-3MY6LO7N.mjs";
26
21
  import {
27
22
  tabs_default
28
23
  } from "./chunk-4LP3QDAE.mjs";
29
- import "./chunk-RRAZM5D3.mjs";
24
+ import "./chunk-LUWGOKLG.mjs";
30
25
  import {
31
- textarea_default
32
- } from "./chunk-6Q2BXHJL.mjs";
26
+ ToastProvider,
27
+ useToast
28
+ } from "./chunk-D3HZG3CH.mjs";
29
+ import "./chunk-ZOTHPHXA.mjs";
30
+ import {
31
+ toast_default
32
+ } from "./chunk-4BJPJ54Q.mjs";
33
33
  import "./chunk-QCEKPS7U.mjs";
34
34
  import {
35
35
  select_default
@@ -60,7 +60,7 @@ import {
60
60
  import "./chunk-DJOG6Z35.mjs";
61
61
  import {
62
62
  modal_default
63
- } from "./chunk-D6OJWEZM.mjs";
63
+ } from "./chunk-SGOE2HGI.mjs";
64
64
  import "./chunk-7B7LRG5J.mjs";
65
65
  import {
66
66
  pagination_default
@@ -70,7 +70,7 @@ import "./chunk-32GA3YW4.mjs";
70
70
  import "./chunk-RLXOHILK.mjs";
71
71
  import {
72
72
  fileUpload_default
73
- } from "./chunk-Q3JMHIW5.mjs";
73
+ } from "./chunk-IY4AY6JJ.mjs";
74
74
  import "./chunk-2GCSFWHD.mjs";
75
75
  import {
76
76
  input_default
@@ -128,7 +128,7 @@ import {
128
128
  } from "./chunk-ITWKPTSD.mjs";
129
129
  import {
130
130
  button_default
131
- } from "./chunk-V5OCV42N.mjs";
131
+ } from "./chunk-Z4YJ274G.mjs";
132
132
  import {
133
133
  icon_button_default
134
134
  } from "./chunk-P6CRHHI3.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepnoid/ui",
3
- "version": "0.1.92",
3
+ "version": "0.1.94",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "exports": {