@elastic/eui 86.0.0 → 87.1.0

package/es/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -225,6 +225,11 @@ EuiPinnableListGroup.propTypes = {
          * By default the text will be same as the label text.
          */
     toolTipText: PropTypes.string,
+    /**
+         * Allows customizing the tooltip shown when `showToolTip` is true.
+         * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+         */
+    toolTipProps: PropTypes.any,
     /**
        * Saves the pinned status and changes the visibility of the pin icon
        */
@@ -326,7 +331,12 @@ EuiPinnableListGroup.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)]),
   /**
      * Shows the pin icon and calls this function on click.

package/es/components/page/page_header/page_header_content.js

@@ -292,13 +292,173 @@ EuiPageHeaderContent.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),
   /**
      * Adjust the props of [EuiBreadcrumbs](#/navigation/breadcrumbs)

package/es/components/page/page_sidebar/page_sidebar.js

@@ -22,7 +22,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import PropTypes from "prop-types";
 import { logicalStyle, useEuiPaddingCSS } from '../../../global_styling';
 import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
@@ -51,7 +51,7 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inlineStyles = _useState2[0],
     setInlineStyles = _useState2[1];
-  useEffect(function () {
+  useLayoutEffect(function () {
     var updatedStyles = _objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth));
     if (sticky) {
       var _document$body$datase;

package/es/components/page/page_template.js

@@ -524,10 +524,17 @@ EuiPageTemplate_Deprecated.propTypes = {
          * ReactNode to render as this component's content
          */
       children: PropTypes.node.isRequired,
+      /**
+         * If not specified, `EuiPortal` will insert itself
+         * into the end of the `document.body` by default
+         */
       insert: PropTypes.shape({
         sibling: PropTypes.any.isRequired,
-        position: PropTypes.oneOf(["before", "after"]).isRequired
+        position: PropTypes.any.isRequired
       }),
+      /**
+         * Optional ref callback
+         */
       portalRef: PropTypes.func
     }).isRequired]),
     /**

package/es/components/page_template/page_template.js

@@ -39,6 +39,14 @@ export var TemplateContext = /*#__PURE__*/createContext({
   emptyPrompt: {},
   bottomBar: {}
 });
+var calculateOffset = function calculateOffset(base) {
+  var _document$body$datase;
+  if (typeof document === 'undefined') return 0; // SSR catch
+
+  var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
+  return base * 3 * euiHeaderFixedCounter;
+};
+
 /**
  * Consumed via `EuiPageTemplate`,
  * it controls and propogates most of the shared props per direct child
@@ -65,7 +73,9 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiTheme = useEuiTheme(),
     euiTheme = _useEuiTheme.euiTheme;
-  var _useState = useState(_offset),
+  var _useState = useState(function () {
+      return _offset !== null && _offset !== void 0 ? _offset : calculateOffset(euiTheme.base);
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     offset = _useState2[0],
     setOffset = _useState2[1];
@@ -78,9 +88,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   useEffect(function () {
     if (_offset === undefined) {
-      var _document$body$datase;
-      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
-      setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
+      setOffset(calculateOffset(euiTheme.base));
     }
   }, [_offset, euiTheme.base]);
 
@@ -122,7 +130,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     };
   };
   var innerPanelled = function innerPanelled() {
-    return panelled === false ? false : Boolean(sidebar.length > 0);
+    return panelled !== null && panelled !== void 0 ? panelled : Boolean(sidebar.length > 0);
   };
   var innerBordered = function innerBordered() {
     return contentBorder !== undefined ? contentBorder : Boolean(sidebar.length > 0);

package/es/components/popover/input_popover.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,7 +16,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
 import { tabbable } from 'tabbable';
@@ -37,6 +37,8 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     input = _ref.input,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$panelMinWidth = _ref.panelMinWidth,
+    panelMinWidth = _ref$panelMinWidth === void 0 ? 0 : _ref$panelMinWidth,
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
@@ -54,22 +56,24 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     panelEl = _useState6[0],
     setPanelEl = _useState6[1];
+  var popoverClassRef = useRef(null);
   var inputRef = useCombinedRefs([setInputEl, _inputRef]);
   var panelRef = useCombinedRefs([setPanelEl, _panelRef]);
   var setPanelWidth = useCallback(function (width) {
     if (panelEl && (!!inputElWidth || !!width)) {
       var newWidth = !!width ? width : inputElWidth;
-      panelEl.style.width = "".concat(newWidth, "px");
-      if (onPanelResize) {
-        onPanelResize(newWidth);
-      }
+      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
+      panelEl.style.width = "".concat(widthToSet, "px");
+      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
     }
-  }, [panelEl, inputElWidth, onPanelResize]);
+  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
   var onResize = useCallback(function () {
     if (inputEl) {
+      var _popoverClassRef$curr;
       var _width = inputEl.getBoundingClientRect().width;
       setInputElWidth(_width);
       setPanelWidth(_width);
+      (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
   }, [inputEl, setPanelWidth]);
   useEffect(function () {
@@ -104,7 +108,8 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     }),
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes
+    className: classes,
+    ref: popoverClassRef
   }, props), ___EmotionJSX(EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
@@ -117,11 +122,21 @@ EuiInputPopover.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * Alignment of the popover relative to the input
+     */
+  anchorPosition: PropTypes.oneOf(["downLeft", "downRight", "downCenter"]),
   disableFocusTrap: PropTypes.bool,
   fullWidth: PropTypes.bool,
   input: PropTypes.any.isRequired,
   inputRef: PropTypes.any,
-  onPanelResize: PropTypes.func
+  onPanelResize: PropTypes.func,
+  /**
+     * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+     * However, if the input width is too small, you can pass a minimum panel width
+     * (that should be based on the popover content).
+     */
+  panelMinWidth: PropTypes.number
 };
 EuiInputPopover.defaultProps = {
   anchorPosition: 'downLeft',

package/es/components/popover/popover.js

@@ -221,8 +221,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         top = _findPopoverPosition.top,
         left = _findPopoverPosition.left,
         foundPosition = _findPopoverPosition.position,
-        arrow = _findPopoverPosition.arrow,
-        anchorBoundingBox = _findPopoverPosition.anchorBoundingBox;
+        arrow = _findPopoverPosition.arrow;
 
       // the popover's z-index must inherit from the button
       // this keeps a button's popover under a flyout that would cover the button
@@ -231,7 +230,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var zIndex = zIndexProp == null ? getElementZIndex(_this.button, _this.panel) + 2000 : zIndexProp;
       var popoverStyles = _objectSpread(_objectSpread({}, _this.props.panelStyle), {}, {
         top: top,
-        left: _this.props.attachToAnchor && anchorBoundingBox ? anchorBoundingBox.left : left,
+        left: left,
         zIndex: zIndex
       });
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;
@@ -552,9 +551,8 @@ EuiPopover.propTypes = {
      */
   anchorPosition: PropTypes.any,
   /**
-     * Style and position alteration for arrow-less, left-aligned
-     * attachment. Intended for use with inputs as anchors, e.g.
-     * EuiInputPopover
+     * Style and position alteration for arrow-less attachment.
+     * Intended for use with inputs as anchors, e.g. EuiInputPopover
      */
   attachToAnchor: PropTypes.bool,
   /**

package/es/components/portal/portal.js

@@ -25,29 +25,52 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * into portals.
  */
 
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import { createPortal } from 'react-dom';
 import { EuiNestedThemeContext } from '../../services';
-import { keysOf } from '../common';
-export var insertPositions = {
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var INSERT_POSITIONS = ['after', 'before'];
+var insertPositions = {
   after: 'afterend',
   before: 'beforebegin'
 };
-export var INSERT_POSITIONS = keysOf(insertPositions);
-export var EuiPortal = /*#__PURE__*/function (_Component) {
-  _inherits(EuiPortal, _Component);
-  var _super = _createSuper(EuiPortal);
-  function EuiPortal(props) {
+export var EuiPortal = function EuiPortal(props) {
+  var propsWithDefaults = usePropsWithComponentDefaults('EuiPortal', props);
+  return ___EmotionJSX(EuiPortalClass, propsWithDefaults);
+};
+EuiPortal.propTypes = {
+  /**
+     * ReactNode to render as this component's content
+     */
+  children: PropTypes.node.isRequired,
+  /**
+     * If not specified, `EuiPortal` will insert itself
+     * into the end of the `document.body` by default
+     */
+  insert: PropTypes.shape({
+    sibling: PropTypes.any.isRequired,
+    position: PropTypes.any.isRequired
+  }),
+  /**
+     * Optional ref callback
+     */
+  portalRef: PropTypes.func
+};
+export var EuiPortalClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiPortalClass, _Component);
+  var _super = _createSuper(EuiPortalClass);
+  function EuiPortalClass(props) {
     var _this;
-    _classCallCheck(this, EuiPortal);
+    _classCallCheck(this, EuiPortalClass);
     _this = _super.call(this, props);
     _this.state = {
       portalNode: null
     };
     return _this;
   }
-  _createClass(EuiPortal, [{
+  _createClass(EuiPortalClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var insert = this.props.insert;
@@ -111,17 +134,24 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/createPortal(this.props.children, portalNode);
     }
   }]);
-  return EuiPortal;
+  return EuiPortalClass;
 }(Component);
-_defineProperty(EuiPortal, "contextType", EuiNestedThemeContext);
-EuiPortal.propTypes = {
+_defineProperty(EuiPortalClass, "contextType", EuiNestedThemeContext);
+EuiPortalClass.propTypes = {
   /**
      * ReactNode to render as this component's content
      */
   children: PropTypes.node.isRequired,
+  /**
+     * If not specified, `EuiPortal` will insert itself
+     * into the end of the `document.body` by default
+     */
   insert: PropTypes.shape({
     sibling: PropTypes.any.isRequired,
-    position: PropTypes.oneOf(["before", "after"]).isRequired
+    position: PropTypes.any.isRequired
   }),
+  /**
+     * Optional ref callback
+     */
   portalRef: PropTypes.func
 };

package/es/components/provider/component_defaults/component_defaults.js

@@ -0,0 +1,73 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/*
+ * 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 React, { createContext, useContext, useMemo } from 'react';
+import PropTypes from "prop-types";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+// Declaring as a static const for reference integrity/reducing rerenders
+var emptyDefaults = {};
+
+/*
+ * Context
+ */
+export var EuiComponentDefaultsContext = /*#__PURE__*/createContext(emptyDefaults);
+
+/*
+ * Component
+ */
+
+export var EuiComponentDefaultsProvider = function EuiComponentDefaultsProvider(_ref) {
+  var _ref$componentDefault = _ref.componentDefaults,
+    componentDefaults = _ref$componentDefault === void 0 ? emptyDefaults : _ref$componentDefault,
+    children = _ref.children;
+  return ___EmotionJSX(EuiComponentDefaultsContext.Provider, {
+    value: componentDefaults
+  }, children);
+};
+
+/*
+ * Hooks
+ */
+EuiComponentDefaultsProvider.propTypes = {
+  componentDefaults: PropTypes.shape({
+    /**
+       * Provide a global configuration for EuiPortal's default insertion position.
+       */
+    EuiPortal: PropTypes.any,
+    /**
+       * Provide a global configuration for EuiFocusTrap's `gapMode` and `crossFrame` props
+       */
+    EuiFocusTrap: PropTypes.any,
+    /**
+       * Provide global settings for EuiTablePagination's props that affect page size
+       * / the rows per page selection.
+       *
+       * These defaults will be inherited all table and grid components that utilize EuiTablePagination.
+       */
+    EuiTablePagination: PropTypes.any
+  })
+};
+export var useComponentDefaults = function useComponentDefaults() {
+  return useContext(EuiComponentDefaultsContext);
+};
+
+// Merge individual component props with component defaults
+export var usePropsWithComponentDefaults = function usePropsWithComponentDefaults(componentName, props) {
+  var _context$componentNam;
+  var context = useContext(EuiComponentDefaultsContext);
+  var componentDefaults = (_context$componentNam = context[componentName]) !== null && _context$componentNam !== void 0 ? _context$componentNam : emptyDefaults;
+  return useMemo(function () {
+    return _objectSpread(_objectSpread({}, componentDefaults), props);
+  }, [componentDefaults, props]);
+};

package/es/components/provider/component_defaults/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export * from './component_defaults';

package/es/components/provider/index.js

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiProvider } from './provider';
+export { EuiProvider } from './provider';
+export { EuiComponentDefaultsProvider, EuiComponentDefaultsContext } from './component_defaults';

package/es/components/provider/provider.js

@@ -15,6 +15,7 @@ import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { EuiThemeAmsterdam } from '../../themes';
 import { EuiCacheProvider } from './cache';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
+import { EuiComponentDefaultsProvider } from './component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
@@ -31,6 +32,7 @@ export var EuiProvider = function EuiProvider(_ref) {
     Utilities = _ref$utilityClasses === void 0 ? EuiUtilityClasses : _ref$utilityClasses,
     colorMode = _ref.colorMode,
     modify = _ref.modify,
+    componentDefaults = _ref.componentDefaults,
     children = _ref.children;
   var isNested = useIsNestedEuiProvider();
   if (isNested) {
@@ -72,5 +74,7 @@ export var EuiProvider = function EuiProvider(_ref) {
   }), ___EmotionJSX(EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && ___EmotionJSX(Utilities, null)
-  })), ___EmotionJSX(CurrentEuiBreakpointProvider, null, children))));
+  })), ___EmotionJSX(EuiComponentDefaultsProvider, {
+    componentDefaults: componentDefaults
+  }, ___EmotionJSX(CurrentEuiBreakpointProvider, null, children)))));
 };