@dmitryvim/form-builder 0.5.1 → 0.5.3

package/dist/esm/index.js

@@ -15,6 +15,71 @@ function t(key, state, params) {
   return text;
 }
 
+// src/utils/helpers.ts
+function isElementReadonly(element, state, ctx) {
+  return element.readonly === true || state.config.readonly === true || ctx?.inheritedReadonly === true;
+}
+function isPlainObject(obj) {
+  return obj && typeof obj === "object" && obj.constructor === Object;
+}
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  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;
+}
+function findDirectContainerRows(scopeRoot, containerPath) {
+  if (!containerPath) return [];
+  const all = scopeRoot.querySelectorAll("[data-container-item]");
+  return Array.from(all).filter((el) => {
+    const attr = el.getAttribute("data-container-item") || "";
+    if (!attr.startsWith(`${containerPath}[`)) return false;
+    return /^\[\d+\]$/.test(attr.slice(containerPath.length));
+  });
+}
+function clear(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function serializeHiddenValue(value) {
+  if (value === null || value === void 0) return "";
+  return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+function deserializeHiddenValue(raw) {
+  if (raw === "") return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+function createHiddenInput(name, value) {
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = name;
+  input.setAttribute("data-hidden-field", "true");
+  input.value = serializeHiddenValue(value);
+  return input;
+}
+
 // src/utils/validation.ts
 function addLengthHint(element, parts, state) {
   if (element.minLength != null || element.maxLength != null) {
@@ -184,6 +249,64 @@ function validateSchema(schema) {
       }
     }
   }
+  function validateCountBounds(element, elementPath, errors2) {
+    const el = element;
+    if (el.type === "group") {
+      if (!isPlainObject(el.repeat)) return;
+      checkBounds(
+        elementPath,
+        el.repeat?.min,
+        el.repeat?.max,
+        "repeat.min",
+        "repeat.max",
+        el.required === true,
+        errors2
+      );
+      return;
+    }
+    const isMultiple = el.multiple === true || el.type === "files";
+    if (!isMultiple) return;
+    checkBounds(
+      elementPath,
+      el.minCount,
+      el.maxCount,
+      "minCount",
+      "maxCount",
+      el.required === true,
+      errors2
+    );
+  }
+  function checkBounds(elementPath, minCount, maxCount, minName, maxName, requiredImpliesFloor, errors2) {
+    for (const [name, bound] of [
+      [minName, minCount],
+      [maxName, maxCount]
+    ]) {
+      if (bound !== void 0 && typeof bound !== "number") {
+        errors2.push(
+          `${elementPath}: ${name} must be a number (got ${typeof bound})`
+        );
+      }
+    }
+    const min = typeof minCount === "number" ? minCount : void 0;
+    const max = typeof maxCount === "number" ? maxCount : void 0;
+    if (max !== void 0 && (max < 0 || Number.isNaN(max))) {
+      errors2.push(
+        `${elementPath}: ${maxName} must be a non-negative number or Infinity (got ${max})`
+      );
+    }
+    if (min !== void 0 && (min < 0 || !Number.isFinite(min))) {
+      errors2.push(
+        `${elementPath}: ${minName} must be a finite non-negative number (got ${min})`
+      );
+    }
+    const effectiveMin = min ?? (requiredImpliesFloor ? 1 : void 0);
+    if (effectiveMin !== void 0 && max !== void 0 && effectiveMin > max) {
+      const shown = min !== void 0 ? `${minName} (${min})` : `required: true (implies ${minName} 1)`;
+      errors2.push(
+        `${elementPath}: ${shown} cannot be greater than ${maxName} (${max})`
+      );
+    }
+  }
   function validateElements(elements, path) {
     elements.forEach((element, index) => {
       const elementPath = `${path}[${index}]`;
@@ -193,6 +316,7 @@ function validateSchema(schema) {
       if (!element.key && element.type !== "markdown") {
         errors.push(`${elementPath}: missing key`);
       }
+      validateCountBounds(element, elementPath, errors);
       if (element.type === "markdown") {
         const content = element.content;
         if (typeof content !== "string") {
@@ -273,62 +397,6 @@ function validateSchema(schema) {
   return errors;
 }
 
-// src/utils/helpers.ts
-function isElementReadonly(element, state, ctx) {
-  return element.readonly === true || state.config.readonly === true || ctx?.inheritedReadonly === true;
-}
-function isPlainObject(obj) {
-  return obj && typeof obj === "object" && obj.constructor === Object;
-}
-function escapeHtml(text) {
-  const div = document.createElement("div");
-  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;
-}
-function clear(node) {
-  while (node.firstChild) node.removeChild(node.firstChild);
-}
-function formatFileSize(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-function serializeHiddenValue(value) {
-  if (value === null || value === void 0) return "";
-  return typeof value === "object" ? JSON.stringify(value) : String(value);
-}
-function deserializeHiddenValue(raw) {
-  if (raw === "") return null;
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return raw;
-  }
-}
-function createHiddenInput(name, value) {
-  const input = document.createElement("input");
-  input.type = "hidden";
-  input.name = name;
-  input.setAttribute("data-hidden-field", "true");
-  input.value = serializeHiddenValue(value);
-  return input;
-}
-
 // src/utils/enable-conditions.ts
 function getValueByPath(data, path) {
   if (!data || typeof data !== "object") {
@@ -449,6 +517,19 @@ function ensureThemingHooks(doc) {
   color: var(--fb-error-color);
   background-color: var(--fb-background-hover-color);
 }
+.fb-item-remove:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+/* Cards carrying a row-level remove button reserve a right-hand lane for it
+   (24px button + inset + gap) so it never sits on top of the first field's
+   control. A class rather than an inline style, so host CSS can override the
+   gutter without !important; the compound selector keeps it ahead of the
+   card's own p-2 utility regardless of stylesheet order. Its own token, not
+   --fb-slide-card-padding, which is slides-only and always resolves. */
+.containerItem.fb-row-removable {
+  padding-right: var(--fb-row-remove-gutter, 40px);
+}
 /* Prefill-suggestion pills rendered by createPrefillHints. Outline pill at rest,
    soft-fill on hover, solid-fill when selected. All colors flow from the active
    theme \u2014 consumers don't need to ship their own CSS. */
@@ -4856,12 +4937,21 @@ function buildClearAllRow(state, ridCount, onClearAll) {
   return row;
 }
 var gridResizeObservers = /* @__PURE__ */ new WeakMap();
+var gridMeasureFrames = /* @__PURE__ */ new WeakMap();
+function cancelPendingMeasure(container) {
+  const frame = gridMeasureFrames.get(container);
+  if (frame !== void 0) {
+    cancelAnimationFrame(frame);
+    gridMeasureFrames.delete(container);
+  }
+}
 function disposePlaceholdersForUpload(container) {
   const observer = gridResizeObservers.get(container);
   if (observer) {
     observer.disconnect();
     gridResizeObservers.delete(container);
   }
+  cancelPendingMeasure(container);
   container.querySelectorAll(".fb-multi-placeholder").forEach((p) => p.remove());
 }
 function renderResourcePills(opts) {
@@ -4886,6 +4976,7 @@ function renderResourcePills(opts) {
     previousObserver.disconnect();
     gridResizeObservers.delete(container);
   }
+  cancelPendingMeasure(container);
   while (container.firstChild) container.removeChild(container.firstChild);
   const ridList = rids ?? [];
   const effectiveMax = maxCount ?? Infinity;
@@ -4985,7 +5076,7 @@ function renderResourcePills(opts) {
   if (effectiveMax === Infinity || effectiveMax > occupied) {
     grid.appendChild(buildPlaceholderTile());
   }
-  requestAnimationFrame(adjustPlaceholders);
+  gridMeasureFrames.set(container, requestAnimationFrame(adjustPlaceholders));
   if (typeof ResizeObserver !== "undefined") {
     const ro = new ResizeObserver(() => adjustPlaceholders());
     ro.observe(grid);
@@ -6740,11 +6831,14 @@ function getChildWrapperClass(columns) {
   const cols = columns || 1;
   return cols === 1 ? "fb-row" : `grid grid-cols-${cols} gap-2`;
 }
-function mountRemoveButton(item, onRemove, state) {
+function mountRemoveButton(item, onRemove, state, containerLabel) {
   const rem = document.createElement("button");
   rem.type = "button";
   rem.className = "fb-item-remove";
-  rem.setAttribute("aria-label", t("removeElement", state));
+  rem.setAttribute(
+    "aria-label",
+    containerLabel ? t("removeRowFrom", state, { label: containerLabel }) : t("removeRow", state)
+  );
   rem.style.cssText = `
     width: 24px;
     height: 24px;
@@ -6759,17 +6853,13 @@ function mountRemoveButton(item, onRemove, state) {
   `;
   rem.innerHTML = BIN_ICON_SVG;
   rem.onclick = onRemove;
-  const labelRow = item.querySelector("[data-fb-label-row]");
-  if (labelRow) {
-    rem.style.marginLeft = "auto";
-    labelRow.appendChild(rem);
-    return;
-  }
   rem.style.position = "absolute";
-  rem.style.top = "8px";
-  rem.style.right = "8px";
+  rem.style.top = "var(--fb-row-remove-inset, 8px)";
+  rem.style.right = "var(--fb-row-remove-inset, 8px)";
+  rem.style.zIndex = "1";
   item.style.position = "relative";
-  item.appendChild(rem);
+  item.classList.add("fb-row-removable");
+  item.insertBefore(rem, item.firstChild);
 }
 function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const state = ctx.state;
@@ -6794,24 +6884,29 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const max = element.maxCount ?? Infinity;
   const pre = Array.isArray(ctx.prefill?.[element.key]) ? ctx.prefill[element.key] : null;
   const childDefaults = extractChildDefaults(element.elements);
-  const countItems = () => itemsWrap.querySelectorAll(":scope > .containerItem").length;
-  const handleAddItem = () => {
-    if (countItems() >= max) return;
-    const idx = countItems();
-    const currentFormData = state.formRoot ? extractRootFormData(state.formRoot) : {};
+  let nextRowIndex = 0;
+  const takeRowIndex = () => nextRowIndex++;
+  const directRows = () => Array.from(itemsWrap.children).filter(
+    (el) => el.classList.contains("containerItem")
+  );
+  const countItems = () => directRows().length;
+  const handleRemoveItem = (item) => {
+    if (countItems() <= min) return;
+    item.remove();
+    updateAddButton();
+  };
+  const createContainerItem = (idx, rowPrefill, formData) => {
     const subCtx = {
-      state: ctx.state,
+      state,
       instance: ctx.instance,
       path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-      prefill: childDefaults,
-      // Defaults for enableIf evaluation
-      formData: currentFormData,
-      // Current root data from DOM for enableIf
+      prefill: mergeWithDefaults(rowPrefill ?? {}, childDefaults),
+      formData,
       inheritedReadonly: childInheritedReadonly
     };
     const item = document.createElement("div");
     item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
-    item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+    item.setAttribute("data-container-item", subCtx.path);
     if (isSlides) {
       item.setAttribute("data-fb-slide-card", "");
     }
@@ -6821,11 +6916,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     );
     element.elements.forEach((child) => {
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+        const hiddenValue = rowPrefill?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
         childWrapper.appendChild(
-          createHiddenInput(
-            pathJoin(subCtx.path, child.key),
-            ("default" in child ? child.default : null) ?? null
-          )
+          createHiddenInput(pathJoin(subCtx.path, child.key), hiddenValue)
         );
       } else {
         childWrapper.appendChild(renderElement(child, subCtx));
@@ -6833,8 +6926,24 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     });
     item.appendChild(childWrapper);
     if (!containerIsReadonly) {
-      mountRemoveButton(item, () => handleRemoveItem(item), state);
+      mountRemoveButton(
+        item,
+        () => handleRemoveItem(item),
+        state,
+        element.label
+      );
     }
+    return item;
+  };
+  const handleAddItem = () => {
+    if (countItems() >= max) return;
+    const item = createContainerItem(
+      takeRowIndex(),
+      null,
+      // Current root data read back from the DOM, so enableIf sees what the
+      // user has actually typed rather than the original prefill.
+      state.formRoot ? extractRootFormData(state.formRoot) : {}
+    );
     if (slideAddTile && slideAddTile.parentElement === itemsWrap) {
       itemsWrap.insertBefore(item, slideAddTile);
     } else {
@@ -6847,109 +6956,43 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   let pillAddUpdate = null;
   const syncSlideTileSize = () => {
     if (!slideAddTile) return;
-    const firstSlide = itemsWrap.querySelector(
-      ":scope > .containerItem"
-    );
+    const firstSlide = directRows()[0];
     if (firstSlide && firstSlide.offsetHeight > 0) {
       slideAddTile.style.minHeight = `${firstSlide.offsetHeight}px`;
     }
   };
+  const syncRemoveButtons = () => {
+    const atFloor = countItems() <= min;
+    directRows().forEach((row) => {
+      const btn = Array.from(row.children).find(
+        (el) => el.classList.contains("fb-item-remove")
+      );
+      if (btn) btn.disabled = atFloor;
+    });
+  };
   const updateAddButton = () => {
     const currentCount = countItems();
     if (slideAddUpdate) slideAddUpdate(currentCount, max);
     if (pillAddUpdate) pillAddUpdate(currentCount, max);
     if (slideAddTile) syncSlideTileSize();
+    syncRemoveButtons();
   };
-  const handleRemoveItem = (item) => {
-    item.remove();
-    updateAddButton();
-  };
-  if (pre && Array.isArray(pre)) {
-    pre.forEach((prefillObj, idx) => {
-      const mergedPrefill = mergeWithDefaults(prefillObj || {}, childDefaults);
-      const subCtx = {
-        state: ctx.state,
-        instance: ctx.instance,
-        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: mergedPrefill,
-        // Merged prefill with defaults for enableIf
-        formData: ctx.formData ?? ctx.prefill,
-        // Complete root data for enableIf
-        inheritedReadonly: childInheritedReadonly
-      };
-      const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
-      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-      if (isSlides) {
-        item.setAttribute("data-fb-slide-card", "");
-      }
-      const childWrapper = document.createElement("div");
-      childWrapper.className = getChildWrapperClass(
-        isSlides ? void 0 : element.columns
+  if (pre) {
+    pre.forEach((prefillObj) => {
+      itemsWrap.appendChild(
+        createContainerItem(
+          takeRowIndex(),
+          prefillObj ?? {},
+          ctx.formData ?? ctx.prefill
+        )
       );
-      element.elements.forEach((child) => {
-        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)
-          );
-        } else {
-          childWrapper.appendChild(renderElement(child, subCtx));
-        }
-      });
-      item.appendChild(childWrapper);
-      if (!containerIsReadonly) {
-        mountRemoveButton(item, () => handleRemoveItem(item), ctx.state);
-      }
-      itemsWrap.appendChild(item);
     });
   }
   if (!containerIsReadonly) {
     while (countItems() < min) {
-      const idx = countItems();
-      const subCtx = {
-        state: ctx.state,
-        instance: ctx.instance,
-        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: childDefaults,
-        // Defaults for enableIf evaluation
-        formData: ctx.formData ?? ctx.prefill,
-        // Complete root data for enableIf
-        inheritedReadonly: childInheritedReadonly
-      };
-      const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
-      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-      if (isSlides) {
-        item.setAttribute("data-fb-slide-card", "");
-      }
-      const childWrapper = document.createElement("div");
-      childWrapper.className = getChildWrapperClass(
-        isSlides ? void 0 : element.columns
-      );
-      element.elements.forEach((child) => {
-        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-          childWrapper.appendChild(
-            createHiddenInput(
-              pathJoin(subCtx.path, child.key),
-              ("default" in child ? child.default : null) ?? null
-            )
-          );
-        } else {
-          childWrapper.appendChild(renderElement(child, subCtx));
-        }
-      });
-      item.appendChild(childWrapper);
-      mountRemoveButton(
-        item,
-        () => {
-          if (countItems() > min) {
-            handleRemoveItem(item);
-          }
-        },
-        ctx.state
+      itemsWrap.appendChild(
+        createContainerItem(takeRowIndex(), null, ctx.formData ?? ctx.prefill)
       );
-      itemsWrap.appendChild(item);
     }
   }
   containerWrap.appendChild(itemsWrap);
@@ -7016,15 +7059,7 @@ function validateContainerElement(element, key, context) {
   };
   if ("multiple" in element && element.multiple) {
     const items = [];
-    const allContainerWrappers = scopeRoot.querySelectorAll(
-      "[data-container-item]"
-    );
-    const containerWrappers = Array.from(allContainerWrappers).filter((el) => {
-      const attr = el.getAttribute("data-container-item") || "";
-      if (!attr.startsWith(`${key}[`)) return false;
-      const suffix = attr.slice(key.length);
-      return /^\[\d+\]$/.test(suffix);
-    });
+    const containerWrappers = findDirectContainerRows(scopeRoot, key);
     containerWrappers.forEach((itemContainer) => {
       const itemData = {};
       const containerAttr = itemContainer.getAttribute("data-container-item") || "";
@@ -7059,7 +7094,7 @@ function validateContainerElement(element, key, context) {
         );
         if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
           Object.assign(itemData, childResult.value);
-        } else {
+        } else if (!childResult.skip && child.key) {
           itemData[child.key] = childResult.value;
         }
       });
@@ -7100,7 +7135,7 @@ function validateContainerElement(element, key, context) {
         );
         if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
           Object.assign(containerData, childResult.value);
-        } else {
+        } else if (!childResult.skip && child.key) {
           containerData[child.key] = childResult.value;
         }
       }
@@ -7120,11 +7155,13 @@ function updateContainerField(element, fieldPath, value, context) {
       );
       return;
     }
+    const rows = findDirectContainerRows(scopeRoot, fieldPath);
     value.forEach((itemValue, index) => {
-      if (isPlainObject(itemValue)) {
+      const rowPath = rows[index]?.getAttribute("data-container-item");
+      if (isPlainObject(itemValue) && rowPath) {
         element.elements.forEach((childElement) => {
           if (childElement.type === "markdown" || !childElement.key) return;
-          const childPath = `${fieldPath}[${index}].${childElement.key}`;
+          const childPath = `${rowPath}.${childElement.key}`;
           if (childElement.type === "richinput" && childElement.flatOutput) {
             const richChild = childElement;
             const textKey = richChild.textKey ?? "text";
@@ -7147,12 +7184,9 @@ function updateContainerField(element, fieldPath, value, context) {
         });
       }
     });
-    const existingContainers = scopeRoot.querySelectorAll(
-      `[data-container-item^="${fieldPath}["]`
-    );
-    if (value.length !== existingContainers.length) {
+    if (value.length !== rows.length) {
       console.warn(
-        `updateContainerField: Multiple container field "${fieldPath}" item count mismatch. Consider re-rendering for add/remove.`
+        `updateContainerField: Multiple container field "${fieldPath}" received ${value.length} items for ${rows.length} rendered rows. Rows are not added or removed here \u2014 re-render for add/remove.`
       );
     }
   } else {
@@ -10644,6 +10678,8 @@ var defaultConfig = {
     en: {
       // UI texts
       removeElement: "Remove",
+      removeRow: "Remove row",
+      removeRowFrom: "Remove row from {label}",
       clickDragText: "Click or drag file",
       clickDragTextMultiple: "Click or drag files",
       noFileSelected: "No file selected",
@@ -10717,6 +10753,8 @@ var defaultConfig = {
     ru: {
       // UI texts
       removeElement: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
+      removeRow: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443",
+      removeRowFrom: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443 \u0438\u0437 \xAB{label}\xBB",
       clickDragText: "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B",
       clickDragTextMultiple: "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B",
       noFileSelected: "\u0424\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D",
@@ -11106,6 +11144,18 @@ var exampleThemes = {
 };
 
 // src/instance/FormBuilderInstance.ts
+function findOwnField(scope, lookupKey, ownBoundary) {
+  const matches = scope.querySelectorAll(
+    `[data-field-key="${lookupKey}"]`
+  );
+  for (const el of Array.from(matches)) {
+    const boundary = el.closest(
+      "[data-container-item], [data-container]"
+    );
+    if (boundary === ownBoundary) return el;
+  }
+  return null;
+}
 var FormBuilderInstance = class {
   constructor(config) {
     this.instanceId = generateInstanceId();
@@ -11828,28 +11878,28 @@ var FormBuilderInstance = class {
     const formRoot = this.state.formRoot;
     const lookupKey = getElementLookupKey(element, this.state);
     if (!currentPath) {
-      return formRoot.querySelector(`[data-field-key="${lookupKey}"]`);
+      return findOwnField(formRoot, lookupKey, null);
     }
     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;
+      return containerEl2 ? findOwnField(containerEl2, lookupKey, containerEl2) : null;
     }
     const containerEl = formRoot.querySelector(
       `[data-container="${currentPath}"]`
     );
-    return containerEl ? containerEl.querySelector(`[data-field-key="${lookupKey}"]`) : null;
+    return containerEl ? findOwnField(containerEl, lookupKey, containerEl) : null;
   }
   /**
    * Apply enableIf show/hide logic to a single field wrapper.
    * Extracted to reduce cyclomatic complexity of checkElements.
    */
-  applyEnableIfVisibility(element, wrapper, currentPath, fullPath, formData) {
+  applyEnableIfVisibility(element, wrapper, domPath, dataPath, fullDomPath, formData) {
     try {
       const scope = element.enableIf.scope ?? "relative";
-      const containerData = scope === "relative" && currentPath ? getValueByPath(formData, currentPath) : void 0;
+      const containerData = scope === "relative" && dataPath ? getValueByPath(formData, dataPath) : void 0;
       const shouldEnable = evaluateEnableCondition(
         element.enableIf,
         formData,
@@ -11857,10 +11907,12 @@ var FormBuilderInstance = class {
       );
       const isCurrentlyDisabled = wrapper.getAttribute("data-conditionally-disabled") === "true";
       if (shouldEnable && isCurrentlyDisabled) {
-        const containerPrefill = currentPath ? getValueByPath(formData, currentPath) : formData;
+        const containerPrefill = dataPath ? getValueByPath(formData, dataPath) : formData;
         const prefillContext = containerPrefill && typeof containerPrefill === "object" ? containerPrefill : {};
         const newWrapper = renderElement2(element, {
-          path: currentPath,
+          // DOM path: the re-rendered control's `name` must match the row it
+          // lives in, not the row's position in the extracted array.
+          path: domPath,
           prefill: prefillContext,
           formData,
           state: this.state,
@@ -11880,7 +11932,7 @@ var FormBuilderInstance = class {
       }
     } catch (error) {
       console.error(
-        `Error re-evaluating enableIf for field "${element.key ?? "<no key>"}" at path "${fullPath}":`,
+        `Error re-evaluating enableIf for field "${element.key ?? "<no key>"}" at path "${fullDomPath}":`,
         error
       );
     }
@@ -11892,44 +11944,46 @@ var FormBuilderInstance = class {
   reevaluateConditionalFields() {
     if (!this.state.schema || !this.state.formRoot) return;
     const formData = this.validateForm(true).data;
-    const checkElements = (elements, currentPath) => {
+    const checkElements = (elements, domPath, dataPath) => {
       elements.forEach((element) => {
-        const fullPath = currentPath ? `${currentPath}.${element.key ?? ""}` : element.key ?? "";
+        const key = element.key ?? "";
+        const fullDomPath = domPath ? `${domPath}.${key}` : key;
+        const fullDataPath = dataPath ? `${dataPath}.${key}` : key;
         if (element.enableIf) {
-          const fieldWrapper = this.findFieldWrapper(element, currentPath);
+          const fieldWrapper = this.findFieldWrapper(element, domPath);
           if (fieldWrapper) {
             this.applyEnableIfVisibility(
               element,
               fieldWrapper,
-              currentPath,
-              fullPath,
+              domPath,
+              dataPath,
+              fullDomPath,
               formData
             );
           }
         }
         if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
-          const containerData = element.key ? formData?.[element.key] : void 0;
+          const containerData = element.key ? getValueByPath(formData, fullDataPath) : void 0;
           if (Array.isArray(containerData)) {
-            const containerItems = this.state.formRoot.querySelectorAll(
-              `[data-container-item]`
+            const directItems = findDirectContainerRows(
+              this.state.formRoot,
+              fullDomPath
             );
-            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);
+            directItems.forEach((el, rowIndex) => {
+              const marker = el.getAttribute("data-container-item") || "";
+              checkElements(
+                element.elements,
+                marker,
+                `${fullDataPath}[${rowIndex}]`
+              );
             });
           } else {
-            checkElements(element.elements, fullPath);
+            checkElements(element.elements, fullDomPath, fullDataPath);
           }
         }
       });
     };
-    checkElements(this.state.schema.elements, "");
+    checkElements(this.state.schema.elements, "", "");
   }
   /**
    * Destroy instance and clean up resources