@trackunit/custom-field-components 0.0.698 → 0.0.701

package/index.cjs.js

@@ -9,7 +9,6 @@ var reactFormComponents = require('@trackunit/react-form-components');
 var sharedUtils = require('@trackunit/shared-utils');
 var React = require('react');
 var uuid = require('uuid');
-var libphonenumberJs = require('libphonenumber-js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -368,22 +367,6 @@ const getEmailValidationRules = (definition) => {
     return definition.uiEditable
         ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
 };
-/**
- * Generates validation rules for a phone number field.
- *
- * @param {CommonValidationRulesDefinition} definition - The definition of the phone number field.
- * @returns {ValidationRules} The generated validation rules.
- */
-const getPhoneNumberValidationRules = (definition) => {
-    const defaultRules = {};
-    const pattern = {
-        validate: value => {
-            return value === "" || value === undefined || value === null || libphonenumberJs.isValidPhoneNumber(value);
-        },
-    };
-    return definition.uiEditable
-        ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
-};
 
 /**
  *  Returns the translation for a unit.
@@ -408,7 +391,7 @@ 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, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
+const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, control, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
@@ -425,6 +408,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
             return "";
         }
     });
+    const { getPhoneNumberValidationRules } = reactFormComponents.useGetPhoneValidationRules();
     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;
@@ -448,13 +432,8 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
         }
         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,
-                    });
-                } })));
+            const rules = getPhoneNumberValidationRules(!Boolean(def.uiEditable));
+            return (jsxRuntime.jsx(reactFormComponents.PhoneFieldWithController, { control: control, controllerProps: { rules }, dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, name: uniqueIdentifier, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }));
         }
         case "StringFieldDefinition": {
             const value = (field === null || field === void 0 ? void 0 : field.__typename) === "StringFieldValueAndDefinition" ? field.stringValue : undefined;

package/index.esm.js

@@ -1,12 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { CustomFieldRuntime } from '@trackunit/iris-app-runtime-core';
-import { FormGroup, Checkbox, DateField, Select, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
+import { FormGroup, Checkbox, DateField, Select, useGetPhoneValidationRules, NumberField, TextField, PhoneFieldWithController, ActionButton } from '@trackunit/react-form-components';
 import { exhaustiveCheck } from '@trackunit/shared-utils';
 import * as React from 'react';
 import { useCallback, useEffect, createElement, useState } from 'react';
 import { v4 } from 'uuid';
-import { isValidPhoneNumber } from 'libphonenumber-js';
 
 var defaultTranslations = {
 	"customfield.unit.acre": "acre",
@@ -345,22 +344,6 @@ const getEmailValidationRules = (definition) => {
     return definition.uiEditable
         ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
 };
-/**
- * Generates validation rules for a phone number field.
- *
- * @param {CommonValidationRulesDefinition} definition - The definition of the phone number field.
- * @returns {ValidationRules} The generated validation rules.
- */
-const getPhoneNumberValidationRules = (definition) => {
-    const defaultRules = {};
-    const pattern = {
-        validate: value => {
-            return value === "" || value === undefined || value === null || isValidPhoneNumber(value);
-        },
-    };
-    return definition.uiEditable
-        ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
-};
 
 /**
  *  Returns the translation for a unit.
@@ -385,7 +368,7 @@ 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, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
+const useCustomFieldResolver = ({ field, definition, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, control, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const validation = { register, setValue, formState };
     const { unitTranslation } = useUnitTranslation();
@@ -402,6 +385,7 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
             return "";
         }
     });
+    const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
     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;
@@ -425,13 +409,8 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
         }
         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,
-                    });
-                } })));
+            const rules = getPhoneNumberValidationRules(!Boolean(def.uiEditable));
+            return (jsx(PhoneFieldWithController, { control: control, controllerProps: { rules }, dataTestId: `${key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, name: uniqueIdentifier, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }));
         }
         case "StringFieldDefinition": {
             const value = (field === null || field === void 0 ? void 0 : field.__typename) === "StringFieldValueAndDefinition" ? field.stringValue : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "0.0.698",
+  "version": "0.0.701",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,7 +16,6 @@
     "@trackunit/iris-app-runtime-core": "*",
     "@trackunit/iris-app-runtime-core-api": "*",
     "react-select": "^5.8.0",
-    "libphonenumber-js": "1.10.36",
     "@testing-library/react": "14.0.0",
     "jest-fetch-mock": "^3.0.3",
     "@trackunit/i18n-library-translation": "*"

package/src/CustomField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CustomFieldDefinition, CustomFieldValueAndDefinition } from "@trackunit/custom-field-api";
-import { FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { Control, FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { UnitPreference } from "./UnitPreference";
 /**
  * CustomFieldProps interface defines the structure for the properties
@@ -47,6 +47,10 @@ interface CustomFieldProps {
      * (Optional) An alternative identifier for the field, which overrides the default definition.key.
      */
     fieldId?: string;
+    /**
+     * Instance of `Control` from `react-hook-form`.
+     */
+    control: Control<any, any>;
 }
 /**
  * A hook that resolves and returns a JSX Element for a given custom field.
@@ -57,7 +61,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, definition, 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, control, }: 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