@elastic/eui 60.1.2 → 61.0.0

package/optimize/lib/components/comment_list/comment_timeline.js

@@ -5,15 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.EuiCommentTimeline = void 0;
+exports.EuiCommentTimeline = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _common = require("../common");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
 
-var _icon = require("../icon");
+var _avatar = require("../avatar");
 
 var _react2 = require("@emotion/react");
 
@@ -24,45 +22,31 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var typeToClassNameMap = {
-  regular: 'euiCommentTimeline__icon--regular',
-  update: 'euiCommentTimeline__icon--update'
-};
-var TYPES = (0, _common.keysOf)(typeToClassNameMap);
-exports.TYPES = TYPES;
-
 var EuiCommentTimeline = function EuiCommentTimeline(_ref) {
-  var className = _ref.className,
-      timelineIcon = _ref.timelineIcon,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'regular' : _ref$type;
-  var classes = (0, _classnames.default)('euiCommentTimeline', className);
-  var iconClasses = (0, _classnames.default)({
-    'euiCommentTimeline__icon--default': !timelineIcon || typeof timelineIcon === 'string'
-  }, typeToClassNameMap[type]);
+  var timelineIcon = _ref.timelineIcon,
+      username = _ref.username;
   var iconRender;
-
-  if (typeof timelineIcon === 'string') {
-    iconRender = (0, _react2.jsx)(_icon.EuiIcon, {
-      size: type === 'update' ? 'm' : 'l',
-      type: timelineIcon
+  var avatarClassName = 'euiCommentAvatar';
+  var iconIsString = typeof timelineIcon === 'string';
+  var iconIsNode = (0, _typeof2.default)(timelineIcon) === 'object';
+
+  if (iconIsString) {
+    iconRender = (0, _react2.jsx)(_avatar.EuiAvatar, {
+      className: avatarClassName,
+      name: username,
+      iconType: timelineIcon,
+      color: "subdued"
     });
-  } else if (timelineIcon) {
+  } else if (iconIsNode) {
     iconRender = timelineIcon;
   } else {
-    iconRender = (0, _react2.jsx)(_icon.EuiIcon, {
-      type: type === 'update' ? 'dot' : 'user',
-      size: type === 'update' ? 's' : 'l'
+    iconRender = (0, _react2.jsx)(_avatar.EuiAvatar, {
+      className: avatarClassName,
+      name: username
     });
   }
 
-  return (0, _react2.jsx)("div", {
-    className: classes
-  }, (0, _react2.jsx)("div", {
-    className: "euiCommentTimeline__content"
-  }, (0, _react2.jsx)("div", {
-    className: iconClasses
-  }, iconRender)));
+  return (0, _react2.jsx)(_react.default.Fragment, null, iconRender);
 };
 
 exports.EuiCommentTimeline = EuiCommentTimeline;

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

@@ -82,7 +82,8 @@ var Cell = function Cell(_ref) {
       schemaDetectors = data.schemaDetectors,
       rowHeightsOptions = data.rowHeightsOptions,
       rowHeightUtils = data.rowHeightUtils,
-      rowManager = data.rowManager;
+      rowManager = data.rowManager,
+      pagination = data.pagination;
   var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
 
   var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
@@ -121,7 +122,8 @@ var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -351,7 +353,7 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
    */
 
   var rowHeightUtils = (0, _row_heights.useRowHeightUtils)({
-    gridRef: gridRef.current,
+    gridRef: gridRef,
     gridStyles: gridStyles,
     columns: columns,
     rowHeightsOptions: rowHeightsOptions
@@ -419,13 +421,16 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
     }
   }, (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,
-    className: "euiDataGrid__virtualized",
     columnCount: visibleColCount,
     width: finalWidth,
     columnWidth: getColumnWidth,
@@ -446,7 +451,8 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,
       rowHeightUtils: rowHeightUtils,
-      rowManager: rowManager
+      rowManager: rowManager,
+      pagination: pagination
     },
     rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
   }), Cell), scrollBorderOverlay) : null;

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

@@ -55,8 +55,8 @@ var _utils = require("../../../utils");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "rowHeightUtils", "isDefinedHeight"],
-    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
+    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
     _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 
 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); }
@@ -78,15 +78,12 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       rowHeightsOptions = _ref.rowHeightsOptions,
       rowIndex = _ref.rowIndex,
       colIndex = _ref.colIndex,
+      ariaRowIndex = _ref.ariaRowIndex,
       rowHeightUtils = _ref.rowHeightUtils,
       isDefinedHeight = _ref.isDefinedHeight,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
-  var positionText = (0, _i18n.useEuiI18n)('euiDataGridCell.position', 'Row: {row}; Column: {col}', {
-    row: rowIndex + 1,
-    col: colIndex + 1
-  });
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
@@ -98,7 +95,15 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, positionText)));
+  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiDataGridCell.position",
+    default: "{columnId}, column {col}, row {row}",
+    values: {
+      columnId: (column === null || column === void 0 ? void 0 : column.displayAsText) || rest.columnId,
+      col: colIndex + 1,
+      row: ariaRowIndex
+    }
+  }))));
 });
 
 var EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -478,6 +483,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           rowHeightUtils = _this$props8.rowHeightUtils,
           rowHeightsOptions = _this$props8.rowHeightsOptions,
           rowManager = _this$props8.rowManager,
+          pagination = _this$props8.pagination,
           rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded2);
       var rowIndex = rest.rowIndex,
           visibleRowIndex = rest.visibleRowIndex,
@@ -486,6 +492,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
       var cellClasses = (0, _classnames.default)('euiDataGridRowCell', (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classNames, 'euiDataGridRowCell--open', popoverIsOpen), _classNames), className);
+      var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
           _ = _this$state$cellProps2.isExpandable,
           cellPropsStyle = _this$state$cellProps2.style,
@@ -593,7 +600,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight
+        isDefinedHeight: isDefinedHeight,
+        ariaRowIndex: ariaRowIndex
       });
 
       var anchorClass = 'euiDataGridRowCell__expandFlex';
@@ -639,6 +647,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
 
       var content = (0, _react2.jsx)("div", (0, _extends2.default)({
         role: "gridcell",
+        "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
         ref: this.cellRef
       }, cellProps, {

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiDataGridHeaderCell = void 0;
+exports.usePopoverArrowNavigation = exports.EuiDataGridHeaderCell = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,6 +19,10 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _tabbable = require("tabbable");
+
+var _services = require("../../../../services");
+
 var _accessibility = require("../../../../services/accessibility");
 
 var _accessibility2 = require("../../../accessibility");
@@ -119,6 +123,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       isPopoverOpen = _useState2[0],
       setIsPopoverOpen = _useState2[1];
 
+  var popoverArrowNavigationProps = usePopoverArrowNavigation();
   var columnActions = (0, _column_actions.getColumnActions)({
     column: column,
     columns: columns,
@@ -154,9 +159,11 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, sortString && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", {
     id: screenReaderId
   }, sortString)), !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, sortingArrow, (0, _react2.jsx)("div", {
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id)) : (0, _react2.jsx)(_popover.EuiPopover, {
-    anchorClassName: "euiDataGridHeaderCell__anchor",
+    className: "euiDataGridHeaderCell__content",
+    title: displayAsText || id
+  }, display || displayAsText || id)) : (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    className: "eui-fullWidth",
+    anchorClassName: "eui-fullWidth",
     panelPaddingSize: "none",
     offset: 7,
     button: (0, _react2.jsx)("button", {
@@ -168,7 +175,8 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
         });
       }
     }, sortingArrow, (0, _react2.jsx)("div", {
-      className: "euiDataGridHeaderCell__content"
+      className: "euiDataGridHeaderCell__content",
+      title: displayAsText || id
     }, display || displayAsText || id), (0, _react2.jsx)(_icon.EuiIcon, {
       className: "euiDataGridHeaderCell__icon",
       type: "arrowDown",
@@ -181,11 +189,74 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     closePopover: function closePopover() {
       return setIsPopoverOpen(false);
     }
-  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_list_group.EuiListGroup, {
+  }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
     listItems: columnActions,
     gutterSize: "none",
     "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  }))));
+  })));
+};
+/**
+ * Add keyboard arrow navigation to the cell actions popover
+ * to match the UX of the rest of EuiDataGrid
+ */
+
+
+exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
+
+var usePopoverArrowNavigation = function usePopoverArrowNavigation() {
+  var popoverPanelRef = (0, _react.useRef)(null);
+  var actionsRef = (0, _react.useRef)(undefined);
+  var panelRef = (0, _react.useCallback)(function (ref) {
+    popoverPanelRef.current = ref;
+    actionsRef.current = ref ? (0, _tabbable.tabbable)(ref) : undefined;
+  }, []);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var _actionsRef$current;
+
+    if (e.key !== _services.keys.ARROW_DOWN && e.key !== _services.keys.ARROW_UP) return;
+    if (!((_actionsRef$current = actionsRef.current) !== null && _actionsRef$current !== void 0 && _actionsRef$current.length)) return;
+    e.preventDefault();
+    var initialState = document.activeElement === popoverPanelRef.current;
+    var currentIndex = !initialState ? actionsRef.current.findIndex(function (el) {
+      return document.activeElement === el;
+    }) : -1;
+    var lastIndex = actionsRef.current.length - 1;
+    var indexToFocus;
+
+    if (initialState) {
+      if (e.key === _services.keys.ARROW_DOWN) {
+        indexToFocus = 0;
+      } else if (e.key === _services.keys.ARROW_UP) {
+        indexToFocus = lastIndex;
+      }
+    } else {
+      if (e.key === _services.keys.ARROW_DOWN) {
+        indexToFocus = currentIndex + 1;
+
+        if (indexToFocus > lastIndex) {
+          indexToFocus = 0;
+        }
+      } else if (e.key === _services.keys.ARROW_UP) {
+        indexToFocus = currentIndex - 1;
+
+        if (indexToFocus < 0) {
+          indexToFocus = lastIndex;
+        }
+      }
+    }
+
+    actionsRef.current[indexToFocus].focus();
+  }, []);
+  return {
+    panelRef: panelRef,
+    panelProps: {
+      onKeyDown: onKeyDown
+    },
+    popoverScreenReaderText: (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiDataGridHeaderCell.actionsPopoverScreenReaderText",
+      default: "To navigate through the list of column actions, press the Tab or Up and Down arrow keys."
+    })
+  };
 };
 
-exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
+exports.usePopoverArrowNavigation = usePopoverArrowNavigation;

package/optimize/lib/components/datagrid/data_grid.js

@@ -264,6 +264,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   (0, _ref.useImperativeGridRef)({
     ref: ref,
+    gridRef: gridRef,
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
@@ -367,6 +368,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "data-test-subj": "euiDataGridBody",
     className: "euiDataGrid__content",
     role: "grid",
+    "aria-rowcount": rowCount,
     id: gridId
   }, wrappingDivFocusProps, gridAriaProps), (0, _react2.jsx)(_body.EuiDataGridBody, {
     columns: orderedVisibleColumns,

package/optimize/lib/components/datagrid/utils/focus.js

@@ -59,11 +59,17 @@ var useFocus = function useFocus(_ref) {
       focusedCell = _useState4[0],
       _setFocusedCell = _useState4[1];
 
-  var setFocusedCell = (0, _react.useCallback)(function (focusedCell) {
-    _setFocusedCell(focusedCell);
+  var setFocusedCell = (0, _react.useCallback)(function (nextFocusedCell) {
+    // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
+    // reference stable, and allows it to be used in places that need reference equality.
+    if (nextFocusedCell[0] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[0]) && nextFocusedCell[1] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[1])) {
+      return;
+    }
+
+    _setFocusedCell(nextFocusedCell);
 
     setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
-  }, []);
+  }, [focusedCell]);
   var previousCell = (0, _react.useRef)(undefined);
   (0, _react.useEffect)(function () {
     if (previousCell.current) {
@@ -95,13 +101,16 @@ var useFocus = function useFocus(_ref) {
       tabIndex: -1
     } : {
       tabIndex: 0,
-      onFocus: function onFocus(e) {
-        // if e.target (the source element of the `focus event`
-        // matches e.currentTarget (always the div with this onFocus listener)
-        // then the user has focused directly on the data grid wrapper (almost definitely by tabbing)
-        // so shift focus to the first visible and interactive cell within the grid
-        if (e.target === e.currentTarget) {
-          focusFirstVisibleInteractiveCell();
+      onKeyUp: function onKeyUp(e) {
+        // Ensure we only manually focus into the grid via keyboard tab -
+        // mouse users can accidentally trigger focus by clicking on scrollbars
+        if (e.key === _services.keys.TAB) {
+          // if e.target (the source element of the `focus event`) matches
+          // e.currentTarget (always the div with this onKeyUp listener)
+          // then the user has focused directly on the data grid wrapper
+          if (e.target === e.currentTarget) {
+            focusFirstVisibleInteractiveCell();
+          }
         }
       }
     };
@@ -160,7 +169,6 @@ var createKeyDownHandler = function createKeyDownHandler(_ref2) {
 
     var key = event.key,
         ctrlKey = event.ctrlKey;
-    console.log('???', event);
 
     if (key === _services.keys.ARROW_DOWN) {
       event.preventDefault();

package/optimize/lib/components/datagrid/utils/ref.js

@@ -16,6 +16,7 @@ var _react = require("react");
  */
 var useImperativeGridRef = function useImperativeGridRef(_ref) {
   var ref = _ref.ref,
+      gridRef = _ref.gridRef,
       setIsFullScreen = _ref.setIsFullScreen,
       focusContext = _ref.focusContext,
       cellPopoverContext = _ref.cellPopoverContext,
@@ -70,16 +71,36 @@ var useImperativeGridRef = function useImperativeGridRef(_ref) {
       rowIndex: visibleRowIndex,
       colIndex: colIndex
     });
-  }, [_openCellPopover, checkCellExists, findVisibleRowIndex]); // Set the ref APIs
+  }, [_openCellPopover, checkCellExists, findVisibleRowIndex]);
+  var scrollTo = (0, _react.useCallback)(function () {
+    var _gridRef$current;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.scrollTo.apply(_gridRef$current, args);
+  }, [gridRef]);
+  var scrollToItem = (0, _react.useCallback)(function () {
+    var _gridRef$current2;
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.scrollToItem.apply(_gridRef$current2, args);
+  }, [gridRef]); // Set the ref APIs
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       setIsFullScreen: setIsFullScreen,
       setFocusedCell: setFocusedCell,
       openCellPopover: openCellPopover,
-      closeCellPopover: closeCellPopover
+      closeCellPopover: closeCellPopover,
+      scrollTo: scrollTo,
+      scrollToItem: scrollToItem
     };
-  }, [setIsFullScreen, setFocusedCell, openCellPopover, closeCellPopover]);
+  }, [setIsFullScreen, setFocusedCell, openCellPopover, closeCellPopover, scrollTo, scrollToItem]);
 };
 /**
  * Throw a digestible error if the consumer attempts to focus into an invalid

package/optimize/lib/components/datagrid/utils/row_heights.js

@@ -45,10 +45,12 @@ var DEFAULT_ROW_HEIGHT = 34;
 exports.DEFAULT_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
 
 var RowHeightUtils = /*#__PURE__*/function () {
-  function RowHeightUtils() {
+  function RowHeightUtils(gridRef, rerenderGridBodyRef) {
     var _this = this;
 
     (0, _classCallCheck2.default)(this, RowHeightUtils);
+    this.gridRef = gridRef;
+    this.rerenderGridBodyRef = rerenderGridBodyRef;
     (0, _defineProperty2.default)(this, "styles", {
       paddingTop: 0,
       paddingBottom: 0
@@ -79,9 +81,7 @@ var RowHeightUtils = /*#__PURE__*/function () {
     });
     (0, _defineProperty2.default)(this, "heightsCache", new Map());
     (0, _defineProperty2.default)(this, "timerId", void 0);
-    (0, _defineProperty2.default)(this, "grid", void 0);
     (0, _defineProperty2.default)(this, "lastUpdatedRow", Infinity);
-    (0, _defineProperty2.default)(this, "rerenderGridBody", function () {});
   }
 
   (0, _createClass2.default)(RowHeightUtils, [{
@@ -179,6 +179,8 @@ var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "setRowHeight",
     value: function setRowHeight(rowIndex, colId) {
+      var _this$rerenderGridBod, _this$rerenderGridBod2;
+
       var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
       var visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
       var rowHeights = this.heightsCache.get(rowIndex) || new Map();
@@ -193,7 +195,7 @@ var RowHeightUtils = /*#__PURE__*/function () {
       this.resetRow(visibleRowIndex); // When an auto row height is updated, force a re-render
       // of the grid body to update the unconstrained height
 
-      this.rerenderGridBody();
+      (_this$rerenderGridBod = (_this$rerenderGridBod2 = this.rerenderGridBodyRef).current) === null || _this$rerenderGridBod === void 0 ? void 0 : _this$rerenderGridBod.call(_this$rerenderGridBod2);
     }
   }, {
     key: "pruneHiddenColumnHeights",
@@ -233,21 +235,11 @@ var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "resetGrid",
     value: function resetGrid() {
-      var _this$grid;
+      var _this$gridRef$current;
 
-      (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.resetAfterRowIndex(this.lastUpdatedRow);
+      (_this$gridRef$current = this.gridRef.current) === null || _this$gridRef$current === void 0 ? void 0 : _this$gridRef$current.resetAfterRowIndex(this.lastUpdatedRow);
       this.lastUpdatedRow = Infinity;
     }
-  }, {
-    key: "setGrid",
-    value: function setGrid(grid) {
-      this.grid = grid;
-    }
-  }, {
-    key: "setRerenderGridBody",
-    value: function setRerenderGridBody(rerenderGridBody) {
-      this.rerenderGridBody = rerenderGridBody;
-    }
   }]);
   return RowHeightUtils;
 }();
@@ -264,22 +256,25 @@ var useRowHeightUtils = function useRowHeightUtils(_ref2) {
       gridStyles = _ref2.gridStyles,
       columns = _ref2.columns,
       rowHeightsOptions = _ref2.rowHeightsOptions;
-  var rowHeightUtils = (0, _react.useMemo)(function () {
-    return new RowHeightUtils();
-  }, []); // Update rowHeightUtils with internal vars from outside dependencies
+  var forceRenderRef = (0, _services.useLatest)((0, _services.useForceRender)());
 
-  var forceRender = (0, _services.useForceRender)();
-  (0, _react.useEffect)(function () {
-    if (gridRef) rowHeightUtils.setGrid(gridRef);
-    rowHeightUtils.setRerenderGridBody(forceRender);
-  }, [gridRef, forceRender, rowHeightUtils]); // Forces a rerender whenever the row heights change, as this can cause the
+  var _useState = (0, _react.useState)(function () {
+    return new RowHeightUtils(gridRef, forceRenderRef);
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the
   // grid to change height/have scrollbars. Without this, grid rerendering is stale
 
+
   (0, _react.useEffect)(function () {
-    requestAnimationFrame(forceRender);
+    if (forceRenderRef.current == null) {
+      return;
+    }
+
+    requestAnimationFrame(forceRenderRef.current);
   }, [// Effects that should cause rerendering
   rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight, rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.rowHeights, // Dependencies
-  rowHeightUtils, forceRender]); // Re-cache styles whenever grid density changes
+  rowHeightUtils, forceRenderRef]); // Re-cache styles whenever grid density changes
 
   (0, _react.useEffect)(function () {
     rowHeightUtils.cacheStyles({
@@ -304,10 +299,10 @@ var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
   // and ignored by auto & static heights (unless the static height is < the min)
 
 
-  var _useState = (0, _react.useState)(DEFAULT_ROW_HEIGHT),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      minRowHeight = _useState2[0],
-      setRowHeight = _useState2[1]; // Default/fallback height for all rows
+  var _useState3 = (0, _react.useState)(DEFAULT_ROW_HEIGHT),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      minRowHeight = _useState4[0],
+      setRowHeight = _useState4[1]; // Default/fallback height for all rows
 
 
   var defaultRowHeight = (0, _react.useMemo)(function () {

package/optimize/lib/components/icon/assets/cluster.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["title", "titleId"];
+
+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; }
+
+var EuiIconCluster = function EuiIconCluster(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.5 7a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm0-6a3.5 3.5 0 013.465 3h3.12a1.5 1.5 0 110 1h-3.12a3.482 3.482 0 01-.662 1.596l2.1 2.1A3.5 3.5 0 118.036 12h-3.12a1.5 1.5 0 110-.999h3.12a3.482 3.482 0 01.662-1.596l-2.1-2.1A3.5 3.5 0 114.5 1zM12 4.5a.5.5 0 101 0 .5.5 0 00-1 0zm-.5 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5zM4 11.5a.5.5 0 11-1 0 .5.5 0 011 0z"
+  }));
+};
+
+var icon = EuiIconCluster;
+exports.icon = icon;