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

package/README.md

@@ -0,0 +1,103 @@
+# 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%.module.scss`)
+
+#### Для работы с Webpack
+
+Необходимо сконфигурировать сборку подобным образом:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // стили
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                auto: /\.module\.(css|scss)$/,
+                localIdentName: '[name]__[local]--[hash:hex:3]',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+
+      // картинки
+      {
+        test: /\.(apng|avif|gif|jpg|jpeg|png|webp)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+};
+```
+
+#### Для работы с Jest
+
+Необходимо сконфигурировать среду Jest подобно тому как это сделано в данном репозитории (`jest.config.ts`).
+
+#### Декларации типов для TypeScript
+
+в `src/custom.d.ts` необходимо указать:
+
+```ts
+// css-модули
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+// css-модули с синтаксисом SCSS
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+```
+
+## Разработка и поддержка
+
+### Принципы библиотеки
+
+- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
+- компонент интерфейса не должен иметь внешних отступов по умолчанию
+
+### Структура библиотеки
+
+`src/` - директория со всеми компонентами библиотеки
+
+- `something/` - директория с компонентом
+  - `__stories__/`
+    - `index.stories.tsx` - описание компонента для storybook
+  - `__test__/`
+    - `index.test.tsx` - unit-тесты
+  - `index.tsx` - файл, с именованными экспортами компонента и интерфейса
+- `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
+- `hooks/` - общие react-хуки (для использования вне библиотеки)
+- `_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,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverlayScrollbarsInit = exports.CustomScrollbar = void 0;
+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_module_scss_1 = __importDefault(require("./custom-scrollbar.module.scss"));
+const cx = bind_1.default.bind(custom_scrollbar_module_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, () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getElement(); });
+    (0, react_1.useImperativeHandle)(viewportRef, () => { var _a, _b; return (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.osInstance()) === null || _b === void 0 ? void 0 : _b.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'),
+            },
+        }, children: children }));
+}
+exports.CustomScrollbar = CustomScrollbar;
+/**
+ * Аналог 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 () => {
+            var _a;
+            (_a = getInstance()) === null || _a === void 0 ? void 0 : _a.destroy();
+        };
+    }, [initialize, getInstance]);
+}
+exports.useOverlayScrollbarsInit = useOverlayScrollbarsInit;
+//# 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.module.scss

@@ -1,54 +1,49 @@
 @use '../../colors';
 
-// important используется здесь так как в storybook оригинальные стили почему-то не перекрываются
-$track-bound: 16px;
-
-.custom-scrollbar {
+.root {
   max-width: 100%;
   max-height: 100%;
 }
 
-.custom-scrollbar :global(.os-scrollbar-handle) {
-  border-radius: 2px !important;
-  background: colors.$basic-gray12 !important;
-  &:hover,
-  &:global(.active) {
-    background: colors.$basic-gray24 !important;
-  }
+.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;
 }
 
-.custom-scrollbar,
-.custom-scrollbar:global(.os-host-scrollbar-horizontal-hidden) {
-  > :global(.os-scrollbar-vertical) {
-    width: 12px !important;
-    padding: 0 !important;
-    top: $track-bound !important;
-    bottom: $track-bound !important;
-    :global(.os-scrollbar-handle) {
-      left: 4px !important;
-      width: 4px !important;
-      &::before {
-        left: -4px !important;
-        right: -4px !important;
-      }
-    }
-  }
+.theme:global(.os-scrollbar-horizontal) :global(.os-scrollbar-handle) {
+  margin-bottom: 4px;
 }
 
-.custom-scrollbar,
-.custom-scrollbar:global(.os-host-scrollbar-vertical-hidden) {
-  > :global(.os-scrollbar-horizontal) {
-    height: 12px !important;
-    padding: 0 !important;
-    left: $track-bound !important;
-    right: $track-bound !important;
-    :global(.os-scrollbar-handle) {
-      top: 4px !important;
-      bottom: 4px !important;
-      &::before {
-        top: -4px !important;
-        bottom: -4px !important;
-      }
-    }
-  }
+.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 } 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 HandleFullScroll(callback: () => void, threshold?: number): (event: UIEvent | 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,53 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getViewport = exports.HandleFullScroll = exports.CustomScrollbar = void 0;
-const react_1 = __importDefault(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 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, }) {
-    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: onFullScroll
-                ? {
-                    onScrollStop: HandleFullScroll(onFullScroll, fullScrollThreshold),
-                }
-                : undefined,
-        } }, children));
-}
-exports.CustomScrollbar = CustomScrollbar;
-/**
- * Возвращает обработчик прокрутки, который вызовет callback при полной прокрутке.
- * @param callback Callback.
- * @param threshold Запас.
- * @return Обработчик.
- */
-function HandleFullScroll(callback, threshold = 16) {
-    return (event) => {
-        const el = event === null || event === void 0 ? void 0 : event.target;
-        el instanceof Element &&
-            el.scrollTop >= el.scrollHeight - el.clientHeight - threshold &&
-            callback();
-    };
-}
-exports.HandleFullScroll = HandleFullScroll;
-/**
- * Получив 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,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lifecycle = void 0;
+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 === null || onMount === void 0 ? void 0 : onMount();
+        return () => {
+            onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+exports.Lifecycle = Lifecycle;
+//# 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":";;;;AAAA,iCAA6C;AAE7C;;;;GAIG;AACH,SAAgB,SAAS,CAAC;AACxB,sCAAsC;AACtC,QAAQ,EACR,OAAO,EACP,SAAS,GAKV;IACC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QAEZ,OAAO,GAAG,EAAE;YACV,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAnBD,8BAmBC"}

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';
 /**
  * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
  * Атрибут устанавливается на элемент в случае, если
@@ -7,10 +7,13 @@ 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 Целевой элемент для которого надо сохранить прокрутку.
@@ -22,7 +25,7 @@ export declare class PageScrollLock implements PageScrollLockAdapter {
      * Полезен для использования версии 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,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allowTouchMove = exports.PageScrollLock = exports.BSL_IGNORE_ATTR = void 0;
+exports.allowTouchMove = exports.PageScrollLockAdapterBSL = exports.BSL_IGNORE_ATTR = void 0;
 const body_scroll_lock_1 = require("body-scroll-lock");
 /**
  * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
@@ -9,7 +9,7 @@ const body_scroll_lock_1 = require("body-scroll-lock");
  */
 exports.BSL_IGNORE_ATTR = 'data-bsl-ignore';
 /** Адаптер блокировки прокрутки использующий BSL. */
-class PageScrollLock {
+class PageScrollLockAdapterBSL {
     /**
      * Конструктор.
      * @param element Целевой элемент для которого надо сохранить прокрутку.
@@ -33,14 +33,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;
 /**
  * Проверяет необходимость блокировки дочерних элементов в прокручиваемом элементе.
  * Необходима для того, чтобы в прокручиваемых контейнерах вложенные прокручиваемые элементы,
@@ -60,3 +63,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,uDAA0F;AAE1F;;;;GAIG;AACU,QAAA,eAAe,GAAG,iBAAiB,CAAC;AAEjD,qDAAqD;AACrD,MAAa,wBAAwB;IASnC;;;;OAIG;IACH,YAAY,OAAgB,EAAE,OAA2B;QACvD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG;YACT,iBAAiB,EAAjB,oCAAiB;YACjB,gBAAgB,EAAhB,mCAAgB;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,CAAC;IAE/C,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,CAAC,IAAI,EAAE;QACjC,IAAI,EAAE,CAAC,YAAY,CAAC,uBAAe,CAAC,KAAK,IAAI,EAAE;YAC7C,OAAO,IAAI,CAAC;SACb;QAED,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC;KACvB;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;
 }

package/_internal/page-scroll-lock/adapters/ui-nucleons.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageScrollLock = void 0;
+exports.StyleAffect = exports.PageScrollLockAdapterNucleons = void 0;
 const MARK_ATTR = 'data-scroll-locked';
 /** Адаптер блокировки прокрутки использующий внутреннее решение ui-nucleons. */
-class PageScrollLock {
+class PageScrollLockAdapterNucleons {
     /**
      * Конструктор.
      * @param options Опции.
@@ -62,7 +62,7 @@ class PageScrollLock {
         return scrollBarWidth;
     }
 }
-exports.PageScrollLock = PageScrollLock;
+exports.PageScrollLockAdapterNucleons = PageScrollLockAdapterNucleons;
 /** Промежуточный слой для установки стилей на элемент с возможностью восстановления состояния. */
 class StyleAffect {
     /**
@@ -101,3 +101,5 @@ class StyleAffect {
         return this;
     }
 }
+exports.StyleAffect = StyleAffect;
+//# sourceMappingURL=ui-nucleons.js.map

package/_internal/page-scroll-lock/adapters/ui-nucleons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-nucleons.js","sourceRoot":"","sources":["../../../../src/_internal/page-scroll-lock/adapters/ui-nucleons.ts"],"names":[],"mappings":"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"}

package/_internal/page-scroll-lock/context.d.ts

@@ -1,13 +1,3 @@
 /// <reference types="react" />
-import { PageScrollLockContextValue, PageScrollLockProviderProps } from './types';
-/**
- * Провайдер реализации блокировки прокрутки.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function PageScrollProvider({ children, adapter }: PageScrollLockProviderProps): JSX.Element;
-/**
- * Хук использования реализации блокировки прокрутки.
- * @return Реализация.
- */
-export declare function usePageScrollContext(): PageScrollLockContextValue;
+import { PageScrollLockContextValue } from './types';
+export declare const PageScrollLockContext: import("react").Context<PageScrollLockContextValue>;