@trackunit/custom-field-components 2.8.4 → 2.8.6

package/index.cjs.js

@@ -2,11 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
-var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
 var reactFormComponents = require('@trackunit/react-form-components');
 var sharedUtils = require('@trackunit/shared-utils');
-var react = require('react');
 var reactHookForm = require('react-hook-form');
+var react = require('react');
 var reactComponents = require('@trackunit/react-components');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactModal = require('@trackunit/react-modal');
@@ -541,26 +540,14 @@ const useUnitTranslation = () => {
  * and functions for form registration and state management.
  * @returns {ReactElement | null} - The JSX Element for the custom field or null if the field definition is not provided.
  */
-const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable = true, control, }) => {
+const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", fieldId, isEditable = true, control, }) => {
     const [t] = useTranslation();
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
-    const [numberValue, setNumberValue] = react.useState(() => {
-        if (field?.definition && field.__typename === "NumberFieldValueAndDefinition") {
-            const fieldValue = field.numberValue;
-            const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
-                ? field.definition.unitUs
-                : field.definition.unitSi;
-            return irisAppRuntimeCore.getCustomFieldValueForDisplayInUI(fieldValue, unit, unitPreference, language);
-        }
-        else {
-            return "";
-        }
-    });
     const { getPhoneNumberValidationRules } = reactFormComponents.useGetPhoneValidationRules();
     const def = field?.definition ?? definition;
     const uniqueIdentifier = fieldId ?? def?.id ?? "";
-    const value = useValue(uniqueIdentifier, numberValue, control, def, field);
+    const value = useValue(uniqueIdentifier, control, def, field);
     const key = def?.key ?? uniqueIdentifier;
     const fieldError = uniqueIdentifier ? validation.formState.errors[uniqueIdentifier] : undefined;
     const errorMessage = fieldError ? `${fieldError.message}` : undefined;
@@ -635,16 +622,16 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
                 placeholder: title ?? "",
                 addonAfter: def.currency,
             };
-            return (jsxRuntime.jsx(reactFormComponents.NumberField, { "data-testid": key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
-                    setNumberValue(e.target.value === "" ? null : e.target.value);
-                    void validation.register(uniqueIdentifier, rules).onChange(e);
-                }, ...numberProps }));
+            return (jsxRuntime.jsx(reactFormComponents.NumberField, { "data-testid": key ? key : `monetaryField`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, {
+                    ...rules,
+                    value,
+                }), ...numberProps }));
         }
         default:
             return sharedUtils.exhaustiveCheck(def);
     }
 };
-const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
+const useValue = (uniqueIdentifier, control, def, field) => {
     // workaround that ensures the value in the phone number field is updated if the formState changes.
     // Would probably be better to use PhoneFieldWithController, but doing that makes the form dirty on initial load.
     const initialValue = field?.__typename === "PhoneNumberFieldValueAndDefinition" ? field.phoneNumberValue : null;
@@ -686,9 +673,7 @@ const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
             return field?.__typename === "StringListFieldValueAndDefinition" ? field.stringArrayValue : null;
         }
         case "MonetaryFieldDefinition": {
-            return numberValue === undefined || numberValue === null || numberValue === ""
-                ? ""
-                : parseFloat(Number(numberValue).toPrecision(4));
+            return field?.__typename === "MonetaryFieldValueAndDefinition" ? field.monetaryValue : null;
         }
         default:
             return sharedUtils.exhaustiveCheck(def);

package/index.esm.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { getCustomFieldValueForDisplayInUI } from '@trackunit/iris-app-runtime-core';
 import { FormGroup, Checkbox, toISODateStringUTC, DateField, MultiSelectField, SelectField, TextBaseInput, useGetPhoneValidationRules, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
 import { uuidv4, exhaustiveCheck } from '@trackunit/shared-utils';
-import { useState, useEffect, useCallback, createElement, useMemo } from 'react';
 import { Controller, useWatch } from 'react-hook-form';
+import { useState, useEffect, useCallback, createElement, useMemo } from 'react';
 import { Card, CardHeader, Tooltip, CardBody, Text, CardFooter, Button, IconButton, Icon } from '@trackunit/react-components';
 import { useConfirmationDialog } from '@trackunit/react-core-hooks';
 import { useModal, Modal, ModalHeader, ModalBody, ModalFooter } from '@trackunit/react-modal';
@@ -539,26 +538,14 @@ const useUnitTranslation = () => {
  * and functions for form registration and state management.
  * @returns {ReactElement | null} - The JSX Element for the custom field or null if the field definition is not provided.
  */
-const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable = true, control, }) => {
+const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", fieldId, isEditable = true, control, }) => {
     const [t] = useTranslation();
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
-    const [numberValue, setNumberValue] = useState(() => {
-        if (field?.definition && field.__typename === "NumberFieldValueAndDefinition") {
-            const fieldValue = field.numberValue;
-            const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
-                ? field.definition.unitUs
-                : field.definition.unitSi;
-            return getCustomFieldValueForDisplayInUI(fieldValue, unit, unitPreference, language);
-        }
-        else {
-            return "";
-        }
-    });
     const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
     const def = field?.definition ?? definition;
     const uniqueIdentifier = fieldId ?? def?.id ?? "";
-    const value = useValue(uniqueIdentifier, numberValue, control, def, field);
+    const value = useValue(uniqueIdentifier, control, def, field);
     const key = def?.key ?? uniqueIdentifier;
     const fieldError = uniqueIdentifier ? validation.formState.errors[uniqueIdentifier] : undefined;
     const errorMessage = fieldError ? `${fieldError.message}` : undefined;
@@ -633,16 +620,16 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
                 placeholder: title ?? "",
                 addonAfter: def.currency,
             };
-            return (jsx(NumberField, { "data-testid": key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, rules), onChange: e => {
-                    setNumberValue(e.target.value === "" ? null : e.target.value);
-                    void validation.register(uniqueIdentifier, rules).onChange(e);
-                }, ...numberProps }));
+            return (jsx(NumberField, { "data-testid": key ? key : `monetaryField`, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: def.maximumNumber ?? undefined, min: def.minimumNumber ?? undefined, readOnly: !isEditableCombined, step: "any", ...validation.register(uniqueIdentifier, {
+                    ...rules,
+                    value,
+                }), ...numberProps }));
         }
         default:
             return exhaustiveCheck(def);
     }
 };
-const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
+const useValue = (uniqueIdentifier, control, def, field) => {
     // workaround that ensures the value in the phone number field is updated if the formState changes.
     // Would probably be better to use PhoneFieldWithController, but doing that makes the form dirty on initial load.
     const initialValue = field?.__typename === "PhoneNumberFieldValueAndDefinition" ? field.phoneNumberValue : null;
@@ -684,9 +671,7 @@ const useValue = (uniqueIdentifier, numberValue, control, def, field) => {
             return field?.__typename === "StringListFieldValueAndDefinition" ? field.stringArrayValue : null;
         }
         case "MonetaryFieldDefinition": {
-            return numberValue === undefined || numberValue === null || numberValue === ""
-                ? ""
-                : parseFloat(Number(numberValue).toPrecision(4));
+            return field?.__typename === "MonetaryFieldValueAndDefinition" ? field.monetaryValue : null;
         }
         default:
             return exhaustiveCheck(def);

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/custom-field/components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,11 @@
   },
   "dependencies": {
     "react-select": "^5.10.2",
-    "@trackunit/react-form-components": "2.6.4",
+    "@trackunit/react-form-components": "2.6.5",
     "@trackunit/shared-utils": "1.16.17",
-    "@trackunit/custom-field-api": "2.9.4",
-    "@trackunit/iris-app-runtime-core": "1.18.17",
-    "@trackunit/react-components": "2.9.4",
-    "@trackunit/react-modal": "2.6.4",
+    "@trackunit/custom-field-api": "2.9.5",
+    "@trackunit/react-components": "2.10.0",
+    "@trackunit/react-modal": "2.6.5",
     "@trackunit/react-core-hooks": "1.21.10",
     "@trackunit/i18n-library-translation": "2.4.10",
     "@trackunit/iris-app-runtime-core-api": "1.17.17"

package/src/CustomField.d.ts

@@ -35,10 +35,6 @@ interface CustomFieldProps {
      * (Optional) Specifies the unit system to be used (e.g., 'SI' or 'US_CUSTOMARY').
      */
     unitPreference?: UnitPreference | null;
-    /**
-     * (Optional) The language code to use for displaying field values and validation messages.
-     */
-    language?: string;
     /**
      * (Optional) Indicates if the field is editable or should be displayed in read-only mode.
      */
@@ -61,7 +57,7 @@ interface CustomFieldProps {
  * and functions for form registration and state management.
  * @returns {ReactElement | null} - The JSX Element for the custom field or null if the field definition is not provided.
  */
-export declare const useCustomFieldResolver: ({ field, definition, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, control, }: CustomFieldProps) => ReactElement | null;
+export declare const useCustomFieldResolver: ({ field, definition, register, setValue, formState, formValue, unitPreference, fieldId, isEditable, control, }: CustomFieldProps) => ReactElement | null;
 /**
  * CustomField is a React component that takes in the properties of a custom field and renders it.
  * It utilizes the `useCustomFieldResolver` hook to resolve the field into an input element