@deepnoid/ui 0.0.95 → 0.0.97

package/dist/components/table/table.d.ts

@@ -13,7 +13,9 @@ interface Props extends Omit<React__default.ComponentPropsWithRef<"table">, "ref
     onRowAction?: (e: React__default.MouseEvent, params: TableRow) => void;
 }
 interface TableRef {
+    checkedRows: Set<number>;
     selectedRows: Set<number>;
+    setCheckedRows: (rows: Set<number>) => void;
     setSelectedRows: (rows: Set<number>) => void;
 }
 declare const Table: React__default.ForwardRefExoticComponent<Props & TableVariantProps & React__default.RefAttributes<TableRef>>;
@@ -65,7 +67,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };
@@ -151,7 +159,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };
@@ -224,7 +238,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };
@@ -297,7 +317,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };
@@ -383,7 +409,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };
@@ -469,7 +501,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };
@@ -542,7 +580,13 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
-    isSelectedRow: {
+    isMultiSelect: {
+        true: {};
+    };
+    isChecked: {
+        true: {};
+    };
+    isCheckedRow: {
         true: {
             tr: string;
         };

package/dist/components/table/table.js

@@ -318,10 +318,10 @@ var TableHead = ({
   size,
   color,
   isExpanded,
-  isSelected,
-  isAllSelected,
+  isChecked,
+  isCheckedAll,
   classNames,
-  onSelectAll
+  onCheckAll
 }) => {
   const getTheadProps = (0, import_react2.useCallback)(
     () => ({
@@ -341,12 +341,12 @@ var TableHead = ({
     }),
     [classNames == null ? void 0 : classNames.th, slots]
   );
-  const handleClickSelectAll = (e) => {
+  const handleClickCheckAll = (e) => {
     e.preventDefault();
-    onSelectAll(!isAllSelected);
+    onCheckAll(!isCheckedAll);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickSelectAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isAllSelected, classNames: { wrapper: "bg-background" } }) }),
+    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" } }) }),
     isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
     columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
   ] }) });
@@ -3937,13 +3937,16 @@ var TableBody = ({
   columns,
   isExpanded,
   isSelected,
-  isSelectedRow,
+  isChecked,
+  isCheckedRow,
   selectedRows,
+  checkedRows,
   emptyContent,
-  onSelectRow,
+  onCheckedRow,
+  onSelectedRow,
   onRowAction
 }) => {
-  const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
+  const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isChecked ? 1 : 0);
   const [expandedRows, setExpandedRows] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
   (0, import_react4.useEffect)(() => {
     setExpandedRows(/* @__PURE__ */ new Set());
@@ -3956,11 +3959,14 @@ var TableBody = ({
   );
   const getTrProps = (0, import_react4.useCallback)(
     (index) => ({
-      className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr })),
+      className: clsx(
+        slots.tr({ class: [classNames == null ? void 0 : classNames.tr, (isSelected || isCheckedRow || isExpanded) && "cursor-pointer"] })
+      ),
       "data-odd": index % 2 !== 0,
-      "data-expanded": expandedRows.has(index)
+      "data-expanded": expandedRows.has(index),
+      "data-selected": selectedRows == null ? void 0 : selectedRows.has(index)
     }),
-    [classNames == null ? void 0 : classNames.tr, expandedRows, slots]
+    [classNames == null ? void 0 : classNames.tr, expandedRows, isCheckedRow, isExpanded, isSelected, selectedRows, slots]
   );
   const getExpandedContentProps = (0, import_react4.useCallback)(
     () => ({
@@ -4011,7 +4017,8 @@ var TableBody = ({
     e.stopPropagation();
     e.preventDefault();
     if (isExpanded) onChangeExpandedRow(index);
-    if (isSelected && isSelectedRow) onSelectRow(index);
+    if (isSelected) onSelectedRow(index);
+    if (isChecked && isCheckedRow) onCheckedRow(index);
     const row = rows[index];
     if (row) {
       (_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
@@ -4021,7 +4028,7 @@ var TableBody = ({
     const keys = Object.keys(row);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onSelectRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size, checked: selectedRows.has(rowIndex) }) }),
+        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) }) }),
         isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon_default,
           {
@@ -4044,7 +4051,14 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
   const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
+  (0, import_react6.useEffect)(() => {
+    setCheckedRows(/* @__PURE__ */ new Set());
+  }, [rows]);
+  (0, import_react6.useEffect)(() => {
+    setSelectedRows(/* @__PURE__ */ new Set());
+  }, [rows]);
   const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
   const getBaseProps = (0, import_react6.useCallback)(
     (props2) => ({
@@ -4060,21 +4074,41 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
-  const handleSelectAll = (isSelected) => {
-    const newSelectedRows = isSelected ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
-    setSelectedRows(newSelectedRows);
+  const handleCheckAll = (isChecked) => {
+    const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
+    setCheckedRows(newCheckedRows);
+  };
+  const handleCheckRow = (index) => {
+    const newCheckedRows = new Set(checkedRows);
+    if (newCheckedRows.has(index)) {
+      newCheckedRows.delete(index);
+    } else {
+      newCheckedRows.add(index);
+    }
+    setCheckedRows(newCheckedRows);
   };
   const handleSelectRow = (index) => {
     const newSelectedRows = new Set(selectedRows);
-    if (newSelectedRows.has(index)) {
-      newSelectedRows.delete(index);
+    if (originalProps.isMultiSelect) {
+      if (newSelectedRows.has(index)) {
+        newSelectedRows.delete(index);
+      } else {
+        newSelectedRows.add(index);
+      }
     } else {
-      newSelectedRows.add(index);
+      if (newSelectedRows.has(index)) {
+        newSelectedRows.delete(index);
+      } else {
+        newSelectedRows.clear();
+        newSelectedRows.add(index);
+      }
     }
     setSelectedRows(newSelectedRows);
   };
   (0, import_react6.useImperativeHandle)(ref, () => ({
+    checkedRows,
     selectedRows,
+    setCheckedRows,
     setSelectedRows
   }));
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
@@ -4086,10 +4120,10 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
         columns,
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isSelected: originalProps.isSelected,
+        isChecked: originalProps.isChecked,
         isExpanded: originalProps.isExpanded,
-        onSelectAll: handleSelectAll,
-        isAllSelected: selectedRows.size === rows.length
+        onCheckAll: handleCheckAll,
+        isCheckedAll: checkedRows.size === rows.length
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -4101,13 +4135,16 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
-        isSelectedRow: originalProps.isSelectedRow,
+        isChecked: originalProps.isChecked,
+        isCheckedRow: originalProps.isCheckedRow,
         isExpanded: originalProps.isExpanded,
         isLoading,
         classNames,
         emptyContent,
         selectedRows,
-        onSelectRow: handleSelectRow,
+        checkedRows,
+        onCheckedRow: handleCheckRow,
+        onSelectedRow: handleSelectRow,
         onRowAction
       }
     )
@@ -4118,13 +4155,13 @@ var table_default = Table;
 var table = (0, import_tailwind_variants3.tv)({
   slots: {
     base: "flex flex-col relative gap-4",
-    table: "min-w-full h-auto",
+    table: "w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "",
-    tr: ["group", "outline-none"],
+    tbody: "w-full",
+    tr: ["group", "outline-none", "w-full"],
     th: [
       "text-foreground",
-      "text-center",
+      "!text-center",
       "align-middle",
       "whitespace-nowrap",
       "font-normal",
@@ -4143,7 +4180,6 @@ var table = (0, import_tailwind_variants3.tv)({
       "[&>*]:z-1",
       "[&>*]:relative",
       "transition duration-200",
-      "data-[selected=true]:before:opacity-100",
       "group-data-[disabled=true]:text-default-300"
     ],
     tfoot: "",
@@ -4209,7 +4245,13 @@ var table = (0, import_tailwind_variants3.tv)({
     isSelected: {
       true: {}
     },
-    isSelectedRow: {
+    isMultiSelect: {
+      true: {}
+    },
+    isChecked: {
+      true: {}
+    },
+    isCheckedRow: {
       true: {
         tr: "cursor-pointer"
       }
@@ -4241,7 +4283,7 @@ var table = (0, import_tailwind_variants3.tv)({
     color: "primary",
     variant: "solid",
     size: "md",
-    isSelected: false,
+    isChecked: false,
     isExpanded: false,
     isCompact: false,
     hideHeader: false,
@@ -4254,7 +4296,7 @@ var table = (0, import_tailwind_variants3.tv)({
       color: "primary",
       class: {
         thead: "[&>tr]:bg-primary-light",
-        tr: "data-[expanded=true]:bg-primary-soft"
+        tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
       }
     },
     {
@@ -4262,7 +4304,7 @@ var table = (0, import_tailwind_variants3.tv)({
       color: "secondary",
       class: {
         thead: "[&>tr]:bg-secondary-light",
-        tr: "data-[expanded=true]:bg-secondary-soft"
+        tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
       }
     },
     {
@@ -4270,7 +4312,7 @@ var table = (0, import_tailwind_variants3.tv)({
       color: "neutral",
       class: {
         thead: "[&>tr]:bg-trans-light",
-        tr: "data-[expanded=true]:bg-neutral-soft"
+        tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
       }
     },
     {
@@ -4278,7 +4320,7 @@ var table = (0, import_tailwind_variants3.tv)({
       color: "primary",
       class: {
         thead: "border-primary-light",
-        tr: "data-[expanded=true]:bg-primary-soft"
+        tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
       }
     },
     {
@@ -4286,7 +4328,7 @@ var table = (0, import_tailwind_variants3.tv)({
       color: "secondary",
       class: {
         thead: "border-secondary-light",
-        tr: "data-[expanded=true]:bg-secondary-soft"
+        tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
       }
     },
     {
@@ -4294,7 +4336,7 @@ var table = (0, import_tailwind_variants3.tv)({
       color: "neutral",
       class: {
         thead: "border-trans-light",
-        tr: "data-[expanded=true]:bg-neutral-soft"
+        tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
       }
     },
     {

package/dist/components/table/table.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   table_default
-} from "../../chunk-JWFWFBQM.mjs";
-import "../../chunk-PR277HT5.mjs";
-import "../../chunk-VG4644BG.mjs";
+} from "../../chunk-PNFR2J4Q.mjs";
+import "../../chunk-QDDEQY63.mjs";
+import "../../chunk-PO3ADNA5.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-ANYPMQH4.mjs";
 import "../../chunk-27Y6K5NK.mjs";