@elastic/eui 90.0.0 → 91.1.0

package/es/components/notification/notification_event.js

@@ -227,10 +227,10 @@ EuiNotificationEvent.propTypes = {
     type: PropTypes.oneOf(["button", "submit"]),
     buttonRef: PropTypes.any,
     /**
-       * Object of props passed to the <span/> wrapping the button's content
+       * Object of props passed to the `<span>` wrapping the button's content
        */
     /**
-       * Object of props passed to the <span/> wrapping the button's content
+       * Object of props passed to the `<span>` wrapping the button's content
        */
     contentProps: PropTypes.shape({
       className: PropTypes.string,
@@ -247,16 +247,18 @@ EuiNotificationEvent.propTypes = {
        */
     iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
     /**
-       * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+       * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
+       *
+       * This span wrapper can be removed by passing `textProps={false}`.
        */
-    textProps: PropTypes.shape({
+    textProps: PropTypes.oneOfType([PropTypes.shape({
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any,
       ref: PropTypes.any,
       "data-text": PropTypes.string
-    }),
+    }).isRequired, PropTypes.oneOf([false])]),
     iconSize: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,

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/pagination/pagination_button.js

@@ -111,10 +111,10 @@ EuiPaginationButton.propTypes = {
   type: PropTypes.oneOf(["button", "submit"]),
   buttonRef: PropTypes.any,
   /**
-     * Object of props passed to the <span/> wrapping the button's content
+     * Object of props passed to the `<span>` wrapping the button's content
      */
   /**
-     * Object of props passed to the <span/> wrapping the button's content
+     * Object of props passed to the `<span>` wrapping the button's content
      */
   contentProps: PropTypes.shape({
     className: PropTypes.string,
@@ -131,16 +131,18 @@ EuiPaginationButton.propTypes = {
      */
   iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
+     *
+     * This span wrapper can be removed by passing `textProps={false}`.
      */
-  textProps: PropTypes.shape({
+  textProps: PropTypes.oneOfType([PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any,
     ref: PropTypes.any,
     "data-text": PropTypes.string
-  }),
+  }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
   className: PropTypes.string,
   "aria-label": 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';
@@ -213,9 +213,12 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           anchor: _this.button,
           popover: _this.panel,
           offset: _this.props.attachToAnchor ? offset : _this.props.hasArrow ? 16 + offset : 8 + offset,
-          arrowConfig: {
+          arrowConfig: _this.props.hasArrow ? {
             arrowWidth: 24,
             arrowBuffer: 10
+          } : {
+            arrowWidth: 0,
+            arrowBuffer: 0
           },
           returnBoundingBox: _this.props.attachToAnchor,
           allowCrossAxis: _this.props.repositionToCrossAxis,
@@ -272,9 +275,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 +396,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 +491,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 +540,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 +557,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 +636,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: {

package/es/components/resizable_container/resizable_container.a11y.js

@@ -49,22 +49,19 @@ describe('Horizontal EuiResizableContainer', function () {
   });
   describe('Keyboard accessibility check', function () {
     it('has zero violations when first panel is scrolled vertically', function () {
-      cy.realPress('Tab');
-      cy.get('div.euiPanel').first().should('have.focus');
+      cy.get('div.euiPanel').first().focus();
       cy.realPress('End');
       cy.get('a[data-test-subj="hello-world-link"]').should('be.visible');
       cy.checkAxe();
     });
     it('has zero violations when second panel is scrolled vertically', function () {
-      cy.repeatRealPress('Tab', 4);
-      cy.get('div.euiPanel').last().should('have.focus');
+      cy.get('div.euiPanel').last().focus();
       cy.realPress('End');
       cy.realPress('Home');
       cy.checkAxe();
     });
     it('has zero violations when the horizontal panels are resized', function () {
-      cy.repeatRealPress('Tab', 3);
-      cy.get('button.euiResizableButton').should('have.focus');
+      cy.get('button.euiResizableButton').focus();
       cy.repeatRealPress('ArrowRight', 10);
       cy.checkAxe();
     });
@@ -99,8 +96,7 @@ describe('Vertical EuiResizableContainer', function () {
       cy.checkAxe();
     });
     it('has zero violations when the vertical panels are resized', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button.euiResizableButton').should('have.focus');
+      cy.get('button.euiResizableButton').focus();
       cy.repeatRealPress('ArrowDown', 10);
       cy.checkAxe();
     });

package/es/components/search_bar/search_bar.a11y.js

@@ -177,8 +177,7 @@ describe('EuiSearchBar', function () {
   });
   describe('Keyboard accessibility', function () {
     it('has zero violations after a full-text search', function () {
-      cy.realPress('Tab');
-      cy.get('input[type="search"]').should('have.focus');
+      cy.get('input[type="search"]').focus();
       cy.get('input[type="search"]').type('watch');
       cy.realPress('Enter');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 1);
@@ -190,8 +189,7 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering on Open items', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button.euiButtonEmpty').first().should('have.focus');
+      cy.get('button.euiButtonEmpty').first().focus();
       cy.realPress('Enter');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 3);
       cy.checkAxe();
@@ -202,8 +200,7 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering by Tags', function () {
-      cy.repeatRealPress('Tab', 4);
-      cy.get('button.euiButtonEmpty').last().should('have.focus');
+      cy.get('button.euiButtonEmpty').last().focus();
       cy.realPress('Enter');
       cy.realPress('Tab');
       cy.realPress('ArrowDown');

package/es/components/selectable/selectable.js

@@ -625,7 +625,22 @@ EuiSelectable.propTypes = {
        * Option data to pass through to the `renderOptions` element.
        * Bypass `EuiSelectableItem` and avoid DOM attribute warnings.
        */
-    data: PropTypes.shape({})
+    data: PropTypes.shape({}),
+    /**
+       * How to handle long text within the item.
+       * Wrapping only works if `isVirtualization` is false.
+       * @default 'truncate'
+       */
+    textWrap: PropTypes.oneOf(["truncate", "wrap"]),
+    /**
+       * If textWrap is set to `truncate`, you can pass a custom truncation configuration
+       * that accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop except for
+       * `text` and `children`.
+       *
+       * Note: when searching, custom truncation props are ignored. The highlighted search
+       * text will always take precedence.
+       */
+    truncationProps: PropTypes.any
   }).isRequired).isRequired,
   /**
        * Passes back the altered `options` array with selected options having `checked: 'on'`.