@alfalab/core-components 1.18.0 → 2.0.0-beta.3

package/base-modal/esm/Component.js

@@ -0,0 +1,243 @@
+import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { ResizeObserver } from 'resize-observer';
+import { CSSTransition } from 'react-transition-group';
+import FocusLock from 'react-focus-lock';
+import { Portal } from '../../portal/esm';
+import { Backdrop } from '../../backdrop/esm';
+import { stackingOrder, Stack } from '../../stack/esm';
+import '../../global-store/esm';
+import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var styles = {"component":"base-modal__component_oa1o5","wrapper":"base-modal__wrapper_oa1o5","content":"base-modal__content_oa1o5","hidden":"base-modal__hidden_oa1o5","backdrop":"base-modal__backdrop_oa1o5","appear":"base-modal__appear_oa1o5","enter":"base-modal__enter_oa1o5","appearActive":"base-modal__appearActive_oa1o5","enterActive":"base-modal__enterActive_oa1o5","exit":"base-modal__exit_oa1o5","exitActive":"base-modal__exitActive_oa1o5","exitDone":"base-modal__exitDone_oa1o5"};
+require('./index.css');
+
+var BaseModalContext = React.createContext({
+    hasFooter: false,
+    hasHeader: false,
+    hasScroll: false,
+    headerHighlighted: false,
+    footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: function () { return null; },
+    contentRef: function () { return null; },
+    setHasHeader: function () { return null; },
+    setHasFooter: function () { return null; },
+    onClose: function () { return null; },
+});
+var BaseModal = forwardRef(function (_a, ref) {
+    var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
+    var _o = useState(!open), exited = _o[0], setExited = _o[1];
+    var _p = useState(false), hasScroll = _p[0], setHasScroll = _p[1];
+    var _q = useState(false), hasHeader = _q[0], setHasHeader = _q[1];
+    var _r = useState(false), hasFooter = _r[0], setHasFooter = _r[1];
+    var _s = useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
+    var _t = useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
+    var _u = useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
+    var componentNodeRef = useRef(null);
+    var wrapperRef = useRef(null);
+    var scrollableNodeRef = useRef(null);
+    var contentNodeRef = useRef(null);
+    var restoreContainerStylesRef = useRef(null);
+    var checkToHasScrollBar = function () {
+        if (scrollableNodeRef.current) {
+            var scrollExists = hasScrollbar(scrollableNodeRef.current);
+            setFooterHighlighted(scrollExists);
+            setHasScroll(scrollExists);
+        }
+    };
+    var shouldRender = keepMounted || open || !exited;
+    var getContainer = useCallback(function () {
+        return (container ? container() : document.body);
+    }, [container]);
+    var resizeObserver = useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
+    var addResizeHandle = useCallback(function () {
+        if (scrollableNodeRef.current)
+            resizeObserver.observe(scrollableNodeRef.current);
+        if (contentNodeRef.current)
+            resizeObserver.observe(contentNodeRef.current);
+    }, [resizeObserver]);
+    var removeResizeHandle = useCallback(function () {
+        resizeObserver.disconnect();
+    }, [resizeObserver]);
+    var contentRef = useCallback(function (node) {
+        if (node !== null) {
+            contentNodeRef.current = node;
+            resizeObserver.observe(node);
+            checkToHasScrollBar();
+        }
+    }, [resizeObserver]);
+    var handleScroll = useCallback(function () {
+        if (!scrollableNodeRef.current || !componentNodeRef.current)
+            return;
+        if (hasHeader) {
+            setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
+                componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
+        }
+        if (hasFooter) {
+            setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
+                componentNodeRef.current.getBoundingClientRect().bottom >=
+                    window.innerHeight);
+        }
+    }, [hasFooter, hasHeader, headerOffset]);
+    var handleClose = useCallback(function (event, reason) {
+        if (onClose) {
+            onClose(event, reason);
+        }
+        if (reason === 'backdropClick' && onBackdropClick) {
+            onBackdropClick(event);
+        }
+        if (reason === 'escapeKeyDown' && onEscapeKeyDown) {
+            onEscapeKeyDown(event);
+        }
+        return null;
+    }, [onBackdropClick, onClose, onEscapeKeyDown]);
+    var handleBackdropClick = function (event) {
+        if (!disableBackdropClick && event.target === wrapperRef.current) {
+            handleClose(event, 'backdropClick');
+        }
+    };
+    var handleKeyDown = useCallback(function (event) {
+        /*
+         * Чтобы сохранить дефолтное поведение элементов и событий форм,
+         * обработчик не устанавливает event.preventDefault()
+         */
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // Если есть обработчик escape на body
+        event.stopPropagation();
+        if (!disableEscapeKeyDown && handleClose) {
+            handleClose(event, 'escapeKeyDown');
+        }
+    }, [disableEscapeKeyDown, handleClose]);
+    var getScrollHandler = useCallback(function () {
+        if (scrollHandler === 'wrapper')
+            return wrapperRef.current;
+        if (scrollHandler === 'content')
+            return componentNodeRef.current;
+        return scrollHandler.current || wrapperRef.current;
+    }, [scrollHandler]);
+    var handleEntered = useCallback(function (node, isAppearing) {
+        scrollableNodeRef.current = getScrollHandler();
+        addResizeHandle();
+        if (scrollableNodeRef.current) {
+            scrollableNodeRef.current.addEventListener('scroll', handleScroll);
+            handleScroll();
+        }
+        if (transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+        if (onMount)
+            onMount();
+    }, [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps]);
+    var handleExited = useCallback(function (node) {
+        removeResizeHandle();
+        setExited(true);
+        if (scrollableNodeRef.current) {
+            scrollableNodeRef.current.removeEventListener('scroll', handleScroll);
+        }
+        if (transitionProps.onExited) {
+            transitionProps.onExited(node);
+        }
+        if (onUnmount)
+            onUnmount();
+        if (restoreContainerStylesRef.current) {
+            restoreContainerStylesRef.current();
+        }
+    }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
+    useEffect(function () {
+        if (open) {
+            handleContainer(getContainer());
+            restoreContainerStylesRef.current = function () {
+                restoreContainerStylesRef.current = null;
+                restoreContainerStyles(getContainer());
+            };
+        }
+    }, [getContainer, open]);
+    useEffect(function () {
+        if (open)
+            setExited(false);
+    }, [open]);
+    useEffect(function () {
+        return function () {
+            if (restoreContainerStylesRef.current) {
+                restoreContainerStylesRef.current();
+            }
+            resizeObserver.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var contextValue = useMemo(function () { return ({
+        hasHeader: hasHeader,
+        hasFooter: hasFooter,
+        hasScroll: hasScroll,
+        headerHighlighted: headerHighlighted,
+        footerHighlighted: footerHighlighted,
+        headerOffset: headerOffset,
+        setHeaderOffset: setHeaderOffset,
+        contentRef: contentRef,
+        setHasHeader: setHasHeader,
+        setHasFooter: setHasFooter,
+        onClose: handleClose,
+    }); }, [
+        contentRef,
+        hasHeader,
+        hasFooter,
+        hasScroll,
+        headerHighlighted,
+        footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
+        handleClose,
+    ]);
+    if (!shouldRender)
+        return null;
+    return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
+        var _a;
+        return (React.createElement(Portal, { getPortalContainer: container },
+            React.createElement(BaseModalContext.Provider, { value: contextValue },
+                React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+                    Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
+                            zIndex: computedZIndex,
+                        } }))),
+                    React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
+                            _a[styles.hidden] = !open && exited,
+                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            zIndex: computedZIndex,
+                        } },
+                        React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
+                            React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
+                                React.createElement("div", { className: cn(styles.content, contentClassName) }, children))))))));
+    }));
+});
+
+export { BaseModal, BaseModalContext };

package/base-modal/esm/index.css

@@ -0,0 +1,62 @@
+/* hash: mfxn1 */
+:root {
+    --color-light-bg-primary: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.base-modal__component_oa1o5 {
+    position: relative;
+    box-sizing: border-box;
+    background: var(--color-light-bg-primary);
+    margin: auto;
+    flex-shrink: 0;
+}
+.base-modal__wrapper_oa1o5 {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    outline: 0;
+}
+.base-modal__content_oa1o5 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.base-modal__hidden_oa1o5 {
+    display: none;
+}
+.base-modal__backdrop_oa1o5 {
+    z-index: 0;
+}
+.base-modal__appear_oa1o5,
+.base-modal__enter_oa1o5 {
+    opacity: 0;
+}
+.base-modal__appearActive_oa1o5,
+.base-modal__enterActive_oa1o5 {
+    opacity: 1;
+    transition: opacity 200ms ease-in;
+}
+.base-modal__exit_oa1o5 {
+    opacity: 1;
+}
+.base-modal__exitActive_oa1o5,
+.base-modal__exitDone_oa1o5 {
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+}

package/base-modal/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./utils";

package/base-modal/esm/index.js

@@ -0,0 +1,12 @@
+import 'react';
+import 'classnames';
+import 'react-merge-refs';
+import 'resize-observer';
+import 'react-transition-group';
+import 'react-focus-lock';
+import '../../portal/esm';
+import '../../backdrop/esm';
+import '../../stack/esm';
+import '../../global-store/esm';
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
+export { BaseModal, BaseModalContext } from './Component.js';

package/base-modal/esm/utils.d.ts

@@ -0,0 +1,6 @@
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement | undefined) => void;
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/esm/utils.js

@@ -0,0 +1,99 @@
+import { getModalStore } from '../../global-store/esm';
+
+function isScrolledToTop(target) {
+    return target.scrollTop <= 0;
+}
+function isScrolledToBottom(target) {
+    return target.scrollHeight - target.offsetHeight <= target.scrollTop;
+}
+function hasScrollbar(target) {
+    return target.scrollHeight > target.clientHeight;
+}
+var getScrollbarSize = function () {
+    var scrollDiv = document.createElement('div');
+    scrollDiv.style.width = '99px';
+    scrollDiv.style.height = '99px';
+    scrollDiv.style.position = 'absolute';
+    scrollDiv.style.top = '-9999px';
+    scrollDiv.style.overflow = 'scroll';
+    document.body.appendChild(scrollDiv);
+    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    document.body.removeChild(scrollDiv);
+    return scrollbarSize;
+};
+var isOverflowing = function (container) {
+    if (document.body === container) {
+        return window.innerWidth > document.documentElement.clientWidth;
+    }
+    return container.scrollHeight > container.clientHeight;
+};
+var getPaddingRight = function (node) {
+    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
+};
+var restoreContainerStyles = function (container) {
+    var modalRestoreStyles = getModalStore().getRestoreStyles();
+    var index = modalRestoreStyles.findIndex(function (s) { return s.container === container; });
+    var existingStyles = modalRestoreStyles[index];
+    if (!existingStyles)
+        return;
+    existingStyles.modals -= 1;
+    if (existingStyles.modals <= 0) {
+        modalRestoreStyles.splice(index, 1);
+        existingStyles.styles.forEach(function (_a) {
+            var value = _a.value, el = _a.el, key = _a.key;
+            if (value) {
+                el.style.setProperty(key, value);
+            }
+            else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
+var handleContainer = function (container) {
+    if (!container)
+        return;
+    var modalRestoreStyles = getModalStore().getRestoreStyles();
+    var existingStyles = modalRestoreStyles.find(function (s) { return s.container === container; });
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+    var containerStyles = [];
+    if (isOverflowing(container)) {
+        // Вычисляет размер до применения `overflow hidden` для избежания скачков
+        var scrollbarSize = getScrollbarSize();
+        containerStyles.push({
+            value: container.style.paddingRight,
+            key: 'padding-right',
+            el: container,
+        });
+        // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
+        // eslint-disable-next-line no-param-reassign
+        container.style.paddingRight = getPaddingRight(container) + scrollbarSize + "px";
+    }
+    var parent = container.parentElement;
+    var scrollContainer = 
+    // TODO: заменить на optional chaining
+    parent &&
+        parent.nodeName === 'HTML' &&
+        window.getComputedStyle(parent).overflowY === 'scroll'
+        ? parent
+        : container;
+    // Блокируем скролл даже если отсутствует скроллбар
+    if (scrollContainer.style.overflow !== 'hidden') {
+        containerStyles.push({
+            value: scrollContainer.style.overflow,
+            key: 'overflow',
+            el: scrollContainer,
+        });
+    }
+    scrollContainer.style.overflow = 'hidden';
+    modalRestoreStyles.push({
+        container: container,
+        modals: 1,
+        styles: containerStyles,
+    });
+};
+
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };

package/base-modal/index.css

@@ -0,0 +1,62 @@
+/* hash: mfxn1 */
+:root {
+    --color-light-bg-primary: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.base-modal__component_oa1o5 {
+    position: relative;
+    box-sizing: border-box;
+    background: var(--color-light-bg-primary);
+    margin: auto;
+    flex-shrink: 0;
+}
+.base-modal__wrapper_oa1o5 {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    outline: 0;
+}
+.base-modal__content_oa1o5 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.base-modal__hidden_oa1o5 {
+    display: none;
+}
+.base-modal__backdrop_oa1o5 {
+    z-index: 0;
+}
+.base-modal__appear_oa1o5,
+.base-modal__enter_oa1o5 {
+    opacity: 0;
+}
+.base-modal__appearActive_oa1o5,
+.base-modal__enterActive_oa1o5 {
+    opacity: 1;
+    transition: opacity 200ms ease-in;
+}
+.base-modal__exit_oa1o5 {
+    opacity: 1;
+}
+.base-modal__exitActive_oa1o5,
+.base-modal__exitDone_oa1o5 {
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+}

package/base-modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./utils";

package/base-modal/index.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('classnames');
+require('react-merge-refs');
+require('resize-observer');
+require('react-transition-group');
+require('react-focus-lock');
+require('../portal');
+require('../backdrop');
+require('../stack');
+require('../global-store');
+var utils = require('./utils.js');
+
+
+
+exports.BaseModal = Component.BaseModal;
+exports.BaseModalContext = Component.BaseModalContext;
+exports.handleContainer = utils.handleContainer;
+exports.hasScrollbar = utils.hasScrollbar;
+exports.isScrolledToBottom = utils.isScrolledToBottom;
+exports.isScrolledToTop = utils.isScrolledToTop;
+exports.restoreContainerStyles = utils.restoreContainerStyles;

package/base-modal/modern/Component.d.ts

@@ -0,0 +1,131 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject } from "react";
+import { TransitionProps } from 'react-transition-group/Transition';
+import { PortalProps } from "../../portal";
+import { BackdropProps } from "../../backdrop";
+type BaseModalProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Компонент бэкдропа
+     */
+    Backdrop?: FC<BackdropProps>;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps['getPortalContainer'];
+    /**
+     * Отключает автоматический перевод фокуса на модалку при открытии
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     * @default false
+     */
+    disableFocusLock?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `callback` при нажатии Escape
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Отключает вызов `callback` при клике на бэкдроп
+     * @default false
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * Содержимое модалки всегда в DOM
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: 'wrapper' | 'content' | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    onBackdropClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик события нажатия на Escape
+     *
+     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick') => void;
+    /**
+     * Обработчик события onEntered компонента Transition
+     */
+    onMount?: () => void;
+    /**
+     * Обработчик события onExited компонента Transition
+     */
+    onUnmount?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Реф, который должен быть установлен компонентной области
+     */
+    componentRef?: MutableRefObject<HTMLDivElement | null>;
+};
+type BaseModalContext = {
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    hasScroll?: boolean;
+    headerHighlighted?: boolean;
+    footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
+    contentRef: Ref<HTMLElement>;
+    setHasHeader: (exists: boolean) => void;
+    setHasFooter: (exists: boolean) => void;
+    onClose: Required<BaseModalProps>['onClose'];
+};
+declare const BaseModalContext: React.Context<BaseModalContext>;
+declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+export { BaseModalProps, BaseModalContext, BaseModal };