@dmitryvim/form-builder 0.2.8 → 0.2.10

package/dist/esm/index.js

@@ -60,6 +60,41 @@ function validateSchema(schema) {
     errors.push("Schema missing elements array");
     return errors;
   }
+  if ("columns" in schema && schema.columns !== void 0) {
+    const columns = schema.columns;
+    const validColumns = [1, 2, 3, 4];
+    if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+      errors.push(`schema.columns must be 1, 2, 3, or 4 (got ${columns})`);
+    }
+  }
+  if ("prefillHints" in schema && schema.prefillHints) {
+    const prefillHints = schema.prefillHints;
+    if (Array.isArray(prefillHints)) {
+      prefillHints.forEach((hint, hintIndex) => {
+        if (!hint.label || typeof hint.label !== "string") {
+          errors.push(
+            `schema.prefillHints[${hintIndex}] must have a 'label' property of type string`
+          );
+        }
+        if (!hint.values || typeof hint.values !== "object") {
+          errors.push(
+            `schema.prefillHints[${hintIndex}] must have a 'values' property of type object`
+          );
+        } else {
+          for (const fieldKey in hint.values) {
+            const fieldExists = schema.elements.some(
+              (element) => element.key === fieldKey
+            );
+            if (!fieldExists) {
+              errors.push(
+                `schema.prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
+              );
+            }
+          }
+        }
+      });
+    }
+  }
   function validateElements(elements, path) {
     elements.forEach((element, index) => {
       const elementPath = `${path}[${index}]`;
@@ -69,17 +104,17 @@ function validateSchema(schema) {
       if (!element.key) {
         errors.push(`${elementPath}: missing key`);
       }
-      if (element.displayIf) {
-        const displayIf = element.displayIf;
-        if (!displayIf.key || typeof displayIf.key !== "string") {
+      if (element.enableIf) {
+        const enableIf = element.enableIf;
+        if (!enableIf.key || typeof enableIf.key !== "string") {
           errors.push(
-            `${elementPath}: displayIf must have a 'key' property of type string`
+            `${elementPath}: enableIf must have a 'key' property of type string`
           );
         }
-        const hasOperator = "equals" in displayIf;
+        const hasOperator = "equals" in enableIf;
         if (!hasOperator) {
           errors.push(
-            `${elementPath}: displayIf must have at least one operator (equals, etc.)`
+            `${elementPath}: enableIf must have at least one operator (equals, etc.)`
           );
         }
       }
@@ -157,7 +192,7 @@ function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
 
-// src/utils/display-conditions.ts
+// src/utils/enable-conditions.ts
 function getValueByPath(data, path) {
   if (!data || typeof data !== "object") {
     return void 0;
@@ -183,18 +218,27 @@ function getValueByPath(data, path) {
   }
   return current;
 }
-function evaluateDisplayCondition(condition, formData) {
+function evaluateEnableCondition(condition, formData, containerData) {
   if (!condition || !condition.key) {
+    throw new Error("Invalid enableIf condition: must have a 'key' property");
+  }
+  const scope = condition.scope ?? "relative";
+  let dataSource;
+  if (scope === "relative") {
+    dataSource = containerData ?? formData;
+  } else if (scope === "absolute") {
+    dataSource = formData;
+  } else {
     throw new Error(
-      "Invalid displayIf condition: must have a 'key' property"
+      `Invalid enableIf scope: must be "relative" or "absolute" (got "${scope}")`
     );
   }
-  const actualValue = getValueByPath(formData, condition.key);
+  const actualValue = getValueByPath(dataSource, condition.key);
   if ("equals" in condition) {
     return deepEqual(actualValue, condition.equals);
   }
   throw new Error(
-    `Invalid displayIf condition: no recognized operator (equals, etc.)`
+    `Invalid enableIf condition: no recognized operator (equals, etc.)`
   );
 }
 function deepEqual(a, b) {
@@ -207,7 +251,7 @@ function deepEqual(a, b) {
     } catch (e) {
       if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
         console.warn(
-          "deepEqual: Circular reference detected in displayIf comparison, using reference equality"
+          "deepEqual: Circular reference detected in enableIf comparison, using reference equality"
         );
         return a === b;
       }
@@ -260,7 +304,8 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   }
   if (!state.config.readonly && ctx.instance) {
     const handleChange = () => {
-      ctx.instance.triggerOnChange(pathKey, textInput.value);
+      const value = textInput.value === "" ? null : textInput.value;
+      ctx.instance.triggerOnChange(pathKey, value);
     };
     textInput.addEventListener("blur", handleChange);
     textInput.addEventListener("input", handleChange);
@@ -338,7 +383,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     }
     if (!state.config.readonly && ctx.instance) {
       const handleChange = () => {
-        ctx.instance.triggerOnChange(textInput.name, textInput.value);
+        const value2 = textInput.value === "" ? null : textInput.value;
+        ctx.instance.triggerOnChange(textInput.name, value2);
       };
       textInput.addEventListener("blur", handleChange);
       textInput.addEventListener("input", handleChange);
@@ -410,7 +456,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Text"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -504,19 +550,19 @@ function validateTextElement(element, key, context) {
     }
   };
   if (element.multiple) {
-    const inputs = scopeRoot.querySelectorAll(
-      `[name^="${key}["]`
-    );
+    const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
     const values = [];
+    const rawValues = [];
     inputs.forEach((input, index) => {
       const val = input?.value ?? "";
-      values.push(val);
+      rawValues.push(val);
+      values.push(val === "" ? null : val);
       validateTextInput(input, val, `${key}[${index}]`);
     });
     if (!skipValidation) {
       const minCount = element.minCount ?? 1;
       const maxCount = element.maxCount ?? Infinity;
-      const filteredValues = values.filter((v) => v.trim() !== "");
+      const filteredValues = rawValues.filter((v) => v.trim() !== "");
       if (element.required && filteredValues.length === 0) {
         errors.push(`${key}: required`);
       }
@@ -529,17 +575,17 @@ function validateTextElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(
-      `[name$="${key}"]`
-    );
+    const input = scopeRoot.querySelector(`[name$="${key}"]`);
     const val = input?.value ?? "";
     if (!skipValidation && element.required && val === "") {
       errors.push(`${key}: required`);
       markValidity(input, "required");
-      return { value: "", errors };
+      return { value: null, errors };
     }
-    validateTextInput(input, val, key);
-    return { value: val, errors };
+    if (input) {
+      validateTextInput(input, val, key);
+    }
+    return { value: val === "" ? null : val, errors };
   }
 }
 function updateTextField(element, fieldPath, value, context) {
@@ -551,9 +597,7 @@ function updateTextField(element, fieldPath, value, context) {
       );
       return;
     }
-    const inputs = scopeRoot.querySelectorAll(
-      `[name^="${fieldPath}["]`
-    );
+    const inputs = scopeRoot.querySelectorAll(`[name^="${fieldPath}["]`);
     inputs.forEach((input, index) => {
       if (index < value.length) {
         input.value = value[index] != null ? String(value[index]) : "";
@@ -567,9 +611,7 @@ function updateTextField(element, fieldPath, value, context) {
       );
     }
   } else {
-    const input = scopeRoot.querySelector(
-      `[name="${fieldPath}"]`
-    );
+    const input = scopeRoot.querySelector(`[name="${fieldPath}"]`);
     if (input) {
       input.value = value != null ? String(value) : "";
       input.classList.remove("invalid");
@@ -590,7 +632,8 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   textareaInput.readOnly = state.config.readonly;
   if (!state.config.readonly && ctx.instance) {
     const handleChange = () => {
-      ctx.instance.triggerOnChange(pathKey, textareaInput.value);
+      const value = textareaInput.value === "" ? null : textareaInput.value;
+      ctx.instance.triggerOnChange(pathKey, value);
     };
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
@@ -633,7 +676,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.readOnly = state.config.readonly;
     if (!state.config.readonly && ctx.instance) {
       const handleChange = () => {
-        ctx.instance.triggerOnChange(textareaInput.name, textareaInput.value);
+        const value2 = textareaInput.value === "" ? null : textareaInput.value;
+        ctx.instance.triggerOnChange(textareaInput.name, value2);
       };
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
@@ -659,7 +703,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         removeBtn = document.createElement("button");
         removeBtn.type = "button";
         removeBtn.className = "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
-        removeBtn.innerHTML = "\u2715 Remove";
+        removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(
             item
@@ -687,7 +731,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextareaItem(element.default || "");
@@ -829,7 +873,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Number"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         values.push(element.default || "");
         addNumberItem(element.default || "");
@@ -1111,7 +1155,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.className = "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
+      addBtn.textContent = "+";
       addBtn.onclick = () => {
         const defaultValue = element.default || element.options?.[0]?.value || "";
         values.push(defaultValue);
@@ -1297,7 +1341,9 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
   return newContainer;
 }
 function attachVideoButtonHandlers(container, resourceId, state, deps) {
-  const changeBtn = container.querySelector(".change-file-btn");
+  const changeBtn = container.querySelector(
+    ".change-file-btn"
+  );
   if (changeBtn) {
     changeBtn.onclick = (e) => {
       e.stopPropagation();
@@ -1306,7 +1352,9 @@ function attachVideoButtonHandlers(container, resourceId, state, deps) {
       }
     };
   }
-  const deleteBtn = container.querySelector(".delete-file-btn");
+  const deleteBtn = container.querySelector(
+    ".delete-file-btn"
+  );
   if (deleteBtn) {
     deleteBtn.onclick = (e) => {
       e.stopPropagation();
@@ -1347,7 +1395,9 @@ function renderUploadedVideoPreview(container, thumbnailUrl, videoType) {
   source.src = thumbnailUrl;
   source.type = videoType;
   video.appendChild(source);
-  video.appendChild(document.createTextNode("Your browser does not support the video tag."));
+  video.appendChild(
+    document.createTextNode("Your browser does not support the video tag.")
+  );
   container.appendChild(video);
 }
 function renderDeleteButton(container, resourceId, state) {
@@ -1448,7 +1498,13 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       deps
     );
   } else {
-    await renderUploadedFilePreview(container, resourceId, fileName, meta, state);
+    await renderUploadedFilePreview(
+      container,
+      resourceId,
+      fileName,
+      meta,
+      state
+    );
   }
 }
 async function renderFilePreviewReadonly(resourceId, state, fileName) {
@@ -1606,7 +1662,9 @@ function renderResourcePills(container, rids, state, onRemove) {
       if (fileInput) fileInput.click();
     };
     textContainer.appendChild(uploadLink);
-    textContainer.appendChild(document.createTextNode(` ${t("dragDropText", state)}`));
+    textContainer.appendChild(
+      document.createTextNode(` ${t("dragDropText", state)}`)
+    );
     container.appendChild(gridContainer);
     container.appendChild(textContainer);
     return;
@@ -2069,7 +2127,14 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
     const dragHandler = (files) => {
       if (files.length > 0) {
         const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(files[0], fileContainer, pathKey, state, deps, ctx.instance);
+        handleFileSelect(
+          files[0],
+          fileContainer,
+          pathKey,
+          state,
+          deps,
+          ctx.instance
+        );
       }
     };
     if (initial) {
@@ -2093,7 +2158,14 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
     picker.onchange = () => {
       if (picker.files && picker.files.length > 0) {
         const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(picker.files[0], fileContainer, pathKey, state, deps, ctx.instance);
+        handleFileSelect(
+          picker.files[0],
+          fileContainer,
+          pathKey,
+          state,
+          deps,
+          ctx.instance
+        );
       }
     };
     fileWrapper.appendChild(fileContainer);
@@ -2158,8 +2230,22 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
     const initialFiles = ctx.prefill[element.key] || [];
     addPrefillFilesToIndex(initialFiles, state);
     updateFilesList2();
-    setupFilesDropHandler(filesContainer, initialFiles, state, updateFilesList2, pathKey, ctx.instance);
-    setupFilesPickerHandler(filesPicker, initialFiles, state, updateFilesList2, pathKey, ctx.instance);
+    setupFilesDropHandler(
+      filesContainer,
+      initialFiles,
+      state,
+      updateFilesList2,
+      pathKey,
+      ctx.instance
+    );
+    setupFilesPickerHandler(
+      filesPicker,
+      initialFiles,
+      state,
+      updateFilesList2,
+      pathKey,
+      ctx.instance
+    );
     filesContainer.appendChild(list);
     filesWrapper.appendChild(filesContainer);
     filesWrapper.appendChild(filesPicker);
@@ -2221,8 +2307,22 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
       if (existingCount) existingCount.remove();
       filesWrapper.appendChild(countInfo);
     };
-    setupFilesDropHandler(filesContainer, initialFiles, state, updateFilesDisplay, pathKey, ctx.instance);
-    setupFilesPickerHandler(filesPicker, initialFiles, state, updateFilesDisplay, pathKey, ctx.instance);
+    setupFilesDropHandler(
+      filesContainer,
+      initialFiles,
+      state,
+      updateFilesDisplay,
+      pathKey,
+      ctx.instance
+    );
+    setupFilesPickerHandler(
+      filesPicker,
+      initialFiles,
+      state,
+      updateFilesDisplay,
+      pathKey,
+      ctx.instance
+    );
     updateFilesDisplay();
     wrapper.appendChild(filesWrapper);
   }
@@ -2621,7 +2721,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Colour"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -2705,9 +2805,7 @@ function validateColourElement(element, key, context) {
     return normalized;
   };
   if (element.multiple) {
-    const hexInputs = scopeRoot.querySelectorAll(
-      `.colour-hex-input`
-    );
+    const hexInputs = scopeRoot.querySelectorAll(`[name^="${key}["].colour-hex-input`);
     const values = [];
     hexInputs.forEach((input, index) => {
       const val = input?.value ?? "";
@@ -2752,9 +2850,7 @@ function updateColourField(element, fieldPath, value, context) {
       );
       return;
     }
-    const hexInputs = scopeRoot.querySelectorAll(
-      `.colour-hex-input`
-    );
+    const hexInputs = scopeRoot.querySelectorAll(`[name^="${fieldPath}["].colour-hex-input`);
     hexInputs.forEach((hexInput, index) => {
       if (index < value.length) {
         const normalized = normalizeColourValue(value[index]);
@@ -2764,7 +2860,9 @@ function updateColourField(element, fieldPath, value, context) {
         const wrapper = hexInput.closest(".colour-picker-wrapper");
         if (wrapper) {
           const swatch = wrapper.querySelector(".colour-swatch");
-          const colourInput = wrapper.querySelector(".colour-picker-hidden");
+          const colourInput = wrapper.querySelector(
+            ".colour-picker-hidden"
+          );
           if (swatch) {
             swatch.style.backgroundColor = normalized;
           }
@@ -2791,7 +2889,9 @@ function updateColourField(element, fieldPath, value, context) {
       const wrapper = hexInput.closest(".colour-picker-wrapper");
       if (wrapper) {
         const swatch = wrapper.querySelector(".colour-swatch");
-        const colourInput = wrapper.querySelector(".colour-picker-hidden");
+        const colourInput = wrapper.querySelector(
+          ".colour-picker-hidden"
+        );
         if (swatch) {
           swatch.style.backgroundColor = normalized;
         }
@@ -2929,14 +3029,10 @@ function createSliderUI(value, pathKey, element, ctx, readonly) {
 }
 function renderSliderElement(element, ctx, wrapper, pathKey) {
   if (element.min === void 0 || element.min === null) {
-    throw new Error(
-      `Slider field "${element.key}" requires "min" property`
-    );
+    throw new Error(`Slider field "${element.key}" requires "min" property`);
   }
   if (element.max === void 0 || element.max === null) {
-    throw new Error(
-      `Slider field "${element.key}" requires "max" property`
-    );
+    throw new Error(`Slider field "${element.key}" requires "max" property`);
   }
   if (element.min >= element.max) {
     throw new Error(
@@ -2965,14 +3061,10 @@ function renderSliderElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   if (element.min === void 0 || element.min === null) {
-    throw new Error(
-      `Slider field "${element.key}" requires "min" property`
-    );
+    throw new Error(`Slider field "${element.key}" requires "min" property`);
   }
   if (element.max === void 0 || element.max === null) {
-    throw new Error(
-      `Slider field "${element.key}" requires "max" property`
-    );
+    throw new Error(`Slider field "${element.key}" requires "max" property`);
   }
   if (element.min >= element.max) {
     throw new Error(
@@ -3080,7 +3172,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
         font-size: var(--fb-font-size);
         transition: all var(--fb-transition-duration);
       `;
-      addBtn.textContent = `+ Add ${element.label || "Slider"}`;
+      addBtn.textContent = "+";
       addBtn.addEventListener("mouseenter", () => {
         addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
       });
@@ -3143,7 +3235,10 @@ function validateSliderElement(element, key, context) {
         `;
         const sliderContainer = input.closest(".slider-container");
         if (sliderContainer && sliderContainer.nextSibling) {
-          sliderContainer.parentNode?.insertBefore(errorElement, sliderContainer.nextSibling);
+          sliderContainer.parentNode?.insertBefore(
+            errorElement,
+            sliderContainer.nextSibling
+          );
         } else if (sliderContainer) {
           sliderContainer.parentNode?.appendChild(errorElement);
         }
@@ -3314,6 +3409,33 @@ function updateSliderField(element, fieldPath, value, context) {
 }
 
 // src/components/container.ts
+function extractRootFormData(formRoot) {
+  const data = {};
+  const inputs = formRoot.querySelectorAll(
+    "input, select, textarea"
+  );
+  inputs.forEach((input) => {
+    const fieldName = input.getAttribute("name");
+    if (fieldName && !fieldName.includes("[") && !fieldName.includes(".")) {
+      if (input instanceof HTMLSelectElement) {
+        data[fieldName] = input.value;
+      } else if (input instanceof HTMLInputElement) {
+        if (input.type === "checkbox") {
+          data[fieldName] = input.checked;
+        } else if (input.type === "radio") {
+          if (input.checked) {
+            data[fieldName] = input.value;
+          }
+        } else {
+          data[fieldName] = input.value;
+        }
+      } else if (input instanceof HTMLTextAreaElement) {
+        data[fieldName] = input.value;
+      }
+    }
+  });
+  return data;
+}
 var renderElementFunc = null;
 function setRenderElement(fn) {
   renderElementFunc = fn;
@@ -3372,7 +3494,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     prefill: ctx.prefill?.[element.key] || {},
     // Sliced data for value population
     formData: ctx.formData ?? ctx.prefill,
-    // Complete root data for displayIf evaluation
+    // Complete root data for enableIf evaluation
     state: ctx.state
   };
   element.elements.forEach((child) => {
@@ -3392,15 +3514,10 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   header.className = "flex justify-between items-center mb-4";
   const left = document.createElement("div");
   left.className = "flex-1";
-  const right = document.createElement("div");
-  right.className = "flex gap-2";
   const itemsWrap = document.createElement("div");
   itemsWrap.className = "space-y-4";
   containerWrap.appendChild(header);
   header.appendChild(left);
-  if (!state.config.readonly) {
-    header.appendChild(right);
-  }
   if (!ctx.state.config.readonly) {
     const hintsElement = createPrefillHints(element, element.key);
     if (hintsElement) {
@@ -3414,17 +3531,31 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const createAddButton = () => {
     const add = document.createElement("button");
     add.type = "button";
-    add.className = "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
-    add.textContent = t("addElement", state);
+    add.className = "add-container-btn mt-2 px-3 py-1 rounded";
+    add.style.cssText = `
+      color: var(--fb-primary-color);
+      border: var(--fb-border-width) solid var(--fb-primary-color);
+      background-color: transparent;
+      font-size: var(--fb-font-size);
+      transition: all var(--fb-transition-duration);
+    `;
+    add.textContent = "+";
+    add.addEventListener("mouseenter", () => {
+      add.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    add.addEventListener("mouseleave", () => {
+      add.style.backgroundColor = "transparent";
+    });
     add.onclick = () => {
       if (countItems() < max) {
         const idx = countItems();
+        const currentFormData = state.formRoot ? extractRootFormData(state.formRoot) : {};
         const subCtx = {
           state: ctx.state,
           path: pathJoin(ctx.path, `${element.key}[${idx}]`),
           prefill: {},
-          formData: ctx.formData ?? ctx.prefill
-          // Complete root data for displayIf
+          formData: currentFormData
+          // Current root data from DOM for enableIf
         };
         const item = document.createElement("div");
         item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -3445,8 +3576,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         if (!state.config.readonly) {
           const rem = document.createElement("button");
           rem.type = "button";
-          rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-          rem.textContent = "\xD7";
+          rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+          rem.style.cssText = `
+            color: var(--fb-error-color);
+            background-color: transparent;
+            transition: background-color var(--fb-transition-duration);
+          `;
+          rem.textContent = "\u2715";
+          rem.addEventListener("mouseenter", () => {
+            rem.style.backgroundColor = "var(--fb-background-hover-color)";
+          });
+          rem.addEventListener("mouseleave", () => {
+            rem.style.backgroundColor = "transparent";
+          });
           rem.onclick = () => {
             item.remove();
             updateAddButton();
@@ -3462,16 +3604,16 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   };
   const updateAddButton = () => {
     const currentCount = countItems();
-    const addBtn = right.querySelector("button");
-    if (addBtn) {
-      addBtn.disabled = currentCount >= max;
-      addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+    const existingAddBtn = containerWrap.querySelector(
+      ".add-container-btn"
+    );
+    if (existingAddBtn) {
+      existingAddBtn.disabled = currentCount >= max;
+      existingAddBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+      existingAddBtn.style.pointerEvents = currentCount >= max ? "none" : "auto";
     }
     left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? "\u221E" : max})</span>`;
   };
-  if (!state.config.readonly) {
-    right.appendChild(createAddButton());
-  }
   if (pre && Array.isArray(pre)) {
     pre.forEach((prefillObj, idx) => {
       const subCtx = {
@@ -3479,7 +3621,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: prefillObj || {},
         formData: ctx.formData ?? ctx.prefill
-        // Complete root data for displayIf
+        // Complete root data for enableIf
       };
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -3500,8 +3642,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       if (!state.config.readonly) {
         const rem = document.createElement("button");
         rem.type = "button";
-        rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-        rem.textContent = "\xD7";
+        rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+        rem.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        rem.textContent = "\u2715";
+        rem.addEventListener("mouseenter", () => {
+          rem.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        rem.addEventListener("mouseleave", () => {
+          rem.style.backgroundColor = "transparent";
+        });
         rem.onclick = () => {
           item.remove();
           updateAddButton();
@@ -3520,7 +3673,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: {},
         formData: ctx.formData ?? ctx.prefill
-        // Complete root data for displayIf
+        // Complete root data for enableIf
       };
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -3540,8 +3693,19 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       item.appendChild(childWrapper);
       const rem = document.createElement("button");
       rem.type = "button";
-      rem.className = "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
-      rem.textContent = "\xD7";
+      rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
+      rem.style.cssText = `
+        color: var(--fb-error-color);
+        background-color: transparent;
+        transition: background-color var(--fb-transition-duration);
+      `;
+      rem.textContent = "\u2715";
+      rem.addEventListener("mouseenter", () => {
+        rem.style.backgroundColor = "var(--fb-background-hover-color)";
+      });
+      rem.addEventListener("mouseleave", () => {
+        rem.style.backgroundColor = "transparent";
+      });
       rem.onclick = () => {
         if (countItems() > min) {
           item.remove();
@@ -3554,6 +3718,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     }
   }
   containerWrap.appendChild(itemsWrap);
+  if (!state.config.readonly) {
+    containerWrap.appendChild(createAddButton());
+  }
   updateAddButton();
   wrapper.appendChild(containerWrap);
 }
@@ -3605,6 +3772,26 @@ function validateContainerElement(element, key, context) {
         `[data-container-item="${key}[${i}]"]`
       ) || scopeRoot;
       element.elements.forEach((child) => {
+        if (child.enableIf) {
+          try {
+            const rootFormData = context.instance?.getState().formRoot ? extractRootFormData(context.instance.getState().formRoot) : {};
+            const shouldEnable = evaluateEnableCondition(
+              child.enableIf,
+              rootFormData,
+              // Root form data for absolute scope
+              itemData
+              // Container data for relative scope
+            );
+            if (!shouldEnable) {
+              return;
+            }
+          } catch (error) {
+            console.error(
+              `Error evaluating enableIf for field "${child.key}" in container "${key}[${i}]":`,
+              error
+            );
+          }
+        }
         if (child.hidden || child.type === "hidden") {
           itemData[child.key] = child.default !== void 0 ? child.default : null;
         } else {
@@ -3624,6 +3811,26 @@ function validateContainerElement(element, key, context) {
     const containerData = {};
     const containerContainer = scopeRoot.querySelector(`[data-container="${key}"]`) || scopeRoot;
     element.elements.forEach((child) => {
+      if (child.enableIf) {
+        try {
+          const rootFormData = context.instance?.getState().formRoot ? extractRootFormData(context.instance.getState().formRoot) : {};
+          const shouldEnable = evaluateEnableCondition(
+            child.enableIf,
+            rootFormData,
+            // Root form data for absolute scope
+            containerData
+            // Container data for relative scope
+          );
+          if (!shouldEnable) {
+            return;
+          }
+        } catch (error) {
+          console.error(
+            `Error evaluating enableIf for field "${child.key}" in container "${key}":`,
+            error
+          );
+        }
+      }
       if (child.hidden || child.type === "hidden") {
         containerData[child.key] = child.default !== void 0 ? child.default : null;
       } else {
@@ -3808,31 +4015,180 @@ if (typeof document !== "undefined") {
     }
   });
 }
-function checkDisplayCondition(element, ctx) {
-  if (!element.displayIf) {
-    return null;
+function shouldDisableElement(element, ctx) {
+  if (!element.enableIf) {
+    return false;
   }
   try {
-    const dataForCondition = ctx.formData ?? ctx.prefill;
-    const shouldDisplay = evaluateDisplayCondition(
-      element.displayIf,
-      dataForCondition
+    const rootFormData = ctx.formData ?? ctx.prefill ?? {};
+    const containerData = ctx.path ? getValueByPath(rootFormData, ctx.path) : void 0;
+    const shouldEnable = evaluateEnableCondition(
+      element.enableIf,
+      rootFormData,
+      containerData
     );
-    if (!shouldDisplay) {
-      const hiddenWrapper = document.createElement("div");
-      hiddenWrapper.className = "fb-field-wrapper-hidden";
-      hiddenWrapper.style.display = "none";
-      hiddenWrapper.setAttribute("data-field-key", element.key);
-      hiddenWrapper.setAttribute("data-conditionally-hidden", "true");
-      return hiddenWrapper;
-    }
+    return !shouldEnable;
   } catch (error) {
     console.error(
-      `Error evaluating displayIf for field "${element.key}":`,
+      `Error evaluating enableIf for field "${element.key}":`,
       error
     );
   }
-  return null;
+  return false;
+}
+function extractDOMValue(fieldPath, formRoot) {
+  const input = formRoot.querySelector(
+    `[name="${fieldPath}"]`
+  );
+  if (!input) {
+    return void 0;
+  }
+  if (input instanceof HTMLSelectElement) {
+    return input.value;
+  } else if (input instanceof HTMLInputElement) {
+    if (input.type === "checkbox") {
+      return input.checked;
+    } else if (input.type === "radio") {
+      const checked = formRoot.querySelector(
+        `[name="${fieldPath}"]:checked`
+      );
+      return checked ? checked.value : void 0;
+    } else {
+      return input.value;
+    }
+  } else if (input instanceof HTMLTextAreaElement) {
+    return input.value;
+  }
+  return void 0;
+}
+function reevaluateEnableIf(wrapper, element, ctx) {
+  if (!element.enableIf) {
+    return;
+  }
+  const formRoot = ctx.state.formRoot;
+  if (!formRoot) {
+    console.error(`Cannot re-evaluate enableIf: formRoot is null`);
+    return;
+  }
+  const condition = element.enableIf;
+  const scope = condition.scope ?? "relative";
+  let rootFormData = {};
+  const containerData = {};
+  const effectiveScope = !ctx.path || ctx.path === "" ? "absolute" : scope;
+  if (effectiveScope === "relative" && ctx.path) {
+    const containerMatch = ctx.path.match(/^(.+)\[(\d+)\]$/);
+    if (containerMatch) {
+      const containerKey = containerMatch[1];
+      const containerIndex = parseInt(containerMatch[2], 10);
+      const containerItemElement = formRoot.querySelector(
+        `[data-container-item="${containerKey}[${containerIndex}]"]`
+      );
+      if (containerItemElement) {
+        const inputs = containerItemElement.querySelectorAll(
+          "input, select, textarea"
+        );
+        inputs.forEach((input) => {
+          const fieldName = input.getAttribute("name");
+          if (fieldName) {
+            const fieldKeyMatch = fieldName.match(/\.([^.[\]]+)$/);
+            if (fieldKeyMatch) {
+              const fieldKey = fieldKeyMatch[1];
+              if (input instanceof HTMLSelectElement) {
+                containerData[fieldKey] = input.value;
+              } else if (input instanceof HTMLInputElement) {
+                if (input.type === "checkbox") {
+                  containerData[fieldKey] = input.checked;
+                } else if (input.type === "radio") {
+                  if (input.checked) {
+                    containerData[fieldKey] = input.value;
+                  }
+                } else {
+                  containerData[fieldKey] = input.value;
+                }
+              } else if (input instanceof HTMLTextAreaElement) {
+                containerData[fieldKey] = input.value;
+              }
+            }
+          }
+        });
+      }
+    }
+  } else {
+    const dependencyKey = condition.key;
+    const dependencyValue = extractDOMValue(dependencyKey, formRoot);
+    if (dependencyValue !== void 0) {
+      rootFormData[dependencyKey] = dependencyValue;
+    } else {
+      rootFormData = ctx.formData ?? ctx.prefill;
+    }
+  }
+  try {
+    const shouldEnable = evaluateEnableCondition(
+      condition,
+      rootFormData,
+      containerData
+    );
+    if (shouldEnable) {
+      wrapper.style.display = "";
+      wrapper.classList.remove("fb-field-wrapper-disabled");
+      wrapper.removeAttribute("data-conditionally-disabled");
+    } else {
+      wrapper.style.display = "none";
+      wrapper.classList.add("fb-field-wrapper-disabled");
+      wrapper.setAttribute("data-conditionally-disabled", "true");
+    }
+  } catch (error) {
+    console.error(`Error re-evaluating enableIf for field "${element.key}":`, error);
+  }
+}
+function setupEnableIfListeners(wrapper, element, ctx) {
+  if (!element.enableIf) {
+    return;
+  }
+  const formRoot = ctx.state.formRoot;
+  if (!formRoot) {
+    console.error(`Cannot setup enableIf listeners: formRoot is null`);
+    return;
+  }
+  const condition = element.enableIf;
+  const scope = condition.scope ?? "relative";
+  const dependencyKey = condition.key;
+  let dependencyFieldPath;
+  if (scope === "relative" && ctx.path) {
+    dependencyFieldPath = `${ctx.path}.${dependencyKey}`;
+  } else {
+    dependencyFieldPath = dependencyKey;
+  }
+  const dependencyInput = formRoot.querySelector(
+    `[name="${dependencyFieldPath}"]`
+  );
+  if (!dependencyInput) {
+    const observer = new MutationObserver(() => {
+      const input = formRoot.querySelector(
+        `[name="${dependencyFieldPath}"]`
+      );
+      if (input) {
+        input.addEventListener("change", () => {
+          reevaluateEnableIf(wrapper, element, ctx);
+        });
+        input.addEventListener("input", () => {
+          reevaluateEnableIf(wrapper, element, ctx);
+        });
+        observer.disconnect();
+      }
+    });
+    observer.observe(formRoot, {
+      childList: true,
+      subtree: true
+    });
+    return;
+  }
+  dependencyInput.addEventListener("change", () => {
+    reevaluateEnableIf(wrapper, element, ctx);
+  });
+  dependencyInput.addEventListener("input", () => {
+    reevaluateEnableIf(wrapper, element, ctx);
+  });
 }
 function createFieldLabel(element) {
   const title = document.createElement("label");
@@ -3950,10 +4306,7 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
   }
 }
 function renderElement2(element, ctx) {
-  const hiddenElement = checkDisplayCondition(element, ctx);
-  if (hiddenElement) {
-    return hiddenElement;
-  }
+  const initiallyDisabled = shouldDisableElement(element, ctx);
   const wrapper = document.createElement("div");
   wrapper.className = "mb-6 fb-field-wrapper";
   wrapper.setAttribute("data-field-key", element.key);
@@ -3961,6 +4314,12 @@ function renderElement2(element, ctx) {
   wrapper.appendChild(label);
   const pathKey = pathJoin(ctx.path, element.key);
   dispatchToRenderer(element, ctx, wrapper, pathKey);
+  if (initiallyDisabled) {
+    wrapper.style.display = "none";
+    wrapper.classList.add("fb-field-wrapper-disabled");
+    wrapper.setAttribute("data-conditionally-disabled", "true");
+  }
+  setupEnableIfListeners(wrapper, element, ctx);
   return wrapper;
 }
 setRenderElement(renderElement2);
@@ -4619,15 +4978,16 @@ var FormBuilderInstance = class {
     event.preventDefault();
     event.stopPropagation();
     const hintValuesJson = target.getAttribute("data-hint-values");
+    const isRootHint = target.getAttribute("data-root-hint") === "true";
     const containerKey = target.getAttribute("data-container-key");
-    if (!hintValuesJson || !containerKey) {
+    if (!hintValuesJson || !isRootHint && !containerKey) {
       console.warn("Prefill hint missing required data attributes");
       return;
     }
     try {
       const hintValues = JSON.parse(hintValuesJson);
       for (const fieldKey in hintValues) {
-        const fullPath = `${containerKey}.${fieldKey}`;
+        const fullPath = isRootHint ? fieldKey : `${containerKey}.${fieldKey}`;
         const value = hintValues[fieldKey];
         this.updateField(fullPath, value);
       }
@@ -4635,6 +4995,27 @@ var FormBuilderInstance = class {
       console.error("Error parsing prefill hint values:", error);
     }
   }
+  /**
+   * Create root-level prefill hints UI
+   */
+  createRootPrefillHints(hints) {
+    const hintsContainer = document.createElement("div");
+    hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-4";
+    hints.forEach((hint) => {
+      const hintButton = document.createElement("button");
+      hintButton.type = "button";
+      hintButton.className = "fb-prefill-hint";
+      if (hint.icon) {
+        hintButton.textContent = `${hint.icon} ${hint.label}`;
+      } else {
+        hintButton.textContent = hint.label;
+      }
+      hintButton.setAttribute("data-hint-values", JSON.stringify(hint.values));
+      hintButton.setAttribute("data-root-hint", "true");
+      hintsContainer.appendChild(hintButton);
+    });
+    return hintsContainer;
+  }
   /**
    * Render form from schema
    */
@@ -4650,8 +5031,19 @@ var FormBuilderInstance = class {
     clear(root);
     root.setAttribute("data-fb-root", "true");
     injectThemeVariables(root, this.state.config.theme);
-    const formEl = document.createElement("div");
-    formEl.className = "space-y-6";
+    const rootContainer = document.createElement("div");
+    rootContainer.className = "space-y-6";
+    if (schema.prefillHints && !this.state.config.readonly) {
+      const hintsContainer = this.createRootPrefillHints(schema.prefillHints);
+      rootContainer.appendChild(hintsContainer);
+    }
+    const fieldsWrapper = document.createElement("div");
+    const columns = schema.columns || 1;
+    if (columns === 1) {
+      fieldsWrapper.className = "space-y-4";
+    } else {
+      fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
+    }
     schema.elements.forEach((element) => {
       if (element.hidden) {
         return;
@@ -4660,13 +5052,14 @@ var FormBuilderInstance = class {
         path: "",
         prefill: prefill || {},
         formData: prefill || {},
-        // Pass complete root data for displayIf evaluation
+        // Pass complete root data for enableIf evaluation
         state: this.state,
         instance: this
       });
-      formEl.appendChild(block);
+      fieldsWrapper.appendChild(block);
     });
-    root.appendChild(formEl);
+    rootContainer.appendChild(fieldsWrapper);
+    root.appendChild(rootContainer);
     if (!this.state.config.readonly) {
       root.addEventListener("click", this.handlePrefillHintClick.bind(this));
     }
@@ -4708,15 +5101,18 @@ var FormBuilderInstance = class {
     };
     setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
-      if (element.displayIf) {
+      if (element.enableIf) {
         try {
-          const shouldDisplay = evaluateDisplayCondition(element.displayIf, data);
-          if (!shouldDisplay) {
+          const shouldEnable = evaluateEnableCondition(
+            element.enableIf,
+            data
+          );
+          if (!shouldEnable) {
             return;
           }
         } catch (error) {
           console.error(
-            `Error evaluating displayIf for field "${element.key}" during validation:`,
+            `Error evaluating enableIf for field "${element.key}" during validation:`,
             error
           );
         }
@@ -4804,7 +5200,9 @@ var FormBuilderInstance = class {
       }
       if (element.type === "container" || element.type === "group") {
         const containerElement = element;
-        const nestedData = this.buildHiddenFieldsData(containerElement.elements);
+        const nestedData = this.buildHiddenFieldsData(
+          containerElement.elements
+        );
         if (Object.keys(nestedData).length > 0) {
           if (!(key in data)) {
             data[key] = nestedData;
@@ -4822,7 +5220,9 @@ var FormBuilderInstance = class {
    */
   setFormData(data) {
     if (!this.state.schema || !this.state.formRoot) {
-      console.warn("setFormData: Form not initialized. Call renderForm() first.");
+      console.warn(
+        "setFormData: Form not initialized. Call renderForm() first."
+      );
       return;
     }
     for (const fieldPath in data) {
@@ -4836,20 +5236,27 @@ var FormBuilderInstance = class {
    */
   updateField(fieldPath, value) {
     if (!this.state.schema || !this.state.formRoot) {
-      console.warn("updateField: Form not initialized. Call renderForm() first.");
+      console.warn(
+        "updateField: Form not initialized. Call renderForm() first."
+      );
       return;
     }
     const schemaElement = this.findSchemaElement(fieldPath);
     if (!schemaElement) {
-      console.warn(`updateField: Schema element not found for path "${fieldPath}"`);
+      console.warn(
+        `updateField: Schema element not found for path "${fieldPath}"`
+      );
       return;
     }
     const domElement = this.findFormElementByFieldPath(fieldPath);
     if (!domElement) {
-      console.warn(`updateField: DOM element not found for path "${fieldPath}"`);
+      console.warn(
+        `updateField: DOM element not found for path "${fieldPath}"`
+      );
       return;
     }
     this.updateFieldValue(domElement, schemaElement, fieldPath, value);
+    this.reevaluateConditionalFields();
     if (this.state.config.onChange || this.state.config.onFieldChange) {
       this.triggerOnChange(fieldPath, value);
     }
@@ -4878,7 +5285,7 @@ var FormBuilderInstance = class {
     }
   }
   /**
-   * Re-evaluate all conditional fields (displayIf) based on current form data
+   * Re-evaluate all conditional fields (enableIf) based on current form data
    * This is called automatically when form data changes (via onChange events)
    */
   reevaluateConditionalFields() {
@@ -4887,45 +5294,80 @@ var FormBuilderInstance = class {
     const checkElements = (elements, currentPath) => {
       elements.forEach((element) => {
         const fullPath = currentPath ? `${currentPath}.${element.key}` : element.key;
-        if (element.displayIf) {
-          const fieldWrappers = this.state.formRoot.querySelectorAll(
-            `[data-field-key="${element.key}"]`
-          );
-          fieldWrappers.forEach((wrapper) => {
+        if (element.enableIf) {
+          let fieldWrapper = null;
+          if (currentPath) {
+            const pathMatch = currentPath.match(/^(.+)\[(\d+)\]$/);
+            if (pathMatch) {
+              const containerKey = pathMatch[1];
+              const containerIndex = pathMatch[2];
+              const containerElement = this.state.formRoot.querySelector(
+                `[data-container-item="${containerKey}[${containerIndex}]"]`
+              );
+              if (containerElement) {
+                fieldWrapper = containerElement.querySelector(
+                  `[data-field-key="${element.key}"]`
+                );
+              }
+            } else {
+              const containerElement = this.state.formRoot.querySelector(
+                `[data-container="${currentPath}"]`
+              );
+              if (containerElement) {
+                fieldWrapper = containerElement.querySelector(
+                  `[data-field-key="${element.key}"]`
+                );
+              }
+            }
+          } else {
+            fieldWrapper = this.state.formRoot.querySelector(
+              `[data-field-key="${element.key}"]`
+            );
+          }
+          if (fieldWrapper) {
+            const wrapper = fieldWrapper;
             try {
-              const shouldDisplay = evaluateDisplayCondition(
-                element.displayIf,
-                formData
-                // Use complete formData for condition evaluation
+              let containerData = void 0;
+              const scope = element.enableIf.scope ?? "relative";
+              if (scope === "relative" && currentPath) {
+                containerData = getValueByPath(formData, currentPath);
+              }
+              const shouldEnable = evaluateEnableCondition(
+                element.enableIf,
+                formData,
+                // Use complete formData for absolute scope
+                containerData
+                // Use container-specific data for relative scope
               );
-              const isCurrentlyHidden = wrapper.getAttribute("data-conditionally-hidden") === "true";
-              if (shouldDisplay && isCurrentlyHidden) {
+              const isCurrentlyDisabled = wrapper.getAttribute("data-conditionally-disabled") === "true";
+              if (shouldEnable && isCurrentlyDisabled) {
+                const containerPrefill = currentPath ? getValueByPath(formData, currentPath) : formData;
+                const prefillContext = containerPrefill && typeof containerPrefill === "object" ? containerPrefill : {};
                 const newWrapper = renderElement2(element, {
-                  path: fullPath,
-                  // Use accumulated path
-                  prefill: formData,
-                  // Use complete formData for root-level elements
+                  path: currentPath,
+                  // Use container path (empty string for root-level)
+                  prefill: prefillContext,
                   formData,
-                  // Pass complete formData for displayIf evaluation
+                  // Pass complete formData for enableIf evaluation
                   state: this.state,
                   instance: this
                 });
                 wrapper.parentNode?.replaceChild(newWrapper, wrapper);
-              } else if (!shouldDisplay && !isCurrentlyHidden) {
-                const hiddenWrapper = document.createElement("div");
-                hiddenWrapper.className = "fb-field-wrapper-hidden";
-                hiddenWrapper.style.display = "none";
-                hiddenWrapper.setAttribute("data-field-key", element.key);
-                hiddenWrapper.setAttribute("data-conditionally-hidden", "true");
-                wrapper.parentNode?.replaceChild(hiddenWrapper, wrapper);
+              } else if (!shouldEnable && !isCurrentlyDisabled) {
+                const disabledWrapper = document.createElement("div");
+                disabledWrapper.className = "fb-field-wrapper-disabled";
+                disabledWrapper.style.display = "none";
+                disabledWrapper.setAttribute("data-field-key", element.key);
+                disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+                wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
               }
             } catch (error) {
               console.error(
-                `Error re-evaluating displayIf for field "${element.key}":`,
+                `Error re-evaluating enableIf for field "${element.key}" at path "${fullPath}":`,
                 error
               );
             }
-          });
+          }
         }
         if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
           const containerData = formData?.[element.key];