diff --git a/CHANGELOG.md b/CHANGELOG.md index e67fa8f9de5..a09bc0e29bb 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index c3140904c26..29ace291a2a 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/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 = ({ ...rest }) => { const [currentBreakpoint, setCurrentBreakpoint] = useState( - getBreakpoint(window.innerWidth) + getBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth) ); const functionToCallOnWindowResize = throttle(() => { diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx index 65e5e2d1941..4d5ebf23931 100644 --- a/src/components/collapsible_nav/collapsible_nav.tsx +++ b/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 = ({ }) => { const [flyoutID] = useState(id || htmlIdGenerator()('euiCollapsibleNav')); const [windowIsLargeEnoughToDock, setWindowIsLargeEnoughToDock] = useState( - window.innerWidth >= dockedBreakpoint + (typeof window === 'undefined' ? Infinity : window.innerWidth) >= + dockedBreakpoint ); const navIsDocked = isDocked && windowIsLargeEnoughToDock; diff --git a/src/services/breakpoint.ts b/src/services/breakpoint.ts index 5ad1535d549..ceb251a6214 100644 --- a/src/services/breakpoint.ts +++ b/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(