@qiwi/pijma-mobile 1.149.3 → 1.150.2

package/lib/es5/oops/Oops.js

@@ -1,26 +1,73 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Oops = void 0;
-var tslib_1 = require("tslib");
-var pijma_core_1 = require("@qiwi/pijma-core");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var typography_1 = require("../typography/index.js");
-var Oops = function (_a) {
-    var logo = _a.logo, error = _a.error, title = _a.title, content = _a.content, footer = _a.footer;
-    return (react_1.default.createElement(pijma_core_1.Card, { px: 6, minHeight: "100%", bg: "#fff" },
-        react_1.default.createElement(pijma_core_1.Flex, { align: "center", direction: "column" },
-            logo ? react_1.default.createElement(pijma_core_1.FlexItem, { my: 6, shrink: 0, children: logo }) : null,
-            react_1.default.createElement(pijma_core_1.FlexItem, { my: 6 }, typeof error === 'string' ? (react_1.default.createElement(pijma_core_1.Typo, { align: "center", as: "p", css: {
-                    overflow: 'unset',
-                    fontSize: '152px',
-                    fontWeight: 900,
-                    color: '#fff',
-                    textShadow: '0 12px 36px rgba(0, 0, 0, 0.1)',
-                }, children: error })) : (error)),
-            react_1.default.createElement(pijma_core_1.FlexItem, { my: 2 },
-                react_1.default.createElement(typography_1.Heading, { align: "center", size: "1", children: title })),
-            react_1.default.createElement(pijma_core_1.FlexItem, { my: 4 }, typeof content === 'string' ? (react_1.default.createElement(typography_1.Paragraph, { align: "center", children: content })) : (content)),
-            footer ? (react_1.default.createElement(pijma_core_1.FlexItem, { my: 6, children: typeof footer === 'string' ? (react_1.default.createElement(typography_1.Paragraph, { align: "center", color: "support", children: footer })) : (footer) })) : null)));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Oops", {
+    enumerable: true,
+    get: function() {
+        return Oops;
+    }
+});
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var _typography = require("../typography/index.js");
+var Oops = function(param) {
+    var logo = param.logo, error = param.error, title = param.title, content = param.content, footer = param.footer;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Card, {
+        px: 6,
+        minHeight: "100%",
+        bg: "#fff",
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Flex, {
+            align: "center",
+            direction: "column",
+            children: [
+                logo ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                    my: 6,
+                    shrink: 0,
+                    children: logo
+                }) : null,
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                    my: 6,
+                    children: typeof error === "string" ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Typo, {
+                        align: "center",
+                        as: "p",
+                        css: {
+                            overflow: "unset",
+                            fontSize: "152px",
+                            fontWeight: 900,
+                            color: "#fff",
+                            textShadow: "0 12px 36px rgba(0, 0, 0, 0.1)"
+                        },
+                        children: error
+                    }) : error
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                    my: 2,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Heading, {
+                        align: "center",
+                        size: "1",
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                    my: 4,
+                    children: typeof content === "string" ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Paragraph, {
+                        align: "center",
+                        children: content
+                    }) : content
+                }),
+                footer ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                    my: 6,
+                    children: typeof footer === "string" ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Paragraph, {
+                        align: "center",
+                        color: "support",
+                        children: footer
+                    }) : footer
+                }) : null
+            ]
+        })
+    });
 };
-exports.Oops = Oops;
-exports.Oops.displayName = "Oops"
+Oops.displayName = "Oops";

package/lib/es5/oops/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./Oops.js"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./Oops.js"), exports);

package/lib/es5/pagination/Pagination.js

@@ -1,28 +1,89 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-var tslib_1 = require("tslib");
-var pijma_core_1 = require("@qiwi/pijma-core");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var typography_1 = require("../typography/index.js");
-var PaginationLink_1 = require("./PaginationLink.js");
-var Pagination = function (_a) {
-    var total = _a.total, _b = _a.count, count = _b === void 0 ? 3 : _b, _c = _a.shadowed, shadowed = _c === void 0 ? false : _c, active = _a.active, href = _a.href, _d = _a.stub, stub = _d === void 0 ? false : _d, onChange = _a.onChange;
-    return (react_1.default.createElement(pijma_core_1.PaginationControl, { total: total, count: count, active: active, href: href, onChange: onChange, children: function (renderProps) { return (react_1.default.createElement(pijma_core_1.Card, { bg: "#fff", s: shadowed ? '0 1px 2px 0 rgba(0,0,0,0.12)' : '0 0 0 1px #e6e6e6', height: 12, display: "inline-flex", r: 10, overflow: "hidden" },
-            react_1.default.createElement(PaginationLink_1.PaginationLink, { page: renderProps.prev, disabled: renderProps.active === 1, href: href ? href(renderProps.prev) : undefined, stub: stub, onClick: renderProps.onPageClick(renderProps.prev, renderProps.active === 1), children: function (_a) {
-                    var disabled = _a.disabled;
-                    return (react_1.default.createElement(pijma_core_1.Icon, { name: "angle-small-left", color: disabled ? '#ccc' : '#000' }));
-                } }),
-            renderProps.pages.map(function (page) { return (react_1.default.createElement(PaginationLink_1.PaginationLink, { key: page, page: page, disabled: false, href: href ? href(page) : undefined, stub: stub, onClick: renderProps.onPageClick(page, false), children: function () { return (react_1.default.createElement(typography_1.Text, { bold: false, size: "m", color: renderProps.active === page ? 'warning' : 'default', children: page })); } })); }),
-            react_1.default.createElement(PaginationLink_1.PaginationLink, { page: renderProps.next, disabled: renderProps.active === renderProps.total, href: href ? href(renderProps.next) : undefined, stub: stub, onClick: renderProps.onPageClick(renderProps.next, renderProps.active === renderProps.total), children: function (_a) {
-                    var disabled = _a.disabled;
-                    return (react_1.default.createElement(pijma_core_1.Icon, { name: "angle-small-right", color: disabled ? '#ccc' : '#000' }));
-                } }))); } }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Pagination", {
+    enumerable: true,
+    get: function() {
+        return Pagination;
+    }
+});
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var _typography = require("../typography/index.js");
+var _paginationLink = require("./PaginationLink.js");
+var Pagination = function(param) {
+    var total = param.total, _count = param.count, count = _count === void 0 ? 3 : _count, _shadowed = param.shadowed, shadowed = _shadowed === void 0 ? false : _shadowed, active = param.active, href = param.href, _stub = param.stub, stub = _stub === void 0 ? false : _stub, onChange = param.onChange;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.PaginationControl, {
+        total: total,
+        count: count,
+        active: active,
+        href: href,
+        onChange: onChange,
+        children: function(renderProps) {
+            return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Card, {
+                bg: "#fff",
+                s: shadowed ? "0 1px 2px 0 rgba(0,0,0,0.12)" : "0 0 0 1px #e6e6e6",
+                height: 12,
+                display: "inline-flex",
+                r: 10,
+                overflow: "hidden",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_paginationLink.PaginationLink, {
+                        page: renderProps.prev,
+                        disabled: renderProps.active === 1,
+                        href: href ? href(renderProps.prev) : undefined,
+                        stub: stub,
+                        onClick: renderProps.onPageClick(renderProps.prev, renderProps.active === 1),
+                        children: function(param) {
+                            var disabled = param.disabled;
+                            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
+                                name: "angle-small-left",
+                                color: disabled ? "#ccc" : "#000"
+                            });
+                        }
+                    }),
+                    renderProps.pages.map(function(page) {
+                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_paginationLink.PaginationLink, {
+                            page: page,
+                            disabled: false,
+                            href: href ? href(page) : undefined,
+                            stub: stub,
+                            onClick: renderProps.onPageClick(page, false),
+                            children: function() {
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Text, {
+                                    bold: false,
+                                    size: "m",
+                                    color: renderProps.active === page ? "warning" : "default",
+                                    children: page
+                                });
+                            }
+                        }, page);
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_paginationLink.PaginationLink, {
+                        page: renderProps.next,
+                        disabled: renderProps.active === renderProps.total,
+                        href: href ? href(renderProps.next) : undefined,
+                        stub: stub,
+                        onClick: renderProps.onPageClick(renderProps.next, renderProps.active === renderProps.total),
+                        children: function(param) {
+                            var disabled = param.disabled;
+                            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
+                                name: "angle-small-right",
+                                color: disabled ? "#ccc" : "#000"
+                            });
+                        }
+                    })
+                ]
+            });
+        }
+    });
 };
-exports.Pagination = Pagination;
-exports.Pagination.displayName = "Pagination"
-exports.Pagination.defaultProps = {
+Pagination.displayName = "Pagination";
+Pagination.defaultProps = {
     shadowed: false,
     count: 3,
-    stub: false,
+    stub: false
 };

package/lib/es5/pagination/PaginationLink.js

@@ -1,17 +1,58 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationLink = void 0;
-var tslib_1 = require("tslib");
-var pijma_core_1 = require("@qiwi/pijma-core");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var PaginationLink = function (props) { return (react_1.default.createElement(pijma_core_1.LinkControl, { href: props.stub ? undefined : props.href, onClick: props.stub ? undefined : props.onClick, children: function (renderProps) { return (react_1.default.createElement(pijma_core_1.CardLnk, { as: props.stub ? 'div' : 'a', transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)", height: 12, width: props.width, display: "inline-flex", cursor: props.stub || props.disabled ? 'default' : 'pointer', s: "1px 0 0 #e6e6e6", href: props.stub ? undefined : props.href, onClick: props.stub ? undefined : renderProps.onClick, onFocus: props.stub ? undefined : renderProps.onFocus, onBlur: props.stub ? undefined : renderProps.onBlur, onMouseEnter: props.stub ? undefined : renderProps.onMouseEnter, onMouseLeave: props.stub ? undefined : renderProps.onMouseLeave, onMouseUp: props.stub ? undefined : renderProps.onMouseUp, onMouseDown: props.stub ? undefined : renderProps.onMouseDown },
-        react_1.default.createElement(pijma_core_1.Flex, { align: "center", justify: "center", width: 1, height: 1, children: props.stub ? (react_1.default.createElement(pijma_core_1.Stub, { height: 6, width: 6, r: 12 })) : (props.children({
-                disabled: props.disabled || false,
-                hover: renderProps.hover,
-                focus: renderProps.focus,
-            })) }))); } })); };
-exports.PaginationLink = PaginationLink;
-exports.PaginationLink.displayName = "PaginationLink"
-exports.PaginationLink.defaultProps = {
-    width: 12,
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PaginationLink", {
+    enumerable: true,
+    get: function() {
+        return PaginationLink;
+    }
+});
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var PaginationLink = function(props) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.LinkControl, {
+        href: props.stub ? undefined : props.href,
+        onClick: props.stub ? undefined : props.onClick,
+        children: function(renderProps) {
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.CardLnk, {
+                as: props.stub ? "div" : "a",
+                transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)",
+                height: 12,
+                width: props.width,
+                display: "inline-flex",
+                cursor: props.stub || props.disabled ? "default" : "pointer",
+                s: "1px 0 0 #e6e6e6",
+                href: props.stub ? undefined : props.href,
+                onClick: props.stub ? undefined : renderProps.onClick,
+                onFocus: props.stub ? undefined : renderProps.onFocus,
+                onBlur: props.stub ? undefined : renderProps.onBlur,
+                onMouseEnter: props.stub ? undefined : renderProps.onMouseEnter,
+                onMouseLeave: props.stub ? undefined : renderProps.onMouseLeave,
+                onMouseUp: props.stub ? undefined : renderProps.onMouseUp,
+                onMouseDown: props.stub ? undefined : renderProps.onMouseDown,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Flex, {
+                    align: "center",
+                    justify: "center",
+                    width: 1,
+                    height: 1,
+                    children: props.stub ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Stub, {
+                        height: 6,
+                        width: 6,
+                        r: 12
+                    }) : props.children({
+                        disabled: props.disabled || false,
+                        hover: renderProps.hover,
+                        focus: renderProps.focus
+                    })
+                })
+            });
+        }
+    });
+};
+PaginationLink.displayName = "PaginationLink";
+PaginationLink.defaultProps = {
+    width: 12
 };

package/lib/es5/pagination/index.js

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./Pagination.js"), exports);
-(0, tslib_1.__exportStar)(require("./PaginationLink.js"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./Pagination.js"), exports);
+_exportStar(require("./PaginationLink.js"), exports);

package/lib/es5/password-field/PasswordField.js

@@ -1,13 +1,69 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PasswordField = void 0;
-var tslib_1 = require("tslib");
-var pijma_core_1 = require("@qiwi/pijma-core");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var PasswordField = function (props) { return (react_1.default.createElement(pijma_core_1.PasswordFieldControl, { onChange: props.onChange, onFocus: props.onFocus, onBlur: props.onBlur, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onToggle: props.onToggle, children: function (renderProps) { return (react_1.default.createElement(pijma_core_1.InputField, { title: props.title, active: renderProps.focused || !!props.value || !!props.placeholder, input: react_1.default.createElement(pijma_core_1.BasicInput, { type: props.viewed && !renderProps.hidden ? 'text' : 'password', value: props.value, name: props.name, autoComplete: props.autoComplete, autoFocus: props.autoFocus, placeholder: props.placeholder, inputMode: props.inputMode, disabled: props.disabled, pr: props.hint || props.viewed ? 7 : undefined, error: !!props.error, focused: renderProps.focused, maxLength: props.maxLength, mask: props.mask, pipe: props.pipe, onChange: renderProps.onChange, onFocus: renderProps.onFocus, onBlur: renderProps.onBlur, onKeyDown: renderProps.onKeyDown, onKeyUp: renderProps.onKeyUp }), hint: props.viewed ? (react_1.default.createElement(pijma_core_1.Box, { display: "inline-block", width: 1, height: 1, onClick: renderProps.onToggle, children: react_1.default.createElement(pijma_core_1.Icon, { name: renderProps.hidden ? 'eye-closed' : 'eye-opened', color: props.disabled ? '#666' : '#000' }) })) : props.hint ? (props.hint) : null, error: props.error, help: props.help, action: props.action })); } })); };
-exports.PasswordField = PasswordField;
-exports.PasswordField.displayName = "PasswordField"
-exports.PasswordField.defaultProps = {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PasswordField", {
+    enumerable: true,
+    get: function() {
+        return PasswordField;
+    }
+});
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var PasswordField = function(props) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.PasswordFieldControl, {
+        onChange: props.onChange,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
+        onToggle: props.onToggle,
+        children: function(renderProps) {
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.InputField, {
+                title: props.title,
+                active: renderProps.focused || !!props.value || !!props.placeholder,
+                input: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.BasicInput, {
+                    type: props.viewed && !renderProps.hidden ? "text" : "password",
+                    value: props.value,
+                    name: props.name,
+                    autoComplete: props.autoComplete,
+                    autoFocus: props.autoFocus,
+                    placeholder: props.placeholder,
+                    inputMode: props.inputMode,
+                    disabled: props.disabled,
+                    pr: props.hint || props.viewed ? 7 : undefined,
+                    error: !!props.error,
+                    focused: renderProps.focused,
+                    maxLength: props.maxLength,
+                    mask: props.mask,
+                    pipe: props.pipe,
+                    onChange: renderProps.onChange,
+                    onFocus: renderProps.onFocus,
+                    onBlur: renderProps.onBlur,
+                    onKeyDown: renderProps.onKeyDown,
+                    onKeyUp: renderProps.onKeyUp
+                }),
+                hint: props.viewed ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                    display: "inline-block",
+                    width: 1,
+                    height: 1,
+                    onClick: renderProps.onToggle,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
+                        name: renderProps.hidden ? "eye-closed" : "eye-opened",
+                        color: props.disabled ? "#666" : "#000"
+                    })
+                }) : props.hint ? props.hint : null,
+                error: props.error,
+                help: props.help,
+                action: props.action
+            });
+        }
+    });
+};
+PasswordField.displayName = "PasswordField";
+PasswordField.defaultProps = {
     tabIndex: 0,
-    viewed: true,
+    viewed: true
 };

package/lib/es5/password-field/PasswordFieldProps.js

@@ -1,2 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib/es5/password-field/index.js

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./PasswordField.js"), exports);
-(0, tslib_1.__exportStar)(require("./PasswordFieldProps.js"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./PasswordField.js"), exports);
+_exportStar(require("./PasswordFieldProps.js"), exports);

package/lib/es5/phone-field/PhoneField.js

@@ -1,34 +1,151 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhoneField = void 0;
-var tslib_1 = require("tslib");
-var pijma_core_1 = require("@qiwi/pijma-core");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var drop_up_1 = require("../drop-up/index.js");
-var typography_1 = require("../typography/index.js");
-var PhoneField = function (_a) {
-    var _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, _c = _a.code, code = _c === void 0 ? 'ru' : _c, props = (0, tslib_1.__rest)(_a, ["tabIndex", "code"]);
-    return props.stub ? (react_1.default.createElement(pijma_core_1.InputField, { stub: true, active: false, input: false, title: props.title, help: props.help, hint: props.hint, icon: "icon" })) : (react_1.default.createElement(pijma_core_1.PhoneFieldControl, { value: props.value, countries: props.countries, onChange: props.onChange, onFocus: props.onFocus, onBlur: props.onBlur, children: function (renderProps) { return (react_1.default.createElement(pijma_core_1.MenuControl, { count: props.countries.length, onSelect: renderProps.onSelectCountry, children: function (menuRenderProps) { return (react_1.default.createElement(pijma_core_1.Pos, { type: "relative", ref: renderProps.containerRef },
-                react_1.default.createElement(pijma_core_1.InputField, { title: props.title, active: renderProps.focused || !!props.value || !!props.placeholder, input: react_1.default.createElement(pijma_core_1.BasicInput, { ref: renderProps.inputRef, type: "tel", value: renderProps.value, name: props.name, mask: renderProps.mask, autoComplete: props.autoComplete, autoFocus: props.autoFocus, placeholder: props.placeholder, inputMode: props.inputMode, disabled: props.disabled, pr: props.hint ? 7 : undefined, pl: 9, error: !!props.error, focused: renderProps.focused, maxLength: props.maxLength, onChange: renderProps.onChange, onFocus: renderProps.onFocus, onBlur: renderProps.onBlur, onKeyDown: renderProps.showCountries
-                            ? menuRenderProps.onKeyDown
-                            : undefined }), hint: props.hint, icon: react_1.default.createElement(pijma_core_1.Box, { cursor: "pointer", width: 6, height: 4, my: 1, onClick: renderProps.onFlagClick, onMouseDown: renderProps.onFlagMouseDown, children: react_1.default.createElement(pijma_core_1.Flag, { code: renderProps.code || code }) }), error: props.error, help: props.help, action: props.action }),
-                react_1.default.createElement(drop_up_1.DropUp, { title: "\u041A\u043E\u0434 \u0441\u0442\u0440\u0430\u043D\u044B", show: renderProps.showCountries, autoFocus: true, onKeyDown: menuRenderProps.onKeyDown, onHide: renderProps.onCountriesHide },
-                    react_1.default.createElement(pijma_core_1.CardPos, { ref: menuRenderProps.containerRef, type: "relative", height: 1, overflow: "auto" }, menuRenderProps.items.map(function (country, index) { return (react_1.default.createElement(pijma_core_1.Card, { key: index, ref: country.ref, width: 1, px: 6, cursor: "pointer", bg: country.selected
-                            ? '#E6E6E6'
-                            : country.focused
-                                ? '#F5F5F5'
-                                : '#FFF', onClick: country.onClick, onMouseEnter: country.onMouseEnter },
-                        react_1.default.createElement(pijma_core_1.Flex, { py: 3, align: "center" },
-                            react_1.default.createElement(pijma_core_1.FlexItem, { shrink: 1, mr: 3 },
-                                react_1.default.createElement(pijma_core_1.Box, { width: 6, height: 4, my: 1 },
-                                    react_1.default.createElement(pijma_core_1.Flag, { code: props.countries[index].code }))),
-                            react_1.default.createElement(pijma_core_1.FlexItem, { width: 16, shrink: 1 },
-                                react_1.default.createElement(typography_1.Paragraph, { bold: true }, "+" + props.countries[index].mask.replace(/\D/g, ''))),
-                            react_1.default.createElement(typography_1.Paragraph, { bold: true }, props.countries[index].name)))); }))))); } })); } }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PhoneField", {
+    enumerable: true,
+    get: function() {
+        return PhoneField;
+    }
+});
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _objectWithoutPropertiesLoose = require("@swc/helpers/lib/_object_without_properties_loose.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var _dropUp = require("../drop-up/index.js");
+var _typography = require("../typography/index.js");
+var PhoneField = function(_param) {
+    var _tabIndex = _param.tabIndex, tabIndex = _tabIndex === void 0 ? 0 : _tabIndex, _code = _param.code, code = _code === void 0 ? "ru" : _code, props = _objectWithoutPropertiesLoose(_param, [
+        "tabIndex",
+        "code"
+    ]);
+    return props.stub ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.InputField, {
+        stub: true,
+        active: false,
+        input: false,
+        title: props.title,
+        help: props.help,
+        hint: props.hint,
+        icon: "icon"
+    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.PhoneFieldControl, {
+        value: props.value,
+        countries: props.countries,
+        onChange: props.onChange,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        children: function(renderProps) {
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.MenuControl, {
+                count: props.countries.length,
+                onSelect: renderProps.onSelectCountry,
+                children: function(menuRenderProps) {
+                    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Pos, {
+                        type: "relative",
+                        ref: renderProps.containerRef,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.InputField, {
+                                title: props.title,
+                                active: renderProps.focused || !!props.value || !!props.placeholder,
+                                input: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.BasicInput, {
+                                    ref: renderProps.inputRef,
+                                    type: "tel",
+                                    value: renderProps.value,
+                                    name: props.name,
+                                    mask: renderProps.mask,
+                                    autoComplete: props.autoComplete,
+                                    autoFocus: props.autoFocus,
+                                    placeholder: props.placeholder,
+                                    inputMode: props.inputMode,
+                                    disabled: props.disabled,
+                                    pr: props.hint ? 7 : undefined,
+                                    pl: 9,
+                                    error: !!props.error,
+                                    focused: renderProps.focused,
+                                    maxLength: props.maxLength,
+                                    onChange: renderProps.onChange,
+                                    onFocus: renderProps.onFocus,
+                                    onBlur: renderProps.onBlur,
+                                    onKeyDown: renderProps.showCountries ? menuRenderProps.onKeyDown : undefined
+                                }),
+                                hint: props.hint,
+                                icon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                                    cursor: "pointer",
+                                    width: 6,
+                                    height: 4,
+                                    my: 1,
+                                    onClick: renderProps.onFlagClick,
+                                    onMouseDown: renderProps.onFlagMouseDown,
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Flag, {
+                                        code: renderProps.code || code
+                                    })
+                                }),
+                                error: props.error,
+                                help: props.help,
+                                action: props.action
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dropUp.DropUp, {
+                                title: "Код страны",
+                                show: renderProps.showCountries,
+                                autoFocus: true,
+                                onKeyDown: menuRenderProps.onKeyDown,
+                                onHide: renderProps.onCountriesHide,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.CardPos, {
+                                    ref: menuRenderProps.containerRef,
+                                    type: "relative",
+                                    height: 1,
+                                    overflow: "auto",
+                                    children: menuRenderProps.items.map(function(country, index) {
+                                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Card, {
+                                            ref: country.ref,
+                                            width: 1,
+                                            px: 6,
+                                            cursor: "pointer",
+                                            bg: country.selected ? "#E6E6E6" : country.focused ? "#F5F5F5" : "#FFF",
+                                            onClick: country.onClick,
+                                            onMouseEnter: country.onMouseEnter,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Flex, {
+                                                py: 3,
+                                                align: "center",
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                                                        shrink: 1,
+                                                        mr: 3,
+                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Box, {
+                                                            width: 6,
+                                                            height: 4,
+                                                            my: 1,
+                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Flag, {
+                                                                code: props.countries[index].code
+                                                            })
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                                                        width: 16,
+                                                        shrink: 1,
+                                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Paragraph, {
+                                                            bold: true,
+                                                            children: "+" + props.countries[index].mask.replace(/\D/g, "")
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Paragraph, {
+                                                        bold: true,
+                                                        children: props.countries[index].name
+                                                    })
+                                                ]
+                                            })
+                                        }, index);
+                                    })
+                                })
+                            })
+                        ]
+                    });
+                }
+            });
+        }
+    });
 };
-exports.PhoneField = PhoneField;
-exports.PhoneField.displayName = "PhoneField"
-exports.PhoneField.defaultProps = {
+PhoneField.displayName = "PhoneField";
+PhoneField.defaultProps = {
     tabIndex: 0,
-    code: 'ru',
+    code: "ru"
 };

package/lib/es5/phone-field/PhoneFieldProps.js

@@ -1,2 +1,4 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib/es5/phone-field/index.js

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./PhoneField.js"), exports);
-(0, tslib_1.__exportStar)(require("./PhoneFieldProps.js"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./PhoneField.js"), exports);
+_exportStar(require("./PhoneFieldProps.js"), exports);