@primer/components 29.0.0-rc.f749c85e → 29.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (856) hide show
  1. package/CHANGELOG.md +13 -1
  2. package/dist/browser.esm.js +240 -194
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +339 -293
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Divider.js +1 -1
  7. package/lib/ActionList/Header.js +2 -2
  8. package/lib/ActionList/Item.js +10 -10
  9. package/lib/ActionList/List.js +1 -1
  10. package/lib/AvatarPair.js +1 -1
  11. package/lib/AvatarStack.js +1 -1
  12. package/lib/BranchName.js +1 -1
  13. package/lib/Breadcrumb.js +2 -2
  14. package/lib/Button/Button.js +1 -1
  15. package/lib/Button/ButtonClose.js +1 -1
  16. package/lib/Button/ButtonInvisible.js +1 -1
  17. package/lib/Button/ButtonTableList.js +1 -1
  18. package/lib/CircleBadge.js +1 -1
  19. package/lib/CircleOcticon.js +1 -1
  20. package/lib/CounterLabel.js +2 -2
  21. package/lib/Dialog/ConfirmationDialog.js +1 -1
  22. package/lib/Dialog/Dialog.js +5 -5
  23. package/lib/Dialog.js +4 -4
  24. package/lib/Dropdown.js +2 -2
  25. package/lib/DropdownStyles.js +6 -6
  26. package/lib/FilterList.js +1 -1
  27. package/lib/FilteredActionList/FilteredActionList.js +2 -2
  28. package/lib/Flash.js +1 -1
  29. package/lib/Label.js +2 -2
  30. package/lib/Link.js +1 -1
  31. package/lib/Overlay.js +1 -1
  32. package/lib/Pagehead.js +1 -1
  33. package/lib/Pagination/Pagination.js +1 -1
  34. package/lib/Popover.js +1 -1
  35. package/lib/ProgressBar.js +1 -1
  36. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  37. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  38. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  39. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  40. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  41. package/lib/SelectMenu/SelectMenuList.js +1 -1
  42. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  43. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  44. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  45. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  46. package/lib/SideNav.js +5 -5
  47. package/lib/StateLabel.js +1 -1
  48. package/lib/SubNav.js +1 -1
  49. package/lib/TabNav.js +2 -2
  50. package/lib/TextInput.js +2 -2
  51. package/lib/Timeline.js +16 -19
  52. package/lib/Tooltip.js +1 -1
  53. package/lib/UnderlineNav.js +2 -2
  54. package/lib/theme-preval.d.ts +12 -6
  55. package/lib/theme-preval.js +2930 -1738
  56. package/lib/utils/testing.d.ts +4707 -2355
  57. package/lib-esm/ActionList/Divider.js +1 -1
  58. package/lib-esm/ActionList/Header.js +2 -2
  59. package/lib-esm/ActionList/Item.js +10 -10
  60. package/lib-esm/ActionList/List.js +1 -1
  61. package/lib-esm/AvatarPair.js +1 -1
  62. package/lib-esm/AvatarStack.js +1 -1
  63. package/lib-esm/BranchName.js +1 -1
  64. package/lib-esm/Breadcrumb.js +2 -2
  65. package/lib-esm/Button/Button.js +1 -1
  66. package/lib-esm/Button/ButtonClose.js +1 -1
  67. package/lib-esm/Button/ButtonInvisible.js +1 -1
  68. package/lib-esm/Button/ButtonTableList.js +1 -1
  69. package/lib-esm/CircleBadge.js +1 -1
  70. package/lib-esm/CircleOcticon.js +1 -1
  71. package/lib-esm/CounterLabel.js +2 -2
  72. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  73. package/lib-esm/Dialog/Dialog.js +5 -5
  74. package/lib-esm/Dialog.js +4 -4
  75. package/lib-esm/Dropdown.js +2 -2
  76. package/lib-esm/DropdownStyles.js +6 -6
  77. package/lib-esm/FilterList.js +1 -1
  78. package/lib-esm/FilteredActionList/FilteredActionList.js +2 -2
  79. package/lib-esm/Flash.js +1 -1
  80. package/lib-esm/Label.js +2 -2
  81. package/lib-esm/Link.js +1 -1
  82. package/lib-esm/Overlay.js +1 -1
  83. package/lib-esm/Pagehead.js +1 -1
  84. package/lib-esm/Pagination/Pagination.js +1 -1
  85. package/lib-esm/Popover.js +1 -1
  86. package/lib-esm/ProgressBar.js +1 -1
  87. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  88. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  89. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  90. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  91. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  92. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  93. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  94. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  95. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  96. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  97. package/lib-esm/SideNav.js +5 -5
  98. package/lib-esm/StateLabel.js +1 -1
  99. package/lib-esm/SubNav.js +1 -1
  100. package/lib-esm/TabNav.js +2 -2
  101. package/lib-esm/TextInput.js +2 -2
  102. package/lib-esm/Timeline.js +12 -17
  103. package/lib-esm/Tooltip.js +1 -1
  104. package/lib-esm/UnderlineNav.js +2 -2
  105. package/lib-esm/theme-preval.d.ts +12 -6
  106. package/lib-esm/theme-preval.js +2930 -1738
  107. package/lib-esm/utils/testing.d.ts +4707 -2355
  108. package/package.json +3 -2
  109. package/.changeset/README.md +0 -8
  110. package/.changeset/config.json +0 -10
  111. package/.devcontainer/devcontainer.json +0 -8
  112. package/.eslintrc.json +0 -105
  113. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
  114. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
  115. package/.github/dependabot.yml +0 -18
  116. package/.github/pull_request_template.md +0 -18
  117. package/.github/workflows/ci.yml +0 -31
  118. package/.github/workflows/deploy_preview.yml +0 -47
  119. package/.github/workflows/deploy_production.yml +0 -70
  120. package/.github/workflows/release.yml +0 -35
  121. package/.github/workflows/release_canary.yml +0 -70
  122. package/.github/workflows/release_candidate.yml +0 -60
  123. package/.github/workflows/size.yml +0 -13
  124. package/.github/workflows/stale.yml +0 -26
  125. package/.gitignore +0 -10
  126. package/.npmrc +0 -4
  127. package/.nvmrc +0 -1
  128. package/.storybook/main.js +0 -11
  129. package/.storybook/preview.js +0 -11
  130. package/.vscode/launch.json +0 -21
  131. package/.vscode/settings.json +0 -13
  132. package/@types/@styled-system/index.d.ts +0 -0
  133. package/@types/@styled-system/prop-types/index.d.ts +0 -1
  134. package/@types/@styled-system/props/index.d.ts +0 -1
  135. package/@types/jest-styled-components/index.d.ts +0 -1
  136. package/CODEOWNERS +0 -2
  137. package/babel-defines.js +0 -13
  138. package/babel.config.js +0 -39
  139. package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
  140. package/contributor-docs/CONTRIBUTING.md +0 -274
  141. package/contributor-docs/adrs/adr-001-typescript.md +0 -23
  142. package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -106
  143. package/contributor-docs/behaviors.md +0 -132
  144. package/contributor-docs/component-contents-api-patterns.md +0 -315
  145. package/contributor-docs/principles.md +0 -39
  146. package/docs/.eslintrc +0 -0
  147. package/docs/.gitignore +0 -91
  148. package/docs/components/PropsList.js +0 -5
  149. package/docs/components/State.js +0 -9
  150. package/docs/components/constants.js +0 -34
  151. package/docs/components/index.js +0 -2
  152. package/docs/content/ActionList.mdx +0 -72
  153. package/docs/content/ActionMenu.mdx +0 -80
  154. package/docs/content/AnchoredOverlay.mdx +0 -35
  155. package/docs/content/Avatar.mdx +0 -33
  156. package/docs/content/AvatarStack.mdx +0 -43
  157. package/docs/content/BorderBox.md +0 -46
  158. package/docs/content/Box.md +0 -74
  159. package/docs/content/BranchName.md +0 -18
  160. package/docs/content/Breadcrumbs.md +0 -52
  161. package/docs/content/Buttons.md +0 -54
  162. package/docs/content/CircleBadge.md +0 -45
  163. package/docs/content/CircleOcticon.md +0 -18
  164. package/docs/content/CounterLabel.md +0 -30
  165. package/docs/content/Details.md +0 -105
  166. package/docs/content/Dialog.md +0 -108
  167. package/docs/content/Dialog2.mdx +0 -179
  168. package/docs/content/Dropdown.md +0 -72
  169. package/docs/content/DropdownMenu.mdx +0 -49
  170. package/docs/content/FilterList.md +0 -44
  171. package/docs/content/FilteredSearch.md +0 -39
  172. package/docs/content/Flash.md +0 -42
  173. package/docs/content/Flex.md +0 -58
  174. package/docs/content/FormGroup.md +0 -44
  175. package/docs/content/Grid.md +0 -59
  176. package/docs/content/Header.md +0 -79
  177. package/docs/content/Heading.md +0 -22
  178. package/docs/content/Label.md +0 -40
  179. package/docs/content/LabelGroup.md +0 -31
  180. package/docs/content/Link.md +0 -37
  181. package/docs/content/Overlay.mdx +0 -90
  182. package/docs/content/Pagehead.md +0 -27
  183. package/docs/content/Pagination.md +0 -187
  184. package/docs/content/PointerBox.md +0 -81
  185. package/docs/content/Popover.md +0 -137
  186. package/docs/content/Portal.mdx +0 -71
  187. package/docs/content/Position.md +0 -97
  188. package/docs/content/ProgressBar.mdx +0 -29
  189. package/docs/content/SelectMenu.md +0 -433
  190. package/docs/content/SelectPanel.mdx +0 -67
  191. package/docs/content/SideNav.md +0 -179
  192. package/docs/content/Spinner.mdx +0 -32
  193. package/docs/content/StateLabel.md +0 -33
  194. package/docs/content/StyledOcticon.md +0 -34
  195. package/docs/content/SubNav.md +0 -102
  196. package/docs/content/TabNav.md +0 -50
  197. package/docs/content/Text.md +0 -29
  198. package/docs/content/TextInput.md +0 -32
  199. package/docs/content/Timeline.md +0 -138
  200. package/docs/content/Tooltip.md +0 -41
  201. package/docs/content/Truncate.md +0 -65
  202. package/docs/content/UnderlineNav.md +0 -53
  203. package/docs/content/anchoredPosition.mdx +0 -163
  204. package/docs/content/core-concepts.md +0 -70
  205. package/docs/content/focusTrap.mdx +0 -103
  206. package/docs/content/focusZone.mdx +0 -145
  207. package/docs/content/getting-started.md +0 -134
  208. package/docs/content/index.md +0 -33
  209. package/docs/content/linting.md +0 -35
  210. package/docs/content/overriding-styles.mdx +0 -80
  211. package/docs/content/philosophy.md +0 -23
  212. package/docs/content/primer-theme.md +0 -89
  213. package/docs/content/ssr.mdx +0 -41
  214. package/docs/content/system-props.mdx +0 -37
  215. package/docs/content/theme-reference.md +0 -8
  216. package/docs/content/theming.md +0 -250
  217. package/docs/content/useOnEscapePress.mdx +0 -56
  218. package/docs/content/useOnOutsideClick.mdx +0 -57
  219. package/docs/content/useOpenAndCloseFocus.mdx +0 -49
  220. package/docs/content/useOverlay.mdx +0 -62
  221. package/docs/content/useSafeTimeout.mdx +0 -32
  222. package/docs/gatsby-config.js +0 -30
  223. package/docs/gatsby-node.js +0 -101
  224. package/docs/package-lock.json +0 -20979
  225. package/docs/package.json +0 -35
  226. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -21
  227. package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +0 -84
  228. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -39
  229. package/docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js +0 -48
  230. package/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js +0 -25
  231. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -54
  232. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -132
  233. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
  234. package/docs/src/props.js +0 -77
  235. package/jest.config.js +0 -13
  236. package/lib/__tests__/ActionList.d.ts +0 -1
  237. package/lib/__tests__/ActionList.js +0 -67
  238. package/lib/__tests__/ActionMenu.d.ts +0 -1
  239. package/lib/__tests__/ActionMenu.js +0 -154
  240. package/lib/__tests__/AnchoredOverlay.d.ts +0 -1
  241. package/lib/__tests__/AnchoredOverlay.js +0 -161
  242. package/lib/__tests__/Avatar.d.ts +0 -1
  243. package/lib/__tests__/Avatar.js +0 -70
  244. package/lib/__tests__/AvatarStack.d.ts +0 -1
  245. package/lib/__tests__/AvatarStack.js +0 -71
  246. package/lib/__tests__/BorderBox.d.ts +0 -1
  247. package/lib/__tests__/BorderBox.js +0 -61
  248. package/lib/__tests__/Box.d.ts +0 -1
  249. package/lib/__tests__/Box.js +0 -81
  250. package/lib/__tests__/BranchName.d.ts +0 -1
  251. package/lib/__tests__/BranchName.js +0 -39
  252. package/lib/__tests__/Breadcrumb.d.ts +0 -1
  253. package/lib/__tests__/Breadcrumb.js +0 -42
  254. package/lib/__tests__/BreadcrumbItem.d.ts +0 -1
  255. package/lib/__tests__/BreadcrumbItem.js +0 -52
  256. package/lib/__tests__/Button.d.ts +0 -1
  257. package/lib/__tests__/Button.js +0 -152
  258. package/lib/__tests__/Caret.d.ts +0 -1
  259. package/lib/__tests__/Caret.js +0 -52
  260. package/lib/__tests__/CircleBadge.d.ts +0 -1
  261. package/lib/__tests__/CircleBadge.js +0 -87
  262. package/lib/__tests__/CircleOcticon.d.ts +0 -1
  263. package/lib/__tests__/CircleOcticon.js +0 -74
  264. package/lib/__tests__/CounterLabel.d.ts +0 -1
  265. package/lib/__tests__/CounterLabel.js +0 -61
  266. package/lib/__tests__/Details.d.ts +0 -1
  267. package/lib/__tests__/Details.js +0 -120
  268. package/lib/__tests__/Dialog.d.ts +0 -1
  269. package/lib/__tests__/Dialog.js +0 -188
  270. package/lib/__tests__/Dropdown.d.ts +0 -1
  271. package/lib/__tests__/Dropdown.js +0 -70
  272. package/lib/__tests__/DropdownMenu.d.ts +0 -1
  273. package/lib/__tests__/DropdownMenu.js +0 -153
  274. package/lib/__tests__/FilterList.d.ts +0 -1
  275. package/lib/__tests__/FilterList.js +0 -39
  276. package/lib/__tests__/FilterListItem.d.ts +0 -1
  277. package/lib/__tests__/FilterListItem.js +0 -49
  278. package/lib/__tests__/FilteredSearch.d.ts +0 -1
  279. package/lib/__tests__/FilteredSearch.js +0 -39
  280. package/lib/__tests__/Flash.d.ts +0 -1
  281. package/lib/__tests__/Flash.js +0 -65
  282. package/lib/__tests__/Flex.d.ts +0 -1
  283. package/lib/__tests__/Flex.js +0 -77
  284. package/lib/__tests__/FormGroup.d.ts +0 -1
  285. package/lib/__tests__/FormGroup.js +0 -58
  286. package/lib/__tests__/Grid.d.ts +0 -1
  287. package/lib/__tests__/Grid.js +0 -107
  288. package/lib/__tests__/Header.d.ts +0 -1
  289. package/lib/__tests__/Header.js +0 -63
  290. package/lib/__tests__/Heading.d.ts +0 -1
  291. package/lib/__tests__/Heading.js +0 -112
  292. package/lib/__tests__/Label.d.ts +0 -1
  293. package/lib/__tests__/Label.js +0 -49
  294. package/lib/__tests__/LabelGroup.d.ts +0 -1
  295. package/lib/__tests__/LabelGroup.js +0 -41
  296. package/lib/__tests__/Link.d.ts +0 -1
  297. package/lib/__tests__/Link.js +0 -73
  298. package/lib/__tests__/Overlay.d.ts +0 -1
  299. package/lib/__tests__/Overlay.js +0 -145
  300. package/lib/__tests__/Pagehead.d.ts +0 -1
  301. package/lib/__tests__/Pagehead.js +0 -40
  302. package/lib/__tests__/Pagination/Pagination.d.ts +0 -1
  303. package/lib/__tests__/Pagination/Pagination.js +0 -50
  304. package/lib/__tests__/Pagination/PaginationModel.d.ts +0 -1
  305. package/lib/__tests__/Pagination/PaginationModel.js +0 -186
  306. package/lib/__tests__/PointerBox.d.ts +0 -1
  307. package/lib/__tests__/PointerBox.js +0 -49
  308. package/lib/__tests__/Popover.d.ts +0 -1
  309. package/lib/__tests__/Popover.js +0 -70
  310. package/lib/__tests__/Portal.d.ts +0 -1
  311. package/lib/__tests__/Portal.js +0 -124
  312. package/lib/__tests__/Position.d.ts +0 -1
  313. package/lib/__tests__/Position.js +0 -149
  314. package/lib/__tests__/ProgressBar.d.ts +0 -1
  315. package/lib/__tests__/ProgressBar.js +0 -71
  316. package/lib/__tests__/SelectMenu.d.ts +0 -1
  317. package/lib/__tests__/SelectMenu.js +0 -155
  318. package/lib/__tests__/SelectPanel.d.ts +0 -1
  319. package/lib/__tests__/SelectPanel.js +0 -83
  320. package/lib/__tests__/SideNav.d.ts +0 -1
  321. package/lib/__tests__/SideNav.js +0 -75
  322. package/lib/__tests__/Spinner.d.ts +0 -1
  323. package/lib/__tests__/Spinner.js +0 -56
  324. package/lib/__tests__/StateLabel.d.ts +0 -1
  325. package/lib/__tests__/StateLabel.js +0 -74
  326. package/lib/__tests__/StyledOcticon.d.ts +0 -1
  327. package/lib/__tests__/StyledOcticon.js +0 -43
  328. package/lib/__tests__/SubNav.d.ts +0 -1
  329. package/lib/__tests__/SubNav.js +0 -65
  330. package/lib/__tests__/SubNavLink.d.ts +0 -1
  331. package/lib/__tests__/SubNavLink.js +0 -52
  332. package/lib/__tests__/TabNav.d.ts +0 -1
  333. package/lib/__tests__/TabNav.js +0 -53
  334. package/lib/__tests__/Text.d.ts +0 -1
  335. package/lib/__tests__/Text.js +0 -108
  336. package/lib/__tests__/TextInput.d.ts +0 -1
  337. package/lib/__tests__/TextInput.js +0 -81
  338. package/lib/__tests__/ThemeProvider.d.ts +0 -1
  339. package/lib/__tests__/ThemeProvider.js +0 -444
  340. package/lib/__tests__/Timeline.d.ts +0 -1
  341. package/lib/__tests__/Timeline.js +0 -80
  342. package/lib/__tests__/Tooltip.d.ts +0 -1
  343. package/lib/__tests__/Tooltip.js +0 -72
  344. package/lib/__tests__/Truncate.d.ts +0 -1
  345. package/lib/__tests__/Truncate.js +0 -66
  346. package/lib/__tests__/UnderlineNav.d.ts +0 -1
  347. package/lib/__tests__/UnderlineNav.js +0 -75
  348. package/lib/__tests__/UnderlineNavLink.d.ts +0 -1
  349. package/lib/__tests__/UnderlineNavLink.js +0 -54
  350. package/lib/__tests__/behaviors/anchoredPosition.d.ts +0 -1
  351. package/lib/__tests__/behaviors/anchoredPosition.js +0 -390
  352. package/lib/__tests__/behaviors/focusTrap.d.ts +0 -1
  353. package/lib/__tests__/behaviors/focusTrap.js +0 -234
  354. package/lib/__tests__/behaviors/focusZone.d.ts +0 -1
  355. package/lib/__tests__/behaviors/focusZone.js +0 -570
  356. package/lib/__tests__/behaviors/iterateFocusableElements.d.ts +0 -1
  357. package/lib/__tests__/behaviors/iterateFocusableElements.js +0 -55
  358. package/lib/__tests__/filterObject.d.ts +0 -1
  359. package/lib/__tests__/filterObject.js +0 -30
  360. package/lib/__tests__/hooks/useAnchoredPosition.d.ts +0 -1
  361. package/lib/__tests__/hooks/useAnchoredPosition.js +0 -54
  362. package/lib/__tests__/hooks/useOnEscapePress.d.ts +0 -1
  363. package/lib/__tests__/hooks/useOnEscapePress.js +0 -32
  364. package/lib/__tests__/hooks/useOnOutsideClick.d.ts +0 -1
  365. package/lib/__tests__/hooks/useOnOutsideClick.js +0 -87
  366. package/lib/__tests__/hooks/useOpenAndCloseFocus.d.ts +0 -1
  367. package/lib/__tests__/hooks/useOpenAndCloseFocus.js +0 -60
  368. package/lib/__tests__/hooks/useProvidedStateOrCreate.d.ts +0 -1
  369. package/lib/__tests__/hooks/useProvidedStateOrCreate.js +0 -45
  370. package/lib/__tests__/theme.d.ts +0 -1
  371. package/lib/__tests__/theme.js +0 -36
  372. package/lib/__tests__/themeGet.d.ts +0 -1
  373. package/lib/__tests__/themeGet.js +0 -25
  374. package/lib/__tests__/useSafeTimeout.d.ts +0 -1
  375. package/lib/__tests__/useSafeTimeout.js +0 -45
  376. package/lib/stories/ActionList.stories.d.ts +0 -40
  377. package/lib/stories/ActionList.stories.js +0 -382
  378. package/lib/stories/ActionMenu.stories.d.ts +0 -29
  379. package/lib/stories/ActionMenu.stories.js +0 -338
  380. package/lib/stories/AnchoredOverlay.stories.d.ts +0 -6
  381. package/lib/stories/AnchoredOverlay.stories.js +0 -127
  382. package/lib/stories/AvatarStack.stories.d.ts +0 -8
  383. package/lib/stories/AvatarStack.stories.js +0 -49
  384. package/lib/stories/Button.stories.d.ts +0 -57
  385. package/lib/stories/Button.stories.js +0 -114
  386. package/lib/stories/ConfirmationDialog.stories.d.ts +0 -7
  387. package/lib/stories/ConfirmationDialog.stories.js +0 -111
  388. package/lib/stories/Dialog.stories.d.ts +0 -13
  389. package/lib/stories/Dialog.stories.js +0 -265
  390. package/lib/stories/DropdownMenu.stories.d.ts +0 -12
  391. package/lib/stories/DropdownMenu.stories.js +0 -122
  392. package/lib/stories/Overlay.stories.d.ts +0 -7
  393. package/lib/stories/Overlay.stories.js +0 -185
  394. package/lib/stories/Portal.stories.d.ts +0 -8
  395. package/lib/stories/Portal.stories.js +0 -104
  396. package/lib/stories/SelectPanel.stories.d.ts +0 -32
  397. package/lib/stories/SelectPanel.stories.js +0 -342
  398. package/lib/stories/ThemeProvider.stories.d.ts +0 -6
  399. package/lib/stories/ThemeProvider.stories.js +0 -102
  400. package/lib/stories/useAnchoredPosition.stories.d.ts +0 -8
  401. package/lib/stories/useAnchoredPosition.stories.js +0 -351
  402. package/lib/stories/useFocusTrap.stories.d.ts +0 -9
  403. package/lib/stories/useFocusTrap.stories.js +0 -356
  404. package/lib/stories/useFocusZone.stories.d.ts +0 -12
  405. package/lib/stories/useFocusZone.stories.js +0 -599
  406. package/lib-esm/__tests__/ActionList.d.ts +0 -1
  407. package/lib-esm/__tests__/ActionList.js +0 -54
  408. package/lib-esm/__tests__/ActionMenu.d.ts +0 -1
  409. package/lib-esm/__tests__/ActionMenu.js +0 -141
  410. package/lib-esm/__tests__/AnchoredOverlay.d.ts +0 -1
  411. package/lib-esm/__tests__/AnchoredOverlay.js +0 -135
  412. package/lib-esm/__tests__/Avatar.d.ts +0 -1
  413. package/lib-esm/__tests__/Avatar.js +0 -58
  414. package/lib-esm/__tests__/AvatarStack.d.ts +0 -1
  415. package/lib-esm/__tests__/AvatarStack.js +0 -57
  416. package/lib-esm/__tests__/BorderBox.d.ts +0 -1
  417. package/lib-esm/__tests__/BorderBox.js +0 -49
  418. package/lib-esm/__tests__/Box.d.ts +0 -1
  419. package/lib-esm/__tests__/Box.js +0 -69
  420. package/lib-esm/__tests__/BranchName.d.ts +0 -1
  421. package/lib-esm/__tests__/BranchName.js +0 -28
  422. package/lib-esm/__tests__/Breadcrumb.d.ts +0 -1
  423. package/lib-esm/__tests__/Breadcrumb.js +0 -31
  424. package/lib-esm/__tests__/BreadcrumbItem.d.ts +0 -1
  425. package/lib-esm/__tests__/BreadcrumbItem.js +0 -41
  426. package/lib-esm/__tests__/Button.d.ts +0 -1
  427. package/lib-esm/__tests__/Button.js +0 -141
  428. package/lib-esm/__tests__/Caret.d.ts +0 -1
  429. package/lib-esm/__tests__/Caret.js +0 -42
  430. package/lib-esm/__tests__/CircleBadge.d.ts +0 -1
  431. package/lib-esm/__tests__/CircleBadge.js +0 -73
  432. package/lib-esm/__tests__/CircleOcticon.d.ts +0 -1
  433. package/lib-esm/__tests__/CircleOcticon.js +0 -61
  434. package/lib-esm/__tests__/CounterLabel.d.ts +0 -1
  435. package/lib-esm/__tests__/CounterLabel.js +0 -49
  436. package/lib-esm/__tests__/Details.d.ts +0 -1
  437. package/lib-esm/__tests__/Details.js +0 -109
  438. package/lib-esm/__tests__/Dialog.d.ts +0 -1
  439. package/lib-esm/__tests__/Dialog.js +0 -174
  440. package/lib-esm/__tests__/Dropdown.d.ts +0 -1
  441. package/lib-esm/__tests__/Dropdown.js +0 -59
  442. package/lib-esm/__tests__/DropdownMenu.d.ts +0 -1
  443. package/lib-esm/__tests__/DropdownMenu.js +0 -139
  444. package/lib-esm/__tests__/FilterList.d.ts +0 -1
  445. package/lib-esm/__tests__/FilterList.js +0 -28
  446. package/lib-esm/__tests__/FilterListItem.d.ts +0 -1
  447. package/lib-esm/__tests__/FilterListItem.js +0 -38
  448. package/lib-esm/__tests__/FilteredSearch.d.ts +0 -1
  449. package/lib-esm/__tests__/FilteredSearch.js +0 -28
  450. package/lib-esm/__tests__/Flash.d.ts +0 -1
  451. package/lib-esm/__tests__/Flash.js +0 -53
  452. package/lib-esm/__tests__/Flex.d.ts +0 -1
  453. package/lib-esm/__tests__/Flex.js +0 -66
  454. package/lib-esm/__tests__/FormGroup.d.ts +0 -1
  455. package/lib-esm/__tests__/FormGroup.js +0 -47
  456. package/lib-esm/__tests__/Grid.d.ts +0 -1
  457. package/lib-esm/__tests__/Grid.js +0 -96
  458. package/lib-esm/__tests__/Header.d.ts +0 -1
  459. package/lib-esm/__tests__/Header.js +0 -52
  460. package/lib-esm/__tests__/Heading.d.ts +0 -1
  461. package/lib-esm/__tests__/Heading.js +0 -101
  462. package/lib-esm/__tests__/Label.d.ts +0 -1
  463. package/lib-esm/__tests__/Label.js +0 -38
  464. package/lib-esm/__tests__/LabelGroup.d.ts +0 -1
  465. package/lib-esm/__tests__/LabelGroup.js +0 -28
  466. package/lib-esm/__tests__/Link.d.ts +0 -1
  467. package/lib-esm/__tests__/Link.js +0 -62
  468. package/lib-esm/__tests__/Overlay.d.ts +0 -1
  469. package/lib-esm/__tests__/Overlay.js +0 -123
  470. package/lib-esm/__tests__/Pagehead.d.ts +0 -1
  471. package/lib-esm/__tests__/Pagehead.js +0 -28
  472. package/lib-esm/__tests__/Pagination/Pagination.d.ts +0 -1
  473. package/lib-esm/__tests__/Pagination/Pagination.js +0 -37
  474. package/lib-esm/__tests__/Pagination/PaginationModel.d.ts +0 -1
  475. package/lib-esm/__tests__/Pagination/PaginationModel.js +0 -182
  476. package/lib-esm/__tests__/PointerBox.d.ts +0 -1
  477. package/lib-esm/__tests__/PointerBox.js +0 -38
  478. package/lib-esm/__tests__/Popover.d.ts +0 -1
  479. package/lib-esm/__tests__/Popover.js +0 -56
  480. package/lib-esm/__tests__/Portal.d.ts +0 -1
  481. package/lib-esm/__tests__/Portal.js +0 -104
  482. package/lib-esm/__tests__/Position.d.ts +0 -1
  483. package/lib-esm/__tests__/Position.js +0 -138
  484. package/lib-esm/__tests__/ProgressBar.d.ts +0 -1
  485. package/lib-esm/__tests__/ProgressBar.js +0 -60
  486. package/lib-esm/__tests__/SelectMenu.d.ts +0 -1
  487. package/lib-esm/__tests__/SelectMenu.js +0 -145
  488. package/lib-esm/__tests__/SelectPanel.d.ts +0 -1
  489. package/lib-esm/__tests__/SelectPanel.js +0 -67
  490. package/lib-esm/__tests__/SideNav.d.ts +0 -1
  491. package/lib-esm/__tests__/SideNav.js +0 -63
  492. package/lib-esm/__tests__/Spinner.d.ts +0 -1
  493. package/lib-esm/__tests__/Spinner.js +0 -45
  494. package/lib-esm/__tests__/StateLabel.d.ts +0 -1
  495. package/lib-esm/__tests__/StateLabel.js +0 -63
  496. package/lib-esm/__tests__/StyledOcticon.d.ts +0 -1
  497. package/lib-esm/__tests__/StyledOcticon.js +0 -31
  498. package/lib-esm/__tests__/SubNav.d.ts +0 -1
  499. package/lib-esm/__tests__/SubNav.js +0 -52
  500. package/lib-esm/__tests__/SubNavLink.d.ts +0 -1
  501. package/lib-esm/__tests__/SubNavLink.js +0 -41
  502. package/lib-esm/__tests__/TabNav.d.ts +0 -1
  503. package/lib-esm/__tests__/TabNav.js +0 -42
  504. package/lib-esm/__tests__/Text.d.ts +0 -1
  505. package/lib-esm/__tests__/Text.js +0 -95
  506. package/lib-esm/__tests__/TextInput.d.ts +0 -1
  507. package/lib-esm/__tests__/TextInput.js +0 -70
  508. package/lib-esm/__tests__/ThemeProvider.d.ts +0 -1
  509. package/lib-esm/__tests__/ThemeProvider.js +0 -408
  510. package/lib-esm/__tests__/Timeline.d.ts +0 -1
  511. package/lib-esm/__tests__/Timeline.js +0 -69
  512. package/lib-esm/__tests__/Tooltip.d.ts +0 -1
  513. package/lib-esm/__tests__/Tooltip.js +0 -61
  514. package/lib-esm/__tests__/Truncate.d.ts +0 -1
  515. package/lib-esm/__tests__/Truncate.js +0 -55
  516. package/lib-esm/__tests__/UnderlineNav.d.ts +0 -1
  517. package/lib-esm/__tests__/UnderlineNav.js +0 -62
  518. package/lib-esm/__tests__/UnderlineNavLink.d.ts +0 -1
  519. package/lib-esm/__tests__/UnderlineNavLink.js +0 -43
  520. package/lib-esm/__tests__/behaviors/anchoredPosition.d.ts +0 -1
  521. package/lib-esm/__tests__/behaviors/anchoredPosition.js +0 -388
  522. package/lib-esm/__tests__/behaviors/focusTrap.d.ts +0 -1
  523. package/lib-esm/__tests__/behaviors/focusTrap.js +0 -227
  524. package/lib-esm/__tests__/behaviors/focusZone.d.ts +0 -1
  525. package/lib-esm/__tests__/behaviors/focusZone.js +0 -487
  526. package/lib-esm/__tests__/behaviors/iterateFocusableElements.d.ts +0 -1
  527. package/lib-esm/__tests__/behaviors/iterateFocusableElements.js +0 -48
  528. package/lib-esm/__tests__/filterObject.d.ts +0 -1
  529. package/lib-esm/__tests__/filterObject.js +0 -27
  530. package/lib-esm/__tests__/hooks/useAnchoredPosition.d.ts +0 -1
  531. package/lib-esm/__tests__/hooks/useAnchoredPosition.js +0 -46
  532. package/lib-esm/__tests__/hooks/useOnEscapePress.d.ts +0 -1
  533. package/lib-esm/__tests__/hooks/useOnEscapePress.js +0 -23
  534. package/lib-esm/__tests__/hooks/useOnOutsideClick.d.ts +0 -1
  535. package/lib-esm/__tests__/hooks/useOnOutsideClick.js +0 -68
  536. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.d.ts +0 -1
  537. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.js +0 -52
  538. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.d.ts +0 -1
  539. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.js +0 -36
  540. package/lib-esm/__tests__/theme.d.ts +0 -1
  541. package/lib-esm/__tests__/theme.js +0 -33
  542. package/lib-esm/__tests__/themeGet.d.ts +0 -1
  543. package/lib-esm/__tests__/themeGet.js +0 -22
  544. package/lib-esm/__tests__/useSafeTimeout.d.ts +0 -1
  545. package/lib-esm/__tests__/useSafeTimeout.js +0 -39
  546. package/lib-esm/stories/ActionList.stories.d.ts +0 -40
  547. package/lib-esm/stories/ActionList.stories.js +0 -334
  548. package/lib-esm/stories/ActionMenu.stories.d.ts +0 -29
  549. package/lib-esm/stories/ActionMenu.stories.js +0 -293
  550. package/lib-esm/stories/AnchoredOverlay.stories.d.ts +0 -6
  551. package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
  552. package/lib-esm/stories/AvatarStack.stories.d.ts +0 -8
  553. package/lib-esm/stories/AvatarStack.stories.js +0 -32
  554. package/lib-esm/stories/Button.stories.d.ts +0 -57
  555. package/lib-esm/stories/Button.stories.js +0 -78
  556. package/lib-esm/stories/ConfirmationDialog.stories.d.ts +0 -7
  557. package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
  558. package/lib-esm/stories/Dialog.stories.d.ts +0 -13
  559. package/lib-esm/stories/Dialog.stories.js +0 -240
  560. package/lib-esm/stories/DropdownMenu.stories.d.ts +0 -12
  561. package/lib-esm/stories/DropdownMenu.stories.js +0 -94
  562. package/lib-esm/stories/Overlay.stories.d.ts +0 -7
  563. package/lib-esm/stories/Overlay.stories.js +0 -154
  564. package/lib-esm/stories/Portal.stories.d.ts +0 -8
  565. package/lib-esm/stories/Portal.stories.js +0 -68
  566. package/lib-esm/stories/SelectPanel.stories.d.ts +0 -32
  567. package/lib-esm/stories/SelectPanel.stories.js +0 -284
  568. package/lib-esm/stories/ThemeProvider.stories.d.ts +0 -6
  569. package/lib-esm/stories/ThemeProvider.stories.js +0 -83
  570. package/lib-esm/stories/useAnchoredPosition.stories.d.ts +0 -8
  571. package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
  572. package/lib-esm/stories/useFocusTrap.stories.d.ts +0 -9
  573. package/lib-esm/stories/useFocusTrap.stories.js +0 -309
  574. package/lib-esm/stories/useFocusZone.stories.d.ts +0 -12
  575. package/lib-esm/stories/useFocusZone.stories.js +0 -554
  576. package/migrating.md +0 -250
  577. package/now.json +0 -17
  578. package/package-lock.json +0 -28656
  579. package/rollup.config.js +0 -36
  580. package/script/build +0 -19
  581. package/script/setup +0 -12
  582. package/src/ActionList/Divider.tsx +0 -25
  583. package/src/ActionList/Group.tsx +0 -45
  584. package/src/ActionList/Header.tsx +0 -74
  585. package/src/ActionList/Item.tsx +0 -460
  586. package/src/ActionList/List.tsx +0 -253
  587. package/src/ActionList/index.ts +0 -21
  588. package/src/ActionMenu.tsx +0 -106
  589. package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -180
  590. package/src/AnchoredOverlay/index.ts +0 -2
  591. package/src/Avatar.tsx +0 -46
  592. package/src/AvatarPair.tsx +0 -31
  593. package/src/AvatarStack.tsx +0 -161
  594. package/src/BaseStyles.tsx +0 -53
  595. package/src/BorderBox.tsx +0 -18
  596. package/src/Box.tsx +0 -54
  597. package/src/BranchName.tsx +0 -19
  598. package/src/Breadcrumb.tsx +0 -87
  599. package/src/Button/Button.tsx +0 -40
  600. package/src/Button/ButtonBase.tsx +0 -43
  601. package/src/Button/ButtonClose.tsx +0 -40
  602. package/src/Button/ButtonDanger.tsx +0 -43
  603. package/src/Button/ButtonGroup.tsx +0 -55
  604. package/src/Button/ButtonInvisible.tsx +0 -27
  605. package/src/Button/ButtonOutline.tsx +0 -43
  606. package/src/Button/ButtonPrimary.tsx +0 -41
  607. package/src/Button/ButtonStyles.tsx +0 -36
  608. package/src/Button/ButtonTableList.tsx +0 -58
  609. package/src/Button/index.ts +0 -16
  610. package/src/Caret.tsx +0 -133
  611. package/src/CircleBadge.tsx +0 -55
  612. package/src/CircleOcticon.tsx +0 -37
  613. package/src/CounterLabel.tsx +0 -52
  614. package/src/Details.tsx +0 -23
  615. package/src/Dialog/ConfirmationDialog.tsx +0 -184
  616. package/src/Dialog/Dialog.tsx +0 -419
  617. package/src/Dialog.tsx +0 -149
  618. package/src/Dropdown.tsx +0 -158
  619. package/src/DropdownMenu/DropdownButton.tsx +0 -15
  620. package/src/DropdownMenu/DropdownMenu.tsx +0 -115
  621. package/src/DropdownMenu/index.ts +0 -4
  622. package/src/DropdownStyles.ts +0 -128
  623. package/src/FilterList.tsx +0 -81
  624. package/src/FilteredActionList/FilteredActionList.tsx +0 -152
  625. package/src/FilteredActionList/index.ts +0 -2
  626. package/src/FilteredSearch.tsx +0 -28
  627. package/src/Flash.tsx +0 -77
  628. package/src/Flex.tsx +0 -15
  629. package/src/FormGroup.tsx +0 -27
  630. package/src/Grid.tsx +0 -15
  631. package/src/Header.tsx +0 -84
  632. package/src/Heading.tsx +0 -21
  633. package/src/Label.tsx +0 -75
  634. package/src/LabelGroup.tsx +0 -18
  635. package/src/Link.tsx +0 -46
  636. package/src/Overlay.tsx +0 -194
  637. package/src/Pagehead.tsx +0 -17
  638. package/src/Pagination/Pagination.tsx +0 -214
  639. package/src/Pagination/index.ts +0 -4
  640. package/src/Pagination/model.tsx +0 -187
  641. package/src/PointerBox.tsx +0 -31
  642. package/src/Popover.tsx +0 -236
  643. package/src/Portal/Portal.tsx +0 -96
  644. package/src/Portal/index.ts +0 -5
  645. package/src/Position.tsx +0 -63
  646. package/src/ProgressBar.tsx +0 -52
  647. package/src/SelectMenu/SelectMenu.tsx +0 -125
  648. package/src/SelectMenu/SelectMenuContext.tsx +0 -9
  649. package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
  650. package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
  651. package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
  652. package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
  653. package/src/SelectMenu/SelectMenuItem.tsx +0 -137
  654. package/src/SelectMenu/SelectMenuList.tsx +0 -42
  655. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
  656. package/src/SelectMenu/SelectMenuModal.tsx +0 -121
  657. package/src/SelectMenu/SelectMenuTab.tsx +0 -88
  658. package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
  659. package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
  660. package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
  661. package/src/SelectMenu/index.ts +0 -15
  662. package/src/SelectPanel/SelectPanel.tsx +0 -173
  663. package/src/SelectPanel/index.ts +0 -2
  664. package/src/SideNav.tsx +0 -193
  665. package/src/Spinner.tsx +0 -59
  666. package/src/StateLabel.tsx +0 -110
  667. package/src/StyledOcticon.tsx +0 -24
  668. package/src/SubNav.tsx +0 -129
  669. package/src/TabNav.tsx +0 -77
  670. package/src/Text.tsx +0 -13
  671. package/src/TextInput.tsx +0 -183
  672. package/src/ThemeProvider.tsx +0 -176
  673. package/src/Timeline.tsx +0 -141
  674. package/src/Tooltip.tsx +0 -263
  675. package/src/Truncate.tsx +0 -36
  676. package/src/UnderlineNav.tsx +0 -110
  677. package/src/__tests__/.eslintrc.json +0 -11
  678. package/src/__tests__/ActionList.tsx +0 -49
  679. package/src/__tests__/ActionMenu.tsx +0 -138
  680. package/src/__tests__/AnchoredOverlay.tsx +0 -151
  681. package/src/__tests__/Avatar.tsx +0 -45
  682. package/src/__tests__/AvatarStack.tsx +0 -45
  683. package/src/__tests__/BorderBox.tsx +0 -44
  684. package/src/__tests__/Box.tsx +0 -43
  685. package/src/__tests__/BranchName.tsx +0 -27
  686. package/src/__tests__/Breadcrumb.tsx +0 -31
  687. package/src/__tests__/BreadcrumbItem.tsx +0 -32
  688. package/src/__tests__/Button.tsx +0 -129
  689. package/src/__tests__/Caret.tsx +0 -36
  690. package/src/__tests__/CircleBadge.tsx +0 -69
  691. package/src/__tests__/CircleOcticon.tsx +0 -52
  692. package/src/__tests__/CounterLabel.tsx +0 -51
  693. package/src/__tests__/Details.tsx +0 -116
  694. package/src/__tests__/Dialog.tsx +0 -157
  695. package/src/__tests__/Dropdown.tsx +0 -57
  696. package/src/__tests__/DropdownMenu.tsx +0 -138
  697. package/src/__tests__/FilterList.tsx +0 -27
  698. package/src/__tests__/FilterListItem.tsx +0 -32
  699. package/src/__tests__/FilteredSearch.tsx +0 -27
  700. package/src/__tests__/Flash.tsx +0 -46
  701. package/src/__tests__/Flex.tsx +0 -59
  702. package/src/__tests__/FormGroup.tsx +0 -39
  703. package/src/__tests__/Grid.tsx +0 -83
  704. package/src/__tests__/Header.tsx +0 -50
  705. package/src/__tests__/Heading.tsx +0 -92
  706. package/src/__tests__/Label.tsx +0 -35
  707. package/src/__tests__/LabelGroup.tsx +0 -31
  708. package/src/__tests__/Link.tsx +0 -48
  709. package/src/__tests__/Overlay.tsx +0 -103
  710. package/src/__tests__/Pagehead.tsx +0 -24
  711. package/src/__tests__/Pagination/Pagination.tsx +0 -31
  712. package/src/__tests__/Pagination/PaginationModel.tsx +0 -133
  713. package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +0 -184
  714. package/src/__tests__/PointerBox.tsx +0 -35
  715. package/src/__tests__/Popover.tsx +0 -69
  716. package/src/__tests__/Portal.tsx +0 -103
  717. package/src/__tests__/Position.tsx +0 -118
  718. package/src/__tests__/ProgressBar.tsx +0 -41
  719. package/src/__tests__/SelectMenu.tsx +0 -142
  720. package/src/__tests__/SelectPanel.tsx +0 -65
  721. package/src/__tests__/SideNav.tsx +0 -63
  722. package/src/__tests__/Spinner.tsx +0 -44
  723. package/src/__tests__/StateLabel.tsx +0 -50
  724. package/src/__tests__/StyledOcticon.tsx +0 -28
  725. package/src/__tests__/SubNav.tsx +0 -51
  726. package/src/__tests__/SubNavLink.tsx +0 -32
  727. package/src/__tests__/TabNav.tsx +0 -33
  728. package/src/__tests__/Text.tsx +0 -79
  729. package/src/__tests__/TextInput.tsx +0 -50
  730. package/src/__tests__/ThemeProvider.tsx +0 -441
  731. package/src/__tests__/Timeline.tsx +0 -59
  732. package/src/__tests__/Tooltip.tsx +0 -53
  733. package/src/__tests__/Truncate.tsx +0 -45
  734. package/src/__tests__/UnderlineNav.tsx +0 -59
  735. package/src/__tests__/UnderlineNavLink.tsx +0 -32
  736. package/src/__tests__/__snapshots__/ActionList.tsx.snap +0 -27
  737. package/src/__tests__/__snapshots__/ActionMenu.tsx.snap +0 -80
  738. package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap +0 -332
  739. package/src/__tests__/__snapshots__/Avatar.tsx.snap +0 -19
  740. package/src/__tests__/__snapshots__/AvatarStack.tsx.snap +0 -377
  741. package/src/__tests__/__snapshots__/BorderBox.tsx.snap +0 -14
  742. package/src/__tests__/__snapshots__/Box.tsx.snap +0 -201
  743. package/src/__tests__/__snapshots__/BranchName.tsx.snap +0 -17
  744. package/src/__tests__/__snapshots__/Breadcrumb.tsx.snap +0 -29
  745. package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +0 -79
  746. package/src/__tests__/__snapshots__/Button.tsx.snap +0 -832
  747. package/src/__tests__/__snapshots__/Caret.tsx.snap +0 -373
  748. package/src/__tests__/__snapshots__/CircleBadge.tsx.snap +0 -141
  749. package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +0 -64
  750. package/src/__tests__/__snapshots__/CounterLabel.tsx.snap +0 -22
  751. package/src/__tests__/__snapshots__/Details.tsx.snap +0 -15
  752. package/src/__tests__/__snapshots__/Dialog.tsx.snap +0 -200
  753. package/src/__tests__/__snapshots__/Dropdown.tsx.snap +0 -249
  754. package/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +0 -106
  755. package/src/__tests__/__snapshots__/FilterList.tsx.snap +0 -13
  756. package/src/__tests__/__snapshots__/FilterListItem.tsx.snap +0 -80
  757. package/src/__tests__/__snapshots__/FilteredSearch.tsx.snap +0 -32
  758. package/src/__tests__/__snapshots__/Flash.tsx.snap +0 -32
  759. package/src/__tests__/__snapshots__/Flex.tsx.snap +0 -130
  760. package/src/__tests__/__snapshots__/FormGroup.tsx.snap +0 -25
  761. package/src/__tests__/__snapshots__/Grid.tsx.snap +0 -178
  762. package/src/__tests__/__snapshots__/Header.tsx.snap +0 -79
  763. package/src/__tests__/__snapshots__/Heading.tsx.snap +0 -13
  764. package/src/__tests__/__snapshots__/Label.tsx.snap +0 -74
  765. package/src/__tests__/__snapshots__/LabelGroup.tsx.snap +0 -15
  766. package/src/__tests__/__snapshots__/Link.tsx.snap +0 -213
  767. package/src/__tests__/__snapshots__/Pagehead.tsx.snap +0 -15
  768. package/src/__tests__/__snapshots__/PointerBox.tsx.snap +0 -174
  769. package/src/__tests__/__snapshots__/Popover.tsx.snap +0 -4687
  770. package/src/__tests__/__snapshots__/Position.tsx.snap +0 -44
  771. package/src/__tests__/__snapshots__/ProgressBar.tsx.snap +0 -53
  772. package/src/__tests__/__snapshots__/SelectMenu.tsx.snap +0 -469
  773. package/src/__tests__/__snapshots__/SelectPanel.tsx.snap +0 -123
  774. package/src/__tests__/__snapshots__/SideNav.tsx.snap +0 -143
  775. package/src/__tests__/__snapshots__/Spinner.tsx.snap +0 -33
  776. package/src/__tests__/__snapshots__/StateLabel.tsx.snap +0 -409
  777. package/src/__tests__/__snapshots__/StyledOcticon.tsx.snap +0 -25
  778. package/src/__tests__/__snapshots__/SubNav.tsx.snap +0 -44
  779. package/src/__tests__/__snapshots__/SubNavLink.tsx.snap +0 -199
  780. package/src/__tests__/__snapshots__/TabNav.tsx.snap +0 -58
  781. package/src/__tests__/__snapshots__/Text.tsx.snap +0 -7
  782. package/src/__tests__/__snapshots__/TextInput.tsx.snap +0 -440
  783. package/src/__tests__/__snapshots__/ThemeProvider.tsx.snap +0 -15
  784. package/src/__tests__/__snapshots__/Timeline.tsx.snap +0 -157
  785. package/src/__tests__/__snapshots__/Tooltip.tsx.snap +0 -227
  786. package/src/__tests__/__snapshots__/Truncate.tsx.snap +0 -17
  787. package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap +0 -59
  788. package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap +0 -130
  789. package/src/__tests__/behaviors/anchoredPosition.ts +0 -295
  790. package/src/__tests__/behaviors/focusTrap.tsx +0 -236
  791. package/src/__tests__/behaviors/focusZone.tsx +0 -549
  792. package/src/__tests__/behaviors/iterateFocusableElements.tsx +0 -61
  793. package/src/__tests__/filterObject.ts +0 -54
  794. package/src/__tests__/hooks/useAnchoredPosition.tsx +0 -31
  795. package/src/__tests__/hooks/useOnEscapePress.tsx +0 -16
  796. package/src/__tests__/hooks/useOnOutsideClick.tsx +0 -48
  797. package/src/__tests__/hooks/useOpenAndCloseFocus.tsx +0 -48
  798. package/src/__tests__/hooks/useProvidedStateOrCreate.tsx +0 -39
  799. package/src/__tests__/theme.ts +0 -41
  800. package/src/__tests__/themeGet.ts +0 -15
  801. package/src/__tests__/useSafeTimeout.tsx +0 -36
  802. package/src/behaviors/anchoredPosition.ts +0 -442
  803. package/src/behaviors/focusTrap.ts +0 -184
  804. package/src/behaviors/focusZone.ts +0 -713
  805. package/src/constants.ts +0 -62
  806. package/src/hooks/index.ts +0 -11
  807. package/src/hooks/useAnchoredPosition.ts +0 -53
  808. package/src/hooks/useCombinedRefs.ts +0 -40
  809. package/src/hooks/useDetails.tsx +0 -54
  810. package/src/hooks/useDialog.ts +0 -121
  811. package/src/hooks/useFocusTrap.ts +0 -80
  812. package/src/hooks/useFocusZone.ts +0 -64
  813. package/src/hooks/useOnEscapePress.ts +0 -63
  814. package/src/hooks/useOnOutsideClick.tsx +0 -82
  815. package/src/hooks/useOpenAndCloseFocus.ts +0 -27
  816. package/src/hooks/useOverlay.tsx +0 -32
  817. package/src/hooks/useProvidedRefOrCreate.ts +0 -14
  818. package/src/hooks/useProvidedStateOrCreate.ts +0 -27
  819. package/src/hooks/useRenderForcingRef.ts +0 -22
  820. package/src/hooks/useResizeObserver.ts +0 -11
  821. package/src/hooks/useSafeTimeout.ts +0 -38
  822. package/src/hooks/useScrollFlash.ts +0 -21
  823. package/src/index.ts +0 -165
  824. package/src/polyfills/eventListenerSignal.ts +0 -66
  825. package/src/stories/ActionList.stories.tsx +0 -364
  826. package/src/stories/ActionMenu.stories.tsx +0 -322
  827. package/src/stories/AnchoredOverlay.stories.tsx +0 -117
  828. package/src/stories/AvatarStack.stories.tsx +0 -37
  829. package/src/stories/Button.stories.tsx +0 -88
  830. package/src/stories/ConfirmationDialog.stories.tsx +0 -105
  831. package/src/stories/Dialog.stories.tsx +0 -240
  832. package/src/stories/DropdownMenu.stories.tsx +0 -84
  833. package/src/stories/Overlay.stories.tsx +0 -186
  834. package/src/stories/Portal.stories.tsx +0 -109
  835. package/src/stories/SelectPanel.stories.tsx +0 -300
  836. package/src/stories/ThemeProvider.stories.tsx +0 -104
  837. package/src/stories/useAnchoredPosition.stories.tsx +0 -320
  838. package/src/stories/useFocusTrap.stories.tsx +0 -400
  839. package/src/stories/useFocusZone.stories.tsx +0 -663
  840. package/src/sx.ts +0 -9
  841. package/src/theme-preval.js +0 -120
  842. package/src/theme.ts +0 -3
  843. package/src/utils/deprecate.tsx +0 -73
  844. package/src/utils/isNumeric.tsx +0 -4
  845. package/src/utils/iterateFocusableElements.ts +0 -121
  846. package/src/utils/ssr.tsx +0 -1
  847. package/src/utils/test-deprecations.tsx +0 -19
  848. package/src/utils/test-helpers.tsx +0 -7
  849. package/src/utils/test-matchers.tsx +0 -109
  850. package/src/utils/testing.tsx +0 -243
  851. package/src/utils/theme.js +0 -64
  852. package/src/utils/types.ts +0 -90
  853. package/src/utils/uniqueId.ts +0 -6
  854. package/src/utils/userAgent.ts +0 -7
  855. package/stats.html +0 -3279
  856. package/tsconfig.json +0 -20
package/src/__tests__/__snapshots__/Popover.tsx.snap DELETED
@@ -1,4687 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Popover Popover.Content renders consistently 1`] = `
4
- .c1 {
5
- position: absolute;
6
- z-index: 100;
7
- display: block;
8
- }
9
-
10
- .c2 {
11
- border: 1px solid #e1e4e8;
12
- border-radius: 6px;
13
- position: relative;
14
- width: 232px;
15
- margin-right: auto;
16
- margin-left: auto;
17
- padding: 24px;
18
- background-color: #ffffff;
19
- }
20
-
21
- .c2::before,
22
- .c2::after {
23
- position: absolute;
24
- left: 50%;
25
- display: inline-block;
26
- content: '';
27
- }
28
-
29
- .c2::before {
30
- top: -16px;
31
- margin-left: -9px;
32
- border: 8px solid transparent;
33
- border-bottom-color: #e1e4e8;
34
- }
35
-
36
- .c2::after {
37
- top: -14px;
38
- margin-left: -8px;
39
- border: 7px solid transparent;
40
- border-bottom-color: #ffffff;
41
- }
42
-
43
- .c0.caret-pos--bottom .c2::before,
44
- .c0.caret-pos--bottom-right .c2::before,
45
- .c0.caret-pos--bottom-left .c2::before,
46
- .c0.caret-pos--bottom .c2::after,
47
- .c0.caret-pos--bottom-right .c2::after,
48
- .c0.caret-pos--bottom-left .c2::after {
49
- top: auto;
50
- border-bottom-color: transparent;
51
- }
52
-
53
- .c0.caret-pos--bottom .c2::before,
54
- .c0.caret-pos--bottom-right .c2::before,
55
- .c0.caret-pos--bottom-left .c2::before {
56
- bottom: -16px;
57
- border-top-color: #e1e4e8;
58
- }
59
-
60
- .c0.caret-pos--bottom .c2::after,
61
- .c0.caret-pos--bottom-right .c2::after,
62
- .c0.caret-pos--bottom-left .c2::after {
63
- bottom: -14px;
64
- border-top-color: #ffffff;
65
- }
66
-
67
- .c0.caret-pos--top-right .c2,
68
- .c0.caret-pos--bottom-right .c2 {
69
- right: -9px;
70
- margin-right: 0;
71
- }
72
-
73
- .c0.caret-pos--top-right .c2::before,
74
- .c0.caret-pos--bottom-right .c2::before,
75
- .c0.caret-pos--top-right .c2::after,
76
- .c0.caret-pos--bottom-right .c2::after {
77
- left: auto;
78
- margin-left: 0;
79
- }
80
-
81
- .c0.caret-pos--top-right .c2::before,
82
- .c0.caret-pos--bottom-right .c2::before {
83
- right: 20px;
84
- }
85
-
86
- .c0.caret-pos--top-right .c2::after,
87
- .c0.caret-pos--bottom-right .c2::after {
88
- right: 21px;
89
- }
90
-
91
- .c0.caret-pos--top-left .c2,
92
- .c0.caret-pos--bottom-left .c2 {
93
- left: -9px;
94
- margin-left: 0;
95
- }
96
-
97
- .c0.caret-pos--top-left .c2::before,
98
- .c0.caret-pos--bottom-left .c2::before,
99
- .c0.caret-pos--top-left .c2::after,
100
- .c0.caret-pos--bottom-left .c2::after {
101
- left: 24px;
102
- margin-left: 0;
103
- }
104
-
105
- .c0.caret-pos--top-left .c2::after,
106
- .c0.caret-pos--bottom-left .c2::after {
107
- left: calc(24px + 1px);
108
- }
109
-
110
- .c0.caret-pos--right .c2::before,
111
- .c0.caret-pos--right-top .c2::before,
112
- .c0.caret-pos--right-bottom .c2::before,
113
- .c0.caret-pos--left .c2::before,
114
- .c0.caret-pos--left-top .c2::before,
115
- .c0.caret-pos--left-bottom .c2::before,
116
- .c0.caret-pos--right .c2::after,
117
- .c0.caret-pos--right-top .c2::after,
118
- .c0.caret-pos--right-bottom .c2::after,
119
- .c0.caret-pos--left .c2::after,
120
- .c0.caret-pos--left-top .c2::after,
121
- .c0.caret-pos--left-bottom .c2::after {
122
- top: 50%;
123
- left: auto;
124
- margin-left: 0;
125
- border-bottom-color: transparent;
126
- }
127
-
128
- .c0.caret-pos--right .c2::before,
129
- .c0.caret-pos--right-top .c2::before,
130
- .c0.caret-pos--right-bottom .c2::before,
131
- .c0.caret-pos--left .c2::before,
132
- .c0.caret-pos--left-top .c2::before,
133
- .c0.caret-pos--left-bottom .c2::before {
134
- margin-top: calc((8px + 1px) * -1);
135
- }
136
-
137
- .c0.caret-pos--right .c2::after,
138
- .c0.caret-pos--right-top .c2::after,
139
- .c0.caret-pos--right-bottom .c2::after,
140
- .c0.caret-pos--left .c2::after,
141
- .c0.caret-pos--left-top .c2::after,
142
- .c0.caret-pos--left-bottom .c2::after {
143
- margin-top: -8px;
144
- }
145
-
146
- .c0.caret-pos--right .c2::before,
147
- .c0.caret-pos--right-top .c2::before,
148
- .c0.caret-pos--right-bottom .c2::before {
149
- right: -16px;
150
- border-left-color: #e1e4e8;
151
- }
152
-
153
- .c0.caret-pos--right .c2::after,
154
- .c0.caret-pos--right-top .c2::after,
155
- .c0.caret-pos--right-bottom .c2::after {
156
- right: -14px;
157
- border-left-color: #ffffff;
158
- }
159
-
160
- .c0.caret-pos--left .c2::before,
161
- .c0.caret-pos--left-top .c2::before,
162
- .c0.caret-pos--left-bottom .c2::before {
163
- left: -16px;
164
- border-right-color: #e1e4e8;
165
- }
166
-
167
- .c0.caret-pos--left .c2::after,
168
- .c0.caret-pos--left-top .c2::after,
169
- .c0.caret-pos--left-bottom .c2::after {
170
- left: -14px;
171
- border-right-color: #ffffff;
172
- }
173
-
174
- .c0.caret-pos--right-top .c2::before,
175
- .c0.caret-pos--left-top .c2::before,
176
- .c0.caret-pos--right-top .c2::after,
177
- .c0.caret-pos--left-top .c2::after {
178
- top: 24px;
179
- }
180
-
181
- .c0.caret-pos--right-bottom .c2::before,
182
- .c0.caret-pos--left-bottom .c2::before,
183
- .c0.caret-pos--right-bottom .c2::after,
184
- .c0.caret-pos--left-bottom .c2::after {
185
- top: auto;
186
- }
187
-
188
- .c0.caret-pos--right-bottom .c2::before,
189
- .c0.caret-pos--left-bottom .c2::before {
190
- bottom: 16px;
191
- }
192
-
193
- .c0.caret-pos--right-bottom .c2::after,
194
- .c0.caret-pos--left-bottom .c2::after {
195
- bottom: calc(16px + 1px);
196
- }
197
-
198
- <div
199
- className="c0 c1 caret-pos--top"
200
- open={true}
201
- >
202
- <div
203
- className="c2"
204
- >
205
- Hello!
206
- </div>
207
- </div>
208
- `;
209
-
210
- exports[`Popover renders consistently 1`] = `
211
- .c1 {
212
- position: absolute;
213
- z-index: 100;
214
- display: block;
215
- }
216
-
217
- .c2 {
218
- border: 1px solid #e1e4e8;
219
- border-radius: 6px;
220
- position: relative;
221
- width: 232px;
222
- margin-right: auto;
223
- margin-left: auto;
224
- padding: 24px;
225
- background-color: #ffffff;
226
- }
227
-
228
- .c2::before,
229
- .c2::after {
230
- position: absolute;
231
- left: 50%;
232
- display: inline-block;
233
- content: '';
234
- }
235
-
236
- .c2::before {
237
- top: -16px;
238
- margin-left: -9px;
239
- border: 8px solid transparent;
240
- border-bottom-color: #e1e4e8;
241
- }
242
-
243
- .c2::after {
244
- top: -14px;
245
- margin-left: -8px;
246
- border: 7px solid transparent;
247
- border-bottom-color: #ffffff;
248
- }
249
-
250
- .c0.caret-pos--bottom .c2::before,
251
- .c0.caret-pos--bottom-right .c2::before,
252
- .c0.caret-pos--bottom-left .c2::before,
253
- .c0.caret-pos--bottom .c2::after,
254
- .c0.caret-pos--bottom-right .c2::after,
255
- .c0.caret-pos--bottom-left .c2::after {
256
- top: auto;
257
- border-bottom-color: transparent;
258
- }
259
-
260
- .c0.caret-pos--bottom .c2::before,
261
- .c0.caret-pos--bottom-right .c2::before,
262
- .c0.caret-pos--bottom-left .c2::before {
263
- bottom: -16px;
264
- border-top-color: #e1e4e8;
265
- }
266
-
267
- .c0.caret-pos--bottom .c2::after,
268
- .c0.caret-pos--bottom-right .c2::after,
269
- .c0.caret-pos--bottom-left .c2::after {
270
- bottom: -14px;
271
- border-top-color: #ffffff;
272
- }
273
-
274
- .c0.caret-pos--top-right .c2,
275
- .c0.caret-pos--bottom-right .c2 {
276
- right: -9px;
277
- margin-right: 0;
278
- }
279
-
280
- .c0.caret-pos--top-right .c2::before,
281
- .c0.caret-pos--bottom-right .c2::before,
282
- .c0.caret-pos--top-right .c2::after,
283
- .c0.caret-pos--bottom-right .c2::after {
284
- left: auto;
285
- margin-left: 0;
286
- }
287
-
288
- .c0.caret-pos--top-right .c2::before,
289
- .c0.caret-pos--bottom-right .c2::before {
290
- right: 20px;
291
- }
292
-
293
- .c0.caret-pos--top-right .c2::after,
294
- .c0.caret-pos--bottom-right .c2::after {
295
- right: 21px;
296
- }
297
-
298
- .c0.caret-pos--top-left .c2,
299
- .c0.caret-pos--bottom-left .c2 {
300
- left: -9px;
301
- margin-left: 0;
302
- }
303
-
304
- .c0.caret-pos--top-left .c2::before,
305
- .c0.caret-pos--bottom-left .c2::before,
306
- .c0.caret-pos--top-left .c2::after,
307
- .c0.caret-pos--bottom-left .c2::after {
308
- left: 24px;
309
- margin-left: 0;
310
- }
311
-
312
- .c0.caret-pos--top-left .c2::after,
313
- .c0.caret-pos--bottom-left .c2::after {
314
- left: calc(24px + 1px);
315
- }
316
-
317
- .c0.caret-pos--right .c2::before,
318
- .c0.caret-pos--right-top .c2::before,
319
- .c0.caret-pos--right-bottom .c2::before,
320
- .c0.caret-pos--left .c2::before,
321
- .c0.caret-pos--left-top .c2::before,
322
- .c0.caret-pos--left-bottom .c2::before,
323
- .c0.caret-pos--right .c2::after,
324
- .c0.caret-pos--right-top .c2::after,
325
- .c0.caret-pos--right-bottom .c2::after,
326
- .c0.caret-pos--left .c2::after,
327
- .c0.caret-pos--left-top .c2::after,
328
- .c0.caret-pos--left-bottom .c2::after {
329
- top: 50%;
330
- left: auto;
331
- margin-left: 0;
332
- border-bottom-color: transparent;
333
- }
334
-
335
- .c0.caret-pos--right .c2::before,
336
- .c0.caret-pos--right-top .c2::before,
337
- .c0.caret-pos--right-bottom .c2::before,
338
- .c0.caret-pos--left .c2::before,
339
- .c0.caret-pos--left-top .c2::before,
340
- .c0.caret-pos--left-bottom .c2::before {
341
- margin-top: calc((8px + 1px) * -1);
342
- }
343
-
344
- .c0.caret-pos--right .c2::after,
345
- .c0.caret-pos--right-top .c2::after,
346
- .c0.caret-pos--right-bottom .c2::after,
347
- .c0.caret-pos--left .c2::after,
348
- .c0.caret-pos--left-top .c2::after,
349
- .c0.caret-pos--left-bottom .c2::after {
350
- margin-top: -8px;
351
- }
352
-
353
- .c0.caret-pos--right .c2::before,
354
- .c0.caret-pos--right-top .c2::before,
355
- .c0.caret-pos--right-bottom .c2::before {
356
- right: -16px;
357
- border-left-color: #e1e4e8;
358
- }
359
-
360
- .c0.caret-pos--right .c2::after,
361
- .c0.caret-pos--right-top .c2::after,
362
- .c0.caret-pos--right-bottom .c2::after {
363
- right: -14px;
364
- border-left-color: #ffffff;
365
- }
366
-
367
- .c0.caret-pos--left .c2::before,
368
- .c0.caret-pos--left-top .c2::before,
369
- .c0.caret-pos--left-bottom .c2::before {
370
- left: -16px;
371
- border-right-color: #e1e4e8;
372
- }
373
-
374
- .c0.caret-pos--left .c2::after,
375
- .c0.caret-pos--left-top .c2::after,
376
- .c0.caret-pos--left-bottom .c2::after {
377
- left: -14px;
378
- border-right-color: #ffffff;
379
- }
380
-
381
- .c0.caret-pos--right-top .c2::before,
382
- .c0.caret-pos--left-top .c2::before,
383
- .c0.caret-pos--right-top .c2::after,
384
- .c0.caret-pos--left-top .c2::after {
385
- top: 24px;
386
- }
387
-
388
- .c0.caret-pos--right-bottom .c2::before,
389
- .c0.caret-pos--left-bottom .c2::before,
390
- .c0.caret-pos--right-bottom .c2::after,
391
- .c0.caret-pos--left-bottom .c2::after {
392
- top: auto;
393
- }
394
-
395
- .c0.caret-pos--right-bottom .c2::before,
396
- .c0.caret-pos--left-bottom .c2::before {
397
- bottom: 16px;
398
- }
399
-
400
- .c0.caret-pos--right-bottom .c2::after,
401
- .c0.caret-pos--left-bottom .c2::after {
402
- bottom: calc(16px + 1px);
403
- }
404
-
405
- <div
406
- className="c0 c1 caret-pos--top"
407
- open={true}
408
- >
409
- <div
410
- className="c2"
411
- >
412
- Hello!
413
- </div>
414
- </div>
415
- `;
416
-
417
- exports[`Popover renders correctly for a caret position of bottom 1`] = `
418
- .c1 {
419
- position: absolute;
420
- z-index: 100;
421
- display: block;
422
- }
423
-
424
- .c2 {
425
- border: 1px solid #e1e4e8;
426
- border-radius: 6px;
427
- position: relative;
428
- width: 232px;
429
- margin-right: auto;
430
- margin-left: auto;
431
- padding: 24px;
432
- background-color: #ffffff;
433
- }
434
-
435
- .c2::before,
436
- .c2::after {
437
- position: absolute;
438
- left: 50%;
439
- display: inline-block;
440
- content: '';
441
- }
442
-
443
- .c2::before {
444
- top: -16px;
445
- margin-left: -9px;
446
- border: 8px solid transparent;
447
- border-bottom-color: #e1e4e8;
448
- }
449
-
450
- .c2::after {
451
- top: -14px;
452
- margin-left: -8px;
453
- border: 7px solid transparent;
454
- border-bottom-color: #ffffff;
455
- }
456
-
457
- .c0.caret-pos--bottom .c2::before,
458
- .c0.caret-pos--bottom-right .c2::before,
459
- .c0.caret-pos--bottom-left .c2::before,
460
- .c0.caret-pos--bottom .c2::after,
461
- .c0.caret-pos--bottom-right .c2::after,
462
- .c0.caret-pos--bottom-left .c2::after {
463
- top: auto;
464
- border-bottom-color: transparent;
465
- }
466
-
467
- .c0.caret-pos--bottom .c2::before,
468
- .c0.caret-pos--bottom-right .c2::before,
469
- .c0.caret-pos--bottom-left .c2::before {
470
- bottom: -16px;
471
- border-top-color: #e1e4e8;
472
- }
473
-
474
- .c0.caret-pos--bottom .c2::after,
475
- .c0.caret-pos--bottom-right .c2::after,
476
- .c0.caret-pos--bottom-left .c2::after {
477
- bottom: -14px;
478
- border-top-color: #ffffff;
479
- }
480
-
481
- .c0.caret-pos--top-right .c2,
482
- .c0.caret-pos--bottom-right .c2 {
483
- right: -9px;
484
- margin-right: 0;
485
- }
486
-
487
- .c0.caret-pos--top-right .c2::before,
488
- .c0.caret-pos--bottom-right .c2::before,
489
- .c0.caret-pos--top-right .c2::after,
490
- .c0.caret-pos--bottom-right .c2::after {
491
- left: auto;
492
- margin-left: 0;
493
- }
494
-
495
- .c0.caret-pos--top-right .c2::before,
496
- .c0.caret-pos--bottom-right .c2::before {
497
- right: 20px;
498
- }
499
-
500
- .c0.caret-pos--top-right .c2::after,
501
- .c0.caret-pos--bottom-right .c2::after {
502
- right: 21px;
503
- }
504
-
505
- .c0.caret-pos--top-left .c2,
506
- .c0.caret-pos--bottom-left .c2 {
507
- left: -9px;
508
- margin-left: 0;
509
- }
510
-
511
- .c0.caret-pos--top-left .c2::before,
512
- .c0.caret-pos--bottom-left .c2::before,
513
- .c0.caret-pos--top-left .c2::after,
514
- .c0.caret-pos--bottom-left .c2::after {
515
- left: 24px;
516
- margin-left: 0;
517
- }
518
-
519
- .c0.caret-pos--top-left .c2::after,
520
- .c0.caret-pos--bottom-left .c2::after {
521
- left: calc(24px + 1px);
522
- }
523
-
524
- .c0.caret-pos--right .c2::before,
525
- .c0.caret-pos--right-top .c2::before,
526
- .c0.caret-pos--right-bottom .c2::before,
527
- .c0.caret-pos--left .c2::before,
528
- .c0.caret-pos--left-top .c2::before,
529
- .c0.caret-pos--left-bottom .c2::before,
530
- .c0.caret-pos--right .c2::after,
531
- .c0.caret-pos--right-top .c2::after,
532
- .c0.caret-pos--right-bottom .c2::after,
533
- .c0.caret-pos--left .c2::after,
534
- .c0.caret-pos--left-top .c2::after,
535
- .c0.caret-pos--left-bottom .c2::after {
536
- top: 50%;
537
- left: auto;
538
- margin-left: 0;
539
- border-bottom-color: transparent;
540
- }
541
-
542
- .c0.caret-pos--right .c2::before,
543
- .c0.caret-pos--right-top .c2::before,
544
- .c0.caret-pos--right-bottom .c2::before,
545
- .c0.caret-pos--left .c2::before,
546
- .c0.caret-pos--left-top .c2::before,
547
- .c0.caret-pos--left-bottom .c2::before {
548
- margin-top: calc((8px + 1px) * -1);
549
- }
550
-
551
- .c0.caret-pos--right .c2::after,
552
- .c0.caret-pos--right-top .c2::after,
553
- .c0.caret-pos--right-bottom .c2::after,
554
- .c0.caret-pos--left .c2::after,
555
- .c0.caret-pos--left-top .c2::after,
556
- .c0.caret-pos--left-bottom .c2::after {
557
- margin-top: -8px;
558
- }
559
-
560
- .c0.caret-pos--right .c2::before,
561
- .c0.caret-pos--right-top .c2::before,
562
- .c0.caret-pos--right-bottom .c2::before {
563
- right: -16px;
564
- border-left-color: #e1e4e8;
565
- }
566
-
567
- .c0.caret-pos--right .c2::after,
568
- .c0.caret-pos--right-top .c2::after,
569
- .c0.caret-pos--right-bottom .c2::after {
570
- right: -14px;
571
- border-left-color: #ffffff;
572
- }
573
-
574
- .c0.caret-pos--left .c2::before,
575
- .c0.caret-pos--left-top .c2::before,
576
- .c0.caret-pos--left-bottom .c2::before {
577
- left: -16px;
578
- border-right-color: #e1e4e8;
579
- }
580
-
581
- .c0.caret-pos--left .c2::after,
582
- .c0.caret-pos--left-top .c2::after,
583
- .c0.caret-pos--left-bottom .c2::after {
584
- left: -14px;
585
- border-right-color: #ffffff;
586
- }
587
-
588
- .c0.caret-pos--right-top .c2::before,
589
- .c0.caret-pos--left-top .c2::before,
590
- .c0.caret-pos--right-top .c2::after,
591
- .c0.caret-pos--left-top .c2::after {
592
- top: 24px;
593
- }
594
-
595
- .c0.caret-pos--right-bottom .c2::before,
596
- .c0.caret-pos--left-bottom .c2::before,
597
- .c0.caret-pos--right-bottom .c2::after,
598
- .c0.caret-pos--left-bottom .c2::after {
599
- top: auto;
600
- }
601
-
602
- .c0.caret-pos--right-bottom .c2::before,
603
- .c0.caret-pos--left-bottom .c2::before {
604
- bottom: 16px;
605
- }
606
-
607
- .c0.caret-pos--right-bottom .c2::after,
608
- .c0.caret-pos--left-bottom .c2::after {
609
- bottom: calc(16px + 1px);
610
- }
611
-
612
- .c0.caret-pos--bottom .c3::before,
613
- .c0.caret-pos--bottom-right .c3::before,
614
- .c0.caret-pos--bottom-left .c3::before,
615
- .c0.caret-pos--bottom .c3::after,
616
- .c0.caret-pos--bottom-right .c3::after,
617
- .c0.caret-pos--bottom-left .c3::after {
618
- top: auto;
619
- border-bottom-color: transparent;
620
- }
621
-
622
- .c0.caret-pos--bottom .c3::before,
623
- .c0.caret-pos--bottom-right .c3::before,
624
- .c0.caret-pos--bottom-left .c3::before {
625
- bottom: -16px;
626
- }
627
-
628
- .c0.caret-pos--bottom .c3::after,
629
- .c0.caret-pos--bottom-right .c3::after,
630
- .c0.caret-pos--bottom-left .c3::after {
631
- bottom: -14px;
632
- }
633
-
634
- .c0.caret-pos--top-right .c3,
635
- .c0.caret-pos--bottom-right .c3 {
636
- right: -9px;
637
- margin-right: 0;
638
- }
639
-
640
- .c0.caret-pos--top-right .c3::before,
641
- .c0.caret-pos--bottom-right .c3::before,
642
- .c0.caret-pos--top-right .c3::after,
643
- .c0.caret-pos--bottom-right .c3::after {
644
- left: auto;
645
- margin-left: 0;
646
- }
647
-
648
- .c0.caret-pos--top-right .c3::before,
649
- .c0.caret-pos--bottom-right .c3::before {
650
- right: 20px;
651
- }
652
-
653
- .c0.caret-pos--top-right .c3::after,
654
- .c0.caret-pos--bottom-right .c3::after {
655
- right: 21px;
656
- }
657
-
658
- .c0.caret-pos--top-left .c3,
659
- .c0.caret-pos--bottom-left .c3 {
660
- left: -9px;
661
- margin-left: 0;
662
- }
663
-
664
- .c0.caret-pos--top-left .c3::before,
665
- .c0.caret-pos--bottom-left .c3::before,
666
- .c0.caret-pos--top-left .c3::after,
667
- .c0.caret-pos--bottom-left .c3::after {
668
- left: 24px;
669
- margin-left: 0;
670
- }
671
-
672
- .c0.caret-pos--top-left .c3::after,
673
- .c0.caret-pos--bottom-left .c3::after {
674
- left: calc(24px + 1px);
675
- }
676
-
677
- .c0.caret-pos--right .c3::before,
678
- .c0.caret-pos--right-top .c3::before,
679
- .c0.caret-pos--right-bottom .c3::before,
680
- .c0.caret-pos--left .c3::before,
681
- .c0.caret-pos--left-top .c3::before,
682
- .c0.caret-pos--left-bottom .c3::before,
683
- .c0.caret-pos--right .c3::after,
684
- .c0.caret-pos--right-top .c3::after,
685
- .c0.caret-pos--right-bottom .c3::after,
686
- .c0.caret-pos--left .c3::after,
687
- .c0.caret-pos--left-top .c3::after,
688
- .c0.caret-pos--left-bottom .c3::after {
689
- top: 50%;
690
- left: auto;
691
- margin-left: 0;
692
- border-bottom-color: transparent;
693
- }
694
-
695
- .c0.caret-pos--right .c3::before,
696
- .c0.caret-pos--right-top .c3::before,
697
- .c0.caret-pos--right-bottom .c3::before,
698
- .c0.caret-pos--left .c3::before,
699
- .c0.caret-pos--left-top .c3::before,
700
- .c0.caret-pos--left-bottom .c3::before {
701
- margin-top: calc((8px + 1px) * -1);
702
- }
703
-
704
- .c0.caret-pos--right .c3::after,
705
- .c0.caret-pos--right-top .c3::after,
706
- .c0.caret-pos--right-bottom .c3::after,
707
- .c0.caret-pos--left .c3::after,
708
- .c0.caret-pos--left-top .c3::after,
709
- .c0.caret-pos--left-bottom .c3::after {
710
- margin-top: -8px;
711
- }
712
-
713
- .c0.caret-pos--right .c3::before,
714
- .c0.caret-pos--right-top .c3::before,
715
- .c0.caret-pos--right-bottom .c3::before {
716
- right: -16px;
717
- }
718
-
719
- .c0.caret-pos--right .c3::after,
720
- .c0.caret-pos--right-top .c3::after,
721
- .c0.caret-pos--right-bottom .c3::after {
722
- right: -14px;
723
- }
724
-
725
- .c0.caret-pos--left .c3::before,
726
- .c0.caret-pos--left-top .c3::before,
727
- .c0.caret-pos--left-bottom .c3::before {
728
- left: -16px;
729
- }
730
-
731
- .c0.caret-pos--left .c3::after,
732
- .c0.caret-pos--left-top .c3::after,
733
- .c0.caret-pos--left-bottom .c3::after {
734
- left: -14px;
735
- }
736
-
737
- .c0.caret-pos--right-top .c3::before,
738
- .c0.caret-pos--left-top .c3::before,
739
- .c0.caret-pos--right-top .c3::after,
740
- .c0.caret-pos--left-top .c3::after {
741
- top: 24px;
742
- }
743
-
744
- .c0.caret-pos--right-bottom .c3::before,
745
- .c0.caret-pos--left-bottom .c3::before,
746
- .c0.caret-pos--right-bottom .c3::after,
747
- .c0.caret-pos--left-bottom .c3::after {
748
- top: auto;
749
- }
750
-
751
- .c0.caret-pos--right-bottom .c3::before,
752
- .c0.caret-pos--left-bottom .c3::before {
753
- bottom: 16px;
754
- }
755
-
756
- .c0.caret-pos--right-bottom .c3::after,
757
- .c0.caret-pos--left-bottom .c3::after {
758
- bottom: calc(16px + 1px);
759
- }
760
-
761
- <div
762
- className="c0 c1 caret-pos--bottom"
763
- open={true}
764
- >
765
- <div
766
- className="c2"
767
- >
768
- Hello!
769
- </div>
770
- </div>
771
- `;
772
-
773
- exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
774
- .c1 {
775
- position: absolute;
776
- z-index: 100;
777
- display: block;
778
- }
779
-
780
- .c2 {
781
- border: 1px solid #e1e4e8;
782
- border-radius: 6px;
783
- position: relative;
784
- width: 232px;
785
- margin-right: auto;
786
- margin-left: auto;
787
- padding: 24px;
788
- background-color: #ffffff;
789
- }
790
-
791
- .c2::before,
792
- .c2::after {
793
- position: absolute;
794
- left: 50%;
795
- display: inline-block;
796
- content: '';
797
- }
798
-
799
- .c2::before {
800
- top: -16px;
801
- margin-left: -9px;
802
- border: 8px solid transparent;
803
- border-bottom-color: #e1e4e8;
804
- }
805
-
806
- .c2::after {
807
- top: -14px;
808
- margin-left: -8px;
809
- border: 7px solid transparent;
810
- border-bottom-color: #ffffff;
811
- }
812
-
813
- .c0.caret-pos--bottom .c2::before,
814
- .c0.caret-pos--bottom-right .c2::before,
815
- .c0.caret-pos--bottom-left .c2::before,
816
- .c0.caret-pos--bottom .c2::after,
817
- .c0.caret-pos--bottom-right .c2::after,
818
- .c0.caret-pos--bottom-left .c2::after {
819
- top: auto;
820
- border-bottom-color: transparent;
821
- }
822
-
823
- .c0.caret-pos--bottom .c2::before,
824
- .c0.caret-pos--bottom-right .c2::before,
825
- .c0.caret-pos--bottom-left .c2::before {
826
- bottom: -16px;
827
- border-top-color: #e1e4e8;
828
- }
829
-
830
- .c0.caret-pos--bottom .c2::after,
831
- .c0.caret-pos--bottom-right .c2::after,
832
- .c0.caret-pos--bottom-left .c2::after {
833
- bottom: -14px;
834
- border-top-color: #ffffff;
835
- }
836
-
837
- .c0.caret-pos--top-right .c2,
838
- .c0.caret-pos--bottom-right .c2 {
839
- right: -9px;
840
- margin-right: 0;
841
- }
842
-
843
- .c0.caret-pos--top-right .c2::before,
844
- .c0.caret-pos--bottom-right .c2::before,
845
- .c0.caret-pos--top-right .c2::after,
846
- .c0.caret-pos--bottom-right .c2::after {
847
- left: auto;
848
- margin-left: 0;
849
- }
850
-
851
- .c0.caret-pos--top-right .c2::before,
852
- .c0.caret-pos--bottom-right .c2::before {
853
- right: 20px;
854
- }
855
-
856
- .c0.caret-pos--top-right .c2::after,
857
- .c0.caret-pos--bottom-right .c2::after {
858
- right: 21px;
859
- }
860
-
861
- .c0.caret-pos--top-left .c2,
862
- .c0.caret-pos--bottom-left .c2 {
863
- left: -9px;
864
- margin-left: 0;
865
- }
866
-
867
- .c0.caret-pos--top-left .c2::before,
868
- .c0.caret-pos--bottom-left .c2::before,
869
- .c0.caret-pos--top-left .c2::after,
870
- .c0.caret-pos--bottom-left .c2::after {
871
- left: 24px;
872
- margin-left: 0;
873
- }
874
-
875
- .c0.caret-pos--top-left .c2::after,
876
- .c0.caret-pos--bottom-left .c2::after {
877
- left: calc(24px + 1px);
878
- }
879
-
880
- .c0.caret-pos--right .c2::before,
881
- .c0.caret-pos--right-top .c2::before,
882
- .c0.caret-pos--right-bottom .c2::before,
883
- .c0.caret-pos--left .c2::before,
884
- .c0.caret-pos--left-top .c2::before,
885
- .c0.caret-pos--left-bottom .c2::before,
886
- .c0.caret-pos--right .c2::after,
887
- .c0.caret-pos--right-top .c2::after,
888
- .c0.caret-pos--right-bottom .c2::after,
889
- .c0.caret-pos--left .c2::after,
890
- .c0.caret-pos--left-top .c2::after,
891
- .c0.caret-pos--left-bottom .c2::after {
892
- top: 50%;
893
- left: auto;
894
- margin-left: 0;
895
- border-bottom-color: transparent;
896
- }
897
-
898
- .c0.caret-pos--right .c2::before,
899
- .c0.caret-pos--right-top .c2::before,
900
- .c0.caret-pos--right-bottom .c2::before,
901
- .c0.caret-pos--left .c2::before,
902
- .c0.caret-pos--left-top .c2::before,
903
- .c0.caret-pos--left-bottom .c2::before {
904
- margin-top: calc((8px + 1px) * -1);
905
- }
906
-
907
- .c0.caret-pos--right .c2::after,
908
- .c0.caret-pos--right-top .c2::after,
909
- .c0.caret-pos--right-bottom .c2::after,
910
- .c0.caret-pos--left .c2::after,
911
- .c0.caret-pos--left-top .c2::after,
912
- .c0.caret-pos--left-bottom .c2::after {
913
- margin-top: -8px;
914
- }
915
-
916
- .c0.caret-pos--right .c2::before,
917
- .c0.caret-pos--right-top .c2::before,
918
- .c0.caret-pos--right-bottom .c2::before {
919
- right: -16px;
920
- border-left-color: #e1e4e8;
921
- }
922
-
923
- .c0.caret-pos--right .c2::after,
924
- .c0.caret-pos--right-top .c2::after,
925
- .c0.caret-pos--right-bottom .c2::after {
926
- right: -14px;
927
- border-left-color: #ffffff;
928
- }
929
-
930
- .c0.caret-pos--left .c2::before,
931
- .c0.caret-pos--left-top .c2::before,
932
- .c0.caret-pos--left-bottom .c2::before {
933
- left: -16px;
934
- border-right-color: #e1e4e8;
935
- }
936
-
937
- .c0.caret-pos--left .c2::after,
938
- .c0.caret-pos--left-top .c2::after,
939
- .c0.caret-pos--left-bottom .c2::after {
940
- left: -14px;
941
- border-right-color: #ffffff;
942
- }
943
-
944
- .c0.caret-pos--right-top .c2::before,
945
- .c0.caret-pos--left-top .c2::before,
946
- .c0.caret-pos--right-top .c2::after,
947
- .c0.caret-pos--left-top .c2::after {
948
- top: 24px;
949
- }
950
-
951
- .c0.caret-pos--right-bottom .c2::before,
952
- .c0.caret-pos--left-bottom .c2::before,
953
- .c0.caret-pos--right-bottom .c2::after,
954
- .c0.caret-pos--left-bottom .c2::after {
955
- top: auto;
956
- }
957
-
958
- .c0.caret-pos--right-bottom .c2::before,
959
- .c0.caret-pos--left-bottom .c2::before {
960
- bottom: 16px;
961
- }
962
-
963
- .c0.caret-pos--right-bottom .c2::after,
964
- .c0.caret-pos--left-bottom .c2::after {
965
- bottom: calc(16px + 1px);
966
- }
967
-
968
- .c0.caret-pos--bottom .c3::before,
969
- .c0.caret-pos--bottom-right .c3::before,
970
- .c0.caret-pos--bottom-left .c3::before,
971
- .c0.caret-pos--bottom .c3::after,
972
- .c0.caret-pos--bottom-right .c3::after,
973
- .c0.caret-pos--bottom-left .c3::after {
974
- top: auto;
975
- border-bottom-color: transparent;
976
- }
977
-
978
- .c0.caret-pos--bottom .c3::before,
979
- .c0.caret-pos--bottom-right .c3::before,
980
- .c0.caret-pos--bottom-left .c3::before {
981
- bottom: -16px;
982
- }
983
-
984
- .c0.caret-pos--bottom .c3::after,
985
- .c0.caret-pos--bottom-right .c3::after,
986
- .c0.caret-pos--bottom-left .c3::after {
987
- bottom: -14px;
988
- }
989
-
990
- .c0.caret-pos--top-right .c3,
991
- .c0.caret-pos--bottom-right .c3 {
992
- right: -9px;
993
- margin-right: 0;
994
- }
995
-
996
- .c0.caret-pos--top-right .c3::before,
997
- .c0.caret-pos--bottom-right .c3::before,
998
- .c0.caret-pos--top-right .c3::after,
999
- .c0.caret-pos--bottom-right .c3::after {
1000
- left: auto;
1001
- margin-left: 0;
1002
- }
1003
-
1004
- .c0.caret-pos--top-right .c3::before,
1005
- .c0.caret-pos--bottom-right .c3::before {
1006
- right: 20px;
1007
- }
1008
-
1009
- .c0.caret-pos--top-right .c3::after,
1010
- .c0.caret-pos--bottom-right .c3::after {
1011
- right: 21px;
1012
- }
1013
-
1014
- .c0.caret-pos--top-left .c3,
1015
- .c0.caret-pos--bottom-left .c3 {
1016
- left: -9px;
1017
- margin-left: 0;
1018
- }
1019
-
1020
- .c0.caret-pos--top-left .c3::before,
1021
- .c0.caret-pos--bottom-left .c3::before,
1022
- .c0.caret-pos--top-left .c3::after,
1023
- .c0.caret-pos--bottom-left .c3::after {
1024
- left: 24px;
1025
- margin-left: 0;
1026
- }
1027
-
1028
- .c0.caret-pos--top-left .c3::after,
1029
- .c0.caret-pos--bottom-left .c3::after {
1030
- left: calc(24px + 1px);
1031
- }
1032
-
1033
- .c0.caret-pos--right .c3::before,
1034
- .c0.caret-pos--right-top .c3::before,
1035
- .c0.caret-pos--right-bottom .c3::before,
1036
- .c0.caret-pos--left .c3::before,
1037
- .c0.caret-pos--left-top .c3::before,
1038
- .c0.caret-pos--left-bottom .c3::before,
1039
- .c0.caret-pos--right .c3::after,
1040
- .c0.caret-pos--right-top .c3::after,
1041
- .c0.caret-pos--right-bottom .c3::after,
1042
- .c0.caret-pos--left .c3::after,
1043
- .c0.caret-pos--left-top .c3::after,
1044
- .c0.caret-pos--left-bottom .c3::after {
1045
- top: 50%;
1046
- left: auto;
1047
- margin-left: 0;
1048
- border-bottom-color: transparent;
1049
- }
1050
-
1051
- .c0.caret-pos--right .c3::before,
1052
- .c0.caret-pos--right-top .c3::before,
1053
- .c0.caret-pos--right-bottom .c3::before,
1054
- .c0.caret-pos--left .c3::before,
1055
- .c0.caret-pos--left-top .c3::before,
1056
- .c0.caret-pos--left-bottom .c3::before {
1057
- margin-top: calc((8px + 1px) * -1);
1058
- }
1059
-
1060
- .c0.caret-pos--right .c3::after,
1061
- .c0.caret-pos--right-top .c3::after,
1062
- .c0.caret-pos--right-bottom .c3::after,
1063
- .c0.caret-pos--left .c3::after,
1064
- .c0.caret-pos--left-top .c3::after,
1065
- .c0.caret-pos--left-bottom .c3::after {
1066
- margin-top: -8px;
1067
- }
1068
-
1069
- .c0.caret-pos--right .c3::before,
1070
- .c0.caret-pos--right-top .c3::before,
1071
- .c0.caret-pos--right-bottom .c3::before {
1072
- right: -16px;
1073
- }
1074
-
1075
- .c0.caret-pos--right .c3::after,
1076
- .c0.caret-pos--right-top .c3::after,
1077
- .c0.caret-pos--right-bottom .c3::after {
1078
- right: -14px;
1079
- }
1080
-
1081
- .c0.caret-pos--left .c3::before,
1082
- .c0.caret-pos--left-top .c3::before,
1083
- .c0.caret-pos--left-bottom .c3::before {
1084
- left: -16px;
1085
- }
1086
-
1087
- .c0.caret-pos--left .c3::after,
1088
- .c0.caret-pos--left-top .c3::after,
1089
- .c0.caret-pos--left-bottom .c3::after {
1090
- left: -14px;
1091
- }
1092
-
1093
- .c0.caret-pos--right-top .c3::before,
1094
- .c0.caret-pos--left-top .c3::before,
1095
- .c0.caret-pos--right-top .c3::after,
1096
- .c0.caret-pos--left-top .c3::after {
1097
- top: 24px;
1098
- }
1099
-
1100
- .c0.caret-pos--right-bottom .c3::before,
1101
- .c0.caret-pos--left-bottom .c3::before,
1102
- .c0.caret-pos--right-bottom .c3::after,
1103
- .c0.caret-pos--left-bottom .c3::after {
1104
- top: auto;
1105
- }
1106
-
1107
- .c0.caret-pos--right-bottom .c3::before,
1108
- .c0.caret-pos--left-bottom .c3::before {
1109
- bottom: 16px;
1110
- }
1111
-
1112
- .c0.caret-pos--right-bottom .c3::after,
1113
- .c0.caret-pos--left-bottom .c3::after {
1114
- bottom: calc(16px + 1px);
1115
- }
1116
-
1117
- <div
1118
- className="c0 c1 caret-pos--bottom-left"
1119
- open={true}
1120
- >
1121
- <div
1122
- className="c2"
1123
- >
1124
- Hello!
1125
- </div>
1126
- </div>
1127
- `;
1128
-
1129
- exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
1130
- .c1 {
1131
- position: absolute;
1132
- z-index: 100;
1133
- display: block;
1134
- }
1135
-
1136
- .c2 {
1137
- border: 1px solid #e1e4e8;
1138
- border-radius: 6px;
1139
- position: relative;
1140
- width: 232px;
1141
- margin-right: auto;
1142
- margin-left: auto;
1143
- padding: 24px;
1144
- background-color: #ffffff;
1145
- }
1146
-
1147
- .c2::before,
1148
- .c2::after {
1149
- position: absolute;
1150
- left: 50%;
1151
- display: inline-block;
1152
- content: '';
1153
- }
1154
-
1155
- .c2::before {
1156
- top: -16px;
1157
- margin-left: -9px;
1158
- border: 8px solid transparent;
1159
- border-bottom-color: #e1e4e8;
1160
- }
1161
-
1162
- .c2::after {
1163
- top: -14px;
1164
- margin-left: -8px;
1165
- border: 7px solid transparent;
1166
- border-bottom-color: #ffffff;
1167
- }
1168
-
1169
- .c0.caret-pos--bottom .c2::before,
1170
- .c0.caret-pos--bottom-right .c2::before,
1171
- .c0.caret-pos--bottom-left .c2::before,
1172
- .c0.caret-pos--bottom .c2::after,
1173
- .c0.caret-pos--bottom-right .c2::after,
1174
- .c0.caret-pos--bottom-left .c2::after {
1175
- top: auto;
1176
- border-bottom-color: transparent;
1177
- }
1178
-
1179
- .c0.caret-pos--bottom .c2::before,
1180
- .c0.caret-pos--bottom-right .c2::before,
1181
- .c0.caret-pos--bottom-left .c2::before {
1182
- bottom: -16px;
1183
- border-top-color: #e1e4e8;
1184
- }
1185
-
1186
- .c0.caret-pos--bottom .c2::after,
1187
- .c0.caret-pos--bottom-right .c2::after,
1188
- .c0.caret-pos--bottom-left .c2::after {
1189
- bottom: -14px;
1190
- border-top-color: #ffffff;
1191
- }
1192
-
1193
- .c0.caret-pos--top-right .c2,
1194
- .c0.caret-pos--bottom-right .c2 {
1195
- right: -9px;
1196
- margin-right: 0;
1197
- }
1198
-
1199
- .c0.caret-pos--top-right .c2::before,
1200
- .c0.caret-pos--bottom-right .c2::before,
1201
- .c0.caret-pos--top-right .c2::after,
1202
- .c0.caret-pos--bottom-right .c2::after {
1203
- left: auto;
1204
- margin-left: 0;
1205
- }
1206
-
1207
- .c0.caret-pos--top-right .c2::before,
1208
- .c0.caret-pos--bottom-right .c2::before {
1209
- right: 20px;
1210
- }
1211
-
1212
- .c0.caret-pos--top-right .c2::after,
1213
- .c0.caret-pos--bottom-right .c2::after {
1214
- right: 21px;
1215
- }
1216
-
1217
- .c0.caret-pos--top-left .c2,
1218
- .c0.caret-pos--bottom-left .c2 {
1219
- left: -9px;
1220
- margin-left: 0;
1221
- }
1222
-
1223
- .c0.caret-pos--top-left .c2::before,
1224
- .c0.caret-pos--bottom-left .c2::before,
1225
- .c0.caret-pos--top-left .c2::after,
1226
- .c0.caret-pos--bottom-left .c2::after {
1227
- left: 24px;
1228
- margin-left: 0;
1229
- }
1230
-
1231
- .c0.caret-pos--top-left .c2::after,
1232
- .c0.caret-pos--bottom-left .c2::after {
1233
- left: calc(24px + 1px);
1234
- }
1235
-
1236
- .c0.caret-pos--right .c2::before,
1237
- .c0.caret-pos--right-top .c2::before,
1238
- .c0.caret-pos--right-bottom .c2::before,
1239
- .c0.caret-pos--left .c2::before,
1240
- .c0.caret-pos--left-top .c2::before,
1241
- .c0.caret-pos--left-bottom .c2::before,
1242
- .c0.caret-pos--right .c2::after,
1243
- .c0.caret-pos--right-top .c2::after,
1244
- .c0.caret-pos--right-bottom .c2::after,
1245
- .c0.caret-pos--left .c2::after,
1246
- .c0.caret-pos--left-top .c2::after,
1247
- .c0.caret-pos--left-bottom .c2::after {
1248
- top: 50%;
1249
- left: auto;
1250
- margin-left: 0;
1251
- border-bottom-color: transparent;
1252
- }
1253
-
1254
- .c0.caret-pos--right .c2::before,
1255
- .c0.caret-pos--right-top .c2::before,
1256
- .c0.caret-pos--right-bottom .c2::before,
1257
- .c0.caret-pos--left .c2::before,
1258
- .c0.caret-pos--left-top .c2::before,
1259
- .c0.caret-pos--left-bottom .c2::before {
1260
- margin-top: calc((8px + 1px) * -1);
1261
- }
1262
-
1263
- .c0.caret-pos--right .c2::after,
1264
- .c0.caret-pos--right-top .c2::after,
1265
- .c0.caret-pos--right-bottom .c2::after,
1266
- .c0.caret-pos--left .c2::after,
1267
- .c0.caret-pos--left-top .c2::after,
1268
- .c0.caret-pos--left-bottom .c2::after {
1269
- margin-top: -8px;
1270
- }
1271
-
1272
- .c0.caret-pos--right .c2::before,
1273
- .c0.caret-pos--right-top .c2::before,
1274
- .c0.caret-pos--right-bottom .c2::before {
1275
- right: -16px;
1276
- border-left-color: #e1e4e8;
1277
- }
1278
-
1279
- .c0.caret-pos--right .c2::after,
1280
- .c0.caret-pos--right-top .c2::after,
1281
- .c0.caret-pos--right-bottom .c2::after {
1282
- right: -14px;
1283
- border-left-color: #ffffff;
1284
- }
1285
-
1286
- .c0.caret-pos--left .c2::before,
1287
- .c0.caret-pos--left-top .c2::before,
1288
- .c0.caret-pos--left-bottom .c2::before {
1289
- left: -16px;
1290
- border-right-color: #e1e4e8;
1291
- }
1292
-
1293
- .c0.caret-pos--left .c2::after,
1294
- .c0.caret-pos--left-top .c2::after,
1295
- .c0.caret-pos--left-bottom .c2::after {
1296
- left: -14px;
1297
- border-right-color: #ffffff;
1298
- }
1299
-
1300
- .c0.caret-pos--right-top .c2::before,
1301
- .c0.caret-pos--left-top .c2::before,
1302
- .c0.caret-pos--right-top .c2::after,
1303
- .c0.caret-pos--left-top .c2::after {
1304
- top: 24px;
1305
- }
1306
-
1307
- .c0.caret-pos--right-bottom .c2::before,
1308
- .c0.caret-pos--left-bottom .c2::before,
1309
- .c0.caret-pos--right-bottom .c2::after,
1310
- .c0.caret-pos--left-bottom .c2::after {
1311
- top: auto;
1312
- }
1313
-
1314
- .c0.caret-pos--right-bottom .c2::before,
1315
- .c0.caret-pos--left-bottom .c2::before {
1316
- bottom: 16px;
1317
- }
1318
-
1319
- .c0.caret-pos--right-bottom .c2::after,
1320
- .c0.caret-pos--left-bottom .c2::after {
1321
- bottom: calc(16px + 1px);
1322
- }
1323
-
1324
- .c0.caret-pos--bottom .c3::before,
1325
- .c0.caret-pos--bottom-right .c3::before,
1326
- .c0.caret-pos--bottom-left .c3::before,
1327
- .c0.caret-pos--bottom .c3::after,
1328
- .c0.caret-pos--bottom-right .c3::after,
1329
- .c0.caret-pos--bottom-left .c3::after {
1330
- top: auto;
1331
- border-bottom-color: transparent;
1332
- }
1333
-
1334
- .c0.caret-pos--bottom .c3::before,
1335
- .c0.caret-pos--bottom-right .c3::before,
1336
- .c0.caret-pos--bottom-left .c3::before {
1337
- bottom: -16px;
1338
- }
1339
-
1340
- .c0.caret-pos--bottom .c3::after,
1341
- .c0.caret-pos--bottom-right .c3::after,
1342
- .c0.caret-pos--bottom-left .c3::after {
1343
- bottom: -14px;
1344
- }
1345
-
1346
- .c0.caret-pos--top-right .c3,
1347
- .c0.caret-pos--bottom-right .c3 {
1348
- right: -9px;
1349
- margin-right: 0;
1350
- }
1351
-
1352
- .c0.caret-pos--top-right .c3::before,
1353
- .c0.caret-pos--bottom-right .c3::before,
1354
- .c0.caret-pos--top-right .c3::after,
1355
- .c0.caret-pos--bottom-right .c3::after {
1356
- left: auto;
1357
- margin-left: 0;
1358
- }
1359
-
1360
- .c0.caret-pos--top-right .c3::before,
1361
- .c0.caret-pos--bottom-right .c3::before {
1362
- right: 20px;
1363
- }
1364
-
1365
- .c0.caret-pos--top-right .c3::after,
1366
- .c0.caret-pos--bottom-right .c3::after {
1367
- right: 21px;
1368
- }
1369
-
1370
- .c0.caret-pos--top-left .c3,
1371
- .c0.caret-pos--bottom-left .c3 {
1372
- left: -9px;
1373
- margin-left: 0;
1374
- }
1375
-
1376
- .c0.caret-pos--top-left .c3::before,
1377
- .c0.caret-pos--bottom-left .c3::before,
1378
- .c0.caret-pos--top-left .c3::after,
1379
- .c0.caret-pos--bottom-left .c3::after {
1380
- left: 24px;
1381
- margin-left: 0;
1382
- }
1383
-
1384
- .c0.caret-pos--top-left .c3::after,
1385
- .c0.caret-pos--bottom-left .c3::after {
1386
- left: calc(24px + 1px);
1387
- }
1388
-
1389
- .c0.caret-pos--right .c3::before,
1390
- .c0.caret-pos--right-top .c3::before,
1391
- .c0.caret-pos--right-bottom .c3::before,
1392
- .c0.caret-pos--left .c3::before,
1393
- .c0.caret-pos--left-top .c3::before,
1394
- .c0.caret-pos--left-bottom .c3::before,
1395
- .c0.caret-pos--right .c3::after,
1396
- .c0.caret-pos--right-top .c3::after,
1397
- .c0.caret-pos--right-bottom .c3::after,
1398
- .c0.caret-pos--left .c3::after,
1399
- .c0.caret-pos--left-top .c3::after,
1400
- .c0.caret-pos--left-bottom .c3::after {
1401
- top: 50%;
1402
- left: auto;
1403
- margin-left: 0;
1404
- border-bottom-color: transparent;
1405
- }
1406
-
1407
- .c0.caret-pos--right .c3::before,
1408
- .c0.caret-pos--right-top .c3::before,
1409
- .c0.caret-pos--right-bottom .c3::before,
1410
- .c0.caret-pos--left .c3::before,
1411
- .c0.caret-pos--left-top .c3::before,
1412
- .c0.caret-pos--left-bottom .c3::before {
1413
- margin-top: calc((8px + 1px) * -1);
1414
- }
1415
-
1416
- .c0.caret-pos--right .c3::after,
1417
- .c0.caret-pos--right-top .c3::after,
1418
- .c0.caret-pos--right-bottom .c3::after,
1419
- .c0.caret-pos--left .c3::after,
1420
- .c0.caret-pos--left-top .c3::after,
1421
- .c0.caret-pos--left-bottom .c3::after {
1422
- margin-top: -8px;
1423
- }
1424
-
1425
- .c0.caret-pos--right .c3::before,
1426
- .c0.caret-pos--right-top .c3::before,
1427
- .c0.caret-pos--right-bottom .c3::before {
1428
- right: -16px;
1429
- }
1430
-
1431
- .c0.caret-pos--right .c3::after,
1432
- .c0.caret-pos--right-top .c3::after,
1433
- .c0.caret-pos--right-bottom .c3::after {
1434
- right: -14px;
1435
- }
1436
-
1437
- .c0.caret-pos--left .c3::before,
1438
- .c0.caret-pos--left-top .c3::before,
1439
- .c0.caret-pos--left-bottom .c3::before {
1440
- left: -16px;
1441
- }
1442
-
1443
- .c0.caret-pos--left .c3::after,
1444
- .c0.caret-pos--left-top .c3::after,
1445
- .c0.caret-pos--left-bottom .c3::after {
1446
- left: -14px;
1447
- }
1448
-
1449
- .c0.caret-pos--right-top .c3::before,
1450
- .c0.caret-pos--left-top .c3::before,
1451
- .c0.caret-pos--right-top .c3::after,
1452
- .c0.caret-pos--left-top .c3::after {
1453
- top: 24px;
1454
- }
1455
-
1456
- .c0.caret-pos--right-bottom .c3::before,
1457
- .c0.caret-pos--left-bottom .c3::before,
1458
- .c0.caret-pos--right-bottom .c3::after,
1459
- .c0.caret-pos--left-bottom .c3::after {
1460
- top: auto;
1461
- }
1462
-
1463
- .c0.caret-pos--right-bottom .c3::before,
1464
- .c0.caret-pos--left-bottom .c3::before {
1465
- bottom: 16px;
1466
- }
1467
-
1468
- .c0.caret-pos--right-bottom .c3::after,
1469
- .c0.caret-pos--left-bottom .c3::after {
1470
- bottom: calc(16px + 1px);
1471
- }
1472
-
1473
- <div
1474
- className="c0 c1 caret-pos--bottom-right"
1475
- open={true}
1476
- >
1477
- <div
1478
- className="c2"
1479
- >
1480
- Hello!
1481
- </div>
1482
- </div>
1483
- `;
1484
-
1485
- exports[`Popover renders correctly for a caret position of left 1`] = `
1486
- .c1 {
1487
- position: absolute;
1488
- z-index: 100;
1489
- display: block;
1490
- }
1491
-
1492
- .c2 {
1493
- border: 1px solid #e1e4e8;
1494
- border-radius: 6px;
1495
- position: relative;
1496
- width: 232px;
1497
- margin-right: auto;
1498
- margin-left: auto;
1499
- padding: 24px;
1500
- background-color: #ffffff;
1501
- }
1502
-
1503
- .c2::before,
1504
- .c2::after {
1505
- position: absolute;
1506
- left: 50%;
1507
- display: inline-block;
1508
- content: '';
1509
- }
1510
-
1511
- .c2::before {
1512
- top: -16px;
1513
- margin-left: -9px;
1514
- border: 8px solid transparent;
1515
- border-bottom-color: #e1e4e8;
1516
- }
1517
-
1518
- .c2::after {
1519
- top: -14px;
1520
- margin-left: -8px;
1521
- border: 7px solid transparent;
1522
- border-bottom-color: #ffffff;
1523
- }
1524
-
1525
- .c0.caret-pos--bottom .c2::before,
1526
- .c0.caret-pos--bottom-right .c2::before,
1527
- .c0.caret-pos--bottom-left .c2::before,
1528
- .c0.caret-pos--bottom .c2::after,
1529
- .c0.caret-pos--bottom-right .c2::after,
1530
- .c0.caret-pos--bottom-left .c2::after {
1531
- top: auto;
1532
- border-bottom-color: transparent;
1533
- }
1534
-
1535
- .c0.caret-pos--bottom .c2::before,
1536
- .c0.caret-pos--bottom-right .c2::before,
1537
- .c0.caret-pos--bottom-left .c2::before {
1538
- bottom: -16px;
1539
- border-top-color: #e1e4e8;
1540
- }
1541
-
1542
- .c0.caret-pos--bottom .c2::after,
1543
- .c0.caret-pos--bottom-right .c2::after,
1544
- .c0.caret-pos--bottom-left .c2::after {
1545
- bottom: -14px;
1546
- border-top-color: #ffffff;
1547
- }
1548
-
1549
- .c0.caret-pos--top-right .c2,
1550
- .c0.caret-pos--bottom-right .c2 {
1551
- right: -9px;
1552
- margin-right: 0;
1553
- }
1554
-
1555
- .c0.caret-pos--top-right .c2::before,
1556
- .c0.caret-pos--bottom-right .c2::before,
1557
- .c0.caret-pos--top-right .c2::after,
1558
- .c0.caret-pos--bottom-right .c2::after {
1559
- left: auto;
1560
- margin-left: 0;
1561
- }
1562
-
1563
- .c0.caret-pos--top-right .c2::before,
1564
- .c0.caret-pos--bottom-right .c2::before {
1565
- right: 20px;
1566
- }
1567
-
1568
- .c0.caret-pos--top-right .c2::after,
1569
- .c0.caret-pos--bottom-right .c2::after {
1570
- right: 21px;
1571
- }
1572
-
1573
- .c0.caret-pos--top-left .c2,
1574
- .c0.caret-pos--bottom-left .c2 {
1575
- left: -9px;
1576
- margin-left: 0;
1577
- }
1578
-
1579
- .c0.caret-pos--top-left .c2::before,
1580
- .c0.caret-pos--bottom-left .c2::before,
1581
- .c0.caret-pos--top-left .c2::after,
1582
- .c0.caret-pos--bottom-left .c2::after {
1583
- left: 24px;
1584
- margin-left: 0;
1585
- }
1586
-
1587
- .c0.caret-pos--top-left .c2::after,
1588
- .c0.caret-pos--bottom-left .c2::after {
1589
- left: calc(24px + 1px);
1590
- }
1591
-
1592
- .c0.caret-pos--right .c2::before,
1593
- .c0.caret-pos--right-top .c2::before,
1594
- .c0.caret-pos--right-bottom .c2::before,
1595
- .c0.caret-pos--left .c2::before,
1596
- .c0.caret-pos--left-top .c2::before,
1597
- .c0.caret-pos--left-bottom .c2::before,
1598
- .c0.caret-pos--right .c2::after,
1599
- .c0.caret-pos--right-top .c2::after,
1600
- .c0.caret-pos--right-bottom .c2::after,
1601
- .c0.caret-pos--left .c2::after,
1602
- .c0.caret-pos--left-top .c2::after,
1603
- .c0.caret-pos--left-bottom .c2::after {
1604
- top: 50%;
1605
- left: auto;
1606
- margin-left: 0;
1607
- border-bottom-color: transparent;
1608
- }
1609
-
1610
- .c0.caret-pos--right .c2::before,
1611
- .c0.caret-pos--right-top .c2::before,
1612
- .c0.caret-pos--right-bottom .c2::before,
1613
- .c0.caret-pos--left .c2::before,
1614
- .c0.caret-pos--left-top .c2::before,
1615
- .c0.caret-pos--left-bottom .c2::before {
1616
- margin-top: calc((8px + 1px) * -1);
1617
- }
1618
-
1619
- .c0.caret-pos--right .c2::after,
1620
- .c0.caret-pos--right-top .c2::after,
1621
- .c0.caret-pos--right-bottom .c2::after,
1622
- .c0.caret-pos--left .c2::after,
1623
- .c0.caret-pos--left-top .c2::after,
1624
- .c0.caret-pos--left-bottom .c2::after {
1625
- margin-top: -8px;
1626
- }
1627
-
1628
- .c0.caret-pos--right .c2::before,
1629
- .c0.caret-pos--right-top .c2::before,
1630
- .c0.caret-pos--right-bottom .c2::before {
1631
- right: -16px;
1632
- border-left-color: #e1e4e8;
1633
- }
1634
-
1635
- .c0.caret-pos--right .c2::after,
1636
- .c0.caret-pos--right-top .c2::after,
1637
- .c0.caret-pos--right-bottom .c2::after {
1638
- right: -14px;
1639
- border-left-color: #ffffff;
1640
- }
1641
-
1642
- .c0.caret-pos--left .c2::before,
1643
- .c0.caret-pos--left-top .c2::before,
1644
- .c0.caret-pos--left-bottom .c2::before {
1645
- left: -16px;
1646
- border-right-color: #e1e4e8;
1647
- }
1648
-
1649
- .c0.caret-pos--left .c2::after,
1650
- .c0.caret-pos--left-top .c2::after,
1651
- .c0.caret-pos--left-bottom .c2::after {
1652
- left: -14px;
1653
- border-right-color: #ffffff;
1654
- }
1655
-
1656
- .c0.caret-pos--right-top .c2::before,
1657
- .c0.caret-pos--left-top .c2::before,
1658
- .c0.caret-pos--right-top .c2::after,
1659
- .c0.caret-pos--left-top .c2::after {
1660
- top: 24px;
1661
- }
1662
-
1663
- .c0.caret-pos--right-bottom .c2::before,
1664
- .c0.caret-pos--left-bottom .c2::before,
1665
- .c0.caret-pos--right-bottom .c2::after,
1666
- .c0.caret-pos--left-bottom .c2::after {
1667
- top: auto;
1668
- }
1669
-
1670
- .c0.caret-pos--right-bottom .c2::before,
1671
- .c0.caret-pos--left-bottom .c2::before {
1672
- bottom: 16px;
1673
- }
1674
-
1675
- .c0.caret-pos--right-bottom .c2::after,
1676
- .c0.caret-pos--left-bottom .c2::after {
1677
- bottom: calc(16px + 1px);
1678
- }
1679
-
1680
- .c0.caret-pos--bottom .c3::before,
1681
- .c0.caret-pos--bottom-right .c3::before,
1682
- .c0.caret-pos--bottom-left .c3::before,
1683
- .c0.caret-pos--bottom .c3::after,
1684
- .c0.caret-pos--bottom-right .c3::after,
1685
- .c0.caret-pos--bottom-left .c3::after {
1686
- top: auto;
1687
- border-bottom-color: transparent;
1688
- }
1689
-
1690
- .c0.caret-pos--bottom .c3::before,
1691
- .c0.caret-pos--bottom-right .c3::before,
1692
- .c0.caret-pos--bottom-left .c3::before {
1693
- bottom: -16px;
1694
- }
1695
-
1696
- .c0.caret-pos--bottom .c3::after,
1697
- .c0.caret-pos--bottom-right .c3::after,
1698
- .c0.caret-pos--bottom-left .c3::after {
1699
- bottom: -14px;
1700
- }
1701
-
1702
- .c0.caret-pos--top-right .c3,
1703
- .c0.caret-pos--bottom-right .c3 {
1704
- right: -9px;
1705
- margin-right: 0;
1706
- }
1707
-
1708
- .c0.caret-pos--top-right .c3::before,
1709
- .c0.caret-pos--bottom-right .c3::before,
1710
- .c0.caret-pos--top-right .c3::after,
1711
- .c0.caret-pos--bottom-right .c3::after {
1712
- left: auto;
1713
- margin-left: 0;
1714
- }
1715
-
1716
- .c0.caret-pos--top-right .c3::before,
1717
- .c0.caret-pos--bottom-right .c3::before {
1718
- right: 20px;
1719
- }
1720
-
1721
- .c0.caret-pos--top-right .c3::after,
1722
- .c0.caret-pos--bottom-right .c3::after {
1723
- right: 21px;
1724
- }
1725
-
1726
- .c0.caret-pos--top-left .c3,
1727
- .c0.caret-pos--bottom-left .c3 {
1728
- left: -9px;
1729
- margin-left: 0;
1730
- }
1731
-
1732
- .c0.caret-pos--top-left .c3::before,
1733
- .c0.caret-pos--bottom-left .c3::before,
1734
- .c0.caret-pos--top-left .c3::after,
1735
- .c0.caret-pos--bottom-left .c3::after {
1736
- left: 24px;
1737
- margin-left: 0;
1738
- }
1739
-
1740
- .c0.caret-pos--top-left .c3::after,
1741
- .c0.caret-pos--bottom-left .c3::after {
1742
- left: calc(24px + 1px);
1743
- }
1744
-
1745
- .c0.caret-pos--right .c3::before,
1746
- .c0.caret-pos--right-top .c3::before,
1747
- .c0.caret-pos--right-bottom .c3::before,
1748
- .c0.caret-pos--left .c3::before,
1749
- .c0.caret-pos--left-top .c3::before,
1750
- .c0.caret-pos--left-bottom .c3::before,
1751
- .c0.caret-pos--right .c3::after,
1752
- .c0.caret-pos--right-top .c3::after,
1753
- .c0.caret-pos--right-bottom .c3::after,
1754
- .c0.caret-pos--left .c3::after,
1755
- .c0.caret-pos--left-top .c3::after,
1756
- .c0.caret-pos--left-bottom .c3::after {
1757
- top: 50%;
1758
- left: auto;
1759
- margin-left: 0;
1760
- border-bottom-color: transparent;
1761
- }
1762
-
1763
- .c0.caret-pos--right .c3::before,
1764
- .c0.caret-pos--right-top .c3::before,
1765
- .c0.caret-pos--right-bottom .c3::before,
1766
- .c0.caret-pos--left .c3::before,
1767
- .c0.caret-pos--left-top .c3::before,
1768
- .c0.caret-pos--left-bottom .c3::before {
1769
- margin-top: calc((8px + 1px) * -1);
1770
- }
1771
-
1772
- .c0.caret-pos--right .c3::after,
1773
- .c0.caret-pos--right-top .c3::after,
1774
- .c0.caret-pos--right-bottom .c3::after,
1775
- .c0.caret-pos--left .c3::after,
1776
- .c0.caret-pos--left-top .c3::after,
1777
- .c0.caret-pos--left-bottom .c3::after {
1778
- margin-top: -8px;
1779
- }
1780
-
1781
- .c0.caret-pos--right .c3::before,
1782
- .c0.caret-pos--right-top .c3::before,
1783
- .c0.caret-pos--right-bottom .c3::before {
1784
- right: -16px;
1785
- }
1786
-
1787
- .c0.caret-pos--right .c3::after,
1788
- .c0.caret-pos--right-top .c3::after,
1789
- .c0.caret-pos--right-bottom .c3::after {
1790
- right: -14px;
1791
- }
1792
-
1793
- .c0.caret-pos--left .c3::before,
1794
- .c0.caret-pos--left-top .c3::before,
1795
- .c0.caret-pos--left-bottom .c3::before {
1796
- left: -16px;
1797
- }
1798
-
1799
- .c0.caret-pos--left .c3::after,
1800
- .c0.caret-pos--left-top .c3::after,
1801
- .c0.caret-pos--left-bottom .c3::after {
1802
- left: -14px;
1803
- }
1804
-
1805
- .c0.caret-pos--right-top .c3::before,
1806
- .c0.caret-pos--left-top .c3::before,
1807
- .c0.caret-pos--right-top .c3::after,
1808
- .c0.caret-pos--left-top .c3::after {
1809
- top: 24px;
1810
- }
1811
-
1812
- .c0.caret-pos--right-bottom .c3::before,
1813
- .c0.caret-pos--left-bottom .c3::before,
1814
- .c0.caret-pos--right-bottom .c3::after,
1815
- .c0.caret-pos--left-bottom .c3::after {
1816
- top: auto;
1817
- }
1818
-
1819
- .c0.caret-pos--right-bottom .c3::before,
1820
- .c0.caret-pos--left-bottom .c3::before {
1821
- bottom: 16px;
1822
- }
1823
-
1824
- .c0.caret-pos--right-bottom .c3::after,
1825
- .c0.caret-pos--left-bottom .c3::after {
1826
- bottom: calc(16px + 1px);
1827
- }
1828
-
1829
- <div
1830
- className="c0 c1 caret-pos--left"
1831
- open={true}
1832
- >
1833
- <div
1834
- className="c2"
1835
- >
1836
- Hello!
1837
- </div>
1838
- </div>
1839
- `;
1840
-
1841
- exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
1842
- .c1 {
1843
- position: absolute;
1844
- z-index: 100;
1845
- display: block;
1846
- }
1847
-
1848
- .c2 {
1849
- border: 1px solid #e1e4e8;
1850
- border-radius: 6px;
1851
- position: relative;
1852
- width: 232px;
1853
- margin-right: auto;
1854
- margin-left: auto;
1855
- padding: 24px;
1856
- background-color: #ffffff;
1857
- }
1858
-
1859
- .c2::before,
1860
- .c2::after {
1861
- position: absolute;
1862
- left: 50%;
1863
- display: inline-block;
1864
- content: '';
1865
- }
1866
-
1867
- .c2::before {
1868
- top: -16px;
1869
- margin-left: -9px;
1870
- border: 8px solid transparent;
1871
- border-bottom-color: #e1e4e8;
1872
- }
1873
-
1874
- .c2::after {
1875
- top: -14px;
1876
- margin-left: -8px;
1877
- border: 7px solid transparent;
1878
- border-bottom-color: #ffffff;
1879
- }
1880
-
1881
- .c0.caret-pos--bottom .c2::before,
1882
- .c0.caret-pos--bottom-right .c2::before,
1883
- .c0.caret-pos--bottom-left .c2::before,
1884
- .c0.caret-pos--bottom .c2::after,
1885
- .c0.caret-pos--bottom-right .c2::after,
1886
- .c0.caret-pos--bottom-left .c2::after {
1887
- top: auto;
1888
- border-bottom-color: transparent;
1889
- }
1890
-
1891
- .c0.caret-pos--bottom .c2::before,
1892
- .c0.caret-pos--bottom-right .c2::before,
1893
- .c0.caret-pos--bottom-left .c2::before {
1894
- bottom: -16px;
1895
- border-top-color: #e1e4e8;
1896
- }
1897
-
1898
- .c0.caret-pos--bottom .c2::after,
1899
- .c0.caret-pos--bottom-right .c2::after,
1900
- .c0.caret-pos--bottom-left .c2::after {
1901
- bottom: -14px;
1902
- border-top-color: #ffffff;
1903
- }
1904
-
1905
- .c0.caret-pos--top-right .c2,
1906
- .c0.caret-pos--bottom-right .c2 {
1907
- right: -9px;
1908
- margin-right: 0;
1909
- }
1910
-
1911
- .c0.caret-pos--top-right .c2::before,
1912
- .c0.caret-pos--bottom-right .c2::before,
1913
- .c0.caret-pos--top-right .c2::after,
1914
- .c0.caret-pos--bottom-right .c2::after {
1915
- left: auto;
1916
- margin-left: 0;
1917
- }
1918
-
1919
- .c0.caret-pos--top-right .c2::before,
1920
- .c0.caret-pos--bottom-right .c2::before {
1921
- right: 20px;
1922
- }
1923
-
1924
- .c0.caret-pos--top-right .c2::after,
1925
- .c0.caret-pos--bottom-right .c2::after {
1926
- right: 21px;
1927
- }
1928
-
1929
- .c0.caret-pos--top-left .c2,
1930
- .c0.caret-pos--bottom-left .c2 {
1931
- left: -9px;
1932
- margin-left: 0;
1933
- }
1934
-
1935
- .c0.caret-pos--top-left .c2::before,
1936
- .c0.caret-pos--bottom-left .c2::before,
1937
- .c0.caret-pos--top-left .c2::after,
1938
- .c0.caret-pos--bottom-left .c2::after {
1939
- left: 24px;
1940
- margin-left: 0;
1941
- }
1942
-
1943
- .c0.caret-pos--top-left .c2::after,
1944
- .c0.caret-pos--bottom-left .c2::after {
1945
- left: calc(24px + 1px);
1946
- }
1947
-
1948
- .c0.caret-pos--right .c2::before,
1949
- .c0.caret-pos--right-top .c2::before,
1950
- .c0.caret-pos--right-bottom .c2::before,
1951
- .c0.caret-pos--left .c2::before,
1952
- .c0.caret-pos--left-top .c2::before,
1953
- .c0.caret-pos--left-bottom .c2::before,
1954
- .c0.caret-pos--right .c2::after,
1955
- .c0.caret-pos--right-top .c2::after,
1956
- .c0.caret-pos--right-bottom .c2::after,
1957
- .c0.caret-pos--left .c2::after,
1958
- .c0.caret-pos--left-top .c2::after,
1959
- .c0.caret-pos--left-bottom .c2::after {
1960
- top: 50%;
1961
- left: auto;
1962
- margin-left: 0;
1963
- border-bottom-color: transparent;
1964
- }
1965
-
1966
- .c0.caret-pos--right .c2::before,
1967
- .c0.caret-pos--right-top .c2::before,
1968
- .c0.caret-pos--right-bottom .c2::before,
1969
- .c0.caret-pos--left .c2::before,
1970
- .c0.caret-pos--left-top .c2::before,
1971
- .c0.caret-pos--left-bottom .c2::before {
1972
- margin-top: calc((8px + 1px) * -1);
1973
- }
1974
-
1975
- .c0.caret-pos--right .c2::after,
1976
- .c0.caret-pos--right-top .c2::after,
1977
- .c0.caret-pos--right-bottom .c2::after,
1978
- .c0.caret-pos--left .c2::after,
1979
- .c0.caret-pos--left-top .c2::after,
1980
- .c0.caret-pos--left-bottom .c2::after {
1981
- margin-top: -8px;
1982
- }
1983
-
1984
- .c0.caret-pos--right .c2::before,
1985
- .c0.caret-pos--right-top .c2::before,
1986
- .c0.caret-pos--right-bottom .c2::before {
1987
- right: -16px;
1988
- border-left-color: #e1e4e8;
1989
- }
1990
-
1991
- .c0.caret-pos--right .c2::after,
1992
- .c0.caret-pos--right-top .c2::after,
1993
- .c0.caret-pos--right-bottom .c2::after {
1994
- right: -14px;
1995
- border-left-color: #ffffff;
1996
- }
1997
-
1998
- .c0.caret-pos--left .c2::before,
1999
- .c0.caret-pos--left-top .c2::before,
2000
- .c0.caret-pos--left-bottom .c2::before {
2001
- left: -16px;
2002
- border-right-color: #e1e4e8;
2003
- }
2004
-
2005
- .c0.caret-pos--left .c2::after,
2006
- .c0.caret-pos--left-top .c2::after,
2007
- .c0.caret-pos--left-bottom .c2::after {
2008
- left: -14px;
2009
- border-right-color: #ffffff;
2010
- }
2011
-
2012
- .c0.caret-pos--right-top .c2::before,
2013
- .c0.caret-pos--left-top .c2::before,
2014
- .c0.caret-pos--right-top .c2::after,
2015
- .c0.caret-pos--left-top .c2::after {
2016
- top: 24px;
2017
- }
2018
-
2019
- .c0.caret-pos--right-bottom .c2::before,
2020
- .c0.caret-pos--left-bottom .c2::before,
2021
- .c0.caret-pos--right-bottom .c2::after,
2022
- .c0.caret-pos--left-bottom .c2::after {
2023
- top: auto;
2024
- }
2025
-
2026
- .c0.caret-pos--right-bottom .c2::before,
2027
- .c0.caret-pos--left-bottom .c2::before {
2028
- bottom: 16px;
2029
- }
2030
-
2031
- .c0.caret-pos--right-bottom .c2::after,
2032
- .c0.caret-pos--left-bottom .c2::after {
2033
- bottom: calc(16px + 1px);
2034
- }
2035
-
2036
- .c0.caret-pos--bottom .c3::before,
2037
- .c0.caret-pos--bottom-right .c3::before,
2038
- .c0.caret-pos--bottom-left .c3::before,
2039
- .c0.caret-pos--bottom .c3::after,
2040
- .c0.caret-pos--bottom-right .c3::after,
2041
- .c0.caret-pos--bottom-left .c3::after {
2042
- top: auto;
2043
- border-bottom-color: transparent;
2044
- }
2045
-
2046
- .c0.caret-pos--bottom .c3::before,
2047
- .c0.caret-pos--bottom-right .c3::before,
2048
- .c0.caret-pos--bottom-left .c3::before {
2049
- bottom: -16px;
2050
- }
2051
-
2052
- .c0.caret-pos--bottom .c3::after,
2053
- .c0.caret-pos--bottom-right .c3::after,
2054
- .c0.caret-pos--bottom-left .c3::after {
2055
- bottom: -14px;
2056
- }
2057
-
2058
- .c0.caret-pos--top-right .c3,
2059
- .c0.caret-pos--bottom-right .c3 {
2060
- right: -9px;
2061
- margin-right: 0;
2062
- }
2063
-
2064
- .c0.caret-pos--top-right .c3::before,
2065
- .c0.caret-pos--bottom-right .c3::before,
2066
- .c0.caret-pos--top-right .c3::after,
2067
- .c0.caret-pos--bottom-right .c3::after {
2068
- left: auto;
2069
- margin-left: 0;
2070
- }
2071
-
2072
- .c0.caret-pos--top-right .c3::before,
2073
- .c0.caret-pos--bottom-right .c3::before {
2074
- right: 20px;
2075
- }
2076
-
2077
- .c0.caret-pos--top-right .c3::after,
2078
- .c0.caret-pos--bottom-right .c3::after {
2079
- right: 21px;
2080
- }
2081
-
2082
- .c0.caret-pos--top-left .c3,
2083
- .c0.caret-pos--bottom-left .c3 {
2084
- left: -9px;
2085
- margin-left: 0;
2086
- }
2087
-
2088
- .c0.caret-pos--top-left .c3::before,
2089
- .c0.caret-pos--bottom-left .c3::before,
2090
- .c0.caret-pos--top-left .c3::after,
2091
- .c0.caret-pos--bottom-left .c3::after {
2092
- left: 24px;
2093
- margin-left: 0;
2094
- }
2095
-
2096
- .c0.caret-pos--top-left .c3::after,
2097
- .c0.caret-pos--bottom-left .c3::after {
2098
- left: calc(24px + 1px);
2099
- }
2100
-
2101
- .c0.caret-pos--right .c3::before,
2102
- .c0.caret-pos--right-top .c3::before,
2103
- .c0.caret-pos--right-bottom .c3::before,
2104
- .c0.caret-pos--left .c3::before,
2105
- .c0.caret-pos--left-top .c3::before,
2106
- .c0.caret-pos--left-bottom .c3::before,
2107
- .c0.caret-pos--right .c3::after,
2108
- .c0.caret-pos--right-top .c3::after,
2109
- .c0.caret-pos--right-bottom .c3::after,
2110
- .c0.caret-pos--left .c3::after,
2111
- .c0.caret-pos--left-top .c3::after,
2112
- .c0.caret-pos--left-bottom .c3::after {
2113
- top: 50%;
2114
- left: auto;
2115
- margin-left: 0;
2116
- border-bottom-color: transparent;
2117
- }
2118
-
2119
- .c0.caret-pos--right .c3::before,
2120
- .c0.caret-pos--right-top .c3::before,
2121
- .c0.caret-pos--right-bottom .c3::before,
2122
- .c0.caret-pos--left .c3::before,
2123
- .c0.caret-pos--left-top .c3::before,
2124
- .c0.caret-pos--left-bottom .c3::before {
2125
- margin-top: calc((8px + 1px) * -1);
2126
- }
2127
-
2128
- .c0.caret-pos--right .c3::after,
2129
- .c0.caret-pos--right-top .c3::after,
2130
- .c0.caret-pos--right-bottom .c3::after,
2131
- .c0.caret-pos--left .c3::after,
2132
- .c0.caret-pos--left-top .c3::after,
2133
- .c0.caret-pos--left-bottom .c3::after {
2134
- margin-top: -8px;
2135
- }
2136
-
2137
- .c0.caret-pos--right .c3::before,
2138
- .c0.caret-pos--right-top .c3::before,
2139
- .c0.caret-pos--right-bottom .c3::before {
2140
- right: -16px;
2141
- }
2142
-
2143
- .c0.caret-pos--right .c3::after,
2144
- .c0.caret-pos--right-top .c3::after,
2145
- .c0.caret-pos--right-bottom .c3::after {
2146
- right: -14px;
2147
- }
2148
-
2149
- .c0.caret-pos--left .c3::before,
2150
- .c0.caret-pos--left-top .c3::before,
2151
- .c0.caret-pos--left-bottom .c3::before {
2152
- left: -16px;
2153
- }
2154
-
2155
- .c0.caret-pos--left .c3::after,
2156
- .c0.caret-pos--left-top .c3::after,
2157
- .c0.caret-pos--left-bottom .c3::after {
2158
- left: -14px;
2159
- }
2160
-
2161
- .c0.caret-pos--right-top .c3::before,
2162
- .c0.caret-pos--left-top .c3::before,
2163
- .c0.caret-pos--right-top .c3::after,
2164
- .c0.caret-pos--left-top .c3::after {
2165
- top: 24px;
2166
- }
2167
-
2168
- .c0.caret-pos--right-bottom .c3::before,
2169
- .c0.caret-pos--left-bottom .c3::before,
2170
- .c0.caret-pos--right-bottom .c3::after,
2171
- .c0.caret-pos--left-bottom .c3::after {
2172
- top: auto;
2173
- }
2174
-
2175
- .c0.caret-pos--right-bottom .c3::before,
2176
- .c0.caret-pos--left-bottom .c3::before {
2177
- bottom: 16px;
2178
- }
2179
-
2180
- .c0.caret-pos--right-bottom .c3::after,
2181
- .c0.caret-pos--left-bottom .c3::after {
2182
- bottom: calc(16px + 1px);
2183
- }
2184
-
2185
- <div
2186
- className="c0 c1 caret-pos--left-bottom"
2187
- open={true}
2188
- >
2189
- <div
2190
- className="c2"
2191
- >
2192
- Hello!
2193
- </div>
2194
- </div>
2195
- `;
2196
-
2197
- exports[`Popover renders correctly for a caret position of left-top 1`] = `
2198
- .c1 {
2199
- position: absolute;
2200
- z-index: 100;
2201
- display: block;
2202
- }
2203
-
2204
- .c2 {
2205
- border: 1px solid #e1e4e8;
2206
- border-radius: 6px;
2207
- position: relative;
2208
- width: 232px;
2209
- margin-right: auto;
2210
- margin-left: auto;
2211
- padding: 24px;
2212
- background-color: #ffffff;
2213
- }
2214
-
2215
- .c2::before,
2216
- .c2::after {
2217
- position: absolute;
2218
- left: 50%;
2219
- display: inline-block;
2220
- content: '';
2221
- }
2222
-
2223
- .c2::before {
2224
- top: -16px;
2225
- margin-left: -9px;
2226
- border: 8px solid transparent;
2227
- border-bottom-color: #e1e4e8;
2228
- }
2229
-
2230
- .c2::after {
2231
- top: -14px;
2232
- margin-left: -8px;
2233
- border: 7px solid transparent;
2234
- border-bottom-color: #ffffff;
2235
- }
2236
-
2237
- .c0.caret-pos--bottom .c2::before,
2238
- .c0.caret-pos--bottom-right .c2::before,
2239
- .c0.caret-pos--bottom-left .c2::before,
2240
- .c0.caret-pos--bottom .c2::after,
2241
- .c0.caret-pos--bottom-right .c2::after,
2242
- .c0.caret-pos--bottom-left .c2::after {
2243
- top: auto;
2244
- border-bottom-color: transparent;
2245
- }
2246
-
2247
- .c0.caret-pos--bottom .c2::before,
2248
- .c0.caret-pos--bottom-right .c2::before,
2249
- .c0.caret-pos--bottom-left .c2::before {
2250
- bottom: -16px;
2251
- border-top-color: #e1e4e8;
2252
- }
2253
-
2254
- .c0.caret-pos--bottom .c2::after,
2255
- .c0.caret-pos--bottom-right .c2::after,
2256
- .c0.caret-pos--bottom-left .c2::after {
2257
- bottom: -14px;
2258
- border-top-color: #ffffff;
2259
- }
2260
-
2261
- .c0.caret-pos--top-right .c2,
2262
- .c0.caret-pos--bottom-right .c2 {
2263
- right: -9px;
2264
- margin-right: 0;
2265
- }
2266
-
2267
- .c0.caret-pos--top-right .c2::before,
2268
- .c0.caret-pos--bottom-right .c2::before,
2269
- .c0.caret-pos--top-right .c2::after,
2270
- .c0.caret-pos--bottom-right .c2::after {
2271
- left: auto;
2272
- margin-left: 0;
2273
- }
2274
-
2275
- .c0.caret-pos--top-right .c2::before,
2276
- .c0.caret-pos--bottom-right .c2::before {
2277
- right: 20px;
2278
- }
2279
-
2280
- .c0.caret-pos--top-right .c2::after,
2281
- .c0.caret-pos--bottom-right .c2::after {
2282
- right: 21px;
2283
- }
2284
-
2285
- .c0.caret-pos--top-left .c2,
2286
- .c0.caret-pos--bottom-left .c2 {
2287
- left: -9px;
2288
- margin-left: 0;
2289
- }
2290
-
2291
- .c0.caret-pos--top-left .c2::before,
2292
- .c0.caret-pos--bottom-left .c2::before,
2293
- .c0.caret-pos--top-left .c2::after,
2294
- .c0.caret-pos--bottom-left .c2::after {
2295
- left: 24px;
2296
- margin-left: 0;
2297
- }
2298
-
2299
- .c0.caret-pos--top-left .c2::after,
2300
- .c0.caret-pos--bottom-left .c2::after {
2301
- left: calc(24px + 1px);
2302
- }
2303
-
2304
- .c0.caret-pos--right .c2::before,
2305
- .c0.caret-pos--right-top .c2::before,
2306
- .c0.caret-pos--right-bottom .c2::before,
2307
- .c0.caret-pos--left .c2::before,
2308
- .c0.caret-pos--left-top .c2::before,
2309
- .c0.caret-pos--left-bottom .c2::before,
2310
- .c0.caret-pos--right .c2::after,
2311
- .c0.caret-pos--right-top .c2::after,
2312
- .c0.caret-pos--right-bottom .c2::after,
2313
- .c0.caret-pos--left .c2::after,
2314
- .c0.caret-pos--left-top .c2::after,
2315
- .c0.caret-pos--left-bottom .c2::after {
2316
- top: 50%;
2317
- left: auto;
2318
- margin-left: 0;
2319
- border-bottom-color: transparent;
2320
- }
2321
-
2322
- .c0.caret-pos--right .c2::before,
2323
- .c0.caret-pos--right-top .c2::before,
2324
- .c0.caret-pos--right-bottom .c2::before,
2325
- .c0.caret-pos--left .c2::before,
2326
- .c0.caret-pos--left-top .c2::before,
2327
- .c0.caret-pos--left-bottom .c2::before {
2328
- margin-top: calc((8px + 1px) * -1);
2329
- }
2330
-
2331
- .c0.caret-pos--right .c2::after,
2332
- .c0.caret-pos--right-top .c2::after,
2333
- .c0.caret-pos--right-bottom .c2::after,
2334
- .c0.caret-pos--left .c2::after,
2335
- .c0.caret-pos--left-top .c2::after,
2336
- .c0.caret-pos--left-bottom .c2::after {
2337
- margin-top: -8px;
2338
- }
2339
-
2340
- .c0.caret-pos--right .c2::before,
2341
- .c0.caret-pos--right-top .c2::before,
2342
- .c0.caret-pos--right-bottom .c2::before {
2343
- right: -16px;
2344
- border-left-color: #e1e4e8;
2345
- }
2346
-
2347
- .c0.caret-pos--right .c2::after,
2348
- .c0.caret-pos--right-top .c2::after,
2349
- .c0.caret-pos--right-bottom .c2::after {
2350
- right: -14px;
2351
- border-left-color: #ffffff;
2352
- }
2353
-
2354
- .c0.caret-pos--left .c2::before,
2355
- .c0.caret-pos--left-top .c2::before,
2356
- .c0.caret-pos--left-bottom .c2::before {
2357
- left: -16px;
2358
- border-right-color: #e1e4e8;
2359
- }
2360
-
2361
- .c0.caret-pos--left .c2::after,
2362
- .c0.caret-pos--left-top .c2::after,
2363
- .c0.caret-pos--left-bottom .c2::after {
2364
- left: -14px;
2365
- border-right-color: #ffffff;
2366
- }
2367
-
2368
- .c0.caret-pos--right-top .c2::before,
2369
- .c0.caret-pos--left-top .c2::before,
2370
- .c0.caret-pos--right-top .c2::after,
2371
- .c0.caret-pos--left-top .c2::after {
2372
- top: 24px;
2373
- }
2374
-
2375
- .c0.caret-pos--right-bottom .c2::before,
2376
- .c0.caret-pos--left-bottom .c2::before,
2377
- .c0.caret-pos--right-bottom .c2::after,
2378
- .c0.caret-pos--left-bottom .c2::after {
2379
- top: auto;
2380
- }
2381
-
2382
- .c0.caret-pos--right-bottom .c2::before,
2383
- .c0.caret-pos--left-bottom .c2::before {
2384
- bottom: 16px;
2385
- }
2386
-
2387
- .c0.caret-pos--right-bottom .c2::after,
2388
- .c0.caret-pos--left-bottom .c2::after {
2389
- bottom: calc(16px + 1px);
2390
- }
2391
-
2392
- .c0.caret-pos--bottom .c3::before,
2393
- .c0.caret-pos--bottom-right .c3::before,
2394
- .c0.caret-pos--bottom-left .c3::before,
2395
- .c0.caret-pos--bottom .c3::after,
2396
- .c0.caret-pos--bottom-right .c3::after,
2397
- .c0.caret-pos--bottom-left .c3::after {
2398
- top: auto;
2399
- border-bottom-color: transparent;
2400
- }
2401
-
2402
- .c0.caret-pos--bottom .c3::before,
2403
- .c0.caret-pos--bottom-right .c3::before,
2404
- .c0.caret-pos--bottom-left .c3::before {
2405
- bottom: -16px;
2406
- }
2407
-
2408
- .c0.caret-pos--bottom .c3::after,
2409
- .c0.caret-pos--bottom-right .c3::after,
2410
- .c0.caret-pos--bottom-left .c3::after {
2411
- bottom: -14px;
2412
- }
2413
-
2414
- .c0.caret-pos--top-right .c3,
2415
- .c0.caret-pos--bottom-right .c3 {
2416
- right: -9px;
2417
- margin-right: 0;
2418
- }
2419
-
2420
- .c0.caret-pos--top-right .c3::before,
2421
- .c0.caret-pos--bottom-right .c3::before,
2422
- .c0.caret-pos--top-right .c3::after,
2423
- .c0.caret-pos--bottom-right .c3::after {
2424
- left: auto;
2425
- margin-left: 0;
2426
- }
2427
-
2428
- .c0.caret-pos--top-right .c3::before,
2429
- .c0.caret-pos--bottom-right .c3::before {
2430
- right: 20px;
2431
- }
2432
-
2433
- .c0.caret-pos--top-right .c3::after,
2434
- .c0.caret-pos--bottom-right .c3::after {
2435
- right: 21px;
2436
- }
2437
-
2438
- .c0.caret-pos--top-left .c3,
2439
- .c0.caret-pos--bottom-left .c3 {
2440
- left: -9px;
2441
- margin-left: 0;
2442
- }
2443
-
2444
- .c0.caret-pos--top-left .c3::before,
2445
- .c0.caret-pos--bottom-left .c3::before,
2446
- .c0.caret-pos--top-left .c3::after,
2447
- .c0.caret-pos--bottom-left .c3::after {
2448
- left: 24px;
2449
- margin-left: 0;
2450
- }
2451
-
2452
- .c0.caret-pos--top-left .c3::after,
2453
- .c0.caret-pos--bottom-left .c3::after {
2454
- left: calc(24px + 1px);
2455
- }
2456
-
2457
- .c0.caret-pos--right .c3::before,
2458
- .c0.caret-pos--right-top .c3::before,
2459
- .c0.caret-pos--right-bottom .c3::before,
2460
- .c0.caret-pos--left .c3::before,
2461
- .c0.caret-pos--left-top .c3::before,
2462
- .c0.caret-pos--left-bottom .c3::before,
2463
- .c0.caret-pos--right .c3::after,
2464
- .c0.caret-pos--right-top .c3::after,
2465
- .c0.caret-pos--right-bottom .c3::after,
2466
- .c0.caret-pos--left .c3::after,
2467
- .c0.caret-pos--left-top .c3::after,
2468
- .c0.caret-pos--left-bottom .c3::after {
2469
- top: 50%;
2470
- left: auto;
2471
- margin-left: 0;
2472
- border-bottom-color: transparent;
2473
- }
2474
-
2475
- .c0.caret-pos--right .c3::before,
2476
- .c0.caret-pos--right-top .c3::before,
2477
- .c0.caret-pos--right-bottom .c3::before,
2478
- .c0.caret-pos--left .c3::before,
2479
- .c0.caret-pos--left-top .c3::before,
2480
- .c0.caret-pos--left-bottom .c3::before {
2481
- margin-top: calc((8px + 1px) * -1);
2482
- }
2483
-
2484
- .c0.caret-pos--right .c3::after,
2485
- .c0.caret-pos--right-top .c3::after,
2486
- .c0.caret-pos--right-bottom .c3::after,
2487
- .c0.caret-pos--left .c3::after,
2488
- .c0.caret-pos--left-top .c3::after,
2489
- .c0.caret-pos--left-bottom .c3::after {
2490
- margin-top: -8px;
2491
- }
2492
-
2493
- .c0.caret-pos--right .c3::before,
2494
- .c0.caret-pos--right-top .c3::before,
2495
- .c0.caret-pos--right-bottom .c3::before {
2496
- right: -16px;
2497
- }
2498
-
2499
- .c0.caret-pos--right .c3::after,
2500
- .c0.caret-pos--right-top .c3::after,
2501
- .c0.caret-pos--right-bottom .c3::after {
2502
- right: -14px;
2503
- }
2504
-
2505
- .c0.caret-pos--left .c3::before,
2506
- .c0.caret-pos--left-top .c3::before,
2507
- .c0.caret-pos--left-bottom .c3::before {
2508
- left: -16px;
2509
- }
2510
-
2511
- .c0.caret-pos--left .c3::after,
2512
- .c0.caret-pos--left-top .c3::after,
2513
- .c0.caret-pos--left-bottom .c3::after {
2514
- left: -14px;
2515
- }
2516
-
2517
- .c0.caret-pos--right-top .c3::before,
2518
- .c0.caret-pos--left-top .c3::before,
2519
- .c0.caret-pos--right-top .c3::after,
2520
- .c0.caret-pos--left-top .c3::after {
2521
- top: 24px;
2522
- }
2523
-
2524
- .c0.caret-pos--right-bottom .c3::before,
2525
- .c0.caret-pos--left-bottom .c3::before,
2526
- .c0.caret-pos--right-bottom .c3::after,
2527
- .c0.caret-pos--left-bottom .c3::after {
2528
- top: auto;
2529
- }
2530
-
2531
- .c0.caret-pos--right-bottom .c3::before,
2532
- .c0.caret-pos--left-bottom .c3::before {
2533
- bottom: 16px;
2534
- }
2535
-
2536
- .c0.caret-pos--right-bottom .c3::after,
2537
- .c0.caret-pos--left-bottom .c3::after {
2538
- bottom: calc(16px + 1px);
2539
- }
2540
-
2541
- <div
2542
- className="c0 c1 caret-pos--left-top"
2543
- open={true}
2544
- >
2545
- <div
2546
- className="c2"
2547
- >
2548
- Hello!
2549
- </div>
2550
- </div>
2551
- `;
2552
-
2553
- exports[`Popover renders correctly for a caret position of right 1`] = `
2554
- .c1 {
2555
- position: absolute;
2556
- z-index: 100;
2557
- display: block;
2558
- }
2559
-
2560
- .c2 {
2561
- border: 1px solid #e1e4e8;
2562
- border-radius: 6px;
2563
- position: relative;
2564
- width: 232px;
2565
- margin-right: auto;
2566
- margin-left: auto;
2567
- padding: 24px;
2568
- background-color: #ffffff;
2569
- }
2570
-
2571
- .c2::before,
2572
- .c2::after {
2573
- position: absolute;
2574
- left: 50%;
2575
- display: inline-block;
2576
- content: '';
2577
- }
2578
-
2579
- .c2::before {
2580
- top: -16px;
2581
- margin-left: -9px;
2582
- border: 8px solid transparent;
2583
- border-bottom-color: #e1e4e8;
2584
- }
2585
-
2586
- .c2::after {
2587
- top: -14px;
2588
- margin-left: -8px;
2589
- border: 7px solid transparent;
2590
- border-bottom-color: #ffffff;
2591
- }
2592
-
2593
- .c0.caret-pos--bottom .c2::before,
2594
- .c0.caret-pos--bottom-right .c2::before,
2595
- .c0.caret-pos--bottom-left .c2::before,
2596
- .c0.caret-pos--bottom .c2::after,
2597
- .c0.caret-pos--bottom-right .c2::after,
2598
- .c0.caret-pos--bottom-left .c2::after {
2599
- top: auto;
2600
- border-bottom-color: transparent;
2601
- }
2602
-
2603
- .c0.caret-pos--bottom .c2::before,
2604
- .c0.caret-pos--bottom-right .c2::before,
2605
- .c0.caret-pos--bottom-left .c2::before {
2606
- bottom: -16px;
2607
- border-top-color: #e1e4e8;
2608
- }
2609
-
2610
- .c0.caret-pos--bottom .c2::after,
2611
- .c0.caret-pos--bottom-right .c2::after,
2612
- .c0.caret-pos--bottom-left .c2::after {
2613
- bottom: -14px;
2614
- border-top-color: #ffffff;
2615
- }
2616
-
2617
- .c0.caret-pos--top-right .c2,
2618
- .c0.caret-pos--bottom-right .c2 {
2619
- right: -9px;
2620
- margin-right: 0;
2621
- }
2622
-
2623
- .c0.caret-pos--top-right .c2::before,
2624
- .c0.caret-pos--bottom-right .c2::before,
2625
- .c0.caret-pos--top-right .c2::after,
2626
- .c0.caret-pos--bottom-right .c2::after {
2627
- left: auto;
2628
- margin-left: 0;
2629
- }
2630
-
2631
- .c0.caret-pos--top-right .c2::before,
2632
- .c0.caret-pos--bottom-right .c2::before {
2633
- right: 20px;
2634
- }
2635
-
2636
- .c0.caret-pos--top-right .c2::after,
2637
- .c0.caret-pos--bottom-right .c2::after {
2638
- right: 21px;
2639
- }
2640
-
2641
- .c0.caret-pos--top-left .c2,
2642
- .c0.caret-pos--bottom-left .c2 {
2643
- left: -9px;
2644
- margin-left: 0;
2645
- }
2646
-
2647
- .c0.caret-pos--top-left .c2::before,
2648
- .c0.caret-pos--bottom-left .c2::before,
2649
- .c0.caret-pos--top-left .c2::after,
2650
- .c0.caret-pos--bottom-left .c2::after {
2651
- left: 24px;
2652
- margin-left: 0;
2653
- }
2654
-
2655
- .c0.caret-pos--top-left .c2::after,
2656
- .c0.caret-pos--bottom-left .c2::after {
2657
- left: calc(24px + 1px);
2658
- }
2659
-
2660
- .c0.caret-pos--right .c2::before,
2661
- .c0.caret-pos--right-top .c2::before,
2662
- .c0.caret-pos--right-bottom .c2::before,
2663
- .c0.caret-pos--left .c2::before,
2664
- .c0.caret-pos--left-top .c2::before,
2665
- .c0.caret-pos--left-bottom .c2::before,
2666
- .c0.caret-pos--right .c2::after,
2667
- .c0.caret-pos--right-top .c2::after,
2668
- .c0.caret-pos--right-bottom .c2::after,
2669
- .c0.caret-pos--left .c2::after,
2670
- .c0.caret-pos--left-top .c2::after,
2671
- .c0.caret-pos--left-bottom .c2::after {
2672
- top: 50%;
2673
- left: auto;
2674
- margin-left: 0;
2675
- border-bottom-color: transparent;
2676
- }
2677
-
2678
- .c0.caret-pos--right .c2::before,
2679
- .c0.caret-pos--right-top .c2::before,
2680
- .c0.caret-pos--right-bottom .c2::before,
2681
- .c0.caret-pos--left .c2::before,
2682
- .c0.caret-pos--left-top .c2::before,
2683
- .c0.caret-pos--left-bottom .c2::before {
2684
- margin-top: calc((8px + 1px) * -1);
2685
- }
2686
-
2687
- .c0.caret-pos--right .c2::after,
2688
- .c0.caret-pos--right-top .c2::after,
2689
- .c0.caret-pos--right-bottom .c2::after,
2690
- .c0.caret-pos--left .c2::after,
2691
- .c0.caret-pos--left-top .c2::after,
2692
- .c0.caret-pos--left-bottom .c2::after {
2693
- margin-top: -8px;
2694
- }
2695
-
2696
- .c0.caret-pos--right .c2::before,
2697
- .c0.caret-pos--right-top .c2::before,
2698
- .c0.caret-pos--right-bottom .c2::before {
2699
- right: -16px;
2700
- border-left-color: #e1e4e8;
2701
- }
2702
-
2703
- .c0.caret-pos--right .c2::after,
2704
- .c0.caret-pos--right-top .c2::after,
2705
- .c0.caret-pos--right-bottom .c2::after {
2706
- right: -14px;
2707
- border-left-color: #ffffff;
2708
- }
2709
-
2710
- .c0.caret-pos--left .c2::before,
2711
- .c0.caret-pos--left-top .c2::before,
2712
- .c0.caret-pos--left-bottom .c2::before {
2713
- left: -16px;
2714
- border-right-color: #e1e4e8;
2715
- }
2716
-
2717
- .c0.caret-pos--left .c2::after,
2718
- .c0.caret-pos--left-top .c2::after,
2719
- .c0.caret-pos--left-bottom .c2::after {
2720
- left: -14px;
2721
- border-right-color: #ffffff;
2722
- }
2723
-
2724
- .c0.caret-pos--right-top .c2::before,
2725
- .c0.caret-pos--left-top .c2::before,
2726
- .c0.caret-pos--right-top .c2::after,
2727
- .c0.caret-pos--left-top .c2::after {
2728
- top: 24px;
2729
- }
2730
-
2731
- .c0.caret-pos--right-bottom .c2::before,
2732
- .c0.caret-pos--left-bottom .c2::before,
2733
- .c0.caret-pos--right-bottom .c2::after,
2734
- .c0.caret-pos--left-bottom .c2::after {
2735
- top: auto;
2736
- }
2737
-
2738
- .c0.caret-pos--right-bottom .c2::before,
2739
- .c0.caret-pos--left-bottom .c2::before {
2740
- bottom: 16px;
2741
- }
2742
-
2743
- .c0.caret-pos--right-bottom .c2::after,
2744
- .c0.caret-pos--left-bottom .c2::after {
2745
- bottom: calc(16px + 1px);
2746
- }
2747
-
2748
- .c0.caret-pos--bottom .c3::before,
2749
- .c0.caret-pos--bottom-right .c3::before,
2750
- .c0.caret-pos--bottom-left .c3::before,
2751
- .c0.caret-pos--bottom .c3::after,
2752
- .c0.caret-pos--bottom-right .c3::after,
2753
- .c0.caret-pos--bottom-left .c3::after {
2754
- top: auto;
2755
- border-bottom-color: transparent;
2756
- }
2757
-
2758
- .c0.caret-pos--bottom .c3::before,
2759
- .c0.caret-pos--bottom-right .c3::before,
2760
- .c0.caret-pos--bottom-left .c3::before {
2761
- bottom: -16px;
2762
- }
2763
-
2764
- .c0.caret-pos--bottom .c3::after,
2765
- .c0.caret-pos--bottom-right .c3::after,
2766
- .c0.caret-pos--bottom-left .c3::after {
2767
- bottom: -14px;
2768
- }
2769
-
2770
- .c0.caret-pos--top-right .c3,
2771
- .c0.caret-pos--bottom-right .c3 {
2772
- right: -9px;
2773
- margin-right: 0;
2774
- }
2775
-
2776
- .c0.caret-pos--top-right .c3::before,
2777
- .c0.caret-pos--bottom-right .c3::before,
2778
- .c0.caret-pos--top-right .c3::after,
2779
- .c0.caret-pos--bottom-right .c3::after {
2780
- left: auto;
2781
- margin-left: 0;
2782
- }
2783
-
2784
- .c0.caret-pos--top-right .c3::before,
2785
- .c0.caret-pos--bottom-right .c3::before {
2786
- right: 20px;
2787
- }
2788
-
2789
- .c0.caret-pos--top-right .c3::after,
2790
- .c0.caret-pos--bottom-right .c3::after {
2791
- right: 21px;
2792
- }
2793
-
2794
- .c0.caret-pos--top-left .c3,
2795
- .c0.caret-pos--bottom-left .c3 {
2796
- left: -9px;
2797
- margin-left: 0;
2798
- }
2799
-
2800
- .c0.caret-pos--top-left .c3::before,
2801
- .c0.caret-pos--bottom-left .c3::before,
2802
- .c0.caret-pos--top-left .c3::after,
2803
- .c0.caret-pos--bottom-left .c3::after {
2804
- left: 24px;
2805
- margin-left: 0;
2806
- }
2807
-
2808
- .c0.caret-pos--top-left .c3::after,
2809
- .c0.caret-pos--bottom-left .c3::after {
2810
- left: calc(24px + 1px);
2811
- }
2812
-
2813
- .c0.caret-pos--right .c3::before,
2814
- .c0.caret-pos--right-top .c3::before,
2815
- .c0.caret-pos--right-bottom .c3::before,
2816
- .c0.caret-pos--left .c3::before,
2817
- .c0.caret-pos--left-top .c3::before,
2818
- .c0.caret-pos--left-bottom .c3::before,
2819
- .c0.caret-pos--right .c3::after,
2820
- .c0.caret-pos--right-top .c3::after,
2821
- .c0.caret-pos--right-bottom .c3::after,
2822
- .c0.caret-pos--left .c3::after,
2823
- .c0.caret-pos--left-top .c3::after,
2824
- .c0.caret-pos--left-bottom .c3::after {
2825
- top: 50%;
2826
- left: auto;
2827
- margin-left: 0;
2828
- border-bottom-color: transparent;
2829
- }
2830
-
2831
- .c0.caret-pos--right .c3::before,
2832
- .c0.caret-pos--right-top .c3::before,
2833
- .c0.caret-pos--right-bottom .c3::before,
2834
- .c0.caret-pos--left .c3::before,
2835
- .c0.caret-pos--left-top .c3::before,
2836
- .c0.caret-pos--left-bottom .c3::before {
2837
- margin-top: calc((8px + 1px) * -1);
2838
- }
2839
-
2840
- .c0.caret-pos--right .c3::after,
2841
- .c0.caret-pos--right-top .c3::after,
2842
- .c0.caret-pos--right-bottom .c3::after,
2843
- .c0.caret-pos--left .c3::after,
2844
- .c0.caret-pos--left-top .c3::after,
2845
- .c0.caret-pos--left-bottom .c3::after {
2846
- margin-top: -8px;
2847
- }
2848
-
2849
- .c0.caret-pos--right .c3::before,
2850
- .c0.caret-pos--right-top .c3::before,
2851
- .c0.caret-pos--right-bottom .c3::before {
2852
- right: -16px;
2853
- }
2854
-
2855
- .c0.caret-pos--right .c3::after,
2856
- .c0.caret-pos--right-top .c3::after,
2857
- .c0.caret-pos--right-bottom .c3::after {
2858
- right: -14px;
2859
- }
2860
-
2861
- .c0.caret-pos--left .c3::before,
2862
- .c0.caret-pos--left-top .c3::before,
2863
- .c0.caret-pos--left-bottom .c3::before {
2864
- left: -16px;
2865
- }
2866
-
2867
- .c0.caret-pos--left .c3::after,
2868
- .c0.caret-pos--left-top .c3::after,
2869
- .c0.caret-pos--left-bottom .c3::after {
2870
- left: -14px;
2871
- }
2872
-
2873
- .c0.caret-pos--right-top .c3::before,
2874
- .c0.caret-pos--left-top .c3::before,
2875
- .c0.caret-pos--right-top .c3::after,
2876
- .c0.caret-pos--left-top .c3::after {
2877
- top: 24px;
2878
- }
2879
-
2880
- .c0.caret-pos--right-bottom .c3::before,
2881
- .c0.caret-pos--left-bottom .c3::before,
2882
- .c0.caret-pos--right-bottom .c3::after,
2883
- .c0.caret-pos--left-bottom .c3::after {
2884
- top: auto;
2885
- }
2886
-
2887
- .c0.caret-pos--right-bottom .c3::before,
2888
- .c0.caret-pos--left-bottom .c3::before {
2889
- bottom: 16px;
2890
- }
2891
-
2892
- .c0.caret-pos--right-bottom .c3::after,
2893
- .c0.caret-pos--left-bottom .c3::after {
2894
- bottom: calc(16px + 1px);
2895
- }
2896
-
2897
- <div
2898
- className="c0 c1 caret-pos--right"
2899
- open={true}
2900
- >
2901
- <div
2902
- className="c2"
2903
- >
2904
- Hello!
2905
- </div>
2906
- </div>
2907
- `;
2908
-
2909
- exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
2910
- .c1 {
2911
- position: absolute;
2912
- z-index: 100;
2913
- display: block;
2914
- }
2915
-
2916
- .c2 {
2917
- border: 1px solid #e1e4e8;
2918
- border-radius: 6px;
2919
- position: relative;
2920
- width: 232px;
2921
- margin-right: auto;
2922
- margin-left: auto;
2923
- padding: 24px;
2924
- background-color: #ffffff;
2925
- }
2926
-
2927
- .c2::before,
2928
- .c2::after {
2929
- position: absolute;
2930
- left: 50%;
2931
- display: inline-block;
2932
- content: '';
2933
- }
2934
-
2935
- .c2::before {
2936
- top: -16px;
2937
- margin-left: -9px;
2938
- border: 8px solid transparent;
2939
- border-bottom-color: #e1e4e8;
2940
- }
2941
-
2942
- .c2::after {
2943
- top: -14px;
2944
- margin-left: -8px;
2945
- border: 7px solid transparent;
2946
- border-bottom-color: #ffffff;
2947
- }
2948
-
2949
- .c0.caret-pos--bottom .c2::before,
2950
- .c0.caret-pos--bottom-right .c2::before,
2951
- .c0.caret-pos--bottom-left .c2::before,
2952
- .c0.caret-pos--bottom .c2::after,
2953
- .c0.caret-pos--bottom-right .c2::after,
2954
- .c0.caret-pos--bottom-left .c2::after {
2955
- top: auto;
2956
- border-bottom-color: transparent;
2957
- }
2958
-
2959
- .c0.caret-pos--bottom .c2::before,
2960
- .c0.caret-pos--bottom-right .c2::before,
2961
- .c0.caret-pos--bottom-left .c2::before {
2962
- bottom: -16px;
2963
- border-top-color: #e1e4e8;
2964
- }
2965
-
2966
- .c0.caret-pos--bottom .c2::after,
2967
- .c0.caret-pos--bottom-right .c2::after,
2968
- .c0.caret-pos--bottom-left .c2::after {
2969
- bottom: -14px;
2970
- border-top-color: #ffffff;
2971
- }
2972
-
2973
- .c0.caret-pos--top-right .c2,
2974
- .c0.caret-pos--bottom-right .c2 {
2975
- right: -9px;
2976
- margin-right: 0;
2977
- }
2978
-
2979
- .c0.caret-pos--top-right .c2::before,
2980
- .c0.caret-pos--bottom-right .c2::before,
2981
- .c0.caret-pos--top-right .c2::after,
2982
- .c0.caret-pos--bottom-right .c2::after {
2983
- left: auto;
2984
- margin-left: 0;
2985
- }
2986
-
2987
- .c0.caret-pos--top-right .c2::before,
2988
- .c0.caret-pos--bottom-right .c2::before {
2989
- right: 20px;
2990
- }
2991
-
2992
- .c0.caret-pos--top-right .c2::after,
2993
- .c0.caret-pos--bottom-right .c2::after {
2994
- right: 21px;
2995
- }
2996
-
2997
- .c0.caret-pos--top-left .c2,
2998
- .c0.caret-pos--bottom-left .c2 {
2999
- left: -9px;
3000
- margin-left: 0;
3001
- }
3002
-
3003
- .c0.caret-pos--top-left .c2::before,
3004
- .c0.caret-pos--bottom-left .c2::before,
3005
- .c0.caret-pos--top-left .c2::after,
3006
- .c0.caret-pos--bottom-left .c2::after {
3007
- left: 24px;
3008
- margin-left: 0;
3009
- }
3010
-
3011
- .c0.caret-pos--top-left .c2::after,
3012
- .c0.caret-pos--bottom-left .c2::after {
3013
- left: calc(24px + 1px);
3014
- }
3015
-
3016
- .c0.caret-pos--right .c2::before,
3017
- .c0.caret-pos--right-top .c2::before,
3018
- .c0.caret-pos--right-bottom .c2::before,
3019
- .c0.caret-pos--left .c2::before,
3020
- .c0.caret-pos--left-top .c2::before,
3021
- .c0.caret-pos--left-bottom .c2::before,
3022
- .c0.caret-pos--right .c2::after,
3023
- .c0.caret-pos--right-top .c2::after,
3024
- .c0.caret-pos--right-bottom .c2::after,
3025
- .c0.caret-pos--left .c2::after,
3026
- .c0.caret-pos--left-top .c2::after,
3027
- .c0.caret-pos--left-bottom .c2::after {
3028
- top: 50%;
3029
- left: auto;
3030
- margin-left: 0;
3031
- border-bottom-color: transparent;
3032
- }
3033
-
3034
- .c0.caret-pos--right .c2::before,
3035
- .c0.caret-pos--right-top .c2::before,
3036
- .c0.caret-pos--right-bottom .c2::before,
3037
- .c0.caret-pos--left .c2::before,
3038
- .c0.caret-pos--left-top .c2::before,
3039
- .c0.caret-pos--left-bottom .c2::before {
3040
- margin-top: calc((8px + 1px) * -1);
3041
- }
3042
-
3043
- .c0.caret-pos--right .c2::after,
3044
- .c0.caret-pos--right-top .c2::after,
3045
- .c0.caret-pos--right-bottom .c2::after,
3046
- .c0.caret-pos--left .c2::after,
3047
- .c0.caret-pos--left-top .c2::after,
3048
- .c0.caret-pos--left-bottom .c2::after {
3049
- margin-top: -8px;
3050
- }
3051
-
3052
- .c0.caret-pos--right .c2::before,
3053
- .c0.caret-pos--right-top .c2::before,
3054
- .c0.caret-pos--right-bottom .c2::before {
3055
- right: -16px;
3056
- border-left-color: #e1e4e8;
3057
- }
3058
-
3059
- .c0.caret-pos--right .c2::after,
3060
- .c0.caret-pos--right-top .c2::after,
3061
- .c0.caret-pos--right-bottom .c2::after {
3062
- right: -14px;
3063
- border-left-color: #ffffff;
3064
- }
3065
-
3066
- .c0.caret-pos--left .c2::before,
3067
- .c0.caret-pos--left-top .c2::before,
3068
- .c0.caret-pos--left-bottom .c2::before {
3069
- left: -16px;
3070
- border-right-color: #e1e4e8;
3071
- }
3072
-
3073
- .c0.caret-pos--left .c2::after,
3074
- .c0.caret-pos--left-top .c2::after,
3075
- .c0.caret-pos--left-bottom .c2::after {
3076
- left: -14px;
3077
- border-right-color: #ffffff;
3078
- }
3079
-
3080
- .c0.caret-pos--right-top .c2::before,
3081
- .c0.caret-pos--left-top .c2::before,
3082
- .c0.caret-pos--right-top .c2::after,
3083
- .c0.caret-pos--left-top .c2::after {
3084
- top: 24px;
3085
- }
3086
-
3087
- .c0.caret-pos--right-bottom .c2::before,
3088
- .c0.caret-pos--left-bottom .c2::before,
3089
- .c0.caret-pos--right-bottom .c2::after,
3090
- .c0.caret-pos--left-bottom .c2::after {
3091
- top: auto;
3092
- }
3093
-
3094
- .c0.caret-pos--right-bottom .c2::before,
3095
- .c0.caret-pos--left-bottom .c2::before {
3096
- bottom: 16px;
3097
- }
3098
-
3099
- .c0.caret-pos--right-bottom .c2::after,
3100
- .c0.caret-pos--left-bottom .c2::after {
3101
- bottom: calc(16px + 1px);
3102
- }
3103
-
3104
- .c0.caret-pos--bottom .c3::before,
3105
- .c0.caret-pos--bottom-right .c3::before,
3106
- .c0.caret-pos--bottom-left .c3::before,
3107
- .c0.caret-pos--bottom .c3::after,
3108
- .c0.caret-pos--bottom-right .c3::after,
3109
- .c0.caret-pos--bottom-left .c3::after {
3110
- top: auto;
3111
- border-bottom-color: transparent;
3112
- }
3113
-
3114
- .c0.caret-pos--bottom .c3::before,
3115
- .c0.caret-pos--bottom-right .c3::before,
3116
- .c0.caret-pos--bottom-left .c3::before {
3117
- bottom: -16px;
3118
- }
3119
-
3120
- .c0.caret-pos--bottom .c3::after,
3121
- .c0.caret-pos--bottom-right .c3::after,
3122
- .c0.caret-pos--bottom-left .c3::after {
3123
- bottom: -14px;
3124
- }
3125
-
3126
- .c0.caret-pos--top-right .c3,
3127
- .c0.caret-pos--bottom-right .c3 {
3128
- right: -9px;
3129
- margin-right: 0;
3130
- }
3131
-
3132
- .c0.caret-pos--top-right .c3::before,
3133
- .c0.caret-pos--bottom-right .c3::before,
3134
- .c0.caret-pos--top-right .c3::after,
3135
- .c0.caret-pos--bottom-right .c3::after {
3136
- left: auto;
3137
- margin-left: 0;
3138
- }
3139
-
3140
- .c0.caret-pos--top-right .c3::before,
3141
- .c0.caret-pos--bottom-right .c3::before {
3142
- right: 20px;
3143
- }
3144
-
3145
- .c0.caret-pos--top-right .c3::after,
3146
- .c0.caret-pos--bottom-right .c3::after {
3147
- right: 21px;
3148
- }
3149
-
3150
- .c0.caret-pos--top-left .c3,
3151
- .c0.caret-pos--bottom-left .c3 {
3152
- left: -9px;
3153
- margin-left: 0;
3154
- }
3155
-
3156
- .c0.caret-pos--top-left .c3::before,
3157
- .c0.caret-pos--bottom-left .c3::before,
3158
- .c0.caret-pos--top-left .c3::after,
3159
- .c0.caret-pos--bottom-left .c3::after {
3160
- left: 24px;
3161
- margin-left: 0;
3162
- }
3163
-
3164
- .c0.caret-pos--top-left .c3::after,
3165
- .c0.caret-pos--bottom-left .c3::after {
3166
- left: calc(24px + 1px);
3167
- }
3168
-
3169
- .c0.caret-pos--right .c3::before,
3170
- .c0.caret-pos--right-top .c3::before,
3171
- .c0.caret-pos--right-bottom .c3::before,
3172
- .c0.caret-pos--left .c3::before,
3173
- .c0.caret-pos--left-top .c3::before,
3174
- .c0.caret-pos--left-bottom .c3::before,
3175
- .c0.caret-pos--right .c3::after,
3176
- .c0.caret-pos--right-top .c3::after,
3177
- .c0.caret-pos--right-bottom .c3::after,
3178
- .c0.caret-pos--left .c3::after,
3179
- .c0.caret-pos--left-top .c3::after,
3180
- .c0.caret-pos--left-bottom .c3::after {
3181
- top: 50%;
3182
- left: auto;
3183
- margin-left: 0;
3184
- border-bottom-color: transparent;
3185
- }
3186
-
3187
- .c0.caret-pos--right .c3::before,
3188
- .c0.caret-pos--right-top .c3::before,
3189
- .c0.caret-pos--right-bottom .c3::before,
3190
- .c0.caret-pos--left .c3::before,
3191
- .c0.caret-pos--left-top .c3::before,
3192
- .c0.caret-pos--left-bottom .c3::before {
3193
- margin-top: calc((8px + 1px) * -1);
3194
- }
3195
-
3196
- .c0.caret-pos--right .c3::after,
3197
- .c0.caret-pos--right-top .c3::after,
3198
- .c0.caret-pos--right-bottom .c3::after,
3199
- .c0.caret-pos--left .c3::after,
3200
- .c0.caret-pos--left-top .c3::after,
3201
- .c0.caret-pos--left-bottom .c3::after {
3202
- margin-top: -8px;
3203
- }
3204
-
3205
- .c0.caret-pos--right .c3::before,
3206
- .c0.caret-pos--right-top .c3::before,
3207
- .c0.caret-pos--right-bottom .c3::before {
3208
- right: -16px;
3209
- }
3210
-
3211
- .c0.caret-pos--right .c3::after,
3212
- .c0.caret-pos--right-top .c3::after,
3213
- .c0.caret-pos--right-bottom .c3::after {
3214
- right: -14px;
3215
- }
3216
-
3217
- .c0.caret-pos--left .c3::before,
3218
- .c0.caret-pos--left-top .c3::before,
3219
- .c0.caret-pos--left-bottom .c3::before {
3220
- left: -16px;
3221
- }
3222
-
3223
- .c0.caret-pos--left .c3::after,
3224
- .c0.caret-pos--left-top .c3::after,
3225
- .c0.caret-pos--left-bottom .c3::after {
3226
- left: -14px;
3227
- }
3228
-
3229
- .c0.caret-pos--right-top .c3::before,
3230
- .c0.caret-pos--left-top .c3::before,
3231
- .c0.caret-pos--right-top .c3::after,
3232
- .c0.caret-pos--left-top .c3::after {
3233
- top: 24px;
3234
- }
3235
-
3236
- .c0.caret-pos--right-bottom .c3::before,
3237
- .c0.caret-pos--left-bottom .c3::before,
3238
- .c0.caret-pos--right-bottom .c3::after,
3239
- .c0.caret-pos--left-bottom .c3::after {
3240
- top: auto;
3241
- }
3242
-
3243
- .c0.caret-pos--right-bottom .c3::before,
3244
- .c0.caret-pos--left-bottom .c3::before {
3245
- bottom: 16px;
3246
- }
3247
-
3248
- .c0.caret-pos--right-bottom .c3::after,
3249
- .c0.caret-pos--left-bottom .c3::after {
3250
- bottom: calc(16px + 1px);
3251
- }
3252
-
3253
- <div
3254
- className="c0 c1 caret-pos--right-bottom"
3255
- open={true}
3256
- >
3257
- <div
3258
- className="c2"
3259
- >
3260
- Hello!
3261
- </div>
3262
- </div>
3263
- `;
3264
-
3265
- exports[`Popover renders correctly for a caret position of right-top 1`] = `
3266
- .c1 {
3267
- position: absolute;
3268
- z-index: 100;
3269
- display: block;
3270
- }
3271
-
3272
- .c2 {
3273
- border: 1px solid #e1e4e8;
3274
- border-radius: 6px;
3275
- position: relative;
3276
- width: 232px;
3277
- margin-right: auto;
3278
- margin-left: auto;
3279
- padding: 24px;
3280
- background-color: #ffffff;
3281
- }
3282
-
3283
- .c2::before,
3284
- .c2::after {
3285
- position: absolute;
3286
- left: 50%;
3287
- display: inline-block;
3288
- content: '';
3289
- }
3290
-
3291
- .c2::before {
3292
- top: -16px;
3293
- margin-left: -9px;
3294
- border: 8px solid transparent;
3295
- border-bottom-color: #e1e4e8;
3296
- }
3297
-
3298
- .c2::after {
3299
- top: -14px;
3300
- margin-left: -8px;
3301
- border: 7px solid transparent;
3302
- border-bottom-color: #ffffff;
3303
- }
3304
-
3305
- .c0.caret-pos--bottom .c2::before,
3306
- .c0.caret-pos--bottom-right .c2::before,
3307
- .c0.caret-pos--bottom-left .c2::before,
3308
- .c0.caret-pos--bottom .c2::after,
3309
- .c0.caret-pos--bottom-right .c2::after,
3310
- .c0.caret-pos--bottom-left .c2::after {
3311
- top: auto;
3312
- border-bottom-color: transparent;
3313
- }
3314
-
3315
- .c0.caret-pos--bottom .c2::before,
3316
- .c0.caret-pos--bottom-right .c2::before,
3317
- .c0.caret-pos--bottom-left .c2::before {
3318
- bottom: -16px;
3319
- border-top-color: #e1e4e8;
3320
- }
3321
-
3322
- .c0.caret-pos--bottom .c2::after,
3323
- .c0.caret-pos--bottom-right .c2::after,
3324
- .c0.caret-pos--bottom-left .c2::after {
3325
- bottom: -14px;
3326
- border-top-color: #ffffff;
3327
- }
3328
-
3329
- .c0.caret-pos--top-right .c2,
3330
- .c0.caret-pos--bottom-right .c2 {
3331
- right: -9px;
3332
- margin-right: 0;
3333
- }
3334
-
3335
- .c0.caret-pos--top-right .c2::before,
3336
- .c0.caret-pos--bottom-right .c2::before,
3337
- .c0.caret-pos--top-right .c2::after,
3338
- .c0.caret-pos--bottom-right .c2::after {
3339
- left: auto;
3340
- margin-left: 0;
3341
- }
3342
-
3343
- .c0.caret-pos--top-right .c2::before,
3344
- .c0.caret-pos--bottom-right .c2::before {
3345
- right: 20px;
3346
- }
3347
-
3348
- .c0.caret-pos--top-right .c2::after,
3349
- .c0.caret-pos--bottom-right .c2::after {
3350
- right: 21px;
3351
- }
3352
-
3353
- .c0.caret-pos--top-left .c2,
3354
- .c0.caret-pos--bottom-left .c2 {
3355
- left: -9px;
3356
- margin-left: 0;
3357
- }
3358
-
3359
- .c0.caret-pos--top-left .c2::before,
3360
- .c0.caret-pos--bottom-left .c2::before,
3361
- .c0.caret-pos--top-left .c2::after,
3362
- .c0.caret-pos--bottom-left .c2::after {
3363
- left: 24px;
3364
- margin-left: 0;
3365
- }
3366
-
3367
- .c0.caret-pos--top-left .c2::after,
3368
- .c0.caret-pos--bottom-left .c2::after {
3369
- left: calc(24px + 1px);
3370
- }
3371
-
3372
- .c0.caret-pos--right .c2::before,
3373
- .c0.caret-pos--right-top .c2::before,
3374
- .c0.caret-pos--right-bottom .c2::before,
3375
- .c0.caret-pos--left .c2::before,
3376
- .c0.caret-pos--left-top .c2::before,
3377
- .c0.caret-pos--left-bottom .c2::before,
3378
- .c0.caret-pos--right .c2::after,
3379
- .c0.caret-pos--right-top .c2::after,
3380
- .c0.caret-pos--right-bottom .c2::after,
3381
- .c0.caret-pos--left .c2::after,
3382
- .c0.caret-pos--left-top .c2::after,
3383
- .c0.caret-pos--left-bottom .c2::after {
3384
- top: 50%;
3385
- left: auto;
3386
- margin-left: 0;
3387
- border-bottom-color: transparent;
3388
- }
3389
-
3390
- .c0.caret-pos--right .c2::before,
3391
- .c0.caret-pos--right-top .c2::before,
3392
- .c0.caret-pos--right-bottom .c2::before,
3393
- .c0.caret-pos--left .c2::before,
3394
- .c0.caret-pos--left-top .c2::before,
3395
- .c0.caret-pos--left-bottom .c2::before {
3396
- margin-top: calc((8px + 1px) * -1);
3397
- }
3398
-
3399
- .c0.caret-pos--right .c2::after,
3400
- .c0.caret-pos--right-top .c2::after,
3401
- .c0.caret-pos--right-bottom .c2::after,
3402
- .c0.caret-pos--left .c2::after,
3403
- .c0.caret-pos--left-top .c2::after,
3404
- .c0.caret-pos--left-bottom .c2::after {
3405
- margin-top: -8px;
3406
- }
3407
-
3408
- .c0.caret-pos--right .c2::before,
3409
- .c0.caret-pos--right-top .c2::before,
3410
- .c0.caret-pos--right-bottom .c2::before {
3411
- right: -16px;
3412
- border-left-color: #e1e4e8;
3413
- }
3414
-
3415
- .c0.caret-pos--right .c2::after,
3416
- .c0.caret-pos--right-top .c2::after,
3417
- .c0.caret-pos--right-bottom .c2::after {
3418
- right: -14px;
3419
- border-left-color: #ffffff;
3420
- }
3421
-
3422
- .c0.caret-pos--left .c2::before,
3423
- .c0.caret-pos--left-top .c2::before,
3424
- .c0.caret-pos--left-bottom .c2::before {
3425
- left: -16px;
3426
- border-right-color: #e1e4e8;
3427
- }
3428
-
3429
- .c0.caret-pos--left .c2::after,
3430
- .c0.caret-pos--left-top .c2::after,
3431
- .c0.caret-pos--left-bottom .c2::after {
3432
- left: -14px;
3433
- border-right-color: #ffffff;
3434
- }
3435
-
3436
- .c0.caret-pos--right-top .c2::before,
3437
- .c0.caret-pos--left-top .c2::before,
3438
- .c0.caret-pos--right-top .c2::after,
3439
- .c0.caret-pos--left-top .c2::after {
3440
- top: 24px;
3441
- }
3442
-
3443
- .c0.caret-pos--right-bottom .c2::before,
3444
- .c0.caret-pos--left-bottom .c2::before,
3445
- .c0.caret-pos--right-bottom .c2::after,
3446
- .c0.caret-pos--left-bottom .c2::after {
3447
- top: auto;
3448
- }
3449
-
3450
- .c0.caret-pos--right-bottom .c2::before,
3451
- .c0.caret-pos--left-bottom .c2::before {
3452
- bottom: 16px;
3453
- }
3454
-
3455
- .c0.caret-pos--right-bottom .c2::after,
3456
- .c0.caret-pos--left-bottom .c2::after {
3457
- bottom: calc(16px + 1px);
3458
- }
3459
-
3460
- .c0.caret-pos--bottom .c3::before,
3461
- .c0.caret-pos--bottom-right .c3::before,
3462
- .c0.caret-pos--bottom-left .c3::before,
3463
- .c0.caret-pos--bottom .c3::after,
3464
- .c0.caret-pos--bottom-right .c3::after,
3465
- .c0.caret-pos--bottom-left .c3::after {
3466
- top: auto;
3467
- border-bottom-color: transparent;
3468
- }
3469
-
3470
- .c0.caret-pos--bottom .c3::before,
3471
- .c0.caret-pos--bottom-right .c3::before,
3472
- .c0.caret-pos--bottom-left .c3::before {
3473
- bottom: -16px;
3474
- }
3475
-
3476
- .c0.caret-pos--bottom .c3::after,
3477
- .c0.caret-pos--bottom-right .c3::after,
3478
- .c0.caret-pos--bottom-left .c3::after {
3479
- bottom: -14px;
3480
- }
3481
-
3482
- .c0.caret-pos--top-right .c3,
3483
- .c0.caret-pos--bottom-right .c3 {
3484
- right: -9px;
3485
- margin-right: 0;
3486
- }
3487
-
3488
- .c0.caret-pos--top-right .c3::before,
3489
- .c0.caret-pos--bottom-right .c3::before,
3490
- .c0.caret-pos--top-right .c3::after,
3491
- .c0.caret-pos--bottom-right .c3::after {
3492
- left: auto;
3493
- margin-left: 0;
3494
- }
3495
-
3496
- .c0.caret-pos--top-right .c3::before,
3497
- .c0.caret-pos--bottom-right .c3::before {
3498
- right: 20px;
3499
- }
3500
-
3501
- .c0.caret-pos--top-right .c3::after,
3502
- .c0.caret-pos--bottom-right .c3::after {
3503
- right: 21px;
3504
- }
3505
-
3506
- .c0.caret-pos--top-left .c3,
3507
- .c0.caret-pos--bottom-left .c3 {
3508
- left: -9px;
3509
- margin-left: 0;
3510
- }
3511
-
3512
- .c0.caret-pos--top-left .c3::before,
3513
- .c0.caret-pos--bottom-left .c3::before,
3514
- .c0.caret-pos--top-left .c3::after,
3515
- .c0.caret-pos--bottom-left .c3::after {
3516
- left: 24px;
3517
- margin-left: 0;
3518
- }
3519
-
3520
- .c0.caret-pos--top-left .c3::after,
3521
- .c0.caret-pos--bottom-left .c3::after {
3522
- left: calc(24px + 1px);
3523
- }
3524
-
3525
- .c0.caret-pos--right .c3::before,
3526
- .c0.caret-pos--right-top .c3::before,
3527
- .c0.caret-pos--right-bottom .c3::before,
3528
- .c0.caret-pos--left .c3::before,
3529
- .c0.caret-pos--left-top .c3::before,
3530
- .c0.caret-pos--left-bottom .c3::before,
3531
- .c0.caret-pos--right .c3::after,
3532
- .c0.caret-pos--right-top .c3::after,
3533
- .c0.caret-pos--right-bottom .c3::after,
3534
- .c0.caret-pos--left .c3::after,
3535
- .c0.caret-pos--left-top .c3::after,
3536
- .c0.caret-pos--left-bottom .c3::after {
3537
- top: 50%;
3538
- left: auto;
3539
- margin-left: 0;
3540
- border-bottom-color: transparent;
3541
- }
3542
-
3543
- .c0.caret-pos--right .c3::before,
3544
- .c0.caret-pos--right-top .c3::before,
3545
- .c0.caret-pos--right-bottom .c3::before,
3546
- .c0.caret-pos--left .c3::before,
3547
- .c0.caret-pos--left-top .c3::before,
3548
- .c0.caret-pos--left-bottom .c3::before {
3549
- margin-top: calc((8px + 1px) * -1);
3550
- }
3551
-
3552
- .c0.caret-pos--right .c3::after,
3553
- .c0.caret-pos--right-top .c3::after,
3554
- .c0.caret-pos--right-bottom .c3::after,
3555
- .c0.caret-pos--left .c3::after,
3556
- .c0.caret-pos--left-top .c3::after,
3557
- .c0.caret-pos--left-bottom .c3::after {
3558
- margin-top: -8px;
3559
- }
3560
-
3561
- .c0.caret-pos--right .c3::before,
3562
- .c0.caret-pos--right-top .c3::before,
3563
- .c0.caret-pos--right-bottom .c3::before {
3564
- right: -16px;
3565
- }
3566
-
3567
- .c0.caret-pos--right .c3::after,
3568
- .c0.caret-pos--right-top .c3::after,
3569
- .c0.caret-pos--right-bottom .c3::after {
3570
- right: -14px;
3571
- }
3572
-
3573
- .c0.caret-pos--left .c3::before,
3574
- .c0.caret-pos--left-top .c3::before,
3575
- .c0.caret-pos--left-bottom .c3::before {
3576
- left: -16px;
3577
- }
3578
-
3579
- .c0.caret-pos--left .c3::after,
3580
- .c0.caret-pos--left-top .c3::after,
3581
- .c0.caret-pos--left-bottom .c3::after {
3582
- left: -14px;
3583
- }
3584
-
3585
- .c0.caret-pos--right-top .c3::before,
3586
- .c0.caret-pos--left-top .c3::before,
3587
- .c0.caret-pos--right-top .c3::after,
3588
- .c0.caret-pos--left-top .c3::after {
3589
- top: 24px;
3590
- }
3591
-
3592
- .c0.caret-pos--right-bottom .c3::before,
3593
- .c0.caret-pos--left-bottom .c3::before,
3594
- .c0.caret-pos--right-bottom .c3::after,
3595
- .c0.caret-pos--left-bottom .c3::after {
3596
- top: auto;
3597
- }
3598
-
3599
- .c0.caret-pos--right-bottom .c3::before,
3600
- .c0.caret-pos--left-bottom .c3::before {
3601
- bottom: 16px;
3602
- }
3603
-
3604
- .c0.caret-pos--right-bottom .c3::after,
3605
- .c0.caret-pos--left-bottom .c3::after {
3606
- bottom: calc(16px + 1px);
3607
- }
3608
-
3609
- <div
3610
- className="c0 c1 caret-pos--right-top"
3611
- open={true}
3612
- >
3613
- <div
3614
- className="c2"
3615
- >
3616
- Hello!
3617
- </div>
3618
- </div>
3619
- `;
3620
-
3621
- exports[`Popover renders correctly for a caret position of top 1`] = `
3622
- .c1 {
3623
- position: absolute;
3624
- z-index: 100;
3625
- display: block;
3626
- }
3627
-
3628
- .c2 {
3629
- border: 1px solid #e1e4e8;
3630
- border-radius: 6px;
3631
- position: relative;
3632
- width: 232px;
3633
- margin-right: auto;
3634
- margin-left: auto;
3635
- padding: 24px;
3636
- background-color: #ffffff;
3637
- }
3638
-
3639
- .c2::before,
3640
- .c2::after {
3641
- position: absolute;
3642
- left: 50%;
3643
- display: inline-block;
3644
- content: '';
3645
- }
3646
-
3647
- .c2::before {
3648
- top: -16px;
3649
- margin-left: -9px;
3650
- border: 8px solid transparent;
3651
- border-bottom-color: #e1e4e8;
3652
- }
3653
-
3654
- .c2::after {
3655
- top: -14px;
3656
- margin-left: -8px;
3657
- border: 7px solid transparent;
3658
- border-bottom-color: #ffffff;
3659
- }
3660
-
3661
- .c0.caret-pos--bottom .c2::before,
3662
- .c0.caret-pos--bottom-right .c2::before,
3663
- .c0.caret-pos--bottom-left .c2::before,
3664
- .c0.caret-pos--bottom .c2::after,
3665
- .c0.caret-pos--bottom-right .c2::after,
3666
- .c0.caret-pos--bottom-left .c2::after {
3667
- top: auto;
3668
- border-bottom-color: transparent;
3669
- }
3670
-
3671
- .c0.caret-pos--bottom .c2::before,
3672
- .c0.caret-pos--bottom-right .c2::before,
3673
- .c0.caret-pos--bottom-left .c2::before {
3674
- bottom: -16px;
3675
- border-top-color: #e1e4e8;
3676
- }
3677
-
3678
- .c0.caret-pos--bottom .c2::after,
3679
- .c0.caret-pos--bottom-right .c2::after,
3680
- .c0.caret-pos--bottom-left .c2::after {
3681
- bottom: -14px;
3682
- border-top-color: #ffffff;
3683
- }
3684
-
3685
- .c0.caret-pos--top-right .c2,
3686
- .c0.caret-pos--bottom-right .c2 {
3687
- right: -9px;
3688
- margin-right: 0;
3689
- }
3690
-
3691
- .c0.caret-pos--top-right .c2::before,
3692
- .c0.caret-pos--bottom-right .c2::before,
3693
- .c0.caret-pos--top-right .c2::after,
3694
- .c0.caret-pos--bottom-right .c2::after {
3695
- left: auto;
3696
- margin-left: 0;
3697
- }
3698
-
3699
- .c0.caret-pos--top-right .c2::before,
3700
- .c0.caret-pos--bottom-right .c2::before {
3701
- right: 20px;
3702
- }
3703
-
3704
- .c0.caret-pos--top-right .c2::after,
3705
- .c0.caret-pos--bottom-right .c2::after {
3706
- right: 21px;
3707
- }
3708
-
3709
- .c0.caret-pos--top-left .c2,
3710
- .c0.caret-pos--bottom-left .c2 {
3711
- left: -9px;
3712
- margin-left: 0;
3713
- }
3714
-
3715
- .c0.caret-pos--top-left .c2::before,
3716
- .c0.caret-pos--bottom-left .c2::before,
3717
- .c0.caret-pos--top-left .c2::after,
3718
- .c0.caret-pos--bottom-left .c2::after {
3719
- left: 24px;
3720
- margin-left: 0;
3721
- }
3722
-
3723
- .c0.caret-pos--top-left .c2::after,
3724
- .c0.caret-pos--bottom-left .c2::after {
3725
- left: calc(24px + 1px);
3726
- }
3727
-
3728
- .c0.caret-pos--right .c2::before,
3729
- .c0.caret-pos--right-top .c2::before,
3730
- .c0.caret-pos--right-bottom .c2::before,
3731
- .c0.caret-pos--left .c2::before,
3732
- .c0.caret-pos--left-top .c2::before,
3733
- .c0.caret-pos--left-bottom .c2::before,
3734
- .c0.caret-pos--right .c2::after,
3735
- .c0.caret-pos--right-top .c2::after,
3736
- .c0.caret-pos--right-bottom .c2::after,
3737
- .c0.caret-pos--left .c2::after,
3738
- .c0.caret-pos--left-top .c2::after,
3739
- .c0.caret-pos--left-bottom .c2::after {
3740
- top: 50%;
3741
- left: auto;
3742
- margin-left: 0;
3743
- border-bottom-color: transparent;
3744
- }
3745
-
3746
- .c0.caret-pos--right .c2::before,
3747
- .c0.caret-pos--right-top .c2::before,
3748
- .c0.caret-pos--right-bottom .c2::before,
3749
- .c0.caret-pos--left .c2::before,
3750
- .c0.caret-pos--left-top .c2::before,
3751
- .c0.caret-pos--left-bottom .c2::before {
3752
- margin-top: calc((8px + 1px) * -1);
3753
- }
3754
-
3755
- .c0.caret-pos--right .c2::after,
3756
- .c0.caret-pos--right-top .c2::after,
3757
- .c0.caret-pos--right-bottom .c2::after,
3758
- .c0.caret-pos--left .c2::after,
3759
- .c0.caret-pos--left-top .c2::after,
3760
- .c0.caret-pos--left-bottom .c2::after {
3761
- margin-top: -8px;
3762
- }
3763
-
3764
- .c0.caret-pos--right .c2::before,
3765
- .c0.caret-pos--right-top .c2::before,
3766
- .c0.caret-pos--right-bottom .c2::before {
3767
- right: -16px;
3768
- border-left-color: #e1e4e8;
3769
- }
3770
-
3771
- .c0.caret-pos--right .c2::after,
3772
- .c0.caret-pos--right-top .c2::after,
3773
- .c0.caret-pos--right-bottom .c2::after {
3774
- right: -14px;
3775
- border-left-color: #ffffff;
3776
- }
3777
-
3778
- .c0.caret-pos--left .c2::before,
3779
- .c0.caret-pos--left-top .c2::before,
3780
- .c0.caret-pos--left-bottom .c2::before {
3781
- left: -16px;
3782
- border-right-color: #e1e4e8;
3783
- }
3784
-
3785
- .c0.caret-pos--left .c2::after,
3786
- .c0.caret-pos--left-top .c2::after,
3787
- .c0.caret-pos--left-bottom .c2::after {
3788
- left: -14px;
3789
- border-right-color: #ffffff;
3790
- }
3791
-
3792
- .c0.caret-pos--right-top .c2::before,
3793
- .c0.caret-pos--left-top .c2::before,
3794
- .c0.caret-pos--right-top .c2::after,
3795
- .c0.caret-pos--left-top .c2::after {
3796
- top: 24px;
3797
- }
3798
-
3799
- .c0.caret-pos--right-bottom .c2::before,
3800
- .c0.caret-pos--left-bottom .c2::before,
3801
- .c0.caret-pos--right-bottom .c2::after,
3802
- .c0.caret-pos--left-bottom .c2::after {
3803
- top: auto;
3804
- }
3805
-
3806
- .c0.caret-pos--right-bottom .c2::before,
3807
- .c0.caret-pos--left-bottom .c2::before {
3808
- bottom: 16px;
3809
- }
3810
-
3811
- .c0.caret-pos--right-bottom .c2::after,
3812
- .c0.caret-pos--left-bottom .c2::after {
3813
- bottom: calc(16px + 1px);
3814
- }
3815
-
3816
- .c0.caret-pos--bottom .c3::before,
3817
- .c0.caret-pos--bottom-right .c3::before,
3818
- .c0.caret-pos--bottom-left .c3::before,
3819
- .c0.caret-pos--bottom .c3::after,
3820
- .c0.caret-pos--bottom-right .c3::after,
3821
- .c0.caret-pos--bottom-left .c3::after {
3822
- top: auto;
3823
- border-bottom-color: transparent;
3824
- }
3825
-
3826
- .c0.caret-pos--bottom .c3::before,
3827
- .c0.caret-pos--bottom-right .c3::before,
3828
- .c0.caret-pos--bottom-left .c3::before {
3829
- bottom: -16px;
3830
- }
3831
-
3832
- .c0.caret-pos--bottom .c3::after,
3833
- .c0.caret-pos--bottom-right .c3::after,
3834
- .c0.caret-pos--bottom-left .c3::after {
3835
- bottom: -14px;
3836
- }
3837
-
3838
- .c0.caret-pos--top-right .c3,
3839
- .c0.caret-pos--bottom-right .c3 {
3840
- right: -9px;
3841
- margin-right: 0;
3842
- }
3843
-
3844
- .c0.caret-pos--top-right .c3::before,
3845
- .c0.caret-pos--bottom-right .c3::before,
3846
- .c0.caret-pos--top-right .c3::after,
3847
- .c0.caret-pos--bottom-right .c3::after {
3848
- left: auto;
3849
- margin-left: 0;
3850
- }
3851
-
3852
- .c0.caret-pos--top-right .c3::before,
3853
- .c0.caret-pos--bottom-right .c3::before {
3854
- right: 20px;
3855
- }
3856
-
3857
- .c0.caret-pos--top-right .c3::after,
3858
- .c0.caret-pos--bottom-right .c3::after {
3859
- right: 21px;
3860
- }
3861
-
3862
- .c0.caret-pos--top-left .c3,
3863
- .c0.caret-pos--bottom-left .c3 {
3864
- left: -9px;
3865
- margin-left: 0;
3866
- }
3867
-
3868
- .c0.caret-pos--top-left .c3::before,
3869
- .c0.caret-pos--bottom-left .c3::before,
3870
- .c0.caret-pos--top-left .c3::after,
3871
- .c0.caret-pos--bottom-left .c3::after {
3872
- left: 24px;
3873
- margin-left: 0;
3874
- }
3875
-
3876
- .c0.caret-pos--top-left .c3::after,
3877
- .c0.caret-pos--bottom-left .c3::after {
3878
- left: calc(24px + 1px);
3879
- }
3880
-
3881
- .c0.caret-pos--right .c3::before,
3882
- .c0.caret-pos--right-top .c3::before,
3883
- .c0.caret-pos--right-bottom .c3::before,
3884
- .c0.caret-pos--left .c3::before,
3885
- .c0.caret-pos--left-top .c3::before,
3886
- .c0.caret-pos--left-bottom .c3::before,
3887
- .c0.caret-pos--right .c3::after,
3888
- .c0.caret-pos--right-top .c3::after,
3889
- .c0.caret-pos--right-bottom .c3::after,
3890
- .c0.caret-pos--left .c3::after,
3891
- .c0.caret-pos--left-top .c3::after,
3892
- .c0.caret-pos--left-bottom .c3::after {
3893
- top: 50%;
3894
- left: auto;
3895
- margin-left: 0;
3896
- border-bottom-color: transparent;
3897
- }
3898
-
3899
- .c0.caret-pos--right .c3::before,
3900
- .c0.caret-pos--right-top .c3::before,
3901
- .c0.caret-pos--right-bottom .c3::before,
3902
- .c0.caret-pos--left .c3::before,
3903
- .c0.caret-pos--left-top .c3::before,
3904
- .c0.caret-pos--left-bottom .c3::before {
3905
- margin-top: calc((8px + 1px) * -1);
3906
- }
3907
-
3908
- .c0.caret-pos--right .c3::after,
3909
- .c0.caret-pos--right-top .c3::after,
3910
- .c0.caret-pos--right-bottom .c3::after,
3911
- .c0.caret-pos--left .c3::after,
3912
- .c0.caret-pos--left-top .c3::after,
3913
- .c0.caret-pos--left-bottom .c3::after {
3914
- margin-top: -8px;
3915
- }
3916
-
3917
- .c0.caret-pos--right .c3::before,
3918
- .c0.caret-pos--right-top .c3::before,
3919
- .c0.caret-pos--right-bottom .c3::before {
3920
- right: -16px;
3921
- }
3922
-
3923
- .c0.caret-pos--right .c3::after,
3924
- .c0.caret-pos--right-top .c3::after,
3925
- .c0.caret-pos--right-bottom .c3::after {
3926
- right: -14px;
3927
- }
3928
-
3929
- .c0.caret-pos--left .c3::before,
3930
- .c0.caret-pos--left-top .c3::before,
3931
- .c0.caret-pos--left-bottom .c3::before {
3932
- left: -16px;
3933
- }
3934
-
3935
- .c0.caret-pos--left .c3::after,
3936
- .c0.caret-pos--left-top .c3::after,
3937
- .c0.caret-pos--left-bottom .c3::after {
3938
- left: -14px;
3939
- }
3940
-
3941
- .c0.caret-pos--right-top .c3::before,
3942
- .c0.caret-pos--left-top .c3::before,
3943
- .c0.caret-pos--right-top .c3::after,
3944
- .c0.caret-pos--left-top .c3::after {
3945
- top: 24px;
3946
- }
3947
-
3948
- .c0.caret-pos--right-bottom .c3::before,
3949
- .c0.caret-pos--left-bottom .c3::before,
3950
- .c0.caret-pos--right-bottom .c3::after,
3951
- .c0.caret-pos--left-bottom .c3::after {
3952
- top: auto;
3953
- }
3954
-
3955
- .c0.caret-pos--right-bottom .c3::before,
3956
- .c0.caret-pos--left-bottom .c3::before {
3957
- bottom: 16px;
3958
- }
3959
-
3960
- .c0.caret-pos--right-bottom .c3::after,
3961
- .c0.caret-pos--left-bottom .c3::after {
3962
- bottom: calc(16px + 1px);
3963
- }
3964
-
3965
- <div
3966
- className="c0 c1 caret-pos--top"
3967
- open={true}
3968
- >
3969
- <div
3970
- className="c2"
3971
- >
3972
- Hello!
3973
- </div>
3974
- </div>
3975
- `;
3976
-
3977
- exports[`Popover renders correctly for a caret position of top-left 1`] = `
3978
- .c1 {
3979
- position: absolute;
3980
- z-index: 100;
3981
- display: block;
3982
- }
3983
-
3984
- .c2 {
3985
- border: 1px solid #e1e4e8;
3986
- border-radius: 6px;
3987
- position: relative;
3988
- width: 232px;
3989
- margin-right: auto;
3990
- margin-left: auto;
3991
- padding: 24px;
3992
- background-color: #ffffff;
3993
- }
3994
-
3995
- .c2::before,
3996
- .c2::after {
3997
- position: absolute;
3998
- left: 50%;
3999
- display: inline-block;
4000
- content: '';
4001
- }
4002
-
4003
- .c2::before {
4004
- top: -16px;
4005
- margin-left: -9px;
4006
- border: 8px solid transparent;
4007
- border-bottom-color: #e1e4e8;
4008
- }
4009
-
4010
- .c2::after {
4011
- top: -14px;
4012
- margin-left: -8px;
4013
- border: 7px solid transparent;
4014
- border-bottom-color: #ffffff;
4015
- }
4016
-
4017
- .c0.caret-pos--bottom .c2::before,
4018
- .c0.caret-pos--bottom-right .c2::before,
4019
- .c0.caret-pos--bottom-left .c2::before,
4020
- .c0.caret-pos--bottom .c2::after,
4021
- .c0.caret-pos--bottom-right .c2::after,
4022
- .c0.caret-pos--bottom-left .c2::after {
4023
- top: auto;
4024
- border-bottom-color: transparent;
4025
- }
4026
-
4027
- .c0.caret-pos--bottom .c2::before,
4028
- .c0.caret-pos--bottom-right .c2::before,
4029
- .c0.caret-pos--bottom-left .c2::before {
4030
- bottom: -16px;
4031
- border-top-color: #e1e4e8;
4032
- }
4033
-
4034
- .c0.caret-pos--bottom .c2::after,
4035
- .c0.caret-pos--bottom-right .c2::after,
4036
- .c0.caret-pos--bottom-left .c2::after {
4037
- bottom: -14px;
4038
- border-top-color: #ffffff;
4039
- }
4040
-
4041
- .c0.caret-pos--top-right .c2,
4042
- .c0.caret-pos--bottom-right .c2 {
4043
- right: -9px;
4044
- margin-right: 0;
4045
- }
4046
-
4047
- .c0.caret-pos--top-right .c2::before,
4048
- .c0.caret-pos--bottom-right .c2::before,
4049
- .c0.caret-pos--top-right .c2::after,
4050
- .c0.caret-pos--bottom-right .c2::after {
4051
- left: auto;
4052
- margin-left: 0;
4053
- }
4054
-
4055
- .c0.caret-pos--top-right .c2::before,
4056
- .c0.caret-pos--bottom-right .c2::before {
4057
- right: 20px;
4058
- }
4059
-
4060
- .c0.caret-pos--top-right .c2::after,
4061
- .c0.caret-pos--bottom-right .c2::after {
4062
- right: 21px;
4063
- }
4064
-
4065
- .c0.caret-pos--top-left .c2,
4066
- .c0.caret-pos--bottom-left .c2 {
4067
- left: -9px;
4068
- margin-left: 0;
4069
- }
4070
-
4071
- .c0.caret-pos--top-left .c2::before,
4072
- .c0.caret-pos--bottom-left .c2::before,
4073
- .c0.caret-pos--top-left .c2::after,
4074
- .c0.caret-pos--bottom-left .c2::after {
4075
- left: 24px;
4076
- margin-left: 0;
4077
- }
4078
-
4079
- .c0.caret-pos--top-left .c2::after,
4080
- .c0.caret-pos--bottom-left .c2::after {
4081
- left: calc(24px + 1px);
4082
- }
4083
-
4084
- .c0.caret-pos--right .c2::before,
4085
- .c0.caret-pos--right-top .c2::before,
4086
- .c0.caret-pos--right-bottom .c2::before,
4087
- .c0.caret-pos--left .c2::before,
4088
- .c0.caret-pos--left-top .c2::before,
4089
- .c0.caret-pos--left-bottom .c2::before,
4090
- .c0.caret-pos--right .c2::after,
4091
- .c0.caret-pos--right-top .c2::after,
4092
- .c0.caret-pos--right-bottom .c2::after,
4093
- .c0.caret-pos--left .c2::after,
4094
- .c0.caret-pos--left-top .c2::after,
4095
- .c0.caret-pos--left-bottom .c2::after {
4096
- top: 50%;
4097
- left: auto;
4098
- margin-left: 0;
4099
- border-bottom-color: transparent;
4100
- }
4101
-
4102
- .c0.caret-pos--right .c2::before,
4103
- .c0.caret-pos--right-top .c2::before,
4104
- .c0.caret-pos--right-bottom .c2::before,
4105
- .c0.caret-pos--left .c2::before,
4106
- .c0.caret-pos--left-top .c2::before,
4107
- .c0.caret-pos--left-bottom .c2::before {
4108
- margin-top: calc((8px + 1px) * -1);
4109
- }
4110
-
4111
- .c0.caret-pos--right .c2::after,
4112
- .c0.caret-pos--right-top .c2::after,
4113
- .c0.caret-pos--right-bottom .c2::after,
4114
- .c0.caret-pos--left .c2::after,
4115
- .c0.caret-pos--left-top .c2::after,
4116
- .c0.caret-pos--left-bottom .c2::after {
4117
- margin-top: -8px;
4118
- }
4119
-
4120
- .c0.caret-pos--right .c2::before,
4121
- .c0.caret-pos--right-top .c2::before,
4122
- .c0.caret-pos--right-bottom .c2::before {
4123
- right: -16px;
4124
- border-left-color: #e1e4e8;
4125
- }
4126
-
4127
- .c0.caret-pos--right .c2::after,
4128
- .c0.caret-pos--right-top .c2::after,
4129
- .c0.caret-pos--right-bottom .c2::after {
4130
- right: -14px;
4131
- border-left-color: #ffffff;
4132
- }
4133
-
4134
- .c0.caret-pos--left .c2::before,
4135
- .c0.caret-pos--left-top .c2::before,
4136
- .c0.caret-pos--left-bottom .c2::before {
4137
- left: -16px;
4138
- border-right-color: #e1e4e8;
4139
- }
4140
-
4141
- .c0.caret-pos--left .c2::after,
4142
- .c0.caret-pos--left-top .c2::after,
4143
- .c0.caret-pos--left-bottom .c2::after {
4144
- left: -14px;
4145
- border-right-color: #ffffff;
4146
- }
4147
-
4148
- .c0.caret-pos--right-top .c2::before,
4149
- .c0.caret-pos--left-top .c2::before,
4150
- .c0.caret-pos--right-top .c2::after,
4151
- .c0.caret-pos--left-top .c2::after {
4152
- top: 24px;
4153
- }
4154
-
4155
- .c0.caret-pos--right-bottom .c2::before,
4156
- .c0.caret-pos--left-bottom .c2::before,
4157
- .c0.caret-pos--right-bottom .c2::after,
4158
- .c0.caret-pos--left-bottom .c2::after {
4159
- top: auto;
4160
- }
4161
-
4162
- .c0.caret-pos--right-bottom .c2::before,
4163
- .c0.caret-pos--left-bottom .c2::before {
4164
- bottom: 16px;
4165
- }
4166
-
4167
- .c0.caret-pos--right-bottom .c2::after,
4168
- .c0.caret-pos--left-bottom .c2::after {
4169
- bottom: calc(16px + 1px);
4170
- }
4171
-
4172
- .c0.caret-pos--bottom .c3::before,
4173
- .c0.caret-pos--bottom-right .c3::before,
4174
- .c0.caret-pos--bottom-left .c3::before,
4175
- .c0.caret-pos--bottom .c3::after,
4176
- .c0.caret-pos--bottom-right .c3::after,
4177
- .c0.caret-pos--bottom-left .c3::after {
4178
- top: auto;
4179
- border-bottom-color: transparent;
4180
- }
4181
-
4182
- .c0.caret-pos--bottom .c3::before,
4183
- .c0.caret-pos--bottom-right .c3::before,
4184
- .c0.caret-pos--bottom-left .c3::before {
4185
- bottom: -16px;
4186
- }
4187
-
4188
- .c0.caret-pos--bottom .c3::after,
4189
- .c0.caret-pos--bottom-right .c3::after,
4190
- .c0.caret-pos--bottom-left .c3::after {
4191
- bottom: -14px;
4192
- }
4193
-
4194
- .c0.caret-pos--top-right .c3,
4195
- .c0.caret-pos--bottom-right .c3 {
4196
- right: -9px;
4197
- margin-right: 0;
4198
- }
4199
-
4200
- .c0.caret-pos--top-right .c3::before,
4201
- .c0.caret-pos--bottom-right .c3::before,
4202
- .c0.caret-pos--top-right .c3::after,
4203
- .c0.caret-pos--bottom-right .c3::after {
4204
- left: auto;
4205
- margin-left: 0;
4206
- }
4207
-
4208
- .c0.caret-pos--top-right .c3::before,
4209
- .c0.caret-pos--bottom-right .c3::before {
4210
- right: 20px;
4211
- }
4212
-
4213
- .c0.caret-pos--top-right .c3::after,
4214
- .c0.caret-pos--bottom-right .c3::after {
4215
- right: 21px;
4216
- }
4217
-
4218
- .c0.caret-pos--top-left .c3,
4219
- .c0.caret-pos--bottom-left .c3 {
4220
- left: -9px;
4221
- margin-left: 0;
4222
- }
4223
-
4224
- .c0.caret-pos--top-left .c3::before,
4225
- .c0.caret-pos--bottom-left .c3::before,
4226
- .c0.caret-pos--top-left .c3::after,
4227
- .c0.caret-pos--bottom-left .c3::after {
4228
- left: 24px;
4229
- margin-left: 0;
4230
- }
4231
-
4232
- .c0.caret-pos--top-left .c3::after,
4233
- .c0.caret-pos--bottom-left .c3::after {
4234
- left: calc(24px + 1px);
4235
- }
4236
-
4237
- .c0.caret-pos--right .c3::before,
4238
- .c0.caret-pos--right-top .c3::before,
4239
- .c0.caret-pos--right-bottom .c3::before,
4240
- .c0.caret-pos--left .c3::before,
4241
- .c0.caret-pos--left-top .c3::before,
4242
- .c0.caret-pos--left-bottom .c3::before,
4243
- .c0.caret-pos--right .c3::after,
4244
- .c0.caret-pos--right-top .c3::after,
4245
- .c0.caret-pos--right-bottom .c3::after,
4246
- .c0.caret-pos--left .c3::after,
4247
- .c0.caret-pos--left-top .c3::after,
4248
- .c0.caret-pos--left-bottom .c3::after {
4249
- top: 50%;
4250
- left: auto;
4251
- margin-left: 0;
4252
- border-bottom-color: transparent;
4253
- }
4254
-
4255
- .c0.caret-pos--right .c3::before,
4256
- .c0.caret-pos--right-top .c3::before,
4257
- .c0.caret-pos--right-bottom .c3::before,
4258
- .c0.caret-pos--left .c3::before,
4259
- .c0.caret-pos--left-top .c3::before,
4260
- .c0.caret-pos--left-bottom .c3::before {
4261
- margin-top: calc((8px + 1px) * -1);
4262
- }
4263
-
4264
- .c0.caret-pos--right .c3::after,
4265
- .c0.caret-pos--right-top .c3::after,
4266
- .c0.caret-pos--right-bottom .c3::after,
4267
- .c0.caret-pos--left .c3::after,
4268
- .c0.caret-pos--left-top .c3::after,
4269
- .c0.caret-pos--left-bottom .c3::after {
4270
- margin-top: -8px;
4271
- }
4272
-
4273
- .c0.caret-pos--right .c3::before,
4274
- .c0.caret-pos--right-top .c3::before,
4275
- .c0.caret-pos--right-bottom .c3::before {
4276
- right: -16px;
4277
- }
4278
-
4279
- .c0.caret-pos--right .c3::after,
4280
- .c0.caret-pos--right-top .c3::after,
4281
- .c0.caret-pos--right-bottom .c3::after {
4282
- right: -14px;
4283
- }
4284
-
4285
- .c0.caret-pos--left .c3::before,
4286
- .c0.caret-pos--left-top .c3::before,
4287
- .c0.caret-pos--left-bottom .c3::before {
4288
- left: -16px;
4289
- }
4290
-
4291
- .c0.caret-pos--left .c3::after,
4292
- .c0.caret-pos--left-top .c3::after,
4293
- .c0.caret-pos--left-bottom .c3::after {
4294
- left: -14px;
4295
- }
4296
-
4297
- .c0.caret-pos--right-top .c3::before,
4298
- .c0.caret-pos--left-top .c3::before,
4299
- .c0.caret-pos--right-top .c3::after,
4300
- .c0.caret-pos--left-top .c3::after {
4301
- top: 24px;
4302
- }
4303
-
4304
- .c0.caret-pos--right-bottom .c3::before,
4305
- .c0.caret-pos--left-bottom .c3::before,
4306
- .c0.caret-pos--right-bottom .c3::after,
4307
- .c0.caret-pos--left-bottom .c3::after {
4308
- top: auto;
4309
- }
4310
-
4311
- .c0.caret-pos--right-bottom .c3::before,
4312
- .c0.caret-pos--left-bottom .c3::before {
4313
- bottom: 16px;
4314
- }
4315
-
4316
- .c0.caret-pos--right-bottom .c3::after,
4317
- .c0.caret-pos--left-bottom .c3::after {
4318
- bottom: calc(16px + 1px);
4319
- }
4320
-
4321
- <div
4322
- className="c0 c1 caret-pos--top-left"
4323
- open={true}
4324
- >
4325
- <div
4326
- className="c2"
4327
- >
4328
- Hello!
4329
- </div>
4330
- </div>
4331
- `;
4332
-
4333
- exports[`Popover renders correctly for a caret position of top-right 1`] = `
4334
- .c1 {
4335
- position: absolute;
4336
- z-index: 100;
4337
- display: block;
4338
- }
4339
-
4340
- .c2 {
4341
- border: 1px solid #e1e4e8;
4342
- border-radius: 6px;
4343
- position: relative;
4344
- width: 232px;
4345
- margin-right: auto;
4346
- margin-left: auto;
4347
- padding: 24px;
4348
- background-color: #ffffff;
4349
- }
4350
-
4351
- .c2::before,
4352
- .c2::after {
4353
- position: absolute;
4354
- left: 50%;
4355
- display: inline-block;
4356
- content: '';
4357
- }
4358
-
4359
- .c2::before {
4360
- top: -16px;
4361
- margin-left: -9px;
4362
- border: 8px solid transparent;
4363
- border-bottom-color: #e1e4e8;
4364
- }
4365
-
4366
- .c2::after {
4367
- top: -14px;
4368
- margin-left: -8px;
4369
- border: 7px solid transparent;
4370
- border-bottom-color: #ffffff;
4371
- }
4372
-
4373
- .c0.caret-pos--bottom .c2::before,
4374
- .c0.caret-pos--bottom-right .c2::before,
4375
- .c0.caret-pos--bottom-left .c2::before,
4376
- .c0.caret-pos--bottom .c2::after,
4377
- .c0.caret-pos--bottom-right .c2::after,
4378
- .c0.caret-pos--bottom-left .c2::after {
4379
- top: auto;
4380
- border-bottom-color: transparent;
4381
- }
4382
-
4383
- .c0.caret-pos--bottom .c2::before,
4384
- .c0.caret-pos--bottom-right .c2::before,
4385
- .c0.caret-pos--bottom-left .c2::before {
4386
- bottom: -16px;
4387
- border-top-color: #e1e4e8;
4388
- }
4389
-
4390
- .c0.caret-pos--bottom .c2::after,
4391
- .c0.caret-pos--bottom-right .c2::after,
4392
- .c0.caret-pos--bottom-left .c2::after {
4393
- bottom: -14px;
4394
- border-top-color: #ffffff;
4395
- }
4396
-
4397
- .c0.caret-pos--top-right .c2,
4398
- .c0.caret-pos--bottom-right .c2 {
4399
- right: -9px;
4400
- margin-right: 0;
4401
- }
4402
-
4403
- .c0.caret-pos--top-right .c2::before,
4404
- .c0.caret-pos--bottom-right .c2::before,
4405
- .c0.caret-pos--top-right .c2::after,
4406
- .c0.caret-pos--bottom-right .c2::after {
4407
- left: auto;
4408
- margin-left: 0;
4409
- }
4410
-
4411
- .c0.caret-pos--top-right .c2::before,
4412
- .c0.caret-pos--bottom-right .c2::before {
4413
- right: 20px;
4414
- }
4415
-
4416
- .c0.caret-pos--top-right .c2::after,
4417
- .c0.caret-pos--bottom-right .c2::after {
4418
- right: 21px;
4419
- }
4420
-
4421
- .c0.caret-pos--top-left .c2,
4422
- .c0.caret-pos--bottom-left .c2 {
4423
- left: -9px;
4424
- margin-left: 0;
4425
- }
4426
-
4427
- .c0.caret-pos--top-left .c2::before,
4428
- .c0.caret-pos--bottom-left .c2::before,
4429
- .c0.caret-pos--top-left .c2::after,
4430
- .c0.caret-pos--bottom-left .c2::after {
4431
- left: 24px;
4432
- margin-left: 0;
4433
- }
4434
-
4435
- .c0.caret-pos--top-left .c2::after,
4436
- .c0.caret-pos--bottom-left .c2::after {
4437
- left: calc(24px + 1px);
4438
- }
4439
-
4440
- .c0.caret-pos--right .c2::before,
4441
- .c0.caret-pos--right-top .c2::before,
4442
- .c0.caret-pos--right-bottom .c2::before,
4443
- .c0.caret-pos--left .c2::before,
4444
- .c0.caret-pos--left-top .c2::before,
4445
- .c0.caret-pos--left-bottom .c2::before,
4446
- .c0.caret-pos--right .c2::after,
4447
- .c0.caret-pos--right-top .c2::after,
4448
- .c0.caret-pos--right-bottom .c2::after,
4449
- .c0.caret-pos--left .c2::after,
4450
- .c0.caret-pos--left-top .c2::after,
4451
- .c0.caret-pos--left-bottom .c2::after {
4452
- top: 50%;
4453
- left: auto;
4454
- margin-left: 0;
4455
- border-bottom-color: transparent;
4456
- }
4457
-
4458
- .c0.caret-pos--right .c2::before,
4459
- .c0.caret-pos--right-top .c2::before,
4460
- .c0.caret-pos--right-bottom .c2::before,
4461
- .c0.caret-pos--left .c2::before,
4462
- .c0.caret-pos--left-top .c2::before,
4463
- .c0.caret-pos--left-bottom .c2::before {
4464
- margin-top: calc((8px + 1px) * -1);
4465
- }
4466
-
4467
- .c0.caret-pos--right .c2::after,
4468
- .c0.caret-pos--right-top .c2::after,
4469
- .c0.caret-pos--right-bottom .c2::after,
4470
- .c0.caret-pos--left .c2::after,
4471
- .c0.caret-pos--left-top .c2::after,
4472
- .c0.caret-pos--left-bottom .c2::after {
4473
- margin-top: -8px;
4474
- }
4475
-
4476
- .c0.caret-pos--right .c2::before,
4477
- .c0.caret-pos--right-top .c2::before,
4478
- .c0.caret-pos--right-bottom .c2::before {
4479
- right: -16px;
4480
- border-left-color: #e1e4e8;
4481
- }
4482
-
4483
- .c0.caret-pos--right .c2::after,
4484
- .c0.caret-pos--right-top .c2::after,
4485
- .c0.caret-pos--right-bottom .c2::after {
4486
- right: -14px;
4487
- border-left-color: #ffffff;
4488
- }
4489
-
4490
- .c0.caret-pos--left .c2::before,
4491
- .c0.caret-pos--left-top .c2::before,
4492
- .c0.caret-pos--left-bottom .c2::before {
4493
- left: -16px;
4494
- border-right-color: #e1e4e8;
4495
- }
4496
-
4497
- .c0.caret-pos--left .c2::after,
4498
- .c0.caret-pos--left-top .c2::after,
4499
- .c0.caret-pos--left-bottom .c2::after {
4500
- left: -14px;
4501
- border-right-color: #ffffff;
4502
- }
4503
-
4504
- .c0.caret-pos--right-top .c2::before,
4505
- .c0.caret-pos--left-top .c2::before,
4506
- .c0.caret-pos--right-top .c2::after,
4507
- .c0.caret-pos--left-top .c2::after {
4508
- top: 24px;
4509
- }
4510
-
4511
- .c0.caret-pos--right-bottom .c2::before,
4512
- .c0.caret-pos--left-bottom .c2::before,
4513
- .c0.caret-pos--right-bottom .c2::after,
4514
- .c0.caret-pos--left-bottom .c2::after {
4515
- top: auto;
4516
- }
4517
-
4518
- .c0.caret-pos--right-bottom .c2::before,
4519
- .c0.caret-pos--left-bottom .c2::before {
4520
- bottom: 16px;
4521
- }
4522
-
4523
- .c0.caret-pos--right-bottom .c2::after,
4524
- .c0.caret-pos--left-bottom .c2::after {
4525
- bottom: calc(16px + 1px);
4526
- }
4527
-
4528
- .c0.caret-pos--bottom .c3::before,
4529
- .c0.caret-pos--bottom-right .c3::before,
4530
- .c0.caret-pos--bottom-left .c3::before,
4531
- .c0.caret-pos--bottom .c3::after,
4532
- .c0.caret-pos--bottom-right .c3::after,
4533
- .c0.caret-pos--bottom-left .c3::after {
4534
- top: auto;
4535
- border-bottom-color: transparent;
4536
- }
4537
-
4538
- .c0.caret-pos--bottom .c3::before,
4539
- .c0.caret-pos--bottom-right .c3::before,
4540
- .c0.caret-pos--bottom-left .c3::before {
4541
- bottom: -16px;
4542
- }
4543
-
4544
- .c0.caret-pos--bottom .c3::after,
4545
- .c0.caret-pos--bottom-right .c3::after,
4546
- .c0.caret-pos--bottom-left .c3::after {
4547
- bottom: -14px;
4548
- }
4549
-
4550
- .c0.caret-pos--top-right .c3,
4551
- .c0.caret-pos--bottom-right .c3 {
4552
- right: -9px;
4553
- margin-right: 0;
4554
- }
4555
-
4556
- .c0.caret-pos--top-right .c3::before,
4557
- .c0.caret-pos--bottom-right .c3::before,
4558
- .c0.caret-pos--top-right .c3::after,
4559
- .c0.caret-pos--bottom-right .c3::after {
4560
- left: auto;
4561
- margin-left: 0;
4562
- }
4563
-
4564
- .c0.caret-pos--top-right .c3::before,
4565
- .c0.caret-pos--bottom-right .c3::before {
4566
- right: 20px;
4567
- }
4568
-
4569
- .c0.caret-pos--top-right .c3::after,
4570
- .c0.caret-pos--bottom-right .c3::after {
4571
- right: 21px;
4572
- }
4573
-
4574
- .c0.caret-pos--top-left .c3,
4575
- .c0.caret-pos--bottom-left .c3 {
4576
- left: -9px;
4577
- margin-left: 0;
4578
- }
4579
-
4580
- .c0.caret-pos--top-left .c3::before,
4581
- .c0.caret-pos--bottom-left .c3::before,
4582
- .c0.caret-pos--top-left .c3::after,
4583
- .c0.caret-pos--bottom-left .c3::after {
4584
- left: 24px;
4585
- margin-left: 0;
4586
- }
4587
-
4588
- .c0.caret-pos--top-left .c3::after,
4589
- .c0.caret-pos--bottom-left .c3::after {
4590
- left: calc(24px + 1px);
4591
- }
4592
-
4593
- .c0.caret-pos--right .c3::before,
4594
- .c0.caret-pos--right-top .c3::before,
4595
- .c0.caret-pos--right-bottom .c3::before,
4596
- .c0.caret-pos--left .c3::before,
4597
- .c0.caret-pos--left-top .c3::before,
4598
- .c0.caret-pos--left-bottom .c3::before,
4599
- .c0.caret-pos--right .c3::after,
4600
- .c0.caret-pos--right-top .c3::after,
4601
- .c0.caret-pos--right-bottom .c3::after,
4602
- .c0.caret-pos--left .c3::after,
4603
- .c0.caret-pos--left-top .c3::after,
4604
- .c0.caret-pos--left-bottom .c3::after {
4605
- top: 50%;
4606
- left: auto;
4607
- margin-left: 0;
4608
- border-bottom-color: transparent;
4609
- }
4610
-
4611
- .c0.caret-pos--right .c3::before,
4612
- .c0.caret-pos--right-top .c3::before,
4613
- .c0.caret-pos--right-bottom .c3::before,
4614
- .c0.caret-pos--left .c3::before,
4615
- .c0.caret-pos--left-top .c3::before,
4616
- .c0.caret-pos--left-bottom .c3::before {
4617
- margin-top: calc((8px + 1px) * -1);
4618
- }
4619
-
4620
- .c0.caret-pos--right .c3::after,
4621
- .c0.caret-pos--right-top .c3::after,
4622
- .c0.caret-pos--right-bottom .c3::after,
4623
- .c0.caret-pos--left .c3::after,
4624
- .c0.caret-pos--left-top .c3::after,
4625
- .c0.caret-pos--left-bottom .c3::after {
4626
- margin-top: -8px;
4627
- }
4628
-
4629
- .c0.caret-pos--right .c3::before,
4630
- .c0.caret-pos--right-top .c3::before,
4631
- .c0.caret-pos--right-bottom .c3::before {
4632
- right: -16px;
4633
- }
4634
-
4635
- .c0.caret-pos--right .c3::after,
4636
- .c0.caret-pos--right-top .c3::after,
4637
- .c0.caret-pos--right-bottom .c3::after {
4638
- right: -14px;
4639
- }
4640
-
4641
- .c0.caret-pos--left .c3::before,
4642
- .c0.caret-pos--left-top .c3::before,
4643
- .c0.caret-pos--left-bottom .c3::before {
4644
- left: -16px;
4645
- }
4646
-
4647
- .c0.caret-pos--left .c3::after,
4648
- .c0.caret-pos--left-top .c3::after,
4649
- .c0.caret-pos--left-bottom .c3::after {
4650
- left: -14px;
4651
- }
4652
-
4653
- .c0.caret-pos--right-top .c3::before,
4654
- .c0.caret-pos--left-top .c3::before,
4655
- .c0.caret-pos--right-top .c3::after,
4656
- .c0.caret-pos--left-top .c3::after {
4657
- top: 24px;
4658
- }
4659
-
4660
- .c0.caret-pos--right-bottom .c3::before,
4661
- .c0.caret-pos--left-bottom .c3::before,
4662
- .c0.caret-pos--right-bottom .c3::after,
4663
- .c0.caret-pos--left-bottom .c3::after {
4664
- top: auto;
4665
- }
4666
-
4667
- .c0.caret-pos--right-bottom .c3::before,
4668
- .c0.caret-pos--left-bottom .c3::before {
4669
- bottom: 16px;
4670
- }
4671
-
4672
- .c0.caret-pos--right-bottom .c3::after,
4673
- .c0.caret-pos--left-bottom .c3::after {
4674
- bottom: calc(16px + 1px);
4675
- }
4676
-
4677
- <div
4678
- className="c0 c1 caret-pos--top-right"
4679
- open={true}
4680
- >
4681
- <div
4682
- className="c2"
4683
- >
4684
- Hello!
4685
- </div>
4686
- </div>
4687
- `;