@salesforcedevs/dx-components 1.40.4-fix-redoc-topic-v-1 → 1.40.4-scroll-3

package/lwc.config.json

@@ -140,7 +140,6 @@
         "dxUtils/lwc",
         "dxUtils/urlWatcher",
         "dxUtils/normalizers",
-        "dxUtils/topicVersion",
         "dxUtils/queryCoordinator",
         "dxUtils/recentSearches",
         "dxUtils/regexps",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.4-fix-redoc-topic-v-1",
+  "version": "1.40.4-scroll-3",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

package/src/modules/dx/button/button.css

@@ -86,11 +86,11 @@
 }
 
 .button.icon-right:not(.slot-empty) > *:nth-child(2) {
-    margin-left: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
+    margin-left: var(--dx-g-spacing-sm);
 }
 
 .button.icon-left:not(.slot-empty) > *:nth-child(2) {
-    margin-right: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .button.style-icon.slot-empty {

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -95,6 +95,12 @@ export default class CodeBlock extends LightningElement {
         ).trim();
     }
 
+    /** True once the highlighted code has been rendered into the DOM. */
+    @api
+    get rendered(): boolean {
+        return this._codeBlockRendered;
+    }
+
     @api
     get showLoadingIndicator() {
         return this._showLoadingIndicator;

package/src/modules/dx/dropdown/dropdown.css

@@ -14,30 +14,30 @@
     display: none;
 }
 
-/* Opt-in fit-content menu: hugs the labels (so it can be as narrow as the
-   shortest one) and stops at --dx-c-dropdown-menu-max-width. Defaults still
-   truncate; set --dx-c-dropdown-fit-white-space: normal to wrap instead. */
-.menu-fit-content::part(content) {
-    box-sizing: border-box;
-    width: max-content;
-    max-width: var(
-        --dx-c-dropdown-menu-max-width,
-        calc(100vw - var(--dx-g-spacing-lg))
-    );
+.menu-fit-content {
+    --dx-c-popover-width: max-content;
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
 }
 
-.menu-fit-content {
-    --dx-c-dropdown-option-min-width: 0;
-    --dx-c-dropdown-option-label-display: block;
-    --dx-c-dropdown-option-white-space: var(
-        --dx-c-dropdown-fit-white-space,
-        nowrap
-    );
-    --dx-c-dropdown-option-overflow: var(--dx-c-dropdown-fit-overflow, hidden);
-    --dx-c-dropdown-option-text-overflow: var(
-        --dx-c-dropdown-fit-text-overflow,
-        ellipsis
-    );
+.menu-fit-content .menu_list {
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content.menu-nested .menu_option:not(:first-child) {
+    border-top: var(--border);
+    margin-top: 0;
+    padding-top: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content .menu_heading {
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-sans);
+    line-height: var(--dx-g-spacing-mlg);
+    text-transform: none;
+    color: var(--dx-g-gray-10);
 }
 
 @media screen and (max-width: 1000px) {

package/src/modules/dx/dropdown/dropdown.html

@@ -9,7 +9,7 @@
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
-        placement={effectivePlacement}
+        placement={placement}
         small={small}
         width={effectiveWidth}
     >

package/src/modules/dx/dropdown/dropdown.ts

@@ -82,35 +82,20 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
-    // "fit-end" is fit-content, aligned to the trigger's end edge.
-    // "full" matches the trigger width. "fixed" and "fit-content" are unchanged.
     private get isFitContent() {
-        return this.widthMode === "fit-content" || this.widthMode === "fit-end";
+        return this.widthMode === "fit-content";
     }
 
-    private get effectivePlacement(): PopperPlacement | undefined {
-        return this.widthMode === "fit-end" ? "bottom-end" : this.placement;
-    }
-
-    // fit-content takes precedence; the misuse is surfaced in className() below.
     private get effectiveWidth() {
         return this.isFitContent ? null : this.width;
     }
 
     private get effectiveFullWidth() {
-        if (this.widthMode === "full") {
-            return true;
-        }
         return this.isFitContent ? false : this.fullWidth;
     }
 
     private get className() {
         const fitContent = this.isFitContent;
-        if (fitContent && (this.width || this.fullWidth)) {
-            console.error(
-                'The "width-mode=fit-content" and "width"/"full-width" properties cannot be provided simultaneously. "width-mode=fit-content" is prioritized; "width"/"full-width" are ignored.'
-            );
-        }
         return cx(
             this.isNested && "menu-nested",
             this.isNested &&

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -25,14 +25,8 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-
-    /* Opt-in hooks; defaults preserve today's look. */
-    padding: var(--dx-c-dropdown-option-padding, var(--dx-g-spacing-sm));
+    padding: var(--dx-g-spacing-sm);
     font-size: var(--dx-g-text-sm);
-    border-radius: var(
-        --dx-c-dropdown-option-border-radius,
-        var(--dx-g-spacing-xs)
-    );
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -65,9 +59,6 @@
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     text-align: left;
-
-    /* Opt-in: set to 0 to let a long label truncate instead of overflow. */
-    min-width: var(--dx-c-dropdown-option-min-width, auto);
 }
 
 .option-indented .option_details {
@@ -77,20 +68,10 @@
 
 .option_label {
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
-
-    /* Opt-in: set to block so text-overflow:ellipsis applies (ignored on flex). */
-    display: var(--dx-c-dropdown-option-label-display, flex);
+    display: flex;
     align-items: center;
     font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
-
-    /* Opt-in truncation: consumers set --dx-c-dropdown-option-white-space:
-       nowrap to truncate labels with an ellipsis instead of wrapping.
-       Defaults preserve today's wrapping behavior. */
-    white-space: var(--dx-c-dropdown-option-white-space, normal);
-    overflow: var(--dx-c-dropdown-option-overflow, visible);
-    overflow-wrap: var(--dx-c-dropdown-option-overflow-wrap, normal);
-    text-overflow: var(--dx-c-dropdown-option-text-overflow, clip);
 }
 
 .option-indented .option_label {

package/src/modules/dx/popover/popover.ts

@@ -106,11 +106,7 @@ export default class Popover extends LightningElement {
         if (this.control) {
             this.control.setAttribute("aria-expanded", "false");
         }
-        document.removeEventListener(
-            "click",
-            this.interactOutsideListener,
-            true
-        );
+        document.removeEventListener("click", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.removeEventListener(
@@ -136,11 +132,7 @@ export default class Popover extends LightningElement {
     // LIFECYCLE METHODS
 
     disconnectedCallback() {
-        document.removeEventListener(
-            "click",
-            this.interactOutsideListener,
-            true
-        );
+        document.removeEventListener("click", this.interactOutsideListener);
         document.removeEventListener("mousemove", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
         this.removeControlListeners();
@@ -303,11 +295,7 @@ export default class Popover extends LightningElement {
     }
 
     private attachListenersTopopover() {
-        // Capture so a click still counts as outside when a descendant
-        // calls stopPropagation (topic version pickers do, so the tree row
-        // does not navigate). Without this, opening a second picker leaves
-        // the first menu open.
-        document.addEventListener("click", this.interactOutsideListener, true);
+        document.addEventListener("click", this.interactOutsideListener);
         document.addEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.addEventListener(

package/src/modules/dx/tree/treeHandler.ts

@@ -1,18 +1,6 @@
 import type { InternalTreeNode, TreeNode } from "typings/custom";
-import type { TopicVersionOption } from "dxUtils/topicVersion";
-import {
-    applyVersionToHref,
-    normalizePath,
-    resolveSelectedVersion
-} from "dxUtils/topicVersion";
-
-type VersionedTreeNode = TreeNode & { versions?: TopicVersionOption[] };
-type VersionedInternalTreeNode = InternalTreeNode & {
-    versions?: TopicVersionOption[];
-};
-
 type MapItem = {
-    node: VersionedInternalTreeNode;
+    node: InternalTreeNode;
     parent?: MapItem;
     setExpanded?: Function;
 };
@@ -33,10 +21,7 @@ export class TreeHandler {
     }
 
     getKeyByName(name: string): string | undefined {
-        if (!name) {
-            return undefined;
-        }
-        return this._nameKeyMap[name] || this._nameKeyMap[normalizePath(name)];
+        return name && this._nameKeyMap[name];
     }
 
     initialize(treeRoot: TreeNode): InternalTreeNode {
@@ -63,41 +48,12 @@ export class TreeHandler {
     }
 
     private convert(
-        node: VersionedTreeNode,
+        node: TreeNode,
         level: number = 0,
         parent?: MapItem,
-        position?: number,
-        ancestorVersion?: {
-            selected: TopicVersionOption;
-            versions: TopicVersionOption[];
-        }
-    ): VersionedInternalTreeNode {
-        const ownSelected = node.versions?.length
-            ? resolveSelectedVersion(node)
-            : undefined;
-        const versionContext =
-            ownSelected && node.versions
-                ? { selected: ownSelected, versions: node.versions }
-                : ancestorVersion;
-
-        let link = node.link;
-        if (
-            versionContext &&
-            !node.versions?.length &&
-            link?.href &&
-            link.target !== "_blank"
-        ) {
-            const rewritten = applyVersionToHref(
-                link.href,
-                versionContext.selected,
-                versionContext.versions
-            );
-            if (rewritten && rewritten !== link.href) {
-                link = { ...link, href: rewritten };
-            }
-        }
-
-        const convertedNode: VersionedInternalTreeNode = {
+        position?: number
+    ): InternalTreeNode {
+        const convertedNode: InternalTreeNode = {
             label: node.label,
             name: node.name,
             key: this.calculateKey(
@@ -107,47 +63,24 @@ export class TreeHandler {
             level: level,
             isExpanded: node.isExpanded || false,
             isChildrenLoading: node.isChildrenLoading || false,
-            link,
+            link: node.link,
             method: node.method,
             showForwardArrow: node.showForwardArrow,
-            versions: node.versions
+            redirectToChild: node.redirectToChild
         };
 
         const mapItem = { node: convertedNode, parent };
         if (node.children && node.children.length > 0) {
             convertedNode.children = node.children.map((child, index) =>
-                this.convert(child, level + 1, mapItem, index, versionContext)
+                this.convert(child, level + 1, mapItem, index)
             );
         }
 
         this._nodeMap[convertedNode.key] = mapItem;
-        this.indexName(convertedNode.name, convertedNode.key);
-        this.indexName(convertedNode.link?.href, convertedNode.key);
-        // Index this topic's own versioned URLs only. Parent-only switching
-        // URLs point at a child with content and must not steal that child's
-        // selection.
-        if (node.name && node.versions) {
-            for (const version of node.versions) {
-                this.indexName(
-                    applyVersionToHref(node.name, version, node.versions),
-                    convertedNode.key
-                );
-            }
-        }
+        this._nameKeyMap[convertedNode.name] = convertedNode.key;
         return convertedNode;
     }
 
-    private indexName(name: string | undefined, key: string): void {
-        if (!name) {
-            return;
-        }
-        this._nameKeyMap[name] = key;
-        const normalized = normalizePath(name);
-        if (normalized && normalized !== name) {
-            this._nameKeyMap[normalized] = key;
-        }
-    }
-
     private calculateKey(parentKey: string, position?: number): string {
         if (position === undefined) {
             return parentKey;

package/src/modules/dx/treeItem/treeItem.css

@@ -4,33 +4,6 @@
     display: block;
 }
 
-/* Lift this row above later sibling pickers while its menu is open. */
-:host(:focus-within) {
-    position: relative;
-    z-index: 2;
-}
-
-.tree-item-row {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-}
-
-.tree-item-row dx-tree-tile {
-    flex: 1;
-    min-width: 0;
-}
-
-.tree-item-version-picker {
-    flex: 0 0 auto;
-    margin-right: var(--dx-g-spacing-lg);
-}
-
-.tree-item-row-selected {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
-}
-
 button {
     width: 100%;
     text-align: left;

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={rowClass}>
+    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -7,26 +7,12 @@
             is-expanded={isExpanded}
             has-children={hasChildren}
             is-selected={isSelected}
-            is-contained-selection={isContainedSelection}
             oniconclick={onIconClick}
             show-arrow={isParent}
             target={target}
             is-external-link={isExternalLink}
-            has-version-picker={showVersionPicker}
-            onclick={onLinkClick}
         ></dx-tree-tile>
-        <doc-version-picker
-            if:true={showVersionPicker}
-            class="tree-item-version-picker"
-            small="true"
-            versions={versionPickerOptions}
-            selected-version={selectedVersion}
-            latest-version={isLatestVersion}
-            onchange={onVersionChange}
-            onclick={onVersionPickerClick}
-            onmousedown={onVersionPickerClick}
-        ></doc-version-picker>
-    </div>
+    </a>
     <img
         if:true={showChildrenLoading}
         class="tree-children-loading"

package/src/modules/dx/treeItem/treeItem.ts

@@ -2,24 +2,9 @@ import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dxUtils/analytics";
 import { isInViewport } from "dxUtils/browser";
-import type { TopicVersionOption } from "dxUtils/topicVersion";
-import {
-    firstContentNode,
-    getTopicVersionKey,
-    getVersionPickerOptions,
-    isParentOnlyTopic,
-    normalizePath,
-    persistTopicVersion,
-    resolveSelectedVersion,
-    shouldShowTopicVersionPicker
-} from "dxUtils/topicVersion";
 
 const DEFAULT_TARGET = "_self";
 
-type VersionedInternalTreeNode = InternalTreeNode & {
-    versions?: TopicVersionOption[];
-};
-
 export default class TreeItem extends LightningElement {
     @api selectedKey?: string;
     @api isRoot: boolean = false;
@@ -35,7 +20,7 @@ export default class TreeItem extends LightningElement {
         this.isChildrenLoading = (node && node.isChildrenLoading) || false;
     }
 
-    private _treeNode!: VersionedInternalTreeNode;
+    private _treeNode!: InternalTreeNode;
     private isExpanded: boolean = false;
     private isChildrenLoading: boolean = false;
     private rootParentLabel: string = "";
@@ -45,22 +30,9 @@ export default class TreeItem extends LightningElement {
     }
 
     private get isSelected(): boolean {
-        if (isParentOnlyTopic(this._treeNode)) {
-            return false;
-        }
         return this._treeNode.key === this.selectedKey && !this.isExternalLink;
     }
 
-    private get rowClass(): string {
-        return this.isSelected && this.showVersionPicker
-            ? "tree-item-row tree-item-row-selected"
-            : "tree-item-row";
-    }
-
-    private get isContainedSelection(): boolean {
-        return this.isSelected && this.showVersionPicker;
-    }
-
     private get hasChildren(): boolean {
         return !!(
             this.treeNode &&
@@ -111,44 +83,8 @@ export default class TreeItem extends LightningElement {
         return `${parentLabels.reverse().join(":")}:${this.treeNode.label}`;
     }
 
-    private get versions(): TopicVersionOption[] | undefined {
-        return this._treeNode?.versions;
-    }
-
-    private get versionPickerOptions(): TopicVersionOption[] | undefined {
-        return getVersionPickerOptions(this._treeNode);
-    }
-
-    private get showVersionPicker(): boolean {
-        return shouldShowTopicVersionPicker(
-            this.versions,
-            this._treeNode?.showForwardArrow
-        );
-    }
-
-    private get selectedVersion(): TopicVersionOption | undefined {
-        return resolveSelectedVersion(this._treeNode);
-    }
-
-    private get isLatestVersion(): boolean {
-        return (
-            !!this.selectedVersion &&
-            this.selectedVersion.id === this.versions?.[0]?.id
-        );
-    }
-
     private get href(): string | undefined {
-        if (isParentOnlyTopic(this._treeNode)) {
-            const contentNode = firstContentNode(this._treeNode);
-            return (
-                contentNode?.link?.href ||
-                contentNode?.name ||
-                this.selectedVersion?.link?.href ||
-                ""
-            );
-        }
         return (
-            this.selectedVersion?.link?.href ||
             (this._treeNode.link && this._treeNode.link.href) ||
             this._treeNode.name ||
             ""
@@ -168,23 +104,6 @@ export default class TreeItem extends LightningElement {
                 setExpanded: this.setExpanded.bind(this)
             });
         }
-
-        // Remember this topic's resolved version (own URL, descendant URL, or
-        // session) so sibling pickers stay independent for the tab.
-        const selected = resolveSelectedVersion(this._treeNode);
-        const topicKey = getTopicVersionKey(this._treeNode);
-        if (this.versions?.length && selected && topicKey) {
-            persistTopicVersion(topicKey, selected.id);
-        }
-    }
-
-    private onVersionChange(event: CustomEvent): void {
-        event.stopPropagation();
-        persistTopicVersion(getTopicVersionKey(this._treeNode), event.detail);
-    }
-
-    private onVersionPickerClick(event: Event): void {
-        event.stopPropagation();
     }
 
     renderedCallback(): void {
@@ -215,8 +134,8 @@ export default class TreeItem extends LightningElement {
     private preventDefaultLinkBehavior(event: Event) {
         // prevent page refresh if href isn't present or link is already active
         if (
-            !this.href ||
-            normalizePath(this.href) === normalizePath(window.location.pathname)
+            !this._treeNode.link?.href ||
+            this._treeNode.link?.href === window.location.pathname
         ) {
             event.preventDefault();
         }
@@ -248,12 +167,8 @@ export default class TreeItem extends LightningElement {
         }
 
         this.sendGtm(event);
-        const contentNode = isParentOnlyTopic(this._treeNode)
-            ? firstContentNode(this._treeNode)
-            : undefined;
         this.fireEvent("tileselected", {
-            name: contentNode?.name || this._treeNode.name,
-            ...(contentNode?.key ? { key: contentNode.key } : {}),
+            name: this._treeNode.name,
             isExternalLink: this.isExternalLink
         });
     }
@@ -271,8 +186,8 @@ export default class TreeItem extends LightningElement {
         this.dispatchEvent(
             new CustomEvent(type, {
                 detail: {
-                    key: this._treeNode.key,
-                    ...detail
+                    ...detail,
+                    key: this._treeNode.key
                 },
                 bubbles: true,
                 composed: true

package/src/modules/dx/treeTile/treeTile.css

@@ -66,10 +66,6 @@
     white-space: nowrap;
 }
 
-.tile-with-version-picker {
-    padding-right: var(--dx-g-spacing-xs);
-}
-
 .tile-with-children .tile-label {
     order: 2;
 }

package/src/modules/dx/treeTile/treeTile.ts

@@ -28,12 +28,10 @@ export default class TreeTile extends LightningElement {
     @api isExpanded = false;
     @api hasChildren = false;
     @api isSelected = false;
-    @api isContainedSelection = false;
     @api href!: string;
     @api showArrow = false;
     @api target!: string;
     @api isExternalLink = false;
-    @api hasVersionPicker = false;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;
@@ -103,11 +101,7 @@ export default class TreeTile extends LightningElement {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
             "tile-root-with-child": this.isRoot && this.showArrow,
-            "sidebar-item-selected":
-                this.isSelected && !this.isContainedSelection,
-            "sidebar-item-selected-text":
-                this.isSelected && this.isContainedSelection,
-            "tile-with-version-picker": this.hasVersionPicker
+            "sidebar-item-selected": this.isSelected
         });
     }
 

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -7,7 +7,6 @@ import {
     IconSprite,
     IconData,
     IconSymbol,
-    StatusBadgeVariant,
     TypeBadgeSize
 } from "typings/custom";
 import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
@@ -21,16 +20,9 @@ import {
     getContentTypeColorVariables
 } from "dxUtils/contentTypes";
 
-// Opt-in solid status variants (status-success/-warning/-error).
-export const STATUS_BADGE_VARIANTS: StatusBadgeVariant[] = [
-    "status-success",
-    "status-warning",
-    "status-error"
-];
-
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
-    @api variant: Brand | ContentType | StatusBadgeVariant = "default";
+    @api variant: Brand | ContentType = "default";
     @api color?: Color;
     @api dark?: false;
 
@@ -95,24 +87,11 @@ export default class TypeBadge extends LightningElement {
         return isContentType(this.variant);
     }
 
-    private get isStatus(): boolean {
-        return STATUS_BADGE_VARIANTS.includes(
-            this.variant as StatusBadgeVariant
-        );
-    }
-
     private get className(): string {
-        return cx(
-            "dx-badge",
-            `size-${this.size}`,
-            this.isStatus && this.variant
-        );
+        return cx("dx-badge", `size-${this.size}`);
     }
 
     private get style(): string {
-        if (this.isStatus) {
-            return "";
-        }
         if (this.dark) {
             return buildStyleColorVariables({
                 background: "--dx-g-purple-vibrant-40",

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -154,7 +154,12 @@ export abstract class HeaderBase extends LightningElement {
             setTimeout(() => {
                 const id = hash.replace("#", "");
                 const element = document.getElementById(id);
-                if (element && element.scrollIntoView) {
+                // doc-heading targets are scrolled by doc-content-layout once the page has rendered
+                if (
+                    element &&
+                    element.tagName !== "DOC-HEADING" &&
+                    element.scrollIntoView
+                ) {
                     element.scrollIntoView();
                 }
             }, 0);

package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css

@@ -13,10 +13,6 @@
     color: var(--dx-g-blue-vibrant-40) !important;
 }
 
-.sidebar-item-selected-text {
-    color: var(--dx-g-blue-vibrant-40) !important;
-}
-
 .sidebar-item {
     padding: 6px var(--dx-g-spacing-lg) 6px
         var(--dx-g-global-header-padding-horizontal);

package/src/modules/dxHelpers/typeBadge/typeBadge.css

@@ -26,28 +26,6 @@
     --height: var(--dx-g-spacing-mlg);
 }
 
-.dx-badge.status-success,
-.dx-badge.status-warning,
-.dx-badge.status-error {
-    /* No spacing token maps to 10px; status badges need this exact padding. */
-    --horizontal-spacing: 10px;
-}
-
-.dx-badge.status-success {
-    --color: var(--sds-g-gray-1);
-    --background: var(--dx-g-green-vibrant-50);
-}
-
-.dx-badge.status-warning {
-    --color: var(--dx-g-gray-15);
-    --background: var(--dx-g-yellow-vibrant-80);
-}
-
-.dx-badge.status-error {
-    --color: var(--sds-g-gray-1);
-    --background: var(--dx-g-red-vibrant-40);
-}
-
 svg,
 dx-icon {
     margin-right: var(--dx-g-spacing-sm);

package/src/modules/dxUtils/topicVersion/topicVersion.ts

@@ -1,467 +0,0 @@
-export const TOPIC_VERSION_SESSION_KEY = "sfdocs-topic-version-selections";
-
-export type TopicVersionOption = {
-    id: string;
-    label: string;
-    deprecated?: boolean;
-    selected?: boolean;
-    link?: {
-        href?: string;
-        target?: string;
-    };
-};
-
-export type VersionedNode = {
-    name?: string;
-    label?: string;
-    key?: string;
-    link?: {
-        href?: string;
-        target?: string;
-    };
-    children?: VersionedNode[];
-    versions?: TopicVersionOption[];
-    /** Set on Redoc spec tiles after the docs layout decorates the TOC. */
-    showForwardArrow?: boolean;
-    /** Docs TOC topic type (`markdown` | `spec`). May be stripped after decoration. */
-    topicType?: string;
-};
-
-type VersionPathDelta = {
-    prefix: string;
-    inserted: string;
-};
-
-function isBrowser(): boolean {
-    return typeof window !== "undefined";
-}
-
-export function normalizePath(href?: string): string {
-    if (!href) {
-        return "";
-    }
-
-    try {
-        const url = href.startsWith("http")
-            ? new URL(href)
-            : new URL(
-                  href,
-                  isBrowser() ? window.location.origin : "http://localhost"
-              );
-        return url.pathname.replace(/\/$/, "") || "/";
-    } catch {
-        return href.replace(/\/$/, "");
-    }
-}
-
-export function hrefMatchesCurrentPage(href?: string): boolean {
-    if (!isBrowser()) {
-        return false;
-    }
-    return normalizePath(href) === normalizePath(window.location.pathname);
-}
-
-export function readTopicVersionSelections(): Record<string, string> {
-    if (!isBrowser() || !window.sessionStorage) {
-        return {};
-    }
-
-    try {
-        const raw = window.sessionStorage.getItem(TOPIC_VERSION_SESSION_KEY);
-        return raw ? JSON.parse(raw) : {};
-    } catch {
-        return {};
-    }
-}
-
-export function persistTopicVersion(
-    topicName: string,
-    versionId: string
-): void {
-    if (!topicName || !versionId || !isBrowser() || !window.sessionStorage) {
-        return;
-    }
-
-    const stored = readTopicVersionSelections();
-    stored[topicName] = versionId;
-    window.sessionStorage.setItem(
-        TOPIC_VERSION_SESSION_KEY,
-        JSON.stringify(stored)
-    );
-}
-
-/**
- * Stable session key for a versioned topic. Parent-only sections have an empty
- * `name`/`href`, so fall back to the latest switching URL (then the label).
- */
-export function getTopicVersionKey(node: VersionedNode | undefined): string {
-    if (!node) {
-        return "";
-    }
-    if (node.name) {
-        return node.name;
-    }
-    const latestHref = node.versions?.[0]?.link?.href;
-    if (latestHref) {
-        return latestHref;
-    }
-    return node.label || "";
-}
-
-/** Section header with children but no page of its own. */
-export function isParentOnlyTopic(node: VersionedNode | undefined): boolean {
-    if (!node) {
-        return false;
-    }
-    const ownHref = node.link?.href || node.name;
-    return !ownHref && !!node.children?.length;
-}
-
-function isSpecNode(node: VersionedNode): boolean {
-    return node.showForwardArrow === true || node.topicType === "spec";
-}
-
-/**
- * First descendant that has a markdown page (own href/name). Specs (Redoc)
- * and external links are skipped so parent-only sections land on the first
- * markdown topic even when a spec is authored first in the TOC.
- */
-export function firstContentNode(
-    node: VersionedNode | undefined
-): VersionedNode | undefined {
-    if (!node || node.link?.target === "_blank" || isSpecNode(node)) {
-        return undefined;
-    }
-    if (node.link?.href || node.name) {
-        return node;
-    }
-    for (const child of node.children || []) {
-        const found = firstContentNode(child);
-        if (found) {
-            return found;
-        }
-    }
-    return undefined;
-}
-
-export function shouldShowTopicVersionPicker(
-    versions?: TopicVersionOption[],
-    showForwardArrow?: boolean
-): boolean {
-    return !showForwardArrow && Array.isArray(versions) && versions.length > 1;
-}
-
-/**
- * Difference between a picker's latest switching URL and an older one.
- *
- * latest:  /docs/project/errors.html
- * v1:      /docs/project/v1/errors.html
- * → prefix `/docs/project/`, inserted `v1/`
- */
-function getVersionPathDelta(
-    latestPath: string,
-    selectedPath: string
-): VersionPathDelta | undefined {
-    const latestDirEnd = latestPath.lastIndexOf("/") + 1;
-    if (latestDirEnd <= 0) {
-        return undefined;
-    }
-
-    const prefix = latestPath.slice(0, latestDirEnd);
-    const latestSlug = latestPath.slice(latestDirEnd);
-    if (!selectedPath.startsWith(prefix) || !latestSlug) {
-        return undefined;
-    }
-
-    const selectedAfterPrefix = selectedPath.slice(prefix.length);
-    if (!selectedAfterPrefix.endsWith(latestSlug)) {
-        return undefined;
-    }
-
-    const inserted = selectedAfterPrefix.slice(
-        0,
-        selectedAfterPrefix.length - latestSlug.length
-    );
-    if (!inserted) {
-        return undefined;
-    }
-
-    return { prefix, inserted };
-}
-
-function applyVersionPathDelta(
-    hrefPath: string,
-    delta: VersionPathDelta
-): string | undefined {
-    if (!hrefPath.startsWith(delta.prefix)) {
-        return undefined;
-    }
-
-    const rest = hrefPath.slice(delta.prefix.length);
-    if (rest.startsWith(delta.inserted)) {
-        return hrefPath;
-    }
-
-    return delta.prefix + delta.inserted + rest;
-}
-
-function stripVersionPathDelta(
-    hrefPath: string,
-    delta: VersionPathDelta
-): string | undefined {
-    if (!hrefPath.startsWith(delta.prefix)) {
-        return undefined;
-    }
-
-    const rest = hrefPath.slice(delta.prefix.length);
-    if (!rest.startsWith(delta.inserted)) {
-        return undefined;
-    }
-
-    return delta.prefix + rest.slice(delta.inserted.length);
-}
-
-/**
- * Maps a canonical (latest) href onto another version using the picker's
- * latest vs selected switching URLs as the template.
- *
- * latest parent:  /docs/project/errors.html
- * v1 parent:      /docs/project/v1/errors.html
- * latest child:   /docs/project/extra-child-a.html
- * → v1 child:     /docs/project/v1/extra-child-a.html
- */
-export function applyVersionToHref(
-    canonicalHref: string | undefined,
-    selectedVersion: TopicVersionOption | undefined,
-    versions?: TopicVersionOption[]
-): string | undefined {
-    if (!canonicalHref) {
-        return canonicalHref;
-    }
-    if (!selectedVersion || !versions?.length) {
-        return canonicalHref;
-    }
-
-    const latest = versions[0];
-    if (!latest || selectedVersion.id === latest.id) {
-        return canonicalHref;
-    }
-
-    const latestPath = normalizePath(latest.link?.href);
-    const selectedPath = normalizePath(selectedVersion.link?.href);
-    const hrefPath = normalizePath(canonicalHref);
-
-    if (!latestPath || !selectedPath || latestPath === selectedPath) {
-        return insertVersionBeforeSlug(canonicalHref, selectedVersion.id);
-    }
-
-    const delta = getVersionPathDelta(latestPath, selectedPath);
-    return (
-        (delta && applyVersionPathDelta(hrefPath, delta)) ||
-        insertVersionBeforeSlug(canonicalHref, selectedVersion.id)
-    );
-}
-
-function insertVersionBeforeSlug(href: string, versionId: string): string {
-    const path = normalizePath(href);
-    const lastSlash = path.lastIndexOf("/");
-    if (lastSlash <= 0 || !versionId) {
-        return href;
-    }
-    const dir = path.slice(0, lastSlash);
-    const slug = path.slice(lastSlash);
-    if (dir.endsWith(`/${versionId}`)) {
-        return path;
-    }
-    return `${dir}/${versionId}${slug}`;
-}
-
-export function toCanonicalHref(
-    href: string | undefined,
-    versions?: TopicVersionOption[]
-): string {
-    if (!href) {
-        return "";
-    }
-    if (!versions?.length) {
-        return normalizePath(href);
-    }
-
-    const latestPath = normalizePath(versions[0].link?.href);
-    const hrefPath = normalizePath(href);
-    if (!latestPath) {
-        return hrefPath;
-    }
-
-    for (const version of versions) {
-        if (version.id === versions[0].id) {
-            continue;
-        }
-        const delta = getVersionPathDelta(
-            latestPath,
-            normalizePath(version.link?.href)
-        );
-        const stripped = delta && stripVersionPathDelta(hrefPath, delta);
-        if (stripped) {
-            return stripped;
-        }
-    }
-
-    return hrefPath;
-}
-
-function hrefMatchesVersion(
-    href: string | undefined,
-    version: TopicVersionOption,
-    versions: TopicVersionOption[]
-): boolean {
-    return hrefMatchesCurrentPage(applyVersionToHref(href, version, versions));
-}
-
-export function collectSubtreeCanonicalHrefs(
-    node: VersionedNode,
-    includeSelf = true
-): string[] {
-    const hrefs: string[] = [];
-    const own = node.link?.href || node.name;
-    if (includeSelf && own) {
-        hrefs.push(own);
-    }
-    for (const child of node.children || []) {
-        if (child.versions?.length || child.link?.target === "_blank") {
-            continue;
-        }
-        hrefs.push(...collectSubtreeCanonicalHrefs(child));
-    }
-    return hrefs;
-}
-
-export function isCurrentPageInSubtree(
-    node: VersionedNode,
-    versions?: TopicVersionOption[]
-): boolean {
-    if (!isBrowser() || !versions?.length) {
-        return false;
-    }
-
-    return collectSubtreeCanonicalHrefs(node).some((href) =>
-        versions.some((version) => hrefMatchesVersion(href, version, versions))
-    );
-}
-
-/**
- * Picker option hrefs. When the current page is this topic or a descendant,
- * each option points at that same topic in the chosen version so the child
- * stays selected. Otherwise keep the backend switching URL (parent page, or
- * first content child for parent-only sections).
- */
-export function getVersionPickerOptions(
-    node: VersionedNode | undefined
-): TopicVersionOption[] | undefined {
-    const versions = node?.versions;
-    if (!node || !versions?.length) {
-        return versions;
-    }
-    if (!isCurrentPageInSubtree(node, versions)) {
-        return versions;
-    }
-
-    const canonical = toCanonicalHref(window.location.pathname, versions);
-    return versions.map((version) => ({
-        ...version,
-        link: {
-            ...version.link,
-            href:
-                applyVersionToHref(canonical, version, versions) ||
-                version.link?.href
-        }
-    }));
-}
-
-/**
- * Version whose page (or a descendant of it) is the current URL.
- * Ignores the session-stored picker selection, which can remember an older
- * version while the reader is still on the latest page.
- */
-export function versionForCurrentPage(
-    node: VersionedNode | undefined
-): TopicVersionOption | undefined {
-    const versions = node?.versions;
-    if (!node || !versions?.length || !isBrowser()) {
-        return undefined;
-    }
-
-    const hrefs = collectSubtreeCanonicalHrefs(node);
-    const matches = (version: TopicVersionOption) =>
-        hrefMatchesCurrentPage(version.link?.href) ||
-        hrefs.some((href) => hrefMatchesVersion(href, version, versions));
-
-    // Older versions first so a rewritten child URL is not mistaken for latest.
-    const older = versions.find(
-        (version) => version.id !== versions[0].id && matches(version)
-    );
-    if (older) {
-        return older;
-    }
-
-    return matches(versions[0]) ? versions[0] : undefined;
-}
-
-/**
- * Deepest versioned topic that contains the current page, with the version
- * the URL selects. Nested versioned topics own their pages.
- */
-export function findTopicVersionForCurrentPage(
-    nodes: VersionedNode[] | undefined | null
-): { node: VersionedNode; version: TopicVersionOption } | undefined {
-    let match: { node: VersionedNode; version: TopicVersionOption } | undefined;
-    const walk = (list?: VersionedNode[] | null) => {
-        for (const node of list || []) {
-            const version = versionForCurrentPage(node);
-            if (version) {
-                match = { node, version };
-            }
-            walk(node.children);
-        }
-    };
-    walk(nodes);
-    return match;
-}
-
-/**
- * Current page rewritten onto the latest topic version. Falls back to the
- * latest switching URL when the path delta cannot be applied.
- */
-export function latestHrefForCurrentPage(
-    versions: TopicVersionOption[] | undefined
-): string | undefined {
-    const latest = versions?.[0];
-    if (!latest) {
-        return undefined;
-    }
-    if (!isBrowser()) {
-        return latest.link?.href;
-    }
-
-    const canonical = toCanonicalHref(window.location.pathname, versions);
-    return applyVersionToHref(canonical, latest, versions) || latest.link?.href;
-}
-
-export function resolveSelectedVersion(
-    node: VersionedNode | undefined
-): TopicVersionOption | undefined {
-    const versions = node?.versions;
-    if (!node || !versions?.length) {
-        return undefined;
-    }
-
-    // The open page wins, including a canonical child opened from "View Latest".
-    // Session is only for a picker whose topic is not the current page.
-    const fromUrl = versionForCurrentPage(node);
-    if (fromUrl) {
-        return fromUrl;
-    }
-
-    const storedId = readTopicVersionSelections()[getTopicVersionKey(node)];
-    return versions.find((version) => version.id === storedId) || versions[0];
-}