@elastic/eui 64.0.0 → 64.0.3

package/es/components/basic_table/collapsed_item_actions.js

@@ -94,8 +94,7 @@ export var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });
 

package/es/components/breadcrumbs/breadcrumb.styles.js

@@ -50,8 +50,8 @@ export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiT
     isTruncated: /*#__PURE__*/css(euiTextTruncate("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/css(euiTextTruncate('none'), ";;label:isTruncatedLast;"),
     // Types
-    page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiTheme, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiTheme, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";background-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, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", transparentize(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", euiFocusRing(euiTheme, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiThemeContext, 'center'), ";};label:page;"),
+    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";background-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, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", transparentize(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", euiFocusRing(euiThemeContext, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
     applicationStyles: {
       onlyChild: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", logicalCSS('padding-horizontal', euiTheme.size.m), ",;;label:onlyChild;"),
       firstChild: /*#__PURE__*/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        );", logicalCSS('padding-left', euiTheme.size.m), ",;;label:firstChild;"),

package/es/components/button/button_display/_button_display.js

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

package/es/components/button/button_empty/button_empty.js

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

package/es/components/card/card.js

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

package/es/components/card/card_select.js

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

package/es/components/date_picker/auto_refresh/auto_refresh.js

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

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

@@ -16,7 +16,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-// eslint-disable-line import/named
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover } from '../../../popover';
 import { useFormatTimeString } from '../pretty_duration';
@@ -93,7 +92,12 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
 };
 EuiDatePopoverButton.propTypes = {
   className: PropTypes.string,
-  buttonProps: PropTypes.any,
+  buttonProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
   dateFormat: PropTypes.string.isRequired,
   isDisabled: PropTypes.bool,
   isInvalid: PropTypes.bool,

package/es/components/description_list/description_list_title.js

@@ -46,7 +46,7 @@ export var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
 
   var theme = useEuiTheme();
   var styles = 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/es/components/expression/expression.js

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

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

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

package/es/components/header/header_section/header_section_item.js

@@ -29,10 +29,11 @@ export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return ___EmotionJSX("div", _extends({
+  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 EuiHeaderSectionItem.propTypes = {
   className: PropTypes.string,

package/es/components/image/image.js

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

package/es/components/image/image_button.styles.js

@@ -14,7 +14,7 @@ export var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext)
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageButton: /*#__PURE__*/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;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiTheme, 'outset'), ";};label:euiImageButton;"),
+    euiImageButton: /*#__PURE__*/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;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;"),
     shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's'), ";};label:shadowHover;"),
     hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm'), ";};label:hasShadowHover;")

package/es/components/link/link.styles.js

@@ -20,8 +20,9 @@ export var euiLinkHoverCSS = function euiLinkHoverCSS() {
 export var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
   return "\n    text-decoration: underline;\n    text-decoration-thickness: ".concat(euiTheme.border.width.thick, " !important;\n  ");
 };
-export 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(euiFocusRing(euiTheme, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+export 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(euiFocusRing(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -33,10 +34,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiLinkStyles = function euiLinkStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLink: /*#__PURE__*/css(euiLinkCSS(euiTheme), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
+    euiLink: /*#__PURE__*/css(euiLinkCSS(euiThemeContext), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
     disabled: _ref,
     // Color styles
     primary: /*#__PURE__*/css(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),

package/es/components/notification/notification_event.js

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

package/es/components/page/page_content/page_content.js

@@ -26,8 +26,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 export var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/es/components/page/page_content/page_content_body.js

@@ -30,8 +30,7 @@ var paddingSizeToClassNameMap = {
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 export var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_content/page_content_header.js

@@ -19,8 +19,7 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 export var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_content/page_content_header_section.js

@@ -19,8 +19,7 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 export var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_section/page_section.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -34,6 +34,8 @@ export var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // Set max-width as a style prop
@@ -46,7 +48,7 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return ___EmotionJSX("div", _extends({
+  return ___EmotionJSX(Component, _extends({
     css: cssStyles
   }, rest), ___EmotionJSX("div", _extends({
     css: cssContentStyles
@@ -99,5 +101,15 @@ EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: PropTypes.any
+  contentProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };

package/es/components/page/page_side_bar/page_side_bar.js

@@ -27,8 +27,7 @@ var paddingSizeToClassNameMap = {
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 export var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_sidebar/page_sidebar.js

@@ -64,13 +64,17 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   useEffect(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = _typeof(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth)), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return ___EmotionJSX("div", _extends({
     className: className,

package/es/components/page/page_template.js

@@ -38,7 +38,9 @@ export var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 /**
  * This component has been deprecated in favor of the new
  * namespaced version. You can still import this component
- * for a period of time by importing `as EuiPageTemplate`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 export var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/es/components/page_template/empty_prompt/page_empty_prompt.js

@@ -103,6 +103,16 @@ _EuiPageEmptyPrompt.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: PropTypes.any,
+  contentProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired]),
   panelled: PropTypes.bool
 };

package/es/components/page_template/page_template.js

@@ -299,7 +299,17 @@ _EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: PropTypes.any
+  contentProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };
 
 var _EuiPageHeader = function _EuiPageHeader(props) {
@@ -348,7 +358,13 @@ _EuiPageEmptyPrompt.propTypes = {
   paddingSize: PropTypes.any,
   alignment: PropTypes.any,
   grow: PropTypes.bool,
-  contentProps: PropTypes.any,
+  contentProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired]),
   panelled: PropTypes.bool
 };
 

package/es/components/pagination/pagination_button.js

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

package/es/components/progress/progress.js

@@ -140,5 +140,10 @@ EuiProgress.propTypes = {
   /**
        * Object of props passed to the <span/> wrapping the determinate progress's label
        */
-  labelProps: PropTypes.any
+  labelProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  })
 };

package/es/components/provider/cache/cache_provider.js

@@ -6,18 +6,12 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var defaultCache = createCache({
-  key: 'css'
-});
-defaultCache.compat = true;
 export var EuiCacheProvider = function EuiCacheProvider(_ref) {
-  var _ref$cache = _ref.cache,
-      cache = _ref$cache === void 0 ? defaultCache : _ref$cache,
+  var cache = _ref.cache,
       children = _ref.children;
-  return ___EmotionJSX(CacheProvider, {
+  return children && cache ? ___EmotionJSX(CacheProvider, {
     value: cache
-  }, children);
+  }, children) : ___EmotionJSX(React.Fragment, null, children);
 };

package/es/components/provider/provider.js

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 import React from 'react';
+import createCache from '@emotion/cache';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
@@ -17,8 +18,15 @@ var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
 };
 
+var fallbackCache = createCache({
+  key: 'css'
+});
+fallbackCache.compat = true;
 export var EuiProvider = function EuiProvider(_ref) {
-  var cache = _ref.cache,
+  var _defaultCache;
+
+  var _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? fallbackCache : _ref$cache,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? EuiThemeAmsterdam : _ref$theme,
       _ref$globalStyles = _ref.globalStyles,
@@ -34,16 +42,31 @@ export var EuiProvider = function EuiProvider(_ref) {
 
   if (cache) {
     if (isEmotionCacheObject(cache)) {
+      cache.compat = true;
       defaultCache = cache;
     } else {
+      if (cache.default) {
+        cache.default.compat = true;
+      }
+
       defaultCache = cache.default;
+
+      if (cache.global) {
+        cache.global.compat = true;
+      }
+
       globalCache = cache.global;
+
+      if (cache.utility) {
+        cache.utility.compat = true;
+      }
+
       utilityCache = cache.utility;
     }
   }
 
   return ___EmotionJSX(EuiCacheProvider, {
-    cache: defaultCache
+    cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
   }, ___EmotionJSX(EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
     colorMode: colorMode,

package/es/components/resizable_container/resizable_panel.js

@@ -331,7 +331,12 @@ EuiResizablePanel.propTypes = {
   /**
      * Props to add to the wrapping `.euiResizablePanel` div
      */
-  wrapperProps: PropTypes.any,
+  wrapperProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
 
   /**
      * Padding to add directly to the wrapping `.euiResizablePanel` div

package/es/components/side_nav/side_nav.js

@@ -255,6 +255,11 @@ EuiSideNav.propTypes = {
        * Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading`
        */
   headingProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
+
     /**
        * The actual HTML heading element to wrap the `heading`.
        * Default is `h2`

package/es/components/text/text.styles.js

@@ -58,7 +58,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiTheme), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/css(euiScaleText(euiThemeContext, {