From 63bb33a38bcdc1270fea3a6379ec89d0d28bc12d Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Thu, 7 Nov 2024 18:25:25 +0800
Subject: [PATCH 1/5] fix: make InputPhoneNumber not following any format in
 default

---
 lib/components/Input/base/index.tsx           |  2 +-
 .../input-phone-number.test.tsx.snap          |  5 ++---
 .../__tests__/input-phone-number.test.tsx     | 22 +++++--------------
 .../Input/input-phone-number/index.tsx        |  7 ------
 .../input-phone-number.stories.tsx            |  4 ++++
 5 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/lib/components/Input/base/index.tsx b/lib/components/Input/base/index.tsx
index 79b020ed..b6e01329 100644
--- a/lib/components/Input/base/index.tsx
+++ b/lib/components/Input/base/index.tsx
@@ -269,7 +269,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                                         {leftPlaceholder}
                                     </Text>
                                 )}
-                            {formatProps ? (
+                            {formatProps?.format ? (
                                 <PatternFormat
                                     {...commonProps}
                                     {...formatProps}
diff --git a/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap b/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
index c95740a5..28ef4100 100644
--- a/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
+++ b/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
@@ -68,9 +68,8 @@ exports[`InputPhoneNumber Component should match the snapshot 1`] = `
             <input
               class="input peer input__align--left input__size--lg"
               id="quill-input-1"
-              inputmode="numeric"
-              placeholder="00 0000 0000"
-              type="text"
+              placeholder=" "
+              type="tel"
               value=""
             />
           </div>
diff --git a/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx b/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx
index 8f5b653a..699db314 100644
--- a/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx
+++ b/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx
@@ -24,19 +24,9 @@ describe("InputPhoneNumber Component", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should render correctly with default props", () => {
-        const { getByPlaceholderText } = render(
-            <InputPhoneNumber {...defaultProps} />,
-        );
-        const input = getByPlaceholderText("00 0000 0000");
-        expect(input).toBeInTheDocument();
-    });
-
     it("should call onValueChange when input value changes", () => {
-        const { getByPlaceholderText } = render(
-            <InputPhoneNumber {...defaultProps} />,
-        );
-        const input = getByPlaceholderText("00 0000 0000");
+        const { getByRole } = render(<InputPhoneNumber {...defaultProps} />);
+        const input = getByRole("textbox");
 
         fireEvent.change(input, { target: { value: "1234567890" } });
         expect(defaultProps.onValueChange).toHaveBeenCalledWith("+11234567890");
@@ -62,14 +52,14 @@ describe("InputPhoneNumber Component", () => {
     });
 
     it("should update phone code and input value state", () => {
-        const { getByText, getByPlaceholderText } = render(
+        const { getByText, getByRole } = render(
             <InputPhoneNumber
                 {...defaultProps}
                 shortCode="US"
                 codeLabel="Code"
             />,
         );
-        const input = getByPlaceholderText("00 0000 0000");
+        const input = getByRole("textbox");
         const dropdownButton = getByText("Code");
 
         fireEvent.click(dropdownButton);
@@ -85,7 +75,7 @@ describe("InputPhoneNumber Component", () => {
     });
 
     it("should render custom props correctly", () => {
-        const { getByPlaceholderText } = render(
+        const { getByRole } = render(
             <InputPhoneNumber
                 inputSize="sm"
                 {...defaultProps}
@@ -93,7 +83,7 @@ describe("InputPhoneNumber Component", () => {
                 placeholder="Enter your phone number"
             />,
         );
-        const input = getByPlaceholderText("Enter your phone number");
+        const input = getByRole("textbox");
         expect(input).toBeInTheDocument();
     });
 });
diff --git a/lib/components/Input/input-phone-number/index.tsx b/lib/components/Input/input-phone-number/index.tsx
index fd93d076..56a043fb 100644
--- a/lib/components/Input/input-phone-number/index.tsx
+++ b/lib/components/Input/input-phone-number/index.tsx
@@ -40,11 +40,6 @@ const InputPhoneNumberContent = forwardRef<
             fillAddonBorderColor,
             countryCodes,
             shortCode,
-            placeholder = "00 0000 0000",
-            formatProps = {
-                format: "## #### ####",
-                mask: "",
-            },
             onCodeChange,
             onValueChange,
             showFlags = true,
@@ -129,12 +124,10 @@ const InputPhoneNumberContent = forwardRef<
                 <Input
                     type="tel"
                     value={inputValue}
-                    placeholder={placeholder}
                     addOn={codeAddOn}
                     inputSize={inputSize}
                     status={status}
                     variant={variant}
-                    formatProps={formatProps}
                     onChange={handleInputChange}
                     isDropdownOpen={isOpen}
                     disabled={disabled}
diff --git a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
index c3ca59c2..f212288f 100644
--- a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
+++ b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
@@ -67,6 +67,10 @@ const meta = {
         fieldMarker: false,
         show_counter: false,
         shortCode: "au",
+        formatProps: {
+            format: "",
+            mask: "",
+        },
         fillAddonBorderColor:
             "var(--semantic-color-slate-solid-surface-frame-mid)",
         countryCodes: dummyList,

From c518ce6515ba4e59d1526050d155111052d2d47f Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 8 Nov 2024 11:01:12 +0800
Subject: [PATCH 2/5] chore: add inputmode for InputPhoneNumber component

---
 .../__tests__/__snapshots__/input-phone-number.test.tsx.snap     | 1 +
 lib/components/Input/input-phone-number/index.tsx                | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap b/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
index 28ef4100..66ec2526 100644
--- a/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
+++ b/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
@@ -68,6 +68,7 @@ exports[`InputPhoneNumber Component should match the snapshot 1`] = `
             <input
               class="input peer input__align--left input__size--lg"
               id="quill-input-1"
+              inputmode="numeric"
               placeholder=" "
               type="tel"
               value=""
diff --git a/lib/components/Input/input-phone-number/index.tsx b/lib/components/Input/input-phone-number/index.tsx
index 56a043fb..8856b707 100644
--- a/lib/components/Input/input-phone-number/index.tsx
+++ b/lib/components/Input/input-phone-number/index.tsx
@@ -123,6 +123,7 @@ const InputPhoneNumberContent = forwardRef<
             <div ref={containerRef} className="quill-phone-input__container">
                 <Input
                     type="tel"
+                    inputMode="numeric"
                     value={inputValue}
                     addOn={codeAddOn}
                     inputSize={inputSize}

From 6fe9314c5e9248b3b830d5f9e64b477726b493c5 Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 8 Nov 2024 14:12:18 +0800
Subject: [PATCH 3/5] chore: remove check for formatProps.format in base

---
 lib/components/Input/base/index.tsx                           | 2 +-
 .../Input/input-phone-number/input-phone-number.stories.tsx   | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/lib/components/Input/base/index.tsx b/lib/components/Input/base/index.tsx
index b6e01329..79b020ed 100644
--- a/lib/components/Input/base/index.tsx
+++ b/lib/components/Input/base/index.tsx
@@ -269,7 +269,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                                         {leftPlaceholder}
                                     </Text>
                                 )}
-                            {formatProps?.format ? (
+                            {formatProps ? (
                                 <PatternFormat
                                     {...commonProps}
                                     {...formatProps}
diff --git a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
index f212288f..c3ca59c2 100644
--- a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
+++ b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
@@ -67,10 +67,6 @@ const meta = {
         fieldMarker: false,
         show_counter: false,
         shortCode: "au",
-        formatProps: {
-            format: "",
-            mask: "",
-        },
         fillAddonBorderColor:
             "var(--semantic-color-slate-solid-surface-frame-mid)",
         countryCodes: dummyList,

From 62bf8e62101915124dcdafab5d58be100079756c Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 8 Nov 2024 14:25:58 +0800
Subject: [PATCH 4/5] chore: remove default in read me files

---
 .../Input/input-phone-number/input-phone-number-docs.mdx        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
index c7c42216..812ad80b 100644
--- a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
+++ b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
@@ -32,8 +32,6 @@ import { Markdown } from "@storybook/blocks";
 | inputSize            | "sm", "md" ,"lg"                               | "lg"                       | Sets the size of the input field.                                                         |
 | variant              | "outline" ,"fill"                              | "outline"                  | Sets the variant style of the input.                                                      |
 | status               | "neutral" ,"error" ,"success"                  | "neutral"                  | Sets the status style of the input.                                                       |
-| placeholder          | string                                         | "00 0000 0000"             | Placeholder text for the input field.                                                     |
-| formatProps          | object                                         | { format: "## #### ####" } | Props for formatting the input value.                                                     |
 | value                | string                                         |                            | The current value of the input field.                                                     |
 | disabled             | boolean                                        | false                      | Disables the input field.                                                                 |
 | onChange             | (event: ChangeEvent<HTMLInputElement>) => void |                            | Callback function for handling input changes.                                             |

From 005ff071f8b391887cf682eda9daa183883ab016 Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 8 Nov 2024 14:30:05 +0800
Subject: [PATCH 5/5] chore: remove values in cell

---
 .../Input/input-phone-number/input-phone-number-docs.mdx        | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
index 812ad80b..68b9318f 100644
--- a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
+++ b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
@@ -32,6 +32,8 @@ import { Markdown } from "@storybook/blocks";
 | inputSize            | "sm", "md" ,"lg"                               | "lg"                       | Sets the size of the input field.                                                         |
 | variant              | "outline" ,"fill"                              | "outline"                  | Sets the variant style of the input.                                                      |
 | status               | "neutral" ,"error" ,"success"                  | "neutral"                  | Sets the status style of the input.                                                       |
+| placeholder          | string                                         |                            | Placeholder text for the input field.                                                     |
+| formatProps          | object                                         |                            | Props for formatting the input value.                                                     |
 | value                | string                                         |                            | The current value of the input field.                                                     |
 | disabled             | boolean                                        | false                      | Disables the input field.                                                                 |
 | onChange             | (event: ChangeEvent<HTMLInputElement>) => void |                            | Callback function for handling input changes.                                             |