@react-spectrum/s2 3.0.0-nightly-63d4359d6-250427 → 3.0.0-nightly-1dd65ffc5-250429
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 +4 -5
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css +2 -4
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs +4 -5
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionBar.cjs +72 -63
- package/dist/ActionBar.cjs.map +1 -1
- package/dist/ActionBar.css +70 -63
- package/dist/ActionBar.css.map +1 -1
- package/dist/ActionBar.mjs +72 -63
- package/dist/ActionBar.mjs.map +1 -1
- package/dist/ActionButton.cjs +161 -160
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +174 -168
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +161 -160
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +17 -18
- package/dist/ActionButtonGroup.cjs.map +1 -1
- package/dist/ActionButtonGroup.css +9 -11
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/ActionButtonGroup.mjs +17 -18
- package/dist/ActionButtonGroup.mjs.map +1 -1
- package/dist/AlertDialog.cjs +4 -4
- package/dist/AlertDialog.css +3 -5
- package/dist/AlertDialog.css.map +1 -1
- package/dist/AlertDialog.mjs +4 -4
- package/dist/Avatar.cjs +21 -21
- package/dist/Avatar.css +14 -16
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +21 -21
- package/dist/AvatarGroup.cjs +131 -110
- package/dist/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css +43 -49
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs +131 -110
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +150 -149
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +140 -134
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +150 -149
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +169 -154
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +119 -105
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +169 -154
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +321 -275
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +245 -215
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +321 -275
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +27 -25
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css +15 -17
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +27 -25
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/Card.cjs +316 -299
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +242 -215
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +316 -299
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +29 -30
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css +19 -19
- package/dist/CardView.mjs +29 -30
- package/dist/CardView.mjs.map +1 -1
- package/dist/CenterBaseline.cjs +2 -2
- package/dist/CenterBaseline.css +3 -5
- package/dist/CenterBaseline.css.map +1 -1
- package/dist/CenterBaseline.mjs +2 -2
- package/dist/Checkbox.cjs +114 -112
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +99 -93
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +114 -112
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +54 -54
- package/dist/CheckboxGroup.css +42 -42
- package/dist/CheckboxGroup.mjs +54 -54
- package/dist/ClearButton.cjs +19 -19
- package/dist/ClearButton.css +19 -21
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +19 -19
- package/dist/CloseButton.cjs +64 -62
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +48 -48
- package/dist/CloseButton.mjs +64 -62
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +28 -28
- package/dist/ColorArea.css +17 -17
- package/dist/ColorArea.mjs +28 -28
- package/dist/ColorField.cjs +41 -41
- package/dist/ColorField.css +33 -33
- package/dist/ColorField.mjs +41 -41
- package/dist/ColorHandle.cjs +29 -29
- package/dist/ColorHandle.css +45 -45
- package/dist/ColorHandle.mjs +29 -29
- package/dist/ColorSlider.cjs +68 -64
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +64 -58
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +68 -64
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +44 -38
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +29 -31
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +44 -38
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +31 -32
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +48 -48
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +31 -32
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ColorWheel.cjs +28 -28
- package/dist/ColorWheel.css +18 -18
- package/dist/ColorWheel.mjs +28 -28
- package/dist/ComboBox.cjs +108 -108
- package/dist/ComboBox.css +101 -101
- package/dist/ComboBox.mjs +108 -108
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +58 -44
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +38 -38
- package/dist/CustomDialog.css +26 -26
- package/dist/CustomDialog.mjs +38 -38
- package/dist/Dialog.cjs +18 -18
- package/dist/Dialog.css +86 -72
- package/dist/Dialog.css.map +1 -1
- package/dist/Dialog.mjs +18 -18
- package/dist/Disclosure.cjs +139 -133
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +144 -120
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +139 -133
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +47 -47
- package/dist/Divider.css +26 -26
- package/dist/Divider.mjs +47 -47
- package/dist/DropZone.cjs +68 -64
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +66 -60
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +68 -64
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +192 -186
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +167 -159
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +192 -186
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +11 -12
- package/dist/Form.cjs.map +1 -1
- package/dist/Form.css +9 -11
- package/dist/Form.css.map +1 -1
- package/dist/Form.mjs +11 -12
- package/dist/Form.mjs.map +1 -1
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +94 -80
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +185 -160
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +93 -91
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +185 -160
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +14 -14
- package/dist/Image.css +14 -16
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +14 -14
- package/dist/InlineAlert.cjs +130 -122
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +109 -95
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +130 -122
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +57 -47
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css +52 -44
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs +57 -47
- package/dist/Link.mjs.map +1 -1
- package/dist/Menu.cjs +353 -325
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +189 -189
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +353 -325
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +116 -114
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +106 -104
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +116 -114
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +62 -59
- package/dist/Modal.cjs.map +1 -1
- package/dist/Modal.css +52 -51
- package/dist/Modal.css.map +1 -1
- package/dist/Modal.mjs +62 -59
- package/dist/Modal.mjs.map +1 -1
- package/dist/NotificationBadge.cjs +66 -62
- package/dist/NotificationBadge.cjs.map +1 -1
- package/dist/NotificationBadge.css +78 -72
- package/dist/NotificationBadge.css.map +1 -1
- package/dist/NotificationBadge.mjs +66 -62
- package/dist/NotificationBadge.mjs.map +1 -1
- package/dist/NumberField.cjs +133 -133
- package/dist/NumberField.css +120 -120
- package/dist/NumberField.mjs +133 -133
- package/dist/Picker.cjs +209 -207
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +179 -173
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +209 -207
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +124 -93
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +67 -83
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +124 -93
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +132 -130
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +119 -117
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +132 -130
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +32 -32
- package/dist/ProgressCircle.css +20 -20
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +32 -32
- package/dist/Provider.cjs +11 -11
- package/dist/Provider.css +9 -11
- package/dist/Provider.css.map +1 -1
- package/dist/Provider.mjs +11 -11
- package/dist/Radio.cjs +101 -99
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +101 -95
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +101 -99
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +52 -52
- package/dist/RadioGroup.css +42 -42
- package/dist/RadioGroup.mjs +52 -52
- package/dist/SearchField.cjs +52 -52
- package/dist/SearchField.css +54 -54
- package/dist/SearchField.mjs +52 -52
- package/dist/SegmentedControl.cjs +123 -119
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +110 -104
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +123 -119
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +251 -248
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +166 -157
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +251 -248
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +74 -70
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +70 -64
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +74 -70
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +110 -108
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +86 -80
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +110 -108
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +334 -329
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +193 -193
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +334 -329
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +153 -149
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +102 -96
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +153 -149
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +131 -129
- package/dist/TabsPicker.cjs.map +1 -1
- package/dist/TabsPicker.css +132 -126
- package/dist/TabsPicker.css.map +1 -1
- package/dist/TabsPicker.mjs +131 -129
- package/dist/TabsPicker.mjs.map +1 -1
- package/dist/TagGroup.cjs +197 -193
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +164 -158
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +197 -193
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +67 -65
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +71 -65
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +67 -65
- package/dist/TextField.mjs.map +1 -1
- package/dist/Toast.cjs +138 -136
- package/dist/Toast.cjs.map +1 -1
- package/dist/Toast.css +117 -111
- package/dist/Toast.css.map +1 -1
- package/dist/Toast.mjs +138 -136
- package/dist/Toast.mjs.map +1 -1
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -14
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +99 -72
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +87 -87
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +99 -72
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +169 -157
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +155 -153
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +169 -157
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +3 -3
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +8 -10
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +3 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +22 -22
- package/src/Card.tsx +3 -3
- package/src/Disclosure.tsx +3 -3
- package/src/TableView.tsx +1 -4
- package/src/style-utils.ts +0 -2
- package/style/__tests__/style-macro.test.js +323 -27
- package/style/dist/properties.cjs +4 -0
- package/style/dist/properties.cjs.map +1 -0
- package/style/dist/properties.mjs +6 -0
- package/style/dist/properties.mjs.map +1 -0
- package/style/dist/spectrum-theme.cjs +123 -124
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +124 -125
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/style-macro.cjs +244 -263
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +240 -259
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/dist/types.d.ts +84 -80
- package/style/dist/types.d.ts.map +1 -1
- package/style/properties.json +2422 -0
- package/style/spectrum-theme.ts +101 -110
- package/style/style-macro.ts +319 -220
- package/style/types.ts +8 -4
package/dist/ActionButton.cjs
CHANGED
|
@@ -50,194 +50,195 @@ $parcel$export(module.exports, "ActionButton", () => $6e265ff388155b91$export$cf
|
|
|
50
50
|
const $6e265ff388155b91$var$iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
|
|
51
51
|
const $6e265ff388155b91$var$textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
|
|
52
52
|
const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, overrides) {
|
|
53
|
-
let rules = "
|
|
54
|
-
let
|
|
55
|
-
|
|
56
|
-
let
|
|
57
|
-
let
|
|
58
|
-
let
|
|
59
|
-
let
|
|
60
|
-
let $__R = false;
|
|
53
|
+
let rules = " ";
|
|
54
|
+
let flexShrink = false;
|
|
55
|
+
let flexGrow = false;
|
|
56
|
+
let flexBasis = false;
|
|
57
|
+
let minWidth = false;
|
|
58
|
+
let zIndex = false;
|
|
59
|
+
let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
|
|
61
60
|
for (let p of matches){
|
|
62
|
-
if (
|
|
63
|
-
if (
|
|
64
|
-
if (
|
|
65
|
-
if (
|
|
66
|
-
if (
|
|
61
|
+
if (p[1] === "_r") flexShrink = true;
|
|
62
|
+
if (p[1] === "_H") flexGrow = true;
|
|
63
|
+
if (p[1] === "M") flexBasis = true;
|
|
64
|
+
if (p[1] === "u") minWidth = true;
|
|
65
|
+
if (p[1] === "__B") zIndex = true;
|
|
66
|
+
rules += p[0];
|
|
67
67
|
}
|
|
68
|
-
if (props.isFocusVisible) rules += '
|
|
69
|
-
else rules += '
|
|
70
|
-
rules += '
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
rules += '
|
|
74
|
-
rules += '
|
|
75
|
-
if (props.staticColor === "white") rules += ' -
|
|
76
|
-
else if (props.staticColor === "black") rules += ' -
|
|
77
|
-
rules += '
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
if (
|
|
83
|
-
if (
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
if (props.isJustified) rules += ' __a-3t1y';
|
|
68
|
+
if (props.isFocusVisible) rules += ' tb';
|
|
69
|
+
else rules += ' ta';
|
|
70
|
+
if (props.isStaticColor) rules += ' Bd';
|
|
71
|
+
else rules += ' Bb';
|
|
72
|
+
rules += ' Bba';
|
|
73
|
+
rules += ' _ga';
|
|
74
|
+
rules += ' _ya';
|
|
75
|
+
if (props.staticColor === "white") rules += ' -Ovbhqd-cr';
|
|
76
|
+
else if (props.staticColor === "black") rules += ' -Ovbhqd-cs';
|
|
77
|
+
rules += ' ma';
|
|
78
|
+
rules += ' Fa';
|
|
79
|
+
rules += ' _pa';
|
|
80
|
+
rules += ' kb';
|
|
81
|
+
rules += ' kac';
|
|
82
|
+
if (props.isInGroup) {
|
|
83
|
+
if (!flexShrink) rules += ' _ra';
|
|
84
|
+
} else if (!flexShrink) rules += ' _rb';
|
|
85
|
+
if (props.isJustified) {
|
|
86
|
+
if (!flexGrow) rules += ' _Ha';
|
|
88
87
|
}
|
|
89
|
-
if (
|
|
90
|
-
if (
|
|
88
|
+
if (props.isJustified) {
|
|
89
|
+
if (!flexBasis) rules += ' Ma';
|
|
91
90
|
}
|
|
92
|
-
rules += '
|
|
93
|
-
rules += '
|
|
94
|
-
rules += '
|
|
95
|
-
rules += '
|
|
96
|
-
rules += '
|
|
97
|
-
rules += '
|
|
98
|
-
rules += '
|
|
99
|
-
rules += '
|
|
91
|
+
rules += ' bh';
|
|
92
|
+
rules += ' bdf';
|
|
93
|
+
rules += ' beg';
|
|
94
|
+
rules += ' bfa';
|
|
95
|
+
rules += ' bgb';
|
|
96
|
+
rules += ' bhd';
|
|
97
|
+
rules += ' bje';
|
|
98
|
+
rules += ' bic';
|
|
100
99
|
if (props.size === "XL") {
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
100
|
+
rules += ' ah';
|
|
101
|
+
rules += ' aac';
|
|
103
102
|
} else if (props.size === "L") {
|
|
104
|
-
rules += '
|
|
105
|
-
rules += '
|
|
103
|
+
rules += ' ae';
|
|
104
|
+
rules += ' aad';
|
|
106
105
|
} else if (props.size === "S") {
|
|
107
|
-
rules += '
|
|
108
|
-
rules += '
|
|
106
|
+
rules += ' af';
|
|
107
|
+
rules += ' aag';
|
|
109
108
|
} else if (props.size === "XS") {
|
|
110
|
-
rules += '
|
|
111
|
-
rules += '
|
|
109
|
+
rules += ' ai';
|
|
110
|
+
rules += ' aaj';
|
|
112
111
|
} else {
|
|
113
|
-
rules += '
|
|
114
|
-
rules += '
|
|
112
|
+
rules += ' aa';
|
|
113
|
+
rules += ' aab';
|
|
115
114
|
}
|
|
116
|
-
rules += '
|
|
117
|
-
rules += '
|
|
118
|
-
rules += '
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
else rules += ' aa_____K';
|
|
115
|
+
rules += ' Dd';
|
|
116
|
+
rules += ' Ed';
|
|
117
|
+
rules += ' Ca';
|
|
118
|
+
rules += ' gb';
|
|
119
|
+
rules += ' gca';
|
|
122
120
|
if (props.isStaticColor) {
|
|
123
|
-
if (props.isDisabled) rules += '
|
|
124
|
-
else if (props.isSelected) rules += '
|
|
121
|
+
if (props.isDisabled) rules += ' ds';
|
|
122
|
+
else if (props.isSelected) rules += ' dr';
|
|
125
123
|
else {
|
|
126
|
-
if (props.isPressed) rules += '
|
|
127
|
-
else if (props.isFocusVisible) rules += '
|
|
128
|
-
else if (props.isHovered) rules += '
|
|
129
|
-
else rules += '
|
|
124
|
+
if (props.isPressed) rules += ' dh';
|
|
125
|
+
else if (props.isFocusVisible) rules += ' dh';
|
|
126
|
+
else if (props.isHovered) rules += ' dh';
|
|
127
|
+
else rules += ' dn';
|
|
130
128
|
}
|
|
131
|
-
} else if (props.isDisabled) rules += '
|
|
129
|
+
} else if (props.isDisabled) rules += ' dc';
|
|
132
130
|
else if (props.isSelected) {
|
|
133
|
-
if (props.isEmphasized) rules += '
|
|
134
|
-
else rules += '
|
|
131
|
+
if (props.isEmphasized) rules += ' dd';
|
|
132
|
+
else rules += ' dl';
|
|
135
133
|
} else {
|
|
136
|
-
if (props.isPressed) rules += '
|
|
137
|
-
else if (props.isFocusVisible) rules += '
|
|
138
|
-
else if (props.isHovered) rules += '
|
|
139
|
-
else rules += '
|
|
134
|
+
if (props.isPressed) rules += ' db';
|
|
135
|
+
else if (props.isFocusVisible) rules += ' db';
|
|
136
|
+
else if (props.isHovered) rules += ' db';
|
|
137
|
+
else rules += ' da';
|
|
140
138
|
}
|
|
141
|
-
rules += '
|
|
142
|
-
rules += '
|
|
143
|
-
|
|
144
|
-
rules += '
|
|
145
|
-
rules += '
|
|
146
|
-
rules += '
|
|
147
|
-
rules += '
|
|
148
|
-
rules += '
|
|
149
|
-
rules += '
|
|
150
|
-
rules += '
|
|
151
|
-
rules += '
|
|
152
|
-
rules += '
|
|
153
|
-
rules += '
|
|
154
|
-
rules += '
|
|
155
|
-
rules += '
|
|
156
|
-
rules += '
|
|
139
|
+
if (props.isDisabled) rules += ' dbe';
|
|
140
|
+
else if (props.isSelected) rules += ' dbm';
|
|
141
|
+
else rules += ' dbf';
|
|
142
|
+
rules += ' _Qa';
|
|
143
|
+
rules += ' emLFGYc';
|
|
144
|
+
if (!minWidth) rules += ' uSTFGYc';
|
|
145
|
+
rules += ' _ia';
|
|
146
|
+
rules += ' _ka';
|
|
147
|
+
rules += ' _ea';
|
|
148
|
+
rules += ' _0a';
|
|
149
|
+
rules += ' ciKFGYc';
|
|
150
|
+
rules += ' -_8sjo0b-Oa';
|
|
151
|
+
rules += ' Rb';
|
|
152
|
+
rules += ' ob';
|
|
153
|
+
rules += ' oy5UFLda';
|
|
154
|
+
rules += ' nb';
|
|
155
|
+
rules += ' ny5UFLda';
|
|
156
|
+
rules += ' ra';
|
|
157
|
+
rules += ' va';
|
|
157
158
|
if (props.density === "compact") {
|
|
158
|
-
rules += '
|
|
159
|
-
rules += '
|
|
160
|
-
} else rules += '
|
|
159
|
+
rules += ' zf';
|
|
160
|
+
rules += ' zne';
|
|
161
|
+
} else rules += ' ze';
|
|
161
162
|
if (props.density === "compact") {
|
|
162
|
-
if (props.orientation === "vertical") rules += '
|
|
163
|
-
else if (props.orientation === "horizontal") rules += '
|
|
164
|
-
else rules += '
|
|
165
|
-
} else rules += '
|
|
163
|
+
if (props.orientation === "vertical") rules += ' xnd';
|
|
164
|
+
else if (props.orientation === "horizontal") rules += ' xld';
|
|
165
|
+
else rules += ' xf';
|
|
166
|
+
} else rules += ' xd';
|
|
166
167
|
if (props.density === "compact") {
|
|
167
|
-
if (props.orientation === "vertical") rules += '
|
|
168
|
-
else if (props.orientation === "horizontal") rules += '
|
|
169
|
-
else rules += '
|
|
170
|
-
} else rules += '
|
|
168
|
+
if (props.orientation === "vertical") rules += ' wld';
|
|
169
|
+
else if (props.orientation === "horizontal") rules += ' wnd';
|
|
170
|
+
else rules += ' wf';
|
|
171
|
+
} else rules += ' wd';
|
|
171
172
|
if (props.density === "compact") {
|
|
172
|
-
rules += '
|
|
173
|
-
rules += '
|
|
174
|
-
} else rules += '
|
|
175
|
-
rules += ' -
|
|
176
|
-
rules += ' -
|
|
177
|
-
if (
|
|
178
|
-
if (
|
|
173
|
+
rules += ' yf';
|
|
174
|
+
rules += ' yle';
|
|
175
|
+
} else rules += ' ye';
|
|
176
|
+
rules += ' -Qg41Lb-jAxCW0c';
|
|
177
|
+
rules += ' -Qg41Lb-y5UFLdja';
|
|
178
|
+
if (props.isFocusVisible) {
|
|
179
|
+
if (!zIndex) rules += ' __Ba';
|
|
179
180
|
}
|
|
180
|
-
rules += '
|
|
181
|
-
rules += ' -
|
|
182
|
-
rules += ' -
|
|
183
|
-
rules += ' -
|
|
184
|
-
rules += ' -
|
|
185
|
-
rules += ' -
|
|
186
|
-
rules += ' -
|
|
187
|
-
rules += ' -
|
|
188
|
-
rules += ' -
|
|
189
|
-
if (props.isSelected) {
|
|
190
|
-
if (props.isDisabled) rules += ' -_375toh_b-a_____J';
|
|
191
|
-
else rules += ' -_375toh_b-a_____M';
|
|
192
|
-
} else rules += ' -_375toh_b-a_____J';
|
|
181
|
+
rules += ' _Ga';
|
|
182
|
+
rules += ' -B5H9Ae-H43Fjt';
|
|
183
|
+
rules += ' -B5H9Ae-wAP22cHa';
|
|
184
|
+
rules += ' -_6Gsjne-ob';
|
|
185
|
+
rules += ' -_6Gsjne-y5UFLdoa';
|
|
186
|
+
rules += ' -SqFa4c-fuUmpre';
|
|
187
|
+
rules += ' -dcAs1c-fGolOk';
|
|
188
|
+
rules += ' -dcAs1c-y5UFLdfmA3dWb';
|
|
189
|
+
rules += ' -dcAs1c-wAP22cfa';
|
|
193
190
|
if (props.isStaticColor) {
|
|
194
191
|
if (props.isSelected) {
|
|
195
192
|
if (props.isDisabled) {
|
|
196
|
-
if (props.isQuiet) rules += ' -
|
|
197
|
-
else rules += ' -
|
|
193
|
+
if (props.isQuiet) rules += ' -c_-cd';
|
|
194
|
+
else rules += ' -c_-cf';
|
|
198
195
|
} else {
|
|
199
|
-
if (props.isPressed) rules += ' -
|
|
200
|
-
else if (props.isFocusVisible) rules += ' -
|
|
201
|
-
else if (props.isHovered) rules += ' -
|
|
202
|
-
else rules += ' -
|
|
196
|
+
if (props.isPressed) rules += ' -c_-ck';
|
|
197
|
+
else if (props.isFocusVisible) rules += ' -c_-ck';
|
|
198
|
+
else if (props.isHovered) rules += ' -c_-ck';
|
|
199
|
+
else rules += ' -c_-cy';
|
|
203
200
|
}
|
|
204
|
-
} else if (props.isPressed) rules += ' -
|
|
205
|
-
else if (props.isFocusVisible) rules += ' -
|
|
206
|
-
else if (props.isHovered) rules += ' -
|
|
207
|
-
else if (props.isQuiet) rules += ' -
|
|
208
|
-
else rules += ' -
|
|
201
|
+
} else if (props.isPressed) rules += ' -c_-ch';
|
|
202
|
+
else if (props.isFocusVisible) rules += ' -c_-ch';
|
|
203
|
+
else if (props.isHovered) rules += ' -c_-ch';
|
|
204
|
+
else if (props.isQuiet) rules += ' -c_-cd';
|
|
205
|
+
else rules += ' -c_-cf';
|
|
209
206
|
} else if (props.isSelected) {
|
|
210
207
|
if (props.isDisabled) {
|
|
211
|
-
if (props.isQuiet) rules += ' -
|
|
212
|
-
else rules += ' -
|
|
208
|
+
if (props.isQuiet) rules += ' -c_-cd';
|
|
209
|
+
else rules += ' -c_-ca';
|
|
213
210
|
} else if (props.isEmphasized) {
|
|
214
|
-
if (props.isPressed) rules += ' -
|
|
215
|
-
else if (props.isFocusVisible) rules += ' -
|
|
216
|
-
else if (props.isHovered) rules += ' -
|
|
217
|
-
else rules += ' -
|
|
211
|
+
if (props.isPressed) rules += ' -c_-cb';
|
|
212
|
+
else if (props.isFocusVisible) rules += ' -c_-cb';
|
|
213
|
+
else if (props.isHovered) rules += ' -c_-cb';
|
|
214
|
+
else rules += ' -c_-cl';
|
|
218
215
|
} else {
|
|
219
|
-
if (props.isPressed) rules += ' -
|
|
220
|
-
else if (props.isFocusVisible) rules += ' -
|
|
221
|
-
else if (props.isHovered) rules += ' -
|
|
222
|
-
else rules += ' -
|
|
216
|
+
if (props.isPressed) rules += ' -c_-cc';
|
|
217
|
+
else if (props.isFocusVisible) rules += ' -c_-cc';
|
|
218
|
+
else if (props.isHovered) rules += ' -c_-cc';
|
|
219
|
+
else rules += ' -c_-cm';
|
|
223
220
|
}
|
|
224
221
|
} else {
|
|
225
|
-
if (props.isPressed) rules += ' -
|
|
226
|
-
else if (props.isFocusVisible) rules += ' -
|
|
227
|
-
else if (props.isHovered) rules += ' -
|
|
228
|
-
else if (props.isQuiet) rules += ' -
|
|
229
|
-
else rules += ' -
|
|
222
|
+
if (props.isPressed) rules += ' -c_-ce';
|
|
223
|
+
else if (props.isFocusVisible) rules += ' -c_-ce';
|
|
224
|
+
else if (props.isHovered) rules += ' -c_-ce';
|
|
225
|
+
else if (props.isQuiet) rules += ' -c_-cd';
|
|
226
|
+
else rules += ' -c_-ca';
|
|
230
227
|
}
|
|
231
|
-
if (props.
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
else
|
|
235
|
-
|
|
236
|
-
if (props.size === "
|
|
237
|
-
else if (props.size === "
|
|
238
|
-
else if (props.size === "
|
|
239
|
-
else
|
|
240
|
-
|
|
228
|
+
if (props.isSelected) {
|
|
229
|
+
if (props.isDisabled) rules += ' -c_-bcn';
|
|
230
|
+
else rules += ' -c_-bcg';
|
|
231
|
+
} else rules += ' -c_-bcn';
|
|
232
|
+
if (props.size === "XL") rules += ' -e_-ee';
|
|
233
|
+
else if (props.size === "L") rules += ' -e_-ed';
|
|
234
|
+
else if (props.size === "S") rules += ' -e_-eb';
|
|
235
|
+
else if (props.size === "XS") rules += ' -e_-ea';
|
|
236
|
+
else rules += ' -e_-ec';
|
|
237
|
+
if (props.size === "XL") rules += ' -u_-ub';
|
|
238
|
+
else if (props.size === "L") rules += ' -u_-ud';
|
|
239
|
+
else if (props.size === "S") rules += ' -u_-uc';
|
|
240
|
+
else if (props.size === "XS") rules += ' -u_-ua';
|
|
241
|
+
else rules += ' -u_-ue';
|
|
241
242
|
return rules;
|
|
242
243
|
};
|
|
243
244
|
// Matching icon sizes. TBD.
|
|
@@ -284,7 +285,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
|
|
|
284
285
|
[
|
|
285
286
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
286
287
|
{
|
|
287
|
-
styles: "
|
|
288
|
+
styles: " rAzEcG vAzEcG _Mb _oa _ha _Ta _za"
|
|
288
289
|
}
|
|
289
290
|
],
|
|
290
291
|
[
|
|
@@ -292,16 +293,16 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
|
|
|
292
293
|
{
|
|
293
294
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
294
295
|
slot: 'icon',
|
|
295
|
-
styles: "
|
|
296
|
+
styles: " _Ma"
|
|
296
297
|
}),
|
|
297
|
-
styles: "
|
|
298
|
+
styles: " fuUmpre euUmpre h67logd _ra"
|
|
298
299
|
}
|
|
299
300
|
],
|
|
300
301
|
[
|
|
301
302
|
(0, $38071d9ce246d4cf$exports.AvatarContext),
|
|
302
303
|
{
|
|
303
304
|
size: $6e265ff388155b91$var$avatarSize[size],
|
|
304
|
-
styles: "
|
|
305
|
+
styles: " h67logd _ra _Ma"
|
|
305
306
|
}
|
|
306
307
|
],
|
|
307
308
|
[
|
|
@@ -310,7 +311,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
|
|
|
310
311
|
staticColor: staticColor,
|
|
311
312
|
size: props.size === 'XS' ? undefined : props.size,
|
|
312
313
|
isDisabled: props.isDisabled,
|
|
313
|
-
styles: "
|
|
314
|
+
styles: " Kb HtedXZc J1IiWH jOIQSzc hOIQSzc"
|
|
314
315
|
}
|
|
315
316
|
]
|
|
316
317
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Lb,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;oBAA+D;iBAAE;gBACtF;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, 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 {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\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]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\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: 'neutral',\n isEmphasized: 'accent',\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: '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 paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\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 '--buttonPaddingX': {\n type: 'paddingStart',\n value: {\n default: 'edge-to-text',\n [iconOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '[calc(var(--buttonPaddingX) + 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({paddingY: '--labelPadding', 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: '[var(--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;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Lb,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;oBAA+D;iBAAE;gBACtF;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, 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 {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\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]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\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: 'neutral',\n isEmphasized: 'accent',\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: '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 paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\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 '--buttonPaddingX': {\n type: 'paddingStart',\n value: {\n default: 'edge-to-text',\n [iconOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '[calc(var(--buttonPaddingX) + 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({paddingY: '--labelPadding', 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: '[var(--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"}
|