@elastic/eui 72.2.0 → 74.0.0

package/es/components/basic_table/basic_table.js

@@ -57,7 +57,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { Component, Fragment } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { formatAuto, formatBoolean, formatDate, formatNumber, formatText, LEFT_ALIGNMENT, RIGHT_ALIGNMENT, SortDirection } from '../../services';
+import { formatAuto, formatBoolean, formatDate, formatNumber, formatText, LEFT_ALIGNMENT, RIGHT_ALIGNMENT, SortDirection, RenderWithEuiTheme } from '../../services';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -71,6 +71,7 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
 import { htmlIdGenerator } from '../../services/accessibility';
+import { euiBasicTableBodyLoading, safariLoadingWorkaround, euiBasicTableActionsWrapper } from './basic_table.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var dataTypesProfiles = {
   auto: {
@@ -176,45 +177,6 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "cleanups", []);
-
-    _defineProperty(_assertThisInitialized(_this), "tbody", null);
-
-    _defineProperty(_assertThisInitialized(_this), "setTbody", function (tbody) {
-      // remove listeners from an existing element
-      _this.removeLoadingListeners(); // update the ref
-
-
-      _this.tbody = tbody; // if loading, add listeners
-
-      if (_this.props.loading === true && tbody) {
-        _this.addLoadingListeners(tbody);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "addLoadingListeners", function (tbody) {
-      var listener = function listener(event) {
-        event.stopPropagation();
-        event.preventDefault();
-      };
-
-      ['mousedown', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'keydown', 'keyup', 'keypress'].forEach(function (event) {
-        tbody.addEventListener(event, listener, true);
-
-        _this.cleanups.push(function () {
-          tbody.removeEventListener(event, listener, true);
-        });
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "removeLoadingListeners", function () {
-      _this.cleanups.forEach(function (cleanup) {
-        return cleanup();
-      });
-
-      _this.cleanups.length = 0;
-    });
-
     _defineProperty(_assertThisInitialized(_this), "tableId", htmlIdGenerator('__table')());
 
     _defineProperty(_assertThisInitialized(_this), "selectAllIdGenerator", htmlIdGenerator('_selection_column-checkbox'));
@@ -306,27 +268,13 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
   _createClass(EuiBasicTable, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.loading && this.tbody) this.addLoadingListeners(this.tbody);
       this.getInitialSelection();
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.loading !== this.props.loading) {
-        if (this.props.loading && this.tbody) {
-          this.addLoadingListeners(this.tbody);
-        } else {
-          this.removeLoadingListeners();
-        }
-      }
-
+    value: function componentDidUpdate() {
       this.getInitialSelection();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeLoadingListeners();
-    }
   }, {
     key: "getInitialSelection",
     value: function getInitialSelection() {
@@ -487,7 +435,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           compressed = _this$props3.compressed,
           responsive = _this$props3.responsive,
-          tableLayout = _this$props3.tableLayout;
+          tableLayout = _this$props3.tableLayout,
+          loading = _this$props3.loading;
       var mobileHeader = responsive ? ___EmotionJSX(EuiTableHeaderMobile, null, ___EmotionJSX(EuiFlexGroup, {
         responsive: false,
         justifyContent: "spaceBetween",
@@ -505,7 +454,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         id: this.tableId,
         tableLayout: tableLayout,
         responsive: responsive,
-        compressed: compressed
+        compressed: compressed,
+        css: loading && safariLoadingWorkaround
       }, caption, head, body, footer));
     }
   }, {
@@ -768,30 +718,35 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderTableBody() {
       var _this4 = this;
 
-      if (this.props.error) {
-        return this.renderErrorBody(this.props.error);
-      }
-
-      var items = this.props.items;
-
-      if (items.length === 0) {
-        return this.renderEmptyBody();
+      var _this$props8 = this.props,
+          error = _this$props8.error,
+          loading = _this$props8.loading,
+          items = _this$props8.items;
+      var content;
+
+      if (error) {
+        content = this.renderErrorMessage(error);
+      } else if (items.length === 0) {
+        content = this.renderEmptyMessage();
+      } else {
+        content = items.map(function (item, index) {
+          // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
+          var tableItemIndex = hasPagination(_this4.props) && _this4.props.pagination.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.props.pagination.pageSize + index : index;
+          return _this4.renderItemRow(item, tableItemIndex);
+        });
       }
 
-      var rows = items.map(function (item, index) {
-        // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
-        var tableItemIndex = hasPagination(_this4.props) && _this4.props.pagination.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.props.pagination.pageSize + index : index;
-        return _this4.renderItemRow(item, tableItemIndex);
+      return ___EmotionJSX(RenderWithEuiTheme, null, function (theme) {
+        return ___EmotionJSX(EuiTableBody, {
+          css: loading && euiBasicTableBodyLoading(theme)
+        }, content);
       });
-      return ___EmotionJSX(EuiTableBody, {
-        bodyRef: this.setTbody
-      }, rows);
     }
   }, {
-    key: "renderErrorBody",
-    value: function renderErrorBody(error) {
+    key: "renderErrorMessage",
+    value: function renderErrorMessage(error) {
       var colSpan = this.props.columns.length + (this.props.selection ? 1 : 0);
-      return ___EmotionJSX(EuiTableBody, null, ___EmotionJSX(EuiTableRow, null, ___EmotionJSX(EuiTableRowCell, {
+      return ___EmotionJSX(EuiTableRow, null, ___EmotionJSX(EuiTableRowCell, {
         align: "center",
         colSpan: colSpan,
         mobileOptions: {
@@ -800,38 +755,38 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       }, ___EmotionJSX(EuiIcon, {
         type: "minusInCircle",
         color: "danger"
-      }), " ", error)));
+      }), " ", error));
     }
   }, {
-    key: "renderEmptyBody",
-    value: function renderEmptyBody() {
-      var _this$props8 = this.props,
-          columns = _this$props8.columns,
-          selection = _this$props8.selection,
-          noItemsMessage = _this$props8.noItemsMessage;
+    key: "renderEmptyMessage",
+    value: function renderEmptyMessage() {
+      var _this$props9 = this.props,
+          columns = _this$props9.columns,
+          selection = _this$props9.selection,
+          noItemsMessage = _this$props9.noItemsMessage;
       var colSpan = columns.length + (selection ? 1 : 0);
-      return ___EmotionJSX(EuiTableBody, null, ___EmotionJSX(EuiTableRow, null, ___EmotionJSX(EuiTableRowCell, {
+      return ___EmotionJSX(EuiTableRow, null, ___EmotionJSX(EuiTableRowCell, {
         align: "center",
         colSpan: colSpan,
         mobileOptions: {
           width: '100%'
         }
-      }, noItemsMessage)));
+      }, noItemsMessage));
     }
   }, {
     key: "renderItemRow",
     value: function renderItemRow(item, rowIndex) {
       var _this5 = this;
 
-      var _this$props9 = this.props,
-          columns = _this$props9.columns,
-          selection = _this$props9.selection,
-          isSelectable = _this$props9.isSelectable,
-          hasActions = _this$props9.hasActions,
-          rowHeader = _this$props9.rowHeader,
-          _this$props9$itemIdTo = _this$props9.itemIdToExpandedRowMap,
-          itemIdToExpandedRowMap = _this$props9$itemIdTo === void 0 ? {} : _this$props9$itemIdTo,
-          isExpandable = _this$props9.isExpandable;
+      var _this$props10 = this.props,
+          columns = _this$props10.columns,
+          selection = _this$props10.selection,
+          isSelectable = _this$props10.isSelectable,
+          hasActions = _this$props10.hasActions,
+          rowHeader = _this$props10.rowHeader,
+          _this$props10$itemIdT = _this$props10.itemIdToExpandedRowMap,
+          itemIdToExpandedRowMap = _this$props10$itemIdT === void 0 ? {} : _this$props10$itemIdT,
+          isExpandable = _this$props10.isExpandable;
       var cells = [];
       var itemIdCallback = this.props.itemId;
       var itemId = getItemId(item, itemIdCallback) != null ? getItemId(item, itemIdCallback) : rowIndex;
@@ -986,7 +941,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: true
+        hasActions: true,
+        css: euiBasicTableActionsWrapper
       }, tools);
     }
   }, {
@@ -1071,11 +1027,11 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderPaginationBar() {
       var _this8 = this;
 
-      var _this$props10 = this.props,
-          error = _this$props10.error,
-          pagination = _this$props10.pagination,
-          tableCaption = _this$props10.tableCaption,
-          onChange = _this$props10.onChange;
+      var _this$props11 = this.props,
+          error = _this$props11.error,
+          pagination = _this$props11.pagination,
+          tableCaption = _this$props11.tableCaption,
+          onChange = _this$props11.onChange;
 
       if (!error && pagination && pagination.totalItemCount > 0) {
         if (!onChange) {
@@ -1127,8 +1083,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       }
 
       return null;
-    } // used for moving in & out of `loading` state
-
+    }
   }]);
 
   return EuiBasicTable;

package/es/components/basic_table/basic_table.styles.js

@@ -0,0 +1,45 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css, keyframes } from '@emotion/react';
+import { logicalCSS, euiCantAnimate } from '../../global_styling';
+var tableLoadingLine = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), logicalCSS('left', 0), logicalCSS('width', 0), logicalCSS('left', 0), logicalCSS('width', '40%'), logicalCSS('left', '60%'), logicalCSS('width', '40%'), logicalCSS('left', '100%'), logicalCSS('width', 0));
+export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return /*#__PURE__*/css("position:relative;overflow:hidden;&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+}; // Fix to make the loading indicator position correctly in Safari
+// For whatever annoying reason, Safari doesn't respect `position: relative;`
+// on `tbody` without `position: relative` on the parent `table`
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "6xbnw4-safariLoadingWorkaround",
+  styles: "position:relative;label:safariLoadingWorkaround;"
+} : {
+  name: "6xbnw4-safariLoadingWorkaround",
+  styles: "position:relative;label:safariLoadingWorkaround;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var safariLoadingWorkaround = function safariLoadingWorkaround() {
+  return _ref;
+}; // Unsets the extra height caused by tooltip/popover wrappers around table action buttons
+// Without this, the row height jumps whenever actions are disabled
+
+export var euiBasicTableActionsWrapper = process.env.NODE_ENV === "production" ? {
+  name: "1mshepa-euiBasicTableActionsWrapper",
+  styles: "line-height:1;label:euiBasicTableActionsWrapper;"
+} : {
+  name: "1mshepa-euiBasicTableActionsWrapper",
+  styles: "line-height:1;label:euiBasicTableActionsWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};

package/es/components/datagrid/controls/column_selector.js

@@ -6,6 +6,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 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."); }
@@ -28,7 +30,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { Fragment, useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
-import { EuiI18n } from '../../i18n';
+import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiButtonEmpty } from '../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSwitch, EuiFieldText } from '../../form';
@@ -96,6 +98,8 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  var dragHandleAriaLabel = useEuiI18n('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
+
   var buttonText = ___EmotionJSX(EuiI18n, {
     token: "euiColumnSelector.button",
     default: "Columns"
@@ -168,18 +172,23 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       key: id,
       draggableId: id,
       index: index,
-      isDragDisabled: !isDragEnabled
+      isDragDisabled: !isDragEnabled,
+      hasInteractiveChildren: true,
+      customDragHandle: true
     }, function (provided, state) {
       return ___EmotionJSX("div", {
         className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, ___EmotionJSX(EuiFlexGroup, {
         responsive: false,
-        gutterSize: "m",
+        gutterSize: "s",
         alignItems: "center"
-      }, ___EmotionJSX(EuiFlexItem, null, allowColumnHiding ? ___EmotionJSX(EuiSwitch, {
+      }, allowColumnHiding && ___EmotionJSX(EuiFlexItem, {
+        grow: false
+      }, ___EmotionJSX(EuiSwitch, {
         name: id,
         label: displayValues[id] || id,
+        showLabel: false,
         checked: visibleColumnIds.has(id),
         compressed: true,
         className: "euiSwitch--mini",
@@ -191,11 +200,18 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
           setVisibleColumns(nextVisibleColumns);
         },
         "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      }) : ___EmotionJSX("span", {
+      })), ___EmotionJSX(EuiFlexItem // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+      , _extends({}, provided.dragHandleProps, {
+        "aria-hidden": true,
+        tabIndex: -1
+      }), ___EmotionJSX("span", {
         className: "euiDataGridColumnSelector__itemLabel"
-      }, id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, {
+      }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
         grow: false
-      }, ___EmotionJSX(EuiIcon, {
+      }, provided.dragHandleProps, {
+        "aria-label": dragHandleAriaLabel
+      }), ___EmotionJSX(EuiIcon, {
         type: "grab",
         color: "subdued"
       }))));

package/es/components/datagrid/controls/column_sorting_draggable.js

@@ -72,7 +72,9 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
   var dragHandleAriaLabel = useEuiI18n('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
   return ___EmotionJSX(EuiDraggable, _extends({
     draggableId: id,
-    index: index
+    index: index,
+    hasInteractiveChildren: true,
+    customDragHandle: true
   }, rest), function (provided, state) {
     return ___EmotionJSX("div", {
       className: "euiDataGridColumnSorting__item ".concat(state.isDragging && 'euiDataGridColumnSorting__item-isDragging')
@@ -114,18 +116,25 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
           sorting.onSort(nextColumns);
         }
       });
-    })), ___EmotionJSX(EuiFlexItem, {
+    })), ___EmotionJSX(EuiFlexItem, _extends({
+      className: "euiDataGridColumnSorting__name" // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+
+    }, provided.dragHandleProps, {
+      tabIndex: -1,
+      "aria-hidden": true
+    }), ___EmotionJSX(EuiFlexGroup, {
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false
+    }, ___EmotionJSX(EuiFlexItem, {
       grow: false
     }, ___EmotionJSX(EuiToken, {
       color: schemaDetails != null ? schemaDetails.color : undefined,
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
-    })), ___EmotionJSX(EuiFlexItem, {
-      "aria-hidden": true
-    }, ___EmotionJSX(EuiText, {
+    })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiText, {
       size: "xs"
-    }, ___EmotionJSX("p", null, display))), ___EmotionJSX(EuiFlexItem, {
-      className: "euiDataGridColumnSorting__orderButtons"
-    }, ___EmotionJSX(EuiI18n, {
+    }, ___EmotionJSX("p", null, display))))), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {

package/es/components/datagrid/data_grid.a11y.js

@@ -184,7 +184,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on first render', function () {
       cy.checkAxe();
     });
-    it('has zero violations when the columns reorder menu is open', function () {
+    it('has zero violations when the columns visibility menu is open', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.checkAxe();
     });
@@ -237,9 +237,10 @@ describe('EuiDataGrid', function () {
       cy.get('div[data-gridcell-visible-row-index="0"][data-gridcell-column-index="1"]').find('button.euiButtonIcon').last().realClick();
       cy.checkAxe();
     });
-    it('has zero violations when the Favorite Distro column has been sorted', function () {
+    it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
+      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {

package/es/components/modal/confirm_modal.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "title", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
+var _excluded = ["children", "title", "titleProps", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -43,6 +43,7 @@ export var CANCEL_BUTTON = 'cancel';
 export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   var children = _ref.children,
       title = _ref.title,
+      titleProps = _ref.titleProps,
       onCancel = _ref.onCancel,
       onConfirm = _ref.onConfirm,
       cancelButtonText = _ref.cancelButtonText,
@@ -94,9 +95,9 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   var modalTitle;
 
   if (title) {
-    modalTitle = ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, {
+    modalTitle = ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, _extends({
       "data-test-subj": "confirmModalTitleText"
-    }, title));
+    }, titleProps), title));
   }
 
   var message;
@@ -133,6 +134,7 @@ EuiConfirmModal.propTypes = {
      */
   children: PropTypes.node,
   title: PropTypes.node,
+  titleProps: PropTypes.any,
   cancelButtonText: PropTypes.node,
   confirmButtonText: PropTypes.node,
   onCancel: PropTypes.func.isRequired,

package/es/components/modal/modal.a11y.js

@@ -44,7 +44,7 @@ var Modal = function Modal() {
   };
   return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
     onClick: showModal
-  }, "Show confirm modal"), isModalVisible && ___EmotionJSX(EuiModal, modalProps, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, null, ___EmotionJSX("h1", null, "Title of modal"))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX("p", null, "This is a simple modal body")), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
+  }, "Show confirm modal"), isModalVisible && ___EmotionJSX(EuiModal, modalProps, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, null, "Title of modal")), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX("p", null, "This is a simple modal body")), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
     onClick: closeModal,
     fill: true
   }, "Close"))));

package/es/components/modal/modal_header_title.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "component"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -21,17 +21,26 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
   var className = _ref.className,
       children = _ref.children,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'h1' : _ref$component,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader__title', className);
   return ___EmotionJSX(EuiTitle, _extends({
     size: "m",
     className: classes
-  }, rest), /*#__PURE__*/React.isValidElement(children) ? children : ___EmotionJSX("h1", null, children));
+  }, rest), ___EmotionJSX(Component, null, children));
 };
 EuiModalHeaderTitle.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
-  css: PropTypes.any
+  css: PropTypes.any,
+
+  /**
+         * The tag to render. Can be changed to a lower heading
+         * level like `h2` or a container `div`.
+         * @default h1
+         */
+  component: PropTypes.any
 };

package/es/components/notification/notification_event.a11y.js

@@ -0,0 +1,113 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiContextMenuItem } from '../context_menu';
+import { EuiNotificationEvent } from './notification_event';
+import { EuiPanel } from '../panel';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NotificationEvent = function NotificationEvent() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isRead = _useState2[0],
+      setIsRead = _useState2[1];
+
+  var onRead = function onRead(id, isRead) {
+    setIsRead(!isRead);
+  };
+
+  var onOpenContextMenu = function onOpenContextMenu(id) {
+    return [___EmotionJSX(EuiContextMenuItem, {
+      key: "contextMenuItemA",
+      onClick: function onClick() {
+        return onRead(id, isRead);
+      }
+    }, isRead ? 'Mark as unread' : 'Mark as read'), ___EmotionJSX(EuiContextMenuItem, {
+      key: "contextMenuItemB",
+      onClick: function onClick() {}
+    }, "View messages like this"), ___EmotionJSX(EuiContextMenuItem, {
+      key: "contextMenuItemC",
+      onClick: function onClick() {}
+    }, "Don\u2019t notify me about this")];
+  };
+
+  return ___EmotionJSX(EuiPanel, {
+    paddingSize: "none",
+    hasShadow: true,
+    style: {
+      maxWidth: '540px'
+    }
+  }, ___EmotionJSX(EuiNotificationEvent, {
+    id: "cy-eui-notification-1",
+    type: "Report",
+    iconType: "logoKibana",
+    iconAriaLabel: "Kibana",
+    time: "1 min ago",
+    title: "[Error Monitoring Report] is generated",
+    primaryAction: "Download",
+    primaryActionProps: {
+      iconType: 'download'
+    },
+    messages: ['The reported was generated at 17:12:16 GMT+4'],
+    isRead: isRead,
+    onRead: onRead,
+    onOpenContextMenu: onOpenContextMenu,
+    onClickPrimaryAction: function onClickPrimaryAction() {},
+    onClickTitle: function onClickTitle() {}
+  }));
+};
+
+describe('EuiNotificationEvent', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(NotificationEvent, null));
+    cy.get('article.euiNotificationEvent').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is open', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations after the Mark as read button is clicked', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('div.euiPopover__panel button').first().realClick();
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility', function () {
+    it('has zero violations when the popover is opened by keyboard', function () {
+      cy.repeatRealPress('Tab');
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').should('have.focus');
+      cy.realPress('Enter');
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});