@yogiswara/honcho-editor-ui 2.10.5 → 2.10.7

package/dist/components/editor/HImageEditorMobile.js

@@ -31,7 +31,7 @@ export default function HImageEditorMobile(props) {
     const renderPanelContent = () => {
         switch (props.activePanel) {
             case 'colorAdjustment':
-                return _jsx(HTabColorAdjustmentMobile, { ...props });
+                return _jsx(HTabColorAdjustmentMobile, { activeSubPanel: props.activeSubPanel, innerRef: props.innerRef, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange, onTempChange: props.onTempChange, onTintChange: props.onTintChange, onVibranceChange: props.onVibranceChange, onSaturationChange: props.onSaturationChange, exposureScore: props.exposureScore, contrastScore: props.contrastScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, tempScore: props.tempScore, tintScore: props.tintScore, vibranceScore: props.vibranceScore, saturationScore: props.saturationScore, isBatchMode: props.isBatchMode, sharpnessScore: props.sharpnessScore, onSharpnessChange: props.onSharpnessChange, clarityScore: props.clarityScore, onClarityChange: props.onClarityChange });
             case 'preset':
                 return _jsx(HTabPresetMobile, { ...props });
             default:

package/dist/components/editor/HTabColorAdjustmentMobile.js

@@ -4,5 +4,5 @@ import HSliderLightMobile from "./HSliderLightMobile";
 import HSliderDetailsMobile from "./HSliderDetailsMobile";
 import { Box } from "@mui/material";
 export default function HTabColorAdjustmentMobile(props) {
-    return (_jsxs(Box, { ref: props.innerRef, children: [props.activeSubPanel === "light" && _jsx(HSliderLightMobile, { ...props }), props.activeSubPanel === "color" && _jsx(HSliderColorMobile, { ...props }), props.activeSubPanel === "details" && _jsx(HSliderDetailsMobile, { ...props })] }));
+    return (_jsxs(Box, { ref: props.innerRef, children: [props.activeSubPanel === "light" && _jsx(HSliderLightMobile, { exposureScore: props.exposureScore, contrastScore: props.contrastScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, isBatchMode: props.isBatchMode, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }), props.activeSubPanel === "color" && _jsx(HSliderColorMobile, { tempScore: props.tempScore, tintScore: props.tintScore, vibranceScore: props.vibranceScore, saturationScore: props.saturationScore, isBatchMode: props.isBatchMode, onTempChange: props.onTempChange, onTintChange: props.onTintChange, onVibranceChange: props.onVibranceChange, onSaturationChange: props.onSaturationChange, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }), props.activeSubPanel === "details" && _jsx(HSliderDetailsMobile, { clarityScore: props.clarityScore, sharpnessScore: props.sharpnessScore, isBatchMode: props.isBatchMode, onClarityChange: props.onClarityChange, onSharpnessChange: props.onSharpnessChange, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd })] }));
 }

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

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

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

package/package.json

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