hs-uix 1.3.0 → 1.4.1

package/dist/form.mjs

@@ -59,6 +59,7 @@ var getEmptyValue = (field) => {
     case "datetime":
       return void 0;
     case "display":
+    case "slot":
     case "crmPropertyList":
     case "crmAssociationPropertyList":
       return void 0;
@@ -202,7 +203,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
+  if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -425,6 +426,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // explicit row layout array (overrides columns + columnWidth)
     sections,
     // FormBuilderSection[] — accordion field grouping
+    groups,
+    // Record<string, FormBuilderGroupOptions> — per-group rendering options keyed by group name
     gap = "sm",
     // gap between fields
     showRequiredIndicator = true,
@@ -634,7 +637,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
-      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
       if (field.type === "fieldGroup" && field.items && field.fields) {
         for (const item of field.items) {
           const subFields = field.fields(item);
@@ -668,9 +671,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const inputDebounceRef = useRef(/* @__PURE__ */ new Map());
   const rowKeyRef = useRef(/* @__PURE__ */ new WeakMap());
   const rowKeyCounterRef = useRef(0);
+  const controlledBaselineLockedRef = useRef(false);
   const initialSnapshot = 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;
@@ -682,6 +686,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const draftValuesRef = useRef(null);
   formValuesRef.current = formValues;
   formErrorsRef.current = formErrors;
+  const syncDirtyBaseline = useCallback((nextValues) => {
+    initialSnapshot.current = deepClone(nextValues || {});
+    prevAutoSaveValues.current = deepClone(nextValues || {});
+  }, []);
   const fieldByName = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const field of fields) {
@@ -758,6 +766,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
   }, []);
+  useEffect(() => {
+    if (values == null) return;
+    if (controlledBaselineLockedRef.current) return;
+    syncDirtyBaseline(values);
+  }, [values, syncDirtyBaseline]);
   const isDirty = useMemo(() => {
     return !deepEqual(formValues, initialSnapshot.current);
   }, [formValues]);
@@ -876,6 +889,50 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     },
     [fieldTypes]
   );
+  const setRepeaterSubFieldError = 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 = 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 = useCallback(
     (name, value) => {
       const field = fieldByName.get(name);
@@ -895,7 +952,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   );
   const validateVisibleFields = useCallback(
     (fieldSubset) => {
-      const toValidate = fieldSubset || visibleFields;
+      const toValidate = expandValidationFields(fieldSubset);
       const errors = {};
       let hasErrors = false;
       for (const field of toValidate) {
@@ -915,52 +972,54 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
+    [expandValidationFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
-  const runAsyncValidation = 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 = 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;
@@ -971,50 +1030,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 = useCallback(
+  const runAsyncValidation = 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 = 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);
       }
     },
-    [fieldByName, runAsyncValidation]
+    [runAsyncValidationTarget]
+  );
+  const triggerAsyncValidation = 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 = 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;
+    },
+    [visibleFields, formValues, setRepeaterSubFieldError, updateErrors]
   );
   const commitValues = useCallback(
     (nextValues) => {
       formValuesRef.current = nextValues;
       if (values != null) {
+        controlledBaselineLockedRef.current = true;
         if (onChange) onChange(nextValues);
       } else {
         setInternalValues(nextValues);
@@ -1032,7 +1169,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     [commitValues]
   );
   const handleFieldChange = useCallback(
-    (name, value) => {
+    (name, value, options = {}) => {
+      const { clearNestedErrors = true } = options;
       const newValues = { ...formValuesRef.current, [name]: value };
       const queue = [name];
       const visited = /* @__PURE__ */ new Set();
@@ -1073,9 +1211,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;
@@ -1144,7 +1284,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([
@@ -1159,6 +1299,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);
@@ -1166,7 +1307,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        if (f && (f.type === "display" || f.type === "slot" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
         rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
       }
       for (const f of fields) {
@@ -1198,7 +1339,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 = useCallback(async () => {
     if (!isMultiStep) return;
@@ -1210,7 +1351,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([
@@ -1235,7 +1376,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 = useCallback(() => {
     if (!isMultiStep) return;
     const prevStep = Math.max(currentStep - 1, 0);
@@ -1267,6 +1408,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);
@@ -1279,30 +1421,6 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       replaceErrors(errors);
     }
   }));
-  const setRepeaterSubFieldError = 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);
@@ -1317,7 +1435,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const isReadOnly = field.readOnly || formReadOnly;
     const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
-    if (field.type === "display") {
+    if (field.type === "display" || field.type === "slot") {
       if (field.render) {
         return field.render({
           values: formValues,
@@ -1782,12 +1900,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);
           }
@@ -1797,13 +1916,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__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ React.createElement(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,
@@ -1812,6 +1942,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;
@@ -1889,7 +2020,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const getFieldColSpan = (field) => {
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
-    if (columns > 1 && (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
+    if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
     return 1;
   };
   const getDependents = (parentField) => visibleFields.filter(
@@ -1914,7 +2045,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const colSpan = (field) => {
       if (field.colSpan != null) return Math.min(field.colSpan, cols);
       if (field.width === "full" && cols > 1) return cols;
-      if (cols > 1 && (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
+      if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
       return 1;
     };
     const flushRow = () => {
@@ -2078,13 +2209,23 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const elements = [];
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
-      if (i > 0) {
+      const opts = chunk.group && groups && groups[chunk.group] || {};
+      const showDivider = opts.showDivider !== false;
+      const showLabel = opts.showLabel !== false;
+      if (i > 0 && showDivider) {
         elements.push(/* @__PURE__ */ React.createElement(Divider, { key: `group-div-${i}` }));
       }
-      if (chunk.group) {
-        elements.push(
-          /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
-        );
+      if (chunk.group && showLabel) {
+        if (typeof opts.renderHeader === "function") {
+          const header = opts.renderHeader(chunk.group, chunk.fields, formValues);
+          if (header) elements.push(
+            /* @__PURE__ */ React.createElement(React.Fragment, { key: `group-header-${i}` }, header)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+          );
+        }
       }
       const chunkElements = renderFn(chunk.fields);
       if (Array.isArray(chunkElements)) {