@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

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/.changeset/README.md +8 -0
  2. package/.changeset/config.json +10 -0
  3. package/.devcontainer/devcontainer.json +8 -0
  4. package/.eslintrc.json +137 -0
  5. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  6. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
  7. package/.github/dependabot.yml +18 -0
  8. package/.github/pull_request_template.md +18 -0
  9. package/.github/workflows/check_for_changeset.yml +25 -0
  10. package/.github/workflows/ci.yml +31 -0
  11. package/.github/workflows/deploy_preview.yml +47 -0
  12. package/.github/workflows/deploy_production.yml +70 -0
  13. package/.github/workflows/release.yml +35 -0
  14. package/.github/workflows/release_canary.yml +70 -0
  15. package/.github/workflows/release_candidate.yml +60 -0
  16. package/.github/workflows/size.yml +13 -0
  17. package/.github/workflows/stale.yml +26 -0
  18. package/.gitignore +10 -0
  19. package/.npmrc +4 -0
  20. package/.nvmrc +1 -0
  21. package/.storybook/main.js +11 -0
  22. package/.storybook/preview.js +113 -0
  23. package/.vscode/launch.json +21 -0
  24. package/.vscode/settings.json +13 -0
  25. package/@types/@styled-system/index.d.ts +0 -0
  26. package/@types/@styled-system/prop-types/index.d.ts +1 -0
  27. package/@types/@styled-system/props/index.d.ts +1 -0
  28. package/@types/jest-styled-components/index.d.ts +1 -0
  29. package/CHANGELOG.md +14 -0
  30. package/CODEOWNERS +2 -0
  31. package/babel-defines.js +13 -0
  32. package/babel.config.js +39 -0
  33. package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
  34. package/contributor-docs/CONTRIBUTING.md +274 -0
  35. package/contributor-docs/adrs/adr-001-typescript.md +23 -0
  36. package/contributor-docs/adrs/adr-002-behavior-isolation.md +108 -0
  37. package/contributor-docs/adrs/adr-003-prop-norms.md +72 -0
  38. package/contributor-docs/behaviors.md +132 -0
  39. package/contributor-docs/component-contents-api-patterns.md +316 -0
  40. package/contributor-docs/principles.md +39 -0
  41. package/dist/browser.esm.js +46 -43
  42. package/dist/browser.esm.js.map +1 -1
  43. package/dist/browser.umd.js +45 -42
  44. package/dist/browser.umd.js.map +1 -1
  45. package/docs/.eslintrc +0 -0
  46. package/docs/.gitignore +91 -0
  47. package/docs/components/PropsList.js +5 -0
  48. package/docs/components/State.js +9 -0
  49. package/docs/components/constants.js +34 -0
  50. package/docs/components/index.js +2 -0
  51. package/docs/content/ActionList.mdx +99 -0
  52. package/docs/content/ActionMenu.mdx +80 -0
  53. package/docs/content/AnchoredOverlay.mdx +37 -0
  54. package/docs/content/Autocomplete.mdx +657 -0
  55. package/docs/content/Avatar.mdx +33 -0
  56. package/docs/content/AvatarStack.mdx +37 -0
  57. package/docs/content/BorderBox.md +46 -0
  58. package/docs/content/Box.md +74 -0
  59. package/docs/content/BranchName.md +18 -0
  60. package/docs/content/Breadcrumbs.md +52 -0
  61. package/docs/content/Buttons.md +56 -0
  62. package/docs/content/CircleBadge.md +45 -0
  63. package/docs/content/CircleOcticon.md +18 -0
  64. package/docs/content/CounterLabel.md +32 -0
  65. package/docs/content/Details.md +105 -0
  66. package/docs/content/Dialog.md +108 -0
  67. package/docs/content/Dialog2.mdx +179 -0
  68. package/docs/content/Dropdown.md +72 -0
  69. package/docs/content/DropdownMenu.mdx +49 -0
  70. package/docs/content/FilterList.md +44 -0
  71. package/docs/content/FilteredSearch.md +39 -0
  72. package/docs/content/Flash.md +44 -0
  73. package/docs/content/Flex.md +58 -0
  74. package/docs/content/FormGroup.md +46 -0
  75. package/docs/content/Grid.md +59 -0
  76. package/docs/content/Header.md +79 -0
  77. package/docs/content/Heading.md +22 -0
  78. package/docs/content/Label.md +42 -0
  79. package/docs/content/LabelGroup.md +31 -0
  80. package/docs/content/Link.md +37 -0
  81. package/docs/content/Overlay.mdx +94 -0
  82. package/docs/content/Pagehead.md +27 -0
  83. package/docs/content/Pagination.md +187 -0
  84. package/docs/content/PointerBox.md +81 -0
  85. package/docs/content/Popover.md +137 -0
  86. package/docs/content/Portal.mdx +78 -0
  87. package/docs/content/Position.md +100 -0
  88. package/docs/content/ProgressBar.mdx +29 -0
  89. package/docs/content/SelectMenu.md +435 -0
  90. package/docs/content/SelectPanel.mdx +67 -0
  91. package/docs/content/SideNav.md +179 -0
  92. package/docs/content/Spinner.mdx +32 -0
  93. package/docs/content/StateLabel.md +35 -0
  94. package/docs/content/StyledOcticon.md +36 -0
  95. package/docs/content/SubNav.md +102 -0
  96. package/docs/content/TabNav.md +50 -0
  97. package/docs/content/Text.md +31 -0
  98. package/docs/content/TextInput.md +34 -0
  99. package/docs/content/TextInputTokens.mdx +89 -0
  100. package/docs/content/TextInputWithTokens.mdx +97 -0
  101. package/docs/content/Timeline.md +138 -0
  102. package/docs/content/Token.mdx +381 -0
  103. package/docs/content/Tooltip.md +41 -0
  104. package/docs/content/Truncate.md +64 -0
  105. package/docs/content/UnderlineNav.md +53 -0
  106. package/docs/content/anchoredPosition.mdx +163 -0
  107. package/docs/content/core-concepts.md +70 -0
  108. package/docs/content/focusTrap.mdx +103 -0
  109. package/docs/content/focusZone.mdx +145 -0
  110. package/docs/content/getting-started.md +138 -0
  111. package/docs/content/index.md +33 -0
  112. package/docs/content/linting.md +35 -0
  113. package/docs/content/overriding-styles.mdx +82 -0
  114. package/docs/content/philosophy.md +23 -0
  115. package/docs/content/primer-theme.md +89 -0
  116. package/docs/content/ssr.mdx +43 -0
  117. package/docs/content/system-props.mdx +37 -0
  118. package/docs/content/theme-reference.md +16 -0
  119. package/docs/content/theming.md +249 -0
  120. package/docs/content/useOnEscapePress.mdx +56 -0
  121. package/docs/content/useOnOutsideClick.mdx +57 -0
  122. package/docs/content/useOpenAndCloseFocus.mdx +49 -0
  123. package/docs/content/useOverlay.mdx +62 -0
  124. package/docs/content/useSafeTimeout.mdx +32 -0
  125. package/docs/gatsby-config.js +30 -0
  126. package/docs/gatsby-node.js +101 -0
  127. package/docs/package-lock.json +20756 -0
  128. package/docs/package.json +36 -0
  129. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +23 -0
  130. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +41 -0
  131. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +56 -0
  132. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +133 -0
  133. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
  134. package/docs/src/props.js +77 -0
  135. package/jest.config.js +13 -0
  136. package/lib/ActionList/Item.d.ts +6 -0
  137. package/lib/ActionList/Item.js +5 -1
  138. package/lib/TextInputWithTokens.js +42 -22
  139. package/lib/Token/Token.js +13 -2
  140. package/lib/Token/TokenBase.js +0 -4
  141. package/lib/Token/_RemoveTokenButton.js +15 -2
  142. package/lib/__tests__/ActionList.test.d.ts +1 -0
  143. package/lib/__tests__/ActionList.test.js +69 -0
  144. package/lib/__tests__/ActionList.types.test.d.ts +6 -0
  145. package/lib/__tests__/ActionList.types.test.js +69 -0
  146. package/lib/__tests__/ActionMenu.test.d.ts +1 -0
  147. package/lib/__tests__/ActionMenu.test.js +151 -0
  148. package/lib/__tests__/AnchoredOverlay.test.d.ts +1 -0
  149. package/lib/__tests__/AnchoredOverlay.test.js +160 -0
  150. package/lib/__tests__/Autocomplete.test.d.ts +1 -0
  151. package/lib/__tests__/Autocomplete.test.js +528 -0
  152. package/lib/__tests__/Avatar.test.d.ts +1 -0
  153. package/lib/__tests__/Avatar.test.js +67 -0
  154. package/lib/__tests__/AvatarStack.test.d.ts +1 -0
  155. package/lib/__tests__/AvatarStack.test.js +71 -0
  156. package/lib/__tests__/BorderBox.test.d.ts +1 -0
  157. package/lib/__tests__/BorderBox.test.js +58 -0
  158. package/lib/__tests__/Box.test.d.ts +1 -0
  159. package/lib/__tests__/Box.test.js +78 -0
  160. package/lib/__tests__/BranchName.test.d.ts +1 -0
  161. package/lib/__tests__/BranchName.test.js +36 -0
  162. package/lib/__tests__/Breadcrumbs.test.d.ts +1 -0
  163. package/lib/__tests__/Breadcrumbs.test.js +37 -0
  164. package/lib/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  165. package/lib/__tests__/BreadcrumbsItem.test.js +49 -0
  166. package/lib/__tests__/Button.test.d.ts +1 -0
  167. package/lib/__tests__/Button.test.js +143 -0
  168. package/lib/__tests__/Caret.test.d.ts +1 -0
  169. package/lib/__tests__/Caret.test.js +52 -0
  170. package/lib/__tests__/CircleBadge.test.d.ts +1 -0
  171. package/lib/__tests__/CircleBadge.test.js +83 -0
  172. package/lib/__tests__/CircleOcticon.test.d.ts +1 -0
  173. package/lib/__tests__/CircleOcticon.test.js +71 -0
  174. package/lib/__tests__/ConfirmationDialog.test.d.ts +1 -0
  175. package/lib/__tests__/ConfirmationDialog.test.js +134 -0
  176. package/lib/__tests__/CounterLabel.test.d.ts +1 -0
  177. package/lib/__tests__/CounterLabel.test.js +58 -0
  178. package/lib/__tests__/Details.test.d.ts +1 -0
  179. package/lib/__tests__/Details.test.js +117 -0
  180. package/lib/__tests__/Dialog.test.d.ts +1 -0
  181. package/lib/__tests__/Dialog.test.js +184 -0
  182. package/lib/__tests__/Dropdown.test.d.ts +1 -0
  183. package/lib/__tests__/Dropdown.test.js +63 -0
  184. package/lib/__tests__/DropdownMenu.test.d.ts +1 -0
  185. package/lib/__tests__/DropdownMenu.test.js +150 -0
  186. package/lib/__tests__/FilterList.test.d.ts +1 -0
  187. package/lib/__tests__/FilterList.test.js +36 -0
  188. package/lib/__tests__/FilterListItem.test.d.ts +1 -0
  189. package/lib/__tests__/FilterListItem.test.js +46 -0
  190. package/lib/__tests__/FilteredSearch.test.d.ts +1 -0
  191. package/lib/__tests__/FilteredSearch.test.js +36 -0
  192. package/lib/__tests__/Flash.test.d.ts +1 -0
  193. package/lib/__tests__/Flash.test.js +62 -0
  194. package/lib/__tests__/Flex.test.d.ts +1 -0
  195. package/lib/__tests__/Flex.test.js +74 -0
  196. package/lib/__tests__/FormGroup.test.d.ts +1 -0
  197. package/lib/__tests__/FormGroup.test.js +54 -0
  198. package/lib/__tests__/Grid.test.d.ts +1 -0
  199. package/lib/__tests__/Grid.test.js +104 -0
  200. package/lib/__tests__/Header.test.d.ts +1 -0
  201. package/lib/__tests__/Header.test.js +58 -0
  202. package/lib/__tests__/Heading.test.d.ts +1 -0
  203. package/lib/__tests__/Heading.test.js +109 -0
  204. package/lib/__tests__/Label.test.d.ts +1 -0
  205. package/lib/__tests__/Label.test.js +46 -0
  206. package/lib/__tests__/LabelGroup.test.d.ts +1 -0
  207. package/lib/__tests__/LabelGroup.test.js +38 -0
  208. package/lib/__tests__/Link.test.d.ts +1 -0
  209. package/lib/__tests__/Link.test.js +70 -0
  210. package/lib/__tests__/Merge.types.test.d.ts +30 -0
  211. package/lib/__tests__/Merge.types.test.js +27 -0
  212. package/lib/__tests__/Overlay.test.d.ts +1 -0
  213. package/lib/__tests__/Overlay.test.js +145 -0
  214. package/lib/__tests__/Pagehead.test.d.ts +1 -0
  215. package/lib/__tests__/Pagehead.test.js +37 -0
  216. package/lib/__tests__/Pagination/Pagination.test.d.ts +1 -0
  217. package/lib/__tests__/Pagination/Pagination.test.js +47 -0
  218. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  219. package/lib/__tests__/Pagination/PaginationModel.test.js +186 -0
  220. package/lib/__tests__/PointerBox.test.d.ts +1 -0
  221. package/lib/__tests__/PointerBox.test.js +46 -0
  222. package/lib/__tests__/Popover.test.d.ts +1 -0
  223. package/lib/__tests__/Popover.test.js +66 -0
  224. package/lib/__tests__/Portal.test.d.ts +1 -0
  225. package/lib/__tests__/Portal.test.js +124 -0
  226. package/lib/__tests__/Position.test.d.ts +1 -0
  227. package/lib/__tests__/Position.test.js +143 -0
  228. package/lib/__tests__/ProgressBar.test.d.ts +1 -0
  229. package/lib/__tests__/ProgressBar.test.js +68 -0
  230. package/lib/__tests__/SelectMenu.test.d.ts +1 -0
  231. package/lib/__tests__/SelectMenu.test.js +155 -0
  232. package/lib/__tests__/SelectPanel.test.d.ts +1 -0
  233. package/lib/__tests__/SelectPanel.test.js +80 -0
  234. package/lib/__tests__/SideNav.test.d.ts +1 -0
  235. package/lib/__tests__/SideNav.test.js +71 -0
  236. package/lib/__tests__/Spinner.test.d.ts +1 -0
  237. package/lib/__tests__/Spinner.test.js +53 -0
  238. package/lib/__tests__/StateLabel.test.d.ts +1 -0
  239. package/lib/__tests__/StateLabel.test.js +71 -0
  240. package/lib/__tests__/StyledOcticon.test.d.ts +1 -0
  241. package/lib/__tests__/StyledOcticon.test.js +40 -0
  242. package/lib/__tests__/SubNav.test.d.ts +1 -0
  243. package/lib/__tests__/SubNav.test.js +62 -0
  244. package/lib/__tests__/SubNavLink.test.d.ts +1 -0
  245. package/lib/__tests__/SubNavLink.test.js +49 -0
  246. package/lib/__tests__/TabNav.test.d.ts +1 -0
  247. package/lib/__tests__/TabNav.test.js +49 -0
  248. package/lib/__tests__/Text.test.d.ts +1 -0
  249. package/lib/__tests__/Text.test.js +105 -0
  250. package/lib/__tests__/TextInput.test.d.ts +1 -0
  251. package/lib/__tests__/TextInput.test.js +78 -0
  252. package/lib/__tests__/TextInputWithTokens.test.d.ts +1 -0
  253. package/lib/__tests__/TextInputWithTokens.test.js +441 -0
  254. package/lib/__tests__/ThemeProvider.test.d.ts +1 -0
  255. package/lib/__tests__/ThemeProvider.test.js +444 -0
  256. package/lib/__tests__/Timeline.test.d.ts +1 -0
  257. package/lib/__tests__/Timeline.test.js +75 -0
  258. package/lib/__tests__/Token.test.d.ts +1 -0
  259. package/lib/__tests__/Token.test.js +180 -0
  260. package/lib/__tests__/Tooltip.test.d.ts +1 -0
  261. package/lib/__tests__/Tooltip.test.js +69 -0
  262. package/lib/__tests__/Truncate.test.d.ts +1 -0
  263. package/lib/__tests__/Truncate.test.js +63 -0
  264. package/lib/__tests__/UnderlineNav.test.d.ts +1 -0
  265. package/lib/__tests__/UnderlineNav.test.js +72 -0
  266. package/lib/__tests__/UnderlineNavLink.test.d.ts +1 -0
  267. package/lib/__tests__/UnderlineNavLink.test.js +51 -0
  268. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  269. package/lib/__tests__/behaviors/anchoredPosition.test.js +390 -0
  270. package/lib/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  271. package/lib/__tests__/behaviors/focusTrap.test.js +234 -0
  272. package/lib/__tests__/behaviors/focusZone.test.d.ts +1 -0
  273. package/lib/__tests__/behaviors/focusZone.test.js +570 -0
  274. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  275. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +55 -0
  276. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  277. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +226 -0
  278. package/lib/__tests__/filterObject.test.d.ts +1 -0
  279. package/lib/__tests__/filterObject.test.js +30 -0
  280. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  281. package/lib/__tests__/hooks/useAnchoredPosition.test.js +54 -0
  282. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  283. package/lib/__tests__/hooks/useOnEscapePress.test.js +32 -0
  284. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  285. package/lib/__tests__/hooks/useOnOutsideClick.test.js +87 -0
  286. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  287. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +60 -0
  288. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  289. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +45 -0
  290. package/lib/__tests__/theme.test.d.ts +1 -0
  291. package/lib/__tests__/theme.test.js +36 -0
  292. package/lib/__tests__/themeGet.test.d.ts +1 -0
  293. package/lib/__tests__/themeGet.test.js +25 -0
  294. package/lib/__tests__/useSafeTimeout.test.d.ts +1 -0
  295. package/lib/__tests__/useSafeTimeout.test.js +45 -0
  296. package/lib/stories/ActionList.stories.js +454 -0
  297. package/lib/stories/ActionMenu.stories.js +350 -0
  298. package/lib/stories/AnchoredOverlay.stories.js +127 -0
  299. package/lib/stories/Autocomplete.stories.js +619 -0
  300. package/lib/stories/AvatarStack.stories.js +49 -0
  301. package/lib/stories/Button.stories.js +125 -0
  302. package/lib/stories/ConfirmationDialog.stories.js +111 -0
  303. package/lib/stories/Dialog.stories.js +265 -0
  304. package/lib/stories/DropdownMenu.stories.js +122 -0
  305. package/lib/stories/IssueLabelToken.stories.js +165 -0
  306. package/lib/stories/Overlay.stories.js +204 -0
  307. package/lib/stories/Portal.stories.js +104 -0
  308. package/lib/stories/ProfileToken.stories.js +162 -0
  309. package/lib/stories/SelectPanel.stories.js +399 -0
  310. package/lib/stories/TextInputWithTokens.stories.js +235 -0
  311. package/lib/stories/ThemeProvider.stories.js +102 -0
  312. package/lib/stories/Token.stories.js +159 -0
  313. package/lib/stories/useAnchoredPosition.stories.js +351 -0
  314. package/lib/stories/useFocusTrap.stories.js +356 -0
  315. package/lib/stories/useFocusZone.stories.js +599 -0
  316. package/lib-esm/ActionList/Item.d.ts +6 -0
  317. package/lib-esm/ActionList/Item.js +5 -1
  318. package/lib-esm/TextInputWithTokens.js +42 -23
  319. package/lib-esm/Token/Token.js +13 -2
  320. package/lib-esm/Token/TokenBase.js +0 -4
  321. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  322. package/lib-esm/__tests__/ActionList.test.d.ts +1 -0
  323. package/lib-esm/__tests__/ActionList.test.js +57 -0
  324. package/lib-esm/__tests__/ActionList.types.test.d.ts +6 -0
  325. package/lib-esm/__tests__/ActionList.types.test.js +45 -0
  326. package/lib-esm/__tests__/ActionMenu.test.d.ts +1 -0
  327. package/lib-esm/__tests__/ActionMenu.test.js +139 -0
  328. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +1 -0
  329. package/lib-esm/__tests__/AnchoredOverlay.test.js +134 -0
  330. package/lib-esm/__tests__/Autocomplete.test.d.ts +1 -0
  331. package/lib-esm/__tests__/Autocomplete.test.js +494 -0
  332. package/lib-esm/__tests__/Avatar.test.d.ts +1 -0
  333. package/lib-esm/__tests__/Avatar.test.js +56 -0
  334. package/lib-esm/__tests__/AvatarStack.test.d.ts +1 -0
  335. package/lib-esm/__tests__/AvatarStack.test.js +58 -0
  336. package/lib-esm/__tests__/BorderBox.test.d.ts +1 -0
  337. package/lib-esm/__tests__/BorderBox.test.js +47 -0
  338. package/lib-esm/__tests__/Box.test.d.ts +1 -0
  339. package/lib-esm/__tests__/Box.test.js +67 -0
  340. package/lib-esm/__tests__/BranchName.test.d.ts +1 -0
  341. package/lib-esm/__tests__/BranchName.test.js +26 -0
  342. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +1 -0
  343. package/lib-esm/__tests__/Breadcrumbs.test.js +27 -0
  344. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  345. package/lib-esm/__tests__/BreadcrumbsItem.test.js +39 -0
  346. package/lib-esm/__tests__/Button.test.d.ts +1 -0
  347. package/lib-esm/__tests__/Button.test.js +133 -0
  348. package/lib-esm/__tests__/Caret.test.d.ts +1 -0
  349. package/lib-esm/__tests__/Caret.test.js +42 -0
  350. package/lib-esm/__tests__/CircleBadge.test.d.ts +1 -0
  351. package/lib-esm/__tests__/CircleBadge.test.js +70 -0
  352. package/lib-esm/__tests__/CircleOcticon.test.d.ts +1 -0
  353. package/lib-esm/__tests__/CircleOcticon.test.js +59 -0
  354. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +1 -0
  355. package/lib-esm/__tests__/ConfirmationDialog.test.js +113 -0
  356. package/lib-esm/__tests__/CounterLabel.test.d.ts +1 -0
  357. package/lib-esm/__tests__/CounterLabel.test.js +47 -0
  358. package/lib-esm/__tests__/Details.test.d.ts +1 -0
  359. package/lib-esm/__tests__/Details.test.js +107 -0
  360. package/lib-esm/__tests__/Dialog.test.d.ts +1 -0
  361. package/lib-esm/__tests__/Dialog.test.js +171 -0
  362. package/lib-esm/__tests__/Dropdown.test.d.ts +1 -0
  363. package/lib-esm/__tests__/Dropdown.test.js +53 -0
  364. package/lib-esm/__tests__/DropdownMenu.test.d.ts +1 -0
  365. package/lib-esm/__tests__/DropdownMenu.test.js +137 -0
  366. package/lib-esm/__tests__/FilterList.test.d.ts +1 -0
  367. package/lib-esm/__tests__/FilterList.test.js +26 -0
  368. package/lib-esm/__tests__/FilterListItem.test.d.ts +1 -0
  369. package/lib-esm/__tests__/FilterListItem.test.js +36 -0
  370. package/lib-esm/__tests__/FilteredSearch.test.d.ts +1 -0
  371. package/lib-esm/__tests__/FilteredSearch.test.js +26 -0
  372. package/lib-esm/__tests__/Flash.test.d.ts +1 -0
  373. package/lib-esm/__tests__/Flash.test.js +51 -0
  374. package/lib-esm/__tests__/Flex.test.d.ts +1 -0
  375. package/lib-esm/__tests__/Flex.test.js +64 -0
  376. package/lib-esm/__tests__/FormGroup.test.d.ts +1 -0
  377. package/lib-esm/__tests__/FormGroup.test.js +44 -0
  378. package/lib-esm/__tests__/Grid.test.d.ts +1 -0
  379. package/lib-esm/__tests__/Grid.test.js +94 -0
  380. package/lib-esm/__tests__/Header.test.d.ts +1 -0
  381. package/lib-esm/__tests__/Header.test.js +48 -0
  382. package/lib-esm/__tests__/Heading.test.d.ts +1 -0
  383. package/lib-esm/__tests__/Heading.test.js +99 -0
  384. package/lib-esm/__tests__/Label.test.d.ts +1 -0
  385. package/lib-esm/__tests__/Label.test.js +36 -0
  386. package/lib-esm/__tests__/LabelGroup.test.d.ts +1 -0
  387. package/lib-esm/__tests__/LabelGroup.test.js +26 -0
  388. package/lib-esm/__tests__/Link.test.d.ts +1 -0
  389. package/lib-esm/__tests__/Link.test.js +60 -0
  390. package/lib-esm/__tests__/Merge.types.test.d.ts +30 -0
  391. package/lib-esm/__tests__/Merge.types.test.js +14 -0
  392. package/lib-esm/__tests__/Overlay.test.d.ts +1 -0
  393. package/lib-esm/__tests__/Overlay.test.js +123 -0
  394. package/lib-esm/__tests__/Pagehead.test.d.ts +1 -0
  395. package/lib-esm/__tests__/Pagehead.test.js +26 -0
  396. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +1 -0
  397. package/lib-esm/__tests__/Pagination/Pagination.test.js +35 -0
  398. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  399. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +182 -0
  400. package/lib-esm/__tests__/PointerBox.test.d.ts +1 -0
  401. package/lib-esm/__tests__/PointerBox.test.js +36 -0
  402. package/lib-esm/__tests__/Popover.test.d.ts +1 -0
  403. package/lib-esm/__tests__/Popover.test.js +53 -0
  404. package/lib-esm/__tests__/Portal.test.d.ts +1 -0
  405. package/lib-esm/__tests__/Portal.test.js +104 -0
  406. package/lib-esm/__tests__/Position.test.d.ts +1 -0
  407. package/lib-esm/__tests__/Position.test.js +133 -0
  408. package/lib-esm/__tests__/ProgressBar.test.d.ts +1 -0
  409. package/lib-esm/__tests__/ProgressBar.test.js +58 -0
  410. package/lib-esm/__tests__/SelectMenu.test.d.ts +1 -0
  411. package/lib-esm/__tests__/SelectMenu.test.js +145 -0
  412. package/lib-esm/__tests__/SelectPanel.test.d.ts +1 -0
  413. package/lib-esm/__tests__/SelectPanel.test.js +65 -0
  414. package/lib-esm/__tests__/SideNav.test.d.ts +1 -0
  415. package/lib-esm/__tests__/SideNav.test.js +60 -0
  416. package/lib-esm/__tests__/Spinner.test.d.ts +1 -0
  417. package/lib-esm/__tests__/Spinner.test.js +43 -0
  418. package/lib-esm/__tests__/StateLabel.test.d.ts +1 -0
  419. package/lib-esm/__tests__/StateLabel.test.js +61 -0
  420. package/lib-esm/__tests__/StyledOcticon.test.d.ts +1 -0
  421. package/lib-esm/__tests__/StyledOcticon.test.js +29 -0
  422. package/lib-esm/__tests__/SubNav.test.d.ts +1 -0
  423. package/lib-esm/__tests__/SubNav.test.js +50 -0
  424. package/lib-esm/__tests__/SubNavLink.test.d.ts +1 -0
  425. package/lib-esm/__tests__/SubNavLink.test.js +39 -0
  426. package/lib-esm/__tests__/TabNav.test.d.ts +1 -0
  427. package/lib-esm/__tests__/TabNav.test.js +39 -0
  428. package/lib-esm/__tests__/Text.test.d.ts +1 -0
  429. package/lib-esm/__tests__/Text.test.js +93 -0
  430. package/lib-esm/__tests__/TextInput.test.d.ts +1 -0
  431. package/lib-esm/__tests__/TextInput.test.js +68 -0
  432. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +1 -0
  433. package/lib-esm/__tests__/TextInputWithTokens.test.js +387 -0
  434. package/lib-esm/__tests__/ThemeProvider.test.d.ts +1 -0
  435. package/lib-esm/__tests__/ThemeProvider.test.js +408 -0
  436. package/lib-esm/__tests__/Timeline.test.d.ts +1 -0
  437. package/lib-esm/__tests__/Timeline.test.js +65 -0
  438. package/lib-esm/__tests__/Token.test.d.ts +1 -0
  439. package/lib-esm/__tests__/Token.test.js +166 -0
  440. package/lib-esm/__tests__/Tooltip.test.d.ts +1 -0
  441. package/lib-esm/__tests__/Tooltip.test.js +59 -0
  442. package/lib-esm/__tests__/Truncate.test.d.ts +1 -0
  443. package/lib-esm/__tests__/Truncate.test.js +53 -0
  444. package/lib-esm/__tests__/UnderlineNav.test.d.ts +1 -0
  445. package/lib-esm/__tests__/UnderlineNav.test.js +60 -0
  446. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +1 -0
  447. package/lib-esm/__tests__/UnderlineNavLink.test.js +41 -0
  448. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  449. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +388 -0
  450. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  451. package/lib-esm/__tests__/behaviors/focusTrap.test.js +227 -0
  452. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +1 -0
  453. package/lib-esm/__tests__/behaviors/focusZone.test.js +487 -0
  454. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  455. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +48 -0
  456. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  457. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +224 -0
  458. package/lib-esm/__tests__/filterObject.test.d.ts +1 -0
  459. package/lib-esm/__tests__/filterObject.test.js +27 -0
  460. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  461. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +46 -0
  462. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  463. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +23 -0
  464. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  465. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +68 -0
  466. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  467. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +52 -0
  468. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  469. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +36 -0
  470. package/lib-esm/__tests__/theme.test.d.ts +1 -0
  471. package/lib-esm/__tests__/theme.test.js +33 -0
  472. package/lib-esm/__tests__/themeGet.test.d.ts +1 -0
  473. package/lib-esm/__tests__/themeGet.test.js +22 -0
  474. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +1 -0
  475. package/lib-esm/__tests__/useSafeTimeout.test.js +39 -0
  476. package/lib-esm/stories/ActionList.stories.js +395 -0
  477. package/lib-esm/stories/ActionMenu.stories.js +305 -0
  478. package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
  479. package/lib-esm/stories/Autocomplete.stories.js +560 -0
  480. package/lib-esm/stories/AvatarStack.stories.js +32 -0
  481. package/lib-esm/stories/Button.stories.js +86 -0
  482. package/lib-esm/stories/ConfirmationDialog.stories.js +86 -0
  483. package/lib-esm/stories/Dialog.stories.js +240 -0
  484. package/lib-esm/stories/DropdownMenu.stories.js +94 -0
  485. package/lib-esm/stories/IssueLabelToken.stories.js +139 -0
  486. package/lib-esm/stories/Overlay.stories.js +173 -0
  487. package/lib-esm/stories/Portal.stories.js +68 -0
  488. package/lib-esm/stories/ProfileToken.stories.js +136 -0
  489. package/lib-esm/stories/SelectPanel.stories.js +334 -0
  490. package/lib-esm/stories/TextInputWithTokens.stories.js +196 -0
  491. package/lib-esm/stories/ThemeProvider.stories.js +83 -0
  492. package/lib-esm/stories/Token.stories.js +133 -0
  493. package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
  494. package/lib-esm/stories/useFocusTrap.stories.js +309 -0
  495. package/lib-esm/stories/useFocusZone.stories.js +554 -0
  496. package/migrating.md +250 -0
  497. package/now.json +17 -0
  498. package/package-lock.json +28456 -0
  499. package/package.json +6 -6
  500. package/rollup.config.js +36 -0
  501. package/script/build +19 -0
  502. package/script/build-storybook +10 -0
  503. package/script/setup +12 -0
  504. package/src/ActionList/Divider.tsx +25 -0
  505. package/src/ActionList/Group.tsx +45 -0
  506. package/src/ActionList/Header.tsx +74 -0
  507. package/src/ActionList/Item.tsx +496 -0
  508. package/src/ActionList/List.tsx +258 -0
  509. package/src/ActionList/index.ts +21 -0
  510. package/src/ActionMenu.tsx +106 -0
  511. package/src/AnchoredOverlay/AnchoredOverlay.tsx +191 -0
  512. package/src/AnchoredOverlay/index.ts +2 -0
  513. package/src/Autocomplete/Autocomplete.tsx +103 -0
  514. package/src/Autocomplete/AutocompleteContext.tsx +19 -0
  515. package/src/Autocomplete/AutocompleteInput.tsx +179 -0
  516. package/src/Autocomplete/AutocompleteMenu.tsx +341 -0
  517. package/src/Autocomplete/AutocompleteOverlay.tsx +68 -0
  518. package/src/Autocomplete/index.ts +2 -0
  519. package/src/Avatar.tsx +46 -0
  520. package/src/AvatarPair.tsx +35 -0
  521. package/src/AvatarStack.tsx +159 -0
  522. package/src/BaseStyles.tsx +53 -0
  523. package/src/BorderBox.tsx +18 -0
  524. package/src/Box.tsx +54 -0
  525. package/src/BranchName.tsx +19 -0
  526. package/src/Breadcrumbs.tsx +101 -0
  527. package/src/Button/Button.tsx +40 -0
  528. package/src/Button/ButtonBase.tsx +43 -0
  529. package/src/Button/ButtonClose.tsx +40 -0
  530. package/src/Button/ButtonDanger.tsx +43 -0
  531. package/src/Button/ButtonGroup.tsx +55 -0
  532. package/src/Button/ButtonInvisible.tsx +32 -0
  533. package/src/Button/ButtonOutline.tsx +43 -0
  534. package/src/Button/ButtonPrimary.tsx +41 -0
  535. package/src/Button/ButtonStyles.tsx +36 -0
  536. package/src/Button/ButtonTableList.tsx +58 -0
  537. package/src/Button/index.ts +16 -0
  538. package/src/Caret.tsx +133 -0
  539. package/src/CircleBadge.tsx +55 -0
  540. package/src/CircleOcticon.tsx +37 -0
  541. package/src/CounterLabel.tsx +52 -0
  542. package/src/Details.tsx +23 -0
  543. package/src/Dialog/ConfirmationDialog.tsx +184 -0
  544. package/src/Dialog/Dialog.tsx +432 -0
  545. package/src/Dialog.tsx +149 -0
  546. package/src/Dropdown.tsx +158 -0
  547. package/src/DropdownMenu/DropdownButton.tsx +15 -0
  548. package/src/DropdownMenu/DropdownMenu.tsx +115 -0
  549. package/src/DropdownMenu/index.ts +4 -0
  550. package/src/DropdownStyles.ts +128 -0
  551. package/src/FilterList.tsx +81 -0
  552. package/src/FilteredActionList/FilteredActionList.tsx +142 -0
  553. package/src/FilteredActionList/index.ts +2 -0
  554. package/src/FilteredSearch.tsx +28 -0
  555. package/src/Flash.tsx +77 -0
  556. package/src/Flex.tsx +15 -0
  557. package/src/FormGroup.tsx +27 -0
  558. package/src/Grid.tsx +15 -0
  559. package/src/Header.tsx +84 -0
  560. package/src/Heading.tsx +21 -0
  561. package/src/Label.tsx +75 -0
  562. package/src/LabelGroup.tsx +18 -0
  563. package/src/Link.tsx +46 -0
  564. package/src/Overlay.tsx +197 -0
  565. package/src/Pagehead.tsx +17 -0
  566. package/src/Pagination/Pagination.tsx +214 -0
  567. package/src/Pagination/index.ts +4 -0
  568. package/src/Pagination/model.tsx +187 -0
  569. package/src/PointerBox.tsx +31 -0
  570. package/src/Popover.tsx +236 -0
  571. package/src/Portal/Portal.tsx +96 -0
  572. package/src/Portal/index.ts +5 -0
  573. package/src/Position.tsx +63 -0
  574. package/src/ProgressBar.tsx +52 -0
  575. package/src/SelectMenu/SelectMenu.tsx +125 -0
  576. package/src/SelectMenu/SelectMenuContext.tsx +9 -0
  577. package/src/SelectMenu/SelectMenuDivider.tsx +25 -0
  578. package/src/SelectMenu/SelectMenuFilter.tsx +51 -0
  579. package/src/SelectMenu/SelectMenuFooter.tsx +28 -0
  580. package/src/SelectMenu/SelectMenuHeader.tsx +50 -0
  581. package/src/SelectMenu/SelectMenuItem.tsx +137 -0
  582. package/src/SelectMenu/SelectMenuList.tsx +42 -0
  583. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +24 -0
  584. package/src/SelectMenu/SelectMenuModal.tsx +121 -0
  585. package/src/SelectMenu/SelectMenuTab.tsx +88 -0
  586. package/src/SelectMenu/SelectMenuTabPanel.tsx +30 -0
  587. package/src/SelectMenu/SelectMenuTabs.tsx +44 -0
  588. package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
  589. package/src/SelectMenu/index.ts +15 -0
  590. package/src/SelectPanel/SelectPanel.tsx +173 -0
  591. package/src/SelectPanel/index.ts +2 -0
  592. package/src/SideNav.tsx +193 -0
  593. package/src/Spinner.tsx +59 -0
  594. package/src/StateLabel.tsx +102 -0
  595. package/src/StyledOcticon.tsx +24 -0
  596. package/src/SubNav.tsx +129 -0
  597. package/src/TabNav.tsx +77 -0
  598. package/src/Text.tsx +13 -0
  599. package/src/TextInput.tsx +68 -0
  600. package/src/TextInputWithTokens.tsx +295 -0
  601. package/src/ThemeProvider.tsx +176 -0
  602. package/src/Timeline.tsx +141 -0
  603. package/src/Token/AvatarToken.tsx +54 -0
  604. package/src/Token/IssueLabelToken.tsx +150 -0
  605. package/src/Token/Token.tsx +126 -0
  606. package/src/Token/TokenBase.tsx +129 -0
  607. package/src/Token/_RemoveTokenButton.tsx +111 -0
  608. package/src/Token/_TokenTextContainer.tsx +47 -0
  609. package/src/Token/index.ts +3 -0
  610. package/src/Tooltip.tsx +263 -0
  611. package/src/Truncate.tsx +36 -0
  612. package/src/UnderlineNav.tsx +110 -0
  613. package/src/_TextInputWrapper.tsx +105 -0
  614. package/src/_UnstyledTextInput.tsx +19 -0
  615. package/src/__tests__/.eslintrc.json +11 -0
  616. package/src/__tests__/ActionList.test.tsx +53 -0
  617. package/src/__tests__/ActionList.types.test.tsx +51 -0
  618. package/src/__tests__/ActionMenu.test.tsx +136 -0
  619. package/src/__tests__/AnchoredOverlay.test.tsx +150 -0
  620. package/src/__tests__/Autocomplete.test.tsx +444 -0
  621. package/src/__tests__/Avatar.test.tsx +44 -0
  622. package/src/__tests__/AvatarStack.test.tsx +48 -0
  623. package/src/__tests__/BorderBox.test.tsx +43 -0
  624. package/src/__tests__/Box.test.tsx +42 -0
  625. package/src/__tests__/BranchName.test.tsx +26 -0
  626. package/src/__tests__/Breadcrumbs.test.tsx +27 -0
  627. package/src/__tests__/BreadcrumbsItem.test.tsx +31 -0
  628. package/src/__tests__/Button.test.tsx +128 -0
  629. package/src/__tests__/Caret.test.tsx +36 -0
  630. package/src/__tests__/CircleBadge.test.tsx +66 -0
  631. package/src/__tests__/CircleOcticon.test.tsx +50 -0
  632. package/src/__tests__/ConfirmationDialog.test.tsx +120 -0
  633. package/src/__tests__/CounterLabel.test.tsx +50 -0
  634. package/src/__tests__/Details.test.tsx +115 -0
  635. package/src/__tests__/Dialog.test.tsx +155 -0
  636. package/src/__tests__/Dropdown.test.tsx +53 -0
  637. package/src/__tests__/DropdownMenu.test.tsx +136 -0
  638. package/src/__tests__/FilterList.test.tsx +26 -0
  639. package/src/__tests__/FilterListItem.test.tsx +31 -0
  640. package/src/__tests__/FilteredSearch.test.tsx +26 -0
  641. package/src/__tests__/Flash.test.tsx +45 -0
  642. package/src/__tests__/Flex.test.tsx +58 -0
  643. package/src/__tests__/FormGroup.test.tsx +38 -0
  644. package/src/__tests__/Grid.test.tsx +82 -0
  645. package/src/__tests__/Header.test.tsx +49 -0
  646. package/src/__tests__/Heading.test.tsx +91 -0
  647. package/src/__tests__/Label.test.tsx +34 -0
  648. package/src/__tests__/LabelGroup.test.tsx +30 -0
  649. package/src/__tests__/Link.test.tsx +47 -0
  650. package/src/__tests__/Merge.types.test.ts +39 -0
  651. package/src/__tests__/Overlay.test.tsx +103 -0
  652. package/src/__tests__/Pagehead.test.tsx +23 -0
  653. package/src/__tests__/Pagination/Pagination.test.tsx +30 -0
  654. package/src/__tests__/Pagination/PaginationModel.test.tsx +133 -0
  655. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +184 -0
  656. package/src/__tests__/PointerBox.test.tsx +34 -0
  657. package/src/__tests__/Popover.test.tsx +68 -0
  658. package/src/__tests__/Portal.test.tsx +103 -0
  659. package/src/__tests__/Position.test.tsx +117 -0
  660. package/src/__tests__/ProgressBar.test.tsx +40 -0
  661. package/src/__tests__/SelectMenu.test.tsx +142 -0
  662. package/src/__tests__/SelectPanel.test.tsx +63 -0
  663. package/src/__tests__/SideNav.test.tsx +62 -0
  664. package/src/__tests__/Spinner.test.tsx +42 -0
  665. package/src/__tests__/StateLabel.test.tsx +48 -0
  666. package/src/__tests__/StyledOcticon.test.tsx +26 -0
  667. package/src/__tests__/SubNav.test.tsx +50 -0
  668. package/src/__tests__/SubNavLink.test.tsx +31 -0
  669. package/src/__tests__/TabNav.test.tsx +32 -0
  670. package/src/__tests__/Text.test.tsx +78 -0
  671. package/src/__tests__/TextInput.test.tsx +49 -0
  672. package/src/__tests__/TextInputWithTokens.test.tsx +300 -0
  673. package/src/__tests__/ThemeProvider.test.tsx +441 -0
  674. package/src/__tests__/Timeline.test.tsx +58 -0
  675. package/src/__tests__/Token.test.tsx +118 -0
  676. package/src/__tests__/Tooltip.test.tsx +52 -0
  677. package/src/__tests__/Truncate.test.tsx +43 -0
  678. package/src/__tests__/UnderlineNav.test.tsx +58 -0
  679. package/src/__tests__/UnderlineNavLink.test.tsx +31 -0
  680. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +223 -0
  681. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +80 -0
  682. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +332 -0
  683. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +3414 -0
  684. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +19 -0
  685. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +377 -0
  686. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +14 -0
  687. package/src/__tests__/__snapshots__/Box.test.tsx.snap +201 -0
  688. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +17 -0
  689. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +29 -0
  690. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +79 -0
  691. package/src/__tests__/__snapshots__/Button.test.tsx.snap +840 -0
  692. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +373 -0
  693. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +141 -0
  694. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +64 -0
  695. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +89 -0
  696. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +22 -0
  697. package/src/__tests__/__snapshots__/Details.test.tsx.snap +15 -0
  698. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +200 -0
  699. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +249 -0
  700. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +106 -0
  701. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +13 -0
  702. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +80 -0
  703. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +32 -0
  704. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +32 -0
  705. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +130 -0
  706. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +25 -0
  707. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +178 -0
  708. package/src/__tests__/__snapshots__/Header.test.tsx.snap +79 -0
  709. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +13 -0
  710. package/src/__tests__/__snapshots__/Label.test.tsx.snap +74 -0
  711. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +15 -0
  712. package/src/__tests__/__snapshots__/Link.test.tsx.snap +213 -0
  713. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +15 -0
  714. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +174 -0
  715. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +4687 -0
  716. package/src/__tests__/__snapshots__/Position.test.tsx.snap +44 -0
  717. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +53 -0
  718. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +469 -0
  719. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +123 -0
  720. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +143 -0
  721. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +33 -0
  722. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +388 -0
  723. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +25 -0
  724. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +44 -0
  725. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +199 -0
  726. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +58 -0
  727. package/src/__tests__/__snapshots__/Text.test.tsx.snap +7 -0
  728. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +440 -0
  729. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +5516 -0
  730. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +15 -0
  731. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +159 -0
  732. package/src/__tests__/__snapshots__/Token.test.tsx.snap +3794 -0
  733. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +227 -0
  734. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +17 -0
  735. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +59 -0
  736. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +130 -0
  737. package/src/__tests__/behaviors/anchoredPosition.test.ts +295 -0
  738. package/src/__tests__/behaviors/focusTrap.test.tsx +236 -0
  739. package/src/__tests__/behaviors/focusZone.test.tsx +549 -0
  740. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +61 -0
  741. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +195 -0
  742. package/src/__tests__/filterObject.test.ts +54 -0
  743. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +31 -0
  744. package/src/__tests__/hooks/useOnEscapePress.test.tsx +16 -0
  745. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +48 -0
  746. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +48 -0
  747. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +39 -0
  748. package/src/__tests__/theme.test.ts +41 -0
  749. package/src/__tests__/themeGet.test.ts +15 -0
  750. package/src/__tests__/useSafeTimeout.test.tsx +36 -0
  751. package/src/behaviors/anchoredPosition.ts +442 -0
  752. package/src/behaviors/focusTrap.ts +184 -0
  753. package/src/behaviors/focusZone.ts +713 -0
  754. package/src/behaviors/scrollIntoViewingArea.ts +27 -0
  755. package/src/constants.ts +62 -0
  756. package/src/hooks/index.ts +11 -0
  757. package/src/hooks/useAnchoredPosition.ts +53 -0
  758. package/src/hooks/useCombinedRefs.ts +40 -0
  759. package/src/hooks/useDetails.tsx +54 -0
  760. package/src/hooks/useDialog.ts +121 -0
  761. package/src/hooks/useFocusTrap.ts +80 -0
  762. package/src/hooks/useFocusZone.ts +64 -0
  763. package/src/hooks/useOnEscapePress.ts +63 -0
  764. package/src/hooks/useOnOutsideClick.tsx +82 -0
  765. package/src/hooks/useOpenAndCloseFocus.ts +32 -0
  766. package/src/hooks/useOverlay.tsx +34 -0
  767. package/src/hooks/useProvidedRefOrCreate.ts +14 -0
  768. package/src/hooks/useProvidedStateOrCreate.ts +27 -0
  769. package/src/hooks/useRenderForcingRef.ts +22 -0
  770. package/src/hooks/useResizeObserver.ts +11 -0
  771. package/src/hooks/useSafeTimeout.ts +38 -0
  772. package/src/hooks/useScrollFlash.ts +21 -0
  773. package/src/index.ts +170 -0
  774. package/src/polyfills/eventListenerSignal.ts +66 -0
  775. package/src/stories/ActionList.stories.tsx +436 -0
  776. package/src/stories/ActionMenu.stories.tsx +334 -0
  777. package/src/stories/AnchoredOverlay.stories.tsx +117 -0
  778. package/src/stories/Autocomplete.stories.tsx +655 -0
  779. package/src/stories/AvatarStack.stories.tsx +37 -0
  780. package/src/stories/Button.stories.tsx +92 -0
  781. package/src/stories/ConfirmationDialog.stories.tsx +105 -0
  782. package/src/stories/Dialog.stories.tsx +240 -0
  783. package/src/stories/DropdownMenu.stories.tsx +84 -0
  784. package/src/stories/IssueLabelToken.stories.tsx +138 -0
  785. package/src/stories/Overlay.stories.tsx +213 -0
  786. package/src/stories/Portal.stories.tsx +109 -0
  787. package/src/stories/ProfileToken.stories.tsx +129 -0
  788. package/src/stories/SelectPanel.stories.tsx +353 -0
  789. package/src/stories/TextInputWithTokens.stories.tsx +146 -0
  790. package/src/stories/ThemeProvider.stories.tsx +104 -0
  791. package/src/stories/Token.stories.tsx +126 -0
  792. package/src/stories/useAnchoredPosition.stories.tsx +332 -0
  793. package/src/stories/useFocusTrap.stories.tsx +400 -0
  794. package/src/stories/useFocusZone.stories.tsx +663 -0
  795. package/src/sx.ts +9 -0
  796. package/src/theme-preval.js +79 -0
  797. package/src/theme.ts +3 -0
  798. package/src/utils/deprecate.tsx +73 -0
  799. package/src/utils/isNumeric.tsx +4 -0
  800. package/src/utils/iterateFocusableElements.ts +121 -0
  801. package/src/utils/ssr.tsx +1 -0
  802. package/src/utils/test-deprecations.tsx +19 -0
  803. package/src/utils/test-helpers.tsx +7 -0
  804. package/src/utils/test-matchers.tsx +109 -0
  805. package/src/utils/testing.tsx +242 -0
  806. package/src/utils/theme.js +64 -0
  807. package/src/utils/types/AriaRole.ts +71 -0
  808. package/src/utils/types/ComponentProps.ts +13 -0
  809. package/src/utils/types/Flatten.ts +4 -0
  810. package/src/utils/types/MandateProps.ts +19 -0
  811. package/src/utils/types/Merge.ts +20 -0
  812. package/src/utils/types/index.ts +5 -0
  813. package/src/utils/uniqueId.ts +6 -0
  814. package/src/utils/userAgent.ts +7 -0
  815. package/stats.html +3279 -0
  816. package/tsconfig.build.json +7 -0
  817. package/tsconfig.json +20 -0
@@ -0,0 +1,432 @@
1
+ import React, {useCallback, useEffect, useRef, useState} from 'react'
2
+ import styled from 'styled-components'
3
+ import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
4
+ import Box from '../Box'
5
+ import {get, SystemCommonProps, SystemPositionProps, COMMON, POSITION} from '../constants'
6
+ import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
7
+ import {useFocusTrap} from '../hooks/useFocusTrap'
8
+ import sx, {SxProp} from '../sx'
9
+ import StyledOcticon from '../StyledOcticon'
10
+ import {XIcon} from '@primer/octicons-react'
11
+ import {useFocusZone} from '../hooks/useFocusZone'
12
+ import {FocusKeys} from '../behaviors/focusZone'
13
+ import Portal from '../Portal'
14
+ import {useCombinedRefs} from '../hooks/useCombinedRefs'
15
+ import {useSSRSafeId} from '@react-aria/ssr'
16
+
17
+ const ANIMATION_DURATION = '200ms'
18
+
19
+ /**
20
+ * Props that characterize a button to be rendered into the footer of
21
+ * a Dialog.
22
+ */
23
+ export type DialogButtonProps = ButtonProps & {
24
+ /**
25
+ * The type of Button element to use
26
+ */
27
+ buttonType?: 'normal' | 'primary' | 'danger'
28
+
29
+ /**
30
+ * The Button's inner text
31
+ */
32
+ content: React.ReactNode
33
+
34
+ /**
35
+ * If true, and if this is the only button with autoFocus set to true,
36
+ * focus this button automatically when the dialog appears.
37
+ */
38
+ autoFocus?: boolean
39
+
40
+ /**
41
+ * A reference to the rendered Button’s DOM node, used together with
42
+ * `autoFocus` for `focusTrap`’s `initialFocus`.
43
+ */
44
+ ref?: React.RefObject<HTMLButtonElement>
45
+ }
46
+
47
+ /**
48
+ * Props to customize the rendering of the Dialog.
49
+ */
50
+ export interface DialogProps {
51
+ /**
52
+ * Title of the Dialog. Also serves as the aria-label for this Dialog.
53
+ */
54
+ title?: React.ReactNode
55
+
56
+ /**
57
+ * The Dialog's subtitle. Optional. Rendered below the title in smaller
58
+ * type with less contrast. Also serves as the aria-describedby for this
59
+ * Dialog.
60
+ */
61
+ subtitle?: React.ReactNode
62
+
63
+ /**
64
+ * Provide a custom renderer for the dialog header. This content is
65
+ * rendered directly into the dialog body area, full bleed from edge
66
+ * to edge, top to the start of the body element.
67
+ *
68
+ * Warning: using a custom renderer may violate Primer UX principles.
69
+ */
70
+ renderHeader?: React.FunctionComponent<DialogHeaderProps>
71
+
72
+ /**
73
+ * Provide a custom render function for the dialog body. This content is
74
+ * rendered directly into the dialog body area, full bleed from edge to
75
+ * edge, header to footer.
76
+ *
77
+ * Warning: using a custom renderer may violate Primer UX principles.
78
+ */
79
+ renderBody?: React.FunctionComponent<DialogProps>
80
+
81
+ /**
82
+ * Provide a custom render function for the dialog footer. This content is
83
+ * rendered directly into the dialog footer area, full bleed from edge to
84
+ * edge, end of the body element to bottom.
85
+ *
86
+ * Warning: using a custom renderer may violate Primer UX principles.
87
+ */
88
+ renderFooter?: React.FunctionComponent<DialogProps>
89
+
90
+ /**
91
+ * Specifies the buttons to be rendered in the Dialog footer.
92
+ */
93
+ footerButtons?: DialogButtonProps[]
94
+
95
+ /**
96
+ * This method is invoked when a gesture to close the dialog is used (either
97
+ * an Escape key press or clicking the "X" in the top-right corner). The
98
+ * gesture argument indicates the gesture that was used to close the dialog
99
+ * (either 'close-button' or 'escape').
100
+ */
101
+ onClose: (gesture: 'close-button' | 'escape') => void
102
+
103
+ /**
104
+ * Default: "dialog". The ARIA role to assign to this dialog.
105
+ * @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
106
+ * @see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
107
+ */
108
+ role?: 'dialog' | 'alertdialog'
109
+
110
+ /**
111
+ * The width of the dialog.
112
+ * small: 296px
113
+ * medium: 320px
114
+ * large: 480px
115
+ * xlarge: 640px
116
+ */
117
+ width?: DialogWidth
118
+
119
+ /**
120
+ * The height of the dialog.
121
+ * small: 296x480
122
+ * large: 480x640
123
+ * auto: variable based on contents
124
+ */
125
+ height?: DialogHeight
126
+ }
127
+
128
+ /**
129
+ * Props that are passed to a component that serves as a dialog header
130
+ */
131
+ export interface DialogHeaderProps extends DialogProps {
132
+ /**
133
+ * ID of the element that will be used as the `aria-labelledby` attribute on the
134
+ * dialog. This ID should be set to the element that renders the dialog's title.
135
+ */
136
+ dialogLabelId: string
137
+
138
+ /**
139
+ * ID of the element that will be used as the `aria-describedby` attribute on the
140
+ * dialog. This ID should be set to the element that renders the dialog's subtitle.
141
+ */
142
+ dialogDescriptionId: string
143
+ }
144
+
145
+ const Backdrop = styled('div')`
146
+ position: fixed;
147
+ top: 0;
148
+ left: 0;
149
+ bottom: 0;
150
+ right: 0;
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ background-color: rgba(0, 0, 0, 0.4);
155
+ animation: dialog-backdrop-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')};
156
+
157
+ @keyframes dialog-backdrop-appear {
158
+ 0% {
159
+ opacity: 0;
160
+ }
161
+ 100% {
162
+ opacity: 1;
163
+ }
164
+ }
165
+ `
166
+
167
+ const heightMap = {
168
+ small: '480px',
169
+ large: '640px',
170
+ auto: 'auto'
171
+ } as const
172
+
173
+ const widthMap = {
174
+ small: '296px',
175
+ medium: '320px',
176
+ large: '480px',
177
+ xlarge: '640px'
178
+ } as const
179
+
180
+ export type DialogWidth = keyof typeof widthMap
181
+ export type DialogHeight = keyof typeof heightMap
182
+
183
+ interface StyledDialogProps {
184
+ width?: DialogWidth
185
+ height?: DialogHeight
186
+ }
187
+
188
+ const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPositionProps & SxProp>`
189
+ display: flex;
190
+ flex-direction: column;
191
+ background-color: ${get('colors.canvas.overlay')};
192
+ box-shadow: ${get('shadows.overlay.shadow')};
193
+ min-width: 296px;
194
+ max-width: calc(100vw - 64px);
195
+ max-height: calc(100vh - 64px);
196
+ width: ${props => widthMap[props.width ?? ('xlarge' as const)]};
197
+ height: ${props => heightMap[props.height ?? ('auto' as const)]};
198
+ border-radius: 12px;
199
+ opacity: 1;
200
+ animation: overlay--dialog-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')};
201
+
202
+ @keyframes overlay--dialog-appear {
203
+ 0% {
204
+ opacity: 0;
205
+ transform: scale(0.5);
206
+ }
207
+ 100% {
208
+ opacity: 1;
209
+ transform: scale(1);
210
+ }
211
+ }
212
+
213
+ ${COMMON};
214
+ ${POSITION};
215
+ ${sx};
216
+ `
217
+
218
+ const DefaultHeader: React.FC<DialogHeaderProps> = ({dialogLabelId, title, subtitle, dialogDescriptionId, onClose}) => {
219
+ const onCloseClick = useCallback(() => {
220
+ onClose('close-button')
221
+ }, [onClose])
222
+ return (
223
+ <Dialog.Header>
224
+ <Box display="flex">
225
+ <Box display="flex" px={2} py="6px" flexDirection="column" flexGrow={1}>
226
+ <Dialog.Title id={dialogLabelId}>{title ?? 'Dialog'}</Dialog.Title>
227
+ {subtitle && <Dialog.Subtitle id={dialogDescriptionId}>{subtitle}</Dialog.Subtitle>}
228
+ </Box>
229
+ <Dialog.CloseButton onClose={onCloseClick} />
230
+ </Box>
231
+ </Dialog.Header>
232
+ )
233
+ }
234
+ const DefaultBody: React.FC<DialogProps> = ({children}) => {
235
+ return <Dialog.Body>{children}</Dialog.Body>
236
+ }
237
+ const DefaultFooter: React.FC<DialogProps> = ({footerButtons}) => {
238
+ const {containerRef: footerRef} = useFocusZone({
239
+ bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
240
+ focusInStrategy: 'closest'
241
+ })
242
+ return footerButtons ? (
243
+ <Dialog.Footer ref={footerRef as React.RefObject<HTMLDivElement>}>
244
+ <Dialog.Buttons buttons={footerButtons} />
245
+ </Dialog.Footer>
246
+ ) : null
247
+ }
248
+
249
+ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogProps>>((props, forwardedRef) => {
250
+ const {
251
+ title = 'Dialog',
252
+ subtitle = '',
253
+ renderHeader,
254
+ renderBody,
255
+ renderFooter,
256
+ onClose,
257
+ role = 'dialog',
258
+ width = 'xlarge',
259
+ height = 'auto',
260
+ footerButtons = []
261
+ } = props
262
+ const dialogLabelId = useSSRSafeId()
263
+ const dialogDescriptionId = useSSRSafeId()
264
+ const autoFocusedFooterButtonRef = useRef<HTMLButtonElement>(null)
265
+ for (const footerButton of footerButtons) {
266
+ if (footerButton.autoFocus) {
267
+ footerButton.ref = autoFocusedFooterButtonRef
268
+ }
269
+ }
270
+ const defaultedProps = {...props, title, subtitle, role, dialogLabelId, dialogDescriptionId}
271
+
272
+ const dialogRef = useRef<HTMLDivElement>(null)
273
+ const combinedRef = useCombinedRefs(dialogRef, forwardedRef)
274
+ const backdropRef = useRef<HTMLDivElement>(null)
275
+ useFocusTrap({containerRef: dialogRef, restoreFocusOnCleanUp: true, initialFocusRef: autoFocusedFooterButtonRef})
276
+
277
+ useOnEscapePress(
278
+ (event: KeyboardEvent) => {
279
+ onClose('escape')
280
+ event.preventDefault()
281
+ },
282
+ [onClose]
283
+ )
284
+
285
+ const header = (renderHeader ?? DefaultHeader)(defaultedProps)
286
+ const body = (renderBody ?? DefaultBody)(defaultedProps)
287
+ const footer = (renderFooter ?? DefaultFooter)(defaultedProps)
288
+
289
+ return (
290
+ <>
291
+ <Portal>
292
+ <Backdrop ref={backdropRef}>
293
+ <StyledDialog
294
+ width={width}
295
+ height={height}
296
+ ref={combinedRef}
297
+ role={role}
298
+ aria-labelledby={dialogLabelId}
299
+ aria-describedby={dialogDescriptionId}
300
+ >
301
+ {header}
302
+ {body}
303
+ {footer}
304
+ </StyledDialog>
305
+ </Backdrop>
306
+ </Portal>
307
+ </>
308
+ )
309
+ })
310
+ _Dialog.displayName = 'Dialog'
311
+
312
+ const Header = styled(Box).attrs({as: 'header'})`
313
+ box-shadow: 0 1px 0 ${get('colors.border.default')};
314
+ padding: ${get('space.2')};
315
+ z-index: 1;
316
+ flex-shrink: 0;
317
+ `
318
+ const Title = styled(Box)`
319
+ font-size: ${get('fontSizes.1')};
320
+ font-weight: ${get('fontWeights.bold')};
321
+ `
322
+ const Subtitle = styled(Box)`
323
+ font-size: ${get('fontSizes.0')};
324
+ margin-top: ${get('space.1')};
325
+ color: ${get('colors.fg.muted')};
326
+ `
327
+ const Body = styled(Box)`
328
+ flex-grow: 1;
329
+ overflow: auto;
330
+ padding: ${get('space.3')};
331
+ `
332
+ const Footer = styled(Box).attrs({as: 'footer'})`
333
+ box-shadow: 0 -1px 0 ${get('colors.border.default')};
334
+ padding: ${get('space.3')};
335
+ display: flex;
336
+ flex-flow: wrap;
337
+ justify-content: flex-end;
338
+ z-index: 1;
339
+ flex-shrink: 0;
340
+
341
+ button {
342
+ margin-left: ${get('space.1')};
343
+ &:first-child {
344
+ margin-left: 0;
345
+ }
346
+ }
347
+ `
348
+ const buttonTypes = {
349
+ normal: Button,
350
+ primary: ButtonPrimary,
351
+ danger: ButtonDanger
352
+ }
353
+ const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
354
+ const autoFocusRef = useProvidedRefOrCreate<HTMLButtonElement>(buttons.find(button => button.autoFocus)?.ref)
355
+ let autoFocusCount = 0
356
+ const [hasRendered, setHasRendered] = useState(0)
357
+ useEffect(() => {
358
+ // hack to work around dialogs originating from other focus traps.
359
+ if (hasRendered === 1) {
360
+ autoFocusRef.current?.focus()
361
+ } else {
362
+ setHasRendered(hasRendered + 1)
363
+ }
364
+ }, [autoFocusRef, hasRendered])
365
+
366
+ return (
367
+ <>
368
+ {buttons.map((dialogButtonProps, index) => {
369
+ const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps
370
+ const ButtonElement = buttonTypes[buttonType]
371
+ return (
372
+ <ButtonElement
373
+ key={index}
374
+ {...buttonProps}
375
+ ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
376
+ >
377
+ {content}
378
+ </ButtonElement>
379
+ )
380
+ })}
381
+ </>
382
+ )
383
+ }
384
+ const DialogCloseButton = styled(Button)`
385
+ border-radius: 4px;
386
+ background: transparent;
387
+ border: 0;
388
+ vertical-align: middle;
389
+ color: ${get('colors.fg.muted')};
390
+ padding: ${get('space.2')};
391
+ align-self: flex-start;
392
+ line-height: normal;
393
+ box-shadow: none;
394
+ `
395
+ const CloseButton: React.FC<{onClose: () => void}> = ({onClose}) => {
396
+ return (
397
+ <DialogCloseButton aria-label="Close" onClick={onClose}>
398
+ <StyledOcticon icon={XIcon} />
399
+ </DialogCloseButton>
400
+ )
401
+ }
402
+
403
+ /**
404
+ * A dialog is a type of overlay that can be used for confirming actions, asking
405
+ * for disambiguation, and presenting small forms. They generally allow the user
406
+ * to focus on a quick task without having to navigate to a different page.
407
+ *
408
+ * Dialogs appear in the page after a direct user interaction. Don't show dialogs
409
+ * on page load or as system alerts.
410
+ *
411
+ * Dialogs appear centered in the page, with a visible backdrop that dims the rest
412
+ * of the window for focus.
413
+ *
414
+ * All dialogs have a title and a close button.
415
+ *
416
+ * Dialogs are modal. Dialogs can be dismissed by clicking on the close button,
417
+ * pressing the escape key, or by interacting with another button in the dialog.
418
+ * To avoid losing information and missing important messages, clicking outside
419
+ * of the dialog will not close it.
420
+ *
421
+ * The sub components provided (e.g. Header, Title, etc.) are available for custom
422
+ * renderers only. They are not intended to be used otherwise.
423
+ */
424
+ export const Dialog = Object.assign(_Dialog, {
425
+ Header,
426
+ Title,
427
+ Subtitle,
428
+ Body,
429
+ Footer,
430
+ Buttons,
431
+ CloseButton
432
+ })
package/src/Dialog.tsx ADDED
@@ -0,0 +1,149 @@
1
+ import React, {forwardRef, useRef} from 'react'
2
+ import styled from 'styled-components'
3
+ import ButtonClose from './Button/ButtonClose'
4
+ import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from './constants'
5
+ import Box from './Box'
6
+ import useDialog from './hooks/useDialog'
7
+ import sx, {SxProp} from './sx'
8
+ import Text from './Text'
9
+ import {ComponentProps} from './utils/types'
10
+ import {useCombinedRefs} from './hooks/useCombinedRefs'
11
+
12
+ const noop = () => null
13
+
14
+ type StyledDialogBaseProps = {
15
+ narrow?: boolean
16
+ wide?: boolean
17
+ } & SystemLayoutProps &
18
+ SystemCommonProps &
19
+ SxProp
20
+
21
+ const DialogBase = styled.div<StyledDialogBaseProps>`
22
+ box-shadow: ${get('shadows.shadow.large')};
23
+ border-radius: ${get('radii.2')};
24
+ position: fixed;
25
+ top: 0;
26
+ left: 50%;
27
+ transform: translateX(-50%);
28
+ max-height: 80vh;
29
+ z-index: 999;
30
+ margin: 10vh auto;
31
+ background-color: ${get('colors.canvas.default')};
32
+ width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
33
+ outline: none;
34
+
35
+ @media screen and (max-width: 750px) {
36
+ width: 100vw;
37
+ margin: 0;
38
+ border-radius: 0;
39
+ height: 100vh;
40
+ }
41
+
42
+ ${LAYOUT};
43
+ ${COMMON};
44
+ ${sx};
45
+ `
46
+
47
+ const DialogHeaderBase = styled(Box)<SxProp>`
48
+ border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
49
+ border-bottom: 1px solid ${get('colors.border.default')};
50
+ display: flex;
51
+
52
+ @media screen and (max-width: 750px) {
53
+ border-radius: 0px;
54
+ }
55
+
56
+ ${sx};
57
+ `
58
+ export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>
59
+
60
+ function DialogHeader({theme, children, backgroundColor = 'gray.1', ...rest}: DialogHeaderProps) {
61
+ if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
62
+ children = (
63
+ <Text theme={theme} color="fg.default" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
64
+ {children}
65
+ </Text>
66
+ )
67
+ }
68
+
69
+ return (
70
+ <DialogHeaderBase theme={theme} p={3} backgroundColor={backgroundColor} {...rest}>
71
+ {children}
72
+ </DialogHeaderBase>
73
+ )
74
+ }
75
+
76
+ const Overlay = styled.span`
77
+ &:before {
78
+ position: fixed;
79
+ top: 0;
80
+ right: 0;
81
+ bottom: 0;
82
+ left: 0;
83
+ display: block;
84
+ cursor: default;
85
+ content: ' ';
86
+ background: transparent;
87
+ z-index: 99;
88
+ background: ${get('colors.primer.canvas.backdrop')};
89
+ }
90
+ `
91
+
92
+ type InternalDialogProps = {
93
+ isOpen?: boolean
94
+ onDismiss?: () => void
95
+ initialFocusRef?: React.RefObject<HTMLElement>
96
+ returnFocusRef?: React.RefObject<HTMLElement>
97
+ } & ComponentProps<typeof DialogBase>
98
+
99
+ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
100
+ ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, ...props}, forwardedRef) => {
101
+ const overlayRef = useRef(null)
102
+ const modalRef = useCombinedRefs(forwardedRef)
103
+ const closeButtonRef = useRef(null)
104
+
105
+ const onCloseClick = () => {
106
+ onDismiss()
107
+ if (returnFocusRef && returnFocusRef.current) {
108
+ returnFocusRef.current.focus()
109
+ }
110
+ }
111
+
112
+ const {getDialogProps} = useDialog({
113
+ modalRef,
114
+ onDismiss: onCloseClick,
115
+ isOpen,
116
+ initialFocusRef,
117
+ closeButtonRef,
118
+ returnFocusRef,
119
+ overlayRef
120
+ })
121
+ return isOpen ? (
122
+ <>
123
+ <Overlay ref={overlayRef} />
124
+ <DialogBase tabIndex={-1} ref={modalRef} role="dialog" aria-modal="true" {...props} {...getDialogProps()}>
125
+ <ButtonClose
126
+ ref={closeButtonRef}
127
+ onClick={onCloseClick}
128
+ sx={{position: 'absolute', top: '16px', right: '16px'}}
129
+ />
130
+ {children}
131
+ </DialogBase>
132
+ </>
133
+ ) : null
134
+ }
135
+ )
136
+
137
+ DialogHeader.defaultProps = {
138
+ backgroundColor: 'canvas.subtle'
139
+ }
140
+
141
+ DialogHeader.propTypes = {
142
+ ...Box.propTypes
143
+ }
144
+
145
+ DialogHeader.displayName = 'Dialog.Header'
146
+ Dialog.displayName = 'Dialog'
147
+
148
+ export type DialogProps = ComponentProps<typeof Dialog>
149
+ export default Object.assign(Dialog, {Header: DialogHeader})