@elastic/eui 70.2.3 → 70.3.0

package/test-env/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/test-env/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/test-env/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();
+    });
+  });
+});

package/test-env/components/image/image_fullscreen_wrapper.styles.js

@@ -1,32 +1,29 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiImageFullscreenWrapperStyles = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
 
 var _global_styling = require("../../global_styling");
 
-var _templateObject;
-
+/*
+ * 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 = (0, _taggedTemplateLiteral2.default)(["\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/test-env/components/modal/confirm_modal.js

@@ -31,6 +31,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");
@@ -96,6 +100,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) {
@@ -114,6 +121,7 @@ var EuiConfirmModal = function EuiConfirmModal(_ref) {
 
   return (0, _react2.jsx)(_modal.EuiModal, (0, _extends2.default)({
     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"
@@ -145,6 +153,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

package/test-env/components/modal/modal.a11y.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("./index");
+
+var _button = require("../button");
+
+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 Modal = function Modal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_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.default
+  };
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButton, {
+    onClick: showModal
+  }, "Show confirm modal"), isModalVisible && (0, _react2.jsx)(_index.EuiModal, modalProps, (0, _react2.jsx)(_index.EuiModalHeader, null, (0, _react2.jsx)(_index.EuiModalHeaderTitle, null, (0, _react2.jsx)("h1", null, "Title of modal"))), (0, _react2.jsx)(_index.EuiModalBody, null, (0, _react2.jsx)("p", null, "This is a simple modal body")), (0, _react2.jsx)(_index.EuiModalFooter, null, (0, _react2.jsx)(_button.EuiButton, {
+    onClick: closeModal,
+    fill: true
+  }, "Close"))));
+};
+
+beforeEach(function () {
+  cy.mount((0, _react2.jsx)(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/test-env/components/modal/modal.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,14 +29,12 @@ var _overlay_mask = require("../overlay_mask");
 
 var _i18n = require("../i18n");
 
+var _modal = require("./modal.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "style"];
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -52,18 +48,6 @@ var EuiModal = function EuiModal(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? true : _ref$maxWidth,
       style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // TODO: Remove this onFocus scroll workaround after react-focus-on supports focusOptions
-  // @see https://github.com/elastic/eui/issues/6304
-  var bodyScrollTop = (0, _react.useRef)(typeof window === 'undefined' ? undefined : window.scrollY // Account for SSR
-  );
-  var onFocus = (0, _react.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 === _services.keys.ESCAPE) {
@@ -73,28 +57,29 @@ 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 = (0, _classnames.default)('euiModal', widthClassName, className);
+  var classes = (0, _classnames.default)('euiModal', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _modal.euiModalStyles)(euiTheme);
+  var cssStyles = [styles.euiModal, maxWidth === true && styles.defaultMaxWidth];
+  var cssCloseIconStyles = [styles.euiModal__closeIcon];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     initialFocus: initialFocus,
-    scrollLock: true
+    scrollLock: true,
+    preventScrollOnFocus: true
   }, (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,
     tabIndex: 0,
-    onFocus: onFocus,
-    style: newStyle || style
+    style: newStyle
   }, rest), (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiModal.closeModal",
     default: "Closes this modal window"
@@ -102,6 +87,7 @@ var EuiModal = function EuiModal(_ref) {
     return (0, _react2.jsx)(_button.EuiButtonIcon, {
       iconType: "cross",
       onClick: onClose,
+      css: cssCloseIconStyles,
       className: "euiModal__closeIcon",
       color: "text",
       "aria-label": closeModal

package/test-env/components/modal/modal.styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiModalStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+var _global_styling = require("../../global_styling");
+
+var _form = require("../form/form.styles");
+
+/*
+ * 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 euiModalStyles = function euiModalStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModal: /*#__PURE__*/(0, _react.css)((0, _mixins.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:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.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__*/(0, _react.css)("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
+    confirmation: /*#__PURE__*/(0, _react.css)("min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _mixins.euiShadowXLarge)(euiThemeContext, {
+      reverse: true
+    }), " inset-block-start:auto;};label:confirmation;"),
+    euiModal__closeIcon: /*#__PURE__*/(0, _react.css)("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")
+  };
+};
+
+exports.euiModalStyles = euiModalStyles;

package/test-env/components/modal/modal_body.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _modal_body = require("./modal_body.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children"];
@@ -26,9 +30,15 @@ var EuiModalBody = function EuiModalBody(_ref) {
       children = _ref.children,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiModalBody', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _modal_body.euiModalBodyStyles)(euiTheme);
+  var cssStyles = [styles.euiModalBody];
+  var cssOverflowStyles = [styles.euiModalBody__overflow];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), (0, _react2.jsx)("div", {
+    css: cssOverflowStyles,
     className: "euiModalBody__overflow"
   }, children));
 };

package/test-env/components/modal/modal_body.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiModalBodyStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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 euiModalBodyStyles = function euiModalBodyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalBody: /*#__PURE__*/(0, _react.css)("flex-grow:1;overflow:hidden;display:flex;flex-direction:column;&:last-of-type .euiModalBody__overflow{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody;"),
+    euiModalBody__overflow: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+  };
+};
+
+exports.euiModalBodyStyles = euiModalBodyStyles;

package/test-env/components/modal/modal_footer.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _modal_footer = require("./modal_footer.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children"];
@@ -26,7 +30,11 @@ var EuiModalFooter = function EuiModalFooter(_ref) {
       children = _ref.children,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiModalFooter', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _modal_footer.euiModalFooterStyles)(euiTheme);
+  var cssStyles = [styles.euiModalFooter];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/test-env/components/modal/modal_footer.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiModalFooterStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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 euiModalFooterStyles = function euiModalFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalFooter: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:flex-end;padding-block:", euiTheme.size.base, " ", euiTheme.size.l, ";padding-inline:", euiTheme.size.l, ";flex-grow:0;flex-shrink:0;gap:", euiTheme.size.base, ";", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{background:", euiTheme.colors.lightestShade, ";padding-block:", euiTheme.size.m, ";padding-inline:", euiTheme.size.l, ";justify-content:stretch;gap:", euiTheme.size.s, ";>*{flex:1;}};label:euiModalFooter;")
+  };
+};
+
+exports.euiModalFooterStyles = euiModalFooterStyles;

package/test-env/components/modal/modal_header.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _modal_header = require("./modal_header.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children"];
@@ -26,7 +30,11 @@ var EuiModalHeader = function EuiModalHeader(_ref) {
       children = _ref.children,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiModalHeader', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _modal_header.euiModalHeaderStyles)(euiTheme);
+  var cssStyles = [styles.euiModalHeader];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };