hs-uix 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -502,28 +502,33 @@ var DataTable = ({
       return next;
     });
   }, []);
-  const flatRows = useMemo(() => {
-    if (!groupedData) return (serverSide ? data : sortedData).map((row) => ({ type: "data", row }));
-    const flat = [];
-    groupedData.forEach((group) => {
-      flat.push({ type: "group-header", group });
-      if (expandedGroups.has(group.key)) {
-        group.rows.forEach((row) => flat.push({ type: "data", row }));
-      }
-    });
-    return flat;
-  }, [groupedData, sortedData, data, serverSide, expandedGroups]);
-  const totalItems = serverSide ? totalCount || data.length : flatRows.length;
+  const datasetRows = useMemo(() => {
+    if (!groupedData) return serverSide ? data : sortedData;
+    return groupedData.flatMap((group) => group.rows);
+  }, [groupedData, sortedData, data, serverSide]);
+  const totalItems = serverSide ? totalCount || data.length : datasetRows.length;
   const pageCount = Math.ceil(totalItems / pageSize);
-  let displayRows;
-  if (serverSide) {
-    displayRows = groupBy ? flatRows : data.map((row) => ({ type: "data", row }));
-  } else {
-    displayRows = flatRows.slice(
+  const paginatedRows = useMemo(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
       (activePage - 1) * pageSize,
       activePage * pageSize
     );
-  }
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = useMemo(() => {
+    if (!groupedData) return paginatedRows.map((row) => ({ type: "data", row }));
+    const pageRows = new Set(paginatedRows);
+    const rows = [];
+    groupedData.forEach((group) => {
+      const groupPageRows = group.rows.filter((row) => pageRows.has(row));
+      if (groupPageRows.length === 0) return;
+      rows.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        groupPageRows.forEach((row) => rows.push({ type: "data", row }));
+      }
+    });
+    return rows;
+  }, [groupedData, paginatedRows, expandedGroups]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = useMemo(() => {
     const chips = [];
@@ -634,8 +639,8 @@ var DataTable = ({
     return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
   }, [serverSide, data, displayRows, rowIdField]);
   const allRowIds = useMemo(
-    () => flatRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null),
-    [flatRows, rowIdField]
+    () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
+    [datasetRows, rowIdField]
   );
   const handleSelectRow = useCallback((rowId, checked) => {
     const next = new Set(selectedIds);
@@ -682,19 +687,25 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = useCallback((row, field, value) => {
+  const commitEdit = useCallback((row, field, value, options = {}) => {
+    const { keepEditing = false } = options;
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
       const result = col.editValidate(value, row);
       if (result !== true && result !== void 0 && result !== null) {
         setEditError(typeof result === "string" ? result : "Invalid value");
-        return;
+        return false;
       }
     }
     if (onRowEdit) onRowEdit(row, field, value);
-    setEditingCell(null);
-    setEditValue(null);
+    if (!keepEditing) {
+      setEditingCell(null);
+      setEditValue(null);
+    } else {
+      setEditValue(value);
+    }
     setEditError(null);
+    return true;
   }, [onRowEdit, columns]);
   const renderEditControl = (col, row) => {
     const type = col.editType || "text";
@@ -753,12 +764,12 @@ var DataTable = ({
       case "datetime":
         return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }));
       case "toggle":
         return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
@@ -1771,9 +1782,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const inputDebounceRef = useRef2(/* @__PURE__ */ new Map());
   const rowKeyRef = useRef2(/* @__PURE__ */ new WeakMap());
   const rowKeyCounterRef = useRef2(0);
+  const controlledBaselineLockedRef = useRef2(false);
   const initialSnapshot = useRef2(null);
   if (initialSnapshot.current === null) {
-    initialSnapshot.current = deepClone(computeInitialValues());
+    initialSnapshot.current = deepClone(values != null ? values : computeInitialValues());
   }
   const formValues = values != null ? values : internalValues;
   const formErrors = controlledErrors != null ? controlledErrors : internalErrors;
@@ -1785,6 +1797,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const draftValuesRef = useRef2(null);
   formValuesRef.current = formValues;
   formErrorsRef.current = formErrors;
+  const syncDirtyBaseline = useCallback2((nextValues) => {
+    initialSnapshot.current = deepClone(nextValues || {});
+    prevAutoSaveValues.current = deepClone(nextValues || {});
+  }, []);
   const fieldByName = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     for (const field of fields) {
@@ -1861,6 +1877,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
   }, []);
+  useEffect2(() => {
+    if (values == null) return;
+    if (controlledBaselineLockedRef.current) return;
+    syncDirtyBaseline(values);
+  }, [values, syncDirtyBaseline]);
   const isDirty = useMemo2(() => {
     return !deepEqual(formValues, initialSnapshot.current);
   }, [formValues]);
@@ -1979,6 +2000,50 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     },
     [fieldTypes]
   );
+  const setRepeaterSubFieldError = useCallback2(
+    (fieldName, rowIdx, subFieldName, errorMessage) => {
+      const key = getRepeaterErrorKey(fieldName, rowIdx, subFieldName);
+      const merged = { ...formErrorsRef.current };
+      if (errorMessage) {
+        merged[key] = errorMessage;
+      } else {
+        delete merged[key];
+      }
+      const subErrors = Object.keys(merged).filter((k) => k.startsWith(`${fieldName}[`)).map((k) => {
+        const match = k.match(/\[(\d+)\]\./);
+        const row = match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
+        return { key: k, row };
+      }).sort((a, b) => a.row - b.row);
+      if (subErrors.length > 0) {
+        const first = subErrors[0];
+        merged[fieldName] = `Row ${first.row + 1}: ${merged[first.key]}`;
+      } else if (!merged[fieldName] || merged[fieldName].startsWith("Row ")) {
+        delete merged[fieldName];
+      }
+      replaceErrors(merged);
+    },
+    [replaceErrors]
+  );
+  const expandValidationFields = useCallback2(
+    (fieldSubset) => {
+      const toValidate = fieldSubset || visibleFields;
+      const expanded = [];
+      for (const field of toValidate) {
+        if (field.type === "fieldGroup" && field.items && field.fields) {
+          for (const item of field.items) {
+            for (const subField of field.fields(item)) {
+              if (subField.visible && !subField.visible(formValues)) continue;
+              expanded.push(subField);
+            }
+          }
+          continue;
+        }
+        expanded.push(field);
+      }
+      return expanded;
+    },
+    [visibleFields, formValues]
+  );
   const validateField = useCallback2(
     (name, value) => {
       const field = fieldByName.get(name);
@@ -1998,7 +2063,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   );
   const validateVisibleFields = useCallback2(
     (fieldSubset) => {
-      const toValidate = fieldSubset || visibleFields;
+      const toValidate = expandValidationFields(fieldSubset);
       const errors = {};
       let hasErrors = false;
       for (const field of toValidate) {
@@ -2018,52 +2083,54 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
+    [expandValidationFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
-  const runAsyncValidation = useCallback2(
-    (name, value) => {
-      const field = fieldByName.get(name);
-      if (!field || field.type === "repeater") return null;
-      const val = value != null ? value : formValues[name];
-      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false, messages: validationMessages });
-      const prevController = asyncAbortRef.current.get(name);
+  const runAsyncValidationTarget = useCallback2(
+    (target) => {
+      const { validationKey, field, value, allValues, applyError } = target || {};
+      if (!field || !validationKey || field.type === "repeater" || field.type === "fieldGroup") return null;
+      const syncError = runValidators(value, field, allValues, fieldTypes, {
+        includeCustomValidators: false,
+        messages: validationMessages
+      });
+      const prevController = asyncAbortRef.current.get(validationKey);
       if (prevController) prevController.abort();
-      asyncAbortRef.current.delete(name);
+      asyncAbortRef.current.delete(validationKey);
       setValidatingFields((prev) => {
-        if (!prev[name]) return prev;
+        if (!prev[validationKey]) return prev;
         const next = { ...prev };
-        delete next[name];
+        delete next[validationKey];
         return next;
       });
       if (syncError) return null;
-      const version = (asyncValidationVersionRef.current.get(name) || 0) + 1;
-      asyncValidationVersionRef.current.set(name, version);
+      const version = (asyncValidationVersionRef.current.get(validationKey) || 0) + 1;
+      asyncValidationVersionRef.current.set(validationKey, version);
       const controller = typeof AbortController !== "undefined" ? new AbortController() : null;
-      if (controller) asyncAbortRef.current.set(name, controller);
+      if (controller) asyncAbortRef.current.set(validationKey, controller);
       let asyncPromises;
       try {
         asyncPromises = collectAsyncValidatorPromises(
-          val,
+          value,
           field,
-          formValues,
+          allValues,
           controller ? { signal: controller.signal } : void 0
         );
       } catch (err) {
-        updateErrors({ [name]: (err == null ? void 0 : err.message) || "Validation failed" });
+        applyError((err == null ? void 0 : err.message) || "Validation failed");
         return null;
       }
       if (asyncPromises.length === 0) {
-        asyncAbortRef.current.delete(name);
+        asyncAbortRef.current.delete(validationKey);
         return null;
       }
       const validationPromise = Promise.all(asyncPromises).then(
         (results) => {
-          if (asyncValidationVersionRef.current.get(name) !== version) return;
-          asyncValidationRef.current.delete(name);
-          asyncAbortRef.current.delete(name);
+          if (asyncValidationVersionRef.current.get(validationKey) !== version) return;
+          asyncValidationRef.current.delete(validationKey);
+          asyncAbortRef.current.delete(validationKey);
           setValidatingFields((prev) => {
             const next = { ...prev };
-            delete next[name];
+            delete next[validationKey];
             return next;
           });
           let err = null;
@@ -2074,50 +2141,128 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
               break;
             }
           }
-          updateErrors({ [name]: err });
+          applyError(err);
         },
         (rejection) => {
-          if (asyncValidationVersionRef.current.get(name) !== version) return;
-          asyncValidationRef.current.delete(name);
-          asyncAbortRef.current.delete(name);
+          if (asyncValidationVersionRef.current.get(validationKey) !== version) return;
+          asyncValidationRef.current.delete(validationKey);
+          asyncAbortRef.current.delete(validationKey);
           setValidatingFields((prev) => {
             const next = { ...prev };
-            delete next[name];
+            delete next[validationKey];
             return next;
           });
           if (rejection && rejection.name === "AbortError") return;
-          updateErrors({ [name]: (rejection == null ? void 0 : rejection.message) || "Validation failed" });
+          applyError((rejection == null ? void 0 : rejection.message) || "Validation failed");
         }
       );
-      asyncValidationRef.current.set(name, validationPromise);
-      setValidatingFields((prev) => ({ ...prev, [name]: true }));
+      asyncValidationRef.current.set(validationKey, validationPromise);
+      setValidatingFields((prev) => ({ ...prev, [validationKey]: true }));
       return validationPromise;
     },
-    [fieldByName, formValues, fieldTypes, updateErrors]
+    [fieldTypes, validationMessages]
   );
-  const triggerAsyncValidation = useCallback2(
+  const runAsyncValidation = useCallback2(
     (name, value) => {
       const field = fieldByName.get(name);
-      if (!field || field.type === "repeater") return;
-      const debounceMs = field.validateDebounce;
+      if (!field || field.type === "repeater" || field.type === "fieldGroup") return null;
+      return runAsyncValidationTarget({
+        validationKey: name,
+        field,
+        value: value != null ? value : formValues[name],
+        allValues: formValues,
+        applyError: (errorMessage) => updateErrors({ [name]: errorMessage })
+      });
+    },
+    [fieldByName, formValues, runAsyncValidationTarget, updateErrors]
+  );
+  const triggerAsyncValidationTarget = useCallback2(
+    (target) => {
+      if (!(target == null ? void 0 : target.field) || !target.validationKey) return;
+      const debounceMs = target.field.validateDebounce;
       if (debounceMs && debounceMs > 0) {
-        const existing = debounceTimersRef.current.get(name);
+        const existing = debounceTimersRef.current.get(target.validationKey);
         if (existing) clearTimeout(existing);
         const timer = setTimeout(() => {
-          debounceTimersRef.current.delete(name);
-          runAsyncValidation(name, value);
+          debounceTimersRef.current.delete(target.validationKey);
+          runAsyncValidationTarget(target);
         }, debounceMs);
-        debounceTimersRef.current.set(name, timer);
+        debounceTimersRef.current.set(target.validationKey, timer);
       } else {
-        runAsyncValidation(name, value);
+        runAsyncValidationTarget(target);
       }
     },
-    [fieldByName, runAsyncValidation]
+    [runAsyncValidationTarget]
+  );
+  const triggerAsyncValidation = useCallback2(
+    (name, value) => {
+      const field = fieldByName.get(name);
+      if (!field || field.type === "repeater" || field.type === "fieldGroup") return;
+      triggerAsyncValidationTarget({
+        validationKey: name,
+        field,
+        value: value != null ? value : formValuesRef.current[name],
+        allValues: formValuesRef.current,
+        applyError: (errorMessage) => updateErrors({ [name]: errorMessage })
+      });
+    },
+    [fieldByName, triggerAsyncValidationTarget, updateErrors]
+  );
+  const getAsyncValidationTargets = useCallback2(
+    (fieldSubset) => {
+      const toValidate = fieldSubset || visibleFields;
+      const targets = [];
+      for (const field of toValidate) {
+        if (field.type === "fieldGroup" && field.items && field.fields) {
+          for (const item of field.items) {
+            for (const subField of field.fields(item)) {
+              if (subField.visible && !subField.visible(formValues)) continue;
+              targets.push({
+                validationKey: subField.name,
+                field: subField,
+                value: formValues[subField.name],
+                allValues: formValues,
+                applyError: (errorMessage) => updateErrors({ [subField.name]: errorMessage })
+              });
+            }
+          }
+          continue;
+        }
+        if (field.type === "repeater") {
+          const rows = Array.isArray(formValues[field.name]) ? formValues[field.name] : [];
+          const subFields = field.fields || [];
+          rows.forEach((row, rowIdx) => {
+            const rowValues = { ...formValues, [field.name]: rows };
+            subFields.forEach((subField) => {
+              if (subField.visible && !subField.visible(rowValues)) return;
+              targets.push({
+                validationKey: getRepeaterErrorKey(field.name, rowIdx, subField.name),
+                field: subField,
+                value: row == null ? void 0 : row[subField.name],
+                allValues: rowValues,
+                applyError: (errorMessage) => setRepeaterSubFieldError(field.name, rowIdx, subField.name, errorMessage)
+              });
+            });
+          });
+          continue;
+        }
+        targets.push({
+          validationKey: field.name,
+          field,
+          value: formValues[field.name],
+          allValues: formValues,
+          applyError: (errorMessage) => updateErrors({ [field.name]: errorMessage })
+        });
+      }
+      return targets;
+    },
+    [visibleFields, formValues, setRepeaterSubFieldError, updateErrors]
   );
   const commitValues = useCallback2(
     (nextValues) => {
       formValuesRef.current = nextValues;
       if (values != null) {
+        controlledBaselineLockedRef.current = true;
         if (onChange) onChange(nextValues);
       } else {
         setInternalValues(nextValues);
@@ -2135,7 +2280,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     [commitValues]
   );
   const handleFieldChange = useCallback2(
-    (name, value) => {
+    (name, value, options = {}) => {
+      const { clearNestedErrors = true } = options;
       const newValues = { ...formValuesRef.current, [name]: value };
       const queue = [name];
       const visited = /* @__PURE__ */ new Set();
@@ -2176,9 +2322,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (formErrorsRef.current[name] != null) {
         clearedErrors[name] = null;
       }
-      for (const key of Object.keys(formErrorsRef.current)) {
-        if (key.startsWith(`${name}[`)) {
-          clearedErrors[key] = null;
+      if (clearNestedErrors) {
+        for (const key of Object.keys(formErrorsRef.current)) {
+          if (key.startsWith(`${name}[`)) {
+            clearedErrors[key] = null;
+          }
         }
       }
       draftValuesRef.current = newValues;
@@ -2247,7 +2395,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           replaceErrors(errors);
           return;
         }
-        const asyncSubmitValidations = allVisibleFields.map((field) => runAsyncValidation(field.name, formValues[field.name])).filter(Boolean);
+        const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
         if (asyncSubmitValidations.length > 0 || asyncValidationRef.current.size > 0) {
           const pendingValidations = [
             .../* @__PURE__ */ new Set([
@@ -2262,6 +2410,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const reset = () => {
         const fresh = computeInitialValues();
         if (values == null) setInternalValues(fresh);
+        controlledBaselineLockedRef.current = false;
         replaceErrors({});
         initialSnapshot.current = deepClone(fresh);
         prevAutoSaveValues.current = deepClone(fresh);
@@ -2301,7 +2450,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, runAsyncValidation]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
   );
   const handleNext = useCallback2(async () => {
     if (!isMultiStep) return;
@@ -2313,7 +2462,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         replaceErrors({ ...formErrorsRef.current, ...errors });
         return;
       }
-      const asyncStepValidations = stepFields.map((field) => runAsyncValidation(field.name, formValues[field.name])).filter(Boolean);
+      const asyncStepValidations = getAsyncValidationTargets(stepFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
       if (asyncStepValidations.length > 0 || asyncValidationRef.current.size > 0) {
         const pendingValidations = [
           .../* @__PURE__ */ new Set([
@@ -2338,7 +2487,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     } else {
       setInternalStep(nextStep);
     }
-  }, [isMultiStep, validateStepOnNext, steps, currentStep, formValues, validateVisibleFields, controlledStep, onStepChange, replaceErrors, allVisibleFields, runAsyncValidation]);
+  }, [isMultiStep, validateStepOnNext, steps, currentStep, formValues, validateVisibleFields, controlledStep, onStepChange, replaceErrors, allVisibleFields, getAsyncValidationTargets, runAsyncValidationTarget]);
   const handleBack = useCallback2(() => {
     if (!isMultiStep) return;
     const prevStep = Math.max(currentStep - 1, 0);
@@ -2370,6 +2519,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     reset: () => {
       const fresh = computeInitialValues();
       if (values == null) setInternalValues(fresh);
+      controlledBaselineLockedRef.current = false;
       replaceErrors({});
       initialSnapshot.current = deepClone(fresh);
       prevAutoSaveValues.current = deepClone(fresh);
@@ -2382,30 +2532,6 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       replaceErrors(errors);
     }
   }));
-  const setRepeaterSubFieldError = useCallback2(
-    (fieldName, rowIdx, subFieldName, errorMessage) => {
-      const key = getRepeaterErrorKey(fieldName, rowIdx, subFieldName);
-      const merged = { ...formErrorsRef.current };
-      if (errorMessage) {
-        merged[key] = errorMessage;
-      } else {
-        delete merged[key];
-      }
-      const subErrors = Object.keys(merged).filter((k) => k.startsWith(`${fieldName}[`)).map((k) => {
-        const match = k.match(/\[(\d+)\]\./);
-        const row = match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
-        return { key: k, row };
-      }).sort((a, b) => a.row - b.row);
-      if (subErrors.length > 0) {
-        const first = subErrors[0];
-        merged[fieldName] = `Row ${first.row + 1}: ${merged[first.key]}`;
-      } else if (!merged[fieldName] || merged[fieldName].startsWith("Row ")) {
-        delete merged[fieldName];
-      }
-      replaceErrors(merged);
-    },
-    [replaceErrors]
-  );
   const renderField = (field) => {
     const fieldError = formErrors[field.name] || null;
     const rendered = renderFieldInner(field);
@@ -2885,12 +3011,13 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const rowValues = { ...formValues, [field.name]: nextRows };
           const err = runValidators(subValue, subField, rowValues, fieldTypes, { messages: validationMessages });
           setRepeaterSubFieldError(field.name, rowIdx, subField.name, err);
+          return err;
         };
         const handleSubFieldChange = (rowIdx, subField, subValue) => {
           const updated = rows.map(
             (row, i) => i === rowIdx ? { ...row, [subField.name]: subValue } : row
           );
-          handleFieldChange(field.name, updated);
+          handleFieldChange(field.name, updated, { clearNestedErrors: false });
           if (validateOnChange) {
             validateSubField(rowIdx, subField, subValue, updated);
           }
@@ -2900,13 +3027,24 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const nextRows = rows.map(
             (row, i) => i === rowIdx ? { ...row, [subField.name]: subValue } : row
           );
-          validateSubField(rowIdx, subField, subValue, nextRows);
+          const err = validateSubField(rowIdx, subField, subValue, nextRows);
+          if (err) return;
+          const validationKey = getRepeaterErrorKey(field.name, rowIdx, subField.name);
+          const rowValues = { ...formValues, [field.name]: nextRows };
+          triggerAsyncValidationTarget({
+            validationKey,
+            field: subField,
+            value: subValue,
+            allValues: rowValues,
+            applyError: (errorMessage) => setRepeaterSubFieldError(field.name, rowIdx, subField.name, errorMessage)
+          });
         };
         return /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ React2.createElement(Text2, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ React2.createElement(Flex2, { key: getRowKey(field.name, row, rowIdx), direction: "row", gap: "xs", align: "end" }, subFields.map((sf) => {
           const sfValue = row[sf.name];
           const sfLabel = rowIdx === 0 ? sf.label : void 0;
           const sfOptions = resolveOptions(sf, { ...formValues, [field.name]: rows });
           const sfError = formErrors[getRepeaterErrorKey(field.name, rowIdx, sf.name)] || null;
+          const validationKey = getRepeaterErrorKey(field.name, rowIdx, sf.name);
           const sfProps = {
             name: `${field.name}-${rowIdx}-${sf.name}`,
             label: sfLabel,
@@ -2915,6 +3053,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
+            ...validatingFields[validationKey] ? { loading: true } : {},
             ...sf.fieldProps || {}
           };
           let sfElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hs-uix",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Production-ready UI components for HubSpot UI Extensions — DataTable, FormBuilder, and more",
   "license": "MIT",
   "main": "./dist/index.js",