@react-spectrum/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.
- 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/ColorPicker.mjs
CHANGED
|
@@ -36,47 +36,47 @@ function $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
|
|
|
36
36
|
ref: domRef,
|
|
37
37
|
className: function anonymous(props) {
|
|
38
38
|
let rules = "";
|
|
39
|
-
rules +=
|
|
40
|
-
rules +=
|
|
41
|
-
rules +=
|
|
42
|
-
rules +=
|
|
43
|
-
rules +=
|
|
44
|
-
rules +=
|
|
45
|
-
rules +=
|
|
46
|
-
rules +=
|
|
47
|
-
rules +=
|
|
48
|
-
rules +=
|
|
49
|
-
rules +=
|
|
50
|
-
rules +=
|
|
51
|
-
rules +=
|
|
52
|
-
rules +=
|
|
53
|
-
rules +=
|
|
54
|
-
rules +=
|
|
55
|
-
rules +=
|
|
56
|
-
rules +=
|
|
57
|
-
rules +=
|
|
58
|
-
rules +=
|
|
59
|
-
if (props.size === "L") rules +=
|
|
60
|
-
else if (props.size === "M") rules +=
|
|
61
|
-
else if (props.size === "S") rules +=
|
|
62
|
-
else if (props.size === "XS") rules +=
|
|
39
|
+
rules += ' ba';
|
|
40
|
+
rules += ' Af';
|
|
41
|
+
rules += ' Ia';
|
|
42
|
+
rules += ' Ja';
|
|
43
|
+
rules += ' Ga';
|
|
44
|
+
rules += ' Ha';
|
|
45
|
+
rules += ' _Sd';
|
|
46
|
+
rules += ' _Uc';
|
|
47
|
+
rules += ' lM';
|
|
48
|
+
rules += ' mM';
|
|
49
|
+
rules += ' _Ea';
|
|
50
|
+
rules += ' _5-bc1l9oh';
|
|
51
|
+
rules += ' _5-1uotwbwg';
|
|
52
|
+
rules += ' _5-eo0c6sf';
|
|
53
|
+
rules += ' _5-enzzrge';
|
|
54
|
+
rules += ' _5-enzykdd';
|
|
55
|
+
rules += ' _5-enzwzjc';
|
|
56
|
+
rules += ' _5-enzrfpb';
|
|
57
|
+
rules += ' _5a';
|
|
58
|
+
rules += ' a___K';
|
|
59
|
+
if (props.size === "L") rules += ' _6d';
|
|
60
|
+
else if (props.size === "M") rules += ' _6c';
|
|
61
|
+
else if (props.size === "S") rules += ' _6b';
|
|
62
|
+
else if (props.size === "XS") rules += ' _6a';
|
|
63
63
|
return rules;
|
|
64
64
|
}({
|
|
65
|
-
size: props.size ||
|
|
65
|
+
size: props.size || 'M'
|
|
66
66
|
})
|
|
67
67
|
}, ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$react).Fragment, null, /*#__PURE__*/ (0, $5bRyn$react).createElement("div", {
|
|
68
68
|
className: function anonymous(props) {
|
|
69
69
|
let rules = "";
|
|
70
|
-
if (props.isFocusVisible) rules +=
|
|
71
|
-
else rules +=
|
|
72
|
-
rules +=
|
|
73
|
-
rules +=
|
|
74
|
-
rules +=
|
|
75
|
-
rules +=
|
|
76
|
-
rules +=
|
|
77
|
-
rules +=
|
|
78
|
-
rules +=
|
|
79
|
-
rules +=
|
|
70
|
+
if (props.isFocusVisible) rules += ' _Eb';
|
|
71
|
+
else rules += ' _Ea';
|
|
72
|
+
rules += ' da___D';
|
|
73
|
+
rules += ' d___I';
|
|
74
|
+
rules += ' _Gc';
|
|
75
|
+
rules += ' _Fc';
|
|
76
|
+
rules += ' _pc';
|
|
77
|
+
rules += ' _qc';
|
|
78
|
+
rules += ' _rc';
|
|
79
|
+
rules += ' _sc';
|
|
80
80
|
return rules;
|
|
81
81
|
}({
|
|
82
82
|
isFocusVisible: isFocusVisible
|
|
@@ -85,25 +85,25 @@ function $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
|
|
|
85
85
|
ref: swatchRef,
|
|
86
86
|
size: props.size,
|
|
87
87
|
rounding: props.rounding,
|
|
88
|
-
"aria-label": props[
|
|
89
|
-
"aria-labelledby": props[
|
|
90
|
-
"aria-describedby": props[
|
|
91
|
-
"aria-details": props[
|
|
88
|
+
"aria-label": props['aria-label'],
|
|
89
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
90
|
+
"aria-describedby": props['aria-describedby'],
|
|
91
|
+
"aria-details": props['aria-details']
|
|
92
92
|
})), props.label && /*#__PURE__*/ (0, $5bRyn$react).createElement("span", {
|
|
93
93
|
id: labelId
|
|
94
94
|
}, props.label))), /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Dialog), {
|
|
95
|
-
"aria-labelledby": props.label ? labelId : props[
|
|
96
|
-
"aria-label": props[
|
|
95
|
+
"aria-labelledby": props.label ? labelId : props['aria-labelledby'],
|
|
96
|
+
"aria-label": props['aria-label'],
|
|
97
97
|
UNSAFE_style: {
|
|
98
|
-
width:
|
|
98
|
+
width: 'fit-content',
|
|
99
99
|
minWidth: 0,
|
|
100
|
-
margin:
|
|
100
|
+
margin: '0 auto' // Center within tray.
|
|
101
101
|
}
|
|
102
102
|
}, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Content), {
|
|
103
103
|
UNSAFE_style: {
|
|
104
|
-
position:
|
|
105
|
-
margin:
|
|
106
|
-
padding:
|
|
104
|
+
position: 'relative',
|
|
105
|
+
margin: 'calc(var(--spectrum-dialog-padding) * -1)',
|
|
106
|
+
padding: 'var(--spectrum-global-dimension-size-200)'
|
|
107
107
|
}
|
|
108
108
|
}, props.children))));
|
|
109
109
|
}
|
|
@@ -36,47 +36,47 @@ function $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
|
|
|
36
36
|
ref: domRef,
|
|
37
37
|
className: function anonymous(props) {
|
|
38
38
|
let rules = "";
|
|
39
|
-
rules +=
|
|
40
|
-
rules +=
|
|
41
|
-
rules +=
|
|
42
|
-
rules +=
|
|
43
|
-
rules +=
|
|
44
|
-
rules +=
|
|
45
|
-
rules +=
|
|
46
|
-
rules +=
|
|
47
|
-
rules +=
|
|
48
|
-
rules +=
|
|
49
|
-
rules +=
|
|
50
|
-
rules +=
|
|
51
|
-
rules +=
|
|
52
|
-
rules +=
|
|
53
|
-
rules +=
|
|
54
|
-
rules +=
|
|
55
|
-
rules +=
|
|
56
|
-
rules +=
|
|
57
|
-
rules +=
|
|
58
|
-
rules +=
|
|
59
|
-
if (props.size === "L") rules +=
|
|
60
|
-
else if (props.size === "M") rules +=
|
|
61
|
-
else if (props.size === "S") rules +=
|
|
62
|
-
else if (props.size === "XS") rules +=
|
|
39
|
+
rules += ' ba';
|
|
40
|
+
rules += ' Af';
|
|
41
|
+
rules += ' Ia';
|
|
42
|
+
rules += ' Ja';
|
|
43
|
+
rules += ' Ga';
|
|
44
|
+
rules += ' Ha';
|
|
45
|
+
rules += ' _Sd';
|
|
46
|
+
rules += ' _Uc';
|
|
47
|
+
rules += ' lM';
|
|
48
|
+
rules += ' mM';
|
|
49
|
+
rules += ' _Ea';
|
|
50
|
+
rules += ' _5-bc1l9oh';
|
|
51
|
+
rules += ' _5-1uotwbwg';
|
|
52
|
+
rules += ' _5-eo0c6sf';
|
|
53
|
+
rules += ' _5-enzzrge';
|
|
54
|
+
rules += ' _5-enzykdd';
|
|
55
|
+
rules += ' _5-enzwzjc';
|
|
56
|
+
rules += ' _5-enzrfpb';
|
|
57
|
+
rules += ' _5a';
|
|
58
|
+
rules += ' a___K';
|
|
59
|
+
if (props.size === "L") rules += ' _6d';
|
|
60
|
+
else if (props.size === "M") rules += ' _6c';
|
|
61
|
+
else if (props.size === "S") rules += ' _6b';
|
|
62
|
+
else if (props.size === "XS") rules += ' _6a';
|
|
63
63
|
return rules;
|
|
64
64
|
}({
|
|
65
|
-
size: props.size ||
|
|
65
|
+
size: props.size || 'M'
|
|
66
66
|
})
|
|
67
67
|
}, ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$react).Fragment, null, /*#__PURE__*/ (0, $5bRyn$react).createElement("div", {
|
|
68
68
|
className: function anonymous(props) {
|
|
69
69
|
let rules = "";
|
|
70
|
-
if (props.isFocusVisible) rules +=
|
|
71
|
-
else rules +=
|
|
72
|
-
rules +=
|
|
73
|
-
rules +=
|
|
74
|
-
rules +=
|
|
75
|
-
rules +=
|
|
76
|
-
rules +=
|
|
77
|
-
rules +=
|
|
78
|
-
rules +=
|
|
79
|
-
rules +=
|
|
70
|
+
if (props.isFocusVisible) rules += ' _Eb';
|
|
71
|
+
else rules += ' _Ea';
|
|
72
|
+
rules += ' da___D';
|
|
73
|
+
rules += ' d___I';
|
|
74
|
+
rules += ' _Gc';
|
|
75
|
+
rules += ' _Fc';
|
|
76
|
+
rules += ' _pc';
|
|
77
|
+
rules += ' _qc';
|
|
78
|
+
rules += ' _rc';
|
|
79
|
+
rules += ' _sc';
|
|
80
80
|
return rules;
|
|
81
81
|
}({
|
|
82
82
|
isFocusVisible: isFocusVisible
|
|
@@ -85,25 +85,25 @@ function $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
|
|
|
85
85
|
ref: swatchRef,
|
|
86
86
|
size: props.size,
|
|
87
87
|
rounding: props.rounding,
|
|
88
|
-
"aria-label": props[
|
|
89
|
-
"aria-labelledby": props[
|
|
90
|
-
"aria-describedby": props[
|
|
91
|
-
"aria-details": props[
|
|
88
|
+
"aria-label": props['aria-label'],
|
|
89
|
+
"aria-labelledby": props['aria-labelledby'],
|
|
90
|
+
"aria-describedby": props['aria-describedby'],
|
|
91
|
+
"aria-details": props['aria-details']
|
|
92
92
|
})), props.label && /*#__PURE__*/ (0, $5bRyn$react).createElement("span", {
|
|
93
93
|
id: labelId
|
|
94
94
|
}, props.label))), /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Dialog), {
|
|
95
|
-
"aria-labelledby": props.label ? labelId : props[
|
|
96
|
-
"aria-label": props[
|
|
95
|
+
"aria-labelledby": props.label ? labelId : props['aria-labelledby'],
|
|
96
|
+
"aria-label": props['aria-label'],
|
|
97
97
|
UNSAFE_style: {
|
|
98
|
-
width:
|
|
98
|
+
width: 'fit-content',
|
|
99
99
|
minWidth: 0,
|
|
100
|
-
margin:
|
|
100
|
+
margin: '0 auto' // Center within tray.
|
|
101
101
|
}
|
|
102
102
|
}, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Content), {
|
|
103
103
|
UNSAFE_style: {
|
|
104
|
-
position:
|
|
105
|
-
margin:
|
|
106
|
-
padding:
|
|
104
|
+
position: 'relative',
|
|
105
|
+
margin: 'calc(var(--spectrum-dialog-padding) * -1)',
|
|
106
|
+
padding: 'var(--spectrum-global-dimension-size-200)'
|
|
107
107
|
}
|
|
108
108
|
}, props.children))));
|
|
109
109
|
}
|
package/dist/ColorSlider.main.js
CHANGED
|
@@ -48,8 +48,8 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
|
|
|
48
48
|
let trackRef = (0, $5EHW1$react.useRef)(null);
|
|
49
49
|
let domRef = (0, $5EHW1$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
50
50
|
[props, domRef] = (0, $5EHW1$reactariacomponents.useContextProps)(props, domRef, (0, $5EHW1$reactariacomponents.ColorSliderContext));
|
|
51
|
-
let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel,
|
|
52
|
-
let vertical = orientation ===
|
|
51
|
+
let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, 'aria-label': ariaLabel } = props;
|
|
52
|
+
let vertical = orientation === 'vertical';
|
|
53
53
|
let { styleProps: styleProps } = (0, $5EHW1$reactspectrumutils.useStyleProps)(props);
|
|
54
54
|
let { locale: locale } = (0, $5EHW1$reactariai18n.useLocale)();
|
|
55
55
|
let state = (0, $5EHW1$reactstatelycolor.useColorSliderState)({
|
|
@@ -58,20 +58,20 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
|
|
|
58
58
|
});
|
|
59
59
|
// If vertical and a label is provided, use it as an aria-label instead.
|
|
60
60
|
if (vertical && label) {
|
|
61
|
-
ariaLabel = ariaLabel || (typeof label ===
|
|
61
|
+
ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
|
|
62
62
|
label = null;
|
|
63
63
|
}
|
|
64
64
|
// If no external label, aria-label or aria-labelledby is provided,
|
|
65
65
|
// default to displaying the localized channel value.
|
|
66
66
|
// Specifically check if label is undefined. If label is `null` then display no visible label.
|
|
67
67
|
// A default aria-label is provided by useColorSlider in that case.
|
|
68
|
-
if (label === undefined && !ariaLabel && !props[
|
|
68
|
+
if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
|
|
69
69
|
// Show the value label by default if there is a visible label
|
|
70
70
|
if (showValueLabel == null) showValueLabel = !!label;
|
|
71
71
|
let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $5EHW1$reactariacolor.useColorSlider)({
|
|
72
72
|
...props,
|
|
73
73
|
label: label,
|
|
74
|
-
|
|
74
|
+
'aria-label': ariaLabel,
|
|
75
75
|
trackRef: trackRef,
|
|
76
76
|
inputRef: inputRef
|
|
77
77
|
}, state);
|
|
@@ -85,26 +85,26 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
|
|
|
85
85
|
ref: domRef,
|
|
86
86
|
...styleProps,
|
|
87
87
|
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), {
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
'spectrum-ColorSlider-container--horizontal': !vertical,
|
|
89
|
+
'spectrum-ColorSlider-container--vertical': vertical
|
|
90
90
|
})
|
|
91
91
|
}, label && /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("div", {
|
|
92
|
-
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))),
|
|
92
|
+
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider-labelContainer')
|
|
93
93
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $5EHW1$reactspectrumlabel.Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $5EHW1$reactspectrumutils.SlotProvider), {
|
|
94
94
|
slots: {
|
|
95
95
|
actionButton: {
|
|
96
|
-
UNSAFE_className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))),
|
|
96
|
+
UNSAFE_className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider-contextualHelp')
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
}, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $5EHW1$reactspectrumlabel.Label), {
|
|
100
100
|
elementType: "span",
|
|
101
|
-
UNSAFE_className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))),
|
|
101
|
+
UNSAFE_className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider-valueLabel')
|
|
102
102
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("div", {
|
|
103
103
|
...trackProps,
|
|
104
104
|
ref: trackRef,
|
|
105
|
-
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))),
|
|
106
|
-
|
|
107
|
-
|
|
105
|
+
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider', {
|
|
106
|
+
'is-disabled': isDisabled,
|
|
107
|
+
'spectrum-ColorSlider--vertical': vertical
|
|
108
108
|
})
|
|
109
109
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement((0, $2b9adc23f6c7cae1$exports.ColorThumb), {
|
|
110
110
|
value: state.getDisplayColor(),
|
|
@@ -112,13 +112,13 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
|
|
|
112
112
|
isDisabled: isDisabled,
|
|
113
113
|
isDragging: state.isThumbDragging(0),
|
|
114
114
|
containerRef: trackRef,
|
|
115
|
-
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))),
|
|
115
|
+
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider-handle'),
|
|
116
116
|
...thumbProps
|
|
117
117
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("input", {
|
|
118
118
|
...inputProps,
|
|
119
119
|
...focusProps,
|
|
120
120
|
ref: inputRef,
|
|
121
|
-
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))),
|
|
121
|
+
className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), 'spectrum-ColorSlider-slider')
|
|
122
122
|
}))));
|
|
123
123
|
}
|
|
124
124
|
/**
|
package/dist/ColorSlider.mjs
CHANGED
|
@@ -42,8 +42,8 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
42
42
|
let trackRef = (0, $fxUYb$useRef)(null);
|
|
43
43
|
let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
|
|
44
44
|
[props, domRef] = (0, $fxUYb$useContextProps)(props, domRef, (0, $fxUYb$ColorSliderContext));
|
|
45
|
-
let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel,
|
|
46
|
-
let vertical = orientation ===
|
|
45
|
+
let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, 'aria-label': ariaLabel } = props;
|
|
46
|
+
let vertical = orientation === 'vertical';
|
|
47
47
|
let { styleProps: styleProps } = (0, $fxUYb$useStyleProps)(props);
|
|
48
48
|
let { locale: locale } = (0, $fxUYb$useLocale)();
|
|
49
49
|
let state = (0, $fxUYb$useColorSliderState)({
|
|
@@ -52,20 +52,20 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
52
52
|
});
|
|
53
53
|
// If vertical and a label is provided, use it as an aria-label instead.
|
|
54
54
|
if (vertical && label) {
|
|
55
|
-
ariaLabel = ariaLabel || (typeof label ===
|
|
55
|
+
ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
|
|
56
56
|
label = null;
|
|
57
57
|
}
|
|
58
58
|
// If no external label, aria-label or aria-labelledby is provided,
|
|
59
59
|
// default to displaying the localized channel value.
|
|
60
60
|
// Specifically check if label is undefined. If label is `null` then display no visible label.
|
|
61
61
|
// A default aria-label is provided by useColorSlider in that case.
|
|
62
|
-
if (label === undefined && !ariaLabel && !props[
|
|
62
|
+
if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
|
|
63
63
|
// Show the value label by default if there is a visible label
|
|
64
64
|
if (showValueLabel == null) showValueLabel = !!label;
|
|
65
65
|
let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $fxUYb$useColorSlider)({
|
|
66
66
|
...props,
|
|
67
67
|
label: label,
|
|
68
|
-
|
|
68
|
+
'aria-label': ariaLabel,
|
|
69
69
|
trackRef: trackRef,
|
|
70
70
|
inputRef: inputRef
|
|
71
71
|
}, state);
|
|
@@ -79,26 +79,26 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
79
79
|
ref: domRef,
|
|
80
80
|
...styleProps,
|
|
81
81
|
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), {
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
'spectrum-ColorSlider-container--horizontal': !vertical,
|
|
83
|
+
'spectrum-ColorSlider-container--vertical': vertical
|
|
84
84
|
})
|
|
85
85
|
}, label && /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
|
|
86
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
86
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-labelContainer')
|
|
87
87
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$SlotProvider), {
|
|
88
88
|
slots: {
|
|
89
89
|
actionButton: {
|
|
90
|
-
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
90
|
+
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-contextualHelp')
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), {
|
|
94
94
|
elementType: "span",
|
|
95
|
-
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
95
|
+
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-valueLabel')
|
|
96
96
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
|
|
97
97
|
...trackProps,
|
|
98
98
|
ref: trackRef,
|
|
99
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider', {
|
|
100
|
+
'is-disabled': isDisabled,
|
|
101
|
+
'spectrum-ColorSlider--vertical': vertical
|
|
102
102
|
})
|
|
103
103
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
|
|
104
104
|
value: state.getDisplayColor(),
|
|
@@ -106,13 +106,13 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
106
106
|
isDisabled: isDisabled,
|
|
107
107
|
isDragging: state.isThumbDragging(0),
|
|
108
108
|
containerRef: trackRef,
|
|
109
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
109
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-handle'),
|
|
110
110
|
...thumbProps
|
|
111
111
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {
|
|
112
112
|
...inputProps,
|
|
113
113
|
...focusProps,
|
|
114
114
|
ref: inputRef,
|
|
115
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
115
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-slider')
|
|
116
116
|
}))));
|
|
117
117
|
}
|
|
118
118
|
/**
|
|
@@ -42,8 +42,8 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
42
42
|
let trackRef = (0, $fxUYb$useRef)(null);
|
|
43
43
|
let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
|
|
44
44
|
[props, domRef] = (0, $fxUYb$useContextProps)(props, domRef, (0, $fxUYb$ColorSliderContext));
|
|
45
|
-
let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel,
|
|
46
|
-
let vertical = orientation ===
|
|
45
|
+
let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, 'aria-label': ariaLabel } = props;
|
|
46
|
+
let vertical = orientation === 'vertical';
|
|
47
47
|
let { styleProps: styleProps } = (0, $fxUYb$useStyleProps)(props);
|
|
48
48
|
let { locale: locale } = (0, $fxUYb$useLocale)();
|
|
49
49
|
let state = (0, $fxUYb$useColorSliderState)({
|
|
@@ -52,20 +52,20 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
52
52
|
});
|
|
53
53
|
// If vertical and a label is provided, use it as an aria-label instead.
|
|
54
54
|
if (vertical && label) {
|
|
55
|
-
ariaLabel = ariaLabel || (typeof label ===
|
|
55
|
+
ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
|
|
56
56
|
label = null;
|
|
57
57
|
}
|
|
58
58
|
// If no external label, aria-label or aria-labelledby is provided,
|
|
59
59
|
// default to displaying the localized channel value.
|
|
60
60
|
// Specifically check if label is undefined. If label is `null` then display no visible label.
|
|
61
61
|
// A default aria-label is provided by useColorSlider in that case.
|
|
62
|
-
if (label === undefined && !ariaLabel && !props[
|
|
62
|
+
if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
|
|
63
63
|
// Show the value label by default if there is a visible label
|
|
64
64
|
if (showValueLabel == null) showValueLabel = !!label;
|
|
65
65
|
let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $fxUYb$useColorSlider)({
|
|
66
66
|
...props,
|
|
67
67
|
label: label,
|
|
68
|
-
|
|
68
|
+
'aria-label': ariaLabel,
|
|
69
69
|
trackRef: trackRef,
|
|
70
70
|
inputRef: inputRef
|
|
71
71
|
}, state);
|
|
@@ -79,26 +79,26 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
79
79
|
ref: domRef,
|
|
80
80
|
...styleProps,
|
|
81
81
|
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), {
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
'spectrum-ColorSlider-container--horizontal': !vertical,
|
|
83
|
+
'spectrum-ColorSlider-container--vertical': vertical
|
|
84
84
|
})
|
|
85
85
|
}, label && /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
|
|
86
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
86
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-labelContainer')
|
|
87
87
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$SlotProvider), {
|
|
88
88
|
slots: {
|
|
89
89
|
actionButton: {
|
|
90
|
-
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
90
|
+
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-contextualHelp')
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), {
|
|
94
94
|
elementType: "span",
|
|
95
|
-
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
95
|
+
UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-valueLabel')
|
|
96
96
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
|
|
97
97
|
...trackProps,
|
|
98
98
|
ref: trackRef,
|
|
99
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider', {
|
|
100
|
+
'is-disabled': isDisabled,
|
|
101
|
+
'spectrum-ColorSlider--vertical': vertical
|
|
102
102
|
})
|
|
103
103
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
|
|
104
104
|
value: state.getDisplayColor(),
|
|
@@ -106,13 +106,13 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
106
106
|
isDisabled: isDisabled,
|
|
107
107
|
isDragging: state.isThumbDragging(0),
|
|
108
108
|
containerRef: trackRef,
|
|
109
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
109
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-handle'),
|
|
110
110
|
...thumbProps
|
|
111
111
|
}, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {
|
|
112
112
|
...inputProps,
|
|
113
113
|
...focusProps,
|
|
114
114
|
ref: inputRef,
|
|
115
|
-
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))),
|
|
115
|
+
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-slider')
|
|
116
116
|
}))));
|
|
117
117
|
}
|
|
118
118
|
/**
|
package/dist/ColorSwatch.main.js
CHANGED
|
@@ -36,7 +36,7 @@ function $f076f5c85640192a$var$ColorSwatch(props, ref) {
|
|
|
36
36
|
let { colorSwatchProps: colorSwatchProps, color: color } = (0, $ikjCA$reactariacolor.useColorSwatch)(props);
|
|
37
37
|
let { styleProps: styleProps } = (0, $ikjCA$reactspectrumutils.useStyleProps)(props);
|
|
38
38
|
let ctx = (0, $ikjCA$react.useContext)($f076f5c85640192a$export$8529d7908a78c058);
|
|
39
|
-
let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) ||
|
|
39
|
+
let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) || 'M', rounding: rounding = (ctx === null || ctx === void 0 ? void 0 : ctx.rounding) || 'default' } = props;
|
|
40
40
|
let swatch = /*#__PURE__*/ (0, ($parcel$interopDefault($ikjCA$react))).createElement("div", {
|
|
41
41
|
...colorSwatchProps,
|
|
42
42
|
...styleProps,
|
|
@@ -44,38 +44,38 @@ function $f076f5c85640192a$var$ColorSwatch(props, ref) {
|
|
|
44
44
|
style: {
|
|
45
45
|
...styleProps.style,
|
|
46
46
|
// TODO: should there be a distinction between transparent and no value (e.g. null)?
|
|
47
|
-
background: color.getChannelValue(
|
|
47
|
+
background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
|
|
48
48
|
},
|
|
49
49
|
className: function anonymous(props) {
|
|
50
50
|
let rules = "";
|
|
51
|
-
if (props.size === "L") rules +=
|
|
52
|
-
else if (props.size === "M") rules +=
|
|
53
|
-
else if (props.size === "S") rules +=
|
|
54
|
-
else if (props.size === "XS") rules +=
|
|
55
|
-
if (props.size === "L") rules +=
|
|
56
|
-
else if (props.size === "M") rules +=
|
|
57
|
-
else if (props.size === "S") rules +=
|
|
58
|
-
else if (props.size === "XS") rules +=
|
|
59
|
-
if (props.rounding === "full") rules +=
|
|
60
|
-
else if (props.rounding === "none") rules +=
|
|
61
|
-
else if (props.rounding === "default") rules +=
|
|
62
|
-
if (props.rounding === "full") rules +=
|
|
63
|
-
else if (props.rounding === "none") rules +=
|
|
64
|
-
else if (props.rounding === "default") rules +=
|
|
65
|
-
if (props.rounding === "full") rules +=
|
|
66
|
-
else if (props.rounding === "none") rules +=
|
|
67
|
-
else if (props.rounding === "default") rules +=
|
|
68
|
-
if (props.rounding === "full") rules +=
|
|
69
|
-
else if (props.rounding === "none") rules +=
|
|
70
|
-
else if (props.rounding === "default") rules +=
|
|
71
|
-
rules +=
|
|
72
|
-
rules +=
|
|
73
|
-
rules +=
|
|
74
|
-
rules +=
|
|
75
|
-
rules +=
|
|
76
|
-
rules +=
|
|
77
|
-
rules +=
|
|
78
|
-
rules +=
|
|
51
|
+
if (props.size === "L") rules += ' ok';
|
|
52
|
+
else if (props.size === "M") rules += ' oi';
|
|
53
|
+
else if (props.size === "S") rules += ' og';
|
|
54
|
+
else if (props.size === "XS") rules += ' oe';
|
|
55
|
+
if (props.size === "L") rules += ' nk';
|
|
56
|
+
else if (props.size === "M") rules += ' ni';
|
|
57
|
+
else if (props.size === "S") rules += ' ng';
|
|
58
|
+
else if (props.size === "XS") rules += ' ne';
|
|
59
|
+
if (props.rounding === "full") rules += ' _pf';
|
|
60
|
+
else if (props.rounding === "none") rules += ' _pa';
|
|
61
|
+
else if (props.rounding === "default") rules += ' _pc';
|
|
62
|
+
if (props.rounding === "full") rules += ' _qf';
|
|
63
|
+
else if (props.rounding === "none") rules += ' _qa';
|
|
64
|
+
else if (props.rounding === "default") rules += ' _qc';
|
|
65
|
+
if (props.rounding === "full") rules += ' _rf';
|
|
66
|
+
else if (props.rounding === "none") rules += ' _ra';
|
|
67
|
+
else if (props.rounding === "default") rules += ' _rc';
|
|
68
|
+
if (props.rounding === "full") rules += ' _sf';
|
|
69
|
+
else if (props.rounding === "none") rules += ' _sa';
|
|
70
|
+
else if (props.rounding === "default") rules += ' _sc';
|
|
71
|
+
rules += ' c-1n5whoe';
|
|
72
|
+
rules += ' wb';
|
|
73
|
+
rules += ' xb';
|
|
74
|
+
rules += ' ub';
|
|
75
|
+
rules += ' vb';
|
|
76
|
+
rules += ' Aa';
|
|
77
|
+
rules += ' __ka';
|
|
78
|
+
rules += ' _tb';
|
|
79
79
|
return rules;
|
|
80
80
|
}({
|
|
81
81
|
size: size,
|