form-builder-pro 1.0.13 → 1.0.14

package/dist/index.d.mts

@@ -186,6 +186,11 @@ declare class FormBuilder {
     private container;
     private unsubscribe;
     private options;
+    private requestedMasterTypesCache;
+    private isTriggeringApiCalls;
+    private previewRenderer;
+    private lastPreviewSchema;
+    private wasInPreviewMode;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.d.ts

@@ -186,6 +186,11 @@ declare class FormBuilder {
     private container;
     private unsubscribe;
     private options;
+    private requestedMasterTypesCache;
+    private isTriggeringApiCalls;
+    private previewRenderer;
+    private lastPreviewSchema;
+    private wasInPreviewMode;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.js

@@ -7566,10 +7566,20 @@ var SectionList = class {
 
 // src/builder/FormBuilder.ts
 var FormBuilder = class {
+  // Track previous preview state to detect mode changes
   constructor(container, options = {}) {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
+    __publicField(this, "requestedMasterTypesCache", /* @__PURE__ */ new Set());
+    // Cache to track requested master types
+    __publicField(this, "isTriggeringApiCalls", false);
+    // Flag to prevent concurrent API triggers
+    __publicField(this, "previewRenderer", null);
+    // Store FormRenderer instance to preserve selections
+    __publicField(this, "lastPreviewSchema", null);
+    // Track last preview schema to detect changes
+    __publicField(this, "wasInPreviewMode", false);
     __publicField(this, "activeTab", "fields");
     if (!container) {
       throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
@@ -7650,6 +7660,9 @@ var FormBuilder = class {
   }
   updateDropdownOptionsMap(dropdownOptionsMap) {
     formStore.getState().setDropdownOptionsMap(dropdownOptionsMap);
+    Object.keys(dropdownOptionsMap).forEach((groupEnumName) => {
+      if (dropdownOptionsMap[groupEnumName] && dropdownOptionsMap[groupEnumName].length > 0) ;
+    });
     this.render();
   }
   updateMasterTypeGroups(masterTypeGroups) {
@@ -7745,10 +7758,16 @@ var FormBuilder = class {
                     (mt) => mt.active === true && mt.enumName === field.masterTypeName
                   );
                   if (masterType && masterType.enumName) {
-                    fieldsNeedingApiCall.push({
-                      fieldId: field.id,
-                      groupEnumName: masterType.enumName
-                    });
+                    const hasOptionsInMap = dropdownOptionsMap && dropdownOptionsMap[masterType.enumName] && dropdownOptionsMap[masterType.enumName].length > 0;
+                    const hasOptionsInIndexes = masterType.indexes && masterType.indexes.length > 0;
+                    const alreadyRequested = this.requestedMasterTypesCache.has(masterType.enumName);
+                    if (!hasOptionsInMap && !hasOptionsInIndexes && !alreadyRequested) {
+                      this.requestedMasterTypesCache.add(masterType.enumName);
+                      fieldsNeedingApiCall.push({
+                        fieldId: field.id,
+                        groupEnumName: masterType.enumName
+                      });
+                    }
                   }
                 } else if (field.groupName) {
                   masterType = masterTypes.find(
@@ -7773,7 +7792,8 @@ var FormBuilder = class {
             })
           }))
         };
-        if (fieldsNeedingApiCall.length > 0 && this.options.onGroupSelectionChange) {
+        if (fieldsNeedingApiCall.length > 0 && this.options.onGroupSelectionChange && !this.isTriggeringApiCalls) {
+          this.isTriggeringApiCalls = true;
           setTimeout(() => {
             const uniqueApiCalls = /* @__PURE__ */ new Map();
             fieldsNeedingApiCall.forEach(({ fieldId, groupEnumName }) => {
@@ -7791,21 +7811,59 @@ var FormBuilder = class {
                 groupEnumName
               });
             });
+            setTimeout(() => {
+              this.isTriggeringApiCalls = false;
+            }, 100);
           }, 0);
         }
         const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
         const inner = createElement("div", { className: "w-full max-w-3xl" });
-        new FormRenderer(inner, previewSchema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+        const structureChanged = !this.lastPreviewSchema || this.lastPreviewSchema.id !== previewSchema.id || this.lastPreviewSchema.sections.length !== previewSchema.sections.length || JSON.stringify(this.lastPreviewSchema.sections.map((s) => ({ id: s.id, fields: s.fields.map((f) => ({ id: f.id, type: f.type })) }))) !== JSON.stringify(previewSchema.sections.map((s) => ({ id: s.id, fields: s.fields.map((f) => ({ id: f.id, type: f.type })) })));
+        if (!this.previewRenderer || structureChanged) {
+          if (this.previewRenderer) {
+            inner.innerHTML = "";
+          }
+          this.previewRenderer = new FormRenderer(inner, previewSchema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+          this.lastPreviewSchema = previewSchema;
+        } else {
+          if (this.lastPreviewSchema) {
+            const optionsChanged = JSON.stringify(this.lastPreviewSchema.sections.flatMap((s) => s.fields.map((f) => f.options))) !== JSON.stringify(previewSchema.sections.flatMap((s) => s.fields.map((f) => f.options)));
+            if (optionsChanged && this.previewRenderer) {
+              this.previewRenderer.setSchema(previewSchema);
+              this.lastPreviewSchema = previewSchema;
+            }
+          }
+        }
         previewContainer.appendChild(inner);
         main.appendChild(previewContainer);
       } else {
         const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
         const inner = createElement("div", { className: "w-full max-w-3xl" });
-        new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+        const structureChanged = !this.lastPreviewSchema || this.lastPreviewSchema.id !== state.schema.id || this.lastPreviewSchema.sections.length !== state.schema.sections.length || JSON.stringify(this.lastPreviewSchema.sections.map((s) => ({ id: s.id, fields: s.fields.map((f) => ({ id: f.id, type: f.type })) }))) !== JSON.stringify(state.schema.sections.map((s) => ({ id: s.id, fields: s.fields.map((f) => ({ id: f.id, type: f.type })) })));
+        if (!this.previewRenderer || structureChanged) {
+          if (this.previewRenderer) {
+            inner.innerHTML = "";
+          }
+          this.previewRenderer = new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+          this.lastPreviewSchema = state.schema;
+        } else {
+          if (this.lastPreviewSchema) {
+            const optionsChanged = JSON.stringify(this.lastPreviewSchema.sections.flatMap((s) => s.fields.map((f) => f.options))) !== JSON.stringify(state.schema.sections.flatMap((s) => s.fields.map((f) => f.options)));
+            if (optionsChanged && this.previewRenderer) {
+              this.previewRenderer.setSchema(state.schema);
+              this.lastPreviewSchema = state.schema;
+            }
+          }
+        }
         previewContainer.appendChild(inner);
         main.appendChild(previewContainer);
       }
     } else {
+      if (this.wasInPreviewMode) {
+        this.previewRenderer = null;
+        this.lastPreviewSchema = null;
+      }
+      this.wasInPreviewMode = false;
       const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
       toolboxWrapper.appendChild(this.renderToolbox());
       main.appendChild(toolboxWrapper);