@yogiswara/honcho-editor-ui 2.10.12 → 2.10.14

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 (5) hide show
  1. package/dist/components/editor/HSliderColorMobile.js +12 -0
  2. package/dist/components/editor/HSliderLightMobile.js +55 -241
  3. package/dist/components/editor/sliderComponents/useSliderEvents.d.ts +1 -2
  4. package/dist/components/editor/sliderComponents/useSliderEvents.js +18 -15
  5. package/package.json +1 -1
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -58,13 +58,16 @@ export default function HSliderColorMobile(props) {
58
58
  '& .MuiSlider-rail': {
59
59
  background: tempGradient,
60
60
  opacity: 1,
61
+ pointerEvents: 'none', // Make the rail non-interactive
61
62
  },
62
63
  '& .MuiSlider-track': {
63
64
  background: 'transparent',
64
65
  border: 'none',
66
+ pointerEvents: 'none', // Make the track non-interactive
65
67
  },
66
68
  '& .MuiSlider-thumb': {
67
69
  boxShadow: 'none',
70
+ pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
68
71
  }
69
72
  }, 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
73
  ...typography.bodyMedium, // Use your standard typography
@@ -77,13 +80,16 @@ export default function HSliderColorMobile(props) {
77
80
  '& .MuiSlider-rail': {
78
81
  background: tintGradient,
79
82
  opacity: 1,
83
+ pointerEvents: 'none',
80
84
  },
81
85
  '& .MuiSlider-track': {
82
86
  background: 'transparent',
83
87
  border: 'none',
88
+ pointerEvents: 'none',
84
89
  },
85
90
  '& .MuiSlider-thumb': {
86
91
  boxShadow: 'none',
92
+ pointerEvents: 'auto',
87
93
  }
88
94
  }, 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
95
  ...typography.bodyMedium, // Use your standard typography
@@ -96,13 +102,16 @@ export default function HSliderColorMobile(props) {
96
102
  '& .MuiSlider-rail': {
97
103
  background: fullTrackGradient,
98
104
  opacity: 1,
105
+ pointerEvents: 'none',
99
106
  },
100
107
  '& .MuiSlider-track': {
101
108
  background: 'transparent',
102
109
  border: 'none',
110
+ pointerEvents: 'none',
103
111
  },
104
112
  '& .MuiSlider-thumb': {
105
113
  boxShadow: 'none',
114
+ pointerEvents: 'auto',
106
115
  }
107
116
  }, 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
117
  ...typography.bodyMedium, // Use your standard typography
@@ -115,13 +124,16 @@ export default function HSliderColorMobile(props) {
115
124
  '& .MuiSlider-rail': {
116
125
  background: fullTrackGradient,
117
126
  opacity: 1,
127
+ pointerEvents: 'none',
118
128
  },
119
129
  '& .MuiSlider-track': {
120
130
  background: 'transparent',
121
131
  border: 'none',
132
+ pointerEvents: 'none',
122
133
  },
123
134
  '& .MuiSlider-thumb': {
124
135
  boxShadow: 'none',
136
+ pointerEvents: 'auto',
125
137
  }
126
138
  }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] }) }));
127
139
  }
package/dist/components/editor/HSliderLightMobile.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";
@@ -27,329 +27,143 @@ export default function HSliderLightMobile(props) {
27
27
  const clampedValue = Math.max(min, Math.min(max, numericValue));
28
28
  onChange(clampedValue);
29
29
  };
30
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onExposureChange("exposureScore", 0), children: "Exposure" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onExposureChange("exposureScore", val)), sx: {
31
- width: "40px",
32
- alignItems: "center",
33
- textAlign: "right",
34
- pr: "4px",
35
- display: "flex",
36
- '& .MuiFilledInput-root': {
37
- backgroundColor: 'transparent',
38
- borderRadius: "0px",
39
- border: 'none',
40
- '&:before': {
41
- borderBottom: 'none',
42
- },
43
- '&:after': {
44
- borderBottom: 'none',
45
- },
46
- '&:hover:not(.Mui-disabled):before': {
47
- borderBottom: 'none',
48
- },
49
- '&.Mui-focused:after': {
50
- borderBottom: 'none',
51
- },
52
- },
53
- '& .MuiFilledInput-input': {
54
- textAlign: 'right',
55
- padding: 0,
56
- pr: '4px',
57
- color: colors.surface,
58
- fontSize: "14px",
59
- },
60
- '& .Mui-focused': {
61
- '& .MuiFilledInput-input': {
62
- backgroundColor: "#1C1B1FB2",
63
- textAlign: 'right',
64
- borderRadius: '5px 5px 0px 0px',
65
- borderBottom: 'none',
66
- pl: '2px',
67
- }
68
- }
69
- } })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
30
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onExposureChange("exposureScore", 0), children: "Exposure" }), _jsx(Typography, { sx: {
31
+ ...typography.bodyMedium, // Use your standard typography
32
+ color: colors.surface,
33
+ width: "40px", // Keep the fixed width for alignment
34
+ textAlign: "right", // Keep the text alignment
35
+ }, children: formatValue(props.exposureScore) })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
70
36
  width: "100%",
71
37
  color: colors.onSurfaceVariant,
72
38
  '& .MuiSlider-rail': {
73
39
  background: colors.onSurfaceVariant,
74
40
  opacity: 1,
41
+ pointerEvents: 'none',
75
42
  },
76
43
  '& .MuiSlider-thumb': {
77
44
  background: colors.surface,
78
45
  boxShadow: 'none',
79
46
  opacity: 1,
47
+ pointerEvents: 'auto',
80
48
  },
81
49
  '& .MuiSlider-thumb:hover': {
82
50
  boxShadow: 'none',
51
+ pointerEvents: 'auto',
83
52
  }
84
- }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
85
- width: "40px",
86
- alignItems: "center",
87
- textAlign: "right",
88
- pr: "4px",
89
- display: "flex",
90
- '& .MuiFilledInput-root': {
91
- backgroundColor: 'transparent',
92
- borderRadius: "0px",
93
- border: 'none',
94
- '&:before': {
95
- borderBottom: 'none',
96
- },
97
- '&:after': {
98
- borderBottom: 'none',
99
- },
100
- '&:hover:not(.Mui-disabled):before': {
101
- borderBottom: 'none',
102
- },
103
- '&.Mui-focused:after': {
104
- borderBottom: 'none',
105
- },
106
- },
107
- '& .MuiFilledInput-input': {
108
- textAlign: 'right',
109
- padding: 0,
110
- pr: '4px',
111
- color: colors.surface,
112
- fontSize: "14px",
113
- },
114
- '& .Mui-focused': {
115
- '& .MuiFilledInput-input': {
116
- backgroundColor: "#1C1B1FB2",
117
- textAlign: 'right',
118
- borderRadius: '5px 5px 0px 0px',
119
- borderBottom: 'none',
120
- pl: '2px',
121
- }
122
- }
123
- } })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
53
+ }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(Typography, { sx: {
54
+ ...typography.bodyMedium, // Use your standard typography
55
+ color: colors.surface,
56
+ width: "40px", // Keep the fixed width for alignment
57
+ textAlign: "right", // Keep the text alignment
58
+ }, children: formatValue(props.contrastScore) })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
124
59
  width: "100%",
125
60
  color: colors.onSurfaceVariant,
126
61
  '& .MuiSlider-rail': {
127
62
  background: colors.onSurfaceVariant,
128
63
  opacity: 1,
64
+ pointerEvents: 'none',
129
65
  },
130
66
  '& .MuiSlider-thumb': {
131
67
  background: colors.surface,
132
68
  boxShadow: 'none',
133
69
  opacity: 1,
70
+ pointerEvents: 'auto',
134
71
  },
135
72
  '& .MuiSlider-thumb:hover': {
136
73
  boxShadow: 'none',
74
+ pointerEvents: 'auto',
137
75
  }
138
- }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", 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
- '& .Mui-focused': {
169
- '& .MuiFilledInput-input': {
170
- backgroundColor: "#1C1B1FB2",
171
- textAlign: 'right',
172
- borderRadius: '5px 5px 0px 0px',
173
- borderBottom: 'none',
174
- pl: '2px',
175
- }
176
- }
177
- } })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
76
+ }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(Typography, { sx: {
77
+ ...typography.bodyMedium, // Use your standard typography
78
+ color: colors.surface,
79
+ width: "40px", // Keep the fixed width for alignment
80
+ textAlign: "right", // Keep the text alignment
81
+ }, children: formatValue(props.highlightsScore) })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
178
82
  width: "100%",
179
83
  color: colors.onSurfaceVariant,
180
84
  '& .MuiSlider-rail': {
181
85
  background: colors.onSurfaceVariant,
182
86
  opacity: 1,
87
+ pointerEvents: 'none',
183
88
  },
184
89
  '& .MuiSlider-thumb': {
185
90
  background: colors.surface,
186
91
  boxShadow: 'none',
187
92
  opacity: 1,
93
+ pointerEvents: 'auto',
188
94
  },
189
95
  '& .MuiSlider-thumb:hover': {
190
96
  boxShadow: 'none',
97
+ pointerEvents: 'auto',
191
98
  }
192
- }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
193
- width: "40px",
194
- alignItems: "center",
195
- textAlign: "right",
196
- pr: "4px",
197
- display: "flex",
198
- '& .MuiFilledInput-root': {
199
- backgroundColor: 'transparent',
200
- borderRadius: "0px",
201
- border: 'none',
202
- '&:before': {
203
- borderBottom: 'none',
204
- },
205
- '&:after': {
206
- borderBottom: 'none',
207
- },
208
- '&:hover:not(.Mui-disabled):before': {
209
- borderBottom: 'none',
210
- },
211
- '&.Mui-focused:after': {
212
- borderBottom: 'none',
213
- },
214
- },
215
- '& .MuiFilledInput-input': {
216
- textAlign: 'right',
217
- padding: 0,
218
- pr: '4px',
219
- color: colors.surface,
220
- fontSize: "14px",
221
- },
222
- '& .Mui-focused': {
223
- '& .MuiFilledInput-input': {
224
- backgroundColor: "#1C1B1FB2",
225
- textAlign: 'right',
226
- borderRadius: '5px 5px 0px 0px',
227
- borderBottom: 'none',
228
- pl: '2px',
229
- }
230
- }
231
- } })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
99
+ }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(Typography, { sx: {
100
+ ...typography.bodyMedium, // Use your standard typography
101
+ color: colors.surface,
102
+ width: "40px", // Keep the fixed width for alignment
103
+ textAlign: "right", // Keep the text alignment
104
+ }, children: formatValue(props.shadowScore) })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
232
105
  width: "100%",
233
106
  color: colors.onSurfaceVariant,
234
107
  '& .MuiSlider-rail': {
235
108
  background: colors.onSurfaceVariant,
236
109
  opacity: 1,
110
+ pointerEvents: 'none',
237
111
  },
238
112
  '& .MuiSlider-thumb': {
239
113
  background: colors.surface,
240
114
  boxShadow: 'none',
241
115
  opacity: 1,
116
+ pointerEvents: 'auto',
242
117
  },
243
118
  '& .MuiSlider-thumb:hover': {
244
119
  boxShadow: 'none',
120
+ pointerEvents: 'auto',
245
121
  }
246
- }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
247
- width: "40px",
248
- alignItems: "center",
249
- textAlign: "right",
250
- pr: "4px",
251
- display: "flex",
252
- '& .MuiFilledInput-root': {
253
- backgroundColor: 'transparent',
254
- borderRadius: "0px",
255
- border: 'none',
256
- '&:before': {
257
- borderBottom: 'none',
258
- },
259
- '&:after': {
260
- borderBottom: 'none',
261
- },
262
- '&:hover:not(.Mui-disabled):before': {
263
- borderBottom: 'none',
264
- },
265
- '&.Mui-focused:after': {
266
- borderBottom: 'none',
267
- },
268
- },
269
- '& .MuiFilledInput-input': {
270
- textAlign: 'right',
271
- padding: 0,
272
- pr: '4px',
273
- color: colors.surface,
274
- fontSize: "14px",
275
- },
276
- '& .Mui-focused': {
277
- '& .MuiFilledInput-input': {
278
- backgroundColor: "#1C1B1FB2",
279
- textAlign: 'right',
280
- borderRadius: '5px 5px 0px 0px',
281
- borderBottom: 'none',
282
- pl: '2px',
283
- }
284
- }
285
- } })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
122
+ }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(Typography, { sx: {
123
+ ...typography.bodyMedium, // Use your standard typography
124
+ color: colors.surface,
125
+ width: "40px", // Keep the fixed width for alignment
126
+ textAlign: "right", // Keep the text alignment
127
+ }, children: formatValue(props.whiteScore) })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
286
128
  width: "100%",
287
129
  color: colors.onSurfaceVariant,
288
130
  '& .MuiSlider-rail': {
289
131
  background: colors.onSurfaceVariant,
290
132
  opacity: 1,
133
+ pointerEvents: 'none',
291
134
  },
292
135
  '& .MuiSlider-thumb': {
293
136
  background: colors.surface,
294
137
  boxShadow: 'none',
295
138
  opacity: 1,
139
+ pointerEvents: 'auto',
296
140
  },
297
141
  '& .MuiSlider-thumb:hover': {
298
142
  boxShadow: 'none',
143
+ pointerEvents: 'auto',
299
144
  }
300
- }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
301
- width: "40px",
302
- alignItems: "center",
303
- textAlign: "right",
304
- pr: "4px",
305
- display: "flex",
306
- '& .MuiFilledInput-root': {
307
- backgroundColor: 'transparent',
308
- borderRadius: "0px",
309
- border: 'none',
310
- '&:before': {
311
- borderBottom: 'none',
312
- },
313
- '&:after': {
314
- borderBottom: 'none',
315
- },
316
- '&:hover:not(.Mui-disabled):before': {
317
- borderBottom: 'none',
318
- },
319
- '&.Mui-focused:after': {
320
- borderBottom: 'none',
321
- },
322
- },
323
- '& .MuiFilledInput-input': {
324
- textAlign: 'right',
325
- padding: 0,
326
- pr: '4px',
327
- color: colors.surface,
328
- fontSize: "14px",
329
- },
330
- '& .Mui-focused': {
331
- '& .MuiFilledInput-input': {
332
- backgroundColor: "#1C1B1FB2",
333
- textAlign: 'right',
334
- borderRadius: '5px 5px 0px 0px',
335
- borderBottom: 'none',
336
- pl: '2px',
337
- }
338
- },
339
- } })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
145
+ }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(Typography, { sx: {
146
+ ...typography.bodyMedium, // Use your standard typography
147
+ color: colors.surface,
148
+ width: "40px", // Keep the fixed width for alignment
149
+ textAlign: "right", // Keep the text alignment
150
+ }, children: formatValue(props.blackScore) })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
340
151
  width: "100%",
341
152
  color: colors.onSurfaceVariant,
342
153
  '& .MuiSlider-rail': {
343
154
  background: colors.onSurfaceVariant,
344
155
  opacity: 1,
156
+ pointerEvents: 'none',
345
157
  },
346
158
  '& .MuiSlider-thumb': {
347
159
  background: colors.surface,
348
160
  boxShadow: 'none',
349
161
  opacity: 1,
162
+ pointerEvents: 'auto',
350
163
  },
351
164
  '& .MuiSlider-thumb:hover': {
352
165
  boxShadow: 'none',
166
+ pointerEvents: 'auto',
353
167
  }
354
168
  }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
355
169
  }
package/dist/components/editor/sliderComponents/useSliderEvents.d.ts CHANGED
@@ -1,2 +1 @@
1
- import React from "react";
2
- export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): React.RefObject<HTMLSpanElement>;
1
+ export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): import("react").RefObject<HTMLSpanElement>;
package/dist/components/editor/sliderComponents/useSliderEvents.js CHANGED
@@ -2,31 +2,34 @@ 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 slider = sliderRef.current;
6
- if (!slider)
5
+ const sliderElement = sliderRef.current;
6
+ if (!sliderElement)
7
7
  return;
8
- // A single handler for starting the drag
9
8
  const handleStart = () => {
9
+ // 1. When a drag STARTS on the slider...
10
10
  if (!isBatchMode) {
11
11
  onDragStart();
12
12
  }
13
+ // 2. ...we add listeners to the whole DOCUMENT to catch the END of the drag.
14
+ document.addEventListener("mouseup", handleEnd);
15
+ document.addEventListener("touchend", handleEnd);
13
16
  };
14
- // A single handler for ending the drag
15
17
  const handleEnd = () => {
18
+ // 3. When the drag ends (anywhere on the page), we call onDragEnd...
16
19
  onDragEnd();
20
+ // 4. ...and IMPORTANTLY, we clean up the document listeners.
21
+ document.removeEventListener("mouseup", handleEnd);
22
+ document.removeEventListener("touchend", handleEnd);
17
23
  };
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
24
+ // Listen for the "start" events on the slider element itself
25
+ sliderElement.addEventListener("mousedown", handleStart);
26
+ sliderElement.addEventListener("touchstart", handleStart, { passive: true });
27
+ // Cleanup function to remove all listeners when the component unmounts
25
28
  return () => {
26
- slider.removeEventListener('mousedown', handleStart);
27
- slider.removeEventListener('touchstart', handleStart);
28
- slider.removeEventListener('mouseup', handleEnd);
29
- slider.removeEventListener('touchend', handleEnd);
29
+ sliderElement.removeEventListener("mousedown", handleStart);
30
+ sliderElement.removeEventListener("touchstart", handleStart);
31
+ document.removeEventListener("mouseup", handleEnd);
32
+ document.removeEventListener("touchend", handleEnd);
30
33
  };
31
34
  }, [onDragStart, onDragEnd, isBatchMode]);
32
35
  return sliderRef;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "2.10.12",
3
+ "version": "2.10.14",
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",