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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (420) hide show
  1. package/.github/workflows/ci.yml +5 -2
  2. package/.github/workflows/release.yml +1 -0
  3. package/.github/workflows/release_canary.yml +1 -0
  4. package/CHANGELOG.md +13 -1
  5. package/dist/browser.esm.js +620 -618
  6. package/dist/browser.esm.js.map +1 -1
  7. package/dist/browser.umd.js +188 -186
  8. package/dist/browser.umd.js.map +1 -1
  9. package/docs/content/ActionList2.mdx +360 -0
  10. package/docs/content/StateLabel.md +5 -4
  11. package/docs/content/getting-started.md +1 -1
  12. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  13. package/lib/ActionList/Divider.jsx +29 -0
  14. package/lib/ActionList/Group.jsx +23 -0
  15. package/lib/ActionList/Header.jsx +66 -0
  16. package/lib/ActionList/Item.jsx +301 -0
  17. package/lib/ActionList/List.jsx +138 -0
  18. package/lib/ActionList/index.js +12 -23
  19. package/lib/ActionList2/Description.d.ts +12 -0
  20. package/lib/ActionList2/Description.js +53 -0
  21. package/lib/ActionList2/Description.jsx +30 -0
  22. package/lib/ActionList2/Divider.d.ts +5 -0
  23. package/lib/ActionList2/Divider.js +35 -0
  24. package/lib/ActionList2/Divider.jsx +22 -0
  25. package/lib/ActionList2/Group.d.ts +11 -0
  26. package/lib/ActionList2/Group.js +57 -0
  27. package/lib/ActionList2/Group.jsx +25 -0
  28. package/lib/ActionList2/Header.d.ts +26 -0
  29. package/lib/ActionList2/Header.js +55 -0
  30. package/lib/ActionList2/Header.jsx +36 -0
  31. package/lib/ActionList2/Item.d.ts +63 -0
  32. package/lib/ActionList2/Item.js +244 -0
  33. package/lib/ActionList2/Item.jsx +174 -0
  34. package/lib/ActionList2/LinkItem.d.ts +17 -0
  35. package/lib/ActionList2/LinkItem.js +57 -0
  36. package/lib/ActionList2/LinkItem.jsx +28 -0
  37. package/lib/ActionList2/List.d.ts +26 -0
  38. package/lib/ActionList2/List.js +59 -0
  39. package/lib/ActionList2/List.jsx +41 -0
  40. package/lib/ActionList2/Selection.d.ts +5 -0
  41. package/lib/ActionList2/Selection.js +70 -0
  42. package/lib/ActionList2/Selection.jsx +36 -0
  43. package/lib/ActionList2/Visuals.d.ts +9 -0
  44. package/lib/ActionList2/Visuals.js +90 -0
  45. package/lib/ActionList2/Visuals.jsx +48 -0
  46. package/lib/ActionList2/index.d.ts +36 -0
  47. package/lib/ActionList2/index.js +29 -0
  48. package/lib/ActionMenu.jsx +73 -0
  49. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +100 -0
  50. package/lib/AnchoredOverlay/index.js +4 -12
  51. package/lib/Autocomplete/Autocomplete.d.ts +28 -28
  52. package/lib/Autocomplete/Autocomplete.jsx +100 -0
  53. package/lib/Autocomplete/AutocompleteContext.jsx +5 -0
  54. package/lib/Autocomplete/AutocompleteInput.d.ts +28 -28
  55. package/lib/Autocomplete/AutocompleteInput.jsx +113 -0
  56. package/lib/Autocomplete/AutocompleteMenu.jsx +190 -0
  57. package/lib/Autocomplete/AutocompleteOverlay.jsx +55 -0
  58. package/lib/Autocomplete/index.js +7 -14
  59. package/lib/Avatar.jsx +34 -0
  60. package/lib/AvatarPair.jsx +29 -0
  61. package/lib/AvatarStack.jsx +151 -0
  62. package/lib/BaseStyles.jsx +65 -0
  63. package/lib/BorderBox.jsx +18 -0
  64. package/lib/Box.jsx +10 -0
  65. package/lib/BranchName.jsx +20 -0
  66. package/lib/Breadcrumbs.jsx +74 -0
  67. package/lib/Button/Button.d.ts +25 -25
  68. package/lib/Button/Button.jsx +60 -0
  69. package/lib/Button/ButtonBase.jsx +36 -0
  70. package/lib/Button/ButtonClose.d.ts +45 -45
  71. package/lib/Button/ButtonClose.jsx +55 -0
  72. package/lib/Button/ButtonDanger.d.ts +25 -25
  73. package/lib/Button/ButtonDanger.jsx +63 -0
  74. package/lib/Button/ButtonGroup.jsx +55 -0
  75. package/lib/Button/ButtonInvisible.d.ts +25 -25
  76. package/lib/Button/ButtonInvisible.jsx +52 -0
  77. package/lib/Button/ButtonOutline.d.ts +25 -25
  78. package/lib/Button/ButtonOutline.jsx +63 -0
  79. package/lib/Button/ButtonPrimary.d.ts +25 -25
  80. package/lib/Button/ButtonPrimary.jsx +62 -0
  81. package/lib/Button/ButtonStyles.jsx +37 -0
  82. package/lib/Button/ButtonTableList.jsx +49 -0
  83. package/lib/Button/index.js +21 -70
  84. package/lib/Caret.jsx +93 -0
  85. package/lib/CircleBadge.jsx +43 -0
  86. package/lib/CircleOcticon.d.ts +42 -42
  87. package/lib/CircleOcticon.jsx +21 -0
  88. package/lib/CounterLabel.jsx +44 -0
  89. package/lib/Details.jsx +21 -0
  90. package/lib/Dialog/ConfirmationDialog.jsx +146 -0
  91. package/lib/Dialog/Dialog.jsx +273 -0
  92. package/lib/Dialog.d.ts +45 -45
  93. package/lib/Dialog.jsx +131 -0
  94. package/lib/Dropdown.d.ts +176 -176
  95. package/lib/Dropdown.jsx +134 -0
  96. package/lib/DropdownMenu/DropdownButton.d.ts +46 -46
  97. package/lib/DropdownMenu/DropdownButton.jsx +14 -0
  98. package/lib/DropdownMenu/DropdownMenu.jsx +70 -0
  99. package/lib/DropdownMenu/index.js +6 -20
  100. package/lib/DropdownStyles.js +18 -26
  101. package/lib/FilterList.d.ts +42 -42
  102. package/lib/FilterList.jsx +63 -0
  103. package/lib/FilteredActionList/FilteredActionList.jsx +100 -0
  104. package/lib/FilteredActionList/index.js +4 -12
  105. package/lib/FilteredSearch.jsx +29 -0
  106. package/lib/Flash.jsx +70 -0
  107. package/lib/Flex.jsx +15 -0
  108. package/lib/FormGroup.jsx +25 -0
  109. package/lib/Grid.jsx +15 -0
  110. package/lib/Header.jsx +90 -0
  111. package/lib/Heading.jsx +21 -0
  112. package/lib/Label.jsx +84 -0
  113. package/lib/LabelGroup.jsx +19 -0
  114. package/lib/Link.jsx +38 -0
  115. package/lib/Overlay.jsx +156 -0
  116. package/lib/Pagehead.jsx +18 -0
  117. package/lib/Pagination/Pagination.jsx +163 -0
  118. package/lib/Pagination/index.js +6 -12
  119. package/lib/Pagination/model.jsx +174 -0
  120. package/lib/PointerBox.jsx +25 -0
  121. package/lib/Popover.jsx +210 -0
  122. package/lib/Portal/Portal.jsx +79 -0
  123. package/lib/Portal/index.js +5 -16
  124. package/lib/Position.d.ts +4 -4
  125. package/lib/Position.jsx +46 -0
  126. package/lib/ProgressBar.jsx +39 -0
  127. package/lib/SelectMenu/SelectMenu.d.ts +246 -246
  128. package/lib/SelectMenu/SelectMenu.jsx +114 -0
  129. package/lib/SelectMenu/SelectMenuContext.jsx +5 -0
  130. package/lib/SelectMenu/SelectMenuDivider.jsx +43 -0
  131. package/lib/SelectMenu/SelectMenuFilter.jsx +59 -0
  132. package/lib/SelectMenu/SelectMenuFooter.jsx +46 -0
  133. package/lib/SelectMenu/SelectMenuHeader.jsx +44 -0
  134. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  135. package/lib/SelectMenu/SelectMenuItem.jsx +143 -0
  136. package/lib/SelectMenu/SelectMenuList.jsx +60 -0
  137. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +21 -0
  138. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  139. package/lib/SelectMenu/SelectMenuModal.jsx +119 -0
  140. package/lib/SelectMenu/SelectMenuTab.jsx +93 -0
  141. package/lib/SelectMenu/SelectMenuTabPanel.jsx +43 -0
  142. package/lib/SelectMenu/SelectMenuTabs.jsx +58 -0
  143. package/lib/SelectMenu/hooks/useKeyboardNav.js +80 -96
  144. package/lib/SelectMenu/index.js +7 -14
  145. package/lib/SelectPanel/SelectPanel.jsx +105 -0
  146. package/lib/SelectPanel/index.js +4 -12
  147. package/lib/SideNav.jsx +177 -0
  148. package/lib/Spinner.jsx +35 -0
  149. package/lib/StateLabel.d.ts +1 -1
  150. package/lib/StateLabel.js +6 -1
  151. package/lib/StateLabel.jsx +94 -0
  152. package/lib/StyledOcticon.jsx +20 -0
  153. package/lib/SubNav.jsx +104 -0
  154. package/lib/TabNav.jsx +60 -0
  155. package/lib/Text.jsx +14 -0
  156. package/lib/TextInput.jsx +23 -0
  157. package/lib/TextInputWithTokens.d.ts +28 -28
  158. package/lib/TextInputWithTokens.jsx +218 -0
  159. package/lib/ThemeProvider.jsx +130 -0
  160. package/lib/Timeline.d.ts +43 -43
  161. package/lib/Timeline.jsx +124 -0
  162. package/lib/Token/AvatarToken.d.ts +1 -1
  163. package/lib/Token/AvatarToken.jsx +54 -0
  164. package/lib/Token/IssueLabelToken.d.ts +1 -1
  165. package/lib/Token/IssueLabelToken.jsx +125 -0
  166. package/lib/Token/Token.d.ts +1 -1
  167. package/lib/Token/Token.jsx +103 -0
  168. package/lib/Token/TokenBase.jsx +88 -0
  169. package/lib/Token/_RemoveTokenButton.jsx +108 -0
  170. package/lib/Token/_TokenTextContainer.jsx +49 -0
  171. package/lib/Token/index.js +11 -30
  172. package/lib/Tooltip.jsx +246 -0
  173. package/lib/Truncate.jsx +27 -0
  174. package/lib/UnderlineNav.jsx +90 -0
  175. package/lib/_TextInputWrapper.js +2 -2
  176. package/lib/_TextInputWrapper.jsx +120 -0
  177. package/lib/_UnstyledTextInput.jsx +22 -0
  178. package/lib/__tests__/ActionList.test.jsx +49 -0
  179. package/lib/__tests__/ActionList.types.test.jsx +45 -0
  180. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  181. package/lib/__tests__/ActionList2.test.js +53 -0
  182. package/lib/__tests__/ActionList2.test.jsx +46 -0
  183. package/lib/__tests__/ActionMenu.test.jsx +124 -0
  184. package/lib/__tests__/AnchoredOverlay.test.jsx +121 -0
  185. package/lib/__tests__/Autocomplete.test.jsx +299 -0
  186. package/lib/__tests__/Avatar.test.jsx +42 -0
  187. package/lib/__tests__/AvatarStack.test.jsx +43 -0
  188. package/lib/__tests__/BorderBox.test.jsx +36 -0
  189. package/lib/__tests__/Box.test.jsx +41 -0
  190. package/lib/__tests__/BranchName.test.jsx +27 -0
  191. package/lib/__tests__/Breadcrumbs.test.jsx +28 -0
  192. package/lib/__tests__/BreadcrumbsItem.test.jsx +31 -0
  193. package/lib/__tests__/Button.test.jsx +100 -0
  194. package/lib/__tests__/Caret.test.jsx +37 -0
  195. package/lib/__tests__/CircleBadge.test.jsx +55 -0
  196. package/lib/__tests__/CircleOcticon.test.jsx +45 -0
  197. package/lib/__tests__/ConfirmationDialog.test.jsx +119 -0
  198. package/lib/__tests__/CounterLabel.test.jsx +36 -0
  199. package/lib/__tests__/Details.test.jsx +85 -0
  200. package/lib/__tests__/Dialog.test.jsx +139 -0
  201. package/lib/__tests__/Dropdown.test.jsx +49 -0
  202. package/lib/__tests__/DropdownMenu.test.jsx +119 -0
  203. package/lib/__tests__/FilterList.test.jsx +27 -0
  204. package/lib/__tests__/FilterListItem.test.jsx +31 -0
  205. package/lib/__tests__/FilteredSearch.test.jsx +27 -0
  206. package/lib/__tests__/Flash.test.jsx +36 -0
  207. package/lib/__tests__/Flex.test.jsx +51 -0
  208. package/lib/__tests__/FormGroup.test.jsx +36 -0
  209. package/lib/__tests__/Grid.test.jsx +69 -0
  210. package/lib/__tests__/Header.test.jsx +45 -0
  211. package/lib/__tests__/Heading.test.jsx +71 -0
  212. package/lib/__tests__/KeyPaths.types.test.js +5 -8
  213. package/lib/__tests__/Label.test.jsx +33 -0
  214. package/lib/__tests__/LabelGroup.test.jsx +29 -0
  215. package/lib/__tests__/Link.test.jsx +43 -0
  216. package/lib/__tests__/Merge.types.test.js +13 -19
  217. package/lib/__tests__/Overlay.test.jsx +105 -0
  218. package/lib/__tests__/Pagehead.test.jsx +25 -0
  219. package/lib/__tests__/Pagination/Pagination.test.jsx +32 -0
  220. package/lib/__tests__/Pagination/PaginationModel.test.jsx +118 -0
  221. package/lib/__tests__/PointerBox.test.jsx +33 -0
  222. package/lib/__tests__/Popover.test.jsx +58 -0
  223. package/lib/__tests__/Portal.test.jsx +102 -0
  224. package/lib/__tests__/Position.test.jsx +96 -0
  225. package/lib/__tests__/ProgressBar.test.jsx +38 -0
  226. package/lib/__tests__/SelectMenu.test.jsx +120 -0
  227. package/lib/__tests__/SelectPanel.test.jsx +48 -0
  228. package/lib/__tests__/SideNav.test.jsx +55 -0
  229. package/lib/__tests__/Spinner.test.jsx +41 -0
  230. package/lib/__tests__/StateLabel.test.jsx +46 -0
  231. package/lib/__tests__/StyledOcticon.test.jsx +28 -0
  232. package/lib/__tests__/SubNav.test.jsx +47 -0
  233. package/lib/__tests__/SubNavLink.test.jsx +31 -0
  234. package/lib/__tests__/TabNav.test.jsx +32 -0
  235. package/lib/__tests__/Text.test.jsx +71 -0
  236. package/lib/__tests__/TextInput.test.jsx +45 -0
  237. package/lib/__tests__/TextInputWithTokens.test.jsx +302 -0
  238. package/lib/__tests__/ThemeProvider.test.jsx +314 -0
  239. package/lib/__tests__/Timeline.test.jsx +51 -0
  240. package/lib/__tests__/Token.test.jsx +93 -0
  241. package/lib/__tests__/Tooltip.test.jsx +46 -0
  242. package/lib/__tests__/Truncate.test.jsx +41 -0
  243. package/lib/__tests__/UnderlineNav.test.jsx +53 -0
  244. package/lib/__tests__/UnderlineNavLink.test.jsx +31 -0
  245. package/lib/__tests__/behaviors/anchoredPosition.test.js +229 -376
  246. package/lib/__tests__/behaviors/focusTrap.test.jsx +184 -0
  247. package/lib/__tests__/behaviors/focusZone.test.jsx +406 -0
  248. package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx +58 -0
  249. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +145 -216
  250. package/lib/__tests__/filterObject.test.js +48 -27
  251. package/lib/__tests__/hooks/useAnchoredPosition.test.jsx +29 -0
  252. package/lib/__tests__/hooks/useOnEscapePress.test.jsx +19 -0
  253. package/lib/__tests__/hooks/useOnOutsideClick.test.jsx +63 -0
  254. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.jsx +61 -0
  255. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.jsx +56 -0
  256. package/lib/__tests__/theme.test.js +33 -34
  257. package/lib/__tests__/themeGet.test.js +12 -23
  258. package/lib/__tests__/useSafeTimeout.test.jsx +36 -0
  259. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  260. package/lib/__tests__/utils/createSlots.test.js +75 -0
  261. package/lib/__tests__/utils/createSlots.test.jsx +57 -0
  262. package/lib/behaviors/anchoredPosition.js +205 -234
  263. package/lib/behaviors/focusTrap.js +121 -157
  264. package/lib/behaviors/focusZone.js +434 -509
  265. package/lib/behaviors/scrollIntoViewingArea.js +18 -35
  266. package/lib/constants.js +39 -43
  267. package/lib/drafts.d.ts +7 -0
  268. package/lib/drafts.js +20 -0
  269. package/lib/hooks/index.js +16 -60
  270. package/lib/hooks/useAnchoredPosition.js +32 -40
  271. package/lib/hooks/useCombinedRefs.js +32 -36
  272. package/lib/hooks/useDetails.jsx +39 -0
  273. package/lib/hooks/useDialog.js +72 -96
  274. package/lib/hooks/useFocusTrap.js +43 -60
  275. package/lib/hooks/useFocusZone.js +54 -50
  276. package/lib/hooks/useOnEscapePress.js +25 -36
  277. package/lib/hooks/useOnOutsideClick.jsx +61 -0
  278. package/lib/hooks/useOpenAndCloseFocus.js +22 -34
  279. package/lib/hooks/useOverlay.jsx +15 -0
  280. package/lib/hooks/useProvidedRefOrCreate.js +10 -14
  281. package/lib/hooks/useProvidedStateOrCreate.js +13 -16
  282. package/lib/hooks/useRenderForcingRef.js +13 -17
  283. package/lib/hooks/useResizeObserver.js +15 -18
  284. package/lib/hooks/useSafeTimeout.js +22 -30
  285. package/lib/hooks/useScrollFlash.js +16 -23
  286. package/lib/index.js +161 -636
  287. package/lib/polyfills/eventListenerSignal.js +37 -45
  288. package/lib/stories/ActionList2.stories.js +908 -0
  289. package/lib/stories/TextInput.stories.js +144 -0
  290. package/lib/sx.d.ts +2 -0
  291. package/lib/sx.js +10 -14
  292. package/lib/theme-preval.js +65 -2945
  293. package/lib/theme.js +3 -12
  294. package/lib/utils/create-slots.d.ts +17 -0
  295. package/lib/utils/create-slots.js +105 -0
  296. package/lib/utils/create-slots.jsx +65 -0
  297. package/lib/utils/deprecate.jsx +59 -0
  298. package/lib/utils/isNumeric.jsx +7 -0
  299. package/lib/utils/iterateFocusableElements.js +63 -85
  300. package/lib/utils/ssr.jsx +6 -0
  301. package/lib/utils/test-deprecations.jsx +20 -0
  302. package/lib/utils/test-helpers.jsx +8 -0
  303. package/lib/utils/test-matchers.jsx +100 -0
  304. package/lib/utils/testing.d.ts +14 -1
  305. package/lib/utils/testing.jsx +206 -0
  306. package/lib/utils/theme.js +33 -47
  307. package/lib/utils/types/AriaRole.js +2 -1
  308. package/lib/utils/types/ComponentProps.js +2 -1
  309. package/lib/utils/types/Flatten.js +2 -1
  310. package/lib/utils/types/KeyPaths.js +2 -1
  311. package/lib/utils/types/MandateProps.js +16 -1
  312. package/lib/utils/types/Merge.js +2 -1
  313. package/lib/utils/types/index.js +16 -69
  314. package/lib/utils/uniqueId.js +5 -8
  315. package/lib/utils/use-force-update.d.ts +1 -0
  316. package/lib/utils/use-force-update.js +13 -0
  317. package/lib/utils/useIsomorphicLayoutEffect.js +8 -11
  318. package/lib/utils/userAgent.js +8 -12
  319. package/lib-esm/ActionList2/Description.d.ts +12 -0
  320. package/lib-esm/ActionList2/Description.js +37 -0
  321. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  322. package/lib-esm/ActionList2/Divider.js +23 -0
  323. package/lib-esm/ActionList2/Group.d.ts +11 -0
  324. package/lib-esm/ActionList2/Group.js +40 -0
  325. package/lib-esm/ActionList2/Header.d.ts +26 -0
  326. package/lib-esm/ActionList2/Header.js +44 -0
  327. package/lib-esm/ActionList2/Item.d.ts +63 -0
  328. package/lib-esm/ActionList2/Item.js +210 -0
  329. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  330. package/lib-esm/ActionList2/LinkItem.js +43 -0
  331. package/lib-esm/ActionList2/List.d.ts +26 -0
  332. package/lib-esm/ActionList2/List.js +37 -0
  333. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  334. package/lib-esm/ActionList2/Selection.js +52 -0
  335. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  336. package/lib-esm/ActionList2/Visuals.js +68 -0
  337. package/lib-esm/ActionList2/index.d.ts +36 -0
  338. package/lib-esm/ActionList2/index.js +33 -0
  339. package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -28
  340. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -28
  341. package/lib-esm/Button/Button.d.ts +25 -25
  342. package/lib-esm/Button/ButtonClose.d.ts +45 -45
  343. package/lib-esm/Button/ButtonDanger.d.ts +25 -25
  344. package/lib-esm/Button/ButtonInvisible.d.ts +25 -25
  345. package/lib-esm/Button/ButtonOutline.d.ts +25 -25
  346. package/lib-esm/Button/ButtonPrimary.d.ts +25 -25
  347. package/lib-esm/CircleOcticon.d.ts +42 -42
  348. package/lib-esm/Dialog.d.ts +45 -45
  349. package/lib-esm/Dropdown.d.ts +176 -176
  350. package/lib-esm/DropdownMenu/DropdownButton.d.ts +46 -46
  351. package/lib-esm/FilterList.d.ts +42 -42
  352. package/lib-esm/Position.d.ts +4 -4
  353. package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -246
  354. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  355. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  356. package/lib-esm/StateLabel.d.ts +1 -1
  357. package/lib-esm/StateLabel.js +7 -2
  358. package/lib-esm/TextInputWithTokens.d.ts +28 -28
  359. package/lib-esm/Timeline.d.ts +43 -43
  360. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  361. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  362. package/lib-esm/Token/Token.d.ts +1 -1
  363. package/lib-esm/_TextInputWrapper.js +2 -2
  364. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  365. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  366. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  367. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  368. package/lib-esm/drafts.d.ts +7 -0
  369. package/lib-esm/drafts.js +8 -0
  370. package/lib-esm/stories/ActionList2.stories.js +796 -0
  371. package/lib-esm/stories/TextInput.stories.js +117 -0
  372. package/lib-esm/sx.d.ts +2 -0
  373. package/lib-esm/sx.js +3 -1
  374. package/lib-esm/theme-preval.js +81 -2
  375. package/lib-esm/utils/create-slots.d.ts +17 -0
  376. package/lib-esm/utils/create-slots.js +84 -0
  377. package/lib-esm/utils/testing.d.ts +14 -1
  378. package/lib-esm/utils/use-force-update.d.ts +1 -0
  379. package/lib-esm/utils/use-force-update.js +6 -0
  380. package/package-lock.json +153 -14
  381. package/package.json +7 -4
  382. package/script/build +1 -1
  383. package/src/ActionList2/Description.tsx +49 -0
  384. package/src/ActionList2/Divider.tsx +24 -0
  385. package/src/ActionList2/Group.tsx +34 -0
  386. package/src/ActionList2/Header.tsx +58 -0
  387. package/src/ActionList2/Item.tsx +245 -0
  388. package/src/ActionList2/LinkItem.tsx +49 -0
  389. package/src/ActionList2/List.tsx +55 -0
  390. package/src/ActionList2/Selection.tsx +40 -0
  391. package/src/ActionList2/Visuals.tsx +76 -0
  392. package/src/ActionList2/index.ts +39 -0
  393. package/src/StateLabel.tsx +14 -2
  394. package/src/_TextInputWrapper.tsx +7 -0
  395. package/src/__tests__/ActionList2.test.tsx +47 -0
  396. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  397. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +1 -0
  398. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +1 -0
  399. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +1 -0
  400. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +1 -0
  401. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +1 -0
  402. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +4 -0
  403. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +1 -0
  404. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +13 -6
  405. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +1 -0
  406. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +66 -0
  407. package/src/__tests__/__snapshots__/Token.test.tsx.snap +17 -0
  408. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  409. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  410. package/src/drafts.ts +9 -0
  411. package/src/stories/ActionList2.stories.tsx +1291 -0
  412. package/src/stories/TextInput.stories.tsx +113 -0
  413. package/src/sx.ts +3 -0
  414. package/src/theme-preval.js +1 -0
  415. package/src/utils/create-slots.tsx +96 -0
  416. package/src/utils/use-force-update.ts +7 -0
  417. package/stats.html +1 -1
  418. package/tsconfig.base.json +20 -0
  419. package/tsconfig.build.json +2 -2
  420. package/tsconfig.json +4 -17
package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap CHANGED
@@ -352,6 +352,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
352
352
  style={
353
353
  Object {
354
354
  "display": "inline-block",
355
+ "overflow": "visible",
355
356
  "userSelect": "none",
356
357
  "verticalAlign": "text-bottom",
357
358
  }
@@ -383,6 +384,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
383
384
  style={
384
385
  Object {
385
386
  "display": "inline-block",
387
+ "overflow": "visible",
386
388
  "userSelect": "none",
387
389
  "verticalAlign": "text-bottom",
388
390
  }
@@ -418,6 +420,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
418
420
  style={
419
421
  Object {
420
422
  "display": "inline-block",
423
+ "overflow": "visible",
421
424
  "userSelect": "none",
422
425
  "verticalAlign": "text-bottom",
423
426
  }
@@ -448,6 +451,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
448
451
  style={
449
452
  Object {
450
453
  "display": "inline-block",
454
+ "overflow": "visible",
451
455
  "userSelect": "none",
452
456
  "verticalAlign": "text-bottom",
453
457
  }
package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap CHANGED
@@ -108,6 +108,7 @@ exports[`SelectPanel renders consistently 1`] = `
108
108
  style={
109
109
  Object {
110
110
  "display": "inline-block",
111
+ "overflow": "visible",
111
112
  "userSelect": "none",
112
113
  "verticalAlign": "text-bottom",
113
114
  }
package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap CHANGED
@@ -36,7 +36,7 @@ exports[`StateLabel renders children 1`] = `
36
36
  className="c1"
37
37
  dangerouslySetInnerHTML={
38
38
  Object {
39
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
39
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
40
40
  }
41
41
  }
42
42
  fill="currentColor"
@@ -45,6 +45,7 @@ exports[`StateLabel renders children 1`] = `
45
45
  style={
46
46
  Object {
47
47
  "display": "inline-block",
48
+ "overflow": "visible",
48
49
  "userSelect": "none",
49
50
  "verticalAlign": "text-bottom",
50
51
  }
@@ -92,7 +93,7 @@ exports[`StateLabel renders consistently 1`] = `
92
93
  className="c1"
93
94
  dangerouslySetInnerHTML={
94
95
  Object {
95
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
96
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
96
97
  }
97
98
  }
98
99
  fill="currentColor"
@@ -101,6 +102,7 @@ exports[`StateLabel renders consistently 1`] = `
101
102
  style={
102
103
  Object {
103
104
  "display": "inline-block",
105
+ "overflow": "visible",
104
106
  "userSelect": "none",
105
107
  "verticalAlign": "text-bottom",
106
108
  }
@@ -148,7 +150,7 @@ exports[`StateLabel respects the status prop 1`] = `
148
150
  className="c1"
149
151
  dangerouslySetInnerHTML={
150
152
  Object {
151
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
153
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
152
154
  }
153
155
  }
154
156
  fill="currentColor"
@@ -157,6 +159,7 @@ exports[`StateLabel respects the status prop 1`] = `
157
159
  style={
158
160
  Object {
159
161
  "display": "inline-block",
162
+ "overflow": "visible",
160
163
  "userSelect": "none",
161
164
  "verticalAlign": "text-bottom",
162
165
  }
@@ -203,7 +206,7 @@ exports[`StateLabel respects the status prop 2`] = `
203
206
  className="c1"
204
207
  dangerouslySetInnerHTML={
205
208
  Object {
206
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z\\"></path>",
209
+ "__html": "<path d=\\"M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z\\"></path>",
207
210
  }
208
211
  }
209
212
  fill="currentColor"
@@ -212,6 +215,7 @@ exports[`StateLabel respects the status prop 2`] = `
212
215
  style={
213
216
  Object {
214
217
  "display": "inline-block",
218
+ "overflow": "visible",
215
219
  "userSelect": "none",
216
220
  "verticalAlign": "text-bottom",
217
221
  }
@@ -267,6 +271,7 @@ exports[`StateLabel respects the status prop 3`] = `
267
271
  style={
268
272
  Object {
269
273
  "display": "inline-block",
274
+ "overflow": "visible",
270
275
  "userSelect": "none",
271
276
  "verticalAlign": "text-bottom",
272
277
  }
@@ -313,7 +318,7 @@ exports[`StateLabel respects the variant prop 1`] = `
313
318
  className="c1"
314
319
  dangerouslySetInnerHTML={
315
320
  Object {
316
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
321
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
317
322
  }
318
323
  }
319
324
  fill="currentColor"
@@ -322,6 +327,7 @@ exports[`StateLabel respects the variant prop 1`] = `
322
327
  style={
323
328
  Object {
324
329
  "display": "inline-block",
330
+ "overflow": "visible",
325
331
  "userSelect": "none",
326
332
  "verticalAlign": "text-bottom",
327
333
  }
@@ -368,7 +374,7 @@ exports[`StateLabel respects the variant prop 2`] = `
368
374
  className="c1"
369
375
  dangerouslySetInnerHTML={
370
376
  Object {
371
- "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
377
+ "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
372
378
  }
373
379
  }
374
380
  fill="currentColor"
@@ -377,6 +383,7 @@ exports[`StateLabel respects the variant prop 2`] = `
377
383
  style={
378
384
  Object {
379
385
  "display": "inline-block",
386
+ "overflow": "visible",
380
387
  "userSelect": "none",
381
388
  "verticalAlign": "text-bottom",
382
389
  }
package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap CHANGED
@@ -15,6 +15,7 @@ exports[`StyledOcticon renders consistently 1`] = `
15
15
  style={
16
16
  Object {
17
17
  "display": "inline-block",
18
+ "overflow": "visible",
18
19
  "userSelect": "none",
19
20
  "verticalAlign": "text-bottom",
20
21
  }
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
  }