@ozen-ui/kit 0.7.0 → 0.9.0

package/__inner__/esm/components/Input/Input.js

@@ -1,71 +1,50 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import './Input.css';
-import React, { useState, useCallback, useRef, forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
+import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { FieldControl } from '../FieldControl';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
+import { FieldInput } from '../FieldInput';
 import { FieldLabel } from '../FieldLabel';
-export var inputTypeVariant = [
-    'number',
-    'date',
-    'datetime-local',
-    'time',
-    'text',
-    'tel',
-    'password',
-    'email',
-];
+import { Fieldset } from '../Fieldset';
+import { INPUT_DEFAULT_SIZE } from './constants';
 export var cnInput = cn('Input');
 export var Input = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Input'
     });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelRef", "labelProps"]);
-    var isControlled = typeof valueProp !== 'undefined';
-    var _b = __read(useState(), 2), focused = _b[0], setFocused = _b[1];
-    var fieldRef = useRef(null);
-    var _c = __read(useState(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
-    var filled = isControlled
-        ? !!valueProp || valueProp === 0
-        : !!valueState || valueState === 0;
-    var handleChange = useCallback(function (e) {
-        if (disabled)
-            return;
-        var value = e.target.value;
-        if (!isControlled) {
-            setValueState(value);
+    var _a = props.size, size = _a === void 0 ? INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelProps = props.labelProps, labelRef = props.labelRef, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelProps", "labelRef"]);
+    var labelInnerRef = useRef(null);
+    var fieldInnerRef = useRef(null);
+    /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
+     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
+     * так как в противном случае мы сломаем возможность выделять текст для копирования.
+     */
+    useEventListener({
+        element: labelInnerRef,
+        eventName: 'mousedown',
+        handler: function (e) {
+            var _a;
+            if (e.target !== fieldInnerRef.current) {
+                e.preventDefault();
+                (_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, isControlled, disabled]);
-    var handleFocus = useCallback(function (e) {
-        var _a;
-        setFocused(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus]);
-    var handleBlur = useCallback(function (e) {
-        var _a;
-        setFocused(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur]);
-    return (React.createElement("div", __assign({}, other, { ref: ref, className: cnInput({
-            fullWidth: fullWidth,
-            size: size,
-            error: error,
-            disabled: disabled,
-            required: required,
-            hasLabel: !!label,
-            focused: focused
-        }, [className]) }),
-        React.createElement("label", { className: cnInput('Body') },
-            React.createElement(FieldIcon, { className: cnInput('RenderLeft'), icon: renderLeft, size: size }),
+    });
+    return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInput({}, [className]) }),
+        React.createElement("label", { className: cnInput('Body'), ref: labelInnerRef },
+            React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnInput('FieldContainer') },
-                label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnInput('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-                React.createElement("input", __assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueProp, type: type, defaultValue: defaultValue, required: required, placeholder: placeholder }, inputProps, { className: cnInput('Field', { filled: filled }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: useMultiRef([inputRef, fieldRef]) }))),
-            React.createElement(FieldIcon, { className: cnInput('RenderRight'), icon: renderRight, size: size }),
-            React.createElement("fieldset", { className: cnInput('Fieldset') })),
-        React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+                React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
+                React.createElement(FieldInput, __assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange }, inputProps, { className: cnInput('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
+            React.createElement(FieldIcon, { icon: renderRight }),
+            React.createElement(Fieldset, null)),
+        React.createElement(FieldHint, null, hint)));
 });
 Input.displayName = 'Input';

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

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

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

@@ -0,0 +1 @@
+export var INPUT_DEFAULT_SIZE = 'm';

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

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

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

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

package/__inner__/esm/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__/esm/components/Input/types.js

@@ -0,0 +1,10 @@
+export var inputTypeVariant = [
+    'number',
+    'date',
+    'datetime-local',
+    'time',
+    'text',
+    'tel',
+    'password',
+    'email',
+];

package/__inner__/esm/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__/esm/components/InputNumber/InputNumber.js

@@ -11,6 +11,7 @@ import { cn } from '../../utils/classname';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
 import { FieldLabel } from '../FieldLabel';
+import { Fieldset } from '../Fieldset';
 import { IconButton } from '../IconButton';
 import { INPUT_NUMBER_DEFAULT_STEP, INPUT_NUMBER_DEFAULT_SIZE, INPUT_NUMBER_DEFAULT_AUTO_FOCUS, INPUT_NUMBER_DEFAULT_ERROR, INPUT_NUMBER_DEFAULT_REQUIRED, INPUT_NUMBER_DEFAULT_DISABLED, INPUT_NUMBER_DEFAULT_FULL_WIDTH, INPUT_NUMBER_DEFAULT_VALUE, INPUT_NUMBER_DEFAULT_MIN, INPUT_NUMBER_DEFAULT_MAX, } from './constants';
 import { getValue, isInputInvalid, isValidValue } from './utils';
@@ -142,7 +143,7 @@ export var InputNumber = forwardRef(function (inProps, ref) {
             React.createElement("span", { className: cnInputNumber('Controls') },
                 React.createElement(IconButton, { tabIndex: -1, size: size, className: cnInputNumber('Increment'), icon: SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", variant: "ghost" }),
                 React.createElement(IconButton, { tabIndex: -1, size: size, icon: SortDownIcon, className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", variant: "ghost" })),
-            React.createElement("fieldset", { className: cnInputNumber('Fieldset') })),
+            React.createElement(Fieldset, { className: cnInputNumber('Fieldset') })),
         React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 InputNumber.displayName = 'InputNumber';

package/__inner__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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>>;