@deepnoid/ui 0.1.135 → 0.1.137

package/dist/{chunk-ZHYRFDNF.mjs → chunk-3YR6VGGQ.mjs}

@@ -1,10 +1,7 @@
 "use client";
-import {
-  skeleton_default
-} from "./chunk-6PN3DGOE.mjs";
 import {
   pagination_default
-} from "./chunk-4URRLVNR.mjs";
+} from "./chunk-4JOD47VZ.mjs";
 import {
   scrollArea_default
 } from "./chunk-M37VBNB3.mjs";
@@ -29,7 +26,7 @@ import {
 import { tv } from "tailwind-variants";
 
 // src/components/table/table-body.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var TableBody = ({
   slots,
   rows,
@@ -42,13 +39,9 @@ var TableBody = ({
   onRowClick,
   isLoading = false,
   emptyContent,
-  skeletonRow,
   classNames,
   className
 }) => {
-  const renderTdSkeleton = (key, column) => {
-    return /* @__PURE__ */ jsx("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ jsx(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
-  };
   const renderCheckboxCell = (rowId, rowIndex) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -58,10 +51,6 @@ var TableBody = ({
     },
     `checkbox-${rowId}-${rowIndex}`
   );
-  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
-    rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
-  ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ jsx("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
   const renderDataRow = (row, rowIndex) => /* @__PURE__ */ jsxs(
     "tr",
@@ -89,12 +78,18 @@ var TableBody = ({
     },
     `${row.id}-${rowIndex}`
   );
-  const renderRows = () => {
-    if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ jsx(Fragment, {});
-    if (!rows.length && emptyContent) return renderEmptyRow();
-    return rows.map((row, index) => renderDataRow(row, index));
-  };
-  return /* @__PURE__ */ jsx("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className: clsx(
+        slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }),
+        className,
+        "transition-all duration-200 ease-in-out",
+        isLoading && slots.tbodyLoading({ class: classNames == null ? void 0 : classNames.tbodyLoading })
+      ),
+      children: !rows.length && emptyContent ? renderEmptyRow() : rows.map((row, index) => renderDataRow(row, index))
+    }
+  );
 };
 var table_body_default = TableBody;
 
@@ -115,13 +110,13 @@ var Table = forwardRef((originalProps, ref) => {
     variant,
     color,
     size,
-    skeletonRow,
+    checkedRows,
     onCheckedRowsChange,
     onRowClick
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
-  const showPagination = pagination && totalData > 0 && !isLoading;
-  const [checkedRows, setCheckedRows] = useState(/* @__PURE__ */ new Set());
+  const showPagination = pagination && totalData > 0;
+  const [checkedRowIds, setCheckedRowIds] = useState(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
   const tableMinWidth = useMemo(() => {
     const columnsWidth = columns.reduce((total, column) => {
       if (column.width) return total + column.width;
@@ -132,30 +127,30 @@ var Table = forwardRef((originalProps, ref) => {
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
   useEffect(() => {
-    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRows));
-  }, [checkedRows]);
+    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
+  }, [checkedRowIds]);
   useEffect(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
-    const checkedRowIds = Array.from(checkedRows);
-    const hasValidCheckedRows = checkedRowIds.every((id) => currentRowIds.has(id));
+    const ids = Array.from(checkedRowIds);
+    const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
     if (!hasValidCheckedRows) {
-      setCheckedRows(/* @__PURE__ */ new Set());
+      setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
     }
   }, [rows.map((row) => row.id).join(",")]);
   useImperativeHandle(
     ref,
     () => ({
-      checkedRows,
-      setCheckedRows
+      checkedRowIds,
+      setCheckedRowIds
     }),
-    [checkedRows]
+    [checkedRowIds]
   );
   const handleAllRowCheck = (checked) => {
     const updated = checked ? new Set(rows.map((row) => row.id)) : /* @__PURE__ */ new Set();
-    setCheckedRows(updated);
+    setCheckedRowIds(updated);
   };
   const handleRowCheck = (id, checked) => {
-    setCheckedRows((prev) => {
+    setCheckedRowIds((prev) => {
       const updated = new Set(prev);
       checked ? updated.add(id) : updated.delete(id);
       return updated;
@@ -191,9 +186,8 @@ var Table = forwardRef((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              hasCheckedRows: rows.length > 0 && rows.every((row) => checkedRows.has(row.id)),
+              hasCheckedRows: rows.length > 0 && rows.every((row) => checkedRowIds.has(row.id)),
               onCheckAll: handleAllRowCheck,
-              isLoading,
               classNames,
               slots
             }
@@ -207,17 +201,12 @@ var Table = forwardRef((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              checkedRows,
+              checkedRows: checkedRowIds,
               onCheckRow: handleRowCheck,
               onRowClick: handleRowClick,
               isLoading,
               emptyContent,
-              skeletonRow,
-              className: clsx(
-                "transition-all duration-150 ease-out",
-                isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
-                classNames
-              )
+              classNames
             }
           )
         ]
@@ -277,7 +266,8 @@ var tableStyle = tv({
       "[&>*]:z-1",
       "[&>*]:relative",
       "align-middle"
-    ]
+    ],
+    tbodyLoading: []
   },
   variants: {
     variant: {
@@ -485,7 +475,6 @@ var TableHead = ({
   size,
   rowCheckbox = false,
   hasCheckedRows,
-  isLoading = false,
   classNames,
   onCheckAll
 }) => {
@@ -505,13 +494,7 @@ var TableHead = ({
     },
     key
   );
-  const renderSkeletonRow = () => /* @__PURE__ */ jsx3("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs3("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
-    columns.map(
-      (column, idx) => renderTh(/* @__PURE__ */ jsx3(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
-    ),
-    rowCheckbox && renderTh(/* @__PURE__ */ jsx3(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
-  ] }) });
-  const renderContentRow = () => /* @__PURE__ */ jsx3("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs3("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+  return /* @__PURE__ */ jsx3("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs3("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
     rowCheckbox && renderTh(
       /* @__PURE__ */ jsx3("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx3(
@@ -527,7 +510,6 @@ var TableHead = ({
       true
     )
   ] }) });
-  return isLoading ? renderSkeletonRow() : renderContentRow();
 };
 var table_head_default = TableHead;
 

package/dist/{chunk-4URRLVNR.mjs → chunk-4JOD47VZ.mjs}

@@ -30,7 +30,7 @@ var Pagination = forwardRef((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
-    showFirstLastButtons,
+    showFirstLastButtons = true,
     handleChangePage,
     variant,
     size

package/dist/components/pagination/index.js

@@ -5535,7 +5535,7 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
-    showFirstLastButtons,
+    showFirstLastButtons = true,
     handleChangePage,
     variant,
     size

package/dist/components/pagination/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "../../chunk-4URRLVNR.mjs";
+} from "../../chunk-4JOD47VZ.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-GL4E6YGW.mjs";

package/dist/components/pagination/pagination.js

@@ -5533,7 +5533,7 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
-    showFirstLastButtons,
+    showFirstLastButtons = true,
     handleChangePage,
     variant,
     size

package/dist/components/pagination/pagination.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   pagination_default
-} from "../../chunk-4URRLVNR.mjs";
+} from "../../chunk-4JOD47VZ.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-GL4E6YGW.mjs";