@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.
Files changed (232) hide show
  1. package/dist/private/accordion_vars.css +66 -48
  2. package/dist/private/accordion_vars.css.map +1 -1
  3. package/dist/private/actionbar/ActionBar.cjs.map +1 -1
  4. package/dist/private/actionbar/ActionBar.js.map +1 -1
  5. package/dist/private/actionbar/ActionBar.mjs.map +1 -1
  6. package/dist/private/actionbar/actionbar.css +59 -57
  7. package/dist/private/actionbar/actionbar.css.map +1 -1
  8. package/dist/private/actiongroup/ActionGroup.cjs +1 -1
  9. package/dist/private/actiongroup/ActionGroup.cjs.map +1 -1
  10. package/dist/private/actiongroup/ActionGroup.js +1 -1
  11. package/dist/private/actiongroup/ActionGroup.js.map +1 -1
  12. package/dist/private/actiongroup/ActionGroup.mjs +1 -1
  13. package/dist/private/actiongroup/ActionGroup.mjs.map +1 -1
  14. package/dist/private/actiongroup_vars.css +124 -114
  15. package/dist/private/actiongroup_vars.css.map +1 -1
  16. package/dist/private/autocomplete/MobileSearchAutocomplete.cjs.map +1 -1
  17. package/dist/private/autocomplete/MobileSearchAutocomplete.js.map +1 -1
  18. package/dist/private/autocomplete/MobileSearchAutocomplete.mjs.map +1 -1
  19. package/dist/private/autocomplete/SearchAutocomplete.cjs.map +1 -1
  20. package/dist/private/autocomplete/SearchAutocomplete.js.map +1 -1
  21. package/dist/private/autocomplete/SearchAutocomplete.mjs.map +1 -1
  22. package/dist/private/autocomplete/searchautocomplete.css +6 -6
  23. package/dist/private/autocomplete/searchautocomplete.css.map +1 -1
  24. package/dist/private/avatar_vars.css +12 -7
  25. package/dist/private/avatar_vars.css.map +1 -1
  26. package/dist/private/badge_vars.css +76 -68
  27. package/dist/private/badge_vars.css.map +1 -1
  28. package/dist/private/barloader_vars.css +132 -112
  29. package/dist/private/barloader_vars.css.map +1 -1
  30. package/dist/private/breadcrumb_vars.css +182 -148
  31. package/dist/private/breadcrumb_vars.css.map +1 -1
  32. package/dist/private/button/Button.cjs.map +1 -1
  33. package/dist/private/button/Button.js.map +1 -1
  34. package/dist/private/button/Button.mjs.map +1 -1
  35. package/dist/private/button_vars.css +822 -785
  36. package/dist/private/button_vars.css.map +1 -1
  37. package/dist/private/buttongroup_vars.css +25 -24
  38. package/dist/private/buttongroup_vars.css.map +1 -1
  39. package/dist/private/buttongroup_vars_css.cjs +5 -5
  40. package/dist/private/buttongroup_vars_css.mjs +5 -5
  41. package/dist/private/calendar/CalendarBase.cjs.map +1 -1
  42. package/dist/private/calendar/CalendarBase.js.map +1 -1
  43. package/dist/private/calendar/CalendarBase.mjs.map +1 -1
  44. package/dist/private/calendar_vars.css +280 -256
  45. package/dist/private/calendar_vars.css.map +1 -1
  46. package/dist/private/card/BaseLayout.cjs +2 -2
  47. package/dist/private/card/BaseLayout.cjs.map +1 -1
  48. package/dist/private/card/BaseLayout.js +2 -2
  49. package/dist/private/card/BaseLayout.js.map +1 -1
  50. package/dist/private/card/BaseLayout.mjs +2 -2
  51. package/dist/private/card/BaseLayout.mjs.map +1 -1
  52. package/dist/private/card/CardView.cjs.map +1 -1
  53. package/dist/private/card/CardView.js.map +1 -1
  54. package/dist/private/card/CardView.mjs.map +1 -1
  55. package/dist/private/card_vars.css +995 -907
  56. package/dist/private/card_vars.css.map +1 -1
  57. package/dist/private/checkbox_vars.css +318 -219
  58. package/dist/private/checkbox_vars.css.map +1 -1
  59. package/dist/private/circleloader_vars.css +99 -85
  60. package/dist/private/circleloader_vars.css.map +1 -1
  61. package/dist/private/color/ColorEditor.cjs.map +1 -1
  62. package/dist/private/color/ColorEditor.js.map +1 -1
  63. package/dist/private/color/ColorEditor.mjs.map +1 -1
  64. package/dist/private/color/ColorPicker.css +28 -14
  65. package/dist/private/color/ColorPicker.css.map +1 -1
  66. package/dist/private/color/colorfield.css +3 -3
  67. package/dist/private/color/colorfield.css.map +1 -1
  68. package/dist/private/colorarea_vars.css +36 -29
  69. package/dist/private/colorarea_vars.css.map +1 -1
  70. package/dist/private/colorhandle_vars.css +23 -23
  71. package/dist/private/colorloupe_vars.css +5 -5
  72. package/dist/private/colorloupe_vars.css.map +1 -1
  73. package/dist/private/colorslider_vars.css +34 -34
  74. package/dist/private/colorslider_vars.css.map +1 -1
  75. package/dist/private/colorwheel_vars.css +44 -38
  76. package/dist/private/colorwheel_vars.css.map +1 -1
  77. package/dist/private/combobox/ComboBox.cjs.map +1 -1
  78. package/dist/private/combobox/ComboBox.js.map +1 -1
  79. package/dist/private/combobox/ComboBox.mjs.map +1 -1
  80. package/dist/private/combobox/MobileComboBox.cjs.map +1 -1
  81. package/dist/private/combobox/MobileComboBox.js.map +1 -1
  82. package/dist/private/combobox/MobileComboBox.mjs.map +1 -1
  83. package/dist/private/combobox/combobox.css +6 -6
  84. package/dist/private/combobox/combobox.css.map +1 -1
  85. package/dist/private/contextualhelp/ContextualHelp.cjs.map +1 -1
  86. package/dist/private/contextualhelp/ContextualHelp.js.map +1 -1
  87. package/dist/private/contextualhelp/ContextualHelp.mjs.map +1 -1
  88. package/dist/private/contextualhelp_vars.css +13 -13
  89. package/dist/private/contextualhelp_vars.css.map +1 -1
  90. package/dist/private/datepicker/DatePicker.cjs.map +1 -1
  91. package/dist/private/datepicker/DatePicker.js.map +1 -1
  92. package/dist/private/datepicker/DatePicker.mjs.map +1 -1
  93. package/dist/private/datepicker/DateRangePicker.cjs.map +1 -1
  94. package/dist/private/datepicker/DateRangePicker.js.map +1 -1
  95. package/dist/private/datepicker/DateRangePicker.mjs.map +1 -1
  96. package/dist/private/datepicker/styles.css +33 -31
  97. package/dist/private/datepicker/styles.css.map +1 -1
  98. package/dist/private/dialog/AlertDialog.cjs.map +1 -1
  99. package/dist/private/dialog/AlertDialog.js.map +1 -1
  100. package/dist/private/dialog/AlertDialog.mjs.map +1 -1
  101. package/dist/private/dialog/Dialog.cjs.map +1 -1
  102. package/dist/private/dialog/Dialog.js.map +1 -1
  103. package/dist/private/dialog/Dialog.mjs.map +1 -1
  104. package/dist/private/dialog_vars.css +216 -180
  105. package/dist/private/dialog_vars.css.map +1 -1
  106. package/dist/private/dropdown_vars.css +150 -114
  107. package/dist/private/dropdown_vars.css.map +1 -1
  108. package/dist/private/dropzone/DropZone.cjs.map +1 -1
  109. package/dist/private/dropzone/DropZone.js.map +1 -1
  110. package/dist/private/dropzone/DropZone.mjs.map +1 -1
  111. package/dist/private/dropzone_vars.css +114 -85
  112. package/dist/private/dropzone_vars.css.map +1 -1
  113. package/dist/private/fieldgroup_vars.css +54 -46
  114. package/dist/private/fieldgroup_vars.css.map +1 -1
  115. package/dist/private/fieldlabel_vars.css +183 -169
  116. package/dist/private/fieldlabel_vars.css.map +1 -1
  117. package/dist/private/helptext_vars.css +83 -69
  118. package/dist/private/helptext_vars.css.map +1 -1
  119. package/dist/private/icon_vars.css +52 -36
  120. package/dist/private/icon_vars.css.map +1 -1
  121. package/dist/private/illustratedmessage_vars.css +33 -31
  122. package/dist/private/illustratedmessage_vars.css.map +1 -1
  123. package/dist/private/inlinealert/InlineAlert.cjs.map +1 -1
  124. package/dist/private/inlinealert/InlineAlert.js.map +1 -1
  125. package/dist/private/inlinealert/InlineAlert.mjs.map +1 -1
  126. package/dist/private/inlinealert_vars.css +54 -46
  127. package/dist/private/inlinealert_vars.css.map +1 -1
  128. package/dist/private/inputgroup_vars.css +499 -319
  129. package/dist/private/inputgroup_vars.css.map +1 -1
  130. package/dist/private/label/Label.cjs.map +1 -1
  131. package/dist/private/label/Label.js.map +1 -1
  132. package/dist/private/label/Label.mjs.map +1 -1
  133. package/dist/private/link_vars.css +101 -85
  134. package/dist/private/link_vars.css.map +1 -1
  135. package/dist/private/list/ListView.cjs.map +1 -1
  136. package/dist/private/list/ListView.js.map +1 -1
  137. package/dist/private/list/ListView.mjs.map +1 -1
  138. package/dist/private/list/styles.css +425 -333
  139. package/dist/private/list/styles.css.map +1 -1
  140. package/dist/private/listbox/ListBoxBase.cjs.map +1 -1
  141. package/dist/private/listbox/ListBoxBase.js.map +1 -1
  142. package/dist/private/listbox/ListBoxBase.mjs.map +1 -1
  143. package/dist/private/menu/ActionMenu.cjs.map +1 -1
  144. package/dist/private/menu/ActionMenu.js.map +1 -1
  145. package/dist/private/menu/ActionMenu.mjs.map +1 -1
  146. package/dist/private/menu/Menu.cjs.map +1 -1
  147. package/dist/private/menu/Menu.js.map +1 -1
  148. package/dist/private/menu/Menu.mjs.map +1 -1
  149. package/dist/private/menu/MenuItem.cjs.map +1 -1
  150. package/dist/private/menu/MenuItem.js.map +1 -1
  151. package/dist/private/menu/MenuItem.mjs.map +1 -1
  152. package/dist/private/menu_vars.css +178 -160
  153. package/dist/private/menu_vars.css.map +1 -1
  154. package/dist/private/modal_vars.css +64 -54
  155. package/dist/private/modal_vars.css.map +1 -1
  156. package/dist/private/overlays/overlays.css +7 -5
  157. package/dist/private/overlays/overlays.css.map +1 -1
  158. package/dist/private/package.cjs +1 -1
  159. package/dist/private/package.cjs.map +1 -1
  160. package/dist/private/package.js +1 -1
  161. package/dist/private/package.js.map +1 -1
  162. package/dist/private/package.mjs +1 -1
  163. package/dist/private/package.mjs.map +1 -1
  164. package/dist/private/page_vars.css +54 -46
  165. package/dist/private/page_vars.css.map +1 -1
  166. package/dist/private/picker/Picker.cjs.map +1 -1
  167. package/dist/private/picker/Picker.js.map +1 -1
  168. package/dist/private/picker/Picker.mjs.map +1 -1
  169. package/dist/private/popover_vars.css +105 -83
  170. package/dist/private/popover_vars.css.map +1 -1
  171. package/dist/private/radio_vars.css +257 -163
  172. package/dist/private/radio_vars.css.map +1 -1
  173. package/dist/private/rule_vars.css +73 -63
  174. package/dist/private/rule_vars.css.map +1 -1
  175. package/dist/private/search_vars.css +95 -87
  176. package/dist/private/search_vars.css.map +1 -1
  177. package/dist/private/slider/RangeSlider.cjs.map +1 -1
  178. package/dist/private/slider/RangeSlider.js.map +1 -1
  179. package/dist/private/slider/RangeSlider.mjs.map +1 -1
  180. package/dist/private/slider_vars.css +516 -402
  181. package/dist/private/slider_vars.css.map +1 -1
  182. package/dist/private/statuslight_vars.css +76 -68
  183. package/dist/private/statuslight_vars.css.map +1 -1
  184. package/dist/private/steplist/StepListItem.cjs.map +1 -1
  185. package/dist/private/steplist/StepListItem.js.map +1 -1
  186. package/dist/private/steplist/StepListItem.mjs.map +1 -1
  187. package/dist/private/steplist_vars.css +371 -297
  188. package/dist/private/steplist_vars.css.map +1 -1
  189. package/dist/private/stepper_vars.css +557 -438
  190. package/dist/private/stepper_vars.css.map +1 -1
  191. package/dist/private/table/Resizer.cjs.map +1 -1
  192. package/dist/private/table/Resizer.js.map +1 -1
  193. package/dist/private/table/Resizer.mjs.map +1 -1
  194. package/dist/private/table/TableViewBase.cjs.map +1 -1
  195. package/dist/private/table/TableViewBase.js.map +1 -1
  196. package/dist/private/table/TableViewBase.mjs.map +1 -1
  197. package/dist/private/table/table.css +103 -95
  198. package/dist/private/table/table.css.map +1 -1
  199. package/dist/private/table_vars.css +458 -350
  200. package/dist/private/table_vars.css.map +1 -1
  201. package/dist/private/tabs_vars.css +319 -281
  202. package/dist/private/tabs_vars.css.map +1 -1
  203. package/dist/private/tag/TagGroup.cjs.map +1 -1
  204. package/dist/private/tag/TagGroup.js.map +1 -1
  205. package/dist/private/tag/TagGroup.mjs.map +1 -1
  206. package/dist/private/tags_vars.css +167 -149
  207. package/dist/private/tags_vars.css.map +1 -1
  208. package/dist/private/textfield/TextFieldBase.cjs.map +1 -1
  209. package/dist/private/textfield/TextFieldBase.js.map +1 -1
  210. package/dist/private/textfield/TextFieldBase.mjs.map +1 -1
  211. package/dist/private/textfield_vars.css +278 -250
  212. package/dist/private/textfield_vars.css.map +1 -1
  213. package/dist/private/toast/Toast.cjs.map +1 -1
  214. package/dist/private/toast/Toast.js.map +1 -1
  215. package/dist/private/toast/Toast.mjs.map +1 -1
  216. package/dist/private/toast/toastContainer.css +64 -56
  217. package/dist/private/toast/toastContainer.css.map +1 -1
  218. package/dist/private/toast_vars.css +5 -3
  219. package/dist/private/toast_vars.css.map +1 -1
  220. package/dist/private/toggle_vars.css +287 -211
  221. package/dist/private/toggle_vars.css.map +1 -1
  222. package/dist/private/tooltip_vars.css +150 -127
  223. package/dist/private/tooltip_vars.css.map +1 -1
  224. package/dist/private/tray_vars.css +54 -46
  225. package/dist/private/tray_vars.css.map +1 -1
  226. package/dist/private/typography_index.css +54 -46
  227. package/dist/private/typography_index.css.map +1 -1
  228. package/dist/private/underlay_vars.css +58 -50
  229. package/dist/private/underlay_vars.css.map +1 -1
  230. package/dist/private/well_vars.css +54 -46
  231. package/dist/private/well_vars.css.map +1 -1
  232. 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
- .dwDZtq_i18nFontFamily:lang(ar) {
7
- font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
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
- .dwDZtq_i18nFontFamily:lang(he) {
11
- font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
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
- .dwDZtq_i18nFontFamily:lang(zh) {
15
- font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
16
- }
13
+ &:lang(zh) {
14
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
15
+ }
17
16
 
18
- .dwDZtq_i18nFontFamily:lang(zh-Hans) {
19
- font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
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
- .dwDZtq_i18nFontFamily:lang(zh-Hant) {
23
- font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
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
- .dwDZtq_i18nFontFamily:lang(zh-SG), .dwDZtq_i18nFontFamily:lang(zh-CN) {
27
- font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
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
- .dwDZtq_i18nFontFamily:lang(ko) {
31
- font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
32
- }
29
+ &:lang(ko) {
30
+ font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
31
+ }
33
32
 
34
- .dwDZtq_i18nFontFamily:lang(ja) {
35
- font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
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
- .dwDZtq_spectrum-FocusRing-ring:after {
47
- border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
48
- content: "";
49
- margin: calc(-1 * var(--spectrum-focus-ring-border-size));
50
- pointer-events: none;
51
- transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
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
- display: block;
54
- position: absolute;
55
- inset: 0;
52
+ display: block;
53
+ position: absolute;
54
+ inset: 0;
55
+ }
56
56
  }
57
57
 
58
- .dwDZtq_spectrum-FocusRing.dwDZtq_focus-ring:after {
59
- margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
60
- box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
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:after {
64
- border-radius: 0;
65
- }
67
+ .dwDZtq_spectrum-FocusRing--quiet {
68
+ &:after {
69
+ border-radius: 0;
70
+ }
66
71
 
67
- .dwDZtq_spectrum-FocusRing--quiet.dwDZtq_focus-ring:after {
68
- margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
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
- box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
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
- :is(.dwDZtq_spectrum-FocusRing, .dwDZtq_spectrum-FocusRing-ring, .dwDZtq_spectrum-FocusRing--quiet):after {
79
- forced-color-adjust: none;
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
- .dwDZtq_spectrum-Breadcrumbs-itemSeparator.dwDZtq_is-reversed {
103
- transform: scale(-1);
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
- .dwDZtq_spectrum-Breadcrumbs-item:last-of-type {
120
- font-weight: var(--spectrum-breadcrumb-title-text-font-weight, var(--spectrum-alias-body-text-font-weight-strong));
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
- .dwDZtq_spectrum-Breadcrumbs-item:last-of-type .dwDZtq_spectrum-Breadcrumbs-itemSeparator {
124
- display: none;
125
- }
129
+ & .dwDZtq_spectrum-Breadcrumbs-itemSeparator {
130
+ display: none;
131
+ }
132
+ }
126
133
 
127
- .dwDZtq_spectrum-Breadcrumbs-item:not(:first-child) > .dwDZtq_spectrum-Breadcrumbs-actionButton {
128
- margin-inline-start: var(--spectrum-breadcrumb-button-gap, var(--spectrum-global-dimension-static-size-10));
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
- .dwDZtq_spectrum-Breadcrumbs-item > .dwDZtq_spectrum-Breadcrumbs-actionButton {
132
- margin-inline-end: var(--spectrum-breadcrumb-button-gap, var(--spectrum-global-dimension-static-size-10));
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
- .dwDZtq_spectrum-Breadcrumbs-item:last-child {
136
- overflow: hidden;
137
- }
144
+ &:last-child {
145
+ overflow: hidden;
138
146
 
139
- .dwDZtq_spectrum-Breadcrumbs-item:last-child .dwDZtq_spectrum-Breadcrumbs-itemLink {
140
- text-overflow: ellipsis;
141
- overflow: hidden;
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
- .dwDZtq_spectrum-Breadcrumbs-itemLink:not([aria-disabled]) {
160
- cursor: pointer;
161
- }
168
+ &:not([aria-disabled]) {
169
+ cursor: pointer;
162
170
 
163
- .dwDZtq_spectrum-Breadcrumbs-itemLink:not([aria-disabled]).dwDZtq_is-hovered, .dwDZtq_spectrum-Breadcrumbs-itemLink:not([aria-disabled]).dwDZtq_focus-ring {
164
- text-decoration: underline;
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 .dwDZtq_spectrum-Breadcrumbs-item {
183
- font-size: var(--spectrum-breadcrumb-multiline-item-text-size, var(--spectrum-global-dimension-font-size-75));
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 .dwDZtq_spectrum-Breadcrumbs-item {
187
- font-size: var(--spectrum-breadcrumb-compact-item-text-size, var(--spectrum-global-dimension-font-size-100));
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
- .dwDZtq_spectrum-Breadcrumbs--multiline .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Heading--pageTitle {
209
- font-size: inherit;
210
- font-weight: inherit;
211
- margin: 0;
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
- .dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-dragged .dwDZtq_spectrum-Breadcrumbs-itemLink:before {
224
- border-color: var(--spectrum-breadcrumb-item-border-color-drop, var(--spectrum-global-color-blue-500));
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
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemSeparator {
228
- color: var(--spectrum-breadcrumb-ui-icon-color, var(--spectrum-global-color-gray-500));
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
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink {
232
- color: inherit;
233
- }
244
+ & .dwDZtq_spectrum-Breadcrumbs-itemSeparator {
245
+ color: var(--spectrum-breadcrumb-ui-icon-color, var(--spectrum-global-color-gray-500));
246
+ }
234
247
 
235
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_is-hovered {
236
- color: var(--spectrum-breadcrumb-text-color-hover, var(--spectrum-alias-text-color-hover));
237
- }
248
+ & .dwDZtq_spectrum-Breadcrumbs-itemLink {
249
+ color: inherit;
238
250
 
239
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_focus-ring {
240
- color: var(--spectrum-breadcrumb-text-color-key-focus, var(--spectrum-alias-text-color-hover));
241
- }
251
+ &.dwDZtq_is-hovered {
252
+ color: var(--spectrum-breadcrumb-text-color-hover, var(--spectrum-alias-text-color-hover));
253
+ }
242
254
 
243
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_focus-ring:before {
244
- border-color: var(--spectrum-breadcrumb-item-border-color-key-focus, var(--spectrum-alias-border-color-focus));
245
- }
255
+ &.dwDZtq_focus-ring {
256
+ color: var(--spectrum-breadcrumb-text-color-key-focus, var(--spectrum-alias-text-color-hover));
246
257
 
247
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink:active {
248
- color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
249
- border-bottom: 0;
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
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_is-disabled {
253
- color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
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
- .dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-selected, .dwDZtq_spectrum-Breadcrumbs-item:last-of-type {
257
- color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
258
- }
268
+ &.dwDZtq_is-disabled {
269
+ color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
270
+ }
271
+ }
259
272
 
260
- .dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-selected ~ .dwDZtq_spectrum-Breadcrumb:last-of-type {
261
- color: var(--spectrum-breadcrumb-text-color, var(--spectrum-alias-label-text-color));
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
- .dwDZtq_spectrum-Breadcrumbs-item.dwDZtq_is-selected .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_focus-ring {
265
- color: var(--spectrum-breadcrumb-text-color-down, var(--spectrum-alias-text-color-down));
266
- border-bottom: 0;
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
- .dwDZtq_spectrum-Breadcrumbs-item .dwDZtq_spectrum-Breadcrumbs-itemLink.dwDZtq_is-disabled:active {
291
- color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
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;;;;;AAKE;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAQA;;;;AAIA;;;;AAMF;;;;;;;;AAUE","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
+ {"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":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;AA+CD,SAAS,0CAAoB,KAAK;IAChC,kDAAkD;IAClD,IAAI,MAAM,SAAS,EAAE;QACnB,MAAM,OAAO,GAAG;QAChB,MAAM,YAAY,GAAG;QACrB,MAAM,UAAU,GAAG;QACnB,MAAM,aAAa,GAAG;QACtB,MAAM,SAAS,GAAG;QAClB,MAAM,SAAS,GAAG;QAClB,MAAM,OAAO,GAAG;QAChB,MAAM,OAAO,GAAG;QAChB,MAAM,IAAI,GAAG;IACf;IACA,OAAO;AACT;AAOO,MAAM,0DAAS,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,OAC9C,KAA6B,EAC7B,GAA8B;QA8DzB;IA5DL,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE,OAAO;IAC5B,QAAQ,0CAAoB;IAC5B,IAAI,EACF,aAAa,UAAU,QAAQ,YAC/B,QAAQ,WACR,OAAO,SACP,QAAQ,YAAY,YAAY,YAAY,QAAQ,SAAS,wBAC7D,WAAW,cACX,UAAU,aACV,SAAS,aACT,SAAS,EACT,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE,OAAO;IAChD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,CAAC,WAAW,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;IAC1C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;uBAAC;oBAAe;IAAU;IACtD,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAChE,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAC,CAAC,EAAE,CAAA,GAAA,mDAAK,CAAC,CAAC,wBAAwB,EAAE,EAAE;IAClE,IAAI,UAAU,CAAA,GAAA,yCAAU,EAAE,CAAC,CAAC,EAAE,CAAA,GAAA,mDAAK,CAAC,CAAC,gBAAgB,EAAE,EAAE;IACzD,4GAA4G;IAC5G,IAAI,eAAe,CAAC,CAAC,WAAW,CAAC,aAAa,IAAI,CAAC,CAAC,WAAW,CAAC,kBAAkB;IAClF,IAAI,CAAC,mBAAmB,qBAAqB,GAAG,CAAA,GAAA,eAAO,EAAE;IACzD,IAAI,iBAAiB,CAAA,GAAA,YAAI;IACzB,IAAI,WAAW,YAAY,EAAE,IAAI;IACjC,IAAI,SAAS,CAAA,GAAA,YAAI;IACjB,IAAI,SAAS,CAAA,GAAA,YAAI;IACjB,IAAI,YAAY,CAAA,GAAA,YAAI;IAEpB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI;QAEJ,IAAI,WACF,6CAA6C;QAC7C,UAAU,WAAW;YACnB,qBAAqB;QACvB,GAAG;aAEH,wDAAwD;QACxD,qBAAqB;QAEvB,OAAO;YACL,yFAAyF;YACzF,aAAa;QACf;IACF,GAAG;QAAC;KAAU;IAEd,IAAI,YAAY,OACd,UAAU;SACL,IAAI,YAAY,kBAAkB;QACvC,UAAU;QACV,cAAc;IAChB;IAEA,MAAM,yBACJ,GAAG,eAAe,WAAW,CAAC,aAAa,GAAG,GAAG,CAAC,EAAE,gBAAgB,MAAM,CAAC,YAAY,CAAC,IAAI;QAEzF;IADL,MAAM,8BAA8B,eAC/B,CAAA,uCAAA,8BAAA,WAAW,CAAC,kBAAkB,cAA9B,kDAAA,4BAAgC,OAAO,CAAC,UAAU,wBAAlD,iDAAA,sCAAgE,YACjE,GAAG,UAAU,SAAS,GAAG,CAAC,EAAE,WAAW,SAAS,GAAG,CAAC,EAAE,WAAW,CAAC,IAAI;IAE1E,IAAI,WAA2C;IAC/C,IAAI,CAAA,GAAA,oBAAY,OAAQ,CAAA,CAAC,gBAAgB,CAAA,GAAA,gBAAQ,GAAE,GACjD,WAAW;IAGb,IAAI,iBAAiB,YACjB;QACE,SAAS,CAAA;YACP,IAAI,EAAE,aAAa,YAAY,mBAC7B,EAAE,cAAc;QAEpB;IACF,IACA;QACE,SAAS;QACT,4EAA4E;QAC5E,SAAS,KAAO;IAClB;IAEJ,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAe,WAAW;qBACtE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,YAAY,YAAY,eAAe;QACnE,IAAI;QACJ,KAAK;QACL,gBAAc;QACd,cAAY;QACZ,qBAAmB,eAAe;QAClC,iBAAe,YAAY,SAAS;QACpC,cAAY,YAAY,yBAAyB,WAAW,CAAC,aAAa;QAC1E,mBAAiB,YAAY,8BAA8B,WAAW,CAAC,kBAAkB;QACzF,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,mBACA;YACE,6BAA6B,WAAW,CAAC;YACzC,eAAe,cAAc;YAC7B,aAAa;YACb,cAAc;YACd,4BAA4B;QAC9B,GACA,WAAW,SAAS;qBAEtB,gCAAC,CAAA,GAAA,yCAAW;QACV,OAAO;YACL,MAAM;gBACJ,IAAI;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;YACA,MAAM;gBACJ,IAAI;gBACJ,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC,OAAO,aAAa,yBAAW,gCAAC,CAAA,GAAA,yCAAG,SAAG,YAAmB,UACzD,2BACC,gCAAC;QACC,eAAY;QACZ,OAAO;YAAC,YAAY,oBAAoB,YAAY;QAAQ;QAC5D,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC9B,gCAAC,CAAA,GAAA,yCAAa;QACZ,cAAY;QACZ,iBAAA;QACA,MAAK;QACL,aAAa;SAIlB,2BACC,gFACE,gCAAC;QAAI,aAAW,YAAY,WAAW;OACpC,mCACC,gCAAC;QAAI,MAAK;QAAM,mBAAiB;uBAOrC,gCAAC;QAAI,IAAI;QAAW,MAAK;QAAM,cAAY;;AAOzD","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"}