Fix SSR for breadcrumbs and collapsible-nav (#3970)

Closes #3687. Put guards around references to `window` in the breadcrumbs and collapsible nav
components, so that EUI can still render in an SSR environment.

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(