@elastic/eui 70.2.3 → 70.3.0

package/es/components/accessibility/skip_link/skip_link.js

@@ -74,15 +74,16 @@ export 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 = 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/es/components/badge/beta_badge/beta_badge.js

@@ -1,4 +1,4 @@
-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 _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); }
 
@@ -25,6 +25,7 @@ import { euiBetaBadgeStyles } from './beta_badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['accent', 'subdued', 'hollow'];
 export var SIZES = ['s', 'm'];
+export var ALIGNMENTS = ['baseline', 'middle'];
 export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var className = _ref.className,
       label = _ref.label,
@@ -43,6 +44,8 @@ export 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 = useEuiTheme();
@@ -50,7 +53,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var isCircular = iconType || singleLetter;
   var classes = classNames('euiBetaBadge', className);
   var styles = 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) {
@@ -193,5 +196,10 @@ EuiBetaBadge.propTypes = {
      * Accepts accent, subdued and hollow.
      */
   color: PropTypes.any,
-  size: PropTypes.any
+  size: PropTypes.any,
+
+  /**
+     * Sets the `vertical-align` CSS property
+     */
+  alignment: PropTypes.any
 };

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

@@ -24,6 +24,24 @@ import { logicalCSS, euiFocusRing, euiFontSizeFromScale, euiTextTruncate, mathWi
 import { tint, isColorDark, hexToRgb } from '../../../services';
 
 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;"
 } : {
@@ -36,7 +54,7 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
   return {
-    euiBetaBadge: /*#__PURE__*/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;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/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;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
@@ -62,12 +80,15 @@ export 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
 
-export var getBadgeColors = function getBadgeColors(backgroundColor, _ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var getBadgeColors = function getBadgeColors(backgroundColor, _ref4) {
+  var euiTheme = _ref4.euiTheme;
   var textColor = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(backgroundColor))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return "\n    background-color: ".concat(backgroundColor, ";\n    color: ").concat(textColor, ";\n  ");
 };

package/es/components/card/card.js

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

package/es/components/card/card.styles.js

@@ -55,11 +55,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/es/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -0,0 +1,109 @@
+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; }
+
+/*
+ * 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 { EuiSuperDatePicker } from './super_date_picker';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var SuperDatePicker = function SuperDatePicker() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 1),
+      showUpdateButton = _useState4[0];
+
+  var _useState5 = useState('now-30m'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      start = _useState6[0],
+      setStart = _useState6[1];
+
+  var _useState7 = useState('now'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      end = _useState8[0],
+      setEnd = _useState8[1];
+
+  var _useState9 = 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 ___EmotionJSX(EuiSuperDatePicker, _extends({}, datepickerProps, {
+    updateButtonProps: {
+      fill: showFill
+    }
+  }));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(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/es/components/flex/flex_group.styles.js

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

package/es/components/flyout/flyout.a11y.js

@@ -0,0 +1,92 @@
+var _excluded = ["children"];
+
+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; }
+
+/*
+ * 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 { EuiFlyout } from './flyout';
+import { EuiButtonEmpty } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var childrenDefault = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
+  "data-test-subj": "itemA"
+}, "Item A"), ___EmotionJSX("button", {
+  "data-test-subj": "itemB"
+}, "Item B"), ___EmotionJSX("button", {
+  "data-test-subj": "itemC"
+}, "Item C"), ___EmotionJSX("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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsOpen(!isOpen);
+  };
+
+  var button = ___EmotionJSX(EuiButtonEmpty, {
+    onClick: onButtonClick
+  }, "Toggle flyout");
+
+  return ___EmotionJSX("div", null, button, isOpen ? ___EmotionJSX(EuiFlyout, _extends({
+    "data-test-subj": "flyoutSpec",
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }, rest), children) : null);
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(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/es/components/image/image_fullscreen_wrapper.styles.js

@@ -1,7 +1,3 @@
-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
@@ -9,18 +5,14 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { css, keyframes } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiCanAnimate } from '../../global_styling';
+import { css } from '@emotion/react';
+import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiAnimSlideInUp } from '../../global_styling';
 export var euiImageFullscreenWrapperStyles = function euiImageFullscreenWrapperStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageFullscreenWrapper: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), ";", logicalCSS('max-width', '80vw'), ";", logicalTextAlignCSS('center'), ";line-height:0;", euiCanAnimate, "{animation:", euiImageFullScreen(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
+    euiImageFullscreenWrapper: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), ";", logicalCSS('max-width', '80vw'), ";", logicalTextAlignCSS('center'), ";line-height:0;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
     // Sizes
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;")
   };
-};
-
-var euiImageFullScreen = function euiImageFullScreen(size) {
-  return 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);
 };

package/es/components/modal/confirm_modal.js

@@ -33,6 +33,8 @@ import { EuiModalFooter } from './modal_footer';
 import { EuiModalHeader } from './modal_header';
 import { EuiModalHeaderTitle } from './modal_header_title';
 import { EuiModalBody } from './modal_body';
+import { useEuiTheme } from '../../services';
+import { euiModalStyles } from './modal.styles';
 import { EuiButton, EuiButtonEmpty } from '../button';
 import { EuiText } from '../text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -86,6 +88,9 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   };
 
   var classes = classnames('euiModal--confirmation', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalStyles(euiTheme);
+  var cssStyles = [styles.confirmation];
   var modalTitle;
 
   if (title) {
@@ -104,6 +109,7 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
 
   return ___EmotionJSX(EuiModal, _extends({
     className: classes,
+    css: cssStyles,
     onClose: onCancel
   }, rest), modalTitle, message && ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, {
     "data-test-subj": "confirmModalBodyText"
@@ -133,6 +139,11 @@ EuiConfirmModal.propTypes = {
   onConfirm: PropTypes.func,
   confirmButtonDisabled: PropTypes.bool,
   className: PropTypes.string,
+
+  /**
+     * Allows focusing either the confirm or cancel button on modal initialization.
+     * Will take precedence over `initialFocus`, if `initialFocus` is passed.
+     */
   defaultFocusedButton: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
   buttonColor: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
   // For docs only, will get passed with ...rest

package/es/components/modal/modal.a11y.js

@@ -0,0 +1,70 @@
+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; }
+
+/*
+ * 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 { EuiModal, EuiModalHeader, EuiModalHeaderTitle, EuiModalBody, EuiModalFooter } from './index';
+import { EuiButton } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Modal = function Modal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isModalVisible = _useState2[0],
+      setIsModalVisible = _useState2[1];
+
+  var closeModal = function closeModal() {
+    return setIsModalVisible(false);
+  };
+
+  var showModal = function showModal() {
+    return setIsModalVisible(true);
+  };
+
+  var modalProps = {
+    title: 'Do this thing',
+    onClose: closeModal,
+    children: React
+  };
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: showModal
+  }, "Show confirm modal"), isModalVisible && ___EmotionJSX(EuiModal, modalProps, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, null, ___EmotionJSX("h1", null, "Title of modal"))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX("p", null, "This is a simple modal body")), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
+    onClick: closeModal,
+    fill: true
+  }, "Close"))));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Modal, null));
+  cy.get('div.euiModal').should('not.exist');
+  cy.get('button.euiButton').click();
+  cy.get('div.euiModal').should('exist');
+});
+describe('EuiModal', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations when modal is open', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when modal is closed', function () {
+      cy.get('div.euiModalFooter button.euiButton').click();
+      cy.get('div.euiModal').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/modal/modal.js

@@ -19,14 +19,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 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 PropTypes from "prop-types";
 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,
@@ -38,19 +39,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();
@@ -59,28 +47,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"
@@ -88,6 +77,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/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/es/components/modal/modal_body.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 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,
@@ -23,9 +25,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));
 };