@elastic/eui 109.1.0 → 110.0.0-snapshot.1764684698664

package/test-env/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/test-env/components/table/table_footer_cell.js

@@ -1,19 +1,21 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
 /*
@@ -23,6 +25,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,
@@ -31,11 +35,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/test-env/components/table/table_row.js

@@ -1,17 +1,19 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
@@ -22,6 +24,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,
@@ -34,8 +38,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/test-env/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/test-env/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/test-env/components/tool_tip/tool_tip_anchor.js

@@ -11,6 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
@@ -37,11 +38,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/test-env/components/tour/tour_step.js

@@ -21,7 +21,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
@@ -57,6 +57,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,
@@ -118,8 +119,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"
@@ -187,7 +189,8 @@ EuiTourStep.propTypes = {
        */
   title: _propTypes.default.node.isRequired,
   /**
-       * Extra visual indication of step location
+       * Extra visual indication of step location.
+       * It does not apply when `hasArrow=false`
        */
   decoration: _propTypes.default.oneOf(["none", "beacon"]),
   /**

package/test-env/global_styling/mixins/_button.js

@@ -11,6 +11,7 @@ var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _services = require("../../services");
 var _functions = require("../functions");
+var _selectors = require("../utility/selectors");
 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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -208,11 +209,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((0, _functions.logicalCSS)('width', '100%'), "\n            ").concat((0, _functions.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(_selectors.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(_selectors.euiDisabledSelector, ") {\n          &::before {\n            ").concat((0, _functions.logicalCSS)('width', '100%'), "\n            ").concat((0, _functions.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(_selectors.euiDisabledSelector, ") {\n        background-color: ").concat(buttonColors.backgroundHover, ";\n      }\n\n      &:active:not(").concat(_selectors.euiDisabledSelector, ") {\n        background-color: ").concat(buttonColors.backgroundActive, ";\n      }\n    ");
   };
   return "    \n    ".concat((0, _functions.highContrastModeStyles)(euiThemeContext, {
     none: baseStyles(),
@@ -225,7 +226,7 @@ var _interactionStyles = function _interactionStyles(euiThemeContext, buttonColo
  */
 var highContrastHoverIndicatorStyles = exports.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((0, _euiThemeCommon.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+  return "\n  &:hover:not(".concat(_selectors.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((0, _euiThemeCommon.mathWithUnits)(euiTheme.border.radius.small, function (x) {
     return x / 2;
   }), ";\n      background-color: transparent;\n      pointer-events: none;\n    }\n  }\n");
 };

package/test-env/global_styling/mixins/_typography.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiFontSize = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
+exports.useEuiFontSize = exports.euiTextTruncateCSS = exports.euiTextTruncate = exports.euiTextBreakWord = exports.euiNumberFormat = exports.euiFontSize = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
 var _typography = require("../functions/typography");
 var _theme = require("../../services/theme");
 var _typography2 = require("../variables/typography");
@@ -58,6 +59,14 @@ var euiTextTruncate = exports.euiTextTruncate = function euiTextTruncate() {
   , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 
+/**
+ * Emotion CSS wrapper around `euiTextTruncate` style.
+ */
+var euiTextTruncateCSS = exports.euiTextTruncateCSS = function euiTextTruncateCSS() {
+  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  return /*#__PURE__*/(0, _react.css)(euiTextTruncate(maxWidth), ";;label:euiTextTruncateCSS;");
+};
+
 /**
  * Fixed-width numbers for tabular data
  */

package/test-env/services/string/to_initials.js

@@ -13,6 +13,8 @@ exports.toInitials = toInitials;
  * Side Public License, v 1.
  */
 
+var MAX_INITIALS = exports.MAX_INITIALS = 2;
+
 /**
  * This function calculates the initials/acronym for a given name.
  * It defaults to only 2 characters and will take the first character (of each word).
@@ -24,11 +26,20 @@ exports.toInitials = toInitials;
  * @param {string} name The full name of the item to turn into initials
  * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
  * @param {string} initials (Optional) Custom initials (max 2 characters)
- * @returns {string} True if the color is dark, false otherwise.
  */
-
-var MAX_INITIALS = exports.MAX_INITIALS = 2;
 function toInitials(name, initialsLength, initials) {
+  // If `initials` provided, check if it's a single emoji
+  // in order to support complex, "multi-character" ones
+  if (initials && typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    var segmenter = new Intl.Segmenter('en', {
+      granularity: 'grapheme'
+    });
+    var segments = Array.from(segmenter.segment(initials));
+    if (segments.length === 1 && isEmoji(segments[0].segment)) {
+      return segments[0].segment;
+    }
+  }
+
   // Calculate the number of initials to show, maxing out at MAX_INITIALS
   var calculatedInitialsLength = initials ? initials.split('').length : name.split(' ').length;
   calculatedInitialsLength = calculatedInitialsLength > MAX_INITIALS ? MAX_INITIALS : calculatedInitialsLength;
@@ -51,5 +62,16 @@ function toInitials(name, initialsLength, initials) {
       calculatedInitials = name.substring(0, calculatedInitialsLength);
     }
   }
-  return calculatedInitials;
+  return calculatedInitials || '';
+}
+function isEmoji(str) {
+  /**
+   * The \p escape sequence allows matching a character based on its Unicode properties
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape
+   * @see https://www.unicode.org/Public/UCD/latest/ucd/emoji/emoji-data.txt
+   * @see https://www.unicode.org/reports/tr51/#Definitions
+   * @see https://util.unicode.org/UnicodeJsps/character.jsp?a=1F440&B1=Show
+   */
+  var emojiRegex = /(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDFF\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFF]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])/;
+  return emojiRegex.test(str);
 }