@coreui/react-pro 5.9.1 → 5.10.0

package/src/components/range-slider/CRangeSlider.tsx

@@ -137,6 +137,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
       Array.isArray(value) ? value : [value],
     )
     const [isDragging, setIsDragging] = useState(false)
+    const [_isRTL, setIsRTL] = useState(false)
     const [dragIndex, setDragIndex] = useState(0)
     const [thumbSize, setThumbSize] = useState<ThumbSize | null>()
 
@@ -146,6 +147,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
 
     useEffect(() => {
       if (rangeSliderRef.current) {
+        setIsRTL(isRTL(rangeSliderRef.current))
         setThumbSize(getThumbSize(rangeSliderRef.current, vertical))
       }
     }, [rangeSliderRef])
@@ -205,7 +207,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
     }
 
     const handleInputsContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-      if (trackRef.current === null) {
+      if (trackRef.current === null || event.button !== 0) {
         return
       }
 
@@ -216,7 +218,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
         max,
         step,
         vertical,
-        isRTL(rangeSliderRef.current),
+        _isRTL,
       )
 
       const index = getNearestValueIndex(clickValue, currentValue)
@@ -226,8 +228,8 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
       updateNearestValue(clickValue)
     }
 
-    const handleLabelClick = (value: number) => {
-      if (!clickableLabels || disabled) {
+    const handleLabelClick = (event: React.MouseEvent<HTMLDivElement>, value: number) => {
+      if (!clickableLabels || disabled || event.button !== 0) {
         return
       }
 
@@ -246,7 +248,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
         max,
         step,
         vertical,
-        isRTL(rangeSliderRef.current),
+        _isRTL,
       )
 
       const newCurrentValue = updateValue(moveValue, currentValue, distance, dragIndex)
@@ -297,14 +299,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
                 <div
                   className="range-slider-tooltip"
                   {...(thumbSize && {
-                    style: calculateTooltipPosition(
-                      min,
-                      max,
-                      value,
-                      thumbSize,
-                      vertical,
-                      isRTL(rangeSliderRef.current),
-                    ),
+                    style: calculateTooltipPosition(min, max, value, thumbSize, vertical, _isRTL),
                   })}
                 >
                   <div className="range-slider-tooltip-inner">
@@ -317,7 +312,9 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
           ))}
           <div
             className="range-slider-track"
-            {...(track && { style: updateGradient(min, max, currentValue, vertical) })}
+            {...(track && {
+              style: updateGradient(min, max, currentValue, vertical, _isRTL),
+            })}
             ref={trackRef}
           ></div>
         </div>
@@ -328,7 +325,11 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
                 const labelPosition = calculateLabelPosition(min, max, labels, label, index)
                 const labelValue = getLabelValue(min, max, labels, label, index)
                 const labelStyle = Object.assign(
-                  vertical ? { bottom: labelPosition } : { left: labelPosition },
+                  vertical
+                    ? { bottom: labelPosition }
+                    : _isRTL
+                      ? { right: labelPosition }
+                      : { left: labelPosition },
                   typeof label === 'object' && 'style' in label && label.style,
                 )
                 return (
@@ -341,7 +342,7 @@ export const CRangeSlider = forwardRef<HTMLDivElement, CRangeSliderProps>(
                       typeof label === 'object' && 'className' in label && label.className,
                     )}
                     style={labelStyle}
-                    onMouseDown={() => handleLabelClick(labelValue)}
+                    onMouseDown={(event) => handleLabelClick(event, labelValue)}
                     key={index}
                     ref={(el: HTMLDivElement) => {
                       labelsRef.current[index] = el

package/src/components/range-slider/utils.ts

@@ -174,14 +174,20 @@ export const roundToStep = (number: number, step: number) => {
   return Math.round(number / _step) * _step
 }
 
-export const updateGradient = (min: number, max: number, values: number[], vertical: boolean) => {
+export const updateGradient = (
+  min: number,
+  max: number,
+  values: number[],
+  vertical: boolean,
+  rtl: boolean,
+) => {
   const minVal = Math.min(...values)
   const maxVal = Math.max(...values)
 
   const from = ((minVal - min) / (max - min)) * 100
   const to = ((maxVal - min) / (max - min)) * 100
 
-  const direction = vertical ? 'to top' : 'to right'
+  const direction = vertical ? 'to top' : rtl ? 'to left' : 'to right'
 
   return {
     backgroundImage: