@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.0

package/masked-input/utils.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInputMaskStore = exports.actions = void 0;
+/* eslint-disable require-jsdoc, jsdoc/require-jsdoc */
+const core_1 = require("@krutoo/input-mask/dist/core");
+const utils_1 = require("@krutoo/input-mask/dist/dom/utils");
+const redux_1 = require("redux");
+exports.actions = {
+    manualChange: createAction('manual/change'),
+    inputChange: createAction('input/change'),
+    inputSelectionChange: createAction('input/selection-change'),
+};
+function createInputMaskStore(options, initialState) {
+    const reducer = createDomReducer(options);
+    return (0, redux_1.legacy_createStore)(reducer, initialState);
+}
+exports.createInputMaskStore = createInputMaskStore;
+function createDomReducer(options) {
+    const innerReducer = (0, core_1.createReducer)(options);
+    function processState(a, b) {
+        return innerReducer(a, (0, core_1.defineChanges)(a, b));
+    }
+    const initialState = utils_1.State.init(options);
+    return function reducer(state = initialState, action) {
+        let result = state;
+        if (exports.actions.inputChange.is(action)) {
+            result = processState(state, utils_1.State.fromTarget(action.payload.input));
+        }
+        else if (exports.actions.inputSelectionChange.is(action)) {
+            result = utils_1.State.fromTarget(action.payload.input);
+        }
+        else if (exports.actions.manualChange.is(action)) {
+            // мы не знаем какое значение передано (clean или masked) поэтому берем из него только подходящие символы
+            const validCleanValue = action.payload.value
+                .split('')
+                .filter(c => c.match(options.pattern))
+                .join('');
+            const newMaskedValue = utils_1.Value.toMasked(options, validCleanValue);
+            const firstPlace = options.mask.indexOf(options.placeholder);
+            result = processState(utils_1.State.of(state.value, utils_1.Range.of(firstPlace, state.value.length)), utils_1.State.of(newMaskedValue, utils_1.Range.of(newMaskedValue.length)));
+        }
+        return result;
+    };
+}
+function createAction(type) {
+    const creator = payload => ({ type, payload });
+    creator.is = (action) => action.type === type;
+    return creator;
+}

package/modal/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ModalBody, ModalFooter, ModalHeader, ModalOverlap } from './slots';
-import { WithBodyScrollLock } from '../_internal/body-scroll';
-declare type ModalSize = 's' | 'm' | 'l' | 'xl' | 'fullscreen';
-export interface ModalProps extends WithBodyScrollLock {
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export type ModalSize = 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+export interface ModalProps extends WithPageScrollLock {
     /** Содержимое компонента. */
     children?: React.ReactNode;
     /** Высота в пикселях. */
@@ -16,17 +16,15 @@ export interface ModalProps extends WithBodyScrollLock {
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
-export interface ModalComponent {
-    (props: ModalProps): JSX.Element;
-    Header: typeof ModalHeader;
-    Body: typeof ModalBody;
-    Footer: typeof ModalFooter;
-    Overlap: typeof ModalOverlap;
-}
 /**
  * Компонент модального окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Modal: ModalComponent;
-export {};
+export declare function Modal({ children, height, onClose, scrollDisableOptions, size, withScrollDisable, 'data-testid': testId, }: ModalProps): JSX.Element;
+export declare namespace Modal {
+    var Header: typeof ModalHeader;
+    var Body: typeof ModalBody;
+    var Footer: typeof ModalFooter;
+    var Overlap: typeof ModalOverlap;
+}

package/modal/index.js

@@ -1,42 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
-const top_bar_1 = require("../top-bar");
-const bottom_bar_1 = require("../bottom-bar");
+const react_1 = __importDefault(require("react"));
 const utils_1 = require("./utils");
-const shadows_1 = require("../styling/shadows");
-const lodash_1 = require("lodash");
 const slots_1 = require("./slots");
-const layer_1 = require("../helpers/layer");
+const modal_overlay_1 = require("../modal-overlay");
+const plate_1 = require("../plate");
 const define_slots_1 = require("../helpers/define-slots");
-const body_scroll_1 = require("../_internal/body-scroll");
+const utils_2 = require("../modal-overlay/utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
 const cx = bind_1.default.bind(modal_module_scss_1.default);
@@ -45,10 +19,8 @@ const cx = bind_1.default.bind(modal_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Modal = ({ children, height, onClose, scrollDisableOptions, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
-    const layer = (0, layer_1.useLayer)() + 100;
-    const rootRef = (0, react_1.useRef)(null);
-    const bind = (0, utils_1.useCloseHandler)(onClose);
+function Modal({ children, height, onClose, scrollDisableOptions, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) {
+    const overlayClickBind = (0, utils_2.useExactClick)(onClose);
     const fullscreen = size === 'fullscreen';
     const { header, content, footer, overlap } = (0, define_slots_1.defineSlots)(children, {
         header: slots_1.ModalHeader,
@@ -56,36 +28,27 @@ const Modal = ({ children, height, onClose, scrollDisableOptions, size = 'm', wi
         footer: slots_1.ModalFooter,
         overlap: slots_1.ModalOverlap,
     });
-    const topBarSize = fullscreen ? 'm' : 's';
-    const headerHeight = header ? top_bar_1.TOP_BAR_HEIGHT[topBarSize] : 0;
-    const footerStubHeight = fullscreen ? 0 : 16;
-    const footerHeight = footer
-        ? bottom_bar_1.BOTTOM_BAR_HEIGHT[footer.props.size || bottom_bar_1.BOTTOM_BAR_DEFAULTS.size]
-        : footerStubHeight;
     const style = {
-        '--modal-height': (0, lodash_1.isNumber)(height) ? `${Math.min(696, height)}px` : undefined,
-        '--header-height': `${headerHeight}px`,
-        '--footer-height': `${footerHeight}px`,
+        '--modal-height': typeof height === 'number' && Number.isFinite(height)
+            ? `${Math.min(696, height)}px`
+            : undefined,
     };
-    (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, Object.assign({ 
-        // defaults
-        reserveScrollBarGap: true, allowTouchMove: body_scroll_1.allowTouchMove }, scrollDisableOptions));
-    return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('overlay'), "data-testid": 'modal:overlay', style: { zIndex: layer } }, bind),
-        react_1.default.createElement("div", { className: cx('modal', `size-${size}`, !fullscreen && shadows_1.BoxShadow.z4), style: style, "data-testid": testId },
-            header &&
-                (0, react_1.cloneElement)(header, {
-                    size: topBarSize,
-                }),
-            react_1.default.createElement(layer_1.LayerProvider, { value: layer }, content),
-            footer &&
-                (0, react_1.cloneElement)(footer, {
-                    size: fullscreen ? 'l' : footer.props.size,
-                }),
-            !footer && !fullscreen && react_1.default.createElement("div", { className: cx('footer-stub') }),
-            !fullscreen && overlap && react_1.default.createElement("div", { className: cx('overlap') }, overlap))));
-};
+    return (react_1.default.createElement(modal_overlay_1.ModalOverlay, Object.assign({ className: cx('overlay') }, overlayClickBind),
+        react_1.default.createElement(plate_1.Plate, { rounds: null, shadow: fullscreen ? null : 'z4', style: style, className: cx('modal', `size-${size}`, header && 'has-header', footer && 'has-footer'), "data-testid": testId },
+            react_1.default.createElement(utils_1.ModalContext.Provider, { value: {
+                    withScrollDisable,
+                    scrollDisableOptions,
+                    topBarSize: 'unset',
+                    bottomBarSize: 'unset',
+                } },
+                header,
+                content,
+                footer,
+                !footer && !fullscreen && react_1.default.createElement("div", { className: cx('footer-stub') }),
+                overlap && (react_1.default.createElement("div", { className: cx('overlap-content'), "data-testid": 'modal:overlap' }, overlap))))));
+}
 exports.Modal = Modal;
-exports.Modal.Header = slots_1.ModalHeader;
-exports.Modal.Body = slots_1.ModalBody;
-exports.Modal.Footer = slots_1.ModalFooter;
-exports.Modal.Overlap = slots_1.ModalOverlap;
+Modal.Header = slots_1.ModalHeader;
+Modal.Body = slots_1.ModalBody;
+Modal.Footer = slots_1.ModalFooter;
+Modal.Overlap = slots_1.ModalOverlap;

package/modal/modal.module.scss

@@ -1,62 +1,101 @@
 @use '../colors';
+@use '../breakpoints';
+@use '../top-bar/top-bar-util';
+@use '../bottom-bar/bottom-bar-util';
 
-$max-height: 696px;
+$modal-max-height: 696px;
+
+@mixin regular-modal {
+  height: var(--modal-height, auto);
+  max-height: min(#{$modal-max-height}, calc(100vh - 32px));
+  min-height: 232px;
+  border-radius: 8px;
+}
+
+@mixin fullscreen-modal {
+  width: 100%;
+  height: calc(100 * var(--vh, 1vh));
+  max-height: 100%;
+}
+
+@mixin medium-header {
+  &.has-header {
+    --modal-header-height: #{top-bar-util.$size-m-height};
+    .header {
+      @include top-bar-util.size-m;
+    }
+  }
+}
+
+@mixin large-header {
+  &.has-header {
+    --modal-header-height: #{top-bar-util.$size-xl-height};
+    .header {
+      @include top-bar-util.size-xl;
+    }
+  }
+}
+
+@mixin medium-footer {
+  &.has-footer {
+    --modal-footer-height: #{bottom-bar-util.$size-m-height};
+    .footer {
+      @include bottom-bar-util.size-m;
+    }
+  }
+}
+
+@mixin large-footer {
+  &.has-footer {
+    --modal-footer-height: #{bottom-bar-util.$size-l-height};
+    .footer {
+      @include bottom-bar-util.size-l;
+    }
+  }
+}
 
 .overlay {
-  background: rgba(0, 0, 0, 0.24);
-  overflow: auto;
-  position: fixed;
   display: flex;
   align-items: center;
-  height: 100%;
-  width: 100%;
-  right: 0;
-  top: 0;
+  justify-content: center;
 }
 
 .modal {
-  position: relative;
+  flex-shrink: 0;
+  position: relative; // для overlap
+  margin: auto; // для корректной прокрутки во flex-контейнере
   display: flex;
   flex-direction: column;
-  border-radius: 8px;
-  background-color: #fff;
-  margin: auto;
-  flex-shrink: 0;
   z-index: 1;
-  max-height: $max-height;
-  height: var(--modal-height, auto);
-  &.size-s {
-    width: 480px;
-  }
-  &.size-m {
-    width: 640px;
-  }
-  &.size-l {
-    width: 768px;
-  }
-  &.size-xl {
-    width: 960px;
+  background-color: #fff;
+  @include breakpoints.down('xs') {
+    @include fullscreen-modal;
+    @include medium-header;
+    @include medium-footer;
   }
-  &.size-fullscreen {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    border-radius: 0;
-    .body {
-      max-height: none;
+  @include breakpoints.up('xs') {
+    &:not(.size-fullscreen) {
+      @include regular-modal;
+      @include medium-header;
+      @include medium-footer;
+      &.size-s {
+        width: 480px;
+      }
+      &.size-m {
+        width: 640px;
+      }
+      &.size-l {
+        width: 768px;
+      }
+      &.size-xl {
+        width: 960px;
+      }
+    }
+    &.size-fullscreen {
+      @include fullscreen-modal;
+      @include large-header;
+      @include large-footer;
     }
-  }
-}
-
-.overlap {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  * {
-    pointer-events: auto;
   }
 }
 
@@ -67,25 +106,29 @@ $max-height: 696px;
 
 .body {
   flex-grow: 1;
-  max-height: calc(
-    var(--modal-height, #{$max-height}) - var(--header-height) - var(--footer-height)
-  );
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex-grow: 1;
 }
 
 .footer {
+  flex-shrink: 0;
   border-radius: 0 0 8px 8px;
   overflow: hidden;
 }
 
 .footer-stub {
+  flex-shrink: 0;
   border-radius: 0 0 8px 8px;
   height: 16px;
   background: #fff;
 }
+
+.overlap-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  * {
+    pointer-events: auto;
+  }
+}

package/modal/slots.d.ts

@@ -1,35 +1,38 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { TopBarProps } from '../top-bar';
 import { BottomBarProps } from '../bottom-bar';
-export interface ModalHeaderProps extends TopBarProps {
+export interface ModalHeaderProps extends Omit<TopBarProps, 'size'> {
     onBack?: () => void;
     onClose?: () => void;
 }
+export type ModalFooterProps = Omit<BottomBarProps, 'size'>;
 /**
  * Шапка окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalHeader: ({ onBack, onClose, ...topBarProps }: ModalHeaderProps) => JSX.Element;
+export declare function ModalHeader({ className, onBack, onClose, buttons, ...rest }: ModalHeaderProps): JSX.Element;
 /**
  * Основной контент окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalBody: ({ children, onFullScroll, fullScrollThreshold, }: {
-    children?: React.ReactNode;
-    fullScrollThreshold?: number | undefined;
-    onFullScroll?: (() => void) | undefined;
-}) => JSX.Element;
+export declare function ModalBody({ children, onFullScroll, fullScrollThreshold, }: {
+    children?: ReactNode;
+    fullScrollThreshold?: number;
+    onFullScroll?: () => void;
+}): JSX.Element;
 /**
  * Футер окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalFooter: (props: BottomBarProps) => JSX.Element;
+export declare function ModalFooter({ className, ...rest }: ModalFooterProps): JSX.Element;
 /**
  * Контент который будет выводится поверх окна с абсолютным позиционированием.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalOverlap: React.FC;
+export declare function ModalOverlap({ children }: {
+    children?: ReactNode;
+}): JSX.Element;

package/modal/slots.js

@@ -40,58 +40,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalOverlap = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
 const react_1 = __importStar(require("react"));
 const top_bar_1 = require("../top-bar");
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
-const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
+const utils_1 = require("../top-bar/utils");
 const bottom_bar_1 = require("../bottom-bar");
 const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
-const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
 const viewport_1 = require("../context/viewport");
-const constants_1 = require("../constants");
+const utils_2 = require("./utils");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
+const cx = bind_1.default.bind(modal_module_scss_1.default);
 /**
  * Шапка окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalHeader = (_a) => {
-    var { onBack, onClose } = _a, topBarProps = __rest(_a, ["onBack", "onClose"]);
-    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBarProps, { buttonsProps: Object.assign(Object.assign(Object.assign({}, topBarProps.buttonsProps), (onBack && {
-            start: {
-                'data-testid': 'modal:back',
-                onClick: onBack,
-                icon: react_1.default.createElement(arrow_left_1.default, null),
-            },
-        })), (onClose && {
-            end: {
-                'data-testid': 'modal:close',
-                onClick: onClose,
-                icon: react_1.default.createElement(cross_1.default, null),
-            },
-        })), className: modal_module_scss_1.default.header })));
-};
+function ModalHeader(_a) {
+    var { className, onBack, onClose, buttons } = _a, rest = __rest(_a, ["className", "onBack", "onClose", "buttons"]);
+    const { topBarSize } = (0, react_1.useContext)(utils_2.ModalContext);
+    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, rest, { size: topBarSize, buttons: (0, utils_1.navigationButtons)({ buttons, onBack, onClose }), className: cx('header', className) })));
+}
 exports.ModalHeader = ModalHeader;
 /**
  * Основной контент окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalBody = ({ children, onFullScroll, fullScrollThreshold, }) => {
-    const ref = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { inFlexBox: true, className: modal_module_scss_1.default.body, overflow: { x: 'h', y: 's' }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold },
-        react_1.default.createElement(viewport_1.ViewportContext.Provider, { value: ref },
-            react_1.default.createElement("div", Object.assign({ className: modal_module_scss_1.default.main, ref: ref }, { [constants_1.BSL_IGNORE_ATTR]: true }), children))));
-};
+function ModalBody({ children, onFullScroll, fullScrollThreshold, }) {
+    const viewportRef = (0, react_1.useRef)(null);
+    const scrollableRef = (0, react_1.useRef)(null);
+    const osComponentRef = (0, react_1.useRef)(null);
+    const { withScrollDisable, scrollDisableOptions } = (0, react_1.useContext)(utils_2.ModalContext);
+    (0, react_1.useImperativeHandle)(scrollableRef, () => (0, custom_scrollbar_1.getViewport)(osComponentRef.current));
+    (0, react_1.useImperativeHandle)(viewportRef, () => (0, custom_scrollbar_1.getViewport)(osComponentRef.current));
+    (0, page_scroll_lock_1.usePageScrollLock)(scrollableRef, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
+    return (react_1.default.createElement(viewport_1.ViewportContext.Provider, { value: viewportRef },
+        react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { inFlexBox: true, osComponentRef: osComponentRef, className: modal_module_scss_1.default.body, overflow: { x: 'hidden', y: 'scroll' }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold }, children)));
+}
 exports.ModalBody = ModalBody;
 /**
  * Футер окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalFooter = (props) => react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props));
+function ModalFooter(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const { bottomBarSize } = (0, react_1.useContext)(utils_2.ModalContext);
+    return react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, rest, { size: bottomBarSize, className: cx('footer', className) }));
+}
 exports.ModalFooter = ModalFooter;
 /**
  * Контент который будет выводится поверх окна с абсолютным позиционированием.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalOverlap = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+function ModalOverlap({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
 exports.ModalOverlap = ModalOverlap;

package/modal/utils.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
-/**
- * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
- * @param callback Сработает при клике.
- * @return Свойства для целевого элемента.
- */
-export declare const useCloseHandler: (callback?: (() => void) | undefined) => {
-    onMouseUp: ({ target, currentTarget, button }: React.MouseEvent) => void;
-    onMouseDown: ({ button, target }: React.MouseEvent) => void;
-};
+/// <reference types="react" />
+import { BottomBarProps } from '../bottom-bar';
+import { TopBarProps } from '../top-bar';
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export declare const ModalContext: import("react").Context<WithPageScrollLock & {
+    topBarSize?: TopBarProps['size'];
+    bottomBarSize?: BottomBarProps['size'];
+}>;

package/modal/utils.js

@@ -1,29 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCloseHandler = void 0;
+exports.ModalContext = void 0;
 const react_1 = require("react");
-const identity_1 = require("../hooks/identity");
-/**
- * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
- * @param callback Сработает при клике.
- * @return Свойства для целевого элемента.
- */
-const useCloseHandler = (callback) => {
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    const mouseDownTarget = (0, react_1.useRef)();
-    const onMouseDown = (0, react_1.useCallback)(({ button, target }) => {
-        if (button === 0) {
-            mouseDownTarget.current = target;
-        }
-    }, []);
-    const onMouseUp = (0, react_1.useCallback)(({ target, currentTarget, button }) => {
-        const fn = callbackRef.current;
-        fn &&
-            button === 0 &&
-            target === currentTarget &&
-            currentTarget === mouseDownTarget.current &&
-            fn();
-    }, []);
-    return { onMouseUp, onMouseDown };
-};
-exports.useCloseHandler = useCloseHandler;
+exports.ModalContext = (0, react_1.createContext)({});

package/modal-overlay/index.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, Ref } from 'react';
+export interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+/**
+ * Полноэкранное затемнение для модальных компонентов (Alert, Modal, SidePage...).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ModalOverlay({ rootRef, children, className, style, 'data-testid': testId, ...restProps }: ModalOverlayProps): JSX.Element;

package/modal-overlay/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalOverlay = void 0;
+const react_1 = __importStar(require("react"));
+const styles_1 = require("../hooks/styles");
+const layer_1 = require("../helpers/layer");
+const classnames_1 = __importDefault(require("classnames"));
+const modal_overlay_module_scss_1 = __importDefault(require("./modal-overlay.module.scss"));
+/**
+ * Полноэкранное затемнение для модальных компонентов (Alert, Modal, SidePage...).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ModalOverlay(_a) {
+    var { rootRef, children, className, style, 'data-testid': testId = 'modal-overlay' } = _a, restProps = __rest(_a, ["rootRef", "children", "className", "style", 'data-testid']);
+    const layer = (0, layer_1.useLayer)() + 100;
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(rootRef, () => ref.current);
+    (0, styles_1.useViewportHeightUnit)(ref);
+    return (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+        react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: (0, classnames_1.default)(modal_overlay_module_scss_1.default.root, className), "data-testid": testId, style: Object.assign(Object.assign({}, style), { zIndex: layer }) }), children)));
+}
+exports.ModalOverlay = ModalOverlay;

package/modal-overlay/modal-overlay-util.scss

@@ -0,0 +1 @@
+$overlay-color: rgba(0, 0, 0, 0.24);