@elastic/eui 109.1.0 → 110.0.0-snapshot.1764684698664

package/es/components/date_picker/super_date_picker/date_popover/timezone_display.js

@@ -54,7 +54,9 @@ export var EuiTimeZoneDisplay = function EuiTimeZoneDisplay(_ref) {
     "data-test-subj": "euiTimeZoneDisplay",
     "aria-label": label
   }, rest), typeof customRender === 'function' ? customRender({
-    nameDisplay: nameDisplay
+    nameDisplay: nameDisplay,
+    utcOffset: utc,
+    timeZoneName: name
   }) : nameDisplay);
 };
 

package/es/components/date_picker/super_date_picker/quick_select_popover/index.js

@@ -9,4 +9,5 @@
 export { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
 export { EuiQuickSelectPopover } from './quick_select_popover';
 export { EuiQuickSelect } from './quick_select';
+export { EuiQuickSelectPanel } from './quick_select_panel';
 export { EuiRecentlyUsed } from './recently_used';

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -31,11 +31,13 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import moment from 'moment'; // eslint-disable-line import/named
 import dateMath from '@elastic/datemath';
-import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiMemoizedStyles, RenderWithEuiTheme } from '../../../services';
 import { isObject } from '../../../services/predicate';
+import { euiTextTruncateCSS } from '../../../global_styling';
 import { EuiI18nConsumer } from '../../context';
 import { EuiDatePickerRange } from '../date_picker_range';
 import { EuiFormControlButton, EuiFormControlLayout } from '../../form';
+import { EuiToolTip } from '../../tool_tip';
 import { RenderI18nTimeOptions } from './time_options';
 import { PrettyDuration, showPrettyDuration } from './pretty_duration';
 import { EuiTimeWindowButtons } from './time_window_buttons';
@@ -301,22 +303,38 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       };
       var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && ___EmotionJSX(EuiFormControlButton, {
-          type: "button",
-          css: styles.euiSuperDatePicker__prettyFormat,
-          className: classNames('euiSuperDatePicker__prettyFormat', {
-            'euiSuperDatePicker__prettyFormat--disabled': isDisabled
-          }),
-          "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: !!isDisabled,
-          onClick: _this.hidePrettyDuration,
-          onFocus: onFocus
-        }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX(PrettyDuration, {
-          timeFrom: start,
-          timeTo: end,
-          quickRanges: commonlyUsedRanges,
-          dateFormat: dateFormat
-        })));
+        // Tooltip content with full range
+        var startMoment = dateMath.parse(start);
+        var endMoment = dateMath.parse(end, {
+          roundUp: true
+        });
+        var separator = ' – ';
+        var formattedFullRange = isInvalid ? '' : (startMoment === null || startMoment === void 0 ? void 0 : startMoment.format(dateFormat)) + separator + (endMoment === null || endMoment === void 0 ? void 0 : endMoment.format(dateFormat));
+        return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
+          return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && ___EmotionJSX(EuiToolTip, {
+            css: styles.euiSuperDatePicker__prettyDurationTooltip,
+            content: formattedFullRange,
+            display: "block",
+            offset: euiTheme.euiTheme.base * 0.5
+          }, ___EmotionJSX(EuiFormControlButton, {
+            type: "button",
+            className: classNames('euiSuperDatePicker__prettyFormat', {
+              'euiSuperDatePicker__prettyFormat--disabled': isDisabled
+            }),
+            compressed: compressed,
+            "data-test-subj": "superDatePickerShowDatesButton",
+            disabled: !!isDisabled,
+            onClick: _this.hidePrettyDuration,
+            onFocus: onFocus
+          }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX("span", {
+            css: euiTextTruncateCSS()
+          }, ___EmotionJSX(PrettyDuration, {
+            timeFrom: start,
+            timeTo: end,
+            quickRanges: commonlyUsedRanges,
+            dateFormat: dateFormat
+          })))));
+        });
       }
       var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
 

package/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -65,9 +65,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";}.euiFormControlLayoutDelimited__delimiter:first-child{", logicalCSS('padding-horizontal', 0), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;--euiFormControlStateHoverColor:", forms.borderHovered, ";", euiFormControlDefaultShadow(euiThemeContext), " &:focus{", euiFormControlFocusStyles(euiThemeContext), ";}", highContrastModeStyles(euiThemeContext, {
-      preferred: "\n          border: none;\n        "
-    }), ";;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyDurationTooltip: /*#__PURE__*/css(logicalCSS('max-width', 'min(58ch, 90vw)'), ";;label:euiSuperDatePicker__prettyDurationTooltip;"),
     // Form states
     states: {
       euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", highContrastModeStyles(euiThemeContext, {

package/es/components/date_picker/super_date_picker/time_window_buttons.js

@@ -35,7 +35,7 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     zoomFactor = _ref$zoomFactor === void 0 ? ZOOM_FACTOR_DEFAULT : _ref$zoomFactor;
   var buttonColor = 'text';
   var buttonSize = compressed ? 's' : 'm';
-  var iconSize = compressed ? 's' : 'm';
+  var iconSize = 'm';
   var styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
   var _useEuiTimeWindow = useEuiTimeWindow(start, end, applyTime, {
       zoomFactor: zoomFactor

package/es/components/filter_group/filter_group.a11y.js

@@ -236,7 +236,7 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Enter');
       cy.get('div[data-test-subj="euiSelectableList"]').should('exist');
       cy.realPress('Tab');
-      cy.repeatRealPress('ArrowDown', 3);
+      cy.repeatRealPress('ArrowDown', 4);
       cy.realPress('Enter');
       cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
       cy.realPress('ArrowDown');

package/es/components/flex/flex_item.js

@@ -19,15 +19,17 @@ var EuiFlexItemInternal = function EuiFlexItemInternal(_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$grow = _ref.grow,
-    grow = _ref$grow === void 0 ? true : _ref$grow,
+    _grow = _ref$grow === void 0 ? true : _ref$grow,
     _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // resets `grow` to the default value when an invalid value is passed
+  var grow = VALID_GROW_VALUES.indexOf(_grow) === -1 ? true : _grow;
   useEffect(function () {
-    if (VALID_GROW_VALUES.indexOf(grow) === -1) {
-      throw new Error("Prop `grow` passed to `EuiFlexItem` must be a boolean or an integer between 0 and 10, received `".concat(grow, "`"));
+    if (process.env.NODE_ENV === 'development' && VALID_GROW_VALUES.indexOf(_grow) === -1) {
+      console.warn("Prop `grow` passed to `EuiFlexItem` must be a boolean or an integer between 0 and 10, received `".concat(_grow, "`. Defaulting to `true`."));
     }
-  }, [grow]);
+  }, [_grow]);
   var cssStyles = [styles.euiFlexItem, !grow ? styles.growZero : styles.grow, grow && (typeof grow === 'number' ? styles.growSizes[grow] : styles.growSizes['1'])];
   var classes = classNames('euiFlexItem', className);
 

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -101,6 +101,7 @@ EuiHeaderBreadcrumbs.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Alignment of the popover and arrow relative to the button
+         * @default downLeft
          */
       anchorPosition: PropTypes.any,
       /**
@@ -122,6 +123,7 @@ EuiHeaderBreadcrumbs.propTypes = {
       focusTrapProps: PropTypes.any,
       /**
          * Show arrow indicating to originating button
+         * @default false
          */
       hasArrow: PropTypes.bool,
       /**
@@ -214,6 +216,7 @@ EuiHeaderBreadcrumbs.propTypes = {
       zIndex: PropTypes.number,
       /**
          * Distance away from the anchor that the popover will render
+         * @default 4 (0 when `hasArrow=true`)
          */
       offset: PropTypes.number,
       /**

package/es/components/header/header_links/header_links.js

@@ -138,6 +138,7 @@ EuiHeaderLinks.propTypes = {
   popoverProps: PropTypes.shape({
     /**
        * Alignment of the popover and arrow relative to the button
+       * @default downLeft
        */
     anchorPosition: PropTypes.any,
     /**
@@ -159,6 +160,7 @@ EuiHeaderLinks.propTypes = {
     focusTrapProps: PropTypes.any,
     /**
        * Show arrow indicating to originating button
+       * @default false
        */
     hasArrow: PropTypes.bool,
     /**
@@ -251,6 +253,7 @@ EuiHeaderLinks.propTypes = {
     zIndex: PropTypes.number,
     /**
        * Distance away from the anchor that the popover will render
+       * @default 4 (0 when `hasArrow=true`)
        */
     offset: PropTypes.number,
     /**

package/es/components/header/header_logo/header_logo.js

@@ -15,6 +15,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 import { validateHref } from '../../../services/security/href_validator';
+import { useEuiButtonColorCSS } from '../../../global_styling';
 import { EuiIcon } from '../../icon';
 import { euiHeaderLogoStyles } from './header_logo.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,6 +32,10 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeaderLogo', className);
   var styles = useEuiMemoizedStyles(euiHeaderLogoStyles);
+  var buttonColorStyles = useEuiButtonColorCSS({
+    display: 'empty'
+  });
+  var cssStyles = [styles.euiHeaderLogo, buttonColorStyles.text];
   var secureRel = getSecureRelForTarget({
     href: href,
     rel: rel,
@@ -41,7 +46,7 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     href: isHrefValid ? href : '',
     rel: secureRel,
     target: target,
-    css: styles.euiHeaderLogo,
+    css: cssStyles,
     className: classes
   }, rest), ___EmotionJSX(EuiIcon, {
     "aria-label": iconTitle,

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

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

package/es/components/icon/icon.styles.js

@@ -14,11 +14,11 @@ import { logicalSizeCSS, euiCanAnimate } from '../../global_styling';
 export var iconLoadingOpacity = 0.05;
 var iconLoading = 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/es/components/page/page.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction"];
+var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction", "color"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -14,7 +14,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { setStyleForRestrictedPageWidth } from './_restrict_width';
-import { useEuiPaddingCSS } from '../../global_styling';
+import { useEuiPaddingCSS, useEuiBackgroundColorCSS } from '../../global_styling';
 import { euiPageStyles } from './page.styles';
 import { useEuiTheme } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,13 +29,16 @@ export var 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 = setStyleForRestrictedPageWidth(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
   var euiTheme = useEuiTheme();
   var styles = euiPageStyles(euiTheme);
   var padding = useEuiPaddingCSS()[paddingSize];
-  var stylesCSS = [styles.euiPage, styles[direction], grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
+  var backgroundColor = useEuiBackgroundColorCSS()[color];
+  var stylesCSS = [styles.euiPage, styles[direction], backgroundColor, grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
   var classes = classNames('euiPage', className);
   return ___EmotionJSX("div", _extends({
     css: stylesCSS,
@@ -60,6 +63,11 @@ EuiPage.propTypes = {
      * Flip to `column` when not including a sidebar.
      */
   direction: PropTypes.oneOf(["row", "column"]),
+  /**
+     * Defines the page background color.
+     * @default 'transparent'
+     */
+  color: PropTypes.oneOf(["plain", "transparent"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/page/page.styles.js

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

package/es/components/page/page_header/page_header.js

@@ -1,4 +1,4 @@
-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"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -14,7 +14,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
-import { useEuiPaddingCSS } from '../../../global_styling';
+import { useEuiPaddingCSS, useEuiBackgroundColorCSS } from '../../../global_styling';
 import { EuiPageHeaderContent } from './page_header_content';
 import { euiPageHeaderStyles } from './page_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -25,6 +25,8 @@ export var 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,
@@ -44,7 +46,8 @@ export var EuiPageHeader = function EuiPageHeader(_ref) {
   var useTheme = useEuiTheme();
   var styles = euiPageHeaderStyles(useTheme);
   var inlinePadding = useEuiPaddingCSS('horizontal');
-  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border];
+  var backgroundColor = useEuiBackgroundColorCSS()[color];
+  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, backgroundColor];
   var classes = classNames('euiPageHeader', className);
   var contentProps = {
     restrictWidth: restrictWidth,
@@ -76,6 +79,11 @@ EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: PropTypes.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: PropTypes.oneOf(["plain", "transparent"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/page/page_header/page_header_content.js

@@ -315,6 +315,7 @@ EuiPageHeaderContent.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Alignment of the popover and arrow relative to the button
+         * @default downLeft
          */
       anchorPosition: PropTypes.any,
       /**
@@ -336,6 +337,7 @@ EuiPageHeaderContent.propTypes = {
       focusTrapProps: PropTypes.any,
       /**
          * Show arrow indicating to originating button
+         * @default false
          */
       hasArrow: PropTypes.bool,
       /**
@@ -428,6 +430,7 @@ EuiPageHeaderContent.propTypes = {
       zIndex: PropTypes.number,
       /**
          * Distance away from the anchor that the popover will render
+         * @default 4 (0 when `hasArrow=true`)
          */
       offset: PropTypes.number,
       /**

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

@@ -12,7 +12,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React from 'react';
 import PropTypes from "prop-types";
-import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
+import { useIsWithinBreakpoints } from '../../../services';
 import { euiPageOuterStyles } from './page_outer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var PAGE_DIRECTIONS = ['row', 'column'];
@@ -25,8 +25,7 @@ export var _EuiPageOuter = function _EuiPageOuter(_ref) {
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var themeContext = useEuiTheme();
-  var styles = euiPageOuterStyles(themeContext);
+  var styles = euiPageOuterStyles;
   var isResponding = useIsWithinBreakpoints(responsive);
   var cssStyles = [styles.euiPageOuter, styles[isResponding ? 'column' : direction], grow && styles.grow];
   return ___EmotionJSX("div", _extends({

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

@@ -9,39 +9,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../../global_styling';
-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__
-};
-export var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return {
-    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
-    ), ";;label:euiPageOuter;"),
-    // Grow
-    grow: _ref3,
-    // Direction
-    column: _ref2,
-    row: _ref
-  };
+export var euiPageOuterStyles = {
+  euiPageOuter: /*#__PURE__*/css("display:flex;flex-shrink:0;", 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/es/components/page_template/page_template.js

@@ -108,7 +108,8 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       header: {
         restrictWidth: restrictWidth,
         paddingSize: paddingSize,
-        bottomBorder: headerBottomBorder
+        bottomBorder: headerBottomBorder,
+        color: panelled === false ? 'transparent' : 'plain'
       },
       section: {
         restrictWidth: restrictWidth,
@@ -165,7 +166,7 @@ _EuiPageTemplate.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
   /**
-         * Adds a white background and shadow to define the area.
+         * Adds a background and shadow to define the area.
          */
   panelled: PropTypes.bool,
   /**
@@ -313,6 +314,11 @@ _EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: PropTypes.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: PropTypes.oneOf(["plain", "transparent"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/popover/input_popover.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef", "offset"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -66,6 +66,8 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 2 : _ref$offset,
     props = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiInputPopover', className);
   var euiTheme = useEuiTheme();
@@ -204,6 +206,7 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     closePopover: closePopover,
     anchorPosition: anchorPosition,
     attachToAnchor: attachToAnchor,
+    offset: offset,
     repositionToCrossAxis: repositionToCrossAxis,
     panelPaddingSize: panelPaddingSize,
     ownFocus: ownFocus

package/es/components/popover/popover.js

@@ -204,8 +204,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       if (_this.button == null || _this.panel == null) return;
       var _ref6 = _this.props,
         anchorPosition = _ref6.anchorPosition,
-        _ref6$offset = _ref6.offset,
-        offset = _ref6$offset === void 0 ? 0 : _ref6$offset;
+        _offset = _ref6.offset;
+      var offset = _offset != null ? _offset : _this.props.hasArrow ? 0 : 4;
       var position = getPopoverPositionFromAnchorPosition(anchorPosition);
       var forcePosition = undefined;
       if (allowEnforcePosition && _this.state.isOpenStable && _this.state.openPosition != null) {
@@ -542,14 +542,15 @@ _defineProperty(EuiPopover, "defaultProps", {
   isOpen: false,
   ownFocus: true,
   repositionToCrossAxis: true,
-  anchorPosition: 'downCenter',
+  anchorPosition: 'downLeft',
   panelPaddingSize: 'm',
-  hasArrow: true,
+  hasArrow: false,
   display: 'inline-block'
 });
 EuiPopover.propTypes = {
   /**
      * Alignment of the popover and arrow relative to the button
+     * @default downLeft
      */
   anchorPosition: PropTypes.any,
   /**
@@ -579,6 +580,7 @@ EuiPopover.propTypes = {
   focusTrapProps: PropTypes.any,
   /**
      * Show arrow indicating to originating button
+     * @default false
      */
   hasArrow: PropTypes.bool,
   /**
@@ -675,6 +677,7 @@ EuiPopover.propTypes = {
   zIndex: PropTypes.number,
   /**
      * Distance away from the anchor that the popover will render
+     * @default 4 (0 when `hasArrow=true`)
      */
   offset: PropTypes.number,
   /**

package/es/components/search_bar/search_bar.js

@@ -242,15 +242,15 @@ _defineProperty(EuiSearchBar, "Query", Query);
 EuiSearchBar.propTypes = {
   onChange: PropTypes.func,
   /**
-     The initial query the bar will hold when first mounted
+     * The initial query the bar will hold when first mounted
      */
   defaultQuery: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.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.oneOfType([PropTypes.any.isRequired, PropTypes.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.shape({
     name: PropTypes.string,
@@ -310,7 +310,7 @@ EuiSearchBar.propTypes = {
     }).isRequired, PropTypes.bool.isRequired])
   }),
   /**
-     An array of search filters. See {@link SearchFilterConfig}.
+     * An array of search filters. See {@link SearchFilterConfig}.
      */
   filters: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     type: PropTypes.oneOf(["is"]).isRequired,

package/es/components/selectable/selectable.js

@@ -91,6 +91,12 @@ export var 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;
       }
@@ -466,8 +472,7 @@ export var 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,

package/es/components/selectable/selectable_templates/selectable_template_sitewide_popover.js

@@ -31,6 +31,7 @@ export var EuiSelectableTemplateSitewidePopover = function EuiSelectableTemplate
   var styles = useEuiMemoizedStyles(euiSelectableTemplateSitewidePopoverStyles);
   return ___EmotionJSX(EuiPopover, _extends({
     panelPaddingSize: "none",
+    anchorPosition: "downCenter",
     isOpen: isOpen,
     ownFocus: !!trigger,
     display: trigger ? 'inline-block' : 'block'