@primer/components 31.0.0-rc.ee65b7f1 → 31.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (817) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/browser.esm.js +33 -28
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +13 -8
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +6 -0
  7. package/lib/ActionList/Item.js +8 -4
  8. package/lib/Button/Button.js +1 -1
  9. package/lib/Button/ButtonInvisible.js +1 -1
  10. package/lib/Button/ButtonTableList.js +1 -1
  11. package/lib/Pagination/Pagination.js +1 -1
  12. package/lib/_TextInputWrapper.js +1 -1
  13. package/lib-esm/ActionList/Item.d.ts +6 -0
  14. package/lib-esm/ActionList/Item.js +8 -4
  15. package/lib-esm/Button/Button.js +1 -1
  16. package/lib-esm/Button/ButtonInvisible.js +1 -1
  17. package/lib-esm/Button/ButtonTableList.js +1 -1
  18. package/lib-esm/Pagination/Pagination.js +1 -1
  19. package/lib-esm/_TextInputWrapper.js +1 -1
  20. package/package.json +1 -1
  21. package/.changeset/README.md +0 -8
  22. package/.changeset/config.json +0 -10
  23. package/.devcontainer/devcontainer.json +0 -8
  24. package/.eslintrc.json +0 -137
  25. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  26. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  27. package/.github/dependabot.yml +0 -18
  28. package/.github/pull_request_template.md +0 -18
  29. package/.github/workflows/ci.yml +0 -31
  30. package/.github/workflows/deploy_preview.yml +0 -47
  31. package/.github/workflows/deploy_production.yml +0 -70
  32. package/.github/workflows/release.yml +0 -35
  33. package/.github/workflows/release_canary.yml +0 -70
  34. package/.github/workflows/release_candidate.yml +0 -60
  35. package/.github/workflows/size.yml +0 -13
  36. package/.github/workflows/stale.yml +0 -26
  37. package/.gitignore +0 -10
  38. package/.npmrc +0 -4
  39. package/.nvmrc +0 -1
  40. package/.storybook/main.js +0 -11
  41. package/.storybook/preview.js +0 -113
  42. package/.vscode/launch.json +0 -21
  43. package/.vscode/settings.json +0 -13
  44. package/@types/@styled-system/index.d.ts +0 -0
  45. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  46. package/@types/@styled-system/props/index.d.ts +0 -1
  47. package/@types/jest-styled-components/index.d.ts +0 -1
  48. package/CODEOWNERS +0 -2
  49. package/babel-defines.js +0 -13
  50. package/babel.config.js +0 -39
  51. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  52. package/contributor-docs/CONTRIBUTING.md +0 -274
  53. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  54. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
  55. package/contributor-docs/behaviors.md +0 -132
  56. package/contributor-docs/component-contents-api-patterns.md +0 -316
  57. package/contributor-docs/principles.md +0 -39
  58. package/docs/.eslintrc +0 -0
  59. package/docs/.gitignore +0 -91
  60. package/docs/components/PropsList.js +0 -5
  61. package/docs/components/State.js +0 -9
  62. package/docs/components/constants.js +0 -34
  63. package/docs/components/index.js +0 -2
  64. package/docs/content/ActionList.mdx +0 -99
  65. package/docs/content/ActionMenu.mdx +0 -80
  66. package/docs/content/AnchoredOverlay.mdx +0 -37
  67. package/docs/content/Autocomplete.mdx +0 -627
  68. package/docs/content/Avatar.mdx +0 -33
  69. package/docs/content/AvatarStack.mdx +0 -37
  70. package/docs/content/BorderBox.md +0 -46
  71. package/docs/content/Box.md +0 -74
  72. package/docs/content/BranchName.md +0 -18
  73. package/docs/content/Breadcrumbs.md +0 -52
  74. package/docs/content/Buttons.md +0 -56
  75. package/docs/content/CircleBadge.md +0 -45
  76. package/docs/content/CircleOcticon.md +0 -18
  77. package/docs/content/CounterLabel.md +0 -32
  78. package/docs/content/Details.md +0 -105
  79. package/docs/content/Dialog.md +0 -108
  80. package/docs/content/Dialog2.mdx +0 -179
  81. package/docs/content/Dropdown.md +0 -72
  82. package/docs/content/DropdownMenu.mdx +0 -49
  83. package/docs/content/FilterList.md +0 -44
  84. package/docs/content/FilteredSearch.md +0 -39
  85. package/docs/content/Flash.md +0 -44
  86. package/docs/content/Flex.md +0 -58
  87. package/docs/content/FormGroup.md +0 -46
  88. package/docs/content/Grid.md +0 -59
  89. package/docs/content/Header.md +0 -79
  90. package/docs/content/Heading.md +0 -22
  91. package/docs/content/Label.md +0 -42
  92. package/docs/content/LabelGroup.md +0 -31
  93. package/docs/content/Link.md +0 -37
  94. package/docs/content/Overlay.mdx +0 -94
  95. package/docs/content/Pagehead.md +0 -27
  96. package/docs/content/Pagination.md +0 -187
  97. package/docs/content/PointerBox.md +0 -81
  98. package/docs/content/Popover.md +0 -137
  99. package/docs/content/Portal.mdx +0 -78
  100. package/docs/content/Position.md +0 -100
  101. package/docs/content/ProgressBar.mdx +0 -29
  102. package/docs/content/SelectMenu.md +0 -435
  103. package/docs/content/SelectPanel.mdx +0 -67
  104. package/docs/content/SideNav.md +0 -179
  105. package/docs/content/Spinner.mdx +0 -32
  106. package/docs/content/StateLabel.md +0 -35
  107. package/docs/content/StyledOcticon.md +0 -36
  108. package/docs/content/SubNav.md +0 -102
  109. package/docs/content/TabNav.md +0 -50
  110. package/docs/content/Text.md +0 -31
  111. package/docs/content/TextInput.md +0 -34
  112. package/docs/content/TextInputTokens.mdx +0 -89
  113. package/docs/content/TextInputWithTokens.mdx +0 -97
  114. package/docs/content/Timeline.md +0 -138
  115. package/docs/content/Token.mdx +0 -381
  116. package/docs/content/Tooltip.md +0 -41
  117. package/docs/content/Truncate.md +0 -64
  118. package/docs/content/UnderlineNav.md +0 -53
  119. package/docs/content/anchoredPosition.mdx +0 -163
  120. package/docs/content/core-concepts.md +0 -70
  121. package/docs/content/focusTrap.mdx +0 -103
  122. package/docs/content/focusZone.mdx +0 -145
  123. package/docs/content/getting-started.md +0 -138
  124. package/docs/content/index.md +0 -33
  125. package/docs/content/linting.md +0 -35
  126. package/docs/content/overriding-styles.mdx +0 -82
  127. package/docs/content/philosophy.md +0 -23
  128. package/docs/content/primer-theme.md +0 -89
  129. package/docs/content/ssr.mdx +0 -43
  130. package/docs/content/system-props.mdx +0 -37
  131. package/docs/content/theme-reference.md +0 -16
  132. package/docs/content/theming.md +0 -249
  133. package/docs/content/useOnEscapePress.mdx +0 -56
  134. package/docs/content/useOnOutsideClick.mdx +0 -57
  135. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  136. package/docs/content/useOverlay.mdx +0 -62
  137. package/docs/content/useSafeTimeout.mdx +0 -32
  138. package/docs/gatsby-config.js +0 -30
  139. package/docs/gatsby-node.js +0 -101
  140. package/docs/package-lock.json +0 -20756
  141. package/docs/package.json +0 -36
  142. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -23
  143. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
  144. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -54
  145. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -133
  146. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  147. package/docs/src/props.js +0 -77
  148. package/jest.config.js +0 -13
  149. package/lib/__tests__/ActionList.test.d.ts +0 -1
  150. package/lib/__tests__/ActionList.test.js +0 -69
  151. package/lib/__tests__/ActionList.types.test.d.ts +0 -6
  152. package/lib/__tests__/ActionList.types.test.js +0 -69
  153. package/lib/__tests__/ActionMenu.test.d.ts +0 -1
  154. package/lib/__tests__/ActionMenu.test.js +0 -151
  155. package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
  156. package/lib/__tests__/AnchoredOverlay.test.js +0 -160
  157. package/lib/__tests__/Autocomplete.test.d.ts +0 -1
  158. package/lib/__tests__/Autocomplete.test.js +0 -528
  159. package/lib/__tests__/Avatar.test.d.ts +0 -1
  160. package/lib/__tests__/Avatar.test.js +0 -67
  161. package/lib/__tests__/AvatarStack.test.d.ts +0 -1
  162. package/lib/__tests__/AvatarStack.test.js +0 -71
  163. package/lib/__tests__/BorderBox.test.d.ts +0 -1
  164. package/lib/__tests__/BorderBox.test.js +0 -58
  165. package/lib/__tests__/Box.test.d.ts +0 -1
  166. package/lib/__tests__/Box.test.js +0 -78
  167. package/lib/__tests__/BranchName.test.d.ts +0 -1
  168. package/lib/__tests__/BranchName.test.js +0 -36
  169. package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
  170. package/lib/__tests__/Breadcrumbs.test.js +0 -37
  171. package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  172. package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
  173. package/lib/__tests__/Button.test.d.ts +0 -1
  174. package/lib/__tests__/Button.test.js +0 -143
  175. package/lib/__tests__/Caret.test.d.ts +0 -1
  176. package/lib/__tests__/Caret.test.js +0 -52
  177. package/lib/__tests__/CircleBadge.test.d.ts +0 -1
  178. package/lib/__tests__/CircleBadge.test.js +0 -83
  179. package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
  180. package/lib/__tests__/CircleOcticon.test.js +0 -71
  181. package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
  182. package/lib/__tests__/ConfirmationDialog.test.js +0 -134
  183. package/lib/__tests__/CounterLabel.test.d.ts +0 -1
  184. package/lib/__tests__/CounterLabel.test.js +0 -58
  185. package/lib/__tests__/Details.test.d.ts +0 -1
  186. package/lib/__tests__/Details.test.js +0 -117
  187. package/lib/__tests__/Dialog.test.d.ts +0 -1
  188. package/lib/__tests__/Dialog.test.js +0 -184
  189. package/lib/__tests__/Dropdown.test.d.ts +0 -1
  190. package/lib/__tests__/Dropdown.test.js +0 -63
  191. package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
  192. package/lib/__tests__/DropdownMenu.test.js +0 -150
  193. package/lib/__tests__/FilterList.test.d.ts +0 -1
  194. package/lib/__tests__/FilterList.test.js +0 -36
  195. package/lib/__tests__/FilterListItem.test.d.ts +0 -1
  196. package/lib/__tests__/FilterListItem.test.js +0 -46
  197. package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
  198. package/lib/__tests__/FilteredSearch.test.js +0 -36
  199. package/lib/__tests__/Flash.test.d.ts +0 -1
  200. package/lib/__tests__/Flash.test.js +0 -62
  201. package/lib/__tests__/Flex.test.d.ts +0 -1
  202. package/lib/__tests__/Flex.test.js +0 -74
  203. package/lib/__tests__/FormGroup.test.d.ts +0 -1
  204. package/lib/__tests__/FormGroup.test.js +0 -54
  205. package/lib/__tests__/Grid.test.d.ts +0 -1
  206. package/lib/__tests__/Grid.test.js +0 -104
  207. package/lib/__tests__/Header.test.d.ts +0 -1
  208. package/lib/__tests__/Header.test.js +0 -58
  209. package/lib/__tests__/Heading.test.d.ts +0 -1
  210. package/lib/__tests__/Heading.test.js +0 -109
  211. package/lib/__tests__/Label.test.d.ts +0 -1
  212. package/lib/__tests__/Label.test.js +0 -46
  213. package/lib/__tests__/LabelGroup.test.d.ts +0 -1
  214. package/lib/__tests__/LabelGroup.test.js +0 -38
  215. package/lib/__tests__/Link.test.d.ts +0 -1
  216. package/lib/__tests__/Link.test.js +0 -70
  217. package/lib/__tests__/Merge.types.test.d.ts +0 -30
  218. package/lib/__tests__/Merge.types.test.js +0 -27
  219. package/lib/__tests__/Overlay.test.d.ts +0 -1
  220. package/lib/__tests__/Overlay.test.js +0 -145
  221. package/lib/__tests__/Pagehead.test.d.ts +0 -1
  222. package/lib/__tests__/Pagehead.test.js +0 -37
  223. package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
  224. package/lib/__tests__/Pagination/Pagination.test.js +0 -47
  225. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  226. package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
  227. package/lib/__tests__/PointerBox.test.d.ts +0 -1
  228. package/lib/__tests__/PointerBox.test.js +0 -46
  229. package/lib/__tests__/Popover.test.d.ts +0 -1
  230. package/lib/__tests__/Popover.test.js +0 -66
  231. package/lib/__tests__/Portal.test.d.ts +0 -1
  232. package/lib/__tests__/Portal.test.js +0 -124
  233. package/lib/__tests__/Position.test.d.ts +0 -1
  234. package/lib/__tests__/Position.test.js +0 -143
  235. package/lib/__tests__/ProgressBar.test.d.ts +0 -1
  236. package/lib/__tests__/ProgressBar.test.js +0 -68
  237. package/lib/__tests__/SelectMenu.test.d.ts +0 -1
  238. package/lib/__tests__/SelectMenu.test.js +0 -155
  239. package/lib/__tests__/SelectPanel.test.d.ts +0 -1
  240. package/lib/__tests__/SelectPanel.test.js +0 -80
  241. package/lib/__tests__/SideNav.test.d.ts +0 -1
  242. package/lib/__tests__/SideNav.test.js +0 -71
  243. package/lib/__tests__/Spinner.test.d.ts +0 -1
  244. package/lib/__tests__/Spinner.test.js +0 -53
  245. package/lib/__tests__/StateLabel.test.d.ts +0 -1
  246. package/lib/__tests__/StateLabel.test.js +0 -71
  247. package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
  248. package/lib/__tests__/StyledOcticon.test.js +0 -40
  249. package/lib/__tests__/SubNav.test.d.ts +0 -1
  250. package/lib/__tests__/SubNav.test.js +0 -62
  251. package/lib/__tests__/SubNavLink.test.d.ts +0 -1
  252. package/lib/__tests__/SubNavLink.test.js +0 -49
  253. package/lib/__tests__/TabNav.test.d.ts +0 -1
  254. package/lib/__tests__/TabNav.test.js +0 -49
  255. package/lib/__tests__/Text.test.d.ts +0 -1
  256. package/lib/__tests__/Text.test.js +0 -105
  257. package/lib/__tests__/TextInput.test.d.ts +0 -1
  258. package/lib/__tests__/TextInput.test.js +0 -78
  259. package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
  260. package/lib/__tests__/TextInputWithTokens.test.js +0 -389
  261. package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
  262. package/lib/__tests__/ThemeProvider.test.js +0 -444
  263. package/lib/__tests__/Timeline.test.d.ts +0 -1
  264. package/lib/__tests__/Timeline.test.js +0 -75
  265. package/lib/__tests__/Token.test.d.ts +0 -1
  266. package/lib/__tests__/Token.test.js +0 -180
  267. package/lib/__tests__/Tooltip.test.d.ts +0 -1
  268. package/lib/__tests__/Tooltip.test.js +0 -69
  269. package/lib/__tests__/Truncate.test.d.ts +0 -1
  270. package/lib/__tests__/Truncate.test.js +0 -63
  271. package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
  272. package/lib/__tests__/UnderlineNav.test.js +0 -72
  273. package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
  274. package/lib/__tests__/UnderlineNavLink.test.js +0 -51
  275. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  276. package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
  277. package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  278. package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
  279. package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
  280. package/lib/__tests__/behaviors/focusZone.test.js +0 -570
  281. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  282. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
  283. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  284. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
  285. package/lib/__tests__/filterObject.test.d.ts +0 -1
  286. package/lib/__tests__/filterObject.test.js +0 -30
  287. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  288. package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
  289. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  290. package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
  291. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  292. package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
  293. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  294. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
  295. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  296. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
  297. package/lib/__tests__/theme.test.d.ts +0 -1
  298. package/lib/__tests__/theme.test.js +0 -36
  299. package/lib/__tests__/themeGet.test.d.ts +0 -1
  300. package/lib/__tests__/themeGet.test.js +0 -25
  301. package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
  302. package/lib/__tests__/useSafeTimeout.test.js +0 -45
  303. package/lib/stories/ActionList.stories.js +0 -453
  304. package/lib/stories/ActionMenu.stories.js +0 -338
  305. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  306. package/lib/stories/Autocomplete.stories.js +0 -608
  307. package/lib/stories/AvatarStack.stories.js +0 -49
  308. package/lib/stories/Button.stories.js +0 -114
  309. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  310. package/lib/stories/Dialog.stories.js +0 -265
  311. package/lib/stories/DropdownMenu.stories.js +0 -122
  312. package/lib/stories/IssueLabelToken.stories.js +0 -165
  313. package/lib/stories/Overlay.stories.js +0 -204
  314. package/lib/stories/Portal.stories.js +0 -104
  315. package/lib/stories/ProfileToken.stories.js +0 -162
  316. package/lib/stories/SelectPanel.stories.js +0 -399
  317. package/lib/stories/TextInputWithTokens.stories.js +0 -235
  318. package/lib/stories/ThemeProvider.stories.js +0 -102
  319. package/lib/stories/Token.stories.js +0 -159
  320. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  321. package/lib/stories/useFocusTrap.stories.js +0 -356
  322. package/lib/stories/useFocusZone.stories.js +0 -599
  323. package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
  324. package/lib-esm/__tests__/ActionList.test.js +0 -57
  325. package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
  326. package/lib-esm/__tests__/ActionList.types.test.js +0 -45
  327. package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
  328. package/lib-esm/__tests__/ActionMenu.test.js +0 -139
  329. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
  330. package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -134
  331. package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
  332. package/lib-esm/__tests__/Autocomplete.test.js +0 -494
  333. package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
  334. package/lib-esm/__tests__/Avatar.test.js +0 -56
  335. package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
  336. package/lib-esm/__tests__/AvatarStack.test.js +0 -58
  337. package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
  338. package/lib-esm/__tests__/BorderBox.test.js +0 -47
  339. package/lib-esm/__tests__/Box.test.d.ts +0 -1
  340. package/lib-esm/__tests__/Box.test.js +0 -67
  341. package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
  342. package/lib-esm/__tests__/BranchName.test.js +0 -26
  343. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
  344. package/lib-esm/__tests__/Breadcrumbs.test.js +0 -27
  345. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  346. package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
  347. package/lib-esm/__tests__/Button.test.d.ts +0 -1
  348. package/lib-esm/__tests__/Button.test.js +0 -133
  349. package/lib-esm/__tests__/Caret.test.d.ts +0 -1
  350. package/lib-esm/__tests__/Caret.test.js +0 -42
  351. package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
  352. package/lib-esm/__tests__/CircleBadge.test.js +0 -70
  353. package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
  354. package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
  355. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
  356. package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
  357. package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
  358. package/lib-esm/__tests__/CounterLabel.test.js +0 -47
  359. package/lib-esm/__tests__/Details.test.d.ts +0 -1
  360. package/lib-esm/__tests__/Details.test.js +0 -107
  361. package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
  362. package/lib-esm/__tests__/Dialog.test.js +0 -171
  363. package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
  364. package/lib-esm/__tests__/Dropdown.test.js +0 -53
  365. package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
  366. package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
  367. package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
  368. package/lib-esm/__tests__/FilterList.test.js +0 -26
  369. package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
  370. package/lib-esm/__tests__/FilterListItem.test.js +0 -36
  371. package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
  372. package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
  373. package/lib-esm/__tests__/Flash.test.d.ts +0 -1
  374. package/lib-esm/__tests__/Flash.test.js +0 -51
  375. package/lib-esm/__tests__/Flex.test.d.ts +0 -1
  376. package/lib-esm/__tests__/Flex.test.js +0 -64
  377. package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
  378. package/lib-esm/__tests__/FormGroup.test.js +0 -44
  379. package/lib-esm/__tests__/Grid.test.d.ts +0 -1
  380. package/lib-esm/__tests__/Grid.test.js +0 -94
  381. package/lib-esm/__tests__/Header.test.d.ts +0 -1
  382. package/lib-esm/__tests__/Header.test.js +0 -48
  383. package/lib-esm/__tests__/Heading.test.d.ts +0 -1
  384. package/lib-esm/__tests__/Heading.test.js +0 -99
  385. package/lib-esm/__tests__/Label.test.d.ts +0 -1
  386. package/lib-esm/__tests__/Label.test.js +0 -36
  387. package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
  388. package/lib-esm/__tests__/LabelGroup.test.js +0 -26
  389. package/lib-esm/__tests__/Link.test.d.ts +0 -1
  390. package/lib-esm/__tests__/Link.test.js +0 -60
  391. package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
  392. package/lib-esm/__tests__/Merge.types.test.js +0 -14
  393. package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
  394. package/lib-esm/__tests__/Overlay.test.js +0 -123
  395. package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
  396. package/lib-esm/__tests__/Pagehead.test.js +0 -26
  397. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
  398. package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
  399. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  400. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
  401. package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
  402. package/lib-esm/__tests__/PointerBox.test.js +0 -36
  403. package/lib-esm/__tests__/Popover.test.d.ts +0 -1
  404. package/lib-esm/__tests__/Popover.test.js +0 -53
  405. package/lib-esm/__tests__/Portal.test.d.ts +0 -1
  406. package/lib-esm/__tests__/Portal.test.js +0 -104
  407. package/lib-esm/__tests__/Position.test.d.ts +0 -1
  408. package/lib-esm/__tests__/Position.test.js +0 -133
  409. package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
  410. package/lib-esm/__tests__/ProgressBar.test.js +0 -58
  411. package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
  412. package/lib-esm/__tests__/SelectMenu.test.js +0 -145
  413. package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
  414. package/lib-esm/__tests__/SelectPanel.test.js +0 -65
  415. package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
  416. package/lib-esm/__tests__/SideNav.test.js +0 -60
  417. package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
  418. package/lib-esm/__tests__/Spinner.test.js +0 -43
  419. package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
  420. package/lib-esm/__tests__/StateLabel.test.js +0 -61
  421. package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
  422. package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
  423. package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
  424. package/lib-esm/__tests__/SubNav.test.js +0 -50
  425. package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
  426. package/lib-esm/__tests__/SubNavLink.test.js +0 -39
  427. package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
  428. package/lib-esm/__tests__/TabNav.test.js +0 -39
  429. package/lib-esm/__tests__/Text.test.d.ts +0 -1
  430. package/lib-esm/__tests__/Text.test.js +0 -93
  431. package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
  432. package/lib-esm/__tests__/TextInput.test.js +0 -68
  433. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
  434. package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -341
  435. package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
  436. package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
  437. package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
  438. package/lib-esm/__tests__/Timeline.test.js +0 -65
  439. package/lib-esm/__tests__/Token.test.d.ts +0 -1
  440. package/lib-esm/__tests__/Token.test.js +0 -166
  441. package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
  442. package/lib-esm/__tests__/Tooltip.test.js +0 -59
  443. package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
  444. package/lib-esm/__tests__/Truncate.test.js +0 -53
  445. package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
  446. package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
  447. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
  448. package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
  449. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  450. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
  451. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  452. package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
  453. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
  454. package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
  455. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  456. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
  457. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  458. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
  459. package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
  460. package/lib-esm/__tests__/filterObject.test.js +0 -27
  461. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  462. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
  463. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  464. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
  465. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  466. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
  467. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  468. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
  469. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  470. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
  471. package/lib-esm/__tests__/theme.test.d.ts +0 -1
  472. package/lib-esm/__tests__/theme.test.js +0 -33
  473. package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
  474. package/lib-esm/__tests__/themeGet.test.js +0 -22
  475. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
  476. package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
  477. package/lib-esm/stories/ActionList.stories.js +0 -394
  478. package/lib-esm/stories/ActionMenu.stories.js +0 -293
  479. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  480. package/lib-esm/stories/Autocomplete.stories.js +0 -549
  481. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  482. package/lib-esm/stories/Button.stories.js +0 -78
  483. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  484. package/lib-esm/stories/Dialog.stories.js +0 -240
  485. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  486. package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
  487. package/lib-esm/stories/Overlay.stories.js +0 -173
  488. package/lib-esm/stories/Portal.stories.js +0 -68
  489. package/lib-esm/stories/ProfileToken.stories.js +0 -136
  490. package/lib-esm/stories/SelectPanel.stories.js +0 -334
  491. package/lib-esm/stories/TextInputWithTokens.stories.js +0 -196
  492. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  493. package/lib-esm/stories/Token.stories.js +0 -133
  494. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  495. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  496. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  497. package/migrating.md +0 -250
  498. package/now.json +0 -17
  499. package/package-lock.json +0 -29369
  500. package/rollup.config.js +0 -36
  501. package/script/build +0 -19
  502. package/script/build-storybook +0 -10
  503. package/script/setup +0 -12
  504. package/src/ActionList/Divider.tsx +0 -25
  505. package/src/ActionList/Group.tsx +0 -45
  506. package/src/ActionList/Header.tsx +0 -74
  507. package/src/ActionList/Item.tsx +0 -483
  508. package/src/ActionList/List.tsx +0 -258
  509. package/src/ActionList/index.ts +0 -21
  510. package/src/ActionMenu.tsx +0 -106
  511. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
  512. package/src/AnchoredOverlay/index.ts +0 -2
  513. package/src/Autocomplete/Autocomplete.tsx +0 -103
  514. package/src/Autocomplete/AutocompleteContext.tsx +0 -19
  515. package/src/Autocomplete/AutocompleteInput.tsx +0 -179
  516. package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
  517. package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
  518. package/src/Autocomplete/index.ts +0 -2
  519. package/src/Avatar.tsx +0 -46
  520. package/src/AvatarPair.tsx +0 -35
  521. package/src/AvatarStack.tsx +0 -159
  522. package/src/BaseStyles.tsx +0 -53
  523. package/src/BorderBox.tsx +0 -18
  524. package/src/Box.tsx +0 -54
  525. package/src/BranchName.tsx +0 -19
  526. package/src/Breadcrumbs.tsx +0 -101
  527. package/src/Button/Button.tsx +0 -40
  528. package/src/Button/ButtonBase.tsx +0 -43
  529. package/src/Button/ButtonClose.tsx +0 -40
  530. package/src/Button/ButtonDanger.tsx +0 -43
  531. package/src/Button/ButtonGroup.tsx +0 -55
  532. package/src/Button/ButtonInvisible.tsx +0 -27
  533. package/src/Button/ButtonOutline.tsx +0 -43
  534. package/src/Button/ButtonPrimary.tsx +0 -41
  535. package/src/Button/ButtonStyles.tsx +0 -36
  536. package/src/Button/ButtonTableList.tsx +0 -58
  537. package/src/Button/index.ts +0 -16
  538. package/src/Caret.tsx +0 -133
  539. package/src/CircleBadge.tsx +0 -55
  540. package/src/CircleOcticon.tsx +0 -37
  541. package/src/CounterLabel.tsx +0 -52
  542. package/src/Details.tsx +0 -23
  543. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  544. package/src/Dialog/Dialog.tsx +0 -432
  545. package/src/Dialog.tsx +0 -149
  546. package/src/Dropdown.tsx +0 -158
  547. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  548. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  549. package/src/DropdownMenu/index.ts +0 -4
  550. package/src/DropdownStyles.ts +0 -128
  551. package/src/FilterList.tsx +0 -81
  552. package/src/FilteredActionList/FilteredActionList.tsx +0 -142
  553. package/src/FilteredActionList/index.ts +0 -2
  554. package/src/FilteredSearch.tsx +0 -28
  555. package/src/Flash.tsx +0 -77
  556. package/src/Flex.tsx +0 -15
  557. package/src/FormGroup.tsx +0 -27
  558. package/src/Grid.tsx +0 -15
  559. package/src/Header.tsx +0 -84
  560. package/src/Heading.tsx +0 -21
  561. package/src/Label.tsx +0 -75
  562. package/src/LabelGroup.tsx +0 -18
  563. package/src/Link.tsx +0 -46
  564. package/src/Overlay.tsx +0 -197
  565. package/src/Pagehead.tsx +0 -17
  566. package/src/Pagination/Pagination.tsx +0 -214
  567. package/src/Pagination/index.ts +0 -4
  568. package/src/Pagination/model.tsx +0 -187
  569. package/src/PointerBox.tsx +0 -31
  570. package/src/Popover.tsx +0 -236
  571. package/src/Portal/Portal.tsx +0 -96
  572. package/src/Portal/index.ts +0 -5
  573. package/src/Position.tsx +0 -63
  574. package/src/ProgressBar.tsx +0 -52
  575. package/src/SelectMenu/SelectMenu.tsx +0 -125
  576. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  577. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  578. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  579. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  580. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  581. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  582. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  583. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  584. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  585. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  586. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  587. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  588. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  589. package/src/SelectMenu/index.ts +0 -15
  590. package/src/SelectPanel/SelectPanel.tsx +0 -173
  591. package/src/SelectPanel/index.ts +0 -2
  592. package/src/SideNav.tsx +0 -193
  593. package/src/Spinner.tsx +0 -59
  594. package/src/StateLabel.tsx +0 -102
  595. package/src/StyledOcticon.tsx +0 -24
  596. package/src/SubNav.tsx +0 -129
  597. package/src/TabNav.tsx +0 -77
  598. package/src/Text.tsx +0 -13
  599. package/src/TextInput.tsx +0 -68
  600. package/src/TextInputWithTokens.tsx +0 -271
  601. package/src/ThemeProvider.tsx +0 -176
  602. package/src/Timeline.tsx +0 -141
  603. package/src/Token/AvatarToken.tsx +0 -54
  604. package/src/Token/IssueLabelToken.tsx +0 -150
  605. package/src/Token/Token.tsx +0 -112
  606. package/src/Token/TokenBase.tsx +0 -134
  607. package/src/Token/_RemoveTokenButton.tsx +0 -98
  608. package/src/Token/_TokenTextContainer.tsx +0 -47
  609. package/src/Token/index.ts +0 -3
  610. package/src/Tooltip.tsx +0 -263
  611. package/src/Truncate.tsx +0 -36
  612. package/src/UnderlineNav.tsx +0 -110
  613. package/src/_TextInputWrapper.tsx +0 -105
  614. package/src/_UnstyledTextInput.tsx +0 -19
  615. package/src/__tests__/.eslintrc.json +0 -11
  616. package/src/__tests__/ActionList.test.tsx +0 -53
  617. package/src/__tests__/ActionList.types.test.tsx +0 -51
  618. package/src/__tests__/ActionMenu.test.tsx +0 -136
  619. package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
  620. package/src/__tests__/Autocomplete.test.tsx +0 -444
  621. package/src/__tests__/Avatar.test.tsx +0 -44
  622. package/src/__tests__/AvatarStack.test.tsx +0 -48
  623. package/src/__tests__/BorderBox.test.tsx +0 -43
  624. package/src/__tests__/Box.test.tsx +0 -42
  625. package/src/__tests__/BranchName.test.tsx +0 -26
  626. package/src/__tests__/Breadcrumbs.test.tsx +0 -27
  627. package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
  628. package/src/__tests__/Button.test.tsx +0 -128
  629. package/src/__tests__/Caret.test.tsx +0 -36
  630. package/src/__tests__/CircleBadge.test.tsx +0 -66
  631. package/src/__tests__/CircleOcticon.test.tsx +0 -50
  632. package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
  633. package/src/__tests__/CounterLabel.test.tsx +0 -50
  634. package/src/__tests__/Details.test.tsx +0 -115
  635. package/src/__tests__/Dialog.test.tsx +0 -155
  636. package/src/__tests__/Dropdown.test.tsx +0 -53
  637. package/src/__tests__/DropdownMenu.test.tsx +0 -136
  638. package/src/__tests__/FilterList.test.tsx +0 -26
  639. package/src/__tests__/FilterListItem.test.tsx +0 -31
  640. package/src/__tests__/FilteredSearch.test.tsx +0 -26
  641. package/src/__tests__/Flash.test.tsx +0 -45
  642. package/src/__tests__/Flex.test.tsx +0 -58
  643. package/src/__tests__/FormGroup.test.tsx +0 -38
  644. package/src/__tests__/Grid.test.tsx +0 -82
  645. package/src/__tests__/Header.test.tsx +0 -49
  646. package/src/__tests__/Heading.test.tsx +0 -91
  647. package/src/__tests__/Label.test.tsx +0 -34
  648. package/src/__tests__/LabelGroup.test.tsx +0 -30
  649. package/src/__tests__/Link.test.tsx +0 -47
  650. package/src/__tests__/Merge.types.test.ts +0 -39
  651. package/src/__tests__/Overlay.test.tsx +0 -103
  652. package/src/__tests__/Pagehead.test.tsx +0 -23
  653. package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
  654. package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
  655. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
  656. package/src/__tests__/PointerBox.test.tsx +0 -34
  657. package/src/__tests__/Popover.test.tsx +0 -68
  658. package/src/__tests__/Portal.test.tsx +0 -103
  659. package/src/__tests__/Position.test.tsx +0 -117
  660. package/src/__tests__/ProgressBar.test.tsx +0 -40
  661. package/src/__tests__/SelectMenu.test.tsx +0 -142
  662. package/src/__tests__/SelectPanel.test.tsx +0 -63
  663. package/src/__tests__/SideNav.test.tsx +0 -62
  664. package/src/__tests__/Spinner.test.tsx +0 -42
  665. package/src/__tests__/StateLabel.test.tsx +0 -48
  666. package/src/__tests__/StyledOcticon.test.tsx +0 -26
  667. package/src/__tests__/SubNav.test.tsx +0 -50
  668. package/src/__tests__/SubNavLink.test.tsx +0 -31
  669. package/src/__tests__/TabNav.test.tsx +0 -32
  670. package/src/__tests__/Text.test.tsx +0 -78
  671. package/src/__tests__/TextInput.test.tsx +0 -49
  672. package/src/__tests__/TextInputWithTokens.test.tsx +0 -262
  673. package/src/__tests__/ThemeProvider.test.tsx +0 -441
  674. package/src/__tests__/Timeline.test.tsx +0 -58
  675. package/src/__tests__/Token.test.tsx +0 -118
  676. package/src/__tests__/Tooltip.test.tsx +0 -52
  677. package/src/__tests__/Truncate.test.tsx +0 -43
  678. package/src/__tests__/UnderlineNav.test.tsx +0 -58
  679. package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
  680. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
  681. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
  682. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -332
  683. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3414
  684. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
  685. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
  686. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
  687. package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
  688. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
  689. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
  690. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
  691. package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -832
  692. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
  693. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -141
  694. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -64
  695. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
  696. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
  697. package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
  698. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -200
  699. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
  700. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -106
  701. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
  702. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
  703. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
  704. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
  705. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
  706. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
  707. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
  708. package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
  709. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
  710. package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -74
  711. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
  712. package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -213
  713. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
  714. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
  715. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
  716. package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
  717. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
  718. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -469
  719. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -123
  720. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
  721. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
  722. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -388
  723. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -25
  724. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
  725. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
  726. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
  727. package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
  728. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -440
  729. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -5308
  730. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
  731. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
  732. package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3787
  733. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
  734. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
  735. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
  736. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
  737. package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
  738. package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
  739. package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
  740. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
  741. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
  742. package/src/__tests__/filterObject.test.ts +0 -54
  743. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
  744. package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
  745. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
  746. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
  747. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
  748. package/src/__tests__/theme.test.ts +0 -41
  749. package/src/__tests__/themeGet.test.ts +0 -15
  750. package/src/__tests__/useSafeTimeout.test.tsx +0 -36
  751. package/src/behaviors/anchoredPosition.ts +0 -442
  752. package/src/behaviors/focusTrap.ts +0 -184
  753. package/src/behaviors/focusZone.ts +0 -713
  754. package/src/behaviors/scrollIntoViewingArea.ts +0 -27
  755. package/src/constants.ts +0 -62
  756. package/src/hooks/index.ts +0 -11
  757. package/src/hooks/useAnchoredPosition.ts +0 -53
  758. package/src/hooks/useCombinedRefs.ts +0 -40
  759. package/src/hooks/useDetails.tsx +0 -54
  760. package/src/hooks/useDialog.ts +0 -121
  761. package/src/hooks/useFocusTrap.ts +0 -80
  762. package/src/hooks/useFocusZone.ts +0 -64
  763. package/src/hooks/useOnEscapePress.ts +0 -63
  764. package/src/hooks/useOnOutsideClick.tsx +0 -82
  765. package/src/hooks/useOpenAndCloseFocus.ts +0 -32
  766. package/src/hooks/useOverlay.tsx +0 -34
  767. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  768. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  769. package/src/hooks/useRenderForcingRef.ts +0 -22
  770. package/src/hooks/useResizeObserver.ts +0 -11
  771. package/src/hooks/useSafeTimeout.ts +0 -38
  772. package/src/hooks/useScrollFlash.ts +0 -21
  773. package/src/index.ts +0 -170
  774. package/src/polyfills/eventListenerSignal.ts +0 -66
  775. package/src/stories/ActionList.stories.tsx +0 -437
  776. package/src/stories/ActionMenu.stories.tsx +0 -322
  777. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  778. package/src/stories/Autocomplete.stories.tsx +0 -572
  779. package/src/stories/AvatarStack.stories.tsx +0 -37
  780. package/src/stories/Button.stories.tsx +0 -88
  781. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  782. package/src/stories/Dialog.stories.tsx +0 -240
  783. package/src/stories/DropdownMenu.stories.tsx +0 -84
  784. package/src/stories/IssueLabelToken.stories.tsx +0 -138
  785. package/src/stories/Overlay.stories.tsx +0 -213
  786. package/src/stories/Portal.stories.tsx +0 -109
  787. package/src/stories/ProfileToken.stories.tsx +0 -129
  788. package/src/stories/SelectPanel.stories.tsx +0 -353
  789. package/src/stories/TextInputWithTokens.stories.tsx +0 -146
  790. package/src/stories/ThemeProvider.stories.tsx +0 -104
  791. package/src/stories/Token.stories.tsx +0 -126
  792. package/src/stories/useAnchoredPosition.stories.tsx +0 -320
  793. package/src/stories/useFocusTrap.stories.tsx +0 -400
  794. package/src/stories/useFocusZone.stories.tsx +0 -663
  795. package/src/sx.ts +0 -9
  796. package/src/theme-preval.js +0 -79
  797. package/src/theme.ts +0 -3
  798. package/src/utils/deprecate.tsx +0 -73
  799. package/src/utils/isNumeric.tsx +0 -4
  800. package/src/utils/iterateFocusableElements.ts +0 -121
  801. package/src/utils/ssr.tsx +0 -1
  802. package/src/utils/test-deprecations.tsx +0 -19
  803. package/src/utils/test-helpers.tsx +0 -7
  804. package/src/utils/test-matchers.tsx +0 -109
  805. package/src/utils/testing.tsx +0 -242
  806. package/src/utils/theme.js +0 -64
  807. package/src/utils/types/AriaRole.ts +0 -71
  808. package/src/utils/types/ComponentProps.ts +0 -13
  809. package/src/utils/types/Flatten.ts +0 -4
  810. package/src/utils/types/MandateProps.ts +0 -19
  811. package/src/utils/types/Merge.ts +0 -20
  812. package/src/utils/types/index.ts +0 -5
  813. package/src/utils/uniqueId.ts +0 -6
  814. package/src/utils/userAgent.ts +0 -7
  815. package/stats.html +0 -3279
  816. package/tsconfig.build.json +0 -7
  817. package/tsconfig.json +0 -20
@@ -1,316 +0,0 @@
1
- # React Component APIs: Contents as data vs. Contents as children
2
-
3
- Consider a React component that renders a list of items. Here are two possible APIs that component might expose, both achieving an equivalent result.
4
-
5
- ### A: Contents passed as React children
6
-
7
- ```jsx
8
- <List>
9
- <List.Item>New file</List.Item>
10
- <List.Divider />
11
- <List.Item>Copy link</List.Item>
12
- <List.Item>Edit file</List.Item>
13
- <List.Item variant="danger">Delete file</List.Item>
14
- </List>
15
- ```
16
-
17
- ### B: Contents passed as data
18
-
19
- ```jsx
20
- <List
21
- items={[
22
- { text: "New file" },
23
- ActionList.Divider,
24
- { text: "Copy link" },
25
- { text: "Edit file" },
26
- { text: "Delete file", variant: "danger" },
27
- ]}
28
- />
29
- ```
30
-
31
- Is one API better than the other generally? What about in this context (a "List" component)? Are there situations where it is better to choose one over the other? Let's try to answer these questions.
32
-
33
- ## Both APIs have valid use cases
34
-
35
- This section simply argues that both of the patterns above are valid. Once we do this, we can attempt to define the criteria that helps the API designer choose one over the other.
36
-
37
- ### Contents passed as React children
38
-
39
- This is the most common way to define the structure of content in React. In fact, all HTML elements work this way:
40
-
41
- ```jsx
42
- <div>
43
- <div>Some content</div>
44
- <div>More content</div>
45
- </div>
46
- ```
47
-
48
- ```jsx
49
- <ul>
50
- <li>Item 1</li>
51
- <li>Item 2</li>
52
- </ul>
53
- ```
54
-
55
- ```jsx
56
- <select>
57
- <option value="1">First option</option>
58
- <option value="1">Second option</option>
59
- </select>
60
- ```
61
-
62
- Though less common, sometimes the HTML schema puts tight restrictions on the kinds of children an element may contain:
63
-
64
- - `<select>` elements may only contain `<option>` and `<optgroup>` children.
65
- - `<ul>` may only contain `<li>` children.
66
- - `<span>` elements may only contain [phrasing content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2).
67
-
68
- Furthermore, for custom React components, there is a first-class approach for rendering your component's children:
69
-
70
- ```jsx
71
- function MyFancyBox({ children }) {
72
- return <div style="border: 4px double cornflowerblue;">{children}</div>;
73
- }
74
-
75
- // usage
76
- <MyFancyBox>I have a blue border!</MyFancyBox>;
77
- ```
78
-
79
- I call this "first class" because the JSX children that are defined between your component's opening and closing tags are wrapped up into a special prop called `children`. It is the component's responsibility to render those children in the appropriate spot.
80
-
81
- **Clearly, this is a valid approach for a component API.**
82
-
83
- ### Contents passed as data
84
-
85
- An alternative approach is to accept data in the form of a prop, which eventually gets turned into a React element by the component's implementation. In plain HTML, this is far less common. One example is the `title` attribute, which results in a tooltip:
86
-
87
- ```html
88
- <button title="Save">💾</button>
89
- ```
90
-
91
- One _could_ imagine a parallel universe where a tooltip is achieved by some other means!
92
-
93
- ```html
94
- <button>
95
- <title>Save</title>
96
- 💾
97
- </button>
98
- ```
99
-
100
- In custom React components, this pattern can be more common. In this example, the text to render is passed as a prop, as data rather than as pre-created React elements (i.e. JSX):
101
-
102
- ```jsx
103
- function WordWrap({ text, charactersPerLine }) {
104
- const lines = [];
105
- for (
106
- let low = 0;
107
- low + charactersPerLine < text.length;
108
- low += charactersPerLine
109
- ) {
110
- lines.push(text.substr(low, charactersPerLine));
111
- }
112
- const remaining = text.length % charactersPerLine;
113
- if (remaining !== 0) {
114
- lines.push(text.substr(text.length - remaining));
115
- }
116
- return (
117
- <>
118
- {lines.map((l, index) => (
119
- <div key={index + l}>{l}</div>
120
- ))}
121
- </>
122
- );
123
- }
124
-
125
- // usage
126
- <WordWrap
127
- text="the quick brown fox jumps over the lazy dog"
128
- charactersPerLine={5}
129
- />;
130
- ```
131
-
132
- For further customization, one could imagine an optional `renderLine` prop that is used to give consumers control over the way a single line is rendered (see the section "Customization of content passed as data" below).
133
-
134
- ## Can't we just stick to one of the two patterns?
135
-
136
- As shown above, both patterns can be valid approaches based on the component. But _why_ did we choose the data API for `WordWrap`, and _why_ did we choose the React children API for `MyFancyBox`?
137
-
138
- ### Let's try swapping
139
-
140
- Since both patterns are equally powerful, we should be able to write equivalent components using the alternate approach.
141
-
142
- #### MyFancyBox
143
-
144
- Let's start with `MyFancyBox`:
145
-
146
- ```jsx
147
- function MyFancyBox({ contents }) {
148
- const boxChildren = [];
149
- if (typeof contents === "string" || React.isValidElement(contents)) {
150
- boxChildren.push(contents);
151
- } else if (typeof contents === "function") {
152
- boxChildren.push(contents());
153
- } // implementation abbreviated for clarity
154
- return <div style="border: 4px double cornflowerblue;">{boxChildren}</div>;
155
- }
156
-
157
- // usage
158
- <MyFancyBox contents="I have a blue border!" />;
159
- ```
160
-
161
- This example is so esoteric that I think it's obvious which is superior. The original has a less-complex implementation and a clearer API (in the second, just looking at the usage example, there is no way to know that contents can also accept a React element or a function callback).
162
-
163
- #### WordWrap
164
-
165
- Now let's dive into `WordWrap`, implemented with a React children-based API:
166
-
167
- ```jsx
168
- function WordWrap({ children, charactersPerLine }) {
169
- const items = React.Children.toArray(children);
170
- let textContent = "";
171
- for (const child of items) {
172
- if (typeof child === "string") {
173
- textContent += child;
174
- }
175
- }
176
- const lines = [];
177
- for (
178
- let low = 0;
179
- low + charactersPerLine < textContent.length;
180
- low += charactersPerLine
181
- ) {
182
- lines.push(textContent.substr(low, charactersPerLine));
183
- }
184
- const remaining = textContent.length % charactersPerLine;
185
- if (remaining !== 0) {
186
- lines.push(textContent.substr(textContent.length - remaining));
187
- }
188
- return (
189
- <>
190
- {lines.map((l, index) => (
191
- <div key={index + l}>{l}</div>
192
- ))}
193
- </>
194
- );
195
- }
196
-
197
- // usage
198
- <WordWrap charactersPerLine={5}>
199
- the quick brown fox jumps over the lazy dog
200
- </WordWrap>;
201
- ```
202
-
203
- Let's get the obvious out of the way: the component implementation is more complex. Instead of receiving the raw text as a prop, the component has to iterate through its children, figure out which ones are text nodes, and build up the string.
204
-
205
- But sometimes we are willing to make the sacrifice of increasing the complexity of our components if they become easier to use for our consumers. Is that what is happening here? One could argue that our new API is more straightforward and more readable! It's clear that the child text node of `WordWrap` will serve as the eventually-rendered contents, whereas the prop passed (`charactersPerLine`) is more of a configuration of the behavior.
206
-
207
- On the other hand, if you are consuming this `WordWrap`, you might be left more confused. It is not clear without reading the code what is allowed as a child node. Can I include links or styled elements? How does it respond to receiving component children? In fact, if we want to the [principle of least surprise](https://en.wikipedia.org/wiki/Principle_of_least_astonishment), it may be necessary to support links or bolded text. While possible, this greatly increases the complexity of the component. Even if we do support this, it might be hard to discover this feature unless the user reads the docs or source code.
208
-
209
- The first `WordWrap` implementation comparatively has a very strict API, easily discovered (with strong typing), and there is no possible way to use it which would produce a surprising result.
210
-
211
- Because of the trade-offs described, I postulate that the first implementation of `WordWrap` is superior.
212
-
213
- ### The hybrid approach
214
-
215
- It is possible to build a component API that supports both patterns. In other words, the consumer can pass data as a prop, which gets rendered into React elements, while also accepting those children being passed in directly.
216
-
217
- We do not recommend this approach. The resulting behavior can be very hard to predict. How do the elements generated from data interact with the passed-in children? How are they ordered? Furthermore, the approach likely does not improve the developer experience.
218
-
219
- ## The ownership of React elements
220
-
221
- I shall make the following claim:
222
-
223
- > The owner of a React element is the component that _originally_ added it to the component tree.
224
-
225
- For example, take the following two implementations of a simple (contrived) List component:
226
-
227
- ```jsx
228
- function List({ children, ordered }) {
229
- const Elem = ordered ? "ol" : "ul";
230
- return <Elem>{children}</Elem>;
231
- }
232
- function Item({ children }) {
233
- return <li>{children}</li>;
234
- }
235
-
236
- // usage
237
- function MyApp() {
238
- return (
239
- <List ordered={true}>
240
- <Item>Apple</Item>
241
- <Item>Banana</Item>
242
- <Item>Cantaloupe</Item>
243
- </List>
244
- );
245
- }
246
- ```
247
-
248
- ```jsx
249
- function List({ items, ordered }) {
250
- const Elem = ordered ? "ol" : "ul";
251
- const listItems = items.map((i) => <li key={i}>i</li>);
252
- return <Elem>{listItems}</Elem>;
253
- }
254
-
255
- // usage
256
- function MyApp() {
257
- return <List ordered={true} items={["Apple", "Banana", "Cantaloupe"]} />;
258
- }
259
- ```
260
-
261
- In the first example, `MyApp` "owns" the `List` and its 3 `Item`s. In the second example, `MyApp` only "owns" `List`, while the `List` owns the `Item`s it renders.
262
-
263
- Why do I bring this up? If you assume that the _owner_ of an element has the _highest authority_ to configure that element (i.e. change the element type, its props, and its children), then any component API should strive to be designed to respect this assumption.
264
-
265
- I believe this is a reasonable assumption: an element owner should be able to expect that the element will be rendered as close to the definition as possible. Otherwise, this violates the principle of least surprise.
266
-
267
- ### The `React.Children` anti-pattern
268
- Based on the above assumption, using `React.Children` can be an anti-pattern. `React.Children` allows a component to reach into elements that it does not own. In our `WordWrap` example that uses React children, it is clear that we do not respect the owner (as defined above) of these elements. We iterate through children, ignoring anything that is not a text node.
269
-
270
- With this reasoning, it's also easy to argue that `React.cloneElement` should be an anti-pattern. While that is true, there are ways to use `React.cloneElement` to simply augment children without altering their primary purpose or function. Adding additional props is a common use.
271
-
272
- While anti-patterns sometimes have their valid uses, those uses should be individually scrutinized and avoided where possible.
273
-
274
- ## Customization of content passed as data
275
-
276
- One significant benefit to the contents as children pattern is the fact that it lends itself very naturally to customization. Since the parent owns the children, it can create whatever children it likes, deciding their props and element types. This level of customization can be achieved using the contents as data pattern too, but it's not quite as straightforward (for the component author or the component consumer).
277
-
278
- One common practice is for a component to accept a "render prop." The render prop is a function that returns JSX (the same as a function component). That function should be passed any data that may be needed for rendering. Of course, components should ship with a default renderer and not rely on being passed a render prop.
279
-
280
- ## How to decide
281
-
282
- At this point we have shown that both patterns are valid, so how do we know which to use? Here is a comparison of the two approaches:
283
-
284
- ### Advantages of data contract
285
-
286
- - Strongly typed
287
- - All use cases are clearly defined
288
- - Easy to manipulate data
289
- - Easy to define a "pit of success" and lead the user there
290
- - Can support "escape hatches"
291
- - Component retains ownership of rendered contents
292
- - Usually less code in the implementation
293
-
294
- ### Advantages of children-based contract
295
-
296
- - Indicates flexibility
297
- - Leaves room for a flexible implementation
298
- - Recognizable from HTML
299
- - Easier to read
300
- - Ownership of contents remains with a parent or ancestor component
301
-
302
- Based on these observations, here are some guidelines to decide which type of API to build:
303
-
304
- ### When to use a data contract
305
- - Data doesn't cleanly transfer to an element structure
306
- - Data needs to be manipulated before being converted to an element structure
307
- - Certain well-defined scenarios need to be supported
308
- - You want to control the types and structure of child elements
309
- - The default rendering of the component is useful in many cases
310
- - You are building a composite component
311
-
312
- ### When to use a children-based contract
313
- - Your component doesn't care about the structure of children
314
- - Your component doesn't need to use `React.Children`
315
- - Your component is flexible enough to accommodate almost any child structure
316
- - You are building an intermediate component that provides behaviors or styles to a container
@@ -1,39 +0,0 @@
1
- # Principles
2
-
3
- ### Communication
4
-
5
- Design systems provide a vocabulary between design and engineering, the language we use should be correct but not at the expense of providing clarity. Use words and descriptions that both designers and engineers can understand.
6
-
7
- * Be a bridge not a barrier. Use vocabulary that provides meaning to both designers and engineers.
8
- * Choose language that provides mutual understanding between engineering and design over specificity.
9
- * Support new vocabulary with descriptions and examples.
10
- * Be consistent in the application of vocabulary in written and verbal communication to reinforce understandings.
11
- * Articulate what you are aiming to achieve as well as what you are not doing.
12
-
13
- ### Judgment
14
-
15
- There's often more than one way to do things, and there aren't always best-practice examples to follow. Despite this we still need to make decisions and keep moving forward. To deal with an uncertain future and still move forward we should have _strong opinions, weakly held_.
16
-
17
- * Make decisions that move us forward rather than halting progress due to ambiguity or difference of opinion.
18
- * Make decisions based on long term goals rather than this week's ship.
19
- * Evaluate technology by the risk they present, not just the solution they offer. High risk deserves careful consideration, low risk deserves less attention.
20
- * Have opinions and arguments for them, but remain open to seeing and hearing evidence that clashes with them when those opinions become wrong.
21
- * Prioritize solutions for people who use the system and how it serves the customers who use products built with the system.
22
- * Seek feedback on code review often, and more often when a solution takes you down a new path.
23
- * Take time to provide good code review, encompassing the above values when providing feedback.
24
-
25
- ### Innovation
26
-
27
- * Treat everything as an experiment. Make small incremental steps that provide proof towards goals, or disprove them.
28
- * Ship often. We learn more from tangible outcomes than something that only lives as an idea.
29
- * Work on reducing complexity and simplifying solutions to enable us to innovate faster.
30
-
31
- ### Implementation
32
-
33
- * Engineer just enough of a solution, value declarative over abstraction.
34
- * A little verbosity is better than clever code. Avoid implementations that reduce the ability for people to contribute.
35
- * Automate and abstract when repetition is a hindrance.
36
- * Seek feedback on implementations as often as possible.
37
- * Everything is a component.
38
- * Provide flexibility, but within the boundaries of the system.
39
- * Assume that people will break the rules, and provide safe ways for them to do so.
package/docs/.eslintrc DELETED
File without changes
package/docs/.gitignore DELETED
@@ -1,91 +0,0 @@
1
- # Logs
2
- logs
3
- *.log
4
- npm-debug.log*
5
- yarn-debug.log*
6
- yarn-error.log*
7
- lerna-debug.log*
8
-
9
- # Diagnostic reports (https://nodejs.org/api/report.html)
10
- report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11
-
12
- # Runtime data
13
- pids
14
- *.pid
15
- *.seed
16
- *.pid.lock
17
-
18
- # Directory for instrumented libs generated by jscoverage/JSCover
19
- lib-cov
20
-
21
- # Coverage directory used by tools like istanbul
22
- coverage
23
- *.lcov
24
-
25
- # nyc test coverage
26
- .nyc_output
27
-
28
- # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29
- .grunt
30
-
31
- # Bower dependency directory (https://bower.io/)
32
- bower_components
33
-
34
- # node-waf configuration
35
- .lock-wscript
36
-
37
- # Compiled binary addons (https://nodejs.org/api/addons.html)
38
- build/Release
39
-
40
- # Dependency directories
41
- node_modules/
42
- jspm_packages/
43
-
44
- # TypeScript v1 declaration files
45
- typings/
46
-
47
- # TypeScript cache
48
- *.tsbuildinfo
49
-
50
- # Optional npm cache directory
51
- .npm
52
-
53
- # Optional eslint cache
54
- .eslintcache
55
-
56
- # Optional REPL history
57
- .node_repl_history
58
-
59
- # Output of 'npm pack'
60
- *.tgz
61
-
62
- # Yarn Integrity file
63
- .yarn-integrity
64
-
65
- # dotenv environment variables file
66
- .env
67
- .env.test
68
-
69
- # parcel-bundler cache (https://parceljs.org/)
70
- .cache
71
-
72
- # next.js build output
73
- .next
74
-
75
- # nuxt.js build output
76
- .nuxt
77
-
78
- # vuepress build output
79
- .vuepress/dist
80
-
81
- # Serverless directories
82
- .serverless/
83
-
84
- # FuseBox cache
85
- .fusebox/
86
-
87
- # DynamoDB Local files
88
- .dynamodb/
89
-
90
- # Gatsby
91
- public/
@@ -1,5 +0,0 @@
1
- import React from 'react'
2
-
3
- const PropsList = ({systemProps}) => <div>{systemProps.propNames.join(', ')}</div>
4
-
5
- export default PropsList
@@ -1,9 +0,0 @@
1
- import React from 'react'
2
-
3
- const State = props => {
4
- const result = React.useState(props.default)
5
-
6
- return props.children(result)
7
- }
8
-
9
- export default State
@@ -1,34 +0,0 @@
1
- import {theme} from '@primer/components'
2
- import systemPropTypes from '@styled-system/prop-types'
3
- import themeGet from '@styled-system/theme-get'
4
- import * as styledSystem from 'styled-system'
5
-
6
- const {get: getKey, compose, system} = styledSystem
7
-
8
- export const get = key => themeGet(key, getKey(theme, key))
9
-
10
- const whiteSpace = system({
11
- whiteSpace: {
12
- property: 'whiteSpace',
13
- cssProperty: 'whiteSpace'
14
- }
15
- })
16
-
17
- export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace)
18
-
19
- export const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display)
20
-
21
- export const BORDER = compose(styledSystem.border, styledSystem.shadow)
22
-
23
- // these are 1:1 with styled-system's API now,
24
- // so you could consider dropping the abstraction
25
- export const LAYOUT = styledSystem.layout
26
- export const POSITION = styledSystem.position
27
- export const FLEX = styledSystem.flexbox
28
- export const GRID = styledSystem.grid
29
-
30
- TYPOGRAPHY.propTypes = systemPropTypes.typography
31
- LAYOUT.propTypes = systemPropTypes.layout
32
- POSITION.propTypes = systemPropTypes.position
33
- FLEX.propTypes = systemPropTypes.flexbox
34
- GRID.propTypes = systemPropTypes.grid
@@ -1,2 +0,0 @@
1
- export {default as PropsList} from './PropsList'
2
- export {COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} from './constants'
@@ -1,99 +0,0 @@
1
- ---
2
- title: ActionList
3
- status: Alpha
4
- source: https://github.com/primer/react/tree/main/src/ActionList
5
- ---
6
-
7
- An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`.
8
-
9
- ## Minimal example
10
-
11
- ```jsx live
12
- <ActionList
13
- items={[
14
- {text: 'New file'},
15
- ActionList.Divider,
16
- {text: 'Copy link'},
17
- {text: 'Edit file'},
18
- {text: 'Delete file', variant: 'danger'}
19
- ]}
20
- />
21
- ```
22
-
23
- ## Example with grouped items
24
-
25
- ```jsx live
26
- <ActionList
27
- groupMetadata={[
28
- {groupId: '0'},
29
- {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
30
- {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
31
- {groupId: '3'},
32
- {groupId: '4'}
33
- ]}
34
- items={[
35
- {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
36
- {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
37
- {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
38
- {
39
- key: '4',
40
- leadingVisual: NoteIcon,
41
- text: 'Table',
42
- description: 'Information-dense table optimized for operations across teams',
43
- descriptionVariant: 'block',
44
- groupId: '2'
45
- },
46
- {
47
- key: '5',
48
- leadingVisual: ProjectIcon,
49
- text: 'Board',
50
- description: 'Kanban-style board focused on visual states',
51
- descriptionVariant: 'block',
52
- groupId: '2'
53
- },
54
- {
55
- key: '6',
56
- leadingVisual: FilterIcon,
57
- text: 'Save sort and filters to current view',
58
- disabled: true,
59
- groupId: '3'
60
- },
61
- {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
62
- {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
63
- ]}
64
- />
65
- ```
66
-
67
- ## Example with custom item renderer
68
-
69
- ```jsx
70
- <ActionList
71
- items={[
72
- {
73
- text: 'Vanilla link',
74
- renderItem: props => <ActionList.Item as="a" href="/about" {...props} />
75
- },
76
- {
77
- text: 'React Router link',
78
- renderItem: props => <ActionList.Item as={ReactRouterLikeLink} to="/about" {...props} />
79
- },
80
- {
81
- text: 'NextJS style',
82
- renderItem: props => (
83
- <NextJSLikeLink href="/about">
84
- <ActionList.Item as="a" {...props} />
85
- </NextJSLikeLink>
86
- )
87
- }
88
- ]}
89
- />
90
- ```
91
-
92
- ## Props
93
-
94
- | Name | Type | Default | Description |
95
- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
96
- | items | `(ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>) \| ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. |
97
- | renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. |
98
- | groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. |
99
- | showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` |