@redocly/theme 0.46.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.46.2",
+  "version": "0.46.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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" />,
   ];