@ozen-ui/kit 0.6.0 → 0.8.0

package/Paper/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Paper/index.js",
+	"module": "../__inner__/esm/components/Paper/index.js",
+	"types": "../__inner__/esm/components/Paper/index.d.ts"
+}

package/__inner__/cjs/components/Alert/Alert.css

@@ -1,7 +1,6 @@
 /* stylelint-disable */
 .Alert {
   position: relative;
-  border-radius: var(--border-radius-xs);
   display: flex;
   -moz-column-gap: var(--space-s);
        column-gap: var(--space-s);
@@ -11,8 +10,6 @@
   box-sizing: border-box;
   border-inline-start: 4px solid var(--alert-border-color);
   padding: 16px;
-  box-shadow: var(--shadow-m);
-  background-color: var(--alert-background-color);
 
   font: var(--typography-text-xs-font);
 
@@ -21,14 +18,12 @@
   text-transform: var(--typography-text-xs-text_transform, none);
 }
 .Alert_color_light {
-      --alert-background-color: var(--color-background-main);
       --alert-title-text-color: var(--color-content-primary);
       --alert-body-text-color: var(--color-content-secondary);
       --alert-icon-color: var(--color-content-primary);
       --alert-close-button-color: var(--color-background-main-inverse);
     }
 .Alert_color_dark {
-      --alert-background-color: var(--color-background-main-inverse);
       --alert-title-text-color: var(--color-content-primary-inverse);
       --alert-body-text-color: var(--color-content-tertiary);
       --alert-icon-color: var(--color-content-primary-inverse);

package/__inner__/cjs/components/Alert/Alert.js

@@ -8,6 +8,7 @@ var icons_1 = require("@ozen-ui/icons");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var IconButton_1 = require("../IconButton");
+var Paper_1 = require("../Paper");
 var constants_1 = require("./constants");
 exports.cnAlert = (0, classname_1.cn)('Alert');
 exports.alertStatusVariant = [
@@ -43,9 +44,9 @@ exports.Alert = (0, react_1.forwardRef)(function (inProps, ref) {
         }
         return react_1["default"].cloneElement(actionProp, actionProps);
     }, [actionProp]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnAlert)({ status: status, hasCloseButton: !!onClose, color: color }, [
+    return (react_1["default"].createElement(Paper_1.Paper, tslib_1.__assign({ role: "alert", radius: "xs", shadow: "m", background: color === 'light' ? 'main' : 'main-inverse', className: (0, exports.cnAlert)({ status: status, hasCloseButton: !!onClose, color: color }, [
             className,
-        ]), role: "alert" }, otherProps, { ref: ref }),
+        ]) }, otherProps, { ref: ref }),
         showIcon && (react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Icon') }, matchStatusToIcon[status])),
         react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Content') },
             react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Title') }, title),

package/__inner__/cjs/components/Breadcrumbs/Breadcrumbs.css

@@ -12,3 +12,7 @@
   display: flex;
   align-items: center;
 }
+
+.Breadcrumbs-Item .Button-Label {
+  color: var(--color-content-secondary);
+}

package/__inner__/cjs/components/Card/Card.css

@@ -1,26 +1,21 @@
 .Card {
   position: relative;
-  background-color: var(--card-background-color);
   padding: var(--card-padding);
   cursor: var(--card-cursor-style);
-  border-radius: var(--card-border-radius);
   transition: var(--transition-default);
   box-sizing: border-box;
 }
 
   .Card_size_s {
       --card-padding: var(--space-l);
-      --card-border-radius: var(--border-radius-xs);
     }
 
   .Card_size_m {
       --card-padding: var(--space-xl);
-      --card-border-radius: var(--border-radius-m);
     }
 
   .Card_size_l {
       --card-padding: var(--space-2xl);
-      --card-border-radius: var(--border-radius-l);
     }
 
   .Card_interactive {
@@ -32,8 +27,9 @@
         position: absolute;
         inset: 0;
         pointer-events: none;
-        border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-        border-radius: var(--card-border-radius);
+        border: var(--card-border-width) var(--card-border-style)
+          var(--card-border-color);
+        border-radius: var(--paper-border-radius);
         transition: var(--transition-default);
       }
 
@@ -61,14 +57,6 @@
       --card-border-style: dashed;
     }
 
-  .Card_backgroundColor_standard {
-      --card-background-color: var(--color-background-main);
-    }
-
-  .Card_backgroundColor_selected {
-      --card-background-color: var(--color-background-action-light);
-    }
-
   .Card_interactive.Card_borderColor_standard:hover {
       --card-border-color: var(--color-border-secondary-hover);
     }
@@ -85,12 +73,6 @@
       --card-border-color: var(--color-border-action-pressed);
     }
 
-  .Card_disabled {
-    --card-background-color: var(--color-background-disabled);
-    --card-border-color: var(--color-border-disabled);
-    pointer-events: none;
-  }
-
   .Card:focus {
     outline: 0;
     box-shadow: var(--shadow-outline-focused);
@@ -99,3 +81,9 @@
   .Card:focus:not(:focus-visible) {
     box-shadow: none;
   }
+
+.Card[aria-disabled='true'] {
+  --card-border-color: var(--color-border-disabled);
+  background-color: var(--color-background-disabled);
+  pointer-events: none;
+}

package/__inner__/cjs/components/Card/Card.d.ts

@@ -1,7 +1,6 @@
 import './Card.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
-import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ReactNode, ElementType } from 'react';
+import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const cnCard: import("@bem-react/classname").ClassNameFormatter;
 export declare const cardSizeVariant: readonly ["s", "m", "l"];
 export declare const cardBorderWidthVariant: readonly ["none", "s", "m"];
@@ -34,5 +33,5 @@ export type CardBaseProps = {
     className?: string;
     'data-testid'?: string;
 };
-export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<CardBaseProps, As>;
+export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<CardBaseProps, As>;
 export declare const Card: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CardBaseProps, "div">;

package/__inner__/cjs/components/Card/Card.js

@@ -7,18 +7,28 @@ var react_1 = tslib_1.__importDefault(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Paper_1 = require("../Paper");
 exports.cnCard = (0, classname_1.cn)('Card');
 exports.cardSizeVariant = ['s', 'm', 'l'];
 exports.cardBorderWidthVariant = ['none', 's', 'm'];
 exports.cardBorderVariant = ['solid', 'dashed'];
 exports.cardBorderColorVariant = ['standard', 'selected'];
 exports.cardBackgroundColorVariant = ['standard', 'selected'];
+var matchBorderRadiusPaperToCard = {
+    s: 'xs',
+    m: 's',
+    l: 'l'
+};
+var matchBackgroundColorPaperToCard = {
+    selected: 'action-light',
+    standard: 'main'
+};
 exports.Card = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Card' });
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = tslib_1.__rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (react_1["default"].createElement(Tag, tslib_1.__assign({}, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (react_1["default"].createElement(Paper_1.Paper, tslib_1.__assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor
         })), [className]) }), children));

package/__inner__/cjs/components/Dialog/Dialog.css

@@ -13,8 +13,6 @@
     max-inline-size: var(--modal-width);
     /* stylelint-disable-next-line plugin/use-logical-units */
     max-block-size: calc(100vh - 64px);
-    border-radius: var(--border-radius-m);
-    box-shadow: var(--shadow-l);
   }
 .Dialog-InnerContainer {
     display: flex;

package/__inner__/cjs/components/Dialog/Dialog.d.ts

@@ -28,4 +28,24 @@ export type DialogProps = {
     /** Кастомный класс контейнера диалогового окна */
     className?: string;
 } & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Dialog: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open: boolean;
+    /** Содержимое диалогового окна */
+    children: React.ReactNode;
+    /** Устанавливает размер типографики и отступов в диалоговом окне */
+    size?: "s" | "l" | undefined;
+    /** Вариант диалогового окна */
+    variant?: "small" | "medium" | "large" | "fullsize" | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Свойства кнопки закрытия диалогового окна */
+    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Признак по которому кнопка закрытия диалогового окна будет скрыта */
+    hideCloseButton?: boolean | undefined;
+    /** Кастомный класс контейнера диалогового окна */
+    className?: string | undefined;
+} & Omit<ModalProps, "className" | "children" | "open" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Drawer/Drawer.css

@@ -15,7 +15,6 @@
     border: none;
     inset-block-start: auto;
     inset-inline-start: auto;
-    box-shadow: var(--shadow-m);
     transform: none;
     padding: 0;
     outline: none;

package/__inner__/cjs/components/Drawer/Drawer.d.ts

@@ -32,4 +32,26 @@ export type DrawerProps = {
     /** Кастомный класс контейнера шторки */
     className?: string;
 } & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
-export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Drawer: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open?: boolean | undefined;
+    /** Вариант представления шторки */
+    variant?: "medium" | "large" | "little" | undefined;
+    /** Устанавливает размер типографики и отступов в шторке */
+    size?: "s" | "l" | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Содержимое шторки */
+    children?: React.ReactNode;
+    /** Расположение шторки */
+    placement?: "left" | "right" | undefined;
+    /** Признак по которому кнопка закрытия шторки будет скрыта */
+    hideCloseButton?: boolean | undefined;
+    /** Свойства кнопки закрытия шторки */
+    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Кастомный класс контейнера шторки */
+    className?: string | undefined;
+} & Omit<ModalProps, "className" | "children" | "open" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.js

@@ -8,10 +8,11 @@ var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var classname_1 = require("../../../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
 var List_1 = require("../../../List");
+var constants_1 = require("../../../List/constants");
 exports.cnMenuItem = (0, classname_1.cn)('MenuItem');
 exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'MenuItem' });
-    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, other = tslib_1.__rest(props, ["children", "selected", "value", "label", "autoFocus", "className"]);
+    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = tslib_1.__rest(props, ["children", "selected", "value", "label", "autoFocus", "className", "as"]);
     var innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         var _a;
@@ -19,6 +20,6 @@ exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus]);
-    return (react_1["default"].createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem" }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
+    return (react_1["default"].createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/__inner__/cjs/components/Modal/Modal.css

@@ -1,34 +1,29 @@
-.no-scroll {
-  overflow: hidden;
-}
-
 .Modal {
   position: fixed;
   z-index: var(--z-index-modal);
   inset: 0;
 }
 
-.Modal:not(.Modal_hasBackdrop) {
+  .Modal:not(.Modal_hasBackdrop) {
     pointer-events: none;
   }
 
-.Modal:not(.Modal_hasBackdrop) .Modal-Window {
+  .Modal:not(.Modal_hasBackdrop) .Modal-Window {
       pointer-events: auto;
     }
 
-.Modal-Window {
+  .Modal-Window {
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     inline-size: 400px;
-    background-color: var(--color-background-main);
     box-sizing: border-box;
     border: 2px solid black;
     padding: var(--space-2xl);
   }
 
-.Modal_hidden {
+  .Modal_hidden {
     visibility: hidden;
   }
 
@@ -39,7 +34,8 @@
 
 .Modal_animation-enter-active .Modal-Window, .Modal_animation-appear-active .Modal-Window {
       opacity: 1;
-      transition: opacity var(--transition-slow),
+      transition:
+        opacity var(--transition-slow),
         transform var(--transition-slow);
       transform: translate(-50%, -50%) translateY(0);
     }
@@ -58,7 +54,8 @@
 .Modal_animation-exit-active .Modal-Window {
       opacity: 0;
       visibility: visible;
-      transition: opacity var(--transition-slow),
+      transition:
+        opacity var(--transition-slow),
         transform var(--transition-slow);
       transform: translate(-50%, -50%) translateY(100px);
     }

package/__inner__/cjs/components/Modal/Modal.d.ts

@@ -1,9 +1,10 @@
 import './Modal.css';
 import React from 'react';
-import type { ReactNode, ComponentPropsWithRef } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import { BackdropProps } from '../Backdrop';
-import { PortalProps, PortalRef } from '../Portal';
+import { type BackdropProps } from '../Backdrop';
+import { type PaperProps } from '../Paper';
+import { type PortalProps, type PortalRef } from '../Portal';
 export declare const cnModal: import("@bem-react/classname").ClassNameFormatter;
 export type ModalProps = {
     /** Признак по которому компонент будет представлен */
@@ -29,6 +30,12 @@ export type ModalProps = {
     hideBackdrop?: boolean;
     /** Если {true} предотвращает размонтирование компонента при событии закрыть */
     keepMounted?: boolean;
+    /** Если {true} отключает блокировку прокрутки основного экрана приложения */
+    disableScrollLock?: boolean;
+    /** Если {true} отключает закрытие окна при клике за его пределами */
+    disableClickOutside?: boolean;
+    /** Если {true} отключает закрытие окна при нажатии на клавишу ESC */
+    disableEscapeKeyDown?: boolean;
     /** Свойства компонента Backdrop (подложка) */
     backdropProps?: BackdropProps & {
         'data-testid'?: string;
@@ -38,7 +45,7 @@ export type ModalProps = {
         'data-testid'?: string;
     };
     /** Свойства окна с контентом */
-    windowProps?: ComponentPropsWithRef<'div'> & {
+    windowProps?: PaperProps & {
         'data-testid'?: string;
     };
     /** Кастомный класс контейнера модального окна */
@@ -47,6 +54,68 @@ export type ModalProps = {
     'data-testid'?: string;
     /** Контейнер для монтирования всплывающего окна */
     container?: PortalProps['container'];
+    /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
+    ignoreClickOutsideRefs?: Array<RefObject<HTMLElement>>;
 } & PortalProps;
 export type ModalRef = PortalRef;
-export declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Modal: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open?: boolean | undefined;
+    /** Содержимое модального окна */
+    children: ReactNode;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    onEnter?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после завершения
+     * перехода компонента в состояние представлен */
+    onEntered?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExit?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после
+     * завершения перехода в состояние не представлен */
+    onExited?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Если {true} скрывает подложку */
+    hideBackdrop?: boolean | undefined;
+    /** Если {true} предотвращает размонтирование компонента при событии закрыть */
+    keepMounted?: boolean | undefined;
+    /** Если {true} отключает блокировку прокрутки основного экрана приложения */
+    disableScrollLock?: boolean | undefined;
+    /** Если {true} отключает закрытие окна при клике за его пределами */
+    disableClickOutside?: boolean | undefined;
+    /** Если {true} отключает закрытие окна при нажатии на клавишу ESC */
+    disableEscapeKeyDown?: boolean | undefined;
+    /** Свойства компонента Backdrop (подложка) */
+    backdropProps?: (import("../Backdrop").BackdropBaseProps & {
+        as?: "div" | undefined;
+    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, keyof import("../Backdrop").BackdropBaseProps> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Свойства по управлению анимацией перехода */
+    transitionProps?: (Partial<CSSTransitionProps<undefined>> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Свойства окна с контентом */
+    windowProps?: (import("../Paper").PaperBaseProps & {
+        as?: "div" | undefined;
+    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, keyof import("../Paper").PaperBaseProps> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Кастомный класс контейнера модального окна */
+    className?: string | undefined;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string | undefined;
+    /** Контейнер для монтирования всплывающего окна */
+    container?: PortalProps['container'];
+    /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
+    ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[] | undefined;
+} & import("../Portal").PortalBaseProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Modal/Modal.js

@@ -13,23 +13,26 @@ var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var Backdrop_1 = require("../Backdrop");
 var Portal_1 = require("../Portal");
+var components_1 = require("./components");
 var index_1 = require("./index");
 exports.cnModal = (0, classname_1.cn)('Modal');
 exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "keepMounted", "hideBackdrop", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className"]);
+    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = tslib_1.__rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
     var hasBackdrop = !hideBackdrop;
-    var hasScrollOnBody = (0, react_1.useRef)(null);
     var modalInnerRef = (0, react_1.useRef)(null);
     var focusedElement = (0, react_1.useRef)(null);
     var isClickOutSide = (0, react_1.useRef)(null);
-    var _e = tslib_1.__read((0, react_1.useState)(false), 2), openState = _e[0], setOpenState = _e[1];
-    var _f = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _f.isTop, refsClickOutside = _f.refsClickOutside;
+    var _h = tslib_1.__read((0, react_1.useState)(false), 2), openState = _h[0], setOpenState = _h[1];
+    var _j = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _j.isTop, refsClickOutside = _j.refsClickOutside;
     (0, useClickOutside_1.useClickOutside)({
-        refs: tslib_1.__spreadArray([modalInnerRef], tslib_1.__read(refsClickOutside), false),
+        refs: tslib_1.__spreadArray(tslib_1.__spreadArray([
+            modalInnerRef
+        ], tslib_1.__read(refsClickOutside), false), tslib_1.__read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
             isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
+        },
+        active: !disableClickOutside
     });
     (0, react_1.useEffect)(function () {
         var _a;
@@ -65,21 +68,11 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
             }
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
-        active: isTop
+        active: isTop && !disableEscapeKeyDown
     });
-    // Блокирует прокрутку основного окна приложения
-    (0, react_1.useEffect)(function () {
-        if (openState) {
-            hasScrollOnBody.current = document.body.classList.contains('no-scroll');
-            document.body.classList.add('no-scroll');
-        }
-        else if (!hasScrollOnBody.current) {
-            document.body.classList.remove('no-scroll');
-        }
-    }, [openState]);
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnModal)({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
-        react_1["default"].createElement(Portal_1.Portal, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, ref]) }),
-            !hideBackdrop && (react_1["default"].createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1 }, backdropProps, { onClick: onClose, open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
-            react_1["default"].createElement("div", tslib_1.__assign({}, windowProps, { className: (0, exports.cnModal)('Window', [windowProps === null || windowProps === void 0 ? void 0 : windowProps.className]), tabIndex: -1, ref: (0, useMultiRef_1.useMultiRef)([trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+        react_1["default"].createElement(Portal_1.Portal, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
+            !hideBackdrop && (react_1["default"].createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1, onClick: onClose }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
+            react_1["default"].createElement(components_1.ModalConsumer, tslib_1.__assign({}, windowProps, { open: openState && !disableScrollLock, ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 exports.Modal.displayName = 'Modal';

package/__inner__/cjs/components/Modal/components/ModalConsumer.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaperProps } from '../../Paper';
+export declare const ModalConsumer: FC<PaperProps & {
+    open: boolean;
+}>;

package/__inner__/cjs/components/Modal/components/ModalConsumer.js

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+exports.ModalConsumer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useLockBodyScroll_1 = require("../../../hooks/useLockBodyScroll");
+var Paper_1 = require("../../Paper");
+var index_1 = require("../index");
+exports.ModalConsumer = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, open = _a.open, other = tslib_1.__rest(_a, ["children", "className", "open"]);
+    // Блокирует прокрутку основного окна приложения
+    (0, useLockBodyScroll_1.useLockBodyScroll)(open);
+    return (react_1["default"].createElement(Paper_1.Paper, tslib_1.__assign({ radius: "s", background: "main" }, other, { className: (0, index_1.cnModal)('Window', [className]), tabIndex: -1, ref: ref }), children));
+});
+exports.ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/cjs/components/Modal/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ModalConsumer';

package/__inner__/cjs/components/Modal/components/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ModalConsumer"), exports);

package/__inner__/cjs/components/Paper/Paper.css

@@ -0,0 +1,44 @@
+.Paper {
+  --paper-background-color: none;
+  --paper-border-radius: none;
+  --paper-box-shadow: none;
+  background-color: var(--paper-background-color);
+  border-radius: var(--paper-border-radius);
+  box-shadow: var(--paper-box-shadow);
+}
+
+  .Paper_radius_xs {
+      --paper-border-radius: var(--border-radius-xs);
+    }
+
+  .Paper_radius_s {
+      --paper-border-radius: var(--border-radius-m);
+    }
+
+  .Paper_radius_l {
+      --paper-border-radius: var(--border-radius-l);
+    }
+
+  .Paper_background_main {
+      --paper-background-color: var(--color-background-main);
+    }
+
+  .Paper_background_main-inverse {
+      --paper-background-color: var(--color-background-main-inverse);
+    }
+
+  .Paper_background_action-light {
+      --paper-background-color: var(--color-background-action-light);
+    }
+
+  .Paper_background_accent {
+      --paper-background-color: var(--color-accent-main);
+    }
+
+  .Paper_shadow_m {
+      --paper-box-shadow: var(--shadow-m);
+    }
+
+  .Paper_shadow_l {
+      --paper-box-shadow: var(--shadow-l);
+    }

package/__inner__/cjs/components/Paper/Paper.d.ts

@@ -0,0 +1,19 @@
+import './Paper.css';
+import { type ComponentRef, type ElementType } from 'react';
+import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+export declare const PAPER_DEFAULT_TAG = "div";
+export declare const paperRadiusVariant: readonly ["xs", "s", "l"];
+export type PaperRadiusVariant = (typeof paperRadiusVariant)[number];
+export declare const paperBackgroundVariant: readonly ["main", "main-inverse", "action-light", "accent"];
+export type PaperBackgroundVariant = (typeof paperBackgroundVariant)[number];
+export declare const paperShadowVariant: readonly ["m", "l"];
+export type PaperShadowVariant = (typeof paperShadowVariant)[number];
+export type PaperBaseProps = {
+    radius?: PaperRadiusVariant;
+    background?: PaperBackgroundVariant;
+    shadow?: PaperShadowVariant;
+};
+export type PaperProps<As extends ElementType = typeof PAPER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PaperBaseProps, As>;
+export type PaperRef = ComponentRef<typeof PAPER_DEFAULT_TAG>;
+export declare const cnPaper: import("@bem-react/classname").ClassNameFormatter;
+export declare const Paper: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PaperBaseProps, "div">;