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

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

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

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

@@ -3,7 +3,8 @@ 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.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var react_is_1 = require("react-is");
 var useBoolean_1 = require("../../hooks/useBoolean");
 var useControlled_1 = require("../../hooks/useControlled");
 var useEventListener_1 = require("../../hooks/useEventListener");
@@ -15,58 +16,88 @@ var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWit
 var List_1 = require("../List");
 var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
-var DataListProvider_1 = require("./DataListProvider");
+var helpers_1 = require("./helpers");
 var index_1 = require("./index");
-var useDataListNavigation_1 = require("./useDataListNavigation");
 exports.cnDataList = (0, classname_1.cn)('DataList');
 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 listRef = (0, react_1.useRef)(null);
+    // Состояние представленного компонента с завершенной анимацией
     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 = _g[0], setSelected = _g[1];
+    }), 2), selectedState = _g[0], setSelected = _g[1];
+    var nodes = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
+    var resolvedChildren = (0, react_is_1.isFragment)(children)
+        ? children.props.children
+        : children;
+    var isNotSelectOption = function (child) {
+        return !(0, react_1.isValidElement)(child) ||
+            child.type !== index_1.DataListOption ||
+            !!child.props.disabled;
+    };
+    react_1.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 = 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 });
+        var params = {
+            multiple: inProps.multiple,
+            onSelect: inProps.onSelect,
+            selected: selectedState,
+            setSelected: setSelected,
+        };
+        if ((0, helpers_1.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; })
+                : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((selected_1 || [])), false), [value], false);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: res });
+            setSelected_1(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 });
+        if ((0, helpers_1.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 = (0, useDataListNavigation_1.useDataListNavigation)({
-        name: name,
+    // Навигация по списку
+    var _h = (0, helpers_1.useDataListNavigation)({
         active: opened,
-        selected: lastSelectedOption,
-        onSelect: function (e, selectedItem) {
-            handleSelect(e, selectedItem);
+        items: tslib_1.__spreadArray([], tslib_1.__read(nodes.keys()), false),
+        current: (0, helpers_1.lastSelectedValue)(selectedState),
+        onSelect: function (event, item) {
+            handleSelect(event, item || '');
         },
-    }), onKeyDown = _h.onKeyDown, listRef = _h.ref, navigation = tslib_1.__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 = tslib_1.__read((0, react_1.useState)({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
+    // Находит элемент по ключу
+    (0, react_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]);
+    // Прокрутка списка
+    (0, helpers_1.useScrollContainerToElement)(listRef, selectedElRef, focused ? 'smooth' : 'instant');
+    // Назначает элементу контроля событие управления списком с клавиатуры
     (0, useEventListener_1.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}
     (0, useEventListener_1.useEventListener)({
         active: open,
         eventName: 'keydown',
@@ -77,8 +108,39 @@ var DataListRender = function (inProps, ref) {
             }
         },
     });
+    // Представление раскрывающегося списка
+    var renderChildren = react_1.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 (0, react_1.cloneElement)(elementChild, tslib_1.__assign({}, props));
+    });
     return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
-            classNames: (0, exports.cnDataList)({ animation: true }),
+            classNames: 'DataList-animation',
         } }, other, { onEntered: function () {
             onEntered();
             onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
@@ -86,11 +148,10 @@ var DataListRender = function (inProps, ref) {
             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))));
+        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)('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), renderChildren)));
 };
 exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListRender);

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataListCheckIcon = void 0;
+var tslib_1 = require("tslib");
+require("./DataListCheckIcon.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var classname_1 = require("../../../../utils/classname");
+var List_1 = require("../../../List");
+var cnDataListCheckIcon = (0, classname_1.cn)('DataListCheckIcon');
+var DataListCheckIcon = function (_a) {
+    var size = _a.size, selected = _a.selected;
+    return (react_1.default.createElement("div", { className: cnDataListCheckIcon('', { size: size }) }, selected && (react_1.default.createElement(List_1.ListItemIcon, null,
+        react_1.default.createElement(icons_1.TickIcon, { size: size })))));
+};
+exports.DataListCheckIcon = DataListCheckIcon;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataListCheckIcon"), exports);

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataListOption = exports.cnDataListOption = void 0;
+var tslib_1 = require("tslib");
+require("./DataListOption.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../../../utils/getIconSizeToFormElement");
+var isString_1 = require("../../../../utils/isString");
+var List_1 = require("../../../List");
+var constants_1 = require("../../constants");
+var DataListCheckIcon_1 = require("../DataListCheckIcon");
+exports.cnDataListOption = (0, classname_1.cn)('DataListOption');
+var DataListContent = function (_a) {
+    var label = _a.label, selected = _a.selected;
+    var size = (0, List_1.useListContext)().size;
+    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(List_1.ListItemText, { className: (0, exports.cnDataListOption)('Text'), primary: label }),
+        react_1.default.createElement(DataListCheckIcon_1.DataListCheckIcon, { selected: selected, size: iconSize })));
+};
+exports.DataListOption = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.disabled, disabled = _b === void 0 ? constants_1.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 = tslib_1.__rest(_a, ["disabled", "value", "label", "children", "className", "highlighted", "selected", "focused"]);
+    var renderChildren = function () {
+        if ((0, isString_1.isString)(children)) {
+            return react_1.default.createElement(DataListContent, { label: children, selected: selected });
+        }
+        if (label && !children) {
+            return react_1.default.createElement(DataListContent, { label: label, selected: selected });
+        }
+        return children;
+    };
+    return (react_1.default.createElement(List_1.ListItem, tslib_1.__assign({ role: "option", "aria-selected": selected, "aria-disabled": disabled, "data-label": label, "data-value": value, className: (0, exports.cnDataListOption)({
+            disabled: disabled,
+            highlighted: !disabled && highlighted,
+            focused: !disabled && focused,
+        }, [className]) }, other, { ref: ref }), renderChildren()));
+});
+exports.DataListOption.displayName = 'DataListOption';

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

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

package/__inner__/cjs/components/{Select/components/SelectCheckIcon → DataList/components/DataListOption}/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./SelectCheckIcon"), exports);
+tslib_1.__exportStar(require("./DataListOption"), exports);

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = exports.DATA_LIST_DEFAULT_TAG = void 0;
+exports.DATA_LIST_OPTION_DEFAULT_TAG = exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = exports.DATA_LIST_DEFAULT_TAG = void 0;
+var constants_1 = require("../List/constants");
 var Paper_1 = require("../Paper");
 exports.DATA_LIST_DEFAULT_TAG = Paper_1.Paper;
 exports.DATA_LIST_DEFAULT_SIZE = 'm';
 exports.DATA_LIST_DEFAULT_OPEN = false;
 exports.DATA_LIST_OPTION_DEFAULT_DISABLED = false;
+exports.DATA_LIST_OPTION_DEFAULT_TAG = constants_1.LIST_ITEM_DEFAULT_TAG;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./lastSelectedValue"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./useDataListNavigation"), exports);
+tslib_1.__exportStar(require("./useScrollContainerToElement"), exports);

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastSelectedValue = void 0;
+// Фиксируем последний выбранный элемент в списке, чтобы потом переводить на него scroll в контейнере
+var lastSelectedValue = function (selected) {
+    return Array.isArray(selected) ? selected[selected.length - 1] : selected;
+};
+exports.lastSelectedValue = lastSelectedValue;

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

@@ -0,0 +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/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__/cjs/components/DataList/helpers/useDataListNavigation.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataListNavigation = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var getNextIndex_1 = require("../../../utils/getNextIndex");
+var getPrevIndex_1 = require("../../../utils/getPrevIndex");
+var isKey_1 = require("../../../utils/isKey");
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+function useDataListNavigation(_a) {
+    var current = _a.current, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
+    var savedItems = (0, react_1.useRef)(itemsProps);
+    var savedOnSelect = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        savedItems.current = itemsProps;
+    }, [itemsProps]);
+    (0, react_1.useEffect)(function () {
+        savedOnSelect.current = onSelect;
+    }, [onSelect]);
+    var _c = tslib_1.__read((0, react_1.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; }); };
+    // Актуализирует состояние при каждом изменении текущего значения
+    (0, react_1.useEffect)(function () {
+        if (active) {
+            setState(function (prevState) {
+                var _a, _b, _c;
+                return (tslib_1.__assign(tslib_1.__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]);
+    (0, react_1.useEffect)(function () {
+        if (!active) {
+            return undefined;
+        }
+        // Инициализация всех событий
+        var onMouseLeave = function () {
+            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { highlighted: null })); });
+        };
+        var onMouseEnter = function (item) {
+            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { highlighted: item })); });
+        };
+        var onClick = function (event, item) {
+            var _a;
+            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__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 ((0, isKey_1.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 tslib_1.__assign(tslib_1.__assign({}, prevState), { selected: selected_1, focused: selected_1 });
+                });
+                (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, selected_1);
+            }
+            if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.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 = (0, isKey_1.isKey)(event, 'ArrowUp');
+                var newIndex = isArrowUp
+                    ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_c = savedItems.current) === null || _c === void 0 ? void 0 : _c.length) || 0)
+                    : (0, getNextIndex_1.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 tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: newItem });
+            });
+        };
+        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })); });
+        return function () {
+            // Сброс
+            setState({});
+        };
+    }, [active]);
+    return state;
+}
+exports.useDataListNavigation = useDataListNavigation;