@react-aria/color 3.0.0-nightly.4623 → 3.0.0-nightly.4629

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 (22) hide show
  1. package/dist/useColorArea.main.js +70 -70
  2. package/dist/useColorArea.mjs +70 -70
  3. package/dist/useColorArea.module.js +70 -70
  4. package/dist/useColorAreaGradient.main.js +26 -26
  5. package/dist/useColorAreaGradient.mjs +26 -26
  6. package/dist/useColorAreaGradient.module.js +26 -26
  7. package/dist/useColorChannelField.main.js +1 -1
  8. package/dist/useColorChannelField.mjs +1 -1
  9. package/dist/useColorChannelField.module.js +1 -1
  10. package/dist/useColorField.main.js +12 -12
  11. package/dist/useColorField.mjs +12 -12
  12. package/dist/useColorField.module.js +12 -12
  13. package/dist/useColorSlider.main.js +28 -28
  14. package/dist/useColorSlider.mjs +28 -28
  15. package/dist/useColorSlider.module.js +28 -28
  16. package/dist/useColorSwatch.main.js +12 -12
  17. package/dist/useColorSwatch.mjs +12 -12
  18. package/dist/useColorSwatch.module.js +12 -12
  19. package/dist/useColorWheel.main.js +38 -38
  20. package/dist/useColorWheel.mjs +38 -38
  21. package/dist/useColorWheel.module.js +38 -38
  22. package/package.json +14 -14
package/dist/useColorSwatch.main.js CHANGED
@@ -31,32 +31,32 @@ $parcel$export(module.exports, "useColorSwatch", () => $7c947b33be1ec2a6$export$
31
31
 
32
32
  function $7c947b33be1ec2a6$export$9060ae606178d849(props) {
33
33
  let { color: value, colorName: colorName } = props;
34
- let nonNullValue = value || "#fff0";
35
- let color = (0, $gp2Sz$react.useMemo)(()=>typeof nonNullValue === "string" ? (0, $gp2Sz$reactstatelycolor.parseColor)(nonNullValue) : nonNullValue, [
34
+ let nonNullValue = value || '#fff0';
35
+ let color = (0, $gp2Sz$react.useMemo)(()=>typeof nonNullValue === 'string' ? (0, $gp2Sz$reactstatelycolor.parseColor)(nonNullValue) : nonNullValue, [
36
36
  nonNullValue
37
37
  ]);
38
38
  let { locale: locale } = (0, $gp2Sz$reactariai18n.useLocale)();
39
39
  let DOMProps = (0, $gp2Sz$reactariautils.filterDOMProps)(props, {
40
40
  labelable: true
41
41
  });
42
- let stringFormatter = (0, $gp2Sz$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4a33e168940636d5$exports))), "@react-aria/color");
42
+ let stringFormatter = (0, $gp2Sz$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4a33e168940636d5$exports))), '@react-aria/color');
43
43
  let id = (0, $gp2Sz$reactariautils.useId)(props.id);
44
- if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
44
+ if (!colorName) colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);
45
45
  return {
46
46
  colorSwatchProps: {
47
47
  ...DOMProps,
48
- role: "img",
49
- "aria-roledescription": stringFormatter.format("colorSwatch"),
50
- "aria-label": [
48
+ role: 'img',
49
+ 'aria-roledescription': stringFormatter.format('colorSwatch'),
50
+ 'aria-label': [
51
51
  colorName,
52
- props["aria-label"] || ""
53
- ].filter(Boolean).join(", "),
54
- "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
52
+ props['aria-label'] || ''
53
+ ].filter(Boolean).join(', '),
54
+ 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
55
55
  id: id,
56
56
  style: {
57
- backgroundColor: color.toString("css"),
57
+ backgroundColor: color.toString('css'),
58
58
  // @ts-ignore
59
- forcedColorAdjust: "none"
59
+ forcedColorAdjust: 'none'
60
60
  }
61
61
  },
62
62
  color: color || null
package/dist/useColorSwatch.mjs CHANGED
@@ -25,32 +25,32 @@ function $parcel$interopDefault(a) {
25
25
 
26
26
  function $2993fcad7650b98d$export$9060ae606178d849(props) {
27
27
  let { color: value, colorName: colorName } = props;
28
- let nonNullValue = value || "#fff0";
29
- let color = (0, $kMaRF$useMemo)(()=>typeof nonNullValue === "string" ? (0, $kMaRF$parseColor)(nonNullValue) : nonNullValue, [
28
+ let nonNullValue = value || '#fff0';
29
+ let color = (0, $kMaRF$useMemo)(()=>typeof nonNullValue === 'string' ? (0, $kMaRF$parseColor)(nonNullValue) : nonNullValue, [
30
30
  nonNullValue
31
31
  ]);
32
32
  let { locale: locale } = (0, $kMaRF$useLocale)();
33
33
  let DOMProps = (0, $kMaRF$filterDOMProps)(props, {
34
34
  labelable: true
35
35
  });
36
- let stringFormatter = (0, $kMaRF$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kMaRF$intlStringsmodulejs))), "@react-aria/color");
36
+ let stringFormatter = (0, $kMaRF$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kMaRF$intlStringsmodulejs))), '@react-aria/color');
37
37
  let id = (0, $kMaRF$useId)(props.id);
38
- if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
38
+ if (!colorName) colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);
39
39
  return {
40
40
  colorSwatchProps: {
41
41
  ...DOMProps,
42
- role: "img",
43
- "aria-roledescription": stringFormatter.format("colorSwatch"),
44
- "aria-label": [
42
+ role: 'img',
43
+ 'aria-roledescription': stringFormatter.format('colorSwatch'),
44
+ 'aria-label': [
45
45
  colorName,
46
- props["aria-label"] || ""
47
- ].filter(Boolean).join(", "),
48
- "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
46
+ props['aria-label'] || ''
47
+ ].filter(Boolean).join(', '),
48
+ 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
49
49
  id: id,
50
50
  style: {
51
- backgroundColor: color.toString("css"),
51
+ backgroundColor: color.toString('css'),
52
52
  // @ts-ignore
53
- forcedColorAdjust: "none"
53
+ forcedColorAdjust: 'none'
54
54
  }
55
55
  },
56
56
  color: color || null
package/dist/useColorSwatch.module.js CHANGED
@@ -25,32 +25,32 @@ function $parcel$interopDefault(a) {
25
25
 
26
26
  function $2993fcad7650b98d$export$9060ae606178d849(props) {
27
27
  let { color: value, colorName: colorName } = props;
28
- let nonNullValue = value || "#fff0";
29
- let color = (0, $kMaRF$useMemo)(()=>typeof nonNullValue === "string" ? (0, $kMaRF$parseColor)(nonNullValue) : nonNullValue, [
28
+ let nonNullValue = value || '#fff0';
29
+ let color = (0, $kMaRF$useMemo)(()=>typeof nonNullValue === 'string' ? (0, $kMaRF$parseColor)(nonNullValue) : nonNullValue, [
30
30
  nonNullValue
31
31
  ]);
32
32
  let { locale: locale } = (0, $kMaRF$useLocale)();
33
33
  let DOMProps = (0, $kMaRF$filterDOMProps)(props, {
34
34
  labelable: true
35
35
  });
36
- let stringFormatter = (0, $kMaRF$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kMaRF$intlStringsmodulejs))), "@react-aria/color");
36
+ let stringFormatter = (0, $kMaRF$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kMaRF$intlStringsmodulejs))), '@react-aria/color');
37
37
  let id = (0, $kMaRF$useId)(props.id);
38
- if (!colorName) colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
38
+ if (!colorName) colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);
39
39
  return {
40
40
  colorSwatchProps: {
41
41
  ...DOMProps,
42
- role: "img",
43
- "aria-roledescription": stringFormatter.format("colorSwatch"),
44
- "aria-label": [
42
+ role: 'img',
43
+ 'aria-roledescription': stringFormatter.format('colorSwatch'),
44
+ 'aria-label': [
45
45
  colorName,
46
- props["aria-label"] || ""
47
- ].filter(Boolean).join(", "),
48
- "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
46
+ props['aria-label'] || ''
47
+ ].filter(Boolean).join(', '),
48
+ 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
49
49
  id: id,
50
50
  style: {
51
- backgroundColor: color.toString("css"),
51
+ backgroundColor: color.toString('css'),
52
52
  // @ts-ignore
53
- forcedColorAdjust: "none"
53
+ forcedColorAdjust: 'none'
54
54
  }
55
55
  },
56
56
  color: color || null
package/dist/useColorWheel.main.js CHANGED
@@ -26,7 +26,7 @@ $parcel$export(module.exports, "useColorWheel", () => $1d29bf243d4a9a53$export$9
26
26
 
27
27
 
28
28
  function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
29
- let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
29
+ let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name } = props;
30
30
  let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $iWAp3$reactariautils.useGlobalListeners)();
31
31
  let thumbRadius = (innerRadius + outerRadius) / 2;
32
32
  let focusInput = (0, $iWAp3$react.useCallback)(()=>{
@@ -48,11 +48,11 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
48
48
  // remember to set this and unset it so that onChangeEnd is fired
49
49
  state.setDragging(true);
50
50
  switch(e.key){
51
- case "PageUp":
51
+ case 'PageUp':
52
52
  e.preventDefault();
53
53
  state.increment(state.pageStep);
54
54
  break;
55
- case "PageDown":
55
+ case 'PageDown':
56
56
  e.preventDefault();
57
57
  state.decrement(state.pageStep);
58
58
  break;
@@ -69,7 +69,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
69
69
  if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
70
70
  currentPosition.current.x += deltaX;
71
71
  currentPosition.current.y += deltaY;
72
- if (pointerType === "keyboard") {
72
+ if (pointerType === 'keyboard') {
73
73
  if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? state.pageStep : state.step);
74
74
  else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? state.pageStep : state.step);
75
75
  } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
@@ -99,10 +99,10 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
99
99
  currentPointer.current = id;
100
100
  focusInput();
101
101
  state.setDragging(true);
102
- if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
102
+ if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
103
103
  else {
104
- addGlobalListener(window, "mouseup", onThumbUp, false);
105
- addGlobalListener(window, "touchend", onThumbUp, false);
104
+ addGlobalListener(window, 'mouseup', onThumbUp, false);
105
+ addGlobalListener(window, 'touchend', onThumbUp, false);
106
106
  }
107
107
  }
108
108
  };
@@ -115,10 +115,10 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
115
115
  state.setDragging(false);
116
116
  currentPointer.current = undefined;
117
117
  isOnTrack.current = false;
118
- if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
118
+ if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
119
119
  else {
120
- removeGlobalListener(window, "mouseup", onThumbUp, false);
121
- removeGlobalListener(window, "touchend", onThumbUp, false);
120
+ removeGlobalListener(window, 'mouseup', onThumbUp, false);
121
+ removeGlobalListener(window, 'touchend', onThumbUp, false);
122
122
  }
123
123
  }
124
124
  };
@@ -133,10 +133,10 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
133
133
  state.setHueFromPoint(x, y, radius);
134
134
  focusInput();
135
135
  state.setDragging(true);
136
- if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
136
+ if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onTrackUp, false);
137
137
  else {
138
- addGlobalListener(window, "mouseup", onTrackUp, false);
139
- addGlobalListener(window, "touchend", onTrackUp, false);
138
+ addGlobalListener(window, 'mouseup', onTrackUp, false);
139
+ addGlobalListener(window, 'touchend', onTrackUp, false);
140
140
  }
141
141
  }
142
142
  };
@@ -149,17 +149,17 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
149
149
  currentPointer.current = undefined;
150
150
  state.setDragging(false);
151
151
  focusInput();
152
- if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onTrackUp, false);
152
+ if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onTrackUp, false);
153
153
  else {
154
- removeGlobalListener(window, "mouseup", onTrackUp, false);
155
- removeGlobalListener(window, "touchend", onTrackUp, false);
154
+ removeGlobalListener(window, 'mouseup', onTrackUp, false);
155
+ removeGlobalListener(window, 'touchend', onTrackUp, false);
156
156
  }
157
157
  }
158
158
  };
159
159
  let trackInteractions = isDisabled ? {} : (0, $iWAp3$reactariautils.mergeProps)({
160
- ...typeof PointerEvent !== "undefined" ? {
160
+ ...typeof PointerEvent !== 'undefined' ? {
161
161
  onPointerDown: (e)=>{
162
- if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
162
+ if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
163
163
  onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
164
164
  }
165
165
  } : {
@@ -178,7 +178,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
178
178
  onThumbDown(undefined);
179
179
  },
180
180
  onPointerDown: (e)=>{
181
- if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
181
+ if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
182
182
  onThumbDown(e.pointerId);
183
183
  },
184
184
  onTouchStart: (e)=>{
@@ -188,29 +188,29 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
188
188
  let { x: x, y: y } = state.getThumbPosition(thumbRadius);
189
189
  // Provide a default aria-label if none is given
190
190
  let { locale: locale } = (0, $iWAp3$reactariai18n.useLocale)();
191
- if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
191
+ if (ariaLabel == null && props['aria-labelledby'] == null) ariaLabel = state.value.getChannelName('hue', locale);
192
192
  let inputLabellingProps = (0, $iWAp3$reactariautils.useLabels)({
193
193
  ...props,
194
- "aria-label": ariaLabel
194
+ 'aria-label': ariaLabel
195
195
  });
196
- let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange("hue");
196
+ let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange('hue');
197
197
  let forcedColorAdjustNoneStyle = {
198
- forcedColorAdjust: "none"
198
+ forcedColorAdjust: 'none'
199
199
  };
200
200
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $iWAp3$reactariavisuallyhidden.useVisuallyHidden)({
201
201
  style: {
202
- opacity: "0.0001",
203
- width: "100%",
204
- height: "100%",
205
- pointerEvents: "none"
202
+ opacity: '0.0001',
203
+ width: '100%',
204
+ height: '100%',
205
+ pointerEvents: 'none'
206
206
  }
207
207
  });
208
208
  return {
209
209
  trackProps: {
210
210
  ...trackInteractions,
211
211
  style: {
212
- position: "relative",
213
- touchAction: "none",
212
+ position: 'relative',
213
+ touchAction: 'none',
214
214
  width: outerRadius * 2,
215
215
  height: outerRadius * 2,
216
216
  background: `
@@ -238,30 +238,30 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
238
238
  thumbProps: {
239
239
  ...thumbInteractions,
240
240
  style: {
241
- position: "absolute",
241
+ position: 'absolute',
242
242
  left: outerRadius + x,
243
243
  top: outerRadius + y,
244
- transform: "translate(-50%, -50%)",
245
- touchAction: "none",
244
+ transform: 'translate(-50%, -50%)',
245
+ touchAction: 'none',
246
246
  ...forcedColorAdjustNoneStyle
247
247
  }
248
248
  },
249
249
  inputProps: (0, $iWAp3$reactariautils.mergeProps)(inputLabellingProps, {
250
- type: "range",
250
+ type: 'range',
251
251
  min: String(minValue),
252
252
  max: String(maxValue),
253
253
  step: String(step),
254
- "aria-valuetext": `${state.value.formatChannelValue("hue", locale)}, ${state.value.getHueName(locale)}`,
254
+ 'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,
255
255
  disabled: isDisabled,
256
- value: `${state.value.getChannelValue("hue")}`,
256
+ value: `${state.value.getChannelValue('hue')}`,
257
257
  name: name,
258
258
  onChange: (e)=>{
259
259
  state.setHue(parseFloat(e.target.value));
260
260
  },
261
261
  style: visuallyHiddenProps.style,
262
- "aria-errormessage": props["aria-errormessage"],
263
- "aria-describedby": props["aria-describedby"],
264
- "aria-details": props["aria-details"]
262
+ 'aria-errormessage': props['aria-errormessage'],
263
+ 'aria-describedby': props['aria-describedby'],
264
+ 'aria-details': props['aria-details']
265
265
  })
266
266
  };
267
267
  }
package/dist/useColorWheel.mjs CHANGED
@@ -20,7 +20,7 @@ import {useVisuallyHidden as $hcgPp$useVisuallyHidden} from "@react-aria/visuall
20
20
 
21
21
 
22
22
  function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
23
- let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
23
+ let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name } = props;
24
24
  let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $hcgPp$useGlobalListeners)();
25
25
  let thumbRadius = (innerRadius + outerRadius) / 2;
26
26
  let focusInput = (0, $hcgPp$useCallback)(()=>{
@@ -42,11 +42,11 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
42
42
  // remember to set this and unset it so that onChangeEnd is fired
43
43
  state.setDragging(true);
44
44
  switch(e.key){
45
- case "PageUp":
45
+ case 'PageUp':
46
46
  e.preventDefault();
47
47
  state.increment(state.pageStep);
48
48
  break;
49
- case "PageDown":
49
+ case 'PageDown':
50
50
  e.preventDefault();
51
51
  state.decrement(state.pageStep);
52
52
  break;
@@ -63,7 +63,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
63
63
  if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
64
64
  currentPosition.current.x += deltaX;
65
65
  currentPosition.current.y += deltaY;
66
- if (pointerType === "keyboard") {
66
+ if (pointerType === 'keyboard') {
67
67
  if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? state.pageStep : state.step);
68
68
  else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? state.pageStep : state.step);
69
69
  } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
@@ -93,10 +93,10 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
93
93
  currentPointer.current = id;
94
94
  focusInput();
95
95
  state.setDragging(true);
96
- if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
96
+ if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
97
97
  else {
98
- addGlobalListener(window, "mouseup", onThumbUp, false);
99
- addGlobalListener(window, "touchend", onThumbUp, false);
98
+ addGlobalListener(window, 'mouseup', onThumbUp, false);
99
+ addGlobalListener(window, 'touchend', onThumbUp, false);
100
100
  }
101
101
  }
102
102
  };
@@ -109,10 +109,10 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
109
109
  state.setDragging(false);
110
110
  currentPointer.current = undefined;
111
111
  isOnTrack.current = false;
112
- if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
112
+ if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
113
113
  else {
114
- removeGlobalListener(window, "mouseup", onThumbUp, false);
115
- removeGlobalListener(window, "touchend", onThumbUp, false);
114
+ removeGlobalListener(window, 'mouseup', onThumbUp, false);
115
+ removeGlobalListener(window, 'touchend', onThumbUp, false);
116
116
  }
117
117
  }
118
118
  };
@@ -127,10 +127,10 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
127
127
  state.setHueFromPoint(x, y, radius);
128
128
  focusInput();
129
129
  state.setDragging(true);
130
- if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
130
+ if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onTrackUp, false);
131
131
  else {
132
- addGlobalListener(window, "mouseup", onTrackUp, false);
133
- addGlobalListener(window, "touchend", onTrackUp, false);
132
+ addGlobalListener(window, 'mouseup', onTrackUp, false);
133
+ addGlobalListener(window, 'touchend', onTrackUp, false);
134
134
  }
135
135
  }
136
136
  };
@@ -143,17 +143,17 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
143
143
  currentPointer.current = undefined;
144
144
  state.setDragging(false);
145
145
  focusInput();
146
- if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onTrackUp, false);
146
+ if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onTrackUp, false);
147
147
  else {
148
- removeGlobalListener(window, "mouseup", onTrackUp, false);
149
- removeGlobalListener(window, "touchend", onTrackUp, false);
148
+ removeGlobalListener(window, 'mouseup', onTrackUp, false);
149
+ removeGlobalListener(window, 'touchend', onTrackUp, false);
150
150
  }
151
151
  }
152
152
  };
153
153
  let trackInteractions = isDisabled ? {} : (0, $hcgPp$mergeProps)({
154
- ...typeof PointerEvent !== "undefined" ? {
154
+ ...typeof PointerEvent !== 'undefined' ? {
155
155
  onPointerDown: (e)=>{
156
- if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
156
+ if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
157
157
  onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
158
158
  }
159
159
  } : {
@@ -172,7 +172,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
172
172
  onThumbDown(undefined);
173
173
  },
174
174
  onPointerDown: (e)=>{
175
- if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
175
+ if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
176
176
  onThumbDown(e.pointerId);
177
177
  },
178
178
  onTouchStart: (e)=>{
@@ -182,29 +182,29 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
182
182
  let { x: x, y: y } = state.getThumbPosition(thumbRadius);
183
183
  // Provide a default aria-label if none is given
184
184
  let { locale: locale } = (0, $hcgPp$useLocale)();
185
- if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
185
+ if (ariaLabel == null && props['aria-labelledby'] == null) ariaLabel = state.value.getChannelName('hue', locale);
186
186
  let inputLabellingProps = (0, $hcgPp$useLabels)({
187
187
  ...props,
188
- "aria-label": ariaLabel
188
+ 'aria-label': ariaLabel
189
189
  });
190
- let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange("hue");
190
+ let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange('hue');
191
191
  let forcedColorAdjustNoneStyle = {
192
- forcedColorAdjust: "none"
192
+ forcedColorAdjust: 'none'
193
193
  };
194
194
  let { visuallyHiddenProps: visuallyHiddenProps } = (0, $hcgPp$useVisuallyHidden)({
195
195
  style: {
196
- opacity: "0.0001",
197
- width: "100%",
198
- height: "100%",
199
- pointerEvents: "none"
196
+ opacity: '0.0001',
197
+ width: '100%',
198
+ height: '100%',
199
+ pointerEvents: 'none'
200
200
  }
201
201
  });
202
202
  return {
203
203
  trackProps: {
204
204
  ...trackInteractions,
205
205
  style: {
206
- position: "relative",
207
- touchAction: "none",
206
+ position: 'relative',
207
+ touchAction: 'none',
208
208
  width: outerRadius * 2,
209
209
  height: outerRadius * 2,
210
210
  background: `
@@ -232,30 +232,30 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
232
232
  thumbProps: {
233
233
  ...thumbInteractions,
234
234
  style: {
235
- position: "absolute",
235
+ position: 'absolute',
236
236
  left: outerRadius + x,
237
237
  top: outerRadius + y,
238
- transform: "translate(-50%, -50%)",
239
- touchAction: "none",
238
+ transform: 'translate(-50%, -50%)',
239
+ touchAction: 'none',
240
240
  ...forcedColorAdjustNoneStyle
241
241
  }
242
242
  },
243
243
  inputProps: (0, $hcgPp$mergeProps)(inputLabellingProps, {
244
- type: "range",
244
+ type: 'range',
245
245
  min: String(minValue),
246
246
  max: String(maxValue),
247
247
  step: String(step),
248
- "aria-valuetext": `${state.value.formatChannelValue("hue", locale)}, ${state.value.getHueName(locale)}`,
248
+ 'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,
249
249
  disabled: isDisabled,
250
- value: `${state.value.getChannelValue("hue")}`,
250
+ value: `${state.value.getChannelValue('hue')}`,
251
251
  name: name,
252
252
  onChange: (e)=>{
253
253
  state.setHue(parseFloat(e.target.value));
254
254
  },
255
255
  style: visuallyHiddenProps.style,
256
- "aria-errormessage": props["aria-errormessage"],
257
- "aria-describedby": props["aria-describedby"],
258
- "aria-details": props["aria-details"]
256
+ 'aria-errormessage': props['aria-errormessage'],
257
+ 'aria-describedby': props['aria-describedby'],
258
+ 'aria-details': props['aria-details']
259
259
  })
260
260
  };
261
261
  }