@alfalab/core-components-base-modal 5.4.1 → 5.6.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 (26) hide show
  1. package/Component.d.ts +4 -0
  2. package/Component.js +13 -8
  3. package/cssm/Component.d.ts +4 -0
  4. package/cssm/Component.js +12 -7
  5. package/cssm/index.js +1 -1
  6. package/cssm/utils.d.ts +1 -2
  7. package/cssm/utils.js +2 -20
  8. package/esm/Component.d.ts +4 -0
  9. package/esm/Component.js +14 -9
  10. package/esm/index.css +13 -13
  11. package/esm/index.js +2 -1
  12. package/esm/utils.d.ts +1 -2
  13. package/esm/utils.js +3 -20
  14. package/index.css +13 -13
  15. package/index.js +1 -1
  16. package/modern/Component.d.ts +4 -0
  17. package/modern/Component.js +13 -8
  18. package/modern/index.css +13 -13
  19. package/modern/index.js +2 -1
  20. package/modern/utils.d.ts +1 -2
  21. package/modern/utils.js +3 -20
  22. package/package.json +2 -1
  23. package/src/Component.tsx +24 -8
  24. package/src/utils.ts +2 -26
  25. package/utils.d.ts +1 -2
  26. package/utils.js +2 -20
package/Component.d.ts CHANGED
@@ -71,6 +71,10 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на dialog wrapper
76
+ */
77
+ wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
78
  /**
75
79
  * Дополнительные пропсы на обертку контента
76
80
  */
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_eojla","wrapper":"base-modal__wrapper_eojla","content":"base-modal__content_eojla","hidden":"base-modal__hidden_eojla","backdrop":"base-modal__backdrop_eojla","appear":"base-modal__appear_eojla","enter":"base-modal__enter_eojla","appearActive":"base-modal__appearActive_eojla","enterActive":"base-modal__enterActive_eojla","exit":"base-modal__exit_eojla","exitActive":"base-modal__exitActive_eojla","exitDone":"base-modal__exitDone_eojla"};
27
+ var styles = {"component":"base-modal__component_svmxx","wrapper":"base-modal__wrapper_svmxx","content":"base-modal__content_svmxx","hidden":"base-modal__hidden_svmxx","backdrop":"base-modal__backdrop_svmxx","appear":"base-modal__appear_svmxx","enter":"base-modal__enter_svmxx","appearActive":"base-modal__appearActive_svmxx","enterActive":"base-modal__enterActive_svmxx","exit":"base-modal__exit_svmxx","exitActive":"base-modal__exitActive_svmxx","exitDone":"base-modal__exitDone_svmxx"};
27
28
  require('./index.css')
28
29
 
29
30
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -43,7 +44,7 @@ var BaseModalContext = React__default.default.createContext({
43
44
  onClose: function () { return null; },
44
45
  });
45
46
  var BaseModal = React.forwardRef(function (_a, ref) {
46
- 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, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, 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, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
47
+ 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, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, 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, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
47
48
  var _q = React.useState(null), exited = _q[0], setExited = _q[1];
48
49
  var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
49
50
  var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -93,12 +94,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
93
94
  return;
94
95
  if (hasHeader) {
95
96
  setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
96
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
97
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
97
98
  }
98
99
  if (hasFooter) {
99
100
  setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
100
101
  componentNodeRef.current.getBoundingClientRect().bottom >=
101
- window.innerHeight);
102
+ window.innerHeight - 1);
102
103
  }
103
104
  }, [hasFooter, hasHeader, headerOffset]);
104
105
  var handleClose = React.useCallback(function (event, reason) {
@@ -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) {
@@ -240,13 +241,17 @@ var BaseModal = React.forwardRef(function (_a, ref) {
240
241
  Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
241
242
  zIndex: computedZIndex,
242
243
  } }))),
243
- React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles.wrapper, wrapperClassName, (_a = {},
244
+ React__default.default.createElement("div", tslib.__assign({}, wrapperProps, { role: 'dialog', className: cn__default.default(styles.wrapper, wrapperClassName, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, (_a = {},
244
245
  _a[styles.hidden] = !open && isExited,
245
- _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
246
+ _a)), ref: mergeRefs__default.default([
247
+ ref,
248
+ wrapperRef,
249
+ wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
250
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
246
251
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
247
252
  tabIndex: 0, "data-test-id": dataTestId, style: {
248
253
  zIndex: computedZIndex,
249
- } },
254
+ } }),
250
255
  React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
251
256
  React__default.default.createElement("div", tslib.__assign({}, componentDivProps, { className: cn__default.default(styles.component, className, componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.className), ref: mergeRefs__default.default([
252
257
  componentRef,
package/cssm/Component.d.ts CHANGED
@@ -71,6 +71,10 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на dialog wrapper
76
+ */
77
+ wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
78
  /**
75
79
  * Дополнительные пропсы на обертку контента
76
80
  */
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');
@@ -42,7 +43,7 @@ var BaseModalContext = React__default.default.createContext({
42
43
  onClose: function () { return null; },
43
44
  });
44
45
  var BaseModal = React.forwardRef(function (_a, ref) {
45
- 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, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, 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, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
46
+ 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, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, 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, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
46
47
  var _q = React.useState(null), exited = _q[0], setExited = _q[1];
47
48
  var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
48
49
  var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -92,12 +93,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
92
93
  return;
93
94
  if (hasHeader) {
94
95
  setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
95
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
96
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
96
97
  }
97
98
  if (hasFooter) {
98
99
  setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
99
100
  componentNodeRef.current.getBoundingClientRect().bottom >=
100
- window.innerHeight);
101
+ window.innerHeight - 1);
101
102
  }
102
103
  }, [hasFooter, hasHeader, headerOffset]);
103
104
  var handleClose = React.useCallback(function (event, reason) {
@@ -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) {
@@ -239,13 +240,17 @@ var BaseModal = React.forwardRef(function (_a, ref) {
239
240
  Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
240
241
  zIndex: computedZIndex,
241
242
  } }))),
242
- React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, (_a = {},
243
+ React__default.default.createElement("div", tslib.__assign({}, wrapperProps, { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, (_a = {},
243
244
  _a[styles__default.default.hidden] = !open && isExited,
244
- _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
245
+ _a)), ref: mergeRefs__default.default([
246
+ ref,
247
+ wrapperRef,
248
+ wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
249
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
245
250
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
246
251
  tabIndex: 0, "data-test-id": dataTestId, style: {
247
252
  zIndex: computedZIndex,
248
- } },
253
+ } }),
249
254
  React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
250
255
  React__default.default.createElement("div", tslib.__assign({}, componentDivProps, { className: cn__default.default(styles__default.default.component, className, componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.className), ref: mergeRefs__default.default([
251
256
  componentRef,
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/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.d.ts CHANGED
@@ -71,6 +71,10 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на dialog wrapper
76
+ */
77
+ wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
78
  /**
75
79
  * Дополнительные пропсы на обертку контента
76
80
  */
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_eojla","wrapper":"base-modal__wrapper_eojla","content":"base-modal__content_eojla","hidden":"base-modal__hidden_eojla","backdrop":"base-modal__backdrop_eojla","appear":"base-modal__appear_eojla","enter":"base-modal__enter_eojla","appearActive":"base-modal__appearActive_eojla","enterActive":"base-modal__enterActive_eojla","exit":"base-modal__exit_eojla","exitActive":"base-modal__exitActive_eojla","exitDone":"base-modal__exitDone_eojla"};
16
+ var styles = {"component":"base-modal__component_svmxx","wrapper":"base-modal__wrapper_svmxx","content":"base-modal__content_svmxx","hidden":"base-modal__hidden_svmxx","backdrop":"base-modal__backdrop_svmxx","appear":"base-modal__appear_svmxx","enter":"base-modal__enter_svmxx","appearActive":"base-modal__appearActive_svmxx","enterActive":"base-modal__enterActive_svmxx","exit":"base-modal__exit_svmxx","exitActive":"base-modal__exitActive_svmxx","exitDone":"base-modal__exitDone_svmxx"};
16
17
  require('./index.css')
17
18
 
18
19
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -32,7 +33,7 @@ var BaseModalContext = React.createContext({
32
33
  onClose: function () { return null; },
33
34
  });
34
35
  var BaseModal = forwardRef(function (_a, ref) {
35
- 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, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, 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, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
36
+ 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, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, 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, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p;
36
37
  var _q = useState(null), exited = _q[0], setExited = _q[1];
37
38
  var _r = useState(false), hasScroll = _r[0], setHasScroll = _r[1];
38
39
  var _s = useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -82,12 +83,12 @@ var BaseModal = forwardRef(function (_a, ref) {
82
83
  return;
83
84
  if (hasHeader) {
84
85
  setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
85
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
86
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
86
87
  }
87
88
  if (hasFooter) {
88
89
  setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
89
90
  componentNodeRef.current.getBoundingClientRect().bottom >=
90
- window.innerHeight);
91
+ window.innerHeight - 1);
91
92
  }
92
93
  }, [hasFooter, hasHeader, headerOffset]);
93
94
  var handleClose = useCallback(function (event, reason) {
@@ -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) {
@@ -229,13 +230,17 @@ var BaseModal = forwardRef(function (_a, ref) {
229
230
  Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
230
231
  zIndex: computedZIndex,
231
232
  } }))),
232
- React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
233
+ React.createElement("div", __assign({}, wrapperProps, { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, (_a = {},
233
234
  _a[styles.hidden] = !open && isExited,
234
- _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
235
+ _a)), ref: mergeRefs([
236
+ ref,
237
+ wrapperRef,
238
+ wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
239
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
235
240
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
236
241
  tabIndex: 0, "data-test-id": dataTestId, style: {
237
242
  zIndex: computedZIndex,
238
- } },
243
+ } }),
239
244
  React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
240
245
  React.createElement("div", __assign({}, componentDivProps, { className: cn(styles.component, className, componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.className), ref: mergeRefs([
241
246
  componentRef,
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1r8gg */
1
+ /* hash: zaw9u */
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_eojla {
18
+ } .base-modal__component_svmxx {
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_eojla {
24
+ } .base-modal__wrapper_svmxx {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -34,27 +34,27 @@
34
34
  align-items: center;
35
35
  outline: 0;
36
36
  overscroll-behavior: none;
37
- } .base-modal__content_eojla {
37
+ } .base-modal__content_svmxx {
38
38
  width: 100%;
39
39
  height: 100%;
40
40
  display: flex;
41
41
  flex-direction: column;
42
42
  flex: 1;
43
- } .base-modal__hidden_eojla {
43
+ } .base-modal__hidden_svmxx {
44
44
  display: none;
45
- } .base-modal__backdrop_eojla {
45
+ } .base-modal__backdrop_svmxx {
46
46
  z-index: 0;
47
- } .base-modal__appear_eojla,
48
- .base-modal__enter_eojla {
47
+ } .base-modal__appear_svmxx,
48
+ .base-modal__enter_svmxx {
49
49
  opacity: 0;
50
- } .base-modal__appearActive_eojla,
51
- .base-modal__enterActive_eojla {
50
+ } .base-modal__appearActive_svmxx,
51
+ .base-modal__enterActive_svmxx {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
- } .base-modal__exit_eojla {
54
+ } .base-modal__exit_svmxx {
55
55
  opacity: 1;
56
- } .base-modal__exitActive_eojla,
57
- .base-modal__exitDone_eojla {
56
+ } .base-modal__exitActive_svmxx,
57
+ .base-modal__exitDone_svmxx {
58
58
  opacity: 0;
59
59
  transition: opacity 200ms ease-out;
60
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: 1r8gg */
1
+ /* hash: zaw9u */
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_eojla {
18
+ } .base-modal__component_svmxx {
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_eojla {
24
+ } .base-modal__wrapper_svmxx {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -34,27 +34,27 @@
34
34
  align-items: center;
35
35
  outline: 0;
36
36
  overscroll-behavior: none;
37
- } .base-modal__content_eojla {
37
+ } .base-modal__content_svmxx {
38
38
  width: 100%;
39
39
  height: 100%;
40
40
  display: flex;
41
41
  flex-direction: column;
42
42
  flex: 1;
43
- } .base-modal__hidden_eojla {
43
+ } .base-modal__hidden_svmxx {
44
44
  display: none;
45
- } .base-modal__backdrop_eojla {
45
+ } .base-modal__backdrop_svmxx {
46
46
  z-index: 0;
47
- } .base-modal__appear_eojla,
48
- .base-modal__enter_eojla {
47
+ } .base-modal__appear_svmxx,
48
+ .base-modal__enter_svmxx {
49
49
  opacity: 0;
50
- } .base-modal__appearActive_eojla,
51
- .base-modal__enterActive_eojla {
50
+ } .base-modal__appearActive_svmxx,
51
+ .base-modal__enterActive_svmxx {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
- } .base-modal__exit_eojla {
54
+ } .base-modal__exit_svmxx {
55
55
  opacity: 1;
56
- } .base-modal__exitActive_eojla,
57
- .base-modal__exitDone_eojla {
56
+ } .base-modal__exitActive_svmxx,
57
+ .base-modal__exitDone_svmxx {
58
58
  opacity: 0;
59
59
  transition: opacity 200ms ease-out;
60
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.d.ts CHANGED
@@ -71,6 +71,10 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на dialog wrapper
76
+ */
77
+ wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
78
  /**
75
79
  * Дополнительные пропсы на обертку контента
76
80
  */
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_eojla","wrapper":"base-modal__wrapper_eojla","content":"base-modal__content_eojla","hidden":"base-modal__hidden_eojla","backdrop":"base-modal__backdrop_eojla","appear":"base-modal__appear_eojla","enter":"base-modal__enter_eojla","appearActive":"base-modal__appearActive_eojla","enterActive":"base-modal__enterActive_eojla","exit":"base-modal__exit_eojla","exitActive":"base-modal__exitActive_eojla","exitDone":"base-modal__exitDone_eojla"};
15
+ const styles = {"component":"base-modal__component_svmxx","wrapper":"base-modal__wrapper_svmxx","content":"base-modal__content_svmxx","hidden":"base-modal__hidden_svmxx","backdrop":"base-modal__backdrop_svmxx","appear":"base-modal__appear_svmxx","enter":"base-modal__enter_svmxx","appearActive":"base-modal__appearActive_svmxx","enterActive":"base-modal__enterActive_svmxx","exit":"base-modal__exit_svmxx","exitActive":"base-modal__exitActive_svmxx","exitDone":"base-modal__exitDone_svmxx"};
15
16
  require('./index.css')
16
17
 
17
18
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -31,7 +32,7 @@ const BaseModalContext = React.createContext({
31
32
  setHasFooter: () => null,
32
33
  onClose: () => null,
33
34
  });
34
- 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, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, }, ref) => {
35
+ 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, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, }, ref) => {
35
36
  const [exited, setExited] = useState(null);
36
37
  const [hasScroll, setHasScroll] = useState(false);
37
38
  const [hasHeader, setHasHeader] = useState(false);
@@ -81,12 +82,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
81
82
  return;
82
83
  if (hasHeader) {
83
84
  setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
84
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
85
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
85
86
  }
86
87
  if (hasFooter) {
87
88
  setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
88
89
  componentNodeRef.current.getBoundingClientRect().bottom >=
89
- window.innerHeight);
90
+ window.innerHeight - 1);
90
91
  }
91
92
  }, [hasFooter, hasHeader, headerOffset]);
92
93
  const handleClose = useCallback((event, reason) => {
@@ -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) {
@@ -225,9 +226,13 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
225
226
  Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
226
227
  zIndex: computedZIndex,
227
228
  } })),
228
- React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
229
+ React.createElement("div", { ...wrapperProps, role: 'dialog', className: cn(styles.wrapper, wrapperClassName, wrapperProps?.className, {
229
230
  [styles.hidden]: !open && isExited,
230
- }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
231
+ }), ref: mergeRefs([
232
+ ref,
233
+ wrapperRef,
234
+ wrapperProps?.ref,
235
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
231
236
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
232
237
  tabIndex: 0, "data-test-id": dataTestId, style: {
233
238
  zIndex: computedZIndex,
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1r8gg */
1
+ /* hash: zaw9u */
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_eojla {
18
+ } .base-modal__component_svmxx {
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_eojla {
24
+ } .base-modal__wrapper_svmxx {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -34,27 +34,27 @@
34
34
  align-items: center;
35
35
  outline: 0;
36
36
  overscroll-behavior: none;
37
- } .base-modal__content_eojla {
37
+ } .base-modal__content_svmxx {
38
38
  width: 100%;
39
39
  height: 100%;
40
40
  display: flex;
41
41
  flex-direction: column;
42
42
  flex: 1;
43
- } .base-modal__hidden_eojla {
43
+ } .base-modal__hidden_svmxx {
44
44
  display: none;
45
- } .base-modal__backdrop_eojla {
45
+ } .base-modal__backdrop_svmxx {
46
46
  z-index: 0;
47
- } .base-modal__appear_eojla,
48
- .base-modal__enter_eojla {
47
+ } .base-modal__appear_svmxx,
48
+ .base-modal__enter_svmxx {
49
49
  opacity: 0;
50
- } .base-modal__appearActive_eojla,
51
- .base-modal__enterActive_eojla {
50
+ } .base-modal__appearActive_svmxx,
51
+ .base-modal__enterActive_svmxx {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
- } .base-modal__exit_eojla {
54
+ } .base-modal__exit_svmxx {
55
55
  opacity: 1;
56
- } .base-modal__exitActive_eojla,
57
- .base-modal__exitDone_eojla {
56
+ } .base-modal__exitActive_svmxx,
57
+ .base-modal__exitDone_svmxx {
58
58
  opacity: 0;
59
59
  transition: opacity 200ms ease-out;
60
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.1",
3
+ "version": "5.6.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.8.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,
@@ -118,6 +118,11 @@ export type BaseModalProps = {
118
118
  */
119
119
  contentClassName?: string;
120
120
 
121
+ /**
122
+ * Дополнительные пропсы на dialog wrapper
123
+ */
124
+ wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
125
+
121
126
  /**
122
127
  * Дополнительные пропсы на обертку контента
123
128
  */
@@ -250,6 +255,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
250
255
  keepMounted = false,
251
256
  className,
252
257
  contentClassName,
258
+ wrapperProps,
253
259
  contentProps,
254
260
  componentDivProps,
255
261
  wrapperClassName,
@@ -327,7 +333,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
327
333
  if (hasHeader) {
328
334
  setHeaderHighlighted(
329
335
  !isScrolledToTop(scrollableNodeRef.current) &&
330
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0,
336
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1,
331
337
  );
332
338
  }
333
339
 
@@ -335,7 +341,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
335
341
  setFooterHighlighted(
336
342
  !isScrolledToBottom(scrollableNodeRef.current) &&
337
343
  componentNodeRef.current.getBoundingClientRect().bottom >=
338
- window.innerHeight,
344
+ window.innerHeight - 1,
339
345
  );
340
346
  }
341
347
  }, [hasFooter, hasHeader, headerOffset]);
@@ -365,7 +371,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
365
371
 
366
372
  if (event.clientX && clientWidth) {
367
373
  // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
368
- const offset = getScrollbarSize() === 0 ? 17 : 0;
374
+ const offset = browser.getScrollbarSize() === 0 ? 17 : 0;
369
375
 
370
376
  clickedOnScrollbar = event.clientX + offset > clientWidth;
371
377
  }
@@ -539,11 +545,21 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
539
545
  />
540
546
  )}
541
547
  <div
548
+ {...wrapperProps}
542
549
  role='dialog'
543
- className={cn(styles.wrapper, wrapperClassName, {
544
- [styles.hidden]: !open && isExited,
545
- })}
546
- ref={mergeRefs([ref, wrapperRef])}
550
+ className={cn(
551
+ styles.wrapper,
552
+ wrapperClassName,
553
+ wrapperProps?.className,
554
+ {
555
+ [styles.hidden]: !open && isExited,
556
+ },
557
+ )}
558
+ ref={mergeRefs([
559
+ ref,
560
+ wrapperRef,
561
+ wrapperProps?.ref as Ref<HTMLDivElement>,
562
+ ])}
547
563
  onKeyDown={handleKeyDown}
548
564
  onMouseDown={handleBackdropMouseDown}
549
565
  onMouseUp={handleBackdropMouseUp}
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;