Fix SSR for breadcrumbs and collapsible-nav

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fixed bug in `EuiComboBox` where the input was dropping to the next line when a `EuiBadge` had a very long text ([#3968](https://github.com/elastic/eui/pull/3968))
 - Fixed type mismatch between `EuiSelectable` options extended via `EuiSelectableOption` and internal option types ([#3983](https://github.com/elastic/eui/pull/3983))
 - Fixed `EuiButton` CSS for RTL languages by using `margin-inline-[pos]` instead of `margin-[pos]` ([#3974](https://github.com/elastic/eui/pull/3974))
+- Fix server-side rendering of `EuiBreadcrumbs` and `EuiCollapsibleNav` ([#3970](https://github.com/elastic/eui/pull/3970))
 
 ## [`28.3.0`](https://github.com/elastic/eui/tree/v28.3.0)
 

src/components/breadcrumbs/breadcrumbs.tsx

@@ -22,8 +22,8 @@ import React, {
   FunctionComponent,
   MouseEventHandler,
   ReactNode,
-  useState,
   useEffect,
+  useState,
 } from 'react';
 import classNames from 'classnames';
 import { throttle } from '../color_picker/utils';
@@ -34,7 +34,7 @@ import { EuiInnerText } from '../inner_text';
 import { EuiLink } from '../link';
 import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';
-import { getBreakpoint, EuiBreakpointSize } from '../../services/breakpoint';
+import { EuiBreakpointSize, getBreakpoint } from '../../services/breakpoint';
 
 export type EuiBreadcrumbResponsiveMaxCount = {
   /**
@@ -187,7 +187,7 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
   ...rest
 }) => {
   const [currentBreakpoint, setCurrentBreakpoint] = useState(
-    getBreakpoint(window.innerWidth)
+    getBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth)
   );
 
   const functionToCallOnWindowResize = throttle(() => {

src/components/collapsible_nav/collapsible_nav.tsx

@@ -18,17 +18,17 @@
  */
 
 import React, {
+  cloneElement,
   FunctionComponent,
+  HTMLAttributes,
+  ReactElement,
   ReactNode,
   useEffect,
   useState,
-  HTMLAttributes,
-  ReactElement,
-  cloneElement,
 } from 'react';
 import classNames from 'classnames';
 import { throttle } from '../color_picker/utils';
-import { EuiWindowEvent, keys, htmlIdGenerator } from '../../services';
+import { EuiWindowEvent, htmlIdGenerator, keys } from '../../services';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask, EuiOverlayMaskProps } from '../overlay_mask';
 import { CommonProps } from '../common';
@@ -95,7 +95,8 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
 }) => {
   const [flyoutID] = useState(id || htmlIdGenerator()('euiCollapsibleNav'));
   const [windowIsLargeEnoughToDock, setWindowIsLargeEnoughToDock] = useState(
-    window.innerWidth >= dockedBreakpoint
+    (typeof window === 'undefined' ? Infinity : window.innerWidth) >=
+      dockedBreakpoint
   );
   const navIsDocked = isDocked && windowIsLargeEnoughToDock;
 

src/services/breakpoint.ts

@@ -44,7 +44,7 @@ export const BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
  * that is less than or equal to the width
  *
  * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimu width
+ * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
  * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
  */
 export function getBreakpoint(