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

package/src/components/NavigationTabs/NavigationTabContent.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabRowItem } from '@redocly/theme/core/types';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+
+export type NavigationTabContentProps = {
+  item: NavigationTabRowItem;
+  className?: string;
+};
+
+export function NavigationTabContent({ item, className }: NavigationTabContentProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const label = translate(item.labelTranslationKey, item.label);
+
+  return (
+    <NavigationTabContentWrapper
+      data-component-name="NavigationTabs/NavigationTabContent"
+      className={className}
+    >
+      {(item.icon || item.srcSet) && <NavigationTabIcon icon={item.icon} srcSet={item.srcSet} />}
+      <NavigationTabLabel data-label={label} data-translation-key={item.labelTranslationKey}>
+        {label}
+      </NavigationTabLabel>
+      {'external' in item && item.external ? <NavigationTabExternalIcon size="10px" /> : null}
+    </NavigationTabContentWrapper>
+  );
+}
+
+const NavigationTabContentWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+`;
+
+const NavigationTabIcon = styled(GenericIcon)`
+  --icon-width: var(--navigation-tabs-item-icon-size);
+  --icon-height: var(--navigation-tabs-item-icon-size);
+  flex-shrink: 0;
+`;
+
+const NavigationTabLabel = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &::after {
+    content: attr(data-label);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    font-weight: var(--navigation-tabs-item-label-font-weight-active);
+  }
+`;
+
+const NavigationTabExternalIcon = styled(LaunchIcon)`
+  margin-left: var(--navigation-tabs-item-external-icon-margin-left);
+  flex-shrink: 0;
+`;

package/src/components/NavigationTabs/NavigationTabMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabItem } from '@redocly/theme/core/types';
+
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { NavigationTabContent } from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
+
+export type NavigationTabMenuProps = {
+  items: NavigationTabItem[];
+  className?: string;
+};
+
+export function NavigationTabMenu({ items, className }: NavigationTabMenuProps): JSX.Element {
+  return (
+    <NavigationTabMenuWrapper
+      data-component-name="NavigationTabs/NavigationTabMenu"
+      className={className}
+    >
+      <DropdownMenu>
+        {items.map((item, index) => (
+          <DropdownMenuItem
+            key={`${item.label}_${index}`}
+            to={item.link}
+            external={item.external}
+            data-translation-key={item.labelTranslationKey}
+            active={item.active}
+            aria-current={item.active ? 'page' : undefined}
+          >
+            <NavigationTabContent item={item} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenu>
+    </NavigationTabMenuWrapper>
+  );
+}
+
+const NavigationTabMenuWrapper = styled.div``;

package/src/components/NavigationTabs/NavigationTabs.tsx

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabsConfig } from '@redocly/theme/core/types';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useScrollItemIntoView, useThemeHooks } from '@redocly/theme/core/hooks';
+import { NavigationTab } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+
+export type NavigationTabsProps = {
+  config?: NavigationTabsConfig;
+  className?: string;
+};
+
+export function NavigationTabs({ config, className }: NavigationTabsProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const listRef = useRef<HTMLUListElement | null>(null);
+
+  const tabs = config?.items ?? [];
+  const activeIndex = tabs.findIndex((tab) => tab.active);
+
+  useScrollItemIntoView(listRef, activeIndex);
+
+  if (!tabs.length) {
+    return null;
+  }
+
+  return (
+    <NavigationTabsWrapper
+      data-component-name="NavigationTabs/NavigationTabs"
+      className={className}
+      aria-label={translate('navigationTabs.label', 'Navigation tabs')}
+    >
+      <NavigationTabsList ref={listRef}>
+        {tabs.map((tab, index) => (
+          <NavigationTab key={`${tab.label}_${index}`} tab={tab} />
+        ))}
+      </NavigationTabsList>
+    </NavigationTabsWrapper>
+  );
+}
+
+const NavigationTabsWrapper = styled.nav`
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--navigation-tabs-height);
+  max-width: var(--navbar-container-max-width);
+  padding: var(--navigation-tabs-padding);
+  background: var(--navigation-tabs-bg-color);
+  border-bottom: var(--navigation-tabs-bottom-border);
+  flex-shrink: 0;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const NavigationTabsList = styled.ul`
+  list-style: none;
+  margin: 0 0 calc(-1 * var(--navigation-tabs-border-width));
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--navigation-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/src/components/NavigationTabs/variables.ts

@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+export const navigationTabs = css`
+  --navigation-tabs-height: 48px; // @presenter Spacing
+  --navigation-tabs-bg-color: transparent; // @presenter Color
+  --navigation-tabs-border-color: var(--border-color-secondary);
+  --navigation-tabs-border-width: 1px;
+  --navigation-tabs-bottom-border: var(--navigation-tabs-border-width) solid var(--navigation-tabs-border-color);
+  --navigation-tabs-padding-vertical: 0;
+  --navigation-tabs-padding-horizontal: var(--spacing-xl);
+  --navigation-tabs-padding: var(--navigation-tabs-padding-vertical) var(--navigation-tabs-padding-horizontal); // @presenter Spacing
+  --navigation-tabs-gap: var(--spacing-base); // @presenter Spacing
+
+  --navigation-tabs-item-padding-vertical: var(--spacing-xxs);
+  --navigation-tabs-item-padding-horizontal: 0;
+  --navigation-tabs-item-padding: var(--navigation-tabs-item-padding-vertical) var(--navigation-tabs-item-padding-horizontal);
+  --navigation-tabs-item-content-gap: var(--spacing-xs);
+  --navigation-tabs-item-font-size: var(--font-size-base);
+  --navigation-tabs-item-line-height: var(--line-height-base);
+  --navigation-tabs-item-font-weight: var(--font-weight-regular);
+  --navigation-tabs-item-font-weight-active: var(--font-weight-medium);
+  --navigation-tabs-item-text-color: var(--navbar-text-color); // @presenter Color
+  --navigation-tabs-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-bottom-border: var(--navigation-tabs-border-width) solid transparent;
+  --navigation-tabs-item-bottom-border-hover: var(--navigation-tabs-border-width) solid var(--border-color-primary);
+  --navigation-tabs-item-bottom-border-active: var(--navigation-tabs-border-width) solid var(--border-color-inverse);
+  --navigation-tabs-item-border-color-focused: var(--button-border-color-focused);
+  --navigation-tabs-item-border-radius: var(--navbar-item-border-radius);
+  --navigation-tabs-item-icon-size: 1.25em; // @presenter Spacing
+  --navigation-tabs-item-external-icon-margin-left: 0;
+  --navigation-tabs-item-label-font-weight-active: var(--navigation-tabs-item-font-weight-active);
+  --navigation-tabs-item-transition: 150ms ease-in-out;
+`;

package/src/components/Search/SearchTrigger.tsx

@@ -31,7 +31,10 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
-  const isMac = getUserAgent().includes('Mac');
+  // A page can be cached and served to every platform, so the server renders a hidden
+  // placeholder and the browser picks the label after hydration.
+  const [isMac, setIsMac] = React.useState<boolean | undefined>(undefined);
+  React.useEffect(() => setIsMac(getUserAgent().includes('Mac')), []);
 
   return (
     <SearchTriggerWrapper
@@ -53,7 +56,9 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
         {mainShortcutKey === DEFAULT_KEYBOARD_SHORTCUTS ? (
-          <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
+          <SearchTriggerShortcut $isPending={isMac === undefined}>
+            {isMac ? '⌘K' : 'Ctrl+K'}
+          </SearchTriggerShortcut>
         ) : (
           <span>{mainShortcutKey}</span>
         )}
@@ -80,6 +85,10 @@ const SearchTriggerButton = styled(Button)`
   }
 `;
 
+const SearchTriggerShortcut = styled.span<{ $isPending: boolean }>`
+  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+`;
+
 const SearchTriggerInput = styled.div`
   display: none;
   align-items: center;

package/src/components/Segmented/Segmented.tsx

@@ -5,34 +5,43 @@ import type { ForwardedRef, ReactElement } from 'react';
 import type { SegmentedProps } from '@redocly/theme/core/types';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typed-memo';
+import { useTabList } from '@redocly/theme/core/hooks';
 
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
   ref?: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
+  const { tabListProps, getTabProps } = useTabList({
+    count: options.length,
+    activeIndex: options.findIndex((opt) => value == opt.value),
+    onChange: (index) => onChange(options[index]),
+  });
+
   return (
     <SegmentedGroup
       ref={ref}
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
-      role="tablist"
+      {...tabListProps}
       $size={size}
     >
-      {options.map((opt, index) => (
-        <React.Fragment key={index}>
-          {opt.divider}
-          <SegmentedItem
-            key={opt.label}
-            role="tab"
-            title={opt.label}
-            onClick={() => onChange(opt)}
-            $isActive={value == opt.value}
-            $size={size}
-          >
-            {opt.element || opt.label}
-          </SegmentedItem>
-        </React.Fragment>
-      ))}
+      {options.map((opt, index) => {
+        const { 'aria-controls': _noPanel, ...tabProps } = getTabProps(index);
+        return (
+          <React.Fragment key={index}>
+            {opt.divider}
+            <SegmentedItem
+              key={opt.label}
+              {...tabProps}
+              title={opt.label}
+              $isActive={value == opt.value}
+              $size={size}
+            >
+              {opt.element || opt.label}
+            </SegmentedItem>
+          </React.Fragment>
+        );
+      })}
     </SegmentedGroup>
   );
 }

package/src/components/Select/Select.tsx

@@ -63,6 +63,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   const [filteredOptions, setFilteredOptions] = useState<SelectOption<T>[]>(options);
   const [stickyInputValue, setStickyInputValue] = useState<string>(placeholder || '');
   const inputId = useId();
+  const listboxId = `${inputId}-listbox`;
 
   useOutsideClick(selectRef, () => {
     setDropdownActive(false);
@@ -189,7 +190,8 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return (
       <SelectInput
         id={inputId}
-        listboxId={inputId}
+        listboxId={listboxId}
+        expanded={dropdownActive}
         selectedOptions={selectedOptions}
         searchValue={searchValue}
         placeholder={placeholder}
@@ -223,10 +225,14 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
           setDropdownActive(!dropdownActive);
         }
       }}
-      tabIndex={0}
-      aria-haspopup="listbox"
-      aria-expanded={dropdownActive}
-      aria-label="Select option"
+      tabIndex={searchable ? undefined : 0}
+      {...(!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox' as const,
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+      })}
       onFocus={(e) => {
         if (e.target === selectRef.current) {
           selectInputRef.current?.focus();
@@ -245,7 +251,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
         alignment={alignment}
         active={!renderInput ? dropdownActive : undefined}
       >
-        <SelectDropdownMenu role="listbox" footer={footer}>
+        <SelectDropdownMenu id={listboxId} role="listbox" footer={footer}>
           {filteredOptions.length === 0 ? (
             <DropdownMenuItem disabled>
               {translate('select.noResults', 'No results')}

package/src/components/Select/SelectInput.tsx

@@ -22,6 +22,7 @@ type SelectInputProps<T> = {
   placeholder?: string;
   multiple?: boolean;
   searchable?: boolean;
+  expanded?: boolean;
   clearable?: boolean;
   inputRef?: React.ForwardedRef<HTMLInputElement>;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -48,6 +49,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
     stickyValue,
     multiple,
     searchable,
+    expanded,
     clearable,
     clearHandler,
     searchHandler,
@@ -134,6 +136,11 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
       }}
       $width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
       tabIndex={0}
+      role="combobox"
+      aria-expanded={!!expanded}
+      aria-controls={listboxId}
+      aria-autocomplete="list"
+      aria-label="Select option"
       onFocus={(e) => {
         e.stopPropagation();
       }}
@@ -156,16 +163,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   );
 
   return (
-    <SelectInputWrapper
-      id={id}
-      onFocus={onFocusHandler}
-      onClick={onClickHandler}
-      role="button"
-      aria-haspopup="listbox"
-      aria-controls={listboxId}
-      aria-owns={listboxId}
-      aria-label="Select option"
-    >
+    <SelectInputWrapper id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
       {!onlyIcon && (
         <>
           <SelectInputValue>

package/src/components/Sidebar/Sidebar.tsx

@@ -84,8 +84,8 @@ const SidebarContent = styled.aside<{ $opened: boolean; $collapsed?: boolean }>`
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: calc(var(--navbar-height) + var(--banner-height));
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  top: var(--navbar-offset);
+  height: calc(100vh - var(--navbar-offset));
   overflow-x: hidden;
   ${({ $opened }) => `
     display: ${$opened ? 'flex' : 'none'}

package/src/components/TableOfContent/TableOfContent.tsx

@@ -101,8 +101,8 @@ const TableOfContentHeader = styled.div`
 
 const TableOfContentItems = styled.div`
   position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  top: calc(var(--navbar-stack-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-stack-height) - var(--toc-offset-top));
   overflow-y: auto;
   width: var(--toc-width);
   border-left: solid 1px var(--toc-border-color);

package/src/core/constants/common.ts

@@ -18,6 +18,7 @@ export enum FEEDBACK_TYPES {
 export const DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 
 export enum MenuItemType {
+  Select = 'select',
   Separator = 'separator',
   DrillDown = 'drilldown',
   Group = 'group',

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -20,6 +20,7 @@ export const useThemeHooks = vi.fn(() => ({
     sendPageActionsButtonClickedMessage: vi.fn(),
     sendColorModeSwitchedMessage: vi.fn(),
     sendConsentChangedMessage: vi.fn(),
+    sendFilterCheckboxToggledMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({
@@ -70,6 +71,7 @@ export const useThemeHooks = vi.fn(() => ({
     items: [],
     isLoading: false,
   })),
+  useSearchFeatures: vi.fn(() => ({ askAi: false })),
   useAiSearch: vi.fn(() => ({
     askQuestion: vi.fn(),
     isGeneratingResponse: false,
@@ -117,6 +119,7 @@ export const useThemeHooks = vi.fn(() => ({
     pushDrilldownState: vi.fn(),
   }),
   useSidebarSiblingsData: vi.fn(),
+  useNavigationTabs: vi.fn(),
   useSubmitFeedback: vi.fn(() => ({
     submitFeedback: vi.fn(),
   })),

package/src/core/hooks/index.ts

@@ -21,6 +21,7 @@ export * from './menu/use-mobile-menu-levels';
 export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
+export * from './use-tab-list';
 export * from './use-focus-trap';
 export * from './use-consent-dialog';
 export * from './use-consent-telemetry';
@@ -58,3 +59,4 @@ export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
 export * from './use-anchor-positioning';
+export * from './use-scroll-item-into-view';