@salesforcedevs/dx-components 1.28.7-alpha.10 → 1.28.7-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.28.7-alpha.10",
+    "version": "1.28.7-alpha.12",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "6418874a60d7d6e4404e13517f2aa5c2746b1f39"
+    "gitHead": "d90a01c3e0b1366d6f262d986bfa0ef6ede99137"
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -4,8 +4,10 @@ import {
     type DataCloudSearchResultItem,
     fetchSearch
 } from "dxUtils/dataCloudSearch";
+import { createSearchRegExp } from "dxUtils/regexps";
 import { RecentSearches } from "dxUtils/recentSearches";
 import {
+    type HighlightedSections,
     Option,
     PopoverRequestCloseType,
     SidebarSearchResult
@@ -13,6 +15,27 @@ import {
 
 const SEARCH_DEBOUNCE_DELAY = 1200;
 
+/**
+ * Find all matches of the search query in text and return ranges for highlighting.
+ * Uses the same regex as the full-doc highlighter (createSearchRegExp) so sidebar
+ * and doc highlight the same phrases (including spaces between words).
+ */
+function getHighlightRanges(
+    text: string,
+    searchQuery: string
+): HighlightedSections {
+    if (!text || !searchQuery.trim()) {
+        return [];
+    }
+    const re = createSearchRegExp(searchQuery.trim());
+    const ranges: HighlightedSections = [];
+    let match: RegExpExecArray | null;
+    while ((match = re.exec(text)) !== null) {
+        ranges.push({ offset: match.index, length: match[0].length });
+    }
+    return ranges;
+}
+
 const UserRecentSearches = new RecentSearches();
 
 const getSearchQueryParam = (): string =>
@@ -87,11 +110,14 @@ export default class SidebarSearch extends LightningElement {
             : href;
         const isSelected =
             !!resultPath && resultPath === window.location.pathname;
+        const title = item.title ?? "";
+        const excerpt = item.matchedText ?? "";
+        const searchQuery = this.value.trim();
         return {
-            title: item.title ?? "",
-            titleHighlights: [],
-            excerpt: item.matchedText ?? "",
-            excerptHighlights: [],
+            title,
+            titleHighlights: getHighlightRanges(title, searchQuery),
+            excerpt,
+            excerptHighlights: getHighlightRanges(excerpt, searchQuery),
             uniqueId: href || `result-${index}`,
             href,
             selected: isSelected,
@@ -164,6 +190,7 @@ export default class SidebarSearch extends LightningElement {
     private onClickRecentSearch(e: CustomEvent) {
         this.value = e.detail;
         this.dispatchSidebarSearchChange(this.value);
+        this.dispatchOnLoading(true);
         this.submitSearch(true);
     }
 

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

@@ -58,7 +58,9 @@ a {
     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;
 }