hs-uix 1.6.4 → 1.7.0

package/dist/form.js

@@ -38,6 +38,9 @@ module.exports = __toCommonJS(form_exports);
 var import_react = __toESM(require("react"));
 var import_ui_extensions = require("@hubspot/ui-extensions");
 var import_crm = require("@hubspot/ui-extensions/crm");
+
+// packages/form/src/formValues.js
+var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
 var getEmptyValue = (field) => {
   switch (field.type) {
     case "toggle":
@@ -73,12 +76,6 @@ var isValueEmpty = (value, field) => {
   if ((field.type === "toggle" || field.type === "checkbox") && value === false) return true;
   return false;
 };
-var isPromise = (value) => value && typeof value.then === "function";
-var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
-var normalizeValidatorResult = (result) => {
-  if (result === true || result === void 0 || result === null || result === false) return null;
-  return String(result);
-};
 var isDateValueObject = (value) => isPlainObject(value) && Number.isInteger(value.year) && Number.isInteger(value.month) && Number.isInteger(value.date);
 var isTimeValueObject = (value) => isPlainObject(value) && Number.isInteger(value.hours) && Number.isInteger(value.minutes);
 var compareDateValues = (a, b) => {
@@ -90,6 +87,64 @@ var compareTimeValues = (a, b) => {
   if (a.hours !== b.hours) return a.hours - b.hours;
   return a.minutes - b.minutes;
 };
+var deepEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (a == null || b == null) return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+};
+var deepClone = (value) => {
+  if (Array.isArray(value)) return value.map(deepClone);
+  if (value instanceof Date) return new Date(value.getTime());
+  if (isPlainObject(value)) {
+    const next = {};
+    for (const key of Object.keys(value)) {
+      next[key] = deepClone(value[key]);
+    }
+    return next;
+  }
+  return value;
+};
+
+// packages/form/src/formValidation.js
+var isPromise = (value) => value && typeof value.then === "function";
+var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
+var normalizeValidatorResult = (result) => {
+  if (result === true || result === void 0 || result === null || result === false) return null;
+  return String(result);
+};
+var resolveRequired = (field, allValues) => {
+  if (typeof field.required === "function") return field.required(allValues);
+  return !!field.required;
+};
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
+var resolveOptions = (field, allValues) => {
+  if (typeof field.options === "function") return field.options(allValues);
+  return field.options || [];
+};
 var runDefaultFieldValidator = (value, field, allValues) => {
   const errorPrefix = field.label || field.name;
   switch (field.type) {
@@ -259,50 +314,53 @@ var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   }
   return null;
 };
-var resolveRequired = (field, allValues) => {
-  if (typeof field.required === "function") return field.required(allValues);
-  return !!field.required;
-};
-var resolveDisabled = (field, allValues) => {
-  if (typeof field.disabled === "function") return field.disabled(allValues);
-  return !!field.disabled;
-};
-var resolveOptions = (field, allValues) => {
-  if (typeof field.options === "function") return field.options(allValues);
-  return field.options || [];
-};
+
+// packages/form/src/formDependencies.js
 var getDependsOnName = (field) => field.dependsOnConfig && field.dependsOnConfig.field;
 var getDependsOnDisplay = (field) => field.dependsOnConfig && field.dependsOnConfig.display || "grouped";
 var getDependsOnLabel = (field) => field.dependsOnConfig && field.dependsOnConfig.label;
 var getDependsOnMessage = (field) => field.dependsOnConfig && field.dependsOnConfig.message;
-var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
-var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
-var deepEqual = (a, b) => {
-  if (Object.is(a, b)) return true;
-  if (typeof a !== typeof b) return false;
-  if (a == null || b == null) return false;
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!deepEqual(a[i], b[i])) return false;
-    }
-    return true;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
-  }
-  if (isPlainObject(a) && isPlainObject(b)) {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) return false;
-    for (const key of aKeys) {
-      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
-      if (!deepEqual(a[key], b[key])) return false;
-    }
-    return true;
+var resolveDependentCascade = ({ name, value, fields, values, getEmptyValueForField }) => {
+  const newValues = { ...values, [name]: value };
+  const queue = [name];
+  const visited = /* @__PURE__ */ new Set();
+  const changedDependents = [];
+  while (queue.length > 0) {
+    const current = queue.shift();
+    if (!current || visited.has(current)) continue;
+    visited.add(current);
+    fields.forEach((dep) => {
+      const parentName = getDependsOnName(dep);
+      if (parentName !== current || dep.name === current) return;
+      if (!dep.options) return;
+      const depOptions = resolveOptions(dep, newValues);
+      const depValue = newValues[dep.name];
+      if (depValue == null || depValue === "") return;
+      const validValues = new Set(depOptions.map((o) => o.value));
+      let nextDepValue = depValue;
+      let changed = false;
+      if (Array.isArray(depValue)) {
+        const filtered = depValue.filter((v) => validValues.has(v));
+        if (filtered.length !== depValue.length) {
+          nextDepValue = filtered;
+          changed = true;
+        }
+      } else if (!validValues.has(depValue)) {
+        nextDepValue = getEmptyValueForField(dep);
+        changed = true;
+      }
+      if (changed) {
+        newValues[dep.name] = nextDepValue;
+        queue.push(dep.name);
+        changedDependents.push(dep.name);
+      }
+    });
   }
-  return false;
+  return { newValues, changedDependents };
 };
+
+// packages/form/src/FormBuilder.jsx
+var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
 var fieldSetHasErrors = (errors, fields) => {
   if (!errors || !fields || fields.length === 0) return false;
   const names = new Set(fields.map((field) => field.name));
@@ -311,18 +369,6 @@ var fieldSetHasErrors = (errors, fields) => {
     return names.has(base);
   });
 };
-var deepClone = (value) => {
-  if (Array.isArray(value)) return value.map(deepClone);
-  if (value instanceof Date) return new Date(value.getTime());
-  if (isPlainObject(value)) {
-    const next = {};
-    for (const key of Object.keys(value)) {
-      next[key] = deepClone(value[key]);
-    }
-    return next;
-  }
-  return value;
-};
 var useFormPrefill = (properties, mapping) => {
   return (0, import_react.useMemo)(() => {
     if (!properties) return {};
@@ -378,8 +424,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 +578,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -700,6 +751,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) => {
@@ -1173,42 +1235,18 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const handleFieldChange = (0, import_react.useCallback)(
     (name, value, options = {}) => {
       const { clearNestedErrors = true } = options;
-      const newValues = { ...formValuesRef.current, [name]: value };
-      const queue = [name];
-      const visited = /* @__PURE__ */ new Set();
+      const { newValues, changedDependents } = resolveDependentCascade({
+        name,
+        value,
+        fields,
+        values: formValuesRef.current,
+        getEmptyValueForField: getFieldEmptyValue
+      });
       const clearedErrors = {};
-      while (queue.length > 0) {
-        const current = queue.shift();
-        if (!current || visited.has(current)) continue;
-        visited.add(current);
-        fields.forEach((dep) => {
-          const parentName = getDependsOnName(dep);
-          if (parentName !== current || dep.name === current) return;
-          if (!dep.options) return;
-          const depOptions = resolveOptions(dep, newValues);
-          const depValue = newValues[dep.name];
-          if (depValue == null || depValue === "") return;
-          const validValues = new Set(depOptions.map((o) => o.value));
-          let nextDepValue = depValue;
-          let changed = false;
-          if (Array.isArray(depValue)) {
-            const filtered = depValue.filter((v) => validValues.has(v));
-            if (filtered.length !== depValue.length) {
-              nextDepValue = filtered;
-              changed = true;
-            }
-          } else if (!validValues.has(depValue)) {
-            nextDepValue = getFieldEmptyValue(dep);
-            changed = true;
-          }
-          if (changed) {
-            newValues[dep.name] = nextDepValue;
-            queue.push(dep.name);
-            if (formErrorsRef.current[dep.name] != null) {
-              clearedErrors[dep.name] = null;
-            }
-          }
-        });
+      for (const depName of changedDependents) {
+        if (formErrorsRef.current[depName] != null) {
+          clearedErrors[depName] = null;
+        }
       }
       if (formErrorsRef.current[name] != null) {
         clearedErrors[name] = null;
@@ -1280,10 +1318,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 +1358,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 +1407,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 +1500,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 +1545,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,
@@ -1996,7 +2064,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
               );
           }
           return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: sf.name, flex: 1 }, sfElement);
-        }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "xs" }, canReorder && rowIdx > 0 && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && rowIdx < rows.length - 1 && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ import_react.default.createElement(
+        }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "xs" }, canReorder && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, disabled: rowIdx === 0, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", disabled: rowIdx === 0, onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, disabled: rowIdx === rows.length - 1, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", disabled: rowIdx === rows.length - 1, onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ import_react.default.createElement(
           import_ui_extensions.Button,
           {
             variant: "secondary",
@@ -2004,7 +2072,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             onClick: () => removeRow(rowIdx)
           },
           removeLabel
-        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { onClick: addRow }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "flush" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "add" }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, repeaterErrorMessage));
+        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { onClick: addRow }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "add" }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, repeaterErrorMessage));
       }
       default:
         return /* @__PURE__ */ import_react.default.createElement(
@@ -2276,13 +2344,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
       );