@redocly/theme 0.70.0-next.3 → 0.70.0-next.5

package/src/core/utils/menu.ts

@@ -3,8 +3,10 @@ import type { Location } from 'react-router';
 
 import type { Locale, TFunction } from '../types/l10n';
 import type { ItemState } from '../types/sidebar';
+import type { NavigationTabRowItem, NavigationTabsState } from '../types/navigation-tabs';
 import { MenuItemType } from '../constants/common';
-import { getPathnameForLocale, withoutPathPrefix, withPathPrefix } from './urls';
+import { addLeadingSlash, getPathnameForLocale, withoutPathPrefix, withPathPrefix } from './urls';
+import { toNavigationTabsConfig } from './navigation-tabs';
 
 const TRANSLATION_KEYS = {
   version: 'mobileMenu.version',
@@ -70,7 +72,7 @@ export const buildLanguagesGroup = (
           locale.code,
           locales,
         );
-        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        const newUrlWithLanguage = `${addLeadingSlash(newLangPathname)}${location.search}${location.hash}`;
         return {
           type: 'link',
           label: locale.name || locale.code || '',
@@ -111,8 +113,33 @@ export const buildVersionSection = (
   ];
 };
 
+export const buildNavigationTabsSelect = ({
+  navigationTabs,
+}: {
+  navigationTabs: NavigationTabsState | undefined;
+}): ItemState | undefined => {
+  const tabs = toNavigationTabsConfig({ state: navigationTabs })?.items;
+
+  if (!tabs) {
+    return;
+  }
+
+  const activeTab = tabs.find((tab) => tab.active);
+
+  return {
+    type: MenuItemType.Select,
+    label: activeTab?.label ?? 'Navigation tabs',
+    labelTranslationKey: activeTab ? activeTab.labelTranslationKey : 'navigationTabs.label',
+    items: tabs.map(toNavigationTabOption),
+    active: false,
+    hasActiveSubItem: !!activeTab,
+  };
+};
+
 export function getMenuItemType(item: ItemState): MenuItemType {
-  if (item.type === MenuItemType.Separator) {
+  if (item.type === MenuItemType.Select) {
+    return MenuItemType.Select;
+  } else if (item.type === MenuItemType.Separator) {
     return MenuItemType.Separator;
   } else if (item.menuStyle === 'drilldown') {
     return MenuItemType.DrillDown;
@@ -122,3 +149,22 @@ export function getMenuItemType(item: ItemState): MenuItemType {
     return MenuItemType.Operation;
   } else return MenuItemType.Default;
 }
+
+function toNavigationTabOption(tab: NavigationTabRowItem): ItemState {
+  const landing =
+    tab.type === 'group' ? (tab.items.find((entry) => entry.active) ?? tab.items[0]) : tab;
+
+  return {
+    type: tab.type,
+    label: tab.label,
+    labelTranslationKey: tab.labelTranslationKey,
+    icon: tab.icon,
+    srcSet: tab.srcSet,
+    link: landing?.link,
+    external: landing?.external,
+    target: landing?.target,
+    items: [],
+    active: !!tab.active,
+    hasActiveSubItem: false,
+  };
+}

package/src/core/utils/navigation-tabs.ts

@@ -0,0 +1,99 @@
+import type { ThemeHooks } from '../types/hooks';
+import type {
+  NavigationTab,
+  NavigationTabMenuEntry,
+  NavigationTabItem,
+  NavigationTabRowItem,
+  NavigationTabsConfig,
+  NavigationTabsState,
+} from '../types/navigation-tabs';
+
+import { getBaseDataAttributes } from './telemetry/get-base-data-attributes';
+
+type NavbarItemClickedPayload = Parameters<
+  ReturnType<ThemeHooks['useTelemetry']>['sendNavbarMenuItemClickedMessage']
+>[0];
+
+export function toNavigationTabsConfig({
+  state,
+}: {
+  state: NavigationTabsState | undefined;
+}): NavigationTabsConfig | undefined {
+  const items = toNavigationTabEntries(state).map(
+    (entry): NavigationTabRowItem =>
+      entry.kind === 'menu'
+        ? {
+            type: 'group',
+            label: entry.tab.label,
+            labelTranslationKey: entry.tab.labelTranslationKey,
+            icon: entry.tab.icon,
+            srcSet: entry.tab.srcSet,
+            items: entry.entries.map(({ active, ...link }) => toRowLink(link, active)),
+            active: entry.active,
+          }
+        : toRowLink(entry.link, entry.active),
+  );
+
+  return items.length ? { items } : undefined;
+}
+
+export function getNavbarItemClickedPayload(type: 'link' | 'group'): NavbarItemClickedPayload {
+  return [
+    {
+      ...getBaseDataAttributes<'navbarItem', 'navbar', 'urn:redocly:realm:ui:navbar:navbarItem'>(
+        'navbarItem',
+        'navbar',
+      ),
+      type,
+    },
+  ];
+}
+
+type NavigationTabLink = Omit<NavigationTabMenuEntry, 'tabId'>;
+
+type NavigationTabEntry =
+  | { kind: 'link'; link: NavigationTabLink; active: boolean }
+  | {
+      kind: 'menu';
+      tab: NavigationTab;
+      entries: Array<NavigationTabLink & { active: boolean }>;
+      active: boolean;
+    };
+
+function toNavigationTabEntries(state: NavigationTabsState | undefined): NavigationTabEntry[] {
+  if (!state?.tabs.length) return [];
+
+  return state.tabs.flatMap((tab): NavigationTabEntry[] => {
+    const active = state.activeTab?.tabId === tab.tabId;
+
+    if (tab.menu) {
+      const entries = tab.menu
+        .filter((menuEntry) => !!menuEntry.link)
+        .map(({ tabId, ...link }) => ({
+          ...link,
+          active: active && tabId === state.activeMenuEntry?.tabId,
+        }));
+      return entries.length ? [{ kind: 'menu', tab, entries, active }] : [];
+    }
+
+    if (!tab.link) return [];
+
+    return [
+      {
+        kind: 'link',
+        link: {
+          label: tab.label,
+          labelTranslationKey: tab.labelTranslationKey,
+          link: tab.link,
+          icon: tab.icon,
+          srcSet: tab.srcSet,
+        },
+        active,
+      },
+    ];
+  });
+}
+
+function toRowLink(link: NavigationTabLink, active: boolean): NavigationTabItem {
+  return { type: 'link', ...link, active };
+}

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -11,6 +11,7 @@ const Icon = ({
   checked?: boolean;
   onClick?: () => void;
 }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
   <span className={className} onClick={onClick}>
     {checked ? (
       <svg

package/src/icons/ChevronSortIcon/ChevronSortIcon.tsx

@@ -6,6 +6,7 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 const Icon = ({ className, onClick }: IconProps & { onClick?: () => void }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
   <svg
     className={className}
     onClick={onClick}

package/src/index.ts

@@ -53,6 +53,12 @@ export * from '@redocly/theme/components/Navbar/Navbar';
 export * from '@redocly/theme/components/Navbar/NavbarItem';
 export * from '@redocly/theme/components/Navbar/NavbarLogo';
 export * from '@redocly/theme/components/Navbar/NavbarMenu';
+/* NavigationTabs */
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabs';
+export { NavigationTab } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+export type { NavigationTabProps } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabMenu';
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
 /* Footer */
 export * from '@redocly/theme/components/Footer/Footer';
 export * from '@redocly/theme/components/Footer/FooterColumn';

package/src/layouts/PageLayout.tsx

@@ -27,7 +27,7 @@ export function PageLayout({
 const Container = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  min-height: calc(100vh - var(--navbar-offset));
 
   @media screen and (min-width: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/layouts/RootLayout.tsx

@@ -13,8 +13,8 @@ export type LayoutConfig = {
 };
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
-  const { useSearch } = useThemeHooks();
-  const { askAi } = useSearch();
+  const { useSearchFeatures } = useThemeHooks();
+  const { askAi } = useSearchFeatures();
 
   return (
     <div data-component-name="layouts/RootLayout">

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -76,7 +76,7 @@ const FilterWrapper = styled.div`
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: var(--navbar-height);
+  top: var(--navbar-stack-height);
   background-color: var(--bg-color);
   z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -64,8 +64,8 @@ const CodePanelWrapper = styled.div`
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
   overflow: clip;
-  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
-  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  --code-block-max-height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-xl));
+  top: calc(var(--navbar-stack-height) + var(--spacing-xl));
 `;

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -78,7 +78,7 @@ const DocsPanel = styled.div`
   flex-direction: column;
 
   min-height: 0;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-stack-height));
 
   padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);