@elastic/eui 91.3.1 → 92.0.0

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

@@ -13,10 +13,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
+var _resize_observer = require("../../observer/resize_observer");
 var _range_levels_colors = require("./range_levels_colors");
 var _range_slider = require("./range_slider.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor"];
+var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor", "onResize"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var EuiRangeSlider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var EuiRangeSlider = function EuiRangeSlider(_ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
     id = _ref.id,
@@ -43,6 +44,7 @@ var EuiRangeSlider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     showTicks = _ref.showTicks,
     showRange = _ref.showRange,
     thumbColor = _ref.thumbColor,
+    onResize = _ref.onResize,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiRangeSlider', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -54,22 +56,25 @@ var EuiRangeSlider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       color: thumbColor && (0, _range_levels_colors.euiRangeLevelColor)(thumbColor, euiTheme.euiTheme)
     }, style));
   }, [thumbColor, euiTheme, style]);
-  return (0, _react2.jsx)("input", (0, _extends2.default)({
-    ref: ref,
-    type: "range",
-    id: id,
-    name: name,
-    className: classes,
-    css: cssStyles,
-    min: min,
-    max: max,
-    step: step,
-    value: value,
-    disabled: disabled,
-    onChange: onChange,
-    style: sliderStyle,
-    tabIndex: tabIndex
-  }, rest));
-});
-exports.EuiRangeSlider = EuiRangeSlider;
-EuiRangeSlider.displayName = 'EuiRangeSlider';
+  return (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
+    onResize: onResize
+  }, function (resizeRef) {
+    return (0, _react2.jsx)("input", (0, _extends2.default)({
+      ref: resizeRef,
+      type: "range",
+      id: id,
+      name: name,
+      className: classes,
+      css: cssStyles,
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      disabled: disabled,
+      onChange: onChange,
+      style: sliderStyle,
+      tabIndex: tabIndex
+    }, rest));
+  });
+};
+exports.EuiRangeSlider = EuiRangeSlider;

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

@@ -1,19 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RESIZE = exports.EuiTextArea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _form_control_layout = require("../form_control_layout");
 var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inputRef", "isLoading", "isInvalid", "name", "placeholder", "resize", "rows"];
+var _excluded = ["children", "className", "compressed", "fullWidth", "id", "icon", "inputRef", "isLoading", "isInvalid", "isClearable", "name", "placeholder", "resize", "rows"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -21,6 +23,8 @@ var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inpu
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var resizeToClassNameMap = {
   vertical: 'euiTextArea--resizeVertical',
   horizontal: 'euiTextArea--resizeHorizontal',
@@ -38,9 +42,11 @@ var EuiTextArea = function EuiTextArea(props) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     id = props.id,
+    icon = props.icon,
     inputRef = props.inputRef,
     isLoading = props.isLoading,
     isInvalid = props.isInvalid,
+    isClearable = props.isClearable,
     name = props.name,
     placeholder = props.placeholder,
     _props$resize = props.resize,
@@ -59,10 +65,33 @@ var EuiTextArea = function EuiTextArea(props) {
   } else {
     definedRows = 6;
   }
+  var ref = (0, _react.useRef)(null);
+  var refs = (0, _services.useCombinedRefs)([ref, inputRef]);
+  var clear = (0, _react.useMemo)(function () {
+    if (isClearable) {
+      return {
+        onClick: function onClick() {
+          if (ref.current) {
+            ref.current.value = '';
+            var event = new Event('input', {
+              bubbles: true,
+              cancelable: false
+            });
+            ref.current.dispatchEvent(event);
+            ref.current.focus(); // set focus back to the textarea
+          }
+        },
+
+        'data-test-subj': 'clearTextAreaButton'
+      };
+    }
+  }, [isClearable]);
   return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    clear: clear,
+    icon: icon,
     className: "euiFormControlLayout--euiTextArea"
   }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
     isInvalid: isInvalid
@@ -72,7 +101,7 @@ var EuiTextArea = function EuiTextArea(props) {
     rows: definedRows,
     name: name,
     id: id,
-    ref: inputRef,
+    ref: refs,
     placeholder: placeholder
   }), children)));
 };

package/optimize/lib/components/index.js

@@ -223,17 +223,6 @@ Object.keys(_context_menu).forEach(function (key) {
     }
   });
 });
-var _control_bar = require("./control_bar");
-Object.keys(_control_bar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _control_bar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _control_bar[key];
-    }
-  });
-});
 var _copy = require("./copy");
 Object.keys(_copy).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -597,17 +586,6 @@ Object.keys(_mutation_observer).forEach(function (key) {
     }
   });
 });
-var _notification = require("./notification");
-Object.keys(_notification).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _notification[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _notification[key];
-    }
-  });
-});
 var _outside_click_detector = require("./outside_click_detector");
 Object.keys(_outside_click_detector).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/optimize/lib/components/markdown_editor/markdown_editor.js

@@ -266,20 +266,19 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     setEditorToolbarHeight(editorToolbarRef.current.offsetHeight);
   }, [setEditorToolbarHeight]);
   (0, _react.useEffect)(function () {
-    if (isPreviewing && autoExpandPreview && height !== 'full') {
-      if (previewRef.current.scrollHeight > currentHeight) {
-        // scrollHeight does not include the border or margin
-        // so we ask for the computed value for those,
-        // which is always in pixels because getComputedValue
-        // returns the resolved values
-        var elementComputedStyle = window.getComputedStyle(previewRef.current);
-        var borderWidth = parseFloat(elementComputedStyle.borderTopWidth) + parseFloat(elementComputedStyle.borderBottomWidth);
-        var marginWidth = parseFloat(elementComputedStyle.marginTop) + parseFloat(elementComputedStyle.marginBottom);
+    if (height === 'full' || currentHeight === 'full') return;
+    if (isPreviewing && autoExpandPreview && previewRef.current.scrollHeight > currentHeight) {
+      // scrollHeight does not include the border or margin
+      // so we ask for the computed value for those,
+      // which is always in pixels because getComputedValue
+      // returns the resolved values
+      var elementComputedStyle = window.getComputedStyle(previewRef.current);
+      var borderWidth = parseFloat(elementComputedStyle.borderTopWidth) + parseFloat(elementComputedStyle.borderBottomWidth);
+      var marginWidth = parseFloat(elementComputedStyle.marginTop) + parseFloat(elementComputedStyle.marginBottom);
 
-        // then add an extra pixel for safety and because the scrollHeight value is rounded
-        var extraHeight = borderWidth + marginWidth + 1;
-        setCurrentHeight(previewRef.current.scrollHeight + extraHeight);
-      }
+      // then add an extra pixel for safety and because the scrollHeight value is rounded
+      var extraHeight = borderWidth + marginWidth + 1;
+      setCurrentHeight(previewRef.current.scrollHeight + extraHeight);
     }
   }, [currentHeight, isPreviewing, height, autoExpandPreview]);
   var previewHeight = height === 'full' ? "calc(100% - ".concat(editorFooterHeight, "px)") : currentHeight;

package/optimize/lib/components/page_template/bottom_bar/page_bottom_bar.js

@@ -62,7 +62,7 @@ var _EuiPageBottomBar = function _EuiPageBottomBar(_ref2) {
     // Hide the overflow in case of larger flex margins than padding
     ,
     css: _ref
-    // Using unknown here because of the possible conflict with overriding props and position `sticky`
+    // Using object here because of the possible conflict with overriding props and position `sticky`
   }, rest), (0, _react.jsx)(_page_section.EuiPageSection, {
     paddingSize: paddingSize,
     restrictWidth: restrictWidth

package/optimize/lib/components/selectable/selectable_list/selectable_list_item.js

@@ -217,7 +217,7 @@ var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
           onFocusBadgeNode = (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
             className: "euiSelectableListItem__onFocusBadge"
           }, defaultOnFocusBadgeProps));
-        } else if (!!onFocusBadge && onFocusBadge !== false) {
+        } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
           var _children = onFocusBadge.children,
             _className = onFocusBadge.className,
             restBadgeProps = (0, _objectWithoutProperties2.default)(onFocusBadge, _excluded2);

package/optimize/lib/components/tree_view/tree_view.js

@@ -50,34 +50,12 @@ var displayToClassNameMap = {
 var EuiTreeView = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiTreeView, _Component);
   var _super = _createSuper(EuiTreeView);
-  function EuiTreeView() {
+  function EuiTreeView(props, context) {
     var _this;
     (0, _classCallCheck2.default)(this, EuiTreeView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props, context);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "treeIdGenerator", (0, _services.htmlIdGenerator)('euiTreeView'));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isNested", !!_this.context);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
-        var id = _ref.id,
-          children = _ref.children;
-        return children ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }) : _this.props.items.map(function (_ref2) {
-        var id = _ref2.id,
-          children = _ref2.children,
-          isExpanded = _ref2.isExpanded;
-        return children && isExpanded ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }),
-      activeItem: '',
-      treeID: getTreeId(_this.props.id, _this.context, _this.treeIdGenerator),
-      expandChildNodes: _this.props.expandByDefault || false
-    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isNested", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buttonRef", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setButtonRef", function (ref, index) {
       _this.buttonRef[index] = ref;
@@ -172,6 +150,26 @@ var EuiTreeView = /*#__PURE__*/function (_Component) {
         _this.buttonRef[index].focus();
       }
     });
+    _this.isNested = !!_this.context;
+    _this.state = {
+      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
+        var id = _ref.id,
+          children = _ref.children;
+        return children ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }) : _this.props.items.map(function (_ref2) {
+        var id = _ref2.id,
+          children = _ref2.children,
+          isExpanded = _ref2.isExpanded;
+        return children && isExpanded ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }),
+      activeItem: '',
+      treeID: getTreeId(_this.props.id, context, _this.treeIdGenerator),
+      expandChildNodes: _this.props.expandByDefault || false
+    };
     return _this;
   }
   (0, _createClass2.default)(EuiTreeView, [{

package/optimize/lib/utils/prop_types/is.js

@@ -18,7 +18,7 @@ var is = function is(expectedValue) {
     var compName = componentName || 'ANONYMOUS';
     var value = props[propName];
     if (value !== expectedValue) {
-      return new Error("[".concat(propName, "] property in [").concat(compName, "] component is expected to equal [").concat(expectedValue, "] but\n         [").concat(value, "] was provided instead."));
+      return new Error("[".concat(propName.toString(), "] property in [").concat(compName, "] component is expected to equal [").concat(expectedValue, "] but\n         [").concat(value, "] was provided instead."));
     }
     return null;
   };
@@ -26,7 +26,7 @@ var is = function is(expectedValue) {
     var compName = componentName || 'ANONYMOUS';
     var value = props[propName];
     if ((0, _predicate.isNil)(value)) {
-      return new Error("[".concat(propName, "] property in [").concat(compName, "] component is required but seems to be missing"));
+      return new Error("[".concat(propName.toString(), "] property in [").concat(compName, "] component is required but seems to be missing"));
     }
     return validator(props, propName, componentName);
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "91.3.1",
+  "version": "92.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -109,7 +109,7 @@
     "@cypress/react": "^7.0.3",
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^59.1.0",
+    "@elastic/charts": "^61.2.0",
     "@elastic/datemath": "^5.0.3",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",

package/src/components/index.scss

@@ -2,13 +2,11 @@
 
 @import 'color_picker/index';
 @import 'combo_box/index';
-@import 'control_bar/index';
 @import 'date_picker/index';
 @import 'datagrid/index';
 @import 'empty_prompt/index';
 @import 'form/index';
 @import 'markdown_editor/index';
-@import 'notification/index';
 @import 'tree_view/index';
 @import 'side_nav/index';
 @import 'search_bar/index';

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

@@ -431,7 +431,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         var sortDirection = _this2.resolveColumnSortDirection(column);
         items.push({
           name: column.name,
-          key: "_data_s_".concat(column.field, "_").concat(index),
+          key: "_data_s_".concat(String(column.field), "_").concat(index),
           onSort: _this2.resolveColumnOnSort(column),
           isSorted: !!sortDirection,
           isSortAscending: sortDirection ? _services.SortDirection.isAsc(sortDirection) : undefined
@@ -584,11 +584,11 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
           }
         }
         headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, (0, _extends2.default)({
-          key: "_data_h_".concat(field, "_").concat(index),
+          key: "_data_h_".concat(String(field), "_").concat(index),
           align: columnAlign,
           width: width,
           mobileOptions: mobileOptions,
-          "data-test-subj": "tableHeaderCell_".concat(field, "_").concat(index),
+          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index),
           description: description
         }, sorting), name));
       });
@@ -625,7 +625,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
         if (footer) {
           footers.push((0, _react2.jsx)(_table.EuiTableFooterCell, {
-            key: "footer_".concat(field, "_").concat(footers.length - 1),
+            key: "footer_".concat(String(field), "_").concat(footers.length - 1),
             align: align
           }, footer));
           hasDefinedFooter = true;
@@ -865,7 +865,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var field = column.field,
         render = column.render,
         dataType = column.dataType;
-      var key = "_data_column_".concat(field, "_").concat(itemId, "_").concat(columnIndex);
+      var key = "_data_column_".concat(String(field), "_").concat(itemId, "_").concat(columnIndex);
       var contentRenderer = render || this.getRendererForDataType(dataType);
       var value = (0, _objects.get)(item, field);
       var content = contentRenderer(value, item);

package/test-env/components/drag_and_drop/drag_and_drop.a11y.js

@@ -77,7 +77,7 @@ var DragAndDrop = function DragAndDrop() {
 beforeEach(function () {
   cy.realMount((0, _react2.jsx)(DragAndDrop, null));
 });
-describe('EuiControlBar', function () {
+describe('EuiDragDrop', function () {
   describe('Automated accessibility check', function () {
     it('has zero violations on render', function () {
       cy.checkAxe();

package/test-env/components/filter_group/filter_button.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFilterButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -66,6 +66,10 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
     'euiFilterButton-hasNotification': numFiltersDefined
   }, className);
+
+  /**
+   * Badge
+   */
   var showBadge = numFiltersDefined || numActiveFiltersDefined;
   var badgeCount = numActiveFilters || numFilters;
   var activeBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeActiveAriaLabel', '{count} active filters', {
@@ -74,9 +78,6 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
-  var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
-    'euiFilterButton__text-hasNotification': showBadge
-  }, textProps && textProps.className);
   var badgeContent = showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
     className: "euiFilterButton__notification",
     css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
@@ -84,18 +85,27 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
     role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
   }, badgeCount);
+
+  /**
+   * Text
+   */
+  var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
+    'euiFilterButton__text-hasNotification': showBadge
+  }, textProps && textProps.className);
+  var textCssStyles = [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css];
   var _useInnerText = (0, _inner_text.useInnerText)(),
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  var buttonContents = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+  var textContent = (0, _react2.jsx)("span", (0, _extends2.default)({
     ref: ref,
-    className: "euiFilterButton__textShift",
-    css: textStyles.euiFilterButton__textShift,
     "data-text": dataText,
     title: dataText
-  }, children), badgeContent);
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
   return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
@@ -104,14 +114,11 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     iconSide: iconSide,
     iconType: iconType,
     type: type,
-    textProps: _objectSpread(_objectSpread({}, textProps), {}, {
-      className: buttonTextClassNames,
-      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css]
-    }),
+    textProps: false,
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
-  }, rest), buttonContents);
+  }, rest), textContent, badgeContent);
 };
 exports.EuiFilterButton = EuiFilterButton;
 EuiFilterButton.propTypes = {

package/test-env/components/filter_group/filter_button.styles.js

@@ -14,8 +14,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return {
     flex: '1 1 auto',
     minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
@@ -24,7 +24,7 @@ var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
   };
 };
 exports.euiFilterButtonDisplay = euiFilterButtonDisplay;
-var _ref4 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "jkp921-noGrow",
   styles: "flex-grow:0;label:noGrow;"
 } : {
@@ -43,9 +43,9 @@ var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBoxShadow = "0 ".concat(euiTheme.border.width.thin, " 0 0 ").concat(borderColor);
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__textShift{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
     withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
-    noGrow: _ref4,
+    noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
@@ -69,27 +69,18 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:inherit;label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "f0jxzj-hasIcon",
-  styles: "justify-content:space-between;label:hasIcon;"
-} : {
-  name: "f0jxzj-hasIcon",
-  styles: "justify-content:space-between;label:hasIcon;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     content: {
       euiFilterButton__content: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__content;"),
-      hasIcon: _ref3
+      hasIcon: /*#__PURE__*/(0, _react.css)("&>.euiIcon:last-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
-      euiFilterButton__text: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__text;"),
-      hasNotification: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;gap:", euiTheme.size.s, ";;label:hasNotification;"),
-      euiFilterButton__textShift: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " ", (0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiFilterButton__text;"),
+      hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
         return x * 3;
-      })), ";;label:euiFilterButton__textShift;")
+      })), ";;label:hasNotification;")
     },
     notification: {
       euiFilterButton__notification: _ref2,