@consta/uikit 3.13.0 → 3.16.0

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

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import './SelectDropdown.css';
 import React, { Fragment } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -15,11 +15,11 @@ export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var 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, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, ref = props.ref, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound", "ref"]);
     var getIndex = fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        React.createElement(Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true },
+        React.createElement(Popover, __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.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                 visibleItems.map(function (group) {
                     if (isOptionForCreate(group)) {
@@ -31,5 +31,6 @@ export var SelectDropdown = function (props) {
                             return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                         })));
                 }),
-                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
+                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
 };

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

@@ -3,4 +3,5 @@ import { PropForm } from './types';
 export declare function getSelectDropdownForm(form: PropForm): SelectDropdownPropForm;
 export declare const defaultlabelForNotFound = "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
 export declare const defaultlabelForCreate = "+";
+export declare const defaultLabelForEmptyItems = "\u0421\u043F\u0438\u0441\u043E\u043A \u043F\u0443\u0441\u0442";
 export declare const getInputWidth: (controlInnerRef: React.RefObject<HTMLDivElement>, helperInputFakeElement: React.RefObject<HTMLDivElement>) => number;

package/__internal__/src/components/SelectComponents/helpers.js

@@ -18,6 +18,7 @@ export function getSelectDropdownForm(form) {
 }
 export var defaultlabelForNotFound = 'Не найдено';
 export var defaultlabelForCreate = '+';
+export var defaultLabelForEmptyItems = 'Список пуст';
 export var getInputWidth = function (controlInnerRef, helperInputFakeElement) {
     if (!controlInnerRef.current || !helperInputFakeElement.current) {
         return 20;

package/__internal__/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__/src/components/Sidebar/Sidebar.js

@@ -32,7 +32,7 @@ var ContextConsumer = function (_a) {
     return React.createElement(React.Fragment, null, children);
 };
 export var 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 = __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 = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container", "style", "rootClassName"]);
     var ref = useRef(null);
     var theme = useTheme().theme;
     useEffect(function () {
@@ -47,9 +47,9 @@ export var Sidebar = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition(cnSidebar), timeout: 200 },
-        React.createElement(PortalWithTheme, { preset: theme, container: container },
+        React.createElement(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.createElement("div", { className: cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            React.createElement("div", __assign({ className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }, rest),
+            React.createElement("div", __assign({}, otherProps, { style: __assign(__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: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 Sidebar.Content = SidebarContent;

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

@@ -2,6 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import './Slider.css';
 import React, { forwardRef, useRef } from 'react';
 import { useFlag } from '../../hooks/useFlag/useFlag';
+import { useSortSteps } from '../../hooks/useSortSteps/useSortSteps';
 import { cn } from '../../utils/bem';
 import { getByMap } from '../../utils/getByMap';
 import { FieldCaption } from '../FieldCaption/FieldCaption';
@@ -20,11 +21,12 @@ 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 ? 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 ? defaultTooltipFormatter : _h, className = props.className, otherProps = __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 ? 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 ? defaultTooltipFormatter : _h, className = props.className, style = props.style, otherProps = __rest(props, ["min", "max", "onChange", "onAfterChange", "value", "step", "disabled", "size", "view", "leftSide", "rightSide", "withTooltip", "range", "label", "status", "caption", "tooltipFormatter", "className", "style"]);
     var _j = __read(useFlag(false), 2), isHovered = _j[0], _k = _j[1], on = _k.on, off = _k.off;
     var leftButtonRef = useRef(null);
     var rightButtonRef = useRef(null);
     var sliderRef = useRef(null);
+    var sortedSteps = useSortSteps({ step: step, min: min, max: max });
     var IconRight = rightSide;
     var IconLeft = isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
     var iconSize = getByMap(sizeMap, size);
@@ -34,29 +36,29 @@ function SliderRender(props, ref) {
         value: value,
         min: min,
         max: max,
-        step: step,
+        step: sortedSteps,
         onChange: onChange,
         onAfterChange: onAfterChange,
         sliderRef: sliderRef,
         buttonRefs: [leftButtonRef, rightButtonRef]
     }), onKeyPress = _l.onKeyPress, onFocus = _l.onFocus, handlePress = _l.handlePress, popoverPosition = _l.popoverPosition, activeButton = _l.activeButton, currentValue = _l.currentValue;
-    var _m = useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, step, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
+    var _m = useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, sortedSteps, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
     var changeHovered = function (status) {
         if (status)
             on();
         else
             off();
     };
-    return (React.createElement("div", __assign({ ref: ref, className: cnSlider({ size: size }, [className]) }, otherProps),
+    return (React.createElement("div", __assign({ ref: ref, className: cnSlider({ size: size }, [className]), style: style }, otherProps),
         label && (React.createElement(FieldLabel, { className: cnSlider('Label'), size: size }, label)),
         React.createElement("div", { className: cnSlider('Container') },
             leftSide === 'input' && isNotRangeParams(props) && (React.createElement("div", { className: cnSlider('Side', { position: 'left' }) },
-                React.createElement(SliderInput, { value: props.value, onChange: function (params) { var _a; return isNotRangeParams(props) && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params)); }, size: size, min: min, max: max, status: status, step: step, disabled: disabled }))),
+                React.createElement(SliderInput, { value: props.value, onChange: function (params) { var _a; return isNotRangeParams(props) && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params)); }, size: size, min: min, max: max, status: status, step: sortedSteps, disabled: disabled }))),
             IconLeft && (React.createElement("div", { className: cnSlider('Side', { position: 'left' }) },
                 React.createElement(IconLeft, { size: iconSize, view: "secondary" }))),
             React.createElement("div", { className: cnSlider('Control'), ref: sliderRef },
                 React.createElement(SliderLine, { hovered: isHovered || typeof activeButton === 'number', onHover: changeHovered, lines: lineSizes, disabled: disabled, view: view }),
-                currentValue.map(function (val, index) { return (React.createElement(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.createElement(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.createElement("div", { className: cnSlider('Side', { position: 'right' }) },
                 React.createElement(IconRight, { size: iconSize, view: "secondary" })))),
         caption && (React.createElement(FieldCaption, { className: cnSlider('Caption'), status: status }, caption))));

package/__internal__/src/components/SliderCanary/SliderInput/SliderInput.d.ts

@@ -6,7 +6,7 @@ declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min'
     min?: number;
     max?: number;
     onChange?: (props: {
-        e?: React.ChangeEvent | React.MouseEvent;
+        e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;
         value: number;
     }) => void;
 };

package/__internal__/src/components/SliderCanary/SliderInput/SliderInput.js

@@ -18,5 +18,5 @@ export var SliderInput = function (props) {
         setCurrentValue(validatedValue.toString());
     };
     useEffect(function () { return setCurrentValue(value.toString()); }, [value]);
-    return (React.createElement(TextField, __assign({ onBlur: commitChange, type: "number", min: min, max: max, step: Array.isArray(step) ? 1 : step, onChange: handleChange, value: currentValue }, otherProps)));
+    return (React.createElement(TextField, __assign({ onBlur: commitChange, type: "number", min: min, max: max, step: step, onChange: handleChange, value: currentValue }, otherProps)));
 };

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

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

package/__internal__/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__/src/components/SliderCanary/useSlider/helper.js

@@ -1,4 +1,4 @@
-import { __read, __spread } from "tslib";
+import { __read } from "tslib";
 import { getSteps } from '../useSliderStationing';
 export var isRangeParams = function (params) {
     return !!params.range;
@@ -53,25 +53,18 @@ export var getValidValue = function (value, min, max, step) {
             return (Math.ceil(Number(value.toFixed(division ? division.length : 0)) / stepValue) * stepValue);
         }
         var resultValue_1 = value;
-        var stepsArr_1 = step;
-        if (step[0] !== min) {
-            stepsArr_1 = __spread([min], stepsArr_1);
-        }
-        else if (step[step.length - 1] !== max) {
-            stepsArr_1 = __spread(stepsArr_1, [max]);
-        }
-        stepsArr_1.forEach(function (stepPoint, index) {
+        step.forEach(function (stepPoint, index) {
             var minValue = min;
             var maxValue = max;
             if (index === 0) {
-                maxValue = stepsArr_1[index + 1];
+                maxValue = step[index + 1];
             }
-            else if (index === stepsArr_1.length - 1) {
+            else if (index === step.length - 1) {
                 minValue = stepPoint;
                 maxValue = max;
             }
             else {
-                maxValue = stepsArr_1[index + 1];
+                maxValue = step[index + 1];
                 minValue = stepPoint;
             }
             if (value <= maxValue && value >= minValue) {

package/__internal__/src/components/SliderCanary/useSlider/useSlider.js

@@ -52,7 +52,7 @@ export function useSlider(props) {
         });
     }, [step]);
     useEffect(function () {
-        if (typeof value !== 'undefined' && typeof step !== 'undefined') {
+        if (typeof value !== 'undefined') {
             var targetValue = isRangeParams(props)
                 ? [
                     getValidValue(props.value[0], min, max, step),
@@ -93,32 +93,24 @@ export function useSlider(props) {
             }
             if (validKeyCode) {
                 if (Array.isArray(step)) {
-                    var stepsArr_1 = __spread(step);
-                    if (step[0] !== minValue) {
-                        stepsArr_1 = __spread([minValue], stepsArr_1);
-                    }
-                    if (step[step.length - 1] !== maxValue) {
-                        stepsArr_1 = __spread(stepsArr_1, [maxValue]);
-                    }
-                    stepsArr_1.forEach(function (stepPoint, index) {
+                    step.forEach(function (stepPoint, index) {
                         if (typeof typeButton === 'number' && changedValue_1 === stepPoint) {
                             if (stepIncrement_1 >= 0) {
                                 if (index === 0) {
-                                    stepIncrement_1 = stepsArr_1[1] - minValue;
+                                    stepIncrement_1 = step[1] - minValue;
                                 }
                                 else {
                                     stepIncrement_1 =
-                                        (typeof stepsArr_1[index + 1] !== 'undefined'
-                                            ? stepsArr_1[index + 1]
-                                            : maxValue) - stepPoint;
+                                        (typeof step[index + 1] !== 'undefined' ? step[index + 1] : maxValue) -
+                                            stepPoint;
                                 }
                             }
                             else if (index === 0) {
-                                stepIncrement_1 = minValue - stepsArr_1[1];
+                                stepIncrement_1 = minValue - step[1];
                             }
                             else {
                                 stepIncrement_1 =
-                                    (typeof stepsArr_1[index - 1] !== 'undefined' ? stepsArr_1[index - 1] : minValue) -
+                                    (typeof step[index - 1] !== 'undefined' ? step[index - 1] : minValue) -
                                         stepPoint;
                             }
                         }

package/__internal__/src/components/SliderCanary/useSliderStationing.js

@@ -4,17 +4,10 @@ export var getSteps = function (step, min, max) {
     var stepsArray = [];
     var size = min;
     if (Array.isArray(step)) {
-        step.forEach(function (stepSize) {
+        for (var i = 0; i < step.length - 1; i++) {
             stepsArray.push({
-                min: size,
-                max: stepSize
-            });
-            size += stepSize - size;
-        });
-        if (size !== max) {
-            stepsArray.push({
-                min: size,
-                max: max
+                min: step[i],
+                max: step[i + 1]
             });
         }
     }
@@ -30,6 +23,7 @@ export var getSteps = function (step, min, max) {
     return stepsArray;
 };
 export var useSliderStationing = function (value, min, max, view, range, step, buttonRefs, sliderLineRef) {
+    if (step === void 0) { step = 1; }
     var _a = __read(useState([]), 2), lineSizes = _a[0], setLineSizes = _a[1];
     var _b = __read(useState([]), 2), buttonPositions = _b[0], setButtonPositions = _b[1];
     var calculateLines = function () {

package/__internal__/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__/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__/src/components/SnackBar/SnackBar.js

@@ -5,15 +5,11 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { cn } from '../../utils/bem';
 import { cnForCssTransition } from '../../utils/cnForCssTransition';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
-import { SnackBarItem } from './Item/SnackBar-Item';
-export var snackBarItemStatus = ['normal', 'system', 'success', 'warning', 'alert'];
-export var snackBarItemStatusDefault = snackBarItemStatus[0];
-export var COMPONENT_NAME = 'SnackBar';
-export var cnSnackBar = cn(COMPONENT_NAME);
-export var cnSnackBarItem = cn(COMPONENT_NAME, 'Item');
-var cssTransitionClassNames = cnForCssTransition(cnSnackBarItem);
+import { SnackBarItem } from './SnackBarItem/SnackBarItem';
+export var cnSnackBar = cn('SnackBar');
+var cssTransitionClassNames = cnForCssTransition(cnSnackBar, 'Item');
 export var SnackBar = function (props) {
-    var _a = usePropsHandler(COMPONENT_NAME, props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
+    var _a = usePropsHandler('SnackBar', props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
     var refs = useMemo(function () {
         var refArray = [];
         for (var i = 0; i < items.length; i++) {
@@ -23,6 +19,6 @@ export var SnackBar = function (props) {
     }, [items]);
     return (React.createElement(TransitionGroup, __assign({}, otherProps, { className: cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item, index) {
         return (React.createElement(CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
-            React.createElement(SnackBarItem, { item: item, ref: refs[index] })));
+            React.createElement(SnackBarItem, { item: item, ref: refs[index], className: cnSnackBar('Item') })));
     })));
 };

package/__internal__/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__/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__/src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.js

@@ -0,0 +1,12 @@
+import './SnackBarActionButton.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+import { Button } from '../../Button/Button';
+var cnSnackBarActionButton = cn('SnackBarActionButton');
+export var SnackBarActionButton = function (props) {
+    var actions = props.actions, className = props.className;
+    if (actions.length < 1) {
+        return null;
+    }
+    return (React.createElement("div", { className: cnSnackBarActionButton('ActionButtonsWrapper', [className]) }, actions.map(function (item, index) { return (React.createElement(Button, { className: cnSnackBarActionButton(), key: cnSnackBarActionButton() + "-" + index, size: "s", view: "ghost", label: item.label, onClick: item.onClick })); })));
+};

package/__internal__/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__/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__/src/components/SnackBar/{Item/SnackBar-Item.js → SnackBarItem/SnackBarItem.js}

@@ -1,17 +1,20 @@
 import { __read } from "tslib";
 import '../../Theme/_color/Theme_color_gpnDark.css';
-import './SnackBar-Item.css';
+import './SnackBarItem.css';
 import React, { useEffect, useState } from 'react';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { IconClose } from '../../../icons/IconClose/IconClose';
+import { cn } from '../../../utils/bem';
 import { isNumber, isString } from '../../../utils/type-guards';
 import { Button } from '../../Button/Button';
 import { Text } from '../../Text/Text';
 import { cnTheme } from '../../Theme/Theme';
-import { SnackBarActionButton } from '../ActionButton/SnackBar-ActionButton';
-import { cnSnackBar, cnSnackBarItem, snackBarItemStatusDefault } from '../SnackBar';
-import { SnackBarTimer } from '../Timer/SnackBar-Timer';
+import { snackBarItemStatusDefault, } from '../helper';
+import { SnackBarActionButton } from '../SnackBarActionButton/SnackBarActionButton';
+import { SnackBarLine } from '../SnackBarLine/SnackBarLine';
+import { SnackBarTimer } from '../SnackBarTimer/SnackBarTimer';
 var defaultInitialTimerTime = 3;
+export var cnSnackBarItem = cn('SnackBarItem');
 var getAutoCloseTime = function (autoClose) {
     if (autoClose) {
         if (typeof autoClose === 'number') {
@@ -22,7 +25,7 @@ var getAutoCloseTime = function (autoClose) {
     return false;
 };
 export var SnackBarItem = React.forwardRef(function (props, ref) {
-    var item = props.item;
+    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 ? snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
     var _b = __read(useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = __read(useFlag(false), 2), hover = _c[0], _d = _c[1], onHover = _d.on, offHover = _d.off;
@@ -57,11 +60,15 @@ export var SnackBarItem = React.forwardRef(function (props, ref) {
         onAutoClose(item);
     };
     var handleClose = onClose ? function () { return onClose(item); } : undefined;
-    return (React.createElement("div", { ref: ref, className: cnSnackBarItem({ status: status }, [cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
-        autoCloseTime && (React.createElement(SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
-        hideAutoCloseTimer && Icon && React.createElement(Icon, { className: cnSnackBar('Icon'), size: "m" }),
-        React.createElement("div", { className: cnSnackBar('Content') },
-            isString(message) || isNumber(message) ? (React.createElement(Text, { className: cnSnackBar('Message'), lineHeight: "s" }, message)) : (React.createElement(React.Fragment, null, message)),
-            actions && React.createElement(SnackBarActionButton, { actions: actions })),
-        onClose && (React.createElement(Button, { className: cnSnackBar('CloseButton'), view: "clear", iconLeft: IconClose, form: "round", size: "xs", onClick: handleClose }))));
+    return (React.createElement("div", { ref: ref, className: cnSnackBarItem({ status: status, showProgress: showProgress }, [
+            cnTheme({ color: 'gpnDark' }),
+            className,
+        ]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
+        autoCloseTime && showProgress !== 'line' && (React.createElement(SnackBarTimer, { className: cnSnackBarItem('Timer'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
+        hideAutoCloseTimer && Icon && React.createElement(Icon, { className: cnSnackBarItem('Icon'), size: "m" }),
+        React.createElement("div", { className: cnSnackBarItem('Content') },
+            isString(message) || isNumber(message) ? (React.createElement(Text, { className: cnSnackBarItem('Message'), lineHeight: "s" }, message)) : (React.createElement(React.Fragment, null, message)),
+            actions && (React.createElement(SnackBarActionButton, { actions: actions, className: cnSnackBarItem('ActionButton') }))),
+        onClose && (React.createElement(Button, { className: cnSnackBarItem('CloseButton'), view: "clear", iconLeft: IconClose, form: "round", size: "xs", onClick: handleClose })),
+        autoCloseTime && showProgress === 'line' && (React.createElement(SnackBarLine, { className: cnSnackBarItem('Line'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime }))));
 });

package/__internal__/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__/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'>>;