@mvf/external-components 3.30.0 → 3.31.1-dev.4

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.js

@@ -0,0 +1,154 @@
+"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");
+/** @jsxImportSource @emotion/react */
+var FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+var FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+var react_1 = require("react");
+var Input_1 = __importDefault(require("../../../Components/Atoms/Input"));
+var InputLabel_1 = __importDefault(require("../../../Components/Atoms/InputLabel"));
+var makeFormControlPhoneNumberStyling_1 = __importDefault(require("./makeFormControlPhoneNumberStyling"));
+var makeFormControlStyles_1 = __importDefault(require("../../../Components/Atoms/FormControl/makeFormControlStyles"));
+var CountryDropdown_1 = __importDefault(require("./CountryDropdown"));
+var CountryModal_1 = __importDefault(require("./CountryModal"));
+var FlagIcon_1 = __importDefault(require("./FlagIcon"));
+var usePhoneNumber_1 = require("./usePhoneNumber");
+var useCountrySelector_1 = require("./useCountrySelector");
+var defaultProps = {
+    disabled: false,
+    isAnswered: false,
+    isSafari: false,
+    isAutoFilledActive: false,
+    enableCountryChange: true,
+    enableCountrySearch: false,
+    useModalForCountrySelection: false,
+    label: '',
+    value: '',
+    onBlur: function () { },
+    onClick: function () { },
+};
+var PhoneNumberTextFieldRefactored = function (_a) {
+    var 
+    // Core props
+    id = _a.id, _b = _a.value, value = _b === void 0 ? '' : _b, label = _a.label, errorMessage = _a.errorMessage, disabled = _a.disabled, placeholder = _a.placeholder, 
+    // Country settings
+    initialCountry = _a.initialCountry, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection, 
+    // UI state
+    isAnswered = _a.isAnswered, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, experimentName = _a.experimentName, 
+    // Callbacks
+    onPhoneNumberChange = _a.onPhoneNumberChange, onCountryChange = _a.onCountryChange, onChange = _a.onChange, // Legacy support
+    // Event handlers
+    onBlur = _a.onBlur, onClick = _a.onClick, props = __rest(_a, ["id", "value", "label", "errorMessage", "disabled", "placeholder", "initialCountry", "enableCountryChange", "enableCountrySearch", "useModalForCountrySelection", "isAnswered", "isSafari", "isAutoFilledActive", "experimentName", "onPhoneNumberChange", "onCountryChange", "onChange", "onBlur", "onClick"]);
+    var countrySelectorRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)(null);
+    // Custom hooks for clean separation of concerns
+    var phoneNumber = (0, usePhoneNumber_1.usePhoneNumber)({
+        initialCountry: initialCountry,
+        initialValue: value,
+    });
+    var countrySelector = (0, useCountrySelector_1.useCountrySelector)({
+        enableCountryChange: enableCountryChange,
+    });
+    // Handle phone number change events
+    (0, react_1.useEffect)(function () {
+        if (phoneNumber.phoneNumber || phoneNumber.validationResult) {
+            var event_1 = {
+                id: id,
+                phoneNumber: phoneNumber.phoneNumber,
+                e164Number: phoneNumber.formattedE164,
+                isValid: phoneNumber.isValid,
+                selectedCountry: phoneNumber.selectedCountry,
+                validationResult: phoneNumber.validationResult,
+            };
+            onPhoneNumberChange === null || onPhoneNumberChange === void 0 ? void 0 : onPhoneNumberChange(event_1);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event_1); // Legacy support
+        }
+    }, [
+        id,
+        phoneNumber.phoneNumber,
+        phoneNumber.formattedE164,
+        phoneNumber.isValid,
+        phoneNumber.selectedCountry,
+        phoneNumber.validationResult,
+        onPhoneNumberChange,
+        onChange,
+    ]);
+    // Handle input changes
+    var handlePhoneChange = (0, react_1.useCallback)(function (params) {
+        phoneNumber.setPhoneNumber(params.value);
+    }, [phoneNumber]);
+    // Handle country changes
+    var handleCountryChange = (0, react_1.useCallback)(function (country) {
+        var previousCountry = phoneNumber.selectedCountry;
+        phoneNumber.setSelectedCountry(country);
+        // Call country change callback
+        var event = {
+            id: id,
+            selectedCountry: country,
+            previousCountry: previousCountry,
+        };
+        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(event);
+    }, [phoneNumber, id, onCountryChange]);
+    // Determine error state
+    var shouldShowError = errorMessage ||
+        (phoneNumber.validationResult && !phoneNumber.validationResult.isValid && phoneNumber.phoneNumber.length > 0);
+    var finalErrorMessage = errorMessage || phoneNumber.errorMessage;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, __assign({ variant: "standard", error: !!shouldShowError, fullWidth: true, css: [
+                    (0, makeFormControlPhoneNumberStyling_1.default)({
+                        isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false,
+                        isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false,
+                        isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false,
+                        hasError: !!shouldShowError,
+                    }),
+                    (0, makeFormControlStyles_1.default)({
+                        isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false,
+                        isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false
+                    }),
+                ], sx: { position: 'relative' } }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, __assign({ isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false, htmlFor: id, shrink: true, experimentName: experimentName }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "phone-input-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ ref: countrySelectorRef, className: "country-selector", onClick: enableCountryChange ? countrySelector.handleCountrySelectClick : undefined, style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    padding: '8px 12px',
+                                    cursor: enableCountryChange ? 'pointer' : 'default',
+                                    minWidth: '80px',
+                                    justifyContent: 'center',
+                                }, role: enableCountryChange ? 'button' : undefined, tabIndex: enableCountryChange ? 0 : undefined, "aria-label": enableCountryChange
+                                    ? "Select country, currently ".concat(phoneNumber.selectedCountry.name)
+                                    : "Country: ".concat(phoneNumber.selectedCountry.name), onKeyDown: countrySelector.handleKeyDown }, { children: [(0, jsx_runtime_1.jsx)(FlagIcon_1.default, { countryCode: phoneNumber.selectedCountry.code, style: { marginRight: '8px' } }), enableCountryChange && ((0, jsx_runtime_1.jsx)(ExpandMore_1.default, { style: {
+                                            fontSize: '16px',
+                                            color: 'rgba(0, 0, 0, 1)',
+                                            marginLeft: '4px',
+                                            transform: countrySelector.isCountryMenuOpen
+                                                ? 'rotate(180deg)'
+                                                : 'rotate(0deg)',
+                                            transition: 'transform 0.1s ease-in-out',
+                                        } }))] })), (0, jsx_runtime_1.jsx)(Input_1.default, __assign({ error: !!shouldShowError, id: id, onChange: handlePhoneChange, isAnswered: isAnswered !== null && isAnswered !== void 0 ? isAnswered : false, value: phoneNumber.phoneNumber, isSafari: isSafari !== null && isSafari !== void 0 ? isSafari : false, isAutoFilledActive: isAutoFilledActive !== null && isAutoFilledActive !== void 0 ? isAutoFilledActive : false, experimentName: experimentName, type: "tel", placeholder: placeholder || phoneNumber.selectedCountry.example, inputRef: inputRef, disabled: disabled, onBlur: onBlur, onClick: onClick }, props))] })), finalErrorMessage && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: finalErrorMessage }))] })), enableCountryChange && useModalForCountrySelection ? ((0, jsx_runtime_1.jsx)(CountryModal_1.default, { selectedCountry: phoneNumber.selectedCountry, onCountryChange: handleCountryChange, enableCountrySearch: enableCountrySearch, open: countrySelector.isCountryMenuOpen, onClose: countrySelector.closeCountryMenu })) : ((0, jsx_runtime_1.jsx)(CountryDropdown_1.default, { selectedCountry: phoneNumber.selectedCountry, onCountryChange: handleCountryChange, enableCountrySearch: enableCountrySearch, anchorEl: countrySelectorRef.current, open: countrySelector.isCountryMenuOpen, onClose: countrySelector.closeCountryMenu }))] }));
+};
+PhoneNumberTextFieldRefactored.defaultProps = defaultProps;
+exports.default = PhoneNumberTextFieldRefactored;
+//# sourceMappingURL=PhoneNumberTextFieldRefactored.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldRefactored.js.map

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

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+type StoryType = React.FunctionComponent<{
+    disabled: boolean;
+    errorMessage: string;
+    isAnswered: boolean;
+    label: string;
+    placeholder: string;
+    type: 'tel' | 'text';
+    parentContainerMaxWidth: number;
+    isSafari: boolean;
+    isAutoFilledActive: boolean;
+    enableCountryChange: boolean;
+    enableCountrySearch: boolean;
+    useModalForCountrySelection: boolean;
+}>;
+declare const PhoneNumberTextFieldStory: StoryType;
+export default PhoneNumberTextFieldStory;

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.js

@@ -0,0 +1,29 @@
+"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");
+var addon_actions_1 = require("@storybook/addon-actions");
+var PhoneNumberTextField_1 = __importDefault(require("./PhoneNumberTextField"));
+var handleChange = function (_a) {
+    var id = _a.id, value = _a.value;
+    (0, addon_actions_1.action)('Input Change')({ phone: value });
+};
+var PhoneNumberTextFieldStory = function (_a) {
+    var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: parentContainerMaxWidth } }, { children: (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onChange: handleChange, type: type, id: "id", isAnswered: isAnswered, label: label, placeholder: placeholder, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, experimentName: "default", enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection }) })));
+};
+exports.default = PhoneNumberTextFieldStory;
+//# sourceMappingURL=PhoneNumberTextFieldStory.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberTextFieldStory.js","sourceRoot":"","sources":["../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextFieldStory.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,0DAAkD;AAGlD,gFAA0D;AAiB1D,IAAM,YAAY,GAAG,UAAC,EAAkD;QAAhD,EAAE,QAAA,EAAE,KAAK,WAAA;IAC/B,IAAA,sBAAM,EAAC,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,IAAM,yBAAyB,GAAc,UAAC,EAa7C;QAZC,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,uBAAuB,6BAAA,EACvB,QAAQ,cAAA,EACR,kBAAkB,wBAAA,EAClB,mBAAmB,yBAAA,EACnB,mBAAmB,yBAAA,EACnB,2BAA2B,iCAAA;IAE3B,OAAO,CACL,yCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,uBAAuB,EAAE,gBAC/C,uBAAC,8BAAoB,IACnB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,IAAI,EACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,cAAc,EAAC,SAAS,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,mBAAmB,EACxC,2BAA2B,EAAE,2BAA2B,GACxD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,yBAAyB,CAAC"}

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCountrySelector = void 0;
+var react_1 = require("react");
+var useCountrySelector = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.enableCountryChange, enableCountryChange = _c === void 0 ? true : _c;
+    var _d = (0, react_1.useState)(false), isCountryMenuOpen = _d[0], setIsCountryMenuOpen = _d[1];
+    var openCountryMenu = (0, react_1.useCallback)(function () {
+        if (enableCountryChange) {
+            setIsCountryMenuOpen(true);
+        }
+    }, [enableCountryChange]);
+    var closeCountryMenu = (0, react_1.useCallback)(function () {
+        setIsCountryMenuOpen(false);
+    }, []);
+    var handleCountrySelectClick = (0, react_1.useCallback)(function () {
+        openCountryMenu();
+    }, [openCountryMenu]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        if (enableCountryChange && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            openCountryMenu();
+        }
+    }, [enableCountryChange, openCountryMenu]);
+    return {
+        isCountryMenuOpen: isCountryMenuOpen,
+        openCountryMenu: openCountryMenu,
+        closeCountryMenu: closeCountryMenu,
+        handleCountrySelectClick: handleCountrySelectClick,
+        handleKeyDown: handleKeyDown,
+    };
+};
+exports.useCountrySelector = useCountrySelector;
+//# sourceMappingURL=useCountrySelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCountrySelector.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.ts"],"names":[],"mappings":";;;AAAA,+BAA8C;AAcvC,IAAM,kBAAkB,GAAG,UAAC,EAEF;QAFE,qBAEJ,EAAE,KAAA,EAD/B,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA;IAEpB,IAAA,KAA4C,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1D,iBAAiB,QAAA,EAAE,oBAAoB,QAAmB,CAAC;IAElE,IAAM,eAAe,GAAG,IAAA,mBAAW,EAAC;QAClC,IAAI,mBAAmB,EAAE,CAAC;YACxB,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,IAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC;QACnC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,wBAAwB,GAAG,IAAA,mBAAW,EAAC;QAC3C,eAAe,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,UAAC,CAAsB;QACrB,IAAI,mBAAmB,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YAChE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,mBAAmB,EAAE,eAAe,CAAC,CACvC,CAAC;IAEF,OAAO;QACL,iBAAiB,mBAAA;QACjB,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,wBAAwB,0BAAA;QACxB,aAAa,eAAA;KACd,CAAC;AACJ,CAAC,CAAC;AApCW,QAAA,kBAAkB,sBAoC7B"}

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

@@ -0,0 +1,12 @@
+import { PhoneValidationResult } from '../utils/phoneValidation';
+export interface DebouncedValidationOptions {
+    validationFunction: () => PhoneValidationResult | null;
+    delay?: number;
+    immediate?: boolean;
+}
+export interface DebouncedValidationReturn {
+    debouncedResult: PhoneValidationResult | null;
+    isValidating: boolean;
+    validateNow: () => void;
+}
+export declare const useDebouncedValidation: ({ validationFunction, delay, immediate, }: DebouncedValidationOptions) => DebouncedValidationReturn;

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedValidation = void 0;
+var react_1 = require("react");
+var useDebouncedValidation = function (_a) {
+    var validationFunction = _a.validationFunction, _b = _a.delay, delay = _b === void 0 ? 300 : _b, _c = _a.immediate, immediate = _c === void 0 ? false : _c;
+    var _d = (0, react_1.useState)(null), debouncedResult = _d[0], setDebouncedResult = _d[1];
+    var _e = (0, react_1.useState)(false), isValidating = _e[0], setIsValidating = _e[1];
+    var timeoutRef = (0, react_1.useRef)(null);
+    var isFirstCall = (0, react_1.useRef)(true);
+    var validationFunctionRef = (0, react_1.useRef)(validationFunction);
+    // Update the ref when validationFunction changes instead of recreating callbacks
+    (0, react_1.useEffect)(function () {
+        validationFunctionRef.current = validationFunction;
+    }, [validationFunction]);
+    var validateNow = (0, react_1.useCallback)(function () {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsValidating(false);
+        var result = validationFunctionRef.current();
+        setDebouncedResult(result);
+    }, []); // No dependencies since we use ref
+    var debouncedValidate = (0, react_1.useCallback)(function () {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // If it's the first call and immediate validation is enabled, validate right away
+        if (isFirstCall.current && immediate) {
+            isFirstCall.current = false;
+            validateNow();
+            return;
+        }
+        isFirstCall.current = false;
+        setIsValidating(true);
+        timeoutRef.current = setTimeout(function () {
+            validateNow();
+        }, delay);
+    }, [delay, immediate, validateNow]);
+    // Only trigger validation when the validation function actually changes
+    // Use a ref to track the previous function to avoid infinite loops
+    var prevValidationFunctionRef = (0, react_1.useRef)(validationFunction);
+    (0, react_1.useEffect)(function () {
+        // Only re-validate if the function reference actually changed
+        if (prevValidationFunctionRef.current !== validationFunction) {
+            prevValidationFunctionRef.current = validationFunction;
+            debouncedValidate();
+        }
+        return function () {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [validationFunction, debouncedValidate]);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return {
+        debouncedResult: debouncedResult,
+        isValidating: isValidating,
+        validateNow: validateNow,
+    };
+};
+exports.useDebouncedValidation = useDebouncedValidation;
+//# sourceMappingURL=useDebouncedValidation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedValidation.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useDebouncedValidation.ts"],"names":[],"mappings":";;;AAAA,+BAAiE;AAe1D,IAAM,sBAAsB,GAAG,UAAC,EAIV;QAH3B,kBAAkB,wBAAA,EAClB,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EACX,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA;IAEX,IAAA,KACJ,IAAA,gBAAQ,EAA+B,IAAI,CAAC,EADvC,eAAe,QAAA,EAAE,kBAAkB,QACI,CAAC;IACzC,IAAA,KAAkC,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAC;IACxD,IAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,IAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IACjC,IAAM,qBAAqB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IAEzD,iFAAiF;IACjF,IAAA,iBAAS,EAAC;QACR,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IACrD,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,IAAM,WAAW,GAAG,IAAA,mBAAW,EAAC;QAC9B,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACjC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;SAC3B;QAED,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,IAAM,MAAM,GAAG,qBAAqB,CAAC,OAAO,EAAE,CAAC;QAC/C,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mCAAmC;IAE3C,IAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC;QACpC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAClC;QAED,kFAAkF;QAClF,IAAI,WAAW,CAAC,OAAO,IAAI,SAAS,EAAE;YACpC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,WAAW,EAAE,CAAC;YACd,OAAO;SACR;QAED,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,eAAe,CAAC,IAAI,CAAC,CAAC;QAEtB,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;YAC9B,WAAW,EAAE,CAAC;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpC,wEAAwE;IACxE,mEAAmE;IACnE,IAAM,yBAAyB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IAC7D,IAAA,iBAAS,EAAC;QACR,8DAA8D;QAC9D,IAAI,yBAAyB,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC5D,yBAAyB,CAAC,OAAO,GAAG,kBAAkB,CAAC;YACvD,iBAAiB,EAAE,CAAC;SACrB;QAED,OAAO;YACL,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC;QACR,OAAO;YACL,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,eAAe,iBAAA;QACf,YAAY,cAAA;QACZ,WAAW,aAAA;KACZ,CAAC;AACJ,CAAC,CAAC;AA9EW,QAAA,sBAAsB,0BA8EjC"}

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

@@ -0,0 +1,32 @@
+import { CountryData } from '../utils/countryData';
+import { PhoneValidationResult } from '../utils/phoneValidation';
+export interface UsePhoneNumberOptions {
+    initialCountry?: string;
+    initialValue?: string;
+    onPhoneNumberChange?: (params: {
+        phoneNumber: string;
+        e164Number: string;
+    }) => void;
+    onCountryChange?: (params: {
+        selectedCountry: CountryData;
+        previousCountry: CountryData;
+    }) => void;
+    onValidationChange?: (params: {
+        isValid: boolean;
+        validationResult: PhoneValidationResult;
+        phoneNumber: string;
+    }) => void;
+}
+export interface UsePhoneNumberReturn {
+    phoneNumber: string;
+    selectedCountry: CountryData;
+    validationResult: PhoneValidationResult | null;
+    countries: CountryData[];
+    setPhoneNumber: (value: string) => void;
+    setSelectedCountry: (country: CountryData) => void;
+    isValid: boolean;
+    errorMessage?: string;
+    formattedE164: string;
+    phoneNumberType?: string;
+}
+export declare const usePhoneNumber: ({ initialCountry, initialValue, }?: Omit<UsePhoneNumberOptions, "onPhoneNumberChange" | "onCountryChange" | "onValidationChange">) => UsePhoneNumberReturn;

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePhoneNumber = void 0;
+var react_1 = require("react");
+var countryData_1 = require("../utils/countryData");
+var phoneValidation_1 = require("../utils/phoneValidation");
+var usePhoneNumber = function (_a) {
+    var _b, _c;
+    var _d = _a === void 0 ? {} : _a, initialCountry = _d.initialCountry, _e = _d.initialValue, initialValue = _e === void 0 ? '' : _e;
+    // Memoize countries data to prevent unnecessary recalculations
+    var countries = (0, react_1.useMemo)(function () { return (0, countryData_1.getCountryData)(); }, []);
+    // Initialize selected country
+    var _f = (0, react_1.useState)(function () {
+        if (initialCountry) {
+            var initialCountryData = countries.find(function (c) { return c.code === initialCountry; });
+            if (initialCountryData)
+                return initialCountryData;
+        }
+        return countries[0]; // Fallback to first country
+    }), selectedCountry = _f[0], setSelectedCountryState = _f[1];
+    var _g = (0, react_1.useState)(''), phoneNumber = _g[0], setPhoneNumberState = _g[1];
+    var _h = (0, react_1.useState)(null), validationResult = _h[0], setValidationResult = _h[1];
+    var previousValueRef = (0, react_1.useRef)('');
+    // Process phone number with country-specific formatting and validation
+    var processPhoneNumber = (0, react_1.useCallback)(function (phoneValue, countryCode, useNationalFormat) {
+        if (useNationalFormat === void 0) { useNationalFormat = true; }
+        var validation = (0, phoneValidation_1.validatePhoneNumber)(phoneValue, countryCode);
+        if (useNationalFormat && validation.nationalFormatted) {
+            return { formattedNumber: validation.nationalFormatted, validation: validation };
+        }
+        var formattedNumber = (0, phoneValidation_1.formatAsYouType)(phoneValue, countryCode);
+        return { formattedNumber: formattedNumber, validation: validation };
+    }, []);
+    // Update country if different from current
+    var updateCountryIfDifferent = (0, react_1.useCallback)(function (detectedCountryCode) {
+        var detectedCountry = countries.find(function (c) { return c.code === detectedCountryCode; });
+        if (detectedCountry && detectedCountry.code !== selectedCountry.code) {
+            return detectedCountry;
+        }
+        return null;
+    }, [countries, selectedCountry.code]);
+    // Handle external value changes (controlled component behavior)
+    (0, react_1.useEffect)(function () {
+        if (previousValueRef.current === initialValue)
+            return;
+        previousValueRef.current = initialValue || '';
+        if (!initialValue) {
+            setPhoneNumberState('');
+            setValidationResult(null);
+            return;
+        }
+        // Try to extract country code from the input value
+        var detectedCountryCode = (0, phoneValidation_1.extractCountryCodeFromNumber)(initialValue, selectedCountry.code);
+        if (detectedCountryCode) {
+            // Update country if different
+            var newCountry = updateCountryIfDifferent(detectedCountryCode);
+            if (newCountry) {
+                setSelectedCountryState(newCountry);
+            }
+            // Process with detected country
+            var _a = processPhoneNumber(initialValue, detectedCountryCode, true), formattedNumber = _a.formattedNumber, validation = _a.validation;
+            setPhoneNumberState(formattedNumber);
+            setValidationResult(validation);
+        }
+        else {
+            // Use current selected country
+            var _b = processPhoneNumber(initialValue, selectedCountry.code, false), formattedNumber = _b.formattedNumber, validation = _b.validation;
+            setPhoneNumberState(formattedNumber);
+            setValidationResult(validation);
+        }
+    }, [
+        initialValue,
+        selectedCountry.code,
+        processPhoneNumber,
+        updateCountryIfDifferent,
+    ]);
+    // Handle phone number changes
+    var setPhoneNumber = (0, react_1.useCallback)(function (newPhoneNumber) {
+        // Format as you type
+        var formattedNumber = (0, phoneValidation_1.formatAsYouType)(newPhoneNumber, selectedCountry.code);
+        setPhoneNumberState(formattedNumber);
+        // Validate with auto-detection first, then fallback to selected country
+        var validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber);
+        if (!validation.countryCode || !validation.isValid) {
+            validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber, selectedCountry.code);
+        }
+        setValidationResult(validation);
+        // Auto-update country if detected
+        if (validation.countryCode &&
+            validation.countryCode !== selectedCountry.code) {
+            var detectedCountry = countries.find(function (c) { return c.code === validation.countryCode; });
+            if (detectedCountry) {
+                setSelectedCountryState(detectedCountry);
+            }
+        }
+    }, [selectedCountry, countries]);
+    // Handle country changes
+    var setSelectedCountry = (0, react_1.useCallback)(function (country) {
+        setSelectedCountryState(country);
+        // Reformat existing phone number with new country's rules
+        if (phoneNumber) {
+            var reformattedNumber = (0, phoneValidation_1.formatAsYouType)(phoneNumber, country.code);
+            setPhoneNumberState(reformattedNumber);
+            // Re-validate with new country
+            var validation = (0, phoneValidation_1.validatePhoneNumber)(reformattedNumber, country.code);
+            setValidationResult(validation);
+            // Note: callbacks will be triggered by the main component useEffect
+        }
+        else {
+            setValidationResult(null);
+        }
+        // Note: callbacks will be triggered by the main component useEffect
+    }, [selectedCountry, phoneNumber]);
+    return {
+        // State
+        phoneNumber: phoneNumber,
+        selectedCountry: selectedCountry,
+        validationResult: validationResult,
+        countries: countries,
+        // Actions
+        setPhoneNumber: setPhoneNumber,
+        setSelectedCountry: setSelectedCountry,
+        // Computed
+        isValid: (_b = validationResult === null || validationResult === void 0 ? void 0 : validationResult.isValid) !== null && _b !== void 0 ? _b : false,
+        errorMessage: validationResult === null || validationResult === void 0 ? void 0 : validationResult.errorMessage,
+        formattedE164: (_c = validationResult === null || validationResult === void 0 ? void 0 : validationResult.formattedNumber) !== null && _c !== void 0 ? _c : '',
+        phoneNumberType: (validationResult === null || validationResult === void 0 ? void 0 : validationResult.phoneNumberType) !== undefined
+            ? String(validationResult.phoneNumberType)
+            : undefined,
+    };
+};
+exports.usePhoneNumber = usePhoneNumber;
+//# sourceMappingURL=usePhoneNumber.js.map

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

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

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/DebouncedValidationStory.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+type DebouncedValidationStoryType = React.FunctionComponent<{
+    disabled: boolean;
+    errorMessage?: string;
+    isAnswered: boolean;
+    label: string;
+    placeholder?: string;
+    type: 'tel' | 'text';
+    parentContainerMaxWidth: number;
+    isSafari: boolean;
+    isAutoFilledActive: boolean;
+    enableCountryChange: boolean;
+    enableCountrySearch: boolean;
+    useModalForCountrySelection: boolean;
+    enableDebouncedValidation: boolean;
+    validationDelay: number;
+    strictMode?: boolean;
+}>;
+declare const DebouncedValidationStory: DebouncedValidationStoryType;
+export default DebouncedValidationStory;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/DebouncedValidationStory.js

@@ -0,0 +1,60 @@
+"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");
+var addon_actions_1 = require("@storybook/addon-actions");
+var react_1 = require("react");
+var PhoneNumberTextField_1 = __importDefault(require("../../PhoneNumberTextField"));
+var DebouncedValidationStory = function (_a) {
+    var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection, enableDebouncedValidation = _a.enableDebouncedValidation, validationDelay = _a.validationDelay, strictMode = _a.strictMode;
+    var _b = (0, react_1.useState)(''), phoneValue = _b[0], setPhoneValue = _b[1];
+    var _c = (0, react_1.useState)({
+        isValid: false,
+    }), validationInfo = _c[0], setValidationInfo = _c[1];
+    var handlePhoneNumberChange = function (params) {
+        (0, addon_actions_1.action)('Phone Number Change')(params);
+        setPhoneValue(params.phoneNumber);
+    };
+    var handleValidationChange = function (params) {
+        (0, addon_actions_1.action)('Validation Change')(params);
+        setValidationInfo({
+            isValid: params.isValid,
+            errorMessage: params.validationResult.errorMessage,
+            isValidating: false,
+        });
+    };
+    var handleFormattedValueChange = function (params) {
+        (0, addon_actions_1.action)('Formatted Value Change')(params);
+    };
+    var handleCountryChange = function (params) {
+        (0, addon_actions_1.action)('Country Change')(params);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: parentContainerMaxWidth, padding: '20px' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                    backgroundColor: '#f5f5f5',
+                    padding: '16px',
+                    borderRadius: '8px',
+                    marginBottom: '20px',
+                    fontFamily: 'monospace',
+                } }, { children: [(0, jsx_runtime_1.jsx)("h3", __assign({ style: { margin: '0 0 12px 0', color: '#333' } }, { children: "Debounced Validation Demo" })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { fontSize: '14px', lineHeight: '1.5' } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Debounced Validation:" }), ' ', enableDebouncedValidation ? 'Enabled' : 'Disabled'] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Validation Delay:" }), " ", validationDelay, "ms"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Current Value:" }), " \"", phoneValue, "\""] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Is Valid:" }), ' ', (0, jsx_runtime_1.jsx)("span", __assign({ style: { color: validationInfo.isValid ? 'green' : 'red' } }, { children: validationInfo.isValid ? 'Yes' : 'No' }))] }), validationInfo.errorMessage && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), ' ', (0, jsx_runtime_1.jsx)("span", __assign({ style: { color: 'red' } }, { children: validationInfo.errorMessage }))] })), validationInfo.isValidating && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Status:" }), ' ', (0, jsx_runtime_1.jsx)("span", __assign({ style: { color: 'orange' } }, { children: "Validating..." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                    backgroundColor: '#e3f2fd',
+                    padding: '16px',
+                    borderRadius: '8px',
+                    marginBottom: '20px',
+                    fontSize: '14px',
+                } }, { children: [(0, jsx_runtime_1.jsx)("h4", __assign({ style: { margin: '0 0 8px 0', color: '#1976d2' } }, { children: "How to Test Debounced Validation:" })), (0, jsx_runtime_1.jsxs)("ol", __assign({ style: { margin: 0, paddingLeft: '20px' } }, { children: [(0, jsx_runtime_1.jsx)("li", { children: "Type quickly in the phone field - notice validation is delayed" }), (0, jsx_runtime_1.jsx)("li", { children: "When debounced validation is enabled, you'll see \"Validating...\" during the delay" }), (0, jsx_runtime_1.jsx)("li", { children: "Try typing: \"+1555555\" then pause to see validation kick in" }), (0, jsx_runtime_1.jsx)("li", { children: "Compare behavior with debounced validation enabled vs disabled" }), (0, jsx_runtime_1.jsx)("li", { children: "Check the Actions panel to see when callbacks are fired" })] }))] })), (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onPhoneNumberChange: handlePhoneNumberChange, onValidationChange: handleValidationChange, onFormattedValueChange: handleFormattedValueChange, onCountryChange: handleCountryChange, type: type, id: "debounced-phone-input", isAnswered: isAnswered, label: label, placeholder: placeholder, value: phoneValue, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, experimentName: "debounced-validation-story", enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection, enableDebouncedValidation: enableDebouncedValidation, validationDelay: validationDelay, strictMode: strictMode })] })));
+};
+exports.default = DebouncedValidationStory;
+//# sourceMappingURL=DebouncedValidationStory.js.map