@elastic/eui 70.2.4 → 70.3.0

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) {

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

@@ -18,6 +18,24 @@ var _services = require("../../../services");
 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: "l1nme7-middle",
+  styles: "vertical-align:middle;label:middle;"
+} : {
+  name: "l1nme7-middle",
+  styles: "vertical-align:middle;label:middle;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "19hexhy-baseline",
+  styles: "vertical-align:baseline;label:baseline;"
+} : {
+  name: "19hexhy-baseline",
+  styles: "vertical-align:baseline;label:baseline;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "pzpqqg-euiBetaBadge__icon",
   styles: "position:relative;transform:translate(0, -1px);label:euiBetaBadge__icon;"
 } : {
@@ -30,7 +48,7 @@ var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
   return {
-    euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:super;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
@@ -56,15 +74,18 @@ var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
         })), "\n        ")
       }
     },
-    euiBetaBadge__icon: _ref
+    euiBetaBadge__icon: _ref3,
+    // Alignments
+    baseline: _ref2,
+    middle: _ref
   };
 }; // Util for detecting text color based on badge bg color
 
 
 exports.euiBetaBadgeStyles = euiBetaBadgeStyles;
 
-var getBadgeColors = function getBadgeColors(backgroundColor, _ref2) {
-  var euiTheme = _ref2.euiTheme;
+var getBadgeColors = function getBadgeColors(backgroundColor, _ref4) {
+  var euiTheme = _ref4.euiTheme;
   var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _services.hexToRgb)(backgroundColor))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return "\n    background-color: ".concat(backgroundColor, ";\n    color: ").concat(textColor, ";\n  ");
 };

package/optimize/lib/components/card/card.styles.js

@@ -58,11 +58,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 };
 
 var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "z24364-euiCard__main",
-  styles: "display:flex;label:euiCard__main;"
+  name: "31kq8f-euiCard__main",
+  styles: "display:flex;inline-size:100%;label:euiCard__main;"
 } : {
-  name: "z24364-euiCard__main",
-  styles: "display:flex;label:euiCard__main;",
+  name: "31kq8f-euiCard__main",
+  styles: "display:flex;inline-size:100%;label:euiCard__main;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _super_date_picker = require("./super_date_picker");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * 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"/>
+var SuperDatePicker = function SuperDatePicker() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+      showUpdateButton = _useState4[0];
+
+  var _useState5 = (0, _react.useState)('now-30m'),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      start = _useState6[0],
+      setStart = _useState6[1];
+
+  var _useState7 = (0, _react.useState)('now'),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      end = _useState8[0],
+      setEnd = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(true),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 1),
+      showFill = _useState10[0];
+
+  var onTimeChange = function onTimeChange(_ref) {
+    var start = _ref.start,
+        end = _ref.end;
+    setStart(start);
+    setEnd(end);
+    setIsLoading(true);
+    startLoading();
+  };
+
+  var startLoading = function startLoading() {
+    setTimeout(stopLoading, 1000);
+  };
+
+  var stopLoading = function stopLoading() {
+    setIsLoading(false);
+  };
+
+  var datepickerProps = {
+    isLoading: isLoading,
+    start: start,
+    end: end,
+    onTimeChange: onTimeChange,
+    showUpdateButton: showUpdateButton
+  };
+  return (0, _react2.jsx)(_super_date_picker.EuiSuperDatePicker, (0, _extends2.default)({}, datepickerProps, {
+    updateButtonProps: {
+      fill: showFill
+    }
+  }));
+};
+
+beforeEach(function () {
+  cy.mount((0, _react2.jsx)(SuperDatePicker, null));
+  cy.get('div.euiSuperDatePicker__flexWrapper').should('exist');
+});
+describe('EuiSuperDatePicker', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when quick select menu is open', function () {
+      cy.get('button.euiFormControlLayout__prepend').click();
+      cy.get('div.euiPanel').contains('Quick select').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when start / end date menus are open', function () {
+      cy.get('button.euiSuperDatePicker__prettyFormat').click();
+      cy.get('div.euiDatePopoverContent').should('exist');
+      cy.checkAxe();
+      cy.get('button.euiDatePopoverButton--start').click();
+      cy.get('button.euiDatePopoverButton--end').click();
+      cy.get('div.euiDatePopoverContent').should('exist');
+      cy.checkAxe();
+      cy.get('button.euiDatePopoverButton--end').click();
+      cy.get('div.euiDatePopoverContent').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/lib/components/flyout/flyout.a11y.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _flyout = require("./flyout");
+
+var _button = require("../button");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var childrenDefault = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
+  "data-test-subj": "itemA"
+}, "Item A"), (0, _react2.jsx)("button", {
+  "data-test-subj": "itemB"
+}, "Item B"), (0, _react2.jsx)("button", {
+  "data-test-subj": "itemC"
+}, "Item C"), (0, _react2.jsx)("input", {
+  "data-test-subj": "itemD"
+}));
+
+var Flyout = function Flyout(_ref) {
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? childrenDefault : _ref$children,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsOpen(!isOpen);
+  };
+
+  var button = (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    onClick: onButtonClick
+  }, "Toggle flyout");
+  return (0, _react2.jsx)("div", null, button, isOpen ? (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({
+    "data-test-subj": "flyoutSpec",
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }, rest), children) : null);
+};
+
+beforeEach(function () {
+  cy.mount((0, _react2.jsx)(Flyout, null));
+  cy.get('div.euiFlyout').should('not.exist');
+});
+describe('EuiFlyout', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when flyout is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiFlyout').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when flyout is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiFlyout').should('exist');
+      cy.get('button.euiFlyout__closeButton').click();
+      cy.get('div.euiFlyout').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});