@juv/codego-react-ui 3.1.1 → 3.1.2

package/dist/index.cjs

@@ -5193,9 +5193,9 @@ function DataGrid({
   const [viewItem, setViewItem] = React24.useState(null);
   const [editItem, setEditItem] = React24.useState(null);
   const [deleteItem, setDeleteItem] = React24.useState(null);
-  const [tableData, setTableData] = React24.useState(data);
+  const [tableData, setTableData] = React24.useState(data ?? []);
   React24.useEffect(() => {
-    setTableData(data);
+    setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? (typeof rowKey === "string" ? rowKey : "id");
   const autoFields = React24.useMemo(() => {
@@ -5240,7 +5240,7 @@ function DataGrid({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, []);
-  let processed = data.filter(
+  let processed = (data ?? []).filter(
     (row) => Object.entries(filters).every(([k, v]) => {
       if (!v) return true;
       const cell = String(row[k] ?? "").toLowerCase();
@@ -5438,7 +5438,16 @@ function DataGrid({
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
       const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
-      const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+      const pills = [];
+      if (totalServerPages <= 7) {
+        for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+      } else if (cp <= 4) {
+        pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+      } else if (cp >= totalServerPages - 3) {
+        pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+      } else {
+        pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
           pagination.total,
@@ -5457,18 +5466,20 @@ function DataGrid({
               children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.ChevronLeft, { className: "h-4 w-4" })
             }
           ),
-          pageLinks.map((p) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            "button",
-            {
-              onClick: () => goToPage(p),
-              className: cn(
-                "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-              ),
-              children: p
-            },
-            p
-          )),
+          pills.map(
+            (p, i) => p < 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              "button",
+              {
+                onClick: () => goToPage(p),
+                className: cn(
+                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
+                children: p
+              },
+              p
+            )
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
@@ -9926,9 +9937,9 @@ function Table({
   const [viewItem, setViewItem] = React44.useState(null);
   const [editItem, setEditItem] = React44.useState(null);
   const [deleteItem, setDeleteItem] = React44.useState(null);
-  const [tableData, setTableData] = React44.useState(data);
+  const [tableData, setTableData] = React44.useState(data ?? []);
   React44.useEffect(() => {
-    setTableData(data);
+    setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? idKey;
   const autoFields = React44.useMemo(() => {
@@ -10251,7 +10262,16 @@ function Table({
       serverPagination && (() => {
         const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
         const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
-        const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+        const pills = [];
+        if (totalServerPages <= 7) {
+          for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+        } else if (cp <= 4) {
+          pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+        } else if (cp >= totalServerPages - 3) {
+          pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+        } else {
+          pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+        }
         return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
             pagination2.total,
@@ -10270,18 +10290,20 @@ function Table({
                 children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react28.ChevronLeft, { className: "h-4 w-4" })
               }
             ),
-            pageLinks.map((p) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-              "button",
-              {
-                onClick: () => goToPage(p),
-                className: cn(
-                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-                ),
-                children: p
-              },
-              p
-            )),
+            pills.map(
+              (p, i) => p < 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                "button",
+                {
+                  onClick: () => goToPage(p),
+                  className: cn(
+                    "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                    p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  children: p
+                },
+                p
+              )
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               "button",
               {

package/dist/index.global.js

@@ -68317,9 +68317,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [viewItem, setViewItem] = React24.useState(null);
     const [editItem, setEditItem] = React24.useState(null);
     const [deleteItem, setDeleteItem] = React24.useState(null);
-    const [tableData, setTableData] = React24.useState(data);
+    const [tableData, setTableData] = React24.useState(data ?? []);
     React24.useEffect(() => {
-      setTableData(data);
+      setTableData(data ?? []);
     }, [data]);
     const actionIdKey = defaultActions?.idKey ?? (typeof rowKey === "string" ? rowKey : "id");
     const autoFields = React24.useMemo(() => {
@@ -68364,7 +68364,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
     }, []);
-    let processed = data.filter(
+    let processed = (data ?? []).filter(
       (row) => Object.entries(filters).every(([k, v]) => {
         if (!v) return true;
         const cell = String(row[k] ?? "").toLowerCase();
@@ -68562,7 +68562,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       serverPagination && (() => {
         const { pagination, currentPage: cp, goToPage } = serverPagination;
         const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
-        const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+        const pills = [];
+        if (totalServerPages <= 7) {
+          for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+        } else if (cp <= 4) {
+          pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+        } else if (cp >= totalServerPages - 3) {
+          pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+        } else {
+          pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+        }
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
             pagination.total,
@@ -68581,18 +68590,20 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                 children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronLeft, { className: "h-4 w-4" })
               }
             ),
-            pageLinks.map((p) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              "button",
-              {
-                onClick: () => goToPage(p),
-                className: cn(
-                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-                ),
-                children: p
-              },
-              p
-            )),
+            pills.map(
+              (p, i) => p < 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "button",
+                {
+                  onClick: () => goToPage(p),
+                  className: cn(
+                    "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                    p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  children: p
+                },
+                p
+              )
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
@@ -73461,9 +73472,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [viewItem, setViewItem] = React46.useState(null);
     const [editItem, setEditItem] = React46.useState(null);
     const [deleteItem, setDeleteItem] = React46.useState(null);
-    const [tableData, setTableData] = React46.useState(data);
+    const [tableData, setTableData] = React46.useState(data ?? []);
     React46.useEffect(() => {
-      setTableData(data);
+      setTableData(data ?? []);
     }, [data]);
     const actionIdKey = defaultActions?.idKey ?? idKey;
     const autoFields = React46.useMemo(() => {
@@ -73786,7 +73797,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         serverPagination && (() => {
           const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
           const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
-          const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+          const pills = [];
+          if (totalServerPages <= 7) {
+            for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+          } else if (cp <= 4) {
+            pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+          } else if (cp >= totalServerPages - 3) {
+            pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+          } else {
+            pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+          }
           return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
               pagination2.total,
@@ -73805,18 +73825,20 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                   children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ChevronLeft, { className: "h-4 w-4" })
                 }
               ),
-              pageLinks.map((p) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                "button",
-                {
-                  onClick: () => goToPage(p),
-                  className: cn(
-                    "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                    p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-                  ),
-                  children: p
-                },
-                p
-              )),
+              pills.map(
+                (p, i) => p < 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  "button",
+                  {
+                    onClick: () => goToPage(p),
+                    className: cn(
+                      "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                      p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
+                    children: p
+                  },
+                  p
+                )
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 "button",
                 {

package/dist/index.js

@@ -5078,9 +5078,9 @@ function DataGrid({
   const [viewItem, setViewItem] = React24.useState(null);
   const [editItem, setEditItem] = React24.useState(null);
   const [deleteItem, setDeleteItem] = React24.useState(null);
-  const [tableData, setTableData] = React24.useState(data);
+  const [tableData, setTableData] = React24.useState(data ?? []);
   React24.useEffect(() => {
-    setTableData(data);
+    setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? (typeof rowKey === "string" ? rowKey : "id");
   const autoFields = React24.useMemo(() => {
@@ -5125,7 +5125,7 @@ function DataGrid({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, []);
-  let processed = data.filter(
+  let processed = (data ?? []).filter(
     (row) => Object.entries(filters).every(([k, v]) => {
       if (!v) return true;
       const cell = String(row[k] ?? "").toLowerCase();
@@ -5323,7 +5323,16 @@ function DataGrid({
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
       const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
-      const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+      const pills = [];
+      if (totalServerPages <= 7) {
+        for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+      } else if (cp <= 4) {
+        pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+      } else if (cp >= totalServerPages - 3) {
+        pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+      } else {
+        pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+      }
       return /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ jsxs27("span", { className: "text-xs text-muted-foreground", children: [
           pagination.total,
@@ -5342,18 +5351,20 @@ function DataGrid({
               children: /* @__PURE__ */ jsx28(ChevronLeft5, { className: "h-4 w-4" })
             }
           ),
-          pageLinks.map((p) => /* @__PURE__ */ jsx28(
-            "button",
-            {
-              onClick: () => goToPage(p),
-              className: cn(
-                "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-              ),
-              children: p
-            },
-            p
-          )),
+          pills.map(
+            (p, i) => p < 0 ? /* @__PURE__ */ jsx28("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ jsx28(
+              "button",
+              {
+                onClick: () => goToPage(p),
+                className: cn(
+                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
+                children: p
+              },
+              p
+            )
+          ),
           /* @__PURE__ */ jsx28(
             "button",
             {
@@ -9811,9 +9822,9 @@ function Table({
   const [viewItem, setViewItem] = React44.useState(null);
   const [editItem, setEditItem] = React44.useState(null);
   const [deleteItem, setDeleteItem] = React44.useState(null);
-  const [tableData, setTableData] = React44.useState(data);
+  const [tableData, setTableData] = React44.useState(data ?? []);
   React44.useEffect(() => {
-    setTableData(data);
+    setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? idKey;
   const autoFields = React44.useMemo(() => {
@@ -10136,7 +10147,16 @@ function Table({
       serverPagination && (() => {
         const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
         const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
-        const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+        const pills = [];
+        if (totalServerPages <= 7) {
+          for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+        } else if (cp <= 4) {
+          pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+        } else if (cp >= totalServerPages - 3) {
+          pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+        } else {
+          pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+        }
         return /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ jsxs48("span", { className: "text-xs text-muted-foreground", children: [
             pagination2.total,
@@ -10155,18 +10175,20 @@ function Table({
                 children: /* @__PURE__ */ jsx55(ChevronLeft6, { className: "h-4 w-4" })
               }
             ),
-            pageLinks.map((p) => /* @__PURE__ */ jsx55(
-              "button",
-              {
-                onClick: () => goToPage(p),
-                className: cn(
-                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-                ),
-                children: p
-              },
-              p
-            )),
+            pills.map(
+              (p, i) => p < 0 ? /* @__PURE__ */ jsx55("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ jsx55(
+                "button",
+                {
+                  onClick: () => goToPage(p),
+                  className: cn(
+                    "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                    p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  children: p
+                },
+                p
+              )
+            ),
             /* @__PURE__ */ jsx55(
               "button",
               {

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",