@yogiswara/honcho-editor-ui 2.10.10 → 2.10.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/editor/HSliderColorMobile.js +25 -125
  2. package/dist/components/editor/sliderComponents/useSliderEvents.d.ts +2 -1
  3. package/dist/components/editor/sliderComponents/useSliderEvents.js +17 -22
  4. package/package.json +1 -1
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Stack, Slider, Typography, TextField } from "@mui/material";
2
+ import { Stack, Slider, Typography } from "@mui/material";
3
3
  import useHonchoTypography from "../../themes/honchoTheme";
4
4
  import useColors from '../../themes/colors';
5
5
  import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
@@ -47,37 +47,12 @@ export default function HSliderColorMobile(props) {
47
47
  const clampedValue = Math.max(min, Math.min(max, numericValue));
48
48
  onChange(clampedValue);
49
49
  };
50
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTempChange("tempScore", 0), children: "Temperature" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), sx: {
51
- width: "40px",
52
- alignItems: "center",
53
- textAlign: "right",
54
- pr: "4px",
55
- display: "flex",
56
- '& .MuiFilledInput-root': {
57
- backgroundColor: 'transparent',
58
- borderRadius: "0px",
59
- border: 'none',
60
- '&:before': {
61
- borderBottom: 'none',
62
- },
63
- '&:after': {
64
- borderBottom: 'none',
65
- },
66
- '&:hover:not(.Mui-disabled):before': {
67
- borderBottom: 'none',
68
- },
69
- '&.Mui-focused:after': {
70
- borderBottom: 'none',
71
- },
72
- },
73
- '& .MuiFilledInput-input': {
74
- textAlign: 'right',
75
- padding: 0,
76
- pr: '4px',
77
- color: colors.surface,
78
- fontSize: "14px",
79
- },
80
- } })] }), _jsx(Slider, { ref: tempSliderRef, sx: {
50
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTempChange("tempScore", 0), children: "Temperature" }), _jsx(Typography, { sx: {
51
+ ...typography.bodyMedium, // Use your standard typography
52
+ color: colors.surface,
53
+ width: "40px", // Keep the fixed width for alignment
54
+ textAlign: "right", // Keep the text alignment
55
+ }, children: formatValue(props.tempScore) })] }), _jsx(Slider, { ref: tempSliderRef, sx: {
81
56
  width: "100%",
82
57
  color: colors.surface,
83
58
  '& .MuiSlider-rail': {
@@ -91,37 +66,12 @@ export default function HSliderColorMobile(props) {
91
66
  '& .MuiSlider-thumb': {
92
67
  boxShadow: 'none',
93
68
  }
94
- }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
95
- width: "40px",
96
- alignItems: "center",
97
- textAlign: "right",
98
- pr: "4px",
99
- display: "flex",
100
- '& .MuiFilledInput-root': {
101
- backgroundColor: 'transparent',
102
- borderRadius: "0px",
103
- border: 'none',
104
- '&:before': {
105
- borderBottom: 'none',
106
- },
107
- '&:after': {
108
- borderBottom: 'none',
109
- },
110
- '&:hover:not(.Mui-disabled):before': {
111
- borderBottom: 'none',
112
- },
113
- '&.Mui-focused:after': {
114
- borderBottom: 'none',
115
- },
116
- },
117
- '& .MuiFilledInput-input': {
118
- textAlign: 'right',
119
- padding: 0,
120
- pr: '4px',
121
- color: colors.surface,
122
- fontSize: "14px",
123
- },
124
- } })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
69
+ }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(Typography, { sx: {
70
+ ...typography.bodyMedium, // Use your standard typography
71
+ color: colors.surface,
72
+ width: "40px", // Keep the fixed width for alignment
73
+ textAlign: "right", // Keep the text alignment
74
+ }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
125
75
  width: "100%",
126
76
  color: colors.surface,
127
77
  '& .MuiSlider-rail': {
@@ -135,37 +85,12 @@ export default function HSliderColorMobile(props) {
135
85
  '& .MuiSlider-thumb': {
136
86
  boxShadow: 'none',
137
87
  }
138
- }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
139
- width: "40px",
140
- alignItems: "center",
141
- textAlign: "right",
142
- pr: "4px",
143
- display: "flex",
144
- '& .MuiFilledInput-root': {
145
- backgroundColor: 'transparent',
146
- borderRadius: "0px",
147
- border: 'none',
148
- '&:before': {
149
- borderBottom: 'none',
150
- },
151
- '&:after': {
152
- borderBottom: 'none',
153
- },
154
- '&:hover:not(.Mui-disabled):before': {
155
- borderBottom: 'none',
156
- },
157
- '&.Mui-focused:after': {
158
- borderBottom: 'none',
159
- },
160
- },
161
- '& .MuiFilledInput-input': {
162
- textAlign: 'right',
163
- padding: 0,
164
- pr: '4px',
165
- color: colors.surface,
166
- fontSize: "14px",
167
- },
168
- } })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
88
+ }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(Typography, { sx: {
89
+ ...typography.bodyMedium, // Use your standard typography
90
+ color: colors.surface,
91
+ width: "40px", // Keep the fixed width for alignment
92
+ textAlign: "right", // Keep the text alignment
93
+ }, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
169
94
  width: "100%",
170
95
  color: colors.surface,
171
96
  '& .MuiSlider-rail': {
@@ -179,37 +104,12 @@ export default function HSliderColorMobile(props) {
179
104
  '& .MuiSlider-thumb': {
180
105
  boxShadow: 'none',
181
106
  }
182
- }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
183
- width: "40px",
184
- alignItems: "center",
185
- textAlign: "right",
186
- pr: "4px",
187
- display: "flex",
188
- '& .MuiFilledInput-root': {
189
- backgroundColor: 'transparent',
190
- borderRadius: "0px",
191
- border: 'none',
192
- '&:before': {
193
- borderBottom: 'none',
194
- },
195
- '&:after': {
196
- borderBottom: 'none',
197
- },
198
- '&:hover:not(.Mui-disabled):before': {
199
- borderBottom: 'none',
200
- },
201
- '&.Mui-focused:after': {
202
- borderBottom: 'none',
203
- },
204
- },
205
- '& .MuiFilledInput-input': {
206
- textAlign: 'right',
207
- padding: 0,
208
- pr: '4px',
209
- color: colors.surface,
210
- fontSize: "14px",
211
- },
212
- } })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
107
+ }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(Typography, { sx: {
108
+ ...typography.bodyMedium, // Use your standard typography
109
+ color: colors.surface,
110
+ width: "40px", // Keep the fixed width for alignment
111
+ textAlign: "right", // Keep the text alignment
112
+ }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
213
113
  width: "100%",
214
114
  color: colors.surface,
215
115
  '& .MuiSlider-rail': {
package/dist/components/editor/sliderComponents/useSliderEvents.d.ts CHANGED
@@ -1 +1,2 @@
1
- export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): import("react").RefObject<HTMLSpanElement>;
1
+ import React from "react";
2
+ export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): React.RefObject<HTMLSpanElement>;
package/dist/components/editor/sliderComponents/useSliderEvents.js CHANGED
@@ -2,36 +2,31 @@ import { useEffect, useRef } from "react";
2
2
  export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
3
3
  const sliderRef = useRef(null);
4
4
  useEffect(() => {
5
- const sliderElement = sliderRef.current;
6
- if (!sliderElement)
5
+ const slider = sliderRef.current;
6
+ if (!slider)
7
7
  return;
8
- const handleStart = (e) => {
9
- // THE FIX: Stop the event from bubbling up and causing conflicts.
10
- e.stopPropagation();
8
+ // A single handler for starting the drag
9
+ const handleStart = () => {
11
10
  if (!isBatchMode) {
12
11
  onDragStart();
13
12
  }
14
- // Add "end" listeners to the whole document when a drag starts
15
- document.addEventListener("mouseup", handleEnd);
16
- document.addEventListener("touchend", handleEnd);
17
13
  };
18
- const handleEnd = (e) => {
19
- // It's good practice to also stop propagation on the end event
20
- e.stopPropagation();
14
+ // A single handler for ending the drag
15
+ const handleEnd = () => {
21
16
  onDragEnd();
22
- // IMPORTANT: Remove the "end" listeners from the document to clean up
23
- document.removeEventListener("mouseup", handleEnd);
24
- document.removeEventListener("touchend", handleEnd);
25
17
  };
26
- // Listen for the "start" events on the slider itself
27
- sliderElement.addEventListener("mousedown", handleStart);
28
- sliderElement.addEventListener("touchstart", handleStart, { passive: true });
29
- // Cleanup function to remove all listeners when the component unmounts
18
+ // Listen for BOTH mouse and touch start events
19
+ slider.addEventListener('mousedown', handleStart);
20
+ slider.addEventListener('touchstart', handleStart, { passive: true });
21
+ // Listen for BOTH mouse and touch end events
22
+ slider.addEventListener('mouseup', handleEnd);
23
+ slider.addEventListener('touchend', handleEnd, { passive: true });
24
+ // Cleanup function to remove all listeners
30
25
  return () => {
31
- sliderElement.removeEventListener("mousedown", handleStart);
32
- sliderElement.removeEventListener("touchstart", handleStart);
33
- document.removeEventListener("mouseup", handleEnd);
34
- document.removeEventListener("touchend", handleEnd);
26
+ slider.removeEventListener('mousedown', handleStart);
27
+ slider.removeEventListener('touchstart', handleStart);
28
+ slider.removeEventListener('mouseup', handleEnd);
29
+ slider.removeEventListener('touchend', handleEnd);
35
30
  };
36
31
  }, [onDragStart, onDragEnd, isBatchMode]);
37
32
  return sliderRef;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "2.10.10",
3
+ "version": "2.10.12",
4
4
  "description": "A complete UI component library for the Honcho photo editor.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",