@redocly/theme 0.68.0-next.4 → 0.68.0-next.6

package/src/components/Dropdown/Dropdown.tsx

@@ -1,12 +1,23 @@
-import React, { cloneElement, useRef, forwardRef } from 'react';
-import styled from 'styled-components';
-
-import type { PropsWithChildren, ReactElement } from 'react';
+import React, {
+  cloneElement,
+  useRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
+
+import type { CSSProperties, PropsWithChildren, ReactElement } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 interface TriggerProps {
   onClick?: (event: React.UIEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
@@ -27,6 +38,7 @@ export type DropdownProps = PropsWithChildren<{
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
+  portalled?: boolean;
 
   onClick?: (event: React.UIEvent) => void;
   onClose?: () => void;
@@ -46,6 +58,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       dataAttributes,
       placement,
       alignment,
+      portalled = false,
       onClick,
       onClose,
       onOpen,
@@ -53,7 +66,11 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     ref,
   ) => {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const menuRef = useRef<HTMLDivElement | null>(null);
     const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
+    const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+
+    const wrapperRef = (ref as React.RefObject<HTMLDivElement | null>) || dropdownRef;
 
     const handleOpen = () => {
       setIsOpen(true);
@@ -85,7 +102,40 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       }
     };
 
-    useOutsideClick((ref as React.RefObject<HTMLElement | null>) || dropdownRef, handleClose);
+    const updateMenuPosition = useCallback(() => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper) return;
+      const rect = wrapper.getBoundingClientRect();
+      const style: CSSProperties = { minWidth: rect.width };
+      if (placement === 'top') {
+        style.bottom = window.innerHeight - rect.top;
+      } else {
+        style.top = rect.bottom;
+      }
+      if (alignment === 'end') {
+        style.right = window.innerWidth - rect.right;
+      } else {
+        style.left = rect.left;
+      }
+      const zIndex = getComputedStyle(wrapper).getPropertyValue('--dropdown-menu-z-index').trim();
+      if (zIndex) {
+        style.zIndex = zIndex;
+      }
+      setMenuStyle(style);
+    }, [placement, alignment, wrapperRef]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (!portalled || !isOpen) return;
+      updateMenuPosition();
+      window.addEventListener('scroll', updateMenuPosition, true);
+      window.addEventListener('resize', updateMenuPosition);
+      return () => {
+        window.removeEventListener('scroll', updateMenuPosition, true);
+        window.removeEventListener('resize', updateMenuPosition);
+      };
+    }, [portalled, isOpen, updateMenuPosition]);
+
+    useOutsideClick(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
 
     const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
 
@@ -97,27 +147,37 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
     });
 
+    const menu = (
+      <ChildrenWrapper
+        ref={menuRef}
+        $placement={placement}
+        $alignment={alignment}
+        $isOpen={isOpen}
+        $portalled={portalled}
+        style={portalled ? menuStyle : undefined}
+        onClick={closeOnClick ? handleChildClick : undefined}
+      >
+        {children}
+      </ChildrenWrapper>
+    );
+
+    const portalledMenu =
+      isOpen && typeof document !== 'undefined' ? createPortal(menu, document.body) : null;
+
     return (
       <DropdownWrapper
         data-component-name="Dropdown/Dropdown"
         data-testid="dropdown"
         {...dataAttributes}
         className={className}
-        ref={ref || dropdownRef}
+        ref={wrapperRef}
         onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
         onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
         onClick={onClick}
       >
         {dropdownTrigger}
 
-        <ChildrenWrapper
-          $placement={placement}
-          $alignment={alignment}
-          $isOpen={isOpen}
-          onClick={closeOnClick ? handleChildClick : undefined}
-        >
-          {children}
-        </ChildrenWrapper>
+        {portalled ? portalledMenu : menu}
       </DropdownWrapper>
     );
   },
@@ -140,14 +200,26 @@ const DropdownWrapper = styled.div`
   text-decoration: none;
 `;
 
-const ChildrenWrapper = styled.div<{ $placement?: string; $alignment?: string; $isOpen?: boolean }>`
+const ChildrenWrapper = styled.div<{
+  $placement?: string;
+  $alignment?: string;
+  $isOpen?: boolean;
+  $portalled?: boolean;
+}>`
   padding-top: var(--dropdown-menu-padding-top);
-  position: absolute;
-  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
-  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
-  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
   display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};
-
   z-index: var(--dropdown-menu-z-index);
+
+  ${({ $portalled, $placement, $alignment }) =>
+    $portalled
+      ? css`
+          position: fixed;
+        `
+      : css`
+          position: absolute;
+          top: ${$placement === 'top' ? 'auto' : '100%'};
+          bottom: ${$placement === 'top' ? '100%' : 'auto'};
+          left: ${$alignment === 'start' ? '0' : 'auto'};
+          right: ${$alignment === 'end' ? '0' : 'auto'};
+        `}
 `;

package/src/components/Dropdown/variables.ts

@@ -8,7 +8,9 @@ export const dropdown = css`
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
-  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
+  /* One below --z-index-raised (the sticky Navbar) so a portaled menu, which is
+     appended to <body> after the navbar, never paints over it on a z-index tie. */
+  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/src/components/Feedback/Feedback.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import type { FeedbackProps } from '@redocly/theme/core/types';
@@ -28,7 +27,6 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
   const { useSubmitFeedback, useTelemetry } = useThemeHooks();
   const { submitFeedback } = useSubmitFeedback();
   const telemetry = useTelemetry();
-  const { pathname } = useLocation();
   const { feedback: themeFeedbackConf } = useThemeConfig();
   const feedbackConf = {
     ...themeFeedbackConf,
@@ -75,7 +73,7 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
     );
   };
 
-  return <React.Fragment key={pathname}>{renderFeedbackComponent()}</React.Fragment>;
+  return <React.Fragment key={feedbackConf.path}>{renderFeedbackComponent()}</React.Fragment>;
 }
 
 const FeedbackWrapper = styled.div`

package/src/components/Feedback/Stars.tsx

@@ -22,6 +22,7 @@ export function Stars({ max = 5, onChange, value }: StarsProps): JSX.Element {
       <Star
         data-testid={`star-${index}`}
         key={index}
+        aria-label={`${index} ${index === 1 ? 'star' : 'stars'}`}
         onClick={() => onChange(index)}
         onMouseOver={() => setHovered(index)}
         onMouseLeave={() => !value && setHovered(0)}

package/src/components/Footer/FooterItem.tsx

@@ -48,6 +48,9 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
             telemetry.sendFooterItemClickedMessage([getBaseDataAttributes('footerItem', 'footer')])
           }
           data-translation-key={item.labelTranslationKey}
+          aria-label={
+            iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : undefined
+          }
         >
           {hasIcon ? (
             <FooterLinkIcon $iconsOnly={iconsOnly}>

package/src/components/JsonViewer/Helpers.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 
 import { Button } from '@redocly/theme/components/Button/Button';
+import { ShowMoreToggleButton } from '@redocly/theme/components/Button/ShowMoreToggleButton';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export function JsonValue(props: {
@@ -13,8 +14,9 @@ export function JsonValue(props: {
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
   defaultExpandLevel: number;
   expandAllSignal: boolean | undefined;
+  maxStringLength?: number;
 }): React.ReactNode {
-  const { standalone, defaultExpandLevel, level, value, expandAllSignal } = props;
+  const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
 
   const [isExpandedState, setExpanded] = React.useState(
@@ -37,10 +39,16 @@ export function JsonValue(props: {
   const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
 
   if (isPrimitive) {
+    const isOversizedString =
+      typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
     return (
       <>
         {standalone ? indent : null}
-        <span className={'token ' + valueType}>{JSON.stringify(value)}</span>
+        {isOversizedString ? (
+          <TruncatedStringValue value={value} maxStringLength={maxStringLength} />
+        ) : (
+          <span className={'token ' + valueType}>{JSON.stringify(value)}</span>
+        )}
       </>
     );
   }
@@ -57,6 +65,7 @@ export function JsonValue(props: {
             standalone={true}
             defaultExpandLevel={defaultExpandLevel}
             expandAllSignal={expandAllSignal}
+            maxStringLength={maxStringLength}
           />
           {index < value.length - 1 ? ',\n' : null}
         </React.Fragment>
@@ -69,6 +78,7 @@ export function JsonValue(props: {
             level={level + 1}
             defaultExpandLevel={defaultExpandLevel}
             expandAllSignal={expandAllSignal}
+            maxStringLength={maxStringLength}
           />
           {index < keys.length - 1 ? ',\n' : null}
         </React.Fragment>
@@ -109,8 +119,9 @@ function JsonKeyValue(props: {
   level: number;
   defaultExpandLevel: number;
   expandAllSignal: boolean | undefined;
+  maxStringLength?: number;
 }): React.ReactNode {
-  const { defaultExpandLevel, level, name, value, expandAllSignal } = props;
+  const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
   const keys: string[] =
     (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
@@ -141,6 +152,7 @@ function JsonKeyValue(props: {
             level={level}
             defaultExpandLevel={defaultExpandLevel}
             expandAllSignal={expandAllSignal}
+            maxStringLength={maxStringLength}
           />
           {'\n'}
         </>
@@ -156,6 +168,7 @@ function JsonKeyValue(props: {
       level={level}
       defaultExpandLevel={defaultExpandLevel}
       expandAllSignal={expandAllSignal}
+      maxStringLength={maxStringLength}
     />
   );
 
@@ -170,6 +183,27 @@ function JsonKeyValue(props: {
   );
 }
 
+function TruncatedStringValue({
+  value,
+  maxStringLength,
+}: {
+  value: string;
+  maxStringLength: number;
+}): JSX.Element {
+  const [isExpanded, setExpanded] = React.useState(false);
+  const shownValue = React.useMemo(
+    () => JSON.stringify(isExpanded ? value : `${value.slice(0, maxStringLength)}…`),
+    [isExpanded, value, maxStringLength],
+  );
+
+  return (
+    <>
+      <span className="token string">{shownValue}</span>{' '}
+      <ShowMoreButton isExpanded={isExpanded} onToggle={() => setExpanded((v) => !v)} />
+    </>
+  );
+}
+
 function ExpandIcon({
   isExpanded,
   onClick,
@@ -189,6 +223,10 @@ function ExpandIcon({
   );
 }
 
+const ShowMoreButton = styled(ShowMoreToggleButton)`
+  user-select: none;
+`;
+
 const ExpandButton = styled(Button)`
   position: absolute;
   left: -10px;

package/src/components/JsonViewer/JsonViewer.tsx

@@ -17,6 +17,8 @@ export type JsonProps = {
   className?: string;
   expandLevel: number;
   startLineNumber?: number;
+  /** Truncate string values longer than this at render time (full value stays available for copy). */
+  maxStringLength?: number;
   onCopyClick?: () => void;
   onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };
@@ -29,6 +31,7 @@ function JsonComponent({
   onPanelToggle,
   title,
   controls = {},
+  maxStringLength,
 }: JsonProps): JSX.Element {
   const showFoldingButtons =
     data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
@@ -89,6 +92,7 @@ function JsonComponent({
             standalone={true}
             expandAllSignal={expandAllSignal}
             defaultExpandLevel={Math.max(1, expandLevel)}
+            maxStringLength={maxStringLength}
           />
         </FoldingWrap>
       </CodeBlock>

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -20,8 +20,9 @@ export type LanguagePickerProps = {
 
 export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
   const { currentLocale, locales, getLocaleUrl } = useLanguagePicker();
-  const { useTelemetry } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
   const telemetry = useTelemetry();
+  const { translate } = useTranslate();
 
   if (locales.length < 2 || !currentLocale) {
     return null;
@@ -32,6 +33,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
       icon={<GlobalOutlinedIcon color="--button-content-color" />}
       variant="secondary"
       size="medium"
+      aria-label={translate('languagePicker.label', 'Select language')}
     />
   );
 

package/src/components/Markdown/Markdown.tsx

@@ -38,6 +38,7 @@ export const Markdown = styled.main
   line-height: var(--md-content-line-height);
   color: var(--md-content-text-color);
   padding: 0;
+  overflow-wrap: break-word;
 
   ${({ compact }) =>
     compact &&
@@ -85,7 +86,12 @@ export const Markdown = styled.main
     scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
     ${headingAnchorCss(ANCHOR_CLASS)};
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       display: flex;
       align-items: flex-start;
       gap: var(--spacing-sm);
@@ -294,8 +300,10 @@ export const Markdown = styled.main
   }
 
   blockquote {
-    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
-    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
+    margin: var(--md-blockquote-margin-vertical)
+      var(--md-blockquote-margin-horizontal);
+    padding: var(--md-blockquote-padding-vertical)
+      var(--md-blockquote-padding-horizontal);
     border-left: var(--md-blockquote-border-left);
     background-color: var(--md-blockquote-bg-color);
     color: var(--md-blockquote-text-color);
@@ -323,8 +331,7 @@ export const Markdown = styled.main
     }
   }
 
-  ul.${MARKDOWN_CLASS_NAME},
-  ol.${MARKDOWN_CLASS_NAME} {
+  ul.${MARKDOWN_CLASS_NAME}, ol.${MARKDOWN_CLASS_NAME} {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 
@@ -347,7 +354,7 @@ export const Markdown = styled.main
     }
   }
 
-  ul > li:has(input[type='checkbox']) {
+  ul > li:has(input[type="checkbox"]) {
     list-style: var(--md-checkbox-list-item-style);
   }
 

package/src/components/Markdown/styles/links.ts

@@ -1,21 +1,25 @@
 import { css } from 'styled-components';
 
-export const markdownLinksCss = css`
-  a:not([role='button']) {
-    text-decoration: var(--link-decoration);
-    text-underline-offset: var(--link-underline-offset);
-    color: var(--link-color-primary);
-    font-weight: var(--link-font-weight);
+export const linkCss = css`
+  text-decoration: var(--link-decoration);
+  text-underline-offset: var(--link-underline-offset);
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+
+  &:visited {
+    color: var(--link-color-visited);
+    text-decoration: var(--link-decoration-visited);
+  }
 
-    &:visited {
-      color: var(--link-color-visited);
-      text-decoration: var(--link-decoration-visited);
-    }
+  &:hover,
+  &:focus {
+    text-decoration: var(--link-decoration-hover);
+    color: var(--link-color-primary-hover);
+  }
+`;
 
-    &:hover,
-    &:focus {
-      text-decoration: var(--link-decoration-hover);
-      color: var(--link-color-primary-hover);
-    }
+export const markdownLinksCss = css`
+  a:not([role='button']) {
+    ${linkCss}
   }
 `;

package/src/components/Menu/MenuItem.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ItemState, MenuItemProps } from '@redocly/theme/core/types';
@@ -20,7 +20,20 @@ import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIc
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { Tag, ContentWrapper } from '@redocly/theme/components/Tag/Tag';
 
-export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
+/** Nearest scrollable ancestor, stopping before <body> so only the sidebar scrolls — never the page. */
+function getScrollParent(el: HTMLElement): HTMLElement | null {
+  let node = el.parentElement;
+  while (node && node !== document.body) {
+    const { overflowY } = getComputedStyle(node);
+    if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+
+function MenuItemImpl(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
@@ -40,6 +53,25 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const hasChevron = isNested && !isDrilldown;
   const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
+  // When this item becomes the active one (via navigation or scroll-spy), keep
+  // it visible by scrolling only the sidebar's own scroll container.
+  useEffect(() => {
+    const el = labelRef.current;
+    if (!item.active || !el) return;
+    const scroller = getScrollParent(el);
+    if (!scroller) return;
+
+    const scrollerRect = scroller.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const margin = elRect.height;
+
+    if (elRect.top < scrollerRect.top + margin) {
+      scroller.scrollTop -= scrollerRect.top + margin - elRect.top;
+    } else if (elRect.bottom > scrollerRect.bottom - margin) {
+      scroller.scrollTop += elRect.bottom - (scrollerRect.bottom - margin);
+    }
+  }, [item.active]);
+
   const handleOnClick = () => {
     telemetry.sendSidebarItemClickedMessage([
       {
@@ -448,3 +480,16 @@ const BadgeIcon = styled(GenericIcon)`
   margin-right: var(--spacing-xxs);
   flex-shrink: 0;
 `;
+
+/** Compares only the props that actually affect this row. `item` is expected
+ *  to be reference-stable from the producer (e.g. `useMenuItems`) when the
+ *  row's state hasn't changed; `onClick` and `children` are fresh JSX from
+ *  the parent's `.map()` every render and would defeat the memo. */
+export const MenuItem = React.memo(MenuItemImpl, (prev, next) => {
+  return (
+    prev.item === next.item &&
+    prev.depth === next.depth &&
+    prev.isMobile === next.isMobile &&
+    prev.className === next.className
+  );
+});

package/src/components/Navbar/NavbarItem.tsx

@@ -92,15 +92,15 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
     });
 
     return (
-      <div data-component-name="Navbar/NavbarItem">
+      <NavbarListItem data-component-name="Navbar/NavbarItem">
         <NavbarMenuItemDropdown trigger={itemContent} triggerEvent="hover">
           <DropdownMenu>{groupItemsComponents}</DropdownMenu>
         </NavbarMenuItemDropdown>
-      </div>
+      </NavbarListItem>
     );
   }
 
-  return <div data-component-name="Navbar/NavbarItem">{itemContent}</div>;
+  return <NavbarListItem data-component-name="Navbar/NavbarItem">{itemContent}</NavbarListItem>;
 }
 
 const NavbarMenuItemDropdown = styled(Dropdown)`
@@ -109,7 +109,13 @@ const NavbarMenuItemDropdown = styled(Dropdown)`
   --dropdown-menu-item-separator-line-height: var(--navbar-separator-line-height);
 `;
 
-const NavbarMenuItem = styled.li<LinkProps & { $active: boolean }>`
+const NavbarListItem = styled.li`
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const NavbarMenuItem = styled.div<LinkProps & { $active: boolean }>`
   display: inline-block;
   padding: var(--navbar-item-padding);
   text-align: center;

package/src/components/PageActions/PageActions.tsx

@@ -83,14 +83,15 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
           {buttonAction.buttonText}
         </Button>
         {actions.length > 1 ? (
-          <StyledDropdown
+          <Dropdown
             withArrow
+            portalled
             trigger={<Button aria-label="More actions" />}
             placement="bottom"
             alignment="end"
           >
             <StyledDropdownMenu>{menuItems}</StyledDropdownMenu>
-          </StyledDropdown>
+          </Dropdown>
         ) : null}
       </ButtonGroup>
     </PageActionsWrapper>
@@ -124,10 +125,6 @@ const LinkMenuItem = styled(Link)`
   --link-decoration-hover: none;
 `;
 
-const StyledDropdown = styled(Dropdown)`
-  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1);
-`;
-
 const StyledDropdownMenu = styled(DropdownMenu)`
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
 `;

package/src/components/Panel/variables.ts

@@ -326,6 +326,7 @@ export const apiReferencePanels = css`
   * @tokens Panel try-it, request-samples, response-samples, callback samples
   */
 
+  .panel-api-docs,
   .panel-language-list,
   .panel-overview,
   .panel-download,

package/src/components/ReplayGate/ReplayGate.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type ReplayGateProps = {
+  setEnvironmentValues: (
+    envName: string,
+    values: Record<string, string | { value: string; isSecret?: boolean }>,
+  ) => void;
+  setSelectedEnvironment: (envName: string) => void;
+  selectedEnvironment?: string;
+  // The current OpenAPI description's id (from x-metadata), when known. Lets a custom
+  // ReplayGate vary behavior per API in a multi-API catalog.
+  apiId?: string;
+  children: React.ReactNode;
+};
+
+export function ReplayGate({ children }: ReplayGateProps) {
+  return <>{children}</>;
+}

package/src/components/ReplayTopBarActions/ReplayTopBarActions.tsx

@@ -0,0 +1,14 @@
+export type ReplayTopBarActionsProps = {
+  environments: ReadonlyArray<{ name: string }>;
+  activeEnvironment: string;
+  setEnvironmentValues: (
+    envName: string,
+    values: Record<string, string | { value: string; isSecret?: boolean }>,
+  ) => void;
+  setSelectedEnvironment: (envName: string) => void;
+  apiId?: string;
+};
+
+export function ReplayTopBarActions(_props: ReplayTopBarActionsProps) {
+  return null;
+}