@consta/uikit 3.9.1 → 3.11.0

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

@@ -0,0 +1,66 @@
+import { __assign, __read, __rest } from "tslib";
+import './Slider.css';
+import React, { forwardRef, useRef } from 'react';
+import { useFlag } from '../../hooks/useFlag/useFlag';
+import { cn } from '../../utils/bem';
+import { getByMap } from '../../utils/getByMap';
+import { FieldCaption } from '../FieldCaption/FieldCaption';
+import { FieldLabel } from '../FieldLabel/FieldLabel';
+import { SliderInput } from './SliderInput/SliderInput';
+import { SliderLine } from './SliderLine/SliderLine';
+import { SliderPoint } from './SliderPoint/SliderPoint';
+import { getActiveValue } from './useSlider/helper';
+import { useSlider } from './useSlider/useSlider';
+import { defaultPropSize, defaultTooltipFormatter, isNotRangeParams, isRangeParams, } from './helper';
+import { useSliderStationing } from './useSliderStationing';
+var cnSlider = cn('Slider');
+var sizeMap = {
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    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 _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 IconRight = rightSide;
+    var IconLeft = isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
+    var iconSize = getByMap(sizeMap, size);
+    var _l = useSlider({
+        disabled: disabled,
+        range: range,
+        value: value,
+        min: min,
+        max: max,
+        step: step,
+        onChange: onChange,
+        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(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.createElement("div", __assign({ ref: ref, className: cnSlider({ size: size }, [className]) }, 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 }))),
+            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, onHover: changeHovered, lines: lineSizes, disabled: disabled, view: view }),
+                React.createElement(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(getActiveValue(currentValue, 'left')) }),
+                isRangeParams(props) && (React.createElement(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(getActiveValue(currentValue, 'right')) }))),
+            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))));
+}
+export var Slider = forwardRef(SliderRender);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextFieldProps } from '../../TextField/helpers';
+declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min' | 'max' | 'step'> & {
+    value: number;
+    step?: number | number[];
+    min?: number;
+    max?: number;
+    onChange?: (props: {
+        e?: React.ChangeEvent | React.MouseEvent;
+        value: number;
+    }) => void;
+};
+export declare const SliderInput: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { TextField } from '../../TextField/TextField';
+import { getValidValue, isValidValue } from '../useSlider/helper';
+export var SliderInput = function (props) {
+    var value = props.value, onChange = props.onChange, _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, _c = props.step, step = _c === void 0 ? 1 : _c, otherProps = __rest(props, ["value", "onChange", "min", "max", "step"]);
+    var _d = __read(useState(value.toString()), 2), currentValue = _d[0], setCurrentValue = _d[1];
+    var handleChange = function (_a) {
+        var e = _a.e, value = _a.value;
+        setCurrentValue(value);
+        if (isValidValue(Number(value), min, max, step)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ value: Number(value), e: e });
+        }
+    };
+    var commitChange = function () {
+        var validatedValue = getValidValue(Number(currentValue), min, max, step);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: validatedValue });
+        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)));
+};

package/__internal__/src/components/SliderCanary/SliderLine/SliderLine.css

@@ -0,0 +1,39 @@
+.SliderLine {
+  --slider-line-radius: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  border-radius: var(--control-radius);
+}
+
+  .SliderLine_view_division {
+    --slider-line-radius: var(--control-radius);
+    gap: var(--space-2xs);
+  }
+
+  .SliderLine-Line {
+    --slider-line-color: var(--color-control-bg-ghost);
+    width: var(--slider-line-size);
+    height: var(--space-2xs);
+    background-color: var(--slider-line-color);
+    border-radius: var(--slider-line-radius);
+    -webkit-transition: background-color 0.3s, width 0.3s;
+    transition: background-color 0.3s, width 0.3s;
+  }
+
+  .SliderLine-Line_active {
+      --slider-line-color: var(--color-control-bg-primary);
+    }
+
+  .SliderLine-Line_hovered.SliderLine-Line_active {
+      --slider-line-color: var(--color-control-bg-primary-hover);
+    }
+
+  .SliderLine-Line_disabled {
+      --slider-line-color: var(--color-control-bg-disable);
+    }

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

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

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

@@ -0,0 +1,23 @@
+import { __assign, __rest } from "tslib";
+import './SliderLine.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+var cnSliderLine = cn('SliderLine');
+export var SliderLine = function (props) {
+    var hovered = props.hovered, onHover = props.onHover, lines = props.lines, disabled = props.disabled, _a = props.view, view = _a === void 0 ? 'default' : _a, otherProps = __rest(props, ["hovered", "onHover", "lines", "disabled", "view"]);
+    var handleHover = function (active, hover) {
+        if (!disabled && active) {
+            onHover === null || onHover === void 0 ? void 0 : onHover(hover);
+        }
+    };
+    return (React.createElement("div", __assign({ className: cnSliderLine({ view: view }) }, otherProps), lines.map(function (line, index) {
+        var _a;
+        return (React.createElement("div", { onMouseEnter: function () { return handleHover(line.active, true); }, onMouseLeave: function () { return handleHover(line.active, false); }, className: cnSliderLine('Line', {
+                active: line.active,
+                hovered: line.active && hovered,
+                disabled: disabled
+            }), key: cnSliderLine({ index: index }), style: (_a = {},
+                _a['--slider-line-size'] = line.width + "%",
+                _a) }));
+    })));
+};

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

@@ -0,0 +1,66 @@
+import { __assign, __read, __rest } from "tslib";
+import './SliderPoint.css';
+import React, { useEffect, useRef } from 'react';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
+import { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';
+import { cn } from '../../../utils/bem';
+import { generateThemeClassNames, ThemeContext, useTheme } from '../../Theme/Theme';
+import { Tooltip } from '../../Tooltip/Tooltip';
+var cnSliderPoint = 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 };
+};
+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, onKeyPress = props.onKeyPress, buttonLabel = props.buttonLabel, onFocus = props.onFocus, otherProps = __rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "onKeyPress", "buttonLabel", "onFocus"]);
+    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: {
+            primary: theme.color.invert,
+            accent: theme.color.accent,
+            invert: theme.color.primary
+        } });
+    var tooltipThemeClassNames = generateThemeClassNames(tooltipTheme);
+    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 = useRef(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", __assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? 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([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
+                _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'] }, value)))));
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { IconProps } 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?: React.FC<IconProps> | 'input';
+    tooltipFormatter?: PropToolipFormatter;
+    rightSide?: React.FC<IconProps>;
+};
+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__/src/components/SliderCanary/helper.js

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

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

@@ -0,0 +1,133 @@
+import { __read, __spread } from "tslib";
+import { getSteps } from '../useSliderStationing';
+export var isRangeParams = function (params) {
+    return !!params.range;
+};
+export var isNotRangeParams = function (params) {
+    return !params.range;
+};
+export var trackPosition = function (event) {
+    if ('clientX' in event) {
+        return {
+            x: event.clientX,
+            y: event.clientY
+        };
+    }
+    return null;
+};
+export var getActiveValue = function (value, active) {
+    if (Array.isArray(value)) {
+        return active === 'left' ? value[0] : value[1];
+    }
+    return value;
+};
+export var 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;
+};
+export var 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 = __spread([min], stepsArr_1);
+        }
+        else if (step[step.length - 1] !== max) {
+            stepsArr_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;
+};
+export var isValidValue = function (value, min, max, step) {
+    return getValidValue(value, min, max, step) === value;
+};
+export var 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 getValidValue(value, min, max);
+    }
+    return 0;
+};
+export var getNewValue = function (changedValue, currentValue, step, min, max, activeButton) {
+    var maxRangeValue = max;
+    var minRangeValue = min;
+    if (Array.isArray(currentValue)) {
+        var _a = __read(currentValue, 2), left = _a[0], right = _a[1];
+        if (activeButton === 'right') {
+            minRangeValue = left;
+        }
+        else {
+            maxRangeValue = right;
+        }
+    }
+    var analyzedValue = getValidValue(analyzeDivisionValue(changedValue, step, min, max), minRangeValue, maxRangeValue, step);
+    if (Array.isArray(currentValue)) {
+        return activeButton === 'right'
+            ? [currentValue[0], analyzedValue]
+            : [analyzedValue, currentValue[1]];
+    }
+    return analyzedValue;
+};
+export var analyzeDivisionValue = function (value, step, min, max) {
+    var steps = 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__/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;