@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

package/modal-overlay/modal-overlay.module.scss

@@ -0,0 +1,14 @@
+@use '../utils';
+@use './modal-overlay-util';
+
+.root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100vw;
+  height: calc(var(--vh, 1vh) * 100);
+  background: modal-overlay-util.$overlay-color;
+  overflow: auto;
+  @include utils.hidden-scrollbars;
+}

package/modal-overlay/utils.d.ts

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+/**
+ * Вызывает callback только если клик был начат и закончен на одном и том же элементе.
+ * @param onExactClick Сработает при клике.
+ * @param options Опции.
+ * @return Свойства для целевого элемента.
+ */
+export declare function useExactClick(onExactClick: VoidFunction | undefined, { onMouseDown, onMouseUp, }?: {
+    onMouseDown?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
+}): {
+    onMouseUp: MouseEventHandler<Element>;
+    onMouseDown: MouseEventHandler<Element>;
+};

package/modal-overlay/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExactClick = void 0;
+const react_1 = require("react");
+const identity_1 = require("../hooks/identity");
+/**
+ * Вызывает callback только если клик был начат и закончен на одном и том же элементе.
+ * @param onExactClick Сработает при клике.
+ * @param options Опции.
+ * @return Свойства для целевого элемента.
+ */
+function useExactClick(onExactClick, { onMouseDown, onMouseUp, } = {}) {
+    const callbackRef = (0, identity_1.useIdentityRef)(onExactClick);
+    const mouseDownTarget = (0, react_1.useRef)(null);
+    const handleMouseDown = (0, react_1.useCallback)(event => {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        if (event.button === 0) {
+            mouseDownTarget.current = event.target;
+        }
+    }, []);
+    const handleMouseUp = (0, react_1.useCallback)(event => {
+        const fn = callbackRef.current;
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+        fn &&
+            event.button === 0 &&
+            event.target === event.currentTarget &&
+            event.currentTarget === mouseDownTarget.current &&
+            fn();
+    }, []);
+    return { onMouseUp: handleMouseUp, onMouseDown: handleMouseDown };
+}
+exports.useExactClick = useExactClick;

package/package.json

@@ -1,68 +1,92 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "44.2.9",
+  "version": "45.0.0-alpha.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
   "private": false,
   "engines": {
-    "node": ">=14.15.5"
+    "node": ">=16.15.1"
+  },
+  "scripts": {
+    "export:colors": "node .template/build.mjs",
+    "build:before": "rimraf build",
+    "build:main": "tsc --project tsconfig.build.json",
+    "build:after": "node dist.mjs",
+    "build": "npm run build:before && npm run build:main && npm run build:after",
+    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
+    "coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
+    "type-check": "tsc -p . --noEmit",
+    "lint": "npm run lint:scripts && npm run lint:styles",
+    "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
+    "lint:styles": "stylelint 'src/**/*.{css,scss}'",
+    "storybook": "BROWSERSLIST_ENV=\"storybook\" npx start-storybook -p 9009 -c .storybook",
+    "storybook:build": "BROWSERSLIST_ENV=\"storybook\" npx build-storybook --quiet --loglevel error -o build-storybook",
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\"",
+    "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\""
   },
   "dependencies": {
-    "@krutoo/input-mask": "^0.0.8",
-    "@sima-land/ui-quarks": "^3.0.0",
+    "@floating-ui/react": "^0.17.0",
+    "@krutoo/input-mask": "^0.0.9",
+    "@sima-land/ui-quarks": "^3.6.0",
     "body-scroll-lock": "3.1.5",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
-    "intersection-observer": "^0.12.0",
+    "focus-trap": "^7.2.0",
     "lodash": "^4.17.21",
-    "overlayscrollbars": "^1.13.1",
-    "overlayscrollbars-react": "^0.2.3",
-    "react-transition-group": "^4.4.2"
+    "overlayscrollbars": "^1.13.3",
+    "overlayscrollbars-react": "^0.3.0",
+    "react-transition-group": "^4.4.2",
+    "redux": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@playwright/test": "^1.27.1",
     "@rushstack/eslint-patch": "^1.1.1",
     "@sima-land/linters": "^2.1.2",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-backgrounds": "^6.4.19",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-backgrounds": "^6.5.14",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-storysource": "^6.5.14",
+    "@storybook/addons": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/react": "^6.5.14",
+    "@storybook/theming": "^6.5.14",
     "@svgr/core": "^6.2.1",
     "@svgr/plugin-jsx": "^6.2.1",
     "@svgr/plugin-svgo": "^6.2.0",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^14.4.3",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/enzyme": "^3.10.11",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.180",
+    "@types/overlayscrollbars": "^1.12.1",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-transition-group": "^4.4.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.3",
-    "babel-preset-jest": "^27.5.1",
+    "clipboard": "^2.0.11",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "enzyme": "^3.9.0",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.11.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "file-loader": "^6.2.0",
     "handlebars": "^4.7.7",
     "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "jest-css-modules-transform": "^4.3.0",
+    "jest": "^29.3.1",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.3.5",
+    "lorem-ipsum": "^2.0.8",
     "postcss": "^8.4.11",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
@@ -73,29 +97,13 @@
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
     "stylelint": "^14.5.3",
-    "typescript": "^4.6.2",
-    "typescript-plugin-css-modules": "^3.4.0",
-    "webpack": "^5.70.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "typescript-plugin-css-modules": "^4.1.1",
+    "webpack": "^5.75.0"
   },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"
-  },
-  "scripts": {
-    "prepare": "",
-    "export:colors": "node .template/build.mjs",
-    "build:before": "rimraf build",
-    "build:main": "tsc --project tsconfig.build.json",
-    "build:after": "node dist.js",
-    "build": "npm run build:before && npm run build:main && npm run build:after",
-    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
-    "coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
-    "type-check": "tsc -p . --noEmit",
-    "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
-    "lint:styles": "stylelint 'src/**/*.{css,scss}'",
-    "storybook": "BROWSERSLIST_ENV=\"storybook\" npx start-storybook -p 9009 -c .storybook",
-    "storybook:build": "BROWSERSLIST_ENV=\"storybook\" npx build-storybook --quiet --loglevel error -o build-storybook",
-    "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error",
-    "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error"
   }
 }

package/pagination/utils.d.ts

@@ -2,12 +2,12 @@ interface IPageButton {
     value: number;
     content: string | number;
 }
-declare type State = {
+type State = {
     current: number;
     range: number;
     total: number;
 };
-export declare const cx: (...args: import("classnames").Argument[]) => string;
+export declare const cx: (...args: import("classnames").ArgumentArray) => string;
 /**
  * Фабрика объектов с данными о кнопке страницы.
  * @param value Номер целевой страницы.

package/panel/index.d.ts

@@ -1,24 +1,38 @@
-import React from 'react';
-import { Token } from '../colors';
+import { CSSProperties, ReactNode } from 'react';
+import type { LinkProps } from '../link';
+export type PanelType = 'info' | 'error' | 'success' | 'warning';
 export interface PanelProps {
-    /** Наименование цвета панели. */
-    color?: Token;
-    /** Наименование цвета содержимого. */
-    contentColor?: Token;
-    /** Нужно ли стилизовать как inline-элемент. */
-    inline?: boolean;
-    /** Компонент иконки. */
-    icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
+    /** Тип панели. Влияет на отображение. */
+    type?: PanelType;
+    /** Иконка перед основным контентом. */
+    adornmentStart?: ReactNode;
+    /** Иконка после основного контента. */
+    adornmentEnd?: ReactNode;
     /** CSS-класс корневого элемента. */
     className?: string;
-    /** Содержимое в виде строки с html-версткой. */
-    html?: string;
+    /** Стили корневого элемента панели. */
+    style?: CSSProperties;
+    /** Содержимое. */
+    children?: ReactNode;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
+export declare const LINK_COLOR_BY_TYPE: Record<PanelType, LinkProps['color']>;
 /**
  * Компонент панели с информацией.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Panel: React.FC<PanelProps>;
+export declare function Panel({ type, adornmentStart, adornmentEnd, className, style, children, 'data-testid': testId, }: PanelProps): JSX.Element;
+export declare namespace Panel {
+    var UnknownContent: typeof PanelUnknownContent;
+}
+/**
+ * Компонент для вывода неизвестной html-верстки, стилизованной по гайдам Panel.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function PanelUnknownContent({ markup }: {
+    markup: string;
+}): JSX.Element;
+export {};

package/panel/index.js

@@ -3,22 +3,56 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panel = void 0;
+exports.Panel = exports.LINK_COLOR_BY_TYPE = void 0;
 const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const colors_1 = require("../styling/colors");
-const colors_2 = require("../colors");
+const bind_1 = __importDefault(require("classnames/bind"));
 const panel_module_scss_1 = __importDefault(require("./panel.module.scss"));
 const cx = bind_1.default.bind(panel_module_scss_1.default);
+const PANEL_COLORS_BY_TYPE = {
+    info: {
+        textColor: 'basic-gray87',
+        panelColor: 'basic-gray4',
+    },
+    error: {
+        textColor: 'basic-white',
+        panelColor: 'additional-deep-red',
+    },
+    success: {
+        textColor: 'basic-white',
+        panelColor: 'additional-teal',
+    },
+    warning: {
+        textColor: 'basic-gray87',
+        panelColor: 'additional-yellow',
+    },
+};
+exports.LINK_COLOR_BY_TYPE = {
+    info: 'basic-blue',
+    error: 'basic-white',
+    success: 'basic-white',
+    warning: 'basic-gray87',
+};
 /**
  * Компонент панели с информацией.
  * @param props Свойства.
  * @return Элемент.
  */
-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' })),
-        react_1.default.createElement("div", Object.assign({}, contentProps, { className: cx('content', (0, colors_1.color)(contentColor)) }))));
-};
+function Panel({ type = 'info', adornmentStart, adornmentEnd, className, style, children, 'data-testid': testId = 'panel', }) {
+    const textColor = PANEL_COLORS_BY_TYPE[type].textColor;
+    const panelColor = PANEL_COLORS_BY_TYPE[type].panelColor;
+    return (react_1.default.createElement("div", { className: cx('root', `type-${type}`, (0, colors_1.bgColor)(panelColor), (0, colors_1.color)(textColor), className), "data-testid": testId, style: style },
+        adornmentStart && react_1.default.createElement("div", { className: cx('adornment') }, adornmentStart),
+        react_1.default.createElement("div", { className: cx('main') }, children),
+        adornmentEnd && react_1.default.createElement("div", { className: cx('adornment') }, adornmentEnd)));
+}
 exports.Panel = Panel;
+/**
+ * Компонент для вывода неизвестной html-верстки, стилизованной по гайдам Panel.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PanelUnknownContent({ markup }) {
+    return react_1.default.createElement("div", { className: cx('unknown-content'), dangerouslySetInnerHTML: { __html: markup } });
+}
+Panel.UnknownContent = PanelUnknownContent;

package/panel/panel.module.scss

@@ -1,29 +1,70 @@
-.panel {
+@use '../colors';
+
+.root {
   display: flex;
+  align-items: flex-start;
   padding: 16px;
   font-size: 14px;
   line-height: 20px;
   border-radius: 4px;
   overflow: hidden;
   box-sizing: border-box;
-  &.inline {
-    display: inline-flex;
+  &.type-info .unknown-content {
+    a {
+      color: colors.$basic-blue;
+      text-decoration: underline;
+      &:hover {
+        color: colors.$additional-deep-blue;
+      }
+    }
+  }
+  &.type-error .unknown-content {
+    a {
+      color: colors.$basic-white;
+      text-decoration: underline;
+      &:hover {
+        color: colors.$basic-gray4;
+      }
+    }
+  }
+  &.type-success .unknown-content {
+    a {
+      color: colors.$basic-white;
+      text-decoration: underline;
+      &:hover {
+        color: colors.$basic-gray4;
+      }
+    }
+  }
+  &.type-warning .unknown-content {
+    a {
+      color: colors.$basic-gray87;
+      text-decoration: underline;
+      &:hover {
+        color: colors.$basic-gray54;
+      }
+    }
   }
 }
 
-.icon {
+.adornment {
   flex-grow: 0;
   flex-shrink: 0;
+  svg {
+    display: inline-block;
+    fill: currentColor; // чтобы иконка подхватывала цвет текста панели
+    vertical-align: -3px; // чтобы иконка выравнивалась по линии первой строки текста
+  }
 }
 
-.content {
+.main {
   flex-grow: 1;
 }
 
-.icon + .content {
+.adornment + .main {
   margin-left: 16px;
 }
 
-.rotate-180 {
-  transform: rotate(180deg);
+.main + .adornment {
+  margin-left: 16px;
 }

package/phone-input/index.d.ts

@@ -1,28 +1,4 @@
-import React from 'react';
-import { TextFieldProps } from '../text-field';
-import { MaskState } from '../masked-field';
-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' | 'multiline'> {
-    /** Сработает при "blur". */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState & {
-        ready?: boolean;
-    }) => void;
-    /** Сработает при изменении поля. Не рекомендуется использовать. */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /** Срабатывает при изменении страны. */
-    onCountrySelect?: (c: Country) => void;
-    /** Значение. */
-    value?: string;
-    /** Стили. */
-    style?: PhoneInputStyle;
-}
-/**
- * Компонент поля ввода номера телефона.
- * @param props Параметры компонента.
- * @return Элемент.
- */
-export declare const PhoneInput: ({ "data-testid": testId, className, label, onBlur, onCountrySelect, style, value, onChange, ...restProps }: PhoneInputProps) => JSX.Element;
-export {};
+import { PhoneInputProps } from './types';
+import { PhoneInput } from './phone-input';
+export type { PhoneInputProps };
+export { PhoneInput };

package/phone-input/index.js

@@ -1,124 +1,5 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInput = void 0;
-const react_1 = __importStar(require("react"));
-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");
-const dropdown_item_1 = require("../dropdown-item");
-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 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);
-/**
- * Удаляет из значения код переданной страны.
- * @param value Значение.
- * @param country Данные страны.
- * @return Значение без кода.
- */
-const formatValue = (value, country) => value.replace(/\D/g, '').slice(country.codeChars.length);
-/**
- * Компонент поля ввода номера телефона.
- * @param props Параметры компонента.
- * @return Элемент.
- */
-const PhoneInput = (_a) => {
-    var { 'data-testid': testId, className, label = 'Телефон', onBlur, onCountrySelect, style, value = '', onChange } = _a, restProps = __rest(_a, ['data-testid', "className", "label", "onBlur", "onCountrySelect", "style", "value", "onChange"]);
-    // маску определяем автоматически только при старте
-    const [country, setCountry] = (0, react_1.useState)((0, utils_1.defineCountry)(value));
-    const [cleanValue, setCleanValue] = (0, react_1.useState)(formatValue(value, country));
-    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)(rootRef, () => {
-        toggleMenu(false);
-    });
-    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, { 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);
-            }, onBlur: e => {
-                onBlur &&
-                    onBlur(e, {
-                        value: e.target.value,
-                        cleanValue: e.target.value,
-                        ready: e.target.value.length > 0,
-                    });
-            } }))) : (react_1.default.createElement(masked_field_1.MaskedField, Object.assign({}, commonFieldProps, { 
-            // убираем код страны, так как он уже зашит в маску
-            value: cleanValue, mask: country.mask, onBlur: (event, state) => {
-                onBlur &&
-                    onBlur(event, Object.assign(Object.assign({}, state), { 
-                        // вставляем код страны обратно в чистое значение
-                        cleanValue: `${country.codeChars}${state.cleanValue}` }));
-            } }))),
-        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);
-            } },
-            react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc }),
-            react_1.default.createElement("span", { className: cx('item-name') }, item.name),
-            react_1.default.createElement("span", { className: cx('item-code') }, item.code))))))));
-};
-exports.PhoneInput = PhoneInput;
+const phone_input_1 = require("./phone-input");
+Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return phone_input_1.PhoneInput; } });

package/phone-input/phone-input.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PhoneInputProps } from './types';
+/**
+ * Поле ввода номера телефона.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PhoneInput({ value, defaultValue, label, inputRef: inputRefProp, blockRef: blockRefProp, onBlur, onChange, onFocus, onCountrySelect, 'data-testid': testId, ...props }: PhoneInputProps): JSX.Element;