@redocly/theme 0.70.0-next.2 → 0.70.0-next.4

package/lib/components/NavigationTabs/NavigationTabs.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { NavigationTabsConfig } from '../../core/types';
+export type NavigationTabsProps = {
+    config?: NavigationTabsConfig;
+    className?: string;
+};
+export declare function NavigationTabs({ config, className }: NavigationTabsProps): JSX.Element | null;

package/lib/components/NavigationTabs/NavigationTabs.js

@@ -0,0 +1,97 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabs = NavigationTabs;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const NavigationTab_1 = require("../../components/NavigationTabs/NavigationTab");
+function NavigationTabs({ config, className }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const listRef = (0, react_1.useRef)(null);
+    const tabs = (_a = config === null || config === void 0 ? void 0 : config.items) !== null && _a !== void 0 ? _a : [];
+    const activeIndex = tabs.findIndex((tab) => tab.active);
+    (0, hooks_1.useScrollItemIntoView)(listRef, activeIndex);
+    if (!tabs.length) {
+        return null;
+    }
+    return (react_1.default.createElement(NavigationTabsWrapper, { "data-component-name": "NavigationTabs/NavigationTabs", className: className, "aria-label": translate('navigationTabs.label', 'Navigation tabs') },
+        react_1.default.createElement(NavigationTabsList, { ref: listRef }, tabs.map((tab, index) => (react_1.default.createElement(NavigationTab_1.NavigationTab, { key: `${tab.label}_${index}`, tab: tab }))))));
+}
+const NavigationTabsWrapper = styled_components_1.default.nav `
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--navigation-tabs-height);
+  max-width: var(--navbar-container-max-width);
+  padding: var(--navigation-tabs-padding);
+  background: var(--navigation-tabs-bg-color);
+  border-bottom: var(--navigation-tabs-bottom-border);
+  flex-shrink: 0;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: flex;
+  }
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+const NavigationTabsList = styled_components_1.default.ul `
+  list-style: none;
+  margin: 0 0 calc(-1 * var(--navigation-tabs-border-width));
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--navigation-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+//# sourceMappingURL=NavigationTabs.js.map

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

@@ -0,0 +1 @@
+export declare const navigationTabs: import("styled-components").RuleSet<object>;

package/lib/components/NavigationTabs/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigationTabs = void 0;
+const styled_components_1 = require("styled-components");
+exports.navigationTabs = (0, styled_components_1.css) `
+  --navigation-tabs-height: 48px; // @presenter Spacing
+  --navigation-tabs-bg-color: transparent; // @presenter Color
+  --navigation-tabs-border-color: var(--border-color-secondary);
+  --navigation-tabs-border-width: 1px;
+  --navigation-tabs-bottom-border: var(--navigation-tabs-border-width) solid var(--navigation-tabs-border-color);
+  --navigation-tabs-padding-vertical: 0;
+  --navigation-tabs-padding-horizontal: var(--spacing-xl);
+  --navigation-tabs-padding: var(--navigation-tabs-padding-vertical) var(--navigation-tabs-padding-horizontal); // @presenter Spacing
+  --navigation-tabs-gap: var(--spacing-base); // @presenter Spacing
+
+  --navigation-tabs-item-padding-vertical: var(--spacing-xxs);
+  --navigation-tabs-item-padding-horizontal: 0;
+  --navigation-tabs-item-padding: var(--navigation-tabs-item-padding-vertical) var(--navigation-tabs-item-padding-horizontal);
+  --navigation-tabs-item-content-gap: var(--spacing-xs);
+  --navigation-tabs-item-font-size: var(--font-size-base);
+  --navigation-tabs-item-line-height: var(--line-height-base);
+  --navigation-tabs-item-font-weight: var(--font-weight-regular);
+  --navigation-tabs-item-font-weight-active: var(--font-weight-medium);
+  --navigation-tabs-item-text-color: var(--navbar-text-color); // @presenter Color
+  --navigation-tabs-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-bottom-border: var(--navigation-tabs-border-width) solid transparent;
+  --navigation-tabs-item-bottom-border-hover: var(--navigation-tabs-border-width) solid var(--border-color-primary);
+  --navigation-tabs-item-bottom-border-active: var(--navigation-tabs-border-width) solid var(--border-color-inverse);
+  --navigation-tabs-item-border-color-focused: var(--button-border-color-focused);
+  --navigation-tabs-item-border-radius: var(--navbar-item-border-radius);
+  --navigation-tabs-item-icon-size: 1.25em; // @presenter Spacing
+  --navigation-tabs-item-external-icon-margin-left: 0;
+  --navigation-tabs-item-label-font-weight-active: var(--navigation-tabs-item-font-weight-active);
+  --navigation-tabs-item-transition: 150ms ease-in-out;
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Product/utils.js

@@ -5,6 +5,6 @@ function getProductClassName(productName) {
     return `product-${productName
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '')}`;
+        .replace(/^-+|(?<!-)-+$/g, '')}`;
 }
 //# sourceMappingURL=utils.js.map

package/lib/components/Search/SearchAiMessage.js

@@ -251,7 +251,7 @@ const ResourceTagsWrapper = styled_components_1.default.div `
   flex-wrap: wrap;
   gap: var(--search-ai-resource-tags-gap);
 `;
-const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
+const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({ textTransform: 'none' }) `
   .tag-default {
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;

package/lib/components/Search/SearchAiResponse.js

@@ -141,6 +141,7 @@ const ResourceTags = styled_components_1.default.div `
 `;
 const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({
     className: 'tag-resource',
+    textTransform: 'none',
 }) `
   .tag-default {
     --tag-color: --search-ai-resource-tag-text-color;

package/lib/components/Search/SearchTrigger.js

@@ -61,13 +61,16 @@ function SearchTrigger({ onClick, className }) {
         }
     }
     mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
-    const isMac = (0, utils_1.getUserAgent)().includes('Mac');
+    // A page can be cached and served to every platform, so the server renders a hidden
+    // placeholder and the browser picks the label after hydration.
+    const [isMac, setIsMac] = React.useState(undefined);
+    React.useEffect(() => setIsMac((0, utils_1.getUserAgent)().includes('Mac')), []);
     return (React.createElement(SearchTriggerWrapper, { onClick: onClick, className: className, "data-component-name": "Search/SearchTrigger" },
         React.createElement(SearchTriggerButton, { "data-testid": "search-trigger-button", variant: "text", size: "medium", icon: React.createElement(SearchIcon_1.SearchIcon, null), "aria-label": "Search trigger button" }),
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
+            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement(SearchTriggerShortcut, { $isPending: isMac === undefined }, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);
@@ -85,6 +88,9 @@ const SearchTriggerButton = (0, styled_components_1.default)(Button_1.Button) `
     display: none;
   }
 `;
+const SearchTriggerShortcut = styled_components_1.default.span `
+  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+`;
 const SearchTriggerInput = styled_components_1.default.div `
   display: none;
   align-items: center;

package/lib/components/Sidebar/Sidebar.js

@@ -38,8 +38,8 @@ const SidebarContent = styled_components_1.default.aside `
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: calc(var(--navbar-height) + var(--banner-height));
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  top: var(--navbar-offset);
+  height: calc(100vh - var(--navbar-offset));
   overflow-x: hidden;
   ${({ $opened }) => `
     display: ${$opened ? 'flex' : 'none'}

package/lib/components/TableOfContent/TableOfContent.js

@@ -91,8 +91,8 @@ const TableOfContentHeader = styled_components_1.default.div `
 `;
 const TableOfContentItems = styled_components_1.default.div `
   position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  top: calc(var(--navbar-stack-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-stack-height) - var(--toc-offset-top));
   overflow-y: auto;
   width: var(--toc-width);
   border-left: solid 1px var(--toc-border-color);

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

@@ -15,6 +15,7 @@ export declare enum FEEDBACK_TYPES {
 }
 export declare const DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 export declare enum MenuItemType {
+    Select = "select",
     Separator = "separator",
     DrillDown = "drilldown",
     Group = "group",

package/lib/core/constants/common.js

@@ -21,6 +21,7 @@ var FEEDBACK_TYPES;
 exports.DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 var MenuItemType;
 (function (MenuItemType) {
+    MenuItemType["Select"] = "select";
     MenuItemType["Separator"] = "separator";
     MenuItemType["DrillDown"] = "drilldown";
     MenuItemType["Group"] = "group";

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

@@ -0,0 +1,2 @@
+import type { ConsentCategory } from '../types/consent';
+export declare const CONSENT_CATEGORIES: readonly ConsentCategory[];

package/lib/core/constants/consent.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONSENT_CATEGORIES = void 0;
+exports.CONSENT_CATEGORIES = [
+    {
+        id: 'necessary',
+        locked: true,
+        titleTranslationKey: 'consent.category.necessary.title',
+        descriptionTranslationKey: 'consent.category.necessary.description',
+        titleDefault: 'Necessary',
+        descriptionDefault: 'Needed for the site to work: your consent choice, your color mode, and anonymous usage data.',
+    },
+    {
+        id: 'analytics',
+        locked: false,
+        titleTranslationKey: 'consent.category.analytics.title',
+        descriptionTranslationKey: 'consent.category.analytics.description',
+        titleDefault: 'Analytics',
+        descriptionDefault: 'Helps us understand which pages are useful.',
+    },
+    {
+        id: 'marketing',
+        locked: false,
+        titleTranslationKey: 'consent.category.marketing.title',
+        descriptionTranslationKey: 'consent.category.marketing.description',
+        titleDefault: 'Marketing',
+        descriptionDefault: 'Lets us measure which campaigns bring visitors to this site.',
+    },
+];
+//# sourceMappingURL=consent.js.map

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

@@ -10,3 +10,4 @@ export * from './mcp';
 export * from './feedback';
 export * from './heading';
 export * from './markdown';
+export * from './consent';

package/lib/core/constants/index.js

@@ -26,4 +26,5 @@ __exportStar(require("./mcp"), exports);
 __exportStar(require("./feedback"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./markdown"), exports);
+__exportStar(require("./consent"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -22,6 +22,8 @@ export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
 export * from './use-focus-trap';
+export * from './use-consent-dialog';
+export * from './use-consent-telemetry';
 export * from './use-language-picker';
 export * from './use-product-picker';
 export * from './search/use-search-dialog';
@@ -56,3 +58,4 @@ export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
 export * from './use-anchor-positioning';
+export * from './use-scroll-item-into-view';

package/lib/core/hooks/index.js

@@ -38,6 +38,8 @@ __exportStar(require("./menu/use-collapse"), exports);
 __exportStar(require("./feedback/use-report-dialog"), exports);
 __exportStar(require("./use-tabs"), exports);
 __exportStar(require("./use-focus-trap"), exports);
+__exportStar(require("./use-consent-dialog"), exports);
+__exportStar(require("./use-consent-telemetry"), exports);
 __exportStar(require("./use-language-picker"), exports);
 __exportStar(require("./use-product-picker"), exports);
 __exportStar(require("./search/use-search-dialog"), exports);
@@ -72,4 +74,5 @@ __exportStar(require("./use-toast-logic"), exports);
 __exportStar(require("./use-banner-telemetry"), exports);
 __exportStar(require("./use-tooltip-fallback-placement"), exports);
 __exportStar(require("./use-anchor-positioning"), exports);
+__exportStar(require("./use-scroll-item-into-view"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenuItems = void 0;
+const react_1 = require("react");
 const react_router_1 = require("react-router");
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
@@ -10,73 +11,96 @@ const MENU_SEPARATOR = {
     type: 'separator',
     separatorLine: true,
 };
+const NO_VERSIONS = [];
+const NO_NAV_ITEMS = [];
 const useMobileMenuItems = (menuType) => {
-    var _a, _b, _c;
-    const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, use_theme_hooks_1.useThemeHooks)();
-    const { versions = [] } = usePageVersions() || {};
+    var _a, _b, _c, _d;
+    var _e, _f, _g;
+    const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems, useNavigationTabs, } = (0, use_theme_hooks_1.useThemeHooks)();
+    const versions = (_e = (_a = usePageVersions()) === null || _a === void 0 ? void 0 : _a.versions) !== null && _e !== void 0 ? _e : NO_VERSIONS;
     const { defaultLocale, currentLocale, locales } = useL10nConfig();
     const { translate } = useTranslate();
     const activeVersion = versions.find((version) => version.active);
     const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);
+    const navigationTabs = useNavigationTabs();
     const location = (0, react_router_1.useLocation)();
     const currentProduct = useCurrentProduct();
-    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const hasProductNavbarOverride = (_b = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _b === void 0 ? void 0 : _b.navbar;
     const productThemeConfig = (0, use_theme_config_1.useThemeConfig)();
     const baseThemeConfig = (0, use_theme_config_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 === common_1.MobileMenuType.PAGE) {
-        if (activeVersion) {
-            // eslint-disable-next-line no-warning-comments
-            // TODO: consider to refactor
-            const versionsSection = (0, menu_1.buildVersionSection)(translate, versions, activeVersion);
-            menuItems.push(...versionsSection);
+    const baseNavItems = ((_f = (_c = baseThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) !== null && _f !== void 0 ? _f : NO_NAV_ITEMS);
+    const productNavItems = (hasProductNavbarOverride ? ((_g = (_d = productThemeConfig.navbar) === null || _d === void 0 ? void 0 : _d.items) !== null && _g !== void 0 ? _g : NO_NAV_ITEMS) : NO_NAV_ITEMS);
+    const products = baseThemeConfig.products;
+    const items = (0, react_1.useMemo)(() => {
+        const menuItems = [];
+        const navigationTabsSelect = menuType === common_1.MobileMenuType.PAGE ? (0, menu_1.buildNavigationTabsSelect)({ navigationTabs }) : undefined;
+        if (menuType === common_1.MobileMenuType.PAGE) {
+            if (activeVersion) {
+                menuItems.push(...(0, menu_1.buildVersionSection)(translate, versions, activeVersion));
+            }
+            if (menuItems.length && sidebarItems.length) {
+                menuItems.push(MENU_SEPARATOR);
+            }
+            menuItems.push(...sidebarItems);
         }
-        if (menuItems.length && sidebarItems.length) {
-            menuItems.push(MENU_SEPARATOR);
-        }
-        menuItems.push(...sidebarItems);
-    }
-    else if (menuType === common_1.MobileMenuType.PRODUCT) {
-        menuItems.push(...productNavItems);
-        if (menuItems.length && baseNavItems.length) {
-            menuItems.push(MENU_SEPARATOR);
-        }
-        if (baseNavItems.length) {
-            menuItems.push(...baseNavItems);
+        else if (menuType === common_1.MobileMenuType.PRODUCT) {
+            menuItems.push(...productNavItems);
+            if (menuItems.length && baseNavItems.length) {
+                menuItems.push(MENU_SEPARATOR);
+            }
+            if (baseNavItems.length) {
+                menuItems.push(...baseNavItems);
+            }
         }
-    }
-    else if (menuType === common_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('mobileMenu.products', 'Products'),
-            });
-            menuItems.push(...productMenuItems);
+        else if (menuType === common_1.MobileMenuType.MAIN_MENU) {
+            const productMenuItems = Object.values(products || {}).map((product) => ({
+                label: product.name,
+                link: product.link,
+                icon: product.icon,
+                type: 'link',
+            }));
+            if (productMenuItems.length) {
+                menuItems.push({
+                    type: 'separator',
+                    label: translate('mobileMenu.products', 'Products'),
+                });
+                menuItems.push(...productMenuItems);
+            }
+            if (menuItems.length && baseNavItems.length) {
+                menuItems.push(MENU_SEPARATOR);
+            }
+            if (baseNavItems.length) {
+                menuItems.push(...baseNavItems);
+            }
         }
-        if (menuItems.length && baseNavItems.length) {
+        const languagesMenu = (0, menu_1.buildLanguagesGroup)(locales, defaultLocale, currentLocale);
+        if (menuItems.length && languagesMenu) {
             menuItems.push(MENU_SEPARATOR);
         }
-        if (baseNavItems.length) {
-            menuItems.push(...baseNavItems);
+        if (languagesMenu) {
+            menuItems.push(languagesMenu);
         }
-    }
-    const languagesMenu = (0, menu_1.buildLanguagesGroup)(locales, defaultLocale, currentLocale);
-    if (menuItems.length && languagesMenu) {
-        menuItems.push(MENU_SEPARATOR);
-    }
-    if (languagesMenu) {
-        menuItems.push(languagesMenu);
-    }
+        return [
+            ...(navigationTabsSelect ? [navigationTabsSelect] : []),
+            ...(0, menu_1.mapNavbarItems)(menuItems, defaultLocale, currentLocale, locales, location),
+        ];
+    }, [
+        menuType,
+        navigationTabs,
+        activeVersion,
+        versions,
+        sidebarItems,
+        productNavItems,
+        baseNavItems,
+        products,
+        translate,
+        locales,
+        defaultLocale,
+        currentLocale,
+        location,
+    ]);
     return {
-        items: (0, menu_1.mapNavbarItems)(menuItems, defaultLocale, currentLocale, locales, location),
+        items,
         popDrilldownState,
         pushDrilldownState,
         backLink,

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

@@ -7,31 +7,36 @@ const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const common_1 = require("../../constants/common");
 const useMobileMenuLevels = () => {
-    var _a, _b;
-    const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems } = (0, use_theme_hooks_1.useThemeHooks)();
+    var _a, _b, _c;
+    const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems, useNavigationTabs } = (0, use_theme_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 navigationTabs = useNavigationTabs();
     const { translate } = useTranslate();
     const currentProduct = useCurrentProduct();
     const productThemeConfig = (0, use_theme_config_1.useThemeConfig)();
+    const baseThemeConfig = (0, use_theme_config_1.useThemeConfig)(false);
     const location = (0, react_router_1.useLocation)();
     const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
     const productNavItems = (hasProductNavbarOverride ? ((_b = productThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || [] : []);
+    const hasMainMenuItems = Object.values(baseThemeConfig.products || {}).length > 0 ||
+        (((_c = baseThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) || []).length > 0;
     const menuLevels = (0, react_1.useMemo)(() => {
-        const menuLevels = [
-            {
+        const menuLevels = [];
+        if (hasMainMenuItems) {
+            menuLevels.push({
                 label: translate('mobileMenu.mainMenu', 'Main menu'),
                 type: common_1.MobileMenuType.MAIN_MENU,
-            },
-        ];
+            });
+        }
         if (currentProduct && productNavItems.length) {
             menuLevels.push({
                 label: currentProduct.name,
                 type: common_1.MobileMenuType.PRODUCT,
             });
         }
-        if (sidebarItems.length || activeVersion) {
+        if (sidebarItems.length || activeVersion || (navigationTabs === null || navigationTabs === void 0 ? void 0 : navigationTabs.tabs.length)) {
             menuLevels.push({
                 label: translate('mobileMenu.previous', 'Previous'),
                 type: common_1.MobileMenuType.PAGE,

package/lib/core/hooks/use-consent-dialog.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { ConsentCategory, ConsentCategoryId, UseConsentResult } from '../types/consent';
+export type ConsentDraft = Record<Exclude<ConsentCategoryId, 'necessary'>, boolean>;
+export type UseConsentDialogResult = {
+    draft: ConsentDraft;
+    setCategory: (id: keyof ConsentDraft, value: boolean) => void;
+    dialogRef: RefObject<HTMLDivElement | null>;
+    close: () => void;
+    save: () => void;
+    categories: readonly ConsentCategory[];
+};
+export declare function useConsentDialog(consent: UseConsentResult): UseConsentDialogResult;

package/lib/core/hooks/use-consent-dialog.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConsentDialog = useConsentDialog;
+const react_1 = require("react");
+const consent_1 = require("../constants/consent");
+const use_focus_trap_1 = require("./use-focus-trap");
+function useConsentDialog(consent) {
+    const [draft, setDraft] = (0, react_1.useState)(() => { var _a, _b; var _c, _d; return ({
+        analytics: (_c = (_a = consent.state) === null || _a === void 0 ? void 0 : _a.analytics) !== null && _c !== void 0 ? _c : consent.mode === 'opt-out',
+        marketing: ((_d = (_b = consent.state) === null || _b === void 0 ? void 0 : _b.marketing) !== null && _d !== void 0 ? _d : consent.mode === 'opt-out') && !consent.gpc,
+    }); });
+    const dialogRef = (0, react_1.useRef)(null);
+    const close = consent.closeDialog;
+    const closeRef = (0, react_1.useRef)(close);
+    closeRef.current = close;
+    (0, react_1.useEffect)(() => {
+        const previous = document.activeElement;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                closeRef.current();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            var _a;
+            document.removeEventListener('keydown', onKeyDown);
+            (_a = previous === null || previous === void 0 ? void 0 : previous.focus) === null || _a === void 0 ? void 0 : _a.call(previous);
+        };
+    }, []);
+    (0, use_focus_trap_1.useFocusTrap)(dialogRef);
+    const setCategory = (id, value) => {
+        setDraft((current) => (Object.assign(Object.assign({}, current), { [id]: value })));
+    };
+    const save = () => consent.save(draft);
+    return { draft, setCategory, dialogRef, close, save, categories: consent_1.CONSENT_CATEGORIES };
+}
+//# sourceMappingURL=use-consent-dialog.js.map

package/lib/core/hooks/use-consent-telemetry.d.ts

@@ -0,0 +1 @@
+export declare function useConsentTelemetry(): void;

package/lib/core/hooks/use-consent-telemetry.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConsentTelemetry = useConsentTelemetry;
+const react_1 = require("react");
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
+function isRealmOwned(runtime) {
+    return runtime.region.source !== 'provider';
+}
+function getConsentRuntime() {
+    var _a;
+    if (typeof window === 'undefined')
+        return undefined;
+    return (_a = window.redocly) === null || _a === void 0 ? void 0 : _a.consent;
+}
+// Sends one consent.changed event per visitor choice in the modes Realm owns.
+function useConsentTelemetry() {
+    const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const telemetryRef = (0, react_1.useRef)(telemetry);
+    telemetryRef.current = telemetry;
+    (0, react_1.useEffect)(() => {
+        const found = getConsentRuntime();
+        const runtime = found && isRealmOwned(found) ? found : null;
+        if (!runtime)
+            return;
+        return runtime.on('change', (state) => {
+            const choice = state.analytics && state.marketing
+                ? 'accept'
+                : !state.analytics && !state.marketing
+                    ? 'reject'
+                    : 'partial';
+            const { origin, pathname, search, hash } = window.location;
+            const uri = `${origin}${pathname}${search}${hash}`;
+            telemetryRef.current.sendConsentChangedMessage([
+                Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('consent', 'consent')), { choice, mode: runtime.mode, configuredMode: runtime.configuredMode, regionSource: runtime.region.source, gpc: runtime.gpc }),
+                (0, get_base_data_attributes_1.getBaseDataAttributes)(uri, 'page', uri),
+            ]);
+        });
+    }, []);
+}
+//# sourceMappingURL=use-consent-telemetry.js.map

package/lib/core/hooks/use-scroll-item-into-view.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare function useScrollItemIntoView(listRef: RefObject<HTMLElement | null>, activeIndex: number): void;