@primer/components 29.1.0 → 29.1.1-rc.cea79543

Sign up to get free protection for your applications and to get access to all the features.
Files changed (753) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/config.json +10 -0
  3. package/.devcontainer/devcontainer.json +8 -0
  4. package/.eslintrc.json +106 -0
  5. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  6. package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
  7. package/.github/dependabot.yml +18 -0
  8. package/.github/pull_request_template.md +18 -0
  9. package/.github/workflows/ci.yml +31 -0
  10. package/.github/workflows/deploy_preview.yml +47 -0
  11. package/.github/workflows/deploy_production.yml +70 -0
  12. package/.github/workflows/release.yml +35 -0
  13. package/.github/workflows/release_canary.yml +70 -0
  14. package/.github/workflows/release_candidate.yml +60 -0
  15. package/.github/workflows/size.yml +13 -0
  16. package/.github/workflows/stale.yml +26 -0
  17. package/.gitignore +10 -0
  18. package/.npmrc +4 -0
  19. package/.nvmrc +1 -0
  20. package/.storybook/main.js +11 -0
  21. package/.storybook/preview.js +69 -0
  22. package/.vscode/launch.json +21 -0
  23. package/.vscode/settings.json +13 -0
  24. package/@types/@styled-system/index.d.ts +0 -0
  25. package/@types/@styled-system/prop-types/index.d.ts +1 -0
  26. package/@types/@styled-system/props/index.d.ts +1 -0
  27. package/@types/jest-styled-components/index.d.ts +1 -0
  28. package/CHANGELOG.md +6 -0
  29. package/CODEOWNERS +2 -0
  30. package/babel-defines.js +13 -0
  31. package/babel.config.js +39 -0
  32. package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
  33. package/contributor-docs/CONTRIBUTING.md +274 -0
  34. package/contributor-docs/adrs/adr-001-typescript.md +23 -0
  35. package/contributor-docs/adrs/adr-002-behavior-isolation.md +106 -0
  36. package/contributor-docs/behaviors.md +132 -0
  37. package/contributor-docs/component-contents-api-patterns.md +315 -0
  38. package/contributor-docs/principles.md +39 -0
  39. package/docs/.eslintrc +0 -0
  40. package/docs/.gitignore +91 -0
  41. package/docs/components/PropsList.js +5 -0
  42. package/docs/components/State.js +9 -0
  43. package/docs/components/constants.js +34 -0
  44. package/docs/components/index.js +2 -0
  45. package/docs/content/ActionList.mdx +72 -0
  46. package/docs/content/ActionMenu.mdx +80 -0
  47. package/docs/content/AnchoredOverlay.mdx +37 -0
  48. package/docs/content/Avatar.mdx +33 -0
  49. package/docs/content/AvatarStack.mdx +43 -0
  50. package/docs/content/BorderBox.md +46 -0
  51. package/docs/content/Box.md +74 -0
  52. package/docs/content/BranchName.md +18 -0
  53. package/docs/content/Breadcrumbs.md +52 -0
  54. package/docs/content/Buttons.md +54 -0
  55. package/docs/content/CircleBadge.md +45 -0
  56. package/docs/content/CircleOcticon.md +18 -0
  57. package/docs/content/CounterLabel.md +30 -0
  58. package/docs/content/Details.md +105 -0
  59. package/docs/content/Dialog.md +108 -0
  60. package/docs/content/Dialog2.mdx +179 -0
  61. package/docs/content/Dropdown.md +72 -0
  62. package/docs/content/DropdownMenu.mdx +49 -0
  63. package/docs/content/FilterList.md +44 -0
  64. package/docs/content/FilteredSearch.md +39 -0
  65. package/docs/content/Flash.md +42 -0
  66. package/docs/content/Flex.md +58 -0
  67. package/docs/content/FormGroup.md +44 -0
  68. package/docs/content/Grid.md +59 -0
  69. package/docs/content/Header.md +79 -0
  70. package/docs/content/Heading.md +22 -0
  71. package/docs/content/Label.md +40 -0
  72. package/docs/content/LabelGroup.md +31 -0
  73. package/docs/content/Link.md +37 -0
  74. package/docs/content/Overlay.mdx +94 -0
  75. package/docs/content/Pagehead.md +27 -0
  76. package/docs/content/Pagination.md +187 -0
  77. package/docs/content/PointerBox.md +81 -0
  78. package/docs/content/Popover.md +137 -0
  79. package/docs/content/Portal.mdx +73 -0
  80. package/docs/content/Position.md +97 -0
  81. package/docs/content/ProgressBar.mdx +29 -0
  82. package/docs/content/SelectMenu.md +433 -0
  83. package/docs/content/SelectPanel.mdx +67 -0
  84. package/docs/content/SideNav.md +179 -0
  85. package/docs/content/Spinner.mdx +32 -0
  86. package/docs/content/StateLabel.md +33 -0
  87. package/docs/content/StyledOcticon.md +34 -0
  88. package/docs/content/SubNav.md +102 -0
  89. package/docs/content/TabNav.md +50 -0
  90. package/docs/content/Text.md +29 -0
  91. package/docs/content/TextInput.md +32 -0
  92. package/docs/content/Timeline.md +138 -0
  93. package/docs/content/Tooltip.md +41 -0
  94. package/docs/content/Truncate.md +65 -0
  95. package/docs/content/UnderlineNav.md +53 -0
  96. package/docs/content/anchoredPosition.mdx +163 -0
  97. package/docs/content/core-concepts.md +70 -0
  98. package/docs/content/focusTrap.mdx +103 -0
  99. package/docs/content/focusZone.mdx +145 -0
  100. package/docs/content/getting-started.md +134 -0
  101. package/docs/content/index.md +33 -0
  102. package/docs/content/linting.md +35 -0
  103. package/docs/content/overriding-styles.mdx +79 -0
  104. package/docs/content/philosophy.md +23 -0
  105. package/docs/content/primer-theme.md +89 -0
  106. package/docs/content/ssr.mdx +43 -0
  107. package/docs/content/system-props.mdx +37 -0
  108. package/docs/content/theme-reference.md +16 -0
  109. package/docs/content/theming.md +249 -0
  110. package/docs/content/useOnEscapePress.mdx +56 -0
  111. package/docs/content/useOnOutsideClick.mdx +57 -0
  112. package/docs/content/useOpenAndCloseFocus.mdx +49 -0
  113. package/docs/content/useOverlay.mdx +62 -0
  114. package/docs/content/useSafeTimeout.mdx +32 -0
  115. package/docs/gatsby-config.js +30 -0
  116. package/docs/gatsby-node.js +101 -0
  117. package/docs/package-lock.json +20979 -0
  118. package/docs/package.json +35 -0
  119. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +21 -0
  120. package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +84 -0
  121. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +39 -0
  122. package/docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js +48 -0
  123. package/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js +25 -0
  124. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +54 -0
  125. package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +127 -0
  126. package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
  127. package/docs/src/props.js +77 -0
  128. package/jest.config.js +13 -0
  129. package/lib/Button/Button.d.ts +0 -1
  130. package/lib/Button/ButtonClose.d.ts +1 -2
  131. package/lib/Button/ButtonDanger.d.ts +0 -1
  132. package/lib/Button/ButtonInvisible.d.ts +0 -1
  133. package/lib/Button/ButtonOutline.d.ts +0 -1
  134. package/lib/Button/ButtonPrimary.d.ts +0 -1
  135. package/lib/CircleOcticon.d.ts +0 -1
  136. package/lib/Dialog.d.ts +2 -3
  137. package/lib/Dropdown.d.ts +0 -4
  138. package/lib/DropdownMenu/DropdownButton.d.ts +1 -2
  139. package/lib/FilterList.d.ts +0 -1
  140. package/lib/Position.d.ts +4 -4
  141. package/lib/SelectMenu/SelectMenu.d.ts +4 -10
  142. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  143. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  144. package/lib/Timeline.d.ts +0 -1
  145. package/lib/__tests__/ActionList.d.ts +1 -0
  146. package/lib/__tests__/ActionList.js +67 -0
  147. package/lib/__tests__/ActionMenu.d.ts +1 -0
  148. package/lib/__tests__/ActionMenu.js +154 -0
  149. package/lib/__tests__/AnchoredOverlay.d.ts +1 -0
  150. package/lib/__tests__/AnchoredOverlay.js +161 -0
  151. package/lib/__tests__/Avatar.d.ts +1 -0
  152. package/lib/__tests__/Avatar.js +70 -0
  153. package/lib/__tests__/AvatarStack.d.ts +1 -0
  154. package/lib/__tests__/AvatarStack.js +71 -0
  155. package/lib/__tests__/BorderBox.d.ts +1 -0
  156. package/lib/__tests__/BorderBox.js +61 -0
  157. package/lib/__tests__/Box.d.ts +1 -0
  158. package/lib/__tests__/Box.js +81 -0
  159. package/lib/__tests__/BranchName.d.ts +1 -0
  160. package/lib/__tests__/BranchName.js +39 -0
  161. package/lib/__tests__/Breadcrumb.d.ts +1 -0
  162. package/lib/__tests__/Breadcrumb.js +42 -0
  163. package/lib/__tests__/BreadcrumbItem.d.ts +1 -0
  164. package/lib/__tests__/BreadcrumbItem.js +52 -0
  165. package/lib/__tests__/Button.d.ts +1 -0
  166. package/lib/__tests__/Button.js +152 -0
  167. package/lib/__tests__/Caret.d.ts +1 -0
  168. package/lib/__tests__/Caret.js +52 -0
  169. package/lib/__tests__/CircleBadge.d.ts +1 -0
  170. package/lib/__tests__/CircleBadge.js +87 -0
  171. package/lib/__tests__/CircleOcticon.d.ts +1 -0
  172. package/lib/__tests__/CircleOcticon.js +74 -0
  173. package/lib/__tests__/CounterLabel.d.ts +1 -0
  174. package/lib/__tests__/CounterLabel.js +61 -0
  175. package/lib/__tests__/Details.d.ts +1 -0
  176. package/lib/__tests__/Details.js +120 -0
  177. package/lib/__tests__/Dialog.d.ts +1 -0
  178. package/lib/__tests__/Dialog.js +188 -0
  179. package/lib/__tests__/Dropdown.d.ts +1 -0
  180. package/lib/__tests__/Dropdown.js +70 -0
  181. package/lib/__tests__/DropdownMenu.d.ts +1 -0
  182. package/lib/__tests__/DropdownMenu.js +153 -0
  183. package/lib/__tests__/FilterList.d.ts +1 -0
  184. package/lib/__tests__/FilterList.js +39 -0
  185. package/lib/__tests__/FilterListItem.d.ts +1 -0
  186. package/lib/__tests__/FilterListItem.js +49 -0
  187. package/lib/__tests__/FilteredSearch.d.ts +1 -0
  188. package/lib/__tests__/FilteredSearch.js +39 -0
  189. package/lib/__tests__/Flash.d.ts +1 -0
  190. package/lib/__tests__/Flash.js +65 -0
  191. package/lib/__tests__/Flex.d.ts +1 -0
  192. package/lib/__tests__/Flex.js +77 -0
  193. package/lib/__tests__/FormGroup.d.ts +1 -0
  194. package/lib/__tests__/FormGroup.js +58 -0
  195. package/lib/__tests__/Grid.d.ts +1 -0
  196. package/lib/__tests__/Grid.js +107 -0
  197. package/lib/__tests__/Header.d.ts +1 -0
  198. package/lib/__tests__/Header.js +63 -0
  199. package/lib/__tests__/Heading.d.ts +1 -0
  200. package/lib/__tests__/Heading.js +112 -0
  201. package/lib/__tests__/Label.d.ts +1 -0
  202. package/lib/__tests__/Label.js +49 -0
  203. package/lib/__tests__/LabelGroup.d.ts +1 -0
  204. package/lib/__tests__/LabelGroup.js +41 -0
  205. package/lib/__tests__/Link.d.ts +1 -0
  206. package/lib/__tests__/Link.js +73 -0
  207. package/lib/__tests__/Overlay.d.ts +1 -0
  208. package/lib/__tests__/Overlay.js +145 -0
  209. package/lib/__tests__/Pagehead.d.ts +1 -0
  210. package/lib/__tests__/Pagehead.js +40 -0
  211. package/lib/__tests__/Pagination/Pagination.d.ts +1 -0
  212. package/lib/__tests__/Pagination/Pagination.js +50 -0
  213. package/lib/__tests__/Pagination/PaginationModel.d.ts +1 -0
  214. package/lib/__tests__/Pagination/PaginationModel.js +186 -0
  215. package/lib/__tests__/PointerBox.d.ts +1 -0
  216. package/lib/__tests__/PointerBox.js +49 -0
  217. package/lib/__tests__/Popover.d.ts +1 -0
  218. package/lib/__tests__/Popover.js +70 -0
  219. package/lib/__tests__/Portal.d.ts +1 -0
  220. package/lib/__tests__/Portal.js +124 -0
  221. package/lib/__tests__/Position.d.ts +1 -0
  222. package/lib/__tests__/Position.js +149 -0
  223. package/lib/__tests__/ProgressBar.d.ts +1 -0
  224. package/lib/__tests__/ProgressBar.js +71 -0
  225. package/lib/__tests__/SelectMenu.d.ts +1 -0
  226. package/lib/__tests__/SelectMenu.js +155 -0
  227. package/lib/__tests__/SelectPanel.d.ts +1 -0
  228. package/lib/__tests__/SelectPanel.js +83 -0
  229. package/lib/__tests__/SideNav.d.ts +1 -0
  230. package/lib/__tests__/SideNav.js +75 -0
  231. package/lib/__tests__/Spinner.d.ts +1 -0
  232. package/lib/__tests__/Spinner.js +56 -0
  233. package/lib/__tests__/StateLabel.d.ts +1 -0
  234. package/lib/__tests__/StateLabel.js +74 -0
  235. package/lib/__tests__/StyledOcticon.d.ts +1 -0
  236. package/lib/__tests__/StyledOcticon.js +43 -0
  237. package/lib/__tests__/SubNav.d.ts +1 -0
  238. package/lib/__tests__/SubNav.js +65 -0
  239. package/lib/__tests__/SubNavLink.d.ts +1 -0
  240. package/lib/__tests__/SubNavLink.js +52 -0
  241. package/lib/__tests__/TabNav.d.ts +1 -0
  242. package/lib/__tests__/TabNav.js +53 -0
  243. package/lib/__tests__/Text.d.ts +1 -0
  244. package/lib/__tests__/Text.js +108 -0
  245. package/lib/__tests__/TextInput.d.ts +1 -0
  246. package/lib/__tests__/TextInput.js +81 -0
  247. package/lib/__tests__/ThemeProvider.d.ts +1 -0
  248. package/lib/__tests__/ThemeProvider.js +444 -0
  249. package/lib/__tests__/Timeline.d.ts +1 -0
  250. package/lib/__tests__/Timeline.js +80 -0
  251. package/lib/__tests__/Tooltip.d.ts +1 -0
  252. package/lib/__tests__/Tooltip.js +72 -0
  253. package/lib/__tests__/Truncate.d.ts +1 -0
  254. package/lib/__tests__/Truncate.js +66 -0
  255. package/lib/__tests__/UnderlineNav.d.ts +1 -0
  256. package/lib/__tests__/UnderlineNav.js +75 -0
  257. package/lib/__tests__/UnderlineNavLink.d.ts +1 -0
  258. package/lib/__tests__/UnderlineNavLink.js +54 -0
  259. package/lib/__tests__/behaviors/anchoredPosition.d.ts +1 -0
  260. package/lib/__tests__/behaviors/anchoredPosition.js +390 -0
  261. package/lib/__tests__/behaviors/focusTrap.d.ts +1 -0
  262. package/lib/__tests__/behaviors/focusTrap.js +234 -0
  263. package/lib/__tests__/behaviors/focusZone.d.ts +1 -0
  264. package/lib/__tests__/behaviors/focusZone.js +570 -0
  265. package/lib/__tests__/behaviors/iterateFocusableElements.d.ts +1 -0
  266. package/lib/__tests__/behaviors/iterateFocusableElements.js +55 -0
  267. package/lib/__tests__/filterObject.d.ts +1 -0
  268. package/lib/__tests__/filterObject.js +30 -0
  269. package/lib/__tests__/hooks/useAnchoredPosition.d.ts +1 -0
  270. package/lib/__tests__/hooks/useAnchoredPosition.js +54 -0
  271. package/lib/__tests__/hooks/useOnEscapePress.d.ts +1 -0
  272. package/lib/__tests__/hooks/useOnEscapePress.js +32 -0
  273. package/lib/__tests__/hooks/useOnOutsideClick.d.ts +1 -0
  274. package/lib/__tests__/hooks/useOnOutsideClick.js +87 -0
  275. package/lib/__tests__/hooks/useOpenAndCloseFocus.d.ts +1 -0
  276. package/lib/__tests__/hooks/useOpenAndCloseFocus.js +60 -0
  277. package/lib/__tests__/hooks/useProvidedStateOrCreate.d.ts +1 -0
  278. package/lib/__tests__/hooks/useProvidedStateOrCreate.js +45 -0
  279. package/lib/__tests__/theme.d.ts +1 -0
  280. package/lib/__tests__/theme.js +36 -0
  281. package/lib/__tests__/themeGet.d.ts +1 -0
  282. package/lib/__tests__/themeGet.js +25 -0
  283. package/lib/__tests__/useSafeTimeout.d.ts +1 -0
  284. package/lib/__tests__/useSafeTimeout.js +45 -0
  285. package/lib/stories/ActionList.stories.js +382 -0
  286. package/lib/stories/ActionMenu.stories.js +338 -0
  287. package/lib/stories/AnchoredOverlay.stories.js +127 -0
  288. package/lib/stories/AvatarStack.stories.js +49 -0
  289. package/lib/stories/Button.stories.js +114 -0
  290. package/lib/stories/ConfirmationDialog.stories.js +111 -0
  291. package/lib/stories/Dialog.stories.js +265 -0
  292. package/lib/stories/DropdownMenu.stories.js +122 -0
  293. package/lib/stories/Overlay.stories.js +185 -0
  294. package/lib/stories/Portal.stories.js +104 -0
  295. package/lib/stories/SelectPanel.stories.js +342 -0
  296. package/lib/stories/ThemeProvider.stories.js +102 -0
  297. package/lib/stories/useAnchoredPosition.stories.js +351 -0
  298. package/lib/stories/useFocusTrap.stories.js +356 -0
  299. package/lib/stories/useFocusZone.stories.js +599 -0
  300. package/lib-esm/Button/Button.d.ts +0 -1
  301. package/lib-esm/Button/ButtonClose.d.ts +1 -2
  302. package/lib-esm/Button/ButtonDanger.d.ts +0 -1
  303. package/lib-esm/Button/ButtonInvisible.d.ts +0 -1
  304. package/lib-esm/Button/ButtonOutline.d.ts +0 -1
  305. package/lib-esm/Button/ButtonPrimary.d.ts +0 -1
  306. package/lib-esm/CircleOcticon.d.ts +0 -1
  307. package/lib-esm/Dialog.d.ts +2 -3
  308. package/lib-esm/Dropdown.d.ts +0 -4
  309. package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -2
  310. package/lib-esm/FilterList.d.ts +0 -1
  311. package/lib-esm/Position.d.ts +4 -4
  312. package/lib-esm/SelectMenu/SelectMenu.d.ts +4 -10
  313. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  314. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  315. package/lib-esm/Timeline.d.ts +0 -1
  316. package/lib-esm/__tests__/ActionList.d.ts +1 -0
  317. package/lib-esm/__tests__/ActionList.js +54 -0
  318. package/lib-esm/__tests__/ActionMenu.d.ts +1 -0
  319. package/lib-esm/__tests__/ActionMenu.js +141 -0
  320. package/lib-esm/__tests__/AnchoredOverlay.d.ts +1 -0
  321. package/lib-esm/__tests__/AnchoredOverlay.js +135 -0
  322. package/lib-esm/__tests__/Avatar.d.ts +1 -0
  323. package/lib-esm/__tests__/Avatar.js +58 -0
  324. package/lib-esm/__tests__/AvatarStack.d.ts +1 -0
  325. package/lib-esm/__tests__/AvatarStack.js +57 -0
  326. package/lib-esm/__tests__/BorderBox.d.ts +1 -0
  327. package/lib-esm/__tests__/BorderBox.js +49 -0
  328. package/lib-esm/__tests__/Box.d.ts +1 -0
  329. package/lib-esm/__tests__/Box.js +69 -0
  330. package/lib-esm/__tests__/BranchName.d.ts +1 -0
  331. package/lib-esm/__tests__/BranchName.js +28 -0
  332. package/lib-esm/__tests__/Breadcrumb.d.ts +1 -0
  333. package/lib-esm/__tests__/Breadcrumb.js +31 -0
  334. package/lib-esm/__tests__/BreadcrumbItem.d.ts +1 -0
  335. package/lib-esm/__tests__/BreadcrumbItem.js +41 -0
  336. package/lib-esm/__tests__/Button.d.ts +1 -0
  337. package/lib-esm/__tests__/Button.js +141 -0
  338. package/lib-esm/__tests__/Caret.d.ts +1 -0
  339. package/lib-esm/__tests__/Caret.js +42 -0
  340. package/lib-esm/__tests__/CircleBadge.d.ts +1 -0
  341. package/lib-esm/__tests__/CircleBadge.js +73 -0
  342. package/lib-esm/__tests__/CircleOcticon.d.ts +1 -0
  343. package/lib-esm/__tests__/CircleOcticon.js +61 -0
  344. package/lib-esm/__tests__/CounterLabel.d.ts +1 -0
  345. package/lib-esm/__tests__/CounterLabel.js +49 -0
  346. package/lib-esm/__tests__/Details.d.ts +1 -0
  347. package/lib-esm/__tests__/Details.js +109 -0
  348. package/lib-esm/__tests__/Dialog.d.ts +1 -0
  349. package/lib-esm/__tests__/Dialog.js +174 -0
  350. package/lib-esm/__tests__/Dropdown.d.ts +1 -0
  351. package/lib-esm/__tests__/Dropdown.js +59 -0
  352. package/lib-esm/__tests__/DropdownMenu.d.ts +1 -0
  353. package/lib-esm/__tests__/DropdownMenu.js +139 -0
  354. package/lib-esm/__tests__/FilterList.d.ts +1 -0
  355. package/lib-esm/__tests__/FilterList.js +28 -0
  356. package/lib-esm/__tests__/FilterListItem.d.ts +1 -0
  357. package/lib-esm/__tests__/FilterListItem.js +38 -0
  358. package/lib-esm/__tests__/FilteredSearch.d.ts +1 -0
  359. package/lib-esm/__tests__/FilteredSearch.js +28 -0
  360. package/lib-esm/__tests__/Flash.d.ts +1 -0
  361. package/lib-esm/__tests__/Flash.js +53 -0
  362. package/lib-esm/__tests__/Flex.d.ts +1 -0
  363. package/lib-esm/__tests__/Flex.js +66 -0
  364. package/lib-esm/__tests__/FormGroup.d.ts +1 -0
  365. package/lib-esm/__tests__/FormGroup.js +47 -0
  366. package/lib-esm/__tests__/Grid.d.ts +1 -0
  367. package/lib-esm/__tests__/Grid.js +96 -0
  368. package/lib-esm/__tests__/Header.d.ts +1 -0
  369. package/lib-esm/__tests__/Header.js +52 -0
  370. package/lib-esm/__tests__/Heading.d.ts +1 -0
  371. package/lib-esm/__tests__/Heading.js +101 -0
  372. package/lib-esm/__tests__/Label.d.ts +1 -0
  373. package/lib-esm/__tests__/Label.js +38 -0
  374. package/lib-esm/__tests__/LabelGroup.d.ts +1 -0
  375. package/lib-esm/__tests__/LabelGroup.js +28 -0
  376. package/lib-esm/__tests__/Link.d.ts +1 -0
  377. package/lib-esm/__tests__/Link.js +62 -0
  378. package/lib-esm/__tests__/Overlay.d.ts +1 -0
  379. package/lib-esm/__tests__/Overlay.js +123 -0
  380. package/lib-esm/__tests__/Pagehead.d.ts +1 -0
  381. package/lib-esm/__tests__/Pagehead.js +28 -0
  382. package/lib-esm/__tests__/Pagination/Pagination.d.ts +1 -0
  383. package/lib-esm/__tests__/Pagination/Pagination.js +37 -0
  384. package/lib-esm/__tests__/Pagination/PaginationModel.d.ts +1 -0
  385. package/lib-esm/__tests__/Pagination/PaginationModel.js +182 -0
  386. package/lib-esm/__tests__/PointerBox.d.ts +1 -0
  387. package/lib-esm/__tests__/PointerBox.js +38 -0
  388. package/lib-esm/__tests__/Popover.d.ts +1 -0
  389. package/lib-esm/__tests__/Popover.js +56 -0
  390. package/lib-esm/__tests__/Portal.d.ts +1 -0
  391. package/lib-esm/__tests__/Portal.js +104 -0
  392. package/lib-esm/__tests__/Position.d.ts +1 -0
  393. package/lib-esm/__tests__/Position.js +138 -0
  394. package/lib-esm/__tests__/ProgressBar.d.ts +1 -0
  395. package/lib-esm/__tests__/ProgressBar.js +60 -0
  396. package/lib-esm/__tests__/SelectMenu.d.ts +1 -0
  397. package/lib-esm/__tests__/SelectMenu.js +145 -0
  398. package/lib-esm/__tests__/SelectPanel.d.ts +1 -0
  399. package/lib-esm/__tests__/SelectPanel.js +67 -0
  400. package/lib-esm/__tests__/SideNav.d.ts +1 -0
  401. package/lib-esm/__tests__/SideNav.js +63 -0
  402. package/lib-esm/__tests__/Spinner.d.ts +1 -0
  403. package/lib-esm/__tests__/Spinner.js +45 -0
  404. package/lib-esm/__tests__/StateLabel.d.ts +1 -0
  405. package/lib-esm/__tests__/StateLabel.js +63 -0
  406. package/lib-esm/__tests__/StyledOcticon.d.ts +1 -0
  407. package/lib-esm/__tests__/StyledOcticon.js +31 -0
  408. package/lib-esm/__tests__/SubNav.d.ts +1 -0
  409. package/lib-esm/__tests__/SubNav.js +52 -0
  410. package/lib-esm/__tests__/SubNavLink.d.ts +1 -0
  411. package/lib-esm/__tests__/SubNavLink.js +41 -0
  412. package/lib-esm/__tests__/TabNav.d.ts +1 -0
  413. package/lib-esm/__tests__/TabNav.js +42 -0
  414. package/lib-esm/__tests__/Text.d.ts +1 -0
  415. package/lib-esm/__tests__/Text.js +95 -0
  416. package/lib-esm/__tests__/TextInput.d.ts +1 -0
  417. package/lib-esm/__tests__/TextInput.js +70 -0
  418. package/lib-esm/__tests__/ThemeProvider.d.ts +1 -0
  419. package/lib-esm/__tests__/ThemeProvider.js +408 -0
  420. package/lib-esm/__tests__/Timeline.d.ts +1 -0
  421. package/lib-esm/__tests__/Timeline.js +69 -0
  422. package/lib-esm/__tests__/Tooltip.d.ts +1 -0
  423. package/lib-esm/__tests__/Tooltip.js +61 -0
  424. package/lib-esm/__tests__/Truncate.d.ts +1 -0
  425. package/lib-esm/__tests__/Truncate.js +55 -0
  426. package/lib-esm/__tests__/UnderlineNav.d.ts +1 -0
  427. package/lib-esm/__tests__/UnderlineNav.js +62 -0
  428. package/lib-esm/__tests__/UnderlineNavLink.d.ts +1 -0
  429. package/lib-esm/__tests__/UnderlineNavLink.js +43 -0
  430. package/lib-esm/__tests__/behaviors/anchoredPosition.d.ts +1 -0
  431. package/lib-esm/__tests__/behaviors/anchoredPosition.js +388 -0
  432. package/lib-esm/__tests__/behaviors/focusTrap.d.ts +1 -0
  433. package/lib-esm/__tests__/behaviors/focusTrap.js +227 -0
  434. package/lib-esm/__tests__/behaviors/focusZone.d.ts +1 -0
  435. package/lib-esm/__tests__/behaviors/focusZone.js +487 -0
  436. package/lib-esm/__tests__/behaviors/iterateFocusableElements.d.ts +1 -0
  437. package/lib-esm/__tests__/behaviors/iterateFocusableElements.js +48 -0
  438. package/lib-esm/__tests__/filterObject.d.ts +1 -0
  439. package/lib-esm/__tests__/filterObject.js +27 -0
  440. package/lib-esm/__tests__/hooks/useAnchoredPosition.d.ts +1 -0
  441. package/lib-esm/__tests__/hooks/useAnchoredPosition.js +46 -0
  442. package/lib-esm/__tests__/hooks/useOnEscapePress.d.ts +1 -0
  443. package/lib-esm/__tests__/hooks/useOnEscapePress.js +23 -0
  444. package/lib-esm/__tests__/hooks/useOnOutsideClick.d.ts +1 -0
  445. package/lib-esm/__tests__/hooks/useOnOutsideClick.js +68 -0
  446. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.d.ts +1 -0
  447. package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.js +52 -0
  448. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.d.ts +1 -0
  449. package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.js +36 -0
  450. package/lib-esm/__tests__/theme.d.ts +1 -0
  451. package/lib-esm/__tests__/theme.js +33 -0
  452. package/lib-esm/__tests__/themeGet.d.ts +1 -0
  453. package/lib-esm/__tests__/themeGet.js +22 -0
  454. package/lib-esm/__tests__/useSafeTimeout.d.ts +1 -0
  455. package/lib-esm/__tests__/useSafeTimeout.js +39 -0
  456. package/lib-esm/stories/ActionList.stories.js +334 -0
  457. package/lib-esm/stories/ActionMenu.stories.js +293 -0
  458. package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
  459. package/lib-esm/stories/AvatarStack.stories.js +32 -0
  460. package/lib-esm/stories/Button.stories.js +78 -0
  461. package/lib-esm/stories/ConfirmationDialog.stories.js +86 -0
  462. package/lib-esm/stories/Dialog.stories.js +240 -0
  463. package/lib-esm/stories/DropdownMenu.stories.js +94 -0
  464. package/lib-esm/stories/Overlay.stories.js +154 -0
  465. package/lib-esm/stories/Portal.stories.js +68 -0
  466. package/lib-esm/stories/SelectPanel.stories.js +284 -0
  467. package/lib-esm/stories/ThemeProvider.stories.js +83 -0
  468. package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
  469. package/lib-esm/stories/useFocusTrap.stories.js +309 -0
  470. package/lib-esm/stories/useFocusZone.stories.js +554 -0
  471. package/migrating.md +250 -0
  472. package/now.json +17 -0
  473. package/package-lock.json +28661 -0
  474. package/package.json +2 -2
  475. package/rollup.config.js +36 -0
  476. package/script/build +19 -0
  477. package/script/setup +12 -0
  478. package/src/ActionList/Divider.tsx +25 -0
  479. package/src/ActionList/Group.tsx +45 -0
  480. package/src/ActionList/Header.tsx +74 -0
  481. package/src/ActionList/Item.tsx +460 -0
  482. package/src/ActionList/List.tsx +253 -0
  483. package/src/ActionList/index.ts +21 -0
  484. package/src/ActionMenu.tsx +106 -0
  485. package/src/AnchoredOverlay/AnchoredOverlay.tsx +180 -0
  486. package/src/AnchoredOverlay/index.ts +2 -0
  487. package/src/Avatar.tsx +46 -0
  488. package/src/AvatarPair.tsx +35 -0
  489. package/src/AvatarStack.tsx +161 -0
  490. package/src/BaseStyles.tsx +53 -0
  491. package/src/BorderBox.tsx +18 -0
  492. package/src/Box.tsx +54 -0
  493. package/src/BranchName.tsx +19 -0
  494. package/src/Breadcrumb.tsx +87 -0
  495. package/src/Button/Button.tsx +40 -0
  496. package/src/Button/ButtonBase.tsx +43 -0
  497. package/src/Button/ButtonClose.tsx +40 -0
  498. package/src/Button/ButtonDanger.tsx +43 -0
  499. package/src/Button/ButtonGroup.tsx +55 -0
  500. package/src/Button/ButtonInvisible.tsx +27 -0
  501. package/src/Button/ButtonOutline.tsx +43 -0
  502. package/src/Button/ButtonPrimary.tsx +41 -0
  503. package/src/Button/ButtonStyles.tsx +36 -0
  504. package/src/Button/ButtonTableList.tsx +58 -0
  505. package/src/Button/index.ts +16 -0
  506. package/src/Caret.tsx +133 -0
  507. package/src/CircleBadge.tsx +55 -0
  508. package/src/CircleOcticon.tsx +37 -0
  509. package/src/CounterLabel.tsx +52 -0
  510. package/src/Details.tsx +23 -0
  511. package/src/Dialog/ConfirmationDialog.tsx +184 -0
  512. package/src/Dialog/Dialog.tsx +419 -0
  513. package/src/Dialog.tsx +149 -0
  514. package/src/Dropdown.tsx +158 -0
  515. package/src/DropdownMenu/DropdownButton.tsx +15 -0
  516. package/src/DropdownMenu/DropdownMenu.tsx +115 -0
  517. package/src/DropdownMenu/index.ts +4 -0
  518. package/src/DropdownStyles.ts +128 -0
  519. package/src/FilterList.tsx +81 -0
  520. package/src/FilteredActionList/FilteredActionList.tsx +152 -0
  521. package/src/FilteredActionList/index.ts +2 -0
  522. package/src/FilteredSearch.tsx +28 -0
  523. package/src/Flash.tsx +77 -0
  524. package/src/Flex.tsx +15 -0
  525. package/src/FormGroup.tsx +27 -0
  526. package/src/Grid.tsx +15 -0
  527. package/src/Header.tsx +84 -0
  528. package/src/Heading.tsx +21 -0
  529. package/src/Label.tsx +75 -0
  530. package/src/LabelGroup.tsx +18 -0
  531. package/src/Link.tsx +46 -0
  532. package/src/Overlay.tsx +194 -0
  533. package/src/Pagehead.tsx +17 -0
  534. package/src/Pagination/Pagination.tsx +214 -0
  535. package/src/Pagination/index.ts +4 -0
  536. package/src/Pagination/model.tsx +187 -0
  537. package/src/PointerBox.tsx +31 -0
  538. package/src/Popover.tsx +236 -0
  539. package/src/Portal/Portal.tsx +96 -0
  540. package/src/Portal/index.ts +5 -0
  541. package/src/Position.tsx +63 -0
  542. package/src/ProgressBar.tsx +52 -0
  543. package/src/SelectMenu/SelectMenu.tsx +125 -0
  544. package/src/SelectMenu/SelectMenuContext.tsx +9 -0
  545. package/src/SelectMenu/SelectMenuDivider.tsx +25 -0
  546. package/src/SelectMenu/SelectMenuFilter.tsx +51 -0
  547. package/src/SelectMenu/SelectMenuFooter.tsx +28 -0
  548. package/src/SelectMenu/SelectMenuHeader.tsx +50 -0
  549. package/src/SelectMenu/SelectMenuItem.tsx +137 -0
  550. package/src/SelectMenu/SelectMenuList.tsx +42 -0
  551. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +24 -0
  552. package/src/SelectMenu/SelectMenuModal.tsx +121 -0
  553. package/src/SelectMenu/SelectMenuTab.tsx +88 -0
  554. package/src/SelectMenu/SelectMenuTabPanel.tsx +30 -0
  555. package/src/SelectMenu/SelectMenuTabs.tsx +44 -0
  556. package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
  557. package/src/SelectMenu/index.ts +15 -0
  558. package/src/SelectPanel/SelectPanel.tsx +173 -0
  559. package/src/SelectPanel/index.ts +2 -0
  560. package/src/SideNav.tsx +193 -0
  561. package/src/Spinner.tsx +59 -0
  562. package/src/StateLabel.tsx +110 -0
  563. package/src/StyledOcticon.tsx +24 -0
  564. package/src/SubNav.tsx +129 -0
  565. package/src/TabNav.tsx +77 -0
  566. package/src/Text.tsx +13 -0
  567. package/src/TextInput.tsx +183 -0
  568. package/src/ThemeProvider.tsx +176 -0
  569. package/src/Timeline.tsx +141 -0
  570. package/src/Tooltip.tsx +263 -0
  571. package/src/Truncate.tsx +36 -0
  572. package/src/UnderlineNav.tsx +110 -0
  573. package/src/__tests__/.eslintrc.json +11 -0
  574. package/src/__tests__/ActionList.tsx +49 -0
  575. package/src/__tests__/ActionMenu.tsx +138 -0
  576. package/src/__tests__/AnchoredOverlay.tsx +151 -0
  577. package/src/__tests__/Avatar.tsx +45 -0
  578. package/src/__tests__/AvatarStack.tsx +45 -0
  579. package/src/__tests__/BorderBox.tsx +44 -0
  580. package/src/__tests__/Box.tsx +43 -0
  581. package/src/__tests__/BranchName.tsx +27 -0
  582. package/src/__tests__/Breadcrumb.tsx +31 -0
  583. package/src/__tests__/BreadcrumbItem.tsx +32 -0
  584. package/src/__tests__/Button.tsx +129 -0
  585. package/src/__tests__/Caret.tsx +36 -0
  586. package/src/__tests__/CircleBadge.tsx +69 -0
  587. package/src/__tests__/CircleOcticon.tsx +52 -0
  588. package/src/__tests__/CounterLabel.tsx +51 -0
  589. package/src/__tests__/Details.tsx +116 -0
  590. package/src/__tests__/Dialog.tsx +157 -0
  591. package/src/__tests__/Dropdown.tsx +57 -0
  592. package/src/__tests__/DropdownMenu.tsx +138 -0
  593. package/src/__tests__/FilterList.tsx +27 -0
  594. package/src/__tests__/FilterListItem.tsx +32 -0
  595. package/src/__tests__/FilteredSearch.tsx +27 -0
  596. package/src/__tests__/Flash.tsx +46 -0
  597. package/src/__tests__/Flex.tsx +59 -0
  598. package/src/__tests__/FormGroup.tsx +39 -0
  599. package/src/__tests__/Grid.tsx +83 -0
  600. package/src/__tests__/Header.tsx +50 -0
  601. package/src/__tests__/Heading.tsx +92 -0
  602. package/src/__tests__/Label.tsx +35 -0
  603. package/src/__tests__/LabelGroup.tsx +31 -0
  604. package/src/__tests__/Link.tsx +48 -0
  605. package/src/__tests__/Overlay.tsx +103 -0
  606. package/src/__tests__/Pagehead.tsx +24 -0
  607. package/src/__tests__/Pagination/Pagination.tsx +31 -0
  608. package/src/__tests__/Pagination/PaginationModel.tsx +133 -0
  609. package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +184 -0
  610. package/src/__tests__/PointerBox.tsx +35 -0
  611. package/src/__tests__/Popover.tsx +69 -0
  612. package/src/__tests__/Portal.tsx +103 -0
  613. package/src/__tests__/Position.tsx +118 -0
  614. package/src/__tests__/ProgressBar.tsx +41 -0
  615. package/src/__tests__/SelectMenu.tsx +142 -0
  616. package/src/__tests__/SelectPanel.tsx +65 -0
  617. package/src/__tests__/SideNav.tsx +63 -0
  618. package/src/__tests__/Spinner.tsx +44 -0
  619. package/src/__tests__/StateLabel.tsx +50 -0
  620. package/src/__tests__/StyledOcticon.tsx +28 -0
  621. package/src/__tests__/SubNav.tsx +51 -0
  622. package/src/__tests__/SubNavLink.tsx +32 -0
  623. package/src/__tests__/TabNav.tsx +33 -0
  624. package/src/__tests__/Text.tsx +79 -0
  625. package/src/__tests__/TextInput.tsx +50 -0
  626. package/src/__tests__/ThemeProvider.tsx +441 -0
  627. package/src/__tests__/Timeline.tsx +59 -0
  628. package/src/__tests__/Tooltip.tsx +53 -0
  629. package/src/__tests__/Truncate.tsx +45 -0
  630. package/src/__tests__/UnderlineNav.tsx +59 -0
  631. package/src/__tests__/UnderlineNavLink.tsx +32 -0
  632. package/src/__tests__/__snapshots__/ActionList.tsx.snap +27 -0
  633. package/src/__tests__/__snapshots__/ActionMenu.tsx.snap +80 -0
  634. package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap +332 -0
  635. package/src/__tests__/__snapshots__/Avatar.tsx.snap +19 -0
  636. package/src/__tests__/__snapshots__/AvatarStack.tsx.snap +377 -0
  637. package/src/__tests__/__snapshots__/BorderBox.tsx.snap +14 -0
  638. package/src/__tests__/__snapshots__/Box.tsx.snap +201 -0
  639. package/src/__tests__/__snapshots__/BranchName.tsx.snap +17 -0
  640. package/src/__tests__/__snapshots__/Breadcrumb.tsx.snap +29 -0
  641. package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +79 -0
  642. package/src/__tests__/__snapshots__/Button.tsx.snap +832 -0
  643. package/src/__tests__/__snapshots__/Caret.tsx.snap +373 -0
  644. package/src/__tests__/__snapshots__/CircleBadge.tsx.snap +141 -0
  645. package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +64 -0
  646. package/src/__tests__/__snapshots__/CounterLabel.tsx.snap +22 -0
  647. package/src/__tests__/__snapshots__/Details.tsx.snap +15 -0
  648. package/src/__tests__/__snapshots__/Dialog.tsx.snap +200 -0
  649. package/src/__tests__/__snapshots__/Dropdown.tsx.snap +249 -0
  650. package/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +106 -0
  651. package/src/__tests__/__snapshots__/FilterList.tsx.snap +13 -0
  652. package/src/__tests__/__snapshots__/FilterListItem.tsx.snap +80 -0
  653. package/src/__tests__/__snapshots__/FilteredSearch.tsx.snap +32 -0
  654. package/src/__tests__/__snapshots__/Flash.tsx.snap +32 -0
  655. package/src/__tests__/__snapshots__/Flex.tsx.snap +130 -0
  656. package/src/__tests__/__snapshots__/FormGroup.tsx.snap +25 -0
  657. package/src/__tests__/__snapshots__/Grid.tsx.snap +178 -0
  658. package/src/__tests__/__snapshots__/Header.tsx.snap +79 -0
  659. package/src/__tests__/__snapshots__/Heading.tsx.snap +13 -0
  660. package/src/__tests__/__snapshots__/Label.tsx.snap +74 -0
  661. package/src/__tests__/__snapshots__/LabelGroup.tsx.snap +15 -0
  662. package/src/__tests__/__snapshots__/Link.tsx.snap +213 -0
  663. package/src/__tests__/__snapshots__/Pagehead.tsx.snap +15 -0
  664. package/src/__tests__/__snapshots__/PointerBox.tsx.snap +174 -0
  665. package/src/__tests__/__snapshots__/Popover.tsx.snap +4687 -0
  666. package/src/__tests__/__snapshots__/Position.tsx.snap +44 -0
  667. package/src/__tests__/__snapshots__/ProgressBar.tsx.snap +53 -0
  668. package/src/__tests__/__snapshots__/SelectMenu.tsx.snap +469 -0
  669. package/src/__tests__/__snapshots__/SelectPanel.tsx.snap +123 -0
  670. package/src/__tests__/__snapshots__/SideNav.tsx.snap +143 -0
  671. package/src/__tests__/__snapshots__/Spinner.tsx.snap +33 -0
  672. package/src/__tests__/__snapshots__/StateLabel.tsx.snap +409 -0
  673. package/src/__tests__/__snapshots__/StyledOcticon.tsx.snap +25 -0
  674. package/src/__tests__/__snapshots__/SubNav.tsx.snap +44 -0
  675. package/src/__tests__/__snapshots__/SubNavLink.tsx.snap +199 -0
  676. package/src/__tests__/__snapshots__/TabNav.tsx.snap +58 -0
  677. package/src/__tests__/__snapshots__/Text.tsx.snap +7 -0
  678. package/src/__tests__/__snapshots__/TextInput.tsx.snap +440 -0
  679. package/src/__tests__/__snapshots__/ThemeProvider.tsx.snap +15 -0
  680. package/src/__tests__/__snapshots__/Timeline.tsx.snap +159 -0
  681. package/src/__tests__/__snapshots__/Tooltip.tsx.snap +227 -0
  682. package/src/__tests__/__snapshots__/Truncate.tsx.snap +17 -0
  683. package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap +59 -0
  684. package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap +130 -0
  685. package/src/__tests__/behaviors/anchoredPosition.ts +295 -0
  686. package/src/__tests__/behaviors/focusTrap.tsx +236 -0
  687. package/src/__tests__/behaviors/focusZone.tsx +549 -0
  688. package/src/__tests__/behaviors/iterateFocusableElements.tsx +61 -0
  689. package/src/__tests__/filterObject.ts +54 -0
  690. package/src/__tests__/hooks/useAnchoredPosition.tsx +31 -0
  691. package/src/__tests__/hooks/useOnEscapePress.tsx +16 -0
  692. package/src/__tests__/hooks/useOnOutsideClick.tsx +48 -0
  693. package/src/__tests__/hooks/useOpenAndCloseFocus.tsx +48 -0
  694. package/src/__tests__/hooks/useProvidedStateOrCreate.tsx +39 -0
  695. package/src/__tests__/theme.ts +41 -0
  696. package/src/__tests__/themeGet.ts +15 -0
  697. package/src/__tests__/useSafeTimeout.tsx +36 -0
  698. package/src/behaviors/anchoredPosition.ts +442 -0
  699. package/src/behaviors/focusTrap.ts +184 -0
  700. package/src/behaviors/focusZone.ts +713 -0
  701. package/src/constants.ts +62 -0
  702. package/src/hooks/index.ts +11 -0
  703. package/src/hooks/useAnchoredPosition.ts +53 -0
  704. package/src/hooks/useCombinedRefs.ts +40 -0
  705. package/src/hooks/useDetails.tsx +54 -0
  706. package/src/hooks/useDialog.ts +121 -0
  707. package/src/hooks/useFocusTrap.ts +80 -0
  708. package/src/hooks/useFocusZone.ts +64 -0
  709. package/src/hooks/useOnEscapePress.ts +63 -0
  710. package/src/hooks/useOnOutsideClick.tsx +82 -0
  711. package/src/hooks/useOpenAndCloseFocus.ts +27 -0
  712. package/src/hooks/useOverlay.tsx +32 -0
  713. package/src/hooks/useProvidedRefOrCreate.ts +14 -0
  714. package/src/hooks/useProvidedStateOrCreate.ts +27 -0
  715. package/src/hooks/useRenderForcingRef.ts +22 -0
  716. package/src/hooks/useResizeObserver.ts +11 -0
  717. package/src/hooks/useSafeTimeout.ts +38 -0
  718. package/src/hooks/useScrollFlash.ts +21 -0
  719. package/src/index.ts +165 -0
  720. package/src/polyfills/eventListenerSignal.ts +66 -0
  721. package/src/stories/ActionList.stories.tsx +364 -0
  722. package/src/stories/ActionMenu.stories.tsx +322 -0
  723. package/src/stories/AnchoredOverlay.stories.tsx +117 -0
  724. package/src/stories/AvatarStack.stories.tsx +37 -0
  725. package/src/stories/Button.stories.tsx +88 -0
  726. package/src/stories/ConfirmationDialog.stories.tsx +105 -0
  727. package/src/stories/Dialog.stories.tsx +240 -0
  728. package/src/stories/DropdownMenu.stories.tsx +84 -0
  729. package/src/stories/Overlay.stories.tsx +186 -0
  730. package/src/stories/Portal.stories.tsx +109 -0
  731. package/src/stories/SelectPanel.stories.tsx +300 -0
  732. package/src/stories/ThemeProvider.stories.tsx +104 -0
  733. package/src/stories/useAnchoredPosition.stories.tsx +320 -0
  734. package/src/stories/useFocusTrap.stories.tsx +400 -0
  735. package/src/stories/useFocusZone.stories.tsx +663 -0
  736. package/src/sx.ts +9 -0
  737. package/src/theme-preval.js +136 -0
  738. package/src/theme.ts +3 -0
  739. package/src/utils/deprecate.tsx +73 -0
  740. package/src/utils/isNumeric.tsx +4 -0
  741. package/src/utils/iterateFocusableElements.ts +121 -0
  742. package/src/utils/ssr.tsx +1 -0
  743. package/src/utils/test-deprecations.tsx +19 -0
  744. package/src/utils/test-helpers.tsx +7 -0
  745. package/src/utils/test-matchers.tsx +109 -0
  746. package/src/utils/testing.tsx +243 -0
  747. package/src/utils/theme.js +64 -0
  748. package/src/utils/types.ts +90 -0
  749. package/src/utils/uniqueId.ts +6 -0
  750. package/src/utils/userAgent.ts +7 -0
  751. package/stats.html +3279 -0
  752. package/tsconfig.build.json +7 -0
  753. package/tsconfig.json +20 -0
package/src/__tests__/__snapshots__/Popover.tsx.snap ADDED
@@ -0,0 +1,4687 @@
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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 #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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: #d0d7de;
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
+ `;