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

package/src/components/Search/SearchInput.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { useInputKeyCommands, useRecentSearches, useThemeHooks } from '@redocly/theme/core/hooks';
 import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
-import { getBaseDataAttributes } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type SearchInputProps = {
   placeholder?: string;
@@ -110,6 +110,11 @@ const SearchInputField = styled.input`
   &::placeholder {
     color: var(--search-input-placeholder-color);
   }
+
+  // Keep at least 16px on mobile so iOS Safari doesn't auto-zoom the viewport on focus.
+  @media screen and (max-width: ${breakpoints.small}) {
+    font-size: max(16px, var(--search-input-font-size));
+  }
 `;
 
 const ResetButton = styled(Button)`

package/src/core/hooks/use-active-section-id.ts

@@ -4,14 +4,18 @@ import throttle from 'lodash.throttle';
 import type { Location } from 'react-router-dom';
 
 import { useNavbarHeight } from './use-navbar-height';
+import { IS_BROWSER } from '../utils/dom';
 
 export type UseActiveSectionIdReturnType = string;
 
+/** Px below the top where the active section is read (accounts for next-section visibility). */
+export const SECTION_READING_LINE_OFFSET = 150;
+
 export function useActiveSectionId(
   location: Location,
   hasOverviewPage = false,
   withNavbar = true,
-  sectionOffset = 150, // use 150px to account next section visibility;
+  sectionOffset = SECTION_READING_LINE_OFFSET,
 ): UseActiveSectionIdReturnType {
   const [itemId, setItemId] = useState<string>('');
   const navbarHeight = useNavbarHeight(location);
@@ -20,6 +24,10 @@ export function useActiveSectionId(
   const scrollListener = useMemo(
     () =>
       throttle(() => {
+        if (!IS_BROWSER) {
+          return;
+        }
+
         const sections = document.querySelectorAll('[data-section-id]');
         if (sections.length < 2) {
           setItemId('');
@@ -47,6 +55,10 @@ export function useActiveSectionId(
   );
 
   useEffect(() => {
+    if (!IS_BROWSER) {
+      return;
+    }
+
     window.addEventListener('scroll', scrollListener, { capture: false });
     setTimeout(() => {
       scrollListener();

package/src/core/hooks/use-page-actions.ts

@@ -55,10 +55,11 @@ export function usePageActions(
   const themeConfig = useThemeConfig();
   const pageProps = usePageProps();
   const telemetry = useTelemetry();
-  const openApiSharedData = usePageSharedData<
+  const apiDocsSharedData = usePageSharedData<
     { options: { excludeFromSearch: boolean } } | undefined
-  >('openAPIDocsStore');
-  const openapiExcludeFromSearch = openApiSharedData?.options?.excludeFromSearch;
+  >('apiDocsStore');
+  const apiDocsExcludeFromSearch = apiDocsSharedData?.options?.excludeFromSearch;
+  const isApiDocsPage = Boolean(apiDocsSharedData);
   const mcpConfig = useMCPConfig();
 
   const { isPublic } = usePageData() || {};
@@ -94,7 +95,8 @@ export function usePageActions(
     const hideActionContext: ShouldHideActionContext = {
       pageProps,
       themeConfig,
-      openapiExcludeFromSearch,
+      apiDocsExcludeFromSearch,
+      isApiDocsPage,
       isPublic,
       mcpUrl,
       isMcpDisabled: mcpConfig.isMcpDisabled,
@@ -203,7 +205,8 @@ export function usePageActions(
   }, [
     pageProps,
     themeConfig,
-    openapiExcludeFromSearch,
+    apiDocsExcludeFromSearch,
+    isApiDocsPage,
     isPublic,
     mcpUrl,
     mcpConfig.isMcpDisabled,
@@ -273,7 +276,8 @@ function createMCPAction({
 type ShouldHideActionContext = {
   pageProps: PageProps;
   themeConfig: UiAccessibleConfig;
-  openapiExcludeFromSearch?: boolean;
+  apiDocsExcludeFromSearch?: boolean;
+  isApiDocsPage: boolean;
   isPublic?: boolean;
   mcpUrl?: string;
   isMcpDisabled: boolean;
@@ -284,7 +288,8 @@ function shouldHideAction(
   {
     pageProps,
     themeConfig,
-    openapiExcludeFromSearch,
+    apiDocsExcludeFromSearch,
+    isApiDocsPage,
     isPublic,
     mcpUrl,
     isMcpDisabled,
@@ -307,11 +312,8 @@ function shouldHideAction(
       return true;
     }
 
-    const isOpenApiPage =
-      pageProps?.metadata?.type === 'openapi' ||
-      pageProps?.metadata?.subType === 'openapi-operation';
     const isPageExcludedFromSearch =
-      pageProps?.frontmatter?.excludeFromSearch || (isOpenApiPage && openapiExcludeFromSearch);
+      pageProps?.frontmatter?.excludeFromSearch || (isApiDocsPage && apiDocsExcludeFromSearch);
 
     if (isPageExcludedFromSearch) {
       return true;

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

@@ -11,6 +11,7 @@ const fallbacks = {
     translate: (value?: string, options?: { defaultValue: string } | string) =>
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',
   }),
+  useTranslationKeys: () => [],
   useSubmitFeedback: () => ({ submitFeedback: () => {} }),
   useTelemetry: useTelemetryFallback,
   /**

package/src/core/openapi/index.ts

@@ -30,7 +30,7 @@ export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';
 export { useThemeHooks } from '../hooks/use-theme-hooks';
 export { useOutsideClick } from '../hooks/use-outside-click';
-export { useActiveSectionId } from '../hooks/use-active-section-id';
+export { useActiveSectionId, SECTION_READING_LINE_OFFSET } from '../hooks/use-active-section-id';
 export { useModalScrollLock } from '../hooks/use-modal-scroll-lock';
 export { useSearchDialog } from '../hooks/search/use-search-dialog';
 export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';

package/src/core/styles/global.ts

@@ -833,6 +833,14 @@ const badges = css`
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
+   /**
+    * @tokens Webhook Badge
+    */
+
+  --badge-webhook-text-color: var(--color-warm-grey-1); // @presenter Color
+  --badge-webhook-bg-color: var(--color-purple-7); // @presenter Color
+  --badge-webhook-border-radius: var(--border-radius); // @presenter BorderRadius
+
   /**
     * @tokens Audience Badge
     */

package/src/core/types/hooks.ts

@@ -44,6 +44,7 @@ import { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
   useAnchorPositioning: () => { isSupported: boolean };
   useTranslate: () => { translate: TFunction };
+  useTranslationKeys: () => string[];
   /**
    * @deprecated use `useL10n` instead
    * */

package/src/core/types/l10n.ts

@@ -239,6 +239,8 @@ export type TranslationKey =
   | 'codeSnippet.report.label'
   | 'codeSnippet.expand.tooltipText'
   | 'codeSnippet.collapse.tooltipText'
+  | 'jsonViewer.showMore'
+  | 'jsonViewer.showLess'
   | 'userMenu.login'
   | 'userMenu.logout'
   | 'userMenu.devOnboardingLabel'
@@ -292,6 +294,7 @@ export type TranslationKey =
   | 'openapi.languages.moreButton.tooltipText'
   | 'openapi.servers.title'
   | 'openapi.operations'
+  | 'openapi.schemas'
   | 'openapi.webhooks'
   | 'openapi.description'
   | 'openapi.badges.deprecated'
@@ -300,6 +303,7 @@ export type TranslationKey =
   | 'openapi.request'
   | 'openapi.path'
   | 'openapi.query'
+  | 'openapi.querystring'
   | 'openapi.cookie'
   | 'openapi.header'
   | 'openapi.body'
@@ -320,6 +324,9 @@ export type TranslationKey =
   | 'openapi.required'
   | 'openapi.recursive'
   | 'openapi.complex'
+  | 'openapi.property'
+  | 'openapi.properties'
+  | 'openapi.details'
   | 'openapi.hideExample'
   | 'openapi.showExample'
   | 'openapi.expandAll'
@@ -332,6 +339,7 @@ export type TranslationKey =
   | 'openapi.discriminator.defaultMappingTooltip'
   | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'
+  | 'openapi.noRequestData'
   | 'openapi.hidePattern'
   | 'openapi.showPattern'
   | 'openapi.authorizationUrl'
@@ -363,6 +371,16 @@ export type TranslationKey =
   | 'openapi.mcp.outputExample'
   | 'asyncapi.download.description.title'
   | 'asyncapi.info.title'
+  | 'asyncapi.info.contact.url'
+  | 'asyncapi.info.contact.name'
+  | 'asyncapi.info.license'
+  | 'asyncapi.info.termsOfService'
+  | 'asyncapi.key'
+  | 'asyncapi.value'
+  | 'asyncapi.variables'
+  | 'asyncapi.required'
+  | 'asyncapi.requiredScopes'
+  | 'asyncapi.viewSecurityDetails'
   | 'graphql.download.description.title'
   | 'graphql.info.title'
   | 'graphql.info.contact.url'
@@ -383,6 +401,12 @@ export type TranslationKey =
   | 'graphql.enums'
   | 'graphql.inputs'
   | 'graphql.scalars'
+  | 'graphql.actions.show'
+  | 'graphql.actions.hide'
+  | 'graphql.actions.more'
+  | 'graphql.fields'
+  | 'graphql.inputFields'
+  | 'graphql.values'
   | 'graphql.arguments.label'
   | 'graphql.arguments.show'
   | 'graphql.arguments.hide'
@@ -401,7 +425,21 @@ export type TranslationKey =
   | 'graphql.implementedBy'
   | 'graphql.nonNull'
   | 'graphql.required'
-  | 'graphql.deprecated'
+  | 'asyncapi.badges.deprecated'
+  | 'graphql.badges.deprecated'
+  | 'asyncapi.actions.show'
+  | 'asyncapi.actions.hide'
+  | 'asyncapi.actions.more'
+  | 'asyncapi.payload'
+  | 'asyncapi.parameters'
+  | 'asyncapi.messages'
+  | 'asyncapi.contentType'
+  | 'asyncapi.moreDetails'
+  | 'asyncapi.property'
+  | 'asyncapi.properties'
+  | 'asyncapi.details'
+  | 'asyncapi.reply'
+  | 'asyncapi.servers.title'
   | 'graphql.variables'
   | 'graphql.querySample'
   | 'graphql.mutationSample'

package/src/core/types/sidebar.ts

@@ -40,6 +40,7 @@ export type SidebarNavItem = {
   linePosition?: 'top' | 'bottom';
   version?: string;
   variant?: 'primary' | 'secondary';
+  hideWhenEmpty?: boolean;
   badges?: ItemBadge[];
 };
 

package/src/layouts/ThreePanelLayout.tsx

@@ -9,6 +9,7 @@ export type ThreePanelLayoutProps = PropsWithChildren<{
   collapsedSidebar?: boolean;
   id?: string;
   className?: string;
+  onClickCapture?: React.MouseEventHandler<HTMLDivElement>;
 }>;
 
 export function ThreePanelLayout({