@elliemae/loan-field-renderers 26.2.2

package/dist/cjs/renderer/field-renderers/TextRenderer.js

@@ -0,0 +1,223 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextRenderer_exports = {};
+__export(TextRenderer_exports, {
+  TextRenderer: () => TextRenderer
+});
+module.exports = __toCommonJS(TextRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_renderer = require("../base/renderer");
+var import_AddonRenderer = require("./AddonRenderer");
+var import_styles = require("../styles");
+class TextRenderer extends import_renderer.Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new import_AddonRenderer.AddonRenderer().render();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const TextComponent = (props) => {
+      const {
+        id,
+        fieldId,
+        isDisable,
+        validationRules = [],
+        formatFn,
+        parseFn,
+        onChange,
+        onBlur,
+        autoFieldSet = true,
+        label,
+        rightAddon,
+        rendererType,
+        extra,
+        ...rest
+      } = props;
+      const { BRWrapper, AddOnRenderer } = this;
+      const {
+        fieldMetadata,
+        fieldValue,
+        setFieldValue,
+        isLockedState,
+        isSearchedField,
+        isFieldDisabled,
+        validationResult,
+        setIsSearchedField,
+        ariaDescProps
+      } = this.initVM(props);
+      const {
+        isLockField = false,
+        maxLength = 0,
+        fieldFormat = ""
+      } = fieldMetadata || {};
+      this.fieldFormat = fieldFormat;
+      const { maskType } = rendererType === "text" ? props : {};
+      const displayValue = import_react.default.useMemo(() => {
+        const rawValue = fieldValue || "";
+        if (formatFn && typeof formatFn === "function") {
+          return formatFn(rawValue, fieldMetadata);
+        }
+        return this.getFormattedValue(rawValue);
+      }, [fieldValue, fieldMetadata, formatFn]);
+      const phoneMaskProps = (0, import_ds_controlled_form.usePhoneMask)({
+        valueSetter: (data) => {
+          if (!props.isDisable && !isFieldDisabled) {
+            setFieldValue(data);
+          }
+        }
+      });
+      const ssnMaskProps = (0, import_ds_controlled_form.useSSNMask)({
+        valueSetter: (data) => {
+          if (!props.isDisable && !isFieldDisabled) {
+            setFieldValue(data);
+          }
+        }
+      });
+      const onBlurEvent = (0, import_react.useCallback)(
+        (e) => {
+          const { value } = e.target;
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = formatFn && typeof formatFn === "function" ? formatFn(value, fieldMetadata) : this.getFormattedValue(value);
+            setFieldValue(formattedValue);
+            const rulesToCheck = [...validationRules];
+            if (rendererType === "email") {
+              rulesToCheck.push({
+                type: "email",
+                message: "Please enter a valid email address."
+              });
+            }
+            const tempValResult = this.Hooks.runValidationsOnValue(
+              formattedValue,
+              rulesToCheck
+            );
+            this.VM.setValidationResult(tempValResult);
+            if (!tempValResult.isValid) {
+              return;
+            }
+            const parsedValue = parseFn && typeof parseFn === "function" ? parseFn(formattedValue, fieldMetadata) : this.getParsedValue(formattedValue);
+            if (autoFieldSet) {
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+              })();
+            }
+            if (onBlur) {
+              onBlur(fieldId, parsedValue);
+            }
+          }
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+          autoFieldSet,
+          fieldId,
+          fieldMetadata,
+          formatFn,
+          isDisable,
+          isFieldDisabled,
+          onBlur,
+          parseFn,
+          rendererType,
+          setFieldValue,
+          validationRules
+        ]
+      );
+      const onChangeEvent = (0, import_react.useCallback)(
+        (e) => {
+          setIsSearchedField(false);
+          const { value } = e.target;
+          if (!isDisable && !isFieldDisabled) {
+            setFieldValue(value);
+            if (onChange) {
+              onChange(fieldId, value);
+            }
+          }
+        },
+        [
+          fieldId,
+          isDisable,
+          isFieldDisabled,
+          onChange,
+          setFieldValue,
+          setIsSearchedField
+        ]
+      );
+      const maskProps = {
+        ...maskType === "Phone" && phoneMaskProps ? phoneMaskProps : {},
+        ...maskType === "SSN" && ssnMaskProps ? ssnMaskProps : {}
+      };
+      const validationProps = this.buildValidationProps(validationResult);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: id || fieldId,
+          label,
+          value: displayValue,
+          ...validationProps,
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          children: [
+            !label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.EmptyLabel, { htmlFor: id || fieldId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AddOnRenderer,
+              {
+                rendererType: "addon",
+                fieldId,
+                isLocked: isLockedState,
+                isPadLock: isLockField,
+                isDisable: props.isDisable,
+                onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+                rightAddon,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_controlled_form.DSInputText,
+                  {
+                    id: id || fieldId,
+                    "data-testid": fieldId,
+                    value: displayValue,
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    ...maxLength && maxLength > 0 && { maxLength },
+                    onChange: onChangeEvent,
+                    onBlur: onBlurEvent,
+                    ...extra,
+                    ...maskProps,
+                    ...ariaDescProps,
+                    ...this.sanitize(rest)
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    };
+    return import_react.default.memo(TextComponent);
+  }
+}

package/dist/cjs/renderer/field-renderers/ToggleRenderer.js

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ToggleRenderer_exports = {};
+__export(ToggleRenderer_exports, {
+  ToggleRenderer: () => ToggleRenderer
+});
+module.exports = __toCommonJS(ToggleRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_form_toggle = require("@elliemae/ds-form-toggle");
+var import_ds_form_layout_label = require("@elliemae/ds-form-layout-label");
+var import_renderer = require("../base/renderer");
+var import_styles = require("../styles");
+class ToggleRenderer extends import_renderer.Renderer {
+  constructor() {
+    super();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const { BRWrapper } = this;
+    const ToggleComponent = (props) => {
+      const { fieldId, onChange, isDisable, label, extra, ...rest } = props;
+      const {
+        fieldValue,
+        isFieldDisabled,
+        setFieldValue,
+        validationResult,
+        isSearchedField,
+        setIsSearchedField
+      } = this.initVM(props);
+      const validationProps = this.buildValidationProps(validationResult);
+      const onChangeEvent = (0, import_react.useCallback)(() => {
+        setIsSearchedField(false);
+        if (!isDisable && !isFieldDisabled) {
+          const updatedValue = !fieldValue;
+          const formattedValue = this.getFormattedValue(updatedValue);
+          setFieldValue(formattedValue);
+          const parsedValue = this.getParsedValue(formattedValue);
+          (async () => {
+            await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+            if (onChange) {
+              onChange(fieldId, parsedValue);
+            }
+          })();
+        }
+      }, [
+        isDisable,
+        isFieldDisabled,
+        fieldValue,
+        onChange,
+        setFieldValue,
+        setIsSearchedField,
+        fieldId
+      ]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_form_layout_label.DSFormLayoutLabel,
+          {
+            fontWeight: import_styles.theme.fontWeights.semibold,
+            htmlFor: fieldId,
+            "data-public": true,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          BRWrapper,
+          {
+            fieldId,
+            inputID: fieldId,
+            value: !!fieldValue,
+            ...props.brCompProps || {},
+            withHighlight: isSearchedField,
+            ...validationProps,
+            children: [
+              !label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.EmptyLabel, { htmlFor: fieldId }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_ds_form_toggle.DSControlledToggle,
+                {
+                  containerProps: { "data-testid": fieldId },
+                  id: fieldId,
+                  checked: !!fieldValue,
+                  applyAriaDisabled: isFieldDisabled || isDisable,
+                  onChange: onChangeEvent,
+                  ...extra,
+                  ...this.sanitize(rest)
+                }
+              )
+            ]
+          }
+        )
+      ] });
+    };
+    return import_react.default.memo(ToggleComponent);
+  }
+}

package/dist/cjs/renderer/field-renderers/ZipCodeRenderer/helper.js

@@ -0,0 +1,132 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var helper_exports = {};
+__export(helper_exports, {
+  ZipCodeHelper: () => ZipCodeHelper,
+  useDebouncedCallback: () => useDebouncedCallback
+});
+module.exports = __toCommonJS(helper_exports);
+var import_react = require("react");
+const useDebouncedCallback = (callback, waitTimeout = 150, options = { leading: false }) => {
+  const timeoutRef = (0, import_react.useRef)(null);
+  const leadingRef = (0, import_react.useRef)(options.leading ?? false);
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  const clearTimeoutFn = (0, import_react.useCallback)(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  (0, import_react.useEffect)(() => clearTimeoutFn, [clearTimeoutFn]);
+  const debouncedCallback = (0, import_react.useCallback)(
+    (...args) => {
+      clearTimeoutFn();
+      if (leadingRef.current) {
+        callbackRef.current(...args);
+        leadingRef.current = false;
+      } else {
+        timeoutRef.current = window.setTimeout(() => {
+          callbackRef.current(...args);
+          leadingRef.current = options.leading ?? false;
+        }, waitTimeout);
+      }
+    },
+    [waitTimeout, clearTimeoutFn, options.leading]
+  );
+  return debouncedCallback;
+};
+class ZipCodeHelper {
+  // Prevent instantiation - this is a static utility class
+  constructor() {
+  }
+  static SECTION_OPTION = {
+    dsId: "section",
+    type: "section",
+    label: "Please select the appropriate city",
+    options: [],
+    zipNumber: "",
+    cityData: null
+  };
+  static DEFAULT_COUNTRY_CODE = "US";
+  /**
+   * Normalizes city data from various API response formats
+   * Handles both uppercase and lowercase property names
+   * @param cityData - The city data object to normalize
+   * @returns Normalized object with lowercase property names
+   */
+  static normalizeCityData(cityData) {
+    return {
+      city: cityData?.City ?? cityData?.city ?? "",
+      state: cityData?.State ?? cityData?.state ?? "",
+      county: cityData?.County ?? cityData?.county ?? ""
+    };
+  }
+  /**
+   * Formats a city data option into a readable label
+   * Format: "City - County - State"
+   * @param option - The city data to format
+   * @returns Formatted string label
+   */
+  static formatOptionLabel(option) {
+    return [
+      option.City ?? option.city ?? "",
+      option.County ?? option.county ?? "",
+      option.State ?? option.state ?? ""
+    ].filter(Boolean).join(" - ");
+  }
+  /**
+   * Builds autocomplete options from zip code lookup data
+   * When multiple cities exist for a zip code, adds a section header
+   * @param zip - The zip code string
+   * @param data - Array of city data for the zip code
+   * @returns Array of autocomplete options
+   */
+  static buildOptions(zip, data) {
+    const optionEntries = data.map((option, index) => ({
+      dsId: `${index}`,
+      type: "option",
+      label: this.formatOptionLabel(option),
+      value: zip,
+      zipNumber: zip,
+      cityData: option
+    }));
+    if (optionEntries.length <= 1) {
+      return optionEntries;
+    }
+    return [
+      { ...this.SECTION_OPTION, zipNumber: zip, options: optionEntries },
+      ...optionEntries
+    ];
+  }
+  /**
+   * Validates whether any geo fields contain non-empty address data
+   * @param geoFields - Optional geo fields object to validate
+   * @returns True if any geo field has non-empty string value
+   */
+  static hasAddressTargets(geoFields) {
+    return Boolean(
+      geoFields && Object.values(geoFields).some(
+        (value) => typeof value === "string" && value.length
+      )
+    );
+  }
+}

package/dist/cjs/renderer/field-renderers/ZipCodeRenderer/hook.js

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hook_exports = {};
+__export(hook_exports, {
+  useZipCodeLookup: () => useZipCodeLookup
+});
+module.exports = __toCommonJS(hook_exports);
+var import_react = require("react");
+var import_helper = require("./helper");
+const useZipCodeLookup = ({
+  ssf,
+  onGeoLookupComplete,
+  useLatLong,
+  isForeignAddress,
+  geoFields
+}) => {
+  const [options, setOptions] = (0, import_react.useState)([]);
+  const shouldAutoFill = (0, import_react.useMemo)(
+    () => import_helper.ZipCodeHelper.hasAddressTargets(geoFields),
+    [geoFields]
+  );
+  const applyAddressData = (0, import_react.useCallback)(
+    async (zipNumber, cityData) => {
+      if (!cityData) return;
+      onGeoLookupComplete?.(zipNumber, cityData);
+      if (!shouldAutoFill || !geoFields) return;
+      const { city, state, county, country, zip } = geoFields;
+      const normalized = import_helper.ZipCodeHelper.normalizeCityData(cityData);
+      const payload = {};
+      const fieldMappings = [
+        [zip, zipNumber],
+        [city, normalized.city],
+        [state, normalized.state],
+        [county, normalized.county]
+      ];
+      fieldMappings.forEach(([fieldKey, value]) => {
+        if (fieldKey && value) {
+          payload[fieldKey] = value;
+        }
+      });
+      if (country && !isForeignAddress) {
+        payload[country] = import_helper.ZipCodeHelper.DEFAULT_COUNTRY_CODE;
+      }
+      if (Object.keys(payload).length) {
+        try {
+          await ssf.setFieldsValues(payload, true);
+        } catch (error) {
+        }
+      }
+    },
+    [geoFields, isForeignAddress, shouldAutoFill, ssf, onGeoLookupComplete]
+  );
+  const fetchZipResults = (0, import_react.useCallback)(
+    async (zip) => {
+      const rawResults = useLatLong ? await ssf.getZipCodeOptionsWithLatLong(zip) : await ssf.getZipCodeOptions(zip);
+      return Array.isArray(rawResults) ? rawResults : [];
+    },
+    [ssf, useLatLong]
+  );
+  const handleLookupResults = (0, import_react.useCallback)(
+    async (zip, results) => {
+      if (results.length === 1) {
+        setOptions([]);
+        await applyAddressData(zip, results[0]);
+      } else if (results.length > 1) {
+        setOptions(import_helper.ZipCodeHelper.buildOptions(zip, results));
+      } else {
+        setOptions([]);
+      }
+    },
+    [applyAddressData]
+  );
+  const runLookup = (0, import_react.useCallback)(
+    async (zip) => {
+      if (!zip || isForeignAddress) {
+        setOptions([]);
+        return;
+      }
+      try {
+        const results = await fetchZipResults(zip);
+        await handleLookupResults(zip, results);
+      } catch (error) {
+        setOptions([]);
+      }
+    },
+    [fetchZipResults, handleLookupResults, isForeignAddress]
+  );
+  const clearOptions = (0, import_react.useCallback)(() => setOptions([]), []);
+  const debouncedLookup = (0, import_helper.useDebouncedCallback)((zip) => {
+    runLookup(zip);
+  });
+  const handleOptionSelect = (0, import_react.useCallback)(
+    (label) => {
+      if (!label) return null;
+      const match = options.find(
+        (item) => item.type === "option" && item.label === label
+      );
+      if (!match) return null;
+      clearOptions();
+      applyAddressData(match.zipNumber, match.cityData).catch(() => {
+      });
+      return match;
+    },
+    [applyAddressData, clearOptions, options]
+  );
+  return {
+    options,
+    searchZipCode: debouncedLookup,
+    handleOptionSelect,
+    clearOptions
+  };
+};