@alfalab/core-components-base-modal 5.3.0 → 5.4.1

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 +9 -1
  2. package/Component.js +8 -4
  3. package/cssm/Component.d.ts +9 -1
  4. package/cssm/Component.js +7 -3
  5. package/cssm/index.module.css +1 -0
  6. package/esm/Component.d.ts +9 -1
  7. package/esm/Component.js +8 -4
  8. package/esm/index.css +14 -13
  9. package/index.css +14 -13
  10. package/modern/Component.d.ts +9 -1
  11. package/modern/Component.js +8 -4
  12. package/modern/index.css +14 -13
  13. package/package.json +1 -1
  14. package/src/Component.tsx +34 -3
  15. package/src/index.module.css +1 -0
package/Component.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- /// <reference types="react-transition-group" />
2
1
  /// <reference types="react" />
2
+ /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
4
  import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
@@ -71,6 +71,14 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на обертку контента
76
+ */
77
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
78
+ /**
79
+ * Дополнительные пропсы на компонентную обертку контента
80
+ */
81
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
82
  /**
75
83
  * Дополнительный класс для обертки (Modal)
76
84
  */
package/Component.js CHANGED
@@ -23,7 +23,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
23
23
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
24
24
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
25
25
 
26
- var styles = {"component":"base-modal__component_mx6kj","wrapper":"base-modal__wrapper_mx6kj","content":"base-modal__content_mx6kj","hidden":"base-modal__hidden_mx6kj","backdrop":"base-modal__backdrop_mx6kj","appear":"base-modal__appear_mx6kj","enter":"base-modal__enter_mx6kj","appearActive":"base-modal__appearActive_mx6kj","enterActive":"base-modal__enterActive_mx6kj","exit":"base-modal__exit_mx6kj","exitActive":"base-modal__exitActive_mx6kj","exitDone":"base-modal__exitDone_mx6kj"};
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
27
  require('./index.css')
28
28
 
29
29
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -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, 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, 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];
@@ -248,8 +248,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
248
248
  zIndex: computedZIndex,
249
249
  } },
250
250
  React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
251
- React__default.default.createElement("div", { className: cn__default.default(styles.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
252
- React__default.default.createElement("div", { className: cn__default.default(styles.content, contentClassName) }, children)))))));
251
+ 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
+ componentRef,
253
+ componentNodeRef,
254
+ (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
255
+ ]) }),
256
+ React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
253
257
  })); };
254
258
  if (!shouldRender)
255
259
  return null;
package/cssm/Component.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- /// <reference types="react-transition-group" />
2
1
  /// <reference types="react" />
2
+ /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
4
  import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
@@ -71,6 +71,14 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на обертку контента
76
+ */
77
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
78
+ /**
79
+ * Дополнительные пропсы на компонентную обертку контента
80
+ */
81
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
82
  /**
75
83
  * Дополнительный класс для обертки (Modal)
76
84
  */
package/cssm/Component.js CHANGED
@@ -42,7 +42,7 @@ var BaseModalContext = React__default.default.createContext({
42
42
  onClose: function () { return null; },
43
43
  });
44
44
  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, 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;
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
46
  var _q = React.useState(null), exited = _q[0], setExited = _q[1];
47
47
  var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
48
48
  var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -247,8 +247,12 @@ var BaseModal = React.forwardRef(function (_a, ref) {
247
247
  zIndex: computedZIndex,
248
248
  } },
249
249
  React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
250
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
251
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, contentClassName) }, children)))))));
250
+ 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
+ componentRef,
252
+ componentNodeRef,
253
+ (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
254
+ ]) }),
255
+ React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles__default.default.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
252
256
  })); };
253
257
  if (!shouldRender)
254
258
  return null;
package/cssm/index.module.css CHANGED
@@ -32,6 +32,7 @@
32
32
  flex-direction: column;
33
33
  align-items: center;
34
34
  outline: 0;
35
+ overscroll-behavior: none;
35
36
  } .content {
36
37
  width: 100%;
37
38
  height: 100%;
package/esm/Component.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- /// <reference types="react-transition-group" />
2
1
  /// <reference types="react" />
2
+ /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
4
  import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
@@ -71,6 +71,14 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на обертку контента
76
+ */
77
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
78
+ /**
79
+ * Дополнительные пропсы на компонентную обертку контента
80
+ */
81
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
82
  /**
75
83
  * Дополнительный класс для обертки (Modal)
76
84
  */
package/esm/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/esm';
14
14
 
15
- var styles = {"component":"base-modal__component_mx6kj","wrapper":"base-modal__wrapper_mx6kj","content":"base-modal__content_mx6kj","hidden":"base-modal__hidden_mx6kj","backdrop":"base-modal__backdrop_mx6kj","appear":"base-modal__appear_mx6kj","enter":"base-modal__enter_mx6kj","appearActive":"base-modal__appearActive_mx6kj","enterActive":"base-modal__enterActive_mx6kj","exit":"base-modal__exit_mx6kj","exitActive":"base-modal__exitActive_mx6kj","exitDone":"base-modal__exitDone_mx6kj"};
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
16
  require('./index.css')
17
17
 
18
18
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -32,7 +32,7 @@ var BaseModalContext = React.createContext({
32
32
  onClose: function () { return null; },
33
33
  });
34
34
  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, 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;
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
36
  var _q = useState(null), exited = _q[0], setExited = _q[1];
37
37
  var _r = useState(false), hasScroll = _r[0], setHasScroll = _r[1];
38
38
  var _s = useState(false), hasHeader = _s[0], setHasHeader = _s[1];
@@ -237,8 +237,12 @@ var BaseModal = forwardRef(function (_a, ref) {
237
237
  zIndex: computedZIndex,
238
238
  } },
239
239
  React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
240
- React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
241
- React.createElement("div", { className: cn(styles.content, contentClassName) }, children)))))));
240
+ React.createElement("div", __assign({}, componentDivProps, { className: cn(styles.component, className, componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.className), ref: mergeRefs([
241
+ componentRef,
242
+ componentNodeRef,
243
+ (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
244
+ ]) }),
245
+ React.createElement("div", __assign({}, contentProps, { className: cn(styles.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
242
246
  })); };
243
247
  if (!shouldRender)
244
248
  return null;
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: vww7l */
1
+ /* hash: 1r8gg */
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_mx6kj {
18
+ } .base-modal__component_eojla {
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_mx6kj {
24
+ } .base-modal__wrapper_eojla {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,28 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_mx6kj {
36
+ overscroll-behavior: none;
37
+ } .base-modal__content_eojla {
37
38
  width: 100%;
38
39
  height: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  flex: 1;
42
- } .base-modal__hidden_mx6kj {
43
+ } .base-modal__hidden_eojla {
43
44
  display: none;
44
- } .base-modal__backdrop_mx6kj {
45
+ } .base-modal__backdrop_eojla {
45
46
  z-index: 0;
46
- } .base-modal__appear_mx6kj,
47
- .base-modal__enter_mx6kj {
47
+ } .base-modal__appear_eojla,
48
+ .base-modal__enter_eojla {
48
49
  opacity: 0;
49
- } .base-modal__appearActive_mx6kj,
50
- .base-modal__enterActive_mx6kj {
50
+ } .base-modal__appearActive_eojla,
51
+ .base-modal__enterActive_eojla {
51
52
  opacity: 1;
52
53
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_mx6kj {
54
+ } .base-modal__exit_eojla {
54
55
  opacity: 1;
55
- } .base-modal__exitActive_mx6kj,
56
- .base-modal__exitDone_mx6kj {
56
+ } .base-modal__exitActive_eojla,
57
+ .base-modal__exitDone_eojla {
57
58
  opacity: 0;
58
59
  transition: opacity 200ms ease-out;
59
60
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: vww7l */
1
+ /* hash: 1r8gg */
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_mx6kj {
18
+ } .base-modal__component_eojla {
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_mx6kj {
24
+ } .base-modal__wrapper_eojla {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,28 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_mx6kj {
36
+ overscroll-behavior: none;
37
+ } .base-modal__content_eojla {
37
38
  width: 100%;
38
39
  height: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  flex: 1;
42
- } .base-modal__hidden_mx6kj {
43
+ } .base-modal__hidden_eojla {
43
44
  display: none;
44
- } .base-modal__backdrop_mx6kj {
45
+ } .base-modal__backdrop_eojla {
45
46
  z-index: 0;
46
- } .base-modal__appear_mx6kj,
47
- .base-modal__enter_mx6kj {
47
+ } .base-modal__appear_eojla,
48
+ .base-modal__enter_eojla {
48
49
  opacity: 0;
49
- } .base-modal__appearActive_mx6kj,
50
- .base-modal__enterActive_mx6kj {
50
+ } .base-modal__appearActive_eojla,
51
+ .base-modal__enterActive_eojla {
51
52
  opacity: 1;
52
53
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_mx6kj {
54
+ } .base-modal__exit_eojla {
54
55
  opacity: 1;
55
- } .base-modal__exitActive_mx6kj,
56
- .base-modal__exitDone_mx6kj {
56
+ } .base-modal__exitActive_eojla,
57
+ .base-modal__exitDone_eojla {
57
58
  opacity: 0;
58
59
  transition: opacity 200ms ease-out;
59
60
  }
package/modern/Component.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- /// <reference types="react-transition-group" />
2
1
  /// <reference types="react" />
2
+ /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
4
  import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
@@ -71,6 +71,14 @@ type BaseModalProps = {
71
71
  * Дополнительный класс
72
72
  */
73
73
  contentClassName?: string;
74
+ /**
75
+ * Дополнительные пропсы на обертку контента
76
+ */
77
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
78
+ /**
79
+ * Дополнительные пропсы на компонентную обертку контента
80
+ */
81
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
74
82
  /**
75
83
  * Дополнительный класс для обертки (Modal)
76
84
  */
package/modern/Component.js CHANGED
@@ -11,7 +11,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
11
11
  import './matches-polyfill.js';
12
12
  import '@alfalab/core-components-global-store/modern';
13
13
 
14
- const styles = {"component":"base-modal__component_mx6kj","wrapper":"base-modal__wrapper_mx6kj","content":"base-modal__content_mx6kj","hidden":"base-modal__hidden_mx6kj","backdrop":"base-modal__backdrop_mx6kj","appear":"base-modal__appear_mx6kj","enter":"base-modal__enter_mx6kj","appearActive":"base-modal__appearActive_mx6kj","enterActive":"base-modal__enterActive_mx6kj","exit":"base-modal__exit_mx6kj","exitActive":"base-modal__exitActive_mx6kj","exitDone":"base-modal__exitDone_mx6kj"};
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
15
  require('./index.css')
16
16
 
17
17
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -31,7 +31,7 @@ const BaseModalContext = React.createContext({
31
31
  setHasFooter: () => null,
32
32
  onClose: () => null,
33
33
  });
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, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, }, ref) => {
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
35
  const [exited, setExited] = useState(null);
36
36
  const [hasScroll, setHasScroll] = useState(false);
37
37
  const [hasHeader, setHasHeader] = useState(false);
@@ -233,8 +233,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
233
233
  zIndex: computedZIndex,
234
234
  } },
235
235
  React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
236
- React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
237
- React.createElement("div", { className: cn(styles.content, contentClassName) }, children)))))))));
236
+ React.createElement("div", { ...componentDivProps, className: cn(styles.component, className, componentDivProps?.className), ref: mergeRefs([
237
+ componentRef,
238
+ componentNodeRef,
239
+ componentDivProps?.ref || null,
240
+ ]) },
241
+ React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className) }, children)))))))));
238
242
  if (!shouldRender)
239
243
  return null;
240
244
  return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: vww7l */
1
+ /* hash: 1r8gg */
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_mx6kj {
18
+ } .base-modal__component_eojla {
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_mx6kj {
24
+ } .base-modal__wrapper_eojla {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,28 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_mx6kj {
36
+ overscroll-behavior: none;
37
+ } .base-modal__content_eojla {
37
38
  width: 100%;
38
39
  height: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  flex: 1;
42
- } .base-modal__hidden_mx6kj {
43
+ } .base-modal__hidden_eojla {
43
44
  display: none;
44
- } .base-modal__backdrop_mx6kj {
45
+ } .base-modal__backdrop_eojla {
45
46
  z-index: 0;
46
- } .base-modal__appear_mx6kj,
47
- .base-modal__enter_mx6kj {
47
+ } .base-modal__appear_eojla,
48
+ .base-modal__enter_eojla {
48
49
  opacity: 0;
49
- } .base-modal__appearActive_mx6kj,
50
- .base-modal__enterActive_mx6kj {
50
+ } .base-modal__appearActive_eojla,
51
+ .base-modal__enterActive_eojla {
51
52
  opacity: 1;
52
53
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_mx6kj {
54
+ } .base-modal__exit_eojla {
54
55
  opacity: 1;
55
- } .base-modal__exitActive_mx6kj,
56
- .base-modal__exitDone_mx6kj {
56
+ } .base-modal__exitActive_eojla,
57
+ .base-modal__exitDone_eojla {
57
58
  opacity: 0;
58
59
  transition: opacity 200ms ease-out;
59
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "5.3.0",
3
+ "version": "5.4.1",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/src/Component.tsx CHANGED
@@ -118,6 +118,19 @@ export type BaseModalProps = {
118
118
  */
119
119
  contentClassName?: string;
120
120
 
121
+ /**
122
+ * Дополнительные пропсы на обертку контента
123
+ */
124
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
125
+
126
+ /**
127
+ * Дополнительные пропсы на компонентную обертку контента
128
+ */
129
+ componentDivProps?: React.DetailedHTMLProps<
130
+ React.HTMLAttributes<HTMLDivElement>,
131
+ HTMLDivElement
132
+ >;
133
+
121
134
  /**
122
135
  * Дополнительный класс для обертки (Modal)
123
136
  */
@@ -237,6 +250,8 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
237
250
  keepMounted = false,
238
251
  className,
239
252
  contentClassName,
253
+ contentProps,
254
+ componentDivProps,
240
255
  wrapperClassName,
241
256
  onBackdropClick,
242
257
  onClose,
@@ -549,10 +564,26 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
549
564
  onExited={handleExited}
550
565
  >
551
566
  <div
552
- className={cn(styles.component, className)}
553
- ref={mergeRefs([componentRef, componentNodeRef])}
567
+ {...componentDivProps}
568
+ className={cn(
569
+ styles.component,
570
+ className,
571
+ componentDivProps?.className,
572
+ )}
573
+ ref={mergeRefs([
574
+ componentRef,
575
+ componentNodeRef,
576
+ componentDivProps?.ref || null,
577
+ ])}
554
578
  >
555
- <div className={cn(styles.content, contentClassName)}>
579
+ <div
580
+ {...contentProps}
581
+ className={cn(
582
+ styles.content,
583
+ contentClassName,
584
+ contentProps?.className,
585
+ )}
586
+ >
556
587
  {children}
557
588
  </div>
558
589
  </div>
package/src/index.module.css CHANGED
@@ -20,6 +20,7 @@
20
20
  flex-direction: column;
21
21
  align-items: center;
22
22
  outline: 0;
23
+ overscroll-behavior: none;
23
24
  }
24
25
 
25
26
  .content {