@elastic/eui 116.3.0 → 116.3.1-snapshot.1782148316870

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
@@ -12,7 +15,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';
@@ -75,22 +78,26 @@ 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];
-  var generatedId = useRef(htmlIdGenerator()());
-  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId.current;
+    toolTipStyles = _useState10[0],
+    setToolTipStyles = _useState10[1];
+  var _useState11 = useState(undefined),
+    _useState12 = _slicedToArray(_useState11, 2),
+    arrowStyles = _useState12[0],
+    setArrowStyles = _useState12[1];
+  var generatedId = useGeneratedHtmlId();
+  var id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
   var anchorRef = useRef(null);
   var popoverRef = useRef(null);
   var positionToolTip = useCallback(function () {
@@ -142,10 +149,19 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setArrowStyles(undefined);
     toolTipManager.deregisterToolTip(hideToolTip);
   }, []);
+
+  /**
+   * Show the tooltip.
+   *
+   * Uses the tooltip manager's `skipAnimation` signal to optionally skip the entry
+   * animation when another tooltip is already open or was just closed.
+   */
   var showToolTip = useCallback(function () {
     if (!content && !title) return;
+    var result = toolTipManager.registerTooltip(hideToolTip);
+    if (!result) return;
+    setSkipAnimation(result.skipAnimation);
     setVisible(true);
-    toolTipManager.registerTooltip(hideToolTip);
   }, [content, title, hideToolTip]);
   useImperativeHandle(ref, function () {
     return {
@@ -225,18 +241,24 @@ 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);
-    }
-  }, [hasFocus, hideToolTip, onMouseOutProp]);
+
+  /**
+   * Show the tooltip on enter.
+   */
+  var onMouseEnter = useCallback(function (event) {
+    var _anchorProps$onMouseE;
+    showToolTip();
+    anchorProps === null || anchorProps === void 0 || (_anchorProps$onMouseE = anchorProps.onMouseEnter) === null || _anchorProps$onMouseE === void 0 || _anchorProps$onMouseE.call(anchorProps, event);
+  }, [showToolTip, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.onMouseEnter]);
+
+  /**
+   * Hide the tooltip if the mouse is not over the trigger.
+   */
+  var onMouseLeave = useCallback(function (event) {
+    var _anchorProps$onMouseL;
+    if (!hasFocus) hideToolTip();
+    anchorProps === null || anchorProps === void 0 || (_anchorProps$onMouseL = anchorProps.onMouseLeave) === null || _anchorProps$onMouseL === void 0 || _anchorProps$onMouseL.call(anchorProps, event);
+  }, [hasFocus, hideToolTip, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.onMouseLeave]);
   var classes = classNames('euiToolTip', className);
   var anchorClasses = classNames(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTipAnchor, _extends({}, anchorProps, {
@@ -244,8 +266,9 @@ export var EuiToolTip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onEscapeKey,
-    onMouseOver: showToolTip,
-    onMouseOut: onMouseOut
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseOut: onMouseOutProp
     // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
     ,
     id: !disableScreenReaderOutput ? id : undefined,
@@ -254,7 +277,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_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,54 @@ 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 null;
+    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

@@ -74,6 +74,7 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = (0, _react.useMemo)(function () {
     if (imageUrl) {
       return {
@@ -128,6 +129,9 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

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

@@ -13,9 +13,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _avatarSize = function _avatarSize(_ref7) {
-  var size = _ref7.size,
-    fontSize = _ref7.fontSize;
+var _avatarSize = function _avatarSize(_ref6) {
+  var size = _ref6.size,
+    fontSize = _ref6.fontSize;
   return "\n    ".concat((0, _global_styling.logicalSizeCSS)(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +58,20 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;"
-} : {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -105,6 +101,10 @@ var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8)
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

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;")
+  };
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBasicTablePanelStyles = 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.
+ */
+
+var euiBasicTablePanelStyles = exports.euiBasicTablePanelStyles = function euiBasicTablePanelStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-end-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0 0")), "&+&{border-start-start-radius:0;border-start-end-radius:0;};label:euiBasicTablePanelStyles;");
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiBasicTablePanelProps = exports.EUI_BASIC_TABLE_PANEL_CLASS_NAME = void 0;
+var _services = require("../../services");
+var _panel = require("./panel.styles");
+/*
+ * 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 EUI_BASIC_TABLE_PANEL_CLASS_NAME = exports.EUI_BASIC_TABLE_PANEL_CLASS_NAME = 'euiBasicTablePanel';
+
+/**
+ * A utility hook that returns props needed to be passed to element(s) being
+ * a part of the paneled table look and feel (e.g., a toolbar above the table).
+ * @beta
+ */
+var useEuiBasicTablePanelProps = exports.useEuiBasicTablePanelProps = function useEuiBasicTablePanelProps() {
+  var css = (0, _services.useEuiMemoizedStyles)(_panel.euiBasicTablePanelStyles);
+  return {
+    css: css,
+    className: EUI_BASIC_TABLE_PANEL_CLASS_NAME
+  };
+};