hs-uix 1.1.0 → 1.2.1

package/dist/index.mjs

@@ -84,12 +84,19 @@ var computeAutoWidths = (columns, data) => {
   columns.forEach((col) => {
     if (col.width && col.cellWidth) return;
     const values = sample.map((row) => row[col.field]).filter((v) => v != null);
-    const strings = values.map((v) => String(v));
+    const strings = values.map((v) => {
+      const s = String(v);
+      const truncLen = typeof col.truncate === "number" ? col.truncate : col.truncate && typeof col.truncate === "object" ? col.truncate.maxLength : null;
+      return truncLen && s.length > truncLen ? s.slice(0, truncLen) : s;
+    });
     let widthHint = null;
     let cellWidthHint = null;
     if (col.editable && col.editType && NARROW_EDIT_TYPES.has(col.editType)) {
       cellWidthHint = "min";
     }
+    if (col.truncate === true) {
+      cellWidthHint = cellWidthHint || "min";
+    }
     if (strings.length > 0) {
       const lengths = strings.map((s) => s.length);
       const maxLen = Math.max(...lengths);
@@ -863,20 +870,26 @@ var DataTable = ({
     const rawStr = String(rawValue ?? "");
     if (col.truncate && rawStr.length > 0) {
       if (col.truncate === true) {
-        const content2 = col.renderCell ? col.renderCell(rawValue, row) : rawStr;
+        if (col.renderCell) {
+          const content2 = col.renderCell(rawValue, row);
+          if (col.editable) {
+            return /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+          }
+          return content2;
+        }
         if (col.editable) {
-          return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--"));
+          return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, rawStr || "--"));
         }
-        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, content2);
+        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, rawStr);
       }
-      const maxLen = col.truncate.maxLength || 100;
+      const maxLen = typeof col.truncate === "number" ? col.truncate : col.truncate.maxLength || 100;
       if (rawStr.length > maxLen) {
         const truncatedStr = rawStr.slice(0, maxLen) + "\u2026";
-        const truncatedContent = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
+        const content2 = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
         if (col.editable) {
-          return /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, truncatedContent || "--");
+          return /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
         }
-        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, truncatedContent || "--");
+        return col.renderCell ? content2 : /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, content2 || "--");
       }
     }
     const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
@@ -981,10 +994,11 @@ var DataTable = ({
     selectedCount: selectedIds.size,
     displayCount,
     countLabel,
+    allSelected: selectedIds.size >= (serverSide ? totalCount || data.length : allRowIds.length),
     onSelectAll: handleSelectAllRows,
     onDeselectAll: handleDeselectAll,
     selectionActions
-  }) : /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ React.createElement(
+  }) : /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), selectedIds.size < (serverSide ? totalCount || data.length : allRowIds.length) && /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ React.createElement(
     Button,
     {
       key: i,
@@ -1222,7 +1236,6 @@ var runDefaultFieldValidator = (value, field, allValues) => {
       if (!isTimeValueObject(value)) return `${errorPrefix} has an invalid time`;
       break;
     case "datetime": {
-      if (isDateValueObject(value)) break;
       if (!isPlainObject(value)) return `${errorPrefix} has an invalid date/time`;
       const hasDate = value.date !== void 0;
       const hasTime = value.time !== void 0;
@@ -1289,7 +1302,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
+  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -1436,6 +1449,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // (values, { reset, rawValues }) => void | Promise
     transformValues,
     // (values) => values — reshape before submit
+    transformInitialValues,
+    // (rawInitialValues) => values — reshape raw data on load
     onBeforeSubmit,
     // (values) => boolean | Promise<boolean> — intercept submit
     onSubmitSuccess,
@@ -1599,12 +1614,27 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
   const computeInitialValues = () => {
+    const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
       if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "fieldGroup" && field.items && field.fields) {
+        for (const item of field.items) {
+          const subFields = field.fields(item);
+          for (const sf of subFields) {
+            const plugin2 = fieldTypes && fieldTypes[sf.type];
+            const emptyValue2 = plugin2 && plugin2.getEmptyValue ? plugin2.getEmptyValue() : getEmptyValue(sf);
+            let init2 = resolved && resolved[sf.name] !== void 0 ? resolved[sf.name] : sf.defaultValue !== void 0 ? sf.defaultValue : emptyValue2;
+            if (sf.transformIn) init2 = sf.transformIn(init2);
+            vals[sf.name] = init2;
+          }
+        }
+        continue;
+      }
       const plugin = fieldTypes && fieldTypes[field.type];
       const emptyValue = plugin && plugin.getEmptyValue ? plugin.getEmptyValue() : getEmptyValue(field);
-      const init = initialValues && initialValues[field.name] !== void 0 ? initialValues[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      let init = resolved && resolved[field.name] !== void 0 ? resolved[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      if (field.transformIn) init = field.transformIn(init);
       vals[field.name] = init;
     }
     return vals;
@@ -1637,7 +1667,14 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   formErrorsRef.current = formErrors;
   const fieldByName = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const field of fields) map.set(field.name, field);
+    for (const field of fields) {
+      map.set(field.name, field);
+      if (field.type === "fieldGroup" && field.items && field.fields) {
+        for (const item of field.items) {
+          for (const sf of field.fields(item)) map.set(sf.name, sf);
+        }
+      }
+    }
     return map;
   }, [fields]);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
@@ -2059,23 +2096,27 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   );
   const handleFieldInput = useCallback2(
     (name, value) => {
+      handleFieldChange(name, value);
       if (!validateOnChange) return;
       const err = validateField(name, value);
       updateErrors({ [name]: err });
     },
-    [validateOnChange, validateField, updateErrors]
+    [validateOnChange, validateField, updateErrors, handleFieldChange]
   );
   const handleFieldBlur = useCallback2(
     (name, value) => {
-      if (!validateOnBlur) return;
       const resolvedValue = value != null ? value : formValuesRef.current[name];
+      if (value != null && value !== formValuesRef.current[name]) {
+        handleFieldChange(name, value);
+      }
+      if (!validateOnBlur) return;
       const err = validateField(name, resolvedValue);
       updateErrors({ [name]: err });
       if (!err) {
         triggerAsyncValidation(name, resolvedValue);
       }
     },
-    [validateOnBlur, validateField, updateErrors, triggerAsyncValidation]
+    [validateOnBlur, validateField, updateErrors, triggerAsyncValidation, handleFieldChange]
   );
   const handleSubmit = useCallback2(
     async (e) => {
@@ -2108,8 +2149,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList")) continue;
-        rawValues[key] = formValues[key];
+        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
+      }
+      for (const f of fields) {
+        if (f.type !== "fieldGroup" || !f.items || !f.fields) continue;
+        for (const item of f.items) {
+          for (const sf of f.fields(item)) {
+            if (formValues[sf.name] === void 0) continue;
+            rawValues[sf.name] = sf.transformOut ? sf.transformOut(formValues[sf.name]) : formValues[sf.name];
+          }
+        }
       }
       const submitValues = transformValues ? transformValues(rawValues) : rawValues;
       if (onBeforeSubmit) {
@@ -2252,10 +2302,125 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display") {
       if (field.render) {
-        return field.render({ allValues: formValues });
+        return field.render({
+          allValues: formValues,
+          setFieldValue: (name, value) => handleFieldChange(name, value),
+          setFieldError: (name, message) => updateErrors({ [name]: message })
+        });
       }
       return null;
     }
+    if (field.type === "fieldGroup") {
+      const items = field.items || [];
+      const fieldsFn = field.fields;
+      if (!fieldsFn) return null;
+      const groupColumns = field.columns || 1;
+      const showItemLabel = field.showItemLabel !== false;
+      return /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, field.label), field.description && /* @__PURE__ */ React2.createElement(Text2, { variant: "microcopy" }, field.description), items.map((item, itemIdx) => {
+        const subFields = fieldsFn(item);
+        return /* @__PURE__ */ React2.createElement(Flex2, { key: item.key || itemIdx, direction: "row", gap: "xs", align: "end" }, showItemLabel && item.label && /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, itemIdx === 0 ? /* @__PURE__ */ React2.createElement(
+          Input2,
+          {
+            name: `_fieldGroup-label-${field.name}-${itemIdx}`,
+            label: "\xA0",
+            value: item.label,
+            readOnly: true,
+            disabled: true
+          }
+        ) : /* @__PURE__ */ React2.createElement(
+          Input2,
+          {
+            name: `_fieldGroup-label-${field.name}-${itemIdx}`,
+            value: item.label,
+            readOnly: true,
+            disabled: true
+          }
+        )), subFields.map((sf) => {
+          const sfValue = formValues[sf.name];
+          const sfError = formErrors[sf.name] || null;
+          const sfLabel = itemIdx === 0 ? sf.label : void 0;
+          const sfReadOnly = sf.readOnly || formReadOnly;
+          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
+          const sfProps = {
+            name: sf.name,
+            label: sfLabel,
+            placeholder: sf.placeholder,
+            description: itemIdx === 0 ? sf.description : void 0,
+            readOnly: sfReadOnly,
+            disabled: sfDisabled,
+            error: !!sfError,
+            validationMessage: sfError || void 0,
+            ...sf.fieldProps || {}
+          };
+          let sfElement;
+          switch (sf.type) {
+            case "select":
+              sfElement = /* @__PURE__ */ React2.createElement(
+                Select2,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  options: resolveOptions(sf, formValues),
+                  onChange: sfOnChange
+                }
+              );
+              break;
+            case "number":
+              sfElement = /* @__PURE__ */ React2.createElement(
+                NumberInput2,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  onChange: sfOnChange,
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+              break;
+            case "toggle":
+              sfElement = /* @__PURE__ */ React2.createElement(
+                Toggle2,
+                {
+                  name: sf.name,
+                  label: sfLabel || sf.label,
+                  checked: !!sfValue,
+                  size: sf.size || "md",
+                  labelDisplay: sf.labelDisplay || "top",
+                  readonly: sfReadOnly,
+                  disabled: sfDisabled,
+                  onChange: sfOnChange,
+                  ...sf.fieldProps || {}
+                }
+              );
+              break;
+            case "time":
+              sfElement = /* @__PURE__ */ React2.createElement(
+                TimeInput2,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  interval: sf.interval,
+                  onChange: sfOnChange,
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+              break;
+            default:
+              sfElement = /* @__PURE__ */ React2.createElement(
+                Input2,
+                {
+                  ...sfProps,
+                  value: sfValue || "",
+                  onChange: sfOnChange,
+                  onInput: (v) => handleFieldInput(sf.name, v),
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+          }
+          return /* @__PURE__ */ React2.createElement(Box2, { key: sf.name, flex: 1 }, sfElement);
+        }));
+      }));
+    }
     if (field.type === "crmPropertyList") {
       return /* @__PURE__ */ React2.createElement(
         CrmPropertyList,
@@ -2800,38 +2965,19 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return elements;
   };
-  const renderLegacyLayout = (fieldSubset) => {
+  const renderSingleColumnLayout = (fieldSubset) => {
     const fieldList = fieldSubset || visibleFields;
-    const rows = [];
-    let i = 0;
-    while (i < fieldList.length) {
-      const field = fieldList[i];
-      if (field.width === "half" && i + 1 < fieldList.length && fieldList[i + 1].width === "half" && !getDependsOnName(field)) {
-        rows.push({ type: "pair", fields: [fieldList[i], fieldList[i + 1]] });
-        i += 2;
-      } else {
-        rows.push({ type: "single", field });
-        i++;
-      }
-    }
     const elements = [];
     const processedDeps = /* @__PURE__ */ new Set();
-    for (const row of rows) {
-      if (row.type === "pair") {
-        elements.push(
-          /* @__PURE__ */ React2.createElement(Flex2, { key: `pair-${row.fields[0].name}`, direction: "row", gap: "sm" }, /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, renderField(row.fields[0])), /* @__PURE__ */ React2.createElement(Box2, { flex: 1 }, renderField(row.fields[1])))
-        );
-      } else {
-        const field = row.field;
-        if (processedDeps.has(field.name)) continue;
-        elements.push(
-          /* @__PURE__ */ React2.createElement(React2.Fragment, { key: field.name }, renderField(field))
-        );
-        const dependents = getDependents(field);
-        if (dependents.length > 0) {
-          for (const dep of dependents) processedDeps.add(dep.name);
-          elements.push(renderDependentGroup(field, dependents));
-        }
+    for (const field of fieldList) {
+      if (processedDeps.has(field.name)) continue;
+      elements.push(
+        /* @__PURE__ */ React2.createElement(React2.Fragment, { key: field.name }, renderField(field))
+      );
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        for (const dep of dependents) processedDeps.add(dep.name);
+        elements.push(renderDependentGroup(field, dependents));
       }
     }
     return elements;
@@ -2842,10 +2988,20 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     let batch = [];
     const flushBatch = () => {
       if (batch.length === 0) return;
-      const chunks = maxColumns ? Array.from({ length: Math.ceil(batch.length / maxColumns) }, (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)) : [batch];
-      for (const chunk of chunks) {
+      if (maxColumns) {
+        const chunks = Array.from(
+          { length: Math.ceil(batch.length / maxColumns) },
+          (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)
+        );
+        for (const chunk of chunks) {
+          const remainder = maxColumns - chunk.length;
+          elements.push(
+            /* @__PURE__ */ React2.createElement(Flex2, { key: `ag-${chunk[0].name}`, direction: "row", gap }, chunk.map((f) => /* @__PURE__ */ React2.createElement(Box2, { key: f.name, flex: 1 }, renderField(f))), remainder > 0 && /* @__PURE__ */ React2.createElement(Box2, { flex: remainder }))
+          );
+        }
+      } else {
         elements.push(
-          /* @__PURE__ */ React2.createElement(AutoGrid, { key: `ag-${chunk[0].name}`, columnWidth, flexible: true, gap }, chunk.map((f) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key: f.name }, renderField(f))))
+          /* @__PURE__ */ React2.createElement(AutoGrid, { key: `ag-${batch[0].name}`, columnWidth, flexible: true, gap }, batch.map((f) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key: f.name }, renderField(f))))
         );
       }
       batch = [];
@@ -2904,7 +3060,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
     if (columns > 1) return renderGridLayout(fieldSubset);
-    return renderLegacyLayout(fieldSubset);
+    return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
     const hasSections = Array.isArray(sections) && sections.length > 0;
@@ -2917,7 +3073,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     for (const sec of sections) {
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
-      const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, renderFieldSubset(sectionFields));
+      const sectionContext = { values: formValues, errors: formErrors };
+      const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ React2.createElement(
         Accordion,
         {

package/form.d.ts

@@ -11,6 +11,7 @@ export {
   FormBuilderLayout,
   FormBuilderLayoutEntry,
   FormBuilderSection,
+  FormBuilderSectionContext,
   FormBuilderStep,
   FormBuilderRef,
   FieldTypePlugin,

package/index.d.ts

@@ -32,6 +32,7 @@ export type {
   FormBuilderLayout,
   FormBuilderLayoutEntry,
   FormBuilderSection,
+  FormBuilderSectionContext,
   FormBuilderStep,
   FormBuilderRef,
   FieldTypePlugin,

package/package.json

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