@mvf/external-components 3.31.1 → 3.32.1-dev.0

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.js

@@ -0,0 +1,229 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var Modal_1 = __importDefault(require("@mui/material/Modal"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var InputBase_1 = __importDefault(require("@mui/material/InputBase"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var react_1 = require("react");
+var react_2 = require("@emotion/react");
+var countryData_1 = require("../../utils/countryData");
+var FlagIcon_1 = __importDefault(require("./FlagIcon"));
+var CountryModal = function (_a) {
+    var onCountryChange = _a.onCountryChange, _b = _a.enableCountrySearch, enableCountrySearch = _b === void 0 ? false : _b, open = _a.open, onClose = _a.onClose, _c = _a.searchPlaceholder, searchPlaceholder = _c === void 0 ? 'Search countries...' : _c, _d = _a.modalHeading, modalHeading = _d === void 0 ? 'Select Country' : _d;
+    var _e = (0, react_1.useState)(''), searchTerm = _e[0], setSearchTerm = _e[1];
+    var _f = (0, react_1.useState)(-1), selectedIndex = _f[0], setSelectedIndex = _f[1];
+    var _g = (0, react_1.useState)(false), isClosing = _g[0], setIsClosing = _g[1];
+    var searchInputRef = (0, react_1.useRef)(null);
+    var theme = (0, react_2.useTheme)();
+    var countries = (0, react_1.useMemo)(function () { return (0, countryData_1.getCountryData)(); }, []);
+    var filteredCountries = (0, react_1.useMemo)(function () {
+        if (!searchTerm.trim())
+            return countries;
+        var term = searchTerm.toLowerCase().trim();
+        return countries.filter(function (country) {
+            return country.name.toLowerCase().includes(term) ||
+                country.dialCode.toLowerCase().includes(term) ||
+                country.code.toLowerCase().includes(term);
+        });
+    }, [countries, searchTerm]);
+    // Reset search state when modal opens/closes
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            setSearchTerm('');
+            setSelectedIndex(-1);
+            setIsClosing(false);
+        }
+    }, [open]);
+    // Auto-focus search input when modal opens and blur when closing
+    (0, react_1.useEffect)(function () {
+        if (open && enableCountrySearch) {
+            var timer_1 = setTimeout(function () {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 150); // Slightly longer delay to ensure modal is fully rendered
+            return function () { return clearTimeout(timer_1); };
+        }
+        else if (!open) {
+            // When closing, ensure any focused element inside the modal is blurred
+            // to prevent aria-hidden violations
+            var activeElement = document.activeElement;
+            if (activeElement && activeElement.closest('[role="dialog"]')) {
+                activeElement.blur();
+            }
+        }
+        return undefined;
+    }, [open, enableCountrySearch]);
+    var handleCountrySelect = (0, react_1.useCallback)(function (country) {
+        // Blur any focused element to prevent aria-hidden violations
+        var activeElement = document.activeElement;
+        if (activeElement && activeElement.closest('[role="dialog"]')) {
+            activeElement.blur();
+        }
+        onCountryChange(country);
+        setIsClosing(true);
+        setTimeout(function () {
+            onClose();
+            setIsClosing(false);
+        }, 195);
+    }, [onCountryChange, onClose]);
+    var handleModalClose = (0, react_1.useCallback)(function () {
+        // Blur any focused element to prevent aria-hidden violations
+        var activeElement = document.activeElement;
+        if (activeElement && activeElement.closest('[role="dialog"]')) {
+            activeElement.blur();
+        }
+        setIsClosing(true);
+        setTimeout(function () {
+            onClose();
+            setIsClosing(false);
+        }, 195);
+    }, [onClose]);
+    var handleSearchChange = (0, react_1.useCallback)(function (event) {
+        var value = event.target.value;
+        setSearchTerm(value);
+        setSelectedIndex(-1);
+    }, []);
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setSelectedIndex(function (prev) {
+                    return prev < filteredCountries.length - 1 ? prev + 1 : prev;
+                });
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setSelectedIndex(function (prev) { return (prev > 0 ? prev - 1 : -1); });
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (selectedIndex >= 0 && selectedIndex < filteredCountries.length) {
+                    var country = filteredCountries[selectedIndex];
+                    handleCountrySelect(country);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                handleModalClose();
+                break;
+        }
+    }, [
+        filteredCountries.length,
+        selectedIndex,
+        handleCountrySelect,
+        handleModalClose,
+    ]);
+    var modalStyle = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '90%',
+        height: '90%',
+        bgcolor: theme.mvf.palette.background.answerBackgroundColor,
+        boxShadow: theme.mvf.boxShadow.fierce,
+        borderRadius: 1,
+        outline: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+    };
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { open: open, onClose: handleModalClose, "aria-labelledby": "country-selection-modal", "aria-describedby": "country-selection-modal-description", closeAfterTransition: true, disableRestoreFocus: true, disableEnforceFocus: true, hideBackdrop: true, children: (0, jsx_runtime_1.jsxs)(Box_1.default, { role: "dialog", sx: __assign(__assign({}, modalStyle), { animation: isClosing
+                    ? 'modalExit 195ms cubic-bezier(0.4, 0, 1, 1)'
+                    : 'modalEnter 225ms cubic-bezier(0.4, 0, 0.2, 1)', '@keyframes modalEnter': {
+                    '0%': {
+                        opacity: 0,
+                        transform: 'translate(-50%, -50%) scale(0.8)',
+                    },
+                    '100%': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1)',
+                    },
+                }, '@keyframes modalExit': {
+                    '0%': {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1)',
+                    },
+                    '100%': {
+                        opacity: 0,
+                        transform: 'translate(-50%, -50%) scale(0.8)',
+                    },
+                } }), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '16px 20px',
+                        borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+                        backgroundColor: '#ffffff',
+                        borderTopLeftRadius: '4px',
+                        borderTopRightRadius: '4px',
+                    }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: '18px',
+                                fontWeight: 500,
+                                color: 'rgba(0, 0, 0, 0.87)',
+                                margin: 0,
+                            }, children: modalHeading }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: handleModalClose, size: "small", sx: {
+                                color: 'rgba(0, 0, 0, 0.6)',
+                                '&:hover': {
+                                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                                },
+                            }, "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })] }), enableCountrySearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        padding: '16px 20px',
+                        borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+                        backgroundColor: '#ffffff',
+                    }, children: (0, jsx_runtime_1.jsx)(InputBase_1.default, { ref: searchInputRef, placeholder: searchPlaceholder, value: searchTerm, onChange: handleSearchChange, onKeyDown: handleKeyDown, fullWidth: true, sx: {
+                            fontSize: '16px',
+                            padding: '8px 12px',
+                            border: '1px solid rgba(0, 0, 0, 0.23)',
+                            borderRadius: '4px',
+                            '&:focus-within': {
+                                borderColor: '#1976d2',
+                                boxShadow: '0 0 0 2px rgba(25, 118, 210, 0.2)',
+                            },
+                        }, inputProps: {
+                            'aria-label': 'Search countries',
+                            autoComplete: 'off',
+                            spellCheck: false,
+                        } }) })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        overflowY: 'auto',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        backgroundColor: '#ffffff',
+                    }, role: "listbox", "aria-label": "Country list", children: filteredCountries.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                            padding: '20px',
+                            textAlign: 'center',
+                            color: 'rgba(0, 0, 0, 0.6)',
+                        }, children: "No countries found" })) : (filteredCountries.map(function (country, index) { return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { selected: index === selectedIndex, onClick: function () { return handleCountrySelect(country); }, onMouseEnter: function () { return setSelectedIndex(index); }, role: "option", "aria-selected": index === selectedIndex, sx: {
+                            padding: '12px 20px',
+                            transition: 'background-color 0.2s ease',
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: '100%',
+                            '&.Mui-selected': {
+                                backgroundColor: 'rgba(0, 0, 0, 0.08)',
+                            },
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                            },
+                        }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FlagIcon_1.default, { countryCode: country.code, style: { marginRight: '12px' } }), (0, jsx_runtime_1.jsx)("span", { style: { flex: 1, fontSize: '16px' }, children: country.name }), (0, jsx_runtime_1.jsx)("span", { style: { opacity: 0.7, fontSize: '14px' }, children: country.dialCode })] }) }, country.code)); })) })] }) }));
+};
+exports.default = CountryModal;
+//# sourceMappingURL=CountryModal.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryModal.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.tsx"],"names":[],"mappings":"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"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js

@@ -0,0 +1,281 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var React_1 = require("../../../../../../Helpers/React");
+var CountryModal_1 = __importDefault(require("./CountryModal"));
+var countryData_1 = require("../../utils/countryData");
+// Mock the useTheme hook to provide the required theme structure
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock('@emotion/react', function () { return (__assign(__assign({}, jest.requireActual('@emotion/react')), { useTheme: function () { return ({
+        mvf: {
+            palette: {
+                background: {
+                    answerBackgroundColor: '#ffffff',
+                },
+            },
+            boxShadow: {
+                fierce: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+            },
+        },
+    }); } })); });
+describe('CountryModal', function () {
+    var mockCountries = (0, countryData_1.getCountryData)();
+    var mockCountry = mockCountries[0];
+    var mockOnCountryChange = jest.fn();
+    var mockOnClose = jest.fn();
+    var defaultProps = {
+        selectedCountry: mockCountry,
+        onCountryChange: mockOnCountryChange,
+        enableCountrySearch: false,
+        open: false,
+        onClose: mockOnClose,
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    describe('Modal Visibility', function () {
+        it('renders without crashing and does not show modal when closed', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps)));
+            // Modal should not be visible when open is false
+            expect(react_1.screen.queryByText('Select Country')).not.toBeInTheDocument();
+        });
+        it('renders modal content when open is true', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+            expect(react_1.screen.getByText('Select Country')).toBeInTheDocument();
+            // Check for modal container instead of dialog role
+            expect(react_1.screen.getByText('Select Country').closest('[role="presentation"]')).toBeInTheDocument();
+        });
+        it('displays close button and can close modal', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var closeButton;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+                        closeButton = react_1.screen.getByRole('button', { name: /close/i });
+                        expect(closeButton).toBeInTheDocument();
+                        react_1.fireEvent.click(closeButton);
+                        // Note: Due to the timeout in the component, we need to wait
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        // Note: Due to the timeout in the component, we need to wait
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Country Search', function () {
+        it('does not render search input when enableCountrySearch is false', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: false })));
+            expect(react_1.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
+        });
+        it('renders search input when enableCountrySearch is true', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            expect(react_1.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
+        });
+        it('filters countries based on search term', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Search for a specific country (assuming United States exists)
+            user_event_1.default.type(searchInput, 'United States');
+            // Should show filtered results
+            expect(react_1.screen.getByText('United States')).toBeInTheDocument();
+            // Should not show all countries anymore
+            var countryItems = react_1.screen.getAllByRole('option');
+            expect(countryItems.length).toBeLessThan(mockCountries.length);
+        });
+        it('shows "No countries found" when search yields no results', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Search for something that doesn't exist
+            user_event_1.default.type(searchInput, 'NonexistentCountry');
+            expect(react_1.screen.getByText('No countries found')).toBeInTheDocument();
+        });
+        it('filters countries by dial code', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Search for +1 (should find US, Canada, etc.)
+            user_event_1.default.type(searchInput, '+1');
+            // Should show filtered results
+            var countryItems = react_1.screen.getAllByRole('option');
+            expect(countryItems.length).toBeGreaterThan(0);
+            expect(countryItems.length).toBeLessThan(mockCountries.length);
+        });
+    });
+    describe('Country List and Selection', function () {
+        it('displays country list when open', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+            // Should show at least the first few countries
+            expect(react_1.screen.getByText(mockCountries[0].name)).toBeInTheDocument();
+            expect(react_1.screen.getByText(mockCountries[1].name)).toBeInTheDocument();
+            // Should show country list container
+            expect(react_1.screen.getByRole('listbox', { name: /country list/i })).toBeInTheDocument();
+        });
+        it('calls onCountryChange when a country is selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countryToSelect, countryOption;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+                        countryToSelect = mockCountries.find(function (c) { return c.name !== mockCountry.name; });
+                        expect(countryToSelect).toBeDefined();
+                        countryOption = react_1.screen.getByRole('option', {
+                            name: new RegExp((countryToSelect === null || countryToSelect === void 0 ? void 0 : countryToSelect.name) || ''),
+                        });
+                        react_1.fireEvent.click(countryOption);
+                        expect(mockOnCountryChange).toHaveBeenCalledWith(countryToSelect);
+                        // Should also trigger close after timeout
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        // Should also trigger close after timeout
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('displays country flags and dial codes', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+            // Check that dial codes are displayed (use getAllByText since some dial codes might be duplicated)
+            var firstDialCode = react_1.screen.getAllByText(mockCountries[0].dialCode);
+            var secondDialCode = react_1.screen.getAllByText(mockCountries[1].dialCode);
+            expect(firstDialCode.length).toBeGreaterThan(0);
+            expect(secondDialCode.length).toBeGreaterThan(0);
+        });
+    });
+    describe('Keyboard Navigation', function () {
+        it('closes modal when Escape key is pressed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+                        searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+                        react_1.fireEvent.keyDown(searchInput, { key: 'Escape' });
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('navigates countries with arrow keys when search is enabled', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Simulate arrow down navigation
+            react_1.fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+            react_1.fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+            // Should highlight second item (index 1)
+            var secondCountryOption = react_1.screen.getByRole('option', {
+                name: new RegExp(mockCountries[1].name),
+            });
+            expect(secondCountryOption).toHaveAttribute('aria-selected', 'true');
+        });
+        it('selects highlighted country with Enter key', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+                        searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+                        // Navigate to first country and select it
+                        react_1.fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+                        react_1.fireEvent.keyDown(searchInput, { key: 'Enter' });
+                        expect(mockOnCountryChange).toHaveBeenCalledWith(mockCountries[0]);
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Accessibility', function () {
+        it('has proper ARIA labels and roles', function () {
+            (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            // Modal should have proper ARIA attributes on the presentation container
+            var modal = react_1.screen.getByRole('presentation');
+            expect(modal).toHaveAttribute('aria-labelledby', 'country-selection-modal');
+            expect(modal).toHaveAttribute('aria-describedby', 'country-selection-modal-description');
+            // Search input should have proper label
+            expect(react_1.screen.getByLabelText('Search countries')).toBeInTheDocument();
+            // Country list should have proper role
+            expect(react_1.screen.getByRole('listbox', { name: /country list/i })).toBeInTheDocument();
+            // Country options should have proper roles
+            var countryOptions = react_1.screen.getAllByRole('option');
+            expect(countryOptions.length).toBeGreaterThan(0);
+        });
+        it('renders search input and can be focused when modal opens with search enabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchInput;
+            return __generator(this, function (_a) {
+                (0, React_1.renderWithProviders)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+                searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+                expect(searchInput).toBeInTheDocument();
+                // Focus the input manually to verify it's focusable
+                searchInput.focus();
+                expect(searchInput).toHaveFocus();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+});
+//# sourceMappingURL=CountryModal.test.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryModal.test.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.tsx"],"names":[],"mappings":"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"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.d.ts

@@ -0,0 +1,11 @@
+import { CountryData } from '../../utils/countryData';
+export interface CountrySelectorProps {
+    selectedCountry: CountryData;
+    enableCountryChange?: boolean;
+    isCountryMenuOpen?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+declare const CountrySelector: import("react").ForwardRefExoticComponent<CountrySelectorProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CountrySelector;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+var react_1 = require("react");
+var FlagIcon_1 = __importDefault(require("./FlagIcon"));
+var CountrySelector = (0, react_1.forwardRef)(function (_a, ref) {
+    var selectedCountry = _a.selectedCountry, _b = _a.enableCountryChange, enableCountryChange = _b === void 0 ? false : _b, _c = _a.isCountryMenuOpen, isCountryMenuOpen = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onClick = _a.onClick, onKeyDown = _a.onKeyDown;
+    // If disabled, we should not allow country changes
+    var isInteractive = enableCountryChange && !disabled;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: "country-selector", onClick: isInteractive ? onClick : undefined, style: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: isInteractive ? 'pointer' : 'default',
+            minWidth: '40px',
+            justifyContent: 'center',
+            opacity: disabled ? 0.6 : 1,
+        }, role: isInteractive ? 'button' : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-label": isInteractive
+            ? "Select country, currently ".concat(selectedCountry.name)
+            : "Country: ".concat(selectedCountry.name), "aria-haspopup": isInteractive ? 'listbox' : undefined, "aria-expanded": isInteractive ? isCountryMenuOpen : undefined, "aria-controls": isInteractive ? 'country-selector-listbox' : undefined, onKeyDown: isInteractive ? onKeyDown : undefined, children: [(0, jsx_runtime_1.jsx)(FlagIcon_1.default, { countryCode: selectedCountry.code }), isInteractive && ((0, jsx_runtime_1.jsx)(ExpandMore_1.default, { style: {
+                    fontSize: '16px',
+                    color: 'rgba(0, 0, 0, 1)',
+                    marginLeft: '4px',
+                    transform: isCountryMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.1s ease-in-out',
+                } }))] }));
+});
+CountrySelector.displayName = 'CountrySelector';
+exports.default = CountrySelector;
+//# sourceMappingURL=CountrySelector.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.tsx"],"names":[],"mappings":";;;;;;AAAA,sCAAsC;AACtC,8EAAwD;AACxD,+BAAmC;AAEnC,wDAAkC;AAWlC,IAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,UACE,EAOC,EACD,GAAG;QAPD,eAAe,qBAAA,EACf,2BAA2B,EAA3B,mBAAmB,mBAAG,KAAK,KAAA,EAC3B,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA;IAIX,mDAAmD;IACnD,IAAM,aAAa,GAAG,mBAAmB,IAAI,CAAC,QAAQ,CAAC;IAEvD,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC5C,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,QAAQ,EAAE,MAAM;YAChB,cAAc,EAAE,QAAQ;YACxB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5B,EACD,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAErC,aAAa;YACX,CAAC,CAAC,oCAA6B,eAAe,CAAC,IAAI,CAAE;YACrD,CAAC,CAAC,mBAAY,eAAe,CAAC,IAAI,CAAE,mBAEzB,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACrC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,mBAC7C,aAAa,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,EACrE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,aAEhD,uBAAC,kBAAQ,IAAC,WAAW,EAAE,eAAe,CAAC,IAAI,GAAI,EAC9C,aAAa,IAAI,CAChB,uBAAC,oBAAU,IACT,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,kBAAkB;oBACzB,UAAU,EAAE,KAAK;oBACjB,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;oBAChE,UAAU,EAAE,4BAA4B;iBACzC,GACD,CACH,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,kBAAe,eAAe,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import { CountryCode } from '../../utils/countryData';
+interface FlagIconProps {
+    countryCode: CountryCode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const FlagIcon: React.FC<FlagIconProps>;
+export default FlagIcon;