@elastic/eui 60.2.0 → 60.3.0

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

@@ -37,8 +37,8 @@ var _utils = require("../../../utils");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "rowHeightUtils", "isDefinedHeight"],
-    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
+    _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
     _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -86,16 +86,13 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       rowHeightsOptions = _ref.rowHeightsOptions,
       rowIndex = _ref.rowIndex,
       colIndex = _ref.colIndex,
+      ariaRowIndex = _ref.ariaRowIndex,
       rowHeightUtils = _ref.rowHeightUtils,
       isDefinedHeight = _ref.isDefinedHeight,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
-  var positionText = (0, _i18n.useEuiI18n)('euiDataGridCell.position', 'Row: {row}; Column: {col}', {
-    row: rowIndex + 1,
-    col: colIndex + 1
-  });
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
@@ -107,7 +104,15 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, positionText)));
+  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiDataGridCell.position",
+    default: "{columnId}, column {col}, row {row}",
+    values: {
+      columnId: (column === null || column === void 0 ? void 0 : column.displayAsText) || rest.columnId,
+      col: colIndex + 1,
+      row: ariaRowIndex
+    }
+  }))));
 });
 EuiDataGridCellContent.propTypes = {
   rowIndex: _propTypes.default.number.isRequired,
@@ -563,10 +568,40 @@ EuiDataGridCellContent.propTypes = {
     onChange: _propTypes.default.func
   }),
   rowHeightUtils: _propTypes.default.any,
+  pagination: _propTypes.default.shape({
+    /**
+       * The index of the current page, starts at 0 for the first page
+       */
+    pageIndex: _propTypes.default.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.default.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.default.arrayOf(_propTypes.default.number.isRequired),
+
+    /**
+       * A callback for when the user changes the page size selection
+       */
+    onChangeItemsPerPage: _propTypes.default.func.isRequired,
+
+    /**
+       * A callback for when the current page index changes
+       */
+    onChangePage: _propTypes.default.func.isRequired
+  }),
   setCellProps: _propTypes.default.func.isRequired,
   setCellContentsRef: _propTypes.default.any.isRequired,
   isExpanded: _propTypes.default.bool.isRequired,
-  isDefinedHeight: _propTypes.default.bool.isRequired
+  isDefinedHeight: _propTypes.default.bool.isRequired,
+  ariaRowIndex: _propTypes.default.number.isRequired
 };
 
 var EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -970,6 +1005,7 @@ 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,
@@ -979,6 +1015,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = this.state.isFocused || this.state.isEntered || this.state.enableInteractions || popoverIsOpen;
       var cellClasses = (0, _classnames.default)('euiDataGridRowCell', (_classNames = {}, _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,
@@ -1087,7 +1124,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight
+        isDefinedHeight: isDefinedHeight,
+        ariaRowIndex: ariaRowIndex
       });
 
       var anchorClass = 'euiDataGridRowCell__expandFlex';
@@ -1133,6 +1171,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
 
       var content = (0, _react2.jsx)("div", _extends({
         role: "gridcell",
+        "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
         ref: this.cellRef
       }, cellProps, {
@@ -1558,5 +1597,34 @@ EuiDataGridCell.propTypes = {
   rowHeightUtils: _propTypes.default.any,
   rowManager: _propTypes.default.shape({
     getRow: _propTypes.default.func.isRequired
+  }),
+  pagination: _propTypes.default.shape({
+    /**
+       * The index of the current page, starts at 0 for the first page
+       */
+    pageIndex: _propTypes.default.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.default.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.default.arrayOf(_propTypes.default.number.isRequired),
+
+    /**
+       * A callback for when the user changes the page size selection
+       */
+    onChangeItemsPerPage: _propTypes.default.func.isRequired,
+
+    /**
+       * A callback for when the current page index changes
+       */
+    onChangePage: _propTypes.default.func.isRequired
   })
 };

package/lib/components/datagrid/data_grid.js

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

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

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

package/lib/components/selectable/selectable.js

@@ -200,6 +200,8 @@ 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/optimize/es/components/accordion/accordion.js

@@ -98,6 +98,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;
   }
 
@@ -248,12 +256,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/optimize/es/components/datagrid/body/data_grid_body.js

@@ -52,7 +52,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),
@@ -91,7 +92,8 @@ export var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -415,7 +417,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/optimize/es/components/datagrid/body/data_grid_cell.js

@@ -7,8 +7,8 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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; }
@@ -33,7 +33,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';
@@ -47,16 +47,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,
@@ -68,7 +65,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
+    }
+  }))));
 });
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   _inherits(EuiDataGridCell, _Component);
@@ -473,6 +478,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,
@@ -482,6 +488,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,
@@ -590,7 +597,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight
+        isDefinedHeight: isDefinedHeight,
+        ariaRowIndex: ariaRowIndex
       });
 
       var anchorClass = 'euiDataGridRowCell__expandFlex';
@@ -637,6 +645,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, {

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

@@ -233,6 +233,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
 
   useImperativeGridRef({
     ref: ref,
+    gridRef: gridRef,
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
@@ -336,6 +337,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/optimize/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/optimize/es/components/selectable/selectable.js

@@ -152,6 +152,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/optimize/lib/components/accordion/accordion.js

@@ -120,6 +120,12 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       _this.childContent = node;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "generatedId", (0, _services.htmlIdGenerator)()());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeRef", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "observerRef", function (ref) {
+      _this.setChildContentRef(ref);
+
+      _this.resizeRef(ref);
+    });
     return _this;
   }
 
@@ -269,12 +275,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/optimize/lib/components/datagrid/body/data_grid_body.js

@@ -82,7 +82,8 @@ var Cell = function Cell(_ref) {
       schemaDetectors = data.schemaDetectors,
       rowHeightsOptions = data.rowHeightsOptions,
       rowHeightUtils = data.rowHeightUtils,
-      rowManager = data.rowManager;
+      rowManager = data.rowManager,
+      pagination = data.pagination;
   var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
 
   var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
@@ -121,7 +122,8 @@ var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -449,7 +451,8 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
       interactiveCellId: interactiveCellId,
       rowHeightsOptions: rowHeightsOptions,
       rowHeightUtils: rowHeightUtils,
-      rowManager: rowManager
+      rowManager: rowManager,
+      pagination: pagination
     },
     rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
   }), Cell), scrollBorderOverlay) : null;

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

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

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

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

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

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