@elastic/eui 74.0.1 → 75.0.0

package/optimize/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -273,16 +273,16 @@ 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);
         }
@@ -390,13 +390,9 @@ 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/lib/components/selectable/selectable_list/selectable_list.js

@@ -116,6 +116,19 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaSetSize", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaPosInSetMap", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ListRow", /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -158,9 +171,6 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, (0, _extends2.default)({
         key: id,
@@ -181,8 +191,8 @@ 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,
@@ -333,6 +343,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           textWrap = _this$props7.textWrap,
           rest = (0, _objectWithoutProperties2.default)(_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/lib/components/skeleton/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiSkeletonCircle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_circle.EuiSkeletonCircle;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonLoading", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_loading.EuiSkeletonLoading;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonRectangle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_rectangle.EuiSkeletonRectangle;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonText", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_text.EuiSkeletonText;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonTitle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_title.EuiSkeletonTitle;
+  }
+});
+
+var _skeleton_loading = require("./skeleton_loading");
+
+var _skeleton_circle = require("./skeleton_circle");
+
+var _skeleton_text = require("./skeleton_text");
+
+var _skeleton_rectangle = require("./skeleton_rectangle");
+
+var _skeleton_title = require("./skeleton_title");

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.EuiSkeletonCircle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 SIZES = ['s', 'm', 'l', 'xl'];
+exports.SIZES = SIZES;
+
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _skeleton_circle.euiSkeletonCircleStyles)(euiTheme);
+  var cssStyles = [styles.euiSkeletonCircle, styles[size]];
+  return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
+    isLoading: isLoading,
+    loadingContent: (0, _react2.jsx)("div", (0, _extends2.default)({
+      className: (0, _classnames.default)('euiSkeletonCircle', className),
+      css: cssStyles
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};
+
+exports.EuiSkeletonCircle = EuiSkeletonCircle;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSkeletonCircleStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _utils = require("./utils");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiSkeletonCircleStyles = function euiSkeletonCircleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonCircle: /*#__PURE__*/(0, _react.css)("display:block;border-radius:50%;", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext, {
+      slideSize: '-70%',
+      gradientSize: '280%'
+    }), ";;label:euiSkeletonCircle;"),
+    // Sizes
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xxl), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)((0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 4;
+    })), ";;label:xl;")
+  };
+};
+
+exports.euiSkeletonCircleStyles = euiSkeletonCircleStyles;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSkeletonLoading = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+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 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var loadingAriaLabel = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
+    contentAriaLabel: contentAriaLabel
+  });
+  var loadedAriaLive = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
+    contentAriaLabel: contentAriaLabel
+  });
+  var loadingProps = {
+    'aria-label': loadingAriaLabel,
+    role: 'progressbar'
+  };
+  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));
+};
+
+exports.EuiSkeletonLoading = EuiSkeletonLoading;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADIUS = exports.EuiSkeletonRectangle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _services = require("../../services");
+
+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"];
+
+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) { (0, _defineProperty2.default)(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; }
+
+var RADIUS = ['s', 'm', 'none'];
+exports.RADIUS = RADIUS;
+
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _skeleton_rectangle.euiSkeletonRectangleStyles)(euiTheme);
+  var cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
+  return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
+    isLoading: isLoading,
+    loadingContent: (0, _react2.jsx)("div", (0, _extends2.default)({
+      className: (0, _classnames.default)('euiSkeletonRectangle', className),
+      css: cssStyles,
+      style: (0, _global_styling.logicalStyles)(_objectSpread(_objectSpread({}, style), {}, {
+        width: width,
+        height: height
+      }))
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};
+
+exports.EuiSkeletonRectangle = EuiSkeletonRectangle;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSkeletonRectangleStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _utils = require("./utils");
+
+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)."; }
+
+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__
+};
+
+var euiSkeletonRectangleStyles = function euiSkeletonRectangleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonRectangle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext, {
+      slideSize: '-75%',
+      gradientSize: '350%'
+    }), ";;label:euiSkeletonRectangle;"),
+    // Border radius
+    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    none: _ref
+  };
+};
+
+exports.euiSkeletonRectangleStyles = euiSkeletonRectangleStyles;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LINES = exports.EuiSkeletonText = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+exports.LINES = LINES;
+
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _skeleton_text.euiSkeletonTextStyles)(euiTheme);
+  var lineCssStyles = [styles.euiSkeletonText, styles[size]];
+  var lineElements = [];
+
+  for (var i = 0; i < lines; i++) {
+    lineElements.push((0, _react2.jsx)("span", {
+      key: i,
+      css: lineCssStyles
+    }));
+  }
+
+  return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
+    isLoading: isLoading,
+    loadingContent: (0, _react2.jsx)("span", (0, _extends2.default)({
+      className: (0, _classnames.default)('euiSkeletonText', className)
+    }, rest), lineElements),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};
+
+exports.EuiSkeletonText = EuiSkeletonText;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSkeletonTextStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _utils = require("./utils");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var calculateLineSize = function calculateLineSize(euiThemeContext, size) {
+  var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 'm', {
+    customScale: size
+  }),
+      fontSize = _euiFontSize.fontSize,
+      lineHeight = _euiFontSize.lineHeight;
+
+  return "\n    ".concat((0, _global_styling.logicalCSS)('height', fontSize), "\n    ").concat((0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)([lineHeight, fontSize], function (x, y) {
+    return x - y;
+  })), "\n  ");
+};
+
+var euiSkeletonTextStyles = function euiSkeletonTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonText: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " border-radius:", euiTheme.border.radius.small, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), "transform:translateY(-25%);&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";};label:euiSkeletonText;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)(calculateLineSize(euiThemeContext, 'm'), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)(calculateLineSize(euiThemeContext, 's'), ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)(calculateLineSize(euiThemeContext, 'xs'), ";;label:xs;"),
+    relative: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '1em'), " ", (0, _global_styling.logicalCSS)('margin-top', '0.5em'), ";;label:relative;")
+  };
+};
+
+exports.euiSkeletonTextStyles = euiSkeletonTextStyles;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSkeletonTitle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _skeleton_title.euiSkeletonTitleStyles)(euiTheme);
+  var cssStyles = [styles.euiSkeletonTitle, styles[size]];
+  return (0, _react2.jsx)(_skeleton_loading.EuiSkeletonLoading, (0, _extends2.default)({
+    isLoading: isLoading,
+    loadingContent: (0, _react2.jsx)("span", (0, _extends2.default)({
+      className: (0, _classnames.default)('euiSkeletonTitle', className),
+      css: cssStyles
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};
+
+exports.EuiSkeletonTitle = EuiSkeletonTitle;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSkeletonTitleStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _title = require("../title/title.styles");
+
+var _utils = require("./utils");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiSkeletonTitleStyles = function euiSkeletonTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), ";border-radius:", euiTheme.border.radius.medium, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), ";;label:euiSkeletonTitle;"),
+    // Sizes
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'l').lineHeight), ";;label:l;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'm').lineHeight), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 's').lineHeight), ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xs').lineHeight), ";;label:xs;"),
+    xxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxs').lineHeight), ";;label:xxs;"),
+    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), ";border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
+  };
+};
+
+exports.euiSkeletonTitleStyles = euiSkeletonTitleStyles;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSkeletonGradientAnimation = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../services");
+
+var _global_styling = require("../../global_styling");
+
+var _animations = require("../../global_styling/utility/animations");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var 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' ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
+  var gradientMiddle = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
+  return /*#__PURE__*/(0, _react.css)("background-color:", gradientStartStop, ";", _global_styling.euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', gradientSize), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", (0, _animations.euiAnimSlideX)(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
+};
+
+exports.euiSkeletonGradientAnimation = euiSkeletonGradientAnimation;

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

@@ -139,7 +139,8 @@ var logicalStyles = function logicalStyles(styleObject) {
 
 exports.logicalStyles = logicalStyles;
 
-var logicalSizeCSS = function logicalSizeCSS(width, height) {
+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  ");
 };
 /**