@dmitryvim/form-builder 0.2.29 → 0.2.30

package/dist/esm/index.js

@@ -153,12 +153,14 @@ function validateSchema(schema) {
         allOutputKeys.add(textKey);
         allOutputKeys.add(filesKey);
       } else {
-        if (allOutputKeys.has(el.key)) {
-          errors.push(
-            `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
-          );
+        if (el.key) {
+          if (allOutputKeys.has(el.key)) {
+            errors.push(
+              `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
+            );
+          }
+          allOutputKeys.add(el.key);
         }
-        allOutputKeys.add(el.key);
       }
     }
   }
@@ -168,9 +170,17 @@ function validateSchema(schema) {
       if (!element.type) {
         errors.push(`${elementPath}: missing type`);
       }
-      if (!element.key) {
+      if (!element.key && element.type !== "markdown") {
         errors.push(`${elementPath}: missing key`);
       }
+      if (element.type === "markdown") {
+        const content = element.content;
+        if (typeof content !== "string") {
+          errors.push(
+            `${elementPath}: markdown element requires "content" to be a string (got ${content === null ? "null" : typeof content})`
+          );
+        }
+      }
       if (element.enableIf) {
         const enableIf = element.enableIf;
         if (!enableIf.key || typeof enableIf.key !== "string") {
@@ -263,6 +273,18 @@ function escapeHtml(text) {
   div.textContent = text;
   return div.innerHTML;
 }
+function getElementLookupKey(element, state) {
+  if (element.key) {
+    return element.key;
+  }
+  const cached = state.syntheticElementIds.get(element);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const id = `fb-synthetic-${state.syntheticElementIdCounter++}`;
+  state.syntheticElementIds.set(element, id);
+  return id;
+}
 function pathJoin(base, key) {
   return base ? `${base}.${key}` : key;
 }
@@ -5454,7 +5476,7 @@ function updateSliderField(element, fieldPath, value, context) {
 function extractChildDefaults(elements) {
   const defaults = {};
   for (const child of elements) {
-    if ("default" in child && child.default !== void 0) {
+    if (child.key && "default" in child && child.default !== void 0) {
       defaults[child.key] = child.default;
     }
   }
@@ -5549,8 +5571,8 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
-    if (child.hidden || child.type === "hidden") {
-      const prefillVal = containerPrefill[child.key] ?? child.default ?? null;
+    if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+      const prefillVal = containerPrefill[child.key] ?? ("default" in child ? child.default : null) ?? null;
       itemsWrap.appendChild(
         createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
       );
@@ -5624,11 +5646,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           childWrapper.className = `grid grid-cols-${columns} gap-4`;
         }
         element.elements.forEach((child) => {
-          if (child.hidden || child.type === "hidden") {
+          if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
             childWrapper.appendChild(
               createHiddenInput(
                 pathJoin(subCtx.path, child.key),
-                child.default ?? null
+                ("default" in child ? child.default : null) ?? null
               )
             );
           } else {
@@ -5701,8 +5723,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (child.hidden || child.type === "hidden") {
-          const prefillVal = prefillObj?.[child.key] ?? child.default ?? null;
+        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+          const prefillVal = prefillObj?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
           childWrapper.appendChild(
             createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
           );
@@ -5757,11 +5779,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (child.hidden || child.type === "hidden") {
+        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
           childWrapper.appendChild(
             createHiddenInput(
               pathJoin(subCtx.path, child.key),
-              child.default ?? null
+              ("default" in child ? child.default : null) ?? null
             )
           );
         } else {
@@ -5947,6 +5969,7 @@ function updateContainerField(element, fieldPath, value, context) {
     value.forEach((itemValue, index) => {
       if (isPlainObject(itemValue)) {
         element.elements.forEach((childElement) => {
+          if (childElement.type === "markdown" || !childElement.key) return;
           const childPath = `${fieldPath}[${index}].${childElement.key}`;
           if (childElement.type === "richinput" && childElement.flatOutput) {
             const richChild = childElement;
@@ -5986,6 +6009,7 @@ function updateContainerField(element, fieldPath, value, context) {
       return;
     }
     element.elements.forEach((childElement) => {
+      if (childElement.type === "markdown" || !childElement.key) return;
       const childPath = `${fieldPath}.${childElement.key}`;
       if (childElement.type === "richinput" && childElement.flatOutput) {
         const richChild = childElement;
@@ -8685,6 +8709,248 @@ function updateRichInputField(element, fieldPath, value, context) {
   }
 }
 
+// src/components/markdown/snarkdown.ts
+var TAGS = {
+  "": ["<em>", "</em>"],
+  _: ["<strong>", "</strong>"],
+  "*": ["<strong>", "</strong>"],
+  "~": ["<s>", "</s>"],
+  "\n": ["<br />"],
+  " ": ["<br />"],
+  "-": ["<hr />"]
+};
+function outdent(str) {
+  return str.replace(
+    RegExp("^" + (str.match(/^(\t| )+/) || "")[0], "gm"),
+    ""
+  );
+}
+function encodeAttr(str) {
+  return (str + "").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function parse(md, prevLinks) {
+  const tokenizer = /((?:^|\n+)(?:\n---+|\*[ ]\*(?:[ ]\*)+)\n)|(?:^```[ ]*(\w*)\n([\s\S]*?)\n```$)|((?:(?:^|\n+)(?:\t|[ ]{2,}).+)+\n*)|((?:(?:^|\n)([>*+-]|\d+\.)\s+.*)+)|(?:!\[([^\]]*?)\]\(([^)]+?)\))|(\[)|(\](?:\(([^)]+?)\))?)|(?:(?:^|\n+)([^\s].*)\n(-{3,}|={3,})(?:\n+|$))|(?:(?:^|\n+)(#{1,6})\s*(.+)(?:\n+|$))|(?:`([^`].*?)`)|([ ]{2}\n\n*|\n{2,}|__|\*\*|[_*]|~~)/gm;
+  const context = [];
+  let out = "";
+  const links = prevLinks || {};
+  let last = 0;
+  let chunk;
+  let prev;
+  let token;
+  let inner;
+  let t2;
+  function tag(token2) {
+    const desc = TAGS[token2[1] || ""];
+    const end = context[context.length - 1] === token2;
+    if (!desc) return token2;
+    if (!desc[1]) return desc[0];
+    if (end) context.pop();
+    else context.push(token2);
+    return desc[end ? 1 : 0];
+  }
+  function flush() {
+    let str = "";
+    while (context.length) str += tag(context[context.length - 1]);
+    return str;
+  }
+  md = md.replace(/^\[(.+?)\]:\s*(.+)$/gm, (_s, name, url) => {
+    links[name.toLowerCase()] = url;
+    return "";
+  }).replace(/^\n+|\n+$/g, "");
+  while (token = tokenizer.exec(md)) {
+    prev = md.substring(last, token.index);
+    last = tokenizer.lastIndex;
+    chunk = token[0];
+    if (prev.match(/[^\\](\\\\)*\\$/)) ; else if (t2 = token[3] || token[4]) {
+      chunk = '<pre class="code ' + (token[4] ? "poetry" : token[2].toLowerCase()) + '"><code' + (token[2] ? ` class="language-${token[2].toLowerCase()}"` : "") + ">" + outdent(encodeAttr(t2).replace(/^\n+|\n+$/g, "")) + "</code></pre>";
+    } else if (t2 = token[6]) {
+      if (t2.match(/\./)) {
+        token[5] = token[5].replace(/^\d+/gm, "");
+      }
+      inner = parse(outdent(token[5].replace(/^\s*[>*+.-]/gm, "")));
+      if (t2 === ">") t2 = "blockquote";
+      else {
+        t2 = t2.match(/\./) ? "ol" : "ul";
+        inner = inner.replace(/^(.*)(\n|$)/gm, "<li>$1</li>");
+      }
+      chunk = "<" + t2 + ">" + inner + "</" + t2 + ">";
+    } else if (token[8]) {
+      chunk = `<img src="${encodeAttr(token[8])}" alt="${encodeAttr(token[7])}">`;
+    } else if (token[10]) {
+      out = out.replace(
+        "<a>",
+        `<a href="${encodeAttr(token[11] || links[prev.toLowerCase()])}">`
+      );
+      chunk = flush() + "</a>";
+    } else if (token[9]) {
+      chunk = "<a>";
+    } else if (token[12] || token[14]) {
+      t2 = "h" + (token[14] ? token[14].length : token[13] > "=" ? 1 : 2);
+      chunk = "<" + t2 + ">" + parse(token[12] || token[15], links) + "</" + t2 + ">";
+    } else if (token[16]) {
+      chunk = "<code>" + encodeAttr(token[16]) + "</code>";
+    } else if (token[17] || token[1]) {
+      chunk = tag(token[17] || "--");
+    }
+    out += prev;
+    out += chunk;
+  }
+  return (out + md.substring(last) + flush()).replace(/^\n+|\n+$/g, "");
+}
+
+// src/components/markdown/render.ts
+var STYLE_ID2 = "fb-markdown-styles";
+function ensureMarkdownStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID2)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.setAttribute("data-fb-markdown-styles", "true");
+  style.textContent = `
+.fb-markdown {
+  font-family: var(--fb-font-family, inherit);
+  font-size: var(--fb-font-size, 1rem);
+  color: var(--fb-text-color, #1f2937);
+  line-height: 1.6;
+}
+.fb-markdown h1,
+.fb-markdown h2,
+.fb-markdown h3,
+.fb-markdown h4,
+.fb-markdown h5,
+.fb-markdown h6 {
+  font-weight: var(--fb-font-weight-medium, 600);
+  color: var(--fb-text-color, #1f2937);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.fb-markdown h1 { font-size: 1.5rem; }
+.fb-markdown h2 { font-size: 1.25rem; }
+.fb-markdown h3 { font-size: 1.1rem; }
+.fb-markdown h4,
+.fb-markdown h5,
+.fb-markdown h6 { font-size: 1rem; }
+.fb-markdown p {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+.fb-markdown ul,
+.fb-markdown ol {
+  margin: 0.25em 0 0.5em 1.5em;
+  padding: 0;
+}
+.fb-markdown li {
+  margin-bottom: 0.15em;
+}
+.fb-markdown a {
+  color: var(--fb-primary-color, #2563eb);
+  text-decoration: underline;
+}
+.fb-markdown a:hover {
+  opacity: 0.8;
+}
+.fb-markdown code {
+  background: var(--fb-input-background-color, #f3f4f6);
+  border-radius: 3px;
+  padding: 0.1em 0.35em;
+  font-size: 0.9em;
+  font-family: monospace;
+}
+.fb-markdown pre {
+  background: var(--fb-input-background-color, #f3f4f6);
+  border-radius: var(--fb-border-radius, 0.375rem);
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+.fb-markdown pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+.fb-markdown blockquote {
+  border-left: 3px solid var(--fb-border-color, #d1d5db);
+  margin: 0.5em 0;
+  padding-left: 1em;
+  color: var(--fb-text-secondary-color, #6b7280);
+}
+.fb-markdown hr {
+  border: none;
+  border-top: 1px solid var(--fb-border-color, #d1d5db);
+  margin: 0.75em 0;
+}
+.fb-markdown strong { font-weight: var(--fb-font-weight-medium, 600); }
+.fb-markdown em { font-style: italic; }
+.fb-markdown s { text-decoration: line-through; }
+`;
+  document.head.appendChild(style);
+}
+var ANCHOR_DANGEROUS_SCHEMES = [
+  "javascript:",
+  "data:",
+  "vbscript:",
+  "blob:"
+];
+var IMG_DANGEROUS_SCHEMES = ["javascript:", "vbscript:", "blob:"];
+function isImgSrcDangerous(normalized) {
+  if (IMG_DANGEROUS_SCHEMES.some((scheme) => normalized.startsWith(scheme))) {
+    return true;
+  }
+  if (normalized.startsWith("data:") && !normalized.startsWith("data:image/")) {
+    return true;
+  }
+  return false;
+}
+function escapeRawHtml(content) {
+  return content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function sanitizeElements(container) {
+  const anchors = container.querySelectorAll("a[href]");
+  anchors.forEach((a) => {
+    const href = a.getAttribute("href") ?? "";
+    const normalized = href.trim().toLowerCase();
+    const isDangerous = ANCHOR_DANGEROUS_SCHEMES.some(
+      (scheme) => normalized.startsWith(scheme)
+    );
+    if (isDangerous) {
+      a.setAttribute("href", "#");
+    }
+    a.setAttribute("target", "_blank");
+    a.setAttribute("rel", "noopener noreferrer");
+  });
+  const images = container.querySelectorAll("img[src]");
+  images.forEach((img) => {
+    const src = img.getAttribute("src") ?? "";
+    const normalized = src.trim().toLowerCase();
+    if (isImgSrcDangerous(normalized)) {
+      img.setAttribute("src", "");
+    }
+  });
+}
+function renderMarkdown(element, _ctx, parent) {
+  if (typeof element.content !== "string") {
+    throw new Error(
+      `renderMarkdown: markdown element${element.key ? ` "${element.key}"` : ""} requires "content" to be a string (got ${element.content === null ? "null" : typeof element.content})`
+    );
+  }
+  ensureMarkdownStyles();
+  const wrapper = document.createElement("div");
+  wrapper.className = "fb-markdown";
+  const escaped = escapeRawHtml(element.content);
+  wrapper.innerHTML = parse(escaped);
+  sanitizeElements(wrapper);
+  parent.appendChild(wrapper);
+  return wrapper;
+}
+
+// src/components/markdown/index.ts
+function validateMarkdown(_element, _key, _context) {
+  return { value: void 0, errors: [], skip: true };
+}
+function updateMarkdown(_element, _fieldPath, _value, _context) {
+}
+
 // src/components/index.ts
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
@@ -8915,7 +9181,7 @@ function setupEnableIfListeners(wrapper, element, ctx) {
 function createFieldLabel(element) {
   const title = document.createElement("label");
   title.className = "text-sm font-medium text-gray-900";
-  title.textContent = element.label || element.key;
+  title.textContent = element.label ?? element.key ?? "";
   if (element.required) {
     const req = document.createElement("span");
     req.className = "text-red-500 ml-1";
@@ -9043,6 +9309,29 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
   }
 }
 function renderElement2(element, ctx) {
+  if (element.type === "markdown") {
+    if (element.hidden === true) {
+      const placeholder = document.createElement("div");
+      placeholder.style.display = "none";
+      placeholder.setAttribute("data-fb-hidden-markdown", "true");
+      return placeholder;
+    }
+    const initiallyDisabled2 = shouldDisableElement(element, ctx);
+    const outerWrapper = document.createElement("div");
+    outerWrapper.className = "mb-6 fb-field-wrapper fb-markdown-wrapper";
+    outerWrapper.setAttribute(
+      "data-field-key",
+      getElementLookupKey(element, ctx.state)
+    );
+    renderMarkdown(element, ctx, outerWrapper);
+    if (initiallyDisabled2) {
+      outerWrapper.style.display = "none";
+      outerWrapper.classList.add("fb-field-wrapper-disabled");
+      outerWrapper.setAttribute("data-conditionally-disabled", "true");
+    }
+    setupEnableIfListeners(outerWrapper, element, ctx);
+    return outerWrapper;
+  }
   const initiallyDisabled = shouldDisableElement(element, ctx);
   const wrapper = document.createElement("div");
   wrapper.className = "mb-6 fb-field-wrapper";
@@ -9253,7 +9542,9 @@ function createInstanceState(config) {
       translations: mergedTranslations
     },
     debounceTimer: null,
-    prefill: {}
+    prefill: {},
+    syntheticElementIds: /* @__PURE__ */ new WeakMap(),
+    syntheticElementIdCounter: 0
   };
 }
 function generateInstanceId() {
@@ -9530,6 +9821,11 @@ var componentRegistry = {
     // Legacy type: `type: "hidden"` — reads/writes DOM <input type="hidden"> element
     validate: validateHiddenElement,
     update: updateHiddenField
+  },
+  markdown: {
+    // Display-only element — no value, no errors, skip from form data
+    validate: validateMarkdown,
+    update: updateMarkdown
   }
 };
 function getComponentOperations(elementType) {
@@ -9957,7 +10253,7 @@ var FormBuilderInstance = class {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
     }
     schema.elements.forEach((element) => {
-      if (element.hidden || element.type === "hidden") {
+      if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {
         const val = prefill?.[element.key] ?? element.default ?? null;
         fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
@@ -9992,7 +10288,7 @@ var FormBuilderInstance = class {
     const errors = [];
     const data = {};
     const validateElement2 = (element, ctx, customScopeRoot = null) => {
-      const key = element.key;
+      const key = element.key ?? "";
       const scopeRoot = customScopeRoot || this.state.formRoot;
       const componentContext = {
         scopeRoot,
@@ -10010,7 +10306,8 @@ var FormBuilderInstance = class {
         errors.push(...componentResult.errors);
         return {
           value: componentResult.value,
-          spread: !!componentResult.spread
+          spread: !!componentResult.spread,
+          skip: !!componentResult.skip
         };
       }
       console.warn(`Unknown field type "${element.type}" for key "${key}"`);
@@ -10031,6 +10328,9 @@ var FormBuilderInstance = class {
           );
         }
       }
+      if (element.type === "markdown") {
+        return;
+      }
       if (element.hidden || element.type === "hidden") {
         const hiddenInput = this.state.formRoot.querySelector(
           `input[type="hidden"][data-hidden-field="true"][name="${element.key}"]`
@@ -10043,9 +10343,10 @@ var FormBuilderInstance = class {
         }
       } else {
         const result = validateElement2(element, { path: "" });
+        if (result.skip) return;
         if (result.spread && result.value !== null && typeof result.value === "object") {
           Object.assign(data, result.value);
-        } else {
+        } else if (element.key) {
           data[element.key] = result.value;
         }
       }
@@ -10121,6 +10422,7 @@ var FormBuilderInstance = class {
   buildHiddenFieldsData(elements) {
     const data = {};
     for (const element of elements) {
+      if (element.type === "markdown" || !element.key) continue;
       const key = element.key;
       if (element.hidden && element.default !== void 0) {
         data[key] = element.default;
@@ -10241,6 +10543,71 @@ var FormBuilderInstance = class {
       );
     }
   }
+  /**
+   * Find the field wrapper DOM element for a given element+path combo.
+   * Used by reevaluateConditionalFields.
+   */
+  findFieldWrapper(element, currentPath) {
+    const formRoot = this.state.formRoot;
+    const lookupKey = getElementLookupKey(element, this.state);
+    if (!currentPath) {
+      return formRoot.querySelector(`[data-field-key="${lookupKey}"]`);
+    }
+    const pathMatch = currentPath.match(/^(.+)\[(\d+)\]$/);
+    if (pathMatch) {
+      const containerEl2 = formRoot.querySelector(
+        `[data-container-item="${pathMatch[1]}[${pathMatch[2]}]"]`
+      );
+      return containerEl2 ? containerEl2.querySelector(`[data-field-key="${lookupKey}"]`) : null;
+    }
+    const containerEl = formRoot.querySelector(
+      `[data-container="${currentPath}"]`
+    );
+    return containerEl ? containerEl.querySelector(`[data-field-key="${lookupKey}"]`) : null;
+  }
+  /**
+   * Apply enableIf show/hide logic to a single field wrapper.
+   * Extracted to reduce cyclomatic complexity of checkElements.
+   */
+  applyEnableIfVisibility(element, wrapper, currentPath, fullPath, formData) {
+    try {
+      const scope = element.enableIf.scope ?? "relative";
+      const containerData = scope === "relative" && currentPath ? getValueByPath(formData, currentPath) : void 0;
+      const shouldEnable = evaluateEnableCondition(
+        element.enableIf,
+        formData,
+        containerData
+      );
+      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: currentPath,
+          prefill: prefillContext,
+          formData,
+          state: this.state,
+          instance: this
+        });
+        wrapper.parentNode?.replaceChild(newWrapper, 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",
+          getElementLookupKey(element, this.state)
+        );
+        disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+        wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
+      }
+    } catch (error) {
+      console.error(
+        `Error re-evaluating enableIf for field "${element.key ?? "<no key>"}" at path "${fullPath}":`,
+        error
+      );
+    }
+  }
   /**
    * Re-evaluate all conditional fields (enableIf) based on current form data
    * This is called automatically when form data changes (via onChange events)
@@ -10250,97 +10617,31 @@ var FormBuilderInstance = class {
     const formData = this.validateForm(true).data;
     const checkElements = (elements, currentPath) => {
       elements.forEach((element) => {
-        const fullPath = currentPath ? `${currentPath}.${element.key}` : element.key;
+        const fullPath = currentPath ? `${currentPath}.${element.key ?? ""}` : element.key ?? "";
         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}"]`
-            );
-          }
+          const fieldWrapper = this.findFieldWrapper(element, currentPath);
           if (fieldWrapper) {
-            const wrapper = fieldWrapper;
-            try {
-              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 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: currentPath,
-                  // Use container path (empty string for root-level)
-                  prefill: prefillContext,
-                  formData,
-                  // Pass complete formData for enableIf evaluation
-                  state: this.state,
-                  instance: this
-                });
-                wrapper.parentNode?.replaceChild(newWrapper, 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 enableIf for field "${element.key}" at path "${fullPath}":`,
-                error
-              );
-            }
+            this.applyEnableIfVisibility(
+              element,
+              fieldWrapper,
+              currentPath,
+              fullPath,
+              formData
+            );
           }
         }
         if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
-          const containerData = formData?.[element.key];
+          const containerData = element.key ? formData?.[element.key] : void 0;
           if (Array.isArray(containerData)) {
             const containerItems = this.state.formRoot.querySelectorAll(
               `[data-container-item]`
             );
-            const directItems = Array.from(containerItems).filter((el) => {
+            const directItems = fullPath ? Array.from(containerItems).filter((el) => {
               const attr = el.getAttribute("data-container-item") || "";
               if (!attr.startsWith(`${fullPath}[`)) return false;
               const suffix = attr.slice(fullPath.length);
               return /^\[\d+\]$/.test(suffix);
-            });
+            }) : [];
             directItems.forEach((el) => {
               const attr = el.getAttribute("data-container-item") || "";
               checkElements(element.elements, attr);