@elastic/eui 66.0.0 → 67.0.0

package/optimize/lib/components/tool_tip/tool_tip_popover.js

@@ -13,108 +13,67 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _tool_tip = require("./tool_tip.styles");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "title", "className", "positionToolTip", "popoverRef"];
+var _excluded = ["children", "title", "className", "positionToolTip", "popoverRef", "calculatedPosition"];
 
 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; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var EuiToolTipPopover = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiToolTipPopover, _Component);
-
-  var _super = _createSuper(EuiToolTipPopover);
-
-  function EuiToolTipPopover() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EuiToolTipPopover);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popover", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateDimensions", function () {
-      requestAnimationFrame(function () {
-        // Because of this delay, sometimes `positionToolTip` becomes unavailable.
-        if (_this.popover) {
-          _this.props.positionToolTip();
-        }
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setPopoverRef", function (ref) {
-      _this.popover = ref;
-
-      if (_this.props.popoverRef) {
-        _this.props.popoverRef(ref);
+var EuiToolTipPopover = function EuiToolTipPopover(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      className = _ref.className,
+      positionToolTip = _ref.positionToolTip,
+      popoverRef = _ref.popoverRef,
+      calculatedPosition = _ref.calculatedPosition,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var popover = (0, _react.useRef)();
+  var euiTheme = (0, _services.useEuiTheme)();
+  var toolTipCss = (0, _tool_tip.euiToolTipStyles)(euiTheme);
+  var popoverStyles = (0, _tool_tip.euiToolTipPopoverStyles)(euiTheme);
+  var titleCss = [popoverStyles.euiToolTip__title];
+  var updateDimensions = (0, _react.useCallback)(function () {
+    requestAnimationFrame(function () {
+      // Because of this delay, sometimes `positionToolTip` becomes unavailable.
+      if (popover.current) {
+        positionToolTip();
       }
     });
-    return _this;
-  }
-
-  (0, _createClass2.default)(EuiToolTipPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.body.classList.add('euiBody-hasPortalContent');
-      window.addEventListener('resize', this.updateDimensions);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.body.classList.remove('euiBody-hasPortalContent');
-      window.removeEventListener('resize', this.updateDimensions);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          title = _this$props.title,
-          className = _this$props.className,
-          positionToolTip = _this$props.positionToolTip,
-          popoverRef = _this$props.popoverRef,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var classes = (0, _classnames.default)('euiToolTipPopover', className);
-      var optionalTitle;
-
-      if (title) {
-        optionalTitle = (0, _react2.jsx)("div", {
-          className: "euiToolTip__title"
-        }, title);
-      }
+  }, [positionToolTip]);
 
-      return (0, _react2.jsx)("div", (0, _extends2.default)({
-        className: classes,
-        ref: this.setPopoverRef
-      }, rest), optionalTitle, children);
+  var setPopoverRef = function setPopoverRef(ref) {
+    if (popoverRef) {
+      popoverRef(ref);
     }
-  }]);
-  return EuiToolTipPopover;
-}(_react.Component);
+  };
+
+  (0, _react.useEffect)(function () {
+    document.body.classList.add('euiBody-hasPortalContent');
+    window.addEventListener('resize', updateDimensions);
+    return function () {
+      document.body.classList.remove('euiBody-hasPortalContent');
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, [updateDimensions]);
+  var classes = (0, _classnames.default)('euiToolTipPopover', className);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: [toolTipCss.euiToolTip, calculatedPosition && toolTipCss[calculatedPosition], ";label:EuiToolTipPopover;"],
+    className: classes,
+    ref: setPopoverRef
+  }, rest), title && (0, _react2.jsx)("div", {
+    css: titleCss,
+    className: "euiToolTip__title"
+  }, title), children);
+};
 
 exports.EuiToolTipPopover = EuiToolTipPopover;

package/optimize/lib/global_styling/index.js

@@ -54,4 +54,17 @@ Object.keys(_mixins).forEach(function (key) {
       return _mixins[key];
     }
   });
+});
+
+var _animations = require("./utility/animations");
+
+Object.keys(_animations).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _animations[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _animations[key];
+    }
+  });
 });

package/optimize/lib/global_styling/utility/animations.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiAnimFadeIn = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
+exports.euiAnimFadeIn = euiAnimFadeIn;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "66.0.0",
+  "version": "67.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.9.12",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^47.2.1",
+    "@elastic/charts": "^48.0.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",

package/src/components/index.scss

@@ -4,7 +4,6 @@
 @import 'badge/index';
 @import 'basic_table/index';
 @import 'button/index';
-@import 'call_out/index';
 @import 'code/index';
 @import 'collapsible_nav/index';
 @import 'color_picker/index';
@@ -25,8 +24,6 @@
 @import 'markdown_editor/index';
 @import 'modal/index';
 @import 'notification/index';
-@import 'overlay_mask/index';
-@import 'pagination/index';
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'tree_view/index';
@@ -38,4 +35,3 @@
 @import 'suggest/index';
 @import 'table/index';
 @import 'tabs/index';
-@import 'tool_tip/index';

package/src/global_styling/mixins/_tool_tip.scss

@@ -6,13 +6,10 @@
   z-index: $euiZLevel9;
   max-width: 256px;
   overflow-wrap: break-word;
+  padding: $euiSizeS;
 
-  @if ($size == 's') {
-    @include euiFontSizeXS;
-    padding: $euiSizeS;
-  } @else {
-    @include euiFontSizeS;
-    padding: $euiSizeM;
+  .euiHorizontalRule {
+    background-color: $euiTooltipBorderColor;
   }
 }
 

package/src/themes/amsterdam/overrides/_index.scss

@@ -16,7 +16,6 @@
 @import 'markdown_editor';
 @import 'modal';
 @import 'notification_badge';
-@import 'overlay_mask';
 @import 'range';
 @import 'range_draggable';
 @import 'range_highlight';
@@ -29,4 +28,3 @@
 @import 'side_nav';
 @import 'steps';
 @import 'tabs';
-@import 'tooltip';

package/test-env/components/button/button_display/_button_display.js

@@ -171,7 +171,16 @@ EuiButtonDisplay.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
+  }),
   style: _propTypes.default.any,
 
   /**

package/test-env/components/button/button_empty/button_empty.js

@@ -210,7 +210,16 @@ EuiButtonEmpty.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/collapsible_nav/collapsible_nav.js

@@ -187,11 +187,6 @@ EuiCollapsibleNav.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/date_picker/auto_refresh/auto_refresh.js

@@ -213,7 +213,12 @@ EuiAutoRefreshButton.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)

package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -100,7 +100,12 @@ var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
 exports.EuiDatePopoverButton = EuiDatePopoverButton;
 EuiDatePopoverButton.propTypes = {
   className: _propTypes.default.string,
-  buttonProps: _propTypes.default.any,
+  buttonProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
   dateFormat: _propTypes.default.string.isRequired,
   isDisabled: _propTypes.default.bool,
   isInvalid: _propTypes.default.bool,

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/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/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/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/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
      */