@elastic/eui 109.1.0 → 110.0.0-snapshot.1764684698664

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

@@ -19,11 +19,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var iconLoadingOpacity = exports.iconLoadingOpacity = 0.05;
 var iconLoading = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: ", ";\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])), iconLoadingOpacity);
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "njd749-logoElasticOutline",
-  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;"
+  name: "p0011s-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;"
 } : {
-  name: "njd749-logoElasticOutline",
-  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;",
+  name: "p0011s-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {

package/optimize/lib/components/page/page.js

@@ -14,7 +14,7 @@ var _global_styling = require("../../global_styling");
 var _page = require("./page.styles");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction"];
+var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,13 +33,16 @@ var EuiPage = exports.EuiPage = function EuiPage(_ref) {
     grow = _ref$grow === void 0 ? true : _ref$grow,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _page.euiPageStyles)(euiTheme);
   var padding = (0, _global_styling.useEuiPaddingCSS)()[paddingSize];
-  var stylesCSS = [styles.euiPage, styles[direction], grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
+  var backgroundColor = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var stylesCSS = [styles.euiPage, styles[direction], backgroundColor, grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
   var classes = (0, _classnames.default)('euiPage', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: stylesCSS,

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

@@ -30,9 +30,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiPageStyles = exports.euiPageStyles = function euiPageStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiPage: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPage;"),
+    euiPage: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPage;"),
     // Grow
     grow: _ref2,
     // Direction

package/optimize/lib/components/page/page_header/page_header.js

@@ -14,7 +14,7 @@ var _global_styling = require("../../../global_styling");
 var _page_header_content = require("./page_header_content");
 var _page_header = require("./page_header.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
+var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "color", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,6 +29,8 @@ var EuiPageHeader = exports.EuiPageHeader = function EuiPageHeader(_ref) {
     _ref$paddingSize = _ref.paddingSize,
     paddingSize = _ref$paddingSize === void 0 ? 'none' : _ref$paddingSize,
     bottomBorder = _ref.bottomBorder,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     alignItems = _ref.alignItems,
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? true : _ref$responsive,
@@ -48,7 +50,8 @@ var EuiPageHeader = exports.EuiPageHeader = function EuiPageHeader(_ref) {
   var useTheme = (0, _services.useEuiTheme)();
   var styles = (0, _page_header.euiPageHeaderStyles)(useTheme);
   var inlinePadding = (0, _global_styling.useEuiPaddingCSS)('horizontal');
-  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border];
+  var backgroundColor = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, backgroundColor];
   var classes = (0, _classnames.default)('euiPageHeader', className);
   var contentProps = {
     restrictWidth: restrictWidth,

package/optimize/lib/components/page_template/outer/page_outer.js

@@ -29,8 +29,7 @@ var _EuiPageOuter = exports._EuiPageOuter = function _EuiPageOuter(_ref) {
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var themeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _page_outer.euiPageOuterStyles)(themeContext);
+  var styles = _page_outer.euiPageOuterStyles;
   var isResponding = (0, _services.useIsWithinBreakpoints)(responsive);
   var cssStyles = [styles.euiPageOuter, styles[isResponding ? 'column' : direction], grow && styles.grow];
   return (0, _react2.jsx)("div", (0, _extends2.default)({

package/optimize/lib/components/page_template/outer/page_outer.styles.js

@@ -13,39 +13,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;"
-} : {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;"
-} : {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;"
-} : {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiPageOuterStyles = exports.euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return {
-    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
-    ), ";;label:euiPageOuter;"),
-    // Grow
-    grow: _ref3,
-    // Direction
-    column: _ref2,
-    row: _ref
-  };
+var euiPageOuterStyles = exports.euiPageOuterStyles = {
+  euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+  ), ";;label:euiPageOuter;"),
+  // Grow
+  grow: process.env.NODE_ENV === "production" ? {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;"
+  } : {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  // Direction
+  column: process.env.NODE_ENV === "production" ? {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;"
+  } : {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  row: process.env.NODE_ENV === "production" ? {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;"
+  } : {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };

package/optimize/lib/components/page_template/page_template.js

@@ -107,7 +107,8 @@ var _EuiPageTemplate = exports._EuiPageTemplate = function _EuiPageTemplate(_ref
       header: {
         restrictWidth: restrictWidth,
         paddingSize: paddingSize,
-        bottomBorder: headerBottomBorder
+        bottomBorder: headerBottomBorder,
+        color: panelled === false ? 'transparent' : 'plain'
       },
       section: {
         restrictWidth: restrictWidth,

package/optimize/lib/components/popover/input_popover.js

@@ -20,7 +20,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
@@ -64,6 +64,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiInputPopover', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -202,6 +204,7 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
     closePopover: closePopover,
     anchorPosition: anchorPosition,
     attachToAnchor: attachToAnchor,
+    offset: offset,
     repositionToCrossAxis: repositionToCrossAxis,
     panelPaddingSize: panelPaddingSize,
     ownFocus: ownFocus

package/optimize/lib/components/popover/popover.js

@@ -198,8 +198,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) {
@@ -536,8 +536,8 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
   isOpen: false,
   ownFocus: true,
   repositionToCrossAxis: true,
-  anchorPosition: 'downCenter',
+  anchorPosition: 'downLeft',
   panelPaddingSize: 'm',
-  hasArrow: true,
+  hasArrow: false,
   display: 'inline-block'
 });

package/optimize/lib/components/selectable/selectable.js

@@ -84,6 +84,12 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
         _this.preventOnFocus = false;
         return;
       }
+      if (event && _this.props.searchable && event.target === _this.inputRef) {
+        _this.setState({
+          isFocused: true
+        });
+        return;
+      }
       if (!_this.state.visibleOptions.length || _this.state.activeOptionIndex != null) {
         return;
       }
@@ -459,8 +465,7 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
           onChange: _this2.onSearchChange,
           listId: _this2.optionsListRef.current ? _this2.listId : undefined // Only pass the listId if it exists on the page
           ,
-          "aria-activedescendant": _this2.makeOptionId(activeOptionIndex) // the current faux-focused option
-          ,
+          "aria-activedescendant": activeOptionIndex != null ? _this2.makeOptionId(activeOptionIndex) : undefined,
           placeholder: placeholderName,
           isPreFiltered: !!isPreFiltered,
           optionMatcher: optionMatcher,

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

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

package/optimize/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" ? {

package/optimize/lib/components/table/table.js

@@ -11,9 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _responsive_context = require("./mobile/responsive_context");
+var _table_context = require("./table_context");
 var _table = require("./table.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "compressed", "tableLayout", "responsiveBreakpoint"];
+var _excluded = ["children", "className", "compressed", "tableLayout", "hasBackground", "responsiveBreakpoint"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,17 +28,23 @@ var EuiTable = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isResponsive = (0, _responsive_context.useIsEuiTableResponsive)(responsiveBreakpoint);
   var classes = (0, _classnames.default)('euiTable', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_table.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 (0, _react2.jsx)("table", (0, _extends2.default)({
     tabIndex: -1,
     css: cssStyles,
     className: classes
   }, rest), (0, _react2.jsx)(_responsive_context.EuiTableIsResponsiveContext.Provider, {
     value: isResponsive
-  }, children));
+  }, (0, _react2.jsx)(_table_context.EuiTableVariantContext.Provider, {
+    value: {
+      hasBackground: hasBackground
+    }
+  }, children)));
 };

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

@@ -71,11 +71,12 @@ var euiTableStyles = exports.euiTableStyles = function euiTableStyles(euiThemeCo
     cellContentPadding = _euiTableVariables.cellContentPadding,
     compressedCellContentPadding = _euiTableVariables.compressedCellContentPadding;
   return {
-    euiTable: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiNumberFormat)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('width', '100%'), " border:none;border-collapse:collapse;background-color:", euiTheme.colors.emptyShade, ";;label:euiTable;"),
+    euiTable: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiNumberFormat)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('width', '100%'), " border:none;border-collapse:collapse;;label:euiTable;"),
     layout: {
       fixed: _ref3,
       auto: _ref2
     },
+    hasBackground: /*#__PURE__*/(0, _react.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/optimize/lib/components/table/table_cells_shared.styles.js

@@ -30,7 +30,10 @@ var euiTableHeaderFooterCellStyles = exports.euiTableHeaderFooterCellStyles = fu
     euiTableHeaderCell: /*#__PURE__*/(0, _react.css)(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
     euiTableHeaderCell__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.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__*/(0, _react.css)(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
+    euiTableFooterCell: {
+      euiTableFooterCell: /*#__PURE__*/(0, _react.css)(sharedStyles, ";;label:euiTableFooterCell;"),
+      hasBackground: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.tableFooterBackground, ";;label:hasBackground;")
+    }
   };
 };
 var euiTableCellCheckboxStyles = exports.euiTableCellCheckboxStyles = function euiTableCellCheckboxStyles(euiThemeContext) {

package/optimize/lib/components/table/table_context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiTableVariantContext = void 0;
+var _react = require("react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var EuiTableVariantContext = exports.EuiTableVariantContext = /*#__PURE__*/(0, _react.createContext)({
+  hasBackground: true
+});

package/optimize/lib/components/table/table_footer_cell.js

@@ -1,18 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiTableFooterCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _utils = require("./utils");
 var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
+var _table_context = require("./table_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "align", "className", "width", "style"];
 /*
@@ -22,6 +24,8 @@ var _excluded = ["children", "align", "className", "width", "style"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var EuiTableFooterCell = exports.EuiTableFooterCell = function EuiTableFooterCell(_ref) {
   var children = _ref.children,
     _ref$align = _ref.align,
@@ -30,11 +34,14 @@ var EuiTableFooterCell = exports.EuiTableFooterCell = function EuiTableFooterCel
     width = _ref.width,
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_table_context.EuiTableVariantContext),
+    hasBackground = _useContext.hasBackground;
   var classes = (0, _classnames.default)('euiTableFooterCell', className);
   var inlineStyles = (0, _utils.resolveWidthAsStyle)(style, width);
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableHeaderFooterCellStyles);
+  var cssStyles = [styles.euiTableFooterCell.euiTableFooterCell, hasBackground && styles.euiTableFooterCell.hasBackground];
   return (0, _react2.jsx)("td", (0, _extends2.default)({
-    css: styles.euiTableFooterCell,
+    css: cssStyles,
     className: classes,
     style: inlineStyles
   }, rest), (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, {

package/optimize/lib/components/table/table_row.js

@@ -1,16 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiTableRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _responsive_context = require("./mobile/responsive_context");
+var _table_context = require("./table_context");
 var _table_row = require("./table_row.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "hasSelection", "isSelected", "isSelectable", "hasActions", "isExpandedRow", "isExpandable", "onClick"];
@@ -21,6 +23,8 @@ var _excluded = ["children", "className", "hasSelection", "isSelected", "isSelec
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var EuiTableRow = exports.EuiTableRow = function EuiTableRow(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -33,8 +37,10 @@ var EuiTableRow = exports.EuiTableRow = function EuiTableRow(_ref) {
     onClick = _ref.onClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
+  var _useContext = (0, _react.useContext)(_table_context.EuiTableVariantContext),
+    hasBackground = _useContext.hasBackground;
   var styles = (0, _services.useEuiMemoizedStyles)(_table_row.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 = (0, _classnames.default)('euiTableRow', className, {
     'euiTableRow-isSelectable': isSelectable,
     'euiTableRow-isSelected': isSelected,

package/optimize/lib/components/table/table_row.styles.js

@@ -32,7 +32,11 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
     euiTableRow: /*#__PURE__*/(0, _react.css)(":where(&.euiTableRow--marked){background-color:", rowColors.marked.background, ";};label:euiTableRow;"),
     desktop: {
       desktop: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.hover, ";}", markedStyles, ";;label:desktop;"),
-      expanded: /*#__PURE__*/(0, _react.css)("background-color:", rowColors.hover, ";", expandedAnimationCss, ";;label:expanded;"),
+      expanded: {
+        expanded: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}", markedStyles, " &:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
       selected: /*#__PURE__*/(0, _react.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
@@ -40,9 +44,21 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       checkboxOffset: /*#__PURE__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _euiThemeCommon.euiShadow)(euiThemeContext, 's', {
+      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), " border-radius:", euiTheme.border.radius.medium, ";", (0, _supports.cssSupportsHasWithNextSibling)("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "\n              ").concat((0, _global_styling.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((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+        // uses pseudo-border to align dimensions with shadows applied by `hasBackground`
+        none: "\n            ".concat((0, _euiThemeCommon.euiBorderStyles)(euiThemeContext, {
+          side: 'all'
+        }), "\n            transform: translateZ(0);\n          "),
+        preferred: "\n            border: ".concat(euiTheme.border.thin, "\n          ")
+      }), "\n      "),
+      hasBackground: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 's', {
         borderAllInHighContrastMode: true
-      }), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";", (0, _supports.cssSupportsHasWithNextSibling)("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "\n              ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
+      }), " background-color:", euiTheme.colors.backgroundBasePlain, ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+        none: "\n            border: none;\n          "
+      }), ";;label:hasBackground;"),
       selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -61,7 +77,7 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       // On mobile, visually move the expanded row to join up with the
       // preceding table row via negative margins
       'margin-top', (0, _global_styling.mathWithUnits)([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
-        return (x + y * 2) * -1;
+        return (x + y) * -1;
       })), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), " &:after{", (0, _global_styling.logicalCSS)('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);>.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };

package/optimize/lib/components/table/table_row_cell.styles.js

@@ -74,10 +74,10 @@ var euiTableRowCellStyles = exports.euiTableRowCellStyles = function euiTableRow
       rightColumnContent: "\n        position: absolute;\n        ".concat((0, _global_styling.logicalCSS)('right', 0), "\n        ").concat((0, _global_styling.logicalCSS)('min-width', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('width', mobileSizes.actions.width), "\n      "),
       get actions() {
         // Note: Visible-on-hover actions on desktop always show on mobile
-        return /*#__PURE__*/(0, _react.css)(this.rightColumnContent, " ", (0, _global_styling.logicalCSS)('top', mobileSizes.actions.offset), ";;label:actions;");
+        return /*#__PURE__*/(0, _react.css)(this.rightColumnContent, " ", (0, _global_styling.logicalCSS)('top', mobileSizes.actions.offset), ".euiTableCellContent{padding:0;};label:actions;");
       },
       get expander() {
-        return /*#__PURE__*/(0, _react.css)(this.rightColumnContent, " ", (0, _global_styling.logicalCSS)('bottom', mobileSizes.actions.offset), ";;label:expander;");
+        return /*#__PURE__*/(0, _react.css)(this.rightColumnContent, ";;label:expander;");
       },
       /**
        * Custom actions may not be icons and therefore may not fit in a column
@@ -88,6 +88,6 @@ var euiTableRowCellStyles = exports.euiTableRowCellStyles = function euiTableRow
     },
     euiTableRowCell__mobileHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " font-size:", (0, _global_styling.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) &{", (0, _global_styling.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) &{", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), ";};label:euiTableRowCell__mobileHeader;")
   };
 };

package/optimize/lib/components/tool_tip/tool_tip_anchor.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _tool_tip = require("./tool_tip.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "className", "children", "display", "isVisible"];
@@ -36,11 +37,18 @@ var EuiToolTipAnchor = exports.EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwar
   var anchorCss = (0, _tool_tip.euiToolTipAnchorStyles)();
   var cssStyles = [anchorCss.euiToolTipAnchor, anchorCss[display]];
   var classes = (0, _classnames.default)('euiToolTipAnchor', className);
+  var anchorId = (0, _services.useGeneratedHtmlId)({
+    suffix: 'euiToolTipAnchor',
+    conditionalId: id ? "".concat(id, "-wrapper") : undefined
+  });
   return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     (0, _react2.jsx)("span", (0, _extends2.default)({
       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/optimize/lib/components/tour/tour_step.js

@@ -20,7 +20,7 @@ var _tour_header = require("./_tour_header");
 var _tour_footer = require("./_tour_footer");
 var _tour = require("./tour.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -56,6 +56,7 @@ var EuiTourStep = exports.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,
@@ -117,8 +118,9 @@ var EuiTourStep = exports.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 && (0, _react2.jsx)(_beacon.EuiBeacon, {
       css: beaconCss,
       className: "euiTour__beacon"