From 8bebd363d91afa3663b222755825569ba08bcdfa Mon Sep 17 00:00:00 2001
From: Charles <charles@projectbyall.com>
Date: Tue, 24 Dec 2024 15:32:38 +0330
Subject: [PATCH] feat(PhoneInput): add an option to allow the longer numbers
 than mask

---
 src/hooks/usePhoneInput.ts                   |  9 +++++++++
 src/utils/common/__tests__/applyMask.test.ts | 13 +++++++++++++
 src/utils/common/applyMask.ts                | 13 +++++++++++++
 src/utils/handlePhoneChange.ts               |  1 +
 src/utils/handleUserInput.ts                 |  2 ++
 src/utils/phoneUtils/formatPhone.ts          |  5 +++++
 6 files changed, 43 insertions(+)

diff --git a/src/hooks/usePhoneInput.ts b/src/hooks/usePhoneInput.ts
index 6d80b3d..af29f41 100644
--- a/src/hooks/usePhoneInput.ts
+++ b/src/hooks/usePhoneInput.ts
@@ -99,6 +99,12 @@ export interface UsePhoneInputConfig {
    */
   disableFormatting?: boolean;
 
+  /**
+   * @description Allow phone value to be longer than the mask.
+   * @default false
+   */
+  enableLongNumbers?: boolean;
+
   /**
    * @description Callback that calls on phone change
    * @param data - New phone data.
@@ -134,6 +140,7 @@ export const defaultConfig: Required<
   forceDialCode: false,
   disableDialCodeAndPrefix: false,
   disableFormatting: false,
+  enableLongNumbers: false,
   countries: defaultCountries,
   preferredCountries: [],
 };
@@ -151,6 +158,7 @@ export const usePhoneInput = ({
   forceDialCode: forceDialCodeConfig = defaultConfig.forceDialCode,
   disableDialCodeAndPrefix = defaultConfig.disableDialCodeAndPrefix,
   disableFormatting = defaultConfig.disableFormatting,
+  enableLongNumbers = defaultConfig.enableLongNumbers,
   onChange,
   inputRef: inputRefProp,
 }: UsePhoneInputConfig) => {
@@ -166,6 +174,7 @@ export const usePhoneInput = ({
     defaultMask,
     countryGuessingEnabled,
     disableFormatting,
+    enableLongNumbers,
   };
 
   const ref = useRef<HTMLInputElement | null>(null);
diff --git a/src/utils/common/__tests__/applyMask.test.ts b/src/utils/common/__tests__/applyMask.test.ts
index dd21cbb..deaab35 100644
--- a/src/utils/common/__tests__/applyMask.test.ts
+++ b/src/utils/common/__tests__/applyMask.test.ts
@@ -114,4 +114,17 @@ describe('applyMask', () => {
       '(1234',
     );
   });
+
+  test('should handle enableLongNumbers option', () => {
+    const maskConfig = {
+      value: '123456789',
+      mask: '(....) .. ..',
+      maskSymbol: '.',
+    };
+
+    expect(applyMask(maskConfig)).toBe('(1234) 56 78');
+    expect(applyMask({ ...maskConfig, enableLongNumbers: true })).toBe(
+      '123456789',
+    );
+  });
 });
diff --git a/src/utils/common/applyMask.ts b/src/utils/common/applyMask.ts
index 1890305..c9365ef 100644
--- a/src/utils/common/applyMask.ts
+++ b/src/utils/common/applyMask.ts
@@ -22,6 +22,16 @@ interface ApplyMaskArgs {
    * if false -> "(1234) "
    */
   trimNonMaskCharsLeftover?: boolean;
+
+  /**
+   * @description Ignores masking for numbers longer than the mask
+   * @example
+   * value: "123456789"
+   * mask: "(....) ...."
+   * if true -> "123456789"
+   * if false -> "(1234) 5678"
+   */
+  enableLongNumbers?: boolean;
 }
 
 export const applyMask = ({
@@ -30,8 +40,11 @@ export const applyMask = ({
   maskSymbol,
   offset = 0,
   trimNonMaskCharsLeftover = false,
+  enableLongNumbers = false,
 }: ApplyMaskArgs): string => {
   if (value.length < offset) return value;
+  if (enableLongNumbers && value.length > mask.split('.').length - 1)
+    return value;
 
   const savedValuePart = value.slice(0, offset);
   const valueToMask = value.slice(offset);
diff --git a/src/utils/handlePhoneChange.ts b/src/utils/handlePhoneChange.ts
index c8544e4..2cb510a 100644
--- a/src/utils/handlePhoneChange.ts
+++ b/src/utils/handlePhoneChange.ts
@@ -15,6 +15,7 @@ export interface PhoneFormattingConfig {
   defaultMask: string;
   countryGuessingEnabled: boolean;
   disableFormatting: boolean;
+  enableLongNumbers: boolean;
 }
 
 interface HandlePhoneChangeProps extends PhoneFormattingConfig {
diff --git a/src/utils/handleUserInput.ts b/src/utils/handleUserInput.ts
index f8891e1..1bcdc91 100644
--- a/src/utils/handleUserInput.ts
+++ b/src/utils/handleUserInput.ts
@@ -32,6 +32,7 @@ export const handleUserInput = (
     countryGuessingEnabled,
     defaultMask,
     disableFormatting,
+    enableLongNumbers,
     countries,
   }: HandleUserInputOptions,
 ): {
@@ -130,6 +131,7 @@ export const handleUserInput = (
     forceDialCode,
     disableDialCodeAndPrefix,
     disableFormatting,
+    enableLongNumbers,
     defaultMask,
   });
 
diff --git a/src/utils/phoneUtils/formatPhone.ts b/src/utils/phoneUtils/formatPhone.ts
index b200a60..e794a50 100644
--- a/src/utils/phoneUtils/formatPhone.ts
+++ b/src/utils/phoneUtils/formatPhone.ts
@@ -32,6 +32,10 @@ export interface FormatPhoneConfig {
    * Trim all non-digit values from the end of the result
    */
   trimNonDigitsEnd?: boolean;
+  /**
+   * allow to handle long numbers in the input value.
+   */
+  enableLongNumbers?: boolean;
 }
 
 export const formatPhone = (
@@ -137,6 +141,7 @@ export const formatPhone = (
     trimNonMaskCharsLeftover:
       config.trimNonDigitsEnd ||
       (config.disableDialCodeAndPrefix && phoneRightSide.length === 0),
+    enableLongNumbers: config.enableLongNumbers,
   });
 
   if (config.disableDialCodeAndPrefix) {