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

package/masked-input/hook.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputMask = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const on_1 = require("../helpers/on");
+const utils_1 = require("@krutoo/input-mask/dist/dom/utils");
+const utils_2 = require("./utils");
+/**
+ * Хук для задания маски для поля ввода текста.
+ * @todo Возможно стоит перенести в `@krutoo/input-mask`.
+ * @param props Опции.
+ * @return Интерфейс работы с маской.
+ */
+function useInputMask({ maskOptions: maskOptionsProp, value, defaultValue, }) {
+    // запоминаем опции тк RegExp - объект и при использовании литерала он будет каждый раз новым
+    const maskOptions = (0, react_1.useMemo)(() => ({
+        mask: maskOptionsProp.mask,
+        pattern: new RegExp(maskOptionsProp.pattern),
+        placeholder: maskOptionsProp.placeholder,
+    }), [maskOptionsProp.mask, maskOptionsProp.pattern, maskOptionsProp.placeholder]);
+    const input = (0, react_1.useRef)(null);
+    const [initialValue] = (0, react_1.useState)(defaultValue);
+    // mask options change: init new store
+    const createStore = (0, react_1.useCallback)(() => {
+        var _a;
+        const newStore = (0, utils_2.createInputMaskStore)(maskOptions);
+        newStore.dispatch(utils_2.actions.manualChange({ value: (_a = value !== null && value !== void 0 ? value : initialValue) !== null && _a !== void 0 ? _a : '' }));
+        return newStore;
+    }, [maskOptions, value, initialValue]);
+    const store = (0, react_1.useMemo)(createStore, [maskOptions]);
+    // ВАЖНО: состояние нужно для того, чтобы вызывать render при изменении состояния хранилища
+    // ВАЖНО: используем именно store.getState(), тк reducer может вернуть состояние без изменений
+    const [, setState] = (0, react_1.useState)(() => store.getState());
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const offList = [
+            store.subscribe(() => {
+                setState(store.getState());
+                if (input.current) {
+                    utils_1.State.applyDiff(store.getState(), input.current);
+                }
+            }),
+            (0, on_1.on)(document, 'selectionchange', () => {
+                if (input.current && input.current === document.activeElement) {
+                    store.dispatch(utils_2.actions.inputSelectionChange({ input: input.current }));
+                }
+            }),
+        ];
+        return () => offList.forEach(fn => fn());
+    }, [store]);
+    // value prop change: update state
+    const onValuePropChange = (0, react_1.useCallback)(() => {
+        if (typeof value !== 'undefined' &&
+            value !== utils_1.Value.toClean(maskOptions, store.getState().value)) {
+            store.dispatch(utils_2.actions.manualChange({ value }));
+        }
+    }, [value, store, maskOptions]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(onValuePropChange, [value]);
+    // input change: update state
+    const onChange = (0, react_1.useCallback)(event => {
+        store.dispatch(utils_2.actions.inputChange({ input: event.target }));
+    }, [store]);
+    return {
+        store,
+        bind: {
+            ref: input,
+            value: store.getState().value,
+            onChange,
+        },
+    };
+}
+exports.useInputMask = useInputMask;

package/masked-input/index.d.ts

@@ -0,0 +1,5 @@
+import type { MaskedInputProps, MaskData, UseInputMaskOptions, UseInputMaskResult } from './types';
+import { MaskedInput } from './masked-input';
+import { useInputMask } from './hook';
+export type { MaskedInputProps, MaskData, UseInputMaskOptions, UseInputMaskResult };
+export { MaskedInput, useInputMask };

package/masked-input/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputMask = exports.MaskedInput = void 0;
+const masked_input_1 = require("./masked-input");
+Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return masked_input_1.MaskedInput; } });
+const hook_1 = require("./hook");
+Object.defineProperty(exports, "useInputMask", { enumerable: true, get: function () { return hook_1.useInputMask; } });

package/masked-input/masked-input.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { MaskedInputProps } from './types';
+/**
+ * Поле ввода текста по маске.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MaskedInput({ mask, placeholder, pattern, value, defaultValue, baseInputProps, onFocus, onChange, onBlur, inputRef, ...props }: MaskedInputProps): JSX.Element;

package/masked-input/masked-input.js

@@ -0,0 +1,73 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskedInput = void 0;
+const react_1 = __importStar(require("react"));
+const input_1 = require("../input");
+const utils_1 = require("@krutoo/input-mask/dist/dom/utils");
+const hook_1 = require("./hook");
+/**
+ * Поле ввода текста по маске.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MaskedInput(_a) {
+    var _b;
+    var { mask, placeholder = '_', pattern = '\\d', value, defaultValue, baseInputProps, onFocus, onChange, onBlur, inputRef } = _a, props = __rest(_a, ["mask", "placeholder", "pattern", "value", "defaultValue", "baseInputProps", "onFocus", "onChange", "onBlur", "inputRef"]);
+    const { store, bind } = (0, hook_1.useInputMask)({
+        value,
+        defaultValue,
+        maskOptions: { mask, pattern, placeholder },
+    });
+    (0, react_1.useImperativeHandle)(inputRef, () => bind.ref.current);
+    const getData = (0, react_1.useCallback)(() => ({
+        value: store.getState().value,
+        cleanValue: utils_1.Value.toClean({ mask, placeholder }, store.getState().value),
+        completed: store.getState().value.length === mask.length,
+    }), [store, mask, placeholder]);
+    return (react_1.default.createElement(input_1.Input, Object.assign({}, props, { baseInputProps: Object.assign(Object.assign({}, baseInputProps), { restPlaceholder: (_b = baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.restPlaceholder) !== null && _b !== void 0 ? _b : {
+                value: mask.slice(store.getState().value.length),
+                shiftValue: store.getState().value,
+            } }), inputRef: bind.ref, value: bind.value, onFocus: event => {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, getData());
+        }, onChange: event => {
+            bind.onChange(event);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, getData());
+        }, onBlur: event => {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, getData());
+        } })));
+}
+exports.MaskedInput = MaskedInput;

package/masked-input/types.d.ts

@@ -0,0 +1,51 @@
+import type { Action, Store } from 'redux';
+import type { InputState } from '@krutoo/input-mask/dist/core';
+import type { InputProps } from '../input';
+import type { ChangeEvent, ChangeEventHandler, FocusEvent, RefObject } from 'react';
+export interface InputMaskReactOptions {
+    /** Строковое представление маски. */
+    mask: string;
+    /** Символ, который в маске используется как обозначение вводимого места. */
+    placeholder: string;
+    /** Строковое представление регулярного выражения только доступных для ввода символов. */
+    pattern: string;
+}
+export interface MaskedInputProps extends Omit<InputProps, 'onFocus' | 'onChange' | 'onBlur'>, Pick<InputMaskReactOptions, 'mask'>, Partial<Omit<InputMaskReactOptions, 'mask'>> {
+    /** Сработает при фокусе. Вторым аргументом получит данные поля с маской. */
+    onFocus?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Сработает при вводе. Вторым аргументом получит данные поля с маской. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Сработает при "blur". Вторым аргументом получит данные поля с маской. */
+    onBlur?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
+}
+export interface MaskData {
+    /** Значение в поле. */
+    value: string;
+    /** Значение, очищенное от маски. */
+    cleanValue: string;
+    /** Заполнено ли значение по маске полностью. */
+    completed: boolean;
+}
+export interface UseInputMaskOptions {
+    maskOptions: InputMaskReactOptions;
+    value?: string;
+    defaultValue?: string;
+}
+export interface UseInputMaskResult {
+    /** Хранилище состояния поля. */
+    store: Store<InputState>;
+    /** Свойства, которые необходимо применить к элементу поля. */
+    bind: {
+        ref: RefObject<HTMLInputElement>;
+        value: string;
+        onChange: ChangeEventHandler<HTMLInputElement>;
+    };
+}
+export interface ActionCreator<P = never> {
+    (payload: P): Action<string> & {
+        payload: P;
+    };
+    is(action: Action): action is Action<string> & {
+        payload: P;
+    };
+}

package/masked-input/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/masked-input/utils.d.ts

@@ -0,0 +1,15 @@
+import { InputState, ReducerOptions } from '@krutoo/input-mask/dist/core';
+import { Store } from 'redux';
+import { ActionCreator } from './types';
+export declare const actions: {
+    readonly manualChange: ActionCreator<{
+        value: string;
+    }>;
+    readonly inputChange: ActionCreator<{
+        input: HTMLInputElement;
+    }>;
+    readonly inputSelectionChange: ActionCreator<{
+        input: HTMLInputElement;
+    }>;
+};
+export declare function createInputMaskStore(options: ReducerOptions, initialState?: InputState): Store<InputState>;

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;
+  }
+}