@redocly/theme 0.56.0-rc.2 → 0.56.0

package/lib/components/PageActions/PageActionsMenuItem.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActionsMenuItem = PageActionsMenuItem;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
+function PageActionsMenuItem(props) {
+    const { pageAction } = props;
+    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "PageActions/PageActionsMenuItem" },
+        react_1.default.createElement(IconWrapper, null,
+            react_1.default.createElement(pageAction.iconComponent, null)),
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(Title, null,
+                pageAction.title,
+                'link' in pageAction ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { color: "var(--page-actions-menu-item-title-icon-color)", size: "14px" })) : null),
+            react_1.default.createElement(Description, null, pageAction.description))));
+}
+const MenuItemWrapper = styled_components_1.default.div `
+  padding: var(--page-actions-menu-item-padding);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--page-actions-menu-item-gap);
+`;
+const IconWrapper = styled_components_1.default.div `
+  color: var(--page-actions-menu-item-icon-color);
+  border: 1px solid var(--page-actions-menu-item-icon-border-color);
+  border-radius: var(--page-actions-menu-item-icon-border-radius);
+  width: var(--page-actions-menu-item-icon-wrapper-size);
+  height: var(--page-actions-menu-item-icon-wrapper-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-actions-menu-item-text-gap);
+`;
+const Title = styled_components_1.default.div `
+  font-weight: var(--page-actions-menu-item-title-font-weight);
+  font-size: var(--page-actions-menu-item-title-font-size);
+  line-height: var(--page-actions-menu-item-title-line-height);
+  color: var(--page-actions-menu-item-title-color);
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-menu-item-title-icon-gap);
+`;
+const Description = styled_components_1.default.div `
+  font-weight: var(--page-actions-menu-item-description-font-weight);
+  font-size: var(--page-actions-menu-item-description-font-size);
+  line-height: var(--page-actions-menu-item-description-line-height);
+  color: var(--page-actions-menu-item-description-color);
+`;
+//# sourceMappingURL=PageActionsMenuItem.js.map

package/lib/components/PageActions/variables.d.ts

@@ -0,0 +1 @@
+export declare const pageActions: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/PageActions/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const pageActionsDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/PageActions/variables.dark.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageActionsDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.pageActionsDarkMode = (0, styled_components_1.css) `
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-5);
+  --page-actions-menu-item-description-color: var(--text-color-secondary);
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/PageActions/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageActions = void 0;
+const styled_components_1 = require("styled-components");
+exports.pageActions = (0, styled_components_1.css) `
+  /* Minimum spacing between page actions and heading text */
+  --page-actions-padding-left: var(--spacing-sm);
+
+  --page-actions-button-text-color: var(--text-color-secondary);
+  --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
+
+  --page-actions-menu-item-padding: 3px 0;
+  --page-actions-menu-item-gap: var(--spacing-xs);
+  --page-actions-menu-item-icon-color: var(--icon-color-secondary);
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-3);
+  --page-actions-menu-item-icon-border-radius: var(--border-radius);
+  --page-actions-menu-item-icon-wrapper-size: 28px;
+
+  --page-actions-menu-item-text-gap: 2px;
+
+  --page-actions-menu-item-title-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-title-font-size: var(--font-size-base);
+  --page-actions-menu-item-title-line-height: var(--line-height-base);
+  --page-actions-menu-item-title-color: var(--text-color-secondary);
+
+  --page-actions-menu-item-title-icon-gap: var(--spacing-xxs);
+  --page-actions-menu-item-title-icon-color: var(--icon-color-secondary);
+
+  --page-actions-menu-item-description-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-description-font-size: var(--font-size-sm);
+  --page-actions-menu-item-description-line-height: var(--line-height-sm);
+  --page-actions-menu-item-description-color: var(--text-color-description);
+
+  --page-actions-processing-icon-color: var(--icon-color-interactive);
+  --page-actions-done-icon-color: var(--color-success-base);
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Search/SearchDialog.js

@@ -115,9 +115,9 @@ function SearchDialog({ onClose, className }) {
                     payload: {
                         query,
                         url: item.document.url,
-                        total_results: results.length.toString(),
+                        totalResults: results.length.toString(),
                         index: index.toString(),
-                        search_engine: mode,
+                        searchEngine: mode,
                     },
                 });
                 onClose();

package/lib/components/Select/variables.js

@@ -12,7 +12,7 @@ exports.select = (0, styled_components_1.css) `
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-
+  
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -40,7 +40,7 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End

package/lib/components/TableOfContent/TableOfContent.js

@@ -41,21 +41,24 @@ function TableOfContent(props) {
     const { markdown: { toc = {} } = {} } = (0, hooks_1.useThemeConfig)();
     const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.depth || 3);
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
-    const activeHeadingId = (0, hooks_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
+    const { heading: activeHeading, handleHeadingClick } = (0, hooks_1.useActiveHeading)(contentWrapper, displayedHeadings);
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
-            React.createElement(TableOfContentItems, { ref: sidebar },
-                displayedHeadings.length ? (React.createElement(TableOfContentHeader, { "data-translation-key": "toc.header" }, translate('toc.header', toc.header || 'On this page'))) : null,
-                displayedHeadings.map((heading, idx) => {
-                    if (!heading) {
-                        return null;
-                    }
-                    const href = '#' + heading.id;
-                    return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: () => telemetry.send({ type: 'toc_item.clicked' }) }));
-                })))));
+    return (React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
+        React.createElement(TableOfContentItems, { ref: sidebar },
+            displayedHeadings.length ? (React.createElement(TableOfContentHeader, { "data-translation-key": "toc.header" }, translate('toc.header', toc.header || 'On this page'))) : null,
+            displayedHeadings.map((heading, idx) => {
+                if (!heading) {
+                    return null;
+                }
+                const href = '#' + heading.id;
+                return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeading === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: (e) => {
+                        e.preventDefault();
+                        telemetry.send({ type: 'toc_item.clicked' });
+                        handleHeadingClick(heading.id);
+                    } }));
+            }))));
 }
 const TableOfContentMenu = styled_components_1.default.aside `
   background-color: var(--toc-bg-color);

package/lib/components/Tag/Tag.d.ts

@@ -26,7 +26,8 @@ export type TagProps = {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     onClose?: (event: React.MouseEvent) => void;
     maxLength?: number;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
 };
-export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, ...otherProps }: TagProps): JSX.Element;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -21,7 +21,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength"]);
+    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform"]);
     const truncateText = (text, maxLen) => {
         if (text.length <= maxLen)
             return text;
@@ -74,7 +74,7 @@ function Tag(_a) {
         }
         return children;
     };
-    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable }, otherProps),
+    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
         react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
@@ -128,7 +128,7 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   font-weight: var(--tag-font-weight);
   line-height: var(--tag-line-height);
   box-shadow: var(--tag-box-shadow);
-  text-transform: var(--tag-text-transform);
+  ${({ textTransform }) => `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
   background-color: var(--tag-bg-color);

package/lib/components/Tag/variables.js

@@ -183,6 +183,20 @@ exports.tag = (0, styled_components_1.css) `
     --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
   }
 
+  .tag-raspberry {
+    --tag-color: var(--color-raspberry-7); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-raspberry-3); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-raspberry-1); // @presenter Color
+  }
+
+  .tag-carrot {
+    --tag-color: var(--color-carrot-8); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-carrot-6); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+  }
+
   /**
     * @tokens Tag http
     */

package/lib/core/constants/catalog.d.ts

@@ -1,4 +1,4 @@
-import type { EntityRelationType } from '../../core/types';
+import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
 export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;

package/lib/core/constants/common.d.ts

@@ -1,6 +1,10 @@
 export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
 export declare const DEFAULT_LOCALE_PLACEHOLDER = "default_locale";
 export declare const CONTENT_ID = "content";
+export declare const ICONS_CDN_URL: {
+    'font-awesome': string;
+    code: string;
+};
 export declare enum FEEDBACK_TYPES {
     RATING = "rating",
     SENTIMENT = "sentiment",

package/lib/core/constants/common.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
 exports.CONTENT_ID = 'content';
+exports.ICONS_CDN_URL = {
+    'font-awesome': 'https://cdn.redocly.com/icons/fa/7.0.0',
+    code: 'https://cdn.redocly.com/icons/code/5.24.0',
+};
 var FEEDBACK_TYPES;
 (function (FEEDBACK_TYPES) {
     FEEDBACK_TYPES["RATING"] = "rating";

package/lib/core/contexts/CodeSnippetContext.d.ts

@@ -0,0 +1,7 @@
+export type CodeSnippetContextType = {
+    activeSnippetName: string;
+    setActiveSnippetName: (name: string) => void;
+};
+export declare const CODE_GROUP_SNIPPET_NAME_KEY = "redocly:codeGroupSnippetName";
+export declare const CodeSnippetContext: import("react").Context<CodeSnippetContextType | null>;
+export declare function useActiveCodeSnippetName(mode: 'tabs' | 'dropdown'): [string, (name: string) => void];

package/lib/core/contexts/CodeSnippetContext.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
+exports.useActiveCodeSnippetName = useActiveCodeSnippetName;
+const react_1 = require("react");
+exports.CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
+exports.CodeSnippetContext = (0, react_1.createContext)(null);
+function useActiveCodeSnippetName(mode) {
+    const context = (0, react_1.useContext)(exports.CodeSnippetContext);
+    if (!context) {
+        throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
+    }
+    const [activeSnippetName, setActiveSnippetName] = (0, react_1.useState)(mode === 'tabs' ? '' : context.activeSnippetName);
+    if (mode === 'tabs') {
+        // use non-synced state for tabs mode
+        return [activeSnippetName, setActiveSnippetName];
+    }
+    else {
+        // use global synced state for dropdown mode
+        return [context.activeSnippetName, context.setActiveSnippetName];
+    }
+}
+//# sourceMappingURL=CodeSnippetContext.js.map

package/lib/core/contexts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ThemeDataContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
+export * from './CodeSnippetContext';

package/lib/core/contexts/index.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ThemeDataContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
+__exportStar(require("./CodeSnippetContext"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -64,4 +64,5 @@ export declare const useThemeHooks: jest.Mock<{
     }, [], any>;
     useLoadAndNavigate: jest.Mock<any, any, any>;
     usePageProps: jest.Mock<any, any, any>;
+    usePageData: jest.Mock<any, any, any>;
 }, [], any>;

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -87,5 +87,6 @@ exports.useThemeHooks = jest.fn(() => ({
     })),
     useLoadAndNavigate: jest.fn(),
     usePageProps: jest.fn().mockReturnValue({}),
+    usePageData: jest.fn().mockReturnValue(null),
 }));
 //# sourceMappingURL=use-theme-hooks.js.map

package/lib/core/hooks/code-walkthrough/use-renderable-files.d.ts

@@ -1,7 +1,6 @@
 import type { CodeWalkthroughFile } from '@redocly/config';
-import type { IconProps } from '../../../icons/types';
 export type RenderableFile = CodeWalkthroughFile & {
-    FileIcon: React.FunctionComponent<IconProps>;
+    fileIcon: React.JSX.Element;
     parentFolder: string;
     isNameDuplicate: boolean;
     inRootDir: boolean;

package/lib/core/hooks/code-walkthrough/use-renderable-files.js

@@ -10,11 +10,11 @@ function useRenderableFiles(files) {
         const filePaths = files.map(({ path }) => path);
         const rootDir = (0, find_closest_common_directory_1.findClosestCommonDirectory)(filePaths);
         const renderableFiles = files.map((file) => {
-            const FileIcon = getFileTypeIcon(file.basename);
+            const fileIcon = getFileTypeIcon(file.basename);
             const parentFolder = file.path.split('/').slice(-2, -1)[0];
             const isNameDuplicate = files.some((_file) => file.basename === _file.basename && file.path !== _file.path);
             const inRootDir = file.path === `${(0, urls_1.removeLeadingSlash)(rootDir)}/${file.basename}`;
-            return Object.assign(Object.assign({}, file), { FileIcon,
+            return Object.assign(Object.assign({}, file), { fileIcon,
                 inRootDir,
                 parentFolder,
                 isNameDuplicate });

package/lib/core/hooks/index.d.ts

@@ -40,3 +40,4 @@ export * from './catalog/useCatalogEntities';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';
+export * from './use-page-actions';

package/lib/core/hooks/index.js

@@ -56,4 +56,5 @@ __exportStar(require("./catalog/useCatalogEntities"), exports);
 __exportStar(require("./use-active-page-version"), exports);
 __exportStar(require("./use-page-versions"), exports);
 __exportStar(require("./use-user-teams"), exports);
+__exportStar(require("./use-page-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-active-heading.d.ts

@@ -1,2 +1,7 @@
-export type UseActiveHeadingReturnType = string | undefined;
-export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;
+export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeadings?: Array<{
+    id: string;
+    depth: number;
+} | null>): {
+    heading: string | undefined;
+    handleHeadingClick: (headingId: string) => void;
+};

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

@@ -3,11 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = useActiveHeading;
 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 utils_1 = require("../utils");
+function useActiveHeading(contentElement, displayedHeadings) {
+    const [heading, setHeading] = (0, react_1.useState)(undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
     const headingElementsRef = (0, react_1.useRef)({});
+    const displayedHeadingsRef = (0, react_1.useRef)(displayedHeadings);
+    const lockObserver = (0, react_1.useRef)(false);
     const location = (0, react_router_dom_1.useLocation)();
+    (0, react_1.useEffect)(() => {
+        setHeading(undefined);
+        headingElementsRef.current = {};
+    }, [location.pathname]);
+    (0, react_1.useEffect)(() => {
+        displayedHeadingsRef.current = displayedHeadings;
+    }, [displayedHeadings]);
     const getVisibleHeadings = () => {
         const visibleHeadings = [];
         for (const key in headingElementsRef.current) {
@@ -18,28 +28,98 @@ function useActiveHeading(contentElement, displayedHeaders) {
         }
         return visibleHeadings;
     };
+    const isTopOfPage = () => window.scrollY <= 50;
+    // Returns viewport ratio for intersection observer based on screen height
+    const getViewportRatio = () => {
+        const vh = window.innerHeight;
+        if (vh >= 1400)
+            return 0.4;
+        if (vh >= 1000)
+            return 0.3;
+        return 0.25;
+    };
     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 headers = Array.from(allHeaders);
+        if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
+            const displayedIds = displayedHeadingsRef.current.map((h) => h === null || h === void 0 ? void 0 : h.id).filter(Boolean);
+            return headers.filter((header) => displayedIds.includes(header.id));
+        }
+        return headers;
     };
-    const intersectionCallback = (0, react_1.useCallback)((headings) => {
+    const calculateVirtualPositions = (0, react_1.useCallback)((headers) => {
+        var _a;
+        if (!headers.length)
+            return {};
+        const navbarHeight = ((_a = document.querySelector('nav')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        const viewportHeight = window.innerHeight;
+        const triggerOffset = navbarHeight + viewportHeight * 0.25;
+        const lastHeader = headers[headers.length - 1];
+        const lastHeaderTop = lastHeader.offsetTop;
+        const maxScrollableHeight = document.body.scrollHeight - viewportHeight;
+        const requiredUplift = Math.max(0, lastHeaderTop - maxScrollableHeight + triggerOffset);
+        const virtualPositions = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            const headerTop = header.offsetTop;
+            const normalizedPosition = headers.length === 1 ? 0 : i / (headers.length - 1);
+            const adjustmentFactor = (0, utils_1.enhancedSmoothstep)(normalizedPosition, 0.4);
+            const uplift = requiredUplift * adjustmentFactor;
+            const virtualTop = headerTop - uplift;
+            virtualPositions[header.id] = virtualTop;
+        }
+        return virtualPositions;
+    }, []);
+    const getTriggerOffset = (0, react_1.useCallback)(() => {
         var _a;
-        headingElementsRef.current = headings.reduce((map, headingElement) => {
-            map[headingElement.target.id] = headingElement;
+        const navbarHeight = ((_a = document.querySelector('nav')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        return navbarHeight + window.innerHeight * getViewportRatio();
+    }, []);
+    const findActiveHeaderByVirtualPosition = (0, react_1.useCallback)((headers, scrollY, triggerOffset) => {
+        const virtualPositions = calculateVirtualPositions(headers);
+        let activeHeader = headers[0];
+        for (const header of headers) {
+            const virtualTop = virtualPositions[header.id] || header.offsetTop;
+            if (virtualTop <= scrollY + triggerOffset) {
+                activeHeader = header;
+            }
+            else {
+                break;
+            }
+        }
+        return activeHeader;
+    }, [calculateVirtualPositions]);
+    const intersectionCallback = (0, react_1.useCallback)((entries) => {
+        var _a, _b, _c;
+        if (lockObserver.current) {
+            return;
+        }
+        headingElementsRef.current = entries.reduce((map, entry) => {
+            map[entry.target.id] = entry;
             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;
+        if (isTopOfPage()) {
+            const newHeading = ((_a = headingElements[0]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
             setHeading(newHeading);
             return;
         }
         const visibleHeadings = getVisibleHeadings();
         if (!visibleHeadings.length) {
+            const triggerOffset = getTriggerOffset();
+            if (isTopOfPage()) {
+                setHeading(((_b = headingElements[0]) === null || _b === void 0 ? void 0 : _b.id) || undefined);
+                return;
+            }
+            const totalHeight = window.scrollY + window.innerHeight;
+            if (totalHeight >= document.body.scrollHeight - 10) {
+                setHeading(((_c = headingElements[headingElements.length - 1]) === null || _c === void 0 ? void 0 : _c.id) || undefined);
+                return;
+            }
+            const activeHeader = findActiveHeaderByVirtualPosition(headingElements, window.scrollY, triggerOffset);
+            setHeading(activeHeader.id);
             return;
         }
         if (visibleHeadings.length === 1) {
@@ -49,31 +129,88 @@ function useActiveHeading(contentElement, displayedHeaders) {
         visibleHeadings.sort((a, b) => {
             return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
         });
+        const firstVisibleHeading = visibleHeadings[0];
+        if (getIndexFromId(firstVisibleHeading.target.id) === 0 && isTopOfPage()) {
+            setHeading(firstVisibleHeading.target.id);
+            return;
+        }
+        const totalHeight = scrollY + window.innerHeight;
+        if (totalHeight >= document.body.scrollHeight - 10) {
+            setHeading(visibleHeadings[visibleHeadings.length - 1].target.id);
+            return;
+        }
         setHeading(visibleHeadings[0].target.id);
-    }, [getIndexFromId, headingElements]);
+    }, [getIndexFromId, headingElements, getTriggerOffset, findActiveHeaderByVirtualPosition]);
+    const handleHeadingClick = (0, react_1.useCallback)((headingId) => {
+        lockObserver.current = true;
+        setHeading(headingId);
+        const headingElement = headingElements.find((el) => el.id === headingId);
+        if (headingElement && headingElement.scrollIntoView) {
+            headingElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+        setTimeout(() => {
+            headingElementsRef.current = {};
+            lockObserver.current = false;
+        }, 300);
+    }, [headingElements]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!contentElement) {
             return;
         }
-        setHeadingElements(findHeaders(contentElement));
-    }, [contentElement, location]);
+        const headers = findHeaders(contentElement);
+        setHeadingElements(headers);
+        if (headers.length > 0 && !heading) {
+            if (isTopOfPage()) {
+                setHeading(headers[0].id);
+            }
+            else {
+                const totalHeight = scrollY + window.innerHeight;
+                if (totalHeight >= document.body.scrollHeight - 10) {
+                    setHeading(((_a = headers[headers.length - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined);
+                }
+                else {
+                    const triggerOffset = getTriggerOffset();
+                    const activeHeader = findActiveHeaderByVirtualPosition(headers, scrollY, triggerOffset);
+                    setHeading(activeHeader.id);
+                }
+            }
+        }
+    }, [
+        contentElement,
+        location,
+        heading,
+        calculateVirtualPositions,
+        getTriggerOffset,
+        findActiveHeaderByVirtualPosition,
+    ]);
     (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 triggerOffset = getTriggerOffset();
         const observer = new IntersectionObserver(intersectionCallback, {
-            rootMargin: '0px 0px -30% 0px',
-            threshold: 1,
+            rootMargin: `-${triggerOffset}px 0px -${window.innerHeight * getViewportRatio()}px 0px`,
+            threshold: [0, 0.1, 0.3, 0.5, 0.7, 1],
         });
-        headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach((element) => {
-            if (displayedHeaders.includes(element.id)) {
-                observer.observe(element);
-            }
+        headingElements.forEach((element) => {
+            observer.observe(element);
         });
-        return () => observer.disconnect();
-    }, [headingElements, displayedHeaders, intersectionCallback]);
-    return heading;
+        const handleScroll = () => {
+            var _a;
+            if (lockObserver.current)
+                return;
+            if (isTopOfPage()) {
+                setHeading(((_a = headingElements[0]) === null || _a === void 0 ? void 0 : _a.id) || undefined);
+            }
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [headingElements, intersectionCallback, getTriggerOffset]);
+    return { heading, handleHeadingClick };
 }
 //# sourceMappingURL=use-active-heading.js.map

package/lib/core/hooks/use-active-section-id.d.ts

@@ -1,3 +1,3 @@
 import type { Location } from 'react-router-dom';
 export type UseActiveSectionIdReturnType = string;
-export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean, withNavbar?: boolean): UseActiveSectionIdReturnType;
+export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean, withNavbar?: boolean, sectionOffset?: number): UseActiveSectionIdReturnType;