@elastic/eui 109.1.0 → 109.2.0

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

@@ -70,10 +70,10 @@ export var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContex
       rightColumnContent: "\n        position: absolute;\n        ".concat(logicalCSS('right', 0), "\n        ").concat(logicalCSS('min-width', '0'), "\n        ").concat(logicalCSS('width', mobileSizes.actions.width), "\n      "),
       get actions() {
         // Note: Visible-on-hover actions on desktop always show on mobile
-        return /*#__PURE__*/css(this.rightColumnContent, " ", logicalCSS('top', mobileSizes.actions.offset), ";;label:actions;");
+        return /*#__PURE__*/css(this.rightColumnContent, " ", logicalCSS('top', mobileSizes.actions.offset), ".euiTableCellContent{padding:0;};label:actions;");
       },
       get expander() {
-        return /*#__PURE__*/css(this.rightColumnContent, " ", logicalCSS('bottom', mobileSizes.actions.offset), ";;label:expander;");
+        return /*#__PURE__*/css(this.rightColumnContent, ";;label:expander;");
       },
       /**
        * Custom actions may not be icons and therefore may not fit in a column
@@ -84,6 +84,6 @@ export var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContex
     },
     euiTableRowCell__mobileHeader: /*#__PURE__*/css(euiTextTruncate(), " font-size:", euiFontSize(euiThemeContext, 's', {
       customScale: 'xxs'
-    }).fontSize, ";display:block;color:", euiTheme.colors.darkShade, ";padding:", euiTheme.size.s, ";padding-block-end:0;margin-block-end:-", euiTheme.size.s, ";.euiTableRowCell:not(:only-child) &{", logicalCSS('min-height', euiTheme.size.l), ";};label:euiTableRowCell__mobileHeader;")
+    }).fontSize, ";display:block;color:", euiTheme.colors.textSubdued, ";padding:", euiTheme.size.s, ";padding-block-end:0;margin-block-end:-", euiTheme.size.s, ";.euiTableRowCell:not(:only-child) &{", logicalCSS('min-height', euiTheme.size.l), ";};label:euiTableRowCell__mobileHeader;")
   };
 };

package/es/components/tool_tip/tool_tip_anchor.js

@@ -13,6 +13,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { cloneElement, forwardRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useGeneratedHtmlId } from '../../services';
 import { euiToolTipAnchorStyles } from './tool_tip.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -29,11 +30,18 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var anchorCss = euiToolTipAnchorStyles();
   var cssStyles = [anchorCss.euiToolTipAnchor, anchorCss[display]];
   var classes = classNames('euiToolTipAnchor', className);
+  var anchorId = useGeneratedHtmlId({
+    suffix: 'euiToolTipAnchor',
+    conditionalId: id ? "".concat(id, "-wrapper") : undefined
+  });
   return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     ___EmotionJSX("span", _extends({
       ref: ref,
       css: cssStyles
+      /* A11y: NVDA combines elements with identical markup into a single navigational stop. ¯\_(ツ)_/¯
+      The `id` ensures the wrappers are unique and navigated as standalone elements. (data- attributes don't work) */,
+      id: anchorId
     }, rest, {
       className: classes,
       onMouseOver: onMouseOver,

package/es/components/tour/tour_step.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 = ["anchorPosition", "anchor", "children", "className", "css", "closePopover", "content", "isStepOpen", "minWidth", "maxWidth", "onFinish", "step", "stepsTotal", "subtitle", "title", "decoration", "footerAction", "panelProps", "panelClassName"];
+var _excluded = ["anchorPosition", "anchor", "children", "className", "css", "closePopover", "content", "isStepOpen", "minWidth", "maxWidth", "onFinish", "step", "stepsTotal", "subtitle", "title", "decoration", "hasArrow", "footerAction", "panelProps", "panelClassName"];
 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; }
@@ -57,6 +57,7 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     title = _ref.title,
     _ref$decoration = _ref.decoration,
     decoration = _ref$decoration === void 0 ? 'beacon' : _ref$decoration,
+    hasArrow = _ref.hasArrow,
     footerAction = _ref.footerAction,
     panelProps = _ref.panelProps,
     panelClassName = _ref.panelClassName,
@@ -118,8 +119,9 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     panelProps: _objectSpread(_objectSpread({}, panelProps), {}, {
       css: [tourStyles.euiTour, css, panelProps === null || panelProps === void 0 ? void 0 : panelProps.css]
     }),
-    offset: hasBeacon ? 10 : 0,
+    offset: hasBeacon && hasArrow !== false ? 10 : undefined,
     "aria-labelledby": titleId,
+    hasArrow: hasArrow !== null && hasArrow !== void 0 ? hasArrow : hasBeacon,
     arrowChildren: hasBeacon && ___EmotionJSX(EuiBeacon, {
       css: beaconCss,
       className: "euiTour__beacon"
@@ -150,6 +152,7 @@ EuiTourStep.propTypes = {
   css: PropTypes.any,
   /**
      * Alignment of the popover and arrow relative to the button
+     * @default downLeft
      */
   anchorPosition: PropTypes.any,
   /**
@@ -171,6 +174,7 @@ EuiTourStep.propTypes = {
   focusTrapProps: PropTypes.any,
   /**
      * Show arrow indicating to originating button
+     * @default false
      */
   hasArrow: PropTypes.bool,
   /**
@@ -263,6 +267,7 @@ EuiTourStep.propTypes = {
   zIndex: PropTypes.number,
   /**
      * Distance away from the anchor that the popover will render
+     * @default 4 (0 when `hasArrow=true`)
      */
   offset: PropTypes.number,
   /**
@@ -327,7 +332,8 @@ EuiTourStep.propTypes = {
        */
   title: PropTypes.node.isRequired,
   /**
-       * Extra visual indication of step location
+       * Extra visual indication of step location.
+       * It does not apply when `hasArrow=false`
        */
   decoration: PropTypes.oneOf(["none", "beacon"]),
   /**

package/es/global_styling/mixins/_button.js

@@ -22,6 +22,7 @@ import { css } from '@emotion/react';
 import { getTokenName, mathWithUnits } from '@elastic/eui-theme-common';
 import { makeHighContrastColor, useEuiMemoizedStyles } from '../../services';
 import { highContrastModeStyles, logicalCSS } from '../functions';
+import { euiDisabledSelector } from '../utility/selectors';
 
 /** Tentative usage; these exist only to be used as button directly when used within other components */
 export var SEVERITY_COLORS = ['neutral', 'risk'];
@@ -212,11 +213,11 @@ var _interactionStyles = function _interactionStyles(euiThemeContext, buttonColo
   var baseStyles = function baseStyles() {
     // button hover is applied as pseudo element with a transparent background-color
     if (type === 'overlay') {
-      return "\n        position: relative;\n        overflow: hidden;\n\n        &:hover:not(:disabled) {\n          &::before {\n            content: '';\n            position: absolute;\n            /* should stay under the content */\n            z-index: 0;\n            inset: 0;\n            background-color: ".concat(buttonColors.backgroundHover, ";\n            pointer-events: none;\n          }\n        }\n\n        &:active:not(:disabled) {\n          &::before {\n            ").concat(logicalCSS('width', '100%'), "\n            ").concat(logicalCSS('height', '100%'), "\n\n            content: '';\n            position: absolute;\n            inset: 0;\n            background-color: ").concat(buttonColors.backgroundActive, ";\n          }\n        }\n      ");
+      return "\n        position: relative;\n        overflow: hidden;\n\n        &:hover:not(".concat(euiDisabledSelector, ") {\n          &::before {\n            content: '';\n            position: absolute;\n            /* should stay under the content */\n            z-index: 0;\n            inset: 0;\n            background-color: ").concat(buttonColors.backgroundHover, ";\n            pointer-events: none;\n          }\n        }\n\n        &:active:not(").concat(euiDisabledSelector, ") {\n          &::before {\n            ").concat(logicalCSS('width', '100%'), "\n            ").concat(logicalCSS('height', '100%'), "\n\n            content: '';\n            position: absolute;\n            inset: 0;\n            background-color: ").concat(buttonColors.backgroundActive, ";\n          }\n        }\n      ");
     }
 
     // button hover is applied as opaque color
-    return "\n      &:hover:not(:disabled) {\n        background-color: ".concat(buttonColors.backgroundHover, ";\n      }\n\n      &:active:not(:disabled) {\n        background-color: ").concat(buttonColors.backgroundActive, ";\n      }\n    ");
+    return "\n      &:hover:not(".concat(euiDisabledSelector, ") {\n        background-color: ").concat(buttonColors.backgroundHover, ";\n      }\n\n      &:active:not(").concat(euiDisabledSelector, ") {\n        background-color: ").concat(buttonColors.backgroundActive, ";\n      }\n    ");
   };
   return "    \n    ".concat(highContrastModeStyles(euiThemeContext, {
     none: baseStyles(),
@@ -229,7 +230,7 @@ var _interactionStyles = function _interactionStyles(euiThemeContext, buttonColo
  */
 export var highContrastHoverIndicatorStyles = function highContrastHoverIndicatorStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
-  return "\n  &:hover:not(:disabled) {\n    transition: none;\n\n    /* using pseudo border to be able to control the color */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: ".concat(euiTheme.border.width.thin, ";\n      border: ").concat(euiTheme.border.width.thick, " solid var(--highContrastHoverIndicatorColor, ").concat(euiTheme.border.color, ");\n      border-radius: ").concat(mathWithUnits(euiTheme.border.radius.small, function (x) {
+  return "\n  &:hover:not(".concat(euiDisabledSelector, ") {\n    transition: none;\n\n    /* using pseudo border to be able to control the color */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: ").concat(euiTheme.border.width.thin, ";\n      border: ").concat(euiTheme.border.width.thick, " solid var(--highContrastHoverIndicatorColor, ").concat(euiTheme.border.color, ");\n      border-radius: ").concat(mathWithUnits(euiTheme.border.radius.small, function (x) {
     return x / 2;
   }), ";\n      background-color: transparent;\n      pointer-events: none;\n    }\n  }\n");
 };

package/es/global_styling/mixins/_typography.js

@@ -12,6 +12,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
+import { css } from '@emotion/react';
 import { euiLineHeightFromBaseline, euiFontSizeFromScale } from '../functions/typography';
 import { useEuiMemoizedStyles, useEuiTheme } from '../../services/theme';
 import { EuiThemeFontScales } from '../variables/typography';
@@ -56,6 +57,14 @@ export var euiTextTruncate = function euiTextTruncate() {
   , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 
+/**
+ * Emotion CSS wrapper around `euiTextTruncate` style.
+ */
+export var euiTextTruncateCSS = function euiTextTruncateCSS() {
+  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  return /*#__PURE__*/css(euiTextTruncate(maxWidth), ";;label:euiTextTruncateCSS;");
+};
+
 /**
  * Fixed-width numbers for tabular data
  */

package/eui.d.ts

@@ -1136,6 +1136,10 @@ declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
+}
+declare module '@elastic/eui/src/global_styling/utility/selectors' {
+	export const euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";
+
 }
 declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	import { type SerializedStyles } from '@emotion/react';
@@ -1387,6 +1391,10 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	 * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
 	 */
 	export const euiTextTruncate: (maxWidth?: CSSProperties["maxWidth"]) => string;
+	/**
+	 * Emotion CSS wrapper around `euiTextTruncate` style.
+	 */
+	export const euiTextTruncateCSS: (maxWidth?: CSSProperties["maxWidth"]) => import("@emotion/react").SerializedStyles;
 	/**
 	 * Fixed-width numbers for tabular data
 	 */
@@ -1514,10 +1522,6 @@ declare module '@elastic/eui/src/global_styling/utility/animations' {
 	export const euiAnimSlideX: (size: string) => import("@emotion/serialize").Keyframes;
 	export const euiAnimScale: import("@emotion/serialize").Keyframes;
 
-}
-declare module '@elastic/eui/src/global_styling/utility/selectors' {
-	export const euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";
-
 }
 declare module '@elastic/eui/src/global_styling' {
 	export * from '@elastic/eui/src/global_styling/reset/global_styles';
@@ -2049,6 +2053,12 @@ declare module '@elastic/eui/src/components/table/mobile/responsive_context' {
 	export const EuiTableIsResponsiveContext: import("react").Context<boolean>;
 	export const useEuiTableIsResponsive: () => boolean;
 
+}
+declare module '@elastic/eui/src/components/table/table_context' {
+	export const EuiTableVariantContext: import("react").Context<{
+	    hasBackground: boolean;
+	}>;
+
 }
 declare module '@elastic/eui/src/components/table/table.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -2073,6 +2083,7 @@ declare module '@elastic/eui/src/components/table/table.styles' {
 	        fixed: import("@emotion/react").SerializedStyles;
 	        auto: import("@emotion/react").SerializedStyles;
 	    };
+	    hasBackground: import("@emotion/react").SerializedStyles;
 	    /**
 	     * 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.
@@ -2109,8 +2120,14 @@ declare module '@elastic/eui/src/components/table/table' {
 	    responsiveBreakpoint?: EuiBreakpointSize | boolean;
 	    /**
 	     * Sets the table-layout CSS property
+	     * @default 'fixed'
 	     */
 	    tableLayout?: 'fixed' | 'auto';
+	    /**
+	     * Toggle the table's background
+	     * @default true
+	     */
+	    hasBackground?: boolean;
 	}
 	export const EuiTable: FunctionComponent<EuiTableProps>;
 
@@ -2496,7 +2513,10 @@ declare module '@elastic/eui/src/components/table/table_cells_shared.styles' {
 	    euiTableHeaderCell: import("@emotion/react").SerializedStyles;
 	    euiTableHeaderCell__content: import("@emotion/react").SerializedStyles;
 	    euiTableHeaderCell__button: import("@emotion/react").SerializedStyles;
-	    euiTableFooterCell: import("@emotion/react").SerializedStyles;
+	    euiTableFooterCell: {
+	        euiTableFooterCell: import("@emotion/react").SerializedStyles;
+	        hasBackground: import("@emotion/react").SerializedStyles;
+	    };
 	};
 	export const euiTableCellCheckboxStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTableHeaderCellCheckbox: import("@emotion/react").SerializedStyles;
@@ -5703,13 +5723,18 @@ declare module '@elastic/eui/src/components/table/table_row.styles' {
 	    euiTableRow: import("@emotion/react").SerializedStyles;
 	    desktop: {
 	        desktop: import("@emotion/react").SerializedStyles;
-	        expanded: import("@emotion/react").SerializedStyles;
+	        expanded: {
+	            expanded: import("@emotion/react").SerializedStyles;
+	            hasBackground: string;
+	        };
 	        clickable: import("@emotion/react").SerializedStyles;
 	        selected: import("@emotion/react").SerializedStyles;
 	        checkboxOffset: import("@emotion/react").SerializedStyles;
 	    };
 	    mobile: {
 	        mobile: import("@emotion/react").SerializedStyles;
+	        hasBorder: string;
+	        hasBackground: import("@emotion/react").SerializedStyles;
 	        selected: import("@emotion/react").SerializedStyles;
 	        /**
 	         * Left column offset (no border)
@@ -7369,6 +7394,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
 	    /**
 	     * Alignment of the popover and arrow relative to the button
+	     * @default downLeft
 	     */
 	    anchorPosition?: PopoverAnchorPosition;
 	    /**
@@ -7398,6 +7424,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    focusTrapProps?: Partial<EuiFocusTrapProps>;
 	    /**
 	     * Show arrow indicating to originating button
+	     * @default false
 	     */
 	    hasArrow?: boolean;
 	    /**
@@ -7475,6 +7502,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    zIndex?: number;
 	    /**
 	     * Distance away from the anchor that the popover will render
+	     * @default 4 (0 when `hasArrow=true`)
 	     */
 	    offset?: number;
 	    /**
@@ -18556,7 +18584,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
 	    isQuickSelectOnly: import("@emotion/react").SerializedStyles;
 	    euiSuperDatePicker__range: import("@emotion/react").SerializedStyles;
 	    euiSuperDatePicker__rangeInput: import("@emotion/react").SerializedStyles;
-	    euiSuperDatePicker__prettyFormat: import("@emotion/react").SerializedStyles;
+	    euiSuperDatePicker__prettyDurationTooltip: import("@emotion/react").SerializedStyles;
 	    states: {
 	        euiSuperDatePicker__formControlLayout: import("@emotion/react").SerializedStyles;
 	        default: import("@emotion/react").SerializedStyles;
@@ -25386,7 +25414,8 @@ declare module '@elastic/eui/src/components/tour/tour_step' {
 	     */
 	    title: ReactNode;
 	    /**
-	     * Extra visual indication of step location
+	     * Extra visual indication of step location.
+	     * It does not apply when `hasArrow=false`
 	     */
 	    decoration?: 'none' | 'beacon';
 	    /**

package/lib/components/basic_table/basic_table.js

@@ -26,7 +26,7 @@ var _delay_render = require("../delay_render");
 var _accessibility2 = require("../../services/accessibility");
 var _basic_table = require("./basic_table.styles");
 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"],
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -376,6 +376,7 @@ var EuiBasicTable = exports.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 = (0, _classnames.default)('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -393,6 +394,7 @@ var EuiBasicTable = exports.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 (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
@@ -401,6 +403,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableLayout: tableLayout,
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
+        hasBackground: hasBackground,
         css: loading && _basic_table.safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }

package/lib/components/breadcrumbs/_breadcrumb_content.js

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

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

@@ -47,6 +47,6 @@ var _highContrastStyles = function _highContrastStyles(euiThemeContext, compress
   var euiTheme = euiThemeContext.euiTheme;
   return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
     preferred: compressed ? "\n        .euiButtonGroupButton {\n          border: none;\n        }\n      " : '',
-    forced: "\n      .euiButtonGroupButton-isSelected {\n        ".concat((0, _high_contrast.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((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n        color: ").concat(euiTheme.colors.emptyShade, ";\n        background-color: ").concat(euiTheme.colors.fullShade, ";\n\n        &:is(:hover, :focus):not(").concat(_global_styling.euiDisabledSelector, ") {\n          &::before {\n            border-color: ").concat(euiTheme.colors.textInverse, ";\n          }\n        }\n      }\n\n      .euiButtonGroupButton:is(").concat(_global_styling.euiDisabledSelector, ") {\n        opacity: 0.5;\n      }\n    ")
   });
 };

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

@@ -96,7 +96,7 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
     },
     compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";font-weight:", euiTheme.font.weight.medium, ";padding:0;margin:", euiTheme.size.xxs, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
-    }), ";&+.euiButtonGroupButton{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";}&:is(", selectedSelectors, "):not(:disabled){border:none;", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    }), ";&+.euiButtonGroupButton{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";}&:is(", selectedSelectors, "):not(", _global_styling.euiDisabledSelector, "){border:none;", (0, _global_styling.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((0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
         return x * 3;
       }), ";\n            }\n          ")

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

@@ -107,10 +107,16 @@ var EuiAbsoluteTab = exports.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 = (0, _moment.default)(textInputValue, ALLOWED_USER_DATE_FORMATS, true).isValid();
+
       // Attempt to parse with passed `dateFormat` and `locale`
       var _valueAsMoment = (0, _moment.default)(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/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -11,9 +11,11 @@ var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
 var _services = require("../../../services");
 var _predicate = require("../../../services/predicate");
+var _global_styling = require("../../../global_styling");
 var _context = require("../../context");
 var _date_picker_range = require("../date_picker_range");
 var _form = require("../../form");
+var _tool_tip = require("../../tool_tip");
 var _time_options = require("./time_options");
 var _pretty_duration = require("./pretty_duration");
 var _time_window_buttons = require("./time_window_buttons");
@@ -308,22 +310,38 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
       };
       var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && (0, _react2.jsx)(_form.EuiFormControlButton, {
-          type: "button",
-          css: styles.euiSuperDatePicker__prettyFormat,
-          className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
-            'euiSuperDatePicker__prettyFormat--disabled': isDisabled
-          }),
-          "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: !!isDisabled,
-          onClick: _this.hidePrettyDuration,
-          onFocus: onFocus
-        }, isDisabledDisplay ? isDisabled.display : (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
-          timeFrom: start,
-          timeTo: end,
-          quickRanges: commonlyUsedRanges,
-          dateFormat: dateFormat
-        })));
+        // Tooltip content with full range
+        var startMoment = _datemath.default.parse(start);
+        var endMoment = _datemath.default.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 (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiTheme) {
+          return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+            css: styles.euiSuperDatePicker__prettyDurationTooltip,
+            content: formattedFullRange,
+            display: "block",
+            offset: euiTheme.euiTheme.base * 0.5
+          }, (0, _react2.jsx)(_form.EuiFormControlButton, {
+            type: "button",
+            className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
+              'euiSuperDatePicker__prettyFormat--disabled': isDisabled
+            }),
+            compressed: compressed,
+            "data-test-subj": "superDatePickerShowDatesButton",
+            disabled: !!isDisabled,
+            onClick: _this.hidePrettyDuration,
+            onFocus: onFocus
+          }, isDisabledDisplay ? isDisabled.display : (0, _react2.jsx)("span", {
+            css: (0, _global_styling.euiTextTruncateCSS)()
+          }, (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
+            timeFrom: start,
+            timeTo: end,
+            quickRanges: commonlyUsedRanges,
+            dateFormat: dateFormat
+          })))));
+        });
       }
       var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
 

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

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

package/lib/components/flex/flex_item.js

@@ -28,15 +28,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;
   (0, _react.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 = [_flex_item.euiFlexItemStyles.euiFlexItem, !grow ? _flex_item.euiFlexItemStyles.growZero : _flex_item.euiFlexItemStyles.grow, grow && (typeof grow === 'number' ? _flex_item.euiFlexItemStyles.growSizes[grow] : _flex_item.euiFlexItemStyles.growSizes['1'])];
   var classes = (0, _classnames.default)('euiFlexItem', className);
 

package/lib/components/popover/input_popover.js

@@ -16,7 +16,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
 var _popover = require("./popover");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -73,6 +73,8 @@ var EuiInputPopover = exports.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 = (0, _classnames.default)('euiInputPopover', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -211,6 +213,7 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
     closePopover: closePopover,
     anchorPosition: anchorPosition,
     attachToAnchor: attachToAnchor,
+    offset: offset,
     repositionToCrossAxis: repositionToCrossAxis,
     panelPaddingSize: panelPaddingSize,
     ownFocus: ownFocus

package/lib/components/popover/popover.js

@@ -213,8 +213,8 @@ var EuiPopover = exports.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) {
@@ -551,14 +551,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.default.any,
   /**
@@ -588,6 +589,7 @@ EuiPopover.propTypes = {
   focusTrapProps: _propTypes.default.any,
   /**
      * Show arrow indicating to originating button
+     * @default false
      */
   hasArrow: _propTypes.default.bool,
   /**
@@ -665,6 +667,7 @@ EuiPopover.propTypes = {
   zIndex: _propTypes.default.number,
   /**
      * Distance away from the anchor that the popover will render
+     * @default 4 (0 when `hasArrow=true`)
      */
   offset: _propTypes.default.number,
   /**

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

@@ -37,6 +37,7 @@ var EuiSelectableTemplateSitewidePopover = exports.EuiSelectableTemplateSitewide
   var styles = (0, _services.useEuiMemoizedStyles)(_selectable_template_sitewide.euiSelectableTemplateSitewidePopoverStyles);
   return (0, _react2.jsx)(_popover.EuiPopover, _extends({
     panelPaddingSize: "none",
+    anchorPosition: "downCenter",
     isOpen: isOpen,
     ownFocus: !!trigger,
     display: trigger ? 'inline-block' : 'block'

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

@@ -14,11 +14,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 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" ? {