@elastic/eui 106.6.0-snapshot.1759744096898 → 106.7.0

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

@@ -26,9 +26,7 @@ var EuiIconSortDown = function EuiIconSortDown(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "m8 15.707 5.354-5.354-.708-.707L8.5 13.793V1h-1v12.793L3.354 9.646l-.708.707L8 15.707Z",
-    clipRule: "evenodd"
+    d: "M8.5 2v10.793l3.146-3.147.707.707L8 14.707l-4.354-4.354.708-.707L7.5 12.793V2h1Z"
   }));
 };
 export var icon = EuiIconSortDown;

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

@@ -26,9 +26,7 @@ var EuiIconSortUp = function EuiIconSortUp(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "m8 .293 5.354 5.353-.708.708L8.5 2.207V15h-1V2.207L3.354 6.354l-.708-.708L8 .293Z",
-    clipRule: "evenodd"
+    d: "M8.5 14V3.207l3.146 3.147.707-.708L8 1.293 3.646 5.646l.708.708L7.5 3.207V14h1Z"
   }));
 };
 export var icon = EuiIconSortUp;

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

@@ -26,9 +26,7 @@ var EuiIconSortable = function EuiIconSortable(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "m8 .293 5.354 5.353-.708.708L8.5 2.207v11.586l4.146-4.147.707.708L8 15.707l-5.354-5.353.708-.708L7.5 13.793V2.207L3.354 6.354l-.708-.708L8 .293Z",
-    clipRule: "evenodd"
+    d: "m12.354 5.646-.707.708L8.5 3.207v9.586l3.146-3.147.707.707L8 14.707l-4.354-4.354.708-.707L7.5 12.793V3.207L4.354 6.354l-.708-.708L8 1.293l4.354 4.353Z"
   }));
 };
 export var icon = EuiIconSortable;

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

@@ -0,0 +1,34 @@
+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 EuiIconStreamsClassic = function EuiIconStreamsClassic(_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", {
+    fillRule: "evenodd",
+    d: "M13.5 9a1.5 1.5 0 1 1-1.413 2H3.913a1.5 1.5 0 1 1 0-1h8.174A1.5 1.5 0 0 1 13.5 9Zm-11 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm0-6a1.5 1.5 0 1 1-1.413 2H3.913a1.5 1.5 0 1 1 0-1h8.174A1.5 1.5 0 0 1 13.5 4Zm-11 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconStreamsClassic;

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

@@ -0,0 +1,38 @@
+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 EuiIconStreamsWired = function EuiIconStreamsWired(_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", {
+    fillRule: "evenodd",
+    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5v1c0 .564-.19 1.082-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.501 2.501 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8h-.504c.315.418.504.936.504 1.5v1A1.5 1.5 0 0 0 9 12h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5v-1A1.5 1.5 0 0 0 5 8H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 5.5v-1A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 11a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M13.5 6a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425A1.5 1.5 0 0 1 13.5 6Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconStreamsWired;

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

@@ -21,15 +21,12 @@ var EuiIconUnlink = function EuiIconUnlink(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    fill: "none",
     viewBox: "0 0 16 16",
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M7.565 10.83a.5.5 0 1 1 .819.573l-1.877 2.68c-.963 1.376-3.02 1.55-4.588.45C.35 13.436-.191 11.445.773 10.07L3.64 5.973c.963-1.375 3.019-1.548 4.587-.45a.5.5 0 1 1-.573.82C6.509 5.54 5.08 5.66 4.46 6.546l-2.868 4.095c-.621.887-.245 2.27.9 3.073 1.146.802 2.575.682 3.196-.205l1.877-2.68z"
-  }), ___EmotionJSX("path", {
-    d: "M7.892 3.43a.5.5 0 1 1-.574-.819L10 .734c1.376-.963 3.367-.422 4.465 1.146 1.098 1.569.926 3.625-.45 4.588L9.918 9.336c-1.375.963-3.366.422-4.464-1.146a.5.5 0 1 1 .819-.574c.802 1.146 2.185 1.522 3.072.9L13.44 5.65c.886-.621 1.006-2.05.204-3.195-.802-1.146-2.186-1.522-3.072-.9L7.892 3.43zM6 .5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 1 0zM1.058 2.23l2.458 1.72a.5.5 0 0 1-.574.82L.484 3.05a.5.5 0 1 1 .574-.82zm12 7.093 2.457 1.72a.5.5 0 1 1-.573.82l-2.457-1.72a.5.5 0 1 1 .573-.82zm-2.099 1.181v3a.5.5 0 1 1-1 0v-3a.5.5 0 1 1 1 0z"
+    d: "m15.354 1.354-14 14-.708-.707 14-14 .707.707ZM7 15H6v-2.5h1V15Zm7.121-5.121A3 3 0 1 1 9.88 14.12l-2.234-2.23.708-.707 2.232 2.232a2 2 0 1 0 2.828-2.828l-2.232-2.232.707-.708L14.12 9.88ZM3 10H1V9h2v1ZM1.879 1.879a3 3 0 0 1 4.242 0L8.39 4.146l-.707.708-2.268-2.268a2 2 0 1 0-2.828 2.828l2.268 2.268-.708.707L1.88 6.12a3 3 0 0 1 0-4.242ZM15 7h-2V6h2v1Zm-5-4H9V1h1v2Z"
   }));
 };
 export var icon = EuiIconUnlink;

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

@@ -12,6 +12,8 @@ export var typeToPathMap = {
   advancedSettingsApp: 'app_advanced_settings',
   agentApp: 'app_fleet',
   aggregate: 'aggregate',
+  alert: 'warning',
+  // NOTE: To be deprecated in favor of `warning`
   analyzeEvent: 'analyzeEvent',
   annotation: 'annotation',
   anomalyChart: 'anomaly_chart',
@@ -30,13 +32,15 @@ export var typeToPathMap = {
   asterisk: 'asterisk',
   at: 'at',
   auditbeatApp: 'app_auditbeat',
+  backgroundTask: 'background_task',
   beaker: 'flask',
   // NOTE: To be deprecated in favor of `flask`
   bell: 'bell',
   bellSlash: 'bellSlash',
   beta: 'beta',
   bolt: 'bolt',
-  boxesHorizontal: 'boxes_horizontal',
+  boxesHorizontal: 'boxes_vertical',
+  // NOTE: To be deprecated in favor of `boxes_vertical`
   boxesVertical: 'boxes_vertical',
   branch: 'branch',
   branchUser: 'branchUser',
@@ -50,7 +54,8 @@ export var typeToPathMap = {
   changePointDetection: 'change_point_detection',
   check: 'check',
   checkCircle: 'checkCircle',
-  checkInCircleFilled: 'checkInCircleFilled',
+  checkInCircleFilled: 'checkCircle',
+  // NOTE: To be deprecated in favor of `checkCircle`
   cheer: 'cheer',
   classificationJob: 'ml_classification_job',
   clickLeft: 'clickLeft',
@@ -81,7 +86,8 @@ export var typeToPathMap = {
   controlsVertical: 'controls',
   // NOTE: To be deprecated in favor of `controls`
   copy: 'copy',
-  copyClipboard: 'copy_clipboard',
+  copyClipboard: 'copy',
+  // NOTE: To be deprecated in favor of `copy`
   createAdvancedJob: 'ml_create_advanced_job',
   createGenericJob: 'ml_create_generic_job',
   createGeoJob: 'ml_create_geo_job',
@@ -104,7 +110,8 @@ export var typeToPathMap = {
   discuss: 'comment',
   // NOTE: To be deprecated in favor of `comment`
   document: 'document',
-  documentEdit: 'documentEdit',
+  documentEdit: 'pencil',
+  // NOTE: To be deprecated in favor of `pencil`
   documentation: 'documentation',
   documents: 'documents',
   dot: 'dot',
@@ -131,7 +138,8 @@ export var typeToPathMap = {
   editorItemAlignMiddle: 'editorItemAlignMiddle',
   editorItemAlignRight: 'editorItemAlignRight',
   editorItemAlignTop: 'editorItemAlignTop',
-  editorLink: 'editor_link',
+  editorLink: 'link',
+  // NOTE: To be deprecated in favor of `link`
   editorOrderedList: 'editor_ordered_list',
   editorPositionBottomLeft: 'editorPositionBottomLeft',
   editorPositionBottomRight: 'editorPositionBottomRight',
@@ -139,10 +147,12 @@ export var typeToPathMap = {
   editorPositionTopRight: 'editorPositionTopRight',
   editorRedo: 'editor_redo',
   editorStrike: 'editor_strike',
-  editorTable: 'editor_table',
+  editorTable: 'vis_table',
+  // NOTE: To be deprecated in favor of `vis_table`
   editorUnderline: 'editor_underline',
   editorUndo: 'editor_undo',
-  editorUnorderedList: 'editor_unordered_list',
+  editorUnorderedList: 'list',
+  // NOTE: To be deprecated in favor of `list`
   email: 'email',
   empty: 'empty',
   emsApp: 'app_ems',
@@ -150,11 +160,13 @@ export var typeToPathMap = {
   eql: 'eql',
   eraser: 'eraser',
   error: 'error',
-  errorFilled: 'errorFilled',
+  errorFilled: 'error',
+  // NOTE: To be deprecated in favor of `error`
   esqlVis: 'esqlVis',
   exit: 'exit',
   expand: 'expand',
-  expandMini: 'expandMini',
+  expandMini: 'expand',
+  // NOTE: To be deprecated in favor of `expand`
   export: 'export',
   exportAction: 'export',
   // NOTE: To be deprecated in favor of `export`
@@ -169,7 +181,8 @@ export var typeToPathMap = {
   filterExclude: 'filterExclude',
   filterIgnore: 'filterIgnore',
   filterInclude: 'filterInclude',
-  filterInCircle: 'filterInCircle',
+  filterInCircle: 'filter',
+  // NOTE: To be deprecated in favor of `filter`
   flask: 'flask',
   flag: 'flag',
   fleetApp: 'app_agent',
@@ -233,13 +246,15 @@ export var typeToPathMap = {
   launch: 'launch',
   layers: 'layers',
   lensApp: 'app_lens',
-  lettering: 'lettering',
+  lettering: 'vis_text',
+  // NOTE: To be deprecated in favor of `vis_text`
   lineDashed: 'lineDashed',
   lineDotted: 'lineDotted',
   lineSolid: 'lineSolid',
   link: 'link',
   list: 'list',
-  listAdd: 'list_add',
+  listAdd: 'plus_in_circle',
+  // NOTE: To be deprecated in favor of `plus_in_circle`
   lock: 'lock',
   lockOpen: 'lockOpen',
   logPatternAnalysis: 'log_pattern_analysis',
@@ -327,7 +342,8 @@ export var typeToPathMap = {
   minimize: 'minimize',
   minus: 'minus',
   minusInCircle: 'minus_in_circle',
-  minusInCircleFilled: 'minus_in_circle_filled',
+  minusInCircleFilled: 'minus_in_circle',
+  // NOTE: To be deprecated in favor of `minus_in_circle`
   minusInSquare: 'minus_in_square',
   mobile: 'mobile',
   monitoringApp: 'app_monitoring',
@@ -335,7 +351,8 @@ export var typeToPathMap = {
   move: 'move',
   namespace: 'namespace',
   nested: 'nested',
-  newChat: 'new_chat',
+  newChat: 'plus_in_circle',
+  // NOTE: To be deprecated in favor of `plus_in_circle`
   node: 'node',
   notebookApp: 'app_notebook',
   number: 'number',
@@ -360,11 +377,13 @@ export var typeToPathMap = {
   pipeNoBreaks: 'pipeNoBreaks',
   pivot: 'pivot',
   play: 'play',
-  playFilled: 'playFilled',
+  playFilled: 'play',
+  // NOTE: To be deprecated in favor of `play`
   plugs: 'plugs',
   plus: 'plus',
   plusInCircle: 'plus_in_circle',
-  plusInCircleFilled: 'plus_in_circle_filled',
+  plusInCircleFilled: 'plus_in_circle',
+  // NOTE: To be deprecated in favor of `plus_in_circle`
   plusInSquare: 'plus_in_square',
   popout: 'popout',
   push: 'push',
@@ -417,15 +436,19 @@ export var typeToPathMap = {
   stopFilled: 'stop_filled',
   stopSlash: 'stop_slash',
   storage: 'storage',
+  streamsClassic: 'streams_classic',
+  streamsWired: 'streams_wired',
   string: 'string',
-  submodule: 'submodule',
+  submodule: 'merge',
+  // NOTE: To be deprecated in favor of `merge`
   sun: 'sun',
   swatchInput: 'swatch_input',
   // Undocumented on purpose. Has an extra stroke for EuiColorPicker
   symlink: 'symlink',
   tableDensityCompact: 'table_density_compact',
   tableDensityExpanded: 'table_density_expanded',
-  tableDensityNormal: 'table_density_normal',
+  tableDensityNormal: 'vis_table',
+  // NOTE: To be deprecated in favor of `vis_table`
   tableOfContents: 'tableOfContents',
   tag: 'tag',
   tear: 'tear',
@@ -477,13 +500,13 @@ export var typeToPathMap = {
   visualizeApp: 'app_visualize',
   vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
-  warningFilled: 'warningFilled',
-  alert: 'warning',
-  // NOTE: This is an undocumented alias for `warning`, added for legacy compatability with Elastic Charts
+  warningFilled: 'warning',
+  // NOTE: To be deprecated in favor of `export`
   watchesApp: 'app_watches',
   web: 'web',
   wordWrap: 'wordWrap',
   wordWrapDisabled: 'wordWrapDisabled',
+  workflowsApp: 'app_workflows',
   workplaceSearchApp: 'app_workplace_search',
   wrench: 'wrench',
   // Token Icon Imports

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

@@ -86,7 +86,7 @@ export var euiProgressStyles = function euiProgressStyles(euiThemeContext, isNat
     indeterminate: /*#__PURE__*/css("&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", highContrastModeStyles(euiThemeContext, {
       // Windows high contrast themes ignore backgrounds, so use a border instead
       forced: "\n            ".concat(logicalCSS('border-top-style', 'solid'), "\n            ").concat(logicalCSS('border-top-color', 'transparent'), "\n          ")
-    }), ";", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    }), ";", euiCantAnimate, "{animation:none;transform:scaleX(1) translateX(0%);background:repeating-linear-gradient(\n            -45deg,\n            transparent,\n            transparent ", euiTheme.size.m, ",\n            rgb(0, 0, 0, 0.25) ", euiTheme.size.m, ",\n            rgb(0, 0, 0, 0.25) ", euiTheme.size.l, "\n          );}};label:indeterminate;"),
     // Sizes
     _sharedSizeCSS: function _sharedSizeCSS(size) {
       return "\n      ".concat(logicalCSS('height', size), "\n      ").concat(highContrastModeStyles(euiThemeContext, {

package/optimize/lib/components/basic_table/in_memory_table.js

@@ -220,6 +220,19 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
     (0, _defineProperty2.default)(_this, "onPlainTextSearch", function (searchValue) {
       var escapedQueryText = searchValue.replace(/["\\]/g, '\\$&');
       var finalQuery = "\"".concat(escapedQueryText, "\"");
+      var search = _this.props.search;
+      if (isEuiSearchBarProps(search)) {
+        if (search.onChange) {
+          var shouldQueryInMemory = search.onChange({
+            query: _search_bar.EuiSearchBar.Query.parse(finalQuery),
+            queryText: escapedQueryText,
+            error: null
+          });
+          if (!shouldQueryInMemory) {
+            return;
+          }
+        }
+      }
       _this.setState({
         query: _search_bar.EuiSearchBar.Query.parse(finalQuery)
       });

package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.styles.js

@@ -19,7 +19,7 @@ var LIST_MAX_HEIGHT = exports.LIST_MAX_HEIGHT = 200;
 var euiComboBoxOptionListStyles = exports.euiComboBoxOptionListStyles = function euiComboBoxOptionListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiComboBoxOptionList: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', "".concat(LIST_MAX_HEIGHT, "px")), " overflow:hidden;.euiTextTruncate{pointer-events:none;}.euiComboBoxOption__contentWrapper{display:flex;align-items:center;}.euiComboBoxOption__content{flex:1;text-align:start;}.euiComboBoxOption__emptyStateText{flex:1;text-align:start;", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), (0, _global_styling.logicalCSS)('padding-top', (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
+    euiComboBoxOptionList: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', "".concat(LIST_MAX_HEIGHT, "px")), " overflow:hidden;.euiTextTruncate{pointer-events:none;}.euiComboBoxOption__contentWrapper{display:flex;align-items:center;}.euiComboBoxOption__content{flex:1;text-align:start;overflow-wrap:anywhere;}.euiComboBoxOption__emptyStateText{flex:1;text-align:start;", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), (0, _global_styling.logicalCSS)('padding-top', (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
       return x + 1;
     })), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), " ", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), ";};label:euiComboBoxOptionList;"),
     /* eslint-disable local/css-logical-properties */

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

@@ -19,7 +19,7 @@ var _reactDatepicker = require("./react-datepicker");
 var _react_date_picker = require("./react_date_picker.styles");
 var _date_picker = require("./date_picker.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["adjustDateOnChange", "append", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "prepend", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "append", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "data-test-subj", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "prepend", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -70,6 +70,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     compressed = _ref.compressed,
     controlOnly = _ref.controlOnly,
     customInput = _ref.customInput,
+    dataTestSubj = _ref['data-test-subj'],
     _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? euiDatePickerDefaultDateFormat : _ref$dateFormat,
     dayClassName = _ref.dayClassName,
@@ -181,7 +182,8 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
       utcOffset: utcOffset,
       yearDropdownItemNumber: 7,
       accessibleMode: !(disabled || readOnly),
-      popperPlacement: popoverPlacement
+      popperPlacement: popoverPlacement,
+      "data-test-subj": dataTestSubj
     }, rest));
   });
   if (controlOnly) return control;
@@ -197,11 +199,13 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
   }
   return (0, _react2.jsx)("span", {
     css: cssStyles,
-    className: classes
+    className: classes,
+    "data-test-subj": dataTestSubj
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
     icon: optionalIcon,
     clear: selected && !disabled && onClear ? {
-      onClick: onClear
+      onClick: onClear,
+      'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-clear") : undefined
     } : undefined,
     isLoading: isLoading,
     isInvalid: isInvalid,

package/optimize/lib/components/date_picker/date_picker_range.js

@@ -14,7 +14,7 @@ var _form = require("../form");
 var _services = require("../../services");
 var _date_picker_range = require("./date_picker_range.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend", "delimiter"];
+var _excluded = ["children", "className", "data-test-subj", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend", "delimiter"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,6 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    dataTestSubj = _ref['data-test-subj'],
     startDateControl = _ref.startDateControl,
     endDateControl = _ref.endDateControl,
     _ref$iconType = _ref.iconType,
@@ -69,6 +70,7 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
       disabled: disabled || (startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.props.disabled),
       isInvalid: isInvalid || (startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.props.isInvalid),
       className: (0, _classnames.default)('euiDatePickerRange__start', startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.props.className),
+      'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-start-date") : undefined,
       onBlur: function onBlur(event) {
         var _startDateControl$pro, _startDateControl$pro2;
         startDateControl === null || startDateControl === void 0 || (_startDateControl$pro = startDateControl.props) === null || _startDateControl$pro === void 0 || (_startDateControl$pro2 = _startDateControl$pro.onBlur) === null || _startDateControl$pro2 === void 0 || _startDateControl$pro2.call(_startDateControl$pro, event);
@@ -91,6 +93,7 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
       isInvalid: isInvalid || (endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.props.isInvalid),
       popoverPlacement: 'downRight',
       className: (0, _classnames.default)('euiDatePickerRange__end', endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.props.className),
+      'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-end-date") : undefined,
       onBlur: function onBlur(event) {
         var _endDateControl$props, _endDateControl$props2;
         endDateControl === null || endDateControl === void 0 || (_endDateControl$props = endDateControl.props) === null || _endDateControl$props === void 0 || (_endDateControl$props2 = _endDateControl$props.onBlur) === null || _endDateControl$props2 === void 0 || _endDateControl$props2.call(_endDateControl$props, event);
@@ -111,7 +114,8 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
   }, [iconType, inline]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    "data-test-subj": dataTestSubj
   }, rest), (0, _react2.jsx)(_form.EuiFormControlLayoutDelimited, {
     delimiter: delimiter,
     icon: icon,
@@ -125,6 +129,9 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
     isLoading: isLoading,
     append: inline ? undefined : append,
     prepend: inline ? undefined : prepend,
-    css: inline && !disabled && (shadow ? inlineStyles.formLayout.shadow : inlineStyles.formLayout.noShadow)
+    css: inline && !disabled && (shadow ? inlineStyles.formLayout.shadow : inlineStyles.formLayout.noShadow),
+    wrapperProps: {
+      'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-range-wrapper") : undefined
+    }
   }));
 };

package/optimize/lib/components/date_picker/react-datepicker/src/calendar.js

@@ -245,6 +245,7 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         classes.push("react-datepicker__navigation--previous--disabled");
         clickHandler = null;
       }
+      var dataTestSubj = _this.props['data-test-subj'];
       return (0, _react2.jsx)(_button.EuiButtonIcon, {
         iconType: "sortLeft",
         size: "s",
@@ -253,7 +254,8 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         onClick: clickHandler,
         disabled: !_this.props.accessibleMode,
         "aria-label": _this.props.previousMonthButtonLabel,
-        title: _this.props.previousMonthButtonLabel
+        title: _this.props.previousMonthButtonLabel,
+        "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-prev-month") : undefined
       });
     });
     (0, _defineProperty2.default)(_this, "renderNextMonthButton", function () {
@@ -276,6 +278,7 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         classes.push("react-datepicker__navigation--next--disabled");
         clickHandler = null;
       }
+      var dataTestSubj = _this.props['data-test-subj'];
       return (0, _react2.jsx)(_button.EuiButtonIcon, {
         iconType: "sortRight",
         size: "s",
@@ -284,7 +287,8 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         onClick: clickHandler,
         disabled: !_this.props.accessibleMode,
         "aria-label": _this.props.nextMonthButtonLabel,
-        title: _this.props.nextMonthButtonLabel
+        title: _this.props.nextMonthButtonLabel,
+        "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-next-month") : undefined
       });
     });
     (0, _defineProperty2.default)(_this, "renderYearDropdown", function () {
@@ -511,6 +515,7 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var Container = this.props.container || _calendar_container.default;
+      var dataTestSubj = this.props['data-test-subj'];
       var classes = (0, _classnames.default)("react-datepicker", this.props.className, {
         "react-datepicker--time-only": this.props.showTimeSelectOnly,
         "react-datepicker--non-interactive": !this.props.isCalendarInteractive
@@ -519,7 +524,8 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
       var initialFocusTarget = this.props.showTimeSelectOnly ? ".react-datepicker__time-box--accessible" : ".react-datepicker__month--accessible";
       if (trapFocus) {
         return (0, _react2.jsx)(Container, {
-          className: classes
+          className: classes,
+          "data-test-subj": dataTestSubj
         }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
           disabled: this.state.pauseFocusTrap || !this.props.enableFocusTrap,
           className: "react-datepicker__focusTrap",
@@ -528,7 +534,8 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         }, this.renderPreviousMonthButton(), this.renderNextMonthButton(), this.renderMonths(), this.renderTodayButton(), this.renderTimeSection(), this.props.children));
       } else {
         return (0, _react2.jsx)(Container, {
-          className: classes
+          className: classes,
+          "data-test-subj": dataTestSubj
         }, this.renderPreviousMonthButton(), this.renderNextMonthButton(), this.renderMonths(), this.renderTodayButton(), this.renderTimeSection(), this.props.children);
       }
     }

package/optimize/lib/components/date_picker/react-datepicker/src/index.js

@@ -533,9 +533,10 @@ var DatePicker = exports.default = /*#__PURE__*/function (_React$Component) {
       }, _this.props.defaultInputProps));
       var customInputRef = (_this$props$customInp = _this.props.customInputRef) !== null && _this$props$customInp !== void 0 ? _this$props$customInp : _this.props.customInput ? 'ref' : 'inputRef';
       var inputValue = typeof _this.props.value === "string" ? _this.props.value : typeof _this.state.inputValue === "string" ? _this.state.inputValue : (0, _date_utils.safeDateFormat)(_this.props.selected, _this.props);
+      var dataTestSubj = _this.props['data-test-subj'];
       return /*#__PURE__*/_react.default.cloneElement(customInput, (_React$cloneElement = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_React$cloneElement, customInputRef, function (input) {
         _this.input = input;
-      }), "value", inputValue), "onBlur", _this.handleBlur), "onChange", _this.handleChange), "onClick", _this.onInputClick), "onFocus", _this.handleFocus), "onKeyDown", _this.onInputKeyDown), "id", _this.props.id), "name", _this.props.name), "autoFocus", _this.props.autoFocus), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_React$cloneElement, "placeholder", _this.props.placeholderText), "disabled", _this.props.disabled), "autoComplete", _this.props.autoComplete), "className", className), "title", _this.props.title), "readOnly", _this.props.readOnly), "required", _this.props.required), "tabIndex", _this.props.tabIndex), "aria-label", _this.state.open ? 'Press the down key to enter a popover containing a calendar. Press the escape key to close the popover.' : 'Press the down key to open a popover containing a calendar.')));
+      }), "value", inputValue), "onBlur", _this.handleBlur), "onChange", _this.handleChange), "onClick", _this.onInputClick), "onFocus", _this.handleFocus), "onKeyDown", _this.onInputKeyDown), "id", _this.props.id), "name", _this.props.name), "autoFocus", _this.props.autoFocus), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_React$cloneElement, "placeholder", _this.props.placeholderText), "disabled", _this.props.disabled), "autoComplete", _this.props.autoComplete), "className", className), "title", _this.props.title), "readOnly", _this.props.readOnly), "required", _this.props.required), "tabIndex", _this.props.tabIndex), "aria-label", _this.state.open ? 'Press the down key to enter a popover containing a calendar. Press the escape key to close the popover.' : 'Press the down key to open a popover containing a calendar.'), "data-test-subj", dataTestSubj ? "".concat(dataTestSubj, "-input") : undefined)));
     });
     (0, _defineProperty2.default)(_this, "renderClearButton", function () {
       if (_this.props.isClearable && _this.props.selected != null) {
@@ -598,15 +599,24 @@ var DatePicker = exports.default = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
       var calendar = this.renderCalendar();
+      var dataTestSubj = this.props['data-test-subj'];
       if (this.props.inline && !this.props.withPortal) {
-        return calendar;
+        return calendar && /*#__PURE__*/_react.default.isValidElement(calendar) ? /*#__PURE__*/_react.default.cloneElement(calendar, {
+          'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
+        }) : calendar;
       }
       if (this.props.withPortal) {
-        return (0, _react2.jsx)("div", null, !this.props.inline ? (0, _react2.jsx)("div", {
-          className: "react-datepicker__input-container"
+        return (0, _react2.jsx)("div", {
+          "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-portal-container") : undefined
+        }, !this.props.inline ? (0, _react2.jsx)("div", {
+          className: "react-datepicker__input-container",
+          "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-input-container") : undefined
         }, this.renderDateInput(), this.renderClearButton(), this.renderAccessibleButton()) : null, this.state.open || this.props.inline ? (0, _react2.jsx)("div", {
-          className: "react-datepicker__portal"
-        }, calendar) : null);
+          className: "react-datepicker__portal",
+          "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-portal") : undefined
+        }, calendar && /*#__PURE__*/_react.default.isValidElement(calendar) ? /*#__PURE__*/_react.default.cloneElement(calendar, {
+          'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
+        }) : calendar) : null);
       }
       return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
         ownFocus: false,
@@ -623,12 +633,18 @@ var DatePicker = exports.default = /*#__PURE__*/function (_React$Component) {
         container: this.props.popperContainer,
         panelRef: function panelRef(elem) {
           _this2.popover = elem;
+        },
+        panelProps: {
+          'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-popover") : undefined
         }
       }, this.props.popperProps, {
         button: (0, _react2.jsx)("div", {
-          className: "react-datepicker__input-container"
+          className: "react-datepicker__input-container",
+          "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-input-container") : undefined
         }, this.renderDateInput(), this.renderClearButton(), this.renderAccessibleButton())
-      }), calendar);
+      }), calendar && /*#__PURE__*/_react.default.isValidElement(calendar) ? /*#__PURE__*/_react.default.cloneElement(calendar, {
+        'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
+      }) : calendar);
     }
   }], [{
     key: "defaultProps",

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

@@ -298,7 +298,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
       };
       var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && (0, _react2.jsx)("button", {
+        return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && (0, _react2.jsx)(_form.EuiFormControlButton, {
           type: "button",
           css: styles.euiSuperDatePicker__prettyFormat,
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {