@ozen-ui/kit 0.16.1 → 0.17.0

package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.d.ts

@@ -1,75 +1,4 @@
 import '../../Select.css';
 import React from 'react';
-import type { HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
-import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
-import { type FieldIconProps } from '../../../FieldIcon';
-import { type FieldLabelProps } from '../../../FieldLabel';
-export type SelectInputSizeVariant = FormElementSizeVariant;
-type DivElement = HTMLAttributes<HTMLDivElement>;
-type InputElement = InputHTMLAttributes<HTMLInputElement>;
-export type SelectInputProps = {
-    /** Атрибут id для элемента input */
-    id?: string;
-    /** Атрибут name для элемента input */
-    name?: string;
-    /** Лейбл */
-    label?: string;
-    /** Размер компонента */
-    size?: SelectInputSizeVariant;
-    /** Подсказка. Отображается, когда вариант не выбран */
-    placeholder?: string;
-    /** Если {true} устанавливает автофокус */
-    autoFocus?: boolean;
-    /** Если {true} переводит поле в состояние ошибки */
-    error?: boolean;
-    /** Если {true} растягивает поле на всю ширину */
-    fullWidth?: boolean;
-    /** Дополнительное описание к полю */
-    hint?: string | null | undefined;
-    /** Если {true} делает элемент неактивным */
-    disabled?: boolean;
-    /** Если {true} делает элемент обязательным к заполнению */
-    required?: boolean;
-    /** Признак визуального состояния компонента с фокусом */
-    focused?: boolean;
-    /** Если {true} предотвращает сокращение текста в значении и
-     * задает гибкую высоту контейнера компонента */
-    multiline?: boolean;
-    /** Текст или иконка слева */
-    renderLeft?: FieldIconProps['icon'];
-    /** Текст или иконка справа */
-    renderRight?: FieldIconProps['icon'];
-    /** Значение для отображения */
-    renderedValue?: React.ReactNode;
-    /** Выбранное значение */
-    value?: InputElement['value'];
-    /** Значение умолчанию (неконтролируемый компонент) */
-    defaultValue?: InputElement['defaultValue'];
-    /** Ссылка на Field */
-    fieldRef?: Ref<HTMLDivElement>;
-    /** Свойства Field */
-    fieldProps?: DivElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на элемент input */
-    inputRef?: Ref<HTMLInputElement>;
-    /** Свойства элемента input */
-    inputProps?: InputElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
-    /** Свойства FieldLabel */
-    labelProps?: FieldLabelProps;
-    /** Ссылка на Body */
-    bodyRef?: Ref<HTMLDivElement>;
-    /** Свойства Body */
-    bodyProps?: DivElement;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: Ref<HTMLDivElement>;
-    open?: boolean;
-    'data-testid'?: string;
-    children?: never;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+import type { SelectInputProps } from './types';
 export declare const SelectInput: React.ForwardRefExoticComponent<Omit<SelectInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js

@@ -6,37 +6,38 @@ require("../../Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var classnames_1 = require("@bem-react/classnames");
 var icons_1 = require("@ozen-ui/icons");
-var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useBoolean_1 = require("../../../../hooks/useBoolean");
+var FieldControl_1 = require("../../../FieldControl");
 var FieldHint_1 = require("../../../FieldHint");
 var FieldIcon_1 = require("../../../FieldIcon");
 var FieldLabel_1 = require("../../../FieldLabel");
 var Fieldset_1 = require("../../../Fieldset");
+var constants_1 = require("../../constants");
 var index_1 = require("../../index");
+var SelectConsumer_1 = require("../SelectConsumer");
 exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = tslib_1.__rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
-    var bodyRef = (0, react_1.useRef)(null);
-    var filled = focused || !!valueProp;
-    var hasLabel = !!label;
-    var placeholder = (focused || !hasLabel) && !valueProp && placeholderProp;
-    return (react_1.default.createElement("div", tslib_1.__assign({}, other, { className: (0, index_1.cnSelect)({
-            fullWidth: fullWidth,
-            size: size,
-            error: error,
-            disabled: disabled,
-            required: required,
-            hasLabel: hasLabel,
+    var _b = _a.size, size = _b === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
+    var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
+    var filled = !!valueProp || valueProp === 0;
+    var handleFocus = (0, react_1.useCallback)(function (e) {
+        on();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        off();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ error: error, size: size, filled: filled, focused: focused, disabled: disabled, fullWidth: fullWidth, required: required }, other, { className: (0, index_1.cnSelect)({
             multiline: multiline,
-            focused: focused,
         }, [className]), ref: ref }),
-        react_1.default.createElement("div", tslib_1.__assign({ tabIndex: disabled ? -1 : 0, role: "button", onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { className: (0, index_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyRefProp]) }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, index_1.cnSelect)('RenderLeft'), icon: renderLeft, size: size }),
+        react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { onClick: onClick, onKeyDown: onKeyDown, tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onBlur: handleBlur, className: (0, index_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft, className: (0, index_1.cnSelect)('RenderLeft') }),
             react_1.default.createElement("div", { className: (0, index_1.cnSelect)('FieldContainer') },
-                label && (react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, index_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-                react_1.default.createElement("div", tslib_1.__assign({}, fieldProps, { className: (0, index_1.cnSelect)('Field', { filled: filled, asPlaceholder: !!placeholder }, [fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className]), ref: fieldRef }), placeholder || renderedValue),
-                react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: (0, index_1.cnSelect)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, index_1.cnSelect)('RenderRight'), icon: renderRight, size: size }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })), icon: icons_1.ChevronDownIcon, size: size }),
+                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, index_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
+                react_1.default.createElement(SelectConsumer_1.SelectInputConsumer, { id: id, name: name, value: valueProp, defaultValue: defaultValue, placeholder: placeholderProp, fieldProps: fieldProps, inputProps: inputProps, fieldRef: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.ref) || fieldRef, inputRef: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) || inputRef, renderedValue: renderedValue })),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight, className: (0, index_1.cnSelect)('RenderRight') }),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })) }),
             react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
-        react_1.default.createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+        react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
 });
 exports.SelectInput.displayName = 'SelectInput';

package/__inner__/cjs/components/Select/components/SelectInput/index.d.ts

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

package/__inner__/cjs/components/Select/components/SelectInput/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./SelectInput"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Select/components/SelectInput/types.d.ts

@@ -0,0 +1,89 @@
+import type { Ref, ReactNode, ComponentPropsWithRef } from 'react';
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { FieldIconProps } from '../../../FieldIcon';
+import type { FieldLabelProps } from '../../../FieldLabel';
+export type SelectInputSizeVariant = FormElementSizeVariant;
+type LabelProps = FieldLabelProps;
+type InputProps = ComponentPropsWithRef<'input'> & {
+    'data-testid'?: string;
+};
+type BodyProps = ComponentPropsWithRef<'div'> & {
+    'data-testid'?: string;
+};
+type FieldProps = ComponentPropsWithRef<'div'> & {
+    'data-testid'?: string;
+};
+type SelectInputPropsDeprecated = {
+    /**
+     * Ссылка на Field
+     * @deprecated Используйте fieldProps.ref
+     * */
+    fieldRef?: Ref<HTMLDivElement>;
+    /**
+     * Ссылка на элемент input
+     * @deprecated Используйте inputProps.ref
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /**
+     * Ссылка на Body
+     * @deprecated Используйте bodyProps.ref
+     * */
+    bodyRef?: Ref<HTMLDivElement>;
+};
+export type SelectInputProps = Omit<ComponentPropsWithRef<'div'>, 'value' | 'defaultValue' | 'onChange'> & {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: SelectInputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если {true} предотвращает сокращение текста в значении и
+     * задает гибкую высоту контейнера компонента */
+    multiline?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Значение для отображения */
+    renderedValue?: ReactNode;
+    /** Выбранное значение */
+    value?: InputProps['value'];
+    /** Значение умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputProps['defaultValue'];
+    /** Свойства Field */
+    fieldProps?: FieldProps;
+    /** Свойства элемента input */
+    inputProps?: InputProps;
+    /** Свойства FieldLabel */
+    labelProps?: LabelProps;
+    /** Свойства Body */
+    bodyProps?: BodyProps;
+    /** Признак раскрытого списка */
+    open?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Содержимое компонента */
+    children?: never;
+} & SelectInputPropsDeprecated;
+export {};

package/__inner__/cjs/components/Select/components/SelectInput/types.js

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

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

@@ -1,2 +1 @@
 export * from './SelectInput';
-export * from './SelectCheckIcon';

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

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./SelectInput"), exports);
-tslib_1.__exportStar(require("./SelectCheckIcon"), exports);

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

@@ -4,4 +4,4 @@ export declare const SELECT_DEFAULT_DISABLED = false;
 export declare const SELECT_DEFAULT_REQUIRED = false;
 export declare const SELECT_DEFAULT_MULTILINE = false;
 export declare const SELECT_DEFAULT_DEFAULT_OPEN = false;
-export declare const SELECT_DEFAULT_AUTO_SIZE = "m";
+export declare const SELECT_DEFAULT_SIZE = "m";

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SELECT_DEFAULT_AUTO_SIZE = exports.SELECT_DEFAULT_DEFAULT_OPEN = exports.SELECT_DEFAULT_MULTILINE = exports.SELECT_DEFAULT_REQUIRED = exports.SELECT_DEFAULT_DISABLED = exports.SELECT_DEFAULT_FULL_WIDTH = exports.SELECT_DEFAULT_AUTO_FOCUS = void 0;
+exports.SELECT_DEFAULT_SIZE = exports.SELECT_DEFAULT_DEFAULT_OPEN = exports.SELECT_DEFAULT_MULTILINE = exports.SELECT_DEFAULT_REQUIRED = exports.SELECT_DEFAULT_DISABLED = exports.SELECT_DEFAULT_FULL_WIDTH = exports.SELECT_DEFAULT_AUTO_FOCUS = void 0;
 exports.SELECT_DEFAULT_AUTO_FOCUS = false;
 exports.SELECT_DEFAULT_FULL_WIDTH = false;
 exports.SELECT_DEFAULT_DISABLED = false;
 exports.SELECT_DEFAULT_REQUIRED = false;
 exports.SELECT_DEFAULT_MULTILINE = false;
 exports.SELECT_DEFAULT_DEFAULT_OPEN = false;
-exports.SELECT_DEFAULT_AUTO_SIZE = 'm';
+exports.SELECT_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/Select/helpers/index.d.ts

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

package/__inner__/cjs/components/Select/helpers/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Select/helpers/types.d.ts

@@ -0,0 +1,8 @@
+import type { SelectPropLabel, SelectProps, SelectPropValue } from '../types';
+export type SelectedParams<MULTIPLE extends boolean = false> = {
+    multiple: SelectProps<MULTIPLE>['multiple'];
+    value?: SelectPropValue<MULTIPLE>;
+    label?: SelectPropLabel<MULTIPLE>;
+};
+export declare const isMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<true>;
+export declare const isNotMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<false>;

package/__inner__/cjs/components/Select/helpers/types.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNotMultipleParams = exports.isMultipleParams = void 0;
+var isMultipleParams = function (params) { return !!params.multiple; };
+exports.isMultipleParams = isMultipleParams;
+var isNotMultipleParams = function (params) { return !params.multiple; };
+exports.isNotMultipleParams = isNotMultipleParams;

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

@@ -1,3 +1,4 @@
-export { MenuItem as Option, MenuItemText as OptionItemText, MenuItemIcon as OptionItemIcon, } from '../Menu';
+export { DataListOption as Option } from '../DataList';
+export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
 export * from './Select';
 export * from './types';

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

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionItemIcon = exports.OptionItemText = exports.Option = void 0;
 var tslib_1 = require("tslib");
-var Menu_1 = require("../Menu");
-Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Menu_1.MenuItem; } });
-Object.defineProperty(exports, "OptionItemText", { enumerable: true, get: function () { return Menu_1.MenuItemText; } });
-Object.defineProperty(exports, "OptionItemIcon", { enumerable: true, get: function () { return Menu_1.MenuItemIcon; } });
+var DataList_1 = require("../DataList");
+Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return DataList_1.DataListOption; } });
+var List_1 = require("../List");
+Object.defineProperty(exports, "OptionItemText", { enumerable: true, get: function () { return List_1.ListItemText; } });
+Object.defineProperty(exports, "OptionItemIcon", { enumerable: true, get: function () { return List_1.ListItemIcon; } });
 tslib_1.__exportStar(require("./Select"), exports);
 tslib_1.__exportStar(require("./types"), exports);

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

@@ -1,15 +1,17 @@
-import type { HTMLAttributes, SyntheticEvent, ReactNode } from 'react';
+import type { SyntheticEvent, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { MenuProps } from '../Menu';
+import type { DataListBaseProps, DataListSelected } from '../DataList';
 import type { SelectInputProps } from './components';
 export type SelectSizeVariant = FormElementSizeVariant;
-export type SelectPropLabel = string;
-export type SelectPropValue = string | number | undefined;
-export type SelectedOptionProp = {
-    label?: SelectPropLabel;
-    value?: SelectPropValue;
+export type SelectLabel = string | number | undefined;
+export type SelectPropLabel<MULTIPLE extends boolean> = (MULTIPLE extends true ? SelectLabel[] : SelectLabel) | undefined;
+export type SelectValue = string | number | undefined;
+export type SelectPropValue<MULTIPLE extends boolean> = DataListSelected<MULTIPLE>;
+export type SelectedOptionProp<MULTIPLE extends boolean> = {
+    label?: SelectPropLabel<MULTIPLE>;
+    value?: SelectPropValue<MULTIPLE>;
 };
-export type SelectRenderValue = (option: SelectedOptionProp) => ReactNode | null;
+export type SelectRenderValue<MULTIPLE extends boolean> = (option: SelectedOptionProp<MULTIPLE>) => ReactNode | null;
 type SelectOpenControlledProps = {
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
@@ -22,37 +24,48 @@ type SelectOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen: boolean;
 };
-type SelectControlledProps = {
+type SelectControlledProps<MULTIPLE extends boolean = false> = {
     /** Выбранное значение */
-    value?: SelectPropValue;
+    value?: SelectPropValue<MULTIPLE>;
     /** Обработчик события на изменение выбранного значения */
-    onChange?: (value: SelectPropValue, e: SyntheticEvent) => void;
+    onChange?: (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
     /** Значение поля по умолчанию (неконтролируемый компонент) */
     defaultValue?: never;
 };
-type SelectUncontrolledProps = {
+type SelectUncontrolledProps<MULTIPLE extends boolean = false> = {
     /** Значение поля по умолчанию (неконтролируемый компонент) */
-    defaultValue: SelectPropValue;
+    defaultValue: SelectPropValue<MULTIPLE>;
     /** Выбранное значение */
     value?: never;
     /** Обработчик события на изменение выбранного значения */
     onChange?: never;
 };
-export type SelectProps = {
+type SelectPropsDeprecated<MULTIPLE extends boolean = false> = {
+    /**
+     * Свойства компонента Menu
+     * @deprecated Используйте dataListProps
+     * */
+    menuProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
+};
+export type SelectProps<MULTIPLE extends boolean = false> = {
     /** Если {true} устанавливает автофокус */
     autoFocus?: boolean;
     /** Размер компонента */
     size?: SelectSizeVariant;
     /** Рендер-функция для выбранного значения */
-    renderValue?: SelectRenderValue;
+    renderValue?: SelectRenderValue<MULTIPLE>;
     /** Содержимое компонента */
     children?: ReactNode;
-    /** Свойства компонента Menu */
-    menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
+    /** Свойства компонента DataList */
+    dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
     onClose?: () => void;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
     onOpen?: () => void;
+    /** Если {true} из списка можно выбрать несколько вариантов */
+    multiple?: MULTIPLE;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'inputProps' | 'inputRef' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'labelProps' | 'labelRef'> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & (SelectControlledProps | SelectUncontrolledProps) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
 export {};

package/__inner__/cjs/components/Textarea/Textarea.js

@@ -15,7 +15,7 @@ exports.Textarea = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Textarea',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, disabled = props.disabled, textareaProps = props.textareaProps, labelProps = props.labelProps, labelRef = props.labelRef, textareaRef = props.textareaRef, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "disabled", "textareaProps", "labelProps", "labelRef", "textareaRef"]);
     return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { className: (0, exports.cnTextarea)({
             expand: expand,
         }, [className]), ref: ref }),

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

@@ -7,13 +7,13 @@ export declare const textareaExpandVariant: readonly ["autoSize", "verticalResiz
 export type TextareaExpandVariant = (typeof textareaExpandVariant)[number];
 type TextareaPropsDeprecated = {
     /**
-     * deprecated
      * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
      * */
     labelRef?: FieldLabelProps['ref'];
     /**
-     * deprecated
      * Ссылка на элемент textarea
+     * @deprecated Используйте textareaProps.ref
      * */
     textareaRef?: Ref<HTMLTextAreaElement>;
 };

package/__inner__/cjs/utils/scrollContainerToElement.d.ts

@@ -1,7 +1,6 @@
-type ScrollContainerToElement = {
-    container?: HTMLElement;
-    element?: HTMLElement;
+export type ScrollContainerToElement = {
+    container?: HTMLElement | null;
+    element?: HTMLElement | null;
     behavior?: ScrollBehavior;
 };
 export declare function scrollContainerToElement({ container, element, behavior, }: ScrollContainerToElement): void;
-export {};

package/__inner__/esm/components/DataList/DataList.css

@@ -1,10 +1,10 @@
-.DataList-List {
-    --scroll-bar-size: 12px;
-  }
-    .DataList-List::-webkit-scrollbar {
+.DataList {
+  --scroll-bar-size: 12px;
+}
+  .DataList::-webkit-scrollbar {
     inline-size: var(--scroll-bar-size);
   }
-    .DataList-List::-webkit-scrollbar-thumb {
+  .DataList::-webkit-scrollbar-thumb {
     background-color: var(--color-background-secondary);
     border-radius: calc(var(--scroll-bar-size) / 2);
     border: calc(var(--scroll-bar-size) / 4) solid transparent;
@@ -12,57 +12,30 @@
     border-image: initial;
     min-block-size: 24px;
   }
-    .DataList-List::-webkit-scrollbar-thumb:hover,
-    .DataList-List::-webkit-scrollbar-thumb:active {
+  .DataList::-webkit-scrollbar-thumb:hover,
+    .DataList::-webkit-scrollbar-thumb:active {
       border: calc(var(--scroll-bar-size) / 4) solid transparent;
       background-clip: padding-box;
     }
-    .DataList-List::-webkit-scrollbar-thumb:hover {
+  .DataList::-webkit-scrollbar-thumb:hover {
       background-color: var(--color-background-secondary-hover);
     }
-    .DataList-List::-webkit-scrollbar-thumb:active {
+  .DataList::-webkit-scrollbar-thumb:active {
       background-color: var(--color-background-secondary-pressed);
     }
-    .DataList-List::-webkit-scrollbar-corner {
+  .DataList::-webkit-scrollbar-corner {
     background: transparent;
   }
-    .DataList-List {
-    overflow: hidden auto;
-    max-block-size: 40vb;
+  .DataList {
+  overflow: hidden auto;
+  max-block-size: 40vb;
 }
-  .DataList-Option {
-    cursor: pointer;
-  }
-  .DataList-Option_focused {
-      box-shadow: inset var(--shadow-outline-focused);
-    }
-  .DataList-Option_highlighted {
-      background-color: var(--color-background-main-hover);
-    }
-  .DataList-Option_disabled {
-      cursor: not-allowed;
-    }
-  .DataList-Option_disabled .ListItemText-TextPrimary,
-      .DataList-Option_disabled .ListItemText-TextSecondary {
-        color: var(--color-content-tertiary);
-      }
-  .DataList-IconWrapper {
-    min-inline-size: var(--select-check-icon-size);
-    min-block-size: var(--select-check-icon-size);
-    display: flex;
-  }
-  .DataList-IconWrapper_size_s {
-        --select-check-icon-size: 16px;
-      }
-  .DataList-IconWrapper_size_m {
-        --select-check-icon-size: 24px;
-      }
-.DataList_animation-enter {
+.DataList-animation-enter {
     opacity: 0;
     transform: translate(0, calc(var(--space-s) * -1));
     pointer-events: none;
   }
-.DataList_animation-enter-active {
+.DataList-animation-enter-active {
     opacity: 1;
     transition:
       opacity var(--transition-default),
@@ -70,16 +43,16 @@
     transform: translate(0);
     pointer-events: none;
   }
-.DataList_animation-enter-done {
+.DataList-animation-enter-done {
     opacity: 1;
     transform: translate(0);
   }
-.DataList_animation-exit {
+.DataList-animation-exit {
     opacity: 1;
     transform: translate(0);
     pointer-events: none;
   }
-.DataList_animation-exit-active {
+.DataList-animation-exit-active {
     opacity: 0;
     transition:
       opacity var(--transition-default),
@@ -87,7 +60,7 @@
     transform: translate(0, calc(var(--space-s) * -1));
     pointer-events: none;
   }
-.DataList_animation-exit-done {
+.DataList-animation-exit-done {
     opacity: 0;
     transform: translate(0, calc(var(--space-s) * -1));
     pointer-events: none;