@yogiswara/honcho-editor-ui 3.1.3 → 3.1.4

package/dist/components/editor/HSliderColorMobile.js

@@ -1,38 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Stack, Slider, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Stack, 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 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", { ref: wrapperRef, children: _jsx(Slider, { sx: sx, slotProps: slotProps, size: size, value: value, step: step, min: min, max: max, onChange: onChange, onDoubleClick: onDoubleClick }) }));
-}
+import HThumbSlider from "../editor/sliderComponents/HThumbSlider";
 const formatValue = (value) => {
     if (value > 0)
         return `+${value}`;
@@ -143,7 +115,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.tempScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.tempScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: tempGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },
@@ -153,7 +125,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.tintScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.tintScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: tintGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },
@@ -163,7 +135,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.vibranceScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.vibranceScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: fullTrackGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },
@@ -173,7 +145,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.saturationScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.saturationScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: fullTrackGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },

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

@@ -1,30 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
-import { Slider } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider, Box } from '@mui/material';
+// I've renamed the component to HThumbSlider to match our earlier convention
 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 }) }));
+    // This wrapper creates the positioning context for the shield.
+    _jsxs(Box, { sx: { position: 'relative', width: '100%', py: 1.5 }, children: [_jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 1, // Sits above the track (z-index 0)
+                } }), _jsx(Slider, { ...props, sx: {
+                    position: 'relative',
+                    ...props.sx,
+                } })] }));
 }

package/package.json

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