@elastic/eui 70.2.4 → 70.3.0

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);
 };

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiModalHeaderStyles = void 0;
+
+var _react = require("@emotion/react");
+
+/*
+ * 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 euiModalHeaderStyles = function euiModalHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;align-items:center;padding-inline:", euiTheme.size.l, " ", euiTheme.size.xxl, ";padding-block:", euiTheme.size.l, " ", euiTheme.size.base, ";flex-grow:0;flex-shrink:0;&+.euiModalFooter{padding-block-start:", euiTheme.size.s, ";};label:euiModalHeader;")
+  };
+};
+
+exports.euiModalHeaderStyles = euiModalHeaderStyles;

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

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _title = require("../title");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children"];
@@ -26,7 +28,8 @@ var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
       children = _ref.children,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiModalHeader__title', className);
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)(_title.EuiTitle, (0, _extends2.default)({
+    size: "m",
     className: classes
   }, rest), /*#__PURE__*/_react.default.isValidElement(children) ? children : (0, _react2.jsx)("h1", null, children));
 };

package/test-env/components/page_template/outer/page_outer.js

@@ -56,7 +56,7 @@ _EuiPageOuter.propTypes = {
   direction: _propTypes.default.oneOf(["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: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
   className: _propTypes.default.string,

package/test-env/components/page_template/page_template.js

@@ -39,7 +39,7 @@ var _global_styling = require("../../global_styling");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "mainProps", "className", "minHeight", "responsive"];
+var _excluded = ["children", "responsive", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "component", "mainProps", "className", "minHeight"];
 
 function _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); }
 
@@ -63,6 +63,8 @@ exports.TemplateContext = TemplateContext;
  */
 var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   var children = _ref.children,
+      _ref$responsive = _ref.responsive,
+      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
       _ref$restrictWidth = _ref.restrictWidth,
       restrictWidth = _ref$restrictWidth === void 0 ? true : _ref$restrictWidth,
       _ref$paddingSize = _ref.paddingSize,
@@ -73,12 +75,11 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       _offset = _ref.offset,
       panelled = _ref.panelled,
       contentBorder = _ref.contentBorder,
+      component = _ref.component,
       mainProps = _ref.mainProps,
       className = _ref.className,
       _ref$minHeight = _ref.minHeight,
       minHeight = _ref$minHeight === void 0 ? '460px' : _ref$minHeight,
-      _ref$responsive = _ref.responsive,
-      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useEuiTheme = (0, _services.useEuiTheme)(),
@@ -186,6 +187,7 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     style: pageStyle,
     className: classes
   }), sidebar, (0, _react2.jsx)(_inner._EuiPageInner, (0, _extends2.default)({}, mainProps, {
+    component: component,
     id: pageInnerId,
     border: innerBordered(),
     panelled: innerPanelled(),
@@ -208,13 +210,27 @@ _EuiPageTemplate.propTypes = {
   direction: _propTypes.default.oneOf(["row", "column"]),
 
   /**
-     * When direction is `row`, it will flip to `column` when within these breakpoints
+       * Decides at which point the main content wrapper will be 100vw.
+       */
+
+  /**
+     * When direction is `row`, it will flip to `column` when within these breakpoints.
      */
   responsive: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
+
+  /**
+       * Adds a white background and shadow to define the area.
+       */
+  panelled: _propTypes.default.bool,
+
+  /**
+       * Adjust the overall padding.
+       */
+  paddingSize: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,
@@ -235,7 +251,7 @@ _EuiPageTemplate.propTypes = {
        * Applies a top or left border to the inner contents
        * to add separation between content and sidebar when a sidebar exists.
        */
-  contentBorder: _propTypes.default.bool,
+  contentBorder: _propTypes.default.any,
 
   /**
        * Minimum height in which to enforce scrolling
@@ -257,7 +273,13 @@ _EuiPageTemplate.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
-  })
+  }),
+
+  /**
+       * Sets which HTML element to render for the `main` content wrapper
+       * @default main
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };
 
 var _EuiPageSection = function _EuiPageSection(props) {