@elastic/eui 106.3.0 → 106.4.0-amsterdam.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/es/components/provider/provider.js

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
+import { EuiThemeAmsterdam } from '../../themes';
 import { EuiThemeProvider } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { cache as fallbackCache } from '../../services/emotion/css';
@@ -26,7 +26,7 @@ export var EuiProvider = function EuiProvider(_ref) {
   var _ref$cache = _ref.cache,
     cache = _ref$cache === void 0 ? fallbackCache : _ref$cache,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? EuiThemeBorealis : _ref$theme,
+    theme = _ref$theme === void 0 ? EuiThemeAmsterdam : _ref$theme,
     _ref$globalStyles = _ref.globalStyles,
     Globals = _ref$globalStyles === void 0 ? EuiGlobalStyles : _ref$globalStyles,
     _ref$utilityClasses = _ref.utilityClasses,

package/es/services/color/vis_color_store.js

@@ -7,7 +7,7 @@
  */
 
 import { EuiVisColorStore } from '@elastic/eui-theme-common';
-import { colorVis } from '@elastic/eui-theme-borealis';
+import { colorVisLight as colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis_light';
 
 // initialsetup of Vis color storage with default colors
 export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, false);

package/es/services/theme/context.js

@@ -7,10 +7,10 @@
  */
 
 import { createContext } from 'react';
-import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
+import { EuiThemeAmsterdam } from '../../themes/amsterdam/theme';
 import { DEFAULT_COLOR_MODE, getComputed } from './utils';
 export var DEFAULTS = {
-  system: EuiThemeBorealis,
+  system: EuiThemeAmsterdam,
   modifications: {},
   colorMode: DEFAULT_COLOR_MODE,
   highContrastMode: false