@elastic/eui 114.0.0 → 114.1.0

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/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
   };
 };

package/optimize/lib/components/flyout/manager/activity_stage.js

@@ -16,6 +16,24 @@ var _provider = require("./provider");
  * Side Public License, v 1.
  */
 
+/**
+ * Returns the final stage after an animation completes.
+ * OPENING/RETURNING -> ACTIVE; CLOSING -> INACTIVE; BACKGROUNDING -> BACKGROUNDED.
+ */
+var getNextStage = function getNextStage(stage) {
+  switch (stage) {
+    case _const.STAGE_OPENING:
+    case _const.STAGE_RETURNING:
+      return _const.STAGE_ACTIVE;
+    case _const.STAGE_CLOSING:
+      return _const.STAGE_INACTIVE;
+    case _const.STAGE_BACKGROUNDING:
+      return _const.STAGE_BACKGROUNDED;
+    default:
+      return null;
+  }
+};
+
 /**
  * Encapsulates all activity-stage transitions and animation-driven updates
  * for managed flyouts.
@@ -27,7 +45,9 @@ var _provider = require("./provider");
 var useFlyoutActivityStage = exports.useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
   var _sessions, _state$sessions$find, _state$layoutMode, _state$flyouts$find;
   var flyoutId = _ref.flyoutId,
-    level = _ref.level;
+    level = _ref.level,
+    _ref$shouldAnimate = _ref.shouldAnimate,
+    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate;
   var ctx = (0, _provider.useFlyoutManager)();
   var state = ctx === null || ctx === void 0 ? void 0 : ctx.state;
 
@@ -47,64 +67,46 @@ var useFlyoutActivityStage = exports.useFlyoutActivityStage = function useFlyout
   if (stageRef.current !== stage) {
     stageRef.current = stage;
   }
+  var transitionTo = (0, _react.useCallback)(function (nextStage) {
+    var _ctx$dispatch;
+    ctx === null || ctx === void 0 || (_ctx$dispatch = ctx.dispatch) === null || _ctx$dispatch === void 0 || _ctx$dispatch.call(ctx, (0, _actions.setActivityStage)(flyoutId, nextStage));
+    stageRef.current = nextStage;
+  }, [ctx, flyoutId]);
 
   /**
-   * 1. ACTIVE -> CLOSING when no longer the active flyout.
-   * 2. INACTIVE -> RETURNING when it becomes active again (e.g., reopened or brought forward).
-   * 3. (Main flyout only) ACTIVE + stacked + has child -> BACKGROUNDING (begin background animation).
-   * 4. (Main only) BACKGROUNDED/BACKGROUNDING + (child gone OR side-by-side) -> RETURNING (bring main to foreground).
-   *
-   * Any stages that depend on animation end (OPENING, RETURNING, CLOSING, BACKGROUNDING) are finalized in `onAnimationEnd`.
+   * 1. ACTIVE -> CLOSING (or INACTIVE when !shouldAnimate) when no longer the active flyout.
+   * 2. INACTIVE -> RETURNING (or ACTIVE when !shouldAnimate) when it becomes active again.
+   * 3. (Main only) ACTIVE + stacked + has child -> BACKGROUNDING (or BACKGROUNDED when !shouldAnimate).
+   * 4. (Main only) BACKGROUNDED/BACKGROUNDING + (child gone OR side-by-side) -> RETURNING (or ACTIVE when !shouldAnimate).
    */
   (0, _react.useEffect)(function () {
     var s = stageRef.current;
     var next = null;
-    if (s === _const.STAGE_ACTIVE && !isActive) next = _const.STAGE_CLOSING;else if (s === _const.STAGE_INACTIVE && isActive) {
-      next = _const.STAGE_RETURNING;
-    } else if (level === _const.LEVEL_MAIN && isActive && s === _const.STAGE_ACTIVE && hasChild && layoutMode === _const.LAYOUT_MODE_STACKED) next = _const.STAGE_BACKGROUNDING;else if (level === _const.LEVEL_MAIN && (s === _const.STAGE_BACKGROUNDED || s === _const.STAGE_BACKGROUNDING) && (!hasChild || layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE)) next = _const.STAGE_RETURNING;
-    if (next && next !== s) {
-      var _ctx$dispatch;
-      ctx === null || ctx === void 0 || (_ctx$dispatch = ctx.dispatch) === null || _ctx$dispatch === void 0 || _ctx$dispatch.call(ctx, (0, _actions.setActivityStage)(flyoutId, next));
-      stageRef.current = next;
+    if (s === _const.STAGE_ACTIVE && !isActive) {
+      next = shouldAnimate ? _const.STAGE_CLOSING : _const.STAGE_INACTIVE;
+    } else if (s === _const.STAGE_INACTIVE && isActive) {
+      next = shouldAnimate ? _const.STAGE_RETURNING : _const.STAGE_ACTIVE;
+    } else if (level === _const.LEVEL_MAIN && isActive && s === _const.STAGE_ACTIVE && hasChild && layoutMode === _const.LAYOUT_MODE_STACKED) {
+      next = shouldAnimate ? _const.STAGE_BACKGROUNDING : _const.STAGE_BACKGROUNDED;
+    } else if (level === _const.LEVEL_MAIN && (s === _const.STAGE_BACKGROUNDED || s === _const.STAGE_BACKGROUNDING) && (!hasChild || layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE)) {
+      next = shouldAnimate ? _const.STAGE_RETURNING : _const.STAGE_ACTIVE;
     }
-  }, [isActive, hasChild, layoutMode, level, ctx, flyoutId, stage]);
-
-  /**
-   * Get the stage to transition to for given current stage.
-   * Returns `null` if stage should remain unchanged.
-   *
-   * Stage transitions:
-   *  - OPENING / RETURNING -> ACTIVE
-   *  - CLOSING -> INACTIVE
-   *  - BACKGROUNDING -> BACKGROUNDED
-   */
-  var getNextStage = function getNextStage(stage) {
-    switch (stage) {
-      case _const.STAGE_OPENING:
-      case _const.STAGE_RETURNING:
-        return _const.STAGE_ACTIVE;
-      case _const.STAGE_CLOSING:
-        return _const.STAGE_INACTIVE;
-      case _const.STAGE_BACKGROUNDING:
-        return _const.STAGE_BACKGROUNDED;
+    if (next && next !== s) {
+      transitionTo(next);
     }
-    return null;
-  };
+  }, [isActive, hasChild, layoutMode, level, shouldAnimate, transitionTo, stage]);
 
   /**
-   * onAnimationEnd event handler that must be passed to EuiFlyout.
-   * It handles transitions between stages and updates activity stage
-   * in EuiFlyoutManagerContext.
+   * onAnimationEnd: browser signal when a CSS animation completes.
+   * Calls transitionTo to move to the final stage (e.g. CLOSING -> INACTIVE).
    */
   var onAnimationEnd = (0, _react.useCallback)(function () {
     var currentStage = stageRef.current;
     var nextStage = getNextStage(currentStage);
     if (nextStage && nextStage !== currentStage) {
-      var _ctx$dispatch2;
-      ctx === null || ctx === void 0 || (_ctx$dispatch2 = ctx.dispatch) === null || _ctx$dispatch2 === void 0 || _ctx$dispatch2.call(ctx, (0, _actions.setActivityStage)(flyoutId, nextStage));
-      stageRef.current = nextStage;
+      transitionTo(nextStage);
     }
-  }, [ctx, flyoutId]);
+  }, [transitionTo]);
   return {
     activityStage: stage,
     onAnimationEnd: onAnimationEnd

package/optimize/lib/components/flyout/manager/flyout_managed.js

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _reactDom = require("react-dom");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
@@ -25,24 +26,22 @@ var _hooks = require("./hooks");
 var _selectors = require("./selectors");
 var _store = require("./store");
 var _validation = require("./validation");
-var _react2 = require("@emotion/react");
 var _excluded = ["id", "onClose", "onActive", "level", "size", "minWidth", "historyKey", "css", "flyoutMenuProps"];
-/*
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
- */
-/**
+ */ /**
  * Props for `EuiManagedFlyout`, the internal persistent flyout used by
  * the manager. Extends base flyout props and requires a `level` to
  * distinguish `main` vs `child` behavior.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFlyoutManager = function useFlyoutManager() {
   var context = (0, _hooks.useFlyoutManager)();
   if (!context) {
@@ -58,18 +57,26 @@ var useFlyoutManager = function useFlyoutManager() {
  * - width tracking for responsive layouts
  * - lifecycle stage transitions and data attributes for styling
  */
-var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _managerSessions, _managerState$layoutM, _managerState$flyouts, _managerState$session, _managerState$flyouts2;
-  var id = _ref.id,
-    onCloseProp = _ref.onClose,
-    onActiveProp = _ref.onActive,
-    level = _ref.level,
-    sizeProp = _ref.size,
-    minWidth = _ref.minWidth,
-    historyKey = _ref.historyKey,
-    customCss = _ref.css,
-    _flyoutMenuProps = _ref.flyoutMenuProps,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1wrw3pf-EuiManagedFlyout",
+  styles: "animation-duration:0s!important;label:EuiManagedFlyout;"
+} : {
+  name: "1wrw3pf-EuiManagedFlyout",
+  styles: "animation-duration:0s!important;label:EuiManagedFlyout;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var _managerSessions, _managerState$layoutM, _managerState$flyouts, _managerState$session, _managerState$flyouts2, _managerSessions$leng, _session$childHistory, _session$childHistory2;
+  var id = _ref2.id,
+    onCloseProp = _ref2.onClose,
+    onActiveProp = _ref2.onActive,
+    level = _ref2.level,
+    sizeProp = _ref2.size,
+    minWidth = _ref2.minWidth,
+    historyKey = _ref2.historyKey,
+    customCss = _ref2.css,
+    _flyoutMenuProps = _ref2.flyoutMenuProps,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var flyoutId = (0, _hooks.useFlyoutId)(id);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -105,6 +112,9 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   var parentSize = session !== null && session !== void 0 && session.mainFlyoutId ? managerState === null || managerState === void 0 || (_managerState$flyouts2 = managerState.flyouts.find(function (f) {
     return f.flyoutId === session.mainFlyoutId;
   })) === null || _managerState$flyouts2 === void 0 ? void 0 : _managerState$flyouts2.size : undefined;
+
+  // Animate opening only for the first main flyout (sole session) or first child (no prior child in session).
+  var shouldAnimateOpening = level === _const.LEVEL_MAIN ? ((_managerSessions$leng = managerSessions === null || managerSessions === void 0 ? void 0 : managerSessions.length) !== null && _managerSessions$leng !== void 0 ? _managerSessions$leng : 0) <= 1 && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId : ((_session$childHistory = session === null || session === void 0 || (_session$childHistory2 = session.childHistory) === null || _session$childHistory2 === void 0 ? void 0 : _session$childHistory2.length) !== null && _session$childHistory !== void 0 ? _session$childHistory : 0) === 0;
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_managed.euiManagedFlyoutStyles);
 
   // Set default size based on level: main defaults to 'm', child defaults to 's'
@@ -241,7 +251,8 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   }, [flyoutId, level, isActive, width, setFlyoutWidth]);
   var _useFlyoutActivitySta = (0, _activity_stage.useFlyoutActivityStage)({
       flyoutId: flyoutId,
-      level: level
+      level: level,
+      shouldAnimate: false
     }),
     activityStage = _useFlyoutActivitySta.activityStage,
     onAnimationEnd = _useFlyoutActivitySta.onAnimationEnd;
@@ -272,7 +283,9 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   }, (0, _react2.jsx)(_flyout.EuiFlyoutComponent, (0, _extends2.default)({
     id: flyoutId,
     ref: combinedRef,
-    css: [styles.managedFlyout, customCss, styles.stage(activityStage, props.side, level), ";label:EuiManagedFlyout;"]
+    css: [styles.managedFlyout, customCss, styles.stage(activityStage, props.side, level),
+    // Suppress EuiFlyout's built-in opening animation for non-initial flyouts.
+    !shouldAnimateOpening && _ref, ";label:EuiManagedFlyout;"]
   }, _objectSpread(_objectSpread({}, props), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     onClose: onClose,
     size: size,

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

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiManagedFlyoutStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
 var _const = require("./const");
 var _const2 = require("../const");
-var _templateObject, _templateObject2;
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -37,16 +34,6 @@ var euiManagedFlyoutStyles = exports.euiManagedFlyoutStyles = function euiManage
     stage: function stage(activeStage) {
       var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _const2.DEFAULT_SIDE;
       var level = arguments.length > 2 ? arguments[2] : undefined;
-      // Animation for moving flyout backwards in 3D space (z-axis) when inactive
-      var euiFlyoutSlideBack3D = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        from {\n          transform: translateZ(0) translateX(0) scale(1);\n          filter: blur(0px);\n          opacity: 1;\n        }\n        to {\n          transform: translateZ(-1500px) translateX(", ") scale(0.5);\n          filter: blur(3px);\n          opacity: 0.6;\n        }\n      "])), side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)');
-
-      // Animation for bringing flyout forward from 3D space when transitioning to active
-      var euiFlyoutSlideForward3D = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        from {\n          transform: translateZ(-500px) translateX(", ") scale(0.85);\n          filter: blur(3px);\n          opacity: 0.6;\n        }\n        to {\n          transform: translateZ(0) translateX(0) scale(1);\n          filter: blur(0px);\n          opacity: 1;\n        }\n      "])), side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)');
-      // When flyout is becoming inactive, animate backwards in 3D space
-      var inactiveTransition = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideBack3D, " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.resistance, " forwards;pointer-events:none;};label:inactiveTransition;");
-
-      // When flyout is becoming active from a backgrounded state, animate forward in 3D space
-      var returningTransition = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideForward3D, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;};label:returningTransition;");
       var noTransition = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:none;opacity:1;};label:noTransition;");
       var activeFlyout = /*#__PURE__*/(0, _react.css)("z-index:", parseInt(euiTheme.levels.flyout) + 1, ";pointer-events:auto;;label:activeFlyout;");
       var inactiveFlyout = /*#__PURE__*/(0, _react.css)(side === 'left' ? (0, _global_styling.logicalCSS)('right', '100vw') : (0, _global_styling.logicalCSS)('left', '100vw'), " transform:translateX(", side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)', ");;label:inactiveFlyout;");
@@ -58,15 +45,15 @@ var euiManagedFlyoutStyles = exports.euiManagedFlyoutStyles = function euiManage
         case _const.STAGE_ACTIVE:
           return [activeFlyout, noTransition];
         case _const.STAGE_BACKGROUNDING:
-          return [inactiveTransition];
+          return [inactiveFlyout, noTransition];
         case _const.STAGE_BACKGROUNDED:
           return [inactiveFlyout, noTransition];
         case _const.STAGE_RETURNING:
-          return [activeFlyout, returningTransition];
+          return [activeFlyout, noTransition];
         case _const.STAGE_INACTIVE:
           return [inactiveFlyout, noTransition];
         case _const.STAGE_CLOSING:
-          return [inactiveTransition];
+          return [inactiveFlyout, noTransition];
       }
     },
     managedFlyout: _ref

package/optimize/lib/components/icon/assets/transition_bottom_in.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 EuiIconTransitionBottomIn = function EuiIconTransitionBottomIn(_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: "M7.5 9V5.207L5.854 6.854l-.708-.708L8 3.293l2.854 2.853-.707.708L8.5 5.207V9z"
+  }), (0, _react2.jsx)("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"
+  }));
+};
+var icon = exports.icon = EuiIconTransitionBottomIn;