@elastic/eui 95.3.0 → 95.5.0

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

@@ -14,6 +14,8 @@ export var typeToPathMap = {
   aggregate: 'aggregate',
   analyzeEvent: 'analyzeEvent',
   annotation: 'annotation',
+  anomalyChart: 'anomaly_chart',
+  anomalySwimLane: 'anomaly_swim_lane',
   apmApp: 'app_apm',
   apmTrace: 'apm_trace',
   appSearchApp: 'app_app_search',
@@ -44,6 +46,7 @@ export var typeToPathMap = {
   calendar: 'calendar',
   canvasApp: 'app_canvas',
   casesApp: 'app_cases',
+  changePointDetection: 'change_point_detection',
   check: 'check',
   checkInCircleFilled: 'checkInCircleFilled',
   cheer: 'cheer',
@@ -143,6 +146,7 @@ export var typeToPathMap = {
   faceHappy: 'face_happy',
   faceNeutral: 'face_neutral',
   faceSad: 'face_sad',
+  fieldStatistics: 'field_statistics',
   filebeatApp: 'app_filebeat',
   filter: 'filter',
   filterExclude: 'filterExclude',
@@ -218,6 +222,8 @@ export var typeToPathMap = {
   listAdd: 'list_add',
   lock: 'lock',
   lockOpen: 'lockOpen',
+  logPatternAnalysis: 'log_pattern_analysis',
+  logRateAnalysis: 'log_rate_analysis',
   logoAWS: 'logo_aws',
   logoAWSMono: 'logo_aws_mono',
   logoAerospike: 'logo_aerospike',
@@ -302,6 +308,7 @@ export var typeToPathMap = {
   minus: 'minus',
   minusInCircle: 'minus_in_circle',
   minusInCircleFilled: 'minus_in_circle_filled',
+  minusInSquare: 'minus_in_square',
   mobile: 'mobile',
   monitoringApp: 'app_monitoring',
   moon: 'moon',
@@ -337,6 +344,7 @@ export var typeToPathMap = {
   plus: 'plus',
   plusInCircle: 'plus_in_circle',
   plusInCircleFilled: 'plus_in_circle_filled',
+  plusInSquare: 'plus_in_square',
   popout: 'popout',
   push: 'push',
   questionInCircle: 'question_in_circle',
@@ -360,6 +368,7 @@ export var typeToPathMap = {
   sessionViewer: 'sessionViewer',
   shard: 'shard',
   share: 'share',
+  singleMetricViewer: 'single_metric_viewer',
   snowflake: 'snowflake',
   sortAscending: 'sortAscending',
   sortDescending: 'sortDescending',

package/optimize/es/components/stat/stat.js

@@ -1,9 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "description", "isLoading", "reverse", "textAlign", "title", "titleColor", "titleSize", "titleElement", "descriptionElement"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,13 +9,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { Fragment, createElement } from 'react';
+import React, { createElement, useMemo } from 'react';
 import classNames from 'classnames';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title/title';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiI18n } from '../i18n';
-import { useEuiTheme } from '../../services';
+import { useEuiI18n } from '../i18n';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiStatStyles, euiStatTitleStyles } from './stat.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'primary', 'success', 'danger', 'accent'];
@@ -43,38 +39,33 @@ export var EuiStat = function EuiStat(_ref) {
     _ref$descriptionEleme = _ref.descriptionElement,
     descriptionElement = _ref$descriptionEleme === void 0 ? 'p' : _ref$descriptionEleme,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiStatStyles();
-  var cssStyles = [styles.euiStat, styles[textAlign]];
   var classes = classNames('euiStat', className);
-  var commonProps = {
-    'aria-hidden': true
-  };
-  var descriptionDisplay = ___EmotionJSX(EuiText, {
-    size: "s",
-    className: "euiStat__description"
-  }, /*#__PURE__*/createElement(descriptionElement, commonProps, description));
-  var isNamedTitleColor = COLORS.includes(titleColor);
-  var titleStyles = euiStatTitleStyles(euiTheme);
-  var titleCssStyles = [titleStyles.euiStat__title, isNamedTitleColor && titleStyles[titleColor], isLoading && titleStyles.isLoading];
-  var titleProps = isNamedTitleColor ? commonProps : _objectSpread(_objectSpread({}, commonProps), {}, {
-    style: {
-      color: titleColor
-    }
-  });
-  var titleChildren = isLoading ? '--' : title;
-  var titleDisplay = ___EmotionJSX(EuiTitle, {
-    size: titleSize,
-    className: "euiStat__title",
-    css: titleCssStyles
-  }, /*#__PURE__*/createElement(titleElement, titleProps, titleChildren));
-  var screenReader = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, isLoading ? ___EmotionJSX(EuiI18n, {
-    token: "euiStat.loadingText",
-    default: "Statistic is loading"
-  }) : ___EmotionJSX(Fragment, null, reverse ? "".concat(title, " ").concat(description) : "".concat(description, " ").concat(title))));
-  var statDisplay = ___EmotionJSX(Fragment, null, !reverse && descriptionDisplay, titleDisplay, reverse && descriptionDisplay, typeof title === 'string' && typeof description === 'string' && screenReader);
+  var styles = useEuiMemoizedStyles(euiStatStyles);
+  var cssStyles = [styles.euiStat, styles[textAlign]];
+  var loadingStatsAriaLabel = useEuiI18n('euiStat.loadingText', 'Statistic is loading');
+  var titleStyles = useEuiMemoizedStyles(euiStatTitleStyles);
+  var titleDisplay = useMemo(function () {
+    var isNamedTitleColor = COLORS.includes(titleColor);
+    var titleCssStyles = [titleStyles.euiStat__title, isNamedTitleColor && titleStyles[titleColor], isLoading && titleStyles.isLoading];
+    return ___EmotionJSX(EuiTitle, {
+      size: titleSize,
+      className: "euiStat__title",
+      css: titleCssStyles,
+      "aria-label": isLoading ? loadingStatsAriaLabel : undefined
+    }, /*#__PURE__*/createElement(titleElement, isNamedTitleColor ? null : {
+      style: {
+        color: titleColor
+      }
+    }, isLoading ? '--' : title));
+  }, [title, titleElement, titleColor, titleSize, titleStyles, isLoading, loadingStatsAriaLabel]);
+  var descriptionDisplay = useMemo(function () {
+    return ___EmotionJSX(EuiText, {
+      size: "s",
+      className: "euiStat__description"
+    }, /*#__PURE__*/createElement(descriptionElement, null, description));
+  }, [description, descriptionElement]);
   return ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes
-  }, rest), statDisplay, children);
+  }, rest), !reverse && descriptionDisplay, titleDisplay, reverse && descriptionDisplay, children);
 };

package/optimize/es/components/table/table_row.styles.js

@@ -30,7 +30,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
       // Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
       // Set on the `<td>` because padding can't be applied to `<tr>` elements directly
-      checkboxOffset: /*#__PURE__*/css(".euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
+      checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
       mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's'), " background-color:", euiBackgroundColor(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
@@ -48,7 +48,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       /**
        * Bottom of card - expanded rows
        */
-      expanded: /*#__PURE__*/css(logicalCSS('margin-top', "-".concat(mobileSizes.actions.offset)), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " .euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+      expanded: /*#__PURE__*/css(logicalCSS('margin-top', "-".concat(mobileSizes.actions.offset)), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), ">.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRefreshInterval = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -13,12 +14,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _flex = require("../../flex");
 var _form = require("../../form");
-var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _time_options = require("../super_date_picker/time_options");
+var _quick_select_panel = require("../super_date_picker/quick_select_popover/quick_select_panel");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -85,7 +87,6 @@ var EuiRefreshInterval = exports.EuiRefreshInterval = /*#__PURE__*/function (_Co
       min: getMinInterval(_this.props.minInterval, _this.props.intervalUnits)
     }));
     (0, _defineProperty2.default)(_this, "generateId", (0, _services.htmlIdGenerator)());
-    (0, _defineProperty2.default)(_this, "legendId", _this.generateId());
     (0, _defineProperty2.default)(_this, "refreshSelectionId", _this.generateId());
     (0, _defineProperty2.default)(_this, "onValueChange", function (event) {
       var sanitizedValue = parseFloat(event.target.value);
@@ -197,63 +198,69 @@ var EuiRefreshInterval = exports.EuiRefreshInterval = /*#__PURE__*/function (_Co
         value = _this$state5.value,
         units = _this$state5.units,
         min = _this$state5.min;
-      return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref3) {
-        var refreshUnitsOptions = _ref3.refreshUnitsOptions;
-        return (0, _react2.jsx)("fieldset", {
-          className: "euiQuickSelectPopover__panel"
-        }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-          alignItems: "center",
-          gutterSize: "s",
-          responsive: false,
-          wrap: true
-        }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-          grow: false
-        }, (0, _react2.jsx)(_form.EuiSwitch, {
-          "data-test-subj": "superDatePickerToggleRefreshButton",
-          "aria-describedby": _this2.refreshSelectionId,
-          checked: !isPaused,
-          onChange: _this2.toggleRefresh,
-          compressed: true,
-          label: (0, _react2.jsx)(_form.EuiFormLabel, {
-            type: "legend",
-            id: _this2.legendId
-          }, (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiRefreshInterval.legend",
-            default: "Refresh every"
-          }))
-        })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-          style: {
-            minWidth: 60
-          }
-        }, (0, _react2.jsx)(_form.EuiFieldNumber, {
-          compressed: true,
-          fullWidth: true,
-          value: value,
-          min: min,
-          onChange: _this2.onValueChange,
-          onKeyDown: _this2.handleKeyDown,
-          isInvalid: !isPaused && (value === '' || value <= 0),
-          disabled: isPaused,
-          "aria-label": "Refresh interval value",
-          "aria-describedby": "".concat(_this2.refreshSelectionId, " ").concat(_this2.legendId),
-          "data-test-subj": "superDatePickerRefreshIntervalInput"
-        })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-          style: {
-            minWidth: 100
-          },
-          grow: 2
-        }, (0, _react2.jsx)(_form.EuiSelect, {
-          compressed: true,
-          fullWidth: true,
-          "aria-label": "Refresh interval units",
-          "aria-describedby": "".concat(_this2.refreshSelectionId, " ").concat(_this2.legendId),
-          value: units,
-          disabled: isPaused,
-          options: refreshUnitsOptions,
-          onChange: _this2.onUnitsChange,
-          onKeyDown: _this2.handleKeyDown,
-          "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
-        }))), _this2.renderScreenReaderText(refreshUnitsOptions));
+      return (0, _react2.jsx)(_i18n.EuiI18n, {
+        tokens: ['euiRefreshInterval.toggleLabel', 'euiRefreshInterval.toggleAriaLabel', 'euiRefreshInterval.valueAriaLabel', 'euiRefreshInterval.unitsAriaLabel'],
+        defaults: ['Refresh every', 'Toggle refresh', 'Refresh interval value', 'Refresh interval units']
+      }, function (_ref3) {
+        var _ref4 = (0, _slicedToArray2.default)(_ref3, 4),
+          toggleLabel = _ref4[0],
+          toggleAriaLabel = _ref4[1],
+          valueAriaLabel = _ref4[2],
+          unitsAriaLabel = _ref4[3];
+        return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref5) {
+          var refreshUnitsOptions = _ref5.refreshUnitsOptions;
+          return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+            alignItems: "center",
+            gutterSize: "s",
+            responsive: false,
+            wrap: true
+          }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+            grow: false
+          }, (0, _react2.jsx)(_form.EuiSwitch, {
+            "data-test-subj": "superDatePickerToggleRefreshButton",
+            checked: !isPaused,
+            onChange: _this2.toggleRefresh,
+            compressed: true
+            // The IDs attached to this visible label are unused - we override with our own aria-label
+            ,
+            label: (0, _react2.jsx)(_form.EuiFormLabel, null, toggleLabel),
+            "aria-label": toggleAriaLabel,
+            "aria-labelledby": undefined,
+            "aria-describedby": _this2.refreshSelectionId
+          })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+            style: {
+              minWidth: 60
+            }
+          }, (0, _react2.jsx)(_form.EuiFieldNumber, {
+            compressed: true,
+            fullWidth: true,
+            value: value,
+            min: min,
+            onChange: _this2.onValueChange,
+            onKeyDown: _this2.handleKeyDown,
+            isInvalid: !isPaused && (value === '' || value <= 0),
+            disabled: isPaused,
+            "aria-label": valueAriaLabel,
+            "aria-describedby": _this2.refreshSelectionId,
+            "data-test-subj": "superDatePickerRefreshIntervalInput"
+          })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+            style: {
+              minWidth: 100
+            },
+            grow: 2
+          }, (0, _react2.jsx)(_form.EuiSelect, {
+            compressed: true,
+            fullWidth: true,
+            "aria-label": unitsAriaLabel,
+            "aria-describedby": _this2.refreshSelectionId,
+            value: units,
+            disabled: isPaused,
+            options: refreshUnitsOptions,
+            onChange: _this2.onUnitsChange,
+            onKeyDown: _this2.handleKeyDown,
+            "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
+          }))), _this2.renderScreenReaderText(refreshUnitsOptions));
+        });
       });
     }
   }]);