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

package/__inner__/cjs/components/List/List.css

@@ -8,6 +8,7 @@
   gap: var(--list-gap);
   padding: var(--list-gutter) 0;
   margin: 0;
+  position: relative;
   outline: none;
 }
 

package/__inner__/cjs/components/Menu/Menu.css

@@ -27,7 +27,6 @@
     background: transparent;
   }
   .Menu {
-  scroll-behavior: smooth;
   overflow: hidden auto;
   max-block-size: 40vb;
 }

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.js

@@ -12,14 +12,14 @@ var constants_1 = require("../../../List/constants");
 exports.cnMenuItem = (0, classname_1.cn)('MenuItem');
 exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'MenuItem' });
-    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = tslib_1.__rest(props, ["children", "selected", "value", "label", "autoFocus", "className", "as"]);
+    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, disabled = props.disabled, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = tslib_1.__rest(props, ["children", "selected", "value", "label", "autoFocus", "disabled", "className", "as"]);
     var innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         var _a;
-        if (autoFocus) {
+        if (autoFocus && !disabled) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-    }, [autoFocus]);
-    return (react_1.default.createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
+    }, [autoFocus, disabled]);
+    return (react_1.default.createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/__inner__/cjs/components/Menu/components/MenuList/MenuList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListProps } from '../../../List';
 export type MenuListProps = {
-    /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
+    /** Если {true} устанавливает автофокус на первый активный элемент в списке */
     autoFocus?: boolean;
-} & ListProps;
+} & ListProps<'div'>;
 export declare const MenuList: React.ForwardRefExoticComponent<Omit<MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Menu/components/MenuList/MenuList.js

@@ -6,61 +6,79 @@ var react_1 = tslib_1.__importStar(require("react"));
 var react_is_1 = require("react-is");
 var useMultiRef_1 = require("../../../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var setRef_1 = require("../../../../utils/setRef");
 var List_1 = require("../../../List");
 var useMenuFocusList_1 = require("../../useMenuFocusList");
 var MenuItem_1 = require("../MenuItem");
+var isNotSelectOption = function (child) {
+    return !(0, react_1.isValidElement)(child) || (child === null || child === void 0 ? void 0 : child.type) !== MenuItem_1.MenuItem || !!child.props.disabled;
+};
 exports.MenuList = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'MenuList' });
-    var children = props.children, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, other = tslib_1.__rest(props, ["children", "autoFocus"]);
-    var nodesRef = (0, react_1.useRef)([]);
-    var onKeyDown = (0, useMenuFocusList_1.useMenuFocusList)(nodesRef.current).onKeyDown;
+    var _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, children = props.children, onMouseDownProp = props.onMouseDown, other = tslib_1.__rest(props, ["autoFocus", "children", "onMouseDown"]);
+    var listRef = (0, react_1.useRef)(null);
+    var _b = tslib_1.__read((0, react_1.useState)({}), 2), nodes = _b[0], setNodes = _b[1];
+    var onKeyDown = (0, useMenuFocusList_1.useMenuFocusList)(Object.values(nodes)).onKeyDown;
     var activeItemIndex = -1;
+    var focusedItemIndex = -1;
     var resolvedChildren = (0, react_is_1.isFragment)(children)
         ? children.props.children
         : children;
     react_1.Children.forEach(resolvedChildren, function (child, index) {
-        if (!(0, react_1.isValidElement)(child) ||
-            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem_1.MenuItem ||
-            child.props.disabled) {
+        if (isNotSelectOption(child)) {
             return;
         }
-        if (child.props.selected) {
+        if (child.props.autoFocus || child.props.selected) {
             activeItemIndex = index;
+            focusedItemIndex = index;
         }
         else if (activeItemIndex === -1) {
             activeItemIndex = index;
+            if (autoFocus) {
+                focusedItemIndex = index;
+            }
         }
     });
-    return (react_1.default.createElement(List_1.List, tslib_1.__assign({ role: "menu", as: "div", tabIndex: -1, onClick: function (e) {
-            var _a;
-            if (e.target === e.currentTarget) {
-                (_a = nodesRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }, ref: ref }, other), react_1.Children.map(resolvedChildren, function (child, index) {
-        if (!(0, react_1.isValidElement)(child) ||
-            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem_1.MenuItem ||
-            child.props.disabled) {
+    var renderChildren = react_1.Children.map(resolvedChildren, function (child, index) {
+        if (isNotSelectOption(child)) {
             return child;
         }
         var isActiveElement = activeItemIndex === index;
+        var isFocusedElement = focusedItemIndex === index;
         var elementChild = child;
+        var ref = function (ref) {
+            (0, setRef_1.setRef)(elementChild.ref, ref);
+            if (ref) {
+                setNodes(function (prevNodes) {
+                    var _a;
+                    return (tslib_1.__assign(tslib_1.__assign({}, prevNodes), (_a = {}, _a[index] = ref, _a)));
+                });
+            }
+            else {
+                setNodes(function (prevNodes) {
+                    var obj = tslib_1.__assign({}, prevNodes);
+                    delete obj[index];
+                    return obj;
+                });
+            }
+        };
         var props = {
+            ref: ref,
             tabIndex: isActiveElement ? 0 : -1,
-            autoFocus: autoFocus && isActiveElement,
+            autoFocus: isFocusedElement,
             onKeyDown: function (event) {
                 var _a, _b;
                 onKeyDown(event);
                 (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
             },
         };
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        var ref = (0, useMultiRef_1.useMultiRef)([
-            elementChild.ref,
-            function (ref) {
-                nodesRef.current.push(ref);
-            },
-        ]);
-        return react_1.default.cloneElement(elementChild, tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref }));
-    })));
+        return react_1.default.cloneElement(elementChild, tslib_1.__assign({}, props));
+    });
+    return (react_1.default.createElement(List_1.List, tslib_1.__assign({ onMouseDown: function (event) {
+            if (event.target === listRef.current) {
+                event.preventDefault();
+            }
+            onMouseDownProp === null || onMouseDownProp === void 0 ? void 0 : onMouseDownProp(event);
+        }, role: "menu", as: "div", tabIndex: -1, ref: (0, useMultiRef_1.useMultiRef)([ref, listRef]) }, other), renderChildren));
 });
 exports.MenuList.displayName = 'MenuList';

package/__inner__/cjs/components/Menu/useMenuFocusList.js

@@ -5,17 +5,27 @@ var react_1 = require("react");
 var getNextIndex_1 = require("../../utils/getNextIndex");
 var getPrevIndex_1 = require("../../utils/getPrevIndex");
 var isKey_1 = require("../../utils/isKey");
+var isKeys_1 = require("../../utils/isKeys");
 function useMenuFocusList(nodes) {
     var savedNodes = (0, react_1.useRef)(nodes);
     (0, react_1.useEffect)(function () {
         savedNodes.current = nodes;
     }, [nodes]);
     var onKeyDown = (0, react_1.useCallback)(function (event) {
-        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
+        var _a, _b;
+        if (!(0, isKeys_1.isKeys)(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
             return;
         }
         event.preventDefault();
         var items = savedNodes.current;
+        if ((0, isKey_1.isKey)(event, 'Home')) {
+            (_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if ((0, isKey_1.isKey)(event, 'End')) {
+            (_b = items === null || items === void 0 ? void 0 : items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
         var currentEl = event.target;
         var currentIndex = items.indexOf(currentEl);
         var newIndex = (0, isKey_1.isKey)(event, 'ArrowUp')

package/__inner__/cjs/components/Select/Select.js

@@ -9,7 +9,7 @@ var useControlled_1 = require("../../hooks/useControlled");
 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 isKeys_1 = require("../../utils/isKeys");
 var DataList_1 = require("../DataList");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
@@ -93,10 +93,7 @@ var SelectRender = function (inProps, ref) {
     };
     /** Управление элементом контроля через клавиатуру */
     var handleKeyDown = function (event) {
-        if (((0, isKey_1.isKey)(event, 'Space') ||
-            (0, isKey_1.isKey)(event, 'ArrowDown') ||
-            (0, isKey_1.isKey)(event, 'ArrowUp')) &&
-            !open) {
+        if ((0, isKeys_1.isKeys)(event, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
             event.preventDefault();
             handleToggle();
         }

package/__inner__/cjs/hooks/useFocusList/useFocusList.js

@@ -5,15 +5,24 @@ var react_1 = require("react");
 var getNextIndex_1 = require("../../utils/getNextIndex");
 var getPrevIndex_1 = require("../../utils/getPrevIndex");
 var isKey_1 = require("../../utils/isKey");
+var isKeys_1 = require("../../utils/isKeys");
 var useUniqueId_1 = require("../useUniqueId");
 function useFocusList() {
     var name = (0, useUniqueId_1.useUniqueId)();
     var onKeyDown = (0, react_1.useCallback)(function (event) {
-        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
+        if (!(0, isKeys_1.isKeys)(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
             return;
         }
         event.preventDefault();
         var items = document.querySelectorAll("[data-focus-list=\"".concat(name, "\"]"));
+        if ((0, isKey_1.isKey)(event, 'Home')) {
+            items.item(0).focus();
+            return;
+        }
+        if ((0, isKey_1.isKey)(event, 'Home')) {
+            items.item(items.length - 1).focus();
+            return;
+        }
         var currentEl = event.target;
         var currentIndex = Array.from(items).indexOf(currentEl);
         var newIndex = (0, isKey_1.isKey)(event, 'ArrowUp')

package/__inner__/cjs/hooks/useMultiRef/useMultiRef.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMultiRef = void 0;
 var react_1 = require("react");
+var setRef_1 = require("../../utils/setRef");
 /** Создает несколько ссылок (ref) на один DOM-элемент. */
 function useMultiRef(refs) {
     // Мемоизирует массив ref'ов
@@ -12,13 +13,7 @@ function useMultiRef(refs) {
         }
         return function (node) {
             arrRefs.current.forEach(function (ref) {
-                if (typeof ref === 'function') {
-                    ref(node);
-                }
-                else if (ref) {
-                    // eslint-disable-next-line no-param-reassign
-                    ref.current = node;
-                }
+                (0, setRef_1.setRef)(ref, node);
             });
         };
     }, [arrRefs]);

package/__inner__/cjs/utils/isKeys.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type { KeyCode } from '../types/KeyCode';
+export declare const isKeys: (event: KeyboardEvent | ReactKeyboardEvent, keys: KeyCode[]) => boolean;

package/__inner__/cjs/utils/isKeys.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isKeys = void 0;
+var isKey_1 = require("./isKey");
+var isKeys = function (event, keys) { return keys.some(function (key) { return (0, isKey_1.isKey)(event, key); }); };
+exports.isKeys = isKeys;

package/__inner__/cjs/utils/setRef.d.ts

@@ -0,0 +1,4 @@
+import type { Dispatch, SetStateAction, Ref as ReactRef } from 'react';
+type Ref<T> = ReactRef<T> | Dispatch<SetStateAction<T | undefined>> | null;
+export declare const setRef: <T>(ref: Ref<T> | undefined, value: T) => void;
+export {};

package/__inner__/cjs/utils/setRef.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRef = void 0;
+var setRef = function (ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = value;
+    }
+};
+exports.setRef = setRef;

package/__inner__/esm/components/List/List.css

@@ -8,6 +8,7 @@
   gap: var(--list-gap);
   padding: var(--list-gutter) 0;
   margin: 0;
+  position: relative;
   outline: none;
 }
 

package/__inner__/esm/components/Menu/Menu.css

@@ -27,7 +27,6 @@
     background: transparent;
   }
   .Menu {
-  scroll-behavior: smooth;
   overflow: hidden auto;
   max-block-size: 40vb;
 }

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -9,14 +9,14 @@ import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export var cnMenuItem = cn('MenuItem');
 export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'MenuItem' });
-    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, _b = props.as, Tag = _b === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "className", "as"]);
+    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, disabled = props.disabled, className = props.className, _b = props.as, Tag = _b === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "disabled", "className", "as"]);
     var innerRef = useRef(null);
     useEffect(function () {
         var _a;
-        if (autoFocus) {
+        if (autoFocus && !disabled) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-    }, [autoFocus]);
-    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+    }, [autoFocus, disabled]);
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
 });
 MenuItem.displayName = 'MenuItem';

package/__inner__/esm/components/Menu/components/MenuList/MenuList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListProps } from '../../../List';
 export type MenuListProps = {
-    /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
+    /** Если {true} устанавливает автофокус на первый активный элемент в списке */
     autoFocus?: boolean;
-} & ListProps;
+} & ListProps<'div'>;
 export declare const MenuList: React.ForwardRefExoticComponent<Omit<MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Menu/components/MenuList/MenuList.js

@@ -1,63 +1,81 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useRef, isValidElement, Children } from 'react';
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, isValidElement, Children, useRef, useState, } from 'react';
 import { isFragment } from 'react-is';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { setRef } from '../../../../utils/setRef';
 import { List } from '../../../List';
 import { useMenuFocusList } from '../../useMenuFocusList';
 import { MenuItem } from '../MenuItem';
+var isNotSelectOption = function (child) {
+    return !isValidElement(child) || (child === null || child === void 0 ? void 0 : child.type) !== MenuItem || !!child.props.disabled;
+};
 export var MenuList = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'MenuList' });
-    var children = props.children, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, other = __rest(props, ["children", "autoFocus"]);
-    var nodesRef = useRef([]);
-    var onKeyDown = useMenuFocusList(nodesRef.current).onKeyDown;
+    var _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, children = props.children, onMouseDownProp = props.onMouseDown, other = __rest(props, ["autoFocus", "children", "onMouseDown"]);
+    var listRef = useRef(null);
+    var _b = __read(useState({}), 2), nodes = _b[0], setNodes = _b[1];
+    var onKeyDown = useMenuFocusList(Object.values(nodes)).onKeyDown;
     var activeItemIndex = -1;
+    var focusedItemIndex = -1;
     var resolvedChildren = isFragment(children)
         ? children.props.children
         : children;
     Children.forEach(resolvedChildren, function (child, index) {
-        if (!isValidElement(child) ||
-            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem ||
-            child.props.disabled) {
+        if (isNotSelectOption(child)) {
             return;
         }
-        if (child.props.selected) {
+        if (child.props.autoFocus || child.props.selected) {
             activeItemIndex = index;
+            focusedItemIndex = index;
         }
         else if (activeItemIndex === -1) {
             activeItemIndex = index;
+            if (autoFocus) {
+                focusedItemIndex = index;
+            }
         }
     });
-    return (React.createElement(List, __assign({ role: "menu", as: "div", tabIndex: -1, onClick: function (e) {
-            var _a;
-            if (e.target === e.currentTarget) {
-                (_a = nodesRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }, ref: ref }, other), Children.map(resolvedChildren, function (child, index) {
-        if (!isValidElement(child) ||
-            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem ||
-            child.props.disabled) {
+    var renderChildren = Children.map(resolvedChildren, function (child, index) {
+        if (isNotSelectOption(child)) {
             return child;
         }
         var isActiveElement = activeItemIndex === index;
+        var isFocusedElement = focusedItemIndex === index;
         var elementChild = child;
+        var ref = function (ref) {
+            setRef(elementChild.ref, ref);
+            if (ref) {
+                setNodes(function (prevNodes) {
+                    var _a;
+                    return (__assign(__assign({}, prevNodes), (_a = {}, _a[index] = ref, _a)));
+                });
+            }
+            else {
+                setNodes(function (prevNodes) {
+                    var obj = __assign({}, prevNodes);
+                    delete obj[index];
+                    return obj;
+                });
+            }
+        };
         var props = {
+            ref: ref,
             tabIndex: isActiveElement ? 0 : -1,
-            autoFocus: autoFocus && isActiveElement,
+            autoFocus: isFocusedElement,
             onKeyDown: function (event) {
                 var _a, _b;
                 onKeyDown(event);
                 (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
             },
         };
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        var ref = useMultiRef([
-            elementChild.ref,
-            function (ref) {
-                nodesRef.current.push(ref);
-            },
-        ]);
-        return React.cloneElement(elementChild, __assign(__assign({}, props), { ref: ref }));
-    })));
+        return React.cloneElement(elementChild, __assign({}, props));
+    });
+    return (React.createElement(List, __assign({ onMouseDown: function (event) {
+            if (event.target === listRef.current) {
+                event.preventDefault();
+            }
+            onMouseDownProp === null || onMouseDownProp === void 0 ? void 0 : onMouseDownProp(event);
+        }, role: "menu", as: "div", tabIndex: -1, ref: useMultiRef([ref, listRef]) }, other), renderChildren));
 });
 MenuList.displayName = 'MenuList';

package/__inner__/esm/components/Menu/useMenuFocusList.js

@@ -2,17 +2,27 @@ import { useCallback, useEffect, useRef } from 'react';
 import { getNextIndex } from '../../utils/getNextIndex';
 import { getPrevIndex } from '../../utils/getPrevIndex';
 import { isKey } from '../../utils/isKey';
+import { isKeys } from '../../utils/isKeys';
 export function useMenuFocusList(nodes) {
     var savedNodes = useRef(nodes);
     useEffect(function () {
         savedNodes.current = nodes;
     }, [nodes]);
     var onKeyDown = useCallback(function (event) {
-        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+        var _a, _b;
+        if (!isKeys(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
             return;
         }
         event.preventDefault();
         var items = savedNodes.current;
+        if (isKey(event, 'Home')) {
+            (_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (isKey(event, 'End')) {
+            (_b = items === null || items === void 0 ? void 0 : items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
         var currentEl = event.target;
         var currentIndex = items.indexOf(currentEl);
         var newIndex = isKey(event, 'ArrowUp')

package/__inner__/esm/components/Select/Select.js

@@ -6,7 +6,7 @@ import { useControlled } from '../../hooks/useControlled';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { isKey } from '../../utils/isKey';
+import { isKeys } from '../../utils/isKeys';
 import { DataList, DataListOption } from '../DataList';
 import { SelectInput } from './components';
 import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, } from './constants';
@@ -90,10 +90,7 @@ var SelectRender = function (inProps, ref) {
     };
     /** Управление элементом контроля через клавиатуру */
     var handleKeyDown = function (event) {
-        if ((isKey(event, 'Space') ||
-            isKey(event, 'ArrowDown') ||
-            isKey(event, 'ArrowUp')) &&
-            !open) {
+        if (isKeys(event, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
             event.preventDefault();
             handleToggle();
         }

package/__inner__/esm/hooks/useFocusList/useFocusList.js

@@ -2,15 +2,24 @@ import { useCallback } from 'react';
 import { getNextIndex } from '../../utils/getNextIndex';
 import { getPrevIndex } from '../../utils/getPrevIndex';
 import { isKey } from '../../utils/isKey';
+import { isKeys } from '../../utils/isKeys';
 import { useUniqueId } from '../useUniqueId';
 export function useFocusList() {
     var name = useUniqueId();
     var onKeyDown = useCallback(function (event) {
-        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+        if (!isKeys(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
             return;
         }
         event.preventDefault();
         var items = document.querySelectorAll("[data-focus-list=\"".concat(name, "\"]"));
+        if (isKey(event, 'Home')) {
+            items.item(0).focus();
+            return;
+        }
+        if (isKey(event, 'Home')) {
+            items.item(items.length - 1).focus();
+            return;
+        }
         var currentEl = event.target;
         var currentIndex = Array.from(items).indexOf(currentEl);
         var newIndex = isKey(event, 'ArrowUp')

package/__inner__/esm/hooks/useMultiRef/useMultiRef.js

@@ -1,4 +1,5 @@
 import { useMemo, useRef } from 'react';
+import { setRef } from '../../utils/setRef';
 /** Создает несколько ссылок (ref) на один DOM-элемент. */
 export function useMultiRef(refs) {
     // Мемоизирует массив ref'ов
@@ -9,13 +10,7 @@ export function useMultiRef(refs) {
         }
         return function (node) {
             arrRefs.current.forEach(function (ref) {
-                if (typeof ref === 'function') {
-                    ref(node);
-                }
-                else if (ref) {
-                    // eslint-disable-next-line no-param-reassign
-                    ref.current = node;
-                }
+                setRef(ref, node);
             });
         };
     }, [arrRefs]);

package/__inner__/esm/utils/isKeys.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type { KeyCode } from '../types/KeyCode';
+export declare const isKeys: (event: KeyboardEvent | ReactKeyboardEvent, keys: KeyCode[]) => boolean;

package/__inner__/esm/utils/isKeys.js

@@ -0,0 +1,2 @@
+import { isKey } from './isKey';
+export var isKeys = function (event, keys) { return keys.some(function (key) { return isKey(event, key); }); };

package/__inner__/esm/utils/setRef.d.ts

@@ -0,0 +1,4 @@
+import type { Dispatch, SetStateAction, Ref as ReactRef } from 'react';
+type Ref<T> = ReactRef<T> | Dispatch<SetStateAction<T | undefined>> | null;
+export declare const setRef: <T>(ref: Ref<T> | undefined, value: T) => void;
+export {};

package/__inner__/esm/utils/setRef.js

@@ -0,0 +1,9 @@
+export var setRef = function (ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = value;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.17.0-canary.0",
+  "version": "0.18.0",
   "description": "React component library",
   "files": [
     "*"