@elastic/eui 109.2.0 → 110.0.0-snapshot.1764783610243

package/optimize/lib/components/flyout/manager/store.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._resetFlyoutManagerStore = _resetFlyoutManagerStore;
+exports.getFlyoutManagerStore = getFlyoutManagerStore;
+var _actions = require("./actions");
+var _reducer = require("./reducer");
+/*
+ * 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.
+ */
+
+function createStore() {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reducer.initialState;
+  var currentState = initial;
+  var listeners = new Set();
+  var getState = function getState() {
+    return currentState;
+  };
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      listeners.delete(listener);
+    };
+  };
+
+  // The onClick handlers won't execute until after store is fully assigned.
+  // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
+  var store;
+  var computeHistoryItems = function computeHistoryItems() {
+    var currentSessionIndex = currentState.sessions.length - 1;
+    var previousSessions = currentState.sessions.slice(0, currentSessionIndex);
+    return previousSessions.reverse().map(function (_ref) {
+      var title = _ref.title,
+        mainFlyoutId = _ref.mainFlyoutId;
+      return {
+        title: title,
+        onClick: function onClick() {
+          store.dispatch((0, _actions.goToFlyout)(mainFlyoutId));
+        }
+      };
+    });
+  };
+  var dispatch = function dispatch(action) {
+    var nextState = (0, _reducer.flyoutManagerReducer)(currentState, action);
+    if (nextState !== currentState) {
+      var previousSessions = currentState.sessions;
+      currentState = nextState;
+
+      // Recompute history items eagerly if sessions changed
+      // This ensures stable references and avoids stale closures
+      if (nextState.sessions !== previousSessions) {
+        store.historyItems = computeHistoryItems();
+      }
+      listeners.forEach(function (l) {
+        l();
+      });
+    }
+  };
+  store = {
+    getState: getState,
+    subscribe: subscribe,
+    dispatch: dispatch,
+    addFlyout: function addFlyout(flyoutId, title, level, size) {
+      return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size));
+    },
+    closeFlyout: function closeFlyout(flyoutId) {
+      return dispatch((0, _actions.closeFlyout)(flyoutId));
+    },
+    setActiveFlyout: function setActiveFlyout(flyoutId) {
+      return dispatch((0, _actions.setActiveFlyout)(flyoutId));
+    },
+    setFlyoutWidth: function setFlyoutWidth(flyoutId, width) {
+      return dispatch((0, _actions.setFlyoutWidth)(flyoutId, width));
+    },
+    setPushPadding: function setPushPadding(side, width) {
+      return dispatch((0, _actions.setPushPadding)(side, width));
+    },
+    goBack: function goBack() {
+      return dispatch((0, _actions.goBack)());
+    },
+    goToFlyout: function goToFlyout(flyoutId) {
+      return dispatch((0, _actions.goToFlyout)(flyoutId));
+    },
+    addUnmanagedFlyout: function addUnmanagedFlyout(flyoutId) {
+      return dispatch((0, _actions.addUnmanagedFlyout)(flyoutId));
+    },
+    closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
+      return dispatch((0, _actions.closeUnmanagedFlyout)(flyoutId));
+    },
+    historyItems: computeHistoryItems() // Initialize with current state
+  };
+  return store;
+}
+
+// Module-level singleton.  A necessary trade-off to avoid global namespace pollution or the need for a third-party library.
+var storeInstance = null;
+
+/**
+ * Returns a singleton store instance shared across all React roots within the same JS context.
+ * Uses module-level singleton to ensure deduplication even if modules are loaded twice.
+ */
+function getFlyoutManagerStore() {
+  if (!storeInstance) {
+    storeInstance = createStore();
+  }
+  return storeInstance;
+}
+
+/**
+ * For testing purposes - allows resetting the store
+ */
+function _resetFlyoutManagerStore() {
+  storeInstance = null;
+}

package/optimize/lib/components/flyout/manager/validation.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createValidationErrorMessage = createValidationErrorMessage;
+exports.isNamedSize = isNamedSize;
+exports.validateManagedFlyoutSize = validateManagedFlyoutSize;
+exports.validateSizeCombination = validateSizeCombination;
+var _const = require("../const");
+var _const2 = require("./const");
+/*
+ * 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.
+ */
+
+/**
+ * Checks if a size is a named size (s, m, l)
+ */
+function isNamedSize(size) {
+  return _const.FLYOUT_SIZES.includes(size);
+}
+
+/**
+ * Validates that a managed flyout only uses named sizes
+ */
+function validateManagedFlyoutSize(size, flyoutId, level) {
+  if (level === _const2.LEVEL_CHILD && !isNamedSize(size)) {
+    var namedSizes = _const.FLYOUT_SIZES.join(', ');
+    return {
+      type: 'INVALID_SIZE_TYPE',
+      message: "Child flyout ".concat(flyoutId, " must use a named size (").concat(namedSizes, "). Received: ").concat(size),
+      flyoutId: flyoutId,
+      level: level,
+      size: size
+    };
+  }
+  return null;
+}
+
+/**
+ * Validates size combinations for parent-child flyouts
+ */
+function validateSizeCombination(parentSize, childSize) {
+  var sizes = [parentSize, childSize];
+
+  // Parent and child can't both be 'm'
+  if (sizes.every(function (s) {
+    return s === 'm';
+  })) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "m"'
+    };
+  }
+
+  // Parent and child can't both be 'fill'
+  if (sizes.every(function (s) {
+    return s === 'fill';
+  })) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "fill"'
+    };
+  }
+
+  // Flyout can't be 'l' if the other in the pair is not "fill"
+  if (sizes.includes('l') && !sizes.includes('fill')) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Flyouts cannot be size "l" unless the other flyout is "fill"'
+    };
+  }
+  return null;
+}
+
+/**
+ * Creates a user-friendly error message for validation errors
+ */
+function createValidationErrorMessage(error) {
+  console.error(error);
+  var prefix = "EuiFlyout validation error";
+  switch (error.type) {
+    case 'INVALID_SIZE_TYPE':
+    case 'INVALID_SIZE_COMBINATION':
+    case 'INVALID_FLYOUT_MENU_TITLE':
+      return "".concat(prefix, ": ").concat(error.message);
+    default:
+      return "".concat(prefix, ": Unknown validation error");
+  }
+}

package/optimize/lib/components/flyout/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/optimize/lib/components/flyout/use_flyout_resizable.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutResizable = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _services = require("../../services");
+var _helpers = require("../resizable_container/helpers");
+/*
+ * 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 = (0, _slicedToArray2.default)(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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/optimize/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/optimize/lib/components/header/header_logo/header_logo.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 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");
@@ -35,6 +36,10 @@ var EuiHeaderLogo = exports.EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_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,
@@ -45,7 +50,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/optimize/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/optimize/lib/components/icon/icon.styles.js

@@ -19,11 +19,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 = (0, _taggedTemplateLiteral2.default)(["\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/optimize/lib/components/overlay_mask/overlay_mask.js

@@ -34,13 +34,17 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasRendered = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_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) {
@@ -51,7 +55,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/optimize/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/optimize/lib/components/page/page.js

@@ -14,7 +14,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
@@ -33,13 +33,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 = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({
     css: stylesCSS,

package/optimize/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/optimize/lib/components/page/page_header/page_header.js

@@ -14,7 +14,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
@@ -29,6 +29,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,
@@ -48,7 +50,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,

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

@@ -29,8 +29,7 @@ var _EuiPageOuter = exports._EuiPageOuter = function _EuiPageOuter(_ref) {
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
     rest = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({