@primer/components 32.0.0 → 32.0.2-rc.859381a1

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 (1176) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/config.json +10 -0
  3. package/.devcontainer/devcontainer.json +8 -0
  4. package/.eslintrc.json +137 -0
  5. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  6. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
  7. package/.github/dependabot.yml +18 -0
  8. package/.github/pull_request_template.md +18 -0
  9. package/.github/workflows/check_for_changeset.yml +25 -0
  10. package/.github/workflows/ci.yml +31 -0
  11. package/.github/workflows/deploy_preview.yml +47 -0
  12. package/.github/workflows/deploy_production.yml +70 -0
  13. package/.github/workflows/release.yml +35 -0
  14. package/.github/workflows/release_canary.yml +70 -0
  15. package/.github/workflows/release_candidate.yml +60 -0
  16. package/.github/workflows/size.yml +13 -0
  17. package/.github/workflows/stale.yml +26 -0
  18. package/.gitignore +10 -0
  19. package/.npmrc +4 -0
  20. package/.nvmrc +1 -0
  21. package/.storybook/main.js +9 -0
  22. package/.storybook/preview.js +117 -0
  23. package/.vscode/launch.json +21 -0
  24. package/.vscode/settings.json +13 -0
  25. package/@types/@styled-system/index.d.ts +0 -0
  26. package/@types/@styled-system/prop-types/index.d.ts +1 -0
  27. package/@types/@styled-system/props/index.d.ts +1 -0
  28. package/@types/jest-styled-components/index.d.ts +1 -0
  29. package/CHANGELOG.md +14 -0
  30. package/CODEOWNERS +2 -0
  31. package/babel-defines.js +13 -0
  32. package/babel.config.js +39 -0
  33. package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
  34. package/contributor-docs/CONTRIBUTING.md +274 -0
  35. package/contributor-docs/adrs/adr-001-typescript.md +23 -0
  36. package/contributor-docs/adrs/adr-002-behavior-isolation.md +108 -0
  37. package/contributor-docs/adrs/adr-003-prop-norms.md +72 -0
  38. package/contributor-docs/behaviors.md +132 -0
  39. package/contributor-docs/component-contents-api-patterns.md +316 -0
  40. package/contributor-docs/principles.md +39 -0
  41. package/dist/browser.esm.js +136 -136
  42. package/dist/browser.esm.js.map +1 -1
  43. package/dist/browser.umd.js +120 -120
  44. package/dist/browser.umd.js.map +1 -1
  45. package/docs/.eslintrc +0 -0
  46. package/docs/.gitignore +91 -0
  47. package/docs/components/PropsList.js +5 -0
  48. package/docs/components/State.js +9 -0
  49. package/docs/components/constants.js +34 -0
  50. package/docs/components/index.js +2 -0
  51. package/docs/content/ActionList.mdx +99 -0
  52. package/docs/content/ActionList2.mdx +359 -0
  53. package/docs/content/ActionMenu.mdx +80 -0
  54. package/docs/content/AnchoredOverlay.mdx +37 -0
  55. package/docs/content/Autocomplete.mdx +657 -0
  56. package/docs/content/Avatar.mdx +33 -0
  57. package/docs/content/AvatarStack.mdx +37 -0
  58. package/docs/content/BorderBox.md +46 -0
  59. package/docs/content/Box.mdx +96 -0
  60. package/docs/content/BranchName.md +18 -0
  61. package/docs/content/Breadcrumbs.md +47 -0
  62. package/docs/content/Buttons.md +46 -0
  63. package/docs/content/CircleBadge.md +35 -0
  64. package/docs/content/CircleOcticon.md +18 -0
  65. package/docs/content/CounterLabel.md +22 -0
  66. package/docs/content/Details.md +105 -0
  67. package/docs/content/Dialog.md +105 -0
  68. package/docs/content/Dialog2.mdx +180 -0
  69. package/docs/content/Dropdown.md +65 -0
  70. package/docs/content/DropdownMenu.mdx +49 -0
  71. package/docs/content/FilterList.md +37 -0
  72. package/docs/content/FilteredSearch.md +32 -0
  73. package/docs/content/Flash.md +35 -0
  74. package/docs/content/Flex.md +58 -0
  75. package/docs/content/FormGroup.md +38 -0
  76. package/docs/content/Grid.md +59 -0
  77. package/docs/content/Header.md +77 -0
  78. package/docs/content/Heading.md +22 -0
  79. package/docs/content/Label.md +49 -0
  80. package/docs/content/LabelGroup.md +21 -0
  81. package/docs/content/Link.md +28 -0
  82. package/docs/content/Overlay.mdx +85 -0
  83. package/docs/content/Pagehead.md +18 -0
  84. package/docs/content/Pagination.md +178 -0
  85. package/docs/content/PointerBox.md +81 -0
  86. package/docs/content/Popover.md +129 -0
  87. package/docs/content/Portal.mdx +78 -0
  88. package/docs/content/Position.md +100 -0
  89. package/docs/content/ProgressBar.mdx +29 -0
  90. package/docs/content/SelectMenu.md +371 -0
  91. package/docs/content/SelectPanel.mdx +67 -0
  92. package/docs/content/SideNav.md +171 -0
  93. package/docs/content/Spinner.mdx +32 -0
  94. package/docs/content/StateLabel.md +27 -0
  95. package/docs/content/StyledOcticon.md +27 -0
  96. package/docs/content/SubNav.md +100 -0
  97. package/docs/content/TabNav.md +42 -0
  98. package/docs/content/Text.md +31 -0
  99. package/docs/content/TextInput.md +34 -0
  100. package/docs/content/TextInputTokens.mdx +89 -0
  101. package/docs/content/TextInputWithTokens.mdx +211 -0
  102. package/docs/content/Timeline.md +148 -0
  103. package/docs/content/Token.mdx +381 -0
  104. package/docs/content/Tooltip.md +32 -0
  105. package/docs/content/Truncate.md +55 -0
  106. package/docs/content/UnderlineNav.md +45 -0
  107. package/docs/content/anchoredPosition.mdx +163 -0
  108. package/docs/content/core-concepts.md +70 -0
  109. package/docs/content/focusTrap.mdx +103 -0
  110. package/docs/content/focusZone.mdx +145 -0
  111. package/docs/content/getting-started.md +138 -0
  112. package/docs/content/index.md +33 -0
  113. package/docs/content/linting.md +35 -0
  114. package/docs/content/overriding-styles.mdx +82 -0
  115. package/docs/content/philosophy.md +23 -0
  116. package/docs/content/primer-theme.md +89 -0
  117. package/docs/content/ssr.mdx +43 -0
  118. package/docs/content/system-props.mdx +37 -0
  119. package/docs/content/theme-reference.md +16 -0
  120. package/docs/content/theming.md +272 -0
  121. package/docs/content/useOnEscapePress.mdx +56 -0
  122. package/docs/content/useOnOutsideClick.mdx +57 -0
  123. package/docs/content/useOpenAndCloseFocus.mdx +49 -0
  124. package/docs/content/useOverlay.mdx +62 -0
  125. package/docs/content/useSafeTimeout.mdx +32 -0
  126. package/docs/gatsby-config.js +30 -0
  127. package/docs/gatsby-node.js +101 -0
  128. package/docs/package-lock.json +20867 -0
  129. package/docs/package.json +36 -0
  130. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +21 -0
  131. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +41 -0
  132. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +73 -0
  133. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +133 -0
  134. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
  135. package/docs/src/component-checklist.js +81 -0
  136. package/docs/src/props.js +77 -0
  137. package/jest.config.js +13 -0
  138. package/lib/ActionList/index.js +23 -12
  139. package/lib/ActionList2/index.js +41 -23
  140. package/lib/AnchoredOverlay/index.js +12 -4
  141. package/lib/Autocomplete/index.js +14 -7
  142. package/lib/Button/index.js +70 -21
  143. package/lib/DropdownMenu/index.js +20 -6
  144. package/lib/DropdownStyles.js +26 -18
  145. package/lib/FilteredActionList/index.js +12 -4
  146. package/lib/NewButton/index.js +12 -5
  147. package/lib/NewButton/types.js +1 -2
  148. package/lib/Overlay.d.ts +5 -3
  149. package/lib/Pagination/index.js +12 -6
  150. package/lib/Portal/index.js +16 -5
  151. package/lib/SelectMenu/hooks/useKeyboardNav.js +96 -80
  152. package/lib/SelectMenu/index.js +14 -7
  153. package/lib/SelectPanel/index.js +12 -4
  154. package/lib/Token/index.js +30 -11
  155. package/lib/__tests__/ActionList.test.d.ts +1 -0
  156. package/lib/__tests__/ActionList.test.js +69 -0
  157. package/lib/__tests__/ActionList.types.test.d.ts +6 -0
  158. package/lib/__tests__/ActionList.types.test.js +69 -0
  159. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  160. package/lib/__tests__/ActionList2.test.js +53 -0
  161. package/lib/__tests__/ActionMenu.test.d.ts +1 -0
  162. package/lib/__tests__/ActionMenu.test.js +151 -0
  163. package/lib/__tests__/AnchoredOverlay.test.d.ts +1 -0
  164. package/lib/__tests__/AnchoredOverlay.test.js +162 -0
  165. package/lib/__tests__/Autocomplete.test.d.ts +1 -0
  166. package/lib/__tests__/Autocomplete.test.js +528 -0
  167. package/lib/__tests__/Avatar.test.d.ts +1 -0
  168. package/lib/__tests__/Avatar.test.js +67 -0
  169. package/lib/__tests__/AvatarStack.test.d.ts +1 -0
  170. package/lib/__tests__/AvatarStack.test.js +71 -0
  171. package/lib/__tests__/BorderBox.test.d.ts +1 -0
  172. package/lib/__tests__/BorderBox.test.js +58 -0
  173. package/lib/__tests__/Box.test.d.ts +1 -0
  174. package/lib/__tests__/Box.test.js +78 -0
  175. package/lib/__tests__/BranchName.test.d.ts +1 -0
  176. package/lib/__tests__/BranchName.test.js +36 -0
  177. package/lib/__tests__/Breadcrumbs.test.d.ts +1 -0
  178. package/lib/__tests__/Breadcrumbs.test.js +40 -0
  179. package/lib/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  180. package/lib/__tests__/Breadcrumbs.types.test.js +25 -0
  181. package/lib/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  182. package/lib/__tests__/BreadcrumbsItem.test.js +49 -0
  183. package/lib/__tests__/Button.test.d.ts +1 -0
  184. package/lib/__tests__/Button.test.js +147 -0
  185. package/lib/__tests__/Caret.test.d.ts +1 -0
  186. package/lib/__tests__/Caret.test.js +52 -0
  187. package/lib/__tests__/CircleBadge.test.d.ts +1 -0
  188. package/lib/__tests__/CircleBadge.test.js +83 -0
  189. package/lib/__tests__/CircleBadge.types.test.d.ts +3 -0
  190. package/lib/__tests__/CircleBadge.types.test.js +28 -0
  191. package/lib/__tests__/CircleOcticon.test.d.ts +1 -0
  192. package/lib/__tests__/CircleOcticon.test.js +71 -0
  193. package/lib/__tests__/ConfirmationDialog.test.d.ts +1 -0
  194. package/lib/__tests__/ConfirmationDialog.test.js +134 -0
  195. package/lib/__tests__/CounterLabel.test.d.ts +1 -0
  196. package/lib/__tests__/CounterLabel.test.js +58 -0
  197. package/lib/__tests__/CounterLabel.types.test.d.ts +3 -0
  198. package/lib/__tests__/CounterLabel.types.test.js +28 -0
  199. package/lib/__tests__/Details.test.d.ts +1 -0
  200. package/lib/__tests__/Details.test.js +117 -0
  201. package/lib/__tests__/Dialog.test.d.ts +1 -0
  202. package/lib/__tests__/Dialog.test.js +184 -0
  203. package/lib/__tests__/Dialog.types.test.d.ts +3 -0
  204. package/lib/__tests__/Dialog.types.test.js +28 -0
  205. package/lib/__tests__/Dialog2.types.test.d.ts +3 -0
  206. package/lib/__tests__/Dialog2.types.test.js +31 -0
  207. package/lib/__tests__/Dropdown.test.d.ts +1 -0
  208. package/lib/__tests__/Dropdown.test.js +63 -0
  209. package/lib/__tests__/Dropdown.types.test.d.ts +3 -0
  210. package/lib/__tests__/Dropdown.types.test.js +31 -0
  211. package/lib/__tests__/DropdownMenu.test.d.ts +1 -0
  212. package/lib/__tests__/DropdownMenu.test.js +150 -0
  213. package/lib/__tests__/FilterList.test.d.ts +1 -0
  214. package/lib/__tests__/FilterList.test.js +36 -0
  215. package/lib/__tests__/FilterList.types.test.d.ts +3 -0
  216. package/lib/__tests__/FilterList.types.test.js +27 -0
  217. package/lib/__tests__/FilterListItem.test.d.ts +1 -0
  218. package/lib/__tests__/FilterListItem.test.js +46 -0
  219. package/lib/__tests__/FilteredSearch.test.d.ts +1 -0
  220. package/lib/__tests__/FilteredSearch.test.js +36 -0
  221. package/lib/__tests__/FilteredSearch.types.test.d.ts +3 -0
  222. package/lib/__tests__/FilteredSearch.types.test.js +28 -0
  223. package/lib/__tests__/Flash.test.d.ts +1 -0
  224. package/lib/__tests__/Flash.test.js +62 -0
  225. package/lib/__tests__/Flash.types.test.d.ts +3 -0
  226. package/lib/__tests__/Flash.types.test.js +28 -0
  227. package/lib/__tests__/Flex.test.d.ts +1 -0
  228. package/lib/__tests__/Flex.test.js +74 -0
  229. package/lib/__tests__/FormGroup.test.d.ts +1 -0
  230. package/lib/__tests__/FormGroup.test.js +54 -0
  231. package/lib/__tests__/FormGroup.types.test.d.ts +3 -0
  232. package/lib/__tests__/FormGroup.types.test.js +28 -0
  233. package/lib/__tests__/Grid.test.d.ts +1 -0
  234. package/lib/__tests__/Grid.test.js +104 -0
  235. package/lib/__tests__/Header.test.d.ts +1 -0
  236. package/lib/__tests__/Header.test.js +58 -0
  237. package/lib/__tests__/Header.types.test.d.ts +3 -0
  238. package/lib/__tests__/Header.types.test.js +29 -0
  239. package/lib/__tests__/Heading.test.d.ts +1 -0
  240. package/lib/__tests__/Heading.test.js +109 -0
  241. package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
  242. package/lib/__tests__/KeyPaths.types.test.js +10 -0
  243. package/lib/__tests__/Label.test.d.ts +1 -0
  244. package/lib/__tests__/Label.test.js +46 -0
  245. package/lib/__tests__/Label.types.test.d.ts +3 -0
  246. package/lib/__tests__/Label.types.test.js +28 -0
  247. package/lib/__tests__/LabelGroup.test.d.ts +1 -0
  248. package/lib/__tests__/LabelGroup.test.js +38 -0
  249. package/lib/__tests__/LabelGroup.types.test.d.ts +3 -0
  250. package/lib/__tests__/LabelGroup.types.test.js +28 -0
  251. package/lib/__tests__/Link.test.d.ts +1 -0
  252. package/lib/__tests__/Link.test.js +76 -0
  253. package/lib/__tests__/Link.types.test.d.ts +3 -0
  254. package/lib/__tests__/Link.types.test.js +28 -0
  255. package/lib/__tests__/Merge.types.test.d.ts +30 -0
  256. package/lib/__tests__/Merge.types.test.js +27 -0
  257. package/lib/__tests__/NewButton.test.d.ts +1 -0
  258. package/lib/__tests__/NewButton.test.js +95 -0
  259. package/lib/__tests__/Overlay.test.d.ts +1 -0
  260. package/lib/__tests__/Overlay.test.js +145 -0
  261. package/lib/__tests__/Overlay.types.test.d.ts +6 -0
  262. package/lib/__tests__/Overlay.types.test.js +73 -0
  263. package/lib/__tests__/Pagehead.test.d.ts +1 -0
  264. package/lib/__tests__/Pagehead.test.js +37 -0
  265. package/lib/__tests__/Pagehead.types.test.d.ts +3 -0
  266. package/lib/__tests__/Pagehead.types.test.js +28 -0
  267. package/lib/__tests__/Pagination/Pagination.test.d.ts +1 -0
  268. package/lib/__tests__/Pagination/Pagination.test.js +47 -0
  269. package/lib/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  270. package/lib/__tests__/Pagination/PaginationModel.test.js +186 -0
  271. package/lib/__tests__/Pagination.types.test.d.ts +3 -0
  272. package/lib/__tests__/Pagination.types.test.js +33 -0
  273. package/lib/__tests__/PointerBox.test.d.ts +1 -0
  274. package/lib/__tests__/PointerBox.test.js +46 -0
  275. package/lib/__tests__/Popover.test.d.ts +1 -0
  276. package/lib/__tests__/Popover.test.js +66 -0
  277. package/lib/__tests__/Popover.types.test.d.ts +3 -0
  278. package/lib/__tests__/Popover.types.test.js +27 -0
  279. package/lib/__tests__/Portal.test.d.ts +1 -0
  280. package/lib/__tests__/Portal.test.js +124 -0
  281. package/lib/__tests__/Position.test.d.ts +1 -0
  282. package/lib/__tests__/Position.test.js +143 -0
  283. package/lib/__tests__/ProgressBar.test.d.ts +1 -0
  284. package/lib/__tests__/ProgressBar.test.js +68 -0
  285. package/lib/__tests__/SelectMenu.test.d.ts +1 -0
  286. package/lib/__tests__/SelectMenu.test.js +155 -0
  287. package/lib/__tests__/SelectMenu.types.test.d.ts +3 -0
  288. package/lib/__tests__/SelectMenu.types.test.js +47 -0
  289. package/lib/__tests__/SelectPanel.test.d.ts +1 -0
  290. package/lib/__tests__/SelectPanel.test.js +80 -0
  291. package/lib/__tests__/SelectPanel.types.test.d.ts +3 -0
  292. package/lib/__tests__/SelectPanel.types.test.js +44 -0
  293. package/lib/__tests__/SideNav.test.d.ts +1 -0
  294. package/lib/__tests__/SideNav.test.js +71 -0
  295. package/lib/__tests__/SideNav.types.test.d.ts +3 -0
  296. package/lib/__tests__/SideNav.types.test.js +28 -0
  297. package/lib/__tests__/Spinner.test.d.ts +1 -0
  298. package/lib/__tests__/Spinner.test.js +53 -0
  299. package/lib/__tests__/StateLabel.test.d.ts +1 -0
  300. package/lib/__tests__/StateLabel.test.js +71 -0
  301. package/lib/__tests__/StateLabel.types.test.d.ts +3 -0
  302. package/lib/__tests__/StateLabel.types.test.js +28 -0
  303. package/lib/__tests__/StyledOcticon.test.d.ts +1 -0
  304. package/lib/__tests__/StyledOcticon.test.js +40 -0
  305. package/lib/__tests__/StyledOcticon.types.test.d.ts +3 -0
  306. package/lib/__tests__/StyledOcticon.types.test.js +32 -0
  307. package/lib/__tests__/SubNav.test.d.ts +1 -0
  308. package/lib/__tests__/SubNav.test.js +62 -0
  309. package/lib/__tests__/SubNav.types.test.d.ts +3 -0
  310. package/lib/__tests__/SubNav.types.test.js +27 -0
  311. package/lib/__tests__/SubNavLink.test.d.ts +1 -0
  312. package/lib/__tests__/SubNavLink.test.js +49 -0
  313. package/lib/__tests__/TabNav.test.d.ts +1 -0
  314. package/lib/__tests__/TabNav.test.js +49 -0
  315. package/lib/__tests__/TabNav.types.test.d.ts +3 -0
  316. package/lib/__tests__/TabNav.types.test.js +25 -0
  317. package/lib/__tests__/Text.test.d.ts +1 -0
  318. package/lib/__tests__/Text.test.js +105 -0
  319. package/lib/__tests__/TextInput.test.d.ts +1 -0
  320. package/lib/__tests__/TextInput.test.js +78 -0
  321. package/lib/__tests__/TextInputWithTokens.test.d.ts +1 -0
  322. package/lib/__tests__/TextInputWithTokens.test.js +572 -0
  323. package/lib/__tests__/ThemeProvider.test.d.ts +1 -0
  324. package/lib/__tests__/ThemeProvider.test.js +444 -0
  325. package/lib/__tests__/Timeline.test.d.ts +1 -0
  326. package/lib/__tests__/Timeline.test.js +75 -0
  327. package/lib/__tests__/Timeline.types.test.d.ts +3 -0
  328. package/lib/__tests__/Timeline.types.test.js +31 -0
  329. package/lib/__tests__/Token.test.d.ts +1 -0
  330. package/lib/__tests__/Token.test.js +180 -0
  331. package/lib/__tests__/Tooltip.test.d.ts +1 -0
  332. package/lib/__tests__/Tooltip.test.js +69 -0
  333. package/lib/__tests__/Tooltip.types.test.d.ts +3 -0
  334. package/lib/__tests__/Tooltip.types.test.js +28 -0
  335. package/lib/__tests__/Truncate.test.d.ts +1 -0
  336. package/lib/__tests__/Truncate.test.js +63 -0
  337. package/lib/__tests__/Truncate.types.test.d.ts +3 -0
  338. package/lib/__tests__/Truncate.types.test.js +31 -0
  339. package/lib/__tests__/UnderlineNav.test.d.ts +1 -0
  340. package/lib/__tests__/UnderlineNav.test.js +72 -0
  341. package/lib/__tests__/UnderlineNav.types.test.d.ts +3 -0
  342. package/lib/__tests__/UnderlineNav.types.test.js +25 -0
  343. package/lib/__tests__/UnderlineNavLink.test.d.ts +1 -0
  344. package/lib/__tests__/UnderlineNavLink.test.js +51 -0
  345. package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  346. package/lib/__tests__/behaviors/anchoredPosition.test.js +390 -0
  347. package/lib/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  348. package/lib/__tests__/behaviors/focusTrap.test.js +234 -0
  349. package/lib/__tests__/behaviors/focusZone.test.d.ts +1 -0
  350. package/lib/__tests__/behaviors/focusZone.test.js +570 -0
  351. package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  352. package/lib/__tests__/behaviors/iterateFocusableElements.test.js +55 -0
  353. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  354. package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +226 -0
  355. package/lib/__tests__/filterObject.test.d.ts +1 -0
  356. package/lib/__tests__/filterObject.test.js +30 -0
  357. package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  358. package/lib/__tests__/hooks/useAnchoredPosition.test.js +54 -0
  359. package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  360. package/lib/__tests__/hooks/useOnEscapePress.test.js +32 -0
  361. package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  362. package/lib/__tests__/hooks/useOnOutsideClick.test.js +87 -0
  363. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  364. package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +60 -0
  365. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  366. package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +45 -0
  367. package/lib/__tests__/theme.test.d.ts +1 -0
  368. package/lib/__tests__/theme.test.js +36 -0
  369. package/lib/__tests__/themeGet.test.d.ts +1 -0
  370. package/lib/__tests__/themeGet.test.js +25 -0
  371. package/lib/__tests__/useSafeTimeout.test.d.ts +1 -0
  372. package/lib/__tests__/useSafeTimeout.test.js +45 -0
  373. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  374. package/lib/__tests__/utils/createSlots.test.js +75 -0
  375. package/lib/behaviors/anchoredPosition.js +234 -205
  376. package/lib/behaviors/focusTrap.js +157 -121
  377. package/lib/behaviors/focusZone.js +509 -434
  378. package/lib/behaviors/scrollIntoViewingArea.js +35 -18
  379. package/lib/constants.js +43 -39
  380. package/lib/drafts.js +30 -20
  381. package/lib/hooks/index.js +60 -16
  382. package/lib/hooks/useAnchoredPosition.js +40 -32
  383. package/lib/hooks/useCombinedRefs.js +36 -32
  384. package/lib/hooks/useDialog.js +96 -72
  385. package/lib/hooks/useFocusTrap.js +60 -43
  386. package/lib/hooks/useFocusZone.js +50 -54
  387. package/lib/hooks/useOnEscapePress.js +36 -25
  388. package/lib/hooks/useOpenAndCloseFocus.js +34 -22
  389. package/lib/hooks/useProvidedRefOrCreate.js +14 -10
  390. package/lib/hooks/useProvidedStateOrCreate.js +16 -13
  391. package/lib/hooks/useRenderForcingRef.js +17 -13
  392. package/lib/hooks/useResizeObserver.js +18 -15
  393. package/lib/hooks/useSafeTimeout.js +30 -22
  394. package/lib/hooks/useScrollFlash.js +23 -16
  395. package/lib/index.js +644 -163
  396. package/lib/polyfills/eventListenerSignal.js +45 -37
  397. package/lib/stories/ActionList.stories.js +454 -0
  398. package/lib/stories/ActionList2.stories.js +909 -0
  399. package/lib/stories/ActionMenu.stories.js +348 -0
  400. package/lib/stories/AnchoredOverlay.stories.js +127 -0
  401. package/lib/stories/Autocomplete.stories.js +619 -0
  402. package/lib/stories/AvatarStack.stories.js +49 -0
  403. package/lib/stories/Button.stories.js +125 -0
  404. package/lib/stories/ConfirmationDialog.stories.js +119 -0
  405. package/lib/stories/Dialog.stories.js +269 -0
  406. package/lib/stories/DropdownMenu.stories.js +122 -0
  407. package/lib/stories/IssueLabelToken.stories.js +165 -0
  408. package/lib/stories/NewButton.stories.js +230 -0
  409. package/lib/stories/Overlay.stories.js +204 -0
  410. package/lib/stories/Portal.stories.js +104 -0
  411. package/lib/stories/ProfileToken.stories.js +162 -0
  412. package/lib/stories/SelectPanel.stories.js +399 -0
  413. package/lib/stories/TextInput.stories.js +144 -0
  414. package/lib/stories/TextInputWithTokens.stories.js +252 -0
  415. package/lib/stories/ThemeProvider.stories.js +102 -0
  416. package/lib/stories/Token.stories.js +176 -0
  417. package/lib/stories/useAnchoredPosition.stories.js +351 -0
  418. package/lib/stories/useFocusTrap.stories.js +360 -0
  419. package/lib/stories/useFocusZone.stories.js +607 -0
  420. package/lib/sx.js +22 -10
  421. package/lib/theme-preval.js +3169 -64
  422. package/lib/theme.js +12 -3
  423. package/lib/utils/iterateFocusableElements.js +85 -63
  424. package/lib/utils/testing.d.ts +1 -1
  425. package/lib/utils/theme.js +47 -33
  426. package/lib/utils/types/AriaRole.js +1 -2
  427. package/lib/utils/types/ComponentProps.js +1 -2
  428. package/lib/utils/types/Flatten.js +1 -2
  429. package/lib/utils/types/KeyPaths.js +1 -2
  430. package/lib/utils/types/MandateProps.js +1 -16
  431. package/lib/utils/types/Merge.js +1 -2
  432. package/lib/utils/types/index.js +69 -16
  433. package/lib/utils/uniqueId.js +8 -5
  434. package/lib/utils/use-force-update.js +14 -8
  435. package/lib/utils/useIsomorphicLayoutEffect.js +11 -8
  436. package/lib/utils/userAgent.js +12 -8
  437. package/lib-esm/Overlay.d.ts +5 -3
  438. package/lib-esm/__tests__/ActionList.test.d.ts +1 -0
  439. package/lib-esm/__tests__/ActionList.test.js +57 -0
  440. package/lib-esm/__tests__/ActionList.types.test.d.ts +6 -0
  441. package/lib-esm/__tests__/ActionList.types.test.js +45 -0
  442. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  443. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  444. package/lib-esm/__tests__/ActionMenu.test.d.ts +1 -0
  445. package/lib-esm/__tests__/ActionMenu.test.js +139 -0
  446. package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +1 -0
  447. package/lib-esm/__tests__/AnchoredOverlay.test.js +136 -0
  448. package/lib-esm/__tests__/Autocomplete.test.d.ts +1 -0
  449. package/lib-esm/__tests__/Autocomplete.test.js +494 -0
  450. package/lib-esm/__tests__/Avatar.test.d.ts +1 -0
  451. package/lib-esm/__tests__/Avatar.test.js +56 -0
  452. package/lib-esm/__tests__/AvatarStack.test.d.ts +1 -0
  453. package/lib-esm/__tests__/AvatarStack.test.js +58 -0
  454. package/lib-esm/__tests__/BorderBox.test.d.ts +1 -0
  455. package/lib-esm/__tests__/BorderBox.test.js +47 -0
  456. package/lib-esm/__tests__/Box.test.d.ts +1 -0
  457. package/lib-esm/__tests__/Box.test.js +67 -0
  458. package/lib-esm/__tests__/BranchName.test.d.ts +1 -0
  459. package/lib-esm/__tests__/BranchName.test.js +26 -0
  460. package/lib-esm/__tests__/Breadcrumbs.test.d.ts +1 -0
  461. package/lib-esm/__tests__/Breadcrumbs.test.js +30 -0
  462. package/lib-esm/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  463. package/lib-esm/__tests__/Breadcrumbs.types.test.js +12 -0
  464. package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +1 -0
  465. package/lib-esm/__tests__/BreadcrumbsItem.test.js +39 -0
  466. package/lib-esm/__tests__/Button.test.d.ts +1 -0
  467. package/lib-esm/__tests__/Button.test.js +137 -0
  468. package/lib-esm/__tests__/Caret.test.d.ts +1 -0
  469. package/lib-esm/__tests__/Caret.test.js +42 -0
  470. package/lib-esm/__tests__/CircleBadge.test.d.ts +1 -0
  471. package/lib-esm/__tests__/CircleBadge.test.js +70 -0
  472. package/lib-esm/__tests__/CircleBadge.types.test.d.ts +3 -0
  473. package/lib-esm/__tests__/CircleBadge.types.test.js +13 -0
  474. package/lib-esm/__tests__/CircleOcticon.test.d.ts +1 -0
  475. package/lib-esm/__tests__/CircleOcticon.test.js +59 -0
  476. package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +1 -0
  477. package/lib-esm/__tests__/ConfirmationDialog.test.js +113 -0
  478. package/lib-esm/__tests__/CounterLabel.test.d.ts +1 -0
  479. package/lib-esm/__tests__/CounterLabel.test.js +47 -0
  480. package/lib-esm/__tests__/CounterLabel.types.test.d.ts +3 -0
  481. package/lib-esm/__tests__/CounterLabel.types.test.js +13 -0
  482. package/lib-esm/__tests__/Details.test.d.ts +1 -0
  483. package/lib-esm/__tests__/Details.test.js +107 -0
  484. package/lib-esm/__tests__/Dialog.test.d.ts +1 -0
  485. package/lib-esm/__tests__/Dialog.test.js +171 -0
  486. package/lib-esm/__tests__/Dialog.types.test.d.ts +3 -0
  487. package/lib-esm/__tests__/Dialog.types.test.js +13 -0
  488. package/lib-esm/__tests__/Dialog2.types.test.d.ts +3 -0
  489. package/lib-esm/__tests__/Dialog2.types.test.js +16 -0
  490. package/lib-esm/__tests__/Dropdown.test.d.ts +1 -0
  491. package/lib-esm/__tests__/Dropdown.test.js +53 -0
  492. package/lib-esm/__tests__/Dropdown.types.test.d.ts +3 -0
  493. package/lib-esm/__tests__/Dropdown.types.test.js +17 -0
  494. package/lib-esm/__tests__/DropdownMenu.test.d.ts +1 -0
  495. package/lib-esm/__tests__/DropdownMenu.test.js +137 -0
  496. package/lib-esm/__tests__/FilterList.test.d.ts +1 -0
  497. package/lib-esm/__tests__/FilterList.test.js +26 -0
  498. package/lib-esm/__tests__/FilterList.types.test.d.ts +3 -0
  499. package/lib-esm/__tests__/FilterList.types.test.js +13 -0
  500. package/lib-esm/__tests__/FilterListItem.test.d.ts +1 -0
  501. package/lib-esm/__tests__/FilterListItem.test.js +36 -0
  502. package/lib-esm/__tests__/FilteredSearch.test.d.ts +1 -0
  503. package/lib-esm/__tests__/FilteredSearch.test.js +26 -0
  504. package/lib-esm/__tests__/FilteredSearch.types.test.d.ts +3 -0
  505. package/lib-esm/__tests__/FilteredSearch.types.test.js +13 -0
  506. package/lib-esm/__tests__/Flash.test.d.ts +1 -0
  507. package/lib-esm/__tests__/Flash.test.js +51 -0
  508. package/lib-esm/__tests__/Flash.types.test.d.ts +3 -0
  509. package/lib-esm/__tests__/Flash.types.test.js +13 -0
  510. package/lib-esm/__tests__/Flex.test.d.ts +1 -0
  511. package/lib-esm/__tests__/Flex.test.js +64 -0
  512. package/lib-esm/__tests__/FormGroup.test.d.ts +1 -0
  513. package/lib-esm/__tests__/FormGroup.test.js +44 -0
  514. package/lib-esm/__tests__/FormGroup.types.test.d.ts +3 -0
  515. package/lib-esm/__tests__/FormGroup.types.test.js +13 -0
  516. package/lib-esm/__tests__/Grid.test.d.ts +1 -0
  517. package/lib-esm/__tests__/Grid.test.js +94 -0
  518. package/lib-esm/__tests__/Header.test.d.ts +1 -0
  519. package/lib-esm/__tests__/Header.test.js +48 -0
  520. package/lib-esm/__tests__/Header.types.test.d.ts +3 -0
  521. package/lib-esm/__tests__/Header.types.test.js +15 -0
  522. package/lib-esm/__tests__/Heading.test.d.ts +1 -0
  523. package/lib-esm/__tests__/Heading.test.js +99 -0
  524. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
  525. package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
  526. package/lib-esm/__tests__/Label.test.d.ts +1 -0
  527. package/lib-esm/__tests__/Label.test.js +36 -0
  528. package/lib-esm/__tests__/Label.types.test.d.ts +3 -0
  529. package/lib-esm/__tests__/Label.types.test.js +13 -0
  530. package/lib-esm/__tests__/LabelGroup.test.d.ts +1 -0
  531. package/lib-esm/__tests__/LabelGroup.test.js +26 -0
  532. package/lib-esm/__tests__/LabelGroup.types.test.d.ts +3 -0
  533. package/lib-esm/__tests__/LabelGroup.types.test.js +13 -0
  534. package/lib-esm/__tests__/Link.test.d.ts +1 -0
  535. package/lib-esm/__tests__/Link.test.js +66 -0
  536. package/lib-esm/__tests__/Link.types.test.d.ts +3 -0
  537. package/lib-esm/__tests__/Link.types.test.js +13 -0
  538. package/lib-esm/__tests__/Merge.types.test.d.ts +30 -0
  539. package/lib-esm/__tests__/Merge.types.test.js +14 -0
  540. package/lib-esm/__tests__/NewButton.test.d.ts +1 -0
  541. package/lib-esm/__tests__/NewButton.test.js +84 -0
  542. package/lib-esm/__tests__/Overlay.test.d.ts +1 -0
  543. package/lib-esm/__tests__/Overlay.test.js +123 -0
  544. package/lib-esm/__tests__/Overlay.types.test.d.ts +6 -0
  545. package/lib-esm/__tests__/Overlay.types.test.js +49 -0
  546. package/lib-esm/__tests__/Pagehead.test.d.ts +1 -0
  547. package/lib-esm/__tests__/Pagehead.test.js +26 -0
  548. package/lib-esm/__tests__/Pagehead.types.test.d.ts +3 -0
  549. package/lib-esm/__tests__/Pagehead.types.test.js +13 -0
  550. package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +1 -0
  551. package/lib-esm/__tests__/Pagination/Pagination.test.js +35 -0
  552. package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
  553. package/lib-esm/__tests__/Pagination/PaginationModel.test.js +182 -0
  554. package/lib-esm/__tests__/Pagination.types.test.d.ts +3 -0
  555. package/lib-esm/__tests__/Pagination.types.test.js +18 -0
  556. package/lib-esm/__tests__/PointerBox.test.d.ts +1 -0
  557. package/lib-esm/__tests__/PointerBox.test.js +36 -0
  558. package/lib-esm/__tests__/Popover.test.d.ts +1 -0
  559. package/lib-esm/__tests__/Popover.test.js +53 -0
  560. package/lib-esm/__tests__/Popover.types.test.d.ts +3 -0
  561. package/lib-esm/__tests__/Popover.types.test.js +13 -0
  562. package/lib-esm/__tests__/Portal.test.d.ts +1 -0
  563. package/lib-esm/__tests__/Portal.test.js +104 -0
  564. package/lib-esm/__tests__/Position.test.d.ts +1 -0
  565. package/lib-esm/__tests__/Position.test.js +133 -0
  566. package/lib-esm/__tests__/ProgressBar.test.d.ts +1 -0
  567. package/lib-esm/__tests__/ProgressBar.test.js +58 -0
  568. package/lib-esm/__tests__/SelectMenu.test.d.ts +1 -0
  569. package/lib-esm/__tests__/SelectMenu.test.js +145 -0
  570. package/lib-esm/__tests__/SelectMenu.types.test.d.ts +3 -0
  571. package/lib-esm/__tests__/SelectMenu.types.test.js +33 -0
  572. package/lib-esm/__tests__/SelectPanel.test.d.ts +1 -0
  573. package/lib-esm/__tests__/SelectPanel.test.js +65 -0
  574. package/lib-esm/__tests__/SelectPanel.types.test.d.ts +3 -0
  575. package/lib-esm/__tests__/SelectPanel.types.test.js +29 -0
  576. package/lib-esm/__tests__/SideNav.test.d.ts +1 -0
  577. package/lib-esm/__tests__/SideNav.test.js +60 -0
  578. package/lib-esm/__tests__/SideNav.types.test.d.ts +3 -0
  579. package/lib-esm/__tests__/SideNav.types.test.js +13 -0
  580. package/lib-esm/__tests__/Spinner.test.d.ts +1 -0
  581. package/lib-esm/__tests__/Spinner.test.js +43 -0
  582. package/lib-esm/__tests__/StateLabel.test.d.ts +1 -0
  583. package/lib-esm/__tests__/StateLabel.test.js +61 -0
  584. package/lib-esm/__tests__/StateLabel.types.test.d.ts +3 -0
  585. package/lib-esm/__tests__/StateLabel.types.test.js +13 -0
  586. package/lib-esm/__tests__/StyledOcticon.test.d.ts +1 -0
  587. package/lib-esm/__tests__/StyledOcticon.test.js +29 -0
  588. package/lib-esm/__tests__/StyledOcticon.types.test.d.ts +3 -0
  589. package/lib-esm/__tests__/StyledOcticon.types.test.js +16 -0
  590. package/lib-esm/__tests__/SubNav.test.d.ts +1 -0
  591. package/lib-esm/__tests__/SubNav.test.js +50 -0
  592. package/lib-esm/__tests__/SubNav.types.test.d.ts +3 -0
  593. package/lib-esm/__tests__/SubNav.types.test.js +14 -0
  594. package/lib-esm/__tests__/SubNavLink.test.d.ts +1 -0
  595. package/lib-esm/__tests__/SubNavLink.test.js +39 -0
  596. package/lib-esm/__tests__/TabNav.test.d.ts +1 -0
  597. package/lib-esm/__tests__/TabNav.test.js +39 -0
  598. package/lib-esm/__tests__/TabNav.types.test.d.ts +3 -0
  599. package/lib-esm/__tests__/TabNav.types.test.js +12 -0
  600. package/lib-esm/__tests__/Text.test.d.ts +1 -0
  601. package/lib-esm/__tests__/Text.test.js +93 -0
  602. package/lib-esm/__tests__/TextInput.test.d.ts +1 -0
  603. package/lib-esm/__tests__/TextInput.test.js +68 -0
  604. package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +1 -0
  605. package/lib-esm/__tests__/TextInputWithTokens.test.js +511 -0
  606. package/lib-esm/__tests__/ThemeProvider.test.d.ts +1 -0
  607. package/lib-esm/__tests__/ThemeProvider.test.js +408 -0
  608. package/lib-esm/__tests__/Timeline.test.d.ts +1 -0
  609. package/lib-esm/__tests__/Timeline.test.js +65 -0
  610. package/lib-esm/__tests__/Timeline.types.test.d.ts +3 -0
  611. package/lib-esm/__tests__/Timeline.types.test.js +18 -0
  612. package/lib-esm/__tests__/Token.test.d.ts +1 -0
  613. package/lib-esm/__tests__/Token.test.js +166 -0
  614. package/lib-esm/__tests__/Tooltip.test.d.ts +1 -0
  615. package/lib-esm/__tests__/Tooltip.test.js +59 -0
  616. package/lib-esm/__tests__/Tooltip.types.test.d.ts +3 -0
  617. package/lib-esm/__tests__/Tooltip.types.test.js +13 -0
  618. package/lib-esm/__tests__/Truncate.test.d.ts +1 -0
  619. package/lib-esm/__tests__/Truncate.test.js +53 -0
  620. package/lib-esm/__tests__/Truncate.types.test.d.ts +3 -0
  621. package/lib-esm/__tests__/Truncate.types.test.js +16 -0
  622. package/lib-esm/__tests__/UnderlineNav.test.d.ts +1 -0
  623. package/lib-esm/__tests__/UnderlineNav.test.js +60 -0
  624. package/lib-esm/__tests__/UnderlineNav.types.test.d.ts +3 -0
  625. package/lib-esm/__tests__/UnderlineNav.types.test.js +12 -0
  626. package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +1 -0
  627. package/lib-esm/__tests__/UnderlineNavLink.test.js +41 -0
  628. package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
  629. package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +388 -0
  630. package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +1 -0
  631. package/lib-esm/__tests__/behaviors/focusTrap.test.js +227 -0
  632. package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +1 -0
  633. package/lib-esm/__tests__/behaviors/focusZone.test.js +487 -0
  634. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
  635. package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +48 -0
  636. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
  637. package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +224 -0
  638. package/lib-esm/__tests__/filterObject.test.d.ts +1 -0
  639. package/lib-esm/__tests__/filterObject.test.js +27 -0
  640. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
  641. package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +46 -0
  642. package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
  643. package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +23 -0
  644. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
  645. package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +68 -0
  646. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
  647. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +52 -0
  648. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
  649. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +36 -0
  650. package/lib-esm/__tests__/theme.test.d.ts +1 -0
  651. package/lib-esm/__tests__/theme.test.js +33 -0
  652. package/lib-esm/__tests__/themeGet.test.d.ts +1 -0
  653. package/lib-esm/__tests__/themeGet.test.js +22 -0
  654. package/lib-esm/__tests__/useSafeTimeout.test.d.ts +1 -0
  655. package/lib-esm/__tests__/useSafeTimeout.test.js +39 -0
  656. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  657. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  658. package/lib-esm/stories/ActionList.stories.js +395 -0
  659. package/lib-esm/stories/ActionList2.stories.js +797 -0
  660. package/lib-esm/stories/ActionMenu.stories.js +303 -0
  661. package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
  662. package/lib-esm/stories/Autocomplete.stories.js +560 -0
  663. package/lib-esm/stories/AvatarStack.stories.js +32 -0
  664. package/lib-esm/stories/Button.stories.js +86 -0
  665. package/lib-esm/stories/ConfirmationDialog.stories.js +94 -0
  666. package/lib-esm/stories/Dialog.stories.js +244 -0
  667. package/lib-esm/stories/DropdownMenu.stories.js +94 -0
  668. package/lib-esm/stories/IssueLabelToken.stories.js +139 -0
  669. package/lib-esm/stories/NewButton.stories.js +178 -0
  670. package/lib-esm/stories/Overlay.stories.js +173 -0
  671. package/lib-esm/stories/Portal.stories.js +68 -0
  672. package/lib-esm/stories/ProfileToken.stories.js +136 -0
  673. package/lib-esm/stories/SelectPanel.stories.js +334 -0
  674. package/lib-esm/stories/TextInput.stories.js +117 -0
  675. package/lib-esm/stories/TextInputWithTokens.stories.js +210 -0
  676. package/lib-esm/stories/ThemeProvider.stories.js +83 -0
  677. package/lib-esm/stories/Token.stories.js +146 -0
  678. package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
  679. package/lib-esm/stories/useFocusTrap.stories.js +313 -0
  680. package/lib-esm/stories/useFocusZone.stories.js +562 -0
  681. package/lib-esm/theme-preval.js +446 -0
  682. package/lib-esm/utils/testing.d.ts +1 -1
  683. package/migrating.md +250 -0
  684. package/now.json +17 -0
  685. package/package-lock.json +66509 -0
  686. package/package.json +4 -5
  687. package/rollup.config.js +36 -0
  688. package/script/build +21 -0
  689. package/script/build-storybook +10 -0
  690. package/script/setup +12 -0
  691. package/src/ActionList/Divider.tsx +25 -0
  692. package/src/ActionList/Group.tsx +45 -0
  693. package/src/ActionList/Header.tsx +74 -0
  694. package/src/ActionList/Item.tsx +480 -0
  695. package/src/ActionList/List.tsx +258 -0
  696. package/src/ActionList/index.ts +21 -0
  697. package/src/ActionList2/Description.tsx +52 -0
  698. package/src/ActionList2/Divider.tsx +24 -0
  699. package/src/ActionList2/Group.tsx +103 -0
  700. package/src/ActionList2/Header.tsx +58 -0
  701. package/src/ActionList2/Item.tsx +246 -0
  702. package/src/ActionList2/LinkItem.tsx +49 -0
  703. package/src/ActionList2/List.tsx +55 -0
  704. package/src/ActionList2/Selection.tsx +60 -0
  705. package/src/ActionList2/Visuals.tsx +76 -0
  706. package/src/ActionList2/index.ts +39 -0
  707. package/src/ActionMenu.tsx +106 -0
  708. package/src/AnchoredOverlay/AnchoredOverlay.tsx +191 -0
  709. package/src/AnchoredOverlay/index.ts +2 -0
  710. package/src/Autocomplete/Autocomplete.tsx +103 -0
  711. package/src/Autocomplete/AutocompleteContext.tsx +19 -0
  712. package/src/Autocomplete/AutocompleteInput.tsx +179 -0
  713. package/src/Autocomplete/AutocompleteMenu.tsx +341 -0
  714. package/src/Autocomplete/AutocompleteOverlay.tsx +68 -0
  715. package/src/Autocomplete/index.ts +2 -0
  716. package/src/Avatar.tsx +46 -0
  717. package/src/AvatarPair.tsx +35 -0
  718. package/{lib/AvatarStack.jsx → src/AvatarStack.tsx} +49 -41
  719. package/src/BaseStyles.tsx +53 -0
  720. package/src/BorderBox.tsx +18 -0
  721. package/src/Box.tsx +54 -0
  722. package/src/BranchName.tsx +19 -0
  723. package/src/Breadcrumbs.tsx +101 -0
  724. package/src/Button/Button.tsx +39 -0
  725. package/src/Button/ButtonBase.tsx +39 -0
  726. package/src/Button/ButtonClose.tsx +36 -0
  727. package/src/Button/ButtonDanger.tsx +42 -0
  728. package/src/Button/ButtonGroup.tsx +55 -0
  729. package/src/Button/ButtonInvisible.tsx +31 -0
  730. package/src/Button/ButtonOutline.tsx +42 -0
  731. package/src/Button/ButtonPrimary.tsx +40 -0
  732. package/{lib/Button/ButtonStyles.jsx → src/Button/ButtonStyles.tsx} +7 -8
  733. package/src/Button/ButtonTableList.tsx +45 -0
  734. package/src/Button/index.ts +16 -0
  735. package/src/Caret.tsx +133 -0
  736. package/src/CircleBadge.tsx +53 -0
  737. package/src/CircleOcticon.tsx +37 -0
  738. package/src/CounterLabel.tsx +50 -0
  739. package/src/Details.tsx +23 -0
  740. package/src/Dialog/ConfirmationDialog.tsx +184 -0
  741. package/src/Dialog/Dialog.tsx +444 -0
  742. package/src/Dialog.tsx +145 -0
  743. package/src/Dropdown.tsx +154 -0
  744. package/src/DropdownMenu/DropdownButton.tsx +15 -0
  745. package/src/DropdownMenu/DropdownMenu.tsx +115 -0
  746. package/src/DropdownMenu/index.ts +4 -0
  747. package/src/DropdownStyles.ts +128 -0
  748. package/src/FilterList.tsx +75 -0
  749. package/src/FilteredActionList/FilteredActionList.tsx +142 -0
  750. package/src/FilteredActionList/index.ts +2 -0
  751. package/src/FilteredSearch.tsx +27 -0
  752. package/src/Flash.tsx +75 -0
  753. package/src/Flex.tsx +15 -0
  754. package/src/FormGroup.tsx +24 -0
  755. package/src/Grid.tsx +15 -0
  756. package/src/Header.tsx +74 -0
  757. package/src/Heading.tsx +21 -0
  758. package/src/Label.tsx +72 -0
  759. package/src/LabelGroup.tsx +17 -0
  760. package/src/Link.tsx +42 -0
  761. package/src/NewButton/button-counter.tsx +15 -0
  762. package/src/NewButton/button.tsx +283 -0
  763. package/src/NewButton/index.ts +10 -0
  764. package/src/NewButton/types.ts +36 -0
  765. package/src/Overlay.tsx +203 -0
  766. package/src/Pagehead.tsx +16 -0
  767. package/src/Pagination/Pagination.tsx +212 -0
  768. package/src/Pagination/index.ts +4 -0
  769. package/src/Pagination/model.tsx +187 -0
  770. package/src/PointerBox.tsx +31 -0
  771. package/{lib/Popover.jsx → src/Popover.tsx} +71 -48
  772. package/src/Portal/Portal.tsx +97 -0
  773. package/src/Portal/index.ts +5 -0
  774. package/src/Position.tsx +63 -0
  775. package/src/ProgressBar.tsx +52 -0
  776. package/src/SelectMenu/SelectMenu.tsx +123 -0
  777. package/src/SelectMenu/SelectMenuContext.tsx +9 -0
  778. package/src/SelectMenu/SelectMenuDivider.tsx +24 -0
  779. package/src/SelectMenu/SelectMenuFilter.tsx +50 -0
  780. package/src/SelectMenu/SelectMenuFooter.tsx +27 -0
  781. package/src/SelectMenu/SelectMenuHeader.tsx +48 -0
  782. package/src/SelectMenu/SelectMenuItem.tsx +136 -0
  783. package/src/SelectMenu/SelectMenuList.tsx +41 -0
  784. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +25 -0
  785. package/src/SelectMenu/SelectMenuModal.tsx +119 -0
  786. package/src/SelectMenu/SelectMenuTab.tsx +87 -0
  787. package/src/SelectMenu/SelectMenuTabPanel.tsx +29 -0
  788. package/src/SelectMenu/SelectMenuTabs.tsx +43 -0
  789. package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
  790. package/src/SelectMenu/index.ts +15 -0
  791. package/src/SelectPanel/SelectPanel.tsx +173 -0
  792. package/src/SelectPanel/index.ts +2 -0
  793. package/src/SideNav.tsx +191 -0
  794. package/src/Spinner.tsx +59 -0
  795. package/src/StateLabel.tsx +112 -0
  796. package/src/StyledOcticon.tsx +22 -0
  797. package/src/SubNav.tsx +124 -0
  798. package/src/TabNav.tsx +73 -0
  799. package/src/Text.tsx +13 -0
  800. package/src/TextInput.tsx +68 -0
  801. package/src/TextInputWithTokens.tsx +351 -0
  802. package/src/ThemeProvider.tsx +176 -0
  803. package/src/Timeline.tsx +140 -0
  804. package/src/Token/AvatarToken.tsx +54 -0
  805. package/src/Token/IssueLabelToken.tsx +150 -0
  806. package/src/Token/Token.tsx +126 -0
  807. package/src/Token/TokenBase.tsx +129 -0
  808. package/src/Token/_RemoveTokenButton.tsx +111 -0
  809. package/{lib/Token/_TokenTextContainer.jsx → src/Token/_TokenTextContainer.tsx} +7 -9
  810. package/src/Token/index.ts +3 -0
  811. package/{lib/Tooltip.jsx → src/Tooltip.tsx} +50 -33
  812. package/src/Truncate.tsx +31 -0
  813. package/src/UnderlineNav.tsx +107 -0
  814. package/src/_TextInputWrapper.tsx +113 -0
  815. package/src/_UnstyledTextInput.tsx +19 -0
  816. package/src/__tests__/.eslintrc.json +11 -0
  817. package/src/__tests__/ActionList.test.tsx +53 -0
  818. package/src/__tests__/ActionList.types.test.tsx +51 -0
  819. package/src/__tests__/ActionList2.test.tsx +47 -0
  820. package/src/__tests__/ActionMenu.test.tsx +136 -0
  821. package/src/__tests__/AnchoredOverlay.test.tsx +150 -0
  822. package/src/__tests__/Autocomplete.test.tsx +444 -0
  823. package/src/__tests__/Avatar.test.tsx +44 -0
  824. package/src/__tests__/AvatarStack.test.tsx +48 -0
  825. package/src/__tests__/BorderBox.test.tsx +43 -0
  826. package/src/__tests__/Box.test.tsx +42 -0
  827. package/src/__tests__/BranchName.test.tsx +26 -0
  828. package/src/__tests__/Breadcrumbs.test.tsx +27 -0
  829. package/src/__tests__/Breadcrumbs.types.test.tsx +22 -0
  830. package/src/__tests__/BreadcrumbsItem.test.tsx +31 -0
  831. package/src/__tests__/Button.test.tsx +128 -0
  832. package/src/__tests__/Caret.test.tsx +36 -0
  833. package/src/__tests__/CircleBadge.test.tsx +66 -0
  834. package/src/__tests__/CircleBadge.types.test.tsx +11 -0
  835. package/src/__tests__/CircleOcticon.test.tsx +50 -0
  836. package/src/__tests__/ConfirmationDialog.test.tsx +120 -0
  837. package/src/__tests__/CounterLabel.test.tsx +50 -0
  838. package/src/__tests__/CounterLabel.types.test.tsx +11 -0
  839. package/src/__tests__/Details.test.tsx +115 -0
  840. package/src/__tests__/Dialog.test.tsx +155 -0
  841. package/src/__tests__/Dialog.types.test.tsx +11 -0
  842. package/src/__tests__/Dialog2.types.test.tsx +11 -0
  843. package/src/__tests__/Dropdown.test.tsx +53 -0
  844. package/src/__tests__/Dropdown.types.test.tsx +21 -0
  845. package/src/__tests__/DropdownMenu.test.tsx +136 -0
  846. package/src/__tests__/FilterList.test.tsx +26 -0
  847. package/src/__tests__/FilterList.types.test.tsx +17 -0
  848. package/src/__tests__/FilterListItem.test.tsx +31 -0
  849. package/src/__tests__/FilteredSearch.test.tsx +26 -0
  850. package/src/__tests__/FilteredSearch.types.test.tsx +11 -0
  851. package/src/__tests__/Flash.test.tsx +45 -0
  852. package/src/__tests__/Flash.types.test.tsx +11 -0
  853. package/src/__tests__/Flex.test.tsx +58 -0
  854. package/src/__tests__/FormGroup.test.tsx +38 -0
  855. package/src/__tests__/FormGroup.types.test.tsx +11 -0
  856. package/src/__tests__/Grid.test.tsx +82 -0
  857. package/src/__tests__/Header.test.tsx +49 -0
  858. package/src/__tests__/Header.types.test.tsx +19 -0
  859. package/src/__tests__/Heading.test.tsx +91 -0
  860. package/src/__tests__/KeyPaths.types.test.ts +14 -0
  861. package/src/__tests__/Label.test.tsx +34 -0
  862. package/src/__tests__/Label.types.test.tsx +11 -0
  863. package/src/__tests__/LabelGroup.test.tsx +30 -0
  864. package/src/__tests__/LabelGroup.types.test.tsx +11 -0
  865. package/src/__tests__/Link.test.tsx +47 -0
  866. package/src/__tests__/Link.types.test.tsx +11 -0
  867. package/src/__tests__/Merge.types.test.ts +39 -0
  868. package/src/__tests__/NewButton.test.tsx +70 -0
  869. package/src/__tests__/Overlay.test.tsx +103 -0
  870. package/src/__tests__/Overlay.types.test.tsx +33 -0
  871. package/src/__tests__/Pagehead.test.tsx +23 -0
  872. package/src/__tests__/Pagehead.types.test.tsx +11 -0
  873. package/src/__tests__/Pagination/Pagination.test.tsx +30 -0
  874. package/src/__tests__/Pagination/PaginationModel.test.tsx +133 -0
  875. package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +184 -0
  876. package/src/__tests__/Pagination.types.test.tsx +11 -0
  877. package/src/__tests__/PointerBox.test.tsx +34 -0
  878. package/src/__tests__/Popover.test.tsx +68 -0
  879. package/src/__tests__/Popover.types.test.tsx +17 -0
  880. package/src/__tests__/Portal.test.tsx +103 -0
  881. package/src/__tests__/Position.test.tsx +117 -0
  882. package/src/__tests__/ProgressBar.test.tsx +40 -0
  883. package/src/__tests__/SelectMenu.test.tsx +142 -0
  884. package/src/__tests__/SelectMenu.types.test.tsx +37 -0
  885. package/src/__tests__/SelectPanel.test.tsx +63 -0
  886. package/src/__tests__/SelectPanel.types.test.tsx +31 -0
  887. package/src/__tests__/SideNav.test.tsx +62 -0
  888. package/src/__tests__/SideNav.types.test.tsx +11 -0
  889. package/src/__tests__/Spinner.test.tsx +42 -0
  890. package/src/__tests__/StateLabel.test.tsx +48 -0
  891. package/src/__tests__/StateLabel.types.test.tsx +11 -0
  892. package/src/__tests__/StyledOcticon.test.tsx +26 -0
  893. package/src/__tests__/StyledOcticon.types.test.tsx +12 -0
  894. package/src/__tests__/SubNav.test.tsx +50 -0
  895. package/src/__tests__/SubNav.types.test.tsx +25 -0
  896. package/src/__tests__/SubNavLink.test.tsx +31 -0
  897. package/src/__tests__/TabNav.test.tsx +32 -0
  898. package/src/__tests__/TabNav.types.test.tsx +22 -0
  899. package/src/__tests__/Text.test.tsx +78 -0
  900. package/src/__tests__/TextInput.test.tsx +49 -0
  901. package/src/__tests__/TextInputWithTokens.test.tsx +422 -0
  902. package/src/__tests__/ThemeProvider.test.tsx +441 -0
  903. package/src/__tests__/Timeline.test.tsx +58 -0
  904. package/src/__tests__/Timeline.types.test.tsx +31 -0
  905. package/src/__tests__/Token.test.tsx +118 -0
  906. package/src/__tests__/Tooltip.test.tsx +52 -0
  907. package/src/__tests__/Tooltip.types.test.tsx +11 -0
  908. package/src/__tests__/Truncate.test.tsx +43 -0
  909. package/src/__tests__/Truncate.types.test.tsx +11 -0
  910. package/src/__tests__/UnderlineNav.test.tsx +58 -0
  911. package/src/__tests__/UnderlineNav.types.test.tsx +22 -0
  912. package/src/__tests__/UnderlineNavLink.test.tsx +31 -0
  913. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +223 -0
  914. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  915. package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +80 -0
  916. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +232 -0
  917. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +3888 -0
  918. package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +19 -0
  919. package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +377 -0
  920. package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +14 -0
  921. package/src/__tests__/__snapshots__/Box.test.tsx.snap +201 -0
  922. package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +17 -0
  923. package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +29 -0
  924. package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +79 -0
  925. package/src/__tests__/__snapshots__/Button.test.tsx.snap +840 -0
  926. package/src/__tests__/__snapshots__/Caret.test.tsx.snap +373 -0
  927. package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +142 -0
  928. package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +65 -0
  929. package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +89 -0
  930. package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +22 -0
  931. package/src/__tests__/__snapshots__/Details.test.tsx.snap +15 -0
  932. package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +201 -0
  933. package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +249 -0
  934. package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +107 -0
  935. package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +13 -0
  936. package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +80 -0
  937. package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +32 -0
  938. package/src/__tests__/__snapshots__/Flash.test.tsx.snap +32 -0
  939. package/src/__tests__/__snapshots__/Flex.test.tsx.snap +130 -0
  940. package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +25 -0
  941. package/src/__tests__/__snapshots__/Grid.test.tsx.snap +178 -0
  942. package/src/__tests__/__snapshots__/Header.test.tsx.snap +79 -0
  943. package/src/__tests__/__snapshots__/Heading.test.tsx.snap +13 -0
  944. package/src/__tests__/__snapshots__/Label.test.tsx.snap +73 -0
  945. package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +15 -0
  946. package/src/__tests__/__snapshots__/Link.test.tsx.snap +212 -0
  947. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +305 -0
  948. package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +15 -0
  949. package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +174 -0
  950. package/src/__tests__/__snapshots__/Popover.test.tsx.snap +4687 -0
  951. package/src/__tests__/__snapshots__/Position.test.tsx.snap +44 -0
  952. package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +53 -0
  953. package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +473 -0
  954. package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +124 -0
  955. package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +143 -0
  956. package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +33 -0
  957. package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +395 -0
  958. package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +26 -0
  959. package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +44 -0
  960. package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +199 -0
  961. package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +58 -0
  962. package/src/__tests__/__snapshots__/Text.test.tsx.snap +7 -0
  963. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +446 -0
  964. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +6045 -0
  965. package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +15 -0
  966. package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +159 -0
  967. package/src/__tests__/__snapshots__/Token.test.tsx.snap +3811 -0
  968. package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +227 -0
  969. package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +17 -0
  970. package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +59 -0
  971. package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +130 -0
  972. package/src/__tests__/behaviors/anchoredPosition.test.ts +295 -0
  973. package/src/__tests__/behaviors/focusTrap.test.tsx +236 -0
  974. package/src/__tests__/behaviors/focusZone.test.tsx +549 -0
  975. package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +61 -0
  976. package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +195 -0
  977. package/src/__tests__/filterObject.test.ts +54 -0
  978. package/src/__tests__/hooks/useAnchoredPosition.test.tsx +31 -0
  979. package/src/__tests__/hooks/useOnEscapePress.test.tsx +16 -0
  980. package/src/__tests__/hooks/useOnOutsideClick.test.tsx +48 -0
  981. package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +48 -0
  982. package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +39 -0
  983. package/src/__tests__/theme.test.ts +41 -0
  984. package/src/__tests__/themeGet.test.ts +15 -0
  985. package/src/__tests__/useSafeTimeout.test.tsx +36 -0
  986. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  987. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  988. package/src/behaviors/anchoredPosition.ts +442 -0
  989. package/src/behaviors/focusTrap.ts +184 -0
  990. package/src/behaviors/focusZone.ts +713 -0
  991. package/src/behaviors/scrollIntoViewingArea.ts +27 -0
  992. package/src/constants.ts +62 -0
  993. package/src/drafts.ts +10 -0
  994. package/src/hooks/index.ts +11 -0
  995. package/src/hooks/useAnchoredPosition.ts +54 -0
  996. package/src/hooks/useCombinedRefs.ts +40 -0
  997. package/src/hooks/useDetails.tsx +54 -0
  998. package/src/hooks/useDialog.ts +121 -0
  999. package/src/hooks/useFocusTrap.ts +80 -0
  1000. package/src/hooks/useFocusZone.ts +64 -0
  1001. package/src/hooks/useOnEscapePress.ts +63 -0
  1002. package/src/hooks/useOnOutsideClick.tsx +82 -0
  1003. package/src/hooks/useOpenAndCloseFocus.ts +32 -0
  1004. package/src/hooks/useOverlay.tsx +34 -0
  1005. package/src/hooks/useProvidedRefOrCreate.ts +14 -0
  1006. package/src/hooks/useProvidedStateOrCreate.ts +27 -0
  1007. package/src/hooks/useRenderForcingRef.ts +22 -0
  1008. package/src/hooks/useResizeObserver.ts +11 -0
  1009. package/src/hooks/useSafeTimeout.ts +38 -0
  1010. package/src/hooks/useScrollFlash.ts +21 -0
  1011. package/src/index.ts +172 -0
  1012. package/src/polyfills/eventListenerSignal.ts +66 -0
  1013. package/src/stories/ActionList.stories.tsx +436 -0
  1014. package/src/stories/ActionList2.stories.tsx +1291 -0
  1015. package/src/stories/ActionMenu.stories.tsx +331 -0
  1016. package/src/stories/AnchoredOverlay.stories.tsx +117 -0
  1017. package/src/stories/Autocomplete.stories.tsx +655 -0
  1018. package/src/stories/AvatarStack.stories.tsx +37 -0
  1019. package/src/stories/Button.stories.tsx +92 -0
  1020. package/src/stories/ConfirmationDialog.stories.tsx +105 -0
  1021. package/src/stories/Dialog.stories.tsx +240 -0
  1022. package/src/stories/DropdownMenu.stories.tsx +84 -0
  1023. package/src/stories/IssueLabelToken.stories.tsx +138 -0
  1024. package/src/stories/NewButton.stories.tsx +201 -0
  1025. package/src/stories/Overlay.stories.tsx +213 -0
  1026. package/src/stories/Portal.stories.tsx +109 -0
  1027. package/src/stories/ProfileToken.stories.tsx +129 -0
  1028. package/src/stories/SelectPanel.stories.tsx +353 -0
  1029. package/src/stories/TextInput.stories.tsx +113 -0
  1030. package/src/stories/TextInputWithTokens.stories.tsx +155 -0
  1031. package/src/stories/ThemeProvider.stories.tsx +104 -0
  1032. package/src/stories/Token.stories.tsx +137 -0
  1033. package/src/stories/useAnchoredPosition.stories.tsx +332 -0
  1034. package/src/stories/useFocusTrap.stories.tsx +400 -0
  1035. package/src/stories/useFocusZone.stories.tsx +663 -0
  1036. package/src/sx.ts +24 -0
  1037. package/src/theme-preval.js +80 -0
  1038. package/src/theme.ts +89 -0
  1039. package/src/utils/create-slots.tsx +96 -0
  1040. package/src/utils/deprecate.tsx +73 -0
  1041. package/src/utils/isNumeric.tsx +4 -0
  1042. package/src/utils/iterateFocusableElements.ts +121 -0
  1043. package/src/utils/ssr.tsx +1 -0
  1044. package/src/utils/test-deprecations.tsx +19 -0
  1045. package/{lib/utils/test-helpers.jsx → src/utils/test-helpers.tsx} +5 -6
  1046. package/src/utils/test-matchers.tsx +109 -0
  1047. package/src/utils/testing.tsx +242 -0
  1048. package/src/utils/theme.js +64 -0
  1049. package/src/utils/types/AriaRole.ts +71 -0
  1050. package/src/utils/types/ComponentProps.ts +13 -0
  1051. package/src/utils/types/Flatten.ts +4 -0
  1052. package/src/utils/types/KeyPaths.ts +10 -0
  1053. package/src/utils/types/MandateProps.ts +19 -0
  1054. package/src/utils/types/Merge.ts +20 -0
  1055. package/src/utils/types/index.ts +5 -0
  1056. package/src/utils/uniqueId.ts +6 -0
  1057. package/src/utils/use-force-update.ts +7 -0
  1058. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  1059. package/src/utils/userAgent.ts +7 -0
  1060. package/stats.html +3279 -0
  1061. package/tsconfig.build.json +7 -0
  1062. package/tsconfig.json +20 -0
  1063. package/lib/ActionList/Divider.jsx +0 -29
  1064. package/lib/ActionList/Group.jsx +0 -23
  1065. package/lib/ActionList/Header.jsx +0 -66
  1066. package/lib/ActionList/Item.jsx +0 -288
  1067. package/lib/ActionList/List.jsx +0 -138
  1068. package/lib/ActionList2/Description.jsx +0 -29
  1069. package/lib/ActionList2/Divider.jsx +0 -22
  1070. package/lib/ActionList2/Group.jsx +0 -54
  1071. package/lib/ActionList2/Header.jsx +0 -36
  1072. package/lib/ActionList2/Item.jsx +0 -174
  1073. package/lib/ActionList2/LinkItem.jsx +0 -28
  1074. package/lib/ActionList2/List.jsx +0 -41
  1075. package/lib/ActionList2/Selection.jsx +0 -50
  1076. package/lib/ActionList2/Visuals.jsx +0 -48
  1077. package/lib/ActionMenu.jsx +0 -73
  1078. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +0 -100
  1079. package/lib/Autocomplete/Autocomplete.jsx +0 -100
  1080. package/lib/Autocomplete/AutocompleteContext.jsx +0 -5
  1081. package/lib/Autocomplete/AutocompleteInput.jsx +0 -113
  1082. package/lib/Autocomplete/AutocompleteMenu.jsx +0 -190
  1083. package/lib/Autocomplete/AutocompleteOverlay.jsx +0 -55
  1084. package/lib/Avatar.jsx +0 -34
  1085. package/lib/AvatarPair.jsx +0 -29
  1086. package/lib/BaseStyles.jsx +0 -65
  1087. package/lib/BorderBox.jsx +0 -18
  1088. package/lib/Box.jsx +0 -10
  1089. package/lib/BranchName.jsx +0 -20
  1090. package/lib/Breadcrumbs.jsx +0 -71
  1091. package/lib/Button/Button.jsx +0 -40
  1092. package/lib/Button/ButtonBase.jsx +0 -33
  1093. package/lib/Button/ButtonClose.jsx +0 -53
  1094. package/lib/Button/ButtonDanger.jsx +0 -43
  1095. package/lib/Button/ButtonGroup.jsx +0 -55
  1096. package/lib/Button/ButtonInvisible.jsx +0 -32
  1097. package/lib/Button/ButtonOutline.jsx +0 -43
  1098. package/lib/Button/ButtonPrimary.jsx +0 -42
  1099. package/lib/Button/ButtonTableList.jsx +0 -46
  1100. package/lib/Caret.jsx +0 -93
  1101. package/lib/CircleBadge.jsx +0 -42
  1102. package/lib/CircleOcticon.jsx +0 -21
  1103. package/lib/CounterLabel.jsx +0 -43
  1104. package/lib/Details.jsx +0 -21
  1105. package/lib/Dialog/ConfirmationDialog.jsx +0 -146
  1106. package/lib/Dialog/Dialog.jsx +0 -279
  1107. package/lib/Dialog.jsx +0 -129
  1108. package/lib/Dropdown.jsx +0 -131
  1109. package/lib/DropdownMenu/DropdownButton.jsx +0 -14
  1110. package/lib/DropdownMenu/DropdownMenu.jsx +0 -70
  1111. package/lib/FilterList.jsx +0 -59
  1112. package/lib/FilteredActionList/FilteredActionList.jsx +0 -100
  1113. package/lib/FilteredSearch.jsx +0 -28
  1114. package/lib/Flash.jsx +0 -69
  1115. package/lib/Flex.jsx +0 -15
  1116. package/lib/FormGroup.jsx +0 -22
  1117. package/lib/Grid.jsx +0 -15
  1118. package/lib/Header.jsx +0 -83
  1119. package/lib/Heading.jsx +0 -21
  1120. package/lib/Label.jsx +0 -82
  1121. package/lib/LabelGroup.jsx +0 -18
  1122. package/lib/Link.jsx +0 -36
  1123. package/lib/NewButton/button-counter.jsx +0 -14
  1124. package/lib/NewButton/button.jsx +0 -279
  1125. package/lib/Overlay.jsx +0 -154
  1126. package/lib/Pagehead.jsx +0 -17
  1127. package/lib/Pagination/Pagination.jsx +0 -161
  1128. package/lib/Pagination/model.jsx +0 -174
  1129. package/lib/PointerBox.jsx +0 -25
  1130. package/lib/Portal/Portal.jsx +0 -79
  1131. package/lib/Position.jsx +0 -46
  1132. package/lib/ProgressBar.jsx +0 -39
  1133. package/lib/SelectMenu/SelectMenu.jsx +0 -112
  1134. package/lib/SelectMenu/SelectMenuContext.jsx +0 -5
  1135. package/lib/SelectMenu/SelectMenuDivider.jsx +0 -42
  1136. package/lib/SelectMenu/SelectMenuFilter.jsx +0 -58
  1137. package/lib/SelectMenu/SelectMenuFooter.jsx +0 -45
  1138. package/lib/SelectMenu/SelectMenuHeader.jsx +0 -42
  1139. package/lib/SelectMenu/SelectMenuItem.jsx +0 -142
  1140. package/lib/SelectMenu/SelectMenuList.jsx +0 -59
  1141. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +0 -22
  1142. package/lib/SelectMenu/SelectMenuModal.jsx +0 -118
  1143. package/lib/SelectMenu/SelectMenuTab.jsx +0 -92
  1144. package/lib/SelectMenu/SelectMenuTabPanel.jsx +0 -42
  1145. package/lib/SelectMenu/SelectMenuTabs.jsx +0 -57
  1146. package/lib/SelectPanel/SelectPanel.jsx +0 -105
  1147. package/lib/SideNav.jsx +0 -173
  1148. package/lib/Spinner.jsx +0 -35
  1149. package/lib/StateLabel.jsx +0 -93
  1150. package/lib/StyledOcticon.jsx +0 -18
  1151. package/lib/SubNav.jsx +0 -101
  1152. package/lib/TabNav.jsx +0 -58
  1153. package/lib/Text.jsx +0 -14
  1154. package/lib/TextInput.jsx +0 -23
  1155. package/lib/TextInputWithTokens.jsx +0 -218
  1156. package/lib/ThemeProvider.jsx +0 -130
  1157. package/lib/Timeline.jsx +0 -123
  1158. package/lib/Token/AvatarToken.jsx +0 -54
  1159. package/lib/Token/IssueLabelToken.jsx +0 -125
  1160. package/lib/Token/Token.jsx +0 -103
  1161. package/lib/Token/TokenBase.jsx +0 -88
  1162. package/lib/Token/_RemoveTokenButton.jsx +0 -108
  1163. package/lib/Truncate.jsx +0 -24
  1164. package/lib/UnderlineNav.jsx +0 -88
  1165. package/lib/_TextInputWrapper.jsx +0 -120
  1166. package/lib/_UnstyledTextInput.jsx +0 -22
  1167. package/lib/hooks/useDetails.jsx +0 -39
  1168. package/lib/hooks/useOnOutsideClick.jsx +0 -61
  1169. package/lib/hooks/useOverlay.jsx +0 -15
  1170. package/lib/utils/create-slots.jsx +0 -65
  1171. package/lib/utils/deprecate.jsx +0 -59
  1172. package/lib/utils/isNumeric.jsx +0 -7
  1173. package/lib/utils/ssr.jsx +0 -6
  1174. package/lib/utils/test-deprecations.jsx +0 -20
  1175. package/lib/utils/test-matchers.jsx +0 -100
  1176. package/lib/utils/testing.jsx +0 -206
@@ -1,90 +1,100 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.focusZone = exports.hasActiveDescendantAttribute = exports.activeDescendantActivatedIndirectly = exports.activeDescendantActivatedDirectly = exports.isActiveDescendantAttribute = exports.FocusKeys = void 0;
4
- const iterateFocusableElements_1 = require("../utils/iterateFocusableElements");
5
- const eventListenerSignal_1 = require("../polyfills/eventListenerSignal");
6
- const userAgent_1 = require("../utils/userAgent");
7
- const uniqueId_1 = require("../utils/uniqueId");
8
- eventListenerSignal_1.polyfill();
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.focusZone = focusZone;
7
+ exports.hasActiveDescendantAttribute = exports.activeDescendantActivatedIndirectly = exports.activeDescendantActivatedDirectly = exports.isActiveDescendantAttribute = exports.FocusKeys = void 0;
8
+
9
+ var _iterateFocusableElements = require("../utils/iterateFocusableElements");
10
+
11
+ var _eventListenerSignal = require("../polyfills/eventListenerSignal");
12
+
13
+ var _userAgent = require("../utils/userAgent");
14
+
15
+ var _uniqueId = require("../utils/uniqueId");
16
+
17
+ (0, _eventListenerSignal.polyfill)();
9
18
  // eslint-disable-next-line no-shadow
10
- var FocusKeys;
19
+ let FocusKeys;
20
+ exports.FocusKeys = FocusKeys;
21
+
11
22
  (function (FocusKeys) {
12
- // Left and right arrow keys (previous and next, respectively)
13
- FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
14
- // Up and down arrow keys (previous and next, respectively)
15
- FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
16
- // The "J" and "K" keys (next and previous, respectively)
17
- FocusKeys[FocusKeys["JK"] = 4] = "JK";
18
- // The "H" and "L" keys (previous and next, respectively)
19
- FocusKeys[FocusKeys["HL"] = 8] = "HL";
20
- // The Home and End keys (previous and next, respectively, to end)
21
- FocusKeys[FocusKeys["HomeAndEnd"] = 16] = "HomeAndEnd";
22
- // The PgUp and PgDn keys (previous and next, respectively, to end)
23
- FocusKeys[FocusKeys["PageUpDown"] = 256] = "PageUpDown";
24
- // The "W" and "S" keys (previous and next, respectively)
25
- FocusKeys[FocusKeys["WS"] = 32] = "WS";
26
- // The "A" and "D" keys (previous and next, respectively)
27
- FocusKeys[FocusKeys["AD"] = 64] = "AD";
28
- // The Tab key (next)
29
- FocusKeys[FocusKeys["Tab"] = 128] = "Tab";
30
- FocusKeys[FocusKeys["ArrowAll"] = 3] = "ArrowAll";
31
- FocusKeys[FocusKeys["HJKL"] = 12] = "HJKL";
32
- FocusKeys[FocusKeys["WASD"] = 96] = "WASD";
33
- FocusKeys[FocusKeys["All"] = 511] = "All";
34
- })(FocusKeys = exports.FocusKeys || (exports.FocusKeys = {}));
23
+ FocusKeys[FocusKeys["ArrowHorizontal"] = 1] = "ArrowHorizontal";
24
+ FocusKeys[FocusKeys["ArrowVertical"] = 2] = "ArrowVertical";
25
+ FocusKeys[FocusKeys["JK"] = 4] = "JK";
26
+ FocusKeys[FocusKeys["HL"] = 8] = "HL";
27
+ FocusKeys[FocusKeys["HomeAndEnd"] = 16] = "HomeAndEnd";
28
+ FocusKeys[FocusKeys["PageUpDown"] = 256] = "PageUpDown";
29
+ FocusKeys[FocusKeys["WS"] = 32] = "WS";
30
+ FocusKeys[FocusKeys["AD"] = 64] = "AD";
31
+ FocusKeys[FocusKeys["Tab"] = 128] = "Tab";
32
+ FocusKeys[FocusKeys["ArrowAll"] = FocusKeys.ArrowHorizontal | FocusKeys.ArrowVertical] = "ArrowAll";
33
+ FocusKeys[FocusKeys["HJKL"] = FocusKeys.HL | FocusKeys.JK] = "HJKL";
34
+ FocusKeys[FocusKeys["WASD"] = FocusKeys.WS | FocusKeys.AD] = "WASD";
35
+ FocusKeys[FocusKeys["All"] = FocusKeys.ArrowAll | FocusKeys.HJKL | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown | FocusKeys.WASD | FocusKeys.Tab] = "All";
36
+ })(FocusKeys || (exports.FocusKeys = FocusKeys = {}));
37
+
35
38
  const KEY_TO_BIT = {
36
- ArrowLeft: FocusKeys.ArrowHorizontal,
37
- ArrowDown: FocusKeys.ArrowVertical,
38
- ArrowUp: FocusKeys.ArrowVertical,
39
- ArrowRight: FocusKeys.ArrowHorizontal,
40
- h: FocusKeys.HL,
41
- j: FocusKeys.JK,
42
- k: FocusKeys.JK,
43
- l: FocusKeys.HL,
44
- a: FocusKeys.AD,
45
- s: FocusKeys.WS,
46
- w: FocusKeys.WS,
47
- d: FocusKeys.AD,
48
- Tab: FocusKeys.Tab,
49
- Home: FocusKeys.HomeAndEnd,
50
- End: FocusKeys.HomeAndEnd,
51
- PageUp: FocusKeys.PageUpDown,
52
- PageDown: FocusKeys.PageUpDown
39
+ ArrowLeft: FocusKeys.ArrowHorizontal,
40
+ ArrowDown: FocusKeys.ArrowVertical,
41
+ ArrowUp: FocusKeys.ArrowVertical,
42
+ ArrowRight: FocusKeys.ArrowHorizontal,
43
+ h: FocusKeys.HL,
44
+ j: FocusKeys.JK,
45
+ k: FocusKeys.JK,
46
+ l: FocusKeys.HL,
47
+ a: FocusKeys.AD,
48
+ s: FocusKeys.WS,
49
+ w: FocusKeys.WS,
50
+ d: FocusKeys.AD,
51
+ Tab: FocusKeys.Tab,
52
+ Home: FocusKeys.HomeAndEnd,
53
+ End: FocusKeys.HomeAndEnd,
54
+ PageUp: FocusKeys.PageUpDown,
55
+ PageDown: FocusKeys.PageUpDown
53
56
  };
54
57
  const KEY_TO_DIRECTION = {
55
- ArrowLeft: 'previous',
56
- ArrowDown: 'next',
57
- ArrowUp: 'previous',
58
- ArrowRight: 'next',
59
- h: 'previous',
60
- j: 'next',
61
- k: 'previous',
62
- l: 'next',
63
- a: 'previous',
64
- s: 'next',
65
- w: 'previous',
66
- d: 'next',
67
- Tab: 'next',
68
- Home: 'start',
69
- End: 'end',
70
- PageUp: 'start',
71
- PageDown: 'end'
58
+ ArrowLeft: 'previous',
59
+ ArrowDown: 'next',
60
+ ArrowUp: 'previous',
61
+ ArrowRight: 'next',
62
+ h: 'previous',
63
+ j: 'next',
64
+ k: 'previous',
65
+ l: 'next',
66
+ a: 'previous',
67
+ s: 'next',
68
+ w: 'previous',
69
+ d: 'next',
70
+ Tab: 'next',
71
+ Home: 'start',
72
+ End: 'end',
73
+ PageUp: 'start',
74
+ PageDown: 'end'
72
75
  };
76
+ /**
77
+ * Options that control the behavior of the arrow focus behavior.
78
+ */
79
+
73
80
  function getDirection(keyboardEvent) {
74
- const direction = KEY_TO_DIRECTION[keyboardEvent.key];
75
- if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
76
- return 'previous';
77
- }
78
- const isMac = userAgent_1.isMacOS();
79
- if ((isMac && keyboardEvent.metaKey) || (!isMac && keyboardEvent.ctrlKey)) {
80
- if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
81
- return 'start';
82
- }
83
- else if (keyboardEvent.key === 'ArrowRight' || keyboardEvent.key === 'ArrowDown') {
84
- return 'end';
85
- }
81
+ const direction = KEY_TO_DIRECTION[keyboardEvent.key];
82
+
83
+ if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey) {
84
+ return 'previous';
85
+ }
86
+
87
+ const isMac = (0, _userAgent.isMacOS)();
88
+
89
+ if (isMac && keyboardEvent.metaKey || !isMac && keyboardEvent.ctrlKey) {
90
+ if (keyboardEvent.key === 'ArrowLeft' || keyboardEvent.key === 'ArrowUp') {
91
+ return 'start';
92
+ } else if (keyboardEvent.key === 'ArrowRight' || keyboardEvent.key === 'ArrowDown') {
93
+ return 'end';
86
94
  }
87
- return direction;
95
+ }
96
+
97
+ return direction;
88
98
  }
89
99
  /**
90
100
  * There are some situations where we do not want various keys to affect focus. This function
@@ -99,405 +109,470 @@ function getDirection(keyboardEvent) {
99
109
  * @param keyboardEvent
100
110
  * @param activeElement
101
111
  */
112
+
113
+
102
114
  function shouldIgnoreFocusHandling(keyboardEvent, activeElement) {
103
- const key = keyboardEvent.key;
104
- // Get the number of characters in `key`, accounting for double-wide UTF-16 chars. If keyLength
105
- // is 1, we can assume it's a "printable" character. Otherwise it's likely a control character.
106
- // One exception is the Tab key, which is technically printable, but browsers generally assign
107
- // its function to move focus rather than type a <TAB> character.
108
- const keyLength = [...key].length;
109
- const isTextInput = (activeElement instanceof HTMLInputElement && activeElement.type === 'text') ||
110
- activeElement instanceof HTMLTextAreaElement;
111
- // If we would normally type a character into an input, ignore
112
- // Also, Home and End keys should never affect focus when in a text input
113
- if (isTextInput && (keyLength === 1 || key === 'Home' || key === 'End')) {
114
- return true;
115
+ const key = keyboardEvent.key; // Get the number of characters in `key`, accounting for double-wide UTF-16 chars. If keyLength
116
+ // is 1, we can assume it's a "printable" character. Otherwise it's likely a control character.
117
+ // One exception is the Tab key, which is technically printable, but browsers generally assign
118
+ // its function to move focus rather than type a <TAB> character.
119
+
120
+ const keyLength = [...key].length;
121
+ const isTextInput = activeElement instanceof HTMLInputElement && activeElement.type === 'text' || activeElement instanceof HTMLTextAreaElement; // If we would normally type a character into an input, ignore
122
+ // Also, Home and End keys should never affect focus when in a text input
123
+
124
+ if (isTextInput && (keyLength === 1 || key === 'Home' || key === 'End')) {
125
+ return true;
126
+ } // Some situations we want to ignore with <select> elements
127
+
128
+
129
+ if (activeElement instanceof HTMLSelectElement) {
130
+ // Regular typeable characters change the selection, so ignore those
131
+ if (keyLength === 1) {
132
+ return true;
133
+ } // On macOS, bare ArrowDown opens the select, so ignore that
134
+
135
+
136
+ if (key === 'ArrowDown' && (0, _userAgent.isMacOS)() && !keyboardEvent.metaKey) {
137
+ return true;
138
+ } // On other platforms, Alt+ArrowDown opens the select, so ignore that
139
+
140
+
141
+ if (key === 'ArrowDown' && !(0, _userAgent.isMacOS)() && keyboardEvent.altKey) {
142
+ return true;
115
143
  }
116
- // Some situations we want to ignore with <select> elements
117
- if (activeElement instanceof HTMLSelectElement) {
118
- // Regular typeable characters change the selection, so ignore those
119
- if (keyLength === 1) {
120
- return true;
121
- }
122
- // On macOS, bare ArrowDown opens the select, so ignore that
123
- if (key === 'ArrowDown' && userAgent_1.isMacOS() && !keyboardEvent.metaKey) {
124
- return true;
125
- }
126
- // On other platforms, Alt+ArrowDown opens the select, so ignore that
127
- if (key === 'ArrowDown' && !userAgent_1.isMacOS() && keyboardEvent.altKey) {
128
- return true;
129
- }
144
+ } // Ignore page up and page down for textareas
145
+
146
+
147
+ if (activeElement instanceof HTMLTextAreaElement && (key === 'PageUp' || key === 'PageDown')) {
148
+ return true;
149
+ }
150
+
151
+ if (isTextInput) {
152
+ const textInput = activeElement;
153
+ const cursorAtStart = textInput.selectionStart === 0 && textInput.selectionEnd === 0;
154
+ const cursorAtEnd = textInput.selectionStart === textInput.value.length && textInput.selectionEnd === textInput.value.length; // When in a text area or text input, only move focus left/right if at beginning/end of the field
155
+
156
+ if (key === 'ArrowLeft' && !cursorAtStart) {
157
+ return true;
130
158
  }
131
- // Ignore page up and page down for textareas
132
- if (activeElement instanceof HTMLTextAreaElement && (key === 'PageUp' || key === 'PageDown')) {
159
+
160
+ if (key === 'ArrowRight' && !cursorAtEnd) {
161
+ return true;
162
+ } // When in a text area, only move focus up/down if at beginning/end of the field
163
+
164
+
165
+ if (textInput instanceof HTMLTextAreaElement) {
166
+ if (key === 'ArrowUp' && !cursorAtStart) {
133
167
  return true;
168
+ }
169
+
170
+ if (key === 'ArrowDown' && !cursorAtEnd) {
171
+ return true;
172
+ }
134
173
  }
135
- if (isTextInput) {
136
- const textInput = activeElement;
137
- const cursorAtStart = textInput.selectionStart === 0 && textInput.selectionEnd === 0;
138
- const cursorAtEnd = textInput.selectionStart === textInput.value.length && textInput.selectionEnd === textInput.value.length;
139
- // When in a text area or text input, only move focus left/right if at beginning/end of the field
140
- if (key === 'ArrowLeft' && !cursorAtStart) {
141
- return true;
142
- }
143
- if (key === 'ArrowRight' && !cursorAtEnd) {
144
- return true;
145
- }
146
- // When in a text area, only move focus up/down if at beginning/end of the field
147
- if (textInput instanceof HTMLTextAreaElement) {
148
- if (key === 'ArrowUp' && !cursorAtStart) {
149
- return true;
150
- }
151
- if (key === 'ArrowDown' && !cursorAtEnd) {
152
- return true;
153
- }
154
- }
155
- }
156
- return false;
174
+ }
175
+
176
+ return false;
157
177
  }
158
- exports.isActiveDescendantAttribute = 'data-is-active-descendant';
178
+
179
+ const isActiveDescendantAttribute = 'data-is-active-descendant';
159
180
  /**
160
181
  * A value of activated-directly for data-is-active-descendant indicates the descendant was activated
161
182
  * by a manual user interaction with intent to move active descendant. This usually translates to the
162
183
  * user pressing one of the bound keys (up/down arrow, etc) to move through the focus zone. This is
163
184
  * intended to be roughly equivalent to the :focus-visible pseudo-class
164
185
  **/
165
- exports.activeDescendantActivatedDirectly = 'activated-directly';
186
+
187
+ exports.isActiveDescendantAttribute = isActiveDescendantAttribute;
188
+ const activeDescendantActivatedDirectly = 'activated-directly';
166
189
  /**
167
190
  * A value of activated-indirectly for data-is-active-descendant indicates the descendant was activated
168
191
  * implicitly, and not by a direct key press. This includes focus zone being created from scratch, focusable
169
192
  * elements being added/removed, and mouseover events. This is intended to be roughly equivalent
170
193
  * to :focus:not(:focus-visible)
171
194
  **/
172
- exports.activeDescendantActivatedIndirectly = 'activated-indirectly';
173
- exports.hasActiveDescendantAttribute = 'data-has-active-descendant';
195
+
196
+ exports.activeDescendantActivatedDirectly = activeDescendantActivatedDirectly;
197
+ const activeDescendantActivatedIndirectly = 'activated-indirectly';
198
+ exports.activeDescendantActivatedIndirectly = activeDescendantActivatedIndirectly;
199
+ const hasActiveDescendantAttribute = 'data-has-active-descendant';
174
200
  /**
175
201
  * Sets up the arrow key focus behavior for all focusable elements in the given `container`.
176
202
  * @param container
177
203
  * @param settings
178
204
  * @returns
179
205
  */
206
+
207
+ exports.hasActiveDescendantAttribute = hasActiveDescendantAttribute;
208
+
180
209
  function focusZone(container, settings) {
181
- const focusableElements = [];
182
- const savedTabIndex = new WeakMap();
183
- const bindKeys = settings?.bindKeys ??
184
- (settings?.getNextFocusable ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
185
- const focusOutBehavior = settings?.focusOutBehavior ?? 'stop';
186
- const focusInStrategy = settings?.focusInStrategy ?? 'previous';
187
- const activeDescendantControl = settings?.activeDescendantControl;
188
- const activeDescendantCallback = settings?.onActiveDescendantChanged;
189
- let currentFocusedElement;
190
- function getFirstFocusableElement() {
191
- return focusableElements[0];
210
+ var _settings$bindKeys, _settings$focusOutBeh, _settings$focusInStra, _settings$abortSignal;
211
+
212
+ const focusableElements = [];
213
+ const savedTabIndex = new WeakMap();
214
+ const bindKeys = (_settings$bindKeys = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _settings$bindKeys !== void 0 ? _settings$bindKeys : (settings !== null && settings !== void 0 && settings.getNextFocusable ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
215
+ const focusOutBehavior = (_settings$focusOutBeh = settings === null || settings === void 0 ? void 0 : settings.focusOutBehavior) !== null && _settings$focusOutBeh !== void 0 ? _settings$focusOutBeh : 'stop';
216
+ const focusInStrategy = (_settings$focusInStra = settings === null || settings === void 0 ? void 0 : settings.focusInStrategy) !== null && _settings$focusInStra !== void 0 ? _settings$focusInStra : 'previous';
217
+ const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
218
+ const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
219
+ let currentFocusedElement;
220
+
221
+ function getFirstFocusableElement() {
222
+ return focusableElements[0];
223
+ }
224
+
225
+ function isActiveDescendantInputFocused() {
226
+ return document.activeElement === activeDescendantControl;
227
+ }
228
+
229
+ function updateFocusedElement(to, directlyActivated = false) {
230
+ const from = currentFocusedElement;
231
+ currentFocusedElement = to;
232
+
233
+ if (activeDescendantControl) {
234
+ if (to && isActiveDescendantInputFocused()) {
235
+ setActiveDescendant(from, to, directlyActivated);
236
+ } else {
237
+ clearActiveDescendant();
238
+ }
239
+
240
+ return;
192
241
  }
193
- function isActiveDescendantInputFocused() {
194
- return document.activeElement === activeDescendantControl;
242
+
243
+ if (from && from !== to && savedTabIndex.has(from)) {
244
+ from.setAttribute('tabindex', '-1');
195
245
  }
196
- function updateFocusedElement(to, directlyActivated = false) {
197
- const from = currentFocusedElement;
198
- currentFocusedElement = to;
199
- if (activeDescendantControl) {
200
- if (to && isActiveDescendantInputFocused()) {
201
- setActiveDescendant(from, to, directlyActivated);
202
- }
203
- else {
204
- clearActiveDescendant();
205
- }
206
- return;
207
- }
208
- if (from && from !== to && savedTabIndex.has(from)) {
209
- from.setAttribute('tabindex', '-1');
210
- }
211
- to?.setAttribute('tabindex', '0');
246
+
247
+ to === null || to === void 0 ? void 0 : to.setAttribute('tabindex', '0');
248
+ }
249
+
250
+ function setActiveDescendant(from, to, directlyActivated = false) {
251
+ if (!to.id) {
252
+ to.setAttribute('id', (0, _uniqueId.uniqueId)());
212
253
  }
213
- function setActiveDescendant(from, to, directlyActivated = false) {
214
- if (!to.id) {
215
- to.setAttribute('id', uniqueId_1.uniqueId());
216
- }
217
- if (from && from !== to) {
218
- from.removeAttribute(exports.isActiveDescendantAttribute);
219
- }
220
- if (!activeDescendantControl ||
221
- (!directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id)) {
222
- // prevent active descendant callback from being called repeatedly if the same element is activated (e.g. via mousemove)
223
- return;
224
- }
225
- activeDescendantControl.setAttribute('aria-activedescendant', to.id);
226
- container.setAttribute(exports.hasActiveDescendantAttribute, to.id);
227
- to.setAttribute(exports.isActiveDescendantAttribute, directlyActivated ? exports.activeDescendantActivatedDirectly : exports.activeDescendantActivatedIndirectly);
228
- activeDescendantCallback?.(to, from, directlyActivated);
254
+
255
+ if (from && from !== to) {
256
+ from.removeAttribute(isActiveDescendantAttribute);
229
257
  }
230
- function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
231
- if (focusInStrategy === 'first') {
232
- currentFocusedElement = undefined;
233
- }
234
- activeDescendantControl?.removeAttribute('aria-activedescendant');
235
- container.removeAttribute(exports.hasActiveDescendantAttribute);
236
- previouslyActiveElement?.removeAttribute(exports.isActiveDescendantAttribute);
237
- activeDescendantCallback?.(undefined, previouslyActiveElement, false);
258
+
259
+ if (!activeDescendantControl || !directlyActivated && activeDescendantControl.getAttribute('aria-activedescendant') === to.id) {
260
+ // prevent active descendant callback from being called repeatedly if the same element is activated (e.g. via mousemove)
261
+ return;
238
262
  }
239
- function beginFocusManagement(...elements) {
240
- const filteredElements = elements.filter(e => settings?.focusableElementFilter?.(e) ?? true);
241
- if (filteredElements.length === 0) {
242
- return;
243
- }
244
- // Insert all elements atomically. Assume that all passed elements are well-ordered.
245
- const insertIndex = focusableElements.findIndex(e => (e.compareDocumentPosition(filteredElements[0]) & Node.DOCUMENT_POSITION_PRECEDING) > 0);
246
- focusableElements.splice(insertIndex === -1 ? focusableElements.length : insertIndex, 0, ...filteredElements);
247
- for (const element of filteredElements) {
248
- // Set tabindex="-1" on all tabbable elements, but save the original
249
- // value in case we need to disable the behavior
250
- if (!savedTabIndex.has(element)) {
251
- savedTabIndex.set(element, element.getAttribute('tabindex'));
252
- }
253
- element.setAttribute('tabindex', '-1');
254
- }
255
- if (!currentFocusedElement) {
256
- updateFocusedElement(getFirstFocusableElement());
257
- }
263
+
264
+ activeDescendantControl.setAttribute('aria-activedescendant', to.id);
265
+ container.setAttribute(hasActiveDescendantAttribute, to.id);
266
+ to.setAttribute(isActiveDescendantAttribute, directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly);
267
+ activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(to, from, directlyActivated);
268
+ }
269
+
270
+ function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
271
+ if (focusInStrategy === 'first') {
272
+ currentFocusedElement = undefined;
258
273
  }
259
- function endFocusManagement(...elements) {
260
- for (const element of elements) {
261
- const focusableElementIndex = focusableElements.indexOf(element);
262
- if (focusableElementIndex >= 0) {
263
- focusableElements.splice(focusableElementIndex, 1);
264
- }
265
- const savedIndex = savedTabIndex.get(element);
266
- if (savedIndex !== undefined) {
267
- if (savedIndex === null) {
268
- element.removeAttribute('tabindex');
269
- }
270
- else {
271
- element.setAttribute('tabindex', savedIndex);
272
- }
273
- savedTabIndex.delete(element);
274
- }
275
- // If removing the last-focused element, move focus to the first element in the list.
276
- if (element === currentFocusedElement) {
277
- const nextElementToFocus = getFirstFocusableElement();
278
- updateFocusedElement(nextElementToFocus);
279
- }
274
+
275
+ activeDescendantControl === null || activeDescendantControl === void 0 ? void 0 : activeDescendantControl.removeAttribute('aria-activedescendant');
276
+ container.removeAttribute(hasActiveDescendantAttribute);
277
+ previouslyActiveElement === null || previouslyActiveElement === void 0 ? void 0 : previouslyActiveElement.removeAttribute(isActiveDescendantAttribute);
278
+ activeDescendantCallback === null || activeDescendantCallback === void 0 ? void 0 : activeDescendantCallback(undefined, previouslyActiveElement, false);
279
+ }
280
+
281
+ function beginFocusManagement(...elements) {
282
+ const filteredElements = elements.filter(e => {
283
+ var _settings$focusableEl, _settings$focusableEl2;
284
+
285
+ return (_settings$focusableEl = settings === null || settings === void 0 ? void 0 : (_settings$focusableEl2 = settings.focusableElementFilter) === null || _settings$focusableEl2 === void 0 ? void 0 : _settings$focusableEl2.call(settings, e)) !== null && _settings$focusableEl !== void 0 ? _settings$focusableEl : true;
286
+ });
287
+
288
+ if (filteredElements.length === 0) {
289
+ return;
290
+ } // Insert all elements atomically. Assume that all passed elements are well-ordered.
291
+
292
+
293
+ const insertIndex = focusableElements.findIndex(e => (e.compareDocumentPosition(filteredElements[0]) & Node.DOCUMENT_POSITION_PRECEDING) > 0);
294
+ focusableElements.splice(insertIndex === -1 ? focusableElements.length : insertIndex, 0, ...filteredElements);
295
+
296
+ for (const element of filteredElements) {
297
+ // Set tabindex="-1" on all tabbable elements, but save the original
298
+ // value in case we need to disable the behavior
299
+ if (!savedTabIndex.has(element)) {
300
+ savedTabIndex.set(element, element.getAttribute('tabindex'));
301
+ }
302
+
303
+ element.setAttribute('tabindex', '-1');
304
+ }
305
+
306
+ if (!currentFocusedElement) {
307
+ updateFocusedElement(getFirstFocusableElement());
308
+ }
309
+ }
310
+
311
+ function endFocusManagement(...elements) {
312
+ for (const element of elements) {
313
+ const focusableElementIndex = focusableElements.indexOf(element);
314
+
315
+ if (focusableElementIndex >= 0) {
316
+ focusableElements.splice(focusableElementIndex, 1);
317
+ }
318
+
319
+ const savedIndex = savedTabIndex.get(element);
320
+
321
+ if (savedIndex !== undefined) {
322
+ if (savedIndex === null) {
323
+ element.removeAttribute('tabindex');
324
+ } else {
325
+ element.setAttribute('tabindex', savedIndex);
280
326
  }
327
+
328
+ savedTabIndex.delete(element);
329
+ } // If removing the last-focused element, move focus to the first element in the list.
330
+
331
+
332
+ if (element === currentFocusedElement) {
333
+ const nextElementToFocus = getFirstFocusableElement();
334
+ updateFocusedElement(nextElementToFocus);
335
+ }
281
336
  }
282
- // Take all tabbable elements within container under management
283
- beginFocusManagement(...iterateFocusableElements_1.iterateFocusableElements(container));
284
- // Open the first tabbable element for tabbing
285
- updateFocusedElement(getFirstFocusableElement());
286
- // If the DOM structure of the container changes, make sure we keep our state up-to-date
287
- // with respect to the focusable elements cache and its order
288
- const observer = new MutationObserver(mutations => {
289
- // Perform all removals first, in case element order has simply changed
290
- for (const mutation of mutations) {
291
- for (const removedNode of mutation.removedNodes) {
292
- if (removedNode instanceof HTMLElement) {
293
- endFocusManagement(...iterateFocusableElements_1.iterateFocusableElements(removedNode));
294
- }
295
- }
337
+ } // Take all tabbable elements within container under management
338
+
339
+
340
+ beginFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(container)); // Open the first tabbable element for tabbing
341
+
342
+ updateFocusedElement(getFirstFocusableElement()); // If the DOM structure of the container changes, make sure we keep our state up-to-date
343
+ // with respect to the focusable elements cache and its order
344
+
345
+ const observer = new MutationObserver(mutations => {
346
+ // Perform all removals first, in case element order has simply changed
347
+ for (const mutation of mutations) {
348
+ for (const removedNode of mutation.removedNodes) {
349
+ if (removedNode instanceof HTMLElement) {
350
+ endFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(removedNode));
296
351
  }
297
- for (const mutation of mutations) {
298
- for (const addedNode of mutation.addedNodes) {
299
- if (addedNode instanceof HTMLElement) {
300
- beginFocusManagement(...iterateFocusableElements_1.iterateFocusableElements(addedNode));
301
- }
302
- }
352
+ }
353
+ }
354
+
355
+ for (const mutation of mutations) {
356
+ for (const addedNode of mutation.addedNodes) {
357
+ if (addedNode instanceof HTMLElement) {
358
+ beginFocusManagement(...(0, _iterateFocusableElements.iterateFocusableElements)(addedNode));
303
359
  }
360
+ }
361
+ }
362
+ });
363
+ observer.observe(container, {
364
+ subtree: true,
365
+ childList: true
366
+ });
367
+ const controller = new AbortController();
368
+ const signal = (_settings$abortSignal = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _settings$abortSignal !== void 0 ? _settings$abortSignal : controller.signal;
369
+ signal.addEventListener('abort', () => {
370
+ // Clean up any modifications
371
+ endFocusManagement(...focusableElements);
372
+ });
373
+ let elementIndexFocusedByClick = undefined;
374
+ container.addEventListener('mousedown', event => {
375
+ // Since focusin is only called when focus changes, we need to make sure the clicked
376
+ // element isn't already focused.
377
+ if (event.target instanceof HTMLElement && event.target !== document.activeElement) {
378
+ elementIndexFocusedByClick = focusableElements.indexOf(event.target);
379
+ }
380
+ }, {
381
+ signal
382
+ });
383
+
384
+ if (activeDescendantControl) {
385
+ container.addEventListener('focusin', event => {
386
+ if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
387
+ // Move focus to the activeDescendantControl if one of the descendants is focused
388
+ activeDescendantControl.focus();
389
+ updateFocusedElement(event.target);
390
+ }
304
391
  });
305
- observer.observe(container, {
306
- subtree: true,
307
- childList: true
392
+ container.addEventListener('mousemove', ({
393
+ target
394
+ }) => {
395
+ if (!(target instanceof Node)) {
396
+ return;
397
+ }
398
+
399
+ const focusableElement = focusableElements.find(element => element.contains(target));
400
+
401
+ if (focusableElement) {
402
+ updateFocusedElement(focusableElement);
403
+ }
404
+ }, {
405
+ signal,
406
+ capture: true
407
+ }); // Listeners specifically on the controlling element
408
+
409
+ activeDescendantControl.addEventListener('focusin', () => {
410
+ // Focus moved into the active descendant input. Activate current or first descendant.
411
+ if (!currentFocusedElement) {
412
+ updateFocusedElement(getFirstFocusableElement());
413
+ } else {
414
+ setActiveDescendant(undefined, currentFocusedElement);
415
+ }
308
416
  });
309
- const controller = new AbortController();
310
- const signal = settings?.abortSignal ?? controller.signal;
311
- signal.addEventListener('abort', () => {
312
- // Clean up any modifications
313
- endFocusManagement(...focusableElements);
417
+ activeDescendantControl.addEventListener('focusout', () => {
418
+ clearActiveDescendant();
314
419
  });
315
- let elementIndexFocusedByClick = undefined;
316
- container.addEventListener('mousedown', event => {
317
- // Since focusin is only called when focus changes, we need to make sure the clicked
318
- // element isn't already focused.
319
- if (event.target instanceof HTMLElement && event.target !== document.activeElement) {
320
- elementIndexFocusedByClick = focusableElements.indexOf(event.target);
321
- }
322
- }, { signal });
323
- if (activeDescendantControl) {
324
- container.addEventListener('focusin', event => {
325
- if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
326
- // Move focus to the activeDescendantControl if one of the descendants is focused
327
- activeDescendantControl.focus();
328
- updateFocusedElement(event.target);
329
- }
330
- });
331
- container.addEventListener('mousemove', ({ target }) => {
332
- if (!(target instanceof Node)) {
333
- return;
334
- }
335
- const focusableElement = focusableElements.find(element => element.contains(target));
336
- if (focusableElement) {
337
- updateFocusedElement(focusableElement);
420
+ } else {
421
+ // This is called whenever focus enters an element in the container
422
+ container.addEventListener('focusin', event => {
423
+ if (event.target instanceof HTMLElement) {
424
+ // If a click initiated the focus movement, we always want to set our internal state
425
+ // to reflect the clicked element as the currently focused one.
426
+ if (elementIndexFocusedByClick !== undefined) {
427
+ if (elementIndexFocusedByClick >= 0) {
428
+ if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
429
+ updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
338
430
  }
339
- }, { signal, capture: true });
340
- // Listeners specifically on the controlling element
341
- activeDescendantControl.addEventListener('focusin', () => {
342
- // Focus moved into the active descendant input. Activate current or first descendant.
343
- if (!currentFocusedElement) {
344
- updateFocusedElement(getFirstFocusableElement());
431
+ }
432
+
433
+ elementIndexFocusedByClick = undefined;
434
+ } else {
435
+ // Set tab indexes and internal state based on the focus handling strategy
436
+ if (focusInStrategy === 'previous') {
437
+ updateFocusedElement(event.target);
438
+ } else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
439
+ if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
440
+ // Regardless of the previously focused element, if we're coming from outside the
441
+ // container, put focus onto the first encountered element (from above, it's The
442
+ // first element of the container; from below, it's the last). If the
443
+ // focusInStrategy is set to "first", lastKeyboardFocusDirection will always
444
+ // be undefined.
445
+ const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
446
+ const targetElement = focusableElements[targetElementIndex];
447
+ targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
448
+ return;
449
+ } else {
450
+ updateFocusedElement(event.target);
345
451
  }
346
- else {
347
- setActiveDescendant(undefined, currentFocusedElement);
452
+ } else if (typeof focusInStrategy === 'function') {
453
+ if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
454
+ const elementToFocus = focusInStrategy(event.relatedTarget);
455
+ const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
456
+
457
+ if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
458
+ // Since we are calling focus() this handler will run again synchronously. Therefore,
459
+ // we don't want to let this invocation finish since it will clobber the value of
460
+ // currentFocusedElement.
461
+ elementToFocus.focus();
462
+ return;
463
+ } else {
464
+ // eslint-disable-next-line no-console
465
+ console.warn('Element requested is not a known focusable element.');
466
+ }
467
+ } else {
468
+ updateFocusedElement(event.target);
348
469
  }
349
- });
350
- activeDescendantControl.addEventListener('focusout', () => {
351
- clearActiveDescendant();
352
- });
470
+ }
471
+ }
472
+ }
473
+
474
+ lastKeyboardFocusDirection = undefined;
475
+ }, {
476
+ signal
477
+ });
478
+ }
479
+
480
+ const keyboardEventRecipient = activeDescendantControl !== null && activeDescendantControl !== void 0 ? activeDescendantControl : container; // If the strategy is "closest", we need to capture the direction that the user
481
+ // is trying to move focus before our focusin handler is executed.
482
+
483
+ let lastKeyboardFocusDirection = undefined;
484
+
485
+ if (focusInStrategy === 'closest') {
486
+ document.addEventListener('keydown', event => {
487
+ if (event.key === 'Tab') {
488
+ lastKeyboardFocusDirection = getDirection(event);
489
+ }
490
+ }, {
491
+ signal,
492
+ capture: true
493
+ });
494
+ }
495
+
496
+ function getCurrentFocusedIndex() {
497
+ if (!currentFocusedElement) {
498
+ return 0;
353
499
  }
354
- else {
355
- // This is called whenever focus enters an element in the container
356
- container.addEventListener('focusin', event => {
357
- if (event.target instanceof HTMLElement) {
358
- // If a click initiated the focus movement, we always want to set our internal state
359
- // to reflect the clicked element as the currently focused one.
360
- if (elementIndexFocusedByClick !== undefined) {
361
- if (elementIndexFocusedByClick >= 0) {
362
- if (focusableElements[elementIndexFocusedByClick] !== currentFocusedElement) {
363
- updateFocusedElement(focusableElements[elementIndexFocusedByClick]);
364
- }
365
- }
366
- elementIndexFocusedByClick = undefined;
367
- }
368
- else {
369
- // Set tab indexes and internal state based on the focus handling strategy
370
- if (focusInStrategy === 'previous') {
371
- updateFocusedElement(event.target);
372
- }
373
- else if (focusInStrategy === 'closest' || focusInStrategy === 'first') {
374
- if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
375
- // Regardless of the previously focused element, if we're coming from outside the
376
- // container, put focus onto the first encountered element (from above, it's The
377
- // first element of the container; from below, it's the last). If the
378
- // focusInStrategy is set to "first", lastKeyboardFocusDirection will always
379
- // be undefined.
380
- const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
381
- const targetElement = focusableElements[targetElementIndex];
382
- targetElement?.focus();
383
- return;
384
- }
385
- else {
386
- updateFocusedElement(event.target);
387
- }
388
- }
389
- else if (typeof focusInStrategy === 'function') {
390
- if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
391
- const elementToFocus = focusInStrategy(event.relatedTarget);
392
- const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
393
- if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
394
- // Since we are calling focus() this handler will run again synchronously. Therefore,
395
- // we don't want to let this invocation finish since it will clobber the value of
396
- // currentFocusedElement.
397
- elementToFocus.focus();
398
- return;
399
- }
400
- else {
401
- // eslint-disable-next-line no-console
402
- console.warn('Element requested is not a known focusable element.');
403
- }
404
- }
405
- else {
406
- updateFocusedElement(event.target);
407
- }
408
- }
409
- }
500
+
501
+ const focusedIndex = focusableElements.indexOf(currentFocusedElement);
502
+ const fallbackIndex = currentFocusedElement === container ? -1 : 0;
503
+ return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
504
+ } // "keydown" is the event that triggers DOM focus change, so that is what we use here
505
+
506
+
507
+ keyboardEventRecipient.addEventListener('keydown', event => {
508
+ if (event.key in KEY_TO_DIRECTION) {
509
+ const keyBit = KEY_TO_BIT[event.key]; // Check if the pressed key (keyBit) is one that is being used for focus (bindKeys)
510
+
511
+ if (!event.defaultPrevented && (keyBit & bindKeys) > 0 && !shouldIgnoreFocusHandling(event, document.activeElement)) {
512
+ // Moving forward or backward?
513
+ const direction = getDirection(event);
514
+ let nextElementToFocus = undefined; // If there is a custom function that retrieves the next focusable element, try calling that first.
515
+
516
+ if (settings !== null && settings !== void 0 && settings.getNextFocusable) {
517
+ var _document$activeEleme;
518
+
519
+ nextElementToFocus = settings.getNextFocusable(direction, (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 ? _document$activeEleme : undefined, event);
520
+ }
521
+
522
+ if (!nextElementToFocus) {
523
+ const lastFocusedIndex = getCurrentFocusedIndex();
524
+ let nextFocusedIndex = lastFocusedIndex;
525
+
526
+ if (direction === 'previous') {
527
+ nextFocusedIndex -= 1;
528
+ } else if (direction === 'start') {
529
+ nextFocusedIndex = 0;
530
+ } else if (direction === 'next') {
531
+ nextFocusedIndex += 1;
532
+ } else {
533
+ // end
534
+ nextFocusedIndex = focusableElements.length - 1;
535
+ }
536
+
537
+ if (nextFocusedIndex < 0) {
538
+ // Tab should never cause focus to wrap. Use focusTrap for that behavior.
539
+ if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
540
+ nextFocusedIndex = focusableElements.length - 1;
541
+ } else {
542
+ nextFocusedIndex = 0;
410
543
  }
411
- lastKeyboardFocusDirection = undefined;
412
- }, { signal });
413
- }
414
- const keyboardEventRecipient = activeDescendantControl ?? container;
415
- // If the strategy is "closest", we need to capture the direction that the user
416
- // is trying to move focus before our focusin handler is executed.
417
- let lastKeyboardFocusDirection = undefined;
418
- if (focusInStrategy === 'closest') {
419
- document.addEventListener('keydown', event => {
420
- if (event.key === 'Tab') {
421
- lastKeyboardFocusDirection = getDirection(event);
544
+ }
545
+
546
+ if (nextFocusedIndex >= focusableElements.length) {
547
+ if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
548
+ nextFocusedIndex = 0;
549
+ } else {
550
+ nextFocusedIndex = focusableElements.length - 1;
422
551
  }
423
- }, { signal, capture: true });
424
- }
425
- function getCurrentFocusedIndex() {
426
- if (!currentFocusedElement) {
427
- return 0;
552
+ }
553
+
554
+ if (lastFocusedIndex !== nextFocusedIndex) {
555
+ nextElementToFocus = focusableElements[nextFocusedIndex];
556
+ }
428
557
  }
429
- const focusedIndex = focusableElements.indexOf(currentFocusedElement);
430
- const fallbackIndex = currentFocusedElement === container ? -1 : 0;
431
- return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
432
- }
433
- // "keydown" is the event that triggers DOM focus change, so that is what we use here
434
- keyboardEventRecipient.addEventListener('keydown', event => {
435
- if (event.key in KEY_TO_DIRECTION) {
436
- const keyBit = KEY_TO_BIT[event.key];
437
- // Check if the pressed key (keyBit) is one that is being used for focus (bindKeys)
438
- if (!event.defaultPrevented &&
439
- (keyBit & bindKeys) > 0 &&
440
- !shouldIgnoreFocusHandling(event, document.activeElement)) {
441
- // Moving forward or backward?
442
- const direction = getDirection(event);
443
- let nextElementToFocus = undefined;
444
- // If there is a custom function that retrieves the next focusable element, try calling that first.
445
- if (settings?.getNextFocusable) {
446
- nextElementToFocus = settings.getNextFocusable(direction, document.activeElement ?? undefined, event);
447
- }
448
- if (!nextElementToFocus) {
449
- const lastFocusedIndex = getCurrentFocusedIndex();
450
- let nextFocusedIndex = lastFocusedIndex;
451
- if (direction === 'previous') {
452
- nextFocusedIndex -= 1;
453
- }
454
- else if (direction === 'start') {
455
- nextFocusedIndex = 0;
456
- }
457
- else if (direction === 'next') {
458
- nextFocusedIndex += 1;
459
- }
460
- else {
461
- // end
462
- nextFocusedIndex = focusableElements.length - 1;
463
- }
464
- if (nextFocusedIndex < 0) {
465
- // Tab should never cause focus to wrap. Use focusTrap for that behavior.
466
- if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
467
- nextFocusedIndex = focusableElements.length - 1;
468
- }
469
- else {
470
- nextFocusedIndex = 0;
471
- }
472
- }
473
- if (nextFocusedIndex >= focusableElements.length) {
474
- if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
475
- nextFocusedIndex = 0;
476
- }
477
- else {
478
- nextFocusedIndex = focusableElements.length - 1;
479
- }
480
- }
481
- if (lastFocusedIndex !== nextFocusedIndex) {
482
- nextElementToFocus = focusableElements[nextFocusedIndex];
483
- }
484
- }
485
- if (activeDescendantControl) {
486
- updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
487
- }
488
- else if (nextElementToFocus) {
489
- lastKeyboardFocusDirection = direction;
490
- // updateFocusedElement will be called implicitly when focus moves, as long as the event isn't prevented somehow
491
- nextElementToFocus.focus();
492
- }
493
- // Tab should always allow escaping from this container, so only
494
- // preventDefault if tab key press already resulted in a focus movement
495
- if (event.key !== 'Tab' || nextElementToFocus) {
496
- event.preventDefault();
497
- }
498
- }
558
+
559
+ if (activeDescendantControl) {
560
+ updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
561
+ } else if (nextElementToFocus) {
562
+ lastKeyboardFocusDirection = direction; // updateFocusedElement will be called implicitly when focus moves, as long as the event isn't prevented somehow
563
+
564
+ nextElementToFocus.focus();
565
+ } // Tab should always allow escaping from this container, so only
566
+ // preventDefault if tab key press already resulted in a focus movement
567
+
568
+
569
+ if (event.key !== 'Tab' || nextElementToFocus) {
570
+ event.preventDefault();
499
571
  }
500
- }, { signal });
501
- return controller;
502
- }
503
- exports.focusZone = focusZone;
572
+ }
573
+ }
574
+ }, {
575
+ signal
576
+ });
577
+ return controller;
578
+ }