@elliemae/loan-field-renderers 26.2.2

package/dist/esm/renderer/field-renderers/CheckboxRenderer.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
+import { Renderer } from "../base/renderer";
+import { EmptyLabel } from "../styles";
+class CheckboxRenderer extends Renderer {
+  constructor() {
+    super();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const { BRWrapper } = this;
+    const CheckboxComponent = (props) => {
+      const {
+        fieldId,
+        onBlur,
+        autoFieldSet = true,
+        validationRules,
+        isDisable,
+        label,
+        extra,
+        ...rest
+      } = props;
+      const {
+        fieldValue,
+        isFieldDisabled,
+        setFieldValue,
+        validationResult,
+        isSearchedField,
+        setIsSearchedField
+      } = this.initVM(props);
+      const validationProps = this.buildValidationProps(validationResult);
+      const onChangeEvent = useCallback(
+        (newVal) => {
+          setIsSearchedField(false);
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = this.getFormattedValue(newVal);
+            setFieldValue(formattedValue);
+            const parsedValue = this.getParsedValue(formattedValue);
+            if (autoFieldSet) {
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+              })();
+            }
+            if (onBlur) {
+              onBlur(fieldId, parsedValue);
+            }
+          }
+        },
+        [
+          isDisable,
+          isFieldDisabled,
+          setFieldValue,
+          setIsSearchedField,
+          onBlur,
+          autoFieldSet,
+          fieldId
+        ]
+      );
+      return /* @__PURE__ */ jsxs(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          value: !!fieldValue,
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          ...validationProps,
+          children: [
+            !label && /* @__PURE__ */ jsx(EmptyLabel, { htmlFor: fieldId }),
+            /* @__PURE__ */ jsx(
+              DSControlledCheckbox,
+              {
+                id: fieldId,
+                label,
+                "data-testid": fieldId,
+                checked: !!fieldValue,
+                applyAriaDisabled: isFieldDisabled || isDisable,
+                onChange: onChangeEvent,
+                ...extra,
+                ...this.sanitize(rest)
+              }
+            )
+          ]
+        }
+      );
+    };
+    return React.memo(CheckboxComponent);
+  }
+}
+export {
+  CheckboxRenderer
+};

package/dist/esm/renderer/field-renderers/DateRenderer.js

@@ -0,0 +1,176 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef } from "react";
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "@elliemae/ds-form-date-time-picker";
+import { useOnBlurOut } from "@elliemae/ds-utilities";
+import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
+import { Renderer } from "../base/renderer";
+import { AddonRenderer } from "./AddonRenderer";
+import { formatDateForBr } from "../../utils/dateHelper";
+import { StyledDateTimePicker } from "../styles";
+class DateRenderer extends Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new AddonRenderer().render();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const DateComponent = (props) => {
+      const {
+        id,
+        fieldId,
+        isDisable,
+        validationRules = [],
+        onChange,
+        onBlur,
+        autoFieldSet = true,
+        label,
+        rightAddon,
+        dateFormat = "MM/DD/YYYY",
+        brCompProps,
+        extra,
+        ...rest
+      } = props;
+      const { BRWrapper, AddOnRenderer } = this;
+      const {
+        fieldMetadata: {
+          isLockField = false,
+          maxLength = 0,
+          fieldFormat = ""
+        } = {},
+        fieldValue,
+        setFieldValue,
+        isLockedState,
+        isSearchedField,
+        isFieldDisabled,
+        validationResult,
+        setIsSearchedField
+      } = this.initVM(props);
+      this.fieldFormat = fieldFormat;
+      const isCalendarOpenRef = useRef(false);
+      const setCalendarOpen = useCallback((isOpen) => {
+        isCalendarOpenRef.current = isOpen;
+      }, []);
+      const blurConfig = useMemo(
+        () => ({
+          onBlur: () => {
+            if (isDisable || isFieldDisabled || isCalendarOpenRef.current) {
+              return;
+            }
+            const formattedValue = this.getFormattedValue(fieldValue);
+            const rulesToCheck = [
+              ...validationRules,
+              { type: "date", options: { dateFormat } }
+            ];
+            const tempValResult = this.Hooks.runValidationsOnValue(
+              formattedValue,
+              rulesToCheck
+            );
+            if (!tempValResult.isValid) {
+              this.VM.setValidationResult({ isValid: true, message: "" });
+              setFieldValue("");
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, null);
+              })();
+              return;
+            }
+            this.VM.setValidationResult(tempValResult);
+            setFieldValue(formattedValue);
+            const parsedValue = 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,
+          dateFormat,
+          fieldId,
+          fieldValue,
+          isDisable,
+          isFieldDisabled,
+          onBlur,
+          validationRules
+        ]
+      );
+      const handleBlurOut = useOnBlurOut(blurConfig);
+      const onDateChangeEvent = useCallback(
+        (selectedDate) => {
+          setIsSearchedField(false);
+          if (!isDisable && !isFieldDisabled) {
+            setFieldValue(selectedDate);
+            if (onChange) {
+              onChange(fieldId, selectedDate);
+            }
+          }
+        },
+        [
+          fieldId,
+          isDisable,
+          isFieldDisabled,
+          onChange,
+          setFieldValue,
+          setIsSearchedField
+        ]
+      );
+      const validationProps = this.buildValidationProps(validationResult);
+      const handlePadLockToggle = useCallback(
+        () => this.toggleLockStatus(fieldId, isLockedState || false),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [fieldId, isLockedState]
+      );
+      return /* @__PURE__ */ jsx(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          label,
+          value: String(
+            formatDateForBr(fieldValue, dateFormat) || ""
+          ),
+          ...validationProps,
+          ...brCompProps || {},
+          withHighlight: isSearchedField,
+          children: /* @__PURE__ */ jsx(
+            AddOnRenderer,
+            {
+              rendererType: "addon",
+              fieldId,
+              isLocked: isLockedState,
+              isPadLock: isLockField,
+              isDisable,
+              onPadLockToggle: handlePadLockToggle,
+              rightAddon,
+              children: /* @__PURE__ */ jsx(DSFormLayoutBlockItem, { onBlur: handleBlurOut, label: "", children: /* @__PURE__ */ jsx(
+                StyledDateTimePicker,
+                {
+                  "data-testid": fieldId,
+                  id,
+                  date: fieldValue || "",
+                  onDateChange: onDateChangeEvent,
+                  onPickerOpen: () => setCalendarOpen(true),
+                  onPickerClose: () => setCalendarOpen(false),
+                  applyAriaDisabled: isFieldDisabled || isDisable,
+                  ...maxLength && maxLength > 0 && { maxLength },
+                  ...extra,
+                  ...this.sanitize(rest),
+                  type: CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL
+                }
+              ) })
+            }
+          )
+        }
+      );
+    };
+    return React.memo(DateComponent);
+  }
+}
+export {
+  DateRenderer
+};

package/dist/esm/renderer/field-renderers/DropdownRenderer/hook.js

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+function useDropdownCreateSupport({
+  isEditable = false,
+  fieldValue,
+  baseOptions,
+  isLockField,
+  handlePersist,
+  isLocked,
+  setIsSearchedField,
+  fieldId,
+  onCreateCB
+}) {
+  const [dynamicOptions, setDynamicOptions] = useState(
+    isEditable ? baseOptions : []
+  );
+  useEffect(() => {
+    if (isEditable) setDynamicOptions(baseOptions);
+  }, [isEditable, baseOptions]);
+  const effectiveOptions = isEditable ? dynamicOptions : baseOptions;
+  const selectedOption = useMemo(() => {
+    if (fieldValue == null) return null;
+    const match = effectiveOptions.find(
+      (o) => o.value.toLowerCase() === String(fieldValue).toLowerCase()
+    );
+    if (!match) return null;
+    return {
+      type: "option",
+      label: match.label,
+      value: match.value
+    };
+  }, [fieldValue, effectiveOptions]);
+  const addNewOption = useCallback(
+    (optionLabel, persist) => {
+      if (!isEditable) return;
+      const newItem = {
+        dsId: "0",
+        type: "option",
+        label: optionLabel,
+        value: optionLabel
+      };
+      setDynamicOptions((prev) => [newItem, ...prev]);
+      if (persist) handlePersist(optionLabel);
+    },
+    [isEditable, handlePersist]
+  );
+  useEffect(() => {
+    if (!isEditable || fieldValue === null || fieldValue === void 0 || fieldValue === "") {
+      return;
+    }
+    const valueStr = String(fieldValue);
+    const exists = dynamicOptions.some(
+      (o) => o.value.toLowerCase() === valueStr.toLowerCase()
+    );
+    if (!exists) addNewOption(valueStr, false);
+  }, [isEditable, fieldValue, dynamicOptions, addNewOption]);
+  const onCreateEvent = useCallback(
+    (createdLabel) => {
+      if (!isEditable) return;
+      if (isLockField && !isLocked) return;
+      setIsSearchedField(false);
+      addNewOption(createdLabel, true);
+      onCreateCB?.(fieldId, createdLabel);
+    },
+    [
+      isEditable,
+      isLockField,
+      isLocked,
+      setIsSearchedField,
+      addNewOption,
+      fieldId,
+      onCreateCB
+    ]
+  );
+  const createProps = isEditable ? { onCreate: onCreateEvent } : {};
+  return { effectiveOptions, selectedOption, createProps };
+}
+export {
+  useDropdownCreateSupport
+};

package/dist/esm/renderer/field-renderers/DropdownRenderer/index.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+import { DSComboBox } from "@elliemae/ds-controlled-form";
+import { Renderer } from "../../base/renderer";
+import { AddonRenderer } from "../AddonRenderer";
+import { EmptyLabel } from "../../styles";
+import { useDropdownCreateSupport } from "./hook";
+class DropdownRenderer extends Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new AddonRenderer().render();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const DropdownComponent = (props) => {
+      const { BRWrapper, AddOnRenderer } = this;
+      const {
+        fieldId,
+        options = [],
+        label,
+        isDisable,
+        isEditable,
+        autoFieldSet = true,
+        brCompProps,
+        onChange,
+        onBlur,
+        onCreate,
+        validationRules = [],
+        ...rest
+      } = props;
+      const {
+        fieldMetadata: {
+          fieldFormat = "",
+          isLockField = false,
+          fieldOptions = []
+        } = {},
+        fieldValue,
+        setFieldValue,
+        isLockedState,
+        isSearchedField,
+        setIsSearchedField,
+        isFieldDisabled,
+        validationResult
+      } = this.initVM(props);
+      this.fieldFormat = fieldFormat;
+      const disabledByState = isFieldDisabled || isDisable || isLockField && !isLockedState;
+      const baseOptions = useMemo(
+        () => options.length ? options : fieldOptions,
+        [options, fieldOptions]
+      );
+      const commitValue = useCallback(
+        (raw) => {
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = this.getFormattedValue(raw);
+            setFieldValue(formattedValue);
+            const parsedValue = this.getParsedValue(formattedValue);
+            if (autoFieldSet) {
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+              })();
+            }
+          }
+        },
+        [autoFieldSet, fieldId, isDisable, isFieldDisabled, setFieldValue]
+      );
+      const { effectiveOptions, selectedOption, createProps } = useDropdownCreateSupport({
+        isEditable,
+        fieldValue,
+        baseOptions,
+        isLockField,
+        handlePersist: commitValue,
+        isLocked: isLockedState,
+        setIsSearchedField,
+        fieldId,
+        onCreateCB: onCreate
+      });
+      const onChangeEvent = useCallback(
+        (newSelected) => {
+          setIsSearchedField(false);
+          const dsItem = newSelected;
+          const newValue = dsItem?.value ?? null;
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = this.getFormattedValue(newValue);
+            setFieldValue(formattedValue);
+            const parsedValue = this.getParsedValue(formattedValue);
+            if (autoFieldSet) {
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+              })();
+            }
+            if (onChange) {
+              onChange(fieldId, parsedValue);
+            }
+          }
+        },
+        [
+          autoFieldSet,
+          fieldId,
+          isDisable,
+          isFieldDisabled,
+          onChange,
+          setFieldValue,
+          setIsSearchedField
+        ]
+      );
+      const onBlurEvent = useCallback(() => {
+        if (!isDisable && !isFieldDisabled) {
+          const currentValue = selectedOption?.value || "";
+          const formattedValue = this.getFormattedValue(currentValue);
+          setFieldValue(formattedValue);
+          const rulesToCheck = [...validationRules];
+          const tempValResult = this.Hooks.runValidationsOnValue(
+            formattedValue,
+            rulesToCheck
+          );
+          this.VM.setValidationResult(tempValResult);
+          if (!tempValResult.isValid) {
+            return;
+          }
+          const parsedValue = this.getParsedValue(formattedValue);
+          if (onBlur) {
+            onBlur(fieldId, parsedValue);
+          }
+        }
+      }, [
+        fieldId,
+        selectedOption,
+        onBlur,
+        isDisable,
+        isFieldDisabled,
+        validationRules,
+        setFieldValue
+      ]);
+      const validationProps = this.buildValidationProps(validationResult);
+      return /* @__PURE__ */ jsxs(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          label,
+          value: fieldValue,
+          ...validationProps,
+          ...brCompProps || {},
+          withHighlight: isSearchedField,
+          children: [
+            !label && /* @__PURE__ */ jsx(EmptyLabel, { htmlFor: fieldId }),
+            /* @__PURE__ */ jsx(
+              AddOnRenderer,
+              {
+                rendererType: "addon",
+                fieldId,
+                isLocked: isLockedState,
+                isPadLock: isLockField,
+                isDisable,
+                onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+                children: /* @__PURE__ */ jsx(
+                  DSComboBox,
+                  {
+                    id: fieldId,
+                    "data-testid": fieldId,
+                    selectedValues: selectedOption,
+                    allOptions: effectiveOptions,
+                    onChange: onChangeEvent,
+                    onBlur: onBlurEvent,
+                    ...this.sanitize(rest),
+                    ...createProps,
+                    applyAriaDisabled: disabledByState,
+                    placeholder: ""
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    };
+    return React.memo(DropdownComponent);
+  }
+}
+var DropdownRenderer_default = DropdownRenderer;
+export {
+  DropdownRenderer,
+  DropdownRenderer_default as default
+};

package/dist/esm/renderer/field-renderers/LargeTextRenderer.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { DSControlledLargeTextInput } from "@elliemae/ds-controlled-form";
+import { Renderer } from "../base/renderer";
+import { AddonRenderer } from "./AddonRenderer";
+import { EmptyLabel } from "../styles";
+class LargeTextRenderer extends Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new AddonRenderer().render();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const getMaxCharProps = (maxCharactersDisplay, maxCharCounter, fieldValue) => {
+      if (!maxCharactersDisplay || maxCharCounter <= 0) {
+        return {};
+      }
+      return {
+        maxCharCounter,
+        currentChar: fieldValue ? fieldValue.length : 0
+      };
+    };
+    const LargeTextComponent = (props) => {
+      const {
+        id,
+        fieldId,
+        isDisable,
+        validationRules = [],
+        onChange,
+        onBlur,
+        autoFieldSet = true,
+        label,
+        rightAddon,
+        rows = "3",
+        maxCharactersDisplay = false,
+        maxCharCounter = 0,
+        maxCharExceededMessage = "Max characters reached.",
+        extra
+      } = props;
+      const { BRWrapper, AddOnRenderer } = this;
+      const {
+        fieldMetadata: {
+          isLockField = false,
+          maxLength = 0,
+          fieldFormat = ""
+        } = {},
+        fieldValue,
+        setFieldValue,
+        isLockedState,
+        isSearchedField,
+        isFieldDisabled,
+        validationResult,
+        setIsSearchedField,
+        ariaDescProps
+      } = this.initVM(props);
+      this.fieldFormat = fieldFormat;
+      const getValidationRules = useCallback(() => {
+        const rulesToCheck = [...validationRules];
+        if (maxCharactersDisplay && maxCharCounter > 0) {
+          rulesToCheck.push({
+            type: "maxchar",
+            message: maxCharExceededMessage,
+            options: { charsLimit: maxCharCounter }
+          });
+        }
+        return rulesToCheck;
+      }, [
+        validationRules,
+        maxCharactersDisplay,
+        maxCharCounter,
+        maxCharExceededMessage
+      ]);
+      const onBlurEvent = useCallback(
+        () => {
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = this.getFormattedValue(fieldValue);
+            setFieldValue(formattedValue);
+            const rulesToCheck = getValidationRules();
+            const tempValResult = this.Hooks.runValidationsOnValue(
+              formattedValue,
+              rulesToCheck
+            );
+            this.VM.setValidationResult(tempValResult);
+            if (!tempValResult.isValid && tempValResult.message !== maxCharExceededMessage) {
+              return;
+            }
+            const parsedValue = 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,
+          fieldValue,
+          isDisable,
+          isFieldDisabled,
+          onBlur,
+          getValidationRules
+        ]
+      );
+      const onChangeEvent = useCallback(
+        (value) => {
+          setIsSearchedField(false);
+          if (!isDisable && !isFieldDisabled) {
+            setFieldValue(value);
+            if (onChange) {
+              onChange(fieldId, value);
+            }
+          }
+        },
+        [
+          fieldId,
+          isDisable,
+          isFieldDisabled,
+          onChange,
+          setFieldValue,
+          setIsSearchedField
+        ]
+      );
+      const validationProps = this.buildValidationProps(validationResult);
+      return /* @__PURE__ */ jsx(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: id || fieldId,
+          label,
+          value: fieldValue,
+          onBlur: onBlurEvent,
+          ...getMaxCharProps(maxCharactersDisplay, maxCharCounter, fieldValue),
+          ...props.brCompProps || {},
+          ...validationProps,
+          withHighlight: isSearchedField,
+          children: /* @__PURE__ */ jsxs(
+            AddOnRenderer,
+            {
+              rendererType: "addon",
+              fieldId,
+              isLocked: isLockedState,
+              isPadLock: isLockField,
+              isDisable: props.isDisable,
+              onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+              rightAddon,
+              children: [
+                !label && /* @__PURE__ */ jsx(EmptyLabel, { htmlFor: id || fieldId }),
+                /* @__PURE__ */ jsx(
+                  DSControlledLargeTextInput,
+                  {
+                    id: id || fieldId,
+                    "data-testid": fieldId,
+                    value: fieldValue || "",
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    onChange: onChangeEvent,
+                    rows,
+                    ...maxLength && maxLength > 0 && { maxLength },
+                    ...ariaDescProps,
+                    ...extra
+                  }
+                )
+              ]
+            }
+          )
+        }
+      );
+    };
+    return React.memo(LargeTextComponent);
+  }
+}
+export {
+  LargeTextRenderer
+};