@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/lib/core/hooks/menu/__mocks__/use-mobile-menu-items.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenuItems = void 0;
+exports.useMobileMenuItems = jest.fn().mockReturnValue({
+    items: [
+        {
+            type: 'group',
+            label: 'New Section',
+            separatorLine: true,
+            items: [
+                {
+                    type: 'operation',
+                    label: 'New Section',
+                    separatorLine: true,
+                    items: [],
+                    active: false,
+                    hasActiveSubItem: false,
+                    httpVerb: 'GET',
+                },
+                {
+                    type: 'separator',
+                    label: 'New Section',
+                    separatorLine: true,
+                    items: [],
+                    active: false,
+                    hasActiveSubItem: false,
+                },
+            ],
+            active: false,
+            hasActiveSubItem: false,
+        },
+    ],
+});
+//# sourceMappingURL=use-mobile-menu-items.js.map

package/lib/core/hooks/menu/use-collapse.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Based on https://github.com/roginfarrer/collapsed/blob/main/packages/react-collapsed/src/index.ts
+ * Simplified for our usecase.
+ */
+import type React from 'react';
+import type { RefObject } from 'react';
+export interface UseCollapseProps {
+    isExpanded?: boolean;
+    collapseElRef: React.RefObject<HTMLElement>;
+    onTransitionStateChange?: (state: 'collapseEnd' | 'expandEnd' | 'collapseStart' | 'expandStart' | 'collapsing' | 'expanding') => void;
+}
+export declare function useCollapse({ isExpanded, collapseElRef, onTransitionStateChange: configOnTransitionStateChange, }: UseCollapseProps): {
+    isExpanded: boolean | undefined;
+    style: {
+        display: string;
+        height: string;
+        overflow: string;
+    } | {
+        display?: undefined;
+        height?: undefined;
+        overflow?: undefined;
+    };
+};
+export declare function getAutoHeightDuration(height: number | string): number;
+export declare function getElementHeight(el: RefObject<HTMLElement>): number;
+export declare function setAnimationTimeout(callback: () => void, timeout: number): {
+    id?: number | undefined;
+};
+export declare function clearAnimationTimeout(frame: {
+    id?: number;
+}): void;
+export declare function useEvent<T extends (...args: any[]) => any>(callback?: T): T;

package/lib/core/hooks/menu/use-collapse.js

@@ -0,0 +1,174 @@
+"use strict";
+/**
+ * Based on https://github.com/roginfarrer/collapsed/blob/main/packages/react-collapsed/src/index.ts
+ * Simplified for our usecase.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEvent = exports.clearAnimationTimeout = exports.setAnimationTimeout = exports.getElementHeight = exports.getAutoHeightDuration = exports.useCollapse = void 0;
+const react_1 = require("react");
+const useLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
+const easing = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const collapsedHeight = `0px`;
+function useCollapse({ isExpanded, collapseElRef, onTransitionStateChange: configOnTransitionStateChange = () => { }, }) {
+    const prevExpanded = (0, react_1.useRef)(isExpanded);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const onTransitionStateChange = useEvent(configOnTransitionStateChange);
+    // Animation frames
+    const frameId = (0, react_1.useRef)();
+    const endFrameId = (0, react_1.useRef)();
+    useLayoutEffect(() => {
+        const collapse = collapseElRef.current;
+        if (!collapse)
+            return;
+        if (isExpanded === prevExpanded.current)
+            return;
+        prevExpanded.current = isExpanded;
+        function getDuration(height) {
+            return getAutoHeightDuration(height);
+        }
+        const getTransitionStyles = (height) => `height ${getDuration(height)}ms ${easing}`;
+        const setTransitionEndTimeout = (duration) => {
+            function endTransition() {
+                if (isExpanded) {
+                    setStyles(collapse, {
+                        height: '',
+                        overflow: '',
+                        transition: '',
+                        display: '',
+                        pointerEvents: 'auto',
+                    });
+                    onTransitionStateChange('expandEnd');
+                }
+                else {
+                    setStyles(collapse, { transition: '', pointerEvents: '' });
+                    onTransitionStateChange('collapseEnd');
+                }
+                setIsAnimating(false);
+            }
+            if (endFrameId.current) {
+                clearAnimationTimeout(endFrameId.current);
+            }
+            endFrameId.current = setAnimationTimeout(endTransition, duration);
+        };
+        setIsAnimating(true);
+        if (isExpanded) {
+            frameId.current = requestAnimationFrame(() => {
+                onTransitionStateChange('expandStart');
+                setStyles(collapse, {
+                    display: 'block',
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
+                    height: collapsedHeight,
+                });
+                frameId.current = requestAnimationFrame(() => {
+                    onTransitionStateChange('expanding');
+                    const height = getElementHeight(collapseElRef);
+                    setTransitionEndTimeout(getDuration(height));
+                    if (collapseElRef.current) {
+                        // Order is important! Setting directly.
+                        collapseElRef.current.style.transition = getTransitionStyles(height);
+                        collapseElRef.current.style.height = `${height}px`;
+                    }
+                });
+            });
+        }
+        else {
+            frameId.current = requestAnimationFrame(() => {
+                onTransitionStateChange('collapseStart');
+                const height = getElementHeight(collapseElRef);
+                setTransitionEndTimeout(getDuration(height));
+                setStyles(collapse, {
+                    transition: getTransitionStyles(height),
+                    height: `${height}px`,
+                    pointerEvents: 'none',
+                });
+                frameId.current = requestAnimationFrame(() => {
+                    onTransitionStateChange('collapsing');
+                    setStyles(collapse, {
+                        height: collapsedHeight,
+                        overflow: 'hidden',
+                    });
+                });
+            });
+        }
+        return () => {
+            if (frameId.current)
+                cancelAnimationFrame(frameId.current);
+            if (endFrameId.current)
+                clearAnimationTimeout(endFrameId.current);
+        };
+    }, [isExpanded, collapseElRef, onTransitionStateChange]);
+    return {
+        isExpanded,
+        style: !isAnimating && !isExpanded
+            ? {
+                // collapsed and not animating
+                display: 'none',
+                height: collapsedHeight,
+                overflow: 'hidden',
+            }
+            : {},
+    };
+}
+exports.useCollapse = useCollapse;
+// https://github.com/mui-org/material-ui/blob/da362266f7c137bf671d7e8c44c84ad5cfc0e9e2/packages/material-ui/src/styles/transitions.js#L89-L98
+function getAutoHeightDuration(height) {
+    if (!height || typeof height === 'string') {
+        return 0;
+    }
+    const constant = height / 36;
+    return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+exports.getAutoHeightDuration = getAutoHeightDuration;
+function getElementHeight(el) {
+    var _a, _b;
+    // scrollHeight will give us the height of the element, even if it's not visible.
+    // clientHeight, offsetHeight, nor getBoundingClientRect().height will do so
+    return (_b = (_a = el.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
+}
+exports.getElementHeight = getElementHeight;
+function setAnimationTimeout(callback, timeout) {
+    const startTime = performance.now();
+    const frame = {};
+    function call() {
+        frame.id = requestAnimationFrame((now) => {
+            if (now - startTime > timeout) {
+                callback();
+            }
+            else {
+                call();
+            }
+        });
+    }
+    call();
+    return frame;
+}
+exports.setAnimationTimeout = setAnimationTimeout;
+function clearAnimationTimeout(frame) {
+    if (frame.id)
+        cancelAnimationFrame(frame.id);
+}
+exports.clearAnimationTimeout = clearAnimationTimeout;
+function setStyles(target, newStyles) {
+    if (!target)
+        return;
+    for (const property in newStyles) {
+        const value = newStyles[property];
+        if (value) {
+            target.style[property] = value;
+        }
+        else {
+            target.style.removeProperty(property);
+        }
+    }
+}
+function useEvent(callback) {
+    const ref = (0, react_1.useRef)(callback);
+    (0, react_1.useEffect)(() => {
+        ref.current = callback;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return (0, react_1.useCallback)(((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }), []);
+}
+exports.useEvent = useEvent;
+//# sourceMappingURL=use-collapse.js.map

package/lib/core/hooks/menu/use-menu-item-expanded.d.ts

@@ -0,0 +1,3 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ItemState } from '../../../core/types';
+export declare function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStateAction<boolean>>];

package/lib/core/hooks/menu/use-menu-item-expanded.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuItemExpanded = void 0;
+const react_1 = require("react");
+function isItemExpanded(item) {
+    return (item.active || item.hasActiveSubItem || item.expanded === 'true' || item.expanded === 'always');
+}
+function useMenuItemExpanded(item) {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(isItemExpanded(item));
+    // we keep separate controlled value here so controlled updates have the same lifecycle as uncontrolled (via useEffect)
+    // it's important for transitions
+    const [controlledValue, setControlledValue] = (0, react_1.useState)(isItemExpanded(item));
+    (0, react_1.useEffect)(() => {
+        setIsExpanded(controlledValue);
+    }, [controlledValue]);
+    (0, react_1.useEffect)(() => {
+        const newValue = isItemExpanded(item);
+        setIsExpanded(newValue);
+        setControlledValue(newValue);
+        // we have different sensitivity to changes for items from openapi-docs sidebar and for items from portal sidebar
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [!item.modified ? item : item.active, item.hasActiveSubItem, item.expanded]);
+    return [isExpanded, setControlledValue];
+}
+exports.useMenuItemExpanded = useMenuItemExpanded;
+//# sourceMappingURL=use-menu-item-expanded.js.map

package/lib/core/hooks/menu/use-mobile-menu-items.d.ts

@@ -0,0 +1,10 @@
+import { MobileMenuType } from '../../../core/constants';
+export declare const useMobileMenuItems: (menuType: MobileMenuType) => {
+    items: import("../..").ItemState[];
+    popDrilldownState: () => void;
+    pushDrilldownState: (drilldownDetails: import("../..").DrilldownMenuItemDetails) => void;
+    backLink: {
+        slug?: string | undefined;
+        label?: string | undefined;
+    } | undefined;
+};

package/lib/core/hooks/menu/use-mobile-menu-items.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenuItems = void 0;
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../../core/hooks");
+const constants_1 = require("../../../core/constants");
+const utils_1 = require("../../../core/utils");
+const MENU_SEPARATOR = {
+    type: 'separator',
+    separatorLine: true,
+};
+const useMobileMenuItems = (menuType) => {
+    var _a, _b, _c;
+    const { useTranslate, useI18nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, hooks_1.useThemeHooks)();
+    const { versions = [] } = usePageVersions() || {};
+    const { defaultLocale, currentLocale, locales } = useI18nConfig();
+    const { translate } = useTranslate();
+    const activeVersion = versions.find((version) => version.active);
+    const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);
+    const location = (0, react_router_dom_1.useLocation)();
+    const currentProduct = useCurrentProduct();
+    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const productThemeConfig = (0, hooks_1.useThemeConfig)();
+    const baseThemeConfig = (0, hooks_1.useThemeConfig)(false);
+    const baseNavItems = (((_b = baseThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || []);
+    const productNavItems = (hasProductNavbarOverride ? ((_c = productThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) || [] : []);
+    const menuItems = [];
+    if (menuType === constants_1.MobileMenuType.PAGE) {
+        if (activeVersion) {
+            // TODO: consider to refactor
+            const versionsSection = (0, utils_1.buildVersionSection)(translate, versions, activeVersion);
+            menuItems.push(...versionsSection);
+        }
+        if (menuItems.length && sidebarItems.length) {
+            menuItems.push(MENU_SEPARATOR);
+        }
+        menuItems.push(...sidebarItems);
+    }
+    else if (menuType === constants_1.MobileMenuType.PRODUCT) {
+        menuItems.push(...productNavItems);
+        if (menuItems.length && baseNavItems.length) {
+            menuItems.push(MENU_SEPARATOR);
+        }
+        if (baseNavItems.length) {
+            menuItems.push(...baseNavItems);
+        }
+    }
+    else if (menuType === constants_1.MobileMenuType.MAIN_MENU) {
+        const productMenuItems = Object.values(baseThemeConfig.products || {}).map((product) => ({
+            label: product.name,
+            link: product.link,
+            icon: product.icon,
+            type: 'link',
+        }));
+        if (productMenuItems.length) {
+            menuItems.push({
+                type: 'separator',
+                label: translate('theme.mobileMenu.products', 'Products'),
+            });
+            menuItems.push(...productMenuItems);
+        }
+        if (menuItems.length && baseNavItems.length) {
+            menuItems.push(MENU_SEPARATOR);
+        }
+        if (baseNavItems.length) {
+            menuItems.push(...baseNavItems);
+        }
+    }
+    const languagesMenu = (0, utils_1.buildLanguagesGroup)(locales, defaultLocale, currentLocale);
+    if (menuItems.length && languagesMenu) {
+        menuItems.push(MENU_SEPARATOR);
+    }
+    if (languagesMenu) {
+        menuItems.push(languagesMenu);
+    }
+    return {
+        items: (0, utils_1.mapNavbarItems)(menuItems, defaultLocale, currentLocale, locales, location),
+        popDrilldownState,
+        pushDrilldownState,
+        backLink,
+    };
+};
+exports.useMobileMenuItems = useMobileMenuItems;
+//# sourceMappingURL=use-mobile-menu-items.js.map

package/lib/core/hooks/menu/use-mobile-menu-levels.d.ts

@@ -0,0 +1,5 @@
+import { MobileMenuType } from '../../../core/constants';
+export declare const useMobileMenuLevels: () => {
+    label: string;
+    type: MobileMenuType;
+}[];

package/lib/core/hooks/menu/use-mobile-menu-levels.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenuLevels = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../../core/hooks");
+const constants_1 = require("../../../core/constants");
+const useMobileMenuLevels = () => {
+    var _a, _b;
+    const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems } = (0, hooks_1.useThemeHooks)();
+    const { versions = [] } = usePageVersions() || {};
+    const activeVersion = versions.find((version) => version === null || version === void 0 ? void 0 : version.active);
+    const { currentItems: sidebarItems } = useSidebarItems(activeVersion);
+    const { translate } = useTranslate();
+    const currentProduct = useCurrentProduct();
+    const productThemeConfig = (0, hooks_1.useThemeConfig)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const productNavItems = (hasProductNavbarOverride ? ((_b = productThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || [] : []);
+    const menuLevels = (0, react_1.useMemo)(() => {
+        const menuLevels = [
+            {
+                label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
+                type: constants_1.MobileMenuType.MAIN_MENU,
+            },
+        ];
+        if (currentProduct && productNavItems.length) {
+            menuLevels.push({
+                label: currentProduct.name,
+                type: constants_1.MobileMenuType.PRODUCT,
+            });
+        }
+        if (sidebarItems.length || activeVersion) {
+            menuLevels.push({
+                label: translate('theme.mobileMenu.previous', 'Previous'),
+                type: constants_1.MobileMenuType.PAGE,
+            });
+        }
+        return menuLevels;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location]);
+    return menuLevels;
+};
+exports.useMobileMenuLevels = useMobileMenuLevels;
+//# sourceMappingURL=use-mobile-menu-levels.js.map

package/lib/core/hooks/menu/use-nested-menu.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { MenuItemProps } from '../../../core/types';
+type NestedMenuProps = MenuItemProps & {
+    labelRef?: React.RefObject<HTMLElement>;
+    nestedMenuRef?: React.RefObject<HTMLDivElement>;
+};
+export declare function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps): {
+    isExpanded: boolean;
+    canUnmount: boolean;
+    style: {
+        display: string;
+        height: string;
+        overflow: string;
+    } | {
+        display?: undefined;
+        height?: undefined;
+        overflow?: undefined;
+    };
+    handleExpand: () => Promise<void>;
+};
+export {};

package/lib/core/hooks/menu/use-nested-menu.js

@@ -0,0 +1,73 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNestedMenu = void 0;
+const react_router_dom_1 = require("react-router-dom");
+const react_1 = require("react");
+const hooks_1 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
+function useNestedMenu({ item, labelRef, nestedMenuRef }) {
+    const [isExpanded, setIsExpanded] = (0, hooks_1.useMenuItemExpanded)(item);
+    // we need to know when the item is collapsed after transition to remove children from DOM
+    const [canUnmount, setCanUnmount] = (0, react_1.useState)(!isExpanded);
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const { style } = (0, hooks_1.useCollapse)({
+        isExpanded,
+        collapseElRef: nestedMenuRef || { current: null },
+        onTransitionStateChange: (state) => {
+            if (state === 'collapseEnd') {
+                setCanUnmount(true);
+            }
+            if (state === 'expandStart') {
+                setCanUnmount(false);
+            }
+        },
+    });
+    function scrollIfNeeded(el, centerIfNeeded = false) {
+        // @ts-ignore
+        if (typeof el.scrollIntoViewIfNeeded === 'function') {
+            // @ts-ignore
+            el.scrollIntoViewIfNeeded(centerIfNeeded);
+        }
+    }
+    // scroll to active element if needed
+    (0, react_1.useEffect)(() => {
+        if (item.active && labelRef && labelRef.current) {
+            scrollIfNeeded(labelRef.current, true); // center item on the first scroll
+        }
+    }, [labelRef, item.active]);
+    // scroll to expanded element if needed (position could change after collapse)
+    (0, react_1.useEffect)(() => {
+        if (isExpanded && labelRef && labelRef.current) {
+            scrollIfNeeded(labelRef.current);
+        }
+    }, [labelRef, isExpanded]);
+    const handleExpand = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        if (item.expanded === 'always' ||
+            (item.link && item.hasActiveSubItem && item.link !== location.pathname)) {
+            return;
+        }
+        const [firstChild] = item.items;
+        if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
+            yield (0, utils_1.loadAndNavigate)(navigate, firstChild.link);
+        }
+        setIsExpanded(!isExpanded);
+    }), [item, isExpanded, navigate, location.pathname, setIsExpanded]);
+    return {
+        isExpanded,
+        canUnmount,
+        style,
+        handleExpand,
+    };
+}
+exports.useNestedMenu = useNestedMenu;
+//# sourceMappingURL=use-nested-menu.js.map

package/lib/core/hooks/search/use-recent-searches.d.ts

@@ -0,0 +1,5 @@
+export declare const useRecentSearches: () => {
+    items: string[];
+    addSearchHistoryItem: (value: string) => void;
+    removeSearchHistoryItem: (value: string) => void;
+};

package/lib/core/hooks/search/use-recent-searches.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRecentSearches = void 0;
+const react_1 = require("react");
+const utils_1 = require("../../../core/utils");
+const RECENT_SEARCHES_KEY = 'recentSearches';
+const RECENT_SEARCHES_LIMIT = 5;
+function getRecentSearches() {
+    if (!(0, utils_1.isBrowser)())
+        return [];
+    const recentSearchesStr = window.localStorage.getItem(RECENT_SEARCHES_KEY);
+    if (!recentSearchesStr)
+        return [];
+    return JSON.parse(recentSearchesStr);
+}
+function updateRecentSearches(value, isAdd) {
+    if (!(0, utils_1.isBrowser)())
+        return [];
+    const recentSearches = getRecentSearches();
+    const valueIndex = recentSearches.indexOf(value);
+    if (valueIndex !== -1)
+        recentSearches.splice(valueIndex, 1);
+    if (isAdd)
+        recentSearches.unshift(value);
+    localStorage === null || localStorage === void 0 ? void 0 : localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(recentSearches.slice(0, RECENT_SEARCHES_LIMIT)));
+    return recentSearches;
+}
+const useRecentSearches = () => {
+    const [items, setItems] = (0, react_1.useState)(getRecentSearches());
+    const addSearchHistoryItem = (0, react_1.useCallback)((value) => {
+        setItems(updateRecentSearches(value, true));
+    }, []);
+    const removeSearchHistoryItem = (0, react_1.useCallback)((value) => {
+        setItems(updateRecentSearches(value, false));
+    }, []);
+    return { items, addSearchHistoryItem, removeSearchHistoryItem };
+};
+exports.useRecentSearches = useRecentSearches;
+//# sourceMappingURL=use-recent-searches.js.map

package/lib/core/hooks/search/use-suggested-pages.d.ts

@@ -0,0 +1,6 @@
+export declare const useSuggestedPages: () => {
+    [x: string]: unknown;
+    label?: string | undefined;
+    labelTranslationKey?: string | undefined;
+    page: string;
+}[] & any[];

package/lib/core/hooks/search/use-suggested-pages.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSuggestedPages = void 0;
+const hooks_1 = require("../../../core/hooks");
+const useSuggestedPages = () => {
+    var _a;
+    const themeSettings = (0, hooks_1.useThemeConfig)();
+    const suggestedPages = (_a = themeSettings.search) === null || _a === void 0 ? void 0 : _a.suggestedPages;
+    return suggestedPages || [];
+};
+exports.useSuggestedPages = useSuggestedPages;
+//# sourceMappingURL=use-suggested-pages.js.map

package/lib/core/hooks/use-active-heading.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveHeading = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+function useActiveHeading(contentElement, displayedHeaders) {
+    const [heading, setHeading] = (0, react_1.useState)(displayedHeaders.length > 1 ? displayedHeaders[0] : undefined);
+    const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
+    const headingElementsRef = (0, react_1.useRef)({});
+    const location = (0, react_router_dom_1.useLocation)();
+    const getVisibleHeadings = () => {
+        const visibleHeadings = [];
+        for (const key in headingElementsRef.current) {
+            const headingElement = headingElementsRef.current[key];
+            if (headingElement.isIntersecting) {
+                visibleHeadings.push(headingElement);
+            }
+        }
+        return visibleHeadings;
+    };
+    const getIndexFromId = (0, react_1.useCallback)((id) => {
+        return headingElements.findIndex((item) => item.id === id);
+    }, [headingElements]);
+    const findHeaders = (allContent) => {
+        const allHeaders = allContent.querySelectorAll('.heading-anchor');
+        return Array.from(allHeaders);
+    };
+    const intersectionCallback = (0, react_1.useCallback)((headings) => {
+        var _a;
+        headingElementsRef.current = headings.reduce((map, headingElement) => {
+            map[headingElement.target.id] = headingElement;
+            return map;
+        }, headingElementsRef.current);
+        const totalHeight = window.scrollY + window.innerHeight;
+        // handle bottom of the page
+        if (totalHeight >= document.body.scrollHeight) {
+            const newHeading = ((_a = headingElements[(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length) - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
+            setHeading(newHeading);
+            return;
+        }
+        const visibleHeadings = getVisibleHeadings();
+        if (!visibleHeadings.length) {
+            return;
+        }
+        if (visibleHeadings.length === 1) {
+            setHeading(visibleHeadings[0].target.id);
+            return;
+        }
+        visibleHeadings.sort((a, b) => {
+            return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+        });
+        setHeading(visibleHeadings[0].target.id);
+    }, [getIndexFromId, headingElements]);
+    (0, react_1.useEffect)(() => {
+        if (!contentElement) {
+            return;
+        }
+        setHeadingElements(findHeaders(contentElement));
+    }, [contentElement, location]);
+    (0, react_1.useEffect)(() => {
+        if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
+            return;
+        }
+        headingElementsRef.current = {};
+        // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
+        const observer = new IntersectionObserver(intersectionCallback, {
+            rootMargin: '0px 0px -30% 0px',
+            threshold: 1,
+        });
+        headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach((element) => {
+            if (displayedHeaders.includes(element.id)) {
+                observer.observe(element);
+            }
+        });
+        return () => observer.disconnect();
+    }, [headingElements, displayedHeaders, intersectionCallback]);
+    return heading;
+}
+exports.useActiveHeading = useActiveHeading;
+//# sourceMappingURL=use-active-heading.js.map