@trackunit/react-form-components 0.1.1 → 0.1.3

package/index.cjs.js

@@ -39,10 +39,19 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
+	"colorField.error.INVALID_HEX_CODE": "Please enter a valid HEX code",
+	"colorField.error.REQUIRED": "This field is required",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
+	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
+	"emailField.error.REQUIRED": "The email address is required",
 	"field.notEditable.tooltip": "This field is not editable",
 	"field.required.asterisk.tooltip": "This field is required",
+	"numberField.error.GREATER_THAN": "Value must be greater than or equal to {{min}}",
+	"numberField.error.INVALID_NUMBER": "Please enter a valid number",
+	"numberField.error.LESS_THAN": "Value must be less than or equal to {{max}}",
+	"numberField.error.NOT_IN_BETWEEN": "Must be between {{min}} and {{max}}",
+	"numberField.error.REQUIRED": "This field is required",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -51,7 +60,9 @@ var defaultTranslations = {
 	"phoneField.error.REQUIRED_COUNTRY": "The country code is required",
 	"phoneField.error.TOO_LONG": "The phone number is too long",
 	"phoneField.error.TOO_SHORT": "The phone number is too short",
-	"phoneField.error.undefined": ""
+	"phoneField.error.undefined": "",
+	"urlField.error.INVALID_URL": "Please enter a valid URL",
+	"urlField.error.REQUIRED": "The URL is required"
 };
 
 /** The translation namespace for this library */
@@ -630,6 +641,39 @@ const CheckboxField = React.forwardRef(({ label, id, tip, helpText, helpAddon, i
 });
 CheckboxField.displayName = "CheckboxField";
 
+/**
+ *
+ * @param inputValue - value to check if it is a string
+ * @returns {boolean} - true if value is a string
+ */
+const isString = (inputValue) => {
+    return typeof inputValue === "string";
+};
+/**
+ *
+ * @param inputValue - value to check if it is a number
+ * @returns {boolean} - true if value is a number
+ */
+const isNumber = (inputValue) => {
+    return typeof inputValue === "number";
+};
+
+/**
+ * Validates a url
+ */
+const validateColorCode = (colorCode, required) => {
+    if (!colorCode && !required) {
+        return undefined;
+    }
+    if (!colorCode && required) {
+        return "REQUIRED";
+    }
+    if (colorCode && isString(colorCode) && isValidHEXColor(colorCode)) {
+        return undefined;
+    }
+    return "INVALID_HEX_CODE";
+};
+
 /**
  * Validates if the given value is a valid hex color.
  *
@@ -645,25 +689,34 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, ...rest }, ref) => {
+const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, ...rest }, ref) => {
     const htmlForId = React.useMemo(() => (id ? id : "colorField-" + uuid.v4()), [id]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
+    const [t] = useTranslation();
     // Internal state for color value
-    const [value, setValue] = React.useState(propValue || defaultValue || "");
+    const [innerValue, setInnerValue] = React.useState(propValue || defaultValue || "");
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
+    const errorType = React.useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
+    const error = React.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    const handleBlur = React.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        setRenderAsInvalid(!!errorType);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [errorType, onBlur]);
     const handleChange = React.useCallback((event) => {
         const newValue = event.target.value;
-        setValue(newValue);
+        setInnerValue(newValue);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(value)) || isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "ml-2 h-[30px] w-[40px] self-center rounded-full bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onChange: handleChange, type: "text", value: value }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "ml-2 h-[30px] w-[40px] self-center rounded-full bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onBlur: handleBlur, onChange: handleChange, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onBlur: handleBlur, onChange: handleChange, type: "text", value: innerValue }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
                         if (innerRef.current) {
                             innerRef.current.click();
                         }
@@ -824,6 +877,22 @@ const validateEmailAddress = (email) => {
     return EMAIL_REGEX.test(email);
 };
 
+/**
+ * Validates a email id
+ */
+const validateEmailId = (emailId, required) => {
+    if (!emailId && !required) {
+        return undefined;
+    }
+    if (!emailId && required) {
+        return "REQUIRED";
+    }
+    if (emailId && isString(emailId) && validateEmailAddress(emailId)) {
+        return undefined;
+    }
+    return "INVALID_EMAIL";
+};
+
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -854,22 +923,82 @@ EmailInput.displayName = "EmailInput";
  * EmailField validates that user enters a valid email address.
  *
  */
-const EmailField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, disabled, onChange, isInvalid = false, ...rest }, ref) => {
+const EmailField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, disabled, onChange, onBlur, isInvalid = false, ...rest }, ref) => {
     const htmlForId = id ? id : "emailField-" + uuid.v4();
-    // Type guard to check if value is a string
-    function isString(inputValue) {
-        return typeof inputValue === "string";
-    }
-    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid;
+    const [t] = useTranslation();
+    const [innerValue, setInnerValue] = React.useState(() => {
+        var _a;
+        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+    });
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid);
+    const errorType = React.useMemo(() => validateEmailId(innerValue !== null && innerValue !== void 0 ? innerValue : "", rest.required), [rest.required, innerValue]);
+    const error = React.useMemo(() => (errorType ? t(`emailField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    const handleBlur = React.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        setRenderAsInvalid(!!errorType);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [errorType, onBlur]);
     const handleChange = React.useCallback((event) => {
+        setInnerValue(event.target.value);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(EmailInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(EmailInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, disabled: disabled, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 EmailField.displayName = "EmailField";
 
+const isNumberValid = (number) => {
+    if (!isNaN(+number) === false) {
+        return false;
+    }
+    if (typeof number === "number") {
+        return true;
+    }
+    return /^(?=.)([+-]?([0-9]*)(\.([0-9]+))?)$/.test(number);
+};
+/**
+ * Validates a number
+ */
+const validateNumber = (number, required = false, min, max) => {
+    const parsedNumber = Number(number);
+    const minValue = typeof min === "string" ? parseFloat(min) : min;
+    const maxValue = typeof max === "string" ? parseFloat(max) : max;
+    if (number === undefined) {
+        return undefined;
+    }
+    // if the value is a string eg:'test'
+    if (number && !isNaN(+number) === false) {
+        return "INVALID_NUMBER";
+    }
+    // if the value is empty and not required
+    if (!Number.isNaN(parsedNumber) && !parsedNumber && !required && !min && !max) {
+        return undefined;
+    }
+    // if the value is empty and required
+    if (!Number.isNaN(parsedNumber) && !parsedNumber && required) {
+        return "REQUIRED";
+    }
+    // if the value is not in between min and max
+    if (minValue && maxValue && isNumberValid(parsedNumber) && !(parsedNumber >= minValue && parsedNumber <= maxValue)) {
+        return "NOT_IN_BETWEEN";
+    }
+    // if the value is less than min
+    if (isNumberValid(parsedNumber) && minValue !== undefined && parsedNumber < minValue) {
+        return "GREATER_THAN";
+    }
+    // if the value is greater than max
+    if (isNumberValid(parsedNumber) && maxValue !== undefined && parsedNumber > maxValue) {
+        return "LESS_THAN";
+    }
+    // if the value is a number and is valid
+    if (isNumber(parsedNumber) && isNumberValid(parsedNumber)) {
+        return undefined;
+    }
+    return "INVALID_NUMBER";
+};
+
 /**
  * A thin wrapper around the `BaseInput` component for number input fields.
  *
@@ -887,10 +1016,39 @@ NumberInput.displayName = "NumberInput";
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, ...rest }, ref) => {
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+const NumberField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, ...rest }, ref) => {
     const htmlForId = id ? id : "numberField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    const [t] = useTranslation();
+    const [innerValue, setInnerValue] = React.useState(() => {
+        return Number(value === null || value === void 0 ? void 0 : value.toString()) || Number(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString());
+    });
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
+        !!validateNumber(value === null || value === void 0 ? void 0 : value.toString(), rest.required, rest.min, rest.max));
+    const errorType = React.useMemo(() => validateNumber(innerValue, rest.required, rest.min, rest.max), [innerValue, rest.max, rest.min, rest.required]);
+    const error = React.useMemo(() => {
+        // for the case when a custom error message is provided
+        if (errorMessage) {
+            setRenderAsInvalid(Boolean(errorMessage));
+            return errorMessage;
+        }
+        else if (errorType) {
+            return t(`numberField.error.${errorType}`, { min: rest.min, max: rest.max });
+        }
+        return errorMessage;
+    }, [errorMessage, errorType, rest.max, rest.min, t]);
+    const handleBlur = React.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue.toString());
+        // for the case when a custom error message is provided
+        if (errorMessage && !validateNumber(newValue, rest.required, rest.min, rest.max)) {
+            setRenderAsInvalid(Boolean(errorMessage));
+        }
+        else {
+            setRenderAsInvalid(!!validateNumber(newValue, rest.required, rest.min, rest.max));
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [errorMessage, onBlur, rest.max, rest.min, rest.required]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 NumberField.displayName = "NumberField";
 
@@ -1071,39 +1229,6 @@ const PhoneInput = React.forwardRef(({ dataTestId, isInvalid, disabled = false,
 });
 PhoneInput.displayName = "PhoneInput";
 
-/**
- * The PhoneField component is used to enter phone number.
- * It is a wrapper around the PhoneInput component and the FormGroup component.
- * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
- *
- * @param {string} [label] - The label for the component.
- * @param {string} [tip] - The tip for the component.
- * @param {string} [helpText] - The help text for the component.
- * @param {string} [helpAddon] - The help addon for the component.
- * @param {string} [errorMessage] - The error message for the component.
- * @param {string} [defaultValue] - The default value for the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} [fieldSize="medium"] - The size of the input field.
- * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneField component.
- */
-const PhoneField = React.forwardRef(({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onChange, onBlur, ...rest }, ref) => {
-    const htmlForId = id ? id : "phoneField-" + uuid.v4();
-    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PhoneInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: onBlur, onChange: onChange, ref: ref, value: value, ...rest }) }));
-});
-PhoneField.displayName = "PhoneField";
-
-/**
- * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
- *
- * @returns {JSX.Element} - The PhoneFieldWithController component.
- */
-const PhoneFieldWithController = React.forwardRef(({ control, controllerProps, name, value, ...rest }, ref) => {
-    return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: value, name: name, ...controllerProps, render: ({ field }) => jsxRuntime.jsx(PhoneField, { ...rest, ...field, ref: ref }) }));
-});
-PhoneFieldWithController.displayName = "PhoneFieldWithController";
-
 /**
  * Validates a phone number
  */
@@ -1143,6 +1268,79 @@ const isInvalidCountryCode = (error, required) => (!!required && error === "REQU
  * Checks if the phone number is valid and required
  */
 const isInvalidPhoneNumber = (error, required) => error !== "REQUIRED_COUNTRY" && ((!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED"));
+/**
+ * Checks if the phone number is valid and returns corresponding error message
+ */
+const phoneErrorMessage = (phoneNumber, required) => {
+    if ((validatePhoneNumber(phoneNumber) === "REQUIRED" && !required) ||
+        (validatePhoneNumber(phoneNumber) === "REQUIRED" && required && phoneNumber === undefined)) {
+        return undefined;
+    }
+    return validatePhoneNumber(phoneNumber);
+};
+
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+const PhoneField = React.forwardRef(({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ...rest }, ref) => {
+    const htmlForId = id ? id : "phoneField-" + uuid.v4();
+    const [t] = useTranslation();
+    const [innerValue, setInnerValue] = React.useState(() => {
+        var _a;
+        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : undefined;
+    });
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState((isInvalid === undefined ? Boolean(errorMessage) : isInvalid) ||
+        !!phoneErrorMessage(value === null || value === void 0 ? void 0 : value.toString(), rest.required));
+    const errorType = React.useMemo(() => phoneErrorMessage(innerValue, rest.required), [innerValue, rest.required]);
+    const error = React.useMemo(() => {
+        // for the case when a custom error message is provided
+        if (errorMessage) {
+            setRenderAsInvalid(Boolean(errorMessage));
+            return errorMessage;
+        }
+        else if (errorType) {
+            return t(`phoneField.error.${errorType}`);
+        }
+        return errorMessage;
+    }, [errorMessage, errorType, t]);
+    const handleBlur = React.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        // for the case when a custom error message is provided
+        if (errorMessage && !phoneErrorMessage(newValue.toString(), rest.required)) {
+            setRenderAsInvalid(Boolean(errorMessage));
+        }
+        else {
+            setRenderAsInvalid(!!phoneErrorMessage(newValue.toString(), rest.required));
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [errorMessage, onBlur, rest.required]);
+    return (jsxRuntime.jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PhoneInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
+});
+PhoneField.displayName = "PhoneField";
+
+/**
+ * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
+ *
+ * @returns {JSX.Element} - The PhoneFieldWithController component.
+ */
+const PhoneFieldWithController = React.forwardRef(({ control, controllerProps, name, value, ...rest }, ref) => {
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: value, name: name, ...controllerProps, render: ({ field }) => jsxRuntime.jsx(PhoneField, { ...rest, ...field, ref: ref }) }));
+});
+PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
 const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
@@ -2454,6 +2652,22 @@ const validateUrlAddress = (url) => {
     return urlPattern.test(url);
 };
 
+/**
+ * Validates a url
+ */
+const validateUrl = (url, required) => {
+    if (!url && !required) {
+        return undefined;
+    }
+    if (!url && required) {
+        return "REQUIRED";
+    }
+    if (url && isString(url) && validateUrlAddress(url)) {
+        return undefined;
+    }
+    return "INVALID_URL";
+};
+
 /**
  * A thin wrapper around the `BaseInput` component for URL input fields.
  *
@@ -2471,14 +2685,23 @@ UrlInput.displayName = "UrlField";
  * UrlField validates that user enters a valid web address.
  *
  */
-const UrlField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, ...rest }, ref) => {
+const UrlField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ...rest }, ref) => {
     const htmlForId = id ? id : "urlField-" + uuid.v4();
-    // Type guard to check if value is a string
-    function isString(inputValue) {
-        return typeof inputValue === "string";
-    }
-    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
+    const [t] = useTranslation();
+    const [innerValue, setInnerValue] = React.useState(() => {
+        var _a;
+        return (_a = ((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()))) !== null && _a !== void 0 ? _a : "";
+    });
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState(!!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid);
+    const errorType = React.useMemo(() => validateUrl(innerValue !== null && innerValue !== void 0 ? innerValue : "", rest.required), [rest.required, innerValue]);
+    const error = React.useMemo(() => (errorType ? t(`urlField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    const handleBlur = React.useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        setRenderAsInvalid(!!validateUrl(newValue, rest.required));
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur, rest.required]);
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
 });
 UrlField.displayName = "UrlField";
 
@@ -2667,6 +2890,7 @@ exports.isInvalidPhoneNumber = isInvalidPhoneNumber;
 exports.isMultiValue = isMultiValue;
 exports.isValidHEXColor = isValidHEXColor;
 exports.parseSchedule = parseSchedule;
+exports.phoneErrorMessage = phoneErrorMessage;
 exports.serializeSchedule = serializeSchedule;
 exports.useCustomComponents = useCustomComponents;
 exports.useGetPhoneValidationRules = useGetPhoneValidationRules;