@consta/uikit 3.9.0 → 3.10.0

package/ResponsesNothingFound/package.json

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

package/ResponsesSuccess/package.json

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

package/Select/package.json

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

package/Sidebar/package.json

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

package/Skeleton/package.json

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

package/SnackBar/package.json

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

package/Steps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Steps",
-  "version": "3.9.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "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.0",
+  "version": "3.10.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

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

@@ -19,35 +19,38 @@
   --avatar-color-16: #1abc1a;
   --avatar-color-17: #6fb80a;
   overflow: hidden;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   color: #fff;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.24)), to(rgba(255, 255, 255, 0))),
     -webkit-gradient(linear, left top, left bottom, from(var(--avatar-color)), to(var(--avatar-color)));
   background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
     linear-gradient(var(--avatar-color), var(--avatar-color));
+  font-size: var(--avatar-font-size);
   font-weight: var(--font-weight-text-semibold);
+  line-height: var(--avatar-size);
   text-align: center;
   letter-spacing: 0.1em;
 }
 
   .Avatar_size_xs {
-      width: 20px;
-      height: 20px;
-      font-size: 6px;
-      line-height: 20px;
+      --avatar-size: 20px;
+      --avatar-font-size: 6px;
     }
 
   .Avatar_size_s {
-      width: 24px;
-      height: 24px;
-      font-size: 8px;
-      line-height: 24px;
+      --avatar-size: 24px;
+      --avatar-font-size: 8px;
     }
 
   .Avatar_size_m {
-      width: 32px;
-      height: 32px;
-      font-size: 10px;
-      line-height: 32px;
+      --avatar-size: 32px;
+      --avatar-font-size: 10px;
+    }
+
+  .Avatar_size_l {
+      --avatar-size: 40px;
+      --avatar-font-size: 14px;
     }
 
   .Avatar_form_round {

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

@@ -1,5 +1,5 @@
 import './Avatar.css';
-export declare const avatarPropSize: readonly ["m", "s", "xs"];
+export declare const avatarPropSize: readonly ["m", "s", "xs", "l"];
 export declare type AvatarPropSize = typeof avatarPropSize[number];
 export declare const avatarPropSizeDefault: AvatarPropSize;
 export declare const avatarPropForm: readonly ["round", "brick", "default"];

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

@@ -6,7 +6,7 @@ require("./Avatar.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var bem_1 = require("../../utils/bem");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
-exports.avatarPropSize = ['m', 's', 'xs'];
+exports.avatarPropSize = ['m', 's', 'xs', 'l'];
 exports.avatarPropSizeDefault = exports.avatarPropSize[0];
 exports.avatarPropForm = ['round', 'brick', 'default'];
 exports.avatarPropFormDefault = exports.avatarPropForm[0];

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>>;
+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);