@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
package/rollup.config.js DELETED
@@ -1,36 +0,0 @@
1
- import babel from 'rollup-plugin-babel'
2
- import commonjs from '@rollup/plugin-commonjs'
3
- import resolve from '@rollup/plugin-node-resolve'
4
- import {terser} from 'rollup-plugin-terser'
5
- import visualizer from 'rollup-plugin-visualizer'
6
-
7
- const extensions = ['.js', '.jsx', '.ts', '.tsx']
8
-
9
- const formats = ['esm', 'umd']
10
-
11
- const plugins = [
12
- babel({extensions, exclude: 'node_modules/**', runtimeHelpers: true}),
13
- resolve({extensions}),
14
- commonjs(),
15
- terser(),
16
- visualizer({sourcemap: true})
17
- ]
18
-
19
- export default [
20
- {
21
- input: 'src/index.ts',
22
- external: ['styled-components', 'react', 'react-dom'],
23
- plugins,
24
- output: formats.map(format => ({
25
- file: `dist/browser.${format}.js`,
26
- format,
27
- sourcemap: true,
28
- name: 'primer',
29
- globals: {
30
- react: 'React',
31
- 'react-dom': 'ReactDOM',
32
- 'styled-components': 'styled'
33
- }
34
- }))
35
- }
36
- ]
package/script/build DELETED
@@ -1,19 +0,0 @@
1
- #!/bin/bash
2
-
3
- # Clean up
4
- rm -rf dist
5
- rm -rf lib
6
- rm -rf lib-esm
7
-
8
- # Bundle
9
- npx cross-env NODE_ENV=production rollup -c
10
-
11
- # Compile
12
- npx cross-env BABEL_MODULE=commonjs babel src --out-dir lib --extensions ".js,.ts,.jsx,.tsx"
13
- npx babel src --out-dir lib-esm --extensions ".js,.ts,.jsx,.tsx"
14
-
15
- # Type check
16
- npx tsc --project tsconfig.build.json
17
-
18
- # Copy type declarations
19
- npx copyfiles -u 1 "./lib/**/*.d.ts" ./lib-esm
@@ -1,10 +0,0 @@
1
- #!/bin/bash
2
-
3
- # Add base url to be able to serve static files
4
- echo '<base href="/react/storybook/" />' >> .storybook/manager-head.html
5
-
6
- # Build storybook inside docs
7
- ./node_modules/.bin/build-storybook -o docs/public/storybook -s docs/public/static
8
-
9
- # Remove manager-head after build to not interfere with dev builds
10
- rm .storybook/manager-head.html
package/script/setup DELETED
@@ -1,12 +0,0 @@
1
- #!/bin/bash
2
-
3
- # Install dependencies
4
- npm install
5
-
6
- # Build
7
- npm run build
8
-
9
- # Install docs dependencies
10
- pushd docs
11
- npm install
12
- popd
@@ -1,25 +0,0 @@
1
- import React from 'react'
2
- import styled from 'styled-components'
3
- import {get} from '../constants'
4
-
5
- export const StyledDivider = styled.div`
6
- height: 1px;
7
- background: ${get('colors.border.muted')};
8
- margin-top: calc(${get('space.2')} - 1px);
9
- margin-bottom: ${get('space.2')};
10
- `
11
-
12
- /**
13
- * Visually separates `Item`s or `Group`s in an `ActionList`.
14
- */
15
- export function Divider(): JSX.Element {
16
- return <StyledDivider />
17
- }
18
-
19
- /**
20
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
21
- * so it can be used inline in an `ActionList`’s `items` prop.
22
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
23
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
24
- */
25
- Divider.renderItem = Divider
@@ -1,45 +0,0 @@
1
- import React from 'react'
2
- import styled from 'styled-components'
3
- import sx, {SxProp} from '../sx'
4
- import {Header, HeaderProps} from './Header'
5
-
6
- /**
7
- * Contract for props passed to the `Group` component.
8
- */
9
- export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
10
- /**
11
- * Props for a `Header` to render in the `Group`.
12
- */
13
- header?: HeaderProps
14
-
15
- /**
16
- * The id of the group.
17
- */
18
- groupId?: string
19
-
20
- /**
21
- * `Items` to render in the `Group`.
22
- */
23
- items?: JSX.Element[]
24
-
25
- /**
26
- * Whether to display a divider above each `Item` in this `Group` when it does not follow a `Header` or `Divider`.
27
- */
28
- showItemDividers?: boolean
29
- }
30
-
31
- const StyledGroup = styled.div`
32
- ${sx}
33
- `
34
-
35
- /**
36
- * Collects related `Items` in an `ActionList`.
37
- */
38
- export function Group({header, items, ...props}: GroupProps): JSX.Element {
39
- return (
40
- <StyledGroup {...props}>
41
- {header && <Header {...header} />}
42
- {items}
43
- </StyledGroup>
44
- )
45
- }
@@ -1,74 +0,0 @@
1
- import React from 'react'
2
- import styled, {css} from 'styled-components'
3
- import {get} from '../constants'
4
- import sx, {SxProp} from '../sx'
5
-
6
- /**
7
- * Contract for props passed to the `Header` component.
8
- */
9
- export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
10
- /**
11
- * Style variations. Usage is discretionary.
12
- *
13
- * - `"filled"` - Superimposed on a background, offset from nearby content
14
- * - `"subtle"` - Relatively less offset from nearby content
15
- */
16
- variant?: 'subtle' | 'filled'
17
-
18
- /**
19
- * Primary text which names a `Group`.
20
- */
21
- title: string
22
-
23
- /**
24
- * Secondary text which provides additional information about a `Group`.
25
- */
26
- auxiliaryText?: string
27
- }
28
-
29
- export const StyledHeader = styled.div<{variant: HeaderProps['variant']} & SxProp>`
30
- {
31
- /* 6px vertical padding + 20px line height = 32px total height
32
- *
33
- * TODO: When rem-based spacing on a 4px scale lands, replace
34
- * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.
35
- */
36
- }
37
- padding: 6px ${get('space.3')};
38
- font-size: ${get('fontSizes.0')};
39
- font-weight: ${get('fontWeights.bold')};
40
- color: ${get('colors.fg.muted')};
41
-
42
- ${({variant}) =>
43
- variant === 'filled' &&
44
- css`
45
- background: ${get('colors.canvas.subtle')};
46
- margin: ${get('space.2')} 0;
47
- border-top: 1px solid ${get('colors.neutral.muted')};
48
- border-bottom: 1px solid ${get('colors.neutral.muted')};
49
-
50
- &:first-child {
51
- margin-top: 0;
52
- }
53
- `}
54
-
55
- ${sx}
56
- `
57
-
58
- /**
59
- * Displays the name and description of a `Group`.
60
- */
61
- export function Header({
62
- variant = 'subtle',
63
- title,
64
- auxiliaryText,
65
- children: _children,
66
- ...props
67
- }: HeaderProps): JSX.Element {
68
- return (
69
- <StyledHeader role="heading" variant={variant} {...props}>
70
- {title}
71
- {auxiliaryText && <span>auxiliaryText</span>}
72
- </StyledHeader>
73
- )
74
- }
@@ -1,483 +0,0 @@
1
- import {CheckIcon, IconProps} from '@primer/octicons-react'
2
- import React, {useCallback} from 'react'
3
- import {get} from '../constants'
4
- import sx, {SxProp} from '../sx'
5
- import Truncate from '../Truncate'
6
- import {ItemInput} from './List'
7
- import styled from 'styled-components'
8
- import {StyledHeader} from './Header'
9
- import {StyledDivider} from './Divider'
10
- import {useColorSchemeVar, useTheme} from '../ThemeProvider'
11
- import {
12
- activeDescendantActivatedDirectly,
13
- activeDescendantActivatedIndirectly,
14
- isActiveDescendantAttribute
15
- } from '../behaviors/focusZone'
16
- import {useSSRSafeId} from '@react-aria/ssr'
17
- import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
18
- import {AriaRole} from '../utils/types'
19
-
20
- /**
21
- * These colors are not yet in our default theme. Need to remove this once they are added.
22
- */
23
- const customItemThemes = {
24
- default: {
25
- hover: {
26
- light: 'rgba(46, 77, 108, 0.06)',
27
- dark: 'rgba(201, 206, 212, 0.12)',
28
- dark_dimmed: 'rgba(201, 206, 212, 0.12)'
29
- },
30
- focus: {
31
- light: 'rgba(54, 77, 100, 0.16)',
32
- dark: 'rgba(201, 206, 212, 0.24)',
33
- dark_dimmed: 'rgba(201, 206, 212, 0.24)'
34
- }
35
- },
36
- danger: {
37
- hover: {
38
- light: 'rgba(234, 74, 90, 0.08)',
39
- dark: 'rgba(248, 81, 73, 0.16)',
40
- dark_dimmed: 'rgba(248, 81, 73, 0.16)'
41
- },
42
- focus: {
43
- light: 'rgba(234, 74, 90, 0.14)',
44
- dark: 'rgba(248, 81, 73, 0.24)',
45
- dark_dimmed: 'rgba(248, 81, 73, 0.24)'
46
- }
47
- }
48
- } as const
49
-
50
- /**
51
- * Contract for props passed to the `Item` component.
52
- */
53
- export interface ItemProps extends SxProp {
54
- /**
55
- * Primary text which names an `Item`.
56
- */
57
- text?: string
58
-
59
- /**
60
- * Secondary text which provides additional information about an `Item`.
61
- */
62
- description?: string
63
-
64
- /**
65
- * Secondary text style variations. Usage is discretionary.
66
- *
67
- * - `"inline"` - Secondary text is positioned beside primary text.
68
- * - `"block"` - Secondary text is positioned below primary text.
69
- */
70
- descriptionVariant?: 'inline' | 'block'
71
-
72
- /**
73
- * Icon (or similar) positioned before `Item` text.
74
- */
75
- leadingVisual?: React.FunctionComponent<IconProps>
76
-
77
- /**
78
- * Icon (or similar) positioned after `Item` text.
79
- */
80
- trailingIcon?: React.FunctionComponent<IconProps>
81
-
82
- /**
83
- * Text positioned after `Item` text and optional trailing icon.
84
- */
85
- trailingText?: string
86
-
87
- /**
88
- * Style variations associated with various `Item` types.
89
- *
90
- * - `"default"` - An action `Item`.
91
- * - `"danger"` - A destructive action `Item`.
92
- */
93
- variant?: 'default' | 'danger'
94
-
95
- /**
96
- * Whether to display a divider above the `Item` when it does not follow a `Header` or `Divider`.
97
- */
98
- showDivider?: boolean
99
-
100
- /**
101
- * For `Item`s which can be selected, whether the `Item` is currently selected.
102
- */
103
- selected?: boolean
104
-
105
- /**
106
- * For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
107
- */
108
- selectionVariant?: 'single' | 'multiple'
109
-
110
- /**
111
- * Designates the group that an item belongs to.
112
- */
113
- groupId?: string
114
-
115
- /**
116
- * Items that are disabled can not be clicked, selected, or navigated through.
117
- */
118
- disabled?: boolean
119
-
120
- /**
121
- * Callback that will trigger both on click selection and keyboard selection.
122
- */
123
- onAction?: (item: ItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
124
-
125
- /**
126
- * An id associated with this item. Should be unique between items
127
- */
128
- id?: number | string
129
-
130
- /**
131
- * Node to be included inside the item before the text.
132
- */
133
- children?: React.ReactNode
134
-
135
- /**
136
- * The ARIA role describing the function of `List` component. `option` is a common value.
137
- */
138
- role?: AriaRole
139
-
140
- /**
141
- * An item to pass back in the `onAction` callback, meant as
142
- */
143
- item?: ItemInput
144
- }
145
-
146
- const getItemVariant = (variant = 'default', disabled?: boolean) => {
147
- if (disabled) {
148
- return {
149
- color: get('colors.primer.fg.disabled'),
150
- iconColor: get('colors.primer.fg.disabled'),
151
- annotationColor: get('colors.primer.fg.disabled'),
152
- hoverCursor: 'default'
153
- }
154
- }
155
-
156
- switch (variant) {
157
- case 'danger':
158
- return {
159
- color: get('colors.danger.fg'),
160
- iconColor: get('colors.danger.fg'),
161
- annotationColor: get('colors.fg.muted'),
162
- hoverCursor: 'pointer'
163
- }
164
- default:
165
- return {
166
- color: get('colors.fg.default'),
167
- iconColor: get('colors.fg.muted'),
168
- annotationColor: get('colors.fg.muted'),
169
- hoverCursor: 'pointer'
170
- }
171
- }
172
- }
173
-
174
- const DividedContent = styled.div`
175
- display: flex;
176
- min-width: 0;
177
-
178
- /* Required for dividers */
179
- position: relative;
180
- flex-grow: 1;
181
- `
182
-
183
- const MainContent = styled.div`
184
- align-items: baseline;
185
- display: flex;
186
- min-width: 0;
187
- flex-direction: var(--main-content-flex-direction);
188
- flex-grow: 1;
189
- `
190
-
191
- const StyledItem = styled.div<
192
- {
193
- variant: ItemProps['variant']
194
- showDivider: ItemProps['showDivider']
195
- item?: ItemInput
196
- hoverBackground: string
197
- focusBackground: string
198
- } & SxProp
199
- >`
200
- /* 6px vertical padding + 20px line height = 32px total height
201
- *
202
- * TODO: When rem-based spacing on a 4px scale lands, replace
203
- * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.
204
- */
205
- padding: 6px ${get('space.2')};
206
- display: flex;
207
- border-radius: ${get('radii.2')};
208
- color: ${({variant, item}) => getItemVariant(variant, item?.disabled).color};
209
- // 2 frames on a 60hz monitor
210
- transition: background 33.333ms linear;
211
- text-decoration: none;
212
-
213
- @media (hover: hover) and (pointer: fine) {
214
- :hover {
215
- // allow override in case another item in the list is active/focused
216
- background: var(--item-hover-bg-override, ${({hoverBackground}) => hoverBackground});
217
- cursor: ${({variant, item}) => getItemVariant(variant, item?.disabled).hoverCursor};
218
- }
219
- }
220
-
221
- // Item dividers
222
- :not(:first-of-type):not(${StyledDivider} + &):not(${StyledHeader} + &) {
223
- margin-top: ${({showDivider}) => (showDivider ? `1px` : '0')};
224
-
225
- ${DividedContent}::before {
226
- content: ' ';
227
- display: block;
228
- position: absolute;
229
- width: 100%;
230
- top: -7px;
231
- // NB: This 'get' won’t execute if it’s moved into the arrow function below.
232
- border: 0 solid ${get('colors.border.muted')};
233
- border-top-width: ${({showDivider}) => (showDivider ? `1px` : '0')};
234
- }
235
- }
236
-
237
- // Item dividers should not be visible:
238
- // - above Hovered
239
- &:hover ${DividedContent}::before,
240
- // - below Hovered
241
- // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
242
- :hover + * ${DividedContent}::before {
243
- // allow override in case another item in the list is active/focused
244
- border-color: var(--item-hover-divider-border-color-override, transparent) !important;
245
- }
246
-
247
- // - above Focused
248
- &:focus ${DividedContent}::before,
249
- // - below Focused
250
- // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
251
- :focus + * ${DividedContent}::before,
252
- // - above Active Descendent
253
- &[${isActiveDescendantAttribute}] ${DividedContent}::before,
254
- // - below Active Descendent
255
- [${isActiveDescendantAttribute}] + & ${DividedContent}::before {
256
- // '!important' because all the ':not's above give higher specificity
257
- border-color: transparent !important;
258
- }
259
-
260
- // Active Descendant
261
- &[${isActiveDescendantAttribute}='${activeDescendantActivatedDirectly}'] {
262
- background: ${({focusBackground}) => focusBackground};
263
- }
264
- &[${isActiveDescendantAttribute}='${activeDescendantActivatedIndirectly}'] {
265
- background: ${({hoverBackground}) => hoverBackground};
266
- }
267
-
268
- &:focus {
269
- background: ${({focusBackground}) => focusBackground};
270
- outline: none;
271
- }
272
-
273
- &:active {
274
- background: ${({focusBackground}) => focusBackground};
275
- }
276
-
277
- ${sx}
278
- `
279
-
280
- export const TextContainer = styled.span<{
281
- dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML']
282
- }>``
283
-
284
- const BaseVisualContainer = styled.div<{variant?: ItemProps['variant']; disabled?: boolean}>`
285
- // Match visual height to adjacent text line height.
286
- // TODO: When rem-based spacing on a 4px scale lands, replace
287
- // hardcoded '20px' with '${get('space.s20')}'.
288
- height: 20px;
289
- width: ${get('space.3')};
290
- margin-right: ${get('space.2')};
291
- `
292
-
293
- const ColoredVisualContainer = styled(BaseVisualContainer)`
294
- svg {
295
- fill: ${({variant, disabled}) => getItemVariant(variant, disabled).iconColor};
296
- font-size: ${get('fontSizes.0')};
297
- }
298
- `
299
-
300
- const LeadingVisualContainer = styled(ColoredVisualContainer)`
301
- flex-shrink: 0;
302
- display: flex;
303
- flex-direction: column;
304
- justify-content: center;
305
- `
306
-
307
- const TrailingContent = styled(ColoredVisualContainer)`
308
- color: ${({variant, disabled}) => getItemVariant(variant, disabled).annotationColor}};
309
- margin-left: ${get('space.2')};
310
- margin-right: 0;
311
- width: auto;
312
- div:nth-child(2) {
313
- margin-left: ${get('space.2')};
314
- }
315
- `
316
-
317
- const DescriptionContainer = styled.span`
318
- color: ${get('colors.fg.muted')};
319
- font-size: ${get('fontSizes.0')};
320
- // TODO: When rem-based spacing on a 4px scale lands, replace
321
- // hardcoded '16px' with '${get('lh-12')}'.
322
- line-height: 16px;
323
- margin-left: var(--description-container-margin-left);
324
- min-width: 0;
325
- flex-grow: 1;
326
- flex-basis: var(--description-container-flex-basis);
327
- `
328
-
329
- const MultiSelectInput = styled.input`
330
- pointer-events: none;
331
- `
332
-
333
- /**
334
- * An actionable or selectable `Item` with an optional icon and description.
335
- */
336
- export const Item = React.forwardRef((itemProps, ref) => {
337
- const {
338
- as: Component,
339
- text,
340
- description,
341
- descriptionVariant = 'inline',
342
- selected,
343
- selectionVariant,
344
- leadingVisual: LeadingVisual,
345
- trailingIcon: TrailingIcon,
346
- trailingText,
347
- variant = 'default',
348
- showDivider,
349
- disabled,
350
- onAction,
351
- onKeyPress,
352
- children,
353
- onClick,
354
- id,
355
- ...props
356
- } = itemProps
357
-
358
- const labelId = useSSRSafeId()
359
- const descriptionId = useSSRSafeId()
360
-
361
- const keyPressHandler = useCallback(
362
- event => {
363
- if (disabled) {
364
- return
365
- }
366
- onKeyPress?.(event)
367
- const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox'
368
- if (isCheckbox && event.key === ' ') {
369
- // space key on a checkbox will also trigger a click event. Ignore the space key so we don't get double events
370
- return
371
- }
372
-
373
- if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
374
- onAction?.(itemProps, event)
375
- }
376
- },
377
- [onAction, disabled, itemProps, onKeyPress]
378
- )
379
-
380
- const clickHandler = useCallback(
381
- event => {
382
- if (disabled) {
383
- return
384
- }
385
- onClick?.(event)
386
- if (!event.defaultPrevented) {
387
- onAction?.(itemProps, event)
388
- }
389
- },
390
- [onAction, disabled, itemProps, onClick]
391
- )
392
-
393
- const customItemTheme = customItemThemes[variant]
394
- const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit')
395
- const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit')
396
-
397
- const {theme} = useTheme()
398
-
399
- return (
400
- <StyledItem
401
- ref={ref}
402
- as={Component}
403
- tabIndex={disabled ? undefined : -1}
404
- variant={variant}
405
- showDivider={showDivider}
406
- aria-selected={selected}
407
- aria-labelledby={text ? labelId : undefined}
408
- aria-describedby={description ? descriptionId : undefined}
409
- {...props}
410
- data-id={id}
411
- onKeyPress={keyPressHandler}
412
- onClick={clickHandler}
413
- hoverBackground={disabled ? 'inherit' : hoverBackground}
414
- focusBackground={disabled ? 'inherit' : focusBackground}
415
- >
416
- {!!selected === selected && (
417
- <BaseVisualContainer>
418
- {selectionVariant === 'multiple' ? (
419
- <>
420
- {/*
421
- * readOnly is required because we are doing a one-way bind to `checked`.
422
- * aria-readonly="false" tells screen that they can still interact with the checkbox
423
- */}
424
- <MultiSelectInput
425
- disabled={disabled}
426
- tabIndex={-1}
427
- type="checkbox"
428
- checked={selected}
429
- aria-label={text}
430
- readOnly
431
- aria-readonly="false"
432
- />
433
- </>
434
- ) : (
435
- selected && <CheckIcon fill={theme?.colors.fg.default} />
436
- )}
437
- </BaseVisualContainer>
438
- )}
439
- {LeadingVisual && (
440
- <LeadingVisualContainer variant={variant} disabled={disabled}>
441
- <LeadingVisual />
442
- </LeadingVisualContainer>
443
- )}
444
- <DividedContent>
445
- <MainContent
446
- style={
447
- {'--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column'} as React.CSSProperties
448
- }
449
- >
450
- {children}
451
- {text ? <TextContainer id={labelId}>{text}</TextContainer> : null}
452
- {description ? (
453
- <DescriptionContainer
454
- id={descriptionId}
455
- style={
456
- {
457
- '--description-container-margin-left': descriptionVariant === 'inline' ? get('space.2')(theme) : 0,
458
- '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
459
- } as React.CSSProperties
460
- }
461
- >
462
- {descriptionVariant === 'block' ? (
463
- description
464
- ) : (
465
- <Truncate title={description} inline={true} maxWidth="100%">
466
- {description}
467
- </Truncate>
468
- )}
469
- </DescriptionContainer>
470
- ) : null}
471
- </MainContent>
472
- {TrailingIcon || trailingText ? (
473
- <TrailingContent variant={variant} disabled={disabled}>
474
- {trailingText}
475
- {TrailingIcon && <TrailingIcon />}
476
- </TrailingContent>
477
- ) : null}
478
- </DividedContent>
479
- </StyledItem>
480
- )
481
- }) as PolymorphicForwardRefComponent<'div', ItemProps>
482
-
483
- Item.displayName = 'ActionList.Item'