@consta/uikit 3.12.4 → 3.15.1

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/SnackBar/SnackBar.css

@@ -14,6 +14,10 @@
   padding-left: var(--space-xs);
 }
 
+  .SnackBar-Item:not(:first-child) {
+      margin-bottom: var(--space-s);
+    }
+
   .SnackBar-Item_animate_appear,
       .SnackBar-Item_animate_enter,
       .SnackBar-Item_animate_exit,

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

@@ -1,32 +1,5 @@
 import './SnackBar.css';
 import React from 'react';
-import { IconComponent } from '../../icons/Icon/Icon';
-import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
-export declare type SnackBarPropItemAction = {
-    label: string | number;
-    onClick: React.EventHandler<React.MouseEvent>;
-};
-export declare const snackBarItemStatus: readonly ["normal", "system", "success", "warning", "alert"];
-export declare type SnackBarItemStatus = typeof snackBarItemStatus[number];
-export declare const snackBarItemStatusDefault: SnackBarItemStatus;
-export declare type Item = {
-    key: string | number;
-    message?: string | number | React.ReactNode;
-    status?: SnackBarItemStatus;
-    autoClose?: boolean | number;
-    showProgress?: 'timer';
-    icon?: IconComponent;
-    actions?: SnackBarPropItemAction[];
-    onClose?: (item: Item) => void;
-    onAutoClose?: (item: Item) => void;
-};
-declare type Props = {
-    items: Item[];
-    children?: never;
-};
-export declare type SnackBarProps = PropsWithHTMLAttributes<Props, HTMLDivElement>;
-export declare const COMPONENT_NAME: "SnackBar";
+import { SnackBarProps } from './helper';
 export declare const cnSnackBar: import("@bem-react/classname").ClassNameFormatter;
-export declare const cnSnackBarItem: import("@bem-react/classname").ClassNameFormatter;
 export declare const SnackBar: React.FC<SnackBarProps>;
-export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.SnackBar = exports.cnSnackBarItem = exports.cnSnackBar = exports.COMPONENT_NAME = exports.snackBarItemStatusDefault = exports.snackBarItemStatus = void 0;
+exports.SnackBar = exports.cnSnackBar = void 0;
 var tslib_1 = require("tslib");
 require("./SnackBar.css");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -8,15 +8,11 @@ var react_transition_group_1 = require("react-transition-group");
 var bem_1 = require("../../utils/bem");
 var cnForCssTransition_1 = require("../../utils/cnForCssTransition");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
-var SnackBar_Item_1 = require("./Item/SnackBar-Item");
-exports.snackBarItemStatus = ['normal', 'system', 'success', 'warning', 'alert'];
-exports.snackBarItemStatusDefault = exports.snackBarItemStatus[0];
-exports.COMPONENT_NAME = 'SnackBar';
-exports.cnSnackBar = bem_1.cn(exports.COMPONENT_NAME);
-exports.cnSnackBarItem = bem_1.cn(exports.COMPONENT_NAME, 'Item');
-var cssTransitionClassNames = cnForCssTransition_1.cnForCssTransition(exports.cnSnackBarItem);
+var SnackBarItem_1 = require("./SnackBarItem/SnackBarItem");
+exports.cnSnackBar = bem_1.cn('SnackBar');
+var cssTransitionClassNames = cnForCssTransition_1.cnForCssTransition(exports.cnSnackBar, 'Item');
 exports.SnackBar = function (props) {
-    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props), items = _a.items, className = _a.className, otherProps = tslib_1.__rest(_a, ["items", "className"]);
+    var _a = usePropsHandler_1.usePropsHandler('SnackBar', props), items = _a.items, className = _a.className, otherProps = tslib_1.__rest(_a, ["items", "className"]);
     var refs = react_1.useMemo(function () {
         var refArray = [];
         for (var i = 0; i < items.length; i++) {
@@ -26,6 +22,6 @@ exports.SnackBar = function (props) {
     }, [items]);
     return (react_1["default"].createElement(react_transition_group_1.TransitionGroup, tslib_1.__assign({}, otherProps, { className: exports.cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item, index) {
         return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
-            react_1["default"].createElement(SnackBar_Item_1.SnackBarItem, { item: item, ref: refs[index] })));
+            react_1["default"].createElement(SnackBarItem_1.SnackBarItem, { item: item, ref: refs[index], className: exports.cnSnackBar('Item') })));
     })));
 };

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

@@ -0,0 +1,8 @@
+.SnackBarActionButton {
+  -webkit-filter: drop-shadow(0 0 0 var(--color-bg-soft));
+          filter: drop-shadow(0 0 0 var(--color-bg-soft));
+}
+
+  .SnackBarActionButton-ActionButtonsWrapper > .SnackBarActionButton:not(:last-child) {
+    margin-right: var(--space-xs);
+  }

package/__internal__/cjs-src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.d.ts

@@ -0,0 +1,4 @@
+import './SnackBarActionButton.css';
+import React from 'react';
+import { SnackBarActionButtonProps } from '../helper';
+export declare const SnackBarActionButton: React.FC<SnackBarActionButtonProps>;

package/__internal__/cjs-src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.js

@@ -0,0 +1,16 @@
+"use strict";
+exports.__esModule = true;
+exports.SnackBarActionButton = void 0;
+var tslib_1 = require("tslib");
+require("./SnackBarActionButton.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var Button_1 = require("../../Button/Button");
+var cnSnackBarActionButton = bem_1.cn('SnackBarActionButton');
+exports.SnackBarActionButton = function (props) {
+    var actions = props.actions, className = props.className;
+    if (actions.length < 1) {
+        return null;
+    }
+    return (react_1["default"].createElement("div", { className: cnSnackBarActionButton('ActionButtonsWrapper', [className]) }, actions.map(function (item, index) { return (react_1["default"].createElement(Button_1.Button, { className: cnSnackBarActionButton(), key: cnSnackBarActionButton() + "-" + index, size: "s", view: "ghost", label: item.label, onClick: item.onClick })); })));
+};

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

@@ -0,0 +1,68 @@
+.SnackBarItem {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: var(--space-m) var(--space-2xl) var(--space-m) var(--space-m);
+  color: var(--color-typo-primary);
+  border-radius: var(--space-xs);
+  -webkit-box-shadow: var(--shadow-group);
+          box-shadow: var(--shadow-group);
+}
+
+  .SnackBarItem_showProgress_line {
+      padding-bottom: calc(var(--space-m) + var(--space-2xs));
+    }
+
+  .SnackBarItem-ActionButton {
+    margin-top: calc(var(--space-2xs) + var(--space-xs));
+  }
+
+  .SnackBarItem_status_system {
+      background-color: var(--color-bg-system);
+    }
+
+  .SnackBarItem_status_normal {
+      background-color: var(--color-bg-normal);
+    }
+
+  .SnackBarItem_status_success {
+      background-color: var(--color-bg-success);
+    }
+
+  .SnackBarItem_status_warning {
+      background-color: var(--color-bg-warning);
+    }
+
+  .SnackBarItem_status_alert {
+      background-color: var(--color-bg-alert);
+    }
+
+  .SnackBarItem-Timer {
+    margin-right: var(--space-m);
+  }
+
+  .SnackBarItem-Line {
+    position: absolute;
+    left: 0%;
+    bottom: 0;
+  }
+
+  .SnackBarItem-Icon {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    margin-right: var(--space-m);
+  }
+
+  .SnackBarItem-Content {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .SnackBarItem-CloseButton {
+    position: absolute;
+    top: var(--space-2xs);
+    right: var(--space-2xs);
+  }

package/__internal__/cjs-src/components/SnackBar/{Item/SnackBar-Item.d.ts → SnackBarItem/SnackBarItem.d.ts}

@@ -1,11 +1,9 @@
 import '../../Theme/_color/Theme_color_gpnDark.css';
-import './SnackBar-Item.css';
+import './SnackBarItem.css';
 import React from 'react';
 import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
-import { Item } from '../SnackBar';
-export declare type SnackBarItemProps = {
-    item: Item;
-};
+import { SnackBarItemProps } from '../helper';
 declare type SnackBarItemComponent = (props: PropsWithHTMLAttributesAndRef<SnackBarItemProps, HTMLDivElement>) => React.ReactElement | null;
+export declare const cnSnackBarItem: import("@bem-react/classname").ClassNameFormatter;
 export declare const SnackBarItem: SnackBarItemComponent;
 export {};

package/__internal__/cjs-src/components/SnackBar/{Item/SnackBar-Item.js → SnackBarItem/SnackBarItem.js}

@@ -1,20 +1,23 @@
 "use strict";
 exports.__esModule = true;
-exports.SnackBarItem = void 0;
+exports.SnackBarItem = exports.cnSnackBarItem = void 0;
 var tslib_1 = require("tslib");
 require("../../Theme/_color/Theme_color_gpnDark.css");
-require("./SnackBar-Item.css");
+require("./SnackBarItem.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useFlag_1 = require("../../../hooks/useFlag/useFlag");
 var IconClose_1 = require("../../../icons/IconClose/IconClose");
+var bem_1 = require("../../../utils/bem");
 var type_guards_1 = require("../../../utils/type-guards");
 var Button_1 = require("../../Button/Button");
 var Text_1 = require("../../Text/Text");
 var Theme_1 = require("../../Theme/Theme");
-var SnackBar_ActionButton_1 = require("../ActionButton/SnackBar-ActionButton");
-var SnackBar_1 = require("../SnackBar");
-var SnackBar_Timer_1 = require("../Timer/SnackBar-Timer");
+var helper_1 = require("../helper");
+var SnackBarActionButton_1 = require("../SnackBarActionButton/SnackBarActionButton");
+var SnackBarLine_1 = require("../SnackBarLine/SnackBarLine");
+var SnackBarTimer_1 = require("../SnackBarTimer/SnackBarTimer");
 var defaultInitialTimerTime = 3;
+exports.cnSnackBarItem = bem_1.cn('SnackBarItem');
 var getAutoCloseTime = function (autoClose) {
     if (autoClose) {
         if (typeof autoClose === 'number') {
@@ -25,8 +28,8 @@ var getAutoCloseTime = function (autoClose) {
     return false;
 };
 exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
-    var item = props.item;
-    var onClose = item.onClose, autoClose = item.autoClose, showProgress = item.showProgress, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? SnackBar_1.snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
+    var item = props.item, className = props.className;
+    var onClose = item.onClose, autoClose = item.autoClose, showProgress = item.showProgress, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? helper_1.snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
     var _b = tslib_1.__read(react_1.useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = tslib_1.__read(useFlag_1.useFlag(false), 2), hover = _c[0], _d = _c[1], onHover = _d.on, offHover = _d.off;
     var _e = tslib_1.__read(useFlag_1.useFlag(false), 2), timeIsOver = _e[0], onTimeIsOver = _e[1].on;
@@ -60,11 +63,15 @@ exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
         onAutoClose(item);
     };
     var handleClose = onClose ? function () { return onClose(item); } : undefined;
-    return (react_1["default"].createElement("div", { ref: ref, className: SnackBar_1.cnSnackBarItem({ status: status }, [Theme_1.cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
-        autoCloseTime && (react_1["default"].createElement(SnackBar_Timer_1.SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
-        hideAutoCloseTimer && Icon && react_1["default"].createElement(Icon, { className: SnackBar_1.cnSnackBar('Icon'), size: "m" }),
-        react_1["default"].createElement("div", { className: SnackBar_1.cnSnackBar('Content') },
-            type_guards_1.isString(message) || type_guards_1.isNumber(message) ? (react_1["default"].createElement(Text_1.Text, { className: SnackBar_1.cnSnackBar('Message'), lineHeight: "s" }, message)) : (react_1["default"].createElement(react_1["default"].Fragment, null, message)),
-            actions && react_1["default"].createElement(SnackBar_ActionButton_1.SnackBarActionButton, { actions: actions })),
-        onClose && (react_1["default"].createElement(Button_1.Button, { className: SnackBar_1.cnSnackBar('CloseButton'), view: "clear", iconLeft: IconClose_1.IconClose, form: "round", size: "xs", onClick: handleClose }))));
+    return (react_1["default"].createElement("div", { ref: ref, className: exports.cnSnackBarItem({ status: status, showProgress: showProgress }, [
+            Theme_1.cnTheme({ color: 'gpnDark' }),
+            className,
+        ]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
+        autoCloseTime && showProgress !== 'line' && (react_1["default"].createElement(SnackBarTimer_1.SnackBarTimer, { className: exports.cnSnackBarItem('Timer'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
+        hideAutoCloseTimer && Icon && react_1["default"].createElement(Icon, { className: exports.cnSnackBarItem('Icon'), size: "m" }),
+        react_1["default"].createElement("div", { className: exports.cnSnackBarItem('Content') },
+            type_guards_1.isString(message) || type_guards_1.isNumber(message) ? (react_1["default"].createElement(Text_1.Text, { className: exports.cnSnackBarItem('Message'), lineHeight: "s" }, message)) : (react_1["default"].createElement(react_1["default"].Fragment, null, message)),
+            actions && (react_1["default"].createElement(SnackBarActionButton_1.SnackBarActionButton, { actions: actions, className: exports.cnSnackBarItem('ActionButton') }))),
+        onClose && (react_1["default"].createElement(Button_1.Button, { className: exports.cnSnackBarItem('CloseButton'), view: "clear", iconLeft: IconClose_1.IconClose, form: "round", size: "xs", onClick: handleClose })),
+        autoCloseTime && showProgress === 'line' && (react_1["default"].createElement(SnackBarLine_1.SnackBarLine, { className: exports.cnSnackBarItem('Line'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime }))));
 });

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

@@ -0,0 +1,37 @@
+.SnackBarLine {
+  overflow: hidden;
+  width: 100%;
+  height: var(--space-m);
+  border-radius: var(--space-xs);
+  opacity: 0.8;
+}
+
+  .SnackBarLine::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 200%;
+    height: var(--space-2xs);
+    background: -webkit-gradient(
+      linear,
+      left top, right top,
+      from(var(--color-bg-default)),
+      color-stop(50%, var(--color-bg-default)),
+      color-stop(50%, var(--color-bg-ghost)),
+      to(var(--color-bg-ghost))
+    );
+    background: linear-gradient(
+      90deg,
+      var(--color-bg-default) 0%,
+      var(--color-bg-default) 50%,
+      var(--color-bg-ghost) 50%,
+      var(--color-bg-ghost) 100%
+    );
+    -webkit-transition: -webkit-transform 1s linear;
+    transition: -webkit-transform 1s linear;
+    transition: transform 1s linear;
+    transition: transform 1s linear, -webkit-transform 1s linear;
+    -webkit-transform: translate(var(--progress-line-progress));
+            transform: translate(var(--progress-line-progress));
+  }

package/__internal__/cjs-src/components/SnackBar/SnackBarLine/SnackBarLine.d.ts

@@ -0,0 +1,4 @@
+import './SnackBarLine.css';
+import React from 'react';
+import { SnackBarTimerProps } from '../helper';
+export declare const SnackBarLine: React.FC<Omit<SnackBarTimerProps, 'hidden'>>;

package/__internal__/cjs-src/components/SnackBar/SnackBarLine/SnackBarLine.js

@@ -0,0 +1,34 @@
+"use strict";
+exports.__esModule = true;
+exports.SnackBarLine = void 0;
+var tslib_1 = require("tslib");
+require("./SnackBarLine.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useTimer_1 = require("../../../hooks/useTimer/useTimer");
+var bem_1 = require("../../../utils/bem");
+var Theme_1 = require("../../Theme/Theme");
+var interval = 1000;
+var cnSnackBarLine = bem_1.cn('SnackBarLine');
+exports.SnackBarLine = function (props) {
+    var _a;
+    var _b = tslib_1.__read(react_1.useState(false), 2), running = _b[0], setRunning = _b[1];
+    var onMount = props.onMount, onTimeIsOver = props.onTimeIsOver, startTimeprop = props.startTime, className = props.className;
+    var startTime = startTimeprop * interval;
+    var _c = useTimer_1.useTimer({
+        endTime: 0,
+        startTime: startTime,
+        timerType: 'DECREMENTAL',
+        onTimeOver: onTimeIsOver
+    }), time = _c.time, start = _c.start, pause = _c.pause, isRunning = _c.isRunning;
+    react_1.useEffect(function () {
+        onMount({ start: start, pause: pause });
+        start();
+    }, []);
+    react_1.useEffect(function () {
+        setRunning(isRunning);
+    }, [isRunning]);
+    var progress = running ? ((time - interval) / startTime) * 100 : (time / startTime) * 100;
+    return (react_1["default"].createElement("div", { className: cnSnackBarLine({ running: running }, [Theme_1.cnTheme({ color: 'gpnDefault' }), className]), style: (_a = {},
+            _a['--progress-line-progress'] = "-" + progress / 2 + "%",
+            _a) }));
+};

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

@@ -0,0 +1,5 @@
+.SnackBarTimer {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+}

package/__internal__/cjs-src/components/SnackBar/SnackBarTimer/SnackBarTimer.d.ts

@@ -0,0 +1,4 @@
+import './SnackBarTimer.css';
+import React from 'react';
+import { SnackBarTimerProps } from '../helper';
+export declare const SnackBarTimer: React.FC<SnackBarTimerProps>;

package/__internal__/cjs-src/components/SnackBar/{Timer/SnackBar-Timer.js → SnackBarTimer/SnackBarTimer.js}

@@ -2,15 +2,16 @@
 exports.__esModule = true;
 exports.SnackBarTimer = void 0;
 var tslib_1 = require("tslib");
-require("./SnackBar-Timer.css");
+require("./SnackBarTimer.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useTimer_1 = require("../../../hooks/useTimer/useTimer");
+var bem_1 = require("../../../utils/bem");
 var Timer_1 = require("../../Timer/Timer");
-var SnackBar_1 = require("../SnackBar");
 var interval = 1000;
+var cnSnackBarTimer = bem_1.cn('SnackBarTimer');
 exports.SnackBarTimer = function (props) {
     var _a = tslib_1.__read(react_1.useState(false), 2), running = _a[0], setRunning = _a[1];
-    var onMount = props.onMount, onTimeIsOver = props.onTimeIsOver, startTimeprop = props.startTime, hidden = props.hidden;
+    var onMount = props.onMount, onTimeIsOver = props.onTimeIsOver, startTimeprop = props.startTime, hidden = props.hidden, className = props.className;
     var startTime = startTimeprop * interval;
     var _b = useTimer_1.useTimer({
         endTime: 0,
@@ -30,5 +31,5 @@ exports.SnackBarTimer = function (props) {
     if (hidden) {
         return null;
     }
-    return (react_1["default"].createElement(Timer_1.Timer, { className: SnackBar_1.cnSnackBar('Timer'), seconds: seconds, progress: progress, size: "m", animation: true }));
+    return (react_1["default"].createElement(Timer_1.Timer, { className: cnSnackBarTimer(null, [className]), seconds: seconds, progress: progress, size: "m", animation: true }));
 };

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

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { IconComponent } from '../../icons/Icon/Icon';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
+export declare type SnackBarPropItemAction = {
+    label: string | number;
+    onClick: React.EventHandler<React.MouseEvent>;
+};
+export declare type SnackBarActionButtonProps = {
+    actions: SnackBarPropItemAction[];
+    className?: string;
+};
+export declare type SnackBarItemProps = {
+    item: Item;
+    className?: string;
+};
+export declare const snackBarItemStatus: readonly ["normal", "system", "success", "warning", "alert"];
+export declare type SnackBarItemStatus = typeof snackBarItemStatus[number];
+export declare const snackBarItemStatusDefault: SnackBarItemStatus;
+export declare const snackBarItemShowProgressProp: readonly ["timer", "line"];
+export declare type SnackBarItemShowProgressProp = typeof snackBarItemShowProgressProp[number];
+export declare type Item = {
+    key: string | number;
+    message?: string | number | React.ReactNode;
+    status?: SnackBarItemStatus;
+    autoClose?: boolean | number;
+    showProgress?: SnackBarItemShowProgressProp;
+    icon?: IconComponent;
+    actions?: SnackBarPropItemAction[];
+    onClose?: (item: Item) => void;
+    onAutoClose?: (item: Item) => void;
+};
+declare type Props = {
+    items: Item[];
+    children?: never;
+};
+export declare type SnackBarProps = PropsWithHTMLAttributes<Props, HTMLDivElement>;
+export declare type SnackBarTimerPropOnMount = (object: {
+    pause: () => void;
+    start: () => void;
+}) => void;
+export declare type SnackBarTimerProps = {
+    onMount: SnackBarTimerPropOnMount;
+    onTimeIsOver: () => void;
+    startTime: number;
+    hidden?: boolean;
+    className?: string;
+};
+export {};

package/__internal__/cjs-src/components/SnackBar/helper.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.snackBarItemShowProgressProp = exports.snackBarItemStatusDefault = exports.snackBarItemStatus = void 0;
+exports.snackBarItemStatus = ['normal', 'system', 'success', 'warning', 'alert'];
+exports.snackBarItemStatusDefault = exports.snackBarItemStatus[0];
+exports.snackBarItemShowProgressProp = ['timer', 'line'];

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),