@ozen-ui/kit 0.16.0 → 0.17.0-canary.0

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

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './DataList.css';
-import React from 'react';
+import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, useState, } from 'react';
+import { isFragment } from 'react-is';
 import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
@@ -12,58 +13,88 @@ import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWit
 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';
+import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, useScrollContainerToElement, } from './helpers';
+import { DataListOption } from './index';
 export var cnDataList = cn('DataList');
 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 listRef = useRef(null);
+    // Состояние представленного компонента с завершенной анимацией
     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 = _g[0], setSelected = _g[1];
+    }), 2), selectedState = _g[0], setSelected = _g[1];
+    var nodes = useMemo(function () { return new Map(); }, [children]);
+    var resolvedChildren = isFragment(children)
+        ? children.props.children
+        : children;
+    var isNotSelectOption = function (child) {
+        return !isValidElement(child) ||
+            child.type !== DataListOption ||
+            !!child.props.disabled;
+    };
+    Children.forEach(resolvedChildren, function (child, idx) {
+        if (!isNotSelectOption(child)) {
+            nodes.set(child.props.value, idx);
+        }
+    });
     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 });
+        var params = {
+            multiple: inProps.multiple,
+            onSelect: inProps.onSelect,
+            selected: selectedState,
+            setSelected: setSelected,
+        };
+        if (isMultipleParams(params)) {
+            var selected_1 = params.selected, onSelect = params.onSelect, setSelected_1 = params.setSelected;
+            var res = (selected_1 === null || selected_1 === void 0 ? void 0 : selected_1.includes(value || ''))
+                ? selected_1.filter(function (item) { return item !== value; })
+                : __spreadArray(__spreadArray([], __read((selected_1 || [])), false), [value], false);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: res });
+            setSelected_1(res);
         }
-        if (isNotMultipleParams(props)) {
-            res = value;
-            (_c = props.onSelect) === null || _c === void 0 ? void 0 : _c.call(props, event, { name: name, value: value });
+        if (isNotMultipleParams(params)) {
+            var onSelect = params.onSelect, setSelected_2 = params.setSelected;
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: value });
+            setSelected_2(value);
         }
-        setSelected(res || '');
     };
-    // Фиксируем последний выбранный элемент в списке, чтобы потом переводить на него scroll в контейнере
-    var lastSelectedOption = Array.isArray(selected)
-        ? selected[selected.length - 1]
-        : selected;
+    // Навигация по списку
     var _h = useDataListNavigation({
-        name: name,
         active: opened,
-        selected: lastSelectedOption,
-        onSelect: function (e, selectedItem) {
-            handleSelect(e, selectedItem);
+        items: __spreadArray([], __read(nodes.keys()), false),
+        current: lastSelectedValue(selectedState),
+        onSelect: function (event, item) {
+            handleSelect(event, item || '');
         },
-    }), onKeyDown = _h.onKeyDown, listRef = _h.ref, navigation = __rest(_h, ["onKeyDown", "ref"]);
-    // Назначает элементу контроля события управления списком с клавиатуры
+    }), selected = _h.selected, focused = _h.focused, highlighted = _h.highlighted, onKeyDown = _h.onKeyDown, onClick = _h.onClick, onMouseEnter = _h.onMouseEnter, onMouseLeave = _h.onMouseLeave;
+    var _j = __read(useState({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
+    // Находит элемент по ключу
+    useEffect(function () {
+        var _a, _b;
+        var current = focused || selected || '';
+        var idx = nodes.get(current);
+        if (idx) {
+            setSelectedElRef({
+                current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+            });
+        }
+    }, [focused, selected]);
+    // Прокрутка списка
+    useScrollContainerToElement(listRef, selectedElRef, focused ? 'smooth' : 'instant');
+    // Назначает элементу контроля событие управления списком с клавиатуры
     useEventListener({
-        active: open,
+        active: opened,
         eventName: 'keydown',
         element: anchorRef,
-        handler: onKeyDown,
+        handler: function (event) {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        },
     });
-    // Закрывает список нажатию клавиши {Tab}
-    // Событие focusout может не срабатывать на устройствах iOS,
-    // так как многие интерактивные элементы по клику не получают фокус.
+    // Закрывает список по нажатию на клавишу {Tab}
     useEventListener({
         active: open,
         eventName: 'keydown',
@@ -74,8 +105,39 @@ var DataListRender = function (inProps, ref) {
             }
         },
     });
+    // Представление раскрывающегося списка
+    var renderChildren = Children.map(resolvedChildren, function (child) {
+        if (isNotSelectOption(child)) {
+            return child;
+        }
+        var key = child.props.value;
+        var elementChild = child;
+        var props = {
+            onClick: function (event) {
+                var _a, _b;
+                onClick === null || onClick === void 0 ? void 0 : onClick(event, key);
+                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            },
+            onMouseEnter: function (event) {
+                var _a, _b;
+                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(key);
+                (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            },
+            onMouseLeave: function (event) {
+                var _a, _b;
+                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+                (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            },
+            highlighted: key === highlighted,
+            focused: key === focused,
+            selected: Array.isArray(selectedState)
+                ? selectedState.includes(key)
+                : selectedState === key,
+        };
+        return cloneElement(elementChild, __assign({}, props));
+    });
     return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
-            classNames: cnDataList({ animation: true }),
+            classNames: 'DataList-animation',
         } }, other, { onEntered: function () {
             onEntered();
             onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
@@ -83,11 +145,10 @@ var DataListRender = function (inProps, ref) {
             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))));
+        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('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), renderChildren)));
 };
 export var DataList = polymorphicComponentWithRef(DataListRender);

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

@@ -0,0 +1,13 @@
+.DataListCheckIcon {
+  inline-size: var(--data-list-check-icon-size);
+  block-size: var(--data-list-check-icon-size);
+  display: flex;
+}
+
+  .DataListCheckIcon_size_s {
+      --data-list-check-icon-size: 16px;
+    }
+
+  .DataListCheckIcon_size_m {
+      --data-list-check-icon-size: 24px;
+    }

package/__inner__/esm/components/{Select/components/SelectCheckIcon/SelectCheckIcon.d.ts → DataList/components/DataListCheckIcon/DataListCheckIcon.d.ts}

@@ -1,8 +1,8 @@
-import './SelectCheckIcon.css';
+import './DataListCheckIcon.css';
 import React from 'react';
 import { type IconSize } from '@ozen-ui/icons';
 export type SelectCheckIconProps = {
     size?: IconSize;
     selected?: boolean;
 };
-export declare const SelectCheckIcon: React.FC<SelectCheckIconProps>;
+export declare const DataListCheckIcon: React.FC<SelectCheckIconProps>;

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

@@ -0,0 +1,11 @@
+import './DataListCheckIcon.css';
+import React from 'react';
+import { TickIcon } from '@ozen-ui/icons';
+import { cn } from '../../../../utils/classname';
+import { ListItemIcon } from '../../../List';
+var cnDataListCheckIcon = cn('DataListCheckIcon');
+export var DataListCheckIcon = function (_a) {
+    var size = _a.size, selected = _a.selected;
+    return (React.createElement("div", { className: cnDataListCheckIcon('', { size: size }) }, selected && (React.createElement(ListItemIcon, null,
+        React.createElement(TickIcon, { size: size })))));
+};

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

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

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

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

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

@@ -0,0 +1,20 @@
+.DataListOption {
+  cursor: pointer;
+}
+
+  .DataListOption_focused {
+    box-shadow: inset var(--shadow-outline-focused);
+  }
+
+  .DataListOption_highlighted {
+    background-color: var(--color-background-main-hover);
+  }
+
+  .DataListOption_disabled {
+    cursor: not-allowed;
+  }
+
+  .DataListOption_disabled .ListItemText-TextPrimary,
+    .DataListOption_disabled .ListItemText-TextSecondary {
+      color: var(--color-content-tertiary);
+    }

package/__inner__/{cjs/components/DataList/components → esm/components/DataList/components/DataListOption}/DataListOption.d.ts

@@ -1,10 +1,21 @@
+import './DataListOption.css';
 import React from 'react';
 import type { KeyboardEventHandler, MouseEventHandler, ReactNode, ComponentPropsWithRef } from 'react';
+import type { DATA_LIST_OPTION_DEFAULT_TAG } from '../../constants';
+export declare const cnDataListOption: import("@bem-react/classname").ClassNameFormatter;
 export type DataListOptionProps = {
+    /** Значение опции */
+    value: string | number;
+    /** Лейбл опции */
+    label?: string;
     /** Если {true} отображает опцию заблокированной */
     disabled?: boolean;
-    /** Значение, если оно отличается от содержимого опции */
-    value: string;
+    /** Если {true} отображает опцию сфокусированной (клавиатура) */
+    focused?: boolean;
+    /** Если {true} отображает опцию наведенной (мышь) */
+    highlighted?: boolean;
+    /** Если {true} отображает опцию выбранной */
+    selected?: boolean;
     /** Функция обратного вызова обработчик нажатий на клавиатуре */
     onKeyDown?: KeyboardEventHandler<HTMLLIElement>;
     /** Функция обратного вызова обработчик нажатий на клавиатуре */
@@ -12,6 +23,6 @@ export type DataListOptionProps = {
     /** Функция обратного вызова обработчик нажатий на клавиатуре */
     onMouseLeave?: MouseEventHandler<HTMLLIElement>;
     /** Содержимое компонента */
-    children: ReactNode;
-} & ComponentPropsWithRef<'li'>;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithRef<typeof DATA_LIST_OPTION_DEFAULT_TAG>, 'value'>;
 export declare const DataListOption: React.ForwardRefExoticComponent<Omit<DataListOptionProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1,36 @@
+import { __assign, __rest } from "tslib";
+import './DataListOption.css';
+import React, { forwardRef } from 'react';
+import { cn } from '../../../../utils/classname';
+import { getIconSizeToFormElement } from '../../../../utils/getIconSizeToFormElement';
+import { isString } from '../../../../utils/isString';
+import { ListItem, ListItemText, useListContext } from '../../../List';
+import { DATA_LIST_OPTION_DEFAULT_DISABLED } from '../../constants';
+import { DataListCheckIcon } from '../DataListCheckIcon';
+export var cnDataListOption = cn('DataListOption');
+var DataListContent = function (_a) {
+    var label = _a.label, selected = _a.selected;
+    var size = useListContext().size;
+    var iconSize = getIconSizeToFormElement(size);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListItemText, { className: cnDataListOption('Text'), primary: label }),
+        React.createElement(DataListCheckIcon, { selected: selected, size: iconSize })));
+};
+export var DataListOption = forwardRef(function (_a, ref) {
+    var _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, value = _a.value, label = _a.label, children = _a.children, className = _a.className, highlighted = _a.highlighted, selected = _a.selected, focused = _a.focused, other = __rest(_a, ["disabled", "value", "label", "children", "className", "highlighted", "selected", "focused"]);
+    var renderChildren = function () {
+        if (isString(children)) {
+            return React.createElement(DataListContent, { label: children, selected: selected });
+        }
+        if (label && !children) {
+            return React.createElement(DataListContent, { label: label, selected: selected });
+        }
+        return children;
+    };
+    return (React.createElement(ListItem, __assign({ role: "option", "aria-selected": selected, "aria-disabled": disabled, "data-label": label, "data-value": value, className: cnDataListOption({
+            disabled: disabled,
+            highlighted: !disabled && highlighted,
+            focused: !disabled && focused,
+        }, [className]) }, other, { ref: ref }), renderChildren()));
+});
+DataListOption.displayName = 'DataListOption';

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

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

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

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

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

@@ -2,3 +2,4 @@ export declare const DATA_LIST_DEFAULT_TAG: import("../../utils/polymorphicCompo
 export declare const DATA_LIST_DEFAULT_SIZE = "m";
 export declare const DATA_LIST_DEFAULT_OPEN = false;
 export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;
+export declare const DATA_LIST_OPTION_DEFAULT_TAG = "li";

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

@@ -1,5 +1,7 @@
+import { LIST_ITEM_DEFAULT_TAG } from '../List/constants';
 import { Paper } from '../Paper';
 export var DATA_LIST_DEFAULT_TAG = Paper;
 export var DATA_LIST_DEFAULT_SIZE = 'm';
 export var DATA_LIST_DEFAULT_OPEN = false;
 export var DATA_LIST_OPTION_DEFAULT_DISABLED = false;
+export var DATA_LIST_OPTION_DEFAULT_TAG = LIST_ITEM_DEFAULT_TAG;

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

@@ -0,0 +1,4 @@
+export * from './lastSelectedValue';
+export * from './types';
+export * from './useDataListNavigation';
+export * from './useScrollContainerToElement';

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

@@ -0,0 +1,4 @@
+export * from './lastSelectedValue';
+export * from './types';
+export * from './useDataListNavigation';
+export * from './useScrollContainerToElement';

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

@@ -0,0 +1 @@
+export declare const lastSelectedValue: <T>(selected: T) => any;

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

@@ -0,0 +1,4 @@
+// Фиксируем последний выбранный элемент в списке, чтобы потом переводить на него scroll в контейнере
+export var lastSelectedValue = function (selected) {
+    return Array.isArray(selected) ? selected[selected.length - 1] : selected;
+};

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

@@ -0,0 +1,10 @@
+import type { DataListBaseProps, DataListSelected } from '../index';
+export type SetSelect<MULTIPLE extends boolean> = (newValue: DataListSelected<MULTIPLE>) => void;
+export type SelectedParams<MULTIPLE extends boolean = false> = {
+    multiple: DataListBaseProps<MULTIPLE>['multiple'];
+    onSelect: DataListBaseProps<MULTIPLE>['onSelect'];
+    selected: DataListSelected<MULTIPLE>;
+    setSelected: SetSelect<MULTIPLE>;
+};
+export declare const isMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<true>;
+export declare const isNotMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<false>;

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

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

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

@@ -0,0 +1,23 @@
+import type { MouseEvent } from 'react';
+export type UseListNavigationItem = string | number | null;
+export type UseListNavigationItems = UseListNavigationItem[];
+export type UseListNavigationProps = {
+    active?: boolean;
+    items?: UseListNavigationItems;
+    current?: UseListNavigationItem;
+    onSelect?: (event: KeyboardEvent | MouseEvent<HTMLElement>, item?: UseListNavigationItem) => void;
+};
+export type UseListNavigationState = {
+    focused?: UseListNavigationItem;
+    selected?: UseListNavigationItem;
+    highlighted?: UseListNavigationItem;
+};
+export type UseListNavigationEvents = {
+    onMouseLeave?: () => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onClick?: (event: MouseEvent<HTMLElement>, item: UseListNavigationItem) => void;
+    onMouseEnter?: (item: UseListNavigationItem) => void;
+};
+export type UseListNavigationReturn = UseListNavigationState & UseListNavigationEvents;
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export declare function useDataListNavigation({ current, onSelect, active, items: itemsProps, }: UseListNavigationProps): UseListNavigationReturn;

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

@@ -0,0 +1,81 @@
+import { __assign, __read } from "tslib";
+import { useEffect, useState, useRef } from 'react';
+import { getNextIndex } from '../../../utils/getNextIndex';
+import { getPrevIndex } from '../../../utils/getPrevIndex';
+import { isKey } from '../../../utils/isKey';
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export function useDataListNavigation(_a) {
+    var current = _a.current, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
+    var savedItems = useRef(itemsProps);
+    var savedOnSelect = useRef();
+    useEffect(function () {
+        savedItems.current = itemsProps;
+    }, [itemsProps]);
+    useEffect(function () {
+        savedOnSelect.current = onSelect;
+    }, [onSelect]);
+    var _c = __read(useState({}), 2), state = _c[0], setState = _c[1];
+    var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
+    // Актуализирует состояние при каждом изменении текущего значения
+    useEffect(function () {
+        if (active) {
+            setState(function (prevState) {
+                var _a, _b, _c;
+                return (__assign(__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
+            });
+        }
+    }, [active, current]);
+    useEffect(function () {
+        if (!active) {
+            return undefined;
+        }
+        // Инициализация всех событий
+        var onMouseLeave = function () {
+            setState(function (prevState) { return (__assign(__assign({}, prevState), { highlighted: null })); });
+        };
+        var onMouseEnter = function (item) {
+            setState(function (prevState) { return (__assign(__assign({}, prevState), { highlighted: item })); });
+        };
+        var onClick = function (event, item) {
+            var _a;
+            setState(function (prevState) { return (__assign(__assign({}, prevState), { focused: item === prevState.focused ? item : null, selected: item })); });
+            (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
+        };
+        var onKeyDown = function (event) {
+            var _a;
+            if (isKey(event, 'Enter')) {
+                event.preventDefault();
+                var selected_1;
+                setState(function (prevState) {
+                    var _a;
+                    selected_1 = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
+                    return __assign(__assign({}, prevState), { selected: selected_1, focused: selected_1 });
+                });
+                (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, selected_1);
+            }
+            if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+                return;
+            }
+            event.preventDefault();
+            setState(function (prevState) {
+                var _a, _b, _c, _d, _e;
+                var selected = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
+                var currentIndex = typeof selected !== 'undefined'
+                    ? (_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.indexOf(selected)
+                    : null;
+                var isArrowUp = isKey(event, 'ArrowUp');
+                var newIndex = isArrowUp
+                    ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_c = savedItems.current) === null || _c === void 0 ? void 0 : _c.length) || 0)
+                    : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.length) || 0);
+                var newItem = (_e = savedItems.current) === null || _e === void 0 ? void 0 : _e[newIndex];
+                return __assign(__assign({}, prevState), { focused: newItem });
+            });
+        };
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })); });
+        return function () {
+            // Сброс
+            setState({});
+        };
+    }, [active]);
+    return state;
+}

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

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { ScrollContainerToElement } from '../../../utils/scrollContainerToElement';
+export declare function useScrollContainerToElement(container: RefObject<HTMLElement>, element: RefObject<HTMLElement>, behavior?: ScrollContainerToElement['behavior']): void;

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

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { scrollContainerToElement } from '../../../utils/scrollContainerToElement';
+export function useScrollContainerToElement(container, element, behavior) {
+    useEffect(function () {
+        scrollContainerToElement({
+            container: container.current,
+            element: element.current,
+            behavior: behavior,
+        });
+    }, [container, element]);
+}

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

@@ -5,11 +5,12 @@ import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '
 import type { ListProps } from '../List';
 import type { PopoverBaseProps } from '../Popover';
 import type { DATA_LIST_DEFAULT_TAG } from './constants';
+export type DataListValue = string | number;
+export type DataListSelected<MULTIPLE extends boolean> = (MULTIPLE extends true ? DataListValue[] : DataListValue) | undefined;
 export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
-    value: MULTIPLE extends true ? string[] : string;
+    value: DataListSelected<MULTIPLE>;
 };
-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> = {
     /** Имя списка */
@@ -33,8 +34,6 @@ export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Свойства компонента List */
     listProps?: ListProps;
 } & 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,2 +1 @@
-export var isMultipleParams = function (params) { return !!params.multiple; };
-export var isNotMultipleParams = function (params) { return !params.multiple; };
+export {};

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

@@ -68,6 +68,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
                     fullWidth: fullWidth,
                     disabled: disabled,
                     required: required,
+                    label: label,
                     size: size,
                     filled: filled,
                     focused: focused,

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

@@ -8,7 +8,7 @@
   padding: 0;
   box-sizing: border-box;
   display: inline-flex;
-  flex-shrink: 1;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   cursor: pointer;

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

@@ -18,7 +18,7 @@ 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, 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 _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, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, inputRef = props.inputRef, labelRef = props.labelRef, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "inputRef", "labelRef"]);
     var bodyInnerRef = useRef(null);
     var fieldInnerRef = useRef(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши

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

@@ -8,12 +8,13 @@ export type InputTypeVariant = (typeof inputTypeVariant)[number];
 export type InputSizeVariant = FormElementSizeVariant;
 type InputPropsDeprecated = {
     /**
-     * deprecated
      * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
      * */
     labelRef?: FieldLabelProps['ref'];
-    /** deprecated
+    /**
      * Ссылка на элемент input
+     * @deprecated Используйте inputProps.ref
      * */
     inputRef?: Ref<HTMLInputElement>;
 };