@alfalab/core-components 41.3.0 → 41.4.0-beta.0

package/bank-card/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tsb1 */
+/* hash: yb573 */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_nbcvp {
+} .bank-card__component_1p4fc {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_nbcvp {
+} .bank-card__aspectRatioContainer_1p4fc {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_nbcvp {
+} .bank-card__content_1p4fc {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_nbcvp {
+} .bank-card__label_1p4fc {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_nbcvp {
+} @media (max-width: 360px) { .bank-card__label_1p4fc {
         font-size: 16px
 }
-    } .bank-card__focused_nbcvp .bank-card__label_nbcvp,
-.bank-card__filled_nbcvp .bank-card__label_nbcvp {
+    } .bank-card__focused_1p4fc .bank-card__label_1p4fc,
+.bank-card__filled_1p4fc .bank-card__label_1p4fc {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_nbcvp .bank-card__label_nbcvp,
-.bank-card__filled_nbcvp .bank-card__label_nbcvp {
+} @media (max-width: 360px) { .bank-card__focused_1p4fc .bank-card__label_1p4fc,
+.bank-card__filled_1p4fc .bank-card__label_1p4fc {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_nbcvp:before {
+    } .bank-card__focused_1p4fc:before {
     transform: scale(1) !important;
-} .bank-card__input_nbcvp {
+} .bank-card__input_1p4fc {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_nbcvp {
+} @media (max-width: 360px) { .bank-card__input_1p4fc {
         font-size: 16px
 }
-    } .bank-card__bankLogo_nbcvp {
+    } .bank-card__bankLogo_1p4fc {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_nbcvp svg {
+} .bank-card__bankLogo_1p4fc svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_nbcvp svg g {
+    } .bank-card__bankLogo_1p4fc svg g {
             fill: var(--color-black);
-        } .bank-card__brandLogo_nbcvp {
+        } .bank-card__brandLogo_1p4fc {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_nbcvp svg {
+} .bank-card__brandLogo_1p4fc svg {
         display: block;
         fill: var(--color-black);
-    } .bank-card__usePhoto_nbcvp {
+    } .bank-card__usePhoto_1p4fc {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_nbcvp svg {
+} .bank-card__usePhoto_1p4fc svg {
         fill: var(--color-black);
         display: block;
     }

package/bank-card/modern/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
 import { validateCardNumber } from './utils.js';
 
-const styles = {"component":"bank-card__component_nbcvp","aspectRatioContainer":"bank-card__aspectRatioContainer_nbcvp","content":"bank-card__content_nbcvp","label":"bank-card__label_nbcvp","focused":"bank-card__focused_nbcvp","filled":"bank-card__filled_nbcvp","input":"bank-card__input_nbcvp","bankLogo":"bank-card__bankLogo_nbcvp","brandLogo":"bank-card__brandLogo_nbcvp","usePhoto":"bank-card__usePhoto_nbcvp"};
+const styles = {"component":"bank-card__component_1p4fc","aspectRatioContainer":"bank-card__aspectRatioContainer_1p4fc","content":"bank-card__content_1p4fc","label":"bank-card__label_1p4fc","focused":"bank-card__focused_1p4fc","filled":"bank-card__filled_1p4fc","input":"bank-card__input_1p4fc","bankLogo":"bank-card__bankLogo_1p4fc","brandLogo":"bank-card__brandLogo_1p4fc","usePhoto":"bank-card__usePhoto_1p4fc"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tsb1 */
+/* hash: yb573 */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_nbcvp {
+} .bank-card__component_1p4fc {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_nbcvp {
+} .bank-card__aspectRatioContainer_1p4fc {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_nbcvp {
+} .bank-card__content_1p4fc {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_nbcvp {
+} .bank-card__label_1p4fc {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_nbcvp {
+} @media (max-width: 360px) { .bank-card__label_1p4fc {
         font-size: 16px
 }
-    } .bank-card__focused_nbcvp .bank-card__label_nbcvp,
-.bank-card__filled_nbcvp .bank-card__label_nbcvp {
+    } .bank-card__focused_1p4fc .bank-card__label_1p4fc,
+.bank-card__filled_1p4fc .bank-card__label_1p4fc {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_nbcvp .bank-card__label_nbcvp,
-.bank-card__filled_nbcvp .bank-card__label_nbcvp {
+} @media (max-width: 360px) { .bank-card__focused_1p4fc .bank-card__label_1p4fc,
+.bank-card__filled_1p4fc .bank-card__label_1p4fc {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_nbcvp:before {
+    } .bank-card__focused_1p4fc:before {
     transform: scale(1) !important;
-} .bank-card__input_nbcvp {
+} .bank-card__input_1p4fc {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_nbcvp {
+} @media (max-width: 360px) { .bank-card__input_1p4fc {
         font-size: 16px
 }
-    } .bank-card__bankLogo_nbcvp {
+    } .bank-card__bankLogo_1p4fc {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_nbcvp svg {
+} .bank-card__bankLogo_1p4fc svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_nbcvp svg g {
+    } .bank-card__bankLogo_1p4fc svg g {
             fill: var(--color-black);
-        } .bank-card__brandLogo_nbcvp {
+        } .bank-card__brandLogo_1p4fc {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_nbcvp svg {
+} .bank-card__brandLogo_1p4fc svg {
         display: block;
         fill: var(--color-black);
-    } .bank-card__usePhoto_nbcvp {
+    } .bank-card__usePhoto_1p4fc {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_nbcvp svg {
+} .bank-card__usePhoto_1p4fc svg {
         fill: var(--color-black);
         display: block;
     }

package/base-modal/Component.d.ts

@@ -83,6 +83,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

package/base-modal/Component.js

@@ -21,7 +21,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"base-modal__component_13yn9","wrapper":"base-modal__wrapper_13yn9","content":"base-modal__content_13yn9","hidden":"base-modal__hidden_13yn9","backdrop":"base-modal__backdrop_13yn9","appear":"base-modal__appear_13yn9","enter":"base-modal__enter_13yn9","appearActive":"base-modal__appearActive_13yn9","enterActive":"base-modal__enterActive_13yn9","exit":"base-modal__exit_13yn9","exitActive":"base-modal__exitActive_13yn9","exitDone":"base-modal__exitDone_13yn9"};
+var styles = {"component":"base-modal__component_b5jv0","wrapper":"base-modal__wrapper_b5jv0","content":"base-modal__content_b5jv0","hidden":"base-modal__hidden_b5jv0","backdrop":"base-modal__backdrop_b5jv0","appear":"base-modal__appear_b5jv0","enter":"base-modal__enter_b5jv0","appearActive":"base-modal__appearActive_b5jv0","enterActive":"base-modal__enterActive_b5jv0","exit":"base-modal__exit_b5jv0","exitActive":"base-modal__exitActive_b5jv0","exitDone":"base-modal__exitDone_b5jv0"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -41,14 +41,14 @@ var BaseModalContext = React__default.default.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = React.forwardRef(function (_a, ref) {
-    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;
-    var _p = React.useState(null), exited = _p[0], setExited = _p[1];
-    var _q = React.useState(false), hasScroll = _q[0], setHasScroll = _q[1];
-    var _r = React.useState(false), hasHeader = _r[0], setHasHeader = _r[1];
-    var _s = React.useState(false), hasFooter = _s[0], setHasFooter = _s[1];
-    var _t = React.useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
-    var _u = React.useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
-    var _v = React.useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
+    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;
+    var _q = React.useState(null), exited = _q[0], setExited = _q[1];
+    var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
+    var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
+    var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
+    var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
+    var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
+    var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -231,27 +231,27 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         setHeaderOffset,
         handleClose,
     ]);
+    var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
+        var _a;
+        return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
+            React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+                Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
+                        zIndex: computedZIndex,
+                    } }))),
+                React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles.wrapper, wrapperClassName, (_a = {},
+                        _a[styles.hidden] = !open && isExited,
+                        _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                        zIndex: computedZIndex,
+                    } },
+                    React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
+                        React__default.default.createElement("div", { className: cn__default.default(styles.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
+                            React__default.default.createElement("div", { className: cn__default.default(styles.content, contentClassName) }, children)))))));
+    })); };
     if (!shouldRender)
         return null;
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
-        var _a;
-        return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true },
-            React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
-                React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
-                    Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
-                            zIndex: computedZIndex,
-                        } }))),
-                    React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles.wrapper, wrapperClassName, (_a = {},
-                            _a[styles.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                        tabIndex: 0, "data-test-id": dataTestId, style: {
-                            zIndex: computedZIndex,
-                        } },
-                        React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
-                            React__default.default.createElement("div", { className: cn__default.default(styles.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
-                                React__default.default.createElement("div", { className: cn__default.default(styles.content, contentClassName) }, children))))))));
-    }));
+    return usePortal ? (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
 });
 
 exports.BaseModal = BaseModal;

package/base-modal/cssm/Component.d.ts

@@ -83,6 +83,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

package/base-modal/cssm/Component.js

@@ -40,14 +40,14 @@ var BaseModalContext = React__default.default.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = React.forwardRef(function (_a, ref) {
-    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;
-    var _p = React.useState(null), exited = _p[0], setExited = _p[1];
-    var _q = React.useState(false), hasScroll = _q[0], setHasScroll = _q[1];
-    var _r = React.useState(false), hasHeader = _r[0], setHasHeader = _r[1];
-    var _s = React.useState(false), hasFooter = _s[0], setHasFooter = _s[1];
-    var _t = React.useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
-    var _u = React.useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
-    var _v = React.useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
+    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;
+    var _q = React.useState(null), exited = _q[0], setExited = _q[1];
+    var _r = React.useState(false), hasScroll = _r[0], setHasScroll = _r[1];
+    var _s = React.useState(false), hasHeader = _s[0], setHasHeader = _s[1];
+    var _t = React.useState(false), hasFooter = _t[0], setHasFooter = _t[1];
+    var _u = React.useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
+    var _v = React.useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
+    var _w = React.useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
     var componentNodeRef = React.useRef(null);
     var wrapperRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -230,27 +230,27 @@ var BaseModal = React.forwardRef(function (_a, ref) {
         setHeaderOffset,
         handleClose,
     ]);
+    var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
+        var _a;
+        return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
+            React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+                Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
+                        zIndex: computedZIndex,
+                    } }))),
+                React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, (_a = {},
+                        _a[styles__default.default.hidden] = !open && isExited,
+                        _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                        zIndex: computedZIndex,
+                    } },
+                    React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
+                        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
+                            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, contentClassName) }, children)))))));
+    })); };
     if (!shouldRender)
         return null;
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
-        var _a;
-        return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true },
-            React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
-                React__default.default.createElement(FocusLock__default.default, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
-                    Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
-                            zIndex: computedZIndex,
-                        } }))),
-                    React__default.default.createElement("div", { role: 'dialog', className: cn__default.default(styles__default.default.wrapper, wrapperClassName, (_a = {},
-                            _a[styles__default.default.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs__default.default([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                        tabIndex: 0, "data-test-id": dataTestId, style: {
-                            zIndex: computedZIndex,
-                        } },
-                        React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
-                            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: mergeRefs__default.default([componentRef, componentNodeRef]) },
-                                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content, contentClassName) }, children))))))));
-    }));
+    return usePortal ? (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
 });
 
 exports.BaseModal = BaseModal;

package/base-modal/esm/Component.d.ts

@@ -83,6 +83,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */

package/base-modal/esm/Component.js

@@ -12,7 +12,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '../../global-store/esm';
 
-var styles = {"component":"base-modal__component_13yn9","wrapper":"base-modal__wrapper_13yn9","content":"base-modal__content_13yn9","hidden":"base-modal__hidden_13yn9","backdrop":"base-modal__backdrop_13yn9","appear":"base-modal__appear_13yn9","enter":"base-modal__enter_13yn9","appearActive":"base-modal__appearActive_13yn9","enterActive":"base-modal__enterActive_13yn9","exit":"base-modal__exit_13yn9","exitActive":"base-modal__exitActive_13yn9","exitDone":"base-modal__exitDone_13yn9"};
+var styles = {"component":"base-modal__component_b5jv0","wrapper":"base-modal__wrapper_b5jv0","content":"base-modal__content_b5jv0","hidden":"base-modal__hidden_b5jv0","backdrop":"base-modal__backdrop_b5jv0","appear":"base-modal__appear_b5jv0","enter":"base-modal__enter_b5jv0","appearActive":"base-modal__appearActive_b5jv0","enterActive":"base-modal__enterActive_b5jv0","exit":"base-modal__exit_b5jv0","exitActive":"base-modal__exitActive_b5jv0","exitDone":"base-modal__exitDone_b5jv0"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -32,14 +32,14 @@ var BaseModalContext = React.createContext({
     onClose: function () { return null; },
 });
 var BaseModal = forwardRef(function (_a, ref) {
-    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;
-    var _p = useState(null), exited = _p[0], setExited = _p[1];
-    var _q = useState(false), hasScroll = _q[0], setHasScroll = _q[1];
-    var _r = useState(false), hasHeader = _r[0], setHasHeader = _r[1];
-    var _s = useState(false), hasFooter = _s[0], setHasFooter = _s[1];
-    var _t = useState(false), headerHighlighted = _t[0], setHeaderHighlighted = _t[1];
-    var _u = useState(false), footerHighlighted = _u[0], setFooterHighlighted = _u[1];
-    var _v = useState(0), headerOffset = _v[0], setHeaderOffset = _v[1];
+    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;
+    var _q = useState(null), exited = _q[0], setExited = _q[1];
+    var _r = useState(false), hasScroll = _r[0], setHasScroll = _r[1];
+    var _s = useState(false), hasHeader = _s[0], setHasHeader = _s[1];
+    var _t = useState(false), hasFooter = _t[0], setHasFooter = _t[1];
+    var _u = useState(false), headerHighlighted = _u[0], setHeaderHighlighted = _u[1];
+    var _v = useState(false), footerHighlighted = _v[0], setFooterHighlighted = _v[1];
+    var _w = useState(0), headerOffset = _w[0], setHeaderOffset = _w[1];
     var componentNodeRef = useRef(null);
     var wrapperRef = useRef(null);
     var scrollableNodeRef = useRef(null);
@@ -222,27 +222,27 @@ var BaseModal = forwardRef(function (_a, ref) {
         setHeaderOffset,
         handleClose,
     ]);
+    var renderContent = function () { return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
+        var _a;
+        return (React.createElement(BaseModalContext.Provider, { value: contextValue },
+            React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+                Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
+                        zIndex: computedZIndex,
+                    } }))),
+                React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
+                        _a[styles.hidden] = !open && isExited,
+                        _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex: 0, "data-test-id": dataTestId, style: {
+                        zIndex: computedZIndex,
+                    } },
+                    React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
+                        React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
+                            React.createElement("div", { className: cn(styles.content, contentClassName) }, children)))))));
+    })); };
     if (!shouldRender)
         return null;
-    return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
-        var _a;
-        return (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
-            React.createElement(BaseModalContext.Provider, { value: contextValue },
-                React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
-                    Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
-                            zIndex: computedZIndex,
-                        } }))),
-                    React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
-                            _a[styles.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
-                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                        tabIndex: 0, "data-test-id": dataTestId, style: {
-                            zIndex: computedZIndex,
-                        } },
-                        React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
-                            React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
-                                React.createElement("div", { className: cn(styles.content, contentClassName) }, children))))))));
-    }));
+    return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
 });
 
 export { BaseModal, BaseModalContext };

package/base-modal/esm/index.css

@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_13yn9 {
+} .base-modal__component_b5jv0 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_13yn9 {
+} .base-modal__wrapper_b5jv0 {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_13yn9 {
+} .base-modal__content_b5jv0 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_13yn9 {
+} .base-modal__hidden_b5jv0 {
     display: none;
-} .base-modal__backdrop_13yn9 {
+} .base-modal__backdrop_b5jv0 {
     z-index: 0;
-} .base-modal__appear_13yn9,
-.base-modal__enter_13yn9 {
+} .base-modal__appear_b5jv0,
+.base-modal__enter_b5jv0 {
     opacity: 0;
-} .base-modal__appearActive_13yn9,
-.base-modal__enterActive_13yn9 {
+} .base-modal__appearActive_b5jv0,
+.base-modal__enterActive_b5jv0 {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_13yn9 {
+} .base-modal__exit_b5jv0 {
     opacity: 1;
-} .base-modal__exitActive_13yn9,
-.base-modal__exitDone_13yn9 {
+} .base-modal__exitActive_b5jv0,
+.base-modal__exitDone_b5jv0 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.css

@@ -15,13 +15,13 @@
 } :root {
 } :root {
 } :root {
-} .base-modal__component_13yn9 {
+} .base-modal__component_b5jv0 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_13yn9 {
+} .base-modal__wrapper_b5jv0 {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,27 +33,27 @@
     flex-direction: column;
     align-items: center;
     outline: 0;
-} .base-modal__content_13yn9 {
+} .base-modal__content_b5jv0 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_13yn9 {
+} .base-modal__hidden_b5jv0 {
     display: none;
-} .base-modal__backdrop_13yn9 {
+} .base-modal__backdrop_b5jv0 {
     z-index: 0;
-} .base-modal__appear_13yn9,
-.base-modal__enter_13yn9 {
+} .base-modal__appear_b5jv0,
+.base-modal__enter_b5jv0 {
     opacity: 0;
-} .base-modal__appearActive_13yn9,
-.base-modal__enterActive_13yn9 {
+} .base-modal__appearActive_b5jv0,
+.base-modal__enterActive_b5jv0 {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_13yn9 {
+} .base-modal__exit_b5jv0 {
     opacity: 1;
-} .base-modal__exitActive_13yn9,
-.base-modal__exitDone_13yn9 {
+} .base-modal__exitActive_b5jv0,
+.base-modal__exitDone_b5jv0 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/modern/Component.d.ts

@@ -83,6 +83,11 @@ type BaseModalProps = {
      * Пропсы для анимации (CSSTransition)
      */
     transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
     /**
      * Обработчик события нажатия на бэкдроп
      */