@elastic/eui 70.2.3 → 70.3.0

package/eui.d.ts

@@ -7567,6 +7567,7 @@ declare module '@elastic/eui/src/global_styling/reset/global_styles' {
 }
 declare module '@elastic/eui/src/global_styling/utility/animations' {
 	export const euiAnimFadeIn: import("@emotion/serialize").Keyframes;
+	export const euiAnimSlideInUp: (size: string) => import("@emotion/serialize").Keyframes;
 
 }
 declare module '@elastic/eui/src/global_styling' {
@@ -8086,6 +8087,8 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge.styles'
 	        };
 	    };
 	    euiBetaBadge__icon: import("@emotion/utils").SerializedStyles;
+	    baseline: import("@emotion/utils").SerializedStyles;
+	    middle: import("@emotion/utils").SerializedStyles;
 	};
 	export const getBadgeColors: (backgroundColor: string, { euiTheme }: UseEuiTheme) => string;
 
@@ -8098,7 +8101,9 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	export const COLORS: readonly ["accent", "subdued", "hollow"];
 	export type BetaBadgeColor = typeof COLORS[number];
 	export const SIZES: readonly ["s", "m"];
-	export type BetaBadgeSize = typeof SIZES[number]; type WithButtonProps = {
+	export type BetaBadgeSize = typeof SIZES[number];
+	export const ALIGNMENTS: readonly ["baseline", "middle"];
+	export type BetaBadgeAlignment = typeof ALIGNMENTS[number]; type WithButtonProps = {
 	    /**
 	     * Will apply an onclick to the badge itself
 	     */
@@ -8155,6 +8160,10 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	     */
 	    color?: BetaBadgeColor;
 	    size?: BetaBadgeSize;
+	    /**
+	     * Sets the `vertical-align` CSS property
+	     */
+	    alignment?: BetaBadgeAlignment;
 	} & ExclusiveUnion<LabelAsNode, LabelAsString>;
 	export type EuiBetaBadgeProps = CommonProps & ExclusiveUnion<ExclusiveUnion<WithButtonProps, WithAnchorProps>, WithSpanProps> & BadgeProps;
 	export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps>;
@@ -15487,6 +15496,16 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_format' {
 	};
 	export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps>;
 
+}
+declare module '@elastic/eui/src/components/modal/modal.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModal: import("@emotion/utils").SerializedStyles;
+	    defaultMaxWidth: import("@emotion/utils").SerializedStyles;
+	    confirmation: import("@emotion/utils").SerializedStyles;
+	    euiModal__closeIcon: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal' {
 	import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
@@ -15513,6 +15532,13 @@ declare module '@elastic/eui/src/components/modal/modal' {
 	}
 	export const EuiModal: FunctionComponent<EuiModalProps>;
 
+}
+declare module '@elastic/eui/src/components/modal/modal_footer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalFooterStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModalFooter: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal_footer' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15520,6 +15546,13 @@ declare module '@elastic/eui/src/components/modal/modal_footer' {
 	export type EuiModalFooterProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiModalFooter: EuiModalFooterProps;
 
+}
+declare module '@elastic/eui/src/components/modal/modal_header.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalHeaderStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModalHeader: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal_header' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15534,6 +15567,14 @@ declare module '@elastic/eui/src/components/modal/modal_header_title' {
 	export type EuiModalHeaderTitleProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiModalHeaderTitle: EuiModalHeaderTitleProps;
 
+}
+declare module '@elastic/eui/src/components/modal/modal_body.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalBodyStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModalBody: import("@emotion/utils").SerializedStyles;
+	    euiModalBody__overflow: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal_body' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15546,7 +15587,7 @@ declare module '@elastic/eui/src/components/modal/confirm_modal' {
 	import React, { FunctionComponent, ReactNode } from 'react';
 	import { EuiModalProps } from '@elastic/eui/src/components/modal/modal';
 	import { EuiButtonColor } from '@elastic/eui/src/components/button';
-	export interface EuiConfirmModalProps extends Omit<EuiModalProps, 'children' | 'initialFocus' | 'onClose' | 'title'> {
+	export interface EuiConfirmModalProps extends Omit<EuiModalProps, 'children' | 'onClose' | 'title'> {
 	    /**
 	     * ReactNode to render as this component's content
 	     */
@@ -15558,6 +15599,10 @@ declare module '@elastic/eui/src/components/modal/confirm_modal' {
 	    onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 	    confirmButtonDisabled?: boolean;
 	    className?: string;
+	    /**
+	     * Allows focusing either the confirm or cancel button on modal initialization.
+	     * Will take precedence over `initialFocus`, if `initialFocus` is passed.
+	     */
 	    defaultFocusedButton?: typeof CONFIRM_BUTTON | typeof CANCEL_BUTTON;
 	    buttonColor?: EuiButtonColor;
 	    /**
@@ -16506,7 +16551,7 @@ declare module '@elastic/eui/src/components/page_template/outer/page_outer' {
 	     */
 	    direction?: 'row' | 'column';
 	    /**
-	     * When direction is `row`, it will flip to `column` when within these breakpoints
+	     * When direction is `row`, it will flip to `column` when within these breakpoints.
 	     */
 	    responsive?: _EuiThemeBreakpoint[];
 	}
@@ -16533,7 +16578,8 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner.style
 declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
 	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling'; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
+	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
+	export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
 	export type _EuiPageInnerProps<T extends ComponentTypes = 'main'> = CommonProps & ComponentProps<T> & {
 	    /**
 	     * Sets which HTML element to render.
@@ -16553,12 +16599,11 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
 	     */
 	    paddingSize?: EuiPaddingSize;
 	    /**
-	     * Decides at which point the component will be 100vw.
+	     * Decides at which point the main content wrapper will be 100vw.
 	     */
 	    responsive?: _EuiThemeBreakpoint[];
 	};
 	export const _EuiPageInner: <T extends ComponentTypes>({ children, component: Component, panelled, border, paddingSize, responsive, ...rest }: React.PropsWithChildren<_EuiPageInnerProps<T>>) => JSX.Element;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/page_template/inner' {
@@ -16594,6 +16639,7 @@ declare module '@elastic/eui/src/components/page_template/page_template' {
 	import React, { CSSProperties, FunctionComponent, HTMLAttributes } from 'react';
 	import { _EuiPageOuterProps } from '@elastic/eui/src/components/page_template/outer';
 	import { _EuiPageInnerProps } from '@elastic/eui/src/components/page_template/inner';
+	import { ComponentTypes } from '@elastic/eui/src/components/page_template/inner/page_inner';
 	import { _EuiPageBottomBarProps } from '@elastic/eui/src/components/page_template/bottom_bar/page_bottom_bar';
 	import { _EuiPageEmptyPromptProps } from '@elastic/eui/src/components/page_template/empty_prompt/page_empty_prompt';
 	import { EuiPageHeaderProps, EuiPageSectionProps } from '@elastic/eui/src/components/page';
@@ -16606,7 +16652,7 @@ declare module '@elastic/eui/src/components/page_template/page_template' {
 	    emptyPrompt: {};
 	    bottomBar: {};
 	}>;
-	export type EuiPageTemplateProps = _EuiPageOuterProps & Omit<_EuiPageInnerProps, 'border'> & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
+	export type EuiPageTemplateProps = _EuiPageOuterProps & Omit<_EuiPageInnerProps, 'border' | 'component'> & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
 	    /**
 	     * Applies a top or left border to the inner contents
 	     * to add separation between content and sidebar when a sidebar exists.
@@ -16626,6 +16672,11 @@ declare module '@elastic/eui/src/components/page_template/page_template' {
 	     * Passes through some common HTML attributes to the `main` content wrapper
 	     */
 	    mainProps?: CommonProps & HTMLAttributes<HTMLElement>;
+	    /**
+	     * Sets which HTML element to render for the `main` content wrapper
+	     * @default main
+	     */
+	    component?: ComponentTypes;
 	};
 	/**
 	 * Consumed via `EuiPageTemplate`,

package/i18ntokens.json

@@ -4661,11 +4661,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 107,
+        "line": 93,
         "column": 10
       },
       "end": {
-        "line": 110,
+        "line": 96,
         "column": 11
       }
     },

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

@@ -93,15 +93,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/lib/components/badge/beta_badge/beta_badge.js

@@ -3,7 +3,7 @@
 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 _react = _interopRequireDefault(require("react"));
 
@@ -21,7 +21,7 @@ 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"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,6 +37,8 @@ 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,
@@ -56,6 +58,8 @@ 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 = _objectWithoutProperties(_ref, _excluded);
 
   var euiTheme = (0, _services.useEuiTheme)();
@@ -63,7 +67,7 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
   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) {
@@ -208,5 +212,10 @@ EuiBetaBadge.propTypes = {
      * Accepts accent, subdued and hollow.
      */
   color: _propTypes.default.any,
-  size: _propTypes.default.any
+  size: _propTypes.default.any,
+
+  /**
+     * Sets the `vertical-align` CSS property
+     */
+  alignment: _propTypes.default.any
 };

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

@@ -26,6 +26,24 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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;"
 } : {
@@ -38,7 +56,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
@@ -64,15 +82,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, _toConsumableArray((0, _services.hexToRgb)(backgroundColor))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return "\n    background-color: ".concat(backgroundColor, ";\n    color: ").concat(textColor, ";\n  ");
 };

package/lib/components/card/card.js

@@ -448,7 +448,12 @@ EuiCard.propTypes = {
        * Accepts accent, subdued and hollow.
        */
     color: _propTypes.default.any,
-    size: _propTypes.default.any
+    size: _propTypes.default.any,
+
+    /**
+       * Sets the `vertical-align` CSS property
+       */
+    alignment: _propTypes.default.any
   }),
 
   /**

package/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/lib/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var SuperDatePicker = function SuperDatePicker() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 1),
+      showUpdateButton = _useState4[0];
+
+  var _useState5 = (0, _react.useState)('now-30m'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      start = _useState6[0],
+      setStart = _useState6[1];
+
+  var _useState7 = (0, _react.useState)('now'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      end = _useState8[0],
+      setEnd = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(true),
+      _useState10 = _slicedToArray(_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, _extends({}, 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/lib/components/flex/flex_group.styles.js

@@ -168,7 +168,7 @@ var euiFlexGroupStyles = function euiFlexGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlexGroup: _ref17,
-    responsive: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;.euiFlexItem{", (0, _global_styling.logicalCSS)('width', '100%'), " flex-basis:100%;}};label:responsive;"),
+    responsive: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;&>.euiFlexItem{", (0, _global_styling.logicalCSS)('width', '100%'), " flex-basis:100%;}};label:responsive;"),
     wrap: _ref16,
     gutterSizes: {
       none: /*#__PURE__*/(0, _react.css)(";label:none;"),

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

@@ -0,0 +1,94 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_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, _extends({
+    "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();
+    });
+  });
+});

package/lib/components/image/image_fullscreen_wrapper.styles.js

@@ -9,22 +9,21 @@ var _react = require("@emotion/react");
 
 var _global_styling = require("../../global_styling");
 
-var _templateObject;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+/*
+ * 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 euiImageFullscreenWrapperStyles = function euiImageFullscreenWrapperStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageFullscreenWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '80vh'), ";", (0, _global_styling.logicalCSS)('max-width', '80vw'), ";", (0, _global_styling.logicalTextAlignCSS)('center'), ";line-height:0;", _global_styling.euiCanAnimate, "{animation:", euiImageFullScreen(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
+    euiImageFullscreenWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '80vh'), ";", (0, _global_styling.logicalCSS)('max-width', '80vw'), ";", (0, _global_styling.logicalTextAlignCSS)('center'), ";line-height:0;", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
     // Sizes
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;")
   };
 };
 
-exports.euiImageFullscreenWrapperStyles = euiImageFullscreenWrapperStyles;
-
-var euiImageFullScreen = function euiImageFullScreen(size) {
-  return (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
-};
+exports.euiImageFullscreenWrapperStyles = euiImageFullscreenWrapperStyles;

package/lib/components/modal/confirm_modal.js

@@ -23,6 +23,10 @@ var _modal_header_title = require("./modal_header_title");
 
 var _modal_body = require("./modal_body");
 
+var _services = require("../../services");
+
+var _modal2 = require("./modal.styles");
+
 var _button = require("../button");
 
 var _text = require("../text");
@@ -108,6 +112,9 @@ var EuiConfirmModal = function EuiConfirmModal(_ref) {
   };
 
   var classes = (0, _classnames.default)('euiModal--confirmation', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _modal2.euiModalStyles)(euiTheme);
+  var cssStyles = [styles.confirmation];
   var modalTitle;
 
   if (title) {
@@ -126,6 +133,7 @@ var EuiConfirmModal = function EuiConfirmModal(_ref) {
 
   return (0, _react2.jsx)(_modal.EuiModal, _extends({
     className: classes,
+    css: cssStyles,
     onClose: onCancel
   }, rest), modalTitle, message && (0, _react2.jsx)(_modal_body.EuiModalBody, null, (0, _react2.jsx)(_text.EuiText, {
     "data-test-subj": "confirmModalBodyText"
@@ -157,6 +165,11 @@ EuiConfirmModal.propTypes = {
   onConfirm: _propTypes.default.func,
   confirmButtonDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
+
+  /**
+     * Allows focusing either the confirm or cancel button on modal initialization.
+     * Will take precedence over `initialFocus`, if `initialFocus` is passed.
+     */
   defaultFocusedButton: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
   buttonColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
   // For docs only, will get passed with ...rest