@elastic/eui 70.2.3 → 70.3.0

package/optimize/es/components/modal/modal.js

@@ -14,13 +14,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useRef, useCallback } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { keys } from '../../services';
+import { keys, useEuiTheme } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiI18n } from '../i18n';
+import { euiModalStyles } from './modal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModal = function EuiModal(_ref) {
   var className = _ref.className,
@@ -32,19 +33,6 @@ export var EuiModal = function EuiModal(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  // TODO: Remove this onFocus scroll workaround after react-focus-on supports focusOptions
-  // @see https://github.com/elastic/eui/issues/6304
-  var bodyScrollTop = useRef(typeof window === 'undefined' ? undefined : window.scrollY // Account for SSR
-  );
-  var onFocus = useCallback(function () {
-    if (bodyScrollTop.current != null) {
-      window.scrollTo({
-        top: bodyScrollTop.current
-      });
-      bodyScrollTop.current = undefined; // Unset after first auto focus
-    }
-  }, []);
-
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
       event.preventDefault();
@@ -53,28 +41,29 @@ export var EuiModal = function EuiModal(_ref) {
     }
   };
 
-  var newStyle;
-  var widthClassName;
+  var newStyle = style;
 
-  if (maxWidth === true) {
-    widthClassName = 'euiModal--maxWidth-default';
-  } else if (maxWidth !== false) {
-    var value = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
-    newStyle = _objectSpread(_objectSpread({}, style), {}, {
-      maxWidth: value
+  if (typeof maxWidth !== 'boolean') {
+    newStyle = _objectSpread(_objectSpread({}, newStyle), {}, {
+      maxInlineSize: maxWidth
     });
   }
 
-  var classes = classnames('euiModal', widthClassName, className);
+  var classes = classnames('euiModal', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalStyles(euiTheme);
+  var cssStyles = [styles.euiModal, maxWidth === true && styles.defaultMaxWidth];
+  var cssCloseIconStyles = [styles.euiModal__closeIcon];
   return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
     initialFocus: initialFocus,
-    scrollLock: true
+    scrollLock: true,
+    preventScrollOnFocus: true
   }, ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,
     tabIndex: 0,
-    onFocus: onFocus,
-    style: newStyle || style
+    style: newStyle
   }, rest), ___EmotionJSX(EuiI18n, {
     token: "euiModal.closeModal",
     default: "Closes this modal window"
@@ -82,6 +71,7 @@ export var EuiModal = function EuiModal(_ref) {
     return ___EmotionJSX(EuiButtonIcon, {
       iconType: "cross",
       onClick: onClose,
+      css: cssCloseIconStyles,
       className: "euiModal__closeIcon",
       color: "text",
       "aria-label": closeModal

package/optimize/es/components/modal/modal.styles.js

@@ -0,0 +1,23 @@
+/*
+ * 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 { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
+import { euiCanAnimate, euiBreakpoint, euiAnimSlideInUp } from '../../global_styling';
+import { euiFormVariables } from '../form/form.styles';
+export var euiModalStyles = function euiModalStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    // Variants
+    defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
+    confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{", euiShadowXLarge(euiThemeContext, {
+      reverse: true
+    }), " inset-block-start:auto;};label:confirmation;"),
+    euiModal__closeIcon: /*#__PURE__*/css("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")
+  };
+};

package/optimize/es/components/modal/modal_body.js

@@ -11,6 +11,8 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalBodyStyles } from './modal_body.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalBody = function EuiModalBody(_ref) {
   var className = _ref.className,
@@ -18,9 +20,15 @@ export var EuiModalBody = function EuiModalBody(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalBody', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalBodyStyles(euiTheme);
+  var cssStyles = [styles.euiModalBody];
+  var cssOverflowStyles = [styles.euiModalBody__overflow];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), ___EmotionJSX("div", {
+    css: cssOverflowStyles,
     className: "euiModalBody__overflow"
   }, children));
 };

package/optimize/es/components/modal/modal_body.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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 { euiYScrollWithShadows, euiBreakpoint } from '../../global_styling';
+export var euiModalBodyStyles = function euiModalBodyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalBody: /*#__PURE__*/css("flex-grow:1;overflow:hidden;display:flex;flex-direction:column;&:last-of-type .euiModalBody__overflow{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody;"),
+    euiModalBody__overflow: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+  };
+};

package/optimize/es/components/modal/modal_footer.js

@@ -11,6 +11,8 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalFooterStyles } from './modal_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalFooter = function EuiModalFooter(_ref) {
   var className = _ref.className,
@@ -18,7 +20,11 @@ export var EuiModalFooter = function EuiModalFooter(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalFooter', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalFooterStyles(euiTheme);
+  var cssStyles = [styles.euiModalFooter];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/optimize/es/components/modal/modal_footer.styles.js

@@ -0,0 +1,15 @@
+/*
+ * 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 { euiBreakpoint } from '../../global_styling';
+export var euiModalFooterStyles = function euiModalFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalFooter: /*#__PURE__*/css("display:flex;justify-content:flex-end;padding-block:", euiTheme.size.base, " ", euiTheme.size.l, ";padding-inline:", euiTheme.size.l, ";flex-grow:0;flex-shrink:0;gap:", euiTheme.size.base, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{background:", euiTheme.colors.lightestShade, ";padding-block:", euiTheme.size.m, ";padding-inline:", euiTheme.size.l, ";justify-content:stretch;gap:", euiTheme.size.s, ";>*{flex:1;}};label:euiModalFooter;")
+  };
+};

package/optimize/es/components/modal/modal_header.js

@@ -11,6 +11,8 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalHeaderStyles } from './modal_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeader = function EuiModalHeader(_ref) {
   var className = _ref.className,
@@ -18,7 +20,11 @@ export var EuiModalHeader = function EuiModalHeader(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalHeaderStyles(euiTheme);
+  var cssStyles = [styles.euiModalHeader];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/optimize/es/components/modal/modal_header.styles.js

@@ -0,0 +1,14 @@
+/*
+ * 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';
+export var euiModalHeaderStyles = function euiModalHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;align-items:center;padding-inline:", euiTheme.size.l, " ", euiTheme.size.xxl, ";padding-block:", euiTheme.size.l, " ", euiTheme.size.base, ";flex-grow:0;flex-shrink:0;&+.euiModalFooter{padding-block-start:", euiTheme.size.s, ";};label:euiModalHeader;")
+  };
+};

package/optimize/es/components/modal/modal_header_title.js

@@ -11,6 +11,7 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { EuiTitle } from '../title';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
   var className = _ref.className,
@@ -18,7 +19,8 @@ export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader__title', className);
-  return ___EmotionJSX("div", _extends({
+  return ___EmotionJSX(EuiTitle, _extends({
+    size: "m",
     className: classes
   }, rest), /*#__PURE__*/React.isValidElement(children) ? children : ___EmotionJSX("h1", null, children));
 };

package/optimize/es/components/page_template/page_template.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "mainProps", "className", "minHeight", "responsive"];
+var _excluded = ["children", "responsive", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "component", "mainProps", "className", "minHeight"];
 
 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; }
 
@@ -38,6 +38,8 @@ export var TemplateContext = /*#__PURE__*/createContext({
  */
 export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   var children = _ref.children,
+      _ref$responsive = _ref.responsive,
+      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
       _ref$restrictWidth = _ref.restrictWidth,
       restrictWidth = _ref$restrictWidth === void 0 ? true : _ref$restrictWidth,
       _ref$paddingSize = _ref.paddingSize,
@@ -48,12 +50,11 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       _offset = _ref.offset,
       panelled = _ref.panelled,
       contentBorder = _ref.contentBorder,
+      component = _ref.component,
       mainProps = _ref.mainProps,
       className = _ref.className,
       _ref$minHeight = _ref.minHeight,
       minHeight = _ref$minHeight === void 0 ? '460px' : _ref$minHeight,
-      _ref$responsive = _ref.responsive,
-      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useEuiTheme = useEuiTheme(),
@@ -161,6 +162,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     style: pageStyle,
     className: classes
   }), sidebar, ___EmotionJSX(EuiPageInner, _extends({}, mainProps, {
+    component: component,
     id: pageInnerId,
     border: innerBordered(),
     panelled: innerPanelled(),

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

@@ -0,0 +1,73 @@
+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 { EuiPopover } from './popover';
+import { EuiButtonEmpty } from '../button';
+import { EuiText } from '../text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Popover = function Popover() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPopoverOpen = _useState2[0],
+      setIsPopoverOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsPopoverOpen(function (isPopoverOpen) {
+      return !isPopoverOpen;
+    });
+  };
+
+  var closePopover = function closePopover() {
+    return setIsPopoverOpen(false);
+  };
+
+  var button = ___EmotionJSX(EuiButtonEmpty, {
+    iconType: "documentation",
+    iconSide: "right",
+    onClick: onButtonClick
+  }, "How it works");
+
+  var popoverProps = {
+    button: button,
+    isOpen: isPopoverOpen,
+    closePopover: closePopover
+  };
+  return ___EmotionJSX(EuiPopover, popoverProps, ___EmotionJSX(EuiText, {
+    style: {
+      width: 300
+    }
+  }, ___EmotionJSX("p", null, "Popover content that\u2019s wider than the default width")));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Popover, null));
+  cy.get('div.euiPopover__panel').should('not.exist');
+});
+describe('EuiPopover', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/search_bar/query/default_syntax.js

@@ -3500,7 +3500,8 @@ var printValue = function printValue(value, options) {
     return value.toString();
   }
 
-  if (value.length === 0 || value.match(/\s/) || value.toLowerCase() === 'or') {
+  if (value.length === 0 || value.match(/[^\w\-_*:()"/\\]/) || // Escape spaces and special characters not used as syntax identifiers
+  value.toLowerCase() === 'or') {
     return "\"".concat(escapePhraseValue(value), "\"");
   }
 

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

@@ -0,0 +1,97 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiTabbedContent } from './tabbed_content';
+import { EuiSpacer } from '../spacer';
+import { EuiText } from '../text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var tabs = [{
+  id: 'cobalt--id',
+  name: 'Cobalt',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth\u2019s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.")))
+}, {
+  id: 'dextrose--id',
+  name: 'Dextrose',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.")))
+}, {
+  id: 'hydrogen--id',
+  name: 'Hydrogen',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table")))
+}, {
+  id: 'monosodium_glutammate--id',
+  name: 'Monosodium Glutamate',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.")))
+}];
+var defaultTabProps = {
+  tabs: tabs,
+  initialSelectedTab: tabs[0],
+  autoFocus: 'selected',
+  onTabClick: function onTabClick() {}
+};
+describe('EuiTabs', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations with default props', function () {
+      cy.mount(___EmotionJSX(EuiTabbedContent, defaultTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with second tab open on render', function () {
+      var secondSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[1]
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, secondSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with third tab open on render', function () {
+      var thirdSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[2]
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, thirdSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with last tab open on render', function () {
+      var lastSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[3]
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, lastSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with all tabs disabled except first', function () {
+      var disabledTabs = tabs.map(function (tab, i) {
+        if (i === 0) {
+          return tab;
+        }
+
+        return _objectSpread(_objectSpread({}, tab), {}, {
+          disabled: true
+        });
+      });
+
+      var disabledTabProps = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        tabs: disabledTabs
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, disabledTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -0,0 +1,74 @@
+/*
+ * 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 { EuiTreeView } from './tree_view';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TreeView = function TreeView() {
+  var items = [{
+    label: 'Item One',
+    id: 'item_one',
+    isExpanded: true,
+    children: [{
+      label: 'Item A',
+      id: 'item_a'
+    }, {
+      label: 'Item B',
+      id: 'item_b',
+      children: [{
+        label: 'A Cloud',
+        id: 'item_cloud'
+      }, {
+        label: "I'm a Bug",
+        id: 'item_bug',
+        className: 'classForBug'
+      }]
+    }, {
+      label: 'Item C',
+      id: 'item_c',
+      children: [{
+        label: 'Another Cloud',
+        id: 'item_cloud2'
+      }, {
+        label: 'Another Bug',
+        id: 'item_bug2'
+      }]
+    }]
+  }, {
+    label: 'Item Two',
+    id: 'item_two'
+  }];
+  var defaultTreeViewProps = {
+    items: items,
+    'aria-label': 'Sample folder tree'
+  };
+  return ___EmotionJSX("div", {
+    style: {
+      width: '20rem'
+    }
+  }, ___EmotionJSX(EuiTreeView, defaultTreeViewProps));
+};
+
+describe('EuiTreeView', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.mount(___EmotionJSX(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with a nested child expanded', function () {
+      cy.mount(___EmotionJSX(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.get('button#item_b').realClick();
+      cy.get('button#item_b').should('have.attr', 'aria-expanded', 'true');
+      cy.get('li.euiTreeView__node').contains('A Cloud').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,4 +10,7 @@ var _templateObject;
  * Side Public License, v 1.
  */
 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 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);
+};

package/optimize/lib/components/accessibility/skip_link/skip_link.js

@@ -78,15 +78,16 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
 
     setHasValidId(false); // If no valid element via ID is available, use the fallback query selectors
 
-    var fallbackEl = document.querySelector(fallbackDestination);
+    if (fallbackDestination) {
+      var fallbackEl = document.querySelector(fallbackDestination);
 
-    if (fallbackEl) {
-      setDestinationEl(fallbackEl);
+      if (fallbackEl) {
+        setDestinationEl(fallbackEl);
+      }
     }
   }, [destinationId, fallbackDestination]);
   var onClick = (0, _react.useCallback)(function (e) {
-    if (overrideLinkBehavior || !hasValidId) {
-      if (!destinationEl) return;
+    if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
       e.preventDefault(); // Scroll to the top of the destination content only if it's ~mostly out of view
 
       var destinationY = destinationEl.getBoundingClientRect().top;

package/optimize/lib/components/badge/beta_badge/beta_badge.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiBetaBadge = exports.COLORS = void 0;
+exports.SIZES = exports.EuiBetaBadge = exports.COLORS = exports.ALIGNMENTS = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -27,11 +27,13 @@ var _beta_badge = require("./beta_badge.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
+var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size", "alignment"];
 var COLORS = ['accent', 'subdued', 'hollow'];
 exports.COLORS = COLORS;
 var SIZES = ['s', 'm'];
 exports.SIZES = SIZES;
+var ALIGNMENTS = ['baseline', 'middle'];
+exports.ALIGNMENTS = ALIGNMENTS;
 
 var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var className = _ref.className,
@@ -51,13 +53,15 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       target = _ref.target,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? 'baseline' : _ref$alignment,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var singleLetter = !!(typeof label === 'string' && label.length === 1);
   var isCircular = iconType || singleLetter;
   var classes = (0, _classnames.default)('euiBetaBadge', className);
   var styles = (0, _beta_badge.euiBetaBadgeStyles)(euiTheme);
-  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
+  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], styles[alignment], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
   var icon;
 
   if (iconType) {