@elastic/eui 93.3.0 → 93.4.0

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Cell = void 0;
+exports.CellWrapper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -30,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * It grabs context,  determines the type of cell being rendered
  * (e.g. control vs data cell), & sets shared props between all cells
  */
-var Cell = function Cell(_ref) {
+var CellWrapper = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var colIndex = _ref.colIndex,
     visibleRowIndex = _ref.visibleRowIndex,
     style = _ref.style,
@@ -53,9 +53,8 @@ var Cell = function Cell(_ref) {
     rowManager = _ref.rowManager,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
-  var _useContext = (0, _react.useContext)(_sorting.DataGridSortingContext),
+  var _useContext = (0, _react.useContext)(_sorting.DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
-  var cellContent;
   var isFirstColumn = colIndex === 0;
   var isLastColumn = colIndex === visibleColCount - 1;
   var isLeadingControlColumn = colIndex < leadingControlColumns.length;
@@ -69,31 +68,33 @@ var Cell = function Cell(_ref) {
       return column !== null && column !== void 0 && column.schema ? (column === null || column === void 0 ? void 0 : column.schema) === row.type : columnId === row.type;
     })[0]) === null || _schemaDetectors$filt === void 0 ? void 0 : _schemaDetectors$filt.textTransform;
   }, [columnId, column === null || column === void 0 ? void 0 : column.schema, schemaDetectors]);
-  var classes = (0, _classnames.default)((0, _defineProperty2.default)({
-    'euiDataGridRowCell--firstColumn': isFirstColumn,
-    'euiDataGridRowCell--lastColumn': isLastColumn,
-    'euiDataGridRowCell--controlColumn': isLeadingControlColumn || isTrailingControlColumn
-  }, "euiDataGridRowCell--".concat(textTransform), textTransform));
-  var sharedCellProps = {
-    rowIndex: getCorrectRowIndex(visibleRowIndex),
-    visibleRowIndex: visibleRowIndex,
-    colIndex: colIndex,
-    interactiveCellId: interactiveCellId,
-    className: classes,
-    style: style,
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils,
-    setRowHeight: isFirstColumn ? setRowHeight : undefined,
-    rowManager: rowManager,
-    popoverContext: popoverContext,
-    pagination: pagination,
-    cellContext: cellContext
-  };
+  var sharedCellProps = (0, _react.useMemo)(function () {
+    var classes = (0, _classnames.default)((0, _defineProperty2.default)({
+      'euiDataGridRowCell--firstColumn': isFirstColumn,
+      'euiDataGridRowCell--lastColumn': isLastColumn,
+      'euiDataGridRowCell--controlColumn': isLeadingControlColumn || isTrailingControlColumn
+    }, "euiDataGridRowCell--".concat(textTransform), textTransform));
+    return {
+      rowIndex: getCorrectRowIndex(visibleRowIndex),
+      visibleRowIndex: visibleRowIndex,
+      colIndex: colIndex,
+      interactiveCellId: interactiveCellId,
+      className: classes,
+      style: style,
+      rowHeightsOptions: rowHeightsOptions,
+      rowHeightUtils: rowHeightUtils,
+      setRowHeight: isFirstColumn ? setRowHeight : undefined,
+      rowManager: rowManager,
+      popoverContext: popoverContext,
+      pagination: pagination,
+      cellContext: cellContext
+    };
+  }, [colIndex, setRowHeight, visibleRowIndex, getCorrectRowIndex, interactiveCellId, style, rowHeightsOptions, rowHeightUtils, rowManager, popoverContext, pagination, cellContext, isFirstColumn, isLastColumn, isLeadingControlColumn, isTrailingControlColumn, textTransform]);
   if (isLeadingControlColumn) {
     var leadingColumn = leadingControlColumns[colIndex];
     var id = leadingColumn.id,
       rowCellRender = leadingColumn.rowCellRender;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
       columnId: id,
       width: leadingColumn.width,
       renderCellValue: rowCellRender,
@@ -105,7 +106,7 @@ var Cell = function Cell(_ref) {
     var trailingColumn = trailingControlColumns[trailingcolIndex];
     var _id = trailingColumn.id,
       _rowCellRender = trailingColumn.rowCellRender;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
       columnId: _id,
       width: trailingColumn.width,
       renderCellValue: _rowCellRender,
@@ -114,9 +115,9 @@ var Cell = function Cell(_ref) {
   } else {
     // this is a normal data cell
     var columnType = schema[columnId] ? schema[columnId].columnType : null;
-    var isExpandable = column.isExpandable !== undefined ? column.isExpandable : true;
+    var isExpandable = (column === null || column === void 0 ? void 0 : column.isExpandable) !== undefined ? column === null || column === void 0 ? void 0 : column.isExpandable : true;
     var width = columnWidths[columnId] || defaultColumnWidth;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
       columnId: columnId,
       column: column,
       columnType: columnType,
@@ -127,6 +128,6 @@ var Cell = function Cell(_ref) {
       isExpandable: isExpandable
     }, rest));
   }
-  return cellContent;
-};
-exports.Cell = Cell;
+});
+exports.CellWrapper = CellWrapper;
+CellWrapper.displayName = 'CellWrapper';

package/optimize/lib/components/datagrid/body/cell/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Cell", {
+Object.defineProperty(exports, "CellWrapper", {
   enumerable: true,
   get: function get() {
-    return _data_grid_cell_wrapper.Cell;
+    return _data_grid_cell_wrapper.CellWrapper;
   }
 });
 Object.defineProperty(exports, "DataGridCellPopoverContext", {

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

@@ -33,25 +33,26 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { (0, _defineProperty2.default)(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; }
 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
    */
@@ -90,14 +91,15 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
    * 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
     }),
@@ -120,25 +122,27 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   /**
    * 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 = (0, _react.useCallback)(function (_ref2) {
+  var cellProps = (0, _react.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 = (0, _react.useCallback)(function (_ref2) {
     var colIndex = _ref2.colIndex,
       visibleRowIndex = _ref2.visibleRowIndex,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
@@ -150,9 +154,8 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
       visibleRowIndex: visibleRowIndex,
       style: style
     }, cellProps);
-    return (0, _react2.jsx)(_cell.Cell, (0, _extends2.default)({}, props, rest));
-  }, [].concat((0, _toConsumableArray2.default)(Object.values(cellProps)), [getRowHeight]) // eslint-disable-line react-hooks/exhaustive-deps
-  );
+    return (0, _react2.jsx)(_cell.CellWrapper, (0, _extends2.default)({}, props, rest));
+  }, [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]);
 
   // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
   var _useState = (0, _react.useState)({}),
@@ -164,7 +167,7 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,
-    Cell: _Cell,
+    Cell: Cell,
     setCustomGridBodyProps: setCustomGridBodyProps
   }), footerRow);
 };

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

@@ -5,13 +5,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._Cell = exports.EuiDataGridBodyVirtualized = exports.DataGridWrapperRowsContext = void 0;
+exports.EuiDataGridBodyVirtualized = exports.DataGridWrapperRowsContext = exports.Cell = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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");
@@ -34,48 +35,56 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * 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, (0, _extends2.default)({
+  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, (0, _extends2.default)({
     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 = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({
     ref: ref,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      height: style.height + headerRowHeight
-    })
+    style: innerElementStyles
   }, rest), headerRow, children), footerRow);
-});
+}));
 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,
@@ -93,6 +102,7 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
     pagination = _ref3.pagination,
+    sorting = _ref3.sorting,
     setVisibleColumns = _ref3.setVisibleColumns,
     switchColumnPos = _ref3.switchColumnPos,
     onColumnResize = _ref3.onColumnResize,
@@ -142,14 +152,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
     }),
@@ -257,29 +268,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, (0, _extends2.default)({}, 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,
@@ -296,9 +291,34 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
       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, (0, _extends2.default)({}, 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;
-};
-exports.EuiDataGridBodyVirtualized = EuiDataGridBodyVirtualized;
+  }), Cell), scrollBorderOverlay) : null;
+});
+exports.EuiDataGridBodyVirtualized = EuiDataGridBodyVirtualized;
+EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

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

@@ -95,8 +95,10 @@ var useRowManager = function useRowManager(_ref) {
       });
     }
   }, [rowClasses]);
-  return {
-    getRow: getRow
-  };
+  return (0, _react.useMemo)(function () {
+    return {
+      getRow: getRow
+    };
+  }, [getRow]);
 };
 exports.useRowManager = useRowManager;

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

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

@@ -1,15 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDataGridControlHeaderCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 var _react2 = require("@emotion/react");
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +21,7 @@ var _react2 = require("@emotion/react");
  * 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,
@@ -33,5 +36,6 @@ var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
   }), (0, _react2.jsx)("div", {
     className: "euiDataGridHeaderCell__content"
   }, (0, _react2.jsx)(HeaderCellRender, null)));
-};
-exports.EuiDataGridControlHeaderCell = EuiDataGridControlHeaderCell;
+});
+exports.EuiDataGridControlHeaderCell = EuiDataGridControlHeaderCell;
+EuiDataGridControlHeaderCell.displayName = 'EuiDataGridControlHeaderCell';