@alfalab/core-components-base-modal 5.4.0 → 5.5.0

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 (24) hide show
  1. package/Component.js +3 -2
  2. package/cssm/Component.js +2 -1
  3. package/cssm/index.js +1 -1
  4. package/cssm/index.module.css +1 -0
  5. package/cssm/utils.d.ts +1 -2
  6. package/cssm/utils.js +2 -20
  7. package/esm/Component.js +4 -3
  8. package/esm/index.css +14 -13
  9. package/esm/index.js +2 -1
  10. package/esm/utils.d.ts +1 -2
  11. package/esm/utils.js +3 -20
  12. package/index.css +14 -13
  13. package/index.js +1 -1
  14. package/modern/Component.js +4 -3
  15. package/modern/index.css +14 -13
  16. package/modern/index.js +2 -1
  17. package/modern/utils.d.ts +1 -2
  18. package/modern/utils.js +3 -20
  19. package/package.json +2 -1
  20. package/src/Component.tsx +2 -2
  21. package/src/index.module.css +1 -0
  22. package/src/utils.ts +2 -26
  23. package/utils.d.ts +1 -2
  24. package/utils.js +2 -20
package/Component.js CHANGED
@@ -11,6 +11,7 @@ var resizeObserver = require('@juggle/resize-observer');
11
11
  var cn = require('classnames');
12
12
  var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal');
14
+ var coreComponentsShared = require('@alfalab/core-components-shared');
14
15
  var coreComponentsStack = require('@alfalab/core-components-stack');
15
16
  var utils = require('./utils.js');
16
17
  require('./matches-polyfill.js');
@@ -23,7 +24,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
23
24
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
24
25
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
25
26
 
26
- var styles = {"component":"base-modal__component_vq09z","wrapper":"base-modal__wrapper_vq09z","content":"base-modal__content_vq09z","hidden":"base-modal__hidden_vq09z","backdrop":"base-modal__backdrop_vq09z","appear":"base-modal__appear_vq09z","enter":"base-modal__enter_vq09z","appearActive":"base-modal__appearActive_vq09z","enterActive":"base-modal__enterActive_vq09z","exit":"base-modal__exit_vq09z","exitActive":"base-modal__exitActive_vq09z","exitDone":"base-modal__exitDone_vq09z"};
27
+ var styles = {"component":"base-modal__component_k89qv","wrapper":"base-modal__wrapper_k89qv","content":"base-modal__content_k89qv","hidden":"base-modal__hidden_k89qv","backdrop":"base-modal__backdrop_k89qv","appear":"base-modal__appear_k89qv","enter":"base-modal__enter_k89qv","appearActive":"base-modal__appearActive_k89qv","enterActive":"base-modal__enterActive_k89qv","exit":"base-modal__exit_k89qv","exitActive":"base-modal__exitActive_k89qv","exitDone":"base-modal__exitDone_k89qv"};
27
28
  require('./index.css')
28
29
 
29
30
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -119,7 +120,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
119
120
  var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
120
121
  if (event.clientX && clientWidth) {
121
122
  // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
122
- var offset = utils.getScrollbarSize() === 0 ? 17 : 0;
123
+ var offset = coreComponentsShared.browser.getScrollbarSize() === 0 ? 17 : 0;
123
124
  clickedOnScrollbar = event.clientX + offset > clientWidth;
124
125
  }
125
126
  if (!disableBackdropClick && !clickedOnScrollbar) {
package/cssm/Component.js CHANGED
@@ -11,6 +11,7 @@ var resizeObserver = require('@juggle/resize-observer');
11
11
  var cn = require('classnames');
12
12
  var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
14
+ var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
14
15
  var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
15
16
  var utils = require('./utils.js');
16
17
  var styles = require('./index.module.css');
@@ -118,7 +119,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
118
119
  var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
119
120
  if (event.clientX && clientWidth) {
120
121
  // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
121
- var offset = utils.getScrollbarSize() === 0 ? 17 : 0;
122
+ var offset = coreComponentsShared.browser.getScrollbarSize() === 0 ? 17 : 0;
122
123
  clickedOnScrollbar = event.clientX + offset > clientWidth;
123
124
  }
124
125
  if (!disableBackdropClick && !clickedOnScrollbar) {
package/cssm/index.js CHANGED
@@ -13,6 +13,7 @@ require('@juggle/resize-observer');
13
13
  require('classnames');
14
14
  require('@alfalab/core-components-backdrop/cssm');
15
15
  require('@alfalab/core-components-portal/cssm');
16
+ require('@alfalab/core-components-shared/cssm');
16
17
  require('@alfalab/core-components-stack/cssm');
17
18
  require('./index.module.css');
18
19
  require('./matches-polyfill.js');
@@ -22,7 +23,6 @@ require('@alfalab/core-components-global-store/cssm');
22
23
 
23
24
  exports.BaseModal = Component.BaseModal;
24
25
  exports.BaseModalContext = Component.BaseModalContext;
25
- exports.getScrollbarSize = utils.getScrollbarSize;
26
26
  exports.handleContainer = utils.handleContainer;
27
27
  exports.hasScrollbar = utils.hasScrollbar;
28
28
  exports.isScrolledToBottom = utils.isScrolledToBottom;
package/cssm/index.module.css CHANGED
@@ -32,6 +32,7 @@
32
32
  flex-direction: column;
33
33
  align-items: center;
34
34
  outline: 0;
35
+ overscroll-behavior: none;
35
36
  } .content {
36
37
  width: 100%;
37
38
  height: 100%;
package/cssm/utils.d.ts CHANGED
@@ -1,7 +1,6 @@
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;
5
4
  declare const restoreContainerStyles: (container: HTMLElement) => void;
6
5
  declare const handleContainer: (container?: HTMLElement) => void;
7
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
6
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
package/cssm/utils.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var coreComponentsGlobalStore = require('@alfalab/core-components-global-store/cssm');
6
+ var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
6
7
 
7
8
  function isScrolledToTop(target) {
8
9
  return target.scrollTop <= 0;
@@ -13,24 +14,6 @@ function isScrolledToBottom(target) {
13
14
  function hasScrollbar(target) {
14
15
  return target.scrollHeight > target.clientHeight;
15
16
  }
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
- })();
34
17
  var isOverflowing = function (container) {
35
18
  if (document.body === container) {
36
19
  return window.innerWidth > document.documentElement.clientWidth;
@@ -72,7 +55,7 @@ var handleContainer = function (container) {
72
55
  var containerStyles = [];
73
56
  if (isOverflowing(container)) {
74
57
  // Вычисляет размер до применения `overflow hidden` для избежания скачков
75
- var scrollbarSize = getScrollbarSize();
58
+ var scrollbarSize = coreComponentsShared.browser.getScrollbarSize();
76
59
  containerStyles.push({
77
60
  value: container.style.paddingRight,
78
61
  key: 'padding-right',
@@ -106,7 +89,6 @@ var handleContainer = function (container) {
106
89
  });
107
90
  };
108
91
 
109
- exports.getScrollbarSize = getScrollbarSize;
110
92
  exports.handleContainer = handleContainer;
111
93
  exports.hasScrollbar = hasScrollbar;
112
94
  exports.isScrolledToBottom = isScrolledToBottom;
package/esm/Component.js CHANGED
@@ -7,12 +7,13 @@ import { ResizeObserver } from '@juggle/resize-observer';
7
7
  import cn from 'classnames';
8
8
  import { Backdrop } from '@alfalab/core-components-backdrop/esm';
9
9
  import { Portal } from '@alfalab/core-components-portal/esm';
10
+ import { browser } from '@alfalab/core-components-shared/esm';
10
11
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
11
- import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
12
+ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
12
13
  import './matches-polyfill.js';
13
14
  import '@alfalab/core-components-global-store/esm';
14
15
 
15
- var styles = {"component":"base-modal__component_vq09z","wrapper":"base-modal__wrapper_vq09z","content":"base-modal__content_vq09z","hidden":"base-modal__hidden_vq09z","backdrop":"base-modal__backdrop_vq09z","appear":"base-modal__appear_vq09z","enter":"base-modal__enter_vq09z","appearActive":"base-modal__appearActive_vq09z","enterActive":"base-modal__enterActive_vq09z","exit":"base-modal__exit_vq09z","exitActive":"base-modal__exitActive_vq09z","exitDone":"base-modal__exitDone_vq09z"};
16
+ var styles = {"component":"base-modal__component_k89qv","wrapper":"base-modal__wrapper_k89qv","content":"base-modal__content_k89qv","hidden":"base-modal__hidden_k89qv","backdrop":"base-modal__backdrop_k89qv","appear":"base-modal__appear_k89qv","enter":"base-modal__enter_k89qv","appearActive":"base-modal__appearActive_k89qv","enterActive":"base-modal__enterActive_k89qv","exit":"base-modal__exit_k89qv","exitActive":"base-modal__exitActive_k89qv","exitDone":"base-modal__exitDone_k89qv"};
16
17
  require('./index.css')
17
18
 
18
19
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -108,7 +109,7 @@ var BaseModal = forwardRef(function (_a, ref) {
108
109
  var clientWidth = (_a = event.target) === null || _a === void 0 ? void 0 : _a.clientWidth;
109
110
  if (event.clientX && clientWidth) {
110
111
  // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
111
- var offset = getScrollbarSize() === 0 ? 17 : 0;
112
+ var offset = browser.getScrollbarSize() === 0 ? 17 : 0;
112
113
  clickedOnScrollbar = event.clientX + offset > clientWidth;
113
114
  }
114
115
  if (!disableBackdropClick && !clickedOnScrollbar) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 184a3 */
1
+ /* hash: n3idi */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
- } .base-modal__component_vq09z {
18
+ } .base-modal__component_k89qv {
19
19
  position: relative;
20
20
  box-sizing: border-box;
21
21
  background: var(--color-light-bg-primary);
22
22
  margin: auto;
23
23
  flex-shrink: 0;
24
- } .base-modal__wrapper_vq09z {
24
+ } .base-modal__wrapper_k89qv {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,28 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_vq09z {
36
+ overscroll-behavior: none;
37
+ } .base-modal__content_k89qv {
37
38
  width: 100%;
38
39
  height: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  flex: 1;
42
- } .base-modal__hidden_vq09z {
43
+ } .base-modal__hidden_k89qv {
43
44
  display: none;
44
- } .base-modal__backdrop_vq09z {
45
+ } .base-modal__backdrop_k89qv {
45
46
  z-index: 0;
46
- } .base-modal__appear_vq09z,
47
- .base-modal__enter_vq09z {
47
+ } .base-modal__appear_k89qv,
48
+ .base-modal__enter_k89qv {
48
49
  opacity: 0;
49
- } .base-modal__appearActive_vq09z,
50
- .base-modal__enterActive_vq09z {
50
+ } .base-modal__appearActive_k89qv,
51
+ .base-modal__enterActive_k89qv {
51
52
  opacity: 1;
52
53
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_vq09z {
54
+ } .base-modal__exit_k89qv {
54
55
  opacity: 1;
55
- } .base-modal__exitActive_vq09z,
56
- .base-modal__exitDone_vq09z {
56
+ } .base-modal__exitActive_k89qv,
57
+ .base-modal__exitDone_k89qv {
57
58
  opacity: 0;
58
59
  transition: opacity 200ms ease-out;
59
60
  }
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export { BaseModal, BaseModalContext } from './Component.js';
2
- export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
2
+ export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
3
3
  import 'tslib';
4
4
  import 'react';
5
5
  import 'react-focus-lock';
@@ -9,6 +9,7 @@ import '@juggle/resize-observer';
9
9
  import 'classnames';
10
10
  import '@alfalab/core-components-backdrop/esm';
11
11
  import '@alfalab/core-components-portal/esm';
12
+ import '@alfalab/core-components-shared/esm';
12
13
  import '@alfalab/core-components-stack/esm';
13
14
  import './matches-polyfill.js';
14
15
  import '@alfalab/core-components-global-store/esm';
package/esm/utils.d.ts CHANGED
@@ -1,7 +1,6 @@
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;
5
4
  declare const restoreContainerStyles: (container: HTMLElement) => void;
6
5
  declare const handleContainer: (container?: HTMLElement) => void;
7
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
6
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
package/esm/utils.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { getModalStore } from '@alfalab/core-components-global-store/esm';
2
+ import { browser } from '@alfalab/core-components-shared/esm';
2
3
 
3
4
  function isScrolledToTop(target) {
4
5
  return target.scrollTop <= 0;
@@ -9,24 +10,6 @@ function isScrolledToBottom(target) {
9
10
  function hasScrollbar(target) {
10
11
  return target.scrollHeight > target.clientHeight;
11
12
  }
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
- })();
30
13
  var isOverflowing = function (container) {
31
14
  if (document.body === container) {
32
15
  return window.innerWidth > document.documentElement.clientWidth;
@@ -68,7 +51,7 @@ var handleContainer = function (container) {
68
51
  var containerStyles = [];
69
52
  if (isOverflowing(container)) {
70
53
  // Вычисляет размер до применения `overflow hidden` для избежания скачков
71
- var scrollbarSize = getScrollbarSize();
54
+ var scrollbarSize = browser.getScrollbarSize();
72
55
  containerStyles.push({
73
56
  value: container.style.paddingRight,
74
57
  key: 'padding-right',
@@ -102,4 +85,4 @@ var handleContainer = function (container) {
102
85
  });
103
86
  };
104
87
 
105
- export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
88
+ export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 184a3 */
1
+ /* hash: n3idi */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
- } .base-modal__component_vq09z {
18
+ } .base-modal__component_k89qv {
19
19
  position: relative;
20
20
  box-sizing: border-box;
21
21
  background: var(--color-light-bg-primary);
22
22
  margin: auto;
23
23
  flex-shrink: 0;
24
- } .base-modal__wrapper_vq09z {
24
+ } .base-modal__wrapper_k89qv {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,28 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_vq09z {
36
+ overscroll-behavior: none;
37
+ } .base-modal__content_k89qv {
37
38
  width: 100%;
38
39
  height: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  flex: 1;
42
- } .base-modal__hidden_vq09z {
43
+ } .base-modal__hidden_k89qv {
43
44
  display: none;
44
- } .base-modal__backdrop_vq09z {
45
+ } .base-modal__backdrop_k89qv {
45
46
  z-index: 0;
46
- } .base-modal__appear_vq09z,
47
- .base-modal__enter_vq09z {
47
+ } .base-modal__appear_k89qv,
48
+ .base-modal__enter_k89qv {
48
49
  opacity: 0;
49
- } .base-modal__appearActive_vq09z,
50
- .base-modal__enterActive_vq09z {
50
+ } .base-modal__appearActive_k89qv,
51
+ .base-modal__enterActive_k89qv {
51
52
  opacity: 1;
52
53
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_vq09z {
54
+ } .base-modal__exit_k89qv {
54
55
  opacity: 1;
55
- } .base-modal__exitActive_vq09z,
56
- .base-modal__exitDone_vq09z {
56
+ } .base-modal__exitActive_k89qv,
57
+ .base-modal__exitDone_k89qv {
57
58
  opacity: 0;
58
59
  transition: opacity 200ms ease-out;
59
60
  }
package/index.js CHANGED
@@ -13,6 +13,7 @@ require('@juggle/resize-observer');
13
13
  require('classnames');
14
14
  require('@alfalab/core-components-backdrop');
15
15
  require('@alfalab/core-components-portal');
16
+ require('@alfalab/core-components-shared');
16
17
  require('@alfalab/core-components-stack');
17
18
  require('./matches-polyfill.js');
18
19
  require('@alfalab/core-components-global-store');
@@ -21,7 +22,6 @@ require('@alfalab/core-components-global-store');
21
22
 
22
23
  exports.BaseModal = Component.BaseModal;
23
24
  exports.BaseModalContext = Component.BaseModalContext;
24
- exports.getScrollbarSize = utils.getScrollbarSize;
25
25
  exports.handleContainer = utils.handleContainer;
26
26
  exports.hasScrollbar = utils.hasScrollbar;
27
27
  exports.isScrolledToBottom = utils.isScrolledToBottom;
package/modern/Component.js CHANGED
@@ -6,12 +6,13 @@ import { ResizeObserver } from '@juggle/resize-observer';
6
6
  import cn from 'classnames';
7
7
  import { Backdrop } from '@alfalab/core-components-backdrop/modern';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
+ import { browser } from '@alfalab/core-components-shared/modern';
9
10
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
10
- import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
11
+ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
11
12
  import './matches-polyfill.js';
12
13
  import '@alfalab/core-components-global-store/modern';
13
14
 
14
- const styles = {"component":"base-modal__component_vq09z","wrapper":"base-modal__wrapper_vq09z","content":"base-modal__content_vq09z","hidden":"base-modal__hidden_vq09z","backdrop":"base-modal__backdrop_vq09z","appear":"base-modal__appear_vq09z","enter":"base-modal__enter_vq09z","appearActive":"base-modal__appearActive_vq09z","enterActive":"base-modal__enterActive_vq09z","exit":"base-modal__exit_vq09z","exitActive":"base-modal__exitActive_vq09z","exitDone":"base-modal__exitDone_vq09z"};
15
+ const styles = {"component":"base-modal__component_k89qv","wrapper":"base-modal__wrapper_k89qv","content":"base-modal__content_k89qv","hidden":"base-modal__hidden_k89qv","backdrop":"base-modal__backdrop_k89qv","appear":"base-modal__appear_k89qv","enter":"base-modal__enter_k89qv","appearActive":"base-modal__appearActive_k89qv","enterActive":"base-modal__enterActive_k89qv","exit":"base-modal__exit_k89qv","exitActive":"base-modal__exitActive_k89qv","exitDone":"base-modal__exitDone_k89qv"};
15
16
  require('./index.css')
16
17
 
17
18
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -106,7 +107,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
106
107
  const clientWidth = event.target?.clientWidth;
107
108
  if (event.clientX && clientWidth) {
108
109
  // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
109
- const offset = getScrollbarSize() === 0 ? 17 : 0;
110
+ const offset = browser.getScrollbarSize() === 0 ? 17 : 0;
110
111
  clickedOnScrollbar = event.clientX + offset > clientWidth;
111
112
  }
112
113
  if (!disableBackdropClick && !clickedOnScrollbar) {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 184a3 */
1
+ /* hash: n3idi */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
- } .base-modal__component_vq09z {
18
+ } .base-modal__component_k89qv {
19
19
  position: relative;
20
20
  box-sizing: border-box;
21
21
  background: var(--color-light-bg-primary);
22
22
  margin: auto;
23
23
  flex-shrink: 0;
24
- } .base-modal__wrapper_vq09z {
24
+ } .base-modal__wrapper_k89qv {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,28 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_vq09z {
36
+ overscroll-behavior: none;
37
+ } .base-modal__content_k89qv {
37
38
  width: 100%;
38
39
  height: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  flex: 1;
42
- } .base-modal__hidden_vq09z {
43
+ } .base-modal__hidden_k89qv {
43
44
  display: none;
44
- } .base-modal__backdrop_vq09z {
45
+ } .base-modal__backdrop_k89qv {
45
46
  z-index: 0;
46
- } .base-modal__appear_vq09z,
47
- .base-modal__enter_vq09z {
47
+ } .base-modal__appear_k89qv,
48
+ .base-modal__enter_k89qv {
48
49
  opacity: 0;
49
- } .base-modal__appearActive_vq09z,
50
- .base-modal__enterActive_vq09z {
50
+ } .base-modal__appearActive_k89qv,
51
+ .base-modal__enterActive_k89qv {
51
52
  opacity: 1;
52
53
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_vq09z {
54
+ } .base-modal__exit_k89qv {
54
55
  opacity: 1;
55
- } .base-modal__exitActive_vq09z,
56
- .base-modal__exitDone_vq09z {
56
+ } .base-modal__exitActive_k89qv,
57
+ .base-modal__exitDone_k89qv {
57
58
  opacity: 0;
58
59
  transition: opacity 200ms ease-out;
59
60
  }
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export { BaseModal, BaseModalContext } from './Component.js';
2
- export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
2
+ export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
3
3
  import 'react';
4
4
  import 'react-focus-lock';
5
5
  import 'react-merge-refs';
@@ -8,6 +8,7 @@ import '@juggle/resize-observer';
8
8
  import 'classnames';
9
9
  import '@alfalab/core-components-backdrop/modern';
10
10
  import '@alfalab/core-components-portal/modern';
11
+ import '@alfalab/core-components-shared/modern';
11
12
  import '@alfalab/core-components-stack/modern';
12
13
  import './matches-polyfill.js';
13
14
  import '@alfalab/core-components-global-store/modern';
package/modern/utils.d.ts CHANGED
@@ -1,7 +1,6 @@
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;
5
4
  declare const restoreContainerStyles: (container: HTMLElement) => void;
6
5
  declare const handleContainer: (container?: HTMLElement) => void;
7
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
6
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
package/modern/utils.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { getModalStore } from '@alfalab/core-components-global-store/modern';
2
+ import { browser } from '@alfalab/core-components-shared/modern';
2
3
 
3
4
  function isScrolledToTop(target) {
4
5
  return target.scrollTop <= 0;
@@ -9,24 +10,6 @@ function isScrolledToBottom(target) {
9
10
  function hasScrollbar(target) {
10
11
  return target.scrollHeight > target.clientHeight;
11
12
  }
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
- })();
30
13
  const isOverflowing = (container) => {
31
14
  if (document.body === container) {
32
15
  return window.innerWidth > document.documentElement.clientWidth;
@@ -65,7 +48,7 @@ const handleContainer = (container) => {
65
48
  const containerStyles = [];
66
49
  if (isOverflowing(container)) {
67
50
  // Вычисляет размер до применения `overflow hidden` для избежания скачков
68
- const scrollbarSize = getScrollbarSize();
51
+ const scrollbarSize = browser.getScrollbarSize();
69
52
  containerStyles.push({
70
53
  value: container.style.paddingRight,
71
54
  key: 'padding-right',
@@ -99,4 +82,4 @@ const handleContainer = (container) => {
99
82
  });
100
83
  };
101
84
 
102
- export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
85
+ export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "5.4.0",
3
+ "version": "5.5.0",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,6 +15,7 @@
15
15
  "@alfalab/core-components-global-store": "^2.1.0",
16
16
  "@alfalab/core-components-portal": "^3.2.0",
17
17
  "@alfalab/core-components-stack": "^4.1.0",
18
+ "@alfalab/core-components-shared": "^0.7.0",
18
19
  "@juggle/resize-observer": "^3.3.1",
19
20
  "classnames": "^2.3.1",
20
21
  "react-focus-lock": "^2.9.3",
package/src/Component.tsx CHANGED
@@ -22,10 +22,10 @@ import cn from 'classnames';
22
22
 
23
23
  import { Backdrop as DefaultBackdrop, BackdropProps } from '@alfalab/core-components-backdrop';
24
24
  import { Portal, PortalProps } from '@alfalab/core-components-portal';
25
+ import { browser } from '@alfalab/core-components-shared';
25
26
  import { Stack, stackingOrder } from '@alfalab/core-components-stack';
26
27
 
27
28
  import {
28
- getScrollbarSize,
29
29
  handleContainer,
30
30
  hasScrollbar,
31
31
  isScrolledToBottom,
@@ -365,7 +365,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
365
365
 
366
366
  if (event.clientX && clientWidth) {
367
367
  // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
368
- const offset = getScrollbarSize() === 0 ? 17 : 0;
368
+ const offset = browser.getScrollbarSize() === 0 ? 17 : 0;
369
369
 
370
370
  clickedOnScrollbar = event.clientX + offset > clientWidth;
371
371
  }
package/src/index.module.css CHANGED
@@ -20,6 +20,7 @@
20
20
  flex-direction: column;
21
21
  align-items: center;
22
22
  outline: 0;
23
+ overscroll-behavior: none;
23
24
  }
24
25
 
25
26
  .content {
package/src/utils.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { getModalStore, SavedStyle } from '@alfalab/core-components-global-store';
2
+ import { browser } from '@alfalab/core-components-shared';
2
3
 
3
4
  export function isScrolledToTop(target: HTMLElement) {
4
5
  return target.scrollTop <= 0;
@@ -12,31 +13,6 @@ export function hasScrollbar(target: HTMLElement) {
12
13
  return target.scrollHeight > target.clientHeight;
13
14
  }
14
15
 
15
- export const getScrollbarSize = (() => {
16
- let cachedSize: number;
17
-
18
- return () => {
19
- if (cachedSize !== undefined) return cachedSize;
20
-
21
- const scrollDiv = document.createElement('div');
22
-
23
- scrollDiv.style.width = '99px';
24
- scrollDiv.style.height = '99px';
25
- scrollDiv.style.position = 'absolute';
26
- scrollDiv.style.top = '-9999px';
27
- scrollDiv.style.overflow = 'scroll';
28
-
29
- document.body.appendChild(scrollDiv);
30
- const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
31
-
32
- document.body.removeChild(scrollDiv);
33
-
34
- cachedSize = scrollbarSize;
35
-
36
- return scrollbarSize;
37
- };
38
- })();
39
-
40
16
  const isOverflowing = (container: Element) => {
41
17
  if (document.body === container) {
42
18
  return window.innerWidth > document.documentElement.clientWidth;
@@ -88,7 +64,7 @@ export const handleContainer = (container?: HTMLElement) => {
88
64
 
89
65
  if (isOverflowing(container)) {
90
66
  // Вычисляет размер до применения `overflow hidden` для избежания скачков
91
- const scrollbarSize = getScrollbarSize();
67
+ const scrollbarSize = browser.getScrollbarSize();
92
68
 
93
69
  containerStyles.push({
94
70
  value: container.style.paddingRight,
package/utils.d.ts CHANGED
@@ -1,7 +1,6 @@
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;
5
4
  declare const restoreContainerStyles: (container: HTMLElement) => void;
6
5
  declare const handleContainer: (container?: HTMLElement) => void;
7
- export { isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };
6
+ export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
package/utils.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var coreComponentsGlobalStore = require('@alfalab/core-components-global-store');
6
+ var coreComponentsShared = require('@alfalab/core-components-shared');
6
7
 
7
8
  function isScrolledToTop(target) {
8
9
  return target.scrollTop <= 0;
@@ -13,24 +14,6 @@ function isScrolledToBottom(target) {
13
14
  function hasScrollbar(target) {
14
15
  return target.scrollHeight > target.clientHeight;
15
16
  }
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
- })();
34
17
  var isOverflowing = function (container) {
35
18
  if (document.body === container) {
36
19
  return window.innerWidth > document.documentElement.clientWidth;
@@ -72,7 +55,7 @@ var handleContainer = function (container) {
72
55
  var containerStyles = [];
73
56
  if (isOverflowing(container)) {
74
57
  // Вычисляет размер до применения `overflow hidden` для избежания скачков
75
- var scrollbarSize = getScrollbarSize();
58
+ var scrollbarSize = coreComponentsShared.browser.getScrollbarSize();
76
59
  containerStyles.push({
77
60
  value: container.style.paddingRight,
78
61
  key: 'padding-right',
@@ -106,7 +89,6 @@ var handleContainer = function (container) {
106
89
  });
107
90
  };
108
91
 
109
- exports.getScrollbarSize = getScrollbarSize;
110
92
  exports.handleContainer = handleContainer;
111
93
  exports.hasScrollbar = hasScrollbar;
112
94
  exports.isScrolledToBottom = isScrolledToBottom;