@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/masked-input/utils.js

@@ -1,9 +1,10 @@
 "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");
+exports.actions = void 0;
+exports.createInputMaskStore = createInputMaskStore;
+/* eslint-disable jsdoc/require-jsdoc */
+const core_1 = require("@krutoo/input-mask/core");
+const dom_1 = require("@krutoo/input-mask/dom");
 const redux_1 = require("redux");
 exports.actions = {
     manualChange: createAction('manual/change'),
@@ -14,30 +15,32 @@ 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) {
+    const processState = (a, b) => innerReducer(a, (0, core_1.defineChanges)(a, b));
+    const initialState = dom_1.StateUtil.init(options);
+    return (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)));
+        switch (true) {
+            case exports.actions.inputChange.is(action): {
+                result = processState(state, dom_1.StateUtil.fromTarget(action.payload.input));
+                break;
+            }
+            case exports.actions.inputSelectionChange.is(action): {
+                result = dom_1.StateUtil.fromTarget(action.payload.input);
+                break;
+            }
+            case exports.actions.manualChange.is(action): {
+                // мы не знаем какое значение передано (clean или masked) поэтому берем из него только подходящие символы
+                const validCleanValue = action.payload.value
+                    .split('')
+                    .filter(c => c.match(options.pattern))
+                    .join('');
+                const newMaskedValue = dom_1.ValueUtil.cleanToMasked(options, validCleanValue);
+                const firstPlace = options.mask.indexOf(options.placeholder);
+                result = processState(dom_1.StateUtil.of(state.value, core_1.RangeUtil.of(firstPlace, state.value.length)), dom_1.StateUtil.of(newMaskedValue, core_1.RangeUtil.of(newMaskedValue.length)));
+                break;
+            }
         }
         return result;
     };
@@ -47,3 +50,4 @@ function createAction(type) {
     creator.is = (action) => action.type === type;
     return creator;
 }
+//# sourceMappingURL=utils.js.map

package/masked-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/masked-input/utils.ts"],"names":[],"mappings":"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"}

package/modal/index.d.ts

@@ -1,30 +1,4 @@
-import React from 'react';
-import { ModalBody, ModalFooter, ModalHeader, ModalOverlap } from './slots';
-import { WithPageScrollLock } from '../_internal/page-scroll-lock';
-export type ModalSize = 's' | 'm' | 'l' | 'xl' | 'fullscreen';
-export interface ModalProps extends WithPageScrollLock {
-    /** Содержимое компонента. */
-    children?: React.ReactNode;
-    /** Высота в пикселях. */
-    height?: number;
-    /** Будет вызвана при нажатии на кнопку "назад" в топ баре. */
-    onBack?: () => void;
-    /** Будет вызвана при закрытии окна. */
-    onClose?: () => void;
-    /** Размер окна. */
-    size?: ModalSize;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Компонент модального окна.
- * @param props Свойства.
- * @return Элемент.
- */
-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;
-}
+export type { ModalSize, ModalStyle, ModalProps, ModalBodyProps } from './types';
+export { ModalBody, ModalBottomGap, ModalOverlap } from './slots';
+export { Modal } from './modal';
+export { getResponsiveModalProps } from './utils';

package/modal/index.js

@@ -1,54 +1,12 @@
 "use strict";
-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 = __importDefault(require("react"));
-const utils_1 = require("./utils");
-const slots_1 = require("./slots");
-const modal_overlay_1 = require("../modal-overlay");
-const plate_1 = require("../plate");
-const define_slots_1 = require("../helpers/define-slots");
-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);
-/**
- * Компонент модального окна.
- * @param props Свойства.
- * @return Элемент.
- */
-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,
-        content: slots_1.ModalBody,
-        footer: slots_1.ModalFooter,
-        overlap: slots_1.ModalOverlap,
-    });
-    const style = {
-        '--modal-height': typeof height === 'number' && Number.isFinite(height)
-            ? `${Math.min(696, height)}px`
-            : undefined,
-    };
-    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;
-Modal.Header = slots_1.ModalHeader;
-Modal.Body = slots_1.ModalBody;
-Modal.Footer = slots_1.ModalFooter;
-Modal.Overlap = slots_1.ModalOverlap;
+exports.getResponsiveModalProps = exports.Modal = exports.ModalOverlap = exports.ModalBottomGap = exports.ModalBody = void 0;
+var slots_1 = require("./slots");
+Object.defineProperty(exports, "ModalBody", { enumerable: true, get: function () { return slots_1.ModalBody; } });
+Object.defineProperty(exports, "ModalBottomGap", { enumerable: true, get: function () { return slots_1.ModalBottomGap; } });
+Object.defineProperty(exports, "ModalOverlap", { enumerable: true, get: function () { return slots_1.ModalOverlap; } });
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getResponsiveModalProps", { enumerable: true, get: function () { return utils_1.getResponsiveModalProps; } });
+//# sourceMappingURL=index.js.map

package/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/modal/index.ts"],"names":[],"mappings":";;;AACA,iCAAkE;AAAzD,kGAAA,SAAS,OAAA;AAAE,uGAAA,cAAc,OAAA;AAAE,qGAAA,YAAY,OAAA;AAChD,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,iCAAkD;AAAzC,gHAAA,uBAAuB,OAAA"}

package/modal/modal-util.scss

@@ -0,0 +1,45 @@
+@use '../shadows';
+
+@mixin size-s {
+  --modal-width: 480px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-m {
+  --modal-width: 640px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-l {
+  --modal-width: 768px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-xl {
+  --modal-width: 960px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-fullscreen {
+  --modal-width: 100%;
+  --modal-height: 100%;
+  --modal-max-height: 100%;
+  --modal-overlay-padding: 0;
+  --modal-box-shadow: none;
+}

package/modal/modal.d.ts

@@ -0,0 +1,7 @@
+import type { ModalProps } from './types';
+/**
+ * Модальное окно - окно, блокирующее работу с основным интерфейсом до тех пор, пока оно не будет закрыт.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Modal({ flexLayout, size, rounds, className, children, onClose, overlayProps, 'data-testid': testId, ...restProps }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/modal.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = Modal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const modal_overlay_1 = require("../modal-overlay");
+const utils_1 = require("../modal-overlay/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modal_m_scss_1 = __importDefault(require("./modal.m.scss"));
+const cx = bind_1.default.bind(modal_m_scss_1.default);
+/**
+ * Модальное окно - окно, блокирующее работу с основным интерфейсом до тех пор, пока оно не будет закрыт.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Modal({ flexLayout = true, size = 'm', rounds = size === 'fullscreen' ? 'unset' : 'm', className, children, onClose, overlayProps, 'data-testid': testId = 'modal', ...restProps }) {
+    const overlayClickProps = (0, utils_1.useExactClick)(onClose, {
+        onMouseDown: overlayProps?.onMouseDown,
+        onMouseUp: overlayProps?.onMouseUp,
+    });
+    const overlayClassName = cx('overlay', 
+    // ВАЖНО: классы размера и скруглений кидаем на ModalOverlay для того чтобы понизить специфичность
+    // а также потому что надо регулировать отступы от края
+    size !== 'unset' && `size-${size}`, rounds !== 'unset' && `rounds-${rounds}`, overlayProps?.className);
+    const modalClassName = cx('modal', flexLayout && 'modal-layout', className);
+    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, { ...overlayProps, className: overlayClassName, ...overlayClickProps, children: (0, jsx_runtime_1.jsx)("div", { className: modalClassName, "data-testid": testId, ...restProps, children: children }) }));
+}
+//# sourceMappingURL=modal.js.map

package/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/modal/modal.tsx"],"names":[],"mappings":";;;;;AAaA,sBAkCC;;AA9CD,oDAAgD;AAChD,kDAAuD;AACvD,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,KAAK,CAAC,EACpB,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAC9C,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,GAAG,SAAS,EACD;IACX,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAC,OAAO,EAAE;QAC/C,WAAW,EAAE,YAAY,EAAE,WAAW;QACtC,SAAS,EAAE,YAAY,EAAE,SAAS;KACnC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,EAAE,CACzB,SAAS;IACT,kGAAkG;IAClG,uDAAuD;IACvD,IAAI,KAAK,OAAO,IAAI,QAAQ,IAAI,EAAE,EAClC,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,EAAE,EACxC,YAAY,EAAE,SAAS,CACxB,CAAC;IAEF,MAAM,cAAc,GAAG,EAAE,CAAC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,SAAS,CAAC,CAAC;IAE5E,OAAO,CACL,uBAAC,4BAAY,OAAK,YAAY,EAAE,SAAS,EAAE,gBAAgB,KAAM,iBAAiB,YAChF,gCAAK,SAAS,EAAE,cAAc,iBAAe,MAAM,KAAM,SAAS,YAC/D,QAAQ,GACL,GACO,CAChB,CAAC;AACJ,CAAC"}

package/modal/modal.m.scss

@@ -0,0 +1,79 @@
+@use '../shadows';
+@use './modal-util';
+
+.overlay {
+  display: flex;
+  align-items: center;
+  padding: var(--modal-overlay-padding);
+  // ВАЖНО: для корректной прокрутки во flex-контейнере не надо использовать тут justify-content: center
+}
+
+.modal {
+  width: var(--modal-width);
+  height: var(--modal-height);
+  max-height: var(--modal-max-height);
+  min-height: var(--modal-min-height);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-box-shadow);
+  flex-shrink: 0;
+  margin: auto; // ВАЖНО: для корректной прокрутки во flex-контейнере
+  position: relative; // ВАЖНО: для overlap
+  z-index: 1;
+  background-color: #fff;
+}
+
+.modal-layout {
+  display: flex;
+  flex-direction: column;
+}
+
+.size-s {
+  @include modal-util.size-s;
+}
+
+.size-m {
+  @include modal-util.size-m;
+}
+
+.size-l {
+  @include modal-util.size-l;
+}
+
+.size-xl {
+  @include modal-util.size-xl;
+}
+
+.size-fullscreen {
+  @include modal-util.size-fullscreen;
+}
+
+.rounds-s {
+  --modal-border-radius: 4px;
+}
+
+.rounds-m {
+  --modal-border-radius: 8px;
+}
+
+.body {
+  flex-grow: 1;
+}
+
+.overlap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  * {
+    pointer-events: auto;
+  }
+}
+
+.bottom-gap {
+  flex-shrink: 0;
+  border-radius: 0 0 8px 8px;
+  height: 16px;
+  background: #fff;
+}

package/modal/slots.d.ts

@@ -1,33 +1,11 @@
 import { ReactNode } from 'react';
-import { TopBarProps } from '../top-bar';
-import { BottomBarProps } from '../bottom-bar';
-export interface ModalHeaderProps extends Omit<TopBarProps, 'size'> {
-    onBack?: () => void;
-    onClose?: () => void;
-}
-export type ModalFooterProps = Omit<BottomBarProps, 'size'>;
-/**
- * Шапка окна.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function ModalHeader({ className, onBack, onClose, buttons, ...rest }: ModalHeaderProps): JSX.Element;
+import { ModalBodyProps } from './types';
 /**
  * Основной контент окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ModalBody({ children, onFullScroll, fullScrollThreshold, }: {
-    children?: ReactNode;
-    fullScrollThreshold?: number;
-    onFullScroll?: () => void;
-}): JSX.Element;
-/**
- * Футер окна.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function ModalFooter({ className, ...rest }: ModalFooterProps): JSX.Element;
+export declare function ModalBody({ children, className, rootRef, viewportRef, viewportProps, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Контент который будет выводится поверх окна с абсолютным позиционированием.
  * @param props Свойства.
@@ -35,4 +13,9 @@ export declare function ModalFooter({ className, ...rest }: ModalFooterProps): J
  */
 export declare function ModalOverlap({ children }: {
     children?: ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Заглушка для футера по дизайн-гайдам.
+ * @return Элемент.
+ */
+export declare function ModalBottomGap(): import("react/jsx-runtime").JSX.Element;

package/modal/slots.js

@@ -1,99 +1,45 @@
 "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.ModalOverlap = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
-const react_1 = __importStar(require("react"));
-const top_bar_1 = require("../top-bar");
-const utils_1 = require("../top-bar/utils");
-const bottom_bar_1 = require("../bottom-bar");
+exports.ModalBody = ModalBody;
+exports.ModalOverlap = ModalOverlap;
+exports.ModalBottomGap = ModalBottomGap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
 const viewport_1 = require("../context/viewport");
-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 Элемент.
- */
-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;
+const modal_m_scss_1 = __importDefault(require("./modal.m.scss"));
+const cx = bind_1.default.bind(modal_m_scss_1.default);
 /**
  * Основной контент окна.
  * @param props Свойства.
  * @return Элемент.
  */
-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)));
+function ModalBody({ children, className, rootRef, viewportRef, viewportProps, withScrollDisable = false, scrollDisableOptions, 'data-testid': testId = 'modal-body', ...restProps }) {
+    const viewportInnerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(viewportRef, () => viewportInnerRef.current);
+    // ВАЖНО: не смотря на то что есть возможность задать viewportRef оставляем хук здесь
+    // потому что через портал с рефами работать не получится а useState не так удобен
+    (0, page_scroll_lock_1.usePageScrollLock)(viewportInnerRef, { lockEnabled: withScrollDisable, ...scrollDisableOptions });
+    return ((0, jsx_runtime_1.jsx)(viewport_1.ViewportContext.Provider, { value: viewportInnerRef, children: (0, jsx_runtime_1.jsx)(custom_scrollbar_1.CustomScrollbar, { ...restProps, "data-testid": testId, rootRef: rootRef, viewportRef: viewportInnerRef, viewportProps: viewportProps, className: cx('body', className), overflow: { x: 'hidden', y: 'scroll' }, children: children }) }));
 }
-exports.ModalBody = ModalBody;
 /**
- * Футер окна.
+ * Контент который будет выводится поверх окна с абсолютным позиционированием.
  * @param props Свойства.
  * @return Элемент.
  */
-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) }));
+function ModalOverlap({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('overlap'), children: children });
 }
-exports.ModalFooter = ModalFooter;
 /**
- * Контент который будет выводится поверх окна с абсолютным позиционированием.
- * @param props Свойства.
+ * Заглушка для футера по дизайн-гайдам.
  * @return Элемент.
  */
-function ModalOverlap({ children }) {
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+function ModalBottomGap() {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('bottom-gap') });
 }
-exports.ModalOverlap = ModalOverlap;
+//# sourceMappingURL=slots.js.map

package/modal/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../src/modal/slots.tsx"],"names":[],"mappings":";;;;;AAeA,8BAkCC;AAOD,oCAEC;AAMD,wCAEC;;AAlED,iCAA+D;AAC/D,oEAAgE;AAChE,kDAAsD;AACtD,oEAAkE;AAElE,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EACb,iBAAiB,GAAG,KAAK,EACzB,oBAAoB,EACpB,aAAa,EAAE,MAAM,GAAG,YAAY,EACpC,GAAG,SAAS,EACG;IACf,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEtD,IAAA,2BAAmB,EAAC,WAAW,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAyB,CAAC,CAAC;IAEnF,qFAAqF;IACrF,kFAAkF;IAClF,IAAA,oCAAiB,EAAC,gBAAgB,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC,CAAC;IAEjG,OAAO,CACL,uBAAC,0BAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAC/C,uBAAC,kCAAe,OACV,SAAS,iBACA,MAAM,EACnB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,EAC7B,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAChC,QAAQ,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,YAErC,QAAQ,GACO,GACO,CAC5B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAA4B;IACjE,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;AACzD,CAAC;AAED;;;GAGG;AACH,SAAgB,cAAc;IAC5B,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,GAAI,CAAC;AAC9C,CAAC"}

package/modal/types.d.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { WithTestId } from '../types';
+import type { ModalOverlayProps } from '../modal-overlay';
+import type { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export type ModalSize = 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+export interface ModalStyle extends CSSProperties {
+    '--modal-width'?: string;
+    '--modal-height'?: string;
+    '--modal-max-height'?: string;
+    '--modal-min-height'?: string;
+    '--modal-border-radius'?: string;
+    '--modal-overlay-padding'?: string;
+}
+export interface ModalProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Содержимое компонента. */
+    children?: ReactNode;
+    /** Размер окна. */
+    size?: ModalSize | 'unset';
+    /** Скругления углов. */
+    rounds?: 's' | 'm' | 'unset';
+    /** Стили. */
+    style?: ModalStyle;
+    /** Будет вызвана при закрытии окна. */
+    onClose?: () => void;
+    /** Свойства компонента ModalOverlay. */
+    overlayProps?: ModalOverlayProps;
+    /** Нужно ли применять стили для flex-раскладки. */
+    flexLayout?: boolean;
+}
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement>, WithPageScrollLock, WithTestId {
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Реф внутреннего элемента с прокруткой. */
+    viewportRef?: Ref<HTMLDivElement>;
+    /** Свойства внутреннего элемента с прокруткой. */
+    viewportProps?: HTMLAttributes<HTMLDivElement>;
+}

package/modal/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/modal/types.ts"],"names":[],"mappings":""}

package/modal/utils.d.ts

@@ -1,8 +1,9 @@
-/// <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'];
-}>;
+import type { ModalProps } from './types';
+/**
+ * Вернет свойства Modal для формирования.
+ * @param config Настройки.
+ * @param config.size Размер на desktop-разрешениях.
+ * @param config.overlayProps Опции overlayProps.
+ * @return Свойства Modal.
+ */
+export declare function getResponsiveModalProps(config: Pick<ModalProps, 'size' | 'overlayProps'>): ModalProps;

package/modal/utils.js

@@ -1,5 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalContext = void 0;
-const react_1 = require("react");
-exports.ModalContext = (0, react_1.createContext)({});
+exports.getResponsiveModalProps = getResponsiveModalProps;
+const bind_1 = __importDefault(require("classnames/bind"));
+const utils_m_scss_1 = __importDefault(require("./utils.m.scss"));
+const cx = bind_1.default.bind(utils_m_scss_1.default);
+/**
+ * Вернет свойства Modal для формирования.
+ * @param config Настройки.
+ * @param config.size Размер на desktop-разрешениях.
+ * @param config.overlayProps Опции overlayProps.
+ * @return Свойства Modal.
+ */
+function getResponsiveModalProps(config) {
+    const { size, overlayProps } = config;
+    return {
+        size: 'unset',
+        rounds: 'unset',
+        // ВАЖНО: накидываем класс именно на ModalOverlay так как размер влияет и на него в том числе
+        overlayProps: {
+            ...overlayProps,
+            className: cx(`size-${size}`, overlayProps?.className),
+        },
+    };
+}
+//# sourceMappingURL=utils.js.map

package/modal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/modal/utils.ts"],"names":[],"mappings":";;;;;AAaA,0DAeC;AA3BD,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;;;GAMG;AACH,SAAgB,uBAAuB,CACrC,MAAiD;IAEjD,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC;IAEtC,OAAO;QACL,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,OAAO;QAEf,6FAA6F;QAC7F,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,SAAS,EAAE,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,YAAY,EAAE,SAAS,CAAC;SACvD;KACF,CAAC;AACJ,CAAC"}