@elastic/eui 65.0.0 → 66.0.0

package/es/services/theme/hooks.js

@@ -7,18 +7,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useMemo } from 'react';
 import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
   var modifications = useContext(EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = useMemo(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 // Provide the component props interface as the generic to allow the docs props table to populate.
 // e.g., `const EuiComponent = withEuiTheme<EuiComponentProps>(_EuiComponent)`
@@ -26,17 +29,9 @@ export var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return ___EmotionJSX(Component, _extends({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/eui.d.ts

@@ -9471,7 +9471,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    areAllOptionsSelected: () => boolean;
 	    onComboBoxFocus: FocusEventHandler<HTMLInputElement>;
 	    setCustomOptions: (isContainerBlur: boolean) => void;
-	    onContainerBlur: EventListener;
+	    onContainerBlur: FocusEventHandler<HTMLDivElement>;
 	    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
 	    onOptionEnterKey: OptionHandler<T>;
 	    onOptionClick: OptionHandler<T>;
@@ -9970,6 +9970,11 @@ declare module '@elastic/eui/src/components/list_group/list_group_item' {
 	     * instances where the item content is rendered as a `button`
 	     */
 	    buttonRef?: React.Ref<HTMLButtonElement>;
+	    /**
+	     * Text to be displayed in the tooltip when `showToolTip` is true.
+	     * By default the text will be same as the label text.
+	     */
+	    toolTipText?: string;
 	};
 	export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps>;
 	export {};
@@ -12268,7 +12273,7 @@ declare module '@elastic/eui/src/components/tabs/tabs' {
 
 }
 declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content' {
-	import { Component, HTMLAttributes, ReactNode } from 'react';
+	import { Component, HTMLAttributes, ReactNode, FocusEvent } from 'react';
 	import { EuiTabsSizes } from '@elastic/eui/src/components/tabs/tabs';
 	import { EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 	import { CommonProps } from '@elastic/eui/src/components/common';
@@ -12320,11 +12325,9 @@ declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content'
 	    private readonly rootId;
 	    private readonly tabsRef;
 	    constructor(props: EuiTabbedContentProps);
-	    componentDidMount(): void;
-	    componentWillUnmount(): void;
 	    focusTab: () => void;
 	    initializeFocus: () => void;
-	    removeFocus: (blurEvent: FocusEvent) => void;
+	    removeFocus: (blurEvent: FocusEvent<HTMLDivElement>) => void;
 	    onTabClick: (selectedTab: EuiTabbedContentTab) => void;
 	    render(): JSX.Element;
 	}
@@ -13226,6 +13229,10 @@ declare module '@elastic/eui/src/components/description_list/description_list_ty
 	     * Props object to be passed to `EuiDescriptionListDescription`
 	     */
 	    descriptionProps?: HTMLAttributes<HTMLElement> & CommonProps;
+	    /**
+	     * Vertical spacing added between `EuiDescriptionList` elements
+	     */
+	    gutterSize?: EuiDescriptionListGutterSizes;
 	}
 	export const TYPES: readonly ["row", "inline", "column", "responsiveColumn"];
 	export type EuiDescriptionListType = typeof TYPES[number];
@@ -13233,6 +13240,8 @@ declare module '@elastic/eui/src/components/description_list/description_list_ty
 	export type EuiDescriptionListAlignment = typeof ALIGNMENTS[number];
 	export const TEXT_STYLES: readonly ["normal", "reverse"];
 	export type EuiDescriptionListTextStyle = typeof TEXT_STYLES[number];
+	export const GUTTER_SIZES: readonly ["s", "m"];
+	export type EuiDescriptionListGutterSizes = typeof GUTTER_SIZES[number];
 
 }
 declare module '@elastic/eui/src/components/description_list/description_list_title.styles' {
@@ -13253,12 +13262,14 @@ declare module '@elastic/eui/src/components/description_list/description_list_ti
 	        compressed: import("@emotion/utils").SerializedStyles;
 	    };
 	    right: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
 	};
 
 }
 declare module '@elastic/eui/src/components/description_list/description_list_context' {
 	
-	import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types'; type EuiDescriptionListContextValues = Required<Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align'>> & {
+	import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types'; type EuiDescriptionListContextValues = Required<Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align' | 'gutterSize'>> & {
 	    compressed?: EuiDescriptionListProps['compressed'];
 	};
 	export const contextDefaults: EuiDescriptionListContextValues;
@@ -13292,6 +13303,8 @@ declare module '@elastic/eui/src/components/description_list/description_list_de
 	        normal: import("@emotion/utils").SerializedStyles;
 	    };
 	    left: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -18076,9 +18089,8 @@ declare module '@elastic/eui/src/components/table/table_row_cell' {
 	     */
 	    showOnHover?: boolean;
 	    /**
-	     * Setting `textOnly` to `false` will break words unnecessarily on FF and
-	     * IE.  To combat this problem on FF, wrap contents with the css utility
-	     * `.eui-textBreakWord`.
+	     * Creates a text wrapper around cell content that helps word break or truncate
+	     * long text correctly.
 	     */
 	    textOnly?: boolean;
 	    /**
@@ -18512,6 +18524,10 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	     */
 	    sortable?: boolean | ((item: T) => Primitive);
 	    isExpander?: boolean;
+	    /**
+	     * Creates a text wrapper around cell content that helps word break or truncate
+	     * long text correctly.
+	     */
 	    textOnly?: boolean;
 	    /**
 	     * Defines the horizontal alignment of the column
@@ -18818,7 +18834,10 @@ declare module '@elastic/eui/src/components/basic_table/basic_table' {
 	     */
 	    tableLayout?: 'fixed' | 'auto';
 	    /**
-	     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+	     * Applied to table cells. Any cell using a render function will set this to be false.
+	     *
+	     * Creates a text wrapper around cell content that helps word break or truncate
+	     * long text correctly.
 	     */
 	    textOnly?: boolean;
 	} type BasicTableWithPaginationProps<T> = Omit<BasicTableProps<T>, 'pagination' | 'onChange'> & {

package/i18ntokens.json

@@ -21,11 +21,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 309,
+        "line": 312,
         "column": 6
       },
       "end": {
-        "line": 309,
+        "line": 312,
         "column": 79
       }
     },
@@ -37,11 +37,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 671,
+        "line": 674,
         "column": 10
       },
       "end": {
-        "line": 675,
+        "line": 678,
         "column": 12
       }
     },
@@ -53,11 +53,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 684,
+        "line": 687,
         "column": 12
       },
       "end": {
-        "line": 688,
+        "line": 691,
         "column": 14
       }
     },
@@ -69,11 +69,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 692,
+        "line": 695,
         "column": 12
       },
       "end": {
-        "line": 696,
+        "line": 699,
         "column": 14
       }
     },
@@ -85,11 +85,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 701,
+        "line": 704,
         "column": 10
       },
       "end": {
-        "line": 705,
+        "line": 708,
         "column": 12
       }
     },
@@ -101,11 +101,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 747,
+        "line": 750,
         "column": 6
       },
       "end": {
-        "line": 747,
+        "line": 750,
         "column": 77
       }
     },
@@ -117,11 +117,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1140,
+        "line": 1143,
         "column": 8
       },
       "end": {
-        "line": 1140,
+        "line": 1143,
         "column": 79
       }
     },
@@ -133,11 +133,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1360,
+        "line": 1363,
         "column": 8
       },
       "end": {
-        "line": 1364,
+        "line": 1367,
         "column": 9
       }
     },
@@ -773,11 +773,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 992,
+        "line": 968,
         "column": 10
       },
       "end": {
-        "line": 995,
+        "line": 971,
         "column": 11
       }
     },

package/lib/components/basic_table/basic_table.js

@@ -1251,6 +1251,11 @@ EuiBasicTable.propTypes = {
        */
     sortable: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.func.isRequired]),
     isExpander: _propTypes.default.bool,
+
+    /**
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
+       */
     textOnly: _propTypes.default.bool,
 
     /**
@@ -1597,11 +1602,17 @@ EuiBasicTable.propTypes = {
   tableLayout: _propTypes.default.oneOf(["fixed", "auto"]),
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: _propTypes.default.bool
 };

package/lib/components/basic_table/in_memory_table.js

@@ -672,6 +672,11 @@ EuiInMemoryTable.propTypes = {
        */
     sortable: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.func.isRequired]),
     isExpander: _propTypes.default.bool,
+
+    /**
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
+       */
     textOnly: _propTypes.default.bool,
 
     /**
@@ -945,11 +950,17 @@ EuiInMemoryTable.propTypes = {
   tableLayout: _propTypes.default.oneOf(["fixed", "auto"]),
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: _propTypes.default.bool,
   message: _propTypes.default.node,

package/lib/components/card/card.styles.js

@@ -87,14 +87,14 @@ var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color)
     euiCard__description: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', halfSpacing), ";;label:euiCard__description;"),
     euiCard__footer: /*#__PURE__*/(0, _react.css)("flex-grow:0;", (0, _global_styling.logicalCSS)('width', '100%'), ";", (0, _global_styling.logicalCSS)('margin-top', spacing), ";;label:euiCard__footer;"),
     top: {
-      euiCard__top: /*#__PURE__*/(0, _react.css)("flex-grow:0;font-size:0;position:relative;", (0, _global_styling.logicalCSS)('min-height', '1px'), ";", (0, _global_styling.logicalCSS)('margin-bottom', spacing), ";;label:euiCard__top;"),
+      euiCard__top: /*#__PURE__*/(0, _react.css)("flex-grow:0;font-size:0;position:relative;", (0, _global_styling.logicalCSS)('margin-bottom', spacing), ";;label:euiCard__top;"),
       layout: {
         vertical: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:vertical;"),
         horizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), ";;label:horizontal;")
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", _global_styling.logicals['border-top-left-radius'], ":calc(", euiTheme.border.radius.medium, " - 1px);", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - 1px);", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', '50%'), ";", (0, _global_styling.logicalCSS)('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/lib/components/combo_box/combo_box.js

@@ -106,17 +106,9 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "comboBoxRefInstance", null);
 
     _defineProperty(_assertThisInitialized(_this), "comboBoxRefCallback", function (ref) {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (_this.comboBoxRefInstance) {
-        _this.comboBoxRefInstance.removeEventListener('focusout', _this.onContainerBlur);
-      }
-
       _this.comboBoxRefInstance = ref;
 
       if (_this.comboBoxRefInstance) {
-        _this.comboBoxRefInstance.addEventListener('focusout', _this.onContainerBlur);
-
         var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
 
         _this.setState({
@@ -425,13 +417,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onContainerBlur", function (event) {
       // close the options list, unless the user clicked on an option
-
-      /**
-       * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
-       */
-      var focusEvent = event;
-      var relatedTarget = focusEvent.relatedTarget || focusEvent.explicitOriginalTarget;
+      var relatedTarget = event.relatedTarget;
 
       var focusedInOptionsList = relatedTarget && _this.listRefInstance && _this.listRefInstance.contains(relatedTarget);
 
@@ -876,6 +862,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           className: classes,
           "data-test-subj": dataTestSubj,
           onKeyDown: this.onKeyDown,
+          onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
         }), (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
           autoSizeInputRef: this.autoSizeInputRefCallback,

package/lib/components/datagrid/body/data_grid_body.js

@@ -712,7 +712,13 @@ EuiDataGridBody.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -756,7 +762,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -800,7 +807,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -844,7 +852,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -888,7 +897,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -932,7 +942,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/body/data_grid_cell.js

@@ -307,7 +307,13 @@ EuiDataGridCellContent.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -351,7 +357,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -395,7 +402,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -439,7 +447,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -483,7 +492,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -527,7 +537,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 
@@ -1352,7 +1363,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1396,7 +1408,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1440,7 +1453,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1484,7 +1498,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1528,7 +1543,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1572,7 +1588,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -379,7 +379,13 @@ EuiDataGridHeaderCell.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -423,7 +429,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -467,7 +474,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -511,7 +519,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -555,7 +564,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -599,7 +609,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),