@consta/uikit 3.9.2 → 3.12.0

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

@@ -1,9 +1,10 @@
 import { __assign, __rest } from "tslib";
 import './Button.css';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { Loader } from '../Loader/Loader';
@@ -38,7 +39,8 @@ var sizeMapOnlyIcon = {
     l: 'm'
 };
 export var Button = forwardRefWithAs(function (props, ref) {
-    var _a = usePropsHandler(COMPONENT_NAME, props, ref), _b = _a.size, size = _b === void 0 ? buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? 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 = __rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
+    var buttonRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, buttonRef), _b = _a.size, size = _b === void 0 ? buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? 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 = __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;
@@ -46,8 +48,8 @@ export var Button = forwardRefWithAs(function (props, ref) {
     var withIcon = !!iconLeft || !!iconRight;
     var title = props.title || (!!IconOnly && label) || undefined;
     var iconSize = IconOnly
-        ? getSizeByMap(sizeMapOnlyIcon, size, iconSizeProp)
-        : getSizeByMap(sizeMap, size, iconSizeProp);
+        ? getByMap(sizeMapOnlyIcon, size, iconSizeProp)
+        : getByMap(sizeMap, size, iconSizeProp);
     var handleClick = function (e) {
         if (!disabled && !loading && onClick) {
             onClick(e);
@@ -62,7 +64,7 @@ export var Button = forwardRefWithAs(function (props, ref) {
             loading: loading,
             withIcon: withIcon,
             onlyIcon: !!IconOnly
-        }, [cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: ref }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
+        }, [cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: useForkRef([ref, buttonRef]) }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
         IconOnly && React.createElement(IconOnly, { className: cnButton('Icon'), size: iconSize }),
         !IconOnly &&
             ((IconLeft || IconRight) && label ? (React.createElement(React.Fragment, null,

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

@@ -2,7 +2,7 @@ import { __assign, __rest } from "tslib";
 import './Calendar.css';
 import React from 'react';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { CalendarViewOneMonth } from './CalendarViewOneMonth/CalendarViewOneMonth';
 import { CalendarViewSlider } from './CalendarViewSlider/CalendarViewSlider';
 import { CalendarViewTwoMonths } from './CalendarViewTwoMonths/CalendarViewTwoMonths';
@@ -15,7 +15,7 @@ var viewMap = {
 };
 export var Calendar = React.forwardRef(function (props, ref) {
     var _a = props.view, view = _a === void 0 ? calendarPropViewDefault : _a, className = props.className, otherProps = __rest(props, ["view", "className"]);
-    var ViewComponent = getSizeByMap(viewMap, view);
+    var ViewComponent = getByMap(viewMap, view);
     return React.createElement(ViewComponent, __assign({}, otherProps, { ref: ref, className: cnCalendar(null, [className]) }));
 });
 export * from './CalendarCell/CalendarCell';

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

@@ -1,6 +1,6 @@
 import './ChoiceGroup.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 export declare const choiceGroupForms: readonly ["default", "brick", "round"];
 export declare type ChoiceGroupPropForm = typeof choiceGroupForms[number];
@@ -15,8 +15,13 @@ export declare const choiceGroupWidth: readonly ["default", "full"];
 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 ChoiceGroupPropGetIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
+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__/src/components/ChoiceGroup/ChoiceGroup.js

@@ -3,7 +3,7 @@ import './ChoiceGroup.css';
 import React from 'react';
 import { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { ChoiceGroupItem } from './Item/ChoiceGroup-Item';
 export var choiceGroupForms = ['default', 'brick', 'round'];
 export var choiceGroupDefaultForm = 'default';
@@ -28,7 +28,7 @@ export var ChoiceGroup = React.forwardRef(function (props, ref) {
         callBack: onChange,
         multiple: multiple
     }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
-    var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
     return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: 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__/src/components/ChoiceGroup/Item/ChoiceGroup-Item.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { IconProps, IconPropSize } from '../../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
 declare type Props = {
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     onlyIcon?: boolean;
     iconSize?: IconPropSize;
     label: string;

package/__internal__/src/components/Collapse/Collapse.d.ts

@@ -1,6 +1,6 @@
 import './Collapse.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { CollapseIconPropDirection } from './CollapseIcon/CollapseIcon';
 export declare const collapsePropSize: readonly ["m", "l", "s", "xs", "2xs"];
@@ -19,7 +19,7 @@ export declare const collapsePropDirectionIconDefault: "up";
 export declare const collapsePropCloseDirectionIconDefault: "down";
 declare type CollapseProps = PropsWithHTMLAttributesAndRef<{
     size?: CollapsePropSize;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     view?: CollapsePropView;
     divider?: boolean;
     label: string;
@@ -27,7 +27,7 @@ declare type CollapseProps = PropsWithHTMLAttributesAndRef<{
     hoverEffect?: boolean;
     isOpen?: boolean;
 } & ({
-    closeIcon?: React.FC<IconProps>;
+    closeIcon?: IconComponent;
     directionIcon?: never;
     closeDirectionIcon?: never;
 } | {

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

@@ -3,7 +3,7 @@ import './Collapse.css';
 import React from 'react';
 import { IconArrowDown } from '../../icons/IconArrowDown/IconArrowDown';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { Text } from '../Text/Text';
 import { CollapseIcon, collapseIconPropDirection, } from './CollapseIcon/CollapseIcon';
 export var collapsePropSize = ['m', 'l', 's', 'xs', '2xs'];
@@ -48,7 +48,7 @@ export var Collapse = React.forwardRef(function (props, ref) {
                 hoverEffect: hoverEffect,
                 iconPosition: iconPosition
             }) }, otherProps),
-            React.createElement(CollapseIcon, { className: cnCollapse('Icon', { position: iconPosition }), size: getSizeByMap(sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
+            React.createElement(CollapseIcon, { className: cnCollapse('Icon', { position: iconPosition }), size: getByMap(sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
             React.createElement(Text, { className: cnCollapse('LabelText'), view: view, size: size }, label),
             iconPosition === 'left' && renderSide(rightSide)),
         React.createElement("div", { className: cnCollapse('Body', { isOpen: isOpen, divider: divider }) },

package/__internal__/src/components/CollapseGroup/helpers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { CollapsePropHorizontalSpace, CollapsePropSize, CollapsePropView } from '../Collapse/Collapse';
 import { CollapseIconPropDirection } from '../Collapse/CollapseIcon/CollapseIcon';
@@ -20,7 +20,7 @@ export declare type CollapseGroupProps<ITEM, IS_ACCORDION extends boolean> = Pro
     items: ITEM[];
     isAccordion?: IS_ACCORDION;
     children?: never;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     divider?: boolean;
     size?: CollapsePropSize;
     view?: CollapsePropView;
@@ -31,7 +31,7 @@ export declare type CollapseGroupProps<ITEM, IS_ACCORDION extends boolean> = Pro
     getItemLabel?: CollapseGroupPropGetItemLabel<ITEM>;
     getItemContent?: CollapseGroupPropGetItemContent<ITEM>;
 } & ({
-    closeIcon: React.FC<IconProps>;
+    closeIcon: IconComponent;
     directionIcon?: never;
     closeDirectionIcon?: never;
 } | {
@@ -62,7 +62,10 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
     items: ITEM[];
     isAccordion?: IS_ACCORDION | undefined;
     children?: undefined;
-    icon?: React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    icon?: React.FC<PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     divider?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | "2xs" | undefined;
     view?: "primary" | "secondary" | undefined;
@@ -73,7 +76,10 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
     getItemLabel?: CollapseGroupPropGetItemLabel<ITEM> | undefined;
     getItemContent?: CollapseGroupPropGetItemContent<ITEM> | undefined;
 } & {
-    closeIcon: React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>>;
+    closeIcon: React.FC<PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>>;
     directionIcon?: undefined;
     closeDirectionIcon?: undefined;
 } & {
@@ -95,7 +101,10 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
     items: ITEM[];
     isAccordion?: IS_ACCORDION | undefined;
     children?: undefined;
-    icon?: React.FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    icon?: React.FC<PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     divider?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | "2xs" | undefined;
     view?: "primary" | "secondary" | undefined;

package/__internal__/src/components/Combobox/helpers.d.ts

@@ -97,7 +97,7 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     items: ITEM[];
     onChange: PropOnChange<ITEM, MULTIPLE>;
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     placeholder?: string | undefined;

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

@@ -1,7 +1,7 @@
 import './ContextMenuGroupHeader.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 import { Text } from '../../Text/Text';
 import { contextMenuDefaultSize } from '../helpers';
 export var cnContextMenuGroupHeader = cn('ContextMenuGroupHeader');
@@ -12,5 +12,5 @@ var sizeMap = {
 };
 export var ContextMenuGroupHeader = function (_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? contextMenuDefaultSize : _b, first = _a.first;
-    return (React.createElement(Text, { view: "secondary", transform: "uppercase", className: cnContextMenuGroupHeader({ size: size, first: first }), size: getSizeByMap(sizeMap, size) }, label));
+    return (React.createElement(Text, { view: "secondary", transform: "uppercase", className: cnContextMenuGroupHeader({ size: size, first: first }), size: getByMap(sizeMap, size) }, label));
 };

package/__internal__/src/components/ContextMenu/ContextMenuItem/ContextMenuItem.css

@@ -7,6 +7,7 @@
       -ms-flex-align: center;
           align-items: center;
   padding: var(--vertical-space) var(--space-s);
+  text-decoration: none;
   word-break: break-word;
   cursor: pointer;
   -webkit-transition: background 0.2s;

package/__internal__/src/components/ContextMenu/ContextMenuItem/ContextMenuItem.d.ts

@@ -1,4 +1,4 @@
 import './ContextMenuItem.css';
-import { ContextMenuItem as ContextMenuItemType } from '../helpers';
+import { ContextMenuItemComponent } from '../helpers';
 export declare const cnContextMenuItem: import("@bem-react/classname").ClassNameFormatter;
-export declare const ContextMenuItem: ContextMenuItemType;
+export declare const ContextMenuItem: ContextMenuItemComponent;

package/__internal__/src/components/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest, __spread } from "tslib";
 import './ContextMenuItem.css';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
 import { cn } from '../../../utils/bem';
 import { Text } from '../../Text/Text';
@@ -16,10 +16,10 @@ function renderSide(side, position, withArrow) {
         }), key: index }, item)); });
     return sidesRender;
 }
-export var ContextMenuItem = React.forwardRef(function (props, ref) {
-    var label = props.label, rightSide = props.rightSide, leftSide = props.leftSide, _a = props.size, size = _a === void 0 ? contextMenuDefaultSize : _a, active = props.active, withSubMenu = props.withSubMenu, accent = props.accent, disabled = props.disabled, otherProps = __rest(props, ["label", "rightSide", "leftSide", "size", "active", "withSubMenu", "accent", "disabled"]);
-    var view = disabled ? undefined : accent;
-    return (React.createElement(Text, __assign({}, otherProps, { className: cnContextMenuItem({ size: size, active: active, disabled: disabled }), ref: ref, size: size, view: view, lineHeight: "xs" }),
+export var ContextMenuItem = forwardRef(function (props, ref) {
+    var label = props.label, rightSide = props.rightSide, leftSide = props.leftSide, _a = props.size, size = _a === void 0 ? contextMenuDefaultSize : _a, active = props.active, withSubMenu = props.withSubMenu, accent = props.accent, disabled = props.disabled, _b = props.as, as = _b === void 0 ? 'div' : _b, className = props.className, otherProps = __rest(props, ["label", "rightSide", "leftSide", "size", "active", "withSubMenu", "accent", "disabled", "as", "className"]);
+    var view = (disabled ? undefined : accent) || 'primary';
+    return (React.createElement(Text, __assign({}, otherProps, { className: cnContextMenuItem({ size: size, active: active, disabled: disabled }, [className]), ref: ref, size: size, view: view, lineHeight: "xs", as: as }),
         renderSide(leftSide, 'left', false),
         !rightSide && !leftSide && !withSubMenu ? (label) : (React.createElement("div", { className: cnContextMenuItem('Side', { position: 'center' }) }, label)),
         renderSide(rightSide, 'right', withSubMenu)));

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

@@ -44,11 +44,11 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
     // props относящиеся к уровню меню
     size = _a === void 0 ? 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, getItemHTMLAttributes = props.getItemHTMLAttributes, getItemAs = props.getItemAs, 
     // 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 = __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 = __rest(props, ["size", "level", "activeItem", "addLevel", "className", "deleteLevel", "items", "setHoveredParenLevel", "getLabel", "getRightSideBar", "getLeftSideBar", "getSubItems", "getGroupId", "getAccent", "getDisabled", "getOnClick", "getItemOnClick", "onItemClick", "getItemHTMLAttributes", "getItemAs", "sortGroup", "getGroupLabel", "direction", "possibleDirections", "offset", "onSetDirection", "hoveredParenLevel", "spareDirection", "anchorRef"]);
     var _b = __read(useState(false), 2), hovered = _b[0], setHovered = _b[1];
     var groups = getGroups(items, getGroupId, undefined, undefined, sortGroup && (function (a, b) { return sortGroup(a.key, b.key); }));
     var getItemIndex = function (groupId, itemIndex) { return groupId + "-" + itemIndex; };
@@ -94,7 +94,20 @@ export var ContextMenuLevel = React.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);
@@ -104,7 +117,9 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
                         setHoveredParenLevel(level);
                     };
                 var accent = typeof getAccent === 'function' ? getAccent(item) : undefined;
-                return (React.createElement(ContextMenuItem, { ref: ref, label: label, leftSide: leftSide, rightSide: rightSide, size: size, key: itemIndex, onMouseEnter: onMouseEnter, onClick: onClick, active: activeItem === itemIndex, withSubMenu: Boolean(subItems), accent: accent, disabled: disabled }));
+                var atributes = typeof getItemHTMLAttributes === 'function' ? getItemHTMLAttributes(item) : {};
+                var as = typeof getItemAs === 'function' ? getItemAs(item) : undefined;
+                return (React.createElement(ContextMenuItem, __assign({}, atributes, { ref: ref, label: label, leftSide: leftSide, rightSide: rightSide, size: size, key: itemIndex, onMouseEnter: onMouseEnter, onClick: onClick, active: activeItem === itemIndex, withSubMenu: Boolean(subItems), accent: accent, disabled: disabled, as: as })));
             })));
     })));
 });

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';
-import { PropsWithHTMLAttributes, PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { PropsWithAsAttributes } from '../../utils/types/PropsWithAsAttributes';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { Direction, Position } from '../Popover/Popover';
 export declare const contextMenuSizes: readonly ["m", "s", "l"];
 export declare type ContextMenuPropSize = typeof contextMenuSizes[number];
@@ -16,7 +17,9 @@ 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> | undefined;
+export declare type ContextMenuPropGetItemAs<ITEM> = (item: ITEM) => keyof JSX.IntrinsicElements;
+export declare type ContextMenuPropGetItemHTMLAttributes<ITEM> = (item: ITEM) => JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
 export declare const contextMenuPropSubMenuDirections: readonly ["rightStartUp", "rightStartDown", "leftStartUp", "leftStartDown"];
 export declare type ContextMenuPropSubMenuDirection = typeof contextMenuPropSubMenuDirections[number];
 export declare const contextMenuPropDefaultSubMenuDirection: ContextMenuPropSubMenuDirection;
@@ -38,15 +41,22 @@ 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;
+    getItemAs?: ContextMenuPropGetItemAs<ITEM>;
+    getItemHTMLAttributes?: ContextMenuPropGetItemHTMLAttributes<ITEM>;
 } & PositioningProps, HTMLDivElement>;
 export declare type AddLevel<ITEM> = (level: number, items: ITEM[], anchorRef: React.RefObject<HTMLElement>, activeItem: string) => void;
 export declare type DeleteLevel = (level: number) => void;
@@ -59,7 +69,7 @@ declare type ContextMenuLevelProps<ITEM> = Omit<ContextMenuProps<ITEM> & {
     hoveredParenLevel: number;
     setHoveredParenLevel: (level: number) => void;
 }, 'subMenuDirection' | 'getKey' | 'onClickOutside' | 'isOpen'>;
-export declare type ContextMenuItemProps<ITEM> = PropsWithHTMLAttributes<{
+export declare type ContextMenuItemProps<AS extends keyof JSX.IntrinsicElements = 'div'> = PropsWithAsAttributes<{
     label: string | number;
     rightSide?: React.ReactNode;
     leftSide?: React.ReactNode;
@@ -68,7 +78,7 @@ export declare type ContextMenuItemProps<ITEM> = PropsWithHTMLAttributes<{
     withSubMenu: boolean;
     accent?: ContextMenuAccent;
     disabled?: boolean;
-} & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
+}, AS> & React.RefAttributes<HTMLDivElement>;
 export declare type Level<ITEM> = {
     items: ITEM[];
     activeItem?: string;
@@ -76,7 +86,7 @@ export declare type Level<ITEM> = {
     possibleDirections?: readonly Direction[];
     offset?: number;
 } & PositioningProps;
-export declare type ContextMenuItem = <ITEM>(props: ContextMenuItemProps<ITEM>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
+export declare type ContextMenuItemComponent = <AS extends keyof JSX.IntrinsicElements = 'div'>(props: ContextMenuItemProps<AS>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
 export declare type ContextMenuType = <ITEM>(props: ContextMenuProps<ITEM>) => React.ReactElement | null;
 export declare type ContextMenuLevelType = <ITEM>(props: ContextMenuLevelProps<ITEM>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
 export {};

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDate/DatePickerFieldTypeDate.d.ts

@@ -12,15 +12,21 @@ export declare const DatePickerFieldTypeDate: React.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     status?: "alert" | "success" | "warning" | undefined;
     width?: "default" | "full" | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
     autoFocus?: boolean | undefined;
     placeholder?: string | undefined;
-    leftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    leftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
+    rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     tabIndex?: number | undefined;

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDate/helpers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProps, IconPropSize } from '../../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
 import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../../TextField/TextField';
 import { DatePickerPropOnError } from '../helpers';
@@ -24,8 +24,8 @@ export declare type DatePickerFieldTypeDateProps = PropsWithHTMLAttributes<{
     onBlur?: React.FocusEventHandler<HTMLElement>;
     autoFocus?: boolean;
     placeholder?: string;
-    leftSide?: string | React.FC<IconProps>;
-    rightSide?: string | React.FC<IconProps>;
+    leftSide?: string | IconComponent;
+    rightSide?: string | IconComponent;
     readOnly?: boolean;
     required?: boolean;
     tabIndex?: number;

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.d.ts

@@ -13,15 +13,21 @@ export declare const DatePickerFieldTypeDateRange: React.ForwardRefExoticCompone
     disabled?: boolean | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     status?: "alert" | "success" | "warning" | undefined;
     width?: "default" | "full" | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
     autoFocus?: boolean | undefined;
     placeholder?: string | undefined;
-    leftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    leftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
+    rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     tabIndex?: number | undefined;
@@ -42,10 +48,22 @@ export declare const DatePickerFieldTypeDateRange: React.ForwardRefExoticCompone
     value?: import("../../../utils/types/Date").DateRange | null | undefined;
     startFieldInputRef?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     endFieldInputRef?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-    startFieldLeftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    startFieldRightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    endFieldLeftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
-    endFieldRightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    startFieldLeftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
+    startFieldRightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
+    endFieldLeftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
+    endFieldRightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
+        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
+        size?: "xs" | "s" | "m" | undefined;
+    }, HTMLSpanElement>> | undefined;
     startFieldRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     endFieldRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     startFieldOnFocus?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;

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

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import isBefore from 'date-fns/isBefore';
 import isEqual from 'date-fns/isEqual';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 import { DatePickerFieldTypeDate } from '../DatePickerFieldTypeDate/DatePickerFieldTypeDate';
 import { datePickerErrorTypes } from '../helpers';
 import { mapFormForEnd, mapFormForStart } from './helpers';
@@ -88,6 +88,6 @@ export var DatePickerFieldTypeDateRange = 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.createElement("div", __assign({}, otherProps, { className: cnDatePickerFieldTypeDateRange(null, [className]), ref: ref }),
-        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getSizeByMap(mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
-        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getSizeByMap(mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
+        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: getByMap(mapFormForStart, form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused })),
+        React.createElement(DatePickerFieldTypeDate, __assign({}, commonProps, { inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: getByMap(mapFormForEnd, form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))));
 });

package/__internal__/src/components/DatePickerCanary/DatePickerFieldTypeDateRange/helpers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProps } from '../../../icons/Icon/Icon';
+import { IconComponent } from '../../../icons/Icon/Icon';
 import { DateRange } from '../../../utils/types/Date';
 import { TextFieldPropForm } from '../../TextField/TextField';
 import { DatePickerFieldTypeDateProps } from '../DatePickerFieldTypeDate/helpers';
@@ -12,10 +12,10 @@ export declare type DatePickerFieldTypeDateRangeProps = Omit<DatePickerFieldType
     value?: DateRange | null;
     startFieldInputRef?: React.Ref<HTMLInputElement>;
     endFieldInputRef?: React.Ref<HTMLInputElement>;
-    startFieldLeftSide?: string | React.FC<IconProps>;
-    startFieldRightSide?: string | React.FC<IconProps>;
-    endFieldLeftSide?: string | React.FC<IconProps>;
-    endFieldRightSide?: string | React.FC<IconProps>;
+    startFieldLeftSide?: string | IconComponent;
+    startFieldRightSide?: string | IconComponent;
+    endFieldLeftSide?: string | IconComponent;
+    endFieldRightSide?: string | IconComponent;
     startFieldRef?: React.Ref<HTMLDivElement>;
     endFieldRef?: React.Ref<HTMLDivElement>;
     startFieldOnFocus?: React.FocusEventHandler<HTMLElement>;