intelicoreact 1.5.33 → 1.5.35

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

@@ -1,400 +1,482 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-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"));
+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"));
 require("./RangeSlider.scss");
-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 && Object.prototype.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; }
+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;
+}
 let timer;
 const DEBOUNCE_TIME = 800;
-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 debounce(func, timeout = DEBOUNCE_TIME) {
+    return (...args)=>{
+        clearTimeout(timer);
+        timer = setTimeout(()=>{
+            func.apply(this, args);
+        }, timeout);
+    };
 }
-function RangeSlider(_ref) {
-  var _value$from, _value$to;
-  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 = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from !== void 0 ? _value$from : min);
-  const setFrom = v => setFromValue(prepareValue(v));
-  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 = 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);
+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;
         }
-        validate ? setFrom(value) : setFromValue(value);
-        if (!isTriggerMoved && callOnChange) {
-          debounce(() => {
-            const values = {
-              from: prepareValue(getValidatedFromValue(value)),
-              to
-            };
-            onChange(values);
-            setFrezeedValues(values);
-          }, DEBOUNCE_TIME)();
+    };
+    // 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();
         }
-        break;
-      case "to":
-        const getValidatedToValue = value => {
-          if (!value && value !== 0 || value > max) {
-            value = max;
-          }
-          if (value < from + minRange) {
-            value = from + minRange;
-          }
-          return value;
+        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);
         };
-        if (validate) {
-          value = getValidatedToValue(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
+            });
         }
-        validate ? setTo(value) : setToValue(value);
-        if (!isTriggerMoved && callOnChange) {
-          debounce(() => {
-            const values = {
-              from,
-              to: prepareValue(getValidatedToValue(value))
-            };
-            onChange(values);
-            setFrezeedValues(values);
-          }, DEBOUNCE_TIME)();
+    }, [
+        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
+            });
         }
-        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 => {
-    var _e$touches;
-    if (!isMobile) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    if (!isTriggerMoved) setIsTriggerMoved(true);
-    if (!movingTrigger) return false;
-    let {
-      clientX: x
-    } = isMobile ? e === null || e === 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$from2, _value$to2;
-    onRangeChange("from", (_value$from2 = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from2 !== void 0 ? _value$from2 : max, true, false);
-    onRangeChange("to", (_value$to2 = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to2 !== void 0 ? _value$to2 : min, true, false);
-  }, []);
-
-  /// MouseUp Event Controller
-  (0, _react.useEffect)(() => {
-    document.addEventListener("mouseup", onTriggerMoveEnd);
-    return () => {
-      document.removeEventListener("mouseup", onTriggerMoveEnd);
+        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
+            });
+        }
+    }, [
+        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: "*"
+                })
+            ]
+        });
     };
-  }, []);
-
-  // MouseMove Event Controller
-  (0, _react.useEffect)(() => {
-    // Прекратить обработку, если нет активного триггера или не было движения
-    if (!movingTrigger || !isTriggerMoved) return;
-    const handleMouseMove = e => {
-      onTriggerMove(e);
+    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, {})
+                })
+            ]
+        });
     };
-    document.addEventListener("mousemove", handleMouseMove);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
+    const renderHeader = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "range-slider__header",
+            children: [
+                renderLabel(),
+                min !== fromValue || max !== toValue ? renderSelectedRange() : null
+            ]
+        });
     };
-  }, [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 (isTriggerMoved) setFrezeedValues({
-      from,
-      to
-    });
-  }, [from, to, isTriggerMoved]);
-  (0, _react.useLayoutEffect)(() => {
-    setFrom(value.from);
-    setTo(value.to);
-  }, [value]);
-  (0, _react.useLayoutEffect)(() => {
-    var _trackRef$current, _fromTriggerRef$curre, _toTriggerRef$current;
-    let {
-      width,
-      x
-    } = (trackRef === null || trackRef === void 0 || (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect()) || {};
-    width -= (fromTriggerRef === null || fromTriggerRef === void 0 || (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 || (_fromTriggerRef$curre = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre === void 0 ? void 0 : _fromTriggerRef$curre.width) || (toTriggerRef === null || toTriggerRef === void 0 || (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 || (_toTriggerRef$current = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current === void 0 ? void 0 : _toTriggerRef$current.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": "".concat(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": "".concat(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: "".concat(getRangeWidth(), "px"),
-      left: "".concat(getRangeOffset(), "px")
+    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
+                    })
+                })
+            ]
+        });
     };
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "range-slider__track__range",
-      style: style
-    });
-  };
-  const renderTrackTriggers = () => {
-    const fromStyle = {
-      left: "".concat(getTrackXByPoints(fromValue), "px")
+    const renderTrackRange = ()=>{
+        const style = {
+            width: `${getRangeWidth()}px`,
+            left: `${getRangeOffset()}px`
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "range-slider__track__range",
+            style: style
+        });
     };
-    const toStyle = {
-      left: "".concat(getTrackXByPoints(toValue), "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 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());
+    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__*/_react.default.createElement("div", {
-      className: "range-slider__track__range-triggers"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "".concat(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": "".concat(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());
-}
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: "range-slider",
+        children: [
+            renderHeader(),
+            renderInputs(),
+            renderTrack()
+        ]
+    });
+}