@elastic/eui 112.0.0 → 112.1.0

package/es/components/badge/badge.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "color", "iconType", "iconSide", "className", "isDisabled", "onClick", "iconOnClick", "onClickAriaLabel", "iconOnClickAriaLabel", "closeButtonProps", "href", "rel", "target", "style"];
+var _excluded = ["children", "color", "fill", "iconType", "iconSide", "className", "isDisabled", "onClick", "iconOnClick", "onClickAriaLabel", "iconOnClickAriaLabel", "closeButtonProps", "href", "rel", "target", "style"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -39,6 +39,8 @@ export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? false : _ref$fill,
     iconType = _ref.iconType,
     _ref$iconSide = _ref.iconSide,
     iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
@@ -57,6 +59,7 @@ export var EuiBadge = function EuiBadge(_ref) {
   var isHrefValid = !href || validateHref(href);
   var isDisabled = _isDisabled || !isHrefValid;
   var isNamedColor = COLORS.includes(color);
+  var isIconOnly = !children && !!iconType;
   var euiTheme = useEuiTheme();
   var customColorStyles = useMemo(function () {
     // Disabled badges should not have custom colors
@@ -82,7 +85,7 @@ export var EuiBadge = function EuiBadge(_ref) {
     }
   }, [color, isNamedColor, isDisabled, style, euiTheme]);
   var styles = useEuiMemoizedStyles(euiBadgeStyles);
-  var cssStyles = [styles.euiBadge].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && styles[color], !iconOnClick && (onClick || href) && styles.clickable]));
+  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && styles.clickable]));
   var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
@@ -127,7 +130,7 @@ export var EuiBadge = function EuiBadge(_ref) {
     } else {
       optionalIcon = ___EmotionJSX(EuiIcon, {
         type: iconType,
-        size: children ? 's' : 'm',
+        size: "s",
         className: "euiBadge__icon",
         css: iconCssStyles,
         color: "inherit" // forces the icon to inherit its parent color
@@ -207,6 +210,12 @@ EuiBadge.propTypes = {
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
   color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
+  /**
+     * Whether the badge should use filled (more intense) colors.
+     * It has no effect when a non-named color is passed to the `color` prop.
+     * @default false
+     */
+  fill: PropTypes.bool,
   /**
      * Will override any color passed through the `color` prop.
      */

package/es/components/badge/badge.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
+import { euiFontSize, euiFocusRing, euiTextTruncate, highContrastModeStyles, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
 import { euiBadgeColors } from './color_utils';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1jbvl30-euiBadge__iconButton",
@@ -29,28 +29,54 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = euiBadgeColors(euiThemeContext);
+  var defaultBadgeColors = badgeColors.fill.default;
   var setBadgeColorVars = function setBadgeColorVars(colors) {
-    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n  ");
+    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    ").concat(colors.border ? "--euiBadgeBorder: ".concat(colors.border, ";") : '', "\n  ");
   };
+  var inlinePadding = mathWithUnits(
+  // Account for the (usually transparent) border so that the visual
+  // padding is of size s
+  [euiTheme.size.s, euiTheme.border.width.thin], function (size, borderWidth) {
+    return size - borderWidth;
+  });
   return {
-    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;", logicalShorthandCSS('padding', "0 ".concat(euiTheme.size.s)), " ", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", mathWithUnits(
+    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;", logicalShorthandCSS('padding', "0 ".concat(inlinePadding)), " ", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", mathWithUnits(
     // Account for the border
     [euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
       return x + y * 2;
-    }), ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:inherit;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
-      return x / 2;
-    }), ";", logicalTextAlignCSS('left'), "color:var(--euiBadgeTextColor, ", badgeColors.default.color, ");background-color:var(\n        --euiBadgeBackgroundColor,\n        ", badgeColors.default.backgroundColor, "\n      );*::selection{color:var(\n          --euiBadgeBackgroundColor,\n          ", badgeColors.default.backgroundColor, "\n        );background-color:var(\n          --euiBadgeTextColor,\n          ", badgeColors.default.color, "\n        );}&:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    }), ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:inherit;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", euiTheme.size.l, ";", logicalTextAlignCSS('left'), "color:var(--euiBadgeTextColor, ", defaultBadgeColors.color, ");background-color:var(\n        --euiBadgeBackgroundColor,\n        ", defaultBadgeColors.backgroundColor, "\n      );", highContrastModeStyles(euiThemeContext, {
+      preferred: "border: var(--euiBadgeBorder, ".concat(euiTheme.border.thin, ");")
+    }), "*::selection{color:var(\n          --euiBadgeBackgroundColor,\n          ", defaultBadgeColors.backgroundColor, "\n        );background-color:var(--euiBadgeTextColor, ", defaultBadgeColors.color, ");}&:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    iconOnly: /*#__PURE__*/css("padding-inline:", mathWithUnits(
+    // Account for the border
+    [euiTheme.size.xs, euiTheme.border.width.thin], function (size, borderWidth) {
+      return size - borderWidth;
+    }), ";;label:iconOnly;"),
     clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
-    // Colors
-    default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.default), " border-color:", badgeColors.default.borderColor, ";;label:default;"),
-    hollow: /*#__PURE__*/css(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
-    primary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
-    accent: /*#__PURE__*/css(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
-    neutral: /*#__PURE__*/css(setBadgeColorVars(badgeColors.neutral), ";label:neutral;"),
-    success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
-    warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
-    risk: /*#__PURE__*/css(setBadgeColorVars(badgeColors.risk), ";label:risk;"),
-    danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
+    colors: {
+      fill: {
+        default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.default), " border-color:", badgeColors.fill.default.borderColor, ";;label:default;"),
+        hollow: /*#__PURE__*/css(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+        primary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.primary), ";label:primary;"),
+        accent: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.accent), ";label:accent;"),
+        neutral: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.neutral), ";label:neutral;"),
+        success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.success), ";label:success;"),
+        warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.warning), ";label:warning;"),
+        risk: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.risk), ";label:risk;"),
+        danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.danger), ";label:danger;")
+      },
+      base: {
+        default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.default), " border-color:", badgeColors.base.default.borderColor, ";;label:default;"),
+        hollow: /*#__PURE__*/css(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+        primary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.primary), ";label:primary;"),
+        accent: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.accent), ";label:accent;"),
+        neutral: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.neutral), ";label:neutral;"),
+        success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.success), ";label:success;"),
+        warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.warning), ";label:warning;"),
+        risk: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.risk), ";label:risk;"),
+        danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
+      }
+    },
     disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS(
@@ -60,20 +86,20 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
     // Text
     text: {
-      euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " cursor:inherit;;label:euiBadge__text;"),
+      euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " padding-inline:", euiTheme.size.xxs, ";cursor:inherit;;label:euiBadge__text;"),
       clickable: _ref2
     },
     // Icon
     icon: {
       euiBadge__icon: /*#__PURE__*/css(";label:euiBadge__icon;"),
-      right: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-left', euiTheme.size.xs), ";};label:right;"),
-      left: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-right', euiTheme.size.xs), ";};label:left;")
+      right: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-left', euiTheme.size.xxs), ";};label:right;"),
+      left: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-right', euiTheme.size.xxs), ";};label:left;")
     },
     // Clickable icons (iconOnClick)
     iconButton: {
       euiBadge__iconButton: _ref,
-      right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),
-      left: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:left;")
+      right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xxs), ";;label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xxs), ";;label:left;")
     },
     // Used in badges with both onClick & iconOnClick
     euiBadge__childButton: /*#__PURE__*/css(euiTextTruncate(), " text-align:inherit;font-weight:inherit;line-height:inherit;color:inherit;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover,&:focus{text-decoration:underline;}};label:euiBadge__childButton;")

package/es/components/badge/beta_badge/beta_badge.styles.js

@@ -49,10 +49,10 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
-    accent: /*#__PURE__*/css(badgeColors.accent, ";label:accent;"),
+    accent: /*#__PURE__*/css(badgeColors.fill.accent, ";label:accent;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/css("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
-    warning: /*#__PURE__*/css(badgeColors.warning, ";label:warning;"),
+    warning: /*#__PURE__*/css(badgeColors.fill.warning, ";label:warning;"),
     // Font sizes
     m: /*#__PURE__*/css("font-size:", euiFontSizeFromScale('xs', euiTheme), ";line-height:", badgeSizes.m, ";;label:m;"),
     s: /*#__PURE__*/css("font-size:0.7rem;line-height:", badgeSizes.s, ";;label:s;"),

package/es/components/badge/color_utils.js

@@ -26,7 +26,7 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
   var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
-  return {
+  var fill = {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
     neutral: euiButtonFillColor(euiThemeContext, 'neutral'),
@@ -35,12 +35,28 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
     risk: euiButtonFillColor(euiThemeContext, 'risk'),
     danger: euiButtonFillColor(euiThemeContext, 'danger'),
     accent: euiButtonFillColor(euiThemeContext, 'accent'),
-    disabled: _objectSpread(_objectSpread({}, euiButtonColor(euiThemeContext, 'disabled')), {}, {
-      borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
-    }),
     // Colors unique to badges
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground)), {}, {
       borderColor: highContrastMode ? euiTheme.border.color : ''
+    })
+  };
+  var base = {
+    primary: euiButtonColor(euiThemeContext, 'primary'),
+    neutral: euiButtonColor(euiThemeContext, 'neutral'),
+    success: euiButtonColor(euiThemeContext, 'success'),
+    warning: euiButtonColor(euiThemeContext, 'warning'),
+    risk: euiButtonColor(euiThemeContext, 'risk'),
+    danger: euiButtonColor(euiThemeContext, 'danger'),
+    accent: euiButtonColor(euiThemeContext, 'accent'),
+    default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.backgroundLightText)), {}, {
+      borderColor: highContrastMode ? euiTheme.border.color : ''
+    })
+  };
+  return {
+    fill: fill,
+    base: base,
+    disabled: _objectSpread(_objectSpread({}, euiButtonColor(euiThemeContext, 'disabled')), {}, {
+      borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
     }),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
@@ -67,9 +83,6 @@ export var getTextColor = function getTextColor(_ref, bgColor) {
   var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 };
-export var getColorContrast = function getColorContrast(textColor, color) {
-  return chroma.contrast(textColor, color);
-};
 export var getIsValidColor = function getIsValidColor(color) {
   return chromaValid(parseColor(color || '') || '');
 };

package/es/components/badge/notification_badge/badge_notification.styles.js

@@ -27,7 +27,7 @@ export var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiT
     })), " ", logicalCSS('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
-    success: /*#__PURE__*/css(badgeColors.success, ";label:success;"),
+    success: /*#__PURE__*/css(badgeColors.fill.success, ";label:success;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;")
   };
 };

package/es/components/button/button.js

@@ -139,4 +139,5 @@ EuiButton.propTypes = {
   }),
   style: PropTypes.any,
   type: PropTypes.any
-};
+};
+EuiButton.displayName = 'EuiButton';

package/es/components/button/button_empty/button_empty.js

@@ -216,4 +216,5 @@ EuiButtonEmpty.propTypes = {
      * Use e.g. when a disabled button should have a tooltip.
      */
   hasAriaDisabled: PropTypes.bool
-};
+};
+EuiButtonEmpty.displayName = 'EuiButtonEmpty';

package/es/components/context_menu/context_menu.js

@@ -1,6 +1,7 @@
 var _excluded = ["isSeparator", "key"],
   _excluded2 = ["panel", "name", "key", "icon", "onClick"],
-  _excluded3 = ["stylesMemoizer", "panels", "onPanelChange", "className", "initialPanelId", "size"];
+  _excluded3 = ["id", "title", "items", "content", "width", "initialFocusedItemIndex", "size"],
+  _excluded4 = ["stylesMemoizer", "panels", "onPanelChange", "className", "initialPanelId", "size"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -253,6 +254,14 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
       if (!panel) {
         return;
       }
+      var _id = panel.id,
+        title = panel.title,
+        _items = panel.items,
+        content = panel.content,
+        _width = panel.width,
+        initialFocusedItemIndex = panel.initialFocusedItemIndex,
+        _size = panel.size,
+        rest = _objectWithoutProperties(panel, _excluded3);
 
       // As above, we need to wait for EuiOutsideClickDetector to complete its logic before
       // re-rendering via showPanel.
@@ -266,22 +275,22 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
         position: 'absolute',
         label: 'euiContextMenu__panel'
       };
-      return ___EmotionJSX(EuiContextMenuPanel, {
+      return ___EmotionJSX(EuiContextMenuPanel, _extends({
         key: panelId,
         size: this.props.size,
         css: cssStyles,
         onHeightChange: transitionType === 'in' ? this.onIncomingPanelHeightChange : undefined,
         onTransitionComplete: transitionType === 'out' ? this.onOutGoingPanelTransitionComplete : undefined,
-        title: panel.title,
+        title: title,
         onClose: onClose,
         transitionType: this.state.isOutgoingPanelVisible ? transitionType : undefined,
         transitionDirection: this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined,
         items: this.state.idToRenderedItemsMap[panelId],
-        initialFocusedItemIndex: this.state.isUsingKeyboardToNavigate ? this.state.focusedItemIndex : panel.initialFocusedItemIndex,
+        initialFocusedItemIndex: this.state.isUsingKeyboardToNavigate ? this.state.focusedItemIndex : initialFocusedItemIndex,
         onUseKeyboardToNavigate: this.onUseKeyboardToNavigate,
         showNextPanel: this.showNextPanel,
         showPreviousPanel: this.showPreviousPanel
-      }, panel.content);
+      }, rest), content);
     }
   }, {
     key: "render",
@@ -293,7 +302,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
         className = _this$props2.className,
         initialPanelId = _this$props2.initialPanelId,
         size = _this$props2.size,
-        rest = _objectWithoutProperties(_this$props2, _excluded3);
+        rest = _objectWithoutProperties(_this$props2, _excluded4);
       var incomingPanel = this.renderPanel(this.state.incomingPanelId, 'in');
       var outgoingPanel;
       if (this.state.isOutgoingPanelVisible) {
@@ -367,7 +376,11 @@ EuiContextMenuClass.propTypes = {
     /**
        * Alters the size of the items and the title
        */
-    size: PropTypes.any
+    size: PropTypes.any,
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired),
   /**
        * Optional callback that fires on every panel change. Passes back

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -679,6 +679,12 @@ EuiSuperDatePickerInternal.propTypes = {
        * @default true
        */
     showZoomOut: PropTypes.bool,
+    /**
+       * Show button for zooming in.
+       * Defaults to false because it's a less common use case
+       * @default false
+       */
+    showZoomIn: PropTypes.bool,
     /**
        * Show buttons for shifting the time window forward and backward
        * @default true
@@ -917,6 +923,7 @@ EuiSuperDatePicker.propTypes = {
      */
   showTimeWindowButtons: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     showZoomOut: PropTypes.bool,
+    showZoomIn: PropTypes.bool,
     showShiftArrows: PropTypes.bool,
     zoomFactor: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired])
   }).isRequired]),

package/es/components/date_picker/super_date_picker/time_window_buttons.js

@@ -17,6 +17,7 @@ import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ZOOM_FACTOR_DEFAULT = 0.5;
+export var ZOOM_DELTA_FALLBACK_MS = 500;
 /**
  * Button group with time window controls for shifting the time window
  * forwards and backwards, and zooming out.
@@ -29,6 +30,8 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     isDisabled = _ref.isDisabled,
     _ref$showZoomOut = _ref.showZoomOut,
     showZoomOut = _ref$showZoomOut === void 0 ? true : _ref$showZoomOut,
+    _ref$showZoomIn = _ref.showZoomIn,
+    showZoomIn = _ref$showZoomIn === void 0 ? false : _ref$showZoomIn,
     _ref$showShiftArrows = _ref.showShiftArrows,
     showShiftArrows = _ref$showShiftArrows === void 0 ? true : _ref$showShiftArrows,
     _ref$zoomFactor = _ref.zoomFactor,
@@ -44,16 +47,29 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     isInvalid = _useEuiTimeWindow.isInvalid,
     stepForward = _useEuiTimeWindow.stepForward,
     stepBackward = _useEuiTimeWindow.stepBackward,
-    expandWindow = _useEuiTimeWindow.expandWindow;
+    expandWindow = _useEuiTimeWindow.expandWindow,
+    shrinkWindow = _useEuiTimeWindow.shrinkWindow,
+    isWindowDurationZero = _useEuiTimeWindow.isWindowDurationZero;
+  var previousDescription = useEuiI18n('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  var nextDescription = useEuiI18n('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
+    displayInterval: displayInterval
+  });
   var invalidShiftDescription = useEuiI18n('euiTimeWindowButtons.invalidShiftLabel', 'Cannot shift invalid time window');
+  var invalidZoomInDescription = useEuiI18n('euiTimeWindowButtons.invalidZoomInLabel', 'Cannot zoom in invalid time window');
+  var cannotZoomInDescription = useEuiI18n('euiTimeWindowButtons.cannotZoomInLabel', 'Cannot zoom in any further');
   var invalidZoomOutDescription = useEuiI18n('euiTimeWindowButtons.invalidZoomOutLabel', 'Cannot zoom out invalid time window');
   var previousId = useGeneratedHtmlId({
     prefix: 'previous'
   });
   var previousLabel = useEuiI18n('euiTimeWindowButtons.previousLabel', 'Previous');
-  var previousTooltipContent = useEuiI18n('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
-    displayInterval: displayInterval
+  var previousTooltipContent = isInvalid ? invalidShiftDescription : previousDescription;
+  var zoomInId = useGeneratedHtmlId({
+    prefix: 'zoom_in'
   });
+  var zoomInLabel = useEuiI18n('euiTimeWindowButtons.zoomInLabel', 'Zoom in');
+  var zoomInTooltipContent = isInvalid ? invalidZoomInDescription : isWindowDurationZero ? cannotZoomInDescription : zoomInLabel;
   var zoomOutId = useGeneratedHtmlId({
     prefix: 'zoom_out'
   });
@@ -63,10 +79,8 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     prefix: 'next'
   });
   var nextLabel = useEuiI18n('euiTimeWindowButtons.nextLabel', 'Next');
-  var nextTooltipContent = useEuiI18n('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
-    displayInterval: displayInterval
-  });
-  if (!showZoomOut && !showShiftArrows) return null;
+  var nextTooltipContent = isInvalid ? invalidShiftDescription : nextDescription;
+  if (!showZoomIn && !showZoomOut && !showShiftArrows) return null;
   return ___EmotionJSX("div", {
     className: "euiSuperDatePicker__timeWindowButtons",
     css: [styles.euiButtonGroup__buttons, styles[buttonSize], ";label:EuiTimeWindowButtons;"],
@@ -76,15 +90,30 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     "data-test-subj": "timeWindowButtonsPrevious",
     label: previousLabel,
     title: "",
-    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : previousTooltipContent),
+    toolTipContent: !isDisabled && previousTooltipContent,
     color: buttonColor,
     size: buttonSize,
     iconType: "arrowLeft",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
-    isDisabled: isDisabled,
+    isDisabled: isWindowDurationZero || isDisabled,
     onClick: stepBackward
+  }), showZoomIn && ___EmotionJSX(EuiButtonGroupButton, {
+    id: zoomInId,
+    "data-test-subj": "timeWindowButtonsZoomIn",
+    label: zoomInLabel,
+    title: "",
+    toolTipContent: !isDisabled && zoomInTooltipContent,
+    toolTipProps: {
+      disableScreenReaderOutput: zoomInLabel === zoomInTooltipContent
+    },
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "magnifyWithPlus",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isDisabled: isWindowDurationZero || isDisabled,
+    onClick: shrinkWindow
   }), showZoomOut && ___EmotionJSX(EuiButtonGroupButton, {
     id: zoomOutId,
     "data-test-subj": "timeWindowButtonsZoomOut",
@@ -99,7 +128,6 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     iconType: "magnifyWithMinus",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
     isDisabled: isDisabled,
     onClick: expandWindow
   }), showShiftArrows && ___EmotionJSX(EuiButtonGroupButton, {
@@ -107,14 +135,13 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     "data-test-subj": "timeWindowButtonsNext",
     label: nextLabel,
     title: "",
-    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : nextTooltipContent),
+    toolTipContent: !isDisabled && nextTooltipContent,
     color: buttonColor,
     size: buttonSize,
     iconType: "arrowRight",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
-    isDisabled: isDisabled,
+    isDisabled: isWindowDurationZero || isDisabled,
     onClick: stepForward
   }));
 };
@@ -129,9 +156,10 @@ export function useEuiTimeWindow(start, end, apply, options) {
     roundUp: true
   });
   var isInvalid = !min || !min.isValid() || !max || !max.isValid();
-  var windowDuration = isInvalid ? 1 : max.diff(min);
+  var windowDuration = isInvalid ? -1 : max.diff(min);
+  var isWindowDurationZero = windowDuration === 0;
   var zoomFactor = getPercentageMultiplier((_options$zoomFactor = options === null || options === void 0 ? void 0 : options.zoomFactor) !== null && _options$zoomFactor !== void 0 ? _options$zoomFactor : ZOOM_FACTOR_DEFAULT);
-  var zoomAddition = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
+  var zoomDelta = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
   var prettyInterval = usePrettyInterval(false, windowDuration);
   var displayInterval = isInvalid ? '' : prettyInterval;
   if (!isInvalid && !isRelativeToNow(start, end) && !isExactMinuteRange(windowDuration)) {
@@ -142,17 +170,19 @@ export function useEuiTimeWindow(start, end, apply, options) {
     isInvalid: isInvalid,
     stepForward: stepForward,
     stepBackward: stepBackward,
-    expandWindow: expandWindow
+    expandWindow: expandWindow,
+    shrinkWindow: shrinkWindow,
+    isWindowDurationZero: isWindowDurationZero
   };
   function stepForward() {
-    if (isInvalid) return;
+    if (isInvalid || isWindowDurationZero) return;
     apply({
       start: moment(max).toISOString(),
       end: moment(max).add(windowDuration, 'ms').toISOString()
     });
   }
   function stepBackward() {
-    if (isInvalid) return;
+    if (isInvalid || isWindowDurationZero) return;
     apply({
       start: moment(min).subtract(windowDuration, 'ms').toISOString(),
       end: moment(min).toISOString()
@@ -160,20 +190,39 @@ export function useEuiTimeWindow(start, end, apply, options) {
   }
   function expandWindow() {
     if (isInvalid) return;
+    // when the window is 0 it'll remain 0 unless we help it a little
+    var addition = zoomDelta === 0 ? ZOOM_DELTA_FALLBACK_MS : zoomDelta;
     apply({
-      start: moment(min).subtract(zoomAddition, 'ms').toISOString(),
-      end: moment(max).add(zoomAddition, 'ms').toISOString()
+      start: moment(min).subtract(addition, 'ms').toISOString(),
+      end: moment(max).add(addition, 'ms').toISOString()
+    });
+  }
+  function shrinkWindow() {
+    if (isInvalid || isWindowDurationZero) return;
+    apply({
+      start: moment(min).add(zoomDelta, 'ms').toISOString(),
+      end: moment(max).subtract(zoomDelta, 'ms').toISOString()
     });
   }
 }
 
 /**
- * Get a number out of either 0.2 or "20%"
+ * Convert strings with % to a multiplier e.g. "50%" = 0.5
+ * Strings without % are returned as-is as number
  */
 function getPercentageMultiplier(value) {
-  var result = typeof value === 'number' ? value : parseFloat(String(value).replace('%', '').trim());
-  if (isNaN(result)) throw new TypeError('Please provide a valid number or percentage string e.g. "25%"');
-  return result > 1 ? result / 100 : result;
+  if (typeof value === 'string' && value.includes('%')) {
+    var parsed = parseFloat(value.replace('%', '').trim());
+    if (isNaN(parsed)) {
+      throw new TypeError('Invalid percentage string');
+    }
+    return parsed / 100;
+  }
+  var result = typeof value === 'number' ? value : parseFloat(String(value));
+  if (isNaN(result)) {
+    throw new TypeError('Please provide a valid number or percentage string e.g. "25%"');
+  }
+  return result;
 }
 
 /**

package/es/components/description_list/description_list.js

@@ -166,4 +166,5 @@ EuiDescriptionList.propTypes = {
      * sizing, keywords, and sizing functions](https://css-tricks.com/snippets/css/complete-guide-grid/#aa-special-units-functions).
      */
   columnWidths: PropTypes.any
-};
+};
+EuiDescriptionList.displayName = 'EuiDescriptionList';

package/es/components/description_list/description_list_description.js

@@ -58,4 +58,5 @@ EuiDescriptionListDescription.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
-};
+};
+EuiDescriptionListDescription.displayName = 'EuiDescriptionListDescription';

package/es/components/description_list/description_list_title.js

@@ -62,4 +62,5 @@ EuiDescriptionListTitle.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
-};
+};
+EuiDescriptionListTitle.displayName = 'EuiDescriptionListTitle';

package/es/components/empty_prompt/empty_prompt.js

@@ -179,4 +179,5 @@ EuiEmptyPrompt.propTypes = {
        * Padding applied around the content and footer.
        */
   paddingSize: PropTypes.any
-};
+};
+EuiEmptyPrompt.displayName = 'EuiEmptyPrompt';

package/es/components/flex/flex_grid.js

@@ -95,4 +95,5 @@ EuiFlexGrid.propTypes = {
      * @default div
      */
   component: PropTypes.any
-};
+};
+EuiFlexGrid.displayName = 'EuiFlexGrid';