@ozen-ui/kit 0.7.0 → 0.9.0

package/__inner__/cjs/components/Input/constants.d.ts

@@ -0,0 +1 @@
+export declare const INPUT_DEFAULT_SIZE = "m";

package/__inner__/cjs/components/Input/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+exports.INPUT_DEFAULT_SIZE = void 0;
+exports.INPUT_DEFAULT_SIZE = 'm';

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

@@ -1 +1,2 @@
 export * from './Input';
+export * from './types';

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

@@ -2,3 +2,4 @@
 exports.__esModule = true;
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Input"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Input/types.d.ts

@@ -0,0 +1,71 @@
+import type { ComponentPropsWithRef, ComponentRef, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldIconProps } from '../FieldIcon';
+import type { FieldLabelProps } from '../FieldLabel';
+export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
+export type InputTypeVariant = (typeof inputTypeVariant)[number];
+export type InputSizeVariant = FormElementSizeVariant;
+type InputPropsDeprecated = {
+    /**
+     * deprecated
+     * Ссылка на FieldLabel
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /** deprecated
+     * Ссылка на элемент input
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+};
+type InputElement = ComponentPropsWithRef<'input'>;
+export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT_TAG>, 'size' | 'onChange'> & {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: InputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Атрибут type для элемента input */
+    type?: InputTypeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Минимальное количество символов разрешенных для ввода */
+    minLength?: InputElement['minLength'];
+    /** Максимальное количество символов разрешенных для ввода */
+    maxLength?: InputElement['maxLength'];
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Выбранное значение */
+    value?: InputElement['value'];
+    /** Значение по умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputElement['defaultValue'];
+    /** Обработчик события на изменение значения поля */
+    onChange?: InputElement['onChange'];
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+} & InputPropsDeprecated;
+export {};

package/__inner__/cjs/components/Input/types.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.inputTypeVariant = void 0;
+exports.inputTypeVariant = [
+    'number',
+    'date',
+    'datetime-local',
+    'time',
+    'text',
+    'tel',
+    'password',
+    'email',
+];

package/__inner__/cjs/components/InputNumber/InputNumber.css

@@ -1,9 +1,10 @@
 /* stylelint-disable */
 .InputNumber {
-  --number-input-color: var(--color-content-primary);
-  --number-input-background-color: var(--color-background-primary);
-  --number-input-border-width: var(--border-width-s);
-  --number-input-border-color: var(--color-border-main);
+  --textfield-color: var(--color-content-primary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   cursor: text;
   display: inline-flex;
   vertical-align: top;
@@ -12,31 +13,17 @@
 .InputNumber > * {
     cursor: text;
   }
-.InputNumber-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--number-input-border-width) solid
-      var(--number-input-border-color);
-    transition: border var(--transition-default);
-  }
 .InputNumber-Body {
     position: relative;
     display: flex;
-    -moz-column-gap: var(--number-input-input-gap);
-         column-gap: var(--number-input-input-gap);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
     align-items: center;
     box-sizing: border-box;
-    padding: 0 4px 0 var(--number-input-gutter-x);
-    background-color: var(--number-input-background-color);
+    padding: 0 4px 0 var(--textfield-gutter-x);
+    background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--number-input-color);
+    color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
   }
 .InputNumber-FieldContainer {
@@ -53,10 +40,9 @@
     inline-size: 100%;
     padding: 0;
     background: none;
-    color: var(--number-input-color);
+    color: var(--textfield-color);
     box-sizing: border-box;
-    block-size: var(--number-input-input-height);
-    font: var(--number-input-input-font);
+    block-size: var(--textfield-input-height);
   }
 .InputNumber-Field::placeholder {
       opacity: 1;
@@ -65,7 +51,7 @@
 .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-Field:-webkit-autofill:focus {
-      box-shadow: 0 0 0 1000px var(--number-input-background-color) inset !important;
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
       background-color: transparent !important;
       -webkit-text-fill-color: var(--color-content-info-dark);
     }
@@ -80,59 +66,59 @@
     flex-direction: column;
   }
 .InputNumber_size_2xs {
-      --number-input-gutter-x: 12px;
-      --number-input-input-height: 40px;
-      --number-input-input-padding: 4px 0 4px;
-      --number-input-input-font: var(--typography-text-2xs-font);
-      --number-input-input-gap: var(--space-s);
-      --number-input-button-width: 24px;
-      --number-input-button-height: 16px;
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-padding: 4px 0 4px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-gap: var(--space-s);
+      --textfield-button-width: 24px;
+      --textfield-button-height: 16px;
     }
 .InputNumber_size_2xs .FieldLabel_size_2xs {
         --field-label-top: 12px;
       }
 .InputNumber_size_xs {
-      --number-input-gutter-x: 12px;
-      --number-input-input-height: 40px;
-      --number-input-input-font: var(--typography-text-xs-font);
-      --number-input-input-padding: 19px 0 4px;
-      --number-input-input-gap: var(--space-s);
-      --number-input-button-width: 28px;
-      --number-input-button-height: 16px;
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+      --textfield-input-gap: var(--space-s);
+      --textfield-button-width: 28px;
+      --textfield-button-height: 16px;
     }
 .InputNumber_size_s {
-      --number-input-gutter-x: 16px;
-      --number-input-input-height: 48px;
-      --number-input-input-font: var(--typography-text-s-font);
-      --number-input-input-padding: 21px 0 6px;
-      --number-input-input-gap: var(--space-m);
-      --number-input-button-width: 32px;
-      --number-input-button-height: 20px;
+      --textfield-gutter-x: 16px;
+      --textfield-input-height: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+      --textfield-input-gap: var(--space-m);
+      --textfield-button-width: 32px;
+      --textfield-button-height: 20px;
     }
 .InputNumber_size_m {
-      --number-input-gutter-x: 20px;
-      --number-input-input-height: 56px;
-      --number-input-input-font: var(--typography-text-m-font);
-      --number-input-input-padding: 24px 0 6px;
-      --number-input-input-gap: var(--space-m);
-      --number-input-button-width: 40px;
-      --number-input-button-height: 24px;
+      --textfield-gutter-x: 20px;
+      --textfield-input-height: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+      --textfield-input-gap: var(--space-m);
+      --textfield-button-width: 40px;
+      --textfield-button-height: 24px;
     }
 .InputNumber_size_l {
-      --number-input-gutter-x: 24px;
-      --number-input-input-height: 64px;
-      --number-input-input-font: var(--typography-text-l-font);
-      --number-input-input-padding: 26px 0 6px;
-      --number-input-input-gap: var(--space-l);
-      --number-input-button-width: 48px;
-      --number-input-button-height: 28px;
+      --textfield-gutter-x: 24px;
+      --textfield-input-height: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+      --textfield-input-gap: var(--space-l);
+      --textfield-button-width: 48px;
+      --textfield-button-height: 28px;
     }
 .InputNumber_fullWidth {
     inline-size: 100%;
   }
 .InputNumber_hasLabel .InputNumber-Field {
-      padding: var(--number-input-input-padding);
-      font: var(--number-input-input-font);
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
     }
 .InputNumber_hasLabel .InputNumber-Field::placeholder {
         opacity: 0;
@@ -141,31 +127,31 @@
         opacity: 1;
       }
 .InputNumber:hover {
-    --number-input-border-color: var(--color-border-main-hover);
+    --textfield-border-color: var(--color-border-main-hover);
   }
 .InputNumber_focused,
   .InputNumber_focused:hover {
-    --number-input-border-width: var(--border-width-m);
-    --number-input-background-color: var(--color-background-main);
-    --number-input-border-color: var(--color-border-action);
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
   }
 .InputNumber_error,
   .InputNumber_error.InputNumber:hover,
   .InputNumber_error.InputNumber_focused,
   .InputNumber_error.InputNumber_focused:hover {
-    --number-input-border-color: var(--color-border-error);
+    --textfield-border-color: var(--color-border-error);
   }
 .InputNumber_disabled {
-    --number-input-border-color: var(--color-border-disabled);
-    --number-input-background-color: var(--color-background-disabled);
-    --number-input-color: var(--color-content-secondary);
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
     pointer-events: none;
     cursor: default;
   }
 .IconButton.InputNumber-Increment,
 .IconButton.InputNumber-Decrement {
-  inline-size: var(--number-input-button-width);
-  block-size: var(--number-input-button-height);
+  inline-size: var(--textfield-button-width);
+  block-size: var(--textfield-button-height);
 }
 .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
     pointer-events: none;

package/__inner__/cjs/components/InputNumber/InputNumber.js

@@ -14,6 +14,7 @@ var classname_1 = require("../../utils/classname");
 var FieldHint_1 = require("../FieldHint");
 var FieldIcon_1 = require("../FieldIcon");
 var FieldLabel_1 = require("../FieldLabel");
+var Fieldset_1 = require("../Fieldset");
 var IconButton_1 = require("../IconButton");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
@@ -145,7 +146,7 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
             react_1["default"].createElement("span", { className: (0, exports.cnInputNumber)('Controls') },
                 react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, className: (0, exports.cnInputNumber)('Increment'), icon: icons_1.SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", variant: "ghost" }),
                 react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, icon: icons_1.SortDownIcon, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", variant: "ghost" })),
-            react_1["default"].createElement("fieldset", { className: (0, exports.cnInputNumber)('Fieldset') })),
+            react_1["default"].createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
         react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 exports.InputNumber.displayName = 'InputNumber';

package/__inner__/cjs/components/InputNumber/utils.d.ts

@@ -1,5 +1,5 @@
-import { KeyboardEvent } from 'react';
-import { InputNumberValue, InputNumberCountDirection } from './types';
+import type { KeyboardEvent } from 'react';
+import type { InputNumberValue, InputNumberCountDirection } from './types';
 export declare const isValidValue: (value?: InputNumberValue) => boolean;
 export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const getValue: ({ value, step, min, max, countDirection, }: {

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

@@ -1,5 +1,5 @@
 import './Link.css';
-import { ElementType } from 'react';
+import type { ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { type TypographyBaseProps } from '../Typography';
 export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;

package/__inner__/cjs/components/List/components/ListItem/ListItem.d.ts

@@ -1,6 +1,5 @@
 import './ListItem.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
 export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -1,6 +1,5 @@
 import './ListItemButton.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/List/types.d.ts

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
-import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import { LIST_DEFAULT_TAG } from './constants';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { LIST_DEFAULT_TAG } from './constants';
 export type ListSizeVariant = FormElementSizeVariant;
 export type ListContextValue = {
     size: ListSizeVariant;

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import type { ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';

package/__inner__/cjs/components/Menu/components/MenuList/MenuList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListProps } from '../../../List';
+import type { ListProps } from '../../../List';
 export type MenuListProps = {
     /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
     autoFocus?: boolean;

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

@@ -1,22 +1,18 @@
-.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%;
@@ -27,7 +23,7 @@
     padding: var(--space-2xl);
   }
 
-.Modal_hidden {
+  .Modal_hidden {
     visibility: hidden;
   }
 

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

@@ -1,7 +1,7 @@
 import './Modal.css';
 import React from 'react';
-import type { ReactNode } from 'react';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { ReactNode, RefObject } from 'react';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { type BackdropProps } from '../Backdrop';
 import { type PaperProps } from '../Paper';
 import { type PortalProps, type PortalRef } from '../Portal';
@@ -30,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;
@@ -48,6 +54,8 @@ 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<{
@@ -74,6 +82,12 @@ export declare const Modal: React.ForwardRefExoticComponent<{
     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;
@@ -100,6 +114,8 @@ export declare const Modal: React.ForwardRefExoticComponent<{
     '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

@@ -12,25 +12,27 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var Backdrop_1 = require("../Backdrop");
-var Paper_1 = require("../Paper");
 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;
@@ -66,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(Paper_1.Paper, tslib_1.__assign({ radius: "s", background: "main" }, 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 }, 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 type { FC } from 'react';
+import type { 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/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts

@@ -1,5 +1,5 @@
 import type { PaginationBaseProps } from '../../index';
-import { EllipsisType } from '../../types';
+import type { EllipsisType } from '../../types';
 type Params = Required<Pick<PaginationBaseProps, 'page' | 'pageSize' | 'totalCount' | 'siblingCount'>>;
 export declare const createPaginationRange: ({ page, pageSize, totalCount, siblingCount, }: Params) => (number | EllipsisType)[];
 export {};

package/__inner__/cjs/components/Pagination/types.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react';
-import { PaginationItemProps } from './components';
-import { ELLIPSIS, NEXT, PREVIOUS } from './constants';
-import { GetItemAriaLabel } from './helpers/getItemAriaLabel';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { PaginationItemProps } from './components';
+import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
+import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
 export type EllipsisType = typeof ELLIPSIS;
 export type PreviousType = typeof PREVIOUS;
 export type NextType = typeof NEXT;
@@ -33,6 +33,6 @@ export type PaginationBaseProps = {
     /** Функция форматирования атрибута aria-label. */
     getItemAriaLabel?: GetItemAriaLabel;
     /** Рендер функция, для отображения кнопок пагинации.  */
-    renderComponent?: (PagItemProps: PaginationItemProps) => React.ReactNode;
+    renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
 };
 export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;