@elastic/eui 62.2.1 → 64.0.0

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiBreakpoint = exports.euiBreakpoint = void 0;
 
-var _hooks = require("../../services/theme/hooks");
+var _sorting = require("../../services/breakpoint/_sorting");
 
-var _variables = require("../variables");
+var _hooks = require("../../services/theme/hooks");
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,34 +19,38 @@ var _variables = require("../variables");
 
 /**
  * Generates a CSS media query rule string based on the input breakpoint ranges.
- * Examples:
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
  * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
  *
- * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
- * Examples:
+ * Use the smallest and largest sizes to generate media queries with only min/max-width.
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
  * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
  */
 var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
   var euiTheme = _ref.euiTheme;
-  // Ensure the array is in the correct ascending size order
+  // Ensure we inherit any theme breakpoint overrides & sort by small to large
+  var orderedBreakpoints = Object.keys((0, _sorting.sortMapBySmallToLargeValues)(euiTheme.breakpoint)); // Ensure the sizes array is in the correct ascending size order
+
   var orderedSizes = sizes.sort(function (a, b) {
-    return _variables.EuiThemeBreakpoints.indexOf(a) - _variables.EuiThemeBreakpoints.indexOf(b);
+    return orderedBreakpoints.indexOf(a) - orderedBreakpoints.indexOf(b);
   });
   var firstBreakpoint = orderedSizes[0];
   var minBreakpointSize = euiTheme.breakpoint[firstBreakpoint];
   var lastBreakpoint = orderedSizes[sizes.length - 1];
-  var maxBreakpointSize; // To get the correct screen range, we set the max-width
-  // to the next breakpoint size in the sizes array
+  var maxBreakpointSize; // To get the correct screen range, we set the max-width to the next breakpoint
+  // size in the sizes array (unless the size is already the largest breakpoint)
 
-  if (lastBreakpoint !== 'xl') {
-    var nextBreakpoint = _variables.EuiThemeBreakpoints.indexOf(lastBreakpoint) + 1;
-    maxBreakpointSize = euiTheme.breakpoint[_variables.EuiThemeBreakpoints[nextBreakpoint]];
+  if (lastBreakpoint !== orderedBreakpoints[orderedBreakpoints.length - 1]) {
+    var nextBreakpoint = orderedBreakpoints.indexOf(lastBreakpoint) + 1;
+    maxBreakpointSize = euiTheme.breakpoint[orderedBreakpoints[nextBreakpoint]];
   }
 
-  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If xs/0, don't render a min-width
-  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If xl/undefined, don't render a max-width
+  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If 0, don't render a min-width
+  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If undefined, don't render a max-width
   ].filter(Boolean).join(' and ');
 };
 

package/optimize/lib/global_styling/variables/breakpoint.js

@@ -12,5 +12,7 @@ exports.EuiThemeBreakpoints = void 0;
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl']; // This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs
+
 exports.EuiThemeBreakpoints = EuiThemeBreakpoints;

package/optimize/lib/services/breakpoint/_sorting.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortMapBySmallToLargeValues = exports.sortMapByLargeToSmallValues = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var sortMapByLargeToSmallValues = function sortMapByLargeToSmallValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref, _ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = (0, _slicedToArray2.default)(_ref2, 2),
+        b = _ref4[1];
+
+    return b - a;
+  }));
+};
+
+exports.sortMapByLargeToSmallValues = sortMapByLargeToSmallValues;
+
+var sortMapBySmallToLargeValues = function sortMapBySmallToLargeValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref5, _ref6) {
+    var _ref7 = (0, _slicedToArray2.default)(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = (0, _slicedToArray2.default)(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};
+
+exports.sortMapBySmallToLargeValues = sortMapBySmallToLargeValues;

package/optimize/lib/services/breakpoint/current_breakpoint.js

@@ -13,11 +13,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _common = require("../../components/common");
+
 var _theme = require("../theme");
 
 var _throttle = require("../throttle");
 
-var _breakpoint = require("./breakpoint");
+var _sorting = require("./_sorting");
 
 var _react2 = require("@emotion/react");
 
@@ -43,23 +45,35 @@ exports.CurrentEuiBreakpointContext = CurrentEuiBreakpointContext;
 var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;
 
+  // Obtain the breakpoints map from the EUI theme
   var _useEuiTheme = (0, _theme.useEuiTheme)(),
-      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+      breakpoints = _useEuiTheme.euiTheme.breakpoint; // Ensure the breakpoints map is sorted from largest value to smallest
+
+
+  var sortedBreakpoints = (0, _react.useMemo)(function () {
+    return (0, _sorting.sortMapByLargeToSmallValues)(breakpoints);
+  }, [breakpoints]); // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+
+  var getBreakpoint = (0, _react.useCallback)(function (width) {
+    return (0, _common.keysOf)(sortedBreakpoints).find(function (key) {
+      return sortedBreakpoints[key] <= width;
+    });
+  }, [sortedBreakpoints]);
 
-  var _useState = (0, _react.useState)(typeof window !== 'undefined' ? (0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints) : undefined),
+  var _useState = (0, _react.useState)(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : undefined),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       currentBreakpoint = _useState2[0],
       setCurrentBreakpoint = _useState2[1];
 
   (0, _react.useEffect)(function () {
     var onWindowResize = (0, _throttle.throttle)(function () {
-      setCurrentBreakpoint((0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints));
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth));
     }, 50);
     window.addEventListener('resize', onWindowResize);
     return function () {
       return window.removeEventListener('resize', onWindowResize);
     };
-  }, [breakpoints]);
+  }, [getBreakpoint]);
   return (0, _react2.jsx)(CurrentEuiBreakpointContext.Provider, {
     value: currentBreakpoint
   }, children);

package/optimize/lib/services/breakpoint/index.js

@@ -4,19 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _breakpoint = require("./breakpoint");
-
-Object.keys(_breakpoint).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _breakpoint[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _breakpoint[key];
-    }
-  });
-});
-
 var _current_breakpoint = require("./current_breakpoint");
 
 Object.keys(_current_breakpoint).forEach(function (key) {
@@ -43,15 +30,15 @@ Object.keys(_current_breakpoint_hook).forEach(function (key) {
   });
 });
 
-var _useIsWithinBreakpoints = require("./useIsWithinBreakpoints");
+var _is_within_hooks = require("./is_within_hooks");
 
-Object.keys(_useIsWithinBreakpoints).forEach(function (key) {
+Object.keys(_is_within_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useIsWithinBreakpoints[key]) return;
+  if (key in exports && exports[key] === _is_within_hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _useIsWithinBreakpoints[key];
+      return _is_within_hooks[key];
     }
   });
 });

package/optimize/lib/services/breakpoint/is_within_hooks.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsWithinBreakpoints = void 0;
+exports.useIsWithinMaxBreakpoint = useIsWithinMaxBreakpoint;
+exports.useIsWithinMinBreakpoint = useIsWithinMinBreakpoint;
+
+var _theme = require("../theme");
+
+var _current_breakpoint_hook = require("./current_breakpoint_hook");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Given an array of breakpoint keys, this hook returns true or false
+ * if the breakpoint size of the current window width falls within
+ * any of the named breakpoints.
+ *
+ * @param {EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+ *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};
+/**
+ * Given a max breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the max breakpoint or any below,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} max The named max breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+ */
+
+
+exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
+
+function useIsWithinMaxBreakpoint(max) {
+  var _useEuiTheme = (0, _theme.useEuiTheme)(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
+
+  if (currentBreakpoint == null || breakpoints[max] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] <= breakpoints[max];
+}
+/**
+ * Given a min breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the min breakpoint or any above,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} min The named min breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+ */
+
+
+function useIsWithinMinBreakpoint(min) {
+  var _useEuiTheme2 = (0, _theme.useEuiTheme)(),
+      breakpoints = _useEuiTheme2.euiTheme.breakpoint;
+
+  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
+
+  if (currentBreakpoint == null || breakpoints[min] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] >= breakpoints[min];
+}

package/optimize/lib/services/index.js

@@ -15,13 +15,9 @@ var _exportNames = {
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
   CENTER_ALIGNMENT: true,
-  BREAKPOINTS: true,
-  BREAKPOINT_KEYS: true,
-  getBreakpoint: true,
-  isWithinBreakpoints: true,
   useIsWithinBreakpoints: true,
-  isWithinMaxBreakpoint: true,
-  isWithinMinBreakpoint: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
@@ -92,18 +88,6 @@ var _exportNames = {
   EuiWindowEvent: true,
   throttle: true
 };
-Object.defineProperty(exports, "BREAKPOINTS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINTS;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINT_KEYS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINT_KEYS;
-  }
-});
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
   get: function get() {
@@ -362,12 +346,6 @@ Object.defineProperty(exports, "formatText", {
     return _format.formatText;
   }
 });
-Object.defineProperty(exports, "getBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.getBreakpoint;
-  }
-});
 Object.defineProperty(exports, "getDurationAndPerformOnFrame", {
   enumerable: true,
   get: function get() {
@@ -446,24 +424,6 @@ Object.defineProperty(exports, "isValidHex", {
     return _color.isValidHex;
   }
 });
-Object.defineProperty(exports, "isWithinBreakpoints", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinBreakpoints;
-  }
-});
-Object.defineProperty(exports, "isWithinMaxBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMaxBreakpoint;
-  }
-});
-Object.defineProperty(exports, "isWithinMinBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMinBreakpoint;
-  }
-});
 Object.defineProperty(exports, "isWithinRange", {
   enumerable: true,
   get: function get() {
@@ -597,6 +557,18 @@ Object.defineProperty(exports, "useIsWithinBreakpoints", {
     return _breakpoint.useIsWithinBreakpoints;
   }
 });
+Object.defineProperty(exports, "useIsWithinMaxBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMaxBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useIsWithinMinBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMinBreakpoint;
+  }
+});
 
 var keys = _interopRequireWildcard(require("./keys"));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "62.2.1",
+  "version": "64.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -252,6 +252,7 @@
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
     "@emotion/react": "11.x",
+    "@emotion/cache": "11.x",
     "@types/react": "^16.9 || ^17.0",
     "@types/react-dom": "^16.9 || ^17.0",
     "moment": "^2.13.0",

package/src/components/index.scss

@@ -40,4 +40,3 @@
 @import 'table/index';
 @import 'tabs/index';
 @import 'tool_tip/index';
-@import 'tour/index';

package/src/components/page/_index.scss

@@ -1,7 +1,2 @@
-@import 'mixins';
-
-@import 'page';
-@import 'page_body/index';
 @import 'page_content/index';
 @import 'page_side_bar/index';
-@import 'page_header/index';

package/src/components/page/page_content/_page_content_body.scss

@@ -1,5 +1,14 @@
 .euiPageContentBody {
-  @include euiPageRestrictWidth;
+  &--restrictWidth-default,
+  &--restrictWidth-custom {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  &--restrictWidth-default {
+    max-width: $euiPageDefaultMaxWidth;
+  }
 }
 
 // Uses the same values as EuiPanel

package/src/components/tabs/_tabs.scss

@@ -84,6 +84,8 @@
 
   .euiTabs--xlarge & {
     padding: $euiSizeS $euiSizeL;
+    line-height: $euiSize * 4.5;
+    height: $euiSize * 4.5;
 
     .euiTab__content {
       @include euiFontSizeL;

package/test-env/components/accessibility/screen_reader_live/screen_reader_live.js

@@ -77,12 +77,12 @@ var EuiScreenReaderLive = function EuiScreenReaderLive(_ref) {
       // double announcements from VO when `focusRegionOnTextChange` is true
       ,
       "aria-hidden": toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": !toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && toggle ? children : ''), (0, _react2.jsx)("div", {
       role: role,
       "aria-atomic": "true",
       "aria-hidden": !toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && !toggle ? children : '')))
   );
 };

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -219,6 +219,7 @@ EuiSkipLink.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -226,5 +227,6 @@ EuiSkipLink.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   buttonRef: _propTypes.default.any
 };

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

@@ -51,7 +51,7 @@ var _accordion = require("./accordion.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "buttonProps", "buttonElement", "arrowProps", "theme"];
+var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
 
 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); }
 
@@ -163,6 +163,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           forceState = _this$props.forceState,
           isLoading = _this$props.isLoading,
           isLoadingMessage = _this$props.isLoadingMessage,
+          isDisabled = _this$props.isDisabled,
           buttonProps = _this$props.buttonProps,
           _this$props$buttonEle = _this$props.buttonElement,
           _ButtonElement = _this$props$buttonEle === void 0 ? 'button' : _this$props$buttonEle,
@@ -192,7 +193,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className); // Emotion styles
 
       var buttonStyles = (0, _accordion.euiAccordionButtonStyles)(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled];
       var childrenStyles = (0, _accordion.euiAccordionChildrenStyles)(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize === 'none' ? undefined : childrenStyles[paddingSize]];
       var childWrapperStyles = (0, _accordion.euiAccordionChildWrapperStyles)(theme);
@@ -219,7 +220,8 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           "aria-controls": id,
           "aria-expanded": isOpen,
           "aria-labelledby": buttonId,
-          tabIndex: buttonElementIsFocusable ? -1 : 0
+          tabIndex: buttonElementIsFocusable ? -1 : 0,
+          isDisabled: isDisabled
         }));
       }
 
@@ -254,8 +256,9 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
-        onClick: this.onToggle,
-        type: ButtonElement === 'button' ? 'button' : undefined
+        onClick: isDisabled ? undefined : this.onToggle,
+        type: ButtonElement === 'button' ? 'button' : undefined,
+        disabled: ButtonElement === 'button' ? isDisabled : undefined
       }), (0, _react2.jsx)("span", {
         className: buttonContentClasses
       }, buttonContent));
@@ -296,6 +299,7 @@ exports.EuiAccordionClass = EuiAccordionClass;
   paddingSize: 'none',
   arrowDisplay: 'left',
   isLoading: false,
+  isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
   buttonElement: 'button'
@@ -304,6 +308,7 @@ EuiAccordionClass.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   id: _propTypes.default.string.isRequired,
 
   /**
@@ -323,7 +328,8 @@ EuiAccordionClass.propTypes = {
   buttonProps: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }),
 
   /**
@@ -385,7 +391,12 @@ EuiAccordionClass.propTypes = {
   /**
        * Choose whether the loading message replaces the content. Customize the message by passing a node
        */
-  isLoadingMessage: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.node.isRequired])
+  isLoadingMessage: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.node.isRequired]),
+
+  /**
+       * Disable the open/close interaction and visually subdues the trigger
+       */
+  isDisabled: _propTypes.default.bool
 };
 var EuiAccordion = (0, _services.withEuiTheme)(EuiAccordionClass);
 exports.EuiAccordion = EuiAccordion;

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

@@ -14,7 +14,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;")
+    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
+    // Hover pseudo selector for specificity
+    disabled: /*#__PURE__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
   };
 };
 

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

@@ -17,9 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react2 = require("@emotion/react");
-
-var _excluded = ["children", "className", "height", "width", "maxWidth"];
+var _excluded = ["children", "className", "height", "width", "maxWidth", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -31,32 +29,23 @@ var EuiAspectRatio = function EuiAspectRatio(_ref) {
       height = _ref.height,
       width = _ref.width,
       maxWidth = _ref.maxWidth,
+      style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiAspectRatio', className);
-  var euiAspectRatioStyle = {
+
+  var euiAspectRatioStyle = _objectSpread({
     aspectRatio: "".concat(width, " / ").concat(height),
-    height: '100%',
-    width: '100%'
-  };
+    height: 'auto',
+    width: '100%',
+    maxWidth: maxWidth
+  }, style);
 
   var props = _objectSpread({
     className: classes,
     style: euiAspectRatioStyle
   }, rest);
 
-  var content = /*#__PURE__*/_react.default.cloneElement(children, props);
-
-  var contentwithoptionalwrap = content;
-
-  if (maxWidth) {
-    contentwithoptionalwrap = (0, _react2.jsx)("div", {
-      style: {
-        maxWidth: maxWidth
-      }
-    }, content);
-  }
-
-  return contentwithoptionalwrap;
+  return /*#__PURE__*/_react.default.cloneElement(children, props);
 };
 
 exports.EuiAspectRatio = EuiAspectRatio;
@@ -64,6 +53,7 @@ EuiAspectRatio.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Aspect ratio height. For example 9 would be widescreen video.

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

@@ -117,6 +117,7 @@ EuiAvatar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
          * Custom initials (max 2 characters).

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

@@ -270,6 +270,7 @@ EuiBadge.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Will apply an onclick to icon within the badge