@elastic/eui 93.3.0 → 93.5.0

package/lib/components/button/button_group/button_group_button.js

@@ -1,5 +1,6 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,8 +13,9 @@ var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
 var _inner_text = require("../../inner_text");
 var _button_display = require("../button_display/_button_display");
 var _button_group_button = require("./button_group_button.styles");
+var _tool_tip = require("../../../components/tool_tip");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "value", "size", "color"];
+var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "value", "size", "color", "toolTipContent", "toolTipProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,6 +24,11 @@ var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "l
  * Side Public License, v 1.
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _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 _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."); }
@@ -43,17 +50,21 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     size = _ref.size,
     _ref$color = _ref.color,
     _color = _ref$color === void 0 ? 'primary' : _ref$color,
+    toolTipContent = _ref.toolTipContent,
+    toolTipProps = _ref.toolTipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isCompressed = size === 'compressed';
   var color = isDisabled ? 'disabled' : _color;
   var display = isSelected ? 'fill' : isCompressed ? 'empty' : 'base';
+  var hasToolTip = !!toolTipContent;
   var euiTheme = (0, _services.useEuiTheme)();
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: display
   })[color];
   var focusColorStyles = isCompressed ? (0, _button_group_button._compressedButtonFocusColor)(euiTheme, color) : (0, _button_group_button._uncompressedButtonFocus)(euiTheme);
   var styles = (0, _button_group_button.euiButtonGroupButtonStyles)(euiTheme);
-  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly, styles[size], !isCompressed && styles.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && focusColorStyles];
+  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly, !isCompressed && (hasToolTip ? styles.uncompressed.hasToolTip : styles.uncompressed[size]), isCompressed ? styles.compressed : styles.uncompressed.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && focusColorStyles];
+  var tooltipWrapperStyles = [styles.tooltipWrapper, !isCompressed && styles.uncompressed[size]];
   var contentStyles = [styles.content.euiButtonGroupButton__content, isCompressed && styles.content.compressed];
   var textStyles = [isIconOnly ? styles.text.euiButtonGroupButton__iconOnly : styles.text.euiButtonGroupButton__text];
   var buttonClasses = (0, _classnames.default)('euiButtonGroupButton', {
@@ -70,7 +81,12 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     _useInnerText2 = _slicedToArray(_useInnerText, 2),
     buttonTextRef = _useInnerText2[0],
     innerText = _useInnerText2[1];
-  return (0, _react2.jsx)(_button_display.EuiButtonDisplay, _extends({
+  return (0, _react2.jsx)(EuiButtonGroupButtonWithToolTip, {
+    toolTipContent: toolTipContent,
+    toolTipProps: toolTipProps,
+    wrapperCss: tooltipWrapperStyles,
+    isSelected: isSelected
+  }, (0, _react2.jsx)(_button_display.EuiButtonDisplay, _extends({
     css: cssStyles,
     className: buttonClasses,
     isDisabled: isDisabled,
@@ -86,7 +102,7 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     title: innerText,
     "data-test-subj": id,
     isSelected: isSelected
-  }, rest), label);
+  }, rest), label));
 };
 exports.EuiButtonGroupButton = EuiButtonGroupButton;
 EuiButtonGroupButton.propTypes = {
@@ -107,6 +123,20 @@ EuiButtonGroupButton.propTypes = {
      * The type of the underlying HTML button
      */
   type: _propTypes.default.any,
+  /**
+     * By default, will use the button text for the native browser title.
+     *
+     * This can be either customized or unset via `title: ''` if necessary.
+     */
+  title: _propTypes.default.any,
+  /**
+     * Optional custom tooltip content for the button
+     */
+  toolTipContent: _propTypes.default.node,
+  /**
+     * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
+     */
+  toolTipProps: _propTypes.default.any,
   /**
      * Any `type` accepted by EuiIcon
      */
@@ -145,7 +175,7 @@ EuiButtonGroupButton.propTypes = {
   /**
      * Inherit from EuiButtonGroup
      */
-  size: _propTypes.default.oneOf(["s", "m", "compressed"]).isRequired,
+  size: _propTypes.default.any.isRequired,
   /**
      * Inherit from EuiButtonGroup
      */
@@ -154,4 +184,28 @@ EuiButtonGroupButton.propTypes = {
      * Inherit from EuiButtonGroup
      */
   onClick: _propTypes.default.func.isRequired
+};
+var EuiButtonGroupButtonWithToolTip = function EuiButtonGroupButtonWithToolTip(_ref2) {
+  var _toolTipProps$anchorP, _toolTipProps$anchorP2;
+  var toolTipContent = _ref2.toolTipContent,
+    toolTipProps = _ref2.toolTipProps,
+    wrapperCss = _ref2.wrapperCss,
+    isSelected = _ref2.isSelected,
+    children = _ref2.children;
+  return toolTipContent ? (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
+    content: toolTipContent,
+    position: "top"
+  }, toolTipProps, {
+    anchorProps: _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
+      className: (0, _classnames.default)('euiButtonGroup__tooltipWrapper', {
+        'euiButtonGroup__tooltipWrapper-isSelected': isSelected
+      }, toolTipProps === null || toolTipProps === void 0 ? void 0 : (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.className),
+      css: [wrapperCss, toolTipProps === null || toolTipProps === void 0 ? void 0 : (_toolTipProps$anchorP2 = toolTipProps.anchorProps) === null || _toolTipProps$anchorP2 === void 0 ? void 0 : _toolTipProps$anchorP2.css]
+    })
+  }), children) : children;
+};
+EuiButtonGroupButtonWithToolTip.propTypes = {
+  children: _propTypes.default.element.isRequired,
+  wrapperCss: _propTypes.default.any.isRequired,
+  isSelected: _propTypes.default.bool.isRequired
 };

package/lib/components/button/button_group/button_group_button.styles.js

@@ -10,14 +10,29 @@ var _global_styling = require("../../../global_styling");
 var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
 var _accessibility = require("../../accessibility");
 var _form = require("../../form/form.styles");
-/*
- * 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.
- */
-
+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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "nwv4a2-tooltipWrapper",
+  styles: "overflow:hidden;label:tooltipWrapper;"
+} : {
+  name: "nwv4a2-tooltipWrapper",
+  styles: "overflow:hidden;label:tooltipWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1u3o7zy-hasToolTip",
+  styles: "border-radius:inherit;label:hasToolTip;"
+} : {
+  name: "1u3o7zy-hasToolTip",
+  styles: "border-radius:inherit;label:hasToolTip;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
@@ -34,9 +49,26 @@ var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeCon
     euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
     iconOnly: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)(uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)(uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;"),
-    uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:not(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton:not(.euiButtonGroupButton-isSelected){box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", (0, _services.transparentize)(euiTheme.colors.fullShade, 0.1), ";}&:is(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton-isSelected{box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.2), ";};label:uncompressed;"),
+    uncompressed: {
+      uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";};label:uncompressed;"),
+      get borders() {
+        var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
+        var selectedColor = (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.2);
+        var unselectedColor = (0, _services.transparentize)(euiTheme.colors.fullShade, 0.1);
+        var borderWidth = euiTheme.border.width.thin;
+
+        // "Borders" between buttons should be present between two of the same colored buttons,
+        // and absent between selected vs non-selected buttons (different colors)
+        return "\n          &:not(".concat(selectors, ") + *:not(").concat(selectors, ") {\n            box-shadow: -").concat(borderWidth, " 0 0 0 ").concat(unselectedColor, ";\n          }\n          &:is(").concat(selectors, ") + *:is(").concat(selectors, ") {\n            box-shadow: -").concat(borderWidth, " 0 0 0 ").concat(selectedColor, ";\n          }\n        ");
+      },
+      get s() {
+        return /*#__PURE__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;");
+      },
+      hasToolTip: _ref2
+    },
     compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";padding:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x * 2;
     }), ";background-clip:content-box;border-radius:", (0, _global_styling.mathWithUnits)([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
@@ -44,6 +76,8 @@ var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeCon
     }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
     // States
     disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
+    // Tooltip anchor wrapper
+    tooltipWrapper: _ref,
     // Content wrapper
     content: {
       euiButtonGroupButton__content: /*#__PURE__*/(0, _react.css)(";label:euiButtonGroupButton__content;"),

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

@@ -20,7 +20,7 @@ var _data_grid_cell_actions = require("./data_grid_cell_actions");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _focus_utils = require("./focus_utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "showCellActions", "onExpandClick", "popoverAnchorRef"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 /*
@@ -63,16 +63,25 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
     isFocused = _ref.isFocused,
-    cellActions = _ref.cellActions,
+    showCellActions = _ref.showCellActions,
+    onExpandClick = _ref.onExpandClick,
+    popoverAnchorRef = _ref.popoverAnchorRef,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // React is more permissible than the TS types indicate
+  // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
-  var cellHeightType = (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
-  var classes = (0, _classnames.default)('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
-    'eui-textBreakWord': cellHeightType !== 'default',
-    'eui-textTruncate': cellHeightType === 'default'
-  });
-  var cellContent = (0, _react2.jsx)("div", {
+  var cellHeightType = (0, _react.useMemo)(function () {
+    return (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
+  }, [rowHeightUtils, rowHeight]);
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _classnames.default)('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
+      'eui-textBreakWord': cellHeightType !== 'default',
+      'eui-textTruncate': cellHeightType === 'default'
+    });
+  }, [cellHeightType, isControlColumn]);
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(RenderTruncatedCellContent, {
+    hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
+    rowHeight: rowHeight
+  }, (0, _react2.jsx)("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
     className: classes
@@ -82,15 +91,7 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, cellContext, rest)));
-  if (cellHeightType === 'lineCount' && !isControlColumn) {
-    var lines = rowHeightUtils.getLineCount(rowHeight);
-    cellContent = (0, _react2.jsx)(_text_truncate.EuiTextBlockTruncate, {
-      lines: lines,
-      cloneElement: true
-    }, cellContent);
-  }
-  var screenReaderText = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+  }, cellContext, rest)))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     hidden: !isFocused
   }, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiDataGridCell.position",
@@ -100,11 +101,16 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       col: colIndex + 1,
       row: ariaRowIndex
     }
-  }), cellActions && (0, _react2.jsx)(_react.default.Fragment, null, '. ', (0, _react2.jsx)(_i18n.EuiI18n, {
+  }), showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, '. ', (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiDataGridCell.expansionEnterPrompt",
     default: "Press the Enter key to expand this cell."
-  }))));
-  return (0, _react2.jsx)(_react.default.Fragment, null, cellContent, screenReaderText, cellActions);
+  })))), showCellActions && (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
+    rowIndex: rowIndex,
+    colIndex: colIndex,
+    column: column,
+    onExpandClick: onExpandClick,
+    popoverAnchorRef: popoverAnchorRef
+  }));
 });
 EuiDataGridCellContent.propTypes = {
   rowIndex: _propTypes.default.number.isRequired,
@@ -578,16 +584,18 @@ EuiDataGridCellContent.propTypes = {
   rowHeightUtils: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
   pagination: _propTypes.default.any,
   setCellProps: _propTypes.default.func.isRequired,
-  setCellContentsRef: _propTypes.default.any.isRequired,
+  setCellContentsRef: _propTypes.default.func.isRequired,
+  showCellActions: _propTypes.default.bool.isRequired,
   isExpanded: _propTypes.default.bool.isRequired,
+  onExpandClick: _propTypes.default.func.isRequired,
+  popoverAnchorRef: _propTypes.default.any.isRequired,
   isControlColumn: _propTypes.default.bool.isRequired,
   isFocused: _propTypes.default.bool.isRequired,
   ariaRowIndex: _propTypes.default.number.isRequired,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf(["auto"]), _propTypes.default.shape({
     lineCount: _propTypes.default.number,
     height: _propTypes.default.number
-  }).isRequired]),
-  cellActions: _propTypes.default.node
+  }).isRequired])
 };
 EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
 var EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -914,6 +922,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         if (nextProps.style.height !== this.props.style.height) return true;
         if (nextProps.style.width !== this.props.style.width) return true;
       }
+      if (nextProps.cellContext !== this.props.cellContext) return true;
       if (nextState.cellProps !== this.state.cellProps) return true;
       if (nextState.isFocused !== this.state.isFocused) return true;
       if (nextState.isHovered !== this.state.isHovered) return true;
@@ -963,21 +972,16 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
       var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
-      var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
-        setCellProps: this.setCellProps,
-        column: column,
-        columnType: columnType,
-        isExpandable: isExpandable,
-        isExpanded: popoverIsOpen,
-        isDetails: false,
-        isFocused: this.state.isFocused,
-        setCellContentsRef: this.setCellContentsRef,
-        rowHeight: rowHeight,
-        rowHeightUtils: rowHeightUtils,
-        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
-        ariaRowIndex: ariaRowIndex
-      });
-      var cell = (0, _react2.jsx)("div", _extends({
+      var row = rowManager && !_utils.IS_JEST_ENVIRONMENT ? rowManager.getRow({
+        rowIndex: rowIndex,
+        visibleRowIndex: visibleRowIndex,
+        top: style.top,
+        // comes in as a `{float}px` string from react-window
+        height: style.height // comes in as an integer from react-window
+      }) : undefined;
+      return (0, _react2.jsx)(RenderCellInRow, {
+        row: row
+      }, (0, _react2.jsx)("div", _extends({
         role: "gridcell",
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused ? 0 : -1,
@@ -1001,28 +1005,32 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         cellEl: this.cellRef.current,
         updateCellFocusContext: this.updateCellFocusContext,
         renderFocusTrap: !isExpandable
-      }, (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, cellContentProps, {
-        cellActions: showCellActions && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
-          rowIndex: rowIndex,
-          colIndex: colIndex,
-          column: column,
-          onExpandClick: this.handleCellExpansionClick
-        }), (0, _react2.jsx)("div", {
-          ref: this.popoverAnchorRef,
-          "data-test-subject": "cellPopoverAnchor"
-        }))
-      }))));
-      return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
+      }, (0, _react2.jsx)(EuiDataGridCellContent, _extends({}, rest, {
+        setCellProps: this.setCellProps,
+        column: column,
+        columnType: columnType,
+        isExpandable: isExpandable,
+        isExpanded: popoverIsOpen,
+        onExpandClick: this.handleCellExpansionClick,
+        popoverAnchorRef: this.popoverAnchorRef,
+        showCellActions: showCellActions,
+        isFocused: this.state.isFocused,
+        setCellContentsRef: this.setCellContentsRef,
+        rowHeight: rowHeight,
+        rowHeightUtils: rowHeightUtils,
+        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
+        ariaRowIndex: ariaRowIndex,
         rowIndex: rowIndex,
-        visibleRowIndex: visibleRowIndex,
-        top: style.top,
-        // comes in as a `{float}px` string from react-window
-        height: style.height // comes in as an integer from react-window
-      })) : cell;
+        colIndex: colIndex
+      })))));
     }
   }]);
   return EuiDataGridCell;
 }(_react.Component);
+/**
+ * Function component utilities for conditional rendering.
+ * Used for DRYness and performance
+ */
 exports.EuiDataGridCell = EuiDataGridCell;
 _defineProperty(EuiDataGridCell, "contextType", _focus.DataGridFocusContext);
 EuiDataGridCell.propTypes = {
@@ -1430,4 +1438,34 @@ EuiDataGridCell.propTypes = {
     getRow: _propTypes.default.func.isRequired
   }),
   pagination: _propTypes.default.any
-};
+};
+var RenderCellInRow = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var row = _ref2.row,
+    children = _ref2.children;
+  return row ? /*#__PURE__*/(0, _reactDom.createPortal)(children, row) : children;
+});
+RenderCellInRow.propTypes = {
+  children: _propTypes.default.element.isRequired,
+  row: _propTypes.default.any
+};
+RenderCellInRow.displayName = 'RenderCellInRow';
+var RenderTruncatedCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
+  var children = _ref3.children,
+    hasLineCountTruncation = _ref3.hasLineCountTruncation,
+    rowHeight = _ref3.rowHeight;
+  // If `hasLineCountTruncation` is true, we can rely on rowHeight being the correct type
+  var lines = hasLineCountTruncation ? rowHeight.lineCount : undefined;
+  return lines ? (0, _react2.jsx)(_text_truncate.EuiTextBlockTruncate, {
+    lines: lines,
+    cloneElement: true
+  }, children) : children;
+});
+RenderTruncatedCellContent.propTypes = {
+  children: _propTypes.default.element.isRequired,
+  hasLineCountTruncation: _propTypes.default.bool.isRequired,
+  rowHeight: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf(["auto"]), _propTypes.default.shape({
+    lineCount: _propTypes.default.number,
+    height: _propTypes.default.number
+  }).isRequired])
+};
+RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';

package/lib/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -33,6 +33,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
                                                                                                                                                                                                                                                                                                                                                      */
 var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   var onExpandClick = _ref.onExpandClick,
+    popoverAnchorRef = _ref.popoverAnchorRef,
     column = _ref.column,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex;
@@ -40,23 +41,25 @@ var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
   // or screen reader users
-  var expandButton = (0, _react2.jsx)(_i18n.EuiI18n, {
-    key: 'expand',
-    token: "euiDataGridCellActions.expandButtonTitle",
-    default: "Click or hit enter to interact with cell content"
-  }, function (expandButtonTitle) {
-    return (0, _react2.jsx)(_button_icon.EuiButtonIcon, {
-      className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
-      "data-test-subj": "euiDataGridCellExpandButton",
-      display: "fill",
-      color: "primary",
-      iconSize: "m",
-      iconType: "expandMini",
-      "aria-hidden": true,
-      onClick: onExpandClick,
-      title: expandButtonTitle
+  var expandButton = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_i18n.EuiI18n, {
+      key: 'expand',
+      token: "euiDataGridCellActions.expandButtonTitle",
+      default: "Click or hit enter to interact with cell content"
+    }, function (expandButtonTitle) {
+      return (0, _react2.jsx)(_button_icon.EuiButtonIcon, {
+        className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
+        "data-test-subj": "euiDataGridCellExpandButton",
+        display: "fill",
+        color: "primary",
+        iconSize: "m",
+        iconType: "expandMini",
+        "aria-hidden": true,
+        onClick: onExpandClick,
+        title: expandButtonTitle
+      });
     });
-  });
+  }, [onExpandClick]);
   var additionalButtons = (0, _react.useMemo)(function () {
     if (!column || !Array.isArray(column === null || column === void 0 ? void 0 : column.cellActions)) return [];
     var ButtonComponent = function ButtonComponent(props) {
@@ -87,9 +90,12 @@ var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       });
     });
   }, [column, colIndex, rowIndex]);
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
     className: "euiDataGridRowCell__actions"
-  }, [].concat(_toConsumableArray(additionalButtons), [expandButton]));
+  }, [].concat(_toConsumableArray(additionalButtons), [expandButton])), (0, _react2.jsx)("div", {
+    ref: popoverAnchorRef,
+    "data-test-subject": "cellPopoverAnchor"
+  }));
 };
 exports.EuiDataGridCellActions = EuiDataGridCellActions;
 var EuiDataGridCellPopoverActions = function EuiDataGridCellPopoverActions(_ref2) {