@lumx/react 4.20.0 → 4.20.1-next.0

package/index.js

@@ -19487,6 +19487,27 @@ const computeValueFromPercent = (percent, min, max, precision = 0) => Number((mi
  */
 const computePercentFromValue = (value, min, max) => Number((value - min) / (max - min));
 
+/**
+ * Type guard checking whether an event is a touch event (native or React synthetic).
+ *
+ * @param event The interaction event.
+ * @return Whether the event is a touch event.
+ */
+const isTouchEvent = event => 'touches' in event;
+
+/**
+ * Read the horizontal page position from either a mouse or touch event.
+ *
+ * @param event The interaction event.
+ * @return The page X position.
+ */
+const getPageX = event => {
+  if (isTouchEvent(event)) {
+    return (event.touches[0] ?? event.changedTouches[0]).pageX;
+  }
+  return event.pageX;
+};
+
 /**
  * Slider component.
  *
@@ -19571,7 +19592,7 @@ const Slider = forwardRef((props, ref) => {
       width,
       left
     } = slider.getBoundingClientRect();
-    let percent = (event.pageX - left - window.pageXOffset) / width;
+    let percent = (getPageX(event) - left - window.pageXOffset) / width;
     percent = clamp(percent, 0, 1);
     if (steps) {
       percent = findClosestStep(percent);
@@ -19580,19 +19601,22 @@ const Slider = forwardRef((props, ref) => {
   };
 
   /**
-   * Register a handler for the mouse move event.
+   * Register a handler for the mouse/touch move event.
    */
   const handleMove = useEventCallback(event => {
     const {
       current: slider
     } = sliderRef;
     if (!slider || !onChange) return;
+    if (isTouchEvent(event)) {
+      event.preventDefault();
+    }
     const newValue = getPercentValue(event, slider);
     onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
   });
 
   /**
-   * Register a handler for the mouse up event.
+   * Register a handler for the mouse up/touch end/touch cancel event.
    * Clean a all listeners.
    */
   const handleEnd = useEventCallback(() => {
@@ -19600,6 +19624,7 @@ const Slider = forwardRef((props, ref) => {
     document.body.removeEventListener('mouseup', handleEnd);
     document.body.removeEventListener('touchmove', handleMove);
     document.body.removeEventListener('touchend', handleEnd);
+    document.body.removeEventListener('touchcancel', handleEnd);
   });
 
   /**
@@ -19645,6 +19670,25 @@ const Slider = forwardRef((props, ref) => {
     document.body.addEventListener('mousemove', handleMove);
     document.body.addEventListener('mouseup', handleEnd);
   });
+
+  /**
+   * Register a handler for the touchStart event.
+   */
+  const handleTouchStart = useEventCallback(event => {
+    const {
+      current: slider
+    } = sliderRef;
+    if (isAnyDisabled || !slider) return;
+    const newValue = getPercentValue(event, slider);
+    if (onChange) {
+      onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
+    }
+    document.body.addEventListener('touchmove', handleMove, {
+      passive: false
+    });
+    document.body.addEventListener('touchend', handleEnd);
+    document.body.addEventListener('touchcancel', handleEnd);
+  });
   const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
@@ -19654,6 +19698,7 @@ const Slider = forwardRef((props, ref) => {
       'has-label': Boolean(label)
     })),
     onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
     children: [label && /*#__PURE__*/jsx(InputLabel, {
       id: sliderLabelId,
       htmlFor: sliderId,