@yogiswara/honcho-editor-ui 2.11.4 → 3.0.0

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

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

@@ -5,28 +5,32 @@ export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
         const slider = sliderRef.current;
         if (!slider)
             return;
-        // A single handler for starting the drag
-        const handleStart = () => {
+        // This function will be attached to the WINDOW to listen for the end of a drag.
+        const handleDragEnd = () => {
+            onDragEnd();
+            // IMPORTANT: Clean up the global listeners immediately after the drag ends.
+            window.removeEventListener('mouseup', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+        // This function is attached ONLY to the slider thumb to start a drag.
+        const handleDragStart = () => {
             if (!isBatchMode) {
                 onDragStart();
             }
+            // When a drag starts, attach the listeners to the window to catch the end.
+            window.addEventListener('mouseup', handleDragEnd);
+            window.addEventListener('touchend', handleDragEnd);
         };
-        // A single handler for ending the drag
-        const handleEnd = () => {
-            onDragEnd();
-        };
-        // 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
+        // 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.
         return () => {
-            slider.removeEventListener('mousedown', handleStart);
-            slider.removeEventListener('touchstart', handleStart);
-            slider.removeEventListener('mouseup', handleEnd);
-            slider.removeEventListener('touchend', handleEnd);
+            slider.removeEventListener('mousedown', handleDragStart);
+            slider.removeEventListener('touchstart', handleDragStart);
+            // Also remove any lingering window listeners, just in case.
+            window.removeEventListener('mouseup', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
         };
     }, [onDragStart, onDragEnd, isBatchMode]);
     return sliderRef;

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.0",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",