@elastic/eui 86.0.0 → 87.1.0

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

@@ -80,13 +80,173 @@ EuiHeaderBreadcrumbs.propTypes = {
          */
     truncate: PropTypes.bool,
     /**
-         * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`)
+         * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
          */
     color: PropTypes.any,
     /**
          * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
          */
-    "aria-current": PropTypes.any
+    "aria-current": PropTypes.any,
+    /**
+         * Creates a breadcrumb that toggles a popover dialog
+         *
+         * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
+         * click behavior should only trigger a popover.
+         */
+    popoverContent: PropTypes.node,
+    /**
+         * Allows customizing the popover if necessary. Accepts any props that
+         * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
+         */
+    popoverProps: PropTypes.shape({
+      /**
+         * Class name passed to the direct parent of the button
+         */
+      anchorClassName: PropTypes.string,
+      /**
+         * Alignment of the popover and arrow relative to the button
+         */
+      anchorPosition: PropTypes.any,
+      /**
+         * Style and position alteration for arrow-less attachment.
+         * Intended for use with inputs as anchors, e.g. EuiInputPopover
+         */
+      attachToAnchor: PropTypes.bool,
+      buttonRef: PropTypes.any,
+      /**
+         * Restrict the popover's position within this element
+         */
+      container: PropTypes.any,
+      /**
+         * CSS display type for both the popover and anchor
+         */
+      display: PropTypes.any,
+      /**
+         * Object of props passed to EuiFocusTrap
+         */
+      focusTrapProps: PropTypes.any,
+      /**
+         * Show arrow indicating to originating button
+         */
+      hasArrow: PropTypes.bool,
+      /**
+         * Specifies what element should initially have focus; Can be a DOM
+         * node, or a selector string (which will be passed to
+         * document.querySelector() to find the DOM node), or a function that
+         * returns a DOM node.
+         *
+         * If not passed, initial focus defaults to the popover panel.
+         */
+      initialFocus: PropTypes.any,
+      /**
+         * Passed directly to EuiPortal for DOM positioning. Both properties are
+         * required if prop is specified
+         */
+      insert: PropTypes.shape({
+        sibling: PropTypes.any.isRequired,
+        position: PropTypes.oneOf(["before", "after"]).isRequired
+      }),
+      /**
+         * Traps tab focus within the popover contents
+         */
+      ownFocus: PropTypes.bool,
+      /**
+         * Custom class added to the EuiPanel containing the popover contents
+         */
+      panelClassName: PropTypes.string,
+      /**
+         * EuiPanel padding on all sides
+         */
+      panelPaddingSize: PropTypes.any,
+      /**
+         * Standard DOM `style` attribute. Passed to the EuiPanel
+         */
+      panelStyle: PropTypes.any,
+      /**
+         * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+         */
+      panelProps: PropTypes.shape({
+        element: PropTypes.oneOf(["div"]),
+        /**
+           * Padding for all four sides
+           */
+        paddingSize: PropTypes.any,
+        /**
+           * Corner border radius
+           */
+        borderRadius: PropTypes.any,
+        /**
+           * When true the panel will grow in height to match `EuiFlexItem`
+           */
+        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,
+        css: PropTypes.any
+      }),
+      panelRef: PropTypes.any,
+      /**
+         * Optional screen reader instructions to announce upon popover open,
+         * in addition to EUI's default popover instructions for Escape on close.
+         * Useful for popovers that may have additional keyboard capabilities such as
+         * arrow navigation.
+         */
+      popoverScreenReaderText: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),
+      popoverRef: PropTypes.any,
+      /**
+         * When `true`, the popover's position is re-calculated when the user
+         * scrolls, this supports having fixed-position popover anchors. When nesting
+         * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
+         */
+      repositionOnScroll: PropTypes.bool,
+      /**
+         * Must be set to true if using `EuiDragDropContext` within a popover,
+         * otherwise your nested drag & drop will have incorrect positioning
+         */
+      hasDragDrop: PropTypes.bool,
+      /**
+         * By default, popover content inherits the z-index of the anchor
+         * component; pass `zIndex` to override
+         */
+      zIndex: PropTypes.number,
+      /**
+         * Distance away from the anchor that the popover will render
+         */
+      offset: PropTypes.number,
+      /**
+         * Minimum distance between the popover and the bounding container;
+         * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
+         * Default is 16
+         */
+      buffer: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.any.isRequired]),
+      /**
+         * Element to pass as the child element of the arrow;
+         * Use case is typically limited to an accompanying `EuiBeacon`
+         */
+      arrowChildren: PropTypes.node,
+      /**
+         * Provide a name to the popover panel
+         */
+      "aria-label": PropTypes.string,
+      /**
+         * Alternative option to `aria-label` that takes an `id`.
+         * Usually takes the `id` of the popover title
+         */
+      "aria-labelledby": PropTypes.string,
+      /**
+         * Function callback for when the popover positon changes
+         */
+      onPositionChange: PropTypes.func,
+      className: PropTypes.string,
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
+    })
   }).isRequired).isRequired,
   /**
      * Determines breadcrumbs appearance, with `page` being the default styling.

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

@@ -20,20 +20,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../../common';
+import { useEuiTheme } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
 import { EuiHeaderSectionItemButton } from '../header_section';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
+import { euiHeaderLinksStyles } from './header_links.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var gutterSizeToClassNameMap = {
-  xs: '--gutterXS',
-  s: '--gutterS',
-  m: '--gutterM',
-  l: '--gutterL'
-};
-export var GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+export var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
 export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -44,6 +39,8 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     popoverButtonProps = _ref.popoverButtonProps,
     popoverProps = _ref.popoverProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderLinksStyles(euiTheme);
   var _ref2 = popoverButtonProps || {},
     onClick = _ref2.onClick,
     _ref2$iconType = _ref2.iconType,
@@ -67,7 +64,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     return function () {
       window.removeEventListener('resize', closeMenu);
     };
-  });
+  }, [closeMenu]);
   var classes = classNames('euiHeaderLinks', className);
   var button = ___EmotionJSX(EuiI18n, {
     token: "euiHeaderLinks.openNavigationMenu",
@@ -87,11 +84,13 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   }, function (appNavigation) {
     return ___EmotionJSX("nav", _extends({
       className: classes,
+      css: styles.euiHeaderLinks,
       "aria-label": appNavigation
     }, rest), ___EmotionJSX(EuiHideFor, {
       sizes: popoverBreakpoints
     }, ___EmotionJSX("div", {
-      className: classNames('euiHeaderLinks__list', ["euiHeaderLinks__list".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__list",
+      css: [styles.euiHeaderLinks__list, styles.gutterSizes[gutterSize], ";label:EuiHeaderLinks;"]
     }, children)), ___EmotionJSX(EuiShowFor, {
       sizes: popoverBreakpoints
     }, ___EmotionJSX(EuiPopover, _extends({
@@ -102,7 +101,8 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       panelPaddingSize: "none",
       repositionOnScroll: true
     }, popoverProps), ___EmotionJSX("div", {
-      className: classNames('euiHeaderLinks__mobileList', ["euiHeaderLinks__mobileList".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__mobileList",
+      css: styles.euiHeaderLinks__mobileList
     }, children))));
   });
 };
@@ -114,7 +114,7 @@ EuiHeaderLinks.propTypes = {
   /**
        * Spacing between direct children
        */
-  gutterSize: PropTypes.oneOf(["xs", "s", "m", "l"]),
+  gutterSize: PropTypes.any,
   /**
        * A list of named breakpoints at which to show the popover version
        */
@@ -139,9 +139,8 @@ EuiHeaderLinks.propTypes = {
        */
     anchorPosition: PropTypes.any,
     /**
-       * Style and position alteration for arrow-less, left-aligned
-       * attachment. Intended for use with inputs as anchors, e.g.
-       * EuiInputPopover
+       * Style and position alteration for arrow-less attachment.
+       * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: PropTypes.bool,
     buttonRef: PropTypes.any,
@@ -178,10 +177,6 @@ EuiHeaderLinks.propTypes = {
       sibling: PropTypes.any.isRequired,
       position: PropTypes.oneOf(["before", "after"]).isRequired
     }),
-    /**
-       * Visibility state of the popover
-       */
-    isOpen: PropTypes.bool,
     /**
        * Traps tab focus within the popover contents
        */

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

@@ -0,0 +1,41 @@
+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
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ta3k6d-euiHeaderLinks__list",
+  styles: "white-space:nowrap;display:flex;align-items:center;label:euiHeaderLinks__list;"
+} : {
+  name: "1ta3k6d-euiHeaderLinks__list",
+  styles: "white-space:nowrap;display:flex;align-items:center;label:euiHeaderLinks__list;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "wu4i6o-euiHeaderLinks",
+  styles: "display:flex;label:euiHeaderLinks;"
+} : {
+  name: "wu4i6o-euiHeaderLinks",
+  styles: "display:flex;label:euiHeaderLinks;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    euiHeaderLinks: _ref2,
+    euiHeaderLinks__list: _ref,
+    gutterSizes: {
+      xs: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:xs;"),
+      s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
+      m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
+      l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;")
+    },
+    euiHeaderLinks__mobileList: /*#__PURE__*/css(".euiHeaderLink{display:block;", logicalCSS('width', '100%'), " padding:", euiTheme.size.s, ";&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
+  };
+};

package/es/components/header/header_section/header_section.js

@@ -13,25 +13,21 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { euiHeaderSectionStyles } from './header_section.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var sideToClassNameMap = {
-  left: 'euiHeaderSection--left',
-  right: 'euiHeaderSection--right'
-};
 export var EuiHeaderSection = function EuiHeaderSection(_ref) {
-  var _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'left' : _ref$side,
+  var side = _ref.side,
     children = _ref.children,
     className = _ref.className,
     _ref$grow = _ref.grow,
     grow = _ref$grow === void 0 ? false : _ref$grow,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiHeaderSection', {
-    'euiHeaderSection--grow': grow,
-    'euiHeaderSection--dontGrow': !grow
-  }, sideToClassNameMap[side], className);
+  var styles = euiHeaderSectionStyles();
+  var cssStyles = [styles.euiHeaderSection, grow && styles.grow, side && styles[side]];
+  var classes = classNames('euiHeaderSection', className);
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 EuiHeaderSection.propTypes = {

package/es/components/header/header_section/header_section.styles.js

@@ -0,0 +1,38 @@
+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
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "122lw0e-grow",
+  styles: "flex-grow:1;label:grow;"
+} : {
+  name: "122lw0e-grow",
+  styles: "flex-grow:1;label:grow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1gl6paa-euiHeaderSection",
+  styles: "display:flex;flex-grow:0;flex-shrink:0;label:euiHeaderSection;"
+} : {
+  name: "1gl6paa-euiHeaderSection",
+  styles: "display:flex;flex-grow:0;flex-shrink:0;label:euiHeaderSection;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderSectionStyles = function euiHeaderSectionStyles() {
+  return {
+    euiHeaderSection: _ref2,
+    grow: _ref,
+    // By default, EuiHeader uses `justify-content: space-between`, which means
+    // sections are left-aligned by default (even when alone) with no extra CSS needed
+    left: /*#__PURE__*/css(";label:left;"),
+    // @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins
+    right: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), ";;label:right;")
+  };
+};

package/es/components/header/header_section/header_section_item.js

@@ -1,4 +1,4 @@
-var _excluded = ["border", "children", "className"];
+var _excluded = ["children", "className"];
 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; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -13,23 +13,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
+import { euiHeaderSectionItemStyles } from './header_section_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var borderToClassNameMap = {
-  left: 'euiHeaderSectionItem--borderLeft',
-  right: 'euiHeaderSectionItem--borderRight',
-  none: undefined
-};
+/**
+ * Header items are small icon links that pop up menus
+ */
 export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
-  var _ref$border = _ref.border,
-    border = _ref$border === void 0 ? 'left' : _ref$border,
-    children = _ref.children,
+  var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderSectionItemStyles(euiTheme);
+  var classes = classNames('euiHeaderSectionItem', className);
 
   // we check if there is any children and if not, we don't render anything
   return children ? ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: styles.euiHeaderSectionItem
   }, rest), children) : null;
 };
 EuiHeaderSectionItem.propTypes = {
@@ -37,11 +38,6 @@ EuiHeaderSectionItem.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  /**
-     * Side to display a short border on.
-     * Not supported in Amsterdam theme.
-     */
-  border: PropTypes.oneOf(["left", "right", "none"]),
   /**
      * ReactNode to render as this component's content
      */

package/es/components/header/header_section/header_section_item.styles.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, euiMaxBreakpoint } from '../../../global_styling';
+export var euiHeaderSectionItemStyles = function euiHeaderSectionItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderSectionItem: /*#__PURE__*/css("position:relative;display:flex;align-items:center;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', euiTheme.size.xl), ";};label:euiHeaderSectionItem;")
+  };
+};

package/es/components/header/header_section/header_section_item_button.js

@@ -13,10 +13,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiNotificationBadge } from '../../badge/notification_badge/badge_notification';
 import { EuiIcon } from '../../icon';
 import { EuiButtonEmpty } from '../../button';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
+import { euiHeaderSectionItemButtonStyles } from './header_section_item_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderSectionItemButton = /*#__PURE__*/forwardRef(function (_ref,
 /**
@@ -137,10 +139,12 @@ ref) {
     };
     return buttonRef.current;
   }, []);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderSectionItemButtonStyles(euiTheme);
   var classes = classNames('euiHeaderSectionItemButton', className);
-  var animationClasses = classNames(['euiHeaderSectionItemButton__content']);
   var notificationDot = ___EmotionJSX(EuiIcon, {
     className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot",
+    css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.dot, ";label:notificationDot;"],
     color: notificationColor,
     type: "dot",
     size: "l"
@@ -153,6 +157,7 @@ ref) {
       sizes: ['xs']
     }, ___EmotionJSX(EuiNotificationBadge, {
       className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
+      css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.badge, ";label:buttonNotification;"],
       color: notificationColor
     }, notification)), ___EmotionJSX(EuiShowFor, {
       sizes: ['xs']
@@ -160,11 +165,13 @@ ref) {
   }
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
+    css: styles.euiHeaderSectionItemButton,
     color: "text",
     buttonRef: buttonRef
   }, rest), ___EmotionJSX("span", {
     ref: animationTargetRef,
-    className: animationClasses
+    className: "euiHeaderSectionItemButton__content",
+    css: styles.euiHeaderSectionItemButton__content
   }, children), buttonNotification);
 });
 EuiHeaderSectionItemButton.propTypes = {

package/es/components/header/header_section/header_section_item_button.styles.js

@@ -0,0 +1,44 @@
+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
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, mathWithUnits, euiMaxBreakpoint } from '../../../global_styling';
+import { euiHeaderVariables } from '../header.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "k09eot-euiHeaderSectionItemButton__notification",
+  styles: "position:absolute;label:euiHeaderSectionItemButton__notification;"
+} : {
+  name: "k09eot-euiHeaderSectionItemButton__notification",
+  styles: "position:absolute;label:euiHeaderSectionItemButton__notification;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1f67s81-euiHeaderSectionItemButton__content",
+  styles: "display:inline-block;label:euiHeaderSectionItemButton__content;"
+} : {
+  name: "1f67s81-euiHeaderSectionItemButton__content",
+  styles: "display:inline-block;label:euiHeaderSectionItemButton__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderSectionItemButtonStyles = function euiHeaderSectionItemButtonStyles(euiThemeContext) {
+  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
+    childHeight = _euiHeaderVariables.childHeight;
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderSectionItemButton: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " ", logicalCSS('min-width', childHeight), " text-align:center;font-size:0;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', mathWithUnits(childHeight, function (x) {
+      return x * 0.75;
+    })), ";};label:euiHeaderSectionItemButton;"),
+    euiHeaderSectionItemButton__content: _ref2,
+    notification: {
+      euiHeaderSectionItemButton__notification: _ref,
+      dot: /*#__PURE__*/css(logicalCSS('top', 0), " ", logicalCSS('right', 0), " stroke:", euiTheme.colors.emptyShade, ";", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalSizeCSS(euiTheme.size.base), " ", logicalCSS('top', '9%'), ";};label:dot;"),
+      badge: /*#__PURE__*/css(logicalCSS('top', '9%'), " ", logicalCSS('right', '9%'), " box-shadow:0 0 0 ", euiTheme.border.width.thin, " ", euiTheme.colors.emptyShade, ";;label:badge;")
+    }
+  };
+};

package/es/components/list_group/list_group.js

@@ -227,7 +227,12 @@ EuiListGroup.propTypes = {
          * Text to be displayed in the tooltip when `showToolTip` is true.
          * By default the text will be same as the label text.
          */
-    toolTipText: PropTypes.string
+    toolTipText: PropTypes.string,
+    /**
+         * Allows customizing the tooltip shown when `showToolTip` is true.
+         * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+         */
+    toolTipProps: PropTypes.any
   }).isRequired),
   /**
        * Change the colors of all `listItems` at once

package/es/components/list_group/list_group_item.js

@@ -1,5 +1,11 @@
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
+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); }
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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); }
@@ -55,6 +61,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     wrapText = _ref.wrapText,
     buttonRef = _ref.buttonRef,
     toolTipText = _ref.toolTipText,
+    toolTipProps = _ref.toolTipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isClickable = !!(href || onClick);
   var isHrefValid = !href || validateHref(href);
@@ -156,20 +163,24 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
   var cssStyles = [styles.euiListGroupItem, !isDisabled && isActive && styles.colors.isActive[color], !isDisabled && isClickable && styles.colors.isClickable[color], styles[size], customCss];
   var classes = classNames('euiListGroupItem', className);
   if (showToolTip) {
+    var _toolTipProps$anchorP;
     var tooltipStyles = euiListGroupItemTooltipStyles();
-    var cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip];
+    var cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip, toolTipProps === null || toolTipProps === void 0 ? void 0 : (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css];
+    var anchorClasses = classNames('euiListGroupItem__tooltip', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
+    var anchorPropsAndCss = _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
+      css: cssTooltipStyles
+    });
     itemContent = ___EmotionJSX("li", {
       className: classes,
       css: cssStyles
-    }, ___EmotionJSX(EuiToolTip, {
-      anchorClassName: "euiListGroupItem__tooltip",
-      anchorProps: {
-        css: cssTooltipStyles
-      },
+    }, ___EmotionJSX(EuiToolTip, _extends({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
-    }, itemContent));
+    }, toolTipProps, {
+      anchorClassName: anchorClasses,
+      anchorProps: anchorPropsAndCss
+    }), itemContent));
   } else {
     itemContent = ___EmotionJSX("li", {
       className: classes,
@@ -295,5 +306,10 @@ EuiListGroupItem.propTypes = {
        * Text to be displayed in the tooltip when `showToolTip` is true.
        * By default the text will be same as the label text.
        */
-  toolTipText: PropTypes.string
+  toolTipText: PropTypes.string,
+  /**
+       * Allows customizing the tooltip shown when `showToolTip` is true.
+       * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+       */
+  toolTipProps: PropTypes.any
 };