@react-aria/color 3.0.0-nightly.4624 → 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.
- package/dist/useColorArea.main.js +70 -70
- package/dist/useColorArea.mjs +70 -70
- package/dist/useColorArea.module.js +70 -70
- package/dist/useColorAreaGradient.main.js +26 -26
- package/dist/useColorAreaGradient.mjs +26 -26
- package/dist/useColorAreaGradient.module.js +26 -26
- package/dist/useColorChannelField.main.js +1 -1
- package/dist/useColorChannelField.mjs +1 -1
- package/dist/useColorChannelField.module.js +1 -1
- package/dist/useColorField.main.js +12 -12
- package/dist/useColorField.mjs +12 -12
- package/dist/useColorField.module.js +12 -12
- package/dist/useColorSlider.main.js +28 -28
- package/dist/useColorSlider.mjs +28 -28
- package/dist/useColorSlider.module.js +28 -28
- package/dist/useColorSwatch.main.js +12 -12
- package/dist/useColorSwatch.mjs +12 -12
- package/dist/useColorSwatch.module.js +12 -12
- package/dist/useColorWheel.main.js +38 -38
- package/dist/useColorWheel.mjs +38 -38
- package/dist/useColorWheel.module.js +38 -38
- package/package.json +14 -14
|
@@ -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,
|
|
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
|
|
45
|
+
case 'PageUp':
|
|
46
46
|
e.preventDefault();
|
|
47
47
|
state.increment(state.pageStep);
|
|
48
48
|
break;
|
|
49
|
-
case
|
|
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 ===
|
|
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 !==
|
|
96
|
+
if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
|
|
97
97
|
else {
|
|
98
|
-
addGlobalListener(window,
|
|
99
|
-
addGlobalListener(window,
|
|
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 !==
|
|
112
|
+
if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
|
|
113
113
|
else {
|
|
114
|
-
removeGlobalListener(window,
|
|
115
|
-
removeGlobalListener(window,
|
|
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 !==
|
|
130
|
+
if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onTrackUp, false);
|
|
131
131
|
else {
|
|
132
|
-
addGlobalListener(window,
|
|
133
|
-
addGlobalListener(window,
|
|
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 !==
|
|
146
|
+
if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onTrackUp, false);
|
|
147
147
|
else {
|
|
148
|
-
removeGlobalListener(window,
|
|
149
|
-
removeGlobalListener(window,
|
|
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 !==
|
|
154
|
+
...typeof PointerEvent !== 'undefined' ? {
|
|
155
155
|
onPointerDown: (e)=>{
|
|
156
|
-
if (e.pointerType ===
|
|
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 ===
|
|
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[
|
|
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
|
-
|
|
188
|
+
'aria-label': ariaLabel
|
|
189
189
|
});
|
|
190
|
-
let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange(
|
|
190
|
+
let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange('hue');
|
|
191
191
|
let forcedColorAdjustNoneStyle = {
|
|
192
|
-
forcedColorAdjust:
|
|
192
|
+
forcedColorAdjust: 'none'
|
|
193
193
|
};
|
|
194
194
|
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $hcgPp$useVisuallyHidden)({
|
|
195
195
|
style: {
|
|
196
|
-
opacity:
|
|
197
|
-
width:
|
|
198
|
-
height:
|
|
199
|
-
pointerEvents:
|
|
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:
|
|
207
|
-
touchAction:
|
|
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:
|
|
235
|
+
position: 'absolute',
|
|
236
236
|
left: outerRadius + x,
|
|
237
237
|
top: outerRadius + y,
|
|
238
|
-
transform:
|
|
239
|
-
touchAction:
|
|
238
|
+
transform: 'translate(-50%, -50%)',
|
|
239
|
+
touchAction: 'none',
|
|
240
240
|
...forcedColorAdjustNoneStyle
|
|
241
241
|
}
|
|
242
242
|
},
|
|
243
243
|
inputProps: (0, $hcgPp$mergeProps)(inputLabellingProps, {
|
|
244
|
-
type:
|
|
244
|
+
type: 'range',
|
|
245
245
|
min: String(minValue),
|
|
246
246
|
max: String(maxValue),
|
|
247
247
|
step: String(step),
|
|
248
|
-
|
|
248
|
+
'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,
|
|
249
249
|
disabled: isDisabled,
|
|
250
|
-
value: `${state.value.getChannelValue(
|
|
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
|
-
|
|
257
|
-
|
|
258
|
-
|
|
256
|
+
'aria-errormessage': props['aria-errormessage'],
|
|
257
|
+
'aria-describedby': props['aria-describedby'],
|
|
258
|
+
'aria-details': props['aria-details']
|
|
259
259
|
})
|
|
260
260
|
};
|
|
261
261
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/color",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.4629+c34886769",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/numberfield": "3.0.0-nightly.
|
|
28
|
-
"@react-aria/slider": "3.7.
|
|
29
|
-
"@react-aria/spinbutton": "3.0.0-nightly.
|
|
30
|
-
"@react-aria/textfield": "3.0.0-nightly.
|
|
31
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
32
|
-
"@react-aria/visually-hidden": "3.0.0-nightly.
|
|
33
|
-
"@react-stately/color": "3.6.
|
|
34
|
-
"@react-stately/form": "3.0.
|
|
35
|
-
"@react-types/color": "3.0.0-nightly.
|
|
36
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/i18n": "3.0.0-nightly.2917+c34886769",
|
|
26
|
+
"@react-aria/interactions": "3.0.0-nightly.2917+c34886769",
|
|
27
|
+
"@react-aria/numberfield": "3.0.0-nightly.2917+c34886769",
|
|
28
|
+
"@react-aria/slider": "3.7.9-nightly.4629+c34886769",
|
|
29
|
+
"@react-aria/spinbutton": "3.0.0-nightly.2917+c34886769",
|
|
30
|
+
"@react-aria/textfield": "3.0.0-nightly.2917+c34886769",
|
|
31
|
+
"@react-aria/utils": "3.0.0-nightly.2917+c34886769",
|
|
32
|
+
"@react-aria/visually-hidden": "3.0.0-nightly.2917+c34886769",
|
|
33
|
+
"@react-stately/color": "3.6.2-nightly.4629+c34886769",
|
|
34
|
+
"@react-stately/form": "3.0.4-nightly.4629+c34886769",
|
|
35
|
+
"@react-types/color": "3.0.0-nightly.4629+c34886769",
|
|
36
|
+
"@react-types/shared": "3.0.0-nightly.2917+c34886769",
|
|
37
37
|
"@swc/helpers": "^0.5.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754"
|
|
47
47
|
}
|