@elastic/eui 66.0.0 → 67.0.0

package/i18ntokens.json

@@ -1941,11 +1941,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 92,
+        "line": 93,
         "column": 23
       },
       "end": {
-        "line": 96,
+        "line": 97,
         "column": 3
       }
     },
@@ -1957,11 +1957,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 97,
+        "line": 98,
         "column": 24
       },
       "end": {
-        "line": 101,
+        "line": 102,
         "column": 3
       }
     },
@@ -2885,11 +2885,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 124,
+        "line": 126,
         "column": 6
       },
       "end": {
-        "line": 127,
+        "line": 129,
         "column": 8
       }
     },
@@ -2901,11 +2901,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 131,
+        "line": 133,
         "column": 8
       },
       "end": {
-        "line": 134,
+        "line": 136,
         "column": 10
       }
     },
@@ -2917,11 +2917,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 136,
+        "line": 138,
         "column": 8
       },
       "end": {
-        "line": 139,
+        "line": 141,
         "column": 10
       }
     },
@@ -2933,11 +2933,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 146,
+        "line": 148,
         "column": 8
       },
       "end": {
-        "line": 149,
+        "line": 151,
         "column": 10
       }
     },
@@ -2949,11 +2949,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 153,
+        "line": 155,
         "column": 8
       },
       "end": {
-        "line": 156,
+        "line": 158,
         "column": 10
       }
     },
@@ -4437,11 +4437,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 43,
+        "line": 48,
         "column": 11
       },
       "end": {
-        "line": 43,
+        "line": 48,
         "column": 73
       }
     },
@@ -4453,11 +4453,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 44,
+        "line": 49,
         "column": 14
       },
       "end": {
-        "line": 47,
+        "line": 52,
         "column": 5
       }
     },
@@ -4469,11 +4469,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 48,
+        "line": 53,
         "column": 10
       },
       "end": {
-        "line": 48,
+        "line": 53,
         "column": 70
       }
     },
@@ -4485,11 +4485,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 49,
+        "line": 54,
         "column": 10
       },
       "end": {
-        "line": 49,
+        "line": 54,
         "column": 70
       }
     },
@@ -4501,11 +4501,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 66,
+        "line": 74,
         "column": 4
       },
       "end": {
-        "line": 70,
+        "line": 78,
         "column": 5
       }
     },
@@ -4517,11 +4517,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 72,
+        "line": 80,
         "column": 8
       },
       "end": {
-        "line": 76,
+        "line": 84,
         "column": 9
       }
     },
@@ -4533,11 +4533,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 146,
+        "line": 160,
         "column": 10
       },
       "end": {
-        "line": 153,
+        "line": 167,
         "column": 12
       }
     },
@@ -4549,11 +4549,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 198,
+        "line": 212,
         "column": 12
       },
       "end": {
-        "line": 203,
+        "line": 217,
         "column": 13
       }
     },
@@ -4565,11 +4565,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 238,
+        "line": 253,
         "column": 12
       },
       "end": {
-        "line": 246,
+        "line": 261,
         "column": 13
       }
     },
@@ -4581,11 +4581,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 288,
+        "line": 308,
         "column": 20
       },
       "end": {
-        "line": 288,
+        "line": 308,
         "column": 60
       }
     },
@@ -4597,11 +4597,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 289,
+        "line": 309,
         "column": 20
       },
       "end": {
-        "line": 289,
+        "line": 309,
         "column": 60
       }
     },
@@ -4613,11 +4613,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 290,
+        "line": 310,
         "column": 18
       },
       "end": {
-        "line": 290,
+        "line": 310,
         "column": 54
       }
     },
@@ -4629,11 +4629,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 291,
+        "line": 311,
         "column": 26
       },
       "end": {
-        "line": 291,
+        "line": 311,
         "column": 78
       }
     },
@@ -4645,11 +4645,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 292,
+        "line": 312,
         "column": 23
       },
       "end": {
-        "line": 292,
+        "line": 312,
         "column": 75
       }
     },
@@ -5301,11 +5301,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 194,
+        "line": 201,
         "column": 39
       },
       "end": {
-        "line": 197,
+        "line": 204,
         "column": 3
       }
     },
@@ -5317,11 +5317,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 194,
+        "line": 201,
         "column": 39
       },
       "end": {
-        "line": 197,
+        "line": 204,
         "column": 3
       }
     },
@@ -5333,11 +5333,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },
@@ -5349,11 +5349,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },
@@ -5365,11 +5365,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },
@@ -5381,11 +5381,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },

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

@@ -174,7 +174,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,
 
   /**

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/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,
@@ -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