@elastic/eui 71.1.0 → 72.0.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 (132) hide show
  1. package/dist/eui_theme_dark.css +20 -28
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +20 -28
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/date_picker/auto_refresh/refresh_interval.js +3 -1
  6. package/es/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
  7. package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
  8. package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +160 -173
  9. package/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
  10. package/es/components/date_picker/super_date_picker/super_date_picker.js +16 -0
  11. package/es/components/error_boundary/error_boundary.a11y.js +67 -0
  12. package/es/components/expression/expression.a11y.js +254 -0
  13. package/es/components/filter_group/filter_group.a11y.js +281 -0
  14. package/es/components/focus_trap/focus_trap.a11y.js +131 -0
  15. package/es/components/form/file_picker/file_picker.js +1 -0
  16. package/es/components/header/header.a11y.js +374 -0
  17. package/es/components/icon/icon_ML.a11y.js +33 -0
  18. package/es/components/icon/icon_apps.a11y.js +33 -0
  19. package/es/components/icon/icon_editor.a11y.js +33 -0
  20. package/es/components/icon/icon_elastic.a11y.js +33 -0
  21. package/es/components/icon/icon_glyphs.a11y.js +33 -0
  22. package/es/components/icon/icon_tokens.a11y.js +33 -0
  23. package/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +1 -1
  24. package/es/components/selectable/selectable.js +4 -3
  25. package/es/components/selectable/selectable_list/selectable_list.js +17 -5
  26. package/es/components/tabs/tab.js +7 -17
  27. package/es/components/tabs/tabbed_content/tabbed_content.js +0 -16
  28. package/es/components/tabs/tabs.js +7 -11
  29. package/es/components/tabs/tabs_context.js +13 -0
  30. package/eui.d.ts +41 -32
  31. package/i18ntokens.json +30 -14
  32. package/lib/components/date_picker/auto_refresh/refresh_interval.js +3 -1
  33. package/lib/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
  34. package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
  35. package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +155 -168
  36. package/lib/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
  37. package/lib/components/date_picker/super_date_picker/super_date_picker.js +16 -0
  38. package/lib/components/error_boundary/error_boundary.a11y.js +75 -0
  39. package/lib/components/expression/expression.a11y.js +262 -0
  40. package/lib/components/filter_group/filter_group.a11y.js +287 -0
  41. package/lib/components/focus_trap/focus_trap.a11y.js +140 -0
  42. package/lib/components/form/file_picker/file_picker.js +1 -0
  43. package/lib/components/header/header.a11y.js +385 -0
  44. package/lib/components/icon/icon_ML.a11y.js +40 -0
  45. package/lib/components/icon/icon_apps.a11y.js +40 -0
  46. package/lib/components/icon/icon_editor.a11y.js +40 -0
  47. package/lib/components/icon/icon_elastic.a11y.js +40 -0
  48. package/lib/components/icon/icon_glyphs.a11y.js +40 -0
  49. package/lib/components/icon/icon_tokens.a11y.js +40 -0
  50. package/lib/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +2 -2
  51. package/lib/components/selectable/selectable.js +4 -3
  52. package/lib/components/selectable/selectable_list/selectable_list.js +17 -5
  53. package/lib/components/tabs/tab.js +14 -17
  54. package/lib/components/tabs/tabbed_content/tabbed_content.js +0 -16
  55. package/lib/components/tabs/tabs.js +8 -14
  56. package/lib/components/tabs/tabs_context.js +23 -0
  57. package/optimize/es/components/date_picker/auto_refresh/refresh_interval.js +3 -1
  58. package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
  59. package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
  60. package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +145 -169
  61. package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
  62. package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +2 -0
  63. package/optimize/es/components/error_boundary/error_boundary.a11y.js +67 -0
  64. package/optimize/es/components/expression/expression.a11y.js +243 -0
  65. package/optimize/es/components/filter_group/filter_group.a11y.js +271 -0
  66. package/optimize/es/components/focus_trap/focus_trap.a11y.js +120 -0
  67. package/optimize/es/components/form/file_picker/file_picker.js +1 -0
  68. package/optimize/es/components/header/header.a11y.js +364 -0
  69. package/optimize/es/components/icon/icon_ML.a11y.js +33 -0
  70. package/optimize/es/components/icon/icon_apps.a11y.js +33 -0
  71. package/optimize/es/components/icon/icon_editor.a11y.js +33 -0
  72. package/optimize/es/components/icon/icon_elastic.a11y.js +33 -0
  73. package/optimize/es/components/icon/icon_glyphs.a11y.js +33 -0
  74. package/optimize/es/components/icon/icon_tokens.a11y.js +33 -0
  75. package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +1 -1
  76. package/optimize/es/components/selectable/selectable.js +2 -2
  77. package/optimize/es/components/selectable/selectable_list/selectable_list.js +15 -4
  78. package/optimize/es/components/tabs/tab.js +7 -5
  79. package/optimize/es/components/tabs/tabs.js +7 -11
  80. package/optimize/es/components/tabs/tabs_context.js +13 -0
  81. package/optimize/lib/components/date_picker/auto_refresh/refresh_interval.js +3 -1
  82. package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
  83. package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
  84. package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +146 -167
  85. package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
  86. package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +2 -0
  87. package/optimize/lib/components/error_boundary/error_boundary.a11y.js +75 -0
  88. package/optimize/lib/components/expression/expression.a11y.js +254 -0
  89. package/optimize/lib/components/filter_group/filter_group.a11y.js +287 -0
  90. package/optimize/lib/components/focus_trap/focus_trap.a11y.js +140 -0
  91. package/optimize/lib/components/form/file_picker/file_picker.js +1 -0
  92. package/optimize/lib/components/header/header.a11y.js +385 -0
  93. package/optimize/lib/components/icon/icon_ML.a11y.js +40 -0
  94. package/optimize/lib/components/icon/icon_apps.a11y.js +40 -0
  95. package/optimize/lib/components/icon/icon_editor.a11y.js +40 -0
  96. package/optimize/lib/components/icon/icon_elastic.a11y.js +40 -0
  97. package/optimize/lib/components/icon/icon_glyphs.a11y.js +40 -0
  98. package/optimize/lib/components/icon/icon_tokens.a11y.js +40 -0
  99. package/optimize/lib/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +2 -2
  100. package/optimize/lib/components/selectable/selectable.js +2 -2
  101. package/optimize/lib/components/selectable/selectable_list/selectable_list.js +15 -4
  102. package/optimize/lib/components/tabs/tab.js +15 -5
  103. package/optimize/lib/components/tabs/tabs.js +8 -14
  104. package/optimize/lib/components/tabs/tabs_context.js +23 -0
  105. package/package.json +4 -6
  106. package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +14 -0
  107. package/src/components/form/file_picker/_file_picker.scss +14 -14
  108. package/test-env/components/date_picker/auto_refresh/refresh_interval.js +3 -1
  109. package/test-env/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
  110. package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
  111. package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +153 -166
  112. package/test-env/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
  113. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +16 -0
  114. package/test-env/components/error_boundary/error_boundary.a11y.js +75 -0
  115. package/test-env/components/expression/expression.a11y.js +254 -0
  116. package/test-env/components/filter_group/filter_group.a11y.js +287 -0
  117. package/test-env/components/focus_trap/focus_trap.a11y.js +140 -0
  118. package/test-env/components/form/file_picker/file_picker.js +1 -0
  119. package/test-env/components/header/header.a11y.js +385 -0
  120. package/test-env/components/icon/icon_ML.a11y.js +40 -0
  121. package/test-env/components/icon/icon_apps.a11y.js +40 -0
  122. package/test-env/components/icon/icon_editor.a11y.js +40 -0
  123. package/test-env/components/icon/icon_elastic.a11y.js +40 -0
  124. package/test-env/components/icon/icon_glyphs.a11y.js +40 -0
  125. package/test-env/components/icon/icon_tokens.a11y.js +40 -0
  126. package/test-env/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +2 -2
  127. package/test-env/components/selectable/selectable.js +4 -3
  128. package/test-env/components/selectable/selectable_list/selectable_list.js +17 -5
  129. package/test-env/components/tabs/tab.js +15 -17
  130. package/test-env/components/tabs/tabbed_content/tabbed_content.js +0 -16
  131. package/test-env/components/tabs/tabs.js +8 -14
  132. package/test-env/components/tabs/tabs_context.js +23 -0
@@ -0,0 +1,374 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+
3
+ 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."); }
4
+
5
+ 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); }
6
+
7
+ 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; }
8
+
9
+ 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; }
10
+
11
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
+
13
+ /*
14
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
15
+ * or more contributor license agreements. Licensed under the Elastic License
16
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
17
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
18
+ * Side Public License, v 1.
19
+ */
20
+ /// <reference types="../../../cypress/support"/>
21
+ import React, { useState } from 'react';
22
+ import { EuiAvatar } from '../avatar';
23
+ import { EuiFlexGroup, EuiFlexItem } from '../flex';
24
+ import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
25
+ import { EuiHeader } from './header';
26
+ import { EuiHeaderLogo } from './header_logo';
27
+ import { EuiHeaderSectionItemButton, EuiHeaderSectionItem, EuiHeaderSection } from './header_section';
28
+ import { EuiIcon } from '../icon';
29
+ import { EuiKeyPadMenu, EuiKeyPadMenuItem } from '../key_pad_menu';
30
+ import { EuiLink } from '../link';
31
+ import { EuiPopover, EuiPopoverTitle } from '../popover';
32
+ import { EuiSelectable, EuiSelectableMessage, EuiSelectableTemplateSitewide } from '../selectable';
33
+ import { EuiSpacer } from '../spacer';
34
+ import { EuiText } from '../text';
35
+ import { useGeneratedHtmlId } from '../../services';
36
+ import { jsx as ___EmotionJSX } from "@emotion/react";
37
+
38
+ var Header = function Header() {
39
+ var renderLogo = function renderLogo() {
40
+ return ___EmotionJSX(EuiHeaderLogo, {
41
+ iconType: "logoElastic",
42
+ href: "#",
43
+ onClick: function onClick(e) {
44
+ return e.preventDefault();
45
+ },
46
+ "aria-label": "Go to home page"
47
+ });
48
+ };
49
+
50
+ var renderBreadcrumbs = function renderBreadcrumbs() {
51
+ var breadcrumbs = [{
52
+ text: 'Management',
53
+ href: '#',
54
+ onClick: function onClick(e) {
55
+ e.preventDefault();
56
+ },
57
+ 'data-test-subj': 'breadcrumbsAnimals',
58
+ className: 'customClass'
59
+ }, {
60
+ text: 'Truncation test is here for a really long item',
61
+ href: '#',
62
+ onClick: function onClick(e) {
63
+ e.preventDefault();
64
+ }
65
+ }, {
66
+ text: 'Hidden',
67
+ 'data-test-subj': 'cy-breadcrumb-hidden',
68
+ href: '#',
69
+ onClick: function onClick(e) {
70
+ e.preventDefault();
71
+ }
72
+ }, {
73
+ text: 'Users',
74
+ href: '#',
75
+ onClick: function onClick(e) {
76
+ e.preventDefault();
77
+ }
78
+ }, {
79
+ text: 'Create'
80
+ }];
81
+ return ___EmotionJSX(EuiHeaderBreadcrumbs, {
82
+ "aria-label": "Header breadcrumbs example",
83
+ breadcrumbs: breadcrumbs
84
+ });
85
+ };
86
+
87
+ var search = ___EmotionJSX(EuiSelectableTemplateSitewide, {
88
+ options: [],
89
+ searchProps: {
90
+ compressed: true
91
+ },
92
+ popoverButton: ___EmotionJSX(EuiHeaderSectionItemButton, {
93
+ "aria-label": "Sitewide search"
94
+ }, ___EmotionJSX(EuiIcon, {
95
+ type: "search",
96
+ size: "m"
97
+ })),
98
+ emptyMessage: ___EmotionJSX(EuiSelectableMessage, {
99
+ style: {
100
+ minHeight: 300
101
+ },
102
+ "data-test-subj": "cy-search-menu"
103
+ }, ___EmotionJSX("p", null, "Please see the component page for", ' ', ___EmotionJSX("strong", null, "EuiSelectableTemplateSitewide"), "on how to configure your sitewide search."))
104
+ });
105
+
106
+ return ___EmotionJSX(EuiHeader, null, ___EmotionJSX(EuiHeaderSection, {
107
+ grow: false
108
+ }, ___EmotionJSX(EuiHeaderSectionItem, {
109
+ border: "right"
110
+ }, renderLogo()), ___EmotionJSX(EuiHeaderSectionItem, {
111
+ border: "right"
112
+ }, ___EmotionJSX(HeaderSpacesMenu, null))), renderBreadcrumbs(), ___EmotionJSX(EuiHeaderSection, {
113
+ side: "right"
114
+ }, ___EmotionJSX(EuiHeaderSectionItem, null, search), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderUserMenu, null)), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderAppMenu, null))));
115
+ };
116
+
117
+ var HeaderUserMenu = function HeaderUserMenu() {
118
+ var headerUserPopoverId = useGeneratedHtmlId({
119
+ prefix: 'headerUserPopover'
120
+ });
121
+
122
+ var _useState = useState(false),
123
+ _useState2 = _slicedToArray(_useState, 2),
124
+ isOpen = _useState2[0],
125
+ setIsOpen = _useState2[1];
126
+
127
+ var onMenuButtonClick = function onMenuButtonClick() {
128
+ setIsOpen(!isOpen);
129
+ };
130
+
131
+ var closeMenu = function closeMenu() {
132
+ setIsOpen(false);
133
+ };
134
+
135
+ var button = ___EmotionJSX(EuiHeaderSectionItemButton, {
136
+ "aria-controls": headerUserPopoverId,
137
+ "aria-expanded": isOpen,
138
+ "aria-haspopup": "true",
139
+ "aria-label": "Account menu",
140
+ onClick: onMenuButtonClick
141
+ }, ___EmotionJSX(EuiAvatar, {
142
+ name: "John Username",
143
+ size: "s"
144
+ }));
145
+
146
+ return ___EmotionJSX(EuiPopover, {
147
+ id: headerUserPopoverId,
148
+ button: button,
149
+ isOpen: isOpen,
150
+ anchorPosition: "downRight",
151
+ closePopover: closeMenu,
152
+ panelPaddingSize: "none",
153
+ "data-test-subj": "cy-account-menu"
154
+ }, ___EmotionJSX("div", {
155
+ style: {
156
+ width: 320
157
+ }
158
+ }, ___EmotionJSX(EuiFlexGroup, {
159
+ gutterSize: "m",
160
+ className: "euiHeaderProfile",
161
+ responsive: false
162
+ }, ___EmotionJSX(EuiFlexItem, {
163
+ grow: false
164
+ }, ___EmotionJSX(EuiAvatar, {
165
+ name: "John Username",
166
+ size: "xl"
167
+ })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "John Username")), ___EmotionJSX(EuiSpacer, {
168
+ size: "m"
169
+ }), ___EmotionJSX(EuiFlexGroup, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFlexGroup, {
170
+ justifyContent: "spaceBetween"
171
+ }, ___EmotionJSX(EuiFlexItem, {
172
+ grow: false
173
+ }, ___EmotionJSX(EuiLink, null, "Edit profile")), ___EmotionJSX(EuiFlexItem, {
174
+ grow: false
175
+ }, ___EmotionJSX(EuiLink, null, "Log out")))))))));
176
+ };
177
+
178
+ var HeaderSpacesMenu = function HeaderSpacesMenu() {
179
+ var headerSpacesPopoverId = useGeneratedHtmlId({
180
+ prefix: 'headerSpacesPopover'
181
+ });
182
+ var spacesValues = [{
183
+ label: 'Sales team',
184
+ prepend: ___EmotionJSX(EuiAvatar, {
185
+ type: "space",
186
+ name: "Sales Team",
187
+ size: "s"
188
+ }),
189
+ checked: 'on'
190
+ }, {
191
+ label: 'Engineering',
192
+ prepend: ___EmotionJSX(EuiAvatar, {
193
+ type: "space",
194
+ name: "Engineering",
195
+ size: "s"
196
+ })
197
+ }];
198
+
199
+ var _useState3 = useState(spacesValues),
200
+ _useState4 = _slicedToArray(_useState3, 2),
201
+ spaces = _useState4[0],
202
+ setSpaces = _useState4[1];
203
+
204
+ var _useState5 = useState(spaces.filter(function (option) {
205
+ return option.checked;
206
+ })[0]),
207
+ _useState6 = _slicedToArray(_useState5, 2),
208
+ selectedSpace = _useState6[0],
209
+ setSelectedSpace = _useState6[1];
210
+
211
+ var _useState7 = useState(false),
212
+ _useState8 = _slicedToArray(_useState7, 2),
213
+ isOpen = _useState8[0],
214
+ setIsOpen = _useState8[1];
215
+
216
+ var isListExtended = function isListExtended() {
217
+ return spaces.length > 4 ? true : false;
218
+ };
219
+
220
+ var onMenuButtonClick = function onMenuButtonClick() {
221
+ setIsOpen(!isOpen);
222
+ };
223
+
224
+ var closePopover = function closePopover() {
225
+ setIsOpen(false);
226
+ };
227
+
228
+ var onChange = function onChange(options) {
229
+ setSpaces(options);
230
+ setSelectedSpace(options.filter(function (option) {
231
+ return option.checked;
232
+ })[0]);
233
+ setIsOpen(false);
234
+ };
235
+
236
+ var button = ___EmotionJSX(EuiHeaderSectionItemButton, {
237
+ "aria-controls": headerSpacesPopoverId,
238
+ "aria-expanded": isOpen,
239
+ "aria-haspopup": "true",
240
+ "aria-label": "Spaces menu",
241
+ onClick: onMenuButtonClick
242
+ }, selectedSpace.prepend);
243
+
244
+ return ___EmotionJSX(EuiPopover, {
245
+ id: headerSpacesPopoverId,
246
+ button: button,
247
+ isOpen: isOpen,
248
+ anchorPosition: "downLeft",
249
+ closePopover: closePopover,
250
+ panelPaddingSize: "none"
251
+ }, ___EmotionJSX(EuiSelectable, {
252
+ searchable: isListExtended(),
253
+ searchProps: {
254
+ placeholder: 'Find a space',
255
+ compressed: true
256
+ },
257
+ options: spaces,
258
+ singleSelection: "always",
259
+ style: {
260
+ width: 300
261
+ },
262
+ onChange: onChange,
263
+ listProps: {
264
+ rowHeight: 40,
265
+ showIcons: false
266
+ },
267
+ "data-test-subj": "cy-spaces-menu"
268
+ }, function (list, search) {
269
+ return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiPopoverTitle, {
270
+ paddingSize: "s"
271
+ }, search || 'Your spaces'), list);
272
+ }));
273
+ };
274
+
275
+ var HeaderAppMenu = function HeaderAppMenu() {
276
+ var headerAppPopoverId = useGeneratedHtmlId({
277
+ prefix: 'headerAppPopover'
278
+ });
279
+ var headerAppKeyPadMenuId = useGeneratedHtmlId({
280
+ prefix: 'headerAppKeyPadMenu'
281
+ });
282
+
283
+ var _useState9 = useState(false),
284
+ _useState10 = _slicedToArray(_useState9, 2),
285
+ isOpen = _useState10[0],
286
+ setIsOpen = _useState10[1];
287
+
288
+ var onMenuButtonClick = function onMenuButtonClick() {
289
+ setIsOpen(!isOpen);
290
+ };
291
+
292
+ var closeMenu = function closeMenu() {
293
+ setIsOpen(false);
294
+ };
295
+
296
+ var button = ___EmotionJSX(EuiHeaderSectionItemButton, {
297
+ "aria-controls": headerAppKeyPadMenuId,
298
+ "aria-expanded": isOpen,
299
+ "aria-haspopup": "true",
300
+ "aria-label": "Apps menu with 1 new app",
301
+ notification: "1",
302
+ onClick: onMenuButtonClick
303
+ }, ___EmotionJSX(EuiIcon, {
304
+ type: "apps",
305
+ size: "m"
306
+ }));
307
+
308
+ return ___EmotionJSX(EuiPopover, {
309
+ id: headerAppPopoverId,
310
+ button: button,
311
+ isOpen: isOpen,
312
+ anchorPosition: "downRight",
313
+ closePopover: closeMenu
314
+ }, ___EmotionJSX(EuiKeyPadMenu, {
315
+ id: headerAppKeyPadMenuId,
316
+ style: {
317
+ width: 288
318
+ },
319
+ "data-test-subj": "cy-apps-menu"
320
+ }, ___EmotionJSX(EuiKeyPadMenuItem, {
321
+ label: "Discover"
322
+ }, ___EmotionJSX(EuiIcon, {
323
+ type: "discoverApp",
324
+ size: "l"
325
+ })), ___EmotionJSX(EuiKeyPadMenuItem, {
326
+ label: "Dashboard"
327
+ }, ___EmotionJSX(EuiIcon, {
328
+ type: "dashboardApp",
329
+ size: "l"
330
+ })), ___EmotionJSX(EuiKeyPadMenuItem, {
331
+ label: "Dev Tools"
332
+ }, ___EmotionJSX(EuiIcon, {
333
+ type: "devToolsApp",
334
+ size: "l"
335
+ }))));
336
+ };
337
+
338
+ beforeEach(function () {
339
+ cy.viewport(1024, 768); // medium breakpoint
340
+
341
+ cy.realMount(___EmotionJSX(Header, null));
342
+ });
343
+ describe('EuiHeader', function () {
344
+ describe('Automated accessibility check', function () {
345
+ it('has zero violations on first render', function () {
346
+ cy.checkAxe();
347
+ });
348
+ it('has zero violations when Spaces menu is expanded', function () {
349
+ cy.get('button[aria-label="Spaces menu"]').realClick();
350
+ cy.get('div[data-test-subj="cy-spaces-menu"]').should('exist');
351
+ cy.checkAxe();
352
+ });
353
+ it('has zero violations when Account menu is expanded', function () {
354
+ cy.get('button[aria-label="Account menu"]').realClick();
355
+ cy.get('div[data-test-subj="cy-account-menu"]').should('exist');
356
+ cy.checkAxe();
357
+ });
358
+ it('has zero violations when Sitewide search is expanded', function () {
359
+ cy.get('button[aria-label="Sitewide search"]').realClick();
360
+ cy.get('div[data-test-subj="cy-search-menu"]').should('exist');
361
+ cy.checkAxe();
362
+ });
363
+ it('has zero violations when Apps menu is expanded', function () {
364
+ cy.get('button[aria-label="Apps menu with 1 new app"]').realClick();
365
+ cy.get('ul[data-test-subj="cy-apps-menu"]').should('exist');
366
+ cy.checkAxe();
367
+ });
368
+ it('has zero violations when a hidden breadcrumb is expanded', function () {
369
+ cy.get('button[aria-label="See collapsed breadcrumbs"]').realClick();
370
+ cy.get('a[data-test-subj="cy-breadcrumb-hidden"]').should('exist');
371
+ cy.checkAxe();
372
+ });
373
+ });
374
+ });
@@ -0,0 +1,33 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ /// <reference types="../../../cypress/support"/>
9
+ import React from 'react';
10
+ import { EuiIcon } from './icon';
11
+ import { jsx as ___EmotionJSX } from "@emotion/react";
12
+ describe('EuiIcons', function () {
13
+ describe('Automated accessibility check for ML icons', function () {
14
+ var MLIcons = ['dataVisualizer', 'createAdvancedJob', 'classificationJob', 'createMultiMetricJob', 'outlierDetectionJob', 'createPopulationJob', 'regressionJob', 'createSingleMetricJob'];
15
+
16
+ var MLGrid = function MLGrid() {
17
+ return ___EmotionJSX("div", null, MLIcons.map(function (glyph) {
18
+ return ___EmotionJSX(EuiIcon, {
19
+ className: "eui-alignMiddle",
20
+ type: glyph
21
+ });
22
+ }));
23
+ };
24
+
25
+ it('has zero violations on first render', function () {
26
+ cy.mount(___EmotionJSX(MLGrid, null));
27
+ cy.get('div[data-cy-root]').find('svg', {
28
+ timeout: 5000
29
+ }).should('have.length', 8);
30
+ cy.checkAxe();
31
+ });
32
+ });
33
+ });
@@ -0,0 +1,33 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ /// <reference types="../../../cypress/support"/>
9
+ import React from 'react';
10
+ import { EuiIcon } from './icon';
11
+ import { jsx as ___EmotionJSX } from "@emotion/react";
12
+ describe('EuiIcons', function () {
13
+ describe('Automated accessibility check for app icons', function () {
14
+ var AppIcons = ['addDataApp', 'advancedSettingsApp', 'agentApp', 'apmApp', 'appSearchApp', 'auditbeatApp', 'canvasApp', 'casesApp', 'codeApp', 'consoleApp', 'crossClusterReplicationApp', 'dashboardApp', 'devToolsApp', 'discoverApp', 'emsApp', 'filebeatApp', 'fleetApp', 'gisApp', 'graphApp', 'grokApp', 'heartbeatApp', 'indexManagementApp', 'indexPatternApp', 'indexRollupApp', 'lensApp', 'logsApp', 'machineLearningApp', 'managementApp', 'metricbeatApp', 'metricsApp', 'monitoringApp', 'notebookApp', 'packetbeatApp', 'pipelineApp', 'recentlyViewedApp', 'reportingApp', 'savedObjectsApp', 'searchProfilerApp', 'securityAnalyticsApp', 'securityApp', 'spacesApp', 'sqlApp', 'timelionApp', 'upgradeAssistantApp', 'uptimeApp', 'usersRolesApp', 'visualizeApp', 'watchesApp', 'workplaceSearchApp'];
15
+
16
+ var AppGrid = function AppGrid() {
17
+ return ___EmotionJSX("div", null, AppIcons.map(function (glyph) {
18
+ return ___EmotionJSX(EuiIcon, {
19
+ className: "eui-alignMiddle",
20
+ type: glyph
21
+ });
22
+ }));
23
+ };
24
+
25
+ it('has zero violations on first render', function () {
26
+ cy.mount(___EmotionJSX(AppGrid, null));
27
+ cy.get('div[data-cy-root]').find('svg', {
28
+ timeout: 5000
29
+ }).should('have.length', 49);
30
+ cy.checkAxe();
31
+ });
32
+ });
33
+ });
@@ -0,0 +1,33 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ /// <reference types="../../../cypress/support"/>
9
+ import React from 'react';
10
+ import { EuiIcon } from './icon';
11
+ import { jsx as ___EmotionJSX } from "@emotion/react";
12
+ describe('EuiIcons', function () {
13
+ describe('Automated accessibility check for editor icons', function () {
14
+ var EditorIcons = ['editorAlignCenter', 'editorAlignLeft', 'editorAlignRight', 'editorBold', 'editorChecklist', 'editorCodeBlock', 'editorComment', 'editorDistributeHorizontal', 'editorDistributeVertical', 'editorHeading', 'editorItalic', 'editorItemAlignBottom', 'editorItemAlignCenter', 'editorItemAlignLeft', 'editorItemAlignMiddle', 'editorItemAlignRight', 'editorItemAlignTop', 'editorLink', 'editorOrderedList', 'editorPositionBottomLeft', 'editorPositionBottomRight', 'editorPositionTopLeft', 'editorPositionTopRight', 'editorRedo', 'editorStrike', 'editorTable', 'editorUnderline', 'editorUndo', 'editorUnorderedList'];
15
+
16
+ var EditorGrid = function EditorGrid() {
17
+ return ___EmotionJSX("div", null, EditorIcons.map(function (glyph) {
18
+ return ___EmotionJSX(EuiIcon, {
19
+ className: "eui-alignMiddle",
20
+ type: glyph
21
+ });
22
+ }));
23
+ };
24
+
25
+ it('has zero violations on first render', function () {
26
+ cy.mount(___EmotionJSX(EditorGrid, null));
27
+ cy.get('div[data-cy-root]').find('svg', {
28
+ timeout: 5000
29
+ }).should('have.length', 29);
30
+ cy.checkAxe();
31
+ });
32
+ });
33
+ });
@@ -0,0 +1,33 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ /// <reference types="../../../cypress/support"/>
9
+ import React from 'react';
10
+ import { EuiIcon } from './icon';
11
+ import { jsx as ___EmotionJSX } from "@emotion/react";
12
+ describe('EuiIcons', function () {
13
+ describe('Automated accessibility check for Elastic logos', function () {
14
+ var ElasticLogos = ['logoElastic', 'logoElasticStack', 'logoElasticsearch', 'logoAppSearch', 'logoBeats', 'logoBusinessAnalytics', 'logoCloud', 'logoCloudEnterprise', 'logoEnterpriseSearch', 'logoKibana', 'logoLogging', 'logoLogstash', 'logoMaps', 'logoMetrics', 'logoObservability', 'logoSecurity', 'logoSiteSearch', 'logoUptime', 'logoWorkplaceSearch'];
15
+
16
+ var ElasticGrid = function ElasticGrid() {
17
+ return ___EmotionJSX("div", null, ElasticLogos.map(function (glyph) {
18
+ return ___EmotionJSX(EuiIcon, {
19
+ className: "eui-alignMiddle",
20
+ type: glyph
21
+ });
22
+ }));
23
+ };
24
+
25
+ it('has zero violations on first render', function () {
26
+ cy.mount(___EmotionJSX(ElasticGrid, null));
27
+ cy.get('div[data-cy-root]').find('svg', {
28
+ timeout: 5000
29
+ }).should('have.length', 19);
30
+ cy.checkAxe();
31
+ });
32
+ });
33
+ });
@@ -0,0 +1,33 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ /// <reference types="../../../cypress/support"/>
9
+ import React from 'react';
10
+ import { EuiIcon } from './icon';
11
+ import { jsx as ___EmotionJSX } from "@emotion/react";
12
+ describe('EuiIcons', function () {
13
+ describe('Automated accessibility check for glyph icons', function () {
14
+ var GlyphIcons = ['accessibility', 'aggregate', 'alert', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'crossInACircleFilled', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'wordWrap', 'wordWrapDisabled', 'wrench'];
15
+
16
+ var GlyphGrid = function GlyphGrid() {
17
+ return ___EmotionJSX("div", null, GlyphIcons.map(function (glyph) {
18
+ return ___EmotionJSX(EuiIcon, {
19
+ className: "eui-alignMiddle",
20
+ type: glyph
21
+ });
22
+ }));
23
+ };
24
+
25
+ it('has zero violations on first render', function () {
26
+ cy.mount(___EmotionJSX(GlyphGrid, null));
27
+ cy.get('svg[data-icon-type="wrench"]', {
28
+ timeout: 5000
29
+ }).should('exist');
30
+ cy.checkAxe();
31
+ });
32
+ });
33
+ });
@@ -0,0 +1,33 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ /// <reference types="../../../cypress/support"/>
9
+ import React from 'react';
10
+ import { EuiIcon } from './icon';
11
+ import { jsx as ___EmotionJSX } from "@emotion/react";
12
+ describe('EuiIcons', function () {
13
+ describe('Automated accessibility check for token icons', function () {
14
+ var TokenIcons = ['tokenAlias', 'tokenAnnotation', 'tokenArray', 'tokenBinary', 'tokenBoolean', 'tokenClass', 'tokenCompletionSuggester', 'tokenConstant', 'tokenDate', 'tokenDenseVector', 'tokenElement', 'tokenEnum', 'tokenEnumMember', 'tokenEvent', 'tokenException', 'tokenField', 'tokenFile', 'tokenFlattened', 'tokenFunction', 'tokenGeo', 'tokenHistogram', 'tokenInterface', 'tokenIP', 'tokenJoin', 'tokenKey', 'tokenKeyword', 'tokenMethod', 'tokenMetricCounter', 'tokenMetricGauge', 'tokenModule', 'tokenNamespace', 'tokenNested', 'tokenNull', 'tokenNumber', 'tokenObject', 'tokenOperator', 'tokenPackage', 'tokenParameter', 'tokenPercolator', 'tokenProperty', 'tokenRange', 'tokenRankFeature', 'tokenRankFeatures', 'tokenRepo', 'tokenSearchType', 'tokenShape', 'tokenString', 'tokenStruct', 'tokenSymbol', 'tokenTag', 'tokenText', 'tokenTokenCount', 'tokenVariable'];
15
+
16
+ var TokenGrid = function TokenGrid() {
17
+ return ___EmotionJSX("div", null, TokenIcons.map(function (glyph) {
18
+ return ___EmotionJSX(EuiIcon, {
19
+ className: "eui-alignMiddle",
20
+ type: glyph
21
+ });
22
+ }));
23
+ };
24
+
25
+ it('has zero violations on first render', function () {
26
+ cy.mount(___EmotionJSX(TokenGrid, null));
27
+ cy.get('div[data-cy-root]').find('svg', {
28
+ timeout: 5000
29
+ }).should('have.length', 53);
30
+ cy.checkAxe();
31
+ });
32
+ });
33
+ });
@@ -9,7 +9,7 @@
9
9
  // are exported for two versions of TypeScript (3.4, 4.0) and implicit
10
10
  // imports during eui.d.ts generation default to the incorrect version (3.4).
11
11
  // Explicit imports here resolve the version mismatch.
12
- import markdown from 'remark-parse';
12
+ import markdown from 'remark-parse-no-trim';
13
13
  import emoji from 'remark-emoji';
14
14
  import breaks from 'remark-breaks';
15
15
  import highlight from '../remark/remark_prismjs';
@@ -275,7 +275,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
275
275
  });
276
276
  });
277
277
 
278
- _defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event) {
278
+ _defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event, clickedOption) {
279
279
  var _this$props = _this.props,
280
280
  isPreFiltered = _this$props.isPreFiltered,
281
281
  onChange = _this$props.onChange;
@@ -287,7 +287,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
287
287
  });
288
288
 
289
289
  if (onChange) {
290
- onChange(options, event);
290
+ onChange(options, event, clickedOption);
291
291
  }
292
292
  });
293
293
 
@@ -723,7 +723,8 @@ EuiSelectable.propTypes = {
723
723
 
724
724
  /**
725
725
  * Passes back the altered `options` array with selected options having `checked: 'on'`.
726
- * Also passes back the React click/keyboard event as a second argument.
726
+ * Also passes back the React click/keyboard event as a second argument,
727
+ * and the option that triggered the onChange event as a third argument.
727
728
  */
728
729
  onChange: PropTypes.func,
729
730