react-gldn-kit 0.1.57 → 0.1.59

package/dist/lib/components/ui/Icons/FlagIcons/InSvg.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../types';
+export declare const INSvg: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ui/Icons/FlagIcons/InSvg.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSvg = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var INSvg = function (props) {
+    var _a = props.width, width = _a === void 0 ? '20' : _a, _b = props.height, height = _b === void 0 ? '20' : _b, classes = props.classes;
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: classes, width: width, height: height, viewBox: "-45 -30 90 60", fill: "#07038D" }, { children: [(0, jsx_runtime_1.jsx)("title", { children: "Flag of India" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FFF", d: "m-45-30h90v60h-90z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FF6820", d: "m-45-30h90v20h-90z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#046A38", d: "m-45 10h90v20h-90z" }), (0, jsx_runtime_1.jsx)("circle", { r: "9.25" }), (0, jsx_runtime_1.jsx)("circle", { fill: "#FFF", r: "8" }), (0, jsx_runtime_1.jsx)("circle", { r: "1.6" }), (0, jsx_runtime_1.jsxs)("g", __assign({ id: "d" }, { children: [(0, jsx_runtime_1.jsxs)("g", __assign({ id: "c" }, { children: [(0, jsx_runtime_1.jsxs)("g", __assign({ id: "b" }, { children: [(0, jsx_runtime_1.jsxs)("g", __assign({ id: "a" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "m0-8 .3 4.81409L0-.80235-.3-3.18591z" }), (0, jsx_runtime_1.jsx)("circle", { transform: "rotate(7.5)", r: "0.35", cy: "-8" })] })), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#a", transform: "scale(-1)" })] })), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#b", transform: "rotate(15)" })] })), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#c", transform: "rotate(30)" })] })), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#d", transform: "rotate(60)" }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#d", transform: "rotate(120)" })] })));
+};
+exports.INSvg = INSvg;

package/dist/lib/components/ui/Icons/FlagIcons/PKSvg.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../types';
+export declare const PKSvg: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ui/Icons/FlagIcons/PKSvg.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PKSvg = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var PKSvg = function (props) {
+    var _a = props.width, width = _a === void 0 ? '20' : _a, _b = props.height, height = _b === void 0 ? '20' : _b, classes = props.classes;
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: width, height: height, viewBox: "-75 -40 120 80", fill: "none", className: classes }, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "-75", y: "-40", width: "120", height: "80", fill: "#fff" }), (0, jsx_runtime_1.jsx)("rect", { x: "-45", y: "-40", width: "90", height: "80", fill: "#01411C" }), (0, jsx_runtime_1.jsx)("circle", { r: "24", fill: "#fff" }), (0, jsx_runtime_1.jsx)("circle", { r: "22", cx: "-7", cy: "-40", fill: "#01411C", transform: "rotate(-41.63354, 45, -40)" }), (0, jsx_runtime_1.jsx)("polygon", { points: "0,-513674 301930,415571 -488533,-158734 488533,-158734 -301930,415571", fill: "#fff", transform: "rotate(-41.63354) translate(16) rotate(18) scale(0.00001557408)" })] })));
+};
+exports.PKSvg = PKSvg;

package/dist/lib/components/ui/Icons/FlagIcons/UkrSvg.js

@@ -15,6 +15,6 @@ exports.UkrSvg = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var UkrSvg = function (props) {
     var _a = props.width, width = _a === void 0 ? '20' : _a, _b = props.height, height = _b === void 0 ? '20' : _b, classes = props.classes;
-    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: width, height: height, viewBox: "0 0 40 40", fill: "none", className: classes }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z", fill: "#FFDA44" }), (0, jsx_runtime_1.jsx)("path", { d: "M0 20C0 8.95437 8.95437 0 20 0C31.0456 0 40 8.95437 40 20", fill: "#338AF3" })] })));
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: width, height: height, viewBox: "0 0 24 24", fill: "none", className: classes }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z", fill: "#FFDA44" }), (0, jsx_runtime_1.jsx)("path", { d: "M0 20C0 8.95437 8.95437 0 20 0C31.0456 0 40 8.95437 40 20", fill: "#338AF3" })] })));
 };
 exports.UkrSvg = UkrSvg;

package/dist/lib/components/ui/Icons/FlagIcons/WorldSvg.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../types';
+export declare const WorldSvg: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ui/Icons/FlagIcons/WorldSvg.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorldSvg = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var WorldSvg = function (props) {
+    var _a = props.width, width = _a === void 0 ? '20' : _a, _b = props.height, height = _b === void 0 ? '20' : _b, classes = props.classes;
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: width, height: height, viewBox: "0 0 24 24", fill: "none", className: classes }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.15407 7.30116C7.52877 5.59304 9.63674 4.5 12 4.5C12.365 4.5 12.7238 4.52607 13.0748 4.57644L13.7126 5.85192L11.2716 8.2929L8.6466 8.6679L7.36009 9.95441L6.15407 7.30116ZM5.2011 8.82954C4.75126 9.79256 4.5 10.8669 4.5 12C4.5 15.6945 7.17133 18.7651 10.6878 19.3856L11.0989 18.7195L8.8147 15.547L10.3741 13.5256L9.63268 13.1549L6.94027 13.6036L6.41366 11.4972L5.2011 8.82954ZM7.95559 11.4802L8.05962 11.8964L9.86722 11.5951L11.3726 12.3478L14.0824 11.9714L18.9544 14.8135C19.3063 13.9447 19.5 12.995 19.5 12C19.5 8.93729 17.6642 6.30336 15.033 5.13856L15.5377 6.1481L11.9787 9.70711L9.35371 10.0821L7.95559 11.4802ZM18.2539 16.1414C16.9774 18.0652 14.8369 19.366 12.3859 19.4902L12.9011 18.6555L10.6853 15.578L12.0853 13.7632L13.7748 13.5286L18.2539 16.1414ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z", fill: "white" }) })));
+};
+exports.WorldSvg = WorldSvg;

package/dist/lib/components/ui/Inputs/PhoneInput/components/PhoneView/index.d.ts

@@ -0,0 +1,16 @@
+import { DefaultInputType } from 'components/ui/Inputs/BaseInput/types';
+import React, { ReactElement } from 'react';
+type Props = {
+    phone: DefaultInputType;
+    Flag: React.FC;
+    code: string;
+    handleSetValue: (d: React.ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactElement;
+    toggleValue?: () => void;
+    isOpened?: boolean;
+    mask?: string;
+    placeholder: string;
+    classes?: string;
+};
+declare const PhoneView: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default PhoneView;

package/dist/lib/components/ui/Inputs/PhoneInput/components/PhoneView/index.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 __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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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("react/jsx-runtime");
+var classnames_1 = __importDefault(require("classnames"));
+var ArrowButton_1 = require("components/ui/Buttons/ArrowButton");
+var BaseInputUi_1 = require("components/ui/Inputs/BaseInput/BaseInputUi");
+var validation_1 = require("service/validation");
+var styles = __importStar(require("./PhoneView.module.css"));
+var PhoneView = function (props) {
+    var _a, _b;
+    var phone = props.phone, Flag = props.Flag, children = props.children, toggleValue = props.toggleValue, isOpened = props.isOpened, mask = props.mask, code = props.code, handleSetValue = props.handleSetValue, classes = props.classes, placeholder = props.placeholder;
+    var value = phone.value, errorText = phone.errorText;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.row, classes, (_a = {},
+            _a[styles.opened] = isOpened,
+            _a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.code }, { children: (0, jsx_runtime_1.jsx)(Flag, {}) })), (0, jsx_runtime_1.jsx)(BaseInputUi_1.BaseInputUi, __assign({ size: "full", placeholder: placeholder, value: value, baseValue: code, defaultValue: code, handleChange: handleSetValue, patternFn: (0, validation_1.replaceValueByMask)(mask), classes: (0, classnames_1.default)(styles.input, (_b = {},
+                    _b[styles.errorBorder] = errorText,
+                    _b)) }, { children: children })), (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.arrow }, { children: toggleValue && ((0, jsx_runtime_1.jsx)(ArrowButton_1.ArrowButton, { isOpened: isOpened, toggleState: toggleValue })) }))] })));
+};
+exports.default = PhoneView;

package/dist/lib/components/ui/Inputs/PhoneInput/constants.d.ts

@@ -0,0 +1,11 @@
+import { PhoneMask } from './types';
+export declare const PHONE_MASK: {
+    [countryCodeDefault: string]: PhoneMask;
+};
+export declare const DEFAULT_COUNTRY_INFO: {
+    name: string;
+    code: string;
+    mask: string;
+    length: number;
+    Flag: (props: import("../../Icons/types").IconProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/lib/components/ui/Inputs/PhoneInput/constants.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_COUNTRY_INFO = exports.PHONE_MASK = void 0;
+var BnSvg_1 = require("components/ui/Icons/FlagIcons/BnSvg");
+var AzeSvg_1 = require("components/ui/Icons/FlagIcons/AzeSvg");
+var TrSvg_1 = require("components/ui/Icons/FlagIcons/TrSvg");
+var PtSvg_1 = require("components/ui/Icons/FlagIcons/PtSvg");
+var PKSvg_1 = require("components/ui/Icons/FlagIcons/PKSvg");
+var InSvg_1 = require("components/ui/Icons/FlagIcons/InSvg");
+var WorldSvg_1 = require("components/ui/Icons/FlagIcons/WorldSvg");
+exports.PHONE_MASK = {
+    BD: {
+        name: 'Bangladesh',
+        code: '+880',
+        mask: 'XXXX XXXXXX',
+        length: 10,
+        Flag: BnSvg_1.BnSvg,
+    },
+    TR: {
+        name: 'Turkey',
+        code: '+90',
+        mask: 'XXX XXX XXXX',
+        length: 10,
+        Flag: TrSvg_1.TrSvg,
+    },
+    IN: {
+        name: 'India',
+        code: '+91',
+        mask: 'XXXXX XXXXX',
+        length: 10,
+        Flag: InSvg_1.INSvg,
+    },
+    AZ: {
+        name: 'Azerbaijan',
+        code: '+994',
+        mask: 'XX XXX XX XX',
+        length: 9,
+        Flag: AzeSvg_1.AzeSvg,
+    },
+    PK: {
+        name: 'Pakistan',
+        code: '+92',
+        mask: 'XXXX XXXXXXX',
+        length: 10,
+        Flag: PKSvg_1.PKSvg,
+    },
+    BR: {
+        name: 'Brazil',
+        code: '+55',
+        mask: 'XX XXXXX XXXX',
+        length: 11,
+        Flag: PtSvg_1.PtSvg,
+    },
+};
+exports.DEFAULT_COUNTRY_INFO = {
+    name: '-',
+    code: '+',
+    mask: '',
+    length: 0,
+    Flag: WorldSvg_1.WorldSvg,
+};

package/dist/lib/components/ui/Inputs/PhoneInput/index.js

@@ -41,7 +41,6 @@ exports.PhoneInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var classnames_1 = __importDefault(require("classnames"));
-var react_phone_number_input_1 = __importStar(require("react-phone-number-input"));
 var validation_1 = require("service/validation");
 var Text_1 = require("components/Text");
 var BaseButton_1 = require("components/ui/Buttons/BaseButton");
@@ -49,21 +48,15 @@ var Timer_1 = __importDefault(require("components/ui/Timer"));
 var constant_1 = require("../BaseInput/constant");
 var styles = __importStar(require("./PhoneInput.module.css"));
 var mock_1 = require("constants/mock");
+var constants_1 = require("./constants");
+var WorldSvg_1 = require("components/ui/Icons/FlagIcons/WorldSvg");
+var PhoneView_1 = __importDefault(require("./components/PhoneView"));
 var PhoneInput = function (props) {
-    var _a;
-    var withConfirm = props.withConfirm, requestId = props.requestId, sendDataType = props.sendDataType, children = props.children, classesWrapper = props.classesWrapper, requestCallback = props.requestCallback, onChange = props.onChange, sendKey = props.sendKey, countryCodeDefault = props.countryCodeDefault, _b = props.section, section = _b === void 0 ? undefined : _b, requestCode = props.requestCode, countryInfo = props.countryInfo, buttonClasses = props.buttonClasses;
-    var _c = (0, react_1.useState)(constant_1.DEFAULT_INPUT_VALUE), phone = _c[0], setPhone = _c[1];
+    var withConfirm = props.withConfirm, requestId = props.requestId, sendDataType = props.sendDataType, children = props.children, classesWrapper = props.classesWrapper, requestCallback = props.requestCallback, onChange = props.onChange, sendKey = props.sendKey, countryCodeDefault = props.countryCodeDefault, _a = props.section, section = _a === void 0 ? undefined : _a, requestCode = props.requestCode, countryInfo = props.countryInfo, buttonClasses = props.buttonClasses;
+    var _b = (0, react_1.useState)(__assign(__assign({}, constant_1.DEFAULT_INPUT_VALUE), { value: '+' })), phone = _b[0], setPhone = _b[1];
+    var _c = (0, react_1.useState)(false), isOpened = _c[0], setOpenState = _c[1];
     var _d = (0, react_1.useState)(false), isRequestedCode = _d[0], setRequestedCodeStatus = _d[1];
-    var defaultCountry = (0, react_1.useMemo)(function () {
-        var _a, _b;
-        var country = countryCodeDefault ||
-            ((_b = (_a = mock_1.COUNTRY_MOCK.find(function (c) { return c.id === (countryInfo === null || countryInfo === void 0 ? void 0 : countryInfo.countryId); })) === null || _a === void 0 ? void 0 : _a.imageCode) === null || _b === void 0 ? void 0 : _b.toLocaleUpperCase());
-        return country;
-    }, [countryInfo, countryCodeDefault]);
-    var isValidPhone = (0, react_1.useMemo)(function () {
-        var isValid = phone.value.length > 2 && !phone.errorText;
-        return isValid;
-    }, [phone]);
+    var _e = (0, react_1.useState)(null), countryPhoneSettings = _e[0], setCountryPhoneSettings = _e[1];
     var handleRequestCode = function () {
         if (!withConfirm) {
             return;
@@ -78,47 +71,93 @@ var PhoneInput = function (props) {
         var baseKey = sendKey || '22x';
         requestCode === null || requestCode === void 0 ? void 0 : requestCode(baseKey, baseData);
     };
-    var handleSetValue = function (value) {
-        if (value === void 0) { value = ''; }
-        var errorText = (0, react_phone_number_input_1.isValidPhoneNumber)(value) ? '' : 'errors.phone';
-        if (countryCodeDefault === 'BD') {
-            var isValidRegionCode = value.startsWith('+8801');
-            if (!isValidRegionCode) {
-                errorText = 'errors.phone';
-            }
-        }
-        if (countryCodeDefault === 'IN') {
-            errorText = value.length !== 13 ? 'errors.phone' : '';
+    var handleValidatePhoneNumber = (0, react_1.useCallback)(function (phone) {
+        if (!countryPhoneSettings) {
+            return false;
         }
-        setPhone({ value: value, errorText: errorText });
+        var value = phone.replace(countryPhoneSettings.code, '').trim();
+        return value.length === countryPhoneSettings.length;
+    }, [countryPhoneSettings]);
+    var isValidPhone = (0, react_1.useMemo)(function () {
+        var isValid = countryPhoneSettings.length
+            ? handleValidatePhoneNumber(phone.value)
+            : phone.value.length > 1 && !phone.errorText;
+        return isValid;
+    }, [phone, countryPhoneSettings]);
+    var toggleValue = function () {
+        setOpenState(!isOpened);
     };
+    var handleChooseSettings = function (p) { return function () {
+        setCountryPhoneSettings(p);
+        setPhone({
+            value: p.code,
+            errorText: '',
+        });
+        toggleValue();
+    }; };
+    var handleSetValue = (0, react_1.useCallback)(function (_a) {
+        var target = _a.target;
+        var value = target.value;
+        var _b = countryPhoneSettings.length, length = _b === void 0 ? 0 : _b, code = countryPhoneSettings.code;
+        var fullLength = length + code.length;
+        if (!value) {
+            return;
+        }
+        if ((countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.length) &&
+            (value.length > fullLength || !+value || code.length > value.length)) {
+            return;
+        }
+        if ((countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.length) === undefined) {
+            return;
+        }
+        if (!length) {
+            setPhone({
+                value: "+".concat(value.replace('+', '')),
+                errorText: value.length > 12 && value.length < 16 ? '' : 'errors.phone',
+            });
+            return;
+        }
+        setPhone({
+            value: value,
+            errorText: handleValidatePhoneNumber(value) ? '' : 'errors.phone',
+        });
+    }, [handleValidatePhoneNumber, countryPhoneSettings]);
     var showTimer = function () {
         handleRequestCode();
         setRequestedCodeStatus(true);
         requestCallback === null || requestCallback === void 0 ? void 0 : requestCallback();
     };
+    (0, react_1.useEffect)(function () {
+        if (countryCodeDefault) {
+            var defaultValue = constants_1.PHONE_MASK[countryCodeDefault];
+            setCountryPhoneSettings(defaultValue || constants_1.DEFAULT_COUNTRY_INFO);
+            return;
+        }
+        if (!countryInfo) {
+            return;
+        }
+        var countryFullInfo = mock_1.COUNTRY_MOCK.find(function (c) { return c.id === countryInfo.countryId; });
+        if (!countryFullInfo) {
+            setCountryPhoneSettings(constants_1.DEFAULT_COUNTRY_INFO);
+            return;
+        }
+        var country = Object.values(constants_1.PHONE_MASK).find(function (c) { return c.code === countryFullInfo.dialCode; });
+        if (country) {
+            setPhone({ value: country.code, errorText: '' });
+        }
+        setCountryPhoneSettings(country || constants_1.DEFAULT_COUNTRY_INFO);
+    }, [countryCodeDefault, countryInfo]);
     (0, react_1.useEffect)(function () {
         if (phone.value && !phone.errorText) {
-            var errorText = (0, validation_1.composeValidations)([
-                (0, validation_1.isRequired)({ value: phone.value, errorText: 'errors.required' }),
-                (0, validation_1.isPhone)({ value: phone.value, errorText: 'errors.phone' }),
-            ]);
-            // TODO first render
-            if (errorText) {
-                return;
-            }
             onChange(phone.value);
             return;
         }
         onChange('');
     }, [phone, onChange]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapper, classesWrapper) }, { children: [(0, jsx_runtime_1.jsx)(react_phone_number_input_1.default, __assign({ international: true, countryCallingCodeEditable: false, isvalid: phone.errorText, withCountryCallingCode: countryCodeDefault, limitMaxLength: true, 
-                // CountryCode
-                // @ts-ignore
-                defaultCountry: defaultCountry, 
-                // @ts-ignore
-                countries: countryCodeDefault ? [countryCodeDefault] : undefined, disabled: isRequestedCode, onChange: handleSetValue, className: (0, classnames_1.default)(styles.input, (_a = {},
-                    _a[styles.errorBorder] = phone.errorText,
-                    _a)) }, { children: children })), phone.errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.error }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: phone.errorText }) }))), withConfirm && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isRequestedCode ? ((0, jsx_runtime_1.jsx)(Timer_1.default, { handleRequestCode: handleRequestCode })) : ((0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton, { text: "getCodeBtn", disabled: !isValidPhone, color: "primary", handleClick: showTimer, size: "--button-full", centreText: true, buttonHeight: "--button-height-full", classes: buttonClasses })) }))] })));
+    var Flag = (countryPhoneSettings || {}).Flag;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapper, classesWrapper) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.list }, { children: [(0, jsx_runtime_1.jsx)(PhoneView_1.default, __assign({ placeholder: (countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.name) || '', phone: phone, Flag: Flag || WorldSvg_1.WorldSvg, code: (countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.code) || '+', handleSetValue: handleSetValue, toggleValue: toggleValue, isOpened: isOpened, mask: countryPhoneSettings === null || countryPhoneSettings === void 0 ? void 0 : countryPhoneSettings.mask }, { children: children })), isOpened && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.items }, { children: Object.values(constants_1.PHONE_MASK).map(function (p) {
+                            var CountryFlag = p.Flag;
+                            return ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleChooseSettings(p) }, { children: (0, jsx_runtime_1.jsx)(PhoneView_1.default, { placeholder: "", phone: { value: p.code, errorText: '' }, Flag: CountryFlag, code: p.code, handleSetValue: console.info, mask: p.mask, classes: styles.disabledBorder }) }), p.code));
+                        }) })))] })), phone.errorText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.error }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: phone.errorText }) }))), withConfirm && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isRequestedCode ? ((0, jsx_runtime_1.jsx)(Timer_1.default, { handleRequestCode: handleRequestCode })) : ((0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton, { text: "getCodeBtn", disabled: !isValidPhone, color: "primary", handleClick: showTimer, size: "--button-full", centreText: true, buttonHeight: "--button-height-full", classes: buttonClasses })) }))] })));
 };
 exports.PhoneInput = PhoneInput;

package/dist/lib/components/ui/Inputs/PhoneInput/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ERequestIds, RecoverySubType } from 'react-memory-optimization/dist/lib/binary/types';
 import { BaseInputProps } from '../BaseInput/types';
 export type PhoneInputProps = BaseInputProps & (PhoneInputPropsWithConfirmation | PhoneInputPropsWithoutConfirmation) & {
@@ -25,3 +26,10 @@ export type PhoneInputPropsWithConfirmation = {
     requestCallback?: () => void;
     sendKey?: string;
 };
+export type PhoneMask = {
+    name: string;
+    code: string;
+    mask: string;
+    length: number;
+    Flag: React.FC;
+};

package/dist/main.css

@@ -1473,6 +1473,81 @@
   color: var(--input-base-autofill-text-color);
   background-clip: text;
 }
+
+.KIT__PhoneInput-module__list___GgLkp {
+  position: relative;
+}
+
+.KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    left: 0;
+    border: var(--input-border);
+    background-color: var(--input-background);
+    z-index: 3;
+    border-radius: 0 0 10px 10px;
+  }
+
+.KIT__PhoneInput-module__list___GgLkp .KIT__PhoneInput-module__items___UoSJS .KIT__PhoneInput-module__disabledBorder___UYdKe * {
+        border: none;
+        background: #1F222F;
+        border-radius: 0;
+      }
+.KIT__PhoneView-module__row___EVJyb {
+  display: flex;
+}
+
+.KIT__PhoneView-module__row___EVJyb .KIT__PhoneView-module__code___y3pYW {
+    border-radius: 10px 0 0 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    border: 2px solid transparent;
+    border: 2px solid var(--base-700, transparent);
+    border-right: 0;
+    padding-left: var(--indent-s);
+    padding-right: var(--indent-xs);
+    background-color: var(--input-background);
+
+  }
+
+.KIT__PhoneView-module__row___EVJyb .KIT__PhoneView-module__arrow___Qw7Mg {
+    border-radius: 0 10px 10px 0;
+    display: flex;
+    width: 45px;
+    border: 2px solid transparent;
+    border: 2px solid var(--base-700, transparent);
+    border-left: 0;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--input-background);
+  }
+
+.KIT__PhoneView-module__row___EVJyb .KIT__PhoneView-module__arrow___Qw7Mg svg {
+      transform: rotate(180deg);
+      width: 15px;
+      height: 10px;
+    }
+
+.KIT__PhoneView-module__row___EVJyb.KIT__PhoneView-module__opened___cbAQs * {
+      border-bottom: 0;
+    }
+
+.KIT__PhoneView-module__row___EVJyb.KIT__PhoneView-module__opened___cbAQs .KIT__PhoneView-module__arrow___Qw7Mg {
+      border-radius: 0 10px 0 0;
+    }
+
+.KIT__PhoneView-module__row___EVJyb.KIT__PhoneView-module__opened___cbAQs .KIT__PhoneView-module__code___y3pYW {
+      border-radius: 10px 0 0 0;
+    }
+
+.KIT__PhoneView-module__input___gRvqf {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
 .KIT__Code-module__drop____Xnq2 {
   height: 100%;
   border-radius: var(--radius-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gldn-kit",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "",
   "main": "./dist/index.js",
   "keywords": [],