@elastic/eui 80.0.0 → 81.0.0

package/es/services/theme/provider.js

@@ -1,4 +1,8 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["cloneElement", "className"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -18,9 +22,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { css } from '@emotion/css';
 import isEqual from 'lodash/isEqual';
-import { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var providerWarning = undefined;
@@ -34,7 +40,11 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
     _modifications = _ref.modify,
-    children = _ref.children;
+    children = _ref.children,
+    wrapperProps = _ref.wrapperProps;
+  var _useContext = useContext(EuiNestedThemeContext),
+    isGlobalTheme = _useContext.isGlobalTheme,
+    bodyColor = _useContext.bodyColor;
   var parentSystem = useContext(EuiSystemContext);
   var parentModifications = useContext(EuiModificationsContext);
   var parentColorMode = useContext(EuiColorModeContext);
@@ -89,6 +99,37 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       setTheme(getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode));
     }
   }, [colorMode, system, modifications]);
+  var nestedThemeContext = useMemo(function () {
+    return {
+      isGlobalTheme: false,
+      // The theme that determines the global body styles
+      bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
+      hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
+      colorClassName: /*#__PURE__*/css("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;")
+    };
+  }, [theme, isGlobalTheme, bodyColor, _colorMode]);
+  var renderedChildren = useMemo(function () {
+    if (isGlobalTheme) {
+      return children; // No wrapper
+    }
+
+    var _ref2 = wrapperProps || {},
+      cloneElement = _ref2.cloneElement,
+      className = _ref2.className,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    var props = _objectSpread(_objectSpread({}, rest), {}, {
+      className: classNames(className, nestedThemeContext.colorClassName)
+    });
+    if (cloneElement) {
+      return /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, props), {}, {
+        className: classNames(children.props.className, props.className)
+      }));
+    } else {
+      return ___EmotionJSX("span", _extends({}, props, {
+        className: classNames('euiThemeProvider', props.className)
+      }), children);
+    }
+  }, [isGlobalTheme, nestedThemeContext, wrapperProps, children]);
   return ___EmotionJSX(EuiColorModeContext.Provider, {
     value: colorMode
   }, ___EmotionJSX(EuiSystemContext.Provider, {
@@ -97,5 +138,7 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: modifications
   }, ___EmotionJSX(EuiThemeContext.Provider, {
     value: theme
-  }, children))));
+  }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
+    value: nestedThemeContext
+  }, renderedChildren)))));
 };

package/eui.d.ts

@@ -638,6 +638,12 @@ declare module '@elastic/eui/src/services/theme/types' {
 	export type EuiThemeComputed<T = {}> = ComputedThemeShape<EuiThemeShape & T> & {
 	    themeName: string;
 	};
+	export type EuiThemeNested = {
+	    isGlobalTheme: boolean;
+	    hasDifferentColorFromGlobalTheme: boolean;
+	    bodyColor: string;
+	    colorClassName: string;
+	};
 
 }
 declare module '@elastic/eui/src/services/theme/utils' {
@@ -4156,10 +4162,12 @@ declare module '@elastic/eui/src/components/portal/portal' {
 	    portalRef?: (ref: HTMLDivElement | null) => void;
 	}
 	export class EuiPortal extends Component<EuiPortalProps> {
+	    static contextType: import("react").Context<import ("@elastic/eui/src/services/theme/types").EuiThemeNested>;
 	    portalNode: HTMLDivElement | null;
 	    constructor(props: EuiPortalProps);
 	    componentDidMount(): void;
 	    componentWillUnmount(): void;
+	    setThemeColor(): void;
 	    updatePortalRef(ref: HTMLDivElement | null): void;
 	    render(): import("react").ReactPortal | null;
 	}
@@ -6968,7 +6976,8 @@ declare module '@elastic/eui/src/global_styling/functions/size' {
 
 }
 declare module '@elastic/eui/src/services/theme/provider' {
-	import React, { PropsWithChildren } from 'react';
+	import React, { PropsWithChildren, HTMLAttributes } from 'react';
+	import type { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types'; type LEVELS = 'log' | 'warn' | 'error';
 	export const setEuiDevProviderWarning: (level: LEVELS | undefined) => LEVELS | undefined;
 	export const getEuiDevProviderWarning: () => LEVELS | undefined;
@@ -6977,8 +6986,21 @@ declare module '@elastic/eui/src/services/theme/provider' {
 	    colorMode?: EuiThemeColorMode;
 	    modify?: EuiThemeModifications<T>;
 	    children: any;
+	    /**
+	     * Nested theme providers will receive a wrapping `span` tag in order to correctly
+	     * set the default text `color` that all nested children will inherit.
+	     *
+	     * If an extra wrapper is not desired, pass `{ cloneElement: true }`.
+	     * This requires a **single** child component that the correct color class can be passed to.
+	     *
+	     * The parent level `EuiProvider`/`EuiThemeProvider` will **not** render a wrapper element, as
+	     * the default inherited text color will be set on the page `body`.
+	     */
+	    wrapperProps?: HTMLAttributes<HTMLElement> & CommonProps & {
+	        cloneElement?: boolean;
+	    };
 	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
 	export {};
 
 }
@@ -7105,16 +7127,17 @@ declare module '@elastic/eui/src/themes/amsterdam/theme' {
 }
 declare module '@elastic/eui/src/services/theme/context' {
 	
-	import { EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+	import { EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeComputed, EuiThemeNested } from '@elastic/eui/src/services/theme/types';
 	export const EuiSystemContext: import("react").Context<EuiThemeSystem<{}>>;
 	export const EuiModificationsContext: import("react").Context<import ("@elastic/eui").RecursivePartial<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>>;
 	export const EuiColorModeContext: import("react").Context<EuiThemeColorModeStandard>;
 	export const defaultComputedTheme: EuiThemeComputed<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>;
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
+	export const EuiNestedThemeContext: import("react").Context<EuiThemeNested>;
 
 }
 declare module '@elastic/eui/src/services/theme' {
-	export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
+	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
 	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
@@ -9305,10 +9328,6 @@ declare module '@elastic/eui/src/components/overlay_mask/overlay_mask_body.style
 
 }
 declare module '@elastic/eui/src/components/overlay_mask/overlay_mask' {
-	/**
-	 * NOTE: We can't test this component because Enzyme doesn't support rendering
-	 * into portals.
-	 */
 	import { FunctionComponent, HTMLAttributes, MutableRefObject, ReactNode, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiOverlayMaskInterface {
@@ -17996,7 +18015,7 @@ declare module '@elastic/eui/src/components/search_bar/filters/is_filter' {
 declare module '@elastic/eui/src/components/selectable/selectable_option' {
 	import React, { HTMLAttributes } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	export type EuiSelectableOptionCheckedType = 'on' | 'off' | undefined;
+	export type EuiSelectableOptionCheckedType = 'on' | 'off' | 'mixed' | undefined;
 	export type EuiSelectableOptionBase = CommonProps & {
 	    /**
 	     * Visible label of option.
@@ -18014,9 +18033,9 @@ declare module '@elastic/eui/src/components/selectable/selectable_option' {
 	     */
 	    key?: string;
 	    /**
-	     * Leave `undefined` to indicate not selected,
-	     * 'on' to indicate inclusion and
-	     * 'off' to indicate exclusion
+	     * Leave `undefined` to indicate not selected. Pass a string of
+	     * 'on' to indicate inclusion, 'off' to indicate exclusion,
+	     * or 'mixed' to indicate inclusion for some.
 	     */
 	    checked?: EuiSelectableOptionCheckedType;
 	    disabled?: boolean;
@@ -18152,8 +18171,8 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    searchable?: boolean;
 	    /**
 	     * Attribute applied the option `<li>`.
-	     * If configured to something besides the default value of `option`,
-	     * other ARIA attributes such as `aria-checked` will not be automatically configured.
+	     * If set to a role that allows [aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked),
+	     * `aria-checked` will be automatically configured.
 	     */
 	    role?: LiHTMLAttributes<HTMLLIElement>['role'];
 	    /**
@@ -18169,6 +18188,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	        textWrap: string;
 	    };
 	    constructor(props: EuiSelectableListItemProps);
+	    isChecked: (role: string, checked: EuiSelectableOptionCheckedType) => boolean | "mixed" | undefined;
 	    render(): JSX.Element;
 	}
 
@@ -18570,6 +18590,7 @@ declare module '@elastic/eui/src/components/selectable' {
 }
 declare module '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter' {
 	import { Component, ReactNode } from 'react';
+	import { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
 	import { Query } from '@elastic/eui/src/components/search_bar/query';
 	import { Clause, OperatorType, Value } from '@elastic/eui/src/components/search_bar/query/ast';
 	export interface FieldValueOptionType {
@@ -18621,7 +18642,7 @@ declare module '@elastic/eui/src/components/search_bar/filters/field_value_selec
 	    getOptionFilter(): OptionsFilter;
 	    resolveOptionsLoader: () => OptionsLoader;
 	    resolveOptionName(option: FieldValueOptionType): string;
-	    onOptionClick(field: string, value: Value, checked: 'on' | 'off' | undefined): void;
+	    onOptionClick(field: string, value: Value, checked?: Omit<EuiSelectableOptionCheckedType, 'mixed'>): void;
 	    resolveMultiSelect(): MultiSelect;
 	    componentDidMount(): void;
 	    componentDidUpdate(prevProps: FieldValueSelectionFilterProps): void;
@@ -26573,13 +26594,15 @@ declare module '@elastic/eui' {
 "euiResizableButton.horizontalResizerAriaLabel": any;
 "euiResizableButton.verticalResizerAriaLabel": any;
 "euiResizablePanel.toggleButtonAriaLabel": any;
-"euiSelectableListItem.includedOption": any;
-"euiSelectableListItem.includedOptionInstructions": any;
-"euiSelectableListItem.excludedOption": any;
-"euiSelectableListItem.excludedOptionInstructions": any;
-"euiSelectableListItem.unckeckedOptionInstructions": any;
 "euiSelectableListItem.checkedOption": any;
-"euiSelectableListItem.checkedOptionInstructions": any;
+"euiSelectableListItem.checkOptionInstructions": any;
+"euiSelectableListItem.uncheckOptionInstructions": any;
+"euiSelectableListItem.excludedOption": any;
+"euiSelectableListItem.excludeOptionInstructions": any;
+"euiSelectableListItem.mixedOption": any;
+"euiSelectableListItem.mixedOptionInstructions": any;
+"euiSelectableListItem.mixedOptionUncheckInstructions": any;
+"euiSelectableListItem.mixedOptionExcludeInstructions": any;
 "euiSelectableTemplateSitewide.searchPlaceholder": any;
 "euiSelectableTemplateSitewide.loadingResults": any;
 "euiSelectableTemplateSitewide.noResults": any;

package/i18ntokens.json

@@ -5976,37 +5976,55 @@
     "filepath": "src/components/resizable_container/resizable_panel.tsx"
   },
   {
-    "token": "euiSelectableListItem.includedOption",
-    "defString": "Selected option.",
+    "token": "euiSelectableListItem.checkedOption",
+    "defString": "Checked option.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 146,
-        "column": 8,
-        "index": 4547
+        "line": 181,
+        "column": 10,
+        "index": 5657
       },
       "end": {
-        "line": 149,
-        "column": 10,
-        "index": 4658
+        "line": 184,
+        "column": 12,
+        "index": 5772
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
   },
   {
-    "token": "euiSelectableListItem.includedOptionInstructions",
-    "defString": "To exclude this option, press enter.",
+    "token": "euiSelectableListItem.checkOptionInstructions",
+    "defString": "To check this option, press Enter.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 152,
-        "column": 8,
-        "index": 4698
+        "line": 187,
+        "column": 10,
+        "index": 5818
       },
       "end": {
-        "line": 155,
+        "line": 190,
+        "column": 12,
+        "index": 5962
+      }
+    },
+    "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
+  },
+  {
+    "token": "euiSelectableListItem.uncheckOptionInstructions",
+    "defString": "To uncheck this option, press Enter.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 195,
         "column": 10,
-        "index": 4841
+        "index": 6036
+      },
+      "end": {
+        "line": 198,
+        "column": 12,
+        "index": 6184
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6017,86 +6035,104 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 159,
-        "column": 8,
-        "index": 4930
+        "line": 203,
+        "column": 10,
+        "index": 6250
       },
       "end": {
-        "line": 162,
-        "column": 10,
-        "index": 5041
+        "line": 206,
+        "column": 12,
+        "index": 6367
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
   },
   {
-    "token": "euiSelectableListItem.excludedOptionInstructions",
-    "defString": "To uncheck this option, press enter.",
+    "token": "euiSelectableListItem.excludeOptionInstructions",
+    "defString": "To exclude this option, press Enter.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 165,
-        "column": 8,
-        "index": 5081
+        "line": 209,
+        "column": 10,
+        "index": 6413
       },
       "end": {
-        "line": 168,
-        "column": 10,
-        "index": 5224
+        "line": 212,
+        "column": 12,
+        "index": 6561
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
   },
   {
-    "token": "euiSelectableListItem.unckeckedOptionInstructions",
-    "defString": "To select this option, press enter.",
+    "token": "euiSelectableListItem.mixedOption",
+    "defString": "Mixed (indeterminate) option.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 172,
-        "column": 8,
-        "index": 5310
+        "line": 217,
+        "column": 10,
+        "index": 6624
       },
       "end": {
-        "line": 175,
-        "column": 10,
-        "index": 5453
+        "line": 220,
+        "column": 12,
+        "index": 6751
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
   },
   {
-    "token": "euiSelectableListItem.checkedOption",
-    "defString": "Checked option.",
+    "token": "euiSelectableListItem.mixedOptionInstructions",
+    "defString": "To check this option for all, press Enter once.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 182,
-        "column": 8,
-        "index": 5599
+        "line": 223,
+        "column": 10,
+        "index": 6797
       },
       "end": {
-        "line": 185,
-        "column": 10,
-        "index": 5708
+        "line": 226,
+        "column": 12,
+        "index": 6954
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
   },
   {
-    "token": "euiSelectableListItem.checkedOptionInstructions",
-    "defString": "To uncheck this option, press enter.",
+    "token": "euiSelectableListItem.mixedOptionUncheckInstructions",
+    "defString": "To uncheck this option for all, press Enter twice.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 188,
-        "column": 8,
-        "index": 5761
+        "line": 229,
+        "column": 10,
+        "index": 7007
       },
       "end": {
-        "line": 191,
+        "line": 232,
+        "column": 12,
+        "index": 7174
+      }
+    },
+    "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
+  },
+  {
+    "token": "euiSelectableListItem.mixedOptionExcludeInstructions",
+    "defString": "To exclude this option for all, press Enter twice.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 235,
         "column": 10,
-        "index": 5903
+        "index": 7227
+      },
+      "end": {
+        "line": 238,
+        "column": 12,
+        "index": 7394
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"

package/lib/components/bottom_bar/bottom_bar.js

@@ -202,7 +202,10 @@ _EuiBottomBar.propTypes = {
 var EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var BottomBar = _EuiBottomBar;
   return (0, _react2.jsx)(_provider.EuiThemeProvider, {
-    colorMode: 'dark'
+    colorMode: 'dark',
+    wrapperProps: {
+      cloneElement: true
+    }
   }, (0, _react2.jsx)(BottomBar, _extends({
     ref: ref
   }, props)));

package/lib/components/bottom_bar/bottom_bar.styles.js

@@ -15,8 +15,8 @@ var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    // Text color needs to be reapplied to properly scope the forced `colorMode`
-    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), ";background:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";color:", euiTheme.colors.text, ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
+    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), ";background:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/(0, _react.css)(";label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),
     sticky: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 2, ";;label:sticky;"),

package/lib/components/button/button.js

@@ -62,7 +62,10 @@ var EuiButton = function EuiButton(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return (0, _react2.jsx)(_services.EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, (0, _react2.jsx)(EuiButton, _extends({}, props, {
       color: "text"
     })));

package/lib/components/button/button_empty/button_empty.js

@@ -83,7 +83,10 @@ var EuiButtonEmpty = function EuiButtonEmpty(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return (0, _react2.jsx)(_services.EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, (0, _react2.jsx)(EuiButtonEmpty, _extends({}, props, {
       color: "text"
     })));

package/lib/components/button/button_icon/button_icon.js

@@ -82,7 +82,10 @@ var EuiButtonIcon = function EuiButtonIcon(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return (0, _react2.jsx)(_services.EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, (0, _react2.jsx)(EuiButtonIcon, _extends({}, props, {
       color: "text"
     })));

package/lib/components/filter_group/filter_group.a11y.js

@@ -231,10 +231,10 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 3);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Selected option. To exclude this option, press 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');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press Enter.');
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

package/lib/components/overlay_mask/overlay_mask.js

@@ -18,6 +18,10 @@ var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -53,11 +57,28 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
     });
   }, [overlayMaskNode]); // 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`
   (0, _react.useEffect)(function () {
-    if (!overlayMaskNode) return;
-    overlayMaskNode.className = (0, _css.cx)('euiOverlayMask', cssStyles, className);
-    overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
-  }, [overlayMaskNode, className, cssStyles, headerZindexLocation]);
+    if (overlayMaskNode) {
+      overlayMaskNode.classList.add('euiOverlayMask', cssStyles);
+      overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
+      return function () {
+        return overlayMaskNode.classList.remove(cssStyles);
+      };
+    }
+  }, [overlayMaskNode, cssStyles, headerZindexLocation]);
+  (0, _react.useEffect)(function () {
+    if (className && overlayMaskNode) {
+      var _overlayMaskNode$clas;
+      var classNameArgs = className.split(' '); // The `classList` API doesn't support multiple classes in the same string
+      (_overlayMaskNode$clas = overlayMaskNode.classList).add.apply(_overlayMaskNode$clas, _toConsumableArray(classNameArgs));
+      return function () {
+        var _overlayMaskNode$clas2;
+        return (_overlayMaskNode$clas2 = overlayMaskNode.classList).remove.apply(_overlayMaskNode$clas2, _toConsumableArray(classNameArgs));
+      };
+    }
+  }, [overlayMaskNode, className]);
   return (0, _react2.jsx)(_portal.EuiPortal, {
     portalRef: combinedMaskRef
   }, (0, _react2.jsx)(_react2.Global, {

package/lib/components/portal/portal.js

@@ -7,6 +7,7 @@ exports.insertPositions = exports.INSERT_POSITIONS = exports.EuiPortal = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDom = require("react-dom");
+var _services = require("../../services");
 var _common = require("../common");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -57,6 +58,7 @@ var EuiPortal = /*#__PURE__*/function (_Component) {
   _createClass(EuiPortal, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.setThemeColor();
       this.updatePortalRef(this.portalNode);
     }
   }, {
@@ -68,6 +70,20 @@ var EuiPortal = /*#__PURE__*/function (_Component) {
       }
       this.updatePortalRef(null);
     }
+
+    // Set the inherited color of the portal based on the wrapping EuiThemeProvider
+  }, {
+    key: "setThemeColor",
+    value: function setThemeColor() {
+      if (this.portalNode && this.context) {
+        var _this$context = this.context,
+          hasDifferentColorFromGlobalTheme = _this$context.hasDifferentColorFromGlobalTheme,
+          colorClassName = _this$context.colorClassName;
+        if (hasDifferentColorFromGlobalTheme && this.props.insert == null) {
+          this.portalNode.classList.add(colorClassName);
+        }
+      }
+    }
   }, {
     key: "updatePortalRef",
     value: function updatePortalRef(ref) {
@@ -84,6 +100,7 @@ var EuiPortal = /*#__PURE__*/function (_Component) {
   return EuiPortal;
 }(_react.Component);
 exports.EuiPortal = EuiPortal;
+_defineProperty(EuiPortal, "contextType", _services.EuiNestedThemeContext);
 EuiPortal.propTypes = {
   /**
      * ReactNode to render as this component's content