@elastic/eui 106.6.0 → 107.0.0

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/datagrid/controls/column_selector.js

@@ -26,28 +26,57 @@ var _column_selector = require("./column_selector.styles");
 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; }
-/*
+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
  * 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.
  */
-
 var useDataGridColumnSelector = exports.useDataGridColumnSelector = function useDataGridColumnSelector(availableColumns, columnVisibility, showColumnSelector, displayValues) {
   var allowColumnHiding = (0, _data_grid_toolbar.getNestedObjectOptions)(showColumnSelector, 'allowHide');
   var allowColumnReorder = (0, _data_grid_toolbar.getNestedObjectOptions)(showColumnSelector, 'allowReorder');
+  var visibleColumns = columnVisibility.visibleColumns,
+    setVisibleColumns = columnVisibility.setVisibleColumns;
   var _useDependentState = (0, _services.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 = (0, _slicedToArray2.default)(_useDependentState, 2),
     sortedColumns = _useDependentState2[0],
     setSortedColumns = _useDependentState2[1];
-  var visibleColumns = columnVisibility.visibleColumns,
-    setVisibleColumns = columnVisibility.setVisibleColumns;
   var visibleColumnIds = (0, _react.useMemo)(function () {
     return new Set(visibleColumns);
   }, [visibleColumns]);

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', {

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

@@ -29,9 +29,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__
+};
 var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), " ", (0, _global_styling.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
@@ -46,11 +53,15 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: {
-      overlay: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
-        borderAllInHighContrastMode: true
-      }), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
-      left: /*#__PURE__*/(0, _react.css)("border-inline-end:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:left;"),
-      right: /*#__PURE__*/(0, _react.css)("border-inline-start:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:right;")
+      overlay: _ref2,
+      left: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'right'
+      }), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'left'
+      }), ";;label:right;")
     },
     push: {
       push: /*#__PURE__*/(0, _react.css)("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundLine = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlHoverStyles = exports.euiFormControlHighlightBorderStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.disableFormControlHoverStyles = void 0;
+exports.euiFormVariables = exports.euiFormPlaceholderStyles = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundLine = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlHoverStyles = exports.euiFormControlHighlightBorderStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.disableFormControlHoverStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -24,6 +24,11 @@ var euiFormMaxWidth = exports.euiFormMaxWidth = function euiFormMaxWidth(_ref) {
   var euiTheme = _ref.euiTheme;
   return euiTheme.components.forms.maxWidth;
 };
+var euiFormPlaceholderStyles = exports.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  ");
+};
 var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
@@ -117,7 +122,7 @@ var euiFormControlText = exports.euiFormControlText = function euiFormControlTex
   var _euiFontSize = (0, _global_styling.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  ");
 };
 var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -182,7 +187,7 @@ var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = functi
   var isRefreshVariant = (0, _services.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  ");
 };
 var euiFormControlReadOnlyStyles = exports.euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFormControlButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _button = require("../../button");
+var _form_control_button = require("./form_control_button.styles");
+var _inner_text = require("../../inner_text");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "value", "placeholder", "className", "contentProps", "textProps", "compressed", "isInvalid", "fullWidth", "href", "rel"];
+/*
+ * 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.
+ */
+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; }
+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) { (0, _defineProperty2.default)(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; }
+var EuiFormControlButton = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useInnerText = (0, _inner_text.useInnerText)(),
+    _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
+    buttonTextRef = _useInnerText2[0],
+    innerText = _useInnerText2[1];
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_button.euiFormControlButtonStyles);
+  var classes = (0, _classnames.default)('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: (0, _classnames.default)('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__*/(0, _react.isValidElement)(children) ? children : (0, _react2.jsx)("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 (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    css: cssStyles,
+    className: classes,
+    contentProps: contentProps,
+    textProps: false,
+    color: "text"
+  }, restProps), hasText && (0, _react2.jsx)("span", (0, _extends2.default)({}, customTextProps, {
+    ref: buttonTextRef
+  }), value || placeholder), hasText && content && ' ', content);
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormControlButtonStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _form = require("../form.styles");
+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.
+ */
+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__
+};
+var euiFormControlButtonStyles = exports.euiFormControlButtonStyles = function euiFormControlButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
+  return {
+    euiFormControlButton: /*#__PURE__*/(0, _react.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__*/(0, _react.css)(formStyles.invalid, " &:disabled{", formStyles.invalid, ";};label:isInvalid;"),
+    compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";;label:compressed;"),
+    formWidth: formStyles.formWidth,
+    fullWidth: /*#__PURE__*/(0, _react.css)(formStyles.fullWidth, ";label:fullWidth;"),
+    euiFormControlButton__content: /*#__PURE__*/(0, _react.css)("justify-content:flex-start;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiFormControlButton__content;"),
+    textContent: _ref,
+    placeholder: /*#__PURE__*/(0, _react.css)((0, _form.euiFormPlaceholderStyles)(euiThemeContext), ";;label:placeholder;")
+  };
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiFormControlButton", {
+  enumerable: true,
+  get: function get() {
+    return _form_control_button.EuiFormControlButton;
+  }
+});
+var _form_control_button = require("./form_control_button");

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

@@ -37,7 +37,7 @@ var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function e
   var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = (0, _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((0, _global_styling.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((0, _global_styling.logicalCSS)('border-top-left-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', '0'), "\n      }\n  ");
+  var wrapperGroupStyles = "\n      > :first-child {\n        border-radius: inherit;\n        ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        border-radius: inherit;\n        ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', '0'), "\n      }\n  ");
   var prependOnlyStyles = "\n      > :last-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n      }\n  ");
   var appendOnlyStyles = "\n      > :first-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n      }\n  ");
   return {
@@ -49,7 +49,7 @@ var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function e
     formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     group: {
-      group: /*#__PURE__*/(0, _react.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, ">*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
+      group: /*#__PURE__*/(0, _react.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;}>*{", (0, _global_styling.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/lib/components/form/index.js

@@ -91,6 +91,17 @@ Object.keys(_form).forEach(function (key) {
     }
   });
 });
+var _form_control_button = require("./form_control_button");
+Object.keys(_form_control_button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _form_control_button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _form_control_button[key];
+    }
+  });
+});
 var _form_control_layout = require("./form_control_layout");
 Object.keys(_form_control_layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

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