@elastic/eui 66.0.0 → 67.1.0

package/lib/components/badge/badge.styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBadgeStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+var _services = require("../../services");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;"
+} : {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  return {
+    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", parseFloat(String(euiTheme.border.radius.medium)) / 2, "px;", (0, _global_styling.logicalTextAlignCSS)('left'), " &:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').color, "!important;background-color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
+    // Hollow has a border and is mostly used for autocompleters.
+    hollow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
+    // Content wrapper
+    euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)( // Ensure proper height in case of just displaying an icon
+    'min-height', "".concat(euiTheme.base + parseFloat(String(euiTheme.border.width.thin)) * 2, "px")), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
+    // Text
+    text: {
+      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " cursor:inherit;;label:euiBadge__text;"),
+      clickable: _ref
+    },
+    // Icon
+    icon: {
+      euiBadge__icon: /*#__PURE__*/(0, _react.css)(";label:euiBadge__icon;"),
+      right: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";};label:left;")
+    },
+    // Clickable icons (iconOnClick)
+    iconButton: {
+      euiBadge__iconButton: /*#__PURE__*/(0, _react.css)("font-size:0;&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", parseFloat(String(euiTheme.border.radius.small)) / 2, "px;}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:left;")
+    },
+    // Used in badges with both onClick & iconOnClick
+    euiBadge__childButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " text-align:inherit;font-weight:inherit;line-height:inherit;color:inherit;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover,&:focus{text-decoration:underline;}};label:euiBadge__childButton;")
+  };
+};
+
+exports.euiBadgeStyles = euiBadgeStyles;

package/lib/components/basic_table/in_memory_table.js

@@ -554,6 +554,10 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 
       if (sortName !== prevState.prevProps.sortName || sortDirection !== prevState.prevProps.sortDirection) {
         updatedPrevState = _objectSpread(_objectSpread({}, updatedPrevState), {}, {
+          prevProps: _objectSpread(_objectSpread({}, updatedPrevState.prevProps), {}, {
+            sortName: sortName,
+            sortDirection: sortDirection
+          }),
           sortName: sortName,
           sortDirection: sortDirection
         });
@@ -1125,6 +1129,10 @@ EuiInMemoryTable.propTypes = {
         operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
       }).isRequired).isRequired,
       available: _propTypes.default.func
+    }).isRequired, _propTypes.default.shape({
+      type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+      component: _propTypes.default.elementType.isRequired,
+      available: _propTypes.default.func
     }).isRequired]).isRequired),
 
     /**

package/lib/components/button/button.js

@@ -153,7 +153,6 @@ EuiButton.propTypes = {
 EuiButton.displayName = 'EuiButton'; // Use defaultProps for simple pass-through props
 
 EuiButton.defaultProps = {
-  minWidth: 112,
   size: 'm',
   color: 'primary'
 };

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

@@ -24,7 +24,7 @@ var _href_validator = require("../../../services/security/href_validator");
 
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 
-var _excluded = ["children", "iconType", "iconSide", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type"];
+var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,6 +63,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   var children = _ref2.children,
       iconType = _ref2.iconType,
       iconSide = _ref2.iconSide,
+      iconSize = _ref2.iconSize,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'm' : _ref2$size,
       isDisabled = _ref2.isDisabled,
@@ -78,6 +79,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
       rel = _ref2.rel,
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'button' : _ref2$type,
+      style = _ref2.style,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   var buttonIsDisabled = isButtonDisabled({
@@ -85,9 +87,8 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var minWidthPx = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
   var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_display.euiButtonDisplayStyles)(theme, minWidthPx);
+  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
   var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
@@ -95,6 +96,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: buttonIsDisabled,
     iconType: iconType,
     iconSide: iconSide,
+    iconSize: iconSize,
     textProps: _objectSpread({}, textProps)
   }, contentProps), children);
   var element = href && !buttonIsDisabled ? 'a' : 'button';
@@ -123,6 +125,9 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
+      minWidth: minWidth
+    }) : style,
     ref: ref
   }, elementProps), relObj), rest), innerNode);
 });
@@ -174,7 +179,16 @@ EuiButtonDisplay.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
+  }),
   style: _propTypes.default.any,
 
   /**
@@ -185,7 +199,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: _propTypes.default.oneOf(["left", "right", undefined]),
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
 
   /**
      * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
@@ -198,7 +212,7 @@ EuiButtonDisplay.propTypes = {
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
+  iconSize: _propTypes.default.any,
   isDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,

package/lib/components/button/button_display/_button_display.styles.js

@@ -32,11 +32,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext, minWidth) {
+var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", minWidth && (0, _global_styling.logicalCSS)('min-width', minWidth), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),

package/lib/components/button/button_display/_button_display_content.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiButtonDisplayContent = void 0;
+exports.ICON_SIZES = exports.ICON_SIDES = exports.EuiButtonDisplayContent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -31,6 +31,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+var ICON_SIZES = ['s', 'm'];
+exports.ICON_SIZES = ICON_SIZES;
+var ICON_SIDES = ['left', 'right'];
+exports.ICON_SIDES = ICON_SIDES;
+
 var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
@@ -48,7 +53,7 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var styles = (0, _button_display_content.euiButtonDisplayContentStyles)(theme);
   var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide]];
   var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  var cssIconStyles = [styles.euiButtonDisplayContent__icon]; // Add an icon to the button if one exists.
+  var cssIconStyles = [styles.euiButtonDisplayContent__icon, iconSize && styles[iconSize]]; // Add an icon to the button if one exists.
 
   var icon; // When the button is disabled the text gets gray
   // and in some buttons the background gets a light gray
@@ -94,7 +99,7 @@ EuiButtonDisplayContent.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: _propTypes.default.oneOf(["left", "right", undefined]),
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
   isLoading: _propTypes.default.bool,
 
   /**
@@ -108,7 +113,7 @@ EuiButtonDisplayContent.propTypes = {
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
+  iconSize: _propTypes.default.any,
   isDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,

package/lib/components/button/button_display/_button_display_content.styles.js

@@ -47,7 +47,10 @@ var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyles(_ref4
     left: /*#__PURE__*/(0, _react.css)(";label:left;"),
     right: _ref3,
     euiButtonDisplayContent__spinner: _ref2,
-    euiButtonDisplayContent__icon: _ref
+    euiButtonDisplayContent__icon: _ref,
+    // Icon size
+    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(";label:m;")
   };
 };
 

package/lib/components/button/button_empty/button_empty.js

@@ -212,7 +212,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/lib/components/card/card.js

@@ -108,7 +108,7 @@ var EuiCard = function EuiCard(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isClickable = !isDisabled && (onClick || href || selectable && !selectable.isDisabled);
   var euiThemeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _card.euiCardStyles)(euiThemeContext, paddingSize, display);
+  var styles = (0, _card.euiCardStyles)(euiThemeContext, paddingSize);
   var cardStyles = [styles.card.euiCard, // Text alignment should always be left when horizontal
   styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], styles.card.layout[layout], isDisabled && styles.card.disabled];
   var contentStyles = [styles.content.euiCard__content, styles.content.layout[layout]];
@@ -154,7 +154,7 @@ var EuiCard = function EuiCard(_ref) {
 
   if (image && layout === 'vertical') {
     if ( /*#__PURE__*/(0, _react.isValidElement)(image) || typeof image === 'string') {
-      var imageStyles = [styles.euiCard__image];
+      var imageStyles = [styles.image.euiCard__image, display === 'transparent' && styles.image.transparent];
       imageNode = (0, _react2.jsx)("div", {
         className: "euiCard__image",
         css: imageStyles

package/lib/components/card/card.styles.js

@@ -57,7 +57,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color) {
+var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
   var spacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingKey);
@@ -94,7 +94,10 @@ var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color)
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+    image: {
+      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+      transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
+    },
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', '50%'), ";", (0, _global_styling.logicalCSS)('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/lib/components/collapsible_nav/collapsible_nav.js

@@ -199,11 +199,6 @@ EuiCollapsibleNav.propTypes = {
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any,
 
-    /**
-       * Function that applies to clicking the mask itself and not the children
-       */
-    onClick: _propTypes.default.func,
-
     /**
        * ReactNode to render as this component's content
        */

package/lib/components/date_picker/auto_refresh/auto_refresh.js

@@ -226,7 +226,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/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -103,7 +103,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/lib/components/expression/expression.js

@@ -112,7 +112,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
@@ -122,7 +127,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/lib/components/header/header_links/header_link.js

@@ -109,7 +109,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/lib/components/image/image.js

@@ -186,5 +186,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/lib/components/image/image_fullscreen_wrapper.js

@@ -81,10 +81,9 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
   var iconStyles = (0, _image_button2.euiImageButtonIconStyles)(euiTheme);
   var cssIconStyles = [iconStyles.euiImageButton__icon, iconStyles.closeFullScreen];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, {
-    "data-test-subj": "fullScreenOverlayMask",
-    onClick: closeFullScreen
+    "data-test-subj": "fullScreenOverlayMask"
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
-    clickOutsideDisables: true
+    onClickOutside: closeFullScreen
   }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", _extends({
     "aria-label": optionalCaptionText
   }, wrapperProps, {

package/lib/components/notification/notification_event.js

@@ -29,6 +29,8 @@ var _notification_event_read_icon = require("./notification_event_read_icon");
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["id", "type", "severity", "badgeColor", "iconType", "iconAriaLabel", "time", "title", "isRead", "primaryAction", "primaryActionProps", "messages", "onRead", "onOpenContextMenu", "onClickTitle", "onClickPrimaryAction", "headingLevel", "className"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,6 +39,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
   var id = _ref.id,
       type = _ref.type,
@@ -55,9 +61,13 @@ var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
       onClickTitle = _ref.onClickTitle,
       onClickPrimaryAction = _ref.onClickPrimaryAction,
       _ref$headingLevel = _ref.headingLevel,
-      headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel;
+      headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var classes = (0, _classnames.default)('euiNotificationEvent', {
-    'euiNotificationEvent--withReadState': typeof isRead === 'boolean'
+    'euiNotificationEvent--withReadState': typeof isRead === 'boolean',
+    className: className
   });
   var classesTitle = (0, _classnames.default)('euiNotificationEvent__title', {
     'euiNotificationEvent__title--isRead': isRead
@@ -68,11 +78,11 @@ var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
     className: classesTitle,
     'data-test-subj': "".concat(id, "-notificationEventTitle")
   };
-  return (0, _react2.jsx)("article", {
+  return (0, _react2.jsx)("article", _extends({
     "aria-labelledby": randomHeadingId,
     className: classes,
     key: id
-  }, typeof isRead === 'boolean' && (0, _react2.jsx)("div", {
+  }, rest), typeof isRead === 'boolean' && (0, _react2.jsx)("div", {
     className: "euiNotificationEvent__readButton"
   }, !!onRead ? (0, _react2.jsx)(_notification_event_read_button.EuiNotificationEventReadButton, {
     isRead: isRead,
@@ -134,7 +144,7 @@ EuiNotificationEvent.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  badgeColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.
@@ -172,9 +182,9 @@ EuiNotificationEvent.propTypes = {
      * Disables the button and changes the icon to a loading spinner
      */
   isLoading: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
 
   /**
        * A unique identifier
@@ -265,7 +275,16 @@ EuiNotificationEvent.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/lib/components/notification/notification_event_meta.js

@@ -165,7 +165,7 @@ EuiNotificationEventMeta.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  badgeColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.