@elastic/eui 92.1.0 → 92.2.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 (112) hide show
  1. package/es/components/bottom_bar/bottom_bar.js +6 -2
  2. package/es/components/button/button.js +55 -1
  3. package/es/components/button/button_display/_button_display.js +1 -0
  4. package/es/components/button/button_empty/button_empty.js +1 -1
  5. package/es/components/button/button_group/button_group.js +1 -1
  6. package/es/components/button/button_group/button_group_button.js +1 -1
  7. package/es/components/button/button_icon/button_icon.js +1 -1
  8. package/es/components/card/card.js +52 -1
  9. package/es/components/card/card_select/card_select.js +52 -1
  10. package/es/components/color_picker/index.js +0 -2
  11. package/es/components/comment_list/index.js +0 -1
  12. package/es/components/context_menu/context_menu_item.styles.js +1 -1
  13. package/es/components/datagrid/body/cell/data_grid_cell.js +94 -74
  14. package/es/components/datagrid/body/data_grid_body.js +6 -6
  15. package/es/components/datagrid/body/data_grid_body_custom.js +6 -6
  16. package/es/components/datagrid/body/data_grid_body_virtualized.js +6 -6
  17. package/es/components/datagrid/body/header/data_grid_header_cell.js +6 -6
  18. package/es/components/datagrid/body/header/data_grid_header_row.js +6 -6
  19. package/es/components/datagrid/controls/data_grid_toolbar_control.js +1 -1
  20. package/es/components/datagrid/utils/in_memory.js +6 -6
  21. package/es/components/facet/facet_button.js +1 -0
  22. package/es/components/flyout/flyout_resizable.js +23 -5
  23. package/es/components/form/text_area/text_area.js +7 -3
  24. package/es/components/header/header_links/header_link.js +1 -1
  25. package/es/components/header/header_section/header_section_item_button.js +1 -1
  26. package/es/components/list_group/list_group.js +1 -1
  27. package/es/components/list_group/list_group_item.js +1 -1
  28. package/es/components/list_group/list_group_item_extra_action.js +1 -1
  29. package/es/components/list_group/pinnable_list_group/pinnable_list_group.js +2 -2
  30. package/es/components/pagination/pagination_button.js +1 -1
  31. package/es/components/resizable_container/resizable_container.js +11 -5
  32. package/eui.d.ts +29 -19
  33. package/i18ntokens.json +66 -12
  34. package/lib/components/bottom_bar/bottom_bar.js +6 -2
  35. package/lib/components/button/button.js +58 -5
  36. package/lib/components/button/button_display/_button_display.js +1 -0
  37. package/lib/components/button/button_empty/button_empty.js +1 -1
  38. package/lib/components/button/button_group/button_group.js +1 -1
  39. package/lib/components/button/button_group/button_group_button.js +1 -1
  40. package/lib/components/button/button_icon/button_icon.js +1 -1
  41. package/lib/components/card/card.js +53 -2
  42. package/lib/components/card/card_select/card_select.js +53 -2
  43. package/lib/components/color_picker/index.js +0 -14
  44. package/lib/components/comment_list/index.js +0 -7
  45. package/lib/components/context_menu/context_menu_item.styles.js +1 -1
  46. package/lib/components/datagrid/body/cell/data_grid_cell.js +94 -74
  47. package/lib/components/datagrid/body/data_grid_body.js +6 -6
  48. package/lib/components/datagrid/body/data_grid_body_custom.js +6 -6
  49. package/lib/components/datagrid/body/data_grid_body_virtualized.js +6 -6
  50. package/lib/components/datagrid/body/header/data_grid_header_cell.js +6 -6
  51. package/lib/components/datagrid/body/header/data_grid_header_row.js +6 -6
  52. package/lib/components/datagrid/controls/data_grid_toolbar_control.js +1 -1
  53. package/lib/components/datagrid/utils/in_memory.js +6 -6
  54. package/lib/components/facet/facet_button.js +1 -0
  55. package/lib/components/flyout/flyout_resizable.js +23 -5
  56. package/lib/components/form/text_area/text_area.js +7 -3
  57. package/lib/components/header/header_links/header_link.js +1 -1
  58. package/lib/components/header/header_section/header_section_item_button.js +1 -1
  59. package/lib/components/list_group/list_group.js +1 -1
  60. package/lib/components/list_group/list_group_item.js +1 -1
  61. package/lib/components/list_group/list_group_item_extra_action.js +1 -1
  62. package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js +2 -2
  63. package/lib/components/pagination/pagination_button.js +1 -1
  64. package/lib/components/resizable_container/resizable_container.js +10 -4
  65. package/optimize/es/components/button/button.js +3 -0
  66. package/optimize/es/components/color_picker/index.js +0 -2
  67. package/optimize/es/components/comment_list/index.js +0 -1
  68. package/optimize/es/components/context_menu/context_menu_item.styles.js +1 -1
  69. package/optimize/es/components/datagrid/body/cell/data_grid_cell.js +82 -62
  70. package/optimize/es/components/flyout/flyout_resizable.js +23 -5
  71. package/optimize/es/components/form/text_area/text_area.js +7 -3
  72. package/optimize/es/components/resizable_container/resizable_container.js +11 -5
  73. package/optimize/lib/components/button/button.js +2 -0
  74. package/optimize/lib/components/color_picker/index.js +0 -14
  75. package/optimize/lib/components/comment_list/index.js +0 -7
  76. package/optimize/lib/components/context_menu/context_menu_item.styles.js +1 -1
  77. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js +82 -62
  78. package/optimize/lib/components/flyout/flyout_resizable.js +23 -5
  79. package/optimize/lib/components/form/text_area/text_area.js +7 -3
  80. package/optimize/lib/components/resizable_container/resizable_container.js +10 -4
  81. package/package.json +1 -1
  82. package/test-env/components/bottom_bar/bottom_bar.js +6 -2
  83. package/test-env/components/button/button.js +58 -5
  84. package/test-env/components/button/button_display/_button_display.js +1 -0
  85. package/test-env/components/button/button_empty/button_empty.js +1 -1
  86. package/test-env/components/button/button_group/button_group.js +1 -1
  87. package/test-env/components/button/button_group/button_group_button.js +1 -1
  88. package/test-env/components/button/button_icon/button_icon.js +1 -1
  89. package/test-env/components/card/card.js +53 -2
  90. package/test-env/components/card/card_select/card_select.js +53 -2
  91. package/test-env/components/color_picker/index.js +0 -14
  92. package/test-env/components/comment_list/index.js +0 -7
  93. package/test-env/components/context_menu/context_menu_item.styles.js +1 -1
  94. package/test-env/components/datagrid/body/cell/data_grid_cell.js +94 -74
  95. package/test-env/components/datagrid/body/data_grid_body.js +6 -6
  96. package/test-env/components/datagrid/body/data_grid_body_custom.js +6 -6
  97. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +6 -6
  98. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +6 -6
  99. package/test-env/components/datagrid/body/header/data_grid_header_row.js +6 -6
  100. package/test-env/components/datagrid/controls/data_grid_toolbar_control.js +1 -1
  101. package/test-env/components/datagrid/utils/in_memory.js +6 -6
  102. package/test-env/components/facet/facet_button.js +1 -0
  103. package/test-env/components/flyout/flyout_resizable.js +23 -5
  104. package/test-env/components/form/text_area/text_area.js +7 -3
  105. package/test-env/components/header/header_links/header_link.js +1 -1
  106. package/test-env/components/header/header_section/header_section_item_button.js +1 -1
  107. package/test-env/components/list_group/list_group.js +1 -1
  108. package/test-env/components/list_group/list_group_item.js +1 -1
  109. package/test-env/components/list_group/list_group_item_extra_action.js +1 -1
  110. package/test-env/components/list_group/pinnable_list_group/pinnable_list_group.js +2 -2
  111. package/test-env/components/pagination/pagination_button.js +1 -1
  112. package/test-env/components/resizable_container/resizable_container.js +10 -4
@@ -23,6 +23,8 @@ var _excluded = ["className", "buttonRef", "size", "color", "fill"];
23
23
  var COLORS = _button.BUTTON_COLORS;
24
24
  exports.COLORS = COLORS;
25
25
  var SIZES = ['s', 'm'];
26
+
27
+ // For some reason, Storybook doesn't parse `EuiButtonDisplayCommonProps` unless we include it here
26
28
  exports.SIZES = SIZES;
27
29
  /**
28
30
  * EuiButton is largely responsible for providing relevant props
@@ -27,21 +27,7 @@ Object.defineProperty(exports, "EuiColorPickerSwatch", {
27
27
  return _color_picker_swatch.EuiColorPickerSwatch;
28
28
  }
29
29
  });
30
- Object.defineProperty(exports, "EuiHue", {
31
- enumerable: true,
32
- get: function get() {
33
- return _hue.EuiHue;
34
- }
35
- });
36
- Object.defineProperty(exports, "EuiSaturation", {
37
- enumerable: true,
38
- get: function get() {
39
- return _saturation.EuiSaturation;
40
- }
41
- });
42
30
  var _color_picker = require("./color_picker");
43
31
  var _color_picker_swatch = require("./color_picker_swatch");
44
- var _hue = require("./hue");
45
- var _saturation = require("./saturation");
46
32
  var _color_palette_picker = require("./color_palette_picker");
47
33
  var _color_palette_display = require("./color_palette_display");
@@ -21,13 +21,6 @@ Object.defineProperty(exports, "EuiCommentList", {
21
21
  return _comment_list.EuiCommentList;
22
22
  }
23
23
  });
24
- Object.defineProperty(exports, "EuiCommentTimeline", {
25
- enumerable: true,
26
- get: function get() {
27
- return _comment_timeline.EuiCommentTimeline;
28
- }
29
- });
30
24
  var _comment = require("./comment");
31
25
  var _comment_event = require("./comment_event");
32
- var _comment_timeline = require("./comment_timeline");
33
26
  var _comment_list = require("./comment_list");
@@ -64,7 +64,7 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
64
64
  var euiContextMenuItemStyles = function euiContextMenuItemStyles(euiThemeContext) {
65
65
  var euiTheme = euiThemeContext.euiTheme;
66
66
  return {
67
- euiContextMenuItem: /*#__PURE__*/(0, _react.css)("display:flex;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.text, ";outline-offset:-", euiTheme.focus.width, ";&:not(:disabled){&:hover,&:focus{text-decoration:underline;}&:focus{background-color:", euiTheme.focus.backgroundColor, ";}};label:euiContextMenuItem;"),
67
+ euiContextMenuItem: /*#__PURE__*/(0, _react.css)("display:flex;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.text, ";outline-offset:-", euiTheme.focus.width, ";&:where(a, button):not(:disabled){&:hover,&:focus{text-decoration:underline;}&:focus{background-color:", euiTheme.focus.backgroundColor, ";}};label:euiContextMenuItem;"),
68
68
  disabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";cursor:default;;label:disabled;"),
69
69
  layoutAlign: {
70
70
  center: _ref6,
@@ -117,6 +117,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
117
117
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
118
118
  cellProps: {},
119
119
  isFocused: false,
120
+ isHovered: false,
120
121
  cellTextAlign: 'Left'
121
122
  });
122
123
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribeCell", void 0);
@@ -285,14 +286,59 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
285
286
  setPopoverContent(popoverContent);
286
287
  }
287
288
  });
289
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellKeyDown", function (event) {
290
+ if (_this.isExpandable()) {
291
+ if (_this.isPopoverOpen()) return;
292
+ var _this$props6 = _this.props,
293
+ openCellPopover = _this$props6.popoverContext.openCellPopover,
294
+ visibleRowIndex = _this$props6.visibleRowIndex,
295
+ colIndex = _this$props6.colIndex;
296
+ switch (event.key) {
297
+ case _services.keys.ENTER:
298
+ case _services.keys.F2:
299
+ event.preventDefault();
300
+ openCellPopover({
301
+ rowIndex: visibleRowIndex,
302
+ colIndex: colIndex
303
+ });
304
+ break;
305
+ }
306
+ }
307
+ });
308
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCellExpansionClick", function () {
309
+ var _this$props7 = _this.props,
310
+ _this$props7$popoverC = _this$props7.popoverContext,
311
+ openCellPopover = _this$props7$popoverC.openCellPopover,
312
+ closeCellPopover = _this$props7$popoverC.closeCellPopover,
313
+ visibleRowIndex = _this$props7.visibleRowIndex,
314
+ colIndex = _this$props7.colIndex;
315
+ if (_this.isPopoverOpen()) {
316
+ closeCellPopover();
317
+ } else {
318
+ openCellPopover({
319
+ rowIndex: visibleRowIndex,
320
+ colIndex: colIndex
321
+ });
322
+ }
323
+ });
324
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
325
+ return _this.setState({
326
+ isHovered: true
327
+ });
328
+ });
329
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
330
+ return _this.setState({
331
+ isHovered: false
332
+ });
333
+ });
288
334
  return _this;
289
335
  }
290
336
  (0, _createClass2.default)(EuiDataGridCell, [{
291
337
  key: "componentDidMount",
292
338
  value: function componentDidMount() {
293
- var _this$props6 = this.props,
294
- colIndex = _this$props6.colIndex,
295
- visibleRowIndex = _this$props6.visibleRowIndex;
339
+ var _this$props8 = this.props,
340
+ colIndex = _this$props8.colIndex,
341
+ visibleRowIndex = _this$props8.visibleRowIndex;
296
342
  this.unsubscribeCell = this.context.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
297
343
 
298
344
  // Account for virtualization - when a cell unmounts when scrolled out of view
@@ -378,32 +424,32 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
378
424
  }
379
425
  if (nextState.cellProps !== this.state.cellProps) return true;
380
426
  if (nextState.isFocused !== this.state.isFocused) return true;
427
+ if (nextState.isHovered !== this.state.isHovered) return true;
381
428
  return false;
382
429
  }
383
430
  }, {
384
431
  key: "render",
385
432
  value: function render() {
386
433
  var _classNames, _rowHeightsOptions$li;
387
- var _this$props7 = this.props,
388
- width = _this$props7.width,
389
- _this$props7$popoverC = _this$props7.popoverContext,
390
- closeCellPopover = _this$props7$popoverC.closeCellPopover,
391
- openCellPopover = _this$props7$popoverC.openCellPopover,
392
- interactiveCellId = _this$props7.interactiveCellId,
393
- columnType = _this$props7.columnType,
394
- className = _this$props7.className,
395
- column = _this$props7.column,
396
- style = _this$props7.style,
397
- rowHeightUtils = _this$props7.rowHeightUtils,
398
- rowHeightsOptions = _this$props7.rowHeightsOptions,
399
- rowManager = _this$props7.rowManager,
400
- pagination = _this$props7.pagination,
401
- rest = (0, _objectWithoutProperties2.default)(_this$props7, _excluded2);
434
+ var _this$props9 = this.props,
435
+ width = _this$props9.width,
436
+ popoverContext = _this$props9.popoverContext,
437
+ interactiveCellId = _this$props9.interactiveCellId,
438
+ columnType = _this$props9.columnType,
439
+ className = _this$props9.className,
440
+ column = _this$props9.column,
441
+ style = _this$props9.style,
442
+ rowHeightUtils = _this$props9.rowHeightUtils,
443
+ rowHeightsOptions = _this$props9.rowHeightsOptions,
444
+ rowManager = _this$props9.rowManager,
445
+ pagination = _this$props9.pagination,
446
+ rest = (0, _objectWithoutProperties2.default)(_this$props9, _excluded2);
402
447
  var rowIndex = rest.rowIndex,
403
448
  visibleRowIndex = rest.visibleRowIndex,
404
449
  colIndex = rest.colIndex;
405
450
  var isExpandable = this.isExpandable();
406
451
  var popoverIsOpen = this.isPopoverOpen();
452
+ var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
407
453
  var cellClasses = (0, _classnames.default)('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
408
454
  var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
409
455
  var _this$state$cellProps2 = this.state.cellProps,
@@ -424,23 +470,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
424
470
  // column width, can be undefined
425
471
  lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
426
472
  }, cellPropsStyle);
427
- var handleCellKeyDown = function handleCellKeyDown(event) {
428
- if (isExpandable) {
429
- if (popoverIsOpen) {
430
- return;
431
- }
432
- switch (event.key) {
433
- case _services.keys.ENTER:
434
- case _services.keys.F2:
435
- event.preventDefault();
436
- openCellPopover({
437
- rowIndex: visibleRowIndex,
438
- colIndex: colIndex
439
- });
440
- break;
441
- }
442
- }
443
- };
444
473
  var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
445
474
  var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
446
475
  setCellProps: this.setCellProps,
@@ -456,31 +485,6 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
456
485
  isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
457
486
  ariaRowIndex: ariaRowIndex
458
487
  });
459
- var cellActions = isExpandable ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
460
- rowIndex: rowIndex,
461
- colIndex: colIndex,
462
- column: column,
463
- onExpandClick: function onExpandClick() {
464
- if (popoverIsOpen) {
465
- closeCellPopover();
466
- } else {
467
- openCellPopover({
468
- rowIndex: visibleRowIndex,
469
- colIndex: colIndex
470
- });
471
- }
472
- }
473
- }), (0, _react2.jsx)("div", {
474
- ref: this.popoverAnchorRef,
475
- "data-test-subject": "cellPopoverAnchor"
476
- })) : undefined;
477
- var cellContent = (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
478
- cellEl: this.cellRef.current,
479
- updateCellFocusContext: this.updateCellFocusContext,
480
- renderFocusTrap: !isExpandable
481
- }, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
482
- cellActions: cellActions
483
- })));
484
488
  var cell = (0, _react2.jsx)("div", (0, _extends2.default)({
485
489
  role: "gridcell",
486
490
  "aria-rowindex": ariaRowIndex,
@@ -498,8 +502,24 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
498
502
  ,
499
503
  "data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
500
504
  ,
501
- onKeyDown: handleCellKeyDown
502
- }), cellContent);
505
+ onKeyDown: this.handleCellKeyDown,
506
+ onMouseEnter: this.onMouseEnter,
507
+ onMouseLeave: this.onMouseLeave
508
+ }), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
509
+ cellEl: this.cellRef.current,
510
+ updateCellFocusContext: this.updateCellFocusContext,
511
+ renderFocusTrap: !isExpandable
512
+ }, (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
513
+ cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
514
+ rowIndex: rowIndex,
515
+ colIndex: colIndex,
516
+ column: column,
517
+ onExpandClick: this.handleCellExpansionClick
518
+ }), (0, _react2.jsx)("div", {
519
+ ref: this.popoverAnchorRef,
520
+ "data-test-subject": "cellPopoverAnchor"
521
+ }))
522
+ }))));
503
523
  return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
504
524
  rowIndex: rowIndex,
505
525
  visibleRowIndex: visibleRowIndex,
@@ -16,7 +16,7 @@ var _helpers = require("../resizable_container/helpers");
16
16
  var _flyout = require("./flyout");
17
17
  var _flyout_resizable = require("./flyout_resizable.styles");
18
18
  var _react2 = require("@emotion/react");
19
- var _excluded = ["size", "maxWidth", "minWidth", "side", "type", "children"];
19
+ var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "children"];
20
20
  /*
21
21
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
22
22
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,6 +31,7 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
31
31
  maxWidth = _ref.maxWidth,
32
32
  _ref$minWidth = _ref.minWidth,
33
33
  minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
34
+ onResize = _ref.onResize,
34
35
  _ref$side = _ref.side,
35
36
  side = _ref$side === void 0 ? 'right' : _ref$side,
36
37
  _ref$type = _ref.type,
@@ -48,14 +49,19 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
48
49
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
49
50
  flyoutWidth = _useState2[0],
50
51
  setFlyoutWidth = _useState2[1];
52
+ var _useState3 = (0, _react.useState)(false),
53
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
54
+ callOnResize = _useState4[0],
55
+ setCallOnResize = _useState4[1];
51
56
 
52
57
  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
53
- var _useState3 = (0, _react.useState)(null),
54
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
55
- flyoutRef = _useState4[0],
56
- setFlyoutRef = _useState4[1];
58
+ var _useState5 = (0, _react.useState)(null),
59
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
60
+ flyoutRef = _useState6[0],
61
+ setFlyoutRef = _useState6[1];
57
62
  var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
58
63
  (0, _react.useEffect)(function () {
64
+ setCallOnResize(false); // Don't call `onResize` for non-user width changes
59
65
  setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
60
66
  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
61
67
 
@@ -78,6 +84,7 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
78
84
  setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
79
85
  }, [getFlyoutMinMaxWidth, direction]);
80
86
  var onMouseUp = (0, _react.useCallback)(function () {
87
+ setCallOnResize(true);
81
88
  initialMouseX.current = 0;
82
89
  window.removeEventListener('mousemove', onMouseMove);
83
90
  window.removeEventListener('mouseup', onMouseUp);
@@ -86,6 +93,7 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
86
93
  }, [onMouseMove]);
87
94
  var onMouseDown = (0, _react.useCallback)(function (e) {
88
95
  var _flyoutRef$offsetWidt;
96
+ setCallOnResize(false);
89
97
  initialMouseX.current = (0, _helpers.getPosition)(e, true);
90
98
  initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
91
99
 
@@ -97,6 +105,7 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
97
105
  window.addEventListener('touchend', onMouseUp);
98
106
  }, [flyoutRef, onMouseMove, onMouseUp]);
99
107
  var onKeyDown = (0, _react.useCallback)(function (e) {
108
+ setCallOnResize(true);
100
109
  var KEYBOARD_OFFSET = 10;
101
110
  switch (e.key) {
102
111
  case _services.keys.ARROW_RIGHT:
@@ -112,6 +121,15 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
112
121
  });
113
122
  }
114
123
  }, [getFlyoutMinMaxWidth, direction]);
124
+
125
+ // To reduce unnecessary calls, only fire onResize callback:
126
+ // 1. After initial mount / on user width change events only
127
+ // 2. If not currently mouse dragging
128
+ (0, _react.useEffect)(function () {
129
+ if (callOnResize) {
130
+ onResize === null || onResize === void 0 ? void 0 : onResize(flyoutWidth);
131
+ }
132
+ }, [onResize, callOnResize, flyoutWidth]);
115
133
  return (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({}, rest, {
116
134
  size: flyoutWidth || size,
117
135
  maxWidth: maxWidth,
@@ -72,16 +72,20 @@ var EuiTextArea = function EuiTextArea(props) {
72
72
  return {
73
73
  onClick: function onClick() {
74
74
  if (ref.current) {
75
- ref.current.value = '';
75
+ // Updates the displayed value and fires `onChange` callbacks
76
+ // @see https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
77
+ var nativeValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
78
+ nativeValueSetter.call(ref.current, '');
76
79
  var event = new Event('input', {
77
80
  bubbles: true,
78
81
  cancelable: false
79
82
  });
80
83
  ref.current.dispatchEvent(event);
81
- ref.current.focus(); // set focus back to the textarea
84
+
85
+ // Set focus back to the textarea
86
+ ref.current.focus();
82
87
  }
83
88
  },
84
-
85
89
  'data-test-subj': 'clearTextAreaButton'
86
90
  };
87
91
  }
@@ -51,6 +51,10 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
51
51
  onResizeStart = _ref.onResizeStart,
52
52
  onResizeEnd = _ref.onResizeEnd,
53
53
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
54
+ // Note: It's important to memoize consumer callbacks to prevent our own functions
55
+ // from reinstantiating unnecessarily & causing window event listeners to call stale closures
56
+ var onResizeEndRef = (0, _services.useLatest)(onResizeEnd);
57
+ var onResizeStartRef = (0, _services.useLatest)(onResizeStart);
54
58
  var containerRef = (0, _react.useRef)(null);
55
59
  var isHorizontal = direction === 'horizontal';
56
60
  var classes = (0, _classnames.default)('euiResizableContainer', className);
@@ -77,10 +81,12 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
77
81
  }, [initialize, containerSize]);
78
82
  var resizeContext = (0, _react.useRef)({});
79
83
  var resizeEnd = (0, _react.useCallback)(function () {
80
- onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
84
+ var _onResizeEndRef$curre;
85
+ (_onResizeEndRef$curre = onResizeEndRef.current) === null || _onResizeEndRef$curre === void 0 ? void 0 : _onResizeEndRef$curre.call(onResizeEndRef);
81
86
  resizeContext.current = {};
82
- }, [onResizeEnd]);
87
+ }, [onResizeEndRef]);
83
88
  var resizeStart = (0, _react.useCallback)(function (trigger, keyMoveDirection) {
89
+ var _onResizeStartRef$cur;
84
90
  // If another resize starts while the previous one is still in progress
85
91
  // (e.g. user presses opposite arrow to change direction while the first
86
92
  // is still held down, or user presses an arrow while dragging with the
@@ -88,12 +94,12 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
88
94
  if (resizeContext.current.trigger) {
89
95
  resizeEnd();
90
96
  }
91
- onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(trigger);
97
+ (_onResizeStartRef$cur = onResizeStartRef.current) === null || _onResizeStartRef$cur === void 0 ? void 0 : _onResizeStartRef$cur.call(onResizeStartRef, trigger);
92
98
  resizeContext.current = {
93
99
  trigger: trigger,
94
100
  keyMoveDirection: keyMoveDirection
95
101
  };
96
- }, [onResizeStart, resizeEnd]);
102
+ }, [onResizeStartRef, resizeEnd]);
97
103
  var onMouseDown = (0, _react.useCallback)(function (event) {
98
104
  var currentTarget = event.currentTarget;
99
105
  var prevPanel = currentTarget.previousElementSibling;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "92.1.0",
4
+ "version": "92.2.0",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -179,7 +179,9 @@ _EuiBottomBar.propTypes = {
179
179
  */
180
180
  bodyClassName: _propTypes.default.string,
181
181
  /**
182
- * Customize the screen reader heading that helps users find this control. Default is 'Page level controls'.
182
+ * Customize the screen reader heading that helps users find this control.
183
+ *
184
+ * @default Page level controls
183
185
  */
184
186
  landmarkHeading: _propTypes.default.string,
185
187
  /**
@@ -252,7 +254,9 @@ EuiBottomBar.propTypes = {
252
254
  */
253
255
  bodyClassName: _propTypes.default.string,
254
256
  /**
255
- * Customize the screen reader heading that helps users find this control. Default is 'Page level controls'.
257
+ * Customize the screen reader heading that helps users find this control.
258
+ *
259
+ * @default Page level controls
256
260
  */
257
261
  landmarkHeading: _propTypes.default.string,
258
262
  /**
@@ -24,6 +24,8 @@ var _excluded = ["className", "buttonRef", "size", "color", "fill"];
24
24
  var COLORS = _button.BUTTON_COLORS;
25
25
  exports.COLORS = COLORS;
26
26
  var SIZES = ['s', 'm'];
27
+
28
+ // For some reason, Storybook doesn't parse `EuiButtonDisplayCommonProps` unless we include it here
27
29
  exports.SIZES = SIZES;
28
30
  /**
29
31
  * EuiButton is largely responsible for providing relevant props
@@ -86,9 +88,60 @@ EuiButton.propTypes = {
86
88
  * `disabled` is also allowed
87
89
  */
88
90
  isDisabled: _propTypes.default.bool,
89
- className: _propTypes.default.string,
90
- "aria-label": _propTypes.default.string,
91
- "data-test-subj": _propTypes.default.string,
92
- css: _propTypes.default.any,
93
- buttonRef: _propTypes.default.any
91
+ className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])]),
92
+ "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])]),
93
+ "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])]),
94
+ css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any])]),
95
+ buttonRef: _propTypes.default.any,
96
+ element: _propTypes.default.oneOf(["a", "button", "span"]),
97
+ /**
98
+ * Applies the boolean state as the `aria-pressed` property to create a toggle button.
99
+ * *Only use when the readable text does not change between states.*
100
+ */
101
+ isSelected: _propTypes.default.bool,
102
+ /**
103
+ * Extends the button to 100% width
104
+ */
105
+ fullWidth: _propTypes.default.bool,
106
+ /**
107
+ * Override the default minimum width
108
+ */
109
+ minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
110
+ /**
111
+ * Force disables the button and changes the icon to a loading spinner
112
+ */
113
+ isLoading: _propTypes.default.bool,
114
+ /**
115
+ * Object of props passed to the <span/> wrapping the button's content
116
+ */
117
+ contentProps: _propTypes.default.shape({
118
+ className: _propTypes.default.string,
119
+ "aria-label": _propTypes.default.string,
120
+ "data-test-subj": _propTypes.default.string,
121
+ css: _propTypes.default.any
122
+ }),
123
+ style: _propTypes.default.any,
124
+ type: _propTypes.default.any,
125
+ /**
126
+ * Any `type` accepted by EuiIcon
127
+ */
128
+ iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "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", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "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", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
129
+ /**
130
+ * Can only be one side `left` or `right`
131
+ */
132
+ iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
133
+ /**
134
+ * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
135
+ *
136
+ * This span wrapper can be removed by passing `textProps={false}`.
137
+ */
138
+ textProps: _propTypes.default.oneOfType([_propTypes.default.shape({
139
+ className: _propTypes.default.string,
140
+ "aria-label": _propTypes.default.string,
141
+ "data-test-subj": _propTypes.default.string,
142
+ css: _propTypes.default.any,
143
+ ref: _propTypes.default.any,
144
+ "data-text": _propTypes.default.string
145
+ }).isRequired, _propTypes.default.oneOf([false])]),
146
+ iconSize: _propTypes.default.any
94
147
  };
@@ -169,6 +169,7 @@ EuiButtonDisplay.propTypes = {
169
169
  css: _propTypes.default.any
170
170
  }),
171
171
  style: _propTypes.default.any,
172
+ type: _propTypes.default.any,
172
173
  /**
173
174
  * Any `type` accepted by EuiIcon
174
175
  */
@@ -156,7 +156,7 @@ EuiButtonEmpty.propTypes = {
156
156
  isSelected: _propTypes.default.bool,
157
157
  target: _propTypes.default.string,
158
158
  rel: _propTypes.default.string,
159
- type: _propTypes.default.oneOf(["button", "submit"]),
159
+ type: _propTypes.default.any,
160
160
  buttonRef: _propTypes.default.any,
161
161
  /**
162
162
  * Object of props passed to the `<span>` wrapping the button's content
@@ -140,7 +140,7 @@ EuiButtonGroup.propTypes = {
140
140
  /**
141
141
  * The type of the underlying HTML button
142
142
  */
143
- type: _propTypes.default.oneOf(["button", "submit", "reset"]),
143
+ type: _propTypes.default.any,
144
144
  /**
145
145
  * Any `type` accepted by EuiIcon
146
146
  */
@@ -100,7 +100,7 @@ EuiButtonGroupButton.propTypes = {
100
100
  /**
101
101
  * The type of the underlying HTML button
102
102
  */
103
- type: _propTypes.default.oneOf(["button", "submit", "reset"]),
103
+ type: _propTypes.default.any,
104
104
  /**
105
105
  * Any `type` accepted by EuiIcon
106
106
  */
@@ -134,7 +134,7 @@ var EuiButtonIcon = function EuiButtonIcon(_ref) {
134
134
  };
135
135
  exports.EuiButtonIcon = EuiButtonIcon;
136
136
  EuiButtonIcon.propTypes = {
137
- type: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf(["submit", "reset", "button"])]),
137
+ type: _propTypes.default.any,
138
138
  href: _propTypes.default.string,
139
139
  onClick: _propTypes.default.func,
140
140
  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "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", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "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", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,