@elastic/eui 65.0.1 → 67.0.0

package/test-env/components/description_list/description_list_context.js

@@ -17,7 +17,8 @@ var _react = require("react");
 var contextDefaults = {
   type: 'row',
   textStyle: 'normal',
-  align: 'left'
+  align: 'left',
+  gutterSize: 'm'
 };
 exports.contextDefaults = contextDefaults;
 var EuiDescriptionListContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);

package/test-env/components/description_list/description_list_description.js

@@ -44,7 +44,8 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
       type = _useContext.type,
       textStyle = _useContext.textStyle,
       compressed = _useContext.compressed,
-      align = _useContext.align;
+      align = _useContext.align,
+      gutterSize = _useContext.gutterSize;
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
@@ -61,6 +62,7 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
         conditionalStyles.push(styles.left);
       }
 
+      conditionalStyles.push(styles[gutterSize]);
       break;
   }
 

package/test-env/components/description_list/description_list_description.styles.js

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 
 var euiDescriptionListDescriptionStyles = function euiDescriptionListDescriptionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n    &:not(:first-of-type) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n    }\n  ");
+  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), "\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n  ");
   return {
     euiDescriptionList__description: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList__description;"),
     // Types
@@ -44,7 +44,10 @@ var euiDescriptionListDescriptionStyles = function euiDescriptionListDescription
       normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;")
     },
     // Column types should align description text to the left when EuiDecriptionList is centered
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
+    // Gutter
+    s: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:m;")
   };
 };
 

package/test-env/components/description_list/description_list_title.js

@@ -44,7 +44,8 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
       type = _useContext.type,
       textStyle = _useContext.textStyle,
       compressed = _useContext.compressed,
-      align = _useContext.align;
+      align = _useContext.align,
+      gutterSize = _useContext.gutterSize;
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_title.euiDescriptionListTitleStyles)(theme);
@@ -64,7 +65,7 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
       break;
   }
 
-  var cssStyles = [styles.euiDescriptionList__title, styles[type]].concat((0, _toConsumableArray2.default)(conditionalStyles));
+  var cssStyles = [styles.euiDescriptionList__title, styles[type], styles[gutterSize]].concat((0, _toConsumableArray2.default)(conditionalStyles));
   var classes = (0, _classnames.default)('euiDescriptionList__title', className);
   return (0, _react2.jsx)("dt", (0, _extends2.default)({
     className: classes,

package/test-env/components/description_list/description_list_title.styles.js

@@ -23,9 +23,9 @@ var _title = require("../title/title.styles");
 var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
-  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), "\n  ");
+  var columnDisplay = "\n  ".concat((0, _global_styling.logicalCSS)('width', '50%'), "\n    ").concat((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), "\n  ");
   return {
-    euiDescriptionList__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), "&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:euiDescriptionList__title;"),
+    euiDescriptionList__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";;label:euiDescriptionList__title;"),
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
@@ -43,7 +43,11 @@ var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiTh
       compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";", (0, _global_styling.logicalCSS)('padding-vertical', '0'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";;label:compressed;")
     },
     // Alignment
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;")
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
+    // Gutter
+    // Add margin only to the non-first <dt>.
+    s: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:m;")
   };
 };
 

package/test-env/components/description_list/description_list_types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.TEXT_STYLES = exports.ALIGNMENTS = void 0;
+exports.TYPES = exports.TEXT_STYLES = exports.GUTTER_SIZES = exports.ALIGNMENTS = void 0;
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,4 +17,6 @@ exports.TYPES = TYPES;
 var ALIGNMENTS = ['center', 'left'];
 exports.ALIGNMENTS = ALIGNMENTS;
 var TEXT_STYLES = ['normal', 'reverse'];
-exports.TEXT_STYLES = TEXT_STYLES;
+exports.TEXT_STYLES = TEXT_STYLES;
+var GUTTER_SIZES = ['s', 'm'];
+exports.GUTTER_SIZES = GUTTER_SIZES;

package/test-env/components/expression/expression.js

@@ -109,7 +109,12 @@ EuiExpression.propTypes = {
      * First part of the expression
      */
   description: _propTypes.default.node.isRequired,
-  descriptionProps: _propTypes.default.any,
+  descriptionProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Second part of the expression
@@ -119,7 +124,12 @@ EuiExpression.propTypes = {
      * Second part of the expression
      */
   value: _propTypes.default.node,
-  valueProps: _propTypes.default.any,
+  valueProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Color of the `description`

package/test-env/components/form/field_search/field_search.js

@@ -92,26 +92,16 @@ var EuiFieldSearch = /*#__PURE__*/function (_Component) {
 
       if (nativeInputValueSetter) {
         nativeInputValueSetter.call(_this.inputElement, '');
-      } // dispatch input event, with IE11 support/fallback
+      } // dispatch input event
 
 
-      var event;
-
-      if ('Event' in window && typeof Event === 'function') {
-        event = new Event('input', {
-          bubbles: true,
-          cancelable: false
-        });
-      } else {
-        // IE11
-        event = document.createEvent('Event');
-        event.initEvent('input', true, false);
-      }
+      var event = new Event('input', {
+        bubbles: true,
+        cancelable: false
+      });
 
       if (_this.inputElement) {
-        if (event) {
-          _this.inputElement.dispatchEvent(event);
-        } // set focus on the search field
+        _this.inputElement.dispatchEvent(event); // set focus on the search field
 
 
         _this.inputElement.focus();

package/test-env/components/form/range/range_input.js

@@ -37,7 +37,7 @@ var EuiRangeInput = function EuiRangeInput(_ref) {
       _ref$autoSize = _ref.autoSize,
       autoSize = _ref$autoSize === void 0 ? true : _ref$autoSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // Chrome will properly size the input based on the max value, but FF & IE do not.
+  // Chrome will properly size the input based on the max value, but FF does not.
   // Calculate the width of the input based on highest number of characters.
   // Add 2 to accommodate for input stepper
   var widthStyle = autoSize ? {

package/test-env/components/header/header_links/header_link.js

@@ -106,7 +106,16 @@ EuiHeaderLink.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Any `type` accepted by EuiIcon

package/test-env/components/header/header_section/header_section_item.js

@@ -32,10 +32,11 @@ var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 
 exports.EuiHeaderSectionItem = EuiHeaderSectionItem;

package/test-env/components/image/image.js

@@ -174,5 +174,10 @@ EuiImage.propTypes = {
   /**
        * Props to add to the wrapping figure element
        */
-  wrapperProps: _propTypes.default.any
+  wrapperProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  })
 };

package/test-env/components/image/image_fullscreen_wrapper.js

@@ -78,10 +78,9 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
   var iconStyles = (0, _image_button2.euiImageButtonIconStyles)(euiTheme);
   var cssIconStyles = [iconStyles.euiImageButton__icon, iconStyles.closeFullScreen];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, {
-    "data-test-subj": "fullScreenOverlayMask",
-    onClick: closeFullScreen
+    "data-test-subj": "fullScreenOverlayMask"
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
-    clickOutsideDisables: true
+    onClickOutside: closeFullScreen
   }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", (0, _extends2.default)({
     "aria-label": optionalCaptionText
   }, wrapperProps, {

package/test-env/components/list_group/list_group.js

@@ -270,7 +270,13 @@ EuiListGroup.propTypes = {
          * Pass-through ref reference specifically for targeting
          * instances where the item content is rendered as a `button`
          */
-    buttonRef: _propTypes.default.any
+    buttonRef: _propTypes.default.any,
+
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: _propTypes.default.string
   }).isRequired),
 
   /**

package/test-env/components/list_group/list_group_item.js

@@ -35,7 +35,7 @@ var _href_validator = require("../../services/security/href_validator");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
     _excluded2 = ["iconType", "alwaysShow", "className", "isDisabled"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -83,6 +83,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       showToolTip = _ref$showToolTip === void 0 ? false : _ref$showToolTip,
       wrapText = _ref.wrapText,
       buttonRef = _ref.buttonRef,
+      toolTipText = _ref.toolTipText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
@@ -184,7 +185,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       className: classes
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       anchorClassName: "euiListGroupItem__tooltip",
-      content: label,
+      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
     }, itemContent));
@@ -329,5 +330,11 @@ EuiListGroupItem.propTypes = {
        * Pass-through ref reference specifically for targeting
        * instances where the item content is rendered as a `button`
        */
-  buttonRef: _propTypes.default.any
+  buttonRef: _propTypes.default.any,
+
+  /**
+       * Text to be displayed in the tooltip when `showToolTip` is true.
+       * By default the text will be same as the label text.
+       */
+  toolTipText: _propTypes.default.string
 };

package/test-env/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -249,6 +249,12 @@ EuiPinnableListGroup.propTypes = {
          */
     buttonRef: _propTypes.default.any,
 
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: _propTypes.default.string,
+
     /**
        * Saves the pinned status and changes the visibility of the pin icon
        */
@@ -359,7 +365,13 @@ EuiPinnableListGroup.propTypes = {
          * Pass-through ref reference specifically for targeting
          * instances where the item content is rendered as a `button`
          */
-    buttonRef: _propTypes.default.any
+    buttonRef: _propTypes.default.any,
+
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: _propTypes.default.string
   }).isRequired)]),
 
   /**

package/test-env/components/modal/modal.js

@@ -86,9 +86,7 @@ var EuiModal = function EuiModal(_ref) {
       color: "text",
       "aria-label": closeModal
     });
-  }), (0, _react2.jsx)("div", {
-    className: "euiModal__flex"
-  }, children))));
+  }), children)));
 };
 
 exports.EuiModal = EuiModal;

package/test-env/components/notification/notification_event.js

@@ -11,6 +11,8 @@ exports.EuiNotificationEvent = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -33,17 +35,12 @@ var _notification_event_read_icon = require("./notification_event_read_icon");
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["id", "type", "severity", "badgeColor", "iconType", "iconAriaLabel", "time", "title", "isRead", "primaryAction", "primaryActionProps", "messages", "onRead", "onOpenContextMenu", "onClickTitle", "onClickPrimaryAction", "headingLevel", "className"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/*
- * 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.
- */
 var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
   var id = _ref.id,
       type = _ref.type,
@@ -62,9 +59,12 @@ var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
       onClickTitle = _ref.onClickTitle,
       onClickPrimaryAction = _ref.onClickPrimaryAction,
       _ref$headingLevel = _ref.headingLevel,
-      headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel;
+      headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiNotificationEvent', {
-    'euiNotificationEvent--withReadState': typeof isRead === 'boolean'
+    'euiNotificationEvent--withReadState': typeof isRead === 'boolean',
+    className: className
   });
   var classesTitle = (0, _classnames.default)('euiNotificationEvent__title', {
     'euiNotificationEvent__title--isRead': isRead
@@ -75,11 +75,11 @@ var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
     className: classesTitle,
     'data-test-subj': "".concat(id, "-notificationEventTitle")
   };
-  return (0, _react2.jsx)("article", {
+  return (0, _react2.jsx)("article", (0, _extends2.default)({
     "aria-labelledby": randomHeadingId,
     className: classes,
     key: id
-  }, typeof isRead === 'boolean' && (0, _react2.jsx)("div", {
+  }, rest), typeof isRead === 'boolean' && (0, _react2.jsx)("div", {
     className: "euiNotificationEvent__readButton"
   }, !!onRead ? (0, _react2.jsx)(_notification_event_read_button.EuiNotificationEventReadButton, {
     isRead: isRead,
@@ -179,9 +179,9 @@ EuiNotificationEvent.propTypes = {
      * Disables the button and changes the icon to a loading spinner
      */
   isLoading: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
 
   /**
        * A unique identifier
@@ -272,7 +272,16 @@ EuiNotificationEvent.propTypes = {
     /**
        * Object of props passed to the <span/> wrapping the button's content
        */
-    contentProps: _propTypes.default.any,
+
+    /**
+       * Object of props passed to the <span/> wrapping the button's content
+       */
+    contentProps: _propTypes.default.shape({
+      className: _propTypes.default.string,
+      "aria-label": _propTypes.default.string,
+      "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any
+    }),
 
     /**
        * Any `type` accepted by EuiIcon

package/test-env/components/observer/mutation_observer/mutation_observer.js

@@ -63,7 +63,7 @@ var EuiMutationObserver = /*#__PURE__*/function (_EuiObserver) {
 exports.EuiMutationObserver = EuiMutationObserver;
 
 var makeMutationObserver = function makeMutationObserver(node, _observerOptions, callback) {
-  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // The MutationObserver polyfill used in Kibana (for Jest) implements
   // an older spec in which specifying `attributeOldValue` or `attributeFilter`
   // without specifying `attributes` results in a `SyntaxError`.
   // The following logic patches the newer spec in which `attributes: true` can be

package/test-env/components/overlay_mask/overlay_mask.js

@@ -17,17 +17,19 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = require("react-dom");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react2 = require("@emotion/react");
+
 var _common = require("../common");
 
 var _services = require("../../services");
 
-var _react2 = require("@emotion/react");
+var _portal = require("../portal");
+
+var _overlay_mask = require("./overlay_mask.styles");
 
-var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef", "css"];
+var _excluded = ["className", "children", "headerZindexLocation", "maskRef", "css"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -36,79 +38,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EuiOverlayMask = function EuiOverlayMask(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      onClick = _ref.onClick,
       _ref$headerZindexLoca = _ref.headerZindexLocation,
       headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
       maskRef = _ref.maskRef,
       css = _ref.css,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var overlayMaskNode = (0, _react.useRef)();
-  var combinedMaskRef = (0, _services.useCombinedRefs)([overlayMaskNode, maskRef]);
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isPortalTargetReady = _useState2[0],
-      setIsPortalTargetReady = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    document.body.classList.add('euiBody-hasOverlayMask');
-    return function () {
-      document.body.classList.remove('euiBody-hasOverlayMask');
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (typeof document !== 'undefined') {
-      combinedMaskRef(document.createElement('div'));
-    }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  (0, _react.useEffect)(function () {
-    var portalTarget = overlayMaskNode.current;
-
-    if (portalTarget) {
-      document.body.appendChild(portalTarget);
-    }
+      overlayMaskNode = _useState2[0],
+      setOverlayMaskNode = _useState2[1];
 
-    setIsPortalTargetReady(true);
-    return function () {
-      if (portalTarget) {
-        document.body.removeChild(portalTarget);
-      }
-    };
-  }, []);
+  var combinedMaskRef = (0, _services.useCombinedRefs)([setOverlayMaskNode, maskRef]);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _overlay_mask.euiOverlayMaskStyles)(euiTheme);
+  var cssStyles = [styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]];
   (0, _react.useEffect)(function () {
-    if (!overlayMaskNode.current) return;
+    if (!overlayMaskNode) return;
     (0, _common.keysOf)(rest).forEach(function (key) {
       if (typeof rest[key] !== 'string') {
         throw new Error("Unhandled property type. EuiOverlayMask property ".concat(key, " is not a string."));
       }
 
-      if (overlayMaskNode.current) {
-        overlayMaskNode.current.setAttribute(key, rest[key]);
+      if (overlayMaskNode) {
+        overlayMaskNode.setAttribute(key, rest[key]);
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
 
   (0, _react.useEffect)(function () {
-    if (!overlayMaskNode.current) return;
-    overlayMaskNode.current.className = (0, _classnames.default)('euiOverlayMask', "euiOverlayMask--".concat(headerZindexLocation, "Header"), className);
-  }, [className, headerZindexLocation]);
-  (0, _react.useEffect)(function () {
-    var portalTarget = overlayMaskNode.current;
-    if (!portalTarget || !onClick) return;
-
-    var listener = function listener(e) {
-      if (e.target === portalTarget) {
-        onClick();
-      }
-    };
-
-    portalTarget.addEventListener('click', listener);
-    return function () {
-      portalTarget.removeEventListener('click', listener);
-    };
-  }, [onClick]);
-  return isPortalTargetReady ? (0, _react2.jsx)(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)(children, overlayMaskNode.current)) : null;
+    if (!overlayMaskNode) return;
+    overlayMaskNode.className = (0, _classnames.default)('euiOverlayMask', className);
+  }, [overlayMaskNode, className]);
+  return (0, _react2.jsx)(_portal.EuiPortal, {
+    portalRef: combinedMaskRef
+  }, (0, _react2.jsx)(_react2.Global, {
+    styles: _overlay_mask.euiOverlayMaskBodyStyles
+  }), (0, _react2.jsx)(_react2.Global, {
+    styles: cssStyles
+  }), children);
 };
 
 exports.EuiOverlayMask = EuiOverlayMask;
@@ -118,11 +86,6 @@ EuiOverlayMask.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
 
-  /**
-     * Function that applies to clicking the mask itself and not the children
-     */
-  onClick: _propTypes.default.func,
-
   /**
      * ReactNode to render as this component's content
      */

package/test-env/components/overlay_mask/overlay_mask.styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiOverlayMaskStyles = exports.euiOverlayMaskBodyStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _services = require("../../services");
+
+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)."; }
+
+var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiOverlayMask: /*#__PURE__*/(0, _react.css)(".euiOverlayMask{position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), ";animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", (0, _services.transparentize)(euiTheme.colors.ink, 0.5), ";};label:euiOverlayMask;"),
+    aboveHeader: /*#__PURE__*/(0, _react.css)(".euiOverlayMask{z-index:", euiTheme.levels.mask, ";};label:aboveHeader;"),
+    belowHeader: /*#__PURE__*/(0, _react.css)(".euiOverlayMask{z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', "".concat(euiTheme.base * 3, "px")), ";};label:belowHeader;")
+  };
+};
+
+exports.euiOverlayMaskStyles = euiOverlayMaskStyles;
+var euiOverlayMaskBodyStyles = process.env.NODE_ENV === "production" ? {
+  name: "131160-euiOverlayMaskBodyStyles",
+  styles: "body{overflow:hidden;};label:euiOverlayMaskBodyStyles;"
+} : {
+  name: "131160-euiOverlayMaskBodyStyles",
+  styles: "body{overflow:hidden;};label:euiOverlayMaskBodyStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+exports.euiOverlayMaskBodyStyles = euiOverlayMaskBodyStyles;

package/test-env/components/page/page_content/page_content.js

@@ -30,8 +30,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/test-env/components/page/page_content/page_content_body.js

@@ -36,8 +36,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,