@elastic/eui 116.3.0 → 116.3.1-snapshot.1782218964187

package/es/components/avatar/avatar.js

@@ -75,6 +75,7 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   var classes = classNames('euiAvatar', _defineProperty(_defineProperty(_defineProperty({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = useEuiMemoizedStyles(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 = useMemo(function () {
     if (imageUrl) {
       return {
@@ -129,6 +130,9 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? ___EmotionJSX(EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

package/es/components/avatar/avatar.styles.js

@@ -9,9 +9,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
-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(logicalSizeCSS(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -54,24 +54,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__
-};
-export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+export var euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/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__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/css("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/css("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -101,6 +97,10 @@ export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/css("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/css("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

package/es/components/banner/banner.js

@@ -50,8 +50,7 @@ export var EuiBanner = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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 = classNames(componentClass, className);
   var backgroundColorStyles = useEuiBackgroundColorCSS()[color];

package/es/components/banner/banner.styles.js

@@ -60,7 +60,7 @@ export var 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__*/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__*/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__*/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__*/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/es/components/basic_table/basic_table.js

@@ -1,4 +1,4 @@
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -56,7 +56,7 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
 import { htmlIdGenerator } from '../../services/accessibility';
-import { euiBasicTableBodyLoading, safariLoadingWorkaround } from './basic_table.styles';
+import { euiBasicTableBodyLoading, euiBasicTableWrapperPanelledStyles, safariLoadingWorkaround } from './basic_table.styles';
 import { EuiToolTip } from '../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var dataTypesProfiles = {
@@ -376,6 +376,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         scrollableInline = _this$props2.scrollableInline,
         stickyScrollbar = _this$props2.stickyScrollbar,
         stickyHeader = _this$props2.stickyHeader,
+        panelled = _this$props2.panelled,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var classes = classNames('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -397,8 +398,9 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         loading = _this$props3.loading,
         scrollableInline = _this$props3.scrollableInline,
         stickyScrollbar = _this$props3.stickyScrollbar,
-        stickyHeader = _this$props3.stickyHeader;
-      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
+        stickyHeader = _this$props3.stickyHeader,
+        panelled = _this$props3.panelled;
+      var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), ___EmotionJSX(OverrideCopiedTabularContent, null, ___EmotionJSX(EuiTable, {
         id: this.tableId,
@@ -411,6 +413,13 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         stickyHeader: stickyHeader,
         css: loading && safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
+      if (panelled) {
+        return ___EmotionJSX("div", {
+          css: panelled && euiBasicTableWrapperPanelledStyles(responsiveBreakpoint),
+          "data-test-subj": "euiBasicTablePanelledWrapper"
+        }, content);
+      }
+      return content;
     }
   }, {
     key: "renderTableMobileSort",
@@ -967,7 +976,9 @@ export var 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");
@@ -981,6 +992,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         }, function (tablePagination) {
           return ___EmotionJSX(PaginationBar, {
             pagination: pagination,
+            panelled: panelled,
+            responsiveBreakpoint: responsiveBreakpoint,
             onPageSizeChange: _this7.onPageSizeChange.bind(_this7),
             onPageChange: _this7.onPageChange.bind(_this7),
             "aria-controls": _this7.tableId,
@@ -1501,6 +1514,23 @@ EuiBasicTable.propTypes = {
      * Provides an infinite loading indicator
      */
   loading: PropTypes.bool,
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  panelled: PropTypes.bool,
   /**
      * Message to display if table is empty
      */

package/es/components/basic_table/basic_table.styles.js

@@ -10,7 +10,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, euiCantAnimate, highContrastModeStyles, preventForcedColors } from '../../global_styling';
+import { logicalCSS, euiCantAnimate, highContrastModeStyles, preventForcedColors, euiMinBreakpoint } from '../../global_styling';
+import { EUI_BASIC_TABLE_PANEL_CLASS_NAME } from './use_panel_props';
 var tableLoadingLine = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), logicalCSS('left', 0), logicalCSS('width', 0), logicalCSS('left', 0), logicalCSS('width', '40%'), logicalCSS('left', '60%'), logicalCSS('width', '40%'), logicalCSS('left', '100%'), logicalCSS('width', 0));
 export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -19,6 +20,23 @@ export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiTheme
   }), ";}};label:euiBasicTableBodyLoading;");
 };
 
+/**
+ * @internal
+ */
+export var euiBasicTableWrapperPanelledStyles = function euiBasicTableWrapperPanelledStyles(responsiveBreakpoint) {
+  return function (theme) {
+    var euiTheme = theme.euiTheme;
+    var styles = /*#__PURE__*/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, ";}.", 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(+ .", 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__*/css(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/es/components/basic_table/in_memory_table.js

@@ -1014,6 +1014,23 @@ EuiInMemoryTable.propTypes = {
      * Provides an infinite loading indicator
      */
   loading: PropTypes.bool,
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  panelled: PropTypes.bool,
   /**
      * Applied to `EuiTableRow`
      */

package/es/components/basic_table/index.js

@@ -7,4 +7,5 @@
  */
 
 export { EuiBasicTable } from './basic_table';
-export { EuiInMemoryTable } from './in_memory_table';
+export { EuiInMemoryTable } from './in_memory_table';
+export { useEuiBasicTablePanelProps } from './use_panel_props';

package/es/components/basic_table/pagination_bar.js

@@ -7,11 +7,24 @@
  */
 
 import React, { useEffect } from 'react';
-import { EuiSpacer } from '../spacer';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiTablePagination, useEuiTablePaginationDefaults } from '../table/table_pagination';
+import { useIsEuiTableResponsive } from '../table/mobile/responsive_context';
+import { euiBasicTablePaginationBarStyles } from './pagination_bar.styles';
+
+/**
+ * @internal
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * An internal utility component that renders EuiTablePagination with
+ * proper configuration and handles the `panelled` styles.
+ * @internal
+ */
 export var PaginationBar = function PaginationBar(_ref) {
   var pagination = _ref.pagination,
+    panelled = _ref.panelled,
+    responsiveBreakpoint = _ref.responsiveBreakpoint,
     onPageSizeChange = _ref.onPageSizeChange,
     onPageChange = _ref.onPageChange,
     ariaControls = _ref['aria-controls'],
@@ -26,14 +39,16 @@ export var 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 = useEuiMemoizedStyles(euiBasicTablePaginationBarStyles);
+  var isResponsive = useIsEuiTableResponsive(responsiveBreakpoint);
   useEffect(function () {
     if (pageCount < pageIndex + 1) {
       onPageChange === null || onPageChange === void 0 || onPageChange(pageCount - 1);
     }
   }, [pageCount, onPageChange, pageIndex]);
-  return ___EmotionJSX("div", null, ___EmotionJSX(EuiSpacer, {
-    size: "m"
-  }), ___EmotionJSX(EuiTablePagination, {
+  return ___EmotionJSX("div", {
+    css: [styles.root, !isResponsive && panelled && styles.panelled, ";label:PaginationBar;"]
+  }, ___EmotionJSX(EuiTablePagination, {
     activePage: pageIndex,
     showPerPageOptions: showPerPageOptions,
     itemsPerPage: pageSize,

package/es/components/basic_table/pagination_bar.styles.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalShorthandCSS } from '../../global_styling';
+
+/**
+ * @internal
+ */
+export var euiBasicTablePaginationBarStyles = function euiBasicTablePaginationBarStyles(theme) {
+  var euiTheme = theme.euiTheme;
+  return {
+    root: /*#__PURE__*/css(logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:root;"),
+    panelled: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-start-width:0;", logicalShorthandCSS('border-radius', "0 0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium)), ";;label:panelled;")
+  };
+};

package/es/components/basic_table/panel.styles.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalShorthandCSS } from '../../global_styling';
+export var euiBasicTablePanelStyles = function euiBasicTablePanelStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return /*#__PURE__*/css("background-color:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-end-width:0;", 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/es/components/basic_table/use_panel_props.js

@@ -0,0 +1,28 @@
+/*
+ * 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 { useEuiMemoizedStyles } from '../../services';
+import { euiBasicTablePanelStyles } from './panel.styles';
+
+/**
+ * @internal
+ */
+export var 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
+ */
+export var useEuiBasicTablePanelProps = function useEuiBasicTablePanelProps() {
+  var css = useEuiMemoizedStyles(euiBasicTablePanelStyles);
+  return {
+    css: css,
+    className: EUI_BASIC_TABLE_PANEL_CLASS_NAME
+  };
+};