@elastic/eui 90.0.0 → 91.0.0

package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -1,4 +1,10 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -25,52 +31,99 @@ import PropTypes from "prop-types";
 import moment from 'moment'; // eslint-disable-line import/named
 
 import dateMath from '@elastic/datemath';
-import { EuiDatePicker } from '../../date_picker';
+import { keys } from '../../../../services';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
+import { EuiCode } from '../../../code';
 import { EuiI18n } from '../../../i18n';
+import { EuiDatePicker } from '../../date_picker';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// Allow users to paste in and have the datepicker parse multiple common date formats,
+// in addition to the configured displayed `dateFormat` prop
+var ALLOWED_USER_DATE_FORMATS = [moment.ISO_8601, moment.RFC_2822, 'X' // Unix timestamp in seconds
+];
+
 export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
   _inherits(EuiAbsoluteTab, _Component);
   var _super = _createSuper(EuiAbsoluteTab);
+  // Store outside of state as a ref for faster/unbatched updates
+
   function EuiAbsoluteTab(props) {
     var _this;
     _classCallCheck(this, EuiAbsoluteTab);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "state", void 0);
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date, event) {
+    _defineProperty(_assertThisInitialized(_this), "isParsing", false);
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
       var onChange = _this.props.onChange;
       if (date === null) {
         return;
       }
-      onChange(date.toISOString(), event);
+      onChange(date.toISOString());
       var valueAsMoment = moment(date);
       _this.setState({
         valueAsMoment: valueAsMoment,
         textInputValue: valueAsMoment.format(_this.props.dateFormat),
+        hasUnparsedText: false,
         isTextInvalid: false
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (event) {
-      var onChange = _this.props.onChange;
-      var valueAsMoment = moment(event.target.value, _this.props.dateFormat, true);
-      var dateIsValid = valueAsMoment.isValid();
-      if (dateIsValid) {
-        onChange(valueAsMoment.toISOString(), event);
-      }
+      if (_this.isParsing) return;
       _this.setState({
         textInputValue: event.target.value,
-        isTextInvalid: !dateIsValid,
-        valueAsMoment: dateIsValid ? valueAsMoment : null
+        hasUnparsedText: true,
+        isTextInvalid: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "parseUserDateInput", function (textInputValue) {
+      _this.isParsing = true;
+      // Wait a tick for state to finish updating (whatever gets returned),
+      // and then allow `onChange` user input to continue setting state
+      requestAnimationFrame(function () {
+        _this.isParsing = false;
+      });
+      var invalidDateState = {
+        textInputValue: textInputValue,
+        isTextInvalid: true,
+        valueAsMoment: null
+      };
+      if (!textInputValue) {
+        return _this.setState(invalidDateState);
+      }
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        dateFormat = _this$props.dateFormat;
+
+      // Attempt to parse with passed `dateFormat`
+      var valueAsMoment = moment(textInputValue, dateFormat, true);
+      var dateIsValid = valueAsMoment.isValid();
+
+      // If not valid, try a few other other standardized formats
+      if (!dateIsValid) {
+        valueAsMoment = moment(textInputValue, ALLOWED_USER_DATE_FORMATS, true);
+        dateIsValid = valueAsMoment.isValid();
+      }
+      if (dateIsValid) {
+        onChange(valueAsMoment.toISOString());
+        _this.setState({
+          textInputValue: valueAsMoment.format(_this.props.dateFormat),
+          valueAsMoment: valueAsMoment,
+          hasUnparsedText: false,
+          isTextInvalid: false
+        });
+      } else {
+        _this.setState(invalidDateState);
+      }
+    });
     var parsedValue = dateMath.parse(props.value, {
       roundUp: props.roundUp
     });
     var _valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment();
-    var textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
+    var _textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
     _this.state = {
+      hasUnparsedText: false,
       isTextInvalid: false,
-      textInputValue: textInputValue,
+      textInputValue: _textInputValue,
       valueAsMoment: _valueAsMoment
     };
     return _this;
@@ -79,17 +132,18 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        dateFormat = _this$props.dateFormat,
-        timeFormat = _this$props.timeFormat,
-        locale = _this$props.locale,
-        utcOffset = _this$props.utcOffset,
-        labelPrefix = _this$props.labelPrefix;
+      var _this$props2 = this.props,
+        dateFormat = _this$props2.dateFormat,
+        timeFormat = _this$props2.timeFormat,
+        locale = _this$props2.locale,
+        utcOffset = _this$props2.utcOffset,
+        labelPrefix = _this$props2.labelPrefix;
       var _this$state = this.state,
         valueAsMoment = _this$state.valueAsMoment,
         isTextInvalid = _this$state.isTextInvalid,
+        hasUnparsedText = _this$state.hasUnparsedText,
         textInputValue = _this$state.textInputValue;
-      return ___EmotionJSX("div", null, ___EmotionJSX(EuiDatePicker, {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDatePicker, {
         inline: true,
         showTimeSelect: true,
         shadow: false,
@@ -100,22 +154,34 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
         locale: locale,
         utcOffset: utcOffset
       }), ___EmotionJSX(EuiI18n, {
-        token: "euiAbsoluteTab.dateFormatError",
-        default: "Expected format: {dateFormat}",
+        tokens: ['euiAbsoluteTab.dateFormatHint', 'euiAbsoluteTab.dateFormatError'],
+        defaults: ['Press the Enter key to parse as a date.', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
         values: {
-          dateFormat: dateFormat
+          dateFormat: ___EmotionJSX(EuiCode, null, dateFormat)
         }
-      }, function (dateFormatError) {
+      }, function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          dateFormatHint = _ref2[0],
+          dateFormatError = _ref2[1];
         return ___EmotionJSX(EuiFormRow, {
           className: "euiSuperDatePicker__absoluteDateFormRow",
           isInvalid: isTextInvalid,
-          error: isTextInvalid ? dateFormatError : undefined
+          error: isTextInvalid ? dateFormatError : undefined,
+          helpText: hasUnparsedText ? isTextInvalid ? dateFormatHint : [dateFormatHint, dateFormatError] : undefined
         }, ___EmotionJSX(EuiFieldText, {
           compressed: true,
           isInvalid: isTextInvalid,
           value: textInputValue,
           onChange: _this2.handleTextChange,
-          "data-test-subj": 'superDatePickerAbsoluteDateInput',
+          onPaste: function onPaste(event) {
+            _this2.parseUserDateInput(event.clipboardData.getData('text'));
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === keys.ENTER) {
+              _this2.parseUserDateInput(textInputValue);
+            }
+          },
+          "data-test-subj": "superDatePickerAbsoluteDateInput",
           prepend: ___EmotionJSX(EuiFormLabel, null, labelPrefix)
         }));
       }));

package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -99,7 +99,7 @@ EuiDatePopoverButton.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   needsUpdating: PropTypes.bool,
   locale: PropTypes.any,
-  onChange: PropTypes.any.isRequired,
+  onChange: PropTypes.func.isRequired,
   onPopoverClose: PropTypes.any.isRequired,
   onPopoverToggle: PropTypes.func.isRequired,
   position: PropTypes.oneOf(["start", "end"]).isRequired,

package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -86,8 +86,7 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
     button: quickSelectButton,
     isOpen: isOpen,
     closePopover: closePopover,
-    anchorPosition: "downLeft",
-    anchorClassName: "euiQuickSelectPopover__anchor"
+    anchorPosition: "downLeft"
   }, ___EmotionJSX(EuiQuickSelectPanels, _extends({}, props, {
     applyTime: applyTime,
     prevQuickSelect: prevQuickSelect

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -489,6 +489,7 @@ EuiSuperDatePickerInternal.propTypes = {
   customQuickSelectRender: PropTypes.func,
   /**
      * Specifies the formatted used when displaying dates and/or datetimes
+     * @default 'MMM D, YYYY @ HH:mm:ss.SSS'
      */
   dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.string.isRequired]),
   /**
@@ -505,12 +506,16 @@ EuiSuperDatePickerInternal.propTypes = {
     display: PropTypes.node.isRequired
   }).isRequired]),
   isLoading: PropTypes.bool,
+  /**
+     * @default true
+     */
   isPaused: PropTypes.oneOfType([PropTypes.bool, PropTypes.bool.isRequired]),
   /**
      * Sets the overall width by adding sensible min and max widths.
      * - `auto`: fits width to internal content / time string.
      * - `restricted`: static width that fits the longest possible time string.
      * - `full`: expands to 100% of the container.
+     * @default 'restricted'
      */
   width: PropTypes.oneOf(["restricted", "full", "auto"]),
   /**
@@ -552,17 +557,20 @@ EuiSuperDatePickerInternal.propTypes = {
   }).isRequired).isRequired]),
   /**
      * Refresh interval in milliseconds
+     * @default 1000
      */
   refreshInterval: PropTypes.oneOfType([PropTypes.number, PropTypes.number.isRequired]),
   start: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired]),
   end: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired]),
   /**
      * Specifies the formatted used when displaying times
+     * @default 'HH:mm'
      */
   timeFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.string.isRequired]),
   utcOffset: PropTypes.number,
   /**
      * Set showUpdateButton to false to immediately invoke onTimeChange for all start and end changes.
+     * @default true
      */
   showUpdateButton: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["iconOnly"])]),
   /**
@@ -698,6 +706,7 @@ EuiSuperDatePicker.propTypes = {
   customQuickSelectRender: PropTypes.func,
   /**
      * Specifies the formatted used when displaying dates and/or datetimes
+     * @default 'MMM D, YYYY @ HH:mm:ss.SSS'
      */
   dateFormat: PropTypes.string,
   /**
@@ -714,12 +723,16 @@ EuiSuperDatePicker.propTypes = {
     display: PropTypes.node.isRequired
   }).isRequired]),
   isLoading: PropTypes.bool,
+  /**
+     * @default true
+     */
   isPaused: PropTypes.bool,
   /**
      * Sets the overall width by adding sensible min and max widths.
      * - `auto`: fits width to internal content / time string.
      * - `restricted`: static width that fits the longest possible time string.
      * - `full`: expands to 100% of the container.
+     * @default 'restricted'
      */
   width: PropTypes.oneOf(["restricted", "full", "auto"]),
   /**
@@ -757,17 +770,23 @@ EuiSuperDatePicker.propTypes = {
   }).isRequired),
   /**
      * Refresh interval in milliseconds
+     * @default 1000
      */
   refreshInterval: PropTypes.number,
+  /**
+     * @default 'now'
+     */
   start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]),
   end: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]),
   /**
      * Specifies the formatted used when displaying times
+     * @default 'HH:mm'
      */
   timeFormat: PropTypes.string,
   utcOffset: PropTypes.number,
   /**
      * Set showUpdateButton to false to immediately invoke onTimeChange for all start and end changes.
+     * @default true
      */
   showUpdateButton: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["iconOnly"])]),
   /**

package/es/components/facet/facet_button.js

@@ -122,7 +122,7 @@ EuiFacetButton.propTypes = {
      * Adds a notification indicator for displaying the quantity provided
      */
   quantity: PropTypes.number,
-  element: PropTypes.oneOf(["a", "button", "span", "label"]),
+  element: PropTypes.oneOf(["a", "button", "span"]),
   size: PropTypes.any,
   /**
      * Extends the button to 100% width

package/es/components/filter_group/filter_group.styles.js

@@ -28,7 +28,7 @@ export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext)
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", logicalCSS('width', '100%'), ";}}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -101,6 +101,8 @@ EuiHeaderBreadcrumbs.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Class name passed to the direct parent of the button
+         *
+         * @deprecated Use `className` instead
          */
       anchorClassName: PropTypes.string,
       /**
@@ -112,6 +114,9 @@ EuiHeaderBreadcrumbs.propTypes = {
          * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
+      /**
+         * @deprecated Use `popoverRef` instead
+         */
       buttonRef: PropTypes.any,
       /**
          * Restrict the popover's position within this element
@@ -180,11 +185,6 @@ EuiHeaderBreadcrumbs.propTypes = {
            */
         grow: PropTypes.bool,
         panelRef: PropTypes.any,
-        /**
-           * Background color of the panel;
-           * Usually a lightened form of the brand colors
-           */
-        color: PropTypes.any,
         className: PropTypes.string,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,

package/es/components/header/header_links/header_links.js

@@ -132,6 +132,8 @@ EuiHeaderLinks.propTypes = {
   popoverProps: PropTypes.shape({
     /**
        * Class name passed to the direct parent of the button
+       *
+       * @deprecated Use `className` instead
        */
     anchorClassName: PropTypes.string,
     /**
@@ -143,6 +145,9 @@ EuiHeaderLinks.propTypes = {
        * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: PropTypes.bool,
+    /**
+       * @deprecated Use `popoverRef` instead
+       */
     buttonRef: PropTypes.any,
     /**
        * Restrict the popover's position within this element
@@ -211,11 +216,6 @@ EuiHeaderLinks.propTypes = {
          */
       grow: PropTypes.bool,
       panelRef: PropTypes.any,
-      /**
-         * Background color of the panel;
-         * Usually a lightened form of the brand colors
-         */
-      color: PropTypes.any,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,

package/es/components/i18n/i18n.js

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

package/es/components/page/page_header/page_header_content.js

@@ -313,6 +313,8 @@ EuiPageHeaderContent.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Class name passed to the direct parent of the button
+         *
+         * @deprecated Use `className` instead
          */
       anchorClassName: PropTypes.string,
       /**
@@ -324,6 +326,9 @@ EuiPageHeaderContent.propTypes = {
          * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
+      /**
+         * @deprecated Use `popoverRef` instead
+         */
       buttonRef: PropTypes.any,
       /**
          * Restrict the popover's position within this element
@@ -392,11 +397,6 @@ EuiPageHeaderContent.propTypes = {
            */
         grow: PropTypes.bool,
         panelRef: PropTypes.any,
-        /**
-           * Background color of the panel;
-           * Usually a lightened form of the brand colors
-           */
-        color: PropTypes.any,
         className: PropTypes.string,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,

package/es/components/popover/input_popover.js

@@ -179,7 +179,7 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     display: display,
     button: input,
-    buttonRef: inputRef,
+    popoverRef: inputRef,
     panelRef: panelRef,
     ref: popoverClassRef,
     closePopover: closePopover,

package/es/components/popover/popover.js

@@ -1,5 +1,4 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import { css as _css } from "@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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -43,6 +42,7 @@ import classNames from 'classnames';
 import { focusable } from 'tabbable';
 import { EuiFocusTrap } from '../focus_trap';
 import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
+import { setMultipleRefs } from '../../services/hooks/useCombinedRefs';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiPortal } from '../portal';
 import { EuiMutationObserver } from '../observer/mutation_observer';
@@ -272,9 +272,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         window.addEventListener('resize', _this.positionPopoverFluid);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "buttonRef", function (node) {
+    _defineProperty(_assertThisInitialized(_this), "popoverRef", function (node) {
       _this.button = node;
-      _this.props.buttonRef && _this.props.buttonRef(node);
+      setMultipleRefs([_this.props.popoverRef, _this.props.buttonRef], node);
     });
     _this.state = {
       prevProps: {
@@ -393,12 +393,12 @@ export 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 = euiPopoverStyles();
       var popoverStyles = [styles.euiPopover, {
-        display: display
+        display: display,
+        label: display
       }];
       var classes = classNames('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className);
-      var anchorClasses = classNames('euiPopover__anchor', anchorClassName);
+      }, className, anchorClassName);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
@@ -488,29 +488,17 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX("div", _extends({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef
-        }, rest), ___EmotionJSX("div", {
-          css: /*#__PURE__*/_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 ___EmotionJSX(EuiOutsideClickDetector, {
           onOutsideClick: this.closePopover
         }, ___EmotionJSX("div", _extends({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef,
+          ref: this.popoverRef,
           onKeyDown: this.onKeyDown
-        }, rest), ___EmotionJSX("div", {
-          css: /*#__PURE__*/_css({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel));
+        }, rest), button instanceof HTMLElement ? null : button, panel));
       }
     }
   }], [{
@@ -549,6 +537,8 @@ _defineProperty(EuiPopover, "defaultProps", {
 EuiPopover.propTypes = {
   /**
      * Class name passed to the direct parent of the button
+     *
+     * @deprecated Use `className` instead
      */
   anchorClassName: PropTypes.string,
   /**
@@ -564,6 +554,9 @@ EuiPopover.propTypes = {
      * Triggering element for which to align the popover to
      */
   button: PropTypes.any.isRequired,
+  /**
+     * @deprecated Use `popoverRef` instead
+     */
   buttonRef: PropTypes.any,
   /**
      * Callback to handle hiding of the popover
@@ -640,11 +633,6 @@ EuiPopover.propTypes = {
        */
     grow: PropTypes.bool,
     panelRef: PropTypes.any,
-    /**
-       * Background color of the panel;
-       * Usually a lightened form of the brand colors
-       */
-    color: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

package/es/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -7,13 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBackgroundColor, logicals, logicalSizeCSS } from '../../../global_styling';
+import { logicals, logicalSizeCSS } from '../../../global_styling';
 export var popoverArrowSize = 'm';
 export var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-
-  // Match the background color of panels
-  var borderColor = euiBackgroundColor(euiThemeContext, 'plain');
+  var borderColor = 'var(--euiPopoverBackgroundColor)';
   var arrowSize = euiTheme.size[popoverArrowSize];
   return {
     // Base

package/es/components/popover/popover_panel/_popover_panel.js

@@ -37,7 +37,8 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
   var euiThemeContext = useEuiTheme();
   var cssStyles = useMemo(function () {
     var styles = 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]]);
     }
@@ -72,11 +73,6 @@ EuiPopoverPanel.propTypes = {
      */
   grow: PropTypes.bool,
   panelRef: PropTypes.any,
-  /**
-     * Background color of the panel;
-     * Usually a lightened form of the brand colors
-     */
-  color: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
+import { tint } from '../../../services';
 import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
 export var openAnimationTiming = 'slow';
 
@@ -17,6 +18,7 @@ export 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
  */
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "j5y6yx-isOpen",
@@ -37,8 +39,11 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
+    /* 4 */
+    light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
+    dark: /*#__PURE__*/css("--euiPopoverBackgroundColor:", 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: {