@docusaurus/theme-common 2.0.0-beta.15a2b59f9 → 2.0.0-beta.17

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,14 @@
+/**
+ * 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;
+};
+export default function useTOCHighlight(config: TOCHighlightConfig | undefined): void;
+//# 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;AAgHH,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,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,MAAM,EAAE,kBAAkB,GAAG,SAAS,GACrC,IAAI,CAwDN"}

package/lib/utils/useTOCHighlight.js

@@ -0,0 +1,126 @@
+/**
+ * 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, }) {
+    // Naming is hard: The "nextVisibleAnchor" is the first anchor that appear
+    // under the viewport top boundary. 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. Returns null for the first anchor, see
+        // https://github.com/facebook/docusaurus/issues/5318
+        return anchors[anchors.indexOf(nextVisibleAnchor) - 1] ?? null;
+    }
+    // no anchor under viewport top? (ie we are at the bottom of the page)
+    // => highlight the last anchor found
+    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;
+}
+export default 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) {
+            if (active) {
+                if (lastActiveLinkRef.current && lastActiveLinkRef.current !== link) {
+                    lastActiveLinkRef.current?.classList.remove(linkActiveClassName);
+                }
+                link.classList.add(linkActiveClassName);
+                lastActiveLinkRef.current = link;
+                // link.scrollIntoView({block: 'nearest'});
+            }
+            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]);
+}
+//# 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":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD;;;GAGG;AAEH,+EAA+E;AAC/E,0DAA0D;AAC1D,SAAS,4BAA4B,CAAC,OAAoB;IACxD,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC;IAC7C,IAAI,WAAW,EAAE;QACf,OAAO,4BAA4B,CAAC,OAAO,CAAC,UAAyB,CAAC,CAAC;KACxE;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,SAAS,mBAAmB,CAAC,YAAqB;IAChD,OAAO,YAAY,CAAC,GAAG,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC;AAC9E,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,eAAe,EACf,eAAe,GAIhB;IACC,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC,IAAI,eAAe,EAAE,CAAC,IAAI,CAAC,EAAE;QAC1D,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAChC;IAED,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAC3B,CAAC;AACrB,CAAC;AAED,SAAS,eAAe,CACtB,OAAsB,EACtB,EACE,eAAe,GAGhB;IAED,0EAA0E;IAC1E,2EAA2E;IAC3E,4EAA4E;IAC5E,UAAU;IACV,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;QAChD,MAAM,YAAY,GAAG,4BAA4B,CAAC,MAAM,CAAC,CAAC;QAC1D,OAAO,YAAY,CAAC,GAAG,IAAI,eAAe,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAI,iBAAiB,EAAE;QACrB,MAAM,YAAY,GAAG,4BAA4B,CAAC,iBAAiB,CAAC,CAAC;QACrE,0EAA0E;QAC1E,yEAAyE;QACzE,oBAAoB;QACpB,IAAI,mBAAmB,CAAC,YAAY,CAAC,EAAE;YACrC,OAAO,iBAAiB,CAAC;SAC1B;QACD,0EAA0E;QAC1E,yEAAyE;QACzE,uEAAuE;QACvE,iDAAiD;QACjD,qDAAqD;QACrD,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;KAChE;IACD,sEAAsE;IACtE,qCAAqC;IACrC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,kBAAkB,CAAC,IAAuB;IACjD,OAAO,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC7E,CAAC;AAED,SAAS,QAAQ,CAAC,aAAqB;IACrC,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,sBAAsB,CAAC,aAAa,CAAC,CACxB,CAAC;AAC3B,CAAC;AAED,SAAS,eAAe;IACtB,6CAA6C;IAC7C,0EAA0E;IAC1E,OAAO,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC,YAAY,CAAC;AACzD,CAAC;AAED,SAAS,qBAAqB;IAC5B,MAAM,kBAAkB,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAC7C,MAAM,EACJ,MAAM,EAAE,EAAC,YAAY,EAAC,GACvB,GAAG,cAAc,EAAE,CAAC;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACpE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AASD,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,MAAsC;IAEtC,MAAM,iBAAiB,GAAG,MAAM,CAAgC,SAAS,CAAC,CAAC;IAE3E,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,kCAAkC;YAClC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;SACjB;QAED,MAAM,EACJ,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,eAAe,GAChB,GAAG,MAAM,CAAC;QAEX,SAAS,qBAAqB,CAAC,IAAuB,EAAE,MAAe;YACrE,IAAI,MAAM,EAAE;gBACV,IAAI,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,KAAK,IAAI,EAAE;oBACnE,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;iBAClE;gBACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;gBACxC,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACjC,2CAA2C;aAC5C;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;aAC5C;QACH,CAAC;QAED,SAAS,gBAAgB;YACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;YACtC,MAAM,OAAO,GAAG,UAAU,CAAC,EAAC,eAAe,EAAE,eAAe,EAAC,CAAC,CAAC;YAC/D,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,EAAE;gBAC5C,eAAe,EAAE,kBAAkB,CAAC,OAAO;aAC5C,CAAC,CAAC;YACH,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAC3B,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,IAAI,YAAY,CAAC,EAAE,KAAK,kBAAkB,CAAC,IAAI,CAAC,CACvE,CAAC;YAEF,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,qBAAqB,CAAC,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC;YACnD,CAAC,CAAC,CAAC;QACL,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAEtD,gBAAgB,EAAE,CAAC;QAEnB,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC;AACnC,CAAC"}

package/lib/utils/useThemeConfig.d.ts

@@ -1,15 +1,23 @@
-import { PrismTheme } from 'prism-react-renderer';
-import { CSSProperties } from 'react';
+/**
+ * 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 type { PrismTheme } from 'prism-react-renderer';
+import type { 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;
@@ -25,12 +33,6 @@ export declare type ColorModeConfig = {
     defaultMode: 'light' | 'dark';
     disableSwitch: boolean;
     respectPrefersColorScheme: boolean;
-    switchConfig: {
-        darkIcon: string;
-        darkIconStyle: CSSProperties;
-        lightIcon: string;
-        lightIconStyle: CSSProperties;
-    };
 };
 export declare type AnnouncementBarConfig = {
     id: string;
@@ -52,20 +54,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,7 +90,12 @@ export declare type ThemeConfig = {
     prism: PrismConfig;
     footer?: Footer;
     hideableSidebar: boolean;
-    image: string;
-    metadatas: Array<Record<string, string>>;
+    autoCollapseSidebarCategories: boolean;
+    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;AAwHpE,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.15a2b59f9",
+  "version": "2.0.0-beta.17",
   "description": "Common code for Docusaurus themes.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch"
+    "build": "node copyUntypedFiles.mjs && tsc",
+    "watch": "node copyUntypedFiles.mjs && tsc --watch"
   },
   "publishConfig": {
     "access": "public"
@@ -18,23 +18,29 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.15a2b59f9",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.15a2b59f9",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.15a2b59f9",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.15a2b59f9",
-    "@docusaurus/types": "2.0.0-beta.15a2b59f9",
-    "tslib": "^2.1.0"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.17",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.17",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.17",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.17",
+    "clsx": "^1.1.1",
+    "parse-numeric-range": "^1.3.0",
+    "prism-react-renderer": "^1.3.1",
+    "tslib": "^2.3.1",
+    "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.15a2b59f9"
+    "@docusaurus/core": "2.0.0-beta.17",
+    "@docusaurus/types": "2.0.0-beta.17",
+    "@testing-library/react-hooks": "^7.0.2",
+    "fs-extra": "^10.0.1",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "prism-react-renderer": "^1.2.1",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14"
   },
-  "gitHead": "34881586224092fb9b5b2f455a46e19b3eee7f08"
+  "gitHead": "0032c0b0480083227af2e1b4da2d3ee6ce992403"
 }

package/src/components/Collapsible/index.tsx

@@ -0,0 +1,247 @@
+/**
+ * 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 ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  type RefObject,
+  type Dispatch,
+  type SetStateAction,
+  type ReactNode,
+  useLayoutEffect,
+} from 'react';
+
+const DefaultAnimationEasing = 'ease-in-out';
+
+export type UseCollapsibleConfig = {
+  initialState: boolean | (() => boolean);
+};
+
+export type UseCollapsibleReturns = {
+  collapsed: boolean;
+  setCollapsed: Dispatch<SetStateAction<boolean>>;
+  toggleCollapsed: () => void;
+};
+
+// This hook just define the state
+export function useCollapsible({
+  initialState,
+}: UseCollapsibleConfig): UseCollapsibleReturns {
+  const [collapsed, setCollapsed] = useState(initialState ?? false);
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((expanded) => !expanded);
+  }, []);
+
+  return {
+    collapsed,
+    setCollapsed,
+    toggleCollapsed,
+  };
+}
+
+const CollapsedStyles = {
+  display: 'none',
+  overflow: 'hidden',
+  height: '0px',
+} as const;
+
+const ExpandedStyles = {
+  display: 'block',
+  overflow: 'visible',
+  height: 'auto',
+} as const;
+
+function applyCollapsedStyle(el: HTMLElement, collapsed: boolean) {
+  const collapsedStyles = collapsed ? CollapsedStyles : ExpandedStyles;
+  el.style.display = collapsedStyles.display;
+  el.style.overflow = collapsedStyles.overflow;
+  el.style.height = collapsedStyles.height;
+}
+
+/*
+Lex111: Dynamic transition duration is used in Material design, this technique
+is good for a large number of items.
+https://material.io/archive/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
+https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43
+ */
+function getAutoHeightDuration(height: number) {
+  const constant = height / 36;
+  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+
+type CollapsibleAnimationConfig = {
+  duration?: number;
+  easing?: string;
+};
+
+function useCollapseAnimation({
+  collapsibleRef,
+  collapsed,
+  animation,
+}: {
+  collapsibleRef: RefObject<HTMLElement>;
+  collapsed: boolean;
+  animation?: CollapsibleAnimationConfig;
+}) {
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    const el = collapsibleRef.current!;
+
+    function getTransitionStyles() {
+      const height = el.scrollHeight;
+      const duration = animation?.duration ?? getAutoHeightDuration(height);
+      const easing = animation?.easing ?? DefaultAnimationEasing;
+      return {
+        transition: `height ${duration}ms ${easing}`,
+        height: `${height}px`,
+      };
+    }
+
+    function applyTransitionStyles() {
+      const transitionStyles = getTransitionStyles();
+      el.style.transition = transitionStyles.transition;
+      el.style.height = transitionStyles.height;
+    }
+
+    // On mount, we just apply styles, no animated transition
+    if (!mounted.current) {
+      applyCollapsedStyle(el, collapsed);
+      mounted.current = true;
+      return undefined;
+    }
+
+    el.style.willChange = 'height';
+
+    function startAnimation() {
+      const animationFrame = requestAnimationFrame(() => {
+        // When collapsing
+        if (collapsed) {
+          applyTransitionStyles();
+
+          requestAnimationFrame(() => {
+            el.style.height = CollapsedStyles.height;
+            el.style.overflow = CollapsedStyles.overflow;
+          });
+        }
+        // When expanding
+        else {
+          el.style.display = 'block';
+          requestAnimationFrame(() => {
+            applyTransitionStyles();
+          });
+        }
+      });
+
+      return () => cancelAnimationFrame(animationFrame);
+    }
+
+    return startAnimation();
+  }, [collapsibleRef, collapsed, animation]);
+}
+
+type CollapsibleElementType = React.ElementType<
+  Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd' | 'style'>
+>;
+
+// Prevent hydration layout shift before animations 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,
+  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: the "too complicated type" is produced from
+      // "CollapsibleElementType" being a huge union
+      ref={collapsibleRef}
+      style={disableSSRStyle ? undefined : getSSRStyle(collapsed)}
+      onTransitionEnd={(e: React.TransitionEvent) => {
+        if (e.propertyName !== 'height') {
+          return;
+        }
+
+        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 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} />;
+}