npm - @juv/codego-react-ui - Versions diffs - 3.3.6 → 3.4.0 - Mend

@juv/codego-react-ui 3.3.6 → 3.4.0

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

package/dist/index.cjs CHANGED Viewed

@@ -6405,7 +6405,17 @@ var import_react_dom2 = require("react-dom");
 var import_axios3 = __toESM(require("axios"), 1);
 var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, onSuccess, onError }) {
+var csrfAxios = import_axios3.default.create();
+csrfAxios.interceptors.request.use((config) => {
+  const method = (config.method ?? "").toUpperCase();
+  if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+    if (!token) throw new Error('[Table] CSRF token not found. Add <meta name="csrf-token" content="..."> to your HTML <head>.');
+    config.headers.set("X-CSRF-Token", token);
+  }
+  return config;
+});
+function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
   const [data, setData] = React28.useState([]);
   const [columns, setColumns] = React28.useState([]);
   const [currentPage, setCurrentPage] = React28.useState(1);
@@ -6415,6 +6425,14 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
   const [tick, setTick] = React28.useState(0);
   const [searchValue, setSearchValue] = React28.useState("");
   const debounceTimer = React28.useRef(void 0);
+  React28.useEffect(() => {
+    if (hardReload) hardReload.current = () => setTick((t) => t + 1);
+  }, [hardReload]);
+  React28.useEffect(() => {
+    if (!refreshInterval || refreshInterval <= 0) return;
+    const id = setInterval(() => setTick((t) => t + 1), refreshInterval);
+    return () => clearInterval(id);
+  }, [refreshInterval]);
   React28.useEffect(() => {
     if (manual && tick === 0) return;
     let cancelled = false;
@@ -6486,6 +6504,7 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     error,
     goToPage: (page) => setCurrentPage(page),
     reload: () => setTick((t) => t + 1),
+    refresh: () => setTick((t) => t + 1),
     searchValue,
     onSearchChange: handleSearchChange
   };
@@ -6734,7 +6753,7 @@ function EditModal({
     setLoading(true);
     setError(null);
     try {
-      await import_axios3.default.put(`${baseUrl}/${itemId}/update`, form);
+      await csrfAxios.put(`${baseUrl}/${itemId}/update`, form);
       const updated = { ...item, ...form };
       if (notif && (notif.type ?? "toast") === "notification") {
         setBanner(true);
@@ -6825,7 +6844,7 @@ function DeleteModal({
     setLoading(true);
     setError(null);
     try {
-      await import_axios3.default.delete(`${baseUrl}/${itemId}/delete`);
+      await csrfAxios.delete(`${baseUrl}/${itemId}/delete`);
       onSuccess?.(item);
       onClose();
     } catch (err) {
@@ -6928,6 +6947,7 @@ function Table({
     setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? idKey;
+  const safeBaseUrl = defaultActions?.baseUrl.replace(/\/+$/, "") ?? "";
   const autoFields = React28.useMemo(() => {
     if (!tableData.length) return [];
     return Object.keys(tableData[0]).map((k) => ({
@@ -7329,7 +7349,7 @@ function Table({
       {
         item: editItem,
         fields: editFields,
-        baseUrl: defaultActions.baseUrl,
+        baseUrl: safeBaseUrl,
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
@@ -7340,6 +7360,7 @@ function Table({
             (prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r)
           );
           defaultActions.onSuccess?.("edit", updated);
+          defaultActions.onReload?.();
           const notif = defaultActions.onSuccessNotif;
           if (notif && (notif.type ?? "toast") === "toast") {
             toast({
@@ -7356,7 +7377,7 @@ function Table({
       DeleteModal,
       {
         item: deleteItem,
-        baseUrl: defaultActions.baseUrl,
+        baseUrl: safeBaseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         onClose: () => setDeleteItem(null),
@@ -7365,6 +7386,7 @@ function Table({
             (prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey]))
           );
           defaultActions.onSuccess?.("delete", deleted);
+          defaultActions.onReload?.();
           const notif = defaultActions.onSuccessNotif;
           if (notif && (notif.type ?? "toast") === "toast") {
             toast({

package/dist/index.d.cts CHANGED Viewed

@@ -256,6 +256,19 @@ interface UseServerTableOptions {
     transform?: (response: any) => any[];
     /** If true, hook won't fetch automatically. Call reload() manually */
     manual?: boolean;
+    /** If true, refetch data whenever reload() is called (e.g. after edit/delete) */
+    refresh?: boolean;
+    /** Auto-refresh interval in milliseconds. Omit or set 0 to disable */
+    refreshInterval?: number;
+    /**
+     * A ref that will be assigned the reload function.
+     * Call `hardReloadRef.current()` from any external button or function to trigger a refetch.
+     * @example
+     * const hardReloadRef = React.useRef<() => void>(() => {})
+     * useServerTable({ url, hardReload: hardReloadRef })
+     * // then anywhere: hardReloadRef.current()
+     */
+    hardReload?: React.MutableRefObject<() => void>;
     /** Called after successful data fetch */
     onSuccess?: (data: any[]) => void;
     /** Called on fetch error */
@@ -276,6 +289,8 @@ interface UseServerTableReturn<T> {
     error: string | null;
     goToPage: (page: number) => void;
     reload: () => void;
+    /** Manually trigger a data refresh (alias for reload, respects refresh option) */
+    refresh: () => void;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
 }
@@ -304,7 +319,7 @@ interface ServerPaginationProp {
  * })
  * ```
  */
-declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
+declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
 /**
  * Available field types for action forms (edit/view modals)
  * @type {ActionFieldType}
@@ -454,6 +469,8 @@ interface DefaultActionsConfig<T> {
     deleteButton?: ActionButtonConfig;
     /** Extra action buttons rendered alongside view/edit/delete */
     extraActions?: ExtraActionConfig<T>[];
+    /** Called after a successful edit or delete to trigger a server-side reload (e.g. pass reload from useServerTable) */
+    onReload?: () => void;
 }
 /**
  * Configuration for success notifications after edit/delete operations

package/dist/index.d.ts CHANGED Viewed

@@ -256,6 +256,19 @@ interface UseServerTableOptions {
     transform?: (response: any) => any[];
     /** If true, hook won't fetch automatically. Call reload() manually */
     manual?: boolean;
+    /** If true, refetch data whenever reload() is called (e.g. after edit/delete) */
+    refresh?: boolean;
+    /** Auto-refresh interval in milliseconds. Omit or set 0 to disable */
+    refreshInterval?: number;
+    /**
+     * A ref that will be assigned the reload function.
+     * Call `hardReloadRef.current()` from any external button or function to trigger a refetch.
+     * @example
+     * const hardReloadRef = React.useRef<() => void>(() => {})
+     * useServerTable({ url, hardReload: hardReloadRef })
+     * // then anywhere: hardReloadRef.current()
+     */
+    hardReload?: React.MutableRefObject<() => void>;
     /** Called after successful data fetch */
     onSuccess?: (data: any[]) => void;
     /** Called on fetch error */
@@ -276,6 +289,8 @@ interface UseServerTableReturn<T> {
     error: string | null;
     goToPage: (page: number) => void;
     reload: () => void;
+    /** Manually trigger a data refresh (alias for reload, respects refresh option) */
+    refresh: () => void;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
 }
@@ -304,7 +319,7 @@ interface ServerPaginationProp {
  * })
  * ```
  */
-declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
+declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
 /**
  * Available field types for action forms (edit/view modals)
  * @type {ActionFieldType}
@@ -454,6 +469,8 @@ interface DefaultActionsConfig<T> {
     deleteButton?: ActionButtonConfig;
     /** Extra action buttons rendered alongside view/edit/delete */
     extraActions?: ExtraActionConfig<T>[];
+    /** Called after a successful edit or delete to trigger a server-side reload (e.g. pass reload from useServerTable) */
+    onReload?: () => void;
 }
 /**
  * Configuration for success notifications after edit/delete operations

package/dist/index.global.js CHANGED Viewed

@@ -69551,7 +69551,17 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   var React28 = __toESM(require_react(), 1);
   var import_react_dom2 = __toESM(require_react_dom(), 1);
   var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
-  function useServerTable({ url: url2, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, onSuccess, onError }) {
+  var csrfAxios = axios_default.create();
+  csrfAxios.interceptors.request.use((config) => {
+    const method = (config.method ?? "").toUpperCase();
+    if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+      const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+      if (!token) throw new Error('[Table] CSRF token not found. Add <meta name="csrf-token" content="..."> to your HTML <head>.');
+      config.headers.set("X-CSRF-Token", token);
+    }
+    return config;
+  });
+  function useServerTable({ url: url2, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
     const [data, setData] = React28.useState([]);
     const [columns, setColumns] = React28.useState([]);
     const [currentPage, setCurrentPage] = React28.useState(1);
@@ -69561,6 +69571,14 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [tick, setTick] = React28.useState(0);
     const [searchValue, setSearchValue] = React28.useState("");
     const debounceTimer = React28.useRef(void 0);
+    React28.useEffect(() => {
+      if (hardReload) hardReload.current = () => setTick((t) => t + 1);
+    }, [hardReload]);
+    React28.useEffect(() => {
+      if (!refreshInterval || refreshInterval <= 0) return;
+      const id = setInterval(() => setTick((t) => t + 1), refreshInterval);
+      return () => clearInterval(id);
+    }, [refreshInterval]);
     React28.useEffect(() => {
       if (manual && tick === 0) return;
       let cancelled = false;
@@ -69632,6 +69650,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       error,
       goToPage: (page) => setCurrentPage(page),
       reload: () => setTick((t) => t + 1),
+      refresh: () => setTick((t) => t + 1),
       searchValue,
       onSearchChange: handleSearchChange
     };
@@ -69880,7 +69899,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setLoading(true);
       setError(null);
       try {
-        await axios_default.put(`${baseUrl}/${itemId}/update`, form);
+        await csrfAxios.put(`${baseUrl}/${itemId}/update`, form);
         const updated = { ...item, ...form };
         if (notif && (notif.type ?? "toast") === "notification") {
           setBanner(true);
@@ -69971,7 +69990,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setLoading(true);
       setError(null);
       try {
-        await axios_default.delete(`${baseUrl}/${itemId}/delete`);
+        await csrfAxios.delete(`${baseUrl}/${itemId}/delete`);
         onSuccess?.(item);
         onClose();
       } catch (err) {
@@ -70074,6 +70093,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setTableData(data ?? []);
     }, [data]);
     const actionIdKey = defaultActions?.idKey ?? idKey;
+    const safeBaseUrl = defaultActions?.baseUrl.replace(/\/+$/, "") ?? "";
     const autoFields = React28.useMemo(() => {
       if (!tableData.length) return [];
       return Object.keys(tableData[0]).map((k) => ({
@@ -70475,7 +70495,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         {
           item: editItem,
           fields: editFields,
-          baseUrl: defaultActions.baseUrl,
+          baseUrl: safeBaseUrl,
           itemId: String(editItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
           grid: defaultActions.editFormGrid,
@@ -70486,6 +70506,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               (prev) => prev.map((r2) => String(r2[actionIdKey]) === String(updated[actionIdKey]) ? updated : r2)
             );
             defaultActions.onSuccess?.("edit", updated);
+            defaultActions.onReload?.();
             const notif = defaultActions.onSuccessNotif;
             if (notif && (notif.type ?? "toast") === "toast") {
               toast({
@@ -70502,7 +70523,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         DeleteModal,
         {
           item: deleteItem,
-          baseUrl: defaultActions.baseUrl,
+          baseUrl: safeBaseUrl,
           itemId: String(deleteItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
           onClose: () => setDeleteItem(null),
@@ -70511,6 +70532,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               (prev) => prev.filter((r2) => String(r2[actionIdKey]) !== String(deleted[actionIdKey]))
             );
             defaultActions.onSuccess?.("delete", deleted);
+            defaultActions.onReload?.();
             const notif = defaultActions.onSuccessNotif;
             if (notif && (notif.type ?? "toast") === "toast") {
               toast({

package/dist/index.js CHANGED Viewed

@@ -6285,7 +6285,17 @@ import { createPortal as createPortal3 } from "react-dom";
 import axios3 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8, Search as Search5, Trash2 as Trash22, ChevronsUpDown, ChevronUp, ChevronDown as ChevronDown4, X as X9, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
-function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, onSuccess, onError }) {
+var csrfAxios = axios3.create();
+csrfAxios.interceptors.request.use((config) => {
+  const method = (config.method ?? "").toUpperCase();
+  if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+    if (!token) throw new Error('[Table] CSRF token not found. Add <meta name="csrf-token" content="..."> to your HTML <head>.');
+    config.headers.set("X-CSRF-Token", token);
+  }
+  return config;
+});
+function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
   const [data, setData] = React28.useState([]);
   const [columns, setColumns] = React28.useState([]);
   const [currentPage, setCurrentPage] = React28.useState(1);
@@ -6295,6 +6305,14 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
   const [tick, setTick] = React28.useState(0);
   const [searchValue, setSearchValue] = React28.useState("");
   const debounceTimer = React28.useRef(void 0);
+  React28.useEffect(() => {
+    if (hardReload) hardReload.current = () => setTick((t) => t + 1);
+  }, [hardReload]);
+  React28.useEffect(() => {
+    if (!refreshInterval || refreshInterval <= 0) return;
+    const id = setInterval(() => setTick((t) => t + 1), refreshInterval);
+    return () => clearInterval(id);
+  }, [refreshInterval]);
   React28.useEffect(() => {
     if (manual && tick === 0) return;
     let cancelled = false;
@@ -6366,6 +6384,7 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     error,
     goToPage: (page) => setCurrentPage(page),
     reload: () => setTick((t) => t + 1),
+    refresh: () => setTick((t) => t + 1),
     searchValue,
     onSearchChange: handleSearchChange
   };
@@ -6614,7 +6633,7 @@ function EditModal({
     setLoading(true);
     setError(null);
     try {
-      await axios3.put(`${baseUrl}/${itemId}/update`, form);
+      await csrfAxios.put(`${baseUrl}/${itemId}/update`, form);
       const updated = { ...item, ...form };
       if (notif && (notif.type ?? "toast") === "notification") {
         setBanner(true);
@@ -6705,7 +6724,7 @@ function DeleteModal({
     setLoading(true);
     setError(null);
     try {
-      await axios3.delete(`${baseUrl}/${itemId}/delete`);
+      await csrfAxios.delete(`${baseUrl}/${itemId}/delete`);
       onSuccess?.(item);
       onClose();
     } catch (err) {
@@ -6808,6 +6827,7 @@ function Table({
     setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? idKey;
+  const safeBaseUrl = defaultActions?.baseUrl.replace(/\/+$/, "") ?? "";
   const autoFields = React28.useMemo(() => {
     if (!tableData.length) return [];
     return Object.keys(tableData[0]).map((k) => ({
@@ -7209,7 +7229,7 @@ function Table({
       {
         item: editItem,
         fields: editFields,
-        baseUrl: defaultActions.baseUrl,
+        baseUrl: safeBaseUrl,
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
@@ -7220,6 +7240,7 @@ function Table({
             (prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r)
           );
           defaultActions.onSuccess?.("edit", updated);
+          defaultActions.onReload?.();
           const notif = defaultActions.onSuccessNotif;
           if (notif && (notif.type ?? "toast") === "toast") {
             toast({
@@ -7236,7 +7257,7 @@ function Table({
       DeleteModal,
       {
         item: deleteItem,
-        baseUrl: defaultActions.baseUrl,
+        baseUrl: safeBaseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         onClose: () => setDeleteItem(null),
@@ -7245,6 +7266,7 @@ function Table({
             (prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey]))
           );
           defaultActions.onSuccess?.("delete", deleted);
+          defaultActions.onReload?.();
           const notif = defaultActions.onSuccessNotif;
           if (notif && (notif.type ?? "toast") === "toast") {
             toast({

package/package.json CHANGED Viewed

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