@elastic/eui 60.1.2 → 61.0.0

package/optimize/es/components/icon/assets/namespace.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconNamespace = function EuiIconNamespace(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1 1h14v14H1V1zm13 12v1H2V2h12v11zM6 6h4v4H6V6zm-1 5V5h6v6H5z"
+  }));
+};
+
+export var icon = EuiIconNamespace;

package/optimize/es/components/icon/icon_map.js

@@ -49,11 +49,13 @@ export var typeToPathMap = {
   cloudDrizzle: 'cloudDrizzle',
   cloudStormy: 'cloudStormy',
   cloudSunny: 'cloudSunny',
+  cluster: 'cluster',
   codeApp: 'app_code',
   color: 'color',
   compute: 'compute',
   console: 'console',
   consoleApp: 'app_console',
+  container: 'container',
   continuityAbove: 'continuityAbove',
   continuityAboveBelow: 'continuityAboveBelow',
   continuityBelow: 'continuityBelow',
@@ -174,12 +176,14 @@ export var typeToPathMap = {
   inspect: 'inspect',
   invert: 'invert',
   ip: 'ip',
-  keyboardShortcut: 'keyboard_shortcut',
+  keyboard: 'keyboard',
   kqlField: 'kql_field',
   kqlFunction: 'kql_function',
   kqlOperand: 'kql_operand',
   kqlSelector: 'kql_selector',
   kqlValue: 'kql_value',
+  kubernetesNode: 'kubernetesNode',
+  kubernetesPod: 'kubernetesPod',
   layers: 'layers',
   lensApp: 'app_lens',
   lettering: 'lettering',
@@ -277,6 +281,7 @@ export var typeToPathMap = {
   mobile: 'mobile',
   monitoringApp: 'app_monitoring',
   moon: 'moon',
+  namespace: 'namespace',
   nested: 'nested',
   node: 'node',
   notebookApp: 'app_notebook',

package/optimize/es/components/popover/popover.js

@@ -10,7 +10,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "initialFocus", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "tabIndex"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -496,6 +496,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           panelProps = _this$props.panelProps,
           panelRef = _this$props.panelRef,
           panelStyle = _this$props.panelStyle,
+          popoverScreenReaderText = _this$props.popoverScreenReaderText,
           popoverRef = _this$props.popoverRef,
           hasArrow = _this$props.hasArrow,
           arrowChildren = _this$props.arrowChildren,
@@ -504,6 +505,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus = _this$props.initialFocus,
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
+          offset = _this$props.offset,
           onTrapDeactivation = _this$props.onTrapDeactivation,
           buffer = _this$props.buffer,
           ariaLabel = _this$props['aria-label'],
@@ -549,14 +551,14 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
 
         var focusTrapScreenReaderText;
 
-        if (ownFocus) {
+        if (ownFocus || popoverScreenReaderText) {
           ariaDescribedby = this.descriptionId;
           focusTrapScreenReaderText = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
             id: this.descriptionId
-          }, ___EmotionJSX(EuiI18n, {
+          }, ownFocus && ___EmotionJSX(EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
             default: "You are in a dialog. To close this dialog, hit escape."
-          })));
+          }), popoverScreenReaderText));
         }
 
         var arrowClassNames = classNames('euiPopover__panelArrow', "euiPopover__panelArrow--".concat(this.state.arrowPosition));

package/optimize/es/components/selectable/selectable.js

@@ -152,6 +152,8 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
           event.stopPropagation();
 
           if (_this.state.activeOptionIndex != null && optionsList) {
+            event.persist(); // NOTE: This is needed for React v16 backwards compatibility
+
             optionsList.onAddOrRemoveOption(_this.state.visibleOptions[_this.state.activeOptionIndex], event);
           }
 

package/optimize/es/components/text/text.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, euiFontSize, euiBackgroundColor } from '../../global_styling';
+import { logicalCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor } from '../../global_styling';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
 /**
@@ -47,7 +47,8 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var customScale = _customScale === 'xxxs' ? 'xxs' : _customScale || 'm';
   var headingMarginTop = "".concat(parseFloat(euiTheme.size[customScale]) * 2, "px");
   var headingMarginBottom = euiTheme.size[customScale];
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n  ");
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat( // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
+  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
 /**
  * Styles
@@ -57,8 +58,8 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiTheme), ";}img{display:block;width:100%;}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;text-align:center;", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{margin-bottom:0;}&:before,&:after{position:absolute;content:'';height:", euiTheme.border.width.thick, ";width:50%;right:0;transform:translateX(-50%);background:", euiTheme.colors.darkShade, ";}&:before{top:0;}&:after{bottom:0;}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{margin-bottom:0!important;};label:euiText;"),
-    constrainedWidth: /*#__PURE__*/css("max-width:", euiTextConstrainedMaxWidth, ";;label:constrainedWidth;"),
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiTheme), ";}img{display:block;width:100%;}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/css(euiScaleText(euiThemeContext, {
       measurement: 'rem',

package/optimize/es/components/timeline/timeline_item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className"];
+var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -21,7 +21,6 @@ export var EuiTimelineItem = function EuiTimelineItem(_ref) {
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
       icon = _ref.icon,
       iconAriaLabel = _ref.iconAriaLabel,
-      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var styles = euiTimelineItemStyles();

package/optimize/es/services/hooks/index.js

@@ -9,5 +9,6 @@ export * from './useDependentState';
 export * from './useCombinedRefs';
 export * from './useForceRender';
 export * from './useIsWithinBreakpoints';
+export * from './useLatest';
 export * from './useMouseMove';
 export * from './useUpdateEffect';

package/optimize/es/services/hooks/useLatest.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useRef } from 'react';
+/**
+ * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
+ * value up-to-date on every render cycle.
+ */
+
+export function useLatest(value) {
+  var latestValueRef = useRef(value);
+  latestValueRef.current = value;
+  return latestValueRef;
+}

package/optimize/es/test/emotion-prefix.js

@@ -18,7 +18,7 @@ export var replaceEmotionPrefix = function replaceEmotionPrefix(selector) {
   // Starts with `css-[hash]-`.
   // Contains `eui[ComponentName] or `Eui[ComponentName]`.
   // Capture the component name (from above) and all variant additions until the end of the string.
-  var euiMatch = selector.match( /*#__PURE__*/_wrapRegExp(/css\x2D[0-9A-Z_a-z]{6,}\x2D([Ee]ui[A-Z][\x2D0-9A-Z_a-z]*$)/, {
+  var euiMatch = selector.match( /*#__PURE__*/_wrapRegExp(/css\x2D[0-9A-Z_a-z]{5,}\x2D([Ee]ui[A-Z][\x2D0-9A-Z_a-z]*$)/, {
     euiComponent: 1
   })); // Use the captured group (`euiComponent`) if available and prepend with `emotion-`,
   // otherwise use the full selector.

package/optimize/lib/components/accordion/accordion.js

@@ -120,6 +120,12 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       _this.childContent = node;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "generatedId", (0, _services.htmlIdGenerator)()());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeRef", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "observerRef", function (ref) {
+      _this.setChildContentRef(ref);
+
+      _this.resizeRef(ref);
+    });
     return _this;
   }
 
@@ -269,12 +275,9 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
         onResize: this.setChildContentHeight
       }, function (resizeRef) {
+        _this2.resizeRef = resizeRef;
         return (0, _react2.jsx)("div", {
-          ref: function ref(_ref) {
-            _this2.setChildContentRef(_ref);
-
-            resizeRef(_ref);
-          }
+          ref: _this2.observerRef
         }, (0, _react2.jsx)("div", {
           className: childrenClasses,
           css: cssChildrenStyles

package/optimize/lib/components/comment_list/comment.js

@@ -15,17 +15,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _timeline = require("../timeline");
+
 var _comment_event = require("./comment_event");
 
 var _comment_timeline = require("./comment_timeline");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "username", "event", "actions", "timelineIcon", "type", "timestamp"];
-var typeToClassNameMap = {
-  regular: '',
-  update: 'euiComment--update'
-};
+var _excluded = ["children", "className", "username", "event", "actions", "timestamp", "timelineIcon", "eventColor", "eventIcon", "eventIconAriaLabel"];
 
 var EuiComment = function EuiComment(_ref) {
   var children = _ref.children,
@@ -33,25 +31,31 @@ var EuiComment = function EuiComment(_ref) {
       username = _ref.username,
       event = _ref.event,
       actions = _ref.actions,
-      timelineIcon = _ref.timelineIcon,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'regular' : _ref$type,
       timestamp = _ref.timestamp,
+      timelineIcon = _ref.timelineIcon,
+      eventColor = _ref.eventColor,
+      eventIcon = _ref.eventIcon,
+      eventIconAriaLabel = _ref.eventIconAriaLabel,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiComment', typeToClassNameMap[type], {
-    'euiComment--hasBody': children
-  }, className);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
-  }, rest), (0, _react2.jsx)(_comment_timeline.EuiCommentTimeline, {
-    type: type,
+  var classes = (0, _classnames.default)('euiComment', className);
+  var isTypeUpdate = !children;
+  var verticalAlign = isTypeUpdate ? 'center' : 'top';
+  var mainIcon = (0, _react2.jsx)(_comment_timeline.EuiCommentTimeline, {
+    username: username,
     timelineIcon: timelineIcon
-  }), (0, _react2.jsx)(_comment_event.EuiCommentEvent, {
+  });
+  return (0, _react2.jsx)(_timeline.EuiTimelineItem, (0, _extends2.default)({
+    verticalAlign: verticalAlign,
+    className: classes,
+    icon: mainIcon
+  }, rest), (0, _react2.jsx)(_comment_event.EuiCommentEvent, {
     username: username,
     actions: actions,
     event: event,
     timestamp: timestamp,
-    type: type
+    eventColor: eventColor,
+    eventIcon: eventIcon,
+    eventIconAriaLabel: eventIconAriaLabel
   }, children));
 };
 

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

@@ -5,14 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.EuiCommentEvent = void 0;
+exports.EuiCommentEvent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _common = require("../common");
+var _services = require("../../services");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _panel = require("../panel");
+
+var _avatar = require("../avatar");
+
+var _comment_event = require("./comment_event.styles");
+
 var _react2 = require("@emotion/react");
 
 /*
@@ -22,43 +30,89 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var typeToClassNameMap = {
-  regular: 'euiCommentEvent--regular',
-  update: 'euiCommentEvent--update'
-};
-var TYPES = (0, _common.keysOf)(typeToClassNameMap);
-exports.TYPES = TYPES;
-
 var EuiCommentEvent = function EuiCommentEvent(_ref) {
   var children = _ref.children,
       className = _ref.className,
+      eventIcon = _ref.eventIcon,
+      eventIconAriaLabel = _ref.eventIconAriaLabel,
       username = _ref.username,
       timestamp = _ref.timestamp,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'regular' : _ref$type,
       event = _ref.event,
-      actions = _ref.actions;
-  var classes = (0, _classnames.default)('euiCommentEvent', typeToClassNameMap[type], className);
-  var isFigure = type === 'regular' || type === 'update' && typeof children !== 'undefined';
+      actions = _ref.actions,
+      eventColor = _ref.eventColor;
+  var classes = (0, _classnames.default)('euiCommentEvent', className); // the username is required so we only check if other elements are define
+
+  var hasEventElements = eventIcon || timestamp || event || actions;
+  var isTypeRegular = children && hasEventElements;
+  var isTypeUpdate = !children && hasEventElements;
+  var type;
+
+  if (isTypeRegular) {
+    type = 'regular';
+  } else if (isTypeUpdate) {
+    type = 'update';
+  } else {
+    type = 'custom';
+  }
+
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _comment_event.euiCommentEventStyles)(euiTheme);
+  var cssStyles = [styles.euiCommentEvent, styles[type]];
+  var headerStyles = (0, _comment_event.euiCommentEventHeaderStyles)(euiTheme);
+  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, eventColor && headerStyles.hasEventColor, isTypeRegular && headerStyles.regular];
+  var cssHeaderPanelStyles = headerStyles.euiCommentEvent__headerPanel;
+  var cssHeaderEventIconStyles = headerStyles.euiCommentEvent__headerEventIcon;
+  var cssHeaderUsernameStyles = headerStyles.euiCommentEvent__headerUsername;
+  var cssHeaderEventStyles = headerStyles.euiCommentEvent__headerEvent;
+  var cssHeaderTimestampStyles = headerStyles.euiCommentEvent__headerTimestamp;
+  var cssHeaderMainStyles = headerStyles.euiCommentEvent__headerMain;
+  var cssHeaderDataStyles = headerStyles.euiCommentEvent__headerData;
+  var cssHeaderActionsStyles = headerStyles.euiCommentEvent__headerActions;
+  var bodyStyles = (0, _comment_event.euiCommentEventBodyStyles)(euiTheme);
+  var cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
+  var isFigure = isTypeRegular;
   var Element = isFigure ? 'figure' : 'div';
-  var HeaderElement = isFigure ? 'figcaption' : 'div';
-  return (0, _react2.jsx)(Element, {
-    className: classes
-  }, (0, _react2.jsx)(HeaderElement, {
-    className: "euiCommentEvent__header"
-  }, (0, _react2.jsx)("div", {
-    className: "euiCommentEvent__headerData"
+  var HeaderElement = isFigure ? 'figcaption' : 'div'; // The 'plain' color creates a shadow and adds a border radius that we don't want.
+  // So for these cases we use the transparent color instead.
+
+  var finalEventColor = eventColor === 'plain' ? 'transparent' : eventColor;
+  var panelProps = finalEventColor ? {
+    color: finalEventColor,
+    paddingSize: 's'
+  } : {
+    color: 'transparent',
+    paddingSize: 'none'
+  };
+  var eventHeader = (0, _react2.jsx)(HeaderElement, {
+    css: cssHeaderStyles
+  }, (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({}, panelProps, {
+    css: cssHeaderPanelStyles
+  }), (0, _react2.jsx)("div", {
+    css: cssHeaderMainStyles
   }, (0, _react2.jsx)("div", {
-    className: "euiCommentEvent__headerUsername"
-  }, username), (0, _react2.jsx)("div", {
-    className: "euiCommentEvent__headerEvent"
-  }, event), timestamp ? (0, _react2.jsx)("div", {
-    className: "euiCommentEvent__headerTimestamp"
-  }, (0, _react2.jsx)("time", null, timestamp)) : undefined), actions ? (0, _react2.jsx)("div", {
-    className: "euiCommentEvent__headerActions"
-  }, actions) : undefined), children ? (0, _react2.jsx)("div", {
-    className: "euiCommentEvent__body"
-  }, children) : undefined);
+    css: cssHeaderDataStyles
+  }, eventIcon && (0, _react2.jsx)(_avatar.EuiAvatar, {
+    css: cssHeaderEventIconStyles,
+    size: "s",
+    iconType: eventIcon,
+    name: eventIconAriaLabel ? eventIconAriaLabel : '',
+    color: "subdued",
+    "aria-hidden": !eventIconAriaLabel
+  }), username && (0, _react2.jsx)("div", {
+    css: cssHeaderUsernameStyles
+  }, username), event && (0, _react2.jsx)("div", {
+    css: cssHeaderEventStyles
+  }, event), timestamp && (0, _react2.jsx)("div", {
+    css: cssHeaderTimestampStyles
+  }, (0, _react2.jsx)("time", null, timestamp))), actions && (0, _react2.jsx)("div", {
+    css: cssHeaderActionsStyles
+  }, actions))));
+  return (0, _react2.jsx)(Element, {
+    className: classes,
+    css: cssStyles
+  }, hasEventElements && eventHeader, children && (0, _react2.jsx)("div", {
+    css: cssBodyStyles
+  }, children));
 };
 
 exports.EuiCommentEvent = EuiCommentEvent;

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCommentEventStyles = exports.euiCommentEventHeaderStyles = exports.euiCommentEventBodyStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "yoyozp-euiCommentEvent",
+  styles: "overflow:hidden;label:euiCommentEvent;"
+} : {
+  name: "yoyozp-euiCommentEvent",
+  styles: "overflow:hidden;label:euiCommentEvent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiCommentEventStyles = function euiCommentEventStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
+  return {
+    euiCommentEvent: _ref3,
+    // types
+    regular: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";;label:regular;"),
+    update: /*#__PURE__*/(0, _react.css)(";label:update;"),
+    custom: /*#__PURE__*/(0, _react.css)(";label:custom;")
+  };
+};
+
+exports.euiCommentEventStyles = euiCommentEventStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "bqgcpj-hasEventColor",
+  styles: "padding:0;label:hasEventColor;"
+} : {
+  name: "bqgcpj-hasEventColor",
+  styles: "padding:0;label:hasEventColor;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "ui5tce-euiCommentEvent__headerEvent",
+  styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;"
+} : {
+  name: "ui5tce-euiCommentEvent__headerEvent",
+  styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
+  return {
+    euiCommentEvent__header: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__header;"),
+    euiCommentEvent__headerPanel: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__headerPanel;"),
+    euiCommentEvent__headerMain: /*#__PURE__*/(0, _react.css)("display:flex;flex:1;gap:", euiTheme.size.s, ";;label:euiCommentEvent__headerMain;"),
+    euiCommentEvent__headerData: /*#__PURE__*/(0, _react.css)("display:flex;flex:1;align-items:center;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerData;"),
+    euiCommentEvent__headerEventIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:euiCommentEvent__headerEventIcon;"),
+    euiCommentEvent__headerUsername: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.semiBold, ";;label:euiCommentEvent__headerUsername;"),
+    euiCommentEvent__headerEvent: _ref2,
+    euiCommentEvent__headerTimestamp: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__headerTimestamp;"),
+    euiCommentEvent__headerActions: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerActions;"),
+    // types
+    regular: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.lightestShade, ";border-bottom:", euiTheme.border.thin, ";padding:", euiTheme.size.s, ";;label:regular;"),
+    // variants
+    hasEventColor: _ref
+  };
+};
+
+exports.euiCommentEventHeaderStyles = euiCommentEventHeaderStyles;
+
+var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
+  return {
+    euiCommentEvent__body: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__body;"),
+    // types
+    regular: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";;label:regular;"),
+    update: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), ";;label:update;"),
+    custom: /*#__PURE__*/(0, _react.css)(";label:custom;")
+  };
+};
+
+exports.euiCommentEventBodyStyles = euiCommentEventBodyStyles;

package/optimize/lib/components/comment_list/comment_list.js

@@ -17,14 +17,18 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _comment = require("./comment");
 
+var _timeline = require("../timeline");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "comments"];
+var _excluded = ["children", "className", "comments", "gutterSize"];
 
 var EuiCommentList = function EuiCommentList(_ref) {
   var children = _ref.children,
       className = _ref.className,
       comments = _ref.comments,
+      _ref$gutterSize = _ref.gutterSize,
+      gutterSize = _ref$gutterSize === void 0 ? 'l' : _ref$gutterSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiCommentList', className);
   var commentElements = null;
@@ -37,8 +41,9 @@ var EuiCommentList = function EuiCommentList(_ref) {
     });
   }
 
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
+  return (0, _react2.jsx)(_timeline.EuiTimeline, (0, _extends2.default)({
+    className: classes,
+    gutterSize: gutterSize
   }, rest), commentElements, children);
 };