@elastic/eui 64.0.0 → 64.0.3

package/optimize/lib/global_styling/mixins/_helpers.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 
 var _theme = require("../../services/theme");
 
 var _color = require("../../services/color");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,7 +40,7 @@ var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat((0, _functions.logicalCSS)('width', scrollBarSize), "\n      ").concat((0, _functions.logicalCSS)('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 
 exports.euiScrollBarStyles = euiScrollBarStyles;
@@ -92,12 +94,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 var euiYScroll = function euiYScroll(euiTheme) {
   var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       height = _ref5.height;
 
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat((0, _functions.logicalCSS)('height', height || '100%'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-y', 'auto'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiYScroll = euiYScroll;
@@ -140,7 +141,7 @@ var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
 exports.useEuiYScrollWithShadows = useEuiYScrollWithShadows;
 
 var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiXScroll = euiXScroll;
@@ -196,5 +197,15 @@ var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     mask: mask
   });
 };
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+
+exports.useEuiOverflowScroll = useEuiOverflowScroll;
+
+var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat((0, _functions.logicalCSS)('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
+};
 
-exports.useEuiOverflowScroll = useEuiOverflowScroll;
+exports.euiFullHeight = euiFullHeight;

package/optimize/lib/global_styling/mixins/_states.js

@@ -23,7 +23,8 @@ var _services = require("../../services");
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
-var euiFocusRing = function euiFocusRing(euiTheme) {
+var euiFocusRing = function euiFocusRing(_ref) {
+  var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
@@ -51,9 +52,7 @@ var euiFocusRing = function euiFocusRing(euiTheme) {
 exports.euiFocusRing = euiFocusRing;
 
 var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = (0, _services.useEuiTheme)();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

package/optimize/lib/global_styling/mixins/_typography.js

@@ -9,6 +9,8 @@ var _typography = require("../functions/typography");
 
 var _hooks = require("../../services/theme/hooks");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,7 +56,8 @@ exports.euiTextBreakWord = euiTextBreakWord;
 
 var euiTextTruncate = function euiTextTruncate() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return "\n  max-width: ".concat(maxWidth, "; // Ensure that the node has a maximum width after which truncation can occur\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
+  return "\n  ".concat((0, _functions.logicalCSS)('max-width', maxWidth) // Ensure that the node has a maximum width after which truncation can occur
+  , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 /**
  * Fixed-width numbers for tabular data

package/optimize/lib/global_styling/reset/global_styles.js

@@ -55,7 +55,7 @@ var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiTheme), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiThemeContext), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return (0, _react2.jsx)(_react2.Global, {
     styles: styles
   });

package/optimize/lib/global_styling/utility/utility.js

@@ -5,14 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiUtilityClasses = void 0;
+exports.globalStyles = exports.EuiUtilityClasses = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _hooks = require("../../services/theme/hooks");
+
 var _screen_reader_only = require("../../components/accessibility/screen_reader_only/screen_reader_only.styles");
 
+var _mixins = require("../mixins");
+
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,11 +26,18 @@ var _screen_reader_only = require("../../components/accessibility/screen_reader_
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var globalStyles = /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";};label:globalStyles;");
+var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";}.eui-alignBaseline{vertical-align:baseline!important;}.eui-alignBottom{vertical-align:bottom!important;}.eui-alignMiddle{vertical-align:middle!important;}.eui-alignTop{vertical-align:top!important;}.eui-displayBlock{display:block!important;}.eui-displayInline{display:inline!important;}.eui-displayInlineBlock{display:inline-block!important;}.eui-fullWidth{display:block!important;", (0, _functions.logicalCSS)('width', '100% !important'), ";}.eui-fullHeight{", (0, _mixins.euiFullHeight)(), ";}.eui-textCenter{text-align:center!important;}.eui-textLeft{text-align:start!important;}.eui-textRight{text-align:end!important;}.eui-textNoWrap{white-space:nowrap!important;}.eui-textInheritColor{color:inherit!important;}.eui-textBreakWord{", (0, _mixins.euiTextBreakWord)(), ";}.eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}.eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}.eui-textTruncate{", (0, _mixins.euiTextTruncate)(), ";}.eui-textNumber{", (0, _mixins.euiNumberFormat)(euiThemeContext), ";}.eui-scrollBar{", (0, _mixins.euiScrollBarStyles)(euiThemeContext), ";}.eui-yScroll{", (0, _mixins.euiYScroll)(euiThemeContext), ";}.eui-xScroll{", (0, _mixins.euiXScroll)(euiThemeContext), ";}.eui-yScrollWithShadows{", (0, _mixins.euiYScrollWithShadows)(euiThemeContext), ";}.eui-xScrollWithShadows{", (0, _mixins.euiXScrollWithShadows)(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
+
+exports.globalStyles = globalStyles;
 
 var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = (0, _hooks.useEuiTheme)();
   return (0, _react2.jsx)(_react2.Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };
 

package/optimize/lib/services/theme/hooks.js

@@ -32,11 +32,14 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = (0, _react.useMemo)(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 
 exports.useEuiTheme = useEuiTheme;
@@ -47,17 +50,9 @@ var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return (0, _react2.jsx)(Component, (0, _extends2.default)({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "64.0.0",
+  "version": "64.0.3",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/datagrid/_data_grid_data_row.scss

@@ -104,6 +104,13 @@
   max-width: 400px !important;
   max-height: 400px !important;
   z-index: $euiZDataGridCellPopover !important;
+  // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
+  // (see https://github.com/elastic/eui/issues/6151)
+  // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
+  // since we don't use the popover arrow in any case for cell popovers
+  filter: none;
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
 }
 
 .euiDataGridRowCell__expandFlex {

package/src/components/header/header_section/_header_section_item.scss

@@ -41,4 +41,4 @@
       display: none;
     }
   }
-}
+}

package/src/global_styling/mixins/_helpers.scss

@@ -82,6 +82,15 @@
   @include euiOverflowShadow('x');
 }
 
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+@mixin euiFullHeight {
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
 // Hiding elements offscreen to only be read by screen reader
 // See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
 @mixin euiScreenReaderOnly {

package/src/global_styling/utility/_utility.scss

@@ -1,84 +1,6 @@
 // This file utilizes !importants on purpose
 // sass-lint:disable no-important
 
-// Vertical alignment
-.eui-alignBaseline { vertical-align: baseline !important; }
-.eui-alignBottom { vertical-align: bottom !important; }
-.eui-alignMiddle { vertical-align: middle !important; }
-.eui-alignTop { vertical-align: top !important; }
-
-// Display
-.eui-displayBlock {display: block !important;}
-.eui-displayInline {display: inline !important;}
-.eui-displayInlineBlock {display: inline-block !important;}
-
-.eui-fullWidth {
-  display: block !important;
-  width: 100% !important;
-}
-
-// Text
-.eui-textCenter {text-align: center !important;}
-.eui-textLeft {text-align: left !important;}
-.eui-textRight {text-align: right !important;}
-.eui-textNoWrap {white-space: nowrap !important;}
-.eui-textInheritColor {color: inherit !important;}
-
-.eui-textBreakWord {
-  @include euiTextBreakWord;
-}
-
-.eui-textBreakAll {
-  overflow-wrap: break-word !important; // Fixes FF when dashes are involved #2288
-  word-break: break-all !important;
-}
-
-.eui-textBreakNormal {
-  overflow-wrap: normal !important;
-  word-wrap: normal !important;
-  word-break: normal !important;
-}
-
-.eui-textTruncate {
-  @include euiTextTruncate;
-}
-
-.eui-textNumber {
-  @include euiNumberFormat;
-}
-
-/**
- *  Responsive
- *
- *  1. Be sure to hide the element initially
- */
-
-[class*='eui-showFor'] {
-  display: none !important; /* 1 */
-}
-
-@each $size in $euiBreakpointKeys {
-  .eui-hideFor--#{$size} {
-    @include euiBreakpoint($size) { display: none !important; }
-  }
-
-  .eui-showFor--#{$size} {
-    @include  euiBreakpoint($size) { display: inline !important; }
-  }
-
-  .eui-showFor--#{$size}--block {
-    @include  euiBreakpoint($size) { display: block !important; }
-  }
-
-  .eui-showFor--#{$size}--inlineBlock {
-    @include  euiBreakpoint($size) { display: inline-block !important; }
-  }
-
-  .eui-showFor--#{$size}--flex {
-    @include  euiBreakpoint($size) { display: flex !important; }
-  }
-}
-
 /**
   * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
   * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
@@ -91,52 +13,3 @@
     flex-basis: 0%;
   }
 }
-
-/**
- * Scroll bar only
- */
-.eui-scrollBar {
-  @include euiScrollBar;
-}
-
-/**
-  * Overflow scrolling
-  */
-.eui-yScroll {
-  @include euiYScroll;
-}
-
-.eui-xScroll {
-  @include euiXScroll;
-}
-
-/**
-  * Overflow scrolling with shadows
-  */
-.eui-yScrollWithShadows {
-  @include euiYScrollWithShadows;
-}
-
-.eui-xScrollWithShadows {
-  @include euiXScrollWithShadows;
-}
-
-/**
-  * Forcing focus ring on non-EUI elements
-  */
-.eui-isFocusable:focus {
-  @include euiFocusRing('large');
-}
-
-/**
- * For quickly applying a full-height element whether using flex or not
- */
-@mixin euiFullHeight {
-  height: 100%;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
-.eui-fullHeight {
-  @include euiFullHeight;
-}

package/test-env/components/basic_table/collapsed_item_actions.js

@@ -98,8 +98,7 @@ var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClickItem", function (onClickAction) {

package/test-env/components/breadcrumbs/breadcrumb.styles.js

@@ -55,8 +55,8 @@ var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeCon
     isTruncated: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
     // Types
-    page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),
+    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
     applicationStyles: {
       onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ",;;label:onlyChild;"),
       firstChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, " 0 0 ", euiTheme.border.radius.medium, ";clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), ",;;label:firstChild;"),

package/test-env/components/button/button_display/_button_display.js

@@ -106,7 +106,12 @@ EuiButtonDisplay.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
   style: _propTypes.default.any,
 
   /**

package/test-env/components/button/button_empty/button_empty.js

@@ -199,7 +199,16 @@ EuiButtonEmpty.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Any `type` accepted by EuiIcon

package/test-env/components/card/card.js

@@ -414,7 +414,16 @@ EuiCard.propTypes = {
     /**
        * Object of props passed to the <span/> wrapping the button's content
        */
-    contentProps: _propTypes.default.any,
+
+    /**
+       * Object of props passed to the <span/> wrapping the button's content
+       */
+    contentProps: _propTypes.default.shape({
+      className: _propTypes.default.string,
+      "aria-label": _propTypes.default.string,
+      "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any
+    }),
 
     /**
        * Any `type` accepted by EuiIcon

package/test-env/components/card/card_select.js

@@ -111,7 +111,16 @@ EuiCardSelect.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Any `type` accepted by EuiIcon

package/test-env/components/date_picker/auto_refresh/auto_refresh.js

@@ -212,7 +212,12 @@ EuiAutoRefreshButton.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)

package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -100,7 +100,12 @@ var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
 exports.EuiDatePopoverButton = EuiDatePopoverButton;
 EuiDatePopoverButton.propTypes = {
   className: _propTypes.default.string,
-  buttonProps: _propTypes.default.any,
+  buttonProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
   dateFormat: _propTypes.default.string.isRequired,
   isDisabled: _propTypes.default.bool,
   isInvalid: _propTypes.default.bool,

package/test-env/components/description_list/description_list_title.js

@@ -48,7 +48,7 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_title.euiDescriptionListTitleStyles)(theme);
-  var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+  var conditionalStyles = compressed && textStyle !== 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
 
   switch (type) {
     case 'inline':

package/test-env/components/expression/expression.js

@@ -109,7 +109,12 @@ EuiExpression.propTypes = {
      * First part of the expression
      */
   description: _propTypes.default.node.isRequired,
-  descriptionProps: _propTypes.default.any,
+  descriptionProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Second part of the expression
@@ -119,7 +124,12 @@ EuiExpression.propTypes = {
      * Second part of the expression
      */
   value: _propTypes.default.node,
-  valueProps: _propTypes.default.any,
+  valueProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Color of the `description`

package/test-env/components/header/header_links/header_link.js

@@ -104,7 +104,16 @@ EuiHeaderLink.propTypes = {
   /**
      * Object of props passed to the <span/> wrapping the button's content
      */
-  contentProps: _propTypes.default.any,
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Any `type` accepted by EuiIcon

package/test-env/components/header/header_section/header_section_item.js

@@ -32,10 +32,11 @@ var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 
 exports.EuiHeaderSectionItem = EuiHeaderSectionItem;

package/test-env/components/image/image.js

@@ -174,5 +174,10 @@ EuiImage.propTypes = {
   /**
        * Props to add to the wrapping figure element
        */
-  wrapperProps: _propTypes.default.any
+  wrapperProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  })
 };

package/test-env/components/image/image_button.styles.js

@@ -17,7 +17,7 @@ var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiTheme, 'outset'), ";};label:euiImageButton;"),
+    euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     shadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 's'), ";};label:shadowHover;"),
     hasShadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";};label:hasShadowHover;")

package/test-env/components/link/link.styles.js

@@ -27,8 +27,9 @@ var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
 
 exports.euiLinkFocusCSS = euiLinkFocusCSS;
 
-var euiLinkCSS = function euiLinkCSS(euiTheme) {
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiTheme, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 exports.euiLinkCSS = euiLinkCSS;
@@ -42,10 +43,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiLinkStyles = function euiLinkStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLink: /*#__PURE__*/(0, _react.css)(euiLinkCSS(euiTheme), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
+    euiLink: /*#__PURE__*/(0, _react.css)(euiLinkCSS(euiThemeContext), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
     disabled: _ref,
     // Color styles
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),