@salesforcedevs/dx-components 1.40.5-topic-alpha.7 → 1.40.5

package/src/modules/dx/tabPanelList/tabPanelList.html

@@ -15,18 +15,11 @@
                     </dx-tab-panel-item>
                 </template>
             </div>
-            <dx-dropdown
-                class="more-dropdown"
-                offset="medium"
-                placement="bottom-end"
-                width-mode="fit-content"
-                options={dropdownOptions}
-                value={activeOptionId}
-                onchange={onDropdownChange}
-            >
+            <dx-popover offset="medium" placement="bottom-center">
                 <dx-tab-panel-item
                     role="button"
                     class="more-btn-container"
+                    slot="control"
                     tab-label="More"
                 >
                     <div class="more-btn">
@@ -38,7 +31,23 @@
                         ></dx-icon>
                     </div>
                 </dx-tab-panel-item>
-            </dx-dropdown>
+                <div slot="content">
+                    <template for:each={dropdownItems} for:item="dropdownItem">
+                        <div
+                            role="button"
+                            onclick={onDropdownItemClick}
+                            onkeydown={onDropdownItemClick}
+                            data-value={dropdownItem.index}
+                            key={dropdownItem.label}
+                            class="dropdown-item"
+                            tabindex="0"
+                            tab-label={dropdownItem.label}
+                        >
+                            {dropdownItem.label}
+                        </div>
+                    </template>
+                </div>
+            </dx-popover>
         </div>
         <div part="tabpanels">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/tabPanelList/tabPanelList.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { LightningSlotElement, Option, Tab } from "typings/custom";
+import { LightningSlotElement, Tab } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { uniqueId } from "./uniqueId";
 export default class TabPanelList extends LightningElement {
@@ -33,6 +33,7 @@ export default class TabPanelList extends LightningElement {
     private _activeIndex?: number;
     private groupId: string = uniqueId();
     private tabSlotPanels?: LightningSlotElement;
+    private showPopover: boolean = true;
     private dropdownItems: Tab[] = [];
     private hasRendered: boolean = false;
 
@@ -73,25 +74,8 @@ export default class TabPanelList extends LightningElement {
         this.activeIndex = e.detail;
     }
 
-    // Tabs that don't fit are listed in the "More" dropdown. Option ids are the
-    // tab index as a string.
-    private get dropdownOptions(): Option[] {
-        return this.dropdownItems.map((item) => ({
-            id: String(item.index),
-            label: item.label || ""
-        }));
-    }
-
-    private get activeOptionId(): string {
-        return String(this.activeIndex);
-    }
-
-    private onDropdownChange(e: CustomEvent<string>) {
-        this.onTabClick({ detail: +e.detail });
-        // The menu closes after a pick; keep keyboard focus on its trigger.
-        (
-            this.template.querySelector(".more-btn-container") as HTMLElement
-        )?.focus();
+    private onDropdownItemClick(e: any) {
+        this.onTabClick({ detail: +e.currentTarget.dataset.value });
     }
 
     private onSlotChange(e: Event) {
@@ -127,10 +111,6 @@ export default class TabPanelList extends LightningElement {
     }
 
     private onKeydown = (e: KeyboardEvent) => {
-        // Arrow keys inside the open "More" menu belong to the dropdown.
-        if ((e.target as HTMLElement).tagName === "DX-DROPDOWN") {
-            return;
-        }
         switch (e.key) {
             case "ArrowLeft": {
                 e.preventDefault();

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,42 +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;
-}
-
-/* The tile's keyboard focus layers fill this row, picker included. isolate
-   keeps the fill above the row's background and below its content. Only while
-   focus is inside: a row that is always isolated traps its picker's menu, and
-   later rows cover the menu while it fades out after a click outside. */
-.tree-item-row:focus-within {
-    position: relative;
-    isolation: isolate;
-}
-
-.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;
 }
@@ -217,51 +213,3 @@ a:visited.tile-root,
 a:link.tile-root {
     color: var(--dx-g-blue-vibrant-20);
 }
-
-/* Keyboard focus matches dx-dropdown-option: a light fill, a 2px blue inset
-   ring, and a white inner band. The layers fill dx-tree-item's row (it sets
-   position: relative), so a version picker beside the link sits inside the
-   focus box. The fill stays behind the row's content; the ring sits on top.
-   Undo the shared tree item focus box (commonTreeItem) first. */
-:host .sidebar-item:focus-visible {
-    margin: 0;
-    padding: 6px var(--dx-g-spacing-lg) 6px
-        var(--dx-g-global-header-padding-horizontal);
-    outline: none;
-    border-radius: 0;
-}
-
-:host .sidebar-item:focus-visible .indentation {
-    padding-top: 0;
-    padding-bottom: 0;
-    outline: none;
-}
-
-:host .sidebar-item:focus-visible::before,
-:host .sidebar-item:focus-visible::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-}
-
-:host .sidebar-item:focus-visible::before {
-    z-index: -1;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-}
-
-:host .sidebar-item:focus-visible::after {
-    z-index: 1;
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
-        inset 0 0 0 4px white;
-}
-
-/* A selected item keeps its left bar when it also has keyboard focus. */
-:host
-    .sidebar-item:is(
-        .sidebar-item-selected,
-        .sidebar-item-selected-text
-    ):focus-visible::after {
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40),
-        inset 0 0 0 2px var(--dx-g-blue-vibrant-60), inset 0 0 0 4px white;
-}

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

@@ -18,7 +18,8 @@ const VALID_BRANDS = [
     "revenue",
     "sales",
     "service",
-    "success"
+    "success",
+    "cross-product"
 ];
 
 export const ANALYTICS_INFO = {

package/src/modules/dxConstants/brands/brands.ts

@@ -13,5 +13,6 @@ export const BRANDS = [
     "industries",
     "learning",
     "service",
-    "analytics"
+    "analytics",
+    "cross-product"
 ] as Brand[];