@trackunit/custom-field-components 0.0.446 → 0.0.450

package/index.cjs.js

@@ -3449,7 +3449,7 @@ const getPhoneNumberValidationRules = (definition) => {
  * @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
  */
 const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldId) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
     const [isEditing, setIsEditing] = React.useState(false);
     const [numberValue, setNumberValue] = React.useState(() => {
         if ((field === null || field === void 0 ? void 0 : field.definition) && field.definition.type === irisAppRuntimeCoreApi.CustomFieldType.NUMBER) {
@@ -3536,6 +3536,23 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
             }
             return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${typedDefinition.key}`, id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
         }
+        case irisAppRuntimeCoreApi.CustomFieldType.JSON: {
+            return jsxRuntime.jsx("div", {});
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.MONETARY: {
+            const rules = getNumberValidationRules(field.definition);
+            const numberProps = {
+                placeholder: (_3 = field.definition.title) !== null && _3 !== void 0 ? _3 : "",
+                addonAfter: field.definition.currency,
+            };
+            const value = numberValue === undefined || numberValue === null || numberValue === ""
+                ? ""
+                : parseFloat(Number(numberValue).toPrecision(4));
+            return (jsxRuntime.jsx(reactFormComponents.FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${field.definition.key}-FormGroup`, disabled: !field.definition.uiEditable, children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, readOnly: !field.definition.uiEditable, step: "any", min: (_4 = field.definition.minimumNumber) !== null && _4 !== void 0 ? _4 : undefined, max: (_5 = field.definition.maximumNumber) !== null && _5 !== void 0 ? _5 : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
+                        setNumberValue(e.target.value === "" ? null : e.target.value);
+                        validation.register(key, rules).onChange(e);
+                    } }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-monetary-field`, dataTestId: `${field.definition.key}`, defaultValue: value, readOnly: true, actions: jsxRuntime.jsx("div", { className: "tu-action-container", children: jsxRuntime.jsx(reactComponents.IconButton, { className: "tu-action-button", dataTestId: `${field.definition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) }));
+        }
         default:
             throw new Error(`Type not supported: ${type}`);
     }

package/index.esm.js

@@ -3426,7 +3426,7 @@ const getPhoneNumberValidationRules = (definition) => {
  * @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
  */
 const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldId) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
     const [isEditing, setIsEditing] = useState(false);
     const [numberValue, setNumberValue] = useState(() => {
         if ((field === null || field === void 0 ? void 0 : field.definition) && field.definition.type === CustomFieldType.NUMBER) {
@@ -3513,6 +3513,23 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
             }
             return (jsx(DateCustomField, { dataTestId: `${typedDefinition.key}`, id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
         }
+        case CustomFieldType.JSON: {
+            return jsx("div", {});
+        }
+        case CustomFieldType.MONETARY: {
+            const rules = getNumberValidationRules(field.definition);
+            const numberProps = {
+                placeholder: (_3 = field.definition.title) !== null && _3 !== void 0 ? _3 : "",
+                addonAfter: field.definition.currency,
+            };
+            const value = numberValue === undefined || numberValue === null || numberValue === ""
+                ? ""
+                : parseFloat(Number(numberValue).toPrecision(4));
+            return (jsx(FormGroup, { htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `${field.definition.key}-FormGroup`, disabled: !field.definition.uiEditable, children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, readOnly: !field.definition.uiEditable, step: "any", min: (_4 = field.definition.minimumNumber) !== null && _4 !== void 0 ? _4 : undefined, max: (_5 = field.definition.maximumNumber) !== null && _5 !== void 0 ? _5 : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
+                        setNumberValue(e.target.value === "" ? null : e.target.value);
+                        validation.register(key, rules).onChange(e);
+                    } }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-monetary-field`, dataTestId: `${field.definition.key}`, defaultValue: value, readOnly: true, actions: jsx("div", { className: "tu-action-container", children: jsx(IconButton, { className: "tu-action-button", dataTestId: `${field.definition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) }));
+        }
         default:
             throw new Error(`Type not supported: ${type}`);
     }

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "0.0.446",
+  "version": "0.0.450",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/iris-app-runtime-core": "0.3.64",
-    "@trackunit/iris-app-runtime-core-api": "0.3.57",
-    "@trackunit/react-components": "0.1.148",
-    "@trackunit/react-core-contexts-test": "0.1.93",
-    "@trackunit/react-form-components": "0.0.120",
+    "@trackunit/iris-app-runtime-core-api": "0.3.59",
+    "@trackunit/react-components": "0.1.149",
+    "@trackunit/react-core-contexts-test": "0.1.95",
+    "@trackunit/react-form-components": "0.0.123",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",
     "react-hook-form": "7.40.0",

package/src/CustomField.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { AbstractValueAndDefinition } from "@trackunit/iris-app-runtime-core";
 import { ValueAndDefinition } from "@trackunit/iris-app-runtime-core-api";
 import { FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { UnitPreference } from "./UnitPreference";
 interface ICustomFieldProps {
-    field: AbstractValueAndDefinition;
+    field: ValueAndDefinition;
     register: UseFormRegister<FieldValues>;
     formState: FormState<FieldValues>;
     setValue: UseFormSetValue<FieldValues>;

package/src/getValidationRules.d.ts

@@ -1,4 +1,4 @@
-import { BooleanFieldDefinition, DateFieldDefinition, DropDownFieldDefinition, EmailFieldDefinition, NumberFieldDefinition, PhoneNumberFieldDefinition, StringFieldDefinition, WebAddressFieldDefinition } from "@trackunit/iris-app-runtime-core-api";
+import { BooleanFieldDefinition, DateFieldDefinition, DropDownFieldDefinition, EmailFieldDefinition, MonetaryFieldDefinition, NumberFieldDefinition, PhoneNumberFieldDefinition, StringFieldDefinition, WebAddressFieldDefinition } from "@trackunit/iris-app-runtime-core-api";
 import { RegisterOptions } from "react-hook-form";
 /**
  * Validation rules for a field
@@ -17,7 +17,7 @@ export declare const getWebAddressValidationRules: (definition: WebAddressFieldD
  * @param { NumberFieldDefinition } definition the field definition
  * @returns { ValidationRules} the validation rules
  */
-export declare const getNumberValidationRules: (definition: NumberFieldDefinition) => ValidationRules;
+export declare const getNumberValidationRules: (definition: NumberFieldDefinition | MonetaryFieldDefinition) => ValidationRules;
 /**
  * Get validation rules for a string field.
  *