@elastic/eui 109.2.0 → 110.0.0-snapshot.1764783610243

package/lib/components/flyout/use_flyout_resizable.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutResizable = void 0;
+var _react = require("react");
+var _services = require("../../services");
+var _helpers = require("../resizable_container/helpers");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
+ * 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.
+ */
+/**
+ * @internal
+ */
+var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
+  var enabled = _ref.enabled,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
+    onResize = _ref.onResize,
+    side = _ref.side,
+    _size = _ref.size;
+  var getFlyoutMinMaxWidth = (0, _react.useCallback)(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    callOnResize = _useState4[0],
+    setCallOnResize = _useState4[1];
+
+  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    flyoutRef = _useState6[0],
+    setFlyoutRef = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (!enabled) return; // Don't measure when resizing is disabled
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
+
+  // Update flyout width when consumers pass in a new `size`
+  (0, _react.useEffect)(function () {
+    if (!enabled) return; // Don't update width when resizing is disabled
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
+  }, [_size, getFlyoutMinMaxWidth, enabled]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = (0, _react.useRef)(0);
+  var initialMouseX = (0, _react.useRef)(0);
+
+  // Account for flyout side and logical property direction
+  var direction = (0, _react.useMemo)(function () {
+    var modifier = side === 'right' ? -1 : 1;
+    if (flyoutRef) {
+      var languageDirection = window.getComputedStyle(flyoutRef).direction;
+      if (languageDirection === 'rtl') modifier *= -1;
+    }
+    return modifier;
+  }, [side, flyoutRef]);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    if (!enabled) {
+      return;
+    }
+    var mouseOffset = (0, _helpers.getPosition)(e, true) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+  var onMouseUp = (0, _react.useCallback)(function () {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove, enabled]);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    var _flyoutRef$offsetWidt;
+    setCallOnResize(false);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = (0, _helpers.getPosition)(e, true);
+    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+
+    // Window event listeners instead of React events are used
+    // in case the user's mouse leaves the component
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [flyoutRef, onMouseMove, onMouseUp, enabled]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    var KEYBOARD_OFFSET = 10;
+    switch (e.key) {
+      case _services.keys.ARROW_RIGHT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
+        });
+        break;
+      case _services.keys.ARROW_LEFT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+
+  // To reduce unnecessary calls, only fire onResize callback:
+  // 1. After initial mount / on user width change events only
+  // 2. If not currently mouse dragging
+  (0, _react.useEffect)(function () {
+    if (callOnResize && enabled) {
+      onResize === null || onResize === void 0 || onResize(flyoutWidth);
+    }
+  }, [onResize, callOnResize, flyoutWidth, enabled]);
+  var size = (0, _react.useMemo)(function () {
+    return enabled ? flyoutWidth || _size : _size;
+  }, [enabled, flyoutWidth, _size]);
+  return {
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    setFlyoutRef: setFlyoutRef,
+    size: size
+  };
+};

package/lib/components/flyout/use_flyout_z_index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutZIndex = void 0;
+var _services = require("../../services");
+/*
+ * 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.
+ */
+
+/**
+ * @internal
+ */
+
+var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
+  var level = Number(baseLevel);
+  return {
+    // Child flyouts slide in from below and need to have a lower z-index
+    flyoutZIndex: isChildFlyout ? level - 1 : level,
+    maskZIndex: level - 2
+  };
+};
+
+/**
+ * @internal
+ */
+var useEuiFlyoutZIndex = exports.useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
+  var maskProps = _ref.maskProps,
+    isPushed = _ref.isPushed,
+    managedFlyoutIndex = _ref.managedFlyoutIndex,
+    isChildFlyout = _ref.isChildFlyout;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var baseLevel = Number(euiTheme.levels.flyout);
+
+  // The default headerZindexLocation for EuiFlyout is "below"
+  // which is different from what EuiOverlayMask fallbacks to - see
+  // _flyout_overlay.tsx.
+  // We set z-index to mask level only when explicitly overridden
+  // via the maskProps prop
+  if (!isPushed && (maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) === 'above') {
+    baseLevel = Number(euiTheme.levels.mask);
+  }
+  baseLevel += managedFlyoutIndex;
+  return calculateZIndex(baseLevel, isChildFlyout);
+};

package/lib/components/header/header_logo/header_logo.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _href_validator = require("../../../services/security/href_validator");
+var _global_styling = require("../../../global_styling");
 var _icon = require("../../icon");
 var _header_logo = require("./header_logo.styles");
 var _react2 = require("@emotion/react");
@@ -37,6 +38,10 @@ var EuiHeaderLogo = exports.EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHeaderLogo', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_header_logo.euiHeaderLogoStyles);
+  var buttonColorStyles = (0, _global_styling.useEuiButtonColorCSS)({
+    display: 'empty'
+  });
+  var cssStyles = [styles.euiHeaderLogo, buttonColorStyles.text];
   var secureRel = (0, _services.getSecureRelForTarget)({
     href: href,
     rel: rel,
@@ -47,7 +52,7 @@ var EuiHeaderLogo = exports.EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     href: isHrefValid ? href : '',
     rel: secureRel,
     target: target,
-    css: styles.euiHeaderLogo,
+    css: cssStyles,
     className: classes
   }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
     "aria-label": iconTitle,

package/lib/components/header/header_logo/header_logo.styles.js

@@ -21,7 +21,7 @@ var euiHeaderLogoStyles = exports.euiHeaderLogoStyles = function euiHeaderLogoSt
   var _euiHeaderVariables = (0, _header.euiHeaderVariables)(euiThemeContext),
     childHeight = _euiHeaderVariables.childHeight;
   return {
-    euiHeaderLogo: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', childHeight), " line-height:", childHeight, ";", (0, _global_styling.logicalCSS)('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;align-items:center;white-space:nowrap;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
+    euiHeaderLogo: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', childHeight), " line-height:", childHeight, ";", (0, _global_styling.logicalCSS)('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;border-radius:", euiTheme.border.radius.small, ";align-items:center;white-space:nowrap;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
     euiHeaderLogo__text: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";};label:euiHeaderLogo__text;")
   };
 };

package/lib/components/icon/icon.styles.js

@@ -18,11 +18,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var iconLoadingOpacity = exports.iconLoadingOpacity = 0.05;
 var iconLoading = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: ", ";\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])), iconLoadingOpacity);
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "njd749-logoElasticOutline",
-  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;"
+  name: "p0011s-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;"
 } : {
-  name: "njd749-logoElasticOutline",
-  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;",
+  name: "p0011s-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {

package/lib/components/overlay_mask/overlay_mask.js

@@ -44,13 +44,17 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasRendered = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = (0, _services.useCombinedRefs)([setOverlayMaskNode, maskRef]);
+  var handleAnimationEnd = (0, _react.useCallback)(function () {
+    hasRendered.current = true;
+  }, []);
   var styles = (0, _services.useEuiMemoizedStyles)(_overlay_mask.euiOverlayMaskStyles);
-  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
+  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
   (0, _react.useEffect)(function () {
     if (!overlayMaskNode) return;
     (0, _common.keysOf)(rest).forEach(function (key) {
@@ -61,7 +65,13 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
         overlayMaskNode.setAttribute(key, rest[key]);
       }
     });
-  }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
+    overlayMaskNode.addEventListener('animationend', handleAnimationEnd, {
+      once: true
+    });
+    return function () {
+      overlayMaskNode.removeEventListener('animationend', handleAnimationEnd);
+    };
+  }, [overlayMaskNode, handleAnimationEnd]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Note: Use `classList.add/remove` instead of setting the entire `className`
   // so as not to override any existing classes set by `EuiPortal`

package/lib/components/overlay_mask/overlay_mask.styles.js

@@ -6,20 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiOverlayMaskStyles = void 0;
 var _css = require("@emotion/css");
 var _global_styling = require("../../global_styling");
-/*
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * 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 euiOverlayMaskStyles = exports.euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in forwards;animation-iteration-count:1;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
+    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;"),
+    noAnimation: /*#__PURE__*/(0, _css.css)(process.env.NODE_ENV === "production" ? {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;"
+    } : {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    })
   };
 };

package/lib/components/page/page.js

@@ -12,7 +12,7 @@ var _global_styling = require("../../global_styling");
 var _page = require("./page.styles");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction"];
+var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,13 +35,16 @@ var EuiPage = exports.EuiPage = function EuiPage(_ref) {
     grow = _ref$grow === void 0 ? true : _ref$grow,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _page.euiPageStyles)(euiTheme);
   var padding = (0, _global_styling.useEuiPaddingCSS)()[paddingSize];
-  var stylesCSS = [styles.euiPage, styles[direction], grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
+  var backgroundColor = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var stylesCSS = [styles.euiPage, styles[direction], backgroundColor, grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
   var classes = (0, _classnames.default)('euiPage', className);
   return (0, _react2.jsx)("div", _extends({
     css: stylesCSS,
@@ -66,6 +69,11 @@ EuiPage.propTypes = {
      * Flip to `column` when not including a sidebar.
      */
   direction: _propTypes.default.oneOf(["row", "column"]),
+  /**
+     * Defines the page background color.
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/components/page/page.styles.js

@@ -30,9 +30,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiPageStyles = exports.euiPageStyles = function euiPageStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiPage: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPage;"),
+    euiPage: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPage;"),
     // Grow
     grow: _ref2,
     // Direction

package/lib/components/page/page_header/page_header.js

@@ -12,7 +12,7 @@ var _global_styling = require("../../../global_styling");
 var _page_header_content = require("./page_header_content");
 var _page_header = require("./page_header.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
+var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "color", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,6 +31,8 @@ var EuiPageHeader = exports.EuiPageHeader = function EuiPageHeader(_ref) {
     _ref$paddingSize = _ref.paddingSize,
     paddingSize = _ref$paddingSize === void 0 ? 'none' : _ref$paddingSize,
     bottomBorder = _ref.bottomBorder,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     alignItems = _ref.alignItems,
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? true : _ref$responsive,
@@ -50,7 +52,8 @@ var EuiPageHeader = exports.EuiPageHeader = function EuiPageHeader(_ref) {
   var useTheme = (0, _services.useEuiTheme)();
   var styles = (0, _page_header.euiPageHeaderStyles)(useTheme);
   var inlinePadding = (0, _global_styling.useEuiPaddingCSS)('horizontal');
-  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border];
+  var backgroundColor = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, backgroundColor];
   var classes = (0, _classnames.default)('euiPageHeader', className);
   var contentProps = {
     restrictWidth: restrictWidth,
@@ -82,6 +85,11 @@ EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: _propTypes.default.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/components/page_template/outer/page_outer.js

@@ -31,8 +31,7 @@ var _EuiPageOuter = exports._EuiPageOuter = function _EuiPageOuter(_ref) {
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var themeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _page_outer.euiPageOuterStyles)(themeContext);
+  var styles = _page_outer.euiPageOuterStyles;
   var isResponding = (0, _services.useIsWithinBreakpoints)(responsive);
   var cssStyles = [styles.euiPageOuter, styles[isResponding ? 'column' : direction], grow && styles.grow];
   return (0, _react2.jsx)("div", _extends({

package/lib/components/page_template/outer/page_outer.styles.js

@@ -13,39 +13,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;"
-} : {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;"
-} : {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;"
-} : {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiPageOuterStyles = exports.euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return {
-    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
-    ), ";;label:euiPageOuter;"),
-    // Grow
-    grow: _ref3,
-    // Direction
-    column: _ref2,
-    row: _ref
-  };
+var euiPageOuterStyles = exports.euiPageOuterStyles = {
+  euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+  ), ";;label:euiPageOuter;"),
+  // Grow
+  grow: process.env.NODE_ENV === "production" ? {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;"
+  } : {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  // Direction
+  column: process.env.NODE_ENV === "production" ? {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;"
+  } : {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  row: process.env.NODE_ENV === "production" ? {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;"
+  } : {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };

package/lib/components/page_template/page_template.js

@@ -116,7 +116,8 @@ var _EuiPageTemplate = exports._EuiPageTemplate = function _EuiPageTemplate(_ref
       header: {
         restrictWidth: restrictWidth,
         paddingSize: paddingSize,
-        bottomBorder: headerBottomBorder
+        bottomBorder: headerBottomBorder,
+        color: panelled === false ? 'transparent' : 'plain'
       },
       section: {
         restrictWidth: restrictWidth,
@@ -173,7 +174,7 @@ _EuiPageTemplate.propTypes = {
   "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.
+         * Adds a background and shadow to define the area.
          */
   panelled: _propTypes.default.bool,
   /**
@@ -321,6 +322,11 @@ _EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: _propTypes.default.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/components/provider/provider.js

@@ -15,6 +15,7 @@ var _cache = require("./cache");
 var _system_defaults = require("./system_defaults");
 var _nested = require("./nested");
 var _component_defaults = require("./component_defaults");
+var _manager = require("../flyout/manager");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*
@@ -86,5 +87,5 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_component_defaults.EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, children)))));
+  }, (0, _react2.jsx)(_manager.EuiFlyoutManager, null, children))))));
 };

package/lib/components/search_bar/search_bar.js

@@ -55,6 +55,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+/**
+ * When `searchFormat` is 'text', `query` is null and the search is performed
+ * on the `queryText` directly without EQL parsing
+ */
+
 var parseQuery = function parseQuery(query, props) {
   var _props$box, _props$box2;
   var schema = undefined;
@@ -260,15 +265,15 @@ _defineProperty(EuiSearchBar, "Query", _query2.Query);
 EuiSearchBar.propTypes = {
   onChange: _propTypes.default.func,
   /**
-     The initial query the bar will hold when first mounted
+     * The initial query the bar will hold when first mounted
      */
   defaultQuery: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
   /**
-     If you wish to use the search bar as a controlled component, continuously pass the query via this prop.
+     * If you wish to use the search bar as a controlled component, continuously pass the query via this prop.
      */
   query: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
   /**
-     Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search.
+     * Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search.
      */
   box: _propTypes.default.shape({
     name: _propTypes.default.string,
@@ -328,7 +333,7 @@ EuiSearchBar.propTypes = {
     }).isRequired, _propTypes.default.bool.isRequired])
   }),
   /**
-     An array of search filters. See {@link SearchFilterConfig}.
+     * An array of search filters. See {@link SearchFilterConfig}.
      */
   filters: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     type: _propTypes.default.oneOf(["is"]).isRequired,

package/lib/components/selectable/selectable.js

@@ -96,6 +96,12 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
         _this.preventOnFocus = false;
         return;
       }
+      if (event && _this.props.searchable && event.target === _this.inputRef) {
+        _this.setState({
+          isFocused: true
+        });
+        return;
+      }
       if (!_this.state.visibleOptions.length || _this.state.activeOptionIndex != null) {
         return;
       }
@@ -471,8 +477,7 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
           onChange: _this2.onSearchChange,
           listId: _this2.optionsListRef.current ? _this2.listId : undefined // Only pass the listId if it exists on the page
           ,
-          "aria-activedescendant": _this2.makeOptionId(activeOptionIndex) // the current faux-focused option
-          ,
+          "aria-activedescendant": activeOptionIndex != null ? _this2.makeOptionId(activeOptionIndex) : undefined,
           placeholder: placeholderName,
           isPreFiltered: !!isPreFiltered,
           optionMatcher: optionMatcher,