hs-uix 1.6.4 → 1.6.5

package/dist/datatable.js

@@ -187,7 +187,7 @@ var DataTable = ({
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
   title,
-  // optional title shown above the table toolbar
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -657,8 +657,7 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
-  const showToolbarCount = showRowCount && !title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const showTitleCount = showRowCount && !!title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
   const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = (0, import_react.useCallback)((nextSet) => {
@@ -1009,7 +1008,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Heading, null, title), showTitleCount && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",

package/dist/datatable.mjs

@@ -10,7 +10,6 @@ import {
   EmptyState,
   ErrorState,
   Flex,
-  Heading,
   Icon,
   Input,
   Link,
@@ -184,7 +183,7 @@ var DataTable = ({
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
   title,
-  // optional title shown above the table toolbar
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -654,8 +653,7 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
-  const showToolbarCount = showRowCount && !title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const showTitleCount = showRowCount && !!title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
   const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = useCallback((nextSet) => {
@@ -1006,7 +1004,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Heading, null, title), showTitleCount && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",

package/dist/form.js

@@ -378,8 +378,12 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -528,6 +532,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -700,6 +705,17 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = (0, import_react.useState)(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const warnConfig = (0, import_react.useCallback)((message) => {
@@ -1280,10 +1296,35 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const handleSubmit = (0, import_react.useCallback)(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -1295,7 +1336,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -1341,7 +1385,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, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = (0, import_react.useCallback)(async () => {
     if (!isMultiStep) return;
@@ -1434,8 +1478,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -1478,8 +1523,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           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 || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -2276,13 +2322,16 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ import_react.default.createElement(
         import_ui_extensions.Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );

package/dist/form.mjs

@@ -382,8 +382,12 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -532,6 +536,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -704,6 +709,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = useState(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = useRef(/* @__PURE__ */ new Set());
   const warnConfig = useCallback((message) => {
@@ -1284,10 +1300,35 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const handleSubmit = useCallback(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -1299,7 +1340,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -1345,7 +1389,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, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = useCallback(async () => {
     if (!isMultiStep) return;
@@ -1438,8 +1482,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -1482,8 +1527,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           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 || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -2280,13 +2326,16 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ React.createElement(
         Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );

package/dist/index.js

@@ -218,7 +218,7 @@ var DataTable = ({
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
   title,
-  // optional title shown above the table toolbar
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -688,8 +688,7 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
-  const showToolbarCount = showRowCount && !title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const showTitleCount = showRowCount && !!title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
   const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = (0, import_react.useCallback)((nextSet) => {
@@ -1040,7 +1039,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Heading, null, title), showTitleCount && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
@@ -1519,8 +1518,12 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -1669,6 +1672,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -1841,6 +1845,17 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = (0, import_react2.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = (0, import_react2.useState)(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
   const warnConfig = (0, import_react2.useCallback)((message) => {
@@ -2421,10 +2436,35 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const handleSubmit = (0, import_react2.useCallback)(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -2436,7 +2476,10 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -2482,7 +2525,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = (0, import_react2.useCallback)(async () => {
     if (!isMultiStep) return;
@@ -2575,8 +2618,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -2619,8 +2663,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           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 || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -3417,13 +3462,16 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ import_react2.default.createElement(
         import_ui_extensions2.Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );

package/dist/index.mjs

@@ -10,7 +10,6 @@ import {
   EmptyState,
   ErrorState,
   Flex,
-  Heading,
   Icon,
   Input,
   Link,
@@ -184,7 +183,7 @@ var DataTable = ({
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
   title,
-  // optional title shown above the table toolbar
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -654,8 +653,7 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
-  const showToolbarCount = showRowCount && !title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const showTitleCount = showRowCount && !!title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
   const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = useCallback((nextSet) => {
@@ -1006,7 +1004,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Heading, null, title), showTitleCount && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
@@ -1525,8 +1523,12 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -1675,6 +1677,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -1847,6 +1850,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = useState2(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = useRef2(/* @__PURE__ */ new Set());
   const warnConfig = useCallback2((message) => {
@@ -2427,10 +2441,35 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const handleSubmit = useCallback2(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -2442,7 +2481,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -2488,7 +2530,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, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = useCallback2(async () => {
     if (!isMultiStep) return;
@@ -2581,8 +2623,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -2625,8 +2668,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           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 || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -3423,13 +3467,16 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ React2.createElement(
         Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );
@@ -5442,7 +5489,7 @@ var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
 
 // src/common-components/SectionHeader.js
 import React10 from "react";
-import { Flex as Flex6, Heading as Heading2, Text as Text5 } from "@hubspot/ui-extensions";
+import { Flex as Flex6, Heading, Text as Text5 } from "@hubspot/ui-extensions";
 var SectionHeader = ({
   title,
   description,
@@ -5453,7 +5500,7 @@ var SectionHeader = ({
 }) => {
   const body = [];
   if (title != null) {
-    body.push(React10.createElement(Heading2, { key: "title", as: titleAs }, title));
+    body.push(React10.createElement(Heading, { key: "title", as: titleAs }, title));
   }
   if (description != null) {
     body.push(

package/package.json

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