npm - @alfalab/core-components-base-modal - Versions diffs - 5.2.1 → 5.3.0 - Mend

@alfalab/core-components-base-modal 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/Component.js CHANGED Viewed

@@ -23,7 +23,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles = {"component":"base-modal__component_10unr","wrapper":"base-modal__wrapper_10unr","content":"base-modal__content_10unr","hidden":"base-modal__hidden_10unr","backdrop":"base-modal__backdrop_10unr","appear":"base-modal__appear_10unr","enter":"base-modal__enter_10unr","appearActive":"base-modal__appearActive_10unr","enterActive":"base-modal__enterActive_10unr","exit":"base-modal__exit_10unr","exitActive":"base-modal__exitActive_10unr","exitDone":"base-modal__exitDone_10unr"};
+var styles = {"component":"base-modal__component_mx6kj","wrapper":"base-modal__wrapper_mx6kj","content":"base-modal__content_mx6kj","hidden":"base-modal__hidden_mx6kj","backdrop":"base-modal__backdrop_mx6kj","appear":"base-modal__appear_mx6kj","enter":"base-modal__enter_mx6kj","appearActive":"base-modal__appearActive_mx6kj","enterActive":"base-modal__enterActive_mx6kj","exit":"base-modal__exit_mx6kj","exitActive":"base-modal__exitActive_mx6kj","exitDone":"base-modal__exitDone_mx6kj"};
 require('./index.css')
 // eslint-disable-next-line @typescript-eslint/no-redeclare

package/esm/Component.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '@alfalab/core-components-global-store/esm';
-var styles = {"component":"base-modal__component_10unr","wrapper":"base-modal__wrapper_10unr","content":"base-modal__content_10unr","hidden":"base-modal__hidden_10unr","backdrop":"base-modal__backdrop_10unr","appear":"base-modal__appear_10unr","enter":"base-modal__enter_10unr","appearActive":"base-modal__appearActive_10unr","enterActive":"base-modal__enterActive_10unr","exit":"base-modal__exit_10unr","exitActive":"base-modal__exitActive_10unr","exitDone":"base-modal__exitDone_10unr"};
+var styles = {"component":"base-modal__component_mx6kj","wrapper":"base-modal__wrapper_mx6kj","content":"base-modal__content_mx6kj","hidden":"base-modal__hidden_mx6kj","backdrop":"base-modal__backdrop_mx6kj","appear":"base-modal__appear_mx6kj","enter":"base-modal__enter_mx6kj","appearActive":"base-modal__appearActive_mx6kj","enterActive":"base-modal__enterActive_mx6kj","exit":"base-modal__exit_mx6kj","exitActive":"base-modal__exitActive_mx6kj","exitDone":"base-modal__exitDone_mx6kj"};
 require('./index.css')
 // eslint-disable-next-line @typescript-eslint/no-redeclare

package/esm/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: 10q8r */
+/* hash: vww7l */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_10unr {
+} .base-modal__component_mx6kj {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_10unr {
+} .base-modal__wrapper_mx6kj {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_10unr {
+} .base-modal__content_mx6kj {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_10unr {
+} .base-modal__hidden_mx6kj {
     display: none;
-} .base-modal__backdrop_10unr {
+} .base-modal__backdrop_mx6kj {
     z-index: 0;
-} .base-modal__appear_10unr,
-.base-modal__enter_10unr {
+} .base-modal__appear_mx6kj,
+.base-modal__enter_mx6kj {
     opacity: 0;
-} .base-modal__appearActive_10unr,
-.base-modal__enterActive_10unr {
+} .base-modal__appearActive_mx6kj,
+.base-modal__enterActive_mx6kj {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_10unr {
+} .base-modal__exit_mx6kj {
     opacity: 1;
-} .base-modal__exitActive_10unr,
-.base-modal__exitDone_10unr {
+} .base-modal__exitActive_mx6kj,
+.base-modal__exitDone_mx6kj {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: 10q8r */
+/* hash: vww7l */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_10unr {
+} .base-modal__component_mx6kj {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_10unr {
+} .base-modal__wrapper_mx6kj {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_10unr {
+} .base-modal__content_mx6kj {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_10unr {
+} .base-modal__hidden_mx6kj {
     display: none;
-} .base-modal__backdrop_10unr {
+} .base-modal__backdrop_mx6kj {
     z-index: 0;
-} .base-modal__appear_10unr,
-.base-modal__enter_10unr {
+} .base-modal__appear_mx6kj,
+.base-modal__enter_mx6kj {
     opacity: 0;
-} .base-modal__appearActive_10unr,
-.base-modal__enterActive_10unr {
+} .base-modal__appearActive_mx6kj,
+.base-modal__enterActive_mx6kj {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_10unr {
+} .base-modal__exit_mx6kj {
     opacity: 1;
-} .base-modal__exitActive_10unr,
-.base-modal__exitDone_10unr {
+} .base-modal__exitActive_mx6kj,
+.base-modal__exitDone_mx6kj {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/modern/Component.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '@alfalab/core-components-global-store/modern';
-const styles = {"component":"base-modal__component_10unr","wrapper":"base-modal__wrapper_10unr","content":"base-modal__content_10unr","hidden":"base-modal__hidden_10unr","backdrop":"base-modal__backdrop_10unr","appear":"base-modal__appear_10unr","enter":"base-modal__enter_10unr","appearActive":"base-modal__appearActive_10unr","enterActive":"base-modal__enterActive_10unr","exit":"base-modal__exit_10unr","exitActive":"base-modal__exitActive_10unr","exitDone":"base-modal__exitDone_10unr"};
+const styles = {"component":"base-modal__component_mx6kj","wrapper":"base-modal__wrapper_mx6kj","content":"base-modal__content_mx6kj","hidden":"base-modal__hidden_mx6kj","backdrop":"base-modal__backdrop_mx6kj","appear":"base-modal__appear_mx6kj","enter":"base-modal__enter_mx6kj","appearActive":"base-modal__appearActive_mx6kj","enterActive":"base-modal__enterActive_mx6kj","exit":"base-modal__exit_mx6kj","exitActive":"base-modal__exitActive_mx6kj","exitDone":"base-modal__exitDone_mx6kj"};
 require('./index.css')
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

package/modern/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: 10q8r */
+/* hash: vww7l */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_10unr {
+} .base-modal__component_mx6kj {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_10unr {
+} .base-modal__wrapper_mx6kj {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_10unr {
+} .base-modal__content_mx6kj {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_10unr {
+} .base-modal__hidden_mx6kj {
     display: none;
-} .base-modal__backdrop_10unr {
+} .base-modal__backdrop_mx6kj {
     z-index: 0;
-} .base-modal__appear_10unr,
-.base-modal__enter_10unr {
+} .base-modal__appear_mx6kj,
+.base-modal__enter_mx6kj {
     opacity: 0;
-} .base-modal__appearActive_10unr,
-.base-modal__enterActive_10unr {
+} .base-modal__appearActive_mx6kj,
+.base-modal__enterActive_mx6kj {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_10unr {
+} .base-modal__exit_mx6kj {
     opacity: 1;
-} .base-modal__exitActive_10unr,
-.base-modal__exitDone_10unr {
+} .base-modal__exitActive_mx6kj,
+.base-modal__exitDone_mx6kj {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "5.2.1",
+    "version": "5.3.0",
     "description": "BaseModal component",
     "keywords": [],
     "license": "MIT",
@@ -11,10 +11,10 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-backdrop": "^3.0.7",
-        "@alfalab/core-components-global-store": "^2.0.4",
-        "@alfalab/core-components-portal": "^3.1.5",
-        "@alfalab/core-components-stack": "^4.0.4",
+        "@alfalab/core-components-backdrop": "^3.1.0",
+        "@alfalab/core-components-global-store": "^2.1.0",
+        "@alfalab/core-components-portal": "^3.2.0",
+        "@alfalab/core-components-stack": "^4.1.0",
         "@juggle/resize-observer": "^3.3.1",
         "classnames": "^2.3.1",
         "react-focus-lock": "^2.9.3",

package/src/Component.tsx ADDED Viewed

@@ -0,0 +1,577 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React, {
+    FC,
+    forwardRef,
+    KeyboardEvent,
+    MouseEvent,
+    MutableRefObject,
+    ReactNode,
+    Ref,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import FocusLock from 'react-focus-lock';
+import mergeRefs from 'react-merge-refs';
+import { CSSTransition } from 'react-transition-group';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
+import cn from 'classnames';
+import { Backdrop as DefaultBackdrop, BackdropProps } from '@alfalab/core-components-backdrop';
+import { Portal, PortalProps } from '@alfalab/core-components-portal';
+import { Stack, stackingOrder } from '@alfalab/core-components-stack';
+import {
+    getScrollbarSize,
+    handleContainer,
+    hasScrollbar,
+    isScrolledToBottom,
+    isScrolledToTop,
+    restoreContainerStyles,
+} from './utils';
+import styles from './index.module.css';
+// TODO Без полифила крашится FocusLock в IE11. Выпилить в будущем!!!.
+import './matches-polyfill';
+export 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;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     * @default false
+     */
+    disableBlockingScroll?: 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>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    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>;
+};
+export type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
+    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'];
+};
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const BaseModalContext = React.createContext<BaseModalContext>({
+    parentRef: { current: null },
+    componentRef: { current: null },
+    hasFooter: false,
+    hasHeader: false,
+    hasScroll: false,
+    headerHighlighted: false,
+    footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: () => null,
+    contentRef: () => null,
+    setHasHeader: () => null,
+    setHasFooter: () => null,
+    onClose: () => null,
+});
+export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
+    (
+        {
+            open,
+            container,
+            children,
+            scrollHandler = 'wrapper',
+            Backdrop = DefaultBackdrop,
+            backdropProps = {},
+            transitionProps = {},
+            disableBackdropClick,
+            disableAutoFocus = false,
+            disableFocusLock = false,
+            disableEscapeKeyDown = false,
+            disableRestoreFocus = false,
+            disableBlockingScroll = false,
+            keepMounted = false,
+            className,
+            contentClassName,
+            wrapperClassName,
+            onBackdropClick,
+            onClose,
+            onEscapeKeyDown,
+            onMount,
+            onUnmount,
+            dataTestId,
+            zIndex = stackingOrder.MODAL,
+            componentRef = null,
+            usePortal = true,
+        },
+        ref,
+    ) => {
+        const [exited, setExited] = useState<boolean | null>(null);
+        const [hasScroll, setHasScroll] = useState(false);
+        const [hasHeader, setHasHeader] = useState(false);
+        const [hasFooter, setHasFooter] = useState(false);
+        const [headerHighlighted, setHeaderHighlighted] = useState(false);
+        const [footerHighlighted, setFooterHighlighted] = useState(false);
+        const [headerOffset, setHeaderOffset] = useState(0);
+        const componentNodeRef = useRef<HTMLDivElement>(null);
+        const wrapperRef = useRef<HTMLDivElement>(null);
+        const scrollableNodeRef = useRef<HTMLDivElement | null>(null);
+        const contentNodeRef = useRef<HTMLDivElement | null>(null);
+        const restoreContainerStylesRef = useRef<null | (() => void)>(null);
+        const mouseDownTarget = useRef<HTMLElement>();
+        const resizeObserverRef = useRef<ResizeObserver>();
+        const checkToHasScrollBar = () => {
+            if (scrollableNodeRef.current) {
+                const scrollExists = hasScrollbar(scrollableNodeRef.current);
+                setFooterHighlighted(scrollExists);
+                setHasScroll(scrollExists);
+            }
+        };
+        const isExited = exited || exited === null;
+        const shouldRender = keepMounted || open || !isExited;
+        const getContainer = useCallback(
+            () => (container ? container() : document.body) as HTMLElement,
+            [container],
+        );
+        const addResizeHandle = useCallback(() => {
+            if (!resizeObserverRef.current) return;
+            if (scrollableNodeRef.current) {
+                resizeObserverRef.current.observe(scrollableNodeRef.current);
+            }
+            if (contentNodeRef.current) {
+                resizeObserverRef.current.observe(contentNodeRef.current);
+            }
+        }, []);
+        const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
+        const contentRef = useCallback((node: HTMLDivElement) => {
+            if (node !== null) {
+                contentNodeRef.current = node;
+                if (resizeObserverRef.current) {
+                    resizeObserverRef.current.observe(node);
+                }
+                checkToHasScrollBar();
+            }
+        }, []);
+        const handleScroll = useCallback(() => {
+            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]);
+        const handleClose = useCallback<Required<BaseModalProps>['onClose']>(
+            (event, reason) => {
+                if (onClose) {
+                    onClose(event, reason);
+                }
+                if (reason === 'backdropClick' && onBackdropClick) {
+                    onBackdropClick(event as MouseEvent);
+                }
+                if (reason === 'escapeKeyDown' && onEscapeKeyDown) {
+                    onEscapeKeyDown(event as KeyboardEvent);
+                }
+                return null;
+            },
+            [onBackdropClick, onClose, onEscapeKeyDown],
+        );
+        const handleBackdropMouseDown = (event: MouseEvent<HTMLElement>) => {
+            let clickedOnScrollbar = false;
+            const clientWidth = (event.target as HTMLElement)?.clientWidth;
+            if (event.clientX && clientWidth) {
+                // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
+                const offset = getScrollbarSize() === 0 ? 17 : 0;
+                clickedOnScrollbar = event.clientX + offset > clientWidth;
+            }
+            if (!disableBackdropClick && !clickedOnScrollbar) {
+                mouseDownTarget.current = event.target as HTMLElement;
+            }
+        };
+        const handleBackdropMouseUp = (event: MouseEvent<HTMLElement>) => {
+            if (
+                !disableBackdropClick &&
+                event.target === wrapperRef.current &&
+                mouseDownTarget.current === wrapperRef.current
+            ) {
+                handleClose(event, 'backdropClick');
+            }
+            mouseDownTarget.current = undefined;
+        };
+        const handleKeyDown = useCallback(
+            (event: KeyboardEvent<HTMLDivElement>) => {
+                /*
+                 * Чтобы сохранить дефолтное поведение элементов и событий форм,
+                 * обработчик не устанавливает event.preventDefault()
+                 */
+                if (event.key !== 'Escape') {
+                    return;
+                }
+                // Если есть обработчик escape на body
+                event.stopPropagation();
+                if (!disableEscapeKeyDown && handleClose) {
+                    handleClose(event, 'escapeKeyDown');
+                }
+            },
+            [disableEscapeKeyDown, handleClose],
+        );
+        const getScrollHandler = useCallback(() => {
+            if (scrollHandler === 'wrapper') return wrapperRef.current;
+            if (scrollHandler === 'content') return componentNodeRef.current;
+            return scrollHandler.current || wrapperRef.current;
+        }, [scrollHandler]);
+        const handleEntered: Required<TransitionProps>['onEntered'] = useCallback(
+            (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],
+        );
+        const handleExited: Required<TransitionProps>['onExited'] = useCallback(
+            (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(() => {
+            if (open && isExited) {
+                if (!disableBlockingScroll) {
+                    const el = getContainer();
+                    handleContainer(el);
+                    restoreContainerStylesRef.current = () => {
+                        restoreContainerStylesRef.current = null;
+                        restoreContainerStyles(el);
+                    };
+                }
+                setExited(false);
+            }
+        }, [getContainer, open, disableBlockingScroll, isExited]);
+        useEffect(() => {
+            const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+            resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
+            return () => {
+                if (restoreContainerStylesRef.current) {
+                    restoreContainerStylesRef.current();
+                }
+                if (resizeObserverRef.current) {
+                    resizeObserverRef.current.disconnect();
+                }
+            };
+        }, []);
+        const contextValue = useMemo<BaseModalContext>(
+            () => ({
+                parentRef: wrapperRef,
+                componentRef: componentNodeRef,
+                hasHeader,
+                hasFooter,
+                hasScroll,
+                headerHighlighted,
+                footerHighlighted,
+                headerOffset,
+                setHeaderOffset,
+                contentRef,
+                setHasHeader,
+                setHasFooter,
+                onClose: handleClose,
+            }),
+            [
+                contentRef,
+                hasHeader,
+                hasFooter,
+                hasScroll,
+                headerHighlighted,
+                footerHighlighted,
+                headerOffset,
+                setHeaderOffset,
+                handleClose,
+            ],
+        );
+        const renderContent = () => (
+            <Stack value={zIndex}>
+                {(computedZIndex) => (
+                    <BaseModalContext.Provider value={contextValue}>
+                        <FocusLock
+                            autoFocus={!disableAutoFocus}
+                            disabled={disableFocusLock || !open}
+                            returnFocus={!disableRestoreFocus}
+                        >
+                            {Backdrop && (
+                                <Backdrop
+                                    {...backdropProps}
+                                    className={cn(backdropProps.className, styles.backdrop)}
+                                    open={open}
+                                    style={{
+                                        zIndex: computedZIndex,
+                                    }}
+                                />
+                            )}
+                            <div
+                                role='dialog'
+                                className={cn(styles.wrapper, wrapperClassName, {
+                                    [styles.hidden]: !open && isExited,
+                                })}
+                                ref={mergeRefs([ref, wrapperRef])}
+                                onKeyDown={handleKeyDown}
+                                onMouseDown={handleBackdropMouseDown}
+                                onMouseUp={handleBackdropMouseUp}
+                                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                                tabIndex={0}
+                                data-test-id={dataTestId}
+                                style={{
+                                    zIndex: computedZIndex,
+                                }}
+                            >
+                                <CSSTransition
+                                    appear={true}
+                                    timeout={200}
+                                    classNames={styles}
+                                    {...transitionProps}
+                                    in={open}
+                                    onEntered={handleEntered}
+                                    onExited={handleExited}
+                                >
+                                    <div
+                                        className={cn(styles.component, className)}
+                                        ref={mergeRefs([componentRef, componentNodeRef])}
+                                    >
+                                        <div className={cn(styles.content, contentClassName)}>
+                                            {children}
+                                        </div>
+                                    </div>
+                                </CSSTransition>
+                            </div>
+                        </FocusLock>
+                    </BaseModalContext.Provider>
+                )}
+            </Stack>
+        );
+        if (!shouldRender) return null;
+        return usePortal ? (
+            <Portal getPortalContainer={container} immediateMount={true}>
+                {renderContent()}
+            </Portal>
+        ) : (
+            renderContent()
+        );
+    },
+);

package/src/index.module.css ADDED Viewed

@@ -0,0 +1,60 @@
+@import '@alfalab/core-components-themes/src/default.css';
+.component {
+    position: relative;
+    box-sizing: border-box;
+    background: var(--color-light-bg-primary);
+    margin: auto;
+    flex-shrink: 0;
+}
+.wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    outline: 0;
+}
+.content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.hidden {
+    display: none;
+}
+.backdrop {
+    z-index: 0;
+}
+.appear,
+.enter {
+    opacity: 0;
+}
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transition: opacity 200ms ease-in;
+}
+.exit {
+    opacity: 1;
+}
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+}

package/src/index.ts ADDED Viewed

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

package/src/matches-polyfill.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/* eslint-disable */
+// @ts-nocheck
+if (typeof window !== 'undefined') {
+    if (Element && !Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+            Element.prototype.mozMatchesSelector ||
+            Element.prototype.msMatchesSelector ||
+            Element.prototype.oMatchesSelector ||
+            Element.prototype.webkitMatchesSelector ||
+            function (s) {
+                const matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                let i = matches.length;
+                while (--i >= 0 && matches.item(i) !== this) {}
+                return i > -1;
+            };
+    }
+}

package/src/utils.ts ADDED Viewed

@@ -0,0 +1,128 @@
+import { getModalStore, SavedStyle } from '@alfalab/core-components-global-store';
+export function isScrolledToTop(target: HTMLElement) {
+    return target.scrollTop <= 0;
+}
+export function isScrolledToBottom(target: HTMLElement) {
+    return target.scrollHeight - target.offsetHeight <= target.scrollTop;
+}
+export function hasScrollbar(target: HTMLElement) {
+    return target.scrollHeight > target.clientHeight;
+}
+export const getScrollbarSize = (() => {
+    let cachedSize: number;
+    return () => {
+        if (cachedSize !== undefined) return cachedSize;
+        const 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);
+        const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        cachedSize = scrollbarSize;
+        return scrollbarSize;
+    };
+})();
+const isOverflowing = (container: Element) => {
+    if (document.body === container) {
+        return window.innerWidth > document.documentElement.clientWidth;
+    }
+    return container.scrollHeight > container.clientHeight;
+};
+const getPaddingRight = (node: Element) =>
+    parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
+export const restoreContainerStyles = (container: HTMLElement) => {
+    const modalRestoreStyles = getModalStore().getRestoreStyles();
+    const index = modalRestoreStyles.findIndex((s) => s.container === container);
+    const existingStyles = modalRestoreStyles[index];
+    if (!existingStyles) return;
+    existingStyles.modals -= 1;
+    if (existingStyles.modals <= 0) {
+        modalRestoreStyles.splice(index, 1);
+        existingStyles.styles.forEach(({ value, el, key }) => {
+            if (value) {
+                el.style.setProperty(key, value);
+            } else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
+export const handleContainer = (container?: HTMLElement) => {
+    if (!container) return;
+    const modalRestoreStyles = getModalStore().getRestoreStyles();
+    const existingStyles = modalRestoreStyles.find((s) => s.container === container);
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+    const containerStyles: SavedStyle[] = [];
+    if (isOverflowing(container)) {
+        // Вычисляет размер до применения `overflow hidden` для избежания скачков
+        const 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`;
+    }
+    const parent = container.parentElement;
+    const 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,
+        modals: 1,
+        styles: containerStyles,
+    });
+};