@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250430
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/Toast.mjs
CHANGED
|
@@ -119,171 +119,173 @@ const $6e462db325878d1a$export$f1f8569633bbbec4 = {
|
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
const $6e462db325878d1a$var$toastRegion = function anonymous(props) {
|
|
122
|
-
let rules = "
|
|
123
|
-
if (props.isFocusVisible) rules += '
|
|
124
|
-
else rules += '
|
|
125
|
-
rules += '
|
|
126
|
-
rules += '
|
|
127
|
-
rules += '
|
|
128
|
-
rules += '
|
|
129
|
-
rules += '
|
|
130
|
-
if (props.placement === "bottom") rules += '
|
|
131
|
-
else if (props.placement === "top") rules += '
|
|
132
|
-
rules += '
|
|
133
|
-
rules += '
|
|
134
|
-
rules += '
|
|
135
|
-
rules += '
|
|
122
|
+
let rules = " ";
|
|
123
|
+
if (props.isFocusVisible) rules += ' tb';
|
|
124
|
+
else rules += ' ta';
|
|
125
|
+
rules += ' Bb';
|
|
126
|
+
rules += ' Bba';
|
|
127
|
+
rules += ' _ga';
|
|
128
|
+
rules += ' _ya';
|
|
129
|
+
rules += ' ma';
|
|
130
|
+
if (props.placement === "bottom") rules += ' _Bc';
|
|
131
|
+
else if (props.placement === "top") rules += ' _Ba';
|
|
132
|
+
rules += ' Kc';
|
|
133
|
+
rules += ' Ja';
|
|
134
|
+
rules += ' Ia';
|
|
135
|
+
rules += ' fe';
|
|
136
136
|
if (props.placement === "top") {
|
|
137
|
-
if (props.isExpanded) rules += '
|
|
138
|
-
else rules += '
|
|
137
|
+
if (props.isExpanded) rules += ' Ha';
|
|
138
|
+
else rules += ' Hc';
|
|
139
139
|
}
|
|
140
140
|
if (props.placement === "bottom") {
|
|
141
|
-
if (props.isExpanded) rules += '
|
|
142
|
-
else rules += '
|
|
141
|
+
if (props.isExpanded) rules += ' Ga';
|
|
142
|
+
else rules += ' Gc';
|
|
143
143
|
}
|
|
144
|
-
if (props.align === "end") rules += '
|
|
145
|
-
else if (props.align === "center") rules += '
|
|
146
|
-
else if (props.align === "start") rules += '
|
|
147
|
-
if (props.align === "end") rules += '
|
|
148
|
-
else if (props.align === "center") rules += '
|
|
149
|
-
else if (props.align === "start") rules += '
|
|
150
|
-
rules += '
|
|
151
|
-
rules += '
|
|
152
|
-
rules += '
|
|
153
|
-
rules += '
|
|
154
|
-
rules += '
|
|
155
|
-
rules += '
|
|
144
|
+
if (props.align === "end") rules += ' hb';
|
|
145
|
+
else if (props.align === "center") rules += ' hb';
|
|
146
|
+
else if (props.align === "start") rules += ' hj';
|
|
147
|
+
if (props.align === "end") rules += ' im';
|
|
148
|
+
else if (props.align === "center") rules += ' ie';
|
|
149
|
+
else if (props.align === "start") rules += ' ie';
|
|
150
|
+
rules += ' _qa';
|
|
151
|
+
rules += ' _wc';
|
|
152
|
+
rules += ' zd';
|
|
153
|
+
rules += ' xe';
|
|
154
|
+
rules += ' we';
|
|
155
|
+
rules += ' yd';
|
|
156
156
|
return rules;
|
|
157
157
|
};
|
|
158
158
|
const $6e462db325878d1a$var$toastList = function anonymous(props) {
|
|
159
|
-
let rules = "
|
|
160
|
-
rules += '
|
|
161
|
-
rules += '
|
|
162
|
-
rules += '
|
|
163
|
-
rules += '
|
|
164
|
-
rules += '
|
|
165
|
-
if (props.placement === "bottom") rules += '
|
|
166
|
-
else if (props.placement === "top") rules += '
|
|
167
|
-
rules += '
|
|
168
|
-
rules += '
|
|
169
|
-
rules += '
|
|
159
|
+
let rules = " ";
|
|
160
|
+
rules += ' Ka';
|
|
161
|
+
rules += ' _Ha';
|
|
162
|
+
rules += ' ma';
|
|
163
|
+
rules += ' pa';
|
|
164
|
+
rules += ' kd';
|
|
165
|
+
if (props.placement === "bottom") rules += ' _Bc';
|
|
166
|
+
else if (props.placement === "top") rules += ' _Ba';
|
|
167
|
+
rules += ' _qa';
|
|
168
|
+
rules += ' ja';
|
|
169
|
+
rules += ' la';
|
|
170
170
|
if (props.isExpanded) {
|
|
171
|
-
if (props.placement === "bottom") rules += '
|
|
172
|
-
else if (props.placement === "top") rules += '
|
|
171
|
+
if (props.placement === "bottom") rules += ' rb';
|
|
172
|
+
else if (props.placement === "top") rules += ' re';
|
|
173
173
|
}
|
|
174
174
|
if (props.isExpanded) {
|
|
175
|
-
if (props.placement === "bottom") rules += '
|
|
176
|
-
else if (props.placement === "top") rules += '
|
|
175
|
+
if (props.placement === "bottom") rules += ' vg';
|
|
176
|
+
else if (props.placement === "top") rules += ' vb';
|
|
177
177
|
}
|
|
178
|
-
if (props.isExpanded) rules += '
|
|
179
|
-
else rules += '
|
|
180
|
-
if (props.isExpanded) rules += '
|
|
181
|
-
else rules += '
|
|
182
|
-
if (props.isExpanded) rules += '
|
|
183
|
-
else rules += '
|
|
184
|
-
if (props.isExpanded) rules += '
|
|
185
|
-
else rules += '
|
|
186
|
-
if (props.isExpanded) rules += '
|
|
187
|
-
if (props.isExpanded) rules += '
|
|
178
|
+
if (props.isExpanded) rules += ' oc';
|
|
179
|
+
else rules += ' oa';
|
|
180
|
+
if (props.isExpanded) rules += ' nc';
|
|
181
|
+
else rules += ' na';
|
|
182
|
+
if (props.isExpanded) rules += ' hl';
|
|
183
|
+
else rules += ' ha';
|
|
184
|
+
if (props.isExpanded) rules += ' ij';
|
|
185
|
+
else rules += ' ia';
|
|
186
|
+
if (props.isExpanded) rules += ' _ob';
|
|
187
|
+
if (props.isExpanded) rules += ' _hb';
|
|
188
188
|
return rules;
|
|
189
189
|
};
|
|
190
190
|
// Separate style macro for focus ring and toast so that
|
|
191
191
|
// isFocusVisible doesn't cause toast background to change.
|
|
192
192
|
const $6e462db325878d1a$var$toastFocusRing = function anonymous(props) {
|
|
193
|
-
let rules = "
|
|
194
|
-
if (props.isFocusVisible) rules += '
|
|
195
|
-
else rules += '
|
|
196
|
-
if (props.isExpanded) rules += '
|
|
193
|
+
let rules = " ";
|
|
194
|
+
if (props.isFocusVisible) rules += ' tb';
|
|
195
|
+
else rules += ' ta';
|
|
196
|
+
if (props.isExpanded) rules += ' Bl';
|
|
197
197
|
else {
|
|
198
|
-
rules += '
|
|
199
|
-
rules += '
|
|
198
|
+
rules += ' Bb';
|
|
199
|
+
rules += ' Bba';
|
|
200
200
|
}
|
|
201
|
-
rules += '
|
|
202
|
-
rules += '
|
|
201
|
+
rules += ' _ga';
|
|
202
|
+
rules += ' _ya';
|
|
203
203
|
return rules;
|
|
204
204
|
};
|
|
205
205
|
const $6e462db325878d1a$var$toastStyle = function anonymous(props) {
|
|
206
|
-
let rules = "
|
|
207
|
-
rules += '
|
|
208
|
-
rules += '
|
|
209
|
-
rules += '
|
|
210
|
-
rules += '
|
|
211
|
-
rules += '
|
|
212
|
-
rules += '
|
|
213
|
-
rules += '
|
|
214
|
-
rules += '
|
|
215
|
-
rules += '
|
|
216
|
-
rules += '
|
|
217
|
-
rules += '
|
|
218
|
-
rules += '
|
|
219
|
-
rules += ' -
|
|
220
|
-
rules += '
|
|
221
|
-
rules += '
|
|
222
|
-
rules += '
|
|
223
|
-
rules += '
|
|
224
|
-
rules += '
|
|
225
|
-
rules += '
|
|
226
|
-
rules += '
|
|
227
|
-
rules += '
|
|
228
|
-
rules += '
|
|
229
|
-
rules += '
|
|
230
|
-
rules += '
|
|
231
|
-
rules += '
|
|
232
|
-
rules += '
|
|
233
|
-
rules += '
|
|
234
|
-
rules += '
|
|
235
|
-
rules += '
|
|
236
|
-
rules += '
|
|
206
|
+
let rules = " ";
|
|
207
|
+
rules += ' ma';
|
|
208
|
+
rules += ' pf';
|
|
209
|
+
rules += ' kg';
|
|
210
|
+
rules += ' oe';
|
|
211
|
+
rules += ' nc';
|
|
212
|
+
rules += ' rd';
|
|
213
|
+
rules += ' vf';
|
|
214
|
+
rules += ' zd';
|
|
215
|
+
rules += ' xe';
|
|
216
|
+
rules += ' we';
|
|
217
|
+
rules += ' yd';
|
|
218
|
+
rules += ' sh';
|
|
219
|
+
rules += ' -Zn3gsb-_lu';
|
|
220
|
+
rules += ' _lksArhc';
|
|
221
|
+
rules += ' _qa';
|
|
222
|
+
rules += ' _ra';
|
|
223
|
+
rules += ' bh';
|
|
224
|
+
rules += ' bdf';
|
|
225
|
+
rules += ' beg';
|
|
226
|
+
rules += ' bfa';
|
|
227
|
+
rules += ' bgb';
|
|
228
|
+
rules += ' bhd';
|
|
229
|
+
rules += ' bje';
|
|
230
|
+
rules += ' bic';
|
|
231
|
+
rules += ' aa';
|
|
232
|
+
rules += ' aab';
|
|
233
|
+
rules += ' Da';
|
|
234
|
+
rules += ' Ea';
|
|
235
|
+
rules += ' Ca';
|
|
236
|
+
rules += ' gb';
|
|
237
|
+
rules += ' gca';
|
|
238
|
+
rules += ' dd';
|
|
237
239
|
if (props.variant === "negative") {
|
|
238
|
-
if (props.isPressed) rules += '
|
|
239
|
-
else if (props.isFocusVisible) rules += '
|
|
240
|
-
else if (props.isHovered) rules += '
|
|
241
|
-
else rules += '
|
|
240
|
+
if (props.isPressed) rules += ' ci';
|
|
241
|
+
else if (props.isFocusVisible) rules += ' ci';
|
|
242
|
+
else if (props.isHovered) rules += ' ci';
|
|
243
|
+
else rules += ' cu';
|
|
242
244
|
} else if (props.variant === "positive") {
|
|
243
|
-
if (props.isPressed) rules += '
|
|
244
|
-
else if (props.isFocusVisible) rules += '
|
|
245
|
-
else if (props.isHovered) rules += '
|
|
246
|
-
else rules += '
|
|
245
|
+
if (props.isPressed) rules += ' cp';
|
|
246
|
+
else if (props.isFocusVisible) rules += ' cp';
|
|
247
|
+
else if (props.isHovered) rules += ' cp';
|
|
248
|
+
else rules += ' cB';
|
|
247
249
|
} else if (props.variant === "info") {
|
|
248
|
-
if (props.isPressed) rules += '
|
|
249
|
-
else if (props.isFocusVisible) rules += '
|
|
250
|
-
else if (props.isHovered) rules += '
|
|
251
|
-
else rules += '
|
|
250
|
+
if (props.isPressed) rules += ' cb';
|
|
251
|
+
else if (props.isFocusVisible) rules += ' cb';
|
|
252
|
+
else if (props.isHovered) rules += ' cb';
|
|
253
|
+
else rules += ' cl';
|
|
252
254
|
} else if (props.variant === "neutral") {
|
|
253
|
-
if (props.isPressed) rules += '
|
|
254
|
-
else if (props.isFocusVisible) rules += '
|
|
255
|
-
else if (props.isHovered) rules += '
|
|
256
|
-
else rules += '
|
|
255
|
+
if (props.isPressed) rules += ' cq';
|
|
256
|
+
else if (props.isFocusVisible) rules += ' cq';
|
|
257
|
+
else if (props.isHovered) rules += ' cq';
|
|
258
|
+
else rules += ' cC';
|
|
257
259
|
}
|
|
258
|
-
rules += ' -
|
|
259
|
-
if (props.isExpanded) rules += '
|
|
260
|
-
else rules += '
|
|
260
|
+
rules += ' -_8sjo0b-Oa';
|
|
261
|
+
if (props.isExpanded) rules += ' _Kb';
|
|
262
|
+
else rules += ' _Ka';
|
|
261
263
|
return rules;
|
|
262
264
|
};
|
|
263
265
|
const $6e462db325878d1a$var$toastBody = function anonymous(props) {
|
|
264
|
-
let rules = "
|
|
265
|
-
if (props.isSingle) rules += '
|
|
266
|
-
else rules += '
|
|
267
|
-
rules += '
|
|
268
|
-
rules += '
|
|
269
|
-
rules += '
|
|
270
|
-
rules += '
|
|
271
|
-
rules += '
|
|
272
|
-
rules += '
|
|
273
|
-
rules += '
|
|
266
|
+
let rules = " ";
|
|
267
|
+
if (props.isSingle) rules += ' ma';
|
|
268
|
+
else rules += ' mb';
|
|
269
|
+
rules += ' S4w1sLc';
|
|
270
|
+
rules += ' _uWLL0Xb';
|
|
271
|
+
rules += ' _Ha';
|
|
272
|
+
rules += ' _3a';
|
|
273
|
+
rules += ' Fa';
|
|
274
|
+
rules += ' kf';
|
|
275
|
+
rules += ' pa';
|
|
274
276
|
return rules;
|
|
275
277
|
};
|
|
276
|
-
const $6e462db325878d1a$var$toastContent = "
|
|
278
|
+
const $6e462db325878d1a$var$toastContent = " ma pa kd Fb Lk52g2d Nk52g2d _fk52g2d _dk52g2d Aa fe";
|
|
277
279
|
const $6e462db325878d1a$var$controls = function anonymous(props) {
|
|
278
|
-
let rules = "
|
|
279
|
-
rules += '
|
|
280
|
-
if (props.isExpanded) rules += '
|
|
281
|
-
else rules += '
|
|
282
|
-
rules += '
|
|
283
|
-
rules += '
|
|
284
|
-
rules += '
|
|
285
|
-
if (props.isExpanded) rules += '
|
|
286
|
-
else rules += '
|
|
280
|
+
let rules = " ";
|
|
281
|
+
rules += ' _Na';
|
|
282
|
+
if (props.isExpanded) rules += ' ma';
|
|
283
|
+
else rules += ' md';
|
|
284
|
+
rules += ' _pb';
|
|
285
|
+
rules += ' pa';
|
|
286
|
+
rules += ' kd';
|
|
287
|
+
if (props.isExpanded) rules += ' _Lb';
|
|
288
|
+
else rules += ' _La';
|
|
287
289
|
return rules;
|
|
288
290
|
};
|
|
289
291
|
const $6e462db325878d1a$var$ICONS = {
|
|
@@ -349,7 +351,7 @@ function $6e462db325878d1a$export$f2815235e76a62b9(props) {
|
|
|
349
351
|
children: [
|
|
350
352
|
isExpanded && // eslint-disable-next-line
|
|
351
353
|
/*#__PURE__*/ (0, $jeXmD$jsx)("div", {
|
|
352
|
-
className: (0, ($parcel$interopDefault($jeXmD$Toast_modulemjs)))['toast-background'] + "
|
|
354
|
+
className: (0, ($parcel$interopDefault($jeXmD$Toast_modulemjs)))['toast-background'] + " Kc Ha Ga Ja Ia cQ",
|
|
353
355
|
onClick: collapse
|
|
354
356
|
}),
|
|
355
357
|
/*#__PURE__*/ (0, $jeXmD$jsx)($6e462db325878d1a$var$SpectrumToastList, {
|
|
@@ -502,7 +504,7 @@ function $6e462db325878d1a$export$f9b1e1c88454fa08(props) {
|
|
|
502
504
|
!isExpanded && visibleToasts.length > 1 && /*#__PURE__*/ (0, $jeXmD$jsxs)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
|
|
503
505
|
isQuiet: true,
|
|
504
506
|
staticColor: "white",
|
|
505
|
-
styles: "
|
|
507
|
+
styles: " LPgKvMe NPgKvMe _fPgKvMe _dPgKvMe",
|
|
506
508
|
// Make the chevron line up with the toast text, even though there is padding within the button.
|
|
507
509
|
UNSAFE_style: {
|
|
508
510
|
marginInlineStart: variant === 'neutral' ? -10 : 14
|
|
@@ -533,7 +535,7 @@ function $6e462db325878d1a$export$f9b1e1c88454fa08(props) {
|
|
|
533
535
|
if (toast.content.shouldCloseOnAction) state.close(toast.key);
|
|
534
536
|
},
|
|
535
537
|
UNSAFE_className: ctx && isMain ? (0, ($parcel$interopDefault($jeXmD$Toast_modulemjs)))['toast-action'] : undefined,
|
|
536
|
-
styles: "
|
|
538
|
+
styles: " hb Lzz3eAe Nzz3eAe _fzz3eAe _dzz3eAe",
|
|
537
539
|
children: toast.content.actionLabel
|
|
538
540
|
})
|
|
539
541
|
]
|
package/dist/Toast.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Toast.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';\nimport {CloseButton} from './CloseButton';\nimport {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps, useEvent} from '@react-aria/utils';\nimport {flushSync} from 'react-dom';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FocusScope, useModalOverlay} from 'react-aria';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastList as ToastList, ToastProps, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, ToastRegionProps, UNSTABLE_ToastStateContext as ToastStateContext} from 'react-aria-components';\nimport {Text} from './Content';\nimport toastCss from './Toast.module.css';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMediaQuery} from '@react-spectrum/utils';\nimport {useOverlayTriggerState} from 'react-stately';\n\nexport type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';\nexport interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children'> {\n /**\n * Placement of the toast container on the page.\n * @default \"bottom\"\n */\n placement?: ToastPlacement\n}\n\nexport interface ToastOptions extends Omit<RACToastOptions, 'priority'>, DOMProps {\n /** A label for the action button within the toast. */\n actionLabel?: string,\n /** Handler that is called when the action button is pressed. */\n onAction?: () => void,\n /** Whether the toast should automatically close when an action is performed. */\n shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastValue extends DOMProps {\n /** The content of the toast. */\n children: string,\n /** The variant (i.e. color) of the toast. */\n variant: 'positive' | 'negative' | 'info' | 'neutral',\n /** A label for the action button within the toast. */\n actionLabel?: string,\n /** Handler that is called when the action button is pressed. */\n onAction?: () => void,\n /** Whether the toast should automatically close when an action is performed. */\n shouldCloseOnAction?: boolean\n}\n\nfunction startViewTransition(fn: () => void, type: string) {\n if ('startViewTransition' in document) {\n // Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element.\n document.documentElement.classList.add(toastCss[type]);\n let viewTransition = document.startViewTransition({\n update: () => flushSync(fn),\n types: [toastCss[type]]\n });\n\n viewTransition.ready.catch(() => {});\n viewTransition.finished.then(() => {\n document.documentElement.classList.remove(toastCss[type]);\n });\n } else {\n fn();\n }\n}\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n if (!globalToastQueue) {\n globalToastQueue = new ToastQueue({\n maxVisibleToasts: Infinity,\n wrapUpdate(fn, action) {\n startViewTransition(fn, `toast-${action}`);\n }\n });\n }\n\n return globalToastQueue;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: ToastOptions = {}) {\n let value = {\n children,\n variant,\n actionLabel: options.actionLabel,\n onAction: options.onAction,\n shouldCloseOnAction: options.shouldCloseOnAction,\n ...filterDOMProps(options)\n };\n\n // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n // It is debatable whether non-actionable toasts would also fail.\n let timeout = options.timeout && !options.actionLabel ? Math.max(options.timeout, 5000) : undefined;\n let queue = getGlobalToastQueue();\n let key = queue.add(value, {timeout, onClose: options.onClose});\n return () => queue.close(key);\n}\n\ntype CloseFunction = () => void;\n\nconst SpectrumToastQueue = {\n /** Queues a neutral toast. */\n neutral(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'neutral', options);\n },\n /** Queues a positive toast. */\n positive(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'positive', options);\n },\n /** Queues a negative toast. */\n negative(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'negative', options);\n },\n /** Queues an informational toast. */\n info(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'info', options);\n }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n\nconst toastRegion = style({\n ...focusRing(),\n display: 'flex',\n flexDirection: {\n placement: {\n top: 'column',\n bottom: 'column-reverse'\n }\n },\n position: 'fixed',\n insetX: 0,\n width: 'fit',\n top: {\n placement: {\n top: {\n default: 16,\n isExpanded: 0\n }\n }\n },\n bottom: {\n placement: {\n bottom: {\n default: 16,\n isExpanded: 0\n }\n }\n },\n marginStart: {\n align: {\n start: 16,\n center: 'auto',\n end: 'auto'\n }\n },\n marginEnd: {\n align: {\n start: 'auto',\n center: 'auto',\n end: 16\n }\n },\n boxSizing: 'border-box',\n maxHeight: 'screen',\n borderRadius: 'lg'\n});\n\nconst toastList = style({\n position: 'relative',\n flexGrow: 1,\n display: 'flex',\n gap: 8,\n flexDirection: {\n placement: {\n top: 'column',\n bottom: 'column-reverse'\n }\n },\n boxSizing: 'border-box',\n marginY: 0,\n padding: {\n default: 0,\n // Add padding when expanded to account for focus ring.\n isExpanded: 8\n },\n paddingBottom: {\n isExpanded: {\n placement: {\n top: 8,\n bottom: 16\n }\n }\n },\n paddingTop: {\n isExpanded: {\n placement: {\n top: 16,\n bottom: 8\n }\n }\n },\n margin: 0,\n marginX: {\n default: 0,\n // Undo padding for focus ring.\n isExpanded: -8\n },\n overflow: {\n isExpanded: 'auto'\n }\n});\n\n// Separate style macro for focus ring and toast so that\n// isFocusVisible doesn't cause toast background to change.\nconst toastFocusRing = style({\n ...focusRing(),\n outlineColor: {\n default: 'focus-ring',\n isExpanded: 'white'\n }\n});\n\nconst toastStyle = style({\n display: 'flex',\n gap: 16,\n paddingStart: 16,\n paddingEnd: 8,\n paddingY: 12,\n borderRadius: 'lg',\n minHeight: 56,\n '--maxWidth': {\n type: 'maxWidth',\n value: 336\n },\n maxWidth: '[min(var(--maxWidth), 90vw)]',\n boxSizing: 'border-box',\n flexShrink: 0,\n font: 'ui',\n color: 'white',\n backgroundColor: {\n variant: {\n neutral: 'neutral-subdued',\n info: 'informative',\n positive: 'positive',\n negative: 'negative'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n boxShadow: {\n default: 'elevated',\n isExpanded: 'none'\n }\n});\n\nconst toastBody = style({\n // The top toast in a non-expanded stack has the expand button, so it is rendered as a grid.\n // Otherwise it uses flex so the content can wrap when needed.\n display: {\n default: 'grid',\n isSingle: 'flex'\n },\n gridTemplateColumns: ['auto', '1fr', 'auto'],\n gridTemplateAreas: [\n 'content content content',\n 'expand . action'\n ],\n flexGrow: 1,\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: 24,\n rowGap: 8\n});\n\nconst toastContent = style({\n display: 'flex',\n gap: 8,\n alignItems: 'baseline',\n gridArea: 'content',\n cursor: 'default',\n width: 'fit'\n});\n\nconst controls = style({\n colorScheme: 'light',\n display: {\n default: 'none',\n isExpanded: 'flex'\n },\n justifyContent: 'end',\n gap: 8,\n opacity: {\n default: 0,\n isExpanded: 1\n }\n});\n\nconst ICONS = {\n info: InfoIcon,\n negative: AlertIcon,\n positive: CheckmarkIcon\n};\n\ninterface ToastContainerContextValue {\n isExpanded: boolean,\n toggleExpanded: () => void\n}\n\nconst ToastContainerContext = createContext<ToastContainerContextValue | null>(null);\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: ToastContainerProps): ReactNode {\n let {\n placement = 'bottom'\n } = props;\n let queue = getGlobalToastQueue();\n let align = 'center';\n [placement, align = 'center'] = placement.split(' ') as any;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let regionRef = useRef<HTMLDivElement | null>(null);\n\n let state = useOverlayTriggerState({});\n let {isOpen: isExpanded, close, toggle} = state;\n let ctx = useMemo(() => ({\n isExpanded,\n toggleExpanded() {\n if (!isExpanded && queue.visibleToasts.length <= 1) {\n return;\n }\n\n startViewTransition(\n () => toggle(),\n isExpanded ? 'toast-collapse' : 'toast-expand'\n );\n }\n }), [isExpanded, toggle, queue]);\n\n // Set the state to collapsed whenever the queue is emptied.\n useEffect(() => {\n return queue.subscribe(() => {\n if (queue.visibleToasts.length === 0 && isExpanded) {\n close();\n }\n });\n }, [queue, isExpanded, close]);\n\n let collapse = () => {\n regionRef.current?.focus();\n ctx.toggleExpanded();\n };\n\n // Prevent scroll, aria hide outside, and contain focus when expanded, since we take over the whole screen.\n // Attach event handler to the ref since ToastRegion doesn't pass through onKeyDown.\n useModalOverlay({}, state, regionRef);\n useEvent(regionRef, 'keydown', isExpanded ? (e) => {\n if (e.key === 'Escape') {\n collapse();\n }\n } : undefined);\n\n return (\n <ToastRegion\n {...props}\n ref={regionRef}\n queue={queue}\n className={renderProps => toastRegion({\n ...renderProps,\n placement,\n align,\n isExpanded\n })}>\n <FocusScope contain={isExpanded}>\n <ToastContainerContext.Provider value={ctx}>\n {isExpanded && (\n // eslint-disable-next-line\n <div\n className={toastCss['toast-background'] + style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})}\n onClick={collapse} />\n )}\n <SpectrumToastList placement={placement} align={align} />\n <div className={toastCss['toast-controls'] + controls({isExpanded})}>\n <ActionButton\n size=\"S\"\n onPress={() => queue.clear()}\n // Default focus ring does not have enough contrast against gray background.\n UNSAFE_style={{outlineColor: 'white'}}>\n {stringFormatter.format('toast.clearAll')}\n </ActionButton>\n <ActionButton\n size=\"S\"\n onPress={collapse}\n UNSAFE_style={{outlineColor: 'white'}}>\n {stringFormatter.format('toast.collapse')}\n </ActionButton>\n </div>\n </ToastContainerContext.Provider>\n </FocusScope>\n </ToastRegion>\n );\n}\n\nfunction SpectrumToastList({placement, align}) {\n let {isExpanded, toggleExpanded} = useContext(ToastContainerContext)!;\n\n // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.\n let toastListRef = useRef(null);\n useEvent(toastListRef, 'click', (e) => {\n // Have to check if this is a button because stopPropagation in react events doesn't affect native events.\n if (!isExpanded && !(e.target as Element)?.closest('button')) {\n toggleExpanded();\n }\n });\n\n let reduceMotion = useMediaQuery('(prefers-reduced-motion)');\n\n return (\n <ToastList<SpectrumToastValue>\n ref={toastListRef}\n style={({isHovered}) => {\n let origin = isHovered ? 95 : 55;\n return {\n perspective: 80,\n perspectiveOrigin: 'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),\n transition: 'perspective-origin 400ms'\n };\n }}\n className={toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] + toastList({placement, align, isExpanded})}>\n {({toast}) => (\n <SpectrumToast\n toast={toast}\n placement={placement}\n align={align}\n reduceMotion={reduceMotion} />\n )}\n </ToastList>\n );\n}\n\ninterface SpectrumToastProps extends ToastProps<SpectrumToastValue> {\n placement?: 'top' | 'bottom',\n align?: 'start' | 'center' | 'end',\n reduceMotion?: boolean\n}\n\n// Exported locally for stories.\nexport function SpectrumToast(props: SpectrumToastProps): ReactNode {\n let {toast, placement = 'bottom', align = 'center'} = props;\n let variant = toast.content.variant || 'info';\n let Icon = ICONS[variant];\n let state = useContext(ToastStateContext)!;\n let visibleToasts = state.visibleToasts;\n let index = visibleToasts.indexOf(toast);\n let isMain = index <= 0;\n let ctx = useContext(ToastContainerContext);\n let isExpanded = ctx?.isExpanded || false;\n let toastRef = useRef<HTMLDivElement | null>(null);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n // When not expanded, use a presentational div for the toasts behind the top one.\n // The content is invisible, all we show is the background color.\n if (!isMain && ctx && !ctx.isExpanded) {\n return (\n <div\n role=\"presentation\"\n style={{\n position: 'absolute',\n [placement === 'top' ? 'bottom' : 'top']: 0,\n left: 0,\n width: '100%',\n translate: `0 0 ${(-12 * index)}px`,\n // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.\n // This allows view transitions to smoothly animate them from where they would be \n // in the collapsed stack to their final position in the expanded list.\n opacity: index >= 3 ? 0 : 1,\n zIndex: visibleToasts.length - index - 1,\n // When reduced motion is enabled, use append index to view-transition-name\n // so that adding/removing a toast cross fades instead of transitioning the position.\n // This works because the toasts are seen as separate elements instead of the same one when their index changes.\n viewTransitionName: toast.key + (props.reduceMotion ? '-' + index : ''),\n viewTransitionClass: [toastCss.toast, toastCss['background-toast']].map(c => CSS.escape(c)).join(' ')\n }}\n className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})} />\n );\n }\n\n return (\n <Toast\n ref={toastRef}\n toast={toast}\n style={{\n zIndex: visibleToasts.length - index - 1,\n viewTransitionName: toast.key,\n viewTransitionClass: [toastCss.toast, !isMain ? toastCss['background-toast'] : '', toastCss[placement], toastCss[align]].filter(Boolean).map(c => CSS.escape(c)).join(' ')\n }}\n className={renderProps => toastCss.toast + mergeStyles(\n toastFocusRing({...renderProps, isExpanded}),\n toastStyle({\n variant: toast.content.variant || 'info',\n index,\n isExpanded\n })\n )}>\n <div role=\"presentation\" className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>\n <ToastContent className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>\n {Icon &&\n <CenterBaseline>\n <Icon />\n </CenterBaseline>\n }\n <Text slot=\"title\">{toast.content.children}</Text>\n </ToastContent>\n {!isExpanded && visibleToasts.length > 1 && \n <ActionButton\n isQuiet\n staticColor=\"white\"\n styles={style({gridArea: 'expand'})}\n // Make the chevron line up with the toast text, even though there is padding within the button.\n UNSAFE_style={{marginInlineStart: variant === 'neutral' ? -10 : 14}}\n UNSAFE_className={ctx && isMain ? toastCss['toast-expand'] : undefined}\n onPress={() => {\n // This button disappears when clicked, so move focus to the toast.\n toastRef.current?.focus();\n ctx?.toggleExpanded();\n }}>\n <Text>{stringFormatter.format('toast.showAll')}</Text>\n {/* @ts-ignore */}\n <Chevron UNSAFE_style={{rotate: placement === 'bottom' ? '180deg' : undefined}} />\n </ActionButton>\n }\n {toast.content.actionLabel &&\n <Button\n variant=\"secondary\"\n fillStyle=\"outline\"\n staticColor=\"white\"\n onPress={() => {\n toast.content.onAction?.();\n if (toast.content.shouldCloseOnAction) {\n state.close(toast.key);\n }\n }}\n UNSAFE_className={ctx && isMain ? toastCss['toast-action'] : undefined}\n styles={style({marginStart: 'auto', gridArea: 'action'})}>\n {toast.content.actionLabel}\n </Button>\n }\n </div>\n <CloseButton\n staticColor=\"white\"\n UNSAFE_className={ctx && isMain ? toastCss['toast-close'] : undefined} />\n </Toast>\n );\n}\n"],"names":[],"version":3,"file":"Toast.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Toast.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';\nimport {CloseButton} from './CloseButton';\nimport {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps, useEvent} from '@react-aria/utils';\nimport {flushSync} from 'react-dom';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FocusScope, useModalOverlay} from 'react-aria';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastList as ToastList, ToastProps, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, ToastRegionProps, UNSTABLE_ToastStateContext as ToastStateContext} from 'react-aria-components';\nimport {Text} from './Content';\nimport toastCss from './Toast.module.css';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMediaQuery} from '@react-spectrum/utils';\nimport {useOverlayTriggerState} from 'react-stately';\n\nexport type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';\nexport interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children'> {\n /**\n * Placement of the toast container on the page.\n * @default \"bottom\"\n */\n placement?: ToastPlacement\n}\n\nexport interface ToastOptions extends Omit<RACToastOptions, 'priority'>, DOMProps {\n /** A label for the action button within the toast. */\n actionLabel?: string,\n /** Handler that is called when the action button is pressed. */\n onAction?: () => void,\n /** Whether the toast should automatically close when an action is performed. */\n shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastValue extends DOMProps {\n /** The content of the toast. */\n children: string,\n /** The variant (i.e. color) of the toast. */\n variant: 'positive' | 'negative' | 'info' | 'neutral',\n /** A label for the action button within the toast. */\n actionLabel?: string,\n /** Handler that is called when the action button is pressed. */\n onAction?: () => void,\n /** Whether the toast should automatically close when an action is performed. */\n shouldCloseOnAction?: boolean\n}\n\nfunction startViewTransition(fn: () => void, type: string) {\n if ('startViewTransition' in document) {\n // Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element.\n document.documentElement.classList.add(toastCss[type]);\n let viewTransition = document.startViewTransition({\n update: () => flushSync(fn),\n types: [toastCss[type]]\n });\n\n viewTransition.ready.catch(() => {});\n viewTransition.finished.then(() => {\n document.documentElement.classList.remove(toastCss[type]);\n });\n } else {\n fn();\n }\n}\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n if (!globalToastQueue) {\n globalToastQueue = new ToastQueue({\n maxVisibleToasts: Infinity,\n wrapUpdate(fn, action) {\n startViewTransition(fn, `toast-${action}`);\n }\n });\n }\n\n return globalToastQueue;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: ToastOptions = {}) {\n let value = {\n children,\n variant,\n actionLabel: options.actionLabel,\n onAction: options.onAction,\n shouldCloseOnAction: options.shouldCloseOnAction,\n ...filterDOMProps(options)\n };\n\n // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n // It is debatable whether non-actionable toasts would also fail.\n let timeout = options.timeout && !options.actionLabel ? Math.max(options.timeout, 5000) : undefined;\n let queue = getGlobalToastQueue();\n let key = queue.add(value, {timeout, onClose: options.onClose});\n return () => queue.close(key);\n}\n\ntype CloseFunction = () => void;\n\nconst SpectrumToastQueue = {\n /** Queues a neutral toast. */\n neutral(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'neutral', options);\n },\n /** Queues a positive toast. */\n positive(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'positive', options);\n },\n /** Queues a negative toast. */\n negative(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'negative', options);\n },\n /** Queues an informational toast. */\n info(children: string, options: ToastOptions = {}): CloseFunction {\n return addToast(children, 'info', options);\n }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n\nconst toastRegion = style({\n ...focusRing(),\n display: 'flex',\n flexDirection: {\n placement: {\n top: 'column',\n bottom: 'column-reverse'\n }\n },\n position: 'fixed',\n insetX: 0,\n width: 'fit',\n top: {\n placement: {\n top: {\n default: 16,\n isExpanded: 0\n }\n }\n },\n bottom: {\n placement: {\n bottom: {\n default: 16,\n isExpanded: 0\n }\n }\n },\n marginStart: {\n align: {\n start: 16,\n center: 'auto',\n end: 'auto'\n }\n },\n marginEnd: {\n align: {\n start: 'auto',\n center: 'auto',\n end: 16\n }\n },\n boxSizing: 'border-box',\n maxHeight: 'screen',\n borderRadius: 'lg'\n});\n\nconst toastList = style({\n position: 'relative',\n flexGrow: 1,\n display: 'flex',\n gap: 8,\n flexDirection: {\n placement: {\n top: 'column',\n bottom: 'column-reverse'\n }\n },\n boxSizing: 'border-box',\n marginY: 0,\n padding: {\n default: 0,\n // Add padding when expanded to account for focus ring.\n isExpanded: 8\n },\n paddingBottom: {\n isExpanded: {\n placement: {\n top: 8,\n bottom: 16\n }\n }\n },\n paddingTop: {\n isExpanded: {\n placement: {\n top: 16,\n bottom: 8\n }\n }\n },\n margin: 0,\n marginX: {\n default: 0,\n // Undo padding for focus ring.\n isExpanded: -8\n },\n overflow: {\n isExpanded: 'auto'\n }\n});\n\n// Separate style macro for focus ring and toast so that\n// isFocusVisible doesn't cause toast background to change.\nconst toastFocusRing = style({\n ...focusRing(),\n outlineColor: {\n default: 'focus-ring',\n isExpanded: 'white'\n }\n});\n\nconst toastStyle = style({\n display: 'flex',\n gap: 16,\n paddingStart: 16,\n paddingEnd: 8,\n paddingY: 12,\n borderRadius: 'lg',\n minHeight: 56,\n '--maxWidth': {\n type: 'maxWidth',\n value: 336\n },\n maxWidth: '[min(var(--maxWidth), 90vw)]',\n boxSizing: 'border-box',\n flexShrink: 0,\n font: 'ui',\n color: 'white',\n backgroundColor: {\n variant: {\n neutral: 'neutral-subdued',\n info: 'informative',\n positive: 'positive',\n negative: 'negative'\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n boxShadow: {\n default: 'elevated',\n isExpanded: 'none'\n }\n});\n\nconst toastBody = style({\n // The top toast in a non-expanded stack has the expand button, so it is rendered as a grid.\n // Otherwise it uses flex so the content can wrap when needed.\n display: {\n default: 'grid',\n isSingle: 'flex'\n },\n gridTemplateColumns: ['auto', '1fr', 'auto'],\n gridTemplateAreas: [\n 'content content content',\n 'expand . action'\n ],\n flexGrow: 1,\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: 24,\n rowGap: 8\n});\n\nconst toastContent = style({\n display: 'flex',\n gap: 8,\n alignItems: 'baseline',\n gridArea: 'content',\n cursor: 'default',\n width: 'fit'\n});\n\nconst controls = style({\n colorScheme: 'light',\n display: {\n default: 'none',\n isExpanded: 'flex'\n },\n justifyContent: 'end',\n gap: 8,\n opacity: {\n default: 0,\n isExpanded: 1\n }\n});\n\nconst ICONS = {\n info: InfoIcon,\n negative: AlertIcon,\n positive: CheckmarkIcon\n};\n\ninterface ToastContainerContextValue {\n isExpanded: boolean,\n toggleExpanded: () => void\n}\n\nconst ToastContainerContext = createContext<ToastContainerContextValue | null>(null);\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: ToastContainerProps): ReactNode {\n let {\n placement = 'bottom'\n } = props;\n let queue = getGlobalToastQueue();\n let align = 'center';\n [placement, align = 'center'] = placement.split(' ') as any;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let regionRef = useRef<HTMLDivElement | null>(null);\n\n let state = useOverlayTriggerState({});\n let {isOpen: isExpanded, close, toggle} = state;\n let ctx = useMemo(() => ({\n isExpanded,\n toggleExpanded() {\n if (!isExpanded && queue.visibleToasts.length <= 1) {\n return;\n }\n\n startViewTransition(\n () => toggle(),\n isExpanded ? 'toast-collapse' : 'toast-expand'\n );\n }\n }), [isExpanded, toggle, queue]);\n\n // Set the state to collapsed whenever the queue is emptied.\n useEffect(() => {\n return queue.subscribe(() => {\n if (queue.visibleToasts.length === 0 && isExpanded) {\n close();\n }\n });\n }, [queue, isExpanded, close]);\n\n let collapse = () => {\n regionRef.current?.focus();\n ctx.toggleExpanded();\n };\n\n // Prevent scroll, aria hide outside, and contain focus when expanded, since we take over the whole screen.\n // Attach event handler to the ref since ToastRegion doesn't pass through onKeyDown.\n useModalOverlay({}, state, regionRef);\n useEvent(regionRef, 'keydown', isExpanded ? (e) => {\n if (e.key === 'Escape') {\n collapse();\n }\n } : undefined);\n\n return (\n <ToastRegion\n {...props}\n ref={regionRef}\n queue={queue}\n className={renderProps => toastRegion({\n ...renderProps,\n placement,\n align,\n isExpanded\n })}>\n <FocusScope contain={isExpanded}>\n <ToastContainerContext.Provider value={ctx}>\n {isExpanded && (\n // eslint-disable-next-line\n <div\n className={toastCss['toast-background'] + style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})}\n onClick={collapse} />\n )}\n <SpectrumToastList placement={placement} align={align} />\n <div className={toastCss['toast-controls'] + controls({isExpanded})}>\n <ActionButton\n size=\"S\"\n onPress={() => queue.clear()}\n // Default focus ring does not have enough contrast against gray background.\n UNSAFE_style={{outlineColor: 'white'}}>\n {stringFormatter.format('toast.clearAll')}\n </ActionButton>\n <ActionButton\n size=\"S\"\n onPress={collapse}\n UNSAFE_style={{outlineColor: 'white'}}>\n {stringFormatter.format('toast.collapse')}\n </ActionButton>\n </div>\n </ToastContainerContext.Provider>\n </FocusScope>\n </ToastRegion>\n );\n}\n\nfunction SpectrumToastList({placement, align}) {\n let {isExpanded, toggleExpanded} = useContext(ToastContainerContext)!;\n\n // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.\n let toastListRef = useRef(null);\n useEvent(toastListRef, 'click', (e) => {\n // Have to check if this is a button because stopPropagation in react events doesn't affect native events.\n if (!isExpanded && !(e.target as Element)?.closest('button')) {\n toggleExpanded();\n }\n });\n\n let reduceMotion = useMediaQuery('(prefers-reduced-motion)');\n\n return (\n <ToastList<SpectrumToastValue>\n ref={toastListRef}\n style={({isHovered}) => {\n let origin = isHovered ? 95 : 55;\n return {\n perspective: 80,\n perspectiveOrigin: 'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),\n transition: 'perspective-origin 400ms'\n };\n }}\n className={toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] + toastList({placement, align, isExpanded})}>\n {({toast}) => (\n <SpectrumToast\n toast={toast}\n placement={placement}\n align={align}\n reduceMotion={reduceMotion} />\n )}\n </ToastList>\n );\n}\n\ninterface SpectrumToastProps extends ToastProps<SpectrumToastValue> {\n placement?: 'top' | 'bottom',\n align?: 'start' | 'center' | 'end',\n reduceMotion?: boolean\n}\n\n// Exported locally for stories.\nexport function SpectrumToast(props: SpectrumToastProps): ReactNode {\n let {toast, placement = 'bottom', align = 'center'} = props;\n let variant = toast.content.variant || 'info';\n let Icon = ICONS[variant];\n let state = useContext(ToastStateContext)!;\n let visibleToasts = state.visibleToasts;\n let index = visibleToasts.indexOf(toast);\n let isMain = index <= 0;\n let ctx = useContext(ToastContainerContext);\n let isExpanded = ctx?.isExpanded || false;\n let toastRef = useRef<HTMLDivElement | null>(null);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n // When not expanded, use a presentational div for the toasts behind the top one.\n // The content is invisible, all we show is the background color.\n if (!isMain && ctx && !ctx.isExpanded) {\n return (\n <div\n role=\"presentation\"\n style={{\n position: 'absolute',\n [placement === 'top' ? 'bottom' : 'top']: 0,\n left: 0,\n width: '100%',\n translate: `0 0 ${(-12 * index)}px`,\n // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.\n // This allows view transitions to smoothly animate them from where they would be \n // in the collapsed stack to their final position in the expanded list.\n opacity: index >= 3 ? 0 : 1,\n zIndex: visibleToasts.length - index - 1,\n // When reduced motion is enabled, use append index to view-transition-name\n // so that adding/removing a toast cross fades instead of transitioning the position.\n // This works because the toasts are seen as separate elements instead of the same one when their index changes.\n viewTransitionName: toast.key + (props.reduceMotion ? '-' + index : ''),\n viewTransitionClass: [toastCss.toast, toastCss['background-toast']].map(c => CSS.escape(c)).join(' ')\n }}\n className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})} />\n );\n }\n\n return (\n <Toast\n ref={toastRef}\n toast={toast}\n style={{\n zIndex: visibleToasts.length - index - 1,\n viewTransitionName: toast.key,\n viewTransitionClass: [toastCss.toast, !isMain ? toastCss['background-toast'] : '', toastCss[placement], toastCss[align]].filter(Boolean).map(c => CSS.escape(c)).join(' ')\n }}\n className={renderProps => toastCss.toast + mergeStyles(\n toastFocusRing({...renderProps, isExpanded}),\n toastStyle({\n variant: toast.content.variant || 'info',\n index,\n isExpanded\n })\n )}>\n <div role=\"presentation\" className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>\n <ToastContent className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>\n {Icon &&\n <CenterBaseline>\n <Icon />\n </CenterBaseline>\n }\n <Text slot=\"title\">{toast.content.children}</Text>\n </ToastContent>\n {!isExpanded && visibleToasts.length > 1 && \n <ActionButton\n isQuiet\n staticColor=\"white\"\n styles={style({gridArea: 'expand'})}\n // Make the chevron line up with the toast text, even though there is padding within the button.\n UNSAFE_style={{marginInlineStart: variant === 'neutral' ? -10 : 14}}\n UNSAFE_className={ctx && isMain ? toastCss['toast-expand'] : undefined}\n onPress={() => {\n // This button disappears when clicked, so move focus to the toast.\n toastRef.current?.focus();\n ctx?.toggleExpanded();\n }}>\n <Text>{stringFormatter.format('toast.showAll')}</Text>\n {/* @ts-ignore */}\n <Chevron UNSAFE_style={{rotate: placement === 'bottom' ? '180deg' : undefined}} />\n </ActionButton>\n }\n {toast.content.actionLabel &&\n <Button\n variant=\"secondary\"\n fillStyle=\"outline\"\n staticColor=\"white\"\n onPress={() => {\n toast.content.onAction?.();\n if (toast.content.shouldCloseOnAction) {\n state.close(toast.key);\n }\n }}\n UNSAFE_className={ctx && isMain ? toastCss['toast-action'] : undefined}\n styles={style({marginStart: 'auto', gridArea: 'action'})}>\n {toast.content.actionLabel}\n </Button>\n }\n </div>\n <CloseButton\n staticColor=\"white\"\n UNSAFE_className={ctx && isMain ? toastCss['toast-close'] : undefined} />\n </Toast>\n );\n}\n"],"names":[],"version":3,"file":"Toast.mjs.map"}
|
package/dist/ToggleButton.cjs
CHANGED
|
@@ -78,7 +78,7 @@ const $d16e5203405a91b7$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $kyLWK$react
|
|
|
78
78
|
[
|
|
79
79
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
80
80
|
{
|
|
81
|
-
styles: "
|
|
81
|
+
styles: " rAzEcG vAzEcG _Mb _oa _ha _Ta _za"
|
|
82
82
|
}
|
|
83
83
|
],
|
|
84
84
|
[
|
|
@@ -86,9 +86,9 @@ const $d16e5203405a91b7$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $kyLWK$react
|
|
|
86
86
|
{
|
|
87
87
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
88
88
|
slot: 'icon',
|
|
89
|
-
styles: "
|
|
89
|
+
styles: " _Ma"
|
|
90
90
|
}),
|
|
91
|
-
styles: "
|
|
91
|
+
styles: " fuUmpre euUmpre h67logd _ra"
|
|
92
92
|
}
|
|
93
93
|
]
|
|
94
94
|
],
|
package/dist/ToggleButton.css
CHANGED
|
@@ -1,52 +1,50 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.rAzEcG {
|
|
3
3
|
padding-top: var(--labelPadding);
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.vAzEcG {
|
|
7
7
|
padding-bottom: var(--labelPadding);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
._Mb {
|
|
11
11
|
order: 1;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
._oa {
|
|
15
15
|
overflow-x: hidden;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
._ha {
|
|
19
19
|
overflow-y: hidden;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
._Ta {
|
|
23
23
|
text-overflow: ellipsis;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
._za {
|
|
27
27
|
white-space: nowrap;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.
|
|
30
|
+
._Ma {
|
|
31
31
|
order: 0;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
.fuUmpre {
|
|
35
35
|
width: 1.42857em;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.euUmpre {
|
|
39
39
|
height: 1.42857em;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.
|
|
42
|
+
.h67logd {
|
|
43
43
|
margin-inline-start: var(--iconMargin);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.
|
|
46
|
+
._ra {
|
|
47
47
|
flex-shrink: 0;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
|
|
51
|
-
@layer _.b;
|
|
52
50
|
/*# sourceMappingURL=ToggleButton.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACgFiC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA
|
|
1
|
+
{"mappings":"ACgFiC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA","sources":["bc1013d4d937a6f8","packages/@react-spectrum/s2/src/ToggleButton.tsx"],"sourcesContent":["@import \"2356498b79989caa\";\n@import \"00644bdfe594b970\";\n@import \"2645bae9c4681078\";\n","/*\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 {ActionButtonStyleProps, btnStyles} from './ActionButton';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {StyleProps} from './style-utils';\nimport {Text, TextContext} from './Content';\nimport {ToggleButtonGroupContext} from './ToggleButtonGroup';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the button. */\n children: ReactNode,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let ctx = useSlottedContext(ToggleButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n isEmphasized = props.isEmphasized,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n return (\n <RACToggleButton\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 staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n isEmphasized,\n isPending: false,\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 ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.css.map"}
|
package/dist/ToggleButton.mjs
CHANGED
|
@@ -71,7 +71,7 @@ const $fe4c9df7420c3c9f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $fpet3$forwa
|
|
|
71
71
|
[
|
|
72
72
|
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
|
|
73
73
|
{
|
|
74
|
-
styles: "
|
|
74
|
+
styles: " rAzEcG vAzEcG _Mb _oa _ha _Ta _za"
|
|
75
75
|
}
|
|
76
76
|
],
|
|
77
77
|
[
|
|
@@ -79,9 +79,9 @@ const $fe4c9df7420c3c9f$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $fpet3$forwa
|
|
|
79
79
|
{
|
|
80
80
|
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
|
|
81
81
|
slot: 'icon',
|
|
82
|
-
styles: "
|
|
82
|
+
styles: " _Ma"
|
|
83
83
|
}),
|
|
84
|
-
styles: "
|
|
84
|
+
styles: " fuUmpre euUmpre h67logd _ra"
|
|
85
85
|
}
|
|
86
86
|
]
|
|
87
87
|
],
|