@elastic/eui 93.3.0 → 93.4.0

package/optimize/es/components/datagrid/body/data_grid_body_custom.js

@@ -20,29 +20,30 @@ import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
 import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
 import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
-import { Cell } from './cell';
+import { CellWrapper } from './cell';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
-    leadingControlColumns = _ref.leadingControlColumns,
-    trailingControlColumns = _ref.trailingControlColumns,
-    columns = _ref.columns,
-    visibleColCount = _ref.visibleColCount,
-    schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors,
-    visibleRows = _ref.visibleRows,
     renderCellValue = _ref.renderCellValue,
     cellContext = _ref.cellContext,
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
+    visibleRows = _ref.visibleRows,
+    visibleColCount = _ref.visibleColCount,
+    leadingControlColumns = _ref.leadingControlColumns,
+    trailingControlColumns = _ref.trailingControlColumns,
+    columns = _ref.columns,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     onColumnResize = _ref.onColumnResize,
-    gridWidth = _ref.gridWidth,
-    gridStyles = _ref.gridStyles,
+    schema = _ref.schema,
+    schemaDetectors = _ref.schemaDetectors,
+    sorting = _ref.sorting,
     pagination = _ref.pagination,
-    rowHeightsOptions = _ref.rowHeightsOptions;
+    rowHeightsOptions = _ref.rowHeightsOptions,
+    gridWidth = _ref.gridWidth,
+    gridStyles = _ref.gridStyles;
   /**
    * Columns & widths
    */
@@ -81,14 +82,15 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
    * Header & footer
    */
   var _useDataGridHeader = 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
     }),
@@ -111,25 +113,27 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
   /**
    * Cell render fn
    */
-  var cellProps = {
-    schema: schema,
-    schemaDetectors: schemaDetectors,
-    pagination: pagination,
-    columns: columns,
-    leadingControlColumns: leadingControlColumns,
-    trailingControlColumns: trailingControlColumns,
-    visibleColCount: visibleColCount,
-    columnWidths: columnWidths,
-    defaultColumnWidth: defaultColumnWidth,
-    renderCellValue: renderCellValue,
-    cellContext: cellContext,
-    renderCellPopover: renderCellPopover,
-    interactiveCellId: interactiveCellId,
-    setRowHeight: setRowHeight,
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils
-  };
-  var _Cell = useCallback(function (_ref2) {
+  var cellProps = useMemo(function () {
+    return {
+      schema: schema,
+      schemaDetectors: schemaDetectors,
+      pagination: pagination,
+      columns: columns,
+      leadingControlColumns: leadingControlColumns,
+      trailingControlColumns: trailingControlColumns,
+      visibleColCount: visibleColCount,
+      columnWidths: columnWidths,
+      defaultColumnWidth: defaultColumnWidth,
+      renderCellValue: renderCellValue,
+      cellContext: cellContext,
+      renderCellPopover: renderCellPopover,
+      interactiveCellId: interactiveCellId,
+      setRowHeight: setRowHeight,
+      rowHeightsOptions: rowHeightsOptions,
+      rowHeightUtils: rowHeightUtils
+    };
+  }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils]);
+  var Cell = useCallback(function (_ref2) {
     var colIndex = _ref2.colIndex,
       visibleRowIndex = _ref2.visibleRowIndex,
       rest = _objectWithoutProperties(_ref2, _excluded);
@@ -141,9 +145,8 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       visibleRowIndex: visibleRowIndex,
       style: style
     }, cellProps);
-    return ___EmotionJSX(Cell, _extends({}, props, rest));
-  }, [].concat(_toConsumableArray(Object.values(cellProps)), [getRowHeight]) // eslint-disable-line react-hooks/exhaustive-deps
-  );
+    return ___EmotionJSX(CellWrapper, _extends({}, props, rest));
+  }, [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]);
 
   // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
   var _useState = useState({}),
@@ -155,7 +158,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,
-    Cell: _Cell,
+    Cell: Cell,
     setCustomGridBodyProps: setCustomGridBodyProps
   }), footerRow);
 };

package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -13,12 +13,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import classNames from 'classnames';
-import React, { forwardRef, createContext, useContext, useEffect, useRef } from 'react';
+import React, { forwardRef, createContext, useCallback, useContext, useEffect, useRef, useMemo, memo } from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
+import { useDeepEqual } from '../../../services';
 import { useResizeObserver } from '../../observer/resize_observer';
 import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
-import { Cell } from './cell';
+import { CellWrapper } from './cell';
 import { useRowManager } from './data_grid_row_manager';
 import { useFinalGridDimensions, useUnconstrainedHeight, useVirtualizeContainerWidth } from '../utils/grid_height_width';
 import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
@@ -26,21 +27,25 @@ import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
 import { useScrollBars, useScroll } from '../utils/scrolling';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var _Cell = function _Cell(_ref) {
+export var Cell = /*#__PURE__*/memo(function (_ref) {
   var columnIndex = _ref.columnIndex,
     rowIndex = _ref.rowIndex,
     style = _ref.style,
     data = _ref.data;
-  var _useContext = useContext(DataGridWrapperRowsContext),
-    headerRowHeight = _useContext.headerRowHeight;
-  return ___EmotionJSX(Cell, _extends({
+  var memoizedStyles = useDeepEqual(style);
+  var cellStyles = useMemo(function () {
+    var headerRowHeight = data.headerRowHeight;
+    return _objectSpread(_objectSpread({}, memoizedStyles), {}, {
+      top: "".concat(parseFloat(memoizedStyles.top) + headerRowHeight, "px")
+    });
+  }, [memoizedStyles, data]);
+  return ___EmotionJSX(CellWrapper, _extends({
     colIndex: columnIndex,
     visibleRowIndex: rowIndex,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      top: "".concat(parseFloat(style.top) + headerRowHeight, "px")
-    })
+    style: cellStyles
   }, data));
-};
+});
+Cell.displayName = 'Cell';
 
 // Context is required to pass props to react-window's innerElementType
 // @see https://github.com/bvaughn/react-window/issues/404
@@ -49,23 +54,27 @@ export var DataGridWrapperRowsContext = /*#__PURE__*/createContext({
   headerRowHeight: 0,
   footerRow: null
 });
-var InnerElement = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+var InnerElement = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     style = _ref2.style,
     rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useContext2 = useContext(DataGridWrapperRowsContext),
-    headerRowHeight = _useContext2.headerRowHeight,
-    headerRow = _useContext2.headerRow,
-    footerRow = _useContext2.footerRow;
+  var _useContext = useContext(DataGridWrapperRowsContext),
+    headerRowHeight = _useContext.headerRowHeight,
+    headerRow = _useContext.headerRow,
+    footerRow = _useContext.footerRow;
+  var memoizedStyles = useDeepEqual(style);
+  var innerElementStyles = useMemo(function () {
+    return _objectSpread(_objectSpread({}, memoizedStyles), {}, {
+      height: memoizedStyles.height + headerRowHeight
+    });
+  }, [memoizedStyles, headerRowHeight]);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({
     ref: ref,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      height: style.height + headerRowHeight
-    })
+    style: innerElementStyles
   }, rest), headerRow, children), footerRow);
-});
+}));
 InnerElement.displayName = 'EuiDataGridInnerElement';
-export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
+export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
   var leadingControlColumns = _ref3.leadingControlColumns,
     trailingControlColumns = _ref3.trailingControlColumns,
     columns = _ref3.columns,
@@ -83,6 +92,7 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
     pagination = _ref3.pagination,
+    sorting = _ref3.sorting,
     setVisibleColumns = _ref3.setVisibleColumns,
     switchColumnPos = _ref3.switchColumnPos,
     onColumnResize = _ref3.onColumnResize,
@@ -132,14 +142,15 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
    * Header & footer
    */
   var _useDataGridHeader = 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
     }),
@@ -247,29 +258,13 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
       gridRef.current.resetAfterRowIndex(0);
     }
   }, [gridRef, getRowHeight]);
-  return IS_JEST_ENVIRONMENT || finalWidth > 0 ? ___EmotionJSX(DataGridWrapperRowsContext.Provider, {
-    value: {
-      headerRowHeight: headerRowHeight,
-      headerRow: headerRow,
-      footerRow: footerRow
-    }
-  }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions ? virtualizationOptions : {}, {
-    ref: gridRef,
-    className: classNames('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 = 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 = useMemo(function () {
+    return {
       schemaDetectors: schemaDetectors,
       setRowHeight: setRowHeight,
       leadingControlColumns: leadingControlColumns,
@@ -286,8 +281,33 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
       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 = useMemo(function () {
+    return {
+      headerRowHeight: headerRowHeight,
+      headerRow: headerRow,
+      footerRow: footerRow
+    };
+  }, [headerRowHeight, headerRow, footerRow]);
+  return IS_JEST_ENVIRONMENT || finalWidth > 0 ? ___EmotionJSX(DataGridWrapperRowsContext.Provider, {
+    value: rowWrapperContextValue
+  }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions, {
+    ref: gridRef,
+    className: classNames('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: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
-  }), _Cell), scrollBorderOverlay) : null;
-};
+  }), Cell), scrollBorderOverlay) : null;
+});
+EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

package/optimize/es/components/datagrid/body/data_grid_row_manager.js

@@ -7,7 +7,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * Side Public License, v 1.
  */
 
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useMemo } from 'react';
 import { useUpdateEffect } from '../../../services';
 export var useRowManager = function useRowManager(_ref) {
   var innerGridRef = _ref.innerGridRef,
@@ -88,7 +88,9 @@ export var useRowManager = function useRowManager(_ref) {
       });
     }
   }, [rowClasses]);
-  return {
-    getRow: getRow
-  };
+  return useMemo(function () {
+    return {
+      getRow: getRow
+    };
+  }, [getRow]);
 };

package/optimize/es/components/datagrid/body/footer/use_data_grid_footer.js

@@ -32,8 +32,7 @@ export 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/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -7,11 +7,11 @@ import _extends from "@babel/runtime/helpers/extends";
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 import classNames from 'classnames';
 import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
+export var EuiDataGridControlHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var controlColumn = _ref.controlColumn,
     index = _ref.index;
   var HeaderCellRender = controlColumn.headerCellRender,
@@ -26,4 +26,5 @@ export var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(
   }), ___EmotionJSX("div", {
     className: "euiDataGridHeaderCell__content"
   }, ___EmotionJSX(HeaderCellRender, null)));
-};
+});
+EuiDataGridControlHeaderCell.displayName = 'EuiDataGridControlHeaderCell';

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -11,7 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import classnames from 'classnames';
-import React, { useContext, useState, useRef, useCallback, useMemo } from 'react';
+import React, { useContext, useState, useRef, useCallback, useMemo, memo } from 'react';
 import { tabbable } from 'tabbable';
 import { keys } from '../../../../services';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
@@ -20,13 +20,21 @@ import { EuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
-import { DataGridSortingContext } from '../../utils/sorting';
 import { DataGridFocusContext } from '../../utils/focus';
 import { getColumnActions } from './column_actions';
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var CellContent = function CellContent(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    arrow = _ref.arrow;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    title: title,
+    className: "euiDataGridHeaderCell__content"
+  }, children), arrow);
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "mc0thx-EuiDataGridHeaderCell",
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
 } : {
@@ -34,18 +42,19 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+export var EuiDataGridHeaderCell = /*#__PURE__*/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,
@@ -55,25 +64,25 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
-  var _useContext2 = useContext(DataGridSortingContext),
-    sorting = _useContext2.sorting;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPopoverOpen = _useState2[0],
     setIsPopoverOpen = _useState2[1];
   var popoverArrowNavigationProps = usePopoverArrowNavigation();
-  var columnActions = getColumnActions({
-    column: column,
-    columns: columns,
-    schema: schema,
-    schemaDetectors: schemaDetectors,
-    setVisibleColumns: setVisibleColumns,
-    focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-    setIsPopoverOpen: setIsPopoverOpen,
-    sorting: sorting,
-    switchColumnPos: switchColumnPos,
-    setFocusedCell: setFocusedCell
-  });
+  var columnActions = useMemo(function () {
+    return 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 = useRef(null);
   var focusActionsButton = useCallback(function () {
@@ -100,11 +109,9 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'actions'
   });
-  var cellContent = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
-    title: displayAsText || id,
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id), sortingArrow);
   var classes = classnames((_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 ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -118,7 +125,10 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     columnId: id,
     columnWidth: width,
     setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? ___EmotionJSX(React.Fragment, null, cellContent, sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
+  }) : null, !showColumnActions ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
     className: "euiDataGridHeaderCell__button",
     onClick: function onClick() {
       return setIsPopoverOpen(function (isPopoverOpen) {
@@ -134,12 +144,15 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
     ref: actionsButtonRef,
     "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-  }, cellContent, ___EmotionJSX(EuiPopover, _extends({
+  }, ___EmotionJSX(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), ___EmotionJSX(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
@@ -175,16 +188,17 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     token: "euiDataGridHeaderCell.headerActions",
     default: "Click to view column header actions"
   }))));
-};
+});
+EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
 
 /**
  * Column sorting utility helpers
  */
-export var useSortingUtils = function useSortingUtils(_ref3) {
+export 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 = useMemo(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -196,12 +210,14 @@ export var useSortingUtils = function useSortingUtils(_ref3) {
   /**
    * Arrow icon
    */
-  var sortingArrow = isColumnSorted ? ___EmotionJSX(EuiIcon, {
-    type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
-    color: "text",
-    className: "euiDataGridHeaderCell__sortingArrow",
-    "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
-  }) : null;
+  var sortingArrow = useMemo(function () {
+    return isColumnSorted ? ___EmotionJSX(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
@@ -218,9 +234,9 @@ export 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 ___EmotionJSX(React.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 ___EmotionJSX(React.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 ___EmotionJSX(EuiI18n, {

package/optimize/es/components/datagrid/body/header/data_grid_header_row.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "schemaDetectors", "columnWidths", "defaultColumnWidth", "className", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "data-test-subj"];
+var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,26 +10,27 @@ var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "
  */
 
 import classnames from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { EuiDataGridControlHeaderCell } from './data_grid_control_header_cell';
 import { EuiDataGridHeaderCell } from './data_grid_header_cell';
 import { emptyControlColumns } from '../../data_grid_types';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$leadingControl = props.leadingControlColumns,
+var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    _dataTestSubj = props['data-test-subj'],
+    _props$leadingControl = props.leadingControlColumns,
     leadingControlColumns = _props$leadingControl === void 0 ? emptyControlColumns : _props$leadingControl,
     _props$trailingContro = props.trailingControlColumns,
     trailingControlColumns = _props$trailingContro === void 0 ? emptyControlColumns : _props$trailingContro,
     columns = props.columns,
-    schema = props.schema,
-    schemaDetectors = props.schemaDetectors,
     columnWidths = props.columnWidths,
     defaultColumnWidth = props.defaultColumnWidth,
-    className = props.className,
     setColumnWidth = props.setColumnWidth,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
-    _dataTestSubj = props['data-test-subj'],
+    sorting = props.sorting,
+    schema = props.schema,
+    schemaDetectors = props.schemaDetectors,
     rest = _objectWithoutProperties(props, _excluded);
   var classes = classnames('euiDataGridHeader', className);
   var dataTestSubj = classnames('dataGridHeader', _dataTestSubj);
@@ -47,16 +48,17 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
   }), columns.map(function (column, index) {
     return ___EmotionJSX(EuiDataGridHeaderCell, {
       key: column.id,
+      index: index + leadingControlColumns.length,
       column: column,
       columns: columns,
-      index: index + leadingControlColumns.length,
       columnWidths: columnWidths,
-      schema: schema,
-      schemaDetectors: schemaDetectors,
+      defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
-      defaultColumnWidth: defaultColumnWidth
+      sorting: sorting,
+      schema: schema,
+      schemaDetectors: schemaDetectors
     });
   }), trailingControlColumns.map(function (controlColumn, index) {
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
@@ -65,6 +67,6 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
       controlColumn: controlColumn
     });
   }));
-});
+}));
 EuiDataGridHeaderRow.displayName = 'EuiDataGridHeaderRow';
 export { EuiDataGridHeaderRow };