@adobe/react-spectrum 3.47.1 → 3.47.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/private/accordion_vars.css +66 -48
- package/dist/private/accordion_vars.css.map +1 -1
- package/dist/private/actionbar/ActionBar.cjs.map +1 -1
- package/dist/private/actionbar/ActionBar.js.map +1 -1
- package/dist/private/actionbar/ActionBar.mjs.map +1 -1
- package/dist/private/actionbar/actionbar.css +59 -57
- package/dist/private/actionbar/actionbar.css.map +1 -1
- package/dist/private/actiongroup/ActionGroup.cjs +1 -1
- package/dist/private/actiongroup/ActionGroup.cjs.map +1 -1
- package/dist/private/actiongroup/ActionGroup.js +1 -1
- package/dist/private/actiongroup/ActionGroup.js.map +1 -1
- package/dist/private/actiongroup/ActionGroup.mjs +1 -1
- package/dist/private/actiongroup/ActionGroup.mjs.map +1 -1
- package/dist/private/actiongroup_vars.css +124 -114
- package/dist/private/actiongroup_vars.css.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.cjs.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.js.map +1 -1
- package/dist/private/autocomplete/MobileSearchAutocomplete.mjs.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.cjs.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.js.map +1 -1
- package/dist/private/autocomplete/SearchAutocomplete.mjs.map +1 -1
- package/dist/private/autocomplete/searchautocomplete.css +6 -6
- package/dist/private/autocomplete/searchautocomplete.css.map +1 -1
- package/dist/private/avatar_vars.css +12 -7
- package/dist/private/avatar_vars.css.map +1 -1
- package/dist/private/badge_vars.css +76 -68
- package/dist/private/badge_vars.css.map +1 -1
- package/dist/private/barloader_vars.css +132 -112
- package/dist/private/barloader_vars.css.map +1 -1
- package/dist/private/breadcrumb_vars.css +182 -148
- package/dist/private/breadcrumb_vars.css.map +1 -1
- package/dist/private/button/Button.cjs.map +1 -1
- package/dist/private/button/Button.js.map +1 -1
- package/dist/private/button/Button.mjs.map +1 -1
- package/dist/private/button_vars.css +822 -785
- package/dist/private/button_vars.css.map +1 -1
- package/dist/private/buttongroup_vars.css +25 -24
- package/dist/private/buttongroup_vars.css.map +1 -1
- package/dist/private/buttongroup_vars_css.cjs +5 -5
- package/dist/private/buttongroup_vars_css.mjs +5 -5
- package/dist/private/calendar/CalendarBase.cjs.map +1 -1
- package/dist/private/calendar/CalendarBase.js.map +1 -1
- package/dist/private/calendar/CalendarBase.mjs.map +1 -1
- package/dist/private/calendar_vars.css +280 -256
- package/dist/private/calendar_vars.css.map +1 -1
- package/dist/private/card/BaseLayout.cjs +2 -2
- package/dist/private/card/BaseLayout.cjs.map +1 -1
- package/dist/private/card/BaseLayout.js +2 -2
- package/dist/private/card/BaseLayout.js.map +1 -1
- package/dist/private/card/BaseLayout.mjs +2 -2
- package/dist/private/card/BaseLayout.mjs.map +1 -1
- package/dist/private/card/CardView.cjs.map +1 -1
- package/dist/private/card/CardView.js.map +1 -1
- package/dist/private/card/CardView.mjs.map +1 -1
- package/dist/private/card_vars.css +995 -907
- package/dist/private/card_vars.css.map +1 -1
- package/dist/private/checkbox_vars.css +318 -219
- package/dist/private/checkbox_vars.css.map +1 -1
- package/dist/private/circleloader_vars.css +99 -85
- package/dist/private/circleloader_vars.css.map +1 -1
- package/dist/private/color/ColorEditor.cjs.map +1 -1
- package/dist/private/color/ColorEditor.js.map +1 -1
- package/dist/private/color/ColorEditor.mjs.map +1 -1
- package/dist/private/color/ColorPicker.css +28 -14
- package/dist/private/color/ColorPicker.css.map +1 -1
- package/dist/private/color/colorfield.css +3 -3
- package/dist/private/color/colorfield.css.map +1 -1
- package/dist/private/colorarea_vars.css +36 -29
- package/dist/private/colorarea_vars.css.map +1 -1
- package/dist/private/colorhandle_vars.css +23 -23
- package/dist/private/colorloupe_vars.css +5 -5
- package/dist/private/colorloupe_vars.css.map +1 -1
- package/dist/private/colorslider_vars.css +34 -34
- package/dist/private/colorslider_vars.css.map +1 -1
- package/dist/private/colorwheel_vars.css +44 -38
- package/dist/private/colorwheel_vars.css.map +1 -1
- package/dist/private/combobox/ComboBox.cjs.map +1 -1
- package/dist/private/combobox/ComboBox.js.map +1 -1
- package/dist/private/combobox/ComboBox.mjs.map +1 -1
- package/dist/private/combobox/MobileComboBox.cjs.map +1 -1
- package/dist/private/combobox/MobileComboBox.js.map +1 -1
- package/dist/private/combobox/MobileComboBox.mjs.map +1 -1
- package/dist/private/combobox/combobox.css +6 -6
- package/dist/private/combobox/combobox.css.map +1 -1
- package/dist/private/contextualhelp/ContextualHelp.cjs.map +1 -1
- package/dist/private/contextualhelp/ContextualHelp.js.map +1 -1
- package/dist/private/contextualhelp/ContextualHelp.mjs.map +1 -1
- package/dist/private/contextualhelp_vars.css +13 -13
- package/dist/private/contextualhelp_vars.css.map +1 -1
- package/dist/private/datepicker/DatePicker.cjs.map +1 -1
- package/dist/private/datepicker/DatePicker.js.map +1 -1
- package/dist/private/datepicker/DatePicker.mjs.map +1 -1
- package/dist/private/datepicker/DateRangePicker.cjs.map +1 -1
- package/dist/private/datepicker/DateRangePicker.js.map +1 -1
- package/dist/private/datepicker/DateRangePicker.mjs.map +1 -1
- package/dist/private/datepicker/styles.css +33 -31
- package/dist/private/datepicker/styles.css.map +1 -1
- package/dist/private/dialog/AlertDialog.cjs.map +1 -1
- package/dist/private/dialog/AlertDialog.js.map +1 -1
- package/dist/private/dialog/AlertDialog.mjs.map +1 -1
- package/dist/private/dialog/Dialog.cjs.map +1 -1
- package/dist/private/dialog/Dialog.js.map +1 -1
- package/dist/private/dialog/Dialog.mjs.map +1 -1
- package/dist/private/dialog_vars.css +216 -180
- package/dist/private/dialog_vars.css.map +1 -1
- package/dist/private/dropdown_vars.css +150 -114
- package/dist/private/dropdown_vars.css.map +1 -1
- package/dist/private/dropzone/DropZone.cjs.map +1 -1
- package/dist/private/dropzone/DropZone.js.map +1 -1
- package/dist/private/dropzone/DropZone.mjs.map +1 -1
- package/dist/private/dropzone_vars.css +114 -85
- package/dist/private/dropzone_vars.css.map +1 -1
- package/dist/private/fieldgroup_vars.css +54 -46
- package/dist/private/fieldgroup_vars.css.map +1 -1
- package/dist/private/fieldlabel_vars.css +183 -169
- package/dist/private/fieldlabel_vars.css.map +1 -1
- package/dist/private/helptext_vars.css +83 -69
- package/dist/private/helptext_vars.css.map +1 -1
- package/dist/private/icon_vars.css +52 -36
- package/dist/private/icon_vars.css.map +1 -1
- package/dist/private/illustratedmessage_vars.css +33 -31
- package/dist/private/illustratedmessage_vars.css.map +1 -1
- package/dist/private/inlinealert/InlineAlert.cjs.map +1 -1
- package/dist/private/inlinealert/InlineAlert.js.map +1 -1
- package/dist/private/inlinealert/InlineAlert.mjs.map +1 -1
- package/dist/private/inlinealert_vars.css +54 -46
- package/dist/private/inlinealert_vars.css.map +1 -1
- package/dist/private/inputgroup_vars.css +499 -319
- package/dist/private/inputgroup_vars.css.map +1 -1
- package/dist/private/label/Label.cjs.map +1 -1
- package/dist/private/label/Label.js.map +1 -1
- package/dist/private/label/Label.mjs.map +1 -1
- package/dist/private/link_vars.css +101 -85
- package/dist/private/link_vars.css.map +1 -1
- package/dist/private/list/ListView.cjs.map +1 -1
- package/dist/private/list/ListView.js.map +1 -1
- package/dist/private/list/ListView.mjs.map +1 -1
- package/dist/private/list/styles.css +425 -333
- package/dist/private/list/styles.css.map +1 -1
- package/dist/private/listbox/ListBoxBase.cjs.map +1 -1
- package/dist/private/listbox/ListBoxBase.js.map +1 -1
- package/dist/private/listbox/ListBoxBase.mjs.map +1 -1
- package/dist/private/menu/ActionMenu.cjs.map +1 -1
- package/dist/private/menu/ActionMenu.js.map +1 -1
- package/dist/private/menu/ActionMenu.mjs.map +1 -1
- package/dist/private/menu/Menu.cjs.map +1 -1
- package/dist/private/menu/Menu.js.map +1 -1
- package/dist/private/menu/Menu.mjs.map +1 -1
- package/dist/private/menu/MenuItem.cjs.map +1 -1
- package/dist/private/menu/MenuItem.js.map +1 -1
- package/dist/private/menu/MenuItem.mjs.map +1 -1
- package/dist/private/menu_vars.css +178 -160
- package/dist/private/menu_vars.css.map +1 -1
- package/dist/private/modal_vars.css +64 -54
- package/dist/private/modal_vars.css.map +1 -1
- package/dist/private/overlays/overlays.css +7 -5
- package/dist/private/overlays/overlays.css.map +1 -1
- package/dist/private/package.cjs +1 -1
- package/dist/private/package.cjs.map +1 -1
- package/dist/private/package.js +1 -1
- package/dist/private/package.js.map +1 -1
- package/dist/private/package.mjs +1 -1
- package/dist/private/package.mjs.map +1 -1
- package/dist/private/page_vars.css +54 -46
- package/dist/private/page_vars.css.map +1 -1
- package/dist/private/picker/Picker.cjs.map +1 -1
- package/dist/private/picker/Picker.js.map +1 -1
- package/dist/private/picker/Picker.mjs.map +1 -1
- package/dist/private/popover_vars.css +105 -83
- package/dist/private/popover_vars.css.map +1 -1
- package/dist/private/radio_vars.css +257 -163
- package/dist/private/radio_vars.css.map +1 -1
- package/dist/private/rule_vars.css +73 -63
- package/dist/private/rule_vars.css.map +1 -1
- package/dist/private/search_vars.css +95 -87
- package/dist/private/search_vars.css.map +1 -1
- package/dist/private/slider/RangeSlider.cjs.map +1 -1
- package/dist/private/slider/RangeSlider.js.map +1 -1
- package/dist/private/slider/RangeSlider.mjs.map +1 -1
- package/dist/private/slider_vars.css +516 -402
- package/dist/private/slider_vars.css.map +1 -1
- package/dist/private/statuslight_vars.css +76 -68
- package/dist/private/statuslight_vars.css.map +1 -1
- package/dist/private/steplist/StepListItem.cjs.map +1 -1
- package/dist/private/steplist/StepListItem.js.map +1 -1
- package/dist/private/steplist/StepListItem.mjs.map +1 -1
- package/dist/private/steplist_vars.css +371 -297
- package/dist/private/steplist_vars.css.map +1 -1
- package/dist/private/stepper_vars.css +557 -438
- package/dist/private/stepper_vars.css.map +1 -1
- package/dist/private/table/Resizer.cjs.map +1 -1
- package/dist/private/table/Resizer.js.map +1 -1
- package/dist/private/table/Resizer.mjs.map +1 -1
- package/dist/private/table/TableViewBase.cjs.map +1 -1
- package/dist/private/table/TableViewBase.js.map +1 -1
- package/dist/private/table/TableViewBase.mjs.map +1 -1
- package/dist/private/table/table.css +103 -95
- package/dist/private/table/table.css.map +1 -1
- package/dist/private/table_vars.css +458 -350
- package/dist/private/table_vars.css.map +1 -1
- package/dist/private/tabs_vars.css +319 -281
- package/dist/private/tabs_vars.css.map +1 -1
- package/dist/private/tag/TagGroup.cjs.map +1 -1
- package/dist/private/tag/TagGroup.js.map +1 -1
- package/dist/private/tag/TagGroup.mjs.map +1 -1
- package/dist/private/tags_vars.css +167 -149
- package/dist/private/tags_vars.css.map +1 -1
- package/dist/private/textfield/TextFieldBase.cjs.map +1 -1
- package/dist/private/textfield/TextFieldBase.js.map +1 -1
- package/dist/private/textfield/TextFieldBase.mjs.map +1 -1
- package/dist/private/textfield_vars.css +278 -250
- package/dist/private/textfield_vars.css.map +1 -1
- package/dist/private/toast/Toast.cjs.map +1 -1
- package/dist/private/toast/Toast.js.map +1 -1
- package/dist/private/toast/Toast.mjs.map +1 -1
- package/dist/private/toast/toastContainer.css +64 -56
- package/dist/private/toast/toastContainer.css.map +1 -1
- package/dist/private/toast_vars.css +5 -3
- package/dist/private/toast_vars.css.map +1 -1
- package/dist/private/toggle_vars.css +287 -211
- package/dist/private/toggle_vars.css.map +1 -1
- package/dist/private/tooltip_vars.css +150 -127
- package/dist/private/tooltip_vars.css.map +1 -1
- package/dist/private/tray_vars.css +54 -46
- package/dist/private/tray_vars.css.map +1 -1
- package/dist/private/typography_index.css +54 -46
- package/dist/private/typography_index.css.map +1 -1
- package/dist/private/underlay_vars.css +58 -50
- package/dist/private/underlay_vars.css.map +1 -1
- package/dist/private/well_vars.css +54 -46
- package/dist/private/well_vars.css.map +1 -1
- package/package.json +6 -6
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
.dwDZtq_i18nFontFamily {
|
|
2
2
|
font-synthesis: weight;
|
|
3
3
|
font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
4
|
-
}
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
5
|
+
&:lang(ar) {
|
|
6
|
+
font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
7
|
+
}
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
9
|
+
&:lang(he) {
|
|
10
|
+
font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
11
|
+
}
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
13
|
+
&:lang(zh) {
|
|
14
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
|
|
15
|
+
}
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
17
|
+
&:lang(zh-Hans) {
|
|
18
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
19
|
+
}
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
21
|
+
&:lang(zh-Hant) {
|
|
22
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
|
|
23
|
+
}
|
|
25
24
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
25
|
+
&:lang(zh-SG), &:lang(zh-CN) {
|
|
26
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
27
|
+
}
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
29
|
+
&:lang(ko) {
|
|
30
|
+
font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
|
|
31
|
+
}
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
&:lang(ja) {
|
|
34
|
+
font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
|
|
35
|
+
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.dwDZtq_spectrum-FocusRing-ring {
|
|
@@ -41,42 +41,50 @@
|
|
|
41
41
|
--spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
|
|
42
42
|
--spectrum-focus-ring-border-size: 0px;
|
|
43
43
|
--spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
|
|
44
|
-
}
|
|
45
44
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
&:after {
|
|
46
|
+
border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
|
|
47
|
+
content: "";
|
|
48
|
+
margin: calc(-1 * var(--spectrum-focus-ring-border-size));
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
|
|
52
51
|
margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
display: block;
|
|
53
|
+
position: absolute;
|
|
54
|
+
inset: 0;
|
|
55
|
+
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.dwDZtq_spectrum-FocusRing
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
.dwDZtq_spectrum-FocusRing {
|
|
59
|
+
&.dwDZtq_focus-ring {
|
|
60
|
+
&:after {
|
|
61
|
+
margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
|
|
62
|
+
box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
61
65
|
}
|
|
62
66
|
|
|
63
|
-
.dwDZtq_spectrum-FocusRing--quiet
|
|
64
|
-
|
|
65
|
-
|
|
67
|
+
.dwDZtq_spectrum-FocusRing--quiet {
|
|
68
|
+
&:after {
|
|
69
|
+
border-radius: 0;
|
|
70
|
+
}
|
|
66
71
|
|
|
67
|
-
|
|
68
|
-
|
|
72
|
+
&.dwDZtq_focus-ring {
|
|
73
|
+
&:after {
|
|
74
|
+
margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
|
|
69
75
|
0;
|
|
70
|
-
|
|
76
|
+
box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
71
79
|
}
|
|
72
80
|
|
|
73
81
|
@media (forced-colors: active) {
|
|
74
82
|
.dwDZtq_spectrum-FocusRing, .dwDZtq_spectrum-FocusRing-ring, .dwDZtq_spectrum-FocusRing--quiet {
|
|
75
83
|
--spectrum-high-contrast-focus-ring-color: Highlight;
|
|
76
|
-
}
|
|
77
84
|
|
|
78
|
-
|
|
79
|
-
|
|
85
|
+
&:after {
|
|
86
|
+
forced-color-adjust: none;
|
|
87
|
+
}
|
|
80
88
|
}
|
|
81
89
|
}
|
|
82
90
|
|
|
@@ -97,10 +105,10 @@
|
|
|
97
105
|
opacity: 1;
|
|
98
106
|
position: relative;
|
|
99
107
|
transform: scale(1);
|
|
100
|
-
}
|
|
101
108
|
|
|
102
|
-
|
|
103
|
-
|
|
109
|
+
&.dwDZtq_is-reversed {
|
|
110
|
+
transform: scale(-1);
|
|
111
|
+
}
|
|
104
112
|
}
|
|
105
113
|
|
|
106
114
|
.dwDZtq_spectrum-Breadcrumbs-item {
|
|
@@ -114,31 +122,33 @@
|
|
|
114
122
|
align-items: center;
|
|
115
123
|
display: inline-flex;
|
|
116
124
|
position: relative;
|
|
117
|
-
}
|
|
118
125
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
126
|
+
&:last-of-type {
|
|
127
|
+
font-weight: var(--spectrum-breadcrumb-title-text-font-weight, var(--spectrum-alias-body-text-font-weight-strong));
|
|
122
128
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}
|
|
129
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemSeparator {
|
|
130
|
+
display: none;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
126
133
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
134
|
+
&:not(:first-child) {
|
|
135
|
+
& > .dwDZtq_spectrum-Breadcrumbs-actionButton {
|
|
136
|
+
margin-inline-start: var(--spectrum-breadcrumb-button-gap, var(--spectrum-global-dimension-static-size-10));
|
|
137
|
+
}
|
|
138
|
+
}
|
|
130
139
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
140
|
+
& > .dwDZtq_spectrum-Breadcrumbs-actionButton {
|
|
141
|
+
margin-inline-end: var(--spectrum-breadcrumb-button-gap, var(--spectrum-global-dimension-static-size-10));
|
|
142
|
+
}
|
|
134
143
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
144
|
+
&:last-child {
|
|
145
|
+
overflow: hidden;
|
|
138
146
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
147
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
148
|
+
text-overflow: ellipsis;
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
142
152
|
}
|
|
143
153
|
|
|
144
154
|
.dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
@@ -154,14 +164,14 @@
|
|
|
154
164
|
margin-inline-end: var(--spectrum-breadcrumb-item-margin-right, var(--spectrum-global-dimension-static-size-10));
|
|
155
165
|
text-decoration: none;
|
|
156
166
|
position: relative;
|
|
157
|
-
}
|
|
158
167
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
168
|
+
&:not([aria-disabled]) {
|
|
169
|
+
cursor: pointer;
|
|
162
170
|
|
|
163
|
-
|
|
164
|
-
|
|
171
|
+
&.dwDZtq_is-hovered, &.dwDZtq_focus-ring {
|
|
172
|
+
text-decoration: underline;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
165
175
|
}
|
|
166
176
|
|
|
167
177
|
.dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-dragged .dwDZtq_spectrum-Breadcrumbs-itemLink:before, .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_focus-ring:before {
|
|
@@ -179,91 +189,105 @@
|
|
|
179
189
|
inset-inline-start: 0;
|
|
180
190
|
}
|
|
181
191
|
|
|
182
|
-
.dwDZtq_spectrum-Breadcrumbs--small
|
|
183
|
-
|
|
192
|
+
.dwDZtq_spectrum-Breadcrumbs--small {
|
|
193
|
+
& .dwDZtq_spectrum-Breadcrumbs-item {
|
|
194
|
+
font-size: var(--spectrum-breadcrumb-multiline-item-text-size, var(--spectrum-global-dimension-font-size-75));
|
|
195
|
+
}
|
|
184
196
|
}
|
|
185
197
|
|
|
186
|
-
.dwDZtq_spectrum-Breadcrumbs--medium
|
|
187
|
-
|
|
198
|
+
.dwDZtq_spectrum-Breadcrumbs--medium {
|
|
199
|
+
& .dwDZtq_spectrum-Breadcrumbs-item {
|
|
200
|
+
font-size: var(--spectrum-breadcrumb-compact-item-text-size, var(--spectrum-global-dimension-font-size-100));
|
|
201
|
+
}
|
|
188
202
|
}
|
|
189
203
|
|
|
190
204
|
.dwDZtq_spectrum-Breadcrumbs--multiline {
|
|
191
205
|
flex-wrap: wrap;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.dwDZtq_spectrum-Breadcrumbs--multiline .dwDZtq_spectrum-Breadcrumbs-item:last-of-type {
|
|
195
|
-
height: auto;
|
|
196
|
-
margin-top: var(--spectrum-breadcrumb-multiline-title-margin-top, var(--spectrum-global-dimension-static-size-0));
|
|
197
|
-
font-size: var(--spectrum-breadcrumb-multiline-title-text-size, var(--spectrum-global-dimension-font-size-300));
|
|
198
|
-
font-weight: var(--spectrum-breadcrumb-multiline-title-text-font-weight, var(--spectrum-alias-body-text-font-weight-strong));
|
|
199
|
-
line-height: var(--spectrum-breadcrumb-multiline-title-text-line-height, var(--spectrum-alias-heading-text-line-height));
|
|
200
|
-
flex: 0 100%;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.dwDZtq_spectrum-Breadcrumbs--multiline .dwDZtq_spectrum-Breadcrumbs-item:last-of-type .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
204
|
-
height: auto;
|
|
205
|
-
text-decoration: none;
|
|
206
|
-
}
|
|
207
206
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
207
|
+
& .dwDZtq_spectrum-Breadcrumbs-item {
|
|
208
|
+
&:last-of-type {
|
|
209
|
+
height: auto;
|
|
210
|
+
margin-top: var(--spectrum-breadcrumb-multiline-title-margin-top, var(--spectrum-global-dimension-static-size-0));
|
|
211
|
+
font-size: var(--spectrum-breadcrumb-multiline-title-text-size, var(--spectrum-global-dimension-font-size-300));
|
|
212
|
+
font-weight: var(--spectrum-breadcrumb-multiline-title-text-font-weight, var(--spectrum-alias-body-text-font-weight-strong));
|
|
213
|
+
line-height: var(--spectrum-breadcrumb-multiline-title-text-line-height, var(--spectrum-alias-heading-text-line-height));
|
|
214
|
+
flex: 0 100%;
|
|
215
|
+
|
|
216
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
217
|
+
height: auto;
|
|
218
|
+
text-decoration: none;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
& .dwDZtq_spectrum-Heading--pageTitle {
|
|
223
|
+
font-size: inherit;
|
|
224
|
+
font-weight: inherit;
|
|
225
|
+
margin: 0;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
212
228
|
}
|
|
213
229
|
|
|
214
230
|
.dwDZtq_spectrum-Breadcrumbs-item {
|
|
215
231
|
color: var(--spectrum-breadcrumb-text-color, var(--spectrum-alias-label-text-color));
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-dragged .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
219
|
-
color: var(--spectrum-breadcrumb-item-text-color-drop, var(--spectrum-alias-text-color-hover));
|
|
220
|
-
background-color: var(--spectrum-breadcrumb-item-background-color-drop, var(--spectrum-alias-highlight-selected));
|
|
221
|
-
}
|
|
222
232
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
233
|
+
&.dwDZtq_is-dragged {
|
|
234
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
235
|
+
color: var(--spectrum-breadcrumb-item-text-color-drop, var(--spectrum-alias-text-color-hover));
|
|
236
|
+
background-color: var(--spectrum-breadcrumb-item-background-color-drop, var(--spectrum-alias-highlight-selected));
|
|
226
237
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
}
|
|
238
|
+
&:before {
|
|
239
|
+
border-color: var(--spectrum-breadcrumb-item-border-color-drop, var(--spectrum-global-color-blue-500));
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
230
243
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
}
|
|
244
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemSeparator {
|
|
245
|
+
color: var(--spectrum-breadcrumb-ui-icon-color, var(--spectrum-global-color-gray-500));
|
|
246
|
+
}
|
|
234
247
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
}
|
|
248
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
249
|
+
color: inherit;
|
|
238
250
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
}
|
|
251
|
+
&.dwDZtq_is-hovered {
|
|
252
|
+
color: var(--spectrum-breadcrumb-text-color-hover, var(--spectrum-alias-text-color-hover));
|
|
253
|
+
}
|
|
242
254
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
}
|
|
255
|
+
&.dwDZtq_focus-ring {
|
|
256
|
+
color: var(--spectrum-breadcrumb-text-color-key-focus, var(--spectrum-alias-text-color-hover));
|
|
246
257
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
}
|
|
258
|
+
&:before {
|
|
259
|
+
border-color: var(--spectrum-breadcrumb-item-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
260
|
+
}
|
|
261
|
+
}
|
|
251
262
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
263
|
+
&:active {
|
|
264
|
+
color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
|
|
265
|
+
border-bottom: 0;
|
|
266
|
+
}
|
|
255
267
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
268
|
+
&.dwDZtq_is-disabled {
|
|
269
|
+
color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
270
|
+
}
|
|
271
|
+
}
|
|
259
272
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
}
|
|
273
|
+
&.dwDZtq_is-selected, &:last-of-type {
|
|
274
|
+
color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
|
|
275
|
+
}
|
|
263
276
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
277
|
+
&.dwDZtq_is-selected {
|
|
278
|
+
& ~ .dwDZtq_spectrum-Breadcrumb {
|
|
279
|
+
&:last-of-type {
|
|
280
|
+
color: var(--spectrum-breadcrumb-text-color, var(--spectrum-alias-label-text-color));
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
285
|
+
&.dwDZtq_focus-ring {
|
|
286
|
+
color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
|
|
287
|
+
border-bottom: 0;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
267
291
|
}
|
|
268
292
|
|
|
269
293
|
@media (forced-colors: active) {
|
|
@@ -277,18 +301,28 @@
|
|
|
277
301
|
--spectrum-breadcrumb-text-color-key-focus: LinkText;
|
|
278
302
|
--spectrum-breadcrumb-ui-icon-color: CanvasText;
|
|
279
303
|
--spectrum-label-text-color-disabled: GrayText;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-selected, .dwDZtq_spectrum-Breadcrumbs-item:last-of-type, :is(.dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-selected, .dwDZtq_spectrum-Breadcrumbs-item:last-of-type) .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_is-hovered {
|
|
283
|
-
color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink:active {
|
|
287
|
-
color: var(--spectrum-breadcrumb-text-color, var(--spectrum-alias-label-text-color));
|
|
288
|
-
}
|
|
289
304
|
|
|
290
|
-
|
|
291
|
-
|
|
305
|
+
&.dwDZtq_is-selected, &:last-of-type {
|
|
306
|
+
color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
|
|
307
|
+
|
|
308
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
309
|
+
&.dwDZtq_is-hovered {
|
|
310
|
+
color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
& .dwDZtq_spectrum-Breadcrumbs-itemLink {
|
|
316
|
+
&:active {
|
|
317
|
+
color: var(--spectrum-breadcrumb-text-color, var(--spectrum-alias-label-text-color));
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
&.dwDZtq_is-disabled {
|
|
321
|
+
&:active {
|
|
322
|
+
color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
}
|
|
292
326
|
}
|
|
293
327
|
}
|
|
294
328
|
/*# sourceMappingURL=breadcrumb_vars.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA
|
|
1
|
+
{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyPE","sources":["packages/@adobe/spectrum-css-temp/components/breadcrumb/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"breadcrumb_vars.css.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps, useButton} from 'react-aria/useButton';\n\nimport {classNames} from '../utils/classNames';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/button/*.json';\nimport {isAppleDevice, isFirefox} from 'react-aria/private/utils/platform';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\n// @ts-ignore\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '../text/Text';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\n/** @deprecated */\ntype LegacyButtonVariant = 'cta' | 'overBackground';\nexport interface SpectrumButtonProps<T extends ElementType = 'button'>\n extends Omit<AriaButtonProps<T>, 'onClick'>, StyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */\n variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant;\n /** The background style of the button. */\n style?: 'fill' | 'outline';\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'white' | 'black';\n /**\n * Whether to disable events immediately and display a loading spinner after a 1 second delay.\n */\n isPending?: boolean;\n /**\n * Whether the button should be displayed with a quiet style.\n *\n * @deprecated\n */\n isQuiet?: boolean;\n}\n\nfunction disablePendingProps(props) {\n // Don't allow interaction while isPending is true\n if (props.isPending) {\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n props.onClick = undefined;\n props.href = undefined;\n }\n return props;\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useSlotProps(props, 'button');\n props = disablePendingProps(props);\n let {\n elementType: Element = 'button',\n children,\n variant,\n style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n staticColor,\n isDisabled,\n isPending,\n autoFocus,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref);\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let [isFocused, onFocusChange] = useState(false);\n let {focusProps} = useFocus({onFocusChange, isDisabled});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n let {styleProps} = useStyleProps(otherProps);\n let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n // an aria label will block children and their labels from being read, this is undesirable for pending state\n let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n let backupButtonId = useId();\n let buttonId = buttonProps.id || backupButtonId;\n let iconId = useId();\n let textId = useId();\n let spinnerId = useId();\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n if (variant === 'cta') {\n variant = 'accent';\n } else if (variant === 'overBackground') {\n variant = 'primary';\n staticColor = 'white';\n }\n\n const isPendingAriaLiveLabel =\n `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n const isPendingAriaLiveLabelledby = hasAriaLabel\n ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId)\n : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n ariaLive = 'off';\n }\n\n let isPendingProps = isPending\n ? {\n onClick: e => {\n if (e.currentTarget instanceof HTMLButtonElement) {\n e.preventDefault();\n }\n }\n }\n : {\n // no-op.\n // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n onClick: () => {}\n };\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <Element\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n id={buttonId}\n ref={domRef}\n data-variant={variant}\n data-style={style}\n data-static-color={staticColor || undefined}\n aria-disabled={isPending ? 'true' : undefined}\n aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n className={classNames(\n styles,\n 'spectrum-Button',\n {\n 'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n 'is-disabled': isDisabled || isProgressVisible,\n 'is-active': isPressed,\n 'is-hovered': isHovered,\n 'spectrum-Button--pending': isProgressVisible\n },\n styleProps.className\n )}>\n <SlotProvider\n slots={{\n icon: {\n id: iconId,\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n id: textId,\n UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n }\n }}>\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {isPending && (\n <div\n aria-hidden=\"true\"\n style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n className={classNames(styles, 'spectrum-Button-circleLoader')}>\n <ProgressCircle\n aria-label={isPendingAriaLiveLabel}\n isIndeterminate\n size=\"S\"\n staticColor={staticColor}\n />\n </div>\n )}\n {isPending && (\n <>\n <div aria-live={isFocused ? ariaLive : 'off'}>\n {isProgressVisible && (\n <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n )}\n </div>\n {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n The aria-live may cause extra announcements in other browsers. */}\n <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n </>\n )}\n </SlotProvider>\n </Element>\n </FocusRing>\n );\n}) as <T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"Button.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps, useButton} from 'react-aria/useButton';\nimport {classNames} from '../utils/classNames';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/button/*.json';\nimport {isAppleDevice, isFirefox} from 'react-aria/private/utils/platform';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '../text/Text';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\n/** @deprecated */\ntype LegacyButtonVariant = 'cta' | 'overBackground';\nexport interface SpectrumButtonProps<T extends ElementType = 'button'>\n extends Omit<AriaButtonProps<T>, 'onClick'>, StyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */\n variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant;\n /** The background style of the button. */\n style?: 'fill' | 'outline';\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'white' | 'black';\n /**\n * Whether to disable events immediately and display a loading spinner after a 1 second delay.\n */\n isPending?: boolean;\n /**\n * Whether the button should be displayed with a quiet style.\n *\n * @deprecated\n */\n isQuiet?: boolean;\n}\n\nfunction disablePendingProps(props) {\n // Don't allow interaction while isPending is true\n if (props.isPending) {\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n props.onClick = undefined;\n props.href = undefined;\n }\n return props;\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useSlotProps(props, 'button');\n props = disablePendingProps(props);\n let {\n elementType: Element = 'button',\n children,\n variant,\n style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n staticColor,\n isDisabled,\n isPending,\n autoFocus,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref);\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let [isFocused, onFocusChange] = useState(false);\n let {focusProps} = useFocus({onFocusChange, isDisabled});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n let {styleProps} = useStyleProps(otherProps);\n let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n // an aria label will block children and their labels from being read, this is undesirable for pending state\n let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n let backupButtonId = useId();\n let buttonId = buttonProps.id || backupButtonId;\n let iconId = useId();\n let textId = useId();\n let spinnerId = useId();\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n if (variant === 'cta') {\n variant = 'accent';\n } else if (variant === 'overBackground') {\n variant = 'primary';\n staticColor = 'white';\n }\n\n const isPendingAriaLiveLabel =\n `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n const isPendingAriaLiveLabelledby = hasAriaLabel\n ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId)\n : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n ariaLive = 'off';\n }\n\n let isPendingProps = isPending\n ? {\n onClick: e => {\n if (e.currentTarget instanceof HTMLButtonElement) {\n e.preventDefault();\n }\n }\n }\n : {\n // no-op.\n // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n onClick: () => {}\n };\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <Element\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n id={buttonId}\n ref={domRef}\n data-variant={variant}\n data-style={style}\n data-static-color={staticColor || undefined}\n aria-disabled={isPending ? 'true' : undefined}\n aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n className={classNames(\n styles,\n 'spectrum-Button',\n {\n 'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n 'is-disabled': isDisabled || isProgressVisible,\n 'is-active': isPressed,\n 'is-hovered': isHovered,\n 'spectrum-Button--pending': isProgressVisible\n },\n styleProps.className\n )}>\n <SlotProvider\n slots={{\n icon: {\n id: iconId,\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n id: textId,\n UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n }\n }}>\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {isPending && (\n <div\n aria-hidden=\"true\"\n style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n className={classNames(styles, 'spectrum-Button-circleLoader')}>\n <ProgressCircle\n aria-label={isPendingAriaLiveLabel}\n isIndeterminate\n size=\"S\"\n staticColor={staticColor}\n />\n </div>\n )}\n {isPending && (\n <>\n <div aria-live={isFocused ? ariaLive : 'off'}>\n {isProgressVisible && (\n <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n )}\n </div>\n {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n The aria-live may cause extra announcements in other browsers. */}\n <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n </>\n )}\n </SlotProvider>\n </Element>\n </FocusRing>\n );\n}) as <T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"Button.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps, useButton} from 'react-aria/useButton';\n\nimport {classNames} from '../utils/classNames';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/button/*.json';\nimport {isAppleDevice, isFirefox} from 'react-aria/private/utils/platform';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\n// @ts-ignore\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '../text/Text';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\n/** @deprecated */\ntype LegacyButtonVariant = 'cta' | 'overBackground';\nexport interface SpectrumButtonProps<T extends ElementType = 'button'>\n extends Omit<AriaButtonProps<T>, 'onClick'>, StyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */\n variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant;\n /** The background style of the button. */\n style?: 'fill' | 'outline';\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'white' | 'black';\n /**\n * Whether to disable events immediately and display a loading spinner after a 1 second delay.\n */\n isPending?: boolean;\n /**\n * Whether the button should be displayed with a quiet style.\n *\n * @deprecated\n */\n isQuiet?: boolean;\n}\n\nfunction disablePendingProps(props) {\n // Don't allow interaction while isPending is true\n if (props.isPending) {\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n props.onClick = undefined;\n props.href = undefined;\n }\n return props;\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useSlotProps(props, 'button');\n props = disablePendingProps(props);\n let {\n elementType: Element = 'button',\n children,\n variant,\n style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n staticColor,\n isDisabled,\n isPending,\n autoFocus,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref);\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let [isFocused, onFocusChange] = useState(false);\n let {focusProps} = useFocus({onFocusChange, isDisabled});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n let {styleProps} = useStyleProps(otherProps);\n let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n // an aria label will block children and their labels from being read, this is undesirable for pending state\n let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n let backupButtonId = useId();\n let buttonId = buttonProps.id || backupButtonId;\n let iconId = useId();\n let textId = useId();\n let spinnerId = useId();\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n if (variant === 'cta') {\n variant = 'accent';\n } else if (variant === 'overBackground') {\n variant = 'primary';\n staticColor = 'white';\n }\n\n const isPendingAriaLiveLabel =\n `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n const isPendingAriaLiveLabelledby = hasAriaLabel\n ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId)\n : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n ariaLive = 'off';\n }\n\n let isPendingProps = isPending\n ? {\n onClick: e => {\n if (e.currentTarget instanceof HTMLButtonElement) {\n e.preventDefault();\n }\n }\n }\n : {\n // no-op.\n // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n onClick: () => {}\n };\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <Element\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n id={buttonId}\n ref={domRef}\n data-variant={variant}\n data-style={style}\n data-static-color={staticColor || undefined}\n aria-disabled={isPending ? 'true' : undefined}\n aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n className={classNames(\n styles,\n 'spectrum-Button',\n {\n 'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n 'is-disabled': isDisabled || isProgressVisible,\n 'is-active': isPressed,\n 'is-hovered': isHovered,\n 'spectrum-Button--pending': isProgressVisible\n },\n styleProps.className\n )}>\n <SlotProvider\n slots={{\n icon: {\n id: iconId,\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n id: textId,\n UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n }\n }}>\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {isPending && (\n <div\n aria-hidden=\"true\"\n style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n className={classNames(styles, 'spectrum-Button-circleLoader')}>\n <ProgressCircle\n aria-label={isPendingAriaLiveLabel}\n isIndeterminate\n size=\"S\"\n staticColor={staticColor}\n />\n </div>\n )}\n {isPending && (\n <>\n <div aria-live={isFocused ? ariaLive : 'off'}>\n {isProgressVisible && (\n <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n )}\n </div>\n {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n The aria-live may cause extra announcements in other browsers. */}\n <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n </>\n )}\n </SlotProvider>\n </Element>\n </FocusRing>\n );\n}) as <T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"Button.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps, useButton} from 'react-aria/useButton';\nimport {classNames} from '../utils/classNames';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/button/*.json';\nimport {isAppleDevice, isFirefox} from 'react-aria/private/utils/platform';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '../text/Text';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\n/** @deprecated */\ntype LegacyButtonVariant = 'cta' | 'overBackground';\nexport interface SpectrumButtonProps<T extends ElementType = 'button'>\n extends Omit<AriaButtonProps<T>, 'onClick'>, StyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */\n variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant;\n /** The background style of the button. */\n style?: 'fill' | 'outline';\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'white' | 'black';\n /**\n * Whether to disable events immediately and display a loading spinner after a 1 second delay.\n */\n isPending?: boolean;\n /**\n * Whether the button should be displayed with a quiet style.\n *\n * @deprecated\n */\n isQuiet?: boolean;\n}\n\nfunction disablePendingProps(props) {\n // Don't allow interaction while isPending is true\n if (props.isPending) {\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n props.onClick = undefined;\n props.href = undefined;\n }\n return props;\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T>,\n ref: FocusableRef<HTMLElement>\n) {\n props = useProviderProps(props);\n props = useSlotProps(props, 'button');\n props = disablePendingProps(props);\n let {\n elementType: Element = 'button',\n children,\n variant,\n style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n staticColor,\n isDisabled,\n isPending,\n autoFocus,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref);\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let [isFocused, onFocusChange] = useState(false);\n let {focusProps} = useFocus({onFocusChange, isDisabled});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n let {styleProps} = useStyleProps(otherProps);\n let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n // an aria label will block children and their labels from being read, this is undesirable for pending state\n let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n let backupButtonId = useId();\n let buttonId = buttonProps.id || backupButtonId;\n let iconId = useId();\n let textId = useId();\n let spinnerId = useId();\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n if (variant === 'cta') {\n variant = 'accent';\n } else if (variant === 'overBackground') {\n variant = 'primary';\n staticColor = 'white';\n }\n\n const isPendingAriaLiveLabel =\n `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n const isPendingAriaLiveLabelledby = hasAriaLabel\n ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId)\n : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n ariaLive = 'off';\n }\n\n let isPendingProps = isPending\n ? {\n onClick: e => {\n if (e.currentTarget instanceof HTMLButtonElement) {\n e.preventDefault();\n }\n }\n }\n : {\n // no-op.\n // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n onClick: () => {}\n };\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <Element\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n id={buttonId}\n ref={domRef}\n data-variant={variant}\n data-style={style}\n data-static-color={staticColor || undefined}\n aria-disabled={isPending ? 'true' : undefined}\n aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n className={classNames(\n styles,\n 'spectrum-Button',\n {\n 'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n 'is-disabled': isDisabled || isProgressVisible,\n 'is-active': isPressed,\n 'is-hovered': isHovered,\n 'spectrum-Button--pending': isProgressVisible\n },\n styleProps.className\n )}>\n <SlotProvider\n slots={{\n icon: {\n id: iconId,\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n id: textId,\n UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n }\n }}>\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {isPending && (\n <div\n aria-hidden=\"true\"\n style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n className={classNames(styles, 'spectrum-Button-circleLoader')}>\n <ProgressCircle\n aria-label={isPendingAriaLiveLabel}\n isIndeterminate\n size=\"S\"\n staticColor={staticColor}\n />\n </div>\n )}\n {isPending && (\n <>\n <div aria-live={isFocused ? ariaLive : 'off'}>\n {isProgressVisible && (\n <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n )}\n </div>\n {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n The aria-live may cause extra announcements in other browsers. */}\n <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n </>\n )}\n </SlotProvider>\n </Element>\n </FocusRing>\n );\n}) as <T extends ElementType = 'button'>(\n props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"Button.js.map"}
|