@primer/components 31.0.0-rc.c90c1dae → 31.0.0

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 (800) hide show
  1. package/package.json +1 -1
  2. package/.changeset/README.md +0 -8
  3. package/.changeset/config.json +0 -10
  4. package/.devcontainer/devcontainer.json +0 -8
  5. package/.eslintrc.json +0 -137
  6. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  7. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  8. package/.github/dependabot.yml +0 -18
  9. package/.github/pull_request_template.md +0 -18
  10. package/.github/workflows/check_for_changeset.yml +0 -25
  11. package/.github/workflows/ci.yml +0 -31
  12. package/.github/workflows/deploy_preview.yml +0 -47
  13. package/.github/workflows/deploy_production.yml +0 -70
  14. package/.github/workflows/release.yml +0 -35
  15. package/.github/workflows/release_canary.yml +0 -70
  16. package/.github/workflows/release_candidate.yml +0 -60
  17. package/.github/workflows/size.yml +0 -13
  18. package/.github/workflows/stale.yml +0 -26
  19. package/.gitignore +0 -10
  20. package/.npmrc +0 -4
  21. package/.nvmrc +0 -1
  22. package/.storybook/main.js +0 -11
  23. package/.storybook/preview.js +0 -113
  24. package/.vscode/launch.json +0 -21
  25. package/.vscode/settings.json +0 -13
  26. package/@types/@styled-system/index.d.ts +0 -0
  27. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  28. package/@types/@styled-system/props/index.d.ts +0 -1
  29. package/@types/jest-styled-components/index.d.ts +0 -1
  30. package/CODEOWNERS +0 -2
  31. package/babel-defines.js +0 -13
  32. package/babel.config.js +0 -39
  33. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  34. package/contributor-docs/CONTRIBUTING.md +0 -274
  35. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  36. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
  37. package/contributor-docs/adrs/adr-003-prop-norms.md +0 -72
  38. package/contributor-docs/behaviors.md +0 -132
  39. package/contributor-docs/component-contents-api-patterns.md +0 -316
  40. package/contributor-docs/principles.md +0 -39
  41. package/docs/.eslintrc +0 -0
  42. package/docs/.gitignore +0 -91
  43. package/docs/components/PropsList.js +0 -5
  44. package/docs/components/State.js +0 -9
  45. package/docs/components/constants.js +0 -34
  46. package/docs/components/index.js +0 -2
  47. package/docs/content/ActionList.mdx +0 -99
  48. package/docs/content/ActionMenu.mdx +0 -80
  49. package/docs/content/AnchoredOverlay.mdx +0 -37
  50. package/docs/content/Autocomplete.mdx +0 -627
  51. package/docs/content/Avatar.mdx +0 -33
  52. package/docs/content/AvatarStack.mdx +0 -37
  53. package/docs/content/BorderBox.md +0 -46
  54. package/docs/content/Box.md +0 -74
  55. package/docs/content/BranchName.md +0 -18
  56. package/docs/content/Breadcrumbs.md +0 -52
  57. package/docs/content/Buttons.md +0 -56
  58. package/docs/content/CircleBadge.md +0 -45
  59. package/docs/content/CircleOcticon.md +0 -18
  60. package/docs/content/CounterLabel.md +0 -32
  61. package/docs/content/Details.md +0 -105
  62. package/docs/content/Dialog.md +0 -108
  63. package/docs/content/Dialog2.mdx +0 -179
  64. package/docs/content/Dropdown.md +0 -72
  65. package/docs/content/DropdownMenu.mdx +0 -49
  66. package/docs/content/FilterList.md +0 -44
  67. package/docs/content/FilteredSearch.md +0 -39
  68. package/docs/content/Flash.md +0 -44
  69. package/docs/content/Flex.md +0 -58
  70. package/docs/content/FormGroup.md +0 -46
  71. package/docs/content/Grid.md +0 -59
  72. package/docs/content/Header.md +0 -79
  73. package/docs/content/Heading.md +0 -22
  74. package/docs/content/Label.md +0 -42
  75. package/docs/content/LabelGroup.md +0 -31
  76. package/docs/content/Link.md +0 -37
  77. package/docs/content/Overlay.mdx +0 -94
  78. package/docs/content/Pagehead.md +0 -27
  79. package/docs/content/Pagination.md +0 -187
  80. package/docs/content/PointerBox.md +0 -81
  81. package/docs/content/Popover.md +0 -137
  82. package/docs/content/Portal.mdx +0 -78
  83. package/docs/content/Position.md +0 -100
  84. package/docs/content/ProgressBar.mdx +0 -29
  85. package/docs/content/SelectMenu.md +0 -435
  86. package/docs/content/SelectPanel.mdx +0 -67
  87. package/docs/content/SideNav.md +0 -179
  88. package/docs/content/Spinner.mdx +0 -32
  89. package/docs/content/StateLabel.md +0 -35
  90. package/docs/content/StyledOcticon.md +0 -36
  91. package/docs/content/SubNav.md +0 -102
  92. package/docs/content/TabNav.md +0 -50
  93. package/docs/content/Text.md +0 -31
  94. package/docs/content/TextInput.md +0 -34
  95. package/docs/content/TextInputTokens.mdx +0 -89
  96. package/docs/content/TextInputWithTokens.mdx +0 -97
  97. package/docs/content/Timeline.md +0 -138
  98. package/docs/content/Token.mdx +0 -381
  99. package/docs/content/Tooltip.md +0 -41
  100. package/docs/content/Truncate.md +0 -64
  101. package/docs/content/UnderlineNav.md +0 -53
  102. package/docs/content/anchoredPosition.mdx +0 -163
  103. package/docs/content/core-concepts.md +0 -70
  104. package/docs/content/focusTrap.mdx +0 -103
  105. package/docs/content/focusZone.mdx +0 -145
  106. package/docs/content/getting-started.md +0 -138
  107. package/docs/content/index.md +0 -33
  108. package/docs/content/linting.md +0 -35
  109. package/docs/content/overriding-styles.mdx +0 -82
  110. package/docs/content/philosophy.md +0 -23
  111. package/docs/content/primer-theme.md +0 -89
  112. package/docs/content/ssr.mdx +0 -43
  113. package/docs/content/system-props.mdx +0 -37
  114. package/docs/content/theme-reference.md +0 -16
  115. package/docs/content/theming.md +0 -249
  116. package/docs/content/useOnEscapePress.mdx +0 -56
  117. package/docs/content/useOnOutsideClick.mdx +0 -57
  118. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  119. package/docs/content/useOverlay.mdx +0 -62
  120. package/docs/content/useSafeTimeout.mdx +0 -32
  121. package/docs/gatsby-config.js +0 -30
  122. package/docs/gatsby-node.js +0 -101
  123. package/docs/package-lock.json +0 -20756
  124. package/docs/package.json +0 -36
  125. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -23
  126. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
  127. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -54
  128. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -133
  129. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  130. package/docs/src/props.js +0 -77
  131. package/jest.config.js +0 -13
  132. package/lib/__tests__/ActionList.test.d.ts +0 -1
  133. package/lib/__tests__/ActionList.test.js +0 -69
  134. package/lib/__tests__/ActionList.types.test.d.ts +0 -6
  135. package/lib/__tests__/ActionList.types.test.js +0 -69
  136. package/lib/__tests__/ActionMenu.test.d.ts +0 -1
  137. package/lib/__tests__/ActionMenu.test.js +0 -151
  138. package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
  139. package/lib/__tests__/AnchoredOverlay.test.js +0 -160
  140. package/lib/__tests__/Autocomplete.test.d.ts +0 -1
  141. package/lib/__tests__/Autocomplete.test.js +0 -528
  142. package/lib/__tests__/Avatar.test.d.ts +0 -1
  143. package/lib/__tests__/Avatar.test.js +0 -67
  144. package/lib/__tests__/AvatarStack.test.d.ts +0 -1
  145. package/lib/__tests__/AvatarStack.test.js +0 -71
  146. package/lib/__tests__/BorderBox.test.d.ts +0 -1
  147. package/lib/__tests__/BorderBox.test.js +0 -58
  148. package/lib/__tests__/Box.test.d.ts +0 -1
  149. package/lib/__tests__/Box.test.js +0 -78
  150. package/lib/__tests__/BranchName.test.d.ts +0 -1
  151. package/lib/__tests__/BranchName.test.js +0 -36
  152. package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
  153. package/lib/__tests__/Breadcrumbs.test.js +0 -37
  154. package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  155. package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
  156. package/lib/__tests__/Button.test.d.ts +0 -1
  157. package/lib/__tests__/Button.test.js +0 -143
  158. package/lib/__tests__/Caret.test.d.ts +0 -1
  159. package/lib/__tests__/Caret.test.js +0 -52
  160. package/lib/__tests__/CircleBadge.test.d.ts +0 -1
  161. package/lib/__tests__/CircleBadge.test.js +0 -83
  162. package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
  163. package/lib/__tests__/CircleOcticon.test.js +0 -71
  164. package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
  165. package/lib/__tests__/ConfirmationDialog.test.js +0 -134
  166. package/lib/__tests__/CounterLabel.test.d.ts +0 -1
  167. package/lib/__tests__/CounterLabel.test.js +0 -58
  168. package/lib/__tests__/Details.test.d.ts +0 -1
  169. package/lib/__tests__/Details.test.js +0 -117
  170. package/lib/__tests__/Dialog.test.d.ts +0 -1
  171. package/lib/__tests__/Dialog.test.js +0 -184
  172. package/lib/__tests__/Dropdown.test.d.ts +0 -1
  173. package/lib/__tests__/Dropdown.test.js +0 -63
  174. package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
  175. package/lib/__tests__/DropdownMenu.test.js +0 -150
  176. package/lib/__tests__/FilterList.test.d.ts +0 -1
  177. package/lib/__tests__/FilterList.test.js +0 -36
  178. package/lib/__tests__/FilterListItem.test.d.ts +0 -1
  179. package/lib/__tests__/FilterListItem.test.js +0 -46
  180. package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
  181. package/lib/__tests__/FilteredSearch.test.js +0 -36
  182. package/lib/__tests__/Flash.test.d.ts +0 -1
  183. package/lib/__tests__/Flash.test.js +0 -62
  184. package/lib/__tests__/Flex.test.d.ts +0 -1
  185. package/lib/__tests__/Flex.test.js +0 -74
  186. package/lib/__tests__/FormGroup.test.d.ts +0 -1
  187. package/lib/__tests__/FormGroup.test.js +0 -54
  188. package/lib/__tests__/Grid.test.d.ts +0 -1
  189. package/lib/__tests__/Grid.test.js +0 -104
  190. package/lib/__tests__/Header.test.d.ts +0 -1
  191. package/lib/__tests__/Header.test.js +0 -58
  192. package/lib/__tests__/Heading.test.d.ts +0 -1
  193. package/lib/__tests__/Heading.test.js +0 -109
  194. package/lib/__tests__/Label.test.d.ts +0 -1
  195. package/lib/__tests__/Label.test.js +0 -46
  196. package/lib/__tests__/LabelGroup.test.d.ts +0 -1
  197. package/lib/__tests__/LabelGroup.test.js +0 -38
  198. package/lib/__tests__/Link.test.d.ts +0 -1
  199. package/lib/__tests__/Link.test.js +0 -70
  200. package/lib/__tests__/Merge.types.test.d.ts +0 -30
  201. package/lib/__tests__/Merge.types.test.js +0 -27
  202. package/lib/__tests__/Overlay.test.d.ts +0 -1
  203. package/lib/__tests__/Overlay.test.js +0 -145
  204. package/lib/__tests__/Pagehead.test.d.ts +0 -1
  205. package/lib/__tests__/Pagehead.test.js +0 -37
  206. package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
  207. package/lib/__tests__/Pagination/Pagination.test.js +0 -47
  208. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  209. package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
  210. package/lib/__tests__/PointerBox.test.d.ts +0 -1
  211. package/lib/__tests__/PointerBox.test.js +0 -46
  212. package/lib/__tests__/Popover.test.d.ts +0 -1
  213. package/lib/__tests__/Popover.test.js +0 -66
  214. package/lib/__tests__/Portal.test.d.ts +0 -1
  215. package/lib/__tests__/Portal.test.js +0 -124
  216. package/lib/__tests__/Position.test.d.ts +0 -1
  217. package/lib/__tests__/Position.test.js +0 -143
  218. package/lib/__tests__/ProgressBar.test.d.ts +0 -1
  219. package/lib/__tests__/ProgressBar.test.js +0 -68
  220. package/lib/__tests__/SelectMenu.test.d.ts +0 -1
  221. package/lib/__tests__/SelectMenu.test.js +0 -155
  222. package/lib/__tests__/SelectPanel.test.d.ts +0 -1
  223. package/lib/__tests__/SelectPanel.test.js +0 -80
  224. package/lib/__tests__/SideNav.test.d.ts +0 -1
  225. package/lib/__tests__/SideNav.test.js +0 -71
  226. package/lib/__tests__/Spinner.test.d.ts +0 -1
  227. package/lib/__tests__/Spinner.test.js +0 -53
  228. package/lib/__tests__/StateLabel.test.d.ts +0 -1
  229. package/lib/__tests__/StateLabel.test.js +0 -71
  230. package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
  231. package/lib/__tests__/StyledOcticon.test.js +0 -40
  232. package/lib/__tests__/SubNav.test.d.ts +0 -1
  233. package/lib/__tests__/SubNav.test.js +0 -62
  234. package/lib/__tests__/SubNavLink.test.d.ts +0 -1
  235. package/lib/__tests__/SubNavLink.test.js +0 -49
  236. package/lib/__tests__/TabNav.test.d.ts +0 -1
  237. package/lib/__tests__/TabNav.test.js +0 -49
  238. package/lib/__tests__/Text.test.d.ts +0 -1
  239. package/lib/__tests__/Text.test.js +0 -105
  240. package/lib/__tests__/TextInput.test.d.ts +0 -1
  241. package/lib/__tests__/TextInput.test.js +0 -78
  242. package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
  243. package/lib/__tests__/TextInputWithTokens.test.js +0 -389
  244. package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
  245. package/lib/__tests__/ThemeProvider.test.js +0 -444
  246. package/lib/__tests__/Timeline.test.d.ts +0 -1
  247. package/lib/__tests__/Timeline.test.js +0 -75
  248. package/lib/__tests__/Token.test.d.ts +0 -1
  249. package/lib/__tests__/Token.test.js +0 -180
  250. package/lib/__tests__/Tooltip.test.d.ts +0 -1
  251. package/lib/__tests__/Tooltip.test.js +0 -69
  252. package/lib/__tests__/Truncate.test.d.ts +0 -1
  253. package/lib/__tests__/Truncate.test.js +0 -63
  254. package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
  255. package/lib/__tests__/UnderlineNav.test.js +0 -72
  256. package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
  257. package/lib/__tests__/UnderlineNavLink.test.js +0 -51
  258. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  259. package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
  260. package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  261. package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
  262. package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
  263. package/lib/__tests__/behaviors/focusZone.test.js +0 -570
  264. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  265. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
  266. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  267. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
  268. package/lib/__tests__/filterObject.test.d.ts +0 -1
  269. package/lib/__tests__/filterObject.test.js +0 -30
  270. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  271. package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
  272. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  273. package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
  274. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  275. package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
  276. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  277. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
  278. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  279. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
  280. package/lib/__tests__/theme.test.d.ts +0 -1
  281. package/lib/__tests__/theme.test.js +0 -36
  282. package/lib/__tests__/themeGet.test.d.ts +0 -1
  283. package/lib/__tests__/themeGet.test.js +0 -25
  284. package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
  285. package/lib/__tests__/useSafeTimeout.test.js +0 -45
  286. package/lib/stories/ActionList.stories.js +0 -453
  287. package/lib/stories/ActionMenu.stories.js +0 -338
  288. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  289. package/lib/stories/Autocomplete.stories.js +0 -608
  290. package/lib/stories/AvatarStack.stories.js +0 -49
  291. package/lib/stories/Button.stories.js +0 -125
  292. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  293. package/lib/stories/Dialog.stories.js +0 -265
  294. package/lib/stories/DropdownMenu.stories.js +0 -122
  295. package/lib/stories/IssueLabelToken.stories.js +0 -165
  296. package/lib/stories/Overlay.stories.js +0 -204
  297. package/lib/stories/Portal.stories.js +0 -104
  298. package/lib/stories/ProfileToken.stories.js +0 -162
  299. package/lib/stories/SelectPanel.stories.js +0 -399
  300. package/lib/stories/TextInputWithTokens.stories.js +0 -235
  301. package/lib/stories/ThemeProvider.stories.js +0 -102
  302. package/lib/stories/Token.stories.js +0 -159
  303. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  304. package/lib/stories/useFocusTrap.stories.js +0 -356
  305. package/lib/stories/useFocusZone.stories.js +0 -599
  306. package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
  307. package/lib-esm/__tests__/ActionList.test.js +0 -57
  308. package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
  309. package/lib-esm/__tests__/ActionList.types.test.js +0 -45
  310. package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
  311. package/lib-esm/__tests__/ActionMenu.test.js +0 -139
  312. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
  313. package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -134
  314. package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
  315. package/lib-esm/__tests__/Autocomplete.test.js +0 -494
  316. package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
  317. package/lib-esm/__tests__/Avatar.test.js +0 -56
  318. package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
  319. package/lib-esm/__tests__/AvatarStack.test.js +0 -58
  320. package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
  321. package/lib-esm/__tests__/BorderBox.test.js +0 -47
  322. package/lib-esm/__tests__/Box.test.d.ts +0 -1
  323. package/lib-esm/__tests__/Box.test.js +0 -67
  324. package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
  325. package/lib-esm/__tests__/BranchName.test.js +0 -26
  326. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
  327. package/lib-esm/__tests__/Breadcrumbs.test.js +0 -27
  328. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  329. package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
  330. package/lib-esm/__tests__/Button.test.d.ts +0 -1
  331. package/lib-esm/__tests__/Button.test.js +0 -133
  332. package/lib-esm/__tests__/Caret.test.d.ts +0 -1
  333. package/lib-esm/__tests__/Caret.test.js +0 -42
  334. package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
  335. package/lib-esm/__tests__/CircleBadge.test.js +0 -70
  336. package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
  337. package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
  338. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
  339. package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
  340. package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
  341. package/lib-esm/__tests__/CounterLabel.test.js +0 -47
  342. package/lib-esm/__tests__/Details.test.d.ts +0 -1
  343. package/lib-esm/__tests__/Details.test.js +0 -107
  344. package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
  345. package/lib-esm/__tests__/Dialog.test.js +0 -171
  346. package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
  347. package/lib-esm/__tests__/Dropdown.test.js +0 -53
  348. package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
  349. package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
  350. package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
  351. package/lib-esm/__tests__/FilterList.test.js +0 -26
  352. package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
  353. package/lib-esm/__tests__/FilterListItem.test.js +0 -36
  354. package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
  355. package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
  356. package/lib-esm/__tests__/Flash.test.d.ts +0 -1
  357. package/lib-esm/__tests__/Flash.test.js +0 -51
  358. package/lib-esm/__tests__/Flex.test.d.ts +0 -1
  359. package/lib-esm/__tests__/Flex.test.js +0 -64
  360. package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
  361. package/lib-esm/__tests__/FormGroup.test.js +0 -44
  362. package/lib-esm/__tests__/Grid.test.d.ts +0 -1
  363. package/lib-esm/__tests__/Grid.test.js +0 -94
  364. package/lib-esm/__tests__/Header.test.d.ts +0 -1
  365. package/lib-esm/__tests__/Header.test.js +0 -48
  366. package/lib-esm/__tests__/Heading.test.d.ts +0 -1
  367. package/lib-esm/__tests__/Heading.test.js +0 -99
  368. package/lib-esm/__tests__/Label.test.d.ts +0 -1
  369. package/lib-esm/__tests__/Label.test.js +0 -36
  370. package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
  371. package/lib-esm/__tests__/LabelGroup.test.js +0 -26
  372. package/lib-esm/__tests__/Link.test.d.ts +0 -1
  373. package/lib-esm/__tests__/Link.test.js +0 -60
  374. package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
  375. package/lib-esm/__tests__/Merge.types.test.js +0 -14
  376. package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
  377. package/lib-esm/__tests__/Overlay.test.js +0 -123
  378. package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
  379. package/lib-esm/__tests__/Pagehead.test.js +0 -26
  380. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
  381. package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
  382. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  383. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
  384. package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
  385. package/lib-esm/__tests__/PointerBox.test.js +0 -36
  386. package/lib-esm/__tests__/Popover.test.d.ts +0 -1
  387. package/lib-esm/__tests__/Popover.test.js +0 -53
  388. package/lib-esm/__tests__/Portal.test.d.ts +0 -1
  389. package/lib-esm/__tests__/Portal.test.js +0 -104
  390. package/lib-esm/__tests__/Position.test.d.ts +0 -1
  391. package/lib-esm/__tests__/Position.test.js +0 -133
  392. package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
  393. package/lib-esm/__tests__/ProgressBar.test.js +0 -58
  394. package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
  395. package/lib-esm/__tests__/SelectMenu.test.js +0 -145
  396. package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
  397. package/lib-esm/__tests__/SelectPanel.test.js +0 -65
  398. package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
  399. package/lib-esm/__tests__/SideNav.test.js +0 -60
  400. package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
  401. package/lib-esm/__tests__/Spinner.test.js +0 -43
  402. package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
  403. package/lib-esm/__tests__/StateLabel.test.js +0 -61
  404. package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
  405. package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
  406. package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
  407. package/lib-esm/__tests__/SubNav.test.js +0 -50
  408. package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
  409. package/lib-esm/__tests__/SubNavLink.test.js +0 -39
  410. package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
  411. package/lib-esm/__tests__/TabNav.test.js +0 -39
  412. package/lib-esm/__tests__/Text.test.d.ts +0 -1
  413. package/lib-esm/__tests__/Text.test.js +0 -93
  414. package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
  415. package/lib-esm/__tests__/TextInput.test.js +0 -68
  416. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
  417. package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -341
  418. package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
  419. package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
  420. package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
  421. package/lib-esm/__tests__/Timeline.test.js +0 -65
  422. package/lib-esm/__tests__/Token.test.d.ts +0 -1
  423. package/lib-esm/__tests__/Token.test.js +0 -166
  424. package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
  425. package/lib-esm/__tests__/Tooltip.test.js +0 -59
  426. package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
  427. package/lib-esm/__tests__/Truncate.test.js +0 -53
  428. package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
  429. package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
  430. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
  431. package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
  432. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  433. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
  434. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  435. package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
  436. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
  437. package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
  438. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  439. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
  440. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  441. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
  442. package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
  443. package/lib-esm/__tests__/filterObject.test.js +0 -27
  444. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  445. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
  446. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  447. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
  448. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  449. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
  450. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  451. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
  452. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  453. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
  454. package/lib-esm/__tests__/theme.test.d.ts +0 -1
  455. package/lib-esm/__tests__/theme.test.js +0 -33
  456. package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
  457. package/lib-esm/__tests__/themeGet.test.js +0 -22
  458. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
  459. package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
  460. package/lib-esm/stories/ActionList.stories.js +0 -394
  461. package/lib-esm/stories/ActionMenu.stories.js +0 -293
  462. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  463. package/lib-esm/stories/Autocomplete.stories.js +0 -549
  464. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  465. package/lib-esm/stories/Button.stories.js +0 -86
  466. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  467. package/lib-esm/stories/Dialog.stories.js +0 -240
  468. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  469. package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
  470. package/lib-esm/stories/Overlay.stories.js +0 -173
  471. package/lib-esm/stories/Portal.stories.js +0 -68
  472. package/lib-esm/stories/ProfileToken.stories.js +0 -136
  473. package/lib-esm/stories/SelectPanel.stories.js +0 -334
  474. package/lib-esm/stories/TextInputWithTokens.stories.js +0 -196
  475. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  476. package/lib-esm/stories/Token.stories.js +0 -133
  477. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  478. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  479. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  480. package/migrating.md +0 -250
  481. package/now.json +0 -17
  482. package/package-lock.json +0 -29369
  483. package/rollup.config.js +0 -36
  484. package/script/build +0 -19
  485. package/script/build-storybook +0 -10
  486. package/script/setup +0 -12
  487. package/src/ActionList/Divider.tsx +0 -25
  488. package/src/ActionList/Group.tsx +0 -45
  489. package/src/ActionList/Header.tsx +0 -74
  490. package/src/ActionList/Item.tsx +0 -483
  491. package/src/ActionList/List.tsx +0 -258
  492. package/src/ActionList/index.ts +0 -21
  493. package/src/ActionMenu.tsx +0 -106
  494. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
  495. package/src/AnchoredOverlay/index.ts +0 -2
  496. package/src/Autocomplete/Autocomplete.tsx +0 -103
  497. package/src/Autocomplete/AutocompleteContext.tsx +0 -19
  498. package/src/Autocomplete/AutocompleteInput.tsx +0 -179
  499. package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
  500. package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
  501. package/src/Autocomplete/index.ts +0 -2
  502. package/src/Avatar.tsx +0 -46
  503. package/src/AvatarPair.tsx +0 -35
  504. package/src/AvatarStack.tsx +0 -159
  505. package/src/BaseStyles.tsx +0 -53
  506. package/src/BorderBox.tsx +0 -18
  507. package/src/Box.tsx +0 -54
  508. package/src/BranchName.tsx +0 -19
  509. package/src/Breadcrumbs.tsx +0 -101
  510. package/src/Button/Button.tsx +0 -40
  511. package/src/Button/ButtonBase.tsx +0 -43
  512. package/src/Button/ButtonClose.tsx +0 -40
  513. package/src/Button/ButtonDanger.tsx +0 -43
  514. package/src/Button/ButtonGroup.tsx +0 -55
  515. package/src/Button/ButtonInvisible.tsx +0 -32
  516. package/src/Button/ButtonOutline.tsx +0 -43
  517. package/src/Button/ButtonPrimary.tsx +0 -41
  518. package/src/Button/ButtonStyles.tsx +0 -36
  519. package/src/Button/ButtonTableList.tsx +0 -58
  520. package/src/Button/index.ts +0 -16
  521. package/src/Caret.tsx +0 -133
  522. package/src/CircleBadge.tsx +0 -55
  523. package/src/CircleOcticon.tsx +0 -37
  524. package/src/CounterLabel.tsx +0 -52
  525. package/src/Details.tsx +0 -23
  526. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  527. package/src/Dialog/Dialog.tsx +0 -432
  528. package/src/Dialog.tsx +0 -149
  529. package/src/Dropdown.tsx +0 -158
  530. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  531. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  532. package/src/DropdownMenu/index.ts +0 -4
  533. package/src/DropdownStyles.ts +0 -128
  534. package/src/FilterList.tsx +0 -81
  535. package/src/FilteredActionList/FilteredActionList.tsx +0 -142
  536. package/src/FilteredActionList/index.ts +0 -2
  537. package/src/FilteredSearch.tsx +0 -28
  538. package/src/Flash.tsx +0 -77
  539. package/src/Flex.tsx +0 -15
  540. package/src/FormGroup.tsx +0 -27
  541. package/src/Grid.tsx +0 -15
  542. package/src/Header.tsx +0 -84
  543. package/src/Heading.tsx +0 -21
  544. package/src/Label.tsx +0 -75
  545. package/src/LabelGroup.tsx +0 -18
  546. package/src/Link.tsx +0 -46
  547. package/src/Overlay.tsx +0 -197
  548. package/src/Pagehead.tsx +0 -17
  549. package/src/Pagination/Pagination.tsx +0 -214
  550. package/src/Pagination/index.ts +0 -4
  551. package/src/Pagination/model.tsx +0 -187
  552. package/src/PointerBox.tsx +0 -31
  553. package/src/Popover.tsx +0 -236
  554. package/src/Portal/Portal.tsx +0 -96
  555. package/src/Portal/index.ts +0 -5
  556. package/src/Position.tsx +0 -63
  557. package/src/ProgressBar.tsx +0 -52
  558. package/src/SelectMenu/SelectMenu.tsx +0 -125
  559. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  560. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  561. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  562. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  563. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  564. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  565. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  566. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  567. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  568. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  569. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  570. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  571. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  572. package/src/SelectMenu/index.ts +0 -15
  573. package/src/SelectPanel/SelectPanel.tsx +0 -173
  574. package/src/SelectPanel/index.ts +0 -2
  575. package/src/SideNav.tsx +0 -193
  576. package/src/Spinner.tsx +0 -59
  577. package/src/StateLabel.tsx +0 -102
  578. package/src/StyledOcticon.tsx +0 -24
  579. package/src/SubNav.tsx +0 -129
  580. package/src/TabNav.tsx +0 -77
  581. package/src/Text.tsx +0 -13
  582. package/src/TextInput.tsx +0 -68
  583. package/src/TextInputWithTokens.tsx +0 -271
  584. package/src/ThemeProvider.tsx +0 -176
  585. package/src/Timeline.tsx +0 -141
  586. package/src/Token/AvatarToken.tsx +0 -54
  587. package/src/Token/IssueLabelToken.tsx +0 -150
  588. package/src/Token/Token.tsx +0 -112
  589. package/src/Token/TokenBase.tsx +0 -134
  590. package/src/Token/_RemoveTokenButton.tsx +0 -98
  591. package/src/Token/_TokenTextContainer.tsx +0 -47
  592. package/src/Token/index.ts +0 -3
  593. package/src/Tooltip.tsx +0 -263
  594. package/src/Truncate.tsx +0 -36
  595. package/src/UnderlineNav.tsx +0 -110
  596. package/src/_TextInputWrapper.tsx +0 -105
  597. package/src/_UnstyledTextInput.tsx +0 -19
  598. package/src/__tests__/.eslintrc.json +0 -11
  599. package/src/__tests__/ActionList.test.tsx +0 -53
  600. package/src/__tests__/ActionList.types.test.tsx +0 -51
  601. package/src/__tests__/ActionMenu.test.tsx +0 -136
  602. package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
  603. package/src/__tests__/Autocomplete.test.tsx +0 -444
  604. package/src/__tests__/Avatar.test.tsx +0 -44
  605. package/src/__tests__/AvatarStack.test.tsx +0 -48
  606. package/src/__tests__/BorderBox.test.tsx +0 -43
  607. package/src/__tests__/Box.test.tsx +0 -42
  608. package/src/__tests__/BranchName.test.tsx +0 -26
  609. package/src/__tests__/Breadcrumbs.test.tsx +0 -27
  610. package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
  611. package/src/__tests__/Button.test.tsx +0 -128
  612. package/src/__tests__/Caret.test.tsx +0 -36
  613. package/src/__tests__/CircleBadge.test.tsx +0 -66
  614. package/src/__tests__/CircleOcticon.test.tsx +0 -50
  615. package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
  616. package/src/__tests__/CounterLabel.test.tsx +0 -50
  617. package/src/__tests__/Details.test.tsx +0 -115
  618. package/src/__tests__/Dialog.test.tsx +0 -155
  619. package/src/__tests__/Dropdown.test.tsx +0 -53
  620. package/src/__tests__/DropdownMenu.test.tsx +0 -136
  621. package/src/__tests__/FilterList.test.tsx +0 -26
  622. package/src/__tests__/FilterListItem.test.tsx +0 -31
  623. package/src/__tests__/FilteredSearch.test.tsx +0 -26
  624. package/src/__tests__/Flash.test.tsx +0 -45
  625. package/src/__tests__/Flex.test.tsx +0 -58
  626. package/src/__tests__/FormGroup.test.tsx +0 -38
  627. package/src/__tests__/Grid.test.tsx +0 -82
  628. package/src/__tests__/Header.test.tsx +0 -49
  629. package/src/__tests__/Heading.test.tsx +0 -91
  630. package/src/__tests__/Label.test.tsx +0 -34
  631. package/src/__tests__/LabelGroup.test.tsx +0 -30
  632. package/src/__tests__/Link.test.tsx +0 -47
  633. package/src/__tests__/Merge.types.test.ts +0 -39
  634. package/src/__tests__/Overlay.test.tsx +0 -103
  635. package/src/__tests__/Pagehead.test.tsx +0 -23
  636. package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
  637. package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
  638. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
  639. package/src/__tests__/PointerBox.test.tsx +0 -34
  640. package/src/__tests__/Popover.test.tsx +0 -68
  641. package/src/__tests__/Portal.test.tsx +0 -103
  642. package/src/__tests__/Position.test.tsx +0 -117
  643. package/src/__tests__/ProgressBar.test.tsx +0 -40
  644. package/src/__tests__/SelectMenu.test.tsx +0 -142
  645. package/src/__tests__/SelectPanel.test.tsx +0 -63
  646. package/src/__tests__/SideNav.test.tsx +0 -62
  647. package/src/__tests__/Spinner.test.tsx +0 -42
  648. package/src/__tests__/StateLabel.test.tsx +0 -48
  649. package/src/__tests__/StyledOcticon.test.tsx +0 -26
  650. package/src/__tests__/SubNav.test.tsx +0 -50
  651. package/src/__tests__/SubNavLink.test.tsx +0 -31
  652. package/src/__tests__/TabNav.test.tsx +0 -32
  653. package/src/__tests__/Text.test.tsx +0 -78
  654. package/src/__tests__/TextInput.test.tsx +0 -49
  655. package/src/__tests__/TextInputWithTokens.test.tsx +0 -262
  656. package/src/__tests__/ThemeProvider.test.tsx +0 -441
  657. package/src/__tests__/Timeline.test.tsx +0 -58
  658. package/src/__tests__/Token.test.tsx +0 -118
  659. package/src/__tests__/Tooltip.test.tsx +0 -52
  660. package/src/__tests__/Truncate.test.tsx +0 -43
  661. package/src/__tests__/UnderlineNav.test.tsx +0 -58
  662. package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
  663. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
  664. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
  665. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -332
  666. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3414
  667. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
  668. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
  669. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
  670. package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
  671. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
  672. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
  673. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
  674. package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -840
  675. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
  676. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -141
  677. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -64
  678. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
  679. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
  680. package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
  681. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -200
  682. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
  683. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -106
  684. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
  685. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
  686. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
  687. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
  688. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
  689. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
  690. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
  691. package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
  692. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
  693. package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -74
  694. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
  695. package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -213
  696. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
  697. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
  698. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
  699. package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
  700. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
  701. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -469
  702. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -123
  703. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
  704. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
  705. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -388
  706. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -25
  707. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
  708. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
  709. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
  710. package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
  711. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -440
  712. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -5308
  713. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
  714. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
  715. package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3787
  716. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
  717. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
  718. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
  719. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
  720. package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
  721. package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
  722. package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
  723. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
  724. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
  725. package/src/__tests__/filterObject.test.ts +0 -54
  726. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
  727. package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
  728. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
  729. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
  730. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
  731. package/src/__tests__/theme.test.ts +0 -41
  732. package/src/__tests__/themeGet.test.ts +0 -15
  733. package/src/__tests__/useSafeTimeout.test.tsx +0 -36
  734. package/src/behaviors/anchoredPosition.ts +0 -442
  735. package/src/behaviors/focusTrap.ts +0 -184
  736. package/src/behaviors/focusZone.ts +0 -713
  737. package/src/behaviors/scrollIntoViewingArea.ts +0 -27
  738. package/src/constants.ts +0 -62
  739. package/src/hooks/index.ts +0 -11
  740. package/src/hooks/useAnchoredPosition.ts +0 -53
  741. package/src/hooks/useCombinedRefs.ts +0 -40
  742. package/src/hooks/useDetails.tsx +0 -54
  743. package/src/hooks/useDialog.ts +0 -121
  744. package/src/hooks/useFocusTrap.ts +0 -80
  745. package/src/hooks/useFocusZone.ts +0 -64
  746. package/src/hooks/useOnEscapePress.ts +0 -63
  747. package/src/hooks/useOnOutsideClick.tsx +0 -82
  748. package/src/hooks/useOpenAndCloseFocus.ts +0 -32
  749. package/src/hooks/useOverlay.tsx +0 -34
  750. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  751. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  752. package/src/hooks/useRenderForcingRef.ts +0 -22
  753. package/src/hooks/useResizeObserver.ts +0 -11
  754. package/src/hooks/useSafeTimeout.ts +0 -38
  755. package/src/hooks/useScrollFlash.ts +0 -21
  756. package/src/index.ts +0 -170
  757. package/src/polyfills/eventListenerSignal.ts +0 -66
  758. package/src/stories/ActionList.stories.tsx +0 -437
  759. package/src/stories/ActionMenu.stories.tsx +0 -322
  760. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  761. package/src/stories/Autocomplete.stories.tsx +0 -572
  762. package/src/stories/AvatarStack.stories.tsx +0 -37
  763. package/src/stories/Button.stories.tsx +0 -92
  764. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  765. package/src/stories/Dialog.stories.tsx +0 -240
  766. package/src/stories/DropdownMenu.stories.tsx +0 -84
  767. package/src/stories/IssueLabelToken.stories.tsx +0 -138
  768. package/src/stories/Overlay.stories.tsx +0 -213
  769. package/src/stories/Portal.stories.tsx +0 -109
  770. package/src/stories/ProfileToken.stories.tsx +0 -129
  771. package/src/stories/SelectPanel.stories.tsx +0 -353
  772. package/src/stories/TextInputWithTokens.stories.tsx +0 -146
  773. package/src/stories/ThemeProvider.stories.tsx +0 -104
  774. package/src/stories/Token.stories.tsx +0 -126
  775. package/src/stories/useAnchoredPosition.stories.tsx +0 -320
  776. package/src/stories/useFocusTrap.stories.tsx +0 -400
  777. package/src/stories/useFocusZone.stories.tsx +0 -663
  778. package/src/sx.ts +0 -9
  779. package/src/theme-preval.js +0 -79
  780. package/src/theme.ts +0 -3
  781. package/src/utils/deprecate.tsx +0 -73
  782. package/src/utils/isNumeric.tsx +0 -4
  783. package/src/utils/iterateFocusableElements.ts +0 -121
  784. package/src/utils/ssr.tsx +0 -1
  785. package/src/utils/test-deprecations.tsx +0 -19
  786. package/src/utils/test-helpers.tsx +0 -7
  787. package/src/utils/test-matchers.tsx +0 -109
  788. package/src/utils/testing.tsx +0 -242
  789. package/src/utils/theme.js +0 -64
  790. package/src/utils/types/AriaRole.ts +0 -71
  791. package/src/utils/types/ComponentProps.ts +0 -13
  792. package/src/utils/types/Flatten.ts +0 -4
  793. package/src/utils/types/MandateProps.ts +0 -19
  794. package/src/utils/types/Merge.ts +0 -20
  795. package/src/utils/types/index.ts +0 -5
  796. package/src/utils/uniqueId.ts +0 -6
  797. package/src/utils/userAgent.ts +0 -7
  798. package/stats.html +0 -3279
  799. package/tsconfig.build.json +0 -7
  800. package/tsconfig.json +0 -20
@@ -1,43 +0,0 @@
1
- import styled from 'styled-components'
2
- import {get} from '../constants'
3
- import sx, {SxProp} from '../sx'
4
- import {ComponentProps} from '../utils/types'
5
- import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
6
-
7
- const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
8
- color: ${get('colors.btn.outline.text')};
9
- border: 1px solid ${get('colors.btn.border')};
10
- background-color: ${get('colors.btn.bg')};
11
- box-shadow: ${get('shadows.btn.shadow')};
12
-
13
- &:hover {
14
- color: ${get('colors.btn.outline.hoverText')};
15
- background-color: ${get('colors.btn.outline.hoverBg')};
16
- border-color: ${get('colors.btn.outline.hoverBorder')};
17
- box-shadow: ${get('shadows.btn.outline.hoverShadow')};
18
- }
19
- // focus must come before :active so that the active box shadow overrides
20
- &:focus {
21
- border-color: ${get('colors.btn.outline.focusBorder')};
22
- box-shadow: ${get('shadows.btn.outline.focusShadow')};
23
- }
24
-
25
- &:active {
26
- color: ${get('colors.btn.outline.selectedText')};
27
- background-color: ${get('colors.btn.outline.selectedBg')};
28
- box-shadow: ${get('shadows.btn.outline.selectedShadow')};
29
- border-color: ${get('colors.btn.outline.selectedBorder')};
30
- }
31
-
32
- &:disabled {
33
- color: ${get('colors.btn.outline.disabledText')};
34
- background-color: ${get('colors.btn.outline.disabledBg')};
35
- border-color: ${get('colors.btn.border')};
36
- }
37
-
38
- ${buttonSystemProps};
39
- ${sx};
40
- `
41
-
42
- export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>
43
- export default ButtonOutline
@@ -1,41 +0,0 @@
1
- import styled from 'styled-components'
2
- import {get} from '../constants'
3
- import sx, {SxProp} from '../sx'
4
- import {ComponentProps} from '../utils/types'
5
- import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
6
-
7
- export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
8
- color: ${get('colors.btn.primary.text')};
9
- border: 1px solid ${get('colors.btn.primary.border')};
10
- background-color: ${get('colors.btn.primary.bg')};
11
- box-shadow: ${get('shadows.btn.primary.shadow')};
12
-
13
- &:hover {
14
- color: ${get('colors.btn.primary.hoverText')};
15
- background-color: ${get('colors.btn.primary.hoverBg')};
16
- border-color: ${get('colors.btn.primary.hoverBorder')};
17
- box-shadow: ${get('shadows.btn.primary.hoverShadow')};
18
- }
19
- // focus must come before :active so that the active box shadow overrides
20
- &:focus {
21
- border-color: ${get('colors.btn.primary.focusBorder')};
22
- box-shadow: ${get('shadows.btn.primary.focusShadow')};
23
- }
24
-
25
- &:active {
26
- background-color: ${get('colors.btn.primary.selectedBg')};
27
- box-shadow: ${get('shadows.btn.primary.selectedShadow')};
28
- }
29
-
30
- &:disabled {
31
- color: ${get('colors.btn.primary.disabledText')};
32
- background-color: ${get('colors.btn.primary.disabledBg')};
33
- border-color: ${get('colors.btn.primary.disabledBorder')};
34
- }
35
-
36
- ${buttonSystemProps};
37
- ${sx};
38
- `
39
-
40
- export type ButtonPrimaryProps = ComponentProps<typeof ButtonPrimary>
41
- export default ButtonPrimary
@@ -1,36 +0,0 @@
1
- import {css} from 'styled-components'
2
- import {get} from '../constants'
3
-
4
- export default css`
5
- position: relative;
6
- display: inline-block;
7
- padding: 6px 16px;
8
- font-family: inherit;
9
- font-weight: ${get('fontWeights.bold')};
10
- line-height: 20px;
11
- white-space: nowrap;
12
- vertical-align: middle;
13
- cursor: pointer;
14
- user-select: none;
15
- border-radius: ${get('radii.2')};
16
- appearance: none;
17
- text-decoration: none;
18
- text-align: center;
19
-
20
- &:hover {
21
- // needed to override link styles
22
- text-decoration: none;
23
- }
24
-
25
- &:focus {
26
- outline: none;
27
- }
28
-
29
- &:disabled {
30
- cursor: default;
31
- }
32
-
33
- &:disabled svg {
34
- opacity: 0.6;
35
- }
36
- `
@@ -1,58 +0,0 @@
1
- import styled from 'styled-components'
2
- import {
3
- COMMON,
4
- get,
5
- LAYOUT,
6
- SystemCommonProps,
7
- SystemLayoutProps,
8
- SystemTypographyProps,
9
- TYPOGRAPHY
10
- } from '../constants'
11
- import sx, {SxProp} from '../sx'
12
- import {ComponentProps} from '../utils/types'
13
-
14
- type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
15
-
16
- const ButtonTableList = styled.summary<StyledButtonTableListProps>`
17
- display: inline-block;
18
- padding: 0;
19
- font-size: ${get('fontSizes.1')};
20
- color: ${get('colors.fg.muted')};
21
- text-decoration: none;
22
- white-space: nowrap;
23
- cursor: pointer;
24
- user-select: none;
25
- background-color: transparent;
26
- border: 0;
27
- appearance: none; // Corrects inability to style clickable input types in iOS.
28
-
29
- &:hover {
30
- text-decoration: underline;
31
- }
32
-
33
- &:disabled {
34
- &,
35
- &:hover {
36
- color: ${get('colors.primer.fg.disabled')};
37
- cursor: default;
38
- }
39
- }
40
-
41
- &:after {
42
- display: inline-block;
43
- margin-left: ${get('space.1')};
44
- width: 0;
45
- height: 0;
46
- vertical-align: -2px;
47
- content: '';
48
- border: 4px solid transparent;
49
- border-top-color: currentcolor;
50
- }
51
- ${COMMON}
52
- ${TYPOGRAPHY}
53
- ${LAYOUT}
54
- ${sx};
55
- `
56
-
57
- export type ButtonTableListProps = ComponentProps<typeof ButtonTableList>
58
- export default ButtonTableList
@@ -1,16 +0,0 @@
1
- export {default} from './Button'
2
- export type {ButtonProps} from './Button'
3
- export {default as ButtonDanger} from './ButtonDanger'
4
- export type {ButtonDangerProps} from './ButtonDanger'
5
- export {default as ButtonGroup} from './ButtonGroup'
6
- export type {ButtonGroupProps} from './ButtonGroup'
7
- export {default as ButtonOutline} from './ButtonOutline'
8
- export type {ButtonOutlineProps} from './ButtonOutline'
9
- export {default as ButtonPrimary} from './ButtonPrimary'
10
- export type {ButtonPrimaryProps} from './ButtonPrimary'
11
- export {default as ButtonInvisible} from './ButtonInvisible'
12
- export type {ButtonInvisibleProps} from './ButtonInvisible'
13
- export {default as ButtonTableList} from './ButtonTableList'
14
- export type {ButtonTableListProps} from './ButtonTableList'
15
- export {default as ButtonClose} from './ButtonClose'
16
- export type {ButtonCloseProps} from './ButtonClose'
package/src/Caret.tsx DELETED
@@ -1,133 +0,0 @@
1
- import React from 'react'
2
- import {ThemeContext} from 'styled-components'
3
- import {style} from 'styled-system'
4
- import {Theme} from './ThemeProvider'
5
-
6
- type Location =
7
- | 'top'
8
- | 'top-left'
9
- | 'top-right'
10
- | 'right'
11
- | 'right-top'
12
- | 'right-bottom'
13
- | 'bottom'
14
- | 'bottom-left'
15
- | 'bottom-right'
16
- | 'left'
17
- | 'left-top'
18
- | 'left-bottom'
19
-
20
- type Alignment = 'top' | 'right' | 'bottom' | 'left'
21
-
22
- const oppositeEdge = {
23
- top: 'Bottom',
24
- right: 'Left',
25
- bottom: 'Top',
26
- left: 'Right'
27
- }
28
-
29
- const perpendicularEdge = {
30
- top: 'Left',
31
- right: 'Top',
32
- bottom: 'Left',
33
- left: 'Top'
34
- }
35
-
36
- function getEdgeAlign(location: Location) {
37
- const [edge, align] = location.split('-')
38
- return [edge as Alignment, align as Alignment | undefined] as const
39
- }
40
-
41
- function getPosition(edge: Alignment, align: Alignment | undefined, spacing: number) {
42
- const opposite = oppositeEdge[edge].toLowerCase()
43
- const perp = perpendicularEdge[edge].toLowerCase()
44
- return {
45
- [opposite]: '100%',
46
- [align || perp]: align ? spacing : '50%'
47
- }
48
- }
49
-
50
- const getBg = style({prop: 'bg', key: 'colors'})
51
- const getBorderColor = style({prop: 'borderColor', key: 'colors'})
52
- const getBorderWidth = style({prop: 'borderWidth', key: 'borderWidths', scale: [0, 1]})
53
-
54
- export type CaretProps = {
55
- bg?: string
56
- borderColor?: string
57
- borderWidth?: string | number
58
- size?: number
59
- location?: Location
60
- theme?: Theme
61
- }
62
-
63
- function Caret(props: CaretProps) {
64
- const theme = React.useContext(ThemeContext)
65
- const propsWithTheme = {...props, theme: props.theme ?? theme}
66
- const {bg} = getBg(propsWithTheme)
67
- const {borderColor} = getBorderColor(propsWithTheme)
68
- const {borderWidth} = getBorderWidth(propsWithTheme)
69
- const {size = 8, location = 'bottom'} = props
70
- const [edge, align] = getEdgeAlign(location)
71
- const perp = perpendicularEdge[edge]
72
-
73
- // note: these arrays represent points in the form [x, y]
74
- const a = [-size, 0]
75
- const b = [0, size]
76
- const c = [size, 0]
77
-
78
- // spaces are optional in path `d` attribute, and points are
79
- // represented in the form `x,y` -- which is what the arrays above
80
- // become when stringified!
81
- const triangle = `M${a}L${b}L${c}L${a}Z`
82
- const line = `M${a}L${b}L${c}`
83
-
84
- const transform = {
85
- top: `translate(${[size, size * 2]}) rotate(180)`,
86
- right: `translate(${[0, size]}) rotate(-90)`,
87
- bottom: `translate(${[size, 0]})`,
88
- left: `translate(${[size * 2, size]}) rotate(90)`
89
- }[edge]
90
-
91
- return (
92
- <svg
93
- width={size * 2}
94
- height={size * 2}
95
- style={{
96
- pointerEvents: 'none',
97
- position: 'absolute',
98
- ...getPosition(edge, align, size),
99
- // if align is set (top|right|bottom|left),
100
- // then we don't need an offset margin
101
- [`margin${perp}`]: align ? null : -size
102
- }}
103
- >
104
- <g transform={transform}>
105
- <path d={triangle} fill={bg} />
106
- <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth} />
107
- </g>
108
- </svg>
109
- )
110
- }
111
-
112
- Caret.locations = [
113
- 'top',
114
- 'top-left',
115
- 'top-right',
116
- 'right',
117
- 'right-top',
118
- 'right-bottom',
119
- 'bottom',
120
- 'bottom-left',
121
- 'bottom-right',
122
- 'left',
123
- 'left-top',
124
- 'left-bottom'
125
- ]
126
-
127
- Caret.defaultProps = {
128
- bg: 'canvas.default',
129
- borderColor: 'border.default',
130
- borderWidth: 1
131
- }
132
-
133
- export default Caret
@@ -1,55 +0,0 @@
1
- import styled from 'styled-components'
2
- import {COMMON, get, SystemCommonProps} from './constants'
3
- import StyledOcticon from './StyledOcticon'
4
- import sx, {SxProp} from './sx'
5
- import isNumeric from './utils/isNumeric'
6
- import {ComponentProps} from './utils/types'
7
-
8
- const variantSizes = {
9
- small: 56,
10
- medium: 96,
11
- large: 128
12
- }
13
-
14
- type StyledCircleBadgeProps = {
15
- inline?: boolean
16
- variant?: keyof typeof variantSizes
17
- size?: number
18
- } & SystemCommonProps &
19
- SxProp
20
-
21
- const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
22
- const calc = isNumeric(size) ? size : variantSizes[variant]
23
- return {
24
- width: calc,
25
- height: calc
26
- }
27
- }
28
-
29
- const CircleBadge = styled.div<StyledCircleBadgeProps>`
30
- display: ${props => (props.inline ? 'inline-flex' : 'flex')};
31
- align-items: center;
32
- justify-content: center;
33
- background-color: ${get('colors.canvas.default')};
34
- border-radius: 50%;
35
- box-shadow: ${get('shadows.shadow.medium')};
36
- ${COMMON};
37
- ${sizeStyles};
38
- ${sx};
39
- `
40
-
41
- const CircleBadgeIcon = styled(StyledOcticon)`
42
- height: auto;
43
- max-width: 60%;
44
- max-height: 55%;
45
- `
46
-
47
- CircleBadge.defaultProps = {
48
- inline: false
49
- }
50
-
51
- CircleBadgeIcon.displayName = 'CircleBadge.Icon'
52
-
53
- export type CircleBadgeProps = ComponentProps<typeof CircleBadge>
54
- export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>
55
- export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon})
@@ -1,37 +0,0 @@
1
- import {IconProps} from '@primer/octicons-react'
2
- import React from 'react'
3
- import Box, {BoxProps} from './Box'
4
-
5
- export type CircleOcticonProps = {
6
- as?: React.ElementType
7
- size?: number
8
- icon: React.ComponentType<{size?: IconProps['size']}>
9
- } & BoxProps
10
-
11
- function CircleOcticon(props: CircleOcticonProps) {
12
- const {size, as} = props
13
- const {icon: IconComponent, bg, ...rest} = props
14
- return (
15
- <Box
16
- as={as}
17
- bg={bg}
18
- overflow="hidden"
19
- borderWidth={0}
20
- size={size}
21
- borderRadius="50%"
22
- borderStyle="solid"
23
- borderColor="border.default"
24
- >
25
- <Box display="flex" {...rest} alignItems="center" justifyContent="center">
26
- <IconComponent size={size} />
27
- </Box>
28
- </Box>
29
- )
30
- }
31
-
32
- CircleOcticon.defaultProps = {
33
- ...Box.defaultProps,
34
- size: 32
35
- }
36
-
37
- export default CircleOcticon
@@ -1,52 +0,0 @@
1
- import styled from 'styled-components'
2
- import {COMMON, get, SystemCommonProps} from './constants'
3
- import sx, {SxProp} from './sx'
4
- import {ComponentProps} from './utils/types'
5
-
6
- type StyledCounterLabelProps = {
7
- scheme?: 'primary' | 'secondary'
8
- } & SystemCommonProps &
9
- SxProp
10
-
11
- const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
12
- return {
13
- color:
14
- scheme === 'secondary'
15
- ? get('colors.fg.default')(props)
16
- : scheme === 'primary'
17
- ? get('colors.fg.onEmphasis')(props)
18
- : get('colors.fg.default')(props)
19
- }
20
- }
21
-
22
- const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
23
- return {
24
- backgroundColor:
25
- scheme === 'secondary'
26
- ? get('colors.neutral.muted')(props)
27
- : scheme === 'primary'
28
- ? get('colors.neutral.emphasis')(props)
29
- : get('colors.neutral.muted')(props)
30
- }
31
- }
32
-
33
- const CounterLabel = styled.span<StyledCounterLabelProps>`
34
- display: inline-block;
35
- padding: 2px 5px;
36
- font-size: ${get('fontSizes.0')};
37
- font-weight: ${get('fontWeights.bold')};
38
- line-height: ${get('lineHeights.condensedUltra')};
39
- border-radius: 20px;
40
- ${colorStyles};
41
- ${bgStyles};
42
- ${COMMON};
43
-
44
- &:empty {
45
- display: none;
46
- }
47
-
48
- ${sx};
49
- `
50
-
51
- export type CounterLabelProps = ComponentProps<typeof CounterLabel>
52
- export default CounterLabel
package/src/Details.tsx DELETED
@@ -1,23 +0,0 @@
1
- import styled from 'styled-components'
2
- import {COMMON, SystemCommonProps} from './constants'
3
- import sx, {SxProp} from './sx'
4
- import {ComponentProps} from './utils/types'
5
-
6
- type StyledDetailsProps = SystemCommonProps & SxProp
7
-
8
- const Details = styled.details<StyledDetailsProps>`
9
- & > summary {
10
- list-style: none;
11
- }
12
- & > summary::-webkit-details-marker {
13
- display: none;
14
- }
15
-
16
- ${COMMON}
17
- ${sx};
18
- `
19
-
20
- Details.displayName = 'Details'
21
-
22
- export type DetailsProps = ComponentProps<typeof Details>
23
- export default Details
@@ -1,184 +0,0 @@
1
- import React, {useCallback} from 'react'
2
- import ReactDOM from 'react-dom'
3
- import styled from 'styled-components'
4
- import Box from '../Box'
5
- import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
6
- import {FocusKeys} from '../behaviors/focusZone'
7
- import {get} from '../constants'
8
- import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
9
- import {useFocusZone} from '../hooks/useFocusZone'
10
-
11
- /**
12
- * Props to customize the ConfirmationDialog.
13
- */
14
- export interface ConfirmationDialogProps {
15
- /**
16
- * Required. This callback is invoked when a gesture to close the dialog
17
- * is performed. The first argument indicates the gesture.
18
- */
19
- onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void
20
-
21
- /**
22
- * Required. The title of the ConfirmationDialog. This is usually a brief
23
- * question.
24
- */
25
- title: React.ReactNode
26
-
27
- /**
28
- * The text to use for the cancel button. Default: "Cancel".
29
- */
30
- cancelButtonContent?: React.ReactNode
31
-
32
- /**
33
- * The text to use for the confirm button. Default: "OK".
34
- */
35
- confirmButtonContent?: React.ReactNode
36
-
37
- /**
38
- * The type of button to use for the confirm button. Default: Button.
39
- */
40
- confirmButtonType?: 'normal' | 'primary' | 'danger'
41
- }
42
-
43
- const StyledConfirmationHeader = styled.header`
44
- padding: ${get('space.2')};
45
- display: flex;
46
- flex-direction: row;
47
- `
48
- const StyledTitle = styled(Box)`
49
- font-size: ${get('fontSizes.3')};
50
- font-weight: ${get('fontWeights.bold')};
51
- padding: 6px ${get('space.2')};
52
- flex-grow: 1;
53
- `
54
- const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialogLabelId}) => {
55
- const onCloseClick = useCallback(() => {
56
- onClose('close-button')
57
- }, [onClose])
58
- return (
59
- <StyledConfirmationHeader>
60
- <StyledTitle id={dialogLabelId}>{title}</StyledTitle>
61
- <Dialog.CloseButton onClose={onCloseClick} />
62
- </StyledConfirmationHeader>
63
- )
64
- }
65
- const StyledConfirmationBody = styled(Box)`
66
- font-size: ${get('fontSizes.1')};
67
- padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
68
- color: ${get('colors.fg.muted')};
69
- flex-grow: 1;
70
- `
71
- const ConfirmationBody: React.FC<DialogProps> = ({children}) => {
72
- return <StyledConfirmationBody>{children}</StyledConfirmationBody>
73
- }
74
- const StyledConfirmationFooter = styled(Box)`
75
- display: grid;
76
- grid-auto-flow: column;
77
- grid-auto-columns: max-content;
78
- grid-gap: ${get('space.2')};
79
- align-items: end;
80
- justify-content: end;
81
- padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
82
- `
83
- const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
84
- const {containerRef: footerRef} = useFocusZone({
85
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
86
- focusInStrategy: 'closest'
87
- })
88
- // Must have exactly 2 buttons!
89
- return (
90
- <StyledConfirmationFooter ref={footerRef as React.RefObject<HTMLDivElement>}>
91
- <Dialog.Buttons buttons={footerButtons ?? []} />
92
- </StyledConfirmationFooter>
93
- )
94
- }
95
-
96
- /**
97
- * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
98
- * is used to confirm a user action. ConfirmationDialogs always have exactly
99
- * two buttons: one to cancel the action and one to confirm it. No custom
100
- * rendering capabilities are provided for ConfirmationDialog.
101
- */
102
- export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = props => {
103
- const {
104
- onClose,
105
- title,
106
- cancelButtonContent = 'Cancel',
107
- confirmButtonContent = 'OK',
108
- confirmButtonType = 'normal',
109
- children
110
- } = props
111
-
112
- const onCancelButtonClick = useCallback(() => {
113
- onClose('cancel')
114
- }, [onClose])
115
- const onConfirmButtonClick = useCallback(() => {
116
- onClose('confirm')
117
- }, [onClose])
118
- const cancelButton: DialogButtonProps = {
119
- content: cancelButtonContent,
120
- onClick: onCancelButtonClick
121
- }
122
- const confirmButton: DialogButtonProps = {
123
- content: confirmButtonContent,
124
- buttonType: confirmButtonType,
125
- onClick: onConfirmButtonClick,
126
- autoFocus: true
127
- }
128
- const footerButtons = [cancelButton, confirmButton]
129
- return (
130
- <Dialog
131
- onClose={onClose}
132
- title={title}
133
- footerButtons={footerButtons}
134
- role="alertdialog"
135
- width="medium"
136
- renderHeader={ConfirmationHeader}
137
- renderBody={ConfirmationBody}
138
- renderFooter={ConfirmationFooter}
139
- >
140
- {children}
141
- </Dialog>
142
- )
143
- }
144
-
145
- export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
146
- async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
147
- const {content, ...confirmationDialogProps} = options
148
- return new Promise(resolve => {
149
- const hostElement = document.createElement('div')
150
- const onClose: ConfirmationDialogProps['onClose'] = gesture => {
151
- ReactDOM.unmountComponentAtNode(hostElement)
152
- if (gesture === 'confirm') {
153
- resolve(true)
154
- } else {
155
- resolve(false)
156
- }
157
- }
158
- ReactDOM.render(
159
- <ThemeProvider {...themeProps}>
160
- <ConfirmationDialog {...confirmationDialogProps} onClose={onClose}>
161
- {content}
162
- </ConfirmationDialog>
163
- </ThemeProvider>,
164
- hostElement
165
- )
166
- })
167
- }
168
-
169
- /**
170
- * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
171
- * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
172
- * resolved with `true` or `false` depending on whether or not the confirm button was used.
173
- */
174
- export function useConfirm() {
175
- const {theme, colorMode, dayScheme, nightScheme} = useTheme()
176
- const result = useCallback(
177
- (options: ConfirmOptions) => {
178
- const themeProps: ThemeProviderProps = {theme, colorMode, dayScheme, nightScheme}
179
- return confirm(themeProps, options)
180
- },
181
- [theme, colorMode, dayScheme, nightScheme]
182
- )
183
- return result
184
- }