@mvf/external-components 3.35.0 → 3.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js +322 -73
  2. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js.map +1 -1
  3. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js +4 -1
  4. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js.map +1 -1
  5. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.js +1 -1
  6. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.js.map +1 -1
  7. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.test.js +7 -2
  8. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.test.js.map +1 -1
  9. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js +3 -0
  10. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js.map +1 -1
  11. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/__mocks__/FlagIcon.d.ts +20 -0
  12. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/__mocks__/FlagIcon.js +22 -0
  13. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/__mocks__/FlagIcon.js.map +1 -0
  14. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js +30 -23
  15. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js.map +1 -1
  16. package/package.json +1 -1
  17. package/setupTests.js +14 -1
  18. package/setupTests.js.map +1 -1
package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js CHANGED
@@ -51,11 +51,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
51
51
  };
52
52
  Object.defineProperty(exports, "__esModule", { value: true });
53
53
  var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
54
- var react_1 = require("@testing-library/react");
54
+ var react_1 = require("react");
55
+ var react_2 = require("@testing-library/react");
55
56
  var user_event_1 = __importDefault(require("@testing-library/user-event"));
56
57
  var renderWithProviders_1 = __importDefault(require("../../../Helpers/React/renderWithProviders"));
57
58
  var PhoneNumberTextField_1 = __importDefault(require("./PhoneNumberTextField"));
58
59
  var countryData_1 = require("./__helpers__/utils/countryData");
60
+ // Use the synchronous FlagIcon mock so the real component's async CDN CSS load
61
+ // doesn't fire a state update outside act() during these tests.
62
+ jest.mock('./__helpers__/components/ui/FlagIcon');
63
+ // Reads the `isValid` flag from the most recent onValidationChange call.
64
+ var lastValidationIsValid = function (mock) {
65
+ var calls = mock.mock.calls;
66
+ var lastCall = calls[calls.length - 1];
67
+ return lastCall[0].isValid;
68
+ };
59
69
  describe('PhoneNumberTextField', function () {
60
70
  var defaultProps = {
61
71
  label: 'Phone Number',
@@ -76,30 +86,30 @@ describe('PhoneNumberTextField', function () {
76
86
  describe('Basic Rendering', function () {
77
87
  it('should display PhoneNumberTextField Component with label', function () {
78
88
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
79
- expect(react_1.screen.getByText('Phone Number')).toBeInTheDocument();
89
+ expect(react_2.screen.getByText('Phone Number')).toBeInTheDocument();
80
90
  });
81
91
  it('should render with default country (first in list)', function () {
82
92
  var countries = (0, countryData_1.getCountryData)();
83
93
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
84
94
  // Should show the first country's flag and example
85
- var input = react_1.screen.getByRole('textbox');
95
+ var input = react_2.screen.getByRole('textbox');
86
96
  expect(input).toHaveAttribute('placeholder', countries[0].example);
87
97
  });
88
98
  it('should render with specified initial country', function () {
89
99
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "GB" })));
90
100
  // Should show UK's example
91
- var input = react_1.screen.getByRole('textbox');
101
+ var input = react_2.screen.getByRole('textbox');
92
102
  var ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
93
103
  expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
94
104
  });
95
105
  it('should have tel input type by default', function () {
96
106
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
97
- var input = react_1.screen.getByRole('textbox');
107
+ var input = react_2.screen.getByRole('textbox');
98
108
  expect(input).toHaveAttribute('type', 'tel');
99
109
  });
100
110
  it('should accept custom input type', function () {
101
111
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { type: "text" })));
102
- var input = react_1.screen.getByRole('textbox');
112
+ var input = react_2.screen.getByRole('textbox');
103
113
  expect(input).toHaveAttribute('type', 'text');
104
114
  });
105
115
  });
@@ -108,7 +118,7 @@ describe('PhoneNumberTextField', function () {
108
118
  var input;
109
119
  return __generator(this, function (_a) {
110
120
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
111
- input = react_1.screen.getByRole('textbox');
121
+ input = react_2.screen.getByRole('textbox');
112
122
  // Type a US phone number
113
123
  user_event_1.default.type(input, '2023456789');
114
124
  // Should be formatted
@@ -120,7 +130,7 @@ describe('PhoneNumberTextField', function () {
120
130
  var input;
121
131
  return __generator(this, function (_a) {
122
132
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
123
- input = react_1.screen.getByRole('textbox');
133
+ input = react_2.screen.getByRole('textbox');
124
134
  // Type an international number
125
135
  user_event_1.default.type(input, '+441212345678');
126
136
  // Should be formatted and country should change
@@ -136,7 +146,7 @@ describe('PhoneNumberTextField', function () {
136
146
  mockOnFormattedValueChange = jest.fn();
137
147
  mockOnChange = jest.fn();
138
148
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onPhoneNumberChange: mockOnPhoneNumberChange, onValidationChange: mockOnValidationChange, onFormattedValueChange: mockOnFormattedValueChange, onChange: mockOnChange })));
139
- input = react_1.screen.getByRole('textbox');
149
+ input = react_2.screen.getByRole('textbox');
140
150
  user_event_1.default.type(input, '2023456789');
141
151
  expect(mockOnPhoneNumberChange).toHaveBeenCalled();
142
152
  expect(mockOnValidationChange).toHaveBeenCalled();
@@ -152,11 +162,11 @@ describe('PhoneNumberTextField', function () {
152
162
  case 0:
153
163
  mockOnValidationChange = jest.fn();
154
164
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onValidationChange: mockOnValidationChange })));
155
- input = react_1.screen.getByRole('textbox');
165
+ input = react_2.screen.getByRole('textbox');
156
166
  // Type a US number
157
167
  user_event_1.default.type(input, '2023456789');
158
168
  // Should call validation callback for each digit
159
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
169
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
160
170
  expect(mockOnValidationChange).toHaveBeenCalled();
161
171
  })];
162
172
  case 1:
@@ -186,13 +196,13 @@ describe('PhoneNumberTextField', function () {
186
196
  mockOnValidationChange = jest.fn();
187
197
  // Error's are passed in from Chameleon - we check that the error message is displayed if the prop is passed in.
188
198
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "Please enter a valid phone number", onValidationChange: mockOnValidationChange })));
189
- input = react_1.screen.getByRole('textbox');
199
+ input = react_2.screen.getByRole('textbox');
190
200
  // Type incomplete number
191
201
  user_event_1.default.type(input, '555');
192
202
  // Should show error message from prop
193
- expect(react_1.screen.getByText('Please enter a valid phone number')).toBeInTheDocument();
203
+ expect(react_2.screen.getByText('Please enter a valid phone number')).toBeInTheDocument();
194
204
  // Should call validation callback with invalid result
195
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
205
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
196
206
  expect(mockOnValidationChange).toHaveBeenCalledWith(expect.objectContaining({
197
207
  isValid: false,
198
208
  phoneNumber: '555',
@@ -212,13 +222,13 @@ describe('PhoneNumberTextField', function () {
212
222
  case 0:
213
223
  mockOnValidationChange = jest.fn();
214
224
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onValidationChange: mockOnValidationChange })));
215
- input = react_1.screen.getByRole('textbox');
225
+ input = react_2.screen.getByRole('textbox');
216
226
  // Type incomplete number
217
227
  user_event_1.default.type(input, '555');
218
228
  // Should not show any error message in UI
219
- expect(react_1.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
229
+ expect(react_2.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
220
230
  // But should still call validation callback with invalid result
221
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
231
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
222
232
  expect(mockOnValidationChange).toHaveBeenCalledWith(expect.objectContaining({
223
233
  isValid: false,
224
234
  phoneNumber: '555',
@@ -235,7 +245,7 @@ describe('PhoneNumberTextField', function () {
235
245
  describe('Country Selection', function () {
236
246
  it('should show country selector when enableCountryChange is true (default)', function () {
237
247
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
238
- var countrySelector = react_1.screen.getByRole('button', {
248
+ var countrySelector = react_2.screen.getByRole('button', {
239
249
  name: /select country/i,
240
250
  });
241
251
  expect(countrySelector).toBeInTheDocument();
@@ -243,7 +253,7 @@ describe('PhoneNumberTextField', function () {
243
253
  });
244
254
  it('should disable country selector when enableCountryChange is false', function () {
245
255
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { enableCountryChange: false })));
246
- var countryDisplay = react_1.screen.getByLabelText(/country:/i);
256
+ var countryDisplay = react_2.screen.getByLabelText(/country:/i);
247
257
  expect(countryDisplay).toBeInTheDocument();
248
258
  expect(countryDisplay).toHaveStyle('cursor: default');
249
259
  });
@@ -251,12 +261,12 @@ describe('PhoneNumberTextField', function () {
251
261
  var countrySelector;
252
262
  return __generator(this, function (_a) {
253
263
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: false })));
254
- countrySelector = react_1.screen.getByRole('button', {
264
+ countrySelector = react_2.screen.getByRole('button', {
255
265
  name: /select country/i,
256
266
  });
257
267
  user_event_1.default.click(countrySelector);
258
268
  // Should open dropdown listbox
259
- expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
269
+ expect(react_2.screen.getByRole('listbox')).toBeInTheDocument();
260
270
  return [2 /*return*/];
261
271
  });
262
272
  }); });
@@ -266,18 +276,18 @@ describe('PhoneNumberTextField', function () {
266
276
  switch (_a.label) {
267
277
  case 0:
268
278
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: true })));
269
- countrySelector = react_1.screen.getByRole('button', {
279
+ countrySelector = react_2.screen.getByRole('button', {
270
280
  name: /select country/i,
271
281
  });
272
282
  user_event_1.default.click(countrySelector);
273
283
  // Should open modal
274
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
275
- expect(react_1.screen.getByRole('dialog')).toBeInTheDocument();
284
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
285
+ expect(react_2.screen.getByRole('dialog')).toBeInTheDocument();
276
286
  })];
277
287
  case 1:
278
288
  // Should open modal
279
289
  _a.sent();
280
- expect(react_1.screen.getByText('Select Country')).toBeInTheDocument();
290
+ expect(react_2.screen.getByText('Select Country')).toBeInTheDocument();
281
291
  return [2 /*return*/];
282
292
  }
283
293
  });
@@ -287,14 +297,14 @@ describe('PhoneNumberTextField', function () {
287
297
  return __generator(this, function (_a) {
288
298
  mockOnCountryChange = jest.fn();
289
299
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onCountryChange: mockOnCountryChange, useModalForCountrySelection: false })));
290
- countrySelector = react_1.screen.getByRole('button', {
300
+ countrySelector = react_2.screen.getByRole('button', {
291
301
  name: /select country/i,
292
302
  });
293
303
  user_event_1.default.click(countrySelector);
294
304
  countries = (0, countryData_1.getCountryData)();
295
305
  targetCountry = countries.find(function (c) { return c.code !== countries[0].code; });
296
306
  if (targetCountry) {
297
- countryOption = react_1.screen.getByRole('option', {
307
+ countryOption = react_2.screen.getByRole('option', {
298
308
  name: new RegExp(targetCountry.name),
299
309
  });
300
310
  user_event_1.default.click(countryOption);
@@ -314,11 +324,11 @@ describe('PhoneNumberTextField', function () {
314
324
  case 0:
315
325
  mockOnCountryChange = jest.fn();
316
326
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: true, onCountryChange: mockOnCountryChange })));
317
- input = react_1.screen.getByRole('textbox');
327
+ input = react_2.screen.getByRole('textbox');
318
328
  // Type a UK number (+44) - this should trigger auto-detection
319
329
  user_event_1.default.type(input, '+441234567890');
320
330
  // Should call onCountryChange for auto-detection
321
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
331
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
322
332
  expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
323
333
  id: 'phone-input',
324
334
  selectedCountry: expect.objectContaining({
@@ -344,11 +354,11 @@ describe('PhoneNumberTextField', function () {
344
354
  case 0:
345
355
  mockOnCountryChange = jest.fn();
346
356
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: true, onCountryChange: mockOnCountryChange })));
347
- input = react_1.screen.getByRole('textbox');
357
+ input = react_2.screen.getByRole('textbox');
348
358
  // Type a French number (+33) - this should trigger auto-detection
349
359
  user_event_1.default.type(input, '+33123456789');
350
360
  // Should call onCountryChange for auto-detection to France
351
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
361
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
352
362
  expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
353
363
  id: 'phone-input',
354
364
  selectedCountry: expect.objectContaining({
@@ -367,22 +377,98 @@ describe('PhoneNumberTextField', function () {
367
377
  }
368
378
  });
369
379
  }); });
380
+ 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 () {
381
+ var onValidationChange, onCountryChange, gbCountry;
382
+ return __generator(this, function (_a) {
383
+ switch (_a.label) {
384
+ case 0:
385
+ onValidationChange = jest.fn();
386
+ onCountryChange = jest.fn();
387
+ // Positive counterpart to the locked-country rejection: the same UK
388
+ // number that is invalid on a US-locked input is accepted here because
389
+ // auto-detection switches to GB and validates against GB rules.
390
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+447769481231", initialCountry: "US", enableCountryChange: true, onValidationChange: onValidationChange, onCountryChange: onCountryChange })));
391
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
392
+ expect(onValidationChange).toHaveBeenCalled();
393
+ })];
394
+ case 1:
395
+ _a.sent();
396
+ // The country must actually switch to GB (not merely validate the +44
397
+ // prefix, which libphonenumber accepts regardless of the selected
398
+ // country): assert both the switch and the resulting validity.
399
+ expect(onCountryChange).toHaveBeenCalledWith(expect.objectContaining({
400
+ selectedCountry: expect.objectContaining({ code: 'GB' }),
401
+ previousCountry: expect.objectContaining({ code: 'US' }),
402
+ }));
403
+ gbCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
404
+ expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', gbCountry === null || gbCountry === void 0 ? void 0 : gbCountry.example);
405
+ expect(lastValidationIsValid(onValidationChange)).toBe(true);
406
+ return [2 /*return*/];
407
+ }
408
+ });
409
+ }); });
410
+ 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 () {
411
+ var onCountryChange, onValidationChange, input, countrySelector, ukOption, ukCountry;
412
+ return __generator(this, function (_a) {
413
+ switch (_a.label) {
414
+ case 0:
415
+ onCountryChange = jest.fn();
416
+ onValidationChange = jest.fn();
417
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", useModalForCountrySelection: false, onCountryChange: onCountryChange, onValidationChange: onValidationChange })));
418
+ input = react_2.screen.getByRole('textbox');
419
+ // Enter a valid US national number.
420
+ user_event_1.default.type(input, '2023456789');
421
+ expect(input).toHaveValue('(202) 345-6789');
422
+ // It is valid while the US is selected.
423
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
424
+ expect(lastValidationIsValid(onValidationChange)).toBe(true);
425
+ })];
426
+ case 1:
427
+ // It is valid while the US is selected.
428
+ _a.sent();
429
+ countrySelector = react_2.screen.getByRole('button', {
430
+ name: /select country/i,
431
+ });
432
+ user_event_1.default.click(countrySelector);
433
+ ukOption = react_2.screen.getByRole('option', { name: /United Kingdom/ });
434
+ user_event_1.default.click(ukOption);
435
+ // The manual change is reported with the correct previous/next country.
436
+ expect(onCountryChange).toHaveBeenCalledWith(expect.objectContaining({
437
+ id: 'phone-input',
438
+ selectedCountry: expect.objectContaining({ code: 'GB' }),
439
+ previousCountry: expect.objectContaining({ code: 'US' }),
440
+ }));
441
+ ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
442
+ expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
443
+ // The previously-entered US number is re-validated against UK rules and
444
+ // is no longer valid.
445
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
446
+ expect(lastValidationIsValid(onValidationChange)).toBe(false);
447
+ })];
448
+ case 2:
449
+ // The previously-entered US number is re-validated against UK rules and
450
+ // is no longer valid.
451
+ _a.sent();
452
+ return [2 /*return*/];
453
+ }
454
+ });
455
+ }); });
370
456
  });
371
457
  describe('Error States', function () {
372
458
  it('should display external error message', function () {
373
459
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "This field is required" })));
374
- expect(react_1.screen.getByText('This field is required')).toBeInTheDocument();
460
+ expect(react_2.screen.getByText('This field is required')).toBeInTheDocument();
375
461
  });
376
462
  it('should prioritize external error over validation error', function () { return __awaiter(void 0, void 0, void 0, function () {
377
463
  var input;
378
464
  return __generator(this, function (_a) {
379
465
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "This field is required" })));
380
- input = react_1.screen.getByRole('textbox');
466
+ input = react_2.screen.getByRole('textbox');
381
467
  // Type invalid number (would normally show validation error)
382
468
  user_event_1.default.type(input, '123');
383
469
  // Should still show external error, not validation error
384
- expect(react_1.screen.getByText('This field is required')).toBeInTheDocument();
385
- expect(react_1.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
470
+ expect(react_2.screen.getByText('This field is required')).toBeInTheDocument();
471
+ expect(react_2.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
386
472
  return [2 /*return*/];
387
473
  });
388
474
  }); });
@@ -390,14 +476,14 @@ describe('PhoneNumberTextField', function () {
390
476
  describe('Value Prop and Controlled State', function () {
391
477
  it('should parse and display value with country code', function () {
392
478
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+441212345678" })));
393
- var input = react_1.screen.getByRole('textbox');
479
+ var input = react_2.screen.getByRole('textbox');
394
480
  // Should show formatted UK number
395
481
  expect(input.value).toContain('0121 234 5678');
396
482
  });
397
483
  it('should detect country from international number', function () {
398
484
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+441212345678" })));
399
485
  // Should detect UK and show UK flag (test indirectly via placeholder)
400
- var input = react_1.screen.getByRole('textbox');
486
+ var input = react_2.screen.getByRole('textbox');
401
487
  var ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
402
488
  expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
403
489
  });
@@ -405,22 +491,22 @@ describe('PhoneNumberTextField', function () {
405
491
  describe('Accessibility', function () {
406
492
  it('should have proper ARIA labels', function () {
407
493
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
408
- var input = react_1.screen.getByRole('textbox');
494
+ var input = react_2.screen.getByRole('textbox');
409
495
  expect(input).toHaveAttribute('id', 'phone-input');
410
- var label = react_1.screen.getByText('Phone Number');
496
+ var label = react_2.screen.getByText('Phone Number');
411
497
  expect(label).toHaveAttribute('for', 'phone-input');
412
498
  });
413
499
  it('should support keyboard navigation for country selector', function () { return __awaiter(void 0, void 0, void 0, function () {
414
500
  var countrySelector;
415
501
  return __generator(this, function (_a) {
416
502
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
417
- countrySelector = react_1.screen.getByRole('button', {
503
+ countrySelector = react_2.screen.getByRole('button', {
418
504
  name: /select country/i,
419
505
  });
420
506
  // Test Enter key
421
507
  countrySelector.focus();
422
508
  user_event_1.default.keyboard('{Enter}');
423
- expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
509
+ expect(react_2.screen.getByRole('listbox')).toBeInTheDocument();
424
510
  return [2 /*return*/];
425
511
  });
426
512
  }); });
@@ -428,13 +514,13 @@ describe('PhoneNumberTextField', function () {
428
514
  var countrySelector;
429
515
  return __generator(this, function (_a) {
430
516
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
431
- countrySelector = react_1.screen.getByRole('button', {
517
+ countrySelector = react_2.screen.getByRole('button', {
432
518
  name: /select country/i,
433
519
  });
434
520
  // Test Space key
435
521
  countrySelector.focus();
436
522
  user_event_1.default.keyboard(' ');
437
- expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
523
+ expect(react_2.screen.getByRole('listbox')).toBeInTheDocument();
438
524
  return [2 /*return*/];
439
525
  });
440
526
  }); });
@@ -446,13 +532,13 @@ describe('PhoneNumberTextField', function () {
446
532
  switch (_a.label) {
447
533
  case 0:
448
534
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: true, enableCountrySearch: true })));
449
- countrySelector = react_1.screen.getByRole('button', {
535
+ countrySelector = react_2.screen.getByRole('button', {
450
536
  name: /select country/i,
451
537
  });
452
538
  user_event_1.default.click(countrySelector);
453
539
  // Should show search input in modal
454
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
455
- expect(react_1.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
540
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
541
+ expect(react_2.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
456
542
  })];
457
543
  case 1:
458
544
  // Should show search input in modal
@@ -467,13 +553,13 @@ describe('PhoneNumberTextField', function () {
467
553
  switch (_a.label) {
468
554
  case 0:
469
555
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { enableCountrySearch: false, useModalForCountrySelection: true })));
470
- countrySelector = react_1.screen.getByRole('button', {
556
+ countrySelector = react_2.screen.getByRole('button', {
471
557
  name: /select country/i,
472
558
  });
473
559
  user_event_1.default.click(countrySelector);
474
560
  // Should not show search input in modal
475
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
476
- expect(react_1.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
561
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
562
+ expect(react_2.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
477
563
  })];
478
564
  case 1:
479
565
  // Should not show search input in modal
@@ -483,24 +569,54 @@ describe('PhoneNumberTextField', function () {
483
569
  });
484
570
  }); });
485
571
  });
572
+ describe('Preferred Countries', function () {
573
+ it('should list preferred countries first in the dropdown in the given order', function () { return __awaiter(void 0, void 0, void 0, function () {
574
+ var countrySelector, optionNames;
575
+ return __generator(this, function (_a) {
576
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { preferredCountries: ['FR', 'DE'], useModalForCountrySelection: false })));
577
+ countrySelector = react_2.screen.getByRole('button', {
578
+ name: /select country/i,
579
+ });
580
+ user_event_1.default.click(countrySelector);
581
+ optionNames = react_2.screen
582
+ .getAllByRole('option')
583
+ .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 : ''; });
584
+ // Preferred countries come first, in the order they were provided,
585
+ // ahead of the alphabetical remainder (which starts at Afghanistan).
586
+ expect(optionNames[0]).toContain('France');
587
+ expect(optionNames[1]).toContain('Germany');
588
+ expect(optionNames[2]).toContain('Afghanistan');
589
+ return [2 /*return*/];
590
+ });
591
+ }); });
592
+ it('should default to the first preferred country when no initialCountry is given', function () {
593
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { preferredCountries: ['FR', 'DE'] })));
594
+ // With FR promoted to the top of the list, it becomes the fallback
595
+ // selected country and drives the placeholder. The expected example is
596
+ // hardcoded so a getCountryData ordering regression is actually caught
597
+ // (deriving it from getCountryData would move both sides together).
598
+ var input = react_2.screen.getByRole('textbox');
599
+ expect(input).toHaveAttribute('placeholder', '01 23 45 67 89');
600
+ });
601
+ });
486
602
  describe('Edge Cases', function () {
487
603
  it('should handle empty value gracefully', function () {
488
604
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "" })));
489
- var input = react_1.screen.getByRole('textbox');
605
+ var input = react_2.screen.getByRole('textbox');
490
606
  expect(input).toHaveValue('');
491
607
  });
492
608
  it('should handle invalid initial country code', function () {
493
609
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "INVALID" })));
494
610
  // Should fallback to first country
495
611
  var countries = (0, countryData_1.getCountryData)();
496
- var input = react_1.screen.getByRole('textbox');
612
+ var input = react_2.screen.getByRole('textbox');
497
613
  expect(input).toHaveAttribute('placeholder', countries[0].example);
498
614
  });
499
615
  it('should handle cursor position correctly during formatting', function () { return __awaiter(void 0, void 0, void 0, function () {
500
616
  var input;
501
617
  return __generator(this, function (_a) {
502
618
  (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
503
- input = react_1.screen.getByRole('textbox');
619
+ input = react_2.screen.getByRole('textbox');
504
620
  // Type partial number
505
621
  user_event_1.default.type(input, '202345');
506
622
  // Set cursor in middle
@@ -521,12 +637,12 @@ describe('PhoneNumberTextField', function () {
521
637
  case 0:
522
638
  onCountryChange = jest.fn();
523
639
  onPhoneNumberChange = jest.fn();
524
- (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 }));
525
- input = react_1.screen.getByRole('textbox');
640
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: false, onCountryChange: onCountryChange, onPhoneNumberChange: onPhoneNumberChange })));
641
+ input = react_2.screen.getByRole('textbox');
526
642
  // Type a UK number (+44) while US is selected
527
643
  user_event_1.default.type(input, '+447769481232');
528
644
  // Wait for state updates
529
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
645
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
530
646
  expect(onPhoneNumberChange).toHaveBeenCalled();
531
647
  })];
532
648
  case 1:
@@ -544,25 +660,158 @@ describe('PhoneNumberTextField', function () {
544
660
  });
545
661
  }); });
546
662
  it('should validate against selected country only when enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
547
- var onValidationChange, input, lastCall, lastCallData;
663
+ var onValidationChange, input;
548
664
  return __generator(this, function (_a) {
549
665
  switch (_a.label) {
550
666
  case 0:
551
667
  onValidationChange = jest.fn();
552
- (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 }));
553
- input = react_1.screen.getByRole('textbox');
668
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
669
+ input = react_2.screen.getByRole('textbox');
554
670
  // Type a UK number that's invalid for US
555
671
  user_event_1.default.type(input, '+447769481231');
556
672
  // Wait for validation
557
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
673
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
558
674
  expect(onValidationChange).toHaveBeenCalled();
559
675
  })];
560
676
  case 1:
561
677
  // Wait for validation
562
678
  _a.sent();
563
- lastCall = onValidationChange.mock.calls[onValidationChange.mock.calls.length - 1];
564
- lastCallData = lastCall[0];
565
- expect(lastCallData.isValid).toBe(false);
679
+ // Should be marked as invalid since it's being validated against US rules
680
+ expect(lastValidationIsValid(onValidationChange)).toBe(false);
681
+ return [2 /*return*/];
682
+ }
683
+ });
684
+ }); });
685
+ 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 () {
686
+ var onValidationChange;
687
+ return __generator(this, function (_a) {
688
+ switch (_a.label) {
689
+ case 0:
690
+ onValidationChange = jest.fn();
691
+ // A controlled international value (e.g. round-tripped back from a parent
692
+ // form) must be validated against the locked country, not auto-detected.
693
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+447769481231", initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
694
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
695
+ expect(onValidationChange).toHaveBeenCalled();
696
+ })];
697
+ case 1:
698
+ _a.sent();
699
+ // A UK number on a US-locked input must be rejected, not accepted just
700
+ // because libphonenumber can parse the explicit +44 prefix.
701
+ expect(lastValidationIsValid(onValidationChange)).toBe(false);
702
+ return [2 /*return*/];
703
+ }
704
+ });
705
+ }); });
706
+ 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 () {
707
+ var onValidationChange;
708
+ return __generator(this, function (_a) {
709
+ switch (_a.label) {
710
+ case 0:
711
+ onValidationChange = jest.fn();
712
+ // Positive counterpart to the rejection tests: a value whose dial code
713
+ // matches the locked country must still pass validation, proving
714
+ // validateForLockedCountry rejects only mismatched prefixes.
715
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+12023456789", initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
716
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
717
+ expect(onValidationChange).toHaveBeenCalled();
718
+ })];
719
+ case 1:
720
+ _a.sent();
721
+ expect(lastValidationIsValid(onValidationChange)).toBe(true);
722
+ return [2 /*return*/];
723
+ }
724
+ });
725
+ }); });
726
+ 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 () {
727
+ var onValidationChange, input;
728
+ return __generator(this, function (_a) {
729
+ switch (_a.label) {
730
+ case 0:
731
+ onValidationChange = jest.fn();
732
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: false, onValidationChange: onValidationChange })));
733
+ input = react_2.screen.getByRole('textbox');
734
+ // A partial US number (no + prefix) on a US-locked input is invalid.
735
+ user_event_1.default.type(input, '202');
736
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
737
+ expect(onValidationChange).toHaveBeenCalled();
738
+ })];
739
+ case 1:
740
+ _a.sent();
741
+ expect(lastValidationIsValid(onValidationChange)).toBe(false);
742
+ // Completing the number flips validation to valid.
743
+ user_event_1.default.type(input, '3456789');
744
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
745
+ expect(lastValidationIsValid(onValidationChange)).toBe(true);
746
+ })];
747
+ case 2:
748
+ _a.sent();
749
+ return [2 /*return*/];
750
+ }
751
+ });
752
+ }); });
753
+ it('should re-validate when the controlled value prop changes from invalid to valid', function () { return __awaiter(void 0, void 0, void 0, function () {
754
+ var onValidationChange, ControlledValueHarness;
755
+ return __generator(this, function (_a) {
756
+ switch (_a.label) {
757
+ case 0:
758
+ onValidationChange = jest.fn();
759
+ ControlledValueHarness = function () {
760
+ var _a = (0, react_1.useState)('123'), value = _a[0], setValue = _a[1];
761
+ 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 }))] }));
762
+ };
763
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ControlledValueHarness, {}));
764
+ // The initial controlled value is invalid for US.
765
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
766
+ expect(onValidationChange).toHaveBeenCalled();
767
+ })];
768
+ case 1:
769
+ // The initial controlled value is invalid for US.
770
+ _a.sent();
771
+ expect(lastValidationIsValid(onValidationChange)).toBe(false);
772
+ // Swapping the prop to a valid US number re-validates to valid.
773
+ user_event_1.default.click(react_2.screen.getByRole('button', { name: 'set-valid' }));
774
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
775
+ expect(lastValidationIsValid(onValidationChange)).toBe(true);
776
+ })];
777
+ case 2:
778
+ _a.sent();
779
+ return [2 /*return*/];
780
+ }
781
+ });
782
+ }); });
783
+ // Guards against a US-only assumption in the locked-country logic: the
784
+ // locked country drives validation regardless of which country it is.
785
+ 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 () {
786
+ var onValidationChange;
787
+ return __generator(this, function (_a) {
788
+ switch (_a.label) {
789
+ case 0:
790
+ onValidationChange = jest.fn();
791
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+447769481231", initialCountry: "GB", enableCountryChange: false, onValidationChange: onValidationChange })));
792
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
793
+ expect(onValidationChange).toHaveBeenCalled();
794
+ })];
795
+ case 1:
796
+ _a.sent();
797
+ expect(lastValidationIsValid(onValidationChange)).toBe(true);
798
+ return [2 /*return*/];
799
+ }
800
+ });
801
+ }); });
802
+ 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 () {
803
+ var onValidationChange;
804
+ return __generator(this, function (_a) {
805
+ switch (_a.label) {
806
+ case 0:
807
+ onValidationChange = jest.fn();
808
+ (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+12023456789", initialCountry: "GB", enableCountryChange: false, onValidationChange: onValidationChange })));
809
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
810
+ expect(onValidationChange).toHaveBeenCalled();
811
+ })];
812
+ case 1:
813
+ _a.sent();
814
+ expect(lastValidationIsValid(onValidationChange)).toBe(false);
566
815
  return [2 /*return*/];
567
816
  }
568
817
  });
@@ -573,7 +822,7 @@ describe('PhoneNumberTextField', function () {
573
822
  var onCountryChange = jest.fn();
574
823
  (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 }));
575
824
  // Find the country selector by its aria-label (when disabled, it's not a button)
576
- var countrySelector = react_1.screen.getByLabelText('Country: United States');
825
+ var countrySelector = react_2.screen.getByLabelText('Country: United States');
577
826
  // When disabled, the country selector should not be interactive
578
827
  // It should not have a button role and should not respond to clicks
579
828
  expect(countrySelector).toBeInTheDocument();
@@ -586,8 +835,8 @@ describe('PhoneNumberTextField', function () {
586
835
  });
587
836
  it('should disable both phone input and country selector when disabled is true', function () {
588
837
  (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" }));
589
- var input = react_1.screen.getByRole('textbox');
590
- var countrySelector = react_1.screen.getByLabelText('Country: United States');
838
+ var input = react_2.screen.getByRole('textbox');
839
+ var countrySelector = react_2.screen.getByLabelText('Country: United States');
591
840
  // Both should be disabled
592
841
  expect(input).toBeDisabled();
593
842
  expect(countrySelector).toBeInTheDocument();
@@ -606,10 +855,10 @@ describe('PhoneNumberTextField', function () {
606
855
  case 0:
607
856
  onPhoneNumberChange = jest.fn();
608
857
  (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" }));
609
- input = react_1.screen.getByRole('textbox');
858
+ input = react_2.screen.getByRole('textbox');
610
859
  // Type a full phone number first
611
860
  user_event_1.default.type(input, '2023456789');
612
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
861
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
613
862
  expect(input).toHaveValue('(202) 345-6789');
614
863
  })];
615
864
  case 1:
@@ -617,7 +866,7 @@ describe('PhoneNumberTextField', function () {
617
866
  // Clear and test editing from beginning
618
867
  user_event_1.default.clear(input);
619
868
  user_event_1.default.type(input, '+12023456789');
620
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
869
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
621
870
  // Should format as international number
622
871
  expect(input.value).toContain('202');
623
872
  expect(input.value).toContain('345');
@@ -637,10 +886,10 @@ describe('PhoneNumberTextField', function () {
637
886
  case 0:
638
887
  onPhoneNumberChange = jest.fn();
639
888
  (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" }));
640
- input = react_1.screen.getByRole('textbox');
889
+ input = react_2.screen.getByRole('textbox');
641
890
  // Type an international number
642
891
  user_event_1.default.type(input, '+447700900123');
643
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
892
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
644
893
  expect(onPhoneNumberChange).toHaveBeenCalled();
645
894
  })];
646
895
  case 1:
@@ -658,10 +907,10 @@ describe('PhoneNumberTextField', function () {
658
907
  case 0:
659
908
  onPhoneNumberChange = jest.fn();
660
909
  (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" }));
661
- input = react_1.screen.getByRole('textbox');
910
+ input = react_2.screen.getByRole('textbox');
662
911
  // Type initial number
663
912
  user_event_1.default.type(input, '2023456789');
664
- return [4 /*yield*/, (0, react_1.waitFor)(function () {
913
+ return [4 /*yield*/, (0, react_2.waitFor)(function () {
665
914
  expect(input).toHaveValue('(202) 345-6789');
666
915
  })];
667
916
  case 1:
@@ -671,7 +920,7 @@ describe('PhoneNumberTextField', function () {
671
920
  value: { value: '(202) 355-6789', selectionStart: 7 },
672
921
  enumerable: true,
673
922
  });
674
- (0, react_1.fireEvent)(input, changeEvent);
923
+ (0, react_2.fireEvent)(input, changeEvent);
675
924
  // The component should handle the change without cursor jumping
676
925
  expect(onPhoneNumberChange).toHaveBeenCalled();
677
926
  return [2 /*return*/];