@elastic/eui 93.2.0 → 93.4.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 (418) hide show
  1. package/dist/eui_charts_theme.d.ts +9 -0
  2. package/dist/eui_charts_theme.js +56 -14
  3. package/dist/eui_charts_theme.js.map +1 -1
  4. package/dist/eui_theme_dark.css +3 -0
  5. package/dist/eui_theme_dark.min.css +1 -1
  6. package/dist/eui_theme_light.css +3 -0
  7. package/dist/eui_theme_light.min.css +1 -1
  8. package/es/components/breadcrumbs/_breadcrumb_content.js +362 -0
  9. package/es/components/breadcrumbs/_breadcrumb_content.styles.js +48 -0
  10. package/es/components/breadcrumbs/breadcrumb.js +10 -324
  11. package/es/components/breadcrumbs/breadcrumb.styles.js +5 -27
  12. package/es/components/breadcrumbs/breadcrumbs.js +8 -6
  13. package/es/components/breadcrumbs/types.js +1 -0
  14. package/es/components/button/button_display/_button_display.js +2 -3
  15. package/es/components/button/button_empty/button_empty.js +2 -3
  16. package/es/components/button/button_group/button_group.js +19 -7
  17. package/es/components/button/button_group/button_group.styles.js +11 -14
  18. package/es/components/button/button_group/button_group_button.js +59 -5
  19. package/es/components/button/button_group/button_group_button.styles.js +39 -3
  20. package/es/components/button/button_icon/button_icon.js +4 -5
  21. package/es/components/button/button_icon/button_icon.styles.js +11 -3
  22. package/es/components/datagrid/body/cell/data_grid_cell.js +102 -59
  23. package/es/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  24. package/es/components/datagrid/body/cell/data_grid_cell_popover.js +64 -56
  25. package/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +34 -31
  26. package/es/components/datagrid/body/cell/index.js +1 -1
  27. package/es/components/datagrid/body/data_grid_body.js +14 -0
  28. package/es/components/datagrid/body/data_grid_body_custom.js +54 -35
  29. package/es/components/datagrid/body/data_grid_body_virtualized.js +87 -56
  30. package/es/components/datagrid/body/data_grid_row_manager.js +7 -5
  31. package/es/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  32. package/es/components/datagrid/body/header/data_grid_control_header_cell.js +5 -4
  33. package/es/components/datagrid/body/header/data_grid_header_cell.js +73 -53
  34. package/es/components/datagrid/body/header/data_grid_header_row.js +15 -551
  35. package/es/components/datagrid/body/header/use_data_grid_header.js +7 -6
  36. package/es/components/datagrid/controls/column_selector.js +126 -123
  37. package/es/components/datagrid/controls/column_sorting.js +605 -103
  38. package/es/components/datagrid/controls/column_sorting_draggable.js +24 -22
  39. package/es/components/datagrid/controls/display_selector.js +109 -107
  40. package/es/components/datagrid/data_grid.a11y.js +13 -12
  41. package/es/components/datagrid/data_grid.js +47 -22
  42. package/es/components/datagrid/utils/col_widths.js +12 -8
  43. package/es/components/datagrid/utils/focus.js +10 -8
  44. package/es/components/datagrid/utils/grid_height_width.js +31 -30
  45. package/es/components/datagrid/utils/ref.js +1 -1
  46. package/es/components/datagrid/utils/row_heights.js +2 -2
  47. package/es/components/datagrid/utils/sorting.js +29 -27
  48. package/es/components/date_picker/super_date_picker/super_date_picker.js +9 -0
  49. package/es/components/date_picker/super_date_picker/super_update_button.js +57 -29
  50. package/es/components/facet/facet_button.styles.js +1 -2
  51. package/es/components/flex/flex_grid.js +22 -8
  52. package/es/components/flex/flex_grid.styles.js +13 -6
  53. package/es/components/flex/flex_group.js +10 -11
  54. package/es/components/flex/flex_item.js +9 -11
  55. package/es/components/flex/flex_item.styles.js +107 -122
  56. package/es/components/flyout/flyout.js +16 -18
  57. package/es/components/header/header_breadcrumbs/header_breadcrumbs.js +7 -7
  58. package/es/components/icon/icon.js +13 -16
  59. package/es/components/icon/icon.styles.js +6 -9
  60. package/es/components/link/external_link_icon.js +11 -8
  61. package/es/components/link/link.js +2 -3
  62. package/es/components/link/link.styles.js +4 -10
  63. package/es/components/modal/confirm_modal.js +2 -1
  64. package/es/components/modal/modal.js +12 -3
  65. package/es/components/observer/resize_observer/resize_observer.js +15 -24
  66. package/es/components/page/page_header/page_header_content.js +4 -2
  67. package/es/components/progress/progress.styles.js +2 -2
  68. package/es/components/skeleton/skeleton_circle.js +2 -3
  69. package/es/components/skeleton/skeleton_rectangle.js +2 -3
  70. package/es/components/skeleton/skeleton_text.js +16 -12
  71. package/es/components/skeleton/skeleton_title.js +2 -3
  72. package/es/components/spacer/spacer.js +2 -3
  73. package/es/components/text/text.js +2 -3
  74. package/es/components/text/text_align.js +1 -2
  75. package/es/components/text/text_align.styles.js +5 -7
  76. package/es/components/text/text_color.js +2 -3
  77. package/es/components/title/title.js +2 -3
  78. package/es/components/title/title.styles.js +0 -7
  79. package/es/components/toast/global_toast_list.js +70 -73
  80. package/es/components/toast/toast.js +27 -42
  81. package/es/components/toast/toast.styles.js +2 -17
  82. package/es/global_styling/mixins/_typography.js +17 -6
  83. package/es/services/color/eui_palettes.js +21 -13
  84. package/es/services/color/index.js +1 -1
  85. package/es/services/hooks/index.js +1 -0
  86. package/es/services/hooks/useDeepEqual.js +23 -0
  87. package/es/services/index.js +1 -1
  88. package/es/services/theme/index.js +1 -1
  89. package/es/services/theme/style_memoization.js +47 -14
  90. package/es/themes/amsterdam/global_styling/mixins/button.js +47 -24
  91. package/eui.d.ts +2862 -2748
  92. package/i18ntokens.json +267 -267
  93. package/lib/components/breadcrumbs/_breadcrumb_content.js +372 -0
  94. package/lib/components/breadcrumbs/_breadcrumb_content.styles.js +55 -0
  95. package/lib/components/breadcrumbs/breadcrumb.js +11 -328
  96. package/lib/components/breadcrumbs/breadcrumb.styles.js +5 -29
  97. package/lib/components/breadcrumbs/breadcrumbs.js +7 -5
  98. package/lib/components/breadcrumbs/types.js +5 -0
  99. package/lib/components/button/button_display/_button_display.js +1 -2
  100. package/lib/components/button/button_empty/button_empty.js +1 -2
  101. package/lib/components/button/button_group/button_group.js +18 -6
  102. package/lib/components/button/button_group/button_group.styles.js +11 -14
  103. package/lib/components/button/button_group/button_group_button.js +59 -5
  104. package/lib/components/button/button_group/button_group_button.styles.js +45 -11
  105. package/lib/components/button/button_icon/button_icon.js +3 -4
  106. package/lib/components/button/button_icon/button_icon.styles.js +10 -2
  107. package/lib/components/datagrid/body/cell/data_grid_cell.js +100 -58
  108. package/lib/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  109. package/lib/components/datagrid/body/cell/data_grid_cell_popover.js +63 -55
  110. package/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +34 -31
  111. package/lib/components/datagrid/body/cell/index.js +2 -2
  112. package/lib/components/datagrid/body/data_grid_body.js +14 -0
  113. package/lib/components/datagrid/body/data_grid_body_custom.js +53 -34
  114. package/lib/components/datagrid/body/data_grid_body_virtualized.js +86 -55
  115. package/lib/components/datagrid/body/data_grid_row_manager.js +6 -4
  116. package/lib/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  117. package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +8 -4
  118. package/lib/components/datagrid/body/header/data_grid_header_cell.js +72 -52
  119. package/lib/components/datagrid/body/header/data_grid_header_row.js +14 -550
  120. package/lib/components/datagrid/body/header/use_data_grid_header.js +7 -6
  121. package/lib/components/datagrid/controls/column_selector.js +126 -123
  122. package/lib/components/datagrid/controls/column_sorting.js +615 -110
  123. package/lib/components/datagrid/controls/column_sorting_draggable.js +27 -22
  124. package/lib/components/datagrid/controls/display_selector.js +109 -107
  125. package/lib/components/datagrid/data_grid.a11y.js +13 -12
  126. package/lib/components/datagrid/data_grid.js +45 -20
  127. package/lib/components/datagrid/utils/col_widths.js +12 -8
  128. package/lib/components/datagrid/utils/focus.js +10 -8
  129. package/lib/components/datagrid/utils/grid_height_width.js +29 -28
  130. package/lib/components/datagrid/utils/ref.js +1 -1
  131. package/lib/components/datagrid/utils/row_heights.js +1 -1
  132. package/lib/components/datagrid/utils/sorting.js +31 -29
  133. package/lib/components/date_picker/super_date_picker/super_date_picker.js +9 -0
  134. package/lib/components/date_picker/super_date_picker/super_update_button.js +57 -29
  135. package/lib/components/facet/facet_button.styles.js +1 -2
  136. package/lib/components/flex/flex_grid.js +23 -7
  137. package/lib/components/flex/flex_grid.styles.js +13 -6
  138. package/lib/components/flex/flex_group.js +10 -10
  139. package/lib/components/flex/flex_item.js +13 -13
  140. package/lib/components/flex/flex_item.styles.js +107 -122
  141. package/lib/components/flyout/flyout.js +16 -18
  142. package/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +7 -7
  143. package/lib/components/icon/icon.js +12 -15
  144. package/lib/components/icon/icon.styles.js +5 -8
  145. package/lib/components/link/external_link_icon.js +10 -7
  146. package/lib/components/link/link.js +1 -2
  147. package/lib/components/link/link.styles.js +6 -14
  148. package/lib/components/modal/confirm_modal.js +2 -1
  149. package/lib/components/modal/modal.js +12 -3
  150. package/lib/components/observer/resize_observer/resize_observer.js +15 -24
  151. package/lib/components/page/page_header/page_header_content.js +4 -2
  152. package/lib/components/progress/progress.styles.js +1 -1
  153. package/lib/components/skeleton/skeleton_circle.js +1 -2
  154. package/lib/components/skeleton/skeleton_rectangle.js +1 -2
  155. package/lib/components/skeleton/skeleton_text.js +18 -11
  156. package/lib/components/skeleton/skeleton_title.js +1 -2
  157. package/lib/components/spacer/spacer.js +1 -2
  158. package/lib/components/text/text.js +1 -2
  159. package/lib/components/text/text_align.js +1 -2
  160. package/lib/components/text/text_align.styles.js +5 -7
  161. package/lib/components/text/text_color.js +1 -2
  162. package/lib/components/title/title.js +1 -2
  163. package/lib/components/title/title.styles.js +2 -10
  164. package/lib/components/toast/global_toast_list.js +68 -71
  165. package/lib/components/toast/toast.js +25 -40
  166. package/lib/components/toast/toast.styles.js +11 -25
  167. package/lib/global_styling/mixins/_typography.js +27 -19
  168. package/lib/services/color/eui_palettes.js +24 -14
  169. package/lib/services/color/index.js +14 -0
  170. package/lib/services/hooks/index.js +11 -0
  171. package/lib/services/hooks/useDeepEqual.js +30 -0
  172. package/lib/services/index.js +15 -1
  173. package/lib/services/theme/index.js +6 -0
  174. package/lib/services/theme/style_memoization.js +49 -16
  175. package/lib/themes/amsterdam/global_styling/mixins/button.js +49 -25
  176. package/optimize/es/components/breadcrumbs/_breadcrumb_content.js +153 -0
  177. package/optimize/es/components/breadcrumbs/_breadcrumb_content.styles.js +48 -0
  178. package/optimize/es/components/breadcrumbs/breadcrumb.js +10 -109
  179. package/optimize/es/components/breadcrumbs/breadcrumb.styles.js +5 -27
  180. package/optimize/es/components/breadcrumbs/breadcrumbs.js +4 -4
  181. package/optimize/es/components/breadcrumbs/types.js +1 -0
  182. package/optimize/es/components/button/button_display/_button_display.js +2 -3
  183. package/optimize/es/components/button/button_empty/button_empty.js +2 -3
  184. package/optimize/es/components/button/button_group/button_group.js +5 -7
  185. package/optimize/es/components/button/button_group/button_group.styles.js +11 -14
  186. package/optimize/es/components/button/button_group/button_group_button.js +36 -4
  187. package/optimize/es/components/button/button_group/button_group_button.styles.js +39 -3
  188. package/optimize/es/components/button/button_icon/button_icon.js +4 -5
  189. package/optimize/es/components/button/button_icon/button_icon.styles.js +8 -3
  190. package/optimize/es/components/datagrid/body/cell/data_grid_cell.js +83 -56
  191. package/optimize/es/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  192. package/optimize/es/components/datagrid/body/cell/data_grid_cell_popover.js +64 -56
  193. package/optimize/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +34 -31
  194. package/optimize/es/components/datagrid/body/cell/index.js +1 -1
  195. package/optimize/es/components/datagrid/body/data_grid_body_custom.js +40 -35
  196. package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +71 -49
  197. package/optimize/es/components/datagrid/body/data_grid_row_manager.js +7 -5
  198. package/optimize/es/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  199. package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +4 -3
  200. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +65 -49
  201. package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +15 -13
  202. package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +7 -6
  203. package/optimize/es/components/datagrid/controls/column_selector.js +126 -123
  204. package/optimize/es/components/datagrid/controls/column_sorting.js +121 -103
  205. package/optimize/es/components/datagrid/controls/column_sorting_draggable.js +24 -22
  206. package/optimize/es/components/datagrid/controls/display_selector.js +109 -107
  207. package/optimize/es/components/datagrid/data_grid.a11y.js +13 -12
  208. package/optimize/es/components/datagrid/data_grid.js +47 -22
  209. package/optimize/es/components/datagrid/utils/col_widths.js +9 -5
  210. package/optimize/es/components/datagrid/utils/focus.js +10 -8
  211. package/optimize/es/components/datagrid/utils/grid_height_width.js +31 -30
  212. package/optimize/es/components/datagrid/utils/ref.js +1 -1
  213. package/optimize/es/components/datagrid/utils/row_heights.js +2 -2
  214. package/optimize/es/components/datagrid/utils/sorting.js +29 -27
  215. package/optimize/es/components/date_picker/super_date_picker/super_update_button.js +49 -29
  216. package/optimize/es/components/facet/facet_button.styles.js +1 -2
  217. package/optimize/es/components/flex/flex_grid.js +19 -8
  218. package/optimize/es/components/flex/flex_grid.styles.js +13 -6
  219. package/optimize/es/components/flex/flex_group.js +9 -10
  220. package/optimize/es/components/flex/flex_item.js +9 -11
  221. package/optimize/es/components/flex/flex_item.styles.js +107 -122
  222. package/optimize/es/components/flyout/flyout.js +16 -18
  223. package/optimize/es/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  224. package/optimize/es/components/icon/icon.js +13 -16
  225. package/optimize/es/components/icon/icon.styles.js +6 -9
  226. package/optimize/es/components/link/external_link_icon.js +11 -8
  227. package/optimize/es/components/link/link.js +2 -3
  228. package/optimize/es/components/link/link.styles.js +4 -10
  229. package/optimize/es/components/modal/confirm_modal.js +2 -1
  230. package/optimize/es/components/modal/modal.js +6 -2
  231. package/optimize/es/components/observer/resize_observer/resize_observer.js +15 -24
  232. package/optimize/es/components/progress/progress.styles.js +2 -2
  233. package/optimize/es/components/skeleton/skeleton_circle.js +2 -3
  234. package/optimize/es/components/skeleton/skeleton_rectangle.js +2 -3
  235. package/optimize/es/components/skeleton/skeleton_text.js +16 -12
  236. package/optimize/es/components/skeleton/skeleton_title.js +2 -3
  237. package/optimize/es/components/spacer/spacer.js +2 -3
  238. package/optimize/es/components/text/text.js +2 -3
  239. package/optimize/es/components/text/text_align.js +1 -2
  240. package/optimize/es/components/text/text_align.styles.js +5 -7
  241. package/optimize/es/components/text/text_color.js +2 -3
  242. package/optimize/es/components/title/title.js +2 -3
  243. package/optimize/es/components/title/title.styles.js +0 -7
  244. package/optimize/es/components/toast/global_toast_list.js +70 -73
  245. package/optimize/es/components/toast/toast.js +27 -42
  246. package/optimize/es/components/toast/toast.styles.js +2 -17
  247. package/optimize/es/global_styling/mixins/_typography.js +14 -6
  248. package/optimize/es/services/color/eui_palettes.js +21 -13
  249. package/optimize/es/services/color/index.js +1 -1
  250. package/optimize/es/services/hooks/index.js +1 -0
  251. package/optimize/es/services/hooks/useDeepEqual.js +23 -0
  252. package/optimize/es/services/index.js +1 -1
  253. package/optimize/es/services/theme/index.js +1 -1
  254. package/optimize/es/services/theme/style_memoization.js +47 -14
  255. package/optimize/es/themes/amsterdam/global_styling/mixins/button.js +47 -24
  256. package/optimize/lib/components/breadcrumbs/_breadcrumb_content.js +163 -0
  257. package/optimize/lib/components/breadcrumbs/_breadcrumb_content.styles.js +55 -0
  258. package/optimize/lib/components/breadcrumbs/breadcrumb.js +10 -112
  259. package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js +5 -29
  260. package/optimize/lib/components/breadcrumbs/breadcrumbs.js +3 -3
  261. package/optimize/lib/components/breadcrumbs/types.js +5 -0
  262. package/optimize/lib/components/button/button_display/_button_display.js +1 -2
  263. package/optimize/lib/components/button/button_empty/button_empty.js +1 -2
  264. package/optimize/lib/components/button/button_group/button_group.js +4 -6
  265. package/optimize/lib/components/button/button_group/button_group.styles.js +11 -14
  266. package/optimize/lib/components/button/button_group/button_group_button.js +37 -5
  267. package/optimize/lib/components/button/button_group/button_group_button.styles.js +45 -11
  268. package/optimize/lib/components/button/button_icon/button_icon.js +3 -4
  269. package/optimize/lib/components/button/button_icon/button_icon.styles.js +8 -2
  270. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js +81 -55
  271. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  272. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_popover.js +63 -55
  273. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +34 -31
  274. package/optimize/lib/components/datagrid/body/cell/index.js +2 -2
  275. package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +39 -34
  276. package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +72 -50
  277. package/optimize/lib/components/datagrid/body/data_grid_row_manager.js +6 -4
  278. package/optimize/lib/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  279. package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +8 -4
  280. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +65 -49
  281. package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +14 -12
  282. package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +7 -6
  283. package/optimize/lib/components/datagrid/controls/column_selector.js +126 -123
  284. package/optimize/lib/components/datagrid/controls/column_sorting.js +125 -107
  285. package/optimize/lib/components/datagrid/controls/column_sorting_draggable.js +27 -22
  286. package/optimize/lib/components/datagrid/controls/display_selector.js +109 -107
  287. package/optimize/lib/components/datagrid/data_grid.a11y.js +13 -12
  288. package/optimize/lib/components/datagrid/data_grid.js +45 -20
  289. package/optimize/lib/components/datagrid/utils/col_widths.js +9 -5
  290. package/optimize/lib/components/datagrid/utils/focus.js +10 -8
  291. package/optimize/lib/components/datagrid/utils/grid_height_width.js +29 -28
  292. package/optimize/lib/components/datagrid/utils/ref.js +1 -1
  293. package/optimize/lib/components/datagrid/utils/row_heights.js +1 -1
  294. package/optimize/lib/components/datagrid/utils/sorting.js +31 -29
  295. package/optimize/lib/components/date_picker/super_date_picker/super_update_button.js +49 -29
  296. package/optimize/lib/components/facet/facet_button.styles.js +1 -2
  297. package/optimize/lib/components/flex/flex_grid.js +21 -7
  298. package/optimize/lib/components/flex/flex_grid.styles.js +13 -6
  299. package/optimize/lib/components/flex/flex_group.js +9 -9
  300. package/optimize/lib/components/flex/flex_item.js +13 -13
  301. package/optimize/lib/components/flex/flex_item.styles.js +107 -122
  302. package/optimize/lib/components/flyout/flyout.js +16 -18
  303. package/optimize/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  304. package/optimize/lib/components/icon/icon.js +12 -15
  305. package/optimize/lib/components/icon/icon.styles.js +5 -8
  306. package/optimize/lib/components/link/external_link_icon.js +10 -7
  307. package/optimize/lib/components/link/link.js +1 -2
  308. package/optimize/lib/components/link/link.styles.js +6 -14
  309. package/optimize/lib/components/modal/confirm_modal.js +2 -1
  310. package/optimize/lib/components/modal/modal.js +6 -2
  311. package/optimize/lib/components/observer/resize_observer/resize_observer.js +15 -24
  312. package/optimize/lib/components/progress/progress.styles.js +1 -1
  313. package/optimize/lib/components/skeleton/skeleton_circle.js +1 -2
  314. package/optimize/lib/components/skeleton/skeleton_rectangle.js +1 -2
  315. package/optimize/lib/components/skeleton/skeleton_text.js +18 -11
  316. package/optimize/lib/components/skeleton/skeleton_title.js +1 -2
  317. package/optimize/lib/components/spacer/spacer.js +1 -2
  318. package/optimize/lib/components/text/text.js +1 -2
  319. package/optimize/lib/components/text/text_align.js +1 -2
  320. package/optimize/lib/components/text/text_align.styles.js +5 -7
  321. package/optimize/lib/components/text/text_color.js +1 -2
  322. package/optimize/lib/components/title/title.js +1 -2
  323. package/optimize/lib/components/title/title.styles.js +2 -10
  324. package/optimize/lib/components/toast/global_toast_list.js +68 -71
  325. package/optimize/lib/components/toast/toast.js +25 -40
  326. package/optimize/lib/components/toast/toast.styles.js +11 -25
  327. package/optimize/lib/global_styling/mixins/_typography.js +25 -19
  328. package/optimize/lib/services/color/eui_palettes.js +24 -14
  329. package/optimize/lib/services/color/index.js +14 -0
  330. package/optimize/lib/services/hooks/index.js +11 -0
  331. package/optimize/lib/services/hooks/useDeepEqual.js +30 -0
  332. package/optimize/lib/services/index.js +15 -1
  333. package/optimize/lib/services/theme/index.js +6 -0
  334. package/optimize/lib/services/theme/style_memoization.js +49 -16
  335. package/optimize/lib/themes/amsterdam/global_styling/mixins/button.js +49 -26
  336. package/package.json +3 -3
  337. package/src/components/datagrid/_data_grid_data_row.scss +4 -0
  338. package/test-env/components/breadcrumbs/_breadcrumb_content.js +363 -0
  339. package/test-env/components/breadcrumbs/_breadcrumb_content.styles.js +55 -0
  340. package/test-env/components/breadcrumbs/breadcrumb.js +11 -323
  341. package/test-env/components/breadcrumbs/breadcrumb.styles.js +5 -29
  342. package/test-env/components/breadcrumbs/breadcrumbs.js +7 -5
  343. package/test-env/components/breadcrumbs/types.js +5 -0
  344. package/test-env/components/button/button_display/_button_display.js +1 -2
  345. package/test-env/components/button/button_empty/button_empty.js +1 -2
  346. package/test-env/components/button/button_group/button_group.js +18 -6
  347. package/test-env/components/button/button_group/button_group.styles.js +11 -14
  348. package/test-env/components/button/button_group/button_group_button.js +56 -5
  349. package/test-env/components/button/button_group/button_group_button.styles.js +45 -11
  350. package/test-env/components/button/button_icon/button_icon.js +3 -4
  351. package/test-env/components/button/button_icon/button_icon.styles.js +8 -2
  352. package/test-env/components/datagrid/body/cell/data_grid_cell.js +100 -58
  353. package/test-env/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  354. package/test-env/components/datagrid/body/cell/data_grid_cell_popover.js +63 -55
  355. package/test-env/components/datagrid/body/cell/data_grid_cell_wrapper.js +34 -31
  356. package/test-env/components/datagrid/body/cell/index.js +2 -2
  357. package/test-env/components/datagrid/body/data_grid_body.js +14 -0
  358. package/test-env/components/datagrid/body/data_grid_body_custom.js +53 -34
  359. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +86 -55
  360. package/test-env/components/datagrid/body/data_grid_row_manager.js +6 -4
  361. package/test-env/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  362. package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +8 -4
  363. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +72 -52
  364. package/test-env/components/datagrid/body/header/data_grid_header_row.js +14 -550
  365. package/test-env/components/datagrid/body/header/use_data_grid_header.js +7 -6
  366. package/test-env/components/datagrid/controls/column_selector.js +126 -123
  367. package/test-env/components/datagrid/controls/column_sorting.js +607 -106
  368. package/test-env/components/datagrid/controls/column_sorting_draggable.js +27 -22
  369. package/test-env/components/datagrid/controls/display_selector.js +109 -107
  370. package/test-env/components/datagrid/data_grid.a11y.js +13 -12
  371. package/test-env/components/datagrid/data_grid.js +45 -20
  372. package/test-env/components/datagrid/utils/col_widths.js +9 -5
  373. package/test-env/components/datagrid/utils/focus.js +10 -8
  374. package/test-env/components/datagrid/utils/grid_height_width.js +29 -28
  375. package/test-env/components/datagrid/utils/ref.js +1 -1
  376. package/test-env/components/datagrid/utils/row_heights.js +1 -1
  377. package/test-env/components/datagrid/utils/sorting.js +31 -29
  378. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +9 -0
  379. package/test-env/components/date_picker/super_date_picker/super_update_button.js +57 -29
  380. package/test-env/components/facet/facet_button.styles.js +1 -2
  381. package/test-env/components/flex/flex_grid.js +21 -7
  382. package/test-env/components/flex/flex_grid.styles.js +13 -6
  383. package/test-env/components/flex/flex_group.js +10 -10
  384. package/test-env/components/flex/flex_item.js +13 -13
  385. package/test-env/components/flex/flex_item.styles.js +107 -122
  386. package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.js +7 -7
  387. package/test-env/components/icon/icon.styles.js +5 -8
  388. package/test-env/components/link/external_link_icon.js +10 -7
  389. package/test-env/components/link/link.js +1 -2
  390. package/test-env/components/link/link.styles.js +6 -14
  391. package/test-env/components/modal/confirm_modal.js +2 -1
  392. package/test-env/components/modal/modal.js +12 -3
  393. package/test-env/components/page/page_header/page_header_content.js +4 -2
  394. package/test-env/components/progress/progress.styles.js +1 -1
  395. package/test-env/components/skeleton/skeleton_circle.js +1 -2
  396. package/test-env/components/skeleton/skeleton_rectangle.js +1 -2
  397. package/test-env/components/skeleton/skeleton_text.js +18 -11
  398. package/test-env/components/skeleton/skeleton_title.js +1 -2
  399. package/test-env/components/spacer/spacer.js +1 -2
  400. package/test-env/components/text/text.js +1 -2
  401. package/test-env/components/text/text_align.js +1 -2
  402. package/test-env/components/text/text_align.styles.js +5 -7
  403. package/test-env/components/text/text_color.js +1 -2
  404. package/test-env/components/title/title.js +1 -2
  405. package/test-env/components/title/title.styles.js +2 -10
  406. package/test-env/components/toast/global_toast_list.js +68 -71
  407. package/test-env/components/toast/toast.js +25 -40
  408. package/test-env/components/toast/toast.styles.js +11 -25
  409. package/test-env/global_styling/mixins/_typography.js +25 -19
  410. package/test-env/services/color/eui_palettes.js +24 -14
  411. package/test-env/services/color/index.js +14 -0
  412. package/test-env/services/hooks/index.js +11 -0
  413. package/test-env/services/hooks/useDeepEqual.js +30 -0
  414. package/test-env/services/index.js +15 -1
  415. package/test-env/services/theme/index.js +6 -0
  416. package/test-env/services/theme/style_memoization.js +49 -16
  417. package/test-env/themes/amsterdam/global_styling/mixins/button.js +49 -26
  418. package/src/themes/charts/theme.scss +0 -5
@@ -38,8 +38,7 @@ var EuiTextColor = function EuiTextColor(_ref) {
38
38
  style = _ref.style,
39
39
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
40
40
  var isNamedColor = COLORS.includes(color);
41
- var euiTheme = (0, _services.useEuiTheme)();
42
- var styles = (0, _text_color.euiTextColorStyles)(euiTheme);
41
+ var styles = (0, _services.useEuiMemoizedStyles)(_text_color.euiTextColorStyles);
43
42
  var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
44
43
 
45
44
  // We're checking if is a custom color.
@@ -32,8 +32,7 @@ var EuiTitle = function EuiTitle(_ref) {
32
32
  className = _ref.className,
33
33
  textTransform = _ref.textTransform,
34
34
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
35
- var euiTheme = (0, _services.useEuiTheme)();
36
- var styles = (0, _title.euiTitleStyles)(euiTheme);
35
+ var styles = (0, _services.useEuiMemoizedStyles)(_title.euiTitleStyles);
37
36
  var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
38
37
  var classes = (0, _classnames.default)('euiTitle', className, children.props.className);
39
38
  var props = _objectSpread({
@@ -4,10 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.useEuiTitle = exports.euiTitleStyles = exports.euiTitle = void 0;
7
+ exports.euiTitleStyles = exports.euiTitle = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
- var _services = require("../../services");
11
10
  var _global_styling = require("../../global_styling");
12
11
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
12
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -40,17 +39,10 @@ var euiTitle = function euiTitle(euiThemeContext) {
40
39
  });
41
40
  };
42
41
 
43
- // Hook version
44
- exports.euiTitle = euiTitle;
45
- var useEuiTitle = function useEuiTitle(scale, options) {
46
- var euiTheme = (0, _services.useEuiTheme)();
47
- return euiTitle(euiTheme, scale, options);
48
- };
49
-
50
42
  /**
51
43
  * Styles
52
44
  */
53
- exports.useEuiTitle = useEuiTitle;
45
+ exports.euiTitle = euiTitle;
54
46
  var _ref = process.env.NODE_ENV === "production" ? {
55
47
  name: "1x2qsb1-uppercase",
56
48
  styles: "text-transform:uppercase;label:uppercase;"
@@ -77,10 +77,9 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
77
77
  var isScrollingAnimationFrame = (0, _react.useRef)(0);
78
78
  var startScrollingAnimationFrame = (0, _react.useRef)(0);
79
79
  var listElement = (0, _react.useRef)(null);
80
- var euiTheme = (0, _services.useEuiTheme)();
81
- var styles = (0, _global_toast_list.euiGlobalToastListStyles)(euiTheme);
80
+ var styles = (0, _services.useEuiMemoizedStyles)(_global_toast_list.euiGlobalToastListStyles);
82
81
  var cssStyles = [styles.euiGlobalToastList, styles[side]];
83
- var startScrollingToBottom = function startScrollingToBottom() {
82
+ var startScrollingToBottom = (0, _react.useCallback)(function () {
84
83
  isScrollingToBottom.current = true;
85
84
  var scrollToBottom = function scrollToBottom() {
86
85
  // Although we cancel the requestAnimationFrame in componentWillUnmount,
@@ -103,8 +102,8 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
103
102
  }
104
103
  };
105
104
  startScrollingAnimationFrame.current = window.requestAnimationFrame(scrollToBottom);
106
- };
107
- var onMouseEnter = function onMouseEnter() {
105
+ }, []);
106
+ var onMouseEnter = (0, _react.useCallback)(function () {
108
107
  // Stop scrolling to bottom if we're in mid-scroll, because the user wants to interact with
109
108
  // the list.
110
109
  isScrollingToBottom.current = false;
@@ -117,8 +116,8 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
117
116
  timer.pause();
118
117
  }
119
118
  }
120
- };
121
- var onMouseLeave = function onMouseLeave() {
119
+ }, []);
120
+ var onMouseLeave = (0, _react.useCallback)(function () {
122
121
  isUserInteracting.current = false;
123
122
  for (var _toastId2 in toastIdToTimerMap.current) {
124
123
  if (toastIdToTimerMap.current.hasOwnProperty(_toastId2)) {
@@ -126,8 +125,8 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
126
125
  timer.resume();
127
126
  }
128
127
  }
129
- };
130
- var onScroll = function onScroll() {
128
+ }, []);
129
+ var onScroll = (0, _react.useCallback)(function () {
131
130
  // Given that this method also gets invoked by the synthetic scroll that happens when a new toast gets added,
132
131
  // we want to evaluate if the scroll bottom has been reached only when the user is interacting with the toast,
133
132
  // this way we always retain the scroll position the user has set despite adding in new toasts.
@@ -135,7 +134,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
135
134
  if (listElement.current && isUserInteracting.current) {
136
135
  isScrolledToBottom.current = listElement.current.scrollHeight - listElement.current.scrollTop === listElement.current.clientHeight;
137
136
  }
138
- };
137
+ }, []);
139
138
  var dismissToast = (0, _react.useCallback)(function (toast) {
140
139
  // Remove the toast after it's done fading out.
141
140
  dismissTimeoutIds.current.push(window.setTimeout(function () {
@@ -158,34 +157,29 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
158
157
  }
159
158
  });
160
159
  }, [scheduleToastForDismissal, toasts]);
161
- var addListeners = function addListeners() {
162
- if (listElement.current) {
163
- listElement.current.addEventListener('scroll', onScroll);
164
- listElement.current.addEventListener('mouseenter', onMouseEnter);
165
- listElement.current.addEventListener('mouseleave', onMouseLeave);
166
- }
167
- };
168
- var removeListeners = function removeListeners() {
169
- if (listElement.current) {
170
- listElement.current.removeEventListener('scroll', onScroll);
171
- listElement.current.removeEventListener('mouseenter', onMouseEnter);
172
- listElement.current.removeEventListener('mouseleave', onMouseLeave);
173
- }
174
- };
175
160
 
176
161
  // componentDidMount
177
162
  (0, _react.useEffect)(function () {
178
- addListeners();
163
+ var listenerEl = listElement.current;
164
+ if (listenerEl) {
165
+ listenerEl.addEventListener('scroll', onScroll);
166
+ listenerEl.addEventListener('mouseenter', onMouseEnter);
167
+ listenerEl.addEventListener('mouseleave', onMouseLeave);
168
+ }
179
169
 
180
170
  // componentWillUnmount
181
171
  return function () {
172
+ if (listenerEl) {
173
+ listenerEl.removeEventListener('scroll', onScroll);
174
+ listenerEl.removeEventListener('mouseenter', onMouseEnter);
175
+ listenerEl.removeEventListener('mouseleave', onMouseLeave);
176
+ }
182
177
  if (isScrollingAnimationFrame.current !== 0) {
183
178
  window.cancelAnimationFrame(isScrollingAnimationFrame.current);
184
179
  }
185
180
  if (startScrollingAnimationFrame.current !== 0) {
186
181
  window.cancelAnimationFrame(startScrollingAnimationFrame.current);
187
182
  }
188
- removeListeners();
189
183
  dismissTimeoutIds.current.forEach(clearTimeout); // eslint-disable-line react-hooks/exhaustive-deps
190
184
  for (var _toastId3 in toastIdToTimerMap.current) {
191
185
  if (toastIdToTimerMap.current.hasOwnProperty(_toastId3)) {
@@ -194,7 +188,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
194
188
  }
195
189
  }
196
190
  };
197
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
191
+ }, [onMouseEnter, onMouseLeave, onScroll]);
198
192
 
199
193
  // componentDidUpdate
200
194
  (0, _react.useEffect)(function () {
@@ -209,7 +203,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
209
203
  }
210
204
  }
211
205
  prevToasts.current = toasts;
212
- }, [toasts, scheduleAllToastsForDismissal]);
206
+ }, [toasts, scheduleAllToastsForDismissal, startScrollingToBottom]);
213
207
 
214
208
  // Toast dismissal side effect
215
209
  // Ensure the callback has correct state by not enclosing it in `setTimeout`
@@ -230,49 +224,52 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
230
224
  });
231
225
  }
232
226
  }, [toastToDismiss, dismissToastProp]);
233
- var renderedToasts = toasts.map(function (toast) {
234
- var text = toast.text,
235
- toastLifeTimeMs = toast.toastLifeTimeMs,
236
- rest = (0, _objectWithoutProperties2.default)(toast, _excluded2);
237
- var onClose = function onClose() {
238
- return dismissToast(toast);
239
- };
240
- return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
241
- key: toast.id,
242
- isDismissed: toastIdToDismissedMap[toast.id]
243
- }, (0, _react2.jsx)(_toast.EuiToast, (0, _extends2.default)({
244
- onClose: onClose,
245
- onFocus: onMouseEnter,
246
- onBlur: onMouseLeave
247
- }, rest), text));
248
- });
249
- if (showClearAllButtonAt && toasts.length >= showClearAllButtonAt) {
250
- var dismissAllToasts = function dismissAllToasts() {
251
- toasts.forEach(function (toast) {
252
- return dismissToastProp(toast);
253
- });
254
- onClearAllToasts === null || onClearAllToasts === void 0 ? void 0 : onClearAllToasts();
255
- };
256
- renderedToasts.push((0, _react2.jsx)(_i18n.EuiI18n, {
257
- key: "euiClearAllToasts",
258
- tokens: ['euiGlobalToastList.clearAllToastsButtonAriaLabel', 'euiGlobalToastList.clearAllToastsButtonDisplayText'],
259
- defaults: ['Clear all toast notifications', 'Clear all']
260
- }, function (_ref2) {
261
- var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
262
- clearAllToastsButtonAriaLabel = _ref3[0],
263
- clearAllToastsButtonDisplayText = _ref3[1];
227
+ var renderedToasts = (0, _react.useMemo)(function () {
228
+ return toasts.map(function (toast) {
229
+ var text = toast.text,
230
+ toastLifeTimeMs = toast.toastLifeTimeMs,
231
+ rest = (0, _objectWithoutProperties2.default)(toast, _excluded2);
232
+ var onClose = function onClose() {
233
+ return dismissToast(toast);
234
+ };
264
235
  return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
265
- isDismissed: false
266
- }, (0, _react2.jsx)(_button.EuiButton, {
267
- fill: true,
268
- color: "text",
269
- onClick: dismissAllToasts,
270
- css: [styles.euiGlobalToastListDismissButton, ";label:EuiGlobalToastList;"],
271
- "aria-label": clearAllToastsButtonAriaLabel,
272
- "data-test-subj": "euiClearAllToastsButton"
273
- }, clearAllToastsButtonDisplayText));
274
- }));
275
- }
236
+ key: toast.id,
237
+ isDismissed: toastIdToDismissedMap[toast.id]
238
+ }, (0, _react2.jsx)(_toast.EuiToast, (0, _extends2.default)({
239
+ onClose: onClose,
240
+ onFocus: onMouseEnter,
241
+ onBlur: onMouseLeave
242
+ }, rest), text));
243
+ });
244
+ }, [toasts, toastIdToDismissedMap, dismissToast, onMouseEnter, onMouseLeave]);
245
+ var clearAllButton = (0, _react.useMemo)(function () {
246
+ if (toasts.length && showClearAllButtonAt && toasts.length >= showClearAllButtonAt) {
247
+ return (0, _react2.jsx)(_i18n.EuiI18n, {
248
+ key: "euiClearAllToasts",
249
+ tokens: ['euiGlobalToastList.clearAllToastsButtonAriaLabel', 'euiGlobalToastList.clearAllToastsButtonDisplayText'],
250
+ defaults: ['Clear all toast notifications', 'Clear all']
251
+ }, function (_ref2) {
252
+ var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
253
+ clearAllToastsButtonAriaLabel = _ref3[0],
254
+ clearAllToastsButtonDisplayText = _ref3[1];
255
+ return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
256
+ isDismissed: false
257
+ }, (0, _react2.jsx)(_button.EuiButton, {
258
+ fill: true,
259
+ color: "text",
260
+ onClick: function onClick() {
261
+ toasts.forEach(function (toast) {
262
+ return dismissToastProp(toast);
263
+ });
264
+ onClearAllToasts === null || onClearAllToasts === void 0 ? void 0 : onClearAllToasts();
265
+ },
266
+ css: styles.euiGlobalToastListDismissButton,
267
+ "aria-label": clearAllToastsButtonAriaLabel,
268
+ "data-test-subj": "euiClearAllToastsButton"
269
+ }, clearAllToastsButtonDisplayText));
270
+ });
271
+ }
272
+ }, [showClearAllButtonAt, onClearAllToasts, toasts, dismissToastProp, styles]);
276
273
  var classes = (0, _classnames.default)('euiGlobalToastList', className);
277
274
  return (0, _react2.jsx)("div", (0, _extends2.default)({
278
275
  "aria-live": "polite",
@@ -280,7 +277,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
280
277
  ref: listElement,
281
278
  css: cssStyles,
282
279
  className: classes
283
- }, rest), renderedToasts);
280
+ }, rest), renderedToasts, clearAllButton);
284
281
  };
285
282
  exports.EuiGlobalToastList = EuiGlobalToastList;
286
283
  EuiGlobalToastList.propTypes = {
@@ -36,47 +36,11 @@ var EuiToast = function EuiToast(_ref) {
36
36
  children = _ref.children,
37
37
  className = _ref.className,
38
38
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
39
- var euiTheme = (0, _services.useEuiTheme)();
40
- var baseStyles = (0, _toast.euiToastStyles)(euiTheme);
39
+ var baseStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastStyles);
41
40
  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
42
- var bodyStyles = (0, _toast.euiToastBodyStyles)();
43
- var headerStyles = (0, _toast.euiToastHeaderStyles)(euiTheme);
41
+ var headerStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastHeaderStyles);
44
42
  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
45
43
  var classes = (0, _classnames.default)('euiToast', className);
46
- var headerIcon;
47
- if (iconType) {
48
- headerIcon = (0, _react2.jsx)(_icon.EuiIcon, {
49
- css: headerStyles.euiToastHeader__icon,
50
- type: iconType,
51
- size: "m",
52
- "aria-hidden": "true"
53
- });
54
- }
55
- var closeButton;
56
- if (onClose) {
57
- closeButton = (0, _react2.jsx)(_i18n.EuiI18n, {
58
- token: "euiToast.dismissToast",
59
- default: "Dismiss toast"
60
- }, function (dismissToast) {
61
- return (0, _react2.jsx)(_button.EuiButtonIcon, {
62
- css: baseStyles.euiToast__closeButton,
63
- iconType: "cross",
64
- color: "text",
65
- size: "xs",
66
- "aria-label": dismissToast,
67
- onClick: onClose,
68
- "data-test-subj": "toastCloseButton"
69
- });
70
- });
71
- }
72
- var optionalBody;
73
- if (children) {
74
- optionalBody = (0, _react2.jsx)(_text.EuiText, {
75
- css: bodyStyles.euiToastBody,
76
- size: "s",
77
- "data-test-subj": "euiToastBody"
78
- }, children);
79
- }
80
44
  return (0, _react2.jsx)("div", (0, _extends2.default)({
81
45
  css: baseCss,
82
46
  className: classes
@@ -91,11 +55,32 @@ var EuiToast = function EuiToast(_ref) {
91
55
  css: headerCss,
92
56
  "aria-label": notification,
93
57
  "data-test-subj": "euiToastHeader"
94
- }, headerIcon, (0, _react2.jsx)("span", {
58
+ }, iconType && (0, _react2.jsx)(_icon.EuiIcon, {
59
+ css: headerStyles.euiToastHeader__icon,
60
+ type: iconType,
61
+ size: "m",
62
+ "aria-hidden": "true"
63
+ }), (0, _react2.jsx)("span", {
95
64
  css: headerStyles.euiToastHeader__title,
96
65
  "data-test-subj": "euiToastHeader__title"
97
66
  }, title));
98
- }), closeButton, optionalBody);
67
+ }), onClose && (0, _react2.jsx)(_i18n.EuiI18n, {
68
+ token: "euiToast.dismissToast",
69
+ default: "Dismiss toast"
70
+ }, function (dismissToast) {
71
+ return (0, _react2.jsx)(_button.EuiButtonIcon, {
72
+ css: baseStyles.euiToast__closeButton,
73
+ iconType: "cross",
74
+ color: "text",
75
+ size: "xs",
76
+ "aria-label": dismissToast,
77
+ onClick: onClose,
78
+ "data-test-subj": "toastCloseButton"
79
+ });
80
+ }), children && (0, _react2.jsx)(_text.EuiText, {
81
+ size: "s",
82
+ "data-test-subj": "euiToastBody"
83
+ }, children));
99
84
  };
100
85
  exports.EuiToast = EuiToast;
101
86
  EuiToast.propTypes = {
@@ -3,23 +3,24 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.euiToastStyles = exports.euiToastHeaderStyles = exports.euiToastBodyStyles = void 0;
6
+ exports.euiToastStyles = exports.euiToastHeaderStyles = void 0;
7
7
  var _react = require("@emotion/react");
8
8
  var _global_styling = require("../../global_styling");
9
9
  var _amsterdam = require("../../themes/amsterdam");
10
10
  var _title = require("../title/title.styles");
11
- function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
12
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
13
- * or more contributor license agreements. Licensed under the Elastic License
14
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
15
- * in compliance with, at your election, the Elastic License 2.0 or the Server
16
- * Side Public License, v 1.
17
- */
11
+ /*
12
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
13
+ * or more contributor license agreements. Licensed under the Elastic License
14
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
15
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
16
+ * Side Public License, v 1.
17
+ */
18
+
18
19
  var euiToastStyles = function euiToastStyles(euiThemeContext) {
19
20
  var euiTheme = euiThemeContext.euiTheme;
20
21
  return {
21
22
  // Base
22
- euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
23
+ euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
23
24
  // Elements
24
25
  euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
25
26
  // Variants
@@ -42,19 +43,4 @@ var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
42
43
  withBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:withBody;")
43
44
  };
44
45
  };
45
- exports.euiToastHeaderStyles = euiToastHeaderStyles;
46
- var _ref = process.env.NODE_ENV === "production" ? {
47
- name: "1xv63y1-euiToastBody",
48
- styles: "word-wrap:break-word;label:euiToastBody;"
49
- } : {
50
- name: "1xv63y1-euiToastBody",
51
- styles: "word-wrap:break-word;label:euiToastBody;",
52
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
53
- };
54
- var euiToastBodyStyles = function euiToastBodyStyles() {
55
- return {
56
- // Base
57
- euiToastBody: _ref
58
- };
59
- };
60
- exports.euiToastBodyStyles = euiToastBodyStyles;
46
+ exports.euiToastHeaderStyles = euiToastHeaderStyles;
@@ -1,20 +1,23 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
- exports.useEuiNumberFormat = exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
7
+ exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
7
9
  var _typography = require("../functions/typography");
8
- var _hooks = require("../../services/theme/hooks");
10
+ var _theme = require("../../services/theme");
11
+ var _typography2 = require("../variables/typography");
9
12
  var _functions = require("../functions");
10
- /*
11
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
12
- * or more contributor license agreements. Licensed under the Elastic License
13
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
14
- * in compliance with, at your election, the Elastic License 2.0 or the Server
15
- * Side Public License, v 1.
16
- */
17
-
13
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /*
15
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
16
+ * or more contributor license agreements. Licensed under the Elastic License
17
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
18
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
19
+ * Side Public License, v 1.
20
+ */
18
21
  /**
19
22
  * Returns font-size and line-height
20
23
  */
@@ -27,15 +30,23 @@ var euiFontSize = function euiFontSize(_ref, scale, options) {
27
30
  };
28
31
  exports.euiFontSize = euiFontSize;
29
32
  var useEuiFontSize = function useEuiFontSize(scale, options) {
30
- var euiTheme = (0, _hooks.useEuiTheme)();
31
- return euiFontSize(euiTheme, scale, options);
33
+ var euiTheme = (0, _theme.useEuiTheme)();
34
+ var memoizedFontSizes = (0, _theme.useEuiMemoizedStyles)(euiFontSizes);
35
+ return !options ? memoizedFontSizes[scale] : euiFontSize(euiTheme, scale, options);
36
+ };
37
+ // Memomize a basic set of font sizes. We unfortunately can't
38
+ // memoize all possible options, there's too many permutations
39
+ exports.useEuiFontSize = useEuiFontSize;
40
+ var euiFontSizes = function euiFontSizes(euiThemeContext) {
41
+ return _typography2.EuiThemeFontScales.reduce(function (map, scale) {
42
+ return _objectSpread(_objectSpread({}, map), {}, (0, _defineProperty2.default)({}, scale, euiFontSize(euiThemeContext, scale)));
43
+ }, {});
32
44
  };
33
45
 
34
46
  /**
35
47
  * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
36
48
  * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
37
49
  */
38
- exports.useEuiFontSize = useEuiFontSize;
39
50
  var euiTextBreakWord = function euiTextBreakWord() {
40
51
  return "\n overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n word-break: break-word;\n";
41
52
  };
@@ -58,9 +69,4 @@ var euiNumberFormat = function euiNumberFormat(_ref2) {
58
69
  var euiTheme = _ref2.euiTheme;
59
70
  return "\n font-feature-settings: ".concat(euiTheme.font.featureSettings, ", 'tnum' 1;\n");
60
71
  };
61
- exports.euiNumberFormat = euiNumberFormat;
62
- var useEuiNumberFormat = function useEuiNumberFormat() {
63
- var euiTheme = (0, _hooks.useEuiTheme)();
64
- return euiNumberFormat(euiTheme);
65
- };
66
- exports.useEuiNumberFormat = useEuiNumberFormat;
72
+ exports.euiNumberFormat = euiNumberFormat;
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
7
+ exports.euiPaletteWarm = exports.euiPaletteRed = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGreen = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _chromaJs = _interopRequireDefault(require("chroma-js"));
10
10
  var _color_palette = require("./color_palette");
@@ -129,19 +129,19 @@ var euiPaletteForDarkBackground = function euiPaletteForDarkBackground() {
129
129
  return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'];
130
130
  };
131
131
  exports.euiPaletteForDarkBackground = euiPaletteForDarkBackground;
132
- var positiveColor = '#209280';
133
- var negativeColor = '#CC5642';
134
- var lightNegativeColor = euiPaletteColorBlind()[9];
132
+ var greenColor = '#209280';
133
+ var redColor = '#CC5642';
134
+ var lightRedColor = euiPaletteColorBlind()[9];
135
135
  var coolArray = [euiPaletteColorBlind()[1], '#6092C0'];
136
136
  var warmArray = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[9]];
137
137
  var euiPaletteForStatus = function euiPaletteForStatus(steps) {
138
138
  if (steps === 1) {
139
- return [positiveColor];
139
+ return [greenColor];
140
140
  }
141
141
  if (steps <= 3) {
142
- return euiPalette([positiveColor, euiPaletteColorBlind()[5], negativeColor], steps, true);
142
+ return euiPalette([greenColor, euiPaletteColorBlind()[5], redColor], steps, true);
143
143
  }
144
- return euiPalette([positiveColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightNegativeColor, negativeColor], steps, true);
144
+ return euiPalette([greenColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightRedColor, redColor], steps, true);
145
145
  };
146
146
  exports.euiPaletteForStatus = euiPaletteForStatus;
147
147
  var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
@@ -150,7 +150,7 @@ var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
150
150
  if (steps === 1) {
151
151
  return [cools[0]];
152
152
  } else if (steps <= 3) {
153
- return euiPalette([cools[0], lightNegativeColor], steps, true);
153
+ return euiPalette([cools[0], lightRedColor], steps, true);
154
154
  }
155
155
  return euiPalette([].concat((0, _toConsumableArray2.default)(cools), (0, _toConsumableArray2.default)(warms)), steps, true);
156
156
  };
@@ -162,19 +162,29 @@ var euiPaletteComplementary = function euiPaletteComplementary(steps) {
162
162
  return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
163
163
  };
164
164
  exports.euiPaletteComplementary = euiPaletteComplementary;
165
- var euiPaletteNegative = function euiPaletteNegative(steps) {
165
+ var euiPaletteRed = function euiPaletteRed(steps) {
166
166
  if (steps === 1) {
167
- return [lightNegativeColor];
167
+ return [lightRedColor];
168
168
  }
169
- return euiPalette(['white', negativeColor], steps);
169
+ return euiPalette(['white', redColor], steps);
170
170
  };
171
+ /**
172
+ * @deprecated - use `euiPaletteRed` instead
173
+ */
174
+ exports.euiPaletteRed = euiPaletteRed;
175
+ var euiPaletteNegative = euiPaletteRed;
171
176
  exports.euiPaletteNegative = euiPaletteNegative;
172
- var euiPalettePositive = function euiPalettePositive(steps) {
177
+ var euiPaletteGreen = function euiPaletteGreen(steps) {
173
178
  if (steps === 1) {
174
179
  return [euiPaletteColorBlind()[0]];
175
180
  }
176
- return euiPalette(['white', positiveColor], steps);
181
+ return euiPalette(['white', greenColor], steps);
177
182
  };
183
+ /**
184
+ * @deprecated - use `euiPaletteGreen` instead
185
+ */
186
+ exports.euiPaletteGreen = euiPaletteGreen;
187
+ var euiPalettePositive = euiPaletteGreen;
178
188
  exports.euiPalettePositive = euiPalettePositive;
179
189
  var euiPaletteCool = function euiPaletteCool(steps) {
180
190
  if (steps === 1) {
@@ -185,7 +195,7 @@ var euiPaletteCool = function euiPaletteCool(steps) {
185
195
  exports.euiPaletteCool = euiPaletteCool;
186
196
  var euiPaletteWarm = function euiPaletteWarm(steps) {
187
197
  if (steps === 1) {
188
- return [lightNegativeColor];
198
+ return [lightRedColor];
189
199
  }
190
200
  return euiPalette(['#FBFBDC'].concat(warmArray), steps);
191
201
  };
@@ -24,6 +24,8 @@ var _exportNames = {
24
24
  euiPaletteForStatus: true,
25
25
  euiPaletteForTemperature: true,
26
26
  euiPaletteComplementary: true,
27
+ euiPaletteRed: true,
28
+ euiPaletteGreen: true,
27
29
  euiPaletteNegative: true,
28
30
  euiPalettePositive: true,
29
31
  euiPaletteCool: true,
@@ -115,6 +117,12 @@ Object.defineProperty(exports, "euiPaletteGray", {
115
117
  return _eui_palettes.euiPaletteGray;
116
118
  }
117
119
  });
120
+ Object.defineProperty(exports, "euiPaletteGreen", {
121
+ enumerable: true,
122
+ get: function get() {
123
+ return _eui_palettes.euiPaletteGreen;
124
+ }
125
+ });
118
126
  Object.defineProperty(exports, "euiPaletteNegative", {
119
127
  enumerable: true,
120
128
  get: function get() {
@@ -127,6 +135,12 @@ Object.defineProperty(exports, "euiPalettePositive", {
127
135
  return _eui_palettes.euiPalettePositive;
128
136
  }
129
137
  });
138
+ Object.defineProperty(exports, "euiPaletteRed", {
139
+ enumerable: true,
140
+ get: function get() {
141
+ return _eui_palettes.euiPaletteRed;
142
+ }
143
+ });
130
144
  Object.defineProperty(exports, "euiPaletteWarm", {
131
145
  enumerable: true,
132
146
  get: function get() {
@@ -47,6 +47,17 @@ Object.keys(_useLatest).forEach(function (key) {
47
47
  }
48
48
  });
49
49
  });
50
+ var _useDeepEqual = require("./useDeepEqual");
51
+ Object.keys(_useDeepEqual).forEach(function (key) {
52
+ if (key === "default" || key === "__esModule") return;
53
+ if (key in exports && exports[key] === _useDeepEqual[key]) return;
54
+ Object.defineProperty(exports, key, {
55
+ enumerable: true,
56
+ get: function get() {
57
+ return _useDeepEqual[key];
58
+ }
59
+ });
60
+ });
50
61
  var _useMouseMove = require("./useMouseMove");
51
62
  Object.keys(_useMouseMove).forEach(function (key) {
52
63
  if (key === "default" || key === "__esModule") return;