@elastic/eui 74.0.0 → 74.1.0

package/optimize/es/components/form/range/range.a11y.js

@@ -0,0 +1,206 @@
+import _slicedToArray from "@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.
+ */
+/// <reference types="../../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiDualRange } from './dual_range';
+import { EuiRange } from './range';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+describe('Single EuiRange', function () {
+  var SingleRange = function SingleRange() {
+    var _useState = useState('100'),
+        _useState2 = _slicedToArray(_useState, 2),
+        value = _useState2[0],
+        setValue = _useState2[1];
+
+    var onChange = function onChange(e) {
+      setValue(e.currentTarget.value);
+    };
+
+    return ___EmotionJSX(EuiRange, {
+      id: "cy-range-single",
+      min: 100,
+      max: 200,
+      value: value,
+      onChange: onChange,
+      showLabels: true,
+      showRange: true,
+      showValue: true,
+      valuePrepend: "100 - ",
+      "aria-label": "An example of EuiRange with valuePrepend prop"
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(SingleRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the range slider is increased', function () {
+      cy.realPress('Tab');
+      cy.get('input#cy-range-single').should('have.focus');
+      cy.repeatRealPress('ArrowRight', 10);
+      cy.get('output.euiRangeTooltip__value').contains('100 - 110');
+      cy.checkAxe();
+    });
+    it('has zero violations when the range slider is decreased', function () {
+      cy.realPress('Tab');
+      cy.get('input#cy-range-single').should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 10);
+      cy.get('output.euiRangeTooltip__value').contains('100 - 100');
+      cy.checkAxe();
+    });
+  });
+});
+describe('Dual EuiRange', function () {
+  var DualRange = function DualRange() {
+    var _useState3 = useState(['100', '150']),
+        _useState4 = _slicedToArray(_useState3, 2),
+        dualValue = _useState4[0],
+        setDualValue = _useState4[1];
+
+    var onDualChange = function onDualChange(value) {
+      setDualValue(value);
+    };
+
+    return ___EmotionJSX(EuiDualRange, {
+      id: "cy-range-dual",
+      min: 0,
+      max: 300,
+      step: 10,
+      value: dualValue,
+      onChange: onDualChange,
+      showLabels: true,
+      "aria-label": "An example of EuiDualRange"
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(DualRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the range sliders are adjusted', function () {
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 3);
+      cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuenow').should('eq', '70');
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').last().should('have.focus');
+      cy.repeatRealPress('ArrowRight', 3);
+      cy.get('div[role="slider"]').last().invoke('attr', 'aria-valuenow').should('eq', '180');
+      cy.checkAxe();
+    });
+  });
+});
+describe('Highlight Area EuiRange', function () {
+  var DraggableRange = function DraggableRange() {
+    var _useState5 = useState(['40', '60']),
+        _useState6 = _slicedToArray(_useState5, 2),
+        dualValue = _useState6[0],
+        setDualValue = _useState6[1];
+
+    return ___EmotionJSX(EuiDualRange, {
+      id: "cy-range-draggable",
+      min: 0,
+      max: 100,
+      step: 1,
+      value: dualValue,
+      onChange: setDualValue,
+      showLabels: true,
+      "aria-label": "An example of EuiDualRange with isDraggable='true'",
+      isDraggable: true
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(DraggableRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the highlight area is adjusted using arrow keys', function () {
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 3);
+      cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuetext').should('eq', '37, 57');
+      cy.checkAxe();
+    });
+  });
+  describe('Drag and drop accessibility check', function () {
+    it('has zero violations when the higlight area is dragged using a mouse', function () {
+      cy.get('.euiRangeDraggable__inner').realMouseDown({
+        position: 'center'
+      }).realMouseMove(100, 0, {}).realMouseUp();
+      cy.checkAxe();
+    });
+  });
+  describe('EuiRange in a dropdown', function () {
+    var InputWithRange = function InputWithRange() {
+      var _useState7 = useState('20'),
+          _useState8 = _slicedToArray(_useState7, 2),
+          value = _useState8[0],
+          setValue = _useState8[1];
+
+      return ___EmotionJSX(EuiRange, {
+        id: "cy-range-in-dropdown",
+        min: 0,
+        max: 100,
+        value: value,
+        onChange: function onChange(e) {
+          return setValue(e.currentTarget.value);
+        },
+        showInput: "inputWithPopover",
+        showLabels: true,
+        "aria-label": "An example of EuiRange with showInput prop"
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(1024, 768); // medium breakpoint
+
+      cy.realMount(___EmotionJSX(InputWithRange, null));
+      cy.get('input#cy-range-in-dropdown').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations on first render', function () {
+        cy.checkAxe();
+      });
+    });
+    describe('Keyboard accessibility check', function () {
+      it('updates the range value using arrow keys with input[type="number"]', function () {
+        cy.realPress('Tab');
+        cy.get('input#cy-range-in-dropdown').should('have.focus');
+        cy.repeatRealPress('ArrowUp', 10);
+        cy.get('input[type="range"]').first().invoke('attr', 'value').should('eq', '30');
+        cy.checkAxe();
+      });
+    });
+  });
+});

package/optimize/es/components/form/super_select/super_select.js

@@ -292,7 +292,7 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         id: this.describedById
       }, ___EmotionJSX(EuiI18n, {
         token: "euiSuperSelect.screenReaderAnnouncement",
-        default: "You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close."
+        default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
       }))), ___EmotionJSX("div", {
         "aria-labelledby": this.labelledById,
         "aria-describedby": this.describedById,

package/optimize/es/components/icon/assets/alert.js

@@ -27,8 +27,9 @@ var EuiIconAlert = function EuiIconAlert(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+    d: "M8.55 9.502l.35-3.507a.905.905 0 10-1.8 0l.35 3.507a.552.552 0 001.1 0zM9 12a1 1 0 11-2 0 1 1 0 012 0z"
+  }), ___EmotionJSX("path", {
+    d: "M8.864 1.496a1 1 0 00-1.728 0l-7 12A1 1 0 001 15h14a1 1 0 00.864-1.504l-7-12zM1 14L8 2l7 12H1z"
   }));
 };
 

package/optimize/es/components/icon/assets/error.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconError = function EuiIconError(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M10 1a1 1 0 01.707.293l4 4A1 1 0 0115 6v5a1 1 0 01-.293.707l-4 4A1 1 0 0110 16H5a1 1 0 01-.707-.293l-4-4A1 1 0 010 11V6a1 1 0 01.293-.707l4-4A1 1 0 015 1h5zM4.146 5.146a.5.5 0 01.708 0L7.5 7.793l2.646-2.647a.5.5 0 01.708.708L8.207 8.5l2.647 2.646a.5.5 0 01-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 01-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 010-.708z"
+  }));
+};
+
+export var icon = EuiIconError;

package/optimize/es/components/icon/icon_map.js

@@ -126,6 +126,7 @@ export var typeToPathMap = {
   emsApp: 'app_ems',
   eql: 'eql',
   eraser: 'eraser',
+  error: 'error',
   exit: 'exit',
   expand: 'expand',
   expandMini: 'expandMini',

package/optimize/es/components/index.js

@@ -73,6 +73,7 @@ export * from './observer/resize_observer';
 export * from './search_bar';
 export * from './selectable';
 export * from './side_nav';
+export * from './skeleton';
 export * from './spacer';
 export * from './stat';
 export * from './steps';

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

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["lines", "className", "aria-label"];
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,35 +6,16 @@ var _excluded = ["lines", "className", "aria-label"];
  * Side Public License, v 1.
  */
 import React from 'react';
-import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { useLoadingAriaLabel } from './_loading_strings';
-import { euiLoadingContentStyles } from './loading_content.styles';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiLoadingContent = function EuiLoadingContent(_ref) {
-  var _ref$lines = _ref.lines,
-      lines = _ref$lines === void 0 ? 3 : _ref$lines,
-      className = _ref.className,
-      ariaLabel = _ref['aria-label'],
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var euiTheme = useEuiTheme();
-  var styles = euiLoadingContentStyles(euiTheme);
-  var lineCssStyles = [styles.euiLoadingContent__singleLine];
-  var defaultLabel = useLoadingAriaLabel();
-  var classes = classNames('euiLoadingContent', className);
-  var lineElements = [];
+import { EuiSkeletonText } from '../skeleton';
+/**
+ * @deprecated Use `EuiSkeletonTextProps` instead
+ */
 
-  for (var i = 0; i < lines; i++) {
-    lineElements.push(___EmotionJSX("span", {
-      key: i,
-      css: lineCssStyles
-    }));
-  }
+import { jsx as ___EmotionJSX } from "@emotion/react";
 
-  return ___EmotionJSX("span", _extends({
-    className: classes,
-    role: "progressbar",
-    "aria-label": ariaLabel || defaultLabel
-  }, rest), lineElements);
+/**
+ * @deprecated Use `EuiSkeletonText` instead
+ */
+export var EuiLoadingContent = function EuiLoadingContent(props) {
+  return ___EmotionJSX(EuiSkeletonText, props);
 };

package/optimize/es/components/popover/popover.js

@@ -463,7 +463,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
             id: this.descriptionId
           }, ownFocus && ___EmotionJSX(EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
-            default: "You are in a dialog. To close this dialog, hit escape."
+            default: "You are in a dialog. Press Escape, or tap/click outside the dialog to close."
           }), popoverScreenReaderText));
         }
 

package/optimize/es/components/progress/progress.a11y.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiProgress } from './progress';
+import { EuiSpacer } from '../spacer';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ProgressCommonProps = {
+  color: 'success',
+  max: 100
+};
+
+var ProgressBars = function ProgressBars() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-1"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "xs",
+    value: 0
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-2"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "s",
+    value: 33
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-3"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "m",
+    value: 66
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-4"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "l",
+    value: 100
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-5"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    label: "Basic percentage",
+    size: "l",
+    value: 100
+  }, ProgressCommonProps))), ___EmotionJSX(EuiSpacer, {
+    size: "m"
+  }), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-infinite"
+  }, ___EmotionJSX(EuiProgress, {
+    valueText: true,
+    size: "l",
+    color: "success"
+  })));
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount(___EmotionJSX(ProgressBars, null));
+  cy.get('div[data-test-subj="cy-progress-1"]').should('exist');
+});
+describe('EuiProgress', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('displays correct progress values and labels', function () {
+      cy.get('div[data-test-subj="cy-progress-1"] span.euiProgress__valueText').contains('0');
+      cy.get('div[data-test-subj="cy-progress-2"] span.euiProgress__valueText').contains('33');
+      cy.get('div[data-test-subj="cy-progress-3"] span.euiProgress__valueText').contains('66');
+      cy.get('div[data-test-subj="cy-progress-4"] span.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__label').contains('Basic percentage');
+      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-infinite"] span.euiProgress__valueText').should('not.exist');
+    });
+  });
+});

package/optimize/es/components/resizable_container/resizable_container.a11y.js

@@ -0,0 +1,110 @@
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiResizableContainer } from './resizable_container';
+import { EuiText } from '../text';
+import { faker } from '@faker-js/faker';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var text = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("p", null, faker.lorem.paragraphs()), ___EmotionJSX("p", null, faker.lorem.paragraphs()), ___EmotionJSX("p", null, faker.lorem.paragraphs()));
+
+describe('Horizontal EuiResizableContainer', function () {
+  var HorizontalContainer = function HorizontalContainer() {
+    return ___EmotionJSX(EuiResizableContainer, {
+      style: {
+        height: '200px'
+      }
+    }, function (EuiResizablePanel, EuiResizableButton) {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiResizablePanel, {
+        initialSize: 50,
+        minSize: "30%",
+        tabIndex: 0
+      }, ___EmotionJSX(EuiText, null, ___EmotionJSX("div", null, text), ___EmotionJSX("a", {
+        href: "#",
+        "data-test-subj": "hello-world-link"
+      }, "Hello world"))), ___EmotionJSX(EuiResizableButton, null), ___EmotionJSX(EuiResizablePanel, {
+        initialSize: 50,
+        minSize: "200px",
+        tabIndex: 0
+      }, ___EmotionJSX(EuiText, null, text)));
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(HorizontalContainer, null));
+    cy.get('div.euiResizablePanel').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when first panel is scrolled vertically', function () {
+      cy.realPress('Tab');
+      cy.get('div.euiPanel').first().should('have.focus');
+      cy.realPress('End');
+      cy.get('a[data-test-subj="hello-world-link"]').should('be.visible');
+      cy.checkAxe();
+    });
+    it('has zero violations when second panel is scrolled vertically', function () {
+      cy.repeatRealPress('Tab', 4);
+      cy.get('div.euiPanel').last().should('have.focus');
+      cy.realPress('End');
+      cy.realPress('Home');
+      cy.checkAxe();
+    });
+    it('has zero violations when the horizontal panels are resized', function () {
+      cy.repeatRealPress('Tab', 3);
+      cy.get('button.euiResizableButton').should('have.focus');
+      cy.repeatRealPress('ArrowRight', 10);
+      cy.checkAxe();
+    });
+  });
+});
+describe('Vertical EuiResizableContainer', function () {
+  var VerticalContainer = function VerticalContainer() {
+    return ___EmotionJSX(EuiResizableContainer, {
+      style: {
+        height: '400px'
+      },
+      direction: "vertical"
+    }, function (EuiResizablePanel, EuiResizableButton) {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiResizablePanel, {
+        initialSize: 60,
+        minSize: "40%",
+        tabIndex: 0
+      }, ___EmotionJSX(EuiText, null, ___EmotionJSX("div", null, text))), ___EmotionJSX(EuiResizableButton, null), ___EmotionJSX(EuiResizablePanel, {
+        initialSize: 40,
+        minSize: "10%",
+        tabIndex: 0
+      }, ___EmotionJSX(EuiText, null, ___EmotionJSX("div", null, text))));
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(VerticalContainer, null));
+    cy.get('div.euiResizablePanel').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the vertical panels are resized', function () {
+      cy.repeatRealPress('Tab');
+      cy.get('button.euiResizableButton').should('have.focus');
+      cy.repeatRealPress('ArrowDown', 10);
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+export { EuiSkeletonLoading } from './skeleton_loading';
+export { EuiSkeletonCircle } from './skeleton_circle';
+export { EuiSkeletonText } from './skeleton_text';
+export { EuiSkeletonRectangle } from './skeleton_rectangle';
+export { EuiSkeletonTitle } from './skeleton_title';

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "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
+ * 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 classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { EuiSkeletonLoading } from './skeleton_loading';
+import { euiSkeletonCircleStyles } from './skeleton_circle.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var SIZES = ['s', 'm', 'l', 'xl'];
+export var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      className = _ref.className,
+      contentAriaLabel = _ref.contentAriaLabel,
+      ariaWrapperProps = _ref.ariaWrapperProps,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var euiTheme = useEuiTheme();
+  var styles = euiSkeletonCircleStyles(euiTheme);
+  var cssStyles = [styles.euiSkeletonCircle, styles[size]];
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("div", _extends({
+      className: classNames('euiSkeletonCircle', className),
+      css: cssStyles
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

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

@@ -0,0 +1,26 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
+import { euiSkeletonGradientAnimation } from './utils';
+export var euiSkeletonCircleStyles = function euiSkeletonCircleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonCircle: /*#__PURE__*/css("display:block;border-radius:50%;", euiSkeletonGradientAnimation(euiThemeContext, {
+      slideSize: '-70%',
+      gradientSize: '280%'
+    }), ";;label:euiSkeletonCircle;"),
+    // Sizes
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l), ";;label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl), ";;label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xxl), ";;label:l;"),
+    xl: /*#__PURE__*/css(logicalSizeCSS(mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 4;
+    })), ";;label:xl;")
+  };
+};

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

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent"];
+
+/*
+ * 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 { EuiScreenReaderLive } from '../accessibility/screen_reader_live';
+import { useEuiI18n } from '../i18n';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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,
+      loadedContent = _ref.loadedContent,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var loadingAriaLabel = useEuiI18n('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
+    contentAriaLabel: contentAriaLabel
+  });
+  var loadedAriaLive = useEuiI18n('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
+    contentAriaLabel: contentAriaLabel
+  });
+  var loadingProps = {
+    'aria-label': loadingAriaLabel,
+    role: 'progressbar'
+  };
+  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));
+};