@sima-land/ui-nucleons 40.3.0 → 41.2.1

package/_internal/body-scroll.d.ts

@@ -12,3 +12,12 @@ export interface WithBodyScrollLock {
  * @param options Опции.
  */
 export declare const useBodyScrollLock: (ref: React.RefObject<HTMLElement>, needDisable: boolean | undefined, options?: BodyScrollOptions | undefined) => void;
+/**
+ * Проверяет необходимость блокировки дочерних элементов в прокручиваемом элементе.
+ * Необходима для того, чтобы в прокручиваемых контейнерах вложенные прокручиваемые элементы,
+ * имеющие специальный атрибут, прокручивались нормально.
+ * @see {@link https://github.com/willmcpo/body-scroll-lock#more-complex}
+ * @param startEl Начальный элемент.
+ * @return Нужно ли позволить перетаскивание элемента.
+ */
+export declare const allowTouchMove: Required<BodyScrollOptions>['allowTouchMove'];

package/_internal/body-scroll.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBodyScrollLock = void 0;
+exports.allowTouchMove = exports.useBodyScrollLock = void 0;
 const body_scroll_lock_1 = require("body-scroll-lock");
 const react_1 = require("react");
+const constants_1 = require("../constants");
 /**
  * Хук управления блокировкой прокрутки body.
  * @param ref Реф элемента для которого нужно отключить прокрутку body.
@@ -19,3 +20,22 @@ const useBodyScrollLock = (ref, needDisable, options) => {
     }, [needDisable, options]);
 };
 exports.useBodyScrollLock = useBodyScrollLock;
+/**
+ * Проверяет необходимость блокировки дочерних элементов в прокручиваемом элементе.
+ * Необходима для того, чтобы в прокручиваемых контейнерах вложенные прокручиваемые элементы,
+ * имеющие специальный атрибут, прокручивались нормально.
+ * @see {@link https://github.com/willmcpo/body-scroll-lock#more-complex}
+ * @param startEl Начальный элемент.
+ * @return Нужно ли позволить перетаскивание элемента.
+ */
+const allowTouchMove = (startEl) => {
+    let el = startEl;
+    while (el && el !== document.body) {
+        if (el.getAttribute(constants_1.BSL_IGNORE_ATTR) !== null) {
+            return true;
+        }
+        el = el.parentElement;
+    }
+    return false;
+};
+exports.allowTouchMove = allowTouchMove;

package/alert/index.js

@@ -65,7 +65,7 @@ exports.Alert = Alert;
 const AlertInner = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
     const rootRef = (0, react_1.useRef)(null);
     const layer = (0, layer_1.useLayer)();
-    (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, scrollDisableOptions);
+    (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, Object.assign({ allowTouchMove: body_scroll_1.allowTouchMove }, scrollDisableOptions));
     return (react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer }, onClick: e => e.target === e.currentTarget && (onClose === null || onClose === void 0 ? void 0 : onClose()), "data-testid": 'alert:overlay' },
         react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
             withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),

package/arrow-button/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Size = 's' | 'l';
 declare type Direction = 'up' | 'right' | 'down' | 'left';
 export interface ArrowButtonProps extends Omit<JSX.IntrinsicElements['button'], 'size' | 'children'> {

package/avatar/user.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AvatarProps } from '.';
 export declare type UserAvatarProps = Omit<AvatarProps, 'bgColor' | 'bgOpacity' | 'textColor'>;
 export declare const colorKey: unique symbol;

package/card/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlateProps } from '../plate';
 import { CardContent, CardFooter, CardHeader } from './slots';
 export declare type CardProps = PlateProps;

package/carousel/draggable.js

@@ -238,7 +238,9 @@ class Draggable extends react_1.Component {
     render() {
         const { children, containerProps = {}, transitionDuration: duration = 320 } = this.props;
         const { x, y } = this.currentOffset;
-        return (react_1.default.createElement("div", Object.assign({}, containerProps, { className: cx('draggable-container', containerProps.className), onClick: this.handleClick, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
+        return (react_1.default.createElement("div", Object.assign({}, containerProps, { className: cx('draggable-container', containerProps.className), 
+            // обрабатываем захват чтобы при обработке клика на дочернем элементе defaultPrevented уже был true
+            onClickCapture: this.handleClick, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
             react_1.default.createElement("div", { ref: this.draggableRef, style: {
                     transform: (0, styles_1.getTranslateStyle)(x, y),
                     transition: this.hasTransition ? (0, styles_1.getTransitionStyle)(duration, 'transform') : '',

package/carousel/index.d.ts

@@ -77,7 +77,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
      * @param index Индекс.
      * @return Элемент списка.
      */
-    static defaultRenderItem(item: any, index: React.Key): JSX.Element;
+    static defaultRenderItem(item: any, index: number): JSX.Element;
     /**
      * Возвращает кнопку управления.
      * @param data Данные для вывода кнопки.
@@ -179,7 +179,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
      */
     moveBackwardFinite(step: number): void;
     /**
-     * Выполняет прокрутка в бесконечном режиме.
+     * Выполняет прокрутку в бесконечном режиме.
      * @param step Количество элементов для прокрутки.
      * @param forward Нужно выполнить прокрутку вперед?
      */

package/carousel/index.js

@@ -276,7 +276,7 @@ class Carousel extends react_1.Component {
         this.setCurrentIndex(newIndex !== -1 && newIndex - step >= 0 ? newIndex - step : 0);
     }
     /**
-     * Выполняет прокрутка в бесконечном режиме.
+     * Выполняет прокрутку в бесконечном режиме.
      * @param step Количество элементов для прокрутки.
      * @param forward Нужно выполнить прокрутку вперед?
      */

package/chips/index.d.ts

@@ -1,18 +1,7 @@
 import React from 'react';
-interface ChipsItem {
-    href?: string;
-    children?: React.ReactNode;
-    withCross?: boolean;
-    target?: string;
-    [x: string]: any;
-}
 export interface ChipsProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Элементы списка. */
-    items: ChipsItem[];
-    /** Сработает при клике на элемент. */
-    onItemClick?: (item: ChipsItem, event: React.MouseEvent<HTMLAnchorElement>) => void;
-    /** Определит, отмечен ли переданный элемент. */
-    isItemChecked?: (item: ChipsItem, index: number) => boolean;
+    children: React.ReactNode;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
@@ -21,5 +10,7 @@ export interface ChipsProps extends React.HTMLAttributes<HTMLDivElement> {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Chips: ({ items, onItemClick, isItemChecked, className, "data-testid": testId, ...restProps }: ChipsProps) => JSX.Element;
-export {};
+export declare const Chips: {
+    ({ children, className, "data-testid": testId, ...restProps }: ChipsProps): JSX.Element;
+    Item: ({ href, children, withCross, target, onClick, checked, }: import("./item").ChipsItemProps) => JSX.Element;
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
+ * Атрибут устанавливается на элемент в случае, если
+ * прокручиваемый родитель элемента обрабатывается с помощью body-scroll-lock.
+ */
+export declare const BSL_IGNORE_ATTR = "data-bsl-ignore";

package/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BSL_IGNORE_ATTR = void 0;
+/**
+ * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
+ * Атрибут устанавливается на элемент в случае, если
+ * прокручиваемый родитель элемента обрабатывается с помощью body-scroll-lock.
+ */
+exports.BSL_IGNORE_ATTR = 'data-bsl-ignore';

package/dot-nav/index.d.ts

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

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/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.3.0",
+  "version": "41.2.1",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -10,74 +10,72 @@
   },
   "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",
-    "@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",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.5",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@sima-land/linters": "^2.1.1",
+    "@storybook/addon-actions": "^6.4.13",
+    "@storybook/addon-backgrounds": "^6.4.13",
+    "@storybook/addon-docs": "^6.4.13",
+    "@storybook/addon-storysource": "^6.4.13",
+    "@storybook/addons": "^6.4.13",
+    "@storybook/builder-webpack5": "^6.4.13",
+    "@storybook/manager-webpack5": "^6.4.13",
+    "@storybook/react": "^6.4.13",
+    "@storybook/theming": "^6.4.13",
     "@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",
+    "@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.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",
+    "@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-jest": "^27.4.6",
+    "babel-loader": "^8.2.3",
     "babel-preset-jest": "^27.2.0",
-    "classnames": "^2.2.6",
     "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",
-    "identity-obj-proxy": "^3.0.0",
+    "husky": "^7.0.4",
     "jest": "^27.3.1",
     "jest-css-modules-transform": "^4.3.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.3.2",
+    "lint-staged": "^12.1.2",
+    "postcss": "^8.3.11",
+    "prettier": "^2.4.1",
     "react": "^17.0.2",
     "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": "^27.0.7",
-    "typescript": "^4.4.3",
-    "typescript-plugin-css-modules": "^3.2.0",
-    "webpack": "^5.11.0"
+    "stylelint": "^14.1.0",
+    "typescript": "^4.5.2",
+    "typescript-plugin-css-modules": "^3.4.0",
+    "webpack": "^5.64.2"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -88,14 +86,14 @@
     "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",
-    "test": "jest",
+    "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",
-    "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": "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

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

package/price/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface PriceProps {
     /** Класс/стили цены. */
     className?: string;

package/rating/index.js

@@ -27,7 +27,7 @@ const cx = bind_1.default.bind(rating_module_scss_1.default);
  * @return Элемент.
  */
 const Rating = (_a) => {
-    var { size, value, className, 'data-testid': testId = 'rating' } = _a, restProps = __rest(_a, ["size", "value", "className", 'data-testid']);
+    var { size = 's', value, className, 'data-testid': testId = 'rating' } = _a, restProps = __rest(_a, ["size", "value", "className", 'data-testid']);
     return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', className), "data-testid": testId, "data-rating": value }), (0, utils_1.getStars)(Math.min(5, value), 5).map((type, index) => (react_1.default.createElement(Star, { key: index, type: type, size: size })))));
 };
 exports.Rating = Rating;
@@ -36,7 +36,7 @@ exports.Rating = Rating;
  * @param props Свойства.
  * @return Элемент.
  */
-const Star = ({ type, size = 's' }) => (react_1.default.createElement("div", { className: cx('star', `size-${size}`) },
+const Star = ({ type, size }) => (react_1.default.createElement("div", { className: cx('star', `size-${size}`) },
     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') }),

package/readme.md

@@ -158,12 +158,12 @@ declare module '*.svg' {
 - компонент интерфейса не должен иметь внешних отступов по умолчанию
 
 ### Консольные команды, необходимые в процессе разработки
-* ```yarn build``` - сборка компонентов в `./build` для публикации
-* ```yarn test``` - запуск тестов *Jest*
-* ```yarn lint:scripts``` - запуск линтера *ESLint*
-* ```yarn lint:styles``` - запуск линтера *styleLint*
-* ```yarn type-check``` - Проверка типов TS
-* ```yarn storybook``` - запуск *storybook*
+* ```npm run build``` - сборка компонентов в `./build` для публикации
+* ```npm run test``` - запуск тестов *Jest*
+* ```npm run lint:scripts``` - запуск линтера *ESLint*
+* ```npm run lint:styles``` - запуск линтера *styleLint*
+* ```npm run type-check``` - Проверка типов TS
+* ```npm run storybook``` - запуск *storybook*
 
 ### Структура библиотеки
 

package/screen/index.d.ts

@@ -1,64 +1,23 @@
 import React from 'react';
-import { ScreenLayoutProps, CallbackData } from './screen-layout';
-import { OrNil } from './utils';
-import { LoadingOverlayProps } from '../loading-overlay';
-interface AdvancedCallbackData extends CallbackData {
-    rootElement: OrNil<HTMLDivElement>;
-}
-export interface ScreenProps {
+import { ScreenInnerProps } from './utils';
+export interface ScreenProps extends ScreenInnerProps {
     /** Содержимое. */
     children?: React.ReactNode;
-    /** Реф контента. */
-    contentRef?: ScreenLayoutProps['childrenRef'];
-    /** Содержимое подвала. */
-    footer?: any;
-    /** Отступ от нижней границы для срабатывания onFullScroll. */
-    fullScrollThreshold?: number;
-    /** Нужно ли выводить вместо содержимого состояние загрузки. */
-    loading?: boolean;
     /** Определяет область отображаемую как загружающуюся. */
     loadingArea?: 'content' | 'full';
-    /** Свойства компонента LoadingOverlay. */
-    loadingOverlayProps?: LoadingOverlayProps;
-    /** Свойства компонента NavBar. */
-    navBarProps?: ScreenLayoutProps['navBarProps'];
-    /** Сработает при клике на кнопку "назад". */
-    onBack?: (data: AdvancedCallbackData) => void;
-    /** Сработает при кнопке на крест. */
-    onClose?: (data: AdvancedCallbackData) => void;
-    /** Сработает при полной прокрутке контента. */
-    onFullScroll?: ScreenLayoutProps['onFullScroll'];
-    /** Подзаголовок. */
-    subtitle?: string;
-    /** Заголовок. */
-    title?: string;
-    /** Нужно ли выводить кнопку "назад". */
-    withBackButton?: boolean;
-    /** Нужно ли выводить закрывающий крест. */
-    withCloseButton?: boolean;
-    /** Нужно ли рисовать черту между шапкой и основным содержимым. */
-    withDivideHeader?: boolean;
-    /** Нужно ли выводить кнопку "назад". */
-    withHeader?: boolean;
-    /** Нужно ли выводить Layer (при SSR необходимо указать false). */
-    inPortal?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
 }
 /**
  * Экран.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Screen: React.FC<ScreenProps>;
-/**
- * Записывает переданное значение в ref контента.
- * @param ref Ref-контейнер.
- * @param value Значение для записи.
- */
-export declare const setRefValue: (ref: React.RefCallback<any> | React.MutableRefObject<any>, value: any) => void;
-/**
- * Записывает полученный элемент в ref и отключает прокрутку.
- * @param ref Ref-контейнер.
- * @param element Элемент для записи.
- */
-export declare const takeScrollableElement: (ref: React.MutableRefObject<OrNil<HTMLDivElement>>, element?: HTMLDivElement | null | undefined) => void;
-export {};
+export declare const Screen: {
+    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, "data-testid": testId, }: ScreenProps): JSX.Element;
+    Header: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: import("./slots").HeaderSlotProps) => JSX.Element;
+    Body: React.ForwardRefExoticComponent<{
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement | null>>;
+    Footer: React.FC<{}>;
+};