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

package/lib/components/Button/ShowMoreToggleButton.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+export type ShowMoreToggleButtonProps = {
+    isExpanded: boolean;
+    onToggle: () => void;
+    className?: string;
+};
+/**
+ * "Show more" / "Show less" toggle used by truncated-value renderers
+ * (JsonViewer oversized strings, CodeBlock `maxDisplayLength`).
+ */
+export declare function ShowMoreToggleButton({ isExpanded, onToggle, className, }: ShowMoreToggleButtonProps): JSX.Element;

package/lib/components/Button/ShowMoreToggleButton.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowMoreToggleButton = ShowMoreToggleButton;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../core/hooks");
+const Button_1 = require("../../components/Button/Button");
+/**
+ * "Show more" / "Show less" toggle used by truncated-value renderers
+ * (JsonViewer oversized strings, CodeBlock `maxDisplayLength`).
+ */
+function ShowMoreToggleButton({ isExpanded, onToggle, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(Button_1.Button, { className: className, size: "small", variant: "link", onClick: onToggle }, isExpanded
+        ? translate('jsonViewer.showLess', 'Show less')
+        : translate('jsonViewer.showMore', 'Show more')));
+}
+//# sourceMappingURL=ShowMoreToggleButton.js.map

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -13,6 +13,12 @@ export type CodeBlockProps = {
     withLineNumbers?: boolean;
     startLineNumber?: number;
     highlightedHtml?: string;
+    /**
+     * Display at most this many characters of `source`, with a "Show more" toggle for the rest.
+     * Copy and report controls always receive the full source. Ignored when `highlightedHtml`
+     * or `children` are provided.
+     */
+    maxDisplayLength?: number;
     skipHighlight?: boolean;
     codeBlockRef?: (instance: HTMLPreElement | null) => void;
     codeBlockMaxHeight?: string;
@@ -41,5 +47,5 @@ type ExternalSource = {
     properties?: any;
     operation?: any;
 };
-export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, dropdown, hideCodeColors, wrapContents, children, ...rest }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, maxDisplayLength, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, dropdown, hideCodeColors, wrapContents, children, ...rest }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
 export {};

package/lib/components/CodeBlock/CodeBlock.js

@@ -55,24 +55,42 @@ const hooks_1 = require("../../core/hooks");
 const ReportDialog_1 = require("../../components/Feedback/ReportDialog");
 const CodeBlockContainer_1 = require("../../components/CodeBlock/CodeBlockContainer");
 const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControls");
+const ShowMoreToggleButton_1 = require("../../components/Button/ShowMoreToggleButton");
 function CodeBlock(_a) {
     var _b, _c, _d, _e, _f;
     var _g;
-    var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, dropdown, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "dropdown", "hideCodeColors", "wrapContents", "children"]);
+    var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, maxDisplayLength, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, dropdown, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "maxDisplayLength", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "dropdown", "hideCodeColors", "wrapContents", "children"]);
     const [sourceCode, setSourceCode] = (0, react_1.useState)((_g = (source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)))) !== null && _g !== void 0 ? _g : '');
     const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
     const { highlight } = useCodeHighlight() || {};
-    const highlightedCode = highlightedHtml
+    const dataHighlight = rest['data-highlight'];
+    const hasChildren = Boolean(children);
+    const [isSourceExpanded, setIsSourceExpanded] = (0, react_1.useState)(false);
+    const isTruncatable = maxDisplayLength !== undefined &&
+        sourceCode.length > maxDisplayLength &&
+        !highlightedHtml &&
+        !hasChildren;
+    const displayedSource = isTruncatable && !isSourceExpanded ? `${sourceCode.slice(0, maxDisplayLength)}…` : sourceCode;
+    const highlightedCode = (0, react_1.useMemo)(() => highlightedHtml
         ? withLineNumbers
             ? (0, utils_1.addLineNumbers)(highlightedHtml, startLineNumber)
             : highlightedHtml
-        : children
+        : hasChildren
             ? null
-            : highlight === null || highlight === void 0 ? void 0 : highlight(sourceCode, lang, {
+            : highlight === null || highlight === void 0 ? void 0 : highlight(displayedSource, lang, {
                 withLineNumbers,
                 startLineNumber,
-                highlight: rest['data-highlight'],
-            });
+                highlight: dataHighlight,
+            }), [
+        highlightedHtml,
+        withLineNumbers,
+        startLineNumber,
+        hasChildren,
+        highlight,
+        displayedSource,
+        lang,
+        dataHighlight,
+    ]);
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888
@@ -97,8 +115,13 @@ function CodeBlock(_a) {
                 /* eslint-disable-next-line no-warning-comments */
                 suppressHydrationWarning // TODO: investigate issue
                 : true, "data-testid": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, wrapContents: wrapContents, tabIndex: 0 }, children),
-            reportDialog.visible && (react_1.default.createElement(ReportDialog_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
+            reportDialog.visible && (react_1.default.createElement(ReportDialog_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang })))),
+        isTruncatable ? (react_1.default.createElement(TruncationToggleButton, { isExpanded: isSourceExpanded, onToggle: () => setIsSourceExpanded((expanded) => !expanded) })) : null));
 }
+const TruncationToggleButton = (0, styled_components_1.default)(ShowMoreToggleButton_1.ShowMoreToggleButton) `
+  margin: 0 var(--spacing-sm) var(--spacing-xs);
+  user-select: none;
+`;
 const ContainerWrapper = styled_components_1.default.div `
   display: grid; // prevents content to overstretch
   position: relative;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -10,6 +10,7 @@ export type DropdownProps = PropsWithChildren<{
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
+    portalled?: boolean;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
     onOpen?: () => void;
@@ -24,6 +25,7 @@ export declare const Dropdown: React.ForwardRefExoticComponent<{
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
+    portalled?: boolean;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
     onOpen?: () => void;

package/lib/components/Dropdown/Dropdown.js

@@ -32,19 +32,21 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_dom_1 = require("react-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
-exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, onOpen, }, ref) => {
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
+exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, portalled = false, onClick, onClose, onOpen, }, ref) => {
     const dropdownRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
+    const [menuStyle, setMenuStyle] = (0, react_1.useState)({});
+    const wrapperRef = ref || dropdownRef;
     const handleOpen = () => {
         setIsOpen(true);
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -71,12 +73,49 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
             handleToggle(event);
         }
     };
-    (0, hooks_1.useOutsideClick)(ref || dropdownRef, handleClose);
+    const updateMenuPosition = (0, react_1.useCallback)(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const style = { 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]);
+    (0, hooks_1.useOutsideClick)(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
     const triggerChild = react_1.default.Children.only(trigger);
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
-    return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: ref || dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
+    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, children));
+    const portalledMenu = isOpen && typeof document !== 'undefined' ? (0, react_dom_1.createPortal)(menu, document.body) : null;
+    return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: wrapperRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
-        react_1.default.createElement(ChildrenWrapper, { $placement: placement, $alignment: alignment, $isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
+        portalled ? portalledMenu : menu));
 });
 const DropdownWrapper = styled_components_1.default.div `
   --button-gap: var(--spacing-xxs);
@@ -96,13 +135,19 @@ const DropdownWrapper = styled_components_1.default.div `
 `;
 const ChildrenWrapper = styled_components_1.default.div `
   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
+    ? (0, styled_components_1.css) `
+          position: fixed;
+        `
+    : (0, styled_components_1.css) `
+          position: absolute;
+          top: ${$placement === 'top' ? 'auto' : '100%'};
+          bottom: ${$placement === 'top' ? '100%' : 'auto'};
+          left: ${$alignment === 'start' ? '0' : 'auto'};
+          right: ${$alignment === 'end' ? '0' : 'auto'};
+        `}
 `;
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/Dropdown/variables.js

@@ -10,7 +10,9 @@ exports.dropdown = (0, styled_components_1.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/lib/components/Feedback/Feedback.js

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Feedback = Feedback;
 const React = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Rating_1 = require("../../components/Feedback/Rating");
@@ -60,7 +59,6 @@ function Feedback(props) {
     const { useSubmitFeedback, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { submitFeedback } = useSubmitFeedback();
     const telemetry = useTelemetry();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
     const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), { path: props === null || props === void 0 ? void 0 : props.path, type: (props === null || props === void 0 ? void 0 : props.type) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.type) || constants_1.DEFAULT_FEEDBACK_TYPE, settings: (props === null || props === void 0 ? void 0 : props.settings) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.settings) || {}, hide: (_a = props.hide) !== null && _a !== void 0 ? _a : themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.hide });
     if (feedbackConf.hide) {
@@ -80,7 +78,7 @@ function Feedback(props) {
                     ]);
                 } })));
     };
-    return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
+    return React.createElement(React.Fragment, { key: feedbackConf.path }, renderFeedbackComponent());
 }
 const FeedbackWrapper = styled_components_1.default.div `
   padding: var(--feedback-padding);

package/lib/components/Feedback/Stars.js

@@ -45,7 +45,7 @@ function Stars({ max = 5, onChange, value }) {
     const [hovered, setHovered] = React.useState(value || 0);
     const stars = [];
     for (let index = 1; index <= max; index++) {
-        stars.push(React.createElement(Star, { "data-testid": `star-${index}`, key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) }, hovered < index ? (React.createElement(StarIcon_1.StarIcon, { color: "var(--feedback-star-color)" })) : (React.createElement(StarFilledIcon_1.StarFilledIcon, { color: "var(--feedback-star-color)" }))));
+        stars.push(React.createElement(Star, { "data-testid": `star-${index}`, key: index, "aria-label": `${index} ${index === 1 ? 'star' : 'stars'}`, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) }, hovered < index ? (React.createElement(StarIcon_1.StarIcon, { color: "var(--feedback-star-color)" })) : (React.createElement(StarFilledIcon_1.StarFilledIcon, { color: "var(--feedback-star-color)" }))));
     }
     return React.createElement(StarsWrapper, { "data-component-name": "Feedback/Stars" }, stars);
 }

package/lib/components/Footer/FooterItem.js

@@ -20,7 +20,7 @@ function FooterItem({ item, iconsOnly, className }) {
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", $iconsOnly: iconsOnly, $item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.sendFooterItemClickedMessage([(0, utils_1.getBaseDataAttributes)('footerItem', 'footer')]), "data-translation-key": item.labelTranslationKey },
+    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", $iconsOnly: iconsOnly, $item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.sendFooterItemClickedMessage([(0, utils_1.getBaseDataAttributes)('footerItem', 'footer')]), "data-translation-key": item.labelTranslationKey, "aria-label": iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : undefined },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { $iconsOnly: iconsOnly },
             react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,

package/lib/components/JsonViewer/Helpers.d.ts

@@ -5,4 +5,5 @@ export declare function JsonValue(props: {
     standalone?: boolean;
     defaultExpandLevel: number;
     expandAllSignal: boolean | undefined;
+    maxStringLength?: number;
 }): React.ReactNode;

package/lib/components/JsonViewer/Helpers.js

@@ -40,9 +40,10 @@ exports.JsonValue = JsonValue;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
+const ShowMoreToggleButton_1 = require("../../components/Button/ShowMoreToggleButton");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 function JsonValue(props) {
-    const { standalone, defaultExpandLevel, level, value, expandAllSignal } = props;
+    const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
     const indent = ' '.repeat(level * 2);
     const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
     const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
@@ -58,18 +59,19 @@ function JsonValue(props) {
     const valueType = typeof value;
     const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
     if (isPrimitive) {
+        const isOversizedString = typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             standalone ? indent : null,
-            react_1.default.createElement("span", { className: 'token ' + valueType }, JSON.stringify(value))));
+            isOversizedString ? (react_1.default.createElement(TruncatedStringValue, { value: value, maxStringLength: maxStringLength })) : (react_1.default.createElement("span", { className: 'token ' + valueType }, JSON.stringify(value)))));
     }
     const openingPunctuation = Array.isArray(value) ? '[' : '{';
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
     const valueElement = Array.isArray(value)
         ? value.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-            react_1.default.createElement(JsonValue, { value: item, level: level + 1, standalone: true, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
+            react_1.default.createElement(JsonValue, { value: item, level: level + 1, standalone: true, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
             index < value.length - 1 ? ',\n' : null)))
         : keys.map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
-            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
+            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
             index < keys.length - 1 ? ',\n' : null)));
     const openingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
@@ -86,7 +88,7 @@ function JsonValue(props) {
         closingPunctuationElement));
 }
 function JsonKeyValue(props) {
-    const { defaultExpandLevel, level, name, value, expandAllSignal } = props;
+    const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
     const indent = ' '.repeat(level * 2);
     const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
     const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
@@ -103,10 +105,10 @@ function JsonKeyValue(props) {
         openingPunctuation,
         isExpanded ? (react_1.default.createElement(react_1.default.Fragment, null,
             '\n',
-            react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
+            react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
             '\n')) : (' … '),
         isExpanded ? indent : null,
-        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }));
+        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
         isCollapsible ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
@@ -114,9 +116,20 @@ function JsonKeyValue(props) {
         ": ",
         valueElement));
 }
+function TruncatedStringValue({ value, maxStringLength, }) {
+    const [isExpanded, setExpanded] = react_1.default.useState(false);
+    const shownValue = react_1.default.useMemo(() => JSON.stringify(isExpanded ? value : `${value.slice(0, maxStringLength)}…`), [isExpanded, value, maxStringLength]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: "token string" }, shownValue),
+        ' ',
+        react_1.default.createElement(ShowMoreButton, { isExpanded: isExpanded, onToggle: () => setExpanded((v) => !v) })));
+}
 function ExpandIcon({ isExpanded, onClick, }) {
     return (react_1.default.createElement(ExpandButton, { "aria-label": "collapse", className: isExpanded ? 'expanded' : '', size: "small", variant: "text", onClick: onClick, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--text-color-helper)" }) }));
 }
+const ShowMoreButton = (0, styled_components_1.default)(ShowMoreToggleButton_1.ShowMoreToggleButton) `
+  user-select: none;
+`;
 const ExpandButton = (0, styled_components_1.default)(Button_1.Button) `
   position: absolute;
   left: -10px;

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -8,6 +8,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;
 };

package/lib/components/JsonViewer/JsonViewer.js

@@ -41,7 +41,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const Helpers_1 = require("../../components/JsonViewer/Helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, maxStringLength, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -71,7 +71,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
                 }
                 : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
-                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
+                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel), maxStringLength: maxStringLength })))));
 }
 exports.JsonViewer = (0, react_1.memo)(JsonComponent);
 const FoldingWrap = styled_components_1.default.div `

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -15,12 +15,13 @@ const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
 function LanguagePicker(props) {
     const { currentLocale, locales, getLocaleUrl } = (0, hooks_1.useLanguagePicker)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
+    const { translate } = useTranslate();
     if (locales.length < 2 || !currentLocale) {
         return null;
     }
-    const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "secondary", size: "medium" }));
+    const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "secondary", size: "medium", "aria-label": translate('languagePicker.label', 'Select language') }));
     const languageItems = locales.map((locale) => ({
         content: locale.name || locale.code || '',
         to: getLocaleUrl(locale.code),

package/lib/components/Markdown/Markdown.js

@@ -53,6 +53,7 @@ exports.Markdown = styled_components_1.default.main
   line-height: var(--md-content-line-height);
   color: var(--md-content-text-color);
   padding: 0;
+  overflow-wrap: break-word;
 
   ${({ compact }) => compact &&
     (0, styled_components_1.css) `
@@ -97,7 +98,12 @@ exports.Markdown = styled_components_1.default.main
     scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
     ${(0, heading_anchor_1.headingAnchorCss)(constants_1.ANCHOR_CLASS)};
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       display: flex;
       align-items: flex-start;
       gap: var(--spacing-sm);
@@ -306,8 +312,10 @@ exports.Markdown = styled_components_1.default.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);
@@ -335,8 +343,7 @@ exports.Markdown = styled_components_1.default.main
     }
   }
 
-  ul.${constants_1.MARKDOWN_CLASS_NAME},
-  ol.${constants_1.MARKDOWN_CLASS_NAME} {
+  ul.${constants_1.MARKDOWN_CLASS_NAME}, ol.${constants_1.MARKDOWN_CLASS_NAME} {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 
@@ -359,7 +366,7 @@ exports.Markdown = styled_components_1.default.main
     }
   }
 
-  ul > li:has(input[type='checkbox']) {
+  ul > li:has(input[type="checkbox"]) {
     list-style: var(--md-checkbox-list-item-style);
   }
 

package/lib/components/Markdown/styles/links.d.ts

@@ -1 +1,2 @@
+export declare const linkCss: import("styled-components").RuleSet<object>;
 export declare const markdownLinksCss: import("styled-components").RuleSet<object>;

package/lib/components/Markdown/styles/links.js

@@ -1,24 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdownLinksCss = void 0;
+exports.markdownLinksCss = exports.linkCss = void 0;
 const styled_components_1 = require("styled-components");
-exports.markdownLinksCss = (0, styled_components_1.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);
+exports.linkCss = (0, styled_components_1.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);
+  }
+`;
+exports.markdownLinksCss = (0, styled_components_1.css) `
+  a:not([role='button']) {
+    ${exports.linkCss}
   }
 `;
 //# sourceMappingURL=links.js.map

package/lib/components/Menu/MenuItem.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import type { MenuItemProps } from '../../core/types';
 import type { JSX } from 'react';
-export declare function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;
+declare function MenuItemImpl(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;
+/** 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 declare const MenuItem: React.MemoExoticComponent<typeof MenuItemImpl>;
+export {};

package/lib/components/Menu/MenuItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = MenuItem;
+exports.MenuItem = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
@@ -47,7 +47,19 @@ const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 const Tag_1 = require("../../components/Tag/Tag");
-function MenuItem(props) {
+/** Nearest scrollable ancestor, stopping before <body> so only the sidebar scrolls — never the page. */
+function getScrollParent(el) {
+    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) {
     var _a, _b;
     var _c;
     const { item, depth, className, onClick } = props;
@@ -65,6 +77,25 @@ function MenuItem(props) {
     const isNested = type === constants_1.MenuItemType.Group;
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.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.
+    (0, react_1.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([
             Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('sidebarItem', 'sidebar')), { label: item.label, type: item.type === 'link' || item.type === 'group' ? item.type : undefined }),
@@ -323,4 +354,14 @@ const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.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. */
+exports.MenuItem = react_1.default.memo(MenuItemImpl, (prev, next) => {
+    return (prev.item === next.item &&
+        prev.depth === next.depth &&
+        prev.isMobile === next.isMobile &&
+        prev.className === next.className);
+});
 //# sourceMappingURL=MenuItem.js.map