@primer/components 31.0.2-rc.1e80de40 → 31.1.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 (811) hide show
  1. package/CHANGELOG.md +8 -2
  2. package/dist/browser.esm.js +11 -10
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +31 -30
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/TextInputWithTokens.d.ts +4 -0
  7. package/lib/TextInputWithTokens.js +86 -20
  8. package/lib/_TextInputWrapper.js +1 -1
  9. package/lib-esm/TextInputWithTokens.d.ts +4 -0
  10. package/lib-esm/TextInputWithTokens.js +85 -21
  11. package/lib-esm/_TextInputWrapper.js +1 -1
  12. package/package.json +1 -1
  13. package/.changeset/README.md +0 -8
  14. package/.changeset/config.json +0 -10
  15. package/.devcontainer/devcontainer.json +0 -8
  16. package/.eslintrc.json +0 -137
  17. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  18. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  19. package/.github/dependabot.yml +0 -18
  20. package/.github/pull_request_template.md +0 -18
  21. package/.github/workflows/check_for_changeset.yml +0 -25
  22. package/.github/workflows/ci.yml +0 -31
  23. package/.github/workflows/deploy_preview.yml +0 -47
  24. package/.github/workflows/deploy_production.yml +0 -70
  25. package/.github/workflows/release.yml +0 -35
  26. package/.github/workflows/release_canary.yml +0 -70
  27. package/.github/workflows/release_candidate.yml +0 -60
  28. package/.github/workflows/size.yml +0 -13
  29. package/.github/workflows/stale.yml +0 -26
  30. package/.gitignore +0 -10
  31. package/.npmrc +0 -4
  32. package/.nvmrc +0 -1
  33. package/.storybook/main.js +0 -11
  34. package/.storybook/preview.js +0 -113
  35. package/.vscode/launch.json +0 -21
  36. package/.vscode/settings.json +0 -13
  37. package/@types/@styled-system/index.d.ts +0 -0
  38. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  39. package/@types/@styled-system/props/index.d.ts +0 -1
  40. package/@types/jest-styled-components/index.d.ts +0 -1
  41. package/CODEOWNERS +0 -2
  42. package/babel-defines.js +0 -13
  43. package/babel.config.js +0 -39
  44. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  45. package/contributor-docs/CONTRIBUTING.md +0 -274
  46. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  47. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
  48. package/contributor-docs/adrs/adr-003-prop-norms.md +0 -72
  49. package/contributor-docs/behaviors.md +0 -132
  50. package/contributor-docs/component-contents-api-patterns.md +0 -316
  51. package/contributor-docs/principles.md +0 -39
  52. package/docs/.eslintrc +0 -0
  53. package/docs/.gitignore +0 -91
  54. package/docs/components/PropsList.js +0 -5
  55. package/docs/components/State.js +0 -9
  56. package/docs/components/constants.js +0 -34
  57. package/docs/components/index.js +0 -2
  58. package/docs/content/ActionList.mdx +0 -99
  59. package/docs/content/ActionMenu.mdx +0 -80
  60. package/docs/content/AnchoredOverlay.mdx +0 -37
  61. package/docs/content/Autocomplete.mdx +0 -657
  62. package/docs/content/Avatar.mdx +0 -33
  63. package/docs/content/AvatarStack.mdx +0 -37
  64. package/docs/content/BorderBox.md +0 -46
  65. package/docs/content/Box.md +0 -74
  66. package/docs/content/BranchName.md +0 -18
  67. package/docs/content/Breadcrumbs.md +0 -52
  68. package/docs/content/Buttons.md +0 -56
  69. package/docs/content/CircleBadge.md +0 -45
  70. package/docs/content/CircleOcticon.md +0 -18
  71. package/docs/content/CounterLabel.md +0 -32
  72. package/docs/content/Details.md +0 -105
  73. package/docs/content/Dialog.md +0 -108
  74. package/docs/content/Dialog2.mdx +0 -179
  75. package/docs/content/Dropdown.md +0 -72
  76. package/docs/content/DropdownMenu.mdx +0 -49
  77. package/docs/content/FilterList.md +0 -44
  78. package/docs/content/FilteredSearch.md +0 -39
  79. package/docs/content/Flash.md +0 -44
  80. package/docs/content/Flex.md +0 -58
  81. package/docs/content/FormGroup.md +0 -46
  82. package/docs/content/Grid.md +0 -59
  83. package/docs/content/Header.md +0 -79
  84. package/docs/content/Heading.md +0 -22
  85. package/docs/content/Label.md +0 -42
  86. package/docs/content/LabelGroup.md +0 -31
  87. package/docs/content/Link.md +0 -37
  88. package/docs/content/Overlay.mdx +0 -94
  89. package/docs/content/Pagehead.md +0 -27
  90. package/docs/content/Pagination.md +0 -187
  91. package/docs/content/PointerBox.md +0 -81
  92. package/docs/content/Popover.md +0 -137
  93. package/docs/content/Portal.mdx +0 -78
  94. package/docs/content/Position.md +0 -100
  95. package/docs/content/ProgressBar.mdx +0 -29
  96. package/docs/content/SelectMenu.md +0 -435
  97. package/docs/content/SelectPanel.mdx +0 -67
  98. package/docs/content/SideNav.md +0 -179
  99. package/docs/content/Spinner.mdx +0 -32
  100. package/docs/content/StateLabel.md +0 -35
  101. package/docs/content/StyledOcticon.md +0 -36
  102. package/docs/content/SubNav.md +0 -102
  103. package/docs/content/TabNav.md +0 -50
  104. package/docs/content/Text.md +0 -31
  105. package/docs/content/TextInput.md +0 -34
  106. package/docs/content/TextInputTokens.mdx +0 -89
  107. package/docs/content/TextInputWithTokens.mdx +0 -97
  108. package/docs/content/Timeline.md +0 -138
  109. package/docs/content/Token.mdx +0 -381
  110. package/docs/content/Tooltip.md +0 -41
  111. package/docs/content/Truncate.md +0 -64
  112. package/docs/content/UnderlineNav.md +0 -53
  113. package/docs/content/anchoredPosition.mdx +0 -163
  114. package/docs/content/core-concepts.md +0 -70
  115. package/docs/content/focusTrap.mdx +0 -103
  116. package/docs/content/focusZone.mdx +0 -145
  117. package/docs/content/getting-started.md +0 -138
  118. package/docs/content/index.md +0 -33
  119. package/docs/content/linting.md +0 -35
  120. package/docs/content/overriding-styles.mdx +0 -82
  121. package/docs/content/philosophy.md +0 -23
  122. package/docs/content/primer-theme.md +0 -89
  123. package/docs/content/ssr.mdx +0 -43
  124. package/docs/content/system-props.mdx +0 -37
  125. package/docs/content/theme-reference.md +0 -16
  126. package/docs/content/theming.md +0 -249
  127. package/docs/content/useOnEscapePress.mdx +0 -56
  128. package/docs/content/useOnOutsideClick.mdx +0 -57
  129. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  130. package/docs/content/useOverlay.mdx +0 -62
  131. package/docs/content/useSafeTimeout.mdx +0 -32
  132. package/docs/gatsby-config.js +0 -30
  133. package/docs/gatsby-node.js +0 -101
  134. package/docs/package-lock.json +0 -20756
  135. package/docs/package.json +0 -36
  136. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -23
  137. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
  138. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -56
  139. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -133
  140. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  141. package/docs/src/props.js +0 -77
  142. package/jest.config.js +0 -13
  143. package/lib/__tests__/ActionList.test.d.ts +0 -1
  144. package/lib/__tests__/ActionList.test.js +0 -69
  145. package/lib/__tests__/ActionList.types.test.d.ts +0 -6
  146. package/lib/__tests__/ActionList.types.test.js +0 -69
  147. package/lib/__tests__/ActionMenu.test.d.ts +0 -1
  148. package/lib/__tests__/ActionMenu.test.js +0 -151
  149. package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
  150. package/lib/__tests__/AnchoredOverlay.test.js +0 -160
  151. package/lib/__tests__/Autocomplete.test.d.ts +0 -1
  152. package/lib/__tests__/Autocomplete.test.js +0 -528
  153. package/lib/__tests__/Avatar.test.d.ts +0 -1
  154. package/lib/__tests__/Avatar.test.js +0 -67
  155. package/lib/__tests__/AvatarStack.test.d.ts +0 -1
  156. package/lib/__tests__/AvatarStack.test.js +0 -71
  157. package/lib/__tests__/BorderBox.test.d.ts +0 -1
  158. package/lib/__tests__/BorderBox.test.js +0 -58
  159. package/lib/__tests__/Box.test.d.ts +0 -1
  160. package/lib/__tests__/Box.test.js +0 -78
  161. package/lib/__tests__/BranchName.test.d.ts +0 -1
  162. package/lib/__tests__/BranchName.test.js +0 -36
  163. package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
  164. package/lib/__tests__/Breadcrumbs.test.js +0 -37
  165. package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  166. package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
  167. package/lib/__tests__/Button.test.d.ts +0 -1
  168. package/lib/__tests__/Button.test.js +0 -143
  169. package/lib/__tests__/Caret.test.d.ts +0 -1
  170. package/lib/__tests__/Caret.test.js +0 -52
  171. package/lib/__tests__/CircleBadge.test.d.ts +0 -1
  172. package/lib/__tests__/CircleBadge.test.js +0 -83
  173. package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
  174. package/lib/__tests__/CircleOcticon.test.js +0 -71
  175. package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
  176. package/lib/__tests__/ConfirmationDialog.test.js +0 -134
  177. package/lib/__tests__/CounterLabel.test.d.ts +0 -1
  178. package/lib/__tests__/CounterLabel.test.js +0 -58
  179. package/lib/__tests__/Details.test.d.ts +0 -1
  180. package/lib/__tests__/Details.test.js +0 -117
  181. package/lib/__tests__/Dialog.test.d.ts +0 -1
  182. package/lib/__tests__/Dialog.test.js +0 -184
  183. package/lib/__tests__/Dropdown.test.d.ts +0 -1
  184. package/lib/__tests__/Dropdown.test.js +0 -63
  185. package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
  186. package/lib/__tests__/DropdownMenu.test.js +0 -150
  187. package/lib/__tests__/FilterList.test.d.ts +0 -1
  188. package/lib/__tests__/FilterList.test.js +0 -36
  189. package/lib/__tests__/FilterListItem.test.d.ts +0 -1
  190. package/lib/__tests__/FilterListItem.test.js +0 -46
  191. package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
  192. package/lib/__tests__/FilteredSearch.test.js +0 -36
  193. package/lib/__tests__/Flash.test.d.ts +0 -1
  194. package/lib/__tests__/Flash.test.js +0 -62
  195. package/lib/__tests__/Flex.test.d.ts +0 -1
  196. package/lib/__tests__/Flex.test.js +0 -74
  197. package/lib/__tests__/FormGroup.test.d.ts +0 -1
  198. package/lib/__tests__/FormGroup.test.js +0 -54
  199. package/lib/__tests__/Grid.test.d.ts +0 -1
  200. package/lib/__tests__/Grid.test.js +0 -104
  201. package/lib/__tests__/Header.test.d.ts +0 -1
  202. package/lib/__tests__/Header.test.js +0 -58
  203. package/lib/__tests__/Heading.test.d.ts +0 -1
  204. package/lib/__tests__/Heading.test.js +0 -109
  205. package/lib/__tests__/Label.test.d.ts +0 -1
  206. package/lib/__tests__/Label.test.js +0 -46
  207. package/lib/__tests__/LabelGroup.test.d.ts +0 -1
  208. package/lib/__tests__/LabelGroup.test.js +0 -38
  209. package/lib/__tests__/Link.test.d.ts +0 -1
  210. package/lib/__tests__/Link.test.js +0 -70
  211. package/lib/__tests__/Merge.types.test.d.ts +0 -30
  212. package/lib/__tests__/Merge.types.test.js +0 -27
  213. package/lib/__tests__/Overlay.test.d.ts +0 -1
  214. package/lib/__tests__/Overlay.test.js +0 -145
  215. package/lib/__tests__/Pagehead.test.d.ts +0 -1
  216. package/lib/__tests__/Pagehead.test.js +0 -37
  217. package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
  218. package/lib/__tests__/Pagination/Pagination.test.js +0 -47
  219. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  220. package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
  221. package/lib/__tests__/PointerBox.test.d.ts +0 -1
  222. package/lib/__tests__/PointerBox.test.js +0 -46
  223. package/lib/__tests__/Popover.test.d.ts +0 -1
  224. package/lib/__tests__/Popover.test.js +0 -66
  225. package/lib/__tests__/Portal.test.d.ts +0 -1
  226. package/lib/__tests__/Portal.test.js +0 -124
  227. package/lib/__tests__/Position.test.d.ts +0 -1
  228. package/lib/__tests__/Position.test.js +0 -143
  229. package/lib/__tests__/ProgressBar.test.d.ts +0 -1
  230. package/lib/__tests__/ProgressBar.test.js +0 -68
  231. package/lib/__tests__/SelectMenu.test.d.ts +0 -1
  232. package/lib/__tests__/SelectMenu.test.js +0 -155
  233. package/lib/__tests__/SelectPanel.test.d.ts +0 -1
  234. package/lib/__tests__/SelectPanel.test.js +0 -80
  235. package/lib/__tests__/SideNav.test.d.ts +0 -1
  236. package/lib/__tests__/SideNav.test.js +0 -71
  237. package/lib/__tests__/Spinner.test.d.ts +0 -1
  238. package/lib/__tests__/Spinner.test.js +0 -53
  239. package/lib/__tests__/StateLabel.test.d.ts +0 -1
  240. package/lib/__tests__/StateLabel.test.js +0 -71
  241. package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
  242. package/lib/__tests__/StyledOcticon.test.js +0 -40
  243. package/lib/__tests__/SubNav.test.d.ts +0 -1
  244. package/lib/__tests__/SubNav.test.js +0 -62
  245. package/lib/__tests__/SubNavLink.test.d.ts +0 -1
  246. package/lib/__tests__/SubNavLink.test.js +0 -49
  247. package/lib/__tests__/TabNav.test.d.ts +0 -1
  248. package/lib/__tests__/TabNav.test.js +0 -49
  249. package/lib/__tests__/Text.test.d.ts +0 -1
  250. package/lib/__tests__/Text.test.js +0 -105
  251. package/lib/__tests__/TextInput.test.d.ts +0 -1
  252. package/lib/__tests__/TextInput.test.js +0 -78
  253. package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
  254. package/lib/__tests__/TextInputWithTokens.test.js +0 -389
  255. package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
  256. package/lib/__tests__/ThemeProvider.test.js +0 -444
  257. package/lib/__tests__/Timeline.test.d.ts +0 -1
  258. package/lib/__tests__/Timeline.test.js +0 -75
  259. package/lib/__tests__/Token.test.d.ts +0 -1
  260. package/lib/__tests__/Token.test.js +0 -180
  261. package/lib/__tests__/Tooltip.test.d.ts +0 -1
  262. package/lib/__tests__/Tooltip.test.js +0 -69
  263. package/lib/__tests__/Truncate.test.d.ts +0 -1
  264. package/lib/__tests__/Truncate.test.js +0 -63
  265. package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
  266. package/lib/__tests__/UnderlineNav.test.js +0 -72
  267. package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
  268. package/lib/__tests__/UnderlineNavLink.test.js +0 -51
  269. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  270. package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
  271. package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  272. package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
  273. package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
  274. package/lib/__tests__/behaviors/focusZone.test.js +0 -570
  275. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  276. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
  277. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  278. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
  279. package/lib/__tests__/filterObject.test.d.ts +0 -1
  280. package/lib/__tests__/filterObject.test.js +0 -30
  281. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  282. package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
  283. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  284. package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
  285. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  286. package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
  287. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  288. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
  289. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  290. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
  291. package/lib/__tests__/theme.test.d.ts +0 -1
  292. package/lib/__tests__/theme.test.js +0 -36
  293. package/lib/__tests__/themeGet.test.d.ts +0 -1
  294. package/lib/__tests__/themeGet.test.js +0 -25
  295. package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
  296. package/lib/__tests__/useSafeTimeout.test.js +0 -45
  297. package/lib/stories/ActionList.stories.js +0 -454
  298. package/lib/stories/ActionMenu.stories.js +0 -350
  299. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  300. package/lib/stories/Autocomplete.stories.js +0 -619
  301. package/lib/stories/AvatarStack.stories.js +0 -49
  302. package/lib/stories/Button.stories.js +0 -125
  303. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  304. package/lib/stories/Dialog.stories.js +0 -265
  305. package/lib/stories/DropdownMenu.stories.js +0 -122
  306. package/lib/stories/IssueLabelToken.stories.js +0 -165
  307. package/lib/stories/Overlay.stories.js +0 -204
  308. package/lib/stories/Portal.stories.js +0 -104
  309. package/lib/stories/ProfileToken.stories.js +0 -162
  310. package/lib/stories/SelectPanel.stories.js +0 -399
  311. package/lib/stories/TextInputWithTokens.stories.js +0 -235
  312. package/lib/stories/ThemeProvider.stories.js +0 -102
  313. package/lib/stories/Token.stories.js +0 -159
  314. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  315. package/lib/stories/useFocusTrap.stories.js +0 -356
  316. package/lib/stories/useFocusZone.stories.js +0 -599
  317. package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
  318. package/lib-esm/__tests__/ActionList.test.js +0 -57
  319. package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
  320. package/lib-esm/__tests__/ActionList.types.test.js +0 -45
  321. package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
  322. package/lib-esm/__tests__/ActionMenu.test.js +0 -139
  323. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
  324. package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -134
  325. package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
  326. package/lib-esm/__tests__/Autocomplete.test.js +0 -494
  327. package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
  328. package/lib-esm/__tests__/Avatar.test.js +0 -56
  329. package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
  330. package/lib-esm/__tests__/AvatarStack.test.js +0 -58
  331. package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
  332. package/lib-esm/__tests__/BorderBox.test.js +0 -47
  333. package/lib-esm/__tests__/Box.test.d.ts +0 -1
  334. package/lib-esm/__tests__/Box.test.js +0 -67
  335. package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
  336. package/lib-esm/__tests__/BranchName.test.js +0 -26
  337. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
  338. package/lib-esm/__tests__/Breadcrumbs.test.js +0 -27
  339. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
  340. package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
  341. package/lib-esm/__tests__/Button.test.d.ts +0 -1
  342. package/lib-esm/__tests__/Button.test.js +0 -133
  343. package/lib-esm/__tests__/Caret.test.d.ts +0 -1
  344. package/lib-esm/__tests__/Caret.test.js +0 -42
  345. package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
  346. package/lib-esm/__tests__/CircleBadge.test.js +0 -70
  347. package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
  348. package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
  349. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
  350. package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
  351. package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
  352. package/lib-esm/__tests__/CounterLabel.test.js +0 -47
  353. package/lib-esm/__tests__/Details.test.d.ts +0 -1
  354. package/lib-esm/__tests__/Details.test.js +0 -107
  355. package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
  356. package/lib-esm/__tests__/Dialog.test.js +0 -171
  357. package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
  358. package/lib-esm/__tests__/Dropdown.test.js +0 -53
  359. package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
  360. package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
  361. package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
  362. package/lib-esm/__tests__/FilterList.test.js +0 -26
  363. package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
  364. package/lib-esm/__tests__/FilterListItem.test.js +0 -36
  365. package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
  366. package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
  367. package/lib-esm/__tests__/Flash.test.d.ts +0 -1
  368. package/lib-esm/__tests__/Flash.test.js +0 -51
  369. package/lib-esm/__tests__/Flex.test.d.ts +0 -1
  370. package/lib-esm/__tests__/Flex.test.js +0 -64
  371. package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
  372. package/lib-esm/__tests__/FormGroup.test.js +0 -44
  373. package/lib-esm/__tests__/Grid.test.d.ts +0 -1
  374. package/lib-esm/__tests__/Grid.test.js +0 -94
  375. package/lib-esm/__tests__/Header.test.d.ts +0 -1
  376. package/lib-esm/__tests__/Header.test.js +0 -48
  377. package/lib-esm/__tests__/Heading.test.d.ts +0 -1
  378. package/lib-esm/__tests__/Heading.test.js +0 -99
  379. package/lib-esm/__tests__/Label.test.d.ts +0 -1
  380. package/lib-esm/__tests__/Label.test.js +0 -36
  381. package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
  382. package/lib-esm/__tests__/LabelGroup.test.js +0 -26
  383. package/lib-esm/__tests__/Link.test.d.ts +0 -1
  384. package/lib-esm/__tests__/Link.test.js +0 -60
  385. package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
  386. package/lib-esm/__tests__/Merge.types.test.js +0 -14
  387. package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
  388. package/lib-esm/__tests__/Overlay.test.js +0 -123
  389. package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
  390. package/lib-esm/__tests__/Pagehead.test.js +0 -26
  391. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
  392. package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
  393. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
  394. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
  395. package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
  396. package/lib-esm/__tests__/PointerBox.test.js +0 -36
  397. package/lib-esm/__tests__/Popover.test.d.ts +0 -1
  398. package/lib-esm/__tests__/Popover.test.js +0 -53
  399. package/lib-esm/__tests__/Portal.test.d.ts +0 -1
  400. package/lib-esm/__tests__/Portal.test.js +0 -104
  401. package/lib-esm/__tests__/Position.test.d.ts +0 -1
  402. package/lib-esm/__tests__/Position.test.js +0 -133
  403. package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
  404. package/lib-esm/__tests__/ProgressBar.test.js +0 -58
  405. package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
  406. package/lib-esm/__tests__/SelectMenu.test.js +0 -145
  407. package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
  408. package/lib-esm/__tests__/SelectPanel.test.js +0 -65
  409. package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
  410. package/lib-esm/__tests__/SideNav.test.js +0 -60
  411. package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
  412. package/lib-esm/__tests__/Spinner.test.js +0 -43
  413. package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
  414. package/lib-esm/__tests__/StateLabel.test.js +0 -61
  415. package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
  416. package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
  417. package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
  418. package/lib-esm/__tests__/SubNav.test.js +0 -50
  419. package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
  420. package/lib-esm/__tests__/SubNavLink.test.js +0 -39
  421. package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
  422. package/lib-esm/__tests__/TabNav.test.js +0 -39
  423. package/lib-esm/__tests__/Text.test.d.ts +0 -1
  424. package/lib-esm/__tests__/Text.test.js +0 -93
  425. package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
  426. package/lib-esm/__tests__/TextInput.test.js +0 -68
  427. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
  428. package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -341
  429. package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
  430. package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
  431. package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
  432. package/lib-esm/__tests__/Timeline.test.js +0 -65
  433. package/lib-esm/__tests__/Token.test.d.ts +0 -1
  434. package/lib-esm/__tests__/Token.test.js +0 -166
  435. package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
  436. package/lib-esm/__tests__/Tooltip.test.js +0 -59
  437. package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
  438. package/lib-esm/__tests__/Truncate.test.js +0 -53
  439. package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
  440. package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
  441. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
  442. package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
  443. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
  444. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
  445. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
  446. package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
  447. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
  448. package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
  449. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
  450. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
  451. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
  452. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
  453. package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
  454. package/lib-esm/__tests__/filterObject.test.js +0 -27
  455. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
  456. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
  457. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
  458. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
  459. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
  460. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
  461. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
  462. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
  463. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
  464. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
  465. package/lib-esm/__tests__/theme.test.d.ts +0 -1
  466. package/lib-esm/__tests__/theme.test.js +0 -33
  467. package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
  468. package/lib-esm/__tests__/themeGet.test.js +0 -22
  469. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
  470. package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
  471. package/lib-esm/stories/ActionList.stories.js +0 -395
  472. package/lib-esm/stories/ActionMenu.stories.js +0 -305
  473. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  474. package/lib-esm/stories/Autocomplete.stories.js +0 -560
  475. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  476. package/lib-esm/stories/Button.stories.js +0 -86
  477. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  478. package/lib-esm/stories/Dialog.stories.js +0 -240
  479. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  480. package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
  481. package/lib-esm/stories/Overlay.stories.js +0 -173
  482. package/lib-esm/stories/Portal.stories.js +0 -68
  483. package/lib-esm/stories/ProfileToken.stories.js +0 -136
  484. package/lib-esm/stories/SelectPanel.stories.js +0 -334
  485. package/lib-esm/stories/TextInputWithTokens.stories.js +0 -196
  486. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  487. package/lib-esm/stories/Token.stories.js +0 -133
  488. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  489. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  490. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  491. package/migrating.md +0 -250
  492. package/now.json +0 -17
  493. package/package-lock.json +0 -28456
  494. package/rollup.config.js +0 -36
  495. package/script/build +0 -19
  496. package/script/build-storybook +0 -10
  497. package/script/setup +0 -12
  498. package/src/ActionList/Divider.tsx +0 -25
  499. package/src/ActionList/Group.tsx +0 -45
  500. package/src/ActionList/Header.tsx +0 -74
  501. package/src/ActionList/Item.tsx +0 -496
  502. package/src/ActionList/List.tsx +0 -258
  503. package/src/ActionList/index.ts +0 -21
  504. package/src/ActionMenu.tsx +0 -106
  505. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
  506. package/src/AnchoredOverlay/index.ts +0 -2
  507. package/src/Autocomplete/Autocomplete.tsx +0 -103
  508. package/src/Autocomplete/AutocompleteContext.tsx +0 -19
  509. package/src/Autocomplete/AutocompleteInput.tsx +0 -179
  510. package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
  511. package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
  512. package/src/Autocomplete/index.ts +0 -2
  513. package/src/Avatar.tsx +0 -46
  514. package/src/AvatarPair.tsx +0 -35
  515. package/src/AvatarStack.tsx +0 -159
  516. package/src/BaseStyles.tsx +0 -53
  517. package/src/BorderBox.tsx +0 -18
  518. package/src/Box.tsx +0 -54
  519. package/src/BranchName.tsx +0 -19
  520. package/src/Breadcrumbs.tsx +0 -101
  521. package/src/Button/Button.tsx +0 -40
  522. package/src/Button/ButtonBase.tsx +0 -43
  523. package/src/Button/ButtonClose.tsx +0 -40
  524. package/src/Button/ButtonDanger.tsx +0 -43
  525. package/src/Button/ButtonGroup.tsx +0 -55
  526. package/src/Button/ButtonInvisible.tsx +0 -32
  527. package/src/Button/ButtonOutline.tsx +0 -43
  528. package/src/Button/ButtonPrimary.tsx +0 -41
  529. package/src/Button/ButtonStyles.tsx +0 -36
  530. package/src/Button/ButtonTableList.tsx +0 -58
  531. package/src/Button/index.ts +0 -16
  532. package/src/Caret.tsx +0 -133
  533. package/src/CircleBadge.tsx +0 -55
  534. package/src/CircleOcticon.tsx +0 -37
  535. package/src/CounterLabel.tsx +0 -52
  536. package/src/Details.tsx +0 -23
  537. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  538. package/src/Dialog/Dialog.tsx +0 -432
  539. package/src/Dialog.tsx +0 -149
  540. package/src/Dropdown.tsx +0 -158
  541. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  542. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  543. package/src/DropdownMenu/index.ts +0 -4
  544. package/src/DropdownStyles.ts +0 -128
  545. package/src/FilterList.tsx +0 -81
  546. package/src/FilteredActionList/FilteredActionList.tsx +0 -142
  547. package/src/FilteredActionList/index.ts +0 -2
  548. package/src/FilteredSearch.tsx +0 -28
  549. package/src/Flash.tsx +0 -77
  550. package/src/Flex.tsx +0 -15
  551. package/src/FormGroup.tsx +0 -27
  552. package/src/Grid.tsx +0 -15
  553. package/src/Header.tsx +0 -84
  554. package/src/Heading.tsx +0 -21
  555. package/src/Label.tsx +0 -75
  556. package/src/LabelGroup.tsx +0 -18
  557. package/src/Link.tsx +0 -46
  558. package/src/Overlay.tsx +0 -197
  559. package/src/Pagehead.tsx +0 -17
  560. package/src/Pagination/Pagination.tsx +0 -214
  561. package/src/Pagination/index.ts +0 -4
  562. package/src/Pagination/model.tsx +0 -187
  563. package/src/PointerBox.tsx +0 -31
  564. package/src/Popover.tsx +0 -236
  565. package/src/Portal/Portal.tsx +0 -96
  566. package/src/Portal/index.ts +0 -5
  567. package/src/Position.tsx +0 -63
  568. package/src/ProgressBar.tsx +0 -52
  569. package/src/SelectMenu/SelectMenu.tsx +0 -125
  570. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  571. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  572. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  573. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  574. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  575. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  576. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  577. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  578. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  579. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  580. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  581. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  582. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  583. package/src/SelectMenu/index.ts +0 -15
  584. package/src/SelectPanel/SelectPanel.tsx +0 -173
  585. package/src/SelectPanel/index.ts +0 -2
  586. package/src/SideNav.tsx +0 -193
  587. package/src/Spinner.tsx +0 -59
  588. package/src/StateLabel.tsx +0 -102
  589. package/src/StyledOcticon.tsx +0 -24
  590. package/src/SubNav.tsx +0 -129
  591. package/src/TabNav.tsx +0 -77
  592. package/src/Text.tsx +0 -13
  593. package/src/TextInput.tsx +0 -68
  594. package/src/TextInputWithTokens.tsx +0 -280
  595. package/src/ThemeProvider.tsx +0 -176
  596. package/src/Timeline.tsx +0 -141
  597. package/src/Token/AvatarToken.tsx +0 -54
  598. package/src/Token/IssueLabelToken.tsx +0 -150
  599. package/src/Token/Token.tsx +0 -126
  600. package/src/Token/TokenBase.tsx +0 -129
  601. package/src/Token/_RemoveTokenButton.tsx +0 -111
  602. package/src/Token/_TokenTextContainer.tsx +0 -47
  603. package/src/Token/index.ts +0 -3
  604. package/src/Tooltip.tsx +0 -263
  605. package/src/Truncate.tsx +0 -36
  606. package/src/UnderlineNav.tsx +0 -110
  607. package/src/_TextInputWrapper.tsx +0 -105
  608. package/src/_UnstyledTextInput.tsx +0 -19
  609. package/src/__tests__/.eslintrc.json +0 -11
  610. package/src/__tests__/ActionList.test.tsx +0 -53
  611. package/src/__tests__/ActionList.types.test.tsx +0 -51
  612. package/src/__tests__/ActionMenu.test.tsx +0 -136
  613. package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
  614. package/src/__tests__/Autocomplete.test.tsx +0 -444
  615. package/src/__tests__/Avatar.test.tsx +0 -44
  616. package/src/__tests__/AvatarStack.test.tsx +0 -48
  617. package/src/__tests__/BorderBox.test.tsx +0 -43
  618. package/src/__tests__/Box.test.tsx +0 -42
  619. package/src/__tests__/BranchName.test.tsx +0 -26
  620. package/src/__tests__/Breadcrumbs.test.tsx +0 -27
  621. package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
  622. package/src/__tests__/Button.test.tsx +0 -128
  623. package/src/__tests__/Caret.test.tsx +0 -36
  624. package/src/__tests__/CircleBadge.test.tsx +0 -66
  625. package/src/__tests__/CircleOcticon.test.tsx +0 -50
  626. package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
  627. package/src/__tests__/CounterLabel.test.tsx +0 -50
  628. package/src/__tests__/Details.test.tsx +0 -115
  629. package/src/__tests__/Dialog.test.tsx +0 -155
  630. package/src/__tests__/Dropdown.test.tsx +0 -53
  631. package/src/__tests__/DropdownMenu.test.tsx +0 -136
  632. package/src/__tests__/FilterList.test.tsx +0 -26
  633. package/src/__tests__/FilterListItem.test.tsx +0 -31
  634. package/src/__tests__/FilteredSearch.test.tsx +0 -26
  635. package/src/__tests__/Flash.test.tsx +0 -45
  636. package/src/__tests__/Flex.test.tsx +0 -58
  637. package/src/__tests__/FormGroup.test.tsx +0 -38
  638. package/src/__tests__/Grid.test.tsx +0 -82
  639. package/src/__tests__/Header.test.tsx +0 -49
  640. package/src/__tests__/Heading.test.tsx +0 -91
  641. package/src/__tests__/Label.test.tsx +0 -34
  642. package/src/__tests__/LabelGroup.test.tsx +0 -30
  643. package/src/__tests__/Link.test.tsx +0 -47
  644. package/src/__tests__/Merge.types.test.ts +0 -39
  645. package/src/__tests__/Overlay.test.tsx +0 -103
  646. package/src/__tests__/Pagehead.test.tsx +0 -23
  647. package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
  648. package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
  649. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
  650. package/src/__tests__/PointerBox.test.tsx +0 -34
  651. package/src/__tests__/Popover.test.tsx +0 -68
  652. package/src/__tests__/Portal.test.tsx +0 -103
  653. package/src/__tests__/Position.test.tsx +0 -117
  654. package/src/__tests__/ProgressBar.test.tsx +0 -40
  655. package/src/__tests__/SelectMenu.test.tsx +0 -142
  656. package/src/__tests__/SelectPanel.test.tsx +0 -63
  657. package/src/__tests__/SideNav.test.tsx +0 -62
  658. package/src/__tests__/Spinner.test.tsx +0 -42
  659. package/src/__tests__/StateLabel.test.tsx +0 -48
  660. package/src/__tests__/StyledOcticon.test.tsx +0 -26
  661. package/src/__tests__/SubNav.test.tsx +0 -50
  662. package/src/__tests__/SubNavLink.test.tsx +0 -31
  663. package/src/__tests__/TabNav.test.tsx +0 -32
  664. package/src/__tests__/Text.test.tsx +0 -78
  665. package/src/__tests__/TextInput.test.tsx +0 -49
  666. package/src/__tests__/TextInputWithTokens.test.tsx +0 -262
  667. package/src/__tests__/ThemeProvider.test.tsx +0 -441
  668. package/src/__tests__/Timeline.test.tsx +0 -58
  669. package/src/__tests__/Token.test.tsx +0 -118
  670. package/src/__tests__/Tooltip.test.tsx +0 -52
  671. package/src/__tests__/Truncate.test.tsx +0 -43
  672. package/src/__tests__/UnderlineNav.test.tsx +0 -58
  673. package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
  674. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
  675. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
  676. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -332
  677. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3414
  678. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
  679. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
  680. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
  681. package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
  682. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
  683. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
  684. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
  685. package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -840
  686. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
  687. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -141
  688. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -64
  689. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
  690. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
  691. package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
  692. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -200
  693. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
  694. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -106
  695. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
  696. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
  697. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
  698. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
  699. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
  700. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
  701. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
  702. package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
  703. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
  704. package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -74
  705. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
  706. package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -213
  707. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
  708. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
  709. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
  710. package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
  711. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
  712. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -469
  713. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -123
  714. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
  715. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
  716. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -388
  717. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -25
  718. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
  719. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
  720. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
  721. package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
  722. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -440
  723. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -5516
  724. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
  725. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
  726. package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3794
  727. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
  728. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
  729. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
  730. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
  731. package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
  732. package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
  733. package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
  734. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
  735. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
  736. package/src/__tests__/filterObject.test.ts +0 -54
  737. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
  738. package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
  739. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
  740. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
  741. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
  742. package/src/__tests__/theme.test.ts +0 -41
  743. package/src/__tests__/themeGet.test.ts +0 -15
  744. package/src/__tests__/useSafeTimeout.test.tsx +0 -36
  745. package/src/behaviors/anchoredPosition.ts +0 -442
  746. package/src/behaviors/focusTrap.ts +0 -184
  747. package/src/behaviors/focusZone.ts +0 -713
  748. package/src/behaviors/scrollIntoViewingArea.ts +0 -27
  749. package/src/constants.ts +0 -62
  750. package/src/hooks/index.ts +0 -11
  751. package/src/hooks/useAnchoredPosition.ts +0 -53
  752. package/src/hooks/useCombinedRefs.ts +0 -40
  753. package/src/hooks/useDetails.tsx +0 -54
  754. package/src/hooks/useDialog.ts +0 -121
  755. package/src/hooks/useFocusTrap.ts +0 -80
  756. package/src/hooks/useFocusZone.ts +0 -64
  757. package/src/hooks/useOnEscapePress.ts +0 -63
  758. package/src/hooks/useOnOutsideClick.tsx +0 -82
  759. package/src/hooks/useOpenAndCloseFocus.ts +0 -32
  760. package/src/hooks/useOverlay.tsx +0 -34
  761. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  762. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  763. package/src/hooks/useRenderForcingRef.ts +0 -22
  764. package/src/hooks/useResizeObserver.ts +0 -11
  765. package/src/hooks/useSafeTimeout.ts +0 -38
  766. package/src/hooks/useScrollFlash.ts +0 -21
  767. package/src/index.ts +0 -170
  768. package/src/polyfills/eventListenerSignal.ts +0 -66
  769. package/src/stories/ActionList.stories.tsx +0 -436
  770. package/src/stories/ActionMenu.stories.tsx +0 -334
  771. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  772. package/src/stories/Autocomplete.stories.tsx +0 -655
  773. package/src/stories/AvatarStack.stories.tsx +0 -37
  774. package/src/stories/Button.stories.tsx +0 -92
  775. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  776. package/src/stories/Dialog.stories.tsx +0 -240
  777. package/src/stories/DropdownMenu.stories.tsx +0 -84
  778. package/src/stories/IssueLabelToken.stories.tsx +0 -138
  779. package/src/stories/Overlay.stories.tsx +0 -213
  780. package/src/stories/Portal.stories.tsx +0 -109
  781. package/src/stories/ProfileToken.stories.tsx +0 -129
  782. package/src/stories/SelectPanel.stories.tsx +0 -353
  783. package/src/stories/TextInputWithTokens.stories.tsx +0 -146
  784. package/src/stories/ThemeProvider.stories.tsx +0 -104
  785. package/src/stories/Token.stories.tsx +0 -126
  786. package/src/stories/useAnchoredPosition.stories.tsx +0 -332
  787. package/src/stories/useFocusTrap.stories.tsx +0 -400
  788. package/src/stories/useFocusZone.stories.tsx +0 -663
  789. package/src/sx.ts +0 -9
  790. package/src/theme-preval.js +0 -79
  791. package/src/theme.ts +0 -3
  792. package/src/utils/deprecate.tsx +0 -73
  793. package/src/utils/isNumeric.tsx +0 -4
  794. package/src/utils/iterateFocusableElements.ts +0 -121
  795. package/src/utils/ssr.tsx +0 -1
  796. package/src/utils/test-deprecations.tsx +0 -19
  797. package/src/utils/test-helpers.tsx +0 -7
  798. package/src/utils/test-matchers.tsx +0 -109
  799. package/src/utils/testing.tsx +0 -242
  800. package/src/utils/theme.js +0 -64
  801. package/src/utils/types/AriaRole.ts +0 -71
  802. package/src/utils/types/ComponentProps.ts +0 -13
  803. package/src/utils/types/Flatten.ts +0 -4
  804. package/src/utils/types/MandateProps.ts +0 -19
  805. package/src/utils/types/Merge.ts +0 -20
  806. package/src/utils/types/index.ts +0 -5
  807. package/src/utils/uniqueId.ts +0 -6
  808. package/src/utils/userAgent.ts +0 -7
  809. package/stats.html +0 -3279
  810. package/tsconfig.build.json +0 -7
  811. package/tsconfig.json +0 -20
@@ -1,663 +0,0 @@
1
- import React, {useCallback, useRef, useState} from 'react'
2
- import {Meta} from '@storybook/react'
3
- import styled, {createGlobalStyle} from 'styled-components'
4
-
5
- import {Box, BaseStyles, Button, Flash, theme, ThemeProvider} from '..'
6
- import {Direction, FocusKeys} from '../behaviors/focusZone'
7
- import {themeGet} from '@styled-system/theme-get'
8
- import {useFocusZone} from '../hooks/useFocusZone'
9
- import {useTheme} from '../ThemeProvider'
10
- import {ButtonDanger, ButtonPrimary} from '../Button'
11
-
12
- export default {
13
- title: 'Hooks/useFocusZone',
14
- decorators: [
15
- Story => {
16
- return (
17
- <ThemeProvider theme={theme}>
18
- <BaseStyles>
19
- <Story />
20
- </BaseStyles>
21
- </ThemeProvider>
22
- )
23
- }
24
- ]
25
- } as Meta
26
-
27
- // NOTE: the below styles are solely intended as a visual aid for
28
- // this Storybook story, but they're not recommended for a real site!
29
- const HelperGlobalStyling = createGlobalStyle`
30
- *:focus {
31
- outline: 2px solid ${themeGet('colors.border.info')} !important;
32
- }
33
- `
34
-
35
- const MarginButton = styled(Button)`
36
- margin: ${themeGet('space.1')};
37
- `
38
-
39
- export const BasicFocusZone = () => {
40
- // Display each key press in the top-right corner of the page as a visual aid
41
- const [lastKey, setLastKey] = useState('none')
42
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
43
- setLastKey(event.key)
44
- }, [])
45
-
46
- const [fzEnabled, setFzEnabled] = useState(true)
47
- const {containerRef} = useFocusZone({disabled: !fzEnabled}, [fzEnabled])
48
-
49
- const ToggleButton = fzEnabled ? ButtonDanger : ButtonPrimary
50
- const toggleFz = useCallback(() => {
51
- setFzEnabled(!fzEnabled)
52
- }, [fzEnabled])
53
-
54
- return (
55
- <>
56
- <HelperGlobalStyling />
57
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
58
- <Box position="absolute" right={5} top={2}>
59
- Last key pressed: {lastKey}
60
- </Box>
61
- <ToggleButton mb={3} onClick={toggleFz}>
62
- {fzEnabled ? 'Disable' : 'Enable'} Focus Zone
63
- </ToggleButton>
64
- <MarginButton>Apple</MarginButton>
65
- <MarginButton>Banana</MarginButton>
66
- <MarginButton>Cantaloupe</MarginButton>
67
- <Box
68
- borderColor="gray.5"
69
- ref={containerRef as React.RefObject<HTMLDivElement>}
70
- m={4}
71
- p={4}
72
- borderWidth="1px"
73
- borderStyle="solid"
74
- borderRadius={2}
75
- >
76
- <strong>Use Up Arrow, Down Arrow, Home, and End to move focus within this box.</strong>
77
- <Box display="flex" flexDirection="column" alignItems="flex-start">
78
- <MarginButton>Durian</MarginButton>
79
- <MarginButton>Elderberry</MarginButton>
80
- <MarginButton>Fig</MarginButton>
81
- </Box>
82
- </Box>
83
- <MarginButton>Kiwi</MarginButton>
84
- <MarginButton>Lemon</MarginButton>
85
- <MarginButton>Mango</MarginButton>
86
- </Box>
87
- </>
88
- )
89
- }
90
-
91
- export const FocusOutBehavior = () => {
92
- // Display each key press in the top-right corner of the page as a visual aid
93
- const [lastKey, setLastKey] = useState('none')
94
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
95
- setLastKey(event.key)
96
- }, [])
97
-
98
- const {containerRef: containerRef1} = useFocusZone({
99
- focusOutBehavior: 'stop',
100
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
101
- })
102
- const {containerRef: containerRef2} = useFocusZone({
103
- focusOutBehavior: 'wrap',
104
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
105
- })
106
-
107
- return (
108
- <>
109
- <HelperGlobalStyling />
110
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
111
- <Box position="absolute" right={5} top={2}>
112
- Last key pressed: {lastKey}
113
- </Box>
114
- <MarginButton>Apple</MarginButton>
115
- <MarginButton>Banana</MarginButton>
116
- <MarginButton>Cantaloupe</MarginButton>
117
- <Box
118
- borderColor="gray.5"
119
- ref={containerRef1 as React.RefObject<HTMLDivElement>}
120
- m={4}
121
- p={4}
122
- borderWidth="1px"
123
- borderStyle="solid"
124
- borderRadius={2}
125
- >
126
- <strong>
127
- Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends.
128
- </strong>
129
-
130
- <Box display="flex" flexDirection="row" alignItems="flex-start">
131
- <MarginButton>Durian</MarginButton>
132
- <MarginButton>Elderberry</MarginButton>
133
- <MarginButton>Fig</MarginButton>
134
- </Box>
135
- </Box>
136
- <Box
137
- borderColor="gray.5"
138
- ref={containerRef2 as React.RefObject<HTMLDivElement>}
139
- m={4}
140
- p={4}
141
- borderWidth="1px"
142
- borderStyle="solid"
143
- borderRadius={2}
144
- >
145
- <strong>Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular.</strong>
146
-
147
- <Box display="flex" flexDirection="row" alignItems="flex-start">
148
- <MarginButton>Grapefruit</MarginButton>
149
- <MarginButton>Honeydew</MarginButton>
150
- <MarginButton>Jackfruit</MarginButton>
151
- </Box>
152
- </Box>
153
- <MarginButton>Kiwi</MarginButton>
154
- <MarginButton>Lemon</MarginButton>
155
- <MarginButton>Mango</MarginButton>
156
- </Box>
157
- </>
158
- )
159
- }
160
-
161
- function getSiblingIndex(element: Element) {
162
- let child: Element | null = element
163
- let i = 0
164
- while ((child = child.previousElementSibling) != null) {
165
- ++i
166
- }
167
- return i
168
- }
169
-
170
- export const CustomFocusMovement = () => {
171
- // Display each key press in the top-right corner of the page as a visual aid
172
- const [lastKey, setLastKey] = useState('none')
173
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
174
- setLastKey(event.key)
175
- }, [])
176
-
177
- const containerRef = useRef<HTMLElement>(null)
178
-
179
- const getNextFocusable = useCallback(
180
- (direction: Direction, from: Element | undefined, event: KeyboardEvent): HTMLElement | undefined => {
181
- const toEnd = direction === 'start' || direction === 'end'
182
- if (from && containerRef.current) {
183
- const currentIndex = getSiblingIndex(from)
184
- let nextIndex = currentIndex
185
- if (['End', 'ArrowRight'].includes(event.key)) {
186
- while (nextIndex % 3 !== 2) {
187
- nextIndex += 1
188
- if (!toEnd) {
189
- break
190
- }
191
- }
192
- }
193
- if (['Home', 'ArrowLeft'].includes(event.key)) {
194
- while (nextIndex % 3 !== 0) {
195
- nextIndex -= 1
196
- if (!toEnd) {
197
- break
198
- }
199
- }
200
- }
201
- if (event.key === 'ArrowUp') {
202
- while (nextIndex - 3 >= 0) {
203
- nextIndex -= 3
204
- if (!toEnd) {
205
- break
206
- }
207
- }
208
- }
209
- if (event.key === 'ArrowDown') {
210
- while (nextIndex + 3 < 9) {
211
- nextIndex += 3
212
- if (!toEnd) {
213
- break
214
- }
215
- }
216
- }
217
- return containerRef.current.children[nextIndex] as HTMLElement
218
- }
219
- },
220
- [containerRef]
221
- )
222
-
223
- useFocusZone({containerRef, getNextFocusable})
224
-
225
- return (
226
- <>
227
- <HelperGlobalStyling />
228
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
229
- <Box position="absolute" right={5} top={2}>
230
- Last key pressed: {lastKey}
231
- </Box>
232
- <MarginButton>Apple</MarginButton>
233
-
234
- <Box borderColor="gray.5" m={4} p={4} borderWidth="1px" borderStyle="solid" borderRadius={2}>
235
- <strong>Use arrow keys to move focus within this box.</strong>
236
- <Box
237
- display="grid"
238
- ref={containerRef as React.RefObject<HTMLDivElement>}
239
- gridTemplateRows="1fr 1fr 1fr"
240
- gridTemplateColumns="1fr 1fr 1fr"
241
- >
242
- <MarginButton>Banana</MarginButton>
243
- <MarginButton>Cantaloupe</MarginButton>
244
- <MarginButton>Durian</MarginButton>
245
- <MarginButton>Elderberry</MarginButton>
246
- <MarginButton>Fig</MarginButton>
247
- <MarginButton>Grapefruit</MarginButton>
248
- <MarginButton>Honeydew</MarginButton>
249
- <MarginButton>Jackfruit</MarginButton>
250
- <MarginButton>Kiwi</MarginButton>
251
- </Box>
252
- </Box>
253
- <MarginButton>Lemon</MarginButton>
254
- <MarginButton>Mango</MarginButton>
255
- </Box>
256
- </>
257
- )
258
- }
259
-
260
- export const FocusInStrategy = () => {
261
- // Display each key press in the top-right corner of the page as a visual aid
262
- const [lastKey, setLastKey] = useState('none')
263
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
264
- setLastKey(event.key)
265
- }, [])
266
-
267
- const {containerRef: firstContainerRef} = useFocusZone({
268
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
269
- focusInStrategy: 'first'
270
- })
271
-
272
- const {containerRef: closestContainerRef} = useFocusZone({
273
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
274
- focusInStrategy: 'closest'
275
- })
276
-
277
- const {containerRef: prevContainerRef} = useFocusZone({
278
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
279
- focusInStrategy: 'previous'
280
- })
281
-
282
- const customContainerRef = useRef<HTMLElement>(null)
283
- const customStrategy = React.useCallback(() => {
284
- if (customContainerRef.current) {
285
- const buttons = Array.from(customContainerRef.current.querySelectorAll('button'))
286
- return buttons[Math.floor(Math.random() * 3)]
287
- }
288
- }, [customContainerRef])
289
-
290
- useFocusZone({
291
- containerRef: customContainerRef,
292
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
293
- focusInStrategy: customStrategy
294
- })
295
-
296
- return (
297
- <>
298
- <HelperGlobalStyling />
299
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
300
- <Box position="absolute" right={5} top={2}>
301
- Last key pressed: {lastKey}
302
- </Box>
303
- <MarginButton>Apple</MarginButton>
304
- <MarginButton>Banana</MarginButton>
305
- <MarginButton>Cantaloupe</MarginButton>
306
- <Box
307
- borderColor="gray.5"
308
- ref={firstContainerRef as React.RefObject<HTMLDivElement>}
309
- m={4}
310
- p={4}
311
- borderWidth="1px"
312
- borderStyle="solid"
313
- borderRadius={2}
314
- >
315
- <strong>&ldquo;First&rdquo; strategy (focus first focusable element)</strong>
316
- <Box display="flex" flexDirection="row" alignItems="flex-start">
317
- <MarginButton>Banana</MarginButton>
318
- <MarginButton>Cantaloupe</MarginButton>
319
- <MarginButton>Durian</MarginButton>
320
- </Box>
321
- </Box>
322
- <Box
323
- borderColor="gray.5"
324
- ref={closestContainerRef as React.RefObject<HTMLDivElement>}
325
- m={4}
326
- p={4}
327
- borderWidth="1px"
328
- borderStyle="solid"
329
- borderRadius={2}
330
- >
331
- <strong>&ldquo;Closest&rdquo; strategy (focus first or last depending on focus direction)</strong>
332
- <Box display="flex" flexDirection="row" alignItems="flex-start">
333
- <MarginButton>Elderberry</MarginButton>
334
- <MarginButton>Fig</MarginButton>
335
- <MarginButton>Grapefruit</MarginButton>
336
- </Box>
337
- </Box>
338
- <Box
339
- borderColor="gray.5"
340
- ref={prevContainerRef as React.RefObject<HTMLDivElement>}
341
- m={4}
342
- p={4}
343
- borderWidth="1px"
344
- borderStyle="solid"
345
- borderRadius={2}
346
- >
347
- <strong>&ldquo;Previous&rdquo; strategy (most recently focused element)</strong>
348
- <Box display="flex" flexDirection="row" alignItems="flex-start">
349
- <MarginButton>Honeydew</MarginButton>
350
- <MarginButton>Jackfruit</MarginButton>
351
- <MarginButton>Kiwi</MarginButton>
352
- </Box>
353
- </Box>
354
- <Box
355
- borderColor="gray.5"
356
- ref={customContainerRef as React.RefObject<HTMLDivElement>}
357
- m={4}
358
- p={4}
359
- borderWidth="1px"
360
- borderStyle="solid"
361
- borderRadius={2}
362
- >
363
- <strong>&ldquo;Custom&rdquo; strategy (choose randomly for this example)</strong>
364
- <Box display="flex" flexDirection="row" alignItems="flex-start">
365
- <MarginButton>Lemon</MarginButton>
366
- <MarginButton>Mango</MarginButton>
367
- <MarginButton>Nectarine</MarginButton>
368
- </Box>
369
- </Box>
370
- <MarginButton>Orange</MarginButton>
371
- <MarginButton>Papaya</MarginButton>
372
- </Box>
373
- </>
374
- )
375
- }
376
-
377
- export const SpecialSituations = () => {
378
- // Display each key press in the top-right corner of the page as a visual aid
379
- const [lastKey, setLastKey] = useState('none')
380
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
381
- setLastKey(event.key)
382
- }, [])
383
-
384
- const {containerRef: vContainerRef} = useFocusZone({
385
- bindKeys:
386
- FocusKeys.ArrowVertical |
387
- FocusKeys.JK |
388
- FocusKeys.WS |
389
- FocusKeys.Tab |
390
- FocusKeys.PageUpDown |
391
- FocusKeys.HomeAndEnd
392
- })
393
- const {containerRef: hContainerRef} = useFocusZone({focusOutBehavior: 'wrap', bindKeys: FocusKeys.ArrowHorizontal})
394
-
395
- return (
396
- <>
397
- <HelperGlobalStyling />
398
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
399
- <Flash mb={3}>
400
- This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in
401
- different situations. Focus treatment within your component should be evaluated for your particular UX using
402
- the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard">ARIA guidelines</a>.
403
- </Flash>
404
- <Box position="absolute" right={5} top={2}>
405
- Last key pressed: {lastKey}
406
- </Box>
407
- <MarginButton>Apple</MarginButton>
408
- <MarginButton>Banana</MarginButton>
409
- <MarginButton>Cantaloupe</MarginButton>
410
- <Box
411
- borderColor="gray.5"
412
- ref={vContainerRef as React.RefObject<HTMLDivElement>}
413
- m={4}
414
- p={4}
415
- borderWidth="1px"
416
- borderStyle="solid"
417
- borderRadius={2}
418
- >
419
- <strong>Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
420
- <Box display="flex" flexDirection="column" alignItems="flex-start">
421
- <input style={{width: '250px'}} type="text" defaultValue="Printable characters won't move focus" />
422
- <MarginButton>Regular button</MarginButton>
423
- <select>
424
- <option>Down arrow invokes dropdown</option>
425
- <option>Unless Cmd (mac)/Ctrl (Windows)</option>
426
- <option>Is held</option>
427
- </select>
428
- <textarea
429
- style={{width: '250px', height: '95px'}}
430
- defaultValue="Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
431
- ></textarea>
432
- </Box>
433
- </Box>
434
- <Box
435
- borderColor="gray.5"
436
- ref={hContainerRef as React.RefObject<HTMLDivElement>}
437
- m={4}
438
- p={4}
439
- borderWidth="1px"
440
- borderStyle="solid"
441
- borderRadius={2}
442
- >
443
- <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
444
-
445
- <Box display="flex" flexDirection="row" alignItems="center">
446
- <MarginButton>Grapefruit</MarginButton>
447
- <input
448
- style={{width: '300px'}}
449
- type="text"
450
- defaultValue="Left/Right only work at beginning/end of input."
451
- />
452
- <MarginButton>Jackfruit</MarginButton>
453
- </Box>
454
- </Box>
455
- <MarginButton>Kiwi</MarginButton>
456
- <MarginButton>Lemon</MarginButton>
457
- <MarginButton>Mango</MarginButton>
458
- </Box>
459
- </>
460
- )
461
- }
462
-
463
- export const ChangingSubtree = () => {
464
- // Display each key press in the top-right corner of the page as a visual aid
465
- const [lastKey, setLastKey] = useState('none')
466
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
467
- setLastKey(event.key)
468
- }, [])
469
-
470
- const {containerRef} = useFocusZone({bindKeys: FocusKeys.ArrowVertical})
471
-
472
- const [buttonCount, setButtonCount] = useState(3)
473
- const removeButton = useCallback(() => {
474
- setButtonCount(buttonCount - 1)
475
- }, [setButtonCount, buttonCount])
476
-
477
- const addButton = useCallback(() => {
478
- setButtonCount(buttonCount + 1)
479
- }, [setButtonCount, buttonCount])
480
-
481
- const buttons: JSX.Element[] = []
482
- for (let i = 0; i < buttonCount; ++i) {
483
- buttons.push(
484
- <div>
485
- <MarginButton key={`button${i}`}>{i + 1}</MarginButton>
486
- </div>
487
- )
488
- }
489
-
490
- return (
491
- <>
492
- <HelperGlobalStyling />
493
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
494
- <Flash mb={3}>
495
- This story demonstrates that focusZone is consistent even when the container&rsquo;s subtree changes.
496
- </Flash>
497
- <Box position="absolute" right={5} top={2}>
498
- Last key pressed: {lastKey}
499
- </Box>
500
- <MarginButton>Apple</MarginButton>
501
- <MarginButton>Banana</MarginButton>
502
- <MarginButton>Cantaloupe</MarginButton>
503
- <Box
504
- borderColor="gray.5"
505
- ref={containerRef as React.RefObject<HTMLDivElement>}
506
- m={4}
507
- p={4}
508
- borderWidth="1px"
509
- borderStyle="solid"
510
- borderRadius={2}
511
- >
512
- <strong>Bound keys: Arrow Up and Arrow Down</strong>
513
- <Box display="flex" flexDirection="column" alignItems="flex-start">
514
- {buttons}
515
- </Box>
516
- </Box>
517
- <Box display="flex" flexDirection="row">
518
- <MarginButton onClick={removeButton}>Remove Button</MarginButton>
519
- <MarginButton onClick={addButton}>Add Button</MarginButton>
520
- </Box>
521
- </Box>
522
- </>
523
- )
524
- }
525
-
526
- export const NestedZones = () => {
527
- // Display each key press in the top-right corner of the page as a visual aid
528
- const [lastKey, setLastKey] = useState('none')
529
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
530
- setLastKey(event.key)
531
- }, [])
532
-
533
- const outerContainerRef = useRef<HTMLElement>(null)
534
- const innerContainerRef = useRef<HTMLElement>(null)
535
-
536
- useFocusZone({
537
- containerRef: outerContainerRef,
538
- bindKeys: FocusKeys.ArrowVertical
539
- })
540
-
541
- useFocusZone({
542
- containerRef: innerContainerRef,
543
- bindKeys: FocusKeys.ArrowHorizontal
544
- })
545
-
546
- return (
547
- <>
548
- <HelperGlobalStyling />
549
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
550
- <Box position="absolute" right={5} top={2}>
551
- Last key pressed: {lastKey}
552
- </Box>
553
- <MarginButton>Apple</MarginButton>
554
- <MarginButton>Banana</MarginButton>
555
- <Box
556
- borderColor="gray.5"
557
- m={4}
558
- p={4}
559
- ref={outerContainerRef as React.RefObject<HTMLDivElement>}
560
- borderWidth="1px"
561
- borderStyle="solid"
562
- borderRadius={2}
563
- >
564
- <strong>Bound keys: Arrow Up and Arrow Down</strong>
565
- <br />
566
- <MarginButton>Cantaloupe</MarginButton>
567
- <Box
568
- borderColor="gray.5"
569
- m={4}
570
- p={4}
571
- ref={innerContainerRef as React.RefObject<HTMLDivElement>}
572
- borderWidth="1px"
573
- borderStyle="solid"
574
- borderRadius={2}
575
- >
576
- <strong>Additional Bound keys: Arrow Left and Arrow Right</strong>
577
- <Box display="flex" id="list" flexDirection="column" alignItems="flex-start">
578
- <MarginButton>Durian</MarginButton>
579
- <MarginButton>Elderberry</MarginButton>
580
- <MarginButton>Fig</MarginButton>
581
- <MarginButton>Grapefruit</MarginButton>
582
- </Box>
583
- </Box>
584
- <MarginButton>Honeydew</MarginButton>
585
- </Box>
586
- <MarginButton>Jackfruit</MarginButton>
587
- <MarginButton>Kiwi</MarginButton>
588
- </Box>
589
- </>
590
- )
591
- }
592
-
593
- export const ActiveDescendant = () => {
594
- // Display each key press in the top-right corner of the page as a visual aid
595
- const [lastKey, setLastKey] = useState('none')
596
- const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
597
- setLastKey(event.key)
598
- }, [])
599
-
600
- const containerRef = useRef<HTMLElement>(null)
601
- const controllingElementRef = useRef<HTMLElement>(null)
602
- const {theme: themeFromContext} = useTheme()
603
-
604
- useFocusZone({
605
- containerRef,
606
- activeDescendantFocus: controllingElementRef,
607
- bindKeys: FocusKeys.ArrowVertical,
608
- onActiveDescendantChanged: (current, previous) => {
609
- if (current) {
610
- current.style.outline = `2px solid ${themeFromContext?.colors.border.info}`
611
- }
612
- if (previous) {
613
- previous.style.outline = ''
614
- }
615
- },
616
- focusableElementFilter: elem => elem instanceof HTMLButtonElement
617
- })
618
-
619
- return (
620
- <>
621
- <HelperGlobalStyling />
622
- <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
623
- <Flash mb={3}>
624
- This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an
625
- active element. Below, you can focus the input box then use the up/down arrow keys to change the active
626
- descendant (dark blue outline).
627
- </Flash>
628
- <Box position="absolute" right={5} top={2}>
629
- Last key pressed: {lastKey}
630
- </Box>
631
- <MarginButton>Apple</MarginButton>
632
- <MarginButton>Banana</MarginButton>
633
- <MarginButton>Cantaloupe</MarginButton>
634
- <Box borderColor="gray.5" m={4} p={4} borderWidth="1px" borderStyle="solid" borderRadius={2}>
635
- <strong>Bound keys: Arrow Up and Arrow Down</strong>
636
- <Box display="flex" flexDirection="column" alignItems="flex-start">
637
- <input
638
- ref={controllingElementRef as React.RefObject<HTMLInputElement>}
639
- type="text"
640
- defaultValue="Focus remains here."
641
- aria-controls="list"
642
- />
643
- <Box
644
- display="flex"
645
- id="list"
646
- flexDirection="column"
647
- alignItems="flex-start"
648
- ref={containerRef as React.RefObject<HTMLDivElement>}
649
- >
650
- <MarginButton>Durian</MarginButton>
651
- <MarginButton>Elderberry</MarginButton>
652
- <MarginButton>Fig</MarginButton>
653
- <MarginButton>Grapefruit</MarginButton>
654
- </Box>
655
- </Box>
656
- </Box>
657
- <MarginButton>Honeydew</MarginButton>
658
- <MarginButton>Jackfruit</MarginButton>
659
- <MarginButton>Kiwi</MarginButton>
660
- </Box>
661
- </>
662
- )
663
- }
package/src/sx.ts DELETED
@@ -1,9 +0,0 @@
1
- import css, {SystemStyleObject} from '@styled-system/css'
2
-
3
- export interface SxProp {
4
- sx?: SystemStyleObject
5
- }
6
-
7
- const sx = (props: SxProp) => css(props.sx)
8
-
9
- export default sx