@elastic/eui 90.0.0 → 91.1.0

package/lib/components/popover/popover.js

@@ -8,13 +8,13 @@ exports.EuiPopover = void 0;
 exports.getPopoverAlignFromAnchorPosition = getPopoverAlignFromAnchorPosition;
 exports.getPopoverPositionFromAnchorPosition = getPopoverPositionFromAnchorPosition;
 exports.popoverAnchorPosition = void 0;
-var _react = require("@emotion/react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-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");
@@ -24,6 +24,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; }
@@ -222,9 +223,12 @@ 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,
@@ -281,9 +285,9 @@ 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);
+      (0, _useCombinedRefs.setMultipleRefs)([_this.props.popoverRef, _this.props.buttonRef], node);
     });
     _this.state = {
       prevProps: {
@@ -402,12 +406,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)) {
@@ -431,17 +435,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, _extends({
+        }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
           clickOutsideDisables: true,
           onClickOutside: this.onClickOutside,
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
@@ -449,7 +453,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, _extends({}, panelProps, {
+        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, _extends({}, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,
@@ -469,10 +473,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
@@ -485,7 +489,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
 
           onMutation: this.onMutation
         }, function (mutationRef) {
-          return (0, _react.jsx)("div", {
+          return (0, _react2.jsx)("div", {
             ref: mutationRef
           }, children);
         }))));
@@ -494,32 +498,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", _extends({
+        return (0, _react2.jsx)("div", _extends({
           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", _extends({
+        }, (0, _react2.jsx)("div", _extends({
           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));
       }
     }
   }], [{
@@ -545,7 +537,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
     }
   }]);
   return EuiPopover;
-}(_react2.Component);
+}(_react.Component);
 exports.EuiPopover = EuiPopover;
 _defineProperty(EuiPopover, "defaultProps", {
   isOpen: false,
@@ -559,6 +551,8 @@ _defineProperty(EuiPopover, "defaultProps", {
 EuiPopover.propTypes = {
   /**
      * Class name passed to the direct parent of the button
+     *
+     * @deprecated Use `className` instead
      */
   anchorClassName: _propTypes.default.string,
   /**
@@ -574,6 +568,9 @@ EuiPopover.propTypes = {
      * Triggering element for which to align the popover to
      */
   button: _propTypes.default.any.isRequired,
+  /**
+     * @deprecated Use `popoverRef` instead
+     */
   buttonRef: _propTypes.default.any,
   /**
      * Callback to handle hiding of the popover

package/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/lib/components/popover/popover_panel/_popover_panel.js

@@ -47,7 +47,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/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/lib/components/resizable_container/resizable_container.a11y.js

@@ -52,22 +52,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();
     });
@@ -102,8 +99,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/lib/components/search_bar/search_bar.a11y.js

@@ -183,8 +183,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);
@@ -196,8 +195,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();
@@ -208,8 +206,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/lib/components/selectable/selectable.js

@@ -631,7 +631,22 @@ EuiSelectable.propTypes = {
        * Option data to pass through to the `renderOptions` element.
        * Bypass `EuiSelectableItem` and avoid DOM attribute warnings.
        */
-    data: _propTypes.default.shape({})
+    data: _propTypes.default.shape({}),
+    /**
+       * How to handle long text within the item.
+       * Wrapping only works if `isVirtualization` is false.
+       * @default 'truncate'
+       */
+    textWrap: _propTypes.default.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.default.any
   }).isRequired).isRequired,
   /**
        * Passes back the altered `options` array with selected options having `checked: 'on'`.