hs-uix 1.4.0 → 1.4.1

package/dist/form.js

@@ -667,9 +667,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const inputDebounceRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const rowKeyRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
   const rowKeyCounterRef = (0, import_react.useRef)(0);
+  const controlledBaselineLockedRef = (0, import_react.useRef)(false);
   const initialSnapshot = (0, import_react.useRef)(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;
@@ -681,6 +682,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const draftValuesRef = (0, import_react.useRef)(null);
   formValuesRef.current = formValues;
   formErrorsRef.current = formErrors;
+  const syncDirtyBaseline = (0, import_react.useCallback)((nextValues) => {
+    initialSnapshot.current = deepClone(nextValues || {});
+    prevAutoSaveValues.current = deepClone(nextValues || {});
+  }, []);
   const fieldByName = (0, import_react.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const field of fields) {
@@ -757,6 +762,11 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
   }, []);
+  (0, import_react.useEffect)(() => {
+    if (values == null) return;
+    if (controlledBaselineLockedRef.current) return;
+    syncDirtyBaseline(values);
+  }, [values, syncDirtyBaseline]);
   const isDirty = (0, import_react.useMemo)(() => {
     return !deepEqual(formValues, initialSnapshot.current);
   }, [formValues]);
@@ -875,6 +885,50 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     },
     [fieldTypes]
   );
+  const setRepeaterSubFieldError = (0, import_react.useCallback)(
+    (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 = (0, import_react.useCallback)(
+    (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 = (0, import_react.useCallback)(
     (name, value) => {
       const field = fieldByName.get(name);
@@ -894,7 +948,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   );
   const validateVisibleFields = (0, import_react.useCallback)(
     (fieldSubset) => {
-      const toValidate = fieldSubset || visibleFields;
+      const toValidate = expandValidationFields(fieldSubset);
       const errors = {};
       let hasErrors = false;
       for (const field of toValidate) {
@@ -914,52 +968,54 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
+    [expandValidationFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
-  const runAsyncValidation = (0, import_react.useCallback)(
-    (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 = (0, import_react.useCallback)(
+    (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;
@@ -970,50 +1026,128 @@ var FormBuilder = (0, import_react.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 = (0, import_react.useCallback)(
+  const runAsyncValidation = (0, import_react.useCallback)(
     (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 = (0, import_react.useCallback)(
+    (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);
+      }
+    },
+    [runAsyncValidationTarget]
+  );
+  const triggerAsyncValidation = (0, import_react.useCallback)(
+    (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 = (0, import_react.useCallback)(
+    (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;
     },
-    [fieldByName, runAsyncValidation]
+    [visibleFields, formValues, setRepeaterSubFieldError, updateErrors]
   );
   const commitValues = (0, import_react.useCallback)(
     (nextValues) => {
       formValuesRef.current = nextValues;
       if (values != null) {
+        controlledBaselineLockedRef.current = true;
         if (onChange) onChange(nextValues);
       } else {
         setInternalValues(nextValues);
@@ -1031,7 +1165,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     [commitValues]
   );
   const handleFieldChange = (0, import_react.useCallback)(
-    (name, value) => {
+    (name, value, options = {}) => {
+      const { clearNestedErrors = true } = options;
       const newValues = { ...formValuesRef.current, [name]: value };
       const queue = [name];
       const visited = /* @__PURE__ */ new Set();
@@ -1072,9 +1207,11 @@ var FormBuilder = (0, import_react.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;
@@ -1143,7 +1280,7 @@ var FormBuilder = (0, import_react.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([
@@ -1158,6 +1295,7 @@ var FormBuilder = (0, import_react.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);
@@ -1197,7 +1335,7 @@ var FormBuilder = (0, import_react.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 = (0, import_react.useCallback)(async () => {
     if (!isMultiStep) return;
@@ -1209,7 +1347,7 @@ var FormBuilder = (0, import_react.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([
@@ -1234,7 +1372,7 @@ var FormBuilder = (0, import_react.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 = (0, import_react.useCallback)(() => {
     if (!isMultiStep) return;
     const prevStep = Math.max(currentStep - 1, 0);
@@ -1266,6 +1404,7 @@ var FormBuilder = (0, import_react.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);
@@ -1278,30 +1417,6 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       replaceErrors(errors);
     }
   }));
-  const setRepeaterSubFieldError = (0, import_react.useCallback)(
-    (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);
@@ -1781,12 +1896,13 @@ var FormBuilder = (0, import_react.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);
           }
@@ -1796,13 +1912,24 @@ var FormBuilder = (0, import_react.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__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { 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,
@@ -1811,6 +1938,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
+            ...validatingFields[validationKey] ? { loading: true } : {},
             ...sf.fieldProps || {}
           };
           let sfElement;