@alfalab/core-components-base-modal 5.0.3 → 5.0.5

package/Component.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject } from "react";
+import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
-import { PortalProps } from "@alfalab/core-components-portal";
 import { BackdropProps } from "@alfalab/core-components-backdrop";
+import { PortalProps } from "@alfalab/core-components-portal";
 type BaseModalProps = {
     /**
      * Контент

package/Component.js

@@ -3,26 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var cn = require('classnames');
+var FocusLock = require('react-focus-lock');
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
-var FocusLock = require('react-focus-lock');
-require('./matches-polyfill.js');
-var coreComponentsPortal = require('@alfalab/core-components-portal');
+var resizeObserver = require('@juggle/resize-observer');
+var cn = require('classnames');
 var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
+var coreComponentsPortal = require('@alfalab/core-components-portal');
 var coreComponentsStack = require('@alfalab/core-components-stack');
 require('@alfalab/core-components-global-store');
 var utils = require('./utils.js');
+require('./matches-polyfill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -49,9 +49,10 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_1q1ro","wrapper":"base-modal__wrapper_1q1ro","content":"base-modal__content_1q1ro","hidden":"base-modal__hidden_1q1ro","backdrop":"base-modal__backdrop_1q1ro","appear":"base-modal__appear_1q1ro","enter":"base-modal__enter_1q1ro","appearActive":"base-modal__appearActive_1q1ro","enterActive":"base-modal__enterActive_1q1ro","exit":"base-modal__exit_1q1ro","exitActive":"base-modal__exitActive_1q1ro","exitDone":"base-modal__exitDone_1q1ro"};
+var styles = {"component":"base-modal__component_1i1k8","wrapper":"base-modal__wrapper_1i1k8","content":"base-modal__content_1i1k8","hidden":"base-modal__hidden_1i1k8","backdrop":"base-modal__backdrop_1i1k8","appear":"base-modal__appear_1i1k8","enter":"base-modal__enter_1i1k8","appearActive":"base-modal__appearActive_1i1k8","enterActive":"base-modal__enterActive_1i1k8","exit":"base-modal__exit_1i1k8","exitActive":"base-modal__exitActive_1i1k8","exitDone":"base-modal__exitDone_1i1k8"};
 require('./index.css')
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare
 var BaseModalContext = React__default['default'].createContext({
     hasFooter: false,
     hasHeader: false,
@@ -90,9 +91,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     };
     var isExited = exited || exited === null;
     var shouldRender = keepMounted || open || !isExited;
-    var getContainer = React.useCallback(function () {
-        return (container ? container() : document.body);
-    }, [container]);
+    var getContainer = React.useCallback(function () { return (container ? container() : document.body); }, [container]);
     var addResizeHandle = React.useCallback(function () {
         if (!resizeObserverRef.current)
             return;
@@ -260,7 +259,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         return null;
     return (React__default['default'].createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
-        return (React__default['default'].createElement(coreComponentsPortal.Portal, { getPortalContainer: container },
+        return (React__default['default'].createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true },
             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, __assign({}, backdropProps, { className: cn__default['default'](backdropProps.className, styles.backdrop), open: open, style: {

package/cssm/Component.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject } from "react";
+import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
-import { PortalProps } from "@alfalab/core-components-portal";
 import { BackdropProps } from "@alfalab/core-components-backdrop";
+import { PortalProps } from "@alfalab/core-components-portal";
 type BaseModalProps = {
     /**
      * Контент

package/cssm/Component.js

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var cn = require('classnames');
+var FocusLock = require('react-focus-lock');
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
-var FocusLock = require('react-focus-lock');
-require('./matches-polyfill.js');
-var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
+var resizeObserver = require('@juggle/resize-observer');
+var cn = require('classnames');
 var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
+var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
 var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
 require('@alfalab/core-components-global-store/cssm');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
+require('./matches-polyfill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -51,6 +51,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare
 var BaseModalContext = React__default['default'].createContext({
     hasFooter: false,
     hasHeader: false,
@@ -89,9 +90,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     };
     var isExited = exited || exited === null;
     var shouldRender = keepMounted || open || !isExited;
-    var getContainer = React.useCallback(function () {
-        return (container ? container() : document.body);
-    }, [container]);
+    var getContainer = React.useCallback(function () { return (container ? container() : document.body); }, [container]);
     var addResizeHandle = React.useCallback(function () {
         if (!resizeObserverRef.current)
             return;
@@ -259,7 +258,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         return null;
     return (React__default['default'].createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
-        return (React__default['default'].createElement(coreComponentsPortal.Portal, { getPortalContainer: container },
+        return (React__default['default'].createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true },
             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, __assign({}, backdropProps, { className: cn__default['default'](backdropProps.className, styles__default['default'].backdrop), open: open, style: {

package/cssm/index.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 require('react');
-require('classnames');
+require('react-focus-lock');
 require('react-merge-refs');
-require('@juggle/resize-observer');
 require('react-transition-group');
-require('react-focus-lock');
-require('./matches-polyfill.js');
-require('@alfalab/core-components-portal/cssm');
+require('@juggle/resize-observer');
+require('classnames');
 require('@alfalab/core-components-backdrop/cssm');
+require('@alfalab/core-components-portal/cssm');
 require('@alfalab/core-components-stack/cssm');
 require('@alfalab/core-components-global-store/cssm');
 var utils = require('./utils.js');
 require('./index.module.css');
+require('./matches-polyfill.js');
 
 
 

package/cssm/utils.js

@@ -37,9 +37,7 @@ var isOverflowing = function (container) {
     }
     return container.scrollHeight > container.clientHeight;
 };
-var getPaddingRight = function (node) {
-    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-};
+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; });

package/esm/Component.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject } from "react";
+import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
-import { PortalProps } from "@alfalab/core-components-portal";
 import { BackdropProps } from "@alfalab/core-components-backdrop";
+import { PortalProps } from "@alfalab/core-components-portal";
 type BaseModalProps = {
     /**
      * Контент

package/esm/Component.js

@@ -1,17 +1,17 @@
 import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import cn from 'classnames';
+import FocusLock from 'react-focus-lock';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
-import FocusLock from 'react-focus-lock';
-import './matches-polyfill.js';
-import { Portal } from '@alfalab/core-components-portal/esm';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
 import { Backdrop } from '@alfalab/core-components-backdrop/esm';
+import { Portal } from '@alfalab/core-components-portal/esm';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
 import '@alfalab/core-components-global-store/esm';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
+import './matches-polyfill.js';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -38,9 +38,10 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_1q1ro","wrapper":"base-modal__wrapper_1q1ro","content":"base-modal__content_1q1ro","hidden":"base-modal__hidden_1q1ro","backdrop":"base-modal__backdrop_1q1ro","appear":"base-modal__appear_1q1ro","enter":"base-modal__enter_1q1ro","appearActive":"base-modal__appearActive_1q1ro","enterActive":"base-modal__enterActive_1q1ro","exit":"base-modal__exit_1q1ro","exitActive":"base-modal__exitActive_1q1ro","exitDone":"base-modal__exitDone_1q1ro"};
+var styles = {"component":"base-modal__component_1i1k8","wrapper":"base-modal__wrapper_1i1k8","content":"base-modal__content_1i1k8","hidden":"base-modal__hidden_1i1k8","backdrop":"base-modal__backdrop_1i1k8","appear":"base-modal__appear_1i1k8","enter":"base-modal__enter_1i1k8","appearActive":"base-modal__appearActive_1i1k8","enterActive":"base-modal__enterActive_1i1k8","exit":"base-modal__exit_1i1k8","exitActive":"base-modal__exitActive_1i1k8","exitDone":"base-modal__exitDone_1i1k8"};
 require('./index.css')
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare
 var BaseModalContext = React.createContext({
     hasFooter: false,
     hasHeader: false,
@@ -79,9 +80,7 @@ var BaseModal = forwardRef(function (_a, ref) {
     };
     var isExited = exited || exited === null;
     var shouldRender = keepMounted || open || !isExited;
-    var getContainer = useCallback(function () {
-        return (container ? container() : document.body);
-    }, [container]);
+    var getContainer = useCallback(function () { return (container ? container() : document.body); }, [container]);
     var addResizeHandle = useCallback(function () {
         if (!resizeObserverRef.current)
             return;
@@ -249,7 +248,7 @@ var BaseModal = forwardRef(function (_a, ref) {
         return null;
     return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
         var _a;
-        return (React.createElement(Portal, { getPortalContainer: container },
+        return (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
             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: {

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: pfi1g */
+/* hash: 150w0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_1q1ro {
+.base-modal__component_1i1k8 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_1q1ro {
+.base-modal__wrapper_1i1k8 {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_1q1ro {
+.base-modal__content_1i1k8 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_1q1ro {
+.base-modal__hidden_1i1k8 {
     display: none;
 }
-.base-modal__backdrop_1q1ro {
+.base-modal__backdrop_1i1k8 {
     z-index: 0;
 }
-.base-modal__appear_1q1ro,
-.base-modal__enter_1q1ro {
+.base-modal__appear_1i1k8,
+.base-modal__enter_1i1k8 {
     opacity: 0;
 }
-.base-modal__appearActive_1q1ro,
-.base-modal__enterActive_1q1ro {
+.base-modal__appearActive_1i1k8,
+.base-modal__enterActive_1i1k8 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_1q1ro {
+.base-modal__exit_1i1k8 {
     opacity: 1;
 }
-.base-modal__exitActive_1q1ro,
-.base-modal__exitDone_1q1ro {
+.base-modal__exitActive_1i1k8,
+.base-modal__exitDone_1i1k8 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/esm/index.js

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

package/esm/utils.js

@@ -33,9 +33,7 @@ var isOverflowing = function (container) {
     }
     return container.scrollHeight > container.clientHeight;
 };
-var getPaddingRight = function (node) {
-    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-};
+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; });

package/index.css

@@ -1,4 +1,4 @@
-/* hash: pfi1g */
+/* hash: 150w0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_1q1ro {
+.base-modal__component_1i1k8 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_1q1ro {
+.base-modal__wrapper_1i1k8 {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_1q1ro {
+.base-modal__content_1i1k8 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_1q1ro {
+.base-modal__hidden_1i1k8 {
     display: none;
 }
-.base-modal__backdrop_1q1ro {
+.base-modal__backdrop_1i1k8 {
     z-index: 0;
 }
-.base-modal__appear_1q1ro,
-.base-modal__enter_1q1ro {
+.base-modal__appear_1i1k8,
+.base-modal__enter_1i1k8 {
     opacity: 0;
 }
-.base-modal__appearActive_1q1ro,
-.base-modal__enterActive_1q1ro {
+.base-modal__appearActive_1i1k8,
+.base-modal__enterActive_1i1k8 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_1q1ro {
+.base-modal__exit_1i1k8 {
     opacity: 1;
 }
-.base-modal__exitActive_1q1ro,
-.base-modal__exitDone_1q1ro {
+.base-modal__exitActive_1i1k8,
+.base-modal__exitDone_1i1k8 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/index.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 require('react');
-require('classnames');
+require('react-focus-lock');
 require('react-merge-refs');
-require('@juggle/resize-observer');
 require('react-transition-group');
-require('react-focus-lock');
-require('./matches-polyfill.js');
-require('@alfalab/core-components-portal');
+require('@juggle/resize-observer');
+require('classnames');
 require('@alfalab/core-components-backdrop');
+require('@alfalab/core-components-portal');
 require('@alfalab/core-components-stack');
 require('@alfalab/core-components-global-store');
 var utils = require('./utils.js');
+require('./matches-polyfill.js');
 
 
 

package/modern/Component.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject } from "react";
+import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
-import { PortalProps } from "@alfalab/core-components-portal";
 import { BackdropProps } from "@alfalab/core-components-backdrop";
+import { PortalProps } from "@alfalab/core-components-portal";
 type BaseModalProps = {
     /**
      * Контент

package/modern/Component.js

@@ -1,20 +1,21 @@
 import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import cn from 'classnames';
+import FocusLock from 'react-focus-lock';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
-import FocusLock from 'react-focus-lock';
-import './matches-polyfill.js';
-import { Portal } from '@alfalab/core-components-portal/modern';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
 import { Backdrop } from '@alfalab/core-components-backdrop/modern';
+import { Portal } from '@alfalab/core-components-portal/modern';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
 import '@alfalab/core-components-global-store/modern';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
+import './matches-polyfill.js';
 
-var styles = {"component":"base-modal__component_1q1ro","wrapper":"base-modal__wrapper_1q1ro","content":"base-modal__content_1q1ro","hidden":"base-modal__hidden_1q1ro","backdrop":"base-modal__backdrop_1q1ro","appear":"base-modal__appear_1q1ro","enter":"base-modal__enter_1q1ro","appearActive":"base-modal__appearActive_1q1ro","enterActive":"base-modal__enterActive_1q1ro","exit":"base-modal__exit_1q1ro","exitActive":"base-modal__exitActive_1q1ro","exitDone":"base-modal__exitDone_1q1ro"};
+var styles = {"component":"base-modal__component_1i1k8","wrapper":"base-modal__wrapper_1i1k8","content":"base-modal__content_1i1k8","hidden":"base-modal__hidden_1i1k8","backdrop":"base-modal__backdrop_1i1k8","appear":"base-modal__appear_1i1k8","enter":"base-modal__enter_1i1k8","appearActive":"base-modal__appearActive_1i1k8","enterActive":"base-modal__enterActive_1i1k8","exit":"base-modal__exit_1i1k8","exitActive":"base-modal__exitActive_1i1k8","exitDone":"base-modal__exitDone_1i1k8"};
 require('./index.css')
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+// eslint-disable-next-line @typescript-eslint/no-redeclare
 const BaseModalContext = React.createContext({
     hasFooter: false,
     hasHeader: false,
@@ -52,9 +53,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     };
     const isExited = exited || exited === null;
     const shouldRender = keepMounted || open || !isExited;
-    const getContainer = useCallback(() => {
-        return (container ? container() : document.body);
-    }, [container]);
+    const getContainer = useCallback(() => (container ? container() : document.body), [container]);
     const addResizeHandle = useCallback(() => {
         if (!resizeObserverRef.current)
             return;
@@ -154,7 +153,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         if (onMount)
             onMount();
     }, [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps]);
-    const handleExited = useCallback(node => {
+    const handleExited = useCallback((node) => {
         removeResizeHandle();
         setExited(true);
         if (scrollableNodeRef.current) {
@@ -219,12 +218,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     ]);
     if (!shouldRender)
         return null;
-    return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: container },
+    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
         React.createElement(BaseModalContext.Provider, { value: contextValue },
             React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
-                Backdrop$1 && (React.createElement(Backdrop$1, Object.assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
+                Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
                         zIndex: computedZIndex,
-                    } }))),
+                    } })),
                 React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
                         [styles.hidden]: !open && isExited,
                     }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
@@ -232,7 +231,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
                     tabIndex: 0, "data-test-id": dataTestId, style: {
                         zIndex: computedZIndex,
                     } },
-                    React.createElement(CSSTransition, Object.assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
+                    React.createElement(CSSTransition, { 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))))))))));
 });

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: pfi1g */
+/* hash: 150w0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_1q1ro {
+.base-modal__component_1i1k8 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_1q1ro {
+.base-modal__wrapper_1i1k8 {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_1q1ro {
+.base-modal__content_1i1k8 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_1q1ro {
+.base-modal__hidden_1i1k8 {
     display: none;
 }
-.base-modal__backdrop_1q1ro {
+.base-modal__backdrop_1i1k8 {
     z-index: 0;
 }
-.base-modal__appear_1q1ro,
-.base-modal__enter_1q1ro {
+.base-modal__appear_1i1k8,
+.base-modal__enter_1i1k8 {
     opacity: 0;
 }
-.base-modal__appearActive_1q1ro,
-.base-modal__enterActive_1q1ro {
+.base-modal__appearActive_1i1k8,
+.base-modal__enterActive_1i1k8 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_1q1ro {
+.base-modal__exit_1i1k8 {
     opacity: 1;
 }
-.base-modal__exitActive_1q1ro,
-.base-modal__exitDone_1q1ro {
+.base-modal__exitActive_1i1k8,
+.base-modal__exitDone_1i1k8 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/modern/index.js

@@ -1,13 +1,13 @@
 import 'react';
-import 'classnames';
+import 'react-focus-lock';
 import 'react-merge-refs';
-import '@juggle/resize-observer';
 import 'react-transition-group';
-import 'react-focus-lock';
-import './matches-polyfill.js';
-import '@alfalab/core-components-portal/modern';
+import '@juggle/resize-observer';
+import 'classnames';
 import '@alfalab/core-components-backdrop/modern';
+import '@alfalab/core-components-portal/modern';
 import '@alfalab/core-components-stack/modern';
 import '@alfalab/core-components-global-store/modern';
 export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
 export { BaseModal, BaseModalContext } from './Component.js';
+import './matches-polyfill.js';

package/modern/utils.js

@@ -33,9 +33,7 @@ const isOverflowing = (container) => {
     }
     return container.scrollHeight > container.clientHeight;
 };
-const getPaddingRight = (node) => {
-    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-};
+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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "5.0.3",
+    "version": "5.0.5",
     "description": "BaseModal component",
     "keywords": [],
     "license": "MIT",
@@ -14,8 +14,8 @@
     },
     "dependencies": {
         "@alfalab/core-components-backdrop": "^3.0.1",
-        "@alfalab/core-components-global-store": "^2.0.1",
-        "@alfalab/core-components-portal": "^3.0.1",
+        "@alfalab/core-components-global-store": "^2.0.2",
+        "@alfalab/core-components-portal": "^3.1.0",
         "@alfalab/core-components-stack": "^4.0.1",
         "@juggle/resize-observer": "^3.3.1",
         "classnames": "^2.3.1",

package/utils.js

@@ -37,9 +37,7 @@ var isOverflowing = function (container) {
     }
     return container.scrollHeight > container.clientHeight;
 };
-var getPaddingRight = function (node) {
-    return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
-};
+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; });