@ozen-ui/kit 0.12.0 → 0.13.1

package/__inner__/cjs/components/FieldControl/FieldControl.css

@@ -24,9 +24,6 @@
 
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
-.FieldControl_size_2xs .FieldInput::-webkit-calendar-picker-indicator {
-        inset-inline-end: -25px;
-      }
 .FieldControl_size_xs {
       --textfield-gutter-x: 12px;
       --textfield-input-height: 40px;
@@ -39,9 +36,6 @@
 
       text-transform: var(--typography-text-xs-text_transform, none);
     }
-.FieldControl_size_xs .FieldInput::-webkit-calendar-picker-indicator {
-        inset-inline-end: -25px;
-      }
 .FieldControl_size_s {
       --textfield-gutter-x: 16px;
       --textfield-input-height: 48px;
@@ -54,9 +48,6 @@
 
       text-transform: var(--typography-text-s-text_transform, none);
     }
-.FieldControl_size_s .FieldInput::-webkit-calendar-picker-indicator {
-        inset-inline-end: -30px;
-      }
 .FieldControl_size_m {
       --textfield-gutter-x: 20px;
       --textfield-input-height: 56px;
@@ -69,9 +60,6 @@
 
       text-transform: var(--typography-text-m-text_transform, none);
     }
-.FieldControl_size_m .FieldInput::-webkit-calendar-picker-indicator {
-        inset-inline-end: -34px;
-      }
 .FieldControl_size_l {
       --textfield-gutter-x: 24px;
       --textfield-input-height: 64px;
@@ -84,9 +72,6 @@
 
       text-transform: var(--typography-text-l-text_transform, none);
     }
-.FieldControl_size_l .FieldInput::-webkit-calendar-picker-indicator {
-        inset-inline-end: -39px;
-      }
 .FieldControl_hasLabel.FieldControl_size_2xs {
         --textfield-input-padding: 8px 0 8px;
       }

package/__inner__/cjs/components/Input/Input.css

@@ -44,13 +44,6 @@
               appearance: none;
       margin: 0;
     }
-  .Input-Field::-webkit-calendar-picker-indicator {
-      opacity: 0;
-      position: absolute;
-      inset-block-start: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
   .Input-Field[type='number'] {
       -webkit-appearance: textfield;
          -moz-appearance: textfield;

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

@@ -21,16 +21,16 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.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 = tslib_1.__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 = (0, react_1.useRef)(null);
+    var _a = props.size, size = _a === void 0 ? constants_1.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, bodyProps = props.bodyProps, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelProps", "labelRef", "bodyProps"]);
+    var bodyInnerRef = (0, react_1.useRef)(null);
     var fieldInnerRef = (0, react_1.useRef)(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
-     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * внутри HTML-элемента label – фокус не переходил на body или на цель нажатия кнопки мыши.
      * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
      * так как в противном случае мы сломаем возможность выделять текст для копирования.
      */
     (0, useEventListener_1.useEventListener)({
-        element: labelInnerRef,
+        element: bodyInnerRef,
         eventName: 'mousedown',
         handler: function (e) {
             var _a;
@@ -41,7 +41,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
         },
     });
     return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, exports.cnInput)({}, [className]) }),
-        react_1.default.createElement("label", { className: (0, exports.cnInput)('Body'), ref: labelInnerRef },
+        react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInput)('Body'), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
             react_1.default.createElement("div", { className: (0, exports.cnInput)('FieldContainer') },
                 react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),

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

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ComponentRef, Ref } from 'react';
+import type { ComponentPropsWithRef, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
 import type { FieldIconProps } from '../FieldIcon';
@@ -63,8 +63,8 @@ export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT
     };
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** Cвойства Body */
+    bodyProps?: ComponentPropsWithRef<'label'>;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 } & InputPropsDeprecated;

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

@@ -24,7 +24,7 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'InputNumber',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps"]);
     var _l = tslib_1.__read((0, react_1.useState)(false), 2), focused = _l[0], setFocused = _l[1];
     var _m = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _m[0], setTimeoutId = _m[1];
     var _o = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _o[0], setCountDirection = _o[1];
@@ -34,8 +34,8 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
         state: 'value',
         defaultValue: defaultValue,
     }), 2), valueState = _p[0], setValueState = _p[1];
-    var labelElemRef = (0, react_1.useRef)(null);
-    var fieldRef = (0, react_1.useRef)(null);
+    var bodyInnerRef = (0, react_1.useRef)(null);
+    var fieldInnerRef = (0, react_1.useRef)(null);
     var filled = (0, utils_1.isValidValue)(valueState);
     var handleChange = function (event) {
         if (disabled)
@@ -93,18 +93,18 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
     };
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
-     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * внутри HTML-элемента label – фокус не переходил на body или на цель нажатия кнопки мыши.
      * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
      * так как в противном случае мы сломаем возможность выделять текст для копирования.
      */
     (0, useEventListener_1.useEventListener)({
-        element: labelElemRef,
+        element: bodyInnerRef,
         eventName: 'mousedown',
         handler: function (e) {
             var _a;
-            if (e.target !== fieldRef.current) {
+            if (e.target !== fieldInnerRef.current) {
                 e.preventDefault();
-                (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                (_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
         },
     });
@@ -135,13 +135,13 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
             hasLabel: !!label,
             focused: focused,
         }, [className]) }),
-        react_1.default.createElement("label", { ref: labelElemRef, className: (0, exports.cnInputNumber)('Body') },
+        react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInputNumber)('Body'), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderLeft'), icon: renderLeft, size: size }),
             react_1.default.createElement("div", { className: (0, exports.cnInputNumber)('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, exports.cnInputNumber)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnInputNumber)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label),
                 react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueState, required: required, placeholder: placeholder, className: (0, exports.cnInputNumber)('Field', { filled: filled }, [
                         inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
-                    ]), min: min, max: max, step: step }, inputProps, { type: "number", onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldRef]) }))),
+                    ]), min: min, max: max, step: step }, inputProps, { type: "number", onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]) }))),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderRight'), icon: renderRight, size: size }),
             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", type: "button", variant: "ghost" }),

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

@@ -52,6 +52,8 @@ export type InputNumberProps = {
     labelRef?: FieldLabelProps['ref'];
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
+    /** Cвойства Body */
+    bodyProps?: ComponentPropsWithRef<'label'>;
     /** Шаг инкремента/декремента */
     step?: number;
     /** Минимально допустимое значение */

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

@@ -1,4 +1,4 @@
-import type { Ref, ComponentPropsWithRef, ComponentRef } from 'react';
+import type { Ref, ComponentPropsWithRef } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
 import type { FieldLabelProps } from '../FieldLabel';
@@ -61,8 +61,6 @@ export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFA
     };
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 } & TextareaPropsDeprecated;

package/__inner__/cjs/hooks/useControlled/useControlled.js

@@ -25,7 +25,7 @@ var useControlled = function (_a) {
                 console.error([
                     "\u00D6zen-UI: \u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 '".concat(state, "' \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
                     'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот.',
-                    'Поведение определяется после первого рендера и является контролируемым, если значение не "undefined"',
+                    'Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
                 ].join('\n'));
             }
         }, [state, name, valueProp]);
@@ -33,8 +33,8 @@ var useControlled = function (_a) {
         (0, react_1.useEffect)(function () {
             if (!isControlled && defaultValue_1 !== defaultProp) {
                 console.error([
-                    "\u00D6zen-UI: \u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B default ").concat(state, " \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 ").concat(name) +
-                        "\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
+                    "\u00D6zen-UI: \u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B default ").concat(state, " \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 ").concat(name, "."),
+                    "\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
                 ].join('\n'));
             }
         }, [JSON.stringify(defaultProp)]);

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

@@ -1,10 +1,10 @@
-.DataList {
-  --scroll-bar-size: 12px;
-}
-  .DataList::-webkit-scrollbar {
+.DataList-List {
+    --scroll-bar-size: 12px;
+  }
+    .DataList-List::-webkit-scrollbar {
     inline-size: var(--scroll-bar-size);
   }
-  .DataList::-webkit-scrollbar-thumb {
+    .DataList-List::-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,56 +12,83 @@
     border-image: initial;
     min-block-size: 24px;
   }
-  .DataList::-webkit-scrollbar-thumb:hover,
-    .DataList::-webkit-scrollbar-thumb:active {
+    .DataList-List::-webkit-scrollbar-thumb:hover,
+    .DataList-List::-webkit-scrollbar-thumb:active {
       border: calc(var(--scroll-bar-size) / 4) solid transparent;
       background-clip: padding-box;
     }
-  .DataList::-webkit-scrollbar-thumb:hover {
+    .DataList-List::-webkit-scrollbar-thumb:hover {
       background-color: var(--color-background-secondary-hover);
     }
-  .DataList::-webkit-scrollbar-thumb:active {
+    .DataList-List::-webkit-scrollbar-thumb:active {
       background-color: var(--color-background-secondary-pressed);
     }
-  .DataList::-webkit-scrollbar-corner {
+    .DataList-List::-webkit-scrollbar-corner {
     background: transparent;
   }
-  .DataList {
-  scroll-behavior: smooth;
-  overflow: hidden auto;
-  max-block-size: 40vb;
+    .DataList-List {
+    overflow: hidden auto;
+    max-block-size: 40vb;
 }
-
   .DataList-Option {
     cursor: pointer;
   }
-
-  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_highlighted {
-      background-color: var(--color-background-main-hover);
-    }
-
-  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_outlined {
+  .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 {
-        color: var(--color-content-disabled);
+  .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 {
+    opacity: 0;
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }
+.DataList_animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.DataList_animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.DataList_animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.DataList_animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }
+.DataList_animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }

package/__inner__/esm/components/DataList/DataList.d.ts

@@ -1,4 +1,4 @@
 import './DataList.css';
-import type { DataListBaseProps } from './index';
+import type { DataListComponent } from './index';
 export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
-export declare const DataList: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DataListBaseProps, "div">;
+export declare const DataList: DataListComponent;

package/__inner__/esm/components/DataList/DataList.js

@@ -1,50 +1,88 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './DataList.css';
-import React, { useRef } from 'react';
+import React from 'react';
+import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { List } from '../List';
 import { Popover } from '../Popover';
 import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
 import { DataListContext } from './DataListProvider';
+import { isMultipleParams, isNotMultipleParams } from './index';
 import { useDataListNavigation } from './useDataListNavigation';
 export var cnDataList = cn('DataList');
-export var DataList = polymorphicComponentWithRef(function (inProps, ref) {
-    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.as, as = _b === void 0 ? DATA_LIST_DEFAULT_TAG : _b, _c = _a.open, open = _c === void 0 ? DATA_LIST_DEFAULT_OPEN : _c, _d = _a.size, size = _d === void 0 ? DATA_LIST_DEFAULT_SIZE : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = __rest(_a, ["as", "open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
-    var _e = __read(useControlled({
+var DataListRender = function (inProps, ref) {
+    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps"]);
+    // Состояние полностью представленного компонента
+    var _e = __read(useBoolean(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
+    var _g = __read(useControlled({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
         state: 'selected',
-    }), 2), selected = _e[0], setSelected = _e[1];
-    var listRef = useRef(null);
-    var handleSelect = function (event, option) {
-        setSelected(option);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: option });
+    }), 2), selected = _g[0], setSelected = _g[1];
+    var handleSelect = function (event, value) {
+        var _a, _b, _c;
+        var res;
+        var props = __assign(__assign({}, inProps), { selected: selected });
+        if (isMultipleParams(props)) {
+            res = ((_a = props.selected) === null || _a === void 0 ? void 0 : _a.includes(value))
+                ? props.selected.filter(function (item) { return item !== value; })
+                : __spreadArray(__spreadArray([], __read((selected || [])), false), [value], false);
+            (_b = props.onSelect) === null || _b === void 0 ? void 0 : _b.call(props, event, { name: name, value: res });
+        }
+        if (isNotMultipleParams(props)) {
+            res = value;
+            (_c = props.onSelect) === null || _c === void 0 ? void 0 : _c.call(props, event, { name: name, value: value });
+        }
+        setSelected(res || '');
     };
-    var _f = useDataListNavigation({
+    // Фиксируем последний выбранный элемент в списке, чтобы потом переводить на него scroll в контейнере
+    var lastSelectedOption = Array.isArray(selected)
+        ? selected[selected.length - 1]
+        : selected;
+    var _h = useDataListNavigation({
         name: name,
-        listRef: listRef,
-    }), onKeyDown = _f.onKeyDown, currentItem = _f.currentItem, listNavigation = __rest(_f, ["onKeyDown", "currentItem"]);
+        active: opened,
+        selected: lastSelectedOption,
+        onSelect: function (e, selectedItem) {
+            handleSelect(e, selectedItem);
+        },
+    }), onKeyDown = _h.onKeyDown, listRef = _h.ref, navigation = __rest(_h, ["onKeyDown", "ref"]);
+    // Назначает элементу контроля события управления списком с клавиатуры
     useEventListener({
         active: open,
         eventName: 'keydown',
         element: anchorRef,
-        handler: function (event) {
-            var _a;
-            onKeyDown(event);
-            if (isKey(event, 'Enter')) {
-                handleSelect(event, ((_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
-            }
+        handler: onKeyDown,
+    });
+    // Закрывает список как только элемент контроля теряет фокус
+    useEventListener({
+        active: open,
+        eventName: 'focusout',
+        element: anchorRef,
+        handler: function () {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         },
     });
-    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
-        React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
-            React.createElement(List, __assign({ as: "ul", size: size }, listProps, { ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
-});
-DataList.displayName = 'DataList';
+    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableClickOutside: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
+            classNames: cnDataList({ animation: true }),
+        } }, other, { onEntered: function () {
+            onEntered();
+            onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
+        }, onExited: function () {
+            onExited();
+            onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
+        }, ref: ref }),
+        React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size }, navigation) },
+            React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
+                    var _a;
+                    e.preventDefault();
+                    (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+                }, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('List', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
+};
+export var DataList = polymorphicComponentWithRef(DataListRender);

package/__inner__/esm/components/DataList/DataListProvider.d.ts

@@ -1,18 +1,16 @@
 import type { SyntheticEvent, MouseEvent } from 'react';
+import type React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-export type DataListSelectPayload = {
-    name?: string;
-    value: string;
-};
 export type DataListContextState = {
     'data-list': string;
-    currentItem: HTMLElement | null;
-    selected?: string;
-    keyboardHighlight: boolean;
+    selected?: string | string[];
+    focused?: string | null;
+    highlighted?: string | null;
     size: FormElementSizeVariant;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     onSelect?: (event: SyntheticEvent, option: string) => void;
-    onMouseMove?: (event: MouseEvent<HTMLLIElement>) => void;
-    onMouseLeave?: (event: MouseEvent<HTMLLIElement>) => void;
+    onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
 };
-export declare const DataListContext: import("react").Context<DataListContextState>;
+export declare const DataListContext: React.Context<DataListContextState>;
 export declare const useDataListContext: () => DataListContextState;

package/__inner__/esm/components/DataList/DataListProvider.js

@@ -2,8 +2,6 @@ import { createContext, useContext } from 'react';
 import { DATA_LIST_DEFAULT_SIZE } from './constants';
 export var DataListContext = createContext({
     'data-list': '',
-    currentItem: null,
-    keyboardHighlight: false,
     size: DATA_LIST_DEFAULT_SIZE,
 });
 export var useDataListContext = function () { return useContext(DataListContext); };

package/__inner__/esm/components/DataList/components/DataListOption.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { KeyboardEventHandler, MouseEventHandler, HTMLAttributes } from 'react';
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode, ComponentPropsWithRef } from 'react';
 export type DataListOptionProps = {
     /** Если {true} отображает опцию заблокированной */
     disabled?: boolean;
     /** Значение, если оно отличается от содержимого опции */
-    value?: string;
+    value: string;
     /** Функция обратного вызова обработчик нажатий на клавиатуре */
     onKeyDown?: KeyboardEventHandler<HTMLLIElement>;
     /** Функция обратного вызова обработчик нажатий на клавиатуре */
@@ -12,19 +12,6 @@ export type DataListOptionProps = {
     /** Функция обратного вызова обработчик нажатий на клавиатуре */
     onMouseLeave?: MouseEventHandler<HTMLLIElement>;
     /** Содержимое компонента */
-    children: string;
-} & HTMLAttributes<HTMLLIElement>;
-export declare const DataListOption: React.ForwardRefExoticComponent<{
-    /** Если {true} отображает опцию заблокированной */
-    disabled?: boolean | undefined;
-    /** Значение, если оно отличается от содержимого опции */
-    value?: string | undefined;
-    /** Функция обратного вызова обработчик нажатий на клавиатуре */
-    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement> | undefined;
-    /** Функция обратного вызова обработчик нажатий на клавиатуре */
-    onMouseMove?: React.MouseEventHandler<HTMLLIElement> | undefined;
-    /** Функция обратного вызова обработчик нажатий на клавиатуре */
-    onMouseLeave?: React.MouseEventHandler<HTMLLIElement> | undefined;
-    /** Содержимое компонента */
-    children: string;
-} & React.HTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+    children: ReactNode;
+} & ComponentPropsWithRef<'li'>;
+export declare const DataListOption: React.ForwardRefExoticComponent<Omit<DataListOptionProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/__inner__/esm/components/DataList/components/DataListOption.js

@@ -1,44 +1,37 @@
-import React, { useRef, forwardRef } from 'react';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
 import { TickIcon } from '@ozen-ui/icons';
-import { useMultiRef } from '../../../hooks/useMultiRef';
 import { getIconSizeToFormElement } from '../../../utils/getIconSizeToFormElement';
 import { ListItem, ListItemText, ListItemIcon } from '../../List';
 import { DATA_LIST_OPTION_DEFAULT_DISABLED } from '../constants';
 import { cnDataList } from '../DataList';
 import { useDataListContext } from '../DataListProvider';
 export var DataListOption = forwardRef(function (_a, ref) {
-    var value = _a.value, onMouseDown = _a.onMouseDown, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children;
-    var optionRef = useRef(null);
-    var _c = useDataListContext(), size = _c.size, currentItem = _c.currentItem, _d = _c.selected, selected = _d === void 0 ? '' : _d, keyboardHighlight = _c.keyboardHighlight, onSelect = _c.onSelect, onMouseMove = _c.onMouseMove, onMouseLeave = _c.onMouseLeave, dataListName = _c["data-list"];
+    var value = _a.value, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, onClickProp = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children, className = _a.className, other = __rest(_a, ["value", "onMouseMove", "onMouseLeave", "onClick", "disabled", "children", "className"]);
+    var _c = useDataListContext(), size = _c.size, _d = _c.selected, selected = _d === void 0 ? [] : _d, focused = _c.focused, highlighted = _c.highlighted, onClick = _c.onClick, onMouseMove = _c.onMouseMove, onMouseLeave = _c.onMouseLeave, dataListName = _c["data-list"];
     var iconSize = getIconSizeToFormElement(size);
-    var isSelected = (value || label) === selected;
-    var isHighlighted = !!currentItem && currentItem === optionRef.current;
+    var isSelected = Array.isArray(selected)
+        ? selected.includes(value)
+        : selected === value;
     var handleClick = function (event) {
-        var _a;
-        if (disabled) {
-            return;
-        }
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, ((_a = event.currentTarget.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
     var handleMouseMove = function (event) {
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
         onMouseMoveProp === null || onMouseMoveProp === void 0 ? void 0 : onMouseMoveProp(event);
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
     };
     var handleMouseLeave = function (event) {
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
         onMouseLeaveProp === null || onMouseLeaveProp === void 0 ? void 0 : onMouseLeaveProp(event);
     };
-    var handleMouseDown = function (event) {
-        event.preventDefault();
-        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
-    };
-    return (React.createElement(ListItem, { role: "option", ref: useMultiRef([optionRef, ref]), "data-list": dataListName, "data-value": value || label, "aria-selected": isSelected, "aria-disabled": disabled, onClick: handleClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cnDataList('Option', {
+    return (React.createElement(ListItem, __assign({ role: "option", "data-list": dataListName, "data-list-value": value, "data-list-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, onClick: handleClick, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cnDataList('Option', {
             disabled: disabled,
-            highlighted: !disabled && isHighlighted && !keyboardHighlight,
-            outlined: !disabled && isHighlighted && keyboardHighlight,
-        }) },
-        React.createElement(ListItemText, { className: cnDataList('Text', { disabled: disabled }), primary: label }),
+            highlighted: !disabled && highlighted === value,
+            focused: !disabled && focused === value,
+        }, [className]) }, other, { ref: ref }), typeof label === 'string' ? (React.createElement(React.Fragment, null,
+        React.createElement(ListItemText, { className: cnDataList('Text'), primary: label }),
         React.createElement("div", { className: cnDataList('IconWrapper', { size: iconSize }) }, isSelected && (React.createElement(ListItemIcon, null,
-            React.createElement(TickIcon, { size: iconSize }))))));
+            React.createElement(TickIcon, { size: iconSize })))))) : (label)));
 });
 DataListOption.displayName = 'DataListOption';