@elastic/eui 93.3.0 → 93.5.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 (361) 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 -327
  11. package/es/components/breadcrumbs/breadcrumb.styles.js +5 -27
  12. package/es/components/breadcrumbs/breadcrumbs.js +4 -4
  13. package/es/components/breadcrumbs/types.js +1 -0
  14. package/es/components/button/button_group/button_group.js +16 -2
  15. package/es/components/button/button_group/button_group.styles.js +1 -1
  16. package/es/components/button/button_group/button_group_button.js +59 -5
  17. package/es/components/button/button_group/button_group_button.styles.js +39 -3
  18. package/es/components/datagrid/body/cell/data_grid_cell.js +97 -58
  19. package/es/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  20. package/es/components/datagrid/body/cell/data_grid_cell_popover.js +64 -56
  21. package/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +32 -31
  22. package/es/components/datagrid/body/cell/index.js +1 -1
  23. package/es/components/datagrid/body/data_grid_body.js +13 -0
  24. package/es/components/datagrid/body/data_grid_body_custom.js +52 -36
  25. package/es/components/datagrid/body/data_grid_body_virtualized.js +84 -56
  26. package/es/components/datagrid/body/data_grid_row_manager.js +6 -4
  27. package/es/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  28. package/es/components/datagrid/body/header/data_grid_control_header_cell.js +5 -4
  29. package/es/components/datagrid/body/header/data_grid_header_cell.js +73 -53
  30. package/es/components/datagrid/body/header/data_grid_header_row.js +15 -551
  31. package/es/components/datagrid/body/header/use_data_grid_header.js +7 -6
  32. package/es/components/datagrid/controls/column_selector.js +126 -123
  33. package/es/components/datagrid/controls/column_sorting.js +605 -103
  34. package/es/components/datagrid/controls/column_sorting_draggable.js +24 -22
  35. package/es/components/datagrid/controls/display_selector.js +109 -107
  36. package/es/components/datagrid/data_grid.a11y.js +13 -12
  37. package/es/components/datagrid/data_grid.js +45 -22
  38. package/es/components/datagrid/utils/col_widths.js +12 -8
  39. package/es/components/datagrid/utils/focus.js +10 -8
  40. package/es/components/datagrid/utils/grid_height_width.js +31 -30
  41. package/es/components/datagrid/utils/ref.js +1 -1
  42. package/es/components/datagrid/utils/row_heights.js +2 -2
  43. package/es/components/datagrid/utils/sorting.js +29 -27
  44. package/es/components/date_picker/super_date_picker/super_date_picker.js +9 -0
  45. package/es/components/date_picker/super_date_picker/super_update_button.js +57 -29
  46. package/es/components/flex/flex_grid.js +22 -8
  47. package/es/components/flex/flex_grid.styles.js +13 -6
  48. package/es/components/flex/flex_group.js +10 -11
  49. package/es/components/flex/flex_item.js +9 -11
  50. package/es/components/flex/flex_item.styles.js +107 -122
  51. package/es/components/flyout/flyout.js +16 -18
  52. package/es/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  53. package/es/components/header/header_links/header_links.js +10 -2
  54. package/es/components/icon/icon.js +3 -3
  55. package/es/components/modal/confirm_modal.js +2 -1
  56. package/es/components/modal/modal.js +12 -3
  57. package/es/components/observer/resize_observer/resize_observer.js +15 -24
  58. package/es/components/panel/panel.js +2 -3
  59. package/es/components/resizable_container/resizable_button.js +2 -3
  60. package/es/components/resizable_container/resizable_collapse_button.js +2 -3
  61. package/es/components/resizable_container/resizable_container.js +1 -2
  62. package/es/components/resizable_container/resizable_container.styles.js +11 -14
  63. package/es/components/resizable_container/resizable_panel.js +6 -8
  64. package/es/components/resizable_container/resizable_panel.styles.js +18 -29
  65. package/es/components/selectable/selectable_list/selectable_list.js +26 -6
  66. package/es/components/spacer/spacer.js +2 -3
  67. package/es/components/toast/global_toast_list.js +70 -73
  68. package/es/components/toast/toast.js +27 -42
  69. package/es/components/toast/toast.styles.js +2 -17
  70. package/es/components/tool_tip/icon_tip.js +4 -3
  71. package/es/global_styling/mixins/_color.js +60 -32
  72. package/es/global_styling/mixins/_padding.js +60 -16
  73. package/es/services/color/eui_palettes.js +21 -13
  74. package/es/services/color/index.js +1 -1
  75. package/es/services/hooks/index.js +1 -0
  76. package/es/services/hooks/useDeepEqual.js +23 -0
  77. package/es/services/index.js +1 -1
  78. package/es/services/theme/style_memoization.js +1 -3
  79. package/eui.d.ts +2558 -2470
  80. package/i18ntokens.json +297 -279
  81. package/lib/components/breadcrumbs/_breadcrumb_content.js +372 -0
  82. package/lib/components/breadcrumbs/_breadcrumb_content.styles.js +55 -0
  83. package/lib/components/breadcrumbs/breadcrumb.js +11 -331
  84. package/lib/components/breadcrumbs/breadcrumb.styles.js +5 -29
  85. package/lib/components/breadcrumbs/breadcrumbs.js +3 -3
  86. package/lib/components/breadcrumbs/types.js +5 -0
  87. package/lib/components/button/button_group/button_group.js +16 -2
  88. package/lib/components/button/button_group/button_group.styles.js +1 -1
  89. package/lib/components/button/button_group/button_group_button.js +59 -5
  90. package/lib/components/button/button_group/button_group_button.styles.js +45 -11
  91. package/lib/components/datagrid/body/cell/data_grid_cell.js +95 -57
  92. package/lib/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  93. package/lib/components/datagrid/body/cell/data_grid_cell_popover.js +63 -55
  94. package/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +32 -31
  95. package/lib/components/datagrid/body/cell/index.js +2 -2
  96. package/lib/components/datagrid/body/data_grid_body.js +13 -0
  97. package/lib/components/datagrid/body/data_grid_body_custom.js +51 -35
  98. package/lib/components/datagrid/body/data_grid_body_virtualized.js +83 -55
  99. package/lib/components/datagrid/body/data_grid_row_manager.js +5 -3
  100. package/lib/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  101. package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +8 -4
  102. package/lib/components/datagrid/body/header/data_grid_header_cell.js +72 -52
  103. package/lib/components/datagrid/body/header/data_grid_header_row.js +14 -550
  104. package/lib/components/datagrid/body/header/use_data_grid_header.js +7 -6
  105. package/lib/components/datagrid/controls/column_selector.js +126 -123
  106. package/lib/components/datagrid/controls/column_sorting.js +615 -110
  107. package/lib/components/datagrid/controls/column_sorting_draggable.js +27 -22
  108. package/lib/components/datagrid/controls/display_selector.js +109 -107
  109. package/lib/components/datagrid/data_grid.a11y.js +13 -12
  110. package/lib/components/datagrid/data_grid.js +43 -20
  111. package/lib/components/datagrid/utils/col_widths.js +12 -8
  112. package/lib/components/datagrid/utils/focus.js +10 -8
  113. package/lib/components/datagrid/utils/grid_height_width.js +29 -28
  114. package/lib/components/datagrid/utils/ref.js +1 -1
  115. package/lib/components/datagrid/utils/row_heights.js +1 -1
  116. package/lib/components/datagrid/utils/sorting.js +31 -29
  117. package/lib/components/date_picker/super_date_picker/super_date_picker.js +9 -0
  118. package/lib/components/date_picker/super_date_picker/super_update_button.js +57 -29
  119. package/lib/components/flex/flex_grid.js +23 -7
  120. package/lib/components/flex/flex_grid.styles.js +13 -6
  121. package/lib/components/flex/flex_group.js +10 -10
  122. package/lib/components/flex/flex_item.js +13 -13
  123. package/lib/components/flex/flex_item.styles.js +107 -122
  124. package/lib/components/flyout/flyout.js +16 -18
  125. package/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  126. package/lib/components/header/header_links/header_links.js +10 -2
  127. package/lib/components/icon/icon.js +3 -3
  128. package/lib/components/modal/confirm_modal.js +2 -1
  129. package/lib/components/modal/modal.js +12 -3
  130. package/lib/components/observer/resize_observer/resize_observer.js +15 -24
  131. package/lib/components/panel/panel.js +1 -2
  132. package/lib/components/resizable_container/resizable_button.js +1 -2
  133. package/lib/components/resizable_container/resizable_collapse_button.js +1 -2
  134. package/lib/components/resizable_container/resizable_container.js +1 -2
  135. package/lib/components/resizable_container/resizable_container.styles.js +11 -14
  136. package/lib/components/resizable_container/resizable_panel.js +3 -5
  137. package/lib/components/resizable_container/resizable_panel.styles.js +17 -28
  138. package/lib/components/selectable/selectable_list/selectable_list.js +26 -6
  139. package/lib/components/spacer/spacer.js +1 -2
  140. package/lib/components/toast/global_toast_list.js +68 -71
  141. package/lib/components/toast/toast.js +25 -40
  142. package/lib/components/toast/toast.styles.js +11 -25
  143. package/lib/components/tool_tip/icon_tip.js +4 -3
  144. package/lib/global_styling/mixins/_color.js +65 -40
  145. package/lib/global_styling/mixins/_padding.js +66 -25
  146. package/lib/services/color/eui_palettes.js +24 -14
  147. package/lib/services/color/index.js +14 -0
  148. package/lib/services/hooks/index.js +11 -0
  149. package/lib/services/hooks/useDeepEqual.js +30 -0
  150. package/lib/services/index.js +15 -1
  151. package/lib/services/theme/style_memoization.js +1 -3
  152. package/optimize/es/components/breadcrumbs/_breadcrumb_content.js +153 -0
  153. package/optimize/es/components/breadcrumbs/_breadcrumb_content.styles.js +48 -0
  154. package/optimize/es/components/breadcrumbs/breadcrumb.js +10 -110
  155. package/optimize/es/components/breadcrumbs/breadcrumb.styles.js +5 -27
  156. package/optimize/es/components/breadcrumbs/breadcrumbs.js +4 -4
  157. package/optimize/es/components/breadcrumbs/types.js +1 -0
  158. package/optimize/es/components/button/button_group/button_group.js +2 -2
  159. package/optimize/es/components/button/button_group/button_group.styles.js +1 -1
  160. package/optimize/es/components/button/button_group/button_group_button.js +36 -4
  161. package/optimize/es/components/button/button_group/button_group_button.styles.js +39 -3
  162. package/optimize/es/components/datagrid/body/cell/data_grid_cell.js +80 -55
  163. package/optimize/es/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  164. package/optimize/es/components/datagrid/body/cell/data_grid_cell_popover.js +64 -56
  165. package/optimize/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +32 -31
  166. package/optimize/es/components/datagrid/body/cell/index.js +1 -1
  167. package/optimize/es/components/datagrid/body/data_grid_body_custom.js +39 -36
  168. package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +69 -49
  169. package/optimize/es/components/datagrid/body/data_grid_row_manager.js +6 -4
  170. package/optimize/es/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  171. package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +4 -3
  172. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +65 -49
  173. package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +15 -13
  174. package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +7 -6
  175. package/optimize/es/components/datagrid/controls/column_selector.js +126 -123
  176. package/optimize/es/components/datagrid/controls/column_sorting.js +121 -103
  177. package/optimize/es/components/datagrid/controls/column_sorting_draggable.js +24 -22
  178. package/optimize/es/components/datagrid/controls/display_selector.js +109 -107
  179. package/optimize/es/components/datagrid/data_grid.a11y.js +13 -12
  180. package/optimize/es/components/datagrid/data_grid.js +45 -22
  181. package/optimize/es/components/datagrid/utils/col_widths.js +9 -5
  182. package/optimize/es/components/datagrid/utils/focus.js +10 -8
  183. package/optimize/es/components/datagrid/utils/grid_height_width.js +31 -30
  184. package/optimize/es/components/datagrid/utils/ref.js +1 -1
  185. package/optimize/es/components/datagrid/utils/row_heights.js +2 -2
  186. package/optimize/es/components/datagrid/utils/sorting.js +29 -27
  187. package/optimize/es/components/date_picker/super_date_picker/super_update_button.js +49 -29
  188. package/optimize/es/components/flex/flex_grid.js +19 -8
  189. package/optimize/es/components/flex/flex_grid.styles.js +13 -6
  190. package/optimize/es/components/flex/flex_group.js +9 -10
  191. package/optimize/es/components/flex/flex_item.js +9 -11
  192. package/optimize/es/components/flex/flex_item.styles.js +107 -122
  193. package/optimize/es/components/flyout/flyout.js +16 -18
  194. package/optimize/es/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  195. package/optimize/es/components/header/header_links/header_links.js +3 -2
  196. package/optimize/es/components/icon/icon.js +3 -3
  197. package/optimize/es/components/modal/confirm_modal.js +2 -1
  198. package/optimize/es/components/modal/modal.js +6 -2
  199. package/optimize/es/components/observer/resize_observer/resize_observer.js +15 -24
  200. package/optimize/es/components/panel/panel.js +2 -3
  201. package/optimize/es/components/resizable_container/resizable_button.js +2 -3
  202. package/optimize/es/components/resizable_container/resizable_collapse_button.js +2 -3
  203. package/optimize/es/components/resizable_container/resizable_container.js +1 -2
  204. package/optimize/es/components/resizable_container/resizable_container.styles.js +11 -14
  205. package/optimize/es/components/resizable_container/resizable_panel.js +6 -8
  206. package/optimize/es/components/resizable_container/resizable_panel.styles.js +18 -26
  207. package/optimize/es/components/selectable/selectable_list/selectable_list.js +26 -6
  208. package/optimize/es/components/spacer/spacer.js +2 -3
  209. package/optimize/es/components/toast/global_toast_list.js +70 -73
  210. package/optimize/es/components/toast/toast.js +27 -42
  211. package/optimize/es/components/toast/toast.styles.js +2 -17
  212. package/optimize/es/components/tool_tip/icon_tip.js +4 -3
  213. package/optimize/es/global_styling/mixins/_color.js +57 -32
  214. package/optimize/es/global_styling/mixins/_padding.js +52 -16
  215. package/optimize/es/services/color/eui_palettes.js +21 -13
  216. package/optimize/es/services/color/index.js +1 -1
  217. package/optimize/es/services/hooks/index.js +1 -0
  218. package/optimize/es/services/hooks/useDeepEqual.js +23 -0
  219. package/optimize/es/services/index.js +1 -1
  220. package/optimize/es/services/theme/style_memoization.js +1 -3
  221. package/optimize/lib/components/breadcrumbs/_breadcrumb_content.js +163 -0
  222. package/optimize/lib/components/breadcrumbs/_breadcrumb_content.styles.js +55 -0
  223. package/optimize/lib/components/breadcrumbs/breadcrumb.js +10 -113
  224. package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js +5 -29
  225. package/optimize/lib/components/breadcrumbs/breadcrumbs.js +3 -3
  226. package/optimize/lib/components/breadcrumbs/types.js +5 -0
  227. package/optimize/lib/components/button/button_group/button_group.js +2 -2
  228. package/optimize/lib/components/button/button_group/button_group.styles.js +1 -1
  229. package/optimize/lib/components/button/button_group/button_group_button.js +37 -5
  230. package/optimize/lib/components/button/button_group/button_group_button.styles.js +45 -11
  231. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js +78 -54
  232. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  233. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_popover.js +63 -55
  234. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +32 -31
  235. package/optimize/lib/components/datagrid/body/cell/index.js +2 -2
  236. package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +38 -35
  237. package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +70 -50
  238. package/optimize/lib/components/datagrid/body/data_grid_row_manager.js +5 -3
  239. package/optimize/lib/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  240. package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +8 -4
  241. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +65 -49
  242. package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +14 -12
  243. package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +7 -6
  244. package/optimize/lib/components/datagrid/controls/column_selector.js +126 -123
  245. package/optimize/lib/components/datagrid/controls/column_sorting.js +125 -107
  246. package/optimize/lib/components/datagrid/controls/column_sorting_draggable.js +27 -22
  247. package/optimize/lib/components/datagrid/controls/display_selector.js +109 -107
  248. package/optimize/lib/components/datagrid/data_grid.a11y.js +13 -12
  249. package/optimize/lib/components/datagrid/data_grid.js +43 -20
  250. package/optimize/lib/components/datagrid/utils/col_widths.js +9 -5
  251. package/optimize/lib/components/datagrid/utils/focus.js +10 -8
  252. package/optimize/lib/components/datagrid/utils/grid_height_width.js +29 -28
  253. package/optimize/lib/components/datagrid/utils/ref.js +1 -1
  254. package/optimize/lib/components/datagrid/utils/row_heights.js +1 -1
  255. package/optimize/lib/components/datagrid/utils/sorting.js +31 -29
  256. package/optimize/lib/components/date_picker/super_date_picker/super_update_button.js +49 -29
  257. package/optimize/lib/components/flex/flex_grid.js +21 -7
  258. package/optimize/lib/components/flex/flex_grid.styles.js +13 -6
  259. package/optimize/lib/components/flex/flex_group.js +9 -9
  260. package/optimize/lib/components/flex/flex_item.js +13 -13
  261. package/optimize/lib/components/flex/flex_item.styles.js +107 -122
  262. package/optimize/lib/components/flyout/flyout.js +16 -18
  263. package/optimize/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  264. package/optimize/lib/components/header/header_links/header_links.js +3 -2
  265. package/optimize/lib/components/icon/icon.js +3 -3
  266. package/optimize/lib/components/modal/confirm_modal.js +2 -1
  267. package/optimize/lib/components/modal/modal.js +6 -2
  268. package/optimize/lib/components/observer/resize_observer/resize_observer.js +15 -24
  269. package/optimize/lib/components/panel/panel.js +1 -2
  270. package/optimize/lib/components/resizable_container/resizable_button.js +1 -2
  271. package/optimize/lib/components/resizable_container/resizable_collapse_button.js +1 -2
  272. package/optimize/lib/components/resizable_container/resizable_container.js +1 -2
  273. package/optimize/lib/components/resizable_container/resizable_container.styles.js +11 -14
  274. package/optimize/lib/components/resizable_container/resizable_panel.js +3 -5
  275. package/optimize/lib/components/resizable_container/resizable_panel.styles.js +17 -26
  276. package/optimize/lib/components/selectable/selectable_list/selectable_list.js +26 -6
  277. package/optimize/lib/components/spacer/spacer.js +1 -2
  278. package/optimize/lib/components/toast/global_toast_list.js +68 -71
  279. package/optimize/lib/components/toast/toast.js +25 -40
  280. package/optimize/lib/components/toast/toast.styles.js +11 -25
  281. package/optimize/lib/components/tool_tip/icon_tip.js +4 -3
  282. package/optimize/lib/global_styling/mixins/_color.js +63 -40
  283. package/optimize/lib/global_styling/mixins/_padding.js +59 -25
  284. package/optimize/lib/services/color/eui_palettes.js +24 -14
  285. package/optimize/lib/services/color/index.js +14 -0
  286. package/optimize/lib/services/hooks/index.js +11 -0
  287. package/optimize/lib/services/hooks/useDeepEqual.js +30 -0
  288. package/optimize/lib/services/index.js +15 -1
  289. package/optimize/lib/services/theme/style_memoization.js +1 -3
  290. package/package.json +8 -11
  291. package/src/components/form/text_area/_text_area.scss +5 -0
  292. package/src/components/selectable/selectable_list/_selectable_list.scss +2 -0
  293. package/test-env/components/breadcrumbs/_breadcrumb_content.js +363 -0
  294. package/test-env/components/breadcrumbs/_breadcrumb_content.styles.js +55 -0
  295. package/test-env/components/breadcrumbs/breadcrumb.js +11 -326
  296. package/test-env/components/breadcrumbs/breadcrumb.styles.js +5 -29
  297. package/test-env/components/breadcrumbs/breadcrumbs.js +3 -3
  298. package/test-env/components/breadcrumbs/types.js +5 -0
  299. package/test-env/components/button/button_group/button_group.js +16 -2
  300. package/test-env/components/button/button_group/button_group.styles.js +1 -1
  301. package/test-env/components/button/button_group/button_group_button.js +56 -5
  302. package/test-env/components/button/button_group/button_group_button.styles.js +45 -11
  303. package/test-env/components/datagrid/body/cell/data_grid_cell.js +95 -57
  304. package/test-env/components/datagrid/body/cell/data_grid_cell_actions.js +24 -18
  305. package/test-env/components/datagrid/body/cell/data_grid_cell_popover.js +63 -55
  306. package/test-env/components/datagrid/body/cell/data_grid_cell_wrapper.js +32 -31
  307. package/test-env/components/datagrid/body/cell/index.js +2 -2
  308. package/test-env/components/datagrid/body/data_grid_body.js +13 -0
  309. package/test-env/components/datagrid/body/data_grid_body_custom.js +51 -35
  310. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +83 -55
  311. package/test-env/components/datagrid/body/data_grid_row_manager.js +5 -3
  312. package/test-env/components/datagrid/body/footer/use_data_grid_footer.js +1 -2
  313. package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +8 -4
  314. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +72 -52
  315. package/test-env/components/datagrid/body/header/data_grid_header_row.js +14 -550
  316. package/test-env/components/datagrid/body/header/use_data_grid_header.js +7 -6
  317. package/test-env/components/datagrid/controls/column_selector.js +126 -123
  318. package/test-env/components/datagrid/controls/column_sorting.js +607 -106
  319. package/test-env/components/datagrid/controls/column_sorting_draggable.js +27 -22
  320. package/test-env/components/datagrid/controls/display_selector.js +109 -107
  321. package/test-env/components/datagrid/data_grid.a11y.js +13 -12
  322. package/test-env/components/datagrid/data_grid.js +43 -20
  323. package/test-env/components/datagrid/utils/col_widths.js +9 -5
  324. package/test-env/components/datagrid/utils/focus.js +10 -8
  325. package/test-env/components/datagrid/utils/grid_height_width.js +29 -28
  326. package/test-env/components/datagrid/utils/ref.js +1 -1
  327. package/test-env/components/datagrid/utils/row_heights.js +1 -1
  328. package/test-env/components/datagrid/utils/sorting.js +31 -29
  329. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +9 -0
  330. package/test-env/components/date_picker/super_date_picker/super_update_button.js +57 -29
  331. package/test-env/components/flex/flex_grid.js +21 -7
  332. package/test-env/components/flex/flex_grid.styles.js +13 -6
  333. package/test-env/components/flex/flex_group.js +10 -10
  334. package/test-env/components/flex/flex_item.js +13 -13
  335. package/test-env/components/flex/flex_item.styles.js +107 -122
  336. package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.js +3 -5
  337. package/test-env/components/header/header_links/header_links.js +10 -2
  338. package/test-env/components/modal/confirm_modal.js +2 -1
  339. package/test-env/components/modal/modal.js +12 -3
  340. package/test-env/components/panel/panel.js +1 -2
  341. package/test-env/components/resizable_container/resizable_button.js +1 -2
  342. package/test-env/components/resizable_container/resizable_collapse_button.js +1 -2
  343. package/test-env/components/resizable_container/resizable_container.js +1 -2
  344. package/test-env/components/resizable_container/resizable_container.styles.js +11 -14
  345. package/test-env/components/resizable_container/resizable_panel.js +3 -5
  346. package/test-env/components/resizable_container/resizable_panel.styles.js +17 -26
  347. package/test-env/components/selectable/selectable_list/selectable_list.js +26 -6
  348. package/test-env/components/spacer/spacer.js +1 -2
  349. package/test-env/components/toast/global_toast_list.js +68 -71
  350. package/test-env/components/toast/toast.js +25 -40
  351. package/test-env/components/toast/toast.styles.js +11 -25
  352. package/test-env/components/tool_tip/icon_tip.js +4 -3
  353. package/test-env/global_styling/mixins/_color.js +63 -40
  354. package/test-env/global_styling/mixins/_padding.js +59 -25
  355. package/test-env/services/color/eui_palettes.js +24 -14
  356. package/test-env/services/color/index.js +14 -0
  357. package/test-env/services/hooks/index.js +11 -0
  358. package/test-env/services/hooks/useDeepEqual.js +30 -0
  359. package/test-env/services/index.js +15 -1
  360. package/test-env/services/theme/style_memoization.js +1 -3
  361. package/src/themes/charts/theme.scss +0 -5
@@ -1,17 +1,11 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.euiResizablePanelStyles = exports.euiResizablePanelContentStyles = void 0;
8
7
  var _react = require("@emotion/react");
9
8
  var _global_styling = require("../../global_styling");
10
- 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; }
11
- 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) { _defineProperty(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; }
12
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
13
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
14
- function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
15
9
  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)."; } /*
16
10
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
17
11
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,28 +13,23 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
19
13
  * in compliance with, at your election, the Elastic License 2.0 or the Server
20
14
  * Side Public License, v 1.
21
15
  */
22
- var _ref2 = process.env.NODE_ENV === "production" ? {
23
- name: "11qmbh3-collapsed",
24
- styles: "overflow:hidden;label:collapsed;"
25
- } : {
26
- name: "11qmbh3-collapsed",
27
- styles: "overflow:hidden;label:collapsed;",
28
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
29
- };
30
- var _ref3 = process.env.NODE_ENV === "production" ? {
31
- name: "15ifdgc-euiResizablePanel",
32
- styles: "position:relative;label:euiResizablePanel;"
33
- } : {
34
- name: "15ifdgc-euiResizablePanel",
35
- styles: "position:relative;label:euiResizablePanel;",
36
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
37
- };
38
- var euiResizablePanelStyles = function euiResizablePanelStyles(euiThemeContext) {
39
- return {
40
- euiResizablePanel: _ref3,
41
- collapsed: _ref2,
42
- paddingSizes: _objectSpread({}, (0, _global_styling.euiPaddingSizeCSS)(euiThemeContext))
43
- };
16
+ var euiResizablePanelStyles = {
17
+ euiResizablePanel: process.env.NODE_ENV === "production" ? {
18
+ name: "15ifdgc-euiResizablePanel",
19
+ styles: "position:relative;label:euiResizablePanel;"
20
+ } : {
21
+ name: "15ifdgc-euiResizablePanel",
22
+ styles: "position:relative;label:euiResizablePanel;",
23
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
24
+ },
25
+ collapsed: process.env.NODE_ENV === "production" ? {
26
+ name: "11qmbh3-collapsed",
27
+ styles: "overflow:hidden;label:collapsed;"
28
+ } : {
29
+ name: "11qmbh3-collapsed",
30
+ styles: "overflow:hidden;label:collapsed;",
31
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
32
+ }
44
33
  };
45
34
  exports.euiResizablePanelStyles = euiResizablePanelStyles;
46
35
  var _ref = process.env.NODE_ENV === "production" ? {
@@ -427,14 +427,30 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
427
427
  key: "componentDidUpdate",
428
428
  value: function componentDidUpdate(prevProps) {
429
429
  var _this$props9 = this.props,
430
+ isVirtualized = _this$props9.isVirtualized,
430
431
  activeOptionIndex = _this$props9.activeOptionIndex,
431
432
  visibleOptions = _this$props9.visibleOptions,
432
433
  options = _this$props9.options;
433
- if (this.listBoxRef && this.props.searchable !== true) {
434
- this.listBoxRef.setAttribute('aria-activedescendant', "".concat(this.props.makeOptionId(activeOptionIndex)));
435
- }
436
- if (this.listRef && typeof activeOptionIndex !== 'undefined') {
437
- this.listRef.scrollToItem(activeOptionIndex, 'auto');
434
+ if (prevProps.activeOptionIndex !== activeOptionIndex) {
435
+ var makeOptionId = this.props.makeOptionId;
436
+ if (this.listBoxRef && this.props.searchable !== true) {
437
+ this.listBoxRef.setAttribute('aria-activedescendant', makeOptionId(activeOptionIndex));
438
+ }
439
+ if (typeof activeOptionIndex !== 'undefined') {
440
+ if (isVirtualized) {
441
+ var _this$listRef;
442
+ (_this$listRef = this.listRef) === null || _this$listRef === void 0 ? void 0 : _this$listRef.scrollToItem(activeOptionIndex, 'auto');
443
+ } else {
444
+ var _this$listBoxRef;
445
+ var activeOptionId = "#".concat(makeOptionId(activeOptionIndex));
446
+ var activeOptionEl = (_this$listBoxRef = this.listBoxRef) === null || _this$listBoxRef === void 0 ? void 0 : _this$listBoxRef.querySelector(activeOptionId);
447
+ if (activeOptionEl) {
448
+ activeOptionEl.scrollIntoView({
449
+ block: 'nearest'
450
+ });
451
+ }
452
+ }
453
+ }
438
454
  }
439
455
  if (prevProps.visibleOptions !== visibleOptions || prevProps.options !== options) {
440
456
  var optionArray = visibleOptions || options;
@@ -477,14 +493,18 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
477
493
  textWrap = _this$props10.textWrap,
478
494
  truncationProps = _this$props10.truncationProps,
479
495
  rest = _objectWithoutProperties(_this$props10, _excluded3);
496
+ var heightIsFull = forcedHeight === 'full';
480
497
  var classes = (0, _classnames.default)('euiSelectableList', {
481
- 'euiSelectableList-fullHeight': forcedHeight === 'full',
498
+ 'euiSelectableList-fullHeight': heightIsFull,
482
499
  'euiSelectableList-bordered': bordered
483
500
  }, className);
484
501
  return (0, _react2.jsx)("div", _extends({
485
502
  className: classes
486
503
  }, rest), isVirtualized ? this.renderVirtualizedList() : (0, _react2.jsx)("div", {
487
504
  className: "euiSelectableList__list",
505
+ style: !heightIsFull ? {
506
+ blockSize: forcedHeight
507
+ } : undefined,
488
508
  ref: this.removeScrollableTabStop
489
509
  }, (0, _react2.jsx)("ul", {
490
510
  ref: this.setListBoxRef
@@ -33,8 +33,7 @@ var EuiSpacer = function EuiSpacer(_ref) {
33
33
  _ref$size = _ref.size,
34
34
  size = _ref$size === void 0 ? 'l' : _ref$size,
35
35
  rest = _objectWithoutProperties(_ref, _excluded);
36
- var euiTheme = (0, _services.useEuiTheme)();
37
- var styles = (0, _spacer.euiSpacerStyles)(euiTheme);
36
+ var styles = (0, _services.useEuiMemoizedStyles)(_spacer.euiSpacerStyles);
38
37
  var classes = (0, _classnames.default)('euiSpacer', _defineProperty({}, "euiSpacer--".concat(size), size), className);
39
38
  var cssStyles = [styles.euiSpacer, styles[size]];
40
39
  return (0, _react2.jsx)("div", _extends({
@@ -85,10 +85,9 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
85
85
  var isScrollingAnimationFrame = (0, _react.useRef)(0);
86
86
  var startScrollingAnimationFrame = (0, _react.useRef)(0);
87
87
  var listElement = (0, _react.useRef)(null);
88
- var euiTheme = (0, _services.useEuiTheme)();
89
- var styles = (0, _global_toast_list.euiGlobalToastListStyles)(euiTheme);
88
+ var styles = (0, _services.useEuiMemoizedStyles)(_global_toast_list.euiGlobalToastListStyles);
90
89
  var cssStyles = [styles.euiGlobalToastList, styles[side]];
91
- var startScrollingToBottom = function startScrollingToBottom() {
90
+ var startScrollingToBottom = (0, _react.useCallback)(function () {
92
91
  isScrollingToBottom.current = true;
93
92
  var scrollToBottom = function scrollToBottom() {
94
93
  // Although we cancel the requestAnimationFrame in componentWillUnmount,
@@ -111,8 +110,8 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
111
110
  }
112
111
  };
113
112
  startScrollingAnimationFrame.current = window.requestAnimationFrame(scrollToBottom);
114
- };
115
- var onMouseEnter = function onMouseEnter() {
113
+ }, []);
114
+ var onMouseEnter = (0, _react.useCallback)(function () {
116
115
  // Stop scrolling to bottom if we're in mid-scroll, because the user wants to interact with
117
116
  // the list.
118
117
  isScrollingToBottom.current = false;
@@ -125,8 +124,8 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
125
124
  timer.pause();
126
125
  }
127
126
  }
128
- };
129
- var onMouseLeave = function onMouseLeave() {
127
+ }, []);
128
+ var onMouseLeave = (0, _react.useCallback)(function () {
130
129
  isUserInteracting.current = false;
131
130
  for (var _toastId2 in toastIdToTimerMap.current) {
132
131
  if (toastIdToTimerMap.current.hasOwnProperty(_toastId2)) {
@@ -134,8 +133,8 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
134
133
  timer.resume();
135
134
  }
136
135
  }
137
- };
138
- var onScroll = function onScroll() {
136
+ }, []);
137
+ var onScroll = (0, _react.useCallback)(function () {
139
138
  // Given that this method also gets invoked by the synthetic scroll that happens when a new toast gets added,
140
139
  // we want to evaluate if the scroll bottom has been reached only when the user is interacting with the toast,
141
140
  // this way we always retain the scroll position the user has set despite adding in new toasts.
@@ -143,7 +142,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
143
142
  if (listElement.current && isUserInteracting.current) {
144
143
  isScrolledToBottom.current = listElement.current.scrollHeight - listElement.current.scrollTop === listElement.current.clientHeight;
145
144
  }
146
- };
145
+ }, []);
147
146
  var dismissToast = (0, _react.useCallback)(function (toast) {
148
147
  // Remove the toast after it's done fading out.
149
148
  dismissTimeoutIds.current.push(window.setTimeout(function () {
@@ -166,34 +165,29 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
166
165
  }
167
166
  });
168
167
  }, [scheduleToastForDismissal, toasts]);
169
- var addListeners = function addListeners() {
170
- if (listElement.current) {
171
- listElement.current.addEventListener('scroll', onScroll);
172
- listElement.current.addEventListener('mouseenter', onMouseEnter);
173
- listElement.current.addEventListener('mouseleave', onMouseLeave);
174
- }
175
- };
176
- var removeListeners = function removeListeners() {
177
- if (listElement.current) {
178
- listElement.current.removeEventListener('scroll', onScroll);
179
- listElement.current.removeEventListener('mouseenter', onMouseEnter);
180
- listElement.current.removeEventListener('mouseleave', onMouseLeave);
181
- }
182
- };
183
168
 
184
169
  // componentDidMount
185
170
  (0, _react.useEffect)(function () {
186
- addListeners();
171
+ var listenerEl = listElement.current;
172
+ if (listenerEl) {
173
+ listenerEl.addEventListener('scroll', onScroll);
174
+ listenerEl.addEventListener('mouseenter', onMouseEnter);
175
+ listenerEl.addEventListener('mouseleave', onMouseLeave);
176
+ }
187
177
 
188
178
  // componentWillUnmount
189
179
  return function () {
180
+ if (listenerEl) {
181
+ listenerEl.removeEventListener('scroll', onScroll);
182
+ listenerEl.removeEventListener('mouseenter', onMouseEnter);
183
+ listenerEl.removeEventListener('mouseleave', onMouseLeave);
184
+ }
190
185
  if (isScrollingAnimationFrame.current !== 0) {
191
186
  window.cancelAnimationFrame(isScrollingAnimationFrame.current);
192
187
  }
193
188
  if (startScrollingAnimationFrame.current !== 0) {
194
189
  window.cancelAnimationFrame(startScrollingAnimationFrame.current);
195
190
  }
196
- removeListeners();
197
191
  dismissTimeoutIds.current.forEach(clearTimeout); // eslint-disable-line react-hooks/exhaustive-deps
198
192
  for (var _toastId3 in toastIdToTimerMap.current) {
199
193
  if (toastIdToTimerMap.current.hasOwnProperty(_toastId3)) {
@@ -202,7 +196,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
202
196
  }
203
197
  }
204
198
  };
205
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
199
+ }, [onMouseEnter, onMouseLeave, onScroll]);
206
200
 
207
201
  // componentDidUpdate
208
202
  (0, _react.useEffect)(function () {
@@ -217,7 +211,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
217
211
  }
218
212
  }
219
213
  prevToasts.current = toasts;
220
- }, [toasts, scheduleAllToastsForDismissal]);
214
+ }, [toasts, scheduleAllToastsForDismissal, startScrollingToBottom]);
221
215
 
222
216
  // Toast dismissal side effect
223
217
  // Ensure the callback has correct state by not enclosing it in `setTimeout`
@@ -238,49 +232,52 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
238
232
  });
239
233
  }
240
234
  }, [toastToDismiss, dismissToastProp]);
241
- var renderedToasts = toasts.map(function (toast) {
242
- var text = toast.text,
243
- toastLifeTimeMs = toast.toastLifeTimeMs,
244
- rest = _objectWithoutProperties(toast, _excluded2);
245
- var onClose = function onClose() {
246
- return dismissToast(toast);
247
- };
248
- return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
249
- key: toast.id,
250
- isDismissed: toastIdToDismissedMap[toast.id]
251
- }, (0, _react2.jsx)(_toast.EuiToast, _extends({
252
- onClose: onClose,
253
- onFocus: onMouseEnter,
254
- onBlur: onMouseLeave
255
- }, rest), text));
256
- });
257
- if (showClearAllButtonAt && toasts.length >= showClearAllButtonAt) {
258
- var dismissAllToasts = function dismissAllToasts() {
259
- toasts.forEach(function (toast) {
260
- return dismissToastProp(toast);
261
- });
262
- onClearAllToasts === null || onClearAllToasts === void 0 ? void 0 : onClearAllToasts();
263
- };
264
- renderedToasts.push((0, _react2.jsx)(_i18n.EuiI18n, {
265
- key: "euiClearAllToasts",
266
- tokens: ['euiGlobalToastList.clearAllToastsButtonAriaLabel', 'euiGlobalToastList.clearAllToastsButtonDisplayText'],
267
- defaults: ['Clear all toast notifications', 'Clear all']
268
- }, function (_ref2) {
269
- var _ref3 = _slicedToArray(_ref2, 2),
270
- clearAllToastsButtonAriaLabel = _ref3[0],
271
- clearAllToastsButtonDisplayText = _ref3[1];
235
+ var renderedToasts = (0, _react.useMemo)(function () {
236
+ return toasts.map(function (toast) {
237
+ var text = toast.text,
238
+ toastLifeTimeMs = toast.toastLifeTimeMs,
239
+ rest = _objectWithoutProperties(toast, _excluded2);
240
+ var onClose = function onClose() {
241
+ return dismissToast(toast);
242
+ };
272
243
  return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
273
- isDismissed: false
274
- }, (0, _react2.jsx)(_button.EuiButton, {
275
- fill: true,
276
- color: "text",
277
- onClick: dismissAllToasts,
278
- css: [styles.euiGlobalToastListDismissButton, ";label:EuiGlobalToastList;"],
279
- "aria-label": clearAllToastsButtonAriaLabel,
280
- "data-test-subj": "euiClearAllToastsButton"
281
- }, clearAllToastsButtonDisplayText));
282
- }));
283
- }
244
+ key: toast.id,
245
+ isDismissed: toastIdToDismissedMap[toast.id]
246
+ }, (0, _react2.jsx)(_toast.EuiToast, _extends({
247
+ onClose: onClose,
248
+ onFocus: onMouseEnter,
249
+ onBlur: onMouseLeave
250
+ }, rest), text));
251
+ });
252
+ }, [toasts, toastIdToDismissedMap, dismissToast, onMouseEnter, onMouseLeave]);
253
+ var clearAllButton = (0, _react.useMemo)(function () {
254
+ if (toasts.length && showClearAllButtonAt && toasts.length >= showClearAllButtonAt) {
255
+ return (0, _react2.jsx)(_i18n.EuiI18n, {
256
+ key: "euiClearAllToasts",
257
+ tokens: ['euiGlobalToastList.clearAllToastsButtonAriaLabel', 'euiGlobalToastList.clearAllToastsButtonDisplayText'],
258
+ defaults: ['Clear all toast notifications', 'Clear all']
259
+ }, function (_ref2) {
260
+ var _ref3 = _slicedToArray(_ref2, 2),
261
+ clearAllToastsButtonAriaLabel = _ref3[0],
262
+ clearAllToastsButtonDisplayText = _ref3[1];
263
+ return (0, _react2.jsx)(_global_toast_list_item.EuiGlobalToastListItem, {
264
+ isDismissed: false
265
+ }, (0, _react2.jsx)(_button.EuiButton, {
266
+ fill: true,
267
+ color: "text",
268
+ onClick: function onClick() {
269
+ toasts.forEach(function (toast) {
270
+ return dismissToastProp(toast);
271
+ });
272
+ onClearAllToasts === null || onClearAllToasts === void 0 ? void 0 : onClearAllToasts();
273
+ },
274
+ css: styles.euiGlobalToastListDismissButton,
275
+ "aria-label": clearAllToastsButtonAriaLabel,
276
+ "data-test-subj": "euiClearAllToastsButton"
277
+ }, clearAllToastsButtonDisplayText));
278
+ });
279
+ }
280
+ }, [showClearAllButtonAt, onClearAllToasts, toasts, dismissToastProp, styles]);
284
281
  var classes = (0, _classnames.default)('euiGlobalToastList', className);
285
282
  return (0, _react2.jsx)("div", _extends({
286
283
  "aria-live": "polite",
@@ -288,7 +285,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
288
285
  ref: listElement,
289
286
  css: cssStyles,
290
287
  className: classes
291
- }, rest), renderedToasts);
288
+ }, rest), renderedToasts, clearAllButton);
292
289
  };
293
290
  exports.EuiGlobalToastList = EuiGlobalToastList;
294
291
  EuiGlobalToastList.propTypes = {
@@ -37,47 +37,11 @@ var EuiToast = function EuiToast(_ref) {
37
37
  children = _ref.children,
38
38
  className = _ref.className,
39
39
  rest = _objectWithoutProperties(_ref, _excluded);
40
- var euiTheme = (0, _services.useEuiTheme)();
41
- var baseStyles = (0, _toast.euiToastStyles)(euiTheme);
40
+ var baseStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastStyles);
42
41
  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
43
- var bodyStyles = (0, _toast.euiToastBodyStyles)();
44
- var headerStyles = (0, _toast.euiToastHeaderStyles)(euiTheme);
42
+ var headerStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastHeaderStyles);
45
43
  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
46
44
  var classes = (0, _classnames.default)('euiToast', className);
47
- var headerIcon;
48
- if (iconType) {
49
- headerIcon = (0, _react2.jsx)(_icon.EuiIcon, {
50
- css: headerStyles.euiToastHeader__icon,
51
- type: iconType,
52
- size: "m",
53
- "aria-hidden": "true"
54
- });
55
- }
56
- var closeButton;
57
- if (onClose) {
58
- closeButton = (0, _react2.jsx)(_i18n.EuiI18n, {
59
- token: "euiToast.dismissToast",
60
- default: "Dismiss toast"
61
- }, function (dismissToast) {
62
- return (0, _react2.jsx)(_button.EuiButtonIcon, {
63
- css: baseStyles.euiToast__closeButton,
64
- iconType: "cross",
65
- color: "text",
66
- size: "xs",
67
- "aria-label": dismissToast,
68
- onClick: onClose,
69
- "data-test-subj": "toastCloseButton"
70
- });
71
- });
72
- }
73
- var optionalBody;
74
- if (children) {
75
- optionalBody = (0, _react2.jsx)(_text.EuiText, {
76
- css: bodyStyles.euiToastBody,
77
- size: "s",
78
- "data-test-subj": "euiToastBody"
79
- }, children);
80
- }
81
45
  return (0, _react2.jsx)("div", _extends({
82
46
  css: baseCss,
83
47
  className: classes
@@ -92,11 +56,32 @@ var EuiToast = function EuiToast(_ref) {
92
56
  css: headerCss,
93
57
  "aria-label": notification,
94
58
  "data-test-subj": "euiToastHeader"
95
- }, headerIcon, (0, _react2.jsx)("span", {
59
+ }, iconType && (0, _react2.jsx)(_icon.EuiIcon, {
60
+ css: headerStyles.euiToastHeader__icon,
61
+ type: iconType,
62
+ size: "m",
63
+ "aria-hidden": "true"
64
+ }), (0, _react2.jsx)("span", {
96
65
  css: headerStyles.euiToastHeader__title,
97
66
  "data-test-subj": "euiToastHeader__title"
98
67
  }, title));
99
- }), closeButton, optionalBody);
68
+ }), onClose && (0, _react2.jsx)(_i18n.EuiI18n, {
69
+ token: "euiToast.dismissToast",
70
+ default: "Dismiss toast"
71
+ }, function (dismissToast) {
72
+ return (0, _react2.jsx)(_button.EuiButtonIcon, {
73
+ css: baseStyles.euiToast__closeButton,
74
+ iconType: "cross",
75
+ color: "text",
76
+ size: "xs",
77
+ "aria-label": dismissToast,
78
+ onClick: onClose,
79
+ "data-test-subj": "toastCloseButton"
80
+ });
81
+ }), children && (0, _react2.jsx)(_text.EuiText, {
82
+ size: "s",
83
+ "data-test-subj": "euiToastBody"
84
+ }, children));
100
85
  };
101
86
  exports.EuiToast = EuiToast;
102
87
  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;
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.EuiIconTip = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _i18n = require("../i18n");
9
10
  var _icon = require("../icon");
10
11
  var _tool_tip = require("./tool_tip");
11
12
  var _react2 = require("@emotion/react");
@@ -24,8 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
24
25
  var EuiIconTip = function EuiIconTip(_ref) {
25
26
  var _ref$type = _ref.type,
26
27
  type = _ref$type === void 0 ? 'questionInCircle' : _ref$type,
27
- _ref$ariaLabel = _ref['aria-label'],
28
- ariaLabel = _ref$ariaLabel === void 0 ? 'Info' : _ref$ariaLabel,
28
+ ariaLabel = _ref['aria-label'],
29
29
  color = _ref.color,
30
30
  size = _ref.size,
31
31
  iconProps = _ref.iconProps,
@@ -34,6 +34,7 @@ var EuiIconTip = function EuiIconTip(_ref) {
34
34
  _ref$delay = _ref.delay,
35
35
  delay = _ref$delay === void 0 ? 'regular' : _ref$delay,
36
36
  rest = _objectWithoutProperties(_ref, _excluded);
37
+ var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiIconTip.defaultAriaLabel', 'Info');
37
38
  return (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
38
39
  position: position,
39
40
  delay: delay
@@ -42,7 +43,7 @@ var EuiIconTip = function EuiIconTip(_ref) {
42
43
  type: type,
43
44
  color: color,
44
45
  size: size,
45
- "aria-label": ariaLabel
46
+ "aria-label": ariaLabel || defaultAriaLabel
46
47
  }, iconProps)));
47
48
  };
48
49
  exports.EuiIconTip = EuiIconTip;