@react-spectrum/s2 3.0.0-nightly-56da82e3e-250212 → 3.0.0-nightly-260eb700f-250213
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/Accordion.cjs +3 -3
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +3 -3
- package/dist/ActionBar.cjs +47 -47
- package/dist/ActionBar.css +51 -51
- package/dist/ActionBar.mjs +47 -47
- package/dist/ActionButton.cjs +97 -97
- package/dist/ActionButton.css +96 -96
- package/dist/ActionButton.mjs +97 -97
- package/dist/ActionButtonGroup.cjs +11 -11
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +11 -11
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Avatar.cjs +17 -17
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +17 -17
- package/dist/AvatarGroup.cjs +100 -100
- package/dist/AvatarGroup.css +34 -34
- package/dist/AvatarGroup.mjs +100 -100
- package/dist/Badge.cjs +68 -92
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +92 -164
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +68 -92
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +115 -115
- package/dist/Breadcrumbs.css +89 -89
- package/dist/Breadcrumbs.mjs +115 -115
- package/dist/Button.cjs +152 -236
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +165 -309
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +152 -236
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +19 -19
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +19 -19
- package/dist/Card.cjs +261 -264
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +198 -210
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +261 -264
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +15 -15
- package/dist/CardView.css +18 -18
- package/dist/CardView.mjs +15 -15
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +73 -124
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +81 -201
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +73 -124
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +49 -49
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +49 -49
- package/dist/ClearButton.cjs +15 -15
- package/dist/ClearButton.css +17 -17
- package/dist/ClearButton.mjs +15 -15
- package/dist/CloseButton.cjs +35 -35
- package/dist/CloseButton.css +33 -33
- package/dist/CloseButton.mjs +35 -35
- package/dist/ColorArea.cjs +22 -22
- package/dist/ColorArea.css +15 -15
- package/dist/ColorArea.mjs +22 -22
- package/dist/ColorField.cjs +38 -38
- package/dist/ColorField.css +32 -32
- package/dist/ColorField.mjs +38 -38
- package/dist/ColorHandle.cjs +21 -27
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +45 -93
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +21 -27
- package/dist/ColorHandle.mjs.map +1 -1
- package/dist/ColorSlider.cjs +52 -52
- package/dist/ColorSlider.css +51 -51
- package/dist/ColorSlider.mjs +52 -52
- package/dist/ColorSwatch.cjs +24 -27
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +29 -41
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +24 -27
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +23 -23
- package/dist/ColorSwatchPicker.css +48 -60
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +23 -23
- package/dist/ColorWheel.cjs +22 -22
- package/dist/ColorWheel.css +16 -16
- package/dist/ColorWheel.mjs +22 -22
- package/dist/ComboBox.cjs +80 -80
- package/dist/ComboBox.css +88 -88
- package/dist/ComboBox.mjs +80 -80
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +38 -38
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +31 -31
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +31 -31
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +64 -64
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +108 -111
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +112 -124
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +108 -111
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +26 -26
- package/dist/Divider.css +16 -16
- package/dist/Divider.mjs +26 -26
- package/dist/DropZone.cjs +47 -56
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +56 -80
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +47 -56
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +150 -204
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +150 -246
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +150 -204
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +10 -10
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +10 -10
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +72 -72
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +134 -134
- package/dist/IllustratedMessage.css +69 -69
- package/dist/IllustratedMessage.mjs +134 -134
- package/dist/Image.cjs +12 -12
- package/dist/Image.css +13 -13
- package/dist/Image.mjs +12 -12
- package/dist/InlineAlert.cjs +77 -104
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +77 -149
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +77 -104
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +31 -31
- package/dist/Link.css +30 -30
- package/dist/Link.mjs +31 -31
- package/dist/Menu.cjs +269 -269
- package/dist/Menu.css +155 -155
- package/dist/Menu.mjs +269 -269
- package/dist/Meter.cjs +85 -85
- package/dist/Meter.css +81 -81
- package/dist/Meter.mjs +85 -85
- package/dist/Modal.cjs +48 -48
- package/dist/Modal.css +46 -46
- package/dist/Modal.mjs +48 -48
- package/dist/NumberField.cjs +115 -115
- package/dist/NumberField.css +114 -114
- package/dist/NumberField.mjs +115 -115
- package/dist/Picker.cjs +177 -195
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +164 -224
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +177 -195
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +79 -85
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +65 -89
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +79 -85
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +98 -98
- package/dist/ProgressBar.css +92 -92
- package/dist/ProgressBar.mjs +98 -98
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +15 -15
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +4 -4
- package/dist/Provider.css +5 -5
- package/dist/Provider.mjs +4 -4
- package/dist/Radio.cjs +80 -152
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +96 -240
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +80 -152
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +47 -47
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +47 -47
- package/dist/SearchField.cjs +42 -42
- package/dist/SearchField.css +47 -47
- package/dist/SearchField.mjs +42 -42
- package/dist/SegmentedControl.cjs +89 -101
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +92 -140
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +89 -101
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +196 -229
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +149 -221
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +196 -229
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +56 -56
- package/dist/StatusLight.css +59 -59
- package/dist/StatusLight.mjs +56 -56
- package/dist/Switch.cjs +74 -107
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +69 -141
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +74 -107
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +253 -280
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +163 -199
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +253 -280
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +108 -108
- package/dist/Tabs.css +81 -81
- package/dist/Tabs.mjs +108 -108
- package/dist/TabsPicker.cjs +105 -105
- package/dist/TabsPicker.css +111 -111
- package/dist/TabsPicker.mjs +105 -105
- package/dist/TagGroup.cjs +148 -148
- package/dist/TagGroup.css +134 -134
- package/dist/TagGroup.mjs +148 -148
- package/dist/TextField.cjs +59 -59
- package/dist/TextField.css +62 -62
- package/dist/TextField.mjs +59 -59
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +57 -60
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +71 -83
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +57 -60
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +199 -248
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +131 -175
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +202 -248
- package/dist/TreeView.mjs.map +1 -1
- package/dist/main.cjs +1 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +2 -2
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +4 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.css +5 -5
- package/icons/Skeleton.mjs +2 -2
- package/package.json +21 -21
- package/src/TreeView.tsx +66 -134
- package/src/index.ts +1 -1
- package/style/__tests__/style-macro.test.js +18 -18
- package/style/dist/spectrum-theme.cjs +10 -20
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +10 -20
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +0 -4
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +11 -19
package/dist/Slider.cjs
CHANGED
|
@@ -49,35 +49,35 @@ $parcel$export(module.exports, "Slider", () => $e937566cb5c6349c$export$472062a3
|
|
|
49
49
|
const $e937566cb5c6349c$export$e99164f0030f3bff = /*#__PURE__*/ (0, $5DeaH$react.createContext)(null);
|
|
50
50
|
const $e937566cb5c6349c$var$slider = function anonymous(props, overrides) {
|
|
51
51
|
let rules = " .";
|
|
52
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:
|
|
52
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
|
|
53
53
|
rules += matches.join('');
|
|
54
|
-
rules += '
|
|
55
|
-
rules += '
|
|
56
|
-
rules += '
|
|
57
|
-
rules += '
|
|
58
|
-
rules += '
|
|
59
|
-
rules += '
|
|
60
|
-
rules += '
|
|
61
|
-
rules += '
|
|
54
|
+
rules += ' _d-bc1l9oh';
|
|
55
|
+
rules += ' _d-1uotwbwg';
|
|
56
|
+
rules += ' _d-eo0c6sf';
|
|
57
|
+
rules += ' _d-enzzrge';
|
|
58
|
+
rules += ' _d-enzykdd';
|
|
59
|
+
rules += ' _d-enzwzjc';
|
|
60
|
+
rules += ' _d-enzrfpb';
|
|
61
|
+
rules += ' _da';
|
|
62
62
|
if (props.size === "XL") {
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
63
|
+
rules += ' _ebj';
|
|
64
|
+
rules += ' _ei';
|
|
65
65
|
} else if (props.size === "L") {
|
|
66
|
-
rules += '
|
|
67
|
-
rules += '
|
|
66
|
+
rules += ' _ebh';
|
|
67
|
+
rules += ' _eg';
|
|
68
68
|
} else if (props.size === "S") {
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
69
|
+
rules += ' _ebd';
|
|
70
|
+
rules += ' _ec';
|
|
71
71
|
} else if (props.size === "XS") {
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
72
|
+
rules += ' _ebb';
|
|
73
|
+
rules += ' _ea';
|
|
74
74
|
} else {
|
|
75
|
-
rules += '
|
|
76
|
-
rules += '
|
|
75
|
+
rules += ' _ebf';
|
|
76
|
+
rules += ' _ee';
|
|
77
77
|
}
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
78
|
+
rules += ' _fb';
|
|
79
|
+
rules += ' _g-1x99dlob';
|
|
80
|
+
rules += ' _ga';
|
|
81
81
|
if (props.isDisabled) rules += ' aj';
|
|
82
82
|
else {
|
|
83
83
|
if (props.isPressed) rules += ' an';
|
|
@@ -85,78 +85,89 @@ const $e937566cb5c6349c$var$slider = function anonymous(props, overrides) {
|
|
|
85
85
|
else if (props.isHovered) rules += ' an';
|
|
86
86
|
else rules += ' am';
|
|
87
87
|
}
|
|
88
|
-
if (props.labelPosition === "side") rules += '
|
|
89
|
-
if (props.isInForm) rules += '
|
|
90
|
-
else if (props.size === "XL") rules += '
|
|
91
|
-
else if (props.size === "L") rules += '
|
|
92
|
-
else if (props.size === "M") rules += '
|
|
93
|
-
else if (props.size === "S") rules += '
|
|
88
|
+
if (props.labelPosition === "side") rules += ' _2c';
|
|
89
|
+
if (props.isInForm) rules += ' je';
|
|
90
|
+
else if (props.size === "XL") rules += ' jh';
|
|
91
|
+
else if (props.size === "L") rules += ' jg';
|
|
92
|
+
else if (props.size === "M") rules += ' jf';
|
|
93
|
+
else if (props.size === "S") rules += ' jf';
|
|
94
94
|
return rules;
|
|
95
95
|
};
|
|
96
96
|
const $e937566cb5c6349c$var$labelContainer = function anonymous(props) {
|
|
97
97
|
let rules = " .";
|
|
98
|
-
if (props.labelPosition === "top") rules += '
|
|
98
|
+
if (props.labelPosition === "top") rules += ' _0f';
|
|
99
|
+
rules += ' __b-hr3t0p';
|
|
100
|
+
rules += ' __c-hr3t0p';
|
|
101
|
+
rules += ' __d-hr3t0p';
|
|
99
102
|
rules += ' __e-hr3t0p';
|
|
100
|
-
rules += '
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
103
|
-
rules += ' kb';
|
|
104
|
-
if (props.labelPosition === "top") rules += ' __n-1h4qke2';
|
|
105
|
-
if (props.labelPosition === "top") rules += ' __l-1j10eqz';
|
|
103
|
+
rules += ' lb';
|
|
104
|
+
if (props.labelPosition === "top") rules += ' __k-1h4qke2';
|
|
105
|
+
if (props.labelPosition === "top") rules += ' __i-1j10eqz';
|
|
106
106
|
if (props.labelPosition === "side") {
|
|
107
|
-
if (props.labelAlign === "end") rules += '
|
|
108
|
-
else if (props.labelAlign === "start") rules += '
|
|
107
|
+
if (props.labelAlign === "end") rules += ' _kc';
|
|
108
|
+
else if (props.labelAlign === "start") rules += ' _ka';
|
|
109
109
|
}
|
|
110
|
-
rules += ' -
|
|
110
|
+
rules += ' -_1inj1bc_F-a';
|
|
111
111
|
return rules;
|
|
112
112
|
};
|
|
113
113
|
const $e937566cb5c6349c$var$output = function anonymous(props) {
|
|
114
114
|
let rules = " .";
|
|
115
|
+
rules += ' __b-ny5g4a';
|
|
116
|
+
rules += ' __c-ny5g4a';
|
|
117
|
+
rules += ' __d-ny5g4a';
|
|
115
118
|
rules += ' __e-ny5g4a';
|
|
116
|
-
rules += ' __f-ny5g4a';
|
|
117
|
-
rules += ' __g-ny5g4a';
|
|
118
|
-
rules += ' __h-ny5g4a';
|
|
119
119
|
if (props.labelPosition === "side") {
|
|
120
|
-
if (props.isInForm) rules += '
|
|
121
|
-
else if (props.direction === "rtl") rules += '
|
|
122
|
-
else if (props.direction === "ltr") rules += '
|
|
120
|
+
if (props.isInForm) rules += ' _kc';
|
|
121
|
+
else if (props.direction === "rtl") rules += ' _kc';
|
|
122
|
+
else if (props.direction === "ltr") rules += ' _ka';
|
|
123
123
|
} else if (props.labelPosition === "top") {
|
|
124
|
-
if (props.direction === "rtl") rules += '
|
|
125
|
-
else if (props.direction === "ltr") rules += '
|
|
124
|
+
if (props.direction === "rtl") rules += ' _ka';
|
|
125
|
+
else if (props.direction === "ltr") rules += ' _kc';
|
|
126
126
|
}
|
|
127
127
|
return rules;
|
|
128
128
|
};
|
|
129
129
|
let $e937566cb5c6349c$export$6b2a7d5132615086 = function anonymous(props) {
|
|
130
130
|
let rules = " .";
|
|
131
|
+
rules += ' __b-n9hk5a';
|
|
132
|
+
rules += ' __c-n9hk5a';
|
|
133
|
+
rules += ' __d-n9hk5a';
|
|
131
134
|
rules += ' __e-n9hk5a';
|
|
132
|
-
rules += '
|
|
133
|
-
rules += '
|
|
134
|
-
rules += '
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
137
|
-
if (props.size === "
|
|
138
|
-
else if (props.size === "L") rules += ' j2';
|
|
139
|
-
else if (props.size === "M") rules += ' jU';
|
|
140
|
-
else if (props.size === "S") rules += ' jM';
|
|
135
|
+
rules += ' Vc';
|
|
136
|
+
rules += ' lb';
|
|
137
|
+
if (props.size === "XL") rules += ' k_a';
|
|
138
|
+
else if (props.size === "L") rules += ' k2';
|
|
139
|
+
else if (props.size === "M") rules += ' kU';
|
|
140
|
+
else if (props.size === "S") rules += ' kM';
|
|
141
141
|
return rules;
|
|
142
142
|
};
|
|
143
143
|
let $e937566cb5c6349c$export$7814bee2738c4c3 = function anonymous(props) {
|
|
144
144
|
let rules = " .";
|
|
145
|
+
if (props.size === "XL") rules += ' lM';
|
|
146
|
+
else if (props.size === "L") rules += ' lK';
|
|
147
|
+
else if (props.size === "M") rules += ' lI';
|
|
148
|
+
else if (props.size === "S") rules += ' lG';
|
|
145
149
|
if (props.size === "XL") rules += ' kM';
|
|
146
150
|
else if (props.size === "L") rules += ' kK';
|
|
147
151
|
else if (props.size === "M") rules += ' kI';
|
|
148
152
|
else if (props.size === "S") rules += ' kG';
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
else if (props.size === "S") rules += ' jG';
|
|
153
|
-
rules += ' _3b';
|
|
154
|
-
rules += ' Ya';
|
|
155
|
-
rules += ' _b-3760fj';
|
|
153
|
+
rules += ' _0b';
|
|
154
|
+
rules += ' Va';
|
|
155
|
+
rules += ' Y-3760fj';
|
|
156
156
|
return rules;
|
|
157
157
|
};
|
|
158
158
|
let $e937566cb5c6349c$export$f120a3c6038107a5 = function anonymous(props) {
|
|
159
159
|
let rules = " .";
|
|
160
|
+
if (props.thumbStyle === "precise") {
|
|
161
|
+
if (props.size === "XL") rules += ' lO';
|
|
162
|
+
else if (props.size === "L") rules += ' lM';
|
|
163
|
+
else if (props.size === "M") rules += ' lK';
|
|
164
|
+
else if (props.size === "S") rules += ' lI';
|
|
165
|
+
} else if (props.thumbStyle === "default") {
|
|
166
|
+
if (props.size === "XL") rules += ' lM';
|
|
167
|
+
else if (props.size === "L") rules += ' lK';
|
|
168
|
+
else if (props.size === "M") rules += ' lI';
|
|
169
|
+
else if (props.size === "S") rules += ' lG';
|
|
170
|
+
}
|
|
160
171
|
if (props.thumbStyle === "precise") {
|
|
161
172
|
if (props.size === "XL") rules += ' kO';
|
|
162
173
|
else if (props.size === "L") rules += ' kM';
|
|
@@ -168,80 +179,54 @@ let $e937566cb5c6349c$export$f120a3c6038107a5 = function anonymous(props) {
|
|
|
168
179
|
else if (props.size === "M") rules += ' kI';
|
|
169
180
|
else if (props.size === "S") rules += ' kG';
|
|
170
181
|
}
|
|
171
|
-
if (props.thumbStyle === "precise") {
|
|
172
|
-
if (props.size === "XL") rules += ' jO';
|
|
173
|
-
else if (props.size === "L") rules += ' jM';
|
|
174
|
-
else if (props.size === "M") rules += ' jK';
|
|
175
|
-
else if (props.size === "S") rules += ' jI';
|
|
176
|
-
} else if (props.thumbStyle === "default") {
|
|
177
|
-
if (props.size === "XL") rules += ' jM';
|
|
178
|
-
else if (props.size === "L") rules += ' jK';
|
|
179
|
-
else if (props.size === "M") rules += ' jI';
|
|
180
|
-
else if (props.size === "S") rules += ' jG';
|
|
181
|
-
}
|
|
182
182
|
return rules;
|
|
183
183
|
};
|
|
184
184
|
let $e937566cb5c6349c$export$becc9140d0e846f8 = function anonymous(props) {
|
|
185
185
|
let rules = " .";
|
|
186
|
-
if (props.isFocusVisible) rules += '
|
|
187
|
-
else rules += '
|
|
188
|
-
rules += '
|
|
189
|
-
rules += '
|
|
190
|
-
rules += '
|
|
191
|
-
rules += '
|
|
192
|
-
rules += '
|
|
193
|
-
rules += '
|
|
194
|
-
rules += '
|
|
195
|
-
rules += '
|
|
196
|
-
rules += '
|
|
197
|
-
rules += '
|
|
198
|
-
if (props.thumbStyle === "precise") rules += '
|
|
186
|
+
if (props.isFocusVisible) rules += ' _Mb';
|
|
187
|
+
else rules += ' _Ma';
|
|
188
|
+
rules += ' da_____M';
|
|
189
|
+
rules += ' dx';
|
|
190
|
+
rules += ' _Oc';
|
|
191
|
+
rules += ' _N-3t1z';
|
|
192
|
+
rules += ' _0b';
|
|
193
|
+
rules += ' __oa';
|
|
194
|
+
rules += ' Va';
|
|
195
|
+
rules += ' Y-3760fj';
|
|
196
|
+
rules += ' Z-3760fj';
|
|
197
|
+
rules += ' U-mn5ko6';
|
|
198
|
+
if (props.thumbStyle === "precise") rules += ' lu';
|
|
199
199
|
else if (props.thumbStyle === "default") {
|
|
200
|
+
if (props.size === "XL") rules += ' lM';
|
|
201
|
+
else if (props.size === "L") rules += ' lK';
|
|
202
|
+
else if (props.size === "M") rules += ' lI';
|
|
203
|
+
else if (props.size === "S") rules += ' lG';
|
|
204
|
+
}
|
|
205
|
+
if (props.thumbStyle === "precise") {
|
|
206
|
+
if (props.size === "XL") rules += ' kO';
|
|
207
|
+
else if (props.size === "L") rules += ' kM';
|
|
208
|
+
else if (props.size === "M") rules += ' kK';
|
|
209
|
+
else if (props.size === "S") rules += ' kI';
|
|
210
|
+
} else if (props.thumbStyle === "default") {
|
|
200
211
|
if (props.size === "XL") rules += ' kM';
|
|
201
212
|
else if (props.size === "L") rules += ' kK';
|
|
202
213
|
else if (props.size === "M") rules += ' kI';
|
|
203
214
|
else if (props.size === "S") rules += ' kG';
|
|
204
215
|
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
else if (props.size === "M") rules += ' jK';
|
|
209
|
-
else if (props.size === "S") rules += ' jI';
|
|
210
|
-
} else if (props.thumbStyle === "default") {
|
|
211
|
-
if (props.size === "XL") rules += ' jM';
|
|
212
|
-
else if (props.size === "L") rules += ' jK';
|
|
213
|
-
else if (props.size === "M") rules += ' jI';
|
|
214
|
-
else if (props.size === "S") rules += ' jG';
|
|
215
|
-
}
|
|
216
|
+
rules += ' _wf';
|
|
217
|
+
rules += ' _xf';
|
|
218
|
+
rules += ' _yf';
|
|
216
219
|
rules += ' _zf';
|
|
217
|
-
rules += '
|
|
218
|
-
rules += ' _Bf';
|
|
219
|
-
rules += ' _Cf';
|
|
220
|
-
rules += ' za';
|
|
221
|
-
rules += ' t-375zlr';
|
|
220
|
+
rules += ' wa';
|
|
222
221
|
rules += ' u-375zlr';
|
|
223
|
-
rules += '
|
|
222
|
+
rules += ' v-375zlr';
|
|
224
223
|
rules += ' s-375zlr';
|
|
225
|
-
|
|
226
|
-
if (props.isDisabled) rules += '
|
|
227
|
-
|
|
228
|
-
else if (props.
|
|
229
|
-
else rules += '
|
|
230
|
-
|
|
231
|
-
if (props.isDisabled) rules += ' yi';
|
|
232
|
-
else if (props.isDragging) rules += ' yo';
|
|
233
|
-
else if (props.isHovered) rules += ' yo';
|
|
234
|
-
else rules += ' yn';
|
|
235
|
-
if (props.isDisabled) rules += ' va_____O';
|
|
236
|
-
if (props.isDisabled) rules += ' vi';
|
|
237
|
-
else if (props.isDragging) rules += ' vo';
|
|
238
|
-
else if (props.isHovered) rules += ' vo';
|
|
239
|
-
else rules += ' vn';
|
|
240
|
-
if (props.isDisabled) rules += ' wa_____O';
|
|
241
|
-
if (props.isDisabled) rules += ' wi';
|
|
242
|
-
else if (props.isDragging) rules += ' wo';
|
|
243
|
-
else if (props.isHovered) rules += ' wo';
|
|
244
|
-
else rules += ' wn';
|
|
224
|
+
rules += ' t-375zlr';
|
|
225
|
+
if (props.isDisabled) rules += ' ca_____O';
|
|
226
|
+
if (props.isDisabled) rules += ' ci';
|
|
227
|
+
else if (props.isDragging) rules += ' co';
|
|
228
|
+
else if (props.isHovered) rules += ' co';
|
|
229
|
+
else rules += ' cn';
|
|
245
230
|
rules += ' bd';
|
|
246
231
|
return rules;
|
|
247
232
|
};
|
|
@@ -262,80 +247,62 @@ const $e937566cb5c6349c$var$trackStyling = {
|
|
|
262
247
|
};
|
|
263
248
|
let $e937566cb5c6349c$export$1e1dc99b6e2204f1 = function anonymous(props) {
|
|
264
249
|
let rules = " .";
|
|
265
|
-
if (props.trackStyle === "thick") rules += '
|
|
266
|
-
else if (props.trackStyle === "thin") rules += '
|
|
267
|
-
rules += '
|
|
250
|
+
if (props.trackStyle === "thick") rules += ' kE';
|
|
251
|
+
else if (props.trackStyle === "thin") rules += ' ks';
|
|
252
|
+
rules += ' Y-3760fj';
|
|
253
|
+
if (props.trackStyle === "thick") rules += ' _wb';
|
|
254
|
+
else if (props.trackStyle === "thin") rules += ' _wd';
|
|
255
|
+
if (props.trackStyle === "thick") rules += ' _xb';
|
|
256
|
+
else if (props.trackStyle === "thin") rules += ' _xd';
|
|
257
|
+
if (props.trackStyle === "thick") rules += ' _yb';
|
|
258
|
+
else if (props.trackStyle === "thin") rules += ' _yd';
|
|
268
259
|
if (props.trackStyle === "thick") rules += ' _zb';
|
|
269
260
|
else if (props.trackStyle === "thin") rules += ' _zd';
|
|
270
|
-
|
|
271
|
-
else if (props.trackStyle === "thin") rules += ' _Ad';
|
|
272
|
-
if (props.trackStyle === "thick") rules += ' _Bb';
|
|
273
|
-
else if (props.trackStyle === "thin") rules += ' _Bd';
|
|
274
|
-
if (props.trackStyle === "thick") rules += ' _Cb';
|
|
275
|
-
else if (props.trackStyle === "thin") rules += ' _Cd';
|
|
276
|
-
rules += ' Ya';
|
|
261
|
+
rules += ' Va';
|
|
277
262
|
if (props.isDisabled) rules += ' bg';
|
|
278
263
|
else rules += ' bi';
|
|
279
|
-
rules += '
|
|
280
|
-
rules += '
|
|
281
|
-
rules += '
|
|
282
|
-
rules += '
|
|
283
|
-
rules += ' t-yj94cw';
|
|
264
|
+
rules += ' Q-yj8axo';
|
|
265
|
+
rules += ' lb';
|
|
266
|
+
rules += ' __oa';
|
|
267
|
+
rules += ' wa';
|
|
284
268
|
rules += ' u-yj94cw';
|
|
285
|
-
rules += '
|
|
269
|
+
rules += ' v-yj94cw';
|
|
286
270
|
rules += ' s-yj94cw';
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
rules += '
|
|
290
|
-
|
|
291
|
-
else rules += ' ya_____K';
|
|
292
|
-
rules += ' ya';
|
|
293
|
-
if (props.isDisabled) rules += ' va_____O';
|
|
294
|
-
else rules += ' va_____K';
|
|
295
|
-
rules += ' va';
|
|
296
|
-
if (props.isDisabled) rules += ' wa_____O';
|
|
297
|
-
else rules += ' wa_____K';
|
|
298
|
-
rules += ' wa';
|
|
271
|
+
rules += ' t-yj94cw';
|
|
272
|
+
if (props.isDisabled) rules += ' ca_____O';
|
|
273
|
+
else rules += ' ca_____K';
|
|
274
|
+
rules += ' ca';
|
|
299
275
|
return rules;
|
|
300
276
|
};
|
|
301
277
|
let $e937566cb5c6349c$export$847ceef3bc944d02 = function anonymous(props) {
|
|
302
278
|
let rules = " .";
|
|
303
|
-
if (props.trackStyle === "thick") rules += '
|
|
304
|
-
else if (props.trackStyle === "thin") rules += '
|
|
305
|
-
rules += '
|
|
279
|
+
if (props.trackStyle === "thick") rules += ' kE';
|
|
280
|
+
else if (props.trackStyle === "thin") rules += ' ks';
|
|
281
|
+
rules += ' Y-3760fj';
|
|
282
|
+
if (props.trackStyle === "thick") rules += ' _wb';
|
|
283
|
+
else if (props.trackStyle === "thin") rules += ' _wd';
|
|
284
|
+
if (props.trackStyle === "thick") rules += ' _xb';
|
|
285
|
+
else if (props.trackStyle === "thin") rules += ' _xd';
|
|
286
|
+
if (props.trackStyle === "thick") rules += ' _yb';
|
|
287
|
+
else if (props.trackStyle === "thin") rules += ' _yd';
|
|
306
288
|
if (props.trackStyle === "thick") rules += ' _zb';
|
|
307
289
|
else if (props.trackStyle === "thin") rules += ' _zd';
|
|
308
|
-
|
|
309
|
-
else if (props.trackStyle === "thin") rules += ' _Ad';
|
|
310
|
-
if (props.trackStyle === "thick") rules += ' _Bb';
|
|
311
|
-
else if (props.trackStyle === "thin") rules += ' _Bd';
|
|
312
|
-
if (props.trackStyle === "thick") rules += ' _Cb';
|
|
313
|
-
else if (props.trackStyle === "thin") rules += ' _Cd';
|
|
314
|
-
rules += ' Ya';
|
|
290
|
+
rules += ' Va';
|
|
315
291
|
if (props.isDisabled) rules += ' ba_____O';
|
|
316
292
|
else rules += ' ba_____M';
|
|
317
293
|
if (props.isDisabled) rules += ' bg';
|
|
318
294
|
else if (props.isEmphasized) rules += ' by';
|
|
319
295
|
else rules += ' bm';
|
|
320
|
-
rules += '
|
|
321
|
-
rules += '
|
|
322
|
-
rules += ' t-yj94cw';
|
|
296
|
+
rules += ' __oa';
|
|
297
|
+
rules += ' wa';
|
|
323
298
|
rules += ' u-yj94cw';
|
|
324
|
-
rules += '
|
|
299
|
+
rules += ' v-yj94cw';
|
|
325
300
|
rules += ' s-yj94cw';
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
rules += '
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
rules += ' ya';
|
|
332
|
-
if (props.isDisabled) rules += ' va_____O';
|
|
333
|
-
else rules += ' va_____K';
|
|
334
|
-
rules += ' va';
|
|
335
|
-
if (props.isDisabled) rules += ' wa_____O';
|
|
336
|
-
else rules += ' wa_____K';
|
|
337
|
-
rules += ' wa';
|
|
338
|
-
rules += ' T-yj8axo';
|
|
301
|
+
rules += ' t-yj94cw';
|
|
302
|
+
if (props.isDisabled) rules += ' ca_____O';
|
|
303
|
+
else rules += ' ca_____K';
|
|
304
|
+
rules += ' ca';
|
|
305
|
+
rules += ' Q-yj8axo';
|
|
339
306
|
return rules;
|
|
340
307
|
};
|
|
341
308
|
function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
|
|
@@ -349,47 +316,47 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
|
|
|
349
316
|
ref: props1.sliderRef,
|
|
350
317
|
className: (renderProps)=>(props1.UNSAFE_className || '') + (0, $308b180f49d82d28$exports.mergeStyles)(function anonymous(props) {
|
|
351
318
|
let rules = " .";
|
|
352
|
-
rules += '
|
|
353
|
-
if (props.isInForm) rules += '
|
|
319
|
+
rules += ' _0f';
|
|
320
|
+
if (props.isInForm) rules += ' __b-3t1y';
|
|
354
321
|
if (props.isInForm) {
|
|
355
|
-
if (props.labelPosition === "side") rules += '
|
|
322
|
+
if (props.labelPosition === "side") rules += ' __c-yqnebx';
|
|
356
323
|
}
|
|
357
|
-
if (props.isInForm) rules += '
|
|
324
|
+
if (props.isInForm) rules += ' __i-1a97rzt';
|
|
358
325
|
else {
|
|
359
|
-
if (props.labelPosition === "side") rules += '
|
|
360
|
-
else if (props.labelPosition === "top") rules += '
|
|
326
|
+
if (props.labelPosition === "side") rules += ' __i-ar5vcf';
|
|
327
|
+
else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
|
|
361
328
|
}
|
|
362
|
-
if (props.labelPosition === "side") rules += '
|
|
363
|
-
else if (props.labelPosition === "top") rules += '
|
|
364
|
-
if (props.labelPosition === "side") rules += '
|
|
365
|
-
else if (props.labelPosition === "top") rules += '
|
|
329
|
+
if (props.labelPosition === "side") rules += ' __j-ar5vcf';
|
|
330
|
+
else if (props.labelPosition === "top") rules += ' __j-1a6w430';
|
|
331
|
+
if (props.labelPosition === "side") rules += ' __k-18h2yqz';
|
|
332
|
+
else if (props.labelPosition === "top") rules += ' __k-1srn173';
|
|
366
333
|
if (props.size === "XL") {
|
|
367
|
-
rules += '
|
|
368
|
-
rules += '
|
|
334
|
+
rules += ' _ebj';
|
|
335
|
+
rules += ' _ei';
|
|
369
336
|
} else if (props.size === "L") {
|
|
370
|
-
rules += '
|
|
371
|
-
rules += '
|
|
337
|
+
rules += ' _ebh';
|
|
338
|
+
rules += ' _eg';
|
|
372
339
|
} else if (props.size === "S") {
|
|
373
|
-
rules += '
|
|
374
|
-
rules += '
|
|
340
|
+
rules += ' _ebd';
|
|
341
|
+
rules += ' _ec';
|
|
375
342
|
} else if (props.size === "XS") {
|
|
376
|
-
rules += '
|
|
377
|
-
rules += '
|
|
343
|
+
rules += ' _ebb';
|
|
344
|
+
rules += ' _ea';
|
|
378
345
|
} else {
|
|
379
|
-
rules += '
|
|
380
|
-
rules += '
|
|
346
|
+
rules += ' _ebf';
|
|
347
|
+
rules += ' _ee';
|
|
381
348
|
}
|
|
382
|
-
rules += '
|
|
383
|
-
rules += '
|
|
384
|
-
rules += '
|
|
385
|
-
if (props.size === "XL") rules += ' -
|
|
386
|
-
else if (props.size === "L") rules += ' -
|
|
387
|
-
else if (props.size === "S") rules += ' -
|
|
388
|
-
else if (props.size === "XS") rules += ' -
|
|
389
|
-
else rules += ' -
|
|
390
|
-
rules += ' -
|
|
391
|
-
rules += '
|
|
392
|
-
rules += '
|
|
349
|
+
rules += ' _2d';
|
|
350
|
+
rules += ' _g-1x99dlob';
|
|
351
|
+
rules += ' _ga';
|
|
352
|
+
if (props.size === "XL") rules += ' -aqrvqh_k-j';
|
|
353
|
+
else if (props.size === "L") rules += ' -aqrvqh_k-i';
|
|
354
|
+
else if (props.size === "S") rules += ' -aqrvqh_k-h';
|
|
355
|
+
else if (props.size === "XS") rules += ' -aqrvqh_k-g';
|
|
356
|
+
else rules += ' -aqrvqh_k-f';
|
|
357
|
+
rules += ' -_1inj1bc_i--prjw07';
|
|
358
|
+
rules += ' je';
|
|
359
|
+
rules += ' __S-yksgrp';
|
|
393
360
|
return rules;
|
|
394
361
|
}({
|
|
395
362
|
labelPosition: labelPosition,
|
|
@@ -458,30 +425,30 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
|
|
|
458
425
|
/*#__PURE__*/ (0, $5DeaH$reactjsxruntime.jsxs)("div", {
|
|
459
426
|
className: function anonymous(props) {
|
|
460
427
|
let rules = " .";
|
|
428
|
+
rules += ' __b-g2ozi1';
|
|
429
|
+
rules += ' __c-g2ozi1';
|
|
430
|
+
rules += ' __d-g2ozi1';
|
|
461
431
|
rules += ' __e-g2ozi1';
|
|
462
|
-
rules += '
|
|
463
|
-
rules += '
|
|
464
|
-
rules += '
|
|
465
|
-
if (props.size === "
|
|
466
|
-
else
|
|
467
|
-
|
|
468
|
-
else
|
|
469
|
-
|
|
470
|
-
if (props.
|
|
471
|
-
else rules += '
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
rules += ' l-rwozxi';
|
|
477
|
-
rules += ' _3e';
|
|
478
|
-
rules += ' _5c';
|
|
479
|
-
if (props.size === "XL") rules += ' hh';
|
|
480
|
-
else if (props.size === "L") rules += ' hg';
|
|
481
|
-
else rules += ' hf';
|
|
432
|
+
if (props.size === "XL") rules += ' qj';
|
|
433
|
+
else if (props.size === "L") rules += ' qi';
|
|
434
|
+
else if (props.size === "S") rules += ' qh';
|
|
435
|
+
else if (props.size === "XS") rules += ' qg';
|
|
436
|
+
else rules += ' qf';
|
|
437
|
+
if (props.isQuiet) rules += ' __na';
|
|
438
|
+
else rules += ' __n-1s8glxue';
|
|
439
|
+
if (props.size === "XL") rules += ' -usygro_l-____g';
|
|
440
|
+
else if (props.size === "L") rules += ' -usygro_l-___0';
|
|
441
|
+
else if (props.size === "S") rules += ' -usygro_l-___u';
|
|
442
|
+
else rules += ' -usygro_l-___K';
|
|
443
|
+
rules += ' m-rwozxi';
|
|
444
|
+
rules += ' _0e';
|
|
445
|
+
rules += ' _2c';
|
|
482
446
|
if (props.size === "XL") rules += ' ih';
|
|
483
447
|
else if (props.size === "L") rules += ' ig';
|
|
484
448
|
else rules += ' if';
|
|
449
|
+
if (props.size === "XL") rules += ' jh';
|
|
450
|
+
else if (props.size === "L") rules += ' jg';
|
|
451
|
+
else rules += ' jf';
|
|
485
452
|
return rules;
|
|
486
453
|
}({
|
|
487
454
|
size: size
|
package/dist/Slider.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Slider as AriaSlider,\n SliderProps as AriaSliderProps,\n ContextValue,\n SliderOutput,\n SliderThumb,\n SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {\n children?: ReactNode,\n /**\n * The size of the Slider.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Slider should be displayed with an emphasized style.\n */\n isEmphasized?: boolean,\n /**\n * The style of the Slider's track.\n *\n * @default 'thin'\n */\n trackStyle?: 'thin' | 'thick', // TODO: add ramp\n /**\n * The style of the Slider's thumb.\n *\n * @default 'default'\n */\n thumbStyle?: 'default' | 'precise'\n // TODO\n // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n /**\n * The offset from which to start the fill.\n */\n fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\n alignItems: {\n labelPosition: {\n side: 'center'\n }\n },\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n },\n columnGap: {\n size: {\n S: 16,\n M: 16,\n L: 20,\n XL: 24\n },\n isInForm: 12\n }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n display: {\n labelPosition: {\n top: 'grid'\n }\n },\n gridArea: 'label',\n width: 'full',\n gridTemplateAreas: {\n labelPosition: {\n top: ['label output']\n }\n },\n gridTemplateColumns: {\n labelPosition: {\n top: [\n '1fr auto'\n ]\n }\n },\n textAlign: {\n labelPosition: {\n side: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n }\n }\n },\n '--field-gap': {\n type: 'paddingBottom',\n value: 0\n }\n});\n\nconst output = style({\n gridArea: 'output',\n textAlign: {\n labelPosition: {\n top: {\n direction: {\n ltr: 'end',\n rtl: 'start'\n }\n },\n side: {\n direction: {\n ltr: 'start',\n rtl: 'end'\n },\n isInForm: 'end'\n }\n }\n }\n});\n\nexport let track = style({\n gridArea: 'track',\n position: 'relative',\n width: 'full',\n height: {\n size: {\n S: 24,\n M: 32,\n L: 40,\n XL: 48\n }\n }\n});\n\nexport let thumbContainer = style({\n size: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n display: 'inline-block',\n position: 'absolute',\n top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n size: {\n thumbStyle: {\n default: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: 22,\n L: 24,\n XL: 26\n }\n }\n }\n }\n});\n\nexport let thumb = style({\n ...focusRing(),\n display: 'inline-block',\n boxSizing: 'border-box',\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translateY(-50%) translateX(-50%)',\n width: {\n thumbStyle: {\n default: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n precise: 6\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: 22,\n L: 24,\n XL: 26\n }\n }\n }\n },\n borderRadius: 'full',\n borderStyle: 'solid',\n borderWidth: '[2px]',\n borderColor: {\n default: 'gray-800',\n isHovered: 'gray-900',\n isDragging: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n height: {\n trackStyle: {\n thin: 4,\n thick: 16\n }\n },\n top: '[50%]',\n borderRadius: {\n trackStyle: {\n thin: 'lg',\n thick: 'sm'\n }\n }\n} as const;\n\nexport let upperTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-300',\n isDisabled: 'disabled'\n },\n translateY: '[-50%]',\n width: 'full',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nexport let filledTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-700',\n isEmphasized: 'accent-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}) {\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n labelPosition = 'top',\n labelAlign = 'start',\n size = 'M',\n minValue = 0,\n maxValue = 100,\n formatOptions\n } = props;\n let formatter = useNumberFormatter(formatOptions);\n let {direction} = useLocale();\n\n return (\n <AriaSlider\n {...props}\n ref={props.sliderRef}\n className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n {({state}) => {\n let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n maxLabelLength = 3 + 2 * Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n\n let outputValue = (\n <SliderOutput\n style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n className={output({direction, labelPosition, isInForm: !!formContext})}>\n {({state}) =>\n state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </SliderOutput>\n );\n\n return (\n <>\n <div className={labelContainer({labelPosition, labelAlign})}>\n <FieldLabel\n isDisabled={props.isDisabled}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {labelPosition === 'top' && outputValue}\n </div>\n <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n {props.children}\n {labelPosition === 'side' && outputValue}\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n}\n\nexport const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n labelPosition = 'top',\n size = 'M',\n fillOffset,\n isEmphasized,\n trackStyle = 'thin',\n thumbStyle = 'default'\n } = props;\n let thumbRef = useRef(null);\n let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n let domRef = useFocusableRef(ref, inputRef);\n let {direction} = useLocale();\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n return (\n <SliderBase\n {...props}\n sliderRef={domRef}>\n <SliderTrack\n className={track({size, labelPosition, isInForm: !!formContext})}>\n {({state, isDisabled}) => {\n\n fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = fillWidth > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n return (\n <>\n <div className={upperTrack({isDisabled, trackStyle})} />\n <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n <SliderThumb className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n {(renderProps) => (\n <div className={thumbHitArea({size})}>\n <div\n className={thumb({\n ...renderProps,\n size,\n thumbStyle\n })} />\n </div>\n )}\n </SliderThumb>\n </>\n );\n }}\n </SliderTrack>\n </SliderBase>\n );\n});\n"],"names":[],"version":3,"file":"Slider.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Slider as AriaSlider,\n SliderProps as AriaSliderProps,\n ContextValue,\n SliderOutput,\n SliderThumb,\n SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {\n children?: ReactNode,\n /**\n * The size of the Slider.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Slider should be displayed with an emphasized style.\n */\n isEmphasized?: boolean,\n /**\n * The style of the Slider's track.\n *\n * @default 'thin'\n */\n trackStyle?: 'thin' | 'thick', // TODO: add ramp\n /**\n * The style of the Slider's thumb.\n *\n * @default 'default'\n */\n thumbStyle?: 'default' | 'precise'\n // TODO\n // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n /**\n * The offset from which to start the fill.\n */\n fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n font: 'control',\n alignItems: {\n labelPosition: {\n side: 'center'\n }\n },\n color: {\n default: 'neutral-subdued',\n isDisabled: 'disabled'\n },\n columnGap: {\n size: {\n S: 16,\n M: 16,\n L: 20,\n XL: 24\n },\n isInForm: 12\n }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n display: {\n labelPosition: {\n top: 'grid'\n }\n },\n gridArea: 'label',\n width: 'full',\n gridTemplateAreas: {\n labelPosition: {\n top: ['label output']\n }\n },\n gridTemplateColumns: {\n labelPosition: {\n top: [\n '1fr auto'\n ]\n }\n },\n textAlign: {\n labelPosition: {\n side: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n }\n }\n },\n '--field-gap': {\n type: 'paddingBottom',\n value: 0\n }\n});\n\nconst output = style({\n gridArea: 'output',\n textAlign: {\n labelPosition: {\n top: {\n direction: {\n ltr: 'end',\n rtl: 'start'\n }\n },\n side: {\n direction: {\n ltr: 'start',\n rtl: 'end'\n },\n isInForm: 'end'\n }\n }\n }\n});\n\nexport let track = style({\n gridArea: 'track',\n position: 'relative',\n width: 'full',\n height: {\n size: {\n S: 24,\n M: 32,\n L: 40,\n XL: 48\n }\n }\n});\n\nexport let thumbContainer = style({\n size: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n display: 'inline-block',\n position: 'absolute',\n top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n size: {\n thumbStyle: {\n default: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: 22,\n L: 24,\n XL: 26\n }\n }\n }\n }\n});\n\nexport let thumb = style({\n ...focusRing(),\n display: 'inline-block',\n boxSizing: 'border-box',\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translateY(-50%) translateX(-50%)',\n width: {\n thumbStyle: {\n default: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n precise: 6\n }\n },\n height: {\n thumbStyle: {\n default: {\n size: {\n S: 18,\n M: 20,\n L: 22,\n XL: 24\n }\n },\n precise: {\n size: {\n S: 20,\n M: 22,\n L: 24,\n XL: 26\n }\n }\n }\n },\n borderRadius: 'full',\n borderStyle: 'solid',\n borderWidth: '[2px]',\n borderColor: {\n default: 'gray-800',\n isHovered: 'gray-900',\n isDragging: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n height: {\n trackStyle: {\n thin: 4,\n thick: 16\n }\n },\n top: '[50%]',\n borderRadius: {\n trackStyle: {\n thin: 'lg',\n thick: 'sm'\n }\n }\n} as const;\n\nexport let upperTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-300',\n isDisabled: 'disabled'\n },\n translateY: '[-50%]',\n width: 'full',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nexport let filledTrack = style({\n ...trackStyling,\n position: 'absolute',\n backgroundColor: {\n default: 'gray-700',\n isEmphasized: 'accent-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: '[.5px]',\n borderColor: {\n default: 'transparent',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n },\n translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}) {\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n labelPosition = 'top',\n labelAlign = 'start',\n size = 'M',\n minValue = 0,\n maxValue = 100,\n formatOptions\n } = props;\n let formatter = useNumberFormatter(formatOptions);\n let {direction} = useLocale();\n\n return (\n <AriaSlider\n {...props}\n ref={props.sliderRef}\n className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n {({state}) => {\n let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n switch (state.values.length) {\n case 1:\n break;\n case 2:\n // This should really use the NumberFormat#formatRange proposal...\n // https://github.com/tc39/ecma402/issues/393\n // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n maxLabelLength = 3 + 2 * Math.max(\n maxLabelLength,\n [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n );\n break;\n default:\n throw new Error('Only sliders with 1 or 2 handles are supported!');\n }\n\n let outputValue = (\n <SliderOutput\n style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n className={output({direction, labelPosition, isInForm: !!formContext})}>\n {({state}) =>\n state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </SliderOutput>\n );\n\n return (\n <>\n <div className={labelContainer({labelPosition, labelAlign})}>\n <FieldLabel\n isDisabled={props.isDisabled}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {labelPosition === 'top' && outputValue}\n </div>\n <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n {props.children}\n {labelPosition === 'side' && outputValue}\n </div>\n </>\n );\n }}\n </AriaSlider>\n );\n}\n\nexport const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n labelPosition = 'top',\n size = 'M',\n fillOffset,\n isEmphasized,\n trackStyle = 'thin',\n thumbStyle = 'default'\n } = props;\n let thumbRef = useRef(null);\n let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n let domRef = useFocusableRef(ref, inputRef);\n let {direction} = useLocale();\n let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n return (\n <SliderBase\n {...props}\n sliderRef={domRef}>\n <SliderTrack\n className={track({size, labelPosition, isInForm: !!formContext})}>\n {({state, isDisabled}) => {\n\n fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n let isRightOfOffset = fillWidth > 0;\n let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n return (\n <>\n <div className={upperTrack({isDisabled, trackStyle})} />\n <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n <SliderThumb className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n {(renderProps) => (\n <div className={thumbHitArea({size})}>\n <div\n className={thumb({\n ...renderProps,\n size,\n thumbStyle\n })} />\n </div>\n )}\n </SliderThumb>\n </>\n );\n }}\n </SliderTrack>\n </SliderBase>\n );\n});\n"],"names":[],"version":3,"file":"Slider.cjs.map"}
|