@elastic/eui 60.2.0 → 60.3.0

package/es/components/accordion/accordion.js

@@ -116,6 +116,14 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "generatedId", htmlIdGenerator()());
 
+    _defineProperty(_assertThisInitialized(_this), "resizeRef", function () {});
+
+    _defineProperty(_assertThisInitialized(_this), "observerRef", function (ref) {
+      _this.setChildContentRef(ref);
+
+      _this.resizeRef(ref);
+    });
+
     return _this;
   }
 
@@ -266,12 +274,9 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, ___EmotionJSX(EuiResizeObserver, {
         onResize: this.setChildContentHeight
       }, function (resizeRef) {
+        _this2.resizeRef = resizeRef;
         return ___EmotionJSX("div", {
-          ref: function ref(_ref) {
-            _this2.setChildContentRef(_ref);
-
-            resizeRef(_ref);
-          }
+          ref: _this2.observerRef
         }, ___EmotionJSX("div", {
           className: childrenClasses,
           css: cssChildrenStyles

package/es/components/context_menu/context_menu.js

@@ -404,7 +404,7 @@ EuiContextMenu.propTypes = {
       "data-test-subj": PropTypes.string
     }).isRequired),
     content: PropTypes.node,
-    width: PropTypes.number,
+    width: PropTypes.any,
     initialFocusedItemIndex: PropTypes.number,
 
     /**

package/es/components/datagrid/body/data_grid_body.js

@@ -70,7 +70,8 @@ export 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 = useContext(DataGridCellPopoverContext);
 
   var _useContext = useContext(DataGridWrapperRowsContext),
@@ -109,7 +110,8 @@ export var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -438,7 +440,8 @@ export var EuiDataGridBody = function EuiDataGridBody(props) {
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,
       rowHeightUtils: rowHeightUtils,
-      rowManager: rowManager
+      rowManager: rowManager,
+      pagination: pagination
     },
     rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
   }), Cell), scrollBorderOverlay) : null;

package/es/components/datagrid/body/data_grid_cell.js

@@ -1,7 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -51,7 +51,7 @@ import { tabbable } from 'tabbable';
 import { keys } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFocusTrap } from '../../focus_trap';
-import { useEuiI18n } from '../../i18n';
+import { EuiI18n } from '../../i18n';
 import { hasResizeObserver } from '../../observer/resize_observer/resize_observer';
 import { DataGridFocusContext } from '../utils/focus';
 import { EuiDataGridCellActions, EuiDataGridCellPopoverActions } from './data_grid_cell_actions';
@@ -65,16 +65,13 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
       rowHeightsOptions = _ref.rowHeightsOptions,
       rowIndex = _ref.rowIndex,
       colIndex = _ref.colIndex,
+      ariaRowIndex = _ref.ariaRowIndex,
       rowHeightUtils = _ref.rowHeightUtils,
       isDefinedHeight = _ref.isDefinedHeight,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
-  var positionText = useEuiI18n('euiDataGridCell.position', 'Row: {row}; Column: {col}', {
-    row: rowIndex + 1,
-    col: colIndex + 1
-  });
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
@@ -86,7 +83,15 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, positionText)));
+  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, '- ', ___EmotionJSX(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
+    }
+  }))));
 });
 EuiDataGridCellContent.propTypes = {
   rowIndex: PropTypes.number.isRequired,
@@ -542,10 +547,40 @@ EuiDataGridCellContent.propTypes = {
     onChange: PropTypes.func
   }),
   rowHeightUtils: PropTypes.any,
+  pagination: PropTypes.shape({
+    /**
+       * The index of the current page, starts at 0 for the first page
+       */
+    pageIndex: PropTypes.number.isRequired,
+
+    /**
+       * How many rows should initially be shown per page.
+       * Pass `0` to display the selected "Show all" option and hide the pagination.
+       */
+    pageSize: PropTypes.number.isRequired,
+
+    /**
+       * An array of page sizes the user can select from.
+       * Pass `0` as one of the options to create a "Show all" option.
+       * Leave this prop undefined or use an empty array to hide "Rows per page" select button.
+       */
+    pageSizeOptions: PropTypes.arrayOf(PropTypes.number.isRequired),
+
+    /**
+       * A callback for when the user changes the page size selection
+       */
+    onChangeItemsPerPage: PropTypes.func.isRequired,
+
+    /**
+       * A callback for when the current page index changes
+       */
+    onChangePage: PropTypes.func.isRequired
+  }),
   setCellProps: PropTypes.func.isRequired,
   setCellContentsRef: PropTypes.any.isRequired,
   isExpanded: PropTypes.bool.isRequired,
-  isDefinedHeight: PropTypes.bool.isRequired
+  isDefinedHeight: PropTypes.bool.isRequired,
+  ariaRowIndex: PropTypes.number.isRequired
 };
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   _inherits(EuiDataGridCell, _Component);
@@ -950,6 +985,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           rowHeightUtils = _this$props8.rowHeightUtils,
           rowHeightsOptions = _this$props8.rowHeightsOptions,
           rowManager = _this$props8.rowManager,
+          pagination = _this$props8.pagination,
           rest = _objectWithoutProperties(_this$props8, _excluded2);
 
       var rowIndex = rest.rowIndex,
@@ -959,6 +995,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
       var cellClasses = classNames('euiDataGridRowCell', (_classNames = {}, _defineProperty(_classNames, "euiDataGridRowCell--".concat(columnType), columnType), _defineProperty(_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,
@@ -1067,7 +1104,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight
+        isDefinedHeight: isDefinedHeight,
+        ariaRowIndex: ariaRowIndex
       });
 
       var anchorClass = 'euiDataGridRowCell__expandFlex';
@@ -1114,6 +1152,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
 
       var content = ___EmotionJSX("div", _extends({
         role: "gridcell",
+        "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
         ref: this.cellRef
       }, cellProps, {
@@ -1538,5 +1577,34 @@ EuiDataGridCell.propTypes = {
   rowHeightUtils: PropTypes.any,
   rowManager: PropTypes.shape({
     getRow: PropTypes.func.isRequired
+  }),
+  pagination: PropTypes.shape({
+    /**
+       * The index of the current page, starts at 0 for the first page
+       */
+    pageIndex: PropTypes.number.isRequired,
+
+    /**
+       * How many rows should initially be shown per page.
+       * Pass `0` to display the selected "Show all" option and hide the pagination.
+       */
+    pageSize: PropTypes.number.isRequired,
+
+    /**
+       * An array of page sizes the user can select from.
+       * Pass `0` as one of the options to create a "Show all" option.
+       * Leave this prop undefined or use an empty array to hide "Rows per page" select button.
+       */
+    pageSizeOptions: PropTypes.arrayOf(PropTypes.number.isRequired),
+
+    /**
+       * A callback for when the user changes the page size selection
+       */
+    onChangeItemsPerPage: PropTypes.func.isRequired,
+
+    /**
+       * A callback for when the current page index changes
+       */
+    onChangePage: PropTypes.func.isRequired
   })
 };

package/es/components/datagrid/data_grid.js

@@ -257,6 +257,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
 
   useImperativeGridRef({
     ref: ref,
+    gridRef: gridRef,
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
@@ -360,6 +361,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-test-subj": "euiDataGridBody",
     className: "euiDataGrid__content",
     role: "grid",
+    "aria-rowcount": rowCount,
     id: gridId
   }, wrappingDivFocusProps, gridAriaProps), ___EmotionJSX(EuiDataGridBody, {
     columns: orderedVisibleColumns,

package/es/components/datagrid/utils/ref.js

@@ -8,6 +8,7 @@
 import { useImperativeHandle, useCallback } from 'react';
 export var useImperativeGridRef = function useImperativeGridRef(_ref) {
   var ref = _ref.ref,
+      gridRef = _ref.gridRef,
       setIsFullScreen = _ref.setIsFullScreen,
       focusContext = _ref.focusContext,
       cellPopoverContext = _ref.cellPopoverContext,
@@ -62,16 +63,36 @@ export var useImperativeGridRef = function useImperativeGridRef(_ref) {
       rowIndex: visibleRowIndex,
       colIndex: colIndex
     });
-  }, [_openCellPopover, checkCellExists, findVisibleRowIndex]); // Set the ref APIs
+  }, [_openCellPopover, checkCellExists, findVisibleRowIndex]);
+  var scrollTo = 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 = 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
 
   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/es/components/selectable/selectable.js

@@ -181,6 +181,8 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
           event.stopPropagation();
 
           if (_this.state.activeOptionIndex != null && optionsList) {
+            event.persist(); // NOTE: This is needed for React v16 backwards compatibility
+
             optionsList.onAddOrRemoveOption(_this.state.visibleOptions[_this.state.activeOptionIndex], event);
           }
 

package/eui.d.ts

@@ -6024,7 +6024,7 @@ declare module '@elastic/eui/src/components/horizontal_rule' {
 
 }
 declare module '@elastic/eui/src/components/context_menu/context_menu' {
-	import React, { Component, HTMLAttributes, ReactElement, ReactNode } from 'react';
+	import React, { Component, HTMLAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiContextMenuPanelTransitionDirection, EuiContextMenuPanelTransitionType } from '@elastic/eui/src/components/context_menu/context_menu_panel';
 	import { EuiContextMenuItemProps } from '@elastic/eui/src/components/context_menu/context_menu_item';
@@ -6045,7 +6045,7 @@ declare module '@elastic/eui/src/components/context_menu/context_menu' {
 	    title?: ReactNode;
 	    items?: EuiContextMenuPanelItemDescriptor[];
 	    content?: ReactNode;
-	    width?: number;
+	    width?: CSSProperties['width'];
 	    initialFocusedItemIndex?: number;
 	    /**
 	     * Alters the size of the items and the title
@@ -7178,6 +7178,8 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    onToggle: () => void;
 	    setChildContentRef: (node: HTMLDivElement | null) => void;
 	    generatedId: string;
+	    resizeRef: (e: HTMLElement | null) => void;
+	    observerRef: (ref: HTMLDivElement) => void;
 	    render(): JSX.Element;
 	}
 	export const EuiAccordion: React.ForwardRefExoticComponent<Omit<EuiAccordionProps, "theme"> & React.RefAttributes<Omit<EuiAccordionProps, "theme">>>;
@@ -9614,7 +9616,7 @@ declare module '@elastic/eui/src/components/token' {
 
 }
 declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
-	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject } from 'react';
+	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Component } from 'react';
 	import { VariableSizeGridProps, VariableSizeGrid as Grid, GridOnItemsRenderedProps } from 'react-window';
 	import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group';
 	import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui/src/components/button';
@@ -9622,6 +9624,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	import { RowHeightUtils } from '@elastic/eui/src/components/datagrid/utils/row_heights';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { EuiTokenProps } from '@elastic/eui/src/components/token';
+	export type ImperativeGridApi = Omit<Grid, keyof Component>;
 	export interface EuiDataGridToolbarProps {
 	    gridWidth: number;
 	    minSizeForControls?: number;
@@ -9913,6 +9916,14 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * Closes any currently open popovers in the data grid.
 	     */
 	    closeCellPopover: () => void;
+	    /**
+	     * Scrolls to a specified top and left offset.
+	     */
+	    scrollTo?: ImperativeGridApi['scrollTo'];
+	    /**
+	     * Scrolls to a specified rowIndex.
+	     */
+	    scrollToItem?: ImperativeGridApi['scrollToItem'];
 	}
 	export interface EuiDataGridColumnResizerProps {
 	    columnId: string;
@@ -10052,6 +10063,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    rowHeightsOptions?: EuiDataGridRowHeightsOptions;
 	    rowHeightUtils?: RowHeightUtils;
 	    rowManager?: EuiDataGridRowManager;
+	    pagination?: EuiDataGridPaginationProps;
 	}
 	export interface EuiDataGridCellState {
 	    cellProps: EuiDataGridSetCellProps;
@@ -11136,10 +11148,12 @@ declare module '@elastic/eui/src/components/datagrid/utils/data_grid_pagination'
 
 }
 declare module '@elastic/eui/src/components/datagrid/utils/ref' {
-	import { Ref } from 'react';
+	import { Ref, RefObject } from 'react';
+	import type { VariableSizeGrid } from 'react-window';
 	import { EuiDataGridRefProps, EuiDataGridProps, DataGridFocusContextShape, DataGridCellPopoverContextShape, DataGridSortingContextShape } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	interface Dependencies {
 	    ref: Ref<unknown>;
+	    gridRef: RefObject<VariableSizeGrid>;
 	    setIsFullScreen: EuiDataGridRefProps['setIsFullScreen'];
 	    focusContext: DataGridFocusContextShape;
 	    cellPopoverContext: DataGridCellPopoverContextShape;
@@ -11148,7 +11162,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/ref' {
 	    rowCount: number;
 	    visibleColCount: number;
 	}
-	export const useImperativeGridRef: ({ ref, setIsFullScreen, focusContext, cellPopoverContext, sortingContext: { sortedRowMap }, pagination, rowCount, visibleColCount, }: Dependencies) => void;
+	export const useImperativeGridRef: ({ ref, gridRef, setIsFullScreen, focusContext, cellPopoverContext, sortingContext: { sortedRowMap }, pagination, rowCount, visibleColCount, }: Dependencies) => void;
 	/**
 	 * Throw a digestible error if the consumer attempts to focus into an invalid
 	 * cell range, which should also stop the APIs from continuing

package/i18ntokens.json

@@ -5,11 +5,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 338,
+        "line": 346,
         "column": 16
       },
       "end": {
-        "line": 338,
+        "line": 346,
         "column": 76
       }
     },
@@ -849,16 +849,16 @@
   },
   {
     "token": "euiDataGridCell.position",
-    "defString": "Row: {row}; Column: {col}",
+    "defString": "{columnId}, column {col}, row {row}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 67,
-        "column": 25
+        "line": 97,
+        "column": 12
       },
       "end": {
-        "line": 71,
-        "column": 5
+        "line": 105,
+        "column": 14
       }
     },
     "filepath": "src/components/datagrid/body/data_grid_cell.tsx"
@@ -1493,11 +1493,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 337,
+        "line": 338,
         "column": 22
       },
       "end": {
-        "line": 341,
+        "line": 342,
         "column": 5
       }
     },
@@ -1509,11 +1509,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 342,
+        "line": 343,
         "column": 27
       },
       "end": {
-        "line": 346,
+        "line": 347,
         "column": 5
       }
     },
@@ -1525,11 +1525,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 470,
+        "line": 472,
         "column": 18
       },
       "end": {
-        "line": 473,
+        "line": 475,
         "column": 20
       }
     },
@@ -4821,11 +4821,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 568,
+        "line": 569,
         "column": 16
       },
       "end": {
-        "line": 571,
+        "line": 572,
         "column": 18
       }
     },
@@ -4837,11 +4837,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 590,
+        "line": 591,
         "column": 14
       },
       "end": {
-        "line": 594,
+        "line": 595,
         "column": 16
       }
     },
@@ -4853,11 +4853,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 609,
+        "line": 610,
         "column": 14
       },
       "end": {
-        "line": 612,
+        "line": 613,
         "column": 16
       }
     },
@@ -4869,11 +4869,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 674,
+        "line": 675,
         "column": 6
       },
       "end": {
-        "line": 674,
+        "line": 675,
         "column": 78
       }
     },
@@ -4885,11 +4885,11 @@
     "highlighting": "code",
     "loc": {
       "start": {
-        "line": 701,
+        "line": 702,
         "column": 6
       },
       "end": {
-        "line": 707,
+        "line": 708,
         "column": 8
       }
     },
@@ -4901,11 +4901,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 719,
+        "line": 720,
         "column": 6
       },
       "end": {
-        "line": 728,
+        "line": 729,
         "column": 7
       }
     },
@@ -4917,11 +4917,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 719,
+        "line": 720,
         "column": 6
       },
       "end": {
-        "line": 728,
+        "line": 729,
         "column": 7
       }
     },

package/lib/components/accordion/accordion.js

@@ -136,6 +136,14 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "generatedId", (0, _services.htmlIdGenerator)()());
 
+    _defineProperty(_assertThisInitialized(_this), "resizeRef", function () {});
+
+    _defineProperty(_assertThisInitialized(_this), "observerRef", function (ref) {
+      _this.setChildContentRef(ref);
+
+      _this.resizeRef(ref);
+    });
+
     return _this;
   }
 
@@ -285,12 +293,9 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
         onResize: this.setChildContentHeight
       }, function (resizeRef) {
+        _this2.resizeRef = resizeRef;
         return (0, _react2.jsx)("div", {
-          ref: function ref(_ref) {
-            _this2.setChildContentRef(_ref);
-
-            resizeRef(_ref);
-          }
+          ref: _this2.observerRef
         }, (0, _react2.jsx)("div", {
           className: childrenClasses,
           css: cssChildrenStyles

package/lib/components/context_menu/context_menu.js

@@ -421,7 +421,7 @@ EuiContextMenu.propTypes = {
       "data-test-subj": _propTypes.default.string
     }).isRequired),
     content: _propTypes.default.node,
-    width: _propTypes.default.number,
+    width: _propTypes.default.any,
     initialFocusedItemIndex: _propTypes.default.number,
 
     /**

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

@@ -96,7 +96,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),
@@ -135,7 +136,8 @@ var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -468,7 +470,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;