@alfalab/core-components-base-modal 5.1.3 → 5.2.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 (12) hide show
  1. package/Component.d.ts +5 -0
  2. package/Component.js +28 -28
  3. package/cssm/Component.d.ts +5 -0
  4. package/cssm/Component.js +27 -27
  5. package/esm/Component.d.ts +5 -0
  6. package/esm/Component.js +28 -28
  7. package/esm/index.css +13 -13
  8. package/index.css +13 -13
  9. package/modern/Component.d.ts +5 -0
  10. package/modern/Component.js +19 -19
  11. package/modern/index.css +13 -13
  12. package/package.json +1 -1
package/Component.d.ts CHANGED
@@ -83,6 +83,11 @@ type BaseModalProps = {
83
83
  * Пропсы для анимации (CSSTransition)
84
84
  */
85
85
  transitionProps?: Partial<TransitionProps>;
86
+ /**
87
+ * Рендерить ли в контейнер через портал.
88
+ * @default true
89
+ */
90
+ usePortal?: boolean;
86
91
  /**
87
92
  * Обработчик события нажатия на бэкдроп
88
93
  */
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_7v143","wrapper":"base-modal__wrapper_7v143","content":"base-modal__content_7v143","hidden":"base-modal__hidden_7v143","backdrop":"base-modal__backdrop_7v143","appear":"base-modal__appear_7v143","enter":"base-modal__enter_7v143","appearActive":"base-modal__appearActive_7v143","enterActive":"base-modal__enterActive_7v143","exit":"base-modal__exit_7v143","exitActive":"base-modal__exitActive_7v143","exitDone":"base-modal__exitDone_7v143"};
26
+ var styles = {"component":"base-modal__component_1n9jh","wrapper":"base-modal__wrapper_1n9jh","content":"base-modal__content_1n9jh","hidden":"base-modal__hidden_1n9jh","backdrop":"base-modal__backdrop_1n9jh","appear":"base-modal__appear_1n9jh","enter":"base-modal__enter_1n9jh","appearActive":"base-modal__appearActive_1n9jh","enterActive":"base-modal__enterActive_1n9jh","exit":"base-modal__exit_1n9jh","exitActive":"base-modal__exitActive_1n9jh","exitDone":"base-modal__exitDone_1n9jh"};
27
27
  require('./index.css')
28
28
 
29
29
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -43,14 +43,14 @@ 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;
47
- var _p = React.useState(null), exited = _p[0], setExited = _p[1];
48
- var _q = React.useState(false), hasScroll = _q[0], setHasScroll = _q[1];
49
- var _r = React.useState(false), hasHeader = _r[0], setHasHeader = _r[1];
50
- var _s = React.useState(false), hasFooter = _s[0], setHasFooter = _s[1];
51
- var _t = React.useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
52
- var _u = React.useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
53
- var _v = React.useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
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;
47
+ var _q = React.useState(null), exited = _q[0], setExited = _q[1];
48
+ var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
49
+ var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
50
+ var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
51
+ var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
52
+ var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
53
+ var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
54
54
  var componentNodeRef = React.useRef(null);
55
55
  var wrapperRef = React.useRef(null);
56
56
  var scrollableNodeRef = React.useRef(null);
@@ -233,27 +233,27 @@ var BaseModal = React.forwardRef(function (_a, ref) {
233
233
  setHeaderOffset,
234
234
  handleClose,
235
235
  ]);
236
+ var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
237
+ var _a;
238
+ return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
239
+ React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
240
+ Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
241
+ zIndex: computedZIndex,
242
+ } }))),
243
+ React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles.wrapper, wrapperClassName, (_a = {},
244
+ _a[styles.hidden] = !open && isExited,
245
+ _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
246
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
247
+ tabIndex: 0, "data-test-id": dataTestId, style: {
248
+ zIndex: computedZIndex,
249
+ } },
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)))))));
253
+ })); };
236
254
  if (!shouldRender)
237
255
  return null;
238
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
239
- var _a;
240
- return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true },
241
- React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
242
- React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
243
- Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
244
- zIndex: computedZIndex,
245
- } }))),
246
- React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles.wrapper, wrapperClassName, (_a = {},
247
- _a[styles.hidden] = !open && isExited,
248
- _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
249
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
250
- tabIndex: 0, "data-test-id": dataTestId, style: {
251
- zIndex: computedZIndex,
252
- } },
253
- React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
254
- React__default.default.createElement("div", { className: cn__default.default(styles.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
255
- React__default.default.createElement("div", { className: cn__default.default(styles.content, contentClassName) }, children))))))));
256
- }));
256
+ return usePortal ? (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
257
257
  });
258
258
 
259
259
  exports.BaseModal = BaseModal;
package/cssm/Component.d.ts CHANGED
@@ -83,6 +83,11 @@ type BaseModalProps = {
83
83
  * Пропсы для анимации (CSSTransition)
84
84
  */
85
85
  transitionProps?: Partial<TransitionProps>;
86
+ /**
87
+ * Рендерить ли в контейнер через портал.
88
+ * @default true
89
+ */
90
+ usePortal?: boolean;
86
91
  /**
87
92
  * Обработчик события нажатия на бэкдроп
88
93
  */
package/cssm/Component.js CHANGED
@@ -42,14 +42,14 @@ 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;
46
- var _p = React.useState(null), exited = _p[0], setExited = _p[1];
47
- var _q = React.useState(false), hasScroll = _q[0], setHasScroll = _q[1];
48
- var _r = React.useState(false), hasHeader = _r[0], setHasHeader = _r[1];
49
- var _s = React.useState(false), hasFooter = _s[0], setHasFooter = _s[1];
50
- var _t = React.useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
51
- var _u = React.useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
52
- var _v = React.useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
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;
46
+ var _q = React.useState(null), exited = _q[0], setExited = _q[1];
47
+ var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
48
+ var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
49
+ var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
50
+ var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
51
+ var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
52
+ var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
53
53
  var componentNodeRef = React.useRef(null);
54
54
  var wrapperRef = React.useRef(null);
55
55
  var scrollableNodeRef = React.useRef(null);
@@ -232,27 +232,27 @@ var BaseModal = React.forwardRef(function (_a, ref) {
232
232
  setHeaderOffset,
233
233
  handleClose,
234
234
  ]);
235
+ var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
236
+ var _a;
237
+ return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
238
+ React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
239
+ Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
240
+ zIndex: computedZIndex,
241
+ } }))),
242
+ React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, (_a = {},
243
+ _a[styles__default.default.hidden] = !open && isExited,
244
+ _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
245
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
246
+ tabIndex: 0, "data-test-id": dataTestId, style: {
247
+ zIndex: computedZIndex,
248
+ } },
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)))))));
252
+ })); };
235
253
  if (!shouldRender)
236
254
  return null;
237
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
238
- var _a;
239
- return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true },
240
- React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
241
- React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
242
- Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
243
- zIndex: computedZIndex,
244
- } }))),
245
- React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, (_a = {},
246
- _a[styles__default.default.hidden] = !open && isExited,
247
- _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
248
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
249
- tabIndex: 0, "data-test-id": dataTestId, style: {
250
- zIndex: computedZIndex,
251
- } },
252
- React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
253
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
254
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, contentClassName) }, children))))))));
255
- }));
255
+ return usePortal ? (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
256
256
  });
257
257
 
258
258
  exports.BaseModal = BaseModal;
package/esm/Component.d.ts CHANGED
@@ -83,6 +83,11 @@ type BaseModalProps = {
83
83
  * Пропсы для анимации (CSSTransition)
84
84
  */
85
85
  transitionProps?: Partial<TransitionProps>;
86
+ /**
87
+ * Рендерить ли в контейнер через портал.
88
+ * @default true
89
+ */
90
+ usePortal?: boolean;
86
91
  /**
87
92
  * Обработчик события нажатия на бэкдроп
88
93
  */
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_7v143","wrapper":"base-modal__wrapper_7v143","content":"base-modal__content_7v143","hidden":"base-modal__hidden_7v143","backdrop":"base-modal__backdrop_7v143","appear":"base-modal__appear_7v143","enter":"base-modal__enter_7v143","appearActive":"base-modal__appearActive_7v143","enterActive":"base-modal__enterActive_7v143","exit":"base-modal__exit_7v143","exitActive":"base-modal__exitActive_7v143","exitDone":"base-modal__exitDone_7v143"};
15
+ var styles = {"component":"base-modal__component_1n9jh","wrapper":"base-modal__wrapper_1n9jh","content":"base-modal__content_1n9jh","hidden":"base-modal__hidden_1n9jh","backdrop":"base-modal__backdrop_1n9jh","appear":"base-modal__appear_1n9jh","enter":"base-modal__enter_1n9jh","appearActive":"base-modal__appearActive_1n9jh","enterActive":"base-modal__enterActive_1n9jh","exit":"base-modal__exit_1n9jh","exitActive":"base-modal__exitActive_1n9jh","exitDone":"base-modal__exitDone_1n9jh"};
16
16
  require('./index.css')
17
17
 
18
18
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -32,14 +32,14 @@ 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;
36
- var _p = useState(null), exited = _p[0], setExited = _p[1];
37
- var _q = useState(false), hasScroll = _q[0], setHasScroll = _q[1];
38
- var _r = useState(false), hasHeader = _r[0], setHasHeader = _r[1];
39
- var _s = useState(false), hasFooter = _s[0], setHasFooter = _s[1];
40
- var _t = useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
41
- var _u = useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
42
- var _v = useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
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;
36
+ var _q = useState(null), exited = _q[0], setExited = _q[1];
37
+ var _r = useState(false), hasScroll = _r[0], setHasScroll = _r[1];
38
+ var _s = useState(false), hasHeader = _s[0], setHasHeader = _s[1];
39
+ var _t = useState(false), hasFooter = _t[0], setHasFooter = _t[1];
40
+ var _u = useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
41
+ var _v = useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
42
+ var _w = useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
43
43
  var componentNodeRef = useRef(null);
44
44
  var wrapperRef = useRef(null);
45
45
  var scrollableNodeRef = useRef(null);
@@ -222,27 +222,27 @@ var BaseModal = forwardRef(function (_a, ref) {
222
222
  setHeaderOffset,
223
223
  handleClose,
224
224
  ]);
225
+ var renderContent = function () { return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
226
+ var _a;
227
+ return (React.createElement(BaseModalContext.Provider, { value: contextValue },
228
+ React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
229
+ Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
230
+ zIndex: computedZIndex,
231
+ } }))),
232
+ React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
233
+ _a[styles.hidden] = !open && isExited,
234
+ _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
235
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
236
+ tabIndex: 0, "data-test-id": dataTestId, style: {
237
+ zIndex: computedZIndex,
238
+ } },
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)))))));
242
+ })); };
225
243
  if (!shouldRender)
226
244
  return null;
227
- return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
228
- var _a;
229
- return (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
230
- React.createElement(BaseModalContext.Provider, { value: contextValue },
231
- React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
232
- Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
233
- zIndex: computedZIndex,
234
- } }))),
235
- React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
236
- _a[styles.hidden] = !open && isExited,
237
- _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
238
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
239
- tabIndex: 0, "data-test-id": dataTestId, style: {
240
- zIndex: computedZIndex,
241
- } },
242
- React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
243
- React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
244
- React.createElement("div", { className: cn(styles.content, contentClassName) }, children))))))));
245
- }));
245
+ return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
246
246
  });
247
247
 
248
248
  export { BaseModal, BaseModalContext };
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1wj1w */
1
+ /* hash: d8454 */
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_7v143 {
18
+ } .base-modal__component_1n9jh {
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_7v143 {
24
+ } .base-modal__wrapper_1n9jh {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,27 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_7v143 {
36
+ } .base-modal__content_1n9jh {
37
37
  width: 100%;
38
38
  height: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
- } .base-modal__hidden_7v143 {
42
+ } .base-modal__hidden_1n9jh {
43
43
  display: none;
44
- } .base-modal__backdrop_7v143 {
44
+ } .base-modal__backdrop_1n9jh {
45
45
  z-index: 0;
46
- } .base-modal__appear_7v143,
47
- .base-modal__enter_7v143 {
46
+ } .base-modal__appear_1n9jh,
47
+ .base-modal__enter_1n9jh {
48
48
  opacity: 0;
49
- } .base-modal__appearActive_7v143,
50
- .base-modal__enterActive_7v143 {
49
+ } .base-modal__appearActive_1n9jh,
50
+ .base-modal__enterActive_1n9jh {
51
51
  opacity: 1;
52
52
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_7v143 {
53
+ } .base-modal__exit_1n9jh {
54
54
  opacity: 1;
55
- } .base-modal__exitActive_7v143,
56
- .base-modal__exitDone_7v143 {
55
+ } .base-modal__exitActive_1n9jh,
56
+ .base-modal__exitDone_1n9jh {
57
57
  opacity: 0;
58
58
  transition: opacity 200ms ease-out;
59
59
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1wj1w */
1
+ /* hash: d8454 */
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_7v143 {
18
+ } .base-modal__component_1n9jh {
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_7v143 {
24
+ } .base-modal__wrapper_1n9jh {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,27 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_7v143 {
36
+ } .base-modal__content_1n9jh {
37
37
  width: 100%;
38
38
  height: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
- } .base-modal__hidden_7v143 {
42
+ } .base-modal__hidden_1n9jh {
43
43
  display: none;
44
- } .base-modal__backdrop_7v143 {
44
+ } .base-modal__backdrop_1n9jh {
45
45
  z-index: 0;
46
- } .base-modal__appear_7v143,
47
- .base-modal__enter_7v143 {
46
+ } .base-modal__appear_1n9jh,
47
+ .base-modal__enter_1n9jh {
48
48
  opacity: 0;
49
- } .base-modal__appearActive_7v143,
50
- .base-modal__enterActive_7v143 {
49
+ } .base-modal__appearActive_1n9jh,
50
+ .base-modal__enterActive_1n9jh {
51
51
  opacity: 1;
52
52
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_7v143 {
53
+ } .base-modal__exit_1n9jh {
54
54
  opacity: 1;
55
- } .base-modal__exitActive_7v143,
56
- .base-modal__exitDone_7v143 {
55
+ } .base-modal__exitActive_1n9jh,
56
+ .base-modal__exitDone_1n9jh {
57
57
  opacity: 0;
58
58
  transition: opacity 200ms ease-out;
59
59
  }
package/modern/Component.d.ts CHANGED
@@ -83,6 +83,11 @@ type BaseModalProps = {
83
83
  * Пропсы для анимации (CSSTransition)
84
84
  */
85
85
  transitionProps?: Partial<TransitionProps>;
86
+ /**
87
+ * Рендерить ли в контейнер через портал.
88
+ * @default true
89
+ */
90
+ usePortal?: boolean;
86
91
  /**
87
92
  * Обработчик события нажатия на бэкдроп
88
93
  */
package/modern/Component.js CHANGED
@@ -6,12 +6,12 @@ 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 { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
9
+ import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
10
10
  import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
11
11
  import './matches-polyfill.js';
12
12
  import '@alfalab/core-components-global-store/modern';
13
13
 
14
- const styles = {"component":"base-modal__component_7v143","wrapper":"base-modal__wrapper_7v143","content":"base-modal__content_7v143","hidden":"base-modal__hidden_7v143","backdrop":"base-modal__backdrop_7v143","appear":"base-modal__appear_7v143","enter":"base-modal__enter_7v143","appearActive":"base-modal__appearActive_7v143","enterActive":"base-modal__enterActive_7v143","exit":"base-modal__exit_7v143","exitActive":"base-modal__exitActive_7v143","exitDone":"base-modal__exitDone_7v143"};
14
+ const styles = {"component":"base-modal__component_1n9jh","wrapper":"base-modal__wrapper_1n9jh","content":"base-modal__content_1n9jh","hidden":"base-modal__hidden_1n9jh","backdrop":"base-modal__backdrop_1n9jh","appear":"base-modal__appear_1n9jh","enter":"base-modal__enter_1n9jh","appearActive":"base-modal__appearActive_1n9jh","enterActive":"base-modal__enterActive_1n9jh","exit":"base-modal__exit_1n9jh","exitActive":"base-modal__exitActive_1n9jh","exitDone":"base-modal__exitDone_1n9jh"};
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, }, 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, 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);
@@ -220,24 +220,24 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
220
220
  setHeaderOffset,
221
221
  handleClose,
222
222
  ]);
223
+ const renderContent = () => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(BaseModalContext.Provider, { value: contextValue },
224
+ React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
225
+ Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
226
+ zIndex: computedZIndex,
227
+ } })),
228
+ React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
229
+ [styles.hidden]: !open && isExited,
230
+ }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
231
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
232
+ tabIndex: 0, "data-test-id": dataTestId, style: {
233
+ zIndex: computedZIndex,
234
+ } },
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)))))))));
223
238
  if (!shouldRender)
224
239
  return null;
225
- return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
226
- React.createElement(BaseModalContext.Provider, { value: contextValue },
227
- React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
228
- Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
229
- zIndex: computedZIndex,
230
- } })),
231
- React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
232
- [styles.hidden]: !open && isExited,
233
- }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
234
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
235
- tabIndex: 0, "data-test-id": dataTestId, style: {
236
- zIndex: computedZIndex,
237
- } },
238
- React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
239
- React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
240
- React.createElement("div", { className: cn(styles.content, contentClassName) }, children))))))))));
240
+ return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
241
241
  });
242
242
 
243
243
  export { BaseModal, BaseModalContext };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1wj1w */
1
+ /* hash: d8454 */
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_7v143 {
18
+ } .base-modal__component_1n9jh {
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_7v143 {
24
+ } .base-modal__wrapper_1n9jh {
25
25
  position: fixed;
26
26
  top: 0;
27
27
  left: 0;
@@ -33,27 +33,27 @@
33
33
  flex-direction: column;
34
34
  align-items: center;
35
35
  outline: 0;
36
- } .base-modal__content_7v143 {
36
+ } .base-modal__content_1n9jh {
37
37
  width: 100%;
38
38
  height: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
- } .base-modal__hidden_7v143 {
42
+ } .base-modal__hidden_1n9jh {
43
43
  display: none;
44
- } .base-modal__backdrop_7v143 {
44
+ } .base-modal__backdrop_1n9jh {
45
45
  z-index: 0;
46
- } .base-modal__appear_7v143,
47
- .base-modal__enter_7v143 {
46
+ } .base-modal__appear_1n9jh,
47
+ .base-modal__enter_1n9jh {
48
48
  opacity: 0;
49
- } .base-modal__appearActive_7v143,
50
- .base-modal__enterActive_7v143 {
49
+ } .base-modal__appearActive_1n9jh,
50
+ .base-modal__enterActive_1n9jh {
51
51
  opacity: 1;
52
52
  transition: opacity 200ms ease-in;
53
- } .base-modal__exit_7v143 {
53
+ } .base-modal__exit_1n9jh {
54
54
  opacity: 1;
55
- } .base-modal__exitActive_7v143,
56
- .base-modal__exitDone_7v143 {
55
+ } .base-modal__exitActive_1n9jh,
56
+ .base-modal__exitDone_1n9jh {
57
57
  opacity: 0;
58
58
  transition: opacity 200ms ease-out;
59
59
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "5.1.3",
3
+ "version": "5.2.0",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",