@elastic/eui 60.3.0 → 62.0.1

package/optimize/lib/components/image/image_wrapper.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiImageWrapper = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _services = require("../../services");
+
+var _inner_text = require("../inner_text");
+
+var _image_wrapper = require("./image_wrapper.styles");
+
+var _image_button = require("./image_button");
+
+var _image_caption = require("./image_caption");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * 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 EuiImageWrapper = function EuiImageWrapper(_ref) {
+  var alt = _ref.alt,
+      caption = _ref.caption,
+      hasShadow = _ref.hasShadow,
+      allowFullScreen = _ref.allowFullScreen,
+      float = _ref.float,
+      margin = _ref.margin,
+      children = _ref.children,
+      setIsFullScreen = _ref.setIsFullScreen,
+      wrapperProps = _ref.wrapperProps,
+      fullScreenIconColor = _ref.fullScreenIconColor,
+      isFullWidth = _ref.isFullWidth;
+
+  var openFullScreen = function openFullScreen() {
+    setIsFullScreen(true);
+  };
+
+  var classes = (0, _classnames.default)('euiImageWrapper', wrapperProps && wrapperProps.className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _image_wrapper.euiImageWrapperStyles)(euiTheme);
+  var cssFigureStyles = [styles.euiImageWrapper, float && styles[float], margin && styles[margin], allowFullScreen && styles.allowFullScreen, isFullWidth && styles.fullWidth];
+
+  var _useInnerText = (0, _inner_text.useInnerText)(),
+      _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
+      optionalCaptionRef = _useInnerText2[0],
+      optionalCaptionText = _useInnerText2[1];
+
+  return (0, _react2.jsx)("figure", (0, _extends2.default)({
+    "aria-label": optionalCaptionText
+  }, wrapperProps, {
+    className: classes,
+    css: cssFigureStyles
+  }), allowFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_image_button.EuiImageButton, {
+    hasAlt: !!alt,
+    hasShadow: hasShadow,
+    onClick: openFullScreen,
+    "data-test-subj": "activateFullScreenButton",
+    isFullWidth: isFullWidth,
+    fullScreenIconColor: fullScreenIconColor
+  }, children)) : children, (0, _react2.jsx)(_image_caption.EuiImageCaption, {
+    ref: optionalCaptionRef,
+    caption: caption
+  }));
+};
+
+exports.EuiImageWrapper = EuiImageWrapper;

package/optimize/lib/components/image/image_wrapper.styles.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiImageWrapperStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "gacnmc-allowFullScreen",
+  styles: "&:hover [class*='euiImageCaption']{text-decoration:underline;};label:allowFullScreen;"
+} : {
+  name: "gacnmc-allowFullScreen",
+  styles: "&:hover [class*='euiImageCaption']{text-decoration:underline;};label:allowFullScreen;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiImageWrapperStyles = function euiImageWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiImageWrapper: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('center'), ";line-height:0;flex-shrink:0;;label:euiImageWrapper;"),
+    allowFullScreen: _ref,
+    // Margins
+    s: /*#__PURE__*/(0, _react.css)("margin:", euiTheme.size.s, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("margin:", euiTheme.size.base, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)("margin:", euiTheme.size.l, ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)("margin:", euiTheme.size.xl, ";;label:xl;"),
+    // Floats
+    // 1: Logical properties/values in `float` is currently not yet supported by all browsers w/o flags
+    // @see https://caniuse.com/mdn-css_properties_float_flow_relative_values for when we can remove left/right fallbacks
+    left: /*#__PURE__*/(0, _react.css)("@media only screen and (min-width: ", euiTheme.breakpoint.m, "px){float:left;float:", _global_styling.logicalSide.left, ";", (0, _global_styling.logicalCSS)('margin-left', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:left;"),
+    right: /*#__PURE__*/(0, _react.css)("@media only screen and (min-width: ", euiTheme.breakpoint.m, "px){float:right;float:", _global_styling.logicalSide.right, ";", (0, _global_styling.logicalCSS)('margin-right', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:right;"),
+    // Sizes
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;")
+  };
+};
+
+exports.euiImageWrapperStyles = euiImageWrapperStyles;

package/optimize/lib/components/popover/input_popover.js

@@ -29,8 +29,12 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _services = require("../../services");
 
+var _form = require("../form/form.styles");
+
 var _react2 = require("@emotion/react");
 
+var _global_styling = require("../../global_styling");
+
 var _excluded = ["children", "className", "disableFocusTrap", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
 
 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); }
@@ -49,6 +53,7 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
       _inputRef = _ref.inputRef,
       _panelRef = _ref.panelRef,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiThemeContext = (0, _services.useEuiTheme)();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -105,10 +110,9 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }
   };
 
-  var classes = (0, _classnames.default)('euiInputPopover', {
-    'euiInputPopover--fullWidth': fullWidth
-  }, className);
+  var classes = (0, _classnames.default)('euiInputPopover', className);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', (0, _form.euiFormMaxWidth)(euiThemeContext)), ";label:EuiInputPopover;"),
     ownFocus: false,
     button: (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
       onResize: onResize

package/optimize/lib/components/popover/popover.js

@@ -2,16 +2,18 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiPopover = exports.DISPLAY = exports.ANCHOR_POSITIONS = void 0;
+exports.EuiPopover = void 0;
 exports.getPopoverAlignFromAnchorPosition = getPopoverAlignFromAnchorPosition;
 exports.getPopoverPositionFromAnchorPosition = getPopoverPositionFromAnchorPosition;
 exports.popoverAnchorPosition = void 0;
 
+var _react = require("@emotion/react");
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -32,11 +34,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -48,8 +48,6 @@ var _services = require("../../services");
 
 var _accessibility = require("../accessibility");
 
-var _panel = require("../panel");
-
 var _portal = require("../portal");
 
 var _mutation_observer = require("../observer/mutation_observer");
@@ -60,13 +58,17 @@ var _i18n = require("../i18n");
 
 var _outside_click_detector = require("../outside_click_detector");
 
-var _react2 = require("@emotion/react");
+var _popover_arrow = require("./popover_arrow");
 
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
+var _popover2 = require("./popover.styles");
+
+var _popover_panel = require("./popover_panel");
+
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 
 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 || _typeof3(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 _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -115,47 +117,10 @@ function getPopoverAlignFromAnchorPosition(anchorPosition) {
   return anchorPositionToPopoverPositionMap[align.toLowerCase()];
 }
 
-var anchorPositionToClassNameMap = {
-  upCenter: 'euiPopover--anchorUpCenter',
-  upLeft: 'euiPopover--anchorUpLeft',
-  upRight: 'euiPopover--anchorUpRight',
-  downCenter: 'euiPopover--anchorDownCenter',
-  downLeft: 'euiPopover--anchorDownLeft',
-  downRight: 'euiPopover--anchorDownRight',
-  leftCenter: 'euiPopover--anchorLeftCenter',
-  leftUp: 'euiPopover--anchorLeftUp',
-  leftDown: 'euiPopover--anchorLeftDown',
-  rightCenter: 'euiPopover--anchorRightCenter',
-  rightUp: 'euiPopover--anchorRightUp',
-  rightDown: 'euiPopover--anchorRightDown'
-};
-var ANCHOR_POSITIONS = Object.keys(anchorPositionToClassNameMap);
-exports.ANCHOR_POSITIONS = ANCHOR_POSITIONS;
-var displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiPopover--displayBlock'
-};
-var DISPLAY = Object.keys(displayToClassNameMap);
-exports.DISPLAY = DISPLAY;
 var DEFAULT_POPOVER_STYLES = {
   top: 50,
   left: 50
 };
-
-function getElementFromInitialFocus(initialFocus) {
-  var initialFocusType = (0, _typeof2.default)(initialFocus);
-
-  if (initialFocusType === 'string') {
-    return document.querySelector(initialFocus);
-  }
-
-  if (initialFocusType === 'function') {
-    return initialFocus();
-  }
-
-  return initialFocus;
-}
-
 var returnFocusConfig = {
   preventScroll: true
 };
@@ -175,10 +140,8 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "strandedFocusTimeout", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closingTransitionTimeout", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closingTransitionAnimationFrame", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateFocusAnimationFrame", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "button", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "panel", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasSetInitialFocus", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "descriptionId", (0, _services.htmlIdGenerator)()());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closePopover", function () {
       if (_this.props.isOpen) {
@@ -257,8 +220,6 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           isOpenStable: true
         }, function () {
           _this.positionPopoverFixed();
-
-          _this.updateFocus();
         });
       }, durationMatch + delayMatch);
     });
@@ -377,64 +338,9 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(EuiPopover, [{
-    key: "updateFocus",
-    value: function updateFocus() {
-      var _this2 = this;
-
-      // Wait for the DOM to update.
-      this.updateFocusAnimationFrame = window.requestAnimationFrame(function () {
-        if (!_this2.props.ownFocus || !_this2.panel || _this2.props.initialFocus === false) {
-          return;
-        } // If we've already focused on something inside the panel, everything's fine.
-
-
-        if (_this2.hasSetInitialFocus && _this2.panel.contains(document.activeElement)) {
-          return;
-        } // Otherwise focus either `initialFocus` or the panel
-
-
-        var focusTarget;
-
-        if (_this2.props.initialFocus != null) {
-          focusTarget = getElementFromInitialFocus(_this2.props.initialFocus);
-        } // there's a race condition between the popover content becoming visible and this function call
-        // if the element isn't visible yet (due to css styling) then it can't accept focus
-        // so wait for another render and try again
-
-
-        if (focusTarget == null) {
-          // there isn't a focus target, one of two reasons:
-          // #1 is the whole panel hidden? If so, schedule another check
-          // #2 panel is visible and no `initialFocus` was set, move focus to the panel
-          var panelVisibility = window.getComputedStyle(_this2.panel).opacity;
-
-          if (panelVisibility === '0') {
-            // #1
-            _this2.updateFocus();
-          } else {
-            // #2
-            focusTarget = _this2.panel;
-          }
-        } else {
-          // found an element to focus, but is it visible?
-          var visibility = window.getComputedStyle(focusTarget).visibility;
-
-          if (visibility === 'hidden') {
-            // not visible, check again next render frame
-            _this2.updateFocus();
-          }
-        }
-
-        if (focusTarget != null) {
-          _this2.hasSetInitialFocus = true;
-          focusTarget.focus();
-        }
-      });
-    }
-  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
+      var _this2 = this;
 
       if (this.state.suppressingPopover) {
         // component was created with isOpen=true; now that it's mounted
@@ -444,7 +350,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           suppressingPopover: false,
           isOpening: true
         }, function () {
-          _this3.onOpenPopover();
+          _this2.onOpenPopover();
         });
       }
 
@@ -455,7 +361,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this4 = this;
+      var _this3 = this;
 
       // The popover is being opened.
       if (!prevProps.isOpen && this.props.isOpen) {
@@ -476,9 +382,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         // If the user has just closed the popover, queue up the removal of the content after the
         // transition is complete.
         this.closingTransitionTimeout = window.setTimeout(function () {
-          _this4.hasSetInitialFocus = false;
-
-          _this4.setState({
+          _this3.setState({
             isClosing: false
           });
         }, closingTransitionTime);
@@ -492,12 +396,11 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       clearTimeout(this.strandedFocusTimeout);
       clearTimeout(this.closingTransitionTimeout);
       cancelAnimationFrame(this.closingTransitionAnimationFrame);
-      cancelAnimationFrame(this.updateFocusAnimationFrame);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this4 = this;
 
       var _this$props = this.props,
           anchorClassName = _this$props.anchorClassName,
@@ -521,7 +424,6 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           arrowChildren = _this$props.arrowChildren,
           repositionOnScroll = _this$props.repositionOnScroll,
           zIndex = _this$props.zIndex,
-          initialFocus = _this$props.initialFocus,
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
           offset = _this$props.offset,
@@ -531,26 +433,23 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           ariaLabelledBy = _this$props['aria-labelledby'],
           container = _this$props.container,
           focusTrapProps = _this$props.focusTrapProps,
+          initialFocusProp = _this$props.initialFocus,
           tabIndexProp = _this$props.tabIndex,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var classes = (0, _classnames.default)('euiPopover', anchorPosition ? anchorPositionToClassNameMap[anchorPosition] : null, display ? displayToClassNameMap[display] : null, {
+      var styles = (0, _popover2.euiPopoverStyles)();
+      var popoverStyles = [styles.euiPopover, {
+        display: display
+      }];
+      var classes = (0, _classnames.default)('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
       }, className);
       var anchorClasses = (0, _classnames.default)('euiPopover__anchor', anchorClassName);
-      var panelClasses = (0, _classnames.default)('euiPopover__panel', "euiPopover__panel--".concat(this.state.arrowPosition), {
-        'euiPopover__panel-isOpen': this.state.isOpening
-      }, {
-        'euiPopover__panel-noArrow': !hasArrow || attachToAnchor
-      }, {
-        'euiPopover__panel-isAttached': attachToAnchor
-      }, panelClassName, panelProps === null || panelProps === void 0 ? void 0 : panelProps.className);
+      var showArrow = hasArrow && !attachToAnchor;
       var panel;
 
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
         var tabIndex = tabIndexProp;
-
-        var _initialFocus;
-
+        var initialFocus = initialFocusProp;
         var ariaDescribedby;
         var ariaLive;
         var panelAriaModal = panelProps !== null && panelProps !== void 0 && panelProps.hasOwnProperty('aria-modal') ? panelProps['aria-modal'] : 'true';
@@ -560,9 +459,11 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           tabIndex = tabIndexProp !== null && tabIndexProp !== void 0 ? tabIndexProp : 0;
           ariaLive = 'off';
 
-          _initialFocus = function _initialFocus() {
-            return _this5.panel;
-          };
+          if (!initialFocus) {
+            initialFocus = function initialFocus() {
+              return _this4.panel;
+            };
+          }
         } else {
           ariaLive = 'assertive';
         }
@@ -571,32 +472,33 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
 
         if (ownFocus || popoverScreenReaderText) {
           ariaDescribedby = this.descriptionId;
-          focusTrapScreenReaderText = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+          focusTrapScreenReaderText = (0, _react.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react.jsx)("p", {
             id: this.descriptionId
-          }, ownFocus && (0, _react2.jsx)(_i18n.EuiI18n, {
+          }, ownFocus && (0, _react.jsx)(_i18n.EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
             default: "You are in a dialog. To close this dialog, hit escape."
           }), popoverScreenReaderText));
         }
 
-        var arrowClassNames = (0, _classnames.default)('euiPopover__panelArrow', "euiPopover__panelArrow--".concat(this.state.arrowPosition));
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = (0, _react2.jsx)(_portal.EuiPortal, {
+        panel = (0, _react.jsx)(_portal.EuiPortal, {
           insert: insert
-        }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
+        }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
           clickOutsideDisables: true
         }, focusTrapProps, {
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
-          initialFocus: _initialFocus,
+          initialFocus: initialFocus,
           onDeactivation: onTrapDeactivation,
           onClickOutside: this.onClickOutside,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }), (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({}, panelProps, {
-          "data-popover-panel": true,
+        }), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
           panelRef: this.panelRef,
-          className: panelClasses,
+          isOpen: this.state.isOpening,
+          position: this.state.arrowPosition,
+          isAttached: attachToAnchor,
+          className: (0, _classnames.default)(panelClassName, panelProps === null || panelProps === void 0 ? void 0 : panelProps.className),
           hasShadow: false,
           paddingSize: panelPaddingSize,
           tabIndex: tabIndex,
@@ -610,10 +512,10 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
             // Adding `will-change` to reduce risk of a blurry animation in Chrome 86+
             willChange: !this.state.isOpenStable ? 'transform, opacity' : undefined
           })
-        }), (0, _react2.jsx)("div", {
-          className: arrowClassNames,
+        }), showArrow && this.state.arrowPosition && (0, _react.jsx)(_popover_arrow.EuiPopoverArrow, {
+          position: this.state.arrowPosition,
           style: this.state.arrowStyles
-        }, arrowChildren), focusTrapScreenReaderText, (0, _react2.jsx)(_mutation_observer.EuiMutationObserver, {
+        }, arrowChildren), focusTrapScreenReaderText, (0, _react.jsx)(_mutation_observer.EuiMutationObserver, {
           observerOptions: {
             attributes: true,
             // element attribute changes
@@ -626,30 +528,38 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           },
           onMutation: this.onMutation
         }, function (mutationRef) {
-          return (0, _react2.jsx)("div", {
+          return (0, _react.jsx)("div", {
             ref: mutationRef
           }, children);
         }))));
-      } // react-focus-on and relataed do not register outside click detection
+      } // react-focus-on and related do not register outside click detection
       // when disabled, so we still need to conditionally check for that ourselves
 
 
       if (ownFocus) {
-        return (0, _react2.jsx)("div", (0, _extends2.default)({
+        return (0, _react.jsx)("div", (0, _extends2.default)({
+          css: popoverStyles,
           className: classes,
           ref: popoverRef
-        }, rest), (0, _react2.jsx)("div", {
+        }, rest), (0, _react.jsx)("div", {
+          css: /*#__PURE__*/(0, _react.css)({
+            display: display
+          }, ";label:render;"),
           className: anchorClasses,
           ref: this.buttonRef
         }, button instanceof HTMLElement ? null : button), panel);
       } else {
-        return (0, _react2.jsx)(_outside_click_detector.EuiOutsideClickDetector, {
+        return (0, _react.jsx)(_outside_click_detector.EuiOutsideClickDetector, {
           onOutsideClick: this.closePopover
-        }, (0, _react2.jsx)("div", (0, _extends2.default)({
+        }, (0, _react.jsx)("div", (0, _extends2.default)({
+          css: popoverStyles,
           className: classes,
           ref: popoverRef,
           onKeyDown: this.onKeyDown
-        }, rest), (0, _react2.jsx)("div", {
+        }, rest), (0, _react.jsx)("div", {
+          css: /*#__PURE__*/(0, _react.css)({
+            display: display
+          }, ";label:render;"),
           className: anchorClasses,
           ref: this.buttonRef
         }, button instanceof HTMLElement ? null : button), panel));
@@ -680,7 +590,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
     }
   }]);
   return EuiPopover;
-}(_react.Component);
+}(_react2.Component);
 
 exports.EuiPopover = EuiPopover;
 (0, _defineProperty2.default)(EuiPopover, "defaultProps", {
@@ -689,5 +599,5 @@ exports.EuiPopover = EuiPopover;
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
   hasArrow: true,
-  display: 'inlineBlock'
+  display: 'inline-block'
 });

package/optimize/lib/components/popover/popover.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiPopoverStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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 euiPopoverStyles = function euiPopoverStyles() {
+  return {
+    // Base anchor wrapper
+    euiPopover: /*#__PURE__*/(0, _react.css)("position:relative;vertical-align:middle;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPopover;")
+  };
+};
+
+exports.euiPopoverStyles = euiPopoverStyles;

package/optimize/lib/components/popover/popover_arrow/_popover_arrow.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POSITIONS = exports.EuiPopoverArrow = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _popover_arrow = require("./_popover_arrow.styles");
+
+var _services = require("../../../services");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "position"];
+var POSITIONS = ['top', 'left', 'right', 'bottom'];
+exports.POSITIONS = POSITIONS;
+
+var EuiPopoverArrow = function EuiPopoverArrow(_ref) {
+  var children = _ref.children,
+      position = _ref.position,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _popover_arrow.euiPopoverArrowStyles)(euiTheme);
+  var cssStyles = [styles.euiPopoverArrow, styles[position]];
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    "data-popover-arrow": position,
+    css: cssStyles
+  }, rest), children);
+};
+
+exports.EuiPopoverArrow = EuiPopoverArrow;