@primer/components 31.0.0-rc.ee65b7f1 → 31.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (817) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/browser.esm.js +33 -28
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +13 -8
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +6 -0
  7. package/lib/ActionList/Item.js +8 -4
  8. package/lib/Button/Button.js +1 -1
  9. package/lib/Button/ButtonInvisible.js +1 -1
  10. package/lib/Button/ButtonTableList.js +1 -1
  11. package/lib/Pagination/Pagination.js +1 -1
  12. package/lib/_TextInputWrapper.js +1 -1
  13. package/lib-esm/ActionList/Item.d.ts +6 -0
  14. package/lib-esm/ActionList/Item.js +8 -4
  15. package/lib-esm/Button/Button.js +1 -1
  16. package/lib-esm/Button/ButtonInvisible.js +1 -1
  17. package/lib-esm/Button/ButtonTableList.js +1 -1
  18. package/lib-esm/Pagination/Pagination.js +1 -1
  19. package/lib-esm/_TextInputWrapper.js +1 -1
  20. package/package.json +1 -1
  21. package/.changeset/README.md +0 -8
  22. package/.changeset/config.json +0 -10
  23. package/.devcontainer/devcontainer.json +0 -8
  24. package/.eslintrc.json +0 -137
  25. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  26. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  27. package/.github/dependabot.yml +0 -18
  28. package/.github/pull_request_template.md +0 -18
  29. package/.github/workflows/ci.yml +0 -31
  30. package/.github/workflows/deploy_preview.yml +0 -47
  31. package/.github/workflows/deploy_production.yml +0 -70
  32. package/.github/workflows/release.yml +0 -35
  33. package/.github/workflows/release_canary.yml +0 -70
  34. package/.github/workflows/release_candidate.yml +0 -60
  35. package/.github/workflows/size.yml +0 -13
  36. package/.github/workflows/stale.yml +0 -26
  37. package/.gitignore +0 -10
  38. package/.npmrc +0 -4
  39. package/.nvmrc +0 -1
  40. package/.storybook/main.js +0 -11
  41. package/.storybook/preview.js +0 -113
  42. package/.vscode/launch.json +0 -21
  43. package/.vscode/settings.json +0 -13
  44. package/@types/@styled-system/index.d.ts +0 -0
  45. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  46. package/@types/@styled-system/props/index.d.ts +0 -1
  47. package/@types/jest-styled-components/index.d.ts +0 -1
  48. package/CODEOWNERS +0 -2
  49. package/babel-defines.js +0 -13
  50. package/babel.config.js +0 -39
  51. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  52. package/contributor-docs/CONTRIBUTING.md +0 -274
  53. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  54. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
  55. package/contributor-docs/behaviors.md +0 -132
  56. package/contributor-docs/component-contents-api-patterns.md +0 -316
  57. package/contributor-docs/principles.md +0 -39
  58. package/docs/.eslintrc +0 -0
  59. package/docs/.gitignore +0 -91
  60. package/docs/components/PropsList.js +0 -5
  61. package/docs/components/State.js +0 -9
  62. package/docs/components/constants.js +0 -34
  63. package/docs/components/index.js +0 -2
  64. package/docs/content/ActionList.mdx +0 -99
  65. package/docs/content/ActionMenu.mdx +0 -80
  66. package/docs/content/AnchoredOverlay.mdx +0 -37
  67. package/docs/content/Autocomplete.mdx +0 -627
  68. package/docs/content/Avatar.mdx +0 -33
  69. package/docs/content/AvatarStack.mdx +0 -37
  70. package/docs/content/BorderBox.md +0 -46
  71. package/docs/content/Box.md +0 -74
  72. package/docs/content/BranchName.md +0 -18
  73. package/docs/content/Breadcrumbs.md +0 -52
  74. package/docs/content/Buttons.md +0 -56
  75. package/docs/content/CircleBadge.md +0 -45
  76. package/docs/content/CircleOcticon.md +0 -18
  77. package/docs/content/CounterLabel.md +0 -32
  78. package/docs/content/Details.md +0 -105
  79. package/docs/content/Dialog.md +0 -108
  80. package/docs/content/Dialog2.mdx +0 -179
  81. package/docs/content/Dropdown.md +0 -72
  82. package/docs/content/DropdownMenu.mdx +0 -49
  83. package/docs/content/FilterList.md +0 -44
  84. package/docs/content/FilteredSearch.md +0 -39
  85. package/docs/content/Flash.md +0 -44
  86. package/docs/content/Flex.md +0 -58
  87. package/docs/content/FormGroup.md +0 -46
  88. package/docs/content/Grid.md +0 -59
  89. package/docs/content/Header.md +0 -79
  90. package/docs/content/Heading.md +0 -22
  91. package/docs/content/Label.md +0 -42
  92. package/docs/content/LabelGroup.md +0 -31
  93. package/docs/content/Link.md +0 -37
  94. package/docs/content/Overlay.mdx +0 -94
  95. package/docs/content/Pagehead.md +0 -27
  96. package/docs/content/Pagination.md +0 -187
  97. package/docs/content/PointerBox.md +0 -81
  98. package/docs/content/Popover.md +0 -137
  99. package/docs/content/Portal.mdx +0 -78
  100. package/docs/content/Position.md +0 -100
  101. package/docs/content/ProgressBar.mdx +0 -29
  102. package/docs/content/SelectMenu.md +0 -435
  103. package/docs/content/SelectPanel.mdx +0 -67
  104. package/docs/content/SideNav.md +0 -179
  105. package/docs/content/Spinner.mdx +0 -32
  106. package/docs/content/StateLabel.md +0 -35
  107. package/docs/content/StyledOcticon.md +0 -36
  108. package/docs/content/SubNav.md +0 -102
  109. package/docs/content/TabNav.md +0 -50
  110. package/docs/content/Text.md +0 -31
  111. package/docs/content/TextInput.md +0 -34
  112. package/docs/content/TextInputTokens.mdx +0 -89
  113. package/docs/content/TextInputWithTokens.mdx +0 -97
  114. package/docs/content/Timeline.md +0 -138
  115. package/docs/content/Token.mdx +0 -381
  116. package/docs/content/Tooltip.md +0 -41
  117. package/docs/content/Truncate.md +0 -64
  118. package/docs/content/UnderlineNav.md +0 -53
  119. package/docs/content/anchoredPosition.mdx +0 -163
  120. package/docs/content/core-concepts.md +0 -70
  121. package/docs/content/focusTrap.mdx +0 -103
  122. package/docs/content/focusZone.mdx +0 -145
  123. package/docs/content/getting-started.md +0 -138
  124. package/docs/content/index.md +0 -33
  125. package/docs/content/linting.md +0 -35
  126. package/docs/content/overriding-styles.mdx +0 -82
  127. package/docs/content/philosophy.md +0 -23
  128. package/docs/content/primer-theme.md +0 -89
  129. package/docs/content/ssr.mdx +0 -43
  130. package/docs/content/system-props.mdx +0 -37
  131. package/docs/content/theme-reference.md +0 -16
  132. package/docs/content/theming.md +0 -249
  133. package/docs/content/useOnEscapePress.mdx +0 -56
  134. package/docs/content/useOnOutsideClick.mdx +0 -57
  135. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  136. package/docs/content/useOverlay.mdx +0 -62
  137. package/docs/content/useSafeTimeout.mdx +0 -32
  138. package/docs/gatsby-config.js +0 -30
  139. package/docs/gatsby-node.js +0 -101
  140. package/docs/package-lock.json +0 -20756
  141. package/docs/package.json +0 -36
  142. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -23
  143. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
  144. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -54
  145. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -133
  146. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  147. package/docs/src/props.js +0 -77
  148. package/jest.config.js +0 -13
  149. package/lib/__tests__/ActionList.test.d.ts +0 -1
  150. package/lib/__tests__/ActionList.test.js +0 -69
  151. package/lib/__tests__/ActionList.types.test.d.ts +0 -6
  152. package/lib/__tests__/ActionList.types.test.js +0 -69
  153. package/lib/__tests__/ActionMenu.test.d.ts +0 -1
  154. package/lib/__tests__/ActionMenu.test.js +0 -151
  155. package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
  156. package/lib/__tests__/AnchoredOverlay.test.js +0 -160
  157. package/lib/__tests__/Autocomplete.test.d.ts +0 -1
  158. package/lib/__tests__/Autocomplete.test.js +0 -528
  159. package/lib/__tests__/Avatar.test.d.ts +0 -1
  160. package/lib/__tests__/Avatar.test.js +0 -67
  161. package/lib/__tests__/AvatarStack.test.d.ts +0 -1
  162. package/lib/__tests__/AvatarStack.test.js +0 -71
  163. package/lib/__tests__/BorderBox.test.d.ts +0 -1
  164. package/lib/__tests__/BorderBox.test.js +0 -58
  165. package/lib/__tests__/Box.test.d.ts +0 -1
  166. package/lib/__tests__/Box.test.js +0 -78
  167. package/lib/__tests__/BranchName.test.d.ts +0 -1
  168. package/lib/__tests__/BranchName.test.js +0 -36
  169. package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
  170. package/lib/__tests__/Breadcrumbs.test.js +0 -37
  171. package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  172. package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
  173. package/lib/__tests__/Button.test.d.ts +0 -1
  174. package/lib/__tests__/Button.test.js +0 -143
  175. package/lib/__tests__/Caret.test.d.ts +0 -1
  176. package/lib/__tests__/Caret.test.js +0 -52
  177. package/lib/__tests__/CircleBadge.test.d.ts +0 -1
  178. package/lib/__tests__/CircleBadge.test.js +0 -83
  179. package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
  180. package/lib/__tests__/CircleOcticon.test.js +0 -71
  181. package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
  182. package/lib/__tests__/ConfirmationDialog.test.js +0 -134
  183. package/lib/__tests__/CounterLabel.test.d.ts +0 -1
  184. package/lib/__tests__/CounterLabel.test.js +0 -58
  185. package/lib/__tests__/Details.test.d.ts +0 -1
  186. package/lib/__tests__/Details.test.js +0 -117
  187. package/lib/__tests__/Dialog.test.d.ts +0 -1
  188. package/lib/__tests__/Dialog.test.js +0 -184
  189. package/lib/__tests__/Dropdown.test.d.ts +0 -1
  190. package/lib/__tests__/Dropdown.test.js +0 -63
  191. package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
  192. package/lib/__tests__/DropdownMenu.test.js +0 -150
  193. package/lib/__tests__/FilterList.test.d.ts +0 -1
  194. package/lib/__tests__/FilterList.test.js +0 -36
  195. package/lib/__tests__/FilterListItem.test.d.ts +0 -1
  196. package/lib/__tests__/FilterListItem.test.js +0 -46
  197. package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
  198. package/lib/__tests__/FilteredSearch.test.js +0 -36
  199. package/lib/__tests__/Flash.test.d.ts +0 -1
  200. package/lib/__tests__/Flash.test.js +0 -62
  201. package/lib/__tests__/Flex.test.d.ts +0 -1
  202. package/lib/__tests__/Flex.test.js +0 -74
  203. package/lib/__tests__/FormGroup.test.d.ts +0 -1
  204. package/lib/__tests__/FormGroup.test.js +0 -54
  205. package/lib/__tests__/Grid.test.d.ts +0 -1
  206. package/lib/__tests__/Grid.test.js +0 -104
  207. package/lib/__tests__/Header.test.d.ts +0 -1
  208. package/lib/__tests__/Header.test.js +0 -58
  209. package/lib/__tests__/Heading.test.d.ts +0 -1
  210. package/lib/__tests__/Heading.test.js +0 -109
  211. package/lib/__tests__/Label.test.d.ts +0 -1
  212. package/lib/__tests__/Label.test.js +0 -46
  213. package/lib/__tests__/LabelGroup.test.d.ts +0 -1
  214. package/lib/__tests__/LabelGroup.test.js +0 -38
  215. package/lib/__tests__/Link.test.d.ts +0 -1
  216. package/lib/__tests__/Link.test.js +0 -70
  217. package/lib/__tests__/Merge.types.test.d.ts +0 -30
  218. package/lib/__tests__/Merge.types.test.js +0 -27
  219. package/lib/__tests__/Overlay.test.d.ts +0 -1
  220. package/lib/__tests__/Overlay.test.js +0 -145
  221. package/lib/__tests__/Pagehead.test.d.ts +0 -1
  222. package/lib/__tests__/Pagehead.test.js +0 -37
  223. package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
  224. package/lib/__tests__/Pagination/Pagination.test.js +0 -47
  225. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  226. package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
  227. package/lib/__tests__/PointerBox.test.d.ts +0 -1
  228. package/lib/__tests__/PointerBox.test.js +0 -46
  229. package/lib/__tests__/Popover.test.d.ts +0 -1
  230. package/lib/__tests__/Popover.test.js +0 -66
  231. package/lib/__tests__/Portal.test.d.ts +0 -1
  232. package/lib/__tests__/Portal.test.js +0 -124
  233. package/lib/__tests__/Position.test.d.ts +0 -1
  234. package/lib/__tests__/Position.test.js +0 -143
  235. package/lib/__tests__/ProgressBar.test.d.ts +0 -1
  236. package/lib/__tests__/ProgressBar.test.js +0 -68
  237. package/lib/__tests__/SelectMenu.test.d.ts +0 -1
  238. package/lib/__tests__/SelectMenu.test.js +0 -155
  239. package/lib/__tests__/SelectPanel.test.d.ts +0 -1
  240. package/lib/__tests__/SelectPanel.test.js +0 -80
  241. package/lib/__tests__/SideNav.test.d.ts +0 -1
  242. package/lib/__tests__/SideNav.test.js +0 -71
  243. package/lib/__tests__/Spinner.test.d.ts +0 -1
  244. package/lib/__tests__/Spinner.test.js +0 -53
  245. package/lib/__tests__/StateLabel.test.d.ts +0 -1
  246. package/lib/__tests__/StateLabel.test.js +0 -71
  247. package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
  248. package/lib/__tests__/StyledOcticon.test.js +0 -40
  249. package/lib/__tests__/SubNav.test.d.ts +0 -1
  250. package/lib/__tests__/SubNav.test.js +0 -62
  251. package/lib/__tests__/SubNavLink.test.d.ts +0 -1
  252. package/lib/__tests__/SubNavLink.test.js +0 -49
  253. package/lib/__tests__/TabNav.test.d.ts +0 -1
  254. package/lib/__tests__/TabNav.test.js +0 -49
  255. package/lib/__tests__/Text.test.d.ts +0 -1
  256. package/lib/__tests__/Text.test.js +0 -105
  257. package/lib/__tests__/TextInput.test.d.ts +0 -1
  258. package/lib/__tests__/TextInput.test.js +0 -78
  259. package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
  260. package/lib/__tests__/TextInputWithTokens.test.js +0 -389
  261. package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
  262. package/lib/__tests__/ThemeProvider.test.js +0 -444
  263. package/lib/__tests__/Timeline.test.d.ts +0 -1
  264. package/lib/__tests__/Timeline.test.js +0 -75
  265. package/lib/__tests__/Token.test.d.ts +0 -1
  266. package/lib/__tests__/Token.test.js +0 -180
  267. package/lib/__tests__/Tooltip.test.d.ts +0 -1
  268. package/lib/__tests__/Tooltip.test.js +0 -69
  269. package/lib/__tests__/Truncate.test.d.ts +0 -1
  270. package/lib/__tests__/Truncate.test.js +0 -63
  271. package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
  272. package/lib/__tests__/UnderlineNav.test.js +0 -72
  273. package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
  274. package/lib/__tests__/UnderlineNavLink.test.js +0 -51
  275. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  276. package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
  277. package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  278. package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
  279. package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
  280. package/lib/__tests__/behaviors/focusZone.test.js +0 -570
  281. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  282. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
  283. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  284. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
  285. package/lib/__tests__/filterObject.test.d.ts +0 -1
  286. package/lib/__tests__/filterObject.test.js +0 -30
  287. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  288. package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
  289. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  290. package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
  291. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  292. package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
  293. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  294. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
  295. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  296. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
  297. package/lib/__tests__/theme.test.d.ts +0 -1
  298. package/lib/__tests__/theme.test.js +0 -36
  299. package/lib/__tests__/themeGet.test.d.ts +0 -1
  300. package/lib/__tests__/themeGet.test.js +0 -25
  301. package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
  302. package/lib/__tests__/useSafeTimeout.test.js +0 -45
  303. package/lib/stories/ActionList.stories.js +0 -453
  304. package/lib/stories/ActionMenu.stories.js +0 -338
  305. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  306. package/lib/stories/Autocomplete.stories.js +0 -608
  307. package/lib/stories/AvatarStack.stories.js +0 -49
  308. package/lib/stories/Button.stories.js +0 -114
  309. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  310. package/lib/stories/Dialog.stories.js +0 -265
  311. package/lib/stories/DropdownMenu.stories.js +0 -122
  312. package/lib/stories/IssueLabelToken.stories.js +0 -165
  313. package/lib/stories/Overlay.stories.js +0 -204
  314. package/lib/stories/Portal.stories.js +0 -104
  315. package/lib/stories/ProfileToken.stories.js +0 -162
  316. package/lib/stories/SelectPanel.stories.js +0 -399
  317. package/lib/stories/TextInputWithTokens.stories.js +0 -235
  318. package/lib/stories/ThemeProvider.stories.js +0 -102
  319. package/lib/stories/Token.stories.js +0 -159
  320. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  321. package/lib/stories/useFocusTrap.stories.js +0 -356
  322. package/lib/stories/useFocusZone.stories.js +0 -599
  323. package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
  324. package/lib-esm/__tests__/ActionList.test.js +0 -57
  325. package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
  326. package/lib-esm/__tests__/ActionList.types.test.js +0 -45
  327. package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
  328. package/lib-esm/__tests__/ActionMenu.test.js +0 -139
  329. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
  330. package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -134
  331. package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
  332. package/lib-esm/__tests__/Autocomplete.test.js +0 -494
  333. package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
  334. package/lib-esm/__tests__/Avatar.test.js +0 -56
  335. package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
  336. package/lib-esm/__tests__/AvatarStack.test.js +0 -58
  337. package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
  338. package/lib-esm/__tests__/BorderBox.test.js +0 -47
  339. package/lib-esm/__tests__/Box.test.d.ts +0 -1
  340. package/lib-esm/__tests__/Box.test.js +0 -67
  341. package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
  342. package/lib-esm/__tests__/BranchName.test.js +0 -26
  343. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
  344. package/lib-esm/__tests__/Breadcrumbs.test.js +0 -27
  345. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  346. package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
  347. package/lib-esm/__tests__/Button.test.d.ts +0 -1
  348. package/lib-esm/__tests__/Button.test.js +0 -133
  349. package/lib-esm/__tests__/Caret.test.d.ts +0 -1
  350. package/lib-esm/__tests__/Caret.test.js +0 -42
  351. package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
  352. package/lib-esm/__tests__/CircleBadge.test.js +0 -70
  353. package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
  354. package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
  355. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
  356. package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
  357. package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
  358. package/lib-esm/__tests__/CounterLabel.test.js +0 -47
  359. package/lib-esm/__tests__/Details.test.d.ts +0 -1
  360. package/lib-esm/__tests__/Details.test.js +0 -107
  361. package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
  362. package/lib-esm/__tests__/Dialog.test.js +0 -171
  363. package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
  364. package/lib-esm/__tests__/Dropdown.test.js +0 -53
  365. package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
  366. package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
  367. package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
  368. package/lib-esm/__tests__/FilterList.test.js +0 -26
  369. package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
  370. package/lib-esm/__tests__/FilterListItem.test.js +0 -36
  371. package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
  372. package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
  373. package/lib-esm/__tests__/Flash.test.d.ts +0 -1
  374. package/lib-esm/__tests__/Flash.test.js +0 -51
  375. package/lib-esm/__tests__/Flex.test.d.ts +0 -1
  376. package/lib-esm/__tests__/Flex.test.js +0 -64
  377. package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
  378. package/lib-esm/__tests__/FormGroup.test.js +0 -44
  379. package/lib-esm/__tests__/Grid.test.d.ts +0 -1
  380. package/lib-esm/__tests__/Grid.test.js +0 -94
  381. package/lib-esm/__tests__/Header.test.d.ts +0 -1
  382. package/lib-esm/__tests__/Header.test.js +0 -48
  383. package/lib-esm/__tests__/Heading.test.d.ts +0 -1
  384. package/lib-esm/__tests__/Heading.test.js +0 -99
  385. package/lib-esm/__tests__/Label.test.d.ts +0 -1
  386. package/lib-esm/__tests__/Label.test.js +0 -36
  387. package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
  388. package/lib-esm/__tests__/LabelGroup.test.js +0 -26
  389. package/lib-esm/__tests__/Link.test.d.ts +0 -1
  390. package/lib-esm/__tests__/Link.test.js +0 -60
  391. package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
  392. package/lib-esm/__tests__/Merge.types.test.js +0 -14
  393. package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
  394. package/lib-esm/__tests__/Overlay.test.js +0 -123
  395. package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
  396. package/lib-esm/__tests__/Pagehead.test.js +0 -26
  397. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
  398. package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
  399. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  400. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
  401. package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
  402. package/lib-esm/__tests__/PointerBox.test.js +0 -36
  403. package/lib-esm/__tests__/Popover.test.d.ts +0 -1
  404. package/lib-esm/__tests__/Popover.test.js +0 -53
  405. package/lib-esm/__tests__/Portal.test.d.ts +0 -1
  406. package/lib-esm/__tests__/Portal.test.js +0 -104
  407. package/lib-esm/__tests__/Position.test.d.ts +0 -1
  408. package/lib-esm/__tests__/Position.test.js +0 -133
  409. package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
  410. package/lib-esm/__tests__/ProgressBar.test.js +0 -58
  411. package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
  412. package/lib-esm/__tests__/SelectMenu.test.js +0 -145
  413. package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
  414. package/lib-esm/__tests__/SelectPanel.test.js +0 -65
  415. package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
  416. package/lib-esm/__tests__/SideNav.test.js +0 -60
  417. package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
  418. package/lib-esm/__tests__/Spinner.test.js +0 -43
  419. package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
  420. package/lib-esm/__tests__/StateLabel.test.js +0 -61
  421. package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
  422. package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
  423. package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
  424. package/lib-esm/__tests__/SubNav.test.js +0 -50
  425. package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
  426. package/lib-esm/__tests__/SubNavLink.test.js +0 -39
  427. package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
  428. package/lib-esm/__tests__/TabNav.test.js +0 -39
  429. package/lib-esm/__tests__/Text.test.d.ts +0 -1
  430. package/lib-esm/__tests__/Text.test.js +0 -93
  431. package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
  432. package/lib-esm/__tests__/TextInput.test.js +0 -68
  433. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
  434. package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -341
  435. package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
  436. package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
  437. package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
  438. package/lib-esm/__tests__/Timeline.test.js +0 -65
  439. package/lib-esm/__tests__/Token.test.d.ts +0 -1
  440. package/lib-esm/__tests__/Token.test.js +0 -166
  441. package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
  442. package/lib-esm/__tests__/Tooltip.test.js +0 -59
  443. package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
  444. package/lib-esm/__tests__/Truncate.test.js +0 -53
  445. package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
  446. package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
  447. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
  448. package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
  449. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  450. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
  451. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  452. package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
  453. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
  454. package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
  455. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  456. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
  457. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  458. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
  459. package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
  460. package/lib-esm/__tests__/filterObject.test.js +0 -27
  461. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  462. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
  463. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  464. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
  465. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  466. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
  467. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  468. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
  469. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  470. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
  471. package/lib-esm/__tests__/theme.test.d.ts +0 -1
  472. package/lib-esm/__tests__/theme.test.js +0 -33
  473. package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
  474. package/lib-esm/__tests__/themeGet.test.js +0 -22
  475. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
  476. package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
  477. package/lib-esm/stories/ActionList.stories.js +0 -394
  478. package/lib-esm/stories/ActionMenu.stories.js +0 -293
  479. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  480. package/lib-esm/stories/Autocomplete.stories.js +0 -549
  481. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  482. package/lib-esm/stories/Button.stories.js +0 -78
  483. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  484. package/lib-esm/stories/Dialog.stories.js +0 -240
  485. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  486. package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
  487. package/lib-esm/stories/Overlay.stories.js +0 -173
  488. package/lib-esm/stories/Portal.stories.js +0 -68
  489. package/lib-esm/stories/ProfileToken.stories.js +0 -136
  490. package/lib-esm/stories/SelectPanel.stories.js +0 -334
  491. package/lib-esm/stories/TextInputWithTokens.stories.js +0 -196
  492. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  493. package/lib-esm/stories/Token.stories.js +0 -133
  494. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  495. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  496. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  497. package/migrating.md +0 -250
  498. package/now.json +0 -17
  499. package/package-lock.json +0 -29369
  500. package/rollup.config.js +0 -36
  501. package/script/build +0 -19
  502. package/script/build-storybook +0 -10
  503. package/script/setup +0 -12
  504. package/src/ActionList/Divider.tsx +0 -25
  505. package/src/ActionList/Group.tsx +0 -45
  506. package/src/ActionList/Header.tsx +0 -74
  507. package/src/ActionList/Item.tsx +0 -483
  508. package/src/ActionList/List.tsx +0 -258
  509. package/src/ActionList/index.ts +0 -21
  510. package/src/ActionMenu.tsx +0 -106
  511. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
  512. package/src/AnchoredOverlay/index.ts +0 -2
  513. package/src/Autocomplete/Autocomplete.tsx +0 -103
  514. package/src/Autocomplete/AutocompleteContext.tsx +0 -19
  515. package/src/Autocomplete/AutocompleteInput.tsx +0 -179
  516. package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
  517. package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
  518. package/src/Autocomplete/index.ts +0 -2
  519. package/src/Avatar.tsx +0 -46
  520. package/src/AvatarPair.tsx +0 -35
  521. package/src/AvatarStack.tsx +0 -159
  522. package/src/BaseStyles.tsx +0 -53
  523. package/src/BorderBox.tsx +0 -18
  524. package/src/Box.tsx +0 -54
  525. package/src/BranchName.tsx +0 -19
  526. package/src/Breadcrumbs.tsx +0 -101
  527. package/src/Button/Button.tsx +0 -40
  528. package/src/Button/ButtonBase.tsx +0 -43
  529. package/src/Button/ButtonClose.tsx +0 -40
  530. package/src/Button/ButtonDanger.tsx +0 -43
  531. package/src/Button/ButtonGroup.tsx +0 -55
  532. package/src/Button/ButtonInvisible.tsx +0 -27
  533. package/src/Button/ButtonOutline.tsx +0 -43
  534. package/src/Button/ButtonPrimary.tsx +0 -41
  535. package/src/Button/ButtonStyles.tsx +0 -36
  536. package/src/Button/ButtonTableList.tsx +0 -58
  537. package/src/Button/index.ts +0 -16
  538. package/src/Caret.tsx +0 -133
  539. package/src/CircleBadge.tsx +0 -55
  540. package/src/CircleOcticon.tsx +0 -37
  541. package/src/CounterLabel.tsx +0 -52
  542. package/src/Details.tsx +0 -23
  543. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  544. package/src/Dialog/Dialog.tsx +0 -432
  545. package/src/Dialog.tsx +0 -149
  546. package/src/Dropdown.tsx +0 -158
  547. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  548. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  549. package/src/DropdownMenu/index.ts +0 -4
  550. package/src/DropdownStyles.ts +0 -128
  551. package/src/FilterList.tsx +0 -81
  552. package/src/FilteredActionList/FilteredActionList.tsx +0 -142
  553. package/src/FilteredActionList/index.ts +0 -2
  554. package/src/FilteredSearch.tsx +0 -28
  555. package/src/Flash.tsx +0 -77
  556. package/src/Flex.tsx +0 -15
  557. package/src/FormGroup.tsx +0 -27
  558. package/src/Grid.tsx +0 -15
  559. package/src/Header.tsx +0 -84
  560. package/src/Heading.tsx +0 -21
  561. package/src/Label.tsx +0 -75
  562. package/src/LabelGroup.tsx +0 -18
  563. package/src/Link.tsx +0 -46
  564. package/src/Overlay.tsx +0 -197
  565. package/src/Pagehead.tsx +0 -17
  566. package/src/Pagination/Pagination.tsx +0 -214
  567. package/src/Pagination/index.ts +0 -4
  568. package/src/Pagination/model.tsx +0 -187
  569. package/src/PointerBox.tsx +0 -31
  570. package/src/Popover.tsx +0 -236
  571. package/src/Portal/Portal.tsx +0 -96
  572. package/src/Portal/index.ts +0 -5
  573. package/src/Position.tsx +0 -63
  574. package/src/ProgressBar.tsx +0 -52
  575. package/src/SelectMenu/SelectMenu.tsx +0 -125
  576. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  577. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  578. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  579. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  580. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  581. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  582. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  583. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  584. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  585. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  586. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  587. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  588. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  589. package/src/SelectMenu/index.ts +0 -15
  590. package/src/SelectPanel/SelectPanel.tsx +0 -173
  591. package/src/SelectPanel/index.ts +0 -2
  592. package/src/SideNav.tsx +0 -193
  593. package/src/Spinner.tsx +0 -59
  594. package/src/StateLabel.tsx +0 -102
  595. package/src/StyledOcticon.tsx +0 -24
  596. package/src/SubNav.tsx +0 -129
  597. package/src/TabNav.tsx +0 -77
  598. package/src/Text.tsx +0 -13
  599. package/src/TextInput.tsx +0 -68
  600. package/src/TextInputWithTokens.tsx +0 -271
  601. package/src/ThemeProvider.tsx +0 -176
  602. package/src/Timeline.tsx +0 -141
  603. package/src/Token/AvatarToken.tsx +0 -54
  604. package/src/Token/IssueLabelToken.tsx +0 -150
  605. package/src/Token/Token.tsx +0 -112
  606. package/src/Token/TokenBase.tsx +0 -134
  607. package/src/Token/_RemoveTokenButton.tsx +0 -98
  608. package/src/Token/_TokenTextContainer.tsx +0 -47
  609. package/src/Token/index.ts +0 -3
  610. package/src/Tooltip.tsx +0 -263
  611. package/src/Truncate.tsx +0 -36
  612. package/src/UnderlineNav.tsx +0 -110
  613. package/src/_TextInputWrapper.tsx +0 -105
  614. package/src/_UnstyledTextInput.tsx +0 -19
  615. package/src/__tests__/.eslintrc.json +0 -11
  616. package/src/__tests__/ActionList.test.tsx +0 -53
  617. package/src/__tests__/ActionList.types.test.tsx +0 -51
  618. package/src/__tests__/ActionMenu.test.tsx +0 -136
  619. package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
  620. package/src/__tests__/Autocomplete.test.tsx +0 -444
  621. package/src/__tests__/Avatar.test.tsx +0 -44
  622. package/src/__tests__/AvatarStack.test.tsx +0 -48
  623. package/src/__tests__/BorderBox.test.tsx +0 -43
  624. package/src/__tests__/Box.test.tsx +0 -42
  625. package/src/__tests__/BranchName.test.tsx +0 -26
  626. package/src/__tests__/Breadcrumbs.test.tsx +0 -27
  627. package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
  628. package/src/__tests__/Button.test.tsx +0 -128
  629. package/src/__tests__/Caret.test.tsx +0 -36
  630. package/src/__tests__/CircleBadge.test.tsx +0 -66
  631. package/src/__tests__/CircleOcticon.test.tsx +0 -50
  632. package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
  633. package/src/__tests__/CounterLabel.test.tsx +0 -50
  634. package/src/__tests__/Details.test.tsx +0 -115
  635. package/src/__tests__/Dialog.test.tsx +0 -155
  636. package/src/__tests__/Dropdown.test.tsx +0 -53
  637. package/src/__tests__/DropdownMenu.test.tsx +0 -136
  638. package/src/__tests__/FilterList.test.tsx +0 -26
  639. package/src/__tests__/FilterListItem.test.tsx +0 -31
  640. package/src/__tests__/FilteredSearch.test.tsx +0 -26
  641. package/src/__tests__/Flash.test.tsx +0 -45
  642. package/src/__tests__/Flex.test.tsx +0 -58
  643. package/src/__tests__/FormGroup.test.tsx +0 -38
  644. package/src/__tests__/Grid.test.tsx +0 -82
  645. package/src/__tests__/Header.test.tsx +0 -49
  646. package/src/__tests__/Heading.test.tsx +0 -91
  647. package/src/__tests__/Label.test.tsx +0 -34
  648. package/src/__tests__/LabelGroup.test.tsx +0 -30
  649. package/src/__tests__/Link.test.tsx +0 -47
  650. package/src/__tests__/Merge.types.test.ts +0 -39
  651. package/src/__tests__/Overlay.test.tsx +0 -103
  652. package/src/__tests__/Pagehead.test.tsx +0 -23
  653. package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
  654. package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
  655. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
  656. package/src/__tests__/PointerBox.test.tsx +0 -34
  657. package/src/__tests__/Popover.test.tsx +0 -68
  658. package/src/__tests__/Portal.test.tsx +0 -103
  659. package/src/__tests__/Position.test.tsx +0 -117
  660. package/src/__tests__/ProgressBar.test.tsx +0 -40
  661. package/src/__tests__/SelectMenu.test.tsx +0 -142
  662. package/src/__tests__/SelectPanel.test.tsx +0 -63
  663. package/src/__tests__/SideNav.test.tsx +0 -62
  664. package/src/__tests__/Spinner.test.tsx +0 -42
  665. package/src/__tests__/StateLabel.test.tsx +0 -48
  666. package/src/__tests__/StyledOcticon.test.tsx +0 -26
  667. package/src/__tests__/SubNav.test.tsx +0 -50
  668. package/src/__tests__/SubNavLink.test.tsx +0 -31
  669. package/src/__tests__/TabNav.test.tsx +0 -32
  670. package/src/__tests__/Text.test.tsx +0 -78
  671. package/src/__tests__/TextInput.test.tsx +0 -49
  672. package/src/__tests__/TextInputWithTokens.test.tsx +0 -262
  673. package/src/__tests__/ThemeProvider.test.tsx +0 -441
  674. package/src/__tests__/Timeline.test.tsx +0 -58
  675. package/src/__tests__/Token.test.tsx +0 -118
  676. package/src/__tests__/Tooltip.test.tsx +0 -52
  677. package/src/__tests__/Truncate.test.tsx +0 -43
  678. package/src/__tests__/UnderlineNav.test.tsx +0 -58
  679. package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
  680. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
  681. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
  682. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -332
  683. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3414
  684. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
  685. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
  686. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
  687. package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
  688. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
  689. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
  690. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
  691. package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -832
  692. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
  693. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -141
  694. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -64
  695. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
  696. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
  697. package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
  698. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -200
  699. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
  700. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -106
  701. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
  702. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
  703. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
  704. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
  705. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
  706. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
  707. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
  708. package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
  709. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
  710. package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -74
  711. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
  712. package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -213
  713. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
  714. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
  715. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
  716. package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
  717. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
  718. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -469
  719. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -123
  720. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
  721. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
  722. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -388
  723. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -25
  724. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
  725. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
  726. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
  727. package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
  728. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -440
  729. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -5308
  730. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
  731. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
  732. package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3787
  733. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
  734. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
  735. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
  736. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
  737. package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
  738. package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
  739. package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
  740. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
  741. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
  742. package/src/__tests__/filterObject.test.ts +0 -54
  743. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
  744. package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
  745. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
  746. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
  747. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
  748. package/src/__tests__/theme.test.ts +0 -41
  749. package/src/__tests__/themeGet.test.ts +0 -15
  750. package/src/__tests__/useSafeTimeout.test.tsx +0 -36
  751. package/src/behaviors/anchoredPosition.ts +0 -442
  752. package/src/behaviors/focusTrap.ts +0 -184
  753. package/src/behaviors/focusZone.ts +0 -713
  754. package/src/behaviors/scrollIntoViewingArea.ts +0 -27
  755. package/src/constants.ts +0 -62
  756. package/src/hooks/index.ts +0 -11
  757. package/src/hooks/useAnchoredPosition.ts +0 -53
  758. package/src/hooks/useCombinedRefs.ts +0 -40
  759. package/src/hooks/useDetails.tsx +0 -54
  760. package/src/hooks/useDialog.ts +0 -121
  761. package/src/hooks/useFocusTrap.ts +0 -80
  762. package/src/hooks/useFocusZone.ts +0 -64
  763. package/src/hooks/useOnEscapePress.ts +0 -63
  764. package/src/hooks/useOnOutsideClick.tsx +0 -82
  765. package/src/hooks/useOpenAndCloseFocus.ts +0 -32
  766. package/src/hooks/useOverlay.tsx +0 -34
  767. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  768. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  769. package/src/hooks/useRenderForcingRef.ts +0 -22
  770. package/src/hooks/useResizeObserver.ts +0 -11
  771. package/src/hooks/useSafeTimeout.ts +0 -38
  772. package/src/hooks/useScrollFlash.ts +0 -21
  773. package/src/index.ts +0 -170
  774. package/src/polyfills/eventListenerSignal.ts +0 -66
  775. package/src/stories/ActionList.stories.tsx +0 -437
  776. package/src/stories/ActionMenu.stories.tsx +0 -322
  777. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  778. package/src/stories/Autocomplete.stories.tsx +0 -572
  779. package/src/stories/AvatarStack.stories.tsx +0 -37
  780. package/src/stories/Button.stories.tsx +0 -88
  781. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  782. package/src/stories/Dialog.stories.tsx +0 -240
  783. package/src/stories/DropdownMenu.stories.tsx +0 -84
  784. package/src/stories/IssueLabelToken.stories.tsx +0 -138
  785. package/src/stories/Overlay.stories.tsx +0 -213
  786. package/src/stories/Portal.stories.tsx +0 -109
  787. package/src/stories/ProfileToken.stories.tsx +0 -129
  788. package/src/stories/SelectPanel.stories.tsx +0 -353
  789. package/src/stories/TextInputWithTokens.stories.tsx +0 -146
  790. package/src/stories/ThemeProvider.stories.tsx +0 -104
  791. package/src/stories/Token.stories.tsx +0 -126
  792. package/src/stories/useAnchoredPosition.stories.tsx +0 -320
  793. package/src/stories/useFocusTrap.stories.tsx +0 -400
  794. package/src/stories/useFocusZone.stories.tsx +0 -663
  795. package/src/sx.ts +0 -9
  796. package/src/theme-preval.js +0 -79
  797. package/src/theme.ts +0 -3
  798. package/src/utils/deprecate.tsx +0 -73
  799. package/src/utils/isNumeric.tsx +0 -4
  800. package/src/utils/iterateFocusableElements.ts +0 -121
  801. package/src/utils/ssr.tsx +0 -1
  802. package/src/utils/test-deprecations.tsx +0 -19
  803. package/src/utils/test-helpers.tsx +0 -7
  804. package/src/utils/test-matchers.tsx +0 -109
  805. package/src/utils/testing.tsx +0 -242
  806. package/src/utils/theme.js +0 -64
  807. package/src/utils/types/AriaRole.ts +0 -71
  808. package/src/utils/types/ComponentProps.ts +0 -13
  809. package/src/utils/types/Flatten.ts +0 -4
  810. package/src/utils/types/MandateProps.ts +0 -19
  811. package/src/utils/types/Merge.ts +0 -20
  812. package/src/utils/types/index.ts +0 -5
  813. package/src/utils/uniqueId.ts +0 -6
  814. package/src/utils/userAgent.ts +0 -7
  815. package/stats.html +0 -3279
  816. package/tsconfig.build.json +0 -7
  817. package/tsconfig.json +0 -20
@@ -1,627 +0,0 @@
1
- ---
2
- title: Autocomplete
3
- status: Alpha
4
- ---
5
-
6
- import {Props} from '../src/props'
7
- import {Autocomplete} from '@primer/components'
8
-
9
- The `Autocomplete` components are used to render a text input that allows a user to quickly filter through a list of options to pick one or more values. It is comprised of an `Autocomplete.Input` component that a user types into, and a `Autocomplete.Menu` component that displays the list of selectable values.
10
-
11
- ## Basic Example
12
-
13
- ```jsx live
14
- <>
15
- <Box as="label" display="block" htmlFor="autocompleteInput-basic" id="autocompleteLabel-basic">
16
- Pick a branch
17
- </Box>
18
- <Autocomplete>
19
- <Autocomplete.Input id="autocompleteInput-basic" />
20
- <Autocomplete.Overlay>
21
- <Autocomplete.Menu
22
- items={[
23
- {text: 'main', id: 0},
24
- {text: 'autocomplete-tests', id: 1},
25
- {text: 'a11y-improvements', id: 2},
26
- {text: 'button-bug-fixes', id: 3},
27
- {text: 'radio-input-component', id: 4},
28
- {text: 'release-1.0.0', id: 5},
29
- {text: 'text-input-implementation', id: 6},
30
- {text: 'visual-design-tweaks', id: 7}
31
- ]}
32
- selectedItemIds={[]}
33
- aria-labelledby="autocompleteLabel-basic"
34
- />
35
- </Autocomplete.Overlay>
36
- </Autocomplete>
37
- </>
38
- ```
39
-
40
- ## Autocomplete.Input
41
-
42
- The text input is used to filter the options in the dropdown menu. It is also used to show the selected value (or values).
43
-
44
- The default input rendered is the `TextInput` component. A different text input component may be rendered by passing a different component to the `as` prop.
45
-
46
- The `Autocomplete.Input` should not be rendered without a `<label>` who's `htmlFor` prop matches the `Autocomplete.Input`'s `id` prop
47
-
48
- ### Component Props
49
-
50
- `Autocomplete.Input` accepts the same props as a native `<input />`. The other props of `Autocomplete.Input` depend on what component is passed to the `as` prop. The default value for `as` is [TextInput](/TextInput)
51
-
52
- ### Example: Passing a custom text input
53
-
54
- In this example, we're passing a [TextInputWithTokens](/TextInputWithTokens) component
55
-
56
- ```javascript live noinline
57
- const CustomTextInputExample = () => {
58
- const [tokens, setTokens] = React.useState([{text: 'zero', id: 0}])
59
- const selectedTokenIds = tokens.map(token => token.id)
60
- const [selectedItemIds, setSelectedItemIds] = React.useState(selectedTokenIds)
61
- const onTokenRemove = tokenId => {
62
- setTokens(tokens.filter(token => token.id !== tokenId))
63
- setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId))
64
- }
65
- const onSelectedChange = newlySelectedItems => {
66
- if (!Array.isArray(newlySelectedItems)) {
67
- return
68
- }
69
-
70
- setSelectedItemIds(newlySelectedItems.map(item => item.id))
71
-
72
- if (newlySelectedItems.length < selectedItemIds.length) {
73
- const newlySelectedItemIds = newlySelectedItems.map(({id}) => id)
74
- const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id))
75
-
76
- for (const removedItemId of removedItemIds) {
77
- onTokenRemove(removedItemId)
78
- }
79
-
80
- return
81
- }
82
-
83
- setTokens(newlySelectedItems.map(({id, text}) => ({id, text})))
84
- }
85
-
86
- return (
87
- <>
88
- <Box as="label" display="block" htmlFor="autocompleteInput-customInput" id="autocompleteLabel-customInput">
89
- Pick options
90
- </Box>
91
- <Autocomplete>
92
- <Autocomplete.Input
93
- as={TextInputWithTokens}
94
- tokens={tokens}
95
- onTokenRemove={onTokenRemove}
96
- id="autocompleteInput-customInput"
97
- />
98
- <Autocomplete.Overlay>
99
- <Autocomplete.Menu
100
- items={[
101
- {text: 'zero', id: 0},
102
- {text: 'one', id: 1},
103
- {text: 'two', id: 2},
104
- {text: 'three', id: 3},
105
- {text: 'four', id: 4},
106
- {text: 'five', id: 5},
107
- {text: 'six', id: 6},
108
- {text: 'seven', id: 7}
109
- ]}
110
- selectedItemIds={selectedItemIds}
111
- onSelectedChange={onSelectedChange}
112
- selectionVariant="multiple"
113
- aria-labelledby="autocompleteLabel-customInput"
114
- />
115
- </Autocomplete.Overlay>
116
- </Autocomplete>
117
- </>
118
- )
119
- }
120
-
121
- render(<CustomTextInputExample />)
122
- ```
123
-
124
- ## Autocomplete.Overlay
125
-
126
- The `Autocomplete.Overlay` wraps the `Autocomplete.Menu` to display it in an [Overlay]() component.
127
- Most `Autocomplete` implementations will use the `Autocomplete.Overlay` component, but there could be special cases where the `Autocomplete.Menu` should be rendered directly after the `Autocomplete.Input` (for example: an `Autocomplete` that is already being rendered in an `Overlay`).
128
-
129
- ### Component Props
130
-
131
- <Props of={Autocomplete.Overlay} />
132
-
133
- ### Example: Without `Autocomplete.Overlay`
134
-
135
- ```jsx live
136
- <>
137
- <Box as="label" display="block" htmlFor="autocompleteInput-withoutOverlay" id="autocompleteLabel-withoutOverlay">
138
- Pick a branch
139
- </Box>
140
- <Autocomplete>
141
- <Autocomplete.Input id="autocompleteInput-withoutOverlay" />
142
- <Autocomplete.Menu
143
- items={[
144
- {text: 'main', id: 0},
145
- {text: 'autocomplete-tests', id: 1},
146
- {text: 'a11y-improvements', id: 2},
147
- {text: 'button-bug-fixes', id: 3},
148
- {text: 'radio-input-component', id: 4},
149
- {text: 'release-1.0.0', id: 5},
150
- {text: 'text-input-implementation', id: 6},
151
- {text: 'visual-design-tweaks', id: 7}
152
- ]}
153
- selectedItemIds={[]}
154
- aria-labelledby="autocompleteLabel-withoutOverlay"
155
- />
156
- </Autocomplete>
157
- </>
158
- ```
159
-
160
- ## Autocomplete.Menu
161
-
162
- The `Autocomplete.Menu` component renders a list of selectable options in a non-modal dialog. The list is filtered and sorted to make it as easy as possible to find the option/s that a user is looking for.
163
-
164
- The `Autocomplete.Menu` component should be passed an `aria-labelledby` prop that matches the `id` prop of the `<label>` associated with the `Autocomplete.Input`
165
-
166
- ### Component Props
167
-
168
- <Props of={Autocomplete.Menu} />
169
-
170
- ### Customizing how menu items are rendered
171
-
172
- By default, menu items are just rendered as a single line of text. The list in the menu is rendered using the [Action List](/ActionList) component, so menu items can be rendered with all of the same options as Action List items.
173
- However, the `renderGroup`, `groupMetadata`, and `renderItem` props have not been implemented yet.
174
-
175
- #### Example: Render items using `ActionList.Item` props
176
-
177
- ```javascript live noinline
178
- function getColorCircle(color) {
179
- return function () {
180
- return (
181
- <Box
182
- bg={color}
183
- borderColor={color}
184
- width={14}
185
- height={14}
186
- borderRadius={10}
187
- margin="auto"
188
- borderWidth="1px"
189
- borderStyle="solid"
190
- />
191
- )
192
- }
193
- }
194
-
195
- const CustomRenderedItemExample = () => {
196
- const [tokens, setTokens] = React.useState([
197
- {text: 'enhancement', id: 1, fillColor: '#a2eeef'},
198
- {text: 'bug', id: 2, fillColor: '#d73a4a'},
199
- {text: 'good first issue', id: 3, fillColor: '#0cf478'}
200
- ])
201
- const selectedTokenIds = tokens.map(token => token.id)
202
- const [selectedItemIds, setSelectedItemIds] = React.useState(selectedTokenIds)
203
- const onTokenRemove = tokenId => {
204
- setTokens(tokens.filter(token => token.id !== tokenId))
205
- setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId))
206
- }
207
- const onSelectedChange = newlySelectedItems => {
208
- if (!Array.isArray(newlySelectedItems)) {
209
- return
210
- }
211
-
212
- setSelectedItemIds(newlySelectedItems.map(item => item.id))
213
-
214
- if (newlySelectedItems.length < selectedItemIds.length) {
215
- const newlySelectedItemIds = newlySelectedItems.map(({id}) => id)
216
- const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id))
217
-
218
- for (const removedItemId of removedItemIds) {
219
- onTokenRemove(removedItemId)
220
- }
221
-
222
- return
223
- }
224
-
225
- setTokens(newlySelectedItems.map(({id, text, metadata}) => ({id, text, fillColor: metadata.fillColor})))
226
- }
227
-
228
- return (
229
- <>
230
- <Box
231
- as="label"
232
- display="block"
233
- htmlFor="autocompleteInput-customRenderedItem"
234
- id="autocompleteLabel-customRenderedItem"
235
- >
236
- Issue labels
237
- </Box>
238
- <Autocomplete>
239
- <Autocomplete.Input
240
- as={TextInputWithTokens}
241
- tokens={tokens}
242
- tokenComponent={IssueLabelToken}
243
- onTokenRemove={onTokenRemove}
244
- id="autocompleteInput-customRenderedItem"
245
- />
246
- <Autocomplete.Overlay>
247
- <Autocomplete.Menu
248
- items={[
249
- {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1, metadata: {fillColor: '#a2eeef'}},
250
- {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2, metadata: {fillColor: '#d73a4a'}},
251
- {
252
- leadingVisual: getColorCircle('#0cf478'),
253
- text: 'good first issue',
254
- id: 3,
255
- metadata: {fillColor: '#0cf478'}
256
- },
257
- {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4, metadata: {fillColor: '#ffd78e'}},
258
- {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5, metadata: {fillColor: '#ff0000'}},
259
- {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6, metadata: {fillColor: '#a4f287'}},
260
- {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7, metadata: {fillColor: '#8dc6fc'}}
261
- ]}
262
- selectedItemIds={selectedItemIds}
263
- onSelectedChange={onSelectedChange}
264
- selectionVariant="multiple"
265
- aria-labelledby="autocompleteLabel-customRenderedItem"
266
- />
267
- </Autocomplete.Overlay>
268
- </Autocomplete>
269
- </>
270
- )
271
- }
272
-
273
- render(<CustomRenderedItemExample />)
274
- ```
275
-
276
- ### Sorting menu items
277
-
278
- Items can be displayed in any order that makes sense, but the `Autocomplete.Menu` component comes with a default sort behavior to make it easy to find selected items. The default behavior is to sort selected items to the top of the list after the menu has been closed.
279
-
280
- A function may be passed to the `sortOnCloseFn` prop if this default sorting logic is not helpful for your use case. The sort function will be only be called after the menu is closed so that items don't shift while users are trying to make a selection.
281
-
282
- #### Example: When the menu is re-opened, selected items get sorted to the end
283
-
284
- ```javascript live noinline
285
- const CustomSortAfterMenuClose = () => {
286
- const [selectedItemIds, setSelectedItemIds] = React.useState([])
287
- const isItemSelected = itemId => selectedItemIds.includes(itemId)
288
- const onSelectedChange = newlySelectedItems => {
289
- if (!Array.isArray(newlySelectedItems)) {
290
- return
291
- }
292
-
293
- setSelectedItemIds(newlySelectedItems.map(item => item.id))
294
- }
295
- const customSortFn = (itemIdA, itemIdB) =>
296
- isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1
297
-
298
- return (
299
- <>
300
- <Box as="label" display="block" htmlFor="autocompleteInput" id="autocompleteLabel">
301
- Pick branches
302
- </Box>
303
- <Autocomplete>
304
- <Autocomplete.Input id="autocompleteInput" />
305
- <Autocomplete.Overlay>
306
- <Autocomplete.Menu
307
- items={[
308
- {text: 'main', id: 0},
309
- {text: 'autocomplete-tests', id: 1},
310
- {text: 'a11y-improvements', id: 2},
311
- {text: 'button-bug-fixes', id: 3},
312
- {text: 'radio-input-component', id: 4},
313
- {text: 'release-1.0.0', id: 5},
314
- {text: 'text-input-implementation', id: 6},
315
- {text: 'visual-design-tweaks', id: 7}
316
- ]}
317
- selectedItemIds={selectedItemIds}
318
- aria-labelledby="autocompleteLabel"
319
- onSelectedChange={onSelectedChange}
320
- sortOnCloseFn={customSortFn}
321
- selectionVariant="multiple"
322
- />
323
- </Autocomplete.Overlay>
324
- </Autocomplete>
325
- </>
326
- )
327
- }
328
-
329
- render(<CustomSortAfterMenuClose />)
330
- ```
331
-
332
- ### Filtering items
333
-
334
- By default, menu items are filtered based on whether or not they match the value of the text input. The default filter is case-insensitive.
335
-
336
- A function may be passed to the `filterFn` prop if this default filtering behavior does not make sense for your use case.
337
-
338
- #### Example: Show any items that contain the input value
339
-
340
- ```javascript live noinline
341
- const CustomSearchFilter = () => {
342
- const [filterVal, setFilterVal] = React.useState('')
343
- const handleChange = event => {
344
- setFilterVal(event.currentTarget.value)
345
- }
346
- const customFilterFn = item => item.text.includes(filterVal)
347
-
348
- return (
349
- <>
350
- <Box as="label" display="block" htmlFor="autocompleteInput" id="autocompleteLabel">
351
- Pick a branch
352
- </Box>
353
- <Autocomplete>
354
- <Autocomplete.Input id="autocompleteInput" onChange={handleChange} />
355
- <Autocomplete.Overlay>
356
- <Autocomplete.Menu
357
- items={[
358
- {text: 'main', id: 0},
359
- {text: 'autocomplete-tests', id: 1},
360
- {text: 'a11y-improvements', id: 2},
361
- {text: 'button-bug-fixes', id: 3},
362
- {text: 'radio-input-component', id: 4},
363
- {text: 'release-1.0.0', id: 5},
364
- {text: 'text-input-implementation', id: 6},
365
- {text: 'visual-design-tweaks', id: 7}
366
- ]}
367
- selectedItemIds={[]}
368
- aria-labelledby="autocompleteLabel"
369
- filterFn={customFilterFn}
370
- />
371
- </Autocomplete.Overlay>
372
- </Autocomplete>
373
- </>
374
- )
375
- }
376
-
377
- render(<CustomSearchFilter />)
378
- ```
379
-
380
- ### Rendering the menu without an `Autocomplete.Overlay`
381
-
382
- If a `Autocomplete.Menu` is rendered without an `Autocomplete.Overlay` inside of a scrollable container, the ref of the scrollable container must be passed to the `customScrollContainerRef` to ensure that highlighted items are always scrolled into view.
383
-
384
- #### Example: Rendered without `Autocomplete.Overlay` with a `customScrollContainerRef`
385
-
386
- ```javascript live noinline
387
- const InOverlayWithCustomScrollContainerRef = () => {
388
- const scrollContainerRef = React.useRef(null)
389
- const inputRef = React.useRef(null)
390
-
391
- const [isOpen, setIsOpen] = React.useState(false)
392
- const handleOpen = () => {
393
- setIsOpen(true)
394
- inputRef.current && inputRef.current.focus()
395
- }
396
-
397
- return (
398
- <AnchoredOverlay
399
- open={isOpen}
400
- onOpen={handleOpen}
401
- onClose={() => setIsOpen(false)}
402
- width="large"
403
- height="xsmall"
404
- focusTrapSettings={{initialFocusRef: inputRef}}
405
- side="inside-top"
406
- renderAnchor={props => <ButtonInvisible {...props}>Pick branches</ButtonInvisible>}
407
- >
408
- <Box
409
- as="label"
410
- display="block"
411
- htmlFor="autocompleteInput"
412
- id="autocompleteLabel"
413
- sx={{
414
- // visually hides this label for sighted users
415
- position: 'absolute',
416
- width: '1px',
417
- height: '1px',
418
- padding: '0',
419
- margin: '-1px',
420
- overflow: 'hidden',
421
- clip: 'rect(0, 0, 0, 0)',
422
- whiteSpace: 'nowrap',
423
- borderWidth: '0'
424
- }}
425
- >
426
- Pick branches
427
- </Box>
428
- <Autocomplete>
429
- <Box display="flex" flexDirection="column" height="100%">
430
- <Box
431
- paddingX="3"
432
- paddingY="1"
433
- borderWidth={0}
434
- borderBottomWidth={1}
435
- borderColor="border.default"
436
- borderStyle="solid"
437
- >
438
- <Autocomplete.Input
439
- block
440
- as={TextInput}
441
- ref={inputRef}
442
- id="autocompleteInput"
443
- sx={{
444
- display: 'flex',
445
- border: '0',
446
- padding: '0',
447
- boxShadow: 'none',
448
- ':focus-within': {
449
- border: '0',
450
- boxShadow: 'none'
451
- }
452
- }}
453
- />
454
- </Box>
455
- <Box overflow="auto" flexGrow={1} ref={scrollContainerRef}>
456
- <Autocomplete.Menu
457
- items={[
458
- {text: 'main', id: 0},
459
- {text: 'autocomplete-tests', id: 1},
460
- {text: 'a11y-improvements', id: 2},
461
- {text: 'button-bug-fixes', id: 3},
462
- {text: 'radio-input-component', id: 4},
463
- {text: 'release-1.0.0', id: 5},
464
- {text: 'text-input-implementation', id: 6},
465
- {text: 'visual-design-tweaks', id: 7}
466
- ]}
467
- selectedItemIds={[]}
468
- customScrollContainerRef={scrollContainerRef}
469
- aria-labelledby="autocompleteLabel"
470
- />
471
- </Box>
472
- </Box>
473
- </Autocomplete>
474
- </AnchoredOverlay>
475
- )
476
- }
477
-
478
- render(<InOverlayWithCustomScrollContainerRef />)
479
- ```
480
-
481
- ### More examples
482
-
483
- #### Select multiple values
484
-
485
- ```javascript live noinline
486
- const MultiSelect = () => {
487
- const items = [
488
- {text: 'main', id: 0},
489
- {text: 'autocomplete-tests', id: 1},
490
- {text: 'a11y-improvements', id: 22},
491
- {text: 'button-bug-fixes', id: 3},
492
- {text: 'radio-input-component', id: 4},
493
- {text: 'release-1.0.0', id: 5},
494
- {text: 'text-input-implementation', id: 6},
495
- {text: 'visual-design-tweaks', id: 7}
496
- ]
497
- const [selectedItemIds, setSelectedItemIds] = React.useState([])
498
- const onSelectedChange = newlySelectedItems => {
499
- if (!Array.isArray(newlySelectedItems)) {
500
- return
501
- }
502
-
503
- setSelectedItemIds(newlySelectedItems.map(item => item.id))
504
- }
505
-
506
- const getItemById = id => items.find(item => item.id === id)
507
-
508
- return (
509
- <Box display="flex" sx={{gap: '1em'}}>
510
- <div>
511
- <Box as="label" display="block" htmlFor="autocompleteInput" id="autocompleteLabel">
512
- Pick branches
513
- </Box>
514
- <Autocomplete>
515
- <Autocomplete.Input id="autocompleteInput" />
516
- <Autocomplete.Overlay>
517
- <Autocomplete.Menu
518
- items={items}
519
- selectedItemIds={selectedItemIds}
520
- aria-labelledby="autocompleteLabel"
521
- onSelectedChange={onSelectedChange}
522
- selectionVariant="multiple"
523
- />
524
- </Autocomplete.Overlay>
525
- </Autocomplete>
526
- </div>
527
- <div>
528
- <div>Selected items:</div>
529
- <Box as="ul" my={0}>
530
- {selectedItemIds.map(selectedItemId => (
531
- <li key={selectedItemId}>{getItemById(selectedItemId).text}</li>
532
- ))}
533
- </Box>
534
- </div>
535
- </Box>
536
- )
537
- }
538
-
539
- render(<MultiSelect />)
540
- ```
541
-
542
- #### Select multiple values - new values can be added
543
-
544
- ```javascript live noinline
545
- const MultiSelectAddNewItem = () => {
546
- const [selectedItemIds, setSelectedItemIds] = React.useState([])
547
- const onSelectedChange = newlySelectedItems => {
548
- if (!Array.isArray(newlySelectedItems)) {
549
- return
550
- }
551
-
552
- setSelectedItemIds(newlySelectedItems.map(item => item.id))
553
- }
554
-
555
- const [localItemsState, setLocalItemsState] = React.useState([
556
- {text: 'main', id: 0},
557
- {text: 'autocomplete-tests', id: 1},
558
- {text: 'a11y-improvements', id: 22},
559
- {text: 'button-bug-fixes', id: 3},
560
- {text: 'radio-input-component', id: 4},
561
- {text: 'release-1.0.0', id: 5},
562
- {text: 'text-input-implementation', id: 6},
563
- {text: 'visual-design-tweaks', id: 7}
564
- ])
565
- const getItemById = id => localItemsState.find(item => item.id === id)
566
- const [filterVal, setFilterVal] = React.useState('')
567
-
568
- const onItemSelect = item => {
569
- onSelectedChange([...selectedItemIds.map(id => localItemsState.find(selectedItem => selectedItem.id === id)), item])
570
-
571
- if (!localItemsState.some(localItem => localItem.id === item.id)) {
572
- setLocalItemsState([...localItemsState, item])
573
- }
574
- }
575
-
576
- const handleChange = event => {
577
- setFilterVal(event.currentTarget.value)
578
- }
579
-
580
- return (
581
- <Box display="flex" sx={{gap: '1em'}}>
582
- <div>
583
- <Box as="label" display="block" htmlFor="autocompleteInput" id="autocompleteLabel">
584
- Pick or add branches
585
- </Box>
586
- <Autocomplete>
587
- <Autocomplete.Input onChange={handleChange} id="autocompleteInput" />
588
- <Autocomplete.Overlay>
589
- <Autocomplete.Menu
590
- addNewItem={
591
- filterVal && !localItemsState.map(localItem => localItem.text).includes(filterVal)
592
- ? {
593
- text: `Add '${filterVal}'`,
594
- handleAddItem: item => {
595
- onItemSelect({
596
- ...item,
597
- text: filterVal,
598
- selected: true
599
- })
600
- setFilterVal('')
601
- }
602
- }
603
- : undefined
604
- }
605
- items={localItemsState}
606
- selectedItemIds={selectedItemIds}
607
- onSelectedChange={onSelectedChange}
608
- selectionVariant="multiple"
609
- aria-labelledby="autocompleteLabel"
610
- />
611
- </Autocomplete.Overlay>
612
- </Autocomplete>
613
- </div>
614
- <div>
615
- <div>Selected items:</div>
616
- <Box as="ul" my={0}>
617
- {selectedItemIds.map(selectedItemId => (
618
- <li key={selectedItemId}>{getItemById(selectedItemId).text}</li>
619
- ))}
620
- </Box>
621
- </div>
622
- </Box>
623
- )
624
- }
625
-
626
- render(<MultiSelectAddNewItem />)
627
- ```
@@ -1,33 +0,0 @@
1
- ---
2
- title: Avatar
3
- componentId: avatar
4
- source: https://github.com/primer/react/blob/main/src/Avatar.tsx
5
- ---
6
-
7
- import {Props} from '../src/props'
8
- import {Avatar} from '@primer/components'
9
-
10
- ```jsx live
11
- <Avatar src="https://avatars.githubusercontent.com/primer" />
12
- ```
13
-
14
- ## Props
15
-
16
- <Props of={Avatar} />
17
-
18
- ## Examples
19
-
20
- ### Square
21
-
22
- ```jsx live
23
- <Avatar square src="https://avatars.githubusercontent.com/primer" />
24
- ```
25
-
26
- ### AvatarPair
27
-
28
- ```jsx live
29
- <AvatarPair>
30
- <Avatar src="https://avatars.githubusercontent.com/github" />
31
- <Avatar src="https://avatars.githubusercontent.com/primer" />
32
- </AvatarPair>
33
- ```
@@ -1,37 +0,0 @@
1
- ---
2
- title: AvatarStack
3
- ---
4
-
5
- import {Props} from '../src/props'
6
- import {AvatarStack} from '@primer/components'
7
-
8
- AvatarStack is used to display more than one Avatar in an inline stack.
9
-
10
- ### Default example
11
-
12
- ```jsx live
13
- <AvatarStack>
14
- <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer" />
15
- <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github" />
16
- <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom" />
17
- <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop" />
18
- </AvatarStack>
19
- ```
20
-
21
- ### Right aligned
22
-
23
- ```jsx live
24
- <AvatarStack alignRight>
25
- <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer" />
26
- <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github" />
27
- <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom" />
28
- <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop" />
29
- </AvatarStack>
30
- ```
31
-
32
- ## Props
33
-
34
- | Name | Type | Default | Description |
35
- | :--------- | :---------------- | :-----: | :----------------------------------- |
36
- | alignRight | Boolean | | Creates right aligned AvatarStack |
37
- | sx | SystemStyleObject | {} | Style to be applied to the component |