@elastic/eui 122.1.0 → 123.0.0

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

@@ -7,26 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiTabbedContent = exports.AUTOFOCUS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _services = require("../../../services");
 var _tabs = require("../tabs");
 var _tab = require("../tab");
+var _services = require("../../../services");
 var _react2 = require("@emotion/react");
-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 _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; }
-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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
@@ -36,126 +26,92 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /**
  * Marked as const so type is `['initial', 'selected']` instead of `string[]`
  */
+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; }
 var AUTOFOCUS = exports.AUTOFOCUS = ['initial', 'selected'];
-var EuiTabbedContent = exports.EuiTabbedContent = /*#__PURE__*/function (_Component) {
-  function EuiTabbedContent(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiTabbedContent);
-    _this = _callSuper(this, EuiTabbedContent, [props]);
-    (0, _defineProperty2.default)(_this, "rootId", (0, _services.htmlIdGenerator)()());
-    (0, _defineProperty2.default)(_this, "tabsRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(_this, "focusTab", function () {
-      var targetTab = _this.tabsRef.current.querySelector("#".concat(_this.state.selectedTabId));
-      targetTab.focus();
-    });
-    (0, _defineProperty2.default)(_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();
-        });
-      }
-    });
-    (0, _defineProperty2.default)(_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
-        });
-      }
-    });
-    (0, _defineProperty2.default)(_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;
+var EuiTabbedContent = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var rootId = (0, _services.useGeneratedHtmlId)();
+  var tabsRef = (0, _react.useRef)(null);
+  var inFocusRef = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(function () {
+      return externalSelectedTab ? undefined : (initialSelectedTab === null || initialSelectedTab === void 0 ? void 0 : initialSelectedTab.id) || tabs[0].id;
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_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;
-  }
-  (0, _inherits2.default)(EuiTabbedContent, _Component);
-  return (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_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 (0, _react2.jsx)("div", (0, _extends2.default)({
-        className: className
-      }, rest), (0, _react2.jsx)(_tabs.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 = (0, _objectWithoutProperties2.default)(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 (0, _react2.jsx)(_tab.EuiTab, props, name);
-      })), (0, _react2.jsx)("div", {
-        role: "tabpanel",
-        id: "".concat(this.rootId),
-        "aria-labelledby": selectedTabId
-      }, selectedTabContent));
-    }
-  }]);
-}(_react.Component);
-(0, _defineProperty2.default)(EuiTabbedContent, "defaultProps", {
-  autoFocus: 'initial'
-});
+  var selectedTabContent = selectedTab.content,
+    selectedTabContentId = selectedTab.id;
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    className: className
+  }, rest), (0, _react2.jsx)(_tabs.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 = (0, _objectWithoutProperties2.default)(tab, _excluded2);
+    return (0, _react2.jsx)(_tab.EuiTab, (0, _extends2.default)({
+      key: id,
+      id: id
+    }, tabProps, {
+      onClick: function onClick() {
+        return handleTabClick(tab);
+      },
+      isSelected: tab === selectedTab,
+      "aria-controls": rootId
+    }), name);
+  })), (0, _react2.jsx)("div", {
+    role: "tabpanel",
+    id: rootId,
+    "aria-labelledby": selectedTabContentId
+  }, selectedTabContent));
+};
+EuiTabbedContent.displayName = 'EuiTabbedContent';

package/optimize/lib/components/text_truncate/text_truncate.js

@@ -18,7 +18,7 @@ var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
 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
@@ -54,6 +54,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     calculationDelayMs = _ref2.calculationDelayMs,
     containerRef = _ref2.containerRef,
     className = _ref2.className,
+    toolTipProps = _ref2.toolTipProps,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   // Note: This needs to be a state and not a ref to trigger a rerender on mount
   var _useState = (0, _react.useState)(null),
@@ -155,11 +156,11 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     className: "euiTextTruncate__fullText",
     "data-test-subj": "fullText"
   }, children ? children(text) : text));
-  return isTruncating ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+  return isTruncating ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
     content: text,
     disableScreenReaderOutput: true,
     display: "block"
-  }, content) : content;
+  }, toolTipProps), content) : content;
 };
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "122.1.0",
+  "version": "123.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -111,7 +111,7 @@
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eslint-plugin-eui": "3.1.0",
+    "@elastic/eslint-plugin-eui": "3.2.0",
     "@elastic/eui-illustrations": "1.1.0",
     "@elastic/eui-theme-borealis": "8.1.0",
     "@emotion/babel-plugin": "^11.11.0",

package/test-env/components/datagrid/body/data_grid_body_virtualized.js

@@ -25,7 +25,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; }
@@ -85,40 +86,96 @@ 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.propTypes = {
+  onScroll: _propTypes.default.any.isRequired
+};
+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
    */
@@ -314,7 +371,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), {}, {
@@ -358,10 +438,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,
@@ -373,7 +456,7 @@ 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.propTypes = {
   leadingControlColumns: _propTypes.default.arrayOf(_propTypes.default.shape({

package/test-env/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