@consta/uikit 3.9.3 → 3.10.0

package/Steps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Steps",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Switch",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SwitchGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SwitchGroup",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Table",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tabs",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tag",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TagBase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TagBase",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Text",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TextField/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TextField",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Theme",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ThemeToggler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ThemeToggler",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Timer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Timer",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tooltip",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/User/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/User",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelect",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelectDeprecated/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelectDeprecated",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/__internal__/cjs-src/components/Breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@ require("./Breadcrumbs.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var Button_1 = require("../Button/Button");
 exports.breadcrumbPropSize = ['m', 'xs', 's', 'l'];
 exports.breadcrumbPropSizeDefault = exports.breadcrumbPropSize[0];
@@ -19,7 +19,7 @@ var sizeMap = {
 };
 exports.Breadcrumbs = react_1["default"].forwardRef(function (props, ref) {
     var pages = props.pages, getLabel = props.getLabel, getIsActive = props.getIsActive, getLink = props.getLink, getIcon = props.getIcon, _a = props.size, size = _a === void 0 ? exports.breadcrumbPropSizeDefault : _a, _b = props.maxCount, maxCount = _b === void 0 ? 0 : _b, onClick = props.onClick, _c = props.onlyIconRoot, onlyIconRoot = _c === void 0 ? false : _c, className = props.className, restProps = tslib_1.__rest(props, ["pages", "getLabel", "getIsActive", "getLink", "getIcon", "size", "maxCount", "onClick", "onlyIconRoot", "className"]);
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size);
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
     var _d = react_1.useMemo(function () {
         var rest = pages.slice();
         var head = rest.splice(0, 1);

package/__internal__/cjs-src/components/Button/Button.js

@@ -3,10 +3,11 @@ exports.__esModule = true;
 exports.Button = exports.cnButton = exports.COMPONENT_NAME = exports.buttonPropFormDefault = exports.buttonPropForm = exports.buttonPropWidthDefault = exports.buttonPropWidth = exports.buttonPropViewDefault = exports.buttonPropView = exports.buttonPropSizeDefault = exports.buttonPropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Button.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var Loader_1 = require("../Loader/Loader");
@@ -41,7 +42,8 @@ var sizeMapOnlyIcon = {
     l: 'm'
 };
 exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
-    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, ref), _b = _a.size, size = _b === void 0 ? exports.buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? exports.buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? exports.buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = tslib_1.__rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
+    var buttonRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, buttonRef), _b = _a.size, size = _b === void 0 ? exports.buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? exports.buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? exports.buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = tslib_1.__rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
     var Tag = as;
     var IconOnly = (!label || onlyIcon) && (iconLeft || iconRight);
     var IconLeft = iconLeft;
@@ -49,8 +51,8 @@ exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref)
     var withIcon = !!iconLeft || !!iconRight;
     var title = props.title || (!!IconOnly && label) || undefined;
     var iconSize = IconOnly
-        ? getSizeByMap_1.getSizeByMap(sizeMapOnlyIcon, size, iconSizeProp)
-        : getSizeByMap_1.getSizeByMap(sizeMap, size, iconSizeProp);
+        ? getByMap_1.getByMap(sizeMapOnlyIcon, size, iconSizeProp)
+        : getByMap_1.getByMap(sizeMap, size, iconSizeProp);
     var handleClick = function (e) {
         if (!disabled && !loading && onClick) {
             onClick(e);
@@ -65,7 +67,7 @@ exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref)
             loading: loading,
             withIcon: withIcon,
             onlyIcon: !!IconOnly
-        }, [MixFocus_1.cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: ref }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
+        }, [MixFocus_1.cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: useForkRef_1.useForkRef([ref, buttonRef]) }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
         IconOnly && react_1["default"].createElement(IconOnly, { className: exports.cnButton('Icon'), size: iconSize }),
         !IconOnly &&
             ((IconLeft || IconRight) && label ? (react_1["default"].createElement(react_1["default"].Fragment, null,

package/__internal__/cjs-src/components/Calendar/Calendar.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./Calendar.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var CalendarViewOneMonth_1 = require("./CalendarViewOneMonth/CalendarViewOneMonth");
 var CalendarViewSlider_1 = require("./CalendarViewSlider/CalendarViewSlider");
 var CalendarViewTwoMonths_1 = require("./CalendarViewTwoMonths/CalendarViewTwoMonths");
@@ -18,7 +18,7 @@ var viewMap = {
 };
 exports.Calendar = react_1["default"].forwardRef(function (props, ref) {
     var _a = props.view, view = _a === void 0 ? helpers_1.calendarPropViewDefault : _a, className = props.className, otherProps = tslib_1.__rest(props, ["view", "className"]);
-    var ViewComponent = getSizeByMap_1.getSizeByMap(viewMap, view);
+    var ViewComponent = getByMap_1.getByMap(viewMap, view);
     return react_1["default"].createElement(ViewComponent, tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnCalendar(null, [className]) }));
 });
 tslib_1.__exportStar(require("./CalendarCell/CalendarCell"), exports);

package/__internal__/cjs-src/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -16,7 +16,12 @@ export declare type СhoiceGroupPropWidth = typeof choiceGroupWidth[number];
 export declare const choiceGroupWidthDefault: СhoiceGroupPropWidth;
 export declare type ChoiceGroupPropGetLabel<ITEM> = (item: ITEM) => string | number;
 export declare type ChoiceGroupPropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps> | undefined;
-declare type CommonProps<ITEM> = {
+export declare type ChoiceGroupPropValue<ITEM, MULTIPLE extends boolean> = (MULTIPLE extends true ? ITEM[] : ITEM) | null;
+export declare type ChoiceGroupPropOnChange<ITEM, MULTIPLE extends boolean> = (props: {
+    e: React.ChangeEvent<HTMLInputElement>;
+    value: MULTIPLE extends true ? ITEM[] | null : ITEM;
+}) => void;
+declare type Props<ITEM, MULTIPLE extends boolean = false> = PropsWithHTMLAttributesAndRef<{
     size?: ChoiceGroupPropSize;
     form?: ChoiceGroupPropForm;
     view?: ChoiceGroupPropView;
@@ -27,30 +32,14 @@ declare type CommonProps<ITEM> = {
     getLabel: ChoiceGroupPropGetLabel<ITEM>;
     getIcon?: ChoiceGroupPropGetIcon<ITEM>;
     name: string;
-    children?: never;
     disabled?: boolean;
     getDisabled?: (item: ITEM) => boolean | undefined;
-};
-declare type OnChangeMultiple<ITEM> = (props: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    value: ITEM[] | null;
-}) => void;
-declare type OnChangeWithoutMultiple<ITEM> = (props: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    value: ITEM;
-}) => void;
-declare type PropsWithMultiple<ITEM> = {
-    value?: ITEM[] | null;
-    multiple: true;
-    onChange: OnChangeMultiple<ITEM>;
-};
-declare type PropsWithoutMultiple<ITEM> = {
-    value?: ITEM | null;
-    multiple: false;
-    onChange: OnChangeWithoutMultiple<ITEM>;
-};
-declare type Props<ITEM> = PropsWithHTMLAttributesAndRef<CommonProps<ITEM> & (PropsWithMultiple<ITEM> | PropsWithoutMultiple<ITEM>), HTMLDivElement>;
-declare type ChoiceGroup = <ITEM>(props: Props<ITEM>) => React.ReactElement | null;
+    value?: ChoiceGroupPropValue<ITEM, MULTIPLE>;
+    onChange?: ChoiceGroupPropOnChange<ITEM, MULTIPLE>;
+    multiple?: MULTIPLE;
+    children?: never;
+}, HTMLDivElement>;
+declare type ChoiceGroupComponent = <ITEM, MULTIPLE extends boolean = false>(props: Props<ITEM, MULTIPLE>) => React.ReactElement | null;
 export declare const cnChoiceGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const ChoiceGroup: ChoiceGroup;
+export declare const ChoiceGroup: ChoiceGroupComponent;
 export {};

package/__internal__/cjs-src/components/ChoiceGroup/ChoiceGroup.js

@@ -6,7 +6,7 @@ require("./ChoiceGroup.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var ChoiceGroup_Item_1 = require("./Item/ChoiceGroup-Item");
 exports.choiceGroupForms = ['default', 'brick', 'round'];
 exports.choiceGroupDefaultForm = 'default';
@@ -31,7 +31,7 @@ exports.ChoiceGroup = react_1["default"].forwardRef(function (props, ref) {
         callBack: onChange,
         multiple: multiple
     }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap_1.getByMap(sizeMap, size, iconSizeProp);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon, disabled: disabled }, [className]) }), items.map(function (item, idx) {
         var itemChecked = getChecked(item);
         var itemDisabled = !!getDisabled && getDisabled(item);

package/__internal__/cjs-src/components/Collapse/Collapse.js

@@ -6,7 +6,7 @@ require("./Collapse.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var IconArrowDown_1 = require("../../icons/IconArrowDown/IconArrowDown");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var Text_1 = require("../Text/Text");
 var CollapseIcon_1 = require("./CollapseIcon/CollapseIcon");
 exports.collapsePropSize = ['m', 'l', 's', 'xs', '2xs'];
@@ -51,7 +51,7 @@ exports.Collapse = react_1["default"].forwardRef(function (props, ref) {
                 hoverEffect: hoverEffect,
                 iconPosition: iconPosition
             }) }, otherProps),
-            react_1["default"].createElement(CollapseIcon_1.CollapseIcon, { className: exports.cnCollapse('Icon', { position: iconPosition }), size: getSizeByMap_1.getSizeByMap(exports.sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
+            react_1["default"].createElement(CollapseIcon_1.CollapseIcon, { className: exports.cnCollapse('Icon', { position: iconPosition }), size: getByMap_1.getByMap(exports.sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
             react_1["default"].createElement(Text_1.Text, { className: exports.cnCollapse('LabelText'), view: view, size: size }, label),
             iconPosition === 'left' && renderSide(rightSide)),
         react_1["default"].createElement("div", { className: exports.cnCollapse('Body', { isOpen: isOpen, divider: divider }) },

package/__internal__/cjs-src/components/ContextMenu/ContextMenuGroupHeader/ContextMenuGroupHeader.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./ContextMenuGroupHeader.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var Text_1 = require("../../Text/Text");
 var helpers_1 = require("../helpers");
 exports.cnContextMenuGroupHeader = bem_1.cn('ContextMenuGroupHeader');
@@ -16,5 +16,5 @@ var sizeMap = {
 };
 exports.ContextMenuGroupHeader = function (_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? helpers_1.contextMenuDefaultSize : _b, first = _a.first;
-    return (react_1["default"].createElement(Text_1.Text, { view: "secondary", transform: "uppercase", className: exports.cnContextMenuGroupHeader({ size: size, first: first }), size: getSizeByMap_1.getSizeByMap(sizeMap, size) }, label));
+    return (react_1["default"].createElement(Text_1.Text, { view: "secondary", transform: "uppercase", className: exports.cnContextMenuGroupHeader({ size: size, first: first }), size: getByMap_1.getByMap(sizeMap, size) }, label));
 };

package/__internal__/cjs-src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js

@@ -48,11 +48,11 @@ exports.ContextMenuLevel = react_1["default"].forwardRef(function (props, ref) {
     // props относящиеся к уровню меню
     size = _a === void 0 ? helpers_1.contextMenuDefaultSize : _a, level = props.level, activeItem = props.activeItem, addLevel = props.addLevel, className = props.className, deleteLevel = props.deleteLevel, items = props.items, setHoveredParenLevel = props.setHoveredParenLevel, 
     // props относящиеся к пунктам меню
-    getLabel = props.getLabel, getRightSideBar = props.getRightSideBar, getLeftSideBar = props.getLeftSideBar, getSubItems = props.getSubItems, getGroupId = props.getGroupId, getAccent = props.getAccent, getDisabled = props.getDisabled, getOnClick = props.getOnClick, 
+    getLabel = props.getLabel, getRightSideBar = props.getRightSideBar, getLeftSideBar = props.getLeftSideBar, getSubItems = props.getSubItems, getGroupId = props.getGroupId, getAccent = props.getAccent, getDisabled = props.getDisabled, getOnClick = props.getOnClick, getItemOnClick = props.getItemOnClick, onItemClick = props.onItemClick, 
     // props относящиеся к группам меню
     sortGroup = props.sortGroup, getGroupLabel = props.getGroupLabel, 
     // props относящиеся к поповеру
-    direction = props.direction, possibleDirections = props.possibleDirections, offset = props.offset, onSetDirection = props.onSetDirection, hoveredParenLevel = props.hoveredParenLevel, spareDirection = props.spareDirection, anchorRef = props.anchorRef, otherProps = tslib_1.__rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
+    direction = props.direction, possibleDirections = props.possibleDirections, offset = props.offset, onSetDirection = props.onSetDirection, hoveredParenLevel = props.hoveredParenLevel, spareDirection = props.spareDirection, anchorRef = props.anchorRef, otherProps = tslib_1.__rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "getItemOnClick", "onItemClick", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
     var _b = tslib_1.__read(react_1.useState(false), 2), hovered = _b[0], setHovered = _b[1];
     var groups = getGroups_1.getGroups(items, getGroupId, undefined, undefined, sortGroup && (function (a, b) { return sortGroup(a.key, b.key); }));
     var getItemIndex = function (groupId, itemIndex) { return groupId + "-" + itemIndex; };
@@ -98,7 +98,20 @@ exports.ContextMenuLevel = react_1["default"].forwardRef(function (props, ref) {
                 var leftSide = typeof getLeftSideBar === 'function' ? getLeftSideBar(item) : undefined;
                 var rightSide = typeof getRightSideBar === 'function' ? getRightSideBar(item) : undefined;
                 var subItems = typeof getSubItems === 'function' ? getSubItems(item) : undefined;
-                var onClick = !disabled && typeof getOnClick === 'function' ? getOnClick(item) : undefined;
+                var onClick = function (e) {
+                    var _a, _b;
+                    if (!disabled) {
+                        if (typeof getItemOnClick === 'function') {
+                            (_a = getItemOnClick(item)) === null || _a === void 0 ? void 0 : _a(e);
+                        }
+                        if (typeof getOnClick === 'function') {
+                            (_b = getOnClick(item)) === null || _b === void 0 ? void 0 : _b(e);
+                        }
+                        if (typeof onItemClick === 'function') {
+                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick({ e: e, item: item });
+                        }
+                    }
+                };
                 var onMouseEnter = subItems && !disabled
                     ? function () {
                         addLevel(level + 1, subItems, ref, itemIndex);

package/__internal__/cjs-src/components/ContextMenu/helpers.d.ts

@@ -16,7 +16,7 @@ export declare type ContextMenuPropGetKey<ITEM> = (item: ITEM) => string | numbe
 export declare type ContextMenuPropGetDisable<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type ContextMenuPropGetGroupLabel = (id: string | number | undefined) => string | number | undefined;
 export declare type ContextMenuPropSortGroup = (a: string | number, b: string | number) => number;
-export declare type ContextMenuPropGetOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>> | undefined;
+export declare type ContextMenuPropGetItemOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent<HTMLDivElement>> | undefined;
 export declare const contextMenuPropSubMenuDirections: readonly ["rightStartUp", "rightStartDown", "leftStartUp", "leftStartDown"];
 export declare type ContextMenuPropSubMenuDirection = typeof contextMenuPropSubMenuDirections[number];
 export declare const contextMenuPropDefaultSubMenuDirection: ContextMenuPropSubMenuDirection;
@@ -38,13 +38,18 @@ export declare type ContextMenuProps<ITEM> = PropsWithHTMLAttributesAndRef<{
     getAccent?: ContextMenuPropGetAccent<ITEM>;
     size?: ContextMenuPropSize;
     sortGroup?: ContextMenuPropSortGroup;
-    getOnClick?: ContextMenuPropGetOnClick<ITEM>;
+    getOnClick?: ContextMenuPropGetItemOnClick<ITEM>;
+    getItemOnClick?: ContextMenuPropGetItemOnClick<ITEM>;
     direction?: Direction;
     possibleDirections?: readonly Direction[];
     subMenuDirection?: ContextMenuPropSubMenuDirection;
     getKey?: ContextMenuPropGetKey<ITEM>;
     getDisabled?: ContextMenuPropGetDisable<ITEM>;
     offset?: number;
+    onItemClick?: (props: {
+        e: React.MouseEvent;
+        item: ITEM;
+    }) => void;
     onClickOutside?: ClickOutsideHandler;
     spareDirection?: Direction;
 } & PositioningProps, HTMLDivElement>;

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.js

@@ -7,7 +7,7 @@ var react_1 = tslib_1.__importStar(require("react"));
 var isBefore_1 = tslib_1.__importDefault(require("date-fns/isBefore"));
 var isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var DatePickerFieldTypeDate_1 = require("../DatePickerFieldTypeDate/DatePickerFieldTypeDate");
 var helpers_1 = require("../helpers");
 var helpers_2 = require("./helpers");
@@ -91,6 +91,6 @@ exports.DatePickerFieldTypeDateRange = react_1.forwardRef(function (props, ref)
         setEndDate(value === null || value === void 0 ? void 0 : value[1]);
     }, [(_b = value === null || value === void 0 ? void 0 : value[1]) === null || _b === void 0 ? void 0 : _b.getTime()]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDatePickerFieldTypeDateRange(null, [className]), ref: ref }),
-        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getSizeByMap_1.getSizeByMap(helpers_2.mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
-        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getSizeByMap_1.getSizeByMap(helpers_2.mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
+        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getByMap_1.getByMap(helpers_2.mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
+        react_1["default"].createElement(DatePickerFieldTypeDate_1.DatePickerFieldTypeDate, tslib_1.__assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getByMap_1.getByMap(helpers_2.mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeCanary.js

@@ -3,7 +3,7 @@ exports.__esModule = true;
 exports.DateTime = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var DateTimeTypeDate_1 = require("./DateTimeTypeDate/DateTimeTypeDate");
 var DateTimeTypeDateTime_1 = require("./DateTimeTypeDateTime/DateTimeTypeDateTime");
 var DateTimeTypeMonth_1 = require("./DateTimeTypeMonth/DateTimeTypeMonth");
@@ -19,7 +19,7 @@ var typeMap = {
 };
 exports.DateTime = react_1.forwardRef(function (props, ref) {
     var _a = props.type, type = _a === void 0 ? types_1.dateTimePropTypeDefault : _a, otherProps = tslib_1.__rest(props, ["type"]);
-    var Component = getSizeByMap_1.getSizeByMap(typeMap, type);
+    var Component = getByMap_1.getByMap(typeMap, type);
     return react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, { ref: ref }));
 });
 tslib_1.__exportStar(require("./helpers/types"), exports);

package/__internal__/cjs-src/components/ProgressSpin/ProgressSpin.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./ProgressSpin.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var type_guards_1 = require("../../utils/type-guards");
 exports.progressSpinPropSize = ['m', 's', 'l', 'xl', '2xl'];
 exports.progressSpinPropSizeDefault = exports.progressSpinPropSize[0];
@@ -25,8 +25,8 @@ var strokeWidthMap = {
     '2xl': 3.5
 };
 function getSvgParamsBySize(size) {
-    var sizeOfPixels = getSizeByMap_1.getSizeByMap(sizeMap, size);
-    var strokeWidth = getSizeByMap_1.getSizeByMap(strokeWidthMap, size);
+    var sizeOfPixels = getByMap_1.getByMap(sizeMap, size);
+    var strokeWidth = getByMap_1.getByMap(strokeWidthMap, size);
     var radius = (sizeOfPixels - strokeWidth) / 2;
     var strokeDasharray = radius * 2 * Math.PI;
     return [sizeOfPixels, strokeWidth, radius, strokeDasharray];

package/__internal__/cjs-src/components/ProgressStepBarCanary/ProgressStepBarLine/ProgressStepBarLine.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./ProgressStepBarLine.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var cnProgressStepBarLine = bem_1.cn('ProgressStepBarLine');
 var mapVarsByStatus = {
     normal: 'var(--color-bg-normal)',
@@ -18,7 +18,7 @@ var backgroundGenerate = function (lines, direction) {
     var length = lines.length;
     for (var index = 0; index < length; index++) {
         var line = lines[index];
-        var color = getSizeByMap_1.getSizeByMap(mapVarsByStatus, line.status || 'normal');
+        var color = getByMap_1.getByMap(mapVarsByStatus, line.status || 'normal');
         var from = lines[index - 1] ? lines[index - 1].size : 0;
         var to = line.size;
         background += color + " " + from + "px, " + color + " " + to + "px" + (index < length - 1 ? ', ' : ')');

package/__internal__/cjs-src/components/SelectComponents/SelectItem/SelectItem.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./SelectItem.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var Checkbox_1 = require("../../Checkbox/Checkbox");
 exports.cnSelectItem = bem_1.cn('SelectItem');
 var sizeCheckboxMap = {
@@ -17,6 +17,6 @@ var sizeCheckboxMap = {
 exports.SelectItem = function (props) {
     var className = props.className, label = props.label, active = props.active, hovered = props.hovered, multiple = props.multiple, size = props.size, indent = props.indent, disabled = props.disabled, otherProps = tslib_1.__rest(props, ["className", "label", "active", "hovered", "multiple", "size", "indent", "disabled"]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnSelectItem({ active: active, hovered: hovered, multiple: multiple, size: size, indent: indent, disabled: disabled }, [className]), "aria-selected": active, "aria-disabled": disabled, role: "option" }),
-        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, size: getSizeByMap_1.getSizeByMap(sizeCheckboxMap, size) })),
+        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, size: getByMap_1.getByMap(sizeCheckboxMap, size) })),
         label));
 };

package/__internal__/cjs-src/components/SelectComponentsDeprecated/SelectItem/SelectItem.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./SelectItem.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var Checkbox_1 = require("../../Checkbox/Checkbox");
 exports.cnSelectItem = bem_1.cn('SelectItemDeprecated');
 // в дальнейшем уберем обязательность onChange у Checkbox
@@ -20,6 +20,6 @@ var sizeCheckboxMap = {
 exports.SelectItem = function (props) {
     var className = props.className, label = props.label, active = props.active, hovered = props.hovered, multiple = props.multiple, size = props.size, indent = props.indent, otherProps = tslib_1.__rest(props, ["className", "label", "active", "hovered", "multiple", "size", "indent"]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnSelectItem({ active: active, hovered: hovered, multiple: multiple, size: size, indent: indent }, [className]), "aria-selected": active, role: "option" }),
-        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, onChange: emptyFunction, size: getSizeByMap_1.getSizeByMap(sizeCheckboxMap, size) })),
+        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, onChange: emptyFunction, size: getByMap_1.getByMap(sizeCheckboxMap, size) })),
         label));
 };

package/__internal__/cjs-src/components/SnackBar/SnackBar.css

@@ -6,6 +6,12 @@
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  max-width: calc(400px + var(--space-xs) * 2);
+  padding-right: var(--space-xs);
+  padding-left: var(--space-xs);
 }
 
   .SnackBar-Item_animate_appear,

package/__internal__/cjs-src/components/Steps/StepsStep/StepsStep.js

@@ -6,7 +6,7 @@ require("./StepsStep.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var IconCheck_1 = require("../../../icons/IconCheck/IconCheck");
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 exports.cnStepsStep = bem_1.cn('StepsStep');
 var sizeMap = {
     m: 'xs',
@@ -17,7 +17,7 @@ exports.StepsStep = react_1["default"].forwardRef(function (props, ref) {
     var clickHandler = function (e) {
         !active && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
     };
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size);
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
     return (react_1["default"].createElement("button", { ref: ref, className: exports.cnStepsStep({ size: size, active: active, disabled: disabled, completed: completed, skipped: skipped }, [className]), type: "button", title: label, onClick: clickHandler },
         completed && react_1["default"].createElement(IconCheck_1.IconCheck, { className: exports.cnStepsStep('Icon'), size: iconSize }),
         label));

package/__internal__/cjs-src/components/Table/ChoiceGroupFilter/TableChoiceGroupFilter.js

@@ -21,5 +21,5 @@ exports.TableChoiceGroupFilter = function (_a) {
         setValue(value);
     };
     return (react_1["default"].createElement(TableFilterContainer_1.TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
-        react_1["default"].createElement(ChoiceGroup_1.ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, multiple: false, className: cnChoiceGroupFilter() })));
+        react_1["default"].createElement(ChoiceGroup_1.ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, className: cnChoiceGroupFilter() })));
 };

package/__internal__/cjs-src/components/Tabs/Tab/TabsTab.js

@@ -6,7 +6,7 @@ require("./TabsTab.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var MixFocus_1 = require("../../../mixs/MixFocus/MixFocus");
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 exports.cnTabsTab = bem_1.cn('TabsTab');
 var sizeMap = {
     s: 'xs',
@@ -14,7 +14,7 @@ var sizeMap = {
 };
 exports.TabsTab = react_1.forwardRef(function (props, ref) {
     var label = props.label, onChange = props.onChange, checked = props.checked, size = props.size, onlyIcon = props.onlyIcon, Icon = props.icon, iconSizeProp = props.iconSize, className = props.className;
-    var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap_1.getByMap(sizeMap, size, iconSizeProp);
     return (react_1["default"].createElement("button", { className: exports.cnTabsTab({ size: size, checked: checked, onlyIcon: onlyIcon }, [MixFocus_1.cnMixFocus({ before: true }), className]), onClick: checked ? undefined : onChange, ref: ref, role: "tab", type: "button", title: onlyIcon ? label : undefined },
         Icon && react_1["default"].createElement(Icon, { className: exports.cnTabsTab('Icon'), size: iconSize }),
         !onlyIcon && label));

package/__internal__/cjs-src/components/TagBase/TagBase.js

@@ -6,7 +6,7 @@ require("./TagBase.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var IconClose_1 = require("../../icons/IconClose/IconClose");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
 exports.tagBasePropSize = ['m', 'xs', 's', 'l'];
 exports.tagBasePropSizeDefault = exports.tagBasePropSize[0];
@@ -27,8 +27,8 @@ exports.TagBase = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref)
     var Tag = as;
     var withCancel = typeof onCancel === 'function';
     var withIcon = !!Icon;
-    var IconCloseSize = getSizeByMap_1.getSizeByMap(sizeMap, size);
-    var IconSize = getSizeByMap_1.getSizeByMap(sizeMap, size, iconSize);
+    var IconCloseSize = getByMap_1.getByMap(sizeMap, size);
+    var IconSize = getByMap_1.getByMap(sizeMap, size, iconSize);
     return (react_1["default"].createElement(Tag, tslib_1.__assign({}, otherProps, { className: exports.cnTagBase({
             size: size,
             view: view,