@sima-land/ui-nucleons 41.1.0 → 41.3.0

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "41.1.0",
+  "version": "41.3.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -22,21 +22,20 @@
   },
   "devDependencies": {
     "@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",
+    "@babel/preset-typescript": "^7.16.5",
     "@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",
+    "@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",
@@ -51,6 +50,7 @@
     "@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",
     "copyfiles": "^2.4.1",
@@ -60,7 +60,6 @@
     "eslint": "^7.31.0",
     "file-loader": "^6.2.0",
     "husky": "^7.0.4",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^27.3.1",
     "jest-css-modules-transform": "^4.3.0",
     "lint-staged": "^12.1.2",
@@ -74,7 +73,6 @@
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.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"
@@ -89,13 +87,13 @@
     "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": "jest",
+    "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 --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/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/screen/index.d.ts

@@ -1,18 +1,10 @@
 import React from 'react';
-import { LoadingOverlayProps } from '../loading-overlay';
-export interface ScreenProps {
+import { ScreenInnerProps } from './utils';
+export interface ScreenProps extends ScreenInnerProps {
     /** Содержимое. */
     children?: React.ReactNode;
-    /** Нужно ли выводить вместо содержимого состояние загрузки. */
-    loading?: boolean;
     /** Определяет область отображаемую как загружающуюся. */
     loadingArea?: 'content' | 'full';
-    /** Свойства компонента LoadingOverlay. */
-    loadingOverlayProps?: LoadingOverlayProps;
-    /** Будет вызвана при полной прокрутке содержимого экрана. */
-    onFullScroll?: () => void;
-    /** Отступ от нижней границы содержимого экрана, после которого начинает срабатывать onFullScroll. */
-    fullScrollThreshold?: number;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
@@ -24,6 +16,8 @@ export interface ScreenProps {
 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.FC<{}>;
+    Body: React.ForwardRefExoticComponent<{
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement | null>>;
     Footer: React.FC<{}>;
 };

package/screen/index.js

@@ -1,35 +1,14 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Screen = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const slots_1 = require("./slots");
-const loading_overlay_1 = require("../loading-overlay");
-const body_scroll_1 = require("../_internal/body-scroll");
 const layer_1 = require("../helpers/layer");
 const define_slots_1 = require("../helpers/define-slots");
-const hooks_1 = require("../hooks");
+const utils_1 = require("./utils");
 const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
 /**
  * Экран.
@@ -44,16 +23,18 @@ const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps,
         body: slots_1.BodySlot,
         footer: slots_1.FooterSlot,
     });
-    // при блокировке прокрутки нужно передавать элемент которому нужно сохранить возможность прокрутки
-    // https://github.com/willmcpo/body-scroll-lock/blame/79c4cf2c956eb7d5cf8d54a03d12751bc6ac8aa3/README.md#L52
-    // поэтому используем внутренний ref и useImperativeHandle
-    const bodyRef = (0, react_1.useRef)(null);
-    (0, body_scroll_1.useBodyScrollLock)(bodyRef, true);
-    (0, hooks_1.useInfiniteScroll)(bodyRef, { onFullScroll, threshold: fullScrollThreshold });
+    if (!body) {
+        throw Error('Looks like you are trying to render <Screen /> without <Screen.Body /> slot, but it is required');
+    }
     return (react_1.default.createElement("div", { className: screen_module_scss_1.default.root, style: { zIndex: layer }, "data-testid": testId },
         react_1.default.createElement(layer_1.LayerProvider, { value: layer },
             !fullLoading && header,
-            react_1.default.createElement("div", { ref: bodyRef, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (body)),
+            react_1.default.createElement(utils_1.ScreenContext.Provider, { value: {
+                    loading,
+                    loadingOverlayProps,
+                    onFullScroll,
+                    fullScrollThreshold,
+                } }, body),
             !fullLoading && footer && (react_1.default.createElement("div", { className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, footer)))));
 };
 exports.Screen = Screen;

package/screen/slots.d.ts

@@ -20,10 +20,10 @@ export interface HeaderSlotProps extends NavBarProps {
 export declare const HeaderSlot: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: HeaderSlotProps) => JSX.Element;
 /**
  * Слот основного контента экрана.
- * @param props Свойства.
- * @return Элемент.
  */
-export declare const BodySlot: React.FC;
+export declare const BodySlot: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement | null>>;
 /**
  * Слот футера экрана.
  * @param props Свойства.

package/screen/slots.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,11 +34,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterSlot = exports.BodySlot = exports.HeaderSlot = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const nav_bar_1 = require("../nav-bar");
 const lodash_1 = require("lodash");
 const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
 const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
+const body_scroll_1 = require("../_internal/body-scroll");
+const hooks_1 = require("../hooks");
+const loading_overlay_1 = require("../loading-overlay");
+const utils_1 = require("./utils");
+const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
 /**
  * Слот шапки экрана.
  * @param props Свойства.
@@ -50,11 +74,20 @@ const HeaderSlot = (_a) => {
 exports.HeaderSlot = HeaderSlot;
 /**
  * Слот основного контента экрана.
- * @param props Свойства.
- * @return Элемент.
  */
-const BodySlot = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
-exports.BodySlot = BodySlot;
+exports.BodySlot = (0, react_1.forwardRef)(function BodySlot({ children }, outerRef) {
+    const { loading, loadingOverlayProps, onFullScroll, fullScrollThreshold } = (0, react_1.useContext)(utils_1.ScreenContext);
+    // при блокировке прокрутки нужно передавать элемент, которому нужно сохранить возможность прокрутки
+    // https://github.com/willmcpo/body-scroll-lock/blame/79c4cf2c956eb7d5cf8d54a03d12751bc6ac8aa3/README.md#L52
+    // поэтому используем внутренний ref и useImperativeHandle
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(outerRef, () => ref.current);
+    (0, body_scroll_1.useBodyScrollLock)(ref, true, { allowTouchMove: body_scroll_1.allowTouchMove });
+    (0, hooks_1.useInfiniteScroll)(ref, { onFullScroll, threshold: fullScrollThreshold });
+    return (
+    // ВАЖНО: элемент с ref должен выводиться всегда (без условий), т.к. он нужен для блокировки прокрутки
+    react_1.default.createElement("div", { ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children)));
+});
 /**
  * Слот футера экрана.
  * @param props Свойства.

package/screen/utils.d.ts

@@ -1 +1,13 @@
-export declare const cx: (...args: import("classnames").Argument[]) => string;
+/// <reference types="react" />
+import { LoadingOverlayProps } from '../loading-overlay';
+export interface ScreenInnerProps {
+    /** Нужно ли выводить вместо содержимого состояние загрузки. */
+    loading?: boolean;
+    /** Свойства компонента LoadingOverlay. */
+    loadingOverlayProps?: LoadingOverlayProps;
+    /** Будет вызвана при полной прокрутке содержимого экрана. */
+    onFullScroll?: () => void;
+    /** Отступ от нижней границы содержимого экрана, после которого начинает срабатывать onFullScroll. */
+    fullScrollThreshold?: number;
+}
+export declare const ScreenContext: import("react").Context<ScreenInnerProps>;

package/screen/utils.js

@@ -1,9 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cx = void 0;
-const bind_1 = __importDefault(require("classnames/bind"));
-const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
-exports.cx = bind_1.default.bind(screen_module_scss_1.default);
+exports.ScreenContext = void 0;
+const react_1 = require("react");
+exports.ScreenContext = (0, react_1.createContext)({});

package/select/index.d.ts

@@ -22,5 +22,5 @@ export interface SelectProps extends Omit<TextFieldProps, 'style'> {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, ...restProps }: SelectProps) => JSX.Element;
 export {};

package/select/index.js

@@ -45,6 +45,7 @@ const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/A
 const select_module_scss_1 = __importDefault(require("./select.module.scss"));
 const colors_1 = require("../colors");
 const dropdown_loading_1 = require("../_internal/dropdown-loading");
+const hooks_1 = require("../hooks");
 const cx = bind_1.default.bind(select_module_scss_1.default);
 /**
  * Поле выбора из списка.
@@ -53,30 +54,43 @@ const cx = bind_1.default.bind(select_module_scss_1.default);
  */
 const Select = (_a) => {
     var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid']);
+    const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [opened, toggleMenu] = (0, react_1.useState)(false);
     const ArrowSVG = opened ? up_1.default : down_1.default;
     (0, react_1.useEffect)(() => {
-        opened && menuRef.current.focus();
+        opened && menuRef.current && menuRef.current.focus();
         onMenuToggle && onMenuToggle(opened);
     }, [opened]);
-    return (react_1.default.createElement("div", { style: style, className: cx('root', className), "data-testid": dataTestId },
-        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { readOnly: true, "data-testid": 'select:field', ref: fieldRef, variant: 'desktop', label: label, value: value, multiline: false, focused: opened, onClick: e => {
-                toggleMenu(o => !o);
-                onClick && onClick(e);
-            }, onBlur: ({ relatedTarget }) => {
-                relatedTarget !== menuRef.current && toggleMenu(false);
-            }, onKeyDown: (e) => {
-                e.key === 'Enter' && toggleMenu(true);
-            }, className: cx('field'), endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) })),
-        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'select:menu', tabIndex: -1, className: cx('menu'), onBlur: () => {
-                toggleMenu(false);
-            }, role: 'menu', onKeyDown: (event) => {
+    (0, hooks_1.useOutsideClick)(rootRef, toggleMenu.bind(null, false));
+    return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
+        react_1.default.createElement(text_field_1.TextField, { blockProps: {
+                ref: fieldRef,
+                tabIndex: 0,
+                onMouseDown: () => {
+                    toggleMenu(a => !a);
+                },
+                onKeyDown: e => {
+                    e.key === 'Enter' && toggleMenu(true);
+                },
+                onClick: e => {
+                    e.preventDefault();
+                    onClick && onClick(e);
+                },
+            }, className: select_module_scss_1.default.field, "data-testid": 'select:field', label: label, focused: opened, baseInputProps: {
+                // чтобы не ловить фокус на поле
+                style: { pointerEvents: 'none' },
+                tabIndex: -1,
+            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) }),
+        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
                 if (event.key === 'Enter') {
                     toggleMenu(false);
                     fieldRef.current && fieldRef.current.focus();
                 }
+            }, onBlur: () => {
+                toggleMenu(false);
+                fieldRef.current && fieldRef.current.focus();
             } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (options.map((option, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: optionSize, key: index, role: 'menuitem', onClick: () => {
                 toggleMenu(false);
                 onSelect && onSelect(option);

package/side-page/index.d.ts

@@ -41,7 +41,7 @@ export declare const SidePage: {
     };
     Body: {
         ({ children }: {
-            children?: React.ReactNode; /** Обработчик "onExiting" для CSSTransition. */
+            children?: React.ReactNode;
         }): JSX.Element;
         displayName: string;
     };

package/side-page/index.js

@@ -81,10 +81,11 @@ const SidePageInner = ({ size = 'm', children, onClose, withScrollDisable, scrol
     });
     (0, body_scroll_1.useBodyScrollLock)(ref, withScrollDisable, scrollDisableOptions);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: cx('overlay'), style: overlayStyles }, (transitionStatus !== 'entering' && overlayBind)),
-        react_1.default.createElement("div", { className: cx('main', `size-${size}`) },
-            header,
-            react_1.default.createElement("div", { className: cx('body') }, body),
-            footer)));
+        react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+            react_1.default.createElement("div", { className: cx('main', `size-${size}`) },
+                header,
+                react_1.default.createElement("div", { className: cx('body') }, body),
+                footer))));
 };
 exports.SidePage.Header = slots_1.SidePageHeader;
 exports.SidePage.Body = slots_1.SidePageBody;

package/text-field/index.d.ts

@@ -46,6 +46,8 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     startAdornment?: React.ReactNode;
     /** Вариант отображения. */
     variant?: Variant;
+    /** Свойства элемента-блока. */
+    blockProps?: React.HTMLProps<HTMLDivElement>;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/text-field/index.js

@@ -51,7 +51,7 @@ const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disab
  * @param props Свойства.
  * @return Элемент.
  */
-exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, 'data-testid': dataTestId, }, ref) {
+exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, }, ref) {
     const [hasValue, toggleHasValue] = (0, react_1.useState)(isVisible(value) || isVisible(defaultValue));
     const [reallyFocused, toggleFocused] = (0, react_1.useState)(autoFocus);
     const focused = reallyFocused || Boolean(asFocused);
@@ -70,21 +70,25 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
     (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
     (0, react_1.useEffect)(() => toggleHasValue(Boolean(baseInputRef.current.value)));
     return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style },
-        react_1.default.createElement("div", { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds]), onClick: event => {
+        react_1.default.createElement("div", Object.assign({ "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
                 const input = baseInputRef.current;
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
-                input && !disabled && input !== document.activeElement && input.focus();
-            } },
+                input &&
+                    !disabled &&
+                    !event.defaultPrevented &&
+                    input !== document.activeElement &&
+                    input.focus();
+            } }, blockProps),
             !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
             react_1.default.createElement("div", { className: cx('main-column') },
-                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label })),
+                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
                     react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
-                            (0, lodash_1.isFunction)(onFocus) && onFocus(event);
+                            onFocus && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);
                         }, onBlur: (event) => {
-                            (0, lodash_1.isFunction)(onBlur) && onBlur(event);
+                            onBlur && onBlur(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(false);
                         }, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),

package/touch-slider/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TouchSlider = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("../layout");
+const constants_1 = require("../constants");
 const bind_1 = __importDefault(require("classnames/bind"));
 const touch_slider_module_scss_1 = __importDefault(require("./touch-slider.module.scss"));
 const cx = bind_1.default.bind(touch_slider_module_scss_1.default);
@@ -15,6 +16,6 @@ const cx = bind_1.default.bind(touch_slider_module_scss_1.default);
  * @return Элемент.
  */
 const TouchSlider = ({ children }) => (react_1.default.createElement(layout_1.MobileLayout, null,
-    react_1.default.createElement("div", { className: cx('outer', 'invisible-scroll') },
+    react_1.default.createElement("div", Object.assign({ className: cx('outer', 'invisible-scroll') }, { [constants_1.BSL_IGNORE_ATTR]: true }),
         react_1.default.createElement("div", { className: cx('inner') }, children))));
 exports.TouchSlider = TouchSlider;