@elastic/eui 60.3.0 → 61.0.0

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

@@ -1,3 +1,5 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,45 +8,31 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import { keysOf } from '../common';
-import classNames from 'classnames';
-import { EuiIcon } from '../icon';
+import { EuiAvatar } from '../avatar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var typeToClassNameMap = {
-  regular: 'euiCommentTimeline__icon--regular',
-  update: 'euiCommentTimeline__icon--update'
-};
-export var TYPES = keysOf(typeToClassNameMap);
 export var EuiCommentTimeline = function EuiCommentTimeline(_ref) {
-  var className = _ref.className,
-      timelineIcon = _ref.timelineIcon,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'regular' : _ref$type;
-  var classes = classNames('euiCommentTimeline', className);
-  var iconClasses = classNames({
-    'euiCommentTimeline__icon--default': !timelineIcon || typeof timelineIcon === 'string'
-  }, typeToClassNameMap[type]);
+  var timelineIcon = _ref.timelineIcon,
+      username = _ref.username;
   var iconRender;
+  var avatarClassName = 'euiCommentAvatar';
+  var iconIsString = typeof timelineIcon === 'string';
+  var iconIsNode = _typeof(timelineIcon) === 'object';
 
-  if (typeof timelineIcon === 'string') {
-    iconRender = ___EmotionJSX(EuiIcon, {
-      size: type === 'update' ? 'm' : 'l',
-      type: timelineIcon
+  if (iconIsString) {
+    iconRender = ___EmotionJSX(EuiAvatar, {
+      className: avatarClassName,
+      name: username,
+      iconType: timelineIcon,
+      color: "subdued"
     });
-  } else if (timelineIcon) {
+  } else if (iconIsNode) {
     iconRender = timelineIcon;
   } else {
-    iconRender = ___EmotionJSX(EuiIcon, {
-      type: type === 'update' ? 'dot' : 'user',
-      size: type === 'update' ? 's' : 'l'
+    iconRender = ___EmotionJSX(EuiAvatar, {
+      className: avatarClassName,
+      name: username
     });
   }
 
-  return ___EmotionJSX("div", {
-    className: classes
-  }, ___EmotionJSX("div", {
-    className: "euiCommentTimeline__content"
-  }, ___EmotionJSX("div", {
-    className: iconClasses
-  }, iconRender)));
+  return ___EmotionJSX(React.Fragment, null, iconRender);
 };

package/optimize/es/components/datagrid/body/data_grid_body.js

@@ -319,7 +319,7 @@ export var EuiDataGridBody = function EuiDataGridBody(props) {
    */
 
   var rowHeightUtils = useRowHeightUtils({
-    gridRef: gridRef.current,
+    gridRef: gridRef,
     gridStyles: gridStyles,
     columns: columns,
     rowHeightsOptions: rowHeightsOptions

package/optimize/es/components/datagrid/utils/row_heights.js

@@ -13,7 +13,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 import { useEffect, useState, useMemo, useCallback, useContext } from 'react';
 import { isObject, isNumber } from '../../../services/predicate';
-import { useForceRender } from '../../../services';
+import { useForceRender, useLatest } from '../../../services';
 import { DataGridSortingContext } from './sorting'; // TODO: Once JS variables are available, use them here instead of hard-coded maps
 
 export var cellPaddingsMap = {
@@ -24,11 +24,14 @@ export var cellPaddingsMap = {
 export var AUTO_HEIGHT = 'auto';
 export var DEFAULT_ROW_HEIGHT = 34;
 export var RowHeightUtils = /*#__PURE__*/function () {
-  function RowHeightUtils() {
+  function RowHeightUtils(gridRef, rerenderGridBodyRef) {
     var _this = this;
 
     _classCallCheck(this, RowHeightUtils);
 
+    this.gridRef = gridRef;
+    this.rerenderGridBodyRef = rerenderGridBodyRef;
+
     _defineProperty(this, "styles", {
       paddingTop: 0,
       paddingBottom: 0
@@ -63,11 +66,7 @@ export var RowHeightUtils = /*#__PURE__*/function () {
 
     _defineProperty(this, "timerId", void 0);
 
-    _defineProperty(this, "grid", void 0);
-
     _defineProperty(this, "lastUpdatedRow", Infinity);
-
-    _defineProperty(this, "rerenderGridBody", function () {});
   }
 
   _createClass(RowHeightUtils, [{
@@ -165,6 +164,8 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "setRowHeight",
     value: function setRowHeight(rowIndex, colId) {
+      var _this$rerenderGridBod, _this$rerenderGridBod2;
+
       var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
       var visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
       var rowHeights = this.heightsCache.get(rowIndex) || new Map();
@@ -179,7 +180,7 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       this.resetRow(visibleRowIndex); // When an auto row height is updated, force a re-render
       // of the grid body to update the unconstrained height
 
-      this.rerenderGridBody();
+      (_this$rerenderGridBod = (_this$rerenderGridBod2 = this.rerenderGridBodyRef).current) === null || _this$rerenderGridBod === void 0 ? void 0 : _this$rerenderGridBod.call(_this$rerenderGridBod2);
     }
   }, {
     key: "pruneHiddenColumnHeights",
@@ -219,21 +220,11 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "resetGrid",
     value: function resetGrid() {
-      var _this$grid;
+      var _this$gridRef$current;
 
-      (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.resetAfterRowIndex(this.lastUpdatedRow);
+      (_this$gridRef$current = this.gridRef.current) === null || _this$gridRef$current === void 0 ? void 0 : _this$gridRef$current.resetAfterRowIndex(this.lastUpdatedRow);
       this.lastUpdatedRow = Infinity;
     }
-  }, {
-    key: "setGrid",
-    value: function setGrid(grid) {
-      this.grid = grid;
-    }
-  }, {
-    key: "setRerenderGridBody",
-    value: function setRerenderGridBody(rerenderGridBody) {
-      this.rerenderGridBody = rerenderGridBody;
-    }
   }]);
 
   return RowHeightUtils;
@@ -248,22 +239,25 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
       gridStyles = _ref2.gridStyles,
       columns = _ref2.columns,
       rowHeightsOptions = _ref2.rowHeightsOptions;
-  var rowHeightUtils = useMemo(function () {
-    return new RowHeightUtils();
-  }, []); // Update rowHeightUtils with internal vars from outside dependencies
+  var forceRenderRef = useLatest(useForceRender());
 
-  var forceRender = useForceRender();
-  useEffect(function () {
-    if (gridRef) rowHeightUtils.setGrid(gridRef);
-    rowHeightUtils.setRerenderGridBody(forceRender);
-  }, [gridRef, forceRender, rowHeightUtils]); // Forces a rerender whenever the row heights change, as this can cause the
+  var _useState = useState(function () {
+    return new RowHeightUtils(gridRef, forceRenderRef);
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the
   // grid to change height/have scrollbars. Without this, grid rerendering is stale
 
+
   useEffect(function () {
-    requestAnimationFrame(forceRender);
+    if (forceRenderRef.current == null) {
+      return;
+    }
+
+    requestAnimationFrame(forceRenderRef.current);
   }, [// Effects that should cause rerendering
   rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight, rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.rowHeights, // Dependencies
-  rowHeightUtils, forceRender]); // Re-cache styles whenever grid density changes
+  rowHeightUtils, forceRenderRef]); // Re-cache styles whenever grid density changes
 
   useEffect(function () {
     rowHeightUtils.cacheStyles({
@@ -285,10 +279,10 @@ export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
   // and ignored by auto & static heights (unless the static height is < the min)
 
 
-  var _useState = useState(DEFAULT_ROW_HEIGHT),
-      _useState2 = _slicedToArray(_useState, 2),
-      minRowHeight = _useState2[0],
-      setRowHeight = _useState2[1]; // Default/fallback height for all rows
+  var _useState3 = useState(DEFAULT_ROW_HEIGHT),
+      _useState4 = _slicedToArray(_useState3, 2),
+      minRowHeight = _useState4[0],
+      setRowHeight = _useState4[1]; // Default/fallback height for all rows
 
 
   var defaultRowHeight = useMemo(function () {

package/optimize/es/components/icon/assets/{keyboard_shortcut.js → keyboard.js}

@@ -13,22 +13,22 @@ var _excluded = ["title", "titleId"];
 import * as React from 'react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var EuiIconKeyboardShortcut = function EuiIconKeyboardShortcut(_ref) {
+var EuiIconKeyboard = function EuiIconKeyboard(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
     viewBox: "0 0 16 16",
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M15 9a1 1 0 01.993.883L16 10v5a1 1 0 01-.883.993L15 16H7a1 1 0 01-.993-.883L6 15v-5a1 1 0 01.883-.993L7 9h8zM2.5 10a.5.5 0 01.492.41L3 10.5V12h1.5a.5.5 0 01.09.992L4.5 13H3v1.5a.5.5 0 01-.992.09L2 14.5V13H.5a.5.5 0 01-.09-.992L.5 12H2v-1.5a.5.5 0 01.5-.5zM15 10H7v5h8v-5zm-1 3v1H8v-1h6zm1-13a1 1 0 011 1v5a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h14zm0 1H1v5h14V1zM8 4v1H2V4h6z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h16v11H0V3zm15 10V4H1v9h14zM2 5h2v1H2V5zm2 7v-1H2v1h2zm10-1v1h-2v-1h2zm-3 1v-1H5v1h6zM5 5h1v1H5V5zM3 7H2v1h1V7zm3 0h1v1H6V7zM3 9H2v1h1V9zm3 0h1v1H6V9zm2-4H7v1h1V5zM4 7h1v1H4V7zm5 0H8v1h1V7zm1 0h1v1h-1V7zM5 9H4v1h1V9zm3 0h1v1H8V9zm3 0h-1v1h1V9zM9 5h1v1H9V5zm3 0h-1v1h1V5zm1 0h1v1h-1V5zm1 2h-2v3h2V7z"
   }));
 };
 
-export var icon = EuiIconKeyboardShortcut;
+export var icon = EuiIconKeyboard;

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

@@ -176,7 +176,7 @@ export var typeToPathMap = {
   inspect: 'inspect',
   invert: 'invert',
   ip: 'ip',
-  keyboardShortcut: 'keyboard_shortcut',
+  keyboard: 'keyboard',
   kqlField: 'kql_field',
   kqlFunction: 'kql_function',
   kqlOperand: 'kql_operand',

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/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;