@elastic/eui 112.0.0 → 112.1.0

package/optimize/lib/components/badge/badge.styles.js

@@ -33,28 +33,54 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = (0, _color_utils.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 = (0, _global_styling.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__*/(0, _react.css)("display:inline-block;vertical-align:middle;", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", (0, _global_styling.mathWithUnits)(
+    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(inlinePadding)), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", (0, _global_styling.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:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
-      return x / 2;
-    }), ";", (0, _global_styling.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{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.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, ";", (0, _global_styling.logicalTextAlignCSS)('left'), "color:var(--euiBadgeTextColor, ", defaultBadgeColors.color, ");background-color:var(\n        --euiBadgeBackgroundColor,\n        ", defaultBadgeColors.backgroundColor, "\n      );", (0, _global_styling.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{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    iconOnly: /*#__PURE__*/(0, _react.css)("padding-inline:", (0, _global_styling.mathWithUnits)(
+    // Account for the border
+    [euiTheme.size.xs, euiTheme.border.width.thin], function (size, borderWidth) {
+      return size - borderWidth;
+    }), ";;label:iconOnly;"),
     clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
-    // Colors
-    default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.default), " border-color:", badgeColors.default.borderColor, ";;label:default;"),
-    hollow: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
-    primary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
-    accent: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
-    neutral: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.neutral), ";label:neutral;"),
-    success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.success), ";label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
-    risk: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.risk), ";label:risk;"),
-    danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
+    colors: {
+      fill: {
+        default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.default), " border-color:", badgeColors.fill.default.borderColor, ";;label:default;"),
+        hollow: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+        primary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.primary), ";label:primary;"),
+        accent: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.accent), ";label:accent;"),
+        neutral: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.neutral), ";label:neutral;"),
+        success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.success), ";label:success;"),
+        warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.warning), ";label:warning;"),
+        risk: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.risk), ";label:risk;"),
+        danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.danger), ";label:danger;")
+      },
+      base: {
+        default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.default), " border-color:", badgeColors.base.default.borderColor, ";;label:default;"),
+        hollow: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+        primary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.primary), ";label:primary;"),
+        accent: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.accent), ";label:accent;"),
+        neutral: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.neutral), ";label:neutral;"),
+        success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.success), ";label:success;"),
+        warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.warning), ";label:warning;"),
+        risk: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.risk), ";label:risk;"),
+        danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
+      }
+    },
     disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
@@ -64,20 +90,20 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
     // Text
     text: {
-      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " cursor:inherit;;label:euiBadge__text;"),
+      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " padding-inline:", euiTheme.size.xxs, ";cursor:inherit;;label:euiBadge__text;"),
       clickable: _ref2
     },
     // Icon
     icon: {
       euiBadge__icon: /*#__PURE__*/(0, _react.css)(";label:euiBadge__icon;"),
-      right: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:right;"),
-      left: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";};label:left;")
+      right: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xxs), ";};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xxs), ";};label:left;")
     },
     // Clickable icons (iconOnClick)
     iconButton: {
       euiBadge__iconButton: _ref,
-      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:right;"),
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:left;")
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xxs), ";;label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xxs), ";;label:left;")
     },
     // Used in badges with both onClick & iconOnClick
     euiBadge__childButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.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/optimize/lib/components/badge/beta_badge/beta_badge.styles.js

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

package/optimize/lib/components/badge/color_utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextColor = exports.getIsValidColor = exports.getColorContrast = exports.getBadgeColors = exports.euiBadgeColors = void 0;
+exports.getTextColor = exports.getIsValidColor = exports.getBadgeColors = exports.euiBadgeColors = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
@@ -23,7 +23,7 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
   var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
-  return {
+  var fill = {
     // Colors shared between buttons and badges
     primary: (0, _button.euiButtonFillColor)(euiThemeContext, 'primary'),
     neutral: (0, _button.euiButtonFillColor)(euiThemeContext, 'neutral'),
@@ -32,12 +32,28 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
     risk: (0, _button.euiButtonFillColor)(euiThemeContext, 'risk'),
     danger: (0, _button.euiButtonFillColor)(euiThemeContext, 'danger'),
     accent: (0, _button.euiButtonFillColor)(euiThemeContext, 'accent'),
-    disabled: _objectSpread(_objectSpread({}, (0, _button.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: (0, _button.euiButtonColor)(euiThemeContext, 'primary'),
+    neutral: (0, _button.euiButtonColor)(euiThemeContext, 'neutral'),
+    success: (0, _button.euiButtonColor)(euiThemeContext, 'success'),
+    warning: (0, _button.euiButtonColor)(euiThemeContext, 'warning'),
+    risk: (0, _button.euiButtonColor)(euiThemeContext, 'risk'),
+    danger: (0, _button.euiButtonColor)(euiThemeContext, 'danger'),
+    accent: (0, _button.euiButtonColor)(euiThemeContext, 'accent'),
+    default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.backgroundLightText)), {}, {
+      borderColor: highContrastMode ? euiTheme.border.color : ''
+    })
+  };
+  return {
+    fill: fill,
+    base: base,
+    disabled: _objectSpread(_objectSpread({}, (0, _button.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)), {}, {
@@ -64,9 +80,6 @@ var getTextColor = exports.getTextColor = function getTextColor(_ref, bgColor) {
   var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 };
-var getColorContrast = exports.getColorContrast = function getColorContrast(textColor, color) {
-  return _chromaJs.default.contrast(textColor, color);
-};
 var getIsValidColor = exports.getIsValidColor = function getIsValidColor(color) {
   return (0, _utils.chromaValid)((0, _utils.parseColor)(color || '') || '');
 };

package/optimize/lib/components/badge/notification_badge/badge_notification.styles.js

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

package/optimize/lib/components/button/button.js

@@ -55,4 +55,5 @@ var EuiButton = exports.EuiButton = function EuiButton(_ref) {
     ref: buttonRef,
     size: size
   }, rest));
-};
+};
+EuiButton.displayName = 'EuiButton';

package/optimize/lib/components/button/button_empty/button_empty.js

@@ -123,4 +123,5 @@ var EuiButtonEmpty = exports.EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     ref: setCombinedRef,
     "aria-pressed": isSelected
   }, rest, disabledButtonProps), innerNode);
-};
+};
+EuiButtonEmpty.displayName = 'EuiButtonEmpty';

package/optimize/lib/components/context_menu/context_menu.js

@@ -24,7 +24,8 @@ var _context_menu = require("./context_menu.styles");
 var _react2 = require("@emotion/react");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -253,6 +254,14 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
       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 = (0, _objectWithoutProperties2.default)(panel, _excluded3);
 
       // As above, we need to wait for EuiOutsideClickDetector to complete its logic before
       // re-rendering via showPanel.
@@ -266,22 +275,22 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
         position: 'absolute',
         label: 'euiContextMenu__panel'
       };
-      return (0, _react2.jsx)(_context_menu_panel.EuiContextMenuPanel, {
+      return (0, _react2.jsx)(_context_menu_panel.EuiContextMenuPanel, (0, _extends2.default)({
         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 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
         className = _this$props2.className,
         initialPanelId = _this$props2.initialPanelId,
         size = _this$props2.size,
-        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded3);
+        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded4);
       var incomingPanel = this.renderPanel(this.state.incomingPanelId, 'in');
       var outgoingPanel;
       if (this.state.isOutgoingPanelVisible) {

package/optimize/lib/components/date_picker/super_date_picker/time_window_buttons.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_FACTOR_DEFAULT = exports.EuiTimeWindowButtons = void 0;
+exports.ZOOM_FACTOR_DEFAULT = exports.ZOOM_DELTA_FALLBACK_MS = exports.EuiTimeWindowButtons = void 0;
 exports.useEuiTimeWindow = useEuiTimeWindow;
 var _react = _interopRequireDefault(require("react"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
@@ -25,6 +25,7 @@ var _react2 = require("@emotion/react");
  */
 
 var ZOOM_FACTOR_DEFAULT = exports.ZOOM_FACTOR_DEFAULT = 0.5;
+var ZOOM_DELTA_FALLBACK_MS = exports.ZOOM_DELTA_FALLBACK_MS = 500;
 /**
  * Button group with time window controls for shifting the time window
  * forwards and backwards, and zooming out.
@@ -37,6 +38,8 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     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,
@@ -52,16 +55,29 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     isInvalid = _useEuiTimeWindow.isInvalid,
     stepForward = _useEuiTimeWindow.stepForward,
     stepBackward = _useEuiTimeWindow.stepBackward,
-    expandWindow = _useEuiTimeWindow.expandWindow;
+    expandWindow = _useEuiTimeWindow.expandWindow,
+    shrinkWindow = _useEuiTimeWindow.shrinkWindow,
+    isWindowDurationZero = _useEuiTimeWindow.isWindowDurationZero;
+  var previousDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  var nextDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
+    displayInterval: displayInterval
+  });
   var invalidShiftDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.invalidShiftLabel', 'Cannot shift invalid time window');
+  var invalidZoomInDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.invalidZoomInLabel', 'Cannot zoom in invalid time window');
+  var cannotZoomInDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.cannotZoomInLabel', 'Cannot zoom in any further');
   var invalidZoomOutDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.invalidZoomOutLabel', 'Cannot zoom out invalid time window');
   var previousId = (0, _services.useGeneratedHtmlId)({
     prefix: 'previous'
   });
   var previousLabel = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.previousLabel', 'Previous');
-  var previousTooltipContent = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
-    displayInterval: displayInterval
+  var previousTooltipContent = isInvalid ? invalidShiftDescription : previousDescription;
+  var zoomInId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'zoom_in'
   });
+  var zoomInLabel = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.zoomInLabel', 'Zoom in');
+  var zoomInTooltipContent = isInvalid ? invalidZoomInDescription : isWindowDurationZero ? cannotZoomInDescription : zoomInLabel;
   var zoomOutId = (0, _services.useGeneratedHtmlId)({
     prefix: 'zoom_out'
   });
@@ -71,10 +87,8 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     prefix: 'next'
   });
   var nextLabel = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.nextLabel', 'Next');
-  var nextTooltipContent = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
-    displayInterval: displayInterval
-  });
-  if (!showZoomOut && !showShiftArrows) return null;
+  var nextTooltipContent = isInvalid ? invalidShiftDescription : nextDescription;
+  if (!showZoomIn && !showZoomOut && !showShiftArrows) return null;
   return (0, _react2.jsx)("div", {
     className: "euiSuperDatePicker__timeWindowButtons",
     css: [styles.euiButtonGroup__buttons, styles[buttonSize], ";label:EuiTimeWindowButtons;"],
@@ -84,15 +98,30 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     "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 && (0, _react2.jsx)(_button_group_button.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 && (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, {
     id: zoomOutId,
     "data-test-subj": "timeWindowButtonsZoomOut",
@@ -107,7 +136,6 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     iconType: "magnifyWithMinus",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
     isDisabled: isDisabled,
     onClick: expandWindow
   }), showShiftArrows && (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, {
@@ -115,14 +143,13 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     "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
   }));
 };
@@ -137,9 +164,10 @@ 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 = (0, _pretty_interval.usePrettyInterval)(false, windowDuration);
   var displayInterval = isInvalid ? '' : prettyInterval;
   if (!isInvalid && !(0, _relative_utils.isRelativeToNow)(start, end) && !isExactMinuteRange(windowDuration)) {
@@ -150,17 +178,19 @@ 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: (0, _moment.default)(max).toISOString(),
       end: (0, _moment.default)(max).add(windowDuration, 'ms').toISOString()
     });
   }
   function stepBackward() {
-    if (isInvalid) return;
+    if (isInvalid || isWindowDurationZero) return;
     apply({
       start: (0, _moment.default)(min).subtract(windowDuration, 'ms').toISOString(),
       end: (0, _moment.default)(min).toISOString()
@@ -168,20 +198,39 @@ 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: (0, _moment.default)(min).subtract(zoomAddition, 'ms').toISOString(),
-      end: (0, _moment.default)(max).add(zoomAddition, 'ms').toISOString()
+      start: (0, _moment.default)(min).subtract(addition, 'ms').toISOString(),
+      end: (0, _moment.default)(max).add(addition, 'ms').toISOString()
+    });
+  }
+  function shrinkWindow() {
+    if (isInvalid || isWindowDurationZero) return;
+    apply({
+      start: (0, _moment.default)(min).add(zoomDelta, 'ms').toISOString(),
+      end: (0, _moment.default)(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/optimize/lib/components/description_list/description_list.js

@@ -101,4 +101,5 @@ var EuiDescriptionList = exports.EuiDescriptionList = function EuiDescriptionLis
   }, rest, {
     "data-type": _type
   }), listItems ? renderedListItems : children));
-};
+};
+EuiDescriptionList.displayName = 'EuiDescriptionList';

package/optimize/lib/components/description_list/description_list_description.js

@@ -53,4 +53,5 @@ var EuiDescriptionListDescription = exports.EuiDescriptionListDescription = func
     className: classes,
     css: cssStyles
   }, rest), children);
-};
+};
+EuiDescriptionListDescription.displayName = 'EuiDescriptionListDescription';

package/optimize/lib/components/description_list/description_list_title.js

@@ -57,4 +57,5 @@ var EuiDescriptionListTitle = exports.EuiDescriptionListTitle = function EuiDesc
     className: classes,
     css: cssStyles
   }, rest), children);
-};
+};
+EuiDescriptionListTitle.displayName = 'EuiDescriptionListTitle';

package/optimize/lib/components/empty_prompt/empty_prompt.js

@@ -122,4 +122,5 @@ var EuiEmptyPrompt = exports.EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
   }, body), actionsNode && (body || title) && (0, _react2.jsx)(_spacer.EuiSpacer, {
     size: "l"
   }), actionsNode)), footerNode);
-};
+};
+EuiEmptyPrompt.displayName = 'EuiEmptyPrompt';

package/optimize/lib/components/flex/flex_grid.js

@@ -62,4 +62,5 @@ var EuiFlexGrid = exports.EuiFlexGrid = function EuiFlexGrid(_ref) {
     className: classes,
     style: columnDirectionStyles ? _objectSpread(_objectSpread({}, style), columnDirectionStyles) : style
   }, rest), children);
-};
+};
+EuiFlexGrid.displayName = 'EuiFlexGrid';