@elastic/eui 70.2.4 → 70.4.0

package/optimize/lib/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/optimize/lib/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 _classnames = _interopRequireDefault(require("classnames"));
 
@@ -29,14 +27,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; }
@@ -50,18 +46,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) {
@@ -71,28 +55,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"
@@ -100,6 +85,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/optimize/lib/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.euiMaxBreakpoint)(euiThemeContext, 'm'), "{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.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (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/optimize/lib/components/modal/modal_body.js

@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 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"];
@@ -24,9 +28,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/optimize/lib/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.euiMaxBreakpoint)(euiThemeContext, 'm'), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+  };
+};
+
+exports.euiModalBodyStyles = euiModalBodyStyles;

package/optimize/lib/components/modal/modal_footer.js

@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 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"];
@@ -24,7 +28,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/optimize/lib/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.euiMaxBreakpoint)(euiThemeContext, 'm'), "{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/optimize/lib/components/modal/modal_header.js

@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 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"];
@@ -24,7 +28,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/optimize/lib/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/optimize/lib/components/modal/modal_header_title.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _title = require("../title");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children"];
@@ -24,7 +26,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/optimize/lib/components/page/page.styles.js

@@ -37,7 +37,7 @@ var euiPageStyles = function euiPageStyles(euiThemeContext) {
     grow: _ref2,
     // Direction
     column: _ref,
-    row: /*#__PURE__*/(0, _react.css)("flex-direction:column;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{flex-direction:row;};label:row;"),
+    row: /*#__PURE__*/(0, _react.css)("flex-direction:column;", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{flex-direction:row;};label:row;"),
     // Max widths
     restrictWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:restrictWidth;")
   };

package/optimize/lib/components/page_template/page_template.js

@@ -37,7 +37,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); }
 
@@ -61,6 +61,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,
@@ -71,12 +73,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)(),
@@ -184,6 +185,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(),

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

@@ -0,0 +1,86 @@
+"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 _popover = require("./popover");
+
+var _button = require("../button");
+
+var _text = require("../text");
+
+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 Popover = function Popover() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPopoverOpen = _useState2[0],
+      setIsPopoverOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsPopoverOpen(function (isPopoverOpen) {
+      return !isPopoverOpen;
+    });
+  };
+
+  var closePopover = function closePopover() {
+    return setIsPopoverOpen(false);
+  };
+
+  var button = (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    iconType: "documentation",
+    iconSide: "right",
+    onClick: onButtonClick
+  }, "How it works");
+  var popoverProps = {
+    button: button,
+    isOpen: isPopoverOpen,
+    closePopover: closePopover
+  };
+  return (0, _react2.jsx)(_popover.EuiPopover, popoverProps, (0, _react2.jsx)(_text.EuiText, {
+    style: {
+      width: 300
+    }
+  }, (0, _react2.jsx)("p", null, "Popover content that\u2019s wider than the default width")));
+};
+
+beforeEach(function () {
+  cy.mount((0, _react2.jsx)(Popover, null));
+  cy.get('div.euiPopover__panel').should('not.exist');
+});
+describe('EuiPopover', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/lib/components/search_bar/query/ast_to_es_query_dsl.js

@@ -122,13 +122,19 @@ var _fieldValuesToQuery = function _fieldValuesToQuery(field, operations, andOr)
           queries.push({
             bool: (0, _defineProperty2.default)({}, andOr === 'and' ? 'must' : 'should', (0, _toConsumableArray2.default)(_terms.map(function (value) {
               return {
-                match: (0, _defineProperty2.default)({}, field, value)
+                match: (0, _defineProperty2.default)({}, field, {
+                  query: value,
+                  operator: andOr
+                })
               };
             })))
           });
         } else if (_terms.length === 1) {
           queries.push({
-            match: (0, _defineProperty2.default)({}, field, _terms[0])
+            match: (0, _defineProperty2.default)({}, field, {
+              query: _terms[0],
+              operator: andOr
+            })
           });
         }
 

package/optimize/lib/components/search_bar/query/default_syntax.js

@@ -3506,7 +3506,8 @@ var printValue = function printValue(value, options) {
     return value.toString();
   }
 
-  if (value.length === 0 || value.match(/\s/) || value.toLowerCase() === 'or') {
+  if (value.length === 0 || value.match(/[^\w\-_*:()"/\\]/) || // Escape spaces and special characters not used as syntax identifiers
+  value.toLowerCase() === 'or') {
     return "\"".concat(escapePhraseValue(value), "\"");
   }