@elastic/eui 122.1.0 → 123.0.0

package/optimize/es/components/tabs/tabbed_content/tabbed_content.js

@@ -1,17 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "expand", "initialSelectedTab", "onTabClick", "selectedTab", "size", "tabs", "autoFocus"],
+var _excluded = ["autoFocus", "className", "expand", "initialSelectedTab", "onTabClick", "selectedTab", "size", "tabs"],
   _excluded2 = ["id", "name", "content"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,134 +11,99 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component, createRef } from 'react';
-import { htmlIdGenerator } from '../../../services';
+import React, { useRef, useState } from 'react';
 import { EuiTabs } from '../tabs';
 import { EuiTab } from '../tab';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { useGeneratedHtmlId } from '../../../services';
+
 /**
  * Marked as const so type is `['initial', 'selected']` instead of `string[]`
  */
+import { jsx as ___EmotionJSX } from "@emotion/react";
 export var AUTOFOCUS = ['initial', 'selected'];
-export var EuiTabbedContent = /*#__PURE__*/function (_Component) {
-  function EuiTabbedContent(props) {
-    var _this;
-    _classCallCheck(this, EuiTabbedContent);
-    _this = _callSuper(this, EuiTabbedContent, [props]);
-    _defineProperty(_this, "rootId", htmlIdGenerator()());
-    _defineProperty(_this, "tabsRef", /*#__PURE__*/createRef());
-    _defineProperty(_this, "focusTab", function () {
-      var targetTab = _this.tabsRef.current.querySelector("#".concat(_this.state.selectedTabId));
-      targetTab.focus();
-    });
-    _defineProperty(_this, "initializeFocus", function () {
-      if (!_this.state.inFocus && _this.props.autoFocus === 'selected') {
-        // Must wait for setState to finish before calling `.focus()`
-        // as the focus call triggers a blur on the first tab
-        _this.setState({
-          inFocus: true
-        }, function () {
-          _this.focusTab();
-        });
-      }
-    });
-    _defineProperty(_this, "removeFocus", function (blurEvent) {
-      // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
-      var currentTarget = blurEvent.currentTarget;
-      var relatedTarget = blurEvent.relatedTarget;
-      if (currentTarget.contains(relatedTarget) === false) {
-        _this.setState({
-          inFocus: false
-        });
-      }
-    });
-    _defineProperty(_this, "onTabClick", function (selectedTab) {
-      var _this$props = _this.props,
-        onTabClick = _this$props.onTabClick,
-        externalSelectedTab = _this$props.selectedTab;
-      if (onTabClick) {
-        onTabClick(selectedTab);
-      }
-
-      // Only track selection state if it's not controlled externally.
-      if (!externalSelectedTab) {
-        _this.setState({
-          selectedTabId: selectedTab.id
-        }, function () {
-          _this.focusTab();
-        });
-      }
-    });
-    var initialSelectedTab = props.initialSelectedTab,
-      _selectedTab = props.selectedTab,
-      tabs = props.tabs;
+export var EuiTabbedContent = function EuiTabbedContent(_ref) {
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? 'initial' : _ref$autoFocus,
+    className = _ref.className,
+    expand = _ref.expand,
+    initialSelectedTab = _ref.initialSelectedTab,
+    onTabClick = _ref.onTabClick,
+    externalSelectedTab = _ref.selectedTab,
+    size = _ref.size,
+    tabs = _ref.tabs,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var rootId = useGeneratedHtmlId();
+  var tabsRef = useRef(null);
+  var inFocusRef = useRef(false);
+  var _useState = useState(function () {
+      return externalSelectedTab ? undefined : (initialSelectedTab === null || initialSelectedTab === void 0 ? void 0 : initialSelectedTab.id) || tabs[0].id;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTabId = _useState2[0],
+    setSelectedTabId = _useState2[1];
+  var focusTab = function focusTab(id) {
+    var _tabsRef$current;
+    var targetTab = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.querySelector("#".concat(id));
+    targetTab === null || targetTab === void 0 || targetTab.focus();
+  };
+  var initializeFocus = function initializeFocus() {
+    if (!inFocusRef.current && autoFocus === 'selected') {
+      inFocusRef.current = true;
+      focusTab(selectedTabId);
+    }
+  };
+  var removeFocus = function removeFocus(blurEvent) {
+    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
+    var currentTarget = blurEvent.currentTarget;
+    var relatedTarget = blurEvent.relatedTarget;
+    if (currentTarget.contains(relatedTarget) === false) {
+      inFocusRef.current = false;
+    }
+  };
+  var handleTabClick = function handleTabClick(tab) {
+    onTabClick === null || onTabClick === void 0 || onTabClick(tab);
 
     // Only track selection state if it's not controlled externally.
-    var selectedTabId;
-    if (!_selectedTab) {
-      selectedTabId = (initialSelectedTab === null || initialSelectedTab === void 0 ? void 0 : initialSelectedTab.id) || tabs[0].id;
+    if (!externalSelectedTab) {
+      setSelectedTabId(tab.id);
+      focusTab(tab.id);
     }
-    _this.state = {
-      selectedTabId: selectedTabId,
-      inFocus: false
-    };
-    return _this;
-  }
-  _inherits(EuiTabbedContent, _Component);
-  return _createClass(EuiTabbedContent, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        expand = _this$props2.expand,
-        initialSelectedTab = _this$props2.initialSelectedTab,
-        onTabClick = _this$props2.onTabClick,
-        externalSelectedTab = _this$props2.selectedTab,
-        size = _this$props2.size,
-        tabs = _this$props2.tabs,
-        autoFocus = _this$props2.autoFocus,
-        rest = _objectWithoutProperties(_this$props2, _excluded);
+  };
 
-      // Allow the consumer to control tab selection.
-      var selectedTab = externalSelectedTab || tabs.find(function (tab) {
-        return tab.id === _this2.state.selectedTabId;
-      }) || tabs[0]; // Fall back to the first tab if a selected tab can't be found
+  // Allow the consumer to control tab selection.
+  var selectedTab = externalSelectedTab || tabs.find(function (tab) {
+    return tab.id === selectedTabId;
+  }) || tabs[0]; // Fall back to the first tab if a selected tab can't be found
 
-      var selectedTabContent = selectedTab.content,
-        selectedTabId = selectedTab.id;
-      return ___EmotionJSX("div", _extends({
-        className: className
-      }, rest), ___EmotionJSX(EuiTabs, {
-        ref: this.tabsRef,
-        expand: expand,
-        size: size,
-        onFocus: this.initializeFocus,
-        onBlur: this.removeFocus
-      }, tabs.map(function (tab) {
-        var id = tab.id,
-          name = tab.name,
-          content = tab.content,
-          tabProps = _objectWithoutProperties(tab, _excluded2);
-        var props = _objectSpread(_objectSpread({
-          key: id,
-          id: id
-        }, tabProps), {}, {
-          onClick: function onClick() {
-            return _this2.onTabClick(tab);
-          },
-          isSelected: tab === selectedTab,
-          'aria-controls': "".concat(_this2.rootId)
-        });
-        return ___EmotionJSX(EuiTab, props, name);
-      })), ___EmotionJSX("div", {
-        role: "tabpanel",
-        id: "".concat(this.rootId),
-        "aria-labelledby": selectedTabId
-      }, selectedTabContent));
-    }
-  }]);
-}(Component);
-_defineProperty(EuiTabbedContent, "defaultProps", {
-  autoFocus: 'initial'
-});
+  var selectedTabContent = selectedTab.content,
+    selectedTabContentId = selectedTab.id;
+  return ___EmotionJSX("div", _extends({
+    className: className
+  }, rest), ___EmotionJSX(EuiTabs, {
+    ref: tabsRef,
+    expand: expand,
+    size: size,
+    onFocus: initializeFocus,
+    onBlur: removeFocus
+  }, tabs.map(function (tab) {
+    var id = tab.id,
+      name = tab.name,
+      content = tab.content,
+      tabProps = _objectWithoutProperties(tab, _excluded2);
+    return ___EmotionJSX(EuiTab, _extends({
+      key: id,
+      id: id
+    }, tabProps, {
+      onClick: function onClick() {
+        return handleTabClick(tab);
+      },
+      isSelected: tab === selectedTab,
+      "aria-controls": rootId
+    }), name);
+  })), ___EmotionJSX("div", {
+    role: "tabpanel",
+    id: rootId,
+    "aria-labelledby": selectedTabContentId
+  }, selectedTabContent));
+};
+EuiTabbedContent.displayName = 'EuiTabbedContent';

package/optimize/es/components/text_truncate/text_truncate.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["width", "onResize"],
-  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "calculationDelayMs", "containerRef", "className"],
+  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "calculationDelayMs", "containerRef", "className", "toolTipProps"],
   _excluded3 = ["onResize"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -45,6 +45,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     calculationDelayMs = _ref2.calculationDelayMs,
     containerRef = _ref2.containerRef,
     className = _ref2.className,
+    toolTipProps = _ref2.toolTipProps,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   // Note: This needs to be a state and not a ref to trigger a rerender on mount
   var _useState = useState(null),
@@ -146,11 +147,11 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     className: "euiTextTruncate__fullText",
     "data-test-subj": "fullText"
   }, children ? children(text) : text));
-  return isTruncating ? ___EmotionJSX(EuiToolTip, {
+  return isTruncating ? ___EmotionJSX(EuiToolTip, _extends({
     content: text,
     disableScreenReaderOutput: true,
     display: "block"
-  }, content) : content;
+  }, toolTipProps), content) : content;
 };
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,

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

@@ -24,7 +24,8 @@ var _row_heights = require("../utils/row_heights");
 var _scrolling = require("../utils/scrolling");
 var _utils = require("../../../utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "style"];
+var _excluded = ["children", "style"],
+  _excluded2 = ["onScroll"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -84,40 +85,93 @@ var InnerElement = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwar
   }, rest), headerRow, children), footerRow);
 }));
 InnerElement.displayName = 'EuiDataGridInnerElement';
-var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var leadingControlColumns = _ref3.leadingControlColumns,
-    trailingControlColumns = _ref3.trailingControlColumns,
-    columns = _ref3.columns,
-    visibleColCount = _ref3.visibleColCount,
-    schema = _ref3.schema,
-    schemaDetectors = _ref3.schemaDetectors,
-    rowCount = _ref3.rowCount,
-    _ref3$visibleRows = _ref3.visibleRows,
-    startRow = _ref3$visibleRows.startRow,
-    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,
-    rowHeightsOptions = _ref3.rowHeightsOptions,
-    virtualizationOptions = _ref3.virtualizationOptions,
-    isFullScreen = _ref3.isFullScreen,
-    gridStyles = _ref3.gridStyles,
-    gridWidth = _ref3.gridWidth,
-    gridRef = _ref3.gridRef,
-    gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef,
-    className = _ref3.className,
-    canDragAndDropColumns = _ref3.canDragAndDropColumns,
-    _ref3$showHeader = _ref3.showHeader,
-    showHeader = _ref3$showHeader === void 0 ? true : _ref3$showHeader;
+var DataGridOuterElementContext = /*#__PURE__*/(0, _react.createContext)({
+  scrollPositionRef: {
+    current: null
+  }
+});
+var clampScrollOffset = function clampScrollOffset(offset, max) {
+  return Math.max(0, Math.min(offset, max));
+};
+var OuterElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
+  var onScroll = _ref3.onScroll,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+  var _useContext2 = (0, _react.useContext)(DataGridOuterElementContext),
+    _useContext2$outerEle = _useContext2.outerElementType,
+    Element = _useContext2$outerEle === void 0 ? 'div' : _useContext2$outerEle,
+    direction = _useContext2.direction,
+    scrollPositionRef = _useContext2.scrollPositionRef;
+
+  // react-window compares the raw scroll offsets against its own clamped
+  // offsets, and flags the grid as scrolling (setting `pointer-events: none`
+  // on the inner element) whenever they differ. Firefox can report a
+  // `scrollTop` above the maximum at fractional device pixel ratios, which
+  // makes every scroll event at the bottom of the grid look like a scroll,
+  // so hovered cells lose the pointer and tooltips repeatedly open and close.
+  var onScrollIfMoved = (0, _react.useCallback)(function (event) {
+    if (direction !== 'rtl') {
+      var _event$currentTarget = event.currentTarget,
+        scrollTop = _event$currentTarget.scrollTop,
+        scrollLeft = _event$currentTarget.scrollLeft,
+        scrollHeight = _event$currentTarget.scrollHeight,
+        scrollWidth = _event$currentTarget.scrollWidth,
+        clientHeight = _event$currentTarget.clientHeight,
+        clientWidth = _event$currentTarget.clientWidth;
+      var scrollPosition = {
+        scrollTop: clampScrollOffset(scrollTop, scrollHeight - clientHeight),
+        scrollLeft: clampScrollOffset(scrollLeft, scrollWidth - clientWidth)
+      };
+      var previousScrollPosition = scrollPositionRef.current;
+      if (previousScrollPosition && scrollPosition.scrollTop === previousScrollPosition.scrollTop && scrollPosition.scrollLeft === previousScrollPosition.scrollLeft) {
+        return;
+      }
+      // react-window may not have rendered the previous event's position
+      // yet, so the ref must reflect every forwarded event, not only the
+      // positions react-window reports back through its `onScroll` prop.
+      scrollPositionRef.current = scrollPosition;
+    }
+    onScroll(event);
+  }, [onScroll, direction, scrollPositionRef]);
+  return (0, _react2.jsx)(Element, (0, _extends2.default)({
+    ref: ref,
+    onScroll: onScrollIfMoved
+  }, rest));
+});
+OuterElement.displayName = 'EuiDataGridOuterElement';
+var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
+  var leadingControlColumns = _ref4.leadingControlColumns,
+    trailingControlColumns = _ref4.trailingControlColumns,
+    columns = _ref4.columns,
+    visibleColCount = _ref4.visibleColCount,
+    schema = _ref4.schema,
+    schemaDetectors = _ref4.schemaDetectors,
+    rowCount = _ref4.rowCount,
+    _ref4$visibleRows = _ref4.visibleRows,
+    startRow = _ref4$visibleRows.startRow,
+    endRow = _ref4$visibleRows.endRow,
+    visibleRowCount = _ref4$visibleRows.visibleRowCount,
+    renderCellValue = _ref4.renderCellValue,
+    cellContext = _ref4.cellContext,
+    renderCellPopover = _ref4.renderCellPopover,
+    renderFooterCellValue = _ref4.renderFooterCellValue,
+    interactiveCellId = _ref4.interactiveCellId,
+    pagination = _ref4.pagination,
+    sorting = _ref4.sorting,
+    setVisibleColumns = _ref4.setVisibleColumns,
+    switchColumnPos = _ref4.switchColumnPos,
+    onColumnResize = _ref4.onColumnResize,
+    rowHeightsOptions = _ref4.rowHeightsOptions,
+    virtualizationOptions = _ref4.virtualizationOptions,
+    isFullScreen = _ref4.isFullScreen,
+    gridStyles = _ref4.gridStyles,
+    gridWidth = _ref4.gridWidth,
+    gridRef = _ref4.gridRef,
+    gridItemsRendered = _ref4.gridItemsRendered,
+    wrapperRef = _ref4.wrapperRef,
+    className = _ref4.className,
+    canDragAndDropColumns = _ref4.canDragAndDropColumns,
+    _ref4$showHeader = _ref4.showHeader,
+    showHeader = _ref4$showHeader === void 0 ? true : _ref4$showHeader;
   /**
    * Grid refs & observers
    */
@@ -313,7 +367,30 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       footerRow: footerRow
     };
   }, [headerRowHeight, headerRow, footerRow, showHeader]);
+  var scrollPositionRef = (0, _react.useRef)(null);
+  var outerElementContextValue = (0, _react.useMemo)(function () {
+    return {
+      outerElementType: virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.outerElementType,
+      direction: virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.direction,
+      scrollPositionRef: scrollPositionRef
+    };
+  }, [virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.outerElementType, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.direction]);
   var onScroll = (0, _react.useCallback)(function (args) {
+    var element = outerGridRef.current;
+    // `scrollTo` reports the requested offset, which can sit past the
+    // end. Storing that would replace the clamped position already
+    // taken from the DOM. Leave the ref unchanged instead of writing
+    // the clamped value: a scroll event that has not arrived yet still
+    // differs from the previous position and is forwarded.
+    var topInRange = element == null || args.scrollTop === clampScrollOffset(args.scrollTop, element.scrollHeight - element.clientHeight);
+    var leftInRange = element == null || args.scrollLeft === clampScrollOffset(args.scrollLeft, element.scrollWidth - element.clientWidth);
+    if (topInRange && leftInRange) {
+      scrollPositionRef.current = {
+        scrollTop: args.scrollTop,
+        scrollLeft: args.scrollLeft
+      };
+    }
+
     // check only if a callback is passed
     if (typeof (virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll) !== 'function') return;
     var enhancedArgs = _objectSpread(_objectSpread({}, args), {}, {
@@ -357,10 +434,13 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
   }, [outerGridRef, virtualizationOptions]);
   return _utils.IS_JEST_ENVIRONMENT || finalWidth > 0 ? (0, _react2.jsx)(DataGridWrapperRowsContext.Provider, {
     value: rowWrapperContextValue
+  }, (0, _react2.jsx)(DataGridOuterElementContext.Provider, {
+    value: outerElementContextValue
   }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, (0, _extends2.default)({}, virtualizationOptions, {
     ref: gridRef,
     className: (0, _classnames.default)('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
+    outerElementType: OuterElement,
     innerElementType: InnerElement,
     outerRef: outerGridRef,
     innerRef: innerGridRef,
@@ -372,6 +452,6 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     itemData: itemData,
     rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 || showHeader === false && innerGridRef.current ? visibleRowCount : 0,
     onScroll: onScroll
-  }), Cell), scrollBorderOverlay) : null;
+  }), Cell)), scrollBorderOverlay) : null;
 });
 EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

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

@@ -298,7 +298,10 @@ var useRowHeightUtils = exports.useRowHeightUtils = function useRowHeightUtils(_
     if (forceRenderRef.current == null) {
       return;
     }
-    requestAnimationFrame(forceRenderRef.current);
+    var frameId = requestAnimationFrame(forceRenderRef.current);
+    return function () {
+      return cancelAnimationFrame(frameId);
+    };
   }, [// Effects that should cause rerendering
   rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight, rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.rowHeights,
   // Dependencies