@elastic/eui 95.2.0 → 95.3.0

package/es/components/provider/provider.js

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
+import { EuiThemeProvider } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { cache as fallbackCache } from '../../services/emotion/css';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
@@ -76,5 +76,5 @@ export var EuiProvider = function EuiProvider(_ref) {
     children: Utilities && ___EmotionJSX(Utilities, null)
   })), ___EmotionJSX(EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, ___EmotionJSX(CurrentEuiBreakpointProvider, null, children)))));
+  }, children))));
 };

package/es/global_styling/mixins/_helpers.js

@@ -67,10 +67,18 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
       gradient = "".concat(gradientEnd);
     }
   }
+
+  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+  // This workaround forces a stacking context on the scrolling container, which
+  // hopefully addresses the bug. @see:
+  // - https://issues.chromium.org/issues/40778541
+  // - https://github.com/elastic/kibana/issues/180828
+  // - https://github.com/elastic/eui/pull/6343#issuecomment-1302732021
+  var chromiumMaskWorkaround = 'transform: translateZ(0);';
   if (direction === 'y') {
-    return "mask-image: linear-gradient(to bottom, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to bottom, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   } else {
-    return "mask-image: linear-gradient(to right, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to right, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   }
 };
 

package/es/services/breakpoint/current_breakpoint.js

@@ -14,15 +14,17 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { keysOf } from '../../components/common';
-import { useEuiTheme } from '../theme';
+import { useEuiTheme } from '../theme/hooks';
 import { throttle } from '../throttle';
 import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 
 /**
- * Top level provider (nested within EuiProvider) which provides a single
- * resize listener that returns the current breakpoint based on window width
+ * Returns the current breakpoint based on window width.
+ * Typically only called by the top-level `EuiProvider` (to reduce the number
+ * of window resize listeners on the page). Also conditionally called if a
+ * nested `EuiThemeProvider` defines a `modify.breakpoint` override
  */
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;

package/es/services/theme/provider.js

@@ -25,11 +25,12 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState, useCallback, Fragment } from 'react';
 import { Global } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
 import { css, cx } from '../emotion/css';
+import { CurrentEuiBreakpointProvider } from '../breakpoint/current_breakpoint';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
@@ -55,6 +56,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     system = _useState2[0],
     setSystem = _useState2[1];
   var prevSystemKey = useRef(system.key);
+
+  // To reduce the number of window resize listeners, only render a
+  // CurrentEuiBreakpointProvider for the top level parent theme, or for
+  // nested themes only if modified breakpoint overrides are passed
+  var EuiConditionalBreakpointProvider = useMemo(function () {
+    return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? CurrentEuiBreakpointProvider : Fragment;
+  }, [isGlobalTheme, _modifications]);
   var _useState3 = useState(mergeDeep(parentModifications, _modifications)),
     _useState4 = _slicedToArray(_useState3, 2),
     modifications = _useState4[0],
@@ -164,5 +172,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, renderedChildren))))))));
+  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, ___EmotionJSX(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
 };