@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

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 (711) hide show
  1. package/CHANGELOG.md +940 -41
  2. package/README.md +16 -16
  3. package/codemods/__tests__/deprecateUtilityComponents.js +200 -0
  4. package/codemods/__tests__/removeSystemProps.js +225 -0
  5. package/codemods/deprecateUtilityComponents.js +111 -0
  6. package/codemods/lib/modifyProps.js +9 -7
  7. package/codemods/lib/prettify.js +1 -1
  8. package/codemods/lib/replaceImportSource.js +5 -5
  9. package/codemods/removeSystemProps.js +312 -0
  10. package/dist/browser.esm.js +1267 -853
  11. package/dist/browser.esm.js.map +1 -1
  12. package/dist/browser.umd.js +1304 -890
  13. package/dist/browser.umd.js.map +1 -1
  14. package/lib/ActionList/Divider.d.ts +9 -0
  15. package/lib/ActionList/Divider.js +40 -0
  16. package/lib/ActionList/Group.d.ts +28 -0
  17. package/lib/ActionList/Group.js +35 -0
  18. package/lib/ActionList/Header.d.ts +29 -0
  19. package/lib/ActionList/Header.js +51 -0
  20. package/lib/ActionList/Item.d.ts +98 -0
  21. package/lib/ActionList/Item.js +276 -0
  22. package/lib/ActionList/List.d.ts +88 -0
  23. package/lib/ActionList/List.js +199 -0
  24. package/lib/ActionList/index.d.ts +17 -0
  25. package/lib/ActionList/index.js +29 -0
  26. package/lib/ActionList2/Description.d.ts +12 -0
  27. package/lib/ActionList2/Description.js +57 -0
  28. package/lib/ActionList2/Divider.d.ts +5 -0
  29. package/lib/ActionList2/Divider.js +35 -0
  30. package/lib/ActionList2/Group.d.ts +37 -0
  31. package/lib/ActionList2/Group.js +106 -0
  32. package/lib/ActionList2/Item.d.ts +63 -0
  33. package/lib/ActionList2/Item.js +244 -0
  34. package/lib/ActionList2/LinkItem.d.ts +17 -0
  35. package/lib/ActionList2/LinkItem.js +57 -0
  36. package/lib/ActionList2/List.d.ts +26 -0
  37. package/lib/ActionList2/List.js +58 -0
  38. package/lib/ActionList2/Selection.d.ts +5 -0
  39. package/lib/ActionList2/Selection.js +86 -0
  40. package/lib/ActionList2/Visuals.d.ts +9 -0
  41. package/lib/ActionList2/Visuals.js +90 -0
  42. package/lib/ActionList2/index.d.ts +36 -0
  43. package/lib/ActionList2/index.js +47 -0
  44. package/lib/ActionMenu.d.ts +40 -0
  45. package/lib/ActionMenu.js +103 -0
  46. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +62 -0
  47. package/lib/AnchoredOverlay/AnchoredOverlay.js +124 -0
  48. package/lib/AnchoredOverlay/index.d.ts +2 -0
  49. package/lib/AnchoredOverlay/index.js +13 -0
  50. package/lib/Autocomplete/Autocomplete.d.ts +305 -0
  51. package/lib/Autocomplete/Autocomplete.js +145 -0
  52. package/lib/Autocomplete/AutocompleteContext.d.ts +17 -0
  53. package/lib/Autocomplete/AutocompleteContext.js +11 -0
  54. package/lib/Autocomplete/AutocompleteInput.d.ts +293 -0
  55. package/lib/Autocomplete/AutocompleteInput.js +157 -0
  56. package/lib/Autocomplete/AutocompleteMenu.d.ts +72 -0
  57. package/lib/Autocomplete/AutocompleteMenu.js +224 -0
  58. package/lib/Autocomplete/AutocompleteOverlay.d.ts +20 -0
  59. package/lib/Autocomplete/AutocompleteOverlay.js +80 -0
  60. package/lib/Autocomplete/index.d.ts +2 -0
  61. package/lib/Autocomplete/index.js +15 -0
  62. package/lib/Avatar.d.ts +14 -0
  63. package/lib/Avatar.js +1 -12
  64. package/lib/AvatarPair.d.ts +8 -0
  65. package/lib/AvatarPair.js +9 -16
  66. package/lib/AvatarStack.d.ts +8 -0
  67. package/lib/AvatarStack.js +12 -23
  68. package/lib/BaseStyles.d.ts +14 -0
  69. package/lib/BaseStyles.js +25 -31
  70. package/lib/BorderBox.d.ts +7 -0
  71. package/lib/BorderBox.js +5 -16
  72. package/lib/Box.d.ts +6 -0
  73. package/lib/Box.js +2 -15
  74. package/lib/BranchName.d.ts +5 -0
  75. package/lib/BranchName.js +1 -14
  76. package/lib/Breadcrumbs.d.ts +41 -0
  77. package/lib/Breadcrumbs.js +82 -0
  78. package/lib/Button/Button.d.ts +284 -0
  79. package/lib/Button/Button.js +3 -15
  80. package/lib/Button/ButtonBase.d.ts +9 -0
  81. package/lib/Button/ButtonBase.js +2 -25
  82. package/lib/Button/ButtonClose.d.ts +279 -0
  83. package/lib/Button/ButtonClose.js +9 -26
  84. package/lib/Button/ButtonDanger.d.ts +284 -0
  85. package/lib/Button/ButtonDanger.js +2 -14
  86. package/lib/Button/ButtonGroup.d.ts +4 -0
  87. package/lib/Button/ButtonGroup.js +2 -8
  88. package/lib/Button/ButtonInvisible.d.ts +284 -0
  89. package/lib/Button/ButtonInvisible.js +3 -15
  90. package/lib/Button/ButtonOutline.d.ts +284 -0
  91. package/lib/Button/ButtonOutline.js +2 -14
  92. package/lib/Button/ButtonPrimary.d.ts +284 -0
  93. package/lib/Button/ButtonPrimary.js +2 -14
  94. package/lib/Button/ButtonStyles.d.ts +2 -0
  95. package/lib/Button/ButtonTableList.d.ts +5 -0
  96. package/lib/Button/ButtonTableList.js +1 -15
  97. package/lib/Button/index.d.ts +16 -0
  98. package/lib/Button/index.js +9 -59
  99. package/lib/Caret.d.ts +21 -0
  100. package/lib/Caret.js +14 -17
  101. package/lib/Checkbox.d.ts +29 -0
  102. package/lib/Checkbox.js +64 -0
  103. package/lib/CircleBadge.d.ts +24 -0
  104. package/lib/CircleBadge.js +2 -20
  105. package/lib/CircleOcticon.d.ts +392 -0
  106. package/lib/CircleOcticon.js +9 -18
  107. package/lib/CounterLabel.d.ts +7 -0
  108. package/lib/CounterLabel.js +3 -17
  109. package/lib/Details.d.ts +5 -0
  110. package/lib/Details.js +1 -11
  111. package/lib/Dialog/ConfirmationDialog.d.ts +44 -0
  112. package/lib/Dialog/ConfirmationDialog.js +191 -0
  113. package/lib/Dialog/Dialog.d.ts +163 -0
  114. package/lib/Dialog/Dialog.js +311 -0
  115. package/lib/Dialog.d.ts +406 -0
  116. package/lib/Dialog.js +34 -49
  117. package/lib/Dropdown.d.ts +1113 -0
  118. package/lib/Dropdown.js +45 -60
  119. package/lib/DropdownMenu/DropdownButton.d.ts +280 -0
  120. package/lib/DropdownMenu/DropdownButton.js +33 -0
  121. package/lib/DropdownMenu/DropdownMenu.d.ts +43 -0
  122. package/lib/DropdownMenu/DropdownMenu.js +94 -0
  123. package/lib/DropdownMenu/index.d.ts +4 -0
  124. package/lib/DropdownMenu/index.js +21 -0
  125. package/lib/DropdownStyles.d.ts +3 -0
  126. package/lib/DropdownStyles.js +6 -6
  127. package/lib/FilterList.d.ts +283 -0
  128. package/lib/FilterList.js +2 -30
  129. package/lib/FilteredActionList/FilteredActionList.d.ts +16 -0
  130. package/lib/FilteredActionList/FilteredActionList.js +137 -0
  131. package/lib/FilteredActionList/index.d.ts +2 -0
  132. package/lib/FilteredActionList/index.js +13 -0
  133. package/lib/FilteredSearch.d.ts +5 -0
  134. package/lib/FilteredSearch.js +1 -12
  135. package/lib/Flash.d.ts +8 -0
  136. package/lib/Flash.js +35 -14
  137. package/lib/Flex.d.ts +7 -0
  138. package/lib/Flex.js +3 -5
  139. package/lib/FormGroup.d.ts +11 -0
  140. package/lib/FormGroup.js +2 -22
  141. package/lib/Grid.d.ts +7 -0
  142. package/lib/Grid.js +4 -9
  143. package/lib/Header.d.ts +23 -0
  144. package/lib/Header.js +7 -37
  145. package/lib/Heading.d.ts +5 -0
  146. package/lib/Heading.js +1 -13
  147. package/lib/Label.d.ts +10 -0
  148. package/lib/Label.js +5 -19
  149. package/lib/LabelGroup.d.ts +5 -0
  150. package/lib/LabelGroup.js +1 -9
  151. package/lib/Link.d.ts +9 -0
  152. package/lib/Link.js +2 -30
  153. package/lib/NewButton/button-counter.d.ts +6 -0
  154. package/lib/NewButton/button-counter.js +31 -0
  155. package/lib/NewButton/button.d.ts +13 -0
  156. package/lib/NewButton/button.js +308 -0
  157. package/lib/NewButton/index.d.ts +14 -0
  158. package/lib/NewButton/index.js +15 -0
  159. package/lib/NewButton/types.d.ts +32 -0
  160. package/lib/{utils → NewButton}/types.js +0 -0
  161. package/lib/Overlay.d.ts +66 -0
  162. package/lib/Overlay.js +184 -0
  163. package/lib/Pagehead.d.ts +5 -0
  164. package/lib/Pagehead.js +1 -13
  165. package/lib/Pagination/Pagination.d.ts +24 -0
  166. package/lib/Pagination/Pagination.js +14 -29
  167. package/lib/Pagination/index.d.ts +3 -0
  168. package/lib/Pagination/model.d.ts +26 -0
  169. package/lib/Pagination/model.js +1 -1
  170. package/lib/PointerBox.d.ts +11 -0
  171. package/lib/PointerBox.js +4 -13
  172. package/lib/Popover.d.ts +20 -0
  173. package/lib/Popover.js +5 -29
  174. package/lib/Portal/Portal.d.ts +25 -0
  175. package/lib/Portal/Portal.js +101 -0
  176. package/lib/Portal/index.d.ts +4 -0
  177. package/lib/Portal/index.js +17 -0
  178. package/lib/Position.d.ts +34 -0
  179. package/lib/Position.js +46 -46
  180. package/lib/ProgressBar.d.ts +26 -0
  181. package/lib/ProgressBar.js +8 -27
  182. package/lib/SelectMenu/SelectMenu.d.ts +1670 -0
  183. package/lib/SelectMenu/SelectMenu.js +32 -44
  184. package/lib/SelectMenu/SelectMenuContext.d.ts +8 -0
  185. package/lib/SelectMenu/SelectMenuContext.js +1 -1
  186. package/lib/SelectMenu/SelectMenuDivider.d.ts +5 -0
  187. package/lib/SelectMenu/SelectMenuDivider.js +6 -14
  188. package/lib/SelectMenu/SelectMenuFilter.d.ts +9 -0
  189. package/lib/SelectMenu/SelectMenuFilter.js +13 -21
  190. package/lib/SelectMenu/SelectMenuFooter.d.ts +5 -0
  191. package/lib/SelectMenu/SelectMenuFooter.js +6 -14
  192. package/lib/SelectMenu/SelectMenuHeader.d.ts +10 -0
  193. package/lib/SelectMenu/SelectMenuHeader.js +4 -17
  194. package/lib/SelectMenu/SelectMenuItem.d.ts +14 -0
  195. package/lib/SelectMenu/SelectMenuItem.js +13 -21
  196. package/lib/SelectMenu/SelectMenuList.d.ts +5 -0
  197. package/lib/SelectMenu/SelectMenuList.js +6 -14
  198. package/lib/SelectMenu/SelectMenuLoadingAnimation.d.ts +7 -0
  199. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +6 -17
  200. package/lib/SelectMenu/SelectMenuModal.d.ts +14 -0
  201. package/lib/SelectMenu/SelectMenuModal.js +11 -23
  202. package/lib/SelectMenu/SelectMenuTab.d.ts +13 -0
  203. package/lib/SelectMenu/SelectMenuTab.js +16 -26
  204. package/lib/SelectMenu/SelectMenuTabPanel.d.ts +12 -0
  205. package/lib/SelectMenu/SelectMenuTabPanel.js +14 -25
  206. package/lib/SelectMenu/SelectMenuTabs.d.ts +10 -0
  207. package/lib/SelectMenu/SelectMenuTabs.js +10 -17
  208. package/lib/SelectMenu/hooks/useKeyboardNav.d.ts +2 -0
  209. package/lib/SelectMenu/hooks/useKeyboardNav.js +2 -0
  210. package/lib/SelectMenu/index.d.ts +2 -0
  211. package/lib/SelectMenu/index.js +7 -5
  212. package/lib/SelectPanel/SelectPanel.d.ts +25 -0
  213. package/lib/SelectPanel/SelectPanel.js +147 -0
  214. package/lib/SelectPanel/index.d.ts +2 -0
  215. package/lib/SelectPanel/index.js +13 -0
  216. package/lib/SideNav.d.ts +34 -0
  217. package/lib/SideNav.js +23 -41
  218. package/lib/Spinner.d.ts +16 -0
  219. package/lib/Spinner.js +58 -0
  220. package/lib/StateLabel.d.ts +15 -0
  221. package/lib/StateLabel.js +53 -23
  222. package/lib/StyledOcticon.d.ts +11 -0
  223. package/lib/StyledOcticon.js +1 -15
  224. package/lib/SubNav.d.ts +26 -0
  225. package/lib/SubNav.js +27 -49
  226. package/lib/TabNav.d.ts +19 -0
  227. package/lib/TabNav.js +15 -37
  228. package/lib/Text.d.ts +6 -0
  229. package/lib/Text.js +0 -12
  230. package/lib/TextInput.d.ts +14 -0
  231. package/lib/TextInput.js +25 -76
  232. package/lib/TextInputWithTokens.d.ts +328 -0
  233. package/lib/TextInputWithTokens.js +318 -0
  234. package/lib/ThemeProvider.d.ts +26 -0
  235. package/lib/ThemeProvider.js +193 -0
  236. package/lib/Timeline.d.ts +33 -0
  237. package/lib/Timeline.js +34 -87
  238. package/lib/Token/AvatarToken.d.ts +7 -0
  239. package/lib/Token/AvatarToken.js +64 -0
  240. package/lib/Token/IssueLabelToken.d.ts +14 -0
  241. package/lib/Token/IssueLabelToken.js +144 -0
  242. package/lib/Token/Token.d.ts +15 -0
  243. package/lib/Token/Token.js +105 -0
  244. package/lib/Token/TokenBase.d.ts +31 -0
  245. package/lib/Token/TokenBase.js +104 -0
  246. package/lib/Token/_RemoveTokenButton.d.ts +12 -0
  247. package/lib/Token/_RemoveTokenButton.js +90 -0
  248. package/lib/Token/_TokenTextContainer.d.ts +3 -0
  249. package/lib/Token/_TokenTextContainer.js +17 -0
  250. package/lib/Token/index.d.ts +3 -0
  251. package/lib/Token/index.js +31 -0
  252. package/lib/Tooltip.d.ts +17 -0
  253. package/lib/Tooltip.js +4 -21
  254. package/lib/Truncate.d.ts +10 -0
  255. package/lib/Truncate.js +2 -18
  256. package/lib/UnderlineNav.d.ts +24 -0
  257. package/lib/UnderlineNav.js +3 -29
  258. package/lib/_TextInputWrapper.d.ts +10 -0
  259. package/lib/_TextInputWrapper.js +51 -0
  260. package/lib/_UnstyledTextInput.d.ts +2 -0
  261. package/lib/_UnstyledTextInput.js +20 -0
  262. package/lib/behaviors/anchoredPosition.d.ts +89 -0
  263. package/lib/behaviors/anchoredPosition.js +316 -0
  264. package/lib/behaviors/focusTrap.d.ts +12 -0
  265. package/lib/behaviors/focusTrap.js +179 -0
  266. package/lib/behaviors/focusZone.d.ts +137 -0
  267. package/lib/behaviors/focusZone.js +578 -0
  268. package/lib/behaviors/scrollIntoViewingArea.d.ts +1 -0
  269. package/lib/behaviors/scrollIntoViewingArea.js +39 -0
  270. package/lib/constants.d.ts +20 -0
  271. package/lib/constants.js +11 -27
  272. package/lib/drafts.d.ts +8 -0
  273. package/lib/drafts.js +31 -0
  274. package/lib/hooks/index.d.ts +11 -0
  275. package/lib/hooks/index.js +61 -0
  276. package/lib/hooks/useAnchoredPosition.d.ts +20 -0
  277. package/lib/hooks/useAnchoredPosition.js +51 -0
  278. package/lib/hooks/useCombinedRefs.d.ts +10 -0
  279. package/lib/hooks/useCombinedRefs.js +47 -0
  280. package/lib/hooks/useDetails.d.ts +17 -0
  281. package/lib/hooks/useDialog.d.ts +16 -0
  282. package/lib/hooks/useDialog.js +21 -6
  283. package/lib/hooks/useFocusTrap.d.ts +32 -0
  284. package/lib/hooks/useFocusTrap.js +69 -0
  285. package/lib/hooks/useFocusZone.d.ts +23 -0
  286. package/lib/hooks/useFocusZone.js +53 -0
  287. package/lib/hooks/useOnEscapePress.d.ts +23 -0
  288. package/lib/hooks/useOnEscapePress.js +69 -0
  289. package/lib/hooks/useOnOutsideClick.d.ts +8 -0
  290. package/lib/hooks/useOnOutsideClick.js +90 -0
  291. package/lib/hooks/useOpenAndCloseFocus.d.ts +8 -0
  292. package/lib/hooks/useOpenAndCloseFocus.js +36 -0
  293. package/lib/hooks/useOverlay.d.ts +15 -0
  294. package/lib/hooks/useOverlay.js +43 -0
  295. package/lib/hooks/useProvidedRefOrCreate.d.ts +10 -0
  296. package/lib/hooks/useProvidedRefOrCreate.js +24 -0
  297. package/lib/hooks/useProvidedStateOrCreate.d.ts +10 -0
  298. package/lib/hooks/useProvidedStateOrCreate.js +27 -0
  299. package/lib/hooks/useRenderForcingRef.d.ts +8 -0
  300. package/lib/hooks/useRenderForcingRef.js +25 -0
  301. package/lib/hooks/useResizeObserver.d.ts +1 -0
  302. package/lib/hooks/useResizeObserver.js +20 -0
  303. package/lib/hooks/useSafeTimeout.d.ts +12 -0
  304. package/lib/hooks/useSafeTimeout.js +38 -0
  305. package/lib/hooks/useScrollFlash.d.ts +6 -0
  306. package/lib/hooks/useScrollFlash.js +29 -0
  307. package/lib/index.d.ts +120 -0
  308. package/lib/index.js +191 -7
  309. package/lib/polyfills/eventListenerSignal.d.ts +6 -0
  310. package/lib/polyfills/eventListenerSignal.js +64 -0
  311. package/lib/sx.d.ts +14 -0
  312. package/lib/sx.js +8 -5
  313. package/lib/theme-preval.d.ts +49 -0
  314. package/lib/theme-preval.js +3119 -357
  315. package/lib/theme.d.ts +80 -0
  316. package/lib/theme.js +5 -8
  317. package/lib/utils/create-slots.d.ts +17 -0
  318. package/lib/utils/create-slots.js +105 -0
  319. package/lib/utils/deprecate.d.ts +18 -0
  320. package/lib/utils/deprecate.js +6 -5
  321. package/lib/utils/isNumeric.d.ts +1 -0
  322. package/lib/utils/isNumeric.js +1 -0
  323. package/lib/utils/iterateFocusableElements.d.ts +42 -0
  324. package/lib/utils/iterateFocusableElements.js +113 -0
  325. package/lib/utils/ssr.d.ts +1 -0
  326. package/lib/utils/ssr.js +19 -0
  327. package/lib/utils/test-deprecations.d.ts +1 -0
  328. package/lib/utils/test-deprecations.js +2 -1
  329. package/lib/utils/test-helpers.d.ts +0 -0
  330. package/lib/utils/test-helpers.js +9 -0
  331. package/lib/utils/test-matchers.d.ts +1 -0
  332. package/lib/utils/test-matchers.js +6 -50
  333. package/lib/utils/testing.d.ts +545 -0
  334. package/lib/utils/testing.js +65 -49
  335. package/lib/utils/theme.d.ts +9 -0
  336. package/lib/utils/theme.js +68 -0
  337. package/lib/utils/types/AriaRole.d.ts +1 -0
  338. package/lib/utils/types/AriaRole.js +1 -0
  339. package/lib/utils/types/ComponentProps.d.ts +9 -0
  340. package/lib/utils/types/ComponentProps.js +1 -0
  341. package/lib/utils/types/Flatten.d.ts +4 -0
  342. package/lib/utils/types/Flatten.js +1 -0
  343. package/lib/utils/types/KeyPaths.d.ts +3 -0
  344. package/lib/utils/types/KeyPaths.js +1 -0
  345. package/lib/utils/types/MandateProps.d.ts +3 -0
  346. package/lib/utils/types/MandateProps.js +1 -0
  347. package/lib/utils/types/Merge.d.ts +19 -0
  348. package/lib/utils/types/Merge.js +1 -0
  349. package/lib/utils/types/index.d.ts +5 -0
  350. package/lib/utils/types/index.js +70 -0
  351. package/lib/utils/uniqueId.d.ts +1 -0
  352. package/lib/utils/uniqueId.js +12 -0
  353. package/lib/utils/use-force-update.d.ts +1 -0
  354. package/lib/utils/use-force-update.js +19 -0
  355. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  356. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  357. package/lib/utils/userAgent.d.ts +1 -0
  358. package/lib/utils/userAgent.js +15 -0
  359. package/lib-esm/ActionList/Divider.d.ts +9 -0
  360. package/lib-esm/ActionList/Divider.js +23 -0
  361. package/lib-esm/ActionList/Group.d.ts +28 -0
  362. package/lib-esm/ActionList/Group.js +24 -0
  363. package/lib-esm/ActionList/Header.d.ts +29 -0
  364. package/lib-esm/ActionList/Header.js +33 -0
  365. package/lib-esm/ActionList/Item.d.ts +98 -0
  366. package/lib-esm/ActionList/Item.js +241 -0
  367. package/lib-esm/ActionList/List.d.ts +88 -0
  368. package/lib-esm/ActionList/List.js +181 -0
  369. package/lib-esm/ActionList/index.d.ts +17 -0
  370. package/lib-esm/ActionList/index.js +18 -0
  371. package/lib-esm/ActionList2/Description.d.ts +12 -0
  372. package/lib-esm/ActionList2/Description.js +41 -0
  373. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  374. package/lib-esm/ActionList2/Divider.js +23 -0
  375. package/lib-esm/ActionList2/Group.d.ts +37 -0
  376. package/lib-esm/ActionList2/Group.js +87 -0
  377. package/lib-esm/ActionList2/Item.d.ts +63 -0
  378. package/lib-esm/ActionList2/Item.js +210 -0
  379. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  380. package/lib-esm/ActionList2/LinkItem.js +43 -0
  381. package/lib-esm/ActionList2/List.d.ts +26 -0
  382. package/lib-esm/ActionList2/List.js +36 -0
  383. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  384. package/lib-esm/ActionList2/Selection.js +68 -0
  385. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  386. package/lib-esm/ActionList2/Visuals.js +68 -0
  387. package/lib-esm/ActionList2/index.d.ts +36 -0
  388. package/lib-esm/ActionList2/index.js +33 -0
  389. package/lib-esm/ActionMenu.d.ts +40 -0
  390. package/lib-esm/ActionMenu.js +82 -0
  391. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +62 -0
  392. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +104 -0
  393. package/lib-esm/AnchoredOverlay/index.d.ts +2 -0
  394. package/lib-esm/AnchoredOverlay/index.js +1 -0
  395. package/lib-esm/Autocomplete/Autocomplete.d.ts +305 -0
  396. package/lib-esm/Autocomplete/Autocomplete.js +123 -0
  397. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +17 -0
  398. package/lib-esm/Autocomplete/AutocompleteContext.js +2 -0
  399. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +293 -0
  400. package/lib-esm/Autocomplete/AutocompleteInput.js +138 -0
  401. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +72 -0
  402. package/lib-esm/Autocomplete/AutocompleteMenu.js +205 -0
  403. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +20 -0
  404. package/lib-esm/Autocomplete/AutocompleteOverlay.js +62 -0
  405. package/lib-esm/Autocomplete/index.d.ts +2 -0
  406. package/lib-esm/Autocomplete/index.js +1 -0
  407. package/lib-esm/Avatar.d.ts +14 -0
  408. package/lib-esm/Avatar.js +2 -11
  409. package/lib-esm/AvatarPair.d.ts +8 -0
  410. package/lib-esm/AvatarPair.js +8 -14
  411. package/lib-esm/AvatarStack.d.ts +8 -0
  412. package/lib-esm/AvatarStack.js +12 -21
  413. package/lib-esm/BaseStyles.d.ts +14 -0
  414. package/lib-esm/BaseStyles.js +23 -26
  415. package/lib-esm/BorderBox.d.ts +7 -0
  416. package/lib-esm/BorderBox.js +6 -12
  417. package/lib-esm/Box.d.ts +6 -0
  418. package/lib-esm/Box.js +2 -13
  419. package/lib-esm/BranchName.d.ts +5 -0
  420. package/lib-esm/BranchName.js +2 -13
  421. package/lib-esm/Breadcrumbs.d.ts +41 -0
  422. package/lib-esm/Breadcrumbs.js +58 -0
  423. package/lib-esm/Button/Button.d.ts +284 -0
  424. package/lib-esm/Button/Button.js +3 -10
  425. package/lib-esm/Button/ButtonBase.d.ts +9 -0
  426. package/lib-esm/Button/ButtonBase.js +1 -19
  427. package/lib-esm/Button/ButtonClose.d.ts +279 -0
  428. package/lib-esm/Button/ButtonClose.js +5 -20
  429. package/lib-esm/Button/ButtonDanger.d.ts +284 -0
  430. package/lib-esm/Button/ButtonDanger.js +2 -9
  431. package/lib-esm/Button/ButtonGroup.d.ts +4 -0
  432. package/lib-esm/Button/ButtonGroup.js +2 -7
  433. package/lib-esm/Button/ButtonInvisible.d.ts +284 -0
  434. package/lib-esm/Button/ButtonInvisible.js +3 -10
  435. package/lib-esm/Button/ButtonOutline.d.ts +284 -0
  436. package/lib-esm/Button/ButtonOutline.js +2 -9
  437. package/lib-esm/Button/ButtonPrimary.d.ts +284 -0
  438. package/lib-esm/Button/ButtonPrimary.js +2 -9
  439. package/lib-esm/Button/ButtonStyles.d.ts +2 -0
  440. package/lib-esm/Button/ButtonTableList.d.ts +5 -0
  441. package/lib-esm/Button/ButtonTableList.js +2 -14
  442. package/lib-esm/Button/index.d.ts +16 -0
  443. package/lib-esm/Button/index.js +8 -8
  444. package/lib-esm/Caret.d.ts +21 -0
  445. package/lib-esm/Caret.js +13 -16
  446. package/lib-esm/Checkbox.d.ts +29 -0
  447. package/lib-esm/Checkbox.js +44 -0
  448. package/lib-esm/CircleBadge.d.ts +24 -0
  449. package/lib-esm/CircleBadge.js +3 -19
  450. package/lib-esm/CircleOcticon.d.ts +392 -0
  451. package/lib-esm/CircleOcticon.js +9 -15
  452. package/lib-esm/CounterLabel.d.ts +7 -0
  453. package/lib-esm/CounterLabel.js +4 -16
  454. package/lib-esm/Details.d.ts +5 -0
  455. package/lib-esm/Details.js +1 -9
  456. package/lib-esm/Dialog/ConfirmationDialog.d.ts +44 -0
  457. package/lib-esm/Dialog/ConfirmationDialog.js +169 -0
  458. package/lib-esm/Dialog/Dialog.d.ts +163 -0
  459. package/lib-esm/Dialog/Dialog.js +275 -0
  460. package/lib-esm/Dialog.d.ts +406 -0
  461. package/lib-esm/Dialog.js +31 -46
  462. package/lib-esm/Dropdown.d.ts +1113 -0
  463. package/lib-esm/Dropdown.js +38 -58
  464. package/lib-esm/DropdownMenu/DropdownButton.d.ts +280 -0
  465. package/lib-esm/DropdownMenu/DropdownButton.js +18 -0
  466. package/lib-esm/DropdownMenu/DropdownMenu.d.ts +43 -0
  467. package/lib-esm/DropdownMenu/DropdownMenu.js +77 -0
  468. package/lib-esm/DropdownMenu/index.d.ts +4 -0
  469. package/lib-esm/DropdownMenu/index.js +2 -0
  470. package/lib-esm/DropdownStyles.d.ts +3 -0
  471. package/lib-esm/DropdownStyles.js +6 -6
  472. package/lib-esm/FilterList.d.ts +283 -0
  473. package/lib-esm/FilterList.js +3 -29
  474. package/lib-esm/FilteredActionList/FilteredActionList.d.ts +16 -0
  475. package/lib-esm/FilteredActionList/FilteredActionList.js +109 -0
  476. package/lib-esm/FilteredActionList/index.d.ts +2 -0
  477. package/lib-esm/FilteredActionList/index.js +1 -0
  478. package/lib-esm/FilteredSearch.d.ts +5 -0
  479. package/lib-esm/FilteredSearch.js +2 -11
  480. package/lib-esm/Flash.d.ts +8 -0
  481. package/lib-esm/Flash.js +36 -13
  482. package/lib-esm/Flex.d.ts +7 -0
  483. package/lib-esm/Flex.js +4 -4
  484. package/lib-esm/FormGroup.d.ts +11 -0
  485. package/lib-esm/FormGroup.js +3 -20
  486. package/lib-esm/Grid.d.ts +7 -0
  487. package/lib-esm/Grid.js +5 -7
  488. package/lib-esm/Header.d.ts +23 -0
  489. package/lib-esm/Header.js +6 -34
  490. package/lib-esm/Heading.d.ts +5 -0
  491. package/lib-esm/Heading.js +2 -12
  492. package/lib-esm/Label.d.ts +10 -0
  493. package/lib-esm/Label.js +3 -15
  494. package/lib-esm/LabelGroup.d.ts +5 -0
  495. package/lib-esm/LabelGroup.js +2 -9
  496. package/lib-esm/Link.d.ts +9 -0
  497. package/lib-esm/Link.js +2 -28
  498. package/lib-esm/NewButton/button-counter.d.ts +6 -0
  499. package/lib-esm/NewButton/button-counter.js +18 -0
  500. package/lib-esm/NewButton/button.d.ts +13 -0
  501. package/lib-esm/NewButton/button.js +287 -0
  502. package/lib-esm/NewButton/index.d.ts +14 -0
  503. package/lib-esm/NewButton/index.js +5 -0
  504. package/lib-esm/NewButton/types.d.ts +32 -0
  505. package/lib-esm/NewButton/types.js +1 -0
  506. package/lib-esm/Overlay.d.ts +66 -0
  507. package/lib-esm/Overlay.js +160 -0
  508. package/lib-esm/Pagehead.d.ts +5 -0
  509. package/lib-esm/Pagehead.js +2 -12
  510. package/lib-esm/Pagination/Pagination.d.ts +24 -0
  511. package/lib-esm/Pagination/Pagination.js +15 -28
  512. package/lib-esm/Pagination/index.d.ts +3 -0
  513. package/lib-esm/Pagination/model.d.ts +26 -0
  514. package/lib-esm/Pagination/model.js +1 -1
  515. package/lib-esm/PointerBox.d.ts +11 -0
  516. package/lib-esm/PointerBox.js +4 -11
  517. package/lib-esm/Popover.d.ts +20 -0
  518. package/lib-esm/Popover.js +5 -27
  519. package/lib-esm/Portal/Portal.d.ts +25 -0
  520. package/lib-esm/Portal/Portal.js +83 -0
  521. package/lib-esm/Portal/index.d.ts +4 -0
  522. package/lib-esm/Portal/index.js +3 -0
  523. package/lib-esm/Position.d.ts +34 -0
  524. package/lib-esm/Position.js +42 -37
  525. package/lib-esm/ProgressBar.d.ts +26 -0
  526. package/lib-esm/ProgressBar.js +9 -25
  527. package/lib-esm/SelectMenu/SelectMenu.d.ts +1670 -0
  528. package/lib-esm/SelectMenu/SelectMenu.js +27 -38
  529. package/lib-esm/SelectMenu/SelectMenuContext.d.ts +8 -0
  530. package/lib-esm/SelectMenu/SelectMenuContext.js +1 -1
  531. package/lib-esm/SelectMenu/SelectMenuDivider.d.ts +5 -0
  532. package/lib-esm/SelectMenu/SelectMenuDivider.js +4 -11
  533. package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +9 -0
  534. package/lib-esm/SelectMenu/SelectMenuFilter.js +13 -19
  535. package/lib-esm/SelectMenu/SelectMenuFooter.d.ts +5 -0
  536. package/lib-esm/SelectMenu/SelectMenuFooter.js +4 -11
  537. package/lib-esm/SelectMenu/SelectMenuHeader.d.ts +10 -0
  538. package/lib-esm/SelectMenu/SelectMenuHeader.js +7 -18
  539. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +14 -0
  540. package/lib-esm/SelectMenu/SelectMenuItem.js +11 -17
  541. package/lib-esm/SelectMenu/SelectMenuList.d.ts +5 -0
  542. package/lib-esm/SelectMenu/SelectMenuList.js +4 -11
  543. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.d.ts +7 -0
  544. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +7 -13
  545. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +14 -0
  546. package/lib-esm/SelectMenu/SelectMenuModal.js +10 -20
  547. package/lib-esm/SelectMenu/SelectMenuTab.d.ts +13 -0
  548. package/lib-esm/SelectMenu/SelectMenuTab.js +13 -21
  549. package/lib-esm/SelectMenu/SelectMenuTabPanel.d.ts +12 -0
  550. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +9 -19
  551. package/lib-esm/SelectMenu/SelectMenuTabs.d.ts +10 -0
  552. package/lib-esm/SelectMenu/SelectMenuTabs.js +8 -15
  553. package/lib-esm/SelectMenu/hooks/useKeyboardNav.d.ts +2 -0
  554. package/lib-esm/SelectMenu/hooks/useKeyboardNav.js +2 -0
  555. package/lib-esm/SelectMenu/index.d.ts +2 -0
  556. package/lib-esm/SelectMenu/index.js +1 -2
  557. package/lib-esm/SelectPanel/SelectPanel.d.ts +25 -0
  558. package/lib-esm/SelectPanel/SelectPanel.js +127 -0
  559. package/lib-esm/SelectPanel/index.d.ts +2 -0
  560. package/lib-esm/SelectPanel/index.js +1 -0
  561. package/lib-esm/SideNav.d.ts +34 -0
  562. package/lib-esm/SideNav.js +20 -36
  563. package/lib-esm/Spinner.d.ts +16 -0
  564. package/lib-esm/Spinner.js +45 -0
  565. package/lib-esm/StateLabel.d.ts +15 -0
  566. package/lib-esm/StateLabel.js +55 -23
  567. package/lib-esm/StyledOcticon.d.ts +11 -0
  568. package/lib-esm/StyledOcticon.js +1 -12
  569. package/lib-esm/SubNav.d.ts +26 -0
  570. package/lib-esm/SubNav.js +24 -48
  571. package/lib-esm/TabNav.d.ts +19 -0
  572. package/lib-esm/TabNav.js +13 -33
  573. package/lib-esm/Text.d.ts +6 -0
  574. package/lib-esm/Text.js +0 -10
  575. package/lib-esm/TextInput.d.ts +14 -0
  576. package/lib-esm/TextInput.js +24 -62
  577. package/lib-esm/TextInputWithTokens.d.ts +328 -0
  578. package/lib-esm/TextInputWithTokens.js +291 -0
  579. package/lib-esm/ThemeProvider.d.ts +26 -0
  580. package/lib-esm/ThemeProvider.js +161 -0
  581. package/lib-esm/Timeline.d.ts +33 -0
  582. package/lib-esm/Timeline.js +26 -81
  583. package/lib-esm/Token/AvatarToken.d.ts +7 -0
  584. package/lib-esm/Token/AvatarToken.js +43 -0
  585. package/lib-esm/Token/IssueLabelToken.d.ts +14 -0
  586. package/lib-esm/Token/IssueLabelToken.js +124 -0
  587. package/lib-esm/Token/Token.d.ts +15 -0
  588. package/lib-esm/Token/Token.js +84 -0
  589. package/lib-esm/Token/TokenBase.d.ts +31 -0
  590. package/lib-esm/Token/TokenBase.js +83 -0
  591. package/lib-esm/Token/_RemoveTokenButton.d.ts +12 -0
  592. package/lib-esm/Token/_RemoveTokenButton.js +69 -0
  593. package/lib-esm/Token/_TokenTextContainer.d.ts +3 -0
  594. package/lib-esm/Token/_TokenTextContainer.js +6 -0
  595. package/lib-esm/Token/index.d.ts +3 -0
  596. package/lib-esm/Token/index.js +3 -0
  597. package/lib-esm/Tooltip.d.ts +17 -0
  598. package/lib-esm/Tooltip.js +4 -19
  599. package/lib-esm/Truncate.d.ts +10 -0
  600. package/lib-esm/Truncate.js +2 -15
  601. package/lib-esm/UnderlineNav.d.ts +24 -0
  602. package/lib-esm/UnderlineNav.js +5 -28
  603. package/lib-esm/_TextInputWrapper.d.ts +10 -0
  604. package/lib-esm/_TextInputWrapper.js +31 -0
  605. package/lib-esm/_UnstyledTextInput.d.ts +2 -0
  606. package/lib-esm/_UnstyledTextInput.js +7 -0
  607. package/lib-esm/behaviors/anchoredPosition.d.ts +89 -0
  608. package/lib-esm/behaviors/anchoredPosition.js +309 -0
  609. package/lib-esm/behaviors/focusTrap.d.ts +12 -0
  610. package/lib-esm/behaviors/focusTrap.js +170 -0
  611. package/lib-esm/behaviors/focusZone.d.ts +137 -0
  612. package/lib-esm/behaviors/focusZone.js +560 -0
  613. package/lib-esm/behaviors/scrollIntoViewingArea.d.ts +1 -0
  614. package/lib-esm/behaviors/scrollIntoViewingArea.js +30 -0
  615. package/lib-esm/constants.d.ts +20 -0
  616. package/lib-esm/constants.js +9 -23
  617. package/lib-esm/drafts.d.ts +8 -0
  618. package/lib-esm/drafts.js +9 -0
  619. package/lib-esm/hooks/index.d.ts +11 -0
  620. package/lib-esm/hooks/index.js +7 -0
  621. package/lib-esm/hooks/useAnchoredPosition.d.ts +20 -0
  622. package/lib-esm/hooks/useAnchoredPosition.js +35 -0
  623. package/lib-esm/hooks/useCombinedRefs.d.ts +10 -0
  624. package/lib-esm/hooks/useCombinedRefs.js +37 -0
  625. package/lib-esm/hooks/useDetails.d.ts +17 -0
  626. package/lib-esm/hooks/useDialog.d.ts +16 -0
  627. package/lib-esm/hooks/useDialog.js +21 -6
  628. package/lib-esm/hooks/useFocusTrap.d.ts +32 -0
  629. package/lib-esm/hooks/useFocusTrap.js +54 -0
  630. package/lib-esm/hooks/useFocusZone.d.ts +23 -0
  631. package/lib-esm/hooks/useFocusZone.js +37 -0
  632. package/lib-esm/hooks/useOnEscapePress.d.ts +23 -0
  633. package/lib-esm/hooks/useOnEscapePress.js +59 -0
  634. package/lib-esm/hooks/useOnOutsideClick.d.ts +8 -0
  635. package/lib-esm/hooks/useOnOutsideClick.js +79 -0
  636. package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +8 -0
  637. package/lib-esm/hooks/useOpenAndCloseFocus.js +27 -0
  638. package/lib-esm/hooks/useOverlay.d.ts +15 -0
  639. package/lib-esm/hooks/useOverlay.js +30 -0
  640. package/lib-esm/hooks/useProvidedRefOrCreate.d.ts +10 -0
  641. package/lib-esm/hooks/useProvidedRefOrCreate.js +14 -0
  642. package/lib-esm/hooks/useProvidedStateOrCreate.d.ts +10 -0
  643. package/lib-esm/hooks/useProvidedStateOrCreate.js +20 -0
  644. package/lib-esm/hooks/useRenderForcingRef.d.ts +8 -0
  645. package/lib-esm/hooks/useRenderForcingRef.js +18 -0
  646. package/lib-esm/hooks/useResizeObserver.d.ts +1 -0
  647. package/lib-esm/hooks/useResizeObserver.js +10 -0
  648. package/lib-esm/hooks/useSafeTimeout.d.ts +12 -0
  649. package/lib-esm/hooks/useSafeTimeout.js +31 -0
  650. package/lib-esm/hooks/useScrollFlash.d.ts +6 -0
  651. package/lib-esm/hooks/useScrollFlash.js +22 -0
  652. package/lib-esm/index.d.ts +120 -0
  653. package/lib-esm/index.js +29 -7
  654. package/lib-esm/polyfills/eventListenerSignal.d.ts +6 -0
  655. package/lib-esm/polyfills/eventListenerSignal.js +57 -0
  656. package/lib-esm/sx.d.ts +14 -0
  657. package/lib-esm/sx.js +3 -5
  658. package/lib-esm/theme-preval.d.ts +49 -0
  659. package/lib-esm/theme-preval.js +3119 -357
  660. package/lib-esm/theme.d.ts +80 -0
  661. package/lib-esm/theme.js +3 -8
  662. package/lib-esm/utils/create-slots.d.ts +17 -0
  663. package/lib-esm/utils/create-slots.js +84 -0
  664. package/lib-esm/utils/deprecate.d.ts +18 -0
  665. package/lib-esm/utils/deprecate.js +6 -5
  666. package/lib-esm/utils/isNumeric.d.ts +1 -0
  667. package/lib-esm/utils/isNumeric.js +1 -0
  668. package/lib-esm/utils/iterateFocusableElements.d.ts +42 -0
  669. package/lib-esm/utils/iterateFocusableElements.js +102 -0
  670. package/lib-esm/utils/ssr.d.ts +1 -0
  671. package/lib-esm/utils/ssr.js +1 -0
  672. package/lib-esm/utils/test-deprecations.d.ts +1 -0
  673. package/lib-esm/utils/test-deprecations.js +1 -1
  674. package/lib-esm/utils/{types.js → test-helpers.d.ts} +0 -0
  675. package/lib-esm/utils/test-helpers.js +7 -0
  676. package/lib-esm/utils/test-matchers.d.ts +1 -0
  677. package/lib-esm/utils/test-matchers.js +7 -49
  678. package/lib-esm/utils/testing.d.ts +545 -0
  679. package/lib-esm/utils/testing.js +60 -46
  680. package/lib-esm/utils/theme.d.ts +9 -0
  681. package/lib-esm/utils/theme.js +66 -0
  682. package/lib-esm/utils/types/AriaRole.d.ts +1 -0
  683. package/lib-esm/utils/types/AriaRole.js +1 -0
  684. package/lib-esm/utils/types/ComponentProps.d.ts +9 -0
  685. package/lib-esm/utils/types/ComponentProps.js +1 -0
  686. package/lib-esm/utils/types/Flatten.d.ts +4 -0
  687. package/lib-esm/utils/types/Flatten.js +1 -0
  688. package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
  689. package/lib-esm/utils/types/KeyPaths.js +1 -0
  690. package/lib-esm/utils/types/MandateProps.d.ts +3 -0
  691. package/lib-esm/utils/types/MandateProps.js +1 -0
  692. package/lib-esm/utils/types/Merge.d.ts +19 -0
  693. package/lib-esm/utils/types/Merge.js +1 -0
  694. package/lib-esm/utils/types/index.d.ts +5 -0
  695. package/lib-esm/utils/types/index.js +5 -0
  696. package/lib-esm/utils/uniqueId.d.ts +1 -0
  697. package/lib-esm/utils/uniqueId.js +5 -0
  698. package/lib-esm/utils/use-force-update.d.ts +1 -0
  699. package/lib-esm/utils/use-force-update.js +6 -0
  700. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  701. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  702. package/lib-esm/utils/userAgent.d.ts +1 -0
  703. package/lib-esm/utils/userAgent.js +8 -0
  704. package/package.json +116 -93
  705. package/index.d.ts +0 -828
  706. package/lib/Breadcrumb.js +0 -96
  707. package/lib/hooks/useMouseIntent.js +0 -58
  708. package/lib/stories/Button.stories.js +0 -100
  709. package/lib-esm/Breadcrumb.js +0 -70
  710. package/lib-esm/hooks/useMouseIntent.js +0 -50
  711. package/lib-esm/stories/Button.stories.js +0 -65
@@ -0,0 +1,205 @@
1
+ import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
2
+ import { ActionList } from '../ActionList';
3
+ import { useFocusZone } from '../hooks/useFocusZone';
4
+ import { Box, Spinner } from '../';
5
+ import { AutocompleteContext } from './AutocompleteContext';
6
+ import { PlusIcon } from '@primer/octicons-react';
7
+ import { uniqueId } from '../utils/uniqueId';
8
+ import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
9
+
10
+ const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
11
+
12
+ function getDefaultItemFilter(filterValue) {
13
+ return function (item, _i) {
14
+ var _item$text;
15
+
16
+ return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
17
+ };
18
+ }
19
+
20
+ function getDefaultOnSelectionChange(setInputValueFn) {
21
+ return function (itemOrItems) {
22
+ const {
23
+ text = ''
24
+ } = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems;
25
+ setInputValueFn(text);
26
+ };
27
+ }
28
+
29
+ const isItemSelected = (itemId, selectedItemIds) => selectedItemIds.includes(itemId);
30
+
31
+ function getItemById(itemId, items) {
32
+ return items.find(item => item.id === itemId);
33
+ } // eslint-disable-next-line @typescript-eslint/no-explicit-any
34
+
35
+
36
+ function AutocompleteMenu(props) {
37
+ const autocompleteContext = useContext(AutocompleteContext);
38
+
39
+ if (autocompleteContext === null) {
40
+ throw new Error('AutocompleteContext returned null values');
41
+ }
42
+
43
+ const {
44
+ activeDescendantRef,
45
+ id,
46
+ inputRef,
47
+ inputValue = '',
48
+ scrollContainerRef,
49
+ setAutocompleteSuggestion,
50
+ setShowMenu,
51
+ setInputValue,
52
+ setIsMenuDirectlyActivated,
53
+ setSelectedItemLength,
54
+ showMenu
55
+ } = autocompleteContext;
56
+ const {
57
+ items,
58
+ selectedItemIds,
59
+ sortOnCloseFn,
60
+ emptyStateText,
61
+ addNewItem,
62
+ loading,
63
+ selectionVariant,
64
+ filterFn,
65
+ 'aria-labelledby': ariaLabelledBy,
66
+ onOpenChange,
67
+ onSelectedChange,
68
+ customScrollContainerRef
69
+ } = props;
70
+ const listContainerRef = useRef(null);
71
+ const [highlightedItem, setHighlightedItem] = useState();
72
+ const [sortedItemIds, setSortedItemIds] = useState(items.map(({
73
+ id: itemId
74
+ }) => itemId));
75
+ const selectableItems = useMemo(() => items.map(selectableItem => {
76
+ return { ...selectableItem,
77
+ role: 'option',
78
+ id: selectableItem.id,
79
+ selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
80
+ onAction: item => {
81
+ const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id);
82
+ const newSelectedItemIds = selectedItemIds.includes(item.id) ? otherSelectedItemIds : [...otherSelectedItemIds, item.id];
83
+ const onSelectedChangeFn = onSelectedChange ? onSelectedChange : getDefaultOnSelectionChange(setInputValue);
84
+ onSelectedChangeFn(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
85
+
86
+ if (selectionVariant === 'multiple') {
87
+ setInputValue('');
88
+ setAutocompleteSuggestion('');
89
+ } else {
90
+ var _inputRef$current;
91
+
92
+ setShowMenu(false);
93
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
94
+ }
95
+ }
96
+ };
97
+ }), [items, selectedItemIds, inputRef, onSelectedChange, selectionVariant, setAutocompleteSuggestion, setInputValue, setShowMenu]);
98
+ const itemSortOrderData = useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
99
+ acc[curr] = i;
100
+ return acc;
101
+ }, {}), [sortedItemIds]);
102
+ const sortedAndFilteredItemsToRender = useMemo(() => selectableItems.filter(filterFn ? filterFn : getDefaultItemFilter(inputValue)).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems, itemSortOrderData, filterFn, inputValue]);
103
+ const allItemsToRender = useMemo(() => [// sorted and filtered selectable items
104
+ ...sortedAndFilteredItemsToRender, // menu item used for creating a token from whatever is in the text input
105
+ ...(addNewItem ? [{ ...addNewItem,
106
+ leadingVisual: () => /*#__PURE__*/React.createElement(PlusIcon, null),
107
+ onAction: item => {
108
+ // TODO: make it possible to pass a leadingVisual when using `addNewItem`
109
+ addNewItem.handleAddItem({ ...item,
110
+ id: item.id || uniqueId(),
111
+ leadingVisual: undefined
112
+ });
113
+
114
+ if (selectionVariant === 'multiple') {
115
+ setInputValue('');
116
+ setAutocompleteSuggestion('');
117
+ }
118
+ }
119
+ }] : [])], [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue]);
120
+ useFocusZone({
121
+ containerRef: listContainerRef,
122
+ focusOutBehavior: 'wrap',
123
+ focusableElementFilter: element => {
124
+ return !(element instanceof HTMLInputElement);
125
+ },
126
+ activeDescendantFocus: inputRef,
127
+ onActiveDescendantChanged: (current, _previous, directlyActivated) => {
128
+ activeDescendantRef.current = current || null;
129
+
130
+ if (current) {
131
+ const selectedItem = selectableItems.find(item => item.id.toString() === current.getAttribute('data-id'));
132
+ setHighlightedItem(selectedItem);
133
+ setIsMenuDirectlyActivated(directlyActivated);
134
+ }
135
+
136
+ if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
137
+ scrollIntoViewingArea(current, customScrollContainerRef.current);
138
+ } else if (current && scrollContainerRef.current && directlyActivated) {
139
+ scrollIntoViewingArea(current, scrollContainerRef.current);
140
+ }
141
+ }
142
+ }, [loading]);
143
+ useEffect(() => {
144
+ var _highlightedItem$text;
145
+
146
+ if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
147
+ setAutocompleteSuggestion(highlightedItem.text);
148
+ } else {
149
+ setAutocompleteSuggestion('');
150
+ }
151
+ }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion]);
152
+ useEffect(() => {
153
+ const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId => isItemSelected(itemId, selectedItemIds)));
154
+ const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element, index) => element === sortedItemIds[index]);
155
+
156
+ if (showMenu === false && !sortResultMatchesState) {
157
+ setSortedItemIds(itemIdSortResult);
158
+ }
159
+
160
+ onOpenChange && onOpenChange(Boolean(showMenu));
161
+ }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds]);
162
+ useEffect(() => {
163
+ if (selectedItemIds.length) {
164
+ setSelectedItemLength(selectedItemIds.length);
165
+ }
166
+ }, [selectedItemIds, setSelectedItemLength]);
167
+ return /*#__PURE__*/React.createElement(Box, {
168
+ sx: !showMenu ? {
169
+ // visually hides this label for sighted users
170
+ position: 'absolute',
171
+ width: '1px',
172
+ height: '1px',
173
+ padding: '0',
174
+ margin: '-1px',
175
+ overflow: 'hidden',
176
+ clip: 'rect(0, 0, 0, 0)',
177
+ whiteSpace: 'nowrap',
178
+ borderWidth: '0'
179
+ } : {}
180
+ }, loading ? /*#__PURE__*/React.createElement(Box, {
181
+ p: 3,
182
+ display: "flex",
183
+ justifyContent: "center"
184
+ }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
185
+ ref: listContainerRef
186
+ }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, {
187
+ selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property
188
+ // on `items` for Autocomplete: `metadata`
189
+ ,
190
+ items: allItemsToRender,
191
+ role: "listbox",
192
+ id: `${id}-listbox`,
193
+ "aria-labelledby": ariaLabelledBy
194
+ }) : /*#__PURE__*/React.createElement(Box, {
195
+ p: 3
196
+ }, emptyStateText)));
197
+ }
198
+
199
+ AutocompleteMenu.displayName = "AutocompleteMenu";
200
+ AutocompleteMenu.defaultProps = {
201
+ emptyStateText: 'No selectable options',
202
+ selectionVariant: 'single'
203
+ };
204
+ AutocompleteMenu.displayName = 'AutocompleteMenu';
205
+ export default AutocompleteMenu;
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { OverlayProps } from '../Overlay';
3
+ import { ComponentProps } from '../utils/types';
4
+ declare type AutocompleteOverlayInternalProps = {
5
+ /**
6
+ * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
7
+ */
8
+ menuAnchorRef?: React.RefObject<HTMLElement>;
9
+ /**
10
+ * Props to be spread on the internal `Overlay` component.
11
+ */
12
+ overlayProps?: Partial<OverlayProps>;
13
+ children?: React.ReactNode;
14
+ } & Pick<React.AriaAttributes, 'aria-labelledby'>;
15
+ declare function AutocompleteOverlay({ menuAnchorRef, overlayProps, children }: AutocompleteOverlayInternalProps): JSX.Element | null;
16
+ declare namespace AutocompleteOverlay {
17
+ var displayName: string;
18
+ }
19
+ export declare type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>;
20
+ export default AutocompleteOverlay;
@@ -0,0 +1,62 @@
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ import React, { useCallback, useContext } from 'react';
4
+ import { useAnchoredPosition } from '../hooks';
5
+ import Overlay from '../Overlay';
6
+ import { AutocompleteContext } from './AutocompleteContext';
7
+ import { useCombinedRefs } from '../hooks/useCombinedRefs';
8
+
9
+ // TODO: consider making 'aria-labelledby' required
10
+ function AutocompleteOverlay({
11
+ menuAnchorRef,
12
+ overlayProps,
13
+ children
14
+ }) {
15
+ const autocompleteContext = useContext(AutocompleteContext);
16
+
17
+ if (autocompleteContext === null) {
18
+ throw new Error('AutocompleteContext returned null values');
19
+ }
20
+
21
+ const {
22
+ inputRef,
23
+ scrollContainerRef,
24
+ selectedItemLength,
25
+ setShowMenu,
26
+ showMenu = false
27
+ } = autocompleteContext;
28
+ const {
29
+ floatingElementRef,
30
+ position
31
+ } = useAnchoredPosition({
32
+ side: 'outside-bottom',
33
+ align: 'start',
34
+ anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
35
+ }, [showMenu, selectedItemLength]);
36
+ const combinedOverlayRef = useCombinedRefs(scrollContainerRef, floatingElementRef);
37
+ const closeOptionList = useCallback(() => {
38
+ setShowMenu(false);
39
+ }, [setShowMenu]);
40
+
41
+ if (typeof window === 'undefined') {
42
+ return null;
43
+ }
44
+
45
+ return /*#__PURE__*/React.createElement(Overlay, _extends({
46
+ returnFocusRef: inputRef,
47
+ preventFocusOnOpen: true,
48
+ onClickOutside: closeOptionList,
49
+ onEscape: closeOptionList,
50
+ ref: combinedOverlayRef,
51
+ top: position === null || position === void 0 ? void 0 : position.top,
52
+ left: position === null || position === void 0 ? void 0 : position.left,
53
+ visibility: showMenu ? 'visible' : 'hidden',
54
+ sx: {
55
+ overflow: 'auto'
56
+ }
57
+ }, overlayProps), children);
58
+ }
59
+
60
+ AutocompleteOverlay.displayName = "AutocompleteOverlay";
61
+ AutocompleteOverlay.displayName = 'AutocompleteOverlay';
62
+ export default AutocompleteOverlay;
@@ -0,0 +1,2 @@
1
+ export { default } from './Autocomplete';
2
+ export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';
@@ -0,0 +1 @@
1
+ export { default } from './Autocomplete';
@@ -0,0 +1,14 @@
1
+ import { SxProp } from './sx';
2
+ import { ComponentProps } from './utils/types';
3
+ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
4
+ /** Sets the width and height of the avatar. */
5
+ size?: number | undefined;
6
+ /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
7
+ square?: boolean | undefined;
8
+ /** URL of the avatar image. */
9
+ src: string;
10
+ /** Provide alt text when the Avatar is used without the user's name next to it. */
11
+ alt?: string | undefined;
12
+ } & SxProp, never>;
13
+ export declare type AvatarProps = ComponentProps<typeof Avatar>;
14
+ export default Avatar;
package/lib-esm/Avatar.js CHANGED
@@ -1,8 +1,6 @@
1
- import PropTypes from 'prop-types';
2
1
  import styled from 'styled-components';
3
- import { COMMON, get } from './constants';
2
+ import { get } from './constants';
4
3
  import sx from './sx';
5
- import theme from './theme';
6
4
 
7
5
  function getBorderRadius({
8
6
  size,
@@ -21,17 +19,10 @@ const Avatar = styled.img.attrs(props => ({
21
19
  })).withConfig({
22
20
  displayName: "Avatar",
23
21
  componentId: "sc-1waaaky-0"
24
- })(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), COMMON, sx);
22
+ })(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), sx);
25
23
  Avatar.defaultProps = {
26
- theme,
27
24
  size: 20,
28
25
  alt: '',
29
26
  square: false
30
27
  };
31
- Avatar.propTypes = { ...COMMON.propTypes,
32
- size: PropTypes.number,
33
- square: PropTypes.bool,
34
- ...sx.propTypes,
35
- theme: PropTypes.object
36
- };
37
28
  export default Avatar;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { BoxProps } from '.';
3
+ export declare type AvatarPairProps = BoxProps;
4
+ declare const AvatarPair: {
5
+ ({ children, ...rest }: AvatarPairProps): JSX.Element;
6
+ displayName: string;
7
+ };
8
+ export default AvatarPair;
@@ -1,31 +1,31 @@
1
1
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
- import PropTypes from 'prop-types';
5
4
  import styled from 'styled-components';
6
- import { Relative } from './Position';
7
5
  import Avatar from './Avatar';
8
- import theme from './theme';
6
+ import { get } from './constants';
7
+ import { Box } from '.';
9
8
  const ChildAvatar = styled(Avatar).withConfig({
10
9
  displayName: "AvatarPair__ChildAvatar",
11
10
  componentId: "sc-1jbk273-0"
12
- })(["position:absolute;right:-15%;bottom:-9%;box-shadow:0 0 0 2px rgba(255,255,255,0.8);"]);
11
+ })(["position:absolute;right:-15%;bottom:-9%;box-shadow:", ";"], get('shadows.avatar.childShadow'));
13
12
 
14
13
  const AvatarPair = ({
15
14
  children,
16
15
  ...rest
17
16
  }) => {
18
17
  const avatars = React.Children.map(children, (child, i) => {
19
- if (!React.isValidElement(child)) return child;
20
- return i === 0 ? React.cloneElement(child, {
18
+ if (! /*#__PURE__*/React.isValidElement(child)) return child;
19
+ return i === 0 ? /*#__PURE__*/React.cloneElement(child, {
21
20
  size: 40
22
21
  }) : /*#__PURE__*/React.createElement(ChildAvatar, _extends({
23
- bg: "white"
22
+ bg: "canvas.default"
24
23
  }, child.props, {
25
24
  size: 20
26
25
  }));
27
26
  });
28
- return /*#__PURE__*/React.createElement(Relative, _extends({
27
+ return /*#__PURE__*/React.createElement(Box, _extends({
28
+ position: "relative",
29
29
  display: "inline-flex"
30
30
  }, rest), avatars);
31
31
  };
@@ -33,10 +33,4 @@ const AvatarPair = ({
33
33
  AvatarPair.displayName = "AvatarPair";
34
34
  // styled() changes this
35
35
  AvatarPair.displayName = 'AvatarPair';
36
- AvatarPair.defaultProps = {
37
- theme
38
- };
39
- AvatarPair.propTypes = { ...Relative.propTypes,
40
- theme: PropTypes.object
41
- };
42
36
  export default AvatarPair;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { SxProp } from './sx';
3
+ export declare type AvatarStackProps = {
4
+ alignRight?: boolean;
5
+ children: React.ReactNode;
6
+ } & SxProp;
7
+ declare const AvatarStack: ({ children, alignRight, sx: sxProp }: AvatarStackProps) => JSX.Element;
8
+ export default AvatarStack;
@@ -1,22 +1,18 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React from 'react';
4
1
  import classnames from 'classnames';
5
- import PropTypes from 'prop-types';
2
+ import React from 'react';
6
3
  import styled from 'styled-components';
4
+ import { get } from './constants';
5
+ import { Box } from '.';
7
6
  import sx from './sx';
8
- import { get, COMMON } from './constants';
9
- import theme from './theme';
10
- import { Absolute } from './Position';
11
7
  const AvatarStackWrapper = styled.span.withConfig({
12
8
  displayName: "AvatarStack__AvatarStackWrapper",
13
9
  componentId: "sc-1qgzd2v-0"
14
- })(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.white'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.white'), COMMON, sx);
10
+ })(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.canvas.default'), sx);
15
11
 
16
12
  const transformChildren = children => {
17
13
  return React.Children.map(children, (child, index) => {
18
- if (!React.isValidElement(child)) return child;
19
- return React.cloneElement(child, {
14
+ if (! /*#__PURE__*/React.isValidElement(child)) return child;
15
+ return /*#__PURE__*/React.cloneElement(child, {
20
16
  className: classnames(child.props.className, 'pc-AvatarItem'),
21
17
  sx: {
22
18
  zIndex: 10 - index,
@@ -29,7 +25,7 @@ const transformChildren = children => {
29
25
  const AvatarStack = ({
30
26
  children,
31
27
  alignRight,
32
- ...rest
28
+ sx: sxProp
33
29
  }) => {
34
30
  const count = React.Children.count(children);
35
31
  const wrapperClassNames = classnames({
@@ -37,10 +33,12 @@ const AvatarStack = ({
37
33
  'pc-AvatarStack--three-plus': count > 2,
38
34
  'pc-AvatarStack--right': alignRight
39
35
  });
40
- return /*#__PURE__*/React.createElement(AvatarStackWrapper, _extends({
36
+ return /*#__PURE__*/React.createElement(AvatarStackWrapper, {
41
37
  count: count,
42
- className: wrapperClassNames
43
- }, rest), /*#__PURE__*/React.createElement(Absolute, {
38
+ className: wrapperClassNames,
39
+ sx: sxProp
40
+ }, /*#__PURE__*/React.createElement(Box, {
41
+ position: "absolute",
44
42
  display: "flex",
45
43
  width: "38px",
46
44
  className: "pc-AvatarStackBody"
@@ -48,11 +46,4 @@ const AvatarStack = ({
48
46
  };
49
47
 
50
48
  AvatarStack.displayName = "AvatarStack";
51
- AvatarStack.defaultProps = {
52
- theme
53
- };
54
- AvatarStack.propTypes = { ...COMMON.propTypes,
55
- alignRight: PropTypes.bool,
56
- ...sx.propTypes
57
- };
58
49
  export default AvatarStack;
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { SystemCommonProps, SystemTypographyProps } from './constants';
3
+ import { ComponentProps } from './utils/types';
4
+ declare const Base: import("styled-components").StyledComponent<"div", any, SystemTypographyProps & SystemCommonProps, never>;
5
+ export declare type BaseStylesProps = ComponentProps<typeof Base>;
6
+ declare function BaseStyles(props: BaseStylesProps): JSX.Element;
7
+ declare namespace BaseStyles {
8
+ var defaultProps: {
9
+ color: string;
10
+ fontFamily: string;
11
+ lineHeight: string;
12
+ };
13
+ }
14
+ export default BaseStyles;
@@ -1,27 +1,25 @@
1
- import PropTypes from 'prop-types';
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
2
3
  import React from 'react';
3
4
  import styled, { createGlobalStyle } from 'styled-components';
4
5
  import { COMMON, TYPOGRAPHY } from './constants';
5
- import useMouseIntent from './hooks/useMouseIntent';
6
- import theme from './theme';
7
6
  const GlobalStyle = createGlobalStyle`
8
7
  * { box-sizing: border-box; }
9
8
  body { margin: 0; }
10
9
  table { border-collapse: collapse; }
11
- body.intent-mouse {
12
- [role="button"]:focus,
13
- [role="tabpanel"][tabindex="0"]:focus,
14
- button:focus,
15
- summary:focus,
16
- a:focus {
17
- outline: none;
18
- box-shadow: none;
19
- }
10
+
11
+ [role="button"]:focus:not(:focus-visible):not(.focus-visible),
12
+ [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
13
+ button:focus:not(:focus-visible):not(.focus-visible),
14
+ summary:focus:not(:focus-visible):not(.focus-visible),
15
+ a:focus:not(:focus-visible):not(.focus-visible) {
16
+ outline: none;
17
+ box-shadow: none;
18
+ }
20
19
 
21
- [tabindex="0"]:focus,
22
- details-dialog:focus {
23
- outline: none;
24
- }
20
+ [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
21
+ details-dialog:focus:not(:focus-visible):not(.focus-visible) {
22
+ outline: none;
25
23
  }
26
24
  `;
27
25
  const Base = styled.div.withConfig({
@@ -33,20 +31,19 @@ function BaseStyles(props) {
33
31
  const {
34
32
  children,
35
33
  ...rest
36
- } = props;
37
- useMouseIntent();
38
- return /*#__PURE__*/React.createElement(Base, rest, /*#__PURE__*/React.createElement(GlobalStyle, null), children);
34
+ } = props; // load polyfill for :focus-visible
35
+
36
+ require('focus-visible');
37
+
38
+ return /*#__PURE__*/React.createElement(Base, _extends({}, rest, {
39
+ "data-portal-root": true
40
+ }), /*#__PURE__*/React.createElement(GlobalStyle, null), children);
39
41
  }
40
42
 
41
43
  BaseStyles.displayName = "BaseStyles";
42
44
  BaseStyles.defaultProps = {
43
- color: 'gray.9',
45
+ color: 'fg.default',
44
46
  fontFamily: 'normal',
45
- lineHeight: 'default',
46
- theme
47
- };
48
- BaseStyles.propTypes = { ...TYPOGRAPHY.propTypes,
49
- ...COMMON.propTypes,
50
- theme: PropTypes.object
47
+ lineHeight: 'default'
51
48
  };
52
49
  export default BaseStyles;
@@ -0,0 +1,7 @@
1
+ import { BoxProps } from './Box';
2
+ export declare type BorderBoxProps = BoxProps;
3
+ /**
4
+ * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
5
+ */
6
+ declare const BorderBox: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
7
+ export default BorderBox;
@@ -1,23 +1,17 @@
1
- import PropTypes from 'prop-types';
2
1
  import styled from 'styled-components';
3
2
  import Box from './Box';
4
- import { BORDER } from './constants';
5
- import sx from './sx';
6
- import theme from './theme';
3
+
4
+ /**
5
+ * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
6
+ */
7
7
  const BorderBox = styled(Box).withConfig({
8
8
  displayName: "BorderBox",
9
9
  componentId: "oreju5-0"
10
- })(["", ";", ";"], BORDER, sx);
10
+ })([""]);
11
11
  BorderBox.defaultProps = {
12
- theme,
13
12
  borderWidth: '1px',
14
13
  borderStyle: 'solid',
15
- borderColor: 'gray.2',
14
+ borderColor: 'border.default',
16
15
  borderRadius: 2
17
16
  };
18
- BorderBox.propTypes = { ...Box.propTypes,
19
- ...BORDER.propTypes,
20
- ...sx.propTypes,
21
- theme: PropTypes.object
22
- };
23
17
  export default BorderBox;
@@ -0,0 +1,6 @@
1
+ import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
2
+ import { SxProp } from './sx';
3
+ import { ComponentProps } from './utils/types';
4
+ declare const Box: import("styled-components").StyledComponent<"div", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
5
+ export declare type BoxProps = ComponentProps<typeof Box>;
6
+ export default Box;
package/lib-esm/Box.js CHANGED
@@ -1,19 +1,8 @@
1
- import PropTypes from 'prop-types';
2
1
  import styled from 'styled-components';
3
- import { COMMON, FLEX, LAYOUT } from './constants';
2
+ import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system';
4
3
  import sx from './sx';
5
- import theme from './theme';
6
4
  const Box = styled.div.withConfig({
7
5
  displayName: "Box",
8
6
  componentId: "nv15kw-0"
9
- })(["", " ", " ", " ", ";"], COMMON, FLEX, LAYOUT, sx);
10
- Box.defaultProps = {
11
- theme
12
- };
13
- Box.propTypes = { ...COMMON.propTypes,
14
- ...FLEX.propTypes,
15
- ...LAYOUT.propTypes,
16
- ...sx.propTypes,
17
- theme: PropTypes.object
18
- };
7
+ })(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
19
8
  export default Box;
@@ -0,0 +1,5 @@
1
+ import { SxProp } from './sx';
2
+ import { ComponentProps } from './utils/types';
3
+ declare const BranchName: import("styled-components").StyledComponent<"a", any, SxProp, never>;
4
+ export declare type BranchNameProps = ComponentProps<typeof BranchName>;
5
+ export default BranchName;