@salesforcedevs/dx-components 0.19.3-alpha.47 → 0.19.3-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha.47",
+    "version": "0.19.3-alpha.50",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -122,7 +122,10 @@ export default class Sidebar extends LightningElement {
             this.assignFilteredTrees();
             this.dispatchEvent(
                 new CustomEvent("highlightedtermchange", {
-                    detail: this.searchText,
+                    detail: {
+                        query: this.searchText,
+                        termsToHighlight: [this.searchText]
+                    },
                     composed: true,
                     bubbles: true
                 })

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

@@ -89,6 +89,25 @@ export default class SidebarSearch extends LightningElement {
     private fetchingMoreResults: boolean = false;
     private didRender = false;
 
+    private get termsToHighlight(): string[] | null {
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return null;
+        }
+        return Array.from(
+            new Set(
+                [
+                    this.value,
+                    Object.keys(termsToHighlight),
+                    Object.keys(phrasesToHighlight),
+                    Object.values(termsToHighlight),
+                    Object.values(phrasesToHighlight)
+                ].flat(2)
+            )
+        ) as string[];
+    }
+
     private get hasCorrectCoveoConfig(): boolean {
         const coveoConfigurations = [
             this.coveoOrganizationId,
@@ -330,32 +349,19 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchHighlightedTermChange = () => {
-        const { termsToHighlight, phrasesToHighlight } =
-            this.engine?.state?.search?.response;
-        if (!termsToHighlight || !phrasesToHighlight) {
-            return;
+        if (this.termsToHighlight) {
+            console.log('dispatching terms to highlight')
+            this.dispatchEvent(
+                new CustomEvent("highlightedtermchange", {
+                    detail: {
+                        query: this.value,
+                        termsToHighlight: this.termsToHighlight
+                    },
+                    composed: true,
+                    bubbles: true
+                })
+            );
         }
-        const normalizedTermsToHighlight = Array.from(
-            new Set(
-                [
-                    this.value,
-                    Object.keys(termsToHighlight),
-                    Object.keys(phrasesToHighlight),
-                    Object.values(termsToHighlight),
-                    Object.values(phrasesToHighlight)
-                ].flat(2)
-            )
-        );
-        this.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: {
-                    query: this.value,
-                    termsToHighlight: normalizedTermsToHighlight
-                },
-                composed: true,
-                bubbles: true
-            })
-        );
     };
 
     private updateRecentSearches = () =>

package/src/modules/utils/highlight/highlight.ts

@@ -23,15 +23,9 @@ export const highlightTerms = (
         try {
             if (element.innerHTML.match(MARK_TAGS)) {
                 // Remove previously added mark tags
-                console.log(
-                    "matching marks",
-                    element,
-                    element.style.backgroundColor
-                );
                 element.innerHTML = element.innerHTML.replace(MARK_TAGS, "");
             }
             if (element.innerHTML.match(searchExp) && query) {
-                console.log("matching", element, element.innerHTML);
                 element.innerHTML = element.innerHTML.replace(
                     searchExp,
                     '<mark style="background-color:var(--dx-g-yellow-vibrant-90)">$&</mark>'