@salesforcedevs/dx-components 1.31.0 → 1.32.0-alpha.1

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

@@ -2,34 +2,56 @@
 @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: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-xs) var(--dx-c-sidebar-left-padding);
+    background: transparent;
+    transition: background-color var(--dx-g-transition-hue-1x, 0.1s ease);
+    overflow: visible;
 }
 
-.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);
+/* 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-selected:focus-visible {
-    padding: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: none;
+/* Hover: light grey background in box shape only */
+.sidebar-item:not(.sidebar-item-selected):hover .search-result {
+    background: var(--dx-g-gray-95);
+}
+
+/* Selected: light blue background in box shape only */
+.sidebar-item-selected {
+    box-shadow: none;
+    color: var(--dx-g-blue-vibrant-40) !important;
+}
+
+.sidebar-item-selected .search-result {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    color: inherit;
+}
 
-    .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;
-    }
+/* Focus: only one box – remove anchor outline (from commonTreeItem), draw single blue outline on .search-result only */
+.sidebar-item:focus-visible {
+    outline: none !important;
+}
+
+.sidebar-item:focus-visible .search-result {
+    outline: 2px solid var(--dx-g-blue-vibrant-50);
+    outline-offset: 0;
+    border-radius: var(--dx-g-spacing-xs);
+    border: none;
 }
 
 .search-text {
@@ -54,11 +76,9 @@ a {
     color: var(--dx-g-text-heading-color);
 }
 
-.title:hover {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
+/* Match full-doc search highlight: light yellow from dx-css-variables */
 .bold {
+    background-color: var(--dx-g-yellow-vibrant-90);
     font-weight: 700;
 }
 

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { CoveoHighlights } from "typings/custom";
+import { HighlightedSections } from "typings/custom";
 
-const toChunks = (value: string, highlights: CoveoHighlights) => {
+const toChunks = (value: string, highlights: HighlightedSections) => {
     if (!highlights || highlights.length < 1) {
         return [
             {
@@ -51,11 +51,11 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
 
 export default class SidebarSearchResult extends LightningElement {
     @api description!: string;
-    @api descriptionHighlights!: CoveoHighlights;
+    @api descriptionHighlights!: HighlightedSections;
     @api href!: string;
     @api selected!: boolean;
     @api header!: string;
-    @api titleHighlights!: CoveoHighlights;
+    @api titleHighlights!: HighlightedSections;
     @api select!: Function;
 
     private get titleChunks() {

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

@@ -0,0 +1,168 @@
+/**
+ * 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 ?? [];
+}