@react-spectrum/s2 3.0.0-nightly-e228ed814-250129 → 3.0.0-nightly-e3ed3c7f6-250130
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 +91 -67
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +163 -91
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +91 -67
- 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 +236 -152
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +309 -165
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +236 -152
- 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 +264 -261
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +210 -198
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +264 -261
- 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 +124 -73
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +201 -81
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +124 -73
- 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 +27 -21
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +93 -45
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +27 -21
- 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 +27 -24
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +41 -29
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +27 -24
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +23 -23
- package/dist/ColorSwatchPicker.css +60 -48
- 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 +111 -108
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +124 -112
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +111 -108
- 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 +56 -47
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +80 -56
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +56 -47
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +204 -150
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +246 -150
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +204 -150
- 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 +104 -77
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +149 -77
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +104 -77
- 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 -264
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +152 -152
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +270 -265
- package/dist/Menu.mjs.map +1 -1
- 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 +193 -175
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +223 -163
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +193 -175
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +84 -78
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +89 -65
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +84 -78
- 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 +152 -80
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +240 -96
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +152 -80
- 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 +101 -89
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +140 -92
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +101 -89
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +229 -196
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +221 -149
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +229 -196
- 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 +107 -74
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +141 -69
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +107 -74
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +280 -253
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +199 -163
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +280 -253
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +83 -83
- package/dist/Tabs.css +58 -58
- package/dist/Tabs.mjs +83 -83
- 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 +60 -57
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +83 -71
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +60 -57
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +465 -0
- package/dist/TreeView.cjs.map +1 -0
- package/dist/TreeView.css +632 -0
- package/dist/TreeView.css.map +1 -0
- package/dist/TreeView.mjs +455 -0
- package/dist/TreeView.mjs.map +1 -0
- package/dist/main.cjs +4 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +21 -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 +20 -19
- package/src/Menu.tsx +2 -0
- package/src/TreeView.tsx +497 -0
- package/src/index.ts +2 -0
- package/style/__tests__/style-macro.test.js +18 -18
- package/style/dist/spectrum-theme.cjs +20 -10
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +20 -10
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +4 -0
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +18 -11
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)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\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 += ' _g-bc1l9oh';
|
|
55
|
+
rules += ' _g-1uotwbwg';
|
|
56
|
+
rules += ' _g-eo0c6sf';
|
|
57
|
+
rules += ' _g-enzzrge';
|
|
58
|
+
rules += ' _g-enzykdd';
|
|
59
|
+
rules += ' _g-enzwzjc';
|
|
60
|
+
rules += ' _g-enzrfpb';
|
|
61
|
+
rules += ' _ga';
|
|
62
62
|
if (props.size === "XL") {
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
63
|
+
rules += ' _hbj';
|
|
64
|
+
rules += ' _hi';
|
|
65
65
|
} else if (props.size === "L") {
|
|
66
|
-
rules += '
|
|
67
|
-
rules += '
|
|
66
|
+
rules += ' _hbh';
|
|
67
|
+
rules += ' _hg';
|
|
68
68
|
} else if (props.size === "S") {
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
69
|
+
rules += ' _hbd';
|
|
70
|
+
rules += ' _hc';
|
|
71
71
|
} else if (props.size === "XS") {
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
72
|
+
rules += ' _hbb';
|
|
73
|
+
rules += ' _ha';
|
|
74
74
|
} else {
|
|
75
|
-
rules += '
|
|
76
|
-
rules += '
|
|
75
|
+
rules += ' _hbf';
|
|
76
|
+
rules += ' _he';
|
|
77
77
|
}
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
78
|
+
rules += ' _ib';
|
|
79
|
+
rules += ' _j-1x99dlob';
|
|
80
|
+
rules += ' _ja';
|
|
81
81
|
if (props.isDisabled) rules += ' aj';
|
|
82
82
|
else {
|
|
83
83
|
if (props.isPressed) rules += ' an';
|
|
@@ -85,89 +85,78 @@ 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 += ' _5c';
|
|
89
|
+
if (props.isInForm) rules += ' ie';
|
|
90
|
+
else if (props.size === "XL") rules += ' ih';
|
|
91
|
+
else if (props.size === "L") rules += ' ig';
|
|
92
|
+
else if (props.size === "M") rules += ' if';
|
|
93
|
+
else if (props.size === "S") rules += ' if';
|
|
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 += '
|
|
99
|
-
rules += ' __b-hr3t0p';
|
|
100
|
-
rules += ' __c-hr3t0p';
|
|
101
|
-
rules += ' __d-hr3t0p';
|
|
98
|
+
if (props.labelPosition === "top") rules += ' _3f';
|
|
102
99
|
rules += ' __e-hr3t0p';
|
|
103
|
-
rules += '
|
|
104
|
-
|
|
105
|
-
|
|
100
|
+
rules += ' __f-hr3t0p';
|
|
101
|
+
rules += ' __g-hr3t0p';
|
|
102
|
+
rules += ' __h-hr3t0p';
|
|
103
|
+
rules += ' kb';
|
|
104
|
+
if (props.labelPosition === "top") rules += ' __n-1h4qke2';
|
|
105
|
+
if (props.labelPosition === "top") rules += ' __l-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 += ' _nc';
|
|
108
|
+
else if (props.labelAlign === "start") rules += ' _na';
|
|
109
109
|
}
|
|
110
|
-
rules += ' -
|
|
110
|
+
rules += ' -_1inj1bc_I-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';
|
|
118
115
|
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 += ' _nc';
|
|
121
|
+
else if (props.direction === "rtl") rules += ' _nc';
|
|
122
|
+
else if (props.direction === "ltr") rules += ' _na';
|
|
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 += ' _na';
|
|
125
|
+
else if (props.direction === "ltr") rules += ' _nc';
|
|
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';
|
|
134
131
|
rules += ' __e-n9hk5a';
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
132
|
+
rules += ' __f-n9hk5a';
|
|
133
|
+
rules += ' __g-n9hk5a';
|
|
134
|
+
rules += ' __h-n9hk5a';
|
|
135
|
+
rules += ' Yc';
|
|
136
|
+
rules += ' kb';
|
|
137
|
+
if (props.size === "XL") rules += ' j_a';
|
|
138
|
+
else if (props.size === "L") rules += ' j2';
|
|
139
|
+
else if (props.size === "M") rules += ' jU';
|
|
140
|
+
else if (props.size === "S") rules += ' jM';
|
|
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';
|
|
149
145
|
if (props.size === "XL") rules += ' kM';
|
|
150
146
|
else if (props.size === "L") rules += ' kK';
|
|
151
147
|
else if (props.size === "M") rules += ' kI';
|
|
152
148
|
else if (props.size === "S") rules += ' kG';
|
|
153
|
-
rules += '
|
|
154
|
-
rules += '
|
|
155
|
-
rules += '
|
|
149
|
+
if (props.size === "XL") rules += ' jM';
|
|
150
|
+
else if (props.size === "L") rules += ' jK';
|
|
151
|
+
else if (props.size === "M") rules += ' jI';
|
|
152
|
+
else if (props.size === "S") rules += ' jG';
|
|
153
|
+
rules += ' _3b';
|
|
154
|
+
rules += ' Ya';
|
|
155
|
+
rules += ' _b-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
|
-
}
|
|
171
160
|
if (props.thumbStyle === "precise") {
|
|
172
161
|
if (props.size === "XL") rules += ' kO';
|
|
173
162
|
else if (props.size === "L") rules += ' kM';
|
|
@@ -179,54 +168,80 @@ let $e937566cb5c6349c$export$f120a3c6038107a5 = function anonymous(props) {
|
|
|
179
168
|
else if (props.size === "M") rules += ' kI';
|
|
180
169
|
else if (props.size === "S") rules += ' kG';
|
|
181
170
|
}
|
|
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 += ' _Pb';
|
|
187
|
+
else rules += ' _Pa';
|
|
188
|
+
rules += ' ca_____M';
|
|
189
|
+
rules += ' cx';
|
|
190
|
+
rules += ' _Rc';
|
|
191
|
+
rules += ' _Q-3t1z';
|
|
192
|
+
rules += ' _3b';
|
|
193
|
+
rules += ' __ra';
|
|
194
|
+
rules += ' Ya';
|
|
195
|
+
rules += ' _b-3760fj';
|
|
196
|
+
rules += ' _c-3760fj';
|
|
197
|
+
rules += ' X-mn5ko6';
|
|
198
|
+
if (props.thumbStyle === "precise") rules += ' ku';
|
|
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") {
|
|
211
200
|
if (props.size === "XL") rules += ' kM';
|
|
212
201
|
else if (props.size === "L") rules += ' kK';
|
|
213
202
|
else if (props.size === "M") rules += ' kI';
|
|
214
203
|
else if (props.size === "S") rules += ' kG';
|
|
215
204
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
205
|
+
if (props.thumbStyle === "precise") {
|
|
206
|
+
if (props.size === "XL") rules += ' jO';
|
|
207
|
+
else if (props.size === "L") rules += ' jM';
|
|
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
|
+
}
|
|
219
216
|
rules += ' _zf';
|
|
220
|
-
rules += '
|
|
217
|
+
rules += ' _Af';
|
|
218
|
+
rules += ' _Bf';
|
|
219
|
+
rules += ' _Cf';
|
|
220
|
+
rules += ' za';
|
|
221
|
+
rules += ' t-375zlr';
|
|
221
222
|
rules += ' u-375zlr';
|
|
222
|
-
rules += '
|
|
223
|
+
rules += ' r-375zlr';
|
|
223
224
|
rules += ' s-375zlr';
|
|
224
|
-
rules += '
|
|
225
|
-
if (props.isDisabled) rules += '
|
|
226
|
-
if (props.
|
|
227
|
-
else if (props.
|
|
228
|
-
else
|
|
229
|
-
|
|
225
|
+
if (props.isDisabled) rules += ' xa_____O';
|
|
226
|
+
if (props.isDisabled) rules += ' xi';
|
|
227
|
+
else if (props.isDragging) rules += ' xo';
|
|
228
|
+
else if (props.isHovered) rules += ' xo';
|
|
229
|
+
else rules += ' xn';
|
|
230
|
+
if (props.isDisabled) rules += ' ya_____O';
|
|
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';
|
|
230
245
|
rules += ' bd';
|
|
231
246
|
return rules;
|
|
232
247
|
};
|
|
@@ -247,62 +262,80 @@ const $e937566cb5c6349c$var$trackStyling = {
|
|
|
247
262
|
};
|
|
248
263
|
let $e937566cb5c6349c$export$1e1dc99b6e2204f1 = function anonymous(props) {
|
|
249
264
|
let rules = " .";
|
|
250
|
-
if (props.trackStyle === "thick") rules += '
|
|
251
|
-
else if (props.trackStyle === "thin") rules += '
|
|
252
|
-
rules += '
|
|
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';
|
|
265
|
+
if (props.trackStyle === "thick") rules += ' jE';
|
|
266
|
+
else if (props.trackStyle === "thin") rules += ' js';
|
|
267
|
+
rules += ' _b-3760fj';
|
|
259
268
|
if (props.trackStyle === "thick") rules += ' _zb';
|
|
260
269
|
else if (props.trackStyle === "thin") rules += ' _zd';
|
|
261
|
-
rules += '
|
|
270
|
+
if (props.trackStyle === "thick") rules += ' _Ab';
|
|
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';
|
|
262
277
|
if (props.isDisabled) rules += ' bg';
|
|
263
278
|
else rules += ' bi';
|
|
264
|
-
rules += '
|
|
265
|
-
rules += '
|
|
266
|
-
rules += '
|
|
267
|
-
rules += '
|
|
279
|
+
rules += ' T-yj8axo';
|
|
280
|
+
rules += ' kb';
|
|
281
|
+
rules += ' __ra';
|
|
282
|
+
rules += ' za';
|
|
283
|
+
rules += ' t-yj94cw';
|
|
268
284
|
rules += ' u-yj94cw';
|
|
269
|
-
rules += '
|
|
285
|
+
rules += ' r-yj94cw';
|
|
270
286
|
rules += ' s-yj94cw';
|
|
271
|
-
rules += '
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
rules += '
|
|
287
|
+
if (props.isDisabled) rules += ' xa_____O';
|
|
288
|
+
else rules += ' xa_____K';
|
|
289
|
+
rules += ' xa';
|
|
290
|
+
if (props.isDisabled) rules += ' ya_____O';
|
|
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';
|
|
275
299
|
return rules;
|
|
276
300
|
};
|
|
277
301
|
let $e937566cb5c6349c$export$847ceef3bc944d02 = function anonymous(props) {
|
|
278
302
|
let rules = " .";
|
|
279
|
-
if (props.trackStyle === "thick") rules += '
|
|
280
|
-
else if (props.trackStyle === "thin") rules += '
|
|
281
|
-
rules += '
|
|
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';
|
|
303
|
+
if (props.trackStyle === "thick") rules += ' jE';
|
|
304
|
+
else if (props.trackStyle === "thin") rules += ' js';
|
|
305
|
+
rules += ' _b-3760fj';
|
|
288
306
|
if (props.trackStyle === "thick") rules += ' _zb';
|
|
289
307
|
else if (props.trackStyle === "thin") rules += ' _zd';
|
|
290
|
-
rules += '
|
|
308
|
+
if (props.trackStyle === "thick") rules += ' _Ab';
|
|
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';
|
|
291
315
|
if (props.isDisabled) rules += ' ba_____O';
|
|
292
316
|
else rules += ' ba_____M';
|
|
293
317
|
if (props.isDisabled) rules += ' bg';
|
|
294
318
|
else if (props.isEmphasized) rules += ' by';
|
|
295
319
|
else rules += ' bm';
|
|
296
|
-
rules += '
|
|
297
|
-
rules += '
|
|
320
|
+
rules += ' __ra';
|
|
321
|
+
rules += ' za';
|
|
322
|
+
rules += ' t-yj94cw';
|
|
298
323
|
rules += ' u-yj94cw';
|
|
299
|
-
rules += '
|
|
324
|
+
rules += ' r-yj94cw';
|
|
300
325
|
rules += ' s-yj94cw';
|
|
301
|
-
rules += '
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
rules += '
|
|
305
|
-
rules += '
|
|
326
|
+
if (props.isDisabled) rules += ' xa_____O';
|
|
327
|
+
else rules += ' xa_____K';
|
|
328
|
+
rules += ' xa';
|
|
329
|
+
if (props.isDisabled) rules += ' ya_____O';
|
|
330
|
+
else rules += ' ya_____K';
|
|
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';
|
|
306
339
|
return rules;
|
|
307
340
|
};
|
|
308
341
|
function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
|
|
@@ -316,47 +349,47 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
|
|
|
316
349
|
ref: props1.sliderRef,
|
|
317
350
|
className: (renderProps)=>(props1.UNSAFE_className || '') + (0, $308b180f49d82d28$exports.mergeStyles)(function anonymous(props) {
|
|
318
351
|
let rules = " .";
|
|
319
|
-
rules += '
|
|
320
|
-
if (props.isInForm) rules += '
|
|
352
|
+
rules += ' _3f';
|
|
353
|
+
if (props.isInForm) rules += ' __e-3t1y';
|
|
321
354
|
if (props.isInForm) {
|
|
322
|
-
if (props.labelPosition === "side") rules += '
|
|
355
|
+
if (props.labelPosition === "side") rules += ' __f-yqnebx';
|
|
323
356
|
}
|
|
324
|
-
if (props.isInForm) rules += '
|
|
357
|
+
if (props.isInForm) rules += ' __l-1a97rzt';
|
|
325
358
|
else {
|
|
326
|
-
if (props.labelPosition === "side") rules += '
|
|
327
|
-
else if (props.labelPosition === "top") rules += '
|
|
359
|
+
if (props.labelPosition === "side") rules += ' __l-ar5vcf';
|
|
360
|
+
else if (props.labelPosition === "top") rules += ' __l-2wzs0i';
|
|
328
361
|
}
|
|
329
|
-
if (props.labelPosition === "side") rules += '
|
|
330
|
-
else if (props.labelPosition === "top") rules += '
|
|
331
|
-
if (props.labelPosition === "side") rules += '
|
|
332
|
-
else if (props.labelPosition === "top") rules += '
|
|
362
|
+
if (props.labelPosition === "side") rules += ' __m-ar5vcf';
|
|
363
|
+
else if (props.labelPosition === "top") rules += ' __m-1a6w430';
|
|
364
|
+
if (props.labelPosition === "side") rules += ' __n-18h2yqz';
|
|
365
|
+
else if (props.labelPosition === "top") rules += ' __n-1srn173';
|
|
333
366
|
if (props.size === "XL") {
|
|
334
|
-
rules += '
|
|
335
|
-
rules += '
|
|
367
|
+
rules += ' _hbj';
|
|
368
|
+
rules += ' _hi';
|
|
336
369
|
} else if (props.size === "L") {
|
|
337
|
-
rules += '
|
|
338
|
-
rules += '
|
|
370
|
+
rules += ' _hbh';
|
|
371
|
+
rules += ' _hg';
|
|
339
372
|
} else if (props.size === "S") {
|
|
340
|
-
rules += '
|
|
341
|
-
rules += '
|
|
373
|
+
rules += ' _hbd';
|
|
374
|
+
rules += ' _hc';
|
|
342
375
|
} else if (props.size === "XS") {
|
|
343
|
-
rules += '
|
|
344
|
-
rules += '
|
|
376
|
+
rules += ' _hbb';
|
|
377
|
+
rules += ' _ha';
|
|
345
378
|
} else {
|
|
346
|
-
rules += '
|
|
347
|
-
rules += '
|
|
379
|
+
rules += ' _hbf';
|
|
380
|
+
rules += ' _he';
|
|
348
381
|
}
|
|
349
|
-
rules += '
|
|
350
|
-
rules += '
|
|
351
|
-
rules += '
|
|
352
|
-
if (props.size === "XL") rules += ' -
|
|
353
|
-
else if (props.size === "L") rules += ' -
|
|
354
|
-
else if (props.size === "S") rules += ' -
|
|
355
|
-
else if (props.size === "XS") rules += ' -
|
|
356
|
-
else rules += ' -
|
|
357
|
-
rules += ' -
|
|
358
|
-
rules += '
|
|
359
|
-
rules += '
|
|
382
|
+
rules += ' _5d';
|
|
383
|
+
rules += ' _j-1x99dlob';
|
|
384
|
+
rules += ' _ja';
|
|
385
|
+
if (props.size === "XL") rules += ' -aqrvqh_j-j';
|
|
386
|
+
else if (props.size === "L") rules += ' -aqrvqh_j-i';
|
|
387
|
+
else if (props.size === "S") rules += ' -aqrvqh_j-h';
|
|
388
|
+
else if (props.size === "XS") rules += ' -aqrvqh_j-g';
|
|
389
|
+
else rules += ' -aqrvqh_j-f';
|
|
390
|
+
rules += ' -_1inj1bc_h--prjw07';
|
|
391
|
+
rules += ' ie';
|
|
392
|
+
rules += ' __V-yksgrp';
|
|
360
393
|
return rules;
|
|
361
394
|
}({
|
|
362
395
|
labelPosition: labelPosition,
|
|
@@ -425,30 +458,30 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
|
|
|
425
458
|
/*#__PURE__*/ (0, $5DeaH$reactjsxruntime.jsxs)("div", {
|
|
426
459
|
className: function anonymous(props) {
|
|
427
460
|
let rules = " .";
|
|
428
|
-
rules += ' __b-g2ozi1';
|
|
429
|
-
rules += ' __c-g2ozi1';
|
|
430
|
-
rules += ' __d-g2ozi1';
|
|
431
461
|
rules += ' __e-g2ozi1';
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
else rules += '
|
|
437
|
-
if (props.
|
|
438
|
-
else rules += '
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
else
|
|
442
|
-
|
|
443
|
-
rules += '
|
|
444
|
-
rules += '
|
|
445
|
-
rules += '
|
|
462
|
+
rules += ' __f-g2ozi1';
|
|
463
|
+
rules += ' __g-g2ozi1';
|
|
464
|
+
rules += ' __h-g2ozi1';
|
|
465
|
+
if (props.size === "XL") rules += ' pj';
|
|
466
|
+
else if (props.size === "L") rules += ' pi';
|
|
467
|
+
else if (props.size === "S") rules += ' ph';
|
|
468
|
+
else if (props.size === "XS") rules += ' pg';
|
|
469
|
+
else rules += ' pf';
|
|
470
|
+
if (props.isQuiet) rules += ' __qa';
|
|
471
|
+
else rules += ' __q-1s8glxue';
|
|
472
|
+
if (props.size === "XL") rules += ' -usygro_k-____g';
|
|
473
|
+
else if (props.size === "L") rules += ' -usygro_k-___0';
|
|
474
|
+
else if (props.size === "S") rules += ' -usygro_k-___u';
|
|
475
|
+
else rules += ' -usygro_k-___K';
|
|
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';
|
|
446
482
|
if (props.size === "XL") rules += ' ih';
|
|
447
483
|
else if (props.size === "L") rules += ' ig';
|
|
448
484
|
else rules += ' if';
|
|
449
|
-
if (props.size === "XL") rules += ' jh';
|
|
450
|
-
else if (props.size === "L") rules += ' jg';
|
|
451
|
-
else rules += ' jf';
|
|
452
485
|
return rules;
|
|
453
486
|
}({
|
|
454
487
|
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<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<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"}
|