@elastic/eui 86.0.0 → 87.0.0

package/optimize/es/components/header/header_section/header_section_item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["border", "children", "className"];
+var _excluded = ["children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,22 +11,23 @@ var _excluded = ["border", "children", "className"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
+import { euiHeaderSectionItemStyles } from './header_section_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var borderToClassNameMap = {
-  left: 'euiHeaderSectionItem--borderLeft',
-  right: 'euiHeaderSectionItem--borderRight',
-  none: undefined
-};
+/**
+ * Header items are small icon links that pop up menus
+ */
 export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
-  var _ref$border = _ref.border,
-    border = _ref$border === void 0 ? 'left' : _ref$border,
-    children = _ref.children,
+  var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderSectionItemStyles(euiTheme);
+  var classes = classNames('euiHeaderSectionItem', className);
 
   // we check if there is any children and if not, we don't render anything
   return children ? ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: styles.euiHeaderSectionItem
   }, rest), children) : null;
 };

package/optimize/es/components/header/header_section/header_section_item.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalCSS, euiMaxBreakpoint } from '../../../global_styling';
+export var euiHeaderSectionItemStyles = function euiHeaderSectionItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderSectionItem: /*#__PURE__*/css("position:relative;display:flex;align-items:center;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', euiTheme.size.xl), ";};label:euiHeaderSectionItem;")
+  };
+};

package/optimize/es/components/header/header_section/header_section_item_button.js

@@ -11,10 +11,12 @@ var _excluded = ["children", "className", "notification", "notificationColor"];
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiNotificationBadge } from '../../badge/notification_badge/badge_notification';
 import { EuiIcon } from '../../icon';
 import { EuiButtonEmpty } from '../../button';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
+import { euiHeaderSectionItemButtonStyles } from './header_section_item_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderSectionItemButton = /*#__PURE__*/forwardRef(function (_ref,
 /**
@@ -135,10 +137,12 @@ ref) {
     };
     return buttonRef.current;
   }, []);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderSectionItemButtonStyles(euiTheme);
   var classes = classNames('euiHeaderSectionItemButton', className);
-  var animationClasses = classNames(['euiHeaderSectionItemButton__content']);
   var notificationDot = ___EmotionJSX(EuiIcon, {
     className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot",
+    css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.dot, ";label:notificationDot;"],
     color: notificationColor,
     type: "dot",
     size: "l"
@@ -151,6 +155,7 @@ ref) {
       sizes: ['xs']
     }, ___EmotionJSX(EuiNotificationBadge, {
       className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
+      css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.badge, ";label:buttonNotification;"],
       color: notificationColor
     }, notification)), ___EmotionJSX(EuiShowFor, {
       sizes: ['xs']
@@ -158,11 +163,13 @@ ref) {
   }
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
+    css: styles.euiHeaderSectionItemButton,
     color: "text",
     buttonRef: buttonRef
   }, rest), ___EmotionJSX("span", {
     ref: animationTargetRef,
-    className: animationClasses
+    className: "euiHeaderSectionItemButton__content",
+    css: styles.euiHeaderSectionItemButton__content
   }, children), buttonNotification);
 });
 EuiHeaderSectionItemButton.displayName = 'EuiHeaderSectionItemButton';

package/optimize/es/components/header/header_section/header_section_item_button.styles.js

@@ -0,0 +1,44 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, mathWithUnits, euiMaxBreakpoint } from '../../../global_styling';
+import { euiHeaderVariables } from '../header.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "k09eot-euiHeaderSectionItemButton__notification",
+  styles: "position:absolute;label:euiHeaderSectionItemButton__notification;"
+} : {
+  name: "k09eot-euiHeaderSectionItemButton__notification",
+  styles: "position:absolute;label:euiHeaderSectionItemButton__notification;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1f67s81-euiHeaderSectionItemButton__content",
+  styles: "display:inline-block;label:euiHeaderSectionItemButton__content;"
+} : {
+  name: "1f67s81-euiHeaderSectionItemButton__content",
+  styles: "display:inline-block;label:euiHeaderSectionItemButton__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderSectionItemButtonStyles = function euiHeaderSectionItemButtonStyles(euiThemeContext) {
+  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
+    childHeight = _euiHeaderVariables.childHeight;
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderSectionItemButton: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " ", logicalCSS('min-width', childHeight), " text-align:center;font-size:0;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', mathWithUnits(childHeight, function (x) {
+      return x * 0.75;
+    })), ";};label:euiHeaderSectionItemButton;"),
+    euiHeaderSectionItemButton__content: _ref2,
+    notification: {
+      euiHeaderSectionItemButton__notification: _ref,
+      dot: /*#__PURE__*/css(logicalCSS('top', 0), " ", logicalCSS('right', 0), " stroke:", euiTheme.colors.emptyShade, ";", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalSizeCSS(euiTheme.size.base), " ", logicalCSS('top', '9%'), ";};label:dot;"),
+      badge: /*#__PURE__*/css(logicalCSS('top', '9%'), " ", logicalCSS('right', '9%'), " box-shadow:0 0 0 ", euiTheme.border.width.thin, " ", euiTheme.colors.emptyShade, ";;label:badge;")
+    }
+  };
+};

package/optimize/es/components/list_group/list_group_item.js

@@ -1,8 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -48,6 +51,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     wrapText = _ref.wrapText,
     buttonRef = _ref.buttonRef,
     toolTipText = _ref.toolTipText,
+    toolTipProps = _ref.toolTipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isClickable = !!(href || onClick);
   var isHrefValid = !href || validateHref(href);
@@ -149,20 +153,24 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
   var cssStyles = [styles.euiListGroupItem, !isDisabled && isActive && styles.colors.isActive[color], !isDisabled && isClickable && styles.colors.isClickable[color], styles[size], customCss];
   var classes = classNames('euiListGroupItem', className);
   if (showToolTip) {
+    var _toolTipProps$anchorP;
     var tooltipStyles = euiListGroupItemTooltipStyles();
-    var cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip];
+    var cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip, toolTipProps === null || toolTipProps === void 0 ? void 0 : (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css];
+    var anchorClasses = classNames('euiListGroupItem__tooltip', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
+    var anchorPropsAndCss = _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
+      css: cssTooltipStyles
+    });
     itemContent = ___EmotionJSX("li", {
       className: classes,
       css: cssStyles
-    }, ___EmotionJSX(EuiToolTip, {
-      anchorClassName: "euiListGroupItem__tooltip",
-      anchorProps: {
-        css: cssTooltipStyles
-      },
+    }, ___EmotionJSX(EuiToolTip, _extends({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
-    }, itemContent));
+    }, toolTipProps, {
+      anchorClassName: anchorClasses,
+      anchorProps: anchorPropsAndCss
+    }), itemContent));
   } else {
     itemContent = ___EmotionJSX("li", {
       className: classes,

package/optimize/es/components/page_template/page_template.js

@@ -112,7 +112,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/optimize/es/components/portal/portal.js

@@ -19,28 +19,33 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * into portals.
  */
 
-import { Component } from 'react';
+import React, { Component } from 'react';
 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);
+};
+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;
@@ -104,6 +109,6 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/createPortal(this.props.children, portalNode);
     }
   }]);
-  return EuiPortal;
+  return EuiPortalClass;
 }(Component);
-_defineProperty(EuiPortal, "contextType", EuiNestedThemeContext);
+_defineProperty(EuiPortalClass, "contextType", EuiNestedThemeContext);

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

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+/*
+ * 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 { 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
+ */
+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/optimize/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/optimize/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/optimize/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)))));
 };

package/optimize/es/components/steps/step.styles.js

@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { makeHighContrastColor } from '../../services';
 import { mathWithUnits, logicalCSS } from '../../global_styling';
 export var euiStepVariables = function euiStepVariables(euiTheme) {
   return {
@@ -66,7 +67,7 @@ export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
   return {
     euiStep__titleWrapper: /*#__PURE__*/css("display:flex;gap:", euiStep.numberMargin, ";;label:euiStep__titleWrapper;"),
     euiStep__title: /*#__PURE__*/css(";label:euiStep__title;"),
-    isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:isDisabled;"),
+    isDisabled: /*#__PURE__*/css("color:", makeHighContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.body), ";;label:isDisabled;"),
     // Sizes
     m: /*#__PURE__*/css(";label:m;"),
     s: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), ";;label:s;"),

package/optimize/es/components/steps/step_horizontal.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { makeHighContrastColor } from '../../services';
 import { euiBreakpoint, logicalShorthandCSS, euiFocusRing, euiCanAnimate, mathWithUnits } from '../../global_styling/';
 import { euiTitle } from '../title/title.styles';
 import { euiStepVariables } from './step.styles';
@@ -55,6 +56,6 @@ export var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiStepHorizontal__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", euiBreakpoint(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
-    disabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:disabled;")
+    disabled: /*#__PURE__*/css("color:", makeHighContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.body), ";;label:disabled;")
   };
 };

package/optimize/es/components/steps/step_number.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
+import { makeHighContrastColor } from '../../services';
 import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -41,12 +42,12 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
     xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
     // status
     incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
-    disabled: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'disabled').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor, ";;label:disabled;"),
+    disabled: /*#__PURE__*/css("background-color:", euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor, ";color:", makeHighContrastColor(euiTheme.colors.disabledText)(euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor), ";;label:disabled;"),
     loading: _ref,
     warning: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'warning').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'warning').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
     danger: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'danger').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'danger').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
     complete: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'success').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'success').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
-    current: /*#__PURE__*/css(";label:current;")
+    current: /*#__PURE__*/css("border:2px solid ", euiTheme.colors.body, ";box-shadow:0 0 0 2px ", euiTheme.colors.primary, ";.euiStepNumber__number{display:inline-block;transform:translateY(-2px);};label:current;")
   };
 };
 export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {

package/optimize/es/components/table/table_pagination/index.js

@@ -6,4 +6,7 @@
  * Side Public License, v 1.
  */
 
-export { EuiTablePagination } from './table_pagination';
+export { EuiTablePagination } from './table_pagination';
+
+// Not public top-level exports
+export { useEuiTablePaginationDefaults, euiTablePaginationDefaults } from './table_pagination_defaults';

package/optimize/es/components/table/table_pagination/table_pagination.js

@@ -17,20 +17,22 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPagination } from '../../pagination';
 import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
+import { usePropsWithComponentDefaults } from '../../provider/component_defaults';
+import { euiTablePaginationDefaults } from './table_pagination_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiTablePagination = function EuiTablePagination(_ref) {
-  var activePage = _ref.activePage,
-    _ref$itemsPerPage = _ref.itemsPerPage,
-    itemsPerPage = _ref$itemsPerPage === void 0 ? 50 : _ref$itemsPerPage,
-    _ref$itemsPerPageOpti = _ref.itemsPerPageOptions,
-    itemsPerPageOptions = _ref$itemsPerPageOpti === void 0 ? [10, 20, 50, 100] : _ref$itemsPerPageOpti,
-    _ref$showPerPageOptio = _ref.showPerPageOptions,
-    showPerPageOptions = _ref$showPerPageOptio === void 0 ? true : _ref$showPerPageOptio,
-    _ref$onChangeItemsPer = _ref.onChangeItemsPerPage,
-    onChangeItemsPerPage = _ref$onChangeItemsPer === void 0 ? function () {} : _ref$onChangeItemsPer,
-    onChangePage = _ref.onChangePage,
-    pageCount = _ref.pageCount,
-    rest = _objectWithoutProperties(_ref, _excluded);
+export var EuiTablePagination = function EuiTablePagination(props) {
+  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiTablePagination', props),
+    activePage = _usePropsWithComponen.activePage,
+    _usePropsWithComponen2 = _usePropsWithComponen.itemsPerPage,
+    itemsPerPage = _usePropsWithComponen2 === void 0 ? euiTablePaginationDefaults.itemsPerPage : _usePropsWithComponen2,
+    _usePropsWithComponen3 = _usePropsWithComponen.itemsPerPageOptions,
+    itemsPerPageOptions = _usePropsWithComponen3 === void 0 ? euiTablePaginationDefaults.itemsPerPageOptions : _usePropsWithComponen3,
+    _usePropsWithComponen4 = _usePropsWithComponen.showPerPageOptions,
+    showPerPageOptions = _usePropsWithComponen4 === void 0 ? euiTablePaginationDefaults.showPerPageOptions : _usePropsWithComponen4,
+    onChangeItemsPerPage = _usePropsWithComponen.onChangeItemsPerPage,
+    onChangePage = _usePropsWithComponen.onChangePage,
+    pageCount = _usePropsWithComponen.pageCount,
+    rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPopoverOpen = _useState2[0],
@@ -64,7 +66,7 @@ export var EuiTablePagination = function EuiTablePagination(_ref) {
         icon: itemsPerPageOption === itemsPerPage ? 'check' : 'empty',
         onClick: function onClick() {
           closePopover();
-          onChangeItemsPerPage(itemsPerPageOption);
+          onChangeItemsPerPage === null || onChangeItemsPerPage === void 0 ? void 0 : onChangeItemsPerPage(itemsPerPageOption);
         },
         "data-test-subj": "tablePagination-".concat(itemsPerPageOption, "-rows")
       }, itemsPerPageOption === 0 ? ___EmotionJSX(EuiI18n, {
@@ -86,7 +88,8 @@ export var EuiTablePagination = function EuiTablePagination(_ref) {
     panelPaddingSize: "none",
     anchorPosition: "upRight"
   }, ___EmotionJSX(EuiContextMenuPanel, {
-    items: items
+    items: items,
+    "data-test-subj": "tablePaginationRowOptions"
   }));
   return ___EmotionJSX(EuiFlexGroup, {
     justifyContent: "spaceBetween",

package/optimize/es/components/table/table_pagination/table_pagination_defaults.js

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+/*
+ * 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 { useMemo } from 'react';
+import { useComponentDefaults } from '../../provider/component_defaults';
+/**
+ * Table pagination prop defaults live in a separate file because
+ * they'll be reused by basic tables and datagrids as fallbacks
+ */
+
+export var euiTablePaginationDefaults = {
+  itemsPerPage: 10,
+  itemsPerPageOptions: [10, 25, 50],
+  showPerPageOptions: true
+};
+export var useEuiTablePaginationDefaults = function useEuiTablePaginationDefaults() {
+  var consumerDefaults = useComponentDefaults().EuiTablePagination;
+  return useMemo(function () {
+    return _objectSpread(_objectSpread({}, euiTablePaginationDefaults), consumerDefaults);
+  }, [consumerDefaults]);
+};