@redocly/theme 0.46.0 → 0.46.2

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

@@ -62,4 +62,5 @@ export declare const useThemeHooks: jest.Mock<{
     useSubmitFeedback: jest.Mock<{
         submitFeedback: jest.Mock<any, any, any>;
     }, [], any>;
+    useLoadAndNavigate: jest.Mock<any, any, any>;
 }, [], any>;

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

@@ -85,5 +85,6 @@ exports.useThemeHooks = jest.fn(() => ({
     useSubmitFeedback: jest.fn(() => ({
         submitFeedback: jest.fn(),
     })),
+    useLoadAndNavigate: jest.fn(),
 }));
 //# sourceMappingURL=use-theme-hooks.js.map

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

@@ -58,7 +58,7 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
         }
         const [firstChild] = item.items;
         if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
-            yield (0, utils_1.loadAndNavigate)(navigate, firstChild.link);
+            yield (0, utils_1.loadAndNavigate)({ navigate, to: firstChild.link });
         }
         setIsExpanded(!isExpanded);
     }), [item, isExpanded, navigate, location.pathname, setIsExpanded]);

package/lib/core/hooks/use-language-picker.js

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLanguagePicker = useLanguagePicker;
+const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function useLanguagePicker() {
-    const { useL10nConfig, usePreloadHistory } = (0, hooks_1.useThemeHooks)();
-    const history = usePreloadHistory();
+    const { useL10nConfig, useLoadAndNavigate } = (0, hooks_1.useThemeHooks)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const loadAndNavigate = useLoadAndNavigate();
     const { currentLocale, locales, defaultLocale } = useL10nConfig();
     const locale = locales.find((l) => l.code === currentLocale);
     function setLocale(value) {
         const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, value, locales));
         const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
-        history.push(newUrlWithLanguage);
+        loadAndNavigate({ navigate, to: newUrlWithLanguage });
     }
     return {
         currentLocale: locale,

package/lib/core/hooks/use-product-picker.js

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProductPicker = useProductPicker;
+const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../core/hooks");
 function useProductPicker() {
-    const { useCurrentProduct, useProducts, usePreloadHistory, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
     const products = useProducts();
     const telemetry = useTelemetry();
-    const history = usePreloadHistory();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const loadAndNavigate = useLoadAndNavigate();
     function setProduct(product) {
         if (!product)
             return;
         telemetry.send('product_picked', { product: product.slug });
-        history.push(product.link);
+        loadAndNavigate({ navigate, to: product.link });
     }
     return {
         currentProduct,

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

@@ -1,6 +1,6 @@
 import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
-import type { To, Location } from 'react-router-dom';
+import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
 import type { UserMenuData, FilteredCatalog, ItemState, SearchItemData, SubmitFeedbackParams, TFunction, BreadcrumbItem, DrilldownMenuItemDetails, SearchFacet, SearchFilterItem, SearchFacetQuery } from '../../core/types';
 export type ThemeHooks = {
@@ -105,6 +105,10 @@ export type ThemeHooks = {
             highlight?: string;
         }) => string;
     };
+    useLoadAndNavigate: () => (options: {
+        navigate: NavigateFunction;
+        to: string;
+    }) => Promise<void>;
 };
 export type L10nConfig = {
     currentLocale: string;

package/lib/core/utils/load-and-navigate.d.ts

@@ -1,3 +1,8 @@
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 export type HistoryOrigin = 'pm' | 'browser';
-export declare function loadAndNavigate(navigate: NavigateFunction, to: string, origin?: HistoryOrigin, options?: NavigateOptions): Promise<void>;
+export declare function loadAndNavigate({ navigate, to, origin, options, }: {
+    navigate: NavigateFunction;
+    to: string;
+    origin?: HistoryOrigin;
+    options?: NavigateOptions;
+}): Promise<void>;

package/lib/core/utils/load-and-navigate.js

@@ -12,9 +12,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadAndNavigate = loadAndNavigate;
 const utils_1 = require("../../core/utils");
 let lastNavigatedPath;
-function loadAndNavigate(navigate_1, to_1) {
-    return __awaiter(this, arguments, void 0, function* (navigate, to, origin = 'browser', options) {
-        var _a;
+// this is copy from portal/src/client/app/utils/loadAndNavigate.ts, for case when we need to run Redoc without Realm
+function loadAndNavigate(_a) {
+    return __awaiter(this, arguments, void 0, function* ({ navigate, to, origin = 'browser', options, }) {
+        var _b;
         lastNavigatedPath = to;
         const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
         // use window-shared loader instead of importing to prevent circular import issue
@@ -23,7 +24,7 @@ function loadAndNavigate(navigate_1, to_1) {
         // @ts-ignore
         if (result === null || result === void 0 ? void 0 : result.redirectTo) {
             // @ts-ignore
-            return loadAndNavigate(navigate, result.redirectTo, origin, options);
+            return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
         }
         if (result && lastNavigatedPath === to) {
             if (pathname !== window.location.pathname || search !== window.location.search) {
@@ -31,7 +32,7 @@ function loadAndNavigate(navigate_1, to_1) {
                 navigate({ pathname, search, hash }, Object.assign(Object.assign({}, options), { state: { origin }, unstable_flushSync: true }));
             }
             // @ts-ignore
-            if ((_a = result.props) === null || _a === void 0 ? void 0 : _a.disableAutoScroll)
+            if ((_b = result.props) === null || _b === void 0 ? void 0 : _b.disableAutoScroll)
                 return;
             if (hash) {
                 const el = document.getElementById(hash.slice(1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.46.0",
+  "version": "0.46.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -79,7 +79,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.18.0"
+    "@redocly/config": "0.19.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -84,4 +84,5 @@ export const useThemeHooks = jest.fn(() => ({
   useSubmitFeedback: jest.fn(() => ({
     submitFeedback: jest.fn(),
   })),
+  useLoadAndNavigate: jest.fn(),
 }));

package/src/core/hooks/menu/use-nested-menu.ts

@@ -64,7 +64,7 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
 
     const [firstChild] = item.items;
     if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
-      await loadAndNavigate(navigate, firstChild.link);
+      await loadAndNavigate({ navigate, to: firstChild.link });
     }
     setIsExpanded(!isExpanded);
   }, [item, isExpanded, navigate, location.pathname, setIsExpanded]);

package/src/core/hooks/use-language-picker.ts

@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 import type { L10nConfig } from '@redocly/theme/core/types';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -8,8 +10,9 @@ export function useLanguagePicker(): {
   locales: L10nConfig['locales'];
   setLocale: (value: string) => void;
 } {
-  const { useL10nConfig, usePreloadHistory } = useThemeHooks();
-  const history = usePreloadHistory();
+  const { useL10nConfig, useLoadAndNavigate } = useThemeHooks();
+  const navigate = useNavigate();
+  const loadAndNavigate = useLoadAndNavigate();
   const { currentLocale, locales, defaultLocale } = useL10nConfig();
 
   const locale = locales.find((l) => l.code === currentLocale);
@@ -20,7 +23,7 @@ export function useLanguagePicker(): {
     );
 
     const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
-    history.push(newUrlWithLanguage);
+    loadAndNavigate({ navigate, to: newUrlWithLanguage });
   }
 
   return {

package/src/core/hooks/use-product-picker.ts

@@ -1,16 +1,18 @@
+import { useNavigate } from 'react-router-dom';
+
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export function useProductPicker() {
-  const { useCurrentProduct, useProducts, usePreloadHistory, useTelemetry } = useThemeHooks();
+  const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
   const currentProduct = useCurrentProduct();
   const products = useProducts();
   const telemetry = useTelemetry();
-  const history = usePreloadHistory();
-
+  const navigate = useNavigate();
+  const loadAndNavigate = useLoadAndNavigate();
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
     telemetry.send('product_picked', { product: product.slug });
-    history.push(product.link);
+    loadAndNavigate({ navigate, to: product.link });
   }
   return {
     currentProduct,

package/src/core/types/hooks.ts

@@ -1,6 +1,6 @@
 import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
-import type { To, Location } from 'react-router-dom';
+import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
 import type {
   UserMenuData,
@@ -121,6 +121,7 @@ export type ThemeHooks = {
       },
     ) => string;
   };
+  useLoadAndNavigate: () => (options: { navigate: NavigateFunction; to: string }) => Promise<void>;
 };
 
 export type L10nConfig = {

package/src/core/utils/load-and-navigate.ts

@@ -5,12 +5,18 @@ import { withLoadProgress } from '@redocly/theme/core/utils';
 export type HistoryOrigin = 'pm' | 'browser';
 
 let lastNavigatedPath;
-export async function loadAndNavigate(
-  navigate: NavigateFunction,
-  to: string,
-  origin: HistoryOrigin = 'browser',
-  options?: NavigateOptions,
-) {
+// this is copy from portal/src/client/app/utils/loadAndNavigate.ts, for case when we need to run Redoc without Realm
+export async function loadAndNavigate({
+  navigate,
+  to,
+  origin = 'browser',
+  options,
+}: {
+  navigate: NavigateFunction;
+  to: string;
+  origin?: HistoryOrigin;
+  options?: NavigateOptions;
+}) {
   lastNavigatedPath = to;
   const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
 
@@ -20,7 +26,7 @@ export async function loadAndNavigate(
   // @ts-ignore
   if (result?.redirectTo) {
     // @ts-ignore
-    return loadAndNavigate(navigate, result.redirectTo, origin, options);
+    return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
   }
 
   if (result && lastNavigatedPath === to) {