@yogiswara/honcho-editor-ui 3.0.1 → 3.0.3

package/dist/components/editor/HSliderColorMobile.js

@@ -125,21 +125,15 @@ export default function HSliderColorMobile(props) {
                                 textAlign: "right", // Keep the text alignment
                             }, children: formatValue(props.tempScore) })] }), _jsx(Slider, { sx: {
                         width: "100%",
-                        color: colors.surface,
                         '& .MuiSlider-rail': {
-                            background: tempGradient,
-                            opacity: 1,
-                            pointerEvents: 'none', // Make the rail non-interactive
+                            pointerEvents: 'none', // Makes the rail non-interactive
                         },
                         '& .MuiSlider-track': {
-                            background: 'transparent',
-                            border: 'none',
-                            pointerEvents: 'none', // Make the track non-interactive
+                            pointerEvents: 'none', // Makes the track non-interactive
                         },
                         '& .MuiSlider-thumb': {
-                            boxShadow: 'none',
-                            pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
-                        }
+                            pointerEvents: 'auto', // IMPORTANT: Re-enables interaction ONLY for the thumb
+                        },
                     }, slotProps: {
                         thumb: {
                             ref: tempSliderRef

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

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

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

@@ -1,47 +1,38 @@
 import { useEffect, useRef } from "react";
 export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
-    const sliderRef = useRef(null);
+    // Use a generic HTMLElement to work for both <div> and <span>
+    const elementRef = useRef(null);
     useEffect(() => {
-        const sliderElement = sliderRef.current;
-        if (!sliderElement)
+        const element = elementRef.current;
+        if (!element)
             return;
-        const handleMouseDown = () => {
-            if (!isBatchMode) {
-                onDragStart();
-            }
-            // Add document listeners when dragging starts
-            document.addEventListener("mouseup", handleMouseUp);
-            document.addEventListener("touchend", handleTouchEnd);
+        // This handler is attached to the WINDOW to reliably catch the end of the drag.
+        const handleDragEnd = () => {
+            onDragEnd();
+            // Clean up the global listeners immediately after they fire.
+            window.removeEventListener('mouseup', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
         };
-        const handleTouchStart = () => {
+        // This handler is attached to the slider THUMB to start the drag.
+        const handleDragStart = () => {
             if (!isBatchMode) {
                 onDragStart();
             }
-            // Add document listeners when dragging starts
-            document.addEventListener("mouseup", handleMouseUp);
-            document.addEventListener("touchend", handleTouchEnd);
-        };
-        const handleMouseUp = () => {
-            onDragEnd();
-            // Remove document listeners when dragging ends
-            document.removeEventListener("mouseup", handleMouseUp);
-            document.removeEventListener("touchend", handleTouchEnd);
-        };
-        const handleTouchEnd = () => {
-            onDragEnd();
-            // Remove document listeners when dragging ends
-            document.removeEventListener("mouseup", handleMouseUp);
-            document.removeEventListener("touchend", handleTouchEnd);
+            // When dragging starts, listen on the entire window for the end.
+            window.addEventListener('mouseup', handleDragEnd);
+            window.addEventListener('touchend', handleDragEnd);
         };
-        sliderElement.addEventListener("mousedown", handleMouseDown);
-        sliderElement.addEventListener("touchstart", handleTouchStart);
+        // Attach "start" listeners to the specific element (the thumb).
+        element.addEventListener('mousedown', handleDragStart);
+        element.addEventListener('touchstart', handleDragStart, { passive: true });
+        // Cleanup function when the component unmounts.
         return () => {
-            sliderElement.removeEventListener("mousedown", handleMouseDown);
-            sliderElement.removeEventListener("touchstart", handleTouchStart);
-            // Clean up any remaining document listeners
-            document.removeEventListener("mouseup", handleMouseUp);
-            document.removeEventListener("touchend", handleTouchEnd);
+            element.removeEventListener('mousedown', handleDragStart);
+            element.removeEventListener('touchstart', handleDragStart);
+            // Ensure any lingering window listeners are also removed.
+            window.removeEventListener('mouseup', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
         };
     }, [onDragStart, onDragEnd, isBatchMode]);
-    return sliderRef; // Return the ref to be attached to the slider
+    return elementRef;
 }

package/package.json

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