@sproutsocial/racine 12.20.0 → 12.21.0

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 +20 -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
@@ -1,42 +1,40 @@
1
1
  var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps"],
2
- _excluded2 = ["autoFocus", "returnFocus"],
3
- _excluded3 = ["children"];
4
-
5
- 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); }
6
-
2
+ _excluded2 = ["autoFocus", "returnFocus"],
3
+ _excluded3 = ["children"];
4
+ 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); }
7
5
  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; }
8
-
9
- import * as React from "react";
10
- import { useState, useEffect, useRef, useCallback, useMemo } from "react";
11
- import { useTransition, animated } from "react-spring";
12
- import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
13
- import { TargetWrapper } from "./styles";
14
- import Portal from "../Portal";
15
- import Box from "../Box";
16
- import { Popper } from "react-popper";
17
- import { useMutationObserver } from "../utils/hooks";
18
- import FocusLock from "react-focus-lock";
6
+ import * as React from 'react';
7
+ import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
8
+ import { useTransition, animated } from 'react-spring';
9
+ import { MOTION_DURATION_FAST } from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
10
+ import { TargetWrapper } from './styles';
11
+ import Portal from '../Portal';
12
+ import Box from '../Box';
13
+ import { Popper } from 'react-popper';
14
+ import { useMutationObserver } from '../utils/hooks';
15
+ import FocusLock from 'react-focus-lock';
19
16
  export var placements = {
20
- auto: "auto",
21
- top: "top",
22
- right: "right",
23
- bottom: "bottom",
24
- left: "left",
25
- "top-start": "top-start",
26
- "right-start": "right-start",
27
- "bottom-start": "bottom-start",
28
- "left-start": "left-start",
29
- "top-end": "top-end",
30
- "right-end": "right-end",
31
- "bottom-end": "bottom-end",
32
- "left-end": "left-end"
33
- }; // Seeds docs can't parse $Keys<typeof placements> yet
17
+ auto: 'auto',
18
+ top: 'top',
19
+ right: 'right',
20
+ bottom: 'bottom',
21
+ left: 'left',
22
+ 'top-start': 'top-start',
23
+ 'right-start': 'right-start',
24
+ 'bottom-start': 'bottom-start',
25
+ 'left-start': 'left-start',
26
+ 'top-end': 'top-end',
27
+ 'right-end': 'right-end',
28
+ 'bottom-end': 'bottom-end',
29
+ 'left-end': 'left-end'
30
+ };
31
+ // Seeds docs can't parse $Keys<typeof placements> yet
34
32
 
35
33
  var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
36
34
  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
37
- }; // Transition definitions for fading in and out
38
-
35
+ };
39
36
 
37
+ // Transition definitions for fading in and out
40
38
  var transitionConfig = {
41
39
  from: {
42
40
  opacity: 0
@@ -53,37 +51,34 @@ var transitionConfig = {
53
51
  };
54
52
  export default function Popout(_ref) {
55
53
  var isOpen = _ref.isOpen,
56
- setIsOpen = _ref.setIsOpen,
57
- content = _ref.content,
58
- children = _ref.children,
59
- _ref$placement = _ref.placement,
60
- placement = _ref$placement === void 0 ? "auto" : _ref$placement,
61
- _ref$fullWidth = _ref.fullWidth,
62
- fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
63
- _ref$zIndex = _ref.zIndex,
64
- zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
65
- _ref$focusOnContent = _ref.focusOnContent,
66
- focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
67
- onOpen = _ref.onOpen,
68
- onClose = _ref.onClose,
69
- _ref$qa = _ref.qa,
70
- qa = _ref$qa === void 0 ? {} : _ref$qa,
71
- popperProps = _ref.popperProps,
72
- _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
73
- scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
74
- _ref$appendToBody = _ref.appendToBody,
75
- appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
76
- _ref$focusLockProps = _ref.focusLockProps,
77
- focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
78
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
79
-
54
+ setIsOpen = _ref.setIsOpen,
55
+ content = _ref.content,
56
+ children = _ref.children,
57
+ _ref$placement = _ref.placement,
58
+ placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
59
+ _ref$fullWidth = _ref.fullWidth,
60
+ fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
61
+ _ref$zIndex = _ref.zIndex,
62
+ zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
63
+ _ref$focusOnContent = _ref.focusOnContent,
64
+ focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
65
+ onOpen = _ref.onOpen,
66
+ onClose = _ref.onClose,
67
+ _ref$qa = _ref.qa,
68
+ qa = _ref$qa === void 0 ? {} : _ref$qa,
69
+ popperProps = _ref.popperProps,
70
+ _ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
71
+ scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
72
+ _ref$appendToBody = _ref.appendToBody,
73
+ appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
74
+ _ref$focusLockProps = _ref.focusLockProps,
75
+ focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
76
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
80
77
  var PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
81
-
82
78
  var _useState = useState(false),
83
- isInternalShown = _useState[0],
84
- setIsInternalShown = _useState[1];
85
-
86
- var isControlled = typeof isOpen === "boolean";
79
+ isInternalShown = _useState[0],
80
+ setIsInternalShown = _useState[1];
81
+ var isControlled = typeof isOpen === 'boolean';
87
82
  var isShown = isControlled ? isOpen : isInternalShown;
88
83
  var setIsShown = useMemo(function () {
89
84
  return isControlled && setIsOpen ? setIsOpen : function (nextIsShown, e) {
@@ -92,24 +87,23 @@ export default function Popout(_ref) {
92
87
  }, [isControlled, setIsOpen]);
93
88
  var targetRef = useRef();
94
89
  var popoutRef = useRef();
95
- var isFirstRender = useRef(true); // This callback will automatically trigger a recalculation of the popout position if the content is changed
96
-
90
+ var isFirstRender = useRef(true);
91
+ // This callback will automatically trigger a recalculation of the popout position if the content is changed
97
92
  var scheduleUpdateCallback = useRef(function () {});
98
93
  useMutationObserver(popoutRef.current, {
99
94
  childList: true,
100
95
  characterData: true,
101
96
  subtree: true
102
97
  }, scheduleUpdateCallback.current);
103
-
104
98
  var _focusLockProps$autoF = focusLockProps.autoFocus,
105
- autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
106
- _focusLockProps$retur = focusLockProps.returnFocus,
107
- returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
108
- restFocusLockProps = _objectWithoutPropertiesLoose(focusLockProps, _excluded2);
99
+ autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
100
+ _focusLockProps$retur = focusLockProps.returnFocus,
101
+ returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
102
+ restFocusLockProps = _objectWithoutPropertiesLoose(focusLockProps, _excluded2);
103
+ var isInvalidContent = content === null || content === undefined;
109
104
 
110
- var isInvalidContent = content === null || content === undefined; // Callbacks for showing, hiding, and toggling visibility of the popout
105
+ // Callbacks for showing, hiding, and toggling visibility of the popout
111
106
  // (Not used when isOpen is passed explicitly)
112
-
113
107
  var show = useCallback(function () {
114
108
  return setIsShown(true);
115
109
  }, [setIsShown]);
@@ -121,7 +115,6 @@ export default function Popout(_ref) {
121
115
  }, [isShown, setIsShown]);
122
116
  useEffect(function () {
123
117
  var documentBody = document.body;
124
-
125
118
  if (isShown && documentBody) {
126
119
  // Callback passed to a click handler attached to document.body,
127
120
  // allowing user to close the popout by clicking outside
@@ -129,78 +122,74 @@ export default function Popout(_ref) {
129
122
  if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
130
123
  return;
131
124
  }
132
-
133
125
  setIsShown(false, e);
134
- }; // Callback for allowing user to close by keying "esc"
135
-
126
+ };
136
127
 
128
+ // Callback for allowing user to close by keying "esc"
137
129
  var onEsc = function onEsc(e) {
138
130
  // older browsers use "Esc"
139
- if (["Escape", "Esc"].includes(e.key)) {
131
+ if (['Escape', 'Esc'].includes(e.key)) {
140
132
  // stop propagation to avoid interacting with other components when popout is shown
141
133
  // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
142
134
  e.stopPropagation();
143
135
  setIsShown(false, e);
144
136
  }
145
137
  };
146
-
147
- documentBody.addEventListener("click", bodyClick, false);
148
- documentBody.addEventListener("keydown", onEsc, false);
138
+ documentBody.addEventListener('click', bodyClick, false);
139
+ documentBody.addEventListener('keydown', onEsc, false);
149
140
  return function () {
150
- documentBody.removeEventListener("click", bodyClick, false);
151
- documentBody.removeEventListener("keydown", onEsc, false);
141
+ documentBody.removeEventListener('click', bodyClick, false);
142
+ documentBody.removeEventListener('keydown', onEsc, false);
152
143
  };
153
144
  }
154
- }, [isShown, setIsShown]); // Manage onOpen and onClose callbacks
145
+ }, [isShown, setIsShown]);
155
146
 
147
+ // Manage onOpen and onClose callbacks
156
148
  useEffect(function () {
157
149
  // Don't fire onClose on the first render
158
150
  if (isFirstRender.current) {
159
151
  isFirstRender.current = false;
160
152
  return;
161
153
  }
162
-
163
154
  if (!onOpen && !onClose) {
164
155
  return;
165
156
  }
166
-
167
157
  if (isShown && onOpen) {
168
158
  onOpen();
169
159
  }
170
-
171
160
  if (!isShown && onClose) {
172
161
  onClose();
173
- } // eslint-disable-next-line
174
-
162
+ }
163
+ // eslint-disable-next-line
175
164
  }, [isShown]);
176
- var transitions = useTransition(isShown, null, transitionConfig); // WAI-Aria properties for the popout trigger
165
+ var transitions = useTransition(isShown, null, transitionConfig);
177
166
 
167
+ // WAI-Aria properties for the popout trigger
178
168
  var ariaProps = useMemo(function () {
179
169
  return {
180
- "aria-expanded": isShown,
181
- "aria-haspopup": true
170
+ 'aria-expanded': isShown,
171
+ 'aria-haspopup': true
182
172
  };
183
- }, [isShown]); // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
173
+ }, [isShown]);
174
+
175
+ // In cases where a controlled popout is used (e.g. props.isOpen is true), we need
184
176
  // to wait for the targetRef to receive a value before rendering the popout. Otherwise,
185
177
  // the Popout component renders, but doesn't know how to position itself due the
186
178
  // `refereElement` property being undefined.
187
-
188
- var _useState2 = useState( // Only trigger this shouldRenderPopout logic when using a controlled component.
189
- // The reason for that is because controlled components may render the popout
190
- // immediately before the targetRef has a value set to it.
191
- !isControlled),
192
- shouldRenderPopout = _useState2[0],
193
- setShouldRenderPopout = _useState2[1];
194
-
179
+ var _useState2 = useState(
180
+ // Only trigger this shouldRenderPopout logic when using a controlled component.
181
+ // The reason for that is because controlled components may render the popout
182
+ // immediately before the targetRef has a value set to it.
183
+ !isControlled),
184
+ shouldRenderPopout = _useState2[0],
185
+ setShouldRenderPopout = _useState2[1];
195
186
  var childrenRef = function childrenRef(el) {
196
187
  targetRef.current = el;
197
-
198
188
  if (targetRef.current) {
199
189
  setShouldRenderPopout(true);
200
190
  }
201
191
  };
202
-
203
- return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === "function" ? children({
192
+ return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children({
204
193
  ref: childrenRef,
205
194
  toggle: toggle,
206
195
  show: show,
@@ -212,8 +201,8 @@ export default function Popout(_ref) {
212
201
  onClick: toggle
213
202
  } : undefined))), shouldRenderPopout && !isInvalidContent && transitions.map(function (_ref2) {
214
203
  var item = _ref2.item,
215
- key = _ref2.key,
216
- props = _ref2.props;
204
+ key = _ref2.key,
205
+ props = _ref2.props;
217
206
  return item && /*#__PURE__*/React.createElement(PopoutComponentWrapper, {
218
207
  key: key
219
208
  }, /*#__PURE__*/React.createElement(Popper, _extends({
@@ -221,50 +210,46 @@ export default function Popout(_ref) {
221
210
  placement: placement,
222
211
  modifiers: {
223
212
  preventOverflow: {
224
- boundariesElement: "viewport"
213
+ boundariesElement: 'viewport'
225
214
  }
226
215
  }
227
216
  }, popperProps), function (_ref3) {
228
217
  var ref = _ref3.ref,
229
- style = _ref3.style,
230
- placement = _ref3.placement,
231
- outOfBoundaries = _ref3.outOfBoundaries,
232
- scheduleUpdate = _ref3.scheduleUpdate;
233
-
218
+ style = _ref3.style,
219
+ placement = _ref3.placement,
220
+ outOfBoundaries = _ref3.outOfBoundaries,
221
+ scheduleUpdate = _ref3.scheduleUpdate;
234
222
  var interceptRef = function interceptRef(el) {
235
223
  popoutRef.current = el;
236
224
  ref(el);
237
225
  };
238
-
239
226
  scheduleUpdateCallback.current = scheduleUpdate;
240
227
  scheduleUpdateRef(scheduleUpdate);
241
228
  return /*#__PURE__*/React.createElement("div", _extends({
242
229
  ref: interceptRef,
243
230
  style: _extends({}, style, {
244
231
  zIndex: zIndex,
245
- width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
232
+ width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
246
233
  }),
247
234
  "data-placement": placement,
248
- "data-qa-popout": "",
249
- "data-qa-popout-isopen": isOpen === true // $FlowIssue - upgrade v0.112.0
250
-
235
+ "data-qa-popout": '',
236
+ "data-qa-popout-isopen": isOpen === true
237
+ // $FlowIssue - upgrade v0.112.0
251
238
  }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(animated.div, {
252
239
  style: props
253
240
  }, /*#__PURE__*/React.createElement(FocusLock, _extends({
254
241
  autoFocus: autoFocus,
255
242
  returnFocus: returnFocus,
256
243
  disabled: !focusOnContent
257
- }, restFocusLockProps), typeof content === "function" && content({
244
+ }, restFocusLockProps), typeof content === 'function' && content({
258
245
  hide: hide
259
- }), typeof content !== "function" && content)));
246
+ }), typeof content !== 'function' && content)));
260
247
  }));
261
248
  }));
262
249
  }
263
-
264
250
  var PopoutContent = function PopoutContent(_ref4) {
265
251
  var children = _ref4.children,
266
- rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
267
-
252
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
268
253
  return /*#__PURE__*/React.createElement(Box, _extends({
269
254
  bg: "container.background.base",
270
255
  color: "text.body",
@@ -276,6 +261,5 @@ var PopoutContent = function PopoutContent(_ref4) {
276
261
  m: 300
277
262
  }, rest), children);
278
263
  };
279
-
280
264
  Popout.Content = PopoutContent;
281
- Popout.Content.displayName = "Popout.Content";
265
+ Popout.Content.displayName = 'Popout.Content';
@@ -1,6 +1,6 @@
1
- import styled from "styled-components";
2
- import { COMMON, LAYOUT } from "../utils/system-props";
3
- // eslint-disable-next-line prettier/prettier
1
+
2
+ import styled from 'styled-components';
3
+ import { COMMON, LAYOUT } from '../utils/system-props';
4
4
  export var TargetWrapper = styled.div.withConfig({
5
5
  displayName: "styles__TargetWrapper",
6
6
  componentId: "sc-qo3sn-0"
@@ -1,76 +1,58 @@
1
1
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
2
-
3
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
4
-
5
- import * as React from "react";
6
- import { createPortal } from "react-dom";
7
- import { canUseDOM } from "../utils";
8
-
2
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
3
+ import * as React from 'react';
4
+ import { createPortal } from 'react-dom';
5
+ import { canUseDOM } from '../utils';
9
6
  var Portal = /*#__PURE__*/function (_React$Component) {
10
7
  _inheritsLoose(Portal, _React$Component);
11
-
12
8
  function Portal(props) {
13
9
  var _this;
14
-
15
10
  _this = _React$Component.call(this, props) || this;
16
11
  _this.el = null;
17
-
18
12
  if (canUseDOM()) {
19
13
  var as = props.as,
20
- el = props.el,
21
- id = props.id;
22
-
14
+ el = props.el,
15
+ id = props.id;
23
16
  if (el) {
24
17
  _this.el = el;
25
18
  } else {
26
19
  _this.el = document.createElement(as);
27
-
28
- _this.el.setAttribute("data-racine-portal", id);
20
+ _this.el.setAttribute('data-racine-portal', id);
29
21
  }
30
22
  }
31
-
32
23
  return _this;
33
24
  }
34
-
35
25
  var _proto = Portal.prototype;
36
-
37
26
  _proto.componentDidMount = function componentDidMount() {
38
27
  if (canUseDOM() && this.el) {
39
28
  var _this$props$container = this.props.container,
40
- container = _this$props$container === void 0 ? document.body : _this$props$container;
41
-
29
+ container = _this$props$container === void 0 ? document.body : _this$props$container;
42
30
  if (container) {
43
31
  // for flow
44
32
  container.appendChild(this.el);
45
33
  }
46
34
  }
47
35
  };
48
-
49
36
  _proto.componentWillUnmount = function componentWillUnmount() {
50
37
  if (canUseDOM() && this.el) {
51
38
  var _this$props$container2 = this.props.container,
52
- container = _this$props$container2 === void 0 ? document.body : _this$props$container2;
53
-
39
+ container = _this$props$container2 === void 0 ? document.body : _this$props$container2;
54
40
  if (container) {
55
41
  // for flow
56
42
  container.removeChild(this.el);
57
43
  }
58
44
  }
59
45
  };
60
-
61
46
  _proto.render = function render() {
62
47
  if (this.el) {
63
48
  return /*#__PURE__*/createPortal(this.props.children, this.el);
64
49
  }
65
-
66
50
  return this.props.children;
67
51
  };
68
-
69
52
  return Portal;
70
53
  }(React.Component);
71
-
72
54
  Portal.defaultProps = {
73
- as: "div",
74
- id: ""
55
+ as: 'div',
56
+ id: ''
75
57
  };
76
58
  export { Portal as default };
@@ -1,77 +1,59 @@
1
1
  var _excluded = ["id", "value", "name", "label", "checked", "disabled", "onChange", "onFocus", "onBlur", "ariaLabel", "qa"];
2
-
3
- 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); }
4
-
2
+ 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); }
5
3
  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; }
6
-
7
4
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
8
-
9
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
10
-
11
- import * as React from "react";
12
- import Container, { Input, InputWrapper, LabelText } from "./styles";
13
-
5
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
6
+ import * as React from 'react';
7
+ import Container, { Input, InputWrapper, LabelText } from './styles';
14
8
  /**
15
9
  * Primitive Radio Element
16
- */
17
- var Radio = /*#__PURE__*/function (_React$Component) {
10
+ */var Radio = /*#__PURE__*/function (_React$Component) {
18
11
  _inheritsLoose(Radio, _React$Component);
19
-
20
12
  function Radio() {
21
13
  var _this;
22
-
23
14
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
24
15
  args[_key] = arguments[_key];
25
16
  }
26
-
27
17
  _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
28
-
29
18
  _this.handleChange = function (e) {
30
19
  if (!!_this.props.checked || _this.props.disabled) {
31
20
  return;
32
21
  }
33
-
34
22
  _this.props.onChange && _this.props.onChange(e);
35
23
  };
36
-
37
24
  _this.handleFocus = function (e) {
38
25
  if (_this.props.onFocus) {
39
26
  _this.props.onFocus(e);
40
27
  }
41
28
  };
42
-
43
29
  _this.handleBlur = function (e) {
44
30
  if (_this.props.onBlur) {
45
31
  _this.props.onBlur(e);
46
32
  }
47
33
  };
48
-
49
34
  return _this;
50
35
  }
51
-
52
36
  var _proto = Radio.prototype;
53
-
54
37
  _proto.render = function render() {
55
38
  var _this$props = this.props,
56
- id = _this$props.id,
57
- value = _this$props.value,
58
- name = _this$props.name,
59
- label = _this$props.label,
60
- checked = _this$props.checked,
61
- disabled = _this$props.disabled,
62
- onChange = _this$props.onChange,
63
- onFocus = _this$props.onFocus,
64
- onBlur = _this$props.onBlur,
65
- ariaLabel = _this$props.ariaLabel,
66
- _this$props$qa = _this$props.qa,
67
- qa = _this$props$qa === void 0 ? {} : _this$props$qa,
68
- rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
69
-
39
+ id = _this$props.id,
40
+ value = _this$props.value,
41
+ name = _this$props.name,
42
+ label = _this$props.label,
43
+ checked = _this$props.checked,
44
+ disabled = _this$props.disabled,
45
+ onChange = _this$props.onChange,
46
+ onFocus = _this$props.onFocus,
47
+ onBlur = _this$props.onBlur,
48
+ ariaLabel = _this$props.ariaLabel,
49
+ _this$props$qa = _this$props.qa,
50
+ qa = _this$props$qa === void 0 ? {} : _this$props$qa,
51
+ rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
70
52
  return (
71
53
  /*#__PURE__*/
72
54
  // $FlowIssue - upgrade v0.112.0
73
55
  React.createElement(Container, _extends({
74
- as: label && "label"
56
+ as: label && 'label'
75
57
  }, rest), /*#__PURE__*/React.createElement(InputWrapper, {
76
58
  checked: checked,
77
59
  disabled: disabled
@@ -86,7 +68,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
86
68
  onChange: this.handleChange,
87
69
  onFocus: this.handleFocus,
88
70
  onBlur: this.handleBlur,
89
- "data-qa-radio": name || "",
71
+ "data-qa-radio": name || '',
90
72
  "data-qa-radio-ischecked": checked === true,
91
73
  "data-qa-radio-isdisabled": disabled === true
92
74
  }, qa))), label && /*#__PURE__*/React.createElement(LabelText, {
@@ -94,10 +76,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
94
76
  }, label))
95
77
  );
96
78
  };
97
-
98
79
  return Radio;
99
80
  }(React.Component);
100
-
101
81
  Radio.defaultProps = {
102
82
  disabled: false
103
83
  };
@@ -1,17 +1,18 @@
1
- import styled, { css } from "styled-components";
2
- import { COMMON } from "../utils/system-props";
3
- import { focusRing, disabled } from "../utils/mixins";
4
- import Text from "../Text/";
1
+
2
+ import styled, { css } from 'styled-components';
3
+ import { COMMON } from '../utils/system-props';
4
+ import { focusRing, disabled } from '../utils/mixins';
5
+ import Text from '../Text/';
5
6
  var Container = styled.span.withConfig({
6
7
  displayName: "styles__Container",
7
8
  componentId: "sc-uyr445-0"
8
9
  })(["display:inline-flex;align-items:center;box-sizing:border-box;", ""], COMMON);
9
- Container.displayName = "Radio";
10
+ Container.displayName = 'Radio';
10
11
  export var Input = styled.input.withConfig({
11
12
  displayName: "styles__Input",
12
13
  componentId: "sc-uyr445-1"
13
14
  })(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;cursor:", ";border:1px solid ", ";border-radius:50%;background-color:", ";transition:border-color ", " ", ",background-color ", " ", ";&:focus{", "}"], function (props) {
14
- return props.disabled ? "not-allowed" : "pointer";
15
+ return props.disabled ? 'not-allowed' : 'pointer';
15
16
  }, function (props) {
16
17
  return props.theme.colors.form.border.base;
17
18
  }, function (props) {
@@ -25,17 +26,16 @@ export var Input = styled.input.withConfig({
25
26
  }, function (props) {
26
27
  return props.theme.easing.ease_in;
27
28
  }, focusRing);
28
- Input.displayName = "Input"; // eslint-disable-next-line prettier/prettier
29
-
29
+ Input.displayName = 'Input';
30
30
  export var InputWrapper = styled.span.withConfig({
31
31
  displayName: "styles__InputWrapper",
32
32
  componentId: "sc-uyr445-2"
33
- })(["position:relative;width:", ";height:", ";cursor:", ";", " &:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;opacity:0;transition:opacity ", " ", ";z-index:1;pointer-events:none;cursor:", ";}", " ", ""], function (props) {
33
+ })(["position:relative;width:", ";height:", ";cursor:", ";", " &:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;opacity:0;transition:opacity ", " ", ";z-index:1;pointer-events:none;cursor:", ";}", " ", ""], function (props) {
34
34
  return props.theme.space[400];
35
35
  }, function (props) {
36
36
  return props.theme.space[400];
37
37
  }, function (props) {
38
- return props.disabled ? "not-allowed" : "pointer";
38
+ return props.disabled ? 'not-allowed' : 'pointer';
39
39
  }, function (props) {
40
40
  return props.disabled && disabled;
41
41
  }, function (props) {
@@ -43,13 +43,13 @@ export var InputWrapper = styled.span.withConfig({
43
43
  }, function (props) {
44
44
  return props.theme.easing.ease_in;
45
45
  }, function (props) {
46
- return props.disabled ? "not-allowed" : "pointer";
46
+ return props.disabled ? 'not-allowed' : 'pointer';
47
47
  }, function (props) {
48
48
  return !props.checked && css(["&:hover,&:focus{", "{border-color:", ";background-color:", ";}&:before{opacity:", ";background-color:", ";}}"], Input, props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.disabled ? 0 : 1, props.theme.colors.form.background.base);
49
49
  }, function (props) {
50
50
  return props.checked && css(["", "{border-color:", ";background-color:", ";}&:before{opacity:1;background-color:", ";}"], Input, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.theme.colors.form.background.base);
51
51
  });
52
- InputWrapper.displayName = "InputWrapper";
52
+ InputWrapper.displayName = 'InputWrapper';
53
53
  export var LabelText = styled(Text).withConfig({
54
54
  displayName: "styles__LabelText",
55
55
  componentId: "sc-uyr445-3"
@@ -58,11 +58,11 @@ export var LabelText = styled(Text).withConfig({
58
58
  }, function (props) {
59
59
  return props.theme.typography[200].fontSize;
60
60
  }, function (props) {
61
- return props.disabled ? "not-allowed" : "pointer";
61
+ return props.disabled ? 'not-allowed' : 'pointer';
62
62
  }, function (props) {
63
63
  return props.theme.colors.text.headline;
64
64
  }, function (props) {
65
65
  return props.disabled && css(["opacity:0.4;"]);
66
66
  });
67
- LabelText.displayName = "LabelText";
67
+ LabelText.displayName = 'LabelText';
68
68
  export default Container;