@primer/components 32.1.0 → 32.1.1-rc.92743105

Sign up to get free protection for your applications and to get access to all the features.
Files changed (1077) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/config.json +10 -0
  3. package/.devcontainer/devcontainer.json +8 -0
  4. package/.eslintrc.json +137 -0
  5. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  6. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
  7. package/.github/dependabot.yml +18 -0
  8. package/.github/pull_request_template.md +18 -0
  9. package/.github/workflows/check_for_changeset.yml +25 -0
  10. package/.github/workflows/ci.yml +31 -0
  11. package/.github/workflows/deploy_preview.yml +47 -0
  12. package/.github/workflows/deploy_production.yml +70 -0
  13. package/.github/workflows/release.yml +35 -0
  14. package/.github/workflows/release_canary.yml +70 -0
  15. package/.github/workflows/release_candidate.yml +60 -0
  16. package/.github/workflows/size.yml +13 -0
  17. package/.github/workflows/stale.yml +26 -0
  18. package/.gitignore +10 -0
  19. package/.npmrc +4 -0
  20. package/.nvmrc +1 -0
  21. package/.storybook/main.js +9 -0
  22. package/.storybook/preview.js +117 -0
  23. package/.vscode/launch.json +21 -0
  24. package/.vscode/settings.json +13 -0
  25. package/@types/@styled-system/index.d.ts +0 -0
  26. package/@types/@styled-system/prop-types/index.d.ts +1 -0
  27. package/@types/@styled-system/props/index.d.ts +1 -0
  28. package/@types/jest-styled-components/index.d.ts +1 -0
  29. package/CHANGELOG.md +6 -0
  30. package/CODEOWNERS +2 -0
  31. package/babel-defines.js +13 -0
  32. package/babel.config.js +39 -0
  33. package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
  34. package/contributor-docs/CONTRIBUTING.md +274 -0
  35. package/contributor-docs/adrs/adr-001-typescript.md +23 -0
  36. package/contributor-docs/adrs/adr-002-behavior-isolation.md +108 -0
  37. package/contributor-docs/adrs/adr-003-prop-norms.md +72 -0
  38. package/contributor-docs/behaviors.md +132 -0
  39. package/contributor-docs/component-contents-api-patterns.md +316 -0
  40. package/contributor-docs/principles.md +39 -0
  41. package/dist/browser.esm.js +1 -1
  42. package/dist/browser.esm.js.map +1 -1
  43. package/dist/browser.umd.js +1 -1
  44. package/dist/browser.umd.js.map +1 -1
  45. package/docs/.eslintrc +0 -0
  46. package/docs/.gitignore +91 -0
  47. package/docs/components/PropsList.js +5 -0
  48. package/docs/components/State.js +9 -0
  49. package/docs/components/constants.js +34 -0
  50. package/docs/components/index.js +2 -0
  51. package/docs/content/ActionList.mdx +99 -0
  52. package/docs/content/ActionList2.mdx +379 -0
  53. package/docs/content/ActionMenu.mdx +80 -0
  54. package/docs/content/AnchoredOverlay.mdx +37 -0
  55. package/docs/content/Autocomplete.mdx +657 -0
  56. package/docs/content/Avatar.mdx +53 -0
  57. package/docs/content/AvatarStack.mdx +57 -0
  58. package/docs/content/BorderBox.md +46 -0
  59. package/docs/content/Box.mdx +96 -0
  60. package/docs/content/BranchName.md +38 -0
  61. package/docs/content/Breadcrumbs.md +68 -0
  62. package/docs/content/Buttons.md +47 -0
  63. package/docs/content/Checkbox.md +118 -0
  64. package/docs/content/CircleBadge.md +36 -0
  65. package/docs/content/CircleOcticon.md +19 -0
  66. package/docs/content/CounterLabel.md +22 -0
  67. package/docs/content/Details.md +106 -0
  68. package/docs/content/Dialog.md +106 -0
  69. package/docs/content/Dialog2.mdx +181 -0
  70. package/docs/content/Dropdown.md +66 -0
  71. package/docs/content/DropdownMenu.mdx +50 -0
  72. package/docs/content/FilterList.md +38 -0
  73. package/docs/content/FilteredSearch.md +33 -0
  74. package/docs/content/Flash.md +36 -0
  75. package/docs/content/Flex.md +58 -0
  76. package/docs/content/FormGroup.md +39 -0
  77. package/docs/content/Grid.md +59 -0
  78. package/docs/content/Header.md +78 -0
  79. package/docs/content/Heading.md +26 -0
  80. package/docs/content/Label.md +50 -0
  81. package/docs/content/LabelGroup.md +22 -0
  82. package/docs/content/Link.md +29 -0
  83. package/docs/content/Overlay.mdx +86 -0
  84. package/docs/content/Pagehead.md +19 -0
  85. package/docs/content/Pagination.md +179 -0
  86. package/docs/content/PointerBox.md +82 -0
  87. package/docs/content/Popover.md +130 -0
  88. package/docs/content/Portal.mdx +79 -0
  89. package/docs/content/Position.md +93 -0
  90. package/docs/content/ProgressBar.mdx +30 -0
  91. package/docs/content/SelectMenu.md +372 -0
  92. package/docs/content/SelectPanel.mdx +67 -0
  93. package/docs/content/SideNav.md +172 -0
  94. package/docs/content/Spinner.mdx +32 -0
  95. package/docs/content/StateLabel.md +28 -0
  96. package/docs/content/StyledOcticon.md +27 -0
  97. package/docs/content/SubNav.md +101 -0
  98. package/docs/content/TabNav.md +43 -0
  99. package/docs/content/Text.md +38 -0
  100. package/docs/content/TextInput.md +42 -0
  101. package/docs/content/TextInputWithTokens.mdx +211 -0
  102. package/docs/content/Timeline.md +149 -0
  103. package/docs/content/Token.mdx +381 -0
  104. package/docs/content/Tooltip.md +33 -0
  105. package/docs/content/Truncate.md +56 -0
  106. package/docs/content/UnderlineNav.md +46 -0
  107. package/docs/content/anchoredPosition.mdx +163 -0
  108. package/docs/content/core-concepts.md +70 -0
  109. package/docs/content/focusTrap.mdx +103 -0
  110. package/docs/content/focusZone.mdx +145 -0
  111. package/docs/content/getting-started.md +138 -0
  112. package/docs/content/index.md +33 -0
  113. package/docs/content/linting.md +35 -0
  114. package/docs/content/overriding-styles.mdx +82 -0
  115. package/docs/content/philosophy.md +23 -0
  116. package/docs/content/primer-theme.md +89 -0
  117. package/docs/content/ssr.mdx +43 -0
  118. package/docs/content/status.mdx +10 -0
  119. package/docs/content/system-props.mdx +37 -0
  120. package/docs/content/theme-reference.md +16 -0
  121. package/docs/content/theming.md +272 -0
  122. package/docs/content/useOnEscapePress.mdx +56 -0
  123. package/docs/content/useOnOutsideClick.mdx +57 -0
  124. package/docs/content/useOpenAndCloseFocus.mdx +49 -0
  125. package/docs/content/useOverlay.mdx +62 -0
  126. package/docs/content/useSafeTimeout.mdx +32 -0
  127. package/docs/gatsby-config.js +30 -0
  128. package/docs/gatsby-node.js +101 -0
  129. package/docs/package-lock.json +20867 -0
  130. package/docs/package.json +36 -0
  131. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +21 -0
  132. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +41 -0
  133. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +73 -0
  134. package/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js +9 -0
  135. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +137 -0
  136. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
  137. package/docs/src/component-checklist.js +81 -0
  138. package/docs/src/component-statuses.js +74 -0
  139. package/docs/src/props.js +77 -0
  140. package/jest.config.js +13 -0
  141. package/lib/ActionList/Item.js +2 -2
  142. package/lib/ActionList2/Item.js +3 -1
  143. package/lib/ActionList2/List.js +1 -2
  144. package/lib/Autocomplete/Autocomplete.d.ts +1 -0
  145. package/lib/Autocomplete/AutocompleteInput.d.ts +1 -0
  146. package/lib/Button/Button.d.ts +1 -0
  147. package/lib/Button/ButtonClose.d.ts +2 -1
  148. package/lib/Button/ButtonDanger.d.ts +1 -0
  149. package/lib/Button/ButtonInvisible.d.ts +1 -0
  150. package/lib/Button/ButtonOutline.d.ts +1 -0
  151. package/lib/Button/ButtonPrimary.d.ts +1 -0
  152. package/lib/CircleOcticon.d.ts +1 -0
  153. package/lib/Dialog.d.ts +3 -2
  154. package/lib/Dropdown.d.ts +4 -0
  155. package/lib/DropdownMenu/DropdownButton.d.ts +2 -1
  156. package/lib/FilterList.d.ts +1 -0
  157. package/lib/Position.d.ts +4 -4
  158. package/lib/SelectMenu/SelectMenu.d.ts +10 -4
  159. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  160. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  161. package/lib/TextInputWithTokens.d.ts +1 -0
  162. package/lib/Token/AvatarToken.d.ts +1 -1
  163. package/lib/Token/IssueLabelToken.d.ts +1 -1
  164. package/lib/Token/Token.d.ts +1 -1
  165. package/lib/__tests__/ActionList.test.d.ts +1 -0
  166. package/lib/__tests__/ActionList.test.js +69 -0
  167. package/lib/__tests__/ActionList.types.test.d.ts +6 -0
  168. package/lib/__tests__/ActionList.types.test.js +69 -0
  169. package/lib/__tests__/ActionList2.test.d.ts +2 -0
  170. package/lib/__tests__/ActionList2.test.js +170 -0
  171. package/lib/__tests__/ActionMenu.test.d.ts +1 -0
  172. package/lib/__tests__/ActionMenu.test.js +151 -0
  173. package/lib/__tests__/AnchoredOverlay.test.d.ts +1 -0
  174. package/lib/__tests__/AnchoredOverlay.test.js +162 -0
  175. package/lib/__tests__/Autocomplete.test.d.ts +1 -0
  176. package/lib/__tests__/Autocomplete.test.js +528 -0
  177. package/lib/__tests__/Avatar.test.d.ts +1 -0
  178. package/lib/__tests__/Avatar.test.js +67 -0
  179. package/lib/__tests__/AvatarStack.test.d.ts +1 -0
  180. package/lib/__tests__/AvatarStack.test.js +71 -0
  181. package/lib/__tests__/BorderBox.test.d.ts +1 -0
  182. package/lib/__tests__/BorderBox.test.js +58 -0
  183. package/lib/__tests__/Box.test.d.ts +1 -0
  184. package/lib/__tests__/Box.test.js +78 -0
  185. package/lib/__tests__/BranchName.test.d.ts +1 -0
  186. package/lib/__tests__/BranchName.test.js +36 -0
  187. package/lib/__tests__/Breadcrumbs.test.d.ts +1 -0
  188. package/lib/__tests__/Breadcrumbs.test.js +40 -0
  189. package/lib/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  190. package/lib/__tests__/Breadcrumbs.types.test.js +25 -0
  191. package/lib/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  192. package/lib/__tests__/BreadcrumbsItem.test.js +49 -0
  193. package/lib/__tests__/Button.test.d.ts +1 -0
  194. package/lib/__tests__/Button.test.js +147 -0
  195. package/lib/__tests__/Caret.test.d.ts +1 -0
  196. package/lib/__tests__/Caret.test.js +52 -0
  197. package/lib/__tests__/Checkbox.test.d.ts +2 -0
  198. package/lib/__tests__/Checkbox.test.js +189 -0
  199. package/lib/__tests__/CircleBadge.test.d.ts +1 -0
  200. package/lib/__tests__/CircleBadge.test.js +83 -0
  201. package/lib/__tests__/CircleBadge.types.test.d.ts +3 -0
  202. package/lib/__tests__/CircleBadge.types.test.js +28 -0
  203. package/lib/__tests__/CircleOcticon.test.d.ts +1 -0
  204. package/lib/__tests__/CircleOcticon.test.js +71 -0
  205. package/lib/__tests__/ConfirmationDialog.test.d.ts +1 -0
  206. package/lib/__tests__/ConfirmationDialog.test.js +134 -0
  207. package/lib/__tests__/CounterLabel.test.d.ts +1 -0
  208. package/lib/__tests__/CounterLabel.test.js +58 -0
  209. package/lib/__tests__/CounterLabel.types.test.d.ts +3 -0
  210. package/lib/__tests__/CounterLabel.types.test.js +28 -0
  211. package/lib/__tests__/Details.test.d.ts +1 -0
  212. package/lib/__tests__/Details.test.js +117 -0
  213. package/lib/__tests__/Dialog.test.d.ts +1 -0
  214. package/lib/__tests__/Dialog.test.js +184 -0
  215. package/lib/__tests__/Dialog.types.test.d.ts +3 -0
  216. package/lib/__tests__/Dialog.types.test.js +28 -0
  217. package/lib/__tests__/Dialog2.types.test.d.ts +3 -0
  218. package/lib/__tests__/Dialog2.types.test.js +31 -0
  219. package/lib/__tests__/Dropdown.test.d.ts +1 -0
  220. package/lib/__tests__/Dropdown.test.js +63 -0
  221. package/lib/__tests__/Dropdown.types.test.d.ts +3 -0
  222. package/lib/__tests__/Dropdown.types.test.js +31 -0
  223. package/lib/__tests__/DropdownMenu.test.d.ts +1 -0
  224. package/lib/__tests__/DropdownMenu.test.js +150 -0
  225. package/lib/__tests__/FilterList.test.d.ts +1 -0
  226. package/lib/__tests__/FilterList.test.js +36 -0
  227. package/lib/__tests__/FilterList.types.test.d.ts +3 -0
  228. package/lib/__tests__/FilterList.types.test.js +27 -0
  229. package/lib/__tests__/FilterListItem.test.d.ts +1 -0
  230. package/lib/__tests__/FilterListItem.test.js +46 -0
  231. package/lib/__tests__/FilteredSearch.test.d.ts +1 -0
  232. package/lib/__tests__/FilteredSearch.test.js +36 -0
  233. package/lib/__tests__/FilteredSearch.types.test.d.ts +3 -0
  234. package/lib/__tests__/FilteredSearch.types.test.js +28 -0
  235. package/lib/__tests__/Flash.test.d.ts +1 -0
  236. package/lib/__tests__/Flash.test.js +62 -0
  237. package/lib/__tests__/Flash.types.test.d.ts +3 -0
  238. package/lib/__tests__/Flash.types.test.js +28 -0
  239. package/lib/__tests__/Flex.test.d.ts +1 -0
  240. package/lib/__tests__/Flex.test.js +74 -0
  241. package/lib/__tests__/FormGroup.test.d.ts +1 -0
  242. package/lib/__tests__/FormGroup.test.js +54 -0
  243. package/lib/__tests__/FormGroup.types.test.d.ts +3 -0
  244. package/lib/__tests__/FormGroup.types.test.js +28 -0
  245. package/lib/__tests__/Grid.test.d.ts +1 -0
  246. package/lib/__tests__/Grid.test.js +104 -0
  247. package/lib/__tests__/Header.test.d.ts +1 -0
  248. package/lib/__tests__/Header.test.js +58 -0
  249. package/lib/__tests__/Header.types.test.d.ts +3 -0
  250. package/lib/__tests__/Header.types.test.js +29 -0
  251. package/lib/__tests__/Heading.test.d.ts +1 -0
  252. package/lib/__tests__/Heading.test.js +109 -0
  253. package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
  254. package/lib/__tests__/KeyPaths.types.test.js +10 -0
  255. package/lib/__tests__/Label.test.d.ts +1 -0
  256. package/lib/__tests__/Label.test.js +46 -0
  257. package/lib/__tests__/Label.types.test.d.ts +3 -0
  258. package/lib/__tests__/Label.types.test.js +28 -0
  259. package/lib/__tests__/LabelGroup.test.d.ts +1 -0
  260. package/lib/__tests__/LabelGroup.test.js +38 -0
  261. package/lib/__tests__/LabelGroup.types.test.d.ts +3 -0
  262. package/lib/__tests__/LabelGroup.types.test.js +28 -0
  263. package/lib/__tests__/Link.test.d.ts +1 -0
  264. package/lib/__tests__/Link.test.js +76 -0
  265. package/lib/__tests__/Link.types.test.d.ts +3 -0
  266. package/lib/__tests__/Link.types.test.js +28 -0
  267. package/lib/__tests__/Merge.types.test.d.ts +30 -0
  268. package/lib/__tests__/Merge.types.test.js +27 -0
  269. package/lib/__tests__/NewButton.test.d.ts +1 -0
  270. package/lib/__tests__/NewButton.test.js +95 -0
  271. package/lib/__tests__/Overlay.test.d.ts +1 -0
  272. package/lib/__tests__/Overlay.test.js +145 -0
  273. package/lib/__tests__/Overlay.types.test.d.ts +6 -0
  274. package/lib/__tests__/Overlay.types.test.js +73 -0
  275. package/lib/__tests__/Pagehead.test.d.ts +1 -0
  276. package/lib/__tests__/Pagehead.test.js +37 -0
  277. package/lib/__tests__/Pagehead.types.test.d.ts +3 -0
  278. package/lib/__tests__/Pagehead.types.test.js +28 -0
  279. package/lib/__tests__/Pagination/Pagination.test.d.ts +1 -0
  280. package/lib/__tests__/Pagination/Pagination.test.js +47 -0
  281. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  282. package/lib/__tests__/Pagination/PaginationModel.test.js +186 -0
  283. package/lib/__tests__/Pagination.types.test.d.ts +3 -0
  284. package/lib/__tests__/Pagination.types.test.js +33 -0
  285. package/lib/__tests__/PointerBox.test.d.ts +1 -0
  286. package/lib/__tests__/PointerBox.test.js +46 -0
  287. package/lib/__tests__/Popover.test.d.ts +1 -0
  288. package/lib/__tests__/Popover.test.js +66 -0
  289. package/lib/__tests__/Popover.types.test.d.ts +3 -0
  290. package/lib/__tests__/Popover.types.test.js +27 -0
  291. package/lib/__tests__/Portal.test.d.ts +1 -0
  292. package/lib/__tests__/Portal.test.js +124 -0
  293. package/lib/__tests__/Position.test.d.ts +1 -0
  294. package/lib/__tests__/Position.test.js +143 -0
  295. package/lib/__tests__/ProgressBar.test.d.ts +1 -0
  296. package/lib/__tests__/ProgressBar.test.js +68 -0
  297. package/lib/__tests__/SelectMenu.test.d.ts +1 -0
  298. package/lib/__tests__/SelectMenu.test.js +155 -0
  299. package/lib/__tests__/SelectMenu.types.test.d.ts +3 -0
  300. package/lib/__tests__/SelectMenu.types.test.js +47 -0
  301. package/lib/__tests__/SelectPanel.test.d.ts +1 -0
  302. package/lib/__tests__/SelectPanel.test.js +80 -0
  303. package/lib/__tests__/SelectPanel.types.test.d.ts +3 -0
  304. package/lib/__tests__/SelectPanel.types.test.js +44 -0
  305. package/lib/__tests__/SideNav.test.d.ts +1 -0
  306. package/lib/__tests__/SideNav.test.js +71 -0
  307. package/lib/__tests__/SideNav.types.test.d.ts +3 -0
  308. package/lib/__tests__/SideNav.types.test.js +28 -0
  309. package/lib/__tests__/Spinner.test.d.ts +1 -0
  310. package/lib/__tests__/Spinner.test.js +53 -0
  311. package/lib/__tests__/StateLabel.test.d.ts +1 -0
  312. package/lib/__tests__/StateLabel.test.js +71 -0
  313. package/lib/__tests__/StateLabel.types.test.d.ts +3 -0
  314. package/lib/__tests__/StateLabel.types.test.js +28 -0
  315. package/lib/__tests__/StyledOcticon.test.d.ts +1 -0
  316. package/lib/__tests__/StyledOcticon.test.js +40 -0
  317. package/lib/__tests__/StyledOcticon.types.test.d.ts +3 -0
  318. package/lib/__tests__/StyledOcticon.types.test.js +32 -0
  319. package/lib/__tests__/SubNav.test.d.ts +1 -0
  320. package/lib/__tests__/SubNav.test.js +62 -0
  321. package/lib/__tests__/SubNav.types.test.d.ts +3 -0
  322. package/lib/__tests__/SubNav.types.test.js +27 -0
  323. package/lib/__tests__/SubNavLink.test.d.ts +1 -0
  324. package/lib/__tests__/SubNavLink.test.js +49 -0
  325. package/lib/__tests__/TabNav.test.d.ts +1 -0
  326. package/lib/__tests__/TabNav.test.js +49 -0
  327. package/lib/__tests__/TabNav.types.test.d.ts +3 -0
  328. package/lib/__tests__/TabNav.types.test.js +25 -0
  329. package/lib/__tests__/Text.test.d.ts +1 -0
  330. package/lib/__tests__/Text.test.js +105 -0
  331. package/lib/__tests__/TextInput.test.d.ts +1 -0
  332. package/lib/__tests__/TextInput.test.js +78 -0
  333. package/lib/__tests__/TextInputWithTokens.test.d.ts +1 -0
  334. package/lib/__tests__/TextInputWithTokens.test.js +572 -0
  335. package/lib/__tests__/ThemeProvider.test.d.ts +1 -0
  336. package/lib/__tests__/ThemeProvider.test.js +444 -0
  337. package/lib/__tests__/Timeline.test.d.ts +1 -0
  338. package/lib/__tests__/Timeline.test.js +75 -0
  339. package/lib/__tests__/Timeline.types.test.d.ts +3 -0
  340. package/lib/__tests__/Timeline.types.test.js +31 -0
  341. package/lib/__tests__/Token.test.d.ts +1 -0
  342. package/lib/__tests__/Token.test.js +180 -0
  343. package/lib/__tests__/Tooltip.test.d.ts +1 -0
  344. package/lib/__tests__/Tooltip.test.js +69 -0
  345. package/lib/__tests__/Tooltip.types.test.d.ts +3 -0
  346. package/lib/__tests__/Tooltip.types.test.js +28 -0
  347. package/lib/__tests__/Truncate.test.d.ts +1 -0
  348. package/lib/__tests__/Truncate.test.js +63 -0
  349. package/lib/__tests__/Truncate.types.test.d.ts +3 -0
  350. package/lib/__tests__/Truncate.types.test.js +31 -0
  351. package/lib/__tests__/UnderlineNav.test.d.ts +1 -0
  352. package/lib/__tests__/UnderlineNav.test.js +72 -0
  353. package/lib/__tests__/UnderlineNav.types.test.d.ts +3 -0
  354. package/lib/__tests__/UnderlineNav.types.test.js +25 -0
  355. package/lib/__tests__/UnderlineNavLink.test.d.ts +1 -0
  356. package/lib/__tests__/UnderlineNavLink.test.js +51 -0
  357. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  358. package/lib/__tests__/behaviors/anchoredPosition.test.js +390 -0
  359. package/lib/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  360. package/lib/__tests__/behaviors/focusTrap.test.js +234 -0
  361. package/lib/__tests__/behaviors/focusZone.test.d.ts +1 -0
  362. package/lib/__tests__/behaviors/focusZone.test.js +570 -0
  363. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  364. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +55 -0
  365. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  366. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +226 -0
  367. package/lib/__tests__/filterObject.test.d.ts +1 -0
  368. package/lib/__tests__/filterObject.test.js +30 -0
  369. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  370. package/lib/__tests__/hooks/useAnchoredPosition.test.js +54 -0
  371. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  372. package/lib/__tests__/hooks/useOnEscapePress.test.js +32 -0
  373. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  374. package/lib/__tests__/hooks/useOnOutsideClick.test.js +87 -0
  375. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  376. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +60 -0
  377. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  378. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +45 -0
  379. package/lib/__tests__/theme.test.d.ts +1 -0
  380. package/lib/__tests__/theme.test.js +36 -0
  381. package/lib/__tests__/themeGet.test.d.ts +1 -0
  382. package/lib/__tests__/themeGet.test.js +25 -0
  383. package/lib/__tests__/themePreval.test.d.ts +1 -0
  384. package/lib/__tests__/themePreval.test.js +14 -0
  385. package/lib/__tests__/useSafeTimeout.test.d.ts +1 -0
  386. package/lib/__tests__/useSafeTimeout.test.js +45 -0
  387. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  388. package/lib/__tests__/utils/createSlots.test.js +75 -0
  389. package/lib/stories/ActionList.stories.js +454 -0
  390. package/lib/stories/ActionList2.stories.js +923 -0
  391. package/lib/stories/ActionMenu.stories.js +348 -0
  392. package/lib/stories/AnchoredOverlay.stories.js +127 -0
  393. package/lib/stories/Autocomplete.stories.js +619 -0
  394. package/lib/stories/AvatarStack.stories.js +49 -0
  395. package/lib/stories/Button.stories.js +125 -0
  396. package/lib/stories/Checkbox.stories.js +227 -0
  397. package/lib/stories/ConfirmationDialog.stories.js +119 -0
  398. package/lib/stories/Dialog.stories.js +269 -0
  399. package/lib/stories/DropdownMenu.stories.js +122 -0
  400. package/lib/stories/IssueLabelToken.stories.js +165 -0
  401. package/lib/stories/NewButton.stories.js +230 -0
  402. package/lib/stories/Overlay.stories.js +204 -0
  403. package/lib/stories/Portal.stories.js +104 -0
  404. package/lib/stories/ProfileToken.stories.js +162 -0
  405. package/lib/stories/SelectPanel.stories.js +399 -0
  406. package/lib/stories/TextInput.stories.js +144 -0
  407. package/lib/stories/TextInputWithTokens.stories.js +252 -0
  408. package/lib/stories/ThemeProvider.stories.js +102 -0
  409. package/lib/stories/Token.stories.js +176 -0
  410. package/lib/stories/useAnchoredPosition.stories.js +351 -0
  411. package/lib/stories/useFocusTrap.stories.js +360 -0
  412. package/lib/stories/useFocusZone.stories.js +607 -0
  413. package/lib/utils/testing.d.ts +1 -0
  414. package/lib/utils/testing.js +29 -0
  415. package/lib-esm/ActionList/Item.js +2 -2
  416. package/lib-esm/ActionList2/Item.js +3 -1
  417. package/lib-esm/ActionList2/List.js +1 -2
  418. package/lib-esm/Autocomplete/Autocomplete.d.ts +1 -0
  419. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +1 -0
  420. package/lib-esm/Button/Button.d.ts +1 -0
  421. package/lib-esm/Button/ButtonClose.d.ts +2 -1
  422. package/lib-esm/Button/ButtonDanger.d.ts +1 -0
  423. package/lib-esm/Button/ButtonInvisible.d.ts +1 -0
  424. package/lib-esm/Button/ButtonOutline.d.ts +1 -0
  425. package/lib-esm/Button/ButtonPrimary.d.ts +1 -0
  426. package/lib-esm/CircleOcticon.d.ts +1 -0
  427. package/lib-esm/Dialog.d.ts +3 -2
  428. package/lib-esm/Dropdown.d.ts +4 -0
  429. package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -1
  430. package/lib-esm/FilterList.d.ts +1 -0
  431. package/lib-esm/Position.d.ts +4 -4
  432. package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -4
  433. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  434. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  435. package/lib-esm/TextInputWithTokens.d.ts +1 -0
  436. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  437. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  438. package/lib-esm/Token/Token.d.ts +1 -1
  439. package/lib-esm/__tests__/ActionList.test.d.ts +1 -0
  440. package/lib-esm/__tests__/ActionList.test.js +57 -0
  441. package/lib-esm/__tests__/ActionList.types.test.d.ts +6 -0
  442. package/lib-esm/__tests__/ActionList.types.test.js +45 -0
  443. package/lib-esm/__tests__/ActionList2.test.d.ts +2 -0
  444. package/lib-esm/__tests__/ActionList2.test.js +144 -0
  445. package/lib-esm/__tests__/ActionMenu.test.d.ts +1 -0
  446. package/lib-esm/__tests__/ActionMenu.test.js +139 -0
  447. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +1 -0
  448. package/lib-esm/__tests__/AnchoredOverlay.test.js +136 -0
  449. package/lib-esm/__tests__/Autocomplete.test.d.ts +1 -0
  450. package/lib-esm/__tests__/Autocomplete.test.js +494 -0
  451. package/lib-esm/__tests__/Avatar.test.d.ts +1 -0
  452. package/lib-esm/__tests__/Avatar.test.js +56 -0
  453. package/lib-esm/__tests__/AvatarStack.test.d.ts +1 -0
  454. package/lib-esm/__tests__/AvatarStack.test.js +58 -0
  455. package/lib-esm/__tests__/BorderBox.test.d.ts +1 -0
  456. package/lib-esm/__tests__/BorderBox.test.js +47 -0
  457. package/lib-esm/__tests__/Box.test.d.ts +1 -0
  458. package/lib-esm/__tests__/Box.test.js +67 -0
  459. package/lib-esm/__tests__/BranchName.test.d.ts +1 -0
  460. package/lib-esm/__tests__/BranchName.test.js +26 -0
  461. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +1 -0
  462. package/lib-esm/__tests__/Breadcrumbs.test.js +30 -0
  463. package/lib-esm/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  464. package/lib-esm/__tests__/Breadcrumbs.types.test.js +12 -0
  465. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  466. package/lib-esm/__tests__/BreadcrumbsItem.test.js +39 -0
  467. package/lib-esm/__tests__/Button.test.d.ts +1 -0
  468. package/lib-esm/__tests__/Button.test.js +137 -0
  469. package/lib-esm/__tests__/Caret.test.d.ts +1 -0
  470. package/lib-esm/__tests__/Caret.test.js +42 -0
  471. package/lib-esm/__tests__/Checkbox.test.d.ts +2 -0
  472. package/lib-esm/__tests__/Checkbox.test.js +169 -0
  473. package/lib-esm/__tests__/CircleBadge.test.d.ts +1 -0
  474. package/lib-esm/__tests__/CircleBadge.test.js +70 -0
  475. package/lib-esm/__tests__/CircleBadge.types.test.d.ts +3 -0
  476. package/lib-esm/__tests__/CircleBadge.types.test.js +13 -0
  477. package/lib-esm/__tests__/CircleOcticon.test.d.ts +1 -0
  478. package/lib-esm/__tests__/CircleOcticon.test.js +59 -0
  479. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +1 -0
  480. package/lib-esm/__tests__/ConfirmationDialog.test.js +113 -0
  481. package/lib-esm/__tests__/CounterLabel.test.d.ts +1 -0
  482. package/lib-esm/__tests__/CounterLabel.test.js +47 -0
  483. package/lib-esm/__tests__/CounterLabel.types.test.d.ts +3 -0
  484. package/lib-esm/__tests__/CounterLabel.types.test.js +13 -0
  485. package/lib-esm/__tests__/Details.test.d.ts +1 -0
  486. package/lib-esm/__tests__/Details.test.js +107 -0
  487. package/lib-esm/__tests__/Dialog.test.d.ts +1 -0
  488. package/lib-esm/__tests__/Dialog.test.js +171 -0
  489. package/lib-esm/__tests__/Dialog.types.test.d.ts +3 -0
  490. package/lib-esm/__tests__/Dialog.types.test.js +13 -0
  491. package/lib-esm/__tests__/Dialog2.types.test.d.ts +3 -0
  492. package/lib-esm/__tests__/Dialog2.types.test.js +16 -0
  493. package/lib-esm/__tests__/Dropdown.test.d.ts +1 -0
  494. package/lib-esm/__tests__/Dropdown.test.js +53 -0
  495. package/lib-esm/__tests__/Dropdown.types.test.d.ts +3 -0
  496. package/lib-esm/__tests__/Dropdown.types.test.js +17 -0
  497. package/lib-esm/__tests__/DropdownMenu.test.d.ts +1 -0
  498. package/lib-esm/__tests__/DropdownMenu.test.js +137 -0
  499. package/lib-esm/__tests__/FilterList.test.d.ts +1 -0
  500. package/lib-esm/__tests__/FilterList.test.js +26 -0
  501. package/lib-esm/__tests__/FilterList.types.test.d.ts +3 -0
  502. package/lib-esm/__tests__/FilterList.types.test.js +13 -0
  503. package/lib-esm/__tests__/FilterListItem.test.d.ts +1 -0
  504. package/lib-esm/__tests__/FilterListItem.test.js +36 -0
  505. package/lib-esm/__tests__/FilteredSearch.test.d.ts +1 -0
  506. package/lib-esm/__tests__/FilteredSearch.test.js +26 -0
  507. package/lib-esm/__tests__/FilteredSearch.types.test.d.ts +3 -0
  508. package/lib-esm/__tests__/FilteredSearch.types.test.js +13 -0
  509. package/lib-esm/__tests__/Flash.test.d.ts +1 -0
  510. package/lib-esm/__tests__/Flash.test.js +51 -0
  511. package/lib-esm/__tests__/Flash.types.test.d.ts +3 -0
  512. package/lib-esm/__tests__/Flash.types.test.js +13 -0
  513. package/lib-esm/__tests__/Flex.test.d.ts +1 -0
  514. package/lib-esm/__tests__/Flex.test.js +64 -0
  515. package/lib-esm/__tests__/FormGroup.test.d.ts +1 -0
  516. package/lib-esm/__tests__/FormGroup.test.js +44 -0
  517. package/lib-esm/__tests__/FormGroup.types.test.d.ts +3 -0
  518. package/lib-esm/__tests__/FormGroup.types.test.js +13 -0
  519. package/lib-esm/__tests__/Grid.test.d.ts +1 -0
  520. package/lib-esm/__tests__/Grid.test.js +94 -0
  521. package/lib-esm/__tests__/Header.test.d.ts +1 -0
  522. package/lib-esm/__tests__/Header.test.js +48 -0
  523. package/lib-esm/__tests__/Header.types.test.d.ts +3 -0
  524. package/lib-esm/__tests__/Header.types.test.js +15 -0
  525. package/lib-esm/__tests__/Heading.test.d.ts +1 -0
  526. package/lib-esm/__tests__/Heading.test.js +99 -0
  527. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
  528. package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
  529. package/lib-esm/__tests__/Label.test.d.ts +1 -0
  530. package/lib-esm/__tests__/Label.test.js +36 -0
  531. package/lib-esm/__tests__/Label.types.test.d.ts +3 -0
  532. package/lib-esm/__tests__/Label.types.test.js +13 -0
  533. package/lib-esm/__tests__/LabelGroup.test.d.ts +1 -0
  534. package/lib-esm/__tests__/LabelGroup.test.js +26 -0
  535. package/lib-esm/__tests__/LabelGroup.types.test.d.ts +3 -0
  536. package/lib-esm/__tests__/LabelGroup.types.test.js +13 -0
  537. package/lib-esm/__tests__/Link.test.d.ts +1 -0
  538. package/lib-esm/__tests__/Link.test.js +66 -0
  539. package/lib-esm/__tests__/Link.types.test.d.ts +3 -0
  540. package/lib-esm/__tests__/Link.types.test.js +13 -0
  541. package/lib-esm/__tests__/Merge.types.test.d.ts +30 -0
  542. package/lib-esm/__tests__/Merge.types.test.js +14 -0
  543. package/lib-esm/__tests__/NewButton.test.d.ts +1 -0
  544. package/lib-esm/__tests__/NewButton.test.js +84 -0
  545. package/lib-esm/__tests__/Overlay.test.d.ts +1 -0
  546. package/lib-esm/__tests__/Overlay.test.js +123 -0
  547. package/lib-esm/__tests__/Overlay.types.test.d.ts +6 -0
  548. package/lib-esm/__tests__/Overlay.types.test.js +49 -0
  549. package/lib-esm/__tests__/Pagehead.test.d.ts +1 -0
  550. package/lib-esm/__tests__/Pagehead.test.js +26 -0
  551. package/lib-esm/__tests__/Pagehead.types.test.d.ts +3 -0
  552. package/lib-esm/__tests__/Pagehead.types.test.js +13 -0
  553. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +1 -0
  554. package/lib-esm/__tests__/Pagination/Pagination.test.js +35 -0
  555. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  556. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +182 -0
  557. package/lib-esm/__tests__/Pagination.types.test.d.ts +3 -0
  558. package/lib-esm/__tests__/Pagination.types.test.js +18 -0
  559. package/lib-esm/__tests__/PointerBox.test.d.ts +1 -0
  560. package/lib-esm/__tests__/PointerBox.test.js +36 -0
  561. package/lib-esm/__tests__/Popover.test.d.ts +1 -0
  562. package/lib-esm/__tests__/Popover.test.js +53 -0
  563. package/lib-esm/__tests__/Popover.types.test.d.ts +3 -0
  564. package/lib-esm/__tests__/Popover.types.test.js +13 -0
  565. package/lib-esm/__tests__/Portal.test.d.ts +1 -0
  566. package/lib-esm/__tests__/Portal.test.js +104 -0
  567. package/lib-esm/__tests__/Position.test.d.ts +1 -0
  568. package/lib-esm/__tests__/Position.test.js +133 -0
  569. package/lib-esm/__tests__/ProgressBar.test.d.ts +1 -0
  570. package/lib-esm/__tests__/ProgressBar.test.js +58 -0
  571. package/lib-esm/__tests__/SelectMenu.test.d.ts +1 -0
  572. package/lib-esm/__tests__/SelectMenu.test.js +145 -0
  573. package/lib-esm/__tests__/SelectMenu.types.test.d.ts +3 -0
  574. package/lib-esm/__tests__/SelectMenu.types.test.js +33 -0
  575. package/lib-esm/__tests__/SelectPanel.test.d.ts +1 -0
  576. package/lib-esm/__tests__/SelectPanel.test.js +65 -0
  577. package/lib-esm/__tests__/SelectPanel.types.test.d.ts +3 -0
  578. package/lib-esm/__tests__/SelectPanel.types.test.js +29 -0
  579. package/lib-esm/__tests__/SideNav.test.d.ts +1 -0
  580. package/lib-esm/__tests__/SideNav.test.js +60 -0
  581. package/lib-esm/__tests__/SideNav.types.test.d.ts +3 -0
  582. package/lib-esm/__tests__/SideNav.types.test.js +13 -0
  583. package/lib-esm/__tests__/Spinner.test.d.ts +1 -0
  584. package/lib-esm/__tests__/Spinner.test.js +43 -0
  585. package/lib-esm/__tests__/StateLabel.test.d.ts +1 -0
  586. package/lib-esm/__tests__/StateLabel.test.js +61 -0
  587. package/lib-esm/__tests__/StateLabel.types.test.d.ts +3 -0
  588. package/lib-esm/__tests__/StateLabel.types.test.js +13 -0
  589. package/lib-esm/__tests__/StyledOcticon.test.d.ts +1 -0
  590. package/lib-esm/__tests__/StyledOcticon.test.js +29 -0
  591. package/lib-esm/__tests__/StyledOcticon.types.test.d.ts +3 -0
  592. package/lib-esm/__tests__/StyledOcticon.types.test.js +16 -0
  593. package/lib-esm/__tests__/SubNav.test.d.ts +1 -0
  594. package/lib-esm/__tests__/SubNav.test.js +50 -0
  595. package/lib-esm/__tests__/SubNav.types.test.d.ts +3 -0
  596. package/lib-esm/__tests__/SubNav.types.test.js +14 -0
  597. package/lib-esm/__tests__/SubNavLink.test.d.ts +1 -0
  598. package/lib-esm/__tests__/SubNavLink.test.js +39 -0
  599. package/lib-esm/__tests__/TabNav.test.d.ts +1 -0
  600. package/lib-esm/__tests__/TabNav.test.js +39 -0
  601. package/lib-esm/__tests__/TabNav.types.test.d.ts +3 -0
  602. package/lib-esm/__tests__/TabNav.types.test.js +12 -0
  603. package/lib-esm/__tests__/Text.test.d.ts +1 -0
  604. package/lib-esm/__tests__/Text.test.js +93 -0
  605. package/lib-esm/__tests__/TextInput.test.d.ts +1 -0
  606. package/lib-esm/__tests__/TextInput.test.js +68 -0
  607. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +1 -0
  608. package/lib-esm/__tests__/TextInputWithTokens.test.js +511 -0
  609. package/lib-esm/__tests__/ThemeProvider.test.d.ts +1 -0
  610. package/lib-esm/__tests__/ThemeProvider.test.js +408 -0
  611. package/lib-esm/__tests__/Timeline.test.d.ts +1 -0
  612. package/lib-esm/__tests__/Timeline.test.js +65 -0
  613. package/lib-esm/__tests__/Timeline.types.test.d.ts +3 -0
  614. package/lib-esm/__tests__/Timeline.types.test.js +18 -0
  615. package/lib-esm/__tests__/Token.test.d.ts +1 -0
  616. package/lib-esm/__tests__/Token.test.js +166 -0
  617. package/lib-esm/__tests__/Tooltip.test.d.ts +1 -0
  618. package/lib-esm/__tests__/Tooltip.test.js +59 -0
  619. package/lib-esm/__tests__/Tooltip.types.test.d.ts +3 -0
  620. package/lib-esm/__tests__/Tooltip.types.test.js +13 -0
  621. package/lib-esm/__tests__/Truncate.test.d.ts +1 -0
  622. package/lib-esm/__tests__/Truncate.test.js +53 -0
  623. package/lib-esm/__tests__/Truncate.types.test.d.ts +3 -0
  624. package/lib-esm/__tests__/Truncate.types.test.js +16 -0
  625. package/lib-esm/__tests__/UnderlineNav.test.d.ts +1 -0
  626. package/lib-esm/__tests__/UnderlineNav.test.js +60 -0
  627. package/lib-esm/__tests__/UnderlineNav.types.test.d.ts +3 -0
  628. package/lib-esm/__tests__/UnderlineNav.types.test.js +12 -0
  629. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +1 -0
  630. package/lib-esm/__tests__/UnderlineNavLink.test.js +41 -0
  631. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  632. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +388 -0
  633. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  634. package/lib-esm/__tests__/behaviors/focusTrap.test.js +227 -0
  635. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +1 -0
  636. package/lib-esm/__tests__/behaviors/focusZone.test.js +487 -0
  637. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  638. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +48 -0
  639. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  640. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +224 -0
  641. package/lib-esm/__tests__/filterObject.test.d.ts +1 -0
  642. package/lib-esm/__tests__/filterObject.test.js +27 -0
  643. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  644. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +46 -0
  645. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  646. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +23 -0
  647. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  648. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +68 -0
  649. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  650. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +52 -0
  651. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  652. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +36 -0
  653. package/lib-esm/__tests__/theme.test.d.ts +1 -0
  654. package/lib-esm/__tests__/theme.test.js +33 -0
  655. package/lib-esm/__tests__/themeGet.test.d.ts +1 -0
  656. package/lib-esm/__tests__/themeGet.test.js +22 -0
  657. package/lib-esm/__tests__/themePreval.test.d.ts +1 -0
  658. package/lib-esm/__tests__/themePreval.test.js +7 -0
  659. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +1 -0
  660. package/lib-esm/__tests__/useSafeTimeout.test.js +39 -0
  661. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  662. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  663. package/lib-esm/stories/ActionList.stories.js +395 -0
  664. package/lib-esm/stories/ActionList2.stories.js +811 -0
  665. package/lib-esm/stories/ActionMenu.stories.js +303 -0
  666. package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
  667. package/lib-esm/stories/Autocomplete.stories.js +560 -0
  668. package/lib-esm/stories/AvatarStack.stories.js +32 -0
  669. package/lib-esm/stories/Button.stories.js +86 -0
  670. package/lib-esm/stories/Checkbox.stories.js +197 -0
  671. package/lib-esm/stories/ConfirmationDialog.stories.js +94 -0
  672. package/lib-esm/stories/Dialog.stories.js +244 -0
  673. package/lib-esm/stories/DropdownMenu.stories.js +94 -0
  674. package/lib-esm/stories/IssueLabelToken.stories.js +139 -0
  675. package/lib-esm/stories/NewButton.stories.js +178 -0
  676. package/lib-esm/stories/Overlay.stories.js +173 -0
  677. package/lib-esm/stories/Portal.stories.js +68 -0
  678. package/lib-esm/stories/ProfileToken.stories.js +136 -0
  679. package/lib-esm/stories/SelectPanel.stories.js +334 -0
  680. package/lib-esm/stories/TextInput.stories.js +117 -0
  681. package/lib-esm/stories/TextInputWithTokens.stories.js +210 -0
  682. package/lib-esm/stories/ThemeProvider.stories.js +83 -0
  683. package/lib-esm/stories/Token.stories.js +146 -0
  684. package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
  685. package/lib-esm/stories/useFocusTrap.stories.js +313 -0
  686. package/lib-esm/stories/useFocusZone.stories.js +562 -0
  687. package/lib-esm/utils/testing.d.ts +1 -0
  688. package/lib-esm/utils/testing.js +24 -0
  689. package/migrating.md +250 -0
  690. package/now.json +17 -0
  691. package/package-lock.json +66668 -0
  692. package/package.json +2 -2
  693. package/rollup.config.js +36 -0
  694. package/script/build +21 -0
  695. package/script/build-storybook +10 -0
  696. package/script/setup +12 -0
  697. package/src/ActionList/Divider.tsx +25 -0
  698. package/src/ActionList/Group.tsx +45 -0
  699. package/src/ActionList/Header.tsx +74 -0
  700. package/src/ActionList/Item.tsx +480 -0
  701. package/src/ActionList/List.tsx +258 -0
  702. package/src/ActionList/index.ts +21 -0
  703. package/src/ActionList2/Description.tsx +52 -0
  704. package/src/ActionList2/Divider.tsx +24 -0
  705. package/src/ActionList2/Group.tsx +103 -0
  706. package/src/ActionList2/Item.tsx +247 -0
  707. package/src/ActionList2/LinkItem.tsx +49 -0
  708. package/src/ActionList2/List.tsx +50 -0
  709. package/src/ActionList2/Selection.tsx +60 -0
  710. package/src/ActionList2/Visuals.tsx +76 -0
  711. package/src/ActionList2/index.ts +39 -0
  712. package/src/ActionMenu.tsx +106 -0
  713. package/src/AnchoredOverlay/AnchoredOverlay.tsx +191 -0
  714. package/src/AnchoredOverlay/index.ts +2 -0
  715. package/src/Autocomplete/Autocomplete.tsx +103 -0
  716. package/src/Autocomplete/AutocompleteContext.tsx +19 -0
  717. package/src/Autocomplete/AutocompleteInput.tsx +179 -0
  718. package/src/Autocomplete/AutocompleteMenu.tsx +341 -0
  719. package/src/Autocomplete/AutocompleteOverlay.tsx +68 -0
  720. package/src/Autocomplete/index.ts +2 -0
  721. package/src/Avatar.tsx +46 -0
  722. package/src/AvatarPair.tsx +35 -0
  723. package/src/AvatarStack.tsx +159 -0
  724. package/src/BaseStyles.tsx +53 -0
  725. package/src/BorderBox.tsx +18 -0
  726. package/src/Box.tsx +54 -0
  727. package/src/BranchName.tsx +19 -0
  728. package/src/Breadcrumbs.tsx +101 -0
  729. package/src/Button/Button.tsx +39 -0
  730. package/src/Button/ButtonBase.tsx +39 -0
  731. package/src/Button/ButtonClose.tsx +36 -0
  732. package/src/Button/ButtonDanger.tsx +42 -0
  733. package/src/Button/ButtonGroup.tsx +55 -0
  734. package/src/Button/ButtonInvisible.tsx +31 -0
  735. package/src/Button/ButtonOutline.tsx +42 -0
  736. package/src/Button/ButtonPrimary.tsx +40 -0
  737. package/src/Button/ButtonStyles.tsx +36 -0
  738. package/src/Button/ButtonTableList.tsx +45 -0
  739. package/src/Button/index.ts +16 -0
  740. package/src/Caret.tsx +133 -0
  741. package/src/Checkbox.tsx +75 -0
  742. package/src/CircleBadge.tsx +53 -0
  743. package/src/CircleOcticon.tsx +37 -0
  744. package/src/CounterLabel.tsx +50 -0
  745. package/src/Details.tsx +23 -0
  746. package/src/Dialog/ConfirmationDialog.tsx +184 -0
  747. package/src/Dialog/Dialog.tsx +444 -0
  748. package/src/Dialog.tsx +145 -0
  749. package/src/Dropdown.tsx +154 -0
  750. package/src/DropdownMenu/DropdownButton.tsx +15 -0
  751. package/src/DropdownMenu/DropdownMenu.tsx +115 -0
  752. package/src/DropdownMenu/index.ts +4 -0
  753. package/src/DropdownStyles.ts +128 -0
  754. package/src/FilterList.tsx +75 -0
  755. package/src/FilteredActionList/FilteredActionList.tsx +142 -0
  756. package/src/FilteredActionList/index.ts +2 -0
  757. package/src/FilteredSearch.tsx +27 -0
  758. package/src/Flash.tsx +75 -0
  759. package/src/Flex.tsx +15 -0
  760. package/src/FormGroup.tsx +24 -0
  761. package/src/Grid.tsx +15 -0
  762. package/src/Header.tsx +74 -0
  763. package/src/Heading.tsx +21 -0
  764. package/src/Label.tsx +72 -0
  765. package/src/LabelGroup.tsx +17 -0
  766. package/src/Link.tsx +42 -0
  767. package/src/NewButton/button-counter.tsx +15 -0
  768. package/src/NewButton/button.tsx +283 -0
  769. package/src/NewButton/index.ts +10 -0
  770. package/src/NewButton/types.ts +36 -0
  771. package/src/Overlay.tsx +203 -0
  772. package/src/Pagehead.tsx +16 -0
  773. package/src/Pagination/Pagination.tsx +212 -0
  774. package/src/Pagination/index.ts +4 -0
  775. package/src/Pagination/model.tsx +187 -0
  776. package/src/PointerBox.tsx +31 -0
  777. package/src/Popover.tsx +225 -0
  778. package/src/Portal/Portal.tsx +97 -0
  779. package/src/Portal/index.ts +5 -0
  780. package/src/Position.tsx +63 -0
  781. package/src/ProgressBar.tsx +52 -0
  782. package/src/SelectMenu/SelectMenu.tsx +123 -0
  783. package/src/SelectMenu/SelectMenuContext.tsx +9 -0
  784. package/src/SelectMenu/SelectMenuDivider.tsx +24 -0
  785. package/src/SelectMenu/SelectMenuFilter.tsx +50 -0
  786. package/src/SelectMenu/SelectMenuFooter.tsx +27 -0
  787. package/src/SelectMenu/SelectMenuHeader.tsx +48 -0
  788. package/src/SelectMenu/SelectMenuItem.tsx +136 -0
  789. package/src/SelectMenu/SelectMenuList.tsx +41 -0
  790. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +25 -0
  791. package/src/SelectMenu/SelectMenuModal.tsx +119 -0
  792. package/src/SelectMenu/SelectMenuTab.tsx +87 -0
  793. package/src/SelectMenu/SelectMenuTabPanel.tsx +29 -0
  794. package/src/SelectMenu/SelectMenuTabs.tsx +43 -0
  795. package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
  796. package/src/SelectMenu/index.ts +15 -0
  797. package/src/SelectPanel/SelectPanel.tsx +173 -0
  798. package/src/SelectPanel/index.ts +2 -0
  799. package/src/SideNav.tsx +191 -0
  800. package/src/Spinner.tsx +59 -0
  801. package/src/StateLabel.tsx +112 -0
  802. package/src/StyledOcticon.tsx +22 -0
  803. package/src/SubNav.tsx +124 -0
  804. package/src/TabNav.tsx +73 -0
  805. package/src/Text.tsx +13 -0
  806. package/src/TextInput.tsx +68 -0
  807. package/src/TextInputWithTokens.tsx +351 -0
  808. package/src/ThemeProvider.tsx +176 -0
  809. package/src/Timeline.tsx +140 -0
  810. package/src/Token/AvatarToken.tsx +54 -0
  811. package/src/Token/IssueLabelToken.tsx +150 -0
  812. package/src/Token/Token.tsx +126 -0
  813. package/src/Token/TokenBase.tsx +129 -0
  814. package/src/Token/_RemoveTokenButton.tsx +111 -0
  815. package/src/Token/_TokenTextContainer.tsx +47 -0
  816. package/src/Token/index.ts +3 -0
  817. package/src/Tooltip.tsx +263 -0
  818. package/src/Truncate.tsx +31 -0
  819. package/src/UnderlineNav.tsx +107 -0
  820. package/src/_TextInputWrapper.tsx +113 -0
  821. package/src/_UnstyledTextInput.tsx +19 -0
  822. package/src/__tests__/.eslintrc.json +11 -0
  823. package/src/__tests__/ActionList.test.tsx +53 -0
  824. package/src/__tests__/ActionList.types.test.tsx +51 -0
  825. package/src/__tests__/ActionList2.test.tsx +156 -0
  826. package/src/__tests__/ActionMenu.test.tsx +136 -0
  827. package/src/__tests__/AnchoredOverlay.test.tsx +150 -0
  828. package/src/__tests__/Autocomplete.test.tsx +444 -0
  829. package/src/__tests__/Avatar.test.tsx +44 -0
  830. package/src/__tests__/AvatarStack.test.tsx +48 -0
  831. package/src/__tests__/BorderBox.test.tsx +43 -0
  832. package/src/__tests__/Box.test.tsx +42 -0
  833. package/src/__tests__/BranchName.test.tsx +26 -0
  834. package/src/__tests__/Breadcrumbs.test.tsx +27 -0
  835. package/src/__tests__/Breadcrumbs.types.test.tsx +22 -0
  836. package/src/__tests__/BreadcrumbsItem.test.tsx +31 -0
  837. package/src/__tests__/Button.test.tsx +128 -0
  838. package/src/__tests__/Caret.test.tsx +36 -0
  839. package/src/__tests__/Checkbox.test.tsx +155 -0
  840. package/src/__tests__/CircleBadge.test.tsx +66 -0
  841. package/src/__tests__/CircleBadge.types.test.tsx +11 -0
  842. package/src/__tests__/CircleOcticon.test.tsx +50 -0
  843. package/src/__tests__/ConfirmationDialog.test.tsx +120 -0
  844. package/src/__tests__/CounterLabel.test.tsx +50 -0
  845. package/src/__tests__/CounterLabel.types.test.tsx +11 -0
  846. package/src/__tests__/Details.test.tsx +115 -0
  847. package/src/__tests__/Dialog.test.tsx +155 -0
  848. package/src/__tests__/Dialog.types.test.tsx +11 -0
  849. package/src/__tests__/Dialog2.types.test.tsx +11 -0
  850. package/src/__tests__/Dropdown.test.tsx +53 -0
  851. package/src/__tests__/Dropdown.types.test.tsx +21 -0
  852. package/src/__tests__/DropdownMenu.test.tsx +136 -0
  853. package/src/__tests__/FilterList.test.tsx +26 -0
  854. package/src/__tests__/FilterList.types.test.tsx +17 -0
  855. package/src/__tests__/FilterListItem.test.tsx +31 -0
  856. package/src/__tests__/FilteredSearch.test.tsx +26 -0
  857. package/src/__tests__/FilteredSearch.types.test.tsx +11 -0
  858. package/src/__tests__/Flash.test.tsx +45 -0
  859. package/src/__tests__/Flash.types.test.tsx +11 -0
  860. package/src/__tests__/Flex.test.tsx +58 -0
  861. package/src/__tests__/FormGroup.test.tsx +38 -0
  862. package/src/__tests__/FormGroup.types.test.tsx +11 -0
  863. package/src/__tests__/Grid.test.tsx +82 -0
  864. package/src/__tests__/Header.test.tsx +49 -0
  865. package/src/__tests__/Header.types.test.tsx +19 -0
  866. package/src/__tests__/Heading.test.tsx +91 -0
  867. package/src/__tests__/KeyPaths.types.test.ts +14 -0
  868. package/src/__tests__/Label.test.tsx +34 -0
  869. package/src/__tests__/Label.types.test.tsx +11 -0
  870. package/src/__tests__/LabelGroup.test.tsx +30 -0
  871. package/src/__tests__/LabelGroup.types.test.tsx +11 -0
  872. package/src/__tests__/Link.test.tsx +47 -0
  873. package/src/__tests__/Link.types.test.tsx +11 -0
  874. package/src/__tests__/Merge.types.test.ts +39 -0
  875. package/src/__tests__/NewButton.test.tsx +70 -0
  876. package/src/__tests__/Overlay.test.tsx +103 -0
  877. package/src/__tests__/Overlay.types.test.tsx +33 -0
  878. package/src/__tests__/Pagehead.test.tsx +23 -0
  879. package/src/__tests__/Pagehead.types.test.tsx +11 -0
  880. package/src/__tests__/Pagination/Pagination.test.tsx +30 -0
  881. package/src/__tests__/Pagination/PaginationModel.test.tsx +133 -0
  882. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +184 -0
  883. package/src/__tests__/Pagination.types.test.tsx +11 -0
  884. package/src/__tests__/PointerBox.test.tsx +34 -0
  885. package/src/__tests__/Popover.test.tsx +68 -0
  886. package/src/__tests__/Popover.types.test.tsx +17 -0
  887. package/src/__tests__/Portal.test.tsx +103 -0
  888. package/src/__tests__/Position.test.tsx +117 -0
  889. package/src/__tests__/ProgressBar.test.tsx +40 -0
  890. package/src/__tests__/SelectMenu.test.tsx +142 -0
  891. package/src/__tests__/SelectMenu.types.test.tsx +37 -0
  892. package/src/__tests__/SelectPanel.test.tsx +63 -0
  893. package/src/__tests__/SelectPanel.types.test.tsx +31 -0
  894. package/src/__tests__/SideNav.test.tsx +62 -0
  895. package/src/__tests__/SideNav.types.test.tsx +11 -0
  896. package/src/__tests__/Spinner.test.tsx +42 -0
  897. package/src/__tests__/StateLabel.test.tsx +48 -0
  898. package/src/__tests__/StateLabel.types.test.tsx +11 -0
  899. package/src/__tests__/StyledOcticon.test.tsx +26 -0
  900. package/src/__tests__/StyledOcticon.types.test.tsx +12 -0
  901. package/src/__tests__/SubNav.test.tsx +50 -0
  902. package/src/__tests__/SubNav.types.test.tsx +25 -0
  903. package/src/__tests__/SubNavLink.test.tsx +31 -0
  904. package/src/__tests__/TabNav.test.tsx +32 -0
  905. package/src/__tests__/TabNav.types.test.tsx +22 -0
  906. package/src/__tests__/Text.test.tsx +78 -0
  907. package/src/__tests__/TextInput.test.tsx +49 -0
  908. package/src/__tests__/TextInputWithTokens.test.tsx +422 -0
  909. package/src/__tests__/ThemeProvider.test.tsx +441 -0
  910. package/src/__tests__/Timeline.test.tsx +58 -0
  911. package/src/__tests__/Timeline.types.test.tsx +31 -0
  912. package/src/__tests__/Token.test.tsx +118 -0
  913. package/src/__tests__/Tooltip.test.tsx +52 -0
  914. package/src/__tests__/Tooltip.types.test.tsx +11 -0
  915. package/src/__tests__/Truncate.test.tsx +43 -0
  916. package/src/__tests__/Truncate.types.test.tsx +11 -0
  917. package/src/__tests__/UnderlineNav.test.tsx +58 -0
  918. package/src/__tests__/UnderlineNav.types.test.tsx +22 -0
  919. package/src/__tests__/UnderlineNavLink.test.tsx +31 -0
  920. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +223 -0
  921. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  922. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +80 -0
  923. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +232 -0
  924. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +3897 -0
  925. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +19 -0
  926. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +377 -0
  927. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +14 -0
  928. package/src/__tests__/__snapshots__/Box.test.tsx.snap +201 -0
  929. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +17 -0
  930. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +29 -0
  931. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +79 -0
  932. package/src/__tests__/__snapshots__/Button.test.tsx.snap +840 -0
  933. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +373 -0
  934. package/src/__tests__/__snapshots__/Checkbox.test.tsx.snap +16 -0
  935. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +142 -0
  936. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +65 -0
  937. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +89 -0
  938. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +22 -0
  939. package/src/__tests__/__snapshots__/Details.test.tsx.snap +15 -0
  940. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +201 -0
  941. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +249 -0
  942. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +107 -0
  943. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +13 -0
  944. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +80 -0
  945. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +32 -0
  946. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +32 -0
  947. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +130 -0
  948. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +25 -0
  949. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +178 -0
  950. package/src/__tests__/__snapshots__/Header.test.tsx.snap +79 -0
  951. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +13 -0
  952. package/src/__tests__/__snapshots__/Label.test.tsx.snap +73 -0
  953. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +15 -0
  954. package/src/__tests__/__snapshots__/Link.test.tsx.snap +212 -0
  955. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +305 -0
  956. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +15 -0
  957. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +174 -0
  958. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +4687 -0
  959. package/src/__tests__/__snapshots__/Position.test.tsx.snap +44 -0
  960. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +53 -0
  961. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +473 -0
  962. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +124 -0
  963. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +143 -0
  964. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +33 -0
  965. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +395 -0
  966. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +26 -0
  967. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +44 -0
  968. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +199 -0
  969. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +58 -0
  970. package/src/__tests__/__snapshots__/Text.test.tsx.snap +7 -0
  971. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +446 -0
  972. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +6045 -0
  973. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +15 -0
  974. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +159 -0
  975. package/src/__tests__/__snapshots__/Token.test.tsx.snap +3811 -0
  976. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +227 -0
  977. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +17 -0
  978. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +59 -0
  979. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +130 -0
  980. package/src/__tests__/__snapshots__/themePreval.test.ts.snap +3176 -0
  981. package/src/__tests__/behaviors/anchoredPosition.test.ts +295 -0
  982. package/src/__tests__/behaviors/focusTrap.test.tsx +236 -0
  983. package/src/__tests__/behaviors/focusZone.test.tsx +549 -0
  984. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +61 -0
  985. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +195 -0
  986. package/src/__tests__/filterObject.test.ts +54 -0
  987. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +31 -0
  988. package/src/__tests__/hooks/useOnEscapePress.test.tsx +16 -0
  989. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +48 -0
  990. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +48 -0
  991. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +39 -0
  992. package/src/__tests__/theme.test.ts +41 -0
  993. package/src/__tests__/themeGet.test.ts +15 -0
  994. package/src/__tests__/themePreval.test.ts +8 -0
  995. package/src/__tests__/useSafeTimeout.test.tsx +36 -0
  996. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  997. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  998. package/src/behaviors/anchoredPosition.ts +442 -0
  999. package/src/behaviors/focusTrap.ts +184 -0
  1000. package/src/behaviors/focusZone.ts +713 -0
  1001. package/src/behaviors/scrollIntoViewingArea.ts +27 -0
  1002. package/src/constants.ts +62 -0
  1003. package/src/drafts.ts +10 -0
  1004. package/src/hooks/index.ts +11 -0
  1005. package/src/hooks/useAnchoredPosition.ts +54 -0
  1006. package/src/hooks/useCombinedRefs.ts +40 -0
  1007. package/src/hooks/useDetails.tsx +54 -0
  1008. package/src/hooks/useDialog.ts +121 -0
  1009. package/src/hooks/useFocusTrap.ts +80 -0
  1010. package/src/hooks/useFocusZone.ts +64 -0
  1011. package/src/hooks/useOnEscapePress.ts +63 -0
  1012. package/src/hooks/useOnOutsideClick.tsx +82 -0
  1013. package/src/hooks/useOpenAndCloseFocus.ts +32 -0
  1014. package/src/hooks/useOverlay.tsx +34 -0
  1015. package/src/hooks/useProvidedRefOrCreate.ts +14 -0
  1016. package/src/hooks/useProvidedStateOrCreate.ts +27 -0
  1017. package/src/hooks/useRenderForcingRef.ts +22 -0
  1018. package/src/hooks/useResizeObserver.ts +11 -0
  1019. package/src/hooks/useSafeTimeout.ts +38 -0
  1020. package/src/hooks/useScrollFlash.ts +21 -0
  1021. package/src/index.ts +175 -0
  1022. package/src/polyfills/eventListenerSignal.ts +66 -0
  1023. package/src/stories/ActionList.stories.tsx +436 -0
  1024. package/src/stories/ActionList2.stories.tsx +1305 -0
  1025. package/src/stories/ActionMenu.stories.tsx +331 -0
  1026. package/src/stories/AnchoredOverlay.stories.tsx +117 -0
  1027. package/src/stories/Autocomplete.stories.tsx +655 -0
  1028. package/src/stories/AvatarStack.stories.tsx +37 -0
  1029. package/src/stories/Button.stories.tsx +92 -0
  1030. package/src/stories/Checkbox.stories.tsx +164 -0
  1031. package/src/stories/ConfirmationDialog.stories.tsx +105 -0
  1032. package/src/stories/Dialog.stories.tsx +240 -0
  1033. package/src/stories/DropdownMenu.stories.tsx +84 -0
  1034. package/src/stories/IssueLabelToken.stories.tsx +138 -0
  1035. package/src/stories/NewButton.stories.tsx +201 -0
  1036. package/src/stories/Overlay.stories.tsx +213 -0
  1037. package/src/stories/Portal.stories.tsx +109 -0
  1038. package/src/stories/ProfileToken.stories.tsx +129 -0
  1039. package/src/stories/SelectPanel.stories.tsx +353 -0
  1040. package/src/stories/TextInput.stories.tsx +113 -0
  1041. package/src/stories/TextInputWithTokens.stories.tsx +155 -0
  1042. package/src/stories/ThemeProvider.stories.tsx +104 -0
  1043. package/src/stories/Token.stories.tsx +137 -0
  1044. package/src/stories/useAnchoredPosition.stories.tsx +332 -0
  1045. package/src/stories/useFocusTrap.stories.tsx +400 -0
  1046. package/src/stories/useFocusZone.stories.tsx +663 -0
  1047. package/src/sx.ts +24 -0
  1048. package/src/theme-preval.js +80 -0
  1049. package/src/theme.ts +89 -0
  1050. package/src/utils/create-slots.tsx +96 -0
  1051. package/src/utils/deprecate.tsx +73 -0
  1052. package/src/utils/isNumeric.tsx +4 -0
  1053. package/src/utils/iterateFocusableElements.ts +121 -0
  1054. package/src/utils/ssr.tsx +1 -0
  1055. package/src/utils/test-deprecations.tsx +19 -0
  1056. package/src/utils/test-helpers.tsx +7 -0
  1057. package/src/utils/test-matchers.tsx +109 -0
  1058. package/src/utils/testing.tsx +264 -0
  1059. package/src/utils/theme.js +64 -0
  1060. package/src/utils/types/AriaRole.ts +71 -0
  1061. package/src/utils/types/ComponentProps.ts +13 -0
  1062. package/src/utils/types/Flatten.ts +4 -0
  1063. package/src/utils/types/KeyPaths.ts +10 -0
  1064. package/src/utils/types/MandateProps.ts +19 -0
  1065. package/src/utils/types/Merge.ts +20 -0
  1066. package/src/utils/types/index.ts +5 -0
  1067. package/src/utils/uniqueId.ts +6 -0
  1068. package/src/utils/use-force-update.ts +7 -0
  1069. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  1070. package/src/utils/userAgent.ts +7 -0
  1071. package/stats.html +3279 -0
  1072. package/tsconfig.build.json +7 -0
  1073. package/tsconfig.json +20 -0
  1074. package/lib/ActionList2/Header.d.ts +0 -26
  1075. package/lib/ActionList2/Header.js +0 -55
  1076. package/lib-esm/ActionList2/Header.d.ts +0 -26
  1077. package/lib-esm/ActionList2/Header.js +0 -44
@@ -0,0 +1,3897 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Autocomplete snapshots renders a custom empty state message 1`] = `
4
+ Array [
5
+ .c1 {
6
+ border: 0;
7
+ font-size: inherit;
8
+ font-family: inherit;
9
+ background-color: transparent;
10
+ -webkit-appearance: none;
11
+ color: inherit;
12
+ width: 100%;
13
+ }
14
+
15
+ .c1:focus {
16
+ outline: 0;
17
+ }
18
+
19
+ .c0 {
20
+ display: -webkit-inline-box;
21
+ display: -webkit-inline-flex;
22
+ display: -ms-inline-flexbox;
23
+ display: inline-flex;
24
+ -webkit-align-items: stretch;
25
+ -webkit-box-align: stretch;
26
+ -ms-flex-align: stretch;
27
+ align-items: stretch;
28
+ min-height: 34px;
29
+ font-size: 14px;
30
+ line-height: 20px;
31
+ color: #24292f;
32
+ vertical-align: middle;
33
+ background-repeat: no-repeat;
34
+ background-position: right 8px center;
35
+ border: 1px solid #d0d7de;
36
+ border-radius: 6px;
37
+ outline: none;
38
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
39
+ cursor: text;
40
+ padding: 6px 12px;
41
+ }
42
+
43
+ .c0 .TextInput-icon {
44
+ -webkit-align-self: center;
45
+ -ms-flex-item-align: center;
46
+ align-self: center;
47
+ color: #57606a;
48
+ margin: 0 8px;
49
+ -webkit-flex-shrink: 0;
50
+ -ms-flex-negative: 0;
51
+ flex-shrink: 0;
52
+ }
53
+
54
+ .c0:focus-within {
55
+ border-color: #0969da;
56
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
57
+ }
58
+
59
+ @media (min-width:768px) {
60
+ .c0 {
61
+ font-size: 14px;
62
+ }
63
+ }
64
+
65
+ <span
66
+ className="c0 TextInput-wrapper"
67
+ >
68
+ <input
69
+ aria-autocomplete="both"
70
+ aria-controls="autocompleteId-listbox"
71
+ aria-expanded={false}
72
+ aria-haspopup="listbox"
73
+ aria-owns="autocompleteId-listbox"
74
+ className="c1"
75
+ onBlur={[Function]}
76
+ onChange={[Function]}
77
+ onFocus={[Function]}
78
+ onKeyDown={[Function]}
79
+ onKeyPress={[Function]}
80
+ onKeyUp={[Function]}
81
+ role="combobox"
82
+ type="text"
83
+ />
84
+ </span>,
85
+ .c0 {
86
+ position: absolute;
87
+ width: 1px;
88
+ height: 1px;
89
+ padding: 0;
90
+ margin: -1px;
91
+ overflow: hidden;
92
+ -webkit-clip: rect(0,0,0,0);
93
+ clip: rect(0,0,0,0);
94
+ white-space: nowrap;
95
+ border-width: 0;
96
+ }
97
+
98
+ .c1 {
99
+ padding: 16px;
100
+ }
101
+
102
+ <div
103
+ className="c0"
104
+ >
105
+ <div>
106
+ <div
107
+ className="c1"
108
+ >
109
+ No results
110
+ </div>
111
+ </div>
112
+ </div>,
113
+ ]
114
+ `;
115
+
116
+ exports[`Autocomplete snapshots renders a loading state 1`] = `
117
+ Array [
118
+ .c1 {
119
+ border: 0;
120
+ font-size: inherit;
121
+ font-family: inherit;
122
+ background-color: transparent;
123
+ -webkit-appearance: none;
124
+ color: inherit;
125
+ width: 100%;
126
+ }
127
+
128
+ .c1:focus {
129
+ outline: 0;
130
+ }
131
+
132
+ .c0 {
133
+ display: -webkit-inline-box;
134
+ display: -webkit-inline-flex;
135
+ display: -ms-inline-flexbox;
136
+ display: inline-flex;
137
+ -webkit-align-items: stretch;
138
+ -webkit-box-align: stretch;
139
+ -ms-flex-align: stretch;
140
+ align-items: stretch;
141
+ min-height: 34px;
142
+ font-size: 14px;
143
+ line-height: 20px;
144
+ color: #24292f;
145
+ vertical-align: middle;
146
+ background-repeat: no-repeat;
147
+ background-position: right 8px center;
148
+ border: 1px solid #d0d7de;
149
+ border-radius: 6px;
150
+ outline: none;
151
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
152
+ cursor: text;
153
+ padding: 6px 12px;
154
+ }
155
+
156
+ .c0 .TextInput-icon {
157
+ -webkit-align-self: center;
158
+ -ms-flex-item-align: center;
159
+ align-self: center;
160
+ color: #57606a;
161
+ margin: 0 8px;
162
+ -webkit-flex-shrink: 0;
163
+ -ms-flex-negative: 0;
164
+ flex-shrink: 0;
165
+ }
166
+
167
+ .c0:focus-within {
168
+ border-color: #0969da;
169
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
170
+ }
171
+
172
+ @media (min-width:768px) {
173
+ .c0 {
174
+ font-size: 14px;
175
+ }
176
+ }
177
+
178
+ <span
179
+ className="c0 TextInput-wrapper"
180
+ >
181
+ <input
182
+ aria-autocomplete="both"
183
+ aria-controls="autocompleteId-listbox"
184
+ aria-expanded={false}
185
+ aria-haspopup="listbox"
186
+ aria-owns="autocompleteId-listbox"
187
+ className="c1"
188
+ onBlur={[Function]}
189
+ onChange={[Function]}
190
+ onFocus={[Function]}
191
+ onKeyDown={[Function]}
192
+ onKeyPress={[Function]}
193
+ onKeyUp={[Function]}
194
+ role="combobox"
195
+ type="text"
196
+ />
197
+ </span>,
198
+ .c0 {
199
+ position: absolute;
200
+ width: 1px;
201
+ height: 1px;
202
+ padding: 0;
203
+ margin: -1px;
204
+ overflow: hidden;
205
+ -webkit-clip: rect(0,0,0,0);
206
+ clip: rect(0,0,0,0);
207
+ white-space: nowrap;
208
+ border-width: 0;
209
+ }
210
+
211
+ .c1 {
212
+ padding: 16px;
213
+ display: -webkit-box;
214
+ display: -webkit-flex;
215
+ display: -ms-flexbox;
216
+ display: flex;
217
+ -webkit-box-pack: center;
218
+ -webkit-justify-content: center;
219
+ -ms-flex-pack: center;
220
+ justify-content: center;
221
+ }
222
+
223
+ .c2 {
224
+ -webkit-animation: rotate-keyframes 1s linear infinite;
225
+ animation: rotate-keyframes 1s linear infinite;
226
+ }
227
+
228
+ <div
229
+ className="c0"
230
+ >
231
+ <div
232
+ className="c1"
233
+ display="flex"
234
+ >
235
+ <svg
236
+ className="c2"
237
+ fill="none"
238
+ height="32px"
239
+ viewBox="0 0 16 16"
240
+ width="32px"
241
+ >
242
+ <circle
243
+ cx="8"
244
+ cy="8"
245
+ r="7"
246
+ stroke="currentColor"
247
+ strokeOpacity="0.25"
248
+ strokeWidth="2"
249
+ vectorEffect="non-scaling-stroke"
250
+ />
251
+ <path
252
+ d="M15 8a7.002 7.002 0 00-7-7"
253
+ stroke="currentColor"
254
+ strokeLinecap="round"
255
+ strokeWidth="2"
256
+ vectorEffect="non-scaling-stroke"
257
+ />
258
+ </svg>
259
+ </div>
260
+ </div>,
261
+ ]
262
+ `;
263
+
264
+ exports[`Autocomplete snapshots renders a menu that contains an item to add to the menu 1`] = `
265
+ Array [
266
+ .c1 {
267
+ border: 0;
268
+ font-size: inherit;
269
+ font-family: inherit;
270
+ background-color: transparent;
271
+ -webkit-appearance: none;
272
+ color: inherit;
273
+ width: 100%;
274
+ }
275
+
276
+ .c1:focus {
277
+ outline: 0;
278
+ }
279
+
280
+ .c0 {
281
+ display: -webkit-inline-box;
282
+ display: -webkit-inline-flex;
283
+ display: -ms-inline-flexbox;
284
+ display: inline-flex;
285
+ -webkit-align-items: stretch;
286
+ -webkit-box-align: stretch;
287
+ -ms-flex-align: stretch;
288
+ align-items: stretch;
289
+ min-height: 34px;
290
+ font-size: 14px;
291
+ line-height: 20px;
292
+ color: #24292f;
293
+ vertical-align: middle;
294
+ background-repeat: no-repeat;
295
+ background-position: right 8px center;
296
+ border: 1px solid #d0d7de;
297
+ border-radius: 6px;
298
+ outline: none;
299
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
300
+ cursor: text;
301
+ padding: 6px 12px;
302
+ }
303
+
304
+ .c0 .TextInput-icon {
305
+ -webkit-align-self: center;
306
+ -ms-flex-item-align: center;
307
+ align-self: center;
308
+ color: #57606a;
309
+ margin: 0 8px;
310
+ -webkit-flex-shrink: 0;
311
+ -ms-flex-negative: 0;
312
+ flex-shrink: 0;
313
+ }
314
+
315
+ .c0:focus-within {
316
+ border-color: #0969da;
317
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
318
+ }
319
+
320
+ @media (min-width:768px) {
321
+ .c0 {
322
+ font-size: 14px;
323
+ }
324
+ }
325
+
326
+ <span
327
+ className="c0 TextInput-wrapper"
328
+ >
329
+ <input
330
+ aria-autocomplete="both"
331
+ aria-controls="autocompleteId-listbox"
332
+ aria-expanded={false}
333
+ aria-haspopup="listbox"
334
+ aria-owns="autocompleteId-listbox"
335
+ className="c1"
336
+ onBlur={[Function]}
337
+ onChange={[Function]}
338
+ onFocus={[Function]}
339
+ onKeyDown={[Function]}
340
+ onKeyPress={[Function]}
341
+ onKeyUp={[Function]}
342
+ role="combobox"
343
+ type="text"
344
+ />
345
+ </span>,
346
+ .c0 {
347
+ position: absolute;
348
+ width: 1px;
349
+ height: 1px;
350
+ padding: 0;
351
+ margin: -1px;
352
+ overflow: hidden;
353
+ -webkit-clip: rect(0,0,0,0);
354
+ clip: rect(0,0,0,0);
355
+ white-space: nowrap;
356
+ border-width: 0;
357
+ }
358
+
359
+ .c2 {
360
+ margin-top: 8px;
361
+ margin-bottom: 8px;
362
+ }
363
+
364
+ .c8 {
365
+ display: -webkit-box;
366
+ display: -webkit-flex;
367
+ display: -ms-flexbox;
368
+ display: flex;
369
+ min-width: 0;
370
+ position: relative;
371
+ -webkit-box-flex: 1;
372
+ -webkit-flex-grow: 1;
373
+ -ms-flex-positive: 1;
374
+ flex-grow: 1;
375
+ }
376
+
377
+ .c9 {
378
+ -webkit-align-items: baseline;
379
+ -webkit-box-align: baseline;
380
+ -ms-flex-align: baseline;
381
+ align-items: baseline;
382
+ display: -webkit-box;
383
+ display: -webkit-flex;
384
+ display: -ms-flexbox;
385
+ display: flex;
386
+ min-width: 0;
387
+ -webkit-flex-direction: var(--main-content-flex-direction);
388
+ -ms-flex-direction: var(--main-content-flex-direction);
389
+ flex-direction: var(--main-content-flex-direction);
390
+ -webkit-box-flex: 1;
391
+ -webkit-flex-grow: 1;
392
+ -ms-flex-positive: 1;
393
+ flex-grow: 1;
394
+ }
395
+
396
+ .c4 {
397
+ padding: 6px 8px;
398
+ display: -webkit-box;
399
+ display: -webkit-flex;
400
+ display: -ms-flexbox;
401
+ display: flex;
402
+ border-radius: 6px;
403
+ color: #24292f;
404
+ -webkit-transition: background 33.333ms linear;
405
+ transition: background 33.333ms linear;
406
+ -webkit-text-decoration: none;
407
+ text-decoration: none;
408
+ margin-left: 8px;
409
+ margin-right: 8px;
410
+ }
411
+
412
+ .c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
413
+ margin-top: 0;
414
+ }
415
+
416
+ .c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
417
+ content: ' ';
418
+ display: block;
419
+ position: absolute;
420
+ width: 100%;
421
+ top: -7px;
422
+ border: 0 solid hsla(210,18%,87%,1);
423
+ border-top-width: 0;
424
+ }
425
+
426
+ .c4:hover .c7::before,
427
+ .c4:hover + * .c7::before {
428
+ border-color: var(--item-hover-divider-border-color-override,transparent) !important;
429
+ }
430
+
431
+ .c4:focus .c7::before,
432
+ .c4:focus + * .c7::before,
433
+ .c4[data-is-active-descendant] .c7::before,
434
+ [data-is-active-descendant] + .c4 .c7::before {
435
+ border-color: transparent !important;
436
+ }
437
+
438
+ .c4[data-is-active-descendant='activated-directly'] {
439
+ background: rgba(208,215,222,0.48);
440
+ }
441
+
442
+ .c4[data-is-active-descendant='activated-indirectly'] {
443
+ background: rgba(208,215,222,0.32);
444
+ }
445
+
446
+ .c4:focus {
447
+ background: rgba(208,215,222,0.48);
448
+ outline: none;
449
+ }
450
+
451
+ .c4:active {
452
+ background: rgba(208,215,222,0.48);
453
+ }
454
+
455
+ .c5 {
456
+ height: 20px;
457
+ width: 16px;
458
+ margin-right: 8px;
459
+ display: -webkit-box;
460
+ display: -webkit-flex;
461
+ display: -ms-flexbox;
462
+ display: flex;
463
+ -webkit-box-pack: center;
464
+ -webkit-justify-content: center;
465
+ -ms-flex-pack: center;
466
+ justify-content: center;
467
+ -webkit-align-items: center;
468
+ -webkit-box-align: center;
469
+ -ms-flex-align: center;
470
+ align-items: center;
471
+ -webkit-flex-shrink: 0;
472
+ -ms-flex-negative: 0;
473
+ flex-shrink: 0;
474
+ }
475
+
476
+ .c10 {
477
+ height: 20px;
478
+ width: 16px;
479
+ margin-right: 8px;
480
+ display: -webkit-box;
481
+ display: -webkit-flex;
482
+ display: -ms-flexbox;
483
+ display: flex;
484
+ -webkit-box-pack: center;
485
+ -webkit-justify-content: center;
486
+ -ms-flex-pack: center;
487
+ justify-content: center;
488
+ -webkit-align-items: center;
489
+ -webkit-box-align: center;
490
+ -ms-flex-align: center;
491
+ align-items: center;
492
+ -webkit-flex-shrink: 0;
493
+ -ms-flex-negative: 0;
494
+ flex-shrink: 0;
495
+ display: -webkit-box;
496
+ display: -webkit-flex;
497
+ display: -ms-flexbox;
498
+ display: flex;
499
+ -webkit-flex-direction: column;
500
+ -ms-flex-direction: column;
501
+ flex-direction: column;
502
+ -webkit-box-pack: center;
503
+ -webkit-justify-content: center;
504
+ -ms-flex-pack: center;
505
+ justify-content: center;
506
+ }
507
+
508
+ .c10 svg {
509
+ fill: #57606a;
510
+ font-size: 12px;
511
+ }
512
+
513
+ .c6 rect {
514
+ fill: #ffffff;
515
+ stroke: #d0d7de;
516
+ }
517
+
518
+ .c6 path {
519
+ fill: #ffffff;
520
+ opacity: 0;
521
+ }
522
+
523
+ .c1 {
524
+ font-size: 14px;
525
+ line-height: 20px;
526
+ }
527
+
528
+ .c1[data-has-active-descendant],
529
+ .c1:focus-within {
530
+ --item-hover-bg-override: none;
531
+ --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
532
+ }
533
+
534
+ @media (hover:hover) and (pointer:fine) {
535
+ .c4:hover {
536
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
537
+ cursor: pointer;
538
+ }
539
+ }
540
+
541
+ <div
542
+ className="c0"
543
+ >
544
+ <div>
545
+ <div
546
+ aria-labelledby="labelId"
547
+ className="c1"
548
+ id="autocompleteId-listbox"
549
+ role="listbox"
550
+ >
551
+ <div
552
+ className="c2"
553
+ >
554
+ <div
555
+ aria-labelledby="react-aria-1"
556
+ aria-selected={false}
557
+ className="c3 c4"
558
+ data-id={0}
559
+ onClick={[Function]}
560
+ onKeyPress={[Function]}
561
+ role="option"
562
+ tabIndex={-1}
563
+ >
564
+ <div
565
+ className="c5"
566
+ >
567
+ <svg
568
+ aria-hidden="true"
569
+ className="c6"
570
+ height="16"
571
+ selected={false}
572
+ viewBox="0 0 16 16"
573
+ width="16"
574
+ xmlns="http://www.w3.org/2000/svg"
575
+ >
576
+ <rect
577
+ height="12"
578
+ rx="4"
579
+ width="12"
580
+ x="2"
581
+ y="2"
582
+ />
583
+ <path
584
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
585
+ fillRule="evenodd"
586
+ strokeWidth="0"
587
+ />
588
+ </svg>
589
+ </div>
590
+ <div
591
+ className="c7 c8"
592
+ >
593
+ <div
594
+ className="c9"
595
+ style={
596
+ Object {
597
+ "--main-content-flex-direction": "row",
598
+ }
599
+ }
600
+ >
601
+ <span
602
+ className=""
603
+ id="react-aria-1"
604
+ >
605
+ zero
606
+ </span>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ <div
611
+ aria-labelledby="react-aria-3"
612
+ aria-selected={false}
613
+ className="c3 c4"
614
+ data-id={1}
615
+ onClick={[Function]}
616
+ onKeyPress={[Function]}
617
+ role="option"
618
+ tabIndex={-1}
619
+ >
620
+ <div
621
+ className="c5"
622
+ >
623
+ <svg
624
+ aria-hidden="true"
625
+ className="c6"
626
+ height="16"
627
+ selected={false}
628
+ viewBox="0 0 16 16"
629
+ width="16"
630
+ xmlns="http://www.w3.org/2000/svg"
631
+ >
632
+ <rect
633
+ height="12"
634
+ rx="4"
635
+ width="12"
636
+ x="2"
637
+ y="2"
638
+ />
639
+ <path
640
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
641
+ fillRule="evenodd"
642
+ strokeWidth="0"
643
+ />
644
+ </svg>
645
+ </div>
646
+ <div
647
+ className="c7 c8"
648
+ >
649
+ <div
650
+ className="c9"
651
+ style={
652
+ Object {
653
+ "--main-content-flex-direction": "row",
654
+ }
655
+ }
656
+ >
657
+ <span
658
+ className=""
659
+ id="react-aria-3"
660
+ >
661
+ one
662
+ </span>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ <div
667
+ aria-labelledby="react-aria-5"
668
+ aria-selected={false}
669
+ className="c3 c4"
670
+ data-id={2}
671
+ onClick={[Function]}
672
+ onKeyPress={[Function]}
673
+ role="option"
674
+ tabIndex={-1}
675
+ >
676
+ <div
677
+ className="c5"
678
+ >
679
+ <svg
680
+ aria-hidden="true"
681
+ className="c6"
682
+ height="16"
683
+ selected={false}
684
+ viewBox="0 0 16 16"
685
+ width="16"
686
+ xmlns="http://www.w3.org/2000/svg"
687
+ >
688
+ <rect
689
+ height="12"
690
+ rx="4"
691
+ width="12"
692
+ x="2"
693
+ y="2"
694
+ />
695
+ <path
696
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
697
+ fillRule="evenodd"
698
+ strokeWidth="0"
699
+ />
700
+ </svg>
701
+ </div>
702
+ <div
703
+ className="c7 c8"
704
+ >
705
+ <div
706
+ className="c9"
707
+ style={
708
+ Object {
709
+ "--main-content-flex-direction": "row",
710
+ }
711
+ }
712
+ >
713
+ <span
714
+ className=""
715
+ id="react-aria-5"
716
+ >
717
+ two
718
+ </span>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ <div
723
+ aria-labelledby="react-aria-7"
724
+ aria-selected={false}
725
+ className="c3 c4"
726
+ data-id={3}
727
+ onClick={[Function]}
728
+ onKeyPress={[Function]}
729
+ role="option"
730
+ tabIndex={-1}
731
+ >
732
+ <div
733
+ className="c5"
734
+ >
735
+ <svg
736
+ aria-hidden="true"
737
+ className="c6"
738
+ height="16"
739
+ selected={false}
740
+ viewBox="0 0 16 16"
741
+ width="16"
742
+ xmlns="http://www.w3.org/2000/svg"
743
+ >
744
+ <rect
745
+ height="12"
746
+ rx="4"
747
+ width="12"
748
+ x="2"
749
+ y="2"
750
+ />
751
+ <path
752
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
753
+ fillRule="evenodd"
754
+ strokeWidth="0"
755
+ />
756
+ </svg>
757
+ </div>
758
+ <div
759
+ className="c7 c8"
760
+ >
761
+ <div
762
+ className="c9"
763
+ style={
764
+ Object {
765
+ "--main-content-flex-direction": "row",
766
+ }
767
+ }
768
+ >
769
+ <span
770
+ className=""
771
+ id="react-aria-7"
772
+ >
773
+ three
774
+ </span>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ <div
779
+ aria-labelledby="react-aria-9"
780
+ aria-selected={false}
781
+ className="c3 c4"
782
+ data-id={4}
783
+ onClick={[Function]}
784
+ onKeyPress={[Function]}
785
+ role="option"
786
+ tabIndex={-1}
787
+ >
788
+ <div
789
+ className="c5"
790
+ >
791
+ <svg
792
+ aria-hidden="true"
793
+ className="c6"
794
+ height="16"
795
+ selected={false}
796
+ viewBox="0 0 16 16"
797
+ width="16"
798
+ xmlns="http://www.w3.org/2000/svg"
799
+ >
800
+ <rect
801
+ height="12"
802
+ rx="4"
803
+ width="12"
804
+ x="2"
805
+ y="2"
806
+ />
807
+ <path
808
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
809
+ fillRule="evenodd"
810
+ strokeWidth="0"
811
+ />
812
+ </svg>
813
+ </div>
814
+ <div
815
+ className="c7 c8"
816
+ >
817
+ <div
818
+ className="c9"
819
+ style={
820
+ Object {
821
+ "--main-content-flex-direction": "row",
822
+ }
823
+ }
824
+ >
825
+ <span
826
+ className=""
827
+ id="react-aria-9"
828
+ >
829
+ four
830
+ </span>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ <div
835
+ aria-labelledby="react-aria-11"
836
+ aria-selected={false}
837
+ className="c3 c4"
838
+ data-id={5}
839
+ onClick={[Function]}
840
+ onKeyPress={[Function]}
841
+ role="option"
842
+ tabIndex={-1}
843
+ >
844
+ <div
845
+ className="c5"
846
+ >
847
+ <svg
848
+ aria-hidden="true"
849
+ className="c6"
850
+ height="16"
851
+ selected={false}
852
+ viewBox="0 0 16 16"
853
+ width="16"
854
+ xmlns="http://www.w3.org/2000/svg"
855
+ >
856
+ <rect
857
+ height="12"
858
+ rx="4"
859
+ width="12"
860
+ x="2"
861
+ y="2"
862
+ />
863
+ <path
864
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
865
+ fillRule="evenodd"
866
+ strokeWidth="0"
867
+ />
868
+ </svg>
869
+ </div>
870
+ <div
871
+ className="c7 c8"
872
+ >
873
+ <div
874
+ className="c9"
875
+ style={
876
+ Object {
877
+ "--main-content-flex-direction": "row",
878
+ }
879
+ }
880
+ >
881
+ <span
882
+ className=""
883
+ id="react-aria-11"
884
+ >
885
+ five
886
+ </span>
887
+ </div>
888
+ </div>
889
+ </div>
890
+ <div
891
+ aria-labelledby="react-aria-13"
892
+ aria-selected={false}
893
+ className="c3 c4"
894
+ data-id={6}
895
+ onClick={[Function]}
896
+ onKeyPress={[Function]}
897
+ role="option"
898
+ tabIndex={-1}
899
+ >
900
+ <div
901
+ className="c5"
902
+ >
903
+ <svg
904
+ aria-hidden="true"
905
+ className="c6"
906
+ height="16"
907
+ selected={false}
908
+ viewBox="0 0 16 16"
909
+ width="16"
910
+ xmlns="http://www.w3.org/2000/svg"
911
+ >
912
+ <rect
913
+ height="12"
914
+ rx="4"
915
+ width="12"
916
+ x="2"
917
+ y="2"
918
+ />
919
+ <path
920
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
921
+ fillRule="evenodd"
922
+ strokeWidth="0"
923
+ />
924
+ </svg>
925
+ </div>
926
+ <div
927
+ className="c7 c8"
928
+ >
929
+ <div
930
+ className="c9"
931
+ style={
932
+ Object {
933
+ "--main-content-flex-direction": "row",
934
+ }
935
+ }
936
+ >
937
+ <span
938
+ className=""
939
+ id="react-aria-13"
940
+ >
941
+ six
942
+ </span>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ <div
947
+ aria-labelledby="react-aria-15"
948
+ aria-selected={false}
949
+ className="c3 c4"
950
+ data-id={7}
951
+ onClick={[Function]}
952
+ onKeyPress={[Function]}
953
+ role="option"
954
+ tabIndex={-1}
955
+ >
956
+ <div
957
+ className="c5"
958
+ >
959
+ <svg
960
+ aria-hidden="true"
961
+ className="c6"
962
+ height="16"
963
+ selected={false}
964
+ viewBox="0 0 16 16"
965
+ width="16"
966
+ xmlns="http://www.w3.org/2000/svg"
967
+ >
968
+ <rect
969
+ height="12"
970
+ rx="4"
971
+ width="12"
972
+ x="2"
973
+ y="2"
974
+ />
975
+ <path
976
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
977
+ fillRule="evenodd"
978
+ strokeWidth="0"
979
+ />
980
+ </svg>
981
+ </div>
982
+ <div
983
+ className="c7 c8"
984
+ >
985
+ <div
986
+ className="c9"
987
+ style={
988
+ Object {
989
+ "--main-content-flex-direction": "row",
990
+ }
991
+ }
992
+ >
993
+ <span
994
+ className=""
995
+ id="react-aria-15"
996
+ >
997
+ seven
998
+ </span>
999
+ </div>
1000
+ </div>
1001
+ </div>
1002
+ <div
1003
+ aria-labelledby="react-aria-17"
1004
+ aria-selected={false}
1005
+ className="c3 c4"
1006
+ data-id={20}
1007
+ onClick={[Function]}
1008
+ onKeyPress={[Function]}
1009
+ role="option"
1010
+ tabIndex={-1}
1011
+ >
1012
+ <div
1013
+ className="c5"
1014
+ >
1015
+ <svg
1016
+ aria-hidden="true"
1017
+ className="c6"
1018
+ height="16"
1019
+ selected={false}
1020
+ viewBox="0 0 16 16"
1021
+ width="16"
1022
+ xmlns="http://www.w3.org/2000/svg"
1023
+ >
1024
+ <rect
1025
+ height="12"
1026
+ rx="4"
1027
+ width="12"
1028
+ x="2"
1029
+ y="2"
1030
+ />
1031
+ <path
1032
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1033
+ fillRule="evenodd"
1034
+ strokeWidth="0"
1035
+ />
1036
+ </svg>
1037
+ </div>
1038
+ <div
1039
+ className="c7 c8"
1040
+ >
1041
+ <div
1042
+ className="c9"
1043
+ style={
1044
+ Object {
1045
+ "--main-content-flex-direction": "row",
1046
+ }
1047
+ }
1048
+ >
1049
+ <span
1050
+ className=""
1051
+ id="react-aria-17"
1052
+ >
1053
+ twenty
1054
+ </span>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ <div
1059
+ aria-labelledby="react-aria-19"
1060
+ aria-selected={false}
1061
+ className="c3 c4"
1062
+ data-id={21}
1063
+ onClick={[Function]}
1064
+ onKeyPress={[Function]}
1065
+ role="option"
1066
+ tabIndex={-1}
1067
+ >
1068
+ <div
1069
+ className="c5"
1070
+ >
1071
+ <svg
1072
+ aria-hidden="true"
1073
+ className="c6"
1074
+ height="16"
1075
+ selected={false}
1076
+ viewBox="0 0 16 16"
1077
+ width="16"
1078
+ xmlns="http://www.w3.org/2000/svg"
1079
+ >
1080
+ <rect
1081
+ height="12"
1082
+ rx="4"
1083
+ width="12"
1084
+ x="2"
1085
+ y="2"
1086
+ />
1087
+ <path
1088
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1089
+ fillRule="evenodd"
1090
+ strokeWidth="0"
1091
+ />
1092
+ </svg>
1093
+ </div>
1094
+ <div
1095
+ className="c7 c8"
1096
+ >
1097
+ <div
1098
+ className="c9"
1099
+ style={
1100
+ Object {
1101
+ "--main-content-flex-direction": "row",
1102
+ }
1103
+ }
1104
+ >
1105
+ <span
1106
+ className=""
1107
+ id="react-aria-19"
1108
+ >
1109
+ twentyone
1110
+ </span>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ <div
1115
+ aria-labelledby="react-aria-21"
1116
+ className="c3 c4"
1117
+ onClick={[Function]}
1118
+ onKeyPress={[Function]}
1119
+ tabIndex={-1}
1120
+ >
1121
+ <div
1122
+ className="c10"
1123
+ >
1124
+ <svg
1125
+ aria-hidden="true"
1126
+ className="octicon octicon-plus"
1127
+ dangerouslySetInnerHTML={
1128
+ Object {
1129
+ "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 110 1.5H8.5v4.25a.75.75 0 11-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z\\"></path>",
1130
+ }
1131
+ }
1132
+ fill="currentColor"
1133
+ height={16}
1134
+ role="img"
1135
+ style={
1136
+ Object {
1137
+ "display": "inline-block",
1138
+ "overflow": "visible",
1139
+ "userSelect": "none",
1140
+ "verticalAlign": "text-bottom",
1141
+ }
1142
+ }
1143
+ viewBox="0 0 16 16"
1144
+ width={16}
1145
+ />
1146
+ </div>
1147
+ <div
1148
+ className="c7 c8"
1149
+ >
1150
+ <div
1151
+ className="c9"
1152
+ style={
1153
+ Object {
1154
+ "--main-content-flex-direction": "row",
1155
+ }
1156
+ }
1157
+ >
1158
+ <span
1159
+ className=""
1160
+ id="react-aria-21"
1161
+ >
1162
+ Add new item
1163
+ </span>
1164
+ </div>
1165
+ </div>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+ </div>
1170
+ </div>,
1171
+ ]
1172
+ `;
1173
+
1174
+ exports[`Autocomplete snapshots renders a multiselect input 1`] = `
1175
+ Array [
1176
+ .c1 {
1177
+ border: 0;
1178
+ font-size: inherit;
1179
+ font-family: inherit;
1180
+ background-color: transparent;
1181
+ -webkit-appearance: none;
1182
+ color: inherit;
1183
+ width: 100%;
1184
+ }
1185
+
1186
+ .c1:focus {
1187
+ outline: 0;
1188
+ }
1189
+
1190
+ .c0 {
1191
+ display: -webkit-inline-box;
1192
+ display: -webkit-inline-flex;
1193
+ display: -ms-inline-flexbox;
1194
+ display: inline-flex;
1195
+ -webkit-align-items: stretch;
1196
+ -webkit-box-align: stretch;
1197
+ -ms-flex-align: stretch;
1198
+ align-items: stretch;
1199
+ min-height: 34px;
1200
+ font-size: 14px;
1201
+ line-height: 20px;
1202
+ color: #24292f;
1203
+ vertical-align: middle;
1204
+ background-repeat: no-repeat;
1205
+ background-position: right 8px center;
1206
+ border: 1px solid #d0d7de;
1207
+ border-radius: 6px;
1208
+ outline: none;
1209
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
1210
+ cursor: text;
1211
+ padding: 6px 12px;
1212
+ }
1213
+
1214
+ .c0 .TextInput-icon {
1215
+ -webkit-align-self: center;
1216
+ -ms-flex-item-align: center;
1217
+ align-self: center;
1218
+ color: #57606a;
1219
+ margin: 0 8px;
1220
+ -webkit-flex-shrink: 0;
1221
+ -ms-flex-negative: 0;
1222
+ flex-shrink: 0;
1223
+ }
1224
+
1225
+ .c0:focus-within {
1226
+ border-color: #0969da;
1227
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
1228
+ }
1229
+
1230
+ @media (min-width:768px) {
1231
+ .c0 {
1232
+ font-size: 14px;
1233
+ }
1234
+ }
1235
+
1236
+ <span
1237
+ className="c0 TextInput-wrapper"
1238
+ >
1239
+ <input
1240
+ aria-autocomplete="both"
1241
+ aria-controls="autocompleteId-listbox"
1242
+ aria-expanded={false}
1243
+ aria-haspopup="listbox"
1244
+ aria-owns="autocompleteId-listbox"
1245
+ className="c1"
1246
+ onBlur={[Function]}
1247
+ onChange={[Function]}
1248
+ onFocus={[Function]}
1249
+ onKeyDown={[Function]}
1250
+ onKeyPress={[Function]}
1251
+ onKeyUp={[Function]}
1252
+ role="combobox"
1253
+ type="text"
1254
+ />
1255
+ </span>,
1256
+ .c0 {
1257
+ position: absolute;
1258
+ width: 1px;
1259
+ height: 1px;
1260
+ padding: 0;
1261
+ margin: -1px;
1262
+ overflow: hidden;
1263
+ -webkit-clip: rect(0,0,0,0);
1264
+ clip: rect(0,0,0,0);
1265
+ white-space: nowrap;
1266
+ border-width: 0;
1267
+ }
1268
+
1269
+ .c2 {
1270
+ margin-top: 8px;
1271
+ margin-bottom: 8px;
1272
+ }
1273
+
1274
+ .c8 {
1275
+ display: -webkit-box;
1276
+ display: -webkit-flex;
1277
+ display: -ms-flexbox;
1278
+ display: flex;
1279
+ min-width: 0;
1280
+ position: relative;
1281
+ -webkit-box-flex: 1;
1282
+ -webkit-flex-grow: 1;
1283
+ -ms-flex-positive: 1;
1284
+ flex-grow: 1;
1285
+ }
1286
+
1287
+ .c9 {
1288
+ -webkit-align-items: baseline;
1289
+ -webkit-box-align: baseline;
1290
+ -ms-flex-align: baseline;
1291
+ align-items: baseline;
1292
+ display: -webkit-box;
1293
+ display: -webkit-flex;
1294
+ display: -ms-flexbox;
1295
+ display: flex;
1296
+ min-width: 0;
1297
+ -webkit-flex-direction: var(--main-content-flex-direction);
1298
+ -ms-flex-direction: var(--main-content-flex-direction);
1299
+ flex-direction: var(--main-content-flex-direction);
1300
+ -webkit-box-flex: 1;
1301
+ -webkit-flex-grow: 1;
1302
+ -ms-flex-positive: 1;
1303
+ flex-grow: 1;
1304
+ }
1305
+
1306
+ .c4 {
1307
+ padding: 6px 8px;
1308
+ display: -webkit-box;
1309
+ display: -webkit-flex;
1310
+ display: -ms-flexbox;
1311
+ display: flex;
1312
+ border-radius: 6px;
1313
+ color: #24292f;
1314
+ -webkit-transition: background 33.333ms linear;
1315
+ transition: background 33.333ms linear;
1316
+ -webkit-text-decoration: none;
1317
+ text-decoration: none;
1318
+ margin-left: 8px;
1319
+ margin-right: 8px;
1320
+ }
1321
+
1322
+ .c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) {
1323
+ margin-top: 0;
1324
+ }
1325
+
1326
+ .c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) .c7::before {
1327
+ content: ' ';
1328
+ display: block;
1329
+ position: absolute;
1330
+ width: 100%;
1331
+ top: -7px;
1332
+ border: 0 solid hsla(210,18%,87%,1);
1333
+ border-top-width: 0;
1334
+ }
1335
+
1336
+ .c4:hover .c7::before,
1337
+ .c4:hover + * .c7::before {
1338
+ border-color: var(--item-hover-divider-border-color-override,transparent) !important;
1339
+ }
1340
+
1341
+ .c4:focus .c7::before,
1342
+ .c4:focus + * .c7::before,
1343
+ .c4[data-is-active-descendant] .c7::before,
1344
+ [data-is-active-descendant] + .c4 .c7::before {
1345
+ border-color: transparent !important;
1346
+ }
1347
+
1348
+ .c4[data-is-active-descendant='activated-directly'] {
1349
+ background: rgba(208,215,222,0.48);
1350
+ }
1351
+
1352
+ .c4[data-is-active-descendant='activated-indirectly'] {
1353
+ background: rgba(208,215,222,0.32);
1354
+ }
1355
+
1356
+ .c4:focus {
1357
+ background: rgba(208,215,222,0.48);
1358
+ outline: none;
1359
+ }
1360
+
1361
+ .c4:active {
1362
+ background: rgba(208,215,222,0.48);
1363
+ }
1364
+
1365
+ .c5 {
1366
+ height: 20px;
1367
+ width: 16px;
1368
+ margin-right: 8px;
1369
+ display: -webkit-box;
1370
+ display: -webkit-flex;
1371
+ display: -ms-flexbox;
1372
+ display: flex;
1373
+ -webkit-box-pack: center;
1374
+ -webkit-justify-content: center;
1375
+ -ms-flex-pack: center;
1376
+ justify-content: center;
1377
+ -webkit-align-items: center;
1378
+ -webkit-box-align: center;
1379
+ -ms-flex-align: center;
1380
+ align-items: center;
1381
+ -webkit-flex-shrink: 0;
1382
+ -ms-flex-negative: 0;
1383
+ flex-shrink: 0;
1384
+ }
1385
+
1386
+ .c6 rect {
1387
+ fill: #ffffff;
1388
+ stroke: #d0d7de;
1389
+ }
1390
+
1391
+ .c6 path {
1392
+ fill: #ffffff;
1393
+ opacity: 0;
1394
+ }
1395
+
1396
+ .c1 {
1397
+ font-size: 14px;
1398
+ line-height: 20px;
1399
+ }
1400
+
1401
+ .c1[data-has-active-descendant],
1402
+ .c1:focus-within {
1403
+ --item-hover-bg-override: none;
1404
+ --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
1405
+ }
1406
+
1407
+ @media (hover:hover) and (pointer:fine) {
1408
+ .c4:hover {
1409
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
1410
+ cursor: pointer;
1411
+ }
1412
+ }
1413
+
1414
+ <div
1415
+ className="c0"
1416
+ >
1417
+ <div>
1418
+ <div
1419
+ aria-labelledby="labelId"
1420
+ className="c1"
1421
+ id="autocompleteId-listbox"
1422
+ role="listbox"
1423
+ >
1424
+ <div
1425
+ className="c2"
1426
+ >
1427
+ <div
1428
+ aria-labelledby="react-aria-1"
1429
+ aria-selected={false}
1430
+ className="c3 c4"
1431
+ data-id={0}
1432
+ onClick={[Function]}
1433
+ onKeyPress={[Function]}
1434
+ role="option"
1435
+ tabIndex={-1}
1436
+ >
1437
+ <div
1438
+ className="c5"
1439
+ >
1440
+ <svg
1441
+ aria-hidden="true"
1442
+ className="c6"
1443
+ height="16"
1444
+ selected={false}
1445
+ viewBox="0 0 16 16"
1446
+ width="16"
1447
+ xmlns="http://www.w3.org/2000/svg"
1448
+ >
1449
+ <rect
1450
+ height="12"
1451
+ rx="4"
1452
+ width="12"
1453
+ x="2"
1454
+ y="2"
1455
+ />
1456
+ <path
1457
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1458
+ fillRule="evenodd"
1459
+ strokeWidth="0"
1460
+ />
1461
+ </svg>
1462
+ </div>
1463
+ <div
1464
+ className="c7 c8"
1465
+ >
1466
+ <div
1467
+ className="c9"
1468
+ style={
1469
+ Object {
1470
+ "--main-content-flex-direction": "row",
1471
+ }
1472
+ }
1473
+ >
1474
+ <span
1475
+ className=""
1476
+ id="react-aria-1"
1477
+ >
1478
+ zero
1479
+ </span>
1480
+ </div>
1481
+ </div>
1482
+ </div>
1483
+ <div
1484
+ aria-labelledby="react-aria-3"
1485
+ aria-selected={false}
1486
+ className="c3 c4"
1487
+ data-id={1}
1488
+ onClick={[Function]}
1489
+ onKeyPress={[Function]}
1490
+ role="option"
1491
+ tabIndex={-1}
1492
+ >
1493
+ <div
1494
+ className="c5"
1495
+ >
1496
+ <svg
1497
+ aria-hidden="true"
1498
+ className="c6"
1499
+ height="16"
1500
+ selected={false}
1501
+ viewBox="0 0 16 16"
1502
+ width="16"
1503
+ xmlns="http://www.w3.org/2000/svg"
1504
+ >
1505
+ <rect
1506
+ height="12"
1507
+ rx="4"
1508
+ width="12"
1509
+ x="2"
1510
+ y="2"
1511
+ />
1512
+ <path
1513
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1514
+ fillRule="evenodd"
1515
+ strokeWidth="0"
1516
+ />
1517
+ </svg>
1518
+ </div>
1519
+ <div
1520
+ className="c7 c8"
1521
+ >
1522
+ <div
1523
+ className="c9"
1524
+ style={
1525
+ Object {
1526
+ "--main-content-flex-direction": "row",
1527
+ }
1528
+ }
1529
+ >
1530
+ <span
1531
+ className=""
1532
+ id="react-aria-3"
1533
+ >
1534
+ one
1535
+ </span>
1536
+ </div>
1537
+ </div>
1538
+ </div>
1539
+ <div
1540
+ aria-labelledby="react-aria-5"
1541
+ aria-selected={false}
1542
+ className="c3 c4"
1543
+ data-id={2}
1544
+ onClick={[Function]}
1545
+ onKeyPress={[Function]}
1546
+ role="option"
1547
+ tabIndex={-1}
1548
+ >
1549
+ <div
1550
+ className="c5"
1551
+ >
1552
+ <svg
1553
+ aria-hidden="true"
1554
+ className="c6"
1555
+ height="16"
1556
+ selected={false}
1557
+ viewBox="0 0 16 16"
1558
+ width="16"
1559
+ xmlns="http://www.w3.org/2000/svg"
1560
+ >
1561
+ <rect
1562
+ height="12"
1563
+ rx="4"
1564
+ width="12"
1565
+ x="2"
1566
+ y="2"
1567
+ />
1568
+ <path
1569
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1570
+ fillRule="evenodd"
1571
+ strokeWidth="0"
1572
+ />
1573
+ </svg>
1574
+ </div>
1575
+ <div
1576
+ className="c7 c8"
1577
+ >
1578
+ <div
1579
+ className="c9"
1580
+ style={
1581
+ Object {
1582
+ "--main-content-flex-direction": "row",
1583
+ }
1584
+ }
1585
+ >
1586
+ <span
1587
+ className=""
1588
+ id="react-aria-5"
1589
+ >
1590
+ two
1591
+ </span>
1592
+ </div>
1593
+ </div>
1594
+ </div>
1595
+ <div
1596
+ aria-labelledby="react-aria-7"
1597
+ aria-selected={false}
1598
+ className="c3 c4"
1599
+ data-id={3}
1600
+ onClick={[Function]}
1601
+ onKeyPress={[Function]}
1602
+ role="option"
1603
+ tabIndex={-1}
1604
+ >
1605
+ <div
1606
+ className="c5"
1607
+ >
1608
+ <svg
1609
+ aria-hidden="true"
1610
+ className="c6"
1611
+ height="16"
1612
+ selected={false}
1613
+ viewBox="0 0 16 16"
1614
+ width="16"
1615
+ xmlns="http://www.w3.org/2000/svg"
1616
+ >
1617
+ <rect
1618
+ height="12"
1619
+ rx="4"
1620
+ width="12"
1621
+ x="2"
1622
+ y="2"
1623
+ />
1624
+ <path
1625
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1626
+ fillRule="evenodd"
1627
+ strokeWidth="0"
1628
+ />
1629
+ </svg>
1630
+ </div>
1631
+ <div
1632
+ className="c7 c8"
1633
+ >
1634
+ <div
1635
+ className="c9"
1636
+ style={
1637
+ Object {
1638
+ "--main-content-flex-direction": "row",
1639
+ }
1640
+ }
1641
+ >
1642
+ <span
1643
+ className=""
1644
+ id="react-aria-7"
1645
+ >
1646
+ three
1647
+ </span>
1648
+ </div>
1649
+ </div>
1650
+ </div>
1651
+ <div
1652
+ aria-labelledby="react-aria-9"
1653
+ aria-selected={false}
1654
+ className="c3 c4"
1655
+ data-id={4}
1656
+ onClick={[Function]}
1657
+ onKeyPress={[Function]}
1658
+ role="option"
1659
+ tabIndex={-1}
1660
+ >
1661
+ <div
1662
+ className="c5"
1663
+ >
1664
+ <svg
1665
+ aria-hidden="true"
1666
+ className="c6"
1667
+ height="16"
1668
+ selected={false}
1669
+ viewBox="0 0 16 16"
1670
+ width="16"
1671
+ xmlns="http://www.w3.org/2000/svg"
1672
+ >
1673
+ <rect
1674
+ height="12"
1675
+ rx="4"
1676
+ width="12"
1677
+ x="2"
1678
+ y="2"
1679
+ />
1680
+ <path
1681
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1682
+ fillRule="evenodd"
1683
+ strokeWidth="0"
1684
+ />
1685
+ </svg>
1686
+ </div>
1687
+ <div
1688
+ className="c7 c8"
1689
+ >
1690
+ <div
1691
+ className="c9"
1692
+ style={
1693
+ Object {
1694
+ "--main-content-flex-direction": "row",
1695
+ }
1696
+ }
1697
+ >
1698
+ <span
1699
+ className=""
1700
+ id="react-aria-9"
1701
+ >
1702
+ four
1703
+ </span>
1704
+ </div>
1705
+ </div>
1706
+ </div>
1707
+ <div
1708
+ aria-labelledby="react-aria-11"
1709
+ aria-selected={false}
1710
+ className="c3 c4"
1711
+ data-id={5}
1712
+ onClick={[Function]}
1713
+ onKeyPress={[Function]}
1714
+ role="option"
1715
+ tabIndex={-1}
1716
+ >
1717
+ <div
1718
+ className="c5"
1719
+ >
1720
+ <svg
1721
+ aria-hidden="true"
1722
+ className="c6"
1723
+ height="16"
1724
+ selected={false}
1725
+ viewBox="0 0 16 16"
1726
+ width="16"
1727
+ xmlns="http://www.w3.org/2000/svg"
1728
+ >
1729
+ <rect
1730
+ height="12"
1731
+ rx="4"
1732
+ width="12"
1733
+ x="2"
1734
+ y="2"
1735
+ />
1736
+ <path
1737
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1738
+ fillRule="evenodd"
1739
+ strokeWidth="0"
1740
+ />
1741
+ </svg>
1742
+ </div>
1743
+ <div
1744
+ className="c7 c8"
1745
+ >
1746
+ <div
1747
+ className="c9"
1748
+ style={
1749
+ Object {
1750
+ "--main-content-flex-direction": "row",
1751
+ }
1752
+ }
1753
+ >
1754
+ <span
1755
+ className=""
1756
+ id="react-aria-11"
1757
+ >
1758
+ five
1759
+ </span>
1760
+ </div>
1761
+ </div>
1762
+ </div>
1763
+ <div
1764
+ aria-labelledby="react-aria-13"
1765
+ aria-selected={false}
1766
+ className="c3 c4"
1767
+ data-id={6}
1768
+ onClick={[Function]}
1769
+ onKeyPress={[Function]}
1770
+ role="option"
1771
+ tabIndex={-1}
1772
+ >
1773
+ <div
1774
+ className="c5"
1775
+ >
1776
+ <svg
1777
+ aria-hidden="true"
1778
+ className="c6"
1779
+ height="16"
1780
+ selected={false}
1781
+ viewBox="0 0 16 16"
1782
+ width="16"
1783
+ xmlns="http://www.w3.org/2000/svg"
1784
+ >
1785
+ <rect
1786
+ height="12"
1787
+ rx="4"
1788
+ width="12"
1789
+ x="2"
1790
+ y="2"
1791
+ />
1792
+ <path
1793
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1794
+ fillRule="evenodd"
1795
+ strokeWidth="0"
1796
+ />
1797
+ </svg>
1798
+ </div>
1799
+ <div
1800
+ className="c7 c8"
1801
+ >
1802
+ <div
1803
+ className="c9"
1804
+ style={
1805
+ Object {
1806
+ "--main-content-flex-direction": "row",
1807
+ }
1808
+ }
1809
+ >
1810
+ <span
1811
+ className=""
1812
+ id="react-aria-13"
1813
+ >
1814
+ six
1815
+ </span>
1816
+ </div>
1817
+ </div>
1818
+ </div>
1819
+ <div
1820
+ aria-labelledby="react-aria-15"
1821
+ aria-selected={false}
1822
+ className="c3 c4"
1823
+ data-id={7}
1824
+ onClick={[Function]}
1825
+ onKeyPress={[Function]}
1826
+ role="option"
1827
+ tabIndex={-1}
1828
+ >
1829
+ <div
1830
+ className="c5"
1831
+ >
1832
+ <svg
1833
+ aria-hidden="true"
1834
+ className="c6"
1835
+ height="16"
1836
+ selected={false}
1837
+ viewBox="0 0 16 16"
1838
+ width="16"
1839
+ xmlns="http://www.w3.org/2000/svg"
1840
+ >
1841
+ <rect
1842
+ height="12"
1843
+ rx="4"
1844
+ width="12"
1845
+ x="2"
1846
+ y="2"
1847
+ />
1848
+ <path
1849
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1850
+ fillRule="evenodd"
1851
+ strokeWidth="0"
1852
+ />
1853
+ </svg>
1854
+ </div>
1855
+ <div
1856
+ className="c7 c8"
1857
+ >
1858
+ <div
1859
+ className="c9"
1860
+ style={
1861
+ Object {
1862
+ "--main-content-flex-direction": "row",
1863
+ }
1864
+ }
1865
+ >
1866
+ <span
1867
+ className=""
1868
+ id="react-aria-15"
1869
+ >
1870
+ seven
1871
+ </span>
1872
+ </div>
1873
+ </div>
1874
+ </div>
1875
+ <div
1876
+ aria-labelledby="react-aria-17"
1877
+ aria-selected={false}
1878
+ className="c3 c4"
1879
+ data-id={20}
1880
+ onClick={[Function]}
1881
+ onKeyPress={[Function]}
1882
+ role="option"
1883
+ tabIndex={-1}
1884
+ >
1885
+ <div
1886
+ className="c5"
1887
+ >
1888
+ <svg
1889
+ aria-hidden="true"
1890
+ className="c6"
1891
+ height="16"
1892
+ selected={false}
1893
+ viewBox="0 0 16 16"
1894
+ width="16"
1895
+ xmlns="http://www.w3.org/2000/svg"
1896
+ >
1897
+ <rect
1898
+ height="12"
1899
+ rx="4"
1900
+ width="12"
1901
+ x="2"
1902
+ y="2"
1903
+ />
1904
+ <path
1905
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1906
+ fillRule="evenodd"
1907
+ strokeWidth="0"
1908
+ />
1909
+ </svg>
1910
+ </div>
1911
+ <div
1912
+ className="c7 c8"
1913
+ >
1914
+ <div
1915
+ className="c9"
1916
+ style={
1917
+ Object {
1918
+ "--main-content-flex-direction": "row",
1919
+ }
1920
+ }
1921
+ >
1922
+ <span
1923
+ className=""
1924
+ id="react-aria-17"
1925
+ >
1926
+ twenty
1927
+ </span>
1928
+ </div>
1929
+ </div>
1930
+ </div>
1931
+ <div
1932
+ aria-labelledby="react-aria-19"
1933
+ aria-selected={false}
1934
+ className="c3 c4"
1935
+ data-id={21}
1936
+ onClick={[Function]}
1937
+ onKeyPress={[Function]}
1938
+ role="option"
1939
+ tabIndex={-1}
1940
+ >
1941
+ <div
1942
+ className="c5"
1943
+ >
1944
+ <svg
1945
+ aria-hidden="true"
1946
+ className="c6"
1947
+ height="16"
1948
+ selected={false}
1949
+ viewBox="0 0 16 16"
1950
+ width="16"
1951
+ xmlns="http://www.w3.org/2000/svg"
1952
+ >
1953
+ <rect
1954
+ height="12"
1955
+ rx="4"
1956
+ width="12"
1957
+ x="2"
1958
+ y="2"
1959
+ />
1960
+ <path
1961
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
1962
+ fillRule="evenodd"
1963
+ strokeWidth="0"
1964
+ />
1965
+ </svg>
1966
+ </div>
1967
+ <div
1968
+ className="c7 c8"
1969
+ >
1970
+ <div
1971
+ className="c9"
1972
+ style={
1973
+ Object {
1974
+ "--main-content-flex-direction": "row",
1975
+ }
1976
+ }
1977
+ >
1978
+ <span
1979
+ className=""
1980
+ id="react-aria-19"
1981
+ >
1982
+ twentyone
1983
+ </span>
1984
+ </div>
1985
+ </div>
1986
+ </div>
1987
+ </div>
1988
+ </div>
1989
+ </div>
1990
+ </div>,
1991
+ ]
1992
+ `;
1993
+
1994
+ exports[`Autocomplete snapshots renders a multiselect input with selected menu items 1`] = `
1995
+ Array [
1996
+ .c1 {
1997
+ border: 0;
1998
+ font-size: inherit;
1999
+ font-family: inherit;
2000
+ background-color: transparent;
2001
+ -webkit-appearance: none;
2002
+ color: inherit;
2003
+ width: 100%;
2004
+ }
2005
+
2006
+ .c1:focus {
2007
+ outline: 0;
2008
+ }
2009
+
2010
+ .c0 {
2011
+ display: -webkit-inline-box;
2012
+ display: -webkit-inline-flex;
2013
+ display: -ms-inline-flexbox;
2014
+ display: inline-flex;
2015
+ -webkit-align-items: stretch;
2016
+ -webkit-box-align: stretch;
2017
+ -ms-flex-align: stretch;
2018
+ align-items: stretch;
2019
+ min-height: 34px;
2020
+ font-size: 14px;
2021
+ line-height: 20px;
2022
+ color: #24292f;
2023
+ vertical-align: middle;
2024
+ background-repeat: no-repeat;
2025
+ background-position: right 8px center;
2026
+ border: 1px solid #d0d7de;
2027
+ border-radius: 6px;
2028
+ outline: none;
2029
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
2030
+ cursor: text;
2031
+ padding: 6px 12px;
2032
+ }
2033
+
2034
+ .c0 .TextInput-icon {
2035
+ -webkit-align-self: center;
2036
+ -ms-flex-item-align: center;
2037
+ align-self: center;
2038
+ color: #57606a;
2039
+ margin: 0 8px;
2040
+ -webkit-flex-shrink: 0;
2041
+ -ms-flex-negative: 0;
2042
+ flex-shrink: 0;
2043
+ }
2044
+
2045
+ .c0:focus-within {
2046
+ border-color: #0969da;
2047
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
2048
+ }
2049
+
2050
+ @media (min-width:768px) {
2051
+ .c0 {
2052
+ font-size: 14px;
2053
+ }
2054
+ }
2055
+
2056
+ <span
2057
+ className="c0 TextInput-wrapper"
2058
+ >
2059
+ <input
2060
+ aria-autocomplete="both"
2061
+ aria-controls="autocompleteId-listbox"
2062
+ aria-expanded={false}
2063
+ aria-haspopup="listbox"
2064
+ aria-owns="autocompleteId-listbox"
2065
+ className="c1"
2066
+ onBlur={[Function]}
2067
+ onChange={[Function]}
2068
+ onFocus={[Function]}
2069
+ onKeyDown={[Function]}
2070
+ onKeyPress={[Function]}
2071
+ onKeyUp={[Function]}
2072
+ role="combobox"
2073
+ type="text"
2074
+ />
2075
+ </span>,
2076
+ .c0 {
2077
+ position: absolute;
2078
+ width: 1px;
2079
+ height: 1px;
2080
+ padding: 0;
2081
+ margin: -1px;
2082
+ overflow: hidden;
2083
+ -webkit-clip: rect(0,0,0,0);
2084
+ clip: rect(0,0,0,0);
2085
+ white-space: nowrap;
2086
+ border-width: 0;
2087
+ }
2088
+
2089
+ .c2 {
2090
+ margin-top: 8px;
2091
+ margin-bottom: 8px;
2092
+ }
2093
+
2094
+ .c8 {
2095
+ display: -webkit-box;
2096
+ display: -webkit-flex;
2097
+ display: -ms-flexbox;
2098
+ display: flex;
2099
+ min-width: 0;
2100
+ position: relative;
2101
+ -webkit-box-flex: 1;
2102
+ -webkit-flex-grow: 1;
2103
+ -ms-flex-positive: 1;
2104
+ flex-grow: 1;
2105
+ }
2106
+
2107
+ .c9 {
2108
+ -webkit-align-items: baseline;
2109
+ -webkit-box-align: baseline;
2110
+ -ms-flex-align: baseline;
2111
+ align-items: baseline;
2112
+ display: -webkit-box;
2113
+ display: -webkit-flex;
2114
+ display: -ms-flexbox;
2115
+ display: flex;
2116
+ min-width: 0;
2117
+ -webkit-flex-direction: var(--main-content-flex-direction);
2118
+ -ms-flex-direction: var(--main-content-flex-direction);
2119
+ flex-direction: var(--main-content-flex-direction);
2120
+ -webkit-box-flex: 1;
2121
+ -webkit-flex-grow: 1;
2122
+ -ms-flex-positive: 1;
2123
+ flex-grow: 1;
2124
+ }
2125
+
2126
+ .c4 {
2127
+ padding: 6px 8px;
2128
+ display: -webkit-box;
2129
+ display: -webkit-flex;
2130
+ display: -ms-flexbox;
2131
+ display: flex;
2132
+ border-radius: 6px;
2133
+ color: #24292f;
2134
+ -webkit-transition: background 33.333ms linear;
2135
+ transition: background 33.333ms linear;
2136
+ -webkit-text-decoration: none;
2137
+ text-decoration: none;
2138
+ margin-left: 8px;
2139
+ margin-right: 8px;
2140
+ }
2141
+
2142
+ .c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
2143
+ margin-top: 0;
2144
+ }
2145
+
2146
+ .c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
2147
+ content: ' ';
2148
+ display: block;
2149
+ position: absolute;
2150
+ width: 100%;
2151
+ top: -7px;
2152
+ border: 0 solid hsla(210,18%,87%,1);
2153
+ border-top-width: 0;
2154
+ }
2155
+
2156
+ .c4:hover .c7::before,
2157
+ .c4:hover + * .c7::before {
2158
+ border-color: var(--item-hover-divider-border-color-override,transparent) !important;
2159
+ }
2160
+
2161
+ .c4:focus .c7::before,
2162
+ .c4:focus + * .c7::before,
2163
+ .c4[data-is-active-descendant] .c7::before,
2164
+ [data-is-active-descendant] + .c4 .c7::before {
2165
+ border-color: transparent !important;
2166
+ }
2167
+
2168
+ .c4[data-is-active-descendant='activated-directly'] {
2169
+ background: rgba(208,215,222,0.48);
2170
+ }
2171
+
2172
+ .c4[data-is-active-descendant='activated-indirectly'] {
2173
+ background: rgba(208,215,222,0.32);
2174
+ }
2175
+
2176
+ .c4:focus {
2177
+ background: rgba(208,215,222,0.48);
2178
+ outline: none;
2179
+ }
2180
+
2181
+ .c4:active {
2182
+ background: rgba(208,215,222,0.48);
2183
+ }
2184
+
2185
+ .c5 {
2186
+ height: 20px;
2187
+ width: 16px;
2188
+ margin-right: 8px;
2189
+ display: -webkit-box;
2190
+ display: -webkit-flex;
2191
+ display: -ms-flexbox;
2192
+ display: flex;
2193
+ -webkit-box-pack: center;
2194
+ -webkit-justify-content: center;
2195
+ -ms-flex-pack: center;
2196
+ justify-content: center;
2197
+ -webkit-align-items: center;
2198
+ -webkit-box-align: center;
2199
+ -ms-flex-align: center;
2200
+ align-items: center;
2201
+ -webkit-flex-shrink: 0;
2202
+ -ms-flex-negative: 0;
2203
+ flex-shrink: 0;
2204
+ }
2205
+
2206
+ .c10 rect {
2207
+ fill: #ffffff;
2208
+ stroke: #d0d7de;
2209
+ }
2210
+
2211
+ .c10 path {
2212
+ fill: #ffffff;
2213
+ opacity: 0;
2214
+ }
2215
+
2216
+ .c6 rect {
2217
+ fill: #0969da;
2218
+ stroke: #0969da;
2219
+ }
2220
+
2221
+ .c6 path {
2222
+ fill: #ffffff;
2223
+ opacity: 1;
2224
+ }
2225
+
2226
+ .c1 {
2227
+ font-size: 14px;
2228
+ line-height: 20px;
2229
+ }
2230
+
2231
+ .c1[data-has-active-descendant],
2232
+ .c1:focus-within {
2233
+ --item-hover-bg-override: none;
2234
+ --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
2235
+ }
2236
+
2237
+ @media (hover:hover) and (pointer:fine) {
2238
+ .c4:hover {
2239
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
2240
+ cursor: pointer;
2241
+ }
2242
+ }
2243
+
2244
+ <div
2245
+ className="c0"
2246
+ >
2247
+ <div>
2248
+ <div
2249
+ aria-labelledby="labelId"
2250
+ className="c1"
2251
+ id="autocompleteId-listbox"
2252
+ role="listbox"
2253
+ >
2254
+ <div
2255
+ className="c2"
2256
+ >
2257
+ <div
2258
+ aria-labelledby="react-aria-1"
2259
+ aria-selected={true}
2260
+ className="c3 c4"
2261
+ data-id={0}
2262
+ onClick={[Function]}
2263
+ onKeyPress={[Function]}
2264
+ role="option"
2265
+ tabIndex={-1}
2266
+ >
2267
+ <div
2268
+ className="c5"
2269
+ >
2270
+ <svg
2271
+ aria-hidden="true"
2272
+ className="c6"
2273
+ height="16"
2274
+ selected={true}
2275
+ viewBox="0 0 16 16"
2276
+ width="16"
2277
+ xmlns="http://www.w3.org/2000/svg"
2278
+ >
2279
+ <rect
2280
+ height="12"
2281
+ rx="4"
2282
+ width="12"
2283
+ x="2"
2284
+ y="2"
2285
+ />
2286
+ <path
2287
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2288
+ fillRule="evenodd"
2289
+ strokeWidth="0"
2290
+ />
2291
+ </svg>
2292
+ </div>
2293
+ <div
2294
+ className="c7 c8"
2295
+ >
2296
+ <div
2297
+ className="c9"
2298
+ style={
2299
+ Object {
2300
+ "--main-content-flex-direction": "row",
2301
+ }
2302
+ }
2303
+ >
2304
+ <span
2305
+ className=""
2306
+ id="react-aria-1"
2307
+ >
2308
+ zero
2309
+ </span>
2310
+ </div>
2311
+ </div>
2312
+ </div>
2313
+ <div
2314
+ aria-labelledby="react-aria-3"
2315
+ aria-selected={true}
2316
+ className="c3 c4"
2317
+ data-id={1}
2318
+ onClick={[Function]}
2319
+ onKeyPress={[Function]}
2320
+ role="option"
2321
+ tabIndex={-1}
2322
+ >
2323
+ <div
2324
+ className="c5"
2325
+ >
2326
+ <svg
2327
+ aria-hidden="true"
2328
+ className="c6"
2329
+ height="16"
2330
+ selected={true}
2331
+ viewBox="0 0 16 16"
2332
+ width="16"
2333
+ xmlns="http://www.w3.org/2000/svg"
2334
+ >
2335
+ <rect
2336
+ height="12"
2337
+ rx="4"
2338
+ width="12"
2339
+ x="2"
2340
+ y="2"
2341
+ />
2342
+ <path
2343
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2344
+ fillRule="evenodd"
2345
+ strokeWidth="0"
2346
+ />
2347
+ </svg>
2348
+ </div>
2349
+ <div
2350
+ className="c7 c8"
2351
+ >
2352
+ <div
2353
+ className="c9"
2354
+ style={
2355
+ Object {
2356
+ "--main-content-flex-direction": "row",
2357
+ }
2358
+ }
2359
+ >
2360
+ <span
2361
+ className=""
2362
+ id="react-aria-3"
2363
+ >
2364
+ one
2365
+ </span>
2366
+ </div>
2367
+ </div>
2368
+ </div>
2369
+ <div
2370
+ aria-labelledby="react-aria-5"
2371
+ aria-selected={true}
2372
+ className="c3 c4"
2373
+ data-id={2}
2374
+ onClick={[Function]}
2375
+ onKeyPress={[Function]}
2376
+ role="option"
2377
+ tabIndex={-1}
2378
+ >
2379
+ <div
2380
+ className="c5"
2381
+ >
2382
+ <svg
2383
+ aria-hidden="true"
2384
+ className="c6"
2385
+ height="16"
2386
+ selected={true}
2387
+ viewBox="0 0 16 16"
2388
+ width="16"
2389
+ xmlns="http://www.w3.org/2000/svg"
2390
+ >
2391
+ <rect
2392
+ height="12"
2393
+ rx="4"
2394
+ width="12"
2395
+ x="2"
2396
+ y="2"
2397
+ />
2398
+ <path
2399
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2400
+ fillRule="evenodd"
2401
+ strokeWidth="0"
2402
+ />
2403
+ </svg>
2404
+ </div>
2405
+ <div
2406
+ className="c7 c8"
2407
+ >
2408
+ <div
2409
+ className="c9"
2410
+ style={
2411
+ Object {
2412
+ "--main-content-flex-direction": "row",
2413
+ }
2414
+ }
2415
+ >
2416
+ <span
2417
+ className=""
2418
+ id="react-aria-5"
2419
+ >
2420
+ two
2421
+ </span>
2422
+ </div>
2423
+ </div>
2424
+ </div>
2425
+ <div
2426
+ aria-labelledby="react-aria-7"
2427
+ aria-selected={false}
2428
+ className="c3 c4"
2429
+ data-id={3}
2430
+ onClick={[Function]}
2431
+ onKeyPress={[Function]}
2432
+ role="option"
2433
+ tabIndex={-1}
2434
+ >
2435
+ <div
2436
+ className="c5"
2437
+ >
2438
+ <svg
2439
+ aria-hidden="true"
2440
+ className="c10"
2441
+ height="16"
2442
+ selected={false}
2443
+ viewBox="0 0 16 16"
2444
+ width="16"
2445
+ xmlns="http://www.w3.org/2000/svg"
2446
+ >
2447
+ <rect
2448
+ height="12"
2449
+ rx="4"
2450
+ width="12"
2451
+ x="2"
2452
+ y="2"
2453
+ />
2454
+ <path
2455
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2456
+ fillRule="evenodd"
2457
+ strokeWidth="0"
2458
+ />
2459
+ </svg>
2460
+ </div>
2461
+ <div
2462
+ className="c7 c8"
2463
+ >
2464
+ <div
2465
+ className="c9"
2466
+ style={
2467
+ Object {
2468
+ "--main-content-flex-direction": "row",
2469
+ }
2470
+ }
2471
+ >
2472
+ <span
2473
+ className=""
2474
+ id="react-aria-7"
2475
+ >
2476
+ three
2477
+ </span>
2478
+ </div>
2479
+ </div>
2480
+ </div>
2481
+ <div
2482
+ aria-labelledby="react-aria-9"
2483
+ aria-selected={false}
2484
+ className="c3 c4"
2485
+ data-id={4}
2486
+ onClick={[Function]}
2487
+ onKeyPress={[Function]}
2488
+ role="option"
2489
+ tabIndex={-1}
2490
+ >
2491
+ <div
2492
+ className="c5"
2493
+ >
2494
+ <svg
2495
+ aria-hidden="true"
2496
+ className="c10"
2497
+ height="16"
2498
+ selected={false}
2499
+ viewBox="0 0 16 16"
2500
+ width="16"
2501
+ xmlns="http://www.w3.org/2000/svg"
2502
+ >
2503
+ <rect
2504
+ height="12"
2505
+ rx="4"
2506
+ width="12"
2507
+ x="2"
2508
+ y="2"
2509
+ />
2510
+ <path
2511
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2512
+ fillRule="evenodd"
2513
+ strokeWidth="0"
2514
+ />
2515
+ </svg>
2516
+ </div>
2517
+ <div
2518
+ className="c7 c8"
2519
+ >
2520
+ <div
2521
+ className="c9"
2522
+ style={
2523
+ Object {
2524
+ "--main-content-flex-direction": "row",
2525
+ }
2526
+ }
2527
+ >
2528
+ <span
2529
+ className=""
2530
+ id="react-aria-9"
2531
+ >
2532
+ four
2533
+ </span>
2534
+ </div>
2535
+ </div>
2536
+ </div>
2537
+ <div
2538
+ aria-labelledby="react-aria-11"
2539
+ aria-selected={false}
2540
+ className="c3 c4"
2541
+ data-id={5}
2542
+ onClick={[Function]}
2543
+ onKeyPress={[Function]}
2544
+ role="option"
2545
+ tabIndex={-1}
2546
+ >
2547
+ <div
2548
+ className="c5"
2549
+ >
2550
+ <svg
2551
+ aria-hidden="true"
2552
+ className="c10"
2553
+ height="16"
2554
+ selected={false}
2555
+ viewBox="0 0 16 16"
2556
+ width="16"
2557
+ xmlns="http://www.w3.org/2000/svg"
2558
+ >
2559
+ <rect
2560
+ height="12"
2561
+ rx="4"
2562
+ width="12"
2563
+ x="2"
2564
+ y="2"
2565
+ />
2566
+ <path
2567
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2568
+ fillRule="evenodd"
2569
+ strokeWidth="0"
2570
+ />
2571
+ </svg>
2572
+ </div>
2573
+ <div
2574
+ className="c7 c8"
2575
+ >
2576
+ <div
2577
+ className="c9"
2578
+ style={
2579
+ Object {
2580
+ "--main-content-flex-direction": "row",
2581
+ }
2582
+ }
2583
+ >
2584
+ <span
2585
+ className=""
2586
+ id="react-aria-11"
2587
+ >
2588
+ five
2589
+ </span>
2590
+ </div>
2591
+ </div>
2592
+ </div>
2593
+ <div
2594
+ aria-labelledby="react-aria-13"
2595
+ aria-selected={false}
2596
+ className="c3 c4"
2597
+ data-id={6}
2598
+ onClick={[Function]}
2599
+ onKeyPress={[Function]}
2600
+ role="option"
2601
+ tabIndex={-1}
2602
+ >
2603
+ <div
2604
+ className="c5"
2605
+ >
2606
+ <svg
2607
+ aria-hidden="true"
2608
+ className="c10"
2609
+ height="16"
2610
+ selected={false}
2611
+ viewBox="0 0 16 16"
2612
+ width="16"
2613
+ xmlns="http://www.w3.org/2000/svg"
2614
+ >
2615
+ <rect
2616
+ height="12"
2617
+ rx="4"
2618
+ width="12"
2619
+ x="2"
2620
+ y="2"
2621
+ />
2622
+ <path
2623
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2624
+ fillRule="evenodd"
2625
+ strokeWidth="0"
2626
+ />
2627
+ </svg>
2628
+ </div>
2629
+ <div
2630
+ className="c7 c8"
2631
+ >
2632
+ <div
2633
+ className="c9"
2634
+ style={
2635
+ Object {
2636
+ "--main-content-flex-direction": "row",
2637
+ }
2638
+ }
2639
+ >
2640
+ <span
2641
+ className=""
2642
+ id="react-aria-13"
2643
+ >
2644
+ six
2645
+ </span>
2646
+ </div>
2647
+ </div>
2648
+ </div>
2649
+ <div
2650
+ aria-labelledby="react-aria-15"
2651
+ aria-selected={false}
2652
+ className="c3 c4"
2653
+ data-id={7}
2654
+ onClick={[Function]}
2655
+ onKeyPress={[Function]}
2656
+ role="option"
2657
+ tabIndex={-1}
2658
+ >
2659
+ <div
2660
+ className="c5"
2661
+ >
2662
+ <svg
2663
+ aria-hidden="true"
2664
+ className="c10"
2665
+ height="16"
2666
+ selected={false}
2667
+ viewBox="0 0 16 16"
2668
+ width="16"
2669
+ xmlns="http://www.w3.org/2000/svg"
2670
+ >
2671
+ <rect
2672
+ height="12"
2673
+ rx="4"
2674
+ width="12"
2675
+ x="2"
2676
+ y="2"
2677
+ />
2678
+ <path
2679
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2680
+ fillRule="evenodd"
2681
+ strokeWidth="0"
2682
+ />
2683
+ </svg>
2684
+ </div>
2685
+ <div
2686
+ className="c7 c8"
2687
+ >
2688
+ <div
2689
+ className="c9"
2690
+ style={
2691
+ Object {
2692
+ "--main-content-flex-direction": "row",
2693
+ }
2694
+ }
2695
+ >
2696
+ <span
2697
+ className=""
2698
+ id="react-aria-15"
2699
+ >
2700
+ seven
2701
+ </span>
2702
+ </div>
2703
+ </div>
2704
+ </div>
2705
+ <div
2706
+ aria-labelledby="react-aria-17"
2707
+ aria-selected={false}
2708
+ className="c3 c4"
2709
+ data-id={20}
2710
+ onClick={[Function]}
2711
+ onKeyPress={[Function]}
2712
+ role="option"
2713
+ tabIndex={-1}
2714
+ >
2715
+ <div
2716
+ className="c5"
2717
+ >
2718
+ <svg
2719
+ aria-hidden="true"
2720
+ className="c10"
2721
+ height="16"
2722
+ selected={false}
2723
+ viewBox="0 0 16 16"
2724
+ width="16"
2725
+ xmlns="http://www.w3.org/2000/svg"
2726
+ >
2727
+ <rect
2728
+ height="12"
2729
+ rx="4"
2730
+ width="12"
2731
+ x="2"
2732
+ y="2"
2733
+ />
2734
+ <path
2735
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2736
+ fillRule="evenodd"
2737
+ strokeWidth="0"
2738
+ />
2739
+ </svg>
2740
+ </div>
2741
+ <div
2742
+ className="c7 c8"
2743
+ >
2744
+ <div
2745
+ className="c9"
2746
+ style={
2747
+ Object {
2748
+ "--main-content-flex-direction": "row",
2749
+ }
2750
+ }
2751
+ >
2752
+ <span
2753
+ className=""
2754
+ id="react-aria-17"
2755
+ >
2756
+ twenty
2757
+ </span>
2758
+ </div>
2759
+ </div>
2760
+ </div>
2761
+ <div
2762
+ aria-labelledby="react-aria-19"
2763
+ aria-selected={false}
2764
+ className="c3 c4"
2765
+ data-id={21}
2766
+ onClick={[Function]}
2767
+ onKeyPress={[Function]}
2768
+ role="option"
2769
+ tabIndex={-1}
2770
+ >
2771
+ <div
2772
+ className="c5"
2773
+ >
2774
+ <svg
2775
+ aria-hidden="true"
2776
+ className="c10"
2777
+ height="16"
2778
+ selected={false}
2779
+ viewBox="0 0 16 16"
2780
+ width="16"
2781
+ xmlns="http://www.w3.org/2000/svg"
2782
+ >
2783
+ <rect
2784
+ height="12"
2785
+ rx="4"
2786
+ width="12"
2787
+ x="2"
2788
+ y="2"
2789
+ />
2790
+ <path
2791
+ d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
2792
+ fillRule="evenodd"
2793
+ strokeWidth="0"
2794
+ />
2795
+ </svg>
2796
+ </div>
2797
+ <div
2798
+ className="c7 c8"
2799
+ >
2800
+ <div
2801
+ className="c9"
2802
+ style={
2803
+ Object {
2804
+ "--main-content-flex-direction": "row",
2805
+ }
2806
+ }
2807
+ >
2808
+ <span
2809
+ className=""
2810
+ id="react-aria-19"
2811
+ >
2812
+ twentyone
2813
+ </span>
2814
+ </div>
2815
+ </div>
2816
+ </div>
2817
+ </div>
2818
+ </div>
2819
+ </div>
2820
+ </div>,
2821
+ ]
2822
+ `;
2823
+
2824
+ exports[`Autocomplete snapshots renders a single select input 1`] = `
2825
+ Array [
2826
+ .c1 {
2827
+ border: 0;
2828
+ font-size: inherit;
2829
+ font-family: inherit;
2830
+ background-color: transparent;
2831
+ -webkit-appearance: none;
2832
+ color: inherit;
2833
+ width: 100%;
2834
+ }
2835
+
2836
+ .c1:focus {
2837
+ outline: 0;
2838
+ }
2839
+
2840
+ .c0 {
2841
+ display: -webkit-inline-box;
2842
+ display: -webkit-inline-flex;
2843
+ display: -ms-inline-flexbox;
2844
+ display: inline-flex;
2845
+ -webkit-align-items: stretch;
2846
+ -webkit-box-align: stretch;
2847
+ -ms-flex-align: stretch;
2848
+ align-items: stretch;
2849
+ min-height: 34px;
2850
+ font-size: 14px;
2851
+ line-height: 20px;
2852
+ color: #24292f;
2853
+ vertical-align: middle;
2854
+ background-repeat: no-repeat;
2855
+ background-position: right 8px center;
2856
+ border: 1px solid #d0d7de;
2857
+ border-radius: 6px;
2858
+ outline: none;
2859
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
2860
+ cursor: text;
2861
+ padding: 6px 12px;
2862
+ }
2863
+
2864
+ .c0 .TextInput-icon {
2865
+ -webkit-align-self: center;
2866
+ -ms-flex-item-align: center;
2867
+ align-self: center;
2868
+ color: #57606a;
2869
+ margin: 0 8px;
2870
+ -webkit-flex-shrink: 0;
2871
+ -ms-flex-negative: 0;
2872
+ flex-shrink: 0;
2873
+ }
2874
+
2875
+ .c0:focus-within {
2876
+ border-color: #0969da;
2877
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
2878
+ }
2879
+
2880
+ @media (min-width:768px) {
2881
+ .c0 {
2882
+ font-size: 14px;
2883
+ }
2884
+ }
2885
+
2886
+ <span
2887
+ className="c0 TextInput-wrapper"
2888
+ >
2889
+ <input
2890
+ aria-autocomplete="both"
2891
+ aria-controls="autocompleteId-listbox"
2892
+ aria-expanded={false}
2893
+ aria-haspopup="listbox"
2894
+ aria-owns="autocompleteId-listbox"
2895
+ className="c1"
2896
+ onBlur={[Function]}
2897
+ onChange={[Function]}
2898
+ onFocus={[Function]}
2899
+ onKeyDown={[Function]}
2900
+ onKeyPress={[Function]}
2901
+ onKeyUp={[Function]}
2902
+ role="combobox"
2903
+ type="text"
2904
+ />
2905
+ </span>,
2906
+ .c0 {
2907
+ position: absolute;
2908
+ width: 1px;
2909
+ height: 1px;
2910
+ padding: 0;
2911
+ margin: -1px;
2912
+ overflow: hidden;
2913
+ -webkit-clip: rect(0,0,0,0);
2914
+ clip: rect(0,0,0,0);
2915
+ white-space: nowrap;
2916
+ border-width: 0;
2917
+ }
2918
+
2919
+ .c2 {
2920
+ margin-top: 8px;
2921
+ margin-bottom: 8px;
2922
+ }
2923
+
2924
+ .c6 {
2925
+ display: -webkit-box;
2926
+ display: -webkit-flex;
2927
+ display: -ms-flexbox;
2928
+ display: flex;
2929
+ min-width: 0;
2930
+ position: relative;
2931
+ -webkit-box-flex: 1;
2932
+ -webkit-flex-grow: 1;
2933
+ -ms-flex-positive: 1;
2934
+ flex-grow: 1;
2935
+ }
2936
+
2937
+ .c7 {
2938
+ -webkit-align-items: baseline;
2939
+ -webkit-box-align: baseline;
2940
+ -ms-flex-align: baseline;
2941
+ align-items: baseline;
2942
+ display: -webkit-box;
2943
+ display: -webkit-flex;
2944
+ display: -ms-flexbox;
2945
+ display: flex;
2946
+ min-width: 0;
2947
+ -webkit-flex-direction: var(--main-content-flex-direction);
2948
+ -ms-flex-direction: var(--main-content-flex-direction);
2949
+ flex-direction: var(--main-content-flex-direction);
2950
+ -webkit-box-flex: 1;
2951
+ -webkit-flex-grow: 1;
2952
+ -ms-flex-positive: 1;
2953
+ flex-grow: 1;
2954
+ }
2955
+
2956
+ .c4 {
2957
+ padding: 6px 8px;
2958
+ display: -webkit-box;
2959
+ display: -webkit-flex;
2960
+ display: -ms-flexbox;
2961
+ display: flex;
2962
+ border-radius: 6px;
2963
+ color: #24292f;
2964
+ -webkit-transition: background 33.333ms linear;
2965
+ transition: background 33.333ms linear;
2966
+ -webkit-text-decoration: none;
2967
+ text-decoration: none;
2968
+ margin-left: 8px;
2969
+ margin-right: 8px;
2970
+ }
2971
+
2972
+ .c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
2973
+ margin-top: 0;
2974
+ }
2975
+
2976
+ .c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
2977
+ content: ' ';
2978
+ display: block;
2979
+ position: absolute;
2980
+ width: 100%;
2981
+ top: -7px;
2982
+ border: 0 solid hsla(210,18%,87%,1);
2983
+ border-top-width: 0;
2984
+ }
2985
+
2986
+ .c4:hover .c5::before,
2987
+ .c4:hover + * .c5::before {
2988
+ border-color: var(--item-hover-divider-border-color-override,transparent) !important;
2989
+ }
2990
+
2991
+ .c4:focus .c5::before,
2992
+ .c4:focus + * .c5::before,
2993
+ .c4[data-is-active-descendant] .c5::before,
2994
+ [data-is-active-descendant] + .c4 .c5::before {
2995
+ border-color: transparent !important;
2996
+ }
2997
+
2998
+ .c4[data-is-active-descendant='activated-directly'] {
2999
+ background: rgba(208,215,222,0.48);
3000
+ }
3001
+
3002
+ .c4[data-is-active-descendant='activated-indirectly'] {
3003
+ background: rgba(208,215,222,0.32);
3004
+ }
3005
+
3006
+ .c4:focus {
3007
+ background: rgba(208,215,222,0.48);
3008
+ outline: none;
3009
+ }
3010
+
3011
+ .c4:active {
3012
+ background: rgba(208,215,222,0.48);
3013
+ }
3014
+
3015
+ .c1 {
3016
+ font-size: 14px;
3017
+ line-height: 20px;
3018
+ }
3019
+
3020
+ .c1[data-has-active-descendant],
3021
+ .c1:focus-within {
3022
+ --item-hover-bg-override: none;
3023
+ --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
3024
+ }
3025
+
3026
+ @media (hover:hover) and (pointer:fine) {
3027
+ .c4:hover {
3028
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
3029
+ cursor: pointer;
3030
+ }
3031
+ }
3032
+
3033
+ <div
3034
+ className="c0"
3035
+ >
3036
+ <div>
3037
+ <div
3038
+ aria-labelledby="labelId"
3039
+ className="c1"
3040
+ id="autocompleteId-listbox"
3041
+ role="listbox"
3042
+ >
3043
+ <div
3044
+ className="c2"
3045
+ >
3046
+ <div
3047
+ aria-labelledby="react-aria-1"
3048
+ className="c3 c4"
3049
+ data-id={0}
3050
+ onClick={[Function]}
3051
+ onKeyPress={[Function]}
3052
+ role="option"
3053
+ tabIndex={-1}
3054
+ >
3055
+ <div
3056
+ className="c5 c6"
3057
+ >
3058
+ <div
3059
+ className="c7"
3060
+ style={
3061
+ Object {
3062
+ "--main-content-flex-direction": "row",
3063
+ }
3064
+ }
3065
+ >
3066
+ <span
3067
+ className=""
3068
+ id="react-aria-1"
3069
+ >
3070
+ zero
3071
+ </span>
3072
+ </div>
3073
+ </div>
3074
+ </div>
3075
+ <div
3076
+ aria-labelledby="react-aria-3"
3077
+ className="c3 c4"
3078
+ data-id={1}
3079
+ onClick={[Function]}
3080
+ onKeyPress={[Function]}
3081
+ role="option"
3082
+ tabIndex={-1}
3083
+ >
3084
+ <div
3085
+ className="c5 c6"
3086
+ >
3087
+ <div
3088
+ className="c7"
3089
+ style={
3090
+ Object {
3091
+ "--main-content-flex-direction": "row",
3092
+ }
3093
+ }
3094
+ >
3095
+ <span
3096
+ className=""
3097
+ id="react-aria-3"
3098
+ >
3099
+ one
3100
+ </span>
3101
+ </div>
3102
+ </div>
3103
+ </div>
3104
+ <div
3105
+ aria-labelledby="react-aria-5"
3106
+ className="c3 c4"
3107
+ data-id={2}
3108
+ onClick={[Function]}
3109
+ onKeyPress={[Function]}
3110
+ role="option"
3111
+ tabIndex={-1}
3112
+ >
3113
+ <div
3114
+ className="c5 c6"
3115
+ >
3116
+ <div
3117
+ className="c7"
3118
+ style={
3119
+ Object {
3120
+ "--main-content-flex-direction": "row",
3121
+ }
3122
+ }
3123
+ >
3124
+ <span
3125
+ className=""
3126
+ id="react-aria-5"
3127
+ >
3128
+ two
3129
+ </span>
3130
+ </div>
3131
+ </div>
3132
+ </div>
3133
+ <div
3134
+ aria-labelledby="react-aria-7"
3135
+ className="c3 c4"
3136
+ data-id={3}
3137
+ onClick={[Function]}
3138
+ onKeyPress={[Function]}
3139
+ role="option"
3140
+ tabIndex={-1}
3141
+ >
3142
+ <div
3143
+ className="c5 c6"
3144
+ >
3145
+ <div
3146
+ className="c7"
3147
+ style={
3148
+ Object {
3149
+ "--main-content-flex-direction": "row",
3150
+ }
3151
+ }
3152
+ >
3153
+ <span
3154
+ className=""
3155
+ id="react-aria-7"
3156
+ >
3157
+ three
3158
+ </span>
3159
+ </div>
3160
+ </div>
3161
+ </div>
3162
+ <div
3163
+ aria-labelledby="react-aria-9"
3164
+ className="c3 c4"
3165
+ data-id={4}
3166
+ onClick={[Function]}
3167
+ onKeyPress={[Function]}
3168
+ role="option"
3169
+ tabIndex={-1}
3170
+ >
3171
+ <div
3172
+ className="c5 c6"
3173
+ >
3174
+ <div
3175
+ className="c7"
3176
+ style={
3177
+ Object {
3178
+ "--main-content-flex-direction": "row",
3179
+ }
3180
+ }
3181
+ >
3182
+ <span
3183
+ className=""
3184
+ id="react-aria-9"
3185
+ >
3186
+ four
3187
+ </span>
3188
+ </div>
3189
+ </div>
3190
+ </div>
3191
+ <div
3192
+ aria-labelledby="react-aria-11"
3193
+ className="c3 c4"
3194
+ data-id={5}
3195
+ onClick={[Function]}
3196
+ onKeyPress={[Function]}
3197
+ role="option"
3198
+ tabIndex={-1}
3199
+ >
3200
+ <div
3201
+ className="c5 c6"
3202
+ >
3203
+ <div
3204
+ className="c7"
3205
+ style={
3206
+ Object {
3207
+ "--main-content-flex-direction": "row",
3208
+ }
3209
+ }
3210
+ >
3211
+ <span
3212
+ className=""
3213
+ id="react-aria-11"
3214
+ >
3215
+ five
3216
+ </span>
3217
+ </div>
3218
+ </div>
3219
+ </div>
3220
+ <div
3221
+ aria-labelledby="react-aria-13"
3222
+ className="c3 c4"
3223
+ data-id={6}
3224
+ onClick={[Function]}
3225
+ onKeyPress={[Function]}
3226
+ role="option"
3227
+ tabIndex={-1}
3228
+ >
3229
+ <div
3230
+ className="c5 c6"
3231
+ >
3232
+ <div
3233
+ className="c7"
3234
+ style={
3235
+ Object {
3236
+ "--main-content-flex-direction": "row",
3237
+ }
3238
+ }
3239
+ >
3240
+ <span
3241
+ className=""
3242
+ id="react-aria-13"
3243
+ >
3244
+ six
3245
+ </span>
3246
+ </div>
3247
+ </div>
3248
+ </div>
3249
+ <div
3250
+ aria-labelledby="react-aria-15"
3251
+ className="c3 c4"
3252
+ data-id={7}
3253
+ onClick={[Function]}
3254
+ onKeyPress={[Function]}
3255
+ role="option"
3256
+ tabIndex={-1}
3257
+ >
3258
+ <div
3259
+ className="c5 c6"
3260
+ >
3261
+ <div
3262
+ className="c7"
3263
+ style={
3264
+ Object {
3265
+ "--main-content-flex-direction": "row",
3266
+ }
3267
+ }
3268
+ >
3269
+ <span
3270
+ className=""
3271
+ id="react-aria-15"
3272
+ >
3273
+ seven
3274
+ </span>
3275
+ </div>
3276
+ </div>
3277
+ </div>
3278
+ <div
3279
+ aria-labelledby="react-aria-17"
3280
+ className="c3 c4"
3281
+ data-id={20}
3282
+ onClick={[Function]}
3283
+ onKeyPress={[Function]}
3284
+ role="option"
3285
+ tabIndex={-1}
3286
+ >
3287
+ <div
3288
+ className="c5 c6"
3289
+ >
3290
+ <div
3291
+ className="c7"
3292
+ style={
3293
+ Object {
3294
+ "--main-content-flex-direction": "row",
3295
+ }
3296
+ }
3297
+ >
3298
+ <span
3299
+ className=""
3300
+ id="react-aria-17"
3301
+ >
3302
+ twenty
3303
+ </span>
3304
+ </div>
3305
+ </div>
3306
+ </div>
3307
+ <div
3308
+ aria-labelledby="react-aria-19"
3309
+ className="c3 c4"
3310
+ data-id={21}
3311
+ onClick={[Function]}
3312
+ onKeyPress={[Function]}
3313
+ role="option"
3314
+ tabIndex={-1}
3315
+ >
3316
+ <div
3317
+ className="c5 c6"
3318
+ >
3319
+ <div
3320
+ className="c7"
3321
+ style={
3322
+ Object {
3323
+ "--main-content-flex-direction": "row",
3324
+ }
3325
+ }
3326
+ >
3327
+ <span
3328
+ className=""
3329
+ id="react-aria-19"
3330
+ >
3331
+ twentyone
3332
+ </span>
3333
+ </div>
3334
+ </div>
3335
+ </div>
3336
+ </div>
3337
+ </div>
3338
+ </div>
3339
+ </div>,
3340
+ ]
3341
+ `;
3342
+
3343
+ exports[`Autocomplete snapshots renders with a custom text input component 1`] = `
3344
+ Array [
3345
+ <input
3346
+ id="customInput"
3347
+ type="text"
3348
+ />,
3349
+ .c0 {
3350
+ position: absolute;
3351
+ width: 1px;
3352
+ height: 1px;
3353
+ padding: 0;
3354
+ margin: -1px;
3355
+ overflow: hidden;
3356
+ -webkit-clip: rect(0,0,0,0);
3357
+ clip: rect(0,0,0,0);
3358
+ white-space: nowrap;
3359
+ border-width: 0;
3360
+ }
3361
+
3362
+ .c2 {
3363
+ margin-top: 8px;
3364
+ margin-bottom: 8px;
3365
+ }
3366
+
3367
+ .c6 {
3368
+ display: -webkit-box;
3369
+ display: -webkit-flex;
3370
+ display: -ms-flexbox;
3371
+ display: flex;
3372
+ min-width: 0;
3373
+ position: relative;
3374
+ -webkit-box-flex: 1;
3375
+ -webkit-flex-grow: 1;
3376
+ -ms-flex-positive: 1;
3377
+ flex-grow: 1;
3378
+ }
3379
+
3380
+ .c7 {
3381
+ -webkit-align-items: baseline;
3382
+ -webkit-box-align: baseline;
3383
+ -ms-flex-align: baseline;
3384
+ align-items: baseline;
3385
+ display: -webkit-box;
3386
+ display: -webkit-flex;
3387
+ display: -ms-flexbox;
3388
+ display: flex;
3389
+ min-width: 0;
3390
+ -webkit-flex-direction: var(--main-content-flex-direction);
3391
+ -ms-flex-direction: var(--main-content-flex-direction);
3392
+ flex-direction: var(--main-content-flex-direction);
3393
+ -webkit-box-flex: 1;
3394
+ -webkit-flex-grow: 1;
3395
+ -ms-flex-positive: 1;
3396
+ flex-grow: 1;
3397
+ }
3398
+
3399
+ .c4 {
3400
+ padding: 6px 8px;
3401
+ display: -webkit-box;
3402
+ display: -webkit-flex;
3403
+ display: -ms-flexbox;
3404
+ display: flex;
3405
+ border-radius: 6px;
3406
+ color: #24292f;
3407
+ -webkit-transition: background 33.333ms linear;
3408
+ transition: background 33.333ms linear;
3409
+ -webkit-text-decoration: none;
3410
+ text-decoration: none;
3411
+ margin-left: 8px;
3412
+ margin-right: 8px;
3413
+ }
3414
+
3415
+ .c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
3416
+ margin-top: 0;
3417
+ }
3418
+
3419
+ .c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
3420
+ content: ' ';
3421
+ display: block;
3422
+ position: absolute;
3423
+ width: 100%;
3424
+ top: -7px;
3425
+ border: 0 solid hsla(210,18%,87%,1);
3426
+ border-top-width: 0;
3427
+ }
3428
+
3429
+ .c4:hover .c5::before,
3430
+ .c4:hover + * .c5::before {
3431
+ border-color: var(--item-hover-divider-border-color-override,transparent) !important;
3432
+ }
3433
+
3434
+ .c4:focus .c5::before,
3435
+ .c4:focus + * .c5::before,
3436
+ .c4[data-is-active-descendant] .c5::before,
3437
+ [data-is-active-descendant] + .c4 .c5::before {
3438
+ border-color: transparent !important;
3439
+ }
3440
+
3441
+ .c4[data-is-active-descendant='activated-directly'] {
3442
+ background: rgba(208,215,222,0.48);
3443
+ }
3444
+
3445
+ .c4[data-is-active-descendant='activated-indirectly'] {
3446
+ background: rgba(208,215,222,0.32);
3447
+ }
3448
+
3449
+ .c4:focus {
3450
+ background: rgba(208,215,222,0.48);
3451
+ outline: none;
3452
+ }
3453
+
3454
+ .c4:active {
3455
+ background: rgba(208,215,222,0.48);
3456
+ }
3457
+
3458
+ .c1 {
3459
+ font-size: 14px;
3460
+ line-height: 20px;
3461
+ }
3462
+
3463
+ .c1[data-has-active-descendant],
3464
+ .c1:focus-within {
3465
+ --item-hover-bg-override: none;
3466
+ --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
3467
+ }
3468
+
3469
+ @media (hover:hover) and (pointer:fine) {
3470
+ .c4:hover {
3471
+ background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
3472
+ cursor: pointer;
3473
+ }
3474
+ }
3475
+
3476
+ <div
3477
+ className="c0"
3478
+ >
3479
+ <div>
3480
+ <div
3481
+ aria-labelledby="labelId"
3482
+ className="c1"
3483
+ id="autocompleteId-listbox"
3484
+ role="listbox"
3485
+ >
3486
+ <div
3487
+ className="c2"
3488
+ >
3489
+ <div
3490
+ aria-labelledby="react-aria-1"
3491
+ className="c3 c4"
3492
+ data-id={0}
3493
+ onClick={[Function]}
3494
+ onKeyPress={[Function]}
3495
+ role="option"
3496
+ tabIndex={-1}
3497
+ >
3498
+ <div
3499
+ className="c5 c6"
3500
+ >
3501
+ <div
3502
+ className="c7"
3503
+ style={
3504
+ Object {
3505
+ "--main-content-flex-direction": "row",
3506
+ }
3507
+ }
3508
+ >
3509
+ <span
3510
+ className=""
3511
+ id="react-aria-1"
3512
+ >
3513
+ zero
3514
+ </span>
3515
+ </div>
3516
+ </div>
3517
+ </div>
3518
+ <div
3519
+ aria-labelledby="react-aria-3"
3520
+ className="c3 c4"
3521
+ data-id={1}
3522
+ onClick={[Function]}
3523
+ onKeyPress={[Function]}
3524
+ role="option"
3525
+ tabIndex={-1}
3526
+ >
3527
+ <div
3528
+ className="c5 c6"
3529
+ >
3530
+ <div
3531
+ className="c7"
3532
+ style={
3533
+ Object {
3534
+ "--main-content-flex-direction": "row",
3535
+ }
3536
+ }
3537
+ >
3538
+ <span
3539
+ className=""
3540
+ id="react-aria-3"
3541
+ >
3542
+ one
3543
+ </span>
3544
+ </div>
3545
+ </div>
3546
+ </div>
3547
+ <div
3548
+ aria-labelledby="react-aria-5"
3549
+ className="c3 c4"
3550
+ data-id={2}
3551
+ onClick={[Function]}
3552
+ onKeyPress={[Function]}
3553
+ role="option"
3554
+ tabIndex={-1}
3555
+ >
3556
+ <div
3557
+ className="c5 c6"
3558
+ >
3559
+ <div
3560
+ className="c7"
3561
+ style={
3562
+ Object {
3563
+ "--main-content-flex-direction": "row",
3564
+ }
3565
+ }
3566
+ >
3567
+ <span
3568
+ className=""
3569
+ id="react-aria-5"
3570
+ >
3571
+ two
3572
+ </span>
3573
+ </div>
3574
+ </div>
3575
+ </div>
3576
+ <div
3577
+ aria-labelledby="react-aria-7"
3578
+ className="c3 c4"
3579
+ data-id={3}
3580
+ onClick={[Function]}
3581
+ onKeyPress={[Function]}
3582
+ role="option"
3583
+ tabIndex={-1}
3584
+ >
3585
+ <div
3586
+ className="c5 c6"
3587
+ >
3588
+ <div
3589
+ className="c7"
3590
+ style={
3591
+ Object {
3592
+ "--main-content-flex-direction": "row",
3593
+ }
3594
+ }
3595
+ >
3596
+ <span
3597
+ className=""
3598
+ id="react-aria-7"
3599
+ >
3600
+ three
3601
+ </span>
3602
+ </div>
3603
+ </div>
3604
+ </div>
3605
+ <div
3606
+ aria-labelledby="react-aria-9"
3607
+ className="c3 c4"
3608
+ data-id={4}
3609
+ onClick={[Function]}
3610
+ onKeyPress={[Function]}
3611
+ role="option"
3612
+ tabIndex={-1}
3613
+ >
3614
+ <div
3615
+ className="c5 c6"
3616
+ >
3617
+ <div
3618
+ className="c7"
3619
+ style={
3620
+ Object {
3621
+ "--main-content-flex-direction": "row",
3622
+ }
3623
+ }
3624
+ >
3625
+ <span
3626
+ className=""
3627
+ id="react-aria-9"
3628
+ >
3629
+ four
3630
+ </span>
3631
+ </div>
3632
+ </div>
3633
+ </div>
3634
+ <div
3635
+ aria-labelledby="react-aria-11"
3636
+ className="c3 c4"
3637
+ data-id={5}
3638
+ onClick={[Function]}
3639
+ onKeyPress={[Function]}
3640
+ role="option"
3641
+ tabIndex={-1}
3642
+ >
3643
+ <div
3644
+ className="c5 c6"
3645
+ >
3646
+ <div
3647
+ className="c7"
3648
+ style={
3649
+ Object {
3650
+ "--main-content-flex-direction": "row",
3651
+ }
3652
+ }
3653
+ >
3654
+ <span
3655
+ className=""
3656
+ id="react-aria-11"
3657
+ >
3658
+ five
3659
+ </span>
3660
+ </div>
3661
+ </div>
3662
+ </div>
3663
+ <div
3664
+ aria-labelledby="react-aria-13"
3665
+ className="c3 c4"
3666
+ data-id={6}
3667
+ onClick={[Function]}
3668
+ onKeyPress={[Function]}
3669
+ role="option"
3670
+ tabIndex={-1}
3671
+ >
3672
+ <div
3673
+ className="c5 c6"
3674
+ >
3675
+ <div
3676
+ className="c7"
3677
+ style={
3678
+ Object {
3679
+ "--main-content-flex-direction": "row",
3680
+ }
3681
+ }
3682
+ >
3683
+ <span
3684
+ className=""
3685
+ id="react-aria-13"
3686
+ >
3687
+ six
3688
+ </span>
3689
+ </div>
3690
+ </div>
3691
+ </div>
3692
+ <div
3693
+ aria-labelledby="react-aria-15"
3694
+ className="c3 c4"
3695
+ data-id={7}
3696
+ onClick={[Function]}
3697
+ onKeyPress={[Function]}
3698
+ role="option"
3699
+ tabIndex={-1}
3700
+ >
3701
+ <div
3702
+ className="c5 c6"
3703
+ >
3704
+ <div
3705
+ className="c7"
3706
+ style={
3707
+ Object {
3708
+ "--main-content-flex-direction": "row",
3709
+ }
3710
+ }
3711
+ >
3712
+ <span
3713
+ className=""
3714
+ id="react-aria-15"
3715
+ >
3716
+ seven
3717
+ </span>
3718
+ </div>
3719
+ </div>
3720
+ </div>
3721
+ <div
3722
+ aria-labelledby="react-aria-17"
3723
+ className="c3 c4"
3724
+ data-id={20}
3725
+ onClick={[Function]}
3726
+ onKeyPress={[Function]}
3727
+ role="option"
3728
+ tabIndex={-1}
3729
+ >
3730
+ <div
3731
+ className="c5 c6"
3732
+ >
3733
+ <div
3734
+ className="c7"
3735
+ style={
3736
+ Object {
3737
+ "--main-content-flex-direction": "row",
3738
+ }
3739
+ }
3740
+ >
3741
+ <span
3742
+ className=""
3743
+ id="react-aria-17"
3744
+ >
3745
+ twenty
3746
+ </span>
3747
+ </div>
3748
+ </div>
3749
+ </div>
3750
+ <div
3751
+ aria-labelledby="react-aria-19"
3752
+ className="c3 c4"
3753
+ data-id={21}
3754
+ onClick={[Function]}
3755
+ onKeyPress={[Function]}
3756
+ role="option"
3757
+ tabIndex={-1}
3758
+ >
3759
+ <div
3760
+ className="c5 c6"
3761
+ >
3762
+ <div
3763
+ className="c7"
3764
+ style={
3765
+ Object {
3766
+ "--main-content-flex-direction": "row",
3767
+ }
3768
+ }
3769
+ >
3770
+ <span
3771
+ className=""
3772
+ id="react-aria-19"
3773
+ >
3774
+ twentyone
3775
+ </span>
3776
+ </div>
3777
+ </div>
3778
+ </div>
3779
+ </div>
3780
+ </div>
3781
+ </div>
3782
+ </div>,
3783
+ ]
3784
+ `;
3785
+
3786
+ exports[`Autocomplete snapshots renders with an input value 1`] = `
3787
+ Array [
3788
+ .c1 {
3789
+ border: 0;
3790
+ font-size: inherit;
3791
+ font-family: inherit;
3792
+ background-color: transparent;
3793
+ -webkit-appearance: none;
3794
+ color: inherit;
3795
+ width: 100%;
3796
+ }
3797
+
3798
+ .c1:focus {
3799
+ outline: 0;
3800
+ }
3801
+
3802
+ .c0 {
3803
+ display: -webkit-inline-box;
3804
+ display: -webkit-inline-flex;
3805
+ display: -ms-inline-flexbox;
3806
+ display: inline-flex;
3807
+ -webkit-align-items: stretch;
3808
+ -webkit-box-align: stretch;
3809
+ -ms-flex-align: stretch;
3810
+ align-items: stretch;
3811
+ min-height: 34px;
3812
+ font-size: 14px;
3813
+ line-height: 20px;
3814
+ color: #24292f;
3815
+ vertical-align: middle;
3816
+ background-repeat: no-repeat;
3817
+ background-position: right 8px center;
3818
+ border: 1px solid #d0d7de;
3819
+ border-radius: 6px;
3820
+ outline: none;
3821
+ box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
3822
+ cursor: text;
3823
+ padding: 6px 12px;
3824
+ }
3825
+
3826
+ .c0 .TextInput-icon {
3827
+ -webkit-align-self: center;
3828
+ -ms-flex-item-align: center;
3829
+ align-self: center;
3830
+ color: #57606a;
3831
+ margin: 0 8px;
3832
+ -webkit-flex-shrink: 0;
3833
+ -ms-flex-negative: 0;
3834
+ flex-shrink: 0;
3835
+ }
3836
+
3837
+ .c0:focus-within {
3838
+ border-color: #0969da;
3839
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
3840
+ }
3841
+
3842
+ @media (min-width:768px) {
3843
+ .c0 {
3844
+ font-size: 14px;
3845
+ }
3846
+ }
3847
+
3848
+ <span
3849
+ className="c0 TextInput-wrapper"
3850
+ >
3851
+ <input
3852
+ aria-autocomplete="both"
3853
+ aria-controls="autocompleteId-listbox"
3854
+ aria-expanded={false}
3855
+ aria-haspopup="listbox"
3856
+ aria-owns="autocompleteId-listbox"
3857
+ className="c1"
3858
+ onBlur={[Function]}
3859
+ onChange={[Function]}
3860
+ onFocus={[Function]}
3861
+ onKeyDown={[Function]}
3862
+ onKeyPress={[Function]}
3863
+ onKeyUp={[Function]}
3864
+ role="combobox"
3865
+ type="text"
3866
+ />
3867
+ </span>,
3868
+ .c0 {
3869
+ position: absolute;
3870
+ width: 1px;
3871
+ height: 1px;
3872
+ padding: 0;
3873
+ margin: -1px;
3874
+ overflow: hidden;
3875
+ -webkit-clip: rect(0,0,0,0);
3876
+ clip: rect(0,0,0,0);
3877
+ white-space: nowrap;
3878
+ border-width: 0;
3879
+ }
3880
+
3881
+ .c1 {
3882
+ padding: 16px;
3883
+ }
3884
+
3885
+ <div
3886
+ className="c0"
3887
+ >
3888
+ <div>
3889
+ <div
3890
+ className="c1"
3891
+ >
3892
+ No selectable options
3893
+ </div>
3894
+ </div>
3895
+ </div>,
3896
+ ]
3897
+ `;