@salesforcedevs/dx-components 1.17.10-search-alpha1 → 1.17.13-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.17.10-search-alpha1",
+    "version": "1.17.13-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,6 +43,7 @@
         "luxon": "3.4.4"
     },
     "volta": {
-        "node": "20.19.0"
+        "node": "20.19.0",
+        "yarn": "1.22.19"
     }
 }

package/src/modules/dx/footer/links.ts

@@ -149,7 +149,7 @@ const openOneTrustInfoDisplay = () => {
 export const termsLinks = [
     { href: privacyHref, label: "Privacy Information" },
     {
-        href: "https://www.salesforce.com/company/legal/sfdc-website-terms-of-service/",
+        href: "https://www.salesforce.com/company/legal/program-agreement/",
         label: "Terms of Service"
     },
     {

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -58,7 +58,6 @@
                         value={searchText}
                         onchange={onSearchChange}
                         shortcut-key="j"
-                        clearable
                     ></dx-input>
                 </div>
                 <slot name="version-picker"></slot>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -29,15 +29,6 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
-    @api
-    get emptyStateMessage(): string | undefined {
-        return this._emptyStateMessage;
-    }
-
-    set emptyStateMessage(value: string) {
-        this._emptyStateMessage = value;
-    }
-
     private _searchTimeout?: number;
     private _trees!: Array<TreeNode>;
 
@@ -45,7 +36,6 @@ export default class Sidebar extends SidebarBase {
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
-    private _emptyStateMessage?: string;
 
     private get anyResultMatch() {
         return this.filteredTrees.length > 0;
@@ -75,13 +65,10 @@ export default class Sidebar extends SidebarBase {
     }
 
     private get emptyStateSuggestions(): string {
-        return (
-            this.emptyStateMessage ||
-            JSON.stringify([
-                "Please consider misspellings",
-                "Try different search keywords"
-            ])
-        );
+        return JSON.stringify([
+            "Please consider misspellings",
+            "Try different search keywords"
+        ]);
     }
 
     private get isDesktop(): boolean {

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

@@ -44,9 +44,9 @@ export default class Tree extends LightningElement {
     onTileSelected(event: CustomEvent) {
         event.stopPropagation();
 
-        const { key, name } = event.detail;
+        const { key, name, isExternalLink } = event.detail;
         this._value = name;
-        this.selectedKey = key;
+        this.selectedKey = isExternalLink ? this.selectedKey : key;
         this.dispatchEvent(
             new CustomEvent("select", {
                 detail: { name },

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

@@ -10,6 +10,7 @@
             oniconclick={onIconClick}
             show-arrow={isParent}
             target={target}
+            is-external-link={isExternalLink}
         ></dx-tree-tile>
     </a>
     <img

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

@@ -25,8 +25,16 @@ export default class TreeItem extends LightningElement {
     private isChildrenLoading: boolean = false;
     private rootParentLabel: string = "";
 
+    private get isExternalLink() {
+        return (
+            this._treeNode.link &&
+            this._treeNode.link.target &&
+            this._treeNode.link.target === "_blank"
+        );
+    }
+
     private get isSelected(): boolean {
-        return this._treeNode.key === this.selectedKey;
+        return this._treeNode.key === this.selectedKey && !this.isExternalLink;
     }
 
     private get hasChildren(): boolean {
@@ -142,7 +150,10 @@ export default class TreeItem extends LightningElement {
         }
 
         this.sendGtm(event);
-        this.fireEvent("tileselected", { name: this._treeNode.name });
+        this.fireEvent("tileselected", {
+            name: this._treeNode.name,
+            isExternalLink: this._treeNode.link?.target === "_blank" || false
+        });
     }
 
     private doExpand(isSelectAction: boolean): void {

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

@@ -52,6 +52,20 @@
     margin-left: auto;
 }
 
+.tile-external-link-icon {
+    display: inline-flex;
+    align-items: center;
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.tile-with-children .tile-external-link-icon {
+    order: 2;
+}
+
+.whitespace-nowrap {
+    white-space: nowrap;
+}
+
 .tile-with-children .tile-label {
     order: 2;
 }

package/src/modules/dx/treeTile/treeTile.html

@@ -14,7 +14,19 @@
                 class="tile-label sidebar-item-truncate-text"
                 title={treeNode.label}
             >
-                {treeNode.label}
+                <span if:true={getModifiedLabel.restOfLabelWithSpace.length}>
+                    {getModifiedLabel.restOfLabelWithSpace}
+                </span>
+                <span class="whitespace-nowrap">
+                    {getModifiedLabel.lastWord}
+                    <dx-icon
+                        if:true={isExternalLink}
+                        class="tile-external-link-icon"
+                        symbol="external-link-alt"
+                        sprite="general"
+                        size="xsmall"
+                    ></dx-icon>
+                </span>
             </span>
             <dx-metadata-badge
                 if:true={showMethod}

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

@@ -31,6 +31,7 @@ export default class TreeTile extends LightningElement {
     @api href!: string;
     @api showArrow = false;
     @api target!: string;
+    @api isExternalLink = false;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;
@@ -58,6 +59,22 @@ export default class TreeTile extends LightningElement {
         return "";
     }
 
+    // in case of multiline label, external link icon should not leave alone.
+    private get getModifiedLabel() {
+        const label = this.treeNode.label;
+        const labelArr = label.trim().split(" ");
+        const lastWord = labelArr.pop();
+        const restOfLabel = labelArr.join(" ");
+        const restOfLabelWithSpace = restOfLabel.length
+            ? `${restOfLabel} `
+            : "";
+
+        return {
+            lastWord,
+            restOfLabelWithSpace
+        };
+    }
+
     private get tileClass() {
         return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,