@primer/components 31.2.0-rc.b718ff50 → 31.2.0-rc.decfca99

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 (420) hide show
  1. package/.github/workflows/ci.yml +5 -2
  2. package/.github/workflows/release.yml +1 -0
  3. package/.github/workflows/release_canary.yml +1 -0
  4. package/CHANGELOG.md +13 -1
  5. package/dist/browser.esm.js +620 -618
  6. package/dist/browser.esm.js.map +1 -1
  7. package/dist/browser.umd.js +188 -186
  8. package/dist/browser.umd.js.map +1 -1
  9. package/docs/content/ActionList2.mdx +360 -0
  10. package/docs/content/StateLabel.md +5 -4
  11. package/docs/content/getting-started.md +1 -1
  12. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  13. package/lib/ActionList/Divider.jsx +29 -0
  14. package/lib/ActionList/Group.jsx +23 -0
  15. package/lib/ActionList/Header.jsx +66 -0
  16. package/lib/ActionList/Item.jsx +301 -0
  17. package/lib/ActionList/List.jsx +138 -0
  18. package/lib/ActionList/index.js +12 -23
  19. package/lib/ActionList2/Description.d.ts +12 -0
  20. package/lib/ActionList2/Description.js +53 -0
  21. package/lib/ActionList2/Description.jsx +30 -0
  22. package/lib/ActionList2/Divider.d.ts +5 -0
  23. package/lib/ActionList2/Divider.js +35 -0
  24. package/lib/ActionList2/Divider.jsx +22 -0
  25. package/lib/ActionList2/Group.d.ts +11 -0
  26. package/lib/ActionList2/Group.js +57 -0
  27. package/lib/ActionList2/Group.jsx +25 -0
  28. package/lib/ActionList2/Header.d.ts +26 -0
  29. package/lib/ActionList2/Header.js +55 -0
  30. package/lib/ActionList2/Header.jsx +36 -0
  31. package/lib/ActionList2/Item.d.ts +63 -0
  32. package/lib/ActionList2/Item.js +244 -0
  33. package/lib/ActionList2/Item.jsx +174 -0
  34. package/lib/ActionList2/LinkItem.d.ts +17 -0
  35. package/lib/ActionList2/LinkItem.js +57 -0
  36. package/lib/ActionList2/LinkItem.jsx +28 -0
  37. package/lib/ActionList2/List.d.ts +26 -0
  38. package/lib/ActionList2/List.js +59 -0
  39. package/lib/ActionList2/List.jsx +41 -0
  40. package/lib/ActionList2/Selection.d.ts +5 -0
  41. package/lib/ActionList2/Selection.js +70 -0
  42. package/lib/ActionList2/Selection.jsx +36 -0
  43. package/lib/ActionList2/Visuals.d.ts +9 -0
  44. package/lib/ActionList2/Visuals.js +90 -0
  45. package/lib/ActionList2/Visuals.jsx +48 -0
  46. package/lib/ActionList2/index.d.ts +36 -0
  47. package/lib/ActionList2/index.js +29 -0
  48. package/lib/ActionMenu.jsx +73 -0
  49. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +100 -0
  50. package/lib/AnchoredOverlay/index.js +4 -12
  51. package/lib/Autocomplete/Autocomplete.d.ts +28 -28
  52. package/lib/Autocomplete/Autocomplete.jsx +100 -0
  53. package/lib/Autocomplete/AutocompleteContext.jsx +5 -0
  54. package/lib/Autocomplete/AutocompleteInput.d.ts +28 -28
  55. package/lib/Autocomplete/AutocompleteInput.jsx +113 -0
  56. package/lib/Autocomplete/AutocompleteMenu.jsx +190 -0
  57. package/lib/Autocomplete/AutocompleteOverlay.jsx +55 -0
  58. package/lib/Autocomplete/index.js +7 -14
  59. package/lib/Avatar.jsx +34 -0
  60. package/lib/AvatarPair.jsx +29 -0
  61. package/lib/AvatarStack.jsx +151 -0
  62. package/lib/BaseStyles.jsx +65 -0
  63. package/lib/BorderBox.jsx +18 -0
  64. package/lib/Box.jsx +10 -0
  65. package/lib/BranchName.jsx +20 -0
  66. package/lib/Breadcrumbs.jsx +74 -0
  67. package/lib/Button/Button.d.ts +25 -25
  68. package/lib/Button/Button.jsx +60 -0
  69. package/lib/Button/ButtonBase.jsx +36 -0
  70. package/lib/Button/ButtonClose.d.ts +45 -45
  71. package/lib/Button/ButtonClose.jsx +55 -0
  72. package/lib/Button/ButtonDanger.d.ts +25 -25
  73. package/lib/Button/ButtonDanger.jsx +63 -0
  74. package/lib/Button/ButtonGroup.jsx +55 -0
  75. package/lib/Button/ButtonInvisible.d.ts +25 -25
  76. package/lib/Button/ButtonInvisible.jsx +52 -0
  77. package/lib/Button/ButtonOutline.d.ts +25 -25
  78. package/lib/Button/ButtonOutline.jsx +63 -0
  79. package/lib/Button/ButtonPrimary.d.ts +25 -25
  80. package/lib/Button/ButtonPrimary.jsx +62 -0
  81. package/lib/Button/ButtonStyles.jsx +37 -0
  82. package/lib/Button/ButtonTableList.jsx +49 -0
  83. package/lib/Button/index.js +21 -70
  84. package/lib/Caret.jsx +93 -0
  85. package/lib/CircleBadge.jsx +43 -0
  86. package/lib/CircleOcticon.d.ts +42 -42
  87. package/lib/CircleOcticon.jsx +21 -0
  88. package/lib/CounterLabel.jsx +44 -0
  89. package/lib/Details.jsx +21 -0
  90. package/lib/Dialog/ConfirmationDialog.jsx +146 -0
  91. package/lib/Dialog/Dialog.jsx +273 -0
  92. package/lib/Dialog.d.ts +45 -45
  93. package/lib/Dialog.jsx +131 -0
  94. package/lib/Dropdown.d.ts +176 -176
  95. package/lib/Dropdown.jsx +134 -0
  96. package/lib/DropdownMenu/DropdownButton.d.ts +46 -46
  97. package/lib/DropdownMenu/DropdownButton.jsx +14 -0
  98. package/lib/DropdownMenu/DropdownMenu.jsx +70 -0
  99. package/lib/DropdownMenu/index.js +6 -20
  100. package/lib/DropdownStyles.js +18 -26
  101. package/lib/FilterList.d.ts +42 -42
  102. package/lib/FilterList.jsx +63 -0
  103. package/lib/FilteredActionList/FilteredActionList.jsx +100 -0
  104. package/lib/FilteredActionList/index.js +4 -12
  105. package/lib/FilteredSearch.jsx +29 -0
  106. package/lib/Flash.jsx +70 -0
  107. package/lib/Flex.jsx +15 -0
  108. package/lib/FormGroup.jsx +25 -0
  109. package/lib/Grid.jsx +15 -0
  110. package/lib/Header.jsx +90 -0
  111. package/lib/Heading.jsx +21 -0
  112. package/lib/Label.jsx +84 -0
  113. package/lib/LabelGroup.jsx +19 -0
  114. package/lib/Link.jsx +38 -0
  115. package/lib/Overlay.jsx +156 -0
  116. package/lib/Pagehead.jsx +18 -0
  117. package/lib/Pagination/Pagination.jsx +163 -0
  118. package/lib/Pagination/index.js +6 -12
  119. package/lib/Pagination/model.jsx +174 -0
  120. package/lib/PointerBox.jsx +25 -0
  121. package/lib/Popover.jsx +210 -0
  122. package/lib/Portal/Portal.jsx +79 -0
  123. package/lib/Portal/index.js +5 -16
  124. package/lib/Position.d.ts +4 -4
  125. package/lib/Position.jsx +46 -0
  126. package/lib/ProgressBar.jsx +39 -0
  127. package/lib/SelectMenu/SelectMenu.d.ts +246 -246
  128. package/lib/SelectMenu/SelectMenu.jsx +114 -0
  129. package/lib/SelectMenu/SelectMenuContext.jsx +5 -0
  130. package/lib/SelectMenu/SelectMenuDivider.jsx +43 -0
  131. package/lib/SelectMenu/SelectMenuFilter.jsx +59 -0
  132. package/lib/SelectMenu/SelectMenuFooter.jsx +46 -0
  133. package/lib/SelectMenu/SelectMenuHeader.jsx +44 -0
  134. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  135. package/lib/SelectMenu/SelectMenuItem.jsx +143 -0
  136. package/lib/SelectMenu/SelectMenuList.jsx +60 -0
  137. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +21 -0
  138. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  139. package/lib/SelectMenu/SelectMenuModal.jsx +119 -0
  140. package/lib/SelectMenu/SelectMenuTab.jsx +93 -0
  141. package/lib/SelectMenu/SelectMenuTabPanel.jsx +43 -0
  142. package/lib/SelectMenu/SelectMenuTabs.jsx +58 -0
  143. package/lib/SelectMenu/hooks/useKeyboardNav.js +80 -96
  144. package/lib/SelectMenu/index.js +7 -14
  145. package/lib/SelectPanel/SelectPanel.jsx +105 -0
  146. package/lib/SelectPanel/index.js +4 -12
  147. package/lib/SideNav.jsx +177 -0
  148. package/lib/Spinner.jsx +35 -0
  149. package/lib/StateLabel.d.ts +1 -1
  150. package/lib/StateLabel.js +6 -1
  151. package/lib/StateLabel.jsx +94 -0
  152. package/lib/StyledOcticon.jsx +20 -0
  153. package/lib/SubNav.jsx +104 -0
  154. package/lib/TabNav.jsx +60 -0
  155. package/lib/Text.jsx +14 -0
  156. package/lib/TextInput.jsx +23 -0
  157. package/lib/TextInputWithTokens.d.ts +28 -28
  158. package/lib/TextInputWithTokens.jsx +218 -0
  159. package/lib/ThemeProvider.jsx +130 -0
  160. package/lib/Timeline.d.ts +43 -43
  161. package/lib/Timeline.jsx +124 -0
  162. package/lib/Token/AvatarToken.d.ts +1 -1
  163. package/lib/Token/AvatarToken.jsx +54 -0
  164. package/lib/Token/IssueLabelToken.d.ts +1 -1
  165. package/lib/Token/IssueLabelToken.jsx +125 -0
  166. package/lib/Token/Token.d.ts +1 -1
  167. package/lib/Token/Token.jsx +103 -0
  168. package/lib/Token/TokenBase.jsx +88 -0
  169. package/lib/Token/_RemoveTokenButton.jsx +108 -0
  170. package/lib/Token/_TokenTextContainer.jsx +49 -0
  171. package/lib/Token/index.js +11 -30
  172. package/lib/Tooltip.jsx +246 -0
  173. package/lib/Truncate.jsx +27 -0
  174. package/lib/UnderlineNav.jsx +90 -0
  175. package/lib/_TextInputWrapper.js +2 -2
  176. package/lib/_TextInputWrapper.jsx +120 -0
  177. package/lib/_UnstyledTextInput.jsx +22 -0
  178. package/lib/__tests__/ActionList.test.jsx +49 -0
  179. package/lib/__tests__/ActionList.types.test.jsx +45 -0
  180. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  181. package/lib/__tests__/ActionList2.test.js +53 -0
  182. package/lib/__tests__/ActionList2.test.jsx +46 -0
  183. package/lib/__tests__/ActionMenu.test.jsx +124 -0
  184. package/lib/__tests__/AnchoredOverlay.test.jsx +121 -0
  185. package/lib/__tests__/Autocomplete.test.jsx +299 -0
  186. package/lib/__tests__/Avatar.test.jsx +42 -0
  187. package/lib/__tests__/AvatarStack.test.jsx +43 -0
  188. package/lib/__tests__/BorderBox.test.jsx +36 -0
  189. package/lib/__tests__/Box.test.jsx +41 -0
  190. package/lib/__tests__/BranchName.test.jsx +27 -0
  191. package/lib/__tests__/Breadcrumbs.test.jsx +28 -0
  192. package/lib/__tests__/BreadcrumbsItem.test.jsx +31 -0
  193. package/lib/__tests__/Button.test.jsx +100 -0
  194. package/lib/__tests__/Caret.test.jsx +37 -0
  195. package/lib/__tests__/CircleBadge.test.jsx +55 -0
  196. package/lib/__tests__/CircleOcticon.test.jsx +45 -0
  197. package/lib/__tests__/ConfirmationDialog.test.jsx +119 -0
  198. package/lib/__tests__/CounterLabel.test.jsx +36 -0
  199. package/lib/__tests__/Details.test.jsx +85 -0
  200. package/lib/__tests__/Dialog.test.jsx +139 -0
  201. package/lib/__tests__/Dropdown.test.jsx +49 -0
  202. package/lib/__tests__/DropdownMenu.test.jsx +119 -0
  203. package/lib/__tests__/FilterList.test.jsx +27 -0
  204. package/lib/__tests__/FilterListItem.test.jsx +31 -0
  205. package/lib/__tests__/FilteredSearch.test.jsx +27 -0
  206. package/lib/__tests__/Flash.test.jsx +36 -0
  207. package/lib/__tests__/Flex.test.jsx +51 -0
  208. package/lib/__tests__/FormGroup.test.jsx +36 -0
  209. package/lib/__tests__/Grid.test.jsx +69 -0
  210. package/lib/__tests__/Header.test.jsx +45 -0
  211. package/lib/__tests__/Heading.test.jsx +71 -0
  212. package/lib/__tests__/KeyPaths.types.test.js +5 -8
  213. package/lib/__tests__/Label.test.jsx +33 -0
  214. package/lib/__tests__/LabelGroup.test.jsx +29 -0
  215. package/lib/__tests__/Link.test.jsx +43 -0
  216. package/lib/__tests__/Merge.types.test.js +13 -19
  217. package/lib/__tests__/Overlay.test.jsx +105 -0
  218. package/lib/__tests__/Pagehead.test.jsx +25 -0
  219. package/lib/__tests__/Pagination/Pagination.test.jsx +32 -0
  220. package/lib/__tests__/Pagination/PaginationModel.test.jsx +118 -0
  221. package/lib/__tests__/PointerBox.test.jsx +33 -0
  222. package/lib/__tests__/Popover.test.jsx +58 -0
  223. package/lib/__tests__/Portal.test.jsx +102 -0
  224. package/lib/__tests__/Position.test.jsx +96 -0
  225. package/lib/__tests__/ProgressBar.test.jsx +38 -0
  226. package/lib/__tests__/SelectMenu.test.jsx +120 -0
  227. package/lib/__tests__/SelectPanel.test.jsx +48 -0
  228. package/lib/__tests__/SideNav.test.jsx +55 -0
  229. package/lib/__tests__/Spinner.test.jsx +41 -0
  230. package/lib/__tests__/StateLabel.test.jsx +46 -0
  231. package/lib/__tests__/StyledOcticon.test.jsx +28 -0
  232. package/lib/__tests__/SubNav.test.jsx +47 -0
  233. package/lib/__tests__/SubNavLink.test.jsx +31 -0
  234. package/lib/__tests__/TabNav.test.jsx +32 -0
  235. package/lib/__tests__/Text.test.jsx +71 -0
  236. package/lib/__tests__/TextInput.test.jsx +45 -0
  237. package/lib/__tests__/TextInputWithTokens.test.jsx +302 -0
  238. package/lib/__tests__/ThemeProvider.test.jsx +314 -0
  239. package/lib/__tests__/Timeline.test.jsx +51 -0
  240. package/lib/__tests__/Token.test.jsx +93 -0
  241. package/lib/__tests__/Tooltip.test.jsx +46 -0
  242. package/lib/__tests__/Truncate.test.jsx +41 -0
  243. package/lib/__tests__/UnderlineNav.test.jsx +53 -0
  244. package/lib/__tests__/UnderlineNavLink.test.jsx +31 -0
  245. package/lib/__tests__/behaviors/anchoredPosition.test.js +229 -376
  246. package/lib/__tests__/behaviors/focusTrap.test.jsx +184 -0
  247. package/lib/__tests__/behaviors/focusZone.test.jsx +406 -0
  248. package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx +58 -0
  249. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +145 -216
  250. package/lib/__tests__/filterObject.test.js +48 -27
  251. package/lib/__tests__/hooks/useAnchoredPosition.test.jsx +29 -0
  252. package/lib/__tests__/hooks/useOnEscapePress.test.jsx +19 -0
  253. package/lib/__tests__/hooks/useOnOutsideClick.test.jsx +63 -0
  254. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.jsx +61 -0
  255. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.jsx +56 -0
  256. package/lib/__tests__/theme.test.js +33 -34
  257. package/lib/__tests__/themeGet.test.js +12 -23
  258. package/lib/__tests__/useSafeTimeout.test.jsx +36 -0
  259. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  260. package/lib/__tests__/utils/createSlots.test.js +75 -0
  261. package/lib/__tests__/utils/createSlots.test.jsx +57 -0
  262. package/lib/behaviors/anchoredPosition.js +205 -234
  263. package/lib/behaviors/focusTrap.js +121 -157
  264. package/lib/behaviors/focusZone.js +434 -509
  265. package/lib/behaviors/scrollIntoViewingArea.js +18 -35
  266. package/lib/constants.js +39 -43
  267. package/lib/drafts.d.ts +7 -0
  268. package/lib/drafts.js +20 -0
  269. package/lib/hooks/index.js +16 -60
  270. package/lib/hooks/useAnchoredPosition.js +32 -40
  271. package/lib/hooks/useCombinedRefs.js +32 -36
  272. package/lib/hooks/useDetails.jsx +39 -0
  273. package/lib/hooks/useDialog.js +72 -96
  274. package/lib/hooks/useFocusTrap.js +43 -60
  275. package/lib/hooks/useFocusZone.js +54 -50
  276. package/lib/hooks/useOnEscapePress.js +25 -36
  277. package/lib/hooks/useOnOutsideClick.jsx +61 -0
  278. package/lib/hooks/useOpenAndCloseFocus.js +22 -34
  279. package/lib/hooks/useOverlay.jsx +15 -0
  280. package/lib/hooks/useProvidedRefOrCreate.js +10 -14
  281. package/lib/hooks/useProvidedStateOrCreate.js +13 -16
  282. package/lib/hooks/useRenderForcingRef.js +13 -17
  283. package/lib/hooks/useResizeObserver.js +15 -18
  284. package/lib/hooks/useSafeTimeout.js +22 -30
  285. package/lib/hooks/useScrollFlash.js +16 -23
  286. package/lib/index.js +161 -636
  287. package/lib/polyfills/eventListenerSignal.js +37 -45
  288. package/lib/stories/ActionList2.stories.js +908 -0
  289. package/lib/stories/TextInput.stories.js +144 -0
  290. package/lib/sx.d.ts +2 -0
  291. package/lib/sx.js +10 -14
  292. package/lib/theme-preval.js +65 -2945
  293. package/lib/theme.js +3 -12
  294. package/lib/utils/create-slots.d.ts +17 -0
  295. package/lib/utils/create-slots.js +105 -0
  296. package/lib/utils/create-slots.jsx +65 -0
  297. package/lib/utils/deprecate.jsx +59 -0
  298. package/lib/utils/isNumeric.jsx +7 -0
  299. package/lib/utils/iterateFocusableElements.js +63 -85
  300. package/lib/utils/ssr.jsx +6 -0
  301. package/lib/utils/test-deprecations.jsx +20 -0
  302. package/lib/utils/test-helpers.jsx +8 -0
  303. package/lib/utils/test-matchers.jsx +100 -0
  304. package/lib/utils/testing.d.ts +14 -1
  305. package/lib/utils/testing.jsx +206 -0
  306. package/lib/utils/theme.js +33 -47
  307. package/lib/utils/types/AriaRole.js +2 -1
  308. package/lib/utils/types/ComponentProps.js +2 -1
  309. package/lib/utils/types/Flatten.js +2 -1
  310. package/lib/utils/types/KeyPaths.js +2 -1
  311. package/lib/utils/types/MandateProps.js +16 -1
  312. package/lib/utils/types/Merge.js +2 -1
  313. package/lib/utils/types/index.js +16 -69
  314. package/lib/utils/uniqueId.js +5 -8
  315. package/lib/utils/use-force-update.d.ts +1 -0
  316. package/lib/utils/use-force-update.js +13 -0
  317. package/lib/utils/useIsomorphicLayoutEffect.js +8 -11
  318. package/lib/utils/userAgent.js +8 -12
  319. package/lib-esm/ActionList2/Description.d.ts +12 -0
  320. package/lib-esm/ActionList2/Description.js +37 -0
  321. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  322. package/lib-esm/ActionList2/Divider.js +23 -0
  323. package/lib-esm/ActionList2/Group.d.ts +11 -0
  324. package/lib-esm/ActionList2/Group.js +40 -0
  325. package/lib-esm/ActionList2/Header.d.ts +26 -0
  326. package/lib-esm/ActionList2/Header.js +44 -0
  327. package/lib-esm/ActionList2/Item.d.ts +63 -0
  328. package/lib-esm/ActionList2/Item.js +210 -0
  329. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  330. package/lib-esm/ActionList2/LinkItem.js +43 -0
  331. package/lib-esm/ActionList2/List.d.ts +26 -0
  332. package/lib-esm/ActionList2/List.js +37 -0
  333. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  334. package/lib-esm/ActionList2/Selection.js +52 -0
  335. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  336. package/lib-esm/ActionList2/Visuals.js +68 -0
  337. package/lib-esm/ActionList2/index.d.ts +36 -0
  338. package/lib-esm/ActionList2/index.js +33 -0
  339. package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -28
  340. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -28
  341. package/lib-esm/Button/Button.d.ts +25 -25
  342. package/lib-esm/Button/ButtonClose.d.ts +45 -45
  343. package/lib-esm/Button/ButtonDanger.d.ts +25 -25
  344. package/lib-esm/Button/ButtonInvisible.d.ts +25 -25
  345. package/lib-esm/Button/ButtonOutline.d.ts +25 -25
  346. package/lib-esm/Button/ButtonPrimary.d.ts +25 -25
  347. package/lib-esm/CircleOcticon.d.ts +42 -42
  348. package/lib-esm/Dialog.d.ts +45 -45
  349. package/lib-esm/Dropdown.d.ts +176 -176
  350. package/lib-esm/DropdownMenu/DropdownButton.d.ts +46 -46
  351. package/lib-esm/FilterList.d.ts +42 -42
  352. package/lib-esm/Position.d.ts +4 -4
  353. package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -246
  354. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  355. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  356. package/lib-esm/StateLabel.d.ts +1 -1
  357. package/lib-esm/StateLabel.js +7 -2
  358. package/lib-esm/TextInputWithTokens.d.ts +28 -28
  359. package/lib-esm/Timeline.d.ts +43 -43
  360. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  361. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  362. package/lib-esm/Token/Token.d.ts +1 -1
  363. package/lib-esm/_TextInputWrapper.js +2 -2
  364. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  365. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  366. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  367. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  368. package/lib-esm/drafts.d.ts +7 -0
  369. package/lib-esm/drafts.js +8 -0
  370. package/lib-esm/stories/ActionList2.stories.js +796 -0
  371. package/lib-esm/stories/TextInput.stories.js +117 -0
  372. package/lib-esm/sx.d.ts +2 -0
  373. package/lib-esm/sx.js +3 -1
  374. package/lib-esm/theme-preval.js +81 -2
  375. package/lib-esm/utils/create-slots.d.ts +17 -0
  376. package/lib-esm/utils/create-slots.js +84 -0
  377. package/lib-esm/utils/testing.d.ts +14 -1
  378. package/lib-esm/utils/use-force-update.d.ts +1 -0
  379. package/lib-esm/utils/use-force-update.js +6 -0
  380. package/package-lock.json +153 -14
  381. package/package.json +7 -4
  382. package/script/build +1 -1
  383. package/src/ActionList2/Description.tsx +49 -0
  384. package/src/ActionList2/Divider.tsx +24 -0
  385. package/src/ActionList2/Group.tsx +34 -0
  386. package/src/ActionList2/Header.tsx +58 -0
  387. package/src/ActionList2/Item.tsx +245 -0
  388. package/src/ActionList2/LinkItem.tsx +49 -0
  389. package/src/ActionList2/List.tsx +55 -0
  390. package/src/ActionList2/Selection.tsx +40 -0
  391. package/src/ActionList2/Visuals.tsx +76 -0
  392. package/src/ActionList2/index.ts +39 -0
  393. package/src/StateLabel.tsx +14 -2
  394. package/src/_TextInputWrapper.tsx +7 -0
  395. package/src/__tests__/ActionList2.test.tsx +47 -0
  396. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  397. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +1 -0
  398. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +1 -0
  399. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +1 -0
  400. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +1 -0
  401. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -0
  402. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +4 -0
  403. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -0
  404. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +13 -6
  405. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +1 -0
  406. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +66 -0
  407. package/src/__tests__/__snapshots__/Token.test.tsx.snap +17 -0
  408. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  409. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  410. package/src/drafts.ts +9 -0
  411. package/src/stories/ActionList2.stories.tsx +1291 -0
  412. package/src/stories/TextInput.stories.tsx +113 -0
  413. package/src/sx.ts +3 -0
  414. package/src/theme-preval.js +1 -0
  415. package/src/utils/create-slots.tsx +96 -0
  416. package/src/utils/use-force-update.ts +7 -0
  417. package/stats.html +1 -1
  418. package/tsconfig.base.json +20 -0
  419. package/tsconfig.build.json +2 -2
  420. package/tsconfig.json +4 -17
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Group = exports.GroupContext = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _Box = _interopRequireDefault(require("../Box"));
11
+
12
+ var _Header = require("./Header");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
+
18
+ const GroupContext = /*#__PURE__*/_react.default.createContext({});
19
+
20
+ exports.GroupContext = GroupContext;
21
+
22
+ const Group = ({
23
+ title,
24
+ variant,
25
+ auxiliaryText,
26
+ selectionVariant,
27
+ sx = {},
28
+ ...props
29
+ }) => {
30
+ return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
31
+ as: "li",
32
+ sx: {
33
+ '&:not(:first-child)': {
34
+ marginTop: 2
35
+ },
36
+ listStyle: 'none',
37
+ // hide the ::marker inserted by browser's stylesheet
38
+ ...sx
39
+ }
40
+ }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
41
+ title: title,
42
+ variant: variant,
43
+ auxiliaryText: auxiliaryText
44
+ }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
45
+ value: {
46
+ selectionVariant
47
+ }
48
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, {
49
+ as: "ul",
50
+ sx: {
51
+ paddingInlineStart: 0
52
+ }
53
+ }, props.children)));
54
+ };
55
+
56
+ exports.Group = Group;
57
+ Group.displayName = "Group";
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Group = exports.GroupContext = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const Box_1 = __importDefault(require("../Box"));
9
+ const Header_1 = require("./Header");
10
+ exports.GroupContext = react_1.default.createContext({});
11
+ const Group = ({ title, variant, auxiliaryText, selectionVariant, sx = {}, ...props }) => {
12
+ return (<Box_1.default as="li" sx={{
13
+ '&:not(:first-child)': { marginTop: 2 },
14
+ listStyle: 'none',
15
+ ...sx
16
+ }} {...props}>
17
+ {title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
18
+ <exports.GroupContext.Provider value={{ selectionVariant }}>
19
+ <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
20
+ {props.children}
21
+ </Box_1.default>
22
+ </exports.GroupContext.Provider>
23
+ </Box_1.default>);
24
+ };
25
+ exports.Group = Group;
@@ -0,0 +1,26 @@
1
+ /// <reference types="react" />
2
+ import { SxProp } from '../sx';
3
+ /**
4
+ * Contract for props passed to the `Header` component.
5
+ */
6
+ export declare type HeaderProps = {
7
+ /**
8
+ * Style variations. Usage is discretionary.
9
+ *
10
+ * - `"filled"` - Superimposed on a background, offset from nearby content
11
+ * - `"subtle"` - Relatively less offset from nearby content
12
+ */
13
+ variant?: 'subtle' | 'filled';
14
+ /**
15
+ * Primary text which names a `Group`.
16
+ */
17
+ title?: string;
18
+ /**
19
+ * Secondary text which provides additional information about a `Group`.
20
+ */
21
+ auxiliaryText?: string;
22
+ } & SxProp;
23
+ /**
24
+ * Displays the name and description of a `Group`.
25
+ */
26
+ export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Header = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _Box = _interopRequireDefault(require("../Box"));
11
+
12
+ var _List = require("./List");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
+
18
+ /**
19
+ * Displays the name and description of a `Group`.
20
+ */
21
+ const Header = ({
22
+ variant = 'subtle',
23
+ title,
24
+ auxiliaryText,
25
+ sx = {},
26
+ ...props
27
+ }) => {
28
+ const {
29
+ variant: listVariant
30
+ } = _react.default.useContext(_List.ListContext);
31
+
32
+ const styles = {
33
+ paddingY: '6px',
34
+ paddingX: listVariant === 'full' ? 2 : 3,
35
+ fontSize: 0,
36
+ fontWeight: 'bold',
37
+ color: 'fg.muted',
38
+ ...(variant === 'filled' && {
39
+ backgroundColor: 'canvas.subtle',
40
+ marginX: 0,
41
+ marginBottom: 2,
42
+ borderTop: '1px solid',
43
+ borderBottom: '1px solid',
44
+ borderColor: 'neutral.muted'
45
+ }),
46
+ ...sx
47
+ };
48
+ return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
49
+ sx: styles,
50
+ role: "heading"
51
+ }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
52
+ };
53
+
54
+ exports.Header = Header;
55
+ Header.displayName = "Header";
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Header = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const Box_1 = __importDefault(require("../Box"));
9
+ const List_1 = require("./List");
10
+ /**
11
+ * Displays the name and description of a `Group`.
12
+ */
13
+ const Header = ({ variant = 'subtle', title, auxiliaryText, sx = {}, ...props }) => {
14
+ const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
15
+ const styles = {
16
+ paddingY: '6px',
17
+ paddingX: listVariant === 'full' ? 2 : 3,
18
+ fontSize: 0,
19
+ fontWeight: 'bold',
20
+ color: 'fg.muted',
21
+ ...(variant === 'filled' && {
22
+ backgroundColor: 'canvas.subtle',
23
+ marginX: 0,
24
+ marginBottom: 2,
25
+ borderTop: '1px solid',
26
+ borderBottom: '1px solid',
27
+ borderColor: 'neutral.muted'
28
+ }),
29
+ ...sx
30
+ };
31
+ return (<Box_1.default sx={styles} role="heading" {...props}>
32
+ {title}
33
+ {auxiliaryText && <span>{auxiliaryText}</span>}
34
+ </Box_1.default>);
35
+ };
36
+ exports.Header = Header;
@@ -0,0 +1,63 @@
1
+ import React from 'react';
2
+ import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
+ import { SxProp } from '../sx';
4
+ import { AriaRole } from '../utils/types';
5
+ export declare const getVariantStyles: (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
6
+ color: string;
7
+ iconColor: string;
8
+ annotationColor: string;
9
+ hoverColor?: undefined;
10
+ } | {
11
+ color: string;
12
+ iconColor: string;
13
+ annotationColor: string;
14
+ hoverColor: string;
15
+ };
16
+ export declare type ItemProps = {
17
+ /**
18
+ * Primary content for an Item
19
+ */
20
+ children?: React.ReactNode;
21
+ /**
22
+ * Callback that will trigger both on click selection and keyboard selection.
23
+ */
24
+ onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
25
+ /**
26
+ * Is the `Item` is currently selected?
27
+ */
28
+ selected?: boolean;
29
+ /**
30
+ * Style variations associated with various `Item` types.
31
+ *
32
+ * - `"default"` - An action `Item`.
33
+ * - `"danger"` - A destructive action `Item`.
34
+ */
35
+ variant?: 'default' | 'danger';
36
+ /**
37
+ * Items that are disabled can not be clicked, selected, or navigated through.
38
+ */
39
+ disabled?: boolean;
40
+ /**
41
+ * The ARIA role describing the function of `Item` component. `option` is a common value.
42
+ */
43
+ role?: AriaRole;
44
+ /**
45
+ * id to attach to the root element of the Item
46
+ */
47
+ id?: string;
48
+ /**
49
+ * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
50
+ */
51
+ _PrivateItemWrapper?: React.FC;
52
+ } & SxProp;
53
+ declare const Slot: React.FC<{
54
+ name: "LeadingVisual" | "InlineDescription" | "BlockDescription" | "TrailingVisual";
55
+ children: React.ReactNode;
56
+ }>;
57
+ export { Slot };
58
+ export declare type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
59
+ inlineDescriptionId: string;
60
+ blockDescriptionId: string;
61
+ };
62
+ export declare const TEXT_ROW_HEIGHT = "20px";
63
+ export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;
@@ -0,0 +1,244 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Item = exports.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _ssr = require("@react-aria/ssr");
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _ThemeProvider = require("../ThemeProvider");
15
+
16
+ var _Box = _interopRequireDefault(require("../Box"));
17
+
18
+ var _sx = _interopRequireWildcard(require("../sx"));
19
+
20
+ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
21
+
22
+ var _List = require("./List");
23
+
24
+ var _Selection = require("./Selection");
25
+
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
+
30
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
+
32
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
33
+
34
+ const getVariantStyles = (variant, disabled) => {
35
+ if (disabled) {
36
+ return {
37
+ color: 'fg.muted',
38
+ iconColor: 'fg.muted',
39
+ annotationColor: 'fg.muted'
40
+ };
41
+ }
42
+
43
+ switch (variant) {
44
+ case 'danger':
45
+ return {
46
+ color: 'danger.fg',
47
+ iconColor: 'danger.fg',
48
+ annotationColor: 'fg.muted',
49
+ hoverColor: 'actionListItem.danger.hoverText'
50
+ };
51
+
52
+ default:
53
+ return {
54
+ color: 'fg.default',
55
+ iconColor: 'fg.muted',
56
+ annotationColor: 'fg.muted',
57
+ hoverColor: 'fg.default'
58
+ };
59
+ }
60
+ };
61
+
62
+ exports.getVariantStyles = getVariantStyles;
63
+ const {
64
+ Slots,
65
+ Slot
66
+ } = (0, _createSlots.default)(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
67
+ exports.Slot = Slot;
68
+
69
+ const LiBox = _styledComponents.default.li.withConfig({
70
+ displayName: "Item__LiBox",
71
+ componentId: "c3scat-0"
72
+ })(_sx.default);
73
+
74
+ const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
75
+
76
+ exports.TEXT_ROW_HEIGHT = TEXT_ROW_HEIGHT;
77
+
78
+ const Item = /*#__PURE__*/_react.default.forwardRef(({
79
+ variant = 'default',
80
+ disabled = false,
81
+ selected = undefined,
82
+ onSelect = () => null,
83
+ sx: sxProp = {},
84
+ id,
85
+ _PrivateItemWrapper,
86
+ ...props
87
+ }, forwardedRef) => {
88
+ const {
89
+ variant: listVariant,
90
+ showDividers
91
+ } = _react.default.useContext(_List.ListContext);
92
+
93
+ const {
94
+ theme
95
+ } = (0, _ThemeProvider.useTheme)();
96
+ const styles = {
97
+ display: 'flex',
98
+ paddingX: 2,
99
+ fontSize: 1,
100
+ paddingY: '6px',
101
+ // custom value off the scale
102
+ lineHeight: TEXT_ROW_HEIGHT,
103
+ minHeight: 5,
104
+ marginX: listVariant === 'inset' ? 2 : 0,
105
+ borderRadius: listVariant === 'inset' ? 2 : 0,
106
+ transition: 'background 33.333ms linear',
107
+ color: getVariantStyles(variant, disabled).color,
108
+ textDecoration: 'none',
109
+ // for as="a"
110
+ ':not([aria-disabled])': {
111
+ cursor: 'pointer'
112
+ },
113
+ '@media (hover: hover) and (pointer: fine)': {
114
+ ':hover:not([aria-disabled])': {
115
+ backgroundColor: `actionListItem.${variant}.hoverBg`,
116
+ color: getVariantStyles(variant, disabled).hoverColor
117
+ },
118
+ ':focus:not([data-focus-visible-added])': {
119
+ backgroundColor: `actionListItem.${variant}.selectedBg`,
120
+ color: getVariantStyles(variant, disabled).hoverColor,
121
+ outline: 'none'
122
+ },
123
+ '&[data-focus-visible-added]': {
124
+ // we don't use :focus-visible because not all browsers (safari) have it yet
125
+ outline: 'none',
126
+ border: `2 solid`,
127
+ boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
128
+ },
129
+ ':active:not([aria-disabled])': {
130
+ backgroundColor: `actionListItem.${variant}.activeBg`,
131
+ color: getVariantStyles(variant, disabled).hoverColor
132
+ }
133
+ },
134
+
135
+ /** Divider styles */
136
+ '[data-component="ActionList.Item--DividerContainer"]': {
137
+ position: 'relative'
138
+ },
139
+ '[data-component="ActionList.Item--DividerContainer"]::before': {
140
+ content: '" "',
141
+ display: 'block',
142
+ position: 'absolute',
143
+ width: '100%',
144
+ top: '-7px',
145
+ border: '0 solid',
146
+ borderTopWidth: showDividers ? `1px` : '0',
147
+ borderColor: 'var(--divider-color, transparent)'
148
+ },
149
+ // show between 2 items
150
+ ':not(:first-of-type)': {
151
+ '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
152
+ },
153
+ // hide divider after dividers & group header, with higher importance!
154
+ '[data-component="ActionList.Divider"] + &': {
155
+ '--divider-color': 'transparent !important'
156
+ },
157
+ // hide border on current and previous item
158
+ '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
159
+ '--divider-color': 'transparent'
160
+ },
161
+ '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
162
+ '--divider-color': 'transparent'
163
+ }
164
+ };
165
+
166
+ const clickHandler = _react.default.useCallback(event => {
167
+ if (disabled) return;
168
+ if (!event.defaultPrevented) onSelect(event);
169
+ }, [onSelect, disabled]);
170
+
171
+ const keyPressHandler = _react.default.useCallback(event => {
172
+ if (disabled) return;
173
+
174
+ if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
175
+ onSelect(event);
176
+ }
177
+ }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
178
+
179
+
180
+ const labelId = (0, _ssr.useSSRSafeId)(id);
181
+ const inlineDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--inline-description`);
182
+ const blockDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--block-description`);
183
+ const ItemWrapper = _PrivateItemWrapper || _react.default.Fragment;
184
+ return /*#__PURE__*/_react.default.createElement(Slots, {
185
+ context: {
186
+ variant,
187
+ disabled,
188
+ inlineDescriptionId,
189
+ blockDescriptionId
190
+ }
191
+ }, slots => /*#__PURE__*/_react.default.createElement(LiBox, _extends({
192
+ ref: forwardedRef,
193
+ sx: (0, _sx.merge)(styles, sxProp),
194
+ onClick: clickHandler,
195
+ onKeyPress: keyPressHandler,
196
+ "aria-selected": selected,
197
+ "aria-disabled": disabled ? true : undefined,
198
+ tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
199
+ "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
200
+ "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
201
+ }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
202
+ selected: selected,
203
+ disabled: disabled
204
+ }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
205
+ "data-component": "ActionList.Item--DividerContainer",
206
+ sx: {
207
+ display: 'flex',
208
+ flexDirection: 'column',
209
+ flexGrow: 1,
210
+ minWidth: 0
211
+ }
212
+ }, /*#__PURE__*/_react.default.createElement(ConditionalBox, {
213
+ if: Boolean(slots.TrailingVisual),
214
+ sx: {
215
+ display: 'flex',
216
+ flexGrow: 1
217
+ }
218
+ }, /*#__PURE__*/_react.default.createElement(ConditionalBox, {
219
+ if: Boolean(slots.InlineDescription),
220
+ sx: {
221
+ display: 'flex',
222
+ flexGrow: 1,
223
+ alignItems: 'baseline',
224
+ minWidth: 0
225
+ }
226
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, {
227
+ as: "span",
228
+ id: labelId,
229
+ sx: {
230
+ flexGrow: slots.InlineDescription ? 0 : 1
231
+ }
232
+ }, props.children), slots.InlineDescription), slots.TrailingVisual), slots.BlockDescription))));
233
+ });
234
+
235
+ exports.Item = Item;
236
+ Item.displayName = 'ActionList.Item';
237
+
238
+ const ConditionalBox = props => {
239
+ const {
240
+ if: condition,
241
+ ...rest
242
+ } = props;
243
+ if (condition) return /*#__PURE__*/_react.default.createElement(_Box.default, rest, props.children);else return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
244
+ };
@@ -0,0 +1,174 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __importDefault = (this && this.__importDefault) || function (mod) {
22
+ return (mod && mod.__esModule) ? mod : { "default": mod };
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ exports.Item = exports.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
26
+ const react_1 = __importDefault(require("react"));
27
+ const ssr_1 = require("@react-aria/ssr");
28
+ const styled_components_1 = __importDefault(require("styled-components"));
29
+ const ThemeProvider_1 = require("../ThemeProvider");
30
+ const Box_1 = __importDefault(require("../Box"));
31
+ const sx_1 = __importStar(require("../sx"));
32
+ const create_slots_1 = __importDefault(require("../utils/create-slots"));
33
+ const List_1 = require("./List");
34
+ const Selection_1 = require("./Selection");
35
+ const getVariantStyles = (variant, disabled) => {
36
+ if (disabled) {
37
+ return {
38
+ color: 'fg.muted',
39
+ iconColor: 'fg.muted',
40
+ annotationColor: 'fg.muted'
41
+ };
42
+ }
43
+ switch (variant) {
44
+ case 'danger':
45
+ return {
46
+ color: 'danger.fg',
47
+ iconColor: 'danger.fg',
48
+ annotationColor: 'fg.muted',
49
+ hoverColor: 'actionListItem.danger.hoverText'
50
+ };
51
+ default:
52
+ return {
53
+ color: 'fg.default',
54
+ iconColor: 'fg.muted',
55
+ annotationColor: 'fg.muted',
56
+ hoverColor: 'fg.default'
57
+ };
58
+ }
59
+ };
60
+ exports.getVariantStyles = getVariantStyles;
61
+ const { Slots, Slot } = create_slots_1.default(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
62
+ exports.Slot = Slot;
63
+ const LiBox = styled_components_1.default.li(sx_1.default);
64
+ exports.TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
65
+ exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = false, selected = undefined, onSelect = () => null, sx: sxProp = {}, id, _PrivateItemWrapper, ...props }, forwardedRef) => {
66
+ const { variant: listVariant, showDividers } = react_1.default.useContext(List_1.ListContext);
67
+ const { theme } = ThemeProvider_1.useTheme();
68
+ const styles = {
69
+ display: 'flex',
70
+ paddingX: 2,
71
+ fontSize: 1,
72
+ paddingY: '6px',
73
+ lineHeight: exports.TEXT_ROW_HEIGHT,
74
+ minHeight: 5,
75
+ marginX: listVariant === 'inset' ? 2 : 0,
76
+ borderRadius: listVariant === 'inset' ? 2 : 0,
77
+ transition: 'background 33.333ms linear',
78
+ color: exports.getVariantStyles(variant, disabled).color,
79
+ textDecoration: 'none',
80
+ ':not([aria-disabled])': { cursor: 'pointer' },
81
+ '@media (hover: hover) and (pointer: fine)': {
82
+ ':hover:not([aria-disabled])': {
83
+ backgroundColor: `actionListItem.${variant}.hoverBg`,
84
+ color: exports.getVariantStyles(variant, disabled).hoverColor
85
+ },
86
+ ':focus:not([data-focus-visible-added])': {
87
+ backgroundColor: `actionListItem.${variant}.selectedBg`,
88
+ color: exports.getVariantStyles(variant, disabled).hoverColor,
89
+ outline: 'none'
90
+ },
91
+ '&[data-focus-visible-added]': {
92
+ // we don't use :focus-visible because not all browsers (safari) have it yet
93
+ outline: 'none',
94
+ border: `2 solid`,
95
+ boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
96
+ },
97
+ ':active:not([aria-disabled])': {
98
+ backgroundColor: `actionListItem.${variant}.activeBg`,
99
+ color: exports.getVariantStyles(variant, disabled).hoverColor
100
+ }
101
+ },
102
+ /** Divider styles */
103
+ '[data-component="ActionList.Item--DividerContainer"]': {
104
+ position: 'relative'
105
+ },
106
+ '[data-component="ActionList.Item--DividerContainer"]::before': {
107
+ content: '" "',
108
+ display: 'block',
109
+ position: 'absolute',
110
+ width: '100%',
111
+ top: '-7px',
112
+ border: '0 solid',
113
+ borderTopWidth: showDividers ? `1px` : '0',
114
+ borderColor: 'var(--divider-color, transparent)'
115
+ },
116
+ // show between 2 items
117
+ ':not(:first-of-type)': { '--divider-color': theme?.colors.actionListItem.inlineDivider },
118
+ // hide divider after dividers & group header, with higher importance!
119
+ '[data-component="ActionList.Divider"] + &': { '--divider-color': 'transparent !important' },
120
+ // hide border on current and previous item
121
+ '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
122
+ '--divider-color': 'transparent'
123
+ },
124
+ '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
125
+ '--divider-color': 'transparent'
126
+ }
127
+ };
128
+ const clickHandler = react_1.default.useCallback(event => {
129
+ if (disabled)
130
+ return;
131
+ if (!event.defaultPrevented)
132
+ onSelect(event);
133
+ }, [onSelect, disabled]);
134
+ const keyPressHandler = react_1.default.useCallback(event => {
135
+ if (disabled)
136
+ return;
137
+ if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
138
+ onSelect(event);
139
+ }
140
+ }, [onSelect, disabled]);
141
+ // use props.id if provided, otherwise generate one.
142
+ const labelId = ssr_1.useSSRSafeId(id);
143
+ const inlineDescriptionId = ssr_1.useSSRSafeId(id && `${id}--inline-description`);
144
+ const blockDescriptionId = ssr_1.useSSRSafeId(id && `${id}--block-description`);
145
+ const ItemWrapper = _PrivateItemWrapper || react_1.default.Fragment;
146
+ return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
147
+ {slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
148
+ <ItemWrapper>
149
+ <Selection_1.Selection selected={selected} disabled={disabled}/>
150
+ {slots.LeadingVisual}
151
+ <Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
152
+ <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>
153
+ <ConditionalBox if={Boolean(slots.InlineDescription)} sx={{ display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0 }}>
154
+ <Box_1.default as="span" id={labelId} sx={{ flexGrow: slots.InlineDescription ? 0 : 1 }}>
155
+ {props.children}
156
+ </Box_1.default>
157
+ {slots.InlineDescription}
158
+ </ConditionalBox>
159
+ {slots.TrailingVisual}
160
+ </ConditionalBox>
161
+ {slots.BlockDescription}
162
+ </Box_1.default>
163
+ </ItemWrapper>
164
+ </LiBox>)}
165
+ </Slots>);
166
+ });
167
+ exports.Item.displayName = 'ActionList.Item';
168
+ const ConditionalBox = props => {
169
+ const { if: condition, ...rest } = props;
170
+ if (condition)
171
+ return <Box_1.default {...rest}>{props.children}</Box_1.default>;
172
+ else
173
+ return <>{props.children}</>;
174
+ };