@ozen-ui/kit 0.32.1 → 0.33.0

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

@@ -32,6 +32,7 @@ var DataListRender = function (inProps, ref) {
         state: 'selected',
     }), 2), selectedState = _g[0], setSelected = _g[1];
     var nodes = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
+    var items = (0, react_1.useMemo)(function () { return new Array(); }, [children]);
     var resolvedChildren = (0, react_is_1.isFragment)(children)
         ? children.props.children
         : children;
@@ -40,11 +41,14 @@ var DataListRender = function (inProps, ref) {
             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);
-        }
-    });
+    (0, react_1.useEffect)(function () {
+        react_1.Children.forEach(resolvedChildren, function (child, idx) {
+            if (!isNotSelectOption(child)) {
+                items.push(child.props.value);
+                nodes.set(child.props.value, idx);
+            }
+        });
+    }, [children]);
     var handleSelect = function (event, value) {
         var params = {
             multiple: inProps.multiple,
@@ -53,10 +57,10 @@ var DataListRender = function (inProps, ref) {
             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);
+            var selected = params.selected, onSelect = params.onSelect, setSelected_1 = params.setSelected;
+            var res = (selected === null || selected === void 0 ? void 0 : selected.includes(value || ''))
+                ? selected.filter(function (item) { return item !== value; })
+                : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((selected || [])), false), [value], false);
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: res });
             setSelected_1(res);
         }
@@ -69,24 +73,24 @@ var DataListRender = function (inProps, ref) {
     // Навигация по списку
     var _h = (0, helpers_1.useDataListNavigation)({
         active: opened,
-        items: tslib_1.__spreadArray([], tslib_1.__read(nodes.keys()), false),
-        current: (0, helpers_1.lastSelectedValue)(selectedState),
+        items: items,
+        selected: (0, helpers_1.lastSelectedValue)(selectedState),
         onSelect: function (event, item) {
             handleSelect(event, item || '');
         },
-    }), selected = _h.selected, focused = _h.focused, highlighted = _h.highlighted, onKeyDown = _h.onKeyDown, onClick = _h.onClick, onMouseEnter = _h.onMouseEnter, onMouseLeave = _h.onMouseLeave;
+    }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
     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);
+        var selected = focused || current || '';
+        // Находит элемент по ключу
+        var idx = nodes.get(selected);
         if (idx !== undefined) {
             setSelectedElRef({
                 current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
             });
         }
-    }, [focused, selected]);
+    }, [focused, current]);
     // Прокрутка списка
     (0, helpers_1.useScrollContainerToElement)(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
     // Назначает элементу контроля событие управления списком с клавиатуры
@@ -109,37 +113,28 @@ 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, className: (0, exports.cnDataList)('', [className]), transitionProps: {
+    var renderChildren = (0, react_1.useMemo)(function () {
+        return 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);
+                },
+                focused: key === focused,
+                selected: Array.isArray(selectedState)
+                    ? selectedState.includes(key)
+                    : selectedState === key,
+            };
+            return (0, react_1.cloneElement)(elementChild, props);
+        });
+    }, [resolvedChildren, selectedState, focused, onClick]);
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
             classNames: 'DataList-animation',
         } }, other, { onEntered: function () {
             onEntered();

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

@@ -2,6 +2,7 @@
   inline-size: var(--data-list-check-icon-size);
   block-size: var(--data-list-check-icon-size);
   display: flex;
+  flex-shrink: 0;
 }
 
   .DataListCheckIcon_size_s {

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

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

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

@@ -12,8 +12,6 @@ export type DataListOptionProps = {
     disabled?: boolean;
     /** Если {true} отображает опцию сфокусированной (клавиатура) */
     focused?: boolean;
-    /** Если {true} отображает опцию наведенной (мышь) */
-    highlighted?: boolean;
     /** Если {true} отображает опцию выбранной */
     selected?: boolean;
     /** Функция обратного вызова обработчик нажатий на клавиатуре */

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

@@ -21,7 +21,7 @@ var DataListContent = function (_a) {
         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 _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, selected = _a.selected, focused = _a.focused, other = tslib_1.__rest(_a, ["disabled", "value", "label", "children", "className", "selected", "focused"]);
     var renderChildren = function () {
         if ((0, isString_1.isString)(children) || (0, isNumber_1.isNumber)(children)) {
             return react_1.default.createElement(DataListContent, { label: children, selected: selected });
@@ -33,7 +33,7 @@ exports.DataListOption = (0, react_1.forwardRef)(function (_a, ref) {
     };
     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,
+            selected: selected,
             focused: !disabled && focused,
         }, [className]) }, other, { ref: ref }), renderChildren()));
 });

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

@@ -4,20 +4,17 @@ export type UseListNavigationItems = UseListNavigationItem[];
 export type UseListNavigationProps = {
     active?: boolean;
     items?: UseListNavigationItems;
-    current?: UseListNavigationItem;
+    selected?: UseListNavigationItem;
     onSelect?: (event: KeyboardEvent | MouseEvent<HTMLElement>, item?: UseListNavigationItem) => void;
 };
 export type UseListNavigationState = {
     focused?: UseListNavigationItem;
-    selected?: UseListNavigationItem;
-    highlighted?: UseListNavigationItem;
+    current?: 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;
+export declare function useDataListNavigation({ selected, onSelect, active, items: itemsProps, }: UseListNavigationProps): UseListNavigationReturn;

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

@@ -6,83 +6,79 @@ 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 useDataListNavigation(_a) {
-    var current = _a.current, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
+    var selected = _a.selected, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
     var savedItems = (0, react_1.useRef)(itemsProps);
+    var savedSelected = (0, react_1.useRef)();
     var savedOnSelect = (0, react_1.useRef)();
+    var _c = tslib_1.__read((0, react_1.useState)({}), 2), state = _c[0], setState = _c[1];
     (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];
+    (0, react_1.useEffect)(function () {
+        savedSelected.current = selected;
+    }, [selected]);
     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 () {
-        var _a, _b, _c;
-        if (!active) {
-            return;
-        }
-        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: (_a = findInItems(state.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]);
-    var onMouseLeave = function () {
         if (!active) {
             return;
         }
-        setState(tslib_1.__assign(tslib_1.__assign({}, state), { highlighted: null }));
-    };
-    var onMouseEnter = function (item) {
+        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, current: (_b = findInItems(savedSelected.current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
+        });
+    }, [itemsProps, active]);
+    // Сброс
+    (0, react_1.useEffect)(function () {
         if (!active) {
-            return;
+            return undefined;
         }
-        setState(tslib_1.__assign(tslib_1.__assign({}, state), { highlighted: item }));
-    };
-    var onClick = function (event, item) {
+        return function () {
+            setState({});
+        };
+    }, [active]);
+    var onClick = (0, react_1.useCallback)(function (event, item) {
         var _a;
         if (!active) {
             return;
         }
         var focused = item === state.focused ? item : null;
-        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: focused, selected: item }));
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: focused, current: item }));
         (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
-    };
-    var onKeyDown = function (event) {
+    }, [state.focused, active]);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (!active) {
+        if (!active || !(0, isKeys_1.isKeys)(event, ['Enter', 'ArrowUp', 'ArrowDown'])) {
             return;
         }
+        var current = (_a = state.focused) !== null && _a !== void 0 ? _a : state.current;
         if ((0, isKey_1.isKey)(event, 'Enter')) {
+            // Не обрабатываем ввод в пустом списке
+            if (!((_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.length)) {
+                return;
+            }
             event.preventDefault();
-            var selected_1 = (_a = state.focused) !== null && _a !== void 0 ? _a : state.selected;
-            setState(tslib_1.__assign(tslib_1.__assign({}, state), { selected: selected_1, focused: selected_1 }));
-            (_b = savedOnSelect.current) === null || _b === void 0 ? void 0 : _b.call(savedOnSelect, event, selected_1);
-        }
-        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
-            return;
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { current: current, focused: current }));
+            (_c = savedOnSelect.current) === null || _c === void 0 ? void 0 : _c.call(savedOnSelect, event, current);
         }
-        event.preventDefault();
-        var selected = (_c = state.focused) !== null && _c !== void 0 ? _c : state.selected;
-        var currentIndex = typeof selected !== 'undefined'
-            ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.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, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
-            : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
-        var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
-        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: newItem }));
-    };
-    (0, react_1.useEffect)(function () {
-        if (!active) {
-            return undefined;
+        if ((0, isKeys_1.isKeys)(event, ['ArrowUp', 'ArrowDown'])) {
+            event.preventDefault();
+            var currentIndex = typeof current !== 'undefined'
+                ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(current)
+                : null;
+            var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
+            var newIndex = isArrowUp
+                ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
+                : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
+            var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: newItem }));
         }
-        return function () {
-            // Сброс
-            setState({});
-        };
-    }, [active]);
-    return tslib_1.__assign(tslib_1.__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave });
+    }, [state.focused, state.current, active]);
+    return tslib_1.__assign(tslib_1.__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown });
 }
 exports.useDataListNavigation = useDataListNavigation;

package/__inner__/cjs/components/Popover/Popover.js

@@ -22,11 +22,11 @@ var PopoverContext_1 = require("./PopoverContext");
 exports.cnPopover = (0, classname_1.cn)('Popover');
 exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _h = props.as, as = _h === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _h, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
-    var _j = tslib_1.__read((0, react_1.useState)(false), 2), openState = _j[0], setOpenState = _j[1];
+    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
+    var _l = tslib_1.__read((0, react_1.useState)(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
-    var _k = (0, index_1.usePopoverManager)(popoverRef, 1000, openState), refsClickOutside = _k.refsClickOutside, isTop = _k.isTop;
+    var _m = (0, index_1.usePopoverManager)(popoverRef, 1000, openState), refsClickOutside = _m.refsClickOutside, isTop = _m.isTop;
     // Ловушка фокуса
     var trapRef = (0, useFocusTrap_1.useFocusTrap)({
         active: !disableEnforceFocus && isTop,
@@ -72,6 +72,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
                 gpuAcceleration: false,
             },
         },
+        { name: 'preventOverflow', enabled: disablePreventOverflow },
         // Ширина всплывающего элемента
         {
             name: 'sameWidth',
@@ -119,12 +120,12 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
             };
         return undefined;
     }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current, position]);
-    var _l = tslib_1.__read((0, react_1.useState)(null), 2), popperElement = _l[0], setPopperElement = _l[1];
-    var _m = (0, react_popper_1.usePopper)(resolveReferenceElement, popperElement, {
+    var _o = tslib_1.__read((0, react_1.useState)(null), 2), popperElement = _o[0], setPopperElement = _o[1];
+    var _p = (0, react_popper_1.usePopper)(resolveReferenceElement, popperElement, {
         placement: placement,
-        strategy: 'fixed',
+        strategy: strategy,
         modifiers: modifiers,
-    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
+    }), styles = _p.styles, attributes = _p.attributes, update = _p.update;
     // Передача метода по перерасчету расположения компонента Popover в родительский компонент
     (0, react_1.useEffect)(function () {
         setUpdate === null || setUpdate === void 0 ? void 0 : setUpdate(update);

package/__inner__/cjs/components/Popover/constants.d.ts

@@ -6,3 +6,5 @@ export declare const POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
 export declare const POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
 export declare const POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 export declare const POPOVER_DEFAULT_PLACEMENT = "auto";
+export declare const POPOVER_DEFAULT_STRATEGY = "fixed";
+export declare const POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;

package/__inner__/cjs/components/Popover/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = exports.POPOVER_DEFAULT_TAG = void 0;
+exports.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = exports.POPOVER_DEFAULT_STRATEGY = exports.POPOVER_DEFAULT_PLACEMENT = exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = exports.POPOVER_DEFAULT_DISABLE_INTERACTIVE = exports.POPOVER_DEFAULT_OPEN = exports.POPOVER_DEFAULT_ARROW = exports.POPOVER_DEFAULT_TAG = void 0;
 var Paper_1 = require("../Paper");
 exports.POPOVER_DEFAULT_TAG = Paper_1.Paper;
 exports.POPOVER_DEFAULT_ARROW = false;
@@ -10,3 +10,5 @@ exports.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
 exports.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
 exports.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 exports.POPOVER_DEFAULT_PLACEMENT = 'auto';
+exports.POPOVER_DEFAULT_STRATEGY = 'fixed';
+exports.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;

package/__inner__/cjs/components/Popover/types.d.ts

@@ -11,6 +11,8 @@ export type VirtualElement = {
 };
 export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
 export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
+export declare const popoverStrategyVariant: readonly ["absolute", "fixed"];
+export type PopoverStrategyVariant = (typeof popoverStrategyVariant)[number];
 export type PopoverBaseProps = {
     /** Признак по которому компонент будет представлен */
     open?: boolean;
@@ -70,6 +72,10 @@ export type PopoverBaseProps = {
     setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
     /** Контейнер для монтирования всплывающего окна */
     container?: PortalProps['container'];
+    /** Стратегия позиционирования */
+    strategy?: PopoverStrategyVariant;
+    /** Если {true} позволяет смещаться по границе якорного элемента компонента  */
+    disablePreventOverflow?: boolean;
 };
 export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
 export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/cjs/components/Popover/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.popoverPlacementVariant = void 0;
+exports.popoverStrategyVariant = exports.popoverPlacementVariant = void 0;
 exports.popoverPlacementVariant = [
     'top-start',
     'top-end',
@@ -18,3 +18,4 @@ exports.popoverPlacementVariant = [
     'right',
     'left',
 ];
+exports.popoverStrategyVariant = ['absolute', 'fixed'];

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -115,7 +115,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/cjs/hooks/useHover/useHover.d.ts

@@ -1,9 +1,9 @@
 import type { RefObject } from 'react';
 export type UseHoverOptions = {
     /** Функция обратного вызова на событие перехода курсора на целевой элемент */
-    onEnter?: (e: PointerEvent) => void;
+    onEnter?: (e: MouseEvent) => void;
     /** Функция обратного вызова на событие покидания курсора с целевого элемента */
-    onLeave?: (e: PointerEvent) => void;
+    onLeave?: (e: MouseEvent) => void;
     /** Признак активности обработчика события, используется для повышения производительности. */
     active?: boolean;
 };

package/__inner__/cjs/hooks/useHover/useHover.js

@@ -23,13 +23,13 @@ options) {
     (0, useEventListener_1.useEventListener)({
         handler: handleEnter,
         element: elRef,
-        eventName: 'pointerenter',
+        eventName: 'mouseenter',
         active: active,
     });
     (0, useEventListener_1.useEventListener)({
         handler: handleLeave,
         element: elRef,
-        eventName: 'pointerleave',
+        eventName: 'mouseleave',
         active: active,
     });
     return value;

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

@@ -29,6 +29,7 @@ var DataListRender = function (inProps, ref) {
         state: 'selected',
     }), 2), selectedState = _g[0], setSelected = _g[1];
     var nodes = useMemo(function () { return new Map(); }, [children]);
+    var items = useMemo(function () { return new Array(); }, [children]);
     var resolvedChildren = isFragment(children)
         ? children.props.children
         : children;
@@ -37,11 +38,14 @@ var DataListRender = function (inProps, ref) {
             child.type !== DataListOption ||
             !!child.props.disabled;
     };
-    Children.forEach(resolvedChildren, function (child, idx) {
-        if (!isNotSelectOption(child)) {
-            nodes.set(child.props.value, idx);
-        }
-    });
+    useEffect(function () {
+        Children.forEach(resolvedChildren, function (child, idx) {
+            if (!isNotSelectOption(child)) {
+                items.push(child.props.value);
+                nodes.set(child.props.value, idx);
+            }
+        });
+    }, [children]);
     var handleSelect = function (event, value) {
         var params = {
             multiple: inProps.multiple,
@@ -50,10 +54,10 @@ var DataListRender = function (inProps, ref) {
             setSelected: setSelected,
         };
         if (isMultipleParams(params)) {
-            var selected_1 = params.selected, onSelect = params.onSelect, setSelected_1 = params.setSelected;
-            var res = (selected_1 === null || selected_1 === void 0 ? void 0 : selected_1.includes(value || ''))
-                ? selected_1.filter(function (item) { return item !== value; })
-                : __spreadArray(__spreadArray([], __read((selected_1 || [])), false), [value], false);
+            var selected = params.selected, onSelect = params.onSelect, setSelected_1 = params.setSelected;
+            var res = (selected === null || selected === void 0 ? void 0 : selected.includes(value || ''))
+                ? selected.filter(function (item) { return item !== value; })
+                : __spreadArray(__spreadArray([], __read((selected || [])), false), [value], false);
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: res });
             setSelected_1(res);
         }
@@ -66,24 +70,24 @@ var DataListRender = function (inProps, ref) {
     // Навигация по списку
     var _h = useDataListNavigation({
         active: opened,
-        items: __spreadArray([], __read(nodes.keys()), false),
-        current: lastSelectedValue(selectedState),
+        items: items,
+        selected: lastSelectedValue(selectedState),
         onSelect: function (event, item) {
             handleSelect(event, item || '');
         },
-    }), selected = _h.selected, focused = _h.focused, highlighted = _h.highlighted, onKeyDown = _h.onKeyDown, onClick = _h.onClick, onMouseEnter = _h.onMouseEnter, onMouseLeave = _h.onMouseLeave;
+    }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
     var _j = __read(useState({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
-    // Находит элемент по ключу
     useEffect(function () {
         var _a, _b;
-        var current = focused || selected || '';
-        var idx = nodes.get(current);
+        var selected = focused || current || '';
+        // Находит элемент по ключу
+        var idx = nodes.get(selected);
         if (idx !== undefined) {
             setSelectedElRef({
                 current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
             });
         }
-    }, [focused, selected]);
+    }, [focused, current]);
     // Прокрутка списка
     useScrollContainerToElement(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
     // Назначает элементу контроля событие управления списком с клавиатуры
@@ -106,37 +110,28 @@ var DataListRender = function (inProps, ref) {
         },
     });
     // Представление раскрывающегося списка
-    var renderChildren = Children.map(resolvedChildren, function (child) {
-        if (isNotSelectOption(child)) {
-            return child;
-        }
-        var key = child.props.value;
-        var elementChild = child;
-        var props = {
-            onClick: function (event) {
-                var _a, _b;
-                onClick === null || onClick === void 0 ? void 0 : onClick(event, key);
-                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-            },
-            onMouseEnter: function (event) {
-                var _a, _b;
-                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(key);
-                (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-            },
-            onMouseLeave: function (event) {
-                var _a, _b;
-                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-                (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-            },
-            highlighted: key === highlighted,
-            focused: key === focused,
-            selected: Array.isArray(selectedState)
-                ? selectedState.includes(key)
-                : selectedState === key,
-        };
-        return cloneElement(elementChild, __assign({}, props));
-    });
-    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
+    var renderChildren = useMemo(function () {
+        return 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);
+                },
+                focused: key === focused,
+                selected: Array.isArray(selectedState)
+                    ? selectedState.includes(key)
+                    : selectedState === key,
+            };
+            return cloneElement(elementChild, props);
+        });
+    }, [resolvedChildren, selectedState, focused, onClick]);
+    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
             classNames: 'DataList-animation',
         } }, other, { onEntered: function () {
             onEntered();

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

@@ -2,6 +2,7 @@
   inline-size: var(--data-list-check-icon-size);
   block-size: var(--data-list-check-icon-size);
   display: flex;
+  flex-shrink: 0;
 }
 
   .DataListCheckIcon_size_s {

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

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

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

@@ -12,8 +12,6 @@ export type DataListOptionProps = {
     disabled?: boolean;
     /** Если {true} отображает опцию сфокусированной (клавиатура) */
     focused?: boolean;
-    /** Если {true} отображает опцию наведенной (мышь) */
-    highlighted?: boolean;
     /** Если {true} отображает опцию выбранной */
     selected?: boolean;
     /** Функция обратного вызова обработчик нажатий на клавиатуре */

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

@@ -18,7 +18,7 @@ var DataListContent = function (_a) {
         React.createElement(DataListCheckIcon, { selected: selected, size: iconSize })));
 };
 export var DataListOption = forwardRef(function (_a, ref) {
-    var _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, value = _a.value, label = _a.label, children = _a.children, className = _a.className, highlighted = _a.highlighted, selected = _a.selected, focused = _a.focused, other = __rest(_a, ["disabled", "value", "label", "children", "className", "highlighted", "selected", "focused"]);
+    var _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, value = _a.value, label = _a.label, children = _a.children, className = _a.className, selected = _a.selected, focused = _a.focused, other = __rest(_a, ["disabled", "value", "label", "children", "className", "selected", "focused"]);
     var renderChildren = function () {
         if (isString(children) || isNumber(children)) {
             return React.createElement(DataListContent, { label: children, selected: selected });
@@ -30,7 +30,7 @@ export var DataListOption = forwardRef(function (_a, ref) {
     };
     return (React.createElement(ListItem, __assign({ role: "option", "aria-selected": selected, "aria-disabled": disabled, "data-label": label, "data-value": value, className: cnDataListOption({
             disabled: disabled,
-            highlighted: !disabled && highlighted,
+            selected: selected,
             focused: !disabled && focused,
         }, [className]) }, other, { ref: ref }), renderChildren()));
 });

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

@@ -4,20 +4,17 @@ export type UseListNavigationItems = UseListNavigationItem[];
 export type UseListNavigationProps = {
     active?: boolean;
     items?: UseListNavigationItems;
-    current?: UseListNavigationItem;
+    selected?: UseListNavigationItem;
     onSelect?: (event: KeyboardEvent | MouseEvent<HTMLElement>, item?: UseListNavigationItem) => void;
 };
 export type UseListNavigationState = {
     focused?: UseListNavigationItem;
-    selected?: UseListNavigationItem;
-    highlighted?: UseListNavigationItem;
+    current?: 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;
+export declare function useDataListNavigation({ selected, onSelect, active, items: itemsProps, }: UseListNavigationProps): UseListNavigationReturn;

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

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

package/__inner__/esm/components/Popover/Popover.js

@@ -13,17 +13,17 @@ import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { Portal } from '../Portal';
 import { PopoverArrow } from './components';
-import { POPOVER_DEFAULT_TAG, POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, } from './constants';
+import { POPOVER_DEFAULT_TAG, POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, POPOVER_DEFAULT_STRATEGY, POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW, } from './constants';
 import { usePopoverManager } from './index';
 import { PopoverContext } from './PopoverContext';
 export var cnPopover = cn('Popover');
 export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _h = props.as, as = _h === void 0 ? POPOVER_DEFAULT_TAG : _h, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
-    var _j = __read(useState(false), 2), openState = _j[0], setOpenState = _j[1];
+    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
+    var _l = __read(useState(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = useRef(null);
     var popoverRef = useRef(null);
-    var _k = usePopoverManager(popoverRef, 1000, openState), refsClickOutside = _k.refsClickOutside, isTop = _k.isTop;
+    var _m = usePopoverManager(popoverRef, 1000, openState), refsClickOutside = _m.refsClickOutside, isTop = _m.isTop;
     // Ловушка фокуса
     var trapRef = useFocusTrap({
         active: !disableEnforceFocus && isTop,
@@ -69,6 +69,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
                 gpuAcceleration: false,
             },
         },
+        { name: 'preventOverflow', enabled: disablePreventOverflow },
         // Ширина всплывающего элемента
         {
             name: 'sameWidth',
@@ -116,12 +117,12 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
             };
         return undefined;
     }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current, position]);
-    var _l = __read(useState(null), 2), popperElement = _l[0], setPopperElement = _l[1];
-    var _m = usePopper(resolveReferenceElement, popperElement, {
+    var _o = __read(useState(null), 2), popperElement = _o[0], setPopperElement = _o[1];
+    var _p = usePopper(resolveReferenceElement, popperElement, {
         placement: placement,
-        strategy: 'fixed',
+        strategy: strategy,
         modifiers: modifiers,
-    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
+    }), styles = _p.styles, attributes = _p.attributes, update = _p.update;
     // Передача метода по перерасчету расположения компонента Popover в родительский компонент
     useEffect(function () {
         setUpdate === null || setUpdate === void 0 ? void 0 : setUpdate(update);

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

@@ -6,3 +6,5 @@ export declare const POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
 export declare const POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
 export declare const POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 export declare const POPOVER_DEFAULT_PLACEMENT = "auto";
+export declare const POPOVER_DEFAULT_STRATEGY = "fixed";
+export declare const POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;

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

@@ -7,3 +7,5 @@ export var POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS = false;
 export var POPOVER_DEFAULT_DISABLE_RETURN_FOCUS = false;
 export var POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 export var POPOVER_DEFAULT_PLACEMENT = 'auto';
+export var POPOVER_DEFAULT_STRATEGY = 'fixed';
+export var POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW = false;

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

@@ -11,6 +11,8 @@ export type VirtualElement = {
 };
 export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
 export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
+export declare const popoverStrategyVariant: readonly ["absolute", "fixed"];
+export type PopoverStrategyVariant = (typeof popoverStrategyVariant)[number];
 export type PopoverBaseProps = {
     /** Признак по которому компонент будет представлен */
     open?: boolean;
@@ -70,6 +72,10 @@ export type PopoverBaseProps = {
     setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
     /** Контейнер для монтирования всплывающего окна */
     container?: PortalProps['container'];
+    /** Стратегия позиционирования */
+    strategy?: PopoverStrategyVariant;
+    /** Если {true} позволяет смещаться по границе якорного элемента компонента  */
+    disablePreventOverflow?: boolean;
 };
 export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
 export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/esm/components/Popover/types.js

@@ -15,3 +15,4 @@ export var popoverPlacementVariant = [
     'right',
     'left',
 ];
+export var popoverStrategyVariant = ['absolute', 'fixed'];

package/__inner__/esm/components/Tooltip/Tooltip.js

@@ -112,7 +112,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(resolveChildren, composeChildrenProps),
-        React.createElement(Popover, __assign({ anchorRef: anchorRef, as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/esm/hooks/useHover/useHover.d.ts

@@ -1,9 +1,9 @@
 import type { RefObject } from 'react';
 export type UseHoverOptions = {
     /** Функция обратного вызова на событие перехода курсора на целевой элемент */
-    onEnter?: (e: PointerEvent) => void;
+    onEnter?: (e: MouseEvent) => void;
     /** Функция обратного вызова на событие покидания курсора с целевого элемента */
-    onLeave?: (e: PointerEvent) => void;
+    onLeave?: (e: MouseEvent) => void;
     /** Признак активности обработчика события, используется для повышения производительности. */
     active?: boolean;
 };

package/__inner__/esm/hooks/useHover/useHover.js

@@ -20,13 +20,13 @@ options) {
     useEventListener({
         handler: handleEnter,
         element: elRef,
-        eventName: 'pointerenter',
+        eventName: 'mouseenter',
         active: active,
     });
     useEventListener({
         handler: handleLeave,
         element: elRef,
-        eventName: 'pointerleave',
+        eventName: 'mouseleave',
         active: active,
     });
     return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "React component library",
   "files": [
     "*"