@mvf/external-components 3.32.4-dev.0 → 3.36.0

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -51,11 +51,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@testing-library/react");
+var react_1 = require("react");
+var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var renderWithProviders_1 = __importDefault(require("../../../Helpers/React/renderWithProviders"));
 var PhoneNumberTextField_1 = __importDefault(require("./PhoneNumberTextField"));
 var countryData_1 = require("./__helpers__/utils/countryData");
+// Use the synchronous FlagIcon mock so the real component's async CDN CSS load
+// doesn't fire a state update outside act() during these tests.
+jest.mock('./__helpers__/components/ui/FlagIcon');
+// Reads the `isValid` flag from the most recent onValidationChange call.
+var lastValidationIsValid = function (mock) {
+    var calls = mock.mock.calls;
+    var lastCall = calls[calls.length - 1];
+    return lastCall[0].isValid;
+};
 describe('PhoneNumberTextField', function () {
     var defaultProps = {
         label: 'Phone Number',
@@ -76,30 +86,30 @@ describe('PhoneNumberTextField', function () {
     describe('Basic Rendering', function () {
         it('should display PhoneNumberTextField Component with label', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-            expect(react_1.screen.getByText('Phone Number')).toBeInTheDocument();
+            expect(react_2.screen.getByText('Phone Number')).toBeInTheDocument();
         });
         it('should render with default country (first in list)', function () {
             var countries = (0, countryData_1.getCountryData)();
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
             // Should show the first country's flag and example
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             expect(input).toHaveAttribute('placeholder', countries[0].example);
         });
         it('should render with specified initial country', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "GB" })));
             // Should show UK's example
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             var ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
             expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
         });
         it('should have tel input type by default', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             expect(input).toHaveAttribute('type', 'tel');
         });
         it('should accept custom input type', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { type: "text" })));
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             expect(input).toHaveAttribute('type', 'text');
         });
     });
@@ -108,7 +118,7 @@ describe('PhoneNumberTextField', function () {
             var input;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-                input = react_1.screen.getByRole('textbox');
+                input = react_2.screen.getByRole('textbox');
                 // Type a US phone number
                 user_event_1.default.type(input, '2023456789');
                 // Should be formatted
@@ -120,7 +130,7 @@ describe('PhoneNumberTextField', function () {
             var input;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-                input = react_1.screen.getByRole('textbox');
+                input = react_2.screen.getByRole('textbox');
                 // Type an international number
                 user_event_1.default.type(input, '+441212345678');
                 // Should be formatted and country should change
@@ -136,7 +146,7 @@ describe('PhoneNumberTextField', function () {
                 mockOnFormattedValueChange = jest.fn();
                 mockOnChange = jest.fn();
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onPhoneNumberChange: mockOnPhoneNumberChange, onValidationChange: mockOnValidationChange, onFormattedValueChange: mockOnFormattedValueChange, onChange: mockOnChange })));
-                input = react_1.screen.getByRole('textbox');
+                input = react_2.screen.getByRole('textbox');
                 user_event_1.default.type(input, '2023456789');
                 expect(mockOnPhoneNumberChange).toHaveBeenCalled();
                 expect(mockOnValidationChange).toHaveBeenCalled();
@@ -152,11 +162,11 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         mockOnValidationChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onValidationChange: mockOnValidationChange })));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type a US number
                         user_event_1.default.type(input, '2023456789');
                         // Should call validation callback for each digit
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(mockOnValidationChange).toHaveBeenCalled();
                             })];
                     case 1:
@@ -186,13 +196,13 @@ describe('PhoneNumberTextField', function () {
                         mockOnValidationChange = jest.fn();
                         // Error's are passed in from Chameleon - we check that the error message is displayed if the prop is passed in.
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "Please enter a valid phone number", onValidationChange: mockOnValidationChange })));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type incomplete number
                         user_event_1.default.type(input, '555');
                         // Should show error message from prop
-                        expect(react_1.screen.getByText('Please enter a valid phone number')).toBeInTheDocument();
+                        expect(react_2.screen.getByText('Please enter a valid phone number')).toBeInTheDocument();
                         // Should call validation callback with invalid result
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(mockOnValidationChange).toHaveBeenCalledWith(expect.objectContaining({
                                     isValid: false,
                                     phoneNumber: '555',
@@ -212,13 +222,13 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         mockOnValidationChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onValidationChange: mockOnValidationChange })));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type incomplete number
                         user_event_1.default.type(input, '555');
                         // Should not show any error message in UI
-                        expect(react_1.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
+                        expect(react_2.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
                         // But should still call validation callback with invalid result
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(mockOnValidationChange).toHaveBeenCalledWith(expect.objectContaining({
                                     isValid: false,
                                     phoneNumber: '555',
@@ -235,7 +245,7 @@ describe('PhoneNumberTextField', function () {
     describe('Country Selection', function () {
         it('should show country selector when enableCountryChange is true (default)', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-            var countrySelector = react_1.screen.getByRole('button', {
+            var countrySelector = react_2.screen.getByRole('button', {
                 name: /select country/i,
             });
             expect(countrySelector).toBeInTheDocument();
@@ -243,7 +253,7 @@ describe('PhoneNumberTextField', function () {
         });
         it('should disable country selector when enableCountryChange is false', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { enableCountryChange: false })));
-            var countryDisplay = react_1.screen.getByLabelText(/country:/i);
+            var countryDisplay = react_2.screen.getByLabelText(/country:/i);
             expect(countryDisplay).toBeInTheDocument();
             expect(countryDisplay).toHaveStyle('cursor: default');
         });
@@ -251,12 +261,12 @@ describe('PhoneNumberTextField', function () {
             var countrySelector;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: false })));
-                countrySelector = react_1.screen.getByRole('button', {
+                countrySelector = react_2.screen.getByRole('button', {
                     name: /select country/i,
                 });
                 user_event_1.default.click(countrySelector);
                 // Should open dropdown listbox
-                expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
+                expect(react_2.screen.getByRole('listbox')).toBeInTheDocument();
                 return [2 /*return*/];
             });
         }); });
@@ -266,18 +276,18 @@ describe('PhoneNumberTextField', function () {
                 switch (_a.label) {
                     case 0:
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: true })));
-                        countrySelector = react_1.screen.getByRole('button', {
+                        countrySelector = react_2.screen.getByRole('button', {
                             name: /select country/i,
                         });
                         user_event_1.default.click(countrySelector);
                         // Should open modal
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
-                                expect(react_1.screen.getByRole('dialog')).toBeInTheDocument();
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(react_2.screen.getByRole('dialog')).toBeInTheDocument();
                             })];
                     case 1:
                         // Should open modal
                         _a.sent();
-                        expect(react_1.screen.getByText('Select Country')).toBeInTheDocument();
+                        expect(react_2.screen.getByText('Select Country')).toBeInTheDocument();
                         return [2 /*return*/];
                 }
             });
@@ -287,14 +297,14 @@ describe('PhoneNumberTextField', function () {
             return __generator(this, function (_a) {
                 mockOnCountryChange = jest.fn();
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onCountryChange: mockOnCountryChange, useModalForCountrySelection: false })));
-                countrySelector = react_1.screen.getByRole('button', {
+                countrySelector = react_2.screen.getByRole('button', {
                     name: /select country/i,
                 });
                 user_event_1.default.click(countrySelector);
                 countries = (0, countryData_1.getCountryData)();
                 targetCountry = countries.find(function (c) { return c.code !== countries[0].code; });
                 if (targetCountry) {
-                    countryOption = react_1.screen.getByRole('option', {
+                    countryOption = react_2.screen.getByRole('option', {
                         name: new RegExp(targetCountry.name),
                     });
                     user_event_1.default.click(countryOption);
@@ -314,11 +324,11 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         mockOnCountryChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: true, onCountryChange: mockOnCountryChange })));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type a UK number (+44) - this should trigger auto-detection
                         user_event_1.default.type(input, '+441234567890');
                         // Should call onCountryChange for auto-detection
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
                                     id: 'phone-input',
                                     selectedCountry: expect.objectContaining({
@@ -344,11 +354,11 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         mockOnCountryChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: true, onCountryChange: mockOnCountryChange })));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type a French number (+33) - this should trigger auto-detection
                         user_event_1.default.type(input, '+33123456789');
                         // Should call onCountryChange for auto-detection to France
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
                                     id: 'phone-input',
                                     selectedCountry: expect.objectContaining({
@@ -367,22 +377,98 @@ describe('PhoneNumberTextField', function () {
                 }
             });
         }); });
+        it('should auto-detect and validate an international value against its own country when enableCountryChange is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange, onCountryChange, gbCountry;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        onCountryChange = jest.fn();
+                        // Positive counterpart to the locked-country rejection: the same UK
+                        // number that is invalid on a US-locked input is accepted here because
+                        // auto-detection switches to GB and validates against GB rules.
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+447769481231", initialCountry: "US", enableCountryChange: true, onValidationChange: onValidationChange, onCountryChange: onCountryChange })));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        // The country must actually switch to GB (not merely validate the +44
+                        // prefix, which libphonenumber accepts regardless of the selected
+                        // country): assert both the switch and the resulting validity.
+                        expect(onCountryChange).toHaveBeenCalledWith(expect.objectContaining({
+                            selectedCountry: expect.objectContaining({ code: 'GB' }),
+                            previousCountry: expect.objectContaining({ code: 'US' }),
+                        }));
+                        gbCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
+                        expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', gbCountry === null || gbCountry === void 0 ? void 0 : gbCountry.example);
+                        expect(lastValidationIsValid(onValidationChange)).toBe(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should reformat and re-validate the existing number when the country is changed manually', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onCountryChange, onValidationChange, input, countrySelector, ukOption, ukCountry;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onCountryChange = jest.fn();
+                        onValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", useModalForCountrySelection: false, onCountryChange: onCountryChange, onValidationChange: onValidationChange })));
+                        input = react_2.screen.getByRole('textbox');
+                        // Enter a valid US national number.
+                        user_event_1.default.type(input, '2023456789');
+                        expect(input).toHaveValue('(202) 345-6789');
+                        // It is valid while the US is selected.
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(lastValidationIsValid(onValidationChange)).toBe(true);
+                            })];
+                    case 1:
+                        // It is valid while the US is selected.
+                        _a.sent();
+                        countrySelector = react_2.screen.getByRole('button', {
+                            name: /select country/i,
+                        });
+                        user_event_1.default.click(countrySelector);
+                        ukOption = react_2.screen.getByRole('option', { name: /United Kingdom/ });
+                        user_event_1.default.click(ukOption);
+                        // The manual change is reported with the correct previous/next country.
+                        expect(onCountryChange).toHaveBeenCalledWith(expect.objectContaining({
+                            id: 'phone-input',
+                            selectedCountry: expect.objectContaining({ code: 'GB' }),
+                            previousCountry: expect.objectContaining({ code: 'US' }),
+                        }));
+                        ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
+                        expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
+                        // The previously-entered US number is re-validated against UK rules and
+                        // is no longer valid.
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(lastValidationIsValid(onValidationChange)).toBe(false);
+                            })];
+                    case 2:
+                        // The previously-entered US number is re-validated against UK rules and
+                        // is no longer valid.
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('Error States', function () {
         it('should display external error message', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "This field is required" })));
-            expect(react_1.screen.getByText('This field is required')).toBeInTheDocument();
+            expect(react_2.screen.getByText('This field is required')).toBeInTheDocument();
         });
         it('should prioritize external error over validation error', function () { return __awaiter(void 0, void 0, void 0, function () {
             var input;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "This field is required" })));
-                input = react_1.screen.getByRole('textbox');
+                input = react_2.screen.getByRole('textbox');
                 // Type invalid number (would normally show validation error)
                 user_event_1.default.type(input, '123');
                 // Should still show external error, not validation error
-                expect(react_1.screen.getByText('This field is required')).toBeInTheDocument();
-                expect(react_1.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
+                expect(react_2.screen.getByText('This field is required')).toBeInTheDocument();
+                expect(react_2.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
                 return [2 /*return*/];
             });
         }); });
@@ -390,14 +476,14 @@ describe('PhoneNumberTextField', function () {
     describe('Value Prop and Controlled State', function () {
         it('should parse and display value with country code', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+441212345678" })));
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             // Should show formatted UK number
             expect(input.value).toContain('0121 234 5678');
         });
         it('should detect country from international number', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+441212345678" })));
             // Should detect UK and show UK flag (test indirectly via placeholder)
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             var ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
             expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
         });
@@ -405,22 +491,22 @@ describe('PhoneNumberTextField', function () {
     describe('Accessibility', function () {
         it('should have proper ARIA labels', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             expect(input).toHaveAttribute('id', 'phone-input');
-            var label = react_1.screen.getByText('Phone Number');
+            var label = react_2.screen.getByText('Phone Number');
             expect(label).toHaveAttribute('for', 'phone-input');
         });
         it('should support keyboard navigation for country selector', function () { return __awaiter(void 0, void 0, void 0, function () {
             var countrySelector;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-                countrySelector = react_1.screen.getByRole('button', {
+                countrySelector = react_2.screen.getByRole('button', {
                     name: /select country/i,
                 });
                 // Test Enter key
                 countrySelector.focus();
                 user_event_1.default.keyboard('{Enter}');
-                expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
+                expect(react_2.screen.getByRole('listbox')).toBeInTheDocument();
                 return [2 /*return*/];
             });
         }); });
@@ -428,13 +514,13 @@ describe('PhoneNumberTextField', function () {
             var countrySelector;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-                countrySelector = react_1.screen.getByRole('button', {
+                countrySelector = react_2.screen.getByRole('button', {
                     name: /select country/i,
                 });
                 // Test Space key
                 countrySelector.focus();
                 user_event_1.default.keyboard(' ');
-                expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
+                expect(react_2.screen.getByRole('listbox')).toBeInTheDocument();
                 return [2 /*return*/];
             });
         }); });
@@ -446,13 +532,13 @@ describe('PhoneNumberTextField', function () {
                 switch (_a.label) {
                     case 0:
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: true, enableCountrySearch: true })));
-                        countrySelector = react_1.screen.getByRole('button', {
+                        countrySelector = react_2.screen.getByRole('button', {
                             name: /select country/i,
                         });
                         user_event_1.default.click(countrySelector);
                         // Should show search input in modal
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
-                                expect(react_1.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(react_2.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
                             })];
                     case 1:
                         // Should show search input in modal
@@ -467,13 +553,13 @@ describe('PhoneNumberTextField', function () {
                 switch (_a.label) {
                     case 0:
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { enableCountrySearch: false, useModalForCountrySelection: true })));
-                        countrySelector = react_1.screen.getByRole('button', {
+                        countrySelector = react_2.screen.getByRole('button', {
                             name: /select country/i,
                         });
                         user_event_1.default.click(countrySelector);
                         // Should not show search input in modal
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
-                                expect(react_1.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(react_2.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
                             })];
                     case 1:
                         // Should not show search input in modal
@@ -483,24 +569,54 @@ describe('PhoneNumberTextField', function () {
             });
         }); });
     });
+    describe('Preferred Countries', function () {
+        it('should list preferred countries first in the dropdown in the given order', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector, optionNames;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { preferredCountries: ['FR', 'DE'], useModalForCountrySelection: false })));
+                countrySelector = react_2.screen.getByRole('button', {
+                    name: /select country/i,
+                });
+                user_event_1.default.click(countrySelector);
+                optionNames = react_2.screen
+                    .getAllByRole('option')
+                    .map(function (o) { var _a, _b; return (_b = (_a = o.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : o.textContent) !== null && _b !== void 0 ? _b : ''; });
+                // Preferred countries come first, in the order they were provided,
+                // ahead of the alphabetical remainder (which starts at Afghanistan).
+                expect(optionNames[0]).toContain('France');
+                expect(optionNames[1]).toContain('Germany');
+                expect(optionNames[2]).toContain('Afghanistan');
+                return [2 /*return*/];
+            });
+        }); });
+        it('should default to the first preferred country when no initialCountry is given', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { preferredCountries: ['FR', 'DE'] })));
+            // With FR promoted to the top of the list, it becomes the fallback
+            // selected country and drives the placeholder. The expected example is
+            // hardcoded so a getCountryData ordering regression is actually caught
+            // (deriving it from getCountryData would move both sides together).
+            var input = react_2.screen.getByRole('textbox');
+            expect(input).toHaveAttribute('placeholder', '01 23 45 67 89');
+        });
+    });
     describe('Edge Cases', function () {
         it('should handle empty value gracefully', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "" })));
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             expect(input).toHaveValue('');
         });
         it('should handle invalid initial country code', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "INVALID" })));
             // Should fallback to first country
             var countries = (0, countryData_1.getCountryData)();
-            var input = react_1.screen.getByRole('textbox');
+            var input = react_2.screen.getByRole('textbox');
             expect(input).toHaveAttribute('placeholder', countries[0].example);
         });
         it('should handle cursor position correctly during formatting', function () { return __awaiter(void 0, void 0, void 0, function () {
             var input;
             return __generator(this, function (_a) {
                 (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
-                input = react_1.screen.getByRole('textbox');
+                input = react_2.screen.getByRole('textbox');
                 // Type partial number
                 user_event_1.default.type(input, '202345');
                 // Set cursor in middle
@@ -521,12 +637,12 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         onCountryChange = jest.fn();
                         onPhoneNumberChange = jest.fn();
-                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: false, onBlur: function () { }, onClick: function () { }, disabled: false, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test", onCountryChange: onCountryChange, onPhoneNumberChange: onPhoneNumberChange }));
-                        input = react_1.screen.getByRole('textbox');
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: false, onCountryChange: onCountryChange, onPhoneNumberChange: onPhoneNumberChange })));
+                        input = react_2.screen.getByRole('textbox');
                         // Type a UK number (+44) while US is selected
                         user_event_1.default.type(input, '+447769481232');
                         // Wait for state updates
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(onPhoneNumberChange).toHaveBeenCalled();
                             })];
                     case 1:
@@ -544,25 +660,158 @@ describe('PhoneNumberTextField', function () {
             });
         }); });
         it('should validate against selected country only when enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onValidationChange, input, lastCall, lastCallData;
+            var onValidationChange, input;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         onValidationChange = jest.fn();
-                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: false, onBlur: function () { }, onClick: function () { }, disabled: false, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test", onValidationChange: onValidationChange }));
-                        input = react_1.screen.getByRole('textbox');
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
+                        input = react_2.screen.getByRole('textbox');
                         // Type a UK number that's invalid for US
                         user_event_1.default.type(input, '+447769481231');
                         // Wait for validation
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(onValidationChange).toHaveBeenCalled();
                             })];
                     case 1:
                         // Wait for validation
                         _a.sent();
-                        lastCall = onValidationChange.mock.calls[onValidationChange.mock.calls.length - 1];
-                        lastCallData = lastCall[0];
-                        expect(lastCallData.isValid).toBe(false);
+                        // Should be marked as invalid since it's being validated against US rules
+                        expect(lastValidationIsValid(onValidationChange)).toBe(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should mark an international value as invalid for the selected country when enableCountryChange is false (controlled value)', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        // A controlled international value (e.g. round-tripped back from a parent
+                        // form) must be validated against the locked country, not auto-detected.
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+447769481231", initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        // A UK number on a US-locked input must be rejected, not accepted just
+                        // because libphonenumber can parse the explicit +44 prefix.
+                        expect(lastValidationIsValid(onValidationChange)).toBe(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should mark a value matching the selected country as valid when enableCountryChange is false (controlled value)', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        // Positive counterpart to the rejection tests: a value whose dial code
+                        // matches the locked country must still pass validation, proving
+                        // validateForLockedCountry rejects only mismatched prefixes.
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+12023456789", initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(lastValidationIsValid(onValidationChange)).toBe(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should transition from invalid to valid as a complete national number is typed when enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
+                        input = react_2.screen.getByRole('textbox');
+                        // A partial US number (no + prefix) on a US-locked input is invalid.
+                        user_event_1.default.type(input, '202');
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(lastValidationIsValid(onValidationChange)).toBe(false);
+                        // Completing the number flips validation to valid.
+                        user_event_1.default.type(input, '3456789');
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(lastValidationIsValid(onValidationChange)).toBe(true);
+                            })];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should re-validate when the controlled value prop changes from invalid to valid', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange, ControlledValueHarness;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        ControlledValueHarness = function () {
+                            var _a = (0, react_1.useState)('123'), value = _a[0], setValue = _a[1];
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setValue('+12023456789'); } }, { children: "set-valid" })), (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: value, initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange }))] }));
+                        };
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ControlledValueHarness, {}));
+                        // The initial controlled value is invalid for US.
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        // The initial controlled value is invalid for US.
+                        _a.sent();
+                        expect(lastValidationIsValid(onValidationChange)).toBe(false);
+                        // Swapping the prop to a valid US number re-validates to valid.
+                        user_event_1.default.click(react_2.screen.getByRole('button', { name: 'set-valid' }));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(lastValidationIsValid(onValidationChange)).toBe(true);
+                            })];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        // Guards against a US-only assumption in the locked-country logic: the
+        // locked country drives validation regardless of which country it is.
+        it('should accept a matching number on a GB-locked input when enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+447769481231", initialCountry: "GB", enableCountryChange: false, onValidationChange: onValidationChange })));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(lastValidationIsValid(onValidationChange)).toBe(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should reject a US number on a GB-locked input when enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+12023456789", initialCountry: "GB", enableCountryChange: false, onValidationChange: onValidationChange })));
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        expect(lastValidationIsValid(onValidationChange)).toBe(false);
                         return [2 /*return*/];
                 }
             });
@@ -573,7 +822,7 @@ describe('PhoneNumberTextField', function () {
             var onCountryChange = jest.fn();
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: true, onBlur: function () { }, onClick: function () { }, disabled: true, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test", onCountryChange: onCountryChange }));
             // Find the country selector by its aria-label (when disabled, it's not a button)
-            var countrySelector = react_1.screen.getByLabelText('Country: United States');
+            var countrySelector = react_2.screen.getByLabelText('Country: United States');
             // When disabled, the country selector should not be interactive
             // It should not have a button role and should not respond to clicks
             expect(countrySelector).toBeInTheDocument();
@@ -586,8 +835,8 @@ describe('PhoneNumberTextField', function () {
         });
         it('should disable both phone input and country selector when disabled is true', function () {
             (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: true, onBlur: function () { }, onClick: function () { }, disabled: true, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test" }));
-            var input = react_1.screen.getByRole('textbox');
-            var countrySelector = react_1.screen.getByLabelText('Country: United States');
+            var input = react_2.screen.getByRole('textbox');
+            var countrySelector = react_2.screen.getByLabelText('Country: United States');
             // Both should be disabled
             expect(input).toBeDisabled();
             expect(countrySelector).toBeInTheDocument();
@@ -606,10 +855,10 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         onPhoneNumberChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "cursor-test", label: "Phone Number", onPhoneNumberChange: onPhoneNumberChange, initialCountry: "US", experimentName: "cursor-test" }));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type a full phone number first
                         user_event_1.default.type(input, '2023456789');
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(input).toHaveValue('(202) 345-6789');
                             })];
                     case 1:
@@ -617,7 +866,7 @@ describe('PhoneNumberTextField', function () {
                         // Clear and test editing from beginning
                         user_event_1.default.clear(input);
                         user_event_1.default.type(input, '+12023456789');
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 // Should format as international number
                                 expect(input.value).toContain('202');
                                 expect(input.value).toContain('345');
@@ -637,10 +886,10 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         onPhoneNumberChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "international-cursor-test", label: "Phone Number", onPhoneNumberChange: onPhoneNumberChange, initialCountry: "US", enableCountryChange: true, experimentName: "international-cursor-test" }));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type an international number
                         user_event_1.default.type(input, '+447700900123');
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(onPhoneNumberChange).toHaveBeenCalled();
                             })];
                     case 1:
@@ -658,10 +907,10 @@ describe('PhoneNumberTextField', function () {
                     case 0:
                         onPhoneNumberChange = jest.fn();
                         (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "middle-cursor-test", label: "Phone Number", onPhoneNumberChange: onPhoneNumberChange, initialCountry: "US", experimentName: "middle-cursor-test" }));
-                        input = react_1.screen.getByRole('textbox');
+                        input = react_2.screen.getByRole('textbox');
                         // Type initial number
                         user_event_1.default.type(input, '2023456789');
-                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return [4 /*yield*/, (0, react_2.waitFor)(function () {
                                 expect(input).toHaveValue('(202) 345-6789');
                             })];
                     case 1:
@@ -671,7 +920,7 @@ describe('PhoneNumberTextField', function () {
                             value: { value: '(202) 355-6789', selectionStart: 7 },
                             enumerable: true,
                         });
-                        (0, react_1.fireEvent)(input, changeEvent);
+                        (0, react_2.fireEvent)(input, changeEvent);
                         // The component should handle the change without cursor jumping
                         expect(onPhoneNumberChange).toHaveBeenCalled();
                         return [2 /*return*/];