@yogiswara/honcho-editor-ui 2.11.4 → 3.0.1

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

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

@@ -2,32 +2,46 @@ import { useEffect, useRef } from "react";
 export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
     const sliderRef = useRef(null);
     useEffect(() => {
-        const slider = sliderRef.current;
-        if (!slider)
+        const sliderElement = sliderRef.current;
+        if (!sliderElement)
             return;
-        // A single handler for starting the drag
-        const handleStart = () => {
+        const handleMouseDown = () => {
             if (!isBatchMode) {
                 onDragStart();
             }
+            // Add document listeners when dragging starts
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchend", handleTouchEnd);
         };
-        // A single handler for ending the drag
-        const handleEnd = () => {
+        const handleTouchStart = () => {
+            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);
         };
-        // 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
+        sliderElement.addEventListener("mousedown", handleMouseDown);
+        sliderElement.addEventListener("touchstart", handleTouchStart);
         return () => {
-            slider.removeEventListener('mousedown', handleStart);
-            slider.removeEventListener('touchstart', handleStart);
-            slider.removeEventListener('mouseup', handleEnd);
-            slider.removeEventListener('touchend', handleEnd);
+            sliderElement.removeEventListener("mousedown", handleMouseDown);
+            sliderElement.removeEventListener("touchstart", handleTouchStart);
+            // Clean up any remaining document listeners
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("touchend", handleTouchEnd);
         };
     }, [onDragStart, onDragEnd, isBatchMode]);
-    return sliderRef;
+    return sliderRef; // Return the ref to be attached to the slider
 }

package/dist/hooks/useSliderInteraction.d.ts

@@ -0,0 +1,12 @@
+type SliderChangeHandler = (event: Event, value: number | number[]) => void;
+/**
+ * A hook to reliably track the start and end of a slider drag interaction.
+ * @param onDragStart - Callback for when dragging begins.
+ * @param onDragEnd - Callback for when dragging ends.
+ * @returns { handleChange, handleChangeCommitted } - Handlers to be passed to the MUI Slider.
+ */
+export declare function useSliderInteraction(onDragStart: () => void, onDragEnd: () => void): {
+    handleChange: SliderChangeHandler;
+    handleChangeCommitted: SliderChangeHandler;
+};
+export {};

package/dist/hooks/useSliderInteraction.js

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+/**
+ * A hook to reliably track the start and end of a slider drag interaction.
+ * @param onDragStart - Callback for when dragging begins.
+ * @param onDragEnd - Callback for when dragging ends.
+ * @returns { handleChange, handleChangeCommitted } - Handlers to be passed to the MUI Slider.
+ */
+export function useSliderInteraction(onDragStart, onDragEnd) {
+    const isDraggingRef = useRef(false);
+    // This handler wraps the original `onChange`.
+    const handleChange = (event, value) => {
+        if (!isDraggingRef.current) {
+            // If not already dragging, this is the start.
+            isDraggingRef.current = true;
+            onDragStart();
+        }
+        // You would call your original `onChange` logic here if needed.
+        // For example: props.setTempScore("tempScore", value as number);
+    };
+    // This handler wraps the original `onChangeCommitted`.
+    const handleChangeCommitted = (event, value) => {
+        if (isDraggingRef.current) {
+            // If a drag was in progress, this is the end.
+            isDraggingRef.current = false;
+            onDragEnd();
+        }
+    };
+    return { handleChange, handleChangeCommitted };
+}

package/package.json

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