@elastic/eui 109.1.0-snapshot.1763390960850 → 109.2.0

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"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground"],
   _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(); }
@@ -368,6 +368,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableCaption = _this$props2.tableCaption,
         rowHeader = _this$props2.rowHeader,
         tableLayout = _this$props2.tableLayout,
+        hasBackground = _this$props2.hasBackground,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var classes = classNames('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -385,6 +386,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         compressed = _this$props3.compressed,
         responsiveBreakpoint = _this$props3.responsiveBreakpoint,
         tableLayout = _this$props3.tableLayout,
+        hasBackground = _this$props3.hasBackground,
         loading = _this$props3.loading;
       return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
@@ -393,6 +395,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableLayout: tableLayout,
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
+        hasBackground: hasBackground,
         css: loading && safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }

package/es/components/breadcrumbs/_breadcrumb_content.js

@@ -144,6 +144,7 @@ EuiBreadcrumbContent.propTypes = {
   popoverProps: PropTypes.shape({
     /**
        * Alignment of the popover and arrow relative to the button
+       * @default downLeft
        */
     anchorPosition: PropTypes.any,
     /**
@@ -165,6 +166,7 @@ EuiBreadcrumbContent.propTypes = {
     focusTrapProps: PropTypes.any,
     /**
        * Show arrow indicating to originating button
+       * @default false
        */
     hasArrow: PropTypes.bool,
     /**
@@ -257,6 +259,7 @@ EuiBreadcrumbContent.propTypes = {
     zIndex: PropTypes.number,
     /**
        * Distance away from the anchor that the popover will render
+       * @default 4 (0 when `hasArrow=true`)
        */
     offset: PropTypes.number,
     /**

package/es/components/breadcrumbs/breadcrumbs.js

@@ -155,6 +155,7 @@ EuiBreadcrumbs.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Alignment of the popover and arrow relative to the button
+         * @default downLeft
          */
       anchorPosition: PropTypes.any,
       /**
@@ -176,6 +177,7 @@ EuiBreadcrumbs.propTypes = {
       focusTrapProps: PropTypes.any,
       /**
          * Show arrow indicating to originating button
+         * @default false
          */
       hasArrow: PropTypes.bool,
       /**
@@ -268,6 +270,7 @@ EuiBreadcrumbs.propTypes = {
       zIndex: PropTypes.number,
       /**
          * Distance away from the anchor that the popover will render
+         * @default 4 (0 when `hasArrow=true`)
          */
       offset: PropTypes.number,
       /**

package/es/components/button/button_group/button_group.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../../global_styling';
+import { euiDisabledSelector, logicalCSS } from '../../../global_styling';
 import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../../form/form.styles';
 export var euiButtonGroupStyles = {
@@ -43,6 +43,6 @@ var _highContrastStyles = function _highContrastStyles(euiThemeContext, compress
   var euiTheme = euiThemeContext.euiTheme;
   return highContrastModeStyles(euiThemeContext, {
     preferred: compressed ? "\n        .euiButtonGroupButton {\n          border: none;\n        }\n      " : '',
-    forced: "\n      .euiButtonGroupButton-isSelected {\n        ".concat(preventForcedColors(euiThemeContext), "\n        color: ").concat(euiTheme.colors.emptyShade, ";\n        background-color: ").concat(euiTheme.colors.fullShade, ";\n\n        &:is(:hover, :focus):not(:disabled) {\n          &::before {\n            border-color: ").concat(euiTheme.colors.textInverse, ";\n          }\n        }\n      }\n\n      .euiButtonGroupButton[disabled] {\n        opacity: 0.5;\n      }\n    ")
+    forced: "\n      .euiButtonGroupButton-isSelected {\n        ".concat(preventForcedColors(euiThemeContext), "\n        color: ").concat(euiTheme.colors.emptyShade, ";\n        background-color: ").concat(euiTheme.colors.fullShade, ";\n\n        &:is(:hover, :focus):not(").concat(euiDisabledSelector, ") {\n          &::before {\n            border-color: ").concat(euiTheme.colors.textInverse, ";\n          }\n        }\n      }\n\n      .euiButtonGroupButton:is(").concat(euiDisabledSelector, ") {\n        opacity: 0.5;\n      }\n    ")
   });
 };

package/es/components/button/button_group/button_group_button.styles.js

@@ -92,7 +92,7 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
     },
     compressed: /*#__PURE__*/css(logicalCSS('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";font-weight:", euiTheme.font.weight.medium, ";padding:0;margin:", euiTheme.size.xxs, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
-    }), ";&+.euiButtonGroupButton{", logicalCSS('margin-left', '0'), ";}&:is(", selectedSelectors, "):not(:disabled){border:none;", highContrastModeStyles(euiThemeContext, {
+    }), ";&+.euiButtonGroupButton{", logicalCSS('margin-left', '0'), ";}&:is(", selectedSelectors, "):not(", euiDisabledSelector, "){border:none;", highContrastModeStyles(euiThemeContext, {
       forced: "\n            /* use inset focus outline to ensure visibility, same as custom hover.\n            NOTE: temp solution - this will be revisited once we handle global focus styles */\n            &:focus-visible {\n              outline-color: ".concat(euiTheme.colors.textInverse, ";\n              /* has to be inset due to overflow: hidden */\n              outline-offset: -").concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
         return x * 3;
       }), ";\n            }\n          ")

package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -101,10 +101,16 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
         return;
       }
 
+      // We can be forgiving for `dateFormat` if we are certain
+      // we're not expecting any of the other formats allowed;
+      // otherwise we can get valid but inaccurate results e.g.
+      // `1970-01-01` -> `Jan 19, 1970 @ 01:01:00.000`
+      var strictModeForPassedFormat = moment(textInputValue, ALLOWED_USER_DATE_FORMATS, true).isValid();
+
       // Attempt to parse with passed `dateFormat` and `locale`
       var _valueAsMoment = moment(textInputValue, dateFormat, typeof locale === 'string' ? locale : 'en',
       // Narrow the union type to string
-      true);
+      strictModeForPassedFormat);
       var dateIsValid = _valueAsMoment.isValid();
 
       // If not valid, try a few other standardized formats

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -31,11 +31,13 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import moment from 'moment'; // eslint-disable-line import/named
 import dateMath from '@elastic/datemath';
-import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiMemoizedStyles, RenderWithEuiTheme } from '../../../services';
 import { isObject } from '../../../services/predicate';
+import { euiTextTruncateCSS } from '../../../global_styling';
 import { EuiI18nConsumer } from '../../context';
 import { EuiDatePickerRange } from '../date_picker_range';
 import { EuiFormControlButton, EuiFormControlLayout } from '../../form';
+import { EuiToolTip } from '../../tool_tip';
 import { RenderI18nTimeOptions } from './time_options';
 import { PrettyDuration, showPrettyDuration } from './pretty_duration';
 import { EuiTimeWindowButtons } from './time_window_buttons';
@@ -301,22 +303,38 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       };
       var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && ___EmotionJSX(EuiFormControlButton, {
-          type: "button",
-          css: styles.euiSuperDatePicker__prettyFormat,
-          className: classNames('euiSuperDatePicker__prettyFormat', {
-            'euiSuperDatePicker__prettyFormat--disabled': isDisabled
-          }),
-          "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: !!isDisabled,
-          onClick: _this.hidePrettyDuration,
-          onFocus: onFocus
-        }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX(PrettyDuration, {
-          timeFrom: start,
-          timeTo: end,
-          quickRanges: commonlyUsedRanges,
-          dateFormat: dateFormat
-        })));
+        // Tooltip content with full range
+        var startMoment = dateMath.parse(start);
+        var endMoment = dateMath.parse(end, {
+          roundUp: true
+        });
+        var separator = ' – ';
+        var formattedFullRange = isInvalid ? '' : (startMoment === null || startMoment === void 0 ? void 0 : startMoment.format(dateFormat)) + separator + (endMoment === null || endMoment === void 0 ? void 0 : endMoment.format(dateFormat));
+        return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
+          return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && ___EmotionJSX(EuiToolTip, {
+            css: styles.euiSuperDatePicker__prettyDurationTooltip,
+            content: formattedFullRange,
+            display: "block",
+            offset: euiTheme.euiTheme.base * 0.5
+          }, ___EmotionJSX(EuiFormControlButton, {
+            type: "button",
+            className: classNames('euiSuperDatePicker__prettyFormat', {
+              'euiSuperDatePicker__prettyFormat--disabled': isDisabled
+            }),
+            compressed: compressed,
+            "data-test-subj": "superDatePickerShowDatesButton",
+            disabled: !!isDisabled,
+            onClick: _this.hidePrettyDuration,
+            onFocus: onFocus
+          }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX("span", {
+            css: euiTextTruncateCSS()
+          }, ___EmotionJSX(PrettyDuration, {
+            timeFrom: start,
+            timeTo: end,
+            quickRanges: commonlyUsedRanges,
+            dateFormat: dateFormat
+          })))));
+        });
       }
       var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
 

package/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -65,9 +65,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";}.euiFormControlLayoutDelimited__delimiter:first-child{", logicalCSS('padding-horizontal', 0), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;--euiFormControlStateHoverColor:", forms.borderHovered, ";", euiFormControlDefaultShadow(euiThemeContext), " &:focus{", euiFormControlFocusStyles(euiThemeContext), ";}", highContrastModeStyles(euiThemeContext, {
-      preferred: "\n          border: none;\n        "
-    }), ";;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyDurationTooltip: /*#__PURE__*/css(logicalCSS('max-width', 'min(58ch, 90vw)'), ";;label:euiSuperDatePicker__prettyDurationTooltip;"),
     // Form states
     states: {
       euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", highContrastModeStyles(euiThemeContext, {

package/es/components/flex/flex_item.js

@@ -19,15 +19,17 @@ var EuiFlexItemInternal = function EuiFlexItemInternal(_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$grow = _ref.grow,
-    grow = _ref$grow === void 0 ? true : _ref$grow,
+    _grow = _ref$grow === void 0 ? true : _ref$grow,
     _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // resets `grow` to the default value when an invalid value is passed
+  var grow = VALID_GROW_VALUES.indexOf(_grow) === -1 ? true : _grow;
   useEffect(function () {
-    if (VALID_GROW_VALUES.indexOf(grow) === -1) {
-      throw new Error("Prop `grow` passed to `EuiFlexItem` must be a boolean or an integer between 0 and 10, received `".concat(grow, "`"));
+    if (process.env.NODE_ENV === 'development' && VALID_GROW_VALUES.indexOf(_grow) === -1) {
+      console.warn("Prop `grow` passed to `EuiFlexItem` must be a boolean or an integer between 0 and 10, received `".concat(_grow, "`. Defaulting to `true`."));
     }
-  }, [grow]);
+  }, [_grow]);
   var cssStyles = [styles.euiFlexItem, !grow ? styles.growZero : styles.grow, grow && (typeof grow === 'number' ? styles.growSizes[grow] : styles.growSizes['1'])];
   var classes = classNames('euiFlexItem', className);
 

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -101,6 +101,7 @@ EuiHeaderBreadcrumbs.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Alignment of the popover and arrow relative to the button
+         * @default downLeft
          */
       anchorPosition: PropTypes.any,
       /**
@@ -122,6 +123,7 @@ EuiHeaderBreadcrumbs.propTypes = {
       focusTrapProps: PropTypes.any,
       /**
          * Show arrow indicating to originating button
+         * @default false
          */
       hasArrow: PropTypes.bool,
       /**
@@ -214,6 +216,7 @@ EuiHeaderBreadcrumbs.propTypes = {
       zIndex: PropTypes.number,
       /**
          * Distance away from the anchor that the popover will render
+         * @default 4 (0 when `hasArrow=true`)
          */
       offset: PropTypes.number,
       /**

package/es/components/header/header_links/header_links.js

@@ -138,6 +138,7 @@ EuiHeaderLinks.propTypes = {
   popoverProps: PropTypes.shape({
     /**
        * Alignment of the popover and arrow relative to the button
+       * @default downLeft
        */
     anchorPosition: PropTypes.any,
     /**
@@ -159,6 +160,7 @@ EuiHeaderLinks.propTypes = {
     focusTrapProps: PropTypes.any,
     /**
        * Show arrow indicating to originating button
+       * @default false
        */
     hasArrow: PropTypes.bool,
     /**
@@ -251,6 +253,7 @@ EuiHeaderLinks.propTypes = {
     zIndex: PropTypes.number,
     /**
        * Distance away from the anchor that the popover will render
+       * @default 4 (0 when `hasArrow=true`)
        */
     offset: PropTypes.number,
     /**

package/es/components/page/page_header/page_header_content.js

@@ -315,6 +315,7 @@ EuiPageHeaderContent.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Alignment of the popover and arrow relative to the button
+         * @default downLeft
          */
       anchorPosition: PropTypes.any,
       /**
@@ -336,6 +337,7 @@ EuiPageHeaderContent.propTypes = {
       focusTrapProps: PropTypes.any,
       /**
          * Show arrow indicating to originating button
+         * @default false
          */
       hasArrow: PropTypes.bool,
       /**
@@ -428,6 +430,7 @@ EuiPageHeaderContent.propTypes = {
       zIndex: PropTypes.number,
       /**
          * Distance away from the anchor that the popover will render
+         * @default 4 (0 when `hasArrow=true`)
          */
       offset: PropTypes.number,
       /**

package/es/components/popover/input_popover.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef", "offset"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -66,6 +66,8 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 2 : _ref$offset,
     props = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiInputPopover', className);
   var euiTheme = useEuiTheme();
@@ -204,6 +206,7 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     closePopover: closePopover,
     anchorPosition: anchorPosition,
     attachToAnchor: attachToAnchor,
+    offset: offset,
     repositionToCrossAxis: repositionToCrossAxis,
     panelPaddingSize: panelPaddingSize,
     ownFocus: ownFocus

package/es/components/popover/popover.js

@@ -204,8 +204,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       if (_this.button == null || _this.panel == null) return;
       var _ref6 = _this.props,
         anchorPosition = _ref6.anchorPosition,
-        _ref6$offset = _ref6.offset,
-        offset = _ref6$offset === void 0 ? 0 : _ref6$offset;
+        _offset = _ref6.offset;
+      var offset = _offset != null ? _offset : _this.props.hasArrow ? 0 : 4;
       var position = getPopoverPositionFromAnchorPosition(anchorPosition);
       var forcePosition = undefined;
       if (allowEnforcePosition && _this.state.isOpenStable && _this.state.openPosition != null) {
@@ -542,14 +542,15 @@ _defineProperty(EuiPopover, "defaultProps", {
   isOpen: false,
   ownFocus: true,
   repositionToCrossAxis: true,
-  anchorPosition: 'downCenter',
+  anchorPosition: 'downLeft',
   panelPaddingSize: 'm',
-  hasArrow: true,
+  hasArrow: false,
   display: 'inline-block'
 });
 EuiPopover.propTypes = {
   /**
      * Alignment of the popover and arrow relative to the button
+     * @default downLeft
      */
   anchorPosition: PropTypes.any,
   /**
@@ -579,6 +580,7 @@ EuiPopover.propTypes = {
   focusTrapProps: PropTypes.any,
   /**
      * Show arrow indicating to originating button
+     * @default false
      */
   hasArrow: PropTypes.bool,
   /**
@@ -675,6 +677,7 @@ EuiPopover.propTypes = {
   zIndex: PropTypes.number,
   /**
      * Distance away from the anchor that the popover will render
+     * @default 4 (0 when `hasArrow=true`)
      */
   offset: PropTypes.number,
   /**

package/es/components/selectable/selectable_templates/selectable_template_sitewide_popover.js

@@ -31,6 +31,7 @@ export var EuiSelectableTemplateSitewidePopover = function EuiSelectableTemplate
   var styles = useEuiMemoizedStyles(euiSelectableTemplateSitewidePopoverStyles);
   return ___EmotionJSX(EuiPopover, _extends({
     panelPaddingSize: "none",
+    anchorPosition: "downCenter",
     isOpen: isOpen,
     ownFocus: !!trigger,
     display: trigger ? 'inline-block' : 'block'

package/es/components/table/_table_cell_content.styles.js

@@ -10,11 +10,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiTextTruncate, euiTextBreakWord, logicalTextAlignCSS } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1t1ptlc-mobile",
-  styles: "flex-direction:column;padding:0;label:mobile;"
+  name: "7d9p9x-mobile",
+  styles: "flex-direction:column;label:mobile;"
 } : {
-  name: "1t1ptlc-mobile",
-  styles: "flex-direction:column;padding:0;label:mobile;",
+  name: "7d9p9x-mobile",
+  styles: "flex-direction:column;label:mobile;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {

package/es/components/table/table.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "compressed", "tableLayout", "responsiveBreakpoint"];
+var _excluded = ["children", "className", "compressed", "tableLayout", "hasBackground", "responsiveBreakpoint"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -15,6 +15,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { useIsEuiTableResponsive, EuiTableIsResponsiveContext } from './mobile/responsive_context';
+import { EuiTableVariantContext } from './table_context';
 import { euiTableStyles } from './table.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTable = function EuiTable(_ref) {
@@ -23,19 +24,25 @@ export var EuiTable = function EuiTable(_ref) {
     compressed = _ref.compressed,
     _ref$tableLayout = _ref.tableLayout,
     tableLayout = _ref$tableLayout === void 0 ? 'fixed' : _ref$tableLayout,
+    _ref$hasBackground = _ref.hasBackground,
+    hasBackground = _ref$hasBackground === void 0 ? true : _ref$hasBackground,
     responsiveBreakpoint = _ref.responsiveBreakpoint,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useIsEuiTableResponsive(responsiveBreakpoint);
   var classes = classNames('euiTable', className);
   var styles = useEuiMemoizedStyles(euiTableStyles);
-  var cssStyles = [styles.euiTable, styles.layout[tableLayout], (!compressed || isResponsive) && styles.uncompressed, compressed && !isResponsive && styles.compressed, isResponsive ? styles.mobile : styles.desktop];
+  var cssStyles = [styles.euiTable, styles.layout[tableLayout], (!compressed || isResponsive) && styles.uncompressed, compressed && !isResponsive && styles.compressed, hasBackground && styles.hasBackground, isResponsive ? styles.mobile : styles.desktop];
   return ___EmotionJSX("table", _extends({
     tabIndex: -1,
     css: cssStyles,
     className: classes
   }, rest), ___EmotionJSX(EuiTableIsResponsiveContext.Provider, {
     value: isResponsive
-  }, children));
+  }, ___EmotionJSX(EuiTableVariantContext.Provider, {
+    value: {
+      hasBackground: hasBackground
+    }
+  }, children)));
 };
 EuiTable.propTypes = {
   compressed: PropTypes.bool,
@@ -51,8 +58,14 @@ EuiTable.propTypes = {
   responsiveBreakpoint: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.bool.isRequired]),
   /**
      * Sets the table-layout CSS property
+     * @default 'fixed'
      */
   tableLayout: PropTypes.oneOf(["fixed", "auto"]),
+  /**
+     * Toggle the table's background
+     * @default true
+     */
+  hasBackground: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

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

@@ -67,11 +67,12 @@ export var euiTableStyles = function euiTableStyles(euiThemeContext) {
     cellContentPadding = _euiTableVariables.cellContentPadding,
     compressedCellContentPadding = _euiTableVariables.compressedCellContentPadding;
   return {
-    euiTable: /*#__PURE__*/css(euiNumberFormat(euiThemeContext), " ", logicalCSS('width', '100%'), " border:none;border-collapse:collapse;background-color:", euiTheme.colors.emptyShade, ";;label:euiTable;"),
+    euiTable: /*#__PURE__*/css(euiNumberFormat(euiThemeContext), " ", logicalCSS('width', '100%'), " border:none;border-collapse:collapse;;label:euiTable;"),
     layout: {
       fixed: _ref3,
       auto: _ref2
     },
+    hasBackground: /*#__PURE__*/css("background-color:", euiTheme.colors.backgroundBasePlain, ";;label:hasBackground;"),
     /**
      * 1. The padding on the `.euiTableCellContent` div allows the ellipsis to show if the
      * content is truncated. If the padding was on the cell, the ellipsis would be cropped.

package/es/components/table/table_cells_shared.styles.js

@@ -28,7 +28,10 @@ export var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellSty
     euiTableHeaderCell: /*#__PURE__*/css(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
     euiTableHeaderCell__button: /*#__PURE__*/css(logicalCSS('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", euiTheme.components.tableCellSortableIconColor, ";}&:hover,&:focus{color:", euiTheme.colors.textPrimary, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.textPrimary, ";}};label:euiTableHeaderCell__button;"),
-    euiTableFooterCell: /*#__PURE__*/css(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
+    euiTableFooterCell: {
+      euiTableFooterCell: /*#__PURE__*/css(sharedStyles, ";;label:euiTableFooterCell;"),
+      hasBackground: /*#__PURE__*/css("background-color:", euiTheme.components.tableFooterBackground, ";;label:hasBackground;")
+    }
   };
 };
 export var euiTableCellCheckboxStyles = function euiTableCellCheckboxStyles(euiThemeContext) {

package/es/components/table/table_context.js

@@ -0,0 +1,12 @@
+/*
+ * 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 { createContext } from 'react';
+export var EuiTableVariantContext = /*#__PURE__*/createContext({
+  hasBackground: true
+});

package/es/components/table/table_footer_cell.js

@@ -10,13 +10,14 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, LEFT_ALIGNMENT } from '../../services';
 import { resolveWidthAsStyle } from './utils';
 import { EuiTableCellContent } from './_table_cell_content';
 import { euiTableHeaderFooterCellStyles } from './table_cells_shared.styles';
+import { EuiTableVariantContext } from './table_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableFooterCell = function EuiTableFooterCell(_ref) {
   var children = _ref.children,
@@ -26,11 +27,14 @@ export var EuiTableFooterCell = function EuiTableFooterCell(_ref) {
     width = _ref.width,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(EuiTableVariantContext),
+    hasBackground = _useContext.hasBackground;
   var classes = classNames('euiTableFooterCell', className);
   var inlineStyles = resolveWidthAsStyle(style, width);
   var styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
+  var cssStyles = [styles.euiTableFooterCell.euiTableFooterCell, hasBackground && styles.euiTableFooterCell.hasBackground];
   return ___EmotionJSX("td", _extends({
-    css: styles.euiTableFooterCell,
+    css: cssStyles,
     className: classes,
     style: inlineStyles
   }, rest), ___EmotionJSX(EuiTableCellContent, {

package/es/components/table/table_row.js

@@ -10,11 +10,12 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { keys, useEuiMemoizedStyles } from '../../services';
 import { useEuiTableIsResponsive } from './mobile/responsive_context';
+import { EuiTableVariantContext } from './table_context';
 import { euiTableRowStyles } from './table_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableRow = function EuiTableRow(_ref) {
@@ -29,8 +30,10 @@ export var EuiTableRow = function EuiTableRow(_ref) {
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useEuiTableIsResponsive();
+  var _useContext = useContext(EuiTableVariantContext),
+    hasBackground = _useContext.hasBackground;
   var styles = useEuiMemoizedStyles(euiTableRowStyles);
-  var cssStyles = isResponsive ? [styles.euiTableRow, styles.mobile.mobile, isSelected && styles.mobile.selected, isExpandedRow && styles.mobile.expanded, (hasActions === true || isExpandable || isExpandedRow) && styles.mobile.hasRightColumn, hasSelection && styles.mobile.hasLeftColumn] : [styles.euiTableRow, styles.desktop.desktop, onClick && styles.desktop.clickable, isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, isExpandedRow && hasSelection && styles.desktop.checkboxOffset];
+  var cssStyles = isResponsive ? [styles.euiTableRow, styles.mobile.mobile, !hasBackground && styles.mobile.hasBorder, hasBackground && styles.mobile.hasBackground, isSelected && styles.mobile.selected, isExpandedRow && styles.mobile.expanded, (hasActions === true || isExpandable || isExpandedRow) && styles.mobile.hasRightColumn, hasSelection && styles.mobile.hasLeftColumn] : [styles.euiTableRow, styles.desktop.desktop, onClick && styles.desktop.clickable, isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded.expanded, isExpandedRow && hasBackground && styles.desktop.expanded.hasBackground, isExpandedRow && hasSelection && styles.desktop.checkboxOffset];
   var classes = classNames('euiTableRow', className, {
     'euiTableRow-isSelectable': isSelectable,
     'euiTableRow-isSelected': isSelected,

package/es/components/table/table_row.styles.js

@@ -9,8 +9,8 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
  */
 
 import { css, keyframes } from '@emotion/react';
-import { euiShadow } from '@elastic/eui-theme-common';
-import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiBorderStyles, euiShadow } from '@elastic/eui-theme-common';
+import { euiCanAnimate, highContrastModeStyles, logicalCSS, mathWithUnits } from '../../global_styling';
 import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports';
 import { euiTableVariables } from './table.styles';
 export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
@@ -26,7 +26,11 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
     euiTableRow: /*#__PURE__*/css(":where(&.euiTableRow--marked){background-color:", rowColors.marked.background, ";};label:euiTableRow;"),
     desktop: {
       desktop: /*#__PURE__*/css("&:hover{background-color:", rowColors.hover, ";}", markedStyles, ";;label:desktop;"),
-      expanded: /*#__PURE__*/css("background-color:", rowColors.hover, ";", expandedAnimationCss, ";;label:expanded;"),
+      expanded: {
+        expanded: /*#__PURE__*/css(expandedAnimationCss, ";;label:expanded;"),
+        // skipping adding a css class as it's a default style when expanded
+        hasBackground: "\n          background-color: ".concat(rowColors.hover, ";\n        ")
+      },
       clickable: /*#__PURE__*/css("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}", markedStyles, " &:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
       // Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
@@ -34,9 +38,21 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's', {
+      mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), " border-radius:", euiTheme.border.radius.medium, ";", cssSupportsHasWithNextSibling("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat(logicalCSS('border-bottom-left-radius', 0), "\n              ").concat(logicalCSS('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
+      /* Omitting adding a class via css here as it's a default style on mobile, not a standalone prop-related style.
+      Adding it separate allows better appliance control via props without the need to override the styles. */
+      hasBorder: "\n        ".concat(highContrastModeStyles(euiThemeContext, {
+        // uses pseudo-border to align dimensions with shadows applied by `hasBackground`
+        none: "\n            ".concat(euiBorderStyles(euiThemeContext, {
+          side: 'all'
+        }), "\n            transform: translateZ(0);\n          "),
+        preferred: "\n            border: ".concat(euiTheme.border.thin, "\n          ")
+      }), "\n      "),
+      hasBackground: /*#__PURE__*/css(euiShadow(euiThemeContext, 's', {
         borderAllInHighContrastMode: true
-      }), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";", cssSupportsHasWithNextSibling("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat(logicalCSS('border-bottom-left-radius', 0), "\n              ").concat(logicalCSS('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
+      }), " background-color:", euiTheme.colors.backgroundBasePlain, ";", highContrastModeStyles(euiThemeContext, {
+        none: "\n            border: none;\n          "
+      }), ";;label:hasBackground;"),
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -55,7 +71,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       // On mobile, visually move the expanded row to join up with the
       // preceding table row via negative margins
       'margin-top', mathWithUnits([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
-        return (x + y * 2) * -1;
+        return (x + y) * -1;
       })), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " &:after{", logicalCSS('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);>.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };