@docusaurus/theme-common 2.0.0-beta.12faed89d → 2.0.0-beta.14

package/{src/utils/docsUtils.ts → lib/utils/useLocalPathname.d.ts}

@@ -4,8 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-import {useAllDocsData} from '@theme/hooks/useDocs';
-
-// TODO not ideal, see also "useDocs"
-export const isDocsPluginEnabled: boolean = !!useAllDocsData;
+export declare function useLocalPathname(): string;
+//# sourceMappingURL=useLocalPathname.d.ts.map

package/lib/utils/useLocalPathname.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalPathname.d.ts","sourceRoot":"","sources":["../../src/utils/useLocalPathname.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,wBAAgB,gBAAgB,IAAI,MAAM,CAMzC"}

package/lib/utils/useLocalPathname.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useLocation } from '@docusaurus/router';
+// Get the pathname of current route, without the optional site baseUrl
+// - /docs/myDoc => /docs/myDoc
+// - /baseUrl/docs/myDoc => /docs/myDoc
+export function useLocalPathname() {
+    const { siteConfig: { baseUrl }, } = useDocusaurusContext();
+    const { pathname } = useLocation();
+    return pathname.replace(baseUrl, '/');
+}
+//# sourceMappingURL=useLocalPathname.js.map

package/lib/utils/useLocalPathname.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalPathname.js","sourceRoot":"","sources":["../../src/utils/useLocalPathname.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,uEAAuE;AACvE,+BAA+B;AAC/B,uCAAuC;AACvC,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EACJ,UAAU,EAAE,EAAC,OAAO,EAAC,GACtB,GAAG,oBAAoB,EAAE,CAAC;IAC3B,MAAM,EAAC,QAAQ,EAAC,GAAG,WAAW,EAAE,CAAC;IACjC,OAAO,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACxC,CAAC"}

package/lib/utils/useLocationChange.d.ts

@@ -12,3 +12,4 @@ declare type LocationChangeEvent = {
 declare type OnLocationChange = (locationChangeEvent: LocationChangeEvent) => void;
 export declare function useLocationChange(onLocationChange: OnLocationChange): void;
 export {};
+//# sourceMappingURL=useLocationChange.d.ts.map

package/lib/utils/useLocationChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocationChange.d.ts","sourceRoot":"","sources":["../../src/utils/useLocationChange.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAI7C,aAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,gBAAgB,EAAE,QAAQ,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,aAAK,gBAAgB,GAAG,CAAC,mBAAmB,EAAE,mBAAmB,KAAK,IAAI,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAc1E"}

package/lib/utils/useLocationChange.js

@@ -4,22 +4,21 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from '@docusaurus/router';
 import { usePrevious } from './usePrevious';
+import { useDynamicCallback } from './reactUtils';
 export function useLocationChange(onLocationChange) {
     const location = useLocation();
     const previousLocation = usePrevious(location);
-    const isFirst = useRef(true);
+    const onLocationChangeDynamic = useDynamicCallback(onLocationChange);
     useEffect(() => {
-        // Prevent first effect to trigger the listener on mount
-        if (isFirst.current) {
-            isFirst.current = false;
-            return;
+        if (location !== previousLocation) {
+            onLocationChangeDynamic({
+                location,
+                previousLocation,
+            });
         }
-        onLocationChange({
-            location,
-            previousLocation,
-        });
-    }, [location]);
+    }, [onLocationChangeDynamic, location, previousLocation]);
 }
+//# sourceMappingURL=useLocationChange.js.map

package/lib/utils/useLocationChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocationChange.js","sourceRoot":"","sources":["../../src/utils/useLocationChange.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAShD,MAAM,UAAU,iBAAiB,CAAC,gBAAkC;IAClE,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE/C,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,KAAK,gBAAgB,EAAE;YACjC,uBAAuB,CAAC;gBACtB,QAAQ;gBACR,gBAAgB;aACjB,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5D,CAAC"}

package/lib/utils/usePluralForm.d.ts

@@ -7,3 +7,4 @@
 export declare function usePluralForm(): {
     selectMessage: (count: number, pluralMessages: string) => string;
 };
+//# sourceMappingURL=usePluralForm.d.ts.map

package/lib/utils/usePluralForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePluralForm.d.ts","sourceRoot":"","sources":["../../src/utils/usePluralForm.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAwGH,wBAAgB,aAAa,IAAI;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;CAClE,CAMA"}

package/lib/utils/usePluralForm.js

@@ -87,8 +87,7 @@ function selectPluralMessage(pluralMessages, count, localePluralForms) {
 export function usePluralForm() {
     const localePluralForm = useLocalePluralForms();
     return {
-        selectMessage: (count, pluralMessages) => {
-            return selectPluralMessage(pluralMessages, count, localePluralForm);
-        },
+        selectMessage: (count, pluralMessages) => selectPluralMessage(pluralMessages, count, localePluralForm),
     };
 }
+//# sourceMappingURL=usePluralForm.js.map

package/lib/utils/usePluralForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePluralForm.js","sourceRoot":"","sources":["../../src/utils/usePluralForm.ts"],"names":[],"mappings":"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"}

package/lib/utils/usePrevious.d.ts

@@ -5,3 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export declare function usePrevious<T>(value: T): T | undefined;
+//# sourceMappingURL=usePrevious.d.ts.map

package/lib/utils/usePrevious.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../src/utils/usePrevious.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAQtD"}

package/lib/utils/usePrevious.js

@@ -4,11 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './reactUtils';
 export function usePrevious(value) {
     const ref = useRef();
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         ref.current = value;
     });
     return ref.current;
 }
+//# sourceMappingURL=usePrevious.js.map

package/lib/utils/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sourceRoot":"","sources":["../../src/utils/usePrevious.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAC,yBAAyB,EAAC,MAAM,cAAc,CAAC;AAEvD,MAAM,UAAU,WAAW,CAAI,KAAQ;IACrC,MAAM,GAAG,GAAG,MAAM,EAAK,CAAC;IAExB,yBAAyB,CAAC,GAAG,EAAE;QAC7B,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC"}

package/lib/utils/useTOCHighlight.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare type TOCHighlightConfig = {
+    linkClassName: string;
+    linkActiveClassName: string;
+    minHeadingLevel: number;
+    maxHeadingLevel: number;
+};
+declare function useTOCHighlight(config: TOCHighlightConfig | undefined): void;
+export default useTOCHighlight;
+//# sourceMappingURL=useTOCHighlight.d.ts.map

package/lib/utils/useTOCHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTOCHighlight.d.ts","sourceRoot":"","sources":["../../src/utils/useTOCHighlight.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AA6GH,oBAAY,kBAAkB,GAAG;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,iBAAS,eAAe,CAAC,MAAM,EAAE,kBAAkB,GAAG,SAAS,GAAG,IAAI,CAuDrE;AAED,eAAe,eAAe,CAAC"}

package/lib/utils/useTOCHighlight.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useEffect, useRef } from 'react';
+import { useThemeConfig } from './useThemeConfig';
+/*
+TODO make the hardcoded theme-classic classnames configurable
+(or add them to ThemeClassNames?)
+ */
+// If the anchor has no height and is just a "marker" in the dom; we'll use the parent (normally the link text) rect boundaries instead
+function getVisibleBoundingClientRect(element) {
+    const rect = element.getBoundingClientRect();
+    const hasNoHeight = rect.top === rect.bottom;
+    if (hasNoHeight) {
+        return getVisibleBoundingClientRect(element.parentNode);
+    }
+    return rect;
+}
+// Considering we divide viewport into 2 zones of each 50vh
+// This returns true if an element is in the first zone (ie, appear in viewport, near the top)
+function isInViewportTopHalf(boundingRect) {
+    return boundingRect.top > 0 && boundingRect.bottom < window.innerHeight / 2;
+}
+function getAnchors({ minHeadingLevel, maxHeadingLevel, }) {
+    const selectors = [];
+    for (let i = minHeadingLevel; i <= maxHeadingLevel; i += 1) {
+        selectors.push(`h${i}.anchor`);
+    }
+    return Array.from(document.querySelectorAll(selectors.join()));
+}
+function getActiveAnchor(anchors, { anchorTopOffset, }) {
+    var _a;
+    // Naming is hard
+    // The "nextVisibleAnchor" is the first anchor that appear under the viewport top boundary
+    // Note: it does not mean this anchor is visible yet, but if user continues scrolling down, it will be the first to become visible
+    const nextVisibleAnchor = anchors.find((anchor) => {
+        const boundingRect = getVisibleBoundingClientRect(anchor);
+        return boundingRect.top >= anchorTopOffset;
+    });
+    if (nextVisibleAnchor) {
+        const boundingRect = getVisibleBoundingClientRect(nextVisibleAnchor);
+        // If anchor is in the top half of the viewport: it is the one we consider "active"
+        // (unless it's too close to the top and and soon to be scrolled outside viewport)
+        if (isInViewportTopHalf(boundingRect)) {
+            return nextVisibleAnchor;
+        }
+        // If anchor is in the bottom half of the viewport, or under the viewport, we consider the active anchor is the previous one
+        // This is because the main text appearing in the user screen mostly belong to the previous anchor
+        else {
+            // Returns null for the first anchor, see https://github.com/facebook/docusaurus/issues/5318
+            return (_a = anchors[anchors.indexOf(nextVisibleAnchor) - 1]) !== null && _a !== void 0 ? _a : null;
+        }
+    }
+    // no anchor under viewport top? (ie we are at the bottom of the page)
+    // => highlight the last anchor found
+    else {
+        return anchors[anchors.length - 1];
+    }
+}
+function getLinkAnchorValue(link) {
+    return decodeURIComponent(link.href.substring(link.href.indexOf('#') + 1));
+}
+function getLinks(linkClassName) {
+    return Array.from(document.getElementsByClassName(linkClassName));
+}
+function getNavbarHeight() {
+    // Not ideal to obtain actual height this way
+    // Using TS ! (not ?) because otherwise a bad selector would be un-noticed
+    return document.querySelector('.navbar').clientHeight;
+}
+function useAnchorTopOffsetRef() {
+    const anchorTopOffsetRef = useRef(0);
+    const { navbar: { hideOnScroll }, } = useThemeConfig();
+    useEffect(() => {
+        anchorTopOffsetRef.current = hideOnScroll ? 0 : getNavbarHeight();
+    }, [hideOnScroll]);
+    return anchorTopOffsetRef;
+}
+function useTOCHighlight(config) {
+    const lastActiveLinkRef = useRef(undefined);
+    const anchorTopOffsetRef = useAnchorTopOffsetRef();
+    useEffect(() => {
+        if (!config) {
+            // no-op, highlighting is disabled
+            return () => { };
+        }
+        const { linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel, } = config;
+        function updateLinkActiveClass(link, active) {
+            var _a;
+            if (active) {
+                if (lastActiveLinkRef.current && lastActiveLinkRef.current !== link) {
+                    (_a = lastActiveLinkRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(linkActiveClassName);
+                }
+                link.classList.add(linkActiveClassName);
+                lastActiveLinkRef.current = link;
+            }
+            else {
+                link.classList.remove(linkActiveClassName);
+            }
+        }
+        function updateActiveLink() {
+            const links = getLinks(linkClassName);
+            const anchors = getAnchors({ minHeadingLevel, maxHeadingLevel });
+            const activeAnchor = getActiveAnchor(anchors, {
+                anchorTopOffset: anchorTopOffsetRef.current,
+            });
+            const activeLink = links.find((link) => activeAnchor && activeAnchor.id === getLinkAnchorValue(link));
+            links.forEach((link) => {
+                updateLinkActiveClass(link, link === activeLink);
+            });
+        }
+        document.addEventListener('scroll', updateActiveLink);
+        document.addEventListener('resize', updateActiveLink);
+        updateActiveLink();
+        return () => {
+            document.removeEventListener('scroll', updateActiveLink);
+            document.removeEventListener('resize', updateActiveLink);
+        };
+    }, [config, anchorTopOffsetRef]);
+}
+export default useTOCHighlight;
+//# sourceMappingURL=useTOCHighlight.js.map

package/lib/utils/useTOCHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTOCHighlight.js","sourceRoot":"","sources":["../../src/utils/useTOCHighlight.ts"],"names":[],"mappings":"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"}

package/lib/utils/useThemeConfig.d.ts

@@ -1,15 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { PrismTheme } from 'prism-react-renderer';
 import { CSSProperties } from 'react';
+import { DeepPartial } from 'utility-types';
 export declare type DocsVersionPersistence = 'localStorage' | 'none';
 export declare type NavbarItem = {
     type?: string | undefined;
     items?: NavbarItem[];
     label?: string;
     position?: 'left' | 'right';
-};
+} & Record<string, unknown>;
 export declare type NavbarLogo = {
     src: string;
     srcDark?: string;
+    width?: string | number;
+    height?: string | number;
     href?: string;
     target?: string;
     alt?: string;
@@ -52,20 +61,31 @@ export declare type FooterLinkItem = {
     html?: string;
     prependBaseUrlToHref?: string;
 };
-export declare type FooterLinks = {
-    title?: string;
-    items: FooterLinkItem[];
-};
-export declare type Footer = {
+export declare type FooterBase = {
     style: 'light' | 'dark';
     logo?: {
         alt?: string;
         src?: string;
         srcDark?: string;
+        width?: string | number;
+        height?: string | number;
         href?: string;
     };
     copyright?: string;
-    links: FooterLinks[];
+};
+export declare type MultiColumnFooter = FooterBase & {
+    links: Array<{
+        title: string | null;
+        items: FooterLinkItem[];
+    }>;
+};
+export declare type SimpleFooter = FooterBase & {
+    links: FooterLinkItem[];
+};
+export declare type Footer = MultiColumnFooter | SimpleFooter;
+export declare type TableOfContents = {
+    minHeadingLevel: number;
+    maxHeadingLevel: number;
 };
 export declare type ThemeConfig = {
     docs: {
@@ -77,8 +97,11 @@ export declare type ThemeConfig = {
     prism: PrismConfig;
     footer?: Footer;
     hideableSidebar: boolean;
-    image: string;
-    metadatas: Array<Record<string, string>>;
+    image?: string;
+    metadata: Array<Record<string, string>>;
     sidebarCollapsible: boolean;
+    tableOfContents: TableOfContents;
 };
+export declare type UserThemeConfig = DeepPartial<ThemeConfig>;
 export declare function useThemeConfig(): ThemeConfig;
+//# sourceMappingURL=useThemeConfig.d.ts.map

package/lib/utils/useThemeConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeConfig.d.ts","sourceRoot":"","sources":["../../src/utils/useThemeConfig.ts"],"names":[],"mappings":"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"}

package/lib/utils/useThemeConfig.js

@@ -8,3 +8,4 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 export function useThemeConfig() {
     return useDocusaurusContext().siteConfig.themeConfig;
 }
+//# sourceMappingURL=useThemeConfig.js.map

package/lib/utils/useThemeConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeConfig.js","sourceRoot":"","sources":["../../src/utils/useThemeConfig.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AA8HpE,MAAM,UAAU,cAAc;IAC5B,OAAO,oBAAoB,EAAE,CAAC,UAAU,CAAC,WAA0B,CAAC;AACtE,CAAC"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@docusaurus/theme-common",
-  "version": "2.0.0-beta.12faed89d",
+  "version": "2.0.0-beta.14",
   "description": "Common code for Docusaurus themes.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch"
+    "build": "node copyUntypedFiles.js && tsc",
+    "watch": "node copyUntypedFiles.js && tsc --watch"
   },
   "publishConfig": {
     "access": "public"
@@ -18,15 +18,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.12faed89d",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.12faed89d",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.12faed89d",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.12faed89d",
-    "@docusaurus/types": "2.0.0-beta.12faed89d",
-    "tslib": "^2.1.0"
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.14",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.14",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.14",
+    "clsx": "^1.1.1",
+    "fs-extra": "^10.0.0",
+    "parse-numeric-range": "^1.3.0",
+    "tslib": "^2.3.1",
+    "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.12faed89d"
+    "@docusaurus/core": "2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
+    "@docusaurus/types": "2.0.0-beta.14",
+    "@testing-library/react-hooks": "^7.0.2",
+    "lodash": "^4.17.20"
   },
   "peerDependencies": {
     "prism-react-renderer": "^1.2.1",
@@ -34,7 +40,7 @@
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14"
   },
-  "gitHead": "1430dbacfbe9da59a17ce395ed29bdbddaf90049"
+  "gitHead": "c4824a8937d8f1aa0806667749cbc74058e2b294"
 }

package/src/{utils/useCollapsible.tsx → components/Collapsible/index.tsx}

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import React, {
   useState,
   useEffect,
@@ -14,6 +15,7 @@ import React, {
   Dispatch,
   SetStateAction,
   ReactNode,
+  useLayoutEffect,
 } from 'react';
 
 const DefaultAnimationEasing = 'ease-in-out';
@@ -118,7 +120,7 @@ function useCollapseAnimation({
 
     el.style.willChange = 'height';
 
-    function startAnimation(): () => void {
+    function startAnimation() {
       const animationFrame = requestAnimationFrame(() => {
         // When collapsing
         if (collapsed) {
@@ -146,52 +148,95 @@ function useCollapseAnimation({
 }
 
 type CollapsibleElementType = React.ElementType<
-  Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd'>
+  Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd' | 'style'>
 >;
 
-export function Collapsible({
+// Prevent hydration layout shift before anims are handled imperatively with JS
+function getSSRStyle(collapsed: boolean) {
+  if (ExecutionEnvironment.canUseDOM) {
+    return undefined;
+  }
+  return collapsed ? CollapsedStyles : ExpandedStyles;
+}
+
+type CollapsibleBaseProps = {
+  as?: CollapsibleElementType;
+  collapsed: boolean;
+  children: ReactNode;
+  animation?: CollapsibleAnimationConfig;
+  onCollapseTransitionEnd?: (collapsed: boolean) => void;
+  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 default native behavior of the browser when JS fails to load or is disabled
+  disableSSRStyle?: boolean;
+};
+
+function CollapsibleBase({
   as: As = 'div',
   collapsed,
   children,
   animation,
+  onCollapseTransitionEnd,
   className,
-}: {
-  as?: CollapsibleElementType; // TODO better typing, allow any html element (keyof JSX.IntrinsicElement => not working)
-  collapsed: boolean;
-  children: ReactNode;
-  animation?: CollapsibleAnimationConfig;
-  className?: string;
-}) {
+  disableSSRStyle,
+}: CollapsibleBaseProps) {
   // any because TS is a pain for HTML element refs, see https://twitter.com/sebastienlorber/status/1412784677795110914
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const collapsibleRef = useRef<any>(null);
 
   useCollapseAnimation({collapsibleRef, collapsed, animation});
 
   return (
     <As
-      // @ts-expect-error: see https://twitter.com/sebastienlorber/status/1412784677795110914
+      // @ts-expect-error: the "too complicated type" is produced from "CollapsibleElementType" being a huge union
       ref={collapsibleRef}
-      onTransitionEnd={(e) => {
+      style={disableSSRStyle ? undefined : getSSRStyle(collapsed)}
+      onTransitionEnd={(e: React.TransitionEvent) => {
         if (e.propertyName !== 'height') {
           return;
         }
 
-        const el = collapsibleRef.current!;
-        const currentCollapsibleElementHeight = el.style.height;
-
-        if (
-          !collapsed &&
-          parseInt(currentCollapsibleElementHeight, 10) === el.scrollHeight
-        ) {
-          applyCollapsedStyle(el, false);
-        }
-
-        if (currentCollapsibleElementHeight === CollapsedStyles.height) {
-          applyCollapsedStyle(el, true);
-        }
+        applyCollapsedStyle(collapsibleRef.current!, collapsed);
+        onCollapseTransitionEnd?.(collapsed);
       }}
       className={className}>
       {children}
     </As>
   );
 }
+
+function CollapsibleLazy({collapsed, ...props}: CollapsibleBaseProps) {
+  const [mounted, setMounted] = useState(!collapsed);
+
+  useLayoutEffect(() => {
+    if (!collapsed) {
+      setMounted(true);
+    }
+  }, [collapsed]);
+
+  // lazyCollapsed updated in effect so that the first expansion transition can work
+  const [lazyCollapsed, setLazyCollapsed] = useState(collapsed);
+  useLayoutEffect(() => {
+    if (mounted) {
+      setLazyCollapsed(collapsed);
+    }
+  }, [mounted, collapsed]);
+
+  return mounted ? (
+    <CollapsibleBase {...props} collapsed={lazyCollapsed} />
+  ) : null;
+}
+
+type CollapsibleProps = CollapsibleBaseProps & {
+  // Lazy allows to delay the rendering when collapsed => it will render children only after hydration, on first expansion
+  // Required prop: it forces to think if content should be server-rendered or not!
+  // This has perf impact on the SSR output and html file sizes
+  // See https://github.com/facebook/docusaurus/issues/4753
+  lazy: boolean;
+};
+
+export function Collapsible({lazy, ...props}: CollapsibleProps): JSX.Element {
+  const Comp = lazy ? CollapsibleLazy : CollapsibleBase;
+  return <Comp {...props} />;
+}