@alfalab/core-components 45.6.0-beta.2 → 45.6.1

package/base-modal/cssm/Component.js

@@ -1,23 +1,30 @@
-import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import FocusLock from 'react-focus-lock';
-import mergeRefs from 'react-merge-refs';
-import { CSSTransition } from 'react-transition-group';
-import { ResizeObserver } from '@juggle/resize-observer';
-import cn from 'classnames';
-import { Backdrop } from '../../backdrop/cssm';
-import { Portal } from '../../portal/cssm';
-import { browser } from '../../shared/cssm';
-import { stackingOrder, Stack } from '../../stack/cssm';
-import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
-import './matches-polyfill.js';
-import '../../global-store/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"component":"component","wrapper":"wrapper","content":"content","hidden":"hidden","backdrop":"backdrop","appear":"appear","enter":"enter","appearActive":"appearActive","enterActive":"enterActive","exit":"exit","exitActive":"exitActive","exitDone":"exitDone"};
-require('./index.css');
+var tslib = require('tslib');
+var React = require('react');
+var FocusLock = require('react-focus-lock');
+var mergeRefs = require('react-merge-refs');
+var reactTransitionGroup = require('react-transition-group');
+var resizeObserver = require('@juggle/resize-observer');
+var cn = require('classnames');
+var coreComponentsBackdrop = require('../../backdrop/cssm');
+var coreComponentsPortal = require('../../portal/cssm');
+var coreComponentsShared = require('../../shared/cssm');
+var coreComponentsStack = require('../../stack/cssm');
+var utils = require('./utils.js');
+var styles = require('./index.module.css');
+require('./matches-polyfill.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-const BaseModalContext = React.createContext({
+var BaseModalContext = React__default.default.createContext({
     parentRef: { current: null },
     componentRef: { current: null },
     hasFooter: false,
@@ -26,38 +33,39 @@ const BaseModalContext = React.createContext({
     headerHighlighted: false,
     footerHighlighted: false,
     headerOffset: 0,
-    setHeaderOffset: () => null,
-    contentRef: () => null,
-    setHasHeader: () => null,
-    setHasFooter: () => null,
-    onClose: () => null,
+    setHeaderOffset: function () { return null; },
+    contentRef: function () { return null; },
+    setHasHeader: function () { return null; },
+    setHasFooter: function () { return null; },
+    onClose: function () { return null; },
 });
-const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, }, ref) => {
-    const [exited, setExited] = useState(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(null);
-    const wrapperRef = useRef(null);
-    const scrollableNodeRef = useRef(null);
-    const contentNodeRef = useRef(null);
-    const restoreContainerStylesRef = useRef(null);
-    const mouseDownTarget = useRef();
-    const resizeObserverRef = useRef();
-    const checkToHasScrollBar = () => {
+var BaseModal = React.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 = _c === void 0 ? coreComponentsBackdrop.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.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
+    var _q = React.useState(null), exited = _q[0], setExited = _q[1];
+    var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
+    var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
+    var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
+    var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
+    var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
+    var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
+    var componentNodeRef = React.useRef(null);
+    var wrapperRef = React.useRef(null);
+    var scrollableNodeRef = React.useRef(null);
+    var contentNodeRef = React.useRef(null);
+    var restoreContainerStylesRef = React.useRef(null);
+    var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
+    var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
-            const scrollExists = hasScrollbar(scrollableNodeRef.current);
+            var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
             setFooterHighlighted(scrollExists);
             setHasScroll(scrollExists);
         }
     };
-    const isExited = exited || exited === null;
-    const shouldRender = keepMounted || open || !isExited;
-    const getContainer = useCallback(() => (container ? container() : document.body), [container]);
-    const addResizeHandle = useCallback(() => {
+    var isExited = exited || exited === null;
+    var shouldRender = keepMounted || open || !isExited;
+    var getContainer = React.useCallback(function () { return (container ? container() : document.body); }, [container]);
+    var addResizeHandle = React.useCallback(function () {
         if (!resizeObserverRef.current)
             return;
         if (scrollableNodeRef.current) {
@@ -67,8 +75,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             resizeObserverRef.current.observe(contentNodeRef.current);
         }
     }, []);
-    const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
-    const contentRef = useCallback((node) => {
+    var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
+    var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
             if (resizeObserverRef.current) {
@@ -77,20 +85,20 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             checkToHasScrollBar();
         }
     }, []);
-    const handleScroll = useCallback(() => {
+    var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
         if (hasHeader) {
-            setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
+            setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
                 componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
         }
         if (hasFooter) {
-            setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
+            setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
                 componentNodeRef.current.getBoundingClientRect().bottom >=
                     window.innerHeight - 1);
         }
     }, [hasFooter, hasHeader, headerOffset]);
-    const handleClose = useCallback((event, reason) => {
+    var handleClose = React.useCallback(function (event, reason) {
         if (onClose) {
             onClose(event, reason);
         }
@@ -102,19 +110,20 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
-    const handleBackdropMouseDown = (event) => {
-        let clickedOnScrollbar = false;
-        const clientWidth = event.target?.clientWidth;
+    var handleBackdropMouseDown = function (event) {
+        var _a;
+        var clickedOnScrollbar = false;
+        var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
         if (event.clientX && clientWidth) {
             // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
-            const offset = browser.getScrollbarSize() === 0 ? 17 : 0;
+            var offset = coreComponentsShared.browser.getScrollbarSize() === 0 ? 17 : 0;
             clickedOnScrollbar = event.clientX + offset > clientWidth;
         }
         if (!disableBackdropClick && !clickedOnScrollbar) {
             mouseDownTarget.current = event.target;
         }
     };
-    const handleBackdropMouseUp = (event) => {
+    var handleBackdropMouseUp = function (event) {
         if (!disableBackdropClick &&
             event.target === wrapperRef.current &&
             mouseDownTarget.current === wrapperRef.current) {
@@ -122,7 +131,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
         mouseDownTarget.current = undefined;
     };
-    const handleKeyDown = useCallback((event) => {
+    var handleKeyDown = React.useCallback(function (event) {
         /*
          * Чтобы сохранить дефолтное поведение элементов и событий форм,
          * обработчик не устанавливает event.preventDefault()
@@ -136,14 +145,14 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             handleClose(event, 'escapeKeyDown');
         }
     }, [disableEscapeKeyDown, handleClose]);
-    const getScrollHandler = useCallback(() => {
+    var getScrollHandler = React.useCallback(function () {
         if (scrollHandler === 'wrapper')
             return wrapperRef.current;
         if (scrollHandler === 'content')
             return componentNodeRef.current;
         return scrollHandler.current || wrapperRef.current;
     }, [scrollHandler]);
-    const handleEntered = useCallback((node, isAppearing) => {
+    var handleEntered = React.useCallback(function (node, isAppearing) {
         scrollableNodeRef.current = getScrollHandler();
         addResizeHandle();
         if (scrollableNodeRef.current) {
@@ -156,7 +165,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         if (onMount)
             onMount();
     }, [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps]);
-    const handleExited = useCallback((node) => {
+    var handleExited = React.useCallback(function (node) {
         removeResizeHandle();
         setExited(true);
         if (scrollableNodeRef.current) {
@@ -171,23 +180,23 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             restoreContainerStylesRef.current();
         }
     }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (open && isExited) {
             if (!disableBlockingScroll) {
-                const el = getContainer();
-                handleContainer(el);
-                restoreContainerStylesRef.current = () => {
+                var el_1 = getContainer();
+                utils.handleContainer(el_1);
+                restoreContainerStylesRef.current = function () {
                     restoreContainerStylesRef.current = null;
-                    restoreContainerStyles(el);
+                    utils.restoreContainerStyles(el_1);
                 };
             }
             setExited(false);
         }
     }, [getContainer, open, disableBlockingScroll, isExited]);
-    useEffect(() => {
-        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
-        return () => {
+    React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
+        return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
@@ -196,21 +205,21 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             }
         };
     }, []);
-    const contextValue = useMemo(() => ({
+    var contextValue = React.useMemo(function () { return ({
         parentRef: wrapperRef,
         componentRef: componentNodeRef,
-        hasHeader,
-        hasFooter,
-        hasScroll,
-        headerHighlighted,
-        footerHighlighted,
-        headerOffset,
-        setHeaderOffset,
-        contentRef,
-        setHasHeader,
-        setHasFooter,
+        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,
@@ -221,32 +230,36 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         setHeaderOffset,
         handleClose,
     ]);
-    const renderContent = () => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(BaseModalContext.Provider, { value: contextValue },
-        React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
-            Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
-                    zIndex: computedZIndex,
-                } })),
-            React.createElement("div", { ...wrapperProps, role: 'dialog', className: cn(styles.wrapper, wrapperClassName, wrapperProps?.className, {
-                    [styles.hidden]: !open && isExited,
-                }), ref: mergeRefs([
-                    ref,
-                    wrapperRef,
-                    wrapperProps?.ref,
-                ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, "data-test-id": dataTestId, style: {
-                    zIndex: computedZIndex,
-                } },
-                React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
-                    React.createElement("div", { ...componentDivProps, className: cn(styles.component, className, componentDivProps?.className), ref: mergeRefs([
-                            componentRef,
-                            componentNodeRef,
-                            componentDivProps?.ref || null,
-                        ]) },
-                        React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className) }, children)))))))));
+    var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
+        var _a;
+        return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
+            React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+                Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
+                        zIndex: computedZIndex,
+                    } }))),
+                React__default.default.createElement("div", tslib.__assign({}, wrapperProps, { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, (_a = {},
+                        _a[styles__default.default.hidden] = !open && isExited,
+                        _a)), ref: mergeRefs__default.default([
+                        ref,
+                        wrapperRef,
+                        wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
+                    ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                        zIndex: computedZIndex,
+                    } }),
+                    React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
+                        React__default.default.createElement("div", tslib.__assign({}, componentDivProps, { className: cn__default.default(styles__default.default.component, className, componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.className), ref: mergeRefs__default.default([
+                                componentRef,
+                                componentNodeRef,
+                                (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
+                            ]) }),
+                            React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles__default.default.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
+    })); };
     if (!shouldRender)
         return null;
-    return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
+    return usePortal ? (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
 });
 
-export { BaseModal, BaseModalContext };
+exports.BaseModal = BaseModal;
+exports.BaseModalContext = BaseModalContext;

package/base-modal/cssm/index.js

@@ -1,14 +1,14 @@
-export { BaseModal, BaseModalContext } from './Component.js';
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
-import 'react';
-import 'react-focus-lock';
-import 'react-merge-refs';
-import 'react-transition-group';
-import '@juggle/resize-observer';
-import 'classnames';
-import '../../backdrop/cssm';
-import '../../portal/cssm';
-import '../../shared/cssm';
-import '../../stack/cssm';
-import './matches-polyfill.js';
-import '../../global-store/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+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/cssm/index.module.css

@@ -0,0 +1,59 @@
+:root { /* 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 */ /* 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 */ :root {
+    --color-light-modal-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 */
+} :root { /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .component {
+    position: relative;
+    box-sizing: border-box;
+    background: var(--color-light-modal-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;
+    overscroll-behavior: none;
+} .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/base-modal/cssm/matches-polyfill.js

@@ -9,8 +9,8 @@ if (typeof window !== 'undefined') {
                 Element.prototype.oMatchesSelector ||
                 Element.prototype.webkitMatchesSelector ||
                 function (s) {
-                    const matches = (this.document || this.ownerDocument).querySelectorAll(s);
-                    let i = matches.length;
+                    var matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    var i = matches.length;
                     while (--i >= 0 && matches.item(i) !== this) { }
                     return i > -1;
                 };

package/base-modal/cssm/utils.js

@@ -1,5 +1,7 @@
-import { getModalStore } from '../../global-store/cssm';
-import { browser } from '../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsGlobalStore = require('../../global-store/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 
 function isScrolledToTop(target) {
     return target.scrollTop <= 0;
@@ -10,23 +12,26 @@ function isScrolledToBottom(target) {
 function hasScrollbar(target) {
     return target.scrollHeight > target.clientHeight;
 }
-const isOverflowing = (container) => {
+var isOverflowing = function (container) {
     if (document.body === container) {
         return window.innerWidth > document.documentElement.clientWidth;
     }
     return container.scrollHeight > container.clientHeight;
 };
-const getPaddingRight = (node) => parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-const restoreContainerStyles = (container) => {
-    const modalRestoreStyles = getModalStore().getRestoreStyles();
-    const index = modalRestoreStyles.findIndex((s) => s.container === container);
-    const existingStyles = modalRestoreStyles[index];
+var getPaddingRight = function (node) {
+    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
+};
+var restoreContainerStyles = function (container) {
+    var modalRestoreStyles = coreComponentsGlobalStore.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(({ value, el, key }) => {
+        existingStyles.styles.forEach(function (_a) {
+            var value = _a.value, el = _a.el, key = _a.key;
             if (value) {
                 el.style.setProperty(key, value);
             }
@@ -36,19 +41,19 @@ const restoreContainerStyles = (container) => {
         });
     }
 };
-const handleContainer = (container) => {
+var handleContainer = function (container) {
     if (!container)
         return;
-    const modalRestoreStyles = getModalStore().getRestoreStyles();
-    const existingStyles = modalRestoreStyles.find((s) => s.container === container);
+    var modalRestoreStyles = coreComponentsGlobalStore.getModalStore().getRestoreStyles();
+    var existingStyles = modalRestoreStyles.find(function (s) { return s.container === container; });
     if (existingStyles) {
         existingStyles.modals += 1;
         return;
     }
-    const containerStyles = [];
+    var containerStyles = [];
     if (isOverflowing(container)) {
         // Вычисляет размер до применения `overflow hidden` для избежания скачков
-        const scrollbarSize = browser.getScrollbarSize();
+        var scrollbarSize = coreComponentsShared.browser.getScrollbarSize();
         containerStyles.push({
             value: container.style.paddingRight,
             key: 'padding-right',
@@ -56,10 +61,10 @@ const handleContainer = (container) => {
         });
         // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
         // eslint-disable-next-line no-param-reassign
-        container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+        container.style.paddingRight = "".concat(getPaddingRight(container) + scrollbarSize, "px");
     }
-    const parent = container.parentElement;
-    const scrollContainer = 
+    var parent = container.parentElement;
+    var scrollContainer = 
     // TODO: заменить на optional chaining
     parent &&
         parent.nodeName === 'HTML' &&
@@ -76,10 +81,14 @@ const handleContainer = (container) => {
     }
     scrollContainer.style.overflow = 'hidden';
     modalRestoreStyles.push({
-        container,
+        container: container,
         modals: 1,
         styles: containerStyles,
     });
 };
 
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
+exports.handleContainer = handleContainer;
+exports.hasScrollbar = hasScrollbar;
+exports.isScrolledToBottom = isScrolledToBottom;
+exports.isScrolledToTop = isScrolledToTop;
+exports.restoreContainerStyles = restoreContainerStyles;