@primer/components 32.0.1 → 32.0.2-rc.859381a1

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