@elastic/eui 106.2.0 → 106.3.0

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

@@ -68,12 +68,7 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
     (0, _defineProperty2.default)(_this, "ListInnerElement", function (_ref) {
       var children = _ref.children,
         rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
-        "aria-label": _this.props.listboxAriaLabel,
-        id: _this.props.rootId('listbox'),
-        role: "listbox",
-        tabIndex: "0"
-      }), children);
+      return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, _this.getListInnerElementProps()), children);
     });
     (0, _defineProperty2.default)(_this, "ListRow", function (_ref2) {
       var _option$key;
@@ -98,7 +93,8 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         searchValue = _this$props.searchValue,
         rootId = _this$props.rootId,
         matchingOptions = _this$props.matchingOptions,
-        setListOptionRefs = _this$props.setListOptionRefs;
+        setListOptionRefs = _this$props.setListOptionRefs,
+        rowHeight = _this$props.rowHeight;
       var optionIndex = matchingOptions.indexOf(option);
       var hasTruncationProps = _this.props.truncationProps || _truncationProps;
       var truncationProps = hasTruncationProps ? // Individual truncation settings should override component prop
@@ -126,6 +122,7 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
+        truncateContent: rowHeight !== 'auto',
         id: rootId("_option-".concat(index)),
         title: label,
         "aria-setsize": matchingOptions.length,
@@ -140,8 +137,16 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         classNamePrefix: "euiComboBoxOption",
         marginSize: "s"
       }, (0, _react2.jsx)("span", {
-        className: "euiComboBoxOption__content"
-      }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : _this.renderTruncatedOption(label, truncationProps))), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
+        className: (0, _classnames.default)('euiComboBoxOption__content', rowHeight !== 'auto' && 'eui-textTruncate')
+      }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : rowHeight === 'auto' ? _this.renderVariableHeightOption(label) : _this.renderTruncatedOption(label, truncationProps))), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
+    });
+    (0, _defineProperty2.default)(_this, "getListInnerElementProps", function () {
+      return {
+        'aria-label': _this.props.listboxAriaLabel,
+        id: _this.props.rootId('listbox'),
+        role: 'listbox',
+        tabIndex: 0
+      };
     });
     (0, _defineProperty2.default)(_this, "optionWidth", void 0);
     (0, _defineProperty2.default)(_this, "setOptionWidth", function (width) {
@@ -174,22 +179,32 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         truncationPosition: searchPositionCenter,
         text: text
       }), function (text) {
-        return (0, _react2.jsx)(_react.default.Fragment, null, text.length >= searchValue.length ? (0, _react2.jsx)(_highlight.EuiHighlight, {
-          search: searchValue,
-          strict: _this.props.isCaseSensitive
-        }, text) :
-        // If the available truncated text is shorter than the full search string,
-        // just highlight the entire truncated text
-        (0, _react2.jsx)(_mark.EuiMark, null, text));
+        return _this.renderHighlightedOptionText(text, searchValue);
       });
     });
+    (0, _defineProperty2.default)(_this, "renderVariableHeightOption", function (text) {
+      var searchValue = _this.props.searchValue.trim();
+      if (!searchValue) {
+        return text;
+      }
+      return _this.renderHighlightedOptionText(text, searchValue);
+    });
+    (0, _defineProperty2.default)(_this, "renderHighlightedOptionText", function (text, searchValue) {
+      return (0, _react2.jsx)(_react.default.Fragment, null, text.length >= searchValue.length ? (0, _react2.jsx)(_highlight.EuiHighlight, {
+        search: searchValue,
+        strict: _this.props.isCaseSensitive
+      }, text) :
+      // If the available truncated text is shorter than the full search string,
+      // just highlight the entire truncated text
+      (0, _react2.jsx)(_mark.EuiMark, null, text));
+    });
     return _this;
   }
   (0, _inherits2.default)(EuiComboBoxOptionsList, _Component);
   return (0, _createClass2.default)(EuiComboBoxOptionsList, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (this.listRef && typeof this.props.activeOptionIndex !== 'undefined' && this.props.activeOptionIndex !== prevProps.activeOptionIndex) {
+      if (this.listRef && typeof this.props.activeOptionIndex !== 'undefined' && this.props.activeOptionIndex !== prevProps.activeOptionIndex && this.props.rowHeight !== 'auto') {
         this.listRef.scrollToItem(this.props.activeOptionIndex, 'auto');
       }
     }
@@ -316,15 +331,17 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
           default: "You've selected all available options"
         }));
       }
-      var numVisibleOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
-      var height = numVisibleOptions * (rowHeight + 1); // Add one for the border
-
-      // bounded by max-height of .euiComboBoxOptionsList
-      var boundedHeight = height > _combo_box_options_list.LIST_MAX_HEIGHT ? _combo_box_options_list.LIST_MAX_HEIGHT : height;
+      var boundedHeight = _combo_box_options_list.LIST_MAX_HEIGHT;
+      if (rowHeight !== 'auto') {
+        var numVisibleOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
+        var height = numVisibleOptions * (rowHeight + 1); // Add one for the border
+        // bounded by max-height of .euiComboBoxOptionsList
+        boundedHeight = height > _combo_box_options_list.LIST_MAX_HEIGHT ? _combo_box_options_list.LIST_MAX_HEIGHT : height;
+      }
       return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
         var styles = stylesMemoizer(_combo_box_options_list.euiComboBoxOptionListStyles);
         return (0, _react2.jsx)("div", (0, _extends2.default)({
-          css: styles.euiComboBoxOptionList,
+          css: [styles.euiComboBoxOptionList, rowHeight === 'auto' && styles.hasRowHeightAuto, ";label:render;"],
           className: "euiComboBoxOptionsList",
           "data-test-subj": (0, _classnames.default)('comboBoxOptionsList', dataTestSubj),
           ref: listRef
@@ -332,7 +349,15 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
           size: "xs",
           css: styles.euiComboBoxOptionsList__empty,
           className: "euiComboBoxOptionsList__empty"
-        }, emptyStateContent) : (0, _react2.jsx)(_reactWindow.FixedSizeList, {
+        }, emptyStateContent) : rowHeight === 'auto' ? (0, _react2.jsx)("div", _this2.getListInnerElementProps(), matchingOptions.map(function (_, index) {
+          return (0, _react2.jsx)(_this2.ListRow, {
+            data: matchingOptions,
+            index: index,
+            key: index // same as FixedSizeList's default
+            ,
+            style: {}
+          });
+        })) : (0, _react2.jsx)(_reactWindow.FixedSizeList, {
           css: styles.euiComboBoxOptionList__virtualization,
           className: "euiComboBoxOptionsList__virtualization",
           height: boundedHeight,

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

@@ -19,9 +19,13 @@ 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;", (0, _global_styling.euiTextTruncate)(), ";}.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;}.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 */
+    hasRowHeightAuto: /*#__PURE__*/(0, _react.css)("overflow-y:auto;.euiComboBoxOption__contentWrapper{align-items:flex-start;}", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:hasRowHeightAuto;"),
+    /* eslint-enable local/css-logical-properties */
+
     euiComboBoxOptionList__virtualization: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:euiComboBoxOptionList__virtualization;"),
     euiComboBoxOptionsList__empty: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";text-align:center;", (0, _global_styling.euiTextBreakWord)(), ";;label:euiComboBoxOptionsList__empty;")
   };

package/optimize/lib/components/datagrid/body/cell/focus_utils.js

@@ -15,6 +15,7 @@ var _services = require("../../../../services");
 var _utils = require("../../../../utils");
 var _focus_trap = require("../../../focus_trap");
 var _i18n = require("../../../i18n");
+var _accessibility = require("../../../accessibility");
 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; }
@@ -186,6 +187,13 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
     default: "Press the Enter key to interact with this cell's contents."
+  })), (0, _react2.jsx)(_accessibility.EuiLiveAnnouncer, {
+    clearAfterMs: 1000
+  }, isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
+  // eslint-disable-next-line local/i18n
+  , {
+    token: "euiDataGridCell.focusTrapEnteredExitPrompt",
+    default: "Press the Escape key to exit the cell."
   })));
 };
 
@@ -197,14 +205,14 @@ var disableInteractives = function disableInteractives(cell) {
   var interactives = (0, _tabbable.tabbable)(cell);
   interactives.forEach(function (element) {
     element.setAttribute('data-euigrid-tab-managed', 'true');
-    element.setAttribute('tabIndex', '-1');
+    element.setAttribute('tabindex', '-1');
   });
   return interactives;
 };
 var enableAndFocusInteractives = function enableAndFocusInteractives(cell) {
   var interactives = cell.querySelectorAll('[data-euigrid-tab-managed]');
   interactives.forEach(function (element, i) {
-    element.setAttribute('tabIndex', '0');
+    element.setAttribute('tabindex', '0');
     // focus the first element only if we're on the cell and not inside of it
     if (i === 0 && !cell.contains(document.activeElement)) {
       element.focus();

package/optimize/lib/components/datagrid/data_grid.styles.js

@@ -58,7 +58,7 @@ var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(e
   };
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColors.default);
   return {
-    euiDataGrid: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.logicalCSS)('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.components.dataGridRowBackground, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";}*:where(& .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowBackgroundSelect, ";}*:where(& .euiDataGridRow--marked){background-color:", euiTheme.components.dataGridRowBackgroundMarked, ";&:hover{background-color:", euiTheme.components.dataGridRowBackgroundMarkedHover, ";}.euiDataGridRowCell.euiDataGridRowCell{", outlineSelectors.marked, "{", (0, _data_grid_cell.euiDataGridCellOutlineStyles)(euiThemeContext).markedStyles, ";}}}*:where(\n          &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowBackgroundSelectHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow){background-color:", euiTheme.components.dataGridRowStripesBackground, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.components.dataGridRowStripesBackgroundStriped, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundHover, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--striped:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundStripedHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelect, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelectHover, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow)::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background-color:", euiTheme.components.dataGridRowBackground, ";};label:euiDataGrid;"),
+    euiDataGrid: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.logicalCSS)('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.components.dataGridRowBackground, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";}*:where(&:not(.euiDataGrid--stripes) .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowBackgroundSelect, ";}*:where(& .euiDataGridRow--marked){background-color:", euiTheme.components.dataGridRowBackgroundMarked, ";.euiDataGridRowCell.euiDataGridRowCell{", outlineSelectors.marked, "{", (0, _data_grid_cell.euiDataGridCellOutlineStyles)(euiThemeContext).markedStyles, ";}}}*:where(&:not(.euiDataGrid--stripes) .euiDataGridRow--marked){&:hover{background-color:", euiTheme.components.dataGridRowBackgroundMarkedHover, ";}}*:where(\n          &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowBackgroundSelectHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow){background-color:", euiTheme.components.dataGridRowStripesBackground, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.components.dataGridRowStripesBackgroundStriped, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundHover, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--striped:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundStripedHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelect, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--marked){background-color:", euiTheme.components.dataGridRowBackgroundMarked, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelectHover, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow)::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background-color:", euiTheme.components.dataGridRowBackground, ";};label:euiDataGrid;"),
     cellPadding: {
       cellPadding: function cellPadding(size) {
         return /*#__PURE__*/(0, _react.css)(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}.euiDataGridRowCell__content--lineCountHeight,.euiDataGridRowCell__content--autoBelowLineCountHeight{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {

package/optimize/lib/components/filter_group/filter_select_item.js

@@ -22,7 +22,7 @@ var _tool_tip = require("../tool_tip");
 var _icon = require("../icon");
 var _filter_select_item = require("./filter_select_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons", "toolTipContent", "toolTipProps", "style", "forwardRef"];
+var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons", "toolTipContent", "toolTipProps", "style", "truncateContent", "forwardRef"];
 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; }
@@ -95,6 +95,16 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
   }
   (0, _inherits2.default)(EuiFilterSelectItemClass, _Component);
   return (0, _createClass2.default)(EuiFilterSelectItemClass, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.isFocused && !prevProps.isFocused) {
+        var _this$buttonRef, _this$buttonRef$scrol;
+        (_this$buttonRef = this.buttonRef) === null || _this$buttonRef === void 0 || (_this$buttonRef$scrol = _this$buttonRef.scrollIntoView) === null || _this$buttonRef$scrol === void 0 || _this$buttonRef$scrol.call(_this$buttonRef, {
+          block: 'nearest'
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
@@ -108,6 +118,7 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
         toolTipContent = _this$props2.toolTipContent,
         toolTipProps = _this$props2.toolTipProps,
         style = _this$props2.style,
+        truncateContent = _this$props2.truncateContent,
         forwardRef = _this$props2.forwardRef,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var styles = (0, _filter_select_item.euiFilterSelectItemStyles)(theme);
@@ -156,7 +167,7 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
         component: "span",
         responsive: false
       }, iconNode, (0, _react2.jsx)(_flex.EuiFlexItem, {
-        className: "euiFilterSelectItem__content eui-textTruncate",
+        className: (0, _classnames.default)('euiFilterSelectItem__content', this.props.truncateContent && 'eui-textTruncate'),
         component: "span"
       }, children)));
       return hasToolTip ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
@@ -174,6 +185,7 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
  * @deprecated - Use EuiSelectable instead
  */
 (0, _defineProperty2.default)(EuiFilterSelectItemClass, "defaultProps", {
-  showIcons: true
+  showIcons: true,
+  truncateContent: true
 });
 var EuiFilterSelectItem = exports.EuiFilterSelectItem = (0, _services.withEuiTheme)(EuiFilterSelectItemClass);

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

@@ -76,7 +76,7 @@ var EuiFieldNumber = exports.EuiFieldNumber = function EuiFieldNumber(props) {
     if (_inputRef.current) {
       checkNativeValidity(_inputRef.current);
     }
-  }, [value, min, max, step, checkNativeValidity]);
+  }, [isInvalid, value, min, max, step, checkNativeValidity]);
   var classes = (0, _classnames.default)('euiFieldNumber', className, {
     'euiFieldNumber-isLoading': isLoading
   });

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

@@ -26,6 +26,7 @@ var euiFieldPasswordStyles = exports.euiFieldPasswordStyles = function euiFieldP
   return {
     euiFieldPassword: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
+    // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,

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

@@ -176,7 +176,7 @@ var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function
   var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var invalidColor = euiTheme.colors.danger;
-  return isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderInvalid, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderInvalidHovered, ";\n      --euiFormControlStateWidth: ").concat(highContrastMode === 'preferred' ? euiTheme.border.width.thick : euiTheme.border.width.thin, ";\n      \n      ").concat(euiFormControlHighlightBorderStyles, "\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ") : "\n      --euiFormControlStateColor: ".concat(invalidColor, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ");
+  return isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderInvalid, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderInvalidHovered, ";\n      --euiFormControlStateWidth: ").concat(highContrastMode === 'preferred' ? euiTheme.border.width.thick : euiTheme.border.width.thin, ";\n\n      ").concat(euiFormControlHighlightBorderStyles, "\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ") : "\n      --euiFormControlStateColor: ".concat(invalidColor, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
@@ -245,7 +245,7 @@ var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine
   }), ");\n      background-position: ").concat(euiTheme.border.width.thin, ";\n      background-image: url(\"").concat(refreshInlineSVG, "\");\n    ") : "\n    background-size: 100% ".concat(stateUnderlineHeight, ";\n    background-image: url(\"").concat(inlineSVG, "\");\n  ");
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
-  return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
+  return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
 };
 
 /**

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

@@ -77,7 +77,7 @@ var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeSty
   var appendStyles = "\n    position: relative;\n    ".concat((0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-inline-start: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
   var prependStyles = "\n    position: relative;\n    ".concat((0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      border-inline-end: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
   return {
-    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;line-height:1;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
+    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
     append: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          ".concat(isRefreshVariant && appendStyles, "\n        "),
       preferred: (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin)

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

@@ -64,7 +64,7 @@ var euiRangeVariables = exports.euiRangeVariables = function euiRangeVariables(e
   };
 };
 var euiRangeTrackPerBrowser = exports.euiRangeTrackPerBrowser = function euiRangeTrackPerBrowser(content) {
-  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n    &::-ms-fill-lower {").concat(content, "; }\n    &::-ms-fill-upper { ").concat(content, "; }\n  ");
+  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n  ");
 };
 var euiRangeThumbBorder = exports.euiRangeThumbBorder = function euiRangeThumbBorder(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
@@ -98,7 +98,7 @@ var euiRangeThumbStyle = exports.euiRangeThumbStyle = function euiRangeThumbStyl
   });
 };
 var euiRangeThumbPerBrowser = exports.euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
-  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n  ");
 };
 var euiRangeThumbFocus = exports.euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);

package/optimize/lib/components/icon/assets/thumbDown.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+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; }
+var EuiIconThumbDown = function EuiIconThumbDown(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M12 7h1v2h-1V7Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M7.8 14.22a1.135 1.135 0 0 1-1.89.437 3.221 3.221 0 0 1-.655-3.519l.484-1.132H3.001a2 2 0 0 1-1.977-2.308L1.74 3.12a2.5 2.5 0 0 1 2.47-2.114h2.988c.995 0 1.972.23 2.859.666a.999.999 0 0 1 .941-.666h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3a1 1 0 0 1-.943-.67A5.012 5.012 0 0 0 8.268 12.8L7.8 14.22Zm6.198-12.214h-3v8h3v-8ZM6.626 13.958c.07.073.193.044.225-.051l.467-1.42a6.012 6.012 0 0 1 2.68-3.309V2.78a5.472 5.472 0 0 0-2.8-.774H4.21a1.5 1.5 0 0 0-1.483 1.269l-.714 4.577A1 1 0 0 0 3 9.006h3.497a.5.5 0 0 1 .46.697l-.784 1.829a2.222 2.222 0 0 0 .452 2.426Z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = exports.icon = EuiIconThumbDown;

package/optimize/lib/components/icon/assets/thumbUp.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+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; }
+var EuiIconThumbUp = function EuiIconThumbUp(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M4 13H3v-2h1v2Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M8.197 1.787a1.135 1.135 0 0 1 1.89-.438 3.222 3.222 0 0 1 .656 3.519L10.26 6h2.738a2 2 0 0 1 1.977 2.308l-.716 4.578A2.5 2.5 0 0 1 11.788 15H8.803a6.457 6.457 0 0 1-2.86-.67A.999.999 0 0 1 5 15H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3a1 1 0 0 1 .943.67A5.012 5.012 0 0 0 7.73 3.206l.467-1.42ZM2 14h3V6H2v8ZM9.372 2.048a.135.135 0 0 0-.225.051L8.68 3.52A6.012 6.012 0 0 1 6 6.827v6.392c.846.507 1.813.78 2.803.78h2.985a1.5 1.5 0 0 0 1.482-1.269l.715-4.577A1 1 0 0 0 12.997 7H9.5a.5.5 0 0 1-.46-.697l.784-1.829a2.222 2.222 0 0 0-.452-2.426Z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = exports.icon = EuiIconThumbUp;

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

@@ -436,6 +436,8 @@ var typeToPathMap = exports.typeToPathMap = {
   tag: 'tag',
   tear: 'tear',
   temperature: 'temperature',
+  thumbDown: 'thumbDown',
+  thumbUp: 'thumbUp',
   timeline: 'timeline',
   timelineWithArrow: 'timelineWithArrow',
   timelionApp: 'app_timelion',

package/optimize/lib/components/icon/svgs/thumbDown.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 7.00037L12.9999 7.00037V9.00037L11.9999 9.00037V7.00037Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.80071 14.2191C7.53408 15.0278 6.50475 15.266 5.91008 14.6566C5.00031 13.7241 4.74169 12.3355 5.25481 11.1381L5.73918 10.0062H3.0009C1.77338 10.0062 0.835103 8.91041 1.02434 7.69763L1.74016 3.12048C1.93031 1.90355 2.97818 1.00623 4.20989 1.00623L7.19817 1.00623C8.19291 1.00623 9.17042 1.23623 10.0566 1.67224C10.1941 1.28431 10.5629 1.00623 10.998 1.00623L13.998 1.00623C14.5503 1.00623 14.998 1.45394 14.998 2.00623L14.998 10.0062C14.9978 10.5584 14.5502 11.0062 13.998 11.0062H10.998C10.5615 11.0062 10.1911 10.7261 10.0546 10.3363C9.22335 10.9492 8.59491 11.8072 8.2675 12.8002L7.80071 14.2191ZM13.998 2.00623L10.998 2.00623L10.998 10.0062H13.998L13.998 2.00623ZM6.6259 13.9584C6.69661 14.0306 6.81865 14.0025 6.85051 13.9066L7.31829 12.4877C7.77871 11.0911 8.73405 9.91584 9.99797 9.1781L9.99797 2.77966C9.15214 2.27594 8.18583 2.00623 7.19817 2.00623L4.20989 2.00623C3.47087 2.00623 2.84155 2.54462 2.72747 3.27478L2.01262 7.85193C1.91807 8.45828 2.38717 9.00623 3.0009 9.00623H6.49797C6.66598 9.00623 6.82243 9.09062 6.91497 9.23083C7.00736 9.37098 7.02387 9.54817 6.95793 9.70251L6.17375 11.5316C5.81986 12.3574 5.9985 13.3153 6.6259 13.9584Z" />
+</svg>

package/optimize/lib/components/icon/svgs/thumbUp.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 13.0007H3V11.0007H4V13.0007Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.19727 1.78682C8.46389 0.978178 9.49322 0.739976 10.0879 1.34932C10.9977 2.28184 11.2563 3.6704 10.7432 4.86788L10.2588 5.99971H12.9971C14.2246 5.99971 15.1629 7.09552 14.9736 8.3083L14.2578 12.8855C14.0677 14.1024 13.0198 14.9997 11.7881 14.9997H8.80273C7.80683 14.9997 6.82863 14.7687 5.94238 14.3308C5.80568 14.7202 5.43616 14.9997 5 14.9997H2C1.44772 14.9997 1 14.552 1 13.9997V5.99971C1.00013 5.44754 1.4478 4.99971 2 4.99971H5C5.43644 4.99971 5.80686 5.2798 5.94336 5.66963C6.77462 5.05676 7.40306 4.19871 7.73047 3.20577L8.19727 1.78682ZM2 13.9997H5V5.99971H2V13.9997ZM9.37207 2.04756C9.30136 1.97537 9.17932 2.00344 9.14746 2.09932L8.67969 3.51827C8.21927 4.91487 7.26392 6.0901 6 6.82784V13.2204C6.8459 13.7275 7.81328 13.9997 8.80273 13.9997H11.7881C12.5271 13.9997 13.1564 13.4613 13.2705 12.7312L13.9854 8.15401C14.0799 7.54766 13.6108 6.99971 12.9971 6.99971H9.5C9.33199 6.99971 9.17554 6.91532 9.08301 6.7751C8.99062 6.63496 8.97411 6.45776 9.04004 6.30342L9.82422 4.47432C10.1781 3.64852 9.99947 2.69065 9.37207 2.04756Z" />
+</svg>

package/optimize/lib/global_styling/mixins/_button.js

@@ -191,7 +191,7 @@ var euiButtonSizeMap = exports.euiButtonSizeMap = function euiButtonSizeMap(euiT
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),
       height: euiTheme.size.l,
       radius: euiTheme.border.radius.small,
-      fontScale: isRefreshVariant ? 's' : 'xs'
+      fontScale: 'xs'
     },
     s: {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),