@elastic/eui 92.2.1 → 93.1.0

package/optimize/es/components/code/code_block_full_screen.js

@@ -13,6 +13,7 @@ import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockStyles } from './code_block.styles';
 
 /**
@@ -68,8 +69,7 @@ export var useFullScreen = function useFullScreen(_ref) {
  */
 export var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2) {
   var children = _ref2.children;
-  var euiThemeContext = useEuiTheme();
-  var styles = euiCodeBlockStyles(euiThemeContext);
+  var styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   var cssStyles = [styles.euiCodeBlock, styles.l,
   // Force fullscreen to use large font
   styles.isFullScreen];

package/optimize/es/components/code/code_syntax.styles.js

@@ -6,39 +6,44 @@
  * Side Public License, v 1.
  */
 
-import { makeHighContrastColor, euiPaletteColorBlind } from '../../services';
+import { useMemo } from 'react';
+import { useEuiTheme, makeHighContrastColor, euiPaletteColorBlind } from '../../services';
 var visColors = euiPaletteColorBlind();
-export var euiCodeSyntaxColors = function euiCodeSyntaxColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var backgroundColor = euiTheme.colors.lightestShade;
-  return {
-    backgroundColor: backgroundColor,
-    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
-    inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
-    selectedBackgroundColor: 'inherit',
-    commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    selectorTagColor: 'inherit',
-    stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
-    tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
-    keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
-    functionTitleColor: 'inherit',
-    typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    attributeColor: 'inherit',
-    symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
-    paramsColor: 'inherit',
-    metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
-    sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
-    additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
-    deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
-    selectorClassColor: 'inherit',
-    selectorIdColor: 'inherit'
-  };
-};
-export var euiCodeSyntaxTokens = function euiCodeSyntaxTokens(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeBlock = euiCodeSyntaxColors(euiThemeContext);
-  return "\n    .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n      opacity: .7;\n    }\n  \n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata,\n    .token.coord,\n    .token.blockquote {\n      color: ".concat(euiCodeBlock.commentColor, ";\n      font-style: italic;\n    }\n  \n    .token.selector {\n      color: ").concat(euiCodeBlock.selectorTagColor, ";\n    }\n  \n    .token.string,\n    .token.interpolation,\n    .token.interpolation-punctuation,\n    .token.doc-comment .token.keyword,\n    .token.attr-value,\n    .token.url .token.content {\n      color: ").concat(euiCodeBlock.stringColor, ";\n    }\n  \n    .token.number,\n    .token.boolean,\n    .token.keyword.nil,\n    .token.regex,\n    .token.variable,\n    .token.unit,\n    .token.hexcode,\n    .token.attr-name,\n    .token.attr-equals {\n      color: ").concat(euiCodeBlock.numberColor, ";\n    }\n  \n    .token.atrule .token.rule,\n    .token.keyword {\n      color: ").concat(euiCodeBlock.keywordColor, ";\n    }\n  \n    .token.function {\n      color: ").concat(euiCodeBlock.functionTitleColor, ";\n    }\n  \n    .token.tag {\n      color: ").concat(euiCodeBlock.tagColor, ";\n    }\n  \n    .token.class-name {\n      color: ").concat(euiCodeBlock.typeColor, ";\n    }\n  \n    .token.property {\n      color: ").concat(euiCodeBlock.attributeColor, ";\n    }\n  \n    .token.console,\n    .token.list-punctuation,\n    .token.url-reference,\n    .token.url .token.url {\n      color: ").concat(euiCodeBlock.symbolColor, ";\n    }\n  \n    .token.paramater {\n      color: ").concat(euiCodeBlock.paramsColor, ";\n    }\n  \n    .token.meta,\n    .token.important {\n      color: ").concat(euiCodeBlock.metaColor, ";\n    }\n  \n    .token.title {\n      color: ").concat(euiCodeBlock.titleColor, ";\n    }\n  \n    .token.section {\n      color: ").concat(euiCodeBlock.sectionColor, ";\n    }\n  \n    .token.prefix.inserted,\n    .token.prefix.deleted {\n      padding-inline-start: -").concat(euiTheme.size.xs, ";\n      margin-inline-start:  -").concat(euiTheme.size.xs, ";\n    }\n  \n    .token.prefix.inserted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.additionColor, ";\n      color: ").concat(euiCodeBlock.additionColor, ";\n    }\n  \n    .token.prefix.deleted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.deletionColor, ";\n      color: ").concat(euiCodeBlock.deletionColor, ";\n    }\n  \n    .token.selector .token.class {\n      color: ").concat(euiCodeBlock.selectorClassColor, ";\n    }\n  \n    .token.selector .token.id {\n      color: ").concat(euiCodeBlock.selectorIdColor, ";\n    }\n  \n    .token.italic {\n      font-style: italic;\n    }\n  \n    .token.important,\n    .token.bold {\n      font-weight: ").concat(euiTheme.font.weight.bold, ";\n    }\n  \n    .token.url-reference,\n    .token.url .token.url {\n      text-decoration: underline;\n    }\n  \n    .token.entity {\n      cursor: help;\n    }\n  ");
+
+// These variables are computationally expensive, so it needs
+// to be a hook in order to memoize it per theme
+export var useEuiCodeSyntaxVariables = function useEuiCodeSyntaxVariables() {
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  return useMemo(function () {
+    var backgroundColor = euiTheme.colors.lightestShade;
+    return {
+      backgroundColor: backgroundColor,
+      color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+      inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
+      selectedBackgroundColor: 'inherit',
+      commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+      selectorTagColor: 'inherit',
+      stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
+      tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
+      keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
+      functionTitleColor: 'inherit',
+      typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      attributeColor: 'inherit',
+      symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
+      paramsColor: 'inherit',
+      metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+      titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
+      sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
+      additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
+      deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
+      selectorClassColor: 'inherit',
+      selectorIdColor: 'inherit',
+      get tokensCss() {
+        return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      }
+    };
+  }, [euiTheme]);
 };

package/optimize/es/components/comment_list/comment_event.js

@@ -9,9 +9,10 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
+import { useEuiBorderColorCSS } from '../../global_styling';
 import { EuiPanel } from '../panel';
 import { EuiAvatar } from '../avatar';
-import { euiCommentEventBorderColors, euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
+import { euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCommentEvent = function EuiCommentEvent(_ref) {
   var children = _ref.children,
@@ -63,7 +64,7 @@ export var EuiCommentEvent = function EuiCommentEvent(_ref) {
    * Styles
    */
   var euiTheme = useEuiTheme();
-  var borderStyles = euiCommentEventBorderColors(euiTheme);
+  var borderStyles = useEuiBorderColorCSS();
   var styles = euiCommentEventStyles(euiTheme);
   var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[eventColor]];
   var headerStyles = euiCommentEventHeaderStyles(euiTheme);

package/optimize/es/components/comment_list/comment_event.styles.js

@@ -8,23 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { tintOrShade } from '../../services';
 import { logicalCSS } from '../../global_styling';
-export var euiCommentEventBorderColors = function euiCommentEventBorderColors(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  var ratio = 0.6;
-  return {
-    warning: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.warning, 0.4, colorMode), ";;label:warning;"),
-    accent: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.accent, ratio, colorMode), ";;label:accent;"),
-    primary: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.primary, ratio, colorMode), ";;label:primary;"),
-    success: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.success, ratio, colorMode), ";;label:success;"),
-    danger: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.danger, ratio, colorMode), ";;label:danger;"),
-    subdued: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:subdued;"),
-    transparent: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:transparent;"),
-    plain: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:plain;")
-  };
-};
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "yoyozp-euiCommentEvent",
   styles: "overflow:hidden;label:euiCommentEvent;"
@@ -62,8 +46,8 @@ export var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(eu
     euiCommentEvent__headerActions: /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerActions;")
   };
 };
-export var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiCommentEvent__body: /*#__PURE__*/css(";label:euiCommentEvent__body;"),
     // types

package/optimize/es/components/context_menu/context_menu.js

@@ -8,7 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isSeparator", "key"],
-  _excluded2 = ["panel", "name", "key", "icon", "onClick", "toolTipTitle", "toolTipContent"],
+  _excluded2 = ["panel", "name", "key", "icon", "onClick"],
   _excluded3 = ["theme", "panels", "onPanelChange", "className", "initialPanelId", "size"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import { withEuiTheme } from '../../services';
 import { EuiHorizontalRule } from '../horizontal_rule';
@@ -196,10 +196,16 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
       var _this2 = this;
       var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return items.map(function (item, index) {
+        if (item.renderItem) {
+          var _item$key;
+          return ___EmotionJSX(Fragment, {
+            key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : index
+          }, item.renderItem());
+        }
         if (isItemSeparator(item)) {
           var omit = item.isSeparator,
-            _item$key = item.key,
-            _key = _item$key === void 0 ? index : _item$key,
+            _item$key2 = item.key,
+            _key = _item$key2 === void 0 ? index : _item$key2,
             _rest = _objectWithoutProperties(item, _excluded);
           return ___EmotionJSX(EuiHorizontalRule, _extends({
             key: _key,
@@ -211,8 +217,6 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           key = item.key,
           icon = item.icon,
           onClick = item.onClick,
-          toolTipTitle = item.toolTipTitle,
-          toolTipContent = item.toolTipContent,
           rest = _objectWithoutProperties(item, _excluded2);
         var onClickHandler = panel ? function (event) {
           if (onClick && event) {
@@ -231,9 +235,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           key: key || (typeof name === 'string' ? name : undefined) || index,
           icon: icon,
           onClick: onClickHandler,
-          hasPanel: Boolean(panel),
-          toolTipTitle: toolTipTitle,
-          toolTipContent: toolTipContent
+          hasPanel: Boolean(panel)
         }, rest), name);
       });
     }

package/optimize/es/components/context_menu/context_menu_item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipTitle", "toolTipContent", "toolTipPosition", "toolTipProps", "href", "target", "rel", "size"];
+var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,10 +34,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     _disabled = _ref.disabled,
     _ref$layoutAlign = _ref.layoutAlign,
     layoutAlign = _ref$layoutAlign === void 0 ? 'center' : _ref$layoutAlign,
-    toolTipTitle = _ref.toolTipTitle,
     toolTipContent = _ref.toolTipContent,
-    _ref$toolTipPosition = _ref.toolTipPosition,
-    toolTipPosition = _ref$toolTipPosition === void 0 ? 'right' : _ref$toolTipPosition,
     toolTipProps = _ref.toolTipProps,
     href = _ref.href,
     target = _ref.target,
@@ -108,8 +105,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
   if (toolTipContent) {
     var anchorClasses = classNames('eui-displayBlock', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
     return ___EmotionJSX(EuiToolTip, _extends({
-      title: toolTipTitle ? toolTipTitle : null,
-      position: toolTipPosition
+      position: "right"
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       content: toolTipContent

package/optimize/es/components/datagrid/body/cell/data_grid_cell.js

@@ -90,6 +90,7 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
   }))));
   return ___EmotionJSX(React.Fragment, null, cellContent, screenReaderText, cellActions);
 });
+EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   _inherits(EuiDataGridCell, _Component);
   var _super = _createSuper(EuiDataGridCell);

package/optimize/es/components/date_picker/auto_refresh/auto_refresh.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "onRefreshChange", "isDisabled", "isPaused", "refreshInterval", "readOnly"],
-  _excluded2 = ["className", "onRefreshChange", "isDisabled", "isPaused", "refreshInterval", "shortHand", "size", "color"];
+var _excluded = ["className", "onRefreshChange", "intervalUnits", "isDisabled", "isPaused", "refreshInterval", "minInterval", "readOnly"],
+  _excluded2 = ["className", "onRefreshChange", "intervalUnits", "isDisabled", "isPaused", "refreshInterval", "minInterval", "shortHand", "size", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,11 +23,14 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAutoRefresh = function EuiAutoRefresh(_ref) {
   var className = _ref.className,
     onRefreshChange = _ref.onRefreshChange,
+    intervalUnits = _ref.intervalUnits,
     isDisabled = _ref.isDisabled,
     _ref$isPaused = _ref.isPaused,
     isPaused = _ref$isPaused === void 0 ? true : _ref$isPaused,
     _ref$refreshInterval = _ref.refreshInterval,
     refreshInterval = _ref$refreshInterval === void 0 ? 1000 : _ref$refreshInterval,
+    _ref$minInterval = _ref.minInterval,
+    minInterval = _ref$minInterval === void 0 ? 0 : _ref$minInterval,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -61,7 +64,9 @@ export var EuiAutoRefresh = function EuiAutoRefresh(_ref) {
       }, ___EmotionJSX("strong", null, ___EmotionJSX("small", null, autoRefeshLabel))),
       readOnly: readOnly,
       disabled: isDisabled,
-      value: usePrettyInterval(Boolean(isPaused), refreshInterval)
+      value: usePrettyInterval(Boolean(isPaused), refreshInterval, {
+        unit: intervalUnits
+      })
     }, rest)),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
@@ -70,17 +75,22 @@ export var EuiAutoRefresh = function EuiAutoRefresh(_ref) {
   }, ___EmotionJSX(EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,
-    refreshInterval: refreshInterval
+    refreshInterval: refreshInterval,
+    minInterval: minInterval,
+    intervalUnits: intervalUnits
   }));
 };
 export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
   var className = _ref2.className,
     onRefreshChange = _ref2.onRefreshChange,
+    intervalUnits = _ref2.intervalUnits,
     isDisabled = _ref2.isDisabled,
     _ref2$isPaused = _ref2.isPaused,
     isPaused = _ref2$isPaused === void 0 ? true : _ref2$isPaused,
     _ref2$refreshInterval = _ref2.refreshInterval,
     refreshInterval = _ref2$refreshInterval === void 0 ? 1000 : _ref2$refreshInterval,
+    _ref2$minInterval = _ref2.minInterval,
+    minInterval = _ref2$minInterval === void 0 ? 0 : _ref2$minInterval,
     _ref2$shortHand = _ref2.shortHand,
     shortHand = _ref2$shortHand === void 0 ? false : _ref2$shortHand,
     _ref2$size = _ref2.size,
@@ -95,7 +105,9 @@ export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
   var classes = classNames('euiAutoRefreshButton', className);
   var autoRefeshLabelOff = useEuiI18n('euiAutoRefresh.buttonLabelOff', 'Auto refresh is off');
   var autoRefeshLabelOn = useEuiI18n('euiAutoRefresh.buttonLabelOn', 'Auto refresh is on and set to {prettyInterval}', {
-    prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval)
+    prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval, {
+      unit: intervalUnits
+    })
   });
   return ___EmotionJSX(EuiPopover, {
     button: ___EmotionJSX(EuiButtonEmpty, _extends({
@@ -110,7 +122,10 @@ export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
       iconType: "timeRefresh",
       title: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn,
       isDisabled: isDisabled
-    }, rest), usePrettyInterval(Boolean(isPaused), refreshInterval, shortHand)),
+    }, rest), usePrettyInterval(Boolean(isPaused), refreshInterval, {
+      shortHand: shortHand,
+      unit: intervalUnits
+    })),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
       setIsPopoverOpen(false);
@@ -119,6 +134,8 @@ export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
   }, ___EmotionJSX(EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,
-    refreshInterval: refreshInterval
+    refreshInterval: refreshInterval,
+    minInterval: minInterval,
+    intervalUnits: intervalUnits
   }));
 };

package/optimize/es/components/date_picker/auto_refresh/refresh_interval.js

@@ -5,6 +5,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -26,17 +28,17 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var MILLISECONDS_IN_SECOND = 1000;
 var MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60;
 var MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60;
-function fromMilliseconds(milliseconds) {
+var fromMilliseconds = function fromMilliseconds(milliseconds, unit) {
   var round = function round(value) {
     return parseFloat(value.toFixed(2));
   };
-  if (milliseconds > MILLISECONDS_IN_HOUR) {
+  if (unit === 'h' || !unit && milliseconds > MILLISECONDS_IN_HOUR) {
     return {
       units: 'h',
       value: round(milliseconds / MILLISECONDS_IN_HOUR)
     };
   }
-  if (milliseconds > MILLISECONDS_IN_MINUTE) {
+  if (unit === 'm' || !unit && milliseconds > MILLISECONDS_IN_MINUTE) {
     return {
       units: 'm',
       value: round(milliseconds / MILLISECONDS_IN_MINUTE)
@@ -46,8 +48,8 @@ function fromMilliseconds(milliseconds) {
     units: 's',
     value: round(milliseconds / MILLISECONDS_IN_SECOND)
   };
-}
-function toMilliseconds(units, value) {
+};
+var toMilliseconds = function toMilliseconds(units, value) {
   switch (units) {
     case 'h':
       return Math.round(value * MILLISECONDS_IN_HOUR);
@@ -57,7 +59,13 @@ function toMilliseconds(units, value) {
     default:
       return Math.round(value * MILLISECONDS_IN_SECOND);
   }
-}
+};
+var getMinInterval = function getMinInterval(minInterval, unit) {
+  if (!minInterval) return 0;
+  var _fromMilliseconds = fromMilliseconds(minInterval, unit),
+    value = _fromMilliseconds.value;
+  return Math.floor(value || 0);
+};
 export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
   _inherits(EuiRefreshInterval, _Component);
   var _super = _createSuper(EuiRefreshInterval);
@@ -68,7 +76,9 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", fromMilliseconds(_this.props.refreshInterval || 0));
+    _defineProperty(_assertThisInitialized(_this), "state", _objectSpread(_objectSpread({}, fromMilliseconds(_this.props.refreshInterval || 0, _this.props.intervalUnits)), {}, {
+      min: getMinInterval(_this.props.minInterval, _this.props.intervalUnits)
+    }));
     _defineProperty(_assertThisInitialized(_this), "generateId", htmlIdGenerator());
     _defineProperty(_assertThisInitialized(_this), "legendId", _this.generateId());
     _defineProperty(_assertThisInitialized(_this), "refreshSelectionId", _this.generateId());
@@ -79,8 +89,10 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       }, _this.applyRefreshInterval);
     });
     _defineProperty(_assertThisInitialized(_this), "onUnitsChange", function (event) {
+      var units = event.target.value;
       _this.setState({
-        units: event.target.value
+        units: units,
+        min: getMinInterval(_this.props.minInterval, units)
       }, _this.applyRefreshInterval);
     });
     _defineProperty(_assertThisInitialized(_this), "startRefresh", function () {
@@ -91,6 +103,7 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       if (value !== '' && value > 0 && onRefreshChange !== undefined) {
         onRefreshChange({
           refreshInterval: toMilliseconds(units, value),
+          intervalUnits: units,
           isPaused: false
         });
       }
@@ -104,7 +117,8 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "applyRefreshInterval", function () {
       var _this$props = _this.props,
         onRefreshChange = _this$props.onRefreshChange,
-        isPaused = _this$props.isPaused;
+        isPaused = _this$props.isPaused,
+        minInterval = _this$props.minInterval;
       var _this$state2 = _this.state,
         units = _this$state2.units,
         value = _this$state2.value;
@@ -114,9 +128,10 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       if (!onRefreshChange) {
         return;
       }
-      var refreshInterval = toMilliseconds(units, value);
+      var refreshInterval = Math.max(toMilliseconds(units, value), minInterval || 0);
       onRefreshChange({
         refreshInterval: refreshInterval,
+        intervalUnits: units,
         isPaused: refreshInterval <= 0 ? true : !!isPaused
       });
     });
@@ -132,6 +147,7 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       }
       onRefreshChange({
         refreshInterval: toMilliseconds(units, value),
+        intervalUnits: units,
         isPaused: !isPaused
       });
     });
@@ -173,7 +189,8 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       var isPaused = this.props.isPaused;
       var _this$state5 = this.state,
         value = _this$state5.value,
-        units = _this$state5.units;
+        units = _this$state5.units,
+        min = _this$state5.min;
       return ___EmotionJSX(RenderI18nTimeOptions, null, function (_ref3) {
         var refreshUnitsOptions = _ref3.refreshUnitsOptions;
         return ___EmotionJSX("fieldset", {
@@ -206,6 +223,7 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
           compressed: true,
           fullWidth: true,
           value: value,
+          min: min,
           onChange: _this2.onValueChange,
           onKeyDown: _this2.handleKeyDown,
           isInvalid: !isPaused && (value === '' || value <= 0),
@@ -237,5 +255,6 @@ export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
 }(Component);
 _defineProperty(EuiRefreshInterval, "defaultProps", {
   isPaused: true,
-  refreshInterval: 1000
+  refreshInterval: 1000,
+  minInterval: 0
 });

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +25,7 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     needsUpdating = props.needsUpdating,
     value = props.value,
     buttonProps = props.buttonProps,
+    canRoundRelativeUnits = props.canRoundRelativeUnits,
     roundUp = props.roundUp,
     onChange = props.onChange,
     locale = props.locale,
@@ -44,7 +45,11 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     'euiDatePopoverButton-needsUpdating': needsUpdating,
     'euiDatePopoverButton-disabled': isDisabled
   }]);
-  var formattedValue = useFormatTimeString(value, dateFormat, roundUp, locale);
+  var formattedValue = useFormatTimeString(value, dateFormat, {
+    roundUp: roundUp,
+    locale: locale,
+    canRoundRelativeUnits: canRoundRelativeUnits
+  });
   var title = formattedValue;
   var invalidTitle = useEuiI18n('euiDatePopoverButton.invalidTitle', 'Invalid date: {title}', {
     title: title
@@ -58,6 +63,7 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     title = outdatedTitle;
   }
   var button = ___EmotionJSX("button", _extends({
+    type: "button",
     onClick: onPopoverToggle,
     className: classes,
     title: title,
@@ -74,6 +80,7 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
   }, rest), ___EmotionJSX(EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
+    canRoundRelativeUnits: canRoundRelativeUnits,
     onChange: onChange,
     dateFormat: dateFormat,
     timeFormat: timeFormat,

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -18,6 +18,8 @@ import { getDateMode, DATE_MODES, toAbsoluteString, toRelativeString } from '../
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
   var value = _ref.value,
+    _ref$canRoundRelative = _ref.canRoundRelativeUnits,
+    canRoundRelativeUnits = _ref$canRoundRelative === void 0 ? true : _ref$canRoundRelative,
     _ref$roundUp = _ref.roundUp,
     roundUp = _ref$roundUp === void 0 ? false : _ref$roundUp,
     onChange = _ref.onChange,
@@ -65,7 +67,7 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
     content: ___EmotionJSX(EuiRelativeTab, {
       dateFormat: dateFormat,
       locale: locale,
-      value: toAbsoluteString(value, roundUp),
+      value: canRoundRelativeUnits ? toAbsoluteString(value, roundUp) : value,
       onChange: onChange,
       roundUp: roundUp,
       position: position,