@pdfme/ui 5.3.16-dev.28 → 5.3.16-dev.29

package/dist/index.es.js

@@ -153235,21 +153235,21 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   }, [I == null ? void 0 : I.ui, s.type, _]), !I || !I.ui ? (console.error(`[@pdfme/ui] Renderer for type ${s.type} not found. 
 Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})) : /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { ...a, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: "100%", width: "100%" }, ref: C }) });
 }, Draggable$1 = (a) => {
-  const { scale: s, basePdf: c, plugin: u } = a, { token: d } = theme.useToken(), p = u.propPanel.defaultSchema, v = useDraggable({ id: p.type, data: p }), { listeners: A, setNodeRef: b, attributes: g, transform: x, isDragging: y } = v, f = { transform: CSS$1.Translate.toString(x) };
+  const { scale: s, basePdf: c, plugin: u } = a, { token: d } = theme.useToken(), p = u.propPanel.defaultSchema, v = useDraggable({ id: p.type, data: p }), { listeners: A, setNodeRef: b, attributes: g, transform: x, isDragging: y } = v, f = { transform: CSS$1.Translate.toString(x) }, m = React.useMemo(() => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { transform: `scale(${s})` }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Renderer,
+    {
+      schema: { ...p, id: p.type },
+      basePdf: c,
+      value: p.content || "",
+      onChangeHoveringSchemaId: () => {
+      },
+      mode: "viewer",
+      outline: `1px solid ${d.colorPrimary}`,
+      scale: s
+    }
+  ) }), [p, c, s, d.colorPrimary]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: b, style: f, ...A, ...g, children: [
-    y && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { transform: `scale(${s})` }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Renderer,
-      {
-        schema: { ...p, id: p.type },
-        basePdf: c,
-        value: p.content || "",
-        onChangeHoveringSchemaId: () => {
-        },
-        mode: "viewer",
-        outline: `1px solid ${d.colorPrimary}`,
-        scale: s
-      }
-    ) }),
+    y && m,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { visibility: y ? "hidden" : "visible" }, children: a.children })
   ] });
 }, LeftSidebar = ({

package/dist/index.umd.js

@@ -880,7 +880,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function _unsupportedIterableToArray$1(a,s){if(a){if(typeof a=="string")return _arrayLikeToArray$1(a,s);var c={}.toString.call(a).slice(8,-1);return c==="Object"&&a.constructor&&(c=a.constructor.name),c==="Map"||c==="Set"?Array.from(a):c==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray$1(a,s):void 0}}function _arrayLikeToArray$1(a,s){(s==null||s>a.length)&&(s=a.length);for(var c=0,u=Array(s);c<s;c++)u[c]=a[c];return u}function _iterableToArrayLimit$1(a,s){var c=a==null?null:typeof Symbol<"u"&&a[Symbol.iterator]||a["@@iterator"];if(c!=null){var u,d,p,v,A=[],b=!0,g=!1;try{if(p=(c=c.call(a)).next,s!==0)for(;!(b=(u=p.call(c)).done)&&(A.push(u.value),A.length!==s);b=!0);}catch(x){g=!0,d=x}finally{try{if(!b&&c.return!=null&&(v=c.return(),Object(v)!==v))return}finally{if(g)throw d}}return A}}function _arrayWithHoles$1(a){if(Array.isArray(a))return a}function flattenSchema(){var a=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},s=arguments.length>1?arguments[1]:void 0,c=arguments.length>2?arguments[2]:void 0,u=arguments.length>3?arguments[3]:void 0,d=u||{},p=_cloneDeep(a)||{},v=s||"#";p.$id||(p.$id=v);var A=[];return isObjType(p)&&(sortProperties(Object.entries(p.properties)).forEach(function(b){var g=_slicedToArray$1(b,2),x=g[0],y=g[1],f=isListType(y)?x+"[]":x,m=v==="#"?f:v+"."+f;A.push(m),flattenSchema(y,m,v,d)}),p.properties={}),isListType(p)&&(sortProperties(Object.entries(p.items.properties)).forEach(function(b){var g=_slicedToArray$1(b,2),x=g[0],y=g[1],f=isListType(y)?x+"[]":x,m=v==="#"?f:v+"."+f;A.push(m),flattenSchema(y,m,v,d)}),p.items.properties={}),p.type&&(d[v]={parent:c,schema:p,children:A}),d}function _slicedToArray(a,s){return _arrayWithHoles(a)||_iterableToArrayLimit(a,s)||_unsupportedIterableToArray(a,s)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
 In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function _unsupportedIterableToArray(a,s){if(a){if(typeof a=="string")return _arrayLikeToArray(a,s);var c={}.toString.call(a).slice(8,-1);return c==="Object"&&a.constructor&&(c=a.constructor.name),c==="Map"||c==="Set"?Array.from(a):c==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,s):void 0}}function _arrayLikeToArray(a,s){(s==null||s>a.length)&&(s=a.length);for(var c=0,u=Array(s);c<s;c++)u[c]=a[c];return u}function _iterableToArrayLimit(a,s){var c=a==null?null:typeof Symbol<"u"&&a[Symbol.iterator]||a["@@iterator"];if(c!=null){var u,d,p,v,A=[],b=!0,g=!1;try{if(p=(c=c.call(a)).next,s!==0)for(;!(b=(u=p.call(c)).done)&&(A.push(u.value),A.length!==s);b=!0);}catch(x){g=!0,d=x}finally{try{if(!b&&c.return!=null&&(v=c.return(),Object(v)!==v))return}finally{if(g)throw d}}return A}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var updateSchemaByPath=function a(s,c,u){var d=getSchemaFullPath(s,u),p=_get(u,d,{}),v=isFunction$1(c)?c(p):c,A=Object.assign(Object.assign({},p),v);v.props&&(A.props=Object.assign(Object.assign({},p==null?void 0:p.props),v.props)),_set(u,d,A)},getFieldName=function a(s){if(s){if(typeof s=="boolean")return s;var c=[];return isArray$1(s)&&(c=s.map(function(u){return u.split(".").map(function(d){return isNaN(Number(d))?d:d*1})})),c=s.split(".").map(function(u){return isNaN(Number(u))?u:u*1}),c=c.map(function(u){return typeof u=="string"&&(u==null?void 0:u.indexOf("["))===0&&(u==null?void 0:u.indexOf("]"))===(u==null?void 0:u.length)-1?Number(u.substring(1,u.length-1)):u}),c}},useForm=function a(){var s=Form$1.useForm(),c=_slicedToArray(s,1),u=c[0],d=reactExports.useRef({}),p=reactExports.useRef(null),v=reactExports.useRef({}),A=reactExports.useRef({});u.getFieldError;var b=u.getFieldsError,g=u.getFieldInstance,x=u.setFieldsValue,y=u.setFields,f=u.scrollToField,m=u.isFieldsTouched,C=u.isFieldTouched,S=u.isFieldValidating,w=u.resetFields,_=u.validateFields,I=__rest$15(u,["getFieldError","getFieldsError","getFieldInstance","setFieldsValue","setFields","scrollToField","isFieldsTouched","isFieldTouched","isFieldValidating","resetFields","validateFields"]),$=I,P=function(T){var B=p.current.setState;B||setTimeout(function(){B({schema:v.current,flattenSchema:d.current})},0),B(T)},E=function(T){d.current=flattenSchema(T)||{},v.current=T,P({schema:T,flattenSchema:d.current})};return $.setSchema=function(R){var T=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1;if(isObject$2(R)){if(T){E(R);return}var B=cloneDeep(v.current);Object.keys(R||{}).forEach(function(M){updateSchemaByPath(M,R[M],B)}),E(B)}},$.setSchemaByPath=function(R,T){if(!(!_hasFuncProperty(T)&&_isMatch(T,$.getSchemaByPath(R)))){var B=cloneDeep(v.current);updateSchemaByPath(R,T,B),E(B)}},$.setValues=function(R){var T=parseBindToValues(R,d.current);x(T)},$.getValues=function(R,T,B){var M,k=cloneDeep(u.getFieldsValue(getFieldName(R),T)),O=((M=p.current)===null||M===void 0?void 0:M.getState())||{},H=O.removeHiddenData;return H&&(k=filterValuesHidden(k,d.current)),B||(k=filterValuesUndefined(k)),parseValuesToBind(k,d.current)},$.getValueByPath=function(R){var T=getFieldName(R);return u.getFieldValue(T)},$.setValueByPath=function(R,T){if(!u.setFieldValue){var B=u.getFieldsValue();_set(B,R,T),$.setValues(B);return}var M=getFieldName(R);u.setFieldValue(M,T);try{JSON.stringify(u.getFieldValue(M))!==JSON.stringify(T)&&u.setFieldValue(M,T)}catch{}},$.getSchemaByPath=function(R){typeof R!="string"&&console.warn("请输入正确的路径");var T=getSchemaFullPath(R,v.current);return _get(v.current,T)},$.getSchema=function(){return v.current},$.setErrorFields=function(R){var T=transformFieldsData(R,getFieldName);T&&y(T)},$.removeErrorField=function(R){y([{name:getFieldName(R),errors:[]}])},$.getFieldError=function(R){var T=getFieldName(R);return u.getFieldError(T)},$.getFieldsError=function(R){var T=getFieldName(R);return b(T)},$.getFieldInstance=function(R){var T=getFieldName(R);return g(T)},$.getHiddenValues=function(){var R=$.getValues(),T=$.getValues(!0),B={},M=function(O,H,j){Object.keys(O).forEach(function(q){var L=O[q],F=j?"".concat(j,".").concat(q):q;if(!H.hasOwnProperty(q)){_set(B,F,L);return}isObject$2(L)&&M(L,H[q],F),isArray$1(L)&&L.map(function(U,N){M(U,_get(H,"".concat(q,"[").concat(N,"]"),[]),"".concat(F,"[").concat(N,"]"))})})};return M(T,R,null),B},$.setFields=function(R){var T=transformFieldsData(R,getFieldName);T&&y(T)},$.__initStore=function(R){p.current=R},$.scrollToPath=function(R){for(var T=getFieldName(R),B=arguments.length,M=new Array(B>1?B-1:0),k=1;k<B;k++)M[k-1]=arguments[k];f.apply(void 0,[T].concat(M))},$.isFieldsTouched=function(R,T){var B=(R||[]).map(function(M){return getFieldName(M)});return m(B,T)},$.isFieldTouched=function(R){var T=getFieldName(R);return C(T)},$.isFieldValidating=function(R){var T=getFieldName(R);return S(T)},$.resetFields=function(R){var T=(R||[]).map(function(B){return getFieldName(B)});T.length>0?w(T):w()},$.validateFields=function(R,T){var B=(R||[]).map(function(M){return getFieldName(M)});return B.length>0?_(B,T):_()},$.getFlattenSchema=function(R){var T;return R?(T=d.current)===null||T===void 0?void 0:T[R]:d.current},$.onItemChange=$.setValueByPath,$.setFieldRef=function(R,T){R&&(A.current[R]=T)},$.getFieldRef=function(R){return A.current[R]},$};const FormRenderComponent=withProvider(FormCore,defaultWidgets),AlignWidget=a=>{const{activeElements:s,changeSchemas:c,schemas:u,pageSize:d,schema:p}=a,v=g=>{const x=s.map(E=>E.id),y=u.filter(E=>x.includes(E.id)),f=["left","center","right"].includes(g),m=f?"x":"y",C=f?"width":"height",S=y.length===1,w=d&&typeof d=="object"?C==="width"?d.width:d.height:0,_=S?0:Math.min(...y.map(E=>{const R=E.position&&typeof E.position=="object"?E.position:{x:0,y:0};return m==="x"?R.x:R.y})),I=S?w:Math.max(...y.map(E=>{const R=E.position&&typeof E.position=="object"?E.position:{x:0,y:0},T=m==="x"?R.x:R.y,B=E,M=C==="width"?B.width||0:B.height||0;return T+M}));let $=_,P=E=>0;["center","middle"].includes(g)?($=(_+I)/2,P=E=>E/2):["right","bottom"].includes(g)&&($=I,P=E=>E),c(y.map(E=>{const R=E,T=C==="width"?R.width||0:R.height||0;return{key:`position.${m}`,value:round$1($-P(T),2),schemaId:R.id}}))},A=g=>{const x=s.map(T=>T.id),y=u.filter(T=>x.includes(T.id)),f=g==="vertical",m=f?"y":"x",C=f?"height":"width",S=Math.min(...y.map(T=>{const B=T.position&&typeof T.position=="object"?T.position:{x:0,y:0};return m==="x"?B.x:B.y})),w=Math.max(...y.map(T=>{const B=T.position&&typeof T.position=="object"?T.position:{x:0,y:0},M=m==="x"?B.x:B.y,k=T,O=C==="width"?k.width||0:k.height||0;return M+O}));if(y.length<3)return;const _=S,I=w-S,$=y.reduce((T,B)=>{const M=B,k=C==="width"?M.width||0:M.height||0;return T+k},0),E=(I-$)/(y.length-1);let R=0;c(y.map((T,B)=>{const M=B===0?0:(()=>{const H=y[B-1];return C==="width"?H.width||0:H.height||0})();R+=B===0?0:M+E;const k=round$1(_+R,2),O=T;return{key:`position.${m}`,value:k,schemaId:O.id}}))},b=[{id:"left",icon:jsxRuntimeExports.jsx(AlignStartVertical,{size:15}),onClick:()=>v("left")},{id:"center",icon:jsxRuntimeExports.jsx(AlignCenterVertical,{size:15}),onClick:()=>v("center")},{id:"right",icon:jsxRuntimeExports.jsx(AlignEndVertical,{size:15}),onClick:()=>v("right")},{id:"top",icon:jsxRuntimeExports.jsx(AlignStartHorizontal,{size:15}),onClick:()=>v("top")},{id:"middle",icon:jsxRuntimeExports.jsx(AlignCenterHorizontal,{size:15}),onClick:()=>v("middle")},{id:"bottom",icon:jsxRuntimeExports.jsx(AlignEndHorizontal,{size:15}),onClick:()=>v("bottom")},{id:"vertical",icon:jsxRuntimeExports.jsx(AlignVerticalSpaceAround,{size:15}),onClick:()=>A("vertical")},{id:"horizontal",icon:jsxRuntimeExports.jsx(AlignHorizontalSpaceAround,{size:15}),onClick:()=>A("horizontal")}];return jsxRuntimeExports.jsx(Form$1.Item,{label:p.title,children:jsxRuntimeExports.jsx(Space.Compact,{children:b.map(g=>jsxRuntimeExports.jsx(Button$1,{style:{padding:7},disabled:s.length<=2&&["vertical","horizontal"].includes(g.id),...g},g.id))})})},WidgetRenderer=a=>{const{widget:s,...c}=a,u=reactExports.useRef(null);return reactExports.useEffect(()=>(u.current&&(u.current.innerHTML="",s({...c,rootElement:u.current})),()=>{u.current&&(u.current.innerHTML="")}),[a.activeSchema]),jsxRuntimeExports.jsx("div",{ref:u})},ButtonGroupWidget=a=>{const{activeElements:s,changeSchemas:c,schemas:u,schema:d}=a,{token:p}=theme.useToken(),v=x=>{const y=x.key,f=x.type,m=s.map(S=>S.id),C=u.filter(S=>m.includes(S.id));c(C.map(S=>{const w=!!(S[y]??!1),_=f==="boolean"?!w:x.value;return{key:y,value:_,schemaId:S.id}}))},A=x=>{const y=x.key,f=x.type;let m=!1;const C=s.map(w=>w.id);return u.filter(w=>C.includes(w.id)).forEach(w=>{const _=w;m=f==="boolean"?!!(_[y]??!1):_[y]===x.value}),m},b=(x,y)=>y?x.replace(/="currentColor"/g,`="${y}"`):x,g=x=>{const y=`data:image/svg+xml;utf8,${encodeURIComponent(b(x,p.colorText))}`;return jsxRuntimeExports.jsx("img",{width:17,height:17,src:y,alt:""})};return jsxRuntimeExports.jsx(Form$1.Item,{children:jsxRuntimeExports.jsx(Space.Compact,{children:d.buttons.map((x,y)=>{const f=A(x);return jsxRuntimeExports.jsx(Button$1,{type:f?"primary":void 0,ghost:f,onClick:()=>v(x),style:{padding:7,zIndex:f?2:0},icon:g(x.icon)},y)})})})},{Text:Text$2}=Typography,DetailView=a=>{var B,M;const{token:s}=theme.useToken(),{size:c,schemasList:u,changeSchemas:d,deselectSchema:p,activeSchema:v}=a,A=useForm(),b=reactExports.useContext(I18nContext),g=reactExports.useContext(PluginsRegistry),x=reactExports.useContext(OptionsContext),y=k=>typeof b=="function"?b(k):k,[f,m]=reactExports.useState({});reactExports.useEffect(()=>{const k={AlignWidget:O=>jsxRuntimeExports.jsx(AlignWidget,{...O,...a,options:x}),Divider:()=>jsxRuntimeExports.jsx(Divider,{style:{marginTop:s.marginXS,marginBottom:s.marginXS}}),ButtonGroup:O=>jsxRuntimeExports.jsx(ButtonGroupWidget,{...O,...a,options:x})};for(const O of Object.values(g)){const H=(O==null?void 0:O.propPanel.widgets)||{};Object.entries(H).forEach(([j,q])=>{k[j]=L=>jsxRuntimeExports.jsx(WidgetRenderer,{...L,...a,options:x,theme:s,i18n:y,widget:q})})}m(k)},[v,g,JSON.stringify(x)]),reactExports.useEffect(()=>{const k={...v},O=typeof k.readOnly=="boolean"?k.readOnly:!1;k.editable=!O,A.setValues(k)},[v,A]),reactExports.useEffect(()=>A.resetFields(),[v.id]),reactExports.useEffect(()=>{C.current=k=>{for(const O of u)for(const H of Object.values(O))if(H.name===k&&H.id!==v.id)return!1;return!0}},[u,v]);const C=reactExports.useRef(k=>!0),S=(k,O)=>C.current(O),w=debounce$1(function(...k){const O=k[0],H=(q,L)=>typeof q=="object"&&q!==null?JSON.stringify(q)!==JSON.stringify(L):q!==L;let j=[];for(const q in O){if(["id","content"].includes(q))continue;let L=O[q];if(H(L,v[q])){if(L===null&&["rotate","opacity"].includes(q)&&(L=void 0),q==="editable"){const F=!L;j.push({key:"readOnly",value:F,schemaId:v.id}),F&&j.push({key:"required",value:!1,schemaId:v.id});continue}j.push({key:q,value:L,schemaId:v.id})}}j.length&&A.validateFields().then(()=>d(j)).catch(q=>{q.errorFields.length&&(j=j.filter(L=>!q.errorFields.find(F=>F.name.includes(L.key)))),j.length&&d(j)})},100),_=Object.values(g).find(k=>{if(!k||typeof k!="object"||!k.propPanel||typeof k.propPanel!="object"||!k.propPanel.defaultSchema||typeof k.propPanel.defaultSchema!="object")return!1;const O=k.propPanel.defaultSchema;return"type"in O&&typeof O.type=="string"&&O.type===v.type}),I=(B=_==null?void 0:_.propPanel)==null?void 0:B.schema;I||console.error(`[@pdfme/ui] No propPanel.schema for ${v.type}.
 Check this document: https://pdfme.com/docs/custom-schemas`);const $=[];Object.entries(g).forEach(([k,O])=>{if(!O||typeof O!="object"){$.push({label:k,value:void 0});return}if(!("propPanel"in O)||!O.propPanel||typeof O.propPanel!="object"){$.push({label:k,value:void 0});return}if(!("defaultSchema"in O.propPanel)||!O.propPanel.defaultSchema||typeof O.propPanel.defaultSchema!="object"){$.push({label:k,value:void 0});return}const H=O.propPanel.defaultSchema;let j;"type"in H&&typeof H.type=="string"&&(j=H.type),$.push({label:k,value:j})});const P={},E=(M=_==null?void 0:_.propPanel)!=null&&M.defaultSchema?(()=>{if(typeof _.propPanel.defaultSchema!="object"||_.propPanel.defaultSchema===null)return P;const k={};for(const O in _.propPanel.defaultSchema)Object.prototype.hasOwnProperty.call(_.propPanel.defaultSchema,O)&&(k[O]=_.propPanel.defaultSchema[O]);return k})():P,R={type:"object",column:2,properties:{type:{title:y("type"),type:"string",widget:"select",props:{options:$},required:!0,span:12},name:{title:y("fieldName"),type:"string",required:!0,span:12,rules:[{validator:S,message:y("validation.uniqueName")}],props:{autoComplete:"off"}},editable:{title:y("editable"),type:"boolean",span:8,hidden:typeof E.readOnly<"u"},required:{title:y("required"),type:"boolean",span:16,hidden:"{{!formData.editable}}"},"-":{type:"void",widget:"Divider"},align:{title:y("align"),type:"void",widget:"AlignWidget"},position:{type:"object",widget:"card",properties:{x:{title:"X",type:"number",widget:"inputNumber",required:!0,span:8,min:0},y:{title:"Y",type:"number",widget:"inputNumber",required:!0,span:8,min:0}}},width:{title:y("width"),type:"number",widget:"inputNumber",required:!0,span:6,props:{min:0}},height:{title:y("height"),type:"number",widget:"inputNumber",required:!0,span:6,props:{min:0}},rotate:{title:y("rotate"),type:"number",widget:"inputNumber",disabled:typeof E.rotate>"u",max:360,props:{min:0},span:6},opacity:{title:y("opacity"),type:"number",widget:"inputNumber",disabled:typeof E.opacity>"u",props:{step:.1,min:0,max:1},span:6}}},T={...R.properties};if(typeof I=="function"){const{size:k,schemas:O,pageSize:H,changeSchemas:j,activeElements:q,deselectSchema:L,activeSchema:F}=a,N=I({...{size:k,schemas:O,pageSize:H,changeSchemas:j,activeElements:q,deselectSchema:L,activeSchema:F},options:x,theme:s,i18n:y}),D=N&&typeof N=="object"?N:{},W=Object.keys(D).length===0?{}:{"--":{type:"void",widget:"Divider"}};R.properties={...T,...W,...D}}else{const k=I&&typeof I=="object"?I:{},O=Object.keys(k).length===0?{}:{"--":{type:"void",widget:"Divider"}};R.properties={...T,...O,...k}}return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{style:{height:40,display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{style:{position:"absolute",zIndex:100,display:"flex",alignItems:"center",justifyContent:"center"},onClick:p,icon:jsxRuntimeExports.jsx(Menu,{strokeWidth:1.5,size:20})}),jsxRuntimeExports.jsx(Text$2,{strong:!0,style:{textAlign:"center",width:"100%"},children:y("editField")})]}),jsxRuntimeExports.jsx(Divider,{style:{marginTop:s.marginXS,marginBottom:s.marginXS}}),jsxRuntimeExports.jsx("div",{style:{height:getSidebarContentHeight(c.height),overflowY:"auto",overflowX:"hidden"},children:jsxRuntimeExports.jsx(FormRenderComponent,{form:A,schema:R,widgets:f,watch:{"#":w},locale:"en-US"})})]})},propsAreUnchanged=(a,s)=>JSON.stringify(a.activeSchema)==JSON.stringify(s.activeSchema),DetailView$1=React.memo(DetailView,propsAreUnchanged),Sidebar=a=>{const{sidebarOpen:s,setSidebarOpen:c,activeElements:u,schemas:d}=a,{token:p}=theme.useToken(),v=()=>d.filter(g=>u.map(x=>x.id).includes(g.id)),A=()=>{const g=v();return g[g.length-1]},b={strokeWidth:1.5,size:20};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",right:0,zIndex:1,height:"100%",width:s?RIGHT_SIDEBAR_WIDTH:0},children:jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Button$1,{style:{position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",top:"1rem",right:"1rem",zIndex:100},icon:s?jsxRuntimeExports.jsx(ArrowRight,{...b}):jsxRuntimeExports.jsx(ArrowLeft,{...b}),onClick:()=>c(!s)}),jsxRuntimeExports.jsx("div",{style:{width:RIGHT_SIDEBAR_WIDTH,height:"100%",display:s?"block":"none",top:0,right:0,position:"absolute",padding:"0.7rem 1rem",overflowY:"auto",fontFamily:"'Open Sans', sans-serif",boxSizing:"border-box",background:p.colorBgLayout},children:jsxRuntimeExports.jsx("div",{children:v().length===0?jsxRuntimeExports.jsx(ListView,{...a}):jsxRuntimeExports.jsx(DetailView$1,{...a,activeSchema:A()})})})]})})},useRerenderDependencies=a=>{const{plugin:s,value:c,mode:u,scale:d,schema:p,options:v}=a,A=cloneDeep$1(v);A.font&&Object.values(A.font).forEach(g=>{g.data="..."});const b=JSON.stringify(A);return reactExports.useMemo(()=>s!=null&&s.uninterruptedEditMode&&u==="designer"?[u]:[c,u,d,JSON.stringify(p),b],[s==null?void 0:s.uninterruptedEditMode,c,u,d,p,b,s])},Wrapper=({children:a,outline:s,onChangeHoveringSchemaId:c,schema:u,selectable:d=!0})=>jsxRuntimeExports.jsxs("div",{title:u.name,onMouseEnter:()=>c&&c(u.id),onMouseLeave:()=>c&&c(null),className:d?SELECTABLE_CLASSNAME:"",id:u.id,style:{position:"absolute",cursor:u.readOnly?"initial":"pointer",height:u.height*ZOOM,width:u.width*ZOOM,top:u.position.y*ZOOM,left:u.position.x*ZOOM,transform:`rotate(${u.rotate??0}deg)`,opacity:u.opacity??1,outline:s},children:[u.required&&jsxRuntimeExports.jsx("span",{style:{color:"red",position:"absolute",top:-12,left:-12,fontSize:18,fontWeight:700},children:"*"}),a]}),Renderer=a=>{const{schema:s,basePdf:c,value:u,mode:d,onChange:p,stopEditing:v,tabIndex:A,placeholder:b,scale:g}=a,x=reactExports.useContext(PluginsRegistry),y=reactExports.useContext(OptionsContext),f=reactExports.useContext(I18nContext),{token:m}=theme.useToken(),C=reactExports.useRef(null),S=reactExports.useContext(CacheContext),w=typeof s.type=="string"?s.type:"",_=Object.values(x||{}).find($=>{var E;const P=(E=$==null?void 0:$.propPanel)==null?void 0:E.defaultSchema;return(P==null?void 0:P.type)===w}),I=useRerenderDependencies({plugin:_||{},value:u,mode:d,scale:g,schema:s,options:y});return reactExports.useEffect(()=>{if(!(_!=null&&_.ui)||!C.current||!s.type)return;C.current.innerHTML="";const $=_.ui;return $({value:u,schema:s,basePdf:c,rootElement:C.current,mode:d,onChange:p,stopEditing:v,tabIndex:A,placeholder:b,options:y,theme:m,i18n:f,_cache:S}),()=>{C.current&&(C.current.innerHTML="")}},[_==null?void 0:_.ui,s.type,I]),!_||!_.ui?(console.error(`[@pdfme/ui] Renderer for type ${s.type} not found. 
-Check this document: https://pdfme.com/docs/custom-schemas`),jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{})):jsxRuntimeExports.jsx(Wrapper,{...a,children:jsxRuntimeExports.jsx("div",{style:{height:"100%",width:"100%"},ref:C})})},Draggable$1=a=>{const{scale:s,basePdf:c,plugin:u}=a,{token:d}=theme.useToken(),p=u.propPanel.defaultSchema,v=useDraggable({id:p.type,data:p}),{listeners:A,setNodeRef:b,attributes:g,transform:x,isDragging:y}=v,f={transform:CSS$1.Translate.toString(x)};return jsxRuntimeExports.jsxs("div",{ref:b,style:f,...A,...g,children:[y&&jsxRuntimeExports.jsx("div",{style:{transform:`scale(${s})`},children:jsxRuntimeExports.jsx(Renderer,{schema:{...p,id:p.type},basePdf:c,value:p.content||"",onChangeHoveringSchemaId:()=>{},mode:"viewer",outline:`1px solid ${d.colorPrimary}`,scale:s})}),jsxRuntimeExports.jsx("div",{style:{visibility:y?"hidden":"visible"},children:a.children})]})},LeftSidebar=({height:a,scale:s,basePdf:c})=>{const{token:u}=theme.useToken(),d=reactExports.useContext(PluginsRegistry),[p,v]=reactExports.useState(!1);return reactExports.useEffect(()=>{const A=()=>{p&&v(!1)};return document.addEventListener("mouseup",A),()=>{document.removeEventListener("mouseup",A)}},[p]),jsxRuntimeExports.jsx("div",{style:{left:0,right:0,position:"absolute",zIndex:1,height:a,width:LEFT_SIDEBAR_WIDTH,background:u.colorBgLayout,textAlign:"center",overflow:p?"visible":"auto"},children:Object.entries(d).map(([A,b])=>b!=null&&b.propPanel.defaultSchema?jsxRuntimeExports.jsx(Draggable$1,{scale:s,basePdf:c,plugin:b,children:jsxRuntimeExports.jsx(Button$1,{onMouseDown:()=>v(!0),style:{width:35,height:35,marginTop:"0.25rem",padding:"0.25rem"},children:jsxRuntimeExports.jsx(PluginIcon,{plugin:b,label:A})})},A):null)})},Paper=a=>{const{paperRefs:s,scale:c,size:u,schemasList:d,pageSizes:p,backgrounds:v,renderPaper:A,renderSchema:b,hasRulers:g}=a,x=reactExports.useContext(FontContext),y=g?RULER_HEIGHT:0;return p.length!==v.length||p.length!==d.length?null:jsxRuntimeExports.jsx("div",{style:{transform:`scale(${c})`,transformOrigin:"top left",height:c,width:c},children:v.map((f,m)=>{const C=p[m],S={width:C.width*ZOOM,height:C.height*ZOOM},w=S.width*c+y<u.width?`${(u.width/c-S.width)/2}px`:`${y}px`;let _=m>0?(y+PAGE_GAP)*(m+1):y;return g||(_+=PAGE_GAP*2),jsxRuntimeExports.jsxs("div",{ref:I=>{I&&(s.current[m]=I)},onMouseDown:I=>{I.currentTarget===I.target&&document&&document.hasFocus()&&document.activeElement instanceof HTMLElement&&document.activeElement.blur()},style:{fontFamily:`'${getFallbackFontName(x)}'`,top:`${_}px`,left:w,position:"relative",backgroundImage:`url(${f})`,backgroundSize:`${S.width}px ${S.height}px`,...S},children:[A({paperSize:S,index:m}),d[m].map((I,$)=>jsxRuntimeExports.jsx("div",{children:b({schema:I,index:m===0?$:$+d[m-1].length})},I.id))]},String(m)+JSON.stringify(S))})})};var FUNCTION="function",OBJECT="object",STRING="string",NUMBER="number",UNDEFINED="undefined",IS_WINDOW=typeof window!==UNDEFINED,doc=typeof document!==UNDEFINED&&document,OPEN_CLOSED_CHARACTERS=[{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"},{open:'\\"',close:'\\"'},{open:"\\'",close:"\\'"}],TINY_NUM$1=1e-7,DEFAULT_UNIT_PRESETS={cm:function(a){return a*96/2.54},mm:function(a){return a*96/254},in:function(a){return a*96},pt:function(a){return a*96/72},pc:function(a){return a*96/6},"%":function(a,s){return a*s/100},vw:function(a,s){return s===void 0&&(s=window.innerWidth),a/100*s},vh:function(a,s){return s===void 0&&(s=window.innerHeight),a/100*s},vmax:function(a,s){return s===void 0&&(s=Math.max(window.innerWidth,window.innerHeight)),a/100*s},vmin:function(a,s){return s===void 0&&(s=Math.min(window.innerWidth,window.innerHeight)),a/100*s}};/*! *****************************************************************************
+Check this document: https://pdfme.com/docs/custom-schemas`),jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{})):jsxRuntimeExports.jsx(Wrapper,{...a,children:jsxRuntimeExports.jsx("div",{style:{height:"100%",width:"100%"},ref:C})})},Draggable$1=a=>{const{scale:s,basePdf:c,plugin:u}=a,{token:d}=theme.useToken(),p=u.propPanel.defaultSchema,v=useDraggable({id:p.type,data:p}),{listeners:A,setNodeRef:b,attributes:g,transform:x,isDragging:y}=v,f={transform:CSS$1.Translate.toString(x)},m=React.useMemo(()=>jsxRuntimeExports.jsx("div",{style:{transform:`scale(${s})`},children:jsxRuntimeExports.jsx(Renderer,{schema:{...p,id:p.type},basePdf:c,value:p.content||"",onChangeHoveringSchemaId:()=>{},mode:"viewer",outline:`1px solid ${d.colorPrimary}`,scale:s})}),[p,c,s,d.colorPrimary]);return jsxRuntimeExports.jsxs("div",{ref:b,style:f,...A,...g,children:[y&&m,jsxRuntimeExports.jsx("div",{style:{visibility:y?"hidden":"visible"},children:a.children})]})},LeftSidebar=({height:a,scale:s,basePdf:c})=>{const{token:u}=theme.useToken(),d=reactExports.useContext(PluginsRegistry),[p,v]=reactExports.useState(!1);return reactExports.useEffect(()=>{const A=()=>{p&&v(!1)};return document.addEventListener("mouseup",A),()=>{document.removeEventListener("mouseup",A)}},[p]),jsxRuntimeExports.jsx("div",{style:{left:0,right:0,position:"absolute",zIndex:1,height:a,width:LEFT_SIDEBAR_WIDTH,background:u.colorBgLayout,textAlign:"center",overflow:p?"visible":"auto"},children:Object.entries(d).map(([A,b])=>b!=null&&b.propPanel.defaultSchema?jsxRuntimeExports.jsx(Draggable$1,{scale:s,basePdf:c,plugin:b,children:jsxRuntimeExports.jsx(Button$1,{onMouseDown:()=>v(!0),style:{width:35,height:35,marginTop:"0.25rem",padding:"0.25rem"},children:jsxRuntimeExports.jsx(PluginIcon,{plugin:b,label:A})})},A):null)})},Paper=a=>{const{paperRefs:s,scale:c,size:u,schemasList:d,pageSizes:p,backgrounds:v,renderPaper:A,renderSchema:b,hasRulers:g}=a,x=reactExports.useContext(FontContext),y=g?RULER_HEIGHT:0;return p.length!==v.length||p.length!==d.length?null:jsxRuntimeExports.jsx("div",{style:{transform:`scale(${c})`,transformOrigin:"top left",height:c,width:c},children:v.map((f,m)=>{const C=p[m],S={width:C.width*ZOOM,height:C.height*ZOOM},w=S.width*c+y<u.width?`${(u.width/c-S.width)/2}px`:`${y}px`;let _=m>0?(y+PAGE_GAP)*(m+1):y;return g||(_+=PAGE_GAP*2),jsxRuntimeExports.jsxs("div",{ref:I=>{I&&(s.current[m]=I)},onMouseDown:I=>{I.currentTarget===I.target&&document&&document.hasFocus()&&document.activeElement instanceof HTMLElement&&document.activeElement.blur()},style:{fontFamily:`'${getFallbackFontName(x)}'`,top:`${_}px`,left:w,position:"relative",backgroundImage:`url(${f})`,backgroundSize:`${S.width}px ${S.height}px`,...S},children:[A({paperSize:S,index:m}),d[m].map((I,$)=>jsxRuntimeExports.jsx("div",{children:b({schema:I,index:m===0?$:$+d[m-1].length})},I.id))]},String(m)+JSON.stringify(S))})})};var FUNCTION="function",OBJECT="object",STRING="string",NUMBER="number",UNDEFINED="undefined",IS_WINDOW=typeof window!==UNDEFINED,doc=typeof document!==UNDEFINED&&document,OPEN_CLOSED_CHARACTERS=[{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"},{open:'\\"',close:'\\"'},{open:"\\'",close:"\\'"}],TINY_NUM$1=1e-7,DEFAULT_UNIT_PRESETS={cm:function(a){return a*96/2.54},mm:function(a){return a*96/254},in:function(a){return a*96},pt:function(a){return a*96/72},pc:function(a){return a*96/6},"%":function(a,s){return a*s/100},vw:function(a,s){return s===void 0&&(s=window.innerWidth),a/100*s},vh:function(a,s){return s===void 0&&(s=window.innerHeight),a/100*s},vmax:function(a,s){return s===void 0&&(s=Math.max(window.innerWidth,window.innerHeight)),a/100*s},vmin:function(a,s){return s===void 0&&(s=Math.min(window.innerWidth,window.innerHeight)),a/100*s}};/*! *****************************************************************************
 	Copyright (c) Microsoft Corporation.
 
 	Permission to use, copy, modify, and/or distribute this software for any

package/package.json

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

package/src/components/Designer/LeftSidebar.tsx

@@ -21,23 +21,25 @@ const Draggable = (props: {
   const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
   const style = { transform: CSS.Translate.toString(transform) };
 
+  const renderedSchema = React.useMemo(() => (
+    <div style={{ transform: `scale(${scale})` }}>
+      <Renderer
+        schema={{ ...defaultSchema, id: defaultSchema.type }}
+        basePdf={basePdf}
+        value={defaultSchema.content || ''}
+        onChangeHoveringSchemaId={() => {
+          void 0;
+        }}
+        mode={'viewer'}
+        outline={`1px solid ${token.colorPrimary}`}
+        scale={scale}
+      />
+    </div>
+  ), [defaultSchema, basePdf, scale, token.colorPrimary]);
+
   return (
     <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {isDragging && (
-        <div style={{ transform: `scale(${scale})` }}>
-          <Renderer
-            schema={{ ...defaultSchema, id: defaultSchema.type }}
-            basePdf={basePdf}
-            value={defaultSchema.content || ''}
-            onChangeHoveringSchemaId={() => {
-              void 0;
-            }}
-            mode={'viewer'}
-            outline={`1px solid ${token.colorPrimary}`}
-            scale={scale}
-          />
-        </div>
-      )}
+      {isDragging && renderedSchema}
       <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>{props.children}</div>
     </div>
   );