@yogiswara/honcho-editor-ui 3.0.0 → 3.0.2

package/dist/components/editor/HSliderColorMobile.js

@@ -88,7 +88,7 @@ export default function HSliderColorMobile(props) {
         console.log('[HSliderColorMobile TEMPERATURE] SLIDER onDragEnd triggered.');
         props.onDragEnd();
     };
-    const tempSliderRef = useSliderEvents(handleDragStartWithLog, handleDragEndWithLog, props.isBatchMode);
+    const tempSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const tintSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const vibranceSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const saturationSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);

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

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

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

@@ -1,37 +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 slider = sliderRef.current;
-        if (!slider)
+        const element = elementRef.current;
+        if (!element)
             return;
-        // This function will be attached to the WINDOW to listen for the end of a drag.
+        // This handler is attached to the WINDOW to reliably catch the end of the drag.
         const handleDragEnd = () => {
             onDragEnd();
-            // IMPORTANT: Clean up the global listeners immediately after the drag ends.
+            // Clean up the global listeners immediately after they fire.
             window.removeEventListener('mouseup', handleDragEnd);
             window.removeEventListener('touchend', handleDragEnd);
         };
-        // This function is attached ONLY to the slider thumb to start a drag.
+        // This handler is attached to the slider THUMB to start the drag.
         const handleDragStart = () => {
             if (!isBatchMode) {
                 onDragStart();
             }
-            // When a drag starts, attach the listeners to the window to catch the end.
+            // When dragging starts, listen on the entire window for the end.
             window.addEventListener('mouseup', handleDragEnd);
             window.addEventListener('touchend', handleDragEnd);
         };
-        // Attach the "start" listeners to the slider thumb.
-        slider.addEventListener('mousedown', handleDragStart);
-        slider.addEventListener('touchstart', handleDragStart, { passive: true });
-        // The main cleanup function for when the component unmounts.
+        // 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 () => {
-            slider.removeEventListener('mousedown', handleDragStart);
-            slider.removeEventListener('touchstart', handleDragStart);
-            // Also remove any lingering window listeners, just in case.
+            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 elementRef;
 }

package/package.json

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