@elastic/eui 97.3.0 → 97.3.1

package/es/components/combo_box/combo_box.js

@@ -316,12 +316,15 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         case keys.ENTER:
-          event.preventDefault();
-          event.stopPropagation();
-          if (_this.hasActiveOption()) {
-            _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
-          } else {
-            _this.setCustomOptions(false);
+          // Do not block enter keypresses for the clear button or delete selection buttons
+          if (event.target === _this.searchInputRefInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (_this.hasActiveOption()) {
+              _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
+            } else {
+              _this.setCustomOptions(false);
+            }
           }
           break;
         case keys.TAB:

package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -87,7 +87,9 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
     display: "block",
     panelPaddingSize: "none"
-  }, rest), ___EmotionJSX(EuiDatePopoverContent, {
+  }, rest, {
+    css: value === 'now' && styles.now
+  }), ___EmotionJSX(EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
     canRoundRelativeUnits: canRoundRelativeUnits,

package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -1,3 +1,4 @@
+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
@@ -8,8 +9,17 @@
 
 import { css } from '@emotion/react';
 import { _buttonStyles } from '../super_date_picker.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;"
+} : {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/css(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;")
+    euiDatePopoverButton: /*#__PURE__*/css(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    now: _ref
   };
 };

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

@@ -64,7 +64,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     // isQuickSelectOnly forces `width` to be `auto`
     isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {

package/es/components/page/page_header/page_header_content.js

@@ -177,8 +177,9 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return ___EmotionJSX(EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/es/components/page/page_header/page_header_content.styles.js

@@ -83,7 +83,8 @@ export var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/css("@container (max-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;", logicalCSS('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/css("position:relative;", logicalCSS('top', "-".concat(euiTheme.size.xs)), " ", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

package/eui.d.ts

@@ -17586,6 +17586,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiDatePopoverButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiDatePopoverButton: import("@emotion/utils").SerializedStyles;
+	    now: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -20828,6 +20829,7 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	    euiPageHeaderContent__top: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__leftSideItems: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__rightSideItems: import("@emotion/utils").SerializedStyles;
+	    euiPageHeaderContent__rightSideItem: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__titleIcon: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -25315,6 +25317,7 @@ declare module '@elastic/eui/.storybook/test' {
 	     */
 	    waitForAndClick: (testSubject: string) => Promise<void>;
 	    waitForEuiPopoverVisible: () => Promise<void>;
+	    waitForEuiPopoverHidden: () => Promise<void>;
 	    getByLabelText: (<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => T) & ((id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => HTMLElement);
 	    getAllByLabelText: (<T_1 extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => T_1[]) & ((id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => HTMLElement[]);
 	    queryByLabelText: (<T_2 extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => T_2 | null) & ((id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => HTMLElement | null);

package/i18ntokens.json

@@ -995,14 +995,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 791,
+        "line": 794,
         "column": 8,
-        "index": 23154
+        "index": 23332
       },
       "end": {
-        "line": 794,
+        "line": 797,
         "column": 9,
-        "index": 23273
+        "index": 23451
       }
     },
     "filepath": "src/components/combo_box/combo_box.tsx"

package/lib/components/combo_box/combo_box.js

@@ -320,12 +320,15 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         case _services.keys.ENTER:
-          event.preventDefault();
-          event.stopPropagation();
-          if (_this.hasActiveOption()) {
-            _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
-          } else {
-            _this.setCustomOptions(false);
+          // Do not block enter keypresses for the clear button or delete selection buttons
+          if (event.target === _this.searchInputRefInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (_this.hasActiveOption()) {
+              _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
+            } else {
+              _this.setCustomOptions(false);
+            }
           }
           break;
         case _services.keys.TAB:

package/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -92,7 +92,9 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
     display: "block",
     panelPaddingSize: "none"
-  }, rest), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
+  }, rest, {
+    css: value === 'now' && styles.now
+  }), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
     canRoundRelativeUnits: canRoundRelativeUnits,

package/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -6,16 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePopoverButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _super_date_picker = require("../super_date_picker.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: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;"
+} : {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiDatePopoverButtonStyles = exports.euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;")
+    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    now: _ref
   };
 };

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

@@ -68,7 +68,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     // isQuickSelectOnly forces `width` to be `auto`
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {

package/lib/components/page/page_header/page_header_content.js

@@ -183,8 +183,9 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return (0, _react2.jsx)(_flex.EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/lib/components/page/page_header/page_header_content.styles.js

@@ -87,7 +87,8 @@ var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function e
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/(0, _react.css)("@container (max-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;", (0, _global_styling.logicalCSS)('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

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

@@ -308,12 +308,15 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         case keys.ENTER:
-          event.preventDefault();
-          event.stopPropagation();
-          if (_this.hasActiveOption()) {
-            _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
-          } else {
-            _this.setCustomOptions(false);
+          // Do not block enter keypresses for the clear button or delete selection buttons
+          if (event.target === _this.searchInputRefInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (_this.hasActiveOption()) {
+              _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
+            } else {
+              _this.setCustomOptions(false);
+            }
           }
           break;
         case keys.TAB:

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

@@ -85,7 +85,9 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
     display: "block",
     panelPaddingSize: "none"
-  }, rest), ___EmotionJSX(EuiDatePopoverContent, {
+  }, rest, {
+    css: value === 'now' && styles.now
+  }), ___EmotionJSX(EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
     canRoundRelativeUnits: canRoundRelativeUnits,

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -1,3 +1,4 @@
+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
@@ -8,8 +9,17 @@
 
 import { css } from '@emotion/react';
 import { _buttonStyles } from '../super_date_picker.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;"
+} : {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/css(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;")
+    euiDatePopoverButton: /*#__PURE__*/css(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    now: _ref
   };
 };

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

@@ -64,7 +64,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     // isQuickSelectOnly forces `width` to be `auto`
     isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {

package/optimize/es/components/page/page_header/page_header_content.js

@@ -170,8 +170,9 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return ___EmotionJSX(EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/optimize/es/components/page/page_header/page_header_content.styles.js

@@ -83,7 +83,8 @@ export var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/css("@container (max-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;", logicalCSS('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/css("position:relative;", logicalCSS('top', "-".concat(euiTheme.size.xs)), " ", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

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

@@ -313,12 +313,15 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         case _services.keys.ENTER:
-          event.preventDefault();
-          event.stopPropagation();
-          if (_this.hasActiveOption()) {
-            _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
-          } else {
-            _this.setCustomOptions(false);
+          // Do not block enter keypresses for the clear button or delete selection buttons
+          if (event.target === _this.searchInputRefInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (_this.hasActiveOption()) {
+              _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
+            } else {
+              _this.setCustomOptions(false);
+            }
           }
           break;
         case _services.keys.TAB:

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

@@ -90,7 +90,9 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
     display: "block",
     panelPaddingSize: "none"
-  }, rest), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
+  }, rest, {
+    css: value === 'now' && styles.now
+  }), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
     canRoundRelativeUnits: canRoundRelativeUnits,

package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -6,16 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePopoverButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _super_date_picker = require("../super_date_picker.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: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;"
+} : {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiDatePopoverButtonStyles = exports.euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;")
+    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    now: _ref
   };
 };

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

@@ -68,7 +68,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     // isQuickSelectOnly forces `width` to be `auto`
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {

package/optimize/lib/components/page/page_header/page_header_content.js

@@ -176,8 +176,9 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : (0, _toConsumableArray2.default)(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return (0, _react2.jsx)(_flex.EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/optimize/lib/components/page/page_header/page_header_content.styles.js

@@ -87,7 +87,8 @@ var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function e
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/(0, _react.css)("@container (max-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;", (0, _global_styling.logicalCSS)('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "97.3.0",
+  "version": "97.3.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/combo_box/combo_box.js

@@ -314,12 +314,15 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         case _services.keys.ENTER:
-          event.preventDefault();
-          event.stopPropagation();
-          if (_this.hasActiveOption()) {
-            _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
-          } else {
-            _this.setCustomOptions(false);
+          // Do not block enter keypresses for the clear button or delete selection buttons
+          if (event.target === _this.searchInputRefInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (_this.hasActiveOption()) {
+              _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
+            } else {
+              _this.setCustomOptions(false);
+            }
           }
           break;
         case _services.keys.TAB:

package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -91,7 +91,9 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
     display: "block",
     panelPaddingSize: "none"
-  }, rest), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
+  }, rest, {
+    css: value === 'now' && styles.now
+  }), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
     canRoundRelativeUnits: canRoundRelativeUnits,

package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -6,16 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePopoverButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _super_date_picker = require("../super_date_picker.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: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;"
+} : {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiDatePopoverButtonStyles = exports.euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;")
+    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    now: _ref
   };
 };

package/test-env/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -68,7 +68,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     // isQuickSelectOnly forces `width` to be `auto`
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {

package/test-env/components/page/page_header/page_header_content.js

@@ -177,8 +177,9 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : (0, _toConsumableArray2.default)(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return (0, _react2.jsx)(_flex.EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/test-env/components/page/page_header/page_header_content.styles.js

@@ -87,7 +87,8 @@ var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function e
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/(0, _react.css)("@container (max-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;", (0, _global_styling.logicalCSS)('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };