@mvf/external-components 3.31.1-dev.7 → 3.31.1-dev.8

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;

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

@@ -0,0 +1,114 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = __importStar(require("react"));
+// Global flag to track if CSS has been loaded
+var flagIconsCssLoaded = false;
+// Function to lazy load the flag-icons CSS
+var loadFlagIconsCSS = function () {
+    return new Promise(function (resolve) {
+        // Check if already loaded
+        if (flagIconsCssLoaded) {
+            resolve();
+            return;
+        }
+        // Check if link already exists in DOM
+        var existingLink = document.querySelector('link[href*="flag-icons"]');
+        if (existingLink) {
+            flagIconsCssLoaded = true;
+            resolve();
+            return;
+        }
+        // Create and append the CSS link
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href =
+            'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/css/flag-icons.min.css';
+        link.onload = function () {
+            flagIconsCssLoaded = true;
+            resolve();
+        };
+        link.onerror = function () {
+            console.warn('Failed to load flag-icons CSS, falling back to text representation');
+            flagIconsCssLoaded = true; // Prevent retries
+            resolve();
+        };
+        document.head.appendChild(link);
+    });
+};
+var FlagIcon = react_1.default.memo(function (_a) {
+    var countryCode = _a.countryCode, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var _c = (0, react_1.useState)(flagIconsCssLoaded), cssLoaded = _c[0], setCssLoaded = _c[1];
+    (0, react_1.useEffect)(function () {
+        var mounted = true;
+        if (!cssLoaded && !flagIconsCssLoaded) {
+            void loadFlagIconsCSS().then(function () {
+                if (mounted) {
+                    setCssLoaded(true);
+                }
+            });
+        }
+        else if (flagIconsCssLoaded && !cssLoaded) {
+            // If CSS was loaded globally but state doesn't reflect it
+            setCssLoaded(true);
+        }
+        return function () {
+            mounted = false;
+        };
+    }, [cssLoaded]);
+    // Convert country code to lowercase for flag-icons
+    var flagClass = "fi fi-".concat(countryCode.toLowerCase());
+    // Show fallback while CSS is loading
+    if (!cssLoaded) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: className, style: __assign({ fontSize: '16px', lineHeight: 1, display: 'inline-block', width: '20px', height: '15px', backgroundColor: '#f0f0f0', border: '1px solid #ccc', borderRadius: '2px', textAlign: 'center' }, style), "aria-label": "".concat(countryCode, " flag (loading)"), title: "Loading flag..." }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { className: "".concat(flagClass, " ").concat(className), style: __assign({ fontSize: '16px', lineHeight: 1, display: 'inline-block', width: '20px', height: '15px' }, style), "aria-label": "".concat(countryCode, " flag") }));
+});
+FlagIcon.displayName = 'FlagIcon';
+exports.default = FlagIcon;
+//# sourceMappingURL=FlagIcon.js.map

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

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

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useAutofillDetection.d.ts

@@ -0,0 +1,10 @@
+interface UseAutofillDetectionReturn {
+    isAutoFilledActive: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
+}
+/**
+ * Hook to automatically detect when a browser autofills an input field
+ * This solves the issue where the parent component needs to manually track autofill state
+ */
+export declare const useAutofillDetection: () => UseAutofillDetectionReturn;
+export {};

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useAutofillDetection.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutofillDetection = void 0;
+var react_1 = require("react");
+/**
+ * Hook to automatically detect when a browser autofills an input field
+ * This solves the issue where the parent component needs to manually track autofill state
+ */
+var useAutofillDetection = function () {
+    var _a = (0, react_1.useState)(false), isAutoFilledActive = _a[0], setIsAutoFilledActive = _a[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var animationRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        var input = inputRef.current;
+        if (!input)
+            return;
+        var checkAutofill = function () {
+            // Method 1: Check if the input has the -webkit-autofill pseudo-class
+            var computedStyle = window.getComputedStyle(input);
+            var backgroundColor = computedStyle.backgroundColor;
+            // Method 2: Check if the input has been filled by autofill
+            // Autofilled inputs often have a specific background color
+            var isAutofilled = backgroundColor === 'rgb(250, 255, 189)' || // Safari autofill color
+                backgroundColor === 'rgb(232, 240, 254)' || // Chrome autofill color
+                backgroundColor === 'rgb(255, 255, 255)' || // Some browsers use white
+                backgroundColor === 'rgb(0, 0, 0)'; // Some browsers use black
+            // Method 3: Check for autofill attributes
+            var hasAutofillAttribute = input.matches(':-webkit-autofill') ||
+                input.hasAttribute('data-autofilled') ||
+                input.classList.contains('autofilled');
+            if (isAutofilled || hasAutofillAttribute) {
+                setIsAutoFilledActive(true);
+            }
+            else {
+                setIsAutoFilledActive(false);
+            }
+        };
+        // Check immediately
+        checkAutofill();
+        // Set up a mutation observer to watch for autofill changes
+        var observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.type === 'attributes' || mutation.type === 'childList') {
+                    checkAutofill();
+                }
+            });
+        });
+        // Observe the input element and its parent for changes
+        observer.observe(input, {
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+            childList: true,
+            subtree: true,
+        });
+        // Also observe the parent form for autofill events
+        var form = input.closest('form');
+        if (form) {
+            observer.observe(form, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+            });
+        }
+        // Set up periodic checking as a fallback
+        var startPeriodicCheck = function () {
+            animationRef.current = requestAnimationFrame(function () {
+                checkAutofill();
+                startPeriodicCheck();
+            });
+        };
+        startPeriodicCheck();
+        // Cleanup
+        return function () {
+            observer.disconnect();
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, []);
+    // Additional effect to handle autofill events
+    (0, react_1.useEffect)(function () {
+        var input = inputRef.current;
+        if (!input)
+            return;
+        var handleAnimationStart = function (e) {
+            if (e.animationName === 'onAutoFillStart') {
+                setIsAutoFilledActive(true);
+            }
+        };
+        var handleAnimationEnd = function (e) {
+            if (e.animationName === 'onAutoFillCancel') {
+                setIsAutoFilledActive(false);
+            }
+        };
+        input.addEventListener('animationstart', handleAnimationStart);
+        input.addEventListener('animationend', handleAnimationEnd);
+        return function () {
+            input.removeEventListener('animationstart', handleAnimationStart);
+            input.removeEventListener('animationend', handleAnimationEnd);
+        };
+    }, []);
+    return { isAutoFilledActive: isAutoFilledActive, inputRef: inputRef };
+};
+exports.useAutofillDetection = useAutofillDetection;
+//# sourceMappingURL=useAutofillDetection.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useAutofillDetection.js.map

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

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.d.ts

@@ -0,0 +1,12 @@
+export interface UseCountrySelectorOptions {
+    enableCountryChange?: boolean;
+    disabled?: boolean;
+}
+export interface UseCountrySelectorReturn {
+    isCountryMenuOpen: boolean;
+    openCountryMenu: () => void;
+    closeCountryMenu: () => void;
+    handleCountrySelectClick: () => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+}
+export declare const useCountrySelector: ({ enableCountryChange, disabled, }?: UseCountrySelectorOptions) => UseCountrySelectorReturn;