@react-spectrum/s2 0.9.0 → 0.9.2
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 +2 -2
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +2 -2
- package/dist/ActionBar.cjs +60 -60
- package/dist/ActionBar.css +59 -59
- package/dist/ActionBar.mjs +60 -60
- package/dist/ActionButton.cjs +187 -187
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +134 -134
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +187 -187
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +15 -15
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +15 -15
- package/dist/Add.cjs +10 -10
- package/dist/Add.css +6 -6
- package/dist/Add.mjs +10 -10
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Asterisk.cjs +6 -6
- package/dist/Asterisk.css +4 -4
- package/dist/Asterisk.mjs +6 -6
- package/dist/Avatar.cjs +14 -14
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +14 -14
- package/dist/AvatarGroup.cjs +120 -120
- package/dist/AvatarGroup.css +37 -37
- package/dist/AvatarGroup.mjs +120 -120
- package/dist/Badge.cjs +196 -196
- package/dist/Badge.css +129 -129
- package/dist/Badge.mjs +196 -196
- package/dist/Breadcrumbs.cjs +231 -231
- package/dist/Breadcrumbs.css +102 -102
- package/dist/Breadcrumbs.mjs +231 -231
- package/dist/Button.cjs +328 -328
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +176 -176
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +328 -328
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +20 -20
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +20 -20
- package/dist/Card.cjs +294 -294
- package/dist/Card.css +205 -205
- package/dist/Card.mjs +294 -294
- package/dist/CardView.cjs +17 -17
- package/dist/CardView.css +17 -17
- package/dist/CardView.mjs +17 -17
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +160 -160
- package/dist/Checkbox.css +94 -94
- package/dist/Checkbox.mjs +160 -160
- package/dist/CheckboxGroup.cjs +43 -43
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +43 -43
- package/dist/Checkmark.cjs +12 -12
- package/dist/Checkmark.css +8 -8
- package/dist/Checkmark.mjs +12 -12
- package/dist/Chevron.cjs +12 -12
- package/dist/Chevron.css +10 -10
- package/dist/Chevron.mjs +12 -12
- package/dist/ClearButton.cjs +29 -29
- package/dist/ClearButton.css +29 -29
- package/dist/ClearButton.mjs +29 -29
- package/dist/CloseButton.cjs +54 -54
- package/dist/CloseButton.css +46 -46
- package/dist/CloseButton.mjs +54 -54
- package/dist/ColorArea.cjs +16 -16
- package/dist/ColorArea.css +16 -16
- package/dist/ColorArea.mjs +16 -16
- package/dist/ColorField.cjs +31 -31
- package/dist/ColorField.css +31 -31
- package/dist/ColorField.mjs +31 -31
- package/dist/ColorHandle.cjs +27 -27
- package/dist/ColorHandle.css +42 -42
- package/dist/ColorHandle.mjs +27 -27
- package/dist/ColorSlider.cjs +108 -108
- package/dist/ColorSlider.css +56 -56
- package/dist/ColorSlider.mjs +108 -108
- package/dist/ColorSwatch.cjs +29 -29
- package/dist/ColorSwatch.css +29 -29
- package/dist/ColorSwatch.mjs +29 -29
- package/dist/ColorSwatchPicker.cjs +27 -27
- package/dist/ColorSwatchPicker.css +46 -46
- package/dist/ColorSwatchPicker.mjs +27 -27
- package/dist/ColorWheel.cjs +26 -26
- package/dist/ColorWheel.css +17 -17
- package/dist/ColorWheel.mjs +26 -26
- package/dist/ComboBox.cjs +378 -376
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +179 -179
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +378 -376
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.cjs.map +1 -1
- package/dist/ContextualHelp.css +49 -49
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/ContextualHelp.mjs.map +1 -1
- package/dist/Cross.cjs +14 -14
- package/dist/Cross.css +10 -10
- package/dist/Cross.mjs +14 -14
- package/dist/CustomDialog.cjs +25 -25
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +25 -25
- package/dist/Dash.cjs +10 -10
- package/dist/Dash.css +6 -6
- package/dist/Dash.mjs +10 -10
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +70 -70
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +129 -129
- package/dist/Disclosure.css +104 -104
- package/dist/Disclosure.mjs +129 -129
- package/dist/Divider.cjs +25 -25
- package/dist/Divider.css +25 -25
- package/dist/Divider.mjs +25 -25
- package/dist/DropZone.cjs +58 -58
- package/dist/DropZone.css +54 -54
- package/dist/DropZone.mjs +58 -58
- package/dist/Field.cjs +340 -340
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +144 -144
- package/dist/Field.mjs +340 -340
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +9 -9
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +9 -9
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +79 -79
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +219 -219
- package/dist/IllustratedMessage.css +74 -74
- package/dist/IllustratedMessage.mjs +219 -219
- package/dist/Image.cjs +14 -14
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css +14 -14
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +14 -14
- package/dist/Image.mjs.map +1 -1
- package/dist/InlineAlert.cjs +108 -108
- package/dist/InlineAlert.css +90 -90
- package/dist/InlineAlert.mjs +108 -108
- package/dist/Link.cjs +49 -49
- package/dist/Link.css +41 -41
- package/dist/Link.mjs +49 -49
- package/dist/LinkOut.cjs +8 -8
- package/dist/LinkOut.css +8 -8
- package/dist/LinkOut.mjs +8 -8
- package/dist/Menu.cjs +422 -422
- package/dist/Menu.css +180 -180
- package/dist/Menu.mjs +422 -422
- package/dist/Meter.cjs +153 -153
- package/dist/Meter.css +95 -95
- package/dist/Meter.mjs +153 -153
- package/dist/Modal.cjs +58 -58
- package/dist/Modal.css +50 -50
- package/dist/Modal.mjs +58 -58
- package/dist/NotificationBadge.cjs +56 -56
- package/dist/NotificationBadge.css +51 -51
- package/dist/NotificationBadge.mjs +56 -56
- package/dist/NumberField.cjs +114 -118
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +103 -103
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +115 -119
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +273 -271
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +169 -169
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +273 -271
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +85 -85
- package/dist/Popover.css +66 -66
- package/dist/Popover.mjs +85 -85
- package/dist/ProgressBar.cjs +163 -163
- package/dist/ProgressBar.css +103 -103
- package/dist/ProgressBar.mjs +163 -163
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +17 -17
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +10 -10
- package/dist/Provider.css +9 -9
- package/dist/Provider.mjs +10 -10
- package/dist/Radio.cjs +144 -144
- package/dist/Radio.css +81 -81
- package/dist/Radio.mjs +144 -144
- package/dist/RadioGroup.cjs +41 -41
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +41 -41
- package/dist/SearchField.cjs +41 -41
- package/dist/SearchField.css +49 -49
- package/dist/SearchField.mjs +41 -41
- package/dist/SegmentedControl.cjs +171 -171
- package/dist/SegmentedControl.css +120 -120
- package/dist/SegmentedControl.mjs +171 -171
- package/dist/Slider.cjs +288 -288
- package/dist/Slider.css +152 -152
- package/dist/Slider.mjs +288 -288
- package/dist/StatusLight.cjs +115 -115
- package/dist/StatusLight.css +63 -63
- package/dist/StatusLight.mjs +115 -115
- package/dist/Switch.cjs +152 -152
- package/dist/Switch.css +76 -76
- package/dist/Switch.mjs +152 -152
- package/dist/TableView.cjs +310 -310
- package/dist/TableView.css +172 -172
- package/dist/TableView.mjs +310 -310
- package/dist/Tabs.cjs +113 -110
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +92 -92
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +113 -110
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +123 -123
- package/dist/TabsPicker.css +112 -112
- package/dist/TabsPicker.mjs +123 -123
- package/dist/TagGroup.cjs +202 -202
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +147 -147
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +202 -202
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +57 -57
- package/dist/TextField.css +57 -57
- package/dist/TextField.mjs +57 -57
- package/dist/Toast.cjs +118 -118
- package/dist/Toast.css +105 -105
- package/dist/Toast.mjs +118 -118
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +81 -81
- package/dist/Tooltip.css +68 -68
- package/dist/Tooltip.mjs +81 -81
- package/dist/TreeView.cjs +143 -149
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +143 -143
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +143 -149
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/icons/Icon.cjs +10 -10
- package/icons/Icon.css +9 -9
- package/icons/Icon.mjs +10 -10
- package/icons/Skeleton.cjs +4 -3
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +4 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +45 -26
- package/src/ActionButton.tsx +1 -1
- package/src/Button.tsx +3 -3
- package/src/ComboBox.tsx +3 -2
- package/src/ContextualHelp.tsx +2 -2
- package/src/Image.tsx +1 -1
- package/src/NumberField.tsx +0 -2
- package/src/Picker.tsx +3 -2
- package/src/Skeleton.tsx +2 -1
- package/src/Tabs.tsx +7 -5
- package/src/TagGroup.tsx +1 -1
- package/src/TreeView.tsx +1 -6
- package/style/__tests__/style-macro.test.js +56 -56
package/dist/ActionButton.cjs
CHANGED
|
@@ -126,236 +126,236 @@ const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, over
|
|
|
126
126
|
if (p[1] === "_9") zIndex = true;
|
|
127
127
|
rules += p[0];
|
|
128
128
|
}
|
|
129
|
-
if (props.isFocusVisible) rules += '
|
|
130
|
-
else rules += '
|
|
131
|
-
if (props.isStaticColor) rules += '
|
|
132
|
-
else rules += '
|
|
133
|
-
rules += '
|
|
134
|
-
rules += '
|
|
135
|
-
rules += '
|
|
136
|
-
if (props.staticColor === "white") rules += ' -Ovbhqd-
|
|
137
|
-
else if (props.staticColor === "black") rules += ' -Ovbhqd-
|
|
129
|
+
if (props.isFocusVisible) rules += ' _Lf91';
|
|
130
|
+
else rules += ' _Le91';
|
|
131
|
+
if (props.isStaticColor) rules += ' Oe91';
|
|
132
|
+
else rules += ' Oh91';
|
|
133
|
+
rules += ' Olc91';
|
|
134
|
+
rules += ' _Mc91';
|
|
135
|
+
rules += ' _Kd91';
|
|
136
|
+
if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr91';
|
|
137
|
+
else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s91';
|
|
138
138
|
if (props.size === "XL") {
|
|
139
|
-
rules += '
|
|
140
|
-
rules += '
|
|
141
|
-
rules += '
|
|
142
|
-
rules += '
|
|
143
|
-
rules += '
|
|
144
|
-
rules += '
|
|
145
|
-
rules += '
|
|
146
|
-
rules += '
|
|
139
|
+
rules += ' ug91';
|
|
140
|
+
rules += ' uch91';
|
|
141
|
+
rules += ' udi91';
|
|
142
|
+
rules += ' uea91';
|
|
143
|
+
rules += ' ugb91';
|
|
144
|
+
rules += ' uhd91';
|
|
145
|
+
rules += ' uje91';
|
|
146
|
+
rules += ' uic91';
|
|
147
147
|
} else if (props.size === "L") {
|
|
148
|
-
rules += '
|
|
149
|
-
rules += '
|
|
150
|
-
rules += '
|
|
151
|
-
rules += '
|
|
152
|
-
rules += '
|
|
153
|
-
rules += '
|
|
154
|
-
rules += '
|
|
155
|
-
rules += '
|
|
148
|
+
rules += ' ug91';
|
|
149
|
+
rules += ' uch91';
|
|
150
|
+
rules += ' udi91';
|
|
151
|
+
rules += ' uea91';
|
|
152
|
+
rules += ' ugb91';
|
|
153
|
+
rules += ' uhd91';
|
|
154
|
+
rules += ' uje91';
|
|
155
|
+
rules += ' uic91';
|
|
156
156
|
} else if (props.size === "S") {
|
|
157
|
-
rules += '
|
|
158
|
-
rules += '
|
|
159
|
-
rules += '
|
|
160
|
-
rules += '
|
|
161
|
-
rules += '
|
|
162
|
-
rules += '
|
|
163
|
-
rules += '
|
|
164
|
-
rules += '
|
|
157
|
+
rules += ' ug91';
|
|
158
|
+
rules += ' uch91';
|
|
159
|
+
rules += ' udi91';
|
|
160
|
+
rules += ' uea91';
|
|
161
|
+
rules += ' ugb91';
|
|
162
|
+
rules += ' uhd91';
|
|
163
|
+
rules += ' uje91';
|
|
164
|
+
rules += ' uic91';
|
|
165
165
|
} else if (props.size === "XS") {
|
|
166
|
-
rules += '
|
|
167
|
-
rules += '
|
|
168
|
-
rules += '
|
|
169
|
-
rules += '
|
|
170
|
-
rules += '
|
|
171
|
-
rules += '
|
|
172
|
-
rules += '
|
|
173
|
-
rules += '
|
|
166
|
+
rules += ' ug91';
|
|
167
|
+
rules += ' uch91';
|
|
168
|
+
rules += ' udi91';
|
|
169
|
+
rules += ' uea91';
|
|
170
|
+
rules += ' ugb91';
|
|
171
|
+
rules += ' uhd91';
|
|
172
|
+
rules += ' uje91';
|
|
173
|
+
rules += ' uic91';
|
|
174
174
|
} else {
|
|
175
|
-
rules += '
|
|
176
|
-
rules += '
|
|
177
|
-
rules += '
|
|
178
|
-
rules += '
|
|
179
|
-
rules += '
|
|
180
|
-
rules += '
|
|
181
|
-
rules += '
|
|
182
|
-
rules += '
|
|
175
|
+
rules += ' ug91';
|
|
176
|
+
rules += ' uch91';
|
|
177
|
+
rules += ' udi91';
|
|
178
|
+
rules += ' uea91';
|
|
179
|
+
rules += ' ugb91';
|
|
180
|
+
rules += ' uhd91';
|
|
181
|
+
rules += ' uje91';
|
|
182
|
+
rules += ' uic91';
|
|
183
183
|
}
|
|
184
184
|
if (props.size === "XL") {
|
|
185
|
-
rules += '
|
|
186
|
-
rules += '
|
|
185
|
+
rules += ' vg91';
|
|
186
|
+
rules += ' vsj91';
|
|
187
187
|
} else if (props.size === "L") {
|
|
188
|
-
rules += '
|
|
189
|
-
rules += '
|
|
188
|
+
rules += ' vp91';
|
|
189
|
+
rules += ' vsh91';
|
|
190
190
|
} else if (props.size === "S") {
|
|
191
|
-
rules += '
|
|
192
|
-
rules += '
|
|
191
|
+
rules += ' vb91';
|
|
192
|
+
rules += ' vse91';
|
|
193
193
|
} else if (props.size === "XS") {
|
|
194
|
-
rules += '
|
|
195
|
-
rules += '
|
|
194
|
+
rules += ' va91';
|
|
195
|
+
rules += ' vsc91';
|
|
196
196
|
} else {
|
|
197
|
-
rules += '
|
|
198
|
-
rules += '
|
|
197
|
+
rules += ' vd91';
|
|
198
|
+
rules += ' vsf91';
|
|
199
199
|
}
|
|
200
|
-
rules += '
|
|
201
|
-
rules += '
|
|
202
|
-
rules += '
|
|
200
|
+
rules += ' wc91';
|
|
201
|
+
rules += ' xc91';
|
|
202
|
+
rules += ' _xa91';
|
|
203
203
|
if (props.size === "XL") {
|
|
204
|
-
rules += '
|
|
205
|
-
rules += '
|
|
204
|
+
rules += ' _Fa91';
|
|
205
|
+
rules += ' _Ffb91';
|
|
206
206
|
} else if (props.size === "L") {
|
|
207
|
-
rules += '
|
|
208
|
-
rules += '
|
|
207
|
+
rules += ' _Fa91';
|
|
208
|
+
rules += ' _Ffb91';
|
|
209
209
|
} else if (props.size === "S") {
|
|
210
|
-
rules += '
|
|
211
|
-
rules += '
|
|
210
|
+
rules += ' _Fa91';
|
|
211
|
+
rules += ' _Ffb91';
|
|
212
212
|
} else if (props.size === "XS") {
|
|
213
|
-
rules += '
|
|
214
|
-
rules += '
|
|
213
|
+
rules += ' _Fa91';
|
|
214
|
+
rules += ' _Ffb91';
|
|
215
215
|
} else {
|
|
216
|
-
rules += '
|
|
217
|
-
rules += '
|
|
216
|
+
rules += ' _Fa91';
|
|
217
|
+
rules += ' _Ffb91';
|
|
218
218
|
}
|
|
219
219
|
if (props.isStaticColor) {
|
|
220
|
-
if (props.isDisabled) rules += '
|
|
221
|
-
else if (props.isSelected) rules += '
|
|
220
|
+
if (props.isDisabled) rules += ' pi91';
|
|
221
|
+
else if (props.isSelected) rules += ' ph91';
|
|
222
222
|
else {
|
|
223
|
-
if (props.isPressed) rules += '
|
|
224
|
-
else if (props.isFocusVisible) rules += '
|
|
225
|
-
else if (props.isHovered) rules += '
|
|
226
|
-
else rules += '
|
|
223
|
+
if (props.isPressed) rules += ' pk91';
|
|
224
|
+
else if (props.isFocusVisible) rules += ' pk91';
|
|
225
|
+
else if (props.isHovered) rules += ' pk91';
|
|
226
|
+
else rules += ' pj91';
|
|
227
227
|
}
|
|
228
|
-
} else if (props.isDisabled) rules += '
|
|
228
|
+
} else if (props.isDisabled) rules += ' pp91';
|
|
229
229
|
else if (props.isSelected) {
|
|
230
|
-
if (props.isEmphasized) rules += '
|
|
231
|
-
else rules += '
|
|
230
|
+
if (props.isEmphasized) rules += ' px91';
|
|
231
|
+
else rules += ' pr91';
|
|
232
232
|
} else {
|
|
233
|
-
if (props.isPressed) rules += '
|
|
234
|
-
else if (props.isFocusVisible) rules += '
|
|
235
|
-
else if (props.isHovered) rules += '
|
|
236
|
-
else rules += '
|
|
233
|
+
if (props.isPressed) rules += ' po91';
|
|
234
|
+
else if (props.isFocusVisible) rules += ' po91';
|
|
235
|
+
else if (props.isHovered) rules += ' po91';
|
|
236
|
+
else rules += ' pt91';
|
|
237
237
|
}
|
|
238
|
-
if (props.isDisabled) rules += '
|
|
239
|
-
else if (props.isSelected) rules += '
|
|
240
|
-
else rules += '
|
|
241
|
-
rules += '
|
|
242
|
-
rules += '
|
|
243
|
-
rules += '
|
|
244
|
-
rules += '
|
|
245
|
-
rules += '
|
|
246
|
-
rules += '
|
|
247
|
-
if (!minWidth) rules += '
|
|
248
|
-
if (props.size === "XL") rules += ' -SFnbic-
|
|
249
|
-
else if (props.size === "L") rules += ' -SFnbic-
|
|
250
|
-
else if (props.size === "S") rules += ' -SFnbic-
|
|
251
|
-
else if (props.size === "XS") rules += ' -SFnbic-
|
|
252
|
-
else rules += ' -SFnbic-
|
|
253
|
-
rules += ' -Bu7z1c-
|
|
238
|
+
if (props.isDisabled) rules += ' plc91';
|
|
239
|
+
else if (props.isSelected) rules += ' ple91';
|
|
240
|
+
else rules += ' plb91';
|
|
241
|
+
rules += ' sd91';
|
|
242
|
+
rules += ' eb91';
|
|
243
|
+
rules += ' _oa91';
|
|
244
|
+
rules += ' SMBFGYc91';
|
|
245
|
+
rules += ' Rv91';
|
|
246
|
+
rules += ' RgLWx3bd91';
|
|
247
|
+
if (!minWidth) rules += ' N7yFGYc91';
|
|
248
|
+
if (props.size === "XL") rules += ' -SFnbic-_JaP8ec91';
|
|
249
|
+
else if (props.size === "L") rules += ' -SFnbic-_J0K2hn91';
|
|
250
|
+
else if (props.size === "S") rules += ' -SFnbic-_JJOW22b91';
|
|
251
|
+
else if (props.size === "XS") rules += ' -SFnbic-_JICefdd91';
|
|
252
|
+
else rules += ' -SFnbic-_Jb91';
|
|
253
|
+
rules += ' -Bu7z1c-ob91';
|
|
254
254
|
if (props.density === "compact") {
|
|
255
|
-
rules += '
|
|
256
|
-
rules += '
|
|
257
|
-
} else rules += '
|
|
255
|
+
rules += ' od91';
|
|
256
|
+
rules += ' obj91';
|
|
257
|
+
} else rules += ' oj91';
|
|
258
258
|
if (props.density === "compact") {
|
|
259
|
-
if (props.orientation === "vertical") rules += '
|
|
260
|
-
else if (props.orientation === "horizontal") rules += '
|
|
261
|
-
else rules += '
|
|
262
|
-
} else rules += '
|
|
259
|
+
if (props.orientation === "vertical") rules += ' nbj91';
|
|
260
|
+
else if (props.orientation === "horizontal") rules += ' nkj91';
|
|
261
|
+
else rules += ' nd91';
|
|
262
|
+
} else rules += ' nj91';
|
|
263
263
|
if (props.density === "compact") {
|
|
264
|
-
if (props.orientation === "vertical") rules += '
|
|
265
|
-
else if (props.orientation === "horizontal") rules += '
|
|
266
|
-
else rules += '
|
|
267
|
-
} else rules += '
|
|
264
|
+
if (props.orientation === "vertical") rules += ' kkj91';
|
|
265
|
+
else if (props.orientation === "horizontal") rules += ' kbj91';
|
|
266
|
+
else rules += ' kd91';
|
|
267
|
+
} else rules += ' kj91';
|
|
268
268
|
if (props.density === "compact") {
|
|
269
|
-
rules += '
|
|
270
|
-
rules += '
|
|
271
|
-
} else rules += '
|
|
272
|
-
rules += '
|
|
273
|
-
rules += '
|
|
274
|
-
rules += ' -Qg41Lb-
|
|
275
|
-
rules += ' -Qg41Lb-
|
|
276
|
-
rules += '
|
|
277
|
-
rules += '
|
|
269
|
+
rules += ' jd91';
|
|
270
|
+
rules += ' jkj91';
|
|
271
|
+
} else rules += ' jj91';
|
|
272
|
+
rules += ' qc91';
|
|
273
|
+
rules += ' qsd91';
|
|
274
|
+
rules += ' -Qg41Lb-IAxCW0c91';
|
|
275
|
+
rules += ' -Qg41Lb-gLWx3bIy91';
|
|
276
|
+
rules += ' FRuFGYc91';
|
|
277
|
+
rules += ' _Ca91';
|
|
278
278
|
if (props.isInGroup) {
|
|
279
|
-
if (!flexShrink) rules += '
|
|
280
|
-
} else if (!flexShrink) rules += '
|
|
279
|
+
if (!flexShrink) rules += ' _va91';
|
|
280
|
+
} else if (!flexShrink) rules += ' _vb91';
|
|
281
281
|
if (props.isJustified) {
|
|
282
|
-
if (!flexGrow) rules += '
|
|
282
|
+
if (!flexGrow) rules += ' _ub91';
|
|
283
283
|
}
|
|
284
284
|
if (props.isJustified) {
|
|
285
|
-
if (!flexBasis) rules += '
|
|
285
|
+
if (!flexBasis) rules += ' _sb91';
|
|
286
286
|
}
|
|
287
|
-
rules += '
|
|
288
|
-
rules += '
|
|
289
|
-
rules += '
|
|
290
|
-
rules += '
|
|
291
|
-
rules += '
|
|
292
|
-
rules += '
|
|
293
|
-
rules += ' -_8sjo0b-
|
|
294
|
-
rules += '
|
|
287
|
+
rules += ' _4c91';
|
|
288
|
+
rules += ' Yd91';
|
|
289
|
+
rules += ' Xb91';
|
|
290
|
+
rules += ' _2b91';
|
|
291
|
+
rules += ' _yb91';
|
|
292
|
+
rules += ' gqMFGYc91';
|
|
293
|
+
rules += ' -_8sjo0b-t5ZbAob91';
|
|
294
|
+
rules += ' _je91';
|
|
295
295
|
if (props.isFocusVisible) {
|
|
296
|
-
if (!zIndex) rules += '
|
|
296
|
+
if (!zIndex) rules += ' _9d91';
|
|
297
297
|
}
|
|
298
|
-
rules += '
|
|
299
|
-
rules += ' -B5H9Ae-
|
|
300
|
-
rules += ' -B5H9Ae-
|
|
301
|
-
rules += ' -SqFa4c-
|
|
302
|
-
rules += ' -dcAs1c-
|
|
303
|
-
rules += ' -dcAs1c-
|
|
304
|
-
rules += ' -dcAs1c-
|
|
305
|
-
if (props.size === "XL") rules += ' -F_-
|
|
306
|
-
else if (props.size === "L") rules += ' -F_-
|
|
307
|
-
else if (props.size === "S") rules += ' -F_-
|
|
308
|
-
else if (props.size === "XS") rules += ' -F_-
|
|
309
|
-
else rules += ' -F_-
|
|
298
|
+
rules += ' __ca91';
|
|
299
|
+
rules += ' -B5H9Ae-WXN7eQb91';
|
|
300
|
+
rules += ' -B5H9Ae-wAP22cWr91';
|
|
301
|
+
rules += ' -SqFa4c-ZuUmpre91';
|
|
302
|
+
rules += ' -dcAs1c-ZaYffXd91';
|
|
303
|
+
rules += ' -dcAs1c-y5UFLdZt9HF591';
|
|
304
|
+
rules += ' -dcAs1c-wAP22cZa91';
|
|
305
|
+
if (props.size === "XL") rules += ' -F_-Fz91';
|
|
306
|
+
else if (props.size === "L") rules += ' -F_-Fv91';
|
|
307
|
+
else if (props.size === "S") rules += ' -F_-Fp91';
|
|
308
|
+
else if (props.size === "XS") rules += ' -F_-Fn91';
|
|
309
|
+
else rules += ' -F_-Fx91';
|
|
310
310
|
if (props.isStaticColor) {
|
|
311
311
|
if (props.isSelected) {
|
|
312
312
|
if (props.isDisabled) {
|
|
313
|
-
if (props.isQuiet) rules += ' -g_-
|
|
314
|
-
else rules += ' -g_-
|
|
313
|
+
if (props.isQuiet) rules += ' -g_-g991';
|
|
314
|
+
else rules += ' -g_-gf91';
|
|
315
315
|
} else {
|
|
316
|
-
if (props.isPressed) rules += ' -g_-
|
|
317
|
-
else if (props.isFocusVisible) rules += ' -g_-
|
|
318
|
-
else if (props.isHovered) rules += ' -g_-
|
|
319
|
-
else rules += ' -g_-
|
|
316
|
+
if (props.isPressed) rules += ' -g_-gj91';
|
|
317
|
+
else if (props.isFocusVisible) rules += ' -g_-gj91';
|
|
318
|
+
else if (props.isHovered) rules += ' -g_-gj91';
|
|
319
|
+
else rules += ' -g_-gi91';
|
|
320
320
|
}
|
|
321
|
-
} else if (props.isPressed) rules += ' -g_-
|
|
322
|
-
else if (props.isFocusVisible) rules += ' -g_-
|
|
323
|
-
else if (props.isHovered) rules += ' -g_-
|
|
324
|
-
else if (props.isQuiet) rules += ' -g_-
|
|
325
|
-
else rules += ' -g_-
|
|
321
|
+
} else if (props.isPressed) rules += ' -g_-gg91';
|
|
322
|
+
else if (props.isFocusVisible) rules += ' -g_-gg91';
|
|
323
|
+
else if (props.isHovered) rules += ' -g_-gg91';
|
|
324
|
+
else if (props.isQuiet) rules += ' -g_-g991';
|
|
325
|
+
else rules += ' -g_-gf91';
|
|
326
326
|
} else if (props.isSelected) {
|
|
327
327
|
if (props.isDisabled) {
|
|
328
|
-
if (props.isQuiet) rules += ' -g_-
|
|
329
|
-
else rules += ' -g_-
|
|
328
|
+
if (props.isQuiet) rules += ' -g_-g991';
|
|
329
|
+
else rules += ' -g_-gH91';
|
|
330
330
|
} else if (props.isEmphasized) {
|
|
331
|
-
if (props.
|
|
332
|
-
else if (props.isPressed) rules += ' -g_-
|
|
333
|
-
else if (props.isHovered) rules += ' -g_-
|
|
334
|
-
else rules += ' -g_-
|
|
331
|
+
if (props.isFocusVisible) rules += ' -g_-gUgARdd91';
|
|
332
|
+
else if (props.isPressed) rules += ' -g_-gUgARdd91';
|
|
333
|
+
else if (props.isHovered) rules += ' -g_-gUgARdd91';
|
|
334
|
+
else rules += ' -g_-g5qAiPc91';
|
|
335
335
|
} else {
|
|
336
|
-
if (props.isPressed) rules += ' -g_-
|
|
337
|
-
else if (props.isFocusVisible) rules += ' -g_-
|
|
338
|
-
else if (props.isHovered) rules += ' -g_-
|
|
339
|
-
else rules += ' -g_-
|
|
336
|
+
if (props.isPressed) rules += ' -g_-gu91';
|
|
337
|
+
else if (props.isFocusVisible) rules += ' -g_-gu91';
|
|
338
|
+
else if (props.isHovered) rules += ' -g_-gu91';
|
|
339
|
+
else rules += ' -g_-g091';
|
|
340
340
|
}
|
|
341
341
|
} else {
|
|
342
|
-
if (props.isPressed) rules += ' -g_-
|
|
343
|
-
else if (props.isFocusVisible) rules += ' -g_-
|
|
344
|
-
else if (props.isHovered) rules += ' -g_-
|
|
345
|
-
else if (props.isQuiet) rules += ' -g_-
|
|
346
|
-
else rules += ' -g_-
|
|
342
|
+
if (props.isPressed) rules += ' -g_-gF91';
|
|
343
|
+
else if (props.isFocusVisible) rules += ' -g_-gF91';
|
|
344
|
+
else if (props.isHovered) rules += ' -g_-gF91';
|
|
345
|
+
else if (props.isQuiet) rules += ' -g_-g991';
|
|
346
|
+
else rules += ' -g_-gH91';
|
|
347
347
|
}
|
|
348
348
|
if (props.isSelected) {
|
|
349
|
-
if (props.isDisabled) rules += ' -g_-
|
|
350
|
-
else rules += ' -g_-
|
|
351
|
-
} else rules += ' -g_-
|
|
352
|
-
rules += ' -S_-
|
|
353
|
-
rules += ' -S_-
|
|
354
|
-
if (props.size === "XL") rules += ' -N_-
|
|
355
|
-
else if (props.size === "L") rules += ' -N_-
|
|
356
|
-
else if (props.size === "S") rules += ' -N_-
|
|
357
|
-
else if (props.size === "XS") rules += ' -N_-
|
|
358
|
-
else rules += ' -N_-
|
|
349
|
+
if (props.isDisabled) rules += ' -g_-lgb91';
|
|
350
|
+
else rules += ' -g_-lge91';
|
|
351
|
+
} else rules += ' -g_-lgb91';
|
|
352
|
+
rules += ' -S_-Sv91';
|
|
353
|
+
rules += ' -S_-gLWx3bSd91';
|
|
354
|
+
if (props.size === "XL") rules += ' -N_-Nl91';
|
|
355
|
+
else if (props.size === "L") rules += ' -N_-Nj91';
|
|
356
|
+
else if (props.size === "S") rules += ' -N_-Nf91';
|
|
357
|
+
else if (props.size === "XS") rules += ' -N_-Ne91';
|
|
358
|
+
else rules += ' -N_-Nk91';
|
|
359
359
|
return rules;
|
|
360
360
|
};
|
|
361
361
|
// Matching icon sizes. TBD.
|
|
@@ -402,7 +402,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
|
|
|
402
402
|
[
|
|
403
403
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
404
404
|
{
|
|
405
|
-
styles: "
|
|
405
|
+
styles: " _Jb91 _Nc91 Pc91 _Yb91 _7c91"
|
|
406
406
|
}
|
|
407
407
|
],
|
|
408
408
|
[
|
|
@@ -410,16 +410,16 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
|
|
|
410
410
|
{
|
|
411
411
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
412
412
|
slot: 'icon',
|
|
413
|
-
styles: "
|
|
413
|
+
styles: " _Ja91"
|
|
414
414
|
}),
|
|
415
|
-
styles: "
|
|
415
|
+
styles: " ZuUmpre91 FuUmpre91 I67logd91 _va91"
|
|
416
416
|
}
|
|
417
417
|
],
|
|
418
418
|
[
|
|
419
419
|
(0, $38071d9ce246d4cf$exports.AvatarContext),
|
|
420
420
|
{
|
|
421
421
|
size: $6e265ff388155b91$var$avatarSize[size],
|
|
422
|
-
styles: "
|
|
422
|
+
styles: " I67logd91 _va91 _Ja91"
|
|
423
423
|
}
|
|
424
424
|
],
|
|
425
425
|
[
|
|
@@ -428,7 +428,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
|
|
|
428
428
|
staticColor: staticColor,
|
|
429
429
|
size: props.size === 'XS' ? undefined : props.size,
|
|
430
430
|
isDisabled: props.isDisabled,
|
|
431
|
-
styles: "
|
|
431
|
+
styles: " _Pa91 WtedXZc91 _A1IiWH91 JlZStSb91 IlZStSb91"
|
|
432
432
|
}
|
|
433
433
|
]
|
|
434
434
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACjB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAAmC;iBAAE;gBAC1D;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,aAAa;wBACb,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white' | 'auto',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' | 'compact',\n orientation?: 'horizontal' | 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n justifyContent: 'center',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n fontWeight: 'medium',\n userSelect: 'none',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocused: lightDark('accent-1000', 'accent-600')\n },\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: baseColor('neutral'),\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':first-child': controlStyle.borderRadius\n }\n }\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': controlStyle.borderRadius\n },\n vertical: {\n ':first-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': controlStyle.borderRadius\n },\n vertical: {\n ':last-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':last-child': controlStyle.borderRadius\n }\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n [textOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: 'calc(self(paddingStart) + var(--iconWidth))',\n [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n staticColor: staticColor,\n size: props.size === 'XS' ? undefined : props.size,\n isDisabled: props.isDisabled,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACjB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAAmC;iBAAE;gBAC1D;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,aAAa;wBACb,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white' | 'auto',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' | 'compact',\n orientation?: 'horizontal' | 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n justifyContent: 'center',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n fontWeight: 'medium',\n userSelect: 'none',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: baseColor('neutral'),\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':first-child': controlStyle.borderRadius\n }\n }\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': controlStyle.borderRadius\n },\n vertical: {\n ':first-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': controlStyle.borderRadius\n },\n vertical: {\n ':last-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':last-child': controlStyle.borderRadius\n }\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n [textOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: 'calc(self(paddingStart) + var(--iconWidth))',\n [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n staticColor: staticColor,\n size: props.size === 'XS' ? undefined : props.size,\n isDisabled: props.isDisabled,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}
|