@elastic/eui 78.0.0 → 79.0.0

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiPageHeaderContent = exports.ALIGN_ITEMS = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -155,21 +156,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 : (0, _toConsumableArray2.default)(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, (0, _extends2.default)({
       wrap: true,
-      responsive: false,
-      direction: isResponsiveBreakpoint ? undefined : 'rowReverse'
-    }, rightSideGroupProps), wrapWithFlex()));
+      responsive: false
+    }, rightSideGroupProps), rightSideFlexItems));
   }
   return alignItems === 'top' || isResponsiveBreakpoint ? (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,

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

@@ -13,7 +13,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"];
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
@@ -23,6 +23,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -36,7 +39,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;

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

@@ -11,27 +11,33 @@ var _react = _interopRequireDefault(require("react"));
 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"];
 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 = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({
     "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;

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

@@ -15,7 +15,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 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) { (0, _defineProperty2.default)(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; }
 var RADIUS = ['s', 'm', 'none'];
@@ -32,6 +32,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -49,7 +52,10 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
       }))
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonRectangle = EuiSkeletonRectangle;

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

@@ -13,7 +13,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"];
 var LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 exports.LINES = LINES;
 var EuiSkeletonText = function EuiSkeletonText(_ref) {
@@ -25,6 +25,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -44,7 +47,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;

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

@@ -13,7 +13,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"];
 var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
@@ -21,6 +21,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -34,7 +37,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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "78.0.0",
+  "version": "79.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/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/test-env/components/page/page_header/page_header_content.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiPageHeaderContent = exports.ALIGN_ITEMS = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -156,21 +157,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 : (0, _toConsumableArray2.default)(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, (0, _extends2.default)({
       wrap: true,
-      responsive: false,
-      direction: isResponsiveBreakpoint ? undefined : 'rowReverse'
-    }, rightSideGroupProps), wrapWithFlex()));
+      responsive: false
+    }, rightSideGroupProps), rightSideFlexItems));
   }
   return alignItems === 'top' || isResponsiveBreakpoint ? (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,

package/test-env/components/skeleton/skeleton_circle.js

@@ -14,7 +14,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"];
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
@@ -24,6 +24,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -37,7 +40,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;
@@ -57,7 +63,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/test-env/components/skeleton/skeleton_loading.js

@@ -12,28 +12,34 @@ 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"];
 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 = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({
     "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/test-env/components/skeleton/skeleton_rectangle.js

@@ -16,7 +16,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 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) { (0, _defineProperty2.default)(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; }
 var RADIUS = ['s', 'm', 'none'];
@@ -33,6 +33,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -50,7 +53,10 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
       }))
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonRectangle = EuiSkeletonRectangle;
@@ -70,7 +76,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/test-env/components/skeleton/skeleton_text.js

@@ -14,7 +14,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"];
 var LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 exports.LINES = LINES;
 var EuiSkeletonText = function EuiSkeletonText(_ref) {
@@ -26,6 +26,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -45,7 +48,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;
@@ -65,7 +71,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/test-env/components/skeleton/skeleton_title.js

@@ -14,7 +14,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"];
 var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
@@ -22,6 +22,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -35,7 +38,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;
@@ -55,7 +61,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/es/components/loading/loading_content.js

@@ -1,50 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import PropTypes from "prop-types";
-import { EuiSkeletonText } from '../skeleton';
-
-/**
- * @deprecated Use `EuiSkeletonTextProps` instead
- */
-import { jsx as ___EmotionJSX } from "@emotion/react";
-/**
- * @deprecated Use `EuiSkeletonText` instead
- */
-export var EuiLoadingContent = function EuiLoadingContent(props) {
-  return ___EmotionJSX(EuiSkeletonText, props);
-};
-EuiLoadingContent.propTypes = {
-  className: PropTypes.string,
-  "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string,
-  css: PropTypes.any,
-  /**
-     * When true, shows the loading skeleton component.
-     * When false, shows any `children` and announces to screen readers that your content has loaded.
-     */
-  isLoading: PropTypes.bool,
-  /**
-     * Label your loading sections to provide more helpful context to screen readers.
-     * For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys".
-     */
-  contentAriaLabel: PropTypes.string,
-  /**
-     * Any optional props to pass to the `aria-busy` wrapper around the skeleton content
-     */
-  ariaWrapperProps: PropTypes.any,
-  /**
-       * Number of lines to display (between 1 to 10)
-       */
-  lines: PropTypes.any,
-  /**
-       * EuiText size to render
-       */
-  size: PropTypes.any
-};

package/lib/components/loading/loading_content.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EuiLoadingContent = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _skeleton = require("../skeleton");
-var _react2 = require("@emotion/react");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/*
- * 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.
- */
-
-/**
- * @deprecated Use `EuiSkeletonText` instead
- */
-var EuiLoadingContent = function EuiLoadingContent(props) {
-  return (0, _react2.jsx)(_skeleton.EuiSkeletonText, props);
-};
-exports.EuiLoadingContent = EuiLoadingContent;
-EuiLoadingContent.propTypes = {
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
-  /**
-     * When true, shows the loading skeleton component.
-     * When false, shows any `children` and announces to screen readers that your content has loaded.
-     */
-  isLoading: _propTypes.default.bool,
-  /**
-     * Label your loading sections to provide more helpful context to screen readers.
-     * For example, pass "API keys" to have screen readers read "Loading API keys" and "Loaded API keys".
-     */
-  contentAriaLabel: _propTypes.default.string,
-  /**
-     * Any optional props to pass to the `aria-busy` wrapper around the skeleton content
-     */
-  ariaWrapperProps: _propTypes.default.any,
-  /**
-       * Number of lines to display (between 1 to 10)
-       */
-  lines: _propTypes.default.any,
-  /**
-       * EuiText size to render
-       */
-  size: _propTypes.default.any
-};