@brillout/docpress 0.8.14 → 0.8.15

package/dist/config/resolveHeadingsData.js

@@ -23,7 +23,7 @@ import { assert, isBrowser, jsxToTextContent } from '../utils/server';
 import { getConfig } from './getConfig';
 import pc from '@brillout/picocolors';
 import { parseTitle } from '../parseTitle';
-import { determineColumnEntries } from '../renderer/determineColumnEntries';
+import { determineNavItemsColumnLayout } from '../renderer/determineNavItemsColumnLayout';
 assert(!isBrowser());
 function resolveHeadingsData(pageContext) {
     var config = getConfig();
@@ -38,20 +38,18 @@ function resolveHeadingsData(pageContext) {
     var _b = getTitles(activeHeading, pageContext, config), documentTitle = _b.documentTitle, isLandingPage = _b.isLandingPage, pageTitle = _b.pageTitle;
     var pageSectionsResolved = getPageSectionsResolved(pageContext, activeHeading);
     var linksAll = __spreadArray(__spreadArray(__spreadArray([], pageSectionsResolved.map(pageSectionToLinkData), true), headingsResolved.map(headingToLinkData), true), headingsDetachedResolved.map(headingToLinkData), true);
-    // TODO/refactor: remove navItems
-    var navItems;
     var navItemsAll;
+    var navItemsDetached;
     {
         var navItemsPageSections = pageSectionsResolved
             .filter(function (pageSection) { return pageSection.pageSectionLevel === 2; })
             .map(pageSectionToNavItem);
         navItemsAll = headingsResolved.map(headingToNavItem);
-        determineColumnEntries(navItemsAll);
+        determineNavItemsColumnLayout(navItemsAll);
         if (isDetachedPage) {
-            navItems = __spreadArray([headingToNavItem(activeHeading)], navItemsPageSections, true);
+            navItemsDetached = __spreadArray([headingToNavItem(activeHeading)], navItemsPageSections, true);
         }
         else {
-            navItems = navItemsAll;
             var activeHeadingIndex_1 = navItemsAll.findIndex(function (navItem) { return navItem.url === pageContext.urlPathname; });
             assert(activeHeadingIndex_1 >= 0);
             navItemsPageSections.forEach(function (navItem, i) {
@@ -60,9 +58,8 @@ function resolveHeadingsData(pageContext) {
         }
     }
     var pageContextAddendum = {
-        isDetachedPage: isDetachedPage,
-        navItems: navItems,
         navItemsAll: navItemsAll,
+        navItemsDetached: navItemsDetached,
         linksAll: linksAll,
         isLandingPage: isLandingPage,
         pageTitle: pageTitle,

package/dist/config/resolvePageContext.d.ts

@@ -10,9 +10,8 @@ type Exports = {
 type PageContextOriginal = PageContextServer;
 type PageContextResolved = ReturnType<typeof resolvePageContext>;
 declare function resolvePageContext(pageContext: PageContextOriginal): {
-    isDetachedPage: boolean;
-    navItems: import("../navigation/Navigation").NavItem[];
-    navItemsAll: import("../navigation/Navigation").NavItemAll[];
+    navItemsAll: import("../navigation/Navigation").NavItem[];
+    navItemsDetached: import("../navigation/Navigation").NavItem[] | undefined;
     linksAll: import("../components").LinkData[];
     isLandingPage: boolean;
     pageTitle: string | null;

package/dist/docsearch/SearchLink.js

@@ -13,7 +13,7 @@ export { SearchLink };
 import React from 'react';
 import { openDocsearchModal } from './toggleDocsearchModal';
 function SearchLink(props) {
-    return (React.createElement("a", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer' }, props.style), className: "colorize-on-hover", onClick: function (ev) {
+    return (React.createElement("a", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer' }, props.style), className: ['colorize-on-hover', props.className].filter(Boolean).join(' '), onClick: function (ev) {
             ev.preventDefault();
             openDocsearchModal();
         }, "aria-label": 'Ctrl\xa0+\xa0K' }),

package/dist/navigation/Collapsible.d.ts

@@ -0,0 +1,10 @@
+export { Collapsible };
+import React from 'react';
+import './Collapsible.css';
+declare function Collapsible({ head, children, disabled, collapsedInit, marginBottomOnExpand, }: {
+    head: (onClick: () => void) => React.ReactNode;
+    children: React.ReactNode;
+    disabled: boolean;
+    collapsedInit: boolean;
+    marginBottomOnExpand?: number;
+}): React.JSX.Element;

package/dist/navigation/Collapsible.js

@@ -0,0 +1,35 @@
+export { Collapsible };
+import React, { useRef, useState } from 'react';
+import { cls } from '../utils/cls';
+import './Collapsible.css';
+function Collapsible(_a) {
+    var head = _a.head, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, collapsedInit = _a.collapsedInit, marginBottomOnExpand = _a.marginBottomOnExpand;
+    var _c = useState(collapsedInit), collapsed = _c[0], setCollapsed = _c[1];
+    var _d = useState(false), isAnimating = _d[0], setIsAnimating = _d[1];
+    var contentRef = useRef(null);
+    var onClick = function () {
+        if (!disabled) {
+            setIsAnimating(true);
+            if (!collapsed) {
+                // If expanding, set height to current scroll height before animation
+                contentRef.current.style.height = "".concat(contentRef.current.scrollHeight, "px");
+                // Force a reflow
+                contentRef.current.offsetHeight;
+            }
+            setCollapsed(function (prev) { return !prev; });
+        }
+    };
+    var onTransitionEnd = function () {
+        setIsAnimating(false);
+    };
+    var showContent = disabled ? true : !collapsed;
+    return (React.createElement("div", { className: cls(['collapsible', !disabled && (showContent ? 'collapsible-expanded' : 'collapsible-collapsed')]) },
+        head(onClick),
+        React.createElement("div", { ref: contentRef, onTransitionEnd: onTransitionEnd, style: {
+                height: !showContent ? 0 : isAnimating ? contentRef.current.scrollHeight : 'auto',
+                overflow: 'hidden',
+                transition: 'none 0.3s ease',
+                transitionProperty: 'height, margin-bottom',
+                marginBottom: (showContent && marginBottomOnExpand) || undefined,
+            }, "aria-expanded": showContent }, children)));
+}

package/dist/navigation/Navigation.d.ts

@@ -1,6 +1,5 @@
 export { NavigationContent };
 export type { NavItem };
-export type { NavItemAll };
 import React from 'react';
 import './Navigation.css';
 import '@docsearch/css';
@@ -12,8 +11,6 @@ type NavItem = {
     title: string;
     titleInNav: string;
     menuModalFullWidth?: true;
-};
-type NavItemAll = NavItem & {
     isColumnEntry?: ColumnMap;
 };
 declare function NavigationContent(props: {

package/dist/navigation/Navigation.js

@@ -19,64 +19,77 @@ import { usePageContext } from '../renderer/usePageContext';
 import '@docsearch/css';
 import '../global.d.ts';
 import { getViewportWidth } from '../utils/getViewportWidth';
-import { navWidthMax, navWidthMin } from '../Layout';
+import { navLeftWidthMax, navLeftWidthMin } from '../Layout';
+import { throttle } from '../utils/throttle';
+import { Collapsible } from './Collapsible';
 function NavigationContent(props) {
     var pageContext = usePageContext();
     var navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname);
     var navContent;
     if (!props.columnLayout) {
-        navContent = navItemsWithComputed
-            .filter(function (navItemGroup) { return !props.showOnlyRelevant || navItemGroup.isRelevant; })
-            .map(function (navItem, i) { return React.createElement(NavItemComponent, { navItem: navItem, key: i }); });
+        var navItemsRelevant = navItemsWithComputed;
+        if (props.showOnlyRelevant)
+            navItemsRelevant = navItemsRelevant.filter(function (navItemGroup) { return navItemGroup.isRelevant; });
+        navContent = navItemsRelevant.map(function (navItem, i) { return React.createElement(NavItemComponent, { navItem: navItem, key: i }); });
     }
     else {
         assert(!props.showOnlyRelevant);
-        navContent = React.createElement(NavigationColumnLayout, { navItemsWithComputed: navItemsWithComputed });
+        navContent = React.createElement(NavigationWithColumnLayout, { navItemsWithComputed: navItemsWithComputed });
     }
     return (React.createElement("div", { className: "navigation-content", style: { marginTop: 10 } }, navContent));
 }
-function NavigationColumnLayout(props) {
+function NavigationWithColumnLayout(props) {
     var _a = useState(), viewportWidth = _a[0], setViewportWidth = _a[1];
     var updateviewportwidth = function () { return setViewportWidth(getViewportWidth()); };
     useEffect(function () {
         updateviewportwidth();
-        window.addEventListener('resize', updateviewportwidth, { passive: true });
+        window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true });
     });
     var navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth);
-    var margin = 40;
-    return (React.createElement(React.Fragment, null, navItemsByColumnLayouts.map(function (_a, i) {
-        var columns = _a.columns, isFullWidth = _a.isFullWidth;
-        return (React.createElement("div", { key: i, style: {
-                display: 'flex',
-                width: columns.length * (navWidthMax + 20),
-                justifyContent: 'space-between',
-                maxWidth: '100%',
-                margin: 'auto',
-                marginTop: i === 0 ? -1 * margin : undefined,
-                marginBottom: margin,
-            } },
-            columns.map(function (columnEntry, j) { return (React.createElement("div", { key: j, style: {
-                    flexGrow: 1,
-                    maxWidth: navWidthMax,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
-                } }, columnEntry.map(function (navItems, k) { return (React.createElement("div", { key: k, style: { marginTop: isFullWidth ? undefined : margin } },
-                navItems.map(function (navItem, l) { return (React.createElement(NavItemComponent, { navItem: navItem, key: l })); }),
-                React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItems[0] }))); }))); }),
-            React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : columns[0][0][0] })));
-    })));
+    return (React.createElement(React.Fragment, null, navItemsByColumnLayouts.map(function (columnLayout, i) { return (React.createElement("div", { key: i }, columnLayout.isFullWidthCategory ? (React.createElement("div", { style: { marginTop: 0 } },
+        React.createElement(ColumnsWrapper, { numberOfColumns: columnLayout.columns.length },
+            React.createElement(Collapsible, { head: function (onClick) { return React.createElement(NavItemComponent, { navItem: columnLayout.navItemLevel1, onClick: onClick }); }, disabled: columnLayout.columns.length > 1, collapsedInit: !columnLayout.navItemLevel1.isRelevant, marginBottomOnExpand: 10 },
+                React.createElement(ColumnsLayout, { className: "collapsible" },
+                    columnLayout.columns.map(function (column, j) { return (React.createElement(Column, { key: j }, column.navItems.map(function (navItem, k) { return (React.createElement(NavItemComponent, { key: k, navItem: navItem })); }))); }),
+                    React.createElement(CategoryBorder, { navItemLevel1: columnLayout.navItemLevel1 })))))) : (React.createElement(ColumnsWrapper, { numberOfColumns: columnLayout.columns.length },
+        React.createElement(ColumnsLayout, null, columnLayout.columns.map(function (column, j) { return (React.createElement(Column, { key: j }, column.categories.map(function (category, k) { return (React.createElement("div", { key: k, style: { marginBottom: 0 } },
+            React.createElement(Collapsible, { head: function (onClick) { return React.createElement(NavItemComponent, { navItem: category.navItemLevel1, onClick: onClick }); }, disabled: columnLayout.columns.length > 1, collapsedInit: !category.navItemLevel1.isRelevant, marginBottomOnExpand: 40 },
+                category.navItems.map(function (navItem, l) { return (React.createElement(NavItemComponent, { key: l, navItem: navItem })); }),
+                React.createElement(CategoryBorder, { navItemLevel1: category.navItemLevel1 })))); }))); })))))); })));
+}
+function Column(_a) {
+    var children = _a.children;
+    return (React.createElement("div", { style: {
+            flexGrow: 1,
+            maxWidth: navLeftWidthMax,
+            display: 'flex',
+            flexDirection: 'column',
+        } }, children));
+}
+function ColumnsWrapper(_a) {
+    var children = _a.children, numberOfColumns = _a.numberOfColumns;
+    return (React.createElement("div", { style: {
+            width: numberOfColumns * (navLeftWidthMax + 20),
+            maxWidth: '100%',
+            margin: 'auto',
+        } }, children));
+}
+function ColumnsLayout(_a) {
+    var children = _a.children, className = _a.className;
+    return (React.createElement("div", { className: className, style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+        } }, children));
 }
 function CategoryBorder(_a) {
     var navItemLevel1 = _a.navItemLevel1;
-    return !navItemLevel1 ? null : (React.createElement("div", { className: "category-border", style: {
-            background: navItemLevel1.color,
-        } }));
+    assert(navItemLevel1.level === 1);
+    return React.createElement("div", { className: "category-border", style: { background: navItemLevel1.color } });
 }
 function NavItemComponent(_a) {
     var _b;
     var _c;
-    var navItem = _a.navItem;
+    var navItem = _a.navItem, onClick = _a.onClick;
     assert([1, 2, 3, 4].includes(navItem.level), navItem);
     var titleJsx = parseTitle(navItem.title);
     var titleInNavJsx = parseTitle(navItem.titleInNav);
@@ -93,9 +106,16 @@ function NavItemComponent(_a) {
             */
         ].join(' '));
     }
+    var children = titleInNavJsx;
+    if (navItem.level === 1) {
+        children = (React.createElement(React.Fragment, null,
+            children,
+            React.createElement(Chevron, { className: "collapsible-icon", height: 9 })));
+    }
     var props = {
         href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
-        children: titleInNavJsx,
+        children: children,
+        onClick: onClick,
         className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
@@ -121,20 +141,47 @@ function NavItemComponent(_a) {
 function getNavItemsByColumnLayouts(navItems, viewportWidth) {
     if (viewportWidth === void 0) { viewportWidth = 0; }
     var navItemsByColumnEntries = getNavItemsByColumnEntries(navItems);
-    var numberOfColumnsMax = Math.floor(viewportWidth / navWidthMin) || 1;
+    var numberOfColumnsMax = Math.floor(viewportWidth / navLeftWidthMin) || 1;
     var navItemsByColumnLayouts = navItemsByColumnEntries.map(function (_a) {
-        var columnEntries = _a.columnEntries, isFullWidth = _a.isFullWidth;
+        var columnEntries = _a.columnEntries, isFullWidthCategory = _a.isFullWidthCategory;
         var numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length);
-        var columns = [];
-        columnEntries.forEach(function (columnEntry) {
-            var _a;
-            var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
-            assert(idx >= 0);
-            (_a = columns[idx]) !== null && _a !== void 0 ? _a : (columns[idx] = []);
-            columns[idx].push(columnEntry.navItems);
-        });
-        var navItemsByColumnLayout = { columns: columns, isFullWidth: isFullWidth };
-        return navItemsByColumnLayout;
+        if (!isFullWidthCategory) {
+            var columns_1 = [];
+            columnEntries.forEach(function (columnEntry) {
+                var _a;
+                var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
+                assert(idx >= 0);
+                (_a = columns_1[idx]) !== null && _a !== void 0 ? _a : (columns_1[idx] = { categories: [] });
+                var navItemLevel1 = columnEntry.navItems[0];
+                var navItems = columnEntry.navItems.slice(1);
+                columns_1[idx].categories.push({ navItemLevel1: navItemLevel1, navItems: navItems });
+            });
+            var navItemsByColumnLayout = { columns: columns_1, isFullWidthCategory: isFullWidthCategory };
+            return navItemsByColumnLayout;
+        }
+        else {
+            var navItemLevel1_1;
+            var columns_2 = [];
+            columnEntries.forEach(function (columnEntry, i) {
+                var _a;
+                var _b;
+                var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
+                assert(idx >= 0);
+                (_b = columns_2[idx]) !== null && _b !== void 0 ? _b : (columns_2[idx] = { navItems: [] });
+                var navItems = columnEntry.navItems;
+                if (i === 0) {
+                    navItemLevel1_1 = navItems[0];
+                    navItems = navItems.slice(1);
+                }
+                (_a = columns_2[idx].navItems).push.apply(_a, navItems);
+            });
+            var navItemsByColumnLayout = {
+                columns: columns_2,
+                navItemLevel1: navItemLevel1_1,
+                isFullWidthCategory: isFullWidthCategory,
+            };
+            return navItemsByColumnLayout;
+        }
     });
     return navItemsByColumnLayouts;
 }
@@ -142,17 +189,17 @@ function getNavItemsByColumnEntries(navItems) {
     var navItemsByColumnEntries = [];
     var columnEntries = [];
     var columnEntry;
-    var isFullWidth;
+    var isFullWidthCategory;
     navItems.forEach(function (navItem) {
         if (navItem.level === 1) {
-            var isFullWidthPrevious = isFullWidth;
-            isFullWidth = !!navItem.menuModalFullWidth;
-            if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-                navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidth: isFullWidthPrevious });
+            var isFullWidthCategoryPrevious = isFullWidthCategory;
+            isFullWidthCategory = !!navItem.menuModalFullWidth;
+            if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
+                navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious });
                 columnEntries = [];
             }
         }
-        assert(isFullWidth !== undefined);
+        assert(isFullWidthCategory !== undefined);
         if (navItem.isColumnEntry) {
             assert(navItem.level === 1 || navItem.level === 4);
             columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry };
@@ -163,8 +210,8 @@ function getNavItemsByColumnEntries(navItems) {
             columnEntry.navItems.push(navItem);
         }
     });
-    assert(isFullWidth !== undefined);
-    navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidth: isFullWidth });
+    assert(isFullWidthCategory !== undefined);
+    navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidthCategory: isFullWidthCategory });
     return navItemsByColumnEntries;
 }
 function getNavItemsWithComputed(navItems, currentUrl) {
@@ -202,3 +249,7 @@ function getNavItemsWithComputed(navItems, currentUrl) {
     }
     return navItemsWithComputed;
 }
+function Chevron(props) {
+    return (React.createElement("svg", __assign({ viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { fill: "#aaa", d: "M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z" })));
+}

package/dist/renderer/determineNavItemsColumnLayout.d.ts

@@ -0,0 +1,3 @@
+export { determineNavItemsColumnLayout };
+import { type NavItem } from '../navigation/Navigation';
+declare function determineNavItemsColumnLayout(navItems: NavItem[]): undefined;

package/dist/renderer/{determineColumnEntries.js → determineNavItemsColumnLayout.js}

@@ -18,10 +18,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-export { determineColumnEntries };
+export { determineNavItemsColumnLayout };
 import { assert, assertUsage, isBrowser } from '../utils/server';
 assert(!isBrowser());
-function determineColumnEntries(navItems) {
+function determineNavItemsColumnLayout(navItems) {
+    var columnLayouts = getColumnEntries(navItems);
+    columnLayouts.forEach(function (columnEntries) {
+        var _loop_1 = function (numberOfColumns) {
+            var columnMapping = determineColumnLayout(columnEntries.map(function (columnEntry) { return columnEntry.numberOfEntries; }), numberOfColumns);
+            columnEntries.forEach(function (columnEntry, i) {
+                var _a;
+                var _b;
+                (_a = (_b = columnEntry.navItemLeader).isColumnEntry) !== null && _a !== void 0 ? _a : (_b.isColumnEntry = {});
+                columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnMapping[i];
+            });
+        };
+        for (var numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
+            _loop_1(numberOfColumns);
+        }
+    });
+}
+function getColumnEntries(navItems) {
     var navItemsWithLength = navItems.map(function (navItem) { return (__assign(__assign({}, navItem), { numberOfHeadings: navItem.level === 1 || navItem.level === 4 ? 0 : null })); });
     var navItemLevel1;
     var navItemLevel4;
@@ -47,31 +64,33 @@ function determineColumnEntries(navItems) {
     });
     var columnLayouts = [];
     var columnEntries = [];
-    var isFullWidth;
+    var isFullWidthCategory;
     navItemsWithLength.forEach(function (navItem, i) {
-        var isFullWidthBegin = false;
+        var isFullWidthCategoryBegin = false;
         if (navItem.level === 1) {
-            var isFullWidthPrevious = isFullWidth;
-            isFullWidth = !!navItem.menuModalFullWidth;
-            if (isFullWidth)
-                isFullWidthBegin = true;
-            if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
+            var isFullWidthCategoryPrevious = isFullWidthCategory;
+            isFullWidthCategory = !!navItem.menuModalFullWidth;
+            if (isFullWidthCategory)
+                isFullWidthCategoryBegin = true;
+            if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
                 columnLayouts.push(columnEntries);
                 columnEntries = [];
             }
         }
         var navItemPrevious = navItemsWithLength[i - 1];
         var navItemNext = navItemsWithLength[i + 1];
-        if (!isFullWidth ? navItem.level === 1 : (navItem.level === 4 && navItemPrevious.level !== 1) || isFullWidthBegin) {
-            if (isFullWidth) {
-                assert(navItem.level === 4 || (navItem.level === 1 && isFullWidthBegin));
+        if (!isFullWidthCategory
+            ? navItem.level === 1
+            : (navItem.level === 4 && navItemPrevious.level !== 1) || isFullWidthCategoryBegin) {
+            if (isFullWidthCategory) {
+                assert(navItem.level === 4 || (navItem.level === 1 && isFullWidthCategoryBegin));
             }
             else {
                 assert(navItem.level === 1);
             }
             var numberOfHeadings = navItem.numberOfHeadings;
             assert(numberOfHeadings !== null);
-            if (isFullWidthBegin) {
+            if (isFullWidthCategoryBegin) {
                 assert(navItem.level === 1);
                 assertUsage(navItemNext && navItemNext.level === 4, 
                 // We can lift this requirement, but it isn't trivial to implement.
@@ -84,22 +103,9 @@ function determineColumnEntries(navItems) {
     });
     assert(columnEntries);
     columnLayouts.push(columnEntries);
-    columnLayouts.forEach(function (columnEntries) {
-        var _loop_1 = function (numberOfColumns) {
-            var columnsIdMap = determineColumns(columnEntries.map(function (columnEntry) { return columnEntry.numberOfEntries; }), numberOfColumns);
-            columnEntries.forEach(function (columnEntry, i) {
-                var _a;
-                var _b;
-                (_a = (_b = columnEntry.navItemLeader).isColumnEntry) !== null && _a !== void 0 ? _a : (_b.isColumnEntry = {});
-                columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnsIdMap[i];
-            });
-        };
-        for (var numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
-            _loop_1(numberOfColumns);
-        }
-    });
+    return columnLayouts;
 }
-function determineColumns(columnsUnmerged, numberOfColumns) {
+function determineColumnLayout(columnsUnmerged, numberOfColumns) {
     assert(numberOfColumns <= columnsUnmerged.length);
     var columnsMergingInit = columnsUnmerged.map(function (columnHeight, i) { return ({
         columnIdsMerged: [i],

package/dist/renderer/usePageContext.d.ts

@@ -1,8 +1,8 @@
+export { usePageContext };
+export { PageContextProvider };
 import React from 'react';
 import type { PageContextResolved } from '../config/resolvePageContext';
 import type { PageContext } from 'vike/types';
-export { PageContextProvider };
-export { usePageContext };
 declare function PageContextProvider({ pageContext, children, }: {
     pageContext: PageContextResolved;
     children: React.ReactNode;

package/dist/renderer/usePageContext.js

@@ -1,8 +1,6 @@
-// `usePageContext` allows us to access `pageContext` in any React component.
-// More infos: https://vike.dev/pageContext-anywhere
-import React, { useContext } from 'react';
-export { PageContextProvider };
 export { usePageContext };
+export { PageContextProvider };
+import React, { useContext } from 'react';
 var Context = React.createContext(undefined);
 function PageContextProvider(_a) {
     var pageContext = _a.pageContext, children = _a.children;

package/dist/utils/Style.d.ts

@@ -0,0 +1,5 @@
+export { Style };
+import React from 'react';
+declare function Style({ children }: {
+    children: string;
+}): React.JSX.Element;

package/dist/utils/Style.js

@@ -0,0 +1,6 @@
+export { Style };
+import React from 'react';
+function Style(_a) {
+    var children = _a.children;
+    return React.createElement("style", { dangerouslySetInnerHTML: { __html: children } });
+}

package/dist/utils/cls.d.ts

@@ -0,0 +1,3 @@
+export { cls };
+type Class = string | boolean | undefined;
+declare function cls(className: Class | Class[]): string;

package/dist/utils/cls.js

@@ -0,0 +1,5 @@
+export { cls };
+function cls(className) {
+    var classNames = Array.isArray(className) ? className : [className];
+    return classNames.filter(Boolean).join(' ');
+}

package/dist/utils/throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle<T extends (...args: any[]) => void>(func: T, limit: number): T;

package/dist/utils/throttle.js

@@ -0,0 +1,14 @@
+export function throttle(func, limit) {
+    var inThrottle;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (!inThrottle) {
+            func.apply(this, args);
+            inThrottle = true;
+            setTimeout(function () { return (inThrottle = false); }, limit);
+        }
+    };
+}

package/docsearch/SearchLink.tsx

@@ -15,7 +15,7 @@ function SearchLink(props: PropsAnchor) {
         cursor: 'pointer',
         ...props.style,
       }}
-      className="colorize-on-hover"
+      className={['colorize-on-hover', props.className].filter(Boolean).join(' ')}
       onClick={(ev) => {
         ev.preventDefault()
         openDocsearchModal()

package/global.d.ts

@@ -2,6 +2,6 @@
 import 'react'
 declare module 'react' {
   interface CSSProperties {
-    [key: `--${string}`]: string | number
+    [key: `--${string}`]: string | number | undefined
   }
 }

package/navigation/Collapsible.css

@@ -0,0 +1,11 @@
+.collapsible-icon {
+  display: none;
+}
+.collapsible-expanded .collapsible-icon,
+.collapsible-collapsed .collapsible-icon {
+  transition: transform 0.3s ease-in-out !important;
+  display: initial;
+}
+.collapsible-collapsed .collapsible-icon {
+  transform: rotate(-90deg);
+}

package/navigation/Collapsible.tsx

@@ -0,0 +1,64 @@
+export { Collapsible }
+
+import React, { useRef, useState } from 'react'
+import { cls } from '../utils/cls'
+import './Collapsible.css'
+
+function Collapsible({
+  head,
+  children,
+  disabled = false,
+  collapsedInit,
+  marginBottomOnExpand,
+}: {
+  head: (onClick: () => void) => React.ReactNode
+  children: React.ReactNode
+  disabled: boolean
+  collapsedInit: boolean
+  marginBottomOnExpand?: number
+}) {
+  const [collapsed, setCollapsed] = useState(collapsedInit)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const onClick = () => {
+    if (!disabled) {
+      setIsAnimating(true)
+      if (!collapsed) {
+        // If expanding, set height to current scroll height before animation
+        contentRef.current!.style.height = `${contentRef.current!.scrollHeight}px`
+        // Force a reflow
+        contentRef.current!.offsetHeight
+      }
+      setCollapsed((prev) => !prev)
+    }
+  }
+
+  const onTransitionEnd = () => {
+    setIsAnimating(false)
+  }
+
+  const showContent = disabled ? true : !collapsed
+
+  return (
+    <div
+      className={cls(['collapsible', !disabled && (showContent ? 'collapsible-expanded' : 'collapsible-collapsed')])}
+    >
+      {head(onClick)}
+      <div
+        ref={contentRef}
+        onTransitionEnd={onTransitionEnd}
+        style={{
+          height: !showContent ? 0 : isAnimating ? contentRef.current!.scrollHeight : 'auto',
+          overflow: 'hidden',
+          transition: 'none 0.3s ease',
+          transitionProperty: 'height, margin-bottom',
+          marginBottom: (showContent && marginBottomOnExpand) || undefined,
+        }}
+        aria-expanded={showContent}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}