@elastic/eui 62.0.2 → 62.1.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 (283) hide show
  1. package/dist/eui_theme_dark.css +1 -783
  2. package/dist/eui_theme_dark.json +0 -57
  3. package/dist/eui_theme_dark.json.d.ts +0 -57
  4. package/dist/eui_theme_dark.min.css +1 -1
  5. package/dist/eui_theme_light.css +1 -783
  6. package/dist/eui_theme_light.json +0 -57
  7. package/dist/eui_theme_light.json.d.ts +0 -57
  8. package/dist/eui_theme_light.min.css +1 -1
  9. package/es/components/breadcrumbs/breadcrumb.js +199 -0
  10. package/es/components/breadcrumbs/breadcrumb.styles.js +61 -0
  11. package/es/components/breadcrumbs/breadcrumbs.js +115 -187
  12. package/es/components/breadcrumbs/breadcrumbs.styles.js +30 -0
  13. package/es/components/code/code_block.js +119 -107
  14. package/es/components/collapsible_nav/collapsible_nav.js +2 -2
  15. package/es/components/control_bar/control_bar.js +13 -0
  16. package/es/components/datagrid/body/data_grid_body.js +1 -1
  17. package/es/components/datagrid/body/header/data_grid_header_row.js +1 -1
  18. package/es/components/datagrid/controls/column_sorting_draggable.js +1 -1
  19. package/es/components/datagrid/data_grid.js +1 -1
  20. package/es/components/date_picker/super_date_picker/super_date_picker.js +2 -2
  21. package/es/components/date_picker/super_date_picker/super_update_button.js +1 -1
  22. package/es/components/description_list/description_list.js +22 -26
  23. package/es/components/description_list/description_list.styles.js +25 -0
  24. package/es/components/description_list/description_list_context.js +14 -0
  25. package/es/components/description_list/description_list_description.js +43 -2
  26. package/es/components/description_list/description_list_description.styles.js +47 -0
  27. package/es/components/description_list/description_list_title.js +43 -2
  28. package/es/components/description_list/description_list_title.styles.js +37 -0
  29. package/es/components/description_list/description_list_types.js +10 -0
  30. package/es/components/header/header.js +1 -27
  31. package/es/components/header/header_breadcrumbs/header_breadcrumbs.js +22 -2
  32. package/es/components/header/header_breadcrumbs/header_breadcrumbs.styles.js +15 -0
  33. package/es/components/header/header_links/header_links.js +9 -9
  34. package/es/components/icon/assets/tokenStruct.js +1 -1
  35. package/es/components/page/page_header/page_header.js +1 -0
  36. package/es/components/page/page_header/page_header_content.js +2 -1
  37. package/es/components/page/page_template.js +1 -0
  38. package/es/components/pagination/pagination.js +1 -1
  39. package/es/components/panel/split_panel/split_panel.js +2 -2
  40. package/es/components/provider/provider.js +2 -2
  41. package/es/components/responsive/hide_for.js +6 -38
  42. package/es/components/responsive/show_for.js +6 -38
  43. package/es/components/selectable/selectable_templates/selectable_template_sitewide.js +17 -36
  44. package/es/components/side_nav/side_nav.js +1 -1
  45. package/es/components/table/table_row_cell.js +1 -2
  46. package/es/components/toast/global_toast_list.js +208 -241
  47. package/es/components/toast/global_toast_list.styles.js +38 -0
  48. package/es/components/toast/global_toast_list_item.js +12 -7
  49. package/es/components/toast/toast.js +25 -25
  50. package/es/components/toast/toast.styles.js +55 -0
  51. package/es/components/token/index.js +2 -1
  52. package/es/components/token/token.js +48 -112
  53. package/es/components/token/token.styles.js +93 -0
  54. package/es/components/token/token_map.js +6 -9
  55. package/es/components/token/token_types.js +11 -0
  56. package/es/global_styling/reset/global_styles.js +1 -1
  57. package/es/services/{breakpoint.js → breakpoint/breakpoint.js} +4 -9
  58. package/es/services/{hooks/useIsWithinBreakpoints.js → breakpoint/currentEuiBreakpoint.js} +36 -28
  59. package/es/services/breakpoint/index.js +10 -0
  60. package/es/services/breakpoint/useIsWithinBreakpoints.js +24 -0
  61. package/es/services/hooks/index.js +0 -1
  62. package/es/services/index.js +1 -1
  63. package/eui.d.ts +1681 -1479
  64. package/i18ntokens.json +36 -36
  65. package/lib/components/breadcrumbs/breadcrumb.js +225 -0
  66. package/lib/components/breadcrumbs/breadcrumb.styles.js +68 -0
  67. package/lib/components/breadcrumbs/breadcrumbs.js +125 -188
  68. package/lib/components/breadcrumbs/breadcrumbs.styles.js +33 -0
  69. package/lib/components/code/code_block.js +118 -106
  70. package/lib/components/collapsible_nav/collapsible_nav.js +2 -2
  71. package/lib/components/control_bar/control_bar.js +13 -0
  72. package/lib/components/datagrid/body/data_grid_body.js +1 -1
  73. package/lib/components/datagrid/body/header/data_grid_header_row.js +1 -1
  74. package/lib/components/datagrid/controls/column_sorting_draggable.js +1 -1
  75. package/lib/components/datagrid/data_grid.js +1 -1
  76. package/lib/components/date_picker/super_date_picker/super_date_picker.js +2 -2
  77. package/lib/components/date_picker/super_date_picker/super_update_button.js +1 -1
  78. package/lib/components/description_list/description_list.js +25 -31
  79. package/lib/components/description_list/description_list.styles.js +36 -0
  80. package/lib/components/description_list/description_list_context.js +24 -0
  81. package/lib/components/description_list/description_list_description.js +52 -2
  82. package/lib/components/description_list/description_list_description.styles.js +51 -0
  83. package/lib/components/description_list/description_list_title.js +52 -2
  84. package/lib/components/description_list/description_list_title.styles.js +50 -0
  85. package/lib/components/description_list/description_list_types.js +20 -0
  86. package/lib/components/header/header.js +1 -27
  87. package/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +24 -2
  88. package/lib/components/header/header_breadcrumbs/header_breadcrumbs.styles.js +26 -0
  89. package/lib/components/header/header_links/header_links.js +8 -8
  90. package/lib/components/icon/assets/tokenStruct.js +1 -1
  91. package/lib/components/icon/svgs/tokens/tokenStruct.svg +1 -1
  92. package/lib/components/page/page_header/page_header.js +1 -0
  93. package/lib/components/page/page_header/page_header_content.js +3 -2
  94. package/lib/components/page/page_template.js +1 -0
  95. package/lib/components/pagination/pagination.js +1 -1
  96. package/lib/components/panel/split_panel/split_panel.js +3 -3
  97. package/lib/components/provider/provider.js +1 -1
  98. package/lib/components/responsive/hide_for.js +12 -44
  99. package/lib/components/responsive/show_for.js +12 -44
  100. package/lib/components/selectable/selectable_templates/selectable_template_sitewide.js +15 -35
  101. package/lib/components/side_nav/side_nav.js +1 -1
  102. package/lib/components/table/table_row_cell.js +1 -3
  103. package/lib/components/toast/global_toast_list.js +209 -238
  104. package/lib/components/toast/global_toast_list.styles.js +45 -0
  105. package/lib/components/toast/global_toast_list_item.js +14 -7
  106. package/lib/components/toast/toast.js +27 -25
  107. package/lib/components/toast/toast.styles.js +66 -0
  108. package/lib/components/token/index.js +5 -3
  109. package/lib/components/token/token.js +50 -120
  110. package/lib/components/token/token.styles.js +101 -0
  111. package/lib/components/token/token_map.js +6 -9
  112. package/lib/components/token/token_types.js +22 -0
  113. package/lib/global_styling/reset/global_styles.js +1 -1
  114. package/{test-env/services → lib/services/breakpoint}/breakpoint.js +5 -9
  115. package/lib/services/breakpoint/currentEuiBreakpoint.js +80 -0
  116. package/lib/services/breakpoint/index.js +44 -0
  117. package/lib/services/breakpoint/useIsWithinBreakpoints.js +34 -0
  118. package/lib/services/hooks/index.js +0 -13
  119. package/lib/services/index.js +28 -0
  120. package/optimize/es/components/breadcrumbs/breadcrumb.js +136 -0
  121. package/optimize/es/components/breadcrumbs/breadcrumb.styles.js +61 -0
  122. package/optimize/es/components/breadcrumbs/breadcrumbs.js +92 -165
  123. package/optimize/es/components/breadcrumbs/breadcrumbs.styles.js +30 -0
  124. package/optimize/es/components/code/code_block.js +106 -107
  125. package/optimize/es/components/description_list/description_list.js +20 -24
  126. package/optimize/es/components/description_list/description_list.styles.js +25 -0
  127. package/optimize/es/components/description_list/description_list_context.js +14 -0
  128. package/optimize/es/components/description_list/description_list_description.js +32 -2
  129. package/optimize/es/components/description_list/description_list_description.styles.js +47 -0
  130. package/optimize/es/components/description_list/description_list_title.js +32 -2
  131. package/optimize/es/components/description_list/description_list_title.styles.js +37 -0
  132. package/optimize/es/components/description_list/description_list_types.js +10 -0
  133. package/optimize/es/components/header/header_breadcrumbs/header_breadcrumbs.js +8 -1
  134. package/optimize/es/components/header/header_breadcrumbs/header_breadcrumbs.styles.js +15 -0
  135. package/optimize/es/components/header/header_links/header_links.js +8 -8
  136. package/optimize/es/components/icon/assets/tokenStruct.js +1 -1
  137. package/optimize/es/components/page/page_header/page_header_content.js +1 -1
  138. package/optimize/es/components/panel/split_panel/split_panel.js +1 -1
  139. package/optimize/es/components/provider/provider.js +2 -2
  140. package/optimize/es/components/responsive/hide_for.js +5 -27
  141. package/optimize/es/components/responsive/show_for.js +5 -27
  142. package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.js +16 -35
  143. package/optimize/es/components/table/table_row_cell.js +1 -2
  144. package/optimize/es/components/toast/global_toast_list.js +199 -230
  145. package/optimize/es/components/toast/global_toast_list.styles.js +38 -0
  146. package/optimize/es/components/toast/global_toast_list_item.js +11 -6
  147. package/optimize/es/components/toast/toast.js +24 -24
  148. package/optimize/es/components/toast/toast.styles.js +55 -0
  149. package/optimize/es/components/token/index.js +2 -1
  150. package/optimize/es/components/token/token.js +46 -69
  151. package/optimize/es/components/token/token.styles.js +83 -0
  152. package/optimize/es/components/token/token_map.js +6 -9
  153. package/optimize/es/components/token/token_types.js +11 -0
  154. package/optimize/es/global_styling/reset/global_styles.js +1 -1
  155. package/optimize/es/services/{breakpoint.js → breakpoint/breakpoint.js} +4 -9
  156. package/optimize/es/services/breakpoint/currentEuiBreakpoint.js +53 -0
  157. package/optimize/es/services/breakpoint/index.js +10 -0
  158. package/optimize/es/services/breakpoint/useIsWithinBreakpoints.js +24 -0
  159. package/optimize/es/services/hooks/index.js +0 -1
  160. package/optimize/es/services/index.js +1 -1
  161. package/optimize/lib/components/breadcrumbs/breadcrumb.js +162 -0
  162. package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js +68 -0
  163. package/optimize/lib/components/breadcrumbs/breadcrumbs.js +99 -164
  164. package/optimize/lib/components/breadcrumbs/breadcrumbs.styles.js +33 -0
  165. package/optimize/lib/components/code/code_block.js +105 -106
  166. package/optimize/lib/components/description_list/description_list.js +23 -28
  167. package/optimize/lib/components/description_list/description_list.styles.js +36 -0
  168. package/optimize/lib/components/description_list/description_list_context.js +24 -0
  169. package/optimize/lib/components/description_list/description_list_description.js +43 -2
  170. package/optimize/lib/components/description_list/description_list_description.styles.js +51 -0
  171. package/optimize/lib/components/description_list/description_list_title.js +43 -2
  172. package/optimize/lib/components/description_list/description_list_title.styles.js +50 -0
  173. package/optimize/lib/components/description_list/description_list_types.js +20 -0
  174. package/optimize/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +10 -1
  175. package/optimize/lib/components/header/header_breadcrumbs/header_breadcrumbs.styles.js +26 -0
  176. package/optimize/lib/components/header/header_links/header_links.js +7 -7
  177. package/optimize/lib/components/icon/assets/tokenStruct.js +1 -1
  178. package/optimize/lib/components/icon/svgs/tokens/tokenStruct.svg +1 -1
  179. package/optimize/lib/components/page/page_header/page_header_content.js +2 -2
  180. package/optimize/lib/components/panel/split_panel/split_panel.js +2 -2
  181. package/optimize/lib/components/provider/provider.js +1 -1
  182. package/optimize/lib/components/responsive/hide_for.js +4 -33
  183. package/optimize/lib/components/responsive/show_for.js +4 -33
  184. package/optimize/lib/components/selectable/selectable_templates/selectable_template_sitewide.js +14 -34
  185. package/optimize/lib/components/table/table_row_cell.js +1 -3
  186. package/optimize/lib/components/toast/global_toast_list.js +206 -220
  187. package/optimize/lib/components/toast/global_toast_list.styles.js +47 -0
  188. package/optimize/lib/components/toast/global_toast_list_item.js +14 -7
  189. package/optimize/lib/components/toast/toast.js +26 -24
  190. package/optimize/lib/components/toast/toast.styles.js +66 -0
  191. package/optimize/lib/components/token/index.js +5 -3
  192. package/optimize/lib/components/token/token.js +50 -76
  193. package/optimize/lib/components/token/token.styles.js +91 -0
  194. package/optimize/lib/components/token/token_map.js +6 -9
  195. package/optimize/lib/components/token/token_types.js +22 -0
  196. package/optimize/lib/global_styling/reset/global_styles.js +1 -1
  197. package/optimize/lib/services/{breakpoint.js → breakpoint/breakpoint.js} +5 -9
  198. package/optimize/lib/services/breakpoint/currentEuiBreakpoint.js +81 -0
  199. package/optimize/lib/services/breakpoint/index.js +44 -0
  200. package/optimize/lib/services/breakpoint/useIsWithinBreakpoints.js +34 -0
  201. package/optimize/lib/services/hooks/index.js +0 -13
  202. package/optimize/lib/services/index.js +28 -0
  203. package/package.json +2 -2
  204. package/src/components/control_bar/_control_bar.scss +1 -1
  205. package/src/components/header/_index.scss +0 -1
  206. package/src/components/index.scss +0 -5
  207. package/src/themes/amsterdam/overrides/_breadcrumbs.scss +0 -12
  208. package/src/themes/amsterdam/overrides/_index.scss +0 -4
  209. package/test-env/components/breadcrumbs/breadcrumb.js +211 -0
  210. package/test-env/components/breadcrumbs/breadcrumb.styles.js +68 -0
  211. package/test-env/components/breadcrumbs/breadcrumbs.js +122 -174
  212. package/test-env/components/breadcrumbs/breadcrumbs.styles.js +33 -0
  213. package/test-env/components/collapsible_nav/collapsible_nav.js +2 -2
  214. package/test-env/components/control_bar/control_bar.js +13 -0
  215. package/test-env/components/datagrid/body/data_grid_body.js +1 -1
  216. package/test-env/components/datagrid/body/header/data_grid_header_row.js +1 -1
  217. package/test-env/components/datagrid/controls/column_sorting_draggable.js +1 -1
  218. package/test-env/components/datagrid/data_grid.js +1 -1
  219. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +2 -2
  220. package/test-env/components/date_picker/super_date_picker/super_update_button.js +1 -1
  221. package/test-env/components/description_list/description_list.js +25 -30
  222. package/test-env/components/description_list/description_list.styles.js +36 -0
  223. package/test-env/components/description_list/description_list_context.js +24 -0
  224. package/test-env/components/description_list/description_list_description.js +43 -2
  225. package/test-env/components/description_list/description_list_description.styles.js +51 -0
  226. package/test-env/components/description_list/description_list_title.js +43 -2
  227. package/test-env/components/description_list/description_list_title.styles.js +50 -0
  228. package/test-env/components/description_list/description_list_types.js +20 -0
  229. package/test-env/components/header/header.js +1 -27
  230. package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.js +24 -2
  231. package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.styles.js +26 -0
  232. package/test-env/components/header/header_links/header_links.js +8 -8
  233. package/test-env/components/icon/assets/tokenStruct.js +1 -1
  234. package/test-env/components/page/page_header/page_header.js +1 -0
  235. package/test-env/components/page/page_header/page_header_content.js +3 -2
  236. package/test-env/components/page/page_template.js +1 -0
  237. package/test-env/components/pagination/pagination.js +1 -1
  238. package/test-env/components/panel/split_panel/split_panel.js +3 -3
  239. package/test-env/components/provider/provider.js +1 -1
  240. package/test-env/components/responsive/hide_for.js +5 -34
  241. package/test-env/components/responsive/show_for.js +5 -34
  242. package/test-env/components/selectable/selectable_templates/selectable_template_sitewide.js +15 -35
  243. package/test-env/components/side_nav/side_nav.js +1 -1
  244. package/test-env/components/table/table_row_cell.js +1 -3
  245. package/test-env/components/toast/global_toast_list.js +206 -220
  246. package/test-env/components/toast/global_toast_list.styles.js +47 -0
  247. package/test-env/components/toast/global_toast_list_item.js +14 -7
  248. package/test-env/components/toast/toast.js +27 -25
  249. package/test-env/components/toast/toast.styles.js +66 -0
  250. package/test-env/components/token/index.js +5 -3
  251. package/test-env/components/token/token.js +51 -120
  252. package/test-env/components/token/token.styles.js +91 -0
  253. package/test-env/components/token/token_map.js +6 -9
  254. package/test-env/components/token/token_types.js +22 -0
  255. package/test-env/global_styling/reset/global_styles.js +1 -1
  256. package/{lib/services → test-env/services/breakpoint}/breakpoint.js +5 -9
  257. package/test-env/services/breakpoint/currentEuiBreakpoint.js +37 -0
  258. package/test-env/services/breakpoint/index.js +44 -0
  259. package/test-env/services/breakpoint/useIsWithinBreakpoints.js +34 -0
  260. package/test-env/services/hooks/index.js +0 -13
  261. package/test-env/services/index.js +28 -0
  262. package/lib/services/hooks/useIsWithinBreakpoints.js +0 -57
  263. package/optimize/es/services/hooks/useIsWithinBreakpoints.js +0 -46
  264. package/optimize/lib/services/hooks/useIsWithinBreakpoints.js +0 -57
  265. package/src/components/breadcrumbs/_breadcrumbs.scss +0 -79
  266. package/src/components/breadcrumbs/_index.scss +0 -2
  267. package/src/components/breadcrumbs/_variables.scss +0 -2
  268. package/src/components/description_list/_description_list.scss +0 -211
  269. package/src/components/description_list/_index.scss +0 -1
  270. package/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss +0 -8
  271. package/src/components/header/header_breadcrumbs/_index.scss +0 -1
  272. package/src/components/portal/_index.scss +0 -1
  273. package/src/components/portal/_portal.scss +0 -6
  274. package/src/components/toast/_global_toast_list.scss +0 -90
  275. package/src/components/toast/_index.scss +0 -4
  276. package/src/components/toast/_toast.scss +0 -103
  277. package/src/components/token/_index.scss +0 -2
  278. package/src/components/token/_token.scss +0 -85
  279. package/src/components/token/_variables.scss +0 -13
  280. package/src/themes/amsterdam/overrides/_header_breadcrumbs.scss +0 -71
  281. package/src/themes/amsterdam/overrides/_toast.scss +0 -21
  282. package/src/themes/amsterdam/overrides/_token.scss +0 -4
  283. package/test-env/services/hooks/useIsWithinBreakpoints.js +0 -57
@@ -9,7 +9,9 @@ exports.isWithinBreakpoints = isWithinBreakpoints;
9
9
  exports.isWithinMaxBreakpoint = isWithinMaxBreakpoint;
10
10
  exports.isWithinMinBreakpoint = isWithinMinBreakpoint;
11
11
 
12
- var _common = require("../components/common");
12
+ var _common = require("../../components/common");
13
+
14
+ var _breakpoint = require("../../themes/amsterdam/global_styling/variables/_breakpoint");
13
15
 
14
16
  /*
15
17
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -18,13 +20,7 @@ var _common = require("../components/common");
18
20
  * in compliance with, at your election, the Elastic License 2.0 or the Server
19
21
  * Side Public License, v 1.
20
22
  */
21
- var BREAKPOINTS = {
22
- xl: 1200,
23
- l: 992,
24
- m: 768,
25
- s: 575,
26
- xs: 0
27
- };
23
+ var BREAKPOINTS = _breakpoint.breakpoint;
28
24
  exports.BREAKPOINTS = BREAKPOINTS;
29
25
  var BREAKPOINT_KEYS = (0, _common.keysOf)(BREAKPOINTS);
30
26
  /**
@@ -42,7 +38,7 @@ exports.BREAKPOINT_KEYS = BREAKPOINT_KEYS;
42
38
  function getBreakpoint(width) {
43
39
  var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BREAKPOINTS;
44
40
  // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
45
- return (0, _common.keysOf)(BREAKPOINTS).find(function (key) {
41
+ return BREAKPOINT_KEYS.find(function (key) {
46
42
  return breakpoints[key] <= width;
47
43
  });
48
44
  }
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useCurrentEuiBreakpoint = void 0;
9
+
10
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
+
12
+ var _react = require("react");
13
+
14
+ var _breakpoint = require("./breakpoint");
15
+
16
+ var _currentEuiBreakpoint = require("./currentEuiBreakpoint");
17
+
18
+ /*
19
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
20
+ * or more contributor license agreements. Licensed under the Elastic License
21
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
22
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
23
+ * Side Public License, v 1.
24
+ */
25
+
26
+ /**
27
+ * Jest tests *likely* will not have a wrapping EuiProvider. If they don't,
28
+ * this test mock mimics CurrentEuiBreakpoint logic (w/o resize observers).
29
+ */
30
+ var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
31
+ var context = (0, _react.useContext)(_currentEuiBreakpoint.CurrentEuiBreakpointContext);
32
+ if (context !== undefined) return context; // Component has been wrapped, everything is fine.
33
+
34
+ return (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== undefined ? (0, _breakpoint.getBreakpoint)(window.innerWidth) : undefined;
35
+ };
36
+
37
+ exports.useCurrentEuiBreakpoint = useCurrentEuiBreakpoint;
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _breakpoint = require("./breakpoint");
8
+
9
+ Object.keys(_breakpoint).forEach(function (key) {
10
+ if (key === "default" || key === "__esModule") return;
11
+ if (key in exports && exports[key] === _breakpoint[key]) return;
12
+ Object.defineProperty(exports, key, {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _breakpoint[key];
16
+ }
17
+ });
18
+ });
19
+
20
+ var _currentEuiBreakpoint = require("./currentEuiBreakpoint");
21
+
22
+ Object.keys(_currentEuiBreakpoint).forEach(function (key) {
23
+ if (key === "default" || key === "__esModule") return;
24
+ if (key in exports && exports[key] === _currentEuiBreakpoint[key]) return;
25
+ Object.defineProperty(exports, key, {
26
+ enumerable: true,
27
+ get: function get() {
28
+ return _currentEuiBreakpoint[key];
29
+ }
30
+ });
31
+ });
32
+
33
+ var _useIsWithinBreakpoints = require("./useIsWithinBreakpoints");
34
+
35
+ Object.keys(_useIsWithinBreakpoints).forEach(function (key) {
36
+ if (key === "default" || key === "__esModule") return;
37
+ if (key in exports && exports[key] === _useIsWithinBreakpoints[key]) return;
38
+ Object.defineProperty(exports, key, {
39
+ enumerable: true,
40
+ get: function get() {
41
+ return _useIsWithinBreakpoints[key];
42
+ }
43
+ });
44
+ });
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useIsWithinBreakpoints = void 0;
7
+
8
+ var _currentEuiBreakpoint = require("./currentEuiBreakpoint");
9
+
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
+
18
+ /**
19
+ * Given the current window.innerWidth and an array of breakpoint keys,
20
+ * this hook stores state and returns true or false if the window.innerWidth
21
+ * falls within any of the named breakpoints.
22
+ *
23
+ * @param {_EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
24
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
25
+ * Since hooks can't be called conditionally, it's easier to pass the condition into the hook
26
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
27
+ */
28
+ var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
29
+ var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
30
+ var currentBreakpoint = (0, _currentEuiBreakpoint.useCurrentEuiBreakpoint)();
31
+ return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
32
+ };
33
+
34
+ exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
@@ -43,19 +43,6 @@ Object.keys(_useForceRender).forEach(function (key) {
43
43
  });
44
44
  });
45
45
 
46
- var _useIsWithinBreakpoints = require("./useIsWithinBreakpoints");
47
-
48
- Object.keys(_useIsWithinBreakpoints).forEach(function (key) {
49
- if (key === "default" || key === "__esModule") return;
50
- if (key in exports && exports[key] === _useIsWithinBreakpoints[key]) return;
51
- Object.defineProperty(exports, key, {
52
- enumerable: true,
53
- get: function get() {
54
- return _useIsWithinBreakpoints[key];
55
- }
56
- });
57
- });
58
-
59
46
  var _useLatest = require("./useLatest");
60
47
 
61
48
  Object.keys(_useLatest).forEach(function (key) {
@@ -19,8 +19,12 @@ var _exportNames = {
19
19
  BREAKPOINT_KEYS: true,
20
20
  getBreakpoint: true,
21
21
  isWithinBreakpoints: true,
22
+ useIsWithinBreakpoints: true,
22
23
  isWithinMaxBreakpoint: true,
23
24
  isWithinMinBreakpoint: true,
25
+ CurrentEuiBreakpointContext: true,
26
+ CurrentEuiBreakpointProvider: true,
27
+ useCurrentEuiBreakpoint: true,
24
28
  isColorDark: true,
25
29
  isValidHex: true,
26
30
  calculateContrast: true,
@@ -112,6 +116,18 @@ Object.defineProperty(exports, "Comparators", {
112
116
  return _sort.Comparators;
113
117
  }
114
118
  });
119
+ Object.defineProperty(exports, "CurrentEuiBreakpointContext", {
120
+ enumerable: true,
121
+ get: function get() {
122
+ return _breakpoint.CurrentEuiBreakpointContext;
123
+ }
124
+ });
125
+ Object.defineProperty(exports, "CurrentEuiBreakpointProvider", {
126
+ enumerable: true,
127
+ get: function get() {
128
+ return _breakpoint.CurrentEuiBreakpointProvider;
129
+ }
130
+ });
115
131
  Object.defineProperty(exports, "DEFAULT_VISUALIZATION_COLOR", {
116
132
  enumerable: true,
117
133
  get: function get() {
@@ -563,12 +579,24 @@ Object.defineProperty(exports, "useColorStopsState", {
563
579
  return _color_picker.useColorStopsState;
564
580
  }
565
581
  });
582
+ Object.defineProperty(exports, "useCurrentEuiBreakpoint", {
583
+ enumerable: true,
584
+ get: function get() {
585
+ return _breakpoint.useCurrentEuiBreakpoint;
586
+ }
587
+ });
566
588
  Object.defineProperty(exports, "useGeneratedHtmlId", {
567
589
  enumerable: true,
568
590
  get: function get() {
569
591
  return _accessibility.useGeneratedHtmlId;
570
592
  }
571
593
  });
594
+ Object.defineProperty(exports, "useIsWithinBreakpoints", {
595
+ enumerable: true,
596
+ get: function get() {
597
+ return _breakpoint.useIsWithinBreakpoints;
598
+ }
599
+ });
572
600
 
573
601
  var keys = _interopRequireWildcard(require("./keys"));
574
602
 
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
7
-
8
- var _react = require("react");
9
-
10
- var _breakpoint = require("../breakpoint");
11
-
12
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
13
-
14
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15
-
16
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
17
-
18
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
19
-
20
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
21
-
22
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
23
-
24
- /**
25
- * Given the current window.innerWidth and an array of breakpoint keys,
26
- * this hook stores state and returns true or false if the window.innerWidth
27
- * falls within any of the named breakpoints.
28
- *
29
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
30
- * @param {boolean} isActive Manages whether the resize handler should be active
31
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
32
- */
33
- function useIsWithinBreakpoints(sizes) {
34
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
35
-
36
- var _useState = (0, _react.useState)(false),
37
- _useState2 = _slicedToArray(_useState, 2),
38
- isWithinBreakpointsValue = _useState2[0],
39
- setIsWithinBreakpointsValue = _useState2[1];
40
-
41
- (0, _react.useEffect)(function () {
42
- function handleResize() {
43
- setIsWithinBreakpointsValue((0, _breakpoint.isWithinBreakpoints)(window.innerWidth, sizes));
44
- }
45
-
46
- if (isActive) {
47
- window.removeEventListener('resize', handleResize);
48
- window.addEventListener('resize', handleResize);
49
- handleResize();
50
- }
51
-
52
- return function () {
53
- return window.removeEventListener('resize', handleResize);
54
- };
55
- }, [sizes, isActive]);
56
- return isWithinBreakpointsValue;
57
- }
@@ -1,46 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
-
3
- /*
4
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
5
- * or more contributor license agreements. Licensed under the Elastic License
6
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
7
- * in compliance with, at your election, the Elastic License 2.0 or the Server
8
- * Side Public License, v 1.
9
- */
10
- import { useState, useEffect } from 'react';
11
- import { isWithinBreakpoints } from '../breakpoint';
12
- /**
13
- * Given the current window.innerWidth and an array of breakpoint keys,
14
- * this hook stores state and returns true or false if the window.innerWidth
15
- * falls within any of the named breakpoints.
16
- *
17
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
18
- * @param {boolean} isActive Manages whether the resize handler should be active
19
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
20
- */
21
-
22
- export function useIsWithinBreakpoints(sizes) {
23
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
24
-
25
- var _useState = useState(false),
26
- _useState2 = _slicedToArray(_useState, 2),
27
- isWithinBreakpointsValue = _useState2[0],
28
- setIsWithinBreakpointsValue = _useState2[1];
29
-
30
- useEffect(function () {
31
- function handleResize() {
32
- setIsWithinBreakpointsValue(isWithinBreakpoints(window.innerWidth, sizes));
33
- }
34
-
35
- if (isActive) {
36
- window.removeEventListener('resize', handleResize);
37
- window.addEventListener('resize', handleResize);
38
- handleResize();
39
- }
40
-
41
- return function () {
42
- return window.removeEventListener('resize', handleResize);
43
- };
44
- }, [sizes, isActive]);
45
- return isWithinBreakpointsValue;
46
- }
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
- var _react = require("react");
13
-
14
- var _breakpoint = require("../breakpoint");
15
-
16
- /*
17
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
18
- * or more contributor license agreements. Licensed under the Elastic License
19
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
20
- * in compliance with, at your election, the Elastic License 2.0 or the Server
21
- * Side Public License, v 1.
22
- */
23
-
24
- /**
25
- * Given the current window.innerWidth and an array of breakpoint keys,
26
- * this hook stores state and returns true or false if the window.innerWidth
27
- * falls within any of the named breakpoints.
28
- *
29
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
30
- * @param {boolean} isActive Manages whether the resize handler should be active
31
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
32
- */
33
- function useIsWithinBreakpoints(sizes) {
34
- var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
35
-
36
- var _useState = (0, _react.useState)(false),
37
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
38
- isWithinBreakpointsValue = _useState2[0],
39
- setIsWithinBreakpointsValue = _useState2[1];
40
-
41
- (0, _react.useEffect)(function () {
42
- function handleResize() {
43
- setIsWithinBreakpointsValue((0, _breakpoint.isWithinBreakpoints)(window.innerWidth, sizes));
44
- }
45
-
46
- if (isActive) {
47
- window.removeEventListener('resize', handleResize);
48
- window.addEventListener('resize', handleResize);
49
- handleResize();
50
- }
51
-
52
- return function () {
53
- return window.removeEventListener('resize', handleResize);
54
- };
55
- }, [sizes, isActive]);
56
- return isWithinBreakpointsValue;
57
- }
@@ -1,79 +0,0 @@
1
- /**
2
- * 1. Add vertical space between breadcrumbs,
3
- * but make sure the whole breadcrumb set doesn't add space below itself
4
- */
5
-
6
- .euiBreadcrumbs__list {
7
- @include euiFontSizeS;
8
- display: flex;
9
- align-items: center;
10
- flex-wrap: wrap;
11
- min-width: 0; // Ensure it shrinks if the window is narrow
12
- margin-bottom: -$euiSizeXS; /* 1 */
13
- }
14
-
15
- .euiBreadcrumb {
16
- margin-bottom: $euiSizeXS; /* 1 */
17
- display: flex;
18
- align-items: center;
19
-
20
- &:not(.euiBreadcrumb--last) {
21
- color: $euiTextSubduedColor;
22
-
23
- &::after {
24
- content: '';
25
- margin: $euiSizeXS $euiBreadcrumbSpacing 0;
26
- width: 1px;
27
- height: $euiSize;
28
- transform: translateY(-1px) rotate(15deg);
29
- background: $euiColorLightShade;
30
- flex-shrink: 0;
31
- }
32
- }
33
- }
34
-
35
- .euiBreadcrumb--collapsed {
36
- flex-shrink: 0;
37
- }
38
-
39
- .euiBreadcrumb--last {
40
- font-weight: $euiFontWeightMedium;
41
- }
42
-
43
- .euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content {
44
- font-weight: $euiFontWeightRegular;
45
- color: $euiTextSubduedColor;
46
- }
47
-
48
- .euiBreadcrumbs--truncate {
49
- .euiBreadcrumbs__list {
50
- white-space: nowrap;
51
- flex-wrap: nowrap;
52
- }
53
-
54
- .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
55
- .euiBreadcrumb__content {
56
- max-width: $euiBreadcrumbTruncateWidth;
57
- overflow: hidden;
58
- text-overflow: ellipsis;
59
- }
60
-
61
- &.euiBreadcrumb--last .euiBreadcrumb__content {
62
- max-width: none;
63
- }
64
- }
65
-
66
- .euiBreadcrumb {
67
- overflow: hidden;
68
- }
69
- }
70
-
71
- .euiBreadcrumbs--truncate,
72
- .euiBreadcrumb--truncate {
73
- .euiBreadcrumb__content {
74
- @include euiTextTruncate;
75
- max-width: $euiBreadcrumbTruncateWidth;
76
- text-align: center;
77
- vertical-align: baseline;
78
- }
79
- }
@@ -1,2 +0,0 @@
1
- @import 'variables';
2
- @import 'breadcrumbs';
@@ -1,2 +0,0 @@
1
- $euiBreadcrumbSpacing: $euiSizeS !default;
2
- $euiBreadcrumbTruncateWidth: $euiSize * 10 !default;
@@ -1,211 +0,0 @@
1
- .euiDescriptionList {
2
- // sass-lint:disable-block nesting-depth
3
-
4
- &.euiDescriptionList--row {
5
-
6
- .euiDescriptionList__title {
7
- @include euiTitle('xs');
8
- line-height: $euiLineHeight;
9
- margin-top: $euiSize;
10
-
11
- // Make sure the first <dt> doesn't get a margin.
12
- &:first-of-type {
13
- margin-top: 0;
14
- }
15
- }
16
-
17
- .euiDescriptionList__description {
18
- @include euiFontSizeS;
19
- }
20
-
21
- // Lists can be aligned.
22
- &.euiDescriptionList--center {
23
- text-align: center;
24
- }
25
-
26
- // Reversed makes the description larger than the title
27
- &.euiDescriptionList--reverse {
28
- .euiDescriptionList__title {
29
- @include euiText;
30
- @include euiFontSizeS;
31
- }
32
-
33
- .euiDescriptionList__description {
34
- @include euiTitle('xs');
35
- }
36
- }
37
-
38
- // Compressed gets smaller fonts.
39
- &.euiDescriptionList--compressed {
40
-
41
- .euiDescriptionList__title {
42
- @include euiTitle('xxs');
43
- line-height: $euiLineHeight;
44
- }
45
-
46
- .euiDescriptionList__description {
47
- @include euiFontSizeS;
48
- }
49
-
50
- &.euiDescriptionList--reverse {
51
- .euiDescriptionList__title {
52
- @include euiText;
53
- @include euiFontSizeS;
54
- }
55
-
56
- .euiDescriptionList__description {
57
- @include euiTitle('xxs');
58
- line-height: $euiLineHeight;
59
- }
60
- }
61
- }
62
- }
63
-
64
-
65
- &.euiDescriptionList--column,
66
- &.euiDescriptionList--responsiveColumn {
67
- display: flex;
68
- align-items: stretch;
69
- flex-wrap: wrap;
70
-
71
- > * {
72
- margin-top: $euiSize;
73
- }
74
-
75
- // First two items don't have margin
76
- > *:first-child,
77
- > :nth-child(2) {
78
- margin-top: 0;
79
- }
80
-
81
- .euiDescriptionList__title {
82
- @include euiTitle('xs');
83
- line-height: $euiLineHeight;
84
- width: 50%; // Flex-basis doesn't work in IE with padding
85
- padding-right: $euiSizeS;
86
- }
87
-
88
- .euiDescriptionList__description {
89
- @include euiFontSize;
90
- width: 50%; // Flex-basis doesn't work in IE with padding
91
- padding-left: $euiSizeS;
92
- }
93
-
94
- // Align the title to smash against the description.
95
- &.euiDescriptionList--center {
96
- .euiDescriptionList__title {
97
- text-align: right;
98
- }
99
- }
100
-
101
- &.euiDescriptionList--reverse {
102
- .euiDescriptionList__title {
103
- @include euiText;
104
- @include euiFontSize;
105
- }
106
-
107
- .euiDescriptionList__description {
108
- @include euiTitle('xs');
109
- line-height: $euiLineHeight;
110
- }
111
- }
112
-
113
- &.euiDescriptionList--compressed {
114
- .euiDescriptionList__title {
115
- @include euiTitle('xxs');
116
- line-height: $euiLineHeight;
117
- }
118
-
119
- .euiDescriptionList__description {
120
- @include euiFontSizeS;
121
- }
122
-
123
- &.euiDescriptionList--reverse {
124
- .euiDescriptionList__title {
125
- @include euiText;
126
- @include euiFontSizeS;
127
- }
128
-
129
- .euiDescriptionList__description {
130
- @include euiTitle('xxs');
131
- line-height: $euiLineHeight;
132
- }
133
- }
134
- }
135
- }
136
-
137
- &.euiDescriptionList--responsiveColumn {
138
- @include euiBreakpoint('xs', 's') {
139
- display: block;
140
-
141
- .euiDescriptionList__title,
142
- .euiDescriptionList__description {
143
- width: 100%;
144
- padding: 0;
145
- }
146
-
147
- .euiDescriptionList__description {
148
- @include euiFontSizeS;
149
- margin-top: 0;
150
- }
151
-
152
- &.euiDescriptionList--center {
153
- .euiDescriptionList__title,
154
- .euiDescriptionList__description {
155
- text-align: center;
156
- }
157
- }
158
-
159
- &.euiDescriptionList--reverse {
160
- .euiDescriptionList__title {
161
- @include euiFontSizeS;
162
- }
163
-
164
- .euiDescriptionList__description {
165
- @include euiTitle('xs');
166
- }
167
- }
168
- }
169
- }
170
-
171
- &.euiDescriptionList--inline {
172
-
173
- .euiDescriptionList__title {
174
- @include euiFontSizeS;
175
- display: inline;
176
- border-radius: $euiBorderRadiusSmall;
177
- font-weight: $euiFontWeightMedium;
178
- background-color: tintOrShade($euiColorLightShade, 50%, 0%);
179
- padding: 1px $euiSizeXS;
180
- margin: 0 $euiSizeXS;
181
-
182
- // Make sure the first <dt> doesn't get a margin.
183
- &:first-of-type {
184
- margin-left: 0;
185
- }
186
- }
187
-
188
- .euiDescriptionList__description {
189
- @include euiFontSizeS;
190
- display: inline;
191
- }
192
-
193
- // Compressed when inline is even smaller.
194
- &.euiDescriptionList--compressed {
195
-
196
- .euiDescriptionList__title {
197
- @include euiFontSizeXS;
198
- padding: 0 $euiSizeXS;
199
- }
200
-
201
- .euiDescriptionList__description {
202
- @include euiFontSizeXS;
203
- }
204
- }
205
-
206
- &.euiDescriptionList--center {
207
- text-align: center;
208
- }
209
- }
210
-
211
- }
@@ -1 +0,0 @@
1
- @import 'description_list';