@salesforcedevs/dx-components 1.32.0-alpha.9 → 1.32.0

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -2,63 +2,34 @@
 @import "dxHelpers/text";
 @import "dxHelpers/commonTreeItem";
 
-/* List item states per spec: Default, Hover (#F7F7F7), Selected (#E6F2FF), Focus (blue outline), Focus+Selected */
 a {
     display: flex;
     flex-direction: column;
 }
 
-/* Match "Results" heading alignment. Less item padding so total height unchanged when box has more inner padding. */
 .sidebar-item {
-    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
-    background: transparent;
-    transition: background-color var(--dx-g-transition-hue-1x, 0.1s ease);
-    overflow: visible;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
 }
 
-/* Inner block: more vertical padding (12px) so box has more space top/bottom; 8px horizontal. margin-left so text aligns with Results. */
-.search-result {
-    margin-left: calc(-1 * var(--dx-g-spacing-sm));
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-sm);
-    border: none;
-    border-radius: var(--dx-g-spacing-xs);
-    transition: background-color var(--dx-g-transition-hue-1x, 0.1s ease);
+.sidebar-item:not(.sidebar-item-selected):focus-visible {
+    padding: var(--dx-g-spacing-smd) 0;
+    margin: 0 var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
+    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+    border-radius: var(--dx-g-spacing-2xs);
 }
 
-/* Hover: container/hover — cloud blue 95 */
-.sidebar-item:not(.sidebar-item-selected):hover .search-result {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-}
-
-/* Selected: full-width cloud blue bar + dark blue left accent (focus ring stays on inner .search-result) */
-.sidebar-item-selected {
-    margin-left: calc(-1 * var(--dx-c-sidebar-left-padding));
-    margin-right: calc(-1 * var(--dx-g-spacing-lg));
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    border-radius: 0;
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-20);
-    color: var(--dx-g-blue-vibrant-40) !important;
-}
-
-.sidebar-item-selected .search-result {
-    position: relative;
-    z-index: 1;
-    background: transparent;
-    color: inherit;
-}
-
-/* Focus: rings on inner .search-result only (smaller than full-width selected bar) */
-.sidebar-item:focus-visible {
-    outline: none !important;
-}
-
-.sidebar-item:focus-visible .search-result {
+.sidebar-item-selected:focus-visible {
+    padding: 0 var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
     outline: none;
-    border-radius: var(--dx-g-spacing-xs);
-    border: none;
 
-    /* White inner ring reads clearly on selected (cloud 95) and hover backgrounds */
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--dx-g-blue-vibrant-60);
+    .search-result {
+        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+        border-radius: var(--dx-g-spacing-2xs);
+        padding: var(--dx-g-spacing-smd) 0;
+    }
 }
 
 .search-text {
@@ -70,7 +41,6 @@ a {
 }
 
 .description {
-    line-clamp: 3;
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
 
@@ -82,13 +52,16 @@ a {
 
 .title {
     color: var(--dx-g-text-heading-color);
-    line-height: 18px;
-    display: block;
-    margin-bottom: 4px;
 }
 
-/* Match full-doc search highlight: light yellow from dx-css-variables */
+.title:hover {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
 .bold {
-    background-color: var(--dx-g-yellow-vibrant-90);
     font-weight: 700;
 }
+
+a > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -1,9 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { track } from "dxUtils/analytics";
-import { HighlightedSections } from "typings/custom";
+import { CoveoHighlights } from "typings/custom";
 
-const toChunks = (value: string, highlights: HighlightedSections) => {
+const toChunks = (value: string, highlights: CoveoHighlights) => {
     if (!highlights || highlights.length < 1) {
         return [
             {
@@ -52,11 +51,11 @@ const toChunks = (value: string, highlights: HighlightedSections) => {
 
 export default class SidebarSearchResult extends LightningElement {
     @api description!: string;
-    @api descriptionHighlights!: HighlightedSections;
+    @api descriptionHighlights!: CoveoHighlights;
     @api href!: string;
     @api selected!: boolean;
     @api header!: string;
-    @api titleHighlights!: HighlightedSections;
+    @api titleHighlights!: CoveoHighlights;
     @api select!: Function;
 
     private get titleChunks() {
@@ -73,13 +72,6 @@ export default class SidebarSearchResult extends LightningElement {
 
     private onClick(e: PointerEvent) {
         e.preventDefault();
-        track(e.currentTarget!, "custEv_scopedSearchItemSelected", {
-            click_text: this.header,
-            click_url: this.href,
-            element_title: this.header,
-            element_type: "link",
-            content_category: "documentation"
-        });
         this.select();
         window.location.href = this.href;
     }

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

@@ -64,7 +64,8 @@ export class TreeHandler {
             isExpanded: node.isExpanded || false,
             isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
-            method: node.method
+            method: node.method,
+            showForwardArrow: node.showForwardArrow
         };
 
         const mapItem = { node: convertedNode, parent };

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

@@ -58,6 +58,10 @@
     margin-left: var(--dx-g-spacing-xs);
 }
 
+.tile-forward-arrow {
+    margin-left: auto;
+}
+
 .whitespace-nowrap {
     white-space: nowrap;
 }

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

@@ -37,6 +37,16 @@
                 value={methodText}
                 color={metadataBadgeColor}
             ></dx-metadata-badge>
+            <div
+                class="flex tile-icon tile-forward-arrow"
+                if:true={showForwardArrow}
+            >
+                <dx-icon
+                    sprite="utility"
+                    symbol="forward"
+                    size={iconSize}
+                ></dx-icon>
+            </div>
         </div>
     </a>
 </template>

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

@@ -52,6 +52,10 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.method && !this.hasChildren;
     }
 
+    private get showForwardArrow() {
+        return this.treeNode.showForwardArrow;
+    }
+
     private get methodText() {
         if (this.treeNode.method && this.treeNode.method in methodTextMap) {
             return methodTextMap[this.treeNode.method];

package/src/modules/dxUtils/async/async.ts

@@ -43,3 +43,35 @@ export function pollUntil(
         }
     });
 }
+
+/**
+ * Returns the same settled value or rejection as `promise`, or rejects after `forMaximumMs`
+ * if it does not settle in time. When `forMaximumMs` is omitted or non-positive, returns
+ * `promise` unchanged. Clears the timeout when `promise` settles first.
+ */
+export function waitUntilResolved<T>(
+    promise: Promise<T>,
+    forMaximumMs?: number,
+    timeoutMessage = "Timed out waiting for promise to settle."
+): Promise<T> {
+    if (forMaximumMs == null || forMaximumMs <= 0) {
+        return promise;
+    }
+
+    return new Promise<T>((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+            reject(new Error(timeoutMessage));
+        }, forMaximumMs);
+
+        promise.then(
+            (value) => {
+                clearTimeout(timeoutId);
+                resolve(value);
+            },
+            (reason: unknown) => {
+                clearTimeout(timeoutId);
+                reject(reason);
+            }
+        );
+    });
+}

package/src/modules/dxUtils/data360Search/data360Search.ts

@@ -1,168 +0,0 @@
-/**
- * Data 360 search API – shared endpoints and helpers for sidebar search,
- * search results page, and has-results check.
- */
-
-const STORAGE_KEY_PREFIX = "data360-search:";
-
-/** Data 360 Search API result item (title, url, matchedText) */
-export interface Data360SearchResultItem {
-    title?: string;
-    url?: string;
-    matchedText?: string;
-}
-
-/** Normalized result shape stored in cache (no selected/select; those are applied on restore). */
-export interface Data360SearchCacheItem {
-    title: string;
-    titleHighlights: Array<{ length: number; offset: number }>;
-    excerpt: string;
-    excerptHighlights: Array<{ length: number; offset: number }>;
-    uniqueId: string;
-    href: string;
-}
-
-export interface Data360SearchCache {
-    query: string;
-    results: Data360SearchCacheItem[];
-    /** Timestamp when stored (Date.now()); missing on older entries (treated as stale). */
-    storedAt?: number;
-}
-
-const CACHE_MAX_AGE_MS = 2 * 60 * 60 * 1000; // 2 hours
-
-export function isCacheStale(cache: Data360SearchCache | null): boolean {
-    if (!cache?.storedAt) {
-        return true;
-    }
-    return Date.now() - cache.storedAt > CACHE_MAX_AGE_MS;
-}
-
-export function getStoredSearch(
-    baseUrlPath: string
-): Data360SearchCache | null {
-    try {
-        const raw = localStorage.getItem(`${STORAGE_KEY_PREFIX}${baseUrlPath}`);
-        if (!raw) {
-            return null;
-        }
-        const parsed = JSON.parse(raw) as Data360SearchCache;
-        if (
-            !parsed ||
-            typeof parsed.query !== "string" ||
-            !Array.isArray(parsed.results)
-        ) {
-            return null;
-        }
-        return parsed;
-    } catch {
-        return null;
-    }
-}
-
-export function setStoredSearch(
-    baseUrlPath: string,
-    data: Data360SearchCache
-): void {
-    try {
-        const toStore: Data360SearchCache = {
-            ...data,
-            storedAt: Date.now()
-        };
-        localStorage.setItem(
-            `${STORAGE_KEY_PREFIX}${baseUrlPath}`,
-            JSON.stringify(toStore)
-        );
-    } catch {
-        /* ignore quota or disabled localStorage */
-    }
-}
-
-export const DATA_360_SEARCH_PATH = "/data-360-search/search";
-export const DATA_360_HAS_RESULTS_PATH = "/data-360-search/has-results";
-export const DATA_360_SEARCH_ORIGIN = "https://developer.salesforce.com";
-
-export function getBaseUrlPath(): string {
-    const url = DATA_360_SEARCH_ORIGIN + window.location.pathname;
-    const lastSlash = url.lastIndexOf("/");
-    return lastSlash > 0 ? url.substring(0, lastSlash) : url;
-}
-
-/**
- * Read search query from URL: ?q=, ?keywords= (migrated to q), or #q=.
- */
-export function getQueryFromUrl(): string {
-    const params = new URLSearchParams(window.location.search);
-    const keywords = params.get("keywords");
-    if (keywords) {
-        const url = new URL(window.location.href);
-        url.searchParams.delete("keywords");
-        url.searchParams.set("q", keywords);
-        window.history.replaceState(null, "", url.href);
-        return keywords;
-    }
-    const qFromSearch = params.get("q");
-    if (qFromSearch) {
-        return qFromSearch;
-    }
-    const hash = window.location.hash.slice(1);
-    if (hash) {
-        try {
-            const qFromHash = new URLSearchParams(hash).get("q");
-            if (qFromHash) {
-                return qFromHash;
-            }
-        } catch {
-            /* ignore */
-        }
-    }
-    return "";
-}
-
-/**
- * Quick check if the current page has searchable results.
- * Only when this returns true should the Data 360 sidebar be shown.
- */
-export async function fetchHasResults(): Promise<boolean> {
-    try {
-        const res = await fetch(DATA_360_HAS_RESULTS_PATH, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ baseUrlPath: getBaseUrlPath() })
-        });
-        if (!res.ok) {
-            return false;
-        }
-        const data = await res.json();
-        return data.hasResults === true;
-    } catch {
-        return false;
-    }
-}
-
-/**
- * Run a Data 360 search. Returns the raw result items; callers normalize for UI.
- */
-export async function fetchSearch(
-    searchQuery: string
-): Promise<Data360SearchResultItem[]> {
-    const query = searchQuery.trim();
-    if (!query) {
-        return [];
-    }
-    const res = await fetch(DATA_360_SEARCH_PATH, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-            searchQuery: query,
-            baseUrlPath: getBaseUrlPath()
-        })
-    });
-    if (!res.ok) {
-        throw new Error(`Search API error: ${res.status}`);
-    }
-    const data = await res.json();
-    return Array.isArray(data)
-        ? data
-        : data?.results ?? data?.data?.results ?? [];
-}