hs-uix 1.0.4 → 1.2.0

package/dist/form.js

@@ -132,7 +132,6 @@ var runDefaultFieldValidator = (value, field, allValues) => {
       if (!isTimeValueObject(value)) return `${errorPrefix} has an invalid time`;
       break;
     case "datetime": {
-      if (isDateValueObject(value)) break;
       if (!isPlainObject(value)) return `${errorPrefix} has an invalid date/time`;
       const hasDate = value.date !== void 0;
       const hasTime = value.time !== void 0;
@@ -198,12 +197,14 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 };
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
+  const msg = options.messages || {};
+  if (field.type === "display" || 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);
   if (isRequired && empty) {
-    return `${field.label} is required`;
+    const fn = msg.required || ((label) => `${label} is required`);
+    return typeof fn === "function" ? fn(field.label) : fn;
   }
   if (empty) return null;
   if (field.useDefaultValidators !== false) {
@@ -212,23 +213,27 @@ var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   }
   if (field.pattern && typeof value === "string") {
     if (!field.pattern.test(value)) {
-      return field.patternMessage || "Invalid format";
+      return field.patternMessage || msg.invalidFormat || "Invalid format";
     }
   }
   if (typeof value === "string") {
     if (field.minLength != null && value.length < field.minLength) {
-      return `Must be at least ${field.minLength} characters`;
+      const fn = msg.minLength || ((min) => `Must be at least ${min} characters`);
+      return typeof fn === "function" ? fn(field.minLength) : fn;
     }
     if (field.maxLength != null && value.length > field.maxLength) {
-      return `Must be no more than ${field.maxLength} characters`;
+      const fn = msg.maxLength || ((max) => `Must be no more than ${max} characters`);
+      return typeof fn === "function" ? fn(field.maxLength) : fn;
     }
   }
   if (typeof value === "number") {
     if (field.min != null && value < field.min) {
-      return `Must be at least ${field.min}`;
+      const fn = msg.minValue || ((min) => `Must be at least ${min}`);
+      return typeof fn === "function" ? fn(field.min) : fn;
     }
     if (field.max != null && value > field.max) {
-      return `Must be no more than ${field.max}`;
+      const fn = msg.maxValue || ((max) => `Must be no more than ${max}`);
+      return typeof fn === "function" ? fn(field.max) : fn;
     }
   }
   if (field.type === "date" && isDateValueObject(value)) {
@@ -340,6 +345,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // (values, { reset, rawValues }) => void | Promise
     transformValues,
     // (values) => values — reshape before submit
+    transformInitialValues,
+    // (rawInitialValues) => values — reshape raw data on load
     onBeforeSubmit,
     // (values) => boolean | Promise<boolean> — intercept submit
     onSubmitSuccess,
@@ -434,8 +441,18 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // string — warning alert when readOnly
     alerts,
     // { addAlert, readOnlyTitle, errorTitle, successTitle }
-    errors: controlledErrors
+    errors: controlledErrors,
     // controlled validation errors
+    showReadOnlyAlert = true,
+    // show warning Alert when readOnly is true
+    showInlineAlerts = true,
+    // show inline form-level error/success Alerts
+    renderReadOnlyAlert,
+    // (context: { title, message }) => ReactNode — custom readOnly alert renderer
+    renderFieldError,
+    // (error: string, field: object) => ReactNode — custom field error renderer
+    defaultCurrency = "USD"
+    // form-level default ISO 4217 currency code for currency fields
   } = props;
   const {
     onDirtyChange,
@@ -447,6 +464,23 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const cancelButtonLabel = (labels == null ? void 0 : labels.cancel) || "Cancel";
   const backButtonLabel = (labels == null ? void 0 : labels.back) || "Back";
   const nextButtonLabel = (labels == null ? void 0 : labels.next) || "Next";
+  const requiredMessage = (labels == null ? void 0 : labels.required) || ((label) => `${label} is required`);
+  const invalidFormatMessage = (labels == null ? void 0 : labels.invalidFormat) || "Invalid format";
+  const minLengthMessage = (labels == null ? void 0 : labels.minLength) || ((min) => `Must be at least ${min} characters`);
+  const maxLengthMessage = (labels == null ? void 0 : labels.maxLength) || ((max) => `Must be no more than ${max} characters`);
+  const minValueMessage = (labels == null ? void 0 : labels.minValue) || ((min) => `Must be at least ${min}`);
+  const maxValueMessage = (labels == null ? void 0 : labels.maxValue) || ((max) => `Must be no more than ${max}`);
+  const dependentPropertiesLabel = (labels == null ? void 0 : labels.dependentProperties) || "Dependent properties";
+  const repeaterAddLabel = (labels == null ? void 0 : labels.repeaterAdd) || "Add";
+  const repeaterRemoveLabel = (labels == null ? void 0 : labels.repeaterRemove) || "Remove";
+  const validationMessages = labels ? {
+    required: requiredMessage,
+    invalidFormat: invalidFormatMessage,
+    minLength: minLengthMessage,
+    maxLength: maxLengthMessage,
+    minValue: minValueMessage,
+    maxValue: maxValueMessage
+  } : void 0;
   const addAlert = alerts == null ? void 0 : alerts.addAlert;
   const readOnlyTitle = (alerts == null ? void 0 : alerts.readOnlyTitle) || "Read Only";
   const errorTitle = (alerts == null ? void 0 : alerts.errorTitle) || "Error";
@@ -476,12 +510,27 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
   const computeInitialValues = () => {
+    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 === "fieldGroup" && field.items && field.fields) {
+        for (const item of field.items) {
+          const subFields = field.fields(item);
+          for (const sf of subFields) {
+            const plugin2 = fieldTypes && fieldTypes[sf.type];
+            const emptyValue2 = plugin2 && plugin2.getEmptyValue ? plugin2.getEmptyValue() : getEmptyValue(sf);
+            let init2 = resolved && resolved[sf.name] !== void 0 ? resolved[sf.name] : sf.defaultValue !== void 0 ? sf.defaultValue : emptyValue2;
+            if (sf.transformIn) init2 = sf.transformIn(init2);
+            vals[sf.name] = init2;
+          }
+        }
+        continue;
+      }
       const plugin = fieldTypes && fieldTypes[field.type];
       const emptyValue = plugin && plugin.getEmptyValue ? plugin.getEmptyValue() : getEmptyValue(field);
-      const init = initialValues && initialValues[field.name] !== void 0 ? initialValues[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      let init = resolved && resolved[field.name] !== void 0 ? resolved[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      if (field.transformIn) init = field.transformIn(init);
       vals[field.name] = init;
     }
     return vals;
@@ -514,7 +563,14 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   formErrorsRef.current = formErrors;
   const fieldByName = (0, import_react.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const field of fields) map.set(field.name, field);
+    for (const field of fields) {
+      map.set(field.name, field);
+      if (field.type === "fieldGroup" && field.items && field.fields) {
+        for (const item of field.items) {
+          for (const sf of field.fields(item)) map.set(sf.name, sf);
+        }
+      }
+    }
     return map;
   }, [fields]);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
@@ -685,7 +741,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         const rowValues = { ...allValues, [field.name]: rows };
         subFields.forEach((subField) => {
           if (subField.visible && !subField.visible(rowValues)) return;
-          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes);
+          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes, { messages: validationMessages });
           if (!err) return;
           const key = getRepeaterErrorKey(field.name, rowIdx, subField.name);
           errors[key] = err;
@@ -712,9 +768,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         );
         return repeaterResult.errors[name] || null;
       }
-      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes);
+      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes, { messages: validationMessages });
     },
-    [fieldByName, formValues, validateRepeaterField, fieldTypes]
+    [fieldByName, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
   const validateVisibleFields = (0, import_react.useCallback)(
     (fieldSubset) => {
@@ -730,7 +786,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           }
           continue;
         }
-        const err = runValidators(formValues[field.name], field, formValues, fieldTypes);
+        const err = runValidators(formValues[field.name], field, formValues, fieldTypes, { messages: validationMessages });
         if (err) {
           errors[field.name] = err;
           hasErrors = true;
@@ -738,14 +794,14 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes]
+    [visibleFields, 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 });
+      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false, messages: validationMessages });
       const prevController = asyncAbortRef.current.get(name);
       if (prevController) prevController.abort();
       asyncAbortRef.current.delete(name);
@@ -936,23 +992,27 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   );
   const handleFieldInput = (0, import_react.useCallback)(
     (name, value) => {
+      handleFieldChange(name, value);
       if (!validateOnChange) return;
       const err = validateField(name, value);
       updateErrors({ [name]: err });
     },
-    [validateOnChange, validateField, updateErrors]
+    [validateOnChange, validateField, updateErrors, handleFieldChange]
   );
   const handleFieldBlur = (0, import_react.useCallback)(
     (name, value) => {
-      if (!validateOnBlur) return;
       const resolvedValue = value != null ? value : formValuesRef.current[name];
+      if (value != null && value !== formValuesRef.current[name]) {
+        handleFieldChange(name, value);
+      }
+      if (!validateOnBlur) return;
       const err = validateField(name, resolvedValue);
       updateErrors({ [name]: err });
       if (!err) {
         triggerAsyncValidation(name, resolvedValue);
       }
     },
-    [validateOnBlur, validateField, updateErrors, triggerAsyncValidation]
+    [validateOnBlur, validateField, updateErrors, triggerAsyncValidation, handleFieldChange]
   );
   const handleSubmit = (0, import_react.useCallback)(
     async (e) => {
@@ -985,8 +1045,17 @@ var FormBuilder = (0, import_react.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")) continue;
-        rawValues[key] = formValues[key];
+        if (f && (f.type === "display" || 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) {
+        if (f.type !== "fieldGroup" || !f.items || !f.fields) continue;
+        for (const item of f.items) {
+          for (const sf of f.fields(item)) {
+            if (formValues[sf.name] === void 0) continue;
+            rawValues[sf.name] = sf.transformOut ? sf.transformOut(formValues[sf.name]) : formValues[sf.name];
+          }
+        }
       }
       const submitValues = transformValues ? transformValues(rawValues) : rawValues;
       if (onBeforeSubmit) {
@@ -1114,6 +1183,12 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     [replaceErrors]
   );
   const renderField = (field) => {
+    const fieldError = formErrors[field.name] || null;
+    const rendered = renderFieldInner(field);
+    if (!renderFieldError || !fieldError) return rendered;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, rendered, renderFieldError(fieldError, field));
+  };
+  const renderFieldInner = (field) => {
     const fieldValue = formValues[field.name];
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
@@ -1123,10 +1198,125 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display") {
       if (field.render) {
-        return field.render({ allValues: formValues });
+        return field.render({
+          allValues: formValues,
+          setFieldValue: (name, value) => handleFieldChange(name, value),
+          setFieldError: (name, message) => updateErrors({ [name]: message })
+        });
       }
       return null;
     }
+    if (field.type === "fieldGroup") {
+      const items = field.items || [];
+      const fieldsFn = field.fields;
+      if (!fieldsFn) return null;
+      const groupColumns = field.columns || 1;
+      const showItemLabel = field.showItemLabel !== false;
+      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), field.description && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, field.description), items.map((item, itemIdx) => {
+        const subFields = fieldsFn(item);
+        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: item.key || itemIdx, direction: "row", gap: "xs", align: "end" }, showItemLabel && item.label && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1 }, itemIdx === 0 ? /* @__PURE__ */ import_react.default.createElement(
+          import_ui_extensions.Input,
+          {
+            name: `_fieldGroup-label-${field.name}-${itemIdx}`,
+            label: "\xA0",
+            value: item.label,
+            readOnly: true,
+            disabled: true
+          }
+        ) : /* @__PURE__ */ import_react.default.createElement(
+          import_ui_extensions.Input,
+          {
+            name: `_fieldGroup-label-${field.name}-${itemIdx}`,
+            value: item.label,
+            readOnly: true,
+            disabled: true
+          }
+        )), subFields.map((sf) => {
+          const sfValue = formValues[sf.name];
+          const sfError = formErrors[sf.name] || null;
+          const sfLabel = itemIdx === 0 ? sf.label : void 0;
+          const sfReadOnly = sf.readOnly || formReadOnly;
+          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
+          const sfProps = {
+            name: sf.name,
+            label: sfLabel,
+            placeholder: sf.placeholder,
+            description: itemIdx === 0 ? sf.description : void 0,
+            readOnly: sfReadOnly,
+            disabled: sfDisabled,
+            error: !!sfError,
+            validationMessage: sfError || void 0,
+            ...sf.fieldProps || {}
+          };
+          let sfElement;
+          switch (sf.type) {
+            case "select":
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.Select,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  options: resolveOptions(sf, formValues),
+                  onChange: sfOnChange
+                }
+              );
+              break;
+            case "number":
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.NumberInput,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  onChange: sfOnChange,
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+              break;
+            case "toggle":
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.Toggle,
+                {
+                  name: sf.name,
+                  label: sfLabel || sf.label,
+                  checked: !!sfValue,
+                  size: sf.size || "md",
+                  labelDisplay: sf.labelDisplay || "top",
+                  readonly: sfReadOnly,
+                  disabled: sfDisabled,
+                  onChange: sfOnChange,
+                  ...sf.fieldProps || {}
+                }
+              );
+              break;
+            case "time":
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.TimeInput,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  interval: sf.interval,
+                  onChange: sfOnChange,
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+              break;
+            default:
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.Input,
+                {
+                  ...sfProps,
+                  value: sfValue || "",
+                  onChange: sfOnChange,
+                  onInput: (v) => handleFieldInput(sf.name, v),
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+          }
+          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: sf.name, flex: 1 }, sfElement);
+        }));
+      }));
+    }
     if (field.type === "crmPropertyList") {
       return /* @__PURE__ */ import_react.default.createElement(
         import_crm.CrmPropertyList,
@@ -1180,7 +1370,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       readOnly: isReadOnly,
       disabled: isDisabled,
       error: hasError,
-      validationMessage: fieldError || void 0,
+      validationMessage: renderFieldError ? void 0 : fieldError || void 0,
       ...field.loading || validatingFields[field.name] ? { loading: true } : {},
       ...field.fieldProps || {}
     };
@@ -1250,7 +1440,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           import_ui_extensions.CurrencyInput,
           {
             ...commonProps,
-            currency: field.currency || "USD",
+            currency: field.currency || defaultCurrency,
             value: fieldValue,
             min: field.min,
             max: field.max,
@@ -1428,8 +1618,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         const renderRemoveControl = repeaterProps.renderRemove;
         const renderMoveUpControl = repeaterProps.renderMoveUp;
         const renderMoveDownControl = repeaterProps.renderMoveDown;
-        const addLabel = repeaterProps.addLabel || "Add";
-        const removeLabel = repeaterProps.removeLabel || "Remove";
+        const addLabel = repeaterProps.addLabel || repeaterAddLabel;
+        const removeLabel = repeaterProps.removeLabel || repeaterRemoveLabel;
         const moveUpLabel = repeaterProps.moveUpLabel || "Up";
         const moveDownLabel = repeaterProps.moveDownLabel || "Down";
         const canEditRows = !isReadOnly && !isDisabled;
@@ -1463,7 +1653,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         };
         const validateSubField = (rowIdx, subField, subValue, nextRows) => {
           const rowValues = { ...formValues, [field.name]: nextRows };
-          const err = runValidators(subValue, subField, rowValues, fieldTypes);
+          const err = runValidators(subValue, subField, rowValues, fieldTypes, { messages: validationMessages });
           setRepeaterSubFieldError(field.name, rowIdx, subField.name, err);
         };
         const handleSubFieldChange = (rowIdx, subField, subValue) => {
@@ -1581,7 +1771,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const renderDependentGroup = (parentField, dependents) => {
     const firstWithLabel = dependents.find((f) => getDependsOnLabel(f)) || dependents[0];
     const firstWithMessage = dependents.find((f) => getDependsOnMessage(f)) || dependents[0];
-    const groupLabel = getDependsOnLabel(firstWithLabel) || "Dependent properties";
+    const groupLabel = getDependsOnLabel(firstWithLabel) || dependentPropertiesLabel;
     const rawMessage = getDependsOnMessage(firstWithMessage);
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info" })))), renderFieldSubset(dependents)));
@@ -1671,38 +1861,19 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
     return elements;
   };
-  const renderLegacyLayout = (fieldSubset) => {
+  const renderSingleColumnLayout = (fieldSubset) => {
     const fieldList = fieldSubset || visibleFields;
-    const rows = [];
-    let i = 0;
-    while (i < fieldList.length) {
-      const field = fieldList[i];
-      if (field.width === "half" && i + 1 < fieldList.length && fieldList[i + 1].width === "half" && !getDependsOnName(field)) {
-        rows.push({ type: "pair", fields: [fieldList[i], fieldList[i + 1]] });
-        i += 2;
-      } else {
-        rows.push({ type: "single", field });
-        i++;
-      }
-    }
     const elements = [];
     const processedDeps = /* @__PURE__ */ new Set();
-    for (const row of rows) {
-      if (row.type === "pair") {
-        elements.push(
-          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: `pair-${row.fields[0].name}`, direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1 }, renderField(row.fields[0])), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1 }, renderField(row.fields[1])))
-        );
-      } else {
-        const field = row.field;
-        if (processedDeps.has(field.name)) continue;
-        elements.push(
-          /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: field.name }, renderField(field))
-        );
-        const dependents = getDependents(field);
-        if (dependents.length > 0) {
-          for (const dep of dependents) processedDeps.add(dep.name);
-          elements.push(renderDependentGroup(field, dependents));
-        }
+    for (const field of fieldList) {
+      if (processedDeps.has(field.name)) continue;
+      elements.push(
+        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: field.name }, renderField(field))
+      );
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        for (const dep of dependents) processedDeps.add(dep.name);
+        elements.push(renderDependentGroup(field, dependents));
       }
     }
     return elements;
@@ -1713,10 +1884,20 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     let batch = [];
     const flushBatch = () => {
       if (batch.length === 0) return;
-      const chunks = maxColumns ? Array.from({ length: Math.ceil(batch.length / maxColumns) }, (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)) : [batch];
-      for (const chunk of chunks) {
+      if (maxColumns) {
+        const chunks = Array.from(
+          { length: Math.ceil(batch.length / maxColumns) },
+          (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)
+        );
+        for (const chunk of chunks) {
+          const remainder = maxColumns - chunk.length;
+          elements.push(
+            /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: `ag-${chunk[0].name}`, direction: "row", gap }, chunk.map((f) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: f.name, flex: 1 }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: remainder }))
+          );
+        }
+      } else {
         elements.push(
-          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.AutoGrid, { key: `ag-${chunk[0].name}`, columnWidth, flexible: true, gap }, chunk.map((f) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: f.name }, renderField(f))))
+          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.AutoGrid, { key: `ag-${batch[0].name}`, columnWidth, flexible: true, gap }, batch.map((f) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: f.name }, renderField(f))))
         );
       }
       batch = [];
@@ -1775,7 +1956,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
     if (columns > 1) return renderGridLayout(fieldSubset);
-    return renderLegacyLayout(fieldSubset);
+    return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
     const hasSections = Array.isArray(sections) && sections.length > 0;
@@ -1788,7 +1969,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     for (const sec of sections) {
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
-      const accordionContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, renderFieldSubset(sectionFields));
+      const sectionContext = { values: formValues, errors: formErrors };
+      const accordionContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ import_react.default.createElement(
         import_ui_extensions.Accordion,
         {
@@ -1881,7 +2063,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       currentStep,
       stepNames: steps.map((s) => s.title)
     }
-  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage), !addAlert && formError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), !addAlert && formSuccess && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
+  ), showReadOnlyAlert && formReadOnly && readOnlyMessage && (renderReadOnlyAlert ? renderReadOnlyAlert({ title: readOnlyTitle, message: readOnlyMessage }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage)), showInlineAlerts && !addAlert && formError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), showInlineAlerts && !addAlert && formSuccess && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
     values: formValues,
     goNext: handleNext,
     goBack: handleBack,