@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

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 (456) hide show
  1. package/.github/workflows/ci.yml +5 -2
  2. package/.github/workflows/release.yml +1 -0
  3. package/.github/workflows/release_canary.yml +1 -0
  4. package/CHANGELOG.md +18 -0
  5. package/dist/browser.esm.js +656 -645
  6. package/dist/browser.esm.js.map +1 -1
  7. package/dist/browser.umd.js +211 -200
  8. package/dist/browser.umd.js.map +1 -1
  9. package/docs/content/ActionList2.mdx +358 -0
  10. package/docs/content/StateLabel.md +5 -4
  11. package/docs/content/getting-started.md +1 -1
  12. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  13. package/lib/ActionList/Divider.jsx +29 -0
  14. package/lib/ActionList/Group.jsx +23 -0
  15. package/lib/ActionList/Header.jsx +66 -0
  16. package/lib/ActionList/Item.js +28 -19
  17. package/lib/ActionList/Item.jsx +311 -0
  18. package/lib/ActionList/List.jsx +138 -0
  19. package/lib/ActionList/index.js +12 -23
  20. package/lib/ActionList2/Description.d.ts +12 -0
  21. package/lib/ActionList2/Description.js +57 -0
  22. package/lib/ActionList2/Description.jsx +29 -0
  23. package/lib/ActionList2/Divider.d.ts +5 -0
  24. package/lib/ActionList2/Divider.js +35 -0
  25. package/lib/ActionList2/Divider.jsx +22 -0
  26. package/lib/ActionList2/Group.d.ts +11 -0
  27. package/lib/ActionList2/Group.js +57 -0
  28. package/lib/ActionList2/Group.jsx +25 -0
  29. package/lib/ActionList2/Header.d.ts +26 -0
  30. package/lib/ActionList2/Header.js +55 -0
  31. package/lib/ActionList2/Header.jsx +36 -0
  32. package/lib/ActionList2/Item.d.ts +63 -0
  33. package/lib/ActionList2/Item.js +242 -0
  34. package/lib/ActionList2/Item.jsx +174 -0
  35. package/lib/ActionList2/LinkItem.d.ts +17 -0
  36. package/lib/ActionList2/LinkItem.js +57 -0
  37. package/lib/ActionList2/LinkItem.jsx +28 -0
  38. package/lib/ActionList2/List.d.ts +26 -0
  39. package/lib/ActionList2/List.js +59 -0
  40. package/lib/ActionList2/List.jsx +41 -0
  41. package/lib/ActionList2/Selection.d.ts +5 -0
  42. package/lib/ActionList2/Selection.js +84 -0
  43. package/lib/ActionList2/Selection.jsx +50 -0
  44. package/lib/ActionList2/Visuals.d.ts +9 -0
  45. package/lib/ActionList2/Visuals.js +90 -0
  46. package/lib/ActionList2/Visuals.jsx +48 -0
  47. package/lib/ActionList2/index.d.ts +36 -0
  48. package/lib/ActionList2/index.js +29 -0
  49. package/lib/ActionMenu.jsx +73 -0
  50. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +100 -0
  51. package/lib/AnchoredOverlay/index.js +4 -12
  52. package/lib/Autocomplete/Autocomplete.d.ts +28 -28
  53. package/lib/Autocomplete/Autocomplete.jsx +100 -0
  54. package/lib/Autocomplete/AutocompleteContext.jsx +5 -0
  55. package/lib/Autocomplete/AutocompleteInput.d.ts +28 -28
  56. package/lib/Autocomplete/AutocompleteInput.jsx +113 -0
  57. package/lib/Autocomplete/AutocompleteMenu.jsx +190 -0
  58. package/lib/Autocomplete/AutocompleteOverlay.jsx +55 -0
  59. package/lib/Autocomplete/index.js +7 -14
  60. package/lib/Avatar.jsx +34 -0
  61. package/lib/AvatarPair.jsx +29 -0
  62. package/lib/AvatarStack.jsx +151 -0
  63. package/lib/BaseStyles.jsx +65 -0
  64. package/lib/BorderBox.jsx +18 -0
  65. package/lib/Box.jsx +10 -0
  66. package/lib/BranchName.jsx +20 -0
  67. package/lib/Breadcrumbs.jsx +74 -0
  68. package/lib/Button/Button.d.ts +25 -25
  69. package/lib/Button/Button.jsx +60 -0
  70. package/lib/Button/ButtonBase.jsx +36 -0
  71. package/lib/Button/ButtonClose.d.ts +45 -45
  72. package/lib/Button/ButtonClose.jsx +55 -0
  73. package/lib/Button/ButtonDanger.d.ts +25 -25
  74. package/lib/Button/ButtonDanger.jsx +63 -0
  75. package/lib/Button/ButtonGroup.jsx +55 -0
  76. package/lib/Button/ButtonInvisible.d.ts +25 -25
  77. package/lib/Button/ButtonInvisible.jsx +52 -0
  78. package/lib/Button/ButtonOutline.d.ts +25 -25
  79. package/lib/Button/ButtonOutline.jsx +63 -0
  80. package/lib/Button/ButtonPrimary.d.ts +25 -25
  81. package/lib/Button/ButtonPrimary.jsx +62 -0
  82. package/lib/Button/ButtonStyles.jsx +37 -0
  83. package/lib/Button/ButtonTableList.jsx +49 -0
  84. package/lib/Button/index.js +21 -70
  85. package/lib/Caret.jsx +93 -0
  86. package/lib/CircleBadge.jsx +43 -0
  87. package/lib/CircleOcticon.d.ts +42 -42
  88. package/lib/CircleOcticon.jsx +21 -0
  89. package/lib/CounterLabel.jsx +44 -0
  90. package/lib/Details.jsx +21 -0
  91. package/lib/Dialog/ConfirmationDialog.jsx +146 -0
  92. package/lib/Dialog/Dialog.js +1 -0
  93. package/lib/Dialog/Dialog.jsx +273 -0
  94. package/lib/Dialog.d.ts +45 -45
  95. package/lib/Dialog.jsx +131 -0
  96. package/lib/Dropdown.d.ts +176 -176
  97. package/lib/Dropdown.jsx +134 -0
  98. package/lib/DropdownMenu/DropdownButton.d.ts +46 -46
  99. package/lib/DropdownMenu/DropdownButton.jsx +14 -0
  100. package/lib/DropdownMenu/DropdownMenu.jsx +70 -0
  101. package/lib/DropdownMenu/index.js +6 -20
  102. package/lib/DropdownStyles.js +18 -26
  103. package/lib/FilterList.d.ts +42 -42
  104. package/lib/FilterList.jsx +63 -0
  105. package/lib/FilteredActionList/FilteredActionList.jsx +100 -0
  106. package/lib/FilteredActionList/index.js +4 -12
  107. package/lib/FilteredSearch.jsx +29 -0
  108. package/lib/Flash.jsx +70 -0
  109. package/lib/Flex.jsx +15 -0
  110. package/lib/FormGroup.jsx +25 -0
  111. package/lib/Grid.jsx +15 -0
  112. package/lib/Header.jsx +90 -0
  113. package/lib/Heading.jsx +21 -0
  114. package/lib/Label.jsx +84 -0
  115. package/lib/LabelGroup.jsx +19 -0
  116. package/lib/Link.jsx +38 -0
  117. package/lib/NewButton/button-counter.d.ts +6 -0
  118. package/lib/NewButton/button-counter.js +31 -0
  119. package/lib/NewButton/button-counter.jsx +14 -0
  120. package/lib/NewButton/button.d.ts +13 -0
  121. package/lib/NewButton/button.js +316 -0
  122. package/lib/NewButton/button.jsx +278 -0
  123. package/lib/NewButton/index.d.ts +14 -0
  124. package/lib/NewButton/index.js +8 -0
  125. package/lib/NewButton/types.d.ts +32 -0
  126. package/lib/NewButton/types.js +2 -0
  127. package/lib/Overlay.jsx +156 -0
  128. package/lib/Pagehead.jsx +18 -0
  129. package/lib/Pagination/Pagination.jsx +163 -0
  130. package/lib/Pagination/index.js +6 -12
  131. package/lib/Pagination/model.jsx +174 -0
  132. package/lib/PointerBox.jsx +25 -0
  133. package/lib/Popover.jsx +210 -0
  134. package/lib/Portal/Portal.jsx +79 -0
  135. package/lib/Portal/index.js +5 -16
  136. package/lib/Position.d.ts +4 -4
  137. package/lib/Position.jsx +46 -0
  138. package/lib/ProgressBar.jsx +39 -0
  139. package/lib/SelectMenu/SelectMenu.d.ts +246 -246
  140. package/lib/SelectMenu/SelectMenu.jsx +114 -0
  141. package/lib/SelectMenu/SelectMenuContext.jsx +5 -0
  142. package/lib/SelectMenu/SelectMenuDivider.jsx +43 -0
  143. package/lib/SelectMenu/SelectMenuFilter.jsx +59 -0
  144. package/lib/SelectMenu/SelectMenuFooter.jsx +46 -0
  145. package/lib/SelectMenu/SelectMenuHeader.jsx +44 -0
  146. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  147. package/lib/SelectMenu/SelectMenuItem.jsx +143 -0
  148. package/lib/SelectMenu/SelectMenuList.jsx +60 -0
  149. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +21 -0
  150. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  151. package/lib/SelectMenu/SelectMenuModal.jsx +119 -0
  152. package/lib/SelectMenu/SelectMenuTab.jsx +93 -0
  153. package/lib/SelectMenu/SelectMenuTabPanel.jsx +43 -0
  154. package/lib/SelectMenu/SelectMenuTabs.jsx +58 -0
  155. package/lib/SelectMenu/hooks/useKeyboardNav.js +80 -96
  156. package/lib/SelectMenu/index.js +7 -14
  157. package/lib/SelectPanel/SelectPanel.jsx +105 -0
  158. package/lib/SelectPanel/index.js +4 -12
  159. package/lib/SideNav.jsx +177 -0
  160. package/lib/Spinner.jsx +35 -0
  161. package/lib/StateLabel.d.ts +1 -1
  162. package/lib/StateLabel.js +6 -1
  163. package/lib/StateLabel.jsx +94 -0
  164. package/lib/StyledOcticon.jsx +20 -0
  165. package/lib/SubNav.jsx +104 -0
  166. package/lib/TabNav.jsx +60 -0
  167. package/lib/Text.jsx +14 -0
  168. package/lib/TextInput.jsx +23 -0
  169. package/lib/TextInputWithTokens.d.ts +28 -28
  170. package/lib/TextInputWithTokens.jsx +218 -0
  171. package/lib/ThemeProvider.jsx +130 -0
  172. package/lib/Timeline.d.ts +43 -43
  173. package/lib/Timeline.jsx +124 -0
  174. package/lib/Token/AvatarToken.d.ts +1 -1
  175. package/lib/Token/AvatarToken.jsx +54 -0
  176. package/lib/Token/IssueLabelToken.d.ts +1 -1
  177. package/lib/Token/IssueLabelToken.jsx +125 -0
  178. package/lib/Token/Token.d.ts +1 -1
  179. package/lib/Token/Token.jsx +103 -0
  180. package/lib/Token/TokenBase.jsx +88 -0
  181. package/lib/Token/_RemoveTokenButton.jsx +108 -0
  182. package/lib/Token/_TokenTextContainer.jsx +49 -0
  183. package/lib/Token/index.js +11 -30
  184. package/lib/Tooltip.jsx +246 -0
  185. package/lib/Truncate.jsx +27 -0
  186. package/lib/UnderlineNav.jsx +90 -0
  187. package/lib/_TextInputWrapper.jsx +120 -0
  188. package/lib/_UnstyledTextInput.jsx +22 -0
  189. package/lib/__tests__/ActionList.test.jsx +49 -0
  190. package/lib/__tests__/ActionList.types.test.jsx +45 -0
  191. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  192. package/lib/__tests__/ActionList2.test.js +53 -0
  193. package/lib/__tests__/ActionList2.test.jsx +46 -0
  194. package/lib/__tests__/ActionMenu.test.jsx +124 -0
  195. package/lib/__tests__/AnchoredOverlay.test.jsx +121 -0
  196. package/lib/__tests__/Autocomplete.test.jsx +299 -0
  197. package/lib/__tests__/Avatar.test.jsx +42 -0
  198. package/lib/__tests__/AvatarStack.test.jsx +43 -0
  199. package/lib/__tests__/BorderBox.test.jsx +36 -0
  200. package/lib/__tests__/Box.test.jsx +41 -0
  201. package/lib/__tests__/BranchName.test.jsx +27 -0
  202. package/lib/__tests__/Breadcrumbs.test.jsx +28 -0
  203. package/lib/__tests__/BreadcrumbsItem.test.jsx +31 -0
  204. package/lib/__tests__/Button.test.jsx +100 -0
  205. package/lib/__tests__/Caret.test.jsx +37 -0
  206. package/lib/__tests__/CircleBadge.test.jsx +55 -0
  207. package/lib/__tests__/CircleOcticon.test.jsx +45 -0
  208. package/lib/__tests__/ConfirmationDialog.test.jsx +119 -0
  209. package/lib/__tests__/CounterLabel.test.jsx +36 -0
  210. package/lib/__tests__/Details.test.jsx +85 -0
  211. package/lib/__tests__/Dialog.test.jsx +139 -0
  212. package/lib/__tests__/Dropdown.test.jsx +49 -0
  213. package/lib/__tests__/DropdownMenu.test.jsx +119 -0
  214. package/lib/__tests__/FilterList.test.jsx +27 -0
  215. package/lib/__tests__/FilterListItem.test.jsx +31 -0
  216. package/lib/__tests__/FilteredSearch.test.jsx +27 -0
  217. package/lib/__tests__/Flash.test.jsx +36 -0
  218. package/lib/__tests__/Flex.test.jsx +51 -0
  219. package/lib/__tests__/FormGroup.test.jsx +36 -0
  220. package/lib/__tests__/Grid.test.jsx +69 -0
  221. package/lib/__tests__/Header.test.jsx +45 -0
  222. package/lib/__tests__/Heading.test.jsx +71 -0
  223. package/lib/__tests__/KeyPaths.types.test.js +5 -8
  224. package/lib/__tests__/Label.test.jsx +33 -0
  225. package/lib/__tests__/LabelGroup.test.jsx +29 -0
  226. package/lib/__tests__/Link.test.jsx +43 -0
  227. package/lib/__tests__/Merge.types.test.js +13 -19
  228. package/lib/__tests__/NewButton.test.d.ts +1 -0
  229. package/lib/__tests__/NewButton.test.js +95 -0
  230. package/lib/__tests__/NewButton.test.jsx +61 -0
  231. package/lib/__tests__/Overlay.test.jsx +105 -0
  232. package/lib/__tests__/Pagehead.test.jsx +25 -0
  233. package/lib/__tests__/Pagination/Pagination.test.jsx +32 -0
  234. package/lib/__tests__/Pagination/PaginationModel.test.jsx +118 -0
  235. package/lib/__tests__/PointerBox.test.jsx +33 -0
  236. package/lib/__tests__/Popover.test.jsx +58 -0
  237. package/lib/__tests__/Portal.test.jsx +102 -0
  238. package/lib/__tests__/Position.test.jsx +96 -0
  239. package/lib/__tests__/ProgressBar.test.jsx +38 -0
  240. package/lib/__tests__/SelectMenu.test.jsx +120 -0
  241. package/lib/__tests__/SelectPanel.test.jsx +48 -0
  242. package/lib/__tests__/SideNav.test.jsx +55 -0
  243. package/lib/__tests__/Spinner.test.jsx +41 -0
  244. package/lib/__tests__/StateLabel.test.jsx +46 -0
  245. package/lib/__tests__/StyledOcticon.test.jsx +28 -0
  246. package/lib/__tests__/SubNav.test.jsx +47 -0
  247. package/lib/__tests__/SubNavLink.test.jsx +31 -0
  248. package/lib/__tests__/TabNav.test.jsx +32 -0
  249. package/lib/__tests__/Text.test.jsx +71 -0
  250. package/lib/__tests__/TextInput.test.jsx +45 -0
  251. package/lib/__tests__/TextInputWithTokens.test.jsx +302 -0
  252. package/lib/__tests__/ThemeProvider.test.jsx +314 -0
  253. package/lib/__tests__/Timeline.test.jsx +51 -0
  254. package/lib/__tests__/Token.test.jsx +93 -0
  255. package/lib/__tests__/Tooltip.test.jsx +46 -0
  256. package/lib/__tests__/Truncate.test.jsx +41 -0
  257. package/lib/__tests__/UnderlineNav.test.jsx +53 -0
  258. package/lib/__tests__/UnderlineNavLink.test.jsx +31 -0
  259. package/lib/__tests__/behaviors/anchoredPosition.test.js +229 -376
  260. package/lib/__tests__/behaviors/focusTrap.test.jsx +184 -0
  261. package/lib/__tests__/behaviors/focusZone.test.jsx +406 -0
  262. package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx +58 -0
  263. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +145 -216
  264. package/lib/__tests__/filterObject.test.js +48 -27
  265. package/lib/__tests__/hooks/useAnchoredPosition.test.jsx +29 -0
  266. package/lib/__tests__/hooks/useOnEscapePress.test.jsx +19 -0
  267. package/lib/__tests__/hooks/useOnOutsideClick.test.jsx +63 -0
  268. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.jsx +61 -0
  269. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.jsx +56 -0
  270. package/lib/__tests__/theme.test.js +33 -34
  271. package/lib/__tests__/themeGet.test.js +12 -23
  272. package/lib/__tests__/useSafeTimeout.test.jsx +36 -0
  273. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  274. package/lib/__tests__/utils/createSlots.test.js +75 -0
  275. package/lib/__tests__/utils/createSlots.test.jsx +57 -0
  276. package/lib/behaviors/anchoredPosition.js +205 -234
  277. package/lib/behaviors/focusTrap.js +121 -157
  278. package/lib/behaviors/focusZone.js +434 -509
  279. package/lib/behaviors/scrollIntoViewingArea.js +18 -35
  280. package/lib/constants.js +39 -43
  281. package/lib/drafts.d.ts +8 -0
  282. package/lib/drafts.js +21 -0
  283. package/lib/hooks/index.js +16 -60
  284. package/lib/hooks/useAnchoredPosition.js +32 -40
  285. package/lib/hooks/useCombinedRefs.js +32 -36
  286. package/lib/hooks/useDetails.jsx +39 -0
  287. package/lib/hooks/useDialog.js +72 -96
  288. package/lib/hooks/useFocusTrap.js +43 -60
  289. package/lib/hooks/useFocusZone.js +54 -50
  290. package/lib/hooks/useOnEscapePress.js +25 -36
  291. package/lib/hooks/useOnOutsideClick.jsx +61 -0
  292. package/lib/hooks/useOpenAndCloseFocus.js +22 -34
  293. package/lib/hooks/useOverlay.jsx +15 -0
  294. package/lib/hooks/useProvidedRefOrCreate.js +10 -14
  295. package/lib/hooks/useProvidedStateOrCreate.js +13 -16
  296. package/lib/hooks/useRenderForcingRef.js +13 -17
  297. package/lib/hooks/useResizeObserver.js +15 -18
  298. package/lib/hooks/useSafeTimeout.js +22 -30
  299. package/lib/hooks/useScrollFlash.js +16 -23
  300. package/lib/index.d.ts +2 -0
  301. package/lib/index.js +163 -636
  302. package/lib/polyfills/eventListenerSignal.js +37 -45
  303. package/lib/stories/ActionList2.stories.js +908 -0
  304. package/lib/stories/NewButton.stories.js +230 -0
  305. package/lib/sx.d.ts +2 -0
  306. package/lib/sx.js +10 -14
  307. package/lib/theme-preval.js +65 -2945
  308. package/lib/theme.js +3 -12
  309. package/lib/utils/create-slots.d.ts +17 -0
  310. package/lib/utils/create-slots.js +105 -0
  311. package/lib/utils/create-slots.jsx +65 -0
  312. package/lib/utils/deprecate.jsx +59 -0
  313. package/lib/utils/isNumeric.jsx +7 -0
  314. package/lib/utils/iterateFocusableElements.js +63 -85
  315. package/lib/utils/ssr.jsx +6 -0
  316. package/lib/utils/test-deprecations.jsx +20 -0
  317. package/lib/utils/test-helpers.jsx +8 -0
  318. package/lib/utils/test-matchers.jsx +100 -0
  319. package/lib/utils/testing.d.ts +14 -1
  320. package/lib/utils/testing.jsx +206 -0
  321. package/lib/utils/theme.js +33 -47
  322. package/lib/utils/types/AriaRole.js +2 -1
  323. package/lib/utils/types/ComponentProps.js +2 -1
  324. package/lib/utils/types/Flatten.js +2 -1
  325. package/lib/utils/types/KeyPaths.js +2 -1
  326. package/lib/utils/types/MandateProps.js +16 -1
  327. package/lib/utils/types/Merge.js +2 -1
  328. package/lib/utils/types/index.js +16 -69
  329. package/lib/utils/uniqueId.js +5 -8
  330. package/lib/utils/use-force-update.d.ts +1 -0
  331. package/lib/utils/use-force-update.js +13 -0
  332. package/lib/utils/useIsomorphicLayoutEffect.js +8 -11
  333. package/lib/utils/userAgent.js +8 -12
  334. package/lib-esm/ActionList/Item.js +28 -19
  335. package/lib-esm/ActionList2/Description.d.ts +12 -0
  336. package/lib-esm/ActionList2/Description.js +41 -0
  337. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  338. package/lib-esm/ActionList2/Divider.js +23 -0
  339. package/lib-esm/ActionList2/Group.d.ts +11 -0
  340. package/lib-esm/ActionList2/Group.js +40 -0
  341. package/lib-esm/ActionList2/Header.d.ts +26 -0
  342. package/lib-esm/ActionList2/Header.js +44 -0
  343. package/lib-esm/ActionList2/Item.d.ts +63 -0
  344. package/lib-esm/ActionList2/Item.js +208 -0
  345. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  346. package/lib-esm/ActionList2/LinkItem.js +43 -0
  347. package/lib-esm/ActionList2/List.d.ts +26 -0
  348. package/lib-esm/ActionList2/List.js +37 -0
  349. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  350. package/lib-esm/ActionList2/Selection.js +66 -0
  351. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  352. package/lib-esm/ActionList2/Visuals.js +68 -0
  353. package/lib-esm/ActionList2/index.d.ts +36 -0
  354. package/lib-esm/ActionList2/index.js +33 -0
  355. package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -28
  356. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -28
  357. package/lib-esm/Button/Button.d.ts +25 -25
  358. package/lib-esm/Button/ButtonClose.d.ts +45 -45
  359. package/lib-esm/Button/ButtonDanger.d.ts +25 -25
  360. package/lib-esm/Button/ButtonInvisible.d.ts +25 -25
  361. package/lib-esm/Button/ButtonOutline.d.ts +25 -25
  362. package/lib-esm/Button/ButtonPrimary.d.ts +25 -25
  363. package/lib-esm/CircleOcticon.d.ts +42 -42
  364. package/lib-esm/Dialog/Dialog.js +1 -0
  365. package/lib-esm/Dialog.d.ts +45 -45
  366. package/lib-esm/Dropdown.d.ts +176 -176
  367. package/lib-esm/DropdownMenu/DropdownButton.d.ts +46 -46
  368. package/lib-esm/FilterList.d.ts +42 -42
  369. package/lib-esm/NewButton/button-counter.d.ts +6 -0
  370. package/lib-esm/NewButton/button-counter.js +18 -0
  371. package/lib-esm/NewButton/button.d.ts +13 -0
  372. package/lib-esm/NewButton/button.js +298 -0
  373. package/lib-esm/NewButton/index.d.ts +14 -0
  374. package/lib-esm/NewButton/index.js +5 -0
  375. package/lib-esm/NewButton/types.d.ts +32 -0
  376. package/lib-esm/NewButton/types.js +1 -0
  377. package/lib-esm/Position.d.ts +4 -4
  378. package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -246
  379. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  380. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  381. package/lib-esm/StateLabel.d.ts +1 -1
  382. package/lib-esm/StateLabel.js +7 -2
  383. package/lib-esm/TextInputWithTokens.d.ts +28 -28
  384. package/lib-esm/Timeline.d.ts +43 -43
  385. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  386. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  387. package/lib-esm/Token/Token.d.ts +1 -1
  388. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  389. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  390. package/lib-esm/__tests__/NewButton.test.d.ts +1 -0
  391. package/lib-esm/__tests__/NewButton.test.js +84 -0
  392. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  393. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  394. package/lib-esm/drafts.d.ts +8 -0
  395. package/lib-esm/drafts.js +9 -0
  396. package/lib-esm/index.d.ts +2 -0
  397. package/lib-esm/index.js +1 -0
  398. package/lib-esm/stories/ActionList2.stories.js +796 -0
  399. package/lib-esm/stories/NewButton.stories.js +178 -0
  400. package/lib-esm/sx.d.ts +2 -0
  401. package/lib-esm/sx.js +3 -1
  402. package/lib-esm/theme-preval.js +81 -2
  403. package/lib-esm/utils/create-slots.d.ts +17 -0
  404. package/lib-esm/utils/create-slots.js +84 -0
  405. package/lib-esm/utils/testing.d.ts +14 -1
  406. package/lib-esm/utils/use-force-update.d.ts +1 -0
  407. package/lib-esm/utils/use-force-update.js +6 -0
  408. package/package-lock.json +153 -14
  409. package/package.json +7 -4
  410. package/script/build +1 -1
  411. package/src/ActionList/Item.tsx +32 -19
  412. package/src/ActionList2/Description.tsx +52 -0
  413. package/src/ActionList2/Divider.tsx +24 -0
  414. package/src/ActionList2/Group.tsx +34 -0
  415. package/src/ActionList2/Header.tsx +58 -0
  416. package/src/ActionList2/Item.tsx +246 -0
  417. package/src/ActionList2/LinkItem.tsx +49 -0
  418. package/src/ActionList2/List.tsx +55 -0
  419. package/src/ActionList2/Selection.tsx +60 -0
  420. package/src/ActionList2/Visuals.tsx +76 -0
  421. package/src/ActionList2/index.ts +39 -0
  422. package/src/Dialog/Dialog.tsx +1 -0
  423. package/src/NewButton/button-counter.tsx +15 -0
  424. package/src/NewButton/button.tsx +279 -0
  425. package/src/NewButton/index.ts +10 -0
  426. package/src/NewButton/types.ts +36 -0
  427. package/src/StateLabel.tsx +14 -2
  428. package/src/__tests__/ActionList2.test.tsx +47 -0
  429. package/src/__tests__/NewButton.test.tsx +70 -0
  430. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  431. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +722 -255
  432. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +1 -0
  433. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +1 -0
  434. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +1 -0
  435. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -0
  436. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +300 -0
  437. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +4 -0
  438. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -0
  439. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +13 -6
  440. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +1 -0
  441. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +66 -0
  442. package/src/__tests__/__snapshots__/Token.test.tsx.snap +17 -0
  443. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  444. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  445. package/src/drafts.ts +10 -0
  446. package/src/index.ts +2 -0
  447. package/src/stories/ActionList2.stories.tsx +1291 -0
  448. package/src/stories/NewButton.stories.tsx +201 -0
  449. package/src/sx.ts +3 -0
  450. package/src/theme-preval.js +1 -0
  451. package/src/utils/create-slots.tsx +96 -0
  452. package/src/utils/use-force-update.ts +7 -0
  453. package/stats.html +1 -1
  454. package/tsconfig.base.json +20 -0
  455. package/tsconfig.build.json +2 -2
  456. package/tsconfig.json +4 -17
package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap CHANGED
@@ -290,6 +290,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
290
290
  style={
291
291
  Object {
292
292
  "display": "inline-block",
293
+ "overflow": "visible",
293
294
  "userSelect": "none",
294
295
  "verticalAlign": "text-bottom",
295
296
  }
@@ -337,6 +338,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
337
338
  style={
338
339
  Object {
339
340
  "display": "inline-block",
341
+ "overflow": "visible",
340
342
  "userSelect": "none",
341
343
  "verticalAlign": "text-bottom",
342
344
  }
@@ -775,6 +777,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
775
777
  style={
776
778
  Object {
777
779
  "display": "inline-block",
780
+ "overflow": "visible",
778
781
  "userSelect": "none",
779
782
  "verticalAlign": "text-bottom",
780
783
  }
@@ -822,6 +825,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
822
825
  style={
823
826
  Object {
824
827
  "display": "inline-block",
828
+ "overflow": "visible",
825
829
  "userSelect": "none",
826
830
  "verticalAlign": "text-bottom",
827
831
  }
@@ -869,6 +873,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
869
873
  style={
870
874
  Object {
871
875
  "display": "inline-block",
876
+ "overflow": "visible",
872
877
  "userSelect": "none",
873
878
  "verticalAlign": "text-bottom",
874
879
  }
@@ -916,6 +921,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
916
921
  style={
917
922
  Object {
918
923
  "display": "inline-block",
924
+ "overflow": "visible",
919
925
  "userSelect": "none",
920
926
  "verticalAlign": "text-bottom",
921
927
  }
@@ -963,6 +969,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
963
969
  style={
964
970
  Object {
965
971
  "display": "inline-block",
972
+ "overflow": "visible",
966
973
  "userSelect": "none",
967
974
  "verticalAlign": "text-bottom",
968
975
  }
@@ -1010,6 +1017,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
1010
1017
  style={
1011
1018
  Object {
1012
1019
  "display": "inline-block",
1020
+ "overflow": "visible",
1013
1021
  "userSelect": "none",
1014
1022
  "verticalAlign": "text-bottom",
1015
1023
  }
@@ -1057,6 +1065,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
1057
1065
  style={
1058
1066
  Object {
1059
1067
  "display": "inline-block",
1068
+ "overflow": "visible",
1060
1069
  "userSelect": "none",
1061
1070
  "verticalAlign": "text-bottom",
1062
1071
  }
@@ -1104,6 +1113,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
1104
1113
  style={
1105
1114
  Object {
1106
1115
  "display": "inline-block",
1116
+ "overflow": "visible",
1107
1117
  "userSelect": "none",
1108
1118
  "verticalAlign": "text-bottom",
1109
1119
  }
@@ -1402,6 +1412,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1402
1412
  style={
1403
1413
  Object {
1404
1414
  "display": "inline-block",
1415
+ "overflow": "visible",
1405
1416
  "userSelect": "none",
1406
1417
  "verticalAlign": "text-bottom",
1407
1418
  }
@@ -1449,6 +1460,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1449
1460
  style={
1450
1461
  Object {
1451
1462
  "display": "inline-block",
1463
+ "overflow": "visible",
1452
1464
  "userSelect": "none",
1453
1465
  "verticalAlign": "text-bottom",
1454
1466
  }
@@ -1496,6 +1508,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1496
1508
  style={
1497
1509
  Object {
1498
1510
  "display": "inline-block",
1511
+ "overflow": "visible",
1499
1512
  "userSelect": "none",
1500
1513
  "verticalAlign": "text-bottom",
1501
1514
  }
@@ -1543,6 +1556,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1543
1556
  style={
1544
1557
  Object {
1545
1558
  "display": "inline-block",
1559
+ "overflow": "visible",
1546
1560
  "userSelect": "none",
1547
1561
  "verticalAlign": "text-bottom",
1548
1562
  }
@@ -1590,6 +1604,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1590
1604
  style={
1591
1605
  Object {
1592
1606
  "display": "inline-block",
1607
+ "overflow": "visible",
1593
1608
  "userSelect": "none",
1594
1609
  "verticalAlign": "text-bottom",
1595
1610
  }
@@ -1637,6 +1652,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1637
1652
  style={
1638
1653
  Object {
1639
1654
  "display": "inline-block",
1655
+ "overflow": "visible",
1640
1656
  "userSelect": "none",
1641
1657
  "verticalAlign": "text-bottom",
1642
1658
  }
@@ -1684,6 +1700,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1684
1700
  style={
1685
1701
  Object {
1686
1702
  "display": "inline-block",
1703
+ "overflow": "visible",
1687
1704
  "userSelect": "none",
1688
1705
  "verticalAlign": "text-bottom",
1689
1706
  }
@@ -1731,6 +1748,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
1731
1748
  style={
1732
1749
  Object {
1733
1750
  "display": "inline-block",
1751
+ "overflow": "visible",
1734
1752
  "userSelect": "none",
1735
1753
  "verticalAlign": "text-bottom",
1736
1754
  }
@@ -2029,6 +2047,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2029
2047
  style={
2030
2048
  Object {
2031
2049
  "display": "inline-block",
2050
+ "overflow": "visible",
2032
2051
  "userSelect": "none",
2033
2052
  "verticalAlign": "text-bottom",
2034
2053
  }
@@ -2076,6 +2095,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2076
2095
  style={
2077
2096
  Object {
2078
2097
  "display": "inline-block",
2098
+ "overflow": "visible",
2079
2099
  "userSelect": "none",
2080
2100
  "verticalAlign": "text-bottom",
2081
2101
  }
@@ -2123,6 +2143,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2123
2143
  style={
2124
2144
  Object {
2125
2145
  "display": "inline-block",
2146
+ "overflow": "visible",
2126
2147
  "userSelect": "none",
2127
2148
  "verticalAlign": "text-bottom",
2128
2149
  }
@@ -2170,6 +2191,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2170
2191
  style={
2171
2192
  Object {
2172
2193
  "display": "inline-block",
2194
+ "overflow": "visible",
2173
2195
  "userSelect": "none",
2174
2196
  "verticalAlign": "text-bottom",
2175
2197
  }
@@ -2217,6 +2239,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2217
2239
  style={
2218
2240
  Object {
2219
2241
  "display": "inline-block",
2242
+ "overflow": "visible",
2220
2243
  "userSelect": "none",
2221
2244
  "verticalAlign": "text-bottom",
2222
2245
  }
@@ -2264,6 +2287,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2264
2287
  style={
2265
2288
  Object {
2266
2289
  "display": "inline-block",
2290
+ "overflow": "visible",
2267
2291
  "userSelect": "none",
2268
2292
  "verticalAlign": "text-bottom",
2269
2293
  }
@@ -2311,6 +2335,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2311
2335
  style={
2312
2336
  Object {
2313
2337
  "display": "inline-block",
2338
+ "overflow": "visible",
2314
2339
  "userSelect": "none",
2315
2340
  "verticalAlign": "text-bottom",
2316
2341
  }
@@ -2358,6 +2383,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
2358
2383
  style={
2359
2384
  Object {
2360
2385
  "display": "inline-block",
2386
+ "overflow": "visible",
2361
2387
  "userSelect": "none",
2362
2388
  "verticalAlign": "text-bottom",
2363
2389
  }
@@ -2656,6 +2682,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2656
2682
  style={
2657
2683
  Object {
2658
2684
  "display": "inline-block",
2685
+ "overflow": "visible",
2659
2686
  "userSelect": "none",
2660
2687
  "verticalAlign": "text-bottom",
2661
2688
  }
@@ -2703,6 +2730,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2703
2730
  style={
2704
2731
  Object {
2705
2732
  "display": "inline-block",
2733
+ "overflow": "visible",
2706
2734
  "userSelect": "none",
2707
2735
  "verticalAlign": "text-bottom",
2708
2736
  }
@@ -2750,6 +2778,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2750
2778
  style={
2751
2779
  Object {
2752
2780
  "display": "inline-block",
2781
+ "overflow": "visible",
2753
2782
  "userSelect": "none",
2754
2783
  "verticalAlign": "text-bottom",
2755
2784
  }
@@ -2797,6 +2826,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2797
2826
  style={
2798
2827
  Object {
2799
2828
  "display": "inline-block",
2829
+ "overflow": "visible",
2800
2830
  "userSelect": "none",
2801
2831
  "verticalAlign": "text-bottom",
2802
2832
  }
@@ -2844,6 +2874,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2844
2874
  style={
2845
2875
  Object {
2846
2876
  "display": "inline-block",
2877
+ "overflow": "visible",
2847
2878
  "userSelect": "none",
2848
2879
  "verticalAlign": "text-bottom",
2849
2880
  }
@@ -2891,6 +2922,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2891
2922
  style={
2892
2923
  Object {
2893
2924
  "display": "inline-block",
2925
+ "overflow": "visible",
2894
2926
  "userSelect": "none",
2895
2927
  "verticalAlign": "text-bottom",
2896
2928
  }
@@ -2938,6 +2970,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2938
2970
  style={
2939
2971
  Object {
2940
2972
  "display": "inline-block",
2973
+ "overflow": "visible",
2941
2974
  "userSelect": "none",
2942
2975
  "verticalAlign": "text-bottom",
2943
2976
  }
@@ -2985,6 +3018,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
2985
3018
  style={
2986
3019
  Object {
2987
3020
  "display": "inline-block",
3021
+ "overflow": "visible",
2988
3022
  "userSelect": "none",
2989
3023
  "verticalAlign": "text-bottom",
2990
3024
  }
@@ -3283,6 +3317,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3283
3317
  style={
3284
3318
  Object {
3285
3319
  "display": "inline-block",
3320
+ "overflow": "visible",
3286
3321
  "userSelect": "none",
3287
3322
  "verticalAlign": "text-bottom",
3288
3323
  }
@@ -3330,6 +3365,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3330
3365
  style={
3331
3366
  Object {
3332
3367
  "display": "inline-block",
3368
+ "overflow": "visible",
3333
3369
  "userSelect": "none",
3334
3370
  "verticalAlign": "text-bottom",
3335
3371
  }
@@ -3377,6 +3413,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3377
3413
  style={
3378
3414
  Object {
3379
3415
  "display": "inline-block",
3416
+ "overflow": "visible",
3380
3417
  "userSelect": "none",
3381
3418
  "verticalAlign": "text-bottom",
3382
3419
  }
@@ -3424,6 +3461,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3424
3461
  style={
3425
3462
  Object {
3426
3463
  "display": "inline-block",
3464
+ "overflow": "visible",
3427
3465
  "userSelect": "none",
3428
3466
  "verticalAlign": "text-bottom",
3429
3467
  }
@@ -3471,6 +3509,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3471
3509
  style={
3472
3510
  Object {
3473
3511
  "display": "inline-block",
3512
+ "overflow": "visible",
3474
3513
  "userSelect": "none",
3475
3514
  "verticalAlign": "text-bottom",
3476
3515
  }
@@ -3518,6 +3557,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3518
3557
  style={
3519
3558
  Object {
3520
3559
  "display": "inline-block",
3560
+ "overflow": "visible",
3521
3561
  "userSelect": "none",
3522
3562
  "verticalAlign": "text-bottom",
3523
3563
  }
@@ -3565,6 +3605,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3565
3605
  style={
3566
3606
  Object {
3567
3607
  "display": "inline-block",
3608
+ "overflow": "visible",
3568
3609
  "userSelect": "none",
3569
3610
  "verticalAlign": "text-bottom",
3570
3611
  }
@@ -3612,6 +3653,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
3612
3653
  style={
3613
3654
  Object {
3614
3655
  "display": "inline-block",
3656
+ "overflow": "visible",
3615
3657
  "userSelect": "none",
3616
3658
  "verticalAlign": "text-bottom",
3617
3659
  }
@@ -3911,6 +3953,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
3911
3953
  style={
3912
3954
  Object {
3913
3955
  "display": "inline-block",
3956
+ "overflow": "visible",
3914
3957
  "userSelect": "none",
3915
3958
  "verticalAlign": "text-bottom",
3916
3959
  }
@@ -3958,6 +4001,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
3958
4001
  style={
3959
4002
  Object {
3960
4003
  "display": "inline-block",
4004
+ "overflow": "visible",
3961
4005
  "userSelect": "none",
3962
4006
  "verticalAlign": "text-bottom",
3963
4007
  }
@@ -4005,6 +4049,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
4005
4049
  style={
4006
4050
  Object {
4007
4051
  "display": "inline-block",
4052
+ "overflow": "visible",
4008
4053
  "userSelect": "none",
4009
4054
  "verticalAlign": "text-bottom",
4010
4055
  }
@@ -4052,6 +4097,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
4052
4097
  style={
4053
4098
  Object {
4054
4099
  "display": "inline-block",
4100
+ "overflow": "visible",
4055
4101
  "userSelect": "none",
4056
4102
  "verticalAlign": "text-bottom",
4057
4103
  }
@@ -4099,6 +4145,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
4099
4145
  style={
4100
4146
  Object {
4101
4147
  "display": "inline-block",
4148
+ "overflow": "visible",
4102
4149
  "userSelect": "none",
4103
4150
  "verticalAlign": "text-bottom",
4104
4151
  }
@@ -4146,6 +4193,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
4146
4193
  style={
4147
4194
  Object {
4148
4195
  "display": "inline-block",
4196
+ "overflow": "visible",
4149
4197
  "userSelect": "none",
4150
4198
  "verticalAlign": "text-bottom",
4151
4199
  }
@@ -4193,6 +4241,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
4193
4241
  style={
4194
4242
  Object {
4195
4243
  "display": "inline-block",
4244
+ "overflow": "visible",
4196
4245
  "userSelect": "none",
4197
4246
  "verticalAlign": "text-bottom",
4198
4247
  }
@@ -4240,6 +4289,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
4240
4289
  style={
4241
4290
  Object {
4242
4291
  "display": "inline-block",
4292
+ "overflow": "visible",
4243
4293
  "userSelect": "none",
4244
4294
  "verticalAlign": "text-bottom",
4245
4295
  }
@@ -4881,6 +4931,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
4881
4931
  style={
4882
4932
  Object {
4883
4933
  "display": "inline-block",
4934
+ "overflow": "visible",
4884
4935
  "userSelect": "none",
4885
4936
  "verticalAlign": "text-bottom",
4886
4937
  }
@@ -4928,6 +4979,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
4928
4979
  style={
4929
4980
  Object {
4930
4981
  "display": "inline-block",
4982
+ "overflow": "visible",
4931
4983
  "userSelect": "none",
4932
4984
  "verticalAlign": "text-bottom",
4933
4985
  }
@@ -4975,6 +5027,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
4975
5027
  style={
4976
5028
  Object {
4977
5029
  "display": "inline-block",
5030
+ "overflow": "visible",
4978
5031
  "userSelect": "none",
4979
5032
  "verticalAlign": "text-bottom",
4980
5033
  }
@@ -5022,6 +5075,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
5022
5075
  style={
5023
5076
  Object {
5024
5077
  "display": "inline-block",
5078
+ "overflow": "visible",
5025
5079
  "userSelect": "none",
5026
5080
  "verticalAlign": "text-bottom",
5027
5081
  }
@@ -5069,6 +5123,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
5069
5123
  style={
5070
5124
  Object {
5071
5125
  "display": "inline-block",
5126
+ "overflow": "visible",
5072
5127
  "userSelect": "none",
5073
5128
  "verticalAlign": "text-bottom",
5074
5129
  }
@@ -5116,6 +5171,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
5116
5171
  style={
5117
5172
  Object {
5118
5173
  "display": "inline-block",
5174
+ "overflow": "visible",
5119
5175
  "userSelect": "none",
5120
5176
  "verticalAlign": "text-bottom",
5121
5177
  }
@@ -5163,6 +5219,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
5163
5219
  style={
5164
5220
  Object {
5165
5221
  "display": "inline-block",
5222
+ "overflow": "visible",
5166
5223
  "userSelect": "none",
5167
5224
  "verticalAlign": "text-bottom",
5168
5225
  }
@@ -5210,6 +5267,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
5210
5267
  style={
5211
5268
  Object {
5212
5269
  "display": "inline-block",
5270
+ "overflow": "visible",
5213
5271
  "userSelect": "none",
5214
5272
  "verticalAlign": "text-bottom",
5215
5273
  }
@@ -5513,6 +5571,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5513
5571
  style={
5514
5572
  Object {
5515
5573
  "display": "inline-block",
5574
+ "overflow": "visible",
5516
5575
  "userSelect": "none",
5517
5576
  "verticalAlign": "text-bottom",
5518
5577
  }
@@ -5560,6 +5619,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5560
5619
  style={
5561
5620
  Object {
5562
5621
  "display": "inline-block",
5622
+ "overflow": "visible",
5563
5623
  "userSelect": "none",
5564
5624
  "verticalAlign": "text-bottom",
5565
5625
  }
@@ -5607,6 +5667,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5607
5667
  style={
5608
5668
  Object {
5609
5669
  "display": "inline-block",
5670
+ "overflow": "visible",
5610
5671
  "userSelect": "none",
5611
5672
  "verticalAlign": "text-bottom",
5612
5673
  }
@@ -5654,6 +5715,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5654
5715
  style={
5655
5716
  Object {
5656
5717
  "display": "inline-block",
5718
+ "overflow": "visible",
5657
5719
  "userSelect": "none",
5658
5720
  "verticalAlign": "text-bottom",
5659
5721
  }
@@ -5701,6 +5763,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5701
5763
  style={
5702
5764
  Object {
5703
5765
  "display": "inline-block",
5766
+ "overflow": "visible",
5704
5767
  "userSelect": "none",
5705
5768
  "verticalAlign": "text-bottom",
5706
5769
  }
@@ -5748,6 +5811,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5748
5811
  style={
5749
5812
  Object {
5750
5813
  "display": "inline-block",
5814
+ "overflow": "visible",
5751
5815
  "userSelect": "none",
5752
5816
  "verticalAlign": "text-bottom",
5753
5817
  }
@@ -5795,6 +5859,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5795
5859
  style={
5796
5860
  Object {
5797
5861
  "display": "inline-block",
5862
+ "overflow": "visible",
5798
5863
  "userSelect": "none",
5799
5864
  "verticalAlign": "text-bottom",
5800
5865
  }
@@ -5842,6 +5907,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
5842
5907
  style={
5843
5908
  Object {
5844
5909
  "display": "inline-block",
5910
+ "overflow": "visible",
5845
5911
  "userSelect": "none",
5846
5912
  "verticalAlign": "text-bottom",
5847
5913
  }
package/src/__tests__/__snapshots__/Token.test.tsx.snap CHANGED
@@ -199,6 +199,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
199
199
  style={
200
200
  Object {
201
201
  "display": "inline-block",
202
+ "overflow": "visible",
202
203
  "userSelect": "none",
203
204
  "verticalAlign": "text-bottom",
204
205
  }
@@ -409,6 +410,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
409
410
  style={
410
411
  Object {
411
412
  "display": "inline-block",
413
+ "overflow": "visible",
412
414
  "userSelect": "none",
413
415
  "verticalAlign": "text-bottom",
414
416
  }
@@ -619,6 +621,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
619
621
  style={
620
622
  Object {
621
623
  "display": "inline-block",
624
+ "overflow": "visible",
622
625
  "userSelect": "none",
623
626
  "verticalAlign": "text-bottom",
624
627
  }
@@ -829,6 +832,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
829
832
  style={
830
833
  Object {
831
834
  "display": "inline-block",
835
+ "overflow": "visible",
832
836
  "userSelect": "none",
833
837
  "verticalAlign": "text-bottom",
834
838
  }
@@ -1251,6 +1255,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
1251
1255
  style={
1252
1256
  Object {
1253
1257
  "display": "inline-block",
1258
+ "overflow": "visible",
1254
1259
  "userSelect": "none",
1255
1260
  "verticalAlign": "text-bottom",
1256
1261
  }
@@ -1427,6 +1432,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
1427
1432
  style={
1428
1433
  Object {
1429
1434
  "display": "inline-block",
1435
+ "overflow": "visible",
1430
1436
  "userSelect": "none",
1431
1437
  "verticalAlign": "text-bottom",
1432
1438
  }
@@ -1603,6 +1609,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
1603
1609
  style={
1604
1610
  Object {
1605
1611
  "display": "inline-block",
1612
+ "overflow": "visible",
1606
1613
  "userSelect": "none",
1607
1614
  "verticalAlign": "text-bottom",
1608
1615
  }
@@ -1779,6 +1786,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
1779
1786
  style={
1780
1787
  Object {
1781
1788
  "display": "inline-block",
1789
+ "overflow": "visible",
1782
1790
  "userSelect": "none",
1783
1791
  "verticalAlign": "text-bottom",
1784
1792
  }
@@ -1955,6 +1963,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
1955
1963
  style={
1956
1964
  Object {
1957
1965
  "display": "inline-block",
1966
+ "overflow": "visible",
1958
1967
  "userSelect": "none",
1959
1968
  "verticalAlign": "text-bottom",
1960
1969
  }
@@ -2214,6 +2223,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
2214
2223
  style={
2215
2224
  Object {
2216
2225
  "display": "inline-block",
2226
+ "overflow": "visible",
2217
2227
  "userSelect": "none",
2218
2228
  "verticalAlign": "text-bottom",
2219
2229
  }
@@ -2390,6 +2400,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
2390
2400
  style={
2391
2401
  Object {
2392
2402
  "display": "inline-block",
2403
+ "overflow": "visible",
2393
2404
  "userSelect": "none",
2394
2405
  "verticalAlign": "text-bottom",
2395
2406
  }
@@ -2679,6 +2690,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
2679
2690
  style={
2680
2691
  Object {
2681
2692
  "display": "inline-block",
2693
+ "overflow": "visible",
2682
2694
  "userSelect": "none",
2683
2695
  "verticalAlign": "text-bottom",
2684
2696
  }
@@ -2845,6 +2857,7 @@ exports[`Token components Token renders all sizes 1`] = `
2845
2857
  style={
2846
2858
  Object {
2847
2859
  "display": "inline-block",
2860
+ "overflow": "visible",
2848
2861
  "userSelect": "none",
2849
2862
  "verticalAlign": "text-bottom",
2850
2863
  }
@@ -3011,6 +3024,7 @@ exports[`Token components Token renders all sizes 2`] = `
3011
3024
  style={
3012
3025
  Object {
3013
3026
  "display": "inline-block",
3027
+ "overflow": "visible",
3014
3028
  "userSelect": "none",
3015
3029
  "verticalAlign": "text-bottom",
3016
3030
  }
@@ -3177,6 +3191,7 @@ exports[`Token components Token renders all sizes 3`] = `
3177
3191
  style={
3178
3192
  Object {
3179
3193
  "display": "inline-block",
3194
+ "overflow": "visible",
3180
3195
  "userSelect": "none",
3181
3196
  "verticalAlign": "text-bottom",
3182
3197
  }
@@ -3343,6 +3358,7 @@ exports[`Token components Token renders all sizes 4`] = `
3343
3358
  style={
3344
3359
  Object {
3345
3360
  "display": "inline-block",
3361
+ "overflow": "visible",
3346
3362
  "userSelect": "none",
3347
3363
  "verticalAlign": "text-bottom",
3348
3364
  }
@@ -3782,6 +3798,7 @@ exports[`Token components Token renders with a remove button 1`] = `
3782
3798
  style={
3783
3799
  Object {
3784
3800
  "display": "inline-block",
3801
+ "overflow": "visible",
3785
3802
  "userSelect": "none",
3786
3803
  "verticalAlign": "text-bottom",
3787
3804
  }
package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap ADDED
@@ -0,0 +1,55 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`ComponentWithSlots renders all slots 1`] = `
4
+ <div>
5
+ <div>
6
+ first
7
+ <span>
8
+ free form
9
+
10
+ second
11
+
12
+ </span>
13
+ </div>
14
+ </div>
15
+ `;
16
+
17
+ exports[`ComponentWithSlots renders with context passed to children 1`] = `
18
+ <div>
19
+ <div>
20
+ <span>
21
+ free form
22
+
23
+
24
+ hi
25
+
26
+ third
27
+ </span>
28
+ </div>
29
+ </div>
30
+ `;
31
+
32
+ exports[`ComponentWithSlots renders with just one slot 1`] = `
33
+ <div>
34
+ <div>
35
+ first
36
+ <span>
37
+ free form
38
+
39
+
40
+ </span>
41
+ </div>
42
+ </div>
43
+ `;
44
+
45
+ exports[`ComponentWithSlots renders without any slots 1`] = `
46
+ <div>
47
+ <div>
48
+ <span>
49
+ free form
50
+
51
+
52
+ </span>
53
+ </div>
54
+ </div>
55
+ `;