intelicoreact 2.0.18 → 2.0.20

package/dist/es/Atomic/FormElements/RangeSlider2/RangeSlider2.js

@@ -0,0 +1,590 @@
+import '../../../styles/base.css';
+import { compare } from "../../../Functions/utils.js";
+import useIsMobile from "../../../Functions/useIsMobile/useIsMobile.js";
+import { EAssignSide, ECollision, EPointValueType } from "./RangeSlider2.interface.js";
+import './RangeSlider2.styles.css';/* empty css                  */
+import cn from "classnames";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, Plus, X } from "react-feather";
+//#region src/Atomic/FormElements/RangeSlider2/RangeSlider2.tsx
+var COMPONENT_CLASS = "range-slider2";
+var RangeSlider2 = ({ min = 300, max = 850, minRange = 50, dividersRange = 50, pointValueType = EPointValueType.From, precision = 0, step = 5, className, value = [], onChange = () => {}, transformDataOnConcat = () => ({
+	data: [],
+	value: 0
+}) }) => {
+	const { isMobile } = useIsMobile();
+	const trackRef = useRef(null);
+	const addTriggerRef = useRef(null);
+	const [protectedValue, setProtectedValue] = useState([]);
+	const [ranges, setRanges] = useState(value);
+	const [triggers, setTriggers] = useState([]);
+	const [trackWidth, setTrackWidth] = useState(0);
+	const [trackPosition, setTrackPosition] = useState(0);
+	const [mouseTrackPosition, setMouseTrackPosition] = useState(0);
+	const [movingTrigger, setMovingTrigger] = useState(null);
+	const [movingTriggerIndex, setMovingTriggerIndex] = useState(null);
+	const [movingController, setMovingController] = useState(null);
+	const [movingTriggerData, setMovingTriggerData] = useState(null);
+	const [isTriggerMoved, setIsTriggerMoved] = useState(false);
+	const [isMouseOverTrigger, setIsMouseOverTrigger] = useState(false);
+	const [isMouseOverTrack, setIsMouseOverTrack] = useState(false);
+	const [pointsPerPx, setPointsPerPx] = useState(0);
+	const [addTriggerFixedScore, setAddTriggerFixedScore] = useState(null);
+	const [addTriggerFixedRange, setAddTriggerFixedRange] = useState(null);
+	const [isAddTriggerFixed, setIsAddTriggerFixed] = useState(false);
+	const [assignValueToRange, setAssignValueToRange] = useState(EAssignSide.Left);
+	const setMouseOverTrigger = () => setIsMouseOverTrigger(true);
+	const setMouseLeaveTrigger = () => setIsMouseOverTrigger(false);
+	const setMouseOverTrack = () => setIsMouseOverTrack(true);
+	const setMouseLeaveTrack = () => setIsMouseOverTrack(false);
+	const isTriggerMoving = (triggerIndex) => triggerIndex === movingTriggerIndex;
+	const countPointsPerPx = (width) => {
+		return (max - min) / width;
+	};
+	const fixAddTrigger = (score, inRange) => {
+		if (score !== null) {
+			setAddTriggerFixedScore(score);
+			setAddTriggerFixedRange(inRange);
+			setIsAddTriggerFixed(true);
+		}
+	};
+	const unfixAddTrigger = (e) => {
+		e?.stopPropagation();
+		e?.preventDefault();
+		setAddTriggerFixedScore(null);
+		setAddTriggerFixedRange(null);
+		setIsAddTriggerFixed(false);
+		setAssignValueToRange(EAssignSide.Left);
+	};
+	const prepareValue = (value) => {
+		return Number.parseInt((Number.parseFloat(value.toString()) * 10 ** precision).toString(), 10) / 10 ** precision;
+	};
+	const addRange = ({ from, to, label, value, data = [], id }) => setRanges((ranges) => {
+		if (!id) id = (ranges?.length + 1) * -1;
+		return [...ranges, {
+			id,
+			from,
+			to,
+			label,
+			data,
+			value: Number.isInteger(value) ? value : 0
+		}].sort((a, b) => a.from - b.from);
+	});
+	const updateRange = ({ from, to, label, value, data, id }) => setRanges((ranges) => {
+		const newRanges = [...ranges];
+		const range = newRanges?.find(({ id: rangeId }) => rangeId === id);
+		if (range) {
+			range.from = from ?? range?.from;
+			range.to = to ?? range?.to;
+			range.label = label ?? range?.label;
+			range.value = value !== void 0 ? Number.isInteger(value) ? value : 0 : range?.value;
+			range.data = data !== void 0 ? data : range?.data;
+		}
+		return newRanges;
+	});
+	const splitRange = (score) => {
+		const range = ranges?.find(({ from, to }) => from + minRange <= score + 1 && score <= to - minRange);
+		if (!range) return;
+		const { value = 0, label, data = [] } = addTriggerFixedRange || {};
+		addRange({
+			value: assignValueToRange === EAssignSide.Right ? value : 0,
+			data: assignValueToRange === EAssignSide.Right ? data : void 0,
+			label,
+			from: score + 1,
+			to: range?.to,
+			id: null
+		});
+		updateRange({
+			...range,
+			value: assignValueToRange === EAssignSide.Left ? value : 0,
+			data: assignValueToRange === EAssignSide.Left ? data : void 0,
+			label,
+			to: score
+		});
+		if (isAddTriggerFixed) unfixAddTrigger();
+	};
+	const removeRange = (id) => setRanges((ranges) => ranges?.filter((range) => range?.id !== id));
+	const concatRanges = (score) => {
+		const [left, right] = ranges?.filter(({ from, to }) => from === score + 1 || score === to);
+		const { data, value } = transformDataOnConcat(left, right);
+		updateRange({
+			from: left?.from,
+			to: right?.to,
+			id: left?.id,
+			data,
+			value
+		});
+		removeRange(right?.id);
+	};
+	const clearRanges = () => setRanges([]);
+	const addTrigger = (value, { isFixed = false, isHidden = false } = {}, { withRange = true } = {}, index = triggers.length) => setTriggers((state) => {
+		if (value === null) return state;
+		if (withRange) splitRange(value);
+		const newState = [...state];
+		const id = state?.length ? Math.max(...state?.map(({ id }) => id)) + 1 : 0;
+		newState.splice(index, 0, {
+			id,
+			value,
+			isFixed,
+			isHidden
+		});
+		return newState.sort((a, b) => a.value < b.value ? -1 : 1);
+	});
+	const updateTrigger = (index, value) => setTriggers((state) => {
+		const newState = [...state];
+		newState[index] = {
+			...newState[index],
+			value
+		};
+		return newState;
+	});
+	const removeTrigger = (index) => setTriggers((state) => {
+		concatRanges(state[index]?.value);
+		const newState = [...state];
+		newState.splice(index, 1);
+		return newState;
+	});
+	const clearTriggers = () => setTriggers([]);
+	const getTriggerByScore = (score) => {
+		if (score === null) return void 0;
+		return triggers?.find(({ value: triggerScore }) => triggerScore === score);
+	};
+	const updateRangesByTrigger = (trigger) => {
+		const newValue = triggers?.find(({ id }) => id === trigger?.id)?.value ?? 0;
+		const oldValue = trigger?.value;
+		const leftRange = ranges?.find((range) => range?.to === oldValue);
+		const rightRange = ranges?.find((range) => range?.from === oldValue + 1);
+		if (leftRange && rightRange) {
+			updateRange({
+				from: leftRange?.from,
+				to: newValue,
+				id: leftRange?.id
+			});
+			updateRange({
+				from: newValue + 1,
+				to: rightRange?.to,
+				id: rightRange?.id
+			});
+		}
+	};
+	const resetMovingTrigger = () => {
+		setTimeout(() => {
+			setMovingTrigger(null);
+			setMovingTriggerIndex(null);
+		}, 1);
+	};
+	const getTrackXByScore = (score) => {
+		if (score === null) return 0;
+		return (score - min) / pointsPerPx;
+	};
+	const getScoreByX = (x) => {
+		let points = (x - trackPosition) * pointsPerPx + min;
+		points -= points % step;
+		if (points < min) points = min;
+		if (points > max) points = max;
+		return points - 1;
+	};
+	const getTriggerCollisionDirection = (index, points) => {
+		if (index <= 0) return points;
+		const [triggerBefore, triggerAfter] = [triggers?.[index - 1]?.value + minRange - 1, triggers?.[index + 1]?.value - minRange - 1];
+		if (triggerBefore === triggerAfter) return ECollision.Both;
+		else if (points === triggerBefore) return ECollision.Left;
+		else if (points === triggerAfter) return ECollision.Right;
+		else return ECollision.None;
+	};
+	const getTriggerScore = (index, points) => {
+		if (index <= 0) return points;
+		const [triggerBefore, triggerAfter] = [triggers?.[index - 1]?.value + minRange - 1, triggers?.[index + 1]?.value - minRange - 1];
+		if (points < triggerBefore) return triggerBefore;
+		else if (points > triggerAfter) return triggerAfter;
+		else return points;
+	};
+	const getRangesList = () => {
+		return triggers.map(({ value }) => value).sort().reduce((result, score, i, scores) => {
+			if (i !== 0) result.push({
+				from: scores[i - 1],
+				to: score
+			});
+			return result;
+		}, []);
+	};
+	const getAddTriggerScore = (x) => {
+		const score = getScoreByX(x);
+		let result = getRangesList()?.reduce((result, { from, to }) => {
+			if (to - from + 1 <= 2 * minRange && from <= score && score <= to) return null;
+			if (from <= score && score <= from + minRange) return from + minRange - 1;
+			else if (to - minRange <= score && score <= to) return to - minRange - 1;
+			else return result;
+		}, score);
+		if (!result) {
+			const closestRange = getRangesList()?.filter(({ from, to }) => to - from + 1 >= 2 * minRange)?.reduce((result, range) => {
+				const distance = Math.abs((range.to + range.from) / 2 - score);
+				if (!result || distance < result?.distance) return {
+					...range,
+					distance
+				};
+				return result;
+			}, null);
+			if (closestRange) {
+				if (closestRange?.to < score) result = closestRange?.to - minRange - 1;
+				if (score < closestRange?.from) result = closestRange?.from + minRange - 1;
+			}
+		}
+		return result;
+	};
+	const getInRange = (score) => {
+		return ranges?.find(({ from, to }) => score !== null && from <= score && score <= to);
+	};
+	const getAddTriggerCollisionDirection = (x) => {
+		const triggerScore = getAddTriggerScore(x);
+		const inRange = getInRange(triggerScore);
+		if (!inRange) return 0;
+		const { from, to } = inRange;
+		const triggerBefore = from + minRange - 1;
+		const triggerAfter = to - minRange - 1;
+		if (triggerBefore === triggerAfter) return ECollision.Both;
+		else if (triggerScore !== null && triggerScore <= triggerBefore) return ECollision.Left;
+		else if (triggerScore !== null && triggerScore >= triggerAfter) return ECollision.Right;
+		else return ECollision.None;
+	};
+	const getAddTriggerPosition = () => {
+		return isAddTriggerFixed ? getTrackXByScore(addTriggerFixedScore ?? 0) : mouseTrackPosition;
+	};
+	const getPointValue = (score) => {
+		if (score === null) return "";
+		switch (pointValueType) {
+			case EPointValueType.From: return `${score + 1}`;
+			case EPointValueType.To: return `${score}`;
+			case EPointValueType.Both:
+			default: return `${score} | ${score + 1}`;
+		}
+	};
+	const onRangeChange = (index, value, validate = true) => {
+		if (validate) value = prepareValue(value);
+		if (Number.isNaN(value)) value = 0;
+		updateTrigger(index, value);
+	};
+	const onTriggerMouseDown = (e, index) => {
+		setMovingTrigger(e.target);
+		setMovingTriggerIndex(index);
+		setMovingTriggerData({ ...triggers[index] });
+	};
+	const onTriggerMove = (e) => {
+		if (e?.cancelable) e?.preventDefault();
+		e?.stopPropagation();
+		if (!movingTriggerIndex || !movingTrigger) return false;
+		if (!isTriggerMoved) setIsTriggerMoved(true);
+		const x = ("touches" in e ? e.touches?.[0] : void 0)?.clientX ?? ("clientX" in e ? e.clientX : 0);
+		const { width: triggerWidth } = movingTrigger?.getBoundingClientRect() || {};
+		if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
+		const triggerPoints = getTriggerScore(movingTriggerIndex, getScoreByX(x));
+		onRangeChange(movingTriggerIndex, triggerPoints);
+		return true;
+	};
+	useEffect(() => {
+		if (isMobile) document.addEventListener("touchend", resetMovingTrigger);
+		else document.addEventListener("mouseup", resetMovingTrigger);
+		return () => {
+			if (isMobile) document.removeEventListener("touchend", resetMovingTrigger);
+			else document.removeEventListener("mouseup", resetMovingTrigger);
+		};
+	}, []);
+	useEffect(() => {
+		if (!movingTrigger && isTriggerMoved) {
+			movingController?.abort();
+			setIsTriggerMoved(false);
+			setMovingController(null);
+		} else if (movingTrigger && !isTriggerMoved) setMovingController(new AbortController());
+		document.getElementsByTagName("body")[0].classList?.[movingTrigger ? "add" : "remove"]("moving-cursor");
+	}, [movingTrigger]);
+	useEffect(() => {
+		if (movingController) if (isMobile) document.addEventListener("touchmove", onTriggerMove, { signal: movingController?.signal });
+		else document.addEventListener("mousemove", onTriggerMove, { signal: movingController?.signal });
+		return () => {
+			if (isMobile) document.removeEventListener("touchmove", onTriggerMove);
+			else document.removeEventListener("mousemove", onTriggerMove);
+		};
+	}, [movingController]);
+	useLayoutEffect(() => {
+		const { width = 0, x = 0 } = trackRef?.current?.getBoundingClientRect() || {};
+		setPointsPerPx(countPointsPerPx(width));
+		setTrackWidth(width);
+		setTrackPosition(x);
+	}, [trackRef]);
+	useEffect(() => {
+		onChange(ranges, triggers);
+	}, [ranges]);
+	useEffect(() => {
+		clearRanges();
+		clearTriggers();
+		if (protectedValue?.length === 0) {
+			addRange({
+				from: min,
+				to: max
+			});
+			addTrigger(min, {
+				isFixed: true,
+				isHidden: true
+			});
+			addTrigger(max, {
+				isFixed: true,
+				isHidden: true
+			});
+		} else protectedValue?.reduce((result, range) => {
+			addRange({ ...range });
+			if (!result.find((score) => score === range?.from)) result.splice(result?.length - 1, 0, range?.from);
+			if (!result.find((score) => score === range?.to)) result.splice(result?.length - 1, 0, range?.to);
+			return result;
+		}, [])?.sort((a, b) => a < b ? -1 : 1)?.filter((item, i, arr) => i === 0 || item - 1 !== arr[i - 1])?.map((score, i, triggers) => {
+			if (i === 0 || score - 1 !== triggers[i - 1]) {
+				const isExtremum = score === min || score === max;
+				addTrigger(score, {
+					isFixed: isExtremum,
+					isHidden: isExtremum
+				}, { withRange: false });
+			}
+			return score;
+		});
+	}, [protectedValue]);
+	useEffect(() => {
+		if (!compare(value, protectedValue)) setProtectedValue(value);
+	}, [value]);
+	useEffect(() => {
+		if (!movingTriggerIndex && movingTriggerData) {
+			updateRangesByTrigger({ ...movingTriggerData });
+			setMovingTriggerData(null);
+		}
+	}, [movingTriggerIndex]);
+	const renderCollision = ({ isCollisionVisible, isLeftCollision, isRightCollision, isBothCollision, className }) => {
+		const pieces = Number.parseInt(((max - min) / minRange).toString(), 10);
+		const { width: trackWidth = 0 } = trackRef?.current?.getBoundingClientRect() ?? {};
+		const collisionWidth = trackWidth / pieces - 4;
+		const width = isCollisionVisible ? isBothCollision ? collisionWidth * 2 : isLeftCollision || isRightCollision ? collisionWidth : 0 : 0;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("collision", className, {
+				"collision--visible": isCollisionVisible,
+				"collision--left": isLeftCollision && !isBothCollision,
+				"collision--right": isRightCollision && !isBothCollision,
+				"collision--both": isBothCollision
+			}),
+			style: { width }
+		});
+	};
+	const renderAddTrackTriggerSettings = () => {
+		const { label, value } = addTriggerFixedRange || {};
+		return /* @__PURE__ */ jsxs("div", {
+			className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body`,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--assign-left`,
+						onClick: (e) => {
+							e.stopPropagation();
+							setAssignValueToRange(EAssignSide.Left);
+						},
+						"attr-is-active": `${assignValueToRange === EAssignSide.Left}`,
+						children: /* @__PURE__ */ jsx(ChevronLeft, {})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--lenders-count`,
+						children: [label, value]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--assign-right`,
+						onClick: (e) => {
+							e.stopPropagation();
+							setAssignValueToRange(EAssignSide.Right);
+						},
+						"attr-is-active": `${assignValueToRange === EAssignSide.Right}`,
+						children: /* @__PURE__ */ jsx(ChevronRight, {})
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--cancel`,
+					onClick: (e) => unfixAddTrigger(e),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("div", {
+					className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--apply`,
+					onClick: (e) => {
+						e.stopPropagation();
+						addTrigger(addTriggerFixedScore);
+					},
+					children: "Apply"
+				})]
+			})]
+		});
+	};
+	const renderAddTrackTrigger = () => {
+		const isNoTriggers = !triggers?.filter(({ isHidden }) => !isHidden).length;
+		const x = getAddTriggerPosition();
+		const score = isAddTriggerFixed ? addTriggerFixedScore : isNoTriggers && !isMouseOverTrack ? (min + max) / 2 - 1 : getAddTriggerScore(x);
+		const triggerCollision = !isAddTriggerFixed ? getAddTriggerCollisionDirection(x) : ECollision.None;
+		const isLeftCollision = triggerCollision === ECollision.Left;
+		const isRightCollision = triggerCollision === ECollision.Right;
+		const isBothCollision = triggerCollision === ECollision.Both;
+		const isCollisionVisible = (isLeftCollision || isRightCollision || isBothCollision) && !(isNoTriggers && !isMouseOverTrack);
+		const left = getTrackXByScore(score);
+		const inRange = getInRange(score);
+		if (getTriggerByScore(score) || movingTrigger || isMouseOverTrigger) return null;
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn(`${COMPONENT_CLASS}__track__range-triggers--add-trigger`, {
+				[`${COMPONENT_CLASS}__track__range-triggers--add-trigger--fixed`]: isAddTriggerFixed,
+				[`${COMPONENT_CLASS}__track__range-triggers--add-trigger--force-visible`]: isNoTriggers,
+				[`${COMPONENT_CLASS}__track__range-triggers--add-trigger--moved-smoothly`]: isNoTriggers && !isMouseOverTrack
+			}),
+			style: { left: `${left}px` },
+			onClick: () => inRange?.value ? fixAddTrigger(score, inRange) : addTrigger(score),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					ref: addTriggerRef,
+					className: cn(`${COMPONENT_CLASS}__track__range-triggers--add-trigger__point`, { [`${COMPONENT_CLASS}__track__range-triggers--add-trigger__point--shake`]: isCollisionVisible }),
+					"data-point-value": getPointValue(score),
+					children: /* @__PURE__ */ jsx(Plus, {})
+				}),
+				isAddTriggerFixed && renderAddTrackTriggerSettings(),
+				renderCollision({
+					isCollisionVisible,
+					isLeftCollision,
+					isRightCollision,
+					isBothCollision
+				})
+			]
+		});
+	};
+	const renderTrackTrigger = ({ value: triggerScore, isFixed, isHidden }, triggerIndex) => {
+		const triggerCollision = getTriggerCollisionDirection(triggerIndex, triggerScore);
+		const isLeftCollision = triggerCollision === ECollision.Left;
+		const isRightCollision = triggerCollision === ECollision.Right;
+		const isBothCollision = triggerCollision === ECollision.Both;
+		const isCurrentTriggerMoving = isTriggerMoving(triggerIndex);
+		const isCollisionVisible = isCurrentTriggerMoving && isTriggerMoved && (isLeftCollision || isRightCollision || isBothCollision);
+		return /* @__PURE__ */ jsxs("div", {
+			style: { left: getTrackXByScore(triggerScore).toString().concat("px") },
+			className: cn(`${COMPONENT_CLASS}__track__range-triggers--trigger`, {
+				[`${COMPONENT_CLASS}__track__range-triggers--trigger__moving`]: isCurrentTriggerMoving,
+				[`${COMPONENT_CLASS}__track__range-triggers--trigger__fixed`]: isFixed,
+				[`${COMPONENT_CLASS}__track__range-triggers--trigger__hidden`]: isHidden
+			}),
+			...isMobile ? {} : {
+				onMouseOver: setMouseOverTrigger,
+				onMouseLeave: setMouseLeaveTrigger
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn(`${COMPONENT_CLASS}__track__range-triggers--trigger__point`, { [`${COMPONENT_CLASS}__track__range-triggers--trigger__point--shake`]: isCollisionVisible }),
+					"data-point-value": getPointValue(triggerScore),
+					...isMobile ? {
+						onTouchStart: (e) => onTriggerMouseDown(e, triggerIndex),
+						onTouchEnd: resetMovingTrigger
+					} : {
+						onMouseDown: (e) => onTriggerMouseDown(e, triggerIndex),
+						onMouseUp: resetMovingTrigger
+					}
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn(`${COMPONENT_CLASS}__track__range-triggers--trigger__actions`, { [`${COMPONENT_CLASS}__track__range-triggers--trigger__actions--hidden`]: isCurrentTriggerMoving }),
+					children: /* @__PURE__ */ jsx("div", {
+						className: `${COMPONENT_CLASS}__track__range-triggers--trigger__actions--remove`,
+						onClick: () => removeTrigger(triggerIndex),
+						children: /* @__PURE__ */ jsx(X, {})
+					})
+				}),
+				renderCollision({
+					isCollisionVisible,
+					isLeftCollision,
+					isRightCollision,
+					isBothCollision,
+					className: `${COMPONENT_CLASS}__track__range-triggers--trigger__collision`
+				})
+			]
+		}, `${COMPONENT_CLASS}__track__range-triggers--trigger-${triggerIndex}`);
+	};
+	const renderTrackTriggers = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: `${COMPONENT_CLASS}__track__range-triggers`,
+			children: triggers?.map(renderTrackTrigger)
+		});
+	};
+	const renderRangeValue = ({ from, to, label, value }, rangeIndex) => {
+		if (!value) return null;
+		const left = getTrackXByScore((to + from) / 2);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn(`${COMPONENT_CLASS}__track__ranges-value--item`),
+			style: { left: `${left}px` },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn(`${COMPONENT_CLASS}__track__ranges-value--item__label`),
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn(`${COMPONENT_CLASS}__track__ranges-value--item__value`),
+				children: value
+			})]
+		}, `${COMPONENT_CLASS}__track__ranges-value--item-${rangeIndex}`);
+	};
+	const renderRangesValue = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: cn(`${COMPONENT_CLASS}__track__ranges-value`),
+			children: ranges?.map((range, i) => renderRangeValue(range, i))
+		});
+	};
+	const renderTrackDividers = useMemo(() => {
+		const renderTrackDivider = (key = 0) => /* @__PURE__ */ jsx("div", { className: `${COMPONENT_CLASS}__track__line__dividers--item` }, key);
+		const dividersCount = Number.parseInt(((max - min) / dividersRange).toString(), 10);
+		const dividers = [];
+		for (let i = 0; i < dividersCount; ++i) dividers.push(renderTrackDivider(i));
+		return /* @__PURE__ */ jsx("div", {
+			className: `${COMPONENT_CLASS}__track__line__dividers`,
+			children: dividers
+		});
+	}, [
+		trackRef,
+		minRange,
+		min,
+		max
+	]);
+	const renderTrackLine = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: `${COMPONENT_CLASS}__track__line`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: `${COMPONENT_CLASS}__track__line__extremum--min`,
+					children: min
+				}),
+				renderTrackDividers,
+				/* @__PURE__ */ jsx("div", {
+					className: `${COMPONENT_CLASS}__track__line__extremum--max`,
+					children: max
+				})
+			]
+		});
+	};
+	const renderTrack = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn(`${COMPONENT_CLASS}__track`, className),
+			ref: trackRef,
+			children: [
+				renderTrackLine(),
+				renderAddTrackTrigger(),
+				renderTrackTriggers(),
+				renderRangesValue()
+			]
+		});
+	};
+	const render = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: COMPONENT_CLASS,
+			onMouseOver: setMouseOverTrack,
+			onMouseLeave: setMouseLeaveTrack,
+			onMouseMove: (e) => setMouseTrackPosition(e?.clientX),
+			children: renderTrack()
+		});
+	};
+	return render();
+};
+//#endregion
+export { RangeSlider2 as default };
+
+//# sourceMappingURL=RangeSlider2.js.map