@kingteza/crud-component 1.32.0 → 1.33.0

package/dist/common/report/SelectFieldInReport.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("antd"),s=require("react"),V=require("../select/SelectComponent.cjs.js"),M=require("../../util/ValidationUtil.cjs.js"),q=({className:b,onSelect:p,label:a,required:d,name:o,mode:u,items:r,selectingMode:j})=>{const n=l.Form.useFormInstance(),[x,k]=s.useState(!0);s.useEffect(()=>{if(r&&x){const e=r.filter(c=>c.alreadySelected).map(c=>c.id);n==null||n.setFieldsValue({[o]:u==="multiple"?e:e==null?void 0:e[0]}),k(!1)}},[x,n,r,u,o]);const[F,h]=s.useState(!1),[C,f]=s.useState(void 0),O=s.useCallback(()=>{h(!1),n.setFieldsValue({[o]:C})},[C,n,o]),g=s.useCallback(()=>{h(!1),f(void 0)},[]),S=s.useCallback(()=>{f(n.getFieldValue(o)),h(!0)},[n,o]),i=j==="checkbox",y=s.useCallback(e=>{i&&e&&S()},[i,S]),I=s.useMemo(()=>{const e=[...r];return e.sort((c,v)=>c.label.localeCompare(v.label)),e},[r]);return t.jsxs(t.Fragment,{children:[i&&t.jsx(l.Modal,{open:F,onCancel:O,onOk:g,destroyOnHidden:!0,title:a,children:t.jsx(l.Form.Item,{name:o,required:d,rules:[...d?M.required(a):[]],className:b,children:t.jsx(l.Checkbox.Group,{onChange:p,style:{width:"100%"},children:t.jsx(l.List,{size:"small",style:{width:"100%"},dataSource:I,renderItem:e=>t.jsx(l.List.Item,{style:{width:"100%"},children:t.jsx(l.List.Item.Meta,{avatar:t.jsx(l.Checkbox,{value:e.id,disabled:e.lock}),title:e.label})},e.id)})})})}),t.jsx(V,{required:d,label:a,mode:u,className:b,name:o,onSelect:p,items:r,showSearch:!1,...i?{open:!1,onOpenChange:y}:{},itemBuilder:e=>t.jsx(l.Select.Option,{value:e.id,disabled:e.lock,children:e.label},e.id)})]})};exports.SelectFieldInReport=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("antd"),l=require("react"),V=require("../select/SelectComponent.cjs.js"),M=require("../../util/ValidationUtil.cjs.js"),q=({className:p,onSelect:x,label:a,required:d,name:o,mode:u,items:r,selectingMode:j})=>{const n=s.Form.useFormInstance(),[b,k]=l.useState(!0);l.useEffect(()=>{if(r&&b){const e=r.filter(c=>c.alreadySelected).map(c=>c.id);n==null||n.setFieldsValue({[o]:u==="multiple"?e:e==null?void 0:e[0]}),k(!1)}},[b,n,r,u,o]);const[F,h]=l.useState(!1),[C,f]=l.useState(void 0),g=l.useCallback(()=>{h(!1),n.setFieldsValue({[o]:C})},[C,n,o]),O=l.useCallback(()=>{h(!1),f(void 0)},[]),S=l.useCallback(()=>{f(n.getFieldValue(o)),h(!0)},[n,o]),i=j==="checkbox",v=l.useCallback(e=>{i&&e&&S()},[i,S]),y=l.useMemo(()=>{const e=[...r];return e.sort((c,I)=>c.label.localeCompare(I.label)),e},[r]);return t.jsxs(t.Fragment,{children:[i&&t.jsx(s.Modal,{open:F,onCancel:g,onOk:O,destroyOnHidden:!0,title:a,children:t.jsx(s.Form.Item,{name:o,required:d,rules:[...d?M.required(a):[]],className:p,children:t.jsx(s.Checkbox.Group,{onChange:x,style:{width:"100%"},children:t.jsx(s.List,{size:"small",style:{width:"100%"},dataSource:y,renderItem:e=>t.jsx(s.List.Item,{style:{width:"100%"},children:t.jsx(s.List.Item.Meta,{avatar:t.jsx(s.Checkbox,{value:e.id,disabled:e.lock}),title:e.label})},e.id)})})})}),t.jsx(V,{required:d,label:a,mode:u,className:p,name:o,onSelect:x,items:r,showSearch:!1,maxTagCount:"responsive",...i?{open:!1,onOpenChange:v}:{},itemBuilder:e=>t.jsx(s.Select.Option,{value:e.id,disabled:e.lock,children:e.label},e.id)})]})};exports.SelectFieldInReport=q;

package/dist/common/report/SelectFieldInReport.es.js

@@ -1,9 +1,9 @@
 import { jsxs as j, Fragment as B, jsx as t } from "react/jsx-runtime";
-import { Form as S, Modal as z, Checkbox as O, List as p, Select as E } from "antd";
+import { Form as S, Modal as z, Checkbox as x, List as p, Select as E } from "antd";
 import { useState as f, useEffect as G, useCallback as i, useMemo as H } from "react";
 import L from "../select/SelectComponent.es.js";
 import R from "../../util/ValidationUtil.es.js";
-const P = ({
+const K = ({
   className: h,
   onSelect: C,
   label: c,
@@ -11,26 +11,26 @@ const P = ({
   name: o,
   mode: d,
   items: r,
-  selectingMode: x
+  selectingMode: O
 }) => {
-  const l = S.useFormInstance(), [b, I] = f(!0);
+  const l = S.useFormInstance(), [m, g] = f(!0);
   G(() => {
-    if (r && b) {
+    if (r && m) {
       const e = r.filter((s) => s.alreadySelected).map((s) => s.id);
       l == null || l.setFieldsValue({
         [o]: d === "multiple" ? e : e == null ? void 0 : e[0]
-      }), I(!1);
+      }), g(!1);
     }
-  }, [b, l, r, d, o]);
-  const [V, u] = f(!1), [m, k] = f(void 0), g = i(() => {
+  }, [m, l, r, d, o]);
+  const [v, u] = f(!1), [b, k] = f(void 0), I = i(() => {
     u(!1), l.setFieldsValue({
-      [o]: m
+      [o]: b
     });
-  }, [m, l, o]), v = i(() => {
+  }, [b, l, o]), V = i(() => {
     u(!1), k(void 0);
   }, []), F = i(() => {
     k(l.getFieldValue(o)), u(!0);
-  }, [l, o]), n = x === "checkbox", y = i(
+  }, [l, o]), n = O === "checkbox", y = i(
     (e) => {
       n && e && F();
     },
@@ -43,9 +43,9 @@ const P = ({
     n && /* @__PURE__ */ t(
       z,
       {
-        open: V,
-        onCancel: g,
-        onOk: v,
+        open: v,
+        onCancel: I,
+        onOk: V,
         destroyOnHidden: !0,
         title: c,
         children: /* @__PURE__ */ t(
@@ -55,7 +55,7 @@ const P = ({
             required: a,
             rules: [...a ? R.required(c) : []],
             className: h,
-            children: /* @__PURE__ */ t(O.Group, { onChange: C, style: { width: "100%" }, children: /* @__PURE__ */ t(
+            children: /* @__PURE__ */ t(x.Group, { onChange: C, style: { width: "100%" }, children: /* @__PURE__ */ t(
               p,
               {
                 size: "small",
@@ -64,7 +64,7 @@ const P = ({
                 renderItem: (e) => /* @__PURE__ */ t(p.Item, { style: { width: "100%" }, children: /* @__PURE__ */ t(
                   p.Item.Meta,
                   {
-                    avatar: /* @__PURE__ */ t(O, { value: e.id, disabled: e.lock }),
+                    avatar: /* @__PURE__ */ t(x, { value: e.id, disabled: e.lock }),
                     title: e.label
                   }
                 ) }, e.id)
@@ -85,6 +85,7 @@ const P = ({
         onSelect: C,
         items: r,
         showSearch: !1,
+        maxTagCount: "responsive",
         ...n ? { open: !1, onOpenChange: y } : {},
         itemBuilder: (e) => /* @__PURE__ */ t(E.Option, { value: e.id, disabled: e.lock, children: e.label }, e.id)
       }
@@ -92,5 +93,5 @@ const P = ({
   ] });
 };
 export {
-  P as SelectFieldInReport
+  K as SelectFieldInReport
 };

package/dist/context/CrudComponentProvider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),r=require("react"),u=require("../locale/index.cjs.js"),a=r.createContext({}),c=({children:o,i18nOptions:e})=>{const t=r.useRef(!1);return r.useMemo(()=>{t.current||(u.setupI18n(e||{}),t.current=!0)},[]),r.useEffect(()=>{t.current&&e&&u.setupI18n(e)},[e==null?void 0:e.language]),s.jsx(a.Provider,{value:{},children:o})};exports.CrudComponentProvider=c;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("react"),c=require("../locale/index.cjs.js"),l=require("./CrudNavigateContext.cjs.js"),C=r.createContext({}),s=({children:a,i18nOptions:e,navigatorType:u="react-router",navigate:d})=>{const t=r.useRef(!1);r.useMemo(()=>{t.current||(c.setupI18n(e||{}),t.current=!0)},[]),r.useEffect(()=>{t.current&&e&&c.setupI18n(e)},[e==null?void 0:e.language]);const n=r.useMemo(()=>({navigatorType:u}),[u]);return o.jsx(l.CrudNavigateProvider,{navigate:d,children:o.jsx(C.Provider,{value:n,children:a})})};exports.CrudComponentProvider=s;exports.default=s;

package/dist/context/CrudComponentProvider.d.ts

@@ -1,5 +1,6 @@
 import { default as React, ReactNode } from 'react';
 import { SetupI18nOptions } from '../locale';
+import { CrudNavigateFn } from './CrudNavigateContext';
 export interface CrudComponentProviderProps {
     children: ReactNode;
     /**
@@ -7,6 +8,19 @@ export interface CrudComponentProviderProps {
      * If not provided, defaults will be used
      */
     i18nOptions?: SetupI18nOptions;
+    /**
+     * Hints which router you use (docs / future use). Wire navigation with `navigate` and/or optional sync modules:
+     * - `react-router`: `@kingteza/crud-component/react-router` exports `CrudReactRouterNavigateSync`, or pass `navigate` from `useNavigate()`.
+     * - `nextjs`: `@kingteza/crud-component/next` exports `CrudNextNavigateSync`, or pass a `navigate` wrapper around `useRouter()`.
+     *
+     * @default "react-router"
+     */
+    navigatorType?: "react-router" | "nextjs";
+    /**
+     * Imperative navigation for `useNavigateOptional` (e.g. `Button` with `to`). If omitted, use the optional
+     * `react-router` or `next` package entry sync components.
+     */
+    navigate?: CrudNavigateFn;
 }
 export declare const CrudComponentProvider: React.FC<CrudComponentProviderProps>;
 export default CrudComponentProvider;

package/dist/context/CrudComponentProvider.es.js

@@ -1,18 +1,26 @@
-import { jsx as f } from "react/jsx-runtime";
-import o, { useRef as a, useEffect as c, createContext as m } from "react";
-import { setupI18n as t } from "../locale/index.es.js";
-const d = m({}), C = ({
-  children: u,
-  i18nOptions: e
+import { jsx as u } from "react/jsx-runtime";
+import m, { useRef as d, useEffect as l, useMemo as s, createContext as x } from "react";
+import { setupI18n as o } from "../locale/index.es.js";
+import { CrudNavigateProvider as C } from "./CrudNavigateContext.es.js";
+const v = x({}), M = ({
+  children: c,
+  i18nOptions: e,
+  navigatorType: t = "react-router",
+  navigate: a
 }) => {
-  const r = a(!1);
-  return o.useMemo(() => {
-    r.current || (t(e || {}), r.current = !0);
-  }, []), c(() => {
-    r.current && e && t(e);
-  }, [e == null ? void 0 : e.language]), /* @__PURE__ */ f(d.Provider, { value: {}, children: u });
+  const r = d(!1);
+  m.useMemo(() => {
+    r.current || (o(e || {}), r.current = !0);
+  }, []), l(() => {
+    r.current && e && o(e);
+  }, [e == null ? void 0 : e.language]);
+  const f = s(
+    () => ({ navigatorType: t }),
+    [t]
+  );
+  return /* @__PURE__ */ u(C, { navigate: a, children: /* @__PURE__ */ u(v.Provider, { value: f, children: c }) });
 };
 export {
-  C as CrudComponentProvider,
-  C as default
+  M as CrudComponentProvider,
+  M as default
 };

package/dist/context/CrudNavigateContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),e=require("react"),a=e.createContext(void 0),o=e.createContext(()=>{});function C({children:i,navigate:t}){const[r,n]=e.useState(),s=e.useCallback(g=>{n(g)},[]),v=e.useMemo(()=>t??r,[t,r]);return u.jsx(o.Provider,{value:s,children:u.jsx(a.Provider,{value:v,children:i})})}function c(){return e.useContext(a)}function d(){return e.useContext(o)}exports.CrudNavigateProvider=C;exports.useCrudNavigateFromContext=c;exports.useCrudNavigateRegister=d;

package/dist/context/CrudNavigateContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+/** Matches common `useNavigate()` / App Router usage used by this library. */
+export type CrudNavigateFn = (to: string | number | Record<string, unknown>, options?: {
+    replace?: boolean;
+    state?: unknown;
+}) => void;
+type RegisterNavigateFn = (navigate: CrudNavigateFn | undefined) => void;
+export declare function CrudNavigateProvider({ children, navigate: injectedNavigate, }: {
+    readonly children: ReactNode;
+    readonly navigate?: CrudNavigateFn;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCrudNavigateFromContext(): CrudNavigateFn | undefined;
+export declare function useCrudNavigateRegister(): RegisterNavigateFn;
+export {};

package/dist/context/CrudNavigateContext.es.js

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as c, useCallback as d, useMemo as x, createContext as o, useContext as a } from "react";
+const n = o(
+  void 0
+), u = o(() => {
+});
+function f({
+  children: i,
+  navigate: e
+}) {
+  const [t, s] = c(), v = d((C) => {
+    s(C);
+  }, []), g = x(
+    () => e ?? t,
+    [e, t]
+  );
+  return /* @__PURE__ */ r(u.Provider, { value: v, children: /* @__PURE__ */ r(n.Provider, { value: g, children: i }) });
+}
+function l() {
+  return a(n);
+}
+function p() {
+  return a(u);
+}
+export {
+  f as CrudNavigateProvider,
+  l as useCrudNavigateFromContext,
+  p as useCrudNavigateRegister
+};

package/dist/context/index.d.ts

@@ -1,2 +1,3 @@
 export { default as useWindowDimensions } from './WindowDimension';
 export { CrudComponentProvider, type CrudComponentProviderProps } from './CrudComponentProvider';
+export type { CrudNavigateFn } from './CrudNavigateContext';

package/dist/crud/CrudReportComponent.cjs.js

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),K=require("@ant-design/icons"),s=require("antd"),i=require("react"),x=require("./CrudField.cjs.js"),Q=require("./view/CrudViewer.cjs.js"),W=require("../common/report/SelectFieldInReport.cjs.js"),V=require("./view/CrudViewerUtil.cjs.js"),X=require("../locale/index.cjs.js"),Y=require("../common/select/SelectComponent.cjs.js"),v=require("../common/button/Button.cjs.js"),Z=require("../common/button/PrintButton.cjs.js"),A={lg:6,md:8,sm:12,xs:24},E={lg:12,md:16,sm:24,xs:24};function k({fields:d,data:u,idField:L,loadingData:f,onSubmit:g,paginateProps:G,size:M,onClickPrint:h,onClickExcelExport:y,minusHeight:O,extraSearchFields:R,searchOnMount:B,summary:U,showFieldsSelectingMode:_="checkbox"}){const{t:$}=X.useTranslationLib(),{searchable:z,selectable:c,sortable:q,defaultSort:p}=i.useMemo(()=>{var b,m,N,T,I;const e=[],r=[],o=[];let n;for(const l of d.filter(J=>!J.hidden))l.type==="image"||!l.report||((b=l.report)!=null&&b.searchable&&e.push(l),(m=l.report)!=null&&m.sortable&&(r.push(l),!n&&((N=l.report)!=null&&N.defaultSort)&&(n=l)),l.hideInTable||o.push({id:l.name,label:l.label,lock:(T=l.report)==null?void 0:T.lock,alreadySelected:(I=l.report)==null?void 0:I.alreadySelected}));return{defaultSort:n,searchable:e,sortable:r,selectable:o}},[d]),[S,F]=i.useState([]),j=i.useCallback(async({sortBy:e,sortByType:r,showFields:o=[],...n})=>{const b=[];e&&b.push({field:e,sort:r??"DESC"}),F(d.filter(m=>o.includes(m.name)).map(m=>({...m,hideInTable:!1}))),g({showFields:o,sortBy:b,...n})},[d,g]),[a]=s.Form.useForm(),[w,D]=i.useState(!1),[C,H]=i.useState(!0);return i.useEffect(()=>{if(B&&C){const e=setTimeout(()=>{a.validateFields().then(r=>{j(r)}),H(!1)},200);return()=>clearTimeout(e)}},[j,a,C,B]),i.useEffect(()=>{var r,o;!a.getFieldValue("sortBy")&&p&&a.setFieldsValue({sortBy:p.name,sortByType:typeof((r=p.report)==null?void 0:r.defaultSort)=="string"?(o=p.report)==null?void 0:o.defaultSort:"ASC"})},[p,a]),i.useEffect(()=>{if(w){const e=c.filter(r=>r.alreadySelected).map(r=>r.id);F(d.filter(r=>e.includes(r.name)).map(r=>({...r,hideInTable:!1}))),D(!1)}},[d,w,c]),t.jsxs(s.Space,{className:"w-100",direction:"vertical",children:[t.jsxs(s.Form,{form:a,layout:"vertical",onFinish:j,children:[t.jsxs(s.Row,{gutter:[8,8],children:[z.map(e=>{var r,o,n;return t.jsx(s.Col,{...e.grid??A,style:{alignSelf:"end"},children:(r=e.report)!=null&&r.customRender?e.report.customRender(a):e.type==="date"?t.jsx(x.default,{...e,type:"date",range:(o=e.report)==null?void 0:o.range,required:!!((n=e.report)!=null&&n.required),readonly:!1,fieldClassName:"mb-0"}):e.type==="select"?t.jsx(x.default,{...e,type:"select",multiple:!0,required:!1,readonly:!1,fieldClassName:"mb-0"}):t.jsx(x.default,{...e,readonly:!1,required:!1,fieldClassName:"mb-0"})},e.name)}),!!(c!=null&&c.length)&&t.jsx(s.Col,{...E,children:t.jsx(W.SelectFieldInReport,{items:c,name:"showFields",mode:"multiple",label:$("str.showFields"),className:"mb-0",selectingMode:_})}),!!q.length&&t.jsx(s.Col,{...A,children:t.jsx(Y,{label:"Sort By",name:"sortBy",items:q.map(e=>({id:e.name,label:e.label})),nameFieldInArray:"label",fieldId:"id",className:"mb-0",dropdownRender:e=>t.jsxs(t.Fragment,{children:[e,t.jsx(s.Form.Item,{name:"sortByType",noStyle:!0,className:"mt-3",children:t.jsx(s.Radio.Group,{className:"w-100",defaultValue:"DESC",optionType:"button",children:t.jsxs(s.Row,{children:[t.jsx(s.Col,{xs:12,children:t.jsx(s.Radio,{className:"w-100",style:{borderTopRightRadius:0,borderBottomRightRadius:0},value:"ASC",children:"Ascending"})}),t.jsx(s.Col,{xs:12,children:t.jsx(s.Radio,{className:"w-100",style:{borderTopLeftRadius:0,borderBottomLeftRadius:0},value:"DESC",children:"Descending"})})]})})})]})})}),R?R(a):null]}),t.jsx(v,{className:"mt-3",type:"primary",block:!0,htmlType:"submit",disabled:f,children:"Submit"})]}),t.jsxs(s.Space,{children:[!!h&&t.jsx(Z.PrintButton,{disabled:f||!u.length,onClick:()=>h==null?void 0:h({tableId:"#crud-table table",data:u,fields:S.map(e=>({...e,render:V.getRendererValueCrudViewer(e)}))})}),!!y&&t.jsx(v,{disabled:f||!u.length,onClick:()=>y==null?void 0:y({tableId:"#crud-table table",data:u,fields:S.map(e=>({...e,render:V.getRendererValueCrudViewer(e)}))}),icon:t.jsx(K.FileExcelOutlined,{}),className:`group ${f||!u.length?"":"crud-excel-export-btn"}`,children:"Excel"})]}),U,t.jsx(Q,{minusHeight:O,data:u,size:M,fields:S,idField:L,loadingData:f,paginateProps:G,viewable:!1})]})}module.exports=k;
+"use strict";const s=require("react/jsx-runtime"),X=require("@ant-design/icons"),o=require("antd"),d=require("react"),C=require("./CrudField.cjs.js"),Y=require("./view/CrudViewer.cjs.js"),Z=require("../common/report/SelectFieldInReport.cjs.js"),M=require("./view/CrudViewerUtil.cjs.js"),E=require("../locale/index.cjs.js"),P=require("../common/select/SelectComponent.cjs.js"),J=require("../common/button/Button.cjs.js"),ee=require("../common/button/PrintButton.cjs.js"),k={lg:6,md:8,sm:12,xs:24},te={lg:12,md:16,sm:24,xs:24};function se({fields:n,data:l,idField:f,loadingData:i,onSubmit:b,paginateProps:j,size:U,onClickPrint:w,onClickExcelExport:x,minusHeight:_,extraSearchFields:T,searchOnMount:q,summary:$,showFieldsSelectingMode:z="checkbox",cachedSearchProps:u}){const{t:D}=E.useTranslationLib(),{searchable:H,selectable:p,sortable:N,defaultSort:g}=d.useMemo(()=>{var h,y,R,O,L;const e=[],t=[],r=[];let m;for(const a of n.filter(W=>!W.hidden))a.type==="image"||!a.report||((h=a.report)!=null&&h.searchable&&e.push(a),(y=a.report)!=null&&y.sortable&&(t.push(a),!m&&((R=a.report)!=null&&R.defaultSort)&&(m=a)),a.hideInTable||r.push({id:a.name,label:a.label,lock:(O=a.report)==null?void 0:O.lock,alreadySelected:(L=a.report)==null?void 0:L.alreadySelected}));return{defaultSort:m,searchable:e,sortable:t,selectable:r}},[n]),[F,I]=d.useState([]),S=d.useCallback(e=>{I(n.filter(t=>e.includes(t.name)).map(t=>({...t,hideInTable:!1})))},[n]),B=d.useCallback(async({sortBy:e,sortByType:t,showFields:r=[],...m})=>{var R;const h=[];e&&h.push({field:e,sort:t??"DESC"}),S(r);const y={showFields:r,sortBy:h,...m};u&&(le(u.key,u.saveMode,y),(R=u.onSave)==null||R.call(u,y)),b(y)},[S,u,b]),[c]=o.Form.useForm(),V=d.useRef(!1),[v,K]=d.useState(!1),[A,Q]=d.useState(!0);return d.useEffect(()=>{if(q&&A){const e=setTimeout(()=>{c.validateFields().then(t=>{B(t)}),Q(!1)},200);return()=>clearTimeout(e)}},[B,c,A,q]),d.useEffect(()=>{var t,r;!c.getFieldValue("sortBy")&&g&&c.setFieldsValue({sortBy:g.name,sortByType:typeof((t=g.report)==null?void 0:t.defaultSort)=="string"?(r=g.report)==null?void 0:r.defaultSort:"ASC"})},[g,c]),d.useEffect(()=>{if(!u||V.current)return;V.current=!0;const e=re(u.key,u.saveMode),t={...u.defaultValue??{},...e??{}};if(Object.keys(t).length===0)return;c.setFieldsValue(oe(t));const r=t.showFields;r!=null&&r.length&&S(r)},[S,u,c]),d.useEffect(()=>{if(v){const e=p.filter(t=>t.alreadySelected).map(t=>t.id);I(n.filter(t=>e.includes(t.name)).map(t=>({...t,hideInTable:!1}))),K(!1)}},[n,v,p]),s.jsxs(o.Space,{className:"w-100",direction:"vertical",children:[s.jsxs(o.Form,{form:c,layout:"vertical",onFinish:B,children:[s.jsxs(o.Row,{gutter:[8,8],children:[H.map(e=>{var t,r,m;return s.jsx(o.Col,{...e.grid??k,style:{alignSelf:"end"},children:(t=e.report)!=null&&t.customRender?e.report.customRender(c):e.type==="date"?s.jsx(C.default,{...e,type:"date",range:(r=e.report)==null?void 0:r.range,required:!!((m=e.report)!=null&&m.required),readonly:!1,fieldClassName:"mb-0"}):e.type==="select"?s.jsx(C.default,{...e,type:"select",multiple:!0,required:!1,readonly:!1,fieldClassName:"mb-0"}):s.jsx(C.default,{...e,readonly:!1,required:!1,fieldClassName:"mb-0"})},e.name)}),!!(p!=null&&p.length)&&s.jsx(o.Col,{...te,children:s.jsx(Z.SelectFieldInReport,{items:p,name:"showFields",mode:"multiple",label:D("str.showFields"),className:"mb-0",selectingMode:z})}),!!N.length&&s.jsx(o.Col,{...k,children:s.jsx(P,{label:"Sort By",name:"sortBy",items:N.map(e=>({id:e.name,label:e.label})),nameFieldInArray:"label",fieldId:"id",className:"mb-0",dropdownRender:e=>s.jsxs(s.Fragment,{children:[e,s.jsx(o.Form.Item,{name:"sortByType",noStyle:!0,className:"mt-3",children:s.jsx(o.Radio.Group,{className:"w-100",defaultValue:"DESC",optionType:"button",children:s.jsxs(o.Row,{children:[s.jsx(o.Col,{xs:12,children:s.jsx(o.Radio,{className:"w-100",style:{borderTopRightRadius:0,borderBottomRightRadius:0},value:"ASC",children:"Ascending"})}),s.jsx(o.Col,{xs:12,children:s.jsx(o.Radio,{className:"w-100",style:{borderTopLeftRadius:0,borderBottomLeftRadius:0},value:"DESC",children:"Descending"})})]})})})]})})}),T?T(c):null]}),s.jsx(J,{className:"mt-3",type:"primary",block:!0,htmlType:"submit",disabled:i,children:"Submit"})]}),s.jsxs(o.Space,{children:[!!w&&s.jsx(ee.PrintButton,{disabled:i||!l.length,onClick:()=>w==null?void 0:w({tableId:"#crud-table table",data:l,fields:F.map(e=>({...e,render:M.getRendererValueCrudViewer(e)}))})}),!!x&&s.jsx(J,{disabled:i||!l.length,onClick:()=>x==null?void 0:x({tableId:"#crud-table table",data:l,fields:F.map(e=>({...e,render:M.getRendererValueCrudViewer(e)}))}),icon:s.jsx(X.FileExcelOutlined,{}),className:`group ${i||!l.length?"":"crud-excel-export-btn"}`,children:"Excel"})]}),$,s.jsx(Y,{minusHeight:_,data:l,size:U,fields:F,idField:f,loadingData:i,paginateProps:j,viewable:!1})]})}function G(n){return typeof globalThis.window>"u"?null:n==="local"?globalThis.window.localStorage:globalThis.window.sessionStorage}function re(n,l){const f=G(l);if(!f)return null;try{const i=f.getItem(n);return i?JSON.parse(i):null}catch{return null}}function le(n,l,f){const i=G(l);if(i)try{i.setItem(n,JSON.stringify(f))}catch{}}function oe(n){const{sortBy:l,showFields:f,...i}=n,b={...i};if(f!==void 0&&(b.showFields=f),l!=null&&l.length){const j=l[0];b.sortBy=j.field,b.sortByType=j.sort}return b}module.exports=se;

package/dist/crud/CrudReportComponent.d.ts

@@ -14,6 +14,14 @@ export type SearchOnlyFields<F> = CrudFieldProps<F> & {
     hideInTable: true;
 };
 export type ReportCrudFields<T, F> = CrudFieldProps<T> | SearchOnlyFields<F>;
+export interface SearchPropsCacheProps<F_Search> {
+    key: string;
+    saveMode: "local" | "session";
+    /** Called after each successful search, once the payload is written to storage. */
+    onSave?: (value: CrudReportSubmitForm<F_Search>) => void;
+    /** Baseline when there is no cache yet (or keys missing from cache). */
+    defaultValue?: Partial<CrudReportSubmitForm<F_Search>>;
+}
 export interface CrudReportComponentProps<T_Data, F_Search> {
     summary?: React.ReactNode;
     fields: readonly ReportCrudFields<T_Data, F_Search>[];
@@ -41,6 +49,7 @@ export interface CrudReportComponentProps<T_Data, F_Search> {
     extraSearchFields?: (form: FormInstance<any>) => ReactElement;
     searchOnMount?: boolean;
     showFieldsSelectingMode?: SelectFieldInReportSelectingMode;
+    cachedSearchProps?: SearchPropsCacheProps<F_Search>;
 }
-declare function CrudReportComponent<T, F = T>({ fields, data, idField, loadingData, onSubmit, paginateProps, size, onClickPrint, onClickExcelExport, minusHeight, extraSearchFields, searchOnMount, summary, showFieldsSelectingMode, }: Readonly<CrudReportComponentProps<T, F>>): import("react/jsx-runtime").JSX.Element;
+declare function CrudReportComponent<T, F = T>({ fields, data, idField, loadingData, onSubmit, paginateProps, size, onClickPrint, onClickExcelExport, minusHeight, extraSearchFields, searchOnMount, summary, showFieldsSelectingMode, cachedSearchProps, }: Readonly<CrudReportComponentProps<T, F>>): import("react/jsx-runtime").JSX.Element;
 export default CrudReportComponent;

package/dist/crud/CrudReportComponent.es.js

@@ -1,112 +1,141 @@
-import { jsxs as c, jsx as t, Fragment as k } from "react/jsx-runtime";
-import { FileExcelOutlined as E } from "@ant-design/icons";
-import { Form as B, Space as G, Row as M, Col as b, Radio as R } from "antd";
-import { useMemo as P, useState as F, useCallback as ee, useEffect as w } from "react";
-import N from "./CrudField.es.js";
-import re from "./view/CrudViewer.es.js";
-import { SelectFieldInReport as te } from "../common/report/SelectFieldInReport.es.js";
-import { getRendererValueCrudViewer as O } from "./view/CrudViewerUtil.es.js";
-import { useTranslationLib as le } from "../locale/index.es.js";
-import oe from "../common/select/SelectComponent.es.js";
-import _ from "../common/button/Button.es.js";
-import { PrintButton as se } from "../common/button/PrintButton.es.js";
-const $ = { lg: 6, md: 8, sm: 12, xs: 24 }, ae = { lg: 12, md: 16, sm: 24, xs: 24 };
-function ge({
-  fields: i,
-  data: n,
-  idField: z,
-  loadingData: u,
-  onSubmit: T,
-  paginateProps: D,
-  size: H,
-  onClickPrint: h,
-  onClickExcelExport: y,
-  minusHeight: J,
-  extraSearchFields: C,
-  searchOnMount: I,
-  summary: K,
-  showFieldsSelectingMode: Q = "checkbox"
+import { jsxs as b, jsx as r, Fragment as re } from "react/jsx-runtime";
+import { FileExcelOutlined as le } from "@ant-design/icons";
+import { Form as v, Space as $, Row as k, Col as w, Radio as I } from "antd";
+import { useMemo as oe, useState as V, useCallback as z, useRef as se, useEffect as T } from "react";
+import q from "./CrudField.es.js";
+import ne from "./view/CrudViewer.es.js";
+import { SelectFieldInReport as ie } from "../common/report/SelectFieldInReport.es.js";
+import { getRendererValueCrudViewer as D } from "./view/CrudViewerUtil.es.js";
+import { useTranslationLib as ae } from "../locale/index.es.js";
+import de from "../common/select/SelectComponent.es.js";
+import H from "../common/button/Button.es.js";
+import { PrintButton as ue } from "../common/button/PrintButton.es.js";
+const K = { lg: 6, md: 8, sm: 12, xs: 24 }, me = { lg: 12, md: 16, sm: 24, xs: 24 };
+function ve({
+  fields: s,
+  data: o,
+  idField: u,
+  loadingData: n,
+  onSubmit: f,
+  paginateProps: R,
+  size: U,
+  onClickPrint: S,
+  onClickExcelExport: B,
+  minusHeight: W,
+  extraSearchFields: A,
+  searchOnMount: O,
+  summary: X,
+  showFieldsSelectingMode: Y = "checkbox",
+  cachedSearchProps: a
 }) {
-  const { t: U } = le(), { searchable: W, selectable: d, sortable: v, defaultSort: p } = P(() => {
-    var f, m, L, j, x;
-    const e = [], r = [], o = [];
-    let a;
-    for (const l of i.filter((Z) => !Z.hidden))
-      l.type === "image" || !l.report || ((f = l.report) != null && f.searchable && e.push(l), (m = l.report) != null && m.sortable && (r.push(l), !a && ((L = l.report) != null && L.defaultSort) && (a = l)), l.hideInTable || o.push({
-        id: l.name,
-        label: l.label,
-        lock: (j = l.report) == null ? void 0 : j.lock,
-        alreadySelected: (x = l.report) == null ? void 0 : x.alreadySelected
+  const { t: Z } = ae(), { searchable: E, selectable: c, sortable: j, defaultSort: y } = oe(() => {
+    var g, p, h, G, _;
+    const e = [], t = [], l = [];
+    let m;
+    for (const i of s.filter((te) => !te.hidden))
+      i.type === "image" || !i.report || ((g = i.report) != null && g.searchable && e.push(i), (p = i.report) != null && p.sortable && (t.push(i), !m && ((h = i.report) != null && h.defaultSort) && (m = i)), i.hideInTable || l.push({
+        id: i.name,
+        label: i.label,
+        lock: (G = i.report) == null ? void 0 : G.lock,
+        alreadySelected: (_ = i.report) == null ? void 0 : _.alreadySelected
       }));
     return {
-      defaultSort: a,
+      defaultSort: m,
       searchable: e,
-      sortable: r,
-      selectable: o
+      sortable: t,
+      selectable: l
     };
-  }, [i]), [S, V] = F(
+  }, [s]), [N, L] = V(
     []
-  ), g = ee(
+  ), F = z(
+    (e) => {
+      L(
+        s.filter((t) => e.includes(t.name)).map((t) => ({ ...t, hideInTable: !1 }))
+      );
+    },
+    [s]
+  ), C = z(
     async ({
       sortBy: e,
-      sortByType: r,
-      showFields: o = [],
-      ...a
+      sortByType: t,
+      showFields: l = [],
+      ...m
     }) => {
-      const f = [];
-      e && f.push({
+      var h;
+      const g = [];
+      e && g.push({
         field: e,
-        sort: r ?? "DESC"
-      }), V(
-        i.filter((m) => o.includes(m.name)).map((m) => ({ ...m, hideInTable: !1 }))
-      ), T({ showFields: o, sortBy: f, ...a });
+        sort: t ?? "DESC"
+      }), F(l);
+      const p = { showFields: l, sortBy: g, ...m };
+      a && (ce(
+        a.key,
+        a.saveMode,
+        p
+      ), (h = a.onSave) == null || h.call(a, p)), f(p);
     },
-    [i, T]
-  ), [s] = B.useForm(), [q, X] = F(!1), [A, Y] = F(!0);
-  return w(() => {
-    if (I && A) {
+    [F, a, f]
+  ), [d] = v.useForm(), M = se(!1), [J, P] = V(!1), [x, ee] = V(!0);
+  return T(() => {
+    if (O && x) {
       const e = setTimeout(() => {
-        s.validateFields().then((r) => {
-          g(r);
-        }), Y(!1);
+        d.validateFields().then((t) => {
+          C(t);
+        }), ee(!1);
       }, 200);
       return () => clearTimeout(e);
     }
-  }, [g, s, A, I]), w(() => {
-    var r, o;
-    !s.getFieldValue("sortBy") && p && s.setFieldsValue({
-      sortBy: p.name,
-      sortByType: typeof ((r = p.report) == null ? void 0 : r.defaultSort) == "string" ? (o = p.report) == null ? void 0 : o.defaultSort : "ASC"
+  }, [C, d, x, O]), T(() => {
+    var t, l;
+    !d.getFieldValue("sortBy") && y && d.setFieldsValue({
+      sortBy: y.name,
+      sortByType: typeof ((t = y.report) == null ? void 0 : t.defaultSort) == "string" ? (l = y.report) == null ? void 0 : l.defaultSort : "ASC"
     });
-  }, [p, s]), w(() => {
-    if (q) {
-      const e = d.filter((r) => r.alreadySelected).map((r) => r.id);
-      V(
-        i.filter((r) => e.includes(r.name)).map((r) => ({ ...r, hideInTable: !1 }))
-      ), X(!1);
+  }, [y, d]), T(() => {
+    if (!a || M.current)
+      return;
+    M.current = !0;
+    const e = fe(
+      a.key,
+      a.saveMode
+    ), t = {
+      ...a.defaultValue ?? {},
+      ...e ?? {}
+    };
+    if (Object.keys(t).length === 0)
+      return;
+    d.setFieldsValue(pe(t));
+    const l = t.showFields;
+    l != null && l.length && F(l);
+  }, [F, a, d]), T(() => {
+    if (J) {
+      const e = c.filter((t) => t.alreadySelected).map((t) => t.id);
+      L(
+        s.filter((t) => e.includes(t.name)).map((t) => ({ ...t, hideInTable: !1 }))
+      ), P(!1);
     }
-  }, [i, q, d]), /* @__PURE__ */ c(G, { className: "w-100", direction: "vertical", children: [
-    /* @__PURE__ */ c(B, { form: s, layout: "vertical", onFinish: g, children: [
-      /* @__PURE__ */ c(M, { gutter: [8, 8], children: [
-        W.map((e) => {
-          var r, o, a;
-          return /* @__PURE__ */ t(
-            b,
+  }, [s, J, c]), /* @__PURE__ */ b($, { className: "w-100", direction: "vertical", children: [
+    /* @__PURE__ */ b(v, { form: d, layout: "vertical", onFinish: C, children: [
+      /* @__PURE__ */ b(k, { gutter: [8, 8], children: [
+        E.map((e) => {
+          var t, l, m;
+          return /* @__PURE__ */ r(
+            w,
             {
-              ...e.grid ?? $,
+              ...e.grid ?? K,
               style: { alignSelf: "end" },
-              children: (r = e.report) != null && r.customRender ? e.report.customRender(s) : e.type === "date" ? /* @__PURE__ */ t(
-                N,
+              children: (t = e.report) != null && t.customRender ? e.report.customRender(d) : e.type === "date" ? /* @__PURE__ */ r(
+                q,
                 {
                   ...e,
                   type: "date",
-                  range: (o = e.report) == null ? void 0 : o.range,
-                  required: !!((a = e.report) != null && a.required),
+                  range: (l = e.report) == null ? void 0 : l.range,
+                  required: !!((m = e.report) != null && m.required),
                   readonly: !1,
                   fieldClassName: "mb-0"
                 }
-              ) : e.type === "select" ? /* @__PURE__ */ t(
-                N,
+              ) : e.type === "select" ? /* @__PURE__ */ r(
+                q,
                 {
                   ...e,
                   type: "select",
@@ -115,8 +144,8 @@ function ge({
                   readonly: !1,
                   fieldClassName: "mb-0"
                 }
-              ) : /* @__PURE__ */ t(
-                N,
+              ) : /* @__PURE__ */ r(
+                q,
                 {
                   ...e,
                   readonly: !1,
@@ -128,37 +157,37 @@ function ge({
             e.name
           );
         }),
-        !!(d != null && d.length) && /* @__PURE__ */ t(b, { ...ae, children: /* @__PURE__ */ t(
-          te,
+        !!(c != null && c.length) && /* @__PURE__ */ r(w, { ...me, children: /* @__PURE__ */ r(
+          ie,
           {
-            items: d,
+            items: c,
             name: "showFields",
             mode: "multiple",
-            label: U("str.showFields"),
+            label: Z("str.showFields"),
             className: "mb-0",
-            selectingMode: Q
+            selectingMode: Y
           }
         ) }),
-        !!v.length && /* @__PURE__ */ t(b, { ...$, children: /* @__PURE__ */ t(
-          oe,
+        !!j.length && /* @__PURE__ */ r(w, { ...K, children: /* @__PURE__ */ r(
+          de,
           {
             label: "Sort By",
             name: "sortBy",
-            items: v.map((e) => ({ id: e.name, label: e.label })),
+            items: j.map((e) => ({ id: e.name, label: e.label })),
             nameFieldInArray: "label",
             fieldId: "id",
             className: "mb-0",
-            dropdownRender: (e) => /* @__PURE__ */ c(k, { children: [
+            dropdownRender: (e) => /* @__PURE__ */ b(re, { children: [
               e,
-              /* @__PURE__ */ t(B.Item, { name: "sortByType", noStyle: !0, className: "mt-3", children: /* @__PURE__ */ t(
-                R.Group,
+              /* @__PURE__ */ r(v.Item, { name: "sortByType", noStyle: !0, className: "mt-3", children: /* @__PURE__ */ r(
+                I.Group,
                 {
                   className: "w-100",
                   defaultValue: "DESC",
                   optionType: "button",
-                  children: /* @__PURE__ */ c(M, { children: [
-                    /* @__PURE__ */ t(b, { xs: 12, children: /* @__PURE__ */ t(
-                      R,
+                  children: /* @__PURE__ */ b(k, { children: [
+                    /* @__PURE__ */ r(w, { xs: 12, children: /* @__PURE__ */ r(
+                      I,
                       {
                         className: "w-100",
                         style: {
@@ -169,8 +198,8 @@ function ge({
                         children: "Ascending"
                       }
                     ) }),
-                    /* @__PURE__ */ t(b, { xs: 12, children: /* @__PURE__ */ t(
-                      R,
+                    /* @__PURE__ */ r(w, { xs: 12, children: /* @__PURE__ */ r(
+                      I,
                       {
                         className: "w-100",
                         style: {
@@ -187,69 +216,99 @@ function ge({
             ] })
           }
         ) }),
-        C ? C(s) : null
+        A ? A(d) : null
       ] }),
-      /* @__PURE__ */ t(
-        _,
+      /* @__PURE__ */ r(
+        H,
         {
           className: "mt-3",
           type: "primary",
           block: !0,
           htmlType: "submit",
-          disabled: u,
+          disabled: n,
           children: "Submit"
         }
       )
     ] }),
-    /* @__PURE__ */ c(G, { children: [
-      !!h && /* @__PURE__ */ t(
-        se,
+    /* @__PURE__ */ b($, { children: [
+      !!S && /* @__PURE__ */ r(
+        ue,
         {
-          disabled: u || !n.length,
-          onClick: () => h == null ? void 0 : h({
+          disabled: n || !o.length,
+          onClick: () => S == null ? void 0 : S({
             tableId: "#crud-table table",
-            data: n,
-            fields: S.map((e) => ({
+            data: o,
+            fields: N.map((e) => ({
               ...e,
-              render: O(e)
+              render: D(e)
             }))
           })
         }
       ),
-      !!y && /* @__PURE__ */ t(
-        _,
+      !!B && /* @__PURE__ */ r(
+        H,
         {
-          disabled: u || !n.length,
-          onClick: () => y == null ? void 0 : y({
+          disabled: n || !o.length,
+          onClick: () => B == null ? void 0 : B({
             tableId: "#crud-table table",
-            data: n,
-            fields: S.map((e) => ({
+            data: o,
+            fields: N.map((e) => ({
               ...e,
-              render: O(e)
+              render: D(e)
             }))
           }),
-          icon: /* @__PURE__ */ t(E, {}),
-          className: `group ${u || !n.length ? "" : "crud-excel-export-btn"}`,
+          icon: /* @__PURE__ */ r(le, {}),
+          className: `group ${n || !o.length ? "" : "crud-excel-export-btn"}`,
           children: "Excel"
         }
       )
     ] }),
-    K,
-    /* @__PURE__ */ t(
-      re,
+    X,
+    /* @__PURE__ */ r(
+      ne,
       {
-        minusHeight: J,
-        data: n,
-        size: H,
-        fields: S,
-        idField: z,
-        loadingData: u,
-        paginateProps: D,
+        minusHeight: W,
+        data: o,
+        size: U,
+        fields: N,
+        idField: u,
+        loadingData: n,
+        paginateProps: R,
         viewable: !1
       }
     )
   ] });
 }
+function Q(s) {
+  return typeof globalThis.window > "u" ? null : s === "local" ? globalThis.window.localStorage : globalThis.window.sessionStorage;
+}
+function fe(s, o) {
+  const u = Q(o);
+  if (!u)
+    return null;
+  try {
+    const n = u.getItem(s);
+    return n ? JSON.parse(n) : null;
+  } catch {
+    return null;
+  }
+}
+function ce(s, o, u) {
+  const n = Q(o);
+  if (n)
+    try {
+      n.setItem(s, JSON.stringify(u));
+    } catch {
+    }
+}
+function pe(s) {
+  const { sortBy: o, showFields: u, ...n } = s, f = { ...n };
+  if (u !== void 0 && (f.showFields = u), o != null && o.length) {
+    const R = o[0];
+    f.sortBy = R.field, f.sortByType = R.sort;
+  }
+  return f;
+}
 export {
-  ge as default
+  ve as default
 };

package/dist/crud/index.d.ts

@@ -5,7 +5,7 @@ export { CrudForm, CrudFormFields } from './CrudForm';
 export type { CurdFormFieldsProps } from './CrudForm';
 export { default as CrudFormWizard } from './CrudFormWizard';
 export type { CrudFormWizardProps } from './CrudFormWizard';
-export type { CrudReportComponentProps, CrudReportSubmitForm, ReportCrudFields, SearchOnlyFields, } from './CrudReportComponent';
+export type { CrudReportComponentProps, CrudReportSubmitForm, ReportCrudFields, SearchOnlyFields, SearchPropsCacheProps, } from './CrudReportComponent';
 export { default as CrudReportComponent } from './CrudReportComponent';
 export { default as CrudSearchComponent } from './CrudSearchComponent';
 export type { CrudSearchComponentProps, CrudSearchOption, } from './CrudSearchComponent';

package/dist/hooks/NavigatorHooks.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react-router-dom");function o(){return e.useInRouterContext()?e.useNavigate():(t=>{console.warn("React router not found, navigating to",t)})}exports.useNavigateOptional=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),n=require("../context/CrudNavigateContext.cjs.js"),r=(e,t)=>{typeof process<"u"&&process.env.NODE_ENV!=="production"&&console.warn("[@kingteza/crud-component] No navigator configured. Pass `navigate` to CrudComponentProvider, or render CrudReactRouterNavigateSync / CrudNextNavigateSync from the optional entry points. Attempted navigation:",e,t)};function a(){const e=n.useCrudNavigateFromContext();return o.useMemo(()=>e??r,[e])}exports.useNavigateOptional=a;

package/dist/hooks/NavigatorHooks.d.ts

@@ -1 +1,6 @@
-export declare function useNavigateOptional(): import('react-router-dom').NavigateFunction;
+import { CrudNavigateFn } from '../context/CrudNavigateContext';
+/**
+ * Returns `navigate` from `CrudComponentProvider` (prop or optional sync modules).
+ * Falls back to a no-op that warns in development when nothing is configured.
+ */
+export declare function useNavigateOptional(): CrudNavigateFn;

package/dist/hooks/NavigatorHooks.es.js

@@ -1,9 +1,16 @@
-import { useInRouterContext as e, useNavigate as n } from "react-router-dom";
-function r() {
-  return e() ? n() : ((t) => {
-    console.warn("React router not found, navigating to", t);
-  });
+import { useMemo as e } from "react";
+import { useCrudNavigateFromContext as n } from "../context/CrudNavigateContext.es.js";
+const r = (o, t) => {
+  typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn(
+    "[@kingteza/crud-component] No navigator configured. Pass `navigate` to CrudComponentProvider, or render CrudReactRouterNavigateSync / CrudNextNavigateSync from the optional entry points. Attempted navigation:",
+    o,
+    t
+  );
+};
+function u() {
+  const o = n();
+  return e(() => o ?? r, [o]);
 }
 export {
-  r as useNavigateOptional
+  u as useNavigateOptional
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { TRANSLATION_NAMESPACE } from './locale/hooks/translation-constants';
 export { setupI18n, updateTranslations } from './locale';
-export { CrudComponentProvider, type CrudComponentProviderProps } from './context';
+export { CrudComponentProvider, type CrudComponentProviderProps, type CrudNavigateFn, } from './context';
 export * from './crud';
 export type * from './crud';

package/dist/navigator/CrudNextNavigateSync.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),i=require("next/navigation"),c=require("../context/CrudNavigateContext.cjs.js");function f(e){return typeof e=="string"?e:"pathname"in e&&typeof e.pathname=="string"?e.pathname:"/"}function s(){const e=i.useRouter(),t=c.useCrudNavigateRegister();return u.useLayoutEffect(()=>(t((r,n)=>{if(typeof r=="number"){r<0?e.back():r>0&&typeof e.forward=="function"&&e.forward();return}const a=f(r);n!=null&&n.replace?e.replace(a):e.push(a)}),()=>t(void 0)),[t,e]),null}exports.CrudNextNavigateSync=s;

package/dist/navigator/CrudNextNavigateSync.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Registers Next.js App Router navigation with {@link CrudComponentProvider}.
+ * Use in a client component, inside `CrudComponentProvider`, instead of installing `react-router-dom`.
+ *
+ * @example
+ * ```tsx
+ * import { CrudComponentProvider } from "@kingteza/crud-component";
+ * import { CrudNextNavigateSync } from "@kingteza/crud-component/next";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <CrudComponentProvider navigatorType="nextjs">
+ *       <CrudNextNavigateSync />
+ *       {children}
+ *     </CrudComponentProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function CrudNextNavigateSync(): null;

package/dist/navigator/CrudNextNavigateSync.es.js

@@ -0,0 +1,20 @@
+import { useLayoutEffect as f } from "react";
+import { useRouter as u } from "next/navigation";
+import { useCrudNavigateRegister as i } from "../context/CrudNavigateContext.es.js";
+function c(e) {
+  return typeof e == "string" ? e : "pathname" in e && typeof e.pathname == "string" ? e.pathname : "/";
+}
+function g() {
+  const e = u(), t = i();
+  return f(() => (t((r, n) => {
+    if (typeof r == "number") {
+      r < 0 ? e.back() : r > 0 && typeof e.forward == "function" && e.forward();
+      return;
+    }
+    const a = c(r);
+    n != null && n.replace ? e.replace(a) : e.push(a);
+  }), () => t(void 0)), [t, e]), null;
+}
+export {
+  g as CrudNextNavigateSync
+};

package/dist/navigator/CrudReactRouterNavigateSync.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),u=require("react-router-dom"),a=require("../context/CrudNavigateContext.cjs.js");function o(){const t=u.useNavigate(),e=a.useCrudNavigateRegister();return r.useLayoutEffect(()=>(e(t),()=>e(void 0)),[t,e]),null}exports.CrudReactRouterNavigateSync=o;

package/dist/navigator/CrudReactRouterNavigateSync.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Registers React Router’s `useNavigate` with {@link CrudComponentProvider}.
+ * Render once inside your `<Router>` (e.g. inside `<BrowserRouter>`), as a descendant of `CrudComponentProvider`.
+ *
+ * @example
+ * ```tsx
+ * import { CrudComponentProvider } from "@kingteza/crud-component";
+ * import { CrudReactRouterNavigateSync } from "@kingteza/crud-component/react-router";
+ *
+ * <CrudComponentProvider>
+ *   <BrowserRouter>
+ *     <CrudReactRouterNavigateSync />
+ *     <App />
+ *   </BrowserRouter>
+ * </CrudComponentProvider>
+ * ```
+ */
+export declare function CrudReactRouterNavigateSync(): null;

package/dist/navigator/CrudReactRouterNavigateSync.es.js

@@ -0,0 +1,10 @@
+import { useLayoutEffect as r } from "react";
+import { useNavigate as o } from "react-router-dom";
+import { useCrudNavigateRegister as i } from "../context/CrudNavigateContext.es.js";
+function s() {
+  const e = o(), t = i();
+  return r(() => (t(e), () => t(void 0)), [e, t]), null;
+}
+export {
+  s as CrudReactRouterNavigateSync
+};

package/dist/next.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigator/CrudNextNavigateSync.cjs.js");exports.CrudNextNavigateSync=e.CrudNextNavigateSync;

package/dist/next.d.ts

@@ -0,0 +1 @@
+export { CrudNextNavigateSync } from './navigator/CrudNextNavigateSync';

package/dist/next.es.js

@@ -0,0 +1,4 @@
+import { CrudNextNavigateSync as t } from "./navigator/CrudNextNavigateSync.es.js";
+export {
+  t as CrudNextNavigateSync
+};

package/dist/react-router.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigator/CrudReactRouterNavigateSync.cjs.js");exports.CrudReactRouterNavigateSync=e.CrudReactRouterNavigateSync;

package/dist/react-router.d.ts

@@ -0,0 +1 @@
+export { CrudReactRouterNavigateSync } from './navigator/CrudReactRouterNavigateSync';

package/dist/react-router.es.js

@@ -0,0 +1,4 @@
+import { CrudReactRouterNavigateSync as t } from "./navigator/CrudReactRouterNavigateSync.es.js";
+export {
+  t as CrudReactRouterNavigateSync
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",
@@ -46,7 +46,17 @@
       "require": "./dist/util/index.cjs.js"
     },
     "./style.css": "./dist/style.css",
-    "./styles": "./dist/style.css"
+    "./styles": "./dist/style.css",
+    "./react-router": {
+      "types": "./dist/react-router.d.ts",
+      "import": "./dist/react-router.es.js",
+      "require": "./dist/react-router.cjs.js"
+    },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "import": "./dist/next.es.js",
+      "require": "./dist/next.cjs.js"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -115,7 +125,8 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
     "react-i18next": "^15.2.0",
-    "react-router-dom": ">=6.3.0"
+    "react-router-dom": ">=6.3.0",
+    "next": ">=14.0.0"
   },
   "peerDependenciesMeta": {
     "i18next": {
@@ -123,6 +134,12 @@
     },
     "react-i18next": {
       "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
     }
   },
   "scripts": {