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

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/demo/AutofillDemo.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("react");
+var useAutofillDetection_1 = require("../../hooks/useAutofillDetection");
+/**
+ * Demo component to showcase the autofill detection functionality
+ * This can be used for testing and development purposes
+ */
+var AutofillDemo = function () {
+    var _a = (0, react_1.useState)(''), phoneNumber = _a[0], setPhoneNumber = _a[1];
+    var _b = (0, useAutofillDetection_1.useAutofillDetection)(), isAutoFilledActive = _b.isAutoFilledActive, inputRef = _b.inputRef;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '20px', maxWidth: '400px' }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Autofill Detection Demo" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '20px' }, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "phone-demo", children: "Phone Number:" }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: "phone-demo", type: "tel", value: phoneNumber, onChange: function (e) { return setPhoneNumber(e.target.value); }, placeholder: "Enter phone number", style: {
+                            width: '100%',
+                            padding: '10px',
+                            marginTop: '5px',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            backgroundColor: isAutoFilledActive ? '#e8f0fe' : 'white',
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: '10px',
+                    backgroundColor: isAutoFilledActive ? '#e8f0fe' : '#f5f5f5',
+                    borderRadius: '4px',
+                    border: "2px solid ".concat(isAutoFilledActive ? '#4285f4' : '#ddd')
+                }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Autofill Status:" }), " ", isAutoFilledActive ? 'ACTIVE' : 'Inactive'] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '20px', fontSize: '14px', color: '#666' }, children: [(0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("strong", { children: "Instructions:" }) }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Type in the phone number field" }), (0, jsx_runtime_1.jsx)("li", { children: "Use browser autofill (Ctrl+Shift+L or right-click \u2192 Fill)" }), (0, jsx_runtime_1.jsx)("li", { children: "Watch the status change to \"ACTIVE\"" }), (0, jsx_runtime_1.jsx)("li", { children: "The input background will change to blue when autofilled" })] })] })] }));
+};
+exports.default = AutofillDemo;
+//# sourceMappingURL=AutofillDemo.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/demo/AutofillDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutofillDemo.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/demo/AutofillDemo.tsx"],"names":[],"mappings":";;;AAAA,+BAAwC;AACxC,yEAAwE;AAExE;;;GAGG;AACH,IAAM,YAAY,GAAa;IACvB,IAAA,KAAgC,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA3C,WAAW,QAAA,EAAE,cAAc,QAAgB,CAAC;IAC7C,IAAA,KAAmC,IAAA,2CAAoB,GAAE,EAAvD,kBAAkB,wBAAA,EAAE,QAAQ,cAA2B,CAAC;IAEhE,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,aAChD,qEAAgC,EAEhC,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,aAClC,kCAAO,OAAO,EAAC,YAAY,8BAAsB,EACjD,kCACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA9B,CAA8B,EAC/C,WAAW,EAAC,oBAAoB,EAChC,KAAK,EAAE;4BACL,KAAK,EAAE,MAAM;4BACb,OAAO,EAAE,MAAM;4BACf,SAAS,EAAE,KAAK;4BAChB,MAAM,EAAE,gBAAgB;4BACxB,YAAY,EAAE,KAAK;4BACnB,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;yBAC1D,GACD,IACE,EAEN,iCAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBAC3D,YAAY,EAAE,KAAK;oBACnB,MAAM,EAAE,oBAAa,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAE;iBAC/D,aACC,kEAAiC,OAAE,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,IACzE,EAEN,iCAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAChE,wCAAG,+DAA8B,GAAI,EACrC,2CACE,4EAAuC,EACvC,4GAAkE,EAClE,mFAA4C,EAC5C,sGAAiE,IAC9D,IACD,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.d.ts

@@ -0,0 +1,8 @@
+export interface ErrorDisplayProps {
+    id?: string;
+    errorMessage?: string;
+    role?: string;
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+}
+declare const ErrorDisplay: React.FC<ErrorDisplayProps>;
+export default ErrorDisplay;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.js

@@ -0,0 +1,17 @@
+"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 FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+var ErrorDisplay = function (_a) {
+    var id = _a.id, errorMessage = _a.errorMessage, role = _a.role, ariaLive = _a["aria-live"];
+    if (errorMessage) {
+        return ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { id: id, error: true, role: role, "aria-live": ariaLive, children: errorMessage }));
+    }
+    return null;
+};
+exports.default = ErrorDisplay;
+//# sourceMappingURL=ErrorDisplay.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplay.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.tsx"],"names":[],"mappings":";;;;;;AAAA,sCAAsC;AACtC,gFAA0D;AAS1D,IAAM,YAAY,GAAgC,UAAC,EAKlD;QAJC,EAAE,QAAA,EACF,YAAY,kBAAA,EACZ,IAAI,UAAA,EACS,QAAQ,kBAAA;IAErB,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL,uBAAC,wBAAc,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,QAAC,IAAI,EAAE,IAAI,eAAa,QAAQ,YAC1D,YAAY,GACE,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.d.ts

@@ -0,0 +1,22 @@
+export interface PhoneInputProps {
+    id: string;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    isAnswered?: boolean;
+    isSafari?: boolean;
+    isAutoFilledActive?: boolean;
+    experimentName?: string;
+    type?: string;
+    onChange: (params: {
+        id: string;
+        value: string;
+    }) => void;
+    onBlur?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    strictMode?: boolean;
+    [key: string]: any;
+}
+declare const PhoneInput: import("react").ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export default PhoneInput;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.js

@@ -0,0 +1,56 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("react");
+var index_1 = require("../../../../../Atoms/index");
+var PhoneInput = (0, react_1.forwardRef)(function (_a, ref) {
+    var id = _a.id, value = _a.value, placeholder = _a.placeholder, disabled = _a.disabled, error = _a.error, isAnswered = _a.isAnswered, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, experimentName = _a.experimentName, _b = _a.type, type = _b === void 0 ? 'tel' : _b, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, strictMode = _a.strictMode, props = __rest(_a, ["id", "value", "placeholder", "disabled", "error", "isAnswered", "isSafari", "isAutoFilledActive", "experimentName", "type", "onChange", "onBlur", "onClick", "strictMode"]);
+    var sanitizeStrict = function (raw) {
+        var MAX_DIGITS = 15; // E.164 allows up to 15 digits
+        var input = raw || '';
+        var cleaned = input.replace(/[^\d+]/g, '');
+        if (cleaned.startsWith('+')) {
+            var digitsOnly_1 = cleaned
+                .slice(1)
+                .replace(/\+/g, '')
+                .replace(/[^\d]/g, '');
+            return "+".concat(digitsOnly_1.slice(0, MAX_DIGITS));
+        }
+        var digitsOnly = cleaned.replace(/\+/g, '').replace(/[^\d]/g, '');
+        return digitsOnly.slice(0, MAX_DIGITS);
+    };
+    var handleChange = function (params) {
+        if (!strictMode) {
+            onChange(params);
+            return;
+        }
+        onChange({ id: params.id, value: sanitizeStrict(params.value) });
+    };
+    return ((0, jsx_runtime_1.jsx)(index_1.Input, __assign({ error: error, id: id, onChange: handleChange, valueTransform: strictMode ? sanitizeStrict : undefined, isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false, value: value, isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false, isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false, experimentName: experimentName !== null && experimentName !== void 0 ? experimentName : '', type: type, placeholder: placeholder, inputRef: ref, disabled: disabled, onBlur: onBlur, onClick: onClick, "aria-invalid": error }, props)));
+});
+PhoneInput.displayName = 'PhoneInput';
+exports.default = PhoneInput;
+//# sourceMappingURL=PhoneInput.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,+BAAmC;AACnC,oDAAmD;AAqBnD,IAAM,UAAU,GAAG,IAAA,kBAAU,EAC3B,UACE,EAgBC,EACD,GAAG;IAhBD,IAAA,EAAE,QAAA,EACF,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,UAAU,gBAAA,EACP,KAAK,cAfV,4KAgBC,CADS;IAIV,IAAM,cAAc,GAAG,UAAC,GAAW;QACjC,IAAM,UAAU,GAAG,EAAE,CAAC,CAAC,+BAA+B;QACtD,IAAM,KAAK,GAAG,GAAG,IAAI,EAAE,CAAC;QACxB,IAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC7C,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAM,YAAU,GAAG,OAAO;iBACvB,KAAK,CAAC,CAAC,CAAC;iBACR,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;iBAClB,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACzB,OAAO,WAAI,YAAU,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAE,CAAC;QAC/C,CAAC;QACD,IAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACpE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,MAAqC;QACzD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,QAAQ,CAAC,MAAM,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QACD,QAAQ,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,aAAK,aACJ,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,YAAY,EACtB,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACvD,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,EAC/B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,EAC3B,kBAAkB,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,KAAK,EAC/C,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,EACpC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,kBACF,KAAK,IACf,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,kBAAe,UAAU,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.d.ts

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

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js

@@ -0,0 +1,159 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 PhoneInput_1 = __importDefault(require("./PhoneInput"));
+// Mock the Input component
+jest.mock('../../../../Components/Atoms/Input', function () {
+    return function MockInput(_a) {
+        var onChange = _a.onChange, props = __rest(_a, ["onChange"]);
+        return ((0, jsx_runtime_1.jsx)("input", __assign({}, props, { onChange: function (e) {
+                onChange({ id: props.id, value: e.target.value });
+            }, "data-testid": "phone-input" })));
+    };
+});
+describe('PhoneInput', function () {
+    var defaultProps = {
+        id: 'test-phone',
+        value: '',
+        onChange: jest.fn(),
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('renders without crashing', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps)));
+        expect(react_1.screen.getByTestId('phone-input')).toBeInTheDocument();
+    });
+    it('calls onChange when input changes', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps)));
+        var input = react_1.screen.getByTestId('phone-input');
+        react_1.fireEvent.change(input, { target: { value: '123' } });
+        expect(defaultProps.onChange).toHaveBeenCalledWith({
+            id: 'test-phone',
+            value: '123',
+        });
+    });
+    describe('strictMode disabled (default)', function () {
+        it('allows all characters when strictMode is false', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: false })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: 'abc123def' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: 'abc123def',
+            });
+        });
+        it('allows special characters when strictMode is false', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: false })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: '123-456-7890' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '123-456-7890',
+            });
+        });
+        it('allows multiple plus signs when strictMode is false', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: false })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: '++123++456' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '++123++456',
+            });
+        });
+    });
+    describe('strictMode enabled', function () {
+        it('filters out non-numeric characters when strictMode is true', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: true })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: 'abc123def' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '123',
+            });
+        });
+        it('filters out special characters when strictMode is true', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: true })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: '123-456-7890' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '1234567890',
+            });
+        });
+        it('keeps only the first plus sign at the beginning when strictMode is true', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: true })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: '++123++456' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '+123456',
+            });
+        });
+        it('removes plus signs that are not at the beginning when strictMode is true', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: true })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: '123+456+789' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '123456789',
+            });
+        });
+        it('allows valid phone number format when strictMode is true', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: true })));
+            var input = react_1.screen.getByTestId('phone-input');
+            react_1.fireEvent.change(input, { target: { value: '+15551234567' } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '+15551234567',
+            });
+        });
+        it('caps length at maximum valid phone number length when strictMode is true', function () {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, defaultProps, { strictMode: true })));
+            var input = react_1.screen.getByTestId('phone-input');
+            // Try to input more than 16 characters (max allowed)
+            var longInput = '+155512345678901234567890';
+            react_1.fireEvent.change(input, { target: { value: longInput } });
+            expect(defaultProps.onChange).toHaveBeenCalledWith({
+                id: 'test-phone',
+                value: '+155512345678901', // Should be capped at 15 digits + 1 plus sign = 16 characters
+            });
+        });
+    });
+    it('passes through other props to Input component', function () {
+        var customProps = __assign(__assign({}, defaultProps), { placeholder: 'Enter phone number', disabled: true, 'data-custom': 'test-value' });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PhoneInput_1.default, __assign({}, customProps)));
+        var input = react_1.screen.getByTestId('phone-input');
+        expect(input).toHaveAttribute('placeholder', 'Enter phone number');
+        expect(input).toBeDisabled();
+        expect(input).toHaveAttribute('data-custom', 'test-value');
+    });
+    // Note: Empty input test is covered by the basic onChange test above
+});
+//# sourceMappingURL=PhoneInput.test.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js.map

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CountryData } from '../../utils/countryData';
+interface CountryDropdownProps {
+    selectedCountry: CountryData;
+    onCountryChange: (country: CountryData) => void;
+    enableCountrySearch?: boolean;
+    anchorEl?: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+}
+declare const CountryDropdown: React.FC<CountryDropdownProps>;
+export default CountryDropdown;

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

@@ -0,0 +1,206 @@
+"use strict";
+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;
+    };
+})();
+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 Popover_1 = __importDefault(require("@mui/material/Popover"));
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var InputBase_1 = __importDefault(require("@mui/material/InputBase"));
+var react_1 = __importStar(require("react"));
+var countryData_1 = require("../../utils/countryData");
+var FlagIcon_1 = __importDefault(require("./FlagIcon"));
+// Memoized country item component for better performance
+var CountryItem = react_1.default.memo(function (_a) {
+    var country = _a.country, index = _a.index, isSelected = _a.isSelected, onSelect = _a.onSelect, onMouseEnter = _a.onMouseEnter;
+    return ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { id: "country-option-".concat(index), selected: isSelected, onClick: function () { return onSelect(country); }, onMouseEnter: function () { return onMouseEnter(index); }, role: "option", "aria-selected": isSelected, "aria-label": "".concat(country.name, ", ").concat(country.dialCode), sx: {
+            padding: '8px 16px',
+            minHeight: '48px',
+            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.jsx)(FlagIcon_1.default, { countryCode: country.code, style: { marginRight: '8px' } }), (0, jsx_runtime_1.jsx)("span", { style: {
+                    flex: 1,
+                    fontSize: '14px',
+                    fontFamily: 'inherit',
+                }, children: country.name }), (0, jsx_runtime_1.jsx)("span", { style: {
+                    opacity: 0.7,
+                    fontSize: '12px',
+                    fontFamily: 'inherit',
+                    marginLeft: '8px',
+                }, children: country.dialCode })] }, country.code));
+});
+CountryItem.displayName = 'CountryItem';
+var CountryDropdown = function (_a) {
+    var onCountryChange = _a.onCountryChange, _b = _a.enableCountrySearch, enableCountrySearch = _b === void 0 ? false : _b, anchorEl = _a.anchorEl, open = _a.open, onClose = _a.onClose;
+    var _c = (0, react_1.useState)(''), searchTerm = _c[0], setSearchTerm = _c[1];
+    var _d = (0, react_1.useState)(-1), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var searchInputRef = (0, react_1.useRef)(null);
+    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 dropdown opens/closes
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            setSearchTerm('');
+            setSelectedIndex(-1);
+        }
+    }, [open]);
+    // Auto-focus search input when dropdown 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();
+            }, 100);
+            return function () { return clearTimeout(timer_1); };
+        }
+        else if (!open) {
+            // When closing, ensure any focused element inside the popover is blurred
+            // to prevent aria-hidden violations
+            var activeElement = document.activeElement;
+            if (activeElement && activeElement.closest('#country-selector-listbox')) {
+                activeElement.blur();
+            }
+        }
+        return undefined;
+    }, [open, enableCountrySearch]);
+    // Memoized callbacks for better performance
+    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('#country-selector-listbox')) {
+            activeElement.blur();
+        }
+        onCountryChange(country);
+        onClose();
+    }, [onCountryChange, 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();
+                onClose();
+                break;
+        }
+    }, [filteredCountries.length, selectedIndex, handleCountrySelect, onClose]);
+    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, { open: open, anchorEl: anchorEl, onClose: onClose, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+        }, disableRestoreFocus: true, disableEnforceFocus: true, slotProps: {
+            paper: {
+                id: 'country-selector-listbox',
+                role: 'dialog',
+                'aria-label': 'Select country',
+                sx: {
+                    maxHeight: 400,
+                    width: 300,
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+            },
+        }, children: [enableCountrySearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: '12px 16px',
+                    borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+                    backgroundColor: '#ffffff',
+                }, children: (0, jsx_runtime_1.jsx)(InputBase_1.default, { ref: searchInputRef, placeholder: "Search countries...", value: searchTerm, onChange: handleSearchChange, onKeyDown: handleKeyDown, fullWidth: true, sx: {
+                        fontSize: '14px',
+                        padding: '6px 8px',
+                        border: '1px solid rgba(0, 0, 0, 0.23)',
+                        borderRadius: '4px',
+                        backgroundColor: '#ffffff',
+                        '&:focus-within': {
+                            borderColor: 'primary.main',
+                            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',
+                    backgroundColor: '#ffffff',
+                }, role: "listbox", "aria-label": "Country list", "aria-activedescendant": selectedIndex >= 0 ? "country-option-".concat(selectedIndex) : undefined, children: filteredCountries.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                        padding: '16px',
+                        textAlign: 'center',
+                        color: 'rgba(0, 0, 0, 0.6)',
+                        fontSize: '14px',
+                    }, children: "No countries found" })) : (filteredCountries.map(function (country, index) { return ((0, jsx_runtime_1.jsx)(CountryItem, { country: country, index: index, isSelected: index === selectedIndex, onSelect: handleCountrySelect, onMouseEnter: setSelectedIndex }, country.code)); })) })] }));
+};
+exports.default = CountryDropdown;
+//# sourceMappingURL=CountryDropdown.js.map

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

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

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

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