@alfalab/core-components-base-modal 5.5.0 → 5.7.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 (15) hide show
  1. package/Component.d.ts +4 -0
  2. package/Component.js +12 -8
  3. package/cssm/Component.d.ts +4 -0
  4. package/cssm/Component.js +11 -7
  5. package/cssm/index.module.css +2 -2
  6. package/esm/Component.d.ts +4 -0
  7. package/esm/Component.js +12 -8
  8. package/esm/index.css +15 -15
  9. package/index.css +15 -15
  10. package/modern/Component.d.ts +4 -0
  11. package/modern/Component.js +11 -7
  12. package/modern/index.css +15 -15
  13. package/package.json +3 -3
  14. package/src/Component.tsx +23 -6
  15. package/src/index.module.css +1 -1
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
@@ -24,7 +24,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
24
24
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
25
25
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
26
26
 
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
+ var styles = {"component":"base-modal__component_viv8l","wrapper":"base-modal__wrapper_viv8l","content":"base-modal__content_viv8l","hidden":"base-modal__hidden_viv8l","backdrop":"base-modal__backdrop_viv8l","appear":"base-modal__appear_viv8l","enter":"base-modal__enter_viv8l","appearActive":"base-modal__appearActive_viv8l","enterActive":"base-modal__enterActive_viv8l","exit":"base-modal__exit_viv8l","exitActive":"base-modal__exitActive_viv8l","exitDone":"base-modal__exitDone_viv8l"};
28
28
  require('./index.css')
29
29
 
30
30
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -44,7 +44,7 @@ var BaseModalContext = React__default.default.createContext({
44
44
  onClose: function () { return null; },
45
45
  });
46
46
  var BaseModal = React.forwardRef(function (_a, ref) {
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, 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;
48
48
  var _q = React.useState(null), exited = _q[0], setExited = _q[1];
49
49
  var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
50
50
  var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -94,12 +94,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
94
94
  return;
95
95
  if (hasHeader) {
96
96
  setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
97
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
97
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
98
98
  }
99
99
  if (hasFooter) {
100
100
  setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
101
101
  componentNodeRef.current.getBoundingClientRect().bottom >=
102
- window.innerHeight);
102
+ window.innerHeight - 1);
103
103
  }
104
104
  }, [hasFooter, hasHeader, headerOffset]);
105
105
  var handleClose = React.useCallback(function (event, reason) {
@@ -241,14 +241,18 @@ var BaseModal = React.forwardRef(function (_a, ref) {
241
241
  Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
242
242
  zIndex: computedZIndex,
243
243
  } }))),
244
- 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 = {},
245
245
  _a[styles.hidden] = !open && isExited,
246
- _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,
247
251
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
248
252
  tabIndex: 0, "data-test-id": dataTestId, style: {
249
253
  zIndex: computedZIndex,
250
- } },
251
- React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
254
+ } }),
255
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
252
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([
253
257
  componentRef,
254
258
  componentNodeRef,
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
@@ -43,7 +43,7 @@ var BaseModalContext = React__default.default.createContext({
43
43
  onClose: function () { return null; },
44
44
  });
45
45
  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;
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;
47
47
  var _q = React.useState(null), exited = _q[0], setExited = _q[1];
48
48
  var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
49
49
  var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -93,12 +93,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
93
93
  return;
94
94
  if (hasHeader) {
95
95
  setHeaderHighlighted(!utils.isScrolledToTop(scrollableNodeRef.current) &&
96
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
96
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
97
97
  }
98
98
  if (hasFooter) {
99
99
  setFooterHighlighted(!utils.isScrolledToBottom(scrollableNodeRef.current) &&
100
100
  componentNodeRef.current.getBoundingClientRect().bottom >=
101
- window.innerHeight);
101
+ window.innerHeight - 1);
102
102
  }
103
103
  }, [hasFooter, hasHeader, headerOffset]);
104
104
  var handleClose = React.useCallback(function (event, reason) {
@@ -240,14 +240,18 @@ var BaseModal = React.forwardRef(function (_a, ref) {
240
240
  Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
241
241
  zIndex: computedZIndex,
242
242
  } }))),
243
- 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 = {},
244
244
  _a[styles__default.default.hidden] = !open && isExited,
245
- _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,
246
250
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
247
251
  tabIndex: 0, "data-test-id": dataTestId, style: {
248
252
  zIndex: computedZIndex,
249
- } },
250
- React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
253
+ } }),
254
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
251
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([
252
256
  componentRef,
253
257
  componentNodeRef,
package/cssm/index.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --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 */
3
+ --color-light-modal-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 */
4
4
  } :root { /* 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 */
5
5
  } :root {
6
6
  } :root {
@@ -17,7 +17,7 @@
17
17
  } .component {
18
18
  position: relative;
19
19
  box-sizing: border-box;
20
- background: var(--color-light-bg-primary);
20
+ background: var(--color-light-modal-bg-primary);
21
21
  margin: auto;
22
22
  flex-shrink: 0;
23
23
  } .wrapper {
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
@@ -13,7 +13,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
13
13
  import './matches-polyfill.js';
14
14
  import '@alfalab/core-components-global-store/esm';
15
15
 
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
+ var styles = {"component":"base-modal__component_viv8l","wrapper":"base-modal__wrapper_viv8l","content":"base-modal__content_viv8l","hidden":"base-modal__hidden_viv8l","backdrop":"base-modal__backdrop_viv8l","appear":"base-modal__appear_viv8l","enter":"base-modal__enter_viv8l","appearActive":"base-modal__appearActive_viv8l","enterActive":"base-modal__enterActive_viv8l","exit":"base-modal__exit_viv8l","exitActive":"base-modal__exitActive_viv8l","exitDone":"base-modal__exitDone_viv8l"};
17
17
  require('./index.css')
18
18
 
19
19
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -33,7 +33,7 @@ var BaseModalContext = React.createContext({
33
33
  onClose: function () { return null; },
34
34
  });
35
35
  var BaseModal = forwardRef(function (_a, ref) {
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, 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;
37
37
  var _q = useState(null), exited = _q[0], setExited = _q[1];
38
38
  var _r = useState(false), hasScroll = _r[0], setHasScroll = _r[1];
39
39
  var _s = useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -83,12 +83,12 @@ var BaseModal = forwardRef(function (_a, ref) {
83
83
  return;
84
84
  if (hasHeader) {
85
85
  setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
86
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
86
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
87
87
  }
88
88
  if (hasFooter) {
89
89
  setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
90
90
  componentNodeRef.current.getBoundingClientRect().bottom >=
91
- window.innerHeight);
91
+ window.innerHeight - 1);
92
92
  }
93
93
  }, [hasFooter, hasHeader, headerOffset]);
94
94
  var handleClose = useCallback(function (event, reason) {
@@ -230,14 +230,18 @@ var BaseModal = forwardRef(function (_a, ref) {
230
230
  Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
231
231
  zIndex: computedZIndex,
232
232
  } }))),
233
- 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 = {},
234
234
  _a[styles.hidden] = !open && isExited,
235
- _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,
236
240
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
237
241
  tabIndex: 0, "data-test-id": dataTestId, style: {
238
242
  zIndex: computedZIndex,
239
- } },
240
- React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
243
+ } }),
244
+ React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
241
245
  React.createElement("div", __assign({}, componentDivProps, { className: cn(styles.component, className, componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.className), ref: mergeRefs([
242
246
  componentRef,
243
247
  componentNodeRef,
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: n3idi */
1
+ /* hash: prt2a */
2
2
  :root {
3
3
  } /* deprecated */ :root {
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 */
4
+ --color-light-modal-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 */
5
5
  } :root { /* 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 */
6
6
  } :root {
7
7
  } :root {
@@ -15,13 +15,13 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
- } .base-modal__component_k89qv {
18
+ } .base-modal__component_viv8l {
19
19
  position: relative;
20
20
  box-sizing: border-box;
21
- background: var(--color-light-bg-primary);
21
+ background: var(--color-light-modal-bg-primary);
22
22
  margin: auto;
23
23
  flex-shrink: 0;
24
- } .base-modal__wrapper_k89qv {
24
+ } .base-modal__wrapper_viv8l {
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_k89qv {
37
+ } .base-modal__content_viv8l {
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_k89qv {
43
+ } .base-modal__hidden_viv8l {
44
44
  display: none;
45
- } .base-modal__backdrop_k89qv {
45
+ } .base-modal__backdrop_viv8l {
46
46
  z-index: 0;
47
- } .base-modal__appear_k89qv,
48
- .base-modal__enter_k89qv {
47
+ } .base-modal__appear_viv8l,
48
+ .base-modal__enter_viv8l {
49
49
  opacity: 0;
50
- } .base-modal__appearActive_k89qv,
51
- .base-modal__enterActive_k89qv {
50
+ } .base-modal__appearActive_viv8l,
51
+ .base-modal__enterActive_viv8l {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
- } .base-modal__exit_k89qv {
54
+ } .base-modal__exit_viv8l {
55
55
  opacity: 1;
56
- } .base-modal__exitActive_k89qv,
57
- .base-modal__exitDone_k89qv {
56
+ } .base-modal__exitActive_viv8l,
57
+ .base-modal__exitDone_viv8l {
58
58
  opacity: 0;
59
59
  transition: opacity 200ms ease-out;
60
60
  }
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: n3idi */
1
+ /* hash: prt2a */
2
2
  :root {
3
3
  } /* deprecated */ :root {
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 */
4
+ --color-light-modal-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 */
5
5
  } :root { /* 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 */
6
6
  } :root {
7
7
  } :root {
@@ -15,13 +15,13 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
- } .base-modal__component_k89qv {
18
+ } .base-modal__component_viv8l {
19
19
  position: relative;
20
20
  box-sizing: border-box;
21
- background: var(--color-light-bg-primary);
21
+ background: var(--color-light-modal-bg-primary);
22
22
  margin: auto;
23
23
  flex-shrink: 0;
24
- } .base-modal__wrapper_k89qv {
24
+ } .base-modal__wrapper_viv8l {
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_k89qv {
37
+ } .base-modal__content_viv8l {
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_k89qv {
43
+ } .base-modal__hidden_viv8l {
44
44
  display: none;
45
- } .base-modal__backdrop_k89qv {
45
+ } .base-modal__backdrop_viv8l {
46
46
  z-index: 0;
47
- } .base-modal__appear_k89qv,
48
- .base-modal__enter_k89qv {
47
+ } .base-modal__appear_viv8l,
48
+ .base-modal__enter_viv8l {
49
49
  opacity: 0;
50
- } .base-modal__appearActive_k89qv,
51
- .base-modal__enterActive_k89qv {
50
+ } .base-modal__appearActive_viv8l,
51
+ .base-modal__enterActive_viv8l {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
- } .base-modal__exit_k89qv {
54
+ } .base-modal__exit_viv8l {
55
55
  opacity: 1;
56
- } .base-modal__exitActive_k89qv,
57
- .base-modal__exitDone_k89qv {
56
+ } .base-modal__exitActive_viv8l,
57
+ .base-modal__exitDone_viv8l {
58
58
  opacity: 0;
59
59
  transition: opacity 200ms ease-out;
60
60
  }
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
@@ -12,7 +12,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
12
12
  import './matches-polyfill.js';
13
13
  import '@alfalab/core-components-global-store/modern';
14
14
 
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
+ const styles = {"component":"base-modal__component_viv8l","wrapper":"base-modal__wrapper_viv8l","content":"base-modal__content_viv8l","hidden":"base-modal__hidden_viv8l","backdrop":"base-modal__backdrop_viv8l","appear":"base-modal__appear_viv8l","enter":"base-modal__enter_viv8l","appearActive":"base-modal__appearActive_viv8l","enterActive":"base-modal__enterActive_viv8l","exit":"base-modal__exit_viv8l","exitActive":"base-modal__exitActive_viv8l","exitDone":"base-modal__exitDone_viv8l"};
16
16
  require('./index.css')
17
17
 
18
18
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -32,7 +32,7 @@ const BaseModalContext = React.createContext({
32
32
  setHasFooter: () => null,
33
33
  onClose: () => null,
34
34
  });
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, 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) => {
36
36
  const [exited, setExited] = useState(null);
37
37
  const [hasScroll, setHasScroll] = useState(false);
38
38
  const [hasHeader, setHasHeader] = useState(false);
@@ -82,12 +82,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
82
82
  return;
83
83
  if (hasHeader) {
84
84
  setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
85
- componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 0);
85
+ componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
86
86
  }
87
87
  if (hasFooter) {
88
88
  setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
89
89
  componentNodeRef.current.getBoundingClientRect().bottom >=
90
- window.innerHeight);
90
+ window.innerHeight - 1);
91
91
  }
92
92
  }, [hasFooter, hasHeader, headerOffset]);
93
93
  const handleClose = useCallback((event, reason) => {
@@ -226,14 +226,18 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
226
226
  Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
227
227
  zIndex: computedZIndex,
228
228
  } })),
229
- React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
229
+ React.createElement("div", { ...wrapperProps, role: 'dialog', className: cn(styles.wrapper, wrapperClassName, wrapperProps?.className, {
230
230
  [styles.hidden]: !open && isExited,
231
- }), 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,
232
236
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
233
237
  tabIndex: 0, "data-test-id": dataTestId, style: {
234
238
  zIndex: computedZIndex,
235
239
  } },
236
- React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
240
+ React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
237
241
  React.createElement("div", { ...componentDivProps, className: cn(styles.component, className, componentDivProps?.className), ref: mergeRefs([
238
242
  componentRef,
239
243
  componentNodeRef,
package/modern/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: n3idi */
1
+ /* hash: prt2a */
2
2
  :root {
3
3
  } /* deprecated */ :root {
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 */
4
+ --color-light-modal-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 */
5
5
  } :root { /* 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 */
6
6
  } :root {
7
7
  } :root {
@@ -15,13 +15,13 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
- } .base-modal__component_k89qv {
18
+ } .base-modal__component_viv8l {
19
19
  position: relative;
20
20
  box-sizing: border-box;
21
- background: var(--color-light-bg-primary);
21
+ background: var(--color-light-modal-bg-primary);
22
22
  margin: auto;
23
23
  flex-shrink: 0;
24
- } .base-modal__wrapper_k89qv {
24
+ } .base-modal__wrapper_viv8l {
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_k89qv {
37
+ } .base-modal__content_viv8l {
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_k89qv {
43
+ } .base-modal__hidden_viv8l {
44
44
  display: none;
45
- } .base-modal__backdrop_k89qv {
45
+ } .base-modal__backdrop_viv8l {
46
46
  z-index: 0;
47
- } .base-modal__appear_k89qv,
48
- .base-modal__enter_k89qv {
47
+ } .base-modal__appear_viv8l,
48
+ .base-modal__enter_viv8l {
49
49
  opacity: 0;
50
- } .base-modal__appearActive_k89qv,
51
- .base-modal__enterActive_k89qv {
50
+ } .base-modal__appearActive_viv8l,
51
+ .base-modal__enterActive_viv8l {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
- } .base-modal__exit_k89qv {
54
+ } .base-modal__exit_viv8l {
55
55
  opacity: 1;
56
- } .base-modal__exitActive_k89qv,
57
- .base-modal__exitDone_k89qv {
56
+ } .base-modal__exitActive_viv8l,
57
+ .base-modal__exitDone_viv8l {
58
58
  opacity: 0;
59
59
  transition: opacity 200ms ease-out;
60
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "5.5.0",
3
+ "version": "5.7.0",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -11,11 +11,11 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "dependencies": {
14
- "@alfalab/core-components-backdrop": "^3.1.0",
14
+ "@alfalab/core-components-backdrop": "^3.2.0",
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
+ "@alfalab/core-components-shared": "^0.8.0",
19
19
  "@juggle/resize-observer": "^3.3.1",
20
20
  "classnames": "^2.3.1",
21
21
  "react-focus-lock": "^2.9.3",
package/src/Component.tsx CHANGED
@@ -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]);
@@ -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}
@@ -558,6 +574,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
558
574
  appear={true}
559
575
  timeout={200}
560
576
  classNames={styles}
577
+ nodeRef={componentNodeRef}
561
578
  {...transitionProps}
562
579
  in={open}
563
580
  onEntered={handleEntered}
package/src/index.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  .component {
4
4
  position: relative;
5
5
  box-sizing: border-box;
6
- background: var(--color-light-bg-primary);
6
+ background: var(--color-light-modal-bg-primary);
7
7
  margin: auto;
8
8
  flex-shrink: 0;
9
9
  }