@pdfme/ui 5.5.6-dev.1 → 5.5.6

package/dist/index.umd.js

@@ -1038,4 +1038,4 @@ canvas {
         transform: rotate(360deg);
       }
     }
-  `}),jsxRuntimeExports.jsx("div",{style:s,children:jsxRuntimeExports.jsx(LoaderCircle,{size:50,style:c})})]})},Root$1=({size:a,scale:s,children:c},u)=>{const d=reactExports.useContext(FontContext);return reactExports.useEffect(()=>{if(!document||!document.fonts)return;const v=Object.entries(d).map(([A,{data:x}])=>new FontFace(A,typeof x=="string"?`url(${x})`:x,{display:"swap"})).filter(A=>!document.fonts.has(A));Promise.allSettled(v.map(A=>A.load())).then(A=>{A.forEach(x=>{x.status==="fulfilled"&&document.fonts.add(x.value)})})},[d]),jsxRuntimeExports.jsx("div",{className:DESIGNER_CLASSNAME+"root",ref:u,style:{position:"relative",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{className:DESIGNER_CLASSNAME+"background",style:{margin:"0 auto",...a},children:s===0?jsxRuntimeExports.jsx(Spinner,{}):c})})},Root=reactExports.forwardRef(Root$1),ErrorScreen=({size:a,error:s})=>{const c=reactExports.useContext(I18nContext),{token:u}=theme.useToken();return jsxRuntimeExports.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{width:300,margin:"0 auto",background:u.colorBgLayout},children:jsxRuntimeExports.jsx(Result$1,{icon:null,title:"ERROR",subTitle:c("errorOccurred"),extra:jsxRuntimeExports.jsx("span",{children:s.message})})})})},{Text:Text$1}=Typography,Zoom=({zoomLevel:a,setZoomLevel:s,style:c})=>{const d=useMaxZoom(),p=.25,v=a-.25,A=a+.25;return jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"zoom-out",type:"text",disabled:p>=v,onClick:()=>s(v),icon:jsxRuntimeExports.jsx(Minus,{size:16,color:c.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:c.textStyle,children:[Math.round(a*100),"%"]}),jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"zoom-in",type:"text",disabled:d<A,onClick:()=>s(A),icon:jsxRuntimeExports.jsx(Plus,{size:16,color:c.textStyle.color})})]})},Pager=({pageCursor:a,pageNum:s,setPageCursor:c,style:u})=>jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"page-prev",type:"text",disabled:a<=0,onClick:()=>c(a-1),children:jsxRuntimeExports.jsx(ChevronLeft,{size:16,color:u.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:u.textStyle,children:[a+1,"/",s]}),jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"page-next",type:"text",disabled:a+1>=s,onClick:()=>c(a+1),children:jsxRuntimeExports.jsx(ChevronRight,{size:16,color:u.textStyle.color})})]}),ContextMenu=({items:a,style:s})=>jsxRuntimeExports.jsx(Dropdown,{menu:{items:a},placement:"top",arrow:!0,trigger:["click"],children:jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"context-menu",type:"text",children:jsxRuntimeExports.jsx(Ellipsis,{size:16,color:s.textStyle.color})})}),CtlBar=a=>{const{token:s}=theme.useToken(),c=reactExports.useContext(I18nContext),{size:u,pageCursor:d,pageNum:p,setPageCursor:v,zoomLevel:A,setZoomLevel:x,addPageAfter:g,removePage:b}=a,y=[];g&&y.push({key:"1",label:jsxRuntimeExports.jsx("div",{onClick:g,children:c("addPageAfter")})}),b&&p>1&&d!==0&&y.push({key:"2",label:jsxRuntimeExports.jsx("div",{onClick:b,children:c("removePage")})});const f=300,m=y.length>0?50:0,E=(p>1?f:f/2)+m,w={color:s.colorWhite,fontSize:s.fontSize,margin:s.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:"auto",bottom:"6%",width:u.width},children:jsxRuntimeExports.jsxs("div",{className:UI_CLASSNAME+"control-bar",style:{display:"flex",alignItems:"center",justifyContent:"space-evenly",position:"relative",zIndex:1,left:`calc(50% - ${E/2}px)`,width:E,height:40,boxSizing:"border-box",padding:s.paddingSM,borderRadius:s.borderRadius,backgroundColor:s.colorBgMask},children:[p>1&&jsxRuntimeExports.jsx("div",{className:UI_CLASSNAME+"pager",children:jsxRuntimeExports.jsx(Pager,{style:{textStyle:w},pageCursor:d,pageNum:p,setPageCursor:v})}),jsxRuntimeExports.jsx("div",{className:UI_CLASSNAME+"zoom",children:jsxRuntimeExports.jsx(Zoom,{style:{textStyle:w},zoomLevel:A,setZoomLevel:x})}),y.length>0&&jsxRuntimeExports.jsx(ContextMenu,{items:y,style:{textStyle:w}})]})})},scaleDragPosAdjustment=(a,s)=>s>1?a*(s-1):s<1?a*-(1-s):0,TemplateEditor=({template:a,size:s,onSaveTemplate:c,onChangeTemplate:u,onPageCursorChange:d})=>{const p=reactExports.useRef([]),v=reactExports.useRef([]),A=reactExports.useRef(null),x=reactExports.useRef([]),g=reactExports.useContext(I18nContext),b=reactExports.useContext(PluginsRegistry),y=reactExports.useContext(OptionsContext),f=useMaxZoom(),[m,E]=reactExports.useState(null),[w,S]=reactExports.useState([]),[$,T]=reactExports.useState([[]]),[I,_]=reactExports.useState(0),[C,P]=reactExports.useState(y.zoomLevel??1),[O,L]=reactExports.useState(y.sidebarOpen??!0),[B,F]=reactExports.useState(null),{backgrounds:D,pageSizes:V,scale:j,error:G,refresh:U}=useUIPreProcessor({template:a,size:s,zoomLevel:C,maxZoom:f}),M=ae=>{S(ae),E(null)},N=()=>{S([]),E(null)};reactExports.useEffect(()=>{typeof y.zoomLevel=="number"&&y.zoomLevel!==C&&P(y.zoomLevel),typeof y.sidebarOpen=="boolean"&&y.sidebarOpen!==O&&L(y.sidebarOpen)},[y]),useScrollPageCursor({ref:A,pageSizes:V,scale:j,pageCursor:I,onChangePageCursor:ae=>{_(ae),d(ae,$.length),N()}});const R=reactExports.useCallback(ae=>{v.current=[],p.current.push(cloneDeep$1($[I]));const oe=cloneDeep$1($);oe[I]=ae,T(oe),u(schemasList2template(oe,a.basePdf))},[a,$,I,u]),k=reactExports.useCallback(ae=>{R($[I].filter(oe=>!ae.includes(oe.id))),N()},[$,I,R]),H=reactExports.useCallback(ae=>{changeSchemas({objs:ae,schemas:$[I],basePdf:a.basePdf,pluginsRegistry:b,pageSize:V[I],commitSchemas:R})},[R,I,$,b,V,a.basePdf]);useInitEvents({pageCursor:I,pageSizes:V,activeElements:w,template:a,schemasList:$,changeSchemas:H,commitSchemas:R,removeSchemas:k,onSaveTemplate:c,past:p,future:v,setSchemasList:T,onEdit:M,onEditEnd:N});const W=reactExports.useCallback(async ae=>{const oe=await template2SchemasList(ae);T(oe),N(),_(0),A.current?.scroll&&A.current.scroll({top:0,behavior:"smooth"})},[]),J=ae=>{const[oe,se,fe,pe]=isBlankPdf(a.basePdf)?a.basePdf.padding:[0,0,0,0],ge=V[I],me=ve=>{let he=$.reduce((Ee,xe)=>Ee+xe.length,1),ye=ve+he;for(;$.some(Ee=>Ee.find(xe=>xe.name===ye));)he++,ye=ve+he;return ye},be=(ve,he,ye)=>Math.min(Math.max(ve,he),ye),le={id:uuid$6(),...ae,name:me(g("field")),position:{x:be(pe,ae.position.x,ge.width-se-ae.width),y:be(oe,ae.position.y,ge.height-fe-ae.height)},required:ae.readOnly?!1:y.requiredByDefault||ae.required||!1};if(ae.position.y===0){const ve=x.current[I],he=ve?ve.getBoundingClientRect().top:0;le.position.y=he>0?oe:V[I].height/2}R($[I].concat(le)),setTimeout(()=>M([document.getElementById(le.id)]))},re=ae=>{R(ae)},K=ae=>{E(ae)},q=async(ae,oe)=>{_(oe);const se=schemasList2template(ae,a.basePdf);u(se),await W(se),U(se),d(oe,ae.length),setTimeout(()=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(V,oe,j))},0)},Q=()=>{if(I===0||!window.confirm(g("removePageConfirm")))return;const ae=cloneDeep$1($);ae.splice(I,1),q(ae,I-1)},ee=()=>{const ae=cloneDeep$1($);ae.splice(I+1,0,[]),q(ae,I+1)};B!==a&&(F(a),W(a));const Y=s.width-LEFT_SIDEBAR_WIDTH,Z={width:O?Y-RIGHT_SIDEBAR_WIDTH:Y,height:s.height};if(G)return jsxRuntimeExports.jsx(ErrorScreen,{size:s,error:G});const te=isBlankPdf(a.basePdf)?{addPageAfter:ee,removePage:Q}:{};return jsxRuntimeExports.jsx(Root,{size:s,scale:j,children:jsxRuntimeExports.jsxs(DndContext,{onDragEnd:ae=>{if(!ae.active)return;const oe=ae.active,se=x.current[I].getBoundingClientRect(),fe=oe.rect.current.initial?.left||0,pe=oe.rect.current.initial?.top||0,ge=se.left-fe+scaleDragPosAdjustment(20,j),me=se.top-pe,be=(ae.delta.y-me)/j,le=(ae.delta.x-ge)/j,ve={x:round$1(px2mm(Math.max(0,le)),2),y:round$1(px2mm(Math.max(0,be)),2)};J({...oe.data.current,position:ve})},onDragStart:N,children:[jsxRuntimeExports.jsx(LeftSidebar,{height:A.current?A.current.clientHeight:0,scale:j,basePdf:a.basePdf}),jsxRuntimeExports.jsxs("div",{style:{position:"absolute",width:Y,marginLeft:LEFT_SIDEBAR_WIDTH},children:[jsxRuntimeExports.jsx(CtlBar,{size:Z,pageCursor:I,pageNum:$.length,setPageCursor:ae=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(V,ae,j),_(ae),d(ae,$.length),N())},zoomLevel:C,setZoomLevel:P,...te}),jsxRuntimeExports.jsx(Sidebar,{hoveringSchemaId:m,onChangeHoveringSchemaId:K,height:A.current?A.current.clientHeight:0,size:s,pageSize:V[I]??[],basePdf:a.basePdf,activeElements:w,schemasList:$,schemas:$[I]??[],changeSchemas:H,onSortEnd:re,onEdit:ae=>{const oe=document.getElementById(ae);oe&&M([oe])},onEditEnd:N,deselectSchema:N,sidebarOpen:O,setSidebarOpen:L}),jsxRuntimeExports.jsx(Canvas,{ref:A,paperRefs:x,basePdf:a.basePdf,hoveringSchemaId:m,onChangeHoveringSchemaId:K,height:s.height-RULER_HEIGHT*ZOOM,pageCursor:I,scale:j,size:Z,pageSizes:V,backgrounds:D,activeElements:w,schemasList:$,changeSchemas:H,removeSchemas:k,sidebarOpen:O,onEdit:M})]})]})})},defaultTheme={token:{colorPrimary:"#38a0ff"},components:{Form:{fontSize:12,margin:8,marginLG:12,marginXS:4,padding:8,paddingLG:12,paddingXS:4,itemMarginBottom:4,verticalLabelPadding:"0 0 2px"}}},isObject=a=>!!a&&typeof a=="object"&&!Array.isArray(a),deepMerge=(a,s)=>{let c={...a};return isObject(a)&&isObject(s)&&Object.keys(s).forEach(u=>{const d=s[u];if(isObject(d))if(!(u in a))Object.assign(c,{[u]:d});else{const p=a[u];isObject(p)?c[u]=deepMerge(p,d):Object.assign(c,{[u]:d})}else Object.assign(c,{[u]:d})}),c},AppContextProvider=({children:a,lang:s,font:c,plugins:u,options:d})=>{let p=defaultTheme;d.theme&&(p=deepMerge(p,d.theme));let v=getDict(s);return d.labels&&(v=deepMerge(v,d.labels)),jsxRuntimeExports.jsx(ConfigProvider,{theme:p,children:jsxRuntimeExports.jsx(I18nContext.Provider,{value:A=>i18n(A,v),children:jsxRuntimeExports.jsx(FontContext.Provider,{value:c,children:jsxRuntimeExports.jsx(PluginsRegistry.Provider,{value:u,children:jsxRuntimeExports.jsx(OptionsContext.Provider,{value:d,children:a})})})})})};class Designer extends BaseUIClass{constructor(s){super(s),this.pageCursor=0,checkDesignerProps(s)}saveTemplate(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.onSaveTemplateCallback&&this.onSaveTemplateCallback(this.template)}updateTemplate(s){if(checkTemplate(s),!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.template=cloneDeep$1(s),this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s),this.render()}onSaveTemplate(s){this.onSaveTemplateCallback=s}onChangeTemplate(s){this.onChangeTemplateCallback=s}onPageChange(s){this.onPageChangeCallback=s}getPageCursor(){return this.pageCursor}getTotalPages(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);return this.template.schemas.length}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(TemplateEditor,{template:this.template,onSaveTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onSaveTemplateCallback&&this.onSaveTemplateCallback(s)},onChangeTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s)},onPageCursorChange:(s,c)=>{this.pageCursor=s,this.onPageChangeCallback&&this.onPageChangeCallback({currentPage:s,totalPages:c})},size:this.size})}),this.domContainer)}}const{Text}=Typography,icons={left:ChevronLeft,right:ChevronRight,doubleLeft:ChevronsLeft,doubleRight:ChevronsRight},UnitButton=({type:a,onClick:s,disabled:c,textStyle:u})=>{const d=icons[a];return jsxRuntimeExports.jsx(Button$1,{type:"text",onClick:s,disabled:c,children:jsxRuntimeExports.jsx(d,{style:{color:u.color}})})},UnitPager=({size:a,unitCursor:s,unitNum:c,setUnitCursor:u})=>{if(c<=1)return null;const{token:d}=theme.useToken(),p={pointerEvents:"initial",position:"sticky",zIndex:1,display:"flex",alignItems:"center",boxSizing:"border-box",height:40,padding:d.paddingSM,borderRadius:d.borderRadius,backgroundColor:d.colorBgMask},v={color:d.colorWhite,fontSize:d.fontSize,margin:d.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",...a},children:jsxRuntimeExports.jsxs("div",{style:{position:"sticky",width:"100%",zIndex:1,top:`calc(50% - ${p.height/2}px)`,display:"flex",alignItems:"center"},children:[s>0&&jsxRuntimeExports.jsxs("div",{style:{left:"1rem",marginLeft:"1rem",...p},children:[jsxRuntimeExports.jsx(UnitButton,{type:"doubleLeft",onClick:()=>u(0),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"left",onClick:()=>u(s-1),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]})]}),s+1<c&&jsxRuntimeExports.jsxs("div",{style:{right:"1rem",marginLeft:"auto",marginRight:"1rem",...p},children:[jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]}),jsxRuntimeExports.jsx(UnitButton,{type:"right",onClick:()=>u(s+1),disabled:s+1>=c,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"doubleRight",onClick:()=>u(c-1),disabled:s+1>=c,textStyle:v})]})]})})},_cache=new Map,Preview=({template:a,inputs:s,size:c,onChangeInput:u,onPageChange:d})=>{const{token:p}=theme.useToken(),v=reactExports.useContext(FontContext),A=reactExports.useContext(OptionsContext),x=useMaxZoom(),g=reactExports.useRef(null),b=reactExports.useRef([]),[y,f]=reactExports.useState(0),[m,E]=reactExports.useState(0),[w,S]=reactExports.useState(A.zoomLevel??1),[$,T]=reactExports.useState([[]]),{backgrounds:I,pageSizes:_,scale:C,error:P,refresh:O}=useUIPreProcessor({template:a,size:c,zoomLevel:w,maxZoom:x}),L=!!u,B=s[y],F=j=>{getDynamicTemplate({template:j,input:B,options:{font:v},_cache,getDynamicHeights:(U,M)=>{switch(M.schema.type){case"table":return getDynamicHeightsForTable(U,M);default:return Promise.resolve([M.schema.height])}}}).then(async U=>{const M=await template2SchemasList(U);T(M),await O(U)}).catch(U=>console.error("[@pdfme/ui] ",U))};reactExports.useEffect(()=>{typeof A.zoomLevel=="number"&&A.zoomLevel!==w&&S(A.zoomLevel)},[A]),reactExports.useEffect(()=>{y>s.length-1&&f(s.length-1),F(a)},[a,s,c]),useScrollPageCursor({ref:g,pageSizes:_,scale:C,pageCursor:m,onChangePageCursor:j=>{E(j),d&&d({currentPage:j,totalPages:$.length})}});const D=({name:j,value:G})=>u&&u({index:y,name:j,value:G}),V=(j,G)=>{let U=!1;j.forEach(({key:M,value:N})=>{if(M==="content"){const R=N,k=B?.[G.name]||"";if(R===k)return;D({name:G.name,value:R}),G.type==="table"&&(U=!0)}else{const R=$[m].find(k=>k.id===G.id);if(!R)return;R[M]=N}}),U&&F(a),T([...$])};return P?jsxRuntimeExports.jsx(ErrorScreen,{size:c,error:P}):jsxRuntimeExports.jsxs(Root,{size:c,scale:C,children:[jsxRuntimeExports.jsx(CtlBar,{size:c,pageCursor:m,pageNum:$.length,setPageCursor:j=>{g.current&&(g.current.scrollTop=getPagesScrollTopByIndex(_,j,C),E(j),d&&d({currentPage:j,totalPages:$.length}))},zoomLevel:w,setZoomLevel:S}),jsxRuntimeExports.jsx(UnitPager,{size:c,unitCursor:y,unitNum:s.length,setUnitCursor:f}),jsxRuntimeExports.jsx("div",{ref:g,style:{...c,position:"relative",overflow:"auto"},children:jsxRuntimeExports.jsx(Paper,{paperRefs:b,scale:C,size:c,schemasList:$,pageSizes:_,backgrounds:I,renderSchema:({schema:j,index:G})=>{const U=j.readOnly?replacePlaceholders({content:j.content||"",variables:{...B,totalPages:$.length,currentPage:G+1},schemas:$}):String(B&&B[j.name]||"");return jsxRuntimeExports.jsx(Renderer,{schema:j,basePdf:a.basePdf,value:U,mode:L?"form":"viewer",placeholder:j.content,tabIndex:G+100,onChange:M=>{const N=Array.isArray(M)?M:[M];V(N,j)},outline:L&&!j.readOnly?`1px dashed ${p.colorPrimary}`:"transparent",scale:C},j.id)},renderPaper:({index:j})=>jsxRuntimeExports.jsx(StaticSchema,{template:a,scale:C,input:B,totalPages:$.length,currentPage:j+1})})})]})};class Form extends PreviewUI{constructor(s){super(s),this.pageCursor=0}onChangeInput(s){this.onChangeInputCallback=s}onPageChange(s){this.onPageChangeCallback=s}getPageCursor(){return this.pageCursor}getTotalPages(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);return this.template.schemas.length}setInputs(s){const c=this.getInputs();super.setInputs(s);const u=[];s.forEach((d,p)=>{const v=c[p]||{};new Set([...Object.keys(d),...Object.keys(v)]).forEach(x=>{const g=d[x],b=v[x];g!==b&&u.push({index:p,name:x,value:g})})}),u.forEach(d=>{this.onChangeInputCallback&&this.onChangeInputCallback(d)})}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs,onChangeInput:s=>{const{index:c,value:u,name:d}=s;this.onChangeInputCallback&&this.onChangeInputCallback({index:c,value:u,name:d}),this.inputs&&this.inputs[c]&&this.inputs[c][d]!==u&&(this.inputs[c][d]=u,this.render())},onPageChange:s=>{this.pageCursor=s.currentPage,this.onPageChangeCallback&&this.onPageChangeCallback(s)}})}),this.domContainer)}}class Viewer extends PreviewUI{constructor(s){super(s),this.pageCursor=0,console.warn("[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.")}onPageChange(s){this.onPageChangeCallback=s}getPageCursor(){return this.pageCursor}getTotalPages(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);return this.template.schemas.length}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs,onPageChange:s=>{this.pageCursor=s.currentPage,this.onPageChangeCallback&&this.onPageChangeCallback(s)}})}),this.domContainer)}}exports.Designer=Designer,exports.Form=Form,exports.Viewer=Viewer,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}));
+  `}),jsxRuntimeExports.jsx("div",{style:s,children:jsxRuntimeExports.jsx(LoaderCircle,{size:50,style:c})})]})},Root$1=({size:a,scale:s,children:c},u)=>{const d=reactExports.useContext(FontContext);return reactExports.useEffect(()=>{if(!document||!document.fonts)return;const v=Object.entries(d).map(([A,{data:x}])=>new FontFace(A,typeof x=="string"?`url(${x})`:x,{display:"swap"})).filter(A=>!document.fonts.has(A));Promise.allSettled(v.map(A=>A.load())).then(A=>{A.forEach(x=>{x.status==="fulfilled"&&document.fonts.add(x.value)})})},[d]),jsxRuntimeExports.jsx("div",{className:DESIGNER_CLASSNAME+"root",ref:u,style:{position:"relative",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{className:DESIGNER_CLASSNAME+"background",style:{margin:"0 auto",...a},children:s===0?jsxRuntimeExports.jsx(Spinner,{}):c})})},Root=reactExports.forwardRef(Root$1),ErrorScreen=({size:a,error:s})=>{const c=reactExports.useContext(I18nContext),{token:u}=theme.useToken();return jsxRuntimeExports.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{width:300,margin:"0 auto",background:u.colorBgLayout},children:jsxRuntimeExports.jsx(Result$1,{icon:null,title:"ERROR",subTitle:c("errorOccurred"),extra:jsxRuntimeExports.jsx("span",{children:s.message})})})})},{Text:Text$1}=Typography,Zoom=({zoomLevel:a,setZoomLevel:s,style:c})=>{const d=useMaxZoom(),p=.25,v=a-.25,A=a+.25;return jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"zoom-out",type:"text",disabled:p>=v,onClick:()=>s(v),icon:jsxRuntimeExports.jsx(Minus,{size:16,color:c.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:c.textStyle,children:[Math.round(a*100),"%"]}),jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"zoom-in",type:"text",disabled:d<A,onClick:()=>s(A),icon:jsxRuntimeExports.jsx(Plus,{size:16,color:c.textStyle.color})})]})},Pager=({pageCursor:a,pageNum:s,setPageCursor:c,style:u})=>jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"page-prev",type:"text",disabled:a<=0,onClick:()=>c(a-1),children:jsxRuntimeExports.jsx(ChevronLeft,{size:16,color:u.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:u.textStyle,children:[a+1,"/",s]}),jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"page-next",type:"text",disabled:a+1>=s,onClick:()=>c(a+1),children:jsxRuntimeExports.jsx(ChevronRight,{size:16,color:u.textStyle.color})})]}),ContextMenu=({items:a,style:s})=>jsxRuntimeExports.jsx(Dropdown,{menu:{items:a},placement:"top",arrow:!0,trigger:["click"],children:jsxRuntimeExports.jsx(Button$1,{className:UI_CLASSNAME+"context-menu",type:"text",children:jsxRuntimeExports.jsx(Ellipsis,{size:16,color:s.textStyle.color})})}),CtlBar=a=>{const{token:s}=theme.useToken(),c=reactExports.useContext(I18nContext),{size:u,pageCursor:d,pageNum:p,setPageCursor:v,zoomLevel:A,setZoomLevel:x,addPageAfter:g,removePage:b}=a,y=[];g&&y.push({key:"1",label:jsxRuntimeExports.jsx("div",{onClick:g,children:c("addPageAfter")})}),b&&p>1&&d!==0&&y.push({key:"2",label:jsxRuntimeExports.jsx("div",{onClick:b,children:c("removePage")})});const f=300,m=y.length>0?50:0,E=(p>1?f:f/2)+m,w={color:s.colorWhite,fontSize:s.fontSize,margin:s.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:"auto",bottom:"6%",width:u.width},children:jsxRuntimeExports.jsxs("div",{className:UI_CLASSNAME+"control-bar",style:{display:"flex",alignItems:"center",justifyContent:"space-evenly",position:"relative",zIndex:1,left:`calc(50% - ${E/2}px)`,width:E,height:40,boxSizing:"border-box",padding:s.paddingSM,borderRadius:s.borderRadius,backgroundColor:s.colorBgMask},children:[p>1&&jsxRuntimeExports.jsx("div",{className:UI_CLASSNAME+"pager",children:jsxRuntimeExports.jsx(Pager,{style:{textStyle:w},pageCursor:d,pageNum:p,setPageCursor:v})}),jsxRuntimeExports.jsx("div",{className:UI_CLASSNAME+"zoom",children:jsxRuntimeExports.jsx(Zoom,{style:{textStyle:w},zoomLevel:A,setZoomLevel:x})}),y.length>0&&jsxRuntimeExports.jsx(ContextMenu,{items:y,style:{textStyle:w}})]})})},scaleDragPosAdjustment=(a,s)=>s>1?a*(s-1):s<1?a*-(1-s):0,TemplateEditor=({template:a,size:s,onSaveTemplate:c,onChangeTemplate:u,onPageCursorChange:d})=>{const p=reactExports.useRef([]),v=reactExports.useRef([]),A=reactExports.useRef(null),x=reactExports.useRef([]),g=reactExports.useContext(I18nContext),b=reactExports.useContext(PluginsRegistry),y=reactExports.useContext(OptionsContext),f=useMaxZoom(),[m,E]=reactExports.useState(null),[w,S]=reactExports.useState([]),[$,T]=reactExports.useState([[]]),[I,_]=reactExports.useState(0),[C,P]=reactExports.useState(y.zoomLevel??1),[O,L]=reactExports.useState(y.sidebarOpen??!0),[B,F]=reactExports.useState(null),{backgrounds:D,pageSizes:V,scale:j,error:G,refresh:U}=useUIPreProcessor({template:a,size:s,zoomLevel:C,maxZoom:f}),M=ae=>{S(ae),E(null)},N=()=>{S([]),E(null)};reactExports.useEffect(()=>{typeof y.zoomLevel=="number"&&y.zoomLevel!==C&&P(y.zoomLevel),typeof y.sidebarOpen=="boolean"&&y.sidebarOpen!==O&&L(y.sidebarOpen)},[y]),useScrollPageCursor({ref:A,pageSizes:V,scale:j,pageCursor:I,onChangePageCursor:ae=>{_(ae),d(ae),N()}});const R=reactExports.useCallback(ae=>{v.current=[],p.current.push(cloneDeep$1($[I]));const oe=cloneDeep$1($);oe[I]=ae,T(oe),u(schemasList2template(oe,a.basePdf))},[a,$,I,u]),k=reactExports.useCallback(ae=>{R($[I].filter(oe=>!ae.includes(oe.id))),N()},[$,I,R]),H=reactExports.useCallback(ae=>{changeSchemas({objs:ae,schemas:$[I],basePdf:a.basePdf,pluginsRegistry:b,pageSize:V[I],commitSchemas:R})},[R,I,$,b,V,a.basePdf]);useInitEvents({pageCursor:I,pageSizes:V,activeElements:w,template:a,schemasList:$,changeSchemas:H,commitSchemas:R,removeSchemas:k,onSaveTemplate:c,past:p,future:v,setSchemasList:T,onEdit:M,onEditEnd:N});const W=reactExports.useCallback(async ae=>{const oe=await template2SchemasList(ae);T(oe),N(),_(0),A.current?.scroll&&A.current.scroll({top:0,behavior:"smooth"})},[]),J=ae=>{const[oe,se,fe,pe]=isBlankPdf(a.basePdf)?a.basePdf.padding:[0,0,0,0],ge=V[I],me=ve=>{let he=$.reduce((Ee,xe)=>Ee+xe.length,1),ye=ve+he;for(;$.some(Ee=>Ee.find(xe=>xe.name===ye));)he++,ye=ve+he;return ye},be=(ve,he,ye)=>Math.min(Math.max(ve,he),ye),le={id:uuid$6(),...ae,name:me(g("field")),position:{x:be(pe,ae.position.x,ge.width-se-ae.width),y:be(oe,ae.position.y,ge.height-fe-ae.height)},required:ae.readOnly?!1:y.requiredByDefault||ae.required||!1};if(ae.position.y===0){const ve=x.current[I],he=ve?ve.getBoundingClientRect().top:0;le.position.y=he>0?oe:V[I].height/2}R($[I].concat(le)),setTimeout(()=>M([document.getElementById(le.id)]))},re=ae=>{R(ae)},K=ae=>{E(ae)},q=async(ae,oe)=>{_(oe);const se=schemasList2template(ae,a.basePdf);u(se),await W(se),U(se),setTimeout(()=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(V,oe,j))},0)},Q=()=>{if(I===0||!window.confirm(g("removePageConfirm")))return;const ae=cloneDeep$1($);ae.splice(I,1),q(ae,I-1)},ee=()=>{const ae=cloneDeep$1($);ae.splice(I+1,0,[]),q(ae,I+1)};B!==a&&(F(a),W(a));const Y=s.width-LEFT_SIDEBAR_WIDTH,Z={width:O?Y-RIGHT_SIDEBAR_WIDTH:Y,height:s.height};if(G)return jsxRuntimeExports.jsx(ErrorScreen,{size:s,error:G});const te=isBlankPdf(a.basePdf)?{addPageAfter:ee,removePage:Q}:{};return jsxRuntimeExports.jsx(Root,{size:s,scale:j,children:jsxRuntimeExports.jsxs(DndContext,{onDragEnd:ae=>{if(!ae.active)return;const oe=ae.active,se=x.current[I].getBoundingClientRect(),fe=oe.rect.current.initial?.left||0,pe=oe.rect.current.initial?.top||0,ge=se.left-fe+scaleDragPosAdjustment(20,j),me=se.top-pe,be=(ae.delta.y-me)/j,le=(ae.delta.x-ge)/j,ve={x:round$1(px2mm(Math.max(0,le)),2),y:round$1(px2mm(Math.max(0,be)),2)};J({...oe.data.current,position:ve})},onDragStart:N,children:[jsxRuntimeExports.jsx(LeftSidebar,{height:A.current?A.current.clientHeight:0,scale:j,basePdf:a.basePdf}),jsxRuntimeExports.jsxs("div",{style:{position:"absolute",width:Y,marginLeft:LEFT_SIDEBAR_WIDTH},children:[jsxRuntimeExports.jsx(CtlBar,{size:Z,pageCursor:I,pageNum:$.length,setPageCursor:ae=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(V,ae,j),_(ae),N())},zoomLevel:C,setZoomLevel:P,...te}),jsxRuntimeExports.jsx(Sidebar,{hoveringSchemaId:m,onChangeHoveringSchemaId:K,height:A.current?A.current.clientHeight:0,size:s,pageSize:V[I]??[],basePdf:a.basePdf,activeElements:w,schemasList:$,schemas:$[I]??[],changeSchemas:H,onSortEnd:re,onEdit:ae=>{const oe=document.getElementById(ae);oe&&M([oe])},onEditEnd:N,deselectSchema:N,sidebarOpen:O,setSidebarOpen:L}),jsxRuntimeExports.jsx(Canvas,{ref:A,paperRefs:x,basePdf:a.basePdf,hoveringSchemaId:m,onChangeHoveringSchemaId:K,height:s.height-RULER_HEIGHT*ZOOM,pageCursor:I,scale:j,size:Z,pageSizes:V,backgrounds:D,activeElements:w,schemasList:$,changeSchemas:H,removeSchemas:k,sidebarOpen:O,onEdit:M})]})]})})},defaultTheme={token:{colorPrimary:"#38a0ff"},components:{Form:{fontSize:12,margin:8,marginLG:12,marginXS:4,padding:8,paddingLG:12,paddingXS:4,itemMarginBottom:4,verticalLabelPadding:"0 0 2px"}}},isObject=a=>!!a&&typeof a=="object"&&!Array.isArray(a),deepMerge=(a,s)=>{let c={...a};return isObject(a)&&isObject(s)&&Object.keys(s).forEach(u=>{const d=s[u];if(isObject(d))if(!(u in a))Object.assign(c,{[u]:d});else{const p=a[u];isObject(p)?c[u]=deepMerge(p,d):Object.assign(c,{[u]:d})}else Object.assign(c,{[u]:d})}),c},AppContextProvider=({children:a,lang:s,font:c,plugins:u,options:d})=>{let p=defaultTheme;d.theme&&(p=deepMerge(p,d.theme));let v=getDict(s);return d.labels&&(v=deepMerge(v,d.labels)),jsxRuntimeExports.jsx(ConfigProvider,{theme:p,children:jsxRuntimeExports.jsx(I18nContext.Provider,{value:A=>i18n(A,v),children:jsxRuntimeExports.jsx(FontContext.Provider,{value:c,children:jsxRuntimeExports.jsx(PluginsRegistry.Provider,{value:u,children:jsxRuntimeExports.jsx(OptionsContext.Provider,{value:d,children:a})})})})})};class Designer extends BaseUIClass{constructor(s){super(s),this.pageCursor=0,checkDesignerProps(s)}saveTemplate(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.onSaveTemplateCallback&&this.onSaveTemplateCallback(this.template)}updateTemplate(s){if(checkTemplate(s),!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.template=cloneDeep$1(s),this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s),this.render()}onSaveTemplate(s){this.onSaveTemplateCallback=s}onChangeTemplate(s){this.onChangeTemplateCallback=s}getPageCursor(){return this.pageCursor}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(TemplateEditor,{template:this.template,onSaveTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onSaveTemplateCallback&&this.onSaveTemplateCallback(s)},onChangeTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s)},onPageCursorChange:s=>{this.pageCursor=s},size:this.size})}),this.domContainer)}}const{Text}=Typography,icons={left:ChevronLeft,right:ChevronRight,doubleLeft:ChevronsLeft,doubleRight:ChevronsRight},UnitButton=({type:a,onClick:s,disabled:c,textStyle:u})=>{const d=icons[a];return jsxRuntimeExports.jsx(Button$1,{type:"text",onClick:s,disabled:c,children:jsxRuntimeExports.jsx(d,{style:{color:u.color}})})},UnitPager=({size:a,unitCursor:s,unitNum:c,setUnitCursor:u})=>{if(c<=1)return null;const{token:d}=theme.useToken(),p={pointerEvents:"initial",position:"sticky",zIndex:1,display:"flex",alignItems:"center",boxSizing:"border-box",height:40,padding:d.paddingSM,borderRadius:d.borderRadius,backgroundColor:d.colorBgMask},v={color:d.colorWhite,fontSize:d.fontSize,margin:d.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",...a},children:jsxRuntimeExports.jsxs("div",{style:{position:"sticky",width:"100%",zIndex:1,top:`calc(50% - ${p.height/2}px)`,display:"flex",alignItems:"center"},children:[s>0&&jsxRuntimeExports.jsxs("div",{style:{left:"1rem",marginLeft:"1rem",...p},children:[jsxRuntimeExports.jsx(UnitButton,{type:"doubleLeft",onClick:()=>u(0),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"left",onClick:()=>u(s-1),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]})]}),s+1<c&&jsxRuntimeExports.jsxs("div",{style:{right:"1rem",marginLeft:"auto",marginRight:"1rem",...p},children:[jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]}),jsxRuntimeExports.jsx(UnitButton,{type:"right",onClick:()=>u(s+1),disabled:s+1>=c,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"doubleRight",onClick:()=>u(c-1),disabled:s+1>=c,textStyle:v})]})]})})},_cache=new Map,Preview=({template:a,inputs:s,size:c,onChangeInput:u})=>{const{token:d}=theme.useToken(),p=reactExports.useContext(FontContext),v=reactExports.useContext(OptionsContext),A=useMaxZoom(),x=reactExports.useRef(null),g=reactExports.useRef([]),[b,y]=reactExports.useState(0),[f,m]=reactExports.useState(0),[E,w]=reactExports.useState(v.zoomLevel??1),[S,$]=reactExports.useState([[]]),{backgrounds:T,pageSizes:I,scale:_,error:C,refresh:P}=useUIPreProcessor({template:a,size:c,zoomLevel:E,maxZoom:A}),O=!!u,L=s[b],B=V=>{getDynamicTemplate({template:V,input:L,options:{font:p},_cache,getDynamicHeights:(G,U)=>{switch(U.schema.type){case"table":return getDynamicHeightsForTable(G,U);default:return Promise.resolve([U.schema.height])}}}).then(async G=>{const U=await template2SchemasList(G);$(U),await P(G)}).catch(G=>console.error("[@pdfme/ui] ",G))};reactExports.useEffect(()=>{typeof v.zoomLevel=="number"&&v.zoomLevel!==E&&w(v.zoomLevel)},[v]),reactExports.useEffect(()=>{b>s.length-1&&y(s.length-1),B(a)},[a,s,c]),useScrollPageCursor({ref:x,pageSizes:I,scale:_,pageCursor:f,onChangePageCursor:m});const F=({name:V,value:j})=>u&&u({index:b,name:V,value:j}),D=(V,j)=>{let G=!1;V.forEach(({key:U,value:M})=>{if(U==="content"){const N=M,R=L?.[j.name]||"";if(N===R)return;F({name:j.name,value:N}),j.type==="table"&&(G=!0)}else{const N=S[f].find(R=>R.id===j.id);if(!N)return;N[U]=M}}),G&&B(a),$([...S])};return C?jsxRuntimeExports.jsx(ErrorScreen,{size:c,error:C}):jsxRuntimeExports.jsxs(Root,{size:c,scale:_,children:[jsxRuntimeExports.jsx(CtlBar,{size:c,pageCursor:f,pageNum:S.length,setPageCursor:V=>{x.current&&(x.current.scrollTop=getPagesScrollTopByIndex(I,V,_),m(V))},zoomLevel:E,setZoomLevel:w}),jsxRuntimeExports.jsx(UnitPager,{size:c,unitCursor:b,unitNum:s.length,setUnitCursor:y}),jsxRuntimeExports.jsx("div",{ref:x,style:{...c,position:"relative",overflow:"auto"},children:jsxRuntimeExports.jsx(Paper,{paperRefs:g,scale:_,size:c,schemasList:S,pageSizes:I,backgrounds:T,renderSchema:({schema:V,index:j})=>{const G=V.readOnly?replacePlaceholders({content:V.content||"",variables:{...L,totalPages:S.length,currentPage:j+1},schemas:S}):String(L&&L[V.name]||"");return jsxRuntimeExports.jsx(Renderer,{schema:V,basePdf:a.basePdf,value:G,mode:O?"form":"viewer",placeholder:V.content,tabIndex:j+100,onChange:U=>{const M=Array.isArray(U)?U:[U];D(M,V)},outline:O&&!V.readOnly?`1px dashed ${d.colorPrimary}`:"transparent",scale:_},V.id)},renderPaper:({index:V})=>jsxRuntimeExports.jsx(StaticSchema,{template:a,scale:_,input:L,totalPages:S.length,currentPage:V+1})})})]})};class Form extends PreviewUI{constructor(s){super(s)}onChangeInput(s){this.onChangeInputCallback=s}setInputs(s){const c=this.getInputs();super.setInputs(s);const u=[];s.forEach((d,p)=>{const v=c[p]||{};new Set([...Object.keys(d),...Object.keys(v)]).forEach(x=>{const g=d[x],b=v[x];g!==b&&u.push({index:p,name:x,value:g})})}),u.forEach(d=>{this.onChangeInputCallback&&this.onChangeInputCallback(d)})}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs,onChangeInput:s=>{const{index:c,value:u,name:d}=s;this.onChangeInputCallback&&this.onChangeInputCallback({index:c,value:u,name:d}),this.inputs&&this.inputs[c]&&this.inputs[c][d]!==u&&(this.inputs[c][d]=u,this.render())}})}),this.domContainer)}}class Viewer extends PreviewUI{constructor(s){super(s),console.warn("[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.")}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs})}),this.domContainer)}}exports.Designer=Designer,exports.Form=Form,exports.Viewer=Viewer,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/src/Designer.d.ts

@@ -3,19 +3,13 @@ import { BaseUIClass } from './class.js';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;
-    private onPageChangeCallback?;
     private pageCursor;
     constructor(props: DesignerProps);
     saveTemplate(): void;
     updateTemplate(template: Template): void;
     onSaveTemplate(cb: (template: Template) => void): void;
     onChangeTemplate(cb: (template: Template) => void): void;
-    onPageChange(cb: (pageInfo: {
-        currentPage: number;
-        totalPages: number;
-    }) => void): void;
     getPageCursor(): number;
-    getTotalPages(): number;
     protected render(): void;
 }
 export default Designer;

package/dist/types/src/Form.d.ts

@@ -2,20 +2,12 @@ import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
 declare class Form extends PreviewUI {
     private onChangeInputCallback?;
-    private onPageChangeCallback?;
-    private pageCursor;
     constructor(props: PreviewProps);
     onChangeInput(cb: (arg: {
         index: number;
         value: string;
         name: string;
     }) => void): void;
-    onPageChange(cb: (pageInfo: {
-        currentPage: number;
-        totalPages: number;
-    }) => void): void;
-    getPageCursor(): number;
-    getTotalPages(): number;
     setInputs(inputs: {
         [key: string]: string;
     }[]): void;

package/dist/types/src/Viewer.d.ts

@@ -1,15 +1,7 @@
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
 declare class Viewer extends PreviewUI {
-    private onPageChangeCallback?;
-    private pageCursor;
     constructor(props: PreviewProps);
-    onPageChange(cb: (pageInfo: {
-        currentPage: number;
-        totalPages: number;
-    }) => void): void;
-    getPageCursor(): number;
-    getTotalPages(): number;
     protected render(): void;
 }
 export default Viewer;

package/dist/types/src/components/Designer/index.d.ts

@@ -6,6 +6,6 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
     onChangeTemplate: (t: Template) => void;
 } & {
     onChangeTemplate: (t: Template) => void;
-    onPageCursorChange: (newPageCursor: number, totalPages: number) => void;
+    onPageCursorChange: (newPageCursor: number) => void;
 }) => React.JSX.Element;
 export default TemplateEditor;

package/dist/types/src/components/Preview.d.ts

@@ -1,15 +1,11 @@
 import React from 'react';
 import { PreviewProps, Size } from '@pdfme/common';
-declare const Preview: ({ template, inputs, size, onChangeInput, onPageChange, }: Omit<PreviewProps, "domContainer"> & {
+declare const Preview: ({ template, inputs, size, onChangeInput, }: Omit<PreviewProps, "domContainer"> & {
     onChangeInput?: (args: {
         index: number;
         value: string;
         name: string;
     }) => void;
-    onPageChange?: (pageInfo: {
-        currentPage: number;
-        totalPages: number;
-    }) => void;
     size: Size;
 }) => React.JSX.Element;
 export default Preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.5.6-dev.1",
+  "version": "5.5.6",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Designer.tsx

@@ -16,7 +16,6 @@ import AppContextProvider from './components/AppContextProvider.js';
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
   private onChangeTemplateCallback?: (template: Template) => void;
-  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
   private pageCursor: number = 0;
 
   constructor(props: DesignerProps) {
@@ -49,19 +48,10 @@ class Designer extends BaseUIClass {
     this.onChangeTemplateCallback = cb;
   }
 
-  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
-    this.onPageChangeCallback = cb;
-  }
-
   public getPageCursor() {
     return this.pageCursor;
   }
 
-  public getTotalPages() {
-    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    return this.template.schemas.length;
-  }
-
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -87,14 +77,8 @@ class Designer extends BaseUIClass {
               this.onChangeTemplateCallback(template);
             }
           }}
-          onPageCursorChange={(newPageCursor: number, totalPages: number) => {
+          onPageCursorChange={(newPageCursor: number) => {
             this.pageCursor = newPageCursor;
-            if (this.onPageChangeCallback) {
-              this.onPageChangeCallback({
-                currentPage: newPageCursor,
-                totalPages: totalPages,
-              });
-            }
           }}
           size={this.size}
         />

package/src/Form.tsx

@@ -8,8 +8,6 @@ import Preview from './components/Preview.js';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; name: string }) => void;
-  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
-  private pageCursor: number = 0;
 
   constructor(props: PreviewProps) {
     super(props);
@@ -19,19 +17,6 @@ class Form extends PreviewUI {
     this.onChangeInputCallback = cb;
   }
 
-  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
-    this.onPageChangeCallback = cb;
-  }
-
-  public getPageCursor() {
-    return this.pageCursor;
-  }
-
-  public getTotalPages() {
-    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    return this.template.schemas.length;
-  }
-
   public setInputs(inputs: { [key: string]: string }[]): void {
     const previousInputs = this.getInputs();
 
@@ -86,12 +71,6 @@ class Form extends PreviewUI {
               }
             }
           }}
-          onPageChange={(pageInfo) => {
-            this.pageCursor = pageInfo.currentPage;
-            if (this.onPageChangeCallback) {
-              this.onPageChangeCallback(pageInfo);
-            }
-          }}
         />
       </AppContextProvider>,
       this.domContainer,

package/src/Viewer.tsx

@@ -7,9 +7,6 @@ import Preview from './components/Preview.js';
 import AppContextProvider from './components/AppContextProvider.js';
 
 class Viewer extends PreviewUI {
-  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
-  private pageCursor: number = 0;
-
   constructor(props: PreviewProps) {
     super(props);
     console.warn(
@@ -17,19 +14,6 @@ class Viewer extends PreviewUI {
     );
   }
 
-  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
-    this.onPageChangeCallback = cb;
-  }
-
-  public getPageCursor() {
-    return this.pageCursor;
-  }
-
-  public getTotalPages() {
-    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    return this.template.schemas.length;
-  }
-
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -39,17 +23,7 @@ class Viewer extends PreviewUI {
         plugins={this.getPluginsRegistry()}
         options={this.getOptions()}
       >
-        <Preview
-          template={this.template}
-          size={this.size}
-          inputs={this.inputs}
-          onPageChange={(pageInfo) => {
-            this.pageCursor = pageInfo.currentPage;
-            if (this.onPageChangeCallback) {
-              this.onPageChangeCallback(pageInfo);
-            }
-          }}
-        />
+        <Preview template={this.template} size={this.size} inputs={this.inputs} />
       </AppContextProvider>,
       this.domContainer,
     );

package/src/components/Designer/index.tsx

@@ -54,7 +54,7 @@ const TemplateEditor = ({
   onChangeTemplate: (t: Template) => void;
 } & {
   onChangeTemplate: (t: Template) => void;
-  onPageCursorChange: (newPageCursor: number, totalPages: number) => void;
+  onPageCursorChange: (newPageCursor: number) => void;
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
@@ -110,7 +110,7 @@ const TemplateEditor = ({
     pageCursor,
     onChangePageCursor: (p) => {
       setPageCursor(p);
-      onPageCursorChange(p, schemasList.length);
+      onPageCursorChange(p);
       onEditEnd();
     },
   });
@@ -239,9 +239,6 @@ const TemplateEditor = ({
     onChangeTemplate(newTemplate);
     await updateTemplate(newTemplate);
     void refresh(newTemplate);
-    
-    // Notify page change with updated total pages
-    onPageCursorChange(newPageCursor, sl.length);
 
     // Use setTimeout to update scroll position after render
     setTimeout(() => {
@@ -329,7 +326,6 @@ const TemplateEditor = ({
               // Update scroll position and state
               canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
               setPageCursor(p);
-              onPageCursorChange(p, schemasList.length);
               onEditEnd();
             }}
             zoomLevel={zoomLevel}

package/src/components/Preview.tsx

@@ -27,10 +27,8 @@ const Preview = ({
   inputs,
   size,
   onChangeInput,
-  onPageChange,
 }: Omit<PreviewProps, 'domContainer'> & {
   onChangeInput?: (args: { index: number; value: string; name: string }) => void;
-  onPageChange?: (pageInfo: { currentPage: number; totalPages: number }) => void;
   size: Size;
 }) => {
   const { token } = theme.useToken();
@@ -104,12 +102,7 @@ const Preview = ({
     pageSizes,
     scale,
     pageCursor,
-    onChangePageCursor: (p) => {
-      setPageCursor(p);
-      if (onPageChange) {
-        onPageChange({ currentPage: p, totalPages: schemasList.length });
-      }
-    },
+    onChangePageCursor: setPageCursor,
   });
 
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
@@ -153,9 +146,6 @@ const Preview = ({
           if (!containerRef.current) return;
           containerRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
           setPageCursor(p);
-          if (onPageChange) {
-            onPageChange({ currentPage: p, totalPages: schemasList.length });
-          }
         }}
         zoomLevel={zoomLevel}
         setZoomLevel={setZoomLevel}