@elastic/eui 113.3.0 → 114.1.0

package/optimize/es/components/flyout/manager/store.js

@@ -47,8 +47,15 @@ function createStore() {
     var _currentSession$child;
     var currentSessionIndex = currentState.sessions.length - 1;
     var currentSession = currentSessionIndex >= 0 ? currentState.sessions[currentSessionIndex] : null;
+    if (!currentSession) {
+      return [];
+    }
     var previousSessions = currentState.sessions.slice(0, currentSessionIndex);
-    var childHistory = (_currentSession$child = currentSession === null || currentSession === void 0 ? void 0 : currentSession.childHistory) !== null && _currentSession$child !== void 0 ? _currentSession$child : [];
+    // Only include sessions in the same history group (same historyKey reference)
+    var previousSessionsInGroup = previousSessions.filter(function (session) {
+      return session.historyKey === currentSession.historyKey;
+    });
+    var childHistory = (_currentSession$child = currentSession.childHistory) !== null && _currentSession$child !== void 0 ? _currentSession$child : [];
     var childItems = _toConsumableArray(childHistory).reverse().map(function (entry) {
       return {
         title: entry.title,
@@ -59,11 +66,11 @@ function createStore() {
       };
     });
 
-    // Previous sessions: list each session's current child then its child history (so all travelled entries appear)
+    // Previous sessions (same group): list each session's current child then its child history
     var previousSessionItems = [];
     var _loop = function _loop() {
       var _session$childHistory;
-      var session = previousSessions[i];
+      var session = previousSessionsInGroup[i];
       var mainTitle = session.title;
       var mainFlyoutId = session.mainFlyoutId;
       var history = (_session$childHistory = session.childHistory) !== null && _session$childHistory !== void 0 ? _session$childHistory : [];
@@ -101,7 +108,7 @@ function createStore() {
         });
       }
     };
-    for (var i = previousSessions.length - 1; i >= 0; i--) {
+    for (var i = previousSessionsInGroup.length - 1; i >= 0; i--) {
       _loop();
     }
     return [].concat(_toConsumableArray(childItems), previousSessionItems);
@@ -140,8 +147,8 @@ function createStore() {
     subscribe: subscribe,
     subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
-    addFlyout: function addFlyout(flyoutId, title, level, size, iconType, minWidth) {
-      return dispatch(addFlyoutAction(flyoutId, title, level, size, iconType, minWidth));
+    addFlyout: function addFlyout(flyoutId, title, level, size, historyKey, iconType, minWidth) {
+      return dispatch(addFlyoutAction(flyoutId, title, level, size, historyKey, iconType, minWidth));
     },
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch(closeFlyoutAction(flyoutId));

package/optimize/es/components/icon/assets/transition_bottom_in.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconTransitionBottomIn = function EuiIconTransitionBottomIn(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M7.5 9V5.207L5.854 6.854l-.708-.708L8 3.293l2.854 2.853-.707.708L8.5 5.207V9z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M2 15a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1zM14 2H2v8h12zm0 9.793V11h-.793l-3 3h1.586zM11.793 11h-1.586l-3 3h1.586zm-3 0H7.207l-3 3h1.586zm-3 0H4.207L2 13.207V14h.793zm-3 0H2v.793zM14 13.207l-.793.793H14z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconTransitionBottomIn;

package/optimize/es/components/icon/assets/transition_bottom_out.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconTransitionBottomOut = function EuiIconTransitionBottomOut(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M8.5 3.293v3.793l1.646-1.647.707.707L8 9 5.146 6.146l.708-.707L7.5 7.086V3.293z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M2 15a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1zM14 2H2v8h12zm0 9.793V11h-.793l-3 3h1.586zM11.793 11h-1.586l-3 3h1.586zm-3 0H7.207l-3 3h1.586zm-3 0H4.207L2 13.207V14h.793zm-3 0H2v.793zM14 13.207l-.793.793H14z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconTransitionBottomOut;

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

@@ -1843,6 +1843,12 @@ export var typeToPathMap = {
     return import('./assets/presentation');
   },
   // NOTE: To be deprecated in favor of presentation,
+  transitionBottomIn: function transitionBottomIn() {
+    return import('./assets/transition_bottom_in');
+  },
+  transitionBottomOut: function transitionBottomOut() {
+    return import('./assets/transition_bottom_out');
+  },
   transitionLeftIn: function transitionLeftIn() {
     return import('./assets/transition_left_in');
   },

package/optimize/es/components/markdown_editor/markdown_editor_help_button.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -33,7 +34,8 @@ var mdSyntaxLink = ___EmotionJSX(EuiLink, {
   default: "GitHub flavored markdown"
 }));
 export var EuiMarkdownEditorHelpButton = function EuiMarkdownEditorHelpButton(_ref) {
-  var uiPlugins = _ref.uiPlugins;
+  var uiPlugins = _ref.uiPlugins,
+    tooltipProps = _ref.tooltipProps;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShowingHelpModal = _useState2[0],
@@ -56,9 +58,9 @@ export var EuiMarkdownEditorHelpButton = function EuiMarkdownEditorHelpButton(_r
   });
   var hasUiPluginsWithHelpText = uiPluginsWithHelpText.length > 0;
   if (hasUiPluginsWithHelpText) {
-    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, {
+    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, _extends({}, tooltipProps, {
       content: syntaxTitle
-    }, ___EmotionJSX(EuiButtonIcon, {
+    }), ___EmotionJSX(EuiButtonIcon, {
       size: "s",
       css: styles.euiMarkdownEditorFooter__helpButton,
       className: "euiMarkdownEditorFooter__helpButton",

package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js

@@ -18,6 +18,7 @@ import markdown from 'remark-parse-no-trim';
 import emoji from 'remark-emoji';
 import breaks from 'remark-breaks';
 import highlight from '../remark/remark_prismjs';
+import intrawordUnderscore from '../remark/remark_intraword_underscore';
 import * as MarkdownTooltip from '../markdown_tooltip';
 import * as MarkdownCheckbox from '../markdown_checkbox';
 import { euiMarkdownLinkValidator, DEFAULT_OPTIONS as LINK_VALIDATOR_DEFAULTS } from '../markdown_link_validator';
@@ -34,7 +35,7 @@ export var getDefaultEuiMarkdownParsingPlugins = function getDefaultEuiMarkdownP
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var exclude = _ref.exclude,
     parsingConfig = _objectWithoutProperties(_ref, _excluded);
-  var parsingPlugins = [[markdown, {}], [highlight, {}]];
+  var parsingPlugins = [[markdown, {}], [highlight, {}], [intrawordUnderscore, {}]];
   Object.entries(DEFAULT_PARSING_PLUGINS).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       pluginName = _ref3[0],

package/optimize/es/components/markdown_editor/plugins/remark/remark_intraword_underscore.js

@@ -0,0 +1,172 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// Temporary workaround for https://github.com/elastic/eui/issues/9404
+// remark-parse v8 doesn't implement the CommonMark rule that underscore
+// emphasis delimiters flanked by alphanumerics on both sides (intraword)
+// cannot open or close emphasis. This causes identifiers like
+// `ABCD__PineappleCherry__e` to render with bold formatting.
+// This plugin walks the parsed AST and reverses incorrectly applied
+// emphasis/strong nodes when both sides are alphanumeric characters.
+
+// eslint-disable-next-line import/no-unresolved
+
+var isTextNode = function isTextNode(node) {
+  return node.type === 'text';
+};
+var isEmphasisOrStrong = function isEmphasisOrStrong(node) {
+  return node.type === 'emphasis' || node.type === 'strong';
+};
+var isAlphanumeric = function isAlphanumeric(ch) {
+  return /[a-zA-Z0-9]/.test(ch);
+};
+
+/**
+ * Recursively converts an emphasis/strong node back into plain text
+ * with underscore delimiters restored.
+ */
+function flattenToText(node) {
+  var delimiter = node.type === 'emphasis' ? '_' : '__';
+  var inner = '';
+  var _iterator = _createForOfIteratorHelper(node.children),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+      if (isTextNode(child)) {
+        inner += child.value;
+      } else if (isEmphasisOrStrong(child)) {
+        inner += flattenToText(child);
+      } else {
+        // Contains non-text children (links, images, etc.) — leave emphasis intact
+        return delimiter + collectText(node) + delimiter;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return delimiter + inner + delimiter;
+}
+function collectText(node) {
+  if (isTextNode(node)) return node.value;
+  if ('children' in node) {
+    return node.children.map(collectText).join('');
+  }
+  return '';
+}
+function processParent(parent, source) {
+  var modified = false;
+  var i = 0;
+  while (i < parent.children.length) {
+    var child = parent.children[i];
+    if (isEmphasisOrStrong(child) && isIntraword(parent, i, source)) {
+      var textValue = flattenToText(child);
+      var replacement = {
+        type: 'text',
+        value: textValue
+      };
+      parent.children.splice(i, 1, replacement);
+      modified = true;
+      // Don't advance — the replaced node may need to merge with neighbors
+    } else {
+      if ('children' in child) {
+        processParent(child, source);
+      }
+      i++;
+    }
+    if (modified) {
+      mergeAdjacentText(parent);
+      modified = false;
+      // After merging, restart scan since indices shifted
+      i = 0;
+    }
+  }
+}
+function getInnerText(node) {
+  if (isTextNode(node)) return node.value;
+  if ('children' in node) {
+    var children = node.children;
+    if (children.length > 0) return getInnerText(children[0]);
+  }
+  return '';
+}
+function getInnerTextEnd(node) {
+  if (isTextNode(node)) return node.value;
+  if ('children' in node) {
+    var children = node.children;
+    if (children.length > 0) return getInnerTextEnd(children[children.length - 1]);
+  }
+  return '';
+}
+
+/**
+ * Checks whether the emphasis/strong node at `index` within `parent`
+ * is an intraword usage of underscore delimiters.
+ *
+ * A node is intraword when at least one side has an alphanumeric text
+ * neighbor AND the inner content on the corresponding delimiter side
+ * also touches word characters — proving the underscores are embedded
+ * in a word rather than used as formatting.
+ */
+function isIntraword(parent, index, source) {
+  var _node$position;
+  var node = parent.children[index];
+
+  // Verify the delimiter is `_` (not `*`) by inspecting the source
+  if (((_node$position = node.position) === null || _node$position === void 0 || (_node$position = _node$position.start) === null || _node$position === void 0 ? void 0 : _node$position.offset) != null) {
+    var ch = source[node.position.start.offset];
+    if (ch !== '_') return false;
+  }
+  var prev = index > 0 ? parent.children[index - 1] : null;
+  var next = index < parent.children.length - 1 ? parent.children[index + 1] : null;
+  var prevChar = prev != null && isTextNode(prev) && prev.value.length > 0 ? prev.value[prev.value.length - 1] : null;
+  var nextChar = next != null && isTextNode(next) && next.value.length > 0 ? next.value[0] : null;
+  var prevIsAlpha = prevChar != null && isAlphanumeric(prevChar);
+  var nextIsAlpha = nextChar != null && isAlphanumeric(nextChar);
+
+  // Both sides flanked by alphanumeric — classic intraword (e.g. `foo__bar__baz`)
+  if (prevIsAlpha && nextIsAlpha) return true;
+
+  // One-sided: prev is alpha or underscore, no alpha next — check inner text
+  // starts with alpha (e.g. `Lorem__ipsum__` or `Lorem__ipsum_`)
+  if (prevIsAlpha || prevChar === '_') {
+    var inner = getInnerText(node);
+    if (inner.length > 0 && isAlphanumeric(inner[0])) return true;
+  }
+
+  // One-sided: next is alpha or underscore, no alpha prev — check inner text
+  // ends with alpha (e.g. `__Lorem__ipsum` or `_Lorem__ipsum`)
+  if (nextIsAlpha || nextChar === '_') {
+    var _inner = getInnerTextEnd(node);
+    if (_inner.length > 0 && isAlphanumeric(_inner[_inner.length - 1])) return true;
+  }
+  return false;
+}
+function mergeAdjacentText(parent) {
+  var i = 0;
+  while (i < parent.children.length - 1) {
+    if (isTextNode(parent.children[i]) && isTextNode(parent.children[i + 1])) {
+      parent.children[i].value += parent.children[i + 1].value;
+      parent.children.splice(i + 1, 1);
+    } else {
+      i++;
+    }
+  }
+}
+var attacher = function remarkIntrawordUnderscore() {
+  return function (tree, file) {
+    var source = String(file);
+    processParent(tree, source);
+  };
+};
+export default attacher;

package/optimize/es/components/overlay_mask/overlay_mask.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
+var _excluded = ["className", "children", "headerZindexLocation", "maskRef", "hasAnimation"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +25,8 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     _ref$headerZindexLoca = _ref.headerZindexLocation,
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
+    _ref$hasAnimation = _ref.hasAnimation,
+    hasAnimation = _ref$hasAnimation === void 0 ? true : _ref$hasAnimation,
     rest = _objectWithoutProperties(_ref, _excluded);
   var hasRendered = useRef(false);
   var _useState = useState(null),
@@ -36,7 +38,7 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     hasRendered.current = true;
   }, []);
   var styles = useEuiMemoizedStyles(euiOverlayMaskStyles);
-  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
+  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], (hasRendered.current || !hasAnimation) && styles.noAnimation]);
   useEffect(function () {
     if (!overlayMaskNode) return;
     keysOf(rest).forEach(function (key) {

package/optimize/es/components/search_bar/filters/field_value_toggle_filter.js

@@ -1,10 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -13,69 +6,53 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import { EuiFilterButton } from '../../filter_group';
 import { isNil } from '../../../services/predicate';
 import { Query } from '../query';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var FieldValueToggleFilter = /*#__PURE__*/function (_Component) {
-  function FieldValueToggleFilter() {
-    _classCallCheck(this, FieldValueToggleFilter);
-    return _callSuper(this, FieldValueToggleFilter, arguments);
-  }
-  _inherits(FieldValueToggleFilter, _Component);
-  return _createClass(FieldValueToggleFilter, [{
-    key: "resolveDisplay",
-    value: function resolveDisplay(clause) {
-      var _this$props$config = this.props.config,
-        name = _this$props$config.name,
-        negatedName = _this$props$config.negatedName;
-      if (isNil(clause)) {
-        return {
-          hasActiveFilters: false,
-          name: name
-        };
-      }
-      return Query.isMust(clause) ? {
-        hasActiveFilters: true,
+export var FieldValueToggleFilter = function FieldValueToggleFilter(props) {
+  var resolveDisplay = function resolveDisplay(clause) {
+    var _props$config = props.config,
+      name = _props$config.name,
+      negatedName = _props$config.negatedName;
+    if (isNil(clause)) {
+      return {
+        hasActiveFilters: false,
         name: name
-      } : {
-        hasActiveFilters: true,
-        name: negatedName ? negatedName : "Not ".concat(name)
       };
     }
-  }, {
-    key: "valueChanged",
-    value: function valueChanged(checked) {
-      var _this$props$config2 = this.props.config,
-        field = _this$props$config2.field,
-        value = _this$props$config2.value,
-        operator = _this$props$config2.operator;
-      var query = checked ? this.props.query.removeSimpleFieldValue(field, value) : this.props.query.addSimpleFieldValue(field, value, true, operator);
-      this.props.onChange(query);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-      var _this$props = this.props,
-        query = _this$props.query,
-        config = _this$props.config;
-      var clause = query.getSimpleFieldClause(config.field, config.value);
-      var checked = !isNil(clause);
-      var _this$resolveDisplay = this.resolveDisplay(clause),
-        hasActiveFilters = _this$resolveDisplay.hasActiveFilters,
-        name = _this$resolveDisplay.name;
-      var onClick = function onClick() {
-        _this.valueChanged(checked);
-      };
-      return ___EmotionJSX(EuiFilterButton, {
-        onClick: onClick,
-        isSelected: hasActiveFilters,
-        hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters,
-        isToggle: true
-      }, name);
-    }
-  }]);
-}(Component);
+    return Query.isMust(clause) ? {
+      hasActiveFilters: true,
+      name: name
+    } : {
+      hasActiveFilters: true,
+      name: negatedName ? negatedName : "Not ".concat(name)
+    };
+  };
+  var valueChanged = function valueChanged(checked) {
+    var _props$config2 = props.config,
+      field = _props$config2.field,
+      value = _props$config2.value,
+      operator = _props$config2.operator;
+    var query = checked ? props.query.removeSimpleFieldValue(field, value) : props.query.addSimpleFieldValue(field, value, true, operator);
+    props.onChange(query);
+  };
+  var query = props.query,
+    config = props.config;
+  var clause = query.getSimpleFieldClause(config.field, config.value);
+  var checked = !isNil(clause);
+  var _resolveDisplay = resolveDisplay(clause),
+    hasActiveFilters = _resolveDisplay.hasActiveFilters,
+    name = _resolveDisplay.name;
+  var onClick = function onClick() {
+    valueChanged(checked);
+  };
+  return ___EmotionJSX(EuiFilterButton, {
+    onClick: onClick,
+    isSelected: hasActiveFilters,
+    hasActiveFilters: hasActiveFilters,
+    "aria-pressed": !!hasActiveFilters,
+    isToggle: true
+  }, name);
+};

package/optimize/es/components/search_bar/search_filters.js

@@ -1,11 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,39 +6,25 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { createFilter } from './filters';
 import { EuiFilterGroup } from '../filter_group';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiSearchBarFilters = /*#__PURE__*/function (_Component) {
-  function EuiSearchBarFilters() {
-    _classCallCheck(this, EuiSearchBarFilters);
-    return _callSuper(this, EuiSearchBarFilters, arguments);
-  }
-  _inherits(EuiSearchBarFilters, _Component);
-  return _createClass(EuiSearchBarFilters, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        _this$props$filters = _this$props.filters,
-        filters = _this$props$filters === void 0 ? [] : _this$props$filters,
-        query = _this$props.query,
-        onChange = _this$props.onChange;
-      var items = [];
-      filters.forEach(function (filterConfig, index) {
-        if (filterConfig.available && !filterConfig.available()) {
-          return;
-        }
-        var key = "filter_".concat(index);
-        var control = createFilter(index, filterConfig, query, onChange);
-        items.push(___EmotionJSX(Fragment, {
-          key: key
-        }, control));
-      });
-      return ___EmotionJSX(EuiFilterGroup, null, items);
+export var EuiSearchBarFilters = function EuiSearchBarFilters(_ref) {
+  var _ref$filters = _ref.filters,
+    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    query = _ref.query,
+    onChange = _ref.onChange;
+  var items = filters.reduce(function (acc, filterConfig, index) {
+    if (filterConfig.available && !filterConfig.available()) {
+      return acc;
     }
-  }]);
-}(Component);
-_defineProperty(EuiSearchBarFilters, "defaultProps", {
-  filters: []
-});
+    var key = "filter_".concat(index);
+    var control = createFilter(index, filterConfig, query, onChange);
+    acc.push(___EmotionJSX(Fragment, {
+      key: key
+    }, control));
+    return acc;
+  }, []);
+  return ___EmotionJSX(EuiFilterGroup, null, items);
+};

package/optimize/es/components/table/mobile/table_header_mobile.js

@@ -23,7 +23,7 @@ export var EuiTableHeaderMobile = function EuiTableHeaderMobile(_ref) {
     responsiveBreakpointProp = _ref.responsiveBreakpoint,
     rest = _objectWithoutProperties(_ref, _excluded);
   var responsiveBreakpointDefault = (_useComponentDefaults = useComponentDefaults().EuiTable) === null || _useComponentDefaults === void 0 ? void 0 : _useComponentDefaults.responsiveBreakpoint;
-  var responsiveBreakpoint = responsiveBreakpointProp || responsiveBreakpointDefault;
+  var responsiveBreakpoint = responsiveBreakpointProp !== null && responsiveBreakpointProp !== void 0 ? responsiveBreakpointProp : responsiveBreakpointDefault;
   var isResponsive = useIsEuiTableResponsive(responsiveBreakpoint);
   var styles = useEuiMemoizedStyles(euiTableHeaderMobileStyles);
   var classes = classNames('euiTableHeaderMobile', className);

package/optimize/es/components/table/utils.js

@@ -20,6 +20,11 @@ export var WARNING_MESSAGE_MIN_WIDTH = 'Two `minWidth` properties were provided.
  * @internal
  */
 export var WARNING_MESSAGE_MAX_WIDTH = 'Two `maxWidth` properties were provided. Provide only one of `style.maxWidth` or `maxWidth` to avoid conflicts.';
+
+/**
+ * @internal
+ */
+export var WARNING_MESSAGE_NOT_RECOMMENDED_UNIT = 'Detected not recommended unit (%, vw, cqw, cqi) in cell width settings. Adjust the `width`, `minWidth` and `maxWidth` values to use absolute length units like `em` for text cells or `px` for static elements like icons or plots.';
 var normalizeValue = function normalizeValue(value) {
   if (value === undefined || Number.isNaN(value)) {
     return undefined;
@@ -29,6 +34,13 @@ var normalizeValue = function normalizeValue(value) {
   }
   return value;
 };
+var UNIT_VALIDATOR_REGEX = /%|vw|cqw|cqi/;
+var shouldWarnAboutNotRecommendedUnit = function shouldWarnAboutNotRecommendedUnit(value) {
+  if (typeof value === 'string') {
+    return UNIT_VALIDATOR_REGEX.test(value);
+  }
+  return false;
+};
 
 /**
  * @internal
@@ -39,23 +51,31 @@ export var resolveWidthPropsAsStyle = function resolveWidthPropsAsStyle() {
     rawWidth = _ref.width,
     rawMinWidth = _ref.minWidth,
     rawMaxWidth = _ref.maxWidth;
-  var width = normalizeValue(rawWidth);
-  var minWidth = normalizeValue(rawMinWidth);
-  var maxWidth = normalizeValue(rawMaxWidth);
+  var widthProp = normalizeValue(rawWidth);
+  var minWidthProp = normalizeValue(rawMinWidth);
+  var maxWidthProp = normalizeValue(rawMaxWidth);
+  var width = widthProp !== null && widthProp !== void 0 ? widthProp : style.width;
+  var minWidth = minWidthProp !== null && minWidthProp !== void 0 ? minWidthProp : style.minWidth;
+  var maxWidth = maxWidthProp !== null && maxWidthProp !== void 0 ? maxWidthProp : style.maxWidth;
+
+  // Value validation block
   if (process.env.NODE_ENV !== 'production') {
-    if (style.width && width !== undefined) {
+    if (style.width && widthProp !== undefined) {
       console.warn(WARNING_MESSAGE_WIDTH);
     }
-    if (style.minWidth && minWidth !== undefined) {
+    if (style.minWidth && minWidthProp !== undefined) {
       console.warn(WARNING_MESSAGE_MIN_WIDTH);
     }
-    if (style.maxWidth && maxWidth !== undefined) {
+    if (style.maxWidth && maxWidthProp !== undefined) {
       console.warn(WARNING_MESSAGE_MAX_WIDTH);
     }
+    if (shouldWarnAboutNotRecommendedUnit(width) || shouldWarnAboutNotRecommendedUnit(minWidth) || shouldWarnAboutNotRecommendedUnit(maxWidth)) {
+      console.warn(WARNING_MESSAGE_NOT_RECOMMENDED_UNIT);
+    }
   }
   return {
-    width: width || style.width,
-    minWidth: minWidth || style.minWidth,
-    maxWidth: maxWidth || style.maxWidth
+    width: width,
+    minWidth: minWidth,
+    maxWidth: maxWidth
   };
 };