@elastic/eui 106.3.0 → 106.4.0

package/es/components/modal/modal.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 = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps"];
 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; }
@@ -37,6 +37,7 @@ export var EuiModal = function EuiModal(_ref) {
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
+    focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
@@ -58,11 +59,11 @@ export var EuiModal = function EuiModal(_ref) {
   var styles = euiModalStyles(euiTheme);
   var cssStyles = [styles.euiModal, maxWidth === true && styles.defaultMaxWidth];
   var cssCloseIconStyles = [styles.euiModal__closeIcon];
-  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
+  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, _extends({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
     preventScrollOnFocus: true
-  }, ___EmotionJSX("div", _extends({
+  }), ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,
@@ -108,5 +109,10 @@ EuiModal.propTypes = {
      * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
      * or need a user's attention should use "alertdialog".
      */
-  role: PropTypes.oneOf(["dialog", "alertdialog"])
+  role: PropTypes.oneOf(["dialog", "alertdialog"]),
+  /**
+     * Object of props passed to EuiFocusTrap.
+     * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
+     */
+  focusTrapProps: PropTypes.any
 };

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

@@ -98,7 +98,8 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
     return ___EmotionJSX("div", _extends({
-      css: cssStyles
+      css: cssStyles,
+      style: styles
     }, rest), ___EmotionJSX("div", {
       css: childrenOnlyStyles
     }, children));

package/es/components/popover/input_popover.js

@@ -123,25 +123,31 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
    */
 
   var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var handleTabNavigation = useCallback(function (e) {
+    var tabbableItems = tabbable(e.currentTarget).filter(function (el) {
+      return !el.hasAttribute('data-focus-guard');
+    });
+    if (!tabbableItems.length) return;
+    var tabbingFromFirstItemInPopover = document.activeElement === tabbableItems[0];
+    var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+    if (tabbingFromFirstItemInPopover && e.shiftKey || tabbingFromLastItemInPopover && !e.shiftKey) {
+      closePopover();
+    }
+  }, [closePopover]);
   var onKeyDown = useCallback(function (event) {
     panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 || panelPropsOnKeyDown(event);
     if (event.key === keys.TAB) {
       if (disableFocusTrap) {
         if (!ownFocus) {
-          closePopover();
+          handleTabNavigation(event);
         }
       } else {
-        var tabbableItems = tabbable(event.currentTarget).filter(function (el) {
-          return !el.hasAttribute('data-focus-guard');
-        });
-        if (!tabbableItems.length) return;
-        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
-        if (tabbingFromLastItemInPopover) {
-          closePopover();
+        if (!ownFocus) {
+          handleTabNavigation(event);
         }
       }
     }
-  }, [disableFocusTrap, ownFocus, closePopover, panelPropsOnKeyDown]);
+  }, [disableFocusTrap, ownFocus, panelPropsOnKeyDown, handleTabNavigation]);
 
   /**
    * Optional close on scroll behavior

package/eui.d.ts

@@ -11556,7 +11556,7 @@ declare module '@elastic/eui/src/components/form/range/types' {
 	     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
 	     * except for props controlled by the range component
 	     */
-	    inputPopoverProps?: Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover' | 'disableFocusTrap' | 'popoverScreenReaderText' | 'fullWidth'>;
+	    inputPopoverProps?: Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover' | 'disableFocusTrap' | 'ownFocus' | 'popoverScreenReaderText' | 'fullWidth'>;
 	}
 	export type _SharedRangeInputSide = {
 	    /**
@@ -20822,6 +20822,7 @@ declare module '@elastic/eui/src/components/modal/modal.styles' {
 }
 declare module '@elastic/eui/src/components/modal/modal' {
 	import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+	import { EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
 	export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
 	    className?: string;
 	    /**
@@ -20847,6 +20848,11 @@ declare module '@elastic/eui/src/components/modal/modal' {
 	     * or need a user's attention should use "alertdialog".
 	     */
 	    role?: 'dialog' | 'alertdialog';
+	    /**
+	     * Object of props passed to EuiFocusTrap.
+	     * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
+	     */
+	    focusTrapProps?: Pick<EuiFocusTrapProps, 'returnFocus'>;
 	}
 	export const EuiModal: FunctionComponent<EuiModalProps>;
 

package/lib/components/modal/modal.js

@@ -16,7 +16,7 @@ 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", "role", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -43,6 +43,7 @@ var EuiModal = exports.EuiModal = function EuiModal(_ref) {
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
+    focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === _services.keys.ESCAPE) {
@@ -64,11 +65,11 @@ var EuiModal = exports.EuiModal = function EuiModal(_ref) {
   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, {
+  return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
     preventScrollOnFocus: true
-  }, (0, _react2.jsx)("div", _extends({
+  }), (0, _react2.jsx)("div", _extends({
     css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,
@@ -114,5 +115,10 @@ EuiModal.propTypes = {
      * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
      * or need a user's attention should use "alertdialog".
      */
-  role: _propTypes.default.oneOf(["dialog", "alertdialog"])
+  role: _propTypes.default.oneOf(["dialog", "alertdialog"]),
+  /**
+     * Object of props passed to EuiFocusTrap.
+     * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
+     */
+  focusTrapProps: _propTypes.default.any
 };

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

@@ -104,7 +104,8 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
     return (0, _react2.jsx)("div", _extends({
-      css: cssStyles
+      css: cssStyles,
+      style: styles
     }, rest), (0, _react2.jsx)("div", {
       css: childrenOnlyStyles
     }, children));

package/lib/components/popover/input_popover.js

@@ -130,25 +130,31 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
    */
 
   var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var handleTabNavigation = (0, _react.useCallback)(function (e) {
+    var tabbableItems = (0, _tabbable.tabbable)(e.currentTarget).filter(function (el) {
+      return !el.hasAttribute('data-focus-guard');
+    });
+    if (!tabbableItems.length) return;
+    var tabbingFromFirstItemInPopover = document.activeElement === tabbableItems[0];
+    var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+    if (tabbingFromFirstItemInPopover && e.shiftKey || tabbingFromLastItemInPopover && !e.shiftKey) {
+      closePopover();
+    }
+  }, [closePopover]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 || panelPropsOnKeyDown(event);
     if (event.key === _services.keys.TAB) {
       if (disableFocusTrap) {
         if (!ownFocus) {
-          closePopover();
+          handleTabNavigation(event);
         }
       } else {
-        var tabbableItems = (0, _tabbable.tabbable)(event.currentTarget).filter(function (el) {
-          return !el.hasAttribute('data-focus-guard');
-        });
-        if (!tabbableItems.length) return;
-        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
-        if (tabbingFromLastItemInPopover) {
-          closePopover();
+        if (!ownFocus) {
+          handleTabNavigation(event);
         }
       }
     }
-  }, [disableFocusTrap, ownFocus, closePopover, panelPropsOnKeyDown]);
+  }, [disableFocusTrap, ownFocus, panelPropsOnKeyDown, handleTabNavigation]);
 
   /**
    * Optional close on scroll behavior

package/optimize/es/components/modal/modal.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps"];
 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; }
 /*
@@ -32,6 +32,7 @@ export var EuiModal = function EuiModal(_ref) {
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
+    focusTrapProps = _ref.focusTrapProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
@@ -53,11 +54,11 @@ export var EuiModal = function EuiModal(_ref) {
   var styles = euiModalStyles(euiTheme);
   var cssStyles = [styles.euiModal, maxWidth === true && styles.defaultMaxWidth];
   var cssCloseIconStyles = [styles.euiModal__closeIcon];
-  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
+  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, _extends({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
     preventScrollOnFocus: true
-  }, ___EmotionJSX("div", _extends({
+  }), ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,

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

@@ -91,7 +91,8 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
     return ___EmotionJSX("div", _extends({
-      css: cssStyles
+      css: cssStyles,
+      style: styles
     }, rest), ___EmotionJSX("div", {
       css: childrenOnlyStyles
     }, children));

package/optimize/es/components/popover/input_popover.js

@@ -113,25 +113,31 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
    */
 
   var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var handleTabNavigation = useCallback(function (e) {
+    var tabbableItems = tabbable(e.currentTarget).filter(function (el) {
+      return !el.hasAttribute('data-focus-guard');
+    });
+    if (!tabbableItems.length) return;
+    var tabbingFromFirstItemInPopover = document.activeElement === tabbableItems[0];
+    var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+    if (tabbingFromFirstItemInPopover && e.shiftKey || tabbingFromLastItemInPopover && !e.shiftKey) {
+      closePopover();
+    }
+  }, [closePopover]);
   var onKeyDown = useCallback(function (event) {
     panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 || panelPropsOnKeyDown(event);
     if (event.key === keys.TAB) {
       if (disableFocusTrap) {
         if (!ownFocus) {
-          closePopover();
+          handleTabNavigation(event);
         }
       } else {
-        var tabbableItems = tabbable(event.currentTarget).filter(function (el) {
-          return !el.hasAttribute('data-focus-guard');
-        });
-        if (!tabbableItems.length) return;
-        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
-        if (tabbingFromLastItemInPopover) {
-          closePopover();
+        if (!ownFocus) {
+          handleTabNavigation(event);
         }
       }
     }
-  }, [disableFocusTrap, ownFocus, closePopover, panelPropsOnKeyDown]);
+  }, [disableFocusTrap, ownFocus, panelPropsOnKeyDown, handleTabNavigation]);
 
   /**
    * Optional close on scroll behavior

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

@@ -18,7 +18,7 @@ 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", "role", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,6 +38,7 @@ var EuiModal = exports.EuiModal = function EuiModal(_ref) {
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
+    focusTrapProps = _ref.focusTrapProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === _services.keys.ESCAPE) {
@@ -59,11 +60,11 @@ var EuiModal = exports.EuiModal = function EuiModal(_ref) {
   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, {
+  return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
     preventScrollOnFocus: true
-  }, (0, _react2.jsx)("div", (0, _extends2.default)({
+  }), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,

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

@@ -97,7 +97,8 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: cssStyles
+      css: cssStyles,
+      style: styles
     }, rest), (0, _react2.jsx)("div", {
       css: childrenOnlyStyles
     }, children));

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

@@ -121,25 +121,31 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
    */
 
   var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var handleTabNavigation = (0, _react.useCallback)(function (e) {
+    var tabbableItems = (0, _tabbable.tabbable)(e.currentTarget).filter(function (el) {
+      return !el.hasAttribute('data-focus-guard');
+    });
+    if (!tabbableItems.length) return;
+    var tabbingFromFirstItemInPopover = document.activeElement === tabbableItems[0];
+    var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+    if (tabbingFromFirstItemInPopover && e.shiftKey || tabbingFromLastItemInPopover && !e.shiftKey) {
+      closePopover();
+    }
+  }, [closePopover]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 || panelPropsOnKeyDown(event);
     if (event.key === _services.keys.TAB) {
       if (disableFocusTrap) {
         if (!ownFocus) {
-          closePopover();
+          handleTabNavigation(event);
         }
       } else {
-        var tabbableItems = (0, _tabbable.tabbable)(event.currentTarget).filter(function (el) {
-          return !el.hasAttribute('data-focus-guard');
-        });
-        if (!tabbableItems.length) return;
-        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
-        if (tabbingFromLastItemInPopover) {
-          closePopover();
+        if (!ownFocus) {
+          handleTabNavigation(event);
         }
       }
     }
-  }, [disableFocusTrap, ownFocus, closePopover, panelPropsOnKeyDown]);
+  }, [disableFocusTrap, ownFocus, panelPropsOnKeyDown, handleTabNavigation]);
 
   /**
    * Optional close on scroll behavior

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "106.3.0",
+  "version": "106.4.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -107,7 +107,7 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "3.3.1",
+    "@elastic/eui-theme-borealis": "3.3.2",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -257,7 +257,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "3.3.1",
+    "@elastic/eui-theme-borealis": "3.3.2",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^17.0 || ^18.0",

package/src/themes/amsterdam/_colors_dark.scss

@@ -121,8 +121,8 @@ $euiColorBorderBaseFloating: $euiColorLightShade !default;
 $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
 $euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31) !default;
 
-$euiColorBorderInteractiveFormsHoverPlain: 'transparent' !default;
-$euiColorBorderInteractiveFormsHoverDanger: 'transparent' !default;
+$euiColorBorderInteractiveFormsHoverPlain: transparent !default;
+$euiColorBorderInteractiveFormsHoverDanger: transparent !default;
 
 $euiColorBorderStrongPrimary: $euiColorPrimary !default;
 $euiColorBorderStrongAccent: $euiColorAccent !default;

package/src/themes/amsterdam/_colors_light.scss

@@ -117,12 +117,12 @@ $euiColorBorderBaseDanger: tint($euiColorDanger, 0.6) !default;
 $euiColorBorderBasePlain: $euiColorLightShade !default;
 $euiColorBorderBaseSubdued: $euiColorLightShade !default;
 $euiColorBorderBaseDisabled: transparentize(darken($euiColorLightShade, 40%), 0.1) !default;
-$euiColorBorderBaseFloating: 'transparent' !default;
+$euiColorBorderBaseFloating: transparent !default;
 $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
 $euiColorBorderBaseFormsControl: shade($euiColorLightestShade, 0.4) !default;
 
-$euiColorBorderInteractiveFormsHoverPlain: 'transparent' !default;
-$euiColorBorderInteractiveFormsHoverDanger: 'transparent' !default;
+$euiColorBorderInteractiveFormsHoverPlain: transparent !default;
+$euiColorBorderInteractiveFormsHoverDanger: transparent !default;
 
 $euiColorBorderStrongPrimary: $euiColorPrimary !default;
 $euiColorBorderStrongAccent: $euiColorAccent !default;

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

@@ -1,12 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFlyout = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -15,7 +17,7 @@ var _react2 = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-var EuiFlyout = exports.EuiFlyout = function EuiFlyout(_ref) {
+var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$as = _ref.as,
     as = _ref$as === void 0 ? 'div' : _ref$as,
     _ref$role = _ref.role,
@@ -28,6 +30,7 @@ var EuiFlyout = exports.EuiFlyout = function EuiFlyout(_ref) {
     dataTestSubj = _ref['data-test-subj'];
   var Element = as;
   return (0, _react2.jsx)(Element, {
+    ref: ref,
     "data-eui": "EuiFlyout",
     "data-test-subj": dataTestSubj,
     role: role,
@@ -41,4 +44,5 @@ var EuiFlyout = exports.EuiFlyout = function EuiFlyout(_ref) {
       (closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.onClick) && closeButtonProps.onClick(e);
     }
   }), children);
-};
+});
+EuiFlyout.displayName = 'EuiFlyout';

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

@@ -19,7 +19,7 @@ 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", "role", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,6 +39,7 @@ var EuiModal = exports.EuiModal = function EuiModal(_ref) {
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
+    focusTrapProps = _ref.focusTrapProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === _services.keys.ESCAPE) {
@@ -60,11 +61,11 @@ var EuiModal = exports.EuiModal = function EuiModal(_ref) {
   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, {
+  return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
     preventScrollOnFocus: true
-  }, (0, _react2.jsx)("div", (0, _extends2.default)({
+  }), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,
@@ -110,5 +111,10 @@ EuiModal.propTypes = {
      * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
      * or need a user's attention should use "alertdialog".
      */
-  role: _propTypes.default.oneOf(["dialog", "alertdialog"])
+  role: _propTypes.default.oneOf(["dialog", "alertdialog"]),
+  /**
+     * Object of props passed to EuiFocusTrap.
+     * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
+     */
+  focusTrapProps: _propTypes.default.any
 };

package/test-env/components/page/page_header/page_header_content.js

@@ -98,7 +98,8 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: cssStyles
+      css: cssStyles,
+      style: styles
     }, rest), (0, _react2.jsx)("div", {
       css: childrenOnlyStyles
     }, children));

package/test-env/components/popover/input_popover.js

@@ -122,25 +122,31 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
    */
 
   var panelPropsOnKeyDown = (_props$panelProps = props.panelProps) === null || _props$panelProps === void 0 ? void 0 : _props$panelProps.onKeyDown;
+  var handleTabNavigation = (0, _react.useCallback)(function (e) {
+    var tabbableItems = (0, _tabbable.tabbable)(e.currentTarget).filter(function (el) {
+      return !el.hasAttribute('data-focus-guard');
+    });
+    if (!tabbableItems.length) return;
+    var tabbingFromFirstItemInPopover = document.activeElement === tabbableItems[0];
+    var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
+    if (tabbingFromFirstItemInPopover && e.shiftKey || tabbingFromLastItemInPopover && !e.shiftKey) {
+      closePopover();
+    }
+  }, [closePopover]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     panelPropsOnKeyDown === null || panelPropsOnKeyDown === void 0 || panelPropsOnKeyDown(event);
     if (event.key === _services.keys.TAB) {
       if (disableFocusTrap) {
         if (!ownFocus) {
-          closePopover();
+          handleTabNavigation(event);
         }
       } else {
-        var tabbableItems = (0, _tabbable.tabbable)(event.currentTarget).filter(function (el) {
-          return !el.hasAttribute('data-focus-guard');
-        });
-        if (!tabbableItems.length) return;
-        var tabbingFromLastItemInPopover = document.activeElement === tabbableItems[tabbableItems.length - 1];
-        if (tabbingFromLastItemInPopover) {
-          closePopover();
+        if (!ownFocus) {
+          handleTabNavigation(event);
         }
       }
     }
-  }, [disableFocusTrap, ownFocus, closePopover, panelPropsOnKeyDown]);
+  }, [disableFocusTrap, ownFocus, panelPropsOnKeyDown, handleTabNavigation]);
 
   /**
    * Optional close on scroll behavior