@consta/uikit 3.12.3 → 3.15.0

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

@@ -12,9 +12,8 @@ var FieldLabel_1 = require("../FieldLabel/FieldLabel");
 var SliderInput_1 = require("./SliderInput/SliderInput");
 var SliderLine_1 = require("./SliderLine/SliderLine");
 var SliderPoint_1 = require("./SliderPoint/SliderPoint");
-var helper_1 = require("./useSlider/helper");
 var useSlider_1 = require("./useSlider/useSlider");
-var helper_2 = require("./helper");
+var helper_1 = require("./helper");
 var useSliderStationing_1 = require("./useSliderStationing");
 var cnSlider = bem_1.cn('Slider');
 var sizeMap = {
@@ -24,13 +23,13 @@ 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_2.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_2.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);
     var sliderRef = react_1.useRef(null);
     var IconRight = rightSide;
-    var IconLeft = helper_2.isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
+    var IconLeft = helper_1.isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
     var iconSize = getByMap_1.getByMap(sizeMap, size);
     var _l = useSlider_1.useSlider({
         disabled: disabled,
@@ -43,25 +42,24 @@ function SliderRender(props, ref) {
         onAfterChange: onAfterChange,
         sliderRef: sliderRef,
         buttonRefs: [leftButtonRef, rightButtonRef]
-    }), onKeyPress = _l.onKeyPress, onFocus = _l.onFocus, dragPoint = _l.dragPoint, popoverPosition = _l.popoverPosition, activeButton = _l.activeButton, currentValue = _l.currentValue;
-    var _m = useSliderStationing_1.useSliderStationing(currentValue, min, max, view, range, step, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
+    }), onKeyPress = _l.onKeyPress, onFocus = _l.onFocus, handlePress = _l.handlePress, popoverPosition = _l.popoverPosition, activeButton = _l.activeButton, currentValue = _l.currentValue;
+    var _m = useSliderStationing_1.useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, step, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
     var changeHovered = function (status) {
         if (status)
             on();
         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_2.isNotRangeParams(props) && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
-                react_1["default"].createElement(SliderInput_1.SliderInput, { value: props.value, onChange: function (params) { var _a; return helper_2.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 }))),
+            leftSide === 'input' && helper_1.isNotRangeParams(props) && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
+                react_1["default"].createElement(SliderInput_1.SliderInput, { value: props.value, onChange: function (params) { var _a; return helper_1.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 }))),
             IconLeft && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
                 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, onHover: changeHovered, lines: lineSizes, disabled: disabled, view: view }),
-                react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered, buttonRef: leftButtonRef, popoverPosition: popoverPosition[0], onKeyPress: onKeyPress, onFocus: onFocus, disabled: disabled, onMouseDown: dragPoint, position: buttonPositions[0], focused: activeButton === 'left', buttonLabel: "left", withTooltip: withTooltip, onHover: changeHovered, value: tooltipFormatter(helper_1.getActiveValue(currentValue, 'left')) }),
-                helper_2.isRangeParams(props) && (react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered, buttonRef: rightButtonRef, onFocus: onFocus, popoverPosition: popoverPosition[1], onKeyPress: onKeyPress, disabled: disabled, onMouseDown: dragPoint, focused: activeButton === 'right', withTooltip: withTooltip, position: buttonPositions[1], buttonLabel: "right", onHover: changeHovered, value: tooltipFormatter(helper_1.getActiveValue(currentValue, 'right')) }))),
+                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, 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.css

@@ -14,6 +14,7 @@
           align-items: center;
   width: var(--space-m);
   height: var(--space-m);
+  padding: 0;
   background-color: var(--color-bg-default);
   border: var(--space-3xs) solid var(--color-control-bg-primary);
   border-radius: calc(var(--space-m) * 0.5);

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, onKeyPress = props.onKeyPress, buttonLabel = props.buttonLabel, onFocus = props.onFocus, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "onKeyPress", "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: {
@@ -59,11 +59,9 @@ exports.SliderPoint = function (props) {
     };
     var pointRef = react_1.useRef(null);
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement("button", tslib_1.__assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? MixFocus_1.cnMixFocus() : '']), onMouseOver: function () { return handleMouseAction(true); }, onMouseOut: function () { return handleMouseAction(false); }, onKeyDown: function (e) { return onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(e, buttonLabel); }, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, 
-            // onMouseUp={handleBlur}
-            ref: useForkRef_1.useForkRef([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
+        react_1["default"].createElement("button", tslib_1.__assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? MixFocus_1.cnMixFocus() : '']), onMouseOver: function () { return handleMouseAction(true); }, onMouseOut: function () { return handleMouseAction(false); }, onMouseDown: function () { return handlePress === null || handlePress === void 0 ? void 0 : handlePress(buttonLabel); }, onTouchStart: function () { return handlePress === null || handlePress === void 0 ? void 0 : handlePress(buttonLabel); }, onKeyDown: function (e) { return onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(e, buttonLabel); }, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, ref: useForkRef_1.useForkRef([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
                 _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'] }, 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

@@ -48,18 +48,21 @@ export declare type SliderLineProps = {
     onHover?: (hovered: boolean) => void;
 };
 export declare type SliderPointProps = PropsWithHTMLAttributes<{
-    value?: number | string;
+    value?: number;
     disabled?: boolean;
     focused?: boolean;
     hovered?: boolean;
     withTooltip?: boolean;
+    handlePress?: (typeButton: ActiveButton) => void;
     buttonLabel?: ActiveButton;
     buttonRef?: React.RefObject<HTMLButtonElement>;
     popoverPosition?: TrackPosition;
+    tooltipFormatter?: PropToolipFormatter;
     onFocus?: (e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent, button: ActiveButton) => void;
-    onKeyPress?: (e: React.KeyboardEvent, typeButton: ActiveButton) => void;
+    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/SliderCanary/useSlider/helper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropOnChange, SliderValue, TrackPosition } from '../helper';
-export declare type ActiveButton = 'left' | 'right' | null | undefined;
+export declare type ActiveButton = 0 | 1 | null | undefined;
 export declare type Stationing = {
     x: number;
     y: number;
@@ -22,14 +22,14 @@ export declare type UseSliderProps<RANGE extends boolean = false> = {
 export declare type UseSliderValues = {
     onKeyPress: (e: React.KeyboardEvent, typeButton: ActiveButton) => void;
     onFocus: (e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent, button: ActiveButton) => void;
+    handlePress: (typeButton: ActiveButton) => void;
     activeButton: ActiveButton;
-    dragPoint: () => void;
-    currentValue: number | [number, number];
+    currentValue: [number] | [number, number];
     popoverPosition: TrackPosition[];
 };
 export declare const isRangeParams: (params: UseSliderProps<boolean>) => params is UseSliderProps<true>;
 export declare const isNotRangeParams: (params: UseSliderProps<boolean>) => params is UseSliderProps<false>;
-export declare const trackPosition: (event: Event | React.TouchEvent | React.MouseEvent) => TrackPosition;
+export declare const trackPosition: (event: TouchEvent | MouseEvent) => TrackPosition;
 export declare const getActiveValue: (value: number | [number, number], active: ActiveButton) => number;
 export declare const detectActiveButton: (posittion: TrackPosition, buttons: React.RefObject<HTMLButtonElement>[]) => ActiveButton;
 export declare const getValidValue: (value: number, min: number, max: number, step?: number | number[] | undefined) => number;

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

@@ -16,11 +16,14 @@ exports.trackPosition = function (event) {
             y: event.clientY
         };
     }
-    return null;
+    return {
+        x: event.changedTouches[0].clientX,
+        y: event.changedTouches[0].clientY
+    };
 };
 exports.getActiveValue = function (value, active) {
     if (Array.isArray(value)) {
-        return active === 'left' ? value[0] : value[1];
+        return value[typeof active === 'number' ? active : 0];
     }
     return value;
 };
@@ -34,7 +37,7 @@ exports.detectActiveButton = function (position, buttons) {
                 x + width >= position.x &&
                 y <= position.y &&
                 y + height >= position.y) {
-                activeButton = index === 0 ? 'left' : 'right';
+                activeButton = index;
                 button.focus();
             }
         }
@@ -104,7 +107,7 @@ exports.getNewValue = function (changedValue, currentValue, step, min, max, acti
     var minRangeValue = min;
     if (Array.isArray(currentValue)) {
         var _a = tslib_1.__read(currentValue, 2), left = _a[0], right = _a[1];
-        if (activeButton === 'right') {
+        if (activeButton === 1) {
             minRangeValue = left;
         }
         else {
@@ -113,9 +116,7 @@ exports.getNewValue = function (changedValue, currentValue, step, min, max, acti
     }
     var analyzedValue = exports.getValidValue(exports.analyzeDivisionValue(changedValue, step, min, max), minRangeValue, maxRangeValue, step);
     if (Array.isArray(currentValue)) {
-        return activeButton === 'right'
-            ? [currentValue[0], analyzedValue]
-            : [analyzedValue, currentValue[1]];
+        return activeButton === 1 ? [currentValue[0], analyzedValue] : [analyzedValue, currentValue[1]];
     }
     return analyzedValue;
 };

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

@@ -4,7 +4,7 @@ exports.useSlider = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
 var useComponentSize_1 = require("../../../hooks/useComponentSize/useComponentSize");
-var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var useMutableRef_1 = require("../../../hooks/useMutableRef/useMutableRef");
 var helper_1 = require("./helper");
 function useSlider(props) {
     var disabled = props.disabled, range = props.range, value = props.value, min = props.min, max = props.max, _a = props.step, step = _a === void 0 ? 1 : _a, onChange = props.onChange, onAfterChange = props.onAfterChange, sliderRef = props.sliderRef, buttonRefs = props.buttonRefs;
@@ -13,51 +13,34 @@ function useSlider(props) {
     var _b = tslib_1.__read(react_1.useState(value), 2), currentValue = _b[0], setCurrentValue = _b[1];
     var _c = tslib_1.__read(react_1.useState(null), 2), leftPopover = _c[0], setLeftPopover = _c[1];
     var _d = tslib_1.__read(react_1.useState(null), 2), rightPopover = _d[0], setRightPopover = _d[1];
-    var _e = tslib_1.__read(useFlag_1.useFlag(false), 2), draggable = _e[0], _f = _e[1], on = _f.on, off = _f.off;
     var activeButton = react_1.useRef(null);
     var sizeSlider = useComponentSize_1.useComponentSize(sliderRef);
-    var addListeners = function () {
-        document.addEventListener('mouseup', handleTouchEnd);
-        document.addEventListener('touchend', handleTouchEnd);
-        document.addEventListener('mousemove', handleTouchMove);
-        document.addEventListener('touchmove', handleTouchMove);
-    };
-    var removeListeners = function () {
-        document.removeEventListener('mouseup', handleTouchEnd);
-        document.removeEventListener('touchend', handleTouchEnd);
-        document.removeEventListener('mousemove', handleTouchMove);
-        document.removeEventListener('touchmove', handleTouchMove);
-    };
+    var lastValue = useMutableRef_1.useMutableRef(currentValue);
     react_1.useEffect(function () {
-        addListeners();
-        return function () {
-            removeListeners();
-        };
-    }, [
-        activeButton.current,
-        step,
-        currentValue,
-        value,
-        min,
-        max,
-        sliderRef.current,
-        buttonRefs,
-        disabled,
-        draggable,
-    ]);
+        if (disabled) {
+            controlListeners('remove');
+        }
+    }, [disabled]);
+    var controlListeners = function (type) {
+        var method = type === 'add' ? 'addEventListener' : 'removeEventListener';
+        document[method]('mouseup', handleRelease);
+        document[method]('touchend', handleRelease);
+        document[method]('mousemove', handleTouchMove);
+        document[method]('touchmove', handleTouchMove);
+    };
     react_1.useEffect(function () {
         if (Array.isArray(currentValue)) {
-            setTooltipPosition(currentValue[0], 'left');
-            setTooltipPosition(currentValue[1], 'right');
+            setTooltipPosition(currentValue[0], 0);
+            setTooltipPosition(currentValue[1], 1);
         }
         else {
-            setTooltipPosition(currentValue, 'left');
+            setTooltipPosition(currentValue, 0);
         }
     }, [currentValue]);
     react_1.useEffect(function () {
         if (JSON.stringify(value) !== JSON.stringify(currentValue)) {
             setCurrentValue(value);
-            setTooltipPosition(helper_1.getActiveValue(value, activeButton.current), 'left');
+            setTooltipPosition(helper_1.getActiveValue(value, activeButton.current), 0);
             activeButton.current = null;
         }
     }, [value]);
@@ -65,10 +48,10 @@ function useSlider(props) {
         onChange === null || onChange === void 0 ? void 0 : onChange({
             value: Array.isArray(currentValue)
                 ? [
-                    helper_1.getNewValue(currentValue[0], currentValue[0], step, min, max, 'left'),
-                    helper_1.getNewValue(currentValue[1], currentValue[1], step, min, max, 'right'),
+                    helper_1.getNewValue(currentValue[0], currentValue[0], step, min, max, 0),
+                    helper_1.getNewValue(currentValue[1], currentValue[1], step, min, max, 1),
                 ]
-                : helper_1.getNewValue(currentValue, currentValue, step, min, max, 'left')
+                : helper_1.getNewValue(currentValue, currentValue, step, min, max, 0)
         });
     }, [step]);
     react_1.useEffect(function () {
@@ -92,7 +75,7 @@ function useSlider(props) {
         }
     }, []);
     var onKeyPress = react_1.useCallback(function (event, typeButton) {
-        if (!disabled && typeof typeButton === 'string' && typeof currentValue !== 'undefined') {
+        if (!disabled && typeof typeButton === 'number' && typeof currentValue !== 'undefined') {
             var stepIncrement_1 = !Array.isArray(step) ? step || 1 : 1;
             var validKeyCode = false;
             var changedValue_1 = helper_1.getActiveValue(currentValue, typeButton);
@@ -121,7 +104,7 @@ function useSlider(props) {
                         stepsArr_1 = tslib_1.__spread(stepsArr_1, [maxValue]);
                     }
                     stepsArr_1.forEach(function (stepPoint, index) {
-                        if (typeof typeButton === 'string' && changedValue_1 === stepPoint) {
+                        if (typeof typeButton === 'number' && changedValue_1 === stepPoint) {
                             if (stepIncrement_1 >= 0) {
                                 if (index === 0) {
                                     stepIncrement_1 = stepsArr_1[1] - minValue;
@@ -155,14 +138,14 @@ function useSlider(props) {
         }
     }, [currentValue, step, min, max]);
     var setTooltipPosition = function (value, position) {
-        if (sliderRef.current && position) {
-            var button = buttonRefs[position === 'left' ? 0 : 1].current || sliderRef.current;
+        if (sliderRef.current && typeof position === 'number') {
+            var button = buttonRefs[position].current || sliderRef.current;
             var _a = sliderRef.current.getBoundingClientRect(), x = _a.x, width = _a.width;
             var newPosition = {
                 y: button.offsetTop + button.offsetHeight + 50,
                 x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width
             };
-            if (position === 'left') {
+            if (position === 0) {
                 setLeftPopover(newPosition);
             }
             else {
@@ -172,7 +155,7 @@ function useSlider(props) {
     };
     var changePosition = function (event) {
         var nativeEvent = event;
-        if (typeof activeButton.current !== 'string') {
+        if (typeof activeButton.current !== 'number') {
             return value;
         }
         var position = helper_1.trackPosition(nativeEvent);
@@ -182,50 +165,54 @@ function useSlider(props) {
     var onFocus = function (e, button) {
         activeButton.current = button;
     };
-    var handleTouchMove = function (event) {
-        if (typeof activeButton.current === 'string' && draggable) {
+    var handleTouchMove = function (event, typeButton) {
+        var button = typeButton || activeButton.current;
+        if (typeof button === 'number') {
             var position = changePosition(event);
-            var oldValue = helper_1.getActiveValue(currentValue, activeButton.current);
-            var newValue = helper_1.getActiveValue(position, activeButton.current);
+            var oldValue = helper_1.getActiveValue(currentValue, button);
+            var newValue = helper_1.getActiveValue(position, button);
             if (oldValue !== newValue) {
                 setCurrentValue(position);
                 onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange({ e: event, value: position });
             }
         }
     };
-    var handleTouchEnd = function (event) {
-        var position = changePosition(event);
-        if (typeof position !== 'undefined') {
-            setCurrentValue(position);
-            onChange === null || onChange === void 0 ? void 0 : onChange({ e: event, value: position });
-        }
-        off();
-        if (JSON.stringify(position) !== JSON.stringify(currentValue)) {
-            buttonRefs.forEach(function (button) {
-                var _a;
-                (_a = button.current) === null || _a === void 0 ? void 0 : _a.blur();
-            });
-            activeButton.current = null;
-        }
-    };
     react_1.useEffect(function () {
         if (helper_1.isRangeParams(props)) {
             props.value.forEach(function (val, index) {
-                setTooltipPosition(helper_1.getActiveValue(val, activeButton.current), index === 0 ? 'left' : 'right');
+                setTooltipPosition(helper_1.getActiveValue(val, activeButton.current), index === 0 ? 0 : 1);
             });
         }
         if (helper_1.isNotRangeParams(props)) {
-            setTooltipPosition(helper_1.getActiveValue(value, activeButton.current), 'left');
+            setTooltipPosition(helper_1.getActiveValue(value, activeButton.current), 0);
         }
         activeButton.current = null;
     }, [sizeSlider, typeof value]);
+    var handleRelease = react_1.useCallback(function (e) {
+        var _a, _b;
+        controlListeners('remove');
+        if (helper_1.isRangeParams(props) && Array.isArray(lastValue.current)) {
+            var copyValues = tslib_1.__spread(lastValue.current).sort(function (a, b) { return Number(a) - Number(b); });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { e: e, value: copyValues });
+        }
+        if (helper_1.isNotRangeParams(props) && typeof lastValue.current === 'number') {
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: lastValue.current });
+        }
+        activeButton.current = null;
+    }, [lastValue, value, onChange, handleTouchMove]);
+    var handlePress = react_1.useCallback(function (typeButton) {
+        if (!disabled) {
+            activeButton.current = typeButton;
+            controlListeners('add');
+        }
+    }, [currentValue, value, onChange, handleTouchMove, disabled]);
     return {
         onKeyPress: onKeyPress,
         onFocus: onFocus,
-        dragPoint: on,
+        handlePress: handlePress,
         activeButton: activeButton.current,
         popoverPosition: [leftPopover, rightPopover],
-        currentValue: currentValue
+        currentValue: Array.isArray(currentValue) ? currentValue : [currentValue]
     };
 }
 exports.useSlider = useSlider;

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

@@ -51,18 +51,15 @@ exports.useSliderStationing = function (value, min, max, view, range, step, butt
                     });
                 }
                 else if (Array.isArray(value) && value) {
-                    sizesArray.push({
-                        width: ((value[0] - min) / absoluteSize) * 100,
-                        active: false
-                    });
-                    sizesArray.push({
-                        width: ((value[1] - value[0]) / absoluteSize) * 100,
-                        active: true
-                    });
-                    sizesArray.push({
-                        width: ((max - value[1]) / absoluteSize) * 100,
-                        active: false
-                    });
+                    var endPointArray = tslib_1.__spread(value);
+                    endPointArray.unshift(min);
+                    endPointArray.push(max);
+                    for (var i = 0; i < endPointArray.length - 1; i++) {
+                        sizesArray.push({
+                            width: ((endPointArray[i + 1] - endPointArray[i]) / absoluteSize) * 100,
+                            active: endPointArray[i] !== min && endPointArray[i + 1] !== max
+                        });
+                    }
                 }
                 else {
                     sizesArray.push({
@@ -77,7 +74,7 @@ exports.useSliderStationing = function (value, min, max, view, range, step, butt
                         width: (Math.abs(stepSize.max - stepSize.min) * 100) / absoluteSize,
                         active: (typeof value === 'number' || Array.isArray(value)) &&
                             (range && Array.isArray(value)
-                                ? stepSize.max > value[0] && stepSize.min < value[1]
+                                ? stepSize.max > value[0] && stepSize.min < value[value.length - 1]
                                 : stepSize.max <= value)
                     });
                 });

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