@elastic/eui 116.3.1 → 116.5.0

package/optimize/es/components/toast/toast.js

@@ -1,6 +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", "iconType", "onClose", "children", "className"];
+var _excluded = ["title", "text", "color", "iconType", "children", "className", "actionProps", "style", "onClose", "animationMs"];
+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
@@ -9,68 +12,161 @@ var _excluded = ["title", "color", "iconType", "onClose", "children", "className
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
 import { EuiText } from '../text';
 import { euiToastStyles, euiToastHeaderStyles } from './toast.styles';
+import { EuiNotificationIcon } from '../notification_icon/notification_icon';
+import { euiNotificationIconStyles } from '../notification_icon/notification_icon.styles';
+import { EuiToastAction } from './toast_action';
+import { EuiTitle } from '../title';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['primary', 'success', 'warning', 'danger'];
+export var COLOR_TO_NOTIFICATION_ICON_MAP = {
+  primary: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error'
+};
 export var EuiToast = function EuiToast(_ref) {
   var title = _ref.title,
-    color = _ref.color,
+    text = _ref.text,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
     iconType = _ref.iconType,
-    onClose = _ref.onClose,
     children = _ref.children,
     className = _ref.className,
+    actionProps = _ref.actionProps,
+    style = _ref.style,
+    onClose = _ref.onClose,
+    animationMs = _ref.animationMs,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var baseStyles = useEuiMemoizedStyles(euiToastStyles);
-  var baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var styles = useEuiMemoizedStyles(euiToastStyles);
+  var iconStyles = useEuiMemoizedStyles(euiNotificationIconStyles);
   var headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
-  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
-  var classes = classNames('euiToast', className);
+  var cssStyles = [styles.euiToast];
+  var decorCssStyles = [styles.decor, animationMs && styles.hasAnimation];
+  var classes = classNames('euiToast', className, _defineProperty({}, "euiToast--".concat(color), color));
+  var highlightColorToken = getTokenName('borderStrong', color);
+  var typeColor = euiTheme.colors[highlightColorToken];
+  var backgroundLightToken = getTokenName('backgroundLight', color);
+  var backgroundLightColor = euiTheme.colors[backgroundLightToken];
+  var cssVariables = useMemo(function () {
+    return _objectSpread({
+      '--euiToastTypeColor': typeColor,
+      '--euiToastTypeBackgroundColor': backgroundLightColor
+    }, animationMs && {
+      '--euiToastAnimationMs': "".concat(animationMs, "ms")
+    });
+  }, [typeColor, backgroundLightColor, animationMs]);
+  var dismissButton = useMemo(function () {
+    if (!onClose) return;
+    return ___EmotionJSX(EuiI18n, {
+      token: "euiToast.dismissToast",
+      default: "Dismiss toast"
+    }, function (dismissToast) {
+      return ___EmotionJSX(EuiButtonIcon, {
+        css: styles.dismissButton,
+        iconType: "cross",
+        color: "text",
+        size: "xs",
+        "aria-label": dismissToast,
+        onClick: onClose,
+        "data-test-subj": "toastCloseButton"
+      });
+    });
+  }, [onClose, styles]);
+  var header = useMemo(function () {
+    if (!title) return;
+    var headerCssStyles = [headerStyles.euiToastHeader, onClose && headerStyles.hasDismissButton];
+    return ___EmotionJSX(EuiTitle, {
+      size: "xs",
+      css: headerCssStyles,
+      "data-test-subj": "euiToastHeader__title"
+    }, ___EmotionJSX("p", null, title));
+  }, [title, headerStyles, onClose]);
+  var icon = useMemo(function () {
+    if (!iconType) {
+      var _COLOR_TO_NOTIFICATIO;
+      var defaultIconType = (_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: defaultIconType,
+        size: "l"
+      });
+    }
+    return ___EmotionJSX(EuiIcon, {
+      css: [styles.icon, iconStyles.size.l, ";label:icon;"],
+      type: iconType,
+      size: "l",
+      "aria-hidden": "true",
+      color: typeColor
+    });
+  }, [iconType, color, typeColor, styles, iconStyles]);
+  var optionalChildren = useMemo(function () {
+    if (!text && !children) return null;
+    return ___EmotionJSX("div", {
+      css: styles.text,
+      "data-test-subj": "euiToastBody"
+    }, text && ___EmotionJSX(EuiText, {
+      size: "s",
+      color: "default",
+      className: "euiToast__text",
+      "data-test-subj": "euiToastText"
+    }, text), children && ___EmotionJSX(EuiText, {
+      className: "euiToast__additionalContent",
+      size: "s",
+      color: "default",
+      "data-test-subj": "euiToastAdditionalContent"
+    }, children));
+  }, [text, children, styles]);
+  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(EuiToastAction, _extends({
+      actionType: "primary"
+    }, actionPrimaryProps));
+    var actionSecondary = hasActionSecondary && ___EmotionJSX(EuiToastAction, _extends({
+      actionType: "secondary"
+    }, actionSecondaryProps));
+    return ___EmotionJSX("div", {
+      css: styles.actions
+    }, actionPrimary, actionSecondary);
+  }, [actionProps, color, styles]);
   return ___EmotionJSX("div", _extends({
-    css: baseCss,
-    className: classes
-  }, rest), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
+    css: cssStyles,
+    className: classes,
+    style: _objectSpread(_objectSpread({}, cssVariables), style)
+  }, rest), ___EmotionJSX("div", {
+    className: "euiToastDecor",
+    css: decorCssStyles,
+    role: "presentation"
+  }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
     token: "euiToast.newNotification",
     default: "A new notification appears"
-  }))), ___EmotionJSX(EuiI18n, {
-    token: "euiToast.notification",
-    default: "Notification"
-  }, function (notification) {
-    return ___EmotionJSX("div", {
-      css: headerCss,
-      "aria-label": notification,
-      "data-test-subj": "euiToastHeader"
-    }, iconType && ___EmotionJSX(EuiIcon, {
-      css: headerStyles.euiToastHeader__icon,
-      type: iconType,
-      size: "m",
-      "aria-hidden": "true"
-    }), ___EmotionJSX("span", {
-      css: headerStyles.euiToastHeader__title,
-      "data-test-subj": "euiToastHeader__title"
-    }, title));
-  }), onClose && ___EmotionJSX(EuiI18n, {
-    token: "euiToast.dismissToast",
-    default: "Dismiss toast"
-  }, function (dismissToast) {
-    return ___EmotionJSX(EuiButtonIcon, {
-      css: baseStyles.euiToast__closeButton,
-      iconType: "cross",
-      color: "text",
-      size: "xs",
-      "aria-label": dismissToast,
-      onClick: onClose,
-      "data-test-subj": "toastCloseButton"
-    });
-  }), children && ___EmotionJSX(EuiText, {
-    size: "s",
-    "data-test-subj": "euiToastBody"
-  }, children));
+  }))), ___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 content
+  header && optionalChildren ? ___EmotionJSX(React.Fragment, null, header, dismissButton, optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton))), actionControls));
 };

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

@@ -1,3 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,65 +8,51 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
-import { euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
-import { highContrastModeStyles, preventForcedColors } from '../../global_styling/functions/high_contrast';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { euiTitle } from '../title/title.styles';
 import { euiPanelBorderStyles } from '../panel/panel.styles';
+var TEXT_MAX_WIDTH = 1200;
+var CONTAINER_NAME = 'euiToast';
+var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
+var euiToastAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n"])));
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
-  var highlightStyles = function highlightStyles(color, width) {
-    return "\n    &:before {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat(logicalCSS('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
-  };
+  var euiTheme = euiThemeContext.euiTheme;
+  var highlightSize = mathWithUnits([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  });
+  var paddingTop = mathWithUnits([euiTheme.size.base, highlightSize], function (x, y) {
+    return x + y;
+  });
+  var offsetTop = mathWithUnits([euiTheme.size.s, highlightSize], function (x, y) {
+    return x + y;
+  });
   return {
     // Base
-    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
+    euiToast: /*#__PURE__*/css("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
-    // Elements
-    euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
-    // Variants
-    colors: {
-      _getStyles: function _getStyles(color) {
-        // Increase color/border thickness for all high contrast modes
-        var borderWidth = highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
-          return x * 2;
-        }) : euiTheme.border.width.thick;
-        return highContrastModeStyles(euiThemeContext, {
-          none: highlightStyles(color, borderWidth),
-          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::before {\n              ").concat(logicalCSS('width', "calc(100% + ".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
-            return x * 2;
-          }), ")")), "\n              ").concat(logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(logicalCSS('margin-left', "-".concat(euiTheme.border.width.thin)), "\n            }\n          "),
-          // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
-          forced: "\n            overflow: hidden;\n\n            &::before {\n              content: '';\n              position: absolute;\n              ".concat(logicalCSS('top', 0), "\n              ").concat(logicalCSS('horizontal', 0), "\n              ").concat(logicalCSS('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
-        });
-      },
-      get primary() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.primary), ";label:primary;");
-      },
-      get success() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.success), ";label:success;");
-      },
-      get warning() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.warning), ";label:warning;");
-      },
-      get danger() {
-        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.danger), ";label:danger;");
-      }
-    }
+    }), " ", logicalCSS('padding-top', paddingTop), " ", logicalCSS('padding-bottom', euiTheme.size.base), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), ";;label:euiToast;"),
+    decor: /*#__PURE__*/css("position:absolute;inset-block-start:0;inset-inline:0;", logicalCSS('height', highlightSize), " background-color:var(--euiToastTypeBackgroundColor);", preventForcedColors(euiThemeContext), " &::before{content:'';position:absolute;z-index:", euiTheme.levels.content, ";inset-block-start:0;inset-inline:0;", logicalCSS('height', '100%'), " background-color:var(--euiToastTypeColor);pointer-events:none;", preventForcedColors(euiThemeContext), " transform-origin:left center;[dir='rtl'] &{transform-origin:right center;}};label:decor;"),
+    // handles content + actions layout
+    wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
+    // handles icon + text layout
+    body: /*#__PURE__*/css("display:flex;flex-direction:row;align-self:center;gap:", euiTheme.size.m, ";inline-size:100%;;label:body;"),
+    // handles text layout
+    content: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";align-self:center;inline-size:100%;max-inline-size:", TEXT_MAX_WIDTH, "px;.euiToast__text+.euiToast__additionalContent{", logicalCSS('margin-top', euiTheme.size.s), ";};label:content;"),
+    text: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";;label:text;"),
+    icon: /*#__PURE__*/css("grid-area:icon;position:relative;", logicalCSS('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
+    actions: /*#__PURE__*/css("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", logicalCSS('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
+    dismissButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', offsetTop), ";", logicalCSS('right', euiTheme.size.s), ";;label:dismissButton;"),
+    hasAnimation: /*#__PURE__*/css("&::before{", euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
   };
 };
 export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", logicalCSS('padding-right', euiTheme.size.l), ">*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
-    // Elements
-    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.textHeading, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
-    euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
-    // Variants
-    withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")
+    euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader;"),
+    hasDismissButton: /*#__PURE__*/css("padding-inline-end:", euiTheme.size.l, ";;label:hasDismissButton;")
   };
 };

package/optimize/es/components/toast/toast_action.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "actionType", "color"];
+/*
+ * 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 { EuiButton, EuiButtonEmpty } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiToastAction = function EuiToastAction(_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,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (actionType === 'primary') {
+    return ___EmotionJSX(EuiButton, _extends({
+      size: "s",
+      color: color
+    }, rest), children);
+  } else {
+    return ___EmotionJSX(EuiButtonEmpty, _extends({
+      size: "s",
+      color: color
+    }, rest), children);
+  }
+};

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

@@ -0,0 +1,9 @@
+/*
+ * 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'];

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

@@ -12,7 +12,7 @@ var _excluded = ["children", "className", "anchorClassName", "anchorProps", "con
 
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { findPopoverPosition, useGeneratedHtmlId, keys } from '../../services';
 import { getRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
@@ -89,8 +89,8 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     arrowStyles = _useState10[0],
     setArrowStyles = _useState10[1];
-  var generatedId = useRef(htmlIdGenerator()());
-  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId.current;
+  var generatedId = useGeneratedHtmlId();
+  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
   var anchorRef = useRef(null);
   var popoverRef = useRef(null);
   var positionToolTip = useCallback(function () {

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

@@ -57,8 +57,7 @@ var EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function
   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 hasActions = Boolean(primaryActionProps) || Boolean(secondaryActionProps);
   var componentClass = 'euiBanner';
   var classes = (0, _classnames.default)(componentClass, className);
   var backgroundColorStyles = (0, _global_styling.useEuiBackgroundColorCSS)()[color];

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

@@ -64,7 +64,7 @@ var euiBannerStyles = exports.euiBannerStyles = function euiBannerStyles(_ref3)
     }), ";;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;"),
+    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, ";}}[data-size='m'] &{>.euiText+*{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({

package/optimize/lib/components/basic_table/basic_table.js

@@ -38,7 +38,7 @@ var _accessibility2 = require("../../services/accessibility");
 var _basic_table = require("./basic_table.styles");
 var _tool_tip = require("../tool_tip");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar", "stickyHeader"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar", "stickyHeader", "panelled"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 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; }
@@ -369,6 +369,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         scrollableInline = _this$props2.scrollableInline,
         stickyScrollbar = _this$props2.stickyScrollbar,
         stickyHeader = _this$props2.stickyHeader,
+        panelled = _this$props2.panelled,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var classes = (0, _classnames.default)('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -390,8 +391,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         loading = _this$props3.loading,
         scrollableInline = _this$props3.scrollableInline,
         stickyScrollbar = _this$props3.stickyScrollbar,
-        stickyHeader = _this$props3.stickyHeader;
-      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
+        stickyHeader = _this$props3.stickyHeader,
+        panelled = _this$props3.panelled;
+      var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_table.EuiTable, {
         id: this.tableId,
@@ -404,6 +406,13 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         stickyHeader: stickyHeader,
         css: loading && _basic_table.safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
+      if (panelled) {
+        return (0, _react2.jsx)("div", {
+          css: panelled && (0, _basic_table.euiBasicTableWrapperPanelledStyles)(responsiveBreakpoint),
+          "data-test-subj": "euiBasicTablePanelledWrapper"
+        }, content);
+      }
+      return content;
     }
   }, {
     key: "renderTableMobileSort",
@@ -960,7 +969,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         error = _this$props11.error,
         pagination = _this$props11.pagination,
         tableCaption = _this$props11.tableCaption,
-        onChange = _this$props11.onChange;
+        onChange = _this$props11.onChange,
+        panelled = _this$props11.panelled,
+        responsiveBreakpoint = _this$props11.responsiveBreakpoint;
       if (!error && pagination && pagination.totalItemCount > 0) {
         if (!onChange) {
           throw new Error("The Basic Table is configured with pagination but [onChange] is\n        not configured. This callback must be implemented to handle pagination changes");
@@ -974,6 +985,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         }, function (tablePagination) {
           return (0, _react2.jsx)(_pagination_bar.PaginationBar, {
             pagination: pagination,
+            panelled: panelled,
+            responsiveBreakpoint: responsiveBreakpoint,
             onPageSizeChange: _this7.onPageSizeChange.bind(_this7),
             onPageChange: _this7.onPageChange.bind(_this7),
             "aria-controls": _this7.tableId,

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

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.safariLoadingWorkaround = exports.euiBasicTableBodyLoading = void 0;
+exports.safariLoadingWorkaround = exports.euiBasicTableWrapperPanelledStyles = exports.euiBasicTableBodyLoading = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _use_panel_props = require("./use_panel_props");
 var _templateObject;
 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
@@ -24,6 +25,23 @@ var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBa
   }), ";}};label:euiBasicTableBodyLoading;");
 };
 
+/**
+ * @internal
+ */
+var euiBasicTableWrapperPanelledStyles = exports.euiBasicTableWrapperPanelledStyles = function euiBasicTableWrapperPanelledStyles(responsiveBreakpoint) {
+  return function (theme) {
+    var euiTheme = theme.euiTheme;
+    var styles = /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";border-block-end-width:0;padding-block-start:", euiTheme.border.width.thin, ";border-radius:", euiTheme.border.radius.medium, ";.euiTable{border-radius:", euiTheme.border.radius.medium, ";}.", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "+.euiBasicTable &{border-start-start-radius:0;border-start-end-radius:0;.euiTable{border-start-start-radius:0;border-start-end-radius:0;}}&:not(:last-child),&:has(+ .", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "){border-end-start-radius:0;border-end-end-radius:0;.euiTable{border-end-start-radius:0;border-end-end-radius:0;}};label:styles;");
+    if (responsiveBreakpoint === true) {
+      return null;
+    }
+    if (!responsiveBreakpoint) {
+      return styles;
+    }
+    return /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(theme, responsiveBreakpoint), "{", styles, ";};label:euiBasicTableWrapperPanelledStyles;");
+  };
+};
+
 // Fix to make the loading indicator position correctly in Safari
 // For whatever annoying reason, Safari doesn't respect `position: relative;`
 // on `tbody` without `position: relative` on the parent `table`

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

@@ -15,5 +15,12 @@ Object.defineProperty(exports, "EuiInMemoryTable", {
     return _in_memory_table.EuiInMemoryTable;
   }
 });
+Object.defineProperty(exports, "useEuiBasicTablePanelProps", {
+  enumerable: true,
+  get: function get() {
+    return _use_panel_props.useEuiBasicTablePanelProps;
+  }
+});
 var _basic_table = require("./basic_table");
-var _in_memory_table = require("./in_memory_table");
+var _in_memory_table = require("./in_memory_table");
+var _use_panel_props = require("./use_panel_props");

package/optimize/lib/components/basic_table/pagination_bar.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PaginationBar = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _spacer = require("../spacer");
+var _services = require("../../services");
 var _table_pagination = require("../table/table_pagination");
+var _responsive_context = require("../table/mobile/responsive_context");
+var _pagination_bar = require("./pagination_bar.styles");
 var _react2 = require("@emotion/react");
 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; }
@@ -19,8 +21,19 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Side Public License, v 1.
  */
 
+/**
+ * @internal
+ */
+
+/**
+ * An internal utility component that renders EuiTablePagination with
+ * proper configuration and handles the `panelled` styles.
+ * @internal
+ */
 var PaginationBar = exports.PaginationBar = function PaginationBar(_ref) {
   var pagination = _ref.pagination,
+    panelled = _ref.panelled,
+    responsiveBreakpoint = _ref.responsiveBreakpoint,
     onPageSizeChange = _ref.onPageSizeChange,
     onPageChange = _ref.onPageChange,
     ariaControls = _ref['aria-controls'],
@@ -35,14 +48,16 @@ var PaginationBar = exports.PaginationBar = function PaginationBar(_ref) {
     _pagination$showPerPa = pagination.showPerPageOptions,
     showPerPageOptions = _pagination$showPerPa === void 0 ? defaults.showPerPageOptions : _pagination$showPerPa;
   var pageCount = pageSize ? Math.ceil(totalItemCount / pageSize) : 1;
+  var styles = (0, _services.useEuiMemoizedStyles)(_pagination_bar.euiBasicTablePaginationBarStyles);
+  var isResponsive = (0, _responsive_context.useIsEuiTableResponsive)(responsiveBreakpoint);
   (0, _react.useEffect)(function () {
     if (pageCount < pageIndex + 1) {
       onPageChange === null || onPageChange === void 0 || onPageChange(pageCount - 1);
     }
   }, [pageCount, onPageChange, pageIndex]);
-  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_spacer.EuiSpacer, {
-    size: "m"
-  }), (0, _react2.jsx)(_table_pagination.EuiTablePagination, {
+  return (0, _react2.jsx)("div", {
+    css: [styles.root, !isResponsive && panelled && styles.panelled, ";label:PaginationBar;"]
+  }, (0, _react2.jsx)(_table_pagination.EuiTablePagination, {
     activePage: pageIndex,
     showPerPageOptions: showPerPageOptions,
     itemsPerPage: pageSize,

package/optimize/lib/components/basic_table/pagination_bar.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBasicTablePaginationBarStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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.
+ */
+
+/**
+ * @internal
+ */
+var euiBasicTablePaginationBarStyles = exports.euiBasicTablePaginationBarStyles = function euiBasicTablePaginationBarStyles(theme) {
+  var euiTheme = theme.euiTheme;
+  return {
+    root: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:root;"),
+    panelled: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-start-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "0 0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium)), ";;label:panelled;")
+  };
+};