@elastic/eui 74.0.1 → 75.0.0

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/search_bar/filters/field_value_selection_filter.js

@@ -251,16 +251,16 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       if (!multiSelect && autoClose) {
         this.closePopover();
 
-        var _query = checked ? this.props.query.removeSimpleFieldClauses(field) : this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator);
+        var _query = checked ? this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldClauses(field);
 
         this.props.onChange(_query);
       } else {
         if (multiSelect === 'or') {
-          var _query2 = checked ? this.props.query.removeOrFieldValue(field, value) : this.props.query.addOrFieldValue(field, value, true, operator);
+          var _query2 = checked ? this.props.query.addOrFieldValue(field, value, true, operator) : this.props.query.removeOrFieldValue(field, value);
 
           this.props.onChange(_query2);
         } else {
-          var _query3 = checked ? this.props.query.removeSimpleFieldValue(field, value) : this.props.query.addSimpleFieldValue(field, value, true, operator);
+          var _query3 = checked ? this.props.query.addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldValue(field, value);
 
           this.props.onChange(_query3);
         }
@@ -370,13 +370,9 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         listProps: {
           isVirtualized: isOverSearchThreshold || false
         },
-        onChange: function onChange(options) {
-          var diff = items.find(function (item, index) {
-            return item.checked !== options[index].checked;
-          });
-
-          if (diff) {
-            _this5.onOptionClick(diff.data.optionField, diff.data.value, diff.checked);
+        onChange: function onChange(options, event, changedOption) {
+          if (changedOption.data) {
+            _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
           }
         }
       }, searchProps), function (list, search) {

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -99,6 +99,22 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
+      _this.ariaPosInSetMap = {};
+      var latestAriaPosIndex = 0;
+      optionArray.forEach(function (option, index) {
+        if (!option.isGroupLabel) {
+          latestAriaPosIndex++;
+          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+        }
+      });
+      _this.ariaSetSize = latestAriaPosIndex;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/memo(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -142,9 +158,6 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return ___EmotionJSX(EuiSelectableListItem, _extends({
         key: id,
@@ -165,8 +178,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": index + 1 - labelCount,
-        "aria-setsize": data.length - labelCount,
+        "aria-posinset": _this.ariaPosInSetMap[index],
+        "aria-setsize": _this.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -323,6 +336,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           rest = _objectWithoutProperties(_this$props7, _excluded3);
 
       var optionArray = visibleOptions || options;
+      this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
       var calculatedHeight = heightIsFull ? false : forcedHeight; // If calculatedHeight is still undefined, then calculate it
 

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));
+};

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

@@ -0,0 +1,57 @@
+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"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/*
+ * 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 { logicalStyles } from '../../global_styling';
+import { EuiSkeletonLoading } from './skeleton_loading';
+import { euiSkeletonRectangleStyles } from './skeleton_rectangle.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var RADIUS = ['s', 'm', 'none'];
+export var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+      _ref$borderRadius = _ref.borderRadius,
+      borderRadius = _ref$borderRadius === void 0 ? 's' : _ref$borderRadius,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '24px' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '24px' : _ref$height,
+      style = _ref.style,
+      className = _ref.className,
+      contentAriaLabel = _ref.contentAriaLabel,
+      ariaWrapperProps = _ref.ariaWrapperProps,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var euiTheme = useEuiTheme();
+  var styles = euiSkeletonRectangleStyles(euiTheme);
+  var cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("div", _extends({
+      className: classNames('euiSkeletonRectangle', className),
+      css: cssStyles,
+      style: logicalStyles(_objectSpread(_objectSpread({}, style), {}, {
+        width: width,
+        height: height
+      }))
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

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

@@ -0,0 +1,34 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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 { euiSkeletonGradientAnimation } from './utils';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ubzie1-none",
+  styles: "border-radius:0;label:none;"
+} : {
+  name: "ubzie1-none",
+  styles: "border-radius:0;label:none;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiSkeletonRectangleStyles = function euiSkeletonRectangleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonRectangle: /*#__PURE__*/css("display:block;", euiSkeletonGradientAnimation(euiThemeContext, {
+      slideSize: '-75%',
+      gradientSize: '350%'
+    }), ";;label:euiSkeletonRectangle;"),
+    // Border radius
+    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    none: _ref
+  };
+};

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

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "lines", "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 { euiSkeletonTextStyles } from './skeleton_text.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export var EuiSkeletonText = function EuiSkeletonText(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+      _ref$lines = _ref.lines,
+      lines = _ref$lines === void 0 ? 3 : _ref$lines,
+      _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 = euiSkeletonTextStyles(euiTheme);
+  var lineCssStyles = [styles.euiSkeletonText, styles[size]];
+  var lineElements = [];
+
+  for (var i = 0; i < lines; i++) {
+    lineElements.push(___EmotionJSX("span", {
+      key: i,
+      css: lineCssStyles
+    }));
+  }
+
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("span", _extends({
+      className: classNames('euiSkeletonText', className)
+    }, rest), lineElements),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

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

@@ -0,0 +1,34 @@
+/*
+ * 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 { euiFontSize, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiSkeletonGradientAnimation } from './utils';
+
+var calculateLineSize = function calculateLineSize(euiThemeContext, size) {
+  var _euiFontSize = euiFontSize(euiThemeContext, 'm', {
+    customScale: size
+  }),
+      fontSize = _euiFontSize.fontSize,
+      lineHeight = _euiFontSize.lineHeight;
+
+  return "\n    ".concat(logicalCSS('height', fontSize), "\n    ").concat(logicalCSS('margin-top', mathWithUnits([lineHeight, fontSize], function (x, y) {
+    return x - y;
+  })), "\n  ");
+};
+
+export var euiSkeletonTextStyles = function euiSkeletonTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonText: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " border-radius:", euiTheme.border.radius.small, ";", euiSkeletonGradientAnimation(euiThemeContext), "transform:translateY(-25%);&:last-child:not(:only-child){", logicalCSS('width', '75%'), ";};label:euiSkeletonText;"),
+    // Sizes
+    m: /*#__PURE__*/css(calculateLineSize(euiThemeContext, 'm'), ";;label:m;"),
+    s: /*#__PURE__*/css(calculateLineSize(euiThemeContext, 's'), ";;label:s;"),
+    xs: /*#__PURE__*/css(calculateLineSize(euiThemeContext, 'xs'), ";;label:xs;"),
+    relative: /*#__PURE__*/css(logicalCSS('height', '1em'), " ", logicalCSS('margin-top', '0.5em'), ";;label:relative;")
+  };
+};

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

@@ -0,0 +1,41 @@
+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 { euiSkeletonTitleStyles } from './skeleton_title.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiSkeletonTitle = function EuiSkeletonTitle(_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 = euiSkeletonTitleStyles(euiTheme);
+  var cssStyles = [styles.euiSkeletonTitle, styles[size]];
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("span", _extends({
+      className: classNames('euiSkeletonTitle', className),
+      css: cssStyles
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

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

@@ -0,0 +1,24 @@
+/*
+ * 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 { logicalCSS } from '../../global_styling';
+import { euiTitle } from '../title/title.styles';
+import { euiSkeletonGradientAnimation } from './utils';
+export var euiSkeletonTitleStyles = function euiSkeletonTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonTitle: /*#__PURE__*/css("display:block;", logicalCSS('width', '45%'), ";border-radius:", euiTheme.border.radius.medium, ";", euiSkeletonGradientAnimation(euiThemeContext), ";;label:euiSkeletonTitle;"),
+    // Sizes
+    l: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'l').lineHeight), ";;label:l;"),
+    m: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'm').lineHeight), ";;label:m;"),
+    s: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 's').lineHeight), ";;label:s;"),
+    xs: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'xs').lineHeight), ";;label:xs;"),
+    xxs: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'xxs').lineHeight), ";;label:xxs;"),
+    xxxs: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'xxxs').lineHeight), ";border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
+  };
+};

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

@@ -0,0 +1,25 @@
+/*
+ * 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 { shade, tint } from '../../services';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { euiAnimSlideX } from '../../global_styling/utility/animations';
+export var euiSkeletonGradientAnimation = function euiSkeletonGradientAnimation(_ref) {
+  var euiTheme = _ref.euiTheme,
+      colorMode = _ref.colorMode;
+
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$slideSize = _ref2.slideSize,
+      slideSize = _ref2$slideSize === void 0 ? '-53%' : _ref2$slideSize,
+      _ref2$gradientSize = _ref2.gradientSize,
+      gradientSize = _ref2$gradientSize === void 0 ? '220%' : _ref2$gradientSize;
+
+  var gradientStartStop = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.12) : tint(euiTheme.colors.lightShade, 0.65);
+  var gradientMiddle = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.24) : tint(euiTheme.colors.lightShade, 0.8);
+  return /*#__PURE__*/css("background-color:", gradientStartStop, ";", euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", logicalCSS('width', gradientSize), " ", logicalCSS('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", euiAnimSlideX(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
+};

package/optimize/es/global_styling/functions/logicals.js

@@ -118,7 +118,8 @@ export var logicalStyles = function logicalStyles(styleObject) {
  * @returns `string` Returns the logical CSS properties for height and width
  */
 
-export var logicalSizeCSS = function logicalSizeCSS(width, height) {
+export var logicalSizeCSS = function logicalSizeCSS(width) {
+  var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : width;
   return "\n    ".concat(logicals.width, ": ").concat(width, ";\n    ").concat(logicals.height, ": ").concat(height, ";\n  ");
 };
 /**

package/optimize/es/global_styling/utility/animations.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,4 +13,7 @@ import { keyframes } from '@emotion/react';
 export var euiAnimFadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
 export var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
   return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
+};
+export var euiAnimSlideX = function euiAnimSlideX(size) {
+  return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
 };