@redocly/theme 0.46.1 → 0.46.3

package/lib/components/Search/SearchDialog.js

@@ -156,6 +156,13 @@ const SearchOverlay = styled_components_1.default.div `
   height: 100vh;
   background: var(--bg-color-modal-overlay);
   z-index: var(--z-index-overlay);
+
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    align-items: start;
+    position: fixed;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
 `;
 const SearchDialogWrapper = styled_components_1.default.div `
   display: flex;
@@ -168,9 +175,10 @@ const SearchDialogWrapper = styled_components_1.default.div `
   border-radius: 0;
 
   @media screen and (max-width: ${utils_1.breakpoints.small}) {
-    /* Ignore resize on mobile */
+    min-height: -webkit-fill-available !important;
+    min-height: 100dvh !important;
+    height: auto !important;
     width: 100vw !important;
-    height: 100vh !important;
   }
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
@@ -196,6 +204,10 @@ const SearchDialogBody = styled_components_1.default.div `
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
+
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    min-height: 0;
+  }
 `;
 const SearchDialogBodyMainView = styled_components_1.default.div `
   flex: 2;

package/lib/components/UserMenu/UserMenu.js

@@ -8,7 +8,6 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
-const GridIcon_1 = require("../../icons/GridIcon/GridIcon");
 const hooks_1 = require("../../core/hooks");
 const LoginButton_1 = require("../../components/UserMenu/LoginButton");
 const UserAvatar_1 = require("../../components/UserMenu/UserAvatar");
@@ -19,7 +18,7 @@ const utils_1 = require("../../core/utils");
 function UserMenu({ className }) {
     const { userMenu } = (0, hooks_1.useThemeConfig)();
     const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
-    const { userData, hasDeveloperOnboarding, loginUrl } = useUserMenu();
+    const { userData, loginUrl } = useUserMenu();
     const { translate } = useTranslate();
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
         if (loginUrl && !(userMenu === null || userMenu === void 0 ? void 0 : userMenu.hideLoginButton)) {
@@ -30,17 +29,11 @@ function UserMenu({ className }) {
             return null;
         }
     }
-    const devOnboardingMenuItem = hasDeveloperOnboarding
-        ? [
-            react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: "my-apps", to: "/apps", "data-translation-key": "userMenu.devOnboardingLabel", prefix: react_1.default.createElement(GridIcon_1.GridIcon, null) }, translate('userMenu.devOnboardingLabel')),
-        ]
-        : [];
     const menuItems = (userMenu === null || userMenu === void 0 ? void 0 : userMenu['menu']) || [];
-    const customItems = menuItems.map((item) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.label, external: item.external, to: item.link || '' }, item.label)));
+    const customItems = menuItems.map((item) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.label, external: item.external, to: item.link || '' }, item.labelTranslationKey ? translate(item.labelTranslationKey) : item.label)));
     const items = [
         react_1.default.createElement(UserInfoMenuItem_1.UserInfoMenuItem, { name: userData.name, picture: userData.picture, email: userData.email, key: "userinfo" }),
         react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { separatorLine: true, separator: true, key: "separator" }),
-        ...devOnboardingMenuItem,
         ...customItems,
         react_1.default.createElement(LogoutMenuItem_1.LogoutMenuItem, { key: "logout" }),
     ];

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.1",
+  "version": "0.46.3",
   "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.19.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/components/Search/SearchDialog.tsx

@@ -280,6 +280,13 @@ const SearchOverlay = styled.div`
   height: 100vh;
   background: var(--bg-color-modal-overlay);
   z-index: var(--z-index-overlay);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    align-items: start;
+    position: fixed;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
 `;
 
 const SearchDialogWrapper = styled.div`
@@ -293,9 +300,10 @@ const SearchDialogWrapper = styled.div`
   border-radius: 0;
 
   @media screen and (max-width: ${breakpoints.small}) {
-    /* Ignore resize on mobile */
+    min-height: -webkit-fill-available !important;
+    min-height: 100dvh !important;
+    height: auto !important;
     width: 100vw !important;
-    height: 100vh !important;
   }
 
   @media screen and (min-width: ${breakpoints.small}) {
@@ -323,6 +331,10 @@ const SearchDialogBody = styled.div`
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    min-height: 0;
+  }
 `;
 
 const SearchDialogBodyMainView = styled.div`

package/src/components/UserMenu/UserMenu.tsx

@@ -5,7 +5,6 @@ import type { ResolvedNavLinkItem } from '@redocly/config';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { GridIcon } from '@redocly/theme/icons/GridIcon/GridIcon';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { LoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
 import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
@@ -25,7 +24,7 @@ export function UserMenu({ className }: UserMenuProps) {
     };
   }>();
   const { useTranslate, useUserMenu } = useThemeHooks();
-  const { userData, hasDeveloperOnboarding, loginUrl } = useUserMenu();
+  const { userData, loginUrl } = useUserMenu();
   const { translate } = useTranslate();
 
   if (!userData?.isAuthenticated) {
@@ -40,24 +39,11 @@ export function UserMenu({ className }: UserMenuProps) {
     }
   }
 
-  const devOnboardingMenuItem = hasDeveloperOnboarding
-    ? [
-        <DropdownMenuItem
-          key="my-apps"
-          to="/apps"
-          data-translation-key="userMenu.devOnboardingLabel"
-          prefix={<GridIcon />}
-        >
-          {translate('userMenu.devOnboardingLabel')}
-        </DropdownMenuItem>,
-      ]
-    : [];
-
   const menuItems = userMenu?.['menu'] || [];
 
   const customItems = menuItems.map((item) => (
     <DropdownMenuItem key={item.label} external={item.external} to={item.link || ''}>
-      {item.label}
+      {item.labelTranslationKey ? translate(item.labelTranslationKey) : item.label}
     </DropdownMenuItem>
   ));
 
@@ -69,7 +55,6 @@ export function UserMenu({ className }: UserMenuProps) {
       key="userinfo"
     />,
     <DropdownMenuItem separatorLine={true} separator key="separator" />,
-    ...devOnboardingMenuItem,
     ...customItems,
     <LogoutMenuItem key="logout" />,
   ];

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) {