@trackunit/custom-field-components 0.0.695 → 0.0.697

package/index.cjs.js

@@ -408,12 +408,12 @@ const useUnitTranslation = () => {
  * and functions for form registration and state management.
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
  */
-const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
     const [numberValue, setNumberValue] = React.useState(() => {
-        if (field.definition && field.__typename === "NumberFieldValueAndDefinition") {
+        if ((field === null || field === void 0 ? void 0 : field.definition) && field.__typename === "NumberFieldValueAndDefinition") {
             const fieldValue = field.numberValue;
             const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
                 ? field.definition.unitUs
@@ -425,91 +425,90 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, formValu
             return "";
         }
     });
-    if ((field === null || field === void 0 ? void 0 : field.definition) === undefined) {
+    const def = (_a = field === null || field === void 0 ? void 0 : field.definition) !== null && _a !== void 0 ? _a : definition;
+    if (def === undefined || def.__typename === undefined) {
         return null;
     }
-    const key = (_a = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.key) !== null && _a !== void 0 ? _a : "";
-    const uniqueIdentifier = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.id;
+    const uniqueIdentifier = (_b = fieldId !== null && fieldId !== void 0 ? fieldId : def === null || def === void 0 ? void 0 : def.id) !== null && _b !== void 0 ? _b : "";
+    const key = (_c = def === null || def === void 0 ? void 0 : def.key) !== null && _c !== void 0 ? _c : uniqueIdentifier;
     const fieldError = key ? validation.formState.errors[key] : undefined;
     const errorMessage = fieldError ? fieldError.message + "" : undefined;
-    const { description, title } = field.definition;
-    const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : field.definition.uiEditable;
-    switch (field.__typename) {
-        case "WebAddressFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getWebAddressValidationRules(field.definition);
-            return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
+    const { description, title } = def !== null && def !== void 0 ? def : {};
+    const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : def === null || def === void 0 ? void 0 : def.uiEditable;
+    switch (def.__typename) {
+        case "WebAddressFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "WebAddressFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getWebAddressValidationRules(def);
+            return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
         }
-        case "EmailFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getEmailValidationRules(field.definition);
-            return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
+        case "EmailFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "EmailFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getEmailValidationRules(def);
+            return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
         }
-        case "PhoneNumberFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getPhoneNumberValidationRules(field.definition);
-            return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
-                    validation.setValue(key, props.phone, {
+        case "PhoneNumberFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "PhoneNumberFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getPhoneNumberValidationRules(def);
+            return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
+                    validation.setValue(uniqueIdentifier, props.phone, {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
                 } })));
         }
-        case "StringFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getStringValidationRules(field.definition);
-            return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
+        case "StringFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "StringFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getStringValidationRules(def);
+            return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
         }
-        case "NumberFieldValueAndDefinition": {
-            const value = field.numberValue;
-            const rules = getNumberValidationRules(field.definition);
-            const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
-                ? field.definition.unitUs
-                : field.definition.unitSi;
+        case "NumberFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "NumberFieldValueAndDefinition" ? field.numberValue : undefined;
+            const rules = getNumberValidationRules(def);
+            const unit = unitPreference === "US_CUSTOMARY" && def.unitUs ? def.unitUs : def.unitSi;
             const numberProps = {
                 placeholder: title !== null && title !== void 0 ? title : "",
                 addonAfter: unitTranslation(unit),
             };
-            return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
+            return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_d = def.maximumNumber) !== null && _d !== void 0 ? _d : undefined, min: (_e = def.minimumNumber) !== null && _e !== void 0 ? _e : undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), numberProps)));
         }
-        case "BooleanFieldValueAndDefinition": {
-            const value = field.booleanValue;
-            const rules = getBooleanValidationRules(field.definition);
-            return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
+        case "BooleanFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "BooleanFieldValueAndDefinition" ? field.booleanValue : undefined;
+            const rules = getBooleanValidationRules();
+            return (jsxRuntime.jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
         }
-        case "DropDownFieldValueAndDefinition": {
-            const value = field.stringArrayValue;
-            const rules = getDropdownValidationRules(field.definition);
-            return (jsxRuntime.jsx(DropdownCustomField, { allValues: (_d = field.definition.allValues) !== null && _d !== void 0 ? _d : undefined, dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_e = field.definition.multiSelect) !== null && _e !== void 0 ? _e : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
+        case "DropDownFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DropDownFieldValueAndDefinition" ? field.stringArrayValue : undefined;
+            const rules = getDropdownValidationRules();
+            return (jsxRuntime.jsx(DropdownCustomField, { allValues: (_f = def.allValues) !== null && _f !== void 0 ? _f : undefined, dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_g = def.multiSelect) !== null && _g !== void 0 ? _g : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
         }
-        case "DateFieldValueAndDefinition": {
-            const value = field.dateValue;
-            const rules = getDateValidationRules(field.definition);
+        case "DateFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DateFieldValueAndDefinition" ? field.dateValue : undefined;
+            const rules = getDateValidationRules();
             let defaultValue;
             if (value !== undefined && value !== null) {
                 defaultValue = new Date(value);
             }
-            return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${field.definition.key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
+            return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
         }
-        case "JsonFieldValueAndDefinition": {
+        case "JsonFieldDefinition": {
             return null;
         }
-        case "MonetaryFieldValueAndDefinition": {
-            const rules = getNumberValidationRules(field.definition);
+        case "MonetaryFieldDefinition": {
+            const rules = getNumberValidationRules(def);
             const numberProps = {
                 placeholder: title !== null && title !== void 0 ? title : "",
-                addonAfter: field.definition.currency,
+                addonAfter: def.currency,
             };
             const value = numberValue === undefined || numberValue === null || numberValue === ""
                 ? ""
                 : parseFloat(Number(numberValue).toPrecision(4));
-            return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_f = field.definition.maximumNumber) !== null && _f !== void 0 ? _f : undefined, min: (_g = field.definition.minimumNumber) !== null && _g !== void 0 ? _g : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(key, rules), { onChange: e => {
+            return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_h = def.maximumNumber) !== null && _h !== void 0 ? _h : undefined, min: (_j = def.minimumNumber) !== null && _j !== void 0 ? _j : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(uniqueIdentifier, rules), { onChange: e => {
                     setNumberValue(e.target.value === "" ? null : e.target.value);
-                    validation.register(key, rules).onChange(e);
+                    validation.register(uniqueIdentifier, rules).onChange(e);
                 } }, numberProps)));
         }
         default:
-            return sharedUtils.exhaustiveCheck(field);
+            return sharedUtils.exhaustiveCheck(def.__typename);
     }
 };
 /**

package/index.esm.js

@@ -385,12 +385,12 @@ const useUnitTranslation = () => {
  * and functions for form registration and state management.
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
  */
-const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
     const [numberValue, setNumberValue] = useState(() => {
-        if (field.definition && field.__typename === "NumberFieldValueAndDefinition") {
+        if ((field === null || field === void 0 ? void 0 : field.definition) && field.__typename === "NumberFieldValueAndDefinition") {
             const fieldValue = field.numberValue;
             const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
                 ? field.definition.unitUs
@@ -402,91 +402,90 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, formValu
             return "";
         }
     });
-    if ((field === null || field === void 0 ? void 0 : field.definition) === undefined) {
+    const def = (_a = field === null || field === void 0 ? void 0 : field.definition) !== null && _a !== void 0 ? _a : definition;
+    if (def === undefined || def.__typename === undefined) {
         return null;
     }
-    const key = (_a = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.key) !== null && _a !== void 0 ? _a : "";
-    const uniqueIdentifier = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.id;
+    const uniqueIdentifier = (_b = fieldId !== null && fieldId !== void 0 ? fieldId : def === null || def === void 0 ? void 0 : def.id) !== null && _b !== void 0 ? _b : "";
+    const key = (_c = def === null || def === void 0 ? void 0 : def.key) !== null && _c !== void 0 ? _c : uniqueIdentifier;
     const fieldError = key ? validation.formState.errors[key] : undefined;
     const errorMessage = fieldError ? fieldError.message + "" : undefined;
-    const { description, title } = field.definition;
-    const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : field.definition.uiEditable;
-    switch (field.__typename) {
-        case "WebAddressFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getWebAddressValidationRules(field.definition);
-            return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
+    const { description, title } = def !== null && def !== void 0 ? def : {};
+    const isEditableCombined = isEditable !== null && isEditable !== void 0 ? isEditable : def === null || def === void 0 ? void 0 : def.uiEditable;
+    switch (def.__typename) {
+        case "WebAddressFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "WebAddressFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getWebAddressValidationRules(def);
+            return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
         }
-        case "EmailFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getEmailValidationRules(field.definition);
-            return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
+        case "EmailFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "EmailFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getEmailValidationRules(def);
+            return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
         }
-        case "PhoneNumberFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getPhoneNumberValidationRules(field.definition);
-            return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
-                    validation.setValue(key, props.phone, {
+        case "PhoneNumberFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "PhoneNumberFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getPhoneNumberValidationRules(def);
+            return (jsx(PhoneField, Object.assign({ dataTestId: `${key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
+                    validation.setValue(uniqueIdentifier, props.phone, {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
                 } })));
         }
-        case "StringFieldValueAndDefinition": {
-            const value = field.stringValue;
-            const rules = getStringValidationRules(field.definition);
-            return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
+        case "StringFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "StringFieldValueAndDefinition" ? field.stringValue : undefined;
+            const rules = getStringValidationRules(def);
+            return (jsx(TextField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })))));
         }
-        case "NumberFieldValueAndDefinition": {
-            const value = field.numberValue;
-            const rules = getNumberValidationRules(field.definition);
-            const unit = unitPreference === "US_CUSTOMARY" && field.definition.unitUs
-                ? field.definition.unitUs
-                : field.definition.unitSi;
+        case "NumberFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "NumberFieldValueAndDefinition" ? field.numberValue : undefined;
+            const rules = getNumberValidationRules(def);
+            const unit = unitPreference === "US_CUSTOMARY" && def.unitUs ? def.unitUs : def.unitSi;
             const numberProps = {
                 placeholder: title !== null && title !== void 0 ? title : "",
                 addonAfter: unitTranslation(unit),
             };
-            return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
+            return (jsx(NumberField, Object.assign({ dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_d = def.maximumNumber) !== null && _d !== void 0 ? _d : undefined, min: (_e = def.minimumNumber) !== null && _e !== void 0 ? _e : undefined, readOnly: !isEditableCombined, step: def.isInteger ? 1 : "any" }, validation.register(uniqueIdentifier, Object.assign(Object.assign({}, rules), { value })), numberProps)));
         }
-        case "BooleanFieldValueAndDefinition": {
-            const value = field.booleanValue;
-            const rules = getBooleanValidationRules(field.definition);
-            return (jsx(BooleanCustomField, { dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
+        case "BooleanFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "BooleanFieldValueAndDefinition" ? field.booleanValue : undefined;
+            const rules = getBooleanValidationRules();
+            return (jsx(BooleanCustomField, { dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, validationRules: rules }));
         }
-        case "DropDownFieldValueAndDefinition": {
-            const value = field.stringArrayValue;
-            const rules = getDropdownValidationRules(field.definition);
-            return (jsx(DropdownCustomField, { allValues: (_d = field.definition.allValues) !== null && _d !== void 0 ? _d : undefined, dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_e = field.definition.multiSelect) !== null && _e !== void 0 ? _e : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
+        case "DropDownFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DropDownFieldValueAndDefinition" ? field.stringArrayValue : undefined;
+            const rules = getDropdownValidationRules();
+            return (jsx(DropdownCustomField, { allValues: (_f = def.allValues) !== null && _f !== void 0 ? _f : undefined, dataTestId: `${key}`, defaultValue: value !== null && value !== void 0 ? value : undefined, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", multiSelect: (_g = def.multiSelect) !== null && _g !== void 0 ? _g : false, register: validation.register, setValue: validation.setValue, validationRules: rules }));
         }
-        case "DateFieldValueAndDefinition": {
-            const value = field.dateValue;
-            const rules = getDateValidationRules(field.definition);
+        case "DateFieldDefinition": {
+            const value = (field === null || field === void 0 ? void 0 : field.__typename) === "DateFieldValueAndDefinition" ? field.dateValue : undefined;
+            const rules = getDateValidationRules();
             let defaultValue;
             if (value !== undefined && value !== null) {
                 defaultValue = new Date(value);
             }
-            return (jsx(DateCustomField, { dataTestId: `${field.definition.key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
+            return (jsx(DateCustomField, { dataTestId: `${key}`, defaultValue: defaultValue, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
         }
-        case "JsonFieldValueAndDefinition": {
+        case "JsonFieldDefinition": {
             return null;
         }
-        case "MonetaryFieldValueAndDefinition": {
-            const rules = getNumberValidationRules(field.definition);
+        case "MonetaryFieldDefinition": {
+            const rules = getNumberValidationRules(def);
             const numberProps = {
                 placeholder: title !== null && title !== void 0 ? title : "",
-                addonAfter: field.definition.currency,
+                addonAfter: def.currency,
             };
             const value = numberValue === undefined || numberValue === null || numberValue === ""
                 ? ""
                 : parseFloat(Number(numberValue).toPrecision(4));
-            return (jsx(NumberField, Object.assign({ dataTestId: field.definition.key ? field.definition.key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_f = field.definition.maximumNumber) !== null && _f !== void 0 ? _f : undefined, min: (_g = field.definition.minimumNumber) !== null && _g !== void 0 ? _g : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(key, rules), { onChange: e => {
+            return (jsx(NumberField, Object.assign({ dataTestId: key ? key : `monetaryField`, defaultValue: value, disabled: !isEditableCombined, helpText: errorMessage || description, id: uniqueIdentifier, isInvalid: errorMessage ? true : false, label: title, max: (_h = def.maximumNumber) !== null && _h !== void 0 ? _h : undefined, min: (_j = def.minimumNumber) !== null && _j !== void 0 ? _j : undefined, readOnly: !isEditableCombined, step: "any" }, validation.register(uniqueIdentifier, rules), { onChange: e => {
                     setNumberValue(e.target.value === "" ? null : e.target.value);
-                    validation.register(key, rules).onChange(e);
+                    validation.register(uniqueIdentifier, rules).onChange(e);
                 } }, numberProps)));
         }
         default:
-            return exhaustiveCheck(field);
+            return exhaustiveCheck(def.__typename);
     }
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "0.0.695",
+  "version": "0.0.697",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/CustomField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CustomFieldValueAndDefinition } from "@trackunit/custom-field-api";
+import { CustomFieldDefinition, CustomFieldValueAndDefinition } from "@trackunit/custom-field-api";
 import { FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { UnitPreference } from "./UnitPreference";
 /**
@@ -10,7 +10,11 @@ interface CustomFieldProps {
     /**
      * The value and definition of the custom field to be rendered.
      */
-    field: CustomFieldValueAndDefinition;
+    field?: CustomFieldValueAndDefinition;
+    /**
+     * The definition of the custom field to be rendered.
+     */
+    definition?: CustomFieldDefinition;
     /**
      * A function from react-hook-form to register input for validation.
      */
@@ -53,7 +57,7 @@ interface CustomFieldProps {
  * and functions for form registration and state management.
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
  */
-export declare const useCustomFieldResolver: ({ field, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
+export declare const useCustomFieldResolver: ({ field, definition, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | 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