[EuiThemeProvider] Allow nested modify.breakpoint overrides

packages/eui/changelogs/upcoming/7862.md

@@ -0,0 +1 @@
+- Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level)

packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx

@@ -217,7 +217,8 @@ export const CustomBreakpointsJS = () => {
         <>
           <p>
             Theme breakpoints can be overriden or added via{' '}
-            <EuiCode>EuiProvider</EuiCode>&apos;s <EuiCode>modify</EuiCode>{' '}
+            <EuiCode>EuiProvider</EuiCode>&apos;s or{' '}
+            <EuiCode>EuiThemeProvider</EuiCode>&apos;s <EuiCode>modify</EuiCode>{' '}
             prop.
           </p>
           <p>
@@ -232,7 +233,7 @@ export const CustomBreakpointsJS = () => {
           Current custom breakpoint: <strong>{currentBreakpoint}</strong>
         </p>
       }
-      snippet={`<EuiProvider
+      snippet={`<EuiThemeProvider
   modify={{
     breakpoint: {
       xxs: 0,
@@ -246,7 +247,7 @@ export const CustomBreakpointsJS = () => {
   }}
 >
   <App />
-</EuiProvider>
+</EuiThemeProvider>
 `}
       snippetLanguage="js"
     />

packages/eui/src-docs/src/views/theme/breakpoints/breakpoints.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react';
-import { EuiSpacer, EuiText, EuiProvider } from '../../../../../src';
+import { EuiSpacer, EuiText, EuiThemeProvider } from '../../../../../src';
 
 import { GuideSection } from '../../../components/guide_section/guide_section';
 import { ThemeContext } from '../../../components/with_theme';
@@ -51,7 +51,7 @@ export default () => {
       <GuideSection color="transparent">{valuesContent}</GuideSection>
 
       {currentLanguage.includes('js') && (
-        <EuiProvider modify={{ breakpoint: CUSTOM_BREAKPOINTS }}>
+        <EuiThemeProvider modify={{ breakpoint: CUSTOM_BREAKPOINTS }}>
           <GuideSection color="subdued">
             <EuiText grow={false}>
               <h2 id={breakpointSections[1].id}>
@@ -70,7 +70,7 @@ export default () => {
           </GuideSection>
 
           <GuideSection color="transparent">{valuesContent}</GuideSection>
-        </EuiProvider>
+        </EuiThemeProvider>
       )}
     </>
   );

packages/eui/src/services/breakpoint/current_breakpoint.tsx

@@ -21,7 +21,7 @@ import {
   _EuiThemeBreakpoint,
   _EuiThemeBreakpoints,
 } from '../../global_styling/variables/breakpoint';
-import { useEuiTheme } from '../theme';
+import { useEuiTheme } from '../theme/hooks';
 import { throttle } from '../throttle';
 import { sortMapByLargeToSmallValues } from './_sorting';
 
@@ -31,8 +31,10 @@ export const CurrentEuiBreakpointContext =
   createContext<CurrentEuiBreakpoint>(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 const CurrentEuiBreakpointProvider: FunctionComponent<
   PropsWithChildren

packages/eui/src/services/theme/provider.test.tsx

@@ -11,6 +11,7 @@ import { render } from '@testing-library/react'; // Note - don't use the EUI cus
 import { css } from '@emotion/react';
 
 import { EuiProvider } from '../../components/provider';
+import { useCurrentEuiBreakpoint } from '../breakpoint';
 import { EuiNestedThemeContext } from './context';
 import { EuiThemeProvider } from './provider';
 
@@ -73,6 +74,33 @@ describe('EuiThemeProvider', () => {
 
       expect(getByText('Modified')).toHaveStyleRule('color', 'hotpink');
     });
+
+    it('sets a conditional CurrentEuiBreakpointProvider if modify.breakpoint is passed', () => {
+      window.innerWidth = 2500;
+      const customBreakpoints = { xxl: 2000 };
+      const PrintCurrentBreakpoint = () => <>{useCurrentEuiBreakpoint()}</>;
+
+      const { container, rerender } = render(
+        <EuiThemeProvider modify={{ breakpoint: customBreakpoints }}>
+          <PrintCurrentBreakpoint />
+        </EuiThemeProvider>
+      );
+
+      expect(container.textContent).toEqual('xxl');
+
+      // Does nothing if no modify.breakpoint is passed
+      const eventListenerSpy = jest.spyOn(window, 'addEventListener');
+      rerender(
+        <EuiThemeProvider>
+          <PrintCurrentBreakpoint />
+        </EuiThemeProvider>
+      );
+      expect(eventListenerSpy).not.toHaveBeenCalledWith('resize');
+      expect(container.textContent).toEqual('xl');
+
+      // Reset window width to jsdom's default
+      window.innerWidth = 1024;
+    });
   });
 
   describe('nested EuiThemeProviders', () => {

packages/eui/src/services/theme/provider.tsx

@@ -15,13 +15,15 @@ import React, {
   useCallback,
   PropsWithChildren,
   HTMLAttributes,
+  Fragment,
 } from 'react';
 import { Global, type CSSObject } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 
 import type { CommonProps } from '../../components/common';
 import { cloneElementWithCss } from '../emotion';
 import { css, cx } from '../emotion/css';
+import { CurrentEuiBreakpointProvider } from '../breakpoint/current_breakpoint';
 
 import {
   EuiSystemContext,
@@ -80,6 +82,12 @@ export const EuiThemeProvider = <T extends {} = {}>({
   const [system, setSystem] = useState(_system || parentSystem);
   const prevSystemKey = useRef(system.key);
 
+  // To reduce the number of window resize listeners, only render a
+  // CurrentEuiBreakpointProvider if modified breakpoint overrides are passed
+  const EuiConditionalBreakpointProvider = useMemo(() => {
+    return _modifications?.breakpoint ? CurrentEuiBreakpointProvider : Fragment;
+  }, [_modifications]);
+
   const [modifications, setModifications] = useState<EuiThemeModifications>(
     mergeDeep(parentModifications, _modifications)
   );
@@ -232,7 +240,9 @@ export const EuiThemeProvider = <T extends {} = {}>({
               <EuiNestedThemeContext.Provider value={nestedThemeContext}>
                 <EuiThemeMemoizedStylesProvider>
                   <EuiEmotionThemeProvider>
-                    {renderedChildren}
+                    <EuiConditionalBreakpointProvider>
+                      {renderedChildren}
+                    </EuiConditionalBreakpointProvider>
                   </EuiEmotionThemeProvider>
                 </EuiThemeMemoizedStylesProvider>
               </EuiNestedThemeContext.Provider>