@redocly/theme 0.69.0-next.8 → 0.69.0

package/src/core/styles/global.ts

@@ -599,6 +599,7 @@ const links = css`
 `;
 
 
+// oxlint-disable-next-line theme/css-variable-pattern -- `--schema-labels--text-color` is a documented public variable
 const apiReferenceDocs = css`
   /* === ref docs and graphql docs specific === */
 

package/src/core/utils/class-names.ts

@@ -1,5 +1,13 @@
 const SPACE_DELIMITER = ' ';
 
+// EasyList/AdGuard ship generic cosmetic rules that hide these exact class tokens on every
+// site; the trailing underscore keeps the class usable without matching the filter lists.
+const ADBLOCK_HIDDEN_CLASS_NAMES = new Set(['product-ad', 'product-ads', 'product-inlist-ad']);
+
+export function getSafeClassName(className: string): string {
+  return ADBLOCK_HIDDEN_CLASS_NAMES.has(className) ? `${className}_` : className;
+}
+
 export function concatClassNames(...args: Array<string | undefined>): string {
   return args
     .map((className) => (className ? className.trim() : className))

package/src/markdoc/components/Accordion/Accordion.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled, { keyframes } from 'styled-components';
 
 import type { JSX, PropsWithChildren } from 'react';
 
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { ACCORDION_COMPONENT_NAME } from '@redocly/theme/core/constants';
+import { AccordionGroupContext } from '@redocly/theme/core/contexts';
 
 export type AccordionProps = {
   title: string;
@@ -22,10 +23,13 @@ export function Accordion({
   'data-source': dataSource,
   'data-hash': dataHash,
 }: PropsWithChildren<AccordionProps>): JSX.Element {
+  const groupName = useContext(AccordionGroupContext);
+
   return (
     <AccordionWrapper
       className={className}
       open={expanded}
+      name={groupName ?? undefined}
       data-component-name={ACCORDION_COMPONENT_NAME}
       data-source={dataSource}
       data-hash={dataHash}
@@ -37,7 +41,9 @@ export function Accordion({
         />
         {title}
       </AccordionSummary>
-      <AccordionBody>{children}</AccordionBody>
+      <AccordionBody>
+        <AccordionGroupContext.Provider value={null}>{children}</AccordionGroupContext.Provider>
+      </AccordionBody>
     </AccordionWrapper>
   );
 }

package/src/markdoc/components/Accordion/AccordionGroup.tsx

@@ -1,24 +1,31 @@
-import React from 'react';
+import React, { useId } from 'react';
 import styled from 'styled-components';
 
 import type { JSX, PropsWithChildren } from 'react';
 
 import { ACCORDION_GROUP_COMPONENT_NAME, ACCORDION_SELECTOR } from '@redocly/theme/core/constants';
+import { AccordionGroupContext } from '@redocly/theme/core/contexts';
 
 export type AccordionGroupProps = {
+  singleExpanded?: boolean;
   className?: string;
 };
 
 export function AccordionGroup({
+  singleExpanded = false,
   className,
   children,
 }: PropsWithChildren<AccordionGroupProps>): JSX.Element {
+  const groupName = useId();
+
   return (
     <AccordionGroupWrapper
       className={className}
       data-component-name={ACCORDION_GROUP_COMPONENT_NAME}
     >
-      {children}
+      <AccordionGroupContext.Provider value={singleExpanded ? groupName : null}>
+        {children}
+      </AccordionGroupContext.Provider>
     </AccordionGroupWrapper>
   );
 }

package/src/markdoc/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, isValidElement } from 'react';
+import React, { createElement, isValidElement, useContext } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 
@@ -9,6 +9,7 @@ import { concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { PageActionsContext } from '@redocly/theme/core/contexts';
 import {
   ANCHOR_CLASS,
   HEADING_ANCHOR_CLASS,
@@ -65,8 +66,10 @@ export function Heading({
   const { usePageProps } = useThemeHooks();
   const pageProps = usePageProps();
 
-  const isMarkdownPage =
-    pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
+  // The page-type fallback is only for backward compatibility; templates set the scope.
+  const withPageActions =
+    useContext(PageActionsContext) ??
+    (pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc');
   const headingTextId = `${id}-heading-text`;
 
   const linkEl = (
@@ -101,7 +104,7 @@ export function Heading({
       <HeadingContentWrapper>
         {linkEl}
         {headingText}
-        {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
+        {withPageActions && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
       </HeadingContentWrapper>
     </div>
   );

package/src/markdoc/tags/accordion-group.ts

@@ -3,6 +3,9 @@ import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 export const accordionGroup: MarkdocSchemaWrapper = {
   schema: {
     render: 'AccordionGroup',
+    attributes: {
+      singleExpanded: { type: Boolean, default: false },
+    },
   },
   tagName: 'accordion-group',
 };