@sproutsocial/racine 12.20.0 → 12.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (621) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +46 -44
  3. package/__flow__/Avatar/index.js +26 -26
  4. package/__flow__/Avatar/index.stories.js +8 -8
  5. package/__flow__/Avatar/index.test.js +13 -13
  6. package/__flow__/Badge/constants.js +14 -14
  7. package/__flow__/Badge/index.js +18 -18
  8. package/__flow__/Badge/index.stories.js +8 -8
  9. package/__flow__/Badge/index.test.js +43 -43
  10. package/__flow__/Badge/styles.js +13 -9
  11. package/__flow__/Banner/index.js +21 -21
  12. package/__flow__/Banner/index.stories.js +56 -68
  13. package/__flow__/Banner/index.test.js +32 -34
  14. package/__flow__/Banner/styles.js +4 -4
  15. package/__flow__/Box/index.js +4 -4
  16. package/__flow__/Box/index.stories.js +58 -51
  17. package/__flow__/Box/index.test.js +7 -7
  18. package/__flow__/Box/styles.js +6 -6
  19. package/__flow__/Breadcrumb/index.js +9 -13
  20. package/__flow__/Breadcrumb/index.stories.js +14 -14
  21. package/__flow__/Breadcrumb/index.test.js +20 -20
  22. package/__flow__/Breadcrumb/styles.js +5 -5
  23. package/__flow__/Button/index.js +23 -23
  24. package/__flow__/Button/index.stories.js +34 -34
  25. package/__flow__/Button/styles.js +11 -11
  26. package/__flow__/Card/index.js +7 -7
  27. package/__flow__/Card/index.stories.js +14 -14
  28. package/__flow__/Card/styles.js +7 -7
  29. package/__flow__/CharacterCounter/index.js +7 -7
  30. package/__flow__/CharacterCounter/index.stories.js +25 -26
  31. package/__flow__/CharacterCounter/index.test.js +11 -11
  32. package/__flow__/CharacterCounter/styles.js +3 -3
  33. package/__flow__/ChartLegend/index.js +7 -7
  34. package/__flow__/ChartLegend/index.stories.js +22 -22
  35. package/__flow__/ChartLegend/index.test.js +27 -27
  36. package/__flow__/ChartLegend/styles.js +7 -7
  37. package/__flow__/Checkbox/index.js +10 -10
  38. package/__flow__/Checkbox/index.stories.js +24 -24
  39. package/__flow__/Checkbox/index.test.js +25 -25
  40. package/__flow__/Checkbox/styles.js +27 -28
  41. package/__flow__/Collapsible/index.js +15 -15
  42. package/__flow__/Collapsible/index.stories.js +13 -13
  43. package/__flow__/Collapsible/index.test.js +27 -27
  44. package/__flow__/Collapsible/styles.js +5 -5
  45. package/__flow__/DatePicker/DateRangePicker.js +5 -8
  46. package/__flow__/DatePicker/DateRangePicker.stories.js +19 -19
  47. package/__flow__/DatePicker/DateRangePicker.test.js +21 -21
  48. package/__flow__/DatePicker/SingleDatePicker.js +6 -9
  49. package/__flow__/DatePicker/SingleDatePicker.stories.js +10 -10
  50. package/__flow__/DatePicker/SingleDatePicker.test.js +21 -23
  51. package/__flow__/DatePicker/StatefulDateRangePicker.js +6 -6
  52. package/__flow__/DatePicker/StatefulSingleDatePicker.js +3 -3
  53. package/__flow__/DatePicker/common.js +13 -13
  54. package/__flow__/DatePicker/index.js +3 -3
  55. package/__flow__/DatePicker/styles.js +42 -42
  56. package/__flow__/Drawer/SlideTransition.js +10 -10
  57. package/__flow__/Drawer/index.js +29 -29
  58. package/__flow__/Drawer/index.stories.js +58 -141
  59. package/__flow__/Drawer/index.test.js +28 -28
  60. package/__flow__/Drawer/styles.js +4 -4
  61. package/__flow__/EmptyState/index.js +5 -5
  62. package/__flow__/EmptyState/index.stories.js +10 -10
  63. package/__flow__/EmptyState/index.test.js +27 -27
  64. package/__flow__/EnumIllustrationNames.js +1 -1
  65. package/__flow__/Fieldset/index.js +14 -14
  66. package/__flow__/Fieldset/index.stories.js +19 -20
  67. package/__flow__/Fieldset/index.test.js +14 -14
  68. package/__flow__/Fieldset/styles.js +5 -5
  69. package/__flow__/FormField/index.js +14 -14
  70. package/__flow__/FormField/index.stories.js +31 -21
  71. package/__flow__/FormField/index.test.js +19 -19
  72. package/__flow__/Icon/deprecatedIcons.js +36 -36
  73. package/__flow__/Icon/index.js +17 -17
  74. package/__flow__/Icon/index.stories.js +30 -30
  75. package/__flow__/Icon/index.test.js +15 -15
  76. package/__flow__/Icon/styles.js +12 -12
  77. package/__flow__/IllustrationViewBoxes.js +1 -1
  78. package/__flow__/Image/index.js +6 -7
  79. package/__flow__/Image/index.stories.js +5 -5
  80. package/__flow__/Image/index.test.js +24 -24
  81. package/__flow__/Image/styles.js +6 -5
  82. package/__flow__/Indicator/index.js +7 -7
  83. package/__flow__/Indicator/index.stories.js +8 -14
  84. package/__flow__/Indicator/index.test.js +6 -6
  85. package/__flow__/Indicator/styles.js +6 -6
  86. package/__flow__/Input/index.js +37 -37
  87. package/__flow__/Input/index.stories.js +96 -189
  88. package/__flow__/Input/index.test.js +117 -117
  89. package/__flow__/Input/styles.js +13 -13
  90. package/__flow__/KeyboardKey/index.js +5 -5
  91. package/__flow__/KeyboardKey/index.stories.js +9 -12
  92. package/__flow__/KeyboardKey/index.test.js +7 -7
  93. package/__flow__/KeyboardKey/styles.js +4 -4
  94. package/__flow__/Label/index.js +6 -6
  95. package/__flow__/Label/index.stories.js +5 -7
  96. package/__flow__/Label/index.test.js +8 -8
  97. package/__flow__/Link/constants.js +4 -4
  98. package/__flow__/Link/index.js +11 -11
  99. package/__flow__/Link/index.stories.js +61 -102
  100. package/__flow__/Link/index.test.js +40 -40
  101. package/__flow__/Link/styles.js +6 -6
  102. package/__flow__/Listbox/index.js +16 -16
  103. package/__flow__/Listbox/index.stories.js +35 -35
  104. package/__flow__/Listbox/index.test.js +63 -65
  105. package/__flow__/Loader/index.js +12 -12
  106. package/__flow__/Loader/index.stories.js +10 -10
  107. package/__flow__/Loader/index.test.js +17 -17
  108. package/__flow__/Loader/styles.js +9 -13
  109. package/__flow__/LoaderButton/index.js +25 -25
  110. package/__flow__/LoaderButton/index.stories.js +7 -7
  111. package/__flow__/LoaderButton/index.test.js +15 -15
  112. package/__flow__/Menu/constants.js +8 -8
  113. package/__flow__/Menu/descendants.js +89 -80
  114. package/__flow__/Menu/hooks.js +22 -22
  115. package/__flow__/Menu/index.flow.js +13 -13
  116. package/__flow__/Menu/index.js +56 -60
  117. package/__flow__/Menu/index.stories.js +19 -19
  118. package/__flow__/Menu/index.test.js +22 -22
  119. package/__flow__/Menu/names.js +4945 -4945
  120. package/__flow__/Menu/styles.js +5 -5
  121. package/__flow__/Message/index.js +33 -33
  122. package/__flow__/Message/index.stories.js +18 -13
  123. package/__flow__/Message/index.test.js +6 -6
  124. package/__flow__/Message/styles.js +15 -15
  125. package/__flow__/Modal/index.js +19 -19
  126. package/__flow__/Modal/index.stories.js +43 -43
  127. package/__flow__/Modal/index.test.js +29 -29
  128. package/__flow__/Modal/styles.js +27 -32
  129. package/__flow__/Numeral/index.js +22 -22
  130. package/__flow__/Numeral/index.stories.js +74 -74
  131. package/__flow__/Numeral/styles.js +3 -3
  132. package/__flow__/Numeral/tests/A11y.test.js +7 -7
  133. package/__flow__/Numeral/tests/abbreviate.test.js +40 -40
  134. package/__flow__/Numeral/tests/currency.test.js +24 -24
  135. package/__flow__/Numeral/tests/defaults.test.js +20 -20
  136. package/__flow__/Numeral/tests/invalid.test.js +9 -9
  137. package/__flow__/Numeral/tests/locale.test.js +38 -38
  138. package/__flow__/Numeral/tests/precision.test.js +76 -76
  139. package/__flow__/Numeral/tests/testNumeral.js +11 -11
  140. package/__flow__/Numeral/tests/zero.test.js +8 -8
  141. package/__flow__/OverflowList/index.flow.js +2 -2
  142. package/__flow__/OverflowList/index.js +12 -12
  143. package/__flow__/OverflowList/index.stories.js +10 -10
  144. package/__flow__/OverflowList/index.test.js +25 -25
  145. package/__flow__/OverflowList/styles.js +5 -5
  146. package/__flow__/PartnerLogo/TypePartnerNames.js +37 -37
  147. package/__flow__/PartnerLogo/index.js +20 -20
  148. package/__flow__/PartnerLogo/index.stories.js +52 -52
  149. package/__flow__/PartnerLogo/styles.js +12 -12
  150. package/__flow__/Popout/index.js +66 -67
  151. package/__flow__/Popout/index.stories.js +101 -82
  152. package/__flow__/Popout/index.test.js +43 -43
  153. package/__flow__/Popout/styles.js +4 -5
  154. package/__flow__/Portal/index.js +9 -9
  155. package/__flow__/Portal/index.stories.js +12 -12
  156. package/__flow__/Radio/index.js +4 -4
  157. package/__flow__/Radio/index.stories.js +11 -11
  158. package/__flow__/Radio/index.test.js +12 -12
  159. package/__flow__/Radio/styles.js +15 -16
  160. package/__flow__/SegmentedControl/index.js +7 -7
  161. package/__flow__/SegmentedControl/index.stories.js +7 -7
  162. package/__flow__/SegmentedControl/index.test.js +29 -29
  163. package/__flow__/SegmentedControl/styles.js +10 -9
  164. package/__flow__/Select/index.js +10 -10
  165. package/__flow__/Select/index.stories.js +33 -69
  166. package/__flow__/Select/index.test.js +14 -14
  167. package/__flow__/Select/styles.js +16 -16
  168. package/__flow__/Skeleton/index.js +4 -4
  169. package/__flow__/Skeleton/index.stories.js +5 -5
  170. package/__flow__/SpotIllustration/illustrationNames.js +118 -117
  171. package/__flow__/SpotIllustration/index.js +15 -11
  172. package/__flow__/SpotIllustration/index.stories.js +18 -18
  173. package/__flow__/SpotIllustration/spotIllustrations/molecule.svg +14 -0
  174. package/__flow__/Stack/index.js +43 -33
  175. package/__flow__/Stack/index.stories.js +41 -91
  176. package/__flow__/Stack/index.test.js +16 -7
  177. package/__flow__/Switch/index.js +8 -8
  178. package/__flow__/Switch/index.stories.js +5 -5
  179. package/__flow__/Switch/index.test.js +25 -29
  180. package/__flow__/Switch/styles.js +13 -9
  181. package/__flow__/Table/index.js +17 -17
  182. package/__flow__/Table/index.stories.js +99 -99
  183. package/__flow__/Table/index.test.js +32 -32
  184. package/__flow__/Table/styles.js +4 -4
  185. package/__flow__/TableCell/index.js +8 -7
  186. package/__flow__/TableCell/index.stories.js +20 -23
  187. package/__flow__/TableCell/index.test.js +11 -11
  188. package/__flow__/TableCell/styles.js +4 -5
  189. package/__flow__/TableHeaderCell/index.js +14 -14
  190. package/__flow__/TableHeaderCell/index.stories.js +35 -30
  191. package/__flow__/TableHeaderCell/index.test.js +11 -11
  192. package/__flow__/TableHeaderCell/styles.js +4 -4
  193. package/__flow__/TableRowAccordion/index.js +8 -8
  194. package/__flow__/TableRowAccordion/index.stories.js +36 -36
  195. package/__flow__/TableRowAccordion/index.test.js +28 -30
  196. package/__flow__/TableRowAccordion/styles.js +11 -7
  197. package/__flow__/Tabs/index.js +11 -11
  198. package/__flow__/Tabs/index.stories.js +28 -54
  199. package/__flow__/Tabs/index.test.js +54 -54
  200. package/__flow__/Tabs/styles.js +6 -7
  201. package/__flow__/Text/index.js +14 -14
  202. package/__flow__/Text/index.stories.js +84 -86
  203. package/__flow__/Text/index.test.js +29 -33
  204. package/__flow__/Text/styles.js +4 -4
  205. package/__flow__/Textarea/index.js +5 -5
  206. package/__flow__/Textarea/index.stories.js +54 -93
  207. package/__flow__/Textarea/index.test.js +30 -30
  208. package/__flow__/Textarea/styles.js +6 -6
  209. package/__flow__/ThemeProvider/index.js +4 -4
  210. package/__flow__/Toast/index.js +23 -23
  211. package/__flow__/Toast/index.stories.js +21 -21
  212. package/__flow__/Toast/styles.js +6 -6
  213. package/__flow__/ToggleHint/index.js +8 -8
  214. package/__flow__/ToggleHint/index.test.js +8 -8
  215. package/__flow__/ToggleHint/styles.js +8 -8
  216. package/__flow__/Token/index.js +10 -10
  217. package/__flow__/Token/index.stories.js +49 -54
  218. package/__flow__/Token/index.test.js +28 -28
  219. package/__flow__/Token/styles.js +11 -11
  220. package/__flow__/TokenInput/index.flow.js +1 -1
  221. package/__flow__/TokenInput/index.js +39 -39
  222. package/__flow__/TokenInput/index.stories.js +121 -128
  223. package/__flow__/TokenInput/styles.js +5 -5
  224. package/__flow__/TokenInput/tests/default/clicking.test.js +13 -13
  225. package/__flow__/TokenInput/tests/default/deleting.test.js +39 -39
  226. package/__flow__/TokenInput/tests/default/focusing.test.js +18 -18
  227. package/__flow__/TokenInput/tests/default/inputting.test.js +23 -23
  228. package/__flow__/TokenInput/tests/default/pasting.test.js +52 -52
  229. package/__flow__/TokenInput/tests/default/rendering.test.js +54 -54
  230. package/__flow__/TokenInput/util.js +4 -4
  231. package/__flow__/Tooltip/index.js +21 -21
  232. package/__flow__/Tooltip/index.stories.js +18 -18
  233. package/__flow__/Tooltip/index.test.js +54 -54
  234. package/__flow__/Tooltip/styles.js +4 -5
  235. package/__flow__/VisuallyHidden/index.js +3 -3
  236. package/__flow__/building-stories.stories.mdx +121 -0
  237. package/__flow__/dataviz/dataviz.stories.js +4 -4
  238. package/__flow__/dataviz/index.js +3 -3
  239. package/__flow__/index.js +72 -72
  240. package/__flow__/overview.stories.js +60 -0
  241. package/__flow__/setupTests.js +5 -5
  242. package/__flow__/systemProps/background.js +3 -3
  243. package/__flow__/systemProps/border.js +3 -3
  244. package/__flow__/systemProps/color.js +3 -3
  245. package/__flow__/systemProps/custom.js +3 -3
  246. package/__flow__/systemProps/flexbox.js +3 -3
  247. package/__flow__/systemProps/grid.js +3 -3
  248. package/__flow__/systemProps/index.js +14 -14
  249. package/__flow__/systemProps/layout.js +3 -3
  250. package/__flow__/systemProps/position.js +3 -3
  251. package/__flow__/systemProps/shadow.js +3 -3
  252. package/__flow__/systemProps/space.js +3 -7
  253. package/__flow__/systemProps/systemProps.js +14 -14
  254. package/__flow__/systemProps/tests/background.test.js +17 -17
  255. package/__flow__/systemProps/tests/border.test.js +61 -61
  256. package/__flow__/systemProps/tests/color.test.js +15 -15
  257. package/__flow__/systemProps/tests/custom.test.js +12 -12
  258. package/__flow__/systemProps/tests/flexbox.test.js +33 -33
  259. package/__flow__/systemProps/tests/grid.test.js +31 -31
  260. package/__flow__/systemProps/tests/layout.test.js +29 -29
  261. package/__flow__/systemProps/tests/position.test.js +19 -19
  262. package/__flow__/systemProps/tests/shadow.test.js +11 -11
  263. package/__flow__/systemProps/tests/space.test.js +11 -11
  264. package/__flow__/systemProps/tests/types.flow.js +18 -18
  265. package/__flow__/systemProps/tests/typography.test.js +21 -21
  266. package/__flow__/systemProps/tests/variant.test.js +9 -9
  267. package/__flow__/systemProps/types.flow.js +2 -2
  268. package/__flow__/systemProps/typography.js +4 -4
  269. package/__flow__/systemProps/variant.js +5 -5
  270. package/__flow__/themes/dark/dataviz-palette.js +21 -21
  271. package/__flow__/themes/dark/decorative-palettes.js +1 -1
  272. package/__flow__/themes/dark/theme.js +16 -16
  273. package/__flow__/themes/extendedThemes/README.md +1 -1
  274. package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +4 -4
  275. package/__flow__/themes/extendedThemes/sproutTheme/index.js +2 -2
  276. package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +4 -4
  277. package/__flow__/themes/light/dataviz-palette.js +21 -21
  278. package/__flow__/themes/light/decorative-palettes.js +1 -1
  279. package/__flow__/themes/light/literal-colors.js +133 -133
  280. package/__flow__/themes/light/theme.js +51 -51
  281. package/__flow__/types/system-props.flow.js +5 -5
  282. package/__flow__/types/theme.colors.flow.js +2 -2
  283. package/__flow__/types/theme.flow.js +5 -5
  284. package/__flow__/utils/a11yTest.js +1 -1
  285. package/__flow__/utils/chartColors.js +1 -1
  286. package/__flow__/utils/constants.js +1 -1
  287. package/__flow__/utils/dataQaLabelQueries.js +2 -2
  288. package/__flow__/utils/hooks.js +17 -17
  289. package/__flow__/utils/index.js +4 -4
  290. package/__flow__/utils/innerText.js +9 -9
  291. package/__flow__/utils/mixins.js +6 -6
  292. package/__flow__/utils/react-testing-library.js +6 -6
  293. package/__flow__/utils/responsiveProps/index.js +3 -3
  294. package/__flow__/utils/responsiveProps/index.test.js +8 -8
  295. package/__flow__/utils/system-props.js +3 -3
  296. package/__flow__/utils/useInteractiveColor.js +5 -5
  297. package/__flow__/writing-good-stories.stories.mdx +3 -0
  298. package/bin/racine-codemod.js +12 -12
  299. package/codemods/__tests__/migrate-2.x-to-3.x.test.js +2 -2
  300. package/codemods/migrate-2.x-to-3.x.js +29 -30
  301. package/commonjs/Avatar/index.js +33 -53
  302. package/commonjs/Badge/constants.js +18 -15
  303. package/commonjs/Badge/index.js +14 -28
  304. package/commonjs/Badge/styles.js +3 -9
  305. package/commonjs/Banner/index.js +16 -37
  306. package/commonjs/Banner/styles.js +0 -5
  307. package/commonjs/Box/index.js +2 -9
  308. package/commonjs/Box/styles.js +0 -4
  309. package/commonjs/Breadcrumb/index.js +13 -29
  310. package/commonjs/Breadcrumb/styles.js +1 -4
  311. package/commonjs/Button/index.js +29 -43
  312. package/commonjs/Button/styles.js +6 -15
  313. package/commonjs/Card/index.js +16 -26
  314. package/commonjs/Card/styles.js +1 -5
  315. package/commonjs/CharacterCounter/index.js +6 -23
  316. package/commonjs/CharacterCounter/styles.js +0 -5
  317. package/commonjs/ChartLegend/index.js +5 -20
  318. package/commonjs/ChartLegend/styles.js +2 -11
  319. package/commonjs/Checkbox/index.js +30 -53
  320. package/commonjs/Checkbox/styles.js +14 -35
  321. package/commonjs/Collapsible/index.js +31 -54
  322. package/commonjs/Collapsible/styles.js +3 -6
  323. package/commonjs/DatePicker/DateRangePicker.js +4 -17
  324. package/commonjs/DatePicker/SingleDatePicker.js +3 -17
  325. package/commonjs/DatePicker/StatefulDateRangePicker.js +16 -31
  326. package/commonjs/DatePicker/StatefulSingleDatePicker.js +7 -20
  327. package/commonjs/DatePicker/common.js +8 -22
  328. package/commonjs/DatePicker/index.js +0 -5
  329. package/commonjs/DatePicker/styles.js +8 -25
  330. package/commonjs/Drawer/SlideTransition.js +8 -18
  331. package/commonjs/Drawer/index.js +51 -90
  332. package/commonjs/Drawer/styles.js +0 -8
  333. package/commonjs/EmptyState/index.js +8 -20
  334. package/commonjs/Fieldset/index.js +15 -32
  335. package/commonjs/Fieldset/styles.js +2 -7
  336. package/commonjs/FormField/index.js +19 -36
  337. package/commonjs/Icon/deprecatedIcons.js +36 -36
  338. package/commonjs/Icon/index.js +19 -37
  339. package/commonjs/Icon/styles.js +7 -16
  340. package/commonjs/IllustrationViewBoxes.js +1 -0
  341. package/commonjs/Image/index.js +13 -41
  342. package/commonjs/Image/styles.js +1 -7
  343. package/commonjs/Indicator/index.js +8 -26
  344. package/commonjs/Indicator/styles.js +1 -7
  345. package/commonjs/Input/index.js +80 -119
  346. package/commonjs/Input/styles.js +9 -19
  347. package/commonjs/KeyboardKey/index.js +3 -20
  348. package/commonjs/KeyboardKey/styles.js +0 -4
  349. package/commonjs/Label/index.js +7 -27
  350. package/commonjs/Link/constants.js +3 -4
  351. package/commonjs/Link/index.js +16 -28
  352. package/commonjs/Link/styles.js +1 -8
  353. package/commonjs/Listbox/index.js +15 -36
  354. package/commonjs/Loader/index.js +15 -31
  355. package/commonjs/Loader/styles.js +2 -13
  356. package/commonjs/LoaderButton/index.js +26 -55
  357. package/commonjs/Menu/constants.js +9 -8
  358. package/commonjs/Menu/descendants.js +70 -105
  359. package/commonjs/Menu/hooks.js +23 -41
  360. package/commonjs/Menu/index.flow.js +0 -7
  361. package/commonjs/Menu/index.js +94 -164
  362. package/commonjs/Menu/names.js +1 -1
  363. package/commonjs/Menu/styles.js +0 -6
  364. package/commonjs/Message/index.js +37 -70
  365. package/commonjs/Message/styles.js +9 -24
  366. package/commonjs/Modal/index.js +31 -54
  367. package/commonjs/Modal/styles.js +17 -36
  368. package/commonjs/Numeral/index.js +39 -67
  369. package/commonjs/Numeral/styles.js +0 -3
  370. package/commonjs/Numeral/tests/testNumeral.js +13 -31
  371. package/commonjs/OverflowList/index.flow.js +0 -2
  372. package/commonjs/OverflowList/index.js +27 -41
  373. package/commonjs/OverflowList/styles.js +0 -7
  374. package/commonjs/PartnerLogo/index.js +19 -33
  375. package/commonjs/PartnerLogo/styles.js +7 -15
  376. package/commonjs/Popout/index.js +95 -127
  377. package/commonjs/Popout/styles.js +0 -5
  378. package/commonjs/Portal/index.js +8 -31
  379. package/commonjs/Radio/index.js +18 -42
  380. package/commonjs/Radio/styles.js +9 -21
  381. package/commonjs/SegmentedControl/index.js +17 -37
  382. package/commonjs/SegmentedControl/styles.js +2 -12
  383. package/commonjs/Select/index.js +24 -47
  384. package/commonjs/Select/styles.js +12 -24
  385. package/commonjs/Skeleton/index.js +0 -5
  386. package/commonjs/SpotIllustration/illustrationNames.js +1 -1
  387. package/commonjs/SpotIllustration/index.js +5 -11
  388. package/commonjs/Stack/index.js +27 -42
  389. package/commonjs/Switch/index.js +17 -42
  390. package/commonjs/Switch/styles.js +3 -11
  391. package/commonjs/Table/index.js +26 -50
  392. package/commonjs/Table/styles.js +0 -4
  393. package/commonjs/TableCell/index.js +12 -30
  394. package/commonjs/TableCell/styles.js +0 -5
  395. package/commonjs/TableHeaderCell/index.js +27 -56
  396. package/commonjs/TableHeaderCell/styles.js +0 -6
  397. package/commonjs/TableRowAccordion/index.js +12 -37
  398. package/commonjs/TableRowAccordion/styles.js +2 -9
  399. package/commonjs/Tabs/index.js +16 -66
  400. package/commonjs/Tabs/styles.js +2 -11
  401. package/commonjs/Text/index.js +12 -25
  402. package/commonjs/Text/styles.js +1 -6
  403. package/commonjs/Textarea/index.js +31 -55
  404. package/commonjs/Textarea/styles.js +2 -9
  405. package/commonjs/ThemeProvider/index.js +1 -10
  406. package/commonjs/Toast/index.js +19 -42
  407. package/commonjs/Toast/styles.js +1 -7
  408. package/commonjs/ToggleHint/index.js +15 -39
  409. package/commonjs/ToggleHint/styles.js +2 -9
  410. package/commonjs/Token/index.js +15 -29
  411. package/commonjs/Token/styles.js +5 -12
  412. package/commonjs/TokenInput/index.js +70 -122
  413. package/commonjs/TokenInput/styles.js +1 -7
  414. package/commonjs/TokenInput/util.js +2 -7
  415. package/commonjs/Tooltip/index.js +40 -63
  416. package/commonjs/Tooltip/styles.js +1 -5
  417. package/commonjs/VisuallyHidden/index.js +0 -4
  418. package/commonjs/dataviz/index.js +0 -4
  419. package/commonjs/index.js +0 -129
  420. package/commonjs/systemProps/background.js +0 -1
  421. package/commonjs/systemProps/border.js +0 -1
  422. package/commonjs/systemProps/color.js +0 -1
  423. package/commonjs/systemProps/custom.js +0 -1
  424. package/commonjs/systemProps/flexbox.js +0 -1
  425. package/commonjs/systemProps/grid.js +0 -1
  426. package/commonjs/systemProps/index.js +0 -28
  427. package/commonjs/systemProps/layout.js +0 -1
  428. package/commonjs/systemProps/position.js +0 -1
  429. package/commonjs/systemProps/shadow.js +0 -1
  430. package/commonjs/systemProps/space.js +1 -2
  431. package/commonjs/systemProps/systemProps.js +0 -13
  432. package/commonjs/systemProps/tests/types.flow.js +25 -22
  433. package/commonjs/systemProps/typography.js +0 -1
  434. package/commonjs/systemProps/variant.js +2 -3
  435. package/commonjs/themes/dark/dataviz-palette.js +20 -22
  436. package/commonjs/themes/dark/decorative-palettes.js +0 -2
  437. package/commonjs/themes/dark/theme.js +13 -27
  438. package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +2 -9
  439. package/commonjs/themes/extendedThemes/sproutTheme/index.js +0 -5
  440. package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +2 -9
  441. package/commonjs/themes/light/dataviz-palette.js +20 -22
  442. package/commonjs/themes/light/decorative-palettes.js +0 -2
  443. package/commonjs/themes/light/literal-colors.js +132 -134
  444. package/commonjs/themes/light/theme.js +43 -59
  445. package/commonjs/types/system-props.flow.js +1 -1
  446. package/commonjs/types/theme.colors.flow.js +0 -2
  447. package/commonjs/types/theme.flow.js +0 -1
  448. package/commonjs/utils/a11yTest.js +3 -10
  449. package/commonjs/utils/chartColors.js +0 -1
  450. package/commonjs/utils/constants.js +1 -1
  451. package/commonjs/utils/dataQaLabelQueries.js +12 -21
  452. package/commonjs/utils/hooks.js +39 -70
  453. package/commonjs/utils/index.js +2 -9
  454. package/commonjs/utils/innerText.js +10 -14
  455. package/commonjs/utils/mixins.js +2 -7
  456. package/commonjs/utils/react-testing-library.js +4 -26
  457. package/commonjs/utils/responsiveProps/index.js +1 -11
  458. package/commonjs/utils/system-props.js +2 -5
  459. package/commonjs/utils/useInteractiveColor.js +6 -8
  460. package/dist/illustration.svg +1 -1
  461. package/dist/illustrationList.js +1 -1
  462. package/lib/Avatar/index.js +40 -47
  463. package/lib/Badge/constants.js +19 -15
  464. package/lib/Badge/index.js +18 -25
  465. package/lib/Badge/styles.js +8 -6
  466. package/lib/Banner/index.js +20 -32
  467. package/lib/Banner/styles.js +3 -2
  468. package/lib/Box/index.js +4 -5
  469. package/lib/Box/styles.js +3 -2
  470. package/lib/Breadcrumb/index.js +19 -27
  471. package/lib/Breadcrumb/styles.js +3 -2
  472. package/lib/Button/index.js +31 -38
  473. package/lib/Button/styles.js +14 -11
  474. package/lib/Card/index.js +18 -24
  475. package/lib/Card/styles.js +5 -4
  476. package/lib/CharacterCounter/index.js +8 -20
  477. package/lib/CharacterCounter/styles.js +3 -2
  478. package/lib/ChartLegend/index.js +9 -17
  479. package/lib/ChartLegend/styles.js +5 -4
  480. package/lib/Checkbox/index.js +32 -51
  481. package/lib/Checkbox/styles.js +21 -26
  482. package/lib/Collapsible/index.js +36 -51
  483. package/lib/Collapsible/styles.js +6 -5
  484. package/lib/DatePicker/DateRangePicker.js +8 -14
  485. package/lib/DatePicker/SingleDatePicker.js +7 -13
  486. package/lib/DatePicker/StatefulDateRangePicker.js +19 -26
  487. package/lib/DatePicker/StatefulSingleDatePicker.js +9 -15
  488. package/lib/DatePicker/common.js +14 -13
  489. package/lib/DatePicker/index.js +2 -2
  490. package/lib/DatePicker/styles.js +12 -22
  491. package/lib/Drawer/SlideTransition.js +11 -14
  492. package/lib/Drawer/index.js +64 -88
  493. package/lib/Drawer/styles.js +4 -3
  494. package/lib/EmptyState/index.js +11 -17
  495. package/lib/Fieldset/index.js +19 -29
  496. package/lib/Fieldset/styles.js +5 -4
  497. package/lib/FormField/index.js +27 -33
  498. package/lib/Icon/deprecatedIcons.js +36 -36
  499. package/lib/Icon/index.js +25 -34
  500. package/lib/Icon/styles.js +11 -13
  501. package/lib/IllustrationViewBoxes.js +1 -0
  502. package/lib/Image/index.js +15 -38
  503. package/lib/Image/styles.js +4 -4
  504. package/lib/Indicator/index.js +11 -23
  505. package/lib/Indicator/styles.js +5 -5
  506. package/lib/Input/index.js +87 -115
  507. package/lib/Input/styles.js +13 -15
  508. package/lib/KeyboardKey/index.js +6 -17
  509. package/lib/KeyboardKey/styles.js +3 -2
  510. package/lib/Label/index.js +10 -24
  511. package/lib/Link/constants.js +5 -4
  512. package/lib/Link/index.js +18 -25
  513. package/lib/Link/styles.js +6 -5
  514. package/lib/Listbox/index.js +21 -29
  515. package/lib/Loader/index.js +17 -29
  516. package/lib/Loader/styles.js +6 -8
  517. package/lib/LoaderButton/index.js +34 -51
  518. package/lib/Menu/constants.js +10 -8
  519. package/lib/Menu/descendants.js +73 -94
  520. package/lib/Menu/hooks.js +28 -39
  521. package/lib/Menu/index.flow.js +6 -5
  522. package/lib/Menu/index.js +113 -150
  523. package/lib/Menu/names.js +1 -1
  524. package/lib/Menu/styles.js +4 -3
  525. package/lib/Message/index.js +42 -66
  526. package/lib/Message/styles.js +15 -23
  527. package/lib/Modal/index.js +38 -51
  528. package/lib/Modal/styles.js +23 -32
  529. package/lib/Numeral/index.js +45 -64
  530. package/lib/Numeral/styles.js +3 -2
  531. package/lib/Numeral/tests/testNumeral.js +17 -27
  532. package/lib/OverflowList/index.flow.js +2 -1
  533. package/lib/OverflowList/index.js +31 -38
  534. package/lib/OverflowList/styles.js +5 -4
  535. package/lib/PartnerLogo/index.js +23 -31
  536. package/lib/PartnerLogo/styles.js +11 -12
  537. package/lib/Popout/index.js +105 -121
  538. package/lib/Popout/styles.js +3 -3
  539. package/lib/Portal/index.js +11 -29
  540. package/lib/Radio/index.js +20 -40
  541. package/lib/Radio/styles.js +14 -14
  542. package/lib/SegmentedControl/index.js +21 -34
  543. package/lib/SegmentedControl/styles.js +7 -9
  544. package/lib/Select/index.js +27 -44
  545. package/lib/Select/styles.js +16 -20
  546. package/lib/Skeleton/index.js +7 -4
  547. package/lib/SpotIllustration/illustrationNames.js +2 -1
  548. package/lib/SpotIllustration/index.js +9 -10
  549. package/lib/Stack/index.js +31 -39
  550. package/lib/Switch/index.js +21 -39
  551. package/lib/Switch/styles.js +8 -7
  552. package/lib/Table/index.js +30 -40
  553. package/lib/Table/styles.js +3 -2
  554. package/lib/TableCell/index.js +14 -27
  555. package/lib/TableCell/styles.js +3 -3
  556. package/lib/TableHeaderCell/index.js +30 -52
  557. package/lib/TableHeaderCell/styles.js +3 -2
  558. package/lib/TableRowAccordion/index.js +16 -34
  559. package/lib/TableRowAccordion/styles.js +5 -3
  560. package/lib/Tabs/index.js +18 -63
  561. package/lib/Tabs/styles.js +6 -6
  562. package/lib/Text/index.js +15 -21
  563. package/lib/Text/styles.js +4 -3
  564. package/lib/Textarea/index.js +33 -53
  565. package/lib/Textarea/styles.js +6 -5
  566. package/lib/ThemeProvider/index.js +4 -7
  567. package/lib/Toast/index.js +26 -37
  568. package/lib/Toast/styles.js +5 -4
  569. package/lib/ToggleHint/index.js +18 -36
  570. package/lib/ToggleHint/styles.js +6 -5
  571. package/lib/Token/index.js +20 -26
  572. package/lib/Token/styles.js +10 -9
  573. package/lib/TokenInput/index.js +78 -118
  574. package/lib/TokenInput/styles.js +5 -4
  575. package/lib/TokenInput/util.js +5 -3
  576. package/lib/Tooltip/index.js +45 -60
  577. package/lib/Tooltip/styles.js +4 -4
  578. package/lib/VisuallyHidden/index.js +3 -2
  579. package/lib/dataviz/index.js +4 -3
  580. package/lib/index.js +66 -64
  581. package/lib/systemProps/background.js +3 -1
  582. package/lib/systemProps/border.js +3 -1
  583. package/lib/systemProps/color.js +3 -1
  584. package/lib/systemProps/custom.js +3 -1
  585. package/lib/systemProps/flexbox.js +3 -1
  586. package/lib/systemProps/grid.js +3 -1
  587. package/lib/systemProps/index.js +16 -14
  588. package/lib/systemProps/layout.js +3 -1
  589. package/lib/systemProps/position.js +3 -1
  590. package/lib/systemProps/shadow.js +3 -1
  591. package/lib/systemProps/space.js +2 -1
  592. package/lib/systemProps/systemProps.js +14 -13
  593. package/lib/systemProps/tests/types.flow.js +27 -22
  594. package/lib/systemProps/typography.js +3 -1
  595. package/lib/systemProps/variant.js +4 -3
  596. package/lib/themes/dark/dataviz-palette.js +23 -21
  597. package/lib/themes/dark/decorative-palettes.js +3 -1
  598. package/lib/themes/dark/theme.js +20 -23
  599. package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +4 -7
  600. package/lib/themes/extendedThemes/sproutTheme/index.js +3 -2
  601. package/lib/themes/extendedThemes/sproutTheme/light/theme.js +4 -7
  602. package/lib/themes/light/dataviz-palette.js +23 -21
  603. package/lib/themes/light/decorative-palettes.js +3 -1
  604. package/lib/themes/light/literal-colors.js +135 -133
  605. package/lib/themes/light/theme.js +54 -55
  606. package/lib/types/system-props.flow.js +1 -1
  607. package/lib/types/theme.colors.flow.js +4 -2
  608. package/lib/types/theme.flow.js +3 -2
  609. package/lib/utils/a11yTest.js +5 -8
  610. package/lib/utils/chartColors.js +3 -1
  611. package/lib/utils/constants.js +3 -1
  612. package/lib/utils/dataQaLabelQueries.js +13 -21
  613. package/lib/utils/hooks.js +41 -64
  614. package/lib/utils/index.js +2 -5
  615. package/lib/utils/innerText.js +12 -14
  616. package/lib/utils/mixins.js +6 -5
  617. package/lib/utils/react-testing-library.js +10 -20
  618. package/lib/utils/responsiveProps/index.js +3 -8
  619. package/lib/utils/system-props.js +4 -3
  620. package/lib/utils/useInteractiveColor.js +10 -9
  621. package/package.json +6 -13
@@ -3,62 +3,45 @@
3
3
  exports.__esModule = true;
4
4
  exports.default = Popout;
5
5
  exports.placements = void 0;
6
-
7
6
  var React = _interopRequireWildcard(require("react"));
8
-
9
7
  var _reactSpring = require("react-spring");
10
-
11
8
  var _seedsMotionUnitless = require("@sproutsocial/seeds-motion/dist/seeds-motion-unitless");
12
-
13
9
  var _styles = require("./styles");
14
-
15
10
  var _Portal = _interopRequireDefault(require("../Portal"));
16
-
17
11
  var _Box = _interopRequireDefault(require("../Box"));
18
-
19
12
  var _reactPopper = require("react-popper");
20
-
21
13
  var _hooks = require("../utils/hooks");
22
-
23
14
  var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
24
-
25
15
  var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps"],
26
- _excluded2 = ["autoFocus", "returnFocus"],
27
- _excluded3 = ["children"];
28
-
16
+ _excluded2 = ["autoFocus", "returnFocus"],
17
+ _excluded3 = ["children"];
29
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30
-
31
19
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
32
-
33
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
34
-
35
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
36
-
21
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
37
22
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
38
-
39
23
  var placements = {
40
- auto: "auto",
41
- top: "top",
42
- right: "right",
43
- bottom: "bottom",
44
- left: "left",
45
- "top-start": "top-start",
46
- "right-start": "right-start",
47
- "bottom-start": "bottom-start",
48
- "left-start": "left-start",
49
- "top-end": "top-end",
50
- "right-end": "right-end",
51
- "bottom-end": "bottom-end",
52
- "left-end": "left-end"
53
- }; // Seeds docs can't parse $Keys<typeof placements> yet
54
-
24
+ auto: 'auto',
25
+ top: 'top',
26
+ right: 'right',
27
+ bottom: 'bottom',
28
+ left: 'left',
29
+ 'top-start': 'top-start',
30
+ 'right-start': 'right-start',
31
+ 'bottom-start': 'bottom-start',
32
+ 'left-start': 'left-start',
33
+ 'top-end': 'top-end',
34
+ 'right-end': 'right-end',
35
+ 'bottom-end': 'bottom-end',
36
+ 'left-end': 'left-end'
37
+ };
38
+ // Seeds docs can't parse $Keys<typeof placements> yet
55
39
  exports.placements = placements;
56
-
57
40
  var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
58
41
  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
59
- }; // Transition definitions for fading in and out
60
-
42
+ };
61
43
 
44
+ // Transition definitions for fading in and out
62
45
  var transitionConfig = {
63
46
  from: {
64
47
  opacity: 0
@@ -73,40 +56,36 @@ var transitionConfig = {
73
56
  duration: _seedsMotionUnitless.MOTION_DURATION_FAST * 1000
74
57
  }
75
58
  };
76
-
77
59
  function Popout(_ref) {
78
60
  var isOpen = _ref.isOpen,
79
- setIsOpen = _ref.setIsOpen,
80
- content = _ref.content,
81
- children = _ref.children,
82
- _ref$placement = _ref.placement,
83
- placement = _ref$placement === void 0 ? "auto" : _ref$placement,
84
- _ref$fullWidth = _ref.fullWidth,
85
- fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
86
- _ref$zIndex = _ref.zIndex,
87
- zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
88
- _ref$focusOnContent = _ref.focusOnContent,
89
- focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
90
- onOpen = _ref.onOpen,
91
- onClose = _ref.onClose,
92
- _ref$qa = _ref.qa,
93
- qa = _ref$qa === void 0 ? {} : _ref$qa,
94
- popperProps = _ref.popperProps,
95
- _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
96
- scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
97
- _ref$appendToBody = _ref.appendToBody,
98
- appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
99
- _ref$focusLockProps = _ref.focusLockProps,
100
- focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
101
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
102
-
61
+ setIsOpen = _ref.setIsOpen,
62
+ content = _ref.content,
63
+ children = _ref.children,
64
+ _ref$placement = _ref.placement,
65
+ placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
66
+ _ref$fullWidth = _ref.fullWidth,
67
+ fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
68
+ _ref$zIndex = _ref.zIndex,
69
+ zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
70
+ _ref$focusOnContent = _ref.focusOnContent,
71
+ focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
72
+ onOpen = _ref.onOpen,
73
+ onClose = _ref.onClose,
74
+ _ref$qa = _ref.qa,
75
+ qa = _ref$qa === void 0 ? {} : _ref$qa,
76
+ popperProps = _ref.popperProps,
77
+ _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
78
+ scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
79
+ _ref$appendToBody = _ref.appendToBody,
80
+ appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
81
+ _ref$focusLockProps = _ref.focusLockProps,
82
+ focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
83
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
103
84
  var PopoutComponentWrapper = appendToBody ? _Portal.default : React.Fragment;
104
-
105
85
  var _useState = (0, React.useState)(false),
106
- isInternalShown = _useState[0],
107
- setIsInternalShown = _useState[1];
108
-
109
- var isControlled = typeof isOpen === "boolean";
86
+ isInternalShown = _useState[0],
87
+ setIsInternalShown = _useState[1];
88
+ var isControlled = typeof isOpen === 'boolean';
110
89
  var isShown = isControlled ? isOpen : isInternalShown;
111
90
  var setIsShown = (0, React.useMemo)(function () {
112
91
  return isControlled && setIsOpen ? setIsOpen : function (nextIsShown, e) {
@@ -115,24 +94,23 @@ function Popout(_ref) {
115
94
  }, [isControlled, setIsOpen]);
116
95
  var targetRef = (0, React.useRef)();
117
96
  var popoutRef = (0, React.useRef)();
118
- var isFirstRender = (0, React.useRef)(true); // This callback will automatically trigger a recalculation of the popout position if the content is changed
119
-
97
+ var isFirstRender = (0, React.useRef)(true);
98
+ // This callback will automatically trigger a recalculation of the popout position if the content is changed
120
99
  var scheduleUpdateCallback = (0, React.useRef)(function () {});
121
100
  (0, _hooks.useMutationObserver)(popoutRef.current, {
122
101
  childList: true,
123
102
  characterData: true,
124
103
  subtree: true
125
104
  }, scheduleUpdateCallback.current);
126
-
127
105
  var _focusLockProps$autoF = focusLockProps.autoFocus,
128
- autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
129
- _focusLockProps$retur = focusLockProps.returnFocus,
130
- returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
131
- restFocusLockProps = _objectWithoutPropertiesLoose(focusLockProps, _excluded2);
106
+ autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
107
+ _focusLockProps$retur = focusLockProps.returnFocus,
108
+ returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
109
+ restFocusLockProps = _objectWithoutPropertiesLoose(focusLockProps, _excluded2);
110
+ var isInvalidContent = content === null || content === undefined;
132
111
 
133
- var isInvalidContent = content === null || content === undefined; // Callbacks for showing, hiding, and toggling visibility of the popout
112
+ // Callbacks for showing, hiding, and toggling visibility of the popout
134
113
  // (Not used when isOpen is passed explicitly)
135
-
136
114
  var show = (0, React.useCallback)(function () {
137
115
  return setIsShown(true);
138
116
  }, [setIsShown]);
@@ -144,7 +122,6 @@ function Popout(_ref) {
144
122
  }, [isShown, setIsShown]);
145
123
  (0, React.useEffect)(function () {
146
124
  var documentBody = document.body;
147
-
148
125
  if (isShown && documentBody) {
149
126
  // Callback passed to a click handler attached to document.body,
150
127
  // allowing user to close the popout by clicking outside
@@ -152,78 +129,74 @@ function Popout(_ref) {
152
129
  if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
153
130
  return;
154
131
  }
155
-
156
132
  setIsShown(false, e);
157
- }; // Callback for allowing user to close by keying "esc"
158
-
133
+ };
159
134
 
135
+ // Callback for allowing user to close by keying "esc"
160
136
  var onEsc = function onEsc(e) {
161
137
  // older browsers use "Esc"
162
- if (["Escape", "Esc"].includes(e.key)) {
138
+ if (['Escape', 'Esc'].includes(e.key)) {
163
139
  // stop propagation to avoid interacting with other components when popout is shown
164
140
  // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
165
141
  e.stopPropagation();
166
142
  setIsShown(false, e);
167
143
  }
168
144
  };
169
-
170
- documentBody.addEventListener("click", bodyClick, false);
171
- documentBody.addEventListener("keydown", onEsc, false);
145
+ documentBody.addEventListener('click', bodyClick, false);
146
+ documentBody.addEventListener('keydown', onEsc, false);
172
147
  return function () {
173
- documentBody.removeEventListener("click", bodyClick, false);
174
- documentBody.removeEventListener("keydown", onEsc, false);
148
+ documentBody.removeEventListener('click', bodyClick, false);
149
+ documentBody.removeEventListener('keydown', onEsc, false);
175
150
  };
176
151
  }
177
- }, [isShown, setIsShown]); // Manage onOpen and onClose callbacks
152
+ }, [isShown, setIsShown]);
178
153
 
154
+ // Manage onOpen and onClose callbacks
179
155
  (0, React.useEffect)(function () {
180
156
  // Don't fire onClose on the first render
181
157
  if (isFirstRender.current) {
182
158
  isFirstRender.current = false;
183
159
  return;
184
160
  }
185
-
186
161
  if (!onOpen && !onClose) {
187
162
  return;
188
163
  }
189
-
190
164
  if (isShown && onOpen) {
191
165
  onOpen();
192
166
  }
193
-
194
167
  if (!isShown && onClose) {
195
168
  onClose();
196
- } // eslint-disable-next-line
197
-
169
+ }
170
+ // eslint-disable-next-line
198
171
  }, [isShown]);
199
- var transitions = (0, _reactSpring.useTransition)(isShown, null, transitionConfig); // WAI-Aria properties for the popout trigger
172
+ var transitions = (0, _reactSpring.useTransition)(isShown, null, transitionConfig);
200
173
 
174
+ // WAI-Aria properties for the popout trigger
201
175
  var ariaProps = (0, React.useMemo)(function () {
202
176
  return {
203
- "aria-expanded": isShown,
204
- "aria-haspopup": true
177
+ 'aria-expanded': isShown,
178
+ 'aria-haspopup': true
205
179
  };
206
- }, [isShown]); // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
180
+ }, [isShown]);
181
+
182
+ // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
207
183
  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,
208
184
  // the Popout component renders, but doesn't know how to position itself due the
209
185
  // `refereElement` property being undefined.
210
-
211
- var _useState2 = (0, React.useState)( // Only trigger this shouldRenderPopout logic when using a controlled component.
212
- // The reason for that is because controlled components may render the popout
213
- // immediately before the targetRef has a value set to it.
214
- !isControlled),
215
- shouldRenderPopout = _useState2[0],
216
- setShouldRenderPopout = _useState2[1];
217
-
186
+ var _useState2 = (0, React.useState)(
187
+ // Only trigger this shouldRenderPopout logic when using a controlled component.
188
+ // The reason for that is because controlled components may render the popout
189
+ // immediately before the targetRef has a value set to it.
190
+ !isControlled),
191
+ shouldRenderPopout = _useState2[0],
192
+ setShouldRenderPopout = _useState2[1];
218
193
  var childrenRef = function childrenRef(el) {
219
194
  targetRef.current = el;
220
-
221
195
  if (targetRef.current) {
222
196
  setShouldRenderPopout(true);
223
197
  }
224
198
  };
225
-
226
- return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === "function" ? children({
199
+ return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children({
227
200
  ref: childrenRef,
228
201
  toggle: toggle,
229
202
  show: show,
@@ -235,8 +208,8 @@ function Popout(_ref) {
235
208
  onClick: toggle
236
209
  } : undefined))), shouldRenderPopout && !isInvalidContent && transitions.map(function (_ref2) {
237
210
  var item = _ref2.item,
238
- key = _ref2.key,
239
- props = _ref2.props;
211
+ key = _ref2.key,
212
+ props = _ref2.props;
240
213
  return item && /*#__PURE__*/React.createElement(PopoutComponentWrapper, {
241
214
  key: key
242
215
  }, /*#__PURE__*/React.createElement(_reactPopper.Popper, _extends({
@@ -244,50 +217,46 @@ function Popout(_ref) {
244
217
  placement: placement,
245
218
  modifiers: {
246
219
  preventOverflow: {
247
- boundariesElement: "viewport"
220
+ boundariesElement: 'viewport'
248
221
  }
249
222
  }
250
223
  }, popperProps), function (_ref3) {
251
224
  var ref = _ref3.ref,
252
- style = _ref3.style,
253
- placement = _ref3.placement,
254
- outOfBoundaries = _ref3.outOfBoundaries,
255
- scheduleUpdate = _ref3.scheduleUpdate;
256
-
225
+ style = _ref3.style,
226
+ placement = _ref3.placement,
227
+ outOfBoundaries = _ref3.outOfBoundaries,
228
+ scheduleUpdate = _ref3.scheduleUpdate;
257
229
  var interceptRef = function interceptRef(el) {
258
230
  popoutRef.current = el;
259
231
  ref(el);
260
232
  };
261
-
262
233
  scheduleUpdateCallback.current = scheduleUpdate;
263
234
  scheduleUpdateRef(scheduleUpdate);
264
235
  return /*#__PURE__*/React.createElement("div", _extends({
265
236
  ref: interceptRef,
266
237
  style: _extends({}, style, {
267
238
  zIndex: zIndex,
268
- width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
239
+ width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
269
240
  }),
270
241
  "data-placement": placement,
271
- "data-qa-popout": "",
272
- "data-qa-popout-isopen": isOpen === true // $FlowIssue - upgrade v0.112.0
273
-
242
+ "data-qa-popout": '',
243
+ "data-qa-popout-isopen": isOpen === true
244
+ // $FlowIssue - upgrade v0.112.0
274
245
  }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(_reactSpring.animated.div, {
275
246
  style: props
276
247
  }, /*#__PURE__*/React.createElement(_reactFocusLock.default, _extends({
277
248
  autoFocus: autoFocus,
278
249
  returnFocus: returnFocus,
279
250
  disabled: !focusOnContent
280
- }, restFocusLockProps), typeof content === "function" && content({
251
+ }, restFocusLockProps), typeof content === 'function' && content({
281
252
  hide: hide
282
- }), typeof content !== "function" && content)));
253
+ }), typeof content !== 'function' && content)));
283
254
  }));
284
255
  }));
285
256
  }
286
-
287
257
  var PopoutContent = function PopoutContent(_ref4) {
288
258
  var children = _ref4.children,
289
- rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
290
-
259
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
291
260
  return /*#__PURE__*/React.createElement(_Box.default, _extends({
292
261
  bg: "container.background.base",
293
262
  color: "text.body",
@@ -299,6 +268,5 @@ var PopoutContent = function PopoutContent(_ref4) {
299
268
  m: 300
300
269
  }, rest), children);
301
270
  };
302
-
303
271
  Popout.Content = PopoutContent;
304
- Popout.Content.displayName = "Popout.Content";
272
+ Popout.Content.displayName = 'Popout.Content';
@@ -2,17 +2,12 @@
2
2
 
3
3
  exports.__esModule = true;
4
4
  exports.TargetWrapper = void 0;
5
-
6
5
  var _styledComponents = _interopRequireDefault(require("styled-components"));
7
-
8
6
  var _systemProps = require("../utils/system-props");
9
-
10
7
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
8
 
12
- // eslint-disable-next-line prettier/prettier
13
9
  var TargetWrapper = _styledComponents.default.div.withConfig({
14
10
  displayName: "styles__TargetWrapper",
15
11
  componentId: "sc-qo3sn-0"
16
12
  })(["display:inline-block;", " ", ""], _systemProps.COMMON, _systemProps.LAYOUT);
17
-
18
13
  exports.TargetWrapper = TargetWrapper;
@@ -2,86 +2,63 @@
2
2
 
3
3
  exports.__esModule = true;
4
4
  exports.default = void 0;
5
-
6
5
  var React = _interopRequireWildcard(require("react"));
7
-
8
6
  var _reactDom = require("react-dom");
9
-
10
7
  var _utils = require("../utils");
11
-
12
8
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
-
14
9
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
-
16
10
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
17
-
18
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
19
-
11
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
20
12
  var Portal = /*#__PURE__*/function (_React$Component) {
21
13
  _inheritsLoose(Portal, _React$Component);
22
-
23
14
  function Portal(props) {
24
15
  var _this;
25
-
26
16
  _this = _React$Component.call(this, props) || this;
27
17
  _this.el = null;
28
-
29
18
  if ((0, _utils.canUseDOM)()) {
30
19
  var as = props.as,
31
- el = props.el,
32
- id = props.id;
33
-
20
+ el = props.el,
21
+ id = props.id;
34
22
  if (el) {
35
23
  _this.el = el;
36
24
  } else {
37
25
  _this.el = document.createElement(as);
38
-
39
- _this.el.setAttribute("data-racine-portal", id);
26
+ _this.el.setAttribute('data-racine-portal', id);
40
27
  }
41
28
  }
42
-
43
29
  return _this;
44
30
  }
45
-
46
31
  var _proto = Portal.prototype;
47
-
48
32
  _proto.componentDidMount = function componentDidMount() {
49
33
  if ((0, _utils.canUseDOM)() && this.el) {
50
34
  var _this$props$container = this.props.container,
51
- container = _this$props$container === void 0 ? document.body : _this$props$container;
52
-
35
+ container = _this$props$container === void 0 ? document.body : _this$props$container;
53
36
  if (container) {
54
37
  // for flow
55
38
  container.appendChild(this.el);
56
39
  }
57
40
  }
58
41
  };
59
-
60
42
  _proto.componentWillUnmount = function componentWillUnmount() {
61
43
  if ((0, _utils.canUseDOM)() && this.el) {
62
44
  var _this$props$container2 = this.props.container,
63
- container = _this$props$container2 === void 0 ? document.body : _this$props$container2;
64
-
45
+ container = _this$props$container2 === void 0 ? document.body : _this$props$container2;
65
46
  if (container) {
66
47
  // for flow
67
48
  container.removeChild(this.el);
68
49
  }
69
50
  }
70
51
  };
71
-
72
52
  _proto.render = function render() {
73
53
  if (this.el) {
74
54
  return /*#__PURE__*/(0, _reactDom.createPortal)(this.props.children, this.el);
75
55
  }
76
-
77
56
  return this.props.children;
78
57
  };
79
-
80
58
  return Portal;
81
59
  }(React.Component);
82
-
83
60
  exports.default = Portal;
84
61
  Portal.defaultProps = {
85
- as: "div",
86
- id: ""
62
+ as: 'div',
63
+ id: ''
87
64
  };
@@ -2,86 +2,64 @@
2
2
 
3
3
  exports.__esModule = true;
4
4
  exports.default = void 0;
5
-
6
5
  var React = _interopRequireWildcard(require("react"));
7
-
8
6
  var _styles = _interopRequireWildcard(require("./styles"));
9
-
10
7
  var _excluded = ["id", "value", "name", "label", "checked", "disabled", "onChange", "onFocus", "onBlur", "ariaLabel", "qa"];
11
-
12
8
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
-
14
9
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
-
16
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
-
10
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
18
11
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
19
-
20
12
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
21
-
22
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
23
-
13
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
24
14
  /**
25
15
  * Primitive Radio Element
26
- */
27
- var Radio = /*#__PURE__*/function (_React$Component) {
16
+ */var Radio = /*#__PURE__*/function (_React$Component) {
28
17
  _inheritsLoose(Radio, _React$Component);
29
-
30
18
  function Radio() {
31
19
  var _this;
32
-
33
20
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
34
21
  args[_key] = arguments[_key];
35
22
  }
36
-
37
23
  _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
38
-
39
24
  _this.handleChange = function (e) {
40
25
  if (!!_this.props.checked || _this.props.disabled) {
41
26
  return;
42
27
  }
43
-
44
28
  _this.props.onChange && _this.props.onChange(e);
45
29
  };
46
-
47
30
  _this.handleFocus = function (e) {
48
31
  if (_this.props.onFocus) {
49
32
  _this.props.onFocus(e);
50
33
  }
51
34
  };
52
-
53
35
  _this.handleBlur = function (e) {
54
36
  if (_this.props.onBlur) {
55
37
  _this.props.onBlur(e);
56
38
  }
57
39
  };
58
-
59
40
  return _this;
60
41
  }
61
-
62
42
  var _proto = Radio.prototype;
63
-
64
43
  _proto.render = function render() {
65
44
  var _this$props = this.props,
66
- id = _this$props.id,
67
- value = _this$props.value,
68
- name = _this$props.name,
69
- label = _this$props.label,
70
- checked = _this$props.checked,
71
- disabled = _this$props.disabled,
72
- onChange = _this$props.onChange,
73
- onFocus = _this$props.onFocus,
74
- onBlur = _this$props.onBlur,
75
- ariaLabel = _this$props.ariaLabel,
76
- _this$props$qa = _this$props.qa,
77
- qa = _this$props$qa === void 0 ? {} : _this$props$qa,
78
- rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
79
-
45
+ id = _this$props.id,
46
+ value = _this$props.value,
47
+ name = _this$props.name,
48
+ label = _this$props.label,
49
+ checked = _this$props.checked,
50
+ disabled = _this$props.disabled,
51
+ onChange = _this$props.onChange,
52
+ onFocus = _this$props.onFocus,
53
+ onBlur = _this$props.onBlur,
54
+ ariaLabel = _this$props.ariaLabel,
55
+ _this$props$qa = _this$props.qa,
56
+ qa = _this$props$qa === void 0 ? {} : _this$props$qa,
57
+ rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
80
58
  return (
81
59
  /*#__PURE__*/
82
60
  // $FlowIssue - upgrade v0.112.0
83
61
  React.createElement(_styles.default, _extends({
84
- as: label && "label"
62
+ as: label && 'label'
85
63
  }, rest), /*#__PURE__*/React.createElement(_styles.InputWrapper, {
86
64
  checked: checked,
87
65
  disabled: disabled
@@ -96,7 +74,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
96
74
  onChange: this.handleChange,
97
75
  onFocus: this.handleFocus,
98
76
  onBlur: this.handleBlur,
99
- "data-qa-radio": name || "",
77
+ "data-qa-radio": name || '',
100
78
  "data-qa-radio-ischecked": checked === true,
101
79
  "data-qa-radio-isdisabled": disabled === true
102
80
  }, qa))), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
@@ -104,10 +82,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
104
82
  }, label))
105
83
  );
106
84
  };
107
-
108
85
  return Radio;
109
86
  }(React.Component);
110
-
111
87
  exports.default = Radio;
112
88
  Radio.defaultProps = {
113
89
  disabled: false