@sima-land/ui-nucleons 40.1.0 → 40.3.0

package/field-grid/index.d.ts

@@ -33,7 +33,7 @@ export interface FieldGridComponent extends React.FC<FieldGridProps> {
  * @param props Свойства.
  * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Row.
  * @param props.rootProps Свойства корневого элемента.
- * @return Компонент сетки полей.
+ * @return Элемент.
  */
 export declare const FieldGrid: FieldGridComponent;
 /**
@@ -52,7 +52,7 @@ declare const Row: React.FC<RowProps>;
  * @param props.rounds Скругления для поля (будет задан автоматически).
  * @param props.field Поле.
  * @param props.renderField Должна вернуть поле получив свойства для него.
- * @return Компонент ряда для сетки полей.
+ * @return Элемент.
  */
 declare const Cell: React.FC<CellProps>;
 export {};

package/field-grid/index.js

@@ -41,7 +41,7 @@ const TypeCheck = {
  * @param props Свойства.
  * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Row.
  * @param props.rootProps Свойства корневого элемента.
- * @return Компонент сетки полей.
+ * @return Элемент.
  */
 const FieldGrid = ({ children, rootProps }) => {
     const rows = react_1.Children.toArray(children).filter(TypeCheck.isRow);
@@ -111,7 +111,7 @@ const Row = ({ isFirst: isFirstRow, isLast: isLastRow, children }) => {
  * @param props.rounds Скругления для поля (будет задан автоматически).
  * @param props.field Поле.
  * @param props.renderField Должна вернуть поле получив свойства для него.
- * @return Компонент ряда для сетки полей.
+ * @return Элемент.
  */
 const Cell = ({ size, rounds, field, renderField }) => {
     var _a;
@@ -127,7 +127,7 @@ const Cell = ({ size, rounds, field, renderField }) => {
             className: cx(field.props.className, 'size-full'),
         });
     }
-    return (react_1.default.createElement("div", { className: cx('cell', `size-${size}`) }, content));
+    return react_1.default.createElement("div", { className: cx('cell', `size-${size}`) }, content);
 };
 exports.FieldGrid.Row = Row;
 exports.FieldGrid.Cell = Cell;

package/file-icon/index.js

@@ -34,11 +34,10 @@ const VARIANTS = {
 const FileIcon = (_a) => {
     var { type } = _a, svgProps = __rest(_a, ["type"]);
     const typeProps = VARIANTS[type];
-    return type && typeProps
-        ? (react_1.default.createElement("svg", Object.assign({ width: '32', height: '32', viewBox: '0 0 32 32' }, svgProps),
-            react_1.default.createElement("path", { opacity: '0.88', d: 'M6 5C6 3.89543 6.89543 3 8 3H20L26 9V27C26 28.1046 25.1046 29 24 29H8C6.89543 29 6 28.1046 6 27V5Z', fill: typeProps.fill }),
-            react_1.default.createElement("path", { opacity: '0.32', d: 'M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z', fill: 'white' }),
-            react_1.default.createElement("path", { opacity: '0.24', d: 'M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z', fill: 'black' }),
-            react_1.default.createElement("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff' }, type.toUpperCase()))) : (react_1.default.createElement(unknown_svg_1.default, Object.assign({}, svgProps)));
+    return type && typeProps ? (react_1.default.createElement("svg", Object.assign({ width: '32', height: '32', viewBox: '0 0 32 32' }, svgProps),
+        react_1.default.createElement("path", { opacity: '0.88', d: 'M6 5C6 3.89543 6.89543 3 8 3H20L26 9V27C26 28.1046 25.1046 29 24 29H8C6.89543 29 6 28.1046 6 27V5Z', fill: typeProps.fill }),
+        react_1.default.createElement("path", { opacity: '0.32', d: 'M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z', fill: 'white' }),
+        react_1.default.createElement("path", { opacity: '0.24', d: 'M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z', fill: 'black' }),
+        react_1.default.createElement("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff' }, type.toUpperCase()))) : (react_1.default.createElement(unknown_svg_1.default, Object.assign({}, svgProps)));
 };
 exports.FileIcon = FileIcon;

package/helpers/bounds-of.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @return Ограничивающий прямоугольник.
  */
 function boundsOf(element) {
-    return (element instanceof Element
-        ? element.getBoundingClientRect()
-        : null);
+    return (element instanceof Element ? element.getBoundingClientRect() : null);
 }
 exports.default = boundsOf;

package/helpers/find-child-element.js

@@ -14,9 +14,7 @@ const lodash_1 = require("lodash");
  */
 const findChildElement = ({ target, startIndex = 0, increment = 1, defaultResult = -1, isSuitable, needBreakLoop = lodash_1.identity, }) => {
     let result = defaultResult;
-    if (target
-        && target.children
-        && isSuitable !== undefined) {
+    if (target && target.children && isSuitable !== undefined) {
         const { children } = target;
         for (let i = startIndex; i >= 0 && i < children.length; i += increment) {
             const sibling = children[i];

package/helpers/find-offset-parent.js

@@ -9,9 +9,10 @@ exports.findOffsetParent = void 0;
 const findOffsetParent = (element) => {
     let parent = element.offsetParent || document.body;
     if (getComputedStyle(parent).position === 'static') {
-        parent = getComputedStyle(document.documentElement).position === 'static'
-            ? null
-            : document.documentElement;
+        parent =
+            getComputedStyle(document.documentElement).position === 'static'
+                ? null
+                : document.documentElement;
     }
     return parent;
 };

package/helpers/fit-element-height.js

@@ -9,7 +9,7 @@ exports.fitElementHeight = void 0;
 const fitElementHeight = ({ target }) => {
     target.style.height = 'auto';
     // актуальные значения после установки "auto" (в начало функции не переносить)
-    const { scrollHeight, offsetHeight, clientHeight, } = target;
+    const { scrollHeight, offsetHeight, clientHeight } = target;
     target.style.height = `${scrollHeight + offsetHeight - clientHeight}px`;
 };
 exports.fitElementHeight = fitElementHeight;

package/helpers/format-date.js

@@ -21,7 +21,9 @@ const createDateFormatter = ({ formatFrom = ['yyyy-MM-dd', 'dd.MM.yyyy'], format
     const date = (0, exports.parseMultiple)(dateString, formatFrom, new Date());
     let result = invalidPlaceholder;
     if ((0, isValid_1.default)(date)) {
-        result = (0, format_1.default)(date, (0, lodash_1.isFunction)(formatTo) ? formatTo(new Date(date.getTime())) : formatTo, { locale: ru_1.default });
+        result = (0, format_1.default)(date, (0, lodash_1.isFunction)(formatTo) ? formatTo(new Date(date.getTime())) : formatTo, {
+            locale: ru_1.default,
+        });
     }
     return result;
 };

package/helpers/get-fraction-depth.js

@@ -8,8 +8,6 @@ exports.getFractionDepth = void 0;
  */
 const getFractionDepth = (fraction = null) => {
     const fractionString = Number(fraction).toString();
-    return fractionString.includes('.')
-        ? fractionString.length - fractionString.indexOf('.') - 1
-        : 0;
+    return fractionString.includes('.') ? fractionString.length - fractionString.indexOf('.') - 1 : 0;
 };
 exports.getFractionDepth = getFractionDepth;

package/hooks/identity.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 /**
  * Реф с актуальным переданным значением.
+ * Нужен, когда в ref-значение нужно обновлять значение при каждом рендере.
  * @param value Значение.
  * @return Реф.
  */

package/hooks/identity.js

@@ -4,6 +4,7 @@ exports.useIdentityRef = void 0;
 const react_1 = require("react");
 /**
  * Реф с актуальным переданным значением.
+ * Нужен, когда в ref-значение нужно обновлять значение при каждом рендере.
  * @param value Значение.
  * @return Реф.
  */

package/layout/index.js

@@ -42,7 +42,7 @@ const cx = bind_1.default.bind(layout_module_scss_1.default);
  * Возвращает созданный функциональный компонент, формирующий Layout.
  * @param specificClass Специальный класс.
  * @param displayName Отображаемое имя компонента.
- * @return Компонент.
+ * @return Элемент.
  */
 const createLayout = (specificClass, displayName) => {
     const Component = (0, react_1.forwardRef)((_a, ref) => {

package/link/index.js

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

package/loading-overlay/index.d.ts

@@ -15,4 +15,4 @@ export interface LoadingOverlayProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const LoadingOverlay: ({ style, className, spinnerProps, fill }: LoadingOverlayProps) => JSX.Element;
+export declare const LoadingOverlay: ({ style, className, spinnerProps, fill, }: LoadingOverlayProps) => JSX.Element;

package/loading-overlay/index.js

@@ -14,6 +14,6 @@ const cx = bind_1.default.bind(loading_overlay_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const LoadingOverlay = ({ style, className, spinnerProps = {}, fill = true }) => (react_1.default.createElement("div", { className: cx('loading-overlay', fill && 'fill', className), style: style },
+const LoadingOverlay = ({ style, className, spinnerProps = {}, fill = true, }) => (react_1.default.createElement("div", { className: cx('loading-overlay', fill && 'fill', className), style: style },
     react_1.default.createElement(spinner_1.Spinner, Object.assign({}, spinnerProps))));
 exports.LoadingOverlay = LoadingOverlay;

package/nav-bar/index.d.ts

@@ -4,6 +4,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
     stub?: boolean;
     shift?: 'left' | 'right';
+    'data-testid'?: string;
 }
 export interface NavBarProps {
     /** Заголовок. */

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({}, 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('gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
 };
 exports.NavButton = NavButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "40.1.0",
+  "version": "40.3.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -28,19 +28,20 @@
     "@babel/preset-react": "^7.12.10",
     "@rushstack/eslint-patch": "^1.0.6",
     "@sima-land/linters": "^2.1.0",
-    "@storybook/addon-actions": "^6.3.5",
-    "@storybook/addon-backgrounds": "^6.3.5",
-    "@storybook/addon-docs": "^6.3.5",
-    "@storybook/addon-storysource": "^6.3.5",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/react": "^6.3.5",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-backgrounds": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-storysource": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@storybook/theming": "^6.3.12",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/react": "^12.0.0",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.168",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
@@ -49,7 +50,7 @@
     "@typescript-eslint/parser": "^4.15.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-loader": "^8.0.5",
-    "babel-preset-jest": "^26.6.2",
+    "babel-preset-jest": "^27.2.0",
     "classnames": "^2.2.6",
     "copyfiles": "^2.4.1",
     "css-loader": "^5.0.1",
@@ -61,19 +62,19 @@
     "file-loader": "^6.2.0",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "jest-css-modules-transform": "^4.2.0",
+    "jest": "^27.3.1",
+    "jest-css-modules-transform": "^4.3.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
-    "react-docgen-typescript": "^1.21.0",
+    "react-docgen-typescript": "^2.1.1",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.8.0",
-    "ts-jest": "^26.5.2",
+    "ts-jest": "^27.0.7",
     "typescript": "^4.4.3",
     "typescript-plugin-css-modules": "^3.2.0",
     "webpack": "^5.11.0"
@@ -94,6 +95,8 @@
     "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
     "lint:styles": "stylelint 'src/**/*.{css,scss}'",
     "storybook": "start-storybook -p 9009 -c .storybook",
-    "storybook:build": "build-storybook --no-dll --quiet --loglevel error -o build-storybook"
+    "storybook:build": "build-storybook --no-dll --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/base-pagination.js

@@ -62,34 +62,32 @@ const BasePagination = ({ total, current, onButtonClick, isButtonSelected = (0,
         buttonKeys: exports.BUTTON_TYPES,
     });
     return (react_1.default.createElement("div", { className: (0, utils_1.cx)('base-pagination-wrapper') },
-        needPrevButton({ current, total }) && renderButton({
-            'aria-label': 'Назад',
-            type: exports.BUTTON_TYPES.prev,
-            children: exports.BUTTON_CONTENTS.prev,
-            onClick: () => onButtonClick && onButtonClick(current - 1),
-            page: current - 1,
-        }),
+        needPrevButton({ current, total }) &&
+            renderButton({
+                'aria-label': 'Назад',
+                type: exports.BUTTON_TYPES.prev,
+                children: exports.BUTTON_CONTENTS.prev,
+                onClick: () => onButtonClick && onButtonClick(current - 1),
+                page: current - 1,
+            }),
         pageButtons.map(({ content, value }, index) => renderButton({
-            type: content === exports.BUTTON_TYPES.more
-                ? exports.BUTTON_TYPES.more
-                : undefined,
+            type: content === exports.BUTTON_TYPES.more ? exports.BUTTON_TYPES.more : undefined,
             isFirst: index === 0,
             isLast: index === pageButtons.length - 1,
-            children: (0, lodash_1.has)(exports.BUTTON_CONTENTS, content)
-                ? exports.BUTTON_CONTENTS[content]
-                : content,
+            children: (0, lodash_1.has)(exports.BUTTON_CONTENTS, content) ? exports.BUTTON_CONTENTS[content] : content,
             selected: isButtonSelected(content),
             'aria-label': `Перейти на страницу ${value}`,
             onClick: () => onButtonClick && onButtonClick(value),
             page: value,
         }, index)),
-        needNextButton({ current, total }) && renderButton({
-            'aria-label': 'Вперед',
-            type: exports.BUTTON_TYPES.next,
-            children: exports.BUTTON_CONTENTS.next,
-            onClick: () => onButtonClick && onButtonClick(current + 1),
-            page: current + 1,
-        })));
+        needNextButton({ current, total }) &&
+            renderButton({
+                'aria-label': 'Вперед',
+                type: exports.BUTTON_TYPES.next,
+                children: exports.BUTTON_CONTENTS.next,
+                onClick: () => onButtonClick && onButtonClick(current + 1),
+                page: current + 1,
+            })));
 };
 exports.BasePagination = BasePagination;
 const resolveRounded = (0, fp_1.cond)([

package/pagination/index.js

@@ -12,8 +12,6 @@ const base_pagination_1 = require("./base-pagination");
  * @return Элемент.
  */
 const Pagination = ({ total, current, onChange, renderButton, }) => (react_1.default.createElement(base_pagination_1.BasePagination, { total: total, current: current, renderButton: renderButton, onButtonClick: content => {
-        Number.isFinite(content)
-            && onChange
-            && onChange({ value: content });
+        Number.isFinite(content) && onChange && onChange({ value: content });
     } }));
 exports.Pagination = Pagination;

package/pagination/utils.d.ts

@@ -41,7 +41,7 @@ export declare const getPageButtons: ({ current, total, buttonKeys, }: {
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total, }: State) => number[];
+export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
 /**
  * Возвращает список чисел вокруг заданного.
  * @param props Свойства.
@@ -50,5 +50,5 @@ export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getRangeNumbers: ({ current, range: rangeSize, total, }: State) => number[];
+export declare const getRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
 export {};

package/pagination/utils.js

@@ -14,7 +14,10 @@ exports.cx = bind_1.default.bind(pagination_module_scss_1.default);
  * @param content Содержимое кнопки.
  * @return Список кнопок.
  */
-const PageButton = (value, content = value) => ({ value, content });
+const PageButton = (value, content = value) => ({
+    value,
+    content,
+});
 exports.PageButton = PageButton;
 /**
  * Возвращает список кнопок навигации.
@@ -40,9 +43,7 @@ const getPageButtons = ({ current, total, buttonKeys = { more: '...' }, }) => {
             else {
                 list.unshift((0, exports.PageButton)(1), 
                 // не выводим многоточие когда вместо него можно поставить одно число
-                list[0].value === 3
-                    ? (0, exports.PageButton)(2)
-                    : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
+                list[0].value === 3 ? (0, exports.PageButton)(2) : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
             }
         }
         if (list[list.length - 1].value < total) {
@@ -72,7 +73,7 @@ exports.getPageButtons = getPageButtons;
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-const getCorrectRangeNumbers = ({ current, range: rangeSize, total, }) => {
+const getCorrectRangeNumbers = ({ current, range: rangeSize, total }) => {
     let result = [
         ...(0, exports.getRangeNumbers)({
             current,
@@ -99,7 +100,7 @@ exports.getCorrectRangeNumbers = getCorrectRangeNumbers;
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-const getRangeNumbers = ({ current, range: rangeSize, total, }) => {
+const getRangeNumbers = ({ current, range: rangeSize, total }) => {
     const pageNumbers = [];
     const readyRange = Math.min(rangeSize, total) || 0;
     const halfRange = Math.floor(readyRange / 2);

package/panel/index.js

@@ -16,9 +16,7 @@ const cx = bind_1.default.bind(panel_module_scss_1.default);
  * @return Элемент.
  */
 const Panel = ({ color: panelColor = 'gray4', contentColor = 'gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
-    const contentProps = html
-        ? { dangerouslySetInnerHTML: { __html: html } }
-        : { children };
+    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)) }))));

package/phone-input/index.js

@@ -83,32 +83,31 @@ const PhoneInput = (_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) },
-        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, {
+        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, { 
+            } }))) : (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}` }));
+                onBlur &&
+                    onBlur(event, Object.assign(Object.assign({}, state), { 
+                        // вставляем код страны обратно в чистое значение
+                        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);
-                    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))))))));
+        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);
+                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;

package/price/utils.js

@@ -16,9 +16,7 @@ const formatPrice = (value, grapheme, { graphemeBefore } = {}) => {
         // целая часть
         (0, exports.formatInteger)(number),
         // дробная часть
-        Number.isFinite(number) &&
-            !Number.isInteger(number) &&
-            `,${(0, exports.formatFractional)(number)}`,
+        Number.isFinite(number) && !Number.isInteger(number) && `,${(0, exports.formatFractional)(number)}`,
         // графема после
         grapheme && !graphemeBefore && ` ${grapheme}`,
     ]

package/range/index.js

@@ -42,7 +42,7 @@ const cx = bind_1.default.bind(range_module_scss_1.default);
  * @param value Значение для расчета доли.
  * @return Доля, которую занимает значение.
  */
-const getFraction = (start, end, value) => ((value - start) / (end - start)) || 0;
+const getFraction = (start, end, value) => (value - start) / (end - start) || 0;
 /**
  * Возвращает процент от диапазона, заданную числом.
  * @param args Данные для расчета доли.
@@ -58,7 +58,7 @@ class Range extends react_1.Component {
      * @param props Свойства.
      */
     constructor(props) {
-        const { min = 0, max = 1, startValue = min, finishValue = max, } = props;
+        const { min = 0, max = 1, startValue = min, finishValue = max } = props;
         super(props);
         // конечное значение имеет приоритет - делаем стартовое зависимым от конечного
         const readyStart = this.constrainValue(Math.min(startValue, finishValue));
@@ -93,7 +93,7 @@ class Range extends react_1.Component {
     componentDidUpdate(prevProps) {
         const propKeys = ['min', 'max', 'step', 'startValue', 'finishValue'];
         if (propKeys.some(key => !Object.is(this.props[key], prevProps[key]))) {
-            const { startValue = this.start.get(), finishValue = this.finish.get(), } = this.props;
+            const { startValue = this.start.get(), finishValue = this.finish.get() } = this.props;
             // конечное значение имеет приоритет - делаем стартовое зависимым от конечного
             const readyStart = this.constrainValue(Math.min(startValue, finishValue));
             const readyFinish = this.constrainValue(finishValue);
@@ -171,11 +171,9 @@ class Range extends react_1.Component {
             const { left, right } = (0, bounds_of_1.default)(this.containerRef.current);
             const wrappedX = Math.max(start, Math.min((0, events_1.getEventClientPos)(event).x, end));
             const fraction = getFraction(left, right, wrappedX);
-            const value = this.constrainValue(min + (fraction * (max - min)));
+            const value = this.constrainValue(min + fraction * (max - min));
             // проверяем, является ползунок стартовым или конечным
-            thumbEl === this.startThumbRef.current
-                ? this.start.set(value)
-                : this.finish.set(value);
+            thumbEl === this.startThumbRef.current ? this.start.set(value) : this.finish.set(value);
         }
     }
     /**
@@ -233,9 +231,7 @@ class Range extends react_1.Component {
         else {
             isStartActive = abs(startX - clientX) < abs(finishX - clientX);
         }
-        this.activeThumbEl = (isStartActive
-            ? this.startThumbRef.current
-            : this.finishThumbRef.current);
+        this.activeThumbEl = (isStartActive ? this.startThumbRef.current : this.finishThumbRef.current);
         this.activeBounds = isStartActive
             ? [(0, bounds_of_1.default)(this.containerRef.current).left, finishX]
             : [startX, (0, bounds_of_1.default)(this.containerRef.current).right];
@@ -262,10 +258,11 @@ class Range extends react_1.Component {
                 handleEvent = onSlide;
                 break;
         }
-        handleEvent && handleEvent({
-            startValue: this.start.get(),
-            finishValue: this.finish.get(),
-        });
+        handleEvent &&
+            handleEvent({
+                startValue: this.start.get(),
+                finishValue: this.finish.get(),
+            });
     }
     /** @inheritdoc */
     render() {

package/rating/index.js

@@ -37,8 +37,8 @@ exports.Rating = Rating;
  * @return Элемент.
  */
 const Star = ({ type, size = 's' }) => (react_1.default.createElement("div", { className: cx('star', `size-${size}`) },
-    type === 'empty' && (react_1.default.createElement(star_svg_1.default, { className: cx('svg') })),
+    type === 'empty' && react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
     type === 'half' && (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
         react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'half'), preserveAspectRatio: 'xMinYMin slice' }))),
-    type === 'full' && (react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') }))));
+    type === 'full' && react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') })));

package/readme.md

@@ -145,7 +145,7 @@ declare module '*.module.scss' {
 
 // svg как React-компоненты
 declare module '*.svg' {
-  const content: React.FC<React.SVGProps<SVGSVGElement>>;
+  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
   export default content;
 }
 ```