@consta/uikit 3.9.3 → 3.12.1

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

@@ -0,0 +1,38 @@
+.SliderPoint {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: var(--slider-button-left);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--space-m);
+  height: var(--space-m);
+  background-color: var(--color-bg-default);
+  border: var(--space-3xs) solid var(--color-control-bg-primary);
+  border-radius: calc(var(--space-m) * 0.5);
+  cursor: pointer;
+  -webkit-transition: border-color 0.3s, left 0.3s;
+  transition: border-color 0.3s, left 0.3s;
+}
+
+  .SliderPoint_hovered {
+    border-color: var(--color-control-bg-primary-hover);
+  }
+
+  .SliderPoint_disabled {
+    border-color: var(--color-control-bg-ghost);
+    cursor: auto;
+  }
+
+  .SliderPoint-Tooltip {
+    pointer-events: none;
+    -webkit-transition: left 0.3s;
+    transition: left 0.3s;
+  }

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './SliderPoint.css';
+import { SliderPointProps } from '../helper';
+export declare const SliderPoint: (props: SliderPointProps) => JSX.Element;

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

@@ -0,0 +1,69 @@
+"use strict";
+exports.__esModule = true;
+exports.SliderPoint = void 0;
+var tslib_1 = require("tslib");
+require("./SliderPoint.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var MixFocus_1 = require("../../../mixs/MixFocus/MixFocus");
+var bem_1 = require("../../../utils/bem");
+var Theme_1 = require("../../Theme/Theme");
+var Tooltip_1 = require("../../Tooltip/Tooltip");
+var cnSliderPoint = bem_1.cn('SliderPoint');
+var getTooltipPosition = function (popoverPosition, buttonRef) {
+    if (popoverPosition && buttonRef && buttonRef.current) {
+        var _a = buttonRef.current.getBoundingClientRect(), y = _a.y, height = _a.height;
+        return {
+            x: popoverPosition.x,
+            y: y - height + 30
+        };
+    }
+    return { x: 0, y: 0 };
+};
+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 _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: {
+            primary: theme.color.invert,
+            accent: theme.color.accent,
+            invert: theme.color.primary
+        } });
+    var tooltipThemeClassNames = Theme_1.generateThemeClassNames(tooltipTheme);
+    react_1.useEffect(function () {
+        focused ? on() : off();
+    }, [focused]);
+    var handleFocus = function (e) {
+        if (!disabled) {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e, buttonLabel);
+            on();
+        }
+    };
+    var handleMouseAction = function (enter) {
+        if (!disabled) {
+            onHover === null || onHover === void 0 ? void 0 : onHover(enter);
+            enter && on();
+            if (enter)
+                on();
+            if (!enter && !focused)
+                off();
+        }
+    };
+    var handleBlur = function (e) {
+        if (!disabled) {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e, null);
+            off();
+        }
+    };
+    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 = {},
+                _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)))));
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { IconComponent } from '../../icons/Icon/Icon';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
+import { ActiveButton } from './useSlider/helper';
+export declare const propStatus: readonly ["alert", "warning", "success"];
+export declare type PropStatus = typeof propStatus[number];
+export declare const defaultPropStatus: "alert";
+export declare type PropView = 'default' | 'division';
+export declare const propSize: readonly ["s", "xs", "m", "l"];
+export declare type PropSize = typeof propSize[number];
+export declare const defaultPropSize: PropSize;
+export declare type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;
+export declare type PropOnChange<RANGE> = (prop: {
+    e?: Event | React.TouchEvent | React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;
+    value: SliderValue<RANGE>;
+}) => void;
+declare type PropToolipFormatter = (value: number | undefined) => string;
+declare type Props<RANGE extends boolean = false> = {
+    className?: string;
+    step?: number | number[];
+    view?: PropView;
+    disabled?: boolean;
+    range?: RANGE;
+    withTooltip?: boolean;
+    value: SliderValue<RANGE>;
+    label?: string;
+    caption?: string;
+    status?: PropStatus;
+    min?: number;
+    size?: PropSize;
+    max?: number;
+    onChange?: PropOnChange<RANGE>;
+    onAfterChange?: PropOnChange<RANGE>;
+    leftSide?: IconComponent | 'input';
+    tooltipFormatter?: PropToolipFormatter;
+    rightSide?: IconComponent;
+};
+export declare type Line = {
+    width: number;
+    active: boolean;
+    size?: number[];
+};
+export declare type SliderLineProps = {
+    view?: PropView;
+    lines: Line[];
+    disabled?: boolean;
+    hovered?: boolean;
+    onHover?: (hovered: boolean) => void;
+};
+export declare type SliderPointProps = PropsWithHTMLAttributes<{
+    value?: number | string;
+    disabled?: boolean;
+    focused?: boolean;
+    hovered?: boolean;
+    withTooltip?: boolean;
+    buttonLabel?: ActiveButton;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+    popoverPosition?: TrackPosition;
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent, button: ActiveButton) => void;
+    onKeyPress?: (e: React.KeyboardEvent, typeButton: ActiveButton) => void;
+    onHover?: (hovered: boolean) => void;
+    position: 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;
+export declare const isRangeParams: (params: Props<boolean>) => params is Props<true>;
+export declare const isNotRangeParams: (params: Props<boolean>) => params is Props<false>;
+export declare const defaultTooltipFormatter: PropToolipFormatter;
+export declare type TrackPosition = {
+    x: number;
+    y: number;
+} | null;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+exports.__esModule = true;
+exports.defaultTooltipFormatter = exports.isNotRangeParams = exports.isRangeParams = exports.defaultPropSize = exports.propSize = exports.defaultPropStatus = exports.propStatus = void 0;
+exports.propStatus = ['alert', 'warning', 'success'];
+exports.defaultPropStatus = exports.propStatus[0];
+exports.propSize = ['s', 'xs', 'm', 'l'];
+exports.defaultPropSize = exports.propSize[0];
+exports.isRangeParams = function (params) {
+    return !!params.range;
+};
+exports.isNotRangeParams = function (params) {
+    return !params.range;
+};
+exports.defaultTooltipFormatter = function (value) { return (value === null || value === void 0 ? void 0 : value.toString()) || ''; };

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PropOnChange, SliderValue, TrackPosition } from '../helper';
+export declare type ActiveButton = 'left' | 'right' | null | undefined;
+export declare type Stationing = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare type UseSliderProps<RANGE extends boolean = false> = {
+    disabled: boolean;
+    range?: RANGE;
+    value: SliderValue<RANGE>;
+    min: number;
+    max: number;
+    step?: number | number[];
+    onChange?: PropOnChange<RANGE>;
+    onAfterChange?: PropOnChange<RANGE>;
+    sliderRef: React.RefObject<HTMLDivElement>;
+    buttonRefs: React.RefObject<HTMLButtonElement>[];
+};
+export declare type UseSliderValues = {
+    onKeyPress: (e: React.KeyboardEvent, typeButton: ActiveButton) => void;
+    onFocus: (e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent, button: ActiveButton) => void;
+    activeButton: ActiveButton;
+    dragPoint: () => void;
+    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 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;
+export declare const isValidValue: (value: number, min: number, max: number, step?: number | number[] | undefined) => boolean;
+export declare const getValueByPosition: (position: TrackPosition, sliderRef: React.RefObject<HTMLDivElement>, min: number, max: number) => number;
+export declare const getNewValue: (changedValue: number, currentValue: number | [number, number], step: number | number[], min: number, max: number, activeButton: ActiveButton) => number | [number, number];
+export declare const analyzeDivisionValue: (value: number, step: number | number[], min: number, max: number) => number;

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

@@ -0,0 +1,136 @@
+"use strict";
+exports.__esModule = true;
+exports.analyzeDivisionValue = exports.getNewValue = exports.getValueByPosition = exports.isValidValue = exports.getValidValue = exports.detectActiveButton = exports.getActiveValue = exports.trackPosition = exports.isNotRangeParams = exports.isRangeParams = void 0;
+var tslib_1 = require("tslib");
+var useSliderStationing_1 = require("../useSliderStationing");
+exports.isRangeParams = function (params) {
+    return !!params.range;
+};
+exports.isNotRangeParams = function (params) {
+    return !params.range;
+};
+exports.trackPosition = function (event) {
+    if ('clientX' in event) {
+        return {
+            x: event.clientX,
+            y: event.clientY
+        };
+    }
+    return null;
+};
+exports.getActiveValue = function (value, active) {
+    if (Array.isArray(value)) {
+        return active === 'left' ? value[0] : value[1];
+    }
+    return value;
+};
+exports.detectActiveButton = function (position, buttons) {
+    var activeButton = null;
+    buttons.forEach(function (buttonRef, index) {
+        var button = buttonRef.current;
+        if (button && position) {
+            var _a = button.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+            if (x <= position.x &&
+                x + width >= position.x &&
+                y <= position.y &&
+                y + height >= position.y) {
+                activeButton = index === 0 ? 'left' : 'right';
+                button.focus();
+            }
+        }
+    });
+    return activeButton;
+};
+exports.getValidValue = function (value, min, max, step) {
+    if (typeof value === 'number') {
+        if (value > max)
+            return max;
+        if (value < min)
+            return min;
+        if (!Array.isArray(step)) {
+            var division = step === null || step === void 0 ? void 0 : step.toString().split('.')[1];
+            var stepValue = step || 1;
+            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 = tslib_1.__spread([min], stepsArr_1);
+        }
+        else if (step[step.length - 1] !== max) {
+            stepsArr_1 = tslib_1.__spread(stepsArr_1, [max]);
+        }
+        stepsArr_1.forEach(function (stepPoint, index) {
+            var minValue = min;
+            var maxValue = max;
+            if (index === 0) {
+                maxValue = stepsArr_1[index + 1];
+            }
+            else if (index === stepsArr_1.length - 1) {
+                minValue = stepPoint;
+                maxValue = max;
+            }
+            else {
+                maxValue = stepsArr_1[index + 1];
+                minValue = stepPoint;
+            }
+            if (value <= maxValue && value >= minValue) {
+                if ((maxValue + minValue) / 2 > value) {
+                    resultValue_1 = minValue;
+                }
+                else {
+                    resultValue_1 = maxValue;
+                }
+            }
+        });
+        return resultValue_1;
+    }
+    return value;
+};
+exports.isValidValue = function (value, min, max, step) {
+    return exports.getValidValue(value, min, max, step) === value;
+};
+exports.getValueByPosition = function (position, sliderRef, min, max) {
+    if (sliderRef.current && position) {
+        var _a = sliderRef.current.getBoundingClientRect(), x = _a.x, width = _a.width;
+        var absoluteSize = Math.abs(max - min);
+        var value = min + ((position.x - x) * absoluteSize) / width;
+        return exports.getValidValue(value, min, max);
+    }
+    return 0;
+};
+exports.getNewValue = function (changedValue, currentValue, step, min, max, activeButton) {
+    var maxRangeValue = max;
+    var minRangeValue = min;
+    if (Array.isArray(currentValue)) {
+        var _a = tslib_1.__read(currentValue, 2), left = _a[0], right = _a[1];
+        if (activeButton === 'right') {
+            minRangeValue = left;
+        }
+        else {
+            maxRangeValue = right;
+        }
+    }
+    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 analyzedValue;
+};
+exports.analyzeDivisionValue = function (value, step, min, max) {
+    var steps = useSliderStationing_1.getSteps(step, min, max);
+    var newValue = value;
+    steps.forEach(function (stepSize) {
+        if (value && stepSize.min < value && stepSize.max >= value) {
+            if ((stepSize.max + stepSize.min) / 2 > value) {
+                newValue = stepSize.min;
+            }
+            else {
+                newValue = stepSize.max;
+            }
+        }
+    });
+    return newValue;
+};

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

@@ -0,0 +1,2 @@
+import { UseSliderProps, UseSliderValues } from './helper';
+export declare function useSlider<RANGE extends boolean>(props: UseSliderProps<RANGE>): UseSliderValues;

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

@@ -0,0 +1,231 @@
+"use strict";
+exports.__esModule = true;
+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 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;
+    var minValue = max > min ? min : 0;
+    var maxValue = max > min ? max : 100;
+    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);
+    };
+    react_1.useEffect(function () {
+        addListeners();
+        return function () {
+            removeListeners();
+        };
+    }, [
+        activeButton.current,
+        step,
+        currentValue,
+        value,
+        min,
+        max,
+        sliderRef.current,
+        buttonRefs,
+        disabled,
+        draggable,
+    ]);
+    react_1.useEffect(function () {
+        if (Array.isArray(currentValue)) {
+            setTooltipPosition(currentValue[0], 'left');
+            setTooltipPosition(currentValue[1], 'right');
+        }
+        else {
+            setTooltipPosition(currentValue, 'left');
+        }
+    }, [currentValue]);
+    react_1.useEffect(function () {
+        if (JSON.stringify(value) !== JSON.stringify(currentValue)) {
+            setCurrentValue(value);
+            setTooltipPosition(helper_1.getActiveValue(value, activeButton.current), 'left');
+            activeButton.current = null;
+        }
+    }, [value]);
+    react_1.useEffect(function () {
+        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, currentValue, step, min, max, 'left')
+        });
+    }, [step]);
+    react_1.useEffect(function () {
+        if (typeof value !== 'undefined' && typeof step !== 'undefined') {
+            var targetValue = helper_1.isRangeParams(props)
+                ? [
+                    helper_1.getValidValue(props.value[0], min, max, step),
+                    helper_1.getValidValue(props.value[1], min, max, step),
+                ]
+                : helper_1.getValidValue(props.value, min, max, step);
+            setCurrentValue(targetValue);
+        }
+    }, [range, typeof value]);
+    react_1.useEffect(function () {
+        var _a;
+        if (helper_1.isRangeParams(props)) {
+            if (props.value[0] > props.value[1]) {
+                var newValue = [props.value[1], props.value[1]];
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { value: newValue });
+            }
+        }
+    }, []);
+    var onKeyPress = react_1.useCallback(function (event, typeButton) {
+        if (!disabled && typeof typeButton === 'string' && typeof currentValue !== 'undefined') {
+            var stepIncrement_1 = !Array.isArray(step) ? step || 1 : 1;
+            var validKeyCode = false;
+            var changedValue_1 = helper_1.getActiveValue(currentValue, typeButton);
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'ArrowRight':
+                case '+':
+                    validKeyCode = true;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                case '-':
+                    validKeyCode = true;
+                    stepIncrement_1 *= -1;
+                    break;
+                default:
+                    break;
+            }
+            if (validKeyCode) {
+                if (Array.isArray(step)) {
+                    var stepsArr_1 = tslib_1.__spread(step);
+                    if (step[0] !== minValue) {
+                        stepsArr_1 = tslib_1.__spread([minValue], stepsArr_1);
+                    }
+                    if (step[step.length - 1] !== maxValue) {
+                        stepsArr_1 = tslib_1.__spread(stepsArr_1, [maxValue]);
+                    }
+                    stepsArr_1.forEach(function (stepPoint, index) {
+                        if (typeof typeButton === 'string' && changedValue_1 === stepPoint) {
+                            if (stepIncrement_1 >= 0) {
+                                if (index === 0) {
+                                    stepIncrement_1 = stepsArr_1[1] - minValue;
+                                }
+                                else {
+                                    stepIncrement_1 =
+                                        (typeof stepsArr_1[index + 1] !== 'undefined'
+                                            ? stepsArr_1[index + 1]
+                                            : maxValue) - stepPoint;
+                                }
+                            }
+                            else if (index === 0) {
+                                stepIncrement_1 = minValue - stepsArr_1[1];
+                            }
+                            else {
+                                stepIncrement_1 =
+                                    (typeof stepsArr_1[index - 1] !== 'undefined' ? stepsArr_1[index - 1] : minValue) -
+                                        stepPoint;
+                            }
+                        }
+                    });
+                }
+                var newValue = helper_1.getNewValue(changedValue_1 + stepIncrement_1, currentValue, step, min, max, typeButton);
+                setCurrentValue(newValue);
+                setTooltipPosition(helper_1.getActiveValue(newValue, typeButton), typeButton);
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    e: event,
+                    value: newValue
+                });
+            }
+        }
+    }, [currentValue, step, min, max]);
+    var setTooltipPosition = function (value, position) {
+        if (sliderRef.current && position) {
+            var button = buttonRefs[position === 'left' ? 0 : 1].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') {
+                setLeftPopover(newPosition);
+            }
+            else {
+                setRightPopover(newPosition);
+            }
+        }
+    };
+    var changePosition = function (event) {
+        var nativeEvent = event;
+        if (typeof activeButton.current !== 'string') {
+            return value;
+        }
+        var position = helper_1.trackPosition(nativeEvent);
+        var positionValue = helper_1.getValueByPosition(position, sliderRef, minValue, maxValue);
+        return helper_1.getNewValue(positionValue, currentValue, step, min, max, activeButton.current);
+    };
+    var onFocus = function (e, button) {
+        activeButton.current = button;
+    };
+    var handleTouchMove = function (event) {
+        if (typeof activeButton.current === 'string' && draggable) {
+            var position = changePosition(event);
+            var oldValue = helper_1.getActiveValue(currentValue, activeButton.current);
+            var newValue = helper_1.getActiveValue(position, activeButton.current);
+            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');
+            });
+        }
+        if (helper_1.isNotRangeParams(props)) {
+            setTooltipPosition(helper_1.getActiveValue(value, activeButton.current), 'left');
+        }
+        activeButton.current = null;
+    }, [sizeSlider, typeof value]);
+    return {
+        onKeyPress: onKeyPress,
+        onFocus: onFocus,
+        dragPoint: on,
+        activeButton: activeButton.current,
+        popoverPosition: [leftPopover, rightPopover],
+        currentValue: currentValue
+    };
+}
+exports.useSlider = useSlider;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Line, PropView } from './helper';
+declare type UseSliderStationing = (value: number | [number, number] | undefined, min: number, max: number, view: PropView, range: boolean | undefined, step: number | number[] | undefined, buttonRefs: [React.RefObject<HTMLButtonElement>, React.RefObject<HTMLButtonElement>], sliderLineRef: React.RefObject<HTMLDivElement>) => {
+    lineSizes: Line[];
+    buttonPositions: number[];
+};
+export declare const getSteps: (step: number | number[], min: number, max: number) => {
+    min: number;
+    max: number;
+}[];
+export declare const useSliderStationing: UseSliderStationing;
+export {};