@yogiswara/honcho-editor-ui 2.10.10 → 2.10.11

package/dist/components/editor/sliderComponents/useSliderEvents.d.ts

@@ -1 +1,2 @@
-export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): import("react").RefObject<HTMLSpanElement>;
+import React from "react";
+export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): React.RefObject<HTMLSpanElement>;

package/dist/components/editor/sliderComponents/useSliderEvents.js

@@ -2,36 +2,31 @@ import { useEffect, useRef } from "react";
 export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
     const sliderRef = useRef(null);
     useEffect(() => {
-        const sliderElement = sliderRef.current;
-        if (!sliderElement)
+        const slider = sliderRef.current;
+        if (!slider)
             return;
-        const handleStart = (e) => {
-            // THE FIX: Stop the event from bubbling up and causing conflicts.
-            e.stopPropagation();
+        // A single handler for starting the drag
+        const handleStart = () => {
             if (!isBatchMode) {
                 onDragStart();
             }
-            // Add "end" listeners to the whole document when a drag starts
-            document.addEventListener("mouseup", handleEnd);
-            document.addEventListener("touchend", handleEnd);
         };
-        const handleEnd = (e) => {
-            // It's good practice to also stop propagation on the end event
-            e.stopPropagation();
+        // A single handler for ending the drag
+        const handleEnd = () => {
             onDragEnd();
-            // IMPORTANT: Remove the "end" listeners from the document to clean up
-            document.removeEventListener("mouseup", handleEnd);
-            document.removeEventListener("touchend", handleEnd);
         };
-        // Listen for the "start" events on the slider itself
-        sliderElement.addEventListener("mousedown", handleStart);
-        sliderElement.addEventListener("touchstart", handleStart, { passive: true });
-        // Cleanup function to remove all listeners when the component unmounts
+        // Listen for BOTH mouse and touch start events
+        slider.addEventListener('mousedown', handleStart);
+        slider.addEventListener('touchstart', handleStart, { passive: true });
+        // Listen for BOTH mouse and touch end events
+        slider.addEventListener('mouseup', handleEnd);
+        slider.addEventListener('touchend', handleEnd, { passive: true });
+        // Cleanup function to remove all listeners
         return () => {
-            sliderElement.removeEventListener("mousedown", handleStart);
-            sliderElement.removeEventListener("touchstart", handleStart);
-            document.removeEventListener("mouseup", handleEnd);
-            document.removeEventListener("touchend", handleEnd);
+            slider.removeEventListener('mousedown', handleStart);
+            slider.removeEventListener('touchstart', handleStart);
+            slider.removeEventListener('mouseup', handleEnd);
+            slider.removeEventListener('touchend', handleEnd);
         };
     }, [onDragStart, onDragEnd, isBatchMode]);
     return sliderRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.10.10",
+  "version": "2.10.11",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",