@alfalab/core-components 28.6.0 → 28.7.0

package/bank-card/index.css

@@ -708,6 +708,7 @@
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
     --border-radius-xxl: 20px;
+    --border-radius-3xl: 24px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -726,7 +727,7 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.bank-card__component_rn4td {
+.bank-card__component_1sc6m {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -745,11 +746,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_rn4td {
+.bank-card__aspectRatioContainer_1sc6m {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_rn4td {
+.bank-card__content_1sc6m {
     position: absolute;
     top: 0;
     right: 0;
@@ -762,7 +763,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_rn4td {
+.bank-card__label_1sc6m {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -770,25 +771,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_rn4td {
+.bank-card__label_1sc6m {
         font-size: 16px
 }
     }
-.bank-card__focused_rn4td .bank-card__label_rn4td,
-.bank-card__filled_rn4td .bank-card__label_rn4td {
+.bank-card__focused_1sc6m .bank-card__label_1sc6m,
+.bank-card__filled_1sc6m .bank-card__label_1sc6m {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_rn4td .bank-card__label_rn4td,
-.bank-card__filled_rn4td .bank-card__label_rn4td {
+.bank-card__focused_1sc6m .bank-card__label_1sc6m,
+.bank-card__filled_1sc6m .bank-card__label_1sc6m {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_rn4td:before {
+.bank-card__focused_1sc6m:before {
     transform: scale(1) !important;
 }
-.bank-card__input_rn4td {
+.bank-card__input_1sc6m {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -802,33 +803,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_rn4td {
+.bank-card__input_1sc6m {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_rn4td {
+.bank-card__bankLogo_1sc6m {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_rn4td svg {
+.bank-card__bankLogo_1sc6m svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_rn4td svg g {
+.bank-card__bankLogo_1sc6m svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_rn4td {
+.bank-card__brandLogo_1sc6m {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_rn4td svg {
+.bank-card__brandLogo_1sc6m svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_rn4td {
+.bank-card__usePhoto_1sc6m {
     display: block;
     margin: 0;
     padding: 0;
@@ -846,7 +847,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_rn4td svg {
+.bank-card__usePhoto_1sc6m svg {
         fill: var(--color-black);
         display: block;
     }

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_rn4td","aspectRatioContainer":"bank-card__aspectRatioContainer_rn4td","content":"bank-card__content_rn4td","label":"bank-card__label_rn4td","focused":"bank-card__focused_rn4td","filled":"bank-card__filled_rn4td","input":"bank-card__input_rn4td","bankLogo":"bank-card__bankLogo_rn4td","brandLogo":"bank-card__brandLogo_rn4td","usePhoto":"bank-card__usePhoto_rn4td"};
+var styles = {"component":"bank-card__component_1sc6m","aspectRatioContainer":"bank-card__aspectRatioContainer_1sc6m","content":"bank-card__content_1sc6m","label":"bank-card__label_1sc6m","focused":"bank-card__focused_1sc6m","filled":"bank-card__filled_1sc6m","input":"bank-card__input_1sc6m","bankLogo":"bank-card__bankLogo_1sc6m","brandLogo":"bank-card__brandLogo_1sc6m","usePhoto":"bank-card__usePhoto_1sc6m"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -708,6 +708,7 @@
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
     --border-radius-xxl: 20px;
+    --border-radius-3xl: 24px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -726,7 +727,7 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.bank-card__component_rn4td {
+.bank-card__component_1sc6m {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -745,11 +746,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_rn4td {
+.bank-card__aspectRatioContainer_1sc6m {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_rn4td {
+.bank-card__content_1sc6m {
     position: absolute;
     top: 0;
     right: 0;
@@ -762,7 +763,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_rn4td {
+.bank-card__label_1sc6m {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -770,25 +771,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_rn4td {
+.bank-card__label_1sc6m {
         font-size: 16px
 }
     }
-.bank-card__focused_rn4td .bank-card__label_rn4td,
-.bank-card__filled_rn4td .bank-card__label_rn4td {
+.bank-card__focused_1sc6m .bank-card__label_1sc6m,
+.bank-card__filled_1sc6m .bank-card__label_1sc6m {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_rn4td .bank-card__label_rn4td,
-.bank-card__filled_rn4td .bank-card__label_rn4td {
+.bank-card__focused_1sc6m .bank-card__label_1sc6m,
+.bank-card__filled_1sc6m .bank-card__label_1sc6m {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_rn4td:before {
+.bank-card__focused_1sc6m:before {
     transform: scale(1) !important;
 }
-.bank-card__input_rn4td {
+.bank-card__input_1sc6m {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -802,33 +803,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_rn4td {
+.bank-card__input_1sc6m {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_rn4td {
+.bank-card__bankLogo_1sc6m {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_rn4td svg {
+.bank-card__bankLogo_1sc6m svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_rn4td svg g {
+.bank-card__bankLogo_1sc6m svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_rn4td {
+.bank-card__brandLogo_1sc6m {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_rn4td svg {
+.bank-card__brandLogo_1sc6m svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_rn4td {
+.bank-card__usePhoto_1sc6m {
     display: block;
     margin: 0;
     padding: 0;
@@ -846,7 +847,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_rn4td svg {
+.bank-card__usePhoto_1sc6m 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_4hdnj","wrapper":"base-modal__wrapper_4hdnj","content":"base-modal__content_4hdnj","hidden":"base-modal__hidden_4hdnj","backdrop":"base-modal__backdrop_4hdnj","appear":"base-modal__appear_4hdnj","enter":"base-modal__enter_4hdnj","appearActive":"base-modal__appearActive_4hdnj","enterActive":"base-modal__enterActive_4hdnj","exit":"base-modal__exit_4hdnj","exitActive":"base-modal__exitActive_4hdnj","exitDone":"base-modal__exitDone_4hdnj"};
+var styles = {"component":"base-modal__component_1xxjn","wrapper":"base-modal__wrapper_1xxjn","content":"base-modal__content_1xxjn","hidden":"base-modal__hidden_1xxjn","backdrop":"base-modal__backdrop_1xxjn","appear":"base-modal__appear_1xxjn","enter":"base-modal__enter_1xxjn","appearActive":"base-modal__appearActive_1xxjn","enterActive":"base-modal__enterActive_1xxjn","exit":"base-modal__exit_1xxjn","exitActive":"base-modal__exitActive_1xxjn","exitDone":"base-modal__exitDone_1xxjn"};
 require('./index.css');
 
 var BaseModalContext = React__default['default'].createContext({
@@ -136,7 +136,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
     var handleBackdropMouseDown = function (event) {
-        if (!disableBackdropClick) {
+        var _a;
+        var clickedOnScrollbar = false;
+        var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (event.clientX && clientWidth) {
+            // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
+            var offset = utils.getScrollbarSize() === 0 ? 17 : 0;
+            clickedOnScrollbar = event.clientX + offset > clientWidth;
+        }
+        if (!disableBackdropClick && !clickedOnScrollbar) {
             mouseDownTarget.current = event.target;
         }
     };
@@ -146,6 +154,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
+        mouseDownTarget.current = undefined;
     };
     var handleKeyDown = React.useCallback(function (event) {
         /*

package/base-modal/cssm/Component.js

@@ -135,7 +135,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
     var handleBackdropMouseDown = function (event) {
-        if (!disableBackdropClick) {
+        var _a;
+        var clickedOnScrollbar = false;
+        var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (event.clientX && clientWidth) {
+            // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
+            var offset = utils.getScrollbarSize() === 0 ? 17 : 0;
+            clickedOnScrollbar = event.clientX + offset > clientWidth;
+        }
+        if (!disableBackdropClick && !clickedOnScrollbar) {
             mouseDownTarget.current = event.target;
         }
     };
@@ -145,6 +153,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
+        mouseDownTarget.current = undefined;
     };
     var handleKeyDown = React.useCallback(function (event) {
         /*

package/base-modal/cssm/index.js

@@ -18,6 +18,7 @@ require('./index.module.css');
 
 exports.BaseModal = Component.BaseModal;
 exports.BaseModalContext = Component.BaseModalContext;
+exports.getScrollbarSize = utils.getScrollbarSize;
 exports.handleContainer = utils.handleContainer;
 exports.hasScrollbar = utils.hasScrollbar;
 exports.isScrolledToBottom = utils.isScrolledToBottom;

package/base-modal/cssm/utils.d.ts

@@ -1,6 +1,7 @@
 declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
+declare const getScrollbarSize: () => number;
 declare const restoreContainerStyles: (container: HTMLElement) => void;
 declare const handleContainer: (container?: HTMLElement | undefined) => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };

package/base-modal/cssm/utils.js

@@ -11,18 +11,24 @@ function isScrolledToBottom(target) {
 function hasScrollbar(target) {
     return target.scrollHeight > target.clientHeight;
 }
-var getScrollbarSize = function () {
-    var scrollDiv = document.createElement('div');
-    scrollDiv.style.width = '99px';
-    scrollDiv.style.height = '99px';
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.overflow = 'scroll';
-    document.body.appendChild(scrollDiv);
-    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarSize;
-};
+var getScrollbarSize = (function () {
+    var cachedSize;
+    return function () {
+        if (cachedSize !== undefined)
+            return cachedSize;
+        var scrollDiv = document.createElement('div');
+        scrollDiv.style.width = '99px';
+        scrollDiv.style.height = '99px';
+        scrollDiv.style.position = 'absolute';
+        scrollDiv.style.top = '-9999px';
+        scrollDiv.style.overflow = 'scroll';
+        document.body.appendChild(scrollDiv);
+        var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        cachedSize = scrollbarSize;
+        return scrollbarSize;
+    };
+})();
 var isOverflowing = function (container) {
     if (document.body === container) {
         return window.innerWidth > document.documentElement.clientWidth;
@@ -98,6 +104,7 @@ var handleContainer = function (container) {
     });
 };
 
+exports.getScrollbarSize = getScrollbarSize;
 exports.handleContainer = handleContainer;
 exports.hasScrollbar = hasScrollbar;
 exports.isScrolledToBottom = isScrolledToBottom;

package/base-modal/esm/Component.js

@@ -8,7 +8,7 @@ import { Portal } from '../../portal/esm';
 import { Backdrop } from '../../backdrop/esm';
 import { stackingOrder, Stack } from '../../stack/esm';
 import '../../global-store/esm';
-import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
+import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -37,7 +37,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_4hdnj","wrapper":"base-modal__wrapper_4hdnj","content":"base-modal__content_4hdnj","hidden":"base-modal__hidden_4hdnj","backdrop":"base-modal__backdrop_4hdnj","appear":"base-modal__appear_4hdnj","enter":"base-modal__enter_4hdnj","appearActive":"base-modal__appearActive_4hdnj","enterActive":"base-modal__enterActive_4hdnj","exit":"base-modal__exit_4hdnj","exitActive":"base-modal__exitActive_4hdnj","exitDone":"base-modal__exitDone_4hdnj"};
+var styles = {"component":"base-modal__component_1xxjn","wrapper":"base-modal__wrapper_1xxjn","content":"base-modal__content_1xxjn","hidden":"base-modal__hidden_1xxjn","backdrop":"base-modal__backdrop_1xxjn","appear":"base-modal__appear_1xxjn","enter":"base-modal__enter_1xxjn","appearActive":"base-modal__appearActive_1xxjn","enterActive":"base-modal__enterActive_1xxjn","exit":"base-modal__exit_1xxjn","exitActive":"base-modal__exitActive_1xxjn","exitDone":"base-modal__exitDone_1xxjn"};
 require('./index.css');
 
 var BaseModalContext = React.createContext({
@@ -127,7 +127,15 @@ var BaseModal = forwardRef(function (_a, ref) {
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
     var handleBackdropMouseDown = function (event) {
-        if (!disableBackdropClick) {
+        var _a;
+        var clickedOnScrollbar = false;
+        var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (event.clientX && clientWidth) {
+            // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
+            var offset = getScrollbarSize() === 0 ? 17 : 0;
+            clickedOnScrollbar = event.clientX + offset > clientWidth;
+        }
+        if (!disableBackdropClick && !clickedOnScrollbar) {
             mouseDownTarget.current = event.target;
         }
     };
@@ -137,6 +145,7 @@ var BaseModal = forwardRef(function (_a, ref) {
             mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
+        mouseDownTarget.current = undefined;
     };
     var handleKeyDown = useCallback(function (event) {
         /*

package/base-modal/esm/index.css

@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_4hdnj {
+.base-modal__component_1xxjn {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_4hdnj {
+.base-modal__wrapper_1xxjn {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_4hdnj {
+.base-modal__content_1xxjn {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_4hdnj {
+.base-modal__hidden_1xxjn {
     display: none;
 }
-.base-modal__backdrop_4hdnj {
+.base-modal__backdrop_1xxjn {
     z-index: 0;
 }
-.base-modal__appear_4hdnj,
-.base-modal__enter_4hdnj {
+.base-modal__appear_1xxjn,
+.base-modal__enter_1xxjn {
     opacity: 0;
 }
-.base-modal__appearActive_4hdnj,
-.base-modal__enterActive_4hdnj {
+.base-modal__appearActive_1xxjn,
+.base-modal__enterActive_1xxjn {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_4hdnj {
+.base-modal__exit_1xxjn {
     opacity: 1;
 }
-.base-modal__exitActive_4hdnj,
-.base-modal__exitDone_4hdnj {
+.base-modal__exitActive_1xxjn,
+.base-modal__exitDone_1xxjn {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/esm/index.js

@@ -8,5 +8,5 @@ import '../../portal/esm';
 import '../../backdrop/esm';
 import '../../stack/esm';
 import '../../global-store/esm';
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
+export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
 export { BaseModal, BaseModalContext } from './Component.js';

package/base-modal/esm/utils.d.ts

@@ -1,6 +1,7 @@
 declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
+declare const getScrollbarSize: () => number;
 declare const restoreContainerStyles: (container: HTMLElement) => void;
 declare const handleContainer: (container?: HTMLElement | undefined) => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };

package/base-modal/esm/utils.js

@@ -9,18 +9,24 @@ function isScrolledToBottom(target) {
 function hasScrollbar(target) {
     return target.scrollHeight > target.clientHeight;
 }
-var getScrollbarSize = function () {
-    var scrollDiv = document.createElement('div');
-    scrollDiv.style.width = '99px';
-    scrollDiv.style.height = '99px';
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.overflow = 'scroll';
-    document.body.appendChild(scrollDiv);
-    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarSize;
-};
+var getScrollbarSize = (function () {
+    var cachedSize;
+    return function () {
+        if (cachedSize !== undefined)
+            return cachedSize;
+        var scrollDiv = document.createElement('div');
+        scrollDiv.style.width = '99px';
+        scrollDiv.style.height = '99px';
+        scrollDiv.style.position = 'absolute';
+        scrollDiv.style.top = '-9999px';
+        scrollDiv.style.overflow = 'scroll';
+        document.body.appendChild(scrollDiv);
+        var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        cachedSize = scrollbarSize;
+        return scrollbarSize;
+    };
+})();
 var isOverflowing = function (container) {
     if (document.body === container) {
         return window.innerWidth > document.documentElement.clientWidth;
@@ -96,4 +102,4 @@ var handleContainer = function (container) {
     });
 };
 
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
+export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };

package/base-modal/index.css

@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_4hdnj {
+.base-modal__component_1xxjn {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_4hdnj {
+.base-modal__wrapper_1xxjn {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_4hdnj {
+.base-modal__content_1xxjn {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_4hdnj {
+.base-modal__hidden_1xxjn {
     display: none;
 }
-.base-modal__backdrop_4hdnj {
+.base-modal__backdrop_1xxjn {
     z-index: 0;
 }
-.base-modal__appear_4hdnj,
-.base-modal__enter_4hdnj {
+.base-modal__appear_1xxjn,
+.base-modal__enter_1xxjn {
     opacity: 0;
 }
-.base-modal__appearActive_4hdnj,
-.base-modal__enterActive_4hdnj {
+.base-modal__appearActive_1xxjn,
+.base-modal__enterActive_1xxjn {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_4hdnj {
+.base-modal__exit_1xxjn {
     opacity: 1;
 }
-.base-modal__exitActive_4hdnj,
-.base-modal__exitDone_4hdnj {
+.base-modal__exitActive_1xxjn,
+.base-modal__exitDone_1xxjn {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.js

@@ -17,6 +17,7 @@ var utils = require('./utils.js');
 
 exports.BaseModal = Component.BaseModal;
 exports.BaseModalContext = Component.BaseModalContext;
+exports.getScrollbarSize = utils.getScrollbarSize;
 exports.handleContainer = utils.handleContainer;
 exports.hasScrollbar = utils.hasScrollbar;
 exports.isScrolledToBottom = utils.isScrolledToBottom;

package/base-modal/modern/Component.js

@@ -8,9 +8,9 @@ import { Portal } from '../../portal/modern';
 import { Backdrop } from '../../backdrop/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
 import '../../global-store/modern';
-import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
+import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
 
-var styles = {"component":"base-modal__component_4hdnj","wrapper":"base-modal__wrapper_4hdnj","content":"base-modal__content_4hdnj","hidden":"base-modal__hidden_4hdnj","backdrop":"base-modal__backdrop_4hdnj","appear":"base-modal__appear_4hdnj","enter":"base-modal__enter_4hdnj","appearActive":"base-modal__appearActive_4hdnj","enterActive":"base-modal__enterActive_4hdnj","exit":"base-modal__exit_4hdnj","exitActive":"base-modal__exitActive_4hdnj","exitDone":"base-modal__exitDone_4hdnj"};
+var styles = {"component":"base-modal__component_1xxjn","wrapper":"base-modal__wrapper_1xxjn","content":"base-modal__content_1xxjn","hidden":"base-modal__hidden_1xxjn","backdrop":"base-modal__backdrop_1xxjn","appear":"base-modal__appear_1xxjn","enter":"base-modal__enter_1xxjn","appearActive":"base-modal__appearActive_1xxjn","enterActive":"base-modal__enterActive_1xxjn","exit":"base-modal__exit_1xxjn","exitActive":"base-modal__exitActive_1xxjn","exitDone":"base-modal__exitDone_1xxjn"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -100,7 +100,14 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
     const handleBackdropMouseDown = (event) => {
-        if (!disableBackdropClick) {
+        let clickedOnScrollbar = false;
+        const clientWidth = event.target?.clientWidth;
+        if (event.clientX && clientWidth) {
+            // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
+            const offset = getScrollbarSize() === 0 ? 17 : 0;
+            clickedOnScrollbar = event.clientX + offset > clientWidth;
+        }
+        if (!disableBackdropClick && !clickedOnScrollbar) {
             mouseDownTarget.current = event.target;
         }
     };
@@ -110,6 +117,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             mouseDownTarget.current === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
+        mouseDownTarget.current = undefined;
     };
     const handleKeyDown = useCallback((event) => {
         /*