@redocly/theme 0.0.0-react18-20231120182601

package/lib/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/lib/hooks/__tests__/mocks/MockIntersectionObserver.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MockIntersectionObserver = void 0;
+class MockIntersectionObserver {
+    constructor(callback, options) {
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rootMargin", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "thresholds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "viewPort", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "entries", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "callback", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "intersect", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.entries.map((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);
+    }
+    isInViewPort(target) {
+        return target.id !== 'toc-0';
+    }
+    observe(target) {
+        this.entries.push({ isIntersecting: false, target });
+    }
+    unobserve(target) {
+        this.entries = this.entries.filter((ob) => ob.target !== target);
+    }
+    disconnect() {
+        this.viewPort.removeEventListener('scroll', this.intersect);
+        this.entries = [];
+    }
+    takeRecords() {
+        return this.entries;
+    }
+}
+exports.MockIntersectionObserver = MockIntersectionObserver;
+//# sourceMappingURL=MockIntersectionObserver.js.map

package/lib/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export * from '../hooks/useThemeConfig';
+export * from '../hooks/useControl';
+export * from '../hooks/useMount';
+export * from '../hooks/useUnmount';
+export * from '../hooks/useActiveHeading';
+export * from '../hooks/useActiveSectionId';
+export * from '../hooks/useFullHeight';
+export * from '../hooks/useNavbarHeight';
+export * from '../hooks/useOutsideClick';

package/lib/hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../hooks/useThemeConfig"), exports);
+__exportStar(require("../hooks/useControl"), exports);
+__exportStar(require("../hooks/useMount"), exports);
+__exportStar(require("../hooks/useUnmount"), exports);
+__exportStar(require("../hooks/useActiveHeading"), exports);
+__exportStar(require("../hooks/useActiveSectionId"), exports);
+__exportStar(require("../hooks/useFullHeight"), exports);
+__exportStar(require("../hooks/useNavbarHeight"), exports);
+__exportStar(require("../hooks/useOutsideClick"), exports);
+//# sourceMappingURL=index.js.map

package/lib/hooks/useActiveHeading.d.ts

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

package/lib/hooks/useActiveHeading.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=useActiveHeading.js.map

package/lib/hooks/useActiveSectionId.d.ts

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

package/lib/hooks/useActiveSectionId.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveSectionId = void 0;
+const react_1 = require("react");
+const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
+const useNavbarHeight_1 = require("../hooks/useNavbarHeight");
+function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true) {
+    const [itemId, setItemId] = (0, react_1.useState)('');
+    const navbarHeight = (0, useNavbarHeight_1.useNavbarHeight)(location);
+    const heightOffset = (withNavbar ? navbarHeight : 0) + 5; // use small padding 5px to account for rounding;
+    const scrollListener = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)(() => {
+        const sections = document.querySelectorAll('[data-section-id]');
+        if (sections.length < 2) {
+            setItemId('');
+            return;
+        }
+        for (let i = 0; i < sections.length; i++) {
+            const section = sections[i];
+            const rect = section.getBoundingClientRect();
+            if (rect.y < heightOffset && rect.bottom > heightOffset) {
+                setItemId(section.getAttribute('data-section-id') || '');
+                return;
+            }
+        }
+        if (hasOverviewPage) {
+            setItemId('');
+        }
+    }, 150), [heightOffset, hasOverviewPage]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('scroll', scrollListener, { capture: false });
+        setTimeout(() => {
+            scrollListener();
+        }, 10);
+        return () => {
+            window.removeEventListener('scroll', scrollListener);
+        };
+    }, [location, heightOffset, scrollListener]);
+    return itemId;
+}
+exports.useActiveSectionId = useActiveSectionId;
+//# sourceMappingURL=useActiveSectionId.js.map

package/lib/hooks/useControl.d.ts

@@ -0,0 +1,6 @@
+export type UseControlReturnType = {
+    isOpened: boolean;
+    handleOpen: () => void;
+    handleClose: () => void;
+};
+export declare const useControl: (initialVal?: boolean) => UseControlReturnType;

package/lib/hooks/useControl.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControl = void 0;
+const react_1 = require("react");
+const useControl = (initialVal = false) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(initialVal);
+    const handleOpen = (0, react_1.useCallback)(() => setIsOpened(true), []);
+    const handleClose = (0, react_1.useCallback)(() => setIsOpened(false), []);
+    return {
+        isOpened,
+        handleOpen,
+        handleClose,
+    };
+};
+exports.useControl = useControl;
+//# sourceMappingURL=useControl.js.map

package/lib/hooks/useDialogHotKeys.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export declare function useDialogHotKeys(ref: MutableRefObject<HTMLElement | null>, onClose: () => void): void;

package/lib/hooks/useDialogHotKeys.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogHotKeys = void 0;
+const react_1 = require("react");
+function useDialogHotKeys(ref, onClose) {
+    const firstFocusableRef = (0, react_1.useRef)();
+    const lastFocusableRef = (0, react_1.useRef)();
+    const onKeyDownHandler = (event) => {
+        var _a, _b;
+        if (event.key === 'Escape') {
+            onClose();
+        }
+        else if (event.key === 'Tab') {
+            if (!event.shiftKey && document.activeElement === lastFocusableRef.current) {
+                event.preventDefault();
+                (_a = firstFocusableRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (event.shiftKey && document.activeElement === firstFocusableRef.current) {
+                event.preventDefault();
+                (_b = lastFocusableRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    };
+    const onFocusableElementsHandler = () => {
+        var _a, _b;
+        const focusableElements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, [href], [tabindex]:not([tabindex="-1"])');
+        if (focusableElements && focusableElements.length > 0) {
+            firstFocusableRef.current = focusableElements[0];
+            lastFocusableRef.current = focusableElements[focusableElements.length - 1];
+            (_b = firstFocusableRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', onKeyDownHandler);
+        return () => {
+            document.removeEventListener('keydown', onKeyDownHandler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        onFocusableElementsHandler();
+    });
+}
+exports.useDialogHotKeys = useDialogHotKeys;
+//# sourceMappingURL=useDialogHotKeys.js.map

package/lib/hooks/useFullHeight.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export declare function useFullHeight(element: MutableRefObject<HTMLElement | null>): void;

package/lib/hooks/useFullHeight.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFullHeight = void 0;
+const react_1 = require("react");
+const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
+function useFullHeight(element) {
+    const handler = (0, react_1.useCallback)(() => {
+        if (!element.current) {
+            return;
+        }
+        const footer = document.querySelector('footer');
+        if (!footer) {
+            return;
+        }
+        const elementTop = element.current.getBoundingClientRect().top;
+        const footerOffset = footer.offsetTop - window.scrollY - elementTop;
+        if (footerOffset > window.innerHeight) {
+            element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
+        }
+        else {
+            element.current.style.maxHeight = `${footerOffset}px`;
+        }
+    }, [element]);
+    const throttledHandler = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)(handler, 150), [handler]);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined' || !element.current) {
+            return () => {
+                // nope
+            };
+        }
+        window.addEventListener('scroll', throttledHandler, {
+            capture: false,
+        });
+        window.addEventListener('resize', throttledHandler, {
+            capture: false,
+        });
+        handler();
+        return () => {
+            window.removeEventListener('scroll', throttledHandler);
+            window.removeEventListener('resize', throttledHandler);
+        };
+    }, [throttledHandler, element, handler]);
+}
+exports.useFullHeight = useFullHeight;
+//# sourceMappingURL=useFullHeight.js.map

package/lib/hooks/useMobileMenu.d.ts

@@ -0,0 +1,2 @@
+import type { Dispatch, SetStateAction } from 'react';
+export declare function useMobileMenu(initialState?: boolean): [boolean, Dispatch<SetStateAction<boolean>>];

package/lib/hooks/useMobileMenu.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenu = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const useModalScrollLock_1 = __importDefault(require("../hooks/useModalScrollLock"));
+function useMobileMenu(initialState = false) {
+    const location = (0, react_router_dom_1.useLocation)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
+    (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
+    (0, useModalScrollLock_1.default)(isOpen);
+    return [isOpen, setIsOpen];
+}
+exports.useMobileMenu = useMobileMenu;
+//# sourceMappingURL=useMobileMenu.js.map

package/lib/hooks/useModalScrollLock.d.ts

@@ -0,0 +1 @@
+export default function useModalScrollLock(isOpen: boolean): () => void;

package/lib/hooks/useModalScrollLock.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useModalScrollLock(isOpen) {
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            document.body.classList.add('overflow-hidden');
+        else
+            document.body.classList.remove('overflow-hidden');
+    }, [isOpen]);
+    return () => {
+        document.body.classList.remove('overflow-hidden');
+    };
+}
+exports.default = useModalScrollLock;
+//# sourceMappingURL=useModalScrollLock.js.map

package/lib/hooks/useMount.d.ts

@@ -0,0 +1 @@
+export declare const useMount: (callback: () => void) => void;

package/lib/hooks/useMount.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMount = void 0;
+const react_1 = require("react");
+const useMount = (callback) => {
+    (0, react_1.useEffect)(() => {
+        callback();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+exports.useMount = useMount;
+//# sourceMappingURL=useMount.js.map

package/lib/hooks/useNavbarHeight.d.ts

@@ -0,0 +1,3 @@
+import type { Location } from 'react-router-dom';
+export type UseNavbarHeightReturnType = number;
+export declare function useNavbarHeight(location: Location): UseNavbarHeightReturnType;

package/lib/hooks/useNavbarHeight.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavbarHeight = void 0;
+const react_1 = require("react");
+const getNavbarElement_1 = require("../utils/getNavbarElement");
+function useNavbarHeight(location) {
+    const [height, setHeight] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const navbar = (0, getNavbarElement_1.getNavbarElement)();
+        setHeight((navbar && navbar.clientHeight) || 0);
+    }, [location.pathname]);
+    (0, react_1.useEffect)(() => {
+        window.requestAnimationFrame(() => {
+            const navbar = (0, getNavbarElement_1.getNavbarElement)();
+            setHeight((navbar && navbar.clientHeight) || 0);
+        });
+    }, []);
+    return height;
+}
+exports.useNavbarHeight = useNavbarHeight;
+//# sourceMappingURL=useNavbarHeight.js.map

package/lib/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;

package/lib/hooks/useOutsideClick.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClick = void 0;
+const react_1 = require("react");
+function useOutsideClick(ref, handler) {
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+}
+exports.useOutsideClick = useOutsideClick;
+//# sourceMappingURL=useOutsideClick.js.map

package/lib/hooks/useThemeConfig.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ThemeUIConfig } from '../config';
+export declare const ThemeConfigContext: import("react").Context<ThemeUIConfig>;
+export declare function useThemeConfig<T extends Record<string, unknown>>(useProductConfig?: boolean): T & NonNullable<ThemeUIConfig>;

package/lib/hooks/useThemeConfig.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeConfig = exports.ThemeConfigContext = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../mocks/hooks");
+exports.ThemeConfigContext = (0, react_1.createContext)({});
+function useThemeConfig(useProductConfig = true) {
+    const themeConfig = (0, react_1.useContext)(exports.ThemeConfigContext) || {};
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const mergedTheme = useProductConfig && (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride)
+        ? Object.assign(Object.assign({}, themeConfig), currentProduct.themeOverride) : themeConfig;
+    return mergedTheme;
+}
+exports.useThemeConfig = useThemeConfig;
+//# sourceMappingURL=useThemeConfig.js.map

package/lib/hooks/useUnmount.d.ts

@@ -0,0 +1 @@
+export declare const useUnmount: (callback: () => void) => void;

package/lib/hooks/useUnmount.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUnmount = void 0;
+const react_1 = require("react");
+const useUnmount = (callback) => {
+    (0, react_1.useEffect)(() => {
+        return () => {
+            callback();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+exports.useUnmount = useUnmount;
+//# sourceMappingURL=useUnmount.js.map

package/lib/i18n/LanguagePicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface LanguagePickerProps {
+    onChangeLanguage: (newLang: string) => void;
+    onlyIcon?: boolean;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+}
+export declare const LanguagePicker: (props: LanguagePickerProps) => React.JSX.Element | null;
+export {};