@dmitryvim/form-builder 0.5.2 → 0.5.4

package/dist/cjs/index.cjs

@@ -19,6 +19,69 @@ 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 == null ? void 0 : ctx.inheritedReadonly) === true;
+}
+function isPlainObject(obj) {
+  return obj && typeof obj === "object" && obj.constructor === Object;
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+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 JSON.stringify(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) {
@@ -191,6 +254,65 @@ function validateSchema(schema) {
       }
     }
   }
+  function validateCountBounds(element, elementPath, errors2) {
+    var _a, _b;
+    const el = element;
+    if (el.type === "group") {
+      if (!isPlainObject(el.repeat)) return;
+      checkBounds(
+        elementPath,
+        (_a = el.repeat) == null ? void 0 : _a.min,
+        (_b = el.repeat) == null ? void 0 : _b.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 != null ? 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}]`;
@@ -200,6 +322,15 @@ function validateSchema(schema) {
       if (!element.key && element.type !== "markdown") {
         errors.push(`${elementPath}: missing key`);
       }
+      validateCountBounds(element, elementPath, errors);
+      if (element.type === "number" && "decimals" in element) {
+        const decimals = element.decimals;
+        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
+          errors.push(
+            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
+          );
+        }
+      }
       if (element.type === "markdown") {
         const content = element.content;
         if (typeof content !== "string") {
@@ -280,71 +411,6 @@ function validateSchema(schema) {
   return errors;
 }
 
-// src/utils/helpers.ts
-function isElementReadonly(element, state, ctx) {
-  return element.readonly === true || state.config.readonly === true || (ctx == null ? void 0 : 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/enable-conditions.ts
 function getValueByPath(data, path) {
   if (!data || typeof data !== "object") {
@@ -898,7 +964,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     overflow-wrap: anywhere;
   `;
   textInput.name = pathKey;
-  textInput.placeholder = (_a = element.placeholder) != null ? _a : "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
+  textInput.placeholder = (_a = element.placeholder) != null ? _a : t("placeholderText", state);
   textInput.value = ctx.prefill[element.key] || element.default || "";
   textInput.readOnly = readonly;
   applySingleLineMode(textInput);
@@ -998,6 +1064,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       rem.setAttribute("aria-label", t("removeElement", state));
       rem.innerHTML = BIN_ICON_SVG;
       rem.onclick = () => {
+        var _a2;
         const chips = list.querySelectorAll(".fb-chip");
         const idx = Array.prototype.indexOf.call(chips, chip);
         if (idx < 0) return;
@@ -1011,6 +1078,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         updateIndices();
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       };
       chip.appendChild(rem);
     }
@@ -1031,10 +1099,12 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "text",
       () => {
+        var _a2;
         values.push(element.default || "");
         addChip(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1151,7 +1221,7 @@ function validateTextElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = (_c = input == null ? void 0 : input.value) != null ? _c : "";
     if (!skipValidation && element.required && val === "") {
       const msg = t("required", context.state);
@@ -1315,6 +1385,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         removeBtn.className = "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
         removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -1324,6 +1395,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1339,10 +1411,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "textarea",
       () => {
+        var _a2;
         values.push(element.default || "");
         addTextareaItem(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1628,6 +1702,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
         removeBtn.className = "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
         removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -1637,6 +1712,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1652,10 +1728,12 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "number",
       () => {
+        var _a2;
         values.push(element.default || "");
         addNumberItem(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1671,7 +1749,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   updateRemoveButtons();
 }
 function validateNumberElement(element, key, context) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const errors = [];
   const { scopeRoot, skipValidation } = context;
   const markValidity = (input, errorMessage) => {
@@ -1731,7 +1809,7 @@ function validateNumberElement(element, key, context) {
     );
     const values = [];
     inputs.forEach((input, index) => {
-      var _a2, _b2, _c2;
+      var _a2;
       const raw = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
       if (raw === "") {
         values.push(null);
@@ -1747,8 +1825,7 @@ function validateNumberElement(element, key, context) {
         return;
       }
       validateNumberInput(input, v, `${key}[${index}]`);
-      const d = Number.isInteger((_b2 = element.decimals) != null ? _b2 : 0) ? (_c2 = element.decimals) != null ? _c2 : 0 : 0;
-      values.push(Number(v.toFixed(d)));
+      values.push(applyDecimals(v, element.decimals));
     });
     if (!skipValidation) {
       const { state } = context;
@@ -1767,7 +1844,7 @@ function validateNumberElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const raw = (_c = input == null ? void 0 : input.value) != null ? _c : "";
     const { state } = context;
     if (!skipValidation && element.required && raw === "") {
@@ -1788,10 +1865,13 @@ function validateNumberElement(element, key, context) {
       return { value: null, errors };
     }
     validateNumberInput(input, v, key);
-    const d = Number.isInteger((_d = element.decimals) != null ? _d : 0) ? (_e = element.decimals) != null ? _e : 0 : 0;
-    return { value: Number(v.toFixed(d)), errors };
+    return { value: applyDecimals(v, element.decimals), errors };
   }
 }
+function applyDecimals(v, decimals) {
+  if (!Number.isInteger(decimals) || decimals < 0) return v;
+  return Number(v.toFixed(decimals));
+}
 function updateNumberField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
   if (element.multiple) {
@@ -1938,6 +2018,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
         removeBtn.className = "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
         removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
             values.splice(currentIndex, 1);
@@ -1945,6 +2026,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1960,12 +2042,13 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "select",
       () => {
-        var _a2, _b2;
+        var _a2, _b2, _c2;
         const defaultValue = element.default || ((_b2 = (_a2 = element.options) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.value) || "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        (_c2 = ctx.instance) == null ? void 0 : _c2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2055,7 +2138,7 @@ function validateSelectElement(element, key, context) {
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
-      `[name$="${key}"]`
+      `[name="${key}"]`
     );
     const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
     if (!skipValidation && element.required && val === "") {
@@ -2380,6 +2463,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
           removeBtn.style.backgroundColor = "transparent";
         });
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -2389,6 +2473,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -2404,12 +2489,13 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "switcher",
       () => {
-        var _a2, _b2;
+        var _a2, _b2, _c2;
         const defaultValue = element.default || ((_b2 = (_a2 = element.options) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.value) || "";
         values.push(defaultValue);
         addSwitcherItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        (_c2 = ctx.instance) == null ? void 0 : _c2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2508,7 +2594,7 @@ function validateSwitcherElement(element, key, context) {
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
-      `input[type="hidden"][name$="${key}"]`
+      `input[type="hidden"][name="${key}"]`
     );
     const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
     if (!skipValidation && element.required && val === "") {
@@ -5604,7 +5690,7 @@ function validateSingleFile(element, key, context) {
   const { scopeRoot, skipValidation, state } = context;
   const errors = [];
   const input = scopeRoot.querySelector(
-    `input[name$="${key}"][type="hidden"]`
+    `input[name="${key}"][type="hidden"]`
   );
   const rid = (_a = input == null ? void 0 : input.value) != null ? _a : "";
   if (!skipValidation && element.required && rid === "") {
@@ -6028,6 +6114,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
           removeBtn.style.backgroundColor = "transparent";
         });
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -6037,6 +6124,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6052,11 +6140,13 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "colour",
       () => {
+        var _a2;
         const defaultColour = element.default || "#000000";
         values.push(defaultColour);
         addColourItem(defaultColour);
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6490,6 +6580,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
           removeBtn.style.backgroundColor = "transparent";
         });
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -6499,6 +6590,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6514,10 +6606,12 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "slider",
       () => {
+        var _a2;
         values.push(defaultValue);
         addSliderItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6788,6 +6882,8 @@ function extractRootFormData(formRoot) {
           if (input.checked) {
             data[fieldName] = input.value;
           }
+        } else if (input.dataset.hiddenField) {
+          data[fieldName] = deserializeHiddenValue(input.value);
         } else {
           data[fieldName] = input.value;
         }
@@ -6878,11 +6974,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;
@@ -6905,7 +7004,7 @@ function mountRemoveButton(item, onRemove, state) {
   item.classList.add("fb-row-removable");
   item.insertBefore(rem, item.firstChild);
 }
-function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+function renderMultipleContainerElement(element, ctx, wrapper, pathKey) {
   var _a, _b, _c, _d;
   const state = ctx.state;
   const containerIsReadonly = isElementReadonly(element, state, ctx);
@@ -6936,9 +7035,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   );
   const countItems = () => directRows().length;
   const handleRemoveItem = (item) => {
+    var _a2;
     if (countItems() <= min) return;
     item.remove();
     updateAddButton();
+    (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
   };
   const createContainerItem = (idx, rowPrefill, formData) => {
     const subCtx = {
@@ -6972,11 +7073,17 @@ 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 = () => {
+    var _a2;
     if (countItems() >= max) return;
     const item = createContainerItem(
       takeRowIndex(),
@@ -6991,6 +7098,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     }
     updateAddButton();
+    (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
   };
   let slideAddTile = null;
   let slideAddUpdate = null;
@@ -7138,7 +7246,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;
         }
       });
@@ -7180,7 +7288,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;
         }
       }
@@ -7200,15 +7308,18 @@ function updateContainerField(element, fieldPath, value, context) {
       );
       return;
     }
+    const rows = findDirectContainerRows(scopeRoot, fieldPath);
     value.forEach((itemValue, index) => {
-      if (isPlainObject(itemValue)) {
+      var _a;
+      const rowPath = (_a = rows[index]) == null ? void 0 : _a.getAttribute("data-container-item");
+      if (isPlainObject(itemValue) && rowPath) {
         element.elements.forEach((childElement) => {
-          var _a, _b;
+          var _a2, _b;
           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 = (_a = richChild.textKey) != null ? _a : "text";
+            const textKey = (_a2 = richChild.textKey) != null ? _a2 : "text";
             const filesKey = (_b = richChild.filesKey) != null ? _b : "files";
             const containerValue = itemValue;
             const compositeValue = {};
@@ -7228,10 +7339,9 @@ function updateContainerField(element, fieldPath, value, context) {
         });
       }
     });
-    const existingContainers = findDirectContainerRows(scopeRoot, 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 {
@@ -7290,7 +7400,7 @@ function renderGroupElement(element, ctx, wrapper, pathKey) {
     maxCount: (_b = element.repeat) == null ? void 0 : _b.max
   };
   if (containerElement.multiple) {
-    renderMultipleContainerElement(containerElement, ctx, wrapper);
+    renderMultipleContainerElement(containerElement, ctx, wrapper, pathKey);
   } else {
     renderSingleContainerElement(containerElement, ctx, wrapper, pathKey);
   }
@@ -10358,15 +10468,19 @@ var componentRegistry = {
 function getComponentOperations(elementType) {
   return componentRegistry[elementType] || null;
 }
+function resolveOperations(element) {
+  const isHiddenField = element.type !== "markdown" && (element.type === "hidden" || Boolean(element.hidden));
+  return isHiddenField ? componentRegistry.hidden : getComponentOperations(element.type);
+}
 function validateElementWithComponent(element, key, context) {
-  const ops = getComponentOperations(element.type);
+  const ops = resolveOperations(element);
   if (ops && ops.validate) {
     return ops.validate(element, key, context);
   }
   return null;
 }
 function updateElementWithComponent(element, fieldPath, value, context) {
-  const ops = getComponentOperations(element.type);
+  const ops = resolveOperations(element);
   if (ops && ops.update) {
     ops.update(element, fieldPath, value, context);
     return true;
@@ -10378,6 +10492,10 @@ function updateElementWithComponent(element, fieldPath, value, context) {
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
   if (!tooltip) return;
+  if (!button.isConnected) {
+    tooltip.remove();
+    return;
+  }
   const isCurrentlyVisible = !tooltip.classList.contains("hidden");
   document.querySelectorAll('[id^="tooltip-"]').forEach((t2) => {
     t2.classList.add("hidden");
@@ -10468,6 +10586,8 @@ function extractDOMValue(fieldPath, formRoot) {
         `[name="${fieldPath}"]:checked`
       );
       return checked ? checked.value : void 0;
+    } else if (input.dataset.hiddenField) {
+      return deserializeHiddenValue(input.value);
     } else {
       return input.value;
     }
@@ -10606,7 +10726,7 @@ function createFieldLabel(element) {
   }
   return title;
 }
-function createInfoButton(element) {
+function createInfoButton(element, state) {
   const infoBtn = document.createElement("button");
   infoBtn.type = "button";
   infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
@@ -10618,6 +10738,7 @@ function createInfoButton(element) {
   tooltip.style.position = "fixed";
   tooltip.textContent = element.description || element.hint || "Field information";
   document.body.appendChild(tooltip);
+  state.tooltipElements.add(tooltip);
   infoBtn.onclick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10625,7 +10746,7 @@ function createInfoButton(element) {
   };
   return infoBtn;
 }
-function createLabelContainer(element) {
+function createLabelContainer(element, state) {
   const label = document.createElement("div");
   label.className = "flex items-center";
   label.style.marginBottom = "var(--fb-label-margin-bottom, 2px)";
@@ -10633,7 +10754,7 @@ function createLabelContainer(element) {
   const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
-    const infoBtn = createInfoButton(element);
+    const infoBtn = createInfoButton(element, state);
     label.appendChild(infoBtn);
   }
   return label;
@@ -10708,7 +10829,7 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
       break;
     case "container":
       if (isMultiple) {
-        renderMultipleContainerElement(element, ctx, wrapper);
+        renderMultipleContainerElement(element, ctx, wrapper, pathKey);
       } else {
         renderSingleContainerElement(element, ctx, wrapper, pathKey);
       }
@@ -10761,7 +10882,7 @@ function renderElement2(element, ctx) {
   wrapper.setAttribute("data-fb-width", element.width || "full");
   const ops = getComponentOperations(element.type);
   if (!(ops == null ? void 0 : ops.ownsLabel)) {
-    const label = createLabelContainer(element);
+    const label = createLabelContainer(element, ctx.state);
     wrapper.appendChild(label);
   }
   const pathKey = pathJoin(ctx.path, element.key);
@@ -10800,6 +10921,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",
@@ -10873,6 +10996,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",
@@ -10975,7 +11100,8 @@ function createInstanceState(config) {
     prefill: {},
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
     syntheticElementIdCounter: 0,
-    enableIfObservers: /* @__PURE__ */ new Set()
+    enableIfObservers: /* @__PURE__ */ new Set(),
+    tooltipElements: /* @__PURE__ */ new Set()
   };
 }
 function generateInstanceId() {
@@ -11262,6 +11388,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();
@@ -11343,7 +11481,11 @@ var FormBuilderInstance = class {
   /**
    * Trigger onChange callbacks with debouncing
    * @param fieldPath - Optional field path for field-specific change events
-   * @param fieldValue - Optional field value for field-specific change events
+   * @param fieldValue - Optional field value for field-specific change events.
+   *   When omitted while fieldPath is given, the value is read from the
+   *   freshly extracted form data at debounce time — used by structural
+   *   changes (multi-item add/remove), where the handler has no cheap
+   *   current value but the array is trivially derivable after the fact.
    */
   triggerOnChange(fieldPath, fieldValue) {
     if (this.state.config.readonly) return;
@@ -11356,12 +11498,49 @@ var FormBuilderInstance = class {
       if (this.state.config.onChange) {
         this.state.config.onChange(formData);
       }
-      if (this.state.config.onFieldChange && fieldPath !== void 0 && fieldValue !== void 0) {
-        this.state.config.onFieldChange(fieldPath, fieldValue, formData);
+      if (this.state.config.onFieldChange && fieldPath !== void 0) {
+        const resolvedValue = fieldValue !== void 0 ? fieldValue : this.resolveDomPathValue(formData.data, fieldPath);
+        this.state.config.onFieldChange(fieldPath, resolvedValue, formData);
       }
       this.state.debounceTimer = null;
     }, this.state.config.debounceMs);
   }
+  /**
+   * Resolve a DOM field path against the extracted form data.
+   *
+   * A plain getValueByPath is wrong for paths inside a multiple container:
+   * row markers keep gaps after a deletion (`s[2]` may be the first surviving
+   * row) while the extracted array is re-packed contiguously — the naive
+   * lookup would read a different row, or nothing. Each `[N]` segment is
+   * mapped from its marker to the row's position among the container's
+   * rendered rows, the same DOM order extraction used to build the array.
+   * A bracketed segment that is not a container marker (a multi-value leaf
+   * like `tags[1]`, whose indices are contiguous) falls back to the index.
+   */
+  resolveDomPathValue(data, domPath) {
+    let cur = data;
+    let domPrefix = "";
+    for (const seg of domPath.split(".")) {
+      if (cur === null || cur === void 0) return void 0;
+      const marker = seg.match(/^(.+)\[(\d+)\]$/);
+      if (!marker) {
+        domPrefix = domPrefix ? `${domPrefix}.${seg}` : seg;
+        cur = cur[seg];
+        continue;
+      }
+      const key = marker[1];
+      domPrefix = domPrefix ? `${domPrefix}.${key}` : key;
+      const arr = cur[key];
+      if (!Array.isArray(arr)) return void 0;
+      const rows = this.state.formRoot ? findDirectContainerRows(this.state.formRoot, domPrefix) : [];
+      domPrefix = `${domPrefix}[${marker[2]}]`;
+      const pos = rows.findIndex(
+        (row) => row.getAttribute("data-container-item") === domPrefix
+      );
+      cur = pos >= 0 ? arr[pos] : arr[parseInt(marker[2], 10)];
+    }
+    return cur;
+  }
   /**
    * Register an external action that will be displayed as a button
    * External actions can be form-level (no related_field) or field-level (with related_field)
@@ -11401,21 +11580,10 @@ var FormBuilderInstance = class {
    */
   findFormElementByFieldPath(fieldPath) {
     if (!this.state.formRoot) return null;
-    let element = this.state.formRoot.querySelector(
+    const element = this.state.formRoot.querySelector(
       `[name="${fieldPath}"]`
     );
     if (element) return element;
-    const variations = [
-      fieldPath,
-      fieldPath.replace(/\[(\d+)\]/g, "[$1]"),
-      fieldPath.replace(/\./g, "[") + "]".repeat((fieldPath.match(/\./g) || []).length)
-    ];
-    for (const variation of variations) {
-      element = this.state.formRoot.querySelector(
-        `[name="${variation}"]`
-      );
-      if (element) return element;
-    }
     const schemaElement = this.findSchemaElement(fieldPath);
     if (!schemaElement) return null;
     const fieldWrappers = this.state.formRoot.querySelectorAll(".fb-field-wrapper");
@@ -11665,6 +11833,7 @@ var FormBuilderInstance = class {
       return;
     }
     this.disconnectEnableIfObservers();
+    this.removeTooltipElements();
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
@@ -11750,7 +11919,6 @@ var FormBuilderInstance = class {
     };
     setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
-      var _a;
       if (element.enableIf) {
         try {
           const shouldEnable = evaluateEnableCondition(element.enableIf, data);
@@ -11767,24 +11935,12 @@ 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}"]`
-        );
-        const raw = (_a = hiddenInput == null ? void 0 : hiddenInput.value) != null ? _a : "";
-        if (raw !== "") {
-          data[element.key] = deserializeHiddenValue(raw);
-        } else {
-          data[element.key] = element.default !== void 0 ? element.default : null;
-        }
-      } 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 if (element.key) {
-          data[element.key] = result.value;
-        }
+      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 if (element.key) {
+        data[element.key] = result.value;
       }
     });
     return {
@@ -11988,29 +12144,29 @@ 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) {
     var _a, _b, _c, _d;
     try {
       const scope = (_a = element.enableIf.scope) != null ? _a : "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,
@@ -12018,10 +12174,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,
@@ -12041,7 +12199,7 @@ var FormBuilderInstance = class {
       }
     } catch (error) {
       console.error(
-        `Error re-evaluating enableIf for field "${(_d = element.key) != null ? _d : "<no key>"}" at path "${fullPath}":`,
+        `Error re-evaluating enableIf for field "${(_d = element.key) != null ? _d : "<no key>"}" at path "${fullDomPath}":`,
         error
       );
     }
@@ -12053,40 +12211,47 @@ 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) => {
-        var _a, _b;
-        const fullPath = currentPath ? `${currentPath}.${(_a = element.key) != null ? _a : ""}` : (_b = element.key) != null ? _b : "";
+        var _a;
+        const key = (_a = element.key) != null ? _a : "";
+        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 ? getValueByPath(formData, fullPath) : void 0;
+          const containerData = element.key ? getValueByPath(formData, fullDataPath) : void 0;
           if (Array.isArray(containerData)) {
             const directItems = findDirectContainerRows(
               this.state.formRoot,
-              fullPath
+              fullDomPath
             );
-            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
@@ -12098,6 +12263,7 @@ var FormBuilderInstance = class {
       this.state.debounceTimer = null;
     }
     this.disconnectEnableIfObservers();
+    this.removeTooltipElements();
     this.state.resourceIndex.clear();
     if (this.state.formRoot) {
       clear(this.state.formRoot);
@@ -12115,6 +12281,12 @@ var FormBuilderInstance = class {
     }
     this.state.enableIfObservers.clear();
   }
+  removeTooltipElements() {
+    for (const tooltip of this.state.tooltipElements) {
+      tooltip.remove();
+    }
+    this.state.tooltipElements.clear();
+  }
 };
 
 // src/index.ts