@ozen-ui/kit 0.11.0 → 0.13.0

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
+    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';

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,56 +1,103 @@
 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,
-                element: item
+                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
+        onMouseLeave: onMouseLeave,
     };
 }

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

@@ -41,7 +41,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<{
      *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
     onClose?: (() => void) | undefined;
     /** Свойства кнопки закрытия диалогового окна */
-    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+    closeButtonProps?: (Omit<IconButtonProps, "icon"> & {
         'data-testid'?: string | undefined;
     }) | undefined;
     /** Признак по которому кнопка закрытия диалогового окна будет скрыта */

package/__inner__/esm/components/Dialog/Dialog.js

@@ -10,13 +10,13 @@ export var dialogSizeVariant = ['s', 'l'];
 export var dialogVariant = ['small', 'medium', 'large', 'fullsize'];
 var iconButtonSizeMapper = {
     l: 'm',
-    s: 's'
+    s: 's',
 };
 export var Dialog = forwardRef(function (_a, ref) {
     var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, onClose = _a.onClose, children = _a.children, className = _a.className, windowProps = _a.windowProps, closeButtonProps = _a.closeButtonProps, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d, transitionProps = _a.transitionProps, other = __rest(_a, ["open", "variant", "size", "onClose", "children", "className", "windowProps", "closeButtonProps", "hideCloseButton", "transitionProps"]);
     var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = __rest(_e, ["className"]);
     return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ role: 'dialog' }, windowProps), className: cnDialog({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign(__assign({}, (variant === 'fullsize' && {
-            classNames: cnDialog({ animation: 'fullsize' })
+            classNames: cnDialog({ animation: 'fullsize' }),
         })), transitionProps), ref: ref }),
         !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close", "aria-label": "\u0437\u0430\u043A\u0440\u044B\u0442\u044C" }, closeButtonRestProps, { className: cnDialog('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CloseIcon, compressed: true }))),
         React.createElement("div", { className: cnDialog('InnerContainer') }, children)));

package/__inner__/esm/components/Divider/Divider.js

@@ -16,7 +16,7 @@ export var cnDivider = cn('Divider');
 export var Divider = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'Divider'
+        name: 'Divider',
     });
     var _a = props.color, color = _a === void 0 ? 'primary' : _a, _b = props.as, Tag = _b === void 0 ? 'hr' : _b, _c = props.size, size = _c === void 0 ? 's' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, display = props.display, className = props.className, flexItem = props.flexItem, other = __rest(props, ["color", "as", "size", "orientation", "display", "className", "flexItem"]);
     return (React.createElement(Tag, __assign({ className: cnDivider({ display: display, size: size, orientation: orientation, flexItem: flexItem, color: color }, [

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

@@ -49,7 +49,7 @@ export declare const Drawer: React.ForwardRefExoticComponent<{
     /** Признак по которому кнопка закрытия шторки будет скрыта */
     hideCloseButton?: boolean | undefined;
     /** Свойства кнопки закрытия шторки */
-    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+    closeButtonProps?: (Omit<IconButtonProps, "icon"> & {
         'data-testid'?: string | undefined;
     }) | undefined;
     /** Кастомный класс контейнера шторки */

package/__inner__/esm/components/Drawer/Drawer.js

@@ -11,7 +11,7 @@ export var drawerSizeVariant = ['s', 'l'];
 export var drawerPlacementVariant = ['left', 'right'];
 var iconButtonSizeMapper = {
     l: 'm',
-    s: 's'
+    s: 's',
 };
 export var Drawer = forwardRef(function (_a, ref) {
     var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, _e = _a.hideCloseButton, hideCloseButton = _e === void 0 ? false : _e, onClose = _a.onClose, children = _a.children, className = _a.className, transitionProps = _a.transitionProps, closeButtonProps = _a.closeButtonProps, other = __rest(_a, ["open", "variant", "size", "placement", "hideCloseButton", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);

package/__inner__/esm/components/FieldControl/FieldControl.js

@@ -10,7 +10,7 @@ export var cnFieldControl = cn('FieldControl');
 export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'FieldControl'
+        name: 'FieldControl',
     });
     var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = __rest(props, ["as", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
     var focused = focusedProp;
@@ -27,7 +27,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
         disabled: disabled,
         required: required,
         error: error,
-        fullWidth: fullWidth
+        fullWidth: fullWidth,
     };
     var _b = __read(useState(initialState), 2), state = _b[0], setState = _b[1];
     var label = state.label, value = state.value;
@@ -60,7 +60,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
             size: size,
             filled: filled,
             focused: focused,
-            hasLabel: !!label
+            hasLabel: !!label,
         }, [className]) }, otherProp, { ref: ref }),
         React.createElement(FieldControlContext.Provider, { value: [
                 {
@@ -71,7 +71,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
                     size: size,
                     filled: filled,
                     focused: focused,
-                    value: value
+                    value: value,
                 },
                 setState,
             ] }, children)));

package/__inner__/esm/components/FieldInput/FieldInput.js

@@ -16,7 +16,7 @@ export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
         value: valueProp,
         name: 'FieldInput',
         state: 'value',
-        defaultValue: defaultValue
+        defaultValue: defaultValue,
     }), 2), valueState = _e[0], setValueState = _e[1];
     var filled = !!valueState || valueState === 0;
     var required = requiredProp;

package/__inner__/esm/components/FilePicker/FilePicker.js

@@ -16,7 +16,7 @@ export var cnFilePicker = cn('FilePicker');
 export var FilePicker = forwardRef(function (inProps, ref) {
     var _a = useThemeProps({
         props: inProps,
-        name: 'FilePicker'
+        name: 'FilePicker',
     }), _b = _a.size, size = _b === void 0 ? FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.placeholder, placeholder = _c === void 0 ? FILE_PICKER_DEFAULT_PLACEHOLDER : _c, _d = _a.disabled, disabled = _d === void 0 ? FILE_PICKER_DEFAULT_DISABLED : _d, _e = _a.required, required = _e === void 0 ? FILE_PICKER_DEFAULT_REQUIRED : _e, _f = _a.fullWidth, fullWidth = _f === void 0 ? FILE_PICKER_DEFAULT_FULL_WIDTH : _f, _g = _a.disableTruncate, disableTruncate = _g === void 0 ? FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _g, _h = _a.multiple, multiple = _h === void 0 ? FILE_PICKER_DEFAULT_MULTIPLE : _h, _j = _a.clearText, clearText = _j === void 0 ? FILE_PICKER_DEFAULT_MULTIPLE_CLEAR_TEXT : _j, _k = _a.renderRight, renderRight = _k === void 0 ? AttachmentIcon : _k, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRefProp = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, labelRef = _a.labelRef, className = _a.className, other = __rest(_a, ["size", "placeholder", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "labelRef", "className"]);
     var fieldRef = useRef(null);
     var inputRef = useRef(null);
@@ -60,7 +60,7 @@ export var FilePicker = forwardRef(function (inProps, ref) {
             focused: focused,
             disabled: disabled,
             required: required,
-            fullWidth: fullWidth
+            fullWidth: fullWidth,
         }, [className]), ref: useMultiRef([fieldRef, ref]) }),
         React.createElement("label", { className: cnFilePicker('Body') },
             React.createElement(FieldIcon, { className: cnFilePicker('RenderLeft'), icon: renderLeft, size: size }),

package/__inner__/esm/components/FormControlLabel/FormControlLabel.js

@@ -17,7 +17,7 @@ export var FormControlLabel = polymorphicComponentWithRef(function (_a, ref) {
             align: align,
             labelPlacement: labelPlacement,
             disabled: disabled,
-            size: size
+            size: size,
         }, [className]), ref: ref }, other),
         children,
         label !== null && label !== undefined && (React.createElement("span", { className: cnFormControlLabel('Content') }, label))));

package/__inner__/esm/components/FormGroup/FormGroup.js

@@ -9,7 +9,7 @@ export var cnFormGroup = cn('FormGroup');
 export var FormGroup = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'FormGroup'
+        name: 'FormGroup',
     });
     var _a = props.direction, direction = _a === void 0 ? FORM_GROUP_DEFAULT_DIRECTION : _a, _b = props.as, Tag = _b === void 0 ? FORM_GROUP_DEFAULT_AS : _b, _c = props.size, size = _c === void 0 ? FORM_GROUP_DEFAULT_SIZE : _c, children = props.children, className = props.className, other = __rest(props, ["direction", "as", "size", "children", "className"]);
     return (React.createElement(Tag, __assign({ className: cnFormGroup({ direction: direction, size: size }, [className]) }, other, { ref: ref }), children));

package/__inner__/esm/components/FormTitle/FormTitle.js

@@ -9,7 +9,7 @@ export var cnFormTitle = cn('FormTitle');
 export var FormTitle = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'FormTitle'
+        name: 'FormTitle',
     });
     var _a = props.size, size = _a === void 0 ? FORM_TITLE_DEFAULT_SIZE : _a, className = props.className, children = props.children, other = __rest(props, ["size", "className", "children"]);
     return (React.createElement("div", __assign({ className: cnFormTitle({ size: size }, [className]) }, other, { ref: ref }), children));

package/__inner__/esm/components/Grid/Grid.js

@@ -27,7 +27,7 @@ export var cnGrid = cn('Grid');
 export var Grid = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'Grid'
+        name: 'Grid',
     });
     var _a = props.cols, cols = _a === void 0 ? GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "children", "className"]);
     return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, { cols: cols, gap: gap, colGap: colGap, rowGap: rowGap }), className) }, other, { ref: ref }), children));

package/__inner__/esm/components/Grid/GridItem.js

@@ -14,14 +14,14 @@ export var cnGridItem = cn('GridItem');
 export var GridItem = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'GridItem'
+        name: 'GridItem',
     });
     var children = props.children, className = props.className, col = props.col, colStart = props.colStart, row = props.row, rowStart = props.rowStart, _a = props.as, Tag = _a === void 0 ? 'div' : _a, other = __rest(props, ["children", "className", "col", "colStart", "row", "rowStart", "as"]);
     return (React.createElement(Tag, __assign({ className: classnames(cnGridItem({}), useGenerateGridModsCn(cnGridItem, {
             col: col,
             colStart: colStart,
             row: row,
-            rowStart: rowStart
+            rowStart: rowStart,
         }), className) }, other, { ref: ref }), children));
 });
 GridItem.displayName = 'GridItem';

package/__inner__/esm/components/IconButton/IconButton.css

@@ -177,11 +177,14 @@
     --icon-button-font-color: var(--color-content-disabled);
   }
 
+  .IconButton_variant_contained.IconButton_disabled svg, .IconButton_variant_contained.IconButton_loading svg, .IconButton_variant_outlined.IconButton_disabled svg, .IconButton_variant_outlined.IconButton_loading svg, .IconButton_variant_ghost.IconButton_disabled svg, .IconButton_variant_ghost.IconButton_loading svg, .IconButton_variant_function.IconButton_disabled svg, .IconButton_variant_function.IconButton_loading svg, .IconButton_variant_floating.IconButton_disabled svg, .IconButton_variant_floating.IconButton_loading svg {
+      color: currentcolor;
+    }
+
   .IconButton_variant_contained.IconButton_disabled,
   .IconButton_variant_contained.IconButton_loading,
   .IconButton_variant_floating.IconButton_disabled,
   .IconButton_variant_floating.IconButton_loading {
-    --icon-button-bg-color: var(--color-background-disabled);
     --icon-button-hover-bg-color: var(--color-background-disabled);
     --icon-button-active-bg-color: var(--color-background-disabled);
   }

package/__inner__/esm/components/IconButton/IconButton.js

@@ -22,12 +22,12 @@ var loaderSizeMapper = {
     xs: 's',
     s: 's',
     m: 'm',
-    l: 'l'
+    l: 'l',
 };
 export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'IconButton'
+        name: 'IconButton',
     });
     var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var iconSize = getIconSizeToFormElement(size);
@@ -53,7 +53,7 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
             disabled: disabled,
             loading: loading,
             compressed: compressed,
-            rounded: rounded
+            rounded: rounded,
         }, [className]), disabled: isInteractionPrevented, onClick: handleClick }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), resolvedChildren));
 });
 IconButton.displayName = 'IconButton';

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

@@ -16,18 +16,18 @@ export var cnInput = cn('Input');
 export var Input = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'Input'
+        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;
@@ -35,10 +35,10 @@ export var Input = forwardRef(function (inProps, ref) {
                 e.preventDefault();
                 (_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
-        }
+        },
     });
     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),