@alfalab/core-components 27.12.0 → 27.14.0

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_25mq0","aspectRatioContainer":"bank-card__aspectRatioContainer_25mq0","content":"bank-card__content_25mq0","label":"bank-card__label_25mq0","focused":"bank-card__focused_25mq0","filled":"bank-card__filled_25mq0","input":"bank-card__input_25mq0","bankLogo":"bank-card__bankLogo_25mq0","brandLogo":"bank-card__brandLogo_25mq0","usePhoto":"bank-card__usePhoto_25mq0"};
+var styles = {"component":"bank-card__component_117t7","aspectRatioContainer":"bank-card__aspectRatioContainer_117t7","content":"bank-card__content_117t7","label":"bank-card__label_117t7","focused":"bank-card__focused_117t7","filled":"bank-card__filled_117t7","input":"bank-card__input_117t7","bankLogo":"bank-card__bankLogo_117t7","brandLogo":"bank-card__brandLogo_117t7","usePhoto":"bank-card__usePhoto_117t7"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -722,7 +722,7 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.bank-card__component_25mq0 {
+.bank-card__component_117t7 {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -741,11 +741,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_25mq0 {
+.bank-card__aspectRatioContainer_117t7 {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_25mq0 {
+.bank-card__content_117t7 {
     position: absolute;
     top: 0;
     right: 0;
@@ -758,7 +758,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_25mq0 {
+.bank-card__label_117t7 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -766,25 +766,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_25mq0 {
+.bank-card__label_117t7 {
         font-size: 16px
 }
     }
-.bank-card__focused_25mq0 .bank-card__label_25mq0,
-.bank-card__filled_25mq0 .bank-card__label_25mq0 {
+.bank-card__focused_117t7 .bank-card__label_117t7,
+.bank-card__filled_117t7 .bank-card__label_117t7 {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_25mq0 .bank-card__label_25mq0,
-.bank-card__filled_25mq0 .bank-card__label_25mq0 {
+.bank-card__focused_117t7 .bank-card__label_117t7,
+.bank-card__filled_117t7 .bank-card__label_117t7 {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_25mq0:before {
+.bank-card__focused_117t7:before {
     transform: scale(1) !important;
 }
-.bank-card__input_25mq0 {
+.bank-card__input_117t7 {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -798,33 +798,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_25mq0 {
+.bank-card__input_117t7 {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_25mq0 {
+.bank-card__bankLogo_117t7 {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_25mq0 svg {
+.bank-card__bankLogo_117t7 svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_25mq0 svg g {
+.bank-card__bankLogo_117t7 svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_25mq0 {
+.bank-card__brandLogo_117t7 {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_25mq0 svg {
+.bank-card__brandLogo_117t7 svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_25mq0 {
+.bank-card__usePhoto_117t7 {
     display: block;
     margin: 0;
     padding: 0;
@@ -842,7 +842,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_25mq0 svg {
+.bank-card__usePhoto_117t7 svg {
         fill: var(--color-black);
         display: block;
     }

package/base-modal/Component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('resize-observer');
+var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
 var FocusLock = require('react-focus-lock');
 var coreComponentsPortal = require('../portal');
@@ -46,7 +46,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_14k6s","wrapper":"base-modal__wrapper_14k6s","content":"base-modal__content_14k6s","hidden":"base-modal__hidden_14k6s","backdrop":"base-modal__backdrop_14k6s","appear":"base-modal__appear_14k6s","enter":"base-modal__enter_14k6s","appearActive":"base-modal__appearActive_14k6s","enterActive":"base-modal__enterActive_14k6s","exit":"base-modal__exit_14k6s","exitActive":"base-modal__exitActive_14k6s","exitDone":"base-modal__exitDone_14k6s"};
+var styles = {"component":"base-modal__component_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
 require('./index.css');
 
 var BaseModalContext = React__default['default'].createContext({
@@ -62,6 +62,7 @@ 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];
@@ -76,6 +77,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var scrollableNodeRef = React.useRef(null);
     var contentNodeRef = React.useRef(null);
     var restoreContainerStylesRef = React.useRef(null);
+    var mouseDownTarget = React.useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -87,23 +89,23 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var getContainer = React.useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
+    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
         if (scrollableNodeRef.current)
-            resizeObserver$1.observe(scrollableNodeRef.current);
+            resizeObserver.observe(scrollableNodeRef.current);
         if (contentNodeRef.current)
-            resizeObserver$1.observe(contentNodeRef.current);
-    }, [resizeObserver$1]);
+            resizeObserver.observe(contentNodeRef.current);
+    }, [resizeObserver]);
     var removeResizeHandle = React.useCallback(function () {
-        resizeObserver$1.disconnect();
-    }, [resizeObserver$1]);
+        resizeObserver.disconnect();
+    }, [resizeObserver]);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver$1.observe(node);
+            resizeObserver.observe(node);
             checkToHasScrollBar();
         }
-    }, [resizeObserver$1]);
+    }, [resizeObserver]);
     var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -129,8 +131,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         }
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
-    var handleBackdropClick = function (event) {
-        if (!disableBackdropClick && event.target === wrapperRef.current) {
+    var handleBackdropMouseDown = function (event) {
+        if (!disableBackdropClick) {
+            mouseDownTarget.current = event.target;
+        }
+    };
+    var handleBackdropMouseUp = function (event) {
+        if (!disableBackdropClick &&
+            event.target === wrapperRef.current &&
+            mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
     };
@@ -201,7 +210,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver$1.disconnect();
+            resizeObserver.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -240,7 +249,7 @@ 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 && exited,
-                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "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/base-modal/cssm/Component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('resize-observer');
+var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
 var FocusLock = require('react-focus-lock');
 var coreComponentsPortal = require('../../portal/cssm');
@@ -61,6 +61,7 @@ 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];
@@ -75,6 +76,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var scrollableNodeRef = React.useRef(null);
     var contentNodeRef = React.useRef(null);
     var restoreContainerStylesRef = React.useRef(null);
+    var mouseDownTarget = React.useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -86,23 +88,23 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var getContainer = React.useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
+    var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
     var addResizeHandle = React.useCallback(function () {
         if (scrollableNodeRef.current)
-            resizeObserver$1.observe(scrollableNodeRef.current);
+            resizeObserver.observe(scrollableNodeRef.current);
         if (contentNodeRef.current)
-            resizeObserver$1.observe(contentNodeRef.current);
-    }, [resizeObserver$1]);
+            resizeObserver.observe(contentNodeRef.current);
+    }, [resizeObserver]);
     var removeResizeHandle = React.useCallback(function () {
-        resizeObserver$1.disconnect();
-    }, [resizeObserver$1]);
+        resizeObserver.disconnect();
+    }, [resizeObserver]);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver$1.observe(node);
+            resizeObserver.observe(node);
             checkToHasScrollBar();
         }
-    }, [resizeObserver$1]);
+    }, [resizeObserver]);
     var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -128,8 +130,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         }
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
-    var handleBackdropClick = function (event) {
-        if (!disableBackdropClick && event.target === wrapperRef.current) {
+    var handleBackdropMouseDown = function (event) {
+        if (!disableBackdropClick) {
+            mouseDownTarget.current = event.target;
+        }
+    };
+    var handleBackdropMouseUp = function (event) {
+        if (!disableBackdropClick &&
+            event.target === wrapperRef.current &&
+            mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
     };
@@ -200,7 +209,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver$1.disconnect();
+            resizeObserver.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -239,7 +248,7 @@ 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 && exited,
-                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "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/base-modal/cssm/index.js

@@ -4,7 +4,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
-require('resize-observer');
+require('@juggle/resize-observer');
 require('react-transition-group');
 require('react-focus-lock');
 require('../../portal/cssm');

package/base-modal/esm/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver } from 'resize-observer';
+import { ResizeObserver as ResizeObserver$1 } 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_14k6s","wrapper":"base-modal__wrapper_14k6s","content":"base-modal__content_14k6s","hidden":"base-modal__hidden_14k6s","backdrop":"base-modal__backdrop_14k6s","appear":"base-modal__appear_14k6s","enter":"base-modal__enter_14k6s","appearActive":"base-modal__appearActive_14k6s","enterActive":"base-modal__enterActive_14k6s","exit":"base-modal__exit_14k6s","exitActive":"base-modal__exitActive_14k6s","exitDone":"base-modal__exitDone_14k6s"};
+var styles = {"component":"base-modal__component_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
 require('./index.css');
 
 var BaseModalContext = React.createContext({
@@ -53,6 +53,7 @@ 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];
@@ -67,6 +68,7 @@ var BaseModal = forwardRef(function (_a, ref) {
     var scrollableNodeRef = useRef(null);
     var contentNodeRef = useRef(null);
     var restoreContainerStylesRef = useRef(null);
+    var mouseDownTarget = useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -120,8 +122,15 @@ var BaseModal = forwardRef(function (_a, ref) {
         }
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
-    var handleBackdropClick = function (event) {
-        if (!disableBackdropClick && event.target === wrapperRef.current) {
+    var handleBackdropMouseDown = function (event) {
+        if (!disableBackdropClick) {
+            mouseDownTarget.current = event.target;
+        }
+    };
+    var handleBackdropMouseUp = function (event) {
+        if (!disableBackdropClick &&
+            event.target === wrapperRef.current &&
+            mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
     };
@@ -231,7 +240,7 @@ var BaseModal = forwardRef(function (_a, ref) {
                         } }))),
                     React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
                             _a[styles.hidden] = !open && exited,
-                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "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/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 5o7wx */
+/* hash: a8jqp */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -722,14 +722,14 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.base-modal__component_14k6s {
+.base-modal__component_8t6ig {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_14k6s {
+.base-modal__wrapper_8t6ig {
     position: fixed;
     top: 0;
     left: 0;
@@ -742,33 +742,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_14k6s {
+.base-modal__content_8t6ig {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_14k6s {
+.base-modal__hidden_8t6ig {
     display: none;
 }
-.base-modal__backdrop_14k6s {
+.base-modal__backdrop_8t6ig {
     z-index: 0;
 }
-.base-modal__appear_14k6s,
-.base-modal__enter_14k6s {
+.base-modal__appear_8t6ig,
+.base-modal__enter_8t6ig {
     opacity: 0;
 }
-.base-modal__appearActive_14k6s,
-.base-modal__enterActive_14k6s {
+.base-modal__appearActive_8t6ig,
+.base-modal__enterActive_8t6ig {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_14k6s {
+.base-modal__exit_8t6ig {
     opacity: 1;
 }
-.base-modal__exitActive_14k6s,
-.base-modal__exitDone_14k6s {
+.base-modal__exitActive_8t6ig,
+.base-modal__exitDone_8t6ig {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/esm/index.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
-import 'resize-observer';
+import '@juggle/resize-observer';
 import 'react-transition-group';
 import 'react-focus-lock';
 import '../../portal/esm';

package/base-modal/index.css

@@ -1,4 +1,4 @@
-/* hash: 5o7wx */
+/* hash: a8jqp */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -722,14 +722,14 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.base-modal__component_14k6s {
+.base-modal__component_8t6ig {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_14k6s {
+.base-modal__wrapper_8t6ig {
     position: fixed;
     top: 0;
     left: 0;
@@ -742,33 +742,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_14k6s {
+.base-modal__content_8t6ig {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_14k6s {
+.base-modal__hidden_8t6ig {
     display: none;
 }
-.base-modal__backdrop_14k6s {
+.base-modal__backdrop_8t6ig {
     z-index: 0;
 }
-.base-modal__appear_14k6s,
-.base-modal__enter_14k6s {
+.base-modal__appear_8t6ig,
+.base-modal__enter_8t6ig {
     opacity: 0;
 }
-.base-modal__appearActive_14k6s,
-.base-modal__enterActive_14k6s {
+.base-modal__appearActive_8t6ig,
+.base-modal__enterActive_8t6ig {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_14k6s {
+.base-modal__exit_8t6ig {
     opacity: 1;
 }
-.base-modal__exitActive_14k6s,
-.base-modal__exitDone_14k6s {
+.base-modal__exitActive_8t6ig,
+.base-modal__exitDone_8t6ig {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.js

@@ -4,7 +4,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
-require('resize-observer');
+require('@juggle/resize-observer');
 require('react-transition-group');
 require('react-focus-lock');
 require('../portal');

package/base-modal/modern/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver } from 'resize-observer';
+import { ResizeObserver as ResizeObserver$1 } 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_14k6s","wrapper":"base-modal__wrapper_14k6s","content":"base-modal__content_14k6s","hidden":"base-modal__hidden_14k6s","backdrop":"base-modal__backdrop_14k6s","appear":"base-modal__appear_14k6s","enter":"base-modal__enter_14k6s","appearActive":"base-modal__appearActive_14k6s","enterActive":"base-modal__enterActive_14k6s","exit":"base-modal__exit_14k6s","exitActive":"base-modal__exitActive_14k6s","exitDone":"base-modal__exitDone_14k6s"};
+var styles = {"component":"base-modal__component_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -27,6 +27,7 @@ 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);
@@ -40,6 +41,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const scrollableNodeRef = useRef(null);
     const contentNodeRef = useRef(null);
     const restoreContainerStylesRef = useRef(null);
+    const mouseDownTarget = useRef();
     const checkToHasScrollBar = () => {
         if (scrollableNodeRef.current) {
             const scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -93,8 +95,15 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
-    const handleBackdropClick = (event) => {
-        if (!disableBackdropClick && event.target === wrapperRef.current) {
+    const handleBackdropMouseDown = (event) => {
+        if (!disableBackdropClick) {
+            mouseDownTarget.current = event.target;
+        }
+    };
+    const handleBackdropMouseUp = (event) => {
+        if (!disableBackdropClick &&
+            event.target === wrapperRef.current &&
+            mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
     };
@@ -202,7 +211,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
                     } }))),
                 React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
                         [styles.hidden]: !open && exited,
-                    }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
+                    }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "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 }),