@redocly/theme 0.1.29 → 0.1.30

package/TableOfContent/TableOfContent.js

@@ -42,8 +42,16 @@ function TableOfContent(props) {
     var headings = props.headings, tocMaxDepth = props.tocMaxDepth, contentWrapper = props.contentWrapper;
     var sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
-    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper);
     var toc = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).toc;
+    var getDisplayedHeaderIds = function () {
+        if (!headings) {
+            return [];
+        }
+        return headings
+            .filter(function (header) { return header && tocMaxDepth >= header.depth; })
+            .map(function (header) { return header === null || header === void 0 ? void 0 : header.id; });
+    };
+    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, getDisplayedHeaderIds());
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }

package/hooks/__tests__/mocks/MockIntersectionObserver.d.ts

@@ -0,0 +1,15 @@
+export declare class MockIntersectionObserver {
+    readonly root: Element | Document | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    private viewPort;
+    private entries;
+    private readonly callback;
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
+    private intersect;
+    isInViewPort(target: HTMLElement): boolean;
+    observe(target: HTMLElement): void;
+    unobserve(target: HTMLElement): void;
+    disconnect(): void;
+    takeRecords(): any[];
+}

package/hooks/__tests__/mocks/MockIntersectionObserver.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MockIntersectionObserver = void 0;
+var MockIntersectionObserver = /** @class */ (function () {
+    function MockIntersectionObserver(callback, options) {
+        var _this = this;
+        this.intersect = function () {
+            _this.entries.map(function (entry) {
+                entry.isIntersecting = _this.isInViewPort(entry.target);
+            });
+            _this.callback(_this.entries, _this);
+        };
+        this.viewPort = (options === null || options === void 0 ? void 0 : options.root) ? options.root : window;
+        this.entries = [];
+        this.root = null;
+        this.rootMargin = '0px';
+        this.thresholds = [1];
+        this.callback = callback;
+        this.viewPort.addEventListener('scroll', this.intersect);
+    }
+    MockIntersectionObserver.prototype.isInViewPort = function (target) {
+        return target.id !== 'toc-0';
+    };
+    MockIntersectionObserver.prototype.observe = function (target) {
+        this.entries.push({ isIntersecting: false, target: target });
+    };
+    MockIntersectionObserver.prototype.unobserve = function (target) {
+        this.entries = this.entries.filter(function (ob) { return ob.target !== target; });
+    };
+    MockIntersectionObserver.prototype.disconnect = function () {
+        this.viewPort.removeEventListener('scroll', this.intersect);
+        this.entries = [];
+    };
+    MockIntersectionObserver.prototype.takeRecords = function () {
+        return this.entries;
+    };
+    return MockIntersectionObserver;
+}());
+exports.MockIntersectionObserver = MockIntersectionObserver;

package/hooks/useActiveHeading.d.ts

@@ -1,2 +1,2 @@
 export declare type UseActiveHeadingReturnType = string | undefined;
-export declare function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType;
+export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;

package/hooks/useActiveHeading.js

@@ -18,33 +18,82 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = void 0;
 var react_1 = require("react");
-function useActiveHeading(contentElement) {
+var react_router_dom_1 = require("react-router-dom");
+function useActiveHeading(contentElement, displayedHeaders) {
     var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
-    var headings = (0, react_1.useMemo)(function () { return contentElement && contentElement.querySelectorAll('.heading-anchor'); }, [contentElement]);
-    var handler = (0, react_1.useCallback)(
-    // throttle(
-    function () {
-        if (!headings) {
+    var _b = __read((0, react_1.useState)([]), 2), headingElements = _b[0], setHeadingElements = _b[1];
+    var headingElementsRef = (0, react_1.useRef)({});
+    var history = (0, react_router_dom_1.useHistory)();
+    var getVisibleHeadings = function () {
+        var visibleHeadings = [];
+        for (var key in headingElementsRef.current) {
+            var headingElement = headingElementsRef.current[key];
+            if (headingElement.isIntersecting) {
+                visibleHeadings.push(headingElement);
+            }
+        }
+        return visibleHeadings;
+    };
+    var getIndexFromId = function (id) {
+        return headingElements.findIndex(function (item) { return item.id === id; });
+    };
+    var findHeaders = function (allContent) {
+        var allHeaders = allContent.querySelectorAll('.heading-anchor');
+        return Array.from(allHeaders);
+    };
+    var intersectionCallback = function (headings) {
+        var _a;
+        headingElementsRef.current = headings.reduce(function (map, headingElement) {
+            map[headingElement.target.id] = headingElement;
+            return map;
+        }, headingElementsRef.current);
+        var totalHeight = window.scrollY + window.innerHeight;
+        // handle bottom of the page
+        if (totalHeight >= document.body.scrollHeight) {
+            var 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;
         }
-        for (var i = 0; i < headings.length; i++) {
-            if (headings[i].offsetTop > window.scrollY) {
-                var newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
-                setHeading(newHeading);
-                return;
-            }
+        var visibleHeadings = getVisibleHeadings();
+        if (!visibleHeadings.length) {
+            return;
+        }
+        if (visibleHeadings.length === 1) {
+            setHeading(visibleHeadings[0].target.id);
+            return;
+        }
+        visibleHeadings.sort(function (a, b) {
+            return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+        });
+        setHeading(visibleHeadings[0].target.id);
+    };
+    (0, react_1.useEffect)(function () {
+        if (!contentElement) {
+            return;
         }
-    }, [headings]);
+        setHeadingElements(findHeaders(contentElement));
+        var unlisten = history.listen(function () {
+            setHeadingElements(findHeaders(contentElement));
+        });
+        return function () { return unlisten(); };
+    }, [contentElement]);
     (0, react_1.useEffect)(function () {
-        if (typeof window === 'undefined' || !headings || !headings.length) {
-            return undefined;
+        if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
+            return;
         }
-        window.addEventListener('scroll', handler, {
-            capture: false,
+        headingElementsRef.current = {};
+        // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
+        var observer = new IntersectionObserver(intersectionCallback, {
+            rootMargin: '0px 0px -30% 0px',
+            threshold: 1,
+        });
+        headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach(function (element) {
+            if (displayedHeaders.includes(element.id)) {
+                observer.observe(element);
+            }
         });
-        handler();
-        return function () { return window.removeEventListener('scroll', handler); };
-    }, [handler, headings]);
+        return function () { return observer.disconnect(); };
+    }, [headingElements, displayedHeaders]);
     return heading;
 }
 exports.useActiveHeading = useActiveHeading;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/TableOfContent/TableOfContent.tsx

@@ -18,9 +18,19 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const activeHeadingId = useActiveHeading(contentWrapper);
   const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
 
+  const getDisplayedHeaderIds = () => {
+    if (!headings) {
+      return [];
+    }
+    return headings
+      .filter((header) => header && tocMaxDepth >= header.depth)
+      .map((header) => header?.id);
+  };
+
+  const activeHeadingId = useActiveHeading(contentWrapper, getDisplayedHeaderIds());
+
   if (toc?.hide) {
     return null;
   }

package/src/hooks/useActiveHeading.ts

@@ -1,46 +1,110 @@
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
 
-export function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType {
+type HeadingEntry = {
+  [key: string]: IntersectionObserverEntry;
+};
+
+export function useActiveHeading(
+  contentElement: HTMLDivElement | null,
+  displayedHeaders: Array<string | undefined>,
+): UseActiveHeadingReturnType {
   const [heading, setHeading] = useState<string | undefined>(undefined);
+  const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
+  const headingElementsRef = useRef<HeadingEntry>({});
 
-  const headings: NodeListOf<HTMLElement> | null = useMemo(
-    () => contentElement && contentElement.querySelectorAll<HTMLElement>('.heading-anchor'),
-    [contentElement],
-  );
+  const history = useHistory();
 
-  const handler = useCallback(
-    // throttle(
-    () => {
-      if (!headings) {
-        return;
-      }
+  const getVisibleHeadings = () => {
+    const visibleHeadings: IntersectionObserverEntry[] = [];
+
+    for (const key in headingElementsRef.current) {
+      const headingElement = headingElementsRef.current[key];
 
-      for (let i = 0; i < headings.length; i++) {
-        if (headings[i].offsetTop > window.scrollY) {
-          const newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
-          setHeading(newHeading);
-          return;
-        }
+      if (headingElement.isIntersecting) {
+        visibleHeadings.push(headingElement);
       }
-    },
-    [headings],
-  );
+    }
+
+    return visibleHeadings;
+  };
+
+  const getIndexFromId = (id: string) => {
+    return headingElements.findIndex((item) => item.id === id);
+  };
+
+  const findHeaders = (allContent: HTMLDivElement) => {
+    const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
+    return Array.from(allHeaders);
+  };
+
+  const intersectionCallback = (headings: IntersectionObserverEntry[]) => {
+    headingElementsRef.current = headings.reduce(
+      (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
+        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 = headingElements[headingElements?.length - 1]?.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);
+  };
 
   useEffect(() => {
-    if (typeof window === 'undefined' || !headings || !headings.length) {
-      return undefined;
+    if (!contentElement) {
+      return;
     }
+    setHeadingElements(findHeaders(contentElement));
 
-    window.addEventListener('scroll', handler, {
-      capture: false,
+    const unlisten = history.listen(() => {
+      setHeadingElements(findHeaders(contentElement));
     });
 
-    handler();
+    return () => unlisten();
+  }, [contentElement]);
+
+  useEffect(() => {
+    if (!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?.forEach((element) => {
+      if (displayedHeaders.includes(element.id)) {
+        observer.observe(element);
+      }
+    });
 
-    return () => window.removeEventListener('scroll', handler);
-  }, [handler, headings]);
+    return () => observer.disconnect();
+  }, [headingElements, displayedHeaders]);
 
   return heading;
 }