@react-aria/slider - npm Package Compare versions

Comparing version 3.0.0-nightly.2419 to 3.0.0-nightly.2424

dist/main.js

@@ -103,4 +103,5 @@ var {
   });
+  let currentPointer = useRef(undefined);
 
-  let onDownTrack = (e, clientX) => {
+  let onDownTrack = (e, id, clientX) => {
     // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
@@ -128,2 +129,3 @@ if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
         state.setFocusedThumb(index);
+        currentPointer.current = id;
         state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
@@ -140,11 +142,17 @@ state.setThumbValue(index, value);
 
-  let onUpTrack = () => {
-    if (realTimeTrackDraggingIndex.current != null) {
-      state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
-      realTimeTrackDraggingIndex.current = null;
+  let onUpTrack = e => {
+    var _e$pointerId, _e$changedTouches;
+
+    let id = (_e$pointerId = e.pointerId) != null ? _e$pointerId : (_e$changedTouches = e.changedTouches) == null ? void 0 : _e$changedTouches[0].identifier;
+
+    if (id === currentPointer.current) {
+      if (realTimeTrackDraggingIndex.current != null) {
+        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
+        realTimeTrackDraggingIndex.current = null;
+      }
+
+      removeGlobalListener(window, 'mouseup', onUpTrack, false);
+      removeGlobalListener(window, 'touchend', onUpTrack, false);
+      removeGlobalListener(window, 'pointerup', onUpTrack, false);
     }
-
-    removeGlobalListener(window, 'mouseup', onUpTrack, false);
-    removeGlobalListener(window, 'touchend', onUpTrack, false);
-    removeGlobalListener(window, 'pointerup', onUpTrack, false);
   };
@@ -162,11 +170,11 @@
       onMouseDown(e) {
-        onDownTrack(e, e.clientX);
+        onDownTrack(e, undefined, e.clientX);
       },
 
       onPointerDown(e) {
-        onDownTrack(e, e.clientX);
+        onDownTrack(e, e.pointerId, e.clientX);
       },
 
       onTouchStart(e) {
-        onDownTrack(e, e.targetTouches[0].clientX);
+        onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX);
       }
@@ -268,5 +276,7 @@
   }), inputRef);
+  let currentPointer = useRef(undefined);
 
-  let onDown = () => {
+  let onDown = id => {
     focusInput();
+    currentPointer.current = id;
     state.setThumbDragging(index, true);
@@ -278,8 +288,14 @@ addGlobalListener(window, 'mouseup', onUp, false);
 
-  let onUp = () => {
-    focusInput();
-    state.setThumbDragging(index, false);
-    removeGlobalListener(window, 'mouseup', onUp, false);
-    removeGlobalListener(window, 'touchend', onUp, false);
-    removeGlobalListener(window, 'pointerup', onUp, false);
+  let onUp = e => {
+    var _e$pointerId, _e$changedTouches;
+
+    let id = (_e$pointerId = e.pointerId) != null ? _e$pointerId : (_e$changedTouches = e.changedTouches) == null ? void 0 : _e$changedTouches[0].identifier;
+
+    if (id === currentPointer.current) {
+      focusInput();
+      state.setThumbDragging(index, false);
+      removeGlobalListener(window, 'mouseup', onUp, false);
+      removeGlobalListener(window, 'touchend', onUp, false);
+      removeGlobalListener(window, 'pointerup', onUp, false);
+    }
   }; // We install mouse handlers for the drag motion on the thumb div, but
@@ -310,5 +326,11 @@ // not the key handler for moving the thumb with the slider.  Instead,
     thumbProps: !isDisabled ? mergeProps(moveProps, {
-      onPointerDown: onDown,
-      onMouseDown: onDown,
-      onTouchStart: onDown
+      onMouseDown: () => {
+        onDown(null);
+      },
+      onPointerDown: e => {
+        onDown(e.pointerId);
+      },
+      onTouchStart: e => {
+        onDown(e.changedTouches[0].identifier);
+      }
     }) : {},
@@ -315,0 +337,0 @@ labelProps

dist/module.js

@@ -75,4 +75,5 @@ import { useFocusable } from "@react-aria/focus";
   });
+  let currentPointer = useRef(undefined);
 
-  let onDownTrack = (e, clientX) => {
+  let onDownTrack = (e, id, clientX) => {
     // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
@@ -100,2 +101,3 @@ if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
         state.setFocusedThumb(index);
+        currentPointer.current = id;
         state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
@@ -112,11 +114,17 @@ state.setThumbValue(index, value);
 
-  let onUpTrack = () => {
-    if (realTimeTrackDraggingIndex.current != null) {
-      state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
-      realTimeTrackDraggingIndex.current = null;
+  let onUpTrack = e => {
+    var _e$pointerId, _e$changedTouches;
+
+    let id = (_e$pointerId = e.pointerId) != null ? _e$pointerId : (_e$changedTouches = e.changedTouches) == null ? void 0 : _e$changedTouches[0].identifier;
+
+    if (id === currentPointer.current) {
+      if (realTimeTrackDraggingIndex.current != null) {
+        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
+        realTimeTrackDraggingIndex.current = null;
+      }
+
+      removeGlobalListener(window, 'mouseup', onUpTrack, false);
+      removeGlobalListener(window, 'touchend', onUpTrack, false);
+      removeGlobalListener(window, 'pointerup', onUpTrack, false);
     }
-
-    removeGlobalListener(window, 'mouseup', onUpTrack, false);
-    removeGlobalListener(window, 'touchend', onUpTrack, false);
-    removeGlobalListener(window, 'pointerup', onUpTrack, false);
   };
@@ -134,11 +142,11 @@
       onMouseDown(e) {
-        onDownTrack(e, e.clientX);
+        onDownTrack(e, undefined, e.clientX);
       },
 
       onPointerDown(e) {
-        onDownTrack(e, e.clientX);
+        onDownTrack(e, e.pointerId, e.clientX);
       },
 
       onTouchStart(e) {
-        onDownTrack(e, e.targetTouches[0].clientX);
+        onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX);
       }
@@ -238,5 +246,7 @@
   }), inputRef);
+  let currentPointer = useRef(undefined);
 
-  let onDown = () => {
+  let onDown = id => {
     focusInput();
+    currentPointer.current = id;
     state.setThumbDragging(index, true);
@@ -248,8 +258,14 @@ addGlobalListener(window, 'mouseup', onUp, false);
 
-  let onUp = () => {
-    focusInput();
-    state.setThumbDragging(index, false);
-    removeGlobalListener(window, 'mouseup', onUp, false);
-    removeGlobalListener(window, 'touchend', onUp, false);
-    removeGlobalListener(window, 'pointerup', onUp, false);
+  let onUp = e => {
+    var _e$pointerId, _e$changedTouches;
+
+    let id = (_e$pointerId = e.pointerId) != null ? _e$pointerId : (_e$changedTouches = e.changedTouches) == null ? void 0 : _e$changedTouches[0].identifier;
+
+    if (id === currentPointer.current) {
+      focusInput();
+      state.setThumbDragging(index, false);
+      removeGlobalListener(window, 'mouseup', onUp, false);
+      removeGlobalListener(window, 'touchend', onUp, false);
+      removeGlobalListener(window, 'pointerup', onUp, false);
+    }
   }; // We install mouse handlers for the drag motion on the thumb div, but
@@ -280,5 +296,11 @@ // not the key handler for moving the thumb with the slider.  Instead,
     thumbProps: !isDisabled ? mergeProps(moveProps, {
-      onPointerDown: onDown,
-      onMouseDown: onDown,
-      onTouchStart: onDown
+      onMouseDown: () => {
+        onDown(null);
+      },
+      onPointerDown: e => {
+        onDown(e.pointerId);
+      },
+      onTouchStart: e => {
+        onDown(e.changedTouches[0].identifier);
+      }
     }) : {},
@@ -285,0 +307,0 @@ labelProps

package.json

 {
   "name": "@react-aria/slider",
-  "version": "3.0.0-nightly.2419+975957a3",
+  "version": "3.0.0-nightly.2424+db9b0228",
   "description": "Slider",
@@ -21,11 +21,11 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.741+975957a3",
-    "@react-aria/i18n": "3.0.0-nightly.741+975957a3",
-    "@react-aria/interactions": "3.0.0-nightly.741+975957a3",
-    "@react-aria/label": "3.0.0-nightly.741+975957a3",
-    "@react-aria/utils": "3.0.0-nightly.741+975957a3",
-    "@react-stately/radio": "3.0.0-nightly.741+975957a3",
-    "@react-stately/slider": "3.0.0-nightly.2419+975957a3",
-    "@react-types/radio": "3.0.0-nightly.741+975957a3",
-    "@react-types/slider": "3.0.0-nightly.2419+975957a3"
+    "@react-aria/focus": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/i18n": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/interactions": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/label": "3.0.0-nightly.746+db9b0228",
+    "@react-aria/utils": "3.0.0-nightly.746+db9b0228",
+    "@react-stately/radio": "3.0.0-nightly.746+db9b0228",
+    "@react-stately/slider": "3.0.0-nightly.2424+db9b0228",
+    "@react-types/radio": "3.0.0-nightly.746+db9b0228",
+    "@react-types/slider": "3.0.0-nightly.2424+db9b0228"
   },
@@ -38,3 +38,3 @@ "peerDependencies": {
   },
-  "gitHead": "975957a3c3fb4a9f3be358428e0980a4d4e51c1a"
+  "gitHead": "db9b022848d4b83627aa98a0b347534bf3376ed4"
 }

src/useSlider.ts

@@ -90,3 +90,4 @@ /*
 
-  let onDownTrack = (e: React.UIEvent, clientX: number) => {
+  let currentPointer = useRef<number | null | undefined>(undefined);
+  let onDownTrack = (e: React.UIEvent, id: number, clientX: number) => {
     // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
@@ -113,2 +114,3 @@ if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
         state.setFocusedThumb(index);
+        currentPointer.current = id;
 
@@ -127,11 +129,14 @@ state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
 
-  let onUpTrack = () => {
-    if (realTimeTrackDraggingIndex.current != null) {
-      state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
-      realTimeTrackDraggingIndex.current = null;
+  let onUpTrack = (e) => {
+    let id = e.pointerId ?? e.changedTouches?.[0].identifier;
+    if (id === currentPointer.current) {
+      if (realTimeTrackDraggingIndex.current != null) {
+        state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
+        realTimeTrackDraggingIndex.current = null;
+      }
+
+      removeGlobalListener(window, 'mouseup', onUpTrack, false);
+      removeGlobalListener(window, 'touchend', onUpTrack, false);
+      removeGlobalListener(window, 'pointerup', onUpTrack, false);
     }
-
-    removeGlobalListener(window, 'mouseup', onUpTrack, false);
-    removeGlobalListener(window, 'touchend', onUpTrack, false);
-    removeGlobalListener(window, 'pointerup', onUpTrack, false);
   };
@@ -149,7 +154,7 @@
     trackProps: mergeProps({
-      onMouseDown(e: React.MouseEvent<HTMLElement>) { onDownTrack(e, e.clientX); },
-      onPointerDown(e: React.PointerEvent<HTMLElement>) { onDownTrack(e, e.clientX); },
-      onTouchStart(e: React.TouchEvent<HTMLElement>) { onDownTrack(e, e.targetTouches[0].clientX); }
+      onMouseDown(e: React.MouseEvent<HTMLElement>) { onDownTrack(e, undefined, e.clientX); },
+      onPointerDown(e: React.PointerEvent<HTMLElement>) { onDownTrack(e, e.pointerId, e.clientX); },
+      onTouchStart(e: React.TouchEvent<HTMLElement>) { onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX); }
     }, moveProps)
   };
 }

src/useSliderThumb.ts

@@ -110,4 +110,6 @@ import {clamp, focusWithoutScrolling, mergeProps, useGlobalListeners} from '@react-aria/utils';
 
-  let onDown = () => {
+  let currentPointer = useRef<number | null | undefined>(undefined);
+  let onDown = (id: number | null) => {
     focusInput();
+    currentPointer.current = id;
     state.setThumbDragging(index, true);
@@ -121,8 +123,11 @@
 
-  let onUp = () => {
-    focusInput();
-    state.setThumbDragging(index, false);
-    removeGlobalListener(window, 'mouseup', onUp, false);
-    removeGlobalListener(window, 'touchend', onUp, false);
-    removeGlobalListener(window, 'pointerup', onUp, false);
+  let onUp = (e) => {
+    let id = e.pointerId ?? e.changedTouches?.[0].identifier;
+    if (id === currentPointer.current) {
+      focusInput();
+      state.setThumbDragging(index, false);
+      removeGlobalListener(window, 'mouseup', onUp, false);
+      removeGlobalListener(window, 'touchend', onUp, false);
+      removeGlobalListener(window, 'pointerup', onUp, false);
+    }
   };
@@ -155,5 +160,5 @@
       {
-        onPointerDown: onDown,
-        onMouseDown: onDown,
-        onTouchStart: onDown
+        onMouseDown: () => {onDown(null);},
+        onPointerDown: (e: React.PointerEvent) => {onDown(e.pointerId);},
+        onTouchStart: (e: React.TouchEvent) => {onDown(e.changedTouches[0].identifier);}
       }
@@ -160,0 +165,0 @@ ) : {},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97791

increased by5.88%

Lines of code

894

increased by5.42%

Dependency changes

• Updated@react-aria/focus@3.0.0-nightly.746+db9b0228

• Updated@react-aria/i18n@3.0.0-nightly.746+db9b0228

• Updated@react-aria/interactions@3.0.0-nightly.746+db9b0228

• Updated@react-aria/label@3.0.0-nightly.746+db9b0228

• Updated@react-aria/utils@3.0.0-nightly.746+db9b0228

• Updated@react-stately/radio@3.0.0-nightly.746+db9b0228

• Updated@react-stately/slider@3.0.0-nightly.2424+db9b0228

• Updated@react-types/radio@3.0.0-nightly.746+db9b0228

• Updated@react-types/slider@3.0.0-nightly.2424+db9b0228