@yogiswara/honcho-editor-ui 3.0.2 → 3.0.4

package/dist/components/editor/HSliderColorMobile.js

@@ -139,6 +139,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                             pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
+                            touchAction: 'none',
                         }
                     }, slotProps: {
                         thumb: {
@@ -165,6 +166,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                             pointerEvents: 'auto',
+                            touchAction: 'none',
                         }
                     }, slotProps: {
                         thumb: {
@@ -191,6 +193,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                             pointerEvents: 'auto',
+                            touchAction: 'none',
                         }
                     }, slotProps: {
                         thumb: {
@@ -217,6 +220,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                             pointerEvents: 'auto',
+                            touchAction: 'none',
                         }
                     }, slotProps: {
                         thumb: {

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

@@ -6,32 +6,29 @@ export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
         const element = elementRef.current;
         if (!element)
             return;
-        // This handler is attached to the WINDOW to reliably catch the end of the drag.
+        // This handler is attached to the WINDOW for the 'pointerup' event.
         const handleDragEnd = () => {
             onDragEnd();
-            // Clean up the global listeners immediately after they fire.
-            window.removeEventListener('mouseup', handleDragEnd);
-            window.removeEventListener('touchend', handleDragEnd);
+            // Clean up the global listener immediately after the drag ends.
+            window.removeEventListener('pointerup', handleDragEnd);
         };
-        // This handler is attached to the slider THUMB to start the drag.
-        const handleDragStart = () => {
+        // This handler is attached to the slider THUMB for the 'pointerdown' event.
+        const handleDragStart = (event) => {
+            // Prevent the browser from doing default actions like text selection
+            event.preventDefault();
             if (!isBatchMode) {
                 onDragStart();
             }
             // When dragging starts, listen on the entire window for the end.
-            window.addEventListener('mouseup', handleDragEnd);
-            window.addEventListener('touchend', handleDragEnd);
+            window.addEventListener('pointerup', handleDragEnd);
         };
-        // Attach "start" listeners to the specific element (the thumb).
-        element.addEventListener('mousedown', handleDragStart);
-        element.addEventListener('touchstart', handleDragStart, { passive: true });
+        // Attach a single "start" listener to the specific element (the thumb).
+        element.addEventListener('pointerdown', handleDragStart);
         // Cleanup function when the component unmounts.
         return () => {
-            element.removeEventListener('mousedown', handleDragStart);
-            element.removeEventListener('touchstart', handleDragStart);
+            element.removeEventListener('pointerdown', handleDragStart);
             // Ensure any lingering window listeners are also removed.
-            window.removeEventListener('mouseup', handleDragEnd);
-            window.removeEventListener('touchend', handleDragEnd);
+            window.removeEventListener('pointerup', handleDragEnd);
         };
     }, [onDragStart, onDragEnd, isBatchMode]);
     return elementRef;

package/package.json

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