@alfalab/core-components 28.0.0 → 28.2.1

package/bank-card/modern/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { MaskedInput } from '../../masked-input/modern';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_18s49","aspectRatioContainer":"bank-card__aspectRatioContainer_18s49","content":"bank-card__content_18s49","label":"bank-card__label_18s49","focused":"bank-card__focused_18s49","filled":"bank-card__filled_18s49","input":"bank-card__input_18s49","bankLogo":"bank-card__bankLogo_18s49","brandLogo":"bank-card__brandLogo_18s49","usePhoto":"bank-card__usePhoto_18s49"};
+var styles = {"component":"bank-card__component_59pxf","aspectRatioContainer":"bank-card__aspectRatioContainer_59pxf","content":"bank-card__content_59pxf","label":"bank-card__label_59pxf","focused":"bank-card__focused_59pxf","filled":"bank-card__filled_59pxf","input":"bank-card__input_59pxf","bankLogo":"bank-card__bankLogo_59pxf","brandLogo":"bank-card__brandLogo_59pxf","usePhoto":"bank-card__usePhoto_59pxf"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -726,7 +726,7 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.bank-card__component_18s49 {
+.bank-card__component_59pxf {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -745,11 +745,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_18s49 {
+.bank-card__aspectRatioContainer_59pxf {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_18s49 {
+.bank-card__content_59pxf {
     position: absolute;
     top: 0;
     right: 0;
@@ -762,7 +762,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_18s49 {
+.bank-card__label_59pxf {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -770,25 +770,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_18s49 {
+.bank-card__label_59pxf {
         font-size: 16px
 }
     }
-.bank-card__focused_18s49 .bank-card__label_18s49,
-.bank-card__filled_18s49 .bank-card__label_18s49 {
+.bank-card__focused_59pxf .bank-card__label_59pxf,
+.bank-card__filled_59pxf .bank-card__label_59pxf {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_18s49 .bank-card__label_18s49,
-.bank-card__filled_18s49 .bank-card__label_18s49 {
+.bank-card__focused_59pxf .bank-card__label_59pxf,
+.bank-card__filled_59pxf .bank-card__label_59pxf {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_18s49:before {
+.bank-card__focused_59pxf:before {
     transform: scale(1) !important;
 }
-.bank-card__input_18s49 {
+.bank-card__input_59pxf {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -802,33 +802,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_18s49 {
+.bank-card__input_59pxf {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_18s49 {
+.bank-card__bankLogo_59pxf {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_18s49 svg {
+.bank-card__bankLogo_59pxf svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_18s49 svg g {
+.bank-card__bankLogo_59pxf svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_18s49 {
+.bank-card__brandLogo_59pxf {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_18s49 svg {
+.bank-card__brandLogo_59pxf svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_18s49 {
+.bank-card__usePhoto_59pxf {
     display: block;
     margin: 0;
     padding: 0;
@@ -846,7 +846,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_18s49 svg {
+.bank-card__usePhoto_59pxf svg {
         fill: var(--color-black);
         display: block;
     }

package/base-modal/Component.js

@@ -46,7 +46,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_p4puj","wrapper":"base-modal__wrapper_p4puj","content":"base-modal__content_p4puj","hidden":"base-modal__hidden_p4puj","backdrop":"base-modal__backdrop_p4puj","appear":"base-modal__appear_p4puj","enter":"base-modal__enter_p4puj","appearActive":"base-modal__appearActive_p4puj","enterActive":"base-modal__enterActive_p4puj","exit":"base-modal__exit_p4puj","exitActive":"base-modal__exitActive_p4puj","exitDone":"base-modal__exitDone_p4puj"};
+var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
 require('./index.css');
 
 var BaseModalContext = React__default['default'].createContext({
@@ -62,7 +62,6 @@ var BaseModalContext = React__default['default'].createContext({
     setHasFooter: function () { return null; },
     onClose: function () { return null; },
 });
-var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 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.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? coreComponentsStack.stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
     var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
@@ -78,6 +77,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var contentNodeRef = React.useRef(null);
     var restoreContainerStylesRef = React.useRef(null);
     var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -89,23 +89,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var getContainer = React.useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = React.useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    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;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -206,13 +209,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             setExited(false);
     }, [open]);
     React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
         return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var contextValue = React.useMemo(function () { return ({
         hasHeader: hasHeader,

package/base-modal/cssm/Component.js

@@ -61,7 +61,6 @@ var BaseModalContext = React__default['default'].createContext({
     setHasFooter: function () { return null; },
     onClose: function () { return null; },
 });
-var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 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.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? coreComponentsStack.stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
     var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
@@ -77,6 +76,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var contentNodeRef = React.useRef(null);
     var restoreContainerStylesRef = React.useRef(null);
     var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -88,23 +88,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var getContainer = React.useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = React.useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    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;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -205,13 +208,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             setExited(false);
     }, [open]);
     React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
         return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var contextValue = React.useMemo(function () { return ({
         hasHeader: hasHeader,

package/base-modal/esm/Component.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
+import { ResizeObserver } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
 import FocusLock from 'react-focus-lock';
 import { Portal } from '../../portal/esm';
@@ -37,7 +37,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_p4puj","wrapper":"base-modal__wrapper_p4puj","content":"base-modal__content_p4puj","hidden":"base-modal__hidden_p4puj","backdrop":"base-modal__backdrop_p4puj","appear":"base-modal__appear_p4puj","enter":"base-modal__enter_p4puj","appearActive":"base-modal__appearActive_p4puj","enterActive":"base-modal__enterActive_p4puj","exit":"base-modal__exit_p4puj","exitActive":"base-modal__exitActive_p4puj","exitDone":"base-modal__exitDone_p4puj"};
+var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
 require('./index.css');
 
 var BaseModalContext = React.createContext({
@@ -53,7 +53,6 @@ var BaseModalContext = React.createContext({
     setHasFooter: function () { return null; },
     onClose: function () { return null; },
 });
-var ResizeObserver = window.ResizeObserver || ResizeObserver$1;
 var BaseModal = 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$1 = _c === void 0 ? 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.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
     var _o = useState(!open), exited = _o[0], setExited = _o[1];
@@ -69,6 +68,7 @@ var BaseModal = forwardRef(function (_a, ref) {
     var contentNodeRef = useRef(null);
     var restoreContainerStylesRef = useRef(null);
     var mouseDownTarget = useRef();
+    var resizeObserverRef = useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -80,23 +80,26 @@ var BaseModal = forwardRef(function (_a, ref) {
     var getContainer = useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver = useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -197,13 +200,16 @@ var BaseModal = forwardRef(function (_a, ref) {
             setExited(false);
     }, [open]);
     useEffect(function () {
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
         return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var contextValue = useMemo(function () { return ({
         hasHeader: hasHeader,

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 12lf3 */
+/* hash: 175qx */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_p4puj {
+.base-modal__component_12xfo {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_p4puj {
+.base-modal__wrapper_12xfo {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_p4puj {
+.base-modal__content_12xfo {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_p4puj {
+.base-modal__hidden_12xfo {
     display: none;
 }
-.base-modal__backdrop_p4puj {
+.base-modal__backdrop_12xfo {
     z-index: 0;
 }
-.base-modal__appear_p4puj,
-.base-modal__enter_p4puj {
+.base-modal__appear_12xfo,
+.base-modal__enter_12xfo {
     opacity: 0;
 }
-.base-modal__appearActive_p4puj,
-.base-modal__enterActive_p4puj {
+.base-modal__appearActive_12xfo,
+.base-modal__enterActive_12xfo {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_p4puj {
+.base-modal__exit_12xfo {
     opacity: 1;
 }
-.base-modal__exitActive_p4puj,
-.base-modal__exitDone_p4puj {
+.base-modal__exitActive_12xfo,
+.base-modal__exitDone_12xfo {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.css

@@ -1,4 +1,4 @@
-/* hash: 12lf3 */
+/* hash: 175qx */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_p4puj {
+.base-modal__component_12xfo {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_p4puj {
+.base-modal__wrapper_12xfo {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_p4puj {
+.base-modal__content_12xfo {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_p4puj {
+.base-modal__hidden_12xfo {
     display: none;
 }
-.base-modal__backdrop_p4puj {
+.base-modal__backdrop_12xfo {
     z-index: 0;
 }
-.base-modal__appear_p4puj,
-.base-modal__enter_p4puj {
+.base-modal__appear_12xfo,
+.base-modal__enter_12xfo {
     opacity: 0;
 }
-.base-modal__appearActive_p4puj,
-.base-modal__enterActive_p4puj {
+.base-modal__appearActive_12xfo,
+.base-modal__enterActive_12xfo {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_p4puj {
+.base-modal__exit_12xfo {
     opacity: 1;
 }
-.base-modal__exitActive_p4puj,
-.base-modal__exitDone_p4puj {
+.base-modal__exitActive_12xfo,
+.base-modal__exitDone_12xfo {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/modern/Component.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
+import { ResizeObserver } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
 import FocusLock from 'react-focus-lock';
 import { Portal } from '../../portal/modern';
@@ -10,7 +10,7 @@ import { stackingOrder, Stack } from '../../stack/modern';
 import '../../global-store/modern';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 
-var styles = {"component":"base-modal__component_p4puj","wrapper":"base-modal__wrapper_p4puj","content":"base-modal__content_p4puj","hidden":"base-modal__hidden_p4puj","backdrop":"base-modal__backdrop_p4puj","appear":"base-modal__appear_p4puj","enter":"base-modal__enter_p4puj","appearActive":"base-modal__appearActive_p4puj","enterActive":"base-modal__enterActive_p4puj","exit":"base-modal__exit_p4puj","exitActive":"base-modal__exitActive_p4puj","exitDone":"base-modal__exitDone_p4puj"};
+var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -27,7 +27,6 @@ const BaseModalContext = React.createContext({
     setHasFooter: () => null,
     onClose: () => null,
 });
-const ResizeObserver = window.ResizeObserver || ResizeObserver$1;
 const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, keepMounted = false, className, contentClassName, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, }, ref) => {
     const [exited, setExited] = useState(!open);
     const [hasScroll, setHasScroll] = useState(false);
@@ -42,6 +41,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const contentNodeRef = useRef(null);
     const restoreContainerStylesRef = useRef(null);
     const mouseDownTarget = useRef();
+    const resizeObserverRef = useRef();
     const checkToHasScrollBar = () => {
         if (scrollableNodeRef.current) {
             const scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -53,23 +53,26 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const getContainer = useCallback(() => {
         return (container ? container() : document.body);
     }, [container]);
-    const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
     const addResizeHandle = useCallback(() => {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    const removeResizeHandle = useCallback(() => {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
     const contentRef = useCallback((node) => {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     const handleScroll = useCallback(() => {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -170,13 +173,16 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             setExited(false);
     }, [open]);
     useEffect(() => {
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
         return () => {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = useMemo(() => ({
         hasHeader,