@elliemae/loan-field-renderers 26.2.2

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

@@ -0,0 +1,206 @@
+"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 DateRenderer_exports = {};
+__export(DateRenderer_exports, {
+  DateRenderer: () => DateRenderer
+});
+module.exports = __toCommonJS(DateRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_form_date_time_picker = require("@elliemae/ds-form-date-time-picker");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_form_layout_blocks = require("@elliemae/ds-form-layout-blocks");
+var import_renderer = require("../base/renderer");
+var import_AddonRenderer = require("./AddonRenderer");
+var import_dateHelper = require("../../utils/dateHelper");
+var import_styles = require("../styles");
+class DateRenderer extends import_renderer.Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new import_AddonRenderer.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 = (0, import_react.useRef)(false);
+      const setCalendarOpen = (0, import_react.useCallback)((isOpen) => {
+        isCalendarOpenRef.current = isOpen;
+      }, []);
+      const blurConfig = (0, import_react.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 = (0, import_ds_utilities.useOnBlurOut)(blurConfig);
+      const onDateChangeEvent = (0, import_react.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 = (0, import_react.useCallback)(
+        () => this.toggleLockStatus(fieldId, isLockedState || false),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [fieldId, isLockedState]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          label,
+          value: String(
+            (0, import_dateHelper.formatDateForBr)(fieldValue, dateFormat) || ""
+          ),
+          ...validationProps,
+          ...brCompProps || {},
+          withHighlight: isSearchedField,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            AddOnRenderer,
+            {
+              rendererType: "addon",
+              fieldId,
+              isLocked: isLockedState,
+              isPadLock: isLockField,
+              isDisable,
+              onPadLockToggle: handlePadLockToggle,
+              rightAddon,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { onBlur: handleBlurOut, label: "", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.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: import_ds_form_date_time_picker.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL
+                }
+              ) })
+            }
+          )
+        }
+      );
+    };
+    return import_react.default.memo(DateComponent);
+  }
+}

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

@@ -0,0 +1,99 @@
+"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, {
+  useDropdownCreateSupport: () => useDropdownCreateSupport
+});
+module.exports = __toCommonJS(hook_exports);
+var import_react = require("react");
+function useDropdownCreateSupport({
+  isEditable = false,
+  fieldValue,
+  baseOptions,
+  isLockField,
+  handlePersist,
+  isLocked,
+  setIsSearchedField,
+  fieldId,
+  onCreateCB
+}) {
+  const [dynamicOptions, setDynamicOptions] = (0, import_react.useState)(
+    isEditable ? baseOptions : []
+  );
+  (0, import_react.useEffect)(() => {
+    if (isEditable) setDynamicOptions(baseOptions);
+  }, [isEditable, baseOptions]);
+  const effectiveOptions = isEditable ? dynamicOptions : baseOptions;
+  const selectedOption = (0, import_react.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 = (0, import_react.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]
+  );
+  (0, import_react.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 = (0, import_react.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 };
+}

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

@@ -0,0 +1,216 @@
+"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 DropdownRenderer_exports = {};
+__export(DropdownRenderer_exports, {
+  DropdownRenderer: () => DropdownRenderer,
+  default: () => DropdownRenderer_default
+});
+module.exports = __toCommonJS(DropdownRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_react = 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");
+var import_hook = require("./hook");
+class DropdownRenderer extends import_renderer.Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new import_AddonRenderer.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 = (0, import_react.useMemo)(
+        () => options.length ? options : fieldOptions,
+        [options, fieldOptions]
+      );
+      const commitValue = (0, import_react.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 } = (0, import_hook.useDropdownCreateSupport)({
+        isEditable,
+        fieldValue,
+        baseOptions,
+        isLockField,
+        handlePersist: commitValue,
+        isLocked: isLockedState,
+        setIsSearchedField,
+        fieldId,
+        onCreateCB: onCreate
+      });
+      const onChangeEvent = (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          label,
+          value: fieldValue,
+          ...validationProps,
+          ...brCompProps || {},
+          withHighlight: isSearchedField,
+          children: [
+            !label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.EmptyLabel, { htmlFor: fieldId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AddOnRenderer,
+              {
+                rendererType: "addon",
+                fieldId,
+                isLocked: isLockedState,
+                isPadLock: isLockField,
+                isDisable,
+                onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_controlled_form.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;