@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

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 (506) hide show
  1. package/CHANGELOG.md +892 -0
  2. package/dist/browser.esm.js +2272 -2
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +2272 -2
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Divider.jsx +29 -0
  7. package/lib/ActionList/Group.jsx +23 -0
  8. package/lib/ActionList/Header.js +1 -1
  9. package/lib/ActionList/Header.jsx +66 -0
  10. package/lib/ActionList/Item.js +65 -40
  11. package/lib/ActionList/Item.jsx +311 -0
  12. package/lib/ActionList/List.js +1 -1
  13. package/lib/ActionList/List.jsx +138 -0
  14. package/lib/ActionList/index.js +12 -23
  15. package/lib/ActionList2/Description.jsx +29 -0
  16. package/lib/ActionList2/Divider.d.ts +2 -3
  17. package/lib/ActionList2/Divider.js +5 -10
  18. package/lib/ActionList2/Divider.jsx +22 -0
  19. package/lib/ActionList2/Group.d.ts +2 -28
  20. package/lib/ActionList2/Group.js +6 -55
  21. package/lib/ActionList2/Group.jsx +25 -0
  22. package/lib/ActionList2/Header.d.ts +26 -0
  23. package/lib/ActionList2/Header.js +55 -0
  24. package/lib/ActionList2/Header.jsx +36 -0
  25. package/lib/ActionList2/Item.js +7 -25
  26. package/lib/ActionList2/Item.jsx +174 -0
  27. package/lib/ActionList2/LinkItem.jsx +28 -0
  28. package/lib/ActionList2/List.d.ts +1 -1
  29. package/lib/ActionList2/List.js +2 -11
  30. package/lib/ActionList2/List.jsx +41 -0
  31. package/lib/ActionList2/Selection.js +1 -14
  32. package/lib/ActionList2/Selection.jsx +50 -0
  33. package/lib/ActionList2/Visuals.jsx +48 -0
  34. package/lib/ActionList2/index.d.ts +2 -1
  35. package/lib/ActionList2/index.js +23 -41
  36. package/lib/ActionMenu.jsx +73 -0
  37. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +100 -0
  38. package/lib/AnchoredOverlay/index.js +4 -12
  39. package/lib/Autocomplete/Autocomplete.d.ts +4 -6
  40. package/lib/Autocomplete/Autocomplete.jsx +100 -0
  41. package/lib/Autocomplete/AutocompleteContext.jsx +5 -0
  42. package/lib/Autocomplete/AutocompleteInput.d.ts +4 -6
  43. package/lib/Autocomplete/AutocompleteInput.jsx +113 -0
  44. package/lib/Autocomplete/AutocompleteMenu.jsx +190 -0
  45. package/lib/Autocomplete/AutocompleteOverlay.jsx +55 -0
  46. package/lib/Autocomplete/index.js +7 -14
  47. package/lib/Avatar.d.ts +2 -1
  48. package/lib/Avatar.js +1 -1
  49. package/lib/Avatar.jsx +34 -0
  50. package/lib/AvatarPair.jsx +29 -0
  51. package/lib/AvatarStack.jsx +151 -0
  52. package/lib/BaseStyles.js +20 -2
  53. package/lib/BaseStyles.jsx +65 -0
  54. package/lib/BorderBox.js +1 -1
  55. package/lib/BorderBox.jsx +18 -0
  56. package/lib/Box.js +1 -1
  57. package/lib/Box.jsx +10 -0
  58. package/lib/BranchName.d.ts +2 -1
  59. package/lib/BranchName.js +1 -1
  60. package/lib/BranchName.jsx +20 -0
  61. package/lib/Breadcrumbs.d.ts +7 -8
  62. package/lib/Breadcrumbs.js +15 -10
  63. package/lib/Breadcrumbs.jsx +74 -0
  64. package/lib/Button/Button.d.ts +5 -5
  65. package/lib/Button/Button.js +7 -3
  66. package/lib/Button/Button.jsx +60 -0
  67. package/lib/Button/ButtonBase.d.ts +8 -5
  68. package/lib/Button/ButtonBase.js +5 -1
  69. package/lib/Button/ButtonBase.jsx +36 -0
  70. package/lib/Button/ButtonClose.d.ts +47 -5
  71. package/lib/Button/ButtonClose.js +1 -1
  72. package/lib/Button/ButtonClose.jsx +55 -0
  73. package/lib/Button/ButtonDanger.d.ts +5 -5
  74. package/lib/Button/ButtonDanger.js +6 -2
  75. package/lib/Button/ButtonDanger.jsx +63 -0
  76. package/lib/Button/ButtonGroup.js +1 -1
  77. package/lib/Button/ButtonGroup.jsx +55 -0
  78. package/lib/Button/ButtonInvisible.d.ts +5 -5
  79. package/lib/Button/ButtonInvisible.js +6 -2
  80. package/lib/Button/ButtonInvisible.jsx +52 -0
  81. package/lib/Button/ButtonOutline.d.ts +5 -5
  82. package/lib/Button/ButtonOutline.js +6 -2
  83. package/lib/Button/ButtonOutline.jsx +63 -0
  84. package/lib/Button/ButtonPrimary.d.ts +5 -5
  85. package/lib/Button/ButtonPrimary.js +6 -2
  86. package/lib/Button/ButtonPrimary.jsx +62 -0
  87. package/lib/Button/ButtonStyles.jsx +37 -0
  88. package/lib/Button/ButtonTableList.d.ts +2 -1
  89. package/lib/Button/ButtonTableList.js +1 -1
  90. package/lib/Button/ButtonTableList.jsx +49 -0
  91. package/lib/Button/index.js +21 -70
  92. package/lib/Caret.jsx +93 -0
  93. package/lib/CircleBadge.d.ts +5 -4
  94. package/lib/CircleBadge.js +1 -1
  95. package/lib/CircleBadge.jsx +43 -0
  96. package/lib/CircleOcticon.d.ts +36 -37
  97. package/lib/CircleOcticon.jsx +21 -0
  98. package/lib/CounterLabel.d.ts +2 -1
  99. package/lib/CounterLabel.js +1 -1
  100. package/lib/CounterLabel.jsx +44 -0
  101. package/lib/Details.d.ts +2 -1
  102. package/lib/Details.js +4 -2
  103. package/lib/Details.jsx +21 -0
  104. package/lib/Dialog/ConfirmationDialog.jsx +146 -0
  105. package/lib/Dialog/Dialog.d.ts +9 -5
  106. package/lib/Dialog/Dialog.js +11 -17
  107. package/lib/Dialog/Dialog.jsx +273 -0
  108. package/lib/Dialog.d.ts +40 -40
  109. package/lib/Dialog.js +1 -1
  110. package/lib/Dialog.jsx +131 -0
  111. package/lib/Dropdown.d.ts +171 -22
  112. package/lib/Dropdown.js +3 -3
  113. package/lib/Dropdown.jsx +134 -0
  114. package/lib/DropdownMenu/DropdownButton.d.ts +49 -9
  115. package/lib/DropdownMenu/DropdownButton.js +1 -3
  116. package/lib/DropdownMenu/DropdownButton.jsx +14 -0
  117. package/lib/DropdownMenu/DropdownMenu.jsx +70 -0
  118. package/lib/DropdownMenu/index.js +6 -20
  119. package/lib/DropdownStyles.js +18 -26
  120. package/lib/EmojiPicker/EmojiPicker.d.ts +17 -0
  121. package/lib/EmojiPicker/EmojiPicker.js +202 -0
  122. package/lib/EmojiPicker/EmojiPicker.jsx +132 -0
  123. package/lib/EmojiPicker/EmojiPickerAnchor.d.ts +0 -0
  124. package/lib/EmojiPicker/EmojiPickerAnchor.js +1 -0
  125. package/lib/EmojiPicker/EmojiPickerAnchor.jsx +1 -0
  126. package/lib/EmojiPicker/EmojiPickerPanel.d.ts +3 -0
  127. package/lib/EmojiPicker/EmojiPickerPanel.js +18 -0
  128. package/lib/EmojiPicker/EmojiPickerPanel.jsx +10 -0
  129. package/lib/EmojiPicker/data.d.ts +9 -0
  130. package/lib/EmojiPicker/data.js +7254 -0
  131. package/lib/EmojiPicker/index.d.ts +2 -0
  132. package/lib/EmojiPicker/index.js +8 -0
  133. package/lib/FilterList.d.ts +303 -265
  134. package/lib/FilterList.js +6 -2
  135. package/lib/FilterList.jsx +63 -0
  136. package/lib/FilteredActionList/FilteredActionList.js +1 -1
  137. package/lib/FilteredActionList/FilteredActionList.jsx +100 -0
  138. package/lib/FilteredActionList/index.js +4 -12
  139. package/lib/FilteredSearch.d.ts +2 -1
  140. package/lib/FilteredSearch.js +1 -1
  141. package/lib/FilteredSearch.jsx +29 -0
  142. package/lib/Flash.d.ts +2 -1
  143. package/lib/Flash.js +1 -1
  144. package/lib/Flash.jsx +70 -0
  145. package/lib/Flex.js +1 -1
  146. package/lib/Flex.jsx +15 -0
  147. package/lib/FormGroup.d.ts +5 -4
  148. package/lib/FormGroup.js +2 -2
  149. package/lib/FormGroup.jsx +25 -0
  150. package/lib/Grid.jsx +15 -0
  151. package/lib/Header.d.ts +7 -6
  152. package/lib/Header.js +4 -4
  153. package/lib/Header.jsx +90 -0
  154. package/lib/Heading.d.ts +2 -1
  155. package/lib/Heading.js +6 -1
  156. package/lib/Heading.jsx +21 -0
  157. package/lib/Label.d.ts +2 -1
  158. package/lib/Label.js +3 -2
  159. package/lib/Label.jsx +84 -0
  160. package/lib/LabelGroup.d.ts +2 -1
  161. package/lib/LabelGroup.js +2 -2
  162. package/lib/LabelGroup.jsx +19 -0
  163. package/lib/Link.d.ts +2 -1
  164. package/lib/Link.js +1 -1
  165. package/lib/Link.jsx +38 -0
  166. package/lib/NewButton/button-counter.jsx +14 -0
  167. package/lib/NewButton/button.js +42 -34
  168. package/lib/NewButton/button.jsx +278 -0
  169. package/lib/NewButton/index.js +5 -12
  170. package/lib/NewButton/types.js +2 -1
  171. package/lib/Overlay.d.ts +11 -14
  172. package/lib/Overlay.js +5 -4
  173. package/lib/Overlay.jsx +156 -0
  174. package/lib/Pagehead.d.ts +2 -1
  175. package/lib/Pagehead.js +1 -1
  176. package/lib/Pagehead.jsx +18 -0
  177. package/lib/Pagination/Pagination.js +3 -3
  178. package/lib/Pagination/Pagination.jsx +163 -0
  179. package/lib/Pagination/index.js +6 -12
  180. package/lib/Pagination/model.jsx +174 -0
  181. package/lib/PointerBox.jsx +25 -0
  182. package/lib/Popover.d.ts +5 -4
  183. package/lib/Popover.js +5 -4
  184. package/lib/Popover.jsx +210 -0
  185. package/lib/Portal/Portal.jsx +79 -0
  186. package/lib/Portal/index.js +5 -16
  187. package/lib/Position.d.ts +4 -4
  188. package/lib/Position.js +1 -1
  189. package/lib/Position.jsx +46 -0
  190. package/lib/ProgressBar.d.ts +11 -16
  191. package/lib/ProgressBar.js +10 -6
  192. package/lib/ProgressBar.jsx +39 -0
  193. package/lib/SelectMenu/SelectMenu.d.ts +195 -34
  194. package/lib/SelectMenu/SelectMenu.js +4 -2
  195. package/lib/SelectMenu/SelectMenu.jsx +114 -0
  196. package/lib/SelectMenu/SelectMenuContext.jsx +5 -0
  197. package/lib/SelectMenu/SelectMenuDivider.d.ts +2 -1
  198. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  199. package/lib/SelectMenu/SelectMenuDivider.jsx +43 -0
  200. package/lib/SelectMenu/SelectMenuFilter.js +2 -2
  201. package/lib/SelectMenu/SelectMenuFilter.jsx +59 -0
  202. package/lib/SelectMenu/SelectMenuFooter.d.ts +2 -1
  203. package/lib/SelectMenu/SelectMenuFooter.js +2 -2
  204. package/lib/SelectMenu/SelectMenuFooter.jsx +46 -0
  205. package/lib/SelectMenu/SelectMenuHeader.d.ts +2 -1
  206. package/lib/SelectMenu/SelectMenuHeader.js +1 -1
  207. package/lib/SelectMenu/SelectMenuHeader.jsx +44 -0
  208. package/lib/SelectMenu/SelectMenuItem.d.ts +3 -2
  209. package/lib/SelectMenu/SelectMenuItem.js +2 -2
  210. package/lib/SelectMenu/SelectMenuItem.jsx +143 -0
  211. package/lib/SelectMenu/SelectMenuList.d.ts +2 -1
  212. package/lib/SelectMenu/SelectMenuList.js +1 -1
  213. package/lib/SelectMenu/SelectMenuList.jsx +60 -0
  214. package/lib/SelectMenu/SelectMenuLoadingAnimation.d.ts +2 -2
  215. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -3
  216. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +21 -0
  217. package/lib/SelectMenu/SelectMenuModal.d.ts +3 -2
  218. package/lib/SelectMenu/SelectMenuModal.js +1 -1
  219. package/lib/SelectMenu/SelectMenuModal.jsx +119 -0
  220. package/lib/SelectMenu/SelectMenuTab.d.ts +2 -1
  221. package/lib/SelectMenu/SelectMenuTab.js +2 -2
  222. package/lib/SelectMenu/SelectMenuTab.jsx +93 -0
  223. package/lib/SelectMenu/SelectMenuTabPanel.d.ts +2 -1
  224. package/lib/SelectMenu/SelectMenuTabPanel.js +2 -2
  225. package/lib/SelectMenu/SelectMenuTabPanel.jsx +43 -0
  226. package/lib/SelectMenu/SelectMenuTabs.d.ts +2 -1
  227. package/lib/SelectMenu/SelectMenuTabs.js +2 -2
  228. package/lib/SelectMenu/SelectMenuTabs.jsx +58 -0
  229. package/lib/SelectMenu/hooks/useKeyboardNav.js +80 -96
  230. package/lib/SelectMenu/index.js +7 -14
  231. package/lib/SelectPanel/SelectPanel.jsx +105 -0
  232. package/lib/SelectPanel/index.js +4 -12
  233. package/lib/SideNav.d.ts +8 -11
  234. package/lib/SideNav.js +15 -8
  235. package/lib/SideNav.jsx +177 -0
  236. package/lib/Spinner.d.ts +2 -1
  237. package/lib/Spinner.js +3 -1
  238. package/lib/Spinner.jsx +35 -0
  239. package/lib/StateLabel.d.ts +2 -1
  240. package/lib/StateLabel.js +6 -7
  241. package/lib/StateLabel.jsx +94 -0
  242. package/lib/StyledOcticon.d.ts +2 -1
  243. package/lib/StyledOcticon.js +4 -2
  244. package/lib/StyledOcticon.jsx +20 -0
  245. package/lib/SubNav.d.ts +11 -5
  246. package/lib/SubNav.js +13 -8
  247. package/lib/SubNav.jsx +104 -0
  248. package/lib/TabNav.d.ts +4 -3
  249. package/lib/TabNav.js +2 -2
  250. package/lib/TabNav.jsx +60 -0
  251. package/lib/Text.jsx +14 -0
  252. package/lib/TextInput.jsx +23 -0
  253. package/lib/TextInputWithTokens.d.ts +4 -6
  254. package/lib/TextInputWithTokens.jsx +218 -0
  255. package/lib/ThemeProvider.d.ts +0 -1
  256. package/lib/ThemeProvider.js +4 -17
  257. package/lib/ThemeProvider.jsx +130 -0
  258. package/lib/Timeline.d.ts +393 -19
  259. package/lib/Timeline.js +17 -20
  260. package/lib/Timeline.jsx +124 -0
  261. package/lib/Token/AvatarToken.d.ts +1 -1
  262. package/lib/Token/AvatarToken.js +1 -1
  263. package/lib/Token/AvatarToken.jsx +54 -0
  264. package/lib/Token/IssueLabelToken.d.ts +1 -1
  265. package/lib/Token/IssueLabelToken.jsx +125 -0
  266. package/lib/Token/Token.d.ts +1 -1
  267. package/lib/Token/Token.jsx +103 -0
  268. package/lib/Token/TokenBase.js +1 -1
  269. package/lib/Token/TokenBase.jsx +88 -0
  270. package/lib/Token/_RemoveTokenButton.jsx +108 -0
  271. package/lib/Token/_TokenTextContainer.jsx +49 -0
  272. package/lib/Token/index.js +11 -30
  273. package/lib/Tooltip.d.ts +2 -1
  274. package/lib/Tooltip.js +2 -2
  275. package/lib/Tooltip.jsx +246 -0
  276. package/lib/Truncate.d.ts +2 -1
  277. package/lib/Truncate.js +3 -1
  278. package/lib/Truncate.jsx +27 -0
  279. package/lib/UnderlineNav.d.ts +3 -2
  280. package/lib/UnderlineNav.js +4 -4
  281. package/lib/UnderlineNav.jsx +90 -0
  282. package/lib/_TextInputWrapper.jsx +120 -0
  283. package/lib/_UnstyledTextInput.jsx +22 -0
  284. package/lib/behaviors/anchoredPosition.js +205 -234
  285. package/lib/behaviors/focusTrap.js +121 -157
  286. package/lib/behaviors/focusZone.js +434 -509
  287. package/lib/behaviors/scrollIntoViewingArea.js +18 -35
  288. package/lib/constants.js +39 -43
  289. package/lib/drafts.d.ts +0 -1
  290. package/lib/drafts.js +20 -43
  291. package/lib/hooks/index.js +16 -60
  292. package/lib/hooks/useAnchoredPosition.js +32 -40
  293. package/lib/hooks/useCombinedRefs.js +32 -36
  294. package/lib/hooks/useDetails.jsx +39 -0
  295. package/lib/hooks/useDialog.js +72 -96
  296. package/lib/hooks/useFocusTrap.js +43 -60
  297. package/lib/hooks/useFocusZone.js +54 -50
  298. package/lib/hooks/useOnEscapePress.js +25 -36
  299. package/lib/hooks/useOnOutsideClick.jsx +61 -0
  300. package/lib/hooks/useOpenAndCloseFocus.js +22 -34
  301. package/lib/hooks/useOverlay.jsx +15 -0
  302. package/lib/hooks/useProvidedRefOrCreate.js +10 -14
  303. package/lib/hooks/useProvidedStateOrCreate.js +13 -16
  304. package/lib/hooks/useRenderForcingRef.js +13 -17
  305. package/lib/hooks/useResizeObserver.js +15 -18
  306. package/lib/hooks/useSafeTimeout.js +22 -30
  307. package/lib/hooks/useScrollFlash.js +16 -23
  308. package/lib/index.d.ts +2 -2
  309. package/lib/index.js +165 -652
  310. package/lib/polyfills/eventListenerSignal.js +37 -45
  311. package/lib/sx.js +10 -22
  312. package/lib/theme-preval.js +64 -3169
  313. package/lib/theme.js +3 -12
  314. package/lib/utils/create-slots.jsx +65 -0
  315. package/lib/utils/deprecate.jsx +59 -0
  316. package/lib/utils/isNumeric.jsx +7 -0
  317. package/lib/utils/iterateFocusableElements.js +63 -85
  318. package/lib/utils/ssr.jsx +6 -0
  319. package/lib/utils/test-deprecations.jsx +20 -0
  320. package/lib/utils/test-helpers.jsx +8 -0
  321. package/lib/utils/test-matchers.jsx +100 -0
  322. package/lib/utils/testing.d.ts +61 -8
  323. package/lib/utils/testing.js +0 -29
  324. package/lib/utils/testing.jsx +206 -0
  325. package/lib/utils/theme.js +33 -47
  326. package/lib/utils/types/AriaRole.js +2 -1
  327. package/lib/utils/types/ComponentProps.js +2 -1
  328. package/lib/utils/types/Flatten.js +2 -1
  329. package/lib/utils/types/KeyPaths.js +2 -1
  330. package/lib/utils/types/MandateProps.js +16 -1
  331. package/lib/utils/types/Merge.js +2 -1
  332. package/lib/utils/types/index.js +16 -69
  333. package/lib/utils/uniqueId.js +5 -8
  334. package/lib/utils/use-force-update.js +8 -14
  335. package/lib/utils/useIsomorphicLayoutEffect.js +8 -11
  336. package/lib/utils/userAgent.js +8 -12
  337. package/lib-esm/ActionList/Header.js +1 -1
  338. package/lib-esm/ActionList/Item.js +66 -41
  339. package/lib-esm/ActionList/List.js +1 -1
  340. package/lib-esm/ActionList2/Divider.d.ts +2 -3
  341. package/lib-esm/ActionList2/Divider.js +5 -8
  342. package/lib-esm/ActionList2/Group.d.ts +2 -28
  343. package/lib-esm/ActionList2/Group.js +5 -52
  344. package/lib-esm/ActionList2/Header.d.ts +26 -0
  345. package/lib-esm/ActionList2/Header.js +44 -0
  346. package/lib-esm/ActionList2/Item.js +7 -23
  347. package/lib-esm/ActionList2/List.d.ts +1 -1
  348. package/lib-esm/ActionList2/List.js +2 -9
  349. package/lib-esm/ActionList2/Selection.js +1 -12
  350. package/lib-esm/ActionList2/index.d.ts +2 -1
  351. package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -6
  352. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -6
  353. package/lib-esm/Avatar.d.ts +2 -1
  354. package/lib-esm/Avatar.js +2 -2
  355. package/lib-esm/BaseStyles.js +20 -2
  356. package/lib-esm/BorderBox.js +1 -1
  357. package/lib-esm/Box.js +1 -1
  358. package/lib-esm/BranchName.d.ts +2 -1
  359. package/lib-esm/BranchName.js +2 -2
  360. package/lib-esm/Breadcrumbs.d.ts +7 -8
  361. package/lib-esm/Breadcrumbs.js +16 -11
  362. package/lib-esm/Button/Button.d.ts +5 -5
  363. package/lib-esm/Button/Button.js +3 -3
  364. package/lib-esm/Button/ButtonBase.d.ts +8 -5
  365. package/lib-esm/Button/ButtonBase.js +3 -1
  366. package/lib-esm/Button/ButtonClose.d.ts +47 -5
  367. package/lib-esm/Button/ButtonClose.js +2 -2
  368. package/lib-esm/Button/ButtonDanger.d.ts +5 -5
  369. package/lib-esm/Button/ButtonDanger.js +2 -2
  370. package/lib-esm/Button/ButtonGroup.js +1 -1
  371. package/lib-esm/Button/ButtonInvisible.d.ts +5 -5
  372. package/lib-esm/Button/ButtonInvisible.js +2 -2
  373. package/lib-esm/Button/ButtonOutline.d.ts +5 -5
  374. package/lib-esm/Button/ButtonOutline.js +2 -2
  375. package/lib-esm/Button/ButtonPrimary.d.ts +5 -5
  376. package/lib-esm/Button/ButtonPrimary.js +2 -2
  377. package/lib-esm/Button/ButtonTableList.d.ts +2 -1
  378. package/lib-esm/Button/ButtonTableList.js +2 -2
  379. package/lib-esm/CircleBadge.d.ts +5 -4
  380. package/lib-esm/CircleBadge.js +2 -2
  381. package/lib-esm/CircleOcticon.d.ts +36 -37
  382. package/lib-esm/CounterLabel.d.ts +2 -1
  383. package/lib-esm/CounterLabel.js +2 -2
  384. package/lib-esm/Details.d.ts +2 -1
  385. package/lib-esm/Details.js +3 -2
  386. package/lib-esm/Dialog/Dialog.d.ts +9 -5
  387. package/lib-esm/Dialog/Dialog.js +12 -12
  388. package/lib-esm/Dialog.d.ts +40 -40
  389. package/lib-esm/Dialog.js +2 -2
  390. package/lib-esm/Dropdown.d.ts +171 -22
  391. package/lib-esm/Dropdown.js +4 -4
  392. package/lib-esm/DropdownMenu/DropdownButton.d.ts +49 -9
  393. package/lib-esm/DropdownMenu/DropdownButton.js +1 -3
  394. package/lib-esm/EmojiPicker/EmojiPicker.d.ts +17 -0
  395. package/lib-esm/EmojiPicker/EmojiPicker.js +181 -0
  396. package/lib-esm/EmojiPicker/EmojiPickerAnchor.d.ts +0 -0
  397. package/lib-esm/EmojiPicker/EmojiPickerAnchor.js +0 -0
  398. package/lib-esm/EmojiPicker/EmojiPickerPanel.d.ts +3 -0
  399. package/lib-esm/EmojiPicker/EmojiPickerPanel.js +8 -0
  400. package/lib-esm/EmojiPicker/data.d.ts +9 -0
  401. package/lib-esm/EmojiPicker/data.js +5434 -0
  402. package/lib-esm/EmojiPicker/index.d.ts +2 -0
  403. package/lib-esm/EmojiPicker/index.js +1 -0
  404. package/lib-esm/FilterList.d.ts +303 -265
  405. package/lib-esm/FilterList.js +7 -3
  406. package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
  407. package/lib-esm/FilteredSearch.d.ts +2 -1
  408. package/lib-esm/FilteredSearch.js +2 -2
  409. package/lib-esm/Flash.d.ts +2 -1
  410. package/lib-esm/Flash.js +2 -2
  411. package/lib-esm/Flex.js +1 -1
  412. package/lib-esm/FormGroup.d.ts +5 -4
  413. package/lib-esm/FormGroup.js +3 -3
  414. package/lib-esm/Header.d.ts +7 -6
  415. package/lib-esm/Header.js +5 -5
  416. package/lib-esm/Heading.d.ts +2 -1
  417. package/lib-esm/Heading.js +6 -2
  418. package/lib-esm/Label.d.ts +2 -1
  419. package/lib-esm/Label.js +4 -3
  420. package/lib-esm/LabelGroup.d.ts +2 -1
  421. package/lib-esm/LabelGroup.js +3 -3
  422. package/lib-esm/Link.d.ts +2 -1
  423. package/lib-esm/Link.js +2 -2
  424. package/lib-esm/NewButton/button.js +42 -31
  425. package/lib-esm/Overlay.d.ts +11 -14
  426. package/lib-esm/Overlay.js +4 -3
  427. package/lib-esm/Pagehead.d.ts +2 -1
  428. package/lib-esm/Pagehead.js +2 -2
  429. package/lib-esm/Pagination/Pagination.js +4 -4
  430. package/lib-esm/Popover.d.ts +5 -4
  431. package/lib-esm/Popover.js +5 -4
  432. package/lib-esm/Position.d.ts +4 -4
  433. package/lib-esm/Position.js +1 -1
  434. package/lib-esm/ProgressBar.d.ts +11 -16
  435. package/lib-esm/ProgressBar.js +11 -7
  436. package/lib-esm/SelectMenu/SelectMenu.d.ts +195 -34
  437. package/lib-esm/SelectMenu/SelectMenu.js +3 -2
  438. package/lib-esm/SelectMenu/SelectMenuDivider.d.ts +2 -1
  439. package/lib-esm/SelectMenu/SelectMenuDivider.js +2 -2
  440. package/lib-esm/SelectMenu/SelectMenuFilter.js +3 -3
  441. package/lib-esm/SelectMenu/SelectMenuFooter.d.ts +2 -1
  442. package/lib-esm/SelectMenu/SelectMenuFooter.js +3 -3
  443. package/lib-esm/SelectMenu/SelectMenuHeader.d.ts +2 -1
  444. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  445. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +3 -2
  446. package/lib-esm/SelectMenu/SelectMenuItem.js +3 -3
  447. package/lib-esm/SelectMenu/SelectMenuList.d.ts +2 -1
  448. package/lib-esm/SelectMenu/SelectMenuList.js +2 -2
  449. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.d.ts +2 -2
  450. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +2 -3
  451. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +3 -2
  452. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  453. package/lib-esm/SelectMenu/SelectMenuTab.d.ts +2 -1
  454. package/lib-esm/SelectMenu/SelectMenuTab.js +3 -3
  455. package/lib-esm/SelectMenu/SelectMenuTabPanel.d.ts +2 -1
  456. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +3 -3
  457. package/lib-esm/SelectMenu/SelectMenuTabs.d.ts +2 -1
  458. package/lib-esm/SelectMenu/SelectMenuTabs.js +3 -3
  459. package/lib-esm/SideNav.d.ts +8 -11
  460. package/lib-esm/SideNav.js +16 -8
  461. package/lib-esm/Spinner.d.ts +2 -1
  462. package/lib-esm/Spinner.js +2 -1
  463. package/lib-esm/StateLabel.d.ts +2 -1
  464. package/lib-esm/StateLabel.js +7 -8
  465. package/lib-esm/StyledOcticon.d.ts +2 -1
  466. package/lib-esm/StyledOcticon.js +3 -2
  467. package/lib-esm/SubNav.d.ts +11 -5
  468. package/lib-esm/SubNav.js +14 -9
  469. package/lib-esm/TabNav.d.ts +4 -3
  470. package/lib-esm/TabNav.js +3 -3
  471. package/lib-esm/TextInputWithTokens.d.ts +4 -6
  472. package/lib-esm/ThemeProvider.d.ts +0 -1
  473. package/lib-esm/ThemeProvider.js +4 -17
  474. package/lib-esm/Timeline.d.ts +393 -19
  475. package/lib-esm/Timeline.js +17 -16
  476. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  477. package/lib-esm/Token/AvatarToken.js +1 -1
  478. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  479. package/lib-esm/Token/Token.d.ts +1 -1
  480. package/lib-esm/Token/TokenBase.js +1 -1
  481. package/lib-esm/Tooltip.d.ts +2 -1
  482. package/lib-esm/Tooltip.js +3 -3
  483. package/lib-esm/Truncate.d.ts +2 -1
  484. package/lib-esm/Truncate.js +2 -1
  485. package/lib-esm/UnderlineNav.d.ts +3 -2
  486. package/lib-esm/UnderlineNav.js +5 -5
  487. package/lib-esm/drafts.d.ts +0 -1
  488. package/lib-esm/drafts.js +1 -2
  489. package/lib-esm/index.d.ts +2 -2
  490. package/lib-esm/index.js +1 -1
  491. package/lib-esm/theme-preval.js +366 -512
  492. package/lib-esm/utils/testing.d.ts +61 -8
  493. package/lib-esm/utils/testing.js +0 -24
  494. package/package.json +13 -20
  495. package/lib/ActionList2/MenuContext.d.ts +0 -10
  496. package/lib/ActionList2/MenuContext.js +0 -15
  497. package/lib/ActionMenu2.d.ts +0 -313
  498. package/lib/ActionMenu2.js +0 -91
  499. package/lib/Checkbox.d.ts +0 -29
  500. package/lib/Checkbox.js +0 -64
  501. package/lib-esm/ActionList2/MenuContext.d.ts +0 -10
  502. package/lib-esm/ActionList2/MenuContext.js +0 -3
  503. package/lib-esm/ActionMenu2.d.ts +0 -313
  504. package/lib-esm/ActionMenu2.js +0 -67
  505. package/lib-esm/Checkbox.d.ts +0 -29
  506. package/lib-esm/Checkbox.js +0 -44
package/CHANGELOG.md ADDED
@@ -0,0 +1,892 @@
1
+ # @primer/components
2
+
3
+ ## 0.0.0-2021113174023
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1601](https://github.com/primer/react/pull/1601) [`250e4b00`](https://github.com/primer/react/commit/250e4b00f4d996b6125d381bae2487b57156687c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Use icon instead of input for multiple selection in ActionList
8
+
9
+ * [#1629](https://github.com/primer/react/pull/1629) [`47fdbf40`](https://github.com/primer/react/commit/47fdbf40c3b3e0b0efaa7d50e4c08e283eecc5ee) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Visual update for disabled Items to make them more obvious
10
+
11
+ - Fake entry to force publishing
12
+
13
+ ## 31.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#1544](https://github.com/primer/react/pull/1544) [`5b55b0ab`](https://github.com/primer/react/commit/5b55b0ab8ea06b077e141c02285c81b99e246b77) Thanks [@jfuchs](https://github.com/jfuchs)! - The sx prop now has types that will inform autocomplete for color and shadow values that are key paths into the theme.
18
+
19
+ * [#1517](https://github.com/primer/react/pull/1517) [`561c0bd3`](https://github.com/primer/react/commit/561c0bd371b8d2135fb1d69555abc424ab796f2d) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add experimental `ActionList` with composable API
20
+
21
+ ### Patch Changes
22
+
23
+ - [#1599](https://github.com/primer/react/pull/1599) [`a2e195b0`](https://github.com/primer/react/commit/a2e195b0a26ce70f44aea38b009856c0089aae0e) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better labels and description for accessible ActionList.Item
24
+
25
+ * [#1603](https://github.com/primer/react/pull/1603) [`f4057b89`](https://github.com/primer/react/commit/f4057b897cc4c23012fb1b1881cefacbb57e081d) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Improve keyboard accessibility with focus styles cross browser
26
+
27
+ - [#1583](https://github.com/primer/react/pull/1583) [`24b1ebbc`](https://github.com/primer/react/commit/24b1ebbc21ca2eaa92bd6b5b8c15ab0e7577f5a0) Thanks [@pksjce](https://github.com/pksjce)! - Add a utility to provide useIsoMorphicEffect function and use that instead of useLayoutEffect everywhere
28
+
29
+ * [#1592](https://github.com/primer/react/pull/1592) [`8d3d491f`](https://github.com/primer/react/commit/8d3d491fa3c9437b3a8f310e233b7009cae13095) Thanks [@rezrah](https://github.com/rezrah)! - Fixes a styling bug in TextInput components while using its `icon` and `block` props together
30
+
31
+ - [#1549](https://github.com/primer/react/pull/1549) [`f565840f`](https://github.com/primer/react/commit/f565840f2d879b987ef9df7cd046e146214ed5f5) Thanks [@michael-lefebvre](https://github.com/michael-lefebvre)! - Fix `auxiliaryText` in ActionList Group header
32
+
33
+ * [#1604](https://github.com/primer/react/pull/1604) [`d2090b5b`](https://github.com/primer/react/commit/d2090b5b0321df1a415054d9b6a4d407627a385f) Thanks [@japf](https://github.com/japf)! - Add support for draft issues to the StateLabel component
34
+
35
+ - [#1609](https://github.com/primer/react/pull/1609) [`5eb7ade9`](https://github.com/primer/react/commit/5eb7ade92082fda2a94b45828a32e25b07c039db) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Rename `@primer/components/unreleased` to `@primer/components/drafts` to avoid confusion when referring to it.
36
+
37
+ ## 31.1.0
38
+
39
+ ### Minor Changes
40
+
41
+ - [#1523](https://github.com/primer/react/pull/1523) [`56e2f159`](https://github.com/primer/react/commit/56e2f159b9d627564a7717e6961a6bfa355189b3) Thanks [@mperrotti](https://github.com/mperrotti)! - Add the ability to truncate tokens in the TextInputWithToken component when the input is not focused
42
+
43
+ ### Patch Changes
44
+
45
+ - [#1529](https://github.com/primer/react/pull/1529) [`da566044`](https://github.com/primer/react/commit/da566044649a114e23789e3ac90c022cdbf5eaeb) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes a bug in `TextInputWithTokens` where the next token would not receive focus after the user deleted the first token using the keyboard
46
+
47
+ * [#1526](https://github.com/primer/react/pull/1526) [`1378e771`](https://github.com/primer/react/commit/1378e771323a48e6084c5ffac7d93b54960f4a0e) Thanks [@mperrotti](https://github.com/mperrotti)! - replaces flexbox gap usage with margins
48
+
49
+ ## 31.0.1
50
+
51
+ ### Patch Changes
52
+
53
+ - [#1521](https://github.com/primer/react/pull/1521) [`28b5980c`](https://github.com/primer/react/commit/28b5980c64dc5e05cb3ddb0c8c5f18fa5d0c490c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add `trailingVisual` prop to ActionList/ActionMenu. Deprecate `trailingIcon` and `trailingText` props.
54
+
55
+ ## 31.0.0
56
+
57
+ ### Major Changes
58
+
59
+ - [#1514](https://github.com/primer/react/pull/1514) [`dc789025`](https://github.com/primer/react/commit/dc789025d4976e2f0863e1f377c4a834aab88e3a) Thanks [@colebemis](https://github.com/colebemis)! - Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
60
+
61
+ **Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.
62
+
63
+ ### Patch Changes
64
+
65
+ - [#1512](https://github.com/primer/react/pull/1512) [`1e5ac406`](https://github.com/primer/react/commit/1e5ac406f8558a20248157a9bfe13ee4709890c8) Thanks [@pksjce](https://github.com/pksjce)! - Change disabled color from muted to custom primer disabled color
66
+
67
+ ## 30.3.0
68
+
69
+ ### Minor Changes
70
+
71
+ - [#1490](https://github.com/primer/react/pull/1490) [`c156b07a`](https://github.com/primer/react/commit/c156b07ab6f2f5ad6d35d1c4f89d8a7f37ad1cef) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds `Autocomplete`, `AutocompleteMenu`, `AutocompleteInput`, and `AutocompleteOverlay` components
72
+
73
+ * [#1489](https://github.com/primer/react/pull/1489) [`273ef29d`](https://github.com/primer/react/commit/273ef29d1d8f28bb856faba4da803e7ad0892c6e) Thanks [@mperrotti](https://github.com/mperrotti)! - Add alpha `TextInputWithTokens` component
74
+
75
+ - [#1488](https://github.com/primer/react/pull/1488) [`05ac5aab`](https://github.com/primer/react/commit/05ac5aabb6bf39150557732605f9ce0fb3b9d1ec) Thanks [@mperrotti](https://github.com/mperrotti)! - Add alpha `Token`, `AvatarToken`, `IssueLabelToken` components
76
+
77
+ ## 30.2.1
78
+
79
+ ### Patch Changes
80
+
81
+ - [#1500](https://github.com/primer/react/pull/1500) [`8c3531aa`](https://github.com/primer/react/commit/8c3531aa73c37770f961cbcfd94acbf1398f29bd) Thanks [@jfuchs](https://github.com/jfuchs)! - Fixed a bug where SelectPanel would not scroll with height:'auto'; maxHeight:'medium' passed to Overlay (https://github.com/github/primer/issues/333)
82
+
83
+ ## 30.2.0
84
+
85
+ ### Minor Changes
86
+
87
+ - [#1497](https://github.com/primer/react/pull/1497) [`b9d6a662`](https://github.com/primer/react/commit/b9d6a662390a66298a4b2171319029812f5ea88d) Thanks [@jfuchs](https://github.com/jfuchs)! - Updated ActionList's ItemInput type to accept DOM props for divs when renderItem is not provided
88
+
89
+ ## 30.1.0
90
+
91
+ ### Minor Changes
92
+
93
+ - [#1463](https://github.com/primer/react/pull/1463) [`bde3a034`](https://github.com/primer/react/commit/bde3a0344c713f15f5650b35195258901582bd41) Thanks [@jfuchs](https://github.com/jfuchs)! - `ActionList.item` accepts an `as` prop, allowing it to be a link, or (in combination with the renderItem prop) a Next.js or React Router link
94
+
95
+ ### Patch Changes
96
+
97
+ - [#1471](https://github.com/primer/react/pull/1471) [`f1cebb7e`](https://github.com/primer/react/commit/f1cebb7e9af297a7c466701454aac6dc1eb7b3a4) Thanks [@smockle](https://github.com/smockle)! - Change the button which receives focus when a 'ConfirmationDialog' opens from the secondary (e.g. 'Cancel') to the primary (e.g. 'OK'). Fixes github/primer#313.
98
+
99
+ ## 30.0.0
100
+
101
+ ### Major Changes
102
+
103
+ - [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
104
+
105
+ * [#1468](https://github.com/primer/react/pull/1468) [`dc15763c`](https://github.com/primer/react/commit/dc15763c733994ea9baa3475139b9bf3c2111e5b) Thanks [@jfuchs](https://github.com/jfuchs)! - AvatarStack no longer accepts styled props or DOM props
106
+
107
+ ### Minor Changes
108
+
109
+ - [#1474](https://github.com/primer/react/pull/1474) [`c54156bc`](https://github.com/primer/react/commit/c54156bc43f87370f3e8cb23fd9ebf338b5082e4) Thanks [@colebemis](https://github.com/colebemis)! - Add `light_protanopia` and `dark_protanopia` color blind color schemes
110
+
111
+ ### Patch Changes
112
+
113
+ - [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Rename `Breadcrumb` component to `Breadcrumbs`
114
+
115
+ * [#1470](https://github.com/primer/react/pull/1470) [`f2e29a08`](https://github.com/primer/react/commit/f2e29a08e2aab9e98a460eb073229933f6ae050b) Thanks [@pksjce](https://github.com/pksjce)! - Fix ActionList.Item color
116
+
117
+ ## 29.1.1
118
+
119
+ ### Patch Changes
120
+
121
+ - [#1441](https://github.com/primer/react/pull/1441) [`f3f5afb9`](https://github.com/primer/react/commit/f3f5afb9cf91e0ce3ea287351c871eb1559f1fa4) Thanks [@jfuchs](https://github.com/jfuchs)! - Fix type error where `css` is a required prop of some components by excluding storybook stories from TypeScript compilation for builds
122
+
123
+ * [#1446](https://github.com/primer/react/pull/1446) [`b4e5287c`](https://github.com/primer/react/commit/b4e5287cf1ec75a27e4b78b17425952e85f82f47) Thanks [@colebemis](https://github.com/colebemis)! - Fix filter input spacing in SelectPanel
124
+
125
+ ## 29.1.0
126
+
127
+ ### Minor Changes
128
+
129
+ - [#1412](https://github.com/primer/react/pull/1412) [`627cd3e9`](https://github.com/primer/react/commit/627cd3e95614ab4347e5acf456dd23588196ec87) Thanks [@colebemis](https://github.com/colebemis)! - Add `dark_high_contrast` color scheme
130
+
131
+ * [#1412](https://github.com/primer/react/pull/1412) [`627cd3e9`](https://github.com/primer/react/commit/627cd3e95614ab4347e5acf456dd23588196ec87) Thanks [@colebemis](https://github.com/colebemis)! - Add new [functional color variables](https://primer.style/primitives/colors) to the theme object.
132
+
133
+ **Tip:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated color variables.
134
+
135
+ ## 29.0.0
136
+
137
+ ### Major Changes
138
+
139
+ - [#1414](https://github.com/primer/react/pull/1414) [`f4e1de6d`](https://github.com/primer/react/commit/f4e1de6dbe9d20dfcf2144d879294d189433a810) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed system props support from `<TextInput>` and fixed its type definition.
140
+
141
+ ### Minor Changes
142
+
143
+ - [#1409](https://github.com/primer/react/pull/1409) [`90b17dd6`](https://github.com/primer/react/commit/90b17dd6447419ce1d661e5399b7ac193836ad1a) Thanks [@jfuchs](https://github.com/jfuchs)! - Use @react-aria/ssr for isomorphic ID generation.
144
+
145
+ ### Patch Changes
146
+
147
+ - [#1424](https://github.com/primer/react/pull/1424) [`7cf8d8b8`](https://github.com/primer/react/commit/7cf8d8b82a6387b1143c06e090cde8f87b4f3a33) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed irregular styling on Timeline
148
+
149
+ * [#1403](https://github.com/primer/react/pull/1403) [`65cab2cc`](https://github.com/primer/react/commit/65cab2ccd5eae3dcc5d75cbd1a1fd78a6f78abf7) Thanks [@mathiasbosman](https://github.com/mathiasbosman)! - Fix the Timeline.Item layout
150
+
151
+ ## 28.5.0
152
+
153
+ ### Minor Changes
154
+
155
+ - [#1398](https://github.com/primer/react/pull/1398) [`e4dac575`](https://github.com/primer/react/commit/e4dac575420c05e5e7528fd004c85c54f1b9a450) Thanks [@jfuchs](https://github.com/jfuchs)! - Default portal containers created by primer are absolutely positioned at 0,0
156
+
157
+ * [#1385](https://github.com/primer/react/pull/1385) [`5470b61b`](https://github.com/primer/react/commit/5470b61b448aeb29e859766ca0ff7f9f8457c690) Thanks [@jfuchs](https://github.com/jfuchs)! - Make top and left position explicit props of Overlay handled separately from other styles
158
+
159
+ - [#1388](https://github.com/primer/react/pull/1388) [`83b888f0`](https://github.com/primer/react/commit/83b888f0b325f9370ede9c5d7ac8f70702d6e8ea) Thanks [@jfuchs](https://github.com/jfuchs)! - Overlay takes a portalContainerName prop. This allows overlays with an anchor inside a scrolling container to track with their anchor, so long as the specified portal is also inside that scrolling container.
160
+
161
+ ## 28.4.0
162
+
163
+ ### Minor Changes
164
+
165
+ - [#1381](https://github.com/primer/react/pull/1381) [`b31f0853`](https://github.com/primer/react/commit/b31f08533e9fd41ebc5dc0e109d09facd975287c) Thanks [@jfuchs](https://github.com/jfuchs)! - AnchoredOverlay positions are set directly on style property
166
+
167
+ ### Patch Changes
168
+
169
+ - [#1372](https://github.com/primer/react/pull/1372) [`23be0ed7`](https://github.com/primer/react/commit/23be0ed7aeff3cc21a678769eb5ba0ddf9a8d155) Thanks [@jfuchs](https://github.com/jfuchs)! - Extends DropdownMenu to allow anchorRef, open, and onOpenChange props.
170
+
171
+ * [#1386](https://github.com/primer/react/pull/1386) [`2ea30b43`](https://github.com/primer/react/commit/2ea30b43854a1dcf5e1c64c696a57d6e1c651bdf) Thanks [@colebemis](https://github.com/colebemis)! - Bump @primer/primitives dependency to 4.6.4
172
+
173
+ - [#1387](https://github.com/primer/react/pull/1387) [`6b4d52da`](https://github.com/primer/react/commit/6b4d52dacbed2e4452e780c01fc9e69d9f9511ee) Thanks [@jfuchs](https://github.com/jfuchs)! - Guard against MediaQueryList.addEventListener calls where unavailable and possibly fall back to .addListener
174
+
175
+ ## 28.3.2
176
+
177
+ ### Patch Changes
178
+
179
+ - [#1368](https://github.com/primer/react/pull/1368) [`36f156a0`](https://github.com/primer/react/commit/36f156a0e42e242489dc1046ea8592b049a88bd7) Thanks [@dgreif](https://github.com/dgreif)! - Allow `anchorRef` to be passed into `SelectPanel` if you want to use an external anchor
180
+
181
+ ## 28.3.1
182
+
183
+ ### Patch Changes
184
+
185
+ - [#1355](https://github.com/primer/react/pull/1355) [`3cc7be77`](https://github.com/primer/react/commit/3cc7be77d766b9161808898a0d2cc8373aee5a21) Thanks [@colebemis](https://github.com/colebemis)! - Replace octoface icon with spinner in SelectMenu component
186
+
187
+ ## 28.3.0
188
+
189
+ ### Minor Changes
190
+
191
+ - [#1315](https://github.com/primer/react/pull/1315) [`85d0202b`](https://github.com/primer/react/commit/85d0202b0edd553bcbb50f9b280caf13ce79dae3) Thanks [@VanAnderson](https://github.com/VanAnderson)! - `Box` now accepts all [styled system props](https://styled-system.com/table/).
192
+
193
+ * [#1316](https://github.com/primer/react/pull/1316) [`4c063317`](https://github.com/primer/react/commit/4c0633171170205c53ef7dc29e5d4104a8486059) Thanks [@VanAnderson](https://github.com/VanAnderson)! - The following components have been deprecated in favor of the `Box` component:
194
+
195
+ | Component | Replacement |
196
+ | ----------- | ------------------------------------------------------------------------------------------- |
197
+ | `Flex` | `<Box display="flex">` |
198
+ | `Grid` | `<Box display="grid">` |
199
+ | `Position` | `<Box>` |
200
+ | `Absolute` | `<Box position="absolute">` |
201
+ | `Fixed` | `<Box position="fixed">` |
202
+ | `Relative` | `<Box position="relative">` |
203
+ | `Sticky` | `<Box position="sticky">` |
204
+ | `BorderBox` | `<Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2}>` |
205
+
206
+ There is a codemod available to upgrade these components:
207
+
208
+ - TypeScript example:
209
+
210
+ ```shell
211
+ npx jscodeshift -t node_modules/@primer/react/codemods/deprecateUtilityComponents.js
212
+ --parser=tsx path/to/workspace/src/*.tsx
213
+ ```
214
+
215
+ - Babel example:
216
+
217
+ ```shell
218
+ npx jscodeshift -t node_modules/@primer/react/codemods/deprecateUtilityComponents.js
219
+ --parser=babel path/to/workspace/src/*.tsx
220
+ ```
221
+
222
+ - [#1336](https://github.com/primer/react/pull/1336) [`489a718b`](https://github.com/primer/react/commit/489a718b6b6d2892906bc2709e243195bf5fd91e) Thanks [@VanAnderson](https://github.com/VanAnderson)! - System props are deprecated in all components except `Box`. Move all system props into the [`sx` prop](https://primer.style/components/overriding-styles) instead. Example:
223
+
224
+ ```diff
225
+ - <Button mr={2}>...</Button>
226
+ + <Button sx={{mr: 2}}>...</Button>
227
+ ```
228
+
229
+ There is a codemod available to migrate from system props to the `sx` prop:
230
+
231
+ - TypeScript example:
232
+
233
+ ```shell
234
+ npx jscodeshift -t node_modules/@primer/react/codemods/removeSystemProps.js
235
+ --parser=tsx path/to/workspace/src/*.tsx
236
+ ```
237
+
238
+ - Babel example:
239
+
240
+ ```shell
241
+ npx jscodeshift -t node_modules/@primer/react/codemods/removeSystemProps.js
242
+ --parser=babel path/to/workspace/src/*.tsx
243
+ ```
244
+
245
+ ### Patch Changes
246
+
247
+ - [#1332](https://github.com/primer/react/pull/1332) [`ec11d7b8`](https://github.com/primer/react/commit/ec11d7b8a589742a41134d31f419b6b5d34ad026) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Side effects are properly declared in package.json
248
+
249
+ * [#1308](https://github.com/primer/react/pull/1308) [`a8f3ca6d`](https://github.com/primer/react/commit/a8f3ca6dbff5c2619e067ad5118fcb784f8525bc) Thanks [@dgreif](https://github.com/dgreif)! - Focus zones will now update active-descendant on `mousemove` over focusable elements. ActionList has been updated to handle direct (key press) vs indirect (`mousemove`, DOM change, etc.) changes to active-descendant, and will use a distinct background color for the directly activated items.
250
+
251
+ ## 28.2.5
252
+
253
+ ### Patch Changes
254
+
255
+ - [#1311](https://github.com/primer/react/pull/1311) [`6f0535df`](https://github.com/primer/react/commit/6f0535dfcf5c640da2322c68654cb369d8eafea0) Thanks [@lukewar](https://github.com/lukewar)! - Expose 'textInputProps' from the 'SelectPanel'
256
+
257
+ * [#1309](https://github.com/primer/react/pull/1309) [`dc17a49e`](https://github.com/primer/react/commit/dc17a49e6a8f2f71e689f4666bcf0384111deb36) Thanks [@colebemis](https://github.com/colebemis)! - Include all shadow variables in theme object
258
+
259
+ - [#1251](https://github.com/primer/react/pull/1251) [`528e9a41`](https://github.com/primer/react/commit/528e9a411eac6730e05ce39d22ba8982283b71a5) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Call `useOnOutsideClick` handlers in reverse order that they are registered, and allow propagation to stop if default is prevented or an non-outside click is detected.
260
+
261
+ * [#1312](https://github.com/primer/react/pull/1312) [`76a38432`](https://github.com/primer/react/commit/76a384328fc57b0cf9d3d92170de5ce071334121) Thanks [@smockle](https://github.com/smockle)! - Ensure clicking an `AnchoredOverlay`’s trigger allows it to close without immediately reopening.
262
+
263
+ ## 28.2.4
264
+
265
+ ### Patch Changes
266
+
267
+ - [#1293](https://github.com/primer/react/pull/1293) [`1148a718`](https://github.com/primer/react/commit/1148a718aa1db92fb90d15efc150aa4c0c2ef018) Thanks [@smockle](https://github.com/smockle)! - Restore "fix: Don’t focus first 'Item' of 'DropdownMenu' and 'SelectMenu' on open" by deferring the removal of a temporary `tabIndex` until focus moves within the container.
268
+
269
+ * [#1279](https://github.com/primer/react/pull/1279) [`bb38754f`](https://github.com/primer/react/commit/bb38754f9f5c9f1d2d6cfa03f2bf9984fbd3c82d) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Update overlay shadows
270
+
271
+ - [#1297](https://github.com/primer/react/pull/1297) [`5fb3683d`](https://github.com/primer/react/commit/5fb3683df6cc116975c729e83ce3c14b87ffaea1) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Bump @primer/primitives to 4.4.0
272
+
273
+ * [#1288](https://github.com/primer/react/pull/1288) [`15207119`](https://github.com/primer/react/commit/15207119d25a3d6b0b13294bb99dc4efd780a788) Thanks [@dgreif](https://github.com/dgreif)! - Focus zones with an `activeDescendantControl` will now activate the first descendant as soon as the control element is focused, rather than waiting for an up/down arrow press. Descendants stay active until the control element is blurred. This is a breaking change to `useFocusZone`, but this behavior is still considered to be in `alpha`.
274
+
275
+ - [#1292](https://github.com/primer/react/pull/1292) [`4b643818`](https://github.com/primer/react/commit/4b64381872eac9df00c53186782a370b0d6da638) Thanks [@dgreif](https://github.com/dgreif)! - Bump dependencies
276
+
277
+ * [#1279](https://github.com/primer/react/pull/1279) [`bb38754f`](https://github.com/primer/react/commit/bb38754f9f5c9f1d2d6cfa03f2bf9984fbd3c82d) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Update TextInput border color
278
+
279
+ ## 28.2.3
280
+
281
+ ### Patch Changes
282
+
283
+ - [`0ffc381c`](https://github.com/primer/react/commit/0ffc381c833219959ed3b99a9dd64fe56ac51036) [#1294](https://github.com/primer/react/pull/1294) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Revert first item focus fix for ActionList components.
284
+
285
+ ## 28.2.2
286
+
287
+ ### Patch Changes
288
+
289
+ - [`68877076`](https://github.com/primer/react/commit/68877076fcbbc1c4cd308f2e6f8f44290751efe4) [#1275](https://github.com/primer/react/pull/1275) Thanks [@VanAnderson](https://github.com/VanAnderson)! - data props can be used in overlayProps.
290
+
291
+ * [`2793ef48`](https://github.com/primer/react/commit/2793ef48d554e307e46442fcc198ed4adf8c137f) [#1286](https://github.com/primer/react/pull/1286) Thanks [@colebemis](https://github.com/colebemis)! - `ThemeProvider` now uses the first defined color scheme if passed an invalid color scheme name
292
+
293
+ - [`321b9a3d`](https://github.com/primer/react/commit/321b9a3d9e0ddf6755bd7299ea6cd42a52f427a9) [#1266](https://github.com/primer/react/pull/1266) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Anchored overlay can take an external anchorRef.
294
+
295
+ ## 28.2.1
296
+
297
+ ### Patch Changes
298
+
299
+ - [`f793ed00`](https://github.com/primer/react/commit/f793ed00e244de861f373cf0882397a1f640b046) [#1280](https://github.com/primer/react/pull/1280) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Export TexContainer from of ActionList/Item.
300
+
301
+ * [`2893326b`](https://github.com/primer/react/commit/2893326bc45fd841cd71ac46ca71cdaececa7343) [#1259](https://github.com/primer/react/pull/1259) Thanks [@smockle](https://github.com/smockle)! - Hide intra-'Item' dividers on ':hover' and ':focus'
302
+
303
+ ## 28.2.0
304
+
305
+ ### Minor Changes
306
+
307
+ - [`8368a83e`](https://github.com/primer/react/commit/8368a83efbc89aa73f9c775c25da62e34960c95c) [#1238](https://github.com/primer/react/pull/1238) Thanks [@dgreif](https://github.com/dgreif)! - New sizes for Overlay and Dialog. Sizes have been changed from abbreviations to full words. `xs` -> `xsmall`, `sm` -> `small`, `md` -> `medium`, `lg` -> `large`, `xl` -> `xlarge`. The sizing for `Overlay` has also been updated to provide a wider range of options. The original values for Overlay were based on the needs of Dialog, but Dialog is not reliant on Overlay so they don't need to have similar sizing. This is technically a breaking change, but is being released as a minor because these components are both still in `alpha` status.
308
+
309
+ ### Patch Changes
310
+
311
+ - [`a7fe32c8`](https://github.com/primer/react/commit/a7fe32c8ba42ad75a945185b5f358f274a21ef0e) [#1248](https://github.com/primer/react/pull/1248) Thanks [@dgreif](https://github.com/dgreif)! - Hide overflow from `Overlay`
312
+
313
+ * [`02e86095`](https://github.com/primer/react/commit/02e86095e6775f42c150c362e5281f0ffc332212) Thanks [@dgreif](https://github.com/dgreif)! - Allow `filterValue` to be provided to `SelectPanel`
314
+
315
+ - [`10df320b`](https://github.com/primer/react/commit/10df320bb4d2a3d7ad7e59722c0b8896eeef0357) [#1247](https://github.com/primer/react/pull/1247) Thanks [@dgreif](https://github.com/dgreif)! - Handle overflow and active-descendant scrolling within `SelectPanel`
316
+
317
+ * [`25d88c49`](https://github.com/primer/react/commit/25d88c49709f1c91c1a596fc77ed05e66cae083f) [#1253](https://github.com/primer/react/pull/1253) Thanks [@dgreif](https://github.com/dgreif)! - Correct font size and truncate for description within ActionList Items
318
+
319
+ - [`9cb715cd`](https://github.com/primer/react/commit/9cb715cd2a613a0cedae60e488d4f69449465a38) [#1258](https://github.com/primer/react/pull/1258) Thanks [@dgreif](https://github.com/dgreif)! - prevent focusTrap from causing a `blur` if trap container is not in DOM
320
+
321
+ * [`aa7d80fc`](https://github.com/primer/react/commit/aa7d80fcb70b5e7936eae13fd073f7c2163df7ec) [#1246](https://github.com/primer/react/pull/1246) Thanks [@dgreif](https://github.com/dgreif)! - Fix border radius on buttons and title `font-weight` in ConfirmationDialog
322
+
323
+ ## 28.1.1
324
+
325
+ ### Patch Changes
326
+
327
+ - [`ff177c88`](https://github.com/primer/react/commit/ff177c88200f2ebb8c27a8e41aeb869a8eddf95b) [#1242](https://github.com/primer/react/pull/1242) Thanks [@dgreif](https://github.com/dgreif)! - Use `Item` `index` as fallback key within `List` groups
328
+
329
+ * [`fb2fa6c2`](https://github.com/primer/react/commit/fb2fa6c2f40be51f4f7201b93e004bb7d2257110) [#1244](https://github.com/primer/react/pull/1244) Thanks [@dgreif](https://github.com/dgreif)! - Allow focus to move to an input outside an overlay on mousedown
330
+
331
+ - [`1519742f`](https://github.com/primer/react/commit/1519742fcffcad9d14c972bc8c1fdd8e575c956e) [#1243](https://github.com/primer/react/pull/1243) Thanks [@dgreif](https://github.com/dgreif)! - Use `active-descendant` to control focus in `SelectPanel`
332
+
333
+ * [`c1991318`](https://github.com/primer/react/commit/c1991318aa7ee5d021f458db26cd2597279cc4ba) [#1158](https://github.com/primer/react/pull/1158) Thanks [@dgreif](https://github.com/dgreif)! - Add background styles for focused action list items, instead of using default `outline`
334
+
335
+ ## 28.1.0
336
+
337
+ ### Minor Changes
338
+
339
+ - [`6800c609`](https://github.com/primer/react/commit/6800c609634d8227c6538a49bca3ef59d8b660a1) [#1232](https://github.com/primer/react/pull/1232) Thanks [@dgreif](https://github.com/dgreif)! - New `Spinner` Component
340
+
341
+ ### Patch Changes
342
+
343
+ - [`909ada5c`](https://github.com/primer/react/commit/909ada5c47c597f0260563c5030df0613051f618) [#1224](https://github.com/primer/react/pull/1224) Thanks [@dgreif](https://github.com/dgreif)! - Add `SelectPanel` alpha component
344
+
345
+ * [`0d26d2b0`](https://github.com/primer/react/commit/0d26d2b07d8ed242eec71fd05959d8cdd0e6f0ba) [#1240](https://github.com/primer/react/pull/1240) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Fix check Spacing on selected items for ActionList components.
346
+
347
+ - [`e009e321`](https://github.com/primer/react/commit/e009e321bf6c456ca6584650cd5f3ea35fe36003) [#1235](https://github.com/primer/react/pull/1235) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Dialog properly auto-focuses cancel button by default when originating from a FocusZone/FocusTrap.
348
+
349
+ ## 28.0.4
350
+
351
+ ### Patch Changes
352
+
353
+ - [`e1bde42b`](https://github.com/primer/react/commit/e1bde42b7a11d9f642132601a5c776a988926747) [#1228](https://github.com/primer/react/pull/1228) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Action Menu correctly fires onAction callback after close.
354
+
355
+ * [`961c07eb`](https://github.com/primer/react/commit/961c07ebc7cbf483029d5326bb8e56c78777028d) [#1227](https://github.com/primer/react/pull/1227) Thanks [@stephenotalora](https://github.com/stephenotalora)! - Change focus state style of `SideNav.Link`
356
+
357
+ - [`84c7e771`](https://github.com/primer/react/commit/84c7e771f8ac9bb707fbb977658e9e40620bc20c) [#1225](https://github.com/primer/react/pull/1225) Thanks [@dgreif](https://github.com/dgreif)! - handle complex child reordering within a focusZone
358
+
359
+ ## 28.0.3
360
+
361
+ ### Patch Changes
362
+
363
+ - [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Hide divider before `ActionList.Group`s with filled header
364
+
365
+ * [`a9260812`](https://github.com/primer/react/commit/a9260812ebaaa07747eb7cca40c6ff1c12892c49) [#1221](https://github.com/primer/react/pull/1221) Thanks [@dgreif](https://github.com/dgreif)! - Improved performance for lists in `ActionMenu` and `DropdownMenu`
366
+
367
+ - [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Align `Item` description to when rendered in-line
368
+
369
+ * [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Allow `focusZoneSettings` to be passed into `AnchoredOverlay`
370
+
371
+ - [`c63fa4b5`](https://github.com/primer/react/commit/c63fa4b59bf5fa3e6f985b1d81b040efc8bc896c) [#1215](https://github.com/primer/react/pull/1215) Thanks [@dgreif](https://github.com/dgreif)! - Add `selectionVariant: 'multiple'` for `Item`s. These will use a checkbox input instead of a checkmark icon for selected state
372
+
373
+ * [`d78af591`](https://github.com/primer/react/commit/d78af591971984a3a2d2707904eb235701d1c749) [#1214](https://github.com/primer/react/pull/1214) Thanks [@VanAnderson](https://github.com/VanAnderson)! - renderMenuItem in ActionMenu checks preventDefault for conditionally calling onClose
374
+
375
+ - [`4ab3d175`](https://github.com/primer/react/commit/4ab3d1752d14969fff222a4cf7fb2dcc1110d0fb) [#1222](https://github.com/primer/react/pull/1222) Thanks [@dgreif](https://github.com/dgreif)! - Trap focus in `AnchoredOverlay` as soon as it opens, regardless of the event that triggered it to open
376
+
377
+ * [`ff9ce6f1`](https://github.com/primer/react/commit/ff9ce6f108e29ac061b23e3338cb03e2f168f701) [#1217](https://github.com/primer/react/pull/1217) Thanks [@VanAnderson](https://github.com/VanAnderson)! - overlayProps passthrough from ActionMenu and DropdownMenu to AnchoredOverlay.
378
+
379
+ ## 28.0.2
380
+
381
+ ### Patch Changes
382
+
383
+ - [`d20a5996`](https://github.com/primer/react/commit/d20a5996aafdbc6446f13aaa7a489394926f083a) [#1209](https://github.com/primer/react/pull/1209) Thanks [@dgreif](https://github.com/dgreif)! - Allow Overlay height and width to be set through AnchoredOverlay
384
+ Allow ActionList Items to supply an `id` instead of `key`
385
+ Performance imporvements when ActionList is not given any groups
386
+ Enable focus zone as soon as AnchoredOverlay opens
387
+
388
+ * [`d29741ca`](https://github.com/primer/react/commit/d29741cab4bfa4249000e5b2479e99f5aeea3189) [#1196](https://github.com/primer/react/pull/1196) Thanks [@dgreif](https://github.com/dgreif)! - Allow custom `children` in `ActionItem`. `text` and `description` can still be provided as a shortcut, but `children` is now available if you need more control over the rending of the item, without sacrificing benefits from `Item` by using `renderItem`.
389
+
390
+ - [`4c2e1a2b`](https://github.com/primer/react/commit/4c2e1a2b449d3f762c530f70a5056e581404d3d8) [#1195](https://github.com/primer/react/pull/1195) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Export useConfirm hook and ConfirmationDialog component from index.
391
+
392
+ * [`3c13d039`](https://github.com/primer/react/commit/3c13d039466370a70ed1e0bf8c3af0860fe26702) [#1201](https://github.com/primer/react/pull/1201) Thanks [@T-Hugs](https://github.com/T-Hugs)! - Fix overlay position when using an AnchoredOverlay
393
+
394
+ - [`c9b4db79`](https://github.com/primer/react/commit/c9b4db79ec2b4360f23f42d3ab49f265a56e9447) [#1199](https://github.com/primer/react/pull/1199) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Action Menu can have its open state be controlled externally.
395
+
396
+ * [`3e759e59`](https://github.com/primer/react/commit/3e759e59b5af115e82cca2253c0caca9e400be24) [#1211](https://github.com/primer/react/pull/1211) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use preventDefault on AnchoredOverlay instead of stopPropagation.
397
+
398
+ - [`84e3c570`](https://github.com/primer/react/commit/84e3c5706fa313eab5605f551256c0dc34a8626d) [#1194](https://github.com/primer/react/pull/1194) Thanks [@dgreif](https://github.com/dgreif)! - Handle `onAction` for `DropdownMenu` Items
399
+
400
+ * [`7aeb53fe`](https://github.com/primer/react/commit/7aeb53fec23a80414f6c1db8b31c06beb2073dd2) [#1200](https://github.com/primer/react/pull/1200) Thanks [@dgreif](https://github.com/dgreif)! - Perform ActionMenu actions after overlay has closed. This allows the action to move focus if so desired, without the ActionMenu focus trap preventing focus from moving away.
401
+
402
+ - [`bba66fdd`](https://github.com/primer/react/commit/bba66fddb51be251456711e21e725b1034bae806) [#1206](https://github.com/primer/react/pull/1206) Thanks [@VanAnderson](https://github.com/VanAnderson)! - stopPropagation for mousedown and click in AnchoredOverlay based components
403
+
404
+ ## 28.0.1
405
+
406
+ ### Patch Changes
407
+
408
+ - [`b319ce43`](https://github.com/primer/react/commit/b319ce4396b11c185faee23f0884632806922303) [#1197](https://github.com/primer/react/pull/1197) Thanks [@dmarcey](https://github.com/dmarcey)! - Typescript declare files will now be published to the lib-esm directory, as well as lib
409
+
410
+ * [`17957f29`](https://github.com/primer/react/commit/17957f293542d6cbf5f8005698bb352f95d5c8f7) [#1192](https://github.com/primer/react/pull/1192) Thanks [@dgreif](https://github.com/dgreif)! - Add basic docs for `AnchoredOverlay`
411
+
412
+ ## 28.0.0
413
+
414
+ ### Major Changes
415
+
416
+ - [`5f85394d`](https://github.com/primer/react/commit/5f85394dc16f076080824d8fdb3bda06d01e29da) [#1157](https://github.com/primer/react/pull/1157) Thanks [@dgreif](https://github.com/dgreif)! - Removed `useMouseIntent` in favor of [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible). With the removal of `useMouseIntent`, the `intent-mouse` class will no longer be added to the `<body>`. Since `:focus-visible` is a relatively new psuedo-class, a polyfill is included. Any focused elements that meet the criteria for `:focus-visible` will also have a `focus-visible` class added to them by the polyfill.
417
+
418
+ ### Patch Changes
419
+
420
+ - [`f7857a06`](https://github.com/primer/react/commit/f7857a06031df339fa61d27f8ca717e4df95d5e5) [#1159](https://github.com/primer/react/pull/1159) Thanks [@hehex9](https://github.com/hehex9)! - Removed unused dependencies
421
+
422
+ ## 27.0.0
423
+
424
+ ### Major Changes
425
+
426
+ - [`db478205`](https://github.com/primer/react/commit/db478205bf467a118394e0519034bb87116dc85a) [#1147](https://github.com/primer/react/pull/1147) Thanks [@colebemis](https://github.com/colebemis)! - Type definitions are now being generated by TypeScript instead of manually maintained. These new type definitions may differ from the previous type definitions and cause breaking changes. If you experience any new TypeScript errors, feel free to create an [issue](https://github.com/primer/react/issues) or reach out in Slack (#design-systems).
427
+
428
+ ### Breaking changes
429
+
430
+ - The following types are no longer exported:
431
+
432
+ ```
433
+ BaseProps
434
+ UseDetailsProps
435
+ AnchoredPositionHookSettings
436
+ AnchorAlignment
437
+ AnchorSide
438
+ PositionSettings
439
+ PaginationHrefBuilder
440
+ PaginationPageChangeCallback
441
+ PositionComponentProps
442
+ ```
443
+
444
+ - Props are now defined with types instead of interfaces which means in some cases you may not be able to create interfaces that `extend` them. To work around this issue, you may need to convert your interfaces to types:
445
+
446
+ ```diff
447
+ import {BoxProps} from '@primer/react'
448
+
449
+ - interface MyFancyBox extends BoxProps {...}
450
+ + type MyFancyBox = BoxProps & {...}
451
+ ```
452
+
453
+ - Some components now expect more specific ref types. For example:
454
+
455
+ ```diff
456
+ - const ref = React.useRef<HTMLElement>(null)
457
+ + const ref = React.useRef<HTMLButtonElement>(null)
458
+
459
+ return <Button ref={ref}>...</Button>
460
+ ```
461
+
462
+ ## 26.0.0
463
+
464
+ ### Major Changes
465
+
466
+ - [`016a273f`](https://github.com/primer/react/commit/016a273fde30f0185e23309e1a39c1bc034174f8) [#1115](https://github.com/primer/react/pull/1115) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Removes deprecated presentational theme variables in favor of _functional variables_ for styling components that are consistent across multiple themes.
467
+
468
+ ## Migration guide
469
+
470
+ If you don't use any color-related system props (e.g. `color`, `bg`, `borderColor`), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables.
471
+
472
+ If you have any questions, feel free to reach out in the #design-systems channel.
473
+
474
+ #### Text
475
+
476
+ | `v25` | `v26` |
477
+ | ------------------------ | ------------------------ |
478
+ | `color="text.gray"` | `color="text.secondary"` |
479
+ | `color="text.grayLight"` | `color="text.tertiary"` |
480
+ | `color="text.grayDark"` | `color="text.primary"` |
481
+ | `color="text.red"` | `color="text.danger"` |
482
+ | `color="text.white"` | `color="text.inverse"` |
483
+ | `color="gray.6"` | `color="text.secondary"` |
484
+ | `color="gray.5"` | `color="text.tertiary"` |
485
+ | `color="gray.9"` | `color="text.primary"` |
486
+ | `color="red.6"` | `color="text.danger"` |
487
+ | `color="white"` | `color="text.inverse"` |
488
+ | `color="blue.5"` | `color="text.link"` |
489
+ | `color="gray.4"` | `color="text.disabled"` |
490
+ | `color="green.5"` | `color="text.success"` |
491
+ | `color="yellow.8"` | `color="text.warning"` |
492
+
493
+ #### Icon
494
+
495
+ | `v25` | `v25` |
496
+ | ------------------ | ------------------------ |
497
+ | `color="gray.9"` | `color="icon.primary"` |
498
+ | `color="gray.6"` | `color="icon.secondary"` |
499
+ | `color="gray.4"` | `color="icon.tertiary"` |
500
+ | `color="blue.5"` | `color="icon.info"` |
501
+ | `color="red.5"` | `color="icon.danger"` |
502
+ | `color="green.6"` | `color="icon.success"` |
503
+ | `color="yellow.8"` | `color="icon.warning"` |
504
+
505
+ #### Border
506
+
507
+ | `v25` | `v26` |
508
+ | --------------------------------- | ------------------------------- |
509
+ | `borderColor="border.blue"` | `borderColor="border.info"` |
510
+ | `borderColor="border.blueLight"` | n/a |
511
+ | `borderColor="border.grayLight"` | `borderColor="border.primary"` |
512
+ | `borderColor="border.grayDark"` | `borderColor="border.tertiary"` |
513
+ | `borderColor="border.grayDarker"` | n/a |
514
+ | `borderColor="border.green"` | `borderColor="border.success"` |
515
+ | `borderColor="border.greenLight"` | n/a |
516
+ | `borderColor="border.purple"` | n/a |
517
+ | `borderColor="border.red"` | `borderColor="border.danger"` |
518
+ | `borderColor="border.redLight"` | n/a |
519
+ | `borderColor="border.white"` | `borderColor="border.inverse"` |
520
+ | `borderColor="border.whiteFace"` | n/a |
521
+ | `borderColor="border.yellow"` | `borderColor="border.warning"` |
522
+ | `borderColor="border.blackFade"` | `borderColor="fade.fg15"` |
523
+ | `borderColor="border.whiteFade"` | `borderCOlor="fade.white15"` |
524
+ | `borderColor="blue.5"` | `borderColor="border.info"` |
525
+ | `borderColor="gray.2"` | `borderColor="border.primary"` |
526
+ | `borderColor="gray.3"` | `borderColor="border.tertiary"` |
527
+ | `borderColor="green.4"` | `borderColor="border.success"` |
528
+ | `borderColor="red.5"` | `borderColor="border.danger"` |
529
+ | `borderColor="white"` | `borderColor="border.inverse"` |
530
+
531
+ #### Background
532
+
533
+ | `v25` | `v26` |
534
+ | ------------------- | ------------------------ |
535
+ | `bg="white"` | `bg="bg.primary"` |
536
+ | `bg="bg.grayLight"` | `bg="bg.secondary"` |
537
+ | `bg="bg.gray"` | `bg="bg.tertiary"` |
538
+ | `bg="bg.grayDark"` | `bg="bg.canvasInverse"` |
539
+ | `bg="blue.0"` | `bg="bg.info"` |
540
+ | `bg="blue.5"` | `bg="bg.infoInverse"` |
541
+ | `bg="red.0"` | `bg="bg.danger"` |
542
+ | `bg="red.5"` | `bg="bg.dangerInverse"` |
543
+ | `bg="green.1"` | `bg="bg.success"` |
544
+ | `bg="green.5"` | `bg="bg.successInverse"` |
545
+
546
+ #### Labels
547
+
548
+ _Note the change in pluralization from 'labels' to 'label'._
549
+
550
+ | `v25` | `v26` |
551
+ | ----------------------------- | ------------------------------------- |
552
+ | `color="labels.grayDarkText"` | `color="label.primary.text` |
553
+ | `borderColor="labels.gray"` | `borderColor="label.primary.border` |
554
+ | `color="labels.grayText"` | `color="label.secondary.text` |
555
+ | `borderColor="labels.gray"` | `borderColor="label.secondary.border` |
556
+ | `color="labels.blueText"` | `color="label.info.text` |
557
+ | `borderColor="labels.blue"` | `borderColor="label.info.border` |
558
+ | `color="labels.greenText"` | `color="label.success.text` |
559
+ | `borderColor="labels.green"` | `borderColor="label.success.border` |
560
+ | `color="labels.yellowText"` | `color="label.warning.text` |
561
+ | `borderColor="labels.yellow"` | `borderColor="label.warning.border` |
562
+ | `color="labels.redText"` | `color="label.danger.text` |
563
+ | `borderColor="labels.red"` | `borderColor="label.danger.border` |
564
+ | `color="labels.orangeText"` | `color="label.primary.text` |
565
+ | `borderColor="labels.orange"` | `borderColor="label.primary.text` |
566
+ | `color="labels.pinkText"` | n/a |
567
+ | `borderColor="labels.pink"` | n/a |
568
+ | `color="labels.purpleText"` | n/a |
569
+ | `borderColor="labels.purple"` | n/a |
570
+
571
+ #### Counters
572
+
573
+ | `v25` | `v26` |
574
+ | --------------------- | -------------------- |
575
+ | `scheme="gray"` | `scheme="primary"` |
576
+ | `scheme="gray-light"` | `scheme="secondary"` |
577
+
578
+ #### Timeline
579
+
580
+ | `v25` | `v26` |
581
+ | ----------------------------------------- | ----------------------------- |
582
+ | `bg="red.5"` | `bg="prState.closed.bg"` |
583
+ | `bg="green.5"` | `bg="prState.open.bg"` |
584
+ | `bg="purple.5"` | `bg="prState.merged.bg"` |
585
+ | `bg="gray.5"` | `bg="prState.draft.bg"` |
586
+ | `color="white"` (context: closed PR icon) | `color="prState.closed.text"` |
587
+ | `color="white"` (context: open PR icon) | `color="prState.open.text"` |
588
+ | `color="white"` (context: merged PR icon) | `color="prState.merged.text"` |
589
+ | `color="white"` (context: merged PR icon) | `color="prState.draft.text"` |
590
+
591
+ ## 25.0.0
592
+
593
+ ### Major Changes
594
+
595
+ - [`8799f74a`](https://github.com/primer/react/commit/8799f74ad69911e9840d51a65d08237f3cb1f172) [#1112](https://github.com/primer/react/pull/1112) Thanks [@colebemis](https://github.com/colebemis)! - Primer React now supports color modes! 🎉
596
+
597
+ See the new [Theming](https://primer.style/components/theming) documentation for more details.
598
+
599
+ #### Breaking changes
600
+
601
+ - You'll need to replace the `ThemeProvider` from `styled-components` with the new Primer React `ThemeProvider`:
602
+
603
+ ```diff
604
+ - import {ThemeProvider} from 'styled-components'
605
+ - import {theme} from '@primer/react
606
+ + import {ThemeProvider} from '@primer/react'
607
+
608
+ function App() {
609
+ return (
610
+ - <ThemeProvider theme={theme}>
611
+ + <ThemeProvider>
612
+ <div>your app here...</div>
613
+ </ThemeProvider>
614
+ )
615
+ }
616
+ ```
617
+
618
+ - The structure of the theme object has changed to support color schemes:
619
+
620
+ ```diff
621
+ const theme = {
622
+ - colors,
623
+ - shadows,
624
+ + colorSchemes: {
625
+ + light: {
626
+ + colors,
627
+ + shadows,
628
+ + },
629
+ + dark: {...},
630
+ + dark_dimmed: {...},
631
+ + },
632
+ space,
633
+ fonts,
634
+ fontSizes,
635
+ fontWeights,
636
+ lineHeights,
637
+ borderWidths,
638
+ radii,
639
+ breakpoints,
640
+ sizes,
641
+ }
642
+ ```
643
+
644
+ - The `theme.colors` and `theme.shadows` objects are no longer available from the `theme` export. Use the `useTheme`hook instead:
645
+
646
+ ```diff
647
+ - import {theme} from '@primer/react'
648
+ + import {useTheme} from '@primer/react'
649
+
650
+ function Example() {
651
+ + const {theme} = useTheme()
652
+ const myColor = theme.colors.text.primary
653
+ ...
654
+ }
655
+ ```
656
+
657
+ ### Patch Changes
658
+
659
+ - [`360e3595`](https://github.com/primer/react/commit/360e3595a6e133e8caf391e7355f25b856936b12) [#1111](https://github.com/primer/react/pull/1111) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Update color variable used in ProgressBar (`state.success` → `bg.successInverse`)
660
+
661
+ * [`1b3d87d2`](https://github.com/primer/react/commit/1b3d87d27103b99dd02cbf61f88d93b7df80d5b1) [#1127](https://github.com/primer/react/pull/1127) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Bump @primer/primitives from 0.0.0-20211167520 to 0.0.0-20212178221
662
+
663
+ ## 24.0.0
664
+
665
+ ### Major Changes
666
+
667
+ - [`b9d9d245`](https://github.com/primer/react/commit/b9d9d2450c3f726fa0e6bc8cb43ba678df0c60ad) [#1068](https://github.com/primer/react/pull/1068) Thanks [@colebemis](https://github.com/colebemis)! - Remove propTypes in favor of TypeScript types
668
+
669
+ * [`beef075e`](https://github.com/primer/react/commit/beef075e0274396b77887adf0b912583fe564b3f) [#1094](https://github.com/primer/react/pull/1094) Thanks [@colebemis](https://github.com/colebemis)! - Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `<ThemeProvider>` at the root of your application:
670
+
671
+ ```jsx
672
+ import {ThemeProvider} from 'styled-components'
673
+ import {theme} from '@primer/react'
674
+
675
+ function App(props) {
676
+ return (
677
+ <div>
678
+ <ThemeProvider theme={theme}>
679
+ <div>your app here</div>
680
+ </ThemeProvider>
681
+ </div>
682
+ )
683
+ }
684
+ ```
685
+
686
+ ### Patch Changes
687
+
688
+ - [`397f3360`](https://github.com/primer/react/commit/397f3360f1e6486ae475394b5b4cef968a0cdb21) [#1106](https://github.com/primer/react/pull/1106) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Pagination
689
+
690
+ * [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in BaseStyles
691
+
692
+ - [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in BranchName
693
+
694
+ * [`e93cf268`](https://github.com/primer/react/commit/e93cf268b9b8b25fee535dc4aa7d31c0b015d420) [#1092](https://github.com/primer/react/pull/1092) Thanks [@bscofield](https://github.com/bscofield)! - Use functional color variables in Caret, CircleBadge, Pagehead, ProgressBar, and Popover
695
+
696
+ - [`5a042778`](https://github.com/primer/react/commit/5a04277861a78d567b812e7b83c2977c61402247) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in FilterList
697
+
698
+ * [`a886bbcf`](https://github.com/primer/react/commit/a886bbcf765659a4742245d37c9f8d1327daca7a) [#1098](https://github.com/primer/react/pull/1098) Thanks [@bscofield](https://github.com/bscofield)! - Update SelectMenu and child components to use functional color variables
699
+
700
+ - [`f2c57794`](https://github.com/primer/react/commit/f2c57794dc8163eda974d37a4fbb939b631c82cc) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in SideNav
701
+
702
+ * [`756191e7`](https://github.com/primer/react/commit/756191e7d20ea46c83a591fd2cf7b2ab9c3ed0fc) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonOutline
703
+
704
+ - [`6b2dc95f`](https://github.com/primer/react/commit/6b2dc95f2b3e250e130ff7e36d18eda3cda94b4a) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in TabNav
705
+
706
+ * [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in Timeline
707
+
708
+ - [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in TextInput
709
+
710
+ * [`8f2b4d2e`](https://github.com/primer/react/commit/8f2b4d2e434d1af2eb6d5d3c7f566fae147033ee) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonPrimary
711
+
712
+ - [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in Link
713
+
714
+ * [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in BorderBox
715
+
716
+ - [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in Tooltip
717
+
718
+ * [`1fb750af`](https://github.com/primer/react/commit/1fb750afc9083466eadad76b3387967d466d336a) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonTableList
719
+
720
+ - [`ea21d8eb`](https://github.com/primer/react/commit/ea21d8eb99f710727b31d2c0f8ddc1d5f59d61cf) [#1102](https://github.com/primer/react/pull/1102) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Flash
721
+
722
+ * [`51d180ac`](https://github.com/primer/react/commit/51d180ace3562569910a80557904f138677b3262) [#1089](https://github.com/primer/react/pull/1089) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in UnderlineNav
723
+
724
+ - [`44aa68e2`](https://github.com/primer/react/commit/44aa68e2e725bdb2a3be349d7bec3e18b3f17809) [#1101](https://github.com/primer/react/pull/1101) Thanks [@emplums](https://github.com/emplums)! - Forwards aria-label to correct component
725
+
726
+ * [`d0f38c3d`](https://github.com/primer/react/commit/d0f38c3d7bbcc7d57a8d459d8c61862102f89b1e) [#1102](https://github.com/primer/react/pull/1102) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Header
727
+
728
+ - [`5df7723a`](https://github.com/primer/react/commit/5df7723afabe0d3bdd29e3eab8622586b3ab072a) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in DropdownStyles
729
+
730
+ * [`170876e6`](https://github.com/primer/react/commit/170876e6546a435faf7e0401d6fc8060a64b199d) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Button
731
+
732
+ - [`c44ee363`](https://github.com/primer/react/commit/c44ee363e9d663b873ea721e42dac8e5366ebcd1) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in SubNav
733
+
734
+ * [`198e24ad`](https://github.com/primer/react/commit/198e24adef084b115441c72b80d3113f411a5fa5) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonDanger
735
+
736
+ - [`39371d98`](https://github.com/primer/react/commit/39371d98be5c7fa1bf2be5542a90d752bc330e2b) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in CounterLabel
737
+
738
+ * [`92597504`](https://github.com/primer/react/commit/9259750429913d7977746c55da5a397d591a4f45) [#1100](https://github.com/primer/react/pull/1100) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonClose
739
+
740
+ - [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in AvatarPair
741
+
742
+ * [`fa106ea9`](https://github.com/primer/react/commit/fa106ea9a43a8451efb648d1e3ec9df87577379c) [#1090](https://github.com/primer/react/pull/1090) Thanks [@colebemis](https://github.com/colebemis)! - Use functional color variables in AvatarStack
743
+
744
+ - [`565f1980`](https://github.com/primer/react/commit/565f19808c528a2d33042c339603ea76d6097d0c) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Breadcrumb
745
+
746
+ * [`4e19045e`](https://github.com/primer/react/commit/4e19045ec1ca46ece0c029a193ed1863a8994030) [#1085](https://github.com/primer/react/pull/1085) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in StateLabel
747
+
748
+ - [`31025697`](https://github.com/primer/react/commit/31025697b61f80fc35442e66e73311269d0cdc48) [#1099](https://github.com/primer/react/pull/1099) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in Dialog
749
+
750
+ * [`67cc5b23`](https://github.com/primer/react/commit/67cc5b23fb5b968a7ecbebbca9671e65d4acfee6) [#1097](https://github.com/primer/react/pull/1097) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Use functional color variables in ButtonInvisible
751
+
752
+ ## 23.2.1
753
+
754
+ ### Patch Changes
755
+
756
+ - [`a42162c0`](https://github.com/primer/react/commit/a42162c011fa3718a32124b79aecfe306f358298) [#1087](https://github.com/primer/react/pull/1087) Thanks [@emplums](https://github.com/emplums)! - Fix up styles in TabNav allowing for items positioned on the right end of TabNav
757
+
758
+ ## 23.2.0
759
+
760
+ ### Minor Changes
761
+
762
+ - [`b273f1f9`](https://github.com/primer/react/commit/b273f1f95fcb3e2224414d6a0be124e29701d439) [#1083](https://github.com/primer/react/pull/1083) Thanks [@emplums](https://github.com/emplums)! - Adds a `contrast` prop to TextInput
763
+
764
+ ### Patch Changes
765
+
766
+ - [`c50b9f93`](https://github.com/primer/react/commit/c50b9f93402e7898b2a30f6f7fd0159ed40a8e86) [#1059](https://github.com/primer/react/pull/1059) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Dropdown` to TypeScript
767
+
768
+ * [`681799fd`](https://github.com/primer/react/commit/681799fd996537f56b15169ce8ac801e68aff41b) [#1066](https://github.com/primer/react/pull/1066) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `useMouseIntent` to TypeScript
769
+
770
+ - [`eaeb2389`](https://github.com/primer/react/commit/eaeb2389738c1c366e41ddb7795b03c865359034) [#1055](https://github.com/primer/react/pull/1055) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `utils` to TypeScript
771
+
772
+ * [`106eb85e`](https://github.com/primer/react/commit/106eb85e969fa9ece03a789b1175346e8d53cb83) [#1060](https://github.com/primer/react/pull/1060) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Dialog` to TypeScript
773
+
774
+ - [`f11e6ac6`](https://github.com/primer/react/commit/f11e6ac67ff675137e672a33d445678fd3b64b3a) [#1048](https://github.com/primer/react/pull/1048) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `SelectMenu` to TypeScript
775
+
776
+ * [`bb635a50`](https://github.com/primer/react/commit/bb635a5094baf6821e45a7a03c6582989ee86fd5) [#1058](https://github.com/primer/react/pull/1058) Thanks [@colebemis](https://github.com/colebemis)! - Migrate theme to TypeScript
777
+
778
+ - [`fabca94e`](https://github.com/primer/react/commit/fabca94ebc3b5429b5c541aeaac6eb508fd5f182) [#1047](https://github.com/primer/react/pull/1047) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Pagination` to TypeScript
779
+
780
+ * [`c868bc96`](https://github.com/primer/react/commit/c868bc9613cb32d6fc0de009c75abdaa20c1bcdb) [#1074](https://github.com/primer/react/pull/1074) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Add functional color variables from Primer Primitives to theme object
781
+
782
+ ## 23.1.0
783
+
784
+ ### Minor Changes
785
+
786
+ - [`e0432b35`](https://github.com/primer/react/commit/e0432b35f152031be8e4a0830df5d228d7b14832) [#1041](https://github.com/primer/react/pull/1041) Thanks [@emplums](https://github.com/emplums)! - Adds new `useSafeTimeout` helper Hook
787
+
788
+ ### Patch Changes
789
+
790
+ - [`eaf57cf5`](https://github.com/primer/react/commit/eaf57cf514da106f9bd1b4de01f5fc037a84fa23) [#1054](https://github.com/primer/react/pull/1054) Thanks [@emplums](https://github.com/emplums)! - Fix border radius on ButtonClose
791
+
792
+ * [`57eba0da`](https://github.com/primer/react/commit/57eba0da8fea003d00fce781d05ac581616de391) [#1054](https://github.com/primer/react/pull/1054) Thanks [@emplums](https://github.com/emplums)! - Add ButtonInvisible focus styles
793
+
794
+ - [`e2c90dba`](https://github.com/primer/react/commit/e2c90dba38976c280f44544cd7bf5cbbc8816ee3) [#1049](https://github.com/primer/react/pull/1049) Thanks [@eintxaurtieta](https://github.com/eintxaurtieta)! - Added font-family:inherit to TextInput
795
+
796
+ * [`be82a500`](https://github.com/primer/react/commit/be82a50033e8392c2dd80f56df9f398397f45379) [#1046](https://github.com/primer/react/pull/1046) Thanks [@emplums](https://github.com/emplums)! - - Fixed Dropdown & Details types.
797
+
798
+ - [`7c4c726c`](https://github.com/primer/react/commit/7c4c726c822fafc524e9b6928a7f9d413e1a7bc8) [#1046](https://github.com/primer/react/pull/1046) Thanks [@emplums](https://github.com/emplums)! - - Added useDetails behavior back to Dropdown
799
+
800
+ ## 23.0.4
801
+
802
+ ### Patch Changes
803
+
804
+ - [`8de64e95`](https://github.com/primer/react/commit/8de64e9588dd4c545f7eca3a13d74d5f860e2b0e) [#1029](https://github.com/primer/react/pull/1029) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `TabNav` to TypeScript
805
+
806
+ * [`16aeca6b`](https://github.com/primer/react/commit/16aeca6bb37f1724037cd83db580eee69c473332) [#1032](https://github.com/primer/react/pull/1032) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `AvatarStack` to TypeScript
807
+
808
+ - [`4070310a`](https://github.com/primer/react/commit/4070310a334d8d37c5a1277f11298ef675ed1465) [#1026](https://github.com/primer/react/pull/1026) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Details` to TypeScript
809
+
810
+ * [`8f483bd9`](https://github.com/primer/react/commit/8f483bd94bb9a09ca88e3f2a116c4396404627c3) [#1042](https://github.com/primer/react/pull/1042) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `PointerBox` to TypeScript
811
+
812
+ - [`c5d2b657`](https://github.com/primer/react/commit/c5d2b65725c7e584412430fd3156875b8e1714d8) [#1035](https://github.com/primer/react/pull/1035) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `CircleBadge` to TypeScript
813
+
814
+ * [`3fcdf25f`](https://github.com/primer/react/commit/3fcdf25fc7c2def336dec4f5b34f518b2dbff903) [#1040](https://github.com/primer/react/pull/1040) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `SideNav` to TypeScript
815
+
816
+ - [`ff02c038`](https://github.com/primer/react/commit/ff02c038cdeef9cbeb8d050b3c5a951ccdbb9574) [#1033](https://github.com/primer/react/pull/1033) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Tooltip` to TypeScript
817
+
818
+ * [`0d62f260`](https://github.com/primer/react/commit/0d62f260672453a7509173b5b6d02778cf73a3e8) [#1030](https://github.com/primer/react/pull/1030) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Caret` to TypeScript
819
+
820
+ - [`d1785f4c`](https://github.com/primer/react/commit/d1785f4cd312eff66f4a0b897aaf22aff11441bc) [#1038](https://github.com/primer/react/pull/1038) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `SubNav` to TypeScript
821
+
822
+ * [`058e7919`](https://github.com/primer/react/commit/058e791936399b1e08c31bfa18c772015da587c7) [#1036](https://github.com/primer/react/pull/1036) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `CircleOcticon` to TypeScript
823
+
824
+ - [`9b71bf38`](https://github.com/primer/react/commit/9b71bf387aad9f3cd3802594fd3cccc473b46661) [#998](https://github.com/primer/react/pull/998) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Position` to TypeScript
825
+
826
+ * [`b2ac3010`](https://github.com/primer/react/commit/b2ac301092e37a319ddc10440f929425da066f69) [#1037](https://github.com/primer/react/pull/1037) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Timeline` to TypeScript
827
+
828
+ - [`ef25d019`](https://github.com/primer/react/commit/ef25d01961d20fd590dd3abcef10c87fd26135be) [#1031](https://github.com/primer/react/pull/1031) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `AvatarPair` to TypeScript
829
+
830
+ * [`62f45a12`](https://github.com/primer/react/commit/62f45a12fbd87d18adbc611a6410734f9fd16ab9) [#1028](https://github.com/primer/react/pull/1028) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `TextInput` to TypeScript
831
+
832
+ - [`a4dce5da`](https://github.com/primer/react/commit/a4dce5daecdf65ce2ea8e55f962e5843b2b10e26) [#1017](https://github.com/primer/react/pull/1017) Thanks [@smockle](https://github.com/smockle)! - Migrate button components to TypeScript
833
+
834
+ * [`cc36e6b4`](https://github.com/primer/react/commit/cc36e6b410600994d46af864cec7b83314a6987c) [#1034](https://github.com/primer/react/pull/1034) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Popover` to TypeScript
835
+
836
+ - [`11340814`](https://github.com/primer/react/commit/113408140bef3d47a023925aa975273e264959ac) [#1020](https://github.com/primer/react/pull/1020) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Header` to TypeScript
837
+
838
+ ## 23.0.3
839
+
840
+ ### Patch Changes
841
+
842
+ - [`3e0110bc`](https://github.com/primer/react/commit/3e0110bc942ba080c8c7bbaf1778b88b3cc25570) [#995](https://github.com/primer/react/pull/995) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Flash` to TypeScript
843
+
844
+ * [`b0cea82e`](https://github.com/primer/react/commit/b0cea82e27e72f2bd351c14721e0d70343c98ebd) [#1003](https://github.com/primer/react/pull/1003) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Truncate` to TypeScript
845
+
846
+ - [`f9a7e78a`](https://github.com/primer/react/commit/f9a7e78a0e512be90cc349483ed6fab2010e1765) [#987](https://github.com/primer/react/pull/987) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `ProgressBar` to TypeScript
847
+
848
+ * [`d848b9e0`](https://github.com/primer/react/commit/d848b9e054a0f96648ddd02b13ac9c19f56ecb42) [#993](https://github.com/primer/react/pull/993) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `StyledOcticon` to TypeScript
849
+
850
+ - [`73bced4b`](https://github.com/primer/react/commit/73bced4bdf70b71137e1d4c349db232842efcdee) [#1015](https://github.com/primer/react/pull/1015) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `FilterList` to TypeScript
851
+
852
+ * [`fcd773c4`](https://github.com/primer/react/commit/fcd773c4212062b2957dd3befba90ac034dd3fe5) [#1009](https://github.com/primer/react/pull/1009) Thanks [@emplums](https://github.com/emplums)! - Upgrade Octicons to 11.3.0
853
+
854
+ - [`b9671ca2`](https://github.com/primer/react/commit/b9671ca28bbcf9521882f9ca2fed986c426a8833) [#1005](https://github.com/primer/react/pull/1005) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `CounterLabel` to TypeScript
855
+
856
+ * [`1fb77ac3`](https://github.com/primer/react/commit/1fb77ac3b0ed60dee0481bd14f069f913d37cfdd) [#1012](https://github.com/primer/react/pull/1012) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Breadcrumb` to TypeScript
857
+
858
+ - [`91002078`](https://github.com/primer/react/commit/91002078bc173134e7c94541fe5388fca0baefa5) [#1008](https://github.com/primer/react/pull/1008) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `StateLabel` to TypeScript
859
+
860
+ * [`3a3c81a4`](https://github.com/primer/react/commit/3a3c81a4e71a88249d08a02d26575c7d00e35fa3) [#984](https://github.com/primer/react/pull/984) Thanks [@bscofield](https://github.com/bscofield)! - Migrate `Avatar` to TypeScript
861
+
862
+ - [`df2920f5`](https://github.com/primer/react/commit/df2920f5e80e6f73d423f1e1dd468994a5894618) [#1014](https://github.com/primer/react/pull/1014) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `UnderlineNav` to TypeScript
863
+
864
+ * [`b947aff2`](https://github.com/primer/react/commit/b947aff26f26d46ebe8f7bb4b930863ba1b05eaa) [#1006](https://github.com/primer/react/pull/1006) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `FilteredSearch` to TypeScript
865
+
866
+ - [`2e71f70f`](https://github.com/primer/react/commit/2e71f70f2113de273b9c41a667f2fc9b539a01de) [#1011](https://github.com/primer/react/pull/1011) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Migrate `Link` to TypeScript
867
+
868
+ ## 23.0.2
869
+
870
+ ### Patch Changes
871
+
872
+ - [`7128403c`](https://github.com/primer/react/commit/7128403c488a2cfefda3743d7f92be8142071bc8) [#979](https://github.com/primer/react/pull/979) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Text` to TypeScript
873
+
874
+ * [`fe16e21c`](https://github.com/primer/react/commit/fe16e21cb3a67d424cdbb663ea2d13e2397eb42c) [#982](https://github.com/primer/react/pull/982) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `BaseStyles` to TypeScript
875
+
876
+ - [`ee806857`](https://github.com/primer/react/commit/ee8068579106d34309faa1a0c44e1ed25edafb59) [#975](https://github.com/primer/react/pull/975) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Heading` to TypeScript
877
+
878
+ * [`25315571`](https://github.com/primer/react/commit/2531557171cd2e39b980a456d42e15880e16256f) [#976](https://github.com/primer/react/pull/976) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Label` to TypeScript
879
+
880
+ - [`4076bf4e`](https://github.com/primer/react/commit/4076bf4e173d997c46ba1130c5f0f86f04952790) [#986](https://github.com/primer/react/pull/986) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Flex` to TypeScript
881
+
882
+ * [`397a46fe`](https://github.com/primer/react/commit/397a46fe1edee9c2bb71e6ceedafff8dc4e76cb2) [#976](https://github.com/primer/react/pull/976) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `LabelGroup` to TypeScript
883
+
884
+ - [`e841e158`](https://github.com/primer/react/commit/e841e158dcc557169fce19c78d5d90af5fef6af6) [#983](https://github.com/primer/react/pull/983) Thanks [@shiftkey](https://github.com/shiftkey)! - Add supported `htmlFor` prop to `FormGroupLabelProps` type definition
885
+
886
+ * [`dc0df4b2`](https://github.com/primer/react/commit/dc0df4b209d952b121f04fc86d0f2984a6e661cf) [#973](https://github.com/primer/react/pull/973) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `BorderBox` to TypeScript
887
+
888
+ - [`0cac0042`](https://github.com/primer/react/commit/0cac00426d4d29c51d9f110f091aac06c49ec054) [#974](https://github.com/primer/react/pull/974) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `BranchName` to TypeScript
889
+
890
+ * [`755a1a5c`](https://github.com/primer/react/commit/755a1a5c19f6d6298f9c6785b50fed71aaea59ad) [#977](https://github.com/primer/react/pull/977) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Pagehead` to TypeScript
891
+
892
+ - [`34ff4885`](https://github.com/primer/react/commit/34ff4885311686699fbb6d2e3fab0337bad3d016) [#989](https://github.com/primer/react/pull/989) Thanks [@colebemis](https://github.com/colebemis)! - Migrate `Grid` to TypeScript