@elastic/eui 116.1.0 → 116.2.0-snapshot.1780495739173

package/optimize/es/components/table/sticky_scrollbar/sticky_scrollbar.styles.js

@@ -0,0 +1,27 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { transparentize } from '../../../services';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "j6fg69-wrapperHidden",
+  styles: "display:none;label:wrapperHidden;"
+} : {
+  name: "j6fg69-wrapperHidden",
+  styles: "display:none;label:wrapperHidden;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiTableStickyScrollbarStyles = function euiTableStickyScrollbarStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    wrapper: /*#__PURE__*/css("block-size:", euiTheme.size.base, ";padding:", euiTheme.size.xs, ";position:sticky;background:", euiTheme.components.scrollbarTrackColor, ";inset-block-end:var(--euiTableStickyScrollbarOffsetBottom, 0);z-index:var(--euiTableStickyScrollbarZIndex, 0);;label:wrapper;"),
+    wrapperHidden: _ref,
+    track: /*#__PURE__*/css("block-size:100%;background:", transparentize(euiTheme.colors.darkShade, 0.5), ";border-radius:", euiTheme.border.radius.small, ";;label:track;")
+  };
+};

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "compressed", "tableLayout", "hasBackground", "responsiveBreakpoint", "scrollableInline"];
+var _excluded = ["children", "className", "compressed", "tableLayout", "hasBackground", "responsiveBreakpoint", "scrollableInline", "stickyScrollbar"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,7 +9,7 @@ var _excluded = ["children", "className", "compressed", "tableLayout", "hasBackg
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { useIsEuiTableResponsive, EuiTableIsResponsiveContext } from './mobile/responsive_context';
@@ -18,6 +18,7 @@ import { euiTableStyles } from './table.styles';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { euiContainerCSS } from '../../global_styling';
 import { EUI_TABLE_CSS_CONTAINER_NAME } from './const';
+import { EuiTableStickyScrollbar } from './sticky_scrollbar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * EuiTable is a low-level building block component used to render tabular data
@@ -41,14 +42,18 @@ export var EuiTable = function EuiTable(originalProps) {
     responsiveBreakpoint = _usePropsWithComponen.responsiveBreakpoint,
     _usePropsWithComponen4 = _usePropsWithComponen.scrollableInline,
     scrollableInline = _usePropsWithComponen4 === void 0 ? false : _usePropsWithComponen4,
+    _usePropsWithComponen5 = _usePropsWithComponen.stickyScrollbar,
+    stickyScrollbar = _usePropsWithComponen5 === void 0 ? false : _usePropsWithComponen5,
     rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
+  var tableWrapperRef = useRef(null);
   var isResponsive = useIsEuiTableResponsive(responsiveBreakpoint);
   var classes = classNames('euiTable', className);
   var styles = useEuiMemoizedStyles(euiTableStyles);
   var tableStyles = [styles.euiTable, scrollableInline && styles.euiTableScrollableInline, styles.layout[tableLayout], (!compressed || isResponsive) && styles.uncompressed, compressed && !isResponsive && styles.compressed, hasBackground && styles.hasBackground, isResponsive ? styles.mobile : styles.desktop];
   var cssStyles = [euiContainerCSS('normal', EUI_TABLE_CSS_CONTAINER_NAME, true), scrollableInline && styles.scrollableWrapper];
-  return ___EmotionJSX("div", {
-    css: cssStyles
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    css: cssStyles,
+    ref: tableWrapperRef
   }, ___EmotionJSX("table", _extends({
     tabIndex: -1,
     css: tableStyles,
@@ -59,5 +64,7 @@ export var EuiTable = function EuiTable(originalProps) {
     value: {
       hasBackground: hasBackground
     }
-  }, children))));
+  }, children)))), scrollableInline && stickyScrollbar && ___EmotionJSX(EuiTableStickyScrollbar, {
+    tableWrapperRef: tableWrapperRef
+  }));
 };

package/optimize/es/components/text_truncate/text_truncate.js

@@ -16,6 +16,7 @@ import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import { EuiResizeObserver } from '../observer/resize_observer';
+import { EuiToolTip } from '../tool_tip';
 import { TruncationUtils } from './utils';
 import { euiTextTruncateStyles } from './text_truncate.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -128,11 +129,10 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
   var styles = useEuiMemoizedStyles(euiTextTruncateStyles);
-  return ___EmotionJSX("div", _extends({
+  var content = ___EmotionJSX("div", _extends({
     className: classNames('euiTextTruncate', className),
     css: styles.euiTextTruncate,
-    ref: refs,
-    title: isTruncating ? text : undefined
+    ref: refs
   }, rest), isTruncating ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
     className: "euiTextTruncate__truncatedText",
     css: styles.euiTextTruncate__truncatedText,
@@ -146,6 +146,11 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     className: "euiTextTruncate__fullText",
     "data-test-subj": "fullText"
   }, children ? children(text) : text));
+  return isTruncating ? ___EmotionJSX(EuiToolTip, {
+    content: text,
+    disableScreenReaderOutput: true,
+    display: "block"
+  }, content) : content;
 };
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,

package/optimize/es/components/tool_tip/tool_tip.js

@@ -1,7 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "display", "repositionOnScroll", "disableScreenReaderOutput", "position", "offset", "id", "onMouseOut", "onBlur"];
+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) { _defineProperty(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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,7 +26,7 @@ import { EuiToolTipArrow } from './tool_tip_arrow';
 import { toolTipManager } from './tool_tip_manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var POSITIONS = ['top', 'right', 'bottom', 'left'];
-var DISPLAYS = ['inlineBlock', 'block'];
+var DISPLAYS = ['inlineBlock', 'block', 'flex'];
 export var DEFAULT_TOOLTIP_OFFSET = 16;
 
 /**
@@ -75,20 +78,24 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setVisible = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasFocus = _useState4[0],
-    setHasFocus = _useState4[1];
-  var _useState5 = useState(positionProp),
+    skipAnimation = _useState4[0],
+    setSkipAnimation = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    calculatedPosition = _useState6[0],
-    setCalculatedPosition = _useState6[1];
-  var _useState7 = useState(DEFAULT_TOOLTIP_STYLES),
+    hasFocus = _useState6[0],
+    setHasFocus = _useState6[1];
+  var _useState7 = useState(positionProp),
     _useState8 = _slicedToArray(_useState7, 2),
-    toolTipStyles = _useState8[0],
-    setToolTipStyles = _useState8[1];
-  var _useState9 = useState(undefined),
+    calculatedPosition = _useState8[0],
+    setCalculatedPosition = _useState8[1];
+  var _useState9 = useState(DEFAULT_TOOLTIP_STYLES),
     _useState10 = _slicedToArray(_useState9, 2),
-    arrowStyles = _useState10[0],
-    setArrowStyles = _useState10[1];
+    toolTipStyles = _useState10[0],
+    setToolTipStyles = _useState10[1];
+  var _useState11 = useState(undefined),
+    _useState12 = _slicedToArray(_useState11, 2),
+    arrowStyles = _useState12[0],
+    setArrowStyles = _useState12[1];
   var generatedId = useRef(htmlIdGenerator()());
   var id = idProp !== null && idProp !== void 0 ? idProp : generatedId.current;
   var anchorRef = useRef(null);
@@ -142,10 +149,21 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setArrowStyles(undefined);
     toolTipManager.deregisterToolTip(hideToolTip);
   }, []);
+
+  /**
+   * Show the tooltip.
+   *
+   * If the tooltip is already visible, skip the state updates.
+   * If the tooltip is not visible, set the state to visible and
+   * set the skip animation to the value returned from the `toolTipManager`.
+   */
   var showToolTip = useCallback(function () {
     if (!content && !title) return;
+    if (toolTipManager.toolTipsToHide.has(hideToolTip)) return;
+    var _toolTipManager$regis = toolTipManager.registerTooltip(hideToolTip),
+      skip = _toolTipManager$regis.skipAnimation;
+    setSkipAnimation(skip);
     setVisible(true);
-    toolTipManager.registerTooltip(hideToolTip);
   }, [content, title, hideToolTip]);
   useImperativeHandle(ref, function () {
     return {
@@ -225,17 +243,17 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
       hideToolTip();
     }
   }, [disableScreenReaderOutput, visible, hideToolTip]);
-  var onMouseOut = useCallback(function (event) {
-    // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
-    // left the anchor for a non-child.
-    if (anchorRef.current === event.relatedTarget || anchorRef.current != null && !anchorRef.current.contains(event.relatedTarget)) {
-      if (!hasFocus) {
-        hideToolTip();
-      }
-    }
-    if (onMouseOutProp) {
-      onMouseOutProp(event);
-    }
+
+  /**
+   * Hide the tooltip if the mouse is not over the trigger.
+   *
+   * `mouseleave` doesn't bubble, so we don't need to filter out events
+   * fired by descendant children, only the cursor truly leaving the
+   * anchor triggers this.
+   */
+  var onMouseLeave = useCallback(function (event) {
+    if (!hasFocus) hideToolTip();
+    onMouseOutProp === null || onMouseOutProp === void 0 || onMouseOutProp(event);
   }, [hasFocus, hideToolTip, onMouseOutProp]);
   var classes = classNames('euiToolTip', className);
   var anchorClasses = classNames(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
@@ -244,8 +262,8 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onEscapeKey,
-    onMouseOver: showToolTip,
-    onMouseOut: onMouseOut
+    onMouseEnter: showToolTip,
+    onMouseLeave: onMouseLeave
     // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
     ,
     id: !disableScreenReaderOutput ? id : undefined,
@@ -254,7 +272,12 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isVisible: visible
   }), children), visible && (content || title) && ___EmotionJSX(EuiPortal, null, ___EmotionJSX(EuiToolTipPopover, _extends({
     className: classes,
-    style: toolTipStyles,
+    style: _objectSpread(_objectSpread({}, toolTipStyles), {}, {
+      // Inline `animation: none` overrides the keyframes fade-in
+      // shorthand on the base `.euiToolTip` class, so a tooltip
+      // shown right after another closes appears instantly.
+      animation: skipAnimation ? 'none' : undefined
+    }),
     positionToolTip: positionToolTip,
     popoverRef: setPopoverRef,
     title: title,

package/optimize/es/components/tool_tip/tool_tip.styles.js

@@ -43,6 +43,14 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1cjglks-flex",
+  styles: "display:flex;label:flex;"
+} : {
+  name: "1cjglks-flex",
+  styles: "display:flex;label:flex;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "fzilnk-inlineBlock",
   styles: "display:inline-block;label:inlineBlock;"
 } : {
@@ -50,7 +58,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "display:inline-block;label:inlineBlock;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "14aceuy-block",
   styles: "display:block;label:block;"
 } : {
@@ -58,7 +66,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "display:block;label:block;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1s3i3p5-euiToolTipAnchor",
   styles: "*[disabled]{pointer-events:none;};label:euiToolTipAnchor;"
 } : {
@@ -69,9 +77,10 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiToolTipAnchorStyles = function euiToolTipAnchorStyles() {
   return {
     // Elements
-    euiToolTipAnchor: _ref3,
+    euiToolTipAnchor: _ref4,
     // Variants
-    block: _ref2,
-    inlineBlock: _ref
+    block: _ref3,
+    inlineBlock: _ref2,
+    flex: _ref
   };
 };

package/optimize/es/components/tool_tip/tool_tip_anchor.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "className", "children", "display", "isVisible"];
+var _excluded = ["onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "id", "className", "children", "display", "isVisible"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,8 +17,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _onBlur = _ref.onBlur,
     _onFocus = _ref.onFocus,
-    onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     id = _ref.id,
     className = _ref.className,
     children = _ref.children,
@@ -42,8 +42,8 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       id: anchorId
     }, rest, {
       className: classes,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
     }), /*#__PURE__*/cloneElement(children, {
       onFocus: function onFocus(e) {
         _onFocus(e);

package/optimize/es/components/tool_tip/tool_tip_manager.js

@@ -8,29 +8,56 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 /**
  * Manager utility that ensures only one tooltip is visible at a time
+ * and lets the next tooltip to open skip its entry animation if another was
+ * just opened or just closed.
  *
  * UX rationale (primarily for mouse-only users):
  * @see https://github.com/elastic/kibana/issues/144482
  * @see https://github.com/elastic/eui/issues/5883
  */
+
+/**
+ * Time window in ms after a tooltip closes during which the next one to open
+ * skips its entry animation.
+ */
+var SKIP_ANIMATION_WINDOW = 300;
 var ToolTipManager = /*#__PURE__*/_createClass(function ToolTipManager() {
   var _this = this;
   _classCallCheck(this, ToolTipManager);
   // We use a set instead of a single var just in case
   // multiple tooltips are registered via async shenanigans
   _defineProperty(this, "toolTipsToHide", new Set());
+  // Timestamp of the last hide; `null` means no tooltip has closed yet.
+  _defineProperty(this, "lastHiddenAt", null);
   _defineProperty(this, "registerTooltip", function (hideCallback) {
-    if (_this.toolTipsToHide.has(hideCallback)) return;
+    if (_this.toolTipsToHide.has(hideCallback)) return {
+      skipAnimation: false
+    };
+    var hadOpen = _this.toolTipsToHide.size > 0;
+    var recentlyClosed = _this.lastHiddenAt !== null && Date.now() - _this.lastHiddenAt < SKIP_ANIMATION_WINDOW;
     _this.toolTipsToHide.forEach(function (hide) {
       return hide();
     });
     _this.toolTipsToHide.clear();
     _this.toolTipsToHide.add(hideCallback);
+    return {
+      skipAnimation: hadOpen || recentlyClosed
+    };
   });
   _defineProperty(this, "deregisterToolTip", function (hideCallback) {
-    _this.toolTipsToHide.delete(hideCallback);
+    if (_this.toolTipsToHide.delete(hideCallback)) _this.lastHiddenAt = Date.now();
+  });
+  /**
+   * Resets all internal state. Primarily intended for tests, so that a
+   * tooltip shown in one test doesn't leak into the next (the manager is a
+   * module-level singleton).
+   */
+  _defineProperty(this, "reset", function () {
+    _this.toolTipsToHide.clear();
+    _this.lastHiddenAt = null;
   });
 });
 export var toolTipManager = new ToolTipManager();

package/optimize/lib/components/avatar/avatar.js

@@ -16,6 +16,7 @@ var _contrast = require("../../services/color/contrast");
 var _color = require("../../services/color");
 var _services = require("../../services");
 var _icon = require("../icon");
+var _tool_tip = require("../tool_tip");
 var _avatar = require("./avatar.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"],
@@ -107,21 +108,28 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
     // Fall back to the adjusted text color if it exists
     return avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color;
   }, [iconColor, avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color, isForcedColors, euiTheme]);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  var avatarNode = (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
     style: _objectSpread(_objectSpread(_objectSpread({}, style), avatarStyle), highContrastBorder),
     "aria-label": isDisabled ? undefined : name,
-    role: isDisabled ? 'presentation' : 'img',
-    title: name
+    role: isDisabled ? 'presentation' : 'img'
   }, rest), !imageUrl && (iconType ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiAvatar__icon",
     size: iconSize || size,
     type: iconType,
-    color: iconCustomColor
+    color: iconCustomColor,
+    "aria-hidden": true
   }) : (0, _react2.jsx)("span", {
     "aria-hidden": "true"
   }, (0, _services.toInitials)(name, initialsLength, initials))));
+
+  // `EuiAvatar` is not interactive so we don't need to add a `tabIndex`.
+  // It already has `aria-label`, the tooltip is only visual.
+  return name ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: name,
+    disableScreenReaderOutput: true
+  }, avatarNode) : avatarNode;
 };
 
 // TODO: Migrate to a service

package/optimize/lib/components/banner/banner.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiBanner = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+var _i18n = require("../i18n");
+var _title = require("../title");
+var _button = require("../button");
+var _text = require("../text");
+var _accessibility = require("../accessibility");
+var _banner = require("./banner.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "headingElement", "text", "size", "color", "actionProps", "media", "onDismiss", "dismissButtonProps", "children", "className", "announceOnMount", "data-test-subj"];
+/*
+ * 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.
+ */
+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 EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var title = _ref.title,
+    _ref$headingElement = _ref.headingElement,
+    headingElement = _ref$headingElement === void 0 ? 'h2' : _ref$headingElement,
+    text = _ref.text,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'highlighted' : _ref$color,
+    actionProps = _ref.actionProps,
+    media = _ref.media,
+    onDismiss = _ref.onDismiss,
+    dismissButtonProps = _ref.dismissButtonProps,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$announceOnMount = _ref.announceOnMount,
+    announceOnMount = _ref$announceOnMount === void 0 ? false : _ref$announceOnMount,
+    _ref$dataTestSubj = _ref['data-test-subj'],
+    dataTestSubj = _ref$dataTestSubj === void 0 ? 'euiBanner' : _ref$dataTestSubj,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var styles = (0, _services.useEuiMemoizedStyles)(_banner.euiBannerStyles);
+  var dismissAriaLabel = (0, _i18n.useEuiI18n)('euiBanner.dismissAriaLabel', 'Dismiss "{title}" announcement', {
+    title: title
+  });
+  var Heading = headingElement;
+  var headingSize = size === 's' ? 'xxs' : 'xs';
+  var primaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary;
+  var secondaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary;
+  // a standalone secondary action is not supported
+  var hasActions = Boolean(primaryActionProps);
+  var componentClass = 'euiBanner';
+  var classes = (0, _classnames.default)(componentClass, className);
+  var backgroundColorStyles = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var cssStyles = [styles.euiBanner, backgroundColorStyles];
+  var containerCssStyles = [styles.container, onDismiss && styles.hasDismiss];
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: ref,
+    className: classes,
+    css: cssStyles,
+    "data-size": size,
+    "data-color": color,
+    "data-test-subj": dataTestSubj
+  }, rest), (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__container"),
+    css: containerCssStyles
+  }, media ? (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__media"),
+    css: styles.media,
+    "data-test-subj": "".concat(dataTestSubj, "-media")
+  }, media) : null, (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__body"),
+    css: styles.body
+  }, (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__content"),
+    css: styles.content
+  }, (0, _react2.jsx)(_title.EuiTitle, {
+    size: headingSize
+  }, (0, _react2.jsx)(Heading, {
+    css: styles.title,
+    "data-test-subj": "".concat(dataTestSubj, "-title")
+  }, title)), onDismiss ? (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
+    iconType: "cross",
+    color: "text",
+    "aria-label": dismissAriaLabel,
+    "data-test-subj": "".concat(dataTestSubj, "-dismiss")
+  }, dismissButtonProps, {
+    css: [styles.dismiss, dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.css, ";label:EuiBanner;"],
+    onClick: onDismiss
+  })) : null, text ? (0, _react2.jsx)(_text.EuiText, {
+    css: styles.text,
+    size: "s",
+    color: "subdued",
+    "data-test-subj": "".concat(dataTestSubj, "-text")
+  }, text) : null, children && children), hasActions ? (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__actions"),
+    css: styles.actions,
+    "data-test-subj": "".concat(dataTestSubj, "-actions")
+  }, primaryActionProps ? (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
+    "data-test-subj": "".concat(dataTestSubj, "-primaryAction")
+  }, primaryActionProps, {
+    color: "primary",
+    size: "s"
+  })) : null, secondaryActionProps ? (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    "data-test-subj": "".concat(dataTestSubj, "-secondaryAction")
+  }, secondaryActionProps, {
+    color: "primary",
+    size: "s"
+  })) : null) : null)), announceOnMount && (0, _react2.jsx)(_accessibility.EuiLiveAnnouncer, null, title && title, title && text && ",\xA0", text && text, (title || text) && children && ",\xA0", children && children));
+});
+EuiBanner.displayName = 'EuiBanner';

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBannerStyles = void 0;
+var _react = require("@emotion/react");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var CONTAINER_NAME = 'euiBanner';
+var CQC_LAYOUTS = ['narrow', 'wide'];
+var CQC_BREAKPOINTS = {
+  s: {
+    narrow: '(min-width: 401px)',
+    wide: '(min-width: 800px)'
+  },
+  m: {
+    narrow: '(min-width: 601px)',
+    wide: '(min-width: 1000px)'
+  }
+};
+var CQC_BREAKPOINT_NARROWEST = '(max-width: 400px)';
+
+/** Maximum reading width for `text` and `children` slots. */
+var TEXT_MAX_WIDTH = 1200;
+var withContainerQuery = function withContainerQuery(_ref2) {
+  var layout = _ref2.layout,
+    styles = _ref2.styles;
+  return Object.keys(CQC_BREAKPOINTS).map(function (sizeKey) {
+    return "\n        @container ".concat(CONTAINER_NAME, "--").concat(sizeKey, " ").concat(CQC_BREAKPOINTS[sizeKey][layout], " {\n          ").concat(styles, "\n        }\n      ");
+  }).join('\n');
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "qd171g-title",
+  styles: "[data-size='s'] &{display:inline;};label:title;"
+} : {
+  name: "qd171g-title",
+  styles: "[data-size='s'] &{display:inline;};label:title;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiBannerStyles = exports.euiBannerStyles = function euiBannerStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    euiBanner: /*#__PURE__*/(0, _react.css)("container-name:", CONTAINER_NAME, ";container-type:inline-size;position:relative;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";&[data-size='s']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--s;}&[data-size='m']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--m;};label:euiBanner;"),
+    container: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;gap:", euiTheme.size.m, ";padding-inline-start:", euiTheme.size.base, ";padding-inline-end:", euiTheme.size.base, ";[data-size='m'] &{padding-block:", euiTheme.size.base, ";}[data-size='s'] &{padding-block:", euiTheme.size.m, ";}", withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        flex-direction: row;\n        align-items: flex-start;\n        gap: ".concat(euiTheme.size.base, ";\n      ")
+    }), ";;label:container;"),
+    media: /*#__PURE__*/(0, _react.css)("--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 5)"), ";flex-shrink:0;inline-size:var(--euiBannerMediaSize);block-size:var(--euiBannerMediaSize);aspect-ratio:1/1;[data-size='s'] &{--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 2)"), ";}", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        align-self: center;\n      "
+    }), " img,svg{block-size:100%;inline-size:100%;};label:media;"),
+    body: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;align-self:flex-start;inline-size:100%;gap:", euiTheme.size.m, ";", withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        align-self: center;\n        inline-size: auto;\n      "
+    }), " ", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        flex-direction: row;\n        align-items: center;\n        /* stretch to match the media's height so align-items has space to work */\n        align-self: stretch;\n        justify-content: space-between;\n        gap: ".concat(euiTheme.size.xxl, ";\n      ")
+    }), ";;label:body;"),
+    // At size `s` the content slot becomes a block container so the title and
+    // text flow inline. Other sizes keep the flex column with a fixed gap.
+    content: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;max-inline-size:", TEXT_MAX_WIDTH, "px;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";[data-size='s'] &{display:block;>*+*:not(.euiButtonIcon){margin-block-start:", euiTheme.size.s, ";}};label:content;"),
+    title: _ref,
+    text: /*#__PURE__*/(0, _react.css)("[data-size='s'] &{display:inline;&::before{content:'\xB7';display:inline-block;inline-size:calc(", euiTheme.size.s, " + ", euiTheme.size.xxs, ");text-align:center;color:", euiTheme.colors.textHeading, ";}};label:text;"),
+    actions: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:", euiTheme.size.s, ";@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}}", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        /* Reverses source order so primary appears last (rightmost). */\n        flex-direction: row-reverse;\n        flex-shrink: 0;\n        align-self: center;\n      "
+    }), ";;label:actions;"),
+    hasDismiss: /*#__PURE__*/(0, _react.css)(withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        padding-inline-end: calc(".concat(euiTheme.size.s, " * 5);\n      ")
+    }), ";;label:hasDismiss;"),
+    dismiss: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";color:", euiTheme.colors.textSubdued, ";;label:dismiss;")
+  };
+};

package/optimize/lib/components/banner/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiBanner", {
+  enumerable: true,
+  get: function get() {
+    return _banner.EuiBanner;
+  }
+});
+var _banner = require("./banner");