@yogiswara/honcho-editor-ui 3.1.2 → 3.1.3

package/dist/components/editor/HSliderColorMobile.js

@@ -1,24 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Stack, Slider, Typography } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from '../../themes/colors';
 import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
 function ThumbOnlySlider({ sx, slotProps, size, value, step, min, max, onChange, onDoubleClick, }) {
-    const handleInteractionStart = (event) => {
-        // Check if the element that was clicked is the thumb or is inside the thumb.
-        const isThumb = event.target.closest('.MuiSlider-thumb');
-        // If the click was NOT on the thumb, isThumb will be null.
-        if (!isThumb) {
-            // These two lines stop the event dead in its tracks.
-            // The Slider's internal logic will never know this click happened.
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
+    const wrapperRef = useRef(null);
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const handleInteractionStart = (event) => {
+            // Check if the element that was clicked is the thumb or is inside the thumb.
+            const isThumb = event.target.closest('.MuiSlider-thumb');
+            // If the click was NOT on the thumb, isThumb will be null.
+            if (!isThumb) {
+                // Stop the event dead in its tracks.
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        // Manually attach the touchstart event with { passive: false }.
+        // This tells the browser it's "active", making preventDefault() valid.
+        wrapper.addEventListener('pointerdown', handleInteractionStart);
+        // Cleanup function
+        return () => {
+            // ✅ Simplified cleanup
+            wrapper.removeEventListener('pointerdown', handleInteractionStart);
+        };
+    }, []);
     return (
     // This wrapper div catches the event before the Slider can.
-    _jsx("div", { onMouseDown: handleInteractionStart, onTouchStart: handleInteractionStart, children: _jsx(Slider, { sx: sx, slotProps: slotProps, size: size, value: value, step: step, min: min, max: max, onChange: onChange, onDoubleClick: onDoubleClick }) }));
+    _jsx("div", { ref: wrapperRef, children: _jsx(Slider, { sx: sx, slotProps: slotProps, size: size, value: value, step: step, min: min, max: max, onChange: onChange, onDoubleClick: onDoubleClick }) }));
 }
 const formatValue = (value) => {
     if (value > 0)

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

@@ -0,0 +1,5 @@
+import { SliderProps } from '@mui/material';
+interface HThumbSliderProps extends SliderProps {
+}
+export default function HThumbSlider(props: HThumbSliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { Slider } from '@mui/material';
+export default function HThumbSlider(props) {
+    const wrapperRef = useRef(null);
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const handleInteractionStart = (event) => {
+            // Check if the element that was clicked is the thumb
+            const isThumb = event.target.closest('.MuiSlider-thumb');
+            // If the click was NOT on the thumb, stop the event
+            if (!isThumb) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        // Manually attach an "active" touchstart listener to prevent console warnings
+        wrapper.addEventListener('pointerdown', handleInteractionStart);
+        // Cleanup function
+        return () => {
+            // ✅ Simplified cleanup
+            wrapper.removeEventListener('pointerdown', handleInteractionStart);
+        };
+    }, []);
+    return (
+    // The wrapper div catches the event before the Slider can.
+    _jsx("div", { ref: wrapperRef, children: _jsx(Slider, { ...props }) }));
+}

package/package.json

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