@elastic/eui 122.1.0 → 123.0.0

package/es/components/text_truncate/text_truncate.js

@@ -1,5 +1,5 @@
 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"];
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -105,7 +105,11 @@ EuiTextTruncate.propTypes = {
        * fonts are done loading or layout is done shifting or settling. Adding a delay
        * may help resolve any rendering issues.
        */
-  calculationDelayMs: PropTypes.number
+  calculationDelayMs: PropTypes.number,
+  /**
+       * Placement of the tooltip that shows the full text while truncating.
+       */
+  toolTipProps: PropTypes.any
 };
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var width = _ref2.width,
@@ -121,6 +125,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),
@@ -222,11 +227,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;
 };
 EuiTextTruncateWithWidth.propTypes = {
   width: PropTypes.number.isRequired,

package/eui.d.ts

@@ -9551,7 +9551,8 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles'
 }
 declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
 	import { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
-	import type { CommonProps } from '@elastic/eui/src/components/common'; const TRUNCATION_TYPES: readonly ["end", "start", "startEnd", "middle"];
+	import type { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiToolTipProps } from '@elastic/eui/src/components/tool_tip'; const TRUNCATION_TYPES: readonly ["end", "start", "startEnd", "middle"];
 	export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number];
 	export type EuiTextTruncateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onResize'> & CommonProps & {
 	    /**
@@ -9617,6 +9618,10 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
 	     * may help resolve any rendering issues.
 	     */
 	    calculationDelayMs?: number;
+	    /**
+	     * Placement of the tooltip that shows the full text while truncating.
+	     */
+	    toolTipProps?: Pick<EuiToolTipProps, 'position' | 'offset' | 'repositionOnScroll'>;
 	};
 	export const EuiTextTruncate: FunctionComponent<EuiTextTruncateProps>;
 	export {};
@@ -10907,11 +10912,11 @@ declare module '@elastic/eui/src/components/button/split_button' {
 
 }
 declare module '@elastic/eui/src/components/button' {
-	export type { EuiButtonColor, EuiButtonSize, EuiButtonProps } from '@elastic/eui/src/components/button/button';
+	export type { EuiButtonColor, EuiButtonSize, EuiButtonProps, EuiButtonPropsForAnchor, EuiButtonPropsForButton, } from '@elastic/eui/src/components/button/button';
 	export { COLORS, EuiButton } from '@elastic/eui/src/components/button/button';
 	export type { EuiButtonEmptyProps, EuiButtonEmptySizes } from '@elastic/eui/src/components/button/button_empty';
 	export { EuiButtonEmpty } from '@elastic/eui/src/components/button/button_empty';
-	export type { EuiButtonIconProps, EuiButtonIconPropsForButton, } from '@elastic/eui/src/components/button/button_icon';
+	export type { EuiButtonIconProps, EuiButtonIconPropsForAnchor, EuiButtonIconPropsForButton, } from '@elastic/eui/src/components/button/button_icon';
 	export { EuiButtonIcon } from '@elastic/eui/src/components/button/button_icon';
 	export type { EuiButtonGroupOptionProps, EuiButtonGroupProps, EuiButtonGroupChildrenProps, } from '@elastic/eui/src/components/button/button_group';
 	export { EuiButtonGroup } from '@elastic/eui/src/components/button/button_group';
@@ -18049,9 +18054,9 @@ declare module '@elastic/eui/src/components/table' {
 
 }
 declare module '@elastic/eui/src/components/flyout/flyout_menu/types' {
-	import { HTMLAttributes } from 'react';
-	import { EuiButtonProps } from '@elastic/eui/src/components/button';
-	import { CommonProps, PropsForAnchor } from '@elastic/eui/src/components/common';
+	import { HTMLAttributes, MouseEventHandler } from 'react';
+	import { EuiButtonIconPropsForAnchor, EuiButtonIconPropsForButton, EuiButtonProps } from '@elastic/eui/src/components/button';
+	import { CommonProps, DataAttributeProps, PropsForAnchor } from '@elastic/eui/src/components/common';
 	import { EuiToolTipProps } from '@elastic/eui/src/components/tool_tip';
 	import type { IconType } from '@elastic/eui/src/components/icon';
 	export type EuiFlyoutMenuBackButtonProps = Pick<PropsForAnchor<EuiButtonProps>, 'aria-label' | 'data-test-subj' | 'onClick'>;
@@ -18105,31 +18110,28 @@ declare module '@elastic/eui/src/components/flyout/flyout_menu/types' {
 	 * Custom action item for the flyout menu component
 	 * @deprecated Use `EuiFlyoutMenuAction` with the `trailingActions` prop instead.
 	 */
-	export interface EuiFlyoutMenuCustomAction {
+	export interface EuiFlyoutMenuCustomAction extends DataAttributeProps {
 	    iconType: string;
 	    onClick: () => void;
 	    'aria-label': string;
 	}
 	/**
-	 * An action item for the `leadingActions` or `trailingActions` slots of the flyout menu.
+	 * The menu bar sets these props itself so every action looks the same.
 	 */
-	export interface EuiFlyoutMenuAction {
+	type EuiFlyoutMenuOwnedActionProps = 'color' | 'size' | 'display' | 'iconSize' | 'isSelected';
+	type EuiFlyoutMenuActionProps = DataAttributeProps & {
 	    /**
-	     * Icon type for the action button
+	     * Aria label for the action button
 	     */
-	    iconType: IconType;
+	    'aria-label': string;
 	    /**
 	     * onClick handler for the action button
 	     */
-	    onClick?: () => void;
-	    /**
-	     * Aria label for the action button
-	     */
-	    'aria-label': string;
+	    onClick?: MouseEventHandler<HTMLElement>;
 	    /**
-	     * Optional tooltip content shown on hover/focus of the action button.
-	     * When `isDisabled` is `true`, the action uses `aria-disabled` so the tooltip
-	     * remains reachable via hover/focus (unless overridden via `toolTipProps`).
+	     * Tooltip text shown on hover or focus.
+	     * When the action is disabled, also set `hasAriaDisabled`. This keeps
+	     * the button focusable so the tooltip remains reachable.
 	     */
 	    toolTipContent?: EuiToolTipProps['content'];
 	    /**
@@ -18137,26 +18139,13 @@ declare module '@elastic/eui/src/components/flyout/flyout_menu/types' {
 	     * Only used when `toolTipContent` is also provided.
 	     */
 	    toolTipProps?: Partial<Omit<EuiToolTipProps, 'content' | 'children'>>;
-	    /**
-	     * Disables the action button. Pair with `toolTipContent` to explain why
-	     * the action is unavailable.
-	     */
-	    isDisabled?: boolean;
-	    /**
-	     * Replaces the button icon with a loading spinner and disables the button.
-	     */
-	    isLoading?: boolean;
-	    /**
-	     * Renders the action as an anchor tag with the given URL, allowing users to
-	     * right-click and open in a new tab. When `isDisabled` or `isLoading` is
-	     * `true`, the element renders as a `<button>` regardless of this prop.
-	     */
-	    href?: string;
-	    /**
-	     * Target for the anchor tag. Only used when `href` is provided.
-	     */
-	    target?: string;
-	}
+	};
+	/**
+	 * An action item for the `leadingActions` or `trailingActions` slots of the flyout menu.
+	 *
+	 * Accepts any {@link EuiButtonIcon} prop except those the menu bar sets itself.
+	 */
+	export type EuiFlyoutMenuAction = (Omit<EuiButtonIconPropsForAnchor, EuiFlyoutMenuOwnedActionProps | 'aria-label' | 'children' | 'onClick'> & EuiFlyoutMenuActionProps) | (Omit<EuiButtonIconPropsForButton, EuiFlyoutMenuOwnedActionProps | 'aria-label' | 'children' | 'onClick'> & EuiFlyoutMenuActionProps);
 	/**
 	 * Props for EuiFlyoutMenu
 	 */
@@ -18228,6 +18217,7 @@ declare module '@elastic/eui/src/components/flyout/flyout_menu/types' {
 	     */
 	    pagination?: EuiFlyoutMenuPagination;
 	};
+	export {};
 
 }
 declare module '@elastic/eui/src/components/flyout/const' {
@@ -28629,7 +28619,7 @@ declare module '@elastic/eui/src/components/tabs/tab' {
 
 }
 declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content' {
-	import React, { Component, HTMLAttributes, ReactNode, FocusEvent } from 'react';
+	import { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
 	import { EuiTabsSizes } from '@elastic/eui/src/components/tabs/tabs';
 	import { EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 	import { CommonProps } from '@elastic/eui/src/components/common';
@@ -28642,10 +28632,6 @@ declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content'
 	    name: ReactNode;
 	    content: ReactNode;
 	}
-	interface EuiTabbedContentState {
-	    selectedTabId: string | undefined;
-	    inFocus: boolean;
-	}
 	export type EuiTabbedContentProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, 'autoFocus'> & {
 	    /**
 	     * When tabbing into the tabs, set the focus on `initial` for the first tab,
@@ -28674,20 +28660,7 @@ declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content'
 	     */
 	    tabs: EuiTabbedContentTab[];
 	};
-	export class EuiTabbedContent extends Component<EuiTabbedContentProps, EuiTabbedContentState> {
-	    static defaultProps: {
-	        autoFocus: EuiTabbedContentProps['autoFocus'];
-	    };
-	    private readonly rootId;
-	    private readonly tabsRef;
-	    constructor(props: EuiTabbedContentProps);
-	    focusTab: () => void;
-	    initializeFocus: () => void;
-	    removeFocus: (blurEvent: FocusEvent<HTMLDivElement>) => void;
-	    onTabClick: (selectedTab: EuiTabbedContentTab) => void;
-	    render(): React.JSX.Element;
-	}
-	export {};
+	export const EuiTabbedContent: FunctionComponent<EuiTabbedContentProps>;
 
 }
 declare module '@elastic/eui/src/components/tabs/tabbed_content' {
@@ -34566,6 +34539,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	        truncationOffset?: number;
 	        truncationPosition?: number;
 	        calculationDelayMs?: number;
+	        toolTipProps?: Pick<import ("@elastic/eui/src/components").EuiToolTipProps, "position" | "offset" | "repositionOnScroll">;
 	    } | undefined;
 	    renderSearchedText: (text: string, truncationProps?: EuiSelectableOptionsListProps["truncationProps"]) => React.JSX.Element;
 	    renderTruncatedText: (text: string, truncationProps?: EuiSelectableOptionsListProps["truncationProps"]) => React.JSX.Element;

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

@@ -20,7 +20,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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -88,40 +89,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 = _objectWithoutProperties(_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, _extends({
+    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
    */
@@ -317,7 +374,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), {}, {
@@ -361,10 +441,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, _extends({}, 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,
@@ -376,7 +459,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/lib/components/datagrid/utils/row_heights.js

@@ -309,7 +309,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