hs-uix 2.1.0 → 2.2.0

package/dist/form.mjs

@@ -35,7 +35,12 @@ import {
   TimeInput,
   Toggle,
   Checkbox,
-  ToggleGroup
+  ToggleGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  LoadingSpinner,
+  useExtensionActions
 } from "@hubspot/ui-extensions";
 
 // src/common-components/Icon.js
@@ -297,7 +302,7 @@ var GENERATED_ICONS = {
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
 
-// src/common-components/Icon.js
+// src/common-components/nativeIconNames.js
 var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "add",
   "appointment",
@@ -309,12 +314,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -343,13 +348,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -490,6 +495,8 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "zoomIn",
   "zoomOut"
 ]);
+
+// src/common-components/Icon.js
 var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
 var NATIVE_SIZE_TOKENS = {
   sm: "sm",
@@ -988,8 +995,25 @@ var resolveDependentCascade = ({ name, value, fields, values, getEmptyValueForFi
   return { newValues, changedDependents };
 };
 
+// src/form/formDirty.js
+var isFormDirty = (values, initialValues) => !deepEqual(values || {}, initialValues || {});
+var getDirtyFields = (values, initialValues) => {
+  const current = values || {};
+  const baseline = initialValues || {};
+  const names = [...Object.keys(current)];
+  for (const name of Object.keys(baseline)) {
+    if (!Object.prototype.hasOwnProperty.call(current, name)) names.push(name);
+  }
+  return names.filter((name) => !deepEqual(current[name], baseline[name]));
+};
+
 // src/form/FormBuilder.jsx
 var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
+var withFieldLoadingSpinner = (element, loading) => {
+  if (!loading) return element;
+  return /* @__PURE__ */ React2.createElement(Flex, { direction: "row", gap: "xs", align: "end" }, /* @__PURE__ */ React2.createElement(Box, { flex: 1 }, element), /* @__PURE__ */ React2.createElement(LoadingSpinner, { size: "xs", layout: "inline" }));
+};
+var formBuilderInstanceCounter = 0;
 var fieldSetHasErrors = (errors, fields) => {
   if (!errors || !fields || fields.length === 0) return false;
   const names = new Set(fields.map((field) => field.name));
@@ -1089,8 +1113,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // controlled loading state
     disabled = false,
     // disable entire form
-    renderButtons: renderButtonsProp
+    renderButtons: renderButtonsProp,
     // custom action row renderer
+    confirmDiscard
+    // true | { title, message, confirmLabel, cancelLabel } — confirm before the built-in Cancel discards dirty changes
   } = props;
   const {
     columns = 1,
@@ -1209,6 +1235,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "readOnly",
       "alwaysEditable",
       "disabled",
+      "loading",
       "defaultValue",
       "fieldProps",
       "colSpan",
@@ -1465,7 +1492,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     syncDirtyBaseline(values);
   }, [values, syncDirtyBaseline]);
   const isDirty = useMemo(() => {
-    return !deepEqual(formValues, initialSnapshot.current);
+    return isFormDirty(formValues, initialSnapshot.current);
   }, [formValues]);
   const prevDirtyRef = useRef(false);
   useEffect(() => {
@@ -1474,6 +1501,27 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (onDirtyChange) onDirtyChange(isDirty);
     }
   }, [isDirty, onDirtyChange]);
+  let hostActions = null;
+  try {
+    hostActions = useExtensionActions();
+  } catch (err) {
+    hostActions = null;
+  }
+  const discardModalIdRef = useRef(null);
+  if (discardModalIdRef.current === null) {
+    formBuilderInstanceCounter += 1;
+    discardModalIdRef.current = `hs-uix-form-discard-${formBuilderInstanceCounter}`;
+  }
+  const discardConfig = confirmDiscard ? confirmDiscard === true ? {} : confirmDiscard : null;
+  const discardTitle = discardConfig && discardConfig.title || "Discard changes?";
+  const discardMessage = discardConfig && discardConfig.message || "You have unsaved changes. If you discard now, they will be lost.";
+  const discardConfirmLabel = discardConfig && discardConfig.confirmLabel || "Discard changes";
+  const discardCancelLabel = discardConfig && discardConfig.cancelLabel || "Keep editing";
+  const closeDiscardModal = useCallback(() => {
+    if (hostActions && typeof hostActions.closeOverlay === "function") {
+      hostActions.closeOverlay(discardModalIdRef.current);
+    }
+  }, [hostActions]);
   const autoSaveTimerRef = useRef(null);
   const autoSaveRef = useRef(autoSave);
   autoSaveRef.current = autoSave;
@@ -2112,6 +2160,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     },
     getValues: () => formValues,
     isDirty: () => isDirty,
+    getDirtyFields: () => getDirtyFields(formValuesRef.current, initialSnapshot.current),
     setFieldValue: (name, value) => handleFieldChange(name, value),
     setFieldError: (name, message) => updateErrors({ [name]: message }),
     setErrors: (errors) => {
@@ -2131,7 +2180,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
     const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
     const isReadOnly = field.readOnly || fieldFormReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
+    const isFieldLoading = !!field.loading;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly || isFieldLoading;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -2315,7 +2365,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       disabled: isDisabled,
       error: hasError,
       validationMessage: renderFieldError ? void 0 : fieldError || void 0,
-      ...field.loading || validatingFields[field.name] ? { loading: true } : {},
+      ...validatingFields[field.name] ? { loading: true } : {},
       ...field.fieldProps || {}
     };
     const options = resolveOptions(field, formValues);
@@ -2473,25 +2523,31 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         )));
       }
       case "select":
-        return /* @__PURE__ */ React2.createElement(
-          Select,
-          {
-            ...commonProps,
-            value: fieldValue,
-            options,
-            variant: field.variant,
-            onChange: fieldOnChange
-          }
+        return withFieldLoadingSpinner(
+          /* @__PURE__ */ React2.createElement(
+            Select,
+            {
+              ...commonProps,
+              value: fieldValue,
+              options,
+              variant: field.variant,
+              onChange: fieldOnChange
+            }
+          ),
+          isFieldLoading
         );
       case "multiselect":
-        return /* @__PURE__ */ React2.createElement(
-          MultiSelect,
-          {
-            ...commonProps,
-            value: fieldValue || [],
-            options,
-            onChange: fieldOnChange
-          }
+        return withFieldLoadingSpinner(
+          /* @__PURE__ */ React2.createElement(
+            MultiSelect,
+            {
+              ...commonProps,
+              value: fieldValue || [],
+              options,
+              onChange: fieldOnChange
+            }
+          ),
+          isFieldLoading
         );
       case "toggle":
         return /* @__PURE__ */ React2.createElement(
@@ -3012,6 +3068,30 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (layout) return renderExplicitLayout();
     return renderFieldSubset(visibleFields);
   };
+  const renderCancelButton = () => {
+    if (discardConfig && isDirty) {
+      return /* @__PURE__ */ React2.createElement(
+        Button,
+        {
+          variant: "secondary",
+          disabled,
+          overlay: /* @__PURE__ */ React2.createElement(Modal, { id: discardModalIdRef.current, title: discardTitle, width: "small" }, /* @__PURE__ */ React2.createElement(ModalBody, null, /* @__PURE__ */ React2.createElement(Text, null, discardMessage)), /* @__PURE__ */ React2.createElement(ModalFooter, null, /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", onClick: closeDiscardModal }, discardCancelLabel), /* @__PURE__ */ React2.createElement(
+            Button,
+            {
+              variant: "destructive",
+              onClick: () => {
+                closeDiscardModal();
+                if (onCancel) onCancel();
+              }
+            },
+            discardConfirmLabel
+          )))
+        },
+        cancelButtonLabel
+      );
+    }
+    return /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel);
+  };
   const renderButtons = () => {
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
@@ -3025,6 +3105,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       totalSteps: isMultiStep ? steps.length : 1,
       disabled,
       loading: isLoading,
+      isDirty,
       labels: {
         submit: submitButtonLabel,
         cancel: cancelButtonLabel,
@@ -3040,7 +3121,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       return renderButtonsProp(buttonContext);
     }
     if (isMultiStep) {
-      return /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", onClick: handleBack, disabled }, backButtonLabel) : showCancel ? /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel) : /* @__PURE__ */ React2.createElement(Text, null, " "), /* @__PURE__ */ React2.createElement(Inline, { gap: "small" }, /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", onClick: handleBack, disabled }, backButtonLabel) : showCancel ? renderCancelButton() : /* @__PURE__ */ React2.createElement(Text, null, " "), /* @__PURE__ */ React2.createElement(Inline, { gap: "small" }, /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ React2.createElement(
         LoadingButton,
         {
           variant: submitVariant,
@@ -3051,7 +3132,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         submitButtonLabel
       ) : /* @__PURE__ */ React2.createElement(Button, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && renderCancelButton(), /* @__PURE__ */ React2.createElement(
       LoadingButton,
       {
         variant: submitVariant,
@@ -3091,7 +3172,126 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     formContent
   );
 });
+FormBuilder.displayName = "FormBuilder";
+
+// src/form/hubspotSchema.js
+var coerceBool = (value) => value === true || value === "true" || value === "Yes" || value === "yes" || value === "1";
+var coerceNumber = (value) => {
+  if (value === null || value === void 0 || value === "") return void 0;
+  if (typeof value === "number") return value;
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+};
+var mapPropertyOptions = (options) => {
+  if (!Array.isArray(options)) return void 0;
+  const mapped = options.filter((opt) => opt && opt.hidden !== true).map((opt) => {
+    const result = { label: opt.label != null ? opt.label : String(opt.value), value: opt.value };
+    if (opt.description != null && opt.description !== "") result.description = opt.description;
+    return result;
+  });
+  return mapped;
+};
+var resolveFieldType = (property) => {
+  const { type, fieldType } = property;
+  if (type === "datetime") return "datetime";
+  if (type === "date" || fieldType === "date") return "date";
+  switch (fieldType) {
+    case "select":
+      return "select";
+    // FormBuilder's radio rendering is the "radioGroup" type (native
+    // ToggleGroup with toggleType="radioButtonList").
+    case "radio":
+      return "radioGroup";
+    // HubSpot "checkbox" = multiple checkboxes over an enumeration → multiselect.
+    case "checkbox":
+      return "multiselect";
+    case "booleancheckbox":
+      return "toggle";
+    case "number":
+      return "number";
+    case "textarea":
+      return "textarea";
+    case "text":
+    case "phonenumber":
+      return "text";
+    default:
+      break;
+  }
+  switch (type) {
+    case "enumeration":
+      return "select";
+    case "number":
+      return "number";
+    case "bool":
+      return "toggle";
+    default:
+      return "text";
+  }
+};
+var isPropertyReadOnly = (property) => property.calculated === true || property.modificationMetadata && property.modificationMetadata.readOnlyValue === true;
+var resolveRequiredOverride = (requiredOverrides, name) => {
+  if (!requiredOverrides) return void 0;
+  if (Array.isArray(requiredOverrides)) {
+    return requiredOverrides.includes(name) ? true : void 0;
+  }
+  if (Object.prototype.hasOwnProperty.call(requiredOverrides, name)) {
+    return !!requiredOverrides[name];
+  }
+  return void 0;
+};
+var fieldsFromHubSpotProperties = (properties, options = {}) => {
+  if (!Array.isArray(properties)) return [];
+  const {
+    include,
+    exclude,
+    overrides,
+    requiredOverrides,
+    includeDescriptions = false
+  } = options;
+  const includeSet = Array.isArray(include) ? new Set(include) : null;
+  const excludeSet = Array.isArray(exclude) ? new Set(exclude) : null;
+  let selected = properties.filter((property) => {
+    if (!property || !property.name) return false;
+    if (includeSet && !includeSet.has(property.name)) return false;
+    if (excludeSet && excludeSet.has(property.name)) return false;
+    if (property.hidden === true && !includeSet) return false;
+    return true;
+  });
+  if (includeSet) {
+    const order = new Map(include.map((name, idx) => [name, idx]));
+    selected = [...selected].sort((a, b) => order.get(a.name) - order.get(b.name));
+  }
+  return selected.map((property) => {
+    const type = resolveFieldType(property);
+    const field = {
+      name: property.name,
+      type,
+      label: property.label || property.name
+    };
+    if (includeDescriptions && property.description) {
+      field.description = property.description;
+    }
+    if (type === "select" || type === "multiselect" || type === "radioGroup") {
+      field.options = mapPropertyOptions(property.options) || [];
+    }
+    if (type === "toggle") {
+      field.transformIn = coerceBool;
+      field.transformOut = (value) => !!value;
+    }
+    if (type === "number") {
+      field.transformIn = coerceNumber;
+    }
+    if (isPropertyReadOnly(property)) {
+      field.readOnly = true;
+    }
+    const required = resolveRequiredOverride(requiredOverrides, property.name);
+    if (required !== void 0) field.required = required;
+    const override = overrides && overrides[property.name];
+    return override ? { ...field, ...override } : field;
+  });
+};
 export {
   FormBuilder,
+  fieldsFromHubSpotProperties,
   useFormPrefill
 };