@ozen-ui/kit 0.12.0 → 0.13.1

package/__inner__/cjs/components/DataList/DataList.css

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

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

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

package/__inner__/cjs/components/DataList/DataList.js

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

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

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

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

@@ -5,8 +5,6 @@ var react_1 = require("react");
 var constants_1 = require("./constants");
 exports.DataListContext = (0, react_1.createContext)({
     'data-list': '',
-    currentItem: null,
-    keyboardHighlight: false,
     size: constants_1.DATA_LIST_DEFAULT_SIZE,
 });
 var useDataListContext = function () { return (0, react_1.useContext)(exports.DataListContext); };

package/__inner__/cjs/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__/cjs/components/DataList/components/DataListOption.js

@@ -4,45 +4,37 @@ exports.DataListOption = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
-var useMultiRef_1 = require("../../../hooks/useMultiRef");
 var getIconSizeToFormElement_1 = require("../../../utils/getIconSizeToFormElement");
 var List_1 = require("../../List");
 var constants_1 = require("../constants");
 var DataList_1 = require("../DataList");
 var DataListProvider_1 = require("../DataListProvider");
 exports.DataListOption = (0, react_1.forwardRef)(function (_a, ref) {
-    var value = _a.value, onMouseDown = _a.onMouseDown, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, _b = _a.disabled, disabled = _b === void 0 ? constants_1.DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children;
-    var optionRef = (0, react_1.useRef)(null);
-    var _c = (0, DataListProvider_1.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 ? constants_1.DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["value", "onMouseMove", "onMouseLeave", "onClick", "disabled", "children", "className"]);
+    var _c = (0, DataListProvider_1.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 = (0, getIconSizeToFormElement_1.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_1.default.createElement(List_1.ListItem, { role: "option", ref: (0, useMultiRef_1.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: (0, DataList_1.cnDataList)('Option', {
+    return (react_1.default.createElement(List_1.ListItem, tslib_1.__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: (0, DataList_1.cnDataList)('Option', {
             disabled: disabled,
-            highlighted: !disabled && isHighlighted && !keyboardHighlight,
-            outlined: !disabled && isHighlighted && keyboardHighlight,
-        }) },
-        react_1.default.createElement(List_1.ListItemText, { className: (0, DataList_1.cnDataList)('Text', { disabled: disabled }), primary: label }),
+            highlighted: !disabled && highlighted === value,
+            focused: !disabled && focused === value,
+        }, [className]) }, other, { ref: ref }), typeof label === 'string' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(List_1.ListItemText, { className: (0, DataList_1.cnDataList)('Text'), primary: label }),
         react_1.default.createElement("div", { className: (0, DataList_1.cnDataList)('IconWrapper', { size: iconSize }) }, isSelected && (react_1.default.createElement(List_1.ListItemIcon, null,
-            react_1.default.createElement(icons_1.TickIcon, { size: iconSize }))))));
+            react_1.default.createElement(icons_1.TickIcon, { size: iconSize })))))) : (label)));
 });
 exports.DataListOption.displayName = 'DataListOption';

package/__inner__/cjs/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__/cjs/components/DataList/types.js

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

package/__inner__/cjs/components/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__/cjs/components/DataList/useDataListNavigation.js

@@ -3,55 +3,102 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataListNavigation = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var useBoolean_1 = require("../../hooks/useBoolean");
 var useUniqueId_1 = require("../../hooks/useUniqueId");
 var getNextIndex_1 = require("../../utils/getNextIndex");
 var getPrevIndex_1 = require("../../utils/getPrevIndex");
 var isKey_1 = require("../../utils/isKey");
 var scrollContainerToElement_1 = require("../../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));
+};
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
 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 = (0, useUniqueId_1.useUniqueId)(nameProp);
-    var _c = tslib_1.__read((0, react_1.useState)(null), 2), currentItem = _c[0], setCurrentItem = _c[1];
-    var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), keyboardHighlight = _d[0], _e = _d[1], showKeyboardHighlight = _e.on, hideKeyboardHighlight = _e.off;
-    var onKeyDown = function (event) {
+    var ref = (0, react_1.useRef)(null);
+    var _d = tslib_1.__read((0, react_1.useState)(null), 2), current = _d[0], setCurrent = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(), 2), focused = _e[0], serFocused = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)(), 2), highlighted = _f[0], setHighlighted = _f[1];
+    var currentValue = current || selected;
+    var getItemsData = (0, react_1.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]);
+    (0, react_1.useEffect)(function () {
+        if (!active) {
+            return undefined;
+        }
+        var _a = tslib_1.__read(getItemsData(), 2), selectedItem = _a[1];
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            (0, scrollContainerToElement_1.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 ((0, isKey_1.isKey)(event, 'Enter')) {
+            event.preventDefault();
+            if (currentValue)
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, currentValue);
+        }
         if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.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 = tslib_1.__read(getItemsData(), 2), items = _a[0], currentItem = _a[1];
+        var currentIndex = !currentItem ? null : items.indexOf(currentItem);
         var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
         var newIndex = isArrowUp
             ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, items.length)
             : (0, getNextIndex_1.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) {
             (0, scrollContainerToElement_1.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,