@sima-land/ui-nucleons 40.2.1 → 41.1.0

package/chips/index.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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)
@@ -15,9 +34,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chips = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const item_1 = require("./item");
 const bind_1 = __importDefault(require("classnames/bind"));
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
 const chips_module_scss_1 = __importDefault(require("./chips.module.scss"));
 const cx = bind_1.default.bind(chips_module_scss_1.default);
 /**
@@ -26,12 +45,8 @@ const cx = bind_1.default.bind(chips_module_scss_1.default);
  * @return Элемент.
  */
 const Chips = (_a) => {
-    var { items, onItemClick, isItemChecked, className, 'data-testid': testId = 'chips' } = _a, restProps = __rest(_a, ["items", "onItemClick", "isItemChecked", "className", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('list', className), "data-testid": testId }), items.map((item, index) => {
-        const { href, target, children, withCross } = item;
-        return (react_1.default.createElement("a", { href: href, role: href ? undefined : 'button', key: index, className: cx('item', (isItemChecked === null || isItemChecked === void 0 ? void 0 : isItemChecked(item, index)) && 'checked'), target: target, onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e), "data-testid": 'chips:item' },
-            react_1.default.createElement("span", { className: chips_module_scss_1.default.text }, children),
-            withCross && (react_1.default.createElement(cross_1.default, { className: cx('cross-svg') }))));
-    })));
+    var { children, className, 'data-testid': testId = 'chips' } = _a, restProps = __rest(_a, ["children", "className", 'data-testid']);
+    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('list', className), "data-testid": testId }), react_1.Children.toArray(children).filter(c => (0, react_1.isValidElement)(c) && c.type === item_1.ChipsItem)));
 };
 exports.Chips = Chips;
+exports.Chips.Item = item_1.ChipsItem;

package/chips/item.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ChipsItemProps {
+    href?: string;
+    children?: React.ReactNode;
+    withCross?: boolean;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    checked?: boolean;
+}
+/**
+ * Элемент списка "чипсов".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const ChipsItem: ({ href, children, withCross, target, onClick, checked, }: ChipsItemProps) => JSX.Element;

package/chips/item.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipsItem = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
+const chips_module_scss_1 = __importDefault(require("./chips.module.scss"));
+const cx = bind_1.default.bind(chips_module_scss_1.default);
+/**
+ * Элемент списка "чипсов".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const ChipsItem = ({ href, children, withCross, target, onClick, checked, }) => (react_1.default.createElement("a", { href: href, role: href ? undefined : 'button', className: cx('item', { checked }), target: target, onClick: onClick, "data-testid": 'chips:item' },
+    react_1.default.createElement("span", { className: chips_module_scss_1.default.text }, children),
+    withCross && react_1.default.createElement(cross_1.default, { className: cx('cross-svg') })));
+exports.ChipsItem = ChipsItem;

package/clean-buttons/index.js

@@ -44,9 +44,7 @@ const cx = bind_1.default.bind(clean_buttons_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const CleanGroup = ({ children }) => (react_1.default.createElement("div", { className: cx('clean-group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton
-    ? item
-    : null)));
+const CleanGroup = ({ children }) => (react_1.default.createElement("div", { className: cx('clean-group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton ? item : null)));
 /**
  * Компонент прозрачной кнопки.
  * @param props Свойства. Поддерживаются свойства элементов button/a (зависит от того, передан ли asLink).

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

@@ -40,12 +40,12 @@
     background: colors.$gray12;
 
     // используем 10 чтобы проще считать коэффициенты масштабирования
-    // ВАЖНО: не надо использовать здесь число болье чем размер родителя с overflow:hidden - моргает в Safari
+    // ВАЖНО: не надо использовать здесь число больше чем размер родителя с overflow:hidden - моргает в Safari
     width: 10px;
     height: 10px;
 
     // используем scale() чтобы плавное изменение размера выглядело нормально
-    transform: translate3d(-50%, -50%, 0) scale(calc(1 / (10 / var(--dot-size))));
+    transform: translate3d(-50%, -50%, 0) scale(calc(var(--dot-size) / 10));
     transition: transform 0.3s, background 0.3s;
   }
   &.active::after {

package/dot-nav/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type DotNavSize = 's' | 'l';
 export interface DotNavProps {
     /** Индекс выбранной точки. */

package/dropdown/dropdown.module.scss

@@ -9,7 +9,5 @@
 }
 
 .inner {
-  max-height: calc(
-    var(--dropdown-max-height, 304px) - 16px
-  ); // вычитаем padding корневого элемента
+  max-height: calc(var(--dropdown-max-height, 304px) - 16px); // вычитаем padding корневого элемента
 }

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/hooks/index.d.ts

@@ -10,11 +10,12 @@ export declare const useIsTouchDevice: () => boolean;
  * @param options Опции.
  * @param options.onFullScroll Сработает при событии полной прокрутки.
  * @param options.threshold Отступ от конца списка по которому событие должно срабатывать.
+ * @param moreDeps Зависимости эффекта (нужны, когда ref заполняется не на этапе render'а).
  */
 export declare const useInfiniteScroll: (ref: React.MutableRefObject<HTMLElement | undefined | null>, { onFullScroll, threshold, }: {
     onFullScroll?: ((event: UIEvent) => void) | undefined;
     threshold?: number | undefined;
-}) => void;
+}, moreDeps?: React.DependencyList | undefined) => void;
 /**
  * Запускает переданный обработчик при клике вне элемента.
  * @param elementRef Ref элемента, клик вне которого нужно обработать.

package/hooks/index.js

@@ -8,6 +8,7 @@ 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");
 /**
  * При монтировании проверяет, поддерживает ли устройство touch события.
  * @return True - если поддерживает, false - если нет.
@@ -26,21 +27,22 @@ exports.useIsTouchDevice = useIsTouchDevice;
  * @param options Опции.
  * @param options.onFullScroll Сработает при событии полной прокрутки.
  * @param options.threshold Отступ от конца списка по которому событие должно срабатывать.
+ * @param moreDeps Зависимости эффекта (нужны, когда ref заполняется не на этапе render'а).
  */
-const useInfiniteScroll = (ref, { onFullScroll, threshold = 0, }) => {
+const useInfiniteScroll = (ref, { onFullScroll, threshold = 0, }, moreDeps) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(onFullScroll);
     (0, react_1.useEffect)(() => {
-        const { current: element } = ref;
+        const element = ref.current;
         if (element) {
-            return (0, on_1.default)(element, 'scroll', (event) => {
+            return (0, on_1.default)(element, 'scroll', event => {
+                var _a;
                 const { scrollTop, clientHeight, scrollHeight } = event.target;
                 const bottom = threshold + scrollTop + clientHeight;
                 const isFullyScrolled = bottom >= scrollHeight;
-                if (isFullyScrolled && onFullScroll) {
-                    onFullScroll(event);
-                }
+                isFullyScrolled && ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, event));
             });
         }
-    }, [ref.current, threshold, onFullScroll]);
+    }, [ref, threshold, ...(moreDeps || [])]);
 };
 exports.useInfiniteScroll = useInfiniteScroll;
 /**

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/no-index-mark/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface NoIndexMarkProps {
     /** Флаг закрывающегося тэга. */
     closing?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "40.2.1",
+  "version": "41.1.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -10,74 +10,74 @@
   },
   "dependencies": {
     "@krutoo/input-mask": "^0.0.8",
-    "@sima-land/ui-quarks": "^2.0.1",
-    "@types/body-scroll-lock": "^2.6.1",
+    "@sima-land/ui-quarks": "^2.2.0",
     "body-scroll-lock": "3.1.5",
-    "date-fns": "^2.14.0",
-    "intersection-observer": "^0.7.0",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.26.0",
+    "intersection-observer": "^0.12.0",
     "lodash": "^4.17.21",
     "overlayscrollbars": "^1.13.1",
-    "overlayscrollbars-react": "^0.2.2",
+    "overlayscrollbars-react": "^0.2.3",
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@rushstack/eslint-patch": "^1.0.6",
-    "@sima-land/linters": "^2.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@sima-land/linters": "^2.1.1",
     "@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/builder-webpack5": "^6.3.12",
+    "@storybook/manager-webpack5": "^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/lodash": "^4.14.168",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-transition-group": "^4.4.3",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@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",
-    "classnames": "^2.2.6",
+    "@testing-library/react": "^12.1.2",
+    "@types/body-scroll-lock": "^3.1.0",
+    "@types/enzyme": "^3.10.10",
+    "@types/jest": "^27.0.2",
+    "@types/lodash": "^4.14.177",
+    "@types/react": "^17.0.36",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
+    "babel-loader": "^8.2.3",
+    "babel-preset-jest": "^27.2.0",
     "copyfiles": "^2.4.1",
-    "css-loader": "^5.0.1",
-    "del": "^4.1.1",
+    "css-loader": "^5.2.7",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.13.0",
-    "enzyme-to-json": "^3.3.5",
+    "enzyme-to-json": "^3.6.2",
     "eslint": "^7.31.0",
     "file-loader": "^6.2.0",
-    "husky": "^5.1.1",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "jest-css-modules-transform": "^4.2.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.3.2",
+    "jest": "^27.3.1",
+    "jest-css-modules-transform": "^4.3.0",
+    "lint-staged": "^12.1.2",
+    "postcss": "^8.3.11",
+    "prettier": "^2.4.1",
     "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": "^1.43.4",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.8.0",
-    "ts-jest": "^26.5.2",
-    "typescript": "^4.4.3",
-    "typescript-plugin-css-modules": "^3.2.0",
-    "webpack": "^5.11.0"
+    "stylelint": "^14.1.0",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.5.2",
+    "typescript-plugin-css-modules": "^3.4.0",
+    "webpack": "^5.64.2"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -88,13 +88,15 @@
     "build:before": "rimraf build",
     "build:main": "tsc --project tsconfig.build.json",
     "build:after": "node dist.js",
-    "build": "yarn build:before && yarn build:main && yarn build:after",
+    "build": "npm run build:before && npm run build:main && npm run build:after",
     "test": "jest",
     "type-check": "tsc -p . --noEmit",
     "coverage": "jest --clearCache && jest --coverage",
     "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 --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;