intelicoreact 1.5.38 → 1.5.41

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -1,482 +1,396 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return RangeSlider;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _reactfeather = require("react-feather");
-const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
-const _mobileKeyboardTypesPresets = require("../../../Functions/presets/mobileKeyboardTypesPresets");
-const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useIsMobile/useIsMobile"));
-const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+exports.default = RangeSlider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactFeather = require("react-feather");
+var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+var _mobileKeyboardTypesPresets = require("../../../Functions/presets/mobileKeyboardTypesPresets");
+var _useIsMobile = _interopRequireDefault(require("../../../Functions/useIsMobile"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
 require("./RangeSlider.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 let timer;
 const DEBOUNCE_TIME = 800;
-function debounce(func, timeout = DEBOUNCE_TIME) {
-    return (...args)=>{
-        clearTimeout(timer);
-        timer = setTimeout(()=>{
-            func.apply(this, args);
-        }, timeout);
-    };
+function debounce(func) {
+  var _this = this;
+  let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEBOUNCE_TIME;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(_this, args);
+    }, timeout);
+  };
 }
-function RangeSlider({ required, noTrack, rangeSymbol, min = 0, max = 100, decimalPlaces = 2, minRange = 0, precision = 0, testId = "range-slider", value = {
-    from: min,
-    to: max
-}, unit = "", label = "", isUseBitPoints = true, onChange = ()=>{} }) {
-    const { isMobile } = (0, _useIsMobile.default)();
-    const trackRef = (0, _react.useRef)(0);
-    const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
-    const [trackPosition, setTrackPosition] = (0, _react.useState)(0);
-    const fromTriggerRef = (0, _react.useRef)(0);
-    const toTriggerRef = (0, _react.useRef)(0);
-    const prepareValue = (value)=>{
-        return parseInt(parseFloat(value) * 10 ** precision, 10) / 10 ** precision;
-    };
-    var _value_from;
-    const [from, setFromValue] = (0, _react.useState)((_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : min);
-    const setFrom = (v)=>setFromValue(prepareValue(v));
-    var _value_to;
-    const [to, setToValue] = (0, _react.useState)((_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : max);
-    const setTo = (v)=>setToValue(prepareValue(v));
-    const [focusedType, setFocusedType] = (0, _react.useState)(null);
-    const [frezeedValues, setFrezeedValues] = (0, _react.useState)(null);
-    const [isInputsFocused, setIsInputsFocused] = (0, _react.useState)({
-        from: false,
-        to: false
-    });
-    const setIsInputFocused = (input, value)=>setIsInputsFocused((state)=>({
-                ...state,
-                [input]: value
-            }));
-    const fromValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.from : from;
-    const toValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.to : to;
-    const [movingController, setMovingController] = (0, _react.useState)(null);
-    const [movingTrigger, setMovingTrigger] = (0, _react.useState)(null);
-    const [movingTriggerType, setMovingTriggerType] = (0, _react.useState)(null);
-    const [isTriggerMoved, setIsTriggerMoved] = (0, _react.useState)(false);
-    const [pointsPerPx, setPointsPerPx] = (0, _react.useState)(0);
-    const [extremumRange, setExtremumRange] = (0, _react.useState)(0);
-    const [extremumWidth, setExtremumWidth] = (0, _react.useState)(0);
-    const countPointsPerPx = (width)=>{
-        return (max - min) / width;
-    };
-    const resetRange = ()=>{
-        setFrom(min);
-        setTo(max);
-    };
-    const getTrackXByPoints = (pts)=>{
-        return (pts - min) / pointsPerPx;
-    };
-    const getRangeWidth = ()=>{
-        return getTrackXByPoints(toValue) - getTrackXByPoints(fromValue);
-    };
-    const getRangeOffset = ()=>{
-        return getTrackXByPoints(fromValue);
-    };
-    const getXByPoints = (pts)=>{
-        return (pts - min) / pointsPerPx + trackPosition;
-    };
-    const getPointsByX = (x)=>{
-        return (x - trackPosition) * pointsPerPx + min;
-    };
-    const onRangeChange = (type, value, validate = true, callOnChange = true)=>{
-        if (validate) value = prepareValue(value);
-        if (isNaN(value)) value = 0;
-        switch(type){
-            case "from":
-                const getValidatedFromValue = (value)=>{
-                    if (!value && value !== 0 || value < min) {
-                        value = min;
-                    }
-                    if (value > to - minRange) {
-                        value = to - minRange;
-                    }
-                    return value;
-                };
-                if (validate) {
-                    value = getValidatedFromValue(value);
-                }
-                validate ? setFrom(value) : setFromValue(value);
-                if (!isTriggerMoved && callOnChange) {
-                    debounce(()=>{
-                        const values = {
-                            from: prepareValue(getValidatedFromValue(value)),
-                            to
-                        };
-                        onChange(values);
-                        setFrezeedValues(values);
-                    }, DEBOUNCE_TIME)();
-                }
-                break;
-            case "to":
-                const getValidatedToValue = (value)=>{
-                    if (!value && value !== 0 || value > max) {
-                        value = max;
-                    }
-                    if (value < from + minRange) {
-                        value = from + minRange;
-                    }
-                    return value;
-                };
-                if (validate) {
-                    value = getValidatedToValue(value);
-                }
-                validate ? setTo(value) : setToValue(value);
-                if (!isTriggerMoved && callOnChange) {
-                    debounce(()=>{
-                        const values = {
-                            from,
-                            to: prepareValue(getValidatedToValue(value))
-                        };
-                        onChange(values);
-                        setFrezeedValues(values);
-                    }, DEBOUNCE_TIME)();
-                }
-                break;
+function RangeSlider(_ref) {
+  let {
+    required,
+    noTrack,
+    rangeSymbol,
+    min = 0,
+    max = 100,
+    decimalPlaces = 2,
+    minRange = 0,
+    precision = 0,
+    testId = "range-slider",
+    value = {
+      from: min,
+      to: max
+    },
+    unit = "",
+    label = "",
+    isUseBitPoints = true,
+    onChange = () => {}
+  } = _ref;
+  const {
+    isMobile
+  } = (0, _useIsMobile.default)();
+  const trackRef = (0, _react.useRef)(0);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const [trackPosition, setTrackPosition] = (0, _react.useState)(0);
+  const fromTriggerRef = (0, _react.useRef)(0);
+  const toTriggerRef = (0, _react.useRef)(0);
+  const prepareValue = value => {
+    return parseInt(parseFloat(value) * 10 ** precision, 10) / 10 ** precision;
+  };
+  const [from, setFromValue] = (0, _react.useState)(value?.from ?? min);
+  const setFrom = v => setFromValue(prepareValue(v));
+  const [to, setToValue] = (0, _react.useState)(value?.to ?? max);
+  const setTo = v => setToValue(prepareValue(v));
+  const [focusedType, setFocusedType] = (0, _react.useState)(null);
+  const [frezeedValues, setFrezeedValues] = (0, _react.useState)(null);
+  const [isInputsFocused, setIsInputsFocused] = (0, _react.useState)({
+    from: false,
+    to: false
+  });
+  const setIsInputFocused = (input, value) => setIsInputsFocused(state => ({
+    ...state,
+    [input]: value
+  }));
+  const fromValue = frezeedValues ? frezeedValues?.from : from;
+  const toValue = frezeedValues ? frezeedValues?.to : to;
+  const [movingController, setMovingController] = (0, _react.useState)(null);
+  const [movingTrigger, setMovingTrigger] = (0, _react.useState)(null);
+  const [movingTriggerType, setMovingTriggerType] = (0, _react.useState)(null);
+  const [isTriggerMoved, setIsTriggerMoved] = (0, _react.useState)(false);
+  const [pointsPerPx, setPointsPerPx] = (0, _react.useState)(0);
+  const [extremumRange, setExtremumRange] = (0, _react.useState)(0);
+  const [extremumWidth, setExtremumWidth] = (0, _react.useState)(0);
+  const countPointsPerPx = width => {
+    return (max - min) / width;
+  };
+  const resetRange = () => {
+    setFrom(min);
+    setTo(max);
+  };
+  const getTrackXByPoints = pts => {
+    return (pts - min) / pointsPerPx;
+  };
+  const getRangeWidth = () => {
+    return getTrackXByPoints(toValue) - getTrackXByPoints(fromValue);
+  };
+  const getRangeOffset = () => {
+    return getTrackXByPoints(fromValue);
+  };
+  const getXByPoints = pts => {
+    return (pts - min) / pointsPerPx + trackPosition;
+  };
+  const getPointsByX = x => {
+    return (x - trackPosition) * pointsPerPx + min;
+  };
+  const onRangeChange = function (type, value) {
+    let validate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    let callOnChange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    if (validate) value = prepareValue(value);
+    if (isNaN(value)) value = 0;
+    switch (type) {
+      case "from":
+        const getValidatedFromValue = value => {
+          if (!value && value !== 0 || value < min) {
+            value = min;
+          }
+          if (value > to - minRange) {
+            value = to - minRange;
+          }
+          return value;
+        };
+        if (validate) {
+          value = getValidatedFromValue(value);
         }
-    };
-    // MouseDown Event Controller
-    const onTriggerMouseDown = (e, type)=>{
-        if (e.button !== 0 && !isMobile) return; // Отменить обработку, если нажата не левая кнопка мыши
-        setMovingTrigger(e.target);
-        setMovingTriggerType(type);
-        setIsTriggerMoved(true); // Установить флаг движения в true при клике
-    };
-    const onTriggerMove = (e)=>{
-        var _e_touches;
-        if (!isMobile) {
-            e.preventDefault();
-            e.stopPropagation();
+        validate ? setFrom(value) : setFromValue(value);
+        if (!isTriggerMoved && callOnChange) {
+          debounce(() => {
+            const values = {
+              from: prepareValue(getValidatedFromValue(value)),
+              to
+            };
+            onChange(values);
+            setFrezeedValues(values);
+          }, DEBOUNCE_TIME)();
         }
-        if (!isTriggerMoved) setIsTriggerMoved(true);
-        if (!movingTrigger) return false;
-        let { clientX: x } = isMobile ? e === null || e === void 0 ? void 0 : (_e_touches = e.touches) === null || _e_touches === void 0 ? void 0 : _e_touches[0] : e;
-        const { width: triggerWidth = 16 } = (movingTrigger === null || movingTrigger === void 0 ? void 0 : movingTrigger.getBoundingClientRect()) || {};
-        if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
-        x -= triggerWidth / 2;
-        onRangeChange(movingTriggerType, getPointsByX(x));
-    };
-    const onTriggerMoveEnd = ()=>{
-        setMovingTrigger(null);
-        setMovingTriggerType(null);
-        setIsTriggerMoved(false);
-    };
-    const onRangeInputFocus = (e, type)=>{
-        setTimeout(()=>setIsInputFocused(type, true), 1);
-    };
-    const onRangeInputBlur = (e, type)=>{
-        setIsInputFocused(type, false);
-    };
-    (0, _react.useEffect)(()=>{
-        var _value_from;
-        onRangeChange("from", (_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : max, true, false);
-        var _value_to;
-        onRangeChange("to", (_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : min, true, false);
-    }, []);
-    /// MouseUp Event Controller
-    (0, _react.useEffect)(()=>{
-        document.addEventListener("mouseup", onTriggerMoveEnd);
-        return ()=>{
-            document.removeEventListener("mouseup", onTriggerMoveEnd);
-        };
-    }, []);
-    // MouseMove Event Controller
-    (0, _react.useEffect)(()=>{
-        // Прекратить обработку, если нет активного триггера или не было движения
-        if (!movingTrigger || !isTriggerMoved) return;
-        const handleMouseMove = (e)=>{
-            onTriggerMove(e);
+        break;
+      case "to":
+        const getValidatedToValue = value => {
+          if (!value && value !== 0 || value > max) {
+            value = max;
+          }
+          if (value < from + minRange) {
+            value = from + minRange;
+          }
+          return value;
         };
-        document.addEventListener("mousemove", handleMouseMove);
-        return ()=>{
-            document.removeEventListener("mousemove", handleMouseMove);
-        };
-    }, [
-        movingTrigger,
-        isTriggerMoved
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (movingController) {
-            document.addEventListener("mousemove", onTriggerMove, {
-                signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
-            });
-        }
-    }, [
-        movingController
-    ]);
-    (0, _react.useEffect)(()=>{
-        setFrezeedValues(null);
-    }, [
-        isTriggerMoved
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (Object.values(isInputsFocused).every((v)=>!v) && !isTriggerMoved && (value.from !== from || value.to !== to)) {
-            onChange({
-                from,
-                to
-            });
+        if (validate) {
+          value = getValidatedToValue(value);
         }
-        if (isTriggerMoved) setFrezeedValues({
-            from,
-            to
-        });
-    }, [
-        from,
-        to,
-        isTriggerMoved
-    ]);
-    (0, _react.useLayoutEffect)(()=>{
-        setFrom(value.from);
-        setTo(value.to);
-    }, [
-        value
-    ]);
-    (0, _react.useLayoutEffect)(()=>{
-        var _trackRef_current, _fromTriggerRef_current_getBoundingClientRect, _fromTriggerRef_current, _toTriggerRef_current_getBoundingClientRect, _toTriggerRef_current;
-        let { width, x } = (trackRef === null || trackRef === void 0 ? void 0 : (_trackRef_current = trackRef.current) === null || _trackRef_current === void 0 ? void 0 : _trackRef_current.getBoundingClientRect()) || {};
-        width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef_current = fromTriggerRef.current) === null || _fromTriggerRef_current === void 0 ? void 0 : (_fromTriggerRef_current_getBoundingClientRect = _fromTriggerRef_current.getBoundingClientRect()) === null || _fromTriggerRef_current_getBoundingClientRect === void 0 ? void 0 : _fromTriggerRef_current_getBoundingClientRect.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef_current = toTriggerRef.current) === null || _toTriggerRef_current === void 0 ? void 0 : (_toTriggerRef_current_getBoundingClientRect = _toTriggerRef_current.getBoundingClientRect()) === null || _toTriggerRef_current_getBoundingClientRect === void 0 ? void 0 : _toTriggerRef_current_getBoundingClientRect.width);
-        setPointsPerPx(countPointsPerPx(width));
-        setTrackWidth(width);
-        setTrackPosition(x);
-    }, [
-        trackRef
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (Object.values(isInputsFocused).every((v)=>!v)) {
-            setFrezeedValues(false);
-        } else {
-            setFrezeedValues({
-                from,
-                to
-            });
+        validate ? setTo(value) : setToValue(value);
+        if (!isTriggerMoved && callOnChange) {
+          debounce(() => {
+            const values = {
+              from,
+              to: prepareValue(getValidatedToValue(value))
+            };
+            onChange(values);
+            setFrezeedValues(values);
+          }, DEBOUNCE_TIME)();
         }
-    }, [
-        isInputsFocused
-    ]);
-    const renderLabel = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__header__label",
-            children: [
-                label,
-                required && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                    className: "label_isRequired",
-                    children: "*"
-                })
-            ]
-        });
+        break;
+    }
+  };
+  // MouseDown Event Controller
+  const onTriggerMouseDown = (e, type) => {
+    if (e.button !== 0 && !isMobile) return; // Отменить обработку, если нажата не левая кнопка мыши
+    setMovingTrigger(e.target);
+    setMovingTriggerType(type);
+    setIsTriggerMoved(true); // Установить флаг движения в true при клике
+  };
+  const onTriggerMove = e => {
+    if (!isMobile) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (!isTriggerMoved) setIsTriggerMoved(true);
+    if (!movingTrigger) return false;
+    let {
+      clientX: x
+    } = isMobile ? e?.touches?.[0] : e;
+    const {
+      width: triggerWidth = 16
+    } = movingTrigger?.getBoundingClientRect() || {};
+    if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
+    x -= triggerWidth / 2;
+    onRangeChange(movingTriggerType, getPointsByX(x));
+  };
+  const onTriggerMoveEnd = () => {
+    setMovingTrigger(null);
+    setMovingTriggerType(null);
+    setIsTriggerMoved(false);
+  };
+  const onRangeInputFocus = (e, type) => {
+    setTimeout(() => setIsInputFocused(type, true), 1);
+  };
+  const onRangeInputBlur = (e, type) => {
+    setIsInputFocused(type, false);
+  };
+  (0, _react.useEffect)(() => {
+    onRangeChange("from", value?.from ?? max, true, false);
+    onRangeChange("to", value?.to ?? min, true, false);
+  }, []);
+
+  /// MouseUp Event Controller
+  (0, _react.useEffect)(() => {
+    document.addEventListener("mouseup", onTriggerMoveEnd);
+    return () => {
+      document.removeEventListener("mouseup", onTriggerMoveEnd);
     };
-    const renderSelectedRange = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__header__selected-range",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: "range-slider__header__selected-range--text",
-                    children: [
-                        "from ",
-                        isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(fromValue) : fromValue,
-                        " to",
-                        " ",
-                        isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(toValue) : toValue,
-                        rangeSymbol,
-                        unit
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__header__selected-range--reset",
-                    onClick: resetRange,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
-                })
-            ]
-        });
+  }, []);
+
+  // MouseMove Event Controller
+  (0, _react.useEffect)(() => {
+    // Прекратить обработку, если нет активного триггера или не было движения
+    if (!movingTrigger || !isTriggerMoved) return;
+    const handleMouseMove = e => {
+      onTriggerMove(e);
     };
-    const renderHeader = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__header",
-            children: [
-                renderLabel(),
-                min !== fromValue || max !== toValue ? renderSelectedRange() : null
-            ]
-        });
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
     };
-    const renderInputs = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__inputs",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__inputs--from",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
-                        "data-testid": `${testId}-input-from`,
-                        value: from.toString(),
-                        onFocus: (e)=>onRangeInputFocus(e, "from"),
-                        onBlur: (e)=>onRangeInputBlur(e, "from"),
-                        onChange: (value)=>onRangeChange("from", value, false),
-                        onlyNumbers: {
-                            type: "float",
-                            decimalPlaces,
-                            min,
-                            max
-                        },
-                        isPriceInput: isUseBitPoints,
-                        ..._mobileKeyboardTypesPresets.NUMERIC_KEYBOARD
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__inputs__input",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
-                        "data-testid": `${testId}-input-to`,
-                        value: to.toString(),
-                        onFocus: (e)=>onRangeInputFocus(e, "to"),
-                        onBlur: (e)=>onRangeInputBlur(e, "to"),
-                        onChange: (value)=>onRangeChange("to", value, false),
-                        onlyNumbers: {
-                            type: "float",
-                            decimalPlaces,
-                            min,
-                            max
-                        },
-                        isPriceInput: isUseBitPoints,
-                        ..._mobileKeyboardTypesPresets.NUMERIC_KEYBOARD
-                    })
-                })
-            ]
-        });
+  }, [movingTrigger, isTriggerMoved]);
+  (0, _react.useEffect)(() => {
+    if (movingController) {
+      document.addEventListener("mousemove", onTriggerMove, {
+        signal: movingController?.signal
+      });
+    }
+  }, [movingController]);
+  (0, _react.useEffect)(() => {
+    setFrezeedValues(null);
+  }, [isTriggerMoved]);
+  (0, _react.useEffect)(() => {
+    if (Object.values(isInputsFocused).every(v => !v) && !isTriggerMoved && (value.from !== from || value.to !== to)) {
+      onChange({
+        from,
+        to
+      });
+    }
+    if (isTriggerMoved) setFrezeedValues({
+      from,
+      to
+    });
+  }, [from, to, isTriggerMoved]);
+  (0, _react.useLayoutEffect)(() => {
+    setFrom(value.from);
+    setTo(value.to);
+  }, [value]);
+  (0, _react.useLayoutEffect)(() => {
+    let {
+      width,
+      x
+    } = trackRef?.current?.getBoundingClientRect() || {};
+    width -= fromTriggerRef?.current?.getBoundingClientRect()?.width || toTriggerRef?.current?.getBoundingClientRect()?.width;
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
+  (0, _react.useEffect)(() => {
+    if (Object.values(isInputsFocused).every(v => !v)) {
+      setFrezeedValues(false);
+    } else {
+      setFrezeedValues({
+        from,
+        to
+      });
+    }
+  }, [isInputsFocused]);
+  const renderLabel = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__label"
+    }, label, required && /*#__PURE__*/_react.default.createElement("span", {
+      className: "label_isRequired"
+    }, "*"));
+  };
+  const renderSelectedRange = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__selected-range"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__selected-range--text"
+    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(fromValue) : fromValue, " to", " ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(toValue) : toValue, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header__selected-range--reset",
+      onClick: resetRange
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null)));
+  };
+  const renderHeader = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__header"
+    }, renderLabel(), min !== fromValue || max !== toValue ? renderSelectedRange() : null);
+  };
+  const renderInputs = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__inputs"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__inputs--from"
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+      "data-testid": `${testId}-input-from`,
+      value: from.toString(),
+      onFocus: e => onRangeInputFocus(e, "from"),
+      onBlur: e => onRangeInputBlur(e, "from"),
+      onChange: value => onRangeChange("from", value, false),
+      onlyNumbers: {
+        type: "float",
+        decimalPlaces,
+        min,
+        max
+      },
+      isPriceInput: isUseBitPoints
+    }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__inputs__input"
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+      "data-testid": `${testId}-input-to`,
+      value: to.toString(),
+      onFocus: e => onRangeInputFocus(e, "to"),
+      onBlur: e => onRangeInputBlur(e, "to"),
+      onChange: value => onRangeChange("to", value, false),
+      onlyNumbers: {
+        type: "float",
+        decimalPlaces,
+        min,
+        max
+      },
+      isPriceInput: isUseBitPoints
+    }, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD))));
+  };
+  const renderTrackRange = () => {
+    const style = {
+      width: `${getRangeWidth()}px`,
+      left: `${getRangeOffset()}px`
     };
-    const renderTrackRange = ()=>{
-        const style = {
-            width: `${getRangeWidth()}px`,
-            left: `${getRangeOffset()}px`
-        };
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: "range-slider__track__range",
-            style: style
-        });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track__range",
+      style: style
+    });
+  };
+  const renderTrackTriggers = () => {
+    const fromStyle = {
+      left: `${getTrackXByPoints(fromValue)}px`
     };
-    const renderTrackTriggers = ()=>{
-        const fromStyle = {
-            left: `${getTrackXByPoints(fromValue)}px`
-        };
-        const toStyle = {
-            left: `${getTrackXByPoints(toValue)}px`
-        };
-        const renderTrack = ()=>{
-            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)("range-slider__track", {
-                    hidden: noTrack
-                }),
-                ref: trackRef,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "range-slider__track__line"
-                    }),
-                    renderTrackRange(),
-                    renderTrackTriggers()
-                ]
-            });
-        };
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__track__range-triggers",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    "data-testid": `${testId}-track-from`,
-                    ref: fromTriggerRef,
-                    style: fromStyle,
-                    className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-left",
-                    onMouseDown: (e)=>!isMobile ? onTriggerMouseDown(e, "from") : {},
-                    onTouchStart: (e)=>onTriggerMouseDown(e, "from"),
-                    onTouchMove: onTriggerMove,
-                    onTouchEnd: onTriggerMoveEnd,
-                    onClick: ()=>{}
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    "data-testid": `${testId}-track-to`,
-                    ref: toTriggerRef,
-                    style: toStyle,
-                    className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-right",
-                    onMouseDown: (e)=>!isMobile ? onTriggerMouseDown(e, "to") : {},
-                    onTouchStart: (e)=>onTriggerMouseDown(e, "to"),
-                    onTouchMove: onTriggerMove,
-                    onTouchEnd: onTriggerMoveEnd,
-                    onClick: ()=>{}
-                })
-            ]
-        });
+    const toStyle = {
+      left: `${getTrackXByPoints(toValue)}px`
     };
-    const renderTrack = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: (0, _classnames.default)("range-slider__track", {
-                hidden: noTrack
-            }),
-            ref: trackRef,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__track__line"
-                }),
-                renderTrackRange(),
-                renderTrackTriggers()
-            ]
-        });
+    const renderTrack = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("range-slider__track", {
+          hidden: noTrack
+        }),
+        ref: trackRef
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "range-slider__track__line"
+      }), renderTrackRange(), renderTrackTriggers());
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-testid": testId,
-        className: "range-slider",
-        children: [
-            renderHeader(),
-            renderInputs(),
-            renderTrack()
-        ]
-    });
-}
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track__range-triggers"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": `${testId}-track-from`,
+      ref: fromTriggerRef,
+      style: fromStyle,
+      className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-left",
+      onMouseDown: e => !isMobile ? onTriggerMouseDown(e, "from") : {},
+      onTouchStart: e => onTriggerMouseDown(e, "from"),
+      onTouchMove: onTriggerMove,
+      onTouchEnd: onTriggerMoveEnd,
+      onClick: () => {} // DONT REMOVE! MOBILE WILL NOT WORK WITHOUT IT
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": `${testId}-track-to`,
+      ref: toTriggerRef,
+      style: toStyle,
+      className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-right",
+      onMouseDown: e => !isMobile ? onTriggerMouseDown(e, "to") : {},
+      onTouchStart: e => onTriggerMouseDown(e, "to"),
+      onTouchMove: onTriggerMove,
+      onTouchEnd: onTriggerMoveEnd,
+      onClick: () => {} // DONT REMOVE! MOBILE WILL NOT WORK WITHOUT IT
+    }));
+  };
+  const renderTrack = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("range-slider__track", {
+        hidden: noTrack
+      }),
+      ref: trackRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track__line"
+    }), renderTrackRange(), renderTrackTriggers());
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: "range-slider"
+  }, renderHeader(), renderInputs(), renderTrack());
+}