@consta/uikit 3.13.0 → 3.14.0

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

@@ -7,13 +7,14 @@ var date_fns_1 = require("date-fns");
 var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
 var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
 var DateTime100YearSlider_1 = require("../DateTime100YearSlider/DateTime100YearSlider");
+var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
 var helpers_1 = require("../helpers");
 var types_1 = require("../helpers/types");
 var mixs_1 = require("../mixs");
 exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
-    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[0]);
     }, []);
@@ -48,7 +49,8 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
     if (view === types_1.dateTimePropView[0]) {
         return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
-            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })));
+            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade }),
+            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 10);
     var pageTwoYearsOfDecade = helpers_1.getYearsOfDecade({
@@ -62,13 +64,15 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
     });
     var pageTwoLabel = helpers_1.getDecadeTitle(pageTwoCurrentVisibleDate);
     if (view === types_1.dateTimePropView[1]) {
-        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
-            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
-            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))));
+        return (react_1["default"].createElement(react_1["default"].Fragment, null,
+            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+                react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
+                react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
+            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         react_1["default"].createElement(DateTime100YearSlider_1.DateTime100YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -78,5 +82,6 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
                 react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                 react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade })))));
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
+        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
 });

package/__internal__/cjs-src/components/DateTimeCanary/helpers/types.d.ts

@@ -44,7 +44,13 @@ export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = Prop
     multiplicityMinutes?: number;
     multiplicityHours?: number;
     onMove?: (type: MoveType) => void;
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
 }, HTMLDivElement>;
+export declare type DateTimeAdditionalControlRenderProp = React.ReactNode | React.ReactNode[] | AdditionalControlRenderType;
+export declare type AdditionalControlRenderType = (props: DateTimeAdditionalControlRenderProps) => React.ReactNode | React.ReactNode[];
+export declare type DateTimeAdditionalControlRenderProps = {
+    currentVisibleDate?: Date;
+};
 export declare type DateTimeComponent = <TYPE extends DateTimePropType = 'date'>(props: DateTimeProps<TYPE>) => React.ReactElement | null;
 export declare type DateTimeTypeComponent<TYPE extends DateTimePropType> = (props: Omit<DateTimeProps<TYPE>, 'type'>) => React.ReactElement | null;
 export declare type HandleSelectDate = (props: {

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

@@ -1,7 +1,7 @@
 import './FieldLabel.css';
 export declare type FieldLabelPropSize = 'xs' | 's' | 'm' | 'l';
 declare type FieldLabelProps = {
-    size: FieldLabelPropSize;
+    size?: FieldLabelPropSize;
     required?: boolean;
 };
 export declare const FieldLabel: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<FieldLabelProps, "div">;

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

@@ -1,10 +1,11 @@
 import './Modal.css';
 import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 declare const modalPropWidth: readonly ["auto"];
 declare type ModalPropWidth = typeof modalPropWidth[number];
 declare const modalPropPosition: readonly ["center", "top"];
 declare type ModalPropPosition = typeof modalPropPosition[number];
-declare type ModalProps = {
+declare type ModalProps = PropsWithHTMLAttributes<{
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
@@ -13,13 +14,12 @@ declare type ModalProps = {
     onOverlayClick?: (event: MouseEvent) => void;
     onClickOutside?: (event: MouseEvent) => void;
     onEsc?: (event: KeyboardEvent) => void;
-    className?: string;
     rootClassName?: string;
     width?: ModalPropWidth;
     position?: ModalPropPosition;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
     refsForExcludeClickOutside?: React.RefObject<HTMLElement>[];
-};
+}, HTMLDivElement>;
 export declare const Modal: React.FC<ModalProps>;
 export {};

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

@@ -32,7 +32,7 @@ var ContextConsumer = function (_a) {
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
 exports.Modal = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.width, width = _b === void 0 ? modalPropWidthDefault : _b, _c = props.position, position = _c === void 0 ? modalPropPositionDefault : _c, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, rest = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.width, width = _b === void 0 ? modalPropWidthDefault : _b, _c = props.position, position = _c === void 0 ? modalPropPositionDefault : _c, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, style = props.style, otherProps = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName", "style"]);
     var ref = react_1.useRef(null);
     var portalRef = react_1.useRef(null);
     var theme = Theme_1.useTheme().theme;
@@ -48,8 +48,8 @@ exports.Modal = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition_1.cnForCssTransition(cnModal), timeout: 200, nodeRef: portalRef },
-        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef },
+        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && react_1["default"].createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
-            react_1["default"].createElement("div", tslib_1.__assign({ className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }, rest),
+            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: tslib_1.__spread((refsForExcludeClickOutside || []), [ref]) }, children)))));
 };

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

@@ -15,7 +15,7 @@ var ProgressStepBarItem_1 = require("./ProgressStepBarItem/ProgressStepBarItem")
 var ProgressStepBarLine_1 = require("./ProgressStepBarLine/ProgressStepBarLine");
 var helpers_1 = require("./helpers");
 function ProgressStepBarRender(props, ref) {
-    var _a = helpers_1.withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? helpers_1.propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? helpers_1.propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick"]);
+    var _a = helpers_1.withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? helpers_1.propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? helpers_1.propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, style = _a.style, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
     var _e = tslib_1.__read(react_1.useState([]), 2), lines = _e[0], setLines = _e[1];
     var _f = tslib_1.__read(react_1.useState(activeStepIndex || 0), 2), visibleIndex = _f[0], setVisibleIndex = _f[1];
     var containerRef = react_1.useRef(null);
@@ -72,11 +72,12 @@ function ProgressStepBarRender(props, ref) {
             pointRef: stepsRef[index],
             direction: direction,
             onClick: onClick || onItemClickHandler,
-            key: helpers_1.cnProgressStepBar({ index: index })
+            key: helpers_1.cnProgressStepBar({ index: index }),
+            tooltipZIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined
         };
     };
     var isOverflow = useOverflow_1.useOverflow({ currentRef: listRef });
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: helpers_1.cnProgressStepBar(null, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: style, className: helpers_1.cnProgressStepBar(null, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
         isOverflow && direction !== 'vertical' && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowLeft_1.IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: helpers_1.cnProgressStepBar('Button', { side: 'left' }), onClick: function () { return changePosition(true); } })),
         react_1["default"].createElement("div", { ref: listRef, className: helpers_1.cnProgressStepBar('List', { direction: direction, overflow: isOverflow }) },
             react_1["default"].createElement(ProgressStepBarLine_1.ProgressStepBarLine, { lines: lines, size: size, direction: direction, activeStepIndex: activeStepIndex }),

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

@@ -68,6 +68,7 @@ export declare type ProgressStepBarItemProps = {
     progress?: boolean;
     status?: PropStatus | 'system';
     tooltipContent?: string;
+    tooltipZIndex?: number;
     position?: PropPosition;
     direction: PropDirection;
     size: PropSize;

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

@@ -18,7 +18,7 @@ var helpers_2 = require("./helpers");
 function SelectRender(props, ref) {
     var defaultDropdownRef = react_1.useRef(null);
     var controlRef = react_1.useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef"]);
+    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
     var _g = useSelect_1.useSelect({
         items: items,
         groups: groups,
@@ -46,7 +46,7 @@ function SelectRender(props, ref) {
         return (react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('ControlValue'), title: label }, label));
     };
     var renderValue = renderValueProp || renderValueDefault;
-    return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, required: required, ref: ref }, restProps),
+    return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, required: required, ref: ref, style: style }, restProps),
         react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('Control'), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
             react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlInner') },
                 react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlValueContainer') },
@@ -56,7 +56,7 @@ function SelectRender(props, ref) {
             react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Indicators') },
                 react_1["default"].createElement("button", { type: "button", className: cnSelect_1.cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: cnSelect_1.cnSelect('DropdownIndicatorIcon') })))),
-        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound })));
+        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
 }
 exports.Select = react_1.forwardRef(SelectRender);
 tslib_1.__exportStar(require("./helpers"), exports);

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

@@ -18,11 +18,11 @@ exports.defaultSelectDropdownPropForm = exports.selectDropdownform[0];
 var cnSelectDropdown = bem_1.cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition_1.cnForCssTransition(cnSelectDropdown);
 exports.SelectDropdown = function (props) {
-    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound;
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, ref = props.ref, otherProps = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound", "ref"]);
     var getIndex = fabricIndex_1.fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        react_1["default"].createElement(Popover_1.Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true },
+        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
             react_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                 visibleItems.map(function (group) {
                     if (useSelect_1.isOptionForCreate(group)) {

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

@@ -1,11 +1,12 @@
 import './Sidebar.css';
 import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 declare type DivProps = JSX.IntrinsicElements['div'];
 declare const sidebarPropPosition: readonly ["right", "bottom", "left", "top"];
 declare type SidebarPropPosition = typeof sidebarPropPosition[number];
 export declare const sidebarPropSize: readonly ["s", "m", "l", "full", "1/2", "1/3", "1/4", "2/3", "3/4"];
 export declare type SidebarPropSize = typeof sidebarPropSize[number];
-declare type SidebarProps = {
+declare type SidebarProps = PropsWithHTMLAttributes<{
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
@@ -16,10 +17,10 @@ declare type SidebarProps = {
     onEsc?: (event: KeyboardEvent) => void;
     position?: SidebarPropPosition;
     size?: SidebarPropSize;
-    className?: string;
+    rootClassName?: string;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
-};
+}, HTMLDivElement>;
 declare type SidebarContentProps = {
     className?: string;
     children: React.ReactNode;

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

@@ -35,7 +35,7 @@ var ContextConsumer = function (_a) {
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
 exports.Sidebar = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, rest = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, style = props.style, rootClassName = props.rootClassName, otherProps = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container", "style", "rootClassName"]);
     var ref = react_1.useRef(null);
     var theme = Theme_1.useTheme().theme;
     react_1.useEffect(function () {
@@ -50,9 +50,9 @@ exports.Sidebar = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, className: exports.cnSidebar({ position: position }), classNames: cnForCssTransition_1.cnForCssTransition(exports.cnSidebar), timeout: 200 },
-        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container },
+        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && react_1["default"].createElement("div", { className: exports.cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }, rest),
+            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: exports.cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 exports.Sidebar.Content = SidebarContent;

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

@@ -23,7 +23,7 @@ var sizeMap = {
     l: 'm'
 };
 function SliderRender(props, ref) {
-    var _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, onChange = props.onChange, onAfterChange = props.onAfterChange, value = props.value, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.size, size = _e === void 0 ? helper_1.defaultPropSize : _e, _f = props.view, view = _f === void 0 ? 'default' : _f, leftSide = props.leftSide, rightSide = props.rightSide, withTooltip = props.withTooltip, _g = props.range, range = _g === void 0 ? false : _g, label = props.label, status = props.status, caption = props.caption, _h = props.tooltipFormatter, tooltipFormatter = _h === void 0 ? helper_1.defaultTooltipFormatter : _h, className = props.className, otherProps = tslib_1.__rest(props, ["min", "max", "onChange", "onAfterChange", "value", "step", "disabled", "size", "view", "leftSide", "rightSide", "withTooltip", "range", "label", "status", "caption", "tooltipFormatter", "className"]);
+    var _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, onChange = props.onChange, onAfterChange = props.onAfterChange, value = props.value, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.size, size = _e === void 0 ? helper_1.defaultPropSize : _e, _f = props.view, view = _f === void 0 ? 'default' : _f, leftSide = props.leftSide, rightSide = props.rightSide, withTooltip = props.withTooltip, _g = props.range, range = _g === void 0 ? false : _g, label = props.label, status = props.status, caption = props.caption, _h = props.tooltipFormatter, tooltipFormatter = _h === void 0 ? helper_1.defaultTooltipFormatter : _h, className = props.className, style = props.style, otherProps = tslib_1.__rest(props, ["min", "max", "onChange", "onAfterChange", "value", "step", "disabled", "size", "view", "leftSide", "rightSide", "withTooltip", "range", "label", "status", "caption", "tooltipFormatter", "className", "style"]);
     var _j = tslib_1.__read(useFlag_1.useFlag(false), 2), isHovered = _j[0], _k = _j[1], on = _k.on, off = _k.off;
     var leftButtonRef = react_1.useRef(null);
     var rightButtonRef = react_1.useRef(null);
@@ -50,7 +50,7 @@ function SliderRender(props, ref) {
         else
             off();
     };
-    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: cnSlider({ size: size }, [className]) }, otherProps),
+    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: cnSlider({ size: size }, [className]), style: style }, otherProps),
         label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, { className: cnSlider('Label'), size: size }, label)),
         react_1["default"].createElement("div", { className: cnSlider('Container') },
             leftSide === 'input' && helper_1.isNotRangeParams(props) && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
@@ -59,7 +59,7 @@ function SliderRender(props, ref) {
                 react_1["default"].createElement(IconLeft, { size: iconSize, view: "secondary" }))),
             react_1["default"].createElement("div", { className: cnSlider('Control'), ref: sliderRef },
                 react_1["default"].createElement(SliderLine_1.SliderLine, { hovered: isHovered || typeof activeButton === 'number', onHover: changeHovered, lines: lineSizes, disabled: disabled, view: view }),
-                currentValue.map(function (val, index) { return (react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered || typeof activeButton === 'number', buttonRef: leftButtonRef, popoverPosition: popoverPosition[index], onKeyPress: onKeyPress, onFocus: onFocus, handlePress: handlePress, disabled: disabled, position: buttonPositions[index], focused: activeButton === index, buttonLabel: index, withTooltip: withTooltip, onHover: changeHovered, tooltipFormatter: tooltipFormatter, value: val, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val })); })),
+                currentValue.map(function (val, index) { return (react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered || typeof activeButton === 'number', buttonRef: leftButtonRef, popoverPosition: popoverPosition[index], onKeyPress: onKeyPress, onFocus: onFocus, handlePress: handlePress, disabled: disabled, position: buttonPositions[index], focused: activeButton === index, buttonLabel: index, withTooltip: withTooltip, onHover: changeHovered, tooltipFormatter: tooltipFormatter, value: val, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, tooltipZIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined, key: cnSlider('Point', { index: index }) })); })),
             IconRight && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'right' }) },
                 react_1["default"].createElement(IconRight, { size: iconSize, view: "secondary" })))),
         caption && (react_1["default"].createElement(FieldCaption_1.FieldCaption, { className: cnSlider('Caption'), status: status }, caption))));

package/__internal__/cjs-src/components/SliderCanary/SliderPoint/SliderPoint.js

@@ -23,7 +23,7 @@ var getTooltipPosition = function (popoverPosition, buttonRef) {
 };
 exports.SliderPoint = function (props) {
     var _a;
-    var hovered = props.hovered, onHover = props.onHover, value = props.value, position = props.position, disabled = props.disabled, withTooltip = props.withTooltip, focused = props.focused, popoverPosition = props.popoverPosition, buttonRef = props.buttonRef, handlePress = props.handlePress, onKeyPress = props.onKeyPress, tooltipFormatter = props.tooltipFormatter, buttonLabel = props.buttonLabel, onFocus = props.onFocus, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "handlePress", "onKeyPress", "tooltipFormatter", "buttonLabel", "onFocus"]);
+    var hovered = props.hovered, onHover = props.onHover, value = props.value, position = props.position, disabled = props.disabled, withTooltip = props.withTooltip, focused = props.focused, popoverPosition = props.popoverPosition, buttonRef = props.buttonRef, handlePress = props.handlePress, onKeyPress = props.onKeyPress, tooltipFormatter = props.tooltipFormatter, buttonLabel = props.buttonLabel, onFocus = props.onFocus, tooltipZIndex = props.tooltipZIndex, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "handlePress", "onKeyPress", "tooltipFormatter", "buttonLabel", "onFocus", "tooltipZIndex"]);
     var _b = tslib_1.__read(useFlag_1.useFlag(false), 2), tooltipVisible = _b[0], _c = _b[1], on = _c.on, off = _c.off;
     var theme = Theme_1.useTheme().theme;
     var tooltipTheme = tslib_1.__assign(tslib_1.__assign({}, theme), { color: {
@@ -63,5 +63,5 @@ exports.SliderPoint = function (props) {
                 _a['--slider-button-left'] = position + "%",
                 _a) }, otherProps)),
         tooltipVisible && withTooltip && popoverPosition && (react_1["default"].createElement(Theme_1.ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
-            react_1["default"].createElement(Tooltip_1.Tooltip, { position: getTooltipPosition(popoverPosition, buttonRef || pointRef), className: cnSliderPoint('Tooltip'), direction: "downCenter", possibleDirections: ['downCenter', 'leftDown', 'rightDown'] }, tooltipFormatter ? tooltipFormatter(value) : value)))));
+            react_1["default"].createElement(Tooltip_1.Tooltip, { position: getTooltipPosition(popoverPosition, buttonRef || pointRef), className: cnSliderPoint('Tooltip'), direction: "downCenter", possibleDirections: ['downCenter', 'leftDown', 'rightDown'], style: { zIndex: tooltipZIndex } }, tooltipFormatter ? tooltipFormatter(value) : value)))));
 };

package/__internal__/cjs-src/components/SliderCanary/helper.d.ts

@@ -62,6 +62,7 @@ export declare type SliderPointProps = PropsWithHTMLAttributes<{
     onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;
     onHover?: (hovered: boolean) => void;
     position: number;
+    tooltipZIndex?: number;
 }, HTMLButtonElement>;
 export declare type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<Props<RANGE>, HTMLDivElement>;
 export declare type SliderComponent = <RANGE extends boolean>(props: SliderProps<RANGE>) => React.ReactElement | null;

package/__internal__/cjs-src/components/Table/Cell/TableCell.d.ts

@@ -12,6 +12,7 @@ declare type Props<T extends TableRow> = {
         filterable?: boolean;
     };
     onClick?: (e: React.SyntheticEvent) => void;
+    onContextMenu?: (e: React.SyntheticEvent) => void;
     style?: React.CSSProperties;
     className?: string;
     wrapperClassName?: string;

package/__internal__/cjs-src/components/Table/Cell/TableCell.js

@@ -36,7 +36,7 @@ var getWrapperClasses = function (props) {
     }, [wrapperClassName]);
 };
 exports.TableCell = react_1["default"].forwardRef(function (props, ref) {
-    var style = props.style, onClick = props.onClick, children = props.children;
+    var style = props.style, onClick = props.onClick, onContextMenu = props.onContextMenu, children = props.children;
     var propsWithRole = onClick
         ? {
             role: 'button',
@@ -45,6 +45,6 @@ exports.TableCell = react_1["default"].forwardRef(function (props, ref) {
         : {
             role: 'cell'
         };
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, propsWithRole, { ref: ref, className: getCellClasses(props), style: style }),
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, propsWithRole, { onContextMenu: onContextMenu, ref: ref, className: getCellClasses(props), style: style }),
         react_1["default"].createElement("div", { className: getWrapperClasses(props) }, children)));
 });

package/__internal__/cjs-src/components/Table/Header/TableHeader.d.ts

@@ -2,7 +2,7 @@ import './TableHeader.css';
 import React from 'react';
 import { FieldSelectedValues, Filters, SelectedFilters } from '../filtering';
 import { Header } from '../helpers';
-import { ColumnMetaData, HeaderVerticalAlign, TableColumn, TableRow } from '../Table';
+import { ColumnMetaData, HeaderVerticalAlign, onCellClick, TableColumn, TableRow } from '../Table';
 export declare const levelTypes: readonly ["high", "low", "default"];
 export declare type LevelType = typeof levelTypes[number];
 declare type Props<T extends TableRow> = {
@@ -17,6 +17,7 @@ declare type Props<T extends TableRow> = {
     getSortIcon: (column: Header<T>) => React.FC;
     handleSortClick: (column: TableColumn<T>) => void;
     handleFilterTogglerClick: (id: string) => () => void;
+    handleCellClick: onCellClick;
     handleTooltipSave: (field: string, tooltipSelectedFilters: FieldSelectedValues, value?: unknown) => void;
     filters: Filters<T> | undefined;
     visibleFilter: string | null;
@@ -24,5 +25,5 @@ declare type Props<T extends TableRow> = {
     showHorizontalCellShadow: boolean;
     borderBetweenColumns: boolean;
 };
-export declare const TableHeader: <T extends TableRow>({ isStickyHeader, headersWithMetaData, headerRowsHeights, headerRowsRefs, getStickyLeftOffset, stickyColumnsGrid, showVerticalCellShadow, headerVerticalAlign, getSortIcon, handleSortClick, handleFilterTogglerClick, handleTooltipSave, filters, visibleFilter, selectedFilters, showHorizontalCellShadow, borderBetweenColumns, }: Props<T>) => React.ReactElement;
+export declare const TableHeader: <T extends TableRow>({ isStickyHeader, headersWithMetaData, headerRowsHeights, headerRowsRefs, getStickyLeftOffset, stickyColumnsGrid, showVerticalCellShadow, headerVerticalAlign, getSortIcon, handleSortClick, handleFilterTogglerClick, handleCellClick, handleTooltipSave, filters, visibleFilter, selectedFilters, showHorizontalCellShadow, borderBetweenColumns, }: Props<T>) => React.ReactElement;
 export {};

package/__internal__/cjs-src/components/Table/Header/TableHeader.js

@@ -12,7 +12,7 @@ var TableFilterTooltip_1 = require("../FilterTooltip/TableFilterTooltip");
 var cnTableHeader = bem_1.cn('TableHeader');
 exports.levelTypes = ['high', 'low', 'default'];
 exports.TableHeader = function (_a) {
-    var isStickyHeader = _a.isStickyHeader, headersWithMetaData = _a.headersWithMetaData, headerRowsHeights = _a.headerRowsHeights, headerRowsRefs = _a.headerRowsRefs, getStickyLeftOffset = _a.getStickyLeftOffset, stickyColumnsGrid = _a.stickyColumnsGrid, showVerticalCellShadow = _a.showVerticalCellShadow, headerVerticalAlign = _a.headerVerticalAlign, getSortIcon = _a.getSortIcon, handleSortClick = _a.handleSortClick, handleFilterTogglerClick = _a.handleFilterTogglerClick, handleTooltipSave = _a.handleTooltipSave, filters = _a.filters, visibleFilter = _a.visibleFilter, selectedFilters = _a.selectedFilters, showHorizontalCellShadow = _a.showHorizontalCellShadow, borderBetweenColumns = _a.borderBetweenColumns;
+    var isStickyHeader = _a.isStickyHeader, headersWithMetaData = _a.headersWithMetaData, headerRowsHeights = _a.headerRowsHeights, headerRowsRefs = _a.headerRowsRefs, getStickyLeftOffset = _a.getStickyLeftOffset, stickyColumnsGrid = _a.stickyColumnsGrid, showVerticalCellShadow = _a.showVerticalCellShadow, headerVerticalAlign = _a.headerVerticalAlign, getSortIcon = _a.getSortIcon, handleSortClick = _a.handleSortClick, handleFilterTogglerClick = _a.handleFilterTogglerClick, handleCellClick = _a.handleCellClick, handleTooltipSave = _a.handleTooltipSave, filters = _a.filters, visibleFilter = _a.visibleFilter, selectedFilters = _a.selectedFilters, showHorizontalCellShadow = _a.showHorizontalCellShadow, borderBetweenColumns = _a.borderBetweenColumns;
     var tableHeaderHeight = headerRowsHeights.reduce(function (a, b) { return a + b; }, 0);
     var tableHeaderStyle = {
         '--table-header-height': tableHeaderHeight + "px"
@@ -85,7 +85,21 @@ exports.TableHeader = function (_a) {
             return (react_1["default"].createElement(TableCell_1.TableCell, { type: "header", key: columnIdx, ref: function (ref) {
                     /* eslint-disable-next-line no-param-reassign */
                     headerRowsRefs.current[columnIdx] = ref;
-                }, style: tslib_1.__assign(tslib_1.__assign({}, style), { left: getStickyLeftOffset(column.position.gridIndex, column.position.topHeaderGridIndex) }), isSticky: isStickyHeader, isResized: isColumnResized(column), column: column, verticalAlign: headerVerticalAlign, className: cnTableHeader('Cell', {
+                }, style: tslib_1.__assign(tslib_1.__assign({}, style), { left: getStickyLeftOffset(column.position.gridIndex, column.position.topHeaderGridIndex) }), isSticky: isStickyHeader, isResized: isColumnResized(column), column: column, verticalAlign: headerVerticalAlign, onContextMenu: function (e) {
+                    return handleCellClick({
+                        e: e,
+                        type: 'contextMenu',
+                        columnIdx: columnIdx,
+                        ref: { current: headerRowsRefs.current[columnIdx] }
+                    });
+                }, onClick: function (e) {
+                    return handleCellClick({
+                        e: e,
+                        type: 'click',
+                        columnIdx: columnIdx,
+                        ref: { current: headerRowsRefs.current[columnIdx] }
+                    });
+                }, className: cnTableHeader('Cell', {
                     isFirstColumn: column.position.gridIndex === 0,
                     isFirstRow: column.position.level === 0,
                     isLastInColumn: ((_a = column.position) === null || _a === void 0 ? void 0 : _a.topHeaderGridIndex) !== ((_c = (_b = headersWithMetaData[columnIdx + 1]) === null || _b === void 0 ? void 0 : _b.position) === null || _c === void 0 ? void 0 : _c.topHeaderGridIndex),

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

@@ -38,6 +38,14 @@ declare type onRowCreate = ({ id, index, e }: {
     index: number;
     e: React.MouseEvent;
 }) => void;
+export declare type CellClickType = 'click' | 'contextMenu';
+export declare type onCellClick = ({ e, type, rowId, columnIdx, ref, }: {
+    e: React.SyntheticEvent;
+    type: CellClickType;
+    columnIdx: number;
+    ref: React.RefObject<HTMLDivElement>;
+    rowId?: string;
+}) => void;
 export declare type TableRow = {
     id: string;
     rows?: TableRow[];
@@ -103,6 +111,7 @@ export declare type TableProps<T extends TableRow> = {
     onRowHover?: onRowHover;
     onRowClick?: onRowClick;
     onRowCreate?: onRowCreate;
+    onCellClick?: onCellClick;
     getAdditionalClassName?: (props: {
         column: TableColumn<T>;
         row: T;

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

@@ -59,7 +59,7 @@ var sortingData = function (rows, sorting, onSortBy) {
 var defaultEmptyRowsPlaceholder = (react_1["default"].createElement(Text_1.Text, { as: "span", view: "primary", size: "s", lineHeight: "s" }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"));
 var InternalTable = function (props, ref) {
     var _a, _b, _c, _d;
-    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, getAdditionalClassName = props.getAdditionalClassName, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
+    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, onCellClick = props.onCellClick, getAdditionalClassName = props.getAdditionalClassName, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
     var _s = helpers_1.useHeaderData(columns), headers = _s.headers, flattenedHeaders = _s.flattenedHeaders, lowHeaders = _s.lowHeaders, headerRowsRefs = _s.headerRowsRefs, headerRowsHeights = _s.headerRowsHeights, resizerTopOffsets = _s.resizerTopOffsets;
     var stickyColumnsGrid = ((_a = headers[0][stickyColumns - 1]) === null || _a === void 0 ? void 0 : _a.position.gridIndex) +
         (((_b = headers[0][stickyColumns - 1]) === null || _b === void 0 ? void 0 : _b.position.colSpan) || 1);
@@ -77,6 +77,7 @@ var InternalTable = function (props, ref) {
     var _x = tslib_1.__read(react_1["default"].useState({ top: 0, left: 0 }), 2), tableScroll = _x[0], setTableScroll = _x[1];
     var tableRef = react_1["default"].useRef(null);
     var columnsRefs = react_1["default"].useRef({});
+    var cellsRefs = react_1["default"].useRef({});
     var _y = filtering_1.useSelectedFilters(filters, onFiltersUpdated), selectedFilters = _y.selectedFilters, updateSelectedFilters = _y.updateSelectedFilters, removeOneSelectedFilter = _y.removeOneSelectedFilter, removeAllSelectedFilters = _y.removeAllSelectedFilters;
     var _z = tslib_1.__read(react_1["default"].useState([]), 2), expandedRowIds = _z[0], setExpandedRowIds = _z[1];
     // установка сортировки по умолчанию
@@ -327,6 +328,11 @@ var InternalTable = function (props, ref) {
         }
         return result;
     };
+    var handleCellClick = function (params) {
+        if (onCellClick) {
+            onCellClick(params);
+        }
+    };
     return (react_1["default"].createElement("div", { ref: useForkRef_1.useForkRef([tableRef, ref]), className: cnTable({
             size: size,
             isResizable: isResizable,
@@ -337,10 +343,24 @@ var InternalTable = function (props, ref) {
                 columnsRefs.current[columnIdx] = ref;
             }, style: {
                 left: getStickyLeftOffset(columnIdx, columnIdx)
+            }, onContextMenu: function (e) {
+                return handleCellClick({
+                    e: e,
+                    type: 'contextMenu',
+                    columnIdx: columnIdx,
+                    ref: { current: columnsRefs.current[columnIdx] }
+                });
+            }, onClick: function (e) {
+                return handleCellClick({
+                    e: e,
+                    type: 'click',
+                    columnIdx: columnIdx,
+                    ref: { current: columnsRefs.current[columnIdx] }
+                });
             }, column: column, showVerticalShadow: showVerticalCellShadow }, isResizable && (react_1["default"].createElement(TableResizer_1.TableResizer, { height: tableHeight - resizerTopOffsets[columnIdx], top: resizerTopOffsets[columnIdx], isVisible: column.showResizer, onResize: function (delta) { return handleColumnResize(columnIdx, delta); }, onDoubleClick: function () {
                 return updateColumnWidth(columnIdx, initialColumnWidths[columnIdx]);
             } })))); }),
-        react_1["default"].createElement(TableHeader_1.TableHeader, { isStickyHeader: stickyHeader, headersWithMetaData: headersWithMetaData, headerRowsHeights: headerRowsHeights, headerRowsRefs: headerRowsRefs, getStickyLeftOffset: getStickyLeftOffset, stickyColumnsGrid: stickyColumnsGrid, showVerticalCellShadow: showVerticalCellShadow, headerVerticalAlign: headerVerticalAlign, getSortIcon: getSortIcon, handleSortClick: handleSortClick, handleFilterTogglerClick: handleFilterTogglerClick, handleTooltipSave: handleTooltipSave, filters: filters, visibleFilter: visibleFilter, selectedFilters: selectedFilters, showHorizontalCellShadow: showHorizontalCellShadow, borderBetweenColumns: borderBetweenColumns }),
+        react_1["default"].createElement(TableHeader_1.TableHeader, { isStickyHeader: stickyHeader, headersWithMetaData: headersWithMetaData, headerRowsHeights: headerRowsHeights, headerRowsRefs: headerRowsRefs, getStickyLeftOffset: getStickyLeftOffset, stickyColumnsGrid: stickyColumnsGrid, showVerticalCellShadow: showVerticalCellShadow, headerVerticalAlign: headerVerticalAlign, getSortIcon: getSortIcon, handleSortClick: handleSortClick, handleFilterTogglerClick: handleFilterTogglerClick, handleCellClick: handleCellClick, handleTooltipSave: handleTooltipSave, filters: filters, visibleFilter: visibleFilter, selectedFilters: selectedFilters, showHorizontalCellShadow: showHorizontalCellShadow, borderBetweenColumns: borderBetweenColumns }),
         filters && filtering_1.isSelectedFiltersPresent(selectedFilters) && (react_1["default"].createElement("div", { className: cnTable('RowWithoutCells') },
             react_1["default"].createElement(TableSelectedOptionsList_1.TableSelectedOptionsList, { values: filtering_1.getSelectedFiltersList({ filters: filters, selectedFilters: selectedFilters, columns: lowHeaders }), getTagLabel: getTagLabel, onRemove: removeSelectedFilter(filters), onReset: resetSelectedFilters }))),
         rowsData.length > 0 ? (rowsData.map(function (row, rowIdx) {
@@ -351,7 +371,10 @@ var InternalTable = function (props, ref) {
                 }), onMouseEnter: handleRowHover(row.id), onMouseLeave: handleRowHover(undefined), onClick: function (e) { return onRowClick && onRowClick({ id: row.id, e: e }); } }, columnsWithMetaData(lowHeaders).map(function (column, columnIdx) {
                 var _a = getTableCellProps(row, rowIdx, column, columnIdx), show = _a.show, style = _a.style, rowSpan = _a.rowSpan;
                 if (show) {
-                    return (react_1["default"].createElement(TableCell_1.TableCell, { type: "content", key: column.accessor, ref: setBoundaryRef(columnIdx, rowIdx), style: style, wrapperClassName: cnTable('ContentCell', {
+                    return (react_1["default"].createElement(TableCell_1.TableCell, { type: "content", key: column.accessor, ref: function (ref) {
+                            cellsRefs.current[columnIdx + "-" + row.id] = ref;
+                            setBoundaryRef(columnIdx, rowIdx);
+                        }, style: style, wrapperClassName: cnTable('ContentCell', {
                             isActive: activeRow ? activeRow.id === row.id : false,
                             isDarkned: activeRow
                                 ? activeRow.id !== undefined && activeRow.id !== row.id
@@ -361,8 +384,23 @@ var InternalTable = function (props, ref) {
                             column: column,
                             row: row,
                             isActive: activeRow ? activeRow.id === row.id : false
-                        }), onClick: function (e) {
-                            return handleSelectRow({ id: row.id, e: e });
+                        }), onContextMenu: function (e) {
+                            return handleCellClick({
+                                e: e,
+                                type: 'contextMenu',
+                                columnIdx: columnIdx,
+                                rowId: row.id,
+                                ref: { current: cellsRefs.current[columnIdx + "-" + row.id] }
+                            });
+                        }, onClick: function (e) {
+                            handleSelectRow({ id: row.id, e: e });
+                            handleCellClick({
+                                e: e,
+                                type: 'click',
+                                columnIdx: columnIdx,
+                                rowId: row.id,
+                                ref: { current: cellsRefs.current[columnIdx + "-" + row.id] }
+                            });
                         }, column: column, verticalAlign: verticalAlign, isClickable: !!isRowsClickable, showVerticalShadow: showVerticalCellShadow &&
                             (column === null || column === void 0 ? void 0 : column.position.gridIndex) + ((column === null || column === void 0 ? void 0 : column.position.colSpan) || 1) ===
                                 stickyColumnsGrid, isBorderTop: rowIdx > 0 && borderBetweenRows, isBorderLeft: columnIdx > 0 && borderBetweenColumns }, renderCell(column, row, columnIdx)));

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

@@ -24,7 +24,7 @@ var contextMenuSizeMap = {
     xs: 's'
 };
 exports.ThemeToggler = react_1["default"].forwardRef(function (props, componentRef) {
-    var _a = props.size, size = _a === void 0 ? exports.themeTogglerPropSizeDefault : _a, items = props.items, value = props.value, onChange = props.onChange, getItemKey = props.getItemKey, getItemLabel = props.getItemLabel, getItemIcon = props.getItemIcon, direction = props.direction, possibleDirections = props.possibleDirections, otherProps = tslib_1.__rest(props, ["size", "items", "value", "onChange", "getItemKey", "getItemLabel", "getItemIcon", "direction", "possibleDirections"]);
+    var _a = props.size, size = _a === void 0 ? exports.themeTogglerPropSizeDefault : _a, items = props.items, value = props.value, onChange = props.onChange, getItemKey = props.getItemKey, getItemLabel = props.getItemLabel, getItemIcon = props.getItemIcon, direction = props.direction, possibleDirections = props.possibleDirections, style = props.style, otherProps = tslib_1.__rest(props, ["size", "items", "value", "onChange", "getItemKey", "getItemLabel", "getItemIcon", "direction", "possibleDirections", "style"]);
     var ref = react_1.useRef(null);
     var _b = tslib_1.__read(react_1.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
     react_1.useEffect(function () {
@@ -61,6 +61,6 @@ exports.ThemeToggler = react_1["default"].forwardRef(function (props, componentR
         return null;
     }
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(Button_1.Button, tslib_1.__assign({}, otherProps, { ref: ref, iconLeft: getButtonIcon(), onClick: onButtonClick, onlyIcon: true, size: size, view: "clear" })),
-        items.length > 2 && isOpen && (react_1["default"].createElement(ContextMenu_1.ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getItemOnClick: getOnChange, size: contextMenuSize }))));
+        react_1["default"].createElement(Button_1.Button, tslib_1.__assign({}, otherProps, { ref: ref, iconLeft: getButtonIcon(), onClick: onButtonClick, onlyIcon: true, size: size, view: "clear", style: style })),
+        items.length > 2 && isOpen && (react_1["default"].createElement(ContextMenu_1.ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getItemOnClick: getOnChange, size: contextMenuSize, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined }))));
 });