Deprecate getBreakpoint

- in favor of memoizing its behavior in `CurrentEuiBreakpoint` logic

+ update testenv mock slightly - it's not super DRY, but it's fine

src/services/breakpoint/current_breakpoint.tsx

@@ -10,14 +10,19 @@ import React, {
   createContext,
   useState,
   useEffect,
+  useMemo,
+  useCallback,
   FunctionComponent,
 } from 'react';
 
-import { _EuiThemeBreakpoint } from '../../global_styling/variables/breakpoint';
+import { keysOf } from '../../components/common';
+import {
+  _EuiThemeBreakpoint,
+  _EuiThemeBreakpoints,
+} from '../../global_styling/variables/breakpoint';
 import { useEuiTheme } from '../theme';
 import { throttle } from '../throttle';
-
-import { getBreakpoint } from './breakpoint';
+import { sortMapByLargeToSmallValues } from './_sorting';
 
 type CurrentEuiBreakpoint = _EuiThemeBreakpoint | undefined;
 
@@ -32,27 +37,39 @@ export const CurrentEuiBreakpointContext = createContext<CurrentEuiBreakpoint>(
 export const CurrentEuiBreakpointProvider: FunctionComponent = ({
   children,
 }) => {
+  // Obtain the breakpoints map from the EUI theme
   const {
-    euiTheme: { breakpoint: breakpoints }, // Obtain the breakpoints map from the EUI theme
+    euiTheme: { breakpoint: breakpoints },
   } = useEuiTheme();
 
+  // Ensure the breakpoints map is sorted from largest value to smallest
+  const sortedBreakpoints: _EuiThemeBreakpoints = useMemo(
+    () => sortMapByLargeToSmallValues(breakpoints),
+    [breakpoints]
+  );
+
+  // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+  const getBreakpoint = useCallback(
+    (width: number) =>
+      keysOf(sortedBreakpoints).find((key) => sortedBreakpoints[key] <= width),
+    [sortedBreakpoints]
+  );
+
   const [currentBreakpoint, setCurrentBreakpoint] = useState<
     CurrentEuiBreakpoint
   >(
-    typeof window !== 'undefined'
-      ? getBreakpoint(window.innerWidth, breakpoints)
-      : undefined
+    typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : undefined
   );
 
   useEffect(() => {
     const onWindowResize = throttle(() => {
-      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth));
     }, 50);
 
     window.addEventListener('resize', onWindowResize);
 
     return () => window.removeEventListener('resize', onWindowResize);
-  }, [breakpoints]);
+  }, [getBreakpoint]);
 
   return (
     <CurrentEuiBreakpointContext.Provider value={currentBreakpoint}>

src/services/breakpoint/current_breakpoint_hook.testenv.tsx

@@ -8,7 +8,8 @@
 
 import { useContext } from 'react';
 
-import { getBreakpoint } from './breakpoint';
+import { keysOf } from '../../components/common';
+import { breakpoint as breakpoints } from '../../themes/amsterdam/global_styling/variables/_breakpoint';
 import { CurrentEuiBreakpointContext } from './current_breakpoint';
 
 /**
@@ -19,7 +20,10 @@ export const useCurrentEuiBreakpoint = () => {
   const context = useContext(CurrentEuiBreakpointContext);
   if (context !== undefined) return context; // Component has been wrapped, everything is fine.
 
-  return typeof window !== 'undefined'
-    ? getBreakpoint(window.innerWidth)
-    : undefined;
+  if (typeof window === 'undefined') return undefined; // SSR catch
+
+  // Use the default Amsterdam breakpoints (which are already ordered by largest first)
+  return keysOf(breakpoints).find(
+    (key) => breakpoints[key] <= window.innerWidth
+  );
 };

src/services/breakpoint/index.ts

@@ -7,7 +7,6 @@
  */
 
 export type { _EuiThemeBreakpoint as EuiBreakpointSize } from '../../global_styling/variables/breakpoint';
-export * from './breakpoint';
 export * from './current_breakpoint';
 export * from './current_breakpoint_hook';
 export * from './is_within_hooks';

src/services/index.ts

@@ -23,7 +23,6 @@ export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
 
 export type { EuiBreakpointSize } from './breakpoint';
 export {
-  getBreakpoint,
   useIsWithinBreakpoints,
   useIsWithinMaxBreakpoint,
   useIsWithinMinBreakpoint,

upcoming_changelogs/6119.md

@@ -2,6 +2,7 @@
 
 **Breaking changes**
 
+- Removed `getBreakpoint`. Use `useCurrentEuiBreakpoint` instead
 - Removed `BREAKPOINTS` and `BREAKPOINT_KEYS`. Use `euiTheme.breakpoint` instead
 - Removed `isWithinBreakpoints`. Use `useIsWithinBreakpoints` instead
 - Removed `isWithinMaxBreakpoint`. Use `useIsWithinMaxBreakpoint` instead