@elastic/eui 89.1.0 → 91.0.0

package/optimize/lib/components/form/range/range.js

@@ -56,7 +56,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventPopoverClose", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       id: _this.props.id || (0, _services.htmlIdGenerator)()(),
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      trackWidth: 0
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (e) {
       var isValid = (0, _number.isWithinRange)(_this.props.min, _this.props.max, e.currentTarget.value);
@@ -64,6 +65,11 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         _this.props.onChange(e, isValid);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rangeSliderRef", function (ref) {
+      _this.setState({
+        trackWidth: (ref === null || ref === void 0 ? void 0 : ref.clientWidth) || 0
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputFocus", function (e) {
       if (_this.props.onFocus) {
         _this.props.onFocus(e);
@@ -177,6 +183,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         side: "min",
         disabled: disabled
       }, min), (0, _react2.jsx)(_range_track.EuiRangeTrack, {
+        trackWidth: this.state.trackWidth,
         disabled: disabled,
         compressed: compressed,
         max: max,
@@ -190,45 +197,45 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         value: value,
         "aria-hidden": !!showInput,
         showRange: showRange
-      }, function (trackWidth) {
-        return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
-          id: showInput ? undefined : id // Attach id only to the input if there is one
-          ,
-          name: name,
-          min: min,
-          max: max,
-          step: step,
-          value: value,
-          disabled: disabled,
-          onChange: _this2.handleOnChange,
-          showTicks: showTicks,
-          showRange: showRange,
-          tabIndex: showInput ? -1 : tabIndex,
-          onMouseDown: showInputOnly ? function () {
-            return _this2.preventPopoverClose = true;
-          } : undefined,
-          onFocus: showInput === true ? undefined : onFocus,
-          onBlur: showInputOnly ? _this2.onInputBlur : onBlur,
-          "aria-hidden": !!showInput,
-          thumbColor: thumbColor
-        }, rest)), showRange && _this2.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
-          showTicks: showTicks,
-          min: Number(min),
-          max: Number(max),
-          lowerValue: Number(min),
-          upperValue: Number(value),
-          levels: levels,
-          trackWidth: trackWidth
-        }), showValue && !!String(value).length && (0, _react2.jsx)(_range_tooltip.EuiRangeTooltip, {
-          value: value,
-          max: max,
-          min: min,
-          name: name,
-          showTicks: showTicks,
-          valuePrepend: valuePrepend,
-          valueAppend: valueAppend
-        }));
-      }), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
+      }, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
+        id: showInput ? undefined : id // Attach id only to the input if there is one
+        ,
+        name: name,
+        min: min,
+        max: max,
+        step: step,
+        value: value,
+        disabled: disabled,
+        onChange: this.handleOnChange,
+        showTicks: showTicks,
+        showRange: showRange,
+        tabIndex: showInput ? -1 : tabIndex,
+        onMouseDown: showInputOnly ? function () {
+          return _this2.preventPopoverClose = true;
+        } : undefined,
+        onFocus: showInput === true ? undefined : onFocus,
+        onBlur: showInputOnly ? this.onInputBlur : onBlur,
+        "aria-hidden": !!showInput,
+        thumbColor: thumbColor
+      }, rest, {
+        ref: this.rangeSliderRef
+      })), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+        showTicks: showTicks,
+        min: Number(min),
+        max: Number(max),
+        lowerValue: Number(min),
+        upperValue: Number(value),
+        levels: levels,
+        trackWidth: this.state.trackWidth
+      }), showValue && !!String(value).length && (0, _react2.jsx)(_range_tooltip.EuiRangeTooltip, {
+        value: value,
+        max: max,
+        min: min,
+        name: name,
+        showTicks: showTicks,
+        valuePrepend: valuePrepend,
+        valueAppend: valueAppend
+      })), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
         side: "max",
         disabled: disabled
       }, max), showInput && !showInputOnly && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {

package/optimize/lib/components/form/range/range_track.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiRangeTrack = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,7 +16,7 @@ var _range_levels = require("./range_levels");
 var _range_ticks = require("./range_ticks");
 var _range_track = require("./range_track.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
+var _excluded = ["children", "trackWidth", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,6 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var EuiRangeTrack = function EuiRangeTrack(_ref) {
   var children = _ref.children,
+    trackWidth = _ref.trackWidth,
     disabled = _ref.disabled,
     max = _ref.max,
     min = _ref.min,
@@ -50,10 +50,6 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var tickSequence = (0, _react.useMemo)(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -100,12 +96,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: cssStyles
-  }, rest, {
-    ref: function ref(node) {
-      var _node$clientWidth;
-      setTrackWidth((_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0);
-    }
-  }), levels && !!levels.length && (0, _react2.jsx)(_range_levels.EuiRangeLevels, {
+  }, rest), levels && !!levels.length && (0, _react2.jsx)(_range_levels.EuiRangeLevels, {
     levels: levels,
     max: max,
     min: min,
@@ -123,7 +114,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
     min: min,
     max: max,
     trackWidth: trackWidth
-  }), typeof children === 'function' ? children(trackWidth) : children);
+  }), children);
 };
 exports.EuiRangeTrack = EuiRangeTrack;
 var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {

package/optimize/lib/components/form/range/utils.js

@@ -14,14 +14,13 @@ exports.calculateThumbPosition = exports.EUI_THUMB_SIZE = void 0;
 
 var EUI_THUMB_SIZE = 16;
 exports.EUI_THUMB_SIZE = EUI_THUMB_SIZE;
-var calculateThumbPosition = function calculateThumbPosition(value, min, max, width) {
+var calculateThumbPosition = function calculateThumbPosition(value, min, max, trackWidth) {
   var thumbSize = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : EUI_THUMB_SIZE;
   // Calculate the left position based on value
   var decimal = (value - min) / (max - min);
   // Must be between 0-100%
   var valuePosition = decimal <= 1 ? decimal : 1;
   valuePosition = valuePosition >= 0 ? valuePosition : 0;
-  var trackWidth = width !== null && width !== void 0 ? width : 0;
   var thumbToTrackRatio = thumbSize / trackWidth;
   var trackPositionScale = (1 - thumbToTrackRatio) * 100;
   return valuePosition * trackPositionScale;

package/optimize/lib/components/i18n/i18n.js

@@ -81,6 +81,7 @@ var EuiI18n = function EuiI18n(props) {
           i18nMapping: mapping,
           i18nMappingFunc: mappingFunc,
           valueDefault: props.defaults[idx],
+          values: props.values,
           render: render
         });
       }));

package/optimize/lib/components/list_group/list_group_item.js

@@ -20,7 +20,7 @@ var _services = require("../../services");
 var _href_validator = require("../../services/security/href_validator");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -48,6 +48,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     rel = _ref.rel,
     className = _ref.className,
     customCss = _ref.css,
+    style = _ref.style,
     iconType = _ref.iconType,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
@@ -173,7 +174,8 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     });
     itemContent = (0, _react2.jsx)("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
@@ -185,7 +187,8 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
   } else {
     itemContent = (0, _react2.jsx)("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, itemContent, extraActionNode);
   }
   return (0, _react2.jsx)(_react.Fragment, null, itemContent);

package/optimize/lib/components/list_group/list_group_item_extra_action.styles.js

@@ -32,7 +32,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
+    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";&&:hover,&&:focus{transform:translateY(0);}};label:euiListGroupItemExtraAction;"),
     hoverStyles: _ref2,
     alwaysShow: _ref
   };

package/optimize/lib/components/page/index.js

@@ -15,30 +15,6 @@ Object.defineProperty(exports, "EuiPageBody", {
     return _page_body.EuiPageBody;
   }
 });
-Object.defineProperty(exports, "EuiPageContentBody_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentBody_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContentHeaderSection_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentHeaderSection_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContentHeader_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentHeader_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContent_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContent_Deprecated;
-  }
-});
 Object.defineProperty(exports, "EuiPageHeader", {
   enumerable: true,
   get: function get() {
@@ -63,29 +39,14 @@ Object.defineProperty(exports, "EuiPageSection", {
     return _page_section.EuiPageSection;
   }
 });
-Object.defineProperty(exports, "EuiPageSideBar_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_side_bar.EuiPageSideBar_Deprecated;
-  }
-});
 Object.defineProperty(exports, "EuiPageSidebar", {
   enumerable: true,
   get: function get() {
     return _page_sidebar.EuiPageSidebar;
   }
 });
-Object.defineProperty(exports, "EuiPageTemplate_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_template.EuiPageTemplate_Deprecated;
-  }
-});
 var _page = require("./page");
 var _page_body = require("./page_body");
-var _page_content = require("./page_content");
 var _page_header = require("./page_header");
 var _page_section = require("./page_section");
-var _page_side_bar = require("./page_side_bar");
-var _page_sidebar = require("./page_sidebar");
-var _page_template = require("./page_template");
+var _page_sidebar = require("./page_sidebar");

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

@@ -20,7 +20,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
 var _popover = require("./popover");
-var _excluded = ["children", "className", "closePopover", "closeOnScroll", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -40,8 +40,20 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var children = _ref.children,
     className = _ref.className,
     closePopover = _ref.closePopover,
+    _ref$anchorPosition = _ref.anchorPosition,
+    anchorPosition = _ref$anchorPosition === void 0 ? 'downLeft' : _ref$anchorPosition,
+    _ref$attachToAnchor = _ref.attachToAnchor,
+    attachToAnchor = _ref$attachToAnchor === void 0 ? true : _ref$attachToAnchor,
+    _ref$repositionToCros = _ref.repositionToCrossAxis,
+    repositionToCrossAxis = _ref$repositionToCros === void 0 ? false : _ref$repositionToCros,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$panelPaddingSize = _ref.panelPaddingSize,
+    panelPaddingSize = _ref$panelPaddingSize === void 0 ? 's' : _ref$panelPaddingSize,
     _ref$closeOnScroll = _ref.closeOnScroll,
     closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? false : _ref$ownFocus,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -84,6 +96,11 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var panelWidth = (0, _react.useMemo)(function () {
     return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
   }, [panelMinWidth, inputWidth]);
+
+  // Resize callback
+  (0, _react.useEffect)(function () {
+    onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(panelWidth);
+  }, [panelWidth, onPanelResize]);
   (0, _react.useEffect)(function () {
     if (panelEl) {
       // We have to modify the popover panel DOM node directly instead of using
@@ -157,15 +174,19 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    className: classes,
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
-    repositionToCrossAxis: false,
-    ownFocus: false,
+    display: display,
     button: input,
-    buttonRef: inputRef,
+    popoverRef: inputRef,
     panelRef: panelRef,
-    className: classes,
     ref: popoverClassRef,
-    closePopover: closePopover
+    closePopover: closePopover,
+    anchorPosition: anchorPosition,
+    attachToAnchor: attachToAnchor,
+    repositionToCrossAxis: repositionToCrossAxis,
+    panelPaddingSize: panelPaddingSize,
+    ownFocus: ownFocus
   }, props, {
     panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
       onKeyDown: onKeyDown
@@ -177,10 +198,4 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     value: panelWidth
   }, children)));
 };
-exports.EuiInputPopover = EuiInputPopover;
-EuiInputPopover.defaultProps = {
-  anchorPosition: 'downLeft',
-  attachToAnchor: true,
-  display: 'block',
-  panelPaddingSize: 's'
-};
+exports.EuiInputPopover = EuiInputPopover;

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

@@ -9,7 +9,6 @@ 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"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -21,11 +20,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react2 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _tabbable = require("tabbable");
 var _focus_trap = require("../focus_trap");
 var _services = require("../../services");
+var _useCombinedRefs = require("../../services/hooks/useCombinedRefs");
 var _accessibility = require("../accessibility");
 var _portal = require("../portal");
 var _mutation_observer = require("../observer/mutation_observer");
@@ -35,6 +35,7 @@ var _outside_click_detector = require("../outside_click_detector");
 var _popover_arrow = require("./popover_arrow");
 var _popover2 = require("./popover.styles");
 var _popover_panel = require("./popover_panel");
+var _react2 = require("@emotion/react");
 var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "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 || _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; }
@@ -267,9 +268,9 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         window.addEventListener('resize', _this.positionPopoverFluid);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buttonRef", function (node) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popoverRef", function (node) {
       _this.button = node;
-      _this.props.buttonRef && _this.props.buttonRef(node);
+      (0, _useCombinedRefs.setMultipleRefs)([_this.props.popoverRef, _this.props.buttonRef], node);
     });
     _this.state = {
       prevProps: {
@@ -388,12 +389,12 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       var tabIndexProp = (_panelProps$tabIndex = panelProps === null || panelProps === void 0 ? void 0 : panelProps.tabIndex) !== null && _panelProps$tabIndex !== void 0 ? _panelProps$tabIndex : _tabIndexProp;
       var styles = (0, _popover2.euiPopoverStyles)();
       var popoverStyles = [styles.euiPopover, {
-        display: display
+        display: display,
+        label: display
       }];
       var classes = (0, _classnames.default)('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className);
-      var anchorClasses = (0, _classnames.default)('euiPopover__anchor', anchorClassName);
+      }, className, anchorClassName);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
@@ -417,17 +418,17 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         var focusTrapScreenReaderText;
         if (ownFocus || popoverScreenReaderText) {
           ariaDescribedby = this.descriptionId;
-          focusTrapScreenReaderText = (0, _react.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react.jsx)("p", {
+          focusTrapScreenReaderText = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
             id: this.descriptionId
-          }, ownFocus && (0, _react.jsx)(_i18n.EuiI18n, {
+          }, ownFocus && (0, _react2.jsx)(_i18n.EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
             default: "You are in a dialog. Press Escape, or tap/click outside the dialog to close."
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = (0, _react.jsx)(_portal.EuiPortal, {
+        panel = (0, _react2.jsx)(_portal.EuiPortal, {
           insert: insert
-        }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
+        }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
           clickOutsideDisables: true,
           onClickOutside: this.onClickOutside,
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
@@ -435,7 +436,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
+        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,
@@ -455,10 +456,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
           })
-        }), showArrow && this.state.arrowPosition && (0, _react.jsx)(_popover_arrow.EuiPopoverArrow, {
+        }), showArrow && this.state.arrowPosition && (0, _react2.jsx)(_popover_arrow.EuiPopoverArrow, {
           position: this.state.arrowPosition,
           style: this.state.arrowStyles
-        }, arrowChildren), focusTrapScreenReaderText, (0, _react.jsx)(_mutation_observer.EuiMutationObserver, {
+        }, arrowChildren), focusTrapScreenReaderText, (0, _react2.jsx)(_mutation_observer.EuiMutationObserver, {
           observerOptions: {
             attributes: true,
             // element attribute changes
@@ -471,7 +472,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
 
           onMutation: this.onMutation
         }, function (mutationRef) {
-          return (0, _react.jsx)("div", {
+          return (0, _react2.jsx)("div", {
             ref: mutationRef
           }, children);
         }))));
@@ -480,32 +481,20 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       // 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, _react.jsx)("div", (0, _extends2.default)({
+        return (0, _react2.jsx)("div", (0, _extends2.default)({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef
-        }, 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);
+          ref: this.popoverRef
+        }, rest), button instanceof HTMLElement ? null : button, panel);
       } else {
-        return (0, _react.jsx)(_outside_click_detector.EuiOutsideClickDetector, {
+        return (0, _react2.jsx)(_outside_click_detector.EuiOutsideClickDetector, {
           onOutsideClick: this.closePopover
-        }, (0, _react.jsx)("div", (0, _extends2.default)({
+        }, (0, _react2.jsx)("div", (0, _extends2.default)({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef,
+          ref: this.popoverRef,
           onKeyDown: this.onKeyDown
-        }, 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));
+        }, rest), button instanceof HTMLElement ? null : button, panel));
       }
     }
   }], [{
@@ -531,7 +520,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
     }
   }]);
   return EuiPopover;
-}(_react2.Component);
+}(_react.Component);
 exports.EuiPopover = EuiPopover;
 (0, _defineProperty2.default)(EuiPopover, "defaultProps", {
   isOpen: false,

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

@@ -18,9 +18,7 @@ var popoverArrowSize = 'm';
 exports.popoverArrowSize = popoverArrowSize;
 var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-
-  // Match the background color of panels
-  var borderColor = (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain');
+  var borderColor = 'var(--euiPopoverBackgroundColor)';
   var arrowSize = euiTheme.size[popoverArrowSize];
   return {
     // Base

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

@@ -45,7 +45,8 @@ var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
   var euiThemeContext = (0, _services.useEuiTheme)();
   var cssStyles = (0, _react.useMemo)(function () {
     var styles = (0, _popover_panel.euiPopoverPanelStyles)(euiThemeContext);
-    var sharedStyles = [styles.euiPopover__panel, isOpen && styles.isOpen];
+    var colorMode = euiThemeContext.colorMode.toLowerCase();
+    var sharedStyles = [styles.euiPopover__panel, styles[colorMode], isOpen && styles.isOpen];
     if (hasDragDrop) {
       return [].concat(sharedStyles, [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
     }

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

@@ -7,6 +7,7 @@ exports.openAnimationTiming = exports.euiPopoverPanelStyles = void 0;
 var _react = require("@emotion/react");
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 var _functions = require("../../../themes/amsterdam/global_styling/functions");
+var _services = require("../../../services");
 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)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -21,6 +22,7 @@ var openAnimationTiming = 'slow';
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
  * 3. Make sure the panel stays within the window.
+ * 4. Make the popover lighter on dark mode (too hard to distinguish from plain bgs otherwise), and set a CSS var for the arrow to use
  */
 exports.openAnimationTiming = openAnimationTiming;
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -42,8 +44,11 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
+    /* 4 */
+    light: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
+    dark: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", (0, _services.tint)(euiTheme.colors.emptyShade, 0.025), ";;label:dark;"),
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {

package/optimize/lib/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -76,9 +76,11 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
     setPopoverIsOpen(false);
     _closePopover && _closePopover();
   };
-  var togglePopover = function togglePopover() {
-    setPopoverIsOpen(!popoverIsOpen);
-  };
+  var togglePopover = (0, _react.useCallback)(function () {
+    setPopoverIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
 
   // Width applied to the internal div
   var popoverWidth = width || 600;
@@ -153,16 +155,16 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
     if (!currentBreakpoint) return false;
     return popoverButtonBreakpoints.includes(currentBreakpoint);
   }, [currentBreakpoint, popoverButtonBreakpoints]);
-  var popoverTrigger;
-  if (popoverButton && canShowPopoverButton) {
-    popoverTrigger = /*#__PURE__*/_react.default.cloneElement(popoverButton, _objectSpread(_objectSpread({}, popoverButton.props), {}, {
+  var popoverTrigger = (0, _react.useMemo)(function () {
+    if (!popoverButton || !canShowPopoverButton) return;
+    return (0, _react2.jsx)("span", {
+      className: "euiSelectableTemplateSitewide__popoverTrigger",
       onClick: togglePopover,
       onKeyDown: function onKeyDown(e) {
-        // Selectable preventsDefault on Enter which kills browser controls for pressing the button
-        e.stopPropagation();
+        return e.stopPropagation();
       }
-    }));
-  }
+    }, popoverButton);
+  }, [popoverButton, canShowPopoverButton, togglePopover]);
   return (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
     isLoading: isLoading,
     options: formattedOptions,