@ozen-ui/kit 0.17.0 → 0.19.0

package/ChipNext/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/ChipNext/index.js",
+	"module": "../__inner__/esm/components/ChipNext/index.js",
+	"types": "../__inner__/esm/components/ChipNext/index.d.ts"
+}

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

@@ -33,4 +33,7 @@ export type ChipBaseProps = {
     'data-testid'?: string;
 };
 export type ChipProps = ExtendableProps<InputHTMLAttributes<HTMLInputElement>, ChipBaseProps>;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ChipNext
+ */
 export declare const Chip: React.ForwardRefExoticComponent<ChipBaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof ChipBaseProps> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/cjs/components/Chip/Chip.js

@@ -11,6 +11,9 @@ var constants_1 = require("./constants");
 exports.cnChip = (0, classname_1.cn)('Chip');
 exports.chipSizeVariant = ['xs', 's', 'm', 'l'];
 exports.chipColorVariant = ['primary', 'secondary'];
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ChipNext
+ */
 exports.Chip = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = (0, react_1.useMemo)(function () { return (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size); }, [size]);

package/__inner__/cjs/components/ChipNext/Chip.css

@@ -0,0 +1,108 @@
+/* stylelint-disable */
+.ChipNext {
+  --chip-border-radius: 24px;
+  --chip-text-wrap: nowrap;
+  background-color: var(--chip-bg-color);
+  border-radius: var(--chip-border-radius);
+  min-block-size: var(--chip-height);
+  padding: 0 var(--chip-padding-x);
+  min-inline-size: var(--chip-min-width);
+  color: var(--chip-text-color);
+  gap: var(--space-s);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  outline: none;
+  transition:
+    border-color var(--transition-default),
+    color var(--transition-default),
+    background-color var(--transition-default),
+    box-shadow var(--transition-default);
+}
+.ChipNext-Content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: var(--chip-text-wrap);
+  }
+.ChipNext-Icon {
+    color: inherit;
+    flex-shrink: 0;
+  }
+.ChipNext_multiline {
+    --chip-text-wrap: normal;
+  }
+.ChipNext_size_xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+
+      --chip-min-width: 64px;
+      --chip-height: var(--space-xl);
+      --chip-padding-x: var(--space-m);
+    }
+.ChipNext_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --chip-min-width: 72px;
+      --chip-height: var(--space-2xl);
+      --chip-padding-x: var(--space-l);
+    }
+.ChipNext_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --chip-min-width: 80px;
+      --chip-height: var(--space-3xl);
+      --chip-padding-x: 20px;
+    }
+.ChipNext_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --chip-min-width: 88px;
+      --chip-height: var(--space-4xl);
+      --chip-padding-x: var(--space-xl);
+    }
+.ChipNext_color_primary {
+      --chip-bg-color: var(--color-background-action-light);
+      --chip-bg-color-hover: var(--color-background-action-light-hover);
+      --chip-bg-color-active: var(--color-background-action-light-pressed);
+      --chip-text-color: var(--color-content-action-dark);
+    }
+.ChipNext_color_secondary {
+      --chip-bg-color: var(--color-background-secondary);
+      --chip-bg-color-hover: var(--color-background-secondary-hover);
+      --chip-bg-color-active: var(--color-background-secondary-pressed);
+      --chip-text-color: var(--color-content-primary);
+    }
+.ChipNext:hover {
+    --chip-bg-color: var(--chip-bg-color-hover);
+  }
+.ChipNext:active {
+    --chip-bg-color: var(--chip-bg-color-active);
+  }
+.ChipNext:focus {
+    box-shadow: var(--shadow-outline-focused);
+  }
+.ChipNext:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+.ChipNext_checked,
+  .ChipNext_checked:hover,
+  .ChipNext_checked:active {
+    --chip-bg-color: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-disabled);
+    --chip-text-color: var(--color-content-disabled);
+    pointer-events: none;
+  }

package/__inner__/cjs/components/ChipNext/Chip.d.ts

@@ -0,0 +1,42 @@
+import './Chip.css';
+import type { ReactNode, MouseEvent, ElementType } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import { CHIP_DEFAULT_TAG } from './constants';
+export declare const cnChip: import("@bem-react/classname").ClassNameFormatter;
+export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
+export declare const chipColorVariant: readonly ["primary", "secondary"];
+export type ChipSizeVariant = (typeof chipSizeVariant)[number];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
+export type ChipIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+export type ChipBaseProps = {
+    /** Размер компонента */
+    size?: ChipSizeVariant;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Если {true} компонент отображается как заблокированный */
+    disabled?: boolean;
+    /** Если {true} делает элемент выбранным */
+    checked?: boolean;
+    /** Обработчик нажатия */
+    onClick?: (e: MouseEvent<HTMLElement>, payload: {
+        checked: boolean;
+    }) => void;
+    /** Иконка слева */
+    iconLeft?: ChipIcon;
+    /** Иконка справа */
+    iconRight?: ChipIcon;
+    /** Если {true} разбивает длинный текст на несколько строк */
+    multiline?: boolean;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type ChipProps<As extends ElementType = typeof CHIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ChipBaseProps, As>;
+export declare const Chip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipBaseProps, "button">;

package/__inner__/cjs/components/ChipNext/Chip.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = exports.chipColorVariant = exports.chipSizeVariant = exports.cnChip = void 0;
+var tslib_1 = require("tslib");
+require("./Chip.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
+var constants_1 = require("./constants");
+exports.cnChip = (0, classname_1.cn)('ChipNext');
+exports.chipSizeVariant = ['xs', 's', 'm', 'l'];
+exports.chipColorVariant = ['primary', 'secondary'];
+exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a = (0, useThemeProps_1.useThemeProps)({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? constants_1.CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: checkedProp,
+        defaultValue: false,
+        name: 'ChipNext',
+        state: 'open',
+    }), 2), checkedState = _f[0], setCheckedState = _f[1];
+    var handleClick = function (event) {
+        if (disabled) {
+            return;
+        }
+        setCheckedState(!checkedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+    };
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+                className: (0, exports.cnChip)('Icon'),
+            },
+        });
+    };
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ type: "button", "data-testid": dataTestId, disabled: disabled }, other, { className: (0, exports.cnChip)({ size: size, disabled: disabled, color: color, multiline: multiline, checked: checkedState }, [className]), onClick: handleClick, ref: ref }),
+        renderIcon(iconLeft),
+        children && react_1.default.createElement("span", { className: (0, exports.cnChip)('Content') }, children),
+        renderIcon(iconRight)));
+});
+exports.Chip.displayName = 'Chip';

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

@@ -0,0 +1,4 @@
+export declare const CHIP_DEFAULT_TAG = "button";
+export declare const CHIP_DEFAULT_VARIANT = "primary";
+export declare const CHIP_DEFAULT_SIZE = "m";
+export declare const CHIP_DEFAULT_DISABLED = false;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHIP_DEFAULT_DISABLED = exports.CHIP_DEFAULT_SIZE = exports.CHIP_DEFAULT_VARIANT = exports.CHIP_DEFAULT_TAG = void 0;
+exports.CHIP_DEFAULT_TAG = 'button';
+exports.CHIP_DEFAULT_VARIANT = 'primary';
+exports.CHIP_DEFAULT_SIZE = 'm';
+exports.CHIP_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/ChipNext/index.d.ts

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

package/__inner__/cjs/components/ChipNext/index.js

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

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

@@ -1,18 +1,15 @@
 import './FieldIcon.css';
-import type { ComponentPropsWithRef, ComponentRef, FC, ReactElement } from 'react';
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
 import React from 'react';
 import type { IconProps, IconSize } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { RenderContentType } from '../../utils/renderContent';
 export declare const FIELD_ICON_DEFAULT_TAG = "div";
 export type FieldIconRef = ComponentRef<typeof FIELD_ICON_DEFAULT_TAG>;
 export type FieldIconProps = ComponentPropsWithRef<typeof FIELD_ICON_DEFAULT_TAG> & {
-    icon?: string | ReactElement<IconProps & {
+    icon?: RenderContentType<IconProps & {
         size?: IconSize;
-    }> | (() => ReactElement<IconProps & {
-        size?: IconSize;
-    }>) | FC<IconProps & {
-        size?: IconSize;
-    }>;
+    }>['content'];
     size?: FormElementSizeVariant;
     children?: never;
 };

package/__inner__/cjs/components/FieldIcon/FieldIcon.js

@@ -4,31 +4,12 @@ exports.FieldIcon = exports.cnFieldIcon = exports.FIELD_ICON_DEFAULT_TAG = void
 var tslib_1 = require("tslib");
 require("./FieldIcon.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var react_is_1 = require("react-is");
 var classname_1 = require("../../utils/classname");
 var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var renderContent_1 = require("../../utils/renderContent");
 var FieldControl_1 = require("../FieldControl");
 exports.FIELD_ICON_DEFAULT_TAG = 'div';
 exports.cnFieldIcon = (0, classname_1.cn)('FieldIcon');
-// TODO: взять за основу для всех рендер-функций
-var resolveChildren = function (content, size) {
-    if (typeof content === 'string') {
-        return content;
-    }
-    if ((0, react_is_1.isElement)(content)) {
-        return react_1.default.cloneElement(content, {
-            size: content.props.size || (size && (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size)),
-        });
-    }
-    if (typeof content === 'function' && !react_1.default.isValidElement(content)) {
-        return content({ size: size && (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size) });
-    }
-    if ((0, react_is_1.isValidElementType)(content)) {
-        var Content = content;
-        return react_1.default.createElement(Content, { size: size && (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size) });
-    }
-    return null;
-};
 exports.FieldIcon = (0, react_1.forwardRef)(function (_a, ref) {
     var icon = _a.icon, className = _a.className, sizeProp = _a.size, other = tslib_1.__rest(_a, ["icon", "className", "size"]);
     var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
@@ -43,6 +24,9 @@ exports.FieldIcon = (0, react_1.forwardRef)(function (_a, ref) {
             size = fieldControl.size;
         }
     }
-    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldIcon)({ size: size }, [className]) }, other, { ref: ref }), resolveChildren(icon, size)));
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldIcon)({ size: size }, [className]) }, other, { ref: ref }), (0, renderContent_1.renderContent)({
+        content: icon,
+        props: { size: size && (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size) },
+    })));
 });
 exports.FieldIcon.displayName = 'FieldIcon';

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/Modal/Modal.js

@@ -22,7 +22,6 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     var hasBackdrop = !hideBackdrop;
     var modalInnerRef = (0, react_1.useRef)(null);
     var focusedElement = (0, react_1.useRef)(null);
-    var isClickOutSide = (0, react_1.useRef)(null);
     var _h = tslib_1.__read((0, react_1.useState)(false), 2), openState = _h[0], setOpenState = _h[1];
     var _j = tslib_1.__read((0, react_1.useState)(false), 2), opened = _j[0], setOpened = _j[1];
     var _k = (0, index_1.useModalManager)(modalInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
@@ -31,7 +30,6 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
             modalInnerRef
         ], tslib_1.__read(refsClickOutside), false), tslib_1.__read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
-            isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
         active: !disableClickOutside,
@@ -43,7 +41,6 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
         // Сохраняем фокус активного элемента до момента открытия всплывающего окна
         if (open) {
             setOpened(true);
-            isClickOutSide.current = null;
             focusedElement.current =
                 document.activeElement;
             (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.blur();
@@ -57,10 +54,9 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     var onExited = (0, react_1.useCallback)(function () {
         var _a, _b;
         // Возвращаем фокус активного элемента
-        if (!isClickOutSide.current &&
-            (((_a = modalInnerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
-                document.activeElement === document.body)) {
-            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
+        if (((_a = modalInnerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
+            document.activeElement === document.body) {
+            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
         }
         setOpened(false);
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();

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

@@ -23,7 +23,6 @@ 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 isClickOutSide = (0, react_1.useRef)(null);
     var _j = tslib_1.__read((0, react_1.useState)(false), 2), openState = _j[0], setOpenState = _j[1];
     var focusedElement = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
@@ -49,7 +48,6 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
             popoverRef
         ], tslib_1.__read(refsClickOutside), false), tslib_1.__read((anchorRef ? [anchorRef] : [])), false), tslib_1.__read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
-            isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
         active: openState && !disableClickOutside,
@@ -58,10 +56,9 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
         var _a, _b;
         // Возвращаем фокус активного элемента
         if (!disableReturnFocus &&
-            !isClickOutSide.current &&
             (((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
                 document.activeElement === document.body)) {
-            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
         }
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
@@ -136,7 +133,6 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
         var _a;
         // Сохраняем фокус активного элемента до момента открытия всплывающего окна
         if (open && !disableReturnFocus) {
-            isClickOutSide.current = null;
             focusedElement.current =
                 document.activeElement;
             (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.blur();

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/components/ThemeProvider/types.d.ts

@@ -8,6 +8,7 @@ import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
 import type { CheckboxGroupProps } from '../CheckboxGroup';
 import type { ChipProps } from '../Chip';
+import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
@@ -69,6 +70,7 @@ export type Theme = {
         Checkbox?: Partial<CheckboxProps>;
         CheckboxGroup?: Partial<CheckboxGroupProps>;
         Chip?: Partial<ChipProps>;
+        ChipNext?: Partial<ChiPropsNext>;
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;