form-builder-pro 1.0.13 → 1.0.15

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) {
@@ -7706,106 +7719,145 @@ var FormBuilder = class {
     wrapper.appendChild(this.renderToolbar(state));
     const main = createElement("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden" });
     if (state.isPreviewMode) {
-      const masterTypes = state.masterTypes;
+      const masterTypes = state.masterTypes || [];
       const dropdownOptionsMap = state.dropdownOptionsMap;
-      if (masterTypes && masterTypes.length > 0 && state.schema.sections) {
-        const convertIndexesToOptions = (indexes) => {
-          if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
-            return [];
-          }
-          return indexes.map((item, index2) => {
-            if (typeof item === "string") {
-              return { label: item, value: item };
-            }
-            if (typeof item === "object" && item !== null) {
-              const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
-              const value = item.value || item.id || item.name || String(index2);
-              return { label, value };
+      if (state.schema.sections) {
+        let previewSchema = state.schema;
+        if (masterTypes && masterTypes.length > 0) {
+          const convertIndexesToOptions = (indexes) => {
+            if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
+              return [];
             }
-            return { label: String(item), value: String(item) };
-          });
-        };
-        const areDefaultOptions = (options) => {
-          if (!options || options.length === 0)
-            return true;
-          return options.every(
-            (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
-          );
-        };
-        const fieldsNeedingApiCall = [];
-        const previewSchema = {
-          ...state.schema,
-          sections: state.schema.sections.map((section) => ({
-            ...section,
-            fields: section.fields.map((field) => {
-              if (field.type === "select") {
-                let masterType;
-                if (field.masterTypeName) {
-                  masterType = masterTypes.find(
-                    (mt) => mt.active === true && mt.enumName === field.masterTypeName
-                  );
-                  if (masterType && masterType.enumName) {
-                    fieldsNeedingApiCall.push({
-                      fieldId: field.id,
-                      groupEnumName: masterType.enumName
-                    });
-                  }
-                } else if (field.groupName) {
-                  masterType = masterTypes.find(
-                    (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
-                  );
-                }
-                if (masterType) {
-                  let options = [];
-                  if (masterType.enumName && dropdownOptionsMap && dropdownOptionsMap[masterType.enumName]) {
-                    options = dropdownOptionsMap[masterType.enumName];
-                  } else if (masterType.indexes && masterType.indexes.length > 0) {
-                    options = convertIndexesToOptions(masterType.indexes);
+            return indexes.map((item, index2) => {
+              if (typeof item === "string") {
+                return { label: item, value: item };
+              }
+              if (typeof item === "object" && item !== null) {
+                const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
+                const value = item.value || item.id || item.name || String(index2);
+                return { label, value };
+              }
+              return { label: String(item), value: String(item) };
+            });
+          };
+          const areDefaultOptions = (options) => {
+            if (!options || options.length === 0)
+              return true;
+            return options.every(
+              (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
+            );
+          };
+          const fieldsNeedingApiCall = [];
+          previewSchema = {
+            ...state.schema,
+            sections: state.schema.sections.map((section) => ({
+              ...section,
+              fields: section.fields.map((field) => {
+                if (field.type === "select") {
+                  let masterType;
+                  if (field.masterTypeName) {
+                    masterType = masterTypes.find(
+                      (mt) => mt.active === true && mt.enumName === field.masterTypeName
+                    );
+                    if (masterType && 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(
+                      (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+                    );
                   }
-                  if (options.length > 0) {
-                    if (field.masterTypeName || !field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
-                      return { ...field, options };
+                  if (masterType) {
+                    let options = [];
+                    if (masterType.enumName && dropdownOptionsMap && dropdownOptionsMap[masterType.enumName]) {
+                      options = dropdownOptionsMap[masterType.enumName];
+                    } else if (masterType.indexes && masterType.indexes.length > 0) {
+                      options = convertIndexesToOptions(masterType.indexes);
+                    }
+                    if (options.length > 0) {
+                      if (field.masterTypeName || !field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
+                        return { ...field, options };
+                      }
                     }
                   }
                 }
-              }
-              return field;
-            })
-          }))
-        };
-        if (fieldsNeedingApiCall.length > 0 && this.options.onGroupSelectionChange) {
-          setTimeout(() => {
-            const uniqueApiCalls = /* @__PURE__ */ new Map();
-            fieldsNeedingApiCall.forEach(({ fieldId, groupEnumName }) => {
-              if (!uniqueApiCalls.has(groupEnumName)) {
-                uniqueApiCalls.set(groupEnumName, []);
-              }
-              uniqueApiCalls.get(groupEnumName).push(fieldId);
-            });
-            uniqueApiCalls.forEach((fieldIds, groupEnumName) => {
-              if (process.env.NODE_ENV === "development") {
-                console.log(`[FormBuilder] Preview: Triggering API call for masterTypeName "${groupEnumName}" (affects ${fieldIds.length} field(s))`);
-              }
-              this.options.onGroupSelectionChange({
-                fieldId: fieldIds[0],
-                groupEnumName
+                return field;
+              })
+            }))
+          };
+          if (fieldsNeedingApiCall.length > 0 && this.options.onGroupSelectionChange && !this.isTriggeringApiCalls) {
+            this.isTriggeringApiCalls = true;
+            setTimeout(() => {
+              const uniqueApiCalls = /* @__PURE__ */ new Map();
+              fieldsNeedingApiCall.forEach(({ fieldId, groupEnumName }) => {
+                if (!uniqueApiCalls.has(groupEnumName)) {
+                  uniqueApiCalls.set(groupEnumName, []);
+                }
+                uniqueApiCalls.get(groupEnumName).push(fieldId);
               });
-            });
-          }, 0);
+              uniqueApiCalls.forEach((fieldIds, groupEnumName) => {
+                if (process.env.NODE_ENV === "development") {
+                  console.log(`[FormBuilder] Preview: Triggering API call for masterTypeName "${groupEnumName}" (affects ${fieldIds.length} field(s))`);
+                }
+                this.options.onGroupSelectionChange({
+                  fieldId: fieldIds[0],
+                  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);
+        if (!this.previewRenderer) {
+          this.previewRenderer = new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+          this.lastPreviewSchema = state.schema;
+        } else {
+          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);