@alfalab/core-components-base-modal 4.1.4 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/Component.d.ts +5 -0
  3. package/Component.js +23 -14
  4. package/cssm/Component.d.ts +5 -0
  5. package/cssm/Component.js +26 -17
  6. package/cssm/index.js +5 -4
  7. package/cssm/utils.d.ts +2 -1
  8. package/cssm/utils.js +20 -13
  9. package/esm/Component.d.ts +5 -0
  10. package/esm/Component.js +28 -19
  11. package/esm/index.css +13 -13
  12. package/esm/index.js +5 -5
  13. package/esm/utils.d.ts +2 -1
  14. package/esm/utils.js +20 -14
  15. package/index.css +13 -13
  16. package/index.js +1 -0
  17. package/modern/Component.d.ts +5 -0
  18. package/modern/Component.js +20 -12
  19. package/modern/index.css +13 -13
  20. package/modern/index.js +5 -5
  21. package/modern/utils.d.ts +2 -1
  22. package/modern/utils.js +20 -14
  23. package/package.json +5 -5
  24. package/utils.d.ts +2 -1
  25. package/utils.js +19 -12
package/CHANGELOG.md CHANGED
@@ -3,6 +3,47 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.2.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.2.1...@alfalab/core-components-base-modal@4.2.2) (2022-07-25)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **base-modal:** fixed click on scrollbar bug ([#165](https://github.com/core-ds/core-components/issues/165)) ([c9df897](https://github.com/core-ds/core-components/commit/c9df8977a6f2e30d753a1f825bb6bad061179a6e))
12
+
13
+
14
+
15
+
16
+
17
+ ## [4.2.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.2.0...@alfalab/core-components-base-modal@4.2.1) (2022-07-18)
18
+
19
+ **Note:** Version bump only for package @alfalab/core-components-base-modal
20
+
21
+
22
+
23
+
24
+
25
+ # [4.2.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.5...@alfalab/core-components-base-modal@4.2.0) (2022-07-15)
26
+
27
+
28
+ ### Features
29
+
30
+ * **bottom-sheet:** add props for disable blocking scroll and modal wrapper classname ([#147](https://github.com/core-ds/core-components/issues/147)) ([a873c20](https://github.com/core-ds/core-components/commit/a873c2035d4885c1b8e5ffae02ce75c4826d1e71))
31
+
32
+
33
+
34
+
35
+
36
+ ## [4.1.5](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.4...@alfalab/core-components-base-modal@4.1.5) (2022-07-15)
37
+
38
+
39
+ ### Bug Fixes
40
+
41
+ * bump packages version ([#153](https://github.com/core-ds/core-components/issues/153)) ([fd3e082](https://github.com/core-ds/core-components/commit/fd3e08205672129cdce04e1000c673f2cd9c10da))
42
+
43
+
44
+
45
+
46
+
6
47
  ## [4.1.4](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.3...@alfalab/core-components-base-modal@4.1.4) (2022-07-14)
7
48
 
8
49
 
@@ -262,4 +303,5 @@ remove z-index, add stack component
262
303
 
263
304
  ### Features
264
305
 
306
+
265
307
  * **backdrop:** add component ([948a6c2](https://github.com/core-ds/core-components/commit/948a6c2fb5ec58edb2d087691ce4713d75da6e35))
package/Component.d.ts CHANGED
@@ -49,6 +49,11 @@ type BaseModalProps = {
49
49
  * @default false
50
50
  */
51
51
  disableBackdropClick?: boolean;
52
+ /**
53
+ * Отключает блокировку скролла при открытии модального окна
54
+ * @default false
55
+ */
56
+ disableBlockingScroll?: boolean;
52
57
  /**
53
58
  * Содержимое модалки всегда в DOM
54
59
  * @default false
package/Component.js CHANGED
@@ -48,7 +48,7 @@ var __assign = function () {
48
48
  return __assign.apply(this, arguments);
49
49
  };
50
50
 
51
- var styles = {"component":"base-modal__component_1bawz","wrapper":"base-modal__wrapper_1bawz","content":"base-modal__content_1bawz","hidden":"base-modal__hidden_1bawz","backdrop":"base-modal__backdrop_1bawz","appear":"base-modal__appear_1bawz","enter":"base-modal__enter_1bawz","appearActive":"base-modal__appearActive_1bawz","enterActive":"base-modal__enterActive_1bawz","exit":"base-modal__exit_1bawz","exitActive":"base-modal__exitActive_1bawz","exitDone":"base-modal__exitDone_1bawz"};
51
+ var styles = {"component":"base-modal__component_109qr","wrapper":"base-modal__wrapper_109qr","content":"base-modal__content_109qr","hidden":"base-modal__hidden_109qr","backdrop":"base-modal__backdrop_109qr","appear":"base-modal__appear_109qr","enter":"base-modal__enter_109qr","appearActive":"base-modal__appearActive_109qr","enterActive":"base-modal__enterActive_109qr","exit":"base-modal__exit_109qr","exitActive":"base-modal__exitActive_109qr","exitDone":"base-modal__exitDone_109qr"};
52
52
  require('./index.css')
53
53
 
54
54
  var BaseModalContext = React__default['default'].createContext({
@@ -65,14 +65,14 @@ var BaseModalContext = React__default['default'].createContext({
65
65
  onClose: function () { return null; },
66
66
  });
67
67
  var BaseModal = React.forwardRef(function (_a, ref) {
68
- 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;
69
- var _o = React.useState(null), exited = _o[0], setExited = _o[1];
70
- var _p = React.useState(false), hasScroll = _p[0], setHasScroll = _p[1];
71
- var _q = React.useState(false), hasHeader = _q[0], setHasHeader = _q[1];
72
- var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
73
- var _s = React.useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
74
- var _t = React.useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
75
- var _u = React.useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
68
+ 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.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, 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, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o;
69
+ var _p = React.useState(null), exited = _p[0], setExited = _p[1];
70
+ var _q = React.useState(false), hasScroll = _q[0], setHasScroll = _q[1];
71
+ var _r = React.useState(false), hasHeader = _r[0], setHasHeader = _r[1];
72
+ var _s = React.useState(false), hasFooter = _s[0], setHasFooter = _s[1];
73
+ var _t = React.useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
74
+ var _u = React.useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
75
+ var _v = React.useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
76
76
  var componentNodeRef = React.useRef(null);
77
77
  var wrapperRef = React.useRef(null);
78
78
  var scrollableNodeRef = React.useRef(null);
@@ -138,7 +138,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
138
138
  return null;
139
139
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
140
140
  var handleBackdropMouseDown = function (event) {
141
- if (!disableBackdropClick) {
141
+ var _a;
142
+ var clickedOnScrollbar = false;
143
+ var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
144
+ if (event.clientX && clientWidth) {
145
+ // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
146
+ var offset = utils.getScrollbarSize() === 0 ? 17 : 0;
147
+ clickedOnScrollbar = event.clientX + offset > clientWidth;
148
+ }
149
+ if (!disableBackdropClick && !clickedOnScrollbar) {
142
150
  mouseDownTarget.current = event.target;
143
151
  }
144
152
  };
@@ -148,6 +156,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
148
156
  mouseDownTarget.current === wrapperRef.current) {
149
157
  handleClose(event, 'backdropClick');
150
158
  }
159
+ mouseDownTarget.current = undefined;
151
160
  };
152
161
  var handleKeyDown = React.useCallback(function (event) {
153
162
  /*
@@ -199,18 +208,18 @@ var BaseModal = React.forwardRef(function (_a, ref) {
199
208
  }
200
209
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
201
210
  React.useEffect(function () {
202
- if (open) {
203
- if (isExited) {
211
+ if (open && isExited) {
212
+ if (!disableBlockingScroll) {
204
213
  var el_1 = getContainer();
205
214
  utils.handleContainer(el_1);
206
215
  restoreContainerStylesRef.current = function () {
207
216
  restoreContainerStylesRef.current = null;
208
217
  utils.restoreContainerStyles(el_1);
209
218
  };
210
- setExited(false);
211
219
  }
220
+ setExited(false);
212
221
  }
213
- }, [getContainer, open, isExited]);
222
+ }, [getContainer, open, disableBlockingScroll, isExited]);
214
223
  React.useEffect(function () {
215
224
  var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
216
225
  resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
package/cssm/Component.d.ts CHANGED
@@ -49,6 +49,11 @@ type BaseModalProps = {
49
49
  * @default false
50
50
  */
51
51
  disableBackdropClick?: boolean;
52
+ /**
53
+ * Отключает блокировку скролла при открытии модального окна
54
+ * @default false
55
+ */
56
+ disableBlockingScroll?: boolean;
52
57
  /**
53
58
  * Содержимое модалки всегда в DOM
54
59
  * @default false
package/cssm/Component.js CHANGED
@@ -8,10 +8,10 @@ var mergeRefs = require('react-merge-refs');
8
8
  var resizeObserver = require('@juggle/resize-observer');
9
9
  var reactTransitionGroup = require('react-transition-group');
10
10
  var FocusLock = require('react-focus-lock');
11
- var coreComponentsPortal = require('@alfalab/core-components-portal/dist/cssm');
12
- var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/dist/cssm');
13
- var coreComponentsStack = require('@alfalab/core-components-stack/dist/cssm');
14
- require('@alfalab/core-components-global-store/dist/cssm');
11
+ var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
12
+ var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
13
+ var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
14
+ require('@alfalab/core-components-global-store/cssm');
15
15
  var utils = require('./utils.js');
16
16
  var styles = require('./index.module.css');
17
17
 
@@ -64,14 +64,14 @@ var BaseModalContext = React__default['default'].createContext({
64
64
  onClose: function () { return null; },
65
65
  });
66
66
  var BaseModal = React.forwardRef(function (_a, ref) {
67
- 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;
68
- var _o = React.useState(null), exited = _o[0], setExited = _o[1];
69
- var _p = React.useState(false), hasScroll = _p[0], setHasScroll = _p[1];
70
- var _q = React.useState(false), hasHeader = _q[0], setHasHeader = _q[1];
71
- var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
72
- var _s = React.useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
73
- var _t = React.useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
74
- var _u = React.useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
67
+ 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.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, 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, _m = _a.zIndex, zIndex = _m === void 0 ? coreComponentsStack.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o;
68
+ var _p = React.useState(null), exited = _p[0], setExited = _p[1];
69
+ var _q = React.useState(false), hasScroll = _q[0], setHasScroll = _q[1];
70
+ var _r = React.useState(false), hasHeader = _r[0], setHasHeader = _r[1];
71
+ var _s = React.useState(false), hasFooter = _s[0], setHasFooter = _s[1];
72
+ var _t = React.useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
73
+ var _u = React.useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
74
+ var _v = React.useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
75
75
  var componentNodeRef = React.useRef(null);
76
76
  var wrapperRef = React.useRef(null);
77
77
  var scrollableNodeRef = React.useRef(null);
@@ -137,7 +137,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
137
137
  return null;
138
138
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
139
139
  var handleBackdropMouseDown = function (event) {
140
- if (!disableBackdropClick) {
140
+ var _a;
141
+ var clickedOnScrollbar = false;
142
+ var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
143
+ if (event.clientX && clientWidth) {
144
+ // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
145
+ var offset = utils.getScrollbarSize() === 0 ? 17 : 0;
146
+ clickedOnScrollbar = event.clientX + offset > clientWidth;
147
+ }
148
+ if (!disableBackdropClick && !clickedOnScrollbar) {
141
149
  mouseDownTarget.current = event.target;
142
150
  }
143
151
  };
@@ -147,6 +155,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
147
155
  mouseDownTarget.current === wrapperRef.current) {
148
156
  handleClose(event, 'backdropClick');
149
157
  }
158
+ mouseDownTarget.current = undefined;
150
159
  };
151
160
  var handleKeyDown = React.useCallback(function (event) {
152
161
  /*
@@ -198,18 +207,18 @@ var BaseModal = React.forwardRef(function (_a, ref) {
198
207
  }
199
208
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
200
209
  React.useEffect(function () {
201
- if (open) {
202
- if (isExited) {
210
+ if (open && isExited) {
211
+ if (!disableBlockingScroll) {
203
212
  var el_1 = getContainer();
204
213
  utils.handleContainer(el_1);
205
214
  restoreContainerStylesRef.current = function () {
206
215
  restoreContainerStylesRef.current = null;
207
216
  utils.restoreContainerStyles(el_1);
208
217
  };
209
- setExited(false);
210
218
  }
219
+ setExited(false);
211
220
  }
212
- }, [getContainer, open, isExited]);
221
+ }, [getContainer, open, disableBlockingScroll, isExited]);
213
222
  React.useEffect(function () {
214
223
  var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
215
224
  resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
package/cssm/index.js CHANGED
@@ -9,10 +9,10 @@ require('react-merge-refs');
9
9
  require('@juggle/resize-observer');
10
10
  require('react-transition-group');
11
11
  require('react-focus-lock');
12
- require('@alfalab/core-components-portal/dist/cssm');
13
- require('@alfalab/core-components-backdrop/dist/cssm');
14
- require('@alfalab/core-components-stack/dist/cssm');
15
- require('@alfalab/core-components-global-store/dist/cssm');
12
+ require('@alfalab/core-components-portal/cssm');
13
+ require('@alfalab/core-components-backdrop/cssm');
14
+ require('@alfalab/core-components-stack/cssm');
15
+ require('@alfalab/core-components-global-store/cssm');
16
16
  var utils = require('./utils.js');
17
17
  require('./index.module.css');
18
18
 
@@ -20,6 +20,7 @@ require('./index.module.css');
20
20
 
21
21
  exports.BaseModal = Component.BaseModal;
22
22
  exports.BaseModalContext = Component.BaseModalContext;
23
+ exports.getScrollbarSize = utils.getScrollbarSize;
23
24
  exports.handleContainer = utils.handleContainer;
24
25
  exports.hasScrollbar = utils.hasScrollbar;
25
26
  exports.isScrolledToBottom = utils.isScrolledToBottom;
package/cssm/utils.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  declare function isScrolledToTop(target: HTMLElement): boolean;
2
2
  declare function isScrolledToBottom(target: HTMLElement): boolean;
3
3
  declare function hasScrollbar(target: HTMLElement): boolean;
4
+ declare const getScrollbarSize: () => number;
4
5
  declare const restoreContainerStyles: (container: HTMLElement) => void;
5
6
  declare const handleContainer: (container?: HTMLElement | undefined) => void;
6
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
7
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
package/cssm/utils.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var coreComponentsGlobalStore = require('@alfalab/core-components-global-store/dist/cssm');
5
+ var coreComponentsGlobalStore = require('@alfalab/core-components-global-store/cssm');
6
6
 
7
7
  function isScrolledToTop(target) {
8
8
  return target.scrollTop <= 0;
@@ -13,18 +13,24 @@ function isScrolledToBottom(target) {
13
13
  function hasScrollbar(target) {
14
14
  return target.scrollHeight > target.clientHeight;
15
15
  }
16
- var getScrollbarSize = function () {
17
- var scrollDiv = document.createElement('div');
18
- scrollDiv.style.width = '99px';
19
- scrollDiv.style.height = '99px';
20
- scrollDiv.style.position = 'absolute';
21
- scrollDiv.style.top = '-9999px';
22
- scrollDiv.style.overflow = 'scroll';
23
- document.body.appendChild(scrollDiv);
24
- var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
25
- document.body.removeChild(scrollDiv);
26
- return scrollbarSize;
27
- };
16
+ var getScrollbarSize = (function () {
17
+ var cachedSize;
18
+ return function () {
19
+ if (cachedSize !== undefined)
20
+ return cachedSize;
21
+ var scrollDiv = document.createElement('div');
22
+ scrollDiv.style.width = '99px';
23
+ scrollDiv.style.height = '99px';
24
+ scrollDiv.style.position = 'absolute';
25
+ scrollDiv.style.top = '-9999px';
26
+ scrollDiv.style.overflow = 'scroll';
27
+ document.body.appendChild(scrollDiv);
28
+ var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
29
+ document.body.removeChild(scrollDiv);
30
+ cachedSize = scrollbarSize;
31
+ return scrollbarSize;
32
+ };
33
+ })();
28
34
  var isOverflowing = function (container) {
29
35
  if (document.body === container) {
30
36
  return window.innerWidth > document.documentElement.clientWidth;
@@ -100,6 +106,7 @@ var handleContainer = function (container) {
100
106
  });
101
107
  };
102
108
 
109
+ exports.getScrollbarSize = getScrollbarSize;
103
110
  exports.handleContainer = handleContainer;
104
111
  exports.hasScrollbar = hasScrollbar;
105
112
  exports.isScrolledToBottom = isScrolledToBottom;
package/esm/Component.d.ts CHANGED
@@ -49,6 +49,11 @@ type BaseModalProps = {
49
49
  * @default false
50
50
  */
51
51
  disableBackdropClick?: boolean;
52
+ /**
53
+ * Отключает блокировку скролла при открытии модального окна
54
+ * @default false
55
+ */
56
+ disableBlockingScroll?: boolean;
52
57
  /**
53
58
  * Содержимое модалки всегда в DOM
54
59
  * @default false
package/esm/Component.js CHANGED
@@ -4,11 +4,11 @@ import mergeRefs from 'react-merge-refs';
4
4
  import { ResizeObserver } from '@juggle/resize-observer';
5
5
  import { CSSTransition } from 'react-transition-group';
6
6
  import FocusLock from 'react-focus-lock';
7
- import { Portal } from '@alfalab/core-components-portal/dist/esm';
8
- import { Backdrop } from '@alfalab/core-components-backdrop/dist/esm';
9
- import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/esm';
10
- import '@alfalab/core-components-global-store/dist/esm';
11
- import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
7
+ import { Portal } from '@alfalab/core-components-portal/esm';
8
+ import { Backdrop } from '@alfalab/core-components-backdrop/esm';
9
+ import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
10
+ import '@alfalab/core-components-global-store/esm';
11
+ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
12
12
 
13
13
  /*! *****************************************************************************
14
14
  Copyright (c) Microsoft Corporation.
@@ -37,7 +37,7 @@ var __assign = function () {
37
37
  return __assign.apply(this, arguments);
38
38
  };
39
39
 
40
- var styles = {"component":"base-modal__component_1bawz","wrapper":"base-modal__wrapper_1bawz","content":"base-modal__content_1bawz","hidden":"base-modal__hidden_1bawz","backdrop":"base-modal__backdrop_1bawz","appear":"base-modal__appear_1bawz","enter":"base-modal__enter_1bawz","appearActive":"base-modal__appearActive_1bawz","enterActive":"base-modal__enterActive_1bawz","exit":"base-modal__exit_1bawz","exitActive":"base-modal__exitActive_1bawz","exitDone":"base-modal__exitDone_1bawz"};
40
+ var styles = {"component":"base-modal__component_109qr","wrapper":"base-modal__wrapper_109qr","content":"base-modal__content_109qr","hidden":"base-modal__hidden_109qr","backdrop":"base-modal__backdrop_109qr","appear":"base-modal__appear_109qr","enter":"base-modal__enter_109qr","appearActive":"base-modal__appearActive_109qr","enterActive":"base-modal__enterActive_109qr","exit":"base-modal__exit_109qr","exitActive":"base-modal__exitActive_109qr","exitDone":"base-modal__exitDone_109qr"};
41
41
  require('./index.css')
42
42
 
43
43
  var BaseModalContext = React.createContext({
@@ -54,14 +54,14 @@ var BaseModalContext = React.createContext({
54
54
  onClose: function () { return null; },
55
55
  });
56
56
  var BaseModal = forwardRef(function (_a, ref) {
57
- 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;
58
- var _o = useState(null), exited = _o[0], setExited = _o[1];
59
- var _p = useState(false), hasScroll = _p[0], setHasScroll = _p[1];
60
- var _q = useState(false), hasHeader = _q[0], setHasHeader = _q[1];
61
- var _r = useState(false), hasFooter = _r[0], setHasFooter = _r[1];
62
- var _s = useState(false), headerHighlighted = _s[0], setHeaderHighlighted = _s[1];
63
- var _t = useState(false), footerHighlighted = _t[0], setFooterHighlighted = _t[1];
64
- var _u = useState(0), headerOffset = _u[0], setHeaderOffset = _u[1];
57
+ 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.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, 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, _m = _a.zIndex, zIndex = _m === void 0 ? stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o;
58
+ var _p = useState(null), exited = _p[0], setExited = _p[1];
59
+ var _q = useState(false), hasScroll = _q[0], setHasScroll = _q[1];
60
+ var _r = useState(false), hasHeader = _r[0], setHasHeader = _r[1];
61
+ var _s = useState(false), hasFooter = _s[0], setHasFooter = _s[1];
62
+ var _t = useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
63
+ var _u = useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
64
+ var _v = useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
65
65
  var componentNodeRef = useRef(null);
66
66
  var wrapperRef = useRef(null);
67
67
  var scrollableNodeRef = useRef(null);
@@ -127,7 +127,15 @@ var BaseModal = forwardRef(function (_a, ref) {
127
127
  return null;
128
128
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
129
129
  var handleBackdropMouseDown = function (event) {
130
- if (!disableBackdropClick) {
130
+ var _a;
131
+ var clickedOnScrollbar = false;
132
+ var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
133
+ if (event.clientX && clientWidth) {
134
+ // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
135
+ var offset = getScrollbarSize() === 0 ? 17 : 0;
136
+ clickedOnScrollbar = event.clientX + offset > clientWidth;
137
+ }
138
+ if (!disableBackdropClick && !clickedOnScrollbar) {
131
139
  mouseDownTarget.current = event.target;
132
140
  }
133
141
  };
@@ -137,6 +145,7 @@ var BaseModal = forwardRef(function (_a, ref) {
137
145
  mouseDownTarget.current === wrapperRef.current) {
138
146
  handleClose(event, 'backdropClick');
139
147
  }
148
+ mouseDownTarget.current = undefined;
140
149
  };
141
150
  var handleKeyDown = useCallback(function (event) {
142
151
  /*
@@ -188,18 +197,18 @@ var BaseModal = forwardRef(function (_a, ref) {
188
197
  }
189
198
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
190
199
  useEffect(function () {
191
- if (open) {
192
- if (isExited) {
200
+ if (open && isExited) {
201
+ if (!disableBlockingScroll) {
193
202
  var el_1 = getContainer();
194
203
  handleContainer(el_1);
195
204
  restoreContainerStylesRef.current = function () {
196
205
  restoreContainerStylesRef.current = null;
197
206
  restoreContainerStyles(el_1);
198
207
  };
199
- setExited(false);
200
208
  }
209
+ setExited(false);
201
210
  }
202
- }, [getContainer, open, isExited]);
211
+ }, [getContainer, open, disableBlockingScroll, isExited]);
203
212
  useEffect(function () {
204
213
  var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
205
214
  resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1i6t2 */
1
+ /* hash: 1aupf */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_1bawz {
13
+ .base-modal__component_109qr {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_1bawz {
20
+ .base-modal__wrapper_109qr {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_1bawz {
33
+ .base-modal__content_109qr {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_1bawz {
40
+ .base-modal__hidden_109qr {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_1bawz {
43
+ .base-modal__backdrop_109qr {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_1bawz,
47
- .base-modal__enter_1bawz {
46
+ .base-modal__appear_109qr,
47
+ .base-modal__enter_109qr {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_1bawz,
51
- .base-modal__enterActive_1bawz {
50
+ .base-modal__appearActive_109qr,
51
+ .base-modal__enterActive_109qr {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_1bawz {
55
+ .base-modal__exit_109qr {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_1bawz,
59
- .base-modal__exitDone_1bawz {
58
+ .base-modal__exitActive_109qr,
59
+ .base-modal__exitDone_109qr {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/esm/index.js CHANGED
@@ -5,8 +5,8 @@ import 'react-merge-refs';
5
5
  import '@juggle/resize-observer';
6
6
  import 'react-transition-group';
7
7
  import 'react-focus-lock';
8
- import '@alfalab/core-components-portal/dist/esm';
9
- import '@alfalab/core-components-backdrop/dist/esm';
10
- import '@alfalab/core-components-stack/dist/esm';
11
- import '@alfalab/core-components-global-store/dist/esm';
12
- export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
8
+ import '@alfalab/core-components-portal/esm';
9
+ import '@alfalab/core-components-backdrop/esm';
10
+ import '@alfalab/core-components-stack/esm';
11
+ import '@alfalab/core-components-global-store/esm';
12
+ export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
package/esm/utils.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  declare function isScrolledToTop(target: HTMLElement): boolean;
2
2
  declare function isScrolledToBottom(target: HTMLElement): boolean;
3
3
  declare function hasScrollbar(target: HTMLElement): boolean;
4
+ declare const getScrollbarSize: () => number;
4
5
  declare const restoreContainerStyles: (container: HTMLElement) => void;
5
6
  declare const handleContainer: (container?: HTMLElement | undefined) => void;
6
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
7
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
package/esm/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getModalStore } from '@alfalab/core-components-global-store/dist/esm';
1
+ import { getModalStore } from '@alfalab/core-components-global-store/esm';
2
2
 
3
3
  function isScrolledToTop(target) {
4
4
  return target.scrollTop <= 0;
@@ -9,18 +9,24 @@ function isScrolledToBottom(target) {
9
9
  function hasScrollbar(target) {
10
10
  return target.scrollHeight > target.clientHeight;
11
11
  }
12
- var getScrollbarSize = function () {
13
- var scrollDiv = document.createElement('div');
14
- scrollDiv.style.width = '99px';
15
- scrollDiv.style.height = '99px';
16
- scrollDiv.style.position = 'absolute';
17
- scrollDiv.style.top = '-9999px';
18
- scrollDiv.style.overflow = 'scroll';
19
- document.body.appendChild(scrollDiv);
20
- var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
21
- document.body.removeChild(scrollDiv);
22
- return scrollbarSize;
23
- };
12
+ var getScrollbarSize = (function () {
13
+ var cachedSize;
14
+ return function () {
15
+ if (cachedSize !== undefined)
16
+ return cachedSize;
17
+ var scrollDiv = document.createElement('div');
18
+ scrollDiv.style.width = '99px';
19
+ scrollDiv.style.height = '99px';
20
+ scrollDiv.style.position = 'absolute';
21
+ scrollDiv.style.top = '-9999px';
22
+ scrollDiv.style.overflow = 'scroll';
23
+ document.body.appendChild(scrollDiv);
24
+ var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
25
+ document.body.removeChild(scrollDiv);
26
+ cachedSize = scrollbarSize;
27
+ return scrollbarSize;
28
+ };
29
+ })();
24
30
  var isOverflowing = function (container) {
25
31
  if (document.body === container) {
26
32
  return window.innerWidth > document.documentElement.clientWidth;
@@ -96,4 +102,4 @@ var handleContainer = function (container) {
96
102
  });
97
103
  };
98
104
 
99
- export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
105
+ export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1i6t2 */
1
+ /* hash: 1aupf */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_1bawz {
13
+ .base-modal__component_109qr {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_1bawz {
20
+ .base-modal__wrapper_109qr {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_1bawz {
33
+ .base-modal__content_109qr {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_1bawz {
40
+ .base-modal__hidden_109qr {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_1bawz {
43
+ .base-modal__backdrop_109qr {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_1bawz,
47
- .base-modal__enter_1bawz {
46
+ .base-modal__appear_109qr,
47
+ .base-modal__enter_109qr {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_1bawz,
51
- .base-modal__enterActive_1bawz {
50
+ .base-modal__appearActive_109qr,
51
+ .base-modal__enterActive_109qr {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_1bawz {
55
+ .base-modal__exit_109qr {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_1bawz,
59
- .base-modal__exitDone_1bawz {
58
+ .base-modal__exitActive_109qr,
59
+ .base-modal__exitDone_109qr {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/index.js CHANGED
@@ -19,6 +19,7 @@ var utils = require('./utils.js');
19
19
 
20
20
  exports.BaseModal = Component.BaseModal;
21
21
  exports.BaseModalContext = Component.BaseModalContext;
22
+ exports.getScrollbarSize = utils.getScrollbarSize;
22
23
  exports.handleContainer = utils.handleContainer;
23
24
  exports.hasScrollbar = utils.hasScrollbar;
24
25
  exports.isScrolledToBottom = utils.isScrolledToBottom;
package/modern/Component.d.ts CHANGED
@@ -49,6 +49,11 @@ type BaseModalProps = {
49
49
  * @default false
50
50
  */
51
51
  disableBackdropClick?: boolean;
52
+ /**
53
+ * Отключает блокировку скролла при открытии модального окна
54
+ * @default false
55
+ */
56
+ disableBlockingScroll?: boolean;
52
57
  /**
53
58
  * Содержимое модалки всегда в DOM
54
59
  * @default false
package/modern/Component.js CHANGED
@@ -4,13 +4,13 @@ import mergeRefs from 'react-merge-refs';
4
4
  import { ResizeObserver } from '@juggle/resize-observer';
5
5
  import { CSSTransition } from 'react-transition-group';
6
6
  import FocusLock from 'react-focus-lock';
7
- import { Portal } from '@alfalab/core-components-portal/dist/modern';
8
- import { Backdrop } from '@alfalab/core-components-backdrop/dist/modern';
9
- import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern';
10
- import '@alfalab/core-components-global-store/dist/modern';
11
- import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
7
+ import { Portal } from '@alfalab/core-components-portal/modern';
8
+ import { Backdrop } from '@alfalab/core-components-backdrop/modern';
9
+ import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
10
+ import '@alfalab/core-components-global-store/modern';
11
+ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
12
12
 
13
- var styles = {"component":"base-modal__component_1bawz","wrapper":"base-modal__wrapper_1bawz","content":"base-modal__content_1bawz","hidden":"base-modal__hidden_1bawz","backdrop":"base-modal__backdrop_1bawz","appear":"base-modal__appear_1bawz","enter":"base-modal__enter_1bawz","appearActive":"base-modal__appearActive_1bawz","enterActive":"base-modal__enterActive_1bawz","exit":"base-modal__exit_1bawz","exitActive":"base-modal__exitActive_1bawz","exitDone":"base-modal__exitDone_1bawz"};
13
+ var styles = {"component":"base-modal__component_109qr","wrapper":"base-modal__wrapper_109qr","content":"base-modal__content_109qr","hidden":"base-modal__hidden_109qr","backdrop":"base-modal__backdrop_109qr","appear":"base-modal__appear_109qr","enter":"base-modal__enter_109qr","appearActive":"base-modal__appearActive_109qr","enterActive":"base-modal__enterActive_109qr","exit":"base-modal__exit_109qr","exitActive":"base-modal__exitActive_109qr","exitDone":"base-modal__exitDone_109qr"};
14
14
  require('./index.css')
15
15
 
16
16
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -27,7 +27,7 @@ const BaseModalContext = React.createContext({
27
27
  setHasFooter: () => null,
28
28
  onClose: () => null,
29
29
  });
30
- 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) => {
30
+ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, }, ref) => {
31
31
  const [exited, setExited] = useState(null);
32
32
  const [hasScroll, setHasScroll] = useState(false);
33
33
  const [hasHeader, setHasHeader] = useState(false);
@@ -100,7 +100,14 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
100
100
  return null;
101
101
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
102
102
  const handleBackdropMouseDown = (event) => {
103
- if (!disableBackdropClick) {
103
+ let clickedOnScrollbar = false;
104
+ const clientWidth = event.target?.clientWidth;
105
+ if (event.clientX && clientWidth) {
106
+ // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
107
+ const offset = getScrollbarSize() === 0 ? 17 : 0;
108
+ clickedOnScrollbar = event.clientX + offset > clientWidth;
109
+ }
110
+ if (!disableBackdropClick && !clickedOnScrollbar) {
104
111
  mouseDownTarget.current = event.target;
105
112
  }
106
113
  };
@@ -110,6 +117,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
110
117
  mouseDownTarget.current === wrapperRef.current) {
111
118
  handleClose(event, 'backdropClick');
112
119
  }
120
+ mouseDownTarget.current = undefined;
113
121
  };
114
122
  const handleKeyDown = useCallback((event) => {
115
123
  /*
@@ -161,18 +169,18 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
161
169
  }
162
170
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
163
171
  useEffect(() => {
164
- if (open) {
165
- if (isExited) {
172
+ if (open && isExited) {
173
+ if (!disableBlockingScroll) {
166
174
  const el = getContainer();
167
175
  handleContainer(el);
168
176
  restoreContainerStylesRef.current = () => {
169
177
  restoreContainerStylesRef.current = null;
170
178
  restoreContainerStyles(el);
171
179
  };
172
- setExited(false);
173
180
  }
181
+ setExited(false);
174
182
  }
175
- }, [getContainer, open, isExited]);
183
+ }, [getContainer, open, disableBlockingScroll, isExited]);
176
184
  useEffect(() => {
177
185
  const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
178
186
  resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1i6t2 */
1
+ /* hash: 1aupf */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_1bawz {
13
+ .base-modal__component_109qr {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_1bawz {
20
+ .base-modal__wrapper_109qr {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_1bawz {
33
+ .base-modal__content_109qr {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_1bawz {
40
+ .base-modal__hidden_109qr {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_1bawz {
43
+ .base-modal__backdrop_109qr {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_1bawz,
47
- .base-modal__enter_1bawz {
46
+ .base-modal__appear_109qr,
47
+ .base-modal__enter_109qr {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_1bawz,
51
- .base-modal__enterActive_1bawz {
50
+ .base-modal__appearActive_109qr,
51
+ .base-modal__enterActive_109qr {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_1bawz {
55
+ .base-modal__exit_109qr {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_1bawz,
59
- .base-modal__exitDone_1bawz {
58
+ .base-modal__exitActive_109qr,
59
+ .base-modal__exitDone_109qr {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/modern/index.js CHANGED
@@ -4,9 +4,9 @@ import 'react-merge-refs';
4
4
  import '@juggle/resize-observer';
5
5
  import 'react-transition-group';
6
6
  import 'react-focus-lock';
7
- import '@alfalab/core-components-portal/dist/modern';
8
- import '@alfalab/core-components-backdrop/dist/modern';
9
- import '@alfalab/core-components-stack/dist/modern';
10
- import '@alfalab/core-components-global-store/dist/modern';
11
- export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
7
+ import '@alfalab/core-components-portal/modern';
8
+ import '@alfalab/core-components-backdrop/modern';
9
+ import '@alfalab/core-components-stack/modern';
10
+ import '@alfalab/core-components-global-store/modern';
11
+ export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
12
12
  export { BaseModal, BaseModalContext } from './Component.js';
package/modern/utils.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  declare function isScrolledToTop(target: HTMLElement): boolean;
2
2
  declare function isScrolledToBottom(target: HTMLElement): boolean;
3
3
  declare function hasScrollbar(target: HTMLElement): boolean;
4
+ declare const getScrollbarSize: () => number;
4
5
  declare const restoreContainerStyles: (container: HTMLElement) => void;
5
6
  declare const handleContainer: (container?: HTMLElement | undefined) => void;
6
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
7
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
package/modern/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getModalStore } from '@alfalab/core-components-global-store/dist/modern';
1
+ import { getModalStore } from '@alfalab/core-components-global-store/modern';
2
2
 
3
3
  function isScrolledToTop(target) {
4
4
  return target.scrollTop <= 0;
@@ -9,18 +9,24 @@ function isScrolledToBottom(target) {
9
9
  function hasScrollbar(target) {
10
10
  return target.scrollHeight > target.clientHeight;
11
11
  }
12
- const getScrollbarSize = () => {
13
- const scrollDiv = document.createElement('div');
14
- scrollDiv.style.width = '99px';
15
- scrollDiv.style.height = '99px';
16
- scrollDiv.style.position = 'absolute';
17
- scrollDiv.style.top = '-9999px';
18
- scrollDiv.style.overflow = 'scroll';
19
- document.body.appendChild(scrollDiv);
20
- const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
21
- document.body.removeChild(scrollDiv);
22
- return scrollbarSize;
23
- };
12
+ const getScrollbarSize = (() => {
13
+ let cachedSize;
14
+ return () => {
15
+ if (cachedSize !== undefined)
16
+ return cachedSize;
17
+ const scrollDiv = document.createElement('div');
18
+ scrollDiv.style.width = '99px';
19
+ scrollDiv.style.height = '99px';
20
+ scrollDiv.style.position = 'absolute';
21
+ scrollDiv.style.top = '-9999px';
22
+ scrollDiv.style.overflow = 'scroll';
23
+ document.body.appendChild(scrollDiv);
24
+ const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
25
+ document.body.removeChild(scrollDiv);
26
+ cachedSize = scrollbarSize;
27
+ return scrollbarSize;
28
+ };
29
+ })();
24
30
  const isOverflowing = (container) => {
25
31
  if (document.body === container) {
26
32
  return window.innerWidth > document.documentElement.clientWidth;
@@ -95,4 +101,4 @@ const handleContainer = (container) => {
95
101
  });
96
102
  };
97
103
 
98
- export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
104
+ export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "4.1.4",
3
+ "version": "4.2.2",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "main": "index.js",
8
8
  "scripts": {
9
- "postinstall": "node ./send-stats.js > /dev/null 2>&1 || exit 0"
9
+ "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
10
10
  },
11
11
  "publishConfig": {
12
12
  "access": "public",
13
13
  "directory": "dist"
14
14
  },
15
15
  "dependencies": {
16
- "@alfalab/core-components-backdrop": "^2.1.1",
16
+ "@alfalab/core-components-backdrop": "^2.1.3",
17
17
  "@alfalab/core-components-global-store": "^1.1.2",
18
- "@alfalab/core-components-portal": "^2.0.4",
19
- "@alfalab/core-components-stack": "^3.0.4",
18
+ "@alfalab/core-components-portal": "^2.0.6",
19
+ "@alfalab/core-components-stack": "^3.0.5",
20
20
  "@juggle/resize-observer": "^3.3.1",
21
21
  "classnames": "^2.2.6",
22
22
  "react-focus-lock": "^2.5.0",
package/utils.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  declare function isScrolledToTop(target: HTMLElement): boolean;
2
2
  declare function isScrolledToBottom(target: HTMLElement): boolean;
3
3
  declare function hasScrollbar(target: HTMLElement): boolean;
4
+ declare const getScrollbarSize: () => number;
4
5
  declare const restoreContainerStyles: (container: HTMLElement) => void;
5
6
  declare const handleContainer: (container?: HTMLElement | undefined) => void;
6
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
7
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
package/utils.js CHANGED
@@ -13,18 +13,24 @@ function isScrolledToBottom(target) {
13
13
  function hasScrollbar(target) {
14
14
  return target.scrollHeight > target.clientHeight;
15
15
  }
16
- var getScrollbarSize = function () {
17
- var scrollDiv = document.createElement('div');
18
- scrollDiv.style.width = '99px';
19
- scrollDiv.style.height = '99px';
20
- scrollDiv.style.position = 'absolute';
21
- scrollDiv.style.top = '-9999px';
22
- scrollDiv.style.overflow = 'scroll';
23
- document.body.appendChild(scrollDiv);
24
- var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
25
- document.body.removeChild(scrollDiv);
26
- return scrollbarSize;
27
- };
16
+ var getScrollbarSize = (function () {
17
+ var cachedSize;
18
+ return function () {
19
+ if (cachedSize !== undefined)
20
+ return cachedSize;
21
+ var scrollDiv = document.createElement('div');
22
+ scrollDiv.style.width = '99px';
23
+ scrollDiv.style.height = '99px';
24
+ scrollDiv.style.position = 'absolute';
25
+ scrollDiv.style.top = '-9999px';
26
+ scrollDiv.style.overflow = 'scroll';
27
+ document.body.appendChild(scrollDiv);
28
+ var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
29
+ document.body.removeChild(scrollDiv);
30
+ cachedSize = scrollbarSize;
31
+ return scrollbarSize;
32
+ };
33
+ })();
28
34
  var isOverflowing = function (container) {
29
35
  if (document.body === container) {
30
36
  return window.innerWidth > document.documentElement.clientWidth;
@@ -100,6 +106,7 @@ var handleContainer = function (container) {
100
106
  });
101
107
  };
102
108
 
109
+ exports.getScrollbarSize = getScrollbarSize;
103
110
  exports.handleContainer = handleContainer;
104
111
  exports.hasScrollbar = hasScrollbar;
105
112
  exports.isScrolledToBottom = isScrolledToBottom;