@elastic/eui 106.6.0 → 107.0.0

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

@@ -23,7 +23,9 @@ export var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(eu
     euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('top', fixedHeaderOffset), logicalCSS('padding-bottom', euiTheme.size.xs), ";;label:euiCollapsibleNavBeta;"),
     left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thin), ";;label:left;"),
     right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), ";;label:right;"),
-    isPush: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:isPush;"),
+    isPush: /*#__PURE__*/css(euiShadowFlat(euiThemeContext, {
+      border: 'none'
+    }), ";;label:isPush;"),
     isPushCollapsed: /*#__PURE__*/css(hideScrollbars, ";;label:isPushCollapsed;"),
     isOverlayFullWidth: /*#__PURE__*/css("&.euiFlyout{", logicalCSS('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };

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

@@ -13,7 +13,7 @@ export var LIST_MAX_HEIGHT = 200;
 export var euiComboBoxOptionListStyles = function euiComboBoxOptionListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiComboBoxOptionList: /*#__PURE__*/css(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;", logicalCSS('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", logicalCSS('padding-horizontal', euiTheme.size.s), logicalCSS('padding-top', mathWithUnits(euiTheme.size.s, function (x) {
+    euiComboBoxOptionList: /*#__PURE__*/css(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;", logicalCSS('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", logicalCSS('padding-horizontal', euiTheme.size.s), logicalCSS('padding-top', mathWithUnits(euiTheme.size.s, function (x) {
       return x + 1;
     })), " ", logicalCSS('padding-bottom', euiTheme.size.xs), " ", euiTitle(euiThemeContext, 'xxxs'), ";};label:euiComboBoxOptionList;"),
     /* eslint-disable local/css-logical-properties */

package/optimize/es/components/datagrid/controls/column_selector.js

@@ -1,6 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,17 +30,45 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useDataGridColumnSelector = function useDataGridColumnSelector(availableColumns, columnVisibility, showColumnSelector, displayValues) {
   var allowColumnHiding = getNestedObjectOptions(showColumnSelector, 'allowHide');
   var allowColumnReorder = getNestedObjectOptions(showColumnSelector, 'allowReorder');
+  var visibleColumns = columnVisibility.visibleColumns,
+    setVisibleColumns = columnVisibility.setVisibleColumns;
   var _useDependentState = useDependentState(function () {
-      return availableColumns.map(function (_ref) {
+      var availableColumnIds = availableColumns.map(function (_ref) {
         var id = _ref.id;
         return id;
       });
+      var availableSet = new Set(availableColumnIds);
+      // Filter visibleColumns to only include existing columns
+      var validVisibleColumns = visibleColumns.filter(function (id) {
+        return availableSet.has(id);
+      });
+      var visibleSet = new Set(validVisibleColumns);
+      var result = [];
+      var visibleIndex = 0;
+      var _iterator = _createForOfIteratorHelper(availableColumnIds),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var columnId = _step.value;
+          if (visibleSet.has(columnId)) {
+            // Replace with next visible column in order
+            result.push(validVisibleColumns[visibleIndex++]);
+          } else {
+            // Keep hidden column in original position
+            result.push(columnId);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return result;
+      // doesn't depend on visibleColumns on purpose to keep it an initial state
     }, [availableColumns]),
     _useDependentState2 = _slicedToArray(_useDependentState, 2),
     sortedColumns = _useDependentState2[0],
     setSortedColumns = _useDependentState2[1];
-  var visibleColumns = columnVisibility.visibleColumns,
-    setVisibleColumns = columnVisibility.setVisibleColumns;
   var visibleColumnIds = useMemo(function () {
     return new Set(visibleColumns);
   }, [visibleColumns]);

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -61,6 +61,7 @@ export var 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,
@@ -172,7 +173,8 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       utcOffset: utcOffset,
       yearDropdownItemNumber: 7,
       accessibleMode: !(disabled || readOnly),
-      popperPlacement: popoverPlacement
+      popperPlacement: popoverPlacement,
+      "data-test-subj": dataTestSubj
     }, rest));
   });
   if (controlOnly) return control;
@@ -188,11 +190,13 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
   }
   return ___EmotionJSX("span", {
     css: cssStyles,
-    className: classes
+    className: classes,
+    "data-test-subj": dataTestSubj
   }, ___EmotionJSX(EuiFormControlLayout, _extends({
     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/es/components/date_picker/date_picker_range.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -18,6 +18,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var 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,
@@ -60,6 +61,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       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: classNames('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);
@@ -82,6 +84,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       isInvalid: isInvalid || (endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.props.isInvalid),
       popoverPlacement: 'downRight',
       className: classNames('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);
@@ -102,7 +105,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   }, [iconType, inline]);
   return ___EmotionJSX("div", _extends({
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    "data-test-subj": dataTestSubj
   }, rest), ___EmotionJSX(EuiFormControlLayoutDelimited, {
     delimiter: delimiter,
     icon: icon,
@@ -116,6 +120,9 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     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/es/components/date_picker/react-datepicker/src/calendar.js

@@ -240,6 +240,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         classes.push("react-datepicker__navigation--previous--disabled");
         clickHandler = null;
       }
+      var dataTestSubj = _this.props['data-test-subj'];
       return ___EmotionJSX(EuiButtonIcon, {
         iconType: "sortLeft",
         size: "s",
@@ -248,7 +249,8 @@ var Calendar = /*#__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
       });
     });
     _defineProperty(_this, "renderNextMonthButton", function () {
@@ -271,6 +273,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         classes.push("react-datepicker__navigation--next--disabled");
         clickHandler = null;
       }
+      var dataTestSubj = _this.props['data-test-subj'];
       return ___EmotionJSX(EuiButtonIcon, {
         iconType: "sortRight",
         size: "s",
@@ -279,7 +282,8 @@ var Calendar = /*#__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
       });
     });
     _defineProperty(_this, "renderYearDropdown", function () {
@@ -506,6 +510,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var Container = this.props.container || CalendarContainer;
+      var dataTestSubj = this.props['data-test-subj'];
       var classes = classnames("react-datepicker", this.props.className, {
         "react-datepicker--time-only": this.props.showTimeSelectOnly,
         "react-datepicker--non-interactive": !this.props.isCalendarInteractive
@@ -514,7 +519,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       var initialFocusTarget = this.props.showTimeSelectOnly ? ".react-datepicker__time-box--accessible" : ".react-datepicker__month--accessible";
       if (trapFocus) {
         return ___EmotionJSX(Container, {
-          className: classes
+          className: classes,
+          "data-test-subj": dataTestSubj
         }, ___EmotionJSX(EuiFocusTrap, {
           disabled: this.state.pauseFocusTrap || !this.props.enableFocusTrap,
           className: "react-datepicker__focusTrap",
@@ -523,7 +529,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         }, this.renderPreviousMonthButton(), this.renderNextMonthButton(), this.renderMonths(), this.renderTodayButton(), this.renderTimeSection(), this.props.children));
       } else {
         return ___EmotionJSX(Container, {
-          className: classes
+          className: classes,
+          "data-test-subj": dataTestSubj
         }, this.renderPreviousMonthButton(), this.renderNextMonthButton(), this.renderMonths(), this.renderTodayButton(), this.renderTimeSection(), this.props.children);
       }
     }

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

@@ -522,9 +522,10 @@ var DatePicker = /*#__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 : safeDateFormat(_this.props.selected, _this.props);
+      var dataTestSubj = _this.props['data-test-subj'];
       return /*#__PURE__*/React.cloneElement(customInput, (_React$cloneElement = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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)));
     });
     _defineProperty(_this, "renderClearButton", function () {
       if (_this.props.isClearable && _this.props.selected != null) {
@@ -587,15 +588,24 @@ var DatePicker = /*#__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.isValidElement(calendar) ? /*#__PURE__*/React.cloneElement(calendar, {
+          'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
+        }) : calendar;
       }
       if (this.props.withPortal) {
-        return ___EmotionJSX("div", null, !this.props.inline ? ___EmotionJSX("div", {
-          className: "react-datepicker__input-container"
+        return ___EmotionJSX("div", {
+          "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-portal-container") : undefined
+        }, !this.props.inline ? ___EmotionJSX("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 ? ___EmotionJSX("div", {
-          className: "react-datepicker__portal"
-        }, calendar) : null);
+          className: "react-datepicker__portal",
+          "data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-portal") : undefined
+        }, calendar && /*#__PURE__*/React.isValidElement(calendar) ? /*#__PURE__*/React.cloneElement(calendar, {
+          'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
+        }) : calendar) : null);
       }
       return ___EmotionJSX(EuiPopover, _extends({
         ownFocus: false,
@@ -612,12 +622,18 @@ var DatePicker = /*#__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: ___EmotionJSX("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.isValidElement(calendar) ? /*#__PURE__*/React.cloneElement(calendar, {
+        'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
+      }) : calendar);
     }
   }], [{
     key: "defaultProps",

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

@@ -27,7 +27,7 @@ import { useEuiMemoizedStyles } from '../../../services';
 import { isObject } from '../../../services/predicate';
 import { EuiI18nConsumer } from '../../context';
 import { EuiDatePickerRange } from '../date_picker_range';
-import { EuiFormControlLayout } from '../../form';
+import { EuiFormControlButton, EuiFormControlLayout } from '../../form';
 import { RenderI18nTimeOptions } from './time_options';
 import { PrettyDuration, showPrettyDuration } from './pretty_duration';
 import { AsyncInterval } from './async_interval';
@@ -290,7 +290,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       };
       var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && ___EmotionJSX("button", {
+        return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && ___EmotionJSX(EuiFormControlButton, {
           type: "button",
           css: styles.euiSuperDatePicker__prettyFormat,
           className: classNames('euiSuperDatePicker__prettyFormat', {

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

@@ -24,9 +24,16 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "animation-duration:0s!important;label:noAnimation;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "rks1ev-overlay",
+  styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;"
+} : {
+  name: "rks1ev-overlay",
+  styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", logicalCSS('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;"),
     // Flyout sizes
@@ -41,11 +48,15 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: {
-      overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
-        borderAllInHighContrastMode: true
-      }), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
-      left: /*#__PURE__*/css("border-inline-end:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:left;"),
-      right: /*#__PURE__*/css("border-inline-start:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:right;")
+      overlay: _ref2,
+      left: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'right'
+      }), ";;label:left;"),
+      right: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'left'
+      }), ";;label:right;")
     },
     push: {
       push: /*#__PURE__*/css("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),

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

@@ -20,6 +20,11 @@ export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
   var euiTheme = _ref.euiTheme;
   return euiTheme.components.forms.maxWidth;
 };
+export var euiFormPlaceholderStyles = function euiFormPlaceholderStyles(euiThemeContext, color) {
+  var form = euiFormVariables(euiThemeContext);
+  var _color = color !== null && color !== void 0 ? color : form.textColorDisabled;
+  return "\n    color: ".concat(_color, ";\n    opacity: 1;\n  ");
+};
 export var euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
@@ -113,7 +118,7 @@ export var euiFormControlText = function euiFormControlText(euiThemeContext) {
   var _euiFontSize = euiFontSize(euiThemeContext, 's'),
     fontSize = _euiFontSize.fontSize;
   var form = euiFormVariables(euiThemeContext);
-  return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(form.textColor, ";\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlPlaceholderText, ";\n      opacity: 1;\n    ")), "\n  ");
+  return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(form.textColor, ";\n\n    ").concat(euiPlaceholderPerBrowser(euiFormPlaceholderStyles(euiThemeContext, form.controlPlaceholderText)), "\n  ");
 };
 export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -178,7 +183,7 @@ export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(
   var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var refreshVariantStyles = "\n      --euiFormControlStateHoverColor: transparent;\n      --euiFormControlStateColor: ".concat(form.borderColor, ";\n    ");
-  return "\n    color: ".concat(form.textColorDisabled, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.textColorDisabled, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(isRefreshVariant && refreshVariantStyles, "\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.textColorDisabled, ";\n      opacity: 1;\n    ")), "\n  ");
+  return "\n    color: ".concat(form.textColorDisabled, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.textColorDisabled, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(isRefreshVariant && refreshVariantStyles, "\n\n    ").concat(euiPlaceholderPerBrowser(euiFormPlaceholderStyles(euiThemeContext)), "\n  ");
 };
 export var euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

package/optimize/es/components/form/form_control_button/form_control_button.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "value", "placeholder", "className", "contentProps", "textProps", "compressed", "isInvalid", "fullWidth", "href", "rel"];
+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
+ * 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 React, { isValidElement } from 'react';
+import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiButtonEmpty } from '../../button';
+import { euiFormControlButtonStyles } from './form_control_button.styles';
+import { useInnerText } from '../../inner_text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFormControlButton = function EuiFormControlButton(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    className = _ref.className,
+    _contentProps = _ref.contentProps,
+    _textProps = _ref.textProps,
+    compressed = _ref.compressed,
+    _ref$isInvalid = _ref.isInvalid,
+    isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    href = _ref.href,
+    rel = _ref.rel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useInnerText = useInnerText(),
+    _useInnerText2 = _slicedToArray(_useInnerText, 2),
+    buttonTextRef = _useInnerText2[0],
+    innerText = _useInnerText2[1];
+  var styles = useEuiMemoizedStyles(euiFormControlButtonStyles);
+  var classes = classNames('euiFormControlButton', className);
+  var cssStyles = [styles.euiFormControlButton, isInvalid && styles.isInvalid, compressed && styles.compressed, fullWidth ? styles.fullWidth : styles.formWidth];
+  var contentProps = _objectSpread(_objectSpread({}, _contentProps), {}, {
+    css: [styles.euiFormControlButton__content, _contentProps === null || _contentProps === void 0 ? void 0 : _contentProps.css]
+  });
+  var customTextProps = _objectSpread(_objectSpread({}, _textProps), {}, {
+    className: classNames('eui-textTruncate', _textProps && (_textProps === null || _textProps === void 0 ? void 0 : _textProps.className)),
+    css: [styles.textContent, !value && styles.placeholder, _textProps && (_textProps === null || _textProps === void 0 ? void 0 : _textProps.css)]
+  });
+  var content = children ? /*#__PURE__*/isValidElement(children) ? children : ___EmotionJSX("span", null, children) : null;
+  var hasText = value || placeholder;
+  var linkProps = _objectSpread({
+    href: href,
+    rel: rel
+  }, rest);
+  var buttonProps = _objectSpread({
+    value: value ? innerText !== null && innerText !== void 0 ? innerText : '' : undefined
+  }, rest);
+  var restProps = href ? linkProps : buttonProps;
+  return ___EmotionJSX(EuiButtonEmpty, _extends({
+    css: cssStyles,
+    className: classes,
+    contentProps: contentProps,
+    textProps: false,
+    color: "text"
+  }, restProps), hasText && ___EmotionJSX("span", _extends({}, customTextProps, {
+    ref: buttonTextRef
+  }), value || placeholder), hasText && content && ' ', content);
+};

package/optimize/es/components/form/form_control_button/form_control_button.styles.js

@@ -0,0 +1,34 @@
+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)."; }
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormControlStyles, euiFormPlaceholderStyles } from '../form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "isuld2-textContent",
+  styles: "flex:1;text-align:start;label:textContent;"
+} : {
+  name: "isuld2-textContent",
+  styles: "flex:1;text-align:start;label:textContent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFormControlButtonStyles = function euiFormControlButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formStyles = euiFormControlStyles(euiThemeContext);
+  return {
+    euiFormControlButton: /*#__PURE__*/css(formStyles.shared, " ", formStyles.uncompressed, " font-weight:", euiTheme.font.weight.regular, ";transition:none;&:hover{&::before{display:none;}}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";};label:euiFormControlButton;"),
+    isInvalid: /*#__PURE__*/css(formStyles.invalid, " &:disabled{", formStyles.invalid, ";};label:isInvalid;"),
+    compressed: /*#__PURE__*/css(formStyles.compressed, ";;label:compressed;"),
+    formWidth: formStyles.formWidth,
+    fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
+    euiFormControlButton__content: /*#__PURE__*/css("justify-content:flex-start;", logicalCSS('width', '100%'), ";;label:euiFormControlButton__content;"),
+    textContent: _ref,
+    placeholder: /*#__PURE__*/css(euiFormPlaceholderStyles(euiThemeContext), ";;label:placeholder;")
+  };
+};

package/optimize/es/components/form/form_control_button/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { EuiFormControlButton } from './form_control_button';

package/optimize/es/components/form/form_control_layout/form_control_layout.styles.js

@@ -33,7 +33,7 @@ export var euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiT
   var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var groupStyles = "\n      /* use pseudo element for borders to prevent dimension changes and support nested elements better */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n\n      /* the filter group will use the form layout border instead */\n      .euiFilterGroup {\n        border-radius: 0;\n        /* creating extra space to prevent the focus indicator being cut off */\n        ").concat(logicalCSS('padding-right', euiTheme.border.width.thin), "\n\n        &::after {\n          display: none;\n        }\n      }\n\n      .euiFilterButton__wrapper:first-of-type::before,\n      .euiFilterButton__wrapper::after {\n        display: none;\n      }\n  ");
-  var wrapperGroupStyles = "\n      > :first-child {\n        ".concat(logicalCSS('border-top-left-radius', '0'), "\n        ").concat(logicalCSS('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        ").concat(logicalCSS('border-top-right-radius', '0'), "\n        ").concat(logicalCSS('border-bottom-right-radius', '0'), "\n      }\n  ");
+  var wrapperGroupStyles = "\n      > :first-child {\n        border-radius: inherit;\n        ".concat(logicalCSS('border-top-left-radius', '0'), "\n        ").concat(logicalCSS('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        border-radius: inherit;\n        ").concat(logicalCSS('border-top-right-radius', '0'), "\n        ").concat(logicalCSS('border-bottom-right-radius', '0'), "\n      }\n  ");
   var prependOnlyStyles = "\n      > :last-child {\n        ".concat(logicalCSS('border-top-right-radius', 'inherit'), "\n        ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n      }\n  ");
   var appendOnlyStyles = "\n      > :first-child {\n        ".concat(logicalCSS('border-top-left-radius', 'inherit'), "\n        ").concat(logicalCSS('border-bottom-left-radius', 'inherit'), "\n      }\n  ");
   return {
@@ -45,7 +45,7 @@ export var euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiT
     formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
     fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " ", logicalCSS('width', '100%'), ";;label:fullWidth;"),
     group: {
-      group: /*#__PURE__*/css("position:relative;display:flex;align-items:stretch;border:", isRefreshVariant ? 'none' : "".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor), ";background-color:", form.backgroundColor, ";overflow:hidden;", isRefreshVariant && groupStyles, ">*{", logicalCSS('height', '100%'), ";};label:group;"),
+      group: /*#__PURE__*/css("position:relative;display:flex;align-items:stretch;border:", isRefreshVariant ? 'none' : "".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor), ";background-color:", form.backgroundColor, ";overflow:hidden;", isRefreshVariant && groupStyles, " .euiFormControlButton{border-radius:inherit;box-shadow:none;}>*{", logicalCSS('height', '100%'), ";};label:group;"),
       // Skipping css`` to avoid repeated compressed/uncompressed classNames
       uncompressed: "\n        border-radius: ".concat(form.controlBorderRadius, ";\n      "),
       compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      ")

package/optimize/es/components/form/index.js

@@ -14,6 +14,7 @@ export * from './field_search';
 export * from './field_text';
 export * from './file_picker';
 export * from './form';
+export * from './form_control_button';
 export * from './form_control_layout';
 export * from './form_error_text';
 export * from './form_fieldset';

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

@@ -24,7 +24,9 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
   return {
-    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowXSmall(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowXSmall(euiThemeContext, {
+      border: 'none'
+    }), "&+.euiHeader{clip-path:polygon(0 0, 100% 0, 100% 100vh, 0 100vh);};label:euiHeader;"),
     // Position
     static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) + 1, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), ";;label:fixed;"),

package/optimize/es/components/icon/assets/app_workflows.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 EuiIconAppWorkflows = function EuiIconAppWorkflows(_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: "M6 1a2 2 0 0 1 1.93 1.5H12a3 3 0 0 1 0 6H9.93a2 2 0 0 1-3.86 0H4a2 2 0 0 0 0 4h4.07A2 2 0 0 1 10 11h3a2 2 0 1 1 0 4h-3a2 2 0 0 1-1.93-1.5H4a3 3 0 1 1 0-6h2.07a2 2 0 0 1 3.86 0H12a2 2 0 0 0 0-4H7.93A2 2 0 0 1 6 5H3a2 2 0 1 1 0-4h3Zm4 11a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3ZM8 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 2a1 1 0 0 0 0 2h3a1 1 0 1 0 0-2H3Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconAppWorkflows;