@react-spectrum/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/ColorArea.main.js +5 -5
- package/dist/ColorArea.mjs +5 -5
- package/dist/ColorArea.module.js +5 -5
- package/dist/ColorEditor.main.js +21 -21
- package/dist/ColorEditor.mjs +21 -21
- package/dist/ColorEditor.module.js +21 -21
- package/dist/ColorField.main.js +4 -4
- package/dist/ColorField.mjs +4 -4
- package/dist/ColorField.module.js +4 -4
- package/dist/ColorPicker.main.js +46 -46
- package/dist/ColorPicker.mjs +46 -46
- package/dist/ColorPicker.module.js +46 -46
- package/dist/ColorSlider.main.js +15 -15
- package/dist/ColorSlider.mjs +15 -15
- package/dist/ColorSlider.module.js +15 -15
- package/dist/ColorSwatch.main.js +30 -30
- package/dist/ColorSwatch.mjs +30 -30
- package/dist/ColorSwatch.module.js +30 -30
- package/dist/ColorSwatchPicker.main.js +40 -40
- package/dist/ColorSwatchPicker.mjs +40 -40
- package/dist/ColorSwatchPicker.module.js +40 -40
- package/dist/ColorThumb.main.js +20 -20
- package/dist/ColorThumb.mjs +20 -20
- package/dist/ColorThumb.module.js +20 -20
- package/dist/ColorWheel.main.js +8 -8
- package/dist/ColorWheel.mjs +8 -8
- package/dist/ColorWheel.module.js +8 -8
- package/package.json +22 -22
package/dist/ColorThumb.mjs
CHANGED
@@ -30,19 +30,19 @@ function $parcel$interopDefault(a) {
|
|
30
30
|
|
31
31
|
|
32
32
|
function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
|
33
|
-
let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className =
|
34
|
-
let valueCSS = value.toString(
|
33
|
+
let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = '', style: style, containerRef: containerRef, ...otherProps } = props;
|
34
|
+
let valueCSS = value.toString('css');
|
35
35
|
let loupeRef = (0, $1UQoL$useRef)(null);
|
36
36
|
let provider = (0, $1UQoL$useProvider)();
|
37
37
|
return /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
|
38
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))),
|
39
|
-
|
40
|
-
|
41
|
-
}) +
|
38
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), 'spectrum-ColorHandle', {
|
39
|
+
'is-focused': isFocused,
|
40
|
+
'is-disabled': isDisabled
|
41
|
+
}) + ' ' + className,
|
42
42
|
style: style,
|
43
43
|
...otherProps
|
44
44
|
}, /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
|
45
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))),
|
45
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), 'spectrum-ColorHandle-color'),
|
46
46
|
style: {
|
47
47
|
backgroundColor: valueCSS
|
48
48
|
}
|
@@ -79,17 +79,17 @@ function $3a90e89d07d7bbd5$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS,
|
|
79
79
|
containerRef
|
80
80
|
]);
|
81
81
|
// Compute the pixel position of the thumb.
|
82
|
-
let thumbTop = style.top ||
|
83
|
-
if (typeof thumbTop ===
|
84
|
-
let thumbLeft = style.left ||
|
85
|
-
if (typeof thumbLeft ===
|
82
|
+
let thumbTop = style.top || '50%';
|
83
|
+
if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
|
84
|
+
let thumbLeft = style.left || '50%';
|
85
|
+
if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
|
86
86
|
return /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
|
87
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
88
|
-
|
87
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe', {
|
88
|
+
'is-open': isOpen
|
89
89
|
}),
|
90
90
|
style: {
|
91
91
|
// Position relative to the viewport.
|
92
|
-
position:
|
92
|
+
position: 'fixed',
|
93
93
|
top: containerRect.top + thumbTop,
|
94
94
|
left: containerRect.left + thumbLeft
|
95
95
|
},
|
@@ -103,33 +103,33 @@ function $3a90e89d07d7bbd5$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS,
|
|
103
103
|
height: "16",
|
104
104
|
patternUnits: "userSpaceOnUse"
|
105
105
|
}, /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
|
106
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
106
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner-background'),
|
107
107
|
x: "0",
|
108
108
|
y: "0",
|
109
109
|
width: "16",
|
110
110
|
height: "16"
|
111
111
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
|
112
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
112
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner-checker'),
|
113
113
|
x: "0",
|
114
114
|
y: "0",
|
115
115
|
width: "8",
|
116
116
|
height: "8"
|
117
117
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
|
118
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
118
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner-checker'),
|
119
119
|
x: "8",
|
120
120
|
y: "8",
|
121
121
|
width: "8",
|
122
122
|
height: "8"
|
123
123
|
})), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
|
124
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
124
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner'),
|
125
125
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
126
126
|
fill: `url(#${patternId})`
|
127
127
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
|
128
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
128
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner'),
|
129
129
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
130
130
|
fill: valueCSS
|
131
131
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
|
132
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
132
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-outer'),
|
133
133
|
d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
|
134
134
|
}));
|
135
135
|
}
|
@@ -30,19 +30,19 @@ function $parcel$interopDefault(a) {
|
|
30
30
|
|
31
31
|
|
32
32
|
function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
|
33
|
-
let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className =
|
34
|
-
let valueCSS = value.toString(
|
33
|
+
let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = '', style: style, containerRef: containerRef, ...otherProps } = props;
|
34
|
+
let valueCSS = value.toString('css');
|
35
35
|
let loupeRef = (0, $1UQoL$useRef)(null);
|
36
36
|
let provider = (0, $1UQoL$useProvider)();
|
37
37
|
return /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
|
38
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))),
|
39
|
-
|
40
|
-
|
41
|
-
}) +
|
38
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), 'spectrum-ColorHandle', {
|
39
|
+
'is-focused': isFocused,
|
40
|
+
'is-disabled': isDisabled
|
41
|
+
}) + ' ' + className,
|
42
42
|
style: style,
|
43
43
|
...otherProps
|
44
44
|
}, /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
|
45
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))),
|
45
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), 'spectrum-ColorHandle-color'),
|
46
46
|
style: {
|
47
47
|
backgroundColor: valueCSS
|
48
48
|
}
|
@@ -79,17 +79,17 @@ function $3a90e89d07d7bbd5$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS,
|
|
79
79
|
containerRef
|
80
80
|
]);
|
81
81
|
// Compute the pixel position of the thumb.
|
82
|
-
let thumbTop = style.top ||
|
83
|
-
if (typeof thumbTop ===
|
84
|
-
let thumbLeft = style.left ||
|
85
|
-
if (typeof thumbLeft ===
|
82
|
+
let thumbTop = style.top || '50%';
|
83
|
+
if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
|
84
|
+
let thumbLeft = style.left || '50%';
|
85
|
+
if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
|
86
86
|
return /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
|
87
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
88
|
-
|
87
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe', {
|
88
|
+
'is-open': isOpen
|
89
89
|
}),
|
90
90
|
style: {
|
91
91
|
// Position relative to the viewport.
|
92
|
-
position:
|
92
|
+
position: 'fixed',
|
93
93
|
top: containerRect.top + thumbTop,
|
94
94
|
left: containerRect.left + thumbLeft
|
95
95
|
},
|
@@ -103,33 +103,33 @@ function $3a90e89d07d7bbd5$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS,
|
|
103
103
|
height: "16",
|
104
104
|
patternUnits: "userSpaceOnUse"
|
105
105
|
}, /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
|
106
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
106
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner-background'),
|
107
107
|
x: "0",
|
108
108
|
y: "0",
|
109
109
|
width: "16",
|
110
110
|
height: "16"
|
111
111
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
|
112
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
112
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner-checker'),
|
113
113
|
x: "0",
|
114
114
|
y: "0",
|
115
115
|
width: "8",
|
116
116
|
height: "8"
|
117
117
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
|
118
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
118
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner-checker'),
|
119
119
|
x: "8",
|
120
120
|
y: "8",
|
121
121
|
width: "8",
|
122
122
|
height: "8"
|
123
123
|
})), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
|
124
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
124
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner'),
|
125
125
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
126
126
|
fill: `url(#${patternId})`
|
127
127
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
|
128
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
128
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-inner'),
|
129
129
|
d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
|
130
130
|
fill: valueCSS
|
131
131
|
}), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
|
132
|
-
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))),
|
132
|
+
className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), 'spectrum-ColorLoupe-outer'),
|
133
133
|
d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
|
134
134
|
}));
|
135
135
|
}
|
package/dist/ColorWheel.main.js
CHANGED
@@ -54,7 +54,7 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
|
|
54
54
|
let resizeHandler = (0, $gEgjt$react.useCallback)(()=>{
|
55
55
|
if (containerRef.current) {
|
56
56
|
setWheelRadius(containerRef.current.offsetWidth / 2);
|
57
|
-
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue(
|
57
|
+
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
|
58
58
|
if (thickness) setWheelThickness(parseInt(thickness, 10));
|
59
59
|
}
|
60
60
|
}, [
|
@@ -81,31 +81,31 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
|
|
81
81
|
}, state, inputRef);
|
82
82
|
let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $gEgjt$reactariafocus.useFocusRing)();
|
83
83
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).createElement("div", {
|
84
|
-
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))),
|
85
|
-
|
84
|
+
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))), 'spectrum-ColorWheel', {
|
85
|
+
'is-disabled': isDisabled
|
86
86
|
}, styleProps.className),
|
87
87
|
ref: containerRef,
|
88
88
|
style: {
|
89
89
|
...styleProps.style,
|
90
90
|
// Workaround around https://github.com/adobe/spectrum-css/issues/1032
|
91
91
|
// @ts-ignore
|
92
|
-
|
93
|
-
|
92
|
+
'width': size,
|
93
|
+
'height': size
|
94
94
|
}
|
95
95
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).createElement("div", {
|
96
96
|
...trackProps,
|
97
|
-
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))),
|
97
|
+
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))), 'spectrum-ColorWheel-gradient')
|
98
98
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).createElement((0, $2b9adc23f6c7cae1$exports.ColorThumb), {
|
99
99
|
value: state.getDisplayColor(),
|
100
100
|
isFocused: isFocusVisible,
|
101
101
|
isDisabled: isDisabled,
|
102
102
|
isDragging: state.isDragging,
|
103
103
|
containerRef: containerRef,
|
104
|
-
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))),
|
104
|
+
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))), 'spectrum-ColorWheel-handle'),
|
105
105
|
...thumbProps
|
106
106
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).createElement("input", {
|
107
107
|
...focusProps,
|
108
|
-
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))),
|
108
|
+
className: (0, $gEgjt$reactspectrumutils.classNames)((0, ($parcel$interopDefault($8fc6b1a2f4e7f682$exports))), 'spectrum-ColorWheel-slider'),
|
109
109
|
...inputProps,
|
110
110
|
ref: inputRef
|
111
111
|
})));
|
package/dist/ColorWheel.mjs
CHANGED
@@ -48,7 +48,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
48
48
|
let resizeHandler = (0, $bv4AR$useCallback)(()=>{
|
49
49
|
if (containerRef.current) {
|
50
50
|
setWheelRadius(containerRef.current.offsetWidth / 2);
|
51
|
-
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue(
|
51
|
+
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
|
52
52
|
if (thickness) setWheelThickness(parseInt(thickness, 10));
|
53
53
|
}
|
54
54
|
}, [
|
@@ -75,31 +75,31 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
75
75
|
}, state, inputRef);
|
76
76
|
let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $bv4AR$useFocusRing)();
|
77
77
|
return /*#__PURE__*/ (0, $bv4AR$react).createElement("div", {
|
78
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
79
|
-
|
78
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel', {
|
79
|
+
'is-disabled': isDisabled
|
80
80
|
}, styleProps.className),
|
81
81
|
ref: containerRef,
|
82
82
|
style: {
|
83
83
|
...styleProps.style,
|
84
84
|
// Workaround around https://github.com/adobe/spectrum-css/issues/1032
|
85
85
|
// @ts-ignore
|
86
|
-
|
87
|
-
|
86
|
+
'width': size,
|
87
|
+
'height': size
|
88
88
|
}
|
89
89
|
}, /*#__PURE__*/ (0, $bv4AR$react).createElement("div", {
|
90
90
|
...trackProps,
|
91
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
91
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel-gradient')
|
92
92
|
}), /*#__PURE__*/ (0, $bv4AR$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
|
93
93
|
value: state.getDisplayColor(),
|
94
94
|
isFocused: isFocusVisible,
|
95
95
|
isDisabled: isDisabled,
|
96
96
|
isDragging: state.isDragging,
|
97
97
|
containerRef: containerRef,
|
98
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
98
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel-handle'),
|
99
99
|
...thumbProps
|
100
100
|
}, /*#__PURE__*/ (0, $bv4AR$react).createElement("input", {
|
101
101
|
...focusProps,
|
102
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
102
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel-slider'),
|
103
103
|
...inputProps,
|
104
104
|
ref: inputRef
|
105
105
|
})));
|
@@ -48,7 +48,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
48
48
|
let resizeHandler = (0, $bv4AR$useCallback)(()=>{
|
49
49
|
if (containerRef.current) {
|
50
50
|
setWheelRadius(containerRef.current.offsetWidth / 2);
|
51
|
-
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue(
|
51
|
+
let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
|
52
52
|
if (thickness) setWheelThickness(parseInt(thickness, 10));
|
53
53
|
}
|
54
54
|
}, [
|
@@ -75,31 +75,31 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
75
75
|
}, state, inputRef);
|
76
76
|
let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $bv4AR$useFocusRing)();
|
77
77
|
return /*#__PURE__*/ (0, $bv4AR$react).createElement("div", {
|
78
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
79
|
-
|
78
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel', {
|
79
|
+
'is-disabled': isDisabled
|
80
80
|
}, styleProps.className),
|
81
81
|
ref: containerRef,
|
82
82
|
style: {
|
83
83
|
...styleProps.style,
|
84
84
|
// Workaround around https://github.com/adobe/spectrum-css/issues/1032
|
85
85
|
// @ts-ignore
|
86
|
-
|
87
|
-
|
86
|
+
'width': size,
|
87
|
+
'height': size
|
88
88
|
}
|
89
89
|
}, /*#__PURE__*/ (0, $bv4AR$react).createElement("div", {
|
90
90
|
...trackProps,
|
91
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
91
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel-gradient')
|
92
92
|
}), /*#__PURE__*/ (0, $bv4AR$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
|
93
93
|
value: state.getDisplayColor(),
|
94
94
|
isFocused: isFocusVisible,
|
95
95
|
isDisabled: isDisabled,
|
96
96
|
isDragging: state.isDragging,
|
97
97
|
containerRef: containerRef,
|
98
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
98
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel-handle'),
|
99
99
|
...thumbProps
|
100
100
|
}, /*#__PURE__*/ (0, $bv4AR$react).createElement("input", {
|
101
101
|
...focusProps,
|
102
|
-
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))),
|
102
|
+
className: (0, $bv4AR$classNames)((0, ($parcel$interopDefault($bv4AR$colorwheel_vars_cssmodulejs))), 'spectrum-ColorWheel-slider'),
|
103
103
|
...inputProps,
|
104
104
|
ref: inputRef
|
105
105
|
})));
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@react-spectrum/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",
|
@@ -36,29 +36,29 @@
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@react-aria/color": "3.0.0-nightly.
|
40
|
-
"@react-aria/focus": "3.0.0-nightly.
|
41
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
42
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
43
|
-
"@react-aria/utils": "3.0.0-nightly.
|
44
|
-
"@react-spectrum/dialog": "3.0.0-nightly.
|
45
|
-
"@react-spectrum/form": "3.0.0-nightly.
|
46
|
-
"@react-spectrum/label": "3.16.
|
47
|
-
"@react-spectrum/overlays": "3.0.0-nightly.
|
48
|
-
"@react-spectrum/picker": "3.14.
|
49
|
-
"@react-spectrum/textfield": "3.0.0-nightly.
|
50
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
51
|
-
"@react-spectrum/view": "3.0.0-nightly.
|
52
|
-
"@react-stately/color": "3.6.
|
53
|
-
"@react-types/color": "3.0.0-nightly.
|
54
|
-
"@react-types/shared": "3.0.0-nightly.
|
55
|
-
"@react-types/textfield": "3.0.0-nightly.
|
39
|
+
"@react-aria/color": "3.0.0-nightly.4629+c34886769",
|
40
|
+
"@react-aria/focus": "3.0.0-nightly.2917+c34886769",
|
41
|
+
"@react-aria/i18n": "3.0.0-nightly.2917+c34886769",
|
42
|
+
"@react-aria/interactions": "3.0.0-nightly.2917+c34886769",
|
43
|
+
"@react-aria/utils": "3.0.0-nightly.2917+c34886769",
|
44
|
+
"@react-spectrum/dialog": "3.0.0-nightly.2917+c34886769",
|
45
|
+
"@react-spectrum/form": "3.0.0-nightly.2917+c34886769",
|
46
|
+
"@react-spectrum/label": "3.16.7-nightly.4629+c34886769",
|
47
|
+
"@react-spectrum/overlays": "3.0.0-nightly.2917+c34886769",
|
48
|
+
"@react-spectrum/picker": "3.14.6-nightly.4629+c34886769",
|
49
|
+
"@react-spectrum/textfield": "3.0.0-nightly.2917+c34886769",
|
50
|
+
"@react-spectrum/utils": "3.0.0-nightly.2917+c34886769",
|
51
|
+
"@react-spectrum/view": "3.0.0-nightly.2917+c34886769",
|
52
|
+
"@react-stately/color": "3.6.2-nightly.4629+c34886769",
|
53
|
+
"@react-types/color": "3.0.0-nightly.4629+c34886769",
|
54
|
+
"@react-types/shared": "3.0.0-nightly.2917+c34886769",
|
55
|
+
"@react-types/textfield": "3.0.0-nightly.2917+c34886769",
|
56
56
|
"@swc/helpers": "^0.5.0",
|
57
|
-
"react-aria-components": "1.2.
|
57
|
+
"react-aria-components": "1.2.2-nightly.4629+c34886769"
|
58
58
|
},
|
59
59
|
"devDependencies": {
|
60
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
61
|
-
"@react-spectrum/style-macro-s1": "3.0.0-nightly.
|
60
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2917+c34886769",
|
61
|
+
"@react-spectrum/style-macro-s1": "3.0.0-nightly.4629+c34886769"
|
62
62
|
},
|
63
63
|
"peerDependencies": {
|
64
64
|
"@react-spectrum/provider": "^3.0.0",
|
@@ -68,5 +68,5 @@
|
|
68
68
|
"publishConfig": {
|
69
69
|
"access": "public"
|
70
70
|
},
|
71
|
-
"gitHead": "
|
71
|
+
"gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754"
|
72
72
|
}
|