@elastic/eui 93.2.0 → 93.4.0

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._Cell = exports.EuiDataGridBodyVirtualized = exports.DataGridWrapperRowsContext = void 0;
+exports.EuiDataGridBodyVirtualized = exports.DataGridWrapperRowsContext = exports.Cell = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactWindow = require("react-window");
+var _services = require("../../../services");
 var _resize_observer = require("../../observer/resize_observer");
 var _header = require("./header");
 var _footer = require("./footer");
@@ -38,53 +39,56 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
                                                                                                                                                                                                                                                                                                                                                                                                * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                                                                                * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                                                                                */
-var _Cell = function _Cell(_ref) {
+var Cell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var columnIndex = _ref.columnIndex,
     rowIndex = _ref.rowIndex,
     style = _ref.style,
     data = _ref.data;
-  var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
-    headerRowHeight = _useContext.headerRowHeight;
-  return (0, _react2.jsx)(_cell.Cell, _extends({
+  var memoizedStyles = (0, _services.useDeepEqual)(style);
+  var cellStyles = (0, _react.useMemo)(function () {
+    var headerRowHeight = data.headerRowHeight;
+    return _objectSpread(_objectSpread({}, memoizedStyles), {}, {
+      top: "".concat(parseFloat(memoizedStyles.top) + headerRowHeight, "px")
+    });
+  }, [memoizedStyles, data]);
+  return (0, _react2.jsx)(_cell.CellWrapper, _extends({
     colIndex: columnIndex,
     visibleRowIndex: rowIndex,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      top: "".concat(parseFloat(style.top) + headerRowHeight, "px")
-    })
+    style: cellStyles
   }, data));
-};
+});
+exports.Cell = Cell;
+Cell.displayName = 'Cell';
 
 // Context is required to pass props to react-window's innerElementType
 // @see https://github.com/bvaughn/react-window/issues/404
-exports._Cell = _Cell;
 var DataGridWrapperRowsContext = /*#__PURE__*/(0, _react.createContext)({
   headerRow: (0, _react2.jsx)("div", null),
   headerRowHeight: 0,
   footerRow: null
 });
 exports.DataGridWrapperRowsContext = DataGridWrapperRowsContext;
-var InnerElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+var InnerElement = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
     style = _ref2.style,
     rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useContext2 = (0, _react.useContext)(DataGridWrapperRowsContext),
-    headerRowHeight = _useContext2.headerRowHeight,
-    headerRow = _useContext2.headerRow,
-    footerRow = _useContext2.footerRow;
+  var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
+    headerRowHeight = _useContext.headerRowHeight,
+    headerRow = _useContext.headerRow,
+    footerRow = _useContext.footerRow;
+  var memoizedStyles = (0, _services.useDeepEqual)(style);
+  var innerElementStyles = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, memoizedStyles), {}, {
+      height: memoizedStyles.height + headerRowHeight
+    });
+  }, [memoizedStyles, headerRowHeight]);
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", _extends({
     ref: ref,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      height: style.height + headerRowHeight
-    })
+    style: innerElementStyles
   }, rest), headerRow, children), footerRow);
-});
-InnerElement.propTypes = {
-  style: _propTypes.default.shape({
-    height: _propTypes.default.number.isRequired
-  }).isRequired
-};
+}));
 InnerElement.displayName = 'EuiDataGridInnerElement';
-var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
+var EuiDataGridBodyVirtualized = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
   var leadingControlColumns = _ref3.leadingControlColumns,
     trailingControlColumns = _ref3.trailingControlColumns,
     columns = _ref3.columns,
@@ -97,10 +101,12 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
     endRow = _ref3$visibleRows.endRow,
     visibleRowCount = _ref3$visibleRows.visibleRowCount,
     renderCellValue = _ref3.renderCellValue,
+    cellContext = _ref3.cellContext,
     renderCellPopover = _ref3.renderCellPopover,
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
     pagination = _ref3.pagination,
+    sorting = _ref3.sorting,
     setVisibleColumns = _ref3.setVisibleColumns,
     switchColumnPos = _ref3.switchColumnPos,
     onColumnResize = _ref3.onColumnResize,
@@ -150,14 +156,15 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
    * Header & footer
    */
   var _useDataGridHeader = (0, _header.useDataGridHeader)({
-      switchColumnPos: switchColumnPos,
-      setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      setVisibleColumns: setVisibleColumns,
+      switchColumnPos: switchColumnPos,
+      sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors
     }),
@@ -265,29 +272,13 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
       gridRef.current.resetAfterRowIndex(0);
     }
   }, [gridRef, getRowHeight]);
-  return _utils.IS_JEST_ENVIRONMENT || finalWidth > 0 ? (0, _react2.jsx)(DataGridWrapperRowsContext.Provider, {
-    value: {
-      headerRowHeight: headerRowHeight,
-      headerRow: headerRow,
-      footerRow: footerRow
-    }
-  }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, _extends({}, virtualizationOptions ? virtualizationOptions : {}, {
-    ref: gridRef,
-    className: (0, _classnames.default)('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
-    onItemsRendered: function onItemsRendered(itemsRendered) {
-      var _virtualizationOption;
-      gridItemsRendered.current = itemsRendered;
-      virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : (_virtualizationOption = virtualizationOptions.onItemsRendered) === null || _virtualizationOption === void 0 ? void 0 : _virtualizationOption.call(virtualizationOptions, itemsRendered);
-    },
-    innerElementType: InnerElement,
-    outerRef: outerGridRef,
-    innerRef: innerGridRef,
-    columnCount: visibleColCount,
-    width: finalWidth,
-    columnWidth: getColumnWidth,
-    height: finalHeight,
-    rowHeight: getRowHeight,
-    itemData: {
+  var onItemsRendered = (0, _react.useCallback)(function (itemsRendered) {
+    var _virtualizationOption;
+    gridItemsRendered.current = itemsRendered;
+    virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : (_virtualizationOption = virtualizationOptions.onItemsRendered) === null || _virtualizationOption === void 0 ? void 0 : _virtualizationOption.call(virtualizationOptions, itemsRendered);
+  }, [gridItemsRendered, virtualizationOptions]);
+  var itemData = (0, _react.useMemo)(function () {
+    return {
       schemaDetectors: schemaDetectors,
       setRowHeight: setRowHeight,
       leadingControlColumns: leadingControlColumns,
@@ -298,16 +289,41 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       renderCellValue: renderCellValue,
+      cellContext: cellContext,
       renderCellPopover: renderCellPopover,
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,
       rowHeightUtils: rowHeightUtils,
       rowManager: rowManager,
-      pagination: pagination
-    },
+      pagination: pagination,
+      headerRowHeight: headerRowHeight
+    };
+  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight]);
+  var rowWrapperContextValue = (0, _react.useMemo)(function () {
+    return {
+      headerRowHeight: headerRowHeight,
+      headerRow: headerRow,
+      footerRow: footerRow
+    };
+  }, [headerRowHeight, headerRow, footerRow]);
+  return _utils.IS_JEST_ENVIRONMENT || finalWidth > 0 ? (0, _react2.jsx)(DataGridWrapperRowsContext.Provider, {
+    value: rowWrapperContextValue
+  }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, _extends({}, virtualizationOptions, {
+    ref: gridRef,
+    className: (0, _classnames.default)('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
+    onItemsRendered: onItemsRendered,
+    innerElementType: InnerElement,
+    outerRef: outerGridRef,
+    innerRef: innerGridRef,
+    columnCount: visibleColCount,
+    width: finalWidth,
+    columnWidth: getColumnWidth,
+    height: finalHeight,
+    rowHeight: getRowHeight,
+    itemData: itemData,
     rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
-  }), _Cell), scrollBorderOverlay) : null;
-};
+  }), Cell), scrollBorderOverlay) : null;
+});
 exports.EuiDataGridBodyVirtualized = EuiDataGridBodyVirtualized;
 EuiDataGridBodyVirtualized.propTypes = {
   leadingControlColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -844,10 +860,24 @@ EuiDataGridBodyVirtualized.propTypes = {
     visibleRowCount: _propTypes.default.number.isRequired
   }).isRequired,
   renderCellValue: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.element.isRequired]).isRequired,
+  cellContext: _propTypes.default.any,
   renderCellPopover: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.func.isRequired]),
   renderFooterCellValue: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.element.isRequired]),
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
+  sorting: _propTypes.default.shape({
+    /**
+       * A function that receives updated column sort details in response to user interactions in the toolbar controls
+       */
+    onSort: _propTypes.default.func.isRequired,
+    /**
+       * An array of the column ids currently being sorted and their sort direction. The array order determines the sort order. `{ id: 'A'; direction: 'asc' }`
+       */
+    columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.string.isRequired,
+      direction: _propTypes.default.oneOf(["asc", "desc"]).isRequired
+    }).isRequired).isRequired
+  }),
   pagination: _propTypes.default.any,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
@@ -933,4 +963,5 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
   wrapperRef: _propTypes.default.any.isRequired
-};
+};
+EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

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

@@ -87,7 +87,7 @@ var useRowManager = function useRowManager(_ref) {
     if (rowClasses) {
       rowIdToElements.current.forEach(function (rowElement, rowIndex) {
         var euiClasses = Array.from(rowElement.classList).filter(function (className) {
-          return className.startsWith('euiDataGridRow');
+          return ['euiDataGridRow', 'euiDataGridRow--striped'].includes(className);
         }).join(' ');
         if (rowClasses[rowIndex]) {
           rowElement.classList.value = "".concat(euiClasses, " ").concat(rowClasses[rowIndex]);
@@ -97,8 +97,10 @@ var useRowManager = function useRowManager(_ref) {
       });
     }
   }, [rowClasses]);
-  return {
-    getRow: getRow
-  };
+  return (0, _react.useMemo)(function () {
+    return {
+      getRow: getRow
+    };
+  }, [getRow]);
 };
 exports.useRowManager = useRowManager;

package/lib/components/datagrid/body/footer/use_data_grid_footer.js

@@ -45,8 +45,7 @@ var useDataGridFooter = function useDataGridFooter(props) {
       ref: setFooterRowRef,
       renderCellValue: renderFooterCellValue
     }, footerProps));
-  }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [props]);
   return {
     footerRow: footerRow,
     footerRowHeight: footerRowHeight

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

@@ -1,15 +1,18 @@
 "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
 });
 exports.EuiDataGridControlHeaderCell = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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); } /*
                                                                                                                                                                                                                                                                                                                                                      * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                                                                                      * or more contributor license agreements. Licensed under the Elastic License
@@ -17,7 +20,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
                                                                                                                                                                                                                                                                                                                                                      * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                                      * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                                      */
-var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
+var EuiDataGridControlHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlColumn = _ref.controlColumn,
     index = _ref.index;
   var HeaderCellRender = controlColumn.headerCellRender,
@@ -32,7 +35,7 @@ var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
   }), (0, _react2.jsx)("div", {
     className: "euiDataGridHeaderCell__content"
   }, (0, _react2.jsx)(HeaderCellRender, null)));
-};
+});
 exports.EuiDataGridControlHeaderCell = EuiDataGridControlHeaderCell;
 EuiDataGridControlHeaderCell.propTypes = {
   index: _propTypes.default.number.isRequired,
@@ -66,4 +69,5 @@ EuiDataGridControlHeaderCell.propTypes = {
        */
     footerCellProps: _propTypes.default.any
   }).isRequired
-};
+};
+EuiDataGridControlHeaderCell.displayName = 'EuiDataGridControlHeaderCell';

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

@@ -16,7 +16,6 @@ var _i18n = require("../../../i18n");
 var _icon = require("../../../icon");
 var _list_group = require("../../../list_group");
 var _popover = require("../../../popover");
-var _sorting = require("../../utils/sorting");
 var _focus = require("../../utils/focus");
 var _column_actions = require("./column_actions");
 var _data_grid_column_resizer = require("./data_grid_column_resizer");
@@ -42,7 +41,20 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
                                                                        * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                        * Side Public License, v 1.
                                                                        */
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var CellContent = function CellContent(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    arrow = _ref.arrow;
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    title: title,
+    className: "euiDataGridHeaderCell__content"
+  }, children), arrow);
+};
+CellContent.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  arrow: _propTypes.default.node
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "mc0thx-EuiDataGridHeaderCell",
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
 } : {
@@ -50,18 +62,19 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+var EuiDataGridHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var _classnames;
-  var column = _ref.column,
-    index = _ref.index,
-    columns = _ref.columns,
-    columnWidths = _ref.columnWidths,
-    schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors,
-    defaultColumnWidth = _ref.defaultColumnWidth,
-    setColumnWidth = _ref.setColumnWidth,
-    setVisibleColumns = _ref.setVisibleColumns,
-    switchColumnPos = _ref.switchColumnPos;
+  var index = _ref2.index,
+    column = _ref2.column,
+    columns = _ref2.columns,
+    columnWidths = _ref2.columnWidths,
+    defaultColumnWidth = _ref2.defaultColumnWidth,
+    setColumnWidth = _ref2.setColumnWidth,
+    setVisibleColumns = _ref2.setVisibleColumns,
+    switchColumnPos = _ref2.switchColumnPos,
+    sorting = _ref2.sorting,
+    schema = _ref2.schema,
+    schemaDetectors = _ref2.schemaDetectors;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
@@ -71,25 +84,25 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
-  var _useContext2 = (0, _react.useContext)(_sorting.DataGridSortingContext),
-    sorting = _useContext2.sorting;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPopoverOpen = _useState2[0],
     setIsPopoverOpen = _useState2[1];
   var popoverArrowNavigationProps = usePopoverArrowNavigation();
-  var columnActions = (0, _column_actions.getColumnActions)({
-    column: column,
-    columns: columns,
-    schema: schema,
-    schemaDetectors: schemaDetectors,
-    setVisibleColumns: setVisibleColumns,
-    focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-    setIsPopoverOpen: setIsPopoverOpen,
-    sorting: sorting,
-    switchColumnPos: switchColumnPos,
-    setFocusedCell: setFocusedCell
-  });
+  var columnActions = (0, _react.useMemo)(function () {
+    return (0, _column_actions.getColumnActions)({
+      column: column,
+      columns: columns,
+      schema: schema,
+      schemaDetectors: schemaDetectors,
+      setVisibleColumns: setVisibleColumns,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
+      setIsPopoverOpen: setIsPopoverOpen,
+      sorting: sorting,
+      switchColumnPos: switchColumnPos,
+      setFocusedCell: setFocusedCell
+    });
+  }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell]);
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = (0, _react.useRef)(null);
   var focusActionsButton = (0, _react.useCallback)(function () {
@@ -116,11 +129,9 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'actions'
   });
-  var cellContent = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
-    title: displayAsText || id,
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id), sortingArrow);
   var classes = (0, _classnames2.default)((_classnames = {}, _defineProperty(_classnames, "euiDataGridHeaderCell--".concat(columnType), columnType), _defineProperty(_classnames, 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), _defineProperty(_classnames, 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), _classnames), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
+  var title = displayAsText || id;
+  var children = display || displayAsText || id;
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -134,7 +145,10 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     columnId: id,
     columnWidth: width,
     setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, cellContent, sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
+  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
     className: "euiDataGridHeaderCell__button",
     onClick: function onClick() {
       return setIsPopoverOpen(function (isPopoverOpen) {
@@ -150,12 +164,15 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
     ref: actionsButtonRef,
     "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-  }, cellContent, (0, _react2.jsx)(_popover.EuiPopover, _extends({
+  }, (0, _react2.jsx)(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), (0, _react2.jsx)(_popover.EuiPopover, _extends({
     display: "block",
     panelPaddingSize: "none",
     offset: 7,
     anchorPosition: "downRight",
-    css: _ref2 // Align to right
+    css: _ref3 // Align to right
     ,
     focusTrapProps: {
       // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
@@ -191,11 +208,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     token: "euiDataGridHeaderCell.headerActions",
     default: "Click to view column header actions"
   }))));
-};
-
-/**
- * Column sorting utility helpers
- */
+});
 exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
 EuiDataGridHeaderCell.propTypes = {
   column: _propTypes.default.shape({
@@ -623,11 +636,16 @@ EuiDataGridHeaderCell.propTypes = {
   }).isRequired,
   index: _propTypes.default.number.isRequired
 };
-var useSortingUtils = function useSortingUtils(_ref3) {
+EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
+
+/**
+ * Column sorting utility helpers
+ */
+var useSortingUtils = function useSortingUtils(_ref4) {
   var _sorting$columns;
-  var sorting = _ref3.sorting,
-    id = _ref3.id,
-    showColumnActions = _ref3.showColumnActions;
+  var sorting = _ref4.sorting,
+    id = _ref4.id,
+    showColumnActions = _ref4.showColumnActions;
   var sortedColumn = (0, _react.useMemo)(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -639,12 +657,14 @@ var useSortingUtils = function useSortingUtils(_ref3) {
   /**
    * Arrow icon
    */
-  var sortingArrow = isColumnSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
-    type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
-    color: "text",
-    className: "euiDataGridHeaderCell__sortingArrow",
-    "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
-  }) : null;
+  var sortingArrow = (0, _react.useMemo)(function () {
+    return isColumnSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
+      type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
+      color: "text",
+      className: "euiDataGridHeaderCell__sortingArrow",
+      "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
+    }) : null;
+  }, [id, isColumnSorted, sortedColumn]);
 
   /**
    * aria-sort attribute - should only be used when a single column is being sorted
@@ -661,9 +681,9 @@ var useSortingUtils = function useSortingUtils(_ref3) {
     var _sorting$columns2;
     if (!isColumnSorted) return null;
     if (!showColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
-    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref4, index) {
-      var columnId = _ref4.id,
-        direction = _ref4.direction;
+    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref5, index) {
+      var columnId = _ref5.id,
+        direction = _ref5.direction;
       if (hasOnlyOneSort) {
         if (direction === 'asc') {
           return (0, _react2.jsx)(_i18n.EuiI18n, {