@salesforcedevs/dx-components 1.40.4 → 1.40.5-topic-alpha.2

package/lwc.config.json

@@ -140,6 +140,7 @@
         "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",
+    "version": "1.40.5-topic-alpha.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,6 +43,5 @@
         "eventsourcemock": "2.0.0",
         "luxon": "3.4.4",
         "msw": "^2.12.4"
-    },
-    "gitHead": "37647f2998066bc5a3e345e3bfdbd70dfefa5adc"
+    }
 }

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

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

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

@@ -1,5 +1,11 @@
 @import "dxHelpers/reset";
 
+/* Options run edge to edge; the menu adds space above the first and below
+   the last. */
+dx-popover {
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+}
+
 .menu-nested:not(.menu-fit-content)::part(content) {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
@@ -14,12 +20,22 @@
     display: none;
 }
 
+/* fit-content and fit-end: the menu is as wide as its longest label. */
 .menu-fit-content {
     --dx-c-popover-width: max-content;
-    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
 }
 
-.menu-fit-content .menu_list {
+/* fit-end also stops at --dx-c-dropdown-menu-max-width. Labels wrap only once
+   the menu reaches that width. */
+.menu-fit-end::part(content) {
+    box-sizing: border-box;
+    max-width: var(
+        --dx-c-dropdown-menu-max-width,
+        calc(100vw - var(--dx-g-spacing-lg))
+    );
+}
+
+.menu-fit-content.menu-nested .menu_list {
     width: 100%;
     align-items: flex-start;
     gap: var(--dx-g-spacing-sm);
@@ -31,15 +47,6 @@
     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) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);
@@ -91,12 +98,13 @@
 
 .menu_heading {
     display: block;
-    color: var(--dx-g-blue-vibrant-20);
-    font-family: var(--dx-g-font-display);
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    color: var(--dx-g-gray-10);
+    font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     font-weight: bold;
-    text-transform: uppercase;
-    margin: var(--dx-g-spacing-sm);
+    line-height: var(--dx-g-spacing-mlg);
 }
 
 .callout_link {
@@ -105,7 +113,7 @@
     display: block;
     padding-top: var(--dx-g-spacing-xl);
     margin-top: auto;
-    margin-left: var(--dx-g-spacing-sm);
+    margin-left: var(--dx-g-spacing-lg);
 }
 
 .empty {

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

@@ -9,7 +9,7 @@
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
-        placement={placement}
+        placement={effectivePlacement}
         small={small}
         width={effectiveWidth}
     >
@@ -35,6 +35,7 @@
                     nav-item-label={navItemLabel}
                     variant={variant}
                     width-mode={widthMode}
+                    show-icon={showOptionIcons}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -55,6 +56,7 @@
                             option={suboption}
                             nav-item-label={navItemLabel}
                             width-mode={widthMode}
+                            show-icon={showOptionIcons}
                         ></dx-dropdown-option>
                     </template>
                     <dx-button

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

@@ -39,6 +39,7 @@ export default class Dropdown extends LightningElement {
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
     @api widthMode: DropdownWidthMode = "fixed";
+    @api showOptionIcons?: boolean = false; // right-aligned option icons (opt-in)
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;
@@ -82,20 +83,35 @@ 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";
+        return this.widthMode === "fit-content" || this.widthMode === "fit-end";
     }
 
+    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 &&
@@ -104,7 +120,8 @@ export default class Dropdown extends LightningElement {
                 "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
             this.areOptionsEmpty && "menu-hidden",
-            fitContent && "menu-fit-content"
+            fitContent && "menu-fit-content",
+            this.widthMode === "fit-end" && "menu-fit-end"
         );
     }
 

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

@@ -25,8 +25,12 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-    padding: var(--dx-g-spacing-sm);
+    padding: var(
+        --dx-c-dropdown-option-padding,
+        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg)
+    );
     font-size: var(--dx-g-text-sm);
+    border-radius: var(--dx-c-dropdown-option-border-radius, 0);
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -56,6 +60,10 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    flex: 1;
+    min-width: 0;
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     text-align: left;
@@ -64,14 +72,29 @@
 .option-indented .option_details {
     align-items: center;
     flex-direction: row;
+    gap: 0;
 }
 
 .option_label {
-    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
-    display: flex;
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-gray-10));
+
+    /* Opt-in: set to block so text-overflow:ellipsis applies (ignored on flex). */
+    display: var(--dx-c-dropdown-option-label-display, flex);
     align-items: center;
-    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
+    font-weight: var(
+        --dx-c-dropdown-option-font-weight,
+        var(--dx-g-font-normal)
+    );
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
+    line-height: var(--dx-g-spacing-lg);
+
+    /* 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 {
@@ -88,13 +111,17 @@
 
 .option_description {
     color: var(--dx-g-gray-30);
-    margin-top: var(--dx-g-spacing-xs);
     line-height: 18px;
 }
 
+/* Only rendered when the dropdown sets show-option-icons. */
 .option_icon {
-    margin-right: var(--dx-g-spacing-md);
+    --dx-c-icon-size: var(--dx-g-icon-size-md);
+    --dx-c-icon-color: var(--dx-g-gray-50);
+
+    order: 1;
     flex-shrink: 0;
+    margin-left: var(--dx-g-spacing-2xl);
 }
 
 .option-indented {
@@ -102,46 +129,19 @@
     padding-bottom: var(--dx-g-spacing-xs);
 }
 
+/* fit-content (toolbar): one line per label, truncated with an ellipsis. */
 .option-fit-content {
     min-width: 0;
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
-}
-
-.option-fit-content .option_details {
-    align-items: flex-start;
-    gap: var(--dx-g-spacing-sm);
-    min-width: 0;
-    flex: 1;
-}
-
-.option-fit-content .option_description {
-    margin-top: 0;
 }
 
 .option-fit-content .option_label {
     display: block;
-    color: var(--dx-g-gray-10);
-    font-weight: var(--dx-g-font-normal);
-    line-height: var(--dx-g-spacing-lg);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: calc(100vw - var(--dx-g-spacing-lg) * 4);
 }
 
-.option-fit-content.option-active .option_label {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.option-fit-content .option_icon {
-    --dx-c-icon-size: var(--dx-g-icon-size-md);
-    --dx-c-icon-color: var(--dx-g-gray-50);
-
-    order: 1;
-    margin-right: 0;
-    margin-left: var(--dx-g-spacing-2xl);
-}
-
 .option-indented:not([data-index="0"]) {
     --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -14,8 +14,8 @@
             class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
-            if:true={option.iconSymbol}
-            size={optionIconSize}
+            lwc:if={renderIcon}
+            size="override"
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>
@@ -44,8 +44,8 @@
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
             color={option.iconColor}
-            if:true={option.iconSymbol}
-            size={optionIconSize}
+            lwc:if={renderIcon}
+            size="override"
         ></dx-icon>
         <div class="option_details">
             <div if:true={renderIndentedShape} class="indented-shape"></div>

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -4,8 +4,7 @@ import {
     OptionWithNested,
     AnalyticsPayload,
     DropdownVariant,
-    DropdownWidthMode,
-    IconSize
+    DropdownWidthMode
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -19,6 +18,7 @@ export default class DropdownOption extends LightningElement {
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
     @api widthMode: DropdownWidthMode = "fixed";
+    @api showIcon: boolean = false;
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -41,8 +41,9 @@ export default class DropdownOption extends LightningElement {
         return this.variant === "indented" && this.indexPosition >= 1;
     }
 
-    private get optionIconSize(): IconSize {
-        return this.widthMode === "fit-content" ? "override" : "large";
+    // Icons are opt-in (right-aligned); without show-icon there is no icon or spacing.
+    private get renderIcon() {
+        return this.showIcon && !!this.option.iconSymbol;
     }
 
     private onClick(e: PointerEvent) {

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

@@ -106,7 +106,11 @@ export default class Popover extends LightningElement {
         if (this.control) {
             this.control.setAttribute("aria-expanded", "false");
         }
-        document.removeEventListener("click", this.interactOutsideListener);
+        document.removeEventListener(
+            "click",
+            this.interactOutsideListener,
+            true
+        );
         document.removeEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.removeEventListener(
@@ -132,7 +136,11 @@ export default class Popover extends LightningElement {
     // LIFECYCLE METHODS
 
     disconnectedCallback() {
-        document.removeEventListener("click", this.interactOutsideListener);
+        document.removeEventListener(
+            "click",
+            this.interactOutsideListener,
+            true
+        );
         document.removeEventListener("mousemove", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
         this.removeControlListeners();
@@ -295,7 +303,11 @@ export default class Popover extends LightningElement {
     }
 
     private attachListenersTopopover() {
-        document.addEventListener("click", this.interactOutsideListener);
+        // 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("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.addEventListener(

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

@@ -1,6 +1,18 @@
 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: InternalTreeNode;
+    node: VersionedInternalTreeNode;
     parent?: MapItem;
     setExpanded?: Function;
 };
@@ -21,7 +33,10 @@ export class TreeHandler {
     }
 
     getKeyByName(name: string): string | undefined {
-        return name && this._nameKeyMap[name];
+        if (!name) {
+            return undefined;
+        }
+        return this._nameKeyMap[name] || this._nameKeyMap[normalizePath(name)];
     }
 
     initialize(treeRoot: TreeNode): InternalTreeNode {
@@ -48,12 +63,41 @@ export class TreeHandler {
     }
 
     private convert(
-        node: TreeNode,
+        node: VersionedTreeNode,
         level: number = 0,
         parent?: MapItem,
-        position?: number
-    ): InternalTreeNode {
-        const convertedNode: InternalTreeNode = {
+        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 = {
             label: node.label,
             name: node.name,
             key: this.calculateKey(
@@ -63,24 +107,47 @@ export class TreeHandler {
             level: level,
             isExpanded: node.isExpanded || false,
             isChildrenLoading: node.isChildrenLoading || false,
-            link: node.link,
+            link,
             method: node.method,
             showForwardArrow: node.showForwardArrow,
-            redirectToChild: node.redirectToChild
+            versions: node.versions
         };
 
         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)
+                this.convert(child, level + 1, mapItem, index, versionContext)
             );
         }
 
         this._nodeMap[convertedNode.key] = mapItem;
-        this._nameKeyMap[convertedNode.name] = convertedNode.key;
+        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
+                );
+            }
+        }
         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,6 +4,33 @@
     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>
-    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
+    <div class={rowClass}>
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -7,12 +7,26 @@
             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>
-    </a>
+        <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>
     <img
         if:true={showChildrenLoading}
         class="tree-children-loading"