@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/price/utils.js

@@ -8,30 +8,30 @@ exports.formatFractional = exports.formatInteger = exports.formatPrice = void 0;
  * @param options Опции.
  * @return Отформатированная цена.
  */
-const formatPrice = (value, grapheme, { graphemeBefore } = {}) => {
+function formatPrice(value, grapheme, { graphemeBefore } = {}) {
     const number = Number(value);
     return [
         // графема до
         grapheme && graphemeBefore && `${grapheme} `,
         // целая часть
-        (0, exports.formatInteger)(number),
+        formatInteger(number),
         // дробная часть
-        Number.isFinite(number) && !Number.isInteger(number) && `,${(0, exports.formatFractional)(number)}`,
+        Number.isFinite(number) && !Number.isInteger(number) && `,${formatFractional(number)}`,
         // графема после
         grapheme && !graphemeBefore && ` ${grapheme}`,
     ]
         .filter(Boolean)
         .map(s => s.replace(/\s/g, '\u2009')) // заменяем все пробелы на полупробелы
         .join('');
-};
+}
 exports.formatPrice = formatPrice;
-// eslint-disable-next-line require-jsdoc
-const formatInteger = (value) => {
+// eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
+function formatInteger(value) {
     let result = '0';
     if (Number.isFinite(value)) {
         // если число меньше 0.0001 - округляем до 0.0001
         const valid = value === 0 ? 0 : Math.max(value, 0.0001);
-        const integer = valid.toString().replace(/\..*$/g, ''); // все числа до точки
+        const integer = toString(valid).replace(/\..*$/g, ''); // все числа до точки
         const separated = [];
         const list = integer.split('');
         while (list.length) {
@@ -41,23 +41,33 @@ const formatInteger = (value) => {
         result = separated.join(' ');
     }
     return result;
-};
+}
 exports.formatInteger = formatInteger;
-// eslint-disable-next-line require-jsdoc
-const formatFractional = (value) => {
-    let result = '';
+// eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
+function formatFractional(value) {
+    let fractional = '';
     if (Number.isFinite(value) && !Number.isInteger(value)) {
-        if (value <= 0.0001) {
-            // если число меньше 0.0001 - округляем до 0.0001
-            result = '0001';
-        }
-        else if (value < 0.01) {
-            result = value.toFixed(4).slice(-4);
-        }
-        else {
-            result = value.toFixed(2).slice(-2);
-        }
+        fractional = toString(value).replace(/^.*\./g, '');
     }
-    return result;
-};
+    return fractional;
+}
 exports.formatFractional = formatFractional;
+/**
+ * Округляет число и приводит его к строке по дизайн-гайдам цен.
+ * @param value Число.
+ * @return Отформатированное число.
+ */
+function toString(value) {
+    let result;
+    if (value <= 0.0001) {
+        // если число меньше 0.0001 - округляем до 0.0001
+        result = '0.0001';
+    }
+    else if (value < 0.01) {
+        result = value.toFixed(4);
+    }
+    else {
+        result = value.toFixed(2);
+    }
+    return result;
+}

package/radio-button/index.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { FieldProps, WithTestId } from '../types';
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, FieldProps, WithTestId {
+}
+/**
+ * Радио-кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function RadioButton({ style, className, 'data-testid': testId, ...restProps }: RadioButtonProps): JSX.Element;

package/radio-button/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const radio_button_module_scss_1 = __importDefault(require("./radio-button.module.scss"));
+const cx = bind_1.default.bind(radio_button_module_scss_1.default);
+/**
+ * Радио-кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function RadioButton(_a) {
+    var { style, className, 'data-testid': testId = 'radio-button' } = _a, restProps = __rest(_a, ["style", "className", 'data-testid']);
+    return (react_1.default.createElement("div", { style: style, className: cx('root', className) },
+        react_1.default.createElement("input", Object.assign({}, restProps, { type: 'radio', className: cx('input'), "data-testid": testId })),
+        react_1.default.createElement("div", { className: cx('circle') })));
+}
+exports.RadioButton = RadioButton;

package/radio-button/radio-button.module.scss

@@ -0,0 +1,46 @@
+@use '../colors';
+
+.root {
+  display: inline-block;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  vertical-align: -0.125em; // не понятно почему, но это значение ставит блок ровно по середине строки
+}
+
+.circle {
+  --radio-border-width: 1px;
+  --radio-border-color: #{colors.$basic-gray38};
+  --radio-color: #fff;
+  display: block;
+  pointer-events: none;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  background: var(--radio-color);
+  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-border-color);
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  &:checked + .circle {
+    --radio-border-width: 6px;
+    --radio-border-color: #{colors.$basic-blue};
+  }
+  &:not(:checked):disabled + .circle {
+    --radio-border-color: #{colors.$basic-gray24};
+    --radio-color: #{colors.$basic-gray4};
+  }
+  &:checked:disabled + .circle {
+    --radio-border-width: 6px;
+    --radio-border-color: #{colors.$basic-gray24};
+    --radio-color: #{colors.$basic-gray4};
+  }
+}

package/rating/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-export declare type StarSize = 's' | 'm';
+export type StarSize = 's' | 'm';
 export interface RatingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Размер. */
     size?: StarSize;
     /** Значение рейтинга. */
     value: number;

package/rating/types.d.ts

@@ -1 +1 @@
-export declare type StarType = 'full' | 'half' | 'empty';
+export type StarType = 'full' | 'half' | 'empty';

package/readme.md

@@ -4,7 +4,8 @@
 
 ## Использование
 
-Установка
+### Установка
+
 ```bash
 # npm
 npm i -S @sima-land/ui-nucleons
@@ -13,22 +14,28 @@ npm i -S @sima-land/ui-nucleons
 yarn add @sima-land/ui-nucleons
 ```
 
-### Настройка сборки и запуска тестов
+### Настройка среды
+
 Компоненты библиотеки используют:
+
+- импорты изображений (jpg, png..) как url/src
 - импорты стилей
 - импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.module.scss`)
 - импорты svg-файлов как react-компоненты
 
 #### Для работы с Webpack необходимо (как вариант):
+
 - добавить необходимые пакеты `@svgr/*`
 - сконфигурировать обработку svg, css, scss файлов
 
-##### Добавление пакетов `@svgr/*`:
+##### Зависимости
+
 ```bash
-npm install --save-dev @svgr/core @svgr/plugin-svgo @svgr/webpack
+npm install --save-dev @svgr/core @svgr/plugin-jsx @svgr/plugin-svgo @svgr/webpack
 ```
 
-##### Конфигурация webpack
+##### Конфигурация
+
 ```js
 // webpack.config.js
 const svgrOptions = require('../../svgr.config'); // опции SVGR (скопировать из данного проекта)
@@ -36,7 +43,7 @@ const svgrOptions = require('../../svgr.config'); // опции SVGR (скопи
 module.exports = {
   module: {
     rules: [
-      // обработка svg
+      // svg
       {
         test: /\.svg$/,
         use: [
@@ -47,30 +54,20 @@ module.exports = {
         ],
       },
 
-      // обработка обычных стилей
+      // стилей
       {
         test: /\.(css|scss)$/,
-        exclude: /\.module\.(css|scss)$/,
-        use: [
-          'css-loader',
-          'postcss-loader',
-        ],
-      },
-
-      // обработка css-модулей
-      {
-        test: /\.module\.(css|scss)$/,
         use: [
+          // ...здесь style-loader, mini-css-extract-plugin или что-то другое
           {
             loader: 'css-loader',
             options: {
               modules: {
-                localIdentName: '[name]__[local]__[hash:hex:3]',
-                localIdentHashPrefix: 'some-service',
+                auto: /\.module\.(css|scss)$/,
+                localIdentName: '[name]__[local]--[hash:hex:3]',
               },
             },
           },
-          'postcss-loader',
           'sass-loader',
         ],
       },
@@ -81,47 +78,50 @@ module.exports = {
 
 #### Для работы с Jest необходимо (как вариант):
 
+- добавить необходимые пакеты `@svgr/*`
+- сконфигурировать обработку svg, css, scss файлов
+
 ##### Добавить обработку SVG
 
 - добавить файл "трансформера" вида:
+
 ```js
 const babel = require('@babel/core');
-const babelJestPreset = require('babel-preset-jest');
-const svgr = require('@svgr/core').default;
-const svgrOptions = require('../../svgr.config'); // опции SVGR
+const babelConfig = require('../../babel.config');
+const svgr = require('@svgr/core');
+const svgrConfig = require('../../svgr.config');
 
 module.exports = {
-  process: (src, filename) => {
-    const code = svgr.sync(src, svgrOptions, { filePath: filename });
+  process(sourceText, sourcePath) {
+    const code = svgr.transform.sync(sourceText, svgrConfig, { filePath: sourcePath });
 
-    return babel.transformSync(code, {
-      filename,
-      presets: [babelJestPreset],
-    }).code;
+    return babel.transformSync(code, { filename: sourcePath, ...babelConfig });
   },
 };
 ```
+
 - задействовать его в конфигурации Jest
 
 ##### Добавить поддержку стилей
 
 В конфигурации Jest:
+
 ```js
 module.exports = {
   transform: {
-    // svg заменяем на React-компоненты
-    '\\.svg$': '<rootDir>/jest/transforms/svg.js',
+    // svg как react-компоненты
+    '\\.svg$': '<rootDir>/.jest/transforms/svg.js',
 
-    // генерируем css-модули
-    '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
+    // обычный css
+    '(?<!(\\.module))\\.(css|scss)$': './transformer/empty.js',
 
-    // ...
-  },
-  moduleNameMapper: {
-    // обычные стили делаем просто пустыми модулями
-    '(?<!(.+\\.module))(\\.css|\\.scss)$': '<rootDir>/jest/mocks/style.js',
+    // css-модули
+    '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
   },
-
+  transformIgnorePatterns: [
+    // в пакете содержится css-модули, поэтому игнорируем только скрипты
+    '/node_modules/.+js$',
+  ],
   // ...
 };
 ```
@@ -154,39 +154,30 @@ declare module '*.svg' {
 
 ### Принципы библиотеки
 
-- в библиотеке не должно быть HOC (компонентов высшего порядка - функций возвращающих компонент)
+- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
 - компонент интерфейса не должен иметь внешних отступов по умолчанию
 
-### Консольные команды, необходимые в процессе разработки
-* ```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*
-
 ### Структура библиотеки
 
 `src/` - директория со всеми компонентами библиотеки
-* `something/` - директория с компонентом
-    * `__stories__/`
-        * `index.stories.tsx` - описание компонента для storybook
-    * `__test__/`
-        * `index.test.tsx` - unit-тесты
-    * `index.tsx` - файл, с именованными экспортами компонента и интерфейса
-* `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
-* `hooks/` - общие react-хуки (для использования вне библиотеки)
-* `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки
 
-## Работа компонентов, использующих информацию о viewport
+- `something/` - директория с компонентом
+  - `__stories__/`
+    - `index.stories.tsx` - описание компонента для storybook
+  - `__test__/`
+    - `index.test.tsx` - unit-тесты
+  - `index.tsx` - файл, с именованными экспортами компонента и интерфейса
+- `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
+- `hooks/` - общие react-хуки (для использования вне библиотеки)
+- `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки
 
-Компоненты вроде `Screen` и `Alert` используют следующие css-переменные:
+### Тестирование
 
-- `--vh`: используется как сотая доля высоты экрана (аналог `1vh`), может учитывать визуальный viewport
-- `--offsetTop`: используется как позиция верхней границы визуального viewport'а
+Локально E2E-тесты должны запускаться через docker, пример:
 
-При использовании таких компонентов в проектах, для корректной работы на мобильных устройствах (например при показе/скрытии виртуальных клавиатур и других изменениях viewport), необходимо предоставить эти переменные (например установив их на `<body />`)
-
-При работе над подобными компонентами необходимо учитывать отсутствие этих переменных и не забывать устанавливать запасное значение при использовании `var()`
+```bash
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.2-focal /bin/bash
+npx playwright test
+```
 
-Установка не выполняется компонентами самостоятельно в целях производительности.
+В противном случае скриншотные тесты не будут совпадать из-за разницы окружения запуска.

package/screen/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScreenInnerProps } from './utils';
-export interface ScreenProps extends ScreenInnerProps {
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export interface ScreenProps extends ScreenInnerProps, WithPageScrollLock {
     /** Содержимое. */
     children?: React.ReactNode;
     /** Определяет область отображаемую как загружающуюся. */
@@ -10,11 +11,12 @@ export interface ScreenProps extends ScreenInnerProps {
 }
 /**
  * Экран.
+ * @deprecated На адаптивных страницах стоит использовать Modal.
  * @param props Свойства.
  * @return Элемент.
  */
 export declare const Screen: {
-    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, "data-testid": testId, }: ScreenProps): JSX.Element;
+    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, withScrollDisable, scrollDisableOptions, "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;

package/screen/index.js

@@ -1,21 +1,46 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __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 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
 const define_slots_1 = require("../helpers/define-slots");
 const utils_1 = require("./utils");
 const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
+const styles_1 = require("../hooks/styles");
 /**
  * Экран.
+ * @deprecated На адаптивных страницах стоит использовать Modal.
  * @param props Свойства.
  * @return Элемент.
  */
-const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps, onFullScroll, fullScrollThreshold = 320, 'data-testid': testId = 'screen', }) => {
+const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps, onFullScroll, fullScrollThreshold = 320, withScrollDisable, scrollDisableOptions, 'data-testid': testId = 'screen', }) => {
     const fullLoading = loading && loadingArea === 'full';
     const layer = (0, layer_1.useLayer)() + 300; // 300 из-за монолита
     const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
@@ -23,10 +48,14 @@ const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps,
         body: slots_1.BodySlot,
         footer: slots_1.FooterSlot,
     });
+    const rootRef = (0, react_1.useRef)(null);
+    (0, styles_1.useViewportHeightUnit)(rootRef);
     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 },
+    return (react_1.default.createElement("div", { ref: rootRef, className: screen_module_scss_1.default.root, style: {
+            zIndex: layer, // z-index именно здесь из-за position: fixed
+        }, "data-testid": testId },
         react_1.default.createElement(layer_1.LayerProvider, { value: layer },
             !fullLoading && header,
             react_1.default.createElement(utils_1.ScreenContext.Provider, { value: {
@@ -34,6 +63,8 @@ const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps,
                     loadingOverlayProps,
                     onFullScroll,
                     fullScrollThreshold,
+                    withScrollDisable,
+                    scrollDisableOptions,
                 } }, body),
             !fullLoading && footer && (react_1.default.createElement("div", { className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, footer)))));
 };

package/screen/screen.module.scss

@@ -6,8 +6,6 @@
   left: 0;
   display: flex;
   flex-direction: column;
-
-  // для корректного отображения с динамическим viewport переменная --vh должна быть доступна
   height: calc(var(--vh, 1vh) * 100);
   width: 100%;
   box-sizing: border-box;

package/screen/slots.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
-import { NavBarProps } from '../nav-bar';
-export interface HeaderSlotProps extends NavBarProps {
-    /** Нужна ли разделительная полоса внизу шапки экрана. */
-    divided?: boolean;
-    /** Заголовок. */
-    title?: string;
-    /** Подзаголовок. */
-    subtitle?: string;
+import { TopBarProps } from '../top-bar';
+export interface HeaderSlotProps extends TopBarProps {
     /** Будет вызвана при нажатии на кнопку-стрелку. */
     onBack?: () => void;
     /** Будет вызвана при нажатии на кнопку-крести. */

package/screen/slots.js

@@ -39,16 +39,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterSlot = exports.BodySlot = exports.HeaderSlot = void 0;
 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 page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 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"));
-const constants_1 = require("../constants");
+const top_bar_1 = require("../top-bar");
 /**
  * Слот шапки экрана.
  * @param props Свойства.
@@ -56,11 +55,11 @@ const constants_1 = require("../constants");
  */
 const HeaderSlot = (_a) => {
     var { divided, title, subtitle, buttons, onBack, onClose } = _a, restProps = __rest(_a, ["divided", "title", "subtitle", "buttons", "onBack", "onClose"]);
-    return (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, restProps, { title: title, subtitle: subtitle, bottomBordered: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
+    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, restProps, { size: 's', title: title, subtitle: subtitle, divided: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
                 ? {
                     // ВАЖНО: не подмешиваем свойства из buttons.start
                     // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: arrow_left_1.default,
+                    icon: react_1.default.createElement(arrow_left_1.default, null),
                     onClick: onBack,
                     'aria-label': 'Вернуться назад',
                     'data-testid': 'screen:back',
@@ -69,7 +68,7 @@ const HeaderSlot = (_a) => {
                 ? {
                     // ВАЖНО: не подмешиваем свойства из buttons.end
                     // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: cross_1.default,
+                    icon: react_1.default.createElement(cross_1.default, null),
                     onClick: onClose,
                     'aria-label': `Закрыть ${title || ''}`.trim(),
                     'data-testid': 'screen:close',
@@ -81,17 +80,17 @@ exports.HeaderSlot = HeaderSlot;
  * Слот основного контента экрана.
  */
 exports.BodySlot = (0, react_1.forwardRef)(function BodySlot({ children }, outerRef) {
-    const { loading, loadingOverlayProps, onFullScroll, fullScrollThreshold } = (0, react_1.useContext)(utils_1.ScreenContext);
+    const { loading, loadingOverlayProps, onFullScroll, fullScrollThreshold, withScrollDisable, scrollDisableOptions, } = (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, page_scroll_lock_1.usePageScrollLock)(ref, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
     (0, hooks_1.useInfiniteScroll)(ref, { onFullScroll, threshold: fullScrollThreshold });
     return (
     // ВАЖНО: элемент с ref должен выводиться всегда (без условий), т.к. он нужен для блокировки прокрутки
-    react_1.default.createElement("div", Object.assign({ ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, { [constants_1.BSL_IGNORE_ATTR]: true }), loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children)));
+    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)));
 });
 /**
  * Слот футера экрана.

package/screen/utils.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { LoadingOverlayProps } from '../loading-overlay';
-export interface ScreenInnerProps {
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export interface ScreenInnerProps extends WithPageScrollLock {
     /** Нужно ли выводить вместо содержимого состояние загрузки. */
     loading?: boolean;
     /** Свойства компонента LoadingOverlay. */

package/select/index.d.ts

@@ -1,33 +1,2 @@
-import React from 'react';
-import { TextFieldProps } from '../text-field';
-declare type Size = 's' | 'm' | 'l' | 'xl';
-export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
-    /** Нужно ли выводить состояние загрузки списка. */
-    loading?: boolean;
-    /** Сработает при открытии/закрытии меню. */
-    onMenuToggle?: (opened: boolean) => void;
-    /** Сработает при выборе. */
-    onSelect?: (option: any) => void;
-    /** Список опций. */
-    options: any[];
-    /** Размер для DropdownItem. */
-    optionSize?: Size;
-    /** Вернет содержимое опции. */
-    renderOption?: (option: any) => React.ReactNode;
-    /** Стили. */
-    style?: React.CSSProperties;
-    endAdornment?: TextFieldProps['endAdornment'] | ((opened: boolean) => React.ReactNode);
-}
-/**
- * Выводит иконку стрелки для поля Select по умолчанию.
- * @param opened Открыт ли список опций.
- * @return Элемент.
- */
-export declare const renderDefaultArrow: (opened: boolean) => JSX.Element;
-/**
- * Поле выбора из списка.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, endAdornment, ...restProps }: SelectProps) => JSX.Element;
-export {};
+export type { SelectProps, SelectStyle } from './types';
+export { Select } from './select';