@redocly/theme 0.52.0-next.4 → 0.52.0

package/lib/components/Navbar/NavbarItem.js

@@ -46,7 +46,7 @@ function NavbarItem({ navItem, className }) {
     if (navItem.type !== 'link' && !navItem.items)
         return null;
     const item = navItem;
-    const normalizedPath = item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link;
+    const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send('navbar_menu_item_clicked', { type: item.type }), external: item.external, target: item.target, to: item.link },
@@ -59,7 +59,7 @@ function NavbarItem({ navItem, className }) {
         const groupItemsComponents = groupItems.map((item, index) => {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey },
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
                 react_1.default.createElement(NavbarIcon, { url: item.icon }),
                 react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                 item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));

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

@@ -11,7 +11,7 @@ function useLanguagePicker() {
     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 newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)((0, utils_1.withoutPathPrefix)(location.pathname), defaultLocale, value, locales));
         const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
         loadAndNavigate({ navigate, to: newUrlWithLanguage });
     }

package/lib/core/utils/menu.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
 exports.getMenuItemType = getMenuItemType;
-const urls_1 = require("../../core/utils/urls");
 const utils_1 = require("../../core/utils");
 const constants_1 = require("../../core/constants");
 const TRANSLATION_KEYS = {
@@ -23,7 +22,7 @@ const isItemActive = (item, defaultLocale, currentLocale, locales, location) =>
     const link = item.languageInsensitive
         ? item.link || ''
         : (0, utils_1.getPathnameForLocale)(item.link || '/', defaultLocale, currentLocale, locales);
-    return pathHash === (0, urls_1.withPathPrefix)(link);
+    return pathHash === (0, utils_1.withPathPrefix)(link);
 };
 exports.isItemActive = isItemActive;
 const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
@@ -37,7 +36,7 @@ const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
         items: locales
             .filter((locale) => locale.code !== currentLocale)
             .map((locale) => {
-            const newLangPathname = (0, urls_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
+            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)((0, utils_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales));
             const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
             return {
                 type: 'link',

package/lib/core/utils/urls.d.ts

@@ -1,10 +1,14 @@
 import type { Locale } from '../../core/types';
-export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
+export declare function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]): string;
 export declare function withPathPrefix(url: string): string;
 export declare function withoutPathPrefix(pathname: string): string;
 export declare function withoutHash(url: undefined | null): undefined;
 export declare function withoutHash(url: string): string;
 export declare function withoutHash(url: string | undefined): string | undefined;
+/**
+ *
+ * @returns url with leading and without trailing slash or empty string, e.g. '/prefix'
+ */
 export declare function getPathPrefix(): string;
 export declare function normalizePathPrefix(prefix: string): string;
 export declare function addLeadingSlash(url: string): string;
@@ -21,7 +25,10 @@ export declare function slash(path: string): string;
 export declare function addTrailingSlash(url: string): string;
 /**
  * Adds locale to pathname, or replaces current locale in pathname with a new one
- * Also handles path prefix
+ * @param originalPathname - Pathname without api prefix
+ * @param defaultLocale - Default locale code
+ * @param newLocale - New locale code to apply
+ * @param allLocales - Array of all available locales
  */
 export declare function getPathnameForLocale(originalPathname: string, defaultLocale: string, newLocale: string, allLocales: Locale[]): string;
 export declare function getLocaleFromPathname(pathname: string, defaultLocale?: string, allLocales?: Locale[]): string;

package/lib/core/utils/urls.js

@@ -38,6 +38,10 @@ function withoutHash(url) {
         return undefined;
     return url.split('#')[0];
 }
+/**
+ *
+ * @returns url with leading and without trailing slash or empty string, e.g. '/prefix'
+ */
 function getPathPrefix() {
     if (process.env.REDOCLY_PREFIX_PATHS) {
         return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
@@ -80,17 +84,19 @@ function addTrailingSlash(url) {
 }
 /**
  * Adds locale to pathname, or replaces current locale in pathname with a new one
- * Also handles path prefix
+ * @param originalPathname - Pathname without api prefix
+ * @param defaultLocale - Default locale code
+ * @param newLocale - New locale code to apply
+ * @param allLocales - Array of all available locales
  */
 function getPathnameForLocale(originalPathname, defaultLocale, newLocale, allLocales) {
-    const pathnameWithoutPrefix = withoutPathPrefix(originalPathname);
     const currentLocale = getLocaleFromPathname(originalPathname, defaultLocale, allLocales);
     if (currentLocale === newLocale) {
-        return pathnameWithoutPrefix;
+        return originalPathname;
     }
     const pathnameWithoutLocale = currentLocale === defaultLocale
-        ? pathnameWithoutPrefix
-        : pathnameWithoutPrefix.slice(currentLocale.length + 1);
+        ? originalPathname
+        : originalPathname.slice(currentLocale.length + 1);
     const newLocalePrefix = newLocale === defaultLocale ? '' : '/' + newLocale;
     return `${newLocalePrefix.toLowerCase()}${pathnameWithoutLocale}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.52.0-next.4",
+  "version": "0.52.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",
-    "@redocly/config": "0.22.2"
+    "@redocly/config": "0.23.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Navbar/NavbarItem.tsx

@@ -33,7 +33,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
 
   const item = navItem as ResolvedNavLinkItem;
   const normalizedPath =
-    item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link;
+    (item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link) || '';
 
   const isActive =
     pathname ===
@@ -69,6 +69,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           separator={item.type === 'separator'}
           separatorLine={item.separatorLine}
           data-translation-key={item.labelTranslationKey}
+          external={item.external}
         >
           <NavbarIcon url={item.icon} />
           <NavbarLabel data-translation-key={item.labelTranslationKey}>

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

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import type { L10nConfig } from '@redocly/theme/core/types';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { getPathnameForLocale, withPathPrefix } from '@redocly/theme/core/utils';
+import { getPathnameForLocale, withPathPrefix, withoutPathPrefix } from '@redocly/theme/core/utils';
 
 export function useLanguagePicker(): {
   currentLocale: L10nConfig['locales'][number] | undefined;
@@ -19,7 +19,7 @@ export function useLanguagePicker(): {
 
   function setLocale(value: string) {
     const newLangPathname = withPathPrefix(
-      getPathnameForLocale(location.pathname, defaultLocale, value, locales),
+      getPathnameForLocale(withoutPathPrefix(location.pathname), defaultLocale, value, locales),
     );
 
     const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;

package/src/core/utils/menu.ts

@@ -1,8 +1,7 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router-dom';
 
-import { withPathPrefix } from '@redocly/theme/core/utils/urls';
-import { getPathnameForLocale } from '@redocly/theme/core/utils';
+import { getPathnameForLocale, withoutPathPrefix, withPathPrefix } from '@redocly/theme/core/utils';
 import { type Locale, type TFunction, type ItemState } from '@redocly/theme/core/types';
 import { MenuItemType } from '@redocly/theme/core/constants';
 
@@ -66,7 +65,12 @@ export const buildLanguagesGroup = (
       .filter((locale) => locale.code !== currentLocale)
       .map((locale) => {
         const newLangPathname = withPathPrefix(
-          getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
+          getPathnameForLocale(
+            withoutPathPrefix(location.pathname),
+            defaultLocale,
+            locale.code,
+            locales,
+          ),
         );
         const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
         return {

package/src/core/utils/urls.ts

@@ -2,7 +2,7 @@ import type { Locale } from '@redocly/theme/core/types';
 
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
 
-export function combineUrls(baseURL: string, ...relativeURLs: string[]) {
+export function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]) {
   let res = baseURL;
   for (let relativeURL of relativeURLs) {
     res = relativeURL
@@ -32,6 +32,10 @@ export function withoutHash(url: string | undefined | null): string | undefined
   return url.split('#')[0];
 }
 
+/**
+ *
+ * @returns url with leading and without trailing slash or empty string, e.g. '/prefix'
+ */
 export function getPathPrefix() {
   if (process.env.REDOCLY_PREFIX_PATHS) {
     return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
@@ -52,7 +56,6 @@ export function addLeadingSlash(url: string): string {
 export function removeTrailingSlash(url: string): string {
   return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
 }
-
 export function removeLeadingSlash(url: string): string {
   return url.startsWith('/') ? url.substring(1) : url;
 }
@@ -85,7 +88,10 @@ export function addTrailingSlash(url: string): string {
 
 /**
  * Adds locale to pathname, or replaces current locale in pathname with a new one
- * Also handles path prefix
+ * @param originalPathname - Pathname without api prefix
+ * @param defaultLocale - Default locale code
+ * @param newLocale - New locale code to apply
+ * @param allLocales - Array of all available locales
  */
 export function getPathnameForLocale(
   originalPathname: string,
@@ -93,18 +99,16 @@ export function getPathnameForLocale(
   newLocale: string,
   allLocales: Locale[],
 ) {
-  const pathnameWithoutPrefix = withoutPathPrefix(originalPathname);
-
   const currentLocale = getLocaleFromPathname(originalPathname, defaultLocale, allLocales);
 
   if (currentLocale === newLocale) {
-    return pathnameWithoutPrefix;
+    return originalPathname;
   }
 
   const pathnameWithoutLocale =
     currentLocale === defaultLocale
-      ? pathnameWithoutPrefix
-      : pathnameWithoutPrefix.slice(currentLocale.length + 1);
+      ? originalPathname
+      : originalPathname.slice(currentLocale.length + 1);
 
   const newLocalePrefix = newLocale === defaultLocale ? '' : '/' + newLocale;