@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.41

package/README.md

@@ -0,0 +1,138 @@
+# UI-nucleons
+
+В этом проекте собраны UI-компоненты, реализующие правила дизайн-системы, а также компоненты и утилиты, которые помогают решать распространенные задачи разработки UI.
+
+## Использование
+
+### Установка
+
+```sh
+# с помощью npm
+npm i -S @sima-land/ui-nucleons
+
+# или с помощью yarn
+yarn add @sima-land/ui-nucleons
+```
+
+### Настройка среды
+
+В библиотеке используются:
+
+- импорты изображений (jpg, png...) как url/base64
+- импорты стилей
+- импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.m.scss`)
+
+#### Для работы с Webpack
+
+Необходимо сконфигурировать сборку подобным образом:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // стили
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                auto: /\.(module|m)\.(css|scss)$/,
+                localIdentName: '[name]__[local]--[hash:hex:3]',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+
+      // картинки
+      {
+        test: /\.(apng|avif|gif|jpg|jpeg|png|webp)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+};
+```
+
+#### Для работы с Jest
+
+Необходимо сконфигурировать среду Jest подобно тому как это сделано в данном репозитории:
+
+```js
+export default {
+  // ...прочее
+
+  transform: {
+    // css-модули
+    '\\.(module|m)\\.(css|scss)$': 'jest-css-modules-transform',
+
+    // обычные стили
+    '(?<!(.+\\.(module|m)))(\\.css|\\.scss)$': '<rootDir>/.jest/transforms/empty.js',
+
+    // asset'ы
+    '\\.(apng|avif|gif|jpg|jpeg|png|webp)$': '<rootDir>/.jest/transforms/asset.js',
+  },
+  transformIgnorePatterns: [
+    // из некоторых пакетов мы берем стили так что игнорируем только скрипты
+    '/node_modules/.+js$',
+  ],
+};
+```
+
+#### Декларации типов для TypeScript
+
+в `src/custom.d.ts` необходимо указать:
+
+```ts
+// css-модули
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module '*.m.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+// css-модули с синтаксисом SCSS
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module '*.m.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+```
+
+## Разработка и поддержка
+
+### Принципы библиотеки
+
+- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
+- компонент интерфейса не должен иметь внешних отступов по умолчанию
+
+### Структура библиотеки
+
+```bash
+src
+├── something # директория с компонентом
+│   ├── index.ts # точка входа с публичными экспортами
+│   ├── something.tsx # исходный код компонента
+│   ├── something.m.scss # стили компонента (при наличии)
+│   ├── something-util.scss # scss-утилиты для кастомизации (при наличии)
+│   ├── types.ts # типы (при наличии)
+│   ├── __test__
+│   │   └── something.test.tsx
+│   └── __stories__
+│       └── something.stories.tsx
+├── helpers # общие утилиты (для использования вне библиотеки)
+├── hooks # общие react-хуки (для использования вне библиотеки)
+├── test-utils # утилиты для упрощения unit-тестирования составляющих данной библиотеки
+└── _internal # внутренние скрипты для использования только в рамках данной библиотеки
+```

package/_internal/custom-scrollbar/custom-scrollbar.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { UseOverlayScrollbarsInitialization, UseOverlayScrollbarsInstance } from 'overlayscrollbars-react';
+import type { CustomScrollbarProps } from './types';
+import 'overlayscrollbars/overlayscrollbars.css';
+/**
+ * Блок с кастомными полосами прокрутки.
+ * @param props Свойства.
+ * @return Элемент.
+ * @todo Переименовать в StyledScrollbars и вынести из _internal?
+ */
+export declare function CustomScrollbar({ children, style, className, overflow, rootRef, viewportRef, viewportProps, ...restProps }: CustomScrollbarProps): import("react/jsx-runtime").JSX.Element;
+/** @inheritdoc */
+export declare function useOverlayScrollbarsInit(initialize: UseOverlayScrollbarsInitialization, getInstance: UseOverlayScrollbarsInstance, rootRef: RefObject<HTMLDivElement>, viewportRef: RefObject<HTMLDivElement>): void;

package/_internal/custom-scrollbar/custom-scrollbar.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomScrollbar = CustomScrollbar;
+exports.useOverlayScrollbarsInit = useOverlayScrollbarsInit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const overlayscrollbars_react_1 = require("overlayscrollbars-react");
+const hooks_1 = require("../../hooks");
+const bind_1 = __importDefault(require("classnames/bind"));
+// ВАЖНО: сначала стили overlayscrollbars затем местные для правильной специфичности
+require("overlayscrollbars/overlayscrollbars.css");
+const custom_scrollbar_m_scss_1 = __importDefault(require("./custom-scrollbar.m.scss"));
+const cx = bind_1.default.bind(custom_scrollbar_m_scss_1.default);
+/**
+ * Блок с кастомными полосами прокрутки.
+ * @param props Свойства.
+ * @return Элемент.
+ * @todo Переименовать в StyledScrollbars и вынести из _internal?
+ */
+function CustomScrollbar({ children, style, className, overflow, rootRef, viewportRef, viewportProps, ...restProps }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(rootRef, () => ref.current?.getElement());
+    (0, react_1.useImperativeHandle)(viewportRef, () => ref.current?.osInstance()?.elements().viewport);
+    return ((0, jsx_runtime_1.jsx)(OverlayScrollbarsComponent, { ...restProps, ref: ref, defer: false, style: style, className: cx('root', className), viewportProps: viewportProps, options: {
+            // костыль из-за https://github.com/KingSora/OverlayScrollbars/issues/586
+            ...(overflow && { overflow }),
+            scrollbars: {
+                theme: cx('theme'),
+            },
+        }, events: {
+            /** @inheritdoc */
+            initialized(instance) {
+                // ВАЖНО: в новой версии на viewport автоматически ставится tabindex
+                // это ломает Select так как у него blur на корневом элементе Dropdown
+                // поэтому принудительно удаляем tabindex с элемента
+                // подсказали тут: https://github.com/KingSora/OverlayScrollbars/discussions/638#discussioncomment-9494642
+                // @todo возможно стоит переделать Select так чтобы фокус был на viewport - тогда этот костыль будет не нужен
+                instance.elements().viewport.removeAttribute('tabindex');
+            },
+        }, children: children }));
+}
+/**
+ * Аналог OverlayScrollbarsComponent из пакета 'overlayscrollbars-react'.
+ * Использует useIsomorphicLayoutEffect вместо useEffect.
+ */
+const OverlayScrollbarsComponent = (0, react_1.forwardRef)((props, ref) => {
+    const { options, events, defer, children, viewportProps, ...rootProps } = props;
+    const rootRef = (0, react_1.useRef)(null);
+    const viewportRef = (0, react_1.useRef)(null);
+    const [initialize, getInstance] = (0, overlayscrollbars_react_1.useOverlayScrollbars)({ options, events, defer });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        /** @inheritdoc */
+        osInstance() {
+            return getInstance();
+        },
+        /** @inheritdoc */
+        getElement() {
+            return rootRef.current;
+        },
+    }), [initialize, getInstance]);
+    useOverlayScrollbarsInit(initialize, getInstance, rootRef, viewportRef);
+    return ((0, jsx_runtime_1.jsx)("div", { ...rootProps, ref: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ...viewportProps, ref: viewportRef, children: children }) }));
+});
+/** @inheritdoc */
+function useOverlayScrollbarsInit(initialize, getInstance, rootRef, viewportRef) {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const { current: root } = rootRef;
+        const { current: viewport } = viewportRef;
+        if (root && viewport) {
+            initialize({
+                target: root,
+                elements: {
+                    viewport,
+                    content: viewport,
+                },
+            });
+        }
+        return () => {
+            getInstance()?.destroy();
+        };
+    }, [initialize, getInstance]);
+}
+//# sourceMappingURL=custom-scrollbar.js.map

package/_internal/custom-scrollbar/custom-scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-scrollbar.js","sourceRoot":"","sources":["../../../src/_internal/custom-scrollbar/custom-scrollbar.tsx"],"names":[],"mappings":"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"}

package/_internal/custom-scrollbar/custom-scrollbar.m.scss

@@ -0,0 +1,49 @@
+@use '../../colors';
+
+.root {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.theme:global(.os-scrollbar) {
+  --os-size: 12px;
+  --os-padding-axis: 4px;
+  --os-padding-perpendicular: 0;
+
+  --os-track-border: none;
+  --os-track-border-hover: none;
+  --os-track-border-active: none;
+  --os-track-border-radius: 0;
+  --os-track-bg: none;
+  --os-track-bg-hover: none;
+  --os-track-bg-active: none;
+
+  --os-handle-border-radius: 2px;
+  --os-handle-bg: #{colors.$basic-gray12};
+  --os-handle-bg-hover: #{colors.$basic-gray24};
+  --os-handle-bg-active: #{colors.$basic-gray24};
+  --os-handle-border: none;
+  --os-handle-border-hover: none;
+  --os-handle-border-active: none;
+  --os-handle-min-size: 33px;
+  --os-handle-max-size: none;
+  --os-handle-perpendicular-size: 4px;
+  --os-handle-perpendicular-size-hover: 4px;
+  --os-handle-perpendicular-size-active: 4px;
+  --os-handle-interactive-area-offset: 0;
+}
+
+.theme :global(.os-scrollbar-handle) {
+  transition:
+    opacity 0.15s,
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+.theme:global(.os-scrollbar-horizontal) :global(.os-scrollbar-handle) {
+  margin-bottom: 4px;
+}
+
+.theme:global(.os-scrollbar-vertical) :global(.os-scrollbar-handle) {
+  margin-right: 4px;
+}

package/_internal/custom-scrollbar/index.d.ts

@@ -1,42 +1,2 @@
-import { CSSProperties, ReactNode, Ref, UIEvent as ReactUIEvent } from 'react';
-import { OverlayScrollbarsComponent, OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
-import 'overlayscrollbars/css/OverlayScrollbars.css';
-type Options = NonNullable<OverlayScrollbarsComponentProps['options']>;
-export interface CustomScrollbarProps {
-    /** Стили. */
-    style?: CSSProperties;
-    /** Класс. */
-    className?: string;
-    /** Содержимое. */
-    children?: ReactNode;
-    /** Опции переполнения. */
-    overflow?: Options['overflowBehavior'];
-    /** Необходимо поставить true если нужно использовать внутри flexbox-родителя. */
-    inFlexBox?: boolean;
-    /** Сработает при полной прокрутке. */
-    onFullScroll?: () => void;
-    /** Запас для определения полной прокрутки. */
-    fullScrollThreshold?: number;
-    /** Реф для экземпляра компонента OverlayScrollbarsComponent. */
-    osComponentRef?: Ref<OverlayScrollbarsComponent>;
-}
-/**
- * Компонент блока с кастомными полосами прокрутки по гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function CustomScrollbar({ osComponentRef, style, className, children, overflow, inFlexBox, onFullScroll, fullScrollThreshold, }: CustomScrollbarProps): JSX.Element;
-/**
- * Возвращает обработчик прокрутки, который вызовет callback при полной прокрутке.
- * @param callback Callback.
- * @param threshold Запас.
- * @return Обработчик.
- */
-export declare function useFullScroll(callback: VoidFunction | undefined, threshold?: number): (event: UIEvent | ReactUIEvent | undefined) => void;
-/**
- * Получив OverlayScrollbarsComponent вернет элемент-viewport или null.
- * @param component Экземпляр OverlayScrollbarsComponent.
- * @return Элемент или null.
- */
-export declare function getViewport(component: OverlayScrollbarsComponent | undefined | null): HTMLElement | null;
-export {};
+export type { CustomScrollbarProps } from './types';
+export { CustomScrollbar } from './custom-scrollbar';

package/_internal/custom-scrollbar/index.js

@@ -1,78 +1,6 @@
 "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.getViewport = exports.useFullScroll = exports.CustomScrollbar = void 0;
-const react_1 = __importStar(require("react"));
-const overlayscrollbars_react_1 = require("overlayscrollbars-react");
-const bind_1 = __importDefault(require("classnames/bind"));
-const custom_scrollbar_module_scss_1 = __importDefault(require("./custom-scrollbar.module.scss"));
-require("overlayscrollbars/css/OverlayScrollbars.css");
-const identity_1 = require("../../hooks/identity");
-const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
-/**
- * Компонент блока с кастомными полосами прокрутки по гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-function CustomScrollbar({ osComponentRef, style, className, children, overflow, inFlexBox = false, onFullScroll, fullScrollThreshold, }) {
-    const onScrollStop = useFullScroll(onFullScroll, fullScrollThreshold);
-    return (react_1.default.createElement(overlayscrollbars_react_1.OverlayScrollbarsComponent, { ref: osComponentRef, style: style, className: cx('custom-scrollbar', className, { 'os-host-flexbox': inFlexBox }), options: {
-            overflowBehavior: overflow,
-            callbacks: { onScrollStop },
-        } }, children));
-}
-exports.CustomScrollbar = CustomScrollbar;
-/**
- * Возвращает обработчик прокрутки, который вызовет callback при полной прокрутке.
- * @param callback Callback.
- * @param threshold Запас.
- * @return Обработчик.
- */
-function useFullScroll(callback, threshold = 16) {
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    // ВАЖНО: overlayscrollbars не реагирует на замену callback'а onScrollStop на undefined поэтому проверяем сами
-    const handleScrollStop = (0, react_1.useMemo)(() => (event) => {
-        var _a;
-        const el = event === null || event === void 0 ? void 0 : event.target;
-        el instanceof Element &&
-            el.scrollTop >= el.scrollHeight - el.clientHeight - threshold &&
-            ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef));
-    }, []);
-    return handleScrollStop;
-}
-exports.useFullScroll = useFullScroll;
-/**
- * Получив OverlayScrollbarsComponent вернет элемент-viewport или null.
- * @param component Экземпляр OverlayScrollbarsComponent.
- * @return Элемент или null.
- */
-function getViewport(component) {
-    var _a;
-    return ((_a = component === null || component === void 0 ? void 0 : component.osInstance()) === null || _a === void 0 ? void 0 : _a.getElements().viewport) || null;
-}
-exports.getViewport = getViewport;
+exports.CustomScrollbar = void 0;
+var custom_scrollbar_1 = require("./custom-scrollbar");
+Object.defineProperty(exports, "CustomScrollbar", { enumerable: true, get: function () { return custom_scrollbar_1.CustomScrollbar; } });
+//# sourceMappingURL=index.js.map

package/_internal/custom-scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/_internal/custom-scrollbar/index.ts"],"names":[],"mappings":";;;AACA,uDAAqD;AAA5C,mHAAA,eAAe,OAAA"}

package/_internal/custom-scrollbar/types.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { PartialOptions } from 'overlayscrollbars';
+export interface CustomScrollbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Стили. */
+    style?: CSSProperties;
+    /** Класс. */
+    className?: string;
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Опции переполнения. */
+    overflow?: PartialOptions['overflow'];
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Реф внутреннего элемента с прокруткой. */
+    viewportRef?: Ref<HTMLDivElement>;
+    /** Свойства внутреннего элемента с прокруткой. */
+    viewportProps?: HTMLAttributes<HTMLDivElement>;
+}

package/{hooks/breakpoint → _internal/custom-scrollbar}/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/_internal/custom-scrollbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/_internal/custom-scrollbar/types.ts"],"names":[],"mappings":""}

package/_internal/lifecycle/index.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+/**
+ * Обертка, позволяющая следить за жизненным циклом компонента.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Lifecycle({ children, onMount, onUnmount, }: {
+    children?: ReactNode;
+    onMount?: VoidFunction;
+    onUnmount?: VoidFunction;
+}): import("react/jsx-runtime").JSX.Element;

package/_internal/lifecycle/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lifecycle = Lifecycle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * Обертка, позволяющая следить за жизненным циклом компонента.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Lifecycle({ 
+// @todo onMountSync (useLayoutEffect)
+children, onMount, onUnmount, }) {
+    (0, react_1.useEffect)(() => {
+        onMount?.();
+        return () => {
+            onUnmount?.();
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+//# sourceMappingURL=index.js.map

package/_internal/lifecycle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/_internal/lifecycle/index.tsx"],"names":[],"mappings":";;AAOA,8BAmBC;;AA1BD,iCAA6C;AAE7C;;;;GAIG;AACH,SAAgB,SAAS,CAAC;AACxB,sCAAsC;AACtC,QAAQ,EACR,OAAO,EACP,SAAS,GAKV;IACC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,EAAE,EAAE,CAAC;QAEZ,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,EAAE,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}

package/_internal/page-scroll-lock/adapters/body-scroll-lock.d.ts

@@ -1,5 +1,5 @@
 import type { PageScrollLockAdapter } from '../types';
-import { BodyScrollOptions } from 'body-scroll-lock';
+import { disableBodyScroll, enableBodyScroll, BodyScrollOptions } from 'body-scroll-lock-upgrade';
 /**
  * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
  * Атрибут устанавливается на элемент в случае, если
@@ -7,22 +7,25 @@ import { BodyScrollOptions } from 'body-scroll-lock';
  */
 export declare const BSL_IGNORE_ATTR = "data-bsl-ignore";
 /** Адаптер блокировки прокрутки использующий BSL. */
-export declare class PageScrollLock implements PageScrollLockAdapter {
+export declare class PageScrollLockAdapterBSL implements PageScrollLockAdapter {
     private element;
     private options?;
-    private lib;
+    lib: {
+        disableBodyScroll: (...args: Parameters<typeof disableBodyScroll>) => void;
+        enableBodyScroll: (...args: Parameters<typeof enableBodyScroll>) => void;
+    };
     /**
      * Конструктор.
      * @param element Целевой элемент для которого надо сохранить прокрутку.
      * @param options Опции блокировки.
      */
-    constructor(element: Element, options?: BodyScrollOptions);
+    constructor(element: HTMLElement, options?: BodyScrollOptions);
     /**
      * Позволяет заменить библиотеку body-scroll-lock.
      * Полезен для использования версии BSL, отличной от той что используется в библиотеке.
      * @param lib Библиотека body-scroll-lock.
      */
-    replaceLib(lib: PageScrollLock['lib']): void;
+    replaceLib(lib: PageScrollLockAdapterBSL['lib']): void;
     /** @inheritdoc */
     lock(): void;
     /** @inheritdoc */

package/_internal/page-scroll-lock/adapters/body-scroll-lock.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allowTouchMove = exports.PageScrollLock = exports.BSL_IGNORE_ATTR = void 0;
-const body_scroll_lock_1 = require("body-scroll-lock");
+exports.allowTouchMove = exports.PageScrollLockAdapterBSL = exports.BSL_IGNORE_ATTR = void 0;
+const body_scroll_lock_upgrade_1 = require("body-scroll-lock-upgrade");
 /**
  * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
  * Атрибут устанавливается на элемент в случае, если
@@ -9,7 +9,10 @@ const body_scroll_lock_1 = require("body-scroll-lock");
  */
 exports.BSL_IGNORE_ATTR = 'data-bsl-ignore';
 /** Адаптер блокировки прокрутки использующий BSL. */
-class PageScrollLock {
+class PageScrollLockAdapterBSL {
+    element;
+    options;
+    lib;
     /**
      * Конструктор.
      * @param element Целевой элемент для которого надо сохранить прокрутку.
@@ -19,8 +22,8 @@ class PageScrollLock {
         this.element = element;
         this.options = options;
         this.lib = {
-            disableBodyScroll: body_scroll_lock_1.disableBodyScroll,
-            enableBodyScroll: body_scroll_lock_1.enableBodyScroll,
+            disableBodyScroll: body_scroll_lock_upgrade_1.disableBodyScroll,
+            enableBodyScroll: body_scroll_lock_upgrade_1.enableBodyScroll,
         };
     }
     /**
@@ -33,14 +36,17 @@ class PageScrollLock {
     }
     /** @inheritdoc */
     lock() {
-        this.lib.disableBodyScroll(this.element, Object.assign(Object.assign({}, this.options), { allowTouchMove: exports.allowTouchMove }));
+        this.lib.disableBodyScroll(this.element, {
+            ...this.options,
+            allowTouchMove: exports.allowTouchMove,
+        });
     }
     /** @inheritdoc */
     unlock() {
         this.lib.enableBodyScroll(this.element);
     }
 }
-exports.PageScrollLock = PageScrollLock;
+exports.PageScrollLockAdapterBSL = PageScrollLockAdapterBSL;
 /**
  * Проверяет необходимость блокировки дочерних элементов в прокручиваемом элементе.
  * Необходима для того, чтобы в прокручиваемых контейнерах вложенные прокручиваемые элементы,
@@ -50,7 +56,7 @@ exports.PageScrollLock = PageScrollLock;
  * @return Нужно ли позволить перетаскивание элемента.
  */
 const allowTouchMove = (startEl) => {
-    let el = startEl;
+    let el = startEl instanceof Element ? startEl : null;
     while (el && el !== document.body) {
         if (el.getAttribute(exports.BSL_IGNORE_ATTR) !== null) {
             return true;
@@ -60,3 +66,4 @@ const allowTouchMove = (startEl) => {
     return false;
 };
 exports.allowTouchMove = allowTouchMove;
+//# sourceMappingURL=body-scroll-lock.js.map

package/_internal/page-scroll-lock/adapters/body-scroll-lock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"body-scroll-lock.js","sourceRoot":"","sources":["../../../../src/_internal/page-scroll-lock/adapters/body-scroll-lock.ts"],"names":[],"mappings":";;;AACA,uEAAkG;AAElG;;;;GAIG;AACU,QAAA,eAAe,GAAG,iBAAiB,CAAC;AAEjD,qDAAqD;AACrD,MAAa,wBAAwB;IAC3B,OAAO,CAAc;IACrB,OAAO,CAAqB;IAEpC,GAAG,CAGD;IAEF;;;;OAIG;IACH,YAAY,OAAoB,EAAE,OAA2B;QAC3D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG;YACT,iBAAiB,EAAjB,4CAAiB;YACjB,gBAAgB,EAAhB,2CAAgB;SACjB,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,UAAU,CAAC,GAAoC;QAC7C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACjB,CAAC;IAED,kBAAkB;IAClB,IAAI;QACF,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE;YACvC,GAAG,IAAI,CAAC,OAAO;YACf,cAAc,EAAd,sBAAc;SACf,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;CACF;AA5CD,4DA4CC;AAED;;;;;;;GAOG;AACI,MAAM,cAAc,GAAkD,CAAC,OAAO,EAAW,EAAE;IAChG,IAAI,EAAE,GAAiC,OAAO,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEnF,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,EAAE,CAAC,YAAY,CAAC,uBAAe,CAAC,KAAK,IAAI,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC;IACxB,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAZW,QAAA,cAAc,kBAYzB"}

package/_internal/page-scroll-lock/adapters/ui-nucleons.d.ts

@@ -1,8 +1,8 @@
 import type { PageScrollLockAdapter, PageScrollLockOptions } from '../types';
 /** Адаптер блокировки прокрутки использующий внутреннее решение ui-nucleons. */
-export declare class PageScrollLock implements PageScrollLockAdapter {
-    private options?;
-    private bodyStyle?;
+export declare class PageScrollLockAdapterNucleons implements PageScrollLockAdapter {
+    protected options?: PageScrollLockOptions;
+    protected bodyStyle?: StyleAffect;
     /**
      * Конструктор.
      * @param options Опции.
@@ -16,10 +16,35 @@ export declare class PageScrollLock implements PageScrollLockAdapter {
      * Определяет заблокирована ли прокрутка.
      * @return True если прокрутка заблокирована.
      */
-    private isLocked;
+    protected isLocked(): boolean;
     /**
      * Определяет ширину полосы прокрутки.
      * @return Ширина в пикселях.
      */
-    private getScrollbarWidth;
+    protected getScrollbarWidth(): number;
+}
+/** Промежуточный слой для установки стилей на элемент с возможностью восстановления состояния. */
+export declare class StyleAffect {
+    protected element: HTMLElement;
+    protected changes: Map<string, {
+        oldValue: string;
+        oldPriority: string | undefined;
+    }>;
+    /**
+     * @param element Целевой элемент.
+     */
+    constructor(element: HTMLElement);
+    /**
+     * Устанавливает стили на элемент и запоминает предыдущее значение.
+     * @param prop Имя свойства.
+     * @param value Значение.
+     * @param priority Приоритет.
+     * @return Экземпляр.
+     */
+    set(prop: string, value: string | null, priority?: string): this;
+    /**
+     * Откатывает стили.
+     * @return Экземпляр.
+     */
+    restore(): this;
 }