@redocly/theme 0.17.1 → 0.18.1

package/src/types/portal/src/shared/types/nav.ts

@@ -11,6 +11,7 @@ export type ResolvedNavLinkItem = {
   sidebar?: ResolvedNavItem[]; // for API catalog it contains the corresponding sidebar first item
   external?: boolean;
   target?: '_self' | '_blank';
+  languageInsensitive?: boolean;
 
   version?: string;
   isDefault?: boolean;
@@ -36,6 +37,7 @@ export type ResolvedNavGroupItem = {
   target?: '_self' | '_blank';
   expanded?: string;
   selectFirstItemOnExpand?: boolean;
+  languageInsensitive?: boolean;
 
   version?: string;
   isDefault?: boolean;
@@ -53,40 +55,42 @@ export type ResolvedNavItem =
   | ResolvedNavLinkItem
   | ResolvedNavGroupItem
   | {
-      type: 'separator';
-      metadata?: Record<string, unknown>;
-      label?: string;
-      labelTranslationKey?: string;
-      routeSlug?: never;
+    type: 'separator';
+    metadata?: Record<string, unknown>;
+    label?: string;
+    labelTranslationKey?: string;
+    routeSlug?: never;
 
-      version?: string;
-      isDefault?: boolean;
-      versionFolderId?: string;
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
 
-      separatorLine?: boolean;
-      link?: undefined;
-      items?: ResolvedNavItem[]; // for typescript
-      sidebar?: ResolvedNavItem[]; // for typescript
-      icon?: string;
-      [REDOCLY_TEAMS_RBAC]?: Rbac;
-    }
+    separatorLine?: boolean;
+    link?: undefined;
+    items?: ResolvedNavItem[]; // for typescript
+    sidebar?: ResolvedNavItem[]; // for typescript
+    icon?: string;
+    languageInsensitive?: boolean;
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+  }
   | {
-      type: 'error';
+    type: 'error';
 
-      version?: string;
-      isDefault?: boolean;
-      versionFolderId?: string;
-      metadata?: Record<string, unknown>;
-      routeSlug?: never;
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    metadata?: Record<string, unknown>;
+    routeSlug?: never;
 
-      label: string;
-      labelTranslationKey?: string;
-      link?: undefined;
-      items?: ResolvedNavItem[]; // for typescript
-      sidebar?: ResolvedNavItem[]; // for typescript
-      icon?: string; // for typescript
-      [REDOCLY_TEAMS_RBAC]?: Rbac;
-    };
+    label: string;
+    labelTranslationKey?: string;
+    link?: undefined;
+    items?: ResolvedNavItem[]; // for typescript
+    sidebar?: ResolvedNavItem[]; // for typescript
+    icon?: string; // for typescript
+    languageInsensitive?: boolean; // for typescript
+    [REDOCLY_TEAMS_RBAC]?: Rbac;
+  };
 
 
 export type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {
@@ -120,7 +124,7 @@ export interface PageData {
   versions?: Version[];
   userData: UserData;
 }
-export  enum MenuStyle {
+export enum MenuStyle {
   Drilldown = 'drilldown',
 }
 
@@ -150,7 +154,7 @@ export interface LogoConfig {
   link?: string;
   favicon?: string;
 }
-export  type Version = {
+export type Version = {
   version: string;
   label: string;
   link: string;
@@ -159,20 +163,20 @@ export  type Version = {
   notExists?: boolean;
   folderId: string;
 };
-export  type VersionConfigItem = {
+export type VersionConfigItem = {
   version: string;
   name?: string;
 };
-export  type VersionsConfigType = {
+export type VersionsConfigType = {
   versions: VersionConfigItem[];
   default?: string;
 };
-export  type VersionedFolderConfig = {
+export type VersionedFolderConfig = {
   versionedFiles: Map<string, Set<string>>;
   defaultVersion?: string;
   versions: VersionConfigItem[];
   hasVersionsConfig?: boolean;
 };
-export  type NavGroup = ResolvedNavItem[] | undefined | string | boolean | number;
-export  type NavGroupRecord = Record<string, NavGroup>;
-export  type ResolvedConfigLinks = NavGroup | NavGroupRecord;
+export type NavGroup = ResolvedNavItem[] | undefined | string | boolean | number;
+export type NavGroupRecord = Record<string, NavGroup>;
+export type ResolvedConfigLinks = NavGroup | NavGroupRecord;

package/src/types/portal/src/shared/types/searchDocument.ts

@@ -1,8 +1,10 @@
+import type { ProductConfig } from "@theme/config";
+
 export interface OperationParameter {
-    name: string | string[];
-    description: string | string[];
-    place: string;
-    path?: string[];
+  name: string | string[];
+  description: string | string[];
+  place: string;
+  path?: string[];
 }
 
 export const PERMISSION_PROP_NAME = 'redocly::permission';
@@ -16,5 +18,6 @@ export interface SearchDocument {
   pathName?: string | string[];
   parameters?: OperationParameter[];
   metadata?: Record<string, any>;
+  product?: ProductConfig;
   [PERMISSION_PROP_NAME]?: string;
 }

package/src/ui/darkColors.tsx

@@ -81,6 +81,8 @@ export const darkMode = css`
   --page-403-description-text-color: #fff;
   --checkbox-backround-color: var(--color-secondary-900);
   --checkbox-checked-backround-color: var(--color-primary-400);
+  --select-list-item-active-background-color: #282828;
+  --dropdown-list-item-active-background-color: #282828;
 
   background-color: var(--background-color);
   color: var(--text-color);

package/src/ui/index.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 
 export * from '@theme/ui/Background';
 export * from '@theme/ui/Box';
-export * from '@theme/ui/Dropdown';
 export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
 export * from '@theme/ui/ArrowBack';

package/lib/components/Navbar/NavbarDropdown.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { ResolvedNavLinkItem } from '../../types/portal';
-interface NavbarDropdownProps {
-    items: ResolvedNavLinkItem[];
-    className?: string;
-}
-export declare function NavbarDropdown({ items, className }: NavbarDropdownProps): JSX.Element;
-export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/lib/components/Navbar/NavbarDropdown.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownWrapper = exports.NavbarDropdown = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Link_1 = require("../../mocks/Link");
-const hooks_1 = require("../../mocks/hooks");
-function NavbarDropdown({ items, className }) {
-    const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown", className: className }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
-        react_1.default.createElement(Link_1.Link, { to: item.link }, translate(item.labelTranslationKey, item.label)))))));
-}
-exports.NavbarDropdown = NavbarDropdown;
-exports.DropdownWrapper = styled_components_1.default.div `
-  display: none;
-  position: absolute;
-  background: var(--navbar-dropdown-background);
-  border: var(--navbar-item-border);
-  border-radius: var(--navbar-item-border-radius);
-  padding: 10px 15px;
-  width: max-content;
-  line-height: 1rem;
-  box-shadow: var(--navbar-dropdown-shadow);
-  & > div {
-    text-align: left;
-    padding: 10px 0;
-    cursor: pointer;
-    a {
-      color: var(--navbar-text-color);
-      text-decoration: none;
-    }
-    :hover {
-      text-decoration: underline;
-    }
-  }
-`;
-//# sourceMappingURL=NavbarDropdown.js.map

package/lib/components/Profile/UserProfileMenu.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface UserProfileMenuProps {
-    setIsOpened: (isOpen: boolean) => void;
-    handleLogout: () => void;
-    hasDeveloperOnboarding: boolean;
-}
-export declare function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, }: UserProfileMenuProps): JSX.Element;
-export {};

package/lib/components/Profile/UserProfileMenu.js

@@ -1,93 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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.UserProfileMenu = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const Link_1 = require("../../mocks/Link");
-const useThemeConfig_1 = require("../../hooks/useThemeConfig");
-const hooks_1 = require("../../mocks/hooks");
-function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, }) {
-    var _a;
-    const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
-    const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        myApps: 'theme.profile.myApps',
-        logout: 'theme.profile.logout',
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledUl, { onClick: () => setIsOpened(false) },
-            hasDeveloperOnboarding ? (react_1.default.createElement(Link_1.Link, { to: "/apps" },
-                react_1.default.createElement(StyledLi, { "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')))) : null, (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.menu) === null || _a === void 0 ? void 0 :
-            _a.map((item) => (react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '' },
-                react_1.default.createElement(StyledLi, { separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label)))),
-            react_1.default.createElement(StyledLi, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout, role: "link" }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')))));
-}
-exports.UserProfileMenu = UserProfileMenu;
-const StyledUl = styled_components_1.default.ul `
-  margin: var(--profile-menu-margin);
-  padding: var(--profile-menu-padding);
-  list-style: none;
-  background-color: var(--profile-menu-background-color);
-  min-width: 100px;
-  a {
-    text-decoration: none;
-  }
-`;
-const StyledLi = styled_components_1.default.li `
-  cursor: pointer;
-  font-size: var(--profile-menu-item-font-size);
-  font-family: var(--profile-menu-item-font-family);
-  font-weight: var(--profile-menu-item-font-weight);
-  line-height: var(--profile-menu-item-line-height);
-  color: var(--profile-menu-item-text-color);
-  text-align: var(--profile-menu-item-text-align);
-
-  list-style: none;
-
-  padding: var(--profile-menu-item-padding-vertical) var(--profile-menu-item-padding-horizontal);
-
-  transition: background-color 0.25s ease 0s;
-
-  &:hover {
-    color: var(--profile-menu-item-hover-text-color);
-    background-color: var(--profile-menu-item-hover-background-color);
-    text-decoration: var(--profile-menu-item-hover-text-decoration);
-  }
-  &:active {
-    color: var(--profile-menu-item-active-text-color);
-    background-color: var(--profile-menu-item-active-background-color);
-    text-decoration: var(--profile-menu-item-active-text-decoration);
-  }
-
-  ${({ separatorLine }) => separatorLine &&
-    (0, styled_components_1.css) `
-      border-bottom: 1px solid var(--profile-menu-item-separator-line-color);
-    `}
-`;
-//# sourceMappingURL=UserProfileMenu.js.map

package/src/components/Navbar/NavbarDropdown.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-import { useTranslate } from '@portal/hooks';
-
-interface NavbarDropdownProps {
-  items: ResolvedNavLinkItem[];
-  className?: string;
-}
-
-export function NavbarDropdown({ items, className }: NavbarDropdownProps): JSX.Element {
-  const { translate } = useTranslate();
-  return (
-    <DropdownWrapper data-component-name="Navbar/NavbarDropdown" className={className}>
-      {items.map((item, index) => (
-        <div key={`${item.label}_${index}`}>
-          <Link to={item.link}>{translate(item.labelTranslationKey, item.label)}</Link>
-        </div>
-      ))}
-    </DropdownWrapper>
-  );
-}
-
-export const DropdownWrapper = styled.div`
-  display: none;
-  position: absolute;
-  background: var(--navbar-dropdown-background);
-  border: var(--navbar-item-border);
-  border-radius: var(--navbar-item-border-radius);
-  padding: 10px 15px;
-  width: max-content;
-  line-height: 1rem;
-  box-shadow: var(--navbar-dropdown-shadow);
-  & > div {
-    text-align: left;
-    padding: 10px 0;
-    cursor: pointer;
-    a {
-      color: var(--navbar-text-color);
-      text-decoration: none;
-    }
-    :hover {
-      text-decoration: underline;
-    }
-  }
-`;

package/src/components/Profile/UserProfileMenu.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import { Link } from '@portal/Link';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { useTranslate } from '@portal/hooks';
-
-interface UserProfileMenuProps {
-  setIsOpened: (isOpen: boolean) => void;
-  handleLogout: () => void;
-  hasDeveloperOnboarding: boolean;
-}
-
-export function UserProfileMenu({
-  hasDeveloperOnboarding,
-  setIsOpened,
-  handleLogout,
-}: UserProfileMenuProps): JSX.Element {
-  const { userProfile } = useThemeConfig();
-  const { translate } = useTranslate();
-  const translationKeys = {
-    myApps: 'theme.profile.myApps',
-    logout: 'theme.profile.logout',
-  };
-
-  return (
-    <>
-      <StyledUl onClick={() => setIsOpened(false)}>
-        {hasDeveloperOnboarding ? (
-          <Link to="/apps">
-            <StyledLi data-translation-key={translationKeys.myApps}>
-              {translate(translationKeys.myApps, 'My Apps')}
-            </StyledLi>
-          </Link>
-        ) : null}
-
-        {userProfile?.menu?.map((item) => (
-          <Link external={item.external} key={item.label} to={item.link || ''}>
-            <StyledLi separatorLine={item?.separatorLine}>{item.label}</StyledLi>
-          </Link>
-        ))}
-
-        <StyledLi
-          onClick={() => handleLogout()}
-          data-translation-key={translationKeys.logout}
-          role="link"
-        >
-          {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
-        </StyledLi>
-      </StyledUl>
-    </>
-  );
-}
-
-const StyledUl = styled.ul`
-  margin: var(--profile-menu-margin);
-  padding: var(--profile-menu-padding);
-  list-style: none;
-  background-color: var(--profile-menu-background-color);
-  min-width: 100px;
-  a {
-    text-decoration: none;
-  }
-`;
-
-const StyledLi = styled.li<{ separatorLine?: boolean }>`
-  cursor: pointer;
-  font-size: var(--profile-menu-item-font-size);
-  font-family: var(--profile-menu-item-font-family);
-  font-weight: var(--profile-menu-item-font-weight);
-  line-height: var(--profile-menu-item-line-height);
-  color: var(--profile-menu-item-text-color);
-  text-align: var(--profile-menu-item-text-align);
-
-  list-style: none;
-
-  padding: var(--profile-menu-item-padding-vertical) var(--profile-menu-item-padding-horizontal);
-
-  transition: background-color 0.25s ease 0s;
-
-  &:hover {
-    color: var(--profile-menu-item-hover-text-color);
-    background-color: var(--profile-menu-item-hover-background-color);
-    text-decoration: var(--profile-menu-item-hover-text-decoration);
-  }
-  &:active {
-    color: var(--profile-menu-item-active-text-color);
-    background-color: var(--profile-menu-item-active-background-color);
-    text-decoration: var(--profile-menu-item-active-text-decoration);
-  }
-
-  ${({ separatorLine }) =>
-    separatorLine &&
-    css`
-      border-bottom: 1px solid var(--profile-menu-item-separator-line-color);
-    `}
-`;