@ozen-ui/kit 0.12.0 → 0.13.1

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

@@ -1,33 +1,40 @@
-import type { ReactNode, ComponentRef, ElementType } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import type React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
 import type { ListProps } from '../List';
 import type { PopoverBaseProps } from '../Popover';
 import type { DATA_LIST_DEFAULT_TAG } from './constants';
-export type DataListPayload = {
+export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
-    value: string;
+    value: MULTIPLE extends true ? string[] : string;
 };
-export type DataListBaseProps = Omit<PopoverBaseProps, 'onSelect'> & {
+export type DataListSelected<MULTIPLE extends boolean> = (MULTIPLE extends true ? string[] : string) | undefined;
+export type DataListOnSelect<MULTIPLE extends boolean> = (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
+export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
     name?: string;
     /** Признак по которому компонент будет представлен */
     open?: boolean;
     /** Содержимое компонента */
     children: ReactNode;
+    /** Если {true} из списка можно выбрать несколько вариантов */
+    multiple?: MULTIPLE;
     /** Дополнительные CSS-классы */
     className?: string;
     /** Размер компонента */
     size?: FormElementSizeVariant;
-    /** Выбранная опция */
-    selected?: string;
+    /** Выбранная или выбранные опции */
+    selected?: DataListSelected<MULTIPLE>;
     /** Выбранная опция по умолчанию */
-    defaultSelected?: string;
+    defaultSelected?: DataListSelected<MULTIPLE>;
     /** Функция обратного вызова для выбора значения */
-    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
+    onSelect?: DataListOnSelect<MULTIPLE>;
     /** Свойства компонента List */
     listProps?: ListProps;
-};
-export type DataListRef = ComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
-export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<DataListBaseProps, As>;
+} & Omit<PopoverBaseProps, 'onSelect'>;
+export declare const isMultipleParams: (params: DataListBaseProps<boolean>) => params is DataListBaseProps<true>;
+export declare const isNotMultipleParams: (params: DataListBaseProps<boolean>) => params is DataListBaseProps<false>;
+export type DataListRef = PolymorphicComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
+export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false> = PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>;
+export type DataListComponent = <As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false>(props: PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>) => React.ReactElement | null;

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

@@ -1 +1,2 @@
-export {};
+export var isMultipleParams = function (params) { return !!params.multiple; };
+export var isNotMultipleParams = function (params) { return !params.multiple; };

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

@@ -1,14 +1,23 @@
+import type React from 'react';
 import type { MouseEvent, RefObject } from 'react';
+type UserListItemValue = string | null;
 export type UseListNavigationProps = {
     name?: string;
-    listRef?: RefObject<HTMLUListElement>;
+    ref?: RefObject<HTMLElement>;
+    selected?: UserListItemValue;
+    active?: boolean;
+    onSelect?: (e: React.SyntheticEvent | KeyboardEvent, selectedItem: string) => void;
 };
 export type UseListNavigationValue = {
     'data-list': string;
-    currentItem: HTMLLIElement | null;
-    keyboardHighlight: boolean;
+    focused?: UserListItemValue;
+    highlighted?: UserListItemValue;
+    ref?: RefObject<HTMLElement>;
     onKeyDown: (event: KeyboardEvent) => void;
-    onMouseMove: (event: MouseEvent<HTMLLIElement>) => void;
-    onMouseLeave: (event: MouseEvent<HTMLLIElement>) => void;
+    onMouseMove: (event: MouseEvent<HTMLElement>) => void;
+    onMouseLeave: (event: MouseEvent<HTMLElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
 };
-export declare function useDataListNavigation({ name: nameProp, listRef, }?: UseListNavigationProps): UseListNavigationValue;
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export declare function useDataListNavigation({ name: nameProp, selected, active, onSelect, }?: UseListNavigationProps): UseListNavigationValue;
+export {};

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

@@ -1,54 +1,101 @@
 import { __read } from "tslib";
-import { useState } from 'react';
-import { useBoolean } from '../../hooks/useBoolean';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { useUniqueId } from '../../hooks/useUniqueId';
 import { getNextIndex } from '../../utils/getNextIndex';
 import { getPrevIndex } from '../../utils/getPrevIndex';
 import { isKey } from '../../utils/isKey';
 import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
+var getData = function (el, attr) {
+    if (!el) {
+        return null;
+    }
+    if ('currentTarget' in el)
+        return el.currentTarget.getAttribute("data-list-".concat(attr));
+    return el.getAttribute("data-list-".concat(attr));
+};
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
 export function useDataListNavigation(_a) {
-    var _b = _a === void 0 ? {} : _a, nameProp = _b.name, listRef = _b.listRef;
+    var _b = _a === void 0 ? {} : _a, nameProp = _b.name, selected = _b.selected, _c = _b.active, active = _c === void 0 ? false : _c, onSelect = _b.onSelect;
     var name = useUniqueId(nameProp);
-    var _c = __read(useState(null), 2), currentItem = _c[0], setCurrentItem = _c[1];
-    var _d = __read(useBoolean(false), 2), keyboardHighlight = _d[0], _e = _d[1], showKeyboardHighlight = _e.on, hideKeyboardHighlight = _e.off;
-    var onKeyDown = function (event) {
+    var ref = useRef(null);
+    var _d = __read(useState(null), 2), current = _d[0], setCurrent = _d[1];
+    var _e = __read(useState(), 2), focused = _e[0], serFocused = _e[1];
+    var _f = __read(useState(), 2), highlighted = _f[0], setHighlighted = _f[1];
+    var currentValue = current || selected;
+    var getItemsData = useCallback(function () {
         var _a;
+        var items = Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) || []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
+        return [
+            items,
+            items.find(function (item) { return getData(item, 'value') === currentValue; }),
+        ];
+    }, [name, currentValue]);
+    useEffect(function () {
+        if (!active) {
+            return undefined;
+        }
+        var _a = __read(getItemsData(), 2), selectedItem = _a[1];
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            scrollContainerToElement({
+                container: ref.current,
+                element: selectedItem,
+            });
+            setCurrent(getData(selectedItem, 'value') || '');
+        }
+        return function () {
+            setCurrent(null);
+            serFocused(null);
+            setHighlighted(null);
+        };
+    }, [active]);
+    var onClick = function (event) {
+        if (getData(event, 'disabled') === 'true') {
+            return;
+        }
+        serFocused(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue || '');
+    };
+    var onKeyDown = function (event) {
+        if (isKey(event, 'Enter')) {
+            event.preventDefault();
+            if (currentValue)
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue);
+        }
         if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
             return;
         }
         event.preventDefault();
-        var items = Array.from(((_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) || []).filter(function (item) { return item.getAttribute('aria-disabled') !== 'true'; });
-        var currentIndex = currentItem !== null ? items.indexOf(currentItem) : null;
+        var _a = __read(getItemsData(), 2), items = _a[0], currentItem = _a[1];
+        var currentIndex = !currentItem ? null : items.indexOf(currentItem);
         var isArrowUp = isKey(event, 'ArrowUp');
         var newIndex = isArrowUp
             ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, items.length)
             : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, items.length);
         var item = items[newIndex];
-        setCurrentItem(item);
-        showKeyboardHighlight();
-        if (listRef === null || listRef === void 0 ? void 0 : listRef.current) {
+        var newValue = getData(item, 'value');
+        setCurrent(newValue);
+        serFocused(newValue);
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
             scrollContainerToElement({
-                container: listRef.current,
+                container: ref.current,
                 element: item,
             });
         }
     };
     var onMouseMove = function (event) {
-        if (currentItem !== event.currentTarget) {
-            setCurrentItem(event.currentTarget || null);
-        }
-        hideKeyboardHighlight();
+        if (getData(event, 'disabled') !== 'true')
+            setCurrent(getData(event, 'value'));
+        setHighlighted(getData(event, 'value'));
     };
     var onMouseLeave = function () {
-        if (keyboardHighlight) {
-            return;
-        }
-        setCurrentItem(null);
+        setHighlighted(null);
     };
     return {
         'data-list': name,
-        currentItem: currentItem,
-        keyboardHighlight: keyboardHighlight,
+        ref: ref,
+        focused: focused,
+        highlighted: highlighted,
+        onClick: onClick,
         onKeyDown: onKeyDown,
         onMouseMove: onMouseMove,
         onMouseLeave: onMouseLeave,

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

@@ -18,16 +18,16 @@ export var Input = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    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 _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, bodyProps = props.bodyProps, 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", "bodyProps"]);
+    var bodyInnerRef = useRef(null);
     var fieldInnerRef = useRef(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
-     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * внутри HTML-элемента label – фокус не переходил на body или на цель нажатия кнопки мыши.
      * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
      * так как в противном случае мы сломаем возможность выделять текст для копирования.
      */
     useEventListener({
-        element: labelInnerRef,
+        element: bodyInnerRef,
         eventName: 'mousedown',
         handler: function (e) {
             var _a;
@@ -38,7 +38,7 @@ export var Input = forwardRef(function (inProps, ref) {
         },
     });
     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("label", __assign({}, bodyProps, { className: cnInput('Body'), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
             React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnInput('FieldContainer') },
                 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),

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

@@ -21,7 +21,7 @@ export var InputNumber = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'InputNumber',
     });
-    var _a = props.size, size = _a === void 0 ? INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? 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 = __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 ? INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? 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 = __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 = __read(useState(false), 2), focused = _l[0], setFocused = _l[1];
     var _m = __read(useState(null), 2), timeoutId = _m[0], setTimeoutId = _m[1];
     var _o = __read(useState(null), 2), countDirection = _o[0], setCountDirection = _o[1];
@@ -31,8 +31,8 @@ export var InputNumber = forwardRef(function (inProps, ref) {
         state: 'value',
         defaultValue: defaultValue,
     }), 2), valueState = _p[0], setValueState = _p[1];
-    var labelElemRef = useRef(null);
-    var fieldRef = useRef(null);
+    var bodyInnerRef = useRef(null);
+    var fieldInnerRef = useRef(null);
     var filled = isValidValue(valueState);
     var handleChange = function (event) {
         if (disabled)
@@ -90,18 +90,18 @@ export var InputNumber = 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, то мы ничего не делаем,
      * так как в противном случае мы сломаем возможность выделять текст для копирования.
      */
     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();
             }
         },
     });
@@ -132,13 +132,13 @@ export var InputNumber = forwardRef(function (inProps, ref) {
             hasLabel: !!label,
             focused: focused,
         }, [className]) }),
-        React.createElement("label", { ref: labelElemRef, className: cnInputNumber('Body') },
+        React.createElement("label", __assign({}, bodyProps, { className: cnInputNumber('Body'), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
             React.createElement(FieldIcon, { className: cnInputNumber('RenderLeft'), icon: renderLeft, size: size }),
             React.createElement("div", { className: cnInputNumber('FieldContainer') },
-                label && (React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnInputNumber('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+                React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnInputNumber('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: valueState, required: required, placeholder: placeholder, className: 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: 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: useMultiRef([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]) }))),
             React.createElement(FieldIcon, { className: cnInputNumber('RenderRight'), icon: renderRight, size: size }),
             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", type: "button", variant: "ghost" }),

package/__inner__/esm/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__/esm/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__/esm/hooks/useControlled/useControlled.js

@@ -22,7 +22,7 @@ export 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]);
@@ -30,8 +30,8 @@ export var useControlled = function (_a) {
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "React component library",
   "files": [
     "*"