@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,79 +0,0 @@
1
- ---
2
- title: Header
3
- ---
4
-
5
- Use the `Header` component to create a header that has all of its items aligned vertically with consistent horizontal spacing.
6
-
7
- ## Default example
8
-
9
- All items directly under the Header component should be a `Header.Item` component. Inside these components can be anything (text, forms, images...), and the `Header.Item` component will make sure these elements vertically align with each other.
10
-
11
- `Header.Item` elements have a built-in margin that will need to be overridden with the `mr={0}` props for the last element in the container. We relied on the prop here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
12
-
13
- ```jsx live
14
- <Header>
15
- <Header.Item>
16
- <Header.Link href="#" fontSize={2}>
17
- <StyledOcticon icon={MarkGithubIcon} size={32} mr={2} />
18
- <span>GitHub</span>
19
- </Header.Link>
20
- </Header.Item>
21
- <Header.Item full>Menu</Header.Item>
22
- <Header.Item mr={0}>
23
- <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
24
- </Header.Item>
25
- </Header>
26
- ```
27
-
28
- ## Header with full-size item example
29
-
30
- ```jsx live
31
- <Header>
32
- <Header.Item>Item 1</Header.Item>
33
- <Header.Item full border={1} borderStyle="solid">
34
- Item 2
35
- </Header.Item>
36
- <Header.Item mr={0}>Item 3</Header.Item>
37
- </Header>
38
- ```
39
-
40
- ## Header with links example
41
-
42
- ```jsx live
43
- <Header>
44
- <Header.Item>
45
- <Header.Link href="#">About</Header.Link>
46
- </Header.Item>
47
- <Header.Item>
48
- <Header.Link href="#">Releases</Header.Link>
49
- </Header.Item>
50
- <Header.Item>
51
- <Header.Link href="#">Team</Header.Link>
52
- </Header.Item>
53
- </Header>
54
- ```
55
-
56
- ## System props
57
-
58
- <Note variant="warning">
59
-
60
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
61
-
62
- </Note>
63
-
64
- `Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
65
-
66
- ## Component props
67
-
68
- ### Header.Item
69
-
70
- | Prop name | Type | Description |
71
- | :-------- | :------ | :----------------------------------------- |
72
- | full | Boolean | stretches item to fill the available space |
73
-
74
- ### Header.Link
75
-
76
- | Prop name | Type | Description |
77
- | :-------- | :----- | :---------------------------------- |
78
- | as | String | sets the HTML tag for the component |
79
- | href | String | URL to be used for the Link |
@@ -1,22 +0,0 @@
1
- ---
2
- title: Heading
3
- ---
4
-
5
- The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
6
-
7
- **Attention:** Make sure to include a valid heading element to render a Heading component other than `h2` (`<Heading as="h1">H1 Element</Heading>`).
8
-
9
- ## Default example
10
- ```jsx live
11
- <Heading fontSize={1} mb={2}>H2 heading with fontSize={1}</Heading>
12
- ```
13
-
14
- ## System props
15
-
16
- Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
17
-
18
- ## Component props
19
-
20
- | Prop name | Type | Description |
21
- | :-------- | :------ | :----------------------------------------------- |
22
- | as | String or React element | sets the HTML tag for the component |
@@ -1,42 +0,0 @@
1
- ---
2
- title: Label
3
- ---
4
-
5
- The Label component is used to add contextual metadata to a design. Visually it styles text, adds padding, and rounded corners.
6
-
7
- ## Default example
8
-
9
- ```jsx live
10
- <>
11
- <Label variant="small" outline sx={{borderColor: "danger.emphasis", mr: 2, color: "danger.fg"}}>small</Label>
12
- <Label variant="medium" sx={{mr: 2}}>medium (default)</Label>
13
- <Label variant="large" sx={{mr: 2}}>large</Label>
14
- <Label variant="xl">xl label</Label>
15
-
16
- <Box mt={4}/>
17
- <Label variant="medium" sx={{bg:"#A575FF", m: 1}}>good first issue</Label>
18
- <Label variant="medium" sx={{bg:"#FF75C8", m: 1}}>🚂 deploy: train</Label>
19
- <Label variant="medium" sx={{bg:"#1C90FA", m: 1}}>css</Label>
20
- <Label variant="medium" sx={{bg:"#FFF06C", color:"#24292E", m: 1}}>documentation</Label>
21
- <Label variant="medium" sx={{bg: "#656BFE", m: 1}}>primer</Label>
22
- </>
23
- ```
24
-
25
- ## System props
26
-
27
- <Note variant="warning">
28
-
29
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
30
-
31
- </Note>
32
-
33
- Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
34
-
35
- ## Component props
36
-
37
- | Name | Type | Default | Description |
38
- | :--------- | :------ | :--------------------: | :----------------------------------------------------------------------------- |
39
- | outline | Boolean | | Creates an outline style label |
40
- | variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . |
41
- | dropshadow | Boolean | | Adds a dropshadow to the label |
42
- | bg | String | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. |
@@ -1,31 +0,0 @@
1
- ---
2
- title: LabelGroup
3
- ---
4
-
5
- The LabelGroup component is used to add commonly used margins and wrapping for groups of Labels.
6
-
7
- ## Default example
8
-
9
- ```jsx live
10
- <LabelGroup>
11
- <Label>Default label</Label>
12
- <Label sx={{color: "fg.onEmphasis", bg: "danger.emphasis"}}>
13
- Label with background indicating a closed PR state
14
- </Label>
15
- <Label outline>Default outline label</Label>
16
- </LabelGroup>
17
- ```
18
-
19
- ## System props
20
-
21
- <Note variant="warning">
22
-
23
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
24
-
25
- </Note>
26
-
27
- LabelGroup components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
28
-
29
- ## Component props
30
-
31
- LabelGroup does not get any additional props.
@@ -1,37 +0,0 @@
1
- ---
2
- title: Link
3
- ---
4
-
5
- The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
6
-
7
- In special cases where you'd like a `<button>` styled like a `Link`, use `<Link as='button'>`. Make sure to provide a click handler with `onClick`.
8
-
9
- **Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
10
-
11
- ## Default example
12
-
13
- ```jsx live
14
- <Link sx={{mb: 1}} href="https://github.com">
15
- Link
16
- </Link>
17
- ```
18
-
19
- ## System props
20
-
21
- <Note variant="warning">
22
-
23
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
24
-
25
- </Note>
26
-
27
- Link components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
28
-
29
- ## Component props
30
-
31
- | Name | Type | Default | Description |
32
- | :--------- | :------ | :-----: | :------------------------------------------------------------------------------ |
33
- | href | String | | URL to be used for the Link |
34
- | muted | Boolean | false | Uses a less prominent shade for Link color, and the default link shade on hover |
35
- | underline | Boolean | false | Adds underline to the Link |
36
- | as | String | 'a' | Can be 'a', 'button', 'input', or 'summary' |
37
- | hoverColor | String | | Color used when hovering over link |
@@ -1,94 +0,0 @@
1
- ---
2
- title: Overlay
3
- ---
4
-
5
- An `Overlay` is a flexible floating surface, used to display transient content such as menus, selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay` component handles all behaviors needed by overlay UIs as well as the common styles that all overlays should have. `Overlay` is the base component for many of our overlay-type components.
6
-
7
- Behaviors include:
8
-
9
- - Rendering the overlay in a React Portal so that it always renders on top of other content on the page
10
- - Trapping focus
11
- - Calling a user provided function when the user presses `Escape`
12
- - Calling a user provided function when the user clicks outside of the container
13
- - Focusing either user provided element, or the first focusable element in the container when it is opened
14
- - Returning focus to an element when container is closed
15
-
16
- ## Accessibility considerations
17
-
18
- - The `Overlay` must either have:
19
- - A value set for the `aria-labelledby` attribute that refers to a visible title.
20
- - An `aria-label` attribute
21
- - If the `Overlay` should also have a longer description, use `aria-describedby`
22
- - The `Overlay` component has a `role="dialog"` set on it, if you are using `Overlay` for alerts, you can pass in `role="alertdialog"` instead. Please read the [W3C guidelines](https://www.w3.org/TR/wai-aria-1.1/#alertdialog) to determine which role is best for your use case
23
- - The `Overlay` component has `aria-modal` set to `true` by default and should not be overridden as all `Overlay`s behave as modals.
24
-
25
- See the W3C accessibility recommendations for modals [here](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_roles_states_props).
26
-
27
- ## Positioning
28
-
29
- `Overlay` renders its `children` within a div positioned absolutely within a portal within the default portal root. The overlay will not update its positioning if the portal root's positioning changes (e.g., if the portal root is statically positioned after some DOM element that dynamically resizes). You may consider [customizing the portal or specifying a different portal root](/Portal#customizing-the-portal-root) to achieve different positioning behavior.
30
-
31
- ## Default example
32
-
33
- ```javascript live noinline
34
- const Demo = () => {
35
- // you must manage your own open state
36
- const [isOpen, setIsOpen] = React.useState(false)
37
- const noButtonRef = React.useRef(null)
38
- const anchorRef = React.useRef(null)
39
- return (
40
- <>
41
- <Button ref={anchorRef} onClick={() => setIsOpen(!isOpen)}>
42
- open overlay
43
- </Button>
44
- {/* be sure to conditionally render the Overlay. This helps with performance and is required. */}
45
- {isOpen && (
46
- <Overlay
47
- initialFocusRef={noButtonRef}
48
- returnFocusRef={anchorRef}
49
- ignoreClickRefs={[anchorRef]}
50
- onEscape={() => setIsOpen(!isOpen)}
51
- onClickOutside={() => setIsOpen(false)}
52
- aria-labelledby="title"
53
- >
54
- <Box display="flex" flexDirection="column" p={2}>
55
- <Text id="title">Are you sure you would like to delete this item?</Text>
56
- <Button>yes</Button>
57
- <Button ref={noButtonRef}>no</Button>
58
- </Box>
59
- </Overlay>
60
- )}
61
- </>
62
- )
63
- }
64
-
65
- render(<Demo />)
66
- ```
67
-
68
- ## System props
69
-
70
- <Note variant="warning">
71
-
72
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
73
-
74
- </Note>
75
-
76
- `Overlay` gets `COMMON` system props. Read the [System Props](/system-props) doc page for a full list of available props.
77
-
78
- ## Component props
79
-
80
- | Name | Type | Default | Description |
81
- | :------------------ | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
82
- | ignoreClickRefs | `React.RefObject<HTMLElement> []` | `undefined` | Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice. |
83
- | initialFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused. |
84
- | anchorRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Element the `Overlay` should be anchored to. |
85
- | returnFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Ref for the element to focus when the `Overlay` is closed. |
86
- | onClickOutside | `function` | `undefined` | Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`. |
87
- | onEscape | `function` | `undefined` | Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`. |
88
- | width | `'small' │ 'medium' │ 'large' │ 'xlarge' │ 'xxlarge' │ 'auto'` | `auto` | Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`. |
89
- | height | `'xsmall', 'small', 'medium', 'large', 'xlarge', 'auto'` | `auto` | Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`. |
90
- | visibility | `'visible', 'hidden'` | `visible` | Sets the visibility of the `Overlay`. |
91
- | anchorSide | `AnchorSide` | undefined | Optional. If provided, the Overlay will slide into position from the side of the anchor with a brief animation |
92
- | top | `number` | 0 | Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`). |
93
- | left | `number` | 0 | Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`). |
94
- | portalContainerName | `string` | `undefined` | Optional. If defined, Overlays will be rendered in the named portal. See also `Portal`. |
@@ -1,27 +0,0 @@
1
- ---
2
- title: Pagehead
3
- ---
4
-
5
- Give a page a clear, separated title and optional top nav by using Pagehead.
6
-
7
- ## Default example
8
-
9
- ```jsx live
10
- <Pagehead>Pagehead</Pagehead>
11
- ```
12
-
13
- ## System props
14
-
15
- <Note variant="warning">
16
-
17
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
18
-
19
- </Note>
20
-
21
- Pagehead components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
22
-
23
- ## Component props
24
-
25
- | Name | Type | Default | Description |
26
- | :--- | :----- | :-----: | :---------------------------------- |
27
- | as | String | `div` | Sets the HTML tag for the component |
@@ -1,187 +0,0 @@
1
- ---
2
- title: Pagination
3
- ---
4
-
5
- import State from '../components/State'
6
-
7
- Use the pagination component to create a connected set of links that lead to related pages (for example, previous, next, or page numbers).
8
-
9
- ## Basic example
10
-
11
- The pagination component only requires two properties to render: `pageCount`, which is the total number of pages, and `currentPage`, which is the currently selected page number (which should be managed by the consuming application).
12
-
13
- ```jsx live
14
- <Pagination pageCount={15} currentPage={2} onPageChange={e => e.preventDefault()} />
15
- ```
16
-
17
- However, to handle state changes when the user clicks a page, you also need to pass `onPageChange`, which is a function that takes a click event and page number as an argument:
18
-
19
- ```javascript
20
- type PageChangeCallback = (evt: React.MouseEvent, page: number) => void
21
- ```
22
-
23
- By default, clicking a link in the pagination component will cause the browser to navigate to the URL specified by the page. To cancel navigation and handle state management on your own, you should call `preventDefault` on the event, as in this example:
24
-
25
- ```jsx live
26
- <State default={1}>
27
- {([page, setPage]) => {
28
- const totalPages = 15
29
- const onPageChange = (evt, page) => {
30
- evt.preventDefault()
31
- setPage(page)
32
- }
33
-
34
- return (
35
- <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
36
- <Box>
37
- Current page: {page} / {totalPages}
38
- </Box>
39
- <Pagination pageCount={totalPages} currentPage={page} onPageChange={onPageChange} />
40
- </Box>
41
- )
42
- }}
43
- </State>
44
- ```
45
-
46
- ## Customizing link URLs
47
-
48
- To customize the URL generated for each link, you can pass a function to the `hrefBuilder` property. The function should take a page number as an argument and return a URL to use for the link.
49
-
50
- ```javascript
51
- type HrefBuilder = (page: number) => string
52
- ```
53
-
54
- ```jsx live
55
- <State default={'(nothing clicked yet)'}>
56
- {([lastUrl, setLastUrl]) => {
57
- const onPageChange = (evt, page) => {
58
- evt.preventDefault()
59
- setLastUrl(evt.target.href)
60
- }
61
- const hrefBuilder = page => {
62
- return `https://example.com/pages/${page}`
63
- }
64
-
65
- return (
66
- <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
67
- <Box>The last URL clicked was: {lastUrl}</Box>
68
- <Pagination pageCount={15} currentPage={2} onPageChange={onPageChange} hrefBuilder={hrefBuilder} />
69
- </Box>
70
- )
71
- }}
72
- </State>
73
- ```
74
-
75
- ## Customizing which pages are shown
76
-
77
- Two props control how many links are displayed in the pagination container at any given time. `marginPageCount` controls how many pages are guaranteed to be displayed on the left and right of the component; `surroundingPageCount` controls how many pages will be displayed to the left and right of the current page.
78
-
79
- ```jsx live
80
- <Pagination
81
- pageCount={20}
82
- currentPage={10}
83
- marginPageCount={1}
84
- surroundingPageCount={2}
85
- onPageChange={e => e.preventDefault()}
86
- />
87
- ```
88
-
89
- The algorithm tries to minimize the amount the component shrinks and grows as the user changes pages; for this reason, if any of the pages in the margin (controlled via `marginPageCount`) intersect with pages in the center (controlled by `surroundingPageCount`), the center section will be shifted away from the margin. Consider the following examples, where pages one through six are shown when any of the first four pages are selected. Only when the fifth page is selected and there is a gap between the margin pages and the center pages does a break element appear.
90
-
91
- ```jsx live
92
- <Box>
93
- {[1, 2, 3, 4, 5].map(page => (
94
- <Pagination
95
- pageCount={20}
96
- currentPage={page}
97
- marginPageCount={1}
98
- surroundingPageCount={2}
99
- onPageChange={e => e.preventDefault()}
100
- />
101
- ))}
102
- </Box>
103
- ```
104
-
105
- ### Previous/next pagination
106
-
107
- To hide all the page numbers and create a simple pagination container with just the Previous and Next buttons, set `showPages` to `false`.
108
-
109
- ```jsx live
110
- <State default={1}>
111
- {([page, setPage]) => {
112
- const totalPages = 10
113
- const onPageChange = (evt, page) => {
114
- evt.preventDefault()
115
- setPage(page)
116
- }
117
-
118
- return (
119
- <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
120
- <Box>
121
- Current page: {page} / {totalPages}
122
- </Box>
123
- <Pagination pageCount={totalPages} currentPage={page} onPageChange={onPageChange} showPages={false} />
124
- </Box>
125
- )
126
- }}
127
- </State>
128
- ```
129
-
130
- ## System props
131
-
132
- <Note variant="warning">
133
-
134
- System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
135
-
136
- </Note>
137
-
138
- Pagination components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
139
-
140
- ## Component props
141
-
142
- | Name | Type | Default | Description |
143
- | :------------------- | :------- | :--------: | :--------------------------------------------------------------------- |
144
- | currentPage | Number | | **Required.** The currently selected page. |
145
- | hrefBuilder | Function | `#${page}` | A function to generate links based on page number. |
146
- | marginPageCount | Number | 1 | How many pages to always show at the left and right of the component. |
147
- | onPageChange | Function | no-op | Called with event and page number when a page is clicked. |
148
- | pageCount | Number | | **Required.** The total number of pages. |
149
- | showPages | Boolean | `true` | Whether or not to show the individual page links. |
150
- | surroundingPageCount | Number | 2 | How many pages to display on each side of the currently selected page. |
151
-
152
- ## Theming
153
-
154
- The following snippet shows the properties in the theme that control the styling of the pagination component:
155
-
156
- ```javascript
157
- export default {
158
- // ... rest of theme ...
159
- pagination: {
160
- borderRadius,
161
- spaceBetween,
162
- colors: {
163
- normal: {
164
- fg
165
- },
166
- disabled: {
167
- fg,
168
- border
169
- },
170
- hover: {
171
- border
172
- },
173
- selected: {
174
- fg,
175
- bg,
176
- border
177
- },
178
- active: {
179
- border
180
- },
181
- nextPrevious: {
182
- fg
183
- }
184
- }
185
- }
186
- }
187
- ```
@@ -1,81 +0,0 @@
1
- ---
2
- title: PointerBox
3
- ---
4
-
5
- PointerBox is a [BorderBox](./BorderBox) component with a caret added to it.
6
-
7
- ## Default example
8
-
9
- ```jsx live
10
- <PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis">
11
- PointerBox
12
- </PointerBox>
13
- ```
14
-
15
- ```javascript live noinline
16
- function PointerBoxDemo(props) {
17
- const [pos, setPos] = React.useState('top')
18
-
19
- return (
20
- <Box>
21
- <Heading as="h3" sx={{fontSize: 3}}>
22
- Caret Position
23
- </Heading>
24
- <CaretSelector current={pos} onChange={setPos} />
25
- <Box position="relative" pt={4}>
26
- <PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis" caret={pos}>
27
- {' '}
28
- Content{' '}
29
- </PointerBox>
30
- </Box>
31
- </Box>
32
- )
33
- }
34
-
35
- function CaretSelector(props) {
36
- const choices = [
37
- 'top',
38
- 'bottom',
39
- 'left',
40
- 'right',
41
- 'left-bottom',
42
- 'left-top',
43
- 'right-bottom',
44
- 'right-top',
45
- 'top-left',
46
- 'bottom-left',
47
- 'top-right',
48
- 'bottom-right'
49
- ].map(dir => (
50
- <label>
51
- <input
52
- key={dir}
53
- type="radio"
54
- name="caret"
55
- value={dir}
56
- checked={dir === props.current}
57
- onChange={() => props.onChange(dir)}
58
- />{' '}
59
- {dir}
60
- </label>
61
- ))
62
-
63
- return (
64
- <Box display="grid" gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
65
- {choices}
66
- </Box>
67
- )
68
- }
69
-
70
- render(<PointerBoxDemo />)
71
- ```
72
-
73
- ## System props
74
-
75
- PointerBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
76
-
77
- ## Component props
78
-
79
- | Name | Type | Default | Description |
80
- | :---- | :----- | :-----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
81
- | caret | String | bottom | Sets the location of the caret. The format is `[edge]-[position on edge]`. For example, `right-top` will position the caret on the top of the right edge of the box. Use `top`, `right`, `bottom`, or `left` to position a caret in the center of that edge. |