[WC-3211] update slider and range slider

packages/pluggableWidgets/range-slider-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Breaking changes
+
+- We updated rc-slider library to @rc-component/slider. This is a major version upgrade of rc-slider that might break current custom styling.
+
 ## [2.1.4] - 2024-08-28
 
 ### Changed

packages/pluggableWidgets/range-slider-web/package.json

@@ -44,9 +44,9 @@
     },
     "dependencies": {
         "@mendix/widget-plugin-component-kit": "workspace:*",
-        "classnames": "^2.5.1",
-        "rc-slider": "^8.7.1",
-        "rc-tooltip": "^3.7.3"
+        "@rc-component/slider": "^1.0.1",
+        "@rc-component/tooltip": "^1.3.3",
+        "classnames": "^2.5.1"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

packages/pluggableWidgets/range-slider-web/src/RangeSlider.tsx

@@ -1,10 +1,15 @@
-import { ReactNode } from "react";
+import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
+import { Fragment, ReactNode } from "react";
 import { RangeSliderContainerProps } from "../typings/RangeSliderProps";
-import "rc-slider/assets/index.css";
-import "rc-tooltip/assets/bootstrap.css";
-import "./ui/RangeSlider.scss";
 import { Container } from "./components/Container";
+import "./ui/RangeSlider.scss";
 
 export function RangeSlider(props: RangeSliderContainerProps): ReactNode {
-    return <Container {...props} />;
+    return (
+        <Fragment>
+            <Container {...props} />
+            <ValidationAlert>{props.lowerBoundAttribute.validation}</ValidationAlert>
+            <ValidationAlert>{props.upperBoundAttribute.validation}</ValidationAlert>
+        </Fragment>
+    );
 }

packages/pluggableWidgets/range-slider-web/src/components/Container.tsx

@@ -3,10 +3,10 @@ import { RangeSliderContainerProps } from "../../typings/RangeSliderProps";
 import { useNumber } from "../utils/useNumber";
 import { RangeSlider as RangeComponent } from "./RangeSlider";
 import { useOnChangeDebounced } from "../utils/useOnChangeDebounced";
-import { createHandleGenerator } from "../utils/createHandleGenerator";
 import { useMarks } from "../utils/useMarks";
 import { getStyleProp, isVertical, maxProp, minProp, stepProp } from "../utils/prop-utils";
 import { useScheduleUpdateOnce } from "@mendix/widget-plugin-hooks/useScheduleUpdateOnce";
+import { HandleTooltip } from "./TooltipHandler";
 
 export function Container(props: RangeSliderContainerProps): ReactElement {
     const min = useNumber(minProp(props));
@@ -54,15 +54,8 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
         heightUnit: props.heightUnit
     });
 
-    const handle = createHandleGenerator({
-        tooltipLower: props.tooltipLower,
-        tooltipUpper: props.tooltipUpper,
-        showTooltip: props.showTooltip,
-        tooltipTypeLower: props.tooltipTypeLower,
-        tooltipTypeUpper: props.tooltipTypeUpper,
-        tooltipAlwaysVisible: props.tooltipAlwaysVisible,
-        sliderRef
-    });
+    const tooltipTypeCheck = [props.tooltipTypeLower, props.tooltipTypeUpper];
+    const tooltipValue = [props.tooltipLower, props.tooltipUpper];
 
     useScheduleUpdateOnce(() => lowerBoundAttribute.status === "available");
 
@@ -78,7 +71,21 @@ function InnerContainer(props: InnerContainerProps): ReactElement {
             marks={marks}
             min={props.min}
             max={props.max}
-            handle={handle}
+            handleRender={(node, handleProps) => {
+                const isCustomText = tooltipTypeCheck[handleProps.index] === "customText";
+                const displayValue = isCustomText ? (tooltipValue[handleProps.index]?.value ?? "") : handleProps.value;
+                return (
+                    <HandleTooltip
+                        value={displayValue}
+                        index={handleProps.index}
+                        visible={handleProps.dragging && props.showTooltip}
+                        sliderRef={sliderRef}
+                        {...props}
+                    >
+                        {node}
+                    </HandleTooltip>
+                );
+            }}
             ref={sliderRef}
         />
     );

packages/pluggableWidgets/range-slider-web/src/components/RangeSlider.tsx

@@ -1,8 +1,7 @@
 import { CSSProperties, forwardRef, ReactElement, RefObject } from "react";
-import { Range, RangeProps } from "rc-slider";
+import Slider, { SliderProps } from "@rc-component/slider";
 import classNames from "classnames";
-
-export interface RangeSliderProps extends RangeProps {
+export interface RangeSliderProps extends SliderProps {
     classNameSlider?: string;
     rootStyle?: CSSProperties;
 }
@@ -23,7 +22,7 @@ export const RangeSlider = forwardRef(
                 className
             )}
         >
-            <Range className={classNameSlider} {...rcRangeProps} />
+            <Slider range className={classNameSlider} {...rcRangeProps} />
         </div>
     )
 );

packages/pluggableWidgets/range-slider-web/src/components/TooltipHandler.tsx

@@ -0,0 +1,33 @@
+import Tooltip from "@rc-component/tooltip";
+import { ReactElement, RefObject } from "react";
+
+interface HandleTooltipProps {
+    showTooltip: boolean;
+    tooltipAlwaysVisible: boolean;
+    sliderRef: RefObject<HTMLDivElement | null>;
+    visible: boolean;
+    value: string | number;
+    index: number;
+    children: ReactElement;
+}
+
+export function HandleTooltip(props: HandleTooltipProps): ReactElement | null {
+    const { showTooltip, tooltipAlwaysVisible, sliderRef, visible, value, index, children } = props;
+    if (!showTooltip && !sliderRef.current) {
+        return null;
+    }
+    return (
+        <Tooltip
+            getTooltipContainer={() => sliderRef.current!}
+            prefixCls="rc-slider-tooltip"
+            overlay={value}
+            trigger={["hover", "click", "focus"]}
+            visible={tooltipAlwaysVisible || visible}
+            placement="top"
+            mouseLeaveDelay={0}
+            key={`${index}${value}`}
+        >
+            {children}
+        </Tooltip>
+    );
+}

packages/pluggableWidgets/range-slider-web/src/components/__tests__/__snapshots__/RangeSlider.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
     class="widget-range-slider"
   >
     <div
-      class="rc-slider"
+      class="rc-slider rc-slider-horizontal"
     >
       <div
         class="rc-slider-rail"
@@ -20,6 +20,7 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
       />
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="100"
         aria-valuemin="-100"
         aria-valuenow="-20"
@@ -30,6 +31,7 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
       />
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="100"
         aria-valuemin="-100"
         aria-valuenow="30"
@@ -38,9 +40,6 @@ exports[`RangeSlider renders horizontal RangeSlider correctly 1`] = `
         style="left: 65%; transform: translateX(-50%);"
         tabindex="0"
       />
-      <div
-        class="rc-slider-mark"
-      />
     </div>
   </div>
 </DocumentFragment>
@@ -52,7 +51,7 @@ exports[`RangeSlider renders markers correctly 1`] = `
     class="widget-range-slider"
   >
     <div
-      class="rc-slider rc-slider-with-marks"
+      class="rc-slider rc-slider-horizontal rc-slider-with-marks"
     >
       <div
         class="rc-slider-rail"
@@ -66,27 +65,28 @@ exports[`RangeSlider renders markers correctly 1`] = `
       >
         <span
           class="rc-slider-dot"
-          style="left: 0%;"
+          style="left: 0%; transform: translateX(-50%);"
         />
         <span
           class="rc-slider-dot"
-          style="left: 25%;"
+          style="left: 25%; transform: translateX(-50%);"
         />
         <span
           class="rc-slider-dot rc-slider-dot-active"
-          style="left: 50%;"
+          style="left: 50%; transform: translateX(-50%);"
         />
         <span
           class="rc-slider-dot"
-          style="left: 75%;"
+          style="left: 75%; transform: translateX(-50%);"
         />
         <span
           class="rc-slider-dot"
-          style="left: 100%;"
+          style="left: 100%; transform: translateX(-50%);"
         />
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="100"
         aria-valuemin="-100"
         aria-valuenow="-20"
@@ -97,6 +97,7 @@ exports[`RangeSlider renders markers correctly 1`] = `
       />
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="100"
         aria-valuemin="-100"
         aria-valuenow="30"
@@ -110,31 +111,31 @@ exports[`RangeSlider renders markers correctly 1`] = `
       >
         <span
           class="rc-slider-mark-text"
-          style="transform: translateX(-50%); left: 0%;"
+          style="left: 0%; transform: translateX(-50%);"
         >
           -100
         </span>
         <span
           class="rc-slider-mark-text"
-          style="transform: translateX(-50%); left: 25%;"
+          style="left: 25%; transform: translateX(-50%);"
         >
           -50
         </span>
         <span
           class="rc-slider-mark-text rc-slider-mark-text-active"
-          style="transform: translateX(-50%); left: 50%;"
+          style="left: 50%; transform: translateX(-50%);"
         >
           0
         </span>
         <span
           class="rc-slider-mark-text"
-          style="transform: translateX(-50%); left: 75%;"
+          style="left: 75%; transform: translateX(-50%);"
         >
           50
         </span>
         <span
           class="rc-slider-mark-text"
-          style="transform: translateX(-50%); left: 100%;"
+          style="left: 100%; transform: translateX(-50%);"
         >
           100
         </span>
@@ -164,27 +165,26 @@ exports[`RangeSlider renders vertical RangeSlider correctly 1`] = `
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="-100"
         aria-valuenow="-20"
         class="rc-slider-handle rc-slider-handle-1"
         role="slider"
-        style="bottom: 40%; transform: translateY(+50%);"
+        style="bottom: 40%; transform: translateY(50%);"
         tabindex="0"
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="-100"
         aria-valuenow="30"
         class="rc-slider-handle rc-slider-handle-2"
         role="slider"
-        style="bottom: 65%; transform: translateY(+50%);"
+        style="bottom: 65%; transform: translateY(50%);"
         tabindex="0"
       />
-      <div
-        class="rc-slider-mark"
-      />
     </div>
   </div>
 </DocumentFragment>

packages/pluggableWidgets/range-slider-web/src/ui/RangeSlider.scss

@@ -1,5 +1,5 @@
-@use "~rc-slider/assets/index.css";
-@use "~rc-tooltip/assets/bootstrap.css";
+@use "~@rc-component/slider/assets/index.css";
+@use "~@rc-component/tooltip/assets/bootstrap.css";
 
 .widget-range-slider {
     padding: 4px 8px;
@@ -10,6 +10,10 @@
         background-color: initial;
     }
 
+    .rc-slider-handle {
+        opacity: 1;
+    }
+
     &.widget-range-slider-vertical {
         height: 100%;
     }