@elastic/eui 78.0.0 → 79.0.0

package/i18ntokens.json

@@ -6300,37 +6300,37 @@
     "filepath": "src/components/selectable/selectable.tsx"
   },
   {
-    "token": "euiSkeletonLoading.loadingAriaText",
-    "defString": "Loading {contentAriaLabel}",
+    "token": "euiSkeletonLoading.loadedAriaText",
+    "defString": "Loaded {contentAriaLabel}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 52,
-        "column": 27,
-        "index": 1743
+        "line": 73,
+        "column": 25,
+        "index": 2343
       },
       "end": {
-        "line": 56,
+        "line": 77,
         "column": 3,
-        "index": 1859
+        "index": 2457
       }
     },
     "filepath": "src/components/skeleton/skeleton_loading.tsx"
   },
   {
-    "token": "euiSkeletonLoading.loadedAriaText",
-    "defString": "Loaded {contentAriaLabel}",
+    "token": "euiSkeletonLoading.loadingAriaText",
+    "defString": "Loading {contentAriaLabel}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 57,
-        "column": 25,
-        "index": 1886
+        "line": 79,
+        "column": 27,
+        "index": 2487
       },
       "end": {
-        "line": 61,
+        "line": 83,
         "column": 3,
-        "index": 2000
+        "index": 2603
       }
     },
     "filepath": "src/components/skeleton/skeleton_loading.tsx"

package/lib/components/loading/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "EuiLoadingChart", {
     return _loading_chart.EuiLoadingChart;
   }
 });
-Object.defineProperty(exports, "EuiLoadingContent", {
-  enumerable: true,
-  get: function get() {
-    return _loading_content.EuiLoadingContent;
-  }
-});
 Object.defineProperty(exports, "EuiLoadingElastic", {
   enumerable: true,
   get: function get() {
@@ -35,6 +29,5 @@ Object.defineProperty(exports, "EuiLoadingSpinner", {
 });
 var _loading_elastic = require("./loading_elastic");
 var _loading_chart = require("./loading_chart");
-var _loading_content = require("./loading_content");
 var _loading_spinner = require("./loading_spinner");
 var _loading_logo = require("./loading_logo");

package/lib/components/page/page_header/page_header_content.js

@@ -24,6 +24,12 @@ var _react2 = require("@emotion/react");
 var _excluded = ["className", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "description", "breadcrumbs", "breadcrumbProps", "alignItems", "responsive", "rightSideItems", "rightSideGroupProps", "children", "restrictWidth", "paddingSize", "bottomBorder", "style"],
   _excluded2 = ["label"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
@@ -157,21 +163,19 @@ var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   }
   var rightSideFlexItem;
   if (rightSideItems && rightSideItems.length) {
-    var wrapWithFlex = function wrapWithFlex() {
-      return rightSideItems.map(function (item, index) {
-        return (0, _react2.jsx)(_flex.EuiFlexItem, {
-          grow: false,
-          key: index
-        }, item);
-      });
-    };
+    var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
+    var rightSideFlexItems = itemsToRender.map(function (item, index) {
+      return (0, _react2.jsx)(_flex.EuiFlexItem, {
+        grow: false,
+        key: index
+      }, item);
+    });
     rightSideFlexItem = (0, _react2.jsx)(_flex.EuiFlexItem, {
       grow: false
     }, (0, _react2.jsx)(_flex.EuiFlexGroup, _extends({
       wrap: true,
-      responsive: false,
-      direction: isResponsiveBreakpoint ? undefined : 'rowReverse'
-    }, rightSideGroupProps), wrapWithFlex()));
+      responsive: false
+    }, rightSideGroupProps), rightSideFlexItems));
   }
   return alignItems === 'top' || isResponsiveBreakpoint ? (0, _react2.jsx)("div", _extends({
     className: classes,

package/lib/components/skeleton/skeleton_circle.js

@@ -11,7 +11,7 @@ var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_circle = require("./skeleton_circle.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
@@ -25,6 +25,9 @@ var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -38,7 +41,10 @@ var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
       css: cssStyles
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonCircle = EuiSkeletonCircle;
@@ -58,7 +64,22 @@ EuiSkeletonCircle.propTypes = {
      */
   contentAriaLabel: _propTypes.default.string,
   /**
-     * Any optional props to pass to the `aria-busy` wrapper around the skeleton content
+     * Makes a live screen reader announcement when `isLoading` is true
+     * @default false
+     */
+  announceLoadingStatus: _propTypes.default.bool,
+  /**
+     * Makes a live screen reader announcement when `isLoading` is false
+     * @default true
+     */
+  announceLoadedStatus: _propTypes.default.bool,
+  /**
+     * Optional props to pass to the `aria-live` region that announces the loading status to screen readers.
+     * Accepts any `EuiScreenReaderLive` props.
+     */
+  ariaLiveProps: _propTypes.default.any,
+  /**
+     * Optional props to pass to the `aria-busy` wrapper around the skeleton content
      */
   ariaWrapperProps: _propTypes.default.any,
   size: _propTypes.default.any

package/lib/components/skeleton/skeleton_loading.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _screen_reader_live = require("../accessibility/screen_reader_live");
 var _i18n = require("../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent"];
+var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
@@ -18,23 +18,29 @@ var EuiSkeletonLoading = function EuiSkeletonLoading(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
     contentAriaLabel = _ref.contentAriaLabel,
-    loadingContent = _ref.loadingContent,
+    _loadingContent = _ref.loadingContent,
     loadedContent = _ref.loadedContent,
+    _ref$announceLoadingS = _ref.announceLoadingStatus,
+    announceLoadingStatus = _ref$announceLoadingS === void 0 ? false : _ref$announceLoadingS,
+    _ref$announceLoadedSt = _ref.announceLoadedStatus,
+    announceLoadedStatus = _ref$announceLoadedSt === void 0 ? true : _ref$announceLoadedSt,
+    ariaLiveProps = _ref.ariaLiveProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var loadingAriaLabel = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
+  var loadedAriaLive = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
     contentAriaLabel: contentAriaLabel
   });
-  var loadedAriaLive = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
+  var loadingAriaLabel = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
     contentAriaLabel: contentAriaLabel
   });
   var loadingProps = {
     'aria-label': loadingAriaLabel,
     role: 'progressbar'
   };
+  var loadingContent = /*#__PURE__*/_react.default.cloneElement(_loadingContent, loadingProps);
   return (0, _react2.jsx)("div", _extends({
     "aria-busy": isLoading,
     "data-test-subj": "euiSkeletonLoadingAriaWrapper"
-  }, rest), isLoading ? /*#__PURE__*/_react.default.cloneElement(loadingContent, loadingProps) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_screen_reader_live.EuiScreenReaderLive, null, loadedAriaLive), loadedContent));
+  }, rest), isLoading ? (0, _react2.jsx)(_react.default.Fragment, null, announceLoadingStatus && (0, _react2.jsx)(_screen_reader_live.EuiScreenReaderLive, ariaLiveProps, loadingAriaLabel), loadingContent) : (0, _react2.jsx)(_react.default.Fragment, null, announceLoadedStatus && (0, _react2.jsx)(_screen_reader_live.EuiScreenReaderLive, ariaLiveProps, loadedAriaLive), loadedContent));
 };
 exports.EuiSkeletonLoading = EuiSkeletonLoading;
 EuiSkeletonLoading.propTypes = {

package/lib/components/skeleton/skeleton_rectangle.js

@@ -13,7 +13,7 @@ var _global_styling = require("../../global_styling");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_rectangle = require("./skeleton_rectangle.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,6 +37,9 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
     style = _ref.style,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -54,7 +57,10 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
       }))
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonRectangle = EuiSkeletonRectangle;
@@ -74,7 +80,22 @@ EuiSkeletonRectangle.propTypes = {
      */
   contentAriaLabel: _propTypes.default.string,
   /**
-     * Any optional props to pass to the `aria-busy` wrapper around the skeleton content
+     * Makes a live screen reader announcement when `isLoading` is true
+     * @default false
+     */
+  announceLoadingStatus: _propTypes.default.bool,
+  /**
+     * Makes a live screen reader announcement when `isLoading` is false
+     * @default true
+     */
+  announceLoadedStatus: _propTypes.default.bool,
+  /**
+     * Optional props to pass to the `aria-live` region that announces the loading status to screen readers.
+     * Accepts any `EuiScreenReaderLive` props.
+     */
+  ariaLiveProps: _propTypes.default.any,
+  /**
+     * Optional props to pass to the `aria-busy` wrapper around the skeleton content
      */
   ariaWrapperProps: _propTypes.default.any,
   width: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]),

package/lib/components/skeleton/skeleton_text.js

@@ -11,7 +11,7 @@ var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_text = require("./skeleton_text.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
@@ -27,6 +27,9 @@ var EuiSkeletonText = function EuiSkeletonText(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -46,7 +49,10 @@ var EuiSkeletonText = function EuiSkeletonText(_ref) {
       className: (0, _classnames.default)('euiSkeletonText', className)
     }, rest), lineElements),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonText = EuiSkeletonText;
@@ -66,7 +72,22 @@ EuiSkeletonText.propTypes = {
      */
   contentAriaLabel: _propTypes.default.string,
   /**
-     * Any optional props to pass to the `aria-busy` wrapper around the skeleton content
+     * Makes a live screen reader announcement when `isLoading` is true
+     * @default false
+     */
+  announceLoadingStatus: _propTypes.default.bool,
+  /**
+     * Makes a live screen reader announcement when `isLoading` is false
+     * @default true
+     */
+  announceLoadedStatus: _propTypes.default.bool,
+  /**
+     * Optional props to pass to the `aria-live` region that announces the loading status to screen readers.
+     * Accepts any `EuiScreenReaderLive` props.
+     */
+  ariaLiveProps: _propTypes.default.any,
+  /**
+     * Optional props to pass to the `aria-busy` wrapper around the skeleton content
      */
   ariaWrapperProps: _propTypes.default.any,
   /**

package/lib/components/skeleton/skeleton_title.js

@@ -11,7 +11,7 @@ var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_title = require("./skeleton_title.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
@@ -23,6 +23,9 @@ var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -36,7 +39,10 @@ var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
       css: cssStyles
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonTitle = EuiSkeletonTitle;
@@ -56,7 +62,22 @@ EuiSkeletonTitle.propTypes = {
      */
   contentAriaLabel: _propTypes.default.string,
   /**
-     * Any optional props to pass to the `aria-busy` wrapper around the skeleton content
+     * Makes a live screen reader announcement when `isLoading` is true
+     * @default false
+     */
+  announceLoadingStatus: _propTypes.default.bool,
+  /**
+     * Makes a live screen reader announcement when `isLoading` is false
+     * @default true
+     */
+  announceLoadedStatus: _propTypes.default.bool,
+  /**
+     * Optional props to pass to the `aria-live` region that announces the loading status to screen readers.
+     * Accepts any `EuiScreenReaderLive` props.
+     */
+  ariaLiveProps: _propTypes.default.any,
+  /**
+     * Optional props to pass to the `aria-busy` wrapper around the skeleton content
      */
   ariaWrapperProps: _propTypes.default.any,
   /**

package/optimize/es/components/loading/index.js

@@ -8,6 +8,5 @@
 
 export { EuiLoadingElastic } from './loading_elastic';
 export { EuiLoadingChart } from './loading_chart';
-export { EuiLoadingContent } from './loading_content';
 export { EuiLoadingSpinner } from './loading_spinner';
 export { EuiLoadingLogo } from './loading_logo';

package/optimize/es/components/page/page_header/page_header_content.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "description", "breadcrumbs", "breadcrumbProps", "alignItems", "responsive", "rightSideItems", "rightSideGroupProps", "children", "restrictWidth", "paddingSize", "bottomBorder", "style"],
@@ -156,21 +157,19 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   }
   var rightSideFlexItem;
   if (rightSideItems && rightSideItems.length) {
-    var wrapWithFlex = function wrapWithFlex() {
-      return rightSideItems.map(function (item, index) {
-        return ___EmotionJSX(EuiFlexItem, {
-          grow: false,
-          key: index
-        }, item);
-      });
-    };
+    var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
+    var rightSideFlexItems = itemsToRender.map(function (item, index) {
+      return ___EmotionJSX(EuiFlexItem, {
+        grow: false,
+        key: index
+      }, item);
+    });
     rightSideFlexItem = ___EmotionJSX(EuiFlexItem, {
       grow: false
     }, ___EmotionJSX(EuiFlexGroup, _extends({
       wrap: true,
-      responsive: false,
-      direction: isResponsiveBreakpoint ? undefined : 'rowReverse'
-    }, rightSideGroupProps), wrapWithFlex()));
+      responsive: false
+    }, rightSideGroupProps), rightSideFlexItems));
   }
   return alignItems === 'top' || isResponsiveBreakpoint ? ___EmotionJSX("div", _extends({
     className: classes,

package/optimize/es/components/skeleton/skeleton_circle.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,6 +23,9 @@ export var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -36,6 +39,9 @@ export var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
       css: cssStyles
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };

package/optimize/es/components/skeleton/skeleton_loading.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent"];
+var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,21 +17,27 @@ export var EuiSkeletonLoading = function EuiSkeletonLoading(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
     contentAriaLabel = _ref.contentAriaLabel,
-    loadingContent = _ref.loadingContent,
+    _loadingContent = _ref.loadingContent,
     loadedContent = _ref.loadedContent,
+    _ref$announceLoadingS = _ref.announceLoadingStatus,
+    announceLoadingStatus = _ref$announceLoadingS === void 0 ? false : _ref$announceLoadingS,
+    _ref$announceLoadedSt = _ref.announceLoadedStatus,
+    announceLoadedStatus = _ref$announceLoadedSt === void 0 ? true : _ref$announceLoadedSt,
+    ariaLiveProps = _ref.ariaLiveProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var loadingAriaLabel = useEuiI18n('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
+  var loadedAriaLive = useEuiI18n('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
     contentAriaLabel: contentAriaLabel
   });
-  var loadedAriaLive = useEuiI18n('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
+  var loadingAriaLabel = useEuiI18n('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
     contentAriaLabel: contentAriaLabel
   });
   var loadingProps = {
     'aria-label': loadingAriaLabel,
     role: 'progressbar'
   };
+  var loadingContent = /*#__PURE__*/React.cloneElement(_loadingContent, loadingProps);
   return ___EmotionJSX("div", _extends({
     "aria-busy": isLoading,
     "data-test-subj": "euiSkeletonLoadingAriaWrapper"
-  }, rest), isLoading ? /*#__PURE__*/React.cloneElement(loadingContent, loadingProps) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderLive, null, loadedAriaLive), loadedContent));
+  }, rest), isLoading ? ___EmotionJSX(React.Fragment, null, announceLoadingStatus && ___EmotionJSX(EuiScreenReaderLive, ariaLiveProps, loadingAriaLabel), loadingContent) : ___EmotionJSX(React.Fragment, null, announceLoadedStatus && ___EmotionJSX(EuiScreenReaderLive, ariaLiveProps, loadedAriaLive), loadedContent));
 };

package/optimize/es/components/skeleton/skeleton_rectangle.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -32,6 +32,9 @@ export var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
     style = _ref.style,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -49,6 +52,9 @@ export var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
       }))
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };

package/optimize/es/components/skeleton/skeleton_text.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +25,9 @@ export var EuiSkeletonText = function EuiSkeletonText(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -44,6 +47,9 @@ export var EuiSkeletonText = function EuiSkeletonText(_ref) {
       className: classNames('euiSkeletonText', className)
     }, rest), lineElements),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };

package/optimize/es/components/skeleton/skeleton_title.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,6 +22,9 @@ export var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -35,6 +38,9 @@ export var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
       css: cssStyles
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };

package/optimize/lib/components/loading/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "EuiLoadingChart", {
     return _loading_chart.EuiLoadingChart;
   }
 });
-Object.defineProperty(exports, "EuiLoadingContent", {
-  enumerable: true,
-  get: function get() {
-    return _loading_content.EuiLoadingContent;
-  }
-});
 Object.defineProperty(exports, "EuiLoadingElastic", {
   enumerable: true,
   get: function get() {
@@ -35,6 +29,5 @@ Object.defineProperty(exports, "EuiLoadingSpinner", {
 });
 var _loading_elastic = require("./loading_elastic");
 var _loading_chart = require("./loading_chart");
-var _loading_content = require("./loading_content");
 var _loading_spinner = require("./loading_spinner");
 var _loading_logo = require("./loading_logo");