@alfalab/core-components-base-modal 5.0.2 → 5.0.4

package/Component.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-require('element-matches-polyfill');
 var cn = require('classnames');
 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 coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
 var coreComponentsStack = require('@alfalab/core-components-stack');
@@ -49,7 +49,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_jk0n1","wrapper":"base-modal__wrapper_jk0n1","content":"base-modal__content_jk0n1","hidden":"base-modal__hidden_jk0n1","backdrop":"base-modal__backdrop_jk0n1","appear":"base-modal__appear_jk0n1","enter":"base-modal__enter_jk0n1","appearActive":"base-modal__appearActive_jk0n1","enterActive":"base-modal__enterActive_jk0n1","exit":"base-modal__exit_jk0n1","exitActive":"base-modal__exitActive_jk0n1","exitDone":"base-modal__exitDone_jk0n1"};
+var styles = {"component":"base-modal__component_pnet3","wrapper":"base-modal__wrapper_pnet3","content":"base-modal__content_pnet3","hidden":"base-modal__hidden_pnet3","backdrop":"base-modal__backdrop_pnet3","appear":"base-modal__appear_pnet3","enter":"base-modal__enter_pnet3","appearActive":"base-modal__appearActive_pnet3","enterActive":"base-modal__enterActive_pnet3","exit":"base-modal__exit_pnet3","exitActive":"base-modal__exitActive_pnet3","exitDone":"base-modal__exitDone_pnet3"};
 require('./index.css')
 
 var BaseModalContext = React__default['default'].createContext({
@@ -260,7 +260,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: {
@@ -268,7 +268,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         } }))),
                     React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles.wrapper, wrapperClassName, (_a = {},
                             _a[styles.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs__default['default']([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,
                         } },
                         React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/cssm/Component.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-require('element-matches-polyfill');
 var cn = require('classnames');
 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 coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
 var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
@@ -259,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__default['default'].backdrop), open: open, style: {
@@ -267,7 +267,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         } }))),
                     React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles__default['default'].wrapper, wrapperClassName, (_a = {},
                             _a[styles__default['default'].hidden] = !open && isExited,
-                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs__default['default']([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,
                         } },
                         React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles__default['default'] }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/cssm/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 require('react');
-require('element-matches-polyfill');
 require('classnames');
 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('@alfalab/core-components-backdrop/cssm');
 require('@alfalab/core-components-stack/cssm');

package/cssm/matches-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/cssm/matches-polyfill.js

@@ -0,0 +1,20 @@
+'use strict';
+
+/* 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) {
+                    var matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    var i = matches.length;
+                    while (--i >= 0 && matches.item(i) !== this) { }
+                    return i > -1;
+                };
+    }
+}

package/esm/Component.js

@@ -1,10 +1,10 @@
 import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import 'element-matches-polyfill';
 import cn from 'classnames';
 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 { Backdrop } from '@alfalab/core-components-backdrop/esm';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
@@ -38,7 +38,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_jk0n1","wrapper":"base-modal__wrapper_jk0n1","content":"base-modal__content_jk0n1","hidden":"base-modal__hidden_jk0n1","backdrop":"base-modal__backdrop_jk0n1","appear":"base-modal__appear_jk0n1","enter":"base-modal__enter_jk0n1","appearActive":"base-modal__appearActive_jk0n1","enterActive":"base-modal__enterActive_jk0n1","exit":"base-modal__exit_jk0n1","exitActive":"base-modal__exitActive_jk0n1","exitDone":"base-modal__exitDone_jk0n1"};
+var styles = {"component":"base-modal__component_pnet3","wrapper":"base-modal__wrapper_pnet3","content":"base-modal__content_pnet3","hidden":"base-modal__hidden_pnet3","backdrop":"base-modal__backdrop_pnet3","appear":"base-modal__appear_pnet3","enter":"base-modal__enter_pnet3","appearActive":"base-modal__appearActive_pnet3","enterActive":"base-modal__enterActive_pnet3","exit":"base-modal__exit_pnet3","exitActive":"base-modal__exitActive_pnet3","exitDone":"base-modal__exitDone_pnet3"};
 require('./index.css')
 
 var BaseModalContext = React.createContext({
@@ -249,7 +249,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: {
@@ -257,7 +257,9 @@ var BaseModal = forwardRef(function (_a, ref) {
                         } }))),
                     React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
                             _a[styles.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), 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,
                         } },
                         React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: negt7 */
+/* hash: 1kbo0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_jk0n1 {
+.base-modal__component_pnet3 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_jk0n1 {
+.base-modal__wrapper_pnet3 {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_jk0n1 {
+.base-modal__content_pnet3 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_jk0n1 {
+.base-modal__hidden_pnet3 {
     display: none;
 }
-.base-modal__backdrop_jk0n1 {
+.base-modal__backdrop_pnet3 {
     z-index: 0;
 }
-.base-modal__appear_jk0n1,
-.base-modal__enter_jk0n1 {
+.base-modal__appear_pnet3,
+.base-modal__enter_pnet3 {
     opacity: 0;
 }
-.base-modal__appearActive_jk0n1,
-.base-modal__enterActive_jk0n1 {
+.base-modal__appearActive_pnet3,
+.base-modal__enterActive_pnet3 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_jk0n1 {
+.base-modal__exit_pnet3 {
     opacity: 1;
 }
-.base-modal__exitActive_jk0n1,
-.base-modal__exitDone_jk0n1 {
+.base-modal__exitActive_pnet3,
+.base-modal__exitDone_pnet3 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/esm/index.js

@@ -1,11 +1,11 @@
 export { BaseModal, BaseModalContext } from './Component.js';
 import 'react';
-import 'element-matches-polyfill';
 import 'classnames';
 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 '@alfalab/core-components-backdrop/esm';
 import '@alfalab/core-components-stack/esm';

package/esm/matches-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/matches-polyfill.js

@@ -0,0 +1,18 @@
+/* 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) {
+                    var matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    var i = matches.length;
+                    while (--i >= 0 && matches.item(i) !== this) { }
+                    return i > -1;
+                };
+    }
+}

package/index.css

@@ -1,4 +1,4 @@
-/* hash: negt7 */
+/* hash: 1kbo0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_jk0n1 {
+.base-modal__component_pnet3 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_jk0n1 {
+.base-modal__wrapper_pnet3 {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_jk0n1 {
+.base-modal__content_pnet3 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_jk0n1 {
+.base-modal__hidden_pnet3 {
     display: none;
 }
-.base-modal__backdrop_jk0n1 {
+.base-modal__backdrop_pnet3 {
     z-index: 0;
 }
-.base-modal__appear_jk0n1,
-.base-modal__enter_jk0n1 {
+.base-modal__appear_pnet3,
+.base-modal__enter_pnet3 {
     opacity: 0;
 }
-.base-modal__appearActive_jk0n1,
-.base-modal__enterActive_jk0n1 {
+.base-modal__appearActive_pnet3,
+.base-modal__enterActive_pnet3 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_jk0n1 {
+.base-modal__exit_pnet3 {
     opacity: 1;
 }
-.base-modal__exitActive_jk0n1,
-.base-modal__exitDone_jk0n1 {
+.base-modal__exitActive_pnet3,
+.base-modal__exitDone_pnet3 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 require('react');
-require('element-matches-polyfill');
 require('classnames');
 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('@alfalab/core-components-backdrop');
 require('@alfalab/core-components-stack');

package/matches-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/matches-polyfill.js

@@ -0,0 +1,20 @@
+'use strict';
+
+/* 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) {
+                    var matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    var i = matches.length;
+                    while (--i >= 0 && matches.item(i) !== this) { }
+                    return i > -1;
+                };
+    }
+}

package/modern/Component.js

@@ -1,17 +1,17 @@
 import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import 'element-matches-polyfill';
 import cn from 'classnames';
 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 { Backdrop } from '@alfalab/core-components-backdrop/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';
 
-var styles = {"component":"base-modal__component_jk0n1","wrapper":"base-modal__wrapper_jk0n1","content":"base-modal__content_jk0n1","hidden":"base-modal__hidden_jk0n1","backdrop":"base-modal__backdrop_jk0n1","appear":"base-modal__appear_jk0n1","enter":"base-modal__enter_jk0n1","appearActive":"base-modal__appearActive_jk0n1","enterActive":"base-modal__enterActive_jk0n1","exit":"base-modal__exit_jk0n1","exitActive":"base-modal__exitActive_jk0n1","exitDone":"base-modal__exitDone_jk0n1"};
+var styles = {"component":"base-modal__component_pnet3","wrapper":"base-modal__wrapper_pnet3","content":"base-modal__content_pnet3","hidden":"base-modal__hidden_pnet3","backdrop":"base-modal__backdrop_pnet3","appear":"base-modal__appear_pnet3","enter":"base-modal__enter_pnet3","appearActive":"base-modal__appearActive_pnet3","enterActive":"base-modal__enterActive_pnet3","exit":"base-modal__exit_pnet3","exitActive":"base-modal__exitActive_pnet3","exitDone":"base-modal__exitDone_pnet3"};
 require('./index.css')
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -219,7 +219,7 @@ 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: {
@@ -227,7 +227,9 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
                     } }))),
                 React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
                         [styles.hidden]: !open && isExited,
-                    }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                    }), 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,
                     } },
                     React.createElement(CSSTransition, Object.assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: negt7 */
+/* hash: 1kbo0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_jk0n1 {
+.base-modal__component_pnet3 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_jk0n1 {
+.base-modal__wrapper_pnet3 {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_jk0n1 {
+.base-modal__content_pnet3 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_jk0n1 {
+.base-modal__hidden_pnet3 {
     display: none;
 }
-.base-modal__backdrop_jk0n1 {
+.base-modal__backdrop_pnet3 {
     z-index: 0;
 }
-.base-modal__appear_jk0n1,
-.base-modal__enter_jk0n1 {
+.base-modal__appear_pnet3,
+.base-modal__enter_pnet3 {
     opacity: 0;
 }
-.base-modal__appearActive_jk0n1,
-.base-modal__enterActive_jk0n1 {
+.base-modal__appearActive_pnet3,
+.base-modal__enterActive_pnet3 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_jk0n1 {
+.base-modal__exit_pnet3 {
     opacity: 1;
 }
-.base-modal__exitActive_jk0n1,
-.base-modal__exitDone_jk0n1 {
+.base-modal__exitActive_pnet3,
+.base-modal__exitDone_pnet3 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/modern/index.js

@@ -1,10 +1,10 @@
 import 'react';
-import 'element-matches-polyfill';
 import 'classnames';
 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 '@alfalab/core-components-backdrop/modern';
 import '@alfalab/core-components-stack/modern';

package/modern/matches-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/modern/matches-polyfill.js

@@ -0,0 +1,18 @@
+/* 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-base-modal",
-    "version": "5.0.2",
+    "version": "5.0.4",
     "description": "BaseModal component",
     "keywords": [],
     "license": "MIT",
@@ -15,12 +15,11 @@
     "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-portal": "^3.1.0",
         "@alfalab/core-components-stack": "^4.0.1",
         "@juggle/resize-observer": "^3.3.1",
         "classnames": "^2.3.1",
-        "element-matches-polyfill": "^1.0.0",
-        "react-focus-lock": "^2.5.0",
+        "react-focus-lock": "^2.9.1",
         "react-merge-refs": "^1.1.0",
         "react-transition-group": "^4.4.1"
     },