@sima-land/ui-nucleons 42.0.0 → 43.0.0

package/colors.d.ts

@@ -1,46 +1,41 @@
 declare const collection: {
-    readonly black: "#000";
-    readonly white: "#fff";
-    readonly 'brand-blue': "#1f84db";
-    readonly 'brand-dark-blue': "#002b41";
-    readonly 'brand-deep-blue': "#00599d";
-    readonly 'brand-dirty': "#80b4d2";
-    readonly 'brand-sky': "#e4f1f9";
-    readonly gray87: "#212121";
-    readonly gray76: "#3a3a3b";
-    readonly gray66: "#545455";
-    readonly gray54: "#757575";
-    readonly gray38: "#9e9e9e";
-    readonly gray24: "#c2c2c2";
-    readonly gray12: "#e0e0e0";
-    readonly gray8: "#ebebeb";
-    readonly gray4: "#f5f5f5";
-    readonly gray2: "#fafafa";
-    readonly 'additional-amber': "#ffab00";
-    readonly 'additional-blue-gray': "#607d8b";
-    readonly 'additional-blue': "#2962ff";
-    readonly 'additional-brown': "#795548";
-    readonly 'additional-cyan': "#00b8d4";
-    readonly 'additional-deep-orange': "#ff7200";
-    readonly 'additional-deep-purple': "#634bdf";
+    readonly 'basic-blue': "#1f84db";
+    readonly 'basic-gray87': "#212121";
+    readonly 'basic-gray76': "#3a3a3b";
+    readonly 'basic-gray66': "#545455";
+    readonly 'basic-gray54': "#757575";
+    readonly 'basic-gray38': "#9e9e9e";
+    readonly 'basic-gray24': "#c2c2c2";
+    readonly 'basic-gray12': "#e0e0e0";
+    readonly 'basic-gray8': "#ebebeb";
+    readonly 'basic-gray4': "#f5f5f5";
+    readonly 'basic-gray2': "#fafafa";
+    readonly 'basic-white': "#ffffff";
     readonly 'additional-deep-red': "#d50000";
-    readonly 'additional-faded-green': "#eff9ea";
-    readonly 'additional-fog': "#e9f1f4";
-    readonly 'additional-gold': "#d5a43b";
-    readonly 'additional-grass': "#66cb2f";
+    readonly 'additional-red': "#fb3a2f";
+    readonly 'additional-light-red': "#feebea";
+    readonly 'additional-teal': "#09ab8b";
     readonly 'additional-green': "#00c853";
-    readonly 'additional-light-blue': "#0091ea";
     readonly 'additional-light-green': "#64dd17";
-    readonly 'additional-light-red': "#feebea";
     readonly 'additional-lime': "#aeea00";
+    readonly 'additional-faded-green': "#eff9ea";
     readonly 'additional-pink': "#e82e5c";
     readonly 'additional-purple': "#b52ea8";
-    readonly 'additional-red': "#fb3a2f";
-    readonly 'additional-sand': "#f6f5ed";
-    readonly 'additional-teal': "#09ab8b";
     readonly 'additional-violet': "#902bd0";
+    readonly 'additional-deep-purple': "#634bdf";
+    readonly 'additional-electric-blue': "#2962ff";
+    readonly 'additional-light-blue': "#0091ea";
+    readonly 'additional-cyan': "#00b8d4";
+    readonly 'additional-sky': "#e4f1f9";
+    readonly 'additional-deep-orange': "#ff7200";
+    readonly 'additional-amber': "#ffab00";
     readonly 'additional-yellow': "#ffd600";
+    readonly 'additional-gold': "#d5a43b";
+    readonly 'additional-brown': "#795548";
+    readonly 'additional-blue-gray': "#607d8b";
+    readonly 'additional-deep-blue': "#00599d";
+    readonly 'additional-dark-blue': "#002b41";
 };
 export declare type Token = keyof typeof collection;
-export declare const COLORS: Map<"black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow", string>;
+export declare const COLORS: Map<"basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue", string>;
 export {};

package/colors.js

@@ -3,49 +3,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.COLORS = void 0;
 const collection = {
     // basic
-    black: '#000',
-    white: '#fff',
-    // brand
-    'brand-blue': '#1f84db',
-    'brand-dark-blue': '#002b41',
-    'brand-deep-blue': '#00599d',
-    'brand-dirty': '#80b4d2',
-    'brand-sky': '#e4f1f9',
-    // gray
-    gray87: '#212121',
-    gray76: '#3a3a3b',
-    gray66: '#545455',
-    gray54: '#757575',
-    gray38: '#9e9e9e',
-    gray24: '#c2c2c2',
-    gray12: '#e0e0e0',
-    gray8: '#ebebeb',
-    gray4: '#f5f5f5',
-    gray2: '#fafafa',
+    'basic-blue': '#1f84db',
+    'basic-gray87': '#212121',
+    'basic-gray76': '#3a3a3b',
+    'basic-gray66': '#545455',
+    'basic-gray54': '#757575',
+    'basic-gray38': '#9e9e9e',
+    'basic-gray24': '#c2c2c2',
+    'basic-gray12': '#e0e0e0',
+    'basic-gray8': '#ebebeb',
+    'basic-gray4': '#f5f5f5',
+    'basic-gray2': '#fafafa',
+    'basic-white': '#ffffff',
     // additional
-    'additional-amber': '#ffab00',
-    'additional-blue-gray': '#607d8b',
-    'additional-blue': '#2962ff',
-    'additional-brown': '#795548',
-    'additional-cyan': '#00b8d4',
-    'additional-deep-orange': '#ff7200',
-    'additional-deep-purple': '#634bdf',
     'additional-deep-red': '#d50000',
-    'additional-faded-green': '#eff9ea',
-    'additional-fog': '#e9f1f4',
-    'additional-gold': '#d5a43b',
-    'additional-grass': '#66cb2f',
+    'additional-red': '#fb3a2f',
+    'additional-light-red': '#feebea',
+    'additional-teal': '#09ab8b',
     'additional-green': '#00c853',
-    'additional-light-blue': '#0091ea',
     'additional-light-green': '#64dd17',
-    'additional-light-red': '#feebea',
     'additional-lime': '#aeea00',
+    'additional-faded-green': '#eff9ea',
     'additional-pink': '#e82e5c',
     'additional-purple': '#b52ea8',
-    'additional-red': '#fb3a2f',
-    'additional-sand': '#f6f5ed',
-    'additional-teal': '#09ab8b',
     'additional-violet': '#902bd0',
+    'additional-deep-purple': '#634bdf',
+    'additional-electric-blue': '#2962ff',
+    'additional-light-blue': '#0091ea',
+    'additional-cyan': '#00b8d4',
+    'additional-sky': '#e4f1f9',
+    'additional-deep-orange': '#ff7200',
+    'additional-amber': '#ffab00',
     'additional-yellow': '#ffd600',
+    'additional-gold': '#d5a43b',
+    'additional-brown': '#795548',
+    'additional-blue-gray': '#607d8b',
+    'additional-deep-blue': '#00599d',
+    'additional-dark-blue': '#002b41',
 };
 exports.COLORS = new Map(Object.entries(collection));

package/colors.scss

@@ -1,48 +1,39 @@
 // basic
-$black: #000;
-$white: #fff;
-
-// brand
-$brand-blue: #1f84db;
-$brand-dark-blue: #002b41;
-$brand-deep-blue: #00599d;
-$brand-dirty: #80b4d2;
-$brand-sky: #e4f1f9;
-
-// gray
-$gray87: #212121;
-$gray76: #3a3a3b;
-$gray66: #545455;
-$gray54: #757575;
-$gray38: #9e9e9e;
-$gray24: #c2c2c2;
-$gray12: #e0e0e0;
-$gray8: #ebebeb;
-$gray4: #f5f5f5;
-$gray2: #fafafa;
+$basic-blue: #1f84db;
+$basic-gray87: #212121;
+$basic-gray76: #3a3a3b;
+$basic-gray66: #545455;
+$basic-gray54: #757575;
+$basic-gray38: #9e9e9e;
+$basic-gray24: #c2c2c2;
+$basic-gray12: #e0e0e0;
+$basic-gray8: #ebebeb;
+$basic-gray4: #f5f5f5;
+$basic-gray2: #fafafa;
+$basic-white: #fff;
 
 // additional
-$additional-amber: #ffab00;
-$additional-blue-gray: #607d8b;
-$additional-blue: #2962ff;
-$additional-brown: #795548;
-$additional-cyan: #00b8d4;
-$additional-deep-orange: #ff7200;
-$additional-deep-purple: #634bdf;
 $additional-deep-red: #d50000;
-$additional-faded-green: #eff9ea;
-$additional-fog: #e9f1f4;
-$additional-gold: #d5a43b;
-$additional-grass: #66cb2f;
+$additional-red: #fb3a2f;
+$additional-light-red: #feebea;
+$additional-teal: #09ab8b;
 $additional-green: #00c853;
-$additional-light-blue: #0091ea;
 $additional-light-green: #64dd17;
-$additional-light-red: #feebea;
 $additional-lime: #aeea00;
+$additional-faded-green: #eff9ea;
 $additional-pink: #e82e5c;
 $additional-purple: #b52ea8;
-$additional-red: #fb3a2f;
-$additional-sand: #f6f5ed;
-$additional-teal: #09ab8b;
 $additional-violet: #902bd0;
+$additional-deep-purple: #634bdf;
+$additional-electric-blue: #2962ff;
+$additional-light-blue: #0091ea;
+$additional-cyan: #00b8d4;
+$additional-sky: #e4f1f9;
+$additional-deep-orange: #ff7200;
+$additional-amber: #ffab00;
 $additional-yellow: #ffd600;
+$additional-gold: #d5a43b;
+$additional-brown: #795548;
+$additional-blue-gray: #607d8b;
+$additional-deep-blue: #00599d;
+$additional-dark-blue: #002b41;

package/dot-nav/dot-nav.module.scss

@@ -37,7 +37,7 @@
     top: 50%;
     left: 50%;
     border-radius: 50%;
-    background: colors.$gray12;
+    background: colors.$basic-gray12;
 
     // используем 10 чтобы проще считать коэффициенты масштабирования
     // ВАЖНО: не надо использовать здесь число больше чем размер родителя с overflow:hidden - моргает в Safari
@@ -49,6 +49,6 @@
     transition: transform 0.3s, background 0.3s;
   }
   &.active::after {
-    background: colors.$gray38;
+    background: colors.$basic-gray38;
   }
 }

package/dropdown-item/dropdown-item.module.scss

@@ -16,12 +16,12 @@ $sizes: (
   &:not(.disabled):not(.no-hover).checked,
   &:not(.disabled):not(.no-hover):hover {
     cursor: pointer;
-    background: colors.$gray4;
+    background: colors.$basic-gray4;
   }
 }
 
 .disabled {
-  color: colors.$gray24;
+  color: colors.$basic-gray24;
 }
 
 @each $key, $size in $sizes {

package/file-icon/index.js

@@ -19,8 +19,8 @@ const react_1 = __importDefault(require("react"));
 const colors_1 = require("../colors");
 const unknown_svg_1 = __importDefault(require("./unknown.svg"));
 const VARIANTS = {
-    doc: { fill: colors_1.COLORS.get('additional-blue') },
-    xls: { fill: colors_1.COLORS.get('additional-grass') },
+    doc: { fill: colors_1.COLORS.get('additional-electric-blue') },
+    xls: { fill: colors_1.COLORS.get('additional-light-green') },
     pdf: { fill: colors_1.COLORS.get('additional-deep-red') },
     jpg: { fill: colors_1.COLORS.get('additional-deep-orange') },
     xml: { fill: colors_1.COLORS.get('additional-deep-purple') },

package/helpers/find-child-element.d.ts

@@ -10,7 +10,7 @@
  * @return Родственный элемент.
  */
 declare const findChildElement: ({ target, startIndex, increment, defaultResult, isSuitable, needBreakLoop, }: {
-    target: HTMLElement;
+    target?: HTMLElement | null | undefined;
     startIndex?: number | undefined;
     increment?: number | undefined;
     defaultResult?: number | undefined;

package/hint/hint.module.scss

@@ -15,7 +15,7 @@
     height: 0;
     border-style: solid;
     border-width: 4px 4px 0;
-    border-color: colors.$gray76 transparent transparent transparent;
+    border-color: colors.$basic-gray76 transparent transparent transparent;
   }
   &.right::before {
     content: '';
@@ -24,7 +24,7 @@
     height: 0;
     border-style: solid;
     border-width: 4px 4px 4px 0;
-    border-color: transparent colors.$gray76 transparent transparent;
+    border-color: transparent colors.$basic-gray76 transparent transparent;
   }
   &.bottom::before {
     content: '';
@@ -33,7 +33,7 @@
     height: 0;
     border-style: solid;
     border-width: 0 4px 4px;
-    border-color: transparent transparent colors.$gray76 transparent;
+    border-color: transparent transparent colors.$basic-gray76 transparent;
   }
   &.left::after {
     content: '';
@@ -42,13 +42,13 @@
     height: 0;
     border-style: solid;
     border-width: 4px 0 4px 4px;
-    border-color: transparent transparent transparent colors.$gray76;
+    border-color: transparent transparent transparent colors.$basic-gray76;
   }
 }
 
 .body {
   align-items: center;
-  background: colors.$gray76;
+  background: colors.$basic-gray76;
   border-radius: 4px;
   color: #fff;
   display: flex;

package/hooks/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsomorphicLayoutEffect = exports.useOutsideClick = exports.useInfiniteScroll = exports.useIsTouchDevice = void 0;
 const react_1 = require("react");
 const is_touch_device_1 = require("../helpers/is-touch-device");
-const lodash_1 = require("lodash");
 const on_1 = __importDefault(require("../helpers/on"));
 const identity_1 = require("./identity");
 /**
@@ -51,16 +50,14 @@ exports.useInfiniteScroll = useInfiniteScroll;
  * @param callback Сработает при клике вне элемента.
  */
 const useOutsideClick = (elementRef, callback) => {
-    const callbackRef = (0, react_1.useRef)(callback);
-    callbackRef.current = callback;
-    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', (event) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', event => {
         const { current: element } = elementRef;
         const { current: handleClick } = callbackRef;
         element &&
             element !== event.target &&
             !element.contains(event.target) &&
-            (0, lodash_1.isFunction)(handleClick) &&
-            handleClick(event);
+            (handleClick === null || handleClick === void 0 ? void 0 : handleClick(event));
     }), []);
 };
 exports.useOutsideClick = useOutsideClick;

package/link/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Token } from '../colors';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Цвет (название токена). */
-    color?: Extract<Token, 'brand-blue' | 'gray87' | 'gray38'>;
+    color?: Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38'>;
     /** Нужно ли оборачивать содержимое комментариями no-index. */
     noIndex?: boolean;
     /** Выводить как псевдо-ссылку. */

package/link/index.js

@@ -43,7 +43,7 @@ const cx = bind_1.default.bind(link_module_scss_1.default);
  * Возвращает объект со свойствами, формирующими содержимое.
  * @param children Содержимое линка.
  * @param noIndex Флаг запрета индексации.
- * @return Объект со свойствами, формирующими содержимое..
+ * @return Объект со свойствами, формирующими содержимое.
  */
 const getContentProps = (children, noIndex) => noIndex ? { dangerouslySetInnerHTML: (0, get_no_index_1.getNoIndex)(children) } : { children };
 /**

package/link/link.module.scss

@@ -17,27 +17,27 @@
 
 // ниже двойные классы для высокой специфичности в монолите
 .link.disabled {
-  color: colors.$gray24;
+  color: colors.$basic-gray24;
   pointer-events: none;
 }
 
 .link:not(.disabled).brand-blue {
-  color: colors.$brand-blue;
+  color: colors.$basic-blue;
   &:hover {
-    color: colors.$brand-deep-blue;
+    color: colors.$additional-deep-blue;
   }
 }
 
 .link:not(.disabled).gray87 {
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &:hover {
-    color: colors.$gray54;
+    color: colors.$basic-gray54;
   }
 }
 
 .link:not(.disabled).gray38 {
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   &:hover {
-    color: colors.$gray54;
+    color: colors.$basic-gray54;
   }
 }

package/nav-bar/index.js

@@ -71,6 +71,6 @@ exports.NavBar = NavBar;
  */
 const NavButton = (_a) => {
     var { text, icon: Icon, stub = false, shift, className } = _a, buttonProps = __rest(_a, ["text", "icon", "stub", "shift", "className"]);
-    return (react_1.default.createElement("button", Object.assign({}, (!stub && buttonProps), { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
+    return (react_1.default.createElement("button", Object.assign({}, (!stub && buttonProps), { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('basic-gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
 };
 exports.NavButton = NavButton;

package/nav-bar/nav-bar.module.scss

@@ -21,14 +21,14 @@
 }
 
 .title {
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
 }
 
 .subtitle {
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   font-size: 12px;
   line-height: 16px;
   margin-top: -4px;
@@ -60,7 +60,7 @@
   background: transparent;
   border: 0;
   box-sizing: border-box;
-  color: colors.$brand-blue;
+  color: colors.$basic-blue;
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "42.0.0",
+  "version": "43.0.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -59,6 +59,7 @@
     "enzyme-to-json": "^3.6.2",
     "eslint": "^7.31.0",
     "file-loader": "^6.2.0",
+    "handlebars": "^4.7.7",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
     "jest-css-modules-transform": "^4.3.0",
@@ -83,6 +84,7 @@
   },
   "scripts": {
     "prepare": "",
+    "export:colors": "node .template/build.mjs",
     "build:before": "rimraf build",
     "build:main": "tsc --project tsconfig.build.json",
     "build:after": "node dist.js",

package/pagination/pagination.module.scss

@@ -23,7 +23,7 @@
   width: 38px;
   height: 38px;
   background: #fff;
-  border: 1px solid colors.$gray12;
+  border: 1px solid colors.$basic-gray12;
   font-size: 14px;
   outline: 0;
   box-sizing: border-box;
@@ -43,7 +43,7 @@
     }
   }
   &:disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
   &:not(.rounds-all) {
     margin-right: -1px;
@@ -54,8 +54,8 @@
   }
   &.selected {
     position: relative;
-    background: colors.$gray87;
-    border-color: colors.$gray87;
+    background: colors.$basic-gray87;
+    border-color: colors.$basic-gray87;
     color: #fff;
     cursor: default;
     &::after {

package/panel/index.js

@@ -15,7 +15,7 @@ const cx = bind_1.default.bind(panel_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Panel = ({ color: panelColor = 'gray4', contentColor = 'gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
+const Panel = ({ color: panelColor = 'basic-gray4', contentColor = 'basic-gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
     const contentProps = html ? { dangerouslySetInnerHTML: { __html: html } } : { children };
     return (react_1.default.createElement("div", { className: cx('panel', inline && 'inline', (0, colors_1.bgColor)(panelColor), className), "data-testid": testId },
         Icon && (react_1.default.createElement(Icon, { fill: colors_2.COLORS.get(contentColor), width: 16, height: 20, className: cx('icon'), "aria-hidden": 'true' })),

package/phone-input/index.d.ts

@@ -5,7 +5,7 @@ import { Country } from './presets';
 interface PhoneInputStyle extends React.CSSProperties {
     '--phone-input-width'?: number | string;
 }
-export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style'> {
+export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style' | 'multiline'> {
     /** Сработает при "blur". */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState & {
         ready?: boolean;

package/phone-input/index.js

@@ -35,7 +35,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInput = void 0;
 const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
 const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
 const dropdown_1 = require("../dropdown");
@@ -44,10 +43,9 @@ const text_field_1 = require("../text-field");
 const masked_field_1 = require("../masked-field");
 const hooks_1 = require("../hooks");
 const presets_1 = require("./presets");
-const sizes_1 = require("../styling/sizes");
-const colors_1 = require("../colors");
-const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
 const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
 const cx = bind_1.default.bind(phone_input_module_scss_1.default);
 /**
  * Удаляет из значения код переданной страны.
@@ -66,23 +64,32 @@ const PhoneInput = (_a) => {
     // маску определяем автоматически только при старте
     const [country, setCountry] = (0, react_1.useState)((0, utils_1.defineCountry)(value));
     const [cleanValue, setCleanValue] = (0, react_1.useState)(formatValue(value, country));
-    const [isPopupOpen, togglePopup] = (0, react_1.useState)(false);
-    const dropdownRef = (0, react_1.useRef)(null);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setCleanValue(formatValue(value, country));
     }, [value]);
-    (0, hooks_1.useOutsideClick)(dropdownRef, event => {
-        event.stopPropagation();
-        togglePopup(false);
+    (0, hooks_1.useOutsideClick)(rootRef, () => {
+        toggleMenu(false);
     });
-    const AdornmentSVG = isPopupOpen ? up_1.default : down_1.default;
-    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: event => {
-                event.stopPropagation();
-                togglePopup(true);
+    const AdornmentSVG = withMenu ? up_1.default : down_1.default;
+    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
+                toggleMenu(a => !a);
             } },
             react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
-            react_1.default.createElement(AdornmentSVG, { fill: colors_1.COLORS.get('gray38'), className: (0, sizes_1.marginLeft)(1) }))) });
-    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', className) },
+            react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {
+            const opener = openerRef.current;
+            if (opener instanceof Node &&
+                event.target instanceof Node &&
+                (opener === event.target || opener.contains(event.target))) {
+                event.preventDefault(); // чтобы не фокусировалось на поле
+            }
+            else {
+                toggleMenu(false);
+            }
+        } });
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) },
         country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { onChange: (e) => {
                 e.target.value = e.target.value.replace(/\D/g, '').slice(0, 20);
                 onChange && onChange(e);
@@ -101,8 +108,8 @@ const PhoneInput = (_a) => {
                         // вставляем код страны обратно в чистое значение
                         cleanValue: `${country.codeChars}${state.cleanValue}` }));
             } }))),
-        isPopupOpen && (react_1.default.createElement(dropdown_1.Dropdown, { ref: dropdownRef, role: 'menu', className: cx('popup'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('popup-item'), onClick: () => {
-                togglePopup(false);
+        withMenu && (react_1.default.createElement(dropdown_1.Dropdown, { role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('menu-item'), onClick: () => {
+                toggleMenu(false);
                 setCountry(item);
                 onCountrySelect && onCountrySelect(item);
             } },

package/phone-input/phone-input.module.scss

@@ -17,7 +17,14 @@
   cursor: pointer;
 }
 
-.popup {
+.arrow {
+  display: block;
+  fill: colors.$basic-gray38;
+  margin-left: 4px;
+  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
+}
+
+.menu {
   position: absolute;
   width: 100%;
   top: 56px;
@@ -25,15 +32,15 @@
   z-index: 2;
 }
 
-.popup-item {
+.menu-item {
   font-size: 16px;
   line-height: 24px;
   .item-name {
-    color: colors.$gray87;
+    color: colors.$basic-gray87;
     flex-grow: 1;
     margin-left: 16px;
   }
   .item-code {
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
   }
 }