@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,17 @@
1
+ import React from 'react';
2
+ import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
3
+ import { ItemProps } from './Item';
4
+ declare type LinkProps = {
5
+ download?: string;
6
+ href?: string;
7
+ hrefLang?: string;
8
+ media?: string;
9
+ ping?: string;
10
+ rel?: string;
11
+ target?: string;
12
+ type?: string;
13
+ referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
14
+ };
15
+ declare type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps;
16
+ export declare const LinkItem: PolymorphicForwardRefComponent<"a", LinkItemProps>;
17
+ export {};
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.LinkItem = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _Link = _interopRequireDefault(require("../Link"));
11
+
12
+ var _sx = require("../sx");
13
+
14
+ var _Item = require("./Item");
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ 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); }
19
+
20
+ const LinkItem = /*#__PURE__*/_react.default.forwardRef(({
21
+ sx = {},
22
+ as: Component,
23
+ ...props
24
+ }, forwardedRef) => {
25
+ const styles = {
26
+ // occupy full size of Item
27
+ paddingX: 2,
28
+ paddingY: '6px',
29
+ // custom value off the scale
30
+ display: 'flex',
31
+ flexGrow: 1,
32
+ // full width
33
+ borderRadius: 2,
34
+ // inherit Item styles
35
+ color: 'inherit',
36
+ '&:hover': {
37
+ color: 'inherit',
38
+ textDecoration: 'none'
39
+ }
40
+ };
41
+ return /*#__PURE__*/_react.default.createElement(_Item.Item, {
42
+ sx: {
43
+ paddingY: 0,
44
+ paddingX: 0
45
+ },
46
+ _PrivateItemWrapper: ({
47
+ children
48
+ }) => /*#__PURE__*/_react.default.createElement(_Link.default, _extends({
49
+ as: Component,
50
+ sx: (0, _sx.merge)(styles, sx)
51
+ }, props, {
52
+ ref: forwardedRef
53
+ }), children)
54
+ }, props.children);
55
+ });
56
+
57
+ exports.LinkItem = LinkItem;
@@ -0,0 +1,28 @@
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.LinkItem = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const Link_1 = __importDefault(require("../Link"));
9
+ const sx_1 = require("../sx");
10
+ const Item_1 = require("./Item");
11
+ exports.LinkItem = react_1.default.forwardRef(({ sx = {}, as: Component, ...props }, forwardedRef) => {
12
+ const styles = {
13
+ // occupy full size of Item
14
+ paddingX: 2,
15
+ paddingY: '6px',
16
+ display: 'flex',
17
+ flexGrow: 1,
18
+ borderRadius: 2,
19
+ // inherit Item styles
20
+ color: 'inherit',
21
+ '&:hover': { color: 'inherit', textDecoration: 'none' }
22
+ };
23
+ return (<Item_1.Item sx={{ paddingY: 0, paddingX: 0 }} _PrivateItemWrapper={({ children }) => (<Link_1.default as={Component} sx={sx_1.merge(styles, sx)} {...props} ref={forwardedRef}>
24
+ {children}
25
+ </Link_1.default>)}>
26
+ {props.children}
27
+ </Item_1.Item>);
28
+ });
@@ -0,0 +1,26 @@
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 type ListProps = {
6
+ /**
7
+ * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
8
+ */
9
+ variant?: 'inset' | 'full';
10
+ /**
11
+ * Whether multiple Items or a single Item can be selected.
12
+ */
13
+ selectionVariant?: 'single' | 'multiple';
14
+ /**
15
+ * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
16
+ */
17
+ showDividers?: boolean;
18
+ /**
19
+ * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
20
+ */
21
+ role?: AriaRole;
22
+ } & SxProp;
23
+ declare type ContextProps = Omit<ListProps, 'sx'>;
24
+ export declare const ListContext: React.Context<ContextProps>;
25
+ export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
26
+ export {};
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.List = exports.ListContext = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _sx = _interopRequireWildcard(require("../sx"));
13
+
14
+ 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); }
15
+
16
+ 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; }
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ 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); }
21
+
22
+ const ListContext = /*#__PURE__*/_react.default.createContext({});
23
+
24
+ exports.ListContext = ListContext;
25
+
26
+ const ListBox = _styledComponents.default.ul.withConfig({
27
+ displayName: "List__ListBox",
28
+ componentId: "cvbq60-0"
29
+ })(_sx.default);
30
+
31
+ const List = /*#__PURE__*/_react.default.forwardRef(({
32
+ variant = 'inset',
33
+ selectionVariant,
34
+ showDividers = false,
35
+ sx: sxProp = {},
36
+ ...props
37
+ }, forwardedRef) => {
38
+ const styles = {
39
+ margin: 0,
40
+ paddingInlineStart: 0,
41
+ // reset ul styles
42
+ paddingY: variant === 'inset' ? 2 : 0
43
+ };
44
+ return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
45
+ sx: (0, _sx.merge)(styles, sxProp),
46
+ "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
47
+ }, props, {
48
+ ref: forwardedRef
49
+ }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
50
+ value: {
51
+ variant,
52
+ selectionVariant,
53
+ showDividers
54
+ }
55
+ }, props.children));
56
+ });
57
+
58
+ exports.List = List;
59
+ List.displayName = 'ActionList';
@@ -0,0 +1,41 @@
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.List = exports.ListContext = void 0;
26
+ const react_1 = __importDefault(require("react"));
27
+ const styled_components_1 = __importDefault(require("styled-components"));
28
+ const sx_1 = __importStar(require("../sx"));
29
+ exports.ListContext = react_1.default.createContext({});
30
+ const ListBox = styled_components_1.default.ul(sx_1.default);
31
+ exports.List = react_1.default.forwardRef(({ variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props }, forwardedRef) => {
32
+ const styles = {
33
+ margin: 0,
34
+ paddingInlineStart: 0,
35
+ paddingY: variant === 'inset' ? 2 : 0
36
+ };
37
+ return (<ListBox sx={sx_1.merge(styles, sxProp)} aria-multiselectable={selectionVariant === 'multiple' ? true : undefined} {...props} ref={forwardedRef}>
38
+ <exports.ListContext.Provider value={{ variant, selectionVariant, showDividers }}>{props.children}</exports.ListContext.Provider>
39
+ </ListBox>);
40
+ });
41
+ exports.List.displayName = 'ActionList';
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ItemProps } from './Item';
3
+ declare type SelectionProps = Pick<ItemProps, 'selected' | 'disabled'>;
4
+ export declare const Selection: React.FC<SelectionProps>;
5
+ export {};
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Selection = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _octiconsReact = require("@primer/octicons-react");
11
+
12
+ var _List = require("./List");
13
+
14
+ var _Group = require("./Group");
15
+
16
+ var _Visuals = require("./Visuals");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ const Selection = ({
21
+ selected,
22
+ disabled
23
+ }) => {
24
+ const {
25
+ selectionVariant: listSelectionVariant
26
+ } = _react.default.useContext(_List.ListContext);
27
+
28
+ const {
29
+ selectionVariant: groupSelectionVariant
30
+ } = _react.default.useContext(_Group.GroupContext);
31
+ /** selectionVariant in Group can override the selectionVariant in List root */
32
+
33
+
34
+ const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
35
+
36
+ if (!selectionVariant) {
37
+ // to avoid confusion, fail loudly instead of silently ignoring
38
+ if (selected) throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
39
+ return null;
40
+ }
41
+
42
+ if (selectionVariant === 'single') {
43
+ return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
44
+ }
45
+ /**
46
+ * selectionVariant is multiple
47
+ * readOnly is required because we are doing a one-way bind to `checked`
48
+ * aria-readonly="false" tells screen that they can still interact with the checkbox
49
+ */
50
+
51
+
52
+ return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
53
+ sx: {
54
+ input: {
55
+ margin: 0,
56
+ pointerEvents: 'none'
57
+ }
58
+ }
59
+ }, /*#__PURE__*/_react.default.createElement("input", {
60
+ type: "checkbox",
61
+ checked: selected,
62
+ disabled: disabled,
63
+ tabIndex: -1,
64
+ readOnly: true,
65
+ "aria-readonly": "false"
66
+ }));
67
+ };
68
+
69
+ exports.Selection = Selection;
70
+ Selection.displayName = "Selection";
@@ -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.Selection = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const octicons_react_1 = require("@primer/octicons-react");
9
+ const List_1 = require("./List");
10
+ const Group_1 = require("./Group");
11
+ const Visuals_1 = require("./Visuals");
12
+ const Selection = ({ selected, disabled }) => {
13
+ const { selectionVariant: listSelectionVariant } = react_1.default.useContext(List_1.ListContext);
14
+ const { selectionVariant: groupSelectionVariant } = react_1.default.useContext(Group_1.GroupContext);
15
+ /** selectionVariant in Group can override the selectionVariant in List root */
16
+ const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant;
17
+ // if selectionVariant is not set on List, don't show selection
18
+ if (!selectionVariant) {
19
+ // to avoid confusion, fail loudly instead of silently ignoring
20
+ if (selected)
21
+ throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
22
+ return null;
23
+ }
24
+ if (selectionVariant === 'single') {
25
+ return <Visuals_1.LeadingVisualContainer>{selected && <octicons_react_1.CheckIcon />}</Visuals_1.LeadingVisualContainer>;
26
+ }
27
+ /**
28
+ * selectionVariant is multiple
29
+ * readOnly is required because we are doing a one-way bind to `checked`
30
+ * aria-readonly="false" tells screen that they can still interact with the checkbox
31
+ */
32
+ return (<Visuals_1.LeadingVisualContainer sx={{ input: { margin: 0, pointerEvents: 'none' } }}>
33
+ <input type="checkbox" checked={selected} disabled={disabled} tabIndex={-1} readOnly aria-readonly="false"/>
34
+ </Visuals_1.LeadingVisualContainer>);
35
+ };
36
+ exports.Selection = Selection;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { SxProp } from '../sx';
3
+ declare type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>;
4
+ export declare const LeadingVisualContainer: React.FC<VisualProps>;
5
+ export declare type LeadingVisualProps = VisualProps;
6
+ export declare const LeadingVisual: React.FC<VisualProps>;
7
+ export declare type TrailingVisualProps = VisualProps;
8
+ export declare const TrailingVisual: React.FC<VisualProps>;
9
+ export {};
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _Box = _interopRequireDefault(require("../Box"));
11
+
12
+ var _sx = require("../sx");
13
+
14
+ var _constants = require("../constants");
15
+
16
+ var _Item = require("./Item");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ 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); }
21
+
22
+ const LeadingVisualContainer = ({
23
+ sx = {},
24
+ ...props
25
+ }) => {
26
+ return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
27
+ as: "span",
28
+ sx: (0, _sx.merge)({
29
+ height: _Item.TEXT_ROW_HEIGHT,
30
+ // match height of text row
31
+ minWidth: (0, _constants.get)('space.3'),
32
+ maxWidth: _Item.TEXT_ROW_HEIGHT,
33
+ // square (same as height)
34
+ display: 'flex',
35
+ justifyContent: 'center',
36
+ alignItems: 'center',
37
+ flexShrink: 0,
38
+ marginRight: 2
39
+ }, sx)
40
+ }, props));
41
+ };
42
+
43
+ exports.LeadingVisualContainer = LeadingVisualContainer;
44
+ LeadingVisualContainer.displayName = "LeadingVisualContainer";
45
+
46
+ const LeadingVisual = ({
47
+ sx = {},
48
+ ...props
49
+ }) => {
50
+ return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
51
+ name: "LeadingVisual"
52
+ }, ({
53
+ variant,
54
+ disabled
55
+ }) => /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, _extends({
56
+ sx: (0, _sx.merge)({
57
+ color: (0, _Item.getVariantStyles)(variant, disabled).iconColor,
58
+ svg: {
59
+ fontSize: 0
60
+ }
61
+ }, sx)
62
+ }, props), props.children));
63
+ };
64
+
65
+ exports.LeadingVisual = LeadingVisual;
66
+ LeadingVisual.displayName = "LeadingVisual";
67
+
68
+ const TrailingVisual = ({
69
+ sx = {},
70
+ ...props
71
+ }) => {
72
+ return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
73
+ name: "TrailingVisual"
74
+ }, ({
75
+ variant,
76
+ disabled
77
+ }) => /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
78
+ as: "span",
79
+ sx: (0, _sx.merge)({
80
+ height: '20px',
81
+ // match height of text row
82
+ flexShrink: 0,
83
+ color: (0, _Item.getVariantStyles)(variant, disabled).annotationColor,
84
+ marginLeft: 2
85
+ }, sx)
86
+ }, props), props.children));
87
+ };
88
+
89
+ exports.TrailingVisual = TrailingVisual;
90
+ TrailingVisual.displayName = "TrailingVisual";
@@ -0,0 +1,48 @@
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.TrailingVisual = exports.LeadingVisual = exports.LeadingVisualContainer = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const Box_1 = __importDefault(require("../Box"));
9
+ const sx_1 = require("../sx");
10
+ const constants_1 = require("../constants");
11
+ const Item_1 = require("./Item");
12
+ const LeadingVisualContainer = ({ sx = {}, ...props }) => {
13
+ return (<Box_1.default as="span" sx={sx_1.merge({
14
+ height: Item_1.TEXT_ROW_HEIGHT,
15
+ minWidth: constants_1.get('space.3'),
16
+ maxWidth: Item_1.TEXT_ROW_HEIGHT,
17
+ display: 'flex',
18
+ justifyContent: 'center',
19
+ alignItems: 'center',
20
+ flexShrink: 0,
21
+ marginRight: 2
22
+ }, sx)} {...props}/>);
23
+ };
24
+ exports.LeadingVisualContainer = LeadingVisualContainer;
25
+ const LeadingVisual = ({ sx = {}, ...props }) => {
26
+ return (<Item_1.Slot name="LeadingVisual">
27
+ {({ variant, disabled }) => (<exports.LeadingVisualContainer sx={sx_1.merge({
28
+ color: Item_1.getVariantStyles(variant, disabled).iconColor,
29
+ svg: { fontSize: 0 }
30
+ }, sx)} {...props}>
31
+ {props.children}
32
+ </exports.LeadingVisualContainer>)}
33
+ </Item_1.Slot>);
34
+ };
35
+ exports.LeadingVisual = LeadingVisual;
36
+ const TrailingVisual = ({ sx = {}, ...props }) => {
37
+ return (<Item_1.Slot name="TrailingVisual">
38
+ {({ variant, disabled }) => (<Box_1.default as="span" sx={sx_1.merge({
39
+ height: '20px',
40
+ flexShrink: 0,
41
+ color: Item_1.getVariantStyles(variant, disabled).annotationColor,
42
+ marginLeft: 2
43
+ }, sx)} {...props}>
44
+ {props.children}
45
+ </Box_1.default>)}
46
+ </Item_1.Slot>);
47
+ };
48
+ exports.TrailingVisual = TrailingVisual;
@@ -0,0 +1,36 @@
1
+ /// <reference types="react" />
2
+ import { Divider } from './Divider';
3
+ export type { ListProps as ActionListProps } from './List';
4
+ export type { GroupProps } from './Group';
5
+ export type { ItemProps } from './Item';
6
+ export type { DescriptionProps } from './Description';
7
+ export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
8
+ /**
9
+ * Collection of list-related components.
10
+ */
11
+ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
12
+ /** Collects related `Items` in an `ActionList`. */
13
+ Group: import("react").FC<import("./Group").GroupProps>;
14
+ /** An actionable or selectable `Item` */
15
+ Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
16
+ /** A `Item` that renders a full-size anchor inside ListItem */
17
+ LinkItem: import("@radix-ui/react-polymorphic").ForwardRefComponent<"a", Pick<import("./Item").ItemProps, "children" | "sx"> & {
18
+ download?: string | undefined;
19
+ href?: string | undefined;
20
+ hrefLang?: string | undefined;
21
+ media?: string | undefined;
22
+ ping?: string | undefined;
23
+ rel?: string | undefined;
24
+ target?: string | undefined;
25
+ type?: string | undefined;
26
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
27
+ }>;
28
+ /** Visually separates `Item`s or `Group`s in an `ActionList`. */
29
+ Divider: typeof Divider;
30
+ /** Secondary text which provides additional information about an `Item`. */
31
+ Description: import("react").FC<import("./Description").DescriptionProps>;
32
+ /** Icon (or similar) positioned before `Item` text. */
33
+ LeadingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
34
+ /** Icon (or similar) positioned after `Item` text. */
35
+ TrailingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
36
+ };
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ActionList = void 0;
4
+ const List_1 = require("./List");
5
+ const Group_1 = require("./Group");
6
+ const Item_1 = require("./Item");
7
+ const LinkItem_1 = require("./LinkItem");
8
+ const Divider_1 = require("./Divider");
9
+ const Description_1 = require("./Description");
10
+ const Visuals_1 = require("./Visuals");
11
+ /**
12
+ * Collection of list-related components.
13
+ */
14
+ exports.ActionList = Object.assign(List_1.List, {
15
+ /** Collects related `Items` in an `ActionList`. */
16
+ Group: Group_1.Group,
17
+ /** An actionable or selectable `Item` */
18
+ Item: Item_1.Item,
19
+ /** A `Item` that renders a full-size anchor inside ListItem */
20
+ LinkItem: LinkItem_1.LinkItem,
21
+ /** Visually separates `Item`s or `Group`s in an `ActionList`. */
22
+ Divider: Divider_1.Divider,
23
+ /** Secondary text which provides additional information about an `Item`. */
24
+ Description: Description_1.Description,
25
+ /** Icon (or similar) positioned before `Item` text. */
26
+ LeadingVisual: Visuals_1.LeadingVisual,
27
+ /** Icon (or similar) positioned after `Item` text. */
28
+ TrailingVisual: Visuals_1.TrailingVisual
29
+ });
@@ -0,0 +1,73 @@
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.ActionMenu = void 0;
26
+ const List_1 = require("./ActionList/List");
27
+ const Item_1 = require("./ActionList/Item");
28
+ const Divider_1 = require("./ActionList/Divider");
29
+ const Button_1 = __importDefault(require("./Button"));
30
+ const react_1 = __importStar(require("react"));
31
+ const AnchoredOverlay_1 = require("./AnchoredOverlay");
32
+ const useProvidedStateOrCreate_1 = require("./hooks/useProvidedStateOrCreate");
33
+ const hooks_1 = require("./hooks");
34
+ const ActionMenuItem = (props) => <Item_1.Item role="menuitem" {...props}/>;
35
+ ActionMenuItem.displayName = 'ActionMenu.Item';
36
+ const ActionMenuBase = ({ anchorContent, renderAnchor = (props) => <Button_1.default {...props}/>, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }) => {
37
+ const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(open, setOpen, false);
38
+ const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
39
+ const onOpen = react_1.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
40
+ const onClose = react_1.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
41
+ const renderMenuAnchor = react_1.useMemo(() => {
42
+ if (renderAnchor === null) {
43
+ return null;
44
+ }
45
+ return (props) => {
46
+ return renderAnchor({
47
+ 'aria-label': 'menu',
48
+ children: anchorContent,
49
+ ...props
50
+ });
51
+ };
52
+ }, [anchorContent, renderAnchor]);
53
+ const itemsToRender = react_1.useMemo(() => {
54
+ return items.map(item => {
55
+ return {
56
+ ...item,
57
+ role: 'menuitem',
58
+ onAction: (props, event) => {
59
+ const actionCallback = item.onAction ?? onAction;
60
+ actionCallback?.(props, event);
61
+ if (!event.defaultPrevented) {
62
+ onClose();
63
+ }
64
+ }
65
+ };
66
+ });
67
+ }, [items, onAction, onClose]);
68
+ return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={combinedOpenState} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps}>
69
+ <List_1.List {...listProps} role="menu" items={itemsToRender}/>
70
+ </AnchoredOverlay_1.AnchoredOverlay>);
71
+ };
72
+ ActionMenuBase.displayName = 'ActionMenu';
73
+ exports.ActionMenu = Object.assign(ActionMenuBase, { Divider: Divider_1.Divider, Item: ActionMenuItem });