hs-uix 1.2.1 → 1.2.2

package/dist/form.js

@@ -509,6 +509,118 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
+  if (process.env.NODE_ENV !== "production") {
+    const KNOWN_FIELD_PROPS = /* @__PURE__ */ new Set([
+      "name",
+      "type",
+      "label",
+      "description",
+      "placeholder",
+      "tooltip",
+      "required",
+      "readOnly",
+      "disabled",
+      "defaultValue",
+      "fieldProps",
+      "colSpan",
+      "width",
+      "visible",
+      "dependsOn",
+      "dependsOnConfig",
+      "group",
+      "debounce",
+      "pattern",
+      "patternMessage",
+      "minLength",
+      "maxLength",
+      "min",
+      "max",
+      "validate",
+      "validators",
+      "validateDebounce",
+      "useDefaultValidators",
+      "transformIn",
+      "transformOut",
+      "onFieldChange",
+      "onInput",
+      "onBlur",
+      "options",
+      "variant",
+      "inline",
+      "render",
+      "fields",
+      "items",
+      "showItemLabel",
+      "columns",
+      "repeaterProps",
+      "size",
+      "labelDisplay",
+      "textChecked",
+      "textUnchecked",
+      "rows",
+      "cols",
+      "resize",
+      "stepSize",
+      "precision",
+      "formatStyle",
+      "minValueReachedTooltip",
+      "maxValueReachedTooltip",
+      "currency",
+      "format",
+      "timezone",
+      "clearButtonLabel",
+      "todayButtonLabel",
+      "minValidationMessage",
+      "maxValidationMessage",
+      "interval",
+      "properties",
+      "direction",
+      "objectId",
+      "objectTypeId",
+      "associationLabels",
+      "filters",
+      "sort"
+    ]);
+    const FIELD_SUGGESTIONS = {
+      fullWidth: 'Use width: "full" or colSpan instead',
+      title: "Use label instead",
+      maxColumns: "maxColumns is a FormBuilder prop, not a field prop"
+    };
+    const KNOWN_SECTION_PROPS = /* @__PURE__ */ new Set([
+      "id",
+      "label",
+      "fields",
+      "defaultOpen",
+      "info",
+      "renderBefore",
+      "renderAfter"
+    ]);
+    const SECTION_SUGGESTIONS = {
+      title: "Use label instead",
+      name: "Use id instead",
+      open: "Use defaultOpen instead"
+    };
+    for (const field of fields) {
+      for (const key of Object.keys(field)) {
+        if (!KNOWN_FIELD_PROPS.has(key)) {
+          const suggestion = FIELD_SUGGESTIONS[key];
+          const hint = suggestion ? ` ${suggestion}.` : "";
+          console.warn(`[hs-uix] Warning: Field "${field.name}" has unknown prop "${key}".${hint}`);
+        }
+      }
+    }
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        for (const key of Object.keys(sec)) {
+          if (!KNOWN_SECTION_PROPS.has(key)) {
+            const suggestion = SECTION_SUGGESTIONS[key];
+            const hint = suggestion ? ` ${suggestion}.` : "";
+            console.warn(`[hs-uix] Warning: Section "${sec.id || "(unnamed)"}" has unknown prop "${key}".${hint}`);
+          }
+        }
+      }
+    }
+  }
   const computeInitialValues = () => {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
@@ -1199,7 +1311,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     if (field.type === "display") {
       if (field.render) {
         return field.render({
+          values: formValues,
           allValues: formValues,
+          // deprecated — use `values`
           setFieldValue: (name, value) => handleFieldChange(name, value),
           setFieldError: (name, message) => updateErrors({ [name]: message })
         });
@@ -1347,7 +1461,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         value: fieldValue,
         onChange: fieldOnChange,
         error: hasError,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const plugin = fieldTypes && fieldTypes[field.type];
@@ -1357,7 +1473,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         onChange: fieldOnChange,
         error: hasError,
         field,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const commonProps = {
@@ -1781,13 +1899,21 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
+    const gridColumnWidth = Math.floor(100 / columns);
     const flushRow = () => {
       if (currentRow.length === 0) return;
+      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
       const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
       const remainder = columns - totalSpan;
-      elements.push(
-        /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: remainder }))
-      );
+      if (allUniform) {
+        elements.push(
+          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: `spacer-${i}` })))
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: remainder }))
+        );
+      }
       currentRow = [];
       currentRowSpan = 0;
     };

package/dist/form.mjs

@@ -513,6 +513,118 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
+  if (process.env.NODE_ENV !== "production") {
+    const KNOWN_FIELD_PROPS = /* @__PURE__ */ new Set([
+      "name",
+      "type",
+      "label",
+      "description",
+      "placeholder",
+      "tooltip",
+      "required",
+      "readOnly",
+      "disabled",
+      "defaultValue",
+      "fieldProps",
+      "colSpan",
+      "width",
+      "visible",
+      "dependsOn",
+      "dependsOnConfig",
+      "group",
+      "debounce",
+      "pattern",
+      "patternMessage",
+      "minLength",
+      "maxLength",
+      "min",
+      "max",
+      "validate",
+      "validators",
+      "validateDebounce",
+      "useDefaultValidators",
+      "transformIn",
+      "transformOut",
+      "onFieldChange",
+      "onInput",
+      "onBlur",
+      "options",
+      "variant",
+      "inline",
+      "render",
+      "fields",
+      "items",
+      "showItemLabel",
+      "columns",
+      "repeaterProps",
+      "size",
+      "labelDisplay",
+      "textChecked",
+      "textUnchecked",
+      "rows",
+      "cols",
+      "resize",
+      "stepSize",
+      "precision",
+      "formatStyle",
+      "minValueReachedTooltip",
+      "maxValueReachedTooltip",
+      "currency",
+      "format",
+      "timezone",
+      "clearButtonLabel",
+      "todayButtonLabel",
+      "minValidationMessage",
+      "maxValidationMessage",
+      "interval",
+      "properties",
+      "direction",
+      "objectId",
+      "objectTypeId",
+      "associationLabels",
+      "filters",
+      "sort"
+    ]);
+    const FIELD_SUGGESTIONS = {
+      fullWidth: 'Use width: "full" or colSpan instead',
+      title: "Use label instead",
+      maxColumns: "maxColumns is a FormBuilder prop, not a field prop"
+    };
+    const KNOWN_SECTION_PROPS = /* @__PURE__ */ new Set([
+      "id",
+      "label",
+      "fields",
+      "defaultOpen",
+      "info",
+      "renderBefore",
+      "renderAfter"
+    ]);
+    const SECTION_SUGGESTIONS = {
+      title: "Use label instead",
+      name: "Use id instead",
+      open: "Use defaultOpen instead"
+    };
+    for (const field of fields) {
+      for (const key of Object.keys(field)) {
+        if (!KNOWN_FIELD_PROPS.has(key)) {
+          const suggestion = FIELD_SUGGESTIONS[key];
+          const hint = suggestion ? ` ${suggestion}.` : "";
+          console.warn(`[hs-uix] Warning: Field "${field.name}" has unknown prop "${key}".${hint}`);
+        }
+      }
+    }
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        for (const key of Object.keys(sec)) {
+          if (!KNOWN_SECTION_PROPS.has(key)) {
+            const suggestion = SECTION_SUGGESTIONS[key];
+            const hint = suggestion ? ` ${suggestion}.` : "";
+            console.warn(`[hs-uix] Warning: Section "${sec.id || "(unnamed)"}" has unknown prop "${key}".${hint}`);
+          }
+        }
+      }
+    }
+  }
   const computeInitialValues = () => {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
@@ -1203,7 +1315,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (field.type === "display") {
       if (field.render) {
         return field.render({
+          values: formValues,
           allValues: formValues,
+          // deprecated — use `values`
           setFieldValue: (name, value) => handleFieldChange(name, value),
           setFieldError: (name, message) => updateErrors({ [name]: message })
         });
@@ -1351,7 +1465,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         value: fieldValue,
         onChange: fieldOnChange,
         error: hasError,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const plugin = fieldTypes && fieldTypes[field.type];
@@ -1361,7 +1477,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         onChange: fieldOnChange,
         error: hasError,
         field,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const commonProps = {
@@ -1785,13 +1903,21 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
+    const gridColumnWidth = Math.floor(100 / columns);
     const flushRow = () => {
       if (currentRow.length === 0) return;
+      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
       const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
       const remainder = columns - totalSpan;
-      elements.push(
-        /* @__PURE__ */ React.createElement(Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React.createElement(Box, { flex: remainder }))
-      );
+      if (allUniform) {
+        elements.push(
+          /* @__PURE__ */ React.createElement(AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(React.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ React.createElement(Box, { key: `spacer-${i}` })))
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ React.createElement(Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React.createElement(Box, { flex: remainder }))
+        );
+      }
       currentRow = [];
       currentRowSpan = 0;
     };

package/dist/index.js

@@ -1580,6 +1580,118 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     }
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
+  if (process.env.NODE_ENV !== "production") {
+    const KNOWN_FIELD_PROPS = /* @__PURE__ */ new Set([
+      "name",
+      "type",
+      "label",
+      "description",
+      "placeholder",
+      "tooltip",
+      "required",
+      "readOnly",
+      "disabled",
+      "defaultValue",
+      "fieldProps",
+      "colSpan",
+      "width",
+      "visible",
+      "dependsOn",
+      "dependsOnConfig",
+      "group",
+      "debounce",
+      "pattern",
+      "patternMessage",
+      "minLength",
+      "maxLength",
+      "min",
+      "max",
+      "validate",
+      "validators",
+      "validateDebounce",
+      "useDefaultValidators",
+      "transformIn",
+      "transformOut",
+      "onFieldChange",
+      "onInput",
+      "onBlur",
+      "options",
+      "variant",
+      "inline",
+      "render",
+      "fields",
+      "items",
+      "showItemLabel",
+      "columns",
+      "repeaterProps",
+      "size",
+      "labelDisplay",
+      "textChecked",
+      "textUnchecked",
+      "rows",
+      "cols",
+      "resize",
+      "stepSize",
+      "precision",
+      "formatStyle",
+      "minValueReachedTooltip",
+      "maxValueReachedTooltip",
+      "currency",
+      "format",
+      "timezone",
+      "clearButtonLabel",
+      "todayButtonLabel",
+      "minValidationMessage",
+      "maxValidationMessage",
+      "interval",
+      "properties",
+      "direction",
+      "objectId",
+      "objectTypeId",
+      "associationLabels",
+      "filters",
+      "sort"
+    ]);
+    const FIELD_SUGGESTIONS = {
+      fullWidth: 'Use width: "full" or colSpan instead',
+      title: "Use label instead",
+      maxColumns: "maxColumns is a FormBuilder prop, not a field prop"
+    };
+    const KNOWN_SECTION_PROPS = /* @__PURE__ */ new Set([
+      "id",
+      "label",
+      "fields",
+      "defaultOpen",
+      "info",
+      "renderBefore",
+      "renderAfter"
+    ]);
+    const SECTION_SUGGESTIONS = {
+      title: "Use label instead",
+      name: "Use id instead",
+      open: "Use defaultOpen instead"
+    };
+    for (const field of fields) {
+      for (const key of Object.keys(field)) {
+        if (!KNOWN_FIELD_PROPS.has(key)) {
+          const suggestion = FIELD_SUGGESTIONS[key];
+          const hint = suggestion ? ` ${suggestion}.` : "";
+          console.warn(`[hs-uix] Warning: Field "${field.name}" has unknown prop "${key}".${hint}`);
+        }
+      }
+    }
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        for (const key of Object.keys(sec)) {
+          if (!KNOWN_SECTION_PROPS.has(key)) {
+            const suggestion = SECTION_SUGGESTIONS[key];
+            const hint = suggestion ? ` ${suggestion}.` : "";
+            console.warn(`[hs-uix] Warning: Section "${sec.id || "(unnamed)"}" has unknown prop "${key}".${hint}`);
+          }
+        }
+      }
+    }
+  }
   const computeInitialValues = () => {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
@@ -2270,7 +2382,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     if (field.type === "display") {
       if (field.render) {
         return field.render({
+          values: formValues,
           allValues: formValues,
+          // deprecated — use `values`
           setFieldValue: (name, value) => handleFieldChange(name, value),
           setFieldError: (name, message) => updateErrors({ [name]: message })
         });
@@ -2418,7 +2532,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         value: fieldValue,
         onChange: fieldOnChange,
         error: hasError,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const plugin = fieldTypes && fieldTypes[field.type];
@@ -2428,7 +2544,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         onChange: fieldOnChange,
         error: hasError,
         field,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const commonProps = {
@@ -2852,13 +2970,21 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
+    const gridColumnWidth = Math.floor(100 / columns);
     const flushRow = () => {
       if (currentRow.length === 0) return;
+      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
       const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
       const remainder = columns - totalSpan;
-      elements.push(
-        /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: remainder }))
-      );
+      if (allUniform) {
+        elements.push(
+          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: `spacer-${i}` })))
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: remainder }))
+        );
+      }
       currentRow = [];
       currentRowSpan = 0;
     };

package/dist/index.mjs

@@ -1613,6 +1613,118 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
+  if (process.env.NODE_ENV !== "production") {
+    const KNOWN_FIELD_PROPS = /* @__PURE__ */ new Set([
+      "name",
+      "type",
+      "label",
+      "description",
+      "placeholder",
+      "tooltip",
+      "required",
+      "readOnly",
+      "disabled",
+      "defaultValue",
+      "fieldProps",
+      "colSpan",
+      "width",
+      "visible",
+      "dependsOn",
+      "dependsOnConfig",
+      "group",
+      "debounce",
+      "pattern",
+      "patternMessage",
+      "minLength",
+      "maxLength",
+      "min",
+      "max",
+      "validate",
+      "validators",
+      "validateDebounce",
+      "useDefaultValidators",
+      "transformIn",
+      "transformOut",
+      "onFieldChange",
+      "onInput",
+      "onBlur",
+      "options",
+      "variant",
+      "inline",
+      "render",
+      "fields",
+      "items",
+      "showItemLabel",
+      "columns",
+      "repeaterProps",
+      "size",
+      "labelDisplay",
+      "textChecked",
+      "textUnchecked",
+      "rows",
+      "cols",
+      "resize",
+      "stepSize",
+      "precision",
+      "formatStyle",
+      "minValueReachedTooltip",
+      "maxValueReachedTooltip",
+      "currency",
+      "format",
+      "timezone",
+      "clearButtonLabel",
+      "todayButtonLabel",
+      "minValidationMessage",
+      "maxValidationMessage",
+      "interval",
+      "properties",
+      "direction",
+      "objectId",
+      "objectTypeId",
+      "associationLabels",
+      "filters",
+      "sort"
+    ]);
+    const FIELD_SUGGESTIONS = {
+      fullWidth: 'Use width: "full" or colSpan instead',
+      title: "Use label instead",
+      maxColumns: "maxColumns is a FormBuilder prop, not a field prop"
+    };
+    const KNOWN_SECTION_PROPS = /* @__PURE__ */ new Set([
+      "id",
+      "label",
+      "fields",
+      "defaultOpen",
+      "info",
+      "renderBefore",
+      "renderAfter"
+    ]);
+    const SECTION_SUGGESTIONS = {
+      title: "Use label instead",
+      name: "Use id instead",
+      open: "Use defaultOpen instead"
+    };
+    for (const field of fields) {
+      for (const key of Object.keys(field)) {
+        if (!KNOWN_FIELD_PROPS.has(key)) {
+          const suggestion = FIELD_SUGGESTIONS[key];
+          const hint = suggestion ? ` ${suggestion}.` : "";
+          console.warn(`[hs-uix] Warning: Field "${field.name}" has unknown prop "${key}".${hint}`);
+        }
+      }
+    }
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        for (const key of Object.keys(sec)) {
+          if (!KNOWN_SECTION_PROPS.has(key)) {
+            const suggestion = SECTION_SUGGESTIONS[key];
+            const hint = suggestion ? ` ${suggestion}.` : "";
+            console.warn(`[hs-uix] Warning: Section "${sec.id || "(unnamed)"}" has unknown prop "${key}".${hint}`);
+          }
+        }
+      }
+    }
+  }
   const computeInitialValues = () => {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
@@ -2303,7 +2415,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (field.type === "display") {
       if (field.render) {
         return field.render({
+          values: formValues,
           allValues: formValues,
+          // deprecated — use `values`
           setFieldValue: (name, value) => handleFieldChange(name, value),
           setFieldError: (name, message) => updateErrors({ [name]: message })
         });
@@ -2451,7 +2565,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         value: fieldValue,
         onChange: fieldOnChange,
         error: hasError,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const plugin = fieldTypes && fieldTypes[field.type];
@@ -2461,7 +2577,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         onChange: fieldOnChange,
         error: hasError,
         field,
+        values: formValues,
         allValues: formValues
+        // deprecated — use `values`
       });
     }
     const commonProps = {
@@ -2885,13 +3003,21 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
+    const gridColumnWidth = Math.floor(100 / columns);
     const flushRow = () => {
       if (currentRow.length === 0) return;
+      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
       const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
       const remainder = columns - totalSpan;
-      elements.push(
-        /* @__PURE__ */ React2.createElement(Flex2, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(Box2, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React2.createElement(Box2, { flex: remainder }))
-      );
+      if (allUniform) {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ React2.createElement(Box2, { key: `spacer-${i}` })))
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ React2.createElement(Flex2, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(Box2, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React2.createElement(Box2, { flex: remainder }))
+        );
+      }
       currentRow = [];
       currentRowSpan = 0;
     };

package/package.json

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