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

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_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"};
 require('./index.css')
 
 var BaseModalContext = React__default['default'].createContext({
@@ -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');
@@ -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_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"};
 require('./index.css')
 
 var BaseModalContext = React.createContext({
@@ -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: pfi1g */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_jk0n1 {
+.base-modal__component_1q1ro {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_jk0n1 {
+.base-modal__wrapper_1q1ro {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_jk0n1 {
+.base-modal__content_1q1ro {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_jk0n1 {
+.base-modal__hidden_1q1ro {
     display: none;
 }
-.base-modal__backdrop_jk0n1 {
+.base-modal__backdrop_1q1ro {
     z-index: 0;
 }
-.base-modal__appear_jk0n1,
-.base-modal__enter_jk0n1 {
+.base-modal__appear_1q1ro,
+.base-modal__enter_1q1ro {
     opacity: 0;
 }
-.base-modal__appearActive_jk0n1,
-.base-modal__enterActive_jk0n1 {
+.base-modal__appearActive_1q1ro,
+.base-modal__enterActive_1q1ro {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_jk0n1 {
+.base-modal__exit_1q1ro {
     opacity: 1;
 }
-.base-modal__exitActive_jk0n1,
-.base-modal__exitDone_jk0n1 {
+.base-modal__exitActive_1q1ro,
+.base-modal__exitDone_1q1ro {
     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: pfi1g */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_jk0n1 {
+.base-modal__component_1q1ro {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_jk0n1 {
+.base-modal__wrapper_1q1ro {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_jk0n1 {
+.base-modal__content_1q1ro {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_jk0n1 {
+.base-modal__hidden_1q1ro {
     display: none;
 }
-.base-modal__backdrop_jk0n1 {
+.base-modal__backdrop_1q1ro {
     z-index: 0;
 }
-.base-modal__appear_jk0n1,
-.base-modal__enter_jk0n1 {
+.base-modal__appear_1q1ro,
+.base-modal__enter_1q1ro {
     opacity: 0;
 }
-.base-modal__appearActive_jk0n1,
-.base-modal__enterActive_jk0n1 {
+.base-modal__appearActive_1q1ro,
+.base-modal__enterActive_1q1ro {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_jk0n1 {
+.base-modal__exit_1q1ro {
     opacity: 1;
 }
-.base-modal__exitActive_jk0n1,
-.base-modal__exitDone_jk0n1 {
+.base-modal__exitActive_1q1ro,
+.base-modal__exitDone_1q1ro {
     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_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"};
 require('./index.css')
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -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: pfi1g */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_jk0n1 {
+.base-modal__component_1q1ro {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_jk0n1 {
+.base-modal__wrapper_1q1ro {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_jk0n1 {
+.base-modal__content_1q1ro {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_jk0n1 {
+.base-modal__hidden_1q1ro {
     display: none;
 }
-.base-modal__backdrop_jk0n1 {
+.base-modal__backdrop_1q1ro {
     z-index: 0;
 }
-.base-modal__appear_jk0n1,
-.base-modal__enter_jk0n1 {
+.base-modal__appear_1q1ro,
+.base-modal__enter_1q1ro {
     opacity: 0;
 }
-.base-modal__appearActive_jk0n1,
-.base-modal__enterActive_jk0n1 {
+.base-modal__appearActive_1q1ro,
+.base-modal__enterActive_1q1ro {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_jk0n1 {
+.base-modal__exit_1q1ro {
     opacity: 1;
 }
-.base-modal__exitActive_jk0n1,
-.base-modal__exitDone_jk0n1 {
+.base-modal__exitActive_1q1ro,
+.base-modal__exitDone_1q1ro {
     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.3",
     "description": "BaseModal component",
     "keywords": [],
     "license": "MIT",
@@ -19,8 +19,7 @@
         "@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"
     },