@elastic/eui 86.0.0 → 87.1.0

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -1,5 +1,6 @@
-var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "className", "items", "children"],
-  _excluded2 = ["isGroupTitle", "className"];
+var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "children"],
+  _excluded2 = ["isGroupTitle", "className"],
+  _excluded3 = ["className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -11,12 +12,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiTitle } from '../../title';
+import { EuiCollapsibleNavContext } from '../context';
+import { EuiCollapsedNavItem } from './collapsed';
 import { EuiCollapsibleNavAccordion } from './collapsible_nav_accordion';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
 import { euiCollapsibleNavItemTitleStyles, euiCollapsibleNavSubItemGroupTitleStyles } from './collapsible_nav_item.styles';
@@ -33,13 +36,9 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
     titleElement = _ref.titleElement,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
-    className = _ref.className,
     items = _ref.items,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiCollapsibleNavItem', {
-    euiCollapsibleNavSubItem: isSubItem
-  }, className);
   var headerContent = ___EmotionJSX(EuiCollapsibleNavItemTitle, {
     title: title,
     titleElement: titleElement,
@@ -49,16 +48,13 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
   var isAccordion = items && items.length > 0;
   if (isAccordion) {
     return ___EmotionJSX(EuiCollapsibleNavAccordion, _extends({
-      className: classes,
       buttonContent: headerContent,
       items: items
     }, props, {
       isSubItem: isSubItem
     }));
   }
-  return ___EmotionJSX(EuiCollapsibleNavLink, _extends({
-    className: classes
-  }, props, {
+  return ___EmotionJSX(EuiCollapsibleNavLink, _extends({}, props, {
     // EuiLink ExclusiveUnion type shenanigans
     isSubItem: isSubItem,
     isNotAccordion: true,
@@ -71,11 +67,11 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
  */
 EuiCollapsibleNavItemDisplay.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -158,6 +154,7 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
     props = _objectWithoutProperties(_ref3, _excluded2);
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavSubItemGroupTitleStyles(euiTheme);
+  var classes = classNames('euiCollapsibleNavSubItem', className);
   if (isGroupTitle) {
     var TitleElement = props.titleElement || 'div';
     return ___EmotionJSX(EuiTitle, {
@@ -166,7 +163,9 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
       className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
     }, ___EmotionJSX(TitleElement, null, props.title));
   }
-  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({}, props, {
+  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({
+    className: classes
+  }, props, {
     isSubItem: true
   }));
 };
@@ -176,11 +175,11 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
  */
 EuiCollapsibleNavSubItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node,
+  title: PropTypes.string,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -231,18 +230,28 @@ EuiCollapsibleNavSubItem.propTypes = {
      */
   isGroupTitle: PropTypes.bool
 };
-export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(props) {
-  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({}, props, {
+export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  var classes = classNames('euiCollapsibleNavItem', className);
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    isCollapsed = _useContext.isCollapsed,
+    isPush = _useContext.isPush;
+  return isCollapsed && isPush ? ___EmotionJSX(EuiCollapsedNavItem, _extends({
+    className: classes
+  }, props)) : ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({
+    className: classes
+  }, props, {
     isSubItem: false
   }));
 };
 EuiCollapsibleNavItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.js

@@ -46,16 +46,16 @@ export var EuiCollapsibleNavLink = function EuiCollapsibleNavLink(_ref) {
     isSubItem = _ref.isSubItem,
     linkProps = _ref.linkProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiCollapsibleNavLink', className);
+  var classes = classNames('euiCollapsibleNavLink', className, isInteractive && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.className));
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavLinkStyles(euiTheme);
-  var cssStyles = [styles.euiCollapsibleNavLink, isSelected && styles.isSelected, isSubItem ? styles.isSubItem : styles.isTopItem.isTopItem, isNotAccordion && !isSubItem && styles.isTopItem.isNotAccordion, isInteractive && !isSelected && !isSubItem && styles.isTopItem.isInteractive, linkProps === null || linkProps === void 0 ? void 0 : linkProps.css];
+  var cssStyles = [styles.euiCollapsibleNavLink, isSelected && styles.isSelected, isSubItem ? styles.isSubItem : styles.isTopItem.isTopItem, isNotAccordion && !isSubItem && styles.isTopItem.isNotAccordion, isInteractive && !isSelected && !isSubItem && styles.isTopItem.isInteractive, isInteractive && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.css)];
   return isInteractive ? ___EmotionJSX(EuiLink, _extends({
     href: href,
-    rel: rel,
-    className: classes
+    rel: rel
   }, _objectSpread(_objectSpread({}, rest), linkProps), {
     // EuiLink ExclusiveUnion shenanigans
+    className: classes,
     css: cssStyles
   }), children) : ___EmotionJSX("span", _extends({
     className: classes,

package/es/components/collapsible_nav_beta/context.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createContext } from 'react';
+export var EuiCollapsibleNavContext = /*#__PURE__*/createContext({
+  isCollapsed: false,
+  isPush: true,
+  side: 'left'
+});

package/es/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -143,7 +143,7 @@ EuiColorPalettePicker.propTypes = {
        */
   isOpen: PropTypes.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

package/es/components/control_bar/control_bar.js

@@ -362,13 +362,173 @@ EuiControlBar.propTypes = {
            */
       truncate: PropTypes.bool,
       /**
-           * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`)
+           * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
            */
       color: PropTypes.any,
       /**
            * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
            */
-      "aria-current": PropTypes.any
+      "aria-current": PropTypes.any,
+      /**
+           * Creates a breadcrumb that toggles a popover dialog
+           *
+           * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
+           * click behavior should only trigger a popover.
+           */
+      popoverContent: PropTypes.node,
+      /**
+           * Allows customizing the popover if necessary. Accepts any props that
+           * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
+           */
+      popoverProps: PropTypes.shape({
+        /**
+           * Class name passed to the direct parent of the button
+           */
+        anchorClassName: PropTypes.string,
+        /**
+           * Alignment of the popover and arrow relative to the button
+           */
+        anchorPosition: PropTypes.any,
+        /**
+           * Style and position alteration for arrow-less attachment.
+           * Intended for use with inputs as anchors, e.g. EuiInputPopover
+           */
+        attachToAnchor: PropTypes.bool,
+        buttonRef: PropTypes.any,
+        /**
+           * Restrict the popover's position within this element
+           */
+        container: PropTypes.any,
+        /**
+           * CSS display type for both the popover and anchor
+           */
+        display: PropTypes.any,
+        /**
+           * Object of props passed to EuiFocusTrap
+           */
+        focusTrapProps: PropTypes.any,
+        /**
+           * Show arrow indicating to originating button
+           */
+        hasArrow: PropTypes.bool,
+        /**
+           * Specifies what element should initially have focus; Can be a DOM
+           * node, or a selector string (which will be passed to
+           * document.querySelector() to find the DOM node), or a function that
+           * returns a DOM node.
+           *
+           * If not passed, initial focus defaults to the popover panel.
+           */
+        initialFocus: PropTypes.any,
+        /**
+           * Passed directly to EuiPortal for DOM positioning. Both properties are
+           * required if prop is specified
+           */
+        insert: PropTypes.shape({
+          sibling: PropTypes.any.isRequired,
+          position: PropTypes.oneOf(["before", "after"]).isRequired
+        }),
+        /**
+           * Traps tab focus within the popover contents
+           */
+        ownFocus: PropTypes.bool,
+        /**
+           * Custom class added to the EuiPanel containing the popover contents
+           */
+        panelClassName: PropTypes.string,
+        /**
+           * EuiPanel padding on all sides
+           */
+        panelPaddingSize: PropTypes.any,
+        /**
+           * Standard DOM `style` attribute. Passed to the EuiPanel
+           */
+        panelStyle: PropTypes.any,
+        /**
+           * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+           */
+        panelProps: PropTypes.shape({
+          element: PropTypes.oneOf(["div"]),
+          /**
+             * Padding for all four sides
+             */
+          paddingSize: PropTypes.any,
+          /**
+             * Corner border radius
+             */
+          borderRadius: PropTypes.any,
+          /**
+             * When true the panel will grow in height to match `EuiFlexItem`
+             */
+          grow: PropTypes.bool,
+          panelRef: PropTypes.any,
+          /**
+             * Background color of the panel;
+             * Usually a lightened form of the brand colors
+             */
+          color: PropTypes.any,
+          className: PropTypes.string,
+          "aria-label": PropTypes.string,
+          "data-test-subj": PropTypes.string,
+          css: PropTypes.any
+        }),
+        panelRef: PropTypes.any,
+        /**
+           * Optional screen reader instructions to announce upon popover open,
+           * in addition to EUI's default popover instructions for Escape on close.
+           * Useful for popovers that may have additional keyboard capabilities such as
+           * arrow navigation.
+           */
+        popoverScreenReaderText: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),
+        popoverRef: PropTypes.any,
+        /**
+           * When `true`, the popover's position is re-calculated when the user
+           * scrolls, this supports having fixed-position popover anchors. When nesting
+           * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
+           */
+        repositionOnScroll: PropTypes.bool,
+        /**
+           * Must be set to true if using `EuiDragDropContext` within a popover,
+           * otherwise your nested drag & drop will have incorrect positioning
+           */
+        hasDragDrop: PropTypes.bool,
+        /**
+           * By default, popover content inherits the z-index of the anchor
+           * component; pass `zIndex` to override
+           */
+        zIndex: PropTypes.number,
+        /**
+           * Distance away from the anchor that the popover will render
+           */
+        offset: PropTypes.number,
+        /**
+           * Minimum distance between the popover and the bounding container;
+           * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
+           * Default is 16
+           */
+        buffer: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.any.isRequired]),
+        /**
+           * Element to pass as the child element of the arrow;
+           * Use case is typically limited to an accompanying `EuiBeacon`
+           */
+        arrowChildren: PropTypes.node,
+        /**
+           * Provide a name to the popover panel
+           */
+        "aria-label": PropTypes.string,
+        /**
+           * Alternative option to `aria-label` that takes an `id`.
+           * Usually takes the `id` of the popover title
+           */
+        "aria-labelledby": PropTypes.string,
+        /**
+           * Function callback for when the popover positon changes
+           */
+        onPositionChange: PropTypes.func,
+        className: PropTypes.string,
+        "data-test-subj": PropTypes.string,
+        css: PropTypes.any
+      })
     }).isRequired),
     /**
        * Determines breadcrumbs appearance, with `page` being the default styling.

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

@@ -258,7 +258,12 @@ EuiDataGridBody.propTypes = {
              * Text to be displayed in the tooltip when `showToolTip` is true.
              * By default the text will be same as the label text.
              */
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        /**
+             * Allows customizing the tooltip shown when `showToolTip` is true.
+             * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+             */
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action that switches the actual column with the column to the left side, provided EuiListGroupItemProps are merged
@@ -302,7 +307,8 @@ EuiDataGridBody.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action that switches the actual column with the column to the right side, provided EuiListGroupItemProps are merged
@@ -346,7 +352,8 @@ EuiDataGridBody.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action to sort ascending by the actual column, provided EuiListGroupItemProps are merged
@@ -390,7 +397,8 @@ EuiDataGridBody.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action to sort descending by the actual column, provided EuiListGroupItemProps are merged
@@ -434,7 +442,8 @@ EuiDataGridBody.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Append additional actions
@@ -478,7 +487,8 @@ EuiDataGridBody.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired)
     }).isRequired]),
     /**
@@ -547,31 +557,7 @@ EuiDataGridBody.propTypes = {
   renderFooterCellValue: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]),
   renderCustomGridBody: PropTypes.func,
   interactiveCellId: PropTypes.string.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
-  }),
+  pagination: PropTypes.any,
   headerIsInteractive: PropTypes.bool.isRequired,
   handleHeaderMutation: PropTypes.any.isRequired,
   setVisibleColumns: PropTypes.func.isRequired,

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

@@ -405,7 +405,12 @@ EuiDataGridBodyCustomRender.propTypes = {
              * Text to be displayed in the tooltip when `showToolTip` is true.
              * By default the text will be same as the label text.
              */
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        /**
+             * Allows customizing the tooltip shown when `showToolTip` is true.
+             * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+             */
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action that switches the actual column with the column to the left side, provided EuiListGroupItemProps are merged
@@ -449,7 +454,8 @@ EuiDataGridBodyCustomRender.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action that switches the actual column with the column to the right side, provided EuiListGroupItemProps are merged
@@ -493,7 +499,8 @@ EuiDataGridBodyCustomRender.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action to sort ascending by the actual column, provided EuiListGroupItemProps are merged
@@ -537,7 +544,8 @@ EuiDataGridBodyCustomRender.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action to sort descending by the actual column, provided EuiListGroupItemProps are merged
@@ -581,7 +589,8 @@ EuiDataGridBodyCustomRender.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Append additional actions
@@ -625,7 +634,8 @@ EuiDataGridBodyCustomRender.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired)
     }).isRequired]),
     /**
@@ -694,31 +704,7 @@ EuiDataGridBodyCustomRender.propTypes = {
   renderFooterCellValue: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]),
   renderCustomGridBody: PropTypes.func,
   interactiveCellId: PropTypes.string.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
-  }),
+  pagination: PropTypes.any,
   headerIsInteractive: PropTypes.bool.isRequired,
   handleHeaderMutation: PropTypes.any.isRequired,
   setVisibleColumns: PropTypes.func.isRequired,

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

@@ -534,7 +534,12 @@ EuiDataGridBodyVirtualized.propTypes = {
              * Text to be displayed in the tooltip when `showToolTip` is true.
              * By default the text will be same as the label text.
              */
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        /**
+             * Allows customizing the tooltip shown when `showToolTip` is true.
+             * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+             */
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action that switches the actual column with the column to the left side, provided EuiListGroupItemProps are merged
@@ -578,7 +583,8 @@ EuiDataGridBodyVirtualized.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action that switches the actual column with the column to the right side, provided EuiListGroupItemProps are merged
@@ -622,7 +628,8 @@ EuiDataGridBodyVirtualized.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action to sort ascending by the actual column, provided EuiListGroupItemProps are merged
@@ -666,7 +673,8 @@ EuiDataGridBodyVirtualized.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Show/hide/configure the action to sort descending by the actual column, provided EuiListGroupItemProps are merged
@@ -710,7 +718,8 @@ EuiDataGridBodyVirtualized.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired]),
       /**
          * Append additional actions
@@ -754,7 +763,8 @@ EuiDataGridBodyVirtualized.propTypes = {
         onClick: PropTypes.func,
         wrapText: PropTypes.bool,
         buttonRef: PropTypes.any,
-        toolTipText: PropTypes.string
+        toolTipText: PropTypes.string,
+        toolTipProps: PropTypes.any
       }).isRequired)
     }).isRequired]),
     /**
@@ -823,31 +833,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   renderFooterCellValue: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]),
   renderCustomGridBody: PropTypes.func,
   interactiveCellId: PropTypes.string.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
-  }),
+  pagination: PropTypes.any,
   headerIsInteractive: PropTypes.bool.isRequired,
   handleHeaderMutation: PropTypes.any.isRequired,
   setVisibleColumns: PropTypes.func.isRequired,