npm - shadcn-ui-react - Versions diffs - 0.5.2 → 0.5.3 - Mend

shadcn-ui-react 0.5.2 → 0.5.3

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 (3) hide show

package/dist/index.cjs CHANGED Viewed

@@ -8391,7 +8391,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 // src/shared/data-table.tsx
-var import_react36 = __toESM(require("react"), 1);
+var import_react36 = require("react");
 var import_framer_motion2 = require("framer-motion");
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
@@ -8425,46 +8425,40 @@ function DataTable({
   heightClassName = "h-[clamp(22rem,80vh,44rem)] supports-[height:100dvh]:h-[clamp(22rem,80dvh,44rem)]"
 }) {
   const safePageCount = Math.max(pageCount != null ? pageCount : 1, 1);
-  const [pagination, setPagination] = import_react36.default.useState({
-    pageIndex: Math.max(page - 1, 0),
-    pageSize: perPage
-  });
-  (0, import_react36.useEffect)(() => {
-    setPagination((prev) => {
-      const nextIndex = Math.max(page - 1, 0);
-      const nextSize = perPage;
-      if (prev.pageIndex === nextIndex && prev.pageSize === nextSize) return prev;
-      return { pageIndex: nextIndex, pageSize: nextSize };
-    });
-  }, [page, perPage]);
-  (0, import_react36.useEffect)(() => {
-    setPagination((prev) => {
-      const maxIndex = Math.max(safePageCount - 1, 0);
-      const clamped = Math.min(prev.pageIndex, maxIndex);
-      if (clamped === prev.pageIndex) return prev;
-      return __spreadProps(__spreadValues({}, prev), { pageIndex: clamped });
-    });
-  }, [safePageCount]);
+  const pageIndex = Math.min(Math.max(page - 1, 0), safePageCount - 1);
+  const pageSize = Math.max(perPage, 1);
+  const paginationState = (0, import_react36.useMemo)(
+    () => ({ pageIndex, pageSize }),
+    [pageIndex, pageSize]
+  );
   const table = (0, import_react_table.useReactTable)({
     data,
     columns,
     pageCount: safePageCount,
+    state: { pagination: paginationState },
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
-    state: { pagination },
-    onPaginationChange: setPagination,
-    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
     manualPagination: true,
-    manualFiltering: true
+    manualFiltering: true,
+    autoResetAll: false,
+    autoResetPageIndex: false
   });
   const clickable = !!onClick;
-  (0, import_react36.useEffect)(() => {
-    onPageChange == null ? void 0 : onPageChange(pagination.pageIndex + 1);
-  }, [pagination.pageIndex, onPageChange]);
   const pageKey = (0, import_react36.useMemo)(
-    () => `${pagination.pageIndex}-${pagination.pageSize}-${data.length}`,
-    [pagination.pageIndex, pagination.pageSize, data.length]
+    () => `${pageIndex}-${pageSize}-${data.length}`,
+    [pageIndex, pageSize, data.length]
   );
+  const goToPage = (nextPageIndex) => {
+    const clamped = Math.min(Math.max(nextPageIndex, 0), safePageCount - 1);
+    if (clamped === pageIndex) return;
+    onPageChange == null ? void 0 : onPageChange(clamped + 1);
+  };
+  const changePageSize = (newSize) => {
+    const size = Math.max(Number(newSize) || 1, 1);
+    if (size === pageSize) return;
+    onPageSizeChange == null ? void 0 : onPageSizeChange(size);
+    onPageChange == null ? void 0 : onPageChange(1);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
@@ -8486,10 +8480,27 @@ function DataTable({
                   TableHeader,
                   {
                     className: cn(
-                      headerClassName,
-                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : ""
+                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : "",
+                      headerClassName
                     ),
-                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: cn("hover:bg-transparent", rowClassName), children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHead, { className: cn("whitespace-nowrap", headerClassName), children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id))
+                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                      TableRow,
+                      {
+                        className: cn("hover:bg-transparent", rowClassName),
+                        children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          TableHead,
+                          {
+                            className: cn("whitespace-nowrap", headerClassName),
+                            children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          },
+                          header.id
+                        ))
+                      },
+                      headerGroup.id
+                    ))
                   }
                 ),
                 animate ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_framer_motion2.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -8509,10 +8520,20 @@ function DataTable({
                           rowClassName,
                           clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
                         ),
-                        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cellClassName, children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cellClassName, children: (0, import_react_table.flexRender)(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        ) }, cell.id))
                       },
                       row.id
-                    )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) })
+                    )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                      TableCell,
+                      {
+                        colSpan: columns.length,
+                        className: "h-28 text-center text-muted-foreground",
+                        children: "No results."
+                      }
+                    ) })
                   },
                   pageKey
                 ) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -8524,10 +8545,20 @@ function DataTable({
                       rowClassName,
                       clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
                     ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(cellClassName), children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(cellClassName), children: (0, import_react_table.flexRender)(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id))
                   },
                   row.id
-                )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) }) })
+                )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  TableCell,
+                  {
+                    colSpan: columns.length,
+                    className: "h-28 text-center text-muted-foreground",
+                    children: "No results."
+                  }
+                ) }) })
               ]
             }
           ),
@@ -8556,15 +8587,10 @@ function DataTable({
               /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                 Select2,
                 {
-                  value: `${pagination.pageSize}`,
-                  onValueChange: (value) => {
-                    const newSize = Number(value);
-                    setPagination((p) => __spreadProps(__spreadValues({}, p), { pageSize: newSize, pageIndex: 0 }));
-                    onPageSizeChange == null ? void 0 : onPageSizeChange(newSize);
-                    onPageChange == null ? void 0 : onPageChange(1);
-                  },
+                  value: `${pageSize}`,
+                  onValueChange: (value) => changePageSize(Number(value)),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pagination.pageSize }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pageSize }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
                   ]
                 }
@@ -8574,7 +8600,7 @@ function DataTable({
               /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "hidden sm:flex min-w-35 items-center justify-center text-sm font-medium", children: [
                 pageLabel,
                 " ",
-                pagination.pageIndex + 1,
+                pageIndex + 1,
                 " ",
                 ofLabel,
                 " ",
@@ -8586,8 +8612,8 @@ function DataTable({
                   "aria-label": "Go to first page",
                   variant: "outline",
                   className: "hidden h-8 w-8 p-0 lg:flex",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: 0 })),
-                  disabled: pagination.pageIndex === 0,
+                  onClick: () => goToPage(0),
+                  disabled: pageIndex === 0,
                   children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowLeftIcon, { className: "h-4 w-4" })
                 }
               ),
@@ -8597,8 +8623,8 @@ function DataTable({
                   "aria-label": "Go to previous page",
                   variant: "outline",
                   className: "h-8 w-8 p-0",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: Math.max(p.pageIndex - 1, 0) })),
-                  disabled: pagination.pageIndex === 0,
+                  onClick: () => goToPage(pageIndex - 1),
+                  disabled: pageIndex === 0,
                   children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
                 }
               ),
@@ -8608,10 +8634,8 @@ function DataTable({
                   "aria-label": "Go to next page",
                   variant: "outline",
                   className: "h-8 w-8 p-0",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), {
-                    pageIndex: Math.min(p.pageIndex + 1, safePageCount - 1)
-                  })),
-                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  onClick: () => goToPage(pageIndex + 1),
+                  disabled: pageIndex + 1 >= safePageCount,
                   children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
                 }
               ),
@@ -8621,8 +8645,8 @@ function DataTable({
                   "aria-label": "Go to last page",
                   variant: "outline",
                   className: "hidden h-8 w-8 p-0 lg:flex",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: safePageCount - 1 })),
-                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  onClick: () => goToPage(safePageCount - 1),
+                  disabled: pageIndex + 1 >= safePageCount,
                   children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowRightIcon, { className: "h-4 w-4" })
                 }
               )
@@ -8630,7 +8654,7 @@ function DataTable({
             /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "sm:hidden w-full text-center text-xs text-muted-foreground", children: [
               pageLabel,
               " ",
-              pagination.pageIndex + 1,
+              pageIndex + 1,
               " ",
               ofLabel,
               " ",

package/dist/index.js CHANGED Viewed

@@ -8182,14 +8182,13 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 // src/shared/data-table.tsx
-import React67, { useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { AnimatePresence, motion as motion2 } from "framer-motion";
 import { DoubleArrowLeftIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
 import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
-  getPaginationRowModel,
   useReactTable
 } from "@tanstack/react-table";
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon6 } from "lucide-react";
@@ -8222,46 +8221,40 @@ function DataTable({
   heightClassName = "h-[clamp(22rem,80vh,44rem)] supports-[height:100dvh]:h-[clamp(22rem,80dvh,44rem)]"
 }) {
   const safePageCount = Math.max(pageCount != null ? pageCount : 1, 1);
-  const [pagination, setPagination] = React67.useState({
-    pageIndex: Math.max(page - 1, 0),
-    pageSize: perPage
-  });
-  useEffect4(() => {
-    setPagination((prev) => {
-      const nextIndex = Math.max(page - 1, 0);
-      const nextSize = perPage;
-      if (prev.pageIndex === nextIndex && prev.pageSize === nextSize) return prev;
-      return { pageIndex: nextIndex, pageSize: nextSize };
-    });
-  }, [page, perPage]);
-  useEffect4(() => {
-    setPagination((prev) => {
-      const maxIndex = Math.max(safePageCount - 1, 0);
-      const clamped = Math.min(prev.pageIndex, maxIndex);
-      if (clamped === prev.pageIndex) return prev;
-      return __spreadProps(__spreadValues({}, prev), { pageIndex: clamped });
-    });
-  }, [safePageCount]);
+  const pageIndex = Math.min(Math.max(page - 1, 0), safePageCount - 1);
+  const pageSize = Math.max(perPage, 1);
+  const paginationState = useMemo3(
+    () => ({ pageIndex, pageSize }),
+    [pageIndex, pageSize]
+  );
   const table = useReactTable({
     data,
     columns,
     pageCount: safePageCount,
+    state: { pagination: paginationState },
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    state: { pagination },
-    onPaginationChange: setPagination,
-    getPaginationRowModel: getPaginationRowModel(),
     manualPagination: true,
-    manualFiltering: true
+    manualFiltering: true,
+    autoResetAll: false,
+    autoResetPageIndex: false
   });
   const clickable = !!onClick;
-  useEffect4(() => {
-    onPageChange == null ? void 0 : onPageChange(pagination.pageIndex + 1);
-  }, [pagination.pageIndex, onPageChange]);
   const pageKey = useMemo3(
-    () => `${pagination.pageIndex}-${pagination.pageSize}-${data.length}`,
-    [pagination.pageIndex, pagination.pageSize, data.length]
+    () => `${pageIndex}-${pageSize}-${data.length}`,
+    [pageIndex, pageSize, data.length]
   );
+  const goToPage = (nextPageIndex) => {
+    const clamped = Math.min(Math.max(nextPageIndex, 0), safePageCount - 1);
+    if (clamped === pageIndex) return;
+    onPageChange == null ? void 0 : onPageChange(clamped + 1);
+  };
+  const changePageSize = (newSize) => {
+    const size = Math.max(Number(newSize) || 1, 1);
+    if (size === pageSize) return;
+    onPageSizeChange == null ? void 0 : onPageSizeChange(size);
+    onPageChange == null ? void 0 : onPageChange(1);
+  };
   return /* @__PURE__ */ jsxs23(
     "div",
     {
@@ -8283,10 +8276,27 @@ function DataTable({
                   TableHeader,
                   {
                     className: cn(
-                      headerClassName,
-                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : ""
+                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : "",
+                      headerClassName
                     ),
-                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: cn("hover:bg-transparent", rowClassName), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(TableHead, { className: cn("whitespace-nowrap", headerClassName), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id))
+                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(
+                      TableRow,
+                      {
+                        className: cn("hover:bg-transparent", rowClassName),
+                        children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(
+                          TableHead,
+                          {
+                            className: cn("whitespace-nowrap", headerClassName),
+                            children: header.isPlaceholder ? null : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          },
+                          header.id
+                        ))
+                      },
+                      headerGroup.id
+                    ))
                   }
                 ),
                 animate ? /* @__PURE__ */ jsx48(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx48(
@@ -8306,10 +8316,20 @@ function DataTable({
                           rowClassName,
                           clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
                         ),
-                        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cellClassName, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cellClassName, children: flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        ) }, cell.id))
                       },
                       row.id
-                    )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) })
+                    )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(
+                      TableCell,
+                      {
+                        colSpan: columns.length,
+                        className: "h-28 text-center text-muted-foreground",
+                        children: "No results."
+                      }
+                    ) })
                   },
                   pageKey
                 ) }) : /* @__PURE__ */ jsx48(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
@@ -8321,10 +8341,20 @@ function DataTable({
                       rowClassName,
                       clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
                     ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(cellClassName), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(cellClassName), children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id))
                   },
                   row.id
-                )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) }) })
+                )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(
+                  TableCell,
+                  {
+                    colSpan: columns.length,
+                    className: "h-28 text-center text-muted-foreground",
+                    children: "No results."
+                  }
+                ) }) })
               ]
             }
           ),
@@ -8353,15 +8383,10 @@ function DataTable({
               /* @__PURE__ */ jsxs23(
                 Select2,
                 {
-                  value: `${pagination.pageSize}`,
-                  onValueChange: (value) => {
-                    const newSize = Number(value);
-                    setPagination((p) => __spreadProps(__spreadValues({}, p), { pageSize: newSize, pageIndex: 0 }));
-                    onPageSizeChange == null ? void 0 : onPageSizeChange(newSize);
-                    onPageChange == null ? void 0 : onPageChange(1);
-                  },
+                  value: `${pageSize}`,
+                  onValueChange: (value) => changePageSize(Number(value)),
                   children: [
-                    /* @__PURE__ */ jsx48(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: pagination.pageSize }) }),
+                    /* @__PURE__ */ jsx48(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: pageSize }) }),
                     /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
                   ]
                 }
@@ -8371,7 +8396,7 @@ function DataTable({
               /* @__PURE__ */ jsxs23("div", { className: "hidden sm:flex min-w-35 items-center justify-center text-sm font-medium", children: [
                 pageLabel,
                 " ",
-                pagination.pageIndex + 1,
+                pageIndex + 1,
                 " ",
                 ofLabel,
                 " ",
@@ -8383,8 +8408,8 @@ function DataTable({
                   "aria-label": "Go to first page",
                   variant: "outline",
                   className: "hidden h-8 w-8 p-0 lg:flex",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: 0 })),
-                  disabled: pagination.pageIndex === 0,
+                  onClick: () => goToPage(0),
+                  disabled: pageIndex === 0,
                   children: /* @__PURE__ */ jsx48(DoubleArrowLeftIcon, { className: "h-4 w-4" })
                 }
               ),
@@ -8394,8 +8419,8 @@ function DataTable({
                   "aria-label": "Go to previous page",
                   variant: "outline",
                   className: "h-8 w-8 p-0",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: Math.max(p.pageIndex - 1, 0) })),
-                  disabled: pagination.pageIndex === 0,
+                  onClick: () => goToPage(pageIndex - 1),
+                  disabled: pageIndex === 0,
                   children: /* @__PURE__ */ jsx48(ChevronLeftIcon2, { className: "h-4 w-4" })
                 }
               ),
@@ -8405,10 +8430,8 @@ function DataTable({
                   "aria-label": "Go to next page",
                   variant: "outline",
                   className: "h-8 w-8 p-0",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), {
-                    pageIndex: Math.min(p.pageIndex + 1, safePageCount - 1)
-                  })),
-                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  onClick: () => goToPage(pageIndex + 1),
+                  disabled: pageIndex + 1 >= safePageCount,
                   children: /* @__PURE__ */ jsx48(ChevronRightIcon6, { className: "h-4 w-4" })
                 }
               ),
@@ -8418,8 +8441,8 @@ function DataTable({
                   "aria-label": "Go to last page",
                   variant: "outline",
                   className: "hidden h-8 w-8 p-0 lg:flex",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: safePageCount - 1 })),
-                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  onClick: () => goToPage(safePageCount - 1),
+                  disabled: pageIndex + 1 >= safePageCount,
                   children: /* @__PURE__ */ jsx48(DoubleArrowRightIcon, { className: "h-4 w-4" })
                 }
               )
@@ -8427,7 +8450,7 @@ function DataTable({
             /* @__PURE__ */ jsxs23("div", { className: "sm:hidden w-full text-center text-xs text-muted-foreground", children: [
               pageLabel,
               " ",
-              pagination.pageIndex + 1,
+              pageIndex + 1,
               " ",
               ofLabel,
               " ",
@@ -8483,7 +8506,7 @@ function DataTableSkeleton({
 // src/shared/fileupload.tsx
 import { AvatarIcon } from "@radix-ui/react-icons";
 import { CameraIcon } from "lucide-react";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { useDropzone } from "react-dropzone";
 import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 function FileUpload({
@@ -8522,7 +8545,7 @@ function FileUpload({
 }
 function ImagePreview({ file }) {
   const [objectUrl, setObjectUrl] = useState5(null);
-  useEffect5(() => {
+  useEffect4(() => {
     const url = URL.createObjectURL(file);
     setObjectUrl(url);
     return () => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",