@elastic/eui 60.2.0 → 60.3.0

package/optimize/lib/components/selectable/selectable.js

@@ -170,6 +170,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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "60.2.0",
+  "version": "60.3.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "node:16.14.2",
+  "docker_image": "node:16.16.0",
   "sideEffects": [
     "*.css",
     "*.scss"
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.9.12",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^46.11.2",
+    "@elastic/charts": "^46.12.1",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",

package/test-env/components/accordion/accordion.js

@@ -122,6 +122,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;
   }
 
@@ -271,12 +277,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/test-env/components/context_menu/context_menu.js

@@ -401,7 +401,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/test-env/components/datagrid/body/data_grid_body.js

@@ -84,7 +84,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),
@@ -123,7 +124,8 @@ var Cell = function Cell(_ref) {
     rowHeightUtils: rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
     rowManager: rowManager,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    pagination: pagination
   };
 
   if (isLeadingControlColumn) {
@@ -456,7 +458,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/test-env/components/datagrid/body/data_grid_cell.js

@@ -57,8 +57,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); }
@@ -80,15 +80,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,
@@ -100,7 +97,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,
@@ -556,10 +561,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) {
@@ -939,6 +974,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,
@@ -947,6 +983,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,
@@ -1054,7 +1091,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight
+        isDefinedHeight: isDefinedHeight,
+        ariaRowIndex: ariaRowIndex
       });
 
       var anchorClass = 'euiDataGridRowCell__expandFlex';
@@ -1100,6 +1138,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, {
@@ -1521,5 +1560,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/test-env/components/datagrid/data_grid.js

@@ -266,6 +266,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   (0, _ref.useImperativeGridRef)({
     ref: ref,
+    gridRef: gridRef,
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
@@ -369,6 +370,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/test-env/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/test-env/components/selectable/selectable.js

@@ -172,6 +172,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);
           }