form-builder-pro 1.0.15 → 1.0.17

package/dist/index.d.mts

@@ -186,11 +186,6 @@ 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,11 +186,6 @@ 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,20 +7566,10 @@ 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.");
@@ -7660,9 +7650,6 @@ 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) {
@@ -7714,162 +7701,110 @@ var FormBuilder = class {
         };
       }
     }
+    const canvasWrapper = this.container.querySelector(".form-builder-canvas");
+    const previewContainer = this.container.querySelector(".flex-1.overflow-y-auto.bg-white");
+    const scrollContainer = canvasWrapper || previewContainer;
+    const savedScrollTop = scrollContainer ? scrollContainer.scrollTop : 0;
     this.container.innerHTML = "";
     const wrapper = createElement("div", { className: "flex flex-col h-screen " });
     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 (state.schema.sections) {
-        let previewSchema = state.schema;
-        if (masterTypes && masterTypes.length > 0) {
-          const convertIndexesToOptions = (indexes) => {
-            if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
-              return [];
+      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 };
             }
-            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 (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 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
+                  );
+                } 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);
                   }
-                  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 };
-                      }
+                  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 && !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);
-              });
-              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" });
+              }
+              return field;
+            })
+          }))
+        };
+        const previewContainer2 = 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" });
-        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);
+        new FormRenderer(inner, previewSchema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+        previewContainer2.appendChild(inner);
+        main.appendChild(previewContainer2);
       } else {
-        const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
+        const previewContainer2 = 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" });
-        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);
+        new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+        previewContainer2.appendChild(inner);
+        main.appendChild(previewContainer2);
       }
     } 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);
-      const canvasWrapper = createElement("div", { className: "form-builder-canvas flex-1 overflow-y-auto" });
-      canvasWrapper.appendChild(this.renderCanvas(state));
-      main.appendChild(canvasWrapper);
+      const canvasWrapper2 = createElement("div", { className: "form-builder-canvas flex-1 overflow-y-auto" });
+      canvasWrapper2.appendChild(this.renderCanvas(state));
+      main.appendChild(canvasWrapper2);
       const configWrapper = createElement("div", { className: "form-builder-config-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-l md:border-l border-t md:border-t-0 border-gray-200 dark:border-gray-800" });
       configWrapper.appendChild(this.renderConfigPanel(state));
       main.appendChild(configWrapper);
     }
     wrapper.appendChild(main);
     this.container.appendChild(wrapper);
+    if (savedScrollTop > 0) {
+      requestAnimationFrame(() => {
+        const newCanvasWrapper = this.container.querySelector(".form-builder-canvas");
+        const newPreviewContainer = this.container.querySelector(".flex-1.overflow-y-auto.bg-white");
+        const newScrollContainer = newCanvasWrapper || newPreviewContainer;
+        if (newScrollContainer) {
+          newScrollContainer.scrollTop = savedScrollTop;
+        }
+      });
+    }
     if (focusState) {
       setTimeout(() => {
         const elementToFocus = document.querySelector(`[data-focus-id="${focusState.id}"]`);