@elastic/eui 116.5.0 → 117.0.0-snapshot.1783939453438

package/optimize/es/components/call_out/call_out.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "onDismiss", "dismissButtonProps", "announceOnMount"];
+var _excluded = ["title", "text", "color", "size", "iconType", "children", "actionProps", "className", "heading", "onDismiss", "dismissButtonProps", "announceOnMount", "style", "data-test-subj"];
+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
@@ -12,28 +14,43 @@ var _excluded = ["title", "color", "size", "iconType", "children", "className",
 
 import React, { forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+import { useCombinedRefs, useEuiMemoizedStyles, useEuiTheme } from '../../services';
+import { useEuiBorderColorCSS } from '../../global_styling';
 import { EuiIcon } from '../icon';
 import { EuiButtonIcon } from '../button';
 import { EuiText } from '../text';
 import { EuiPanel } from '../panel';
-import { EuiSpacer } from '../spacer';
 import { EuiTitle } from '../title';
 import { EuiI18n } from '../i18n';
 import { EuiLiveAnnouncer } from '../accessibility/live_announcer';
+import { EuiNotificationIcon } from '../notification_icon/notification_icon';
+import { useLayoutObserver } from './use_layout_observer';
+import { EuiCallOutAction } from './call_out_action';
 import { euiCallOutStyles, euiCallOutHeaderStyles } from './call_out.styles';
+import { euiNotificationIconStyles } from '../notification_icon/notification_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['primary', 'success', 'warning', 'danger', 'accent'];
-export var HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-export var SIZES = ['s', 'm'];
+export var COLOR_TO_NOTIFICATION_ICON_MAP = {
+  primary: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error'
+};
+
+/** Get correct color with fallback */
+var getCallOutColor = function getCallOutColor(color) {
+  return typeof color === 'string' && COLOR_TO_NOTIFICATION_ICON_MAP.hasOwnProperty(color) ? color : 'primary';
+};
 export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var title = _ref.title,
+    text = _ref.text,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _color = _ref$color === void 0 ? 'primary' : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     iconType = _ref.iconType,
     children = _ref.children,
+    actionProps = _ref.actionProps,
     className = _ref.className,
     _ref$heading = _ref.heading,
     heading = _ref$heading === void 0 ? 'p' : _ref$heading,
@@ -41,13 +58,36 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
     dismissButtonProps = _ref.dismissButtonProps,
     _ref$announceOnMount = _ref.announceOnMount,
     announceOnMount = _ref$announceOnMount === void 0 ? false : _ref$announceOnMount,
+    style = _ref.style,
+    dataTestSubj = _ref['data-test-subj'],
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var color = getCallOutColor(_color);
+
+  /* Uses resize observer to determine the container width/layout instead of native container queries,
+  because callouts can be placed in containers without defined size (absolute positioned, no-grow flex layout etc.)
+  where container queries would collapse by design instead of adjusting to the content dimensions. */
+  var layoutRef = useLayoutObserver(size);
+  // Memoize the refs array so `useCombinedRefs` returns a stable callback-ref across renders
+  var combinedRefs = useMemo(function () {
+    return [layoutRef, ref];
+  }, [layoutRef, ref]);
+  var panelRef = useCombinedRefs(combinedRefs);
+  var borderColors = useEuiBorderColorCSS();
   var styles = useEuiMemoizedStyles(euiCallOutStyles);
-  var cssStyles = [styles.euiCallOut, onDismiss && styles.hasDismissButton.hasDimissButton, onDismiss && styles.hasDismissButton[size]];
+  var cssStyles = [styles.euiCallOut, borderColors[color], onDismiss && styles.hasDismissButton];
+  var highlightColorToken = getTokenName('borderStrong', color);
+  var typeColor = euiTheme.colors[highlightColorToken];
+  var cssVariables = useMemo(function () {
+    return {
+      '--euiCallOutTypeColor': typeColor
+    };
+  }, [typeColor]);
   var classes = classNames('euiCallOut', _defineProperty({}, "euiCallOut--".concat(color), color), className);
   var dismissButton = useMemo(function () {
     if (!onDismiss) return;
-    var cssStyles = [styles.dismissButton.euiCallOut__dismissButton, styles.dismissButton[size]];
+    var cssStyles = [styles.dismissButton.euiCallOut__dismissButton];
     return ___EmotionJSX(EuiI18n, {
       token: "euiCallOut.dismissAriaLabel",
       default: "Dismiss this callout"
@@ -59,46 +99,101 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, dismissButtonProps, {
         iconType: "cross",
         color: color,
+        size: "xs",
         onClick: onDismiss
       }));
     });
-  }, [onDismiss, styles, color, size]);
+  }, [onDismiss, styles, color, dismissButtonProps]);
   var headerStyles = useEuiMemoizedStyles(euiCallOutHeaderStyles);
+  var iconStyles = useEuiMemoizedStyles(euiNotificationIconStyles);
   var header = useMemo(function () {
     if (!title) return;
     var H = heading;
-    var cssStyles = [headerStyles.euiCallOutHeader, headerStyles[color]];
+    var cssStyles = [headerStyles.euiCallOutHeader];
     return ___EmotionJSX(EuiTitle, {
       size: size === 's' ? 'xxs' : 'xs',
       css: cssStyles
     }, ___EmotionJSX(H, {
       className: "euiCallOutHeader__title"
-    }, iconType && ___EmotionJSX(EuiIcon, {
-      css: headerStyles.euiCallOut__icon,
+    }, title));
+  }, [title, heading, size, headerStyles]);
+  var icon = useMemo(function () {
+    if (!iconType) {
+      var _COLOR_TO_NOTIFICATIO;
+      var _iconType = (_COLOR_TO_NOTIFICATIO = COLOR_TO_NOTIFICATION_ICON_MAP[color]) !== null && _COLOR_TO_NOTIFICATIO !== void 0 ? _COLOR_TO_NOTIFICATIO : 'info';
+      return ___EmotionJSX(EuiNotificationIcon, {
+        css: styles.icon,
+        type: _iconType,
+        size: size === 's' ? 'm' : 'l'
+      });
+    }
+    return ___EmotionJSX(EuiIcon, {
+      css: [styles.icon, size === 'm' && iconStyles.size.l, ";label:icon;"],
       type: iconType,
-      size: "m",
+      size: size === 's' ? 'm' : 'l',
       "aria-hidden": "true",
-      color: "inherit"
-    }), title));
-  }, [title, heading, iconType, size, color, headerStyles]);
-  var optionalChildren = children && ___EmotionJSX(EuiText, {
+      color: typeColor
+    });
+  }, [iconType, color, size, typeColor, styles, iconStyles]);
+  var optionalChildren = (text || children) && ___EmotionJSX(React.Fragment, null, text && ___EmotionJSX(EuiText, {
+    size: "s",
+    color: "default",
+    className: "euiCallOut__text",
+    "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__message")
+  }, text), children && ___EmotionJSX(EuiText, {
+    className: "euiCallOut__additionalContent",
     size: size === 's' ? 'xs' : 's',
-    color: "default"
-  }, children);
+    color: "default",
+    "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__content")
+  }, children));
+  var actionControls = useMemo(function () {
+    var actionPrimaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary), {}, {
+      color: color
+    });
+    var actionSecondaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary), {}, {
+      color: color
+    });
+    var hasActionPrimary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary);
+    var hasActionSecondary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary);
+    if (!hasActionPrimary && !hasActionSecondary) return null;
+    var actionPrimary = hasActionPrimary && ___EmotionJSX(EuiCallOutAction, _extends({
+      actionType: "primary"
+    }, actionPrimaryProps));
+    var actionSecondary = hasActionSecondary && ___EmotionJSX(EuiCallOutAction, _extends({
+      actionType: "secondary"
+    }, actionSecondaryProps));
+    return ___EmotionJSX("div", {
+      css: styles.actions,
+      "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__actions")
+    }, actionPrimary, actionSecondary);
+  }, [actionProps, color, styles, dataTestSubj]);
+  var announcement = useMemo(function () {
+    if (!announceOnMount || !(title || text || children)) return null;
+    return ___EmotionJSX(EuiLiveAnnouncer, null, title, title && text && ",\xA0", text, (title || text) && children && ",\xA0", children);
+  }, [announceOnMount, title, text, children]);
   return ___EmotionJSX(EuiPanel, _extends({
     borderRadius: "none",
     color: color,
-    css: cssStyles,
-    paddingSize: size === 's' ? 's' : 'm',
+    css: cssStyles
+    // uses custom padding
+    ,
+    paddingSize: "none",
     className: classes,
-    panelRef: ref,
-    grow: false
-  }, rest),
+    panelRef: panelRef,
+    grow: false,
+    style: _objectSpread(_objectSpread({}, cssVariables), style),
+    "data-size": size,
+    "data-test-subj": dataTestSubj
+  }, rest), ___EmotionJSX("div", {
+    css: styles.wrapper
+  }, ___EmotionJSX("div", {
+    css: styles.body
+  }, icon, ___EmotionJSX("div", {
+    css: styles.content
+  },
   // Note: the DOM position of the dismiss button matters to screen reader users.
   // We generally want them to have some context of _what_ they're dismissing,
   // instead of navigating to the dismiss button first before the callout content
-  header && optionalChildren ? ___EmotionJSX(React.Fragment, null, header, dismissButton, ___EmotionJSX(EuiSpacer, {
-    size: "s"
-  }), optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton), announceOnMount && (title || children) && ___EmotionJSX(EuiLiveAnnouncer, null, title && "".concat(title, ", "), children));
+  header && optionalChildren ? ___EmotionJSX(React.Fragment, null, header, dismissButton, optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton))), actionControls, announcement));
 });
 EuiCallOut.displayName = 'EuiCallOut';

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

@@ -1,4 +1,3 @@
-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
@@ -8,53 +7,47 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../global_styling';
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "173v8a4-euiCallOut__dismissButton",
-  styles: "position:absolute;label:euiCallOut__dismissButton;"
-} : {
-  name: "173v8a4-euiCallOut__dismissButton",
-  styles: "position:absolute;label:euiCallOut__dismissButton;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "192kin0-euiCallOut",
-  styles: "position:relative;label:euiCallOut;"
-} : {
-  name: "192kin0-euiCallOut",
-  styles: "position:relative;label:euiCallOut;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiCallOutStyles = function euiCallOutStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+import { logicalCSS, logicalShorthandCSS, mathWithUnits, preventForcedColors } from '../../global_styling';
+/** Maximum reading width for `text` and `children` slots. */
+var TEXT_MAX_WIDTH = 1200;
+export var euiCallOutStyles = function euiCallOutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var paddingSizes = {
+    s: euiTheme.size.m,
+    m: euiTheme.size.base
+  };
+  var borderRadius = euiTheme.border.radius.small;
+  var highlightSize = mathWithUnits([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  });
+  var highlightOffset = euiTheme.border.width.thin;
+  var highlightSizeOffset = mathWithUnits([highlightOffset], function (x) {
+    return x * 2;
+  });
+  var separatorSize = mathWithUnits([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
+    return x + y;
+  });
   return {
-    euiCallOut: _ref2,
-    hasDismissButton: {
-      // Ensure that only the top-most (first-child) title or child text
-      // has a padding-right on it (to account for the dismiss button)
-      hasDimissButton: /*#__PURE__*/css("&>:first-child:is(.euiTitle),&>:first-child:is(.euiText)>:first-child{", logicalCSS('padding-right', euiTheme.size.base), ";};label:hasDimissButton;"),
-      // Ensure the callout always has enough height for the button
-      s: /*#__PURE__*/css(logicalCSS('min-height', euiTheme.size.xl), ";;label:s;"),
-      m: /*#__PURE__*/css(logicalCSS('min-height', euiTheme.size.xxl), ";;label:m;")
-    },
+    euiCallOut: /*#__PURE__*/css("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&::before{content:'';position:absolute;inset-block-start:-", euiTheme.border.width.thin, ";inset-inline-start:-", euiTheme.border.width.thin, ";block-size:calc(100% + ", highlightSizeOffset, ");border-inline-start:", highlightSize, " solid var(--euiCallOutTypeColor);border-start-start-radius:", borderRadius, ";border-end-start-radius:", borderRadius, ";pointer-events:none;", preventForcedColors(euiThemeContext), ";}&:where([data-size='s']){", logicalShorthandCSS('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
+    // handles content + actions layout
+    wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";}&:where([data-layout='wide'] &){flex-direction:row;gap:", euiTheme.size.xxl, ";};label:wrapper;"),
+    // handles icon + text layout
+    body: /*#__PURE__*/css("display:flex;flex-direction:row;align-self:center;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";};label:body;"),
+    // handles text layout
+    content: /*#__PURE__*/css("align-self:center;inline-size:100%;max-inline-size:", TEXT_MAX_WIDTH, "px;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";block-size:min-content;>.euiTitle{display:inline;", logicalCSS('margin-right', euiTheme.size.xxs), ";}>.euiCallOut__text{display:inline;*{display:inline;}&:where(:not(:first-child)){&::before{content:'\xB7';display:inline-block;inline-size:", separatorSize, ";text-align:center;color:", euiTheme.colors.textHeading, ";}}}.euiCallOut__additionalContent:not(:first-child){", logicalCSS('margin-top', euiTheme.size.xs), ";}}&:where([data-size='m'] &){display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";.euiCallOut__text+.euiCallOut__additionalContent{", logicalCSS('margin-top', euiTheme.size.s), ";}};label:content;"),
+    hasDismissButton: /*#__PURE__*/css("&:where([data-size]){padding-inline-end:", euiTheme.size.xxl, ";};label:hasDismissButton;"),
     dismissButton: {
-      euiCallOut__dismissButton: _ref,
-      s: /*#__PURE__*/css(logicalCSS('top', euiTheme.size.xs), " ", logicalCSS('right', euiTheme.size.xs), ";;label:s;"),
-      m: /*#__PURE__*/css(logicalCSS('top', euiTheme.size.s), " ", logicalCSS('right', euiTheme.size.s), ";;label:m;")
-    }
+      euiCallOut__dismissButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.s), " ", logicalCSS('right', euiTheme.size.s), ";;label:euiCallOut__dismissButton;")
+    },
+    icon: /*#__PURE__*/css("position:relative;", logicalCSS('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
+    actions: /*#__PURE__*/css("display:flex;gap:", euiTheme.size.s, ";&:where([data-size='s'] &){", logicalCSS('margin-left', euiTheme.size.l), ";}&:where([data-size='m'] &){", logicalCSS('margin-left', euiTheme.size.xl), ";}&:where([data-layout='superNarrow'] &){flex-wrap:wrap;*:has(.euiCallOutAction),.euiCallOutAction{inline-size:100%;}}&:where([data-layout='wide'] &){", logicalCSS('margin-left', '0'), " align-self:center;flex-shrink:0;flex-direction:row-reverse;};label:actions;")
   };
 };
-export var euiCallOutHeaderStyles = function euiCallOutHeaderStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiCallOutHeaderStyles = function euiCallOutHeaderStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
-    euiCallOutHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";", logicalCSS('margin-bottom', '0 !important'
+    euiCallOutHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('margin-bottom', '0 !important'
     // In case it's nested inside EuiText
-    ), ";;label:euiCallOutHeader;"),
-    primary: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
-    warning: /*#__PURE__*/css("color:", euiTheme.colors.textWarning, ";;label:warning;"),
-    danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
-    accent: /*#__PURE__*/css("color:", euiTheme.colors.textAccent, ";;label:accent;"),
-    euiCallOut__icon: /*#__PURE__*/css("position:relative;", logicalCSS('top', '-1px'), " ", logicalCSS('margin-right', euiTheme.size.s), ";;label:euiCallOut__icon;")
+    ), "&&{color:", euiTheme.colors.textHeading, ";};label:euiCallOutHeader;")
   };
 };

package/optimize/es/components/call_out/call_out_action.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "actionType", "color", "tooltipProps", "popoverProps", "className"];
+/*
+ * 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 React from 'react';
+import classNames from 'classnames';
+import { EuiButton, EuiButtonEmpty } from '../button';
+import { withEuiPopover } from '../popover/with_popover';
+import { withEuiToolTip } from '../tool_tip/with_tooltip';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCallOutAction = function EuiCallOutAction(_ref) {
+  var children = _ref.children,
+    _ref$actionType = _ref.actionType,
+    actionType = _ref$actionType === void 0 ? 'primary' : _ref$actionType,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    tooltipProps = _ref.tooltipProps,
+    popoverProps = _ref.popoverProps,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiCallOutAction', className);
+  if (actionType === 'primary') {
+    var button = ___EmotionJSX(EuiButton, _extends({
+      className: classes,
+      size: "s",
+      color: color
+    }, rest), children);
+    return withEuiPopover(withEuiToolTip(button, tooltipProps), popoverProps);
+  } else {
+    var _button = ___EmotionJSX(EuiButtonEmpty, _extends({
+      className: classes,
+      size: "s",
+      color: color
+    }, rest), children);
+    return withEuiPopover(withEuiToolTip(_button, tooltipProps), popoverProps);
+  }
+};

package/optimize/es/components/call_out/types.js

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export var COLORS = ['primary', 'success', 'warning', 'danger'];
+export var SIZES = ['s', 'm'];
+export var HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];

package/optimize/es/components/call_out/use_layout_observer.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * 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 { useEffect, useRef } from 'react';
+import { hasResizeObserver } from '../observer/resize_observer/resize_observer';
+var SUPER_NARROW_WIDTH = 400;
+var WIDE_BREAKPOINTS = {
+  s: 800,
+  m: 1000
+};
+
+/**
+ * Observes the rendered width and sets `data-layout` on the root
+ * element so that CSS can respond to size changes.
+ *
+ * This is an alternative to native CSS container queries. Its purpose is to handle cases where
+ * container queries would collapse if the element is placed inside a container without a defined size.
+ */
+export var useLayoutObserver = function useLayoutObserver(size) {
+  var elementRef = useRef(null);
+  useEffect(function () {
+    var element = elementRef.current;
+    if (!element || !hasResizeObserver) return;
+    var wide = WIDE_BREAKPOINTS[size];
+    var observer = new ResizeObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      var width = entry.borderBoxSize[0].inlineSize;
+      if (width <= SUPER_NARROW_WIDTH) {
+        element.setAttribute('data-layout', 'superNarrow');
+      } else if (width >= wide) {
+        element.setAttribute('data-layout', 'wide');
+      } else {
+        element.removeAttribute('data-layout');
+      }
+    });
+    observer.observe(element);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [size]);
+  return elementRef;
+};

package/optimize/es/components/flyout/flyout.component.js

@@ -18,7 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useEffect, useLayoutEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useEuiTheme, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
 import { useIsInManagedFlyout, useFlyoutId, useFlyoutManager } from './manager';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_MAIN, PROPERTY_LEVEL } from './manager/const';
 import { EuiFocusTrap } from '../focus_trap';
@@ -422,6 +422,8 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     flyoutZIndex = _useEuiFlyoutZIndex.flyoutZIndex,
     maskZIndex = _useEuiFlyoutZIndex.maskZIndex;
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
 
   /**
    * Inline styles position the flyout inside the reference container's
@@ -475,14 +477,17 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
         containerRelativeWidth = size;
       }
 
-      // All container-scoped flyouts get top/height from the container rect.
-      // Reset minInlineSize to 0 so that the CSS `min-inline-size` (which
-      // resolves against the viewport for `position: fixed`) does not
-      // prevent the container-relative width constraints from taking effect.
+      // Pixel-based min-widths for named sizes within containers
+      var containerMinWidthMap = {
+        s: Math.round(euiTheme.breakpoint.m * 0.42),
+        m: Math.round(euiTheme.breakpoint.m * 0.5)
+      };
+      var sizeMinWidth = typeof size === 'string' ? containerMinWidthMap[size] : undefined;
+      var containerMinInlineSize = sizeMinWidth !== undefined ? Math.min(sizeMinWidth, containerMaxWidth) : 0;
       containerPositionStyles = {
         top: containerRect.top,
         height: containerRect.height,
-        minInlineSize: 0
+        minInlineSize: containerMinInlineSize
       };
       if (isChildFlyout) {
         // Child flyouts position themselves relative to the main flyout.
@@ -528,7 +533,7 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
     return _objectSpread(_objectSpread(_objectSpread({}, style), composedStyles), containerPositionStyles);
-  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex, containerRect, side, isChildFlyout]);
+  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex, containerRect, side, isChildFlyout, euiTheme.breakpoint.m]);
   var styles = useEuiMemoizedStyles(euiFlyoutStyles);
   var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], !hasAnimation && styles.noAnimation, styles[side]];
   var classes = classnames('euiFlyout', isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground', className);

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

@@ -160,7 +160,7 @@ var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddin
       return x / 1.5;
     }), " ").concat(euiTheme.size.l, ";")
   };
-  return "\n    .euiFlyoutHeader {\n      ".concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat(logicalCSS('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat(logicalCSS('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutBody__banner .euiCallOut {\n      ").concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
+  return "\n    .euiFlyoutHeader {\n      ".concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat(logicalCSS('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat(logicalCSS('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
 };
 
 /**

package/optimize/es/components/flyout/flyout_body.styles.js

@@ -8,7 +8,6 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalCSSWithFallback, euiYScrollWithShadows } from '../../global_styling';
-import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiFlyoutBodyStyles = function euiFlyoutBodyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -20,8 +19,6 @@ export var euiFlyoutBodyStyles = function euiFlyoutBodyStyles(euiThemeContext) {
         side: 'end'
       }), ";;label:hasBanner;")
     },
-    euiFlyoutBody__banner: /*#__PURE__*/css(logicalCSSWithFallback('overflow-x', 'hidden'), " ", highContrastModeStyles(euiThemeContext, {
-      preferred: logicalCSS('border-bottom', euiTheme.border.thin)
-    }), ";;label:euiFlyoutBody__banner;")
+    euiFlyoutBody__banner: /*#__PURE__*/css("overflow:hidden;.euiCallOut{", logicalCSS('margin-top', "".concat(euiTheme.size.s)), " ", logicalCSS('margin-left', "".concat(euiTheme.size.l)), " ", logicalCSS('margin-right', "".concat(euiTheme.size.l)), ";}.euiFlyout:not(:has(.euiFlyoutHeader)) &{.euiCallOut{", logicalCSS('margin-right', "".concat(euiTheme.size.xxl)), ";}};label:euiFlyoutBody__banner;")
   };
 };

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

@@ -0,0 +1,42 @@
+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 EuiIconAddToChat = function EuiIconAddToChat(_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", {
+    fillRule: "evenodd",
+    d: "M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v1h-1V8h-1v1h-1V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7h6v1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM1 11h1V8H1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }), ___EmotionJSX("path", {
+    d: "M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }), ___EmotionJSX("path", {
+    d: "M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2Z"
+  }));
+};
+export var icon = EuiIconAddToChat;

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

@@ -13,6 +13,9 @@ export var typeToPathMap = {
   addDataApp: function addDataApp() {
     return import('./assets/app_add_data');
   },
+  addToChat: function addToChat() {
+    return import('./assets/add_to_chat');
+  },
   addToDashboard: function addToDashboard() {
     return import('./assets/add_to_dashboard');
   },

package/optimize/es/components/illustration/illustration.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["type", "alt", "className", "fullWidth"];
+/*
+ * 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 React from 'react';
+import classNames from 'classnames';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
+import { euiIllustrationStyles } from './illustration.styles';
+
+/**
+ * The data contract for an illustration asset (e.g. an export from `@elastic/eui-illustrations`).
+ * It is declared here so that `@elastic/eui` does not depend on the illustrations package.
+ * The illustrations package can be released independently as long as its assets satisfy this shape.
+ *
+ * @remarks
+ * The `light`/`dark` markup is inlined via `dangerouslySetInnerHTML`. Only pass
+ * trusted, package-authored SVGs — never untrusted or user-supplied markup, as
+ * it would be rendered as-is and could introduce an XSS vulnerability.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiIllustration = function EuiIllustration(_ref) {
+  var type = _ref.type,
+    alt = _ref.alt,
+    className = _ref.className,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    colorMode = _useEuiTheme.colorMode;
+  var styles = useEuiMemoizedStyles(euiIllustrationStyles);
+  var classes = classNames('euiIllustration', className);
+  var cssStyles = [styles.euiIllustration, fullWidth && styles.fullWidth];
+  var svg = colorMode === 'DARK' ? type.dark : type.light;
+  var isDecorative = alt === '';
+  var a11yProps = isDecorative ? {
+    'aria-hidden': true
+  } : {
+    role: 'img',
+    'aria-label': alt !== null && alt !== void 0 ? alt : type.title
+  };
+  return ___EmotionJSX("span", _extends({
+    className: classes,
+    css: cssStyles
+  }, a11yProps, rest, {
+    dangerouslySetInnerHTML: {
+      __html: svg
+    }
+  }));
+};
+EuiIllustration.displayName = 'EuiIllustration';