@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

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

@@ -1,14 +1,14 @@
-import React from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
-declare type Options = NonNullable<OverlayScrollbarsComponentProps['options']>;
+type Options = NonNullable<OverlayScrollbarsComponentProps['options']>;
 export interface CustomScrollbarProps {
     /** Стили. */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Класс. */
     className?: string;
     /** Содержимое. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Опции переполнения. */
     overflow?: Options['overflowBehavior'];
     /** Необходимо поставить true если нужно использовать внутри flexbox-родителя. */
@@ -18,19 +18,25 @@ export interface CustomScrollbarProps {
     /** Запас для определения полной прокрутки. */
     fullScrollThreshold?: number;
     /** Реф для экземпляра компонента OverlayScrollbarsComponent. */
-    osComponentRef?: React.LegacyRef<OverlayScrollbarsComponent>;
+    osComponentRef?: Ref<OverlayScrollbarsComponent>;
 }
 /**
  * Компонент блока с кастомными полосами прокрутки по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const CustomScrollbar: ({ osComponentRef, style, className, children, overflow, inFlexBox, onFullScroll, fullScrollThreshold, }: CustomScrollbarProps) => JSX.Element;
+export declare function CustomScrollbar({ osComponentRef, style, className, children, overflow, inFlexBox, onFullScroll, fullScrollThreshold, }: CustomScrollbarProps): JSX.Element;
 /**
  * Возвращает обработчик прокрутки, который вызовет callback при полной прокрутке.
  * @param callback Callback.
  * @param threshold Запас.
  * @return Обработчик.
  */
-export declare const HandleFullScroll: (callback: () => void, threshold?: number) => (event: UIEvent | undefined) => void;
+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 {};

package/_internal/custom-scrollbar/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HandleFullScroll = exports.CustomScrollbar = void 0;
+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"));
@@ -15,14 +15,16 @@ const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const CustomScrollbar = ({ osComponentRef, style, className, children, overflow, inFlexBox = false, onFullScroll, fullScrollThreshold, }) => (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: (0, exports.HandleFullScroll)(onFullScroll, fullScrollThreshold),
-            }
-            : undefined,
-    } }, children));
+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 при полной прокрутке.
@@ -30,10 +32,22 @@ exports.CustomScrollbar = CustomScrollbar;
  * @param threshold Запас.
  * @return Обработчик.
  */
-const HandleFullScroll = (callback, threshold = 16) => (event) => {
-    const el = event === null || event === void 0 ? void 0 : event.target;
-    el instanceof Element &&
-        el.scrollTop >= el.scrollHeight - el.clientHeight - threshold &&
-        callback();
-};
+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;

package/_internal/dropdown-loading/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-declare type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'>;
+import { HTMLAttributes } from 'react';
+type DropdownLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children'>;
 /**
  * Плашка состояния загрузки для Dropdown.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const DropdownLoading: (props: Props) => JSX.Element;
+export declare function DropdownLoading(props: DropdownLoadingProps): JSX.Element;
 export {};

package/_internal/dropdown-loading/index.js

@@ -12,6 +12,8 @@ const index_module_scss_1 = __importDefault(require("./index.module.scss"));
  * @param props Свойства.
  * @return Элемент.
  */
-const DropdownLoading = (props) => (react_1.default.createElement("div", Object.assign({}, props, { className: index_module_scss_1.default.root }),
-    react_1.default.createElement(spinner_1.Spinner, { size: 'small' })));
+function DropdownLoading(props) {
+    return (react_1.default.createElement("div", Object.assign({}, props, { className: index_module_scss_1.default.root }),
+        react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's' })));
+}
 exports.DropdownLoading = DropdownLoading;

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

@@ -0,0 +1,39 @@
+import type { PageScrollLockAdapter } from '../types';
+import { BodyScrollOptions } from 'body-scroll-lock';
+/**
+ * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
+ * Атрибут устанавливается на элемент в случае, если
+ * прокручиваемый родитель элемента обрабатывается с помощью body-scroll-lock.
+ */
+export declare const BSL_IGNORE_ATTR = "data-bsl-ignore";
+/** Адаптер блокировки прокрутки использующий BSL. */
+export declare class PageScrollLock implements PageScrollLockAdapter {
+    private element;
+    private options?;
+    private lib;
+    /**
+     * Конструктор.
+     * @param element Целевой элемент для которого надо сохранить прокрутку.
+     * @param options Опции блокировки.
+     */
+    constructor(element: Element, options?: BodyScrollOptions);
+    /**
+     * Позволяет заменить библиотеку body-scroll-lock.
+     * Полезен для использования версии BSL, отличной от той что используется в библиотеке.
+     * @param lib Библиотека body-scroll-lock.
+     */
+    replaceLib(lib: PageScrollLock['lib']): void;
+    /** @inheritdoc */
+    lock(): void;
+    /** @inheritdoc */
+    unlock(): void;
+}
+/**
+ * Проверяет необходимость блокировки дочерних элементов в прокручиваемом элементе.
+ * Необходима для того, чтобы в прокручиваемых контейнерах вложенные прокручиваемые элементы,
+ * имеющие специальный атрибут, прокручивались нормально.
+ * @see {@link https://github.com/willmcpo/body-scroll-lock#more-complex}
+ * @param startEl Начальный элемент.
+ * @return Нужно ли позволить перетаскивание элемента.
+ */
+export declare const allowTouchMove: Required<BodyScrollOptions>['allowTouchMove'];

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

@@ -0,0 +1,62 @@
+"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");
+/**
+ * Имя атрибута, устанавливаемого на элемент, имеющий прокрутку.
+ * Атрибут устанавливается на элемент в случае, если
+ * прокручиваемый родитель элемента обрабатывается с помощью body-scroll-lock.
+ */
+exports.BSL_IGNORE_ATTR = 'data-bsl-ignore';
+/** Адаптер блокировки прокрутки использующий BSL. */
+class PageScrollLock {
+    /**
+     * Конструктор.
+     * @param element Целевой элемент для которого надо сохранить прокрутку.
+     * @param options Опции блокировки.
+     */
+    constructor(element, options) {
+        this.element = element;
+        this.options = options;
+        this.lib = {
+            disableBodyScroll: body_scroll_lock_1.disableBodyScroll,
+            enableBodyScroll: body_scroll_lock_1.enableBodyScroll,
+        };
+    }
+    /**
+     * Позволяет заменить библиотеку body-scroll-lock.
+     * Полезен для использования версии BSL, отличной от той что используется в библиотеке.
+     * @param lib Библиотека body-scroll-lock.
+     */
+    replaceLib(lib) {
+        this.lib = lib;
+    }
+    /** @inheritdoc */
+    lock() {
+        this.lib.disableBodyScroll(this.element, Object.assign(Object.assign({}, this.options), { allowTouchMove: exports.allowTouchMove }));
+    }
+    /** @inheritdoc */
+    unlock() {
+        this.lib.enableBodyScroll(this.element);
+    }
+}
+exports.PageScrollLock = PageScrollLock;
+/**
+ * Проверяет необходимость блокировки дочерних элементов в прокручиваемом элементе.
+ * Необходима для того, чтобы в прокручиваемых контейнерах вложенные прокручиваемые элементы,
+ * имеющие специальный атрибут, прокручивались нормально.
+ * @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(exports.BSL_IGNORE_ATTR) !== null) {
+            return true;
+        }
+        el = el.parentElement;
+    }
+    return false;
+};
+exports.allowTouchMove = allowTouchMove;

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

@@ -0,0 +1,25 @@
+import type { PageScrollLockAdapter, PageScrollLockOptions } from '../types';
+/** Адаптер блокировки прокрутки использующий внутреннее решение ui-nucleons. */
+export declare class PageScrollLock implements PageScrollLockAdapter {
+    private options?;
+    private bodyStyle?;
+    /**
+     * Конструктор.
+     * @param options Опции.
+     */
+    constructor(options?: PageScrollLockOptions);
+    /** @inheritdoc */
+    lock(): void;
+    /** @inheritdoc */
+    unlock(): void;
+    /**
+     * Определяет заблокирована ли прокрутка.
+     * @return True если прокрутка заблокирована.
+     */
+    private isLocked;
+    /**
+     * Определяет ширину полосы прокрутки.
+     * @return Ширина в пикселях.
+     */
+    private getScrollbarWidth;
+}

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageScrollLock = void 0;
+const MARK_ATTR = 'data-scroll-locked';
+/** Адаптер блокировки прокрутки использующий внутреннее решение ui-nucleons. */
+class PageScrollLock {
+    /**
+     * Конструктор.
+     * @param options Опции.
+     */
+    constructor(options) {
+        this.options = options;
+    }
+    /** @inheritdoc */
+    lock() {
+        var _a;
+        if (!this.isLocked()) {
+            const scrollTop = document.documentElement.scrollTop;
+            this.bodyStyle = new StyleAffect(document.body);
+            // устанавливаем width: 100vw так как body сжимается при установке position: fixed
+            // @todo при необходимости дать возможность задавать установку ширины самостоятельно
+            this.bodyStyle.set('width', '100vw').set('position', 'fixed').set('top', `${-scrollTop}px`);
+            if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.reserveScrollBarGap) {
+                const gap = this.getScrollbarWidth();
+                gap > 0 && this.bodyStyle.set('padding-right', `${gap}px`);
+            }
+            document.body.setAttribute(MARK_ATTR, 'true');
+        }
+    }
+    /** @inheritdoc */
+    unlock() {
+        var _a;
+        if (this.isLocked()) {
+            const { body } = document;
+            const parsed = parseFloat(body.style.getPropertyValue('top').replace(/[A-z]*/g, '')) || 0;
+            (_a = this.bodyStyle) === null || _a === void 0 ? void 0 : _a.restore();
+            window.scrollTo(0, -parsed);
+            document.body.removeAttribute(MARK_ATTR);
+        }
+    }
+    /**
+     * Определяет заблокирована ли прокрутка.
+     * @return True если прокрутка заблокирована.
+     */
+    isLocked() {
+        return document.body.hasAttribute(MARK_ATTR);
+    }
+    /**
+     * Определяет ширину полосы прокрутки.
+     * @return Ширина в пикселях.
+     */
+    getScrollbarWidth() {
+        // https://javascript.info/task/scrollbar-width
+        const div = document.createElement('div');
+        div.style.overflowY = 'scroll';
+        div.style.width = '50px';
+        div.style.height = '50px';
+        // must be inserted into body, otherwise sizes will be zero
+        document.body.append(div);
+        const scrollBarWidth = div.offsetWidth - div.clientWidth;
+        div.remove();
+        return scrollBarWidth;
+    }
+}
+exports.PageScrollLock = PageScrollLock;
+/** Промежуточный слой для установки стилей на элемент с возможностью восстановления состояния. */
+class StyleAffect {
+    /**
+     * @param element Целевой элемент.
+     */
+    constructor(element) {
+        this.element = element;
+        this.changes = new Map();
+    }
+    /**
+     * Устанавливает стили на элемент и запоминает предыдущее значение.
+     * @param prop Имя свойства.
+     * @param value Значение.
+     * @param priority Приоритет.
+     * @return Экземпляр.
+     */
+    set(prop, value, priority) {
+        if (!this.changes.has(prop)) {
+            this.changes.set(prop, {
+                oldValue: this.element.style.getPropertyValue(prop),
+                oldPriority: this.element.style.getPropertyPriority(prop),
+            });
+        }
+        this.element.style.setProperty(prop, value, priority);
+        return this;
+    }
+    /**
+     * Откатывает стили.
+     * @return Экземпляр.
+     */
+    restore() {
+        for (const [prop, { oldValue, oldPriority }] of this.changes) {
+            this.element.style.setProperty(prop, oldValue, oldPriority);
+        }
+        this.changes.clear();
+        return this;
+    }
+}

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

@@ -0,0 +1,13 @@
+/// <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;

package/_internal/page-scroll-lock/context.js

@@ -0,0 +1,54 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageScrollContext = exports.PageScrollProvider = void 0;
+const react_1 = __importStar(require("react"));
+const body_scroll_lock_1 = require("./adapters/body-scroll-lock");
+const PageScrollContext = (0, react_1.createContext)(null);
+const DEFAULTS = {
+    adapter: (element, options) => new body_scroll_lock_1.PageScrollLock(element, options),
+};
+/**
+ * Провайдер реализации блокировки прокрутки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PageScrollProvider({ children, adapter }) {
+    const contextValue = (0, react_1.useContext)(PageScrollContext);
+    if (contextValue !== null) {
+        throw Error('PageScrollContext: only one provider allowed in jsx tree');
+    }
+    return react_1.default.createElement(PageScrollContext.Provider, { value: { adapter } }, children);
+}
+exports.PageScrollProvider = PageScrollProvider;
+/**
+ * Хук использования реализации блокировки прокрутки.
+ * @return Реализация.
+ */
+function usePageScrollContext() {
+    const context = (0, react_1.useContext)(PageScrollContext);
+    return context || DEFAULTS;
+}
+exports.usePageScrollContext = usePageScrollContext;

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

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { BodyScrollOptions } from 'body-scroll-lock';
+interface HookOptions extends Pick<BodyScrollOptions, 'reserveScrollBarGap'> {
+    lockEnabled?: boolean;
+}
+/**
+ * Хук управления блокировкой прокрутки body.
+ * @param ref Ref прокручиваемого элемента для которого нужно отключить прокрутку body.
+ * @param options Опции.
+ */
+export declare function usePageScrollLock(ref: RefObject<HTMLElement>, options?: HookOptions): void;
+export {};

package/_internal/page-scroll-lock/hook.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageScrollLock = void 0;
+const hooks_1 = require("../../hooks");
+const context_1 = require("./context");
+const DEFAULTS = {
+    lockEnabled: true,
+    reserveScrollBarGap: true,
+};
+/**
+ * Хук управления блокировкой прокрутки body.
+ * @param ref Ref прокручиваемого элемента для которого нужно отключить прокрутку body.
+ * @param options Опции.
+ */
+function usePageScrollLock(ref, options = DEFAULTS) {
+    const { adapter } = (0, context_1.usePageScrollContext)();
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const element = ref.current;
+        if (element && options.lockEnabled) {
+            const pageScroll = adapter(element, options);
+            pageScroll.lock();
+            return () => pageScroll.unlock();
+        }
+    }, [options === null || options === void 0 ? void 0 : options.lockEnabled, options === null || options === void 0 ? void 0 : options.reserveScrollBarGap]);
+}
+exports.usePageScrollLock = usePageScrollLock;

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

@@ -0,0 +1,4 @@
+export type { WithPageScrollLock, PageScrollLockAdapterFactory } from './types';
+export { BSL_IGNORE_ATTR } from './adapters/body-scroll-lock';
+export { usePageScrollLock } from './hook';
+export { PageScrollProvider } from './context';

package/_internal/page-scroll-lock/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageScrollProvider = exports.usePageScrollLock = exports.BSL_IGNORE_ATTR = void 0;
+var body_scroll_lock_1 = require("./adapters/body-scroll-lock");
+Object.defineProperty(exports, "BSL_IGNORE_ATTR", { enumerable: true, get: function () { return body_scroll_lock_1.BSL_IGNORE_ATTR; } });
+var hook_1 = require("./hook");
+Object.defineProperty(exports, "usePageScrollLock", { enumerable: true, get: function () { return hook_1.usePageScrollLock; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "PageScrollProvider", { enumerable: true, get: function () { return context_1.PageScrollProvider; } });

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { BodyScrollOptions } from 'body-scroll-lock';
+export interface PageScrollLockAdapterFactory {
+    (target: HTMLElement, options?: WithPageScrollLock['scrollDisableOptions']): PageScrollLockAdapter;
+}
+export interface PageScrollLockContextValue {
+    adapter: PageScrollLockAdapterFactory;
+}
+export interface PageScrollLockProviderProps extends PageScrollLockContextValue {
+    children?: ReactNode;
+}
+export interface PageScrollLockAdapter {
+    lock(): void;
+    unlock(): void;
+}
+export type PageScrollLockOptions = Pick<BodyScrollOptions, 'reserveScrollBarGap'>;
+export interface WithPageScrollLock {
+    /** Нужно ли выключать прокрутку body. */
+    withScrollDisable?: boolean;
+    /** Опции отключения прокрутки. */
+    scrollDisableOptions?: PageScrollLockOptions;
+}

package/_internal/readme.md

@@ -1,3 +1,5 @@
 # Внутренние компоненты
 
 Компоненты из этого каталога не должны использоваться за пределами данной библиотеки.
+
+Ломающие изменения содержимого данного каталога не влияют на мажорность релиза.

package/_internal/utils/dropdown.d.ts

@@ -1,6 +1,7 @@
 import { HEIGHTS } from '../../text-field';
 /**
  * Получив размер TextField, возвращает свойства для Dropdown для позиционирования строго под полем.
+ * @deprecated Эта функция больше не нужна так как позиционирование выполняется другим способом.
  * @param size Размер TextField.
  * @return Свойства для Dropdown.
  */

package/_internal/utils/dropdown.js

@@ -4,6 +4,7 @@ exports.placeDropdown = void 0;
 const text_field_1 = require("../../text-field");
 /**
  * Получив размер TextField, возвращает свойства для Dropdown для позиционирования строго под полем.
+ * @deprecated Эта функция больше не нужна так как позиционирование выполняется другим способом.
  * @param size Размер TextField.
  * @return Свойства для Dropdown.
  */

package/alert/alert.module.scss

@@ -1,34 +1,11 @@
-@use '../colors';
-
 .overlay {
-  position: fixed;
-
-  // для корректного отображения с динамическим viewport переменная --offsetTop должна быть доступна
-  top: var(--offsetTop, 0);
-  left: 0;
-  width: 100%;
-
-  // для корректного отображения с динамическим viewport переменная --vh должна быть доступна
-  height: calc(var(--vh, 1vh) * 100);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparentize(colors.$basic-gray87, 0.76);
 }
 
 .alert {
-  display: flex;
-  flex-direction: column;
   width: 288px;
-  background: #fff;
-  border-radius: 8px;
   max-height: 536px;
-}
-
-.header {
-  border-radius: 8px 8px 0 0;
-}
-
-.main {
-  flex-grow: 1;
+  margin: auto; // для корректной прокрутки во flex-контейнере
 }

package/alert/index.d.ts

@@ -1,27 +1,21 @@
 import React from 'react';
-import { NavBarProps } from '../nav-bar';
-import { WithBodyScrollLock } from '../_internal/body-scroll';
-export interface AlertProps extends WithBodyScrollLock {
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+import { CardContentProps } from '../card/slots';
+export interface AlertProps extends WithPageScrollLock {
     /** Основное содержимое. */
     children?: React.ReactNode;
-    /** Класс для блока всего содержимого. */
-    className?: string;
-    /** Содержимое "подвала". */
-    footer?: React.ReactNode;
-    /** Свойства компонента NavBar. */
-    navBarProps?: NavBarProps;
-    /** Заголовок. */
-    title?: string;
-    /** Нужна ли полоса между шапкой и основным содержимым. */
-    withDivideNavBar?: boolean;
-    /** Нужна ли шапка. */
-    withNavBar?: boolean;
     /** Будет вызвана при закрытии окна нажатием на затемнение. */
-    onClose?: () => void;
+    onClose?: VoidFunction;
 }
 /**
  * Компонент модального диалога.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Alert: ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar, withScrollDisable, scrollDisableOptions, onClose, }: AlertProps) => JSX.Element;
+export declare function Alert({ children, withScrollDisable, scrollDisableOptions, onClose, }: AlertProps): JSX.Element;
+/**
+ * Основной контент Alert.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function AlertBody({ children }: CardContentProps): JSX.Element;