diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx index dbc19e8616..49c384c0d1 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx @@ -188,7 +188,14 @@ export default function DocSidebarItemCategory({ ? (e) => { onItemClick?.(item); if (href) { - updateCollapsed(false); + if (isActive) { + e.preventDefault(); + updateCollapsed(); + } else { + // When navigating to a new category, we always expand + // see https://github.com/facebook/docusaurus/issues/10854#issuecomment-2609616182 + updateCollapsed(false); + } } else { e.preventDefault(); updateCollapsed(); diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx index bf39faeca3..e283cbd2e5 100644 --- a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx +++ b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx @@ -15,7 +15,6 @@ import React, { type SetStateAction, type ReactNode, } from 'react'; -import useIsBrowser from '@docusaurus/useIsBrowser'; import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; import {prefersReducedMotion} from '../../utils/accessibilityUtils'; @@ -157,24 +156,6 @@ type CollapsibleElementType = React.ElementType< Pick, 'className' | 'onTransitionEnd' | 'style'> >; -/** - * Prevent hydration layout shift before animations are handled imperatively - * with JS - */ -function getSSRStyle({ - collapsed, - isBrowser, -}: { - collapsed: boolean; - isBrowser: boolean; -}) { - // After hydration, styles are applied - if (isBrowser) { - return undefined; - } - return collapsed ? CollapsedStyles : ExpandedStyles; -} - type CollapsibleBaseProps = { /** The actual DOM element to be used in the markup. */ as?: CollapsibleElementType; @@ -192,12 +173,6 @@ type CollapsibleBaseProps = { onCollapseTransitionEnd?: (collapsed: boolean) => void; /** Class name for the underlying DOM element. */ className?: string; - /** - * This is mostly useful for details/summary component where ssrStyle is not - * needed (as details are hidden natively) and can mess up with the browser's - * native behavior when JS fails to load or is disabled - */ - disableSSRStyle?: boolean; }; function CollapsibleBase({ @@ -207,9 +182,7 @@ function CollapsibleBase({ animation, onCollapseTransitionEnd, className, - disableSSRStyle, }: CollapsibleBaseProps) { - const isBrowser = useIsBrowser(); const collapsibleRef = useRef(null); useCollapseAnimation({collapsibleRef, collapsed, animation}); @@ -219,8 +192,6 @@ function CollapsibleBase({ // @ts-expect-error: the "too complicated type" is produced from // "CollapsibleElementType" being a huge union ref={collapsibleRef as RefObject} // Refs are contravariant, which is not expressible in TS - // Not even sure we need this SSRStyle anymore, try to remove it? - style={disableSSRStyle ? undefined : getSSRStyle({collapsed, isBrowser})} onTransitionEnd={(e: React.TransitionEvent) => { if (e.propertyName !== 'height') { return; diff --git a/packages/docusaurus-theme-common/src/components/Details/index.tsx b/packages/docusaurus-theme-common/src/components/Details/index.tsx index 3893034c54..4a58984472 100644 --- a/packages/docusaurus-theme-common/src/components/Details/index.tsx +++ b/packages/docusaurus-theme-common/src/components/Details/index.tsx @@ -109,7 +109,6 @@ export function Details({ { setCollapsed(newCollapsed); setOpen(!newCollapsed);