@pagamio/frontend-commons-lib 0.8.260 → 0.8.261

package/lib/components/ui/PhoneInput.d.ts

@@ -3,7 +3,6 @@ import 'react-phone-number-input/style.css';
 import React from 'react';
 import type { InputProps } from '../../form-engine';
 interface PhoneInputSpecificProps {
-    onCountryChange?: (country: Country) => void;
     defaultCountry?: Country;
 }
 type PhoneInputProps = InputProps & PhoneInputSpecificProps;

package/lib/components/ui/PhoneInput.js

@@ -1,26 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ParseError, isPossiblePhoneNumber, parsePhoneNumberWithError } from 'libphonenumber-js';
-import ReachPhoneNumberInput from 'react-phone-number-input';
+import PhoneNumberInput from 'react-phone-number-input';
 import 'react-phone-number-input/style.css';
-import React, { useState } from 'react';
-const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value, onCountryChange, ...props }, ref) => {
+import React, { useCallback, useState } from 'react';
+const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value }, _ref) => {
+    const defaultCountry = field.defaultCountry ?? 'ZA';
     const [isTouched, setIsTouched] = useState(false);
     const [localError, setLocalError] = useState(null);
-    const defaultCountry = field.defaultCountry ?? 'ZA';
     const isValid = !value || isPossiblePhoneNumber(value);
-    const handleChange = (newValue) => {
+    const handleChange = useCallback((newValue) => {
         onChange?.(newValue);
         setLocalError(null);
         if (newValue) {
             try {
-                const phoneNumber = parsePhoneNumberWithError(newValue, { defaultCountry });
-                if (phoneNumber && onCountryChange) {
-                    onCountryChange(phoneNumber.country);
-                }
+                parsePhoneNumberWithError(newValue, { defaultCountry });
             }
-            catch (error) {
-                if (error instanceof ParseError) {
-                    switch (error.message) {
+            catch (parseError) {
+                if (parseError instanceof ParseError) {
+                    switch (parseError.message) {
                         case 'NOT_A_NUMBER':
                             setLocalError('Please enter a valid phone number.');
                             break;
@@ -37,22 +34,18 @@ const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value, on
                             setLocalError('Invalid phone number.');
                     }
                 }
-                else {
-                    console.error('Unexpected error:', error);
-                }
             }
         }
-    };
-    const handleBlur = () => {
+    }, [onChange, defaultCountry]);
+    const handleBlur = useCallback(() => {
         setIsTouched(true);
         onBlur?.();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(ReachPhoneNumberInput, { international: true, defaultCountry: defaultCountry, value: value || '', onChange: handleChange, id: field.name, onBlur: handleBlur, placeholder: field.placeholder, numberInputProps: {
-                    className: `mt-1 block w-full p-2 border rounded-md shadow-sm 
+    }, [onBlur]);
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(PhoneNumberInput, { international: true, defaultCountry: defaultCountry, value: value || undefined, onChange: handleChange, id: field.name, onBlur: handleBlur, placeholder: field.placeholder, numberInputProps: {
+                    className: `mt-1 block w-full p-2 border rounded-md shadow-sm
               ${error || localError ? 'border-red-500' : 'border-input'}
               ${field.disabled ? 'text-muted-foreground bg-muted' : ''}`,
                     disabled: field.disabled,
-                    ref: ref,
-                }, ...props }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
+                } }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
 });
 export default PhoneInput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.260",
+  "version": "0.8.261",
   "publishConfig": {
     "access": "public",
     "provenance": false