@react-spectrum/s2 0.6.0 → 0.7.0

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 (767) hide show
  1. package/dist/Accordion.cjs.map +1 -1
  2. package/dist/Accordion.css +1 -5
  3. package/dist/Accordion.css.map +1 -1
  4. package/dist/Accordion.mjs.map +1 -1
  5. package/dist/ActionBar.cjs +2 -2
  6. package/dist/ActionBar.css +0 -6
  7. package/dist/ActionBar.css.map +1 -1
  8. package/dist/ActionBar.mjs +2 -2
  9. package/dist/ActionButton.cjs +4 -4
  10. package/dist/ActionButton.cjs.map +1 -1
  11. package/dist/ActionButton.css +0 -6
  12. package/dist/ActionButton.css.map +1 -1
  13. package/dist/ActionButton.mjs +4 -4
  14. package/dist/ActionButton.mjs.map +1 -1
  15. package/dist/ActionButtonGroup.css +1 -5
  16. package/dist/ActionButtonGroup.css.map +1 -1
  17. package/dist/ActionMenu.cjs.map +1 -1
  18. package/dist/ActionMenu.mjs.map +1 -1
  19. package/dist/AlertDialog.css +1 -5
  20. package/dist/AlertDialog.css.map +1 -1
  21. package/dist/Avatar.cjs.map +1 -1
  22. package/dist/Avatar.css +1 -5
  23. package/dist/Avatar.css.map +1 -1
  24. package/dist/Avatar.mjs.map +1 -1
  25. package/dist/AvatarGroup.cjs +1 -1
  26. package/dist/AvatarGroup.cjs.map +1 -1
  27. package/dist/AvatarGroup.css +0 -6
  28. package/dist/AvatarGroup.css.map +1 -1
  29. package/dist/AvatarGroup.mjs +1 -1
  30. package/dist/AvatarGroup.mjs.map +1 -1
  31. package/dist/Badge.cjs +32 -14
  32. package/dist/Badge.cjs.map +1 -1
  33. package/dist/Badge.css +26 -8
  34. package/dist/Badge.css.map +1 -1
  35. package/dist/Badge.mjs +33 -15
  36. package/dist/Badge.mjs.map +1 -1
  37. package/dist/Breadcrumbs.cjs +7 -7
  38. package/dist/Breadcrumbs.cjs.map +1 -1
  39. package/dist/Breadcrumbs.css +0 -6
  40. package/dist/Breadcrumbs.css.map +1 -1
  41. package/dist/Breadcrumbs.mjs +8 -8
  42. package/dist/Breadcrumbs.mjs.map +1 -1
  43. package/dist/Button.cjs +4 -4
  44. package/dist/Button.cjs.map +1 -1
  45. package/dist/Button.css +0 -6
  46. package/dist/Button.css.map +1 -1
  47. package/dist/Button.mjs +4 -4
  48. package/dist/Button.mjs.map +1 -1
  49. package/dist/ButtonGroup.cjs +1 -1
  50. package/dist/ButtonGroup.cjs.map +1 -1
  51. package/dist/ButtonGroup.css +1 -5
  52. package/dist/ButtonGroup.css.map +1 -1
  53. package/dist/ButtonGroup.mjs +1 -1
  54. package/dist/ButtonGroup.mjs.map +1 -1
  55. package/dist/Card.cjs +15 -15
  56. package/dist/Card.cjs.map +1 -1
  57. package/dist/Card.css +0 -6
  58. package/dist/Card.css.map +1 -1
  59. package/dist/Card.mjs +16 -16
  60. package/dist/Card.mjs.map +1 -1
  61. package/dist/CardView.cjs +71 -309
  62. package/dist/CardView.cjs.map +1 -1
  63. package/dist/CardView.css +1 -5
  64. package/dist/CardView.css.map +1 -1
  65. package/dist/CardView.mjs +28 -266
  66. package/dist/CardView.mjs.map +1 -1
  67. package/dist/CenterBaseline.cjs +1 -1
  68. package/dist/CenterBaseline.css +1 -5
  69. package/dist/CenterBaseline.css.map +1 -1
  70. package/dist/CenterBaseline.mjs +1 -1
  71. package/dist/Checkbox.cjs +1 -1
  72. package/dist/Checkbox.cjs.map +1 -1
  73. package/dist/Checkbox.css +0 -6
  74. package/dist/Checkbox.css.map +1 -1
  75. package/dist/Checkbox.mjs +1 -1
  76. package/dist/Checkbox.mjs.map +1 -1
  77. package/dist/CheckboxGroup.cjs.map +1 -1
  78. package/dist/CheckboxGroup.css +0 -6
  79. package/dist/CheckboxGroup.css.map +1 -1
  80. package/dist/CheckboxGroup.mjs.map +1 -1
  81. package/dist/ClearButton.css +1 -5
  82. package/dist/ClearButton.css.map +1 -1
  83. package/dist/CloseButton.cjs.map +1 -1
  84. package/dist/CloseButton.css +1 -5
  85. package/dist/CloseButton.css.map +1 -1
  86. package/dist/CloseButton.mjs.map +1 -1
  87. package/dist/ColorArea.cjs.map +1 -1
  88. package/dist/ColorArea.css +1 -5
  89. package/dist/ColorArea.css.map +1 -1
  90. package/dist/ColorArea.mjs.map +1 -1
  91. package/dist/ColorField.cjs.map +1 -1
  92. package/dist/ColorField.css +0 -6
  93. package/dist/ColorField.css.map +1 -1
  94. package/dist/ColorField.mjs.map +1 -1
  95. package/dist/ColorHandle.cjs +3 -3
  96. package/dist/ColorHandle.css +1 -5
  97. package/dist/ColorHandle.css.map +1 -1
  98. package/dist/ColorHandle.mjs +3 -3
  99. package/dist/ColorSlider.cjs.map +1 -1
  100. package/dist/ColorSlider.css +0 -6
  101. package/dist/ColorSlider.css.map +1 -1
  102. package/dist/ColorSlider.mjs.map +1 -1
  103. package/dist/ColorSwatch.cjs.map +1 -1
  104. package/dist/ColorSwatch.css +1 -5
  105. package/dist/ColorSwatch.css.map +1 -1
  106. package/dist/ColorSwatch.mjs.map +1 -1
  107. package/dist/ColorSwatchPicker.cjs +1 -1
  108. package/dist/ColorSwatchPicker.cjs.map +1 -1
  109. package/dist/ColorSwatchPicker.css +1 -5
  110. package/dist/ColorSwatchPicker.css.map +1 -1
  111. package/dist/ColorSwatchPicker.mjs +1 -1
  112. package/dist/ColorSwatchPicker.mjs.map +1 -1
  113. package/dist/ColorWheel.cjs.map +1 -1
  114. package/dist/ColorWheel.css +1 -5
  115. package/dist/ColorWheel.css.map +1 -1
  116. package/dist/ColorWheel.mjs.map +1 -1
  117. package/dist/ComboBox.cjs +2 -2
  118. package/dist/ComboBox.css +0 -6
  119. package/dist/ComboBox.css.map +1 -1
  120. package/dist/ComboBox.mjs +2 -2
  121. package/dist/Content.cjs +3 -1
  122. package/dist/Content.cjs.map +1 -1
  123. package/dist/Content.mjs +3 -1
  124. package/dist/Content.mjs.map +1 -1
  125. package/dist/ContextualHelp.cjs +5 -5
  126. package/dist/ContextualHelp.cjs.map +1 -1
  127. package/dist/ContextualHelp.css +0 -6
  128. package/dist/ContextualHelp.css.map +1 -1
  129. package/dist/ContextualHelp.mjs +5 -5
  130. package/dist/ContextualHelp.mjs.map +1 -1
  131. package/dist/CustomDialog.css +1 -5
  132. package/dist/CustomDialog.css.map +1 -1
  133. package/dist/Dialog.cjs +10 -10
  134. package/dist/Dialog.css +0 -6
  135. package/dist/Dialog.css.map +1 -1
  136. package/dist/Dialog.mjs +10 -10
  137. package/dist/Disclosure.cjs +2 -2
  138. package/dist/Disclosure.cjs.map +1 -1
  139. package/dist/Disclosure.css +0 -6
  140. package/dist/Disclosure.css.map +1 -1
  141. package/dist/Disclosure.mjs +2 -2
  142. package/dist/Disclosure.mjs.map +1 -1
  143. package/dist/Divider.cjs.map +1 -1
  144. package/dist/Divider.css +1 -5
  145. package/dist/Divider.css.map +1 -1
  146. package/dist/Divider.mjs.map +1 -1
  147. package/dist/DropZone.cjs.map +1 -1
  148. package/dist/DropZone.css +0 -6
  149. package/dist/DropZone.css.map +1 -1
  150. package/dist/DropZone.mjs.map +1 -1
  151. package/dist/Field.cjs +7 -7
  152. package/dist/Field.cjs.map +1 -1
  153. package/dist/Field.css +0 -6
  154. package/dist/Field.css.map +1 -1
  155. package/dist/Field.mjs +7 -7
  156. package/dist/Field.mjs.map +1 -1
  157. package/dist/Form.cjs.map +1 -1
  158. package/dist/Form.css +1 -5
  159. package/dist/Form.css.map +1 -1
  160. package/dist/Form.mjs.map +1 -1
  161. package/dist/FullscreenDialog.cjs +5 -5
  162. package/dist/FullscreenDialog.css +0 -6
  163. package/dist/FullscreenDialog.css.map +1 -1
  164. package/dist/FullscreenDialog.mjs +5 -5
  165. package/dist/IllustratedMessage.cjs +1 -1
  166. package/dist/IllustratedMessage.cjs.map +1 -1
  167. package/dist/IllustratedMessage.css +0 -6
  168. package/dist/IllustratedMessage.css.map +1 -1
  169. package/dist/IllustratedMessage.mjs +1 -1
  170. package/dist/IllustratedMessage.mjs.map +1 -1
  171. package/dist/Image.cjs +14 -2
  172. package/dist/Image.cjs.map +1 -1
  173. package/dist/Image.css +1 -5
  174. package/dist/Image.css.map +1 -1
  175. package/dist/Image.mjs +15 -3
  176. package/dist/Image.mjs.map +1 -1
  177. package/dist/InlineAlert.cjs +1 -1
  178. package/dist/InlineAlert.css +0 -6
  179. package/dist/InlineAlert.css.map +1 -1
  180. package/dist/InlineAlert.mjs +1 -1
  181. package/dist/Link.cjs.map +1 -1
  182. package/dist/Link.css +0 -6
  183. package/dist/Link.css.map +1 -1
  184. package/dist/Link.mjs.map +1 -1
  185. package/dist/Menu.cjs +20 -8
  186. package/dist/Menu.cjs.map +1 -1
  187. package/dist/Menu.css +12 -6
  188. package/dist/Menu.css.map +1 -1
  189. package/dist/Menu.mjs +21 -9
  190. package/dist/Menu.mjs.map +1 -1
  191. package/dist/Meter.cjs.map +1 -1
  192. package/dist/Meter.css +0 -6
  193. package/dist/Meter.css.map +1 -1
  194. package/dist/Meter.mjs.map +1 -1
  195. package/dist/Modal.css +1 -5
  196. package/dist/Modal.css.map +1 -1
  197. package/dist/NumberField.cjs.map +1 -1
  198. package/dist/NumberField.css +0 -6
  199. package/dist/NumberField.css.map +1 -1
  200. package/dist/NumberField.mjs.map +1 -1
  201. package/dist/Picker.cjs +95 -70
  202. package/dist/Picker.cjs.map +1 -1
  203. package/dist/Picker.css +8 -10
  204. package/dist/Picker.css.map +1 -1
  205. package/dist/Picker.mjs +96 -71
  206. package/dist/Picker.mjs.map +1 -1
  207. package/dist/Popover.cjs +1 -3
  208. package/dist/Popover.cjs.map +1 -1
  209. package/dist/Popover.css +5 -9
  210. package/dist/Popover.css.map +1 -1
  211. package/dist/Popover.mjs +1 -3
  212. package/dist/Popover.mjs.map +1 -1
  213. package/dist/ProgressBar.cjs.map +1 -1
  214. package/dist/ProgressBar.css +0 -6
  215. package/dist/ProgressBar.css.map +1 -1
  216. package/dist/ProgressBar.mjs.map +1 -1
  217. package/dist/ProgressCircle.cjs.map +1 -1
  218. package/dist/ProgressCircle.css +1 -5
  219. package/dist/ProgressCircle.css.map +1 -1
  220. package/dist/ProgressCircle.mjs.map +1 -1
  221. package/dist/Provider.css +1 -5
  222. package/dist/Provider.css.map +1 -1
  223. package/dist/Radio.css +0 -6
  224. package/dist/Radio.css.map +1 -1
  225. package/dist/RadioGroup.cjs.map +1 -1
  226. package/dist/RadioGroup.css +0 -6
  227. package/dist/RadioGroup.css.map +1 -1
  228. package/dist/RadioGroup.mjs.map +1 -1
  229. package/dist/RangeSlider.cjs.map +1 -1
  230. package/dist/RangeSlider.mjs.map +1 -1
  231. package/dist/SearchField.cjs +3 -3
  232. package/dist/SearchField.cjs.map +1 -1
  233. package/dist/SearchField.css +0 -6
  234. package/dist/SearchField.css.map +1 -1
  235. package/dist/SearchField.mjs +3 -3
  236. package/dist/SearchField.mjs.map +1 -1
  237. package/dist/SegmentedControl.cjs +7 -7
  238. package/dist/SegmentedControl.cjs.map +1 -1
  239. package/dist/SegmentedControl.css +0 -6
  240. package/dist/SegmentedControl.css.map +1 -1
  241. package/dist/SegmentedControl.mjs +8 -8
  242. package/dist/SegmentedControl.mjs.map +1 -1
  243. package/dist/Slider.cjs.map +1 -1
  244. package/dist/Slider.css +0 -6
  245. package/dist/Slider.css.map +1 -1
  246. package/dist/Slider.mjs.map +1 -1
  247. package/dist/StatusLight.cjs.map +1 -1
  248. package/dist/StatusLight.css +0 -6
  249. package/dist/StatusLight.css.map +1 -1
  250. package/dist/StatusLight.mjs.map +1 -1
  251. package/dist/Switch.cjs.map +1 -1
  252. package/dist/Switch.css +0 -6
  253. package/dist/Switch.css.map +1 -1
  254. package/dist/Switch.mjs.map +1 -1
  255. package/dist/TableView.cjs +75 -92
  256. package/dist/TableView.cjs.map +1 -1
  257. package/dist/TableView.css +10 -8
  258. package/dist/TableView.css.map +1 -1
  259. package/dist/TableView.mjs +76 -93
  260. package/dist/TableView.mjs.map +1 -1
  261. package/dist/Tabs.cjs +451 -167
  262. package/dist/Tabs.cjs.map +1 -1
  263. package/dist/Tabs.css +208 -122
  264. package/dist/Tabs.css.map +1 -1
  265. package/dist/Tabs.mjs +451 -167
  266. package/dist/Tabs.mjs.map +1 -1
  267. package/dist/TabsPicker.cjs +415 -0
  268. package/dist/TabsPicker.cjs.map +1 -0
  269. package/dist/TabsPicker.css +482 -0
  270. package/dist/TabsPicker.css.map +1 -0
  271. package/dist/TabsPicker.mjs +409 -0
  272. package/dist/TabsPicker.mjs.map +1 -0
  273. package/dist/TagGroup.cjs +13 -13
  274. package/dist/TagGroup.cjs.map +1 -1
  275. package/dist/TagGroup.css +0 -6
  276. package/dist/TagGroup.css.map +1 -1
  277. package/dist/TagGroup.mjs +13 -13
  278. package/dist/TagGroup.mjs.map +1 -1
  279. package/dist/TextField.cjs +1 -1
  280. package/dist/TextField.cjs.map +1 -1
  281. package/dist/TextField.css +0 -6
  282. package/dist/TextField.css.map +1 -1
  283. package/dist/TextField.mjs +1 -1
  284. package/dist/TextField.mjs.map +1 -1
  285. package/dist/ToggleButton.cjs +3 -3
  286. package/dist/ToggleButton.cjs.map +1 -1
  287. package/dist/ToggleButton.css +1 -5
  288. package/dist/ToggleButton.css.map +1 -1
  289. package/dist/ToggleButton.mjs +3 -3
  290. package/dist/ToggleButton.mjs.map +1 -1
  291. package/dist/ToggleButtonGroup.cjs.map +1 -1
  292. package/dist/ToggleButtonGroup.mjs.map +1 -1
  293. package/dist/Tooltip.cjs +1 -1
  294. package/dist/Tooltip.cjs.map +1 -1
  295. package/dist/Tooltip.css +0 -6
  296. package/dist/Tooltip.css.map +1 -1
  297. package/dist/Tooltip.mjs +1 -1
  298. package/dist/Tooltip.mjs.map +1 -1
  299. package/dist/TreeView.cjs +439 -0
  300. package/dist/TreeView.cjs.map +1 -0
  301. package/dist/TreeView.css +608 -0
  302. package/dist/TreeView.css.map +1 -0
  303. package/dist/TreeView.mjs +432 -0
  304. package/dist/TreeView.mjs.map +1 -0
  305. package/dist/main.cjs +5 -0
  306. package/dist/main.cjs.map +1 -1
  307. package/dist/module.mjs +3 -1
  308. package/dist/module.mjs.map +1 -1
  309. package/dist/types.d.ts +120 -81
  310. package/dist/types.d.ts.map +1 -1
  311. package/icons/3DMaterial.cjs.map +1 -1
  312. package/icons/3DMaterial.mjs.map +1 -1
  313. package/icons/ABC.cjs +36 -0
  314. package/icons/ABC.cjs.map +1 -0
  315. package/icons/ABC.mjs +25 -0
  316. package/icons/ABC.mjs.map +1 -0
  317. package/icons/AlertDiamond.cjs.map +1 -1
  318. package/icons/AlertDiamond.mjs.map +1 -1
  319. package/icons/Animation.cjs.map +1 -1
  320. package/icons/Animation.mjs.map +1 -1
  321. package/icons/AnimationNo.cjs.map +1 -1
  322. package/icons/AnimationNo.mjs.map +1 -1
  323. package/icons/App.cjs +42 -0
  324. package/icons/App.cjs.map +1 -0
  325. package/icons/App.mjs +31 -0
  326. package/icons/App.mjs.map +1 -0
  327. package/icons/AspectRatio.cjs.map +1 -1
  328. package/icons/AspectRatio.mjs.map +1 -1
  329. package/icons/Asset.cjs +1 -5
  330. package/icons/Asset.cjs.map +1 -1
  331. package/icons/Asset.mjs +1 -5
  332. package/icons/Asset.mjs.map +1 -1
  333. package/icons/AudioWave.cjs.map +1 -1
  334. package/icons/AudioWave.mjs.map +1 -1
  335. package/icons/BadgeVerified.cjs.map +1 -1
  336. package/icons/BadgeVerified.mjs.map +1 -1
  337. package/icons/Bell.cjs.map +1 -1
  338. package/icons/Bell.mjs.map +1 -1
  339. package/icons/Bookmark.cjs +36 -0
  340. package/icons/Bookmark.cjs.map +1 -0
  341. package/icons/Bookmark.mjs +25 -0
  342. package/icons/Bookmark.mjs.map +1 -0
  343. package/icons/Brand.cjs.map +1 -1
  344. package/icons/Brand.mjs.map +1 -1
  345. package/icons/Building.cjs +62 -0
  346. package/icons/Building.cjs.map +1 -0
  347. package/icons/Building.mjs +51 -0
  348. package/icons/Building.mjs.map +1 -0
  349. package/icons/CalendarEdit.cjs.map +1 -1
  350. package/icons/CalendarEdit.mjs.map +1 -1
  351. package/icons/CallCenter.cjs +36 -0
  352. package/icons/CallCenter.cjs.map +1 -0
  353. package/icons/CallCenter.mjs +25 -0
  354. package/icons/CallCenter.mjs.map +1 -0
  355. package/icons/CameraProperties.cjs.map +1 -1
  356. package/icons/CameraProperties.mjs.map +1 -1
  357. package/icons/Channel.cjs.map +1 -1
  358. package/icons/Channel.mjs.map +1 -1
  359. package/icons/ChartBarVert.cjs +36 -0
  360. package/icons/ChartBarVert.cjs.map +1 -0
  361. package/icons/ChartBarVert.mjs +25 -0
  362. package/icons/ChartBarVert.mjs.map +1 -0
  363. package/icons/ChartPie.cjs +36 -0
  364. package/icons/ChartPie.cjs.map +1 -0
  365. package/icons/ChartPie.mjs +25 -0
  366. package/icons/ChartPie.mjs.map +1 -0
  367. package/icons/ChartTrend.cjs +36 -0
  368. package/icons/ChartTrend.cjs.map +1 -0
  369. package/icons/ChartTrend.mjs +25 -0
  370. package/icons/ChartTrend.mjs.map +1 -0
  371. package/icons/Chat.cjs +36 -0
  372. package/icons/Chat.cjs.map +1 -0
  373. package/icons/Chat.mjs +25 -0
  374. package/icons/Chat.mjs.map +1 -0
  375. package/icons/CheckBox.cjs.map +1 -1
  376. package/icons/CheckBox.mjs.map +1 -1
  377. package/icons/Checkmark.cjs +8 -8
  378. package/icons/Checkmark.cjs.map +1 -1
  379. package/icons/Checkmark.mjs +8 -8
  380. package/icons/Checkmark.mjs.map +1 -1
  381. package/icons/ChevronDoubleLeft.cjs +42 -0
  382. package/icons/ChevronDoubleLeft.cjs.map +1 -0
  383. package/icons/ChevronDoubleLeft.d.ts +5 -0
  384. package/icons/ChevronDoubleLeft.mjs +31 -0
  385. package/icons/ChevronDoubleLeft.mjs.map +1 -0
  386. package/icons/ChevronDoubleRight.cjs +42 -0
  387. package/icons/ChevronDoubleRight.cjs.map +1 -0
  388. package/icons/ChevronDoubleRight.d.ts +5 -0
  389. package/icons/ChevronDoubleRight.mjs +31 -0
  390. package/icons/ChevronDoubleRight.mjs.map +1 -0
  391. package/icons/ChevronDown.cjs +8 -8
  392. package/icons/ChevronDown.cjs.map +1 -1
  393. package/icons/ChevronDown.mjs +8 -8
  394. package/icons/ChevronDown.mjs.map +1 -1
  395. package/icons/ChevronLeft.cjs.map +1 -1
  396. package/icons/ChevronLeft.mjs.map +1 -1
  397. package/icons/ChevronRight.cjs.map +1 -1
  398. package/icons/ChevronRight.mjs.map +1 -1
  399. package/icons/ChevronUp.cjs +36 -0
  400. package/icons/ChevronUp.cjs.map +1 -0
  401. package/icons/ChevronUp.d.ts +5 -0
  402. package/icons/ChevronUp.mjs +25 -0
  403. package/icons/ChevronUp.mjs.map +1 -0
  404. package/icons/Circle.cjs.map +1 -1
  405. package/icons/Circle.mjs.map +1 -1
  406. package/icons/Close.cjs.map +1 -1
  407. package/icons/Close.mjs.map +1 -1
  408. package/icons/CloseCaptions.cjs.map +1 -1
  409. package/icons/CloseCaptions.mjs.map +1 -1
  410. package/icons/Code.cjs +36 -0
  411. package/icons/Code.cjs.map +1 -0
  412. package/icons/Code.d.ts +5 -0
  413. package/icons/Code.mjs +25 -0
  414. package/icons/Code.mjs.map +1 -0
  415. package/icons/Collection.cjs.map +1 -1
  416. package/icons/Collection.mjs.map +1 -1
  417. package/icons/ColorHarmony.cjs.map +1 -1
  418. package/icons/ColorHarmony.mjs.map +1 -1
  419. package/icons/CommentCheckmark.cjs.map +1 -1
  420. package/icons/CommentCheckmark.mjs.map +1 -1
  421. package/icons/CommentHide.cjs.map +1 -1
  422. package/icons/CommentHide.mjs.map +1 -1
  423. package/icons/CommentRemove.cjs.map +1 -1
  424. package/icons/CommentRemove.mjs.map +1 -1
  425. package/icons/Compare.cjs +42 -0
  426. package/icons/Compare.cjs.map +1 -0
  427. package/icons/Compare.d.ts +5 -0
  428. package/icons/Compare.mjs +31 -0
  429. package/icons/Compare.mjs.map +1 -0
  430. package/icons/ContextualTaskBar.cjs.map +1 -1
  431. package/icons/ContextualTaskBar.mjs.map +1 -1
  432. package/icons/CornerRadiusBottomLeft.cjs.map +1 -1
  433. package/icons/CornerRadiusBottomLeft.mjs.map +1 -1
  434. package/icons/CornerRadiusBottomRight.cjs.map +1 -1
  435. package/icons/CornerRadiusBottomRight.mjs.map +1 -1
  436. package/icons/CornerRadiusTopLeft.cjs.map +1 -1
  437. package/icons/CornerRadiusTopLeft.mjs.map +1 -1
  438. package/icons/CornerRadiusTopRight.cjs.map +1 -1
  439. package/icons/CornerRadiusTopRight.mjs.map +1 -1
  440. package/icons/CursorClick.cjs.map +1 -1
  441. package/icons/CursorClick.mjs.map +1 -1
  442. package/icons/Data.cjs +1 -1
  443. package/icons/Data.cjs.map +1 -1
  444. package/icons/Data.mjs +1 -1
  445. package/icons/Data.mjs.map +1 -1
  446. package/icons/DataAdd.cjs.map +1 -1
  447. package/icons/DataAdd.mjs.map +1 -1
  448. package/icons/DataRefresh.cjs +42 -0
  449. package/icons/DataRefresh.cjs.map +1 -0
  450. package/icons/DataRefresh.d.ts +5 -0
  451. package/icons/DataRefresh.mjs +31 -0
  452. package/icons/DataRefresh.mjs.map +1 -0
  453. package/icons/DataSettings.cjs +2 -2
  454. package/icons/DataSettings.cjs.map +1 -1
  455. package/icons/DataSettings.mjs +2 -2
  456. package/icons/DataSettings.mjs.map +1 -1
  457. package/icons/DataUpload.cjs +2 -2
  458. package/icons/DataUpload.cjs.map +1 -1
  459. package/icons/DataUpload.mjs +2 -2
  460. package/icons/DataUpload.mjs.map +1 -1
  461. package/icons/DeviceTablet.cjs.map +1 -1
  462. package/icons/DeviceTablet.mjs.map +1 -1
  463. package/icons/Draw.cjs.map +1 -1
  464. package/icons/Draw.mjs.map +1 -1
  465. package/icons/Edit.cjs.map +1 -1
  466. package/icons/Edit.mjs.map +1 -1
  467. package/icons/EditNo.cjs.map +1 -1
  468. package/icons/EditNo.mjs.map +1 -1
  469. package/icons/Email.cjs.map +1 -1
  470. package/icons/Email.mjs.map +1 -1
  471. package/icons/Enterprise.cjs +46 -0
  472. package/icons/Enterprise.cjs.map +1 -0
  473. package/icons/Enterprise.d.ts +5 -0
  474. package/icons/Enterprise.mjs +35 -0
  475. package/icons/Enterprise.mjs.map +1 -0
  476. package/icons/Export.cjs +42 -0
  477. package/icons/Export.cjs.map +1 -0
  478. package/icons/Export.d.ts +5 -0
  479. package/icons/Export.mjs +31 -0
  480. package/icons/Export.mjs.map +1 -0
  481. package/icons/Filter.cjs.map +1 -1
  482. package/icons/Filter.mjs.map +1 -1
  483. package/icons/FlipHorizontal.cjs +1 -21
  484. package/icons/FlipHorizontal.cjs.map +1 -1
  485. package/icons/FlipHorizontal.mjs +1 -21
  486. package/icons/FlipHorizontal.mjs.map +1 -1
  487. package/icons/FlipVertical.cjs +1 -21
  488. package/icons/FlipVertical.cjs.map +1 -1
  489. package/icons/FlipVertical.mjs +1 -21
  490. package/icons/FlipVertical.mjs.map +1 -1
  491. package/icons/FolderMoveTo.cjs.map +1 -1
  492. package/icons/FolderMoveTo.mjs.map +1 -1
  493. package/icons/FolderSearch.cjs +42 -0
  494. package/icons/FolderSearch.cjs.map +1 -0
  495. package/icons/FolderSearch.d.ts +5 -0
  496. package/icons/FolderSearch.mjs +31 -0
  497. package/icons/FolderSearch.mjs.map +1 -0
  498. package/icons/FontPicker.cjs.map +1 -1
  499. package/icons/FontPicker.mjs.map +1 -1
  500. package/icons/GlobeGrid.cjs.map +1 -1
  501. package/icons/GlobeGrid.mjs.map +1 -1
  502. package/icons/GradientHorizontal.cjs.map +1 -1
  503. package/icons/GradientHorizontal.mjs.map +1 -1
  504. package/icons/GridsAndRulers.cjs.map +1 -1
  505. package/icons/GridsAndRulers.mjs.map +1 -1
  506. package/icons/Icon.cjs.map +1 -1
  507. package/icons/Icon.mjs.map +1 -1
  508. package/icons/Image.cjs.map +1 -1
  509. package/icons/Image.mjs.map +1 -1
  510. package/icons/ImageAdd.cjs +1 -5
  511. package/icons/ImageAdd.cjs.map +1 -1
  512. package/icons/ImageAdd.mjs +1 -5
  513. package/icons/ImageAdd.mjs.map +1 -1
  514. package/icons/ImageBackgroundRemove.cjs.map +1 -1
  515. package/icons/ImageBackgroundRemove.mjs.map +1 -1
  516. package/icons/Images.cjs.map +1 -1
  517. package/icons/Images.mjs.map +1 -1
  518. package/icons/Import.cjs +42 -0
  519. package/icons/Import.cjs.map +1 -0
  520. package/icons/Import.d.ts +5 -0
  521. package/icons/Import.mjs +31 -0
  522. package/icons/Import.mjs.map +1 -0
  523. package/icons/Key.cjs +36 -0
  524. package/icons/Key.cjs.map +1 -0
  525. package/icons/Key.d.ts +5 -0
  526. package/icons/Key.mjs +25 -0
  527. package/icons/Key.mjs.map +1 -0
  528. package/icons/ListMultiSelect.cjs.map +1 -1
  529. package/icons/ListMultiSelect.mjs.map +1 -1
  530. package/icons/ListNumbered.cjs.map +1 -1
  531. package/icons/ListNumbered.mjs.map +1 -1
  532. package/icons/Logo.cjs.map +1 -1
  533. package/icons/Logo.mjs.map +1 -1
  534. package/icons/Market.cjs.map +1 -1
  535. package/icons/Market.mjs.map +1 -1
  536. package/icons/Microphone.cjs.map +1 -1
  537. package/icons/Microphone.mjs.map +1 -1
  538. package/icons/MicrophoneOff.cjs.map +1 -1
  539. package/icons/MicrophoneOff.mjs.map +1 -1
  540. package/icons/MusicNote.cjs.map +1 -1
  541. package/icons/MusicNote.mjs.map +1 -1
  542. package/icons/OrientationPortrait.cjs.map +1 -1
  543. package/icons/OrientationPortrait.mjs.map +1 -1
  544. package/icons/Pause.cjs.map +1 -1
  545. package/icons/Pause.mjs.map +1 -1
  546. package/icons/PauseCircle.cjs.map +1 -1
  547. package/icons/PauseCircle.mjs.map +1 -1
  548. package/icons/PeopleGroup.cjs +36 -0
  549. package/icons/PeopleGroup.cjs.map +1 -0
  550. package/icons/PeopleGroup.d.ts +5 -0
  551. package/icons/PeopleGroup.mjs +25 -0
  552. package/icons/PeopleGroup.mjs.map +1 -0
  553. package/icons/Percentage.cjs.map +1 -1
  554. package/icons/Percentage.mjs.map +1 -1
  555. package/icons/PinOff.cjs.map +1 -1
  556. package/icons/PinOff.mjs.map +1 -1
  557. package/icons/PinOn.cjs.map +1 -1
  558. package/icons/PinOn.mjs.map +1 -1
  559. package/icons/Play.cjs.map +1 -1
  560. package/icons/Play.mjs.map +1 -1
  561. package/icons/PluginGear.cjs.map +1 -1
  562. package/icons/PluginGear.mjs.map +1 -1
  563. package/icons/Polygon6.cjs.map +1 -1
  564. package/icons/Polygon6.mjs.map +1 -1
  565. package/icons/Publish.cjs.map +1 -1
  566. package/icons/Publish.mjs.map +1 -1
  567. package/icons/PublishNo.cjs.map +1 -1
  568. package/icons/PublishNo.mjs.map +1 -1
  569. package/icons/RadioButton.cjs.map +1 -1
  570. package/icons/RadioButton.mjs.map +1 -1
  571. package/icons/RectangleHoriz.cjs.map +1 -1
  572. package/icons/RectangleHoriz.mjs.map +1 -1
  573. package/icons/RocketQuickActions.cjs.map +1 -1
  574. package/icons/RocketQuickActions.mjs.map +1 -1
  575. package/icons/RotateCW.cjs.map +1 -1
  576. package/icons/RotateCW.mjs.map +1 -1
  577. package/icons/Ruler.cjs.map +1 -1
  578. package/icons/Ruler.mjs.map +1 -1
  579. package/icons/SaveFloppy.cjs +36 -0
  580. package/icons/SaveFloppy.cjs.map +1 -0
  581. package/icons/SaveFloppy.d.ts +5 -0
  582. package/icons/SaveFloppy.mjs +25 -0
  583. package/icons/SaveFloppy.mjs.map +1 -0
  584. package/icons/Select.cjs.map +1 -1
  585. package/icons/Select.mjs.map +1 -1
  586. package/icons/Send.cjs.map +1 -1
  587. package/icons/Send.mjs.map +1 -1
  588. package/icons/Shuffle.cjs.map +1 -1
  589. package/icons/Shuffle.mjs.map +1 -1
  590. package/icons/Skeleton.cjs +8 -6
  591. package/icons/Skeleton.cjs.map +1 -1
  592. package/icons/Skeleton.css +3 -5
  593. package/icons/Skeleton.css.map +1 -1
  594. package/icons/Skeleton.mjs +9 -7
  595. package/icons/Skeleton.mjs.map +1 -1
  596. package/icons/SlowConnectionCircle.cjs.map +1 -1
  597. package/icons/SlowConnectionCircle.mjs.map +1 -1
  598. package/icons/SpeedFast.cjs +36 -0
  599. package/icons/SpeedFast.cjs.map +1 -0
  600. package/icons/SpeedFast.d.ts +5 -0
  601. package/icons/SpeedFast.mjs +25 -0
  602. package/icons/SpeedFast.mjs.map +1 -0
  603. package/icons/StepBackward.cjs.map +1 -1
  604. package/icons/StepBackward.mjs.map +1 -1
  605. package/icons/StepForward.cjs.map +1 -1
  606. package/icons/StepForward.mjs.map +1 -1
  607. package/icons/Table.cjs.map +1 -1
  608. package/icons/Table.mjs.map +1 -1
  609. package/icons/Tag.cjs.map +1 -1
  610. package/icons/Tag.mjs.map +1 -1
  611. package/icons/Target.cjs.map +1 -1
  612. package/icons/Target.mjs.map +1 -1
  613. package/icons/TextBold.cjs.map +1 -1
  614. package/icons/TextBold.mjs.map +1 -1
  615. package/icons/TextHighlight.cjs.map +1 -1
  616. package/icons/TextHighlight.mjs.map +1 -1
  617. package/icons/TextIncrease.cjs.map +1 -1
  618. package/icons/TextIncrease.mjs.map +1 -1
  619. package/icons/TextNumbers.cjs.map +1 -1
  620. package/icons/TextNumbers.mjs.map +1 -1
  621. package/icons/TextParagraph.cjs.map +1 -1
  622. package/icons/TextParagraph.mjs.map +1 -1
  623. package/icons/TextReplaceComment.cjs.map +1 -1
  624. package/icons/TextReplaceComment.mjs.map +1 -1
  625. package/icons/Tools.cjs.map +1 -1
  626. package/icons/Tools.mjs.map +1 -1
  627. package/icons/TouchOneFingerSwipeLeftRight.cjs.map +1 -1
  628. package/icons/TouchOneFingerSwipeLeftRight.mjs.map +1 -1
  629. package/icons/Transcript.cjs.map +1 -1
  630. package/icons/Transcript.mjs.map +1 -1
  631. package/icons/Translate.cjs.map +1 -1
  632. package/icons/Translate.mjs.map +1 -1
  633. package/icons/UserAvatarCursor.cjs.map +1 -1
  634. package/icons/UserAvatarCursor.mjs.map +1 -1
  635. package/icons/UserEdit.cjs.map +1 -1
  636. package/icons/UserEdit.mjs.map +1 -1
  637. package/icons/UserGroup.cjs.map +1 -1
  638. package/icons/UserGroup.mjs.map +1 -1
  639. package/icons/UserSettings.cjs +44 -0
  640. package/icons/UserSettings.cjs.map +1 -0
  641. package/icons/UserSettings.d.ts +5 -0
  642. package/icons/UserSettings.mjs +33 -0
  643. package/icons/UserSettings.mjs.map +1 -0
  644. package/icons/VectorDraw.cjs.map +1 -1
  645. package/icons/VectorDraw.mjs.map +1 -1
  646. package/icons/ViewGridFluid.cjs +36 -0
  647. package/icons/ViewGridFluid.cjs.map +1 -0
  648. package/icons/ViewGridFluid.d.ts +5 -0
  649. package/icons/ViewGridFluid.mjs +25 -0
  650. package/icons/ViewGridFluid.mjs.map +1 -0
  651. package/icons/ZoomIn.cjs.map +1 -1
  652. package/icons/ZoomIn.mjs.map +1 -1
  653. package/icons/ZoomOut.cjs.map +1 -1
  654. package/icons/ZoomOut.mjs.map +1 -1
  655. package/package.json +17 -18
  656. package/src/Accordion.tsx +1 -1
  657. package/src/ActionButton.tsx +2 -2
  658. package/src/ActionMenu.tsx +1 -1
  659. package/src/Avatar.tsx +1 -1
  660. package/src/AvatarGroup.tsx +1 -1
  661. package/src/Badge.tsx +27 -8
  662. package/src/Breadcrumbs.tsx +13 -13
  663. package/src/Button.tsx +4 -4
  664. package/src/ButtonGroup.tsx +1 -1
  665. package/src/Card.tsx +2 -2
  666. package/src/CardView.tsx +18 -366
  667. package/src/Checkbox.tsx +1 -1
  668. package/src/CheckboxGroup.tsx +2 -2
  669. package/src/CloseButton.tsx +1 -1
  670. package/src/ColorArea.tsx +1 -1
  671. package/src/ColorField.tsx +1 -1
  672. package/src/ColorSlider.tsx +1 -1
  673. package/src/ColorSwatch.tsx +2 -2
  674. package/src/ColorSwatchPicker.tsx +1 -2
  675. package/src/ColorWheel.tsx +1 -1
  676. package/src/Content.tsx +11 -9
  677. package/src/ContextualHelp.tsx +2 -2
  678. package/src/Disclosure.tsx +1 -1
  679. package/src/Divider.tsx +1 -1
  680. package/src/DropZone.tsx +2 -2
  681. package/src/Field.tsx +1 -1
  682. package/src/Form.tsx +2 -2
  683. package/src/Icon.tsx +2 -2
  684. package/src/IllustratedMessage.tsx +1 -1
  685. package/src/Image.tsx +19 -5
  686. package/src/Link.tsx +2 -2
  687. package/src/Menu.tsx +9 -4
  688. package/src/Meter.tsx +1 -1
  689. package/src/NumberField.tsx +1 -1
  690. package/src/Picker.tsx +81 -60
  691. package/src/Popover.tsx +2 -1
  692. package/src/ProgressBar.tsx +1 -1
  693. package/src/ProgressCircle.tsx +1 -1
  694. package/src/RadioGroup.tsx +2 -2
  695. package/src/RangeSlider.tsx +1 -1
  696. package/src/SearchField.tsx +1 -1
  697. package/src/SegmentedControl.tsx +6 -9
  698. package/src/Skeleton.tsx +6 -8
  699. package/src/Slider.tsx +1 -1
  700. package/src/StatusLight.tsx +1 -1
  701. package/src/Switch.tsx +1 -1
  702. package/src/TableView.tsx +67 -71
  703. package/src/Tabs.tsx +451 -145
  704. package/src/TabsPicker.tsx +350 -0
  705. package/src/TagGroup.tsx +4 -4
  706. package/src/TextField.tsx +2 -2
  707. package/src/ToggleButton.tsx +2 -2
  708. package/src/ToggleButtonGroup.tsx +1 -1
  709. package/src/Tooltip.tsx +4 -4
  710. package/src/TreeView.tsx +450 -0
  711. package/src/index.ts +2 -0
  712. package/src/style-utils.ts +0 -1
  713. package/style/__tests__/style-macro.test.js +3 -7
  714. package/style/dist/spectrum-theme.cjs.map +1 -1
  715. package/style/dist/spectrum-theme.mjs.map +1 -1
  716. package/style/dist/style-macro.cjs +5 -3
  717. package/style/dist/style-macro.cjs.map +1 -1
  718. package/style/dist/style-macro.mjs +5 -3
  719. package/style/dist/style-macro.mjs.map +1 -1
  720. package/style/dist/types.d.ts.map +1 -1
  721. package/style/spectrum-theme.ts +0 -1
  722. package/style/style-macro.ts +9 -3
  723. package/icons/CloudStateDefault.cjs +0 -36
  724. package/icons/CloudStateDefault.cjs.map +0 -1
  725. package/icons/CloudStateDefault.mjs +0 -25
  726. package/icons/CloudStateDefault.mjs.map +0 -1
  727. package/icons/CloudStateDisconnected.cjs +0 -36
  728. package/icons/CloudStateDisconnected.cjs.map +0 -1
  729. package/icons/CloudStateDisconnected.mjs +0 -25
  730. package/icons/CloudStateDisconnected.mjs.map +0 -1
  731. package/icons/CloudStateError.cjs +0 -36
  732. package/icons/CloudStateError.cjs.map +0 -1
  733. package/icons/CloudStateError.mjs +0 -25
  734. package/icons/CloudStateError.mjs.map +0 -1
  735. package/icons/CloudStateErrorRed.cjs +0 -46
  736. package/icons/CloudStateErrorRed.cjs.map +0 -1
  737. package/icons/CloudStateErrorRed.mjs +0 -35
  738. package/icons/CloudStateErrorRed.mjs.map +0 -1
  739. package/icons/CloudStateInProgress.cjs +0 -36
  740. package/icons/CloudStateInProgress.cjs.map +0 -1
  741. package/icons/CloudStateInProgress.mjs +0 -25
  742. package/icons/CloudStateInProgress.mjs.map +0 -1
  743. package/icons/CloudStateOnline.cjs +0 -50
  744. package/icons/CloudStateOnline.cjs.map +0 -1
  745. package/icons/CloudStateOnline.mjs +0 -39
  746. package/icons/CloudStateOnline.mjs.map +0 -1
  747. package/icons/CloudStatePaused.cjs +0 -36
  748. package/icons/CloudStatePaused.cjs.map +0 -1
  749. package/icons/CloudStatePaused.mjs +0 -25
  750. package/icons/CloudStatePaused.mjs.map +0 -1
  751. package/icons/CloudStatePending.cjs +0 -42
  752. package/icons/CloudStatePending.cjs.map +0 -1
  753. package/icons/CloudStatePending.mjs +0 -31
  754. package/icons/CloudStatePending.mjs.map +0 -1
  755. package/icons/CloudStateSlowConnection.cjs +0 -36
  756. package/icons/CloudStateSlowConnection.cjs.map +0 -1
  757. package/icons/CloudStateSlowConnection.mjs +0 -25
  758. package/icons/CloudStateSlowConnection.mjs.map +0 -1
  759. /package/icons/{CloudStateDefault.d.ts → ABC.d.ts} +0 -0
  760. /package/icons/{CloudStateDisconnected.d.ts → App.d.ts} +0 -0
  761. /package/icons/{CloudStateError.d.ts → Bookmark.d.ts} +0 -0
  762. /package/icons/{CloudStateErrorRed.d.ts → Building.d.ts} +0 -0
  763. /package/icons/{CloudStateInProgress.d.ts → CallCenter.d.ts} +0 -0
  764. /package/icons/{CloudStateOnline.d.ts → ChartBarVert.d.ts} +0 -0
  765. /package/icons/{CloudStatePaused.d.ts → ChartPie.d.ts} +0 -0
  766. /package/icons/{CloudStatePending.d.ts → ChartTrend.d.ts} +0 -0
  767. /package/icons/{CloudStateSlowConnection.d.ts → Chat.d.ts} +0 -0
package/dist/Menu.mjs CHANGED
@@ -13,7 +13,7 @@ import {PopoverBase as $88b746eba92c8d0d$export$fde1b04c590741a3} from "./Popove
13
13
  import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
14
14
  import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
15
15
  import {jsx as $g2Qzl$jsx, jsxs as $g2Qzl$jsxs, Fragment as $g2Qzl$Fragment} from "react/jsx-runtime";
16
- import {Provider as $g2Qzl$Provider, Menu as $g2Qzl$Menu, Separator as $g2Qzl$Separator, MenuSection as $g2Qzl$MenuSection, MenuItem as $g2Qzl$MenuItem, MenuTrigger as $g2Qzl$MenuTrigger, SubmenuTrigger as $g2Qzl$SubmenuTrigger} from "react-aria-components";
16
+ import {Provider as $g2Qzl$Provider, Menu as $g2Qzl$Menu, Separator as $g2Qzl$Separator, MenuSection as $g2Qzl$MenuSection, MenuItem as $g2Qzl$MenuItem, DEFAULT_SLOT as $g2Qzl$DEFAULT_SLOT, MenuTrigger as $g2Qzl$MenuTrigger, SubmenuTrigger as $g2Qzl$SubmenuTrigger} from "react-aria-components";
17
17
  import {createContext as $g2Qzl$createContext, forwardRef as $g2Qzl$forwardRef, useContext as $g2Qzl$useContext, useRef as $g2Qzl$useRef, useState as $g2Qzl$useState} from "react";
18
18
  import {useLocale as $g2Qzl$useLocale} from "react-aria";
19
19
  import {PressResponder as $g2Qzl$PressResponder} from "@react-aria/interactions";
@@ -97,8 +97,12 @@ let $13afb0ea5f0ed767$export$b1e5508a851be14d = function anonymous(props, overri
97
97
  let rules = " .";
98
98
  let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
99
99
  rules += matches.join('');
100
+ let $l = false;
100
101
  let $r = false;
101
- for (let p of matches)if (/^\s*r/.test(p)) $r = true;
102
+ for (let p of matches){
103
+ if (/^\s*l/.test(p)) $l = true;
104
+ if (/^\s*r/.test(p)) $r = true;
105
+ }
102
106
  rules += ' _Ma';
103
107
  rules += ' _0f';
104
108
  if (props.size === "XL") rules += ' __i-14g31og';
@@ -107,6 +111,7 @@ let $13afb0ea5f0ed767$export$b1e5508a851be14d = function anonymous(props, overri
107
111
  else if (props.size === "S") rules += ' __i-iov3cy';
108
112
  rules += ' __oa';
109
113
  rules += ' p-17zqamw';
114
+ if (!$l) rules += ' lb';
110
115
  if (props.isPopover) rules += ' __wa';
111
116
  if (props.isPopover) rules += ' __xa';
112
117
  if (!$r) {
@@ -140,6 +145,7 @@ let $13afb0ea5f0ed767$export$b1e5508a851be14d = function anonymous(props, overri
140
145
  rules += ' _ebf';
141
146
  rules += ' _ee';
142
147
  }
148
+ rules += ' __g-zexzcl';
143
149
  return rules;
144
150
  };
145
151
  let $13afb0ea5f0ed767$export$fe2e36411d703b3d = function anonymous(props) {
@@ -174,7 +180,7 @@ let $13afb0ea5f0ed767$export$562e61a0817eb32e = function anonymous(props) {
174
180
  else rules += ' -_375tou_o-f';
175
181
  return rules;
176
182
  };
177
- let $13afb0ea5f0ed767$export$300ac6f106ef584d = " . _da _d-enzrfpb _d-enzwzjc _d-enzykdd _d-enzzrge _d-eo0c6sf _d-1uotwbwg _d-bc1l9oh _ee _ebf _fd _ga _g-1x99dlob an Aa Ba ya za";
183
+ let $13afb0ea5f0ed767$export$300ac6f106ef584d = " _da _d-enzrfpb _d-enzwzjc _d-enzykdd _d-enzzrge _d-eo0c6sf _d-1uotwbwg _d-bc1l9oh _ee _ebf _fd _ga _g-1x99dlob an Aa Ba ya za";
178
184
  let $13afb0ea5f0ed767$export$f68e44d881264486 = function anonymous(props, overrides) {
179
185
  let rules = " .";
180
186
  let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
@@ -249,6 +255,7 @@ let $13afb0ea5f0ed767$export$f68e44d881264486 = function anonymous(props, overri
249
255
  rules += ' i-1mnwavb-cplj4k';
250
256
  rules += ' _2d';
251
257
  rules += ' o-375tou';
258
+ rules += ' kc';
252
259
  rules += ' _md';
253
260
  if (props.isLink) rules += ' __Ic';
254
261
  else rules += ' __Ib';
@@ -280,9 +287,9 @@ let $13afb0ea5f0ed767$export$292abbf31ed842a = function anonymous(props) {
280
287
  rules += ' _cb';
281
288
  return rules;
282
289
  };
283
- let $13afb0ea5f0ed767$var$checkbox = " . __b-zosnw2 __c-zosnw2 __d-zosnw2 __e-zosnw2 zF";
284
- let $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27 = " . _0a l-1sthc3k k-1sthc3k zG zbH -rwx0fg_e-b";
285
- let $13afb0ea5f0ed767$export$31d1842a0fd736e6 = " . _0d __b-qb5q8i __c-qb5q8i __d-qb5q8i __e-qb5q8i";
290
+ let $13afb0ea5f0ed767$var$checkbox = " __b-zosnw2 __c-zosnw2 __d-zosnw2 __e-zosnw2 zF";
291
+ let $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27 = " _0a l-1sthc3k k-1sthc3k zG zbH -rwx0fg_e-b";
292
+ let $13afb0ea5f0ed767$export$31d1842a0fd736e6 = " _0d __b-qb5q8i __c-qb5q8i __d-qb5q8i __e-qb5q8i";
286
293
  let $13afb0ea5f0ed767$var$image = function anonymous(props) {
287
294
  let rules = " .";
288
295
  rules += ' __b-qb5q8i';
@@ -450,7 +457,7 @@ let $13afb0ea5f0ed767$export$6d59db4903f20f7d = function anonymous(props) {
450
457
  rules += ' _Sa';
451
458
  return rules;
452
459
  };
453
- let $13afb0ea5f0ed767$var$value = " . __b-o8by7a __c-o8by7a __d-o8by7a __e-o8by7a yd";
460
+ let $13afb0ea5f0ed767$var$value = " __b-o8by7a __c-o8by7a __d-o8by7a __e-o8by7a yd";
454
461
  let $13afb0ea5f0ed767$var$keyboard = function anonymous(props) {
455
462
  let rules = " .";
456
463
  rules += ' __b-1vpavyy';
@@ -476,7 +483,7 @@ let $13afb0ea5f0ed767$var$keyboard = function anonymous(props) {
476
483
  else rules += ' al';
477
484
  return rules;
478
485
  };
479
- let $13afb0ea5f0ed767$var$descriptor = " . __b-zax38o __c-zax38o __d-zax38o __e-zax38o yd -rwx0fg_e-b";
486
+ let $13afb0ea5f0ed767$var$descriptor = " __b-zax38o __c-zax38o __d-zax38o __e-zax38o yd -rwx0fg_e-b";
480
487
  let $13afb0ea5f0ed767$var$InternalMenuContext = /*#__PURE__*/ (0, $g2Qzl$createContext)({
481
488
  size: 'M',
482
489
  isSubmenu: false,
@@ -574,7 +581,7 @@ function $13afb0ea5f0ed767$export$2e0a83ec2e27ecbb(props) {
574
581
  size: 'M',
575
582
  orientation: 'horizontal',
576
583
  isStaticColor: false
577
- }), " . _0f _0-uamghwj __b-3t1z __c-3hmpw A-1x1h2a6 B-1x1h2a6")
584
+ }), " _0f _0-uamghwj __b-3t1z __c-3hmpw A-1x1h2a6 B-1x1h2a6")
578
585
  });
579
586
  }
580
587
  function $13afb0ea5f0ed767$export$4b1545b4f2016d26(props) {
@@ -662,6 +669,11 @@ function $13afb0ea5f0ed767$export$2ce376c2cc3355c8(props1) {
662
669
  (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
663
670
  {
664
671
  slots: {
672
+ [(0, $g2Qzl$DEFAULT_SLOT)]: {
673
+ styles: $13afb0ea5f0ed767$export$1237798dc640739a({
674
+ size: size
675
+ })
676
+ },
665
677
  label: {
666
678
  styles: $13afb0ea5f0ed767$export$1237798dc640739a({
667
679
  size: size
package/dist/Menu.mjs.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;AA8EM,MAAM,0DAAc,CAAA,GAAA,oBAAY,EAA6D;AAEpG,MAAM,qCAAe;IACnB,MAAM;QACJ,GAAG;;YAAiB;YAAQ;YAAQ;YAAkB;YAAQ;YAAQ;;SAAuB;QAC7F,GAAG;;YAAiB;YAAQ;YAAQ;YAAkB;YAAQ;YAAQ;;SAAuB;QAC7F,GAAG;;YAAiB;YAAQ;YAAQ;YAAkB;YAAQ;YAAQ;;SAAuB;QAC7F,IAAI;;YAAiB;YAAQ;YAAQ;YAAkB;YAAQ;YAAQ;;SAAuB;IAChG;AACF;AAEO,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBJ,IAAI;;;;;;;;;;;;;AAYJ,IAAI;;;;;;;;;;;;;;;;;;;AASJ,IAAI;AAMJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDJ,IAAI;;;;;;;;;;;;;;;;;;AAkBX,IAAI;AAKG,IAAI;AAYJ,IAAI;AAKX,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBX,IAAI;AAKJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;AAgBJ,IAAI;AASJ,IAAI,0DAAsB,CAAA,GAAA,oBAAY,EAAgF;IACpH,MAAM;IACN,WAAW;IACX,iBAAiB;AACnB;AAEA,IAAI,iEAA6B,CAAA,GAAA,oBAAY,EAA6C;AAKnF,MAAM,4CAAqB,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,KAAuB,KAAmB,EAAE,GAA2B;IAC/I,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,aAAC,SAAS,EAAE,MAAM,OAAO,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IAC5C,IAAI,YACF,QAAQ,QACR,OAAO,uBACP,YAAY,oBACZ,gBAAgB,UAChB,MAAM,mBACN,kBAAkB,OACnB,GAAG;IACJ,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,SAAC,QAAQ,oBAAS,YAAY,sBAAU,UAAU,EAAC,GAAG,OAAO,CAAC;IAElE,wDAAwD;IACxD,iBAAiB;IACjB,IAAI;IACJ,OAAQ;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,mBAAmB,GAAG,UAAU,CAAC,EAAE,UAAU,QAAQ,WAAW,OAAO;YACvE;QACF,KAAK;QACL,KAAK;QACL;YACE,mBAAmB,GAAG,UAAU,CAAC,EAAE,OAAO;IAC9C;IACA,IAAI,WACF,mBAAmB;IAGrB,IAAI,wBACF,gBAAC,0CAAoB,QAAQ;QAAC,OAAO;kBAAC;YAAM,WAAW;6BAAM;QAAe;kBAC1E,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBAAC,QAAQ,0CAAc;kCAAC;wBAAI;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ;oBAAc;iBAAE;gBAC1C;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,OAAO;4BACL,eAAe;gCAAC,QAAQ,0CAAY;0CAAC;gCAAI;4BAAE;wBAC7C;oBACF;iBAAE;aACH;sBACD,cAAA,gBAAC,CAAA,GAAA,WAAO;gBACL,GAAG,KAAK;gBACT,WAAW,0CAAK;0BAAC;oBAAM,WAAW,CAAC,CAAC,OAAO;gBAAS,GAAG,MAAM,OAAO;0BACnE;;;;IAMT,IAAI,OAAO,WACT,qBACE,gBAAC,CAAA,GAAA,yCAAU;QACT,KAAK;QACL,SAAS;QACT,WAAW;QACX,YAAY;QACZ,wEAAwE;QACxE,uDAAuD;QACvD,QAAQ,YAAY,KAAK;QACzB,qGAAqG;QACrG,aAAa,YAAY,KAAK;QAC9B,cAAc;QACd,kBAAkB;QAClB,QAAQ;kBACP;;IAKP,OAAO;AACT;AAEO,SAAS,0CAAQ,KAAqB;IAC3C,qBACE,gBAAC,CAAA,GAAA,gBAAQ;QACN,GAAG,KAAK;QACT,WAAW,CAAA,GAAA,yCAAU,EACnB,CAAA,GAAA,yCAAM,EAAE;YACN,MAAM;YACN,aAAa;YACb,eAAe;QACjB;;AAWR;AAGO,SAAS,0CAA8B,KAA0B;IACtE,mEAAmE;IACnE,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxB,qBACE;;0BACE,gBAAC,CAAA,GAAA,kBAAc;gBACZ,GAAG,KAAK;gBACT,WAAW,0CAAQ;0BAAC;gBAAI;0BACvB,MAAM,QAAQ;;0BAEjB,gBAAC;;;AAGP;AASA,MAAM,0CAAoB;IACxB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEA,MAAM,qCAAe;IACnB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,SAAS,0CAAS,MAAoB;IAC3C,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,SAAS,OAAM,IAAI,IAAI;IAC3B,IAAI,YAAY,UAAU,OAAM,MAAM,KAAK;IAC3C,IAAI,QAAC,IAAI,mBAAE,eAAe,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACzC,IAAI,YAAY,OAAM,SAAS,IAAK,CAAA,OAAO,OAAM,QAAQ,KAAK,WAAW,OAAM,QAAQ,GAAG,SAAQ;IAClG,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,qBACE,gBAAC,CAAA,GAAA,eAAW;QACT,GAAG,MAAK;QACT,WAAW;QACX,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,KAAK,OAAM,YAAY;QACzC,WAAW,CAAA,cAAe,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAS;gBAAC,GAAG,WAAW;gBAAE,WAAW,AAAC,YAAY,UAAU,IAAI,YAAY,MAAM,IAAK,YAAY,SAAS;sBAAE;wBAAM;YAAM,GAAG,OAAM,MAAM;kBACnM,CAAC;YACA,IAAI,YAAC,QAAQ,EAAC,GAAG;YACjB,IAAI,sBAAsB;gBAAC,GAAG,WAAW;sBAAE;gBAAM,WAAW;gBAAO,gBAAgB;gBAAO,iBAAiB;gBAAO,YAAY;gBAAO,WAAW;gBAAO,YAAY;YAAK;YACxK,qBACE;0BACE,cAAA,iBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BAAC,CAAA,GAAA,yCAAU;4BAAG;gCACZ,OAAO;oCACL,MAAM;wCAAC,QAAQ,CAAA,GAAA,yCAAa,EAAE;4CAAC,MAAM;4CAAQ,QAAQ;wCAAiB;wCAAI,QAAQ;oCAAI;oCACtF,YAAY;wCAAC,QAAQ,CAAA,GAAA,yCAAa,EAAE;4CAAC,MAAM;4CAAc,QAAQ;wCAAU;oCAAE,EAAE,qCAAqC;gCACtH;4BACF;yBAAE;wBACF;4BAAC,CAAA,GAAA,yCAAU;4BAAG;gCACZ,OAAO;oCACL,OAAO;wCAAC,QAAQ,0CAAM;kDAAC;wCAAI;oCAAE;oCAC7B,aAAa;wCAAC,QAAQ,0CAAY;4CAAC,GAAG,WAAW;kDAAE;wCAAI;oCAAE;oCACzD,OAAO;wCAAC,QAAQ;oCAAK;gCACvB;4BACF;yBAAE;wBACF;4BAAC,CAAA,GAAA,yCAAc;4BAAG;gCAAC,QAAQ,+BAAS;0CAAC;oCAAM,YAAY,YAAY,UAAU;gCAAA;4BAAE;yBAAE;wBACjF;4BAAC,CAAA,GAAA,yCAAW;4BAAG;gCAAC,QAAQ,4BAAM;0CAAC;gCAAI;4BAAE;yBAAE;qBACxC;;wBACA,YAAY,aAAa,KAAK,YAAY,CAAC,YAAY,UAAU,kBAAI,gBAAC,CAAA,GAAA,wCAAY;4BAAE,MAAM,uCAAiB,CAAC,KAAK;4BAAE,WAAW,yCAAU;gCAAC,GAAG,WAAW;sCAAE;4BAAI;;wBAC7J,YAAY,aAAa,KAAK,cAAc,CAAC,YAAY,UAAU,kBAClE,gBAAC;4BAAI,WAAW,CAAA,GAAA,yCAAU,EAAE,gCAAU,CAAA,GAAA,uCAAE,EAAE;sCACxC,cAAA,gBAAC,CAAA,GAAA,wCAAY;gCAAE,MAAM;gCAAM,WAAW,CAAA,GAAA,yCAAS;;;wBAGlD,OAAO,aAAa,yBAAW,gBAAC,CAAA,GAAA,yCAAG;4BAAE,MAAK;sCAAS;6BAAmB;wBACtE,aAAa,CAAC,iCACb,gBAAC;4BAAI,MAAK;4BAAa,WAAW;sCAChC,cAAA,gBAAC,CAAA,GAAA,wCAAU;gCACT,MAAM,kCAAY,CAAC,KAAK;gCACxB,WAAW;;;;kCAMR;+CAAC;gCAAS;;;wBAGlB,YAAY,UAAU,kBACrB,gBAAC;4BAAI,MAAK;4BAAa,WAAW;sCAChC,cAAA,gBAAC,CAAA,GAAA,wCAAe;gCACd,MAAM;gCACN,WAAW;;;;kCAMR;+CAAC;gCAAS;;;;;;QAM3B;;AAGN;AAEA;;;CAGC,GACD,SAAS,0CAAY,KAAuB;IAC1C,+DAA+D;IAC/D,0EAA0E;IAC1E,uFAAuF;IACvF,4FAA4F;IAC5F,mFAAmF;IACnF,IAAI,CAAC,WAAW,WAAW,GAAG,CAAA,GAAA,eAAO,EAAE;IACvC,IAAI,qBAAC,iBAAiB,EAAC,GAAG,CAAA,GAAA,yBAAiB;IAC3C,IAAI,eAAe,CAAC;QAClB,IAAI,EAAE,WAAW,KAAK,SACpB;QAEF,WAAW;QACX,kBAAkB,UAAU,aAAa;YACvC,WAAW;QACb,GAAG;YAAC,MAAM;YAAM,SAAS;QAAI;IAC/B;IAEA,qBACE,gBAAC,iDAA2B,QAAQ;QAClC,OAAO;YACL,OAAO,MAAM,KAAK;YAClB,WAAW,MAAM,SAAS;YAC1B,YAAY,MAAM,UAAU;QAC9B;kBACA,cAAA,gBAAC,CAAA,GAAA,kBAAc;YAAG,GAAG,KAAK;sBACxB,cAAA,gBAAC,CAAA,GAAA,qBAAa;gBAAE,cAAc;gBAAc,WAAW;0BACpD,MAAM,QAAQ;;;;AAKzB;AAIA,MAAM,4CAAiB,CAAA,GAAA,qBAAiB;AAOjC,SAAS,0CAA+B,KAAmB;IAChE,qBAAO,gBAAC;AACV","sources":["packages/@react-spectrum/s2/src/Menu.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuSection as AriaMenuSection,\n MenuSectionProps as AriaMenuSectionProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n SubmenuTriggerProps as AriaSubmenuTriggerProps,\n ContextValue,\n Provider,\n Separator,\n SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n /**\n * Alignment of the menu relative to the trigger.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /**\n * Where the Menu opens relative to its trigger.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies'>, StyleProps {\n /**\n * The size of the Menu.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The contents of the collection.\n */\n children?: ReactNode | ((item: T) => ReactNode),\n /** Hides the default link out icons on menu items that open links in a new tab. */\n hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<MenuProps<any>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n} as const;\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: menuItemGrid,\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: {\n isPopover: 'auto'\n },\n maxWidth: {\n isPopover: 320\n },\n padding: {\n isPopover: 8\n },\n fontFamily: 'sans',\n fontSize: 'control'\n}, getAllowedOverrides());\n\nexport let section = style({\n gridColumnStart: 1,\n gridColumnEnd: -1,\n alignItems: 'center',\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n color: 'neutral',\n gridColumnStart: 2,\n gridColumnEnd: -2,\n boxSizing: 'border-box',\n minHeight: 'control',\n paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n font: 'ui',\n fontWeight: 'bold',\n margin: 0\n});\n\nexport let menuitem = style({\n ...focusRing(),\n boxSizing: 'border-box',\n borderRadius: 'control',\n font: 'control',\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n paddingBottom: '--labelPadding',\n backgroundColor: { // TODO: revisit color when I have access to dev mode again\n default: {\n default: 'transparent',\n isFocused: baseColor('gray-100').isFocusVisible\n }\n },\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n position: 'relative',\n // each menu item should take up the entire width, the subgrid will handle within the item\n gridColumnStart: 1,\n gridColumnEnd: -1,\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: 'subgrid',\n gridTemplateRows: {\n // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n default: 'auto minmax(0, min-content)',\n ':has([slot=description])': 'auto auto'\n },\n rowGap: {\n ':has([slot=description])': space(1)\n },\n alignItems: 'baseline',\n minHeight: 'control',\n textDecoration: 'none',\n cursor: {\n default: 'default',\n isLink: 'pointer'\n },\n transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n visibility: {\n default: 'hidden',\n isSelected: 'visible'\n },\n gridArea: 'checkmark',\n color: 'accent',\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'currentColor',\n forcedColors: 'Highlight'\n }\n },\n marginEnd: 'text-to-control',\n aspectRatio: 'square'\n});\n\nlet checkbox = style({\n gridArea: 'checkmark',\n marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n display: 'block',\n size: fontRelative(20),\n // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n // reminder, size of WF is applied via font size\n marginEnd: 'text-to-visual',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport let iconCenterWrapper = style({\n display: 'flex',\n gridArea: 'icon'\n});\n\nlet image = style({\n gridArea: 'icon',\n gridRowEnd: 'span 2',\n marginEnd: 'text-to-visual',\n marginTop: fontRelative(6), // made up, need feedback\n alignSelf: 'center',\n borderRadius: 'sm',\n size: {\n default: 40,\n size: {\n S: 32,\n M: 40,\n L: 44,\n XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n }\n },\n aspectRatio: 'square',\n objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n gridArea: 'label',\n font: 'control',\n color: '[inherit]',\n fontWeight: 'medium',\n // TODO: token values for padding not defined yet, revisit\n marginTop: '--labelPadding'\n});\n\nexport let description = style({\n gridArea: 'description',\n font: {\n default: 'ui-sm',\n size: {\n S: 'ui-xs',\n M: 'ui-sm',\n L: 'ui',\n XL: 'ui-lg'\n }\n },\n color: {\n default: 'neutral-subdued',\n // Ideally this would use the same token as hover, but we don't have access to that here.\n // TODO: should we always consider isHovered and isFocused to be the same thing?\n isFocused: 'gray-800',\n isDisabled: 'disabled'\n },\n transition: 'default'\n});\n\nlet value = style({\n gridArea: 'value',\n marginStart: 8\n});\n\nlet keyboard = style({\n gridArea: 'keyboard',\n marginStart: 8,\n font: 'ui',\n fontWeight: 'light',\n color: {\n default: 'gray-600',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n background: 'gray-25',\n unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n gridArea: 'descriptor',\n marginStart: 8,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n size: 'M',\n isSubmenu: false,\n hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n let {\n children,\n size = ctxSize,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n hideLinkOutIcon = false\n } = props;\n let ctx = useContext(InternalMenuTriggerContext);\n let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n // TODO: change offset/crossoffset based on size? scale?\n // actual values?\n let initialPlacement: Placement;\n switch (direction) {\n case 'left':\n case 'right':\n case 'start':\n case 'end':\n initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n break;\n case 'bottom':\n case 'top':\n default:\n initialPlacement = `${direction} ${align}` as Placement;\n }\n if (isSubmenu) {\n initialPlacement = 'end top' as Placement;\n }\n\n let content = (\n <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <AriaMenu\n {...props}\n className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n {children}\n </AriaMenu>\n </Provider>\n </InternalMenuContext.Provider>\n );\n\n if (ctx || isSubmenu) {\n return (\n <PopoverBase\n ref={ref}\n hideArrow\n placement={initialPlacement}\n shouldFlip={shouldFlip}\n // For submenus, the offset from the edge of the popover should be 10px.\n // Subtract 8px for the padding around the parent menu.\n offset={isSubmenu ? -2 : 8}\n // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n crossOffset={isSubmenu ? -9 : 0}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}>\n {content}\n </PopoverBase>\n );\n }\n\n return content;\n});\n\nexport function Divider(props: SeparatorProps) {\n return (\n <Separator\n {...props}\n className={mergeStyles(\n divider({\n size: 'M',\n orientation: 'horizontal',\n isStaticColor: false\n }), style({\n display: {\n default: 'grid',\n ':last-child': 'none'\n },\n gridColumnStart: 2,\n gridColumnEnd: -2,\n marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n })\n )} />\n );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>) {\n // remember, context doesn't work if it's around Section nor inside\n let {size} = useContext(InternalMenuContext);\n return (\n <>\n <AriaMenuSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaMenuSection>\n <Divider />\n </>\n );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n /**\n * The contents of the item.\n */\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n S: 'M',\n M: 'L',\n L: 'XL',\n XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let isLinkOut = isLink && props.target === '_blank';\n let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n let {direction} = useLocale();\n return (\n <AriaMenuItem\n {...props}\n textValue={textValue}\n ref={ref}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})},\n value: {styles: value}\n }\n }],\n [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n [ImageContext, {styles: image({size})}]\n ]}>\n {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={iconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n {isLinkOut && !hideLinkOutIcon && (\n <div slot=\"descriptor\" className={descriptor}>\n <LinkOutIcon\n size={linkIconSize[size]}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n {renderProps.hasSubmenu && (\n <div slot=\"descriptor\" className={descriptor}>\n <ChevronRightIcon\n size={size}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n </Provider>\n </>\n );\n }}\n </AriaMenuItem>\n );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps) {\n // RAC sets isPressed via PressResponder when the menu is open.\n // We don't want press scaling to appear to get \"stuck\", so override this.\n // For mouse interactions, menus open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(document, 'pointerup', () => {\n setPressed(false);\n }, {once: true, capture: true});\n };\n\n return (\n <InternalMenuTriggerContext.Provider\n value={{\n align: props.align,\n direction: props.direction,\n shouldFlip: props.shouldFlip\n }}>\n <AriaMenuTrigger {...props}>\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n {props.children}\n </PressResponder>\n </AriaMenuTrigger>\n </InternalMenuTriggerContext.Provider>\n );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.mjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Menu.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuSection as AriaMenuSection,\n MenuSectionProps as AriaMenuSectionProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n SubmenuTriggerProps as AriaSubmenuTriggerProps,\n ContextValue,\n DEFAULT_SLOT,\n Provider,\n Separator,\n SeparatorProps\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronRightIcon from '../ui-icons/Chevron';\nimport {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';\nimport {divider} from './Divider';\nimport {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon'; // chevron right removed??\nimport {ImageContext} from './Image';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement, useLocale} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport {pressScale} from './pressScale';\nimport {useGlobalListeners} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n// viewbox on LinkOut is super weird just because i copied the icon from designs...\n// need to strip id's from icons\n\nexport interface MenuTriggerProps extends AriaMenuTriggerProps {\n /**\n * Alignment of the menu relative to the trigger.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /**\n * Where the Menu opens relative to its trigger.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end',\n /**\n * Whether the menu should automatically flip direction when space is limited.\n *\n * @default true\n */\n shouldFlip?: boolean\n}\n\nexport interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {\n /**\n * The size of the Menu.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The contents of the collection.\n */\n children: ReactNode | ((item: T) => ReactNode),\n /** Hides the default link out icons on menu items that open links in a new tab. */\n hideLinkOutIcon?: boolean\n}\n\nexport const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst menuItemGrid = {\n size: {\n S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n }\n} as const;\n\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: menuItemGrid,\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n width: 'full',\n overflow: {\n isPopover: 'auto'\n },\n maxWidth: {\n isPopover: 320\n },\n padding: {\n isPopover: 8\n },\n fontFamily: 'sans',\n fontSize: 'control',\n gridAutoRows: 'min-content'\n}, getAllowedOverrides());\n\nexport let section = style({\n gridColumnStart: 1,\n gridColumnEnd: -1,\n alignItems: 'center',\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: menuItemGrid\n});\n\nexport let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n color: 'neutral',\n gridColumnStart: 2,\n gridColumnEnd: -2,\n boxSizing: 'border-box',\n minHeight: 'control',\n paddingY: centerPadding()\n});\n\nexport let sectionHeading = style({\n font: 'ui',\n fontWeight: 'bold',\n margin: 0\n});\n\nexport let menuitem = style({\n ...focusRing(),\n boxSizing: 'border-box',\n borderRadius: 'control',\n font: 'control',\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n paddingBottom: '--labelPadding',\n backgroundColor: { // TODO: revisit color when I have access to dev mode again\n default: {\n default: 'transparent',\n isFocused: baseColor('gray-100').isFocusVisible\n }\n },\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n position: 'relative',\n // each menu item should take up the entire width, the subgrid will handle within the item\n gridColumnStart: 1,\n gridColumnEnd: -1,\n display: 'grid',\n gridTemplateAreas: [\n '. checkmark icon label value keyboard descriptor .',\n '. . . description . . . .'\n ],\n gridTemplateColumns: 'subgrid',\n gridTemplateRows: {\n // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n default: 'auto minmax(0, min-content)',\n ':has([slot=description])': 'auto auto'\n },\n rowGap: {\n ':has([slot=description])': space(1)\n },\n alignItems: 'baseline',\n minHeight: 'control',\n height: 'min',\n textDecoration: 'none',\n cursor: {\n default: 'default',\n isLink: 'pointer'\n },\n transition: 'default'\n}, getAllowedOverrides());\n\nexport let checkmark = style({\n visibility: {\n default: 'hidden',\n isSelected: 'visible'\n },\n gridArea: 'checkmark',\n color: 'accent',\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'currentColor',\n forcedColors: 'Highlight'\n }\n },\n marginEnd: 'text-to-control',\n aspectRatio: 'square'\n});\n\nlet checkbox = style({\n gridArea: 'checkmark',\n marginEnd: 'text-to-control'\n});\n\nexport let icon = style({\n display: 'block',\n size: fontRelative(20),\n // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n // reminder, size of WF is applied via font size\n marginEnd: 'text-to-visual',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport let iconCenterWrapper = style({\n display: 'flex',\n gridArea: 'icon'\n});\n\nlet image = style({\n gridArea: 'icon',\n gridRowEnd: 'span 2',\n marginEnd: 'text-to-visual',\n marginTop: fontRelative(6), // made up, need feedback\n alignSelf: 'center',\n borderRadius: 'sm',\n size: {\n default: 40,\n size: {\n S: 32,\n M: 40,\n L: 44,\n XL: 48 // TODO: feedback, Why is it 50x50, that's on 12.25 so doesn't fit the grid at all\n }\n },\n aspectRatio: 'square',\n objectFit: 'contain'\n});\n\nexport let label = style<{size: string}>({\n gridArea: 'label',\n font: 'control',\n color: '[inherit]',\n fontWeight: 'medium',\n // TODO: token values for padding not defined yet, revisit\n marginTop: '--labelPadding'\n});\n\nexport let description = style({\n gridArea: 'description',\n font: {\n default: 'ui-sm',\n size: {\n S: 'ui-xs',\n M: 'ui-sm',\n L: 'ui',\n XL: 'ui-lg'\n }\n },\n color: {\n default: 'neutral-subdued',\n // Ideally this would use the same token as hover, but we don't have access to that here.\n // TODO: should we always consider isHovered and isFocused to be the same thing?\n isFocused: 'gray-800',\n isDisabled: 'disabled'\n },\n transition: 'default'\n});\n\nlet value = style({\n gridArea: 'value',\n marginStart: 8\n});\n\nlet keyboard = style({\n gridArea: 'keyboard',\n marginStart: 8,\n font: 'ui',\n fontWeight: 'light',\n color: {\n default: 'gray-600',\n isDisabled: 'disabled',\n forcedColors: {\n isDisabled: 'GrayText'\n }\n },\n background: 'gray-25',\n unicodeBidi: 'plaintext'\n});\n\nlet descriptor = style({\n gridArea: 'descriptor',\n marginStart: 8,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({\n size: 'M',\n isSubmenu: false,\n hideLinkOutIcon: false\n});\n\nlet InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);\n\n/**\n * Menus display a list of actions or options that a user can choose.\n */\nexport const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MenuContext);\n let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);\n let {\n children,\n size = ctxSize,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n hideLinkOutIcon = false\n } = props;\n let ctx = useContext(InternalMenuTriggerContext);\n let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};\n\n // TODO: change offset/crossoffset based on size? scale?\n // actual values?\n let initialPlacement: Placement;\n switch (direction) {\n case 'left':\n case 'right':\n case 'start':\n case 'end':\n initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;\n break;\n case 'bottom':\n case 'top':\n default:\n initialPlacement = `${direction} ${align}` as Placement;\n }\n if (isSubmenu) {\n initialPlacement = 'end top' as Placement;\n }\n\n let content = (\n <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <AriaMenu\n {...props}\n className={menu({size, isPopover: !!ctx || isSubmenu}, ctx ? null : styles)}>\n {children}\n </AriaMenu>\n </Provider>\n </InternalMenuContext.Provider>\n );\n\n if (ctx || isSubmenu) {\n return (\n <PopoverBase\n ref={ref}\n hideArrow\n placement={initialPlacement}\n shouldFlip={shouldFlip}\n // For submenus, the offset from the edge of the popover should be 10px.\n // Subtract 8px for the padding around the parent menu.\n offset={isSubmenu ? -2 : 8}\n // Offset by padding + border so that the first item in a submenu lines up with the parent menu item.\n crossOffset={isSubmenu ? -9 : 0}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}>\n {content}\n </PopoverBase>\n );\n }\n\n return content;\n});\n\nexport function Divider(props: SeparatorProps) {\n return (\n <Separator\n {...props}\n className={mergeStyles(\n divider({\n size: 'M',\n orientation: 'horizontal',\n isStaticColor: false\n }), style({\n display: {\n default: 'grid',\n ':last-child': 'none'\n },\n gridColumnStart: 2,\n gridColumnEnd: -2,\n marginY: size(5) // height of the menu separator is 12px, and the divider is 2px\n })\n )} />\n );\n}\n\nexport interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}\nexport function MenuSection<T extends object>(props: MenuSectionProps<T>) {\n // remember, context doesn't work if it's around Section nor inside\n let {size} = useContext(InternalMenuContext);\n return (\n <>\n <AriaMenuSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaMenuSection>\n <Divider />\n </>\n );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'children' | 'style' | 'className'>, StyleProps {\n /**\n * The contents of the item.\n */\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nconst linkIconSize = {\n S: 'M',\n M: 'L',\n L: 'XL',\n XL: 'XL'\n} as const;\n\nexport function MenuItem(props: MenuItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let isLinkOut = isLink && props.target === '_blank';\n let {size, hideLinkOutIcon} = useContext(InternalMenuContext);\n let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n let {direction} = useLocale();\n return (\n <AriaMenuItem\n {...props}\n textValue={textValue}\n ref={ref}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, isFocused: (renderProps.hasSubmenu && renderProps.isOpen) || renderProps.isFocused, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},\n descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?\n }\n }],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})},\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})},\n value: {styles: value}\n }\n }],\n [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],\n [ImageContext, {styles: image({size})}]\n ]}>\n {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (\n <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n <CheckmarkIcon size={size} className={iconStyles} />\n </div>\n )}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n {isLinkOut && !hideLinkOutIcon && (\n <div slot=\"descriptor\" className={descriptor}>\n <LinkOutIcon\n size={linkIconSize[size]}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n {renderProps.hasSubmenu && (\n <div slot=\"descriptor\" className={descriptor}>\n <ChevronRightIcon\n size={size}\n className={style({\n scaleX: {\n direction: {\n rtl: -1\n }\n }\n })({direction})} />\n </div>\n )}\n </Provider>\n </>\n );\n }}\n </AriaMenuItem>\n );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nfunction MenuTrigger(props: MenuTriggerProps) {\n // RAC sets isPressed via PressResponder when the menu is open.\n // We don't want press scaling to appear to get \"stuck\", so override this.\n // For mouse interactions, menus open on press start. When the popover underlay appears\n // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n // to occur. We override this by listening for pointerup on the document ourselves.\n let [isPressed, setPressed] = useState(false);\n let {addGlobalListener} = useGlobalListeners();\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'mouse') {\n return;\n }\n setPressed(true);\n addGlobalListener(document, 'pointerup', () => {\n setPressed(false);\n }, {once: true, capture: true});\n };\n\n return (\n <InternalMenuTriggerContext.Provider\n value={{\n align: props.align,\n direction: props.direction,\n shouldFlip: props.shouldFlip\n }}>\n <AriaMenuTrigger {...props}>\n <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n {props.children}\n </PressResponder>\n </AriaMenuTrigger>\n </InternalMenuTriggerContext.Provider>\n );\n}\n\nexport interface SubmenuTriggerProps extends Omit<AriaSubmenuTriggerProps, 'delay'> {}\n\nconst SubmenuTrigger = AriaSubmenuTrigger as (props: SubmenuTriggerProps) => JSX.Element | null;\n\nexport {MenuTrigger, SubmenuTrigger};\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedMenu<T extends object>(props: ICombined<T>) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Menu.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n variant: {\n positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n },\n isStaticColor: 'transparent-overlay-900',\n forcedColors: 'ButtonText'\n }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n let isStaticColor = !!staticColor;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({isStaticColor, size})}>\n <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n});\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n variant: {\n positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n },\n isStaticColor: 'transparent-overlay-900',\n forcedColors: 'ButtonText'\n }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n let isStaticColor = !!staticColor;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({isStaticColor, size})}>\n <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n});\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
package/dist/Meter.css CHANGED
@@ -313,8 +313,6 @@
313
313
  }
314
314
  }
315
315
 
316
- @layer UNSAFE_overrides;
317
-
318
316
  @layer _.c {
319
317
  ._d-enzwzjc:lang(he) {
320
318
  font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -410,8 +408,4 @@
410
408
  }
411
409
  }
412
410
  }
413
-
414
- .\.:not(#a#b) {
415
- all: revert-layer;
416
- }
417
411
  /*# sourceMappingURL=Meter.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACyDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAII;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA;;;;;;AAaD","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n variant: {\n positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n },\n isStaticColor: 'transparent-overlay-900',\n forcedColors: 'ButtonText'\n }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n let isStaticColor = !!staticColor;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({isStaticColor, size})}>\n <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n});\n"],"names":[],"version":3,"file":"Meter.css.map"}
1
+ {"mappings":"ACyDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n variant: {\n positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n },\n isStaticColor: 'transparent-overlay-900',\n forcedColors: 'ButtonText'\n }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n let isStaticColor = !!staticColor;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({isStaticColor, size})}>\n <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n});\n"],"names":[],"version":3,"file":"Meter.css.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n variant: {\n positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n },\n isStaticColor: 'transparent-overlay-900',\n forcedColors: 'ButtonText'\n }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n let isStaticColor = !!staticColor;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({isStaticColor, size})}>\n <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n});\n"],"names":[],"version":3,"file":"Meter.mjs.map"}
1
+ {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Meter as AriaMeter,\n MeterProps as AriaMeterProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n * @default 'informative'\n */\n variant?: 'informative' | 'positive' | 'notice' | 'negative',\n /**\n * The size of the Meter.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n variant: {\n positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n },\n isStaticColor: 'transparent-overlay-900',\n forcedColors: 'ButtonText'\n }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n size = 'M',\n staticColor,\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n variant = 'informative',\n labelPosition = 'top',\n ...groupProps\n } = props;\n let isStaticColor = !!staticColor;\n\n return (\n <AriaMeter\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({\n size,\n variant,\n staticColor,\n labelPosition\n }, styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n <SkeletonWrapper>\n <div className={trackStyles({isStaticColor, size})}>\n <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n </div>\n </SkeletonWrapper>\n </>\n )}\n </AriaMeter>\n );\n});\n"],"names":[],"version":3,"file":"Meter.mjs.map"}
package/dist/Modal.css CHANGED
@@ -207,9 +207,5 @@
207
207
  }
208
208
  }
209
209
 
210
- @layer _.b, UNSAFE_overrides;
211
-
212
- .\.:not(#a#b) {
213
- all: revert-layer;
214
- }
210
+ @layer _.b;
215
211
  /*# sourceMappingURL=Modal.css.map */
@@ -1 +1 @@
1
- {"mappings":"AC6B2B;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5CP;;AA4CO","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n /**\n * The size of the Modal.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n ...colorScheme(),\n position: 'fixed',\n inset: 0,\n isolation: 'isolate',\n backgroundColor: 'transparent-black-500',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n transition: 'opacity',\n transitionDuration: {\n default: 250,\n isExiting: 130\n }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let modalRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n return (\n <ModalOverlay\n {...props}\n className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n <RACModal\n {...props}\n ref={modalRef}\n className={renderProps => style({\n display: 'flex',\n flexDirection: 'column',\n borderRadius: {\n default: 'xl',\n size: {\n fullscreenTakeover: 'none'\n }\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576,\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n height: {\n size: {\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n maxWidth: {\n default: '[90vw]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n maxHeight: {\n default: '[90vh]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n isEntering: 20\n },\n transition: '[opacity, translate]',\n transitionDuration: {\n default: 250,\n isExiting: 130\n },\n transitionDelay: {\n default: 160,\n isExiting: 0\n },\n // Transparent outline for WHCM.\n outlineStyle: 'solid',\n outlineWidth: 1,\n outlineColor: 'transparent'\n })({...renderProps, size: props.size})} />\n </ModalOverlay>\n );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}
1
+ {"mappings":"AC6B2B;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5CP","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n /**\n * The size of the Modal.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n ...colorScheme(),\n position: 'fixed',\n inset: 0,\n isolation: 'isolate',\n backgroundColor: 'transparent-black-500',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n transition: 'opacity',\n transitionDuration: {\n default: 250,\n isExiting: 130\n }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n let domRef = useDOMRef(ref);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n\n // TODO: should we pass through lang and dir props in RAC?\n let modalRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n }\n }, [locale, direction, domRef]);\n\n return (\n <ModalOverlay\n {...props}\n className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n <RACModal\n {...props}\n ref={modalRef}\n className={renderProps => style({\n display: 'flex',\n flexDirection: 'column',\n borderRadius: {\n default: 'xl',\n size: {\n fullscreenTakeover: 'none'\n }\n },\n width: {\n size: {\n // Copied from designs, not sure if correct.\n S: 336,\n M: 416,\n L: 576,\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n height: {\n size: {\n fullscreen: '[calc(100% - 40px)]',\n fullscreenTakeover: 'full'\n }\n },\n maxWidth: {\n default: '[90vw]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n maxHeight: {\n default: '[90vh]',\n size: {\n fullscreen: 'none',\n fullscreenTakeover: 'none'\n }\n },\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: 'layer-2'\n },\n backgroundColor: '--s2-container-bg',\n opacity: {\n isEntering: 0,\n isExiting: 0\n },\n translateY: {\n isEntering: 20\n },\n transition: '[opacity, translate]',\n transitionDuration: {\n default: 250,\n isExiting: 130\n },\n transitionDelay: {\n default: 160,\n isExiting: 0\n },\n // Transparent outline for WHCM.\n outlineStyle: 'solid',\n outlineWidth: 1,\n outlineColor: 'transparent'\n })({...renderProps, size: props.size})} />\n </ModalOverlay>\n );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n ButtonProps as AriaButtonProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n ButtonContext,\n ContextValue,\n InputContext,\n Text,\n useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps {\n /**\n * Whether to hide the increment and decrement buttons.\n * @default false\n */\n hideStepper?: boolean,\n /**\n * The size of the NumberField.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderTopRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n decrementStep: 'none'\n }\n },\n borderBottomRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n incrementStep: 'none'\n }\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: {\n default: 'text-to-control',\n type: {\n increment: 0\n }\n },\n aspectRatio: 'square',\n flexShrink: 0,\n minHeight: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n },\n cursor: 'default'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: {\n default: 0,\n type: {\n incrementStep: 270,\n decrementStep: 90\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst stepperContainerStyles = style({\n display: 'flex',\n flexDirection: 'row',\n gap: {\n size: {\n S: 8,\n M: 4,\n L: 8,\n XL: 8\n }\n },\n paddingEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n let {\n label,\n contextualHelp,\n description: descriptionMessage,\n errorMessage,\n hideStepper,\n isRequired,\n size = 'M',\n labelPosition = 'top',\n necessityIndicator,\n labelAlign = 'start',\n UNSAFE_className = '',\n UNSAFE_style,\n ...numberFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let domRef = useRef<HTMLDivElement | null>(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n\n return (\n <AriaNumberField\n isRequired={isRequired}\n {...numberFieldProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {\n ({isDisabled, isInvalid}) => {\n return (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n paddingEnd: {\n default: 0,\n isStepperHidden: 'edge-to-text'\n }\n })({size, isStepperHidden: hideStepper})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {!hideStepper && <div className={stepperContainerStyles({size})}>\n <StepButton\n ref={decrementButtonRef}\n slot=\"decrement\"\n style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'decrement',\n size\n })}>\n <Dash size={size} className={iconStyles({})} />\n </StepButton>\n <StepButton\n ref={incrementButtonRef}\n slot=\"increment\"\n style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'increment',\n size\n })}>\n <Add size={size} className={iconStyles({})} />\n </StepButton>\n </div>}\n </FieldGroup>\n {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }\n }\n </AriaNumberField>\n );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n [props, ref] = useContextProps(props, ref, ButtonContext as any);\n let ctx = props as any;\n /**\n * Must use div for now because Safari pointer event bugs on disabled form elements.\n * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n */\n let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover(props);\n let renderProps = useRenderProps({\n ...props,\n values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n defaultClassName: 'react-aria-Button'\n });\n return (\n <div\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-pressed={ctx.isPressed || isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n let {\n className,\n style,\n children,\n defaultClassName = undefined,\n defaultChildren = undefined,\n defaultStyle,\n values\n } = props;\n\n return useMemo(() => {\n let computedClassName: string | undefined;\n let computedStyle: CSSProperties | undefined;\n let computedChildren: ReactNode | undefined;\n\n if (typeof className === 'function') {\n computedClassName = className({...values, defaultClassName});\n } else {\n computedClassName = className;\n }\n\n if (typeof style === 'function') {\n computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n } else {\n computedStyle = style;\n }\n\n if (typeof children === 'function') {\n computedChildren = children({...values, defaultChildren});\n } else if (children == null) {\n computedChildren = defaultChildren;\n } else {\n computedChildren = children;\n }\n\n return {\n className: computedClassName ?? defaultClassName,\n style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n children: computedChildren ?? defaultChildren,\n 'data-rac': ''\n };\n }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n ButtonProps as AriaButtonProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n ButtonContext,\n ContextValue,\n InputContext,\n Text,\n useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps {\n /**\n * Whether to hide the increment and decrement buttons.\n * @default false\n */\n hideStepper?: boolean,\n /**\n * The size of the NumberField.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderTopRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n decrementStep: 'none'\n }\n },\n borderBottomRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n incrementStep: 'none'\n }\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: {\n default: 'text-to-control',\n type: {\n increment: 0\n }\n },\n aspectRatio: 'square',\n flexShrink: 0,\n minHeight: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n },\n cursor: 'default'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: {\n default: 0,\n type: {\n incrementStep: 270,\n decrementStep: 90\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst stepperContainerStyles = style({\n display: 'flex',\n flexDirection: 'row',\n gap: {\n size: {\n S: 8,\n M: 4,\n L: 8,\n XL: 8\n }\n },\n paddingEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n let {\n label,\n contextualHelp,\n description: descriptionMessage,\n errorMessage,\n hideStepper,\n isRequired,\n size = 'M',\n labelPosition = 'top',\n necessityIndicator,\n labelAlign = 'start',\n UNSAFE_className = '',\n UNSAFE_style,\n ...numberFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let domRef = useRef<HTMLDivElement | null>(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n\n return (\n <AriaNumberField\n isRequired={isRequired}\n {...numberFieldProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {\n ({isDisabled, isInvalid}) => {\n return (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n paddingEnd: {\n default: 0,\n isStepperHidden: 'edge-to-text'\n }\n })({size, isStepperHidden: hideStepper})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {!hideStepper && <div className={stepperContainerStyles({size})}>\n <StepButton\n ref={decrementButtonRef}\n slot=\"decrement\"\n style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'decrement',\n size\n })}>\n <Dash size={size} className={iconStyles({})} />\n </StepButton>\n <StepButton\n ref={incrementButtonRef}\n slot=\"increment\"\n style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'increment',\n size\n })}>\n <Add size={size} className={iconStyles({})} />\n </StepButton>\n </div>}\n </FieldGroup>\n {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }\n }\n </AriaNumberField>\n );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n [props, ref] = useContextProps(props, ref, ButtonContext as any);\n let ctx = props as any;\n /**\n * Must use div for now because Safari pointer event bugs on disabled form elements.\n * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n */\n let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover(props);\n let renderProps = useRenderProps({\n ...props,\n values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n defaultClassName: 'react-aria-Button'\n });\n return (\n <div\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-pressed={ctx.isPressed || isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n let {\n className,\n style,\n children,\n defaultClassName = undefined,\n defaultChildren = undefined,\n defaultStyle,\n values\n } = props;\n\n return useMemo(() => {\n let computedClassName: string | undefined;\n let computedStyle: CSSProperties | undefined;\n let computedChildren: ReactNode | undefined;\n\n if (typeof className === 'function') {\n computedClassName = className({...values, defaultClassName});\n } else {\n computedClassName = className;\n }\n\n if (typeof style === 'function') {\n computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n } else {\n computedStyle = style;\n }\n\n if (typeof children === 'function') {\n computedChildren = children({...values, defaultChildren});\n } else if (children == null) {\n computedChildren = defaultChildren;\n } else {\n computedChildren = children;\n }\n\n return {\n className: computedClassName ?? defaultClassName,\n style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n children: computedChildren ?? defaultChildren,\n 'data-rac': ''\n };\n }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.cjs.map"}
@@ -417,8 +417,6 @@
417
417
  }
418
418
  }
419
419
 
420
- @layer UNSAFE_overrides;
421
-
422
420
  @layer _.b.a {
423
421
  @media (forced-colors: active) {
424
422
  ._Pag {
@@ -475,10 +473,6 @@
475
473
  }
476
474
  }
477
475
 
478
- .\.:not(#a#b) {
479
- all: revert-layer;
480
- }
481
-
482
476
  @layer _.b.-_1s8glxu {
483
477
  @supports (contain-intrinsic-width: 1px) {
484
478
  .__n-1s8glxue {
@@ -1 +1 @@
1
- {"mappings":"AC0DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0ED;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnLN;EA2JgB;;;;;AA3JhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA2JgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBV;;;;AAAA;EAAA;IAAA","sources":["b68c88297d49b771","packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["@import \"86e54c0ad46f69c2\";\n@import \"81d36b1860c8fc73\";\n@import \"22edbea9646800a7\";\n@import \"c17a88ce1f4f53da\";\n@import \"e6f6c2ace019f265\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n ButtonProps as AriaButtonProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n ButtonContext,\n ContextValue,\n InputContext,\n Text,\n useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps {\n /**\n * Whether to hide the increment and decrement buttons.\n * @default false\n */\n hideStepper?: boolean,\n /**\n * The size of the NumberField.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderTopRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n decrementStep: 'none'\n }\n },\n borderBottomRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n incrementStep: 'none'\n }\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: {\n default: 'text-to-control',\n type: {\n increment: 0\n }\n },\n aspectRatio: 'square',\n flexShrink: 0,\n minHeight: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n },\n cursor: 'default'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: {\n default: 0,\n type: {\n incrementStep: 270,\n decrementStep: 90\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst stepperContainerStyles = style({\n display: 'flex',\n flexDirection: 'row',\n gap: {\n size: {\n S: 8,\n M: 4,\n L: 8,\n XL: 8\n }\n },\n paddingEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n let {\n label,\n contextualHelp,\n description: descriptionMessage,\n errorMessage,\n hideStepper,\n isRequired,\n size = 'M',\n labelPosition = 'top',\n necessityIndicator,\n labelAlign = 'start',\n UNSAFE_className = '',\n UNSAFE_style,\n ...numberFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let domRef = useRef<HTMLDivElement | null>(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n\n return (\n <AriaNumberField\n isRequired={isRequired}\n {...numberFieldProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {\n ({isDisabled, isInvalid}) => {\n return (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n paddingEnd: {\n default: 0,\n isStepperHidden: 'edge-to-text'\n }\n })({size, isStepperHidden: hideStepper})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {!hideStepper && <div className={stepperContainerStyles({size})}>\n <StepButton\n ref={decrementButtonRef}\n slot=\"decrement\"\n style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'decrement',\n size\n })}>\n <Dash size={size} className={iconStyles({})} />\n </StepButton>\n <StepButton\n ref={incrementButtonRef}\n slot=\"increment\"\n style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'increment',\n size\n })}>\n <Add size={size} className={iconStyles({})} />\n </StepButton>\n </div>}\n </FieldGroup>\n {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }\n }\n </AriaNumberField>\n );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n [props, ref] = useContextProps(props, ref, ButtonContext as any);\n let ctx = props as any;\n /**\n * Must use div for now because Safari pointer event bugs on disabled form elements.\n * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n */\n let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover(props);\n let renderProps = useRenderProps({\n ...props,\n values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n defaultClassName: 'react-aria-Button'\n });\n return (\n <div\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-pressed={ctx.isPressed || isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n let {\n className,\n style,\n children,\n defaultClassName = undefined,\n defaultChildren = undefined,\n defaultStyle,\n values\n } = props;\n\n return useMemo(() => {\n let computedClassName: string | undefined;\n let computedStyle: CSSProperties | undefined;\n let computedChildren: ReactNode | undefined;\n\n if (typeof className === 'function') {\n computedClassName = className({...values, defaultClassName});\n } else {\n computedClassName = className;\n }\n\n if (typeof style === 'function') {\n computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n } else {\n computedStyle = style;\n }\n\n if (typeof children === 'function') {\n computedChildren = children({...values, defaultChildren});\n } else if (children == null) {\n computedChildren = defaultChildren;\n } else {\n computedChildren = children;\n }\n\n return {\n className: computedClassName ?? defaultClassName,\n style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n children: computedChildren ?? defaultChildren,\n 'data-rac': ''\n };\n }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.css.map"}
1
+ {"mappings":"AC0DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0ED;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnLN;EA2JgB;;;;;AA3JhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA2JgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBV;EAAA;IAAA","sources":["b68c88297d49b771","packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["@import \"86e54c0ad46f69c2\";\n@import \"81d36b1860c8fc73\";\n@import \"22edbea9646800a7\";\n@import \"c17a88ce1f4f53da\";\n@import \"e6f6c2ace019f265\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n ButtonProps as AriaButtonProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n ButtonContext,\n ContextValue,\n InputContext,\n Text,\n useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps {\n /**\n * Whether to hide the increment and decrement buttons.\n * @default false\n */\n hideStepper?: boolean,\n /**\n * The size of the NumberField.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderTopRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n decrementStep: 'none'\n }\n },\n borderBottomRadius: {\n default: {\n size: {\n S: '[3px]',\n M: '[4px]',\n L: '[5px]',\n XL: '[6px]'\n }\n },\n type: {\n incrementStep: 'none'\n }\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: {\n default: 'text-to-control',\n type: {\n increment: 0\n }\n },\n aspectRatio: 'square',\n flexShrink: 0,\n minHeight: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n },\n cursor: 'default'\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: {\n default: 0,\n type: {\n incrementStep: 270,\n decrementStep: 90\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nconst stepperContainerStyles = style({\n display: 'flex',\n flexDirection: 'row',\n gap: {\n size: {\n S: 8,\n M: 4,\n L: 8,\n XL: 8\n }\n },\n paddingEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n let {\n label,\n contextualHelp,\n description: descriptionMessage,\n errorMessage,\n hideStepper,\n isRequired,\n size = 'M',\n labelPosition = 'top',\n necessityIndicator,\n labelAlign = 'start',\n UNSAFE_className = '',\n UNSAFE_style,\n ...numberFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let domRef = useRef<HTMLDivElement | null>(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n\n return (\n <AriaNumberField\n isRequired={isRequired}\n {...numberFieldProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {\n ({isDisabled, isInvalid}) => {\n return (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n paddingEnd: {\n default: 0,\n isStepperHidden: 'edge-to-text'\n }\n })({size, isStepperHidden: hideStepper})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n {!hideStepper && <div className={stepperContainerStyles({size})}>\n <StepButton\n ref={decrementButtonRef}\n slot=\"decrement\"\n style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'decrement',\n size\n })}>\n <Dash size={size} className={iconStyles({})} />\n </StepButton>\n <StepButton\n ref={incrementButtonRef}\n slot=\"increment\"\n style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n type: 'increment',\n size\n })}>\n <Add size={size} className={iconStyles({})} />\n </StepButton>\n </div>}\n </FieldGroup>\n {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }\n }\n </AriaNumberField>\n );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n [props, ref] = useContextProps(props, ref, ButtonContext as any);\n let ctx = props as any;\n /**\n * Must use div for now because Safari pointer event bugs on disabled form elements.\n * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n */\n let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover(props);\n let renderProps = useRenderProps({\n ...props,\n values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n defaultClassName: 'react-aria-Button'\n });\n return (\n <div\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}\n data-pressed={ctx.isPressed || isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n let {\n className,\n style,\n children,\n defaultClassName = undefined,\n defaultChildren = undefined,\n defaultStyle,\n values\n } = props;\n\n return useMemo(() => {\n let computedClassName: string | undefined;\n let computedStyle: CSSProperties | undefined;\n let computedChildren: ReactNode | undefined;\n\n if (typeof className === 'function') {\n computedClassName = className({...values, defaultClassName});\n } else {\n computedClassName = className;\n }\n\n if (typeof style === 'function') {\n computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n } else {\n computedStyle = style;\n }\n\n if (typeof children === 'function') {\n computedChildren = children({...values, defaultChildren});\n } else if (children == null) {\n computedChildren = defaultChildren;\n } else {\n computedChildren = children;\n }\n\n return {\n className: computedClassName ?? defaultClassName,\n style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n children: computedChildren ?? defaultChildren,\n 'data-rac': ''\n };\n }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.css.map"}